/* ============================================================ SecTeer — shared site stylesheet Linked from every page's . Light theme, indigo accent. ============================================================ */ :root{ --bg:#FFFFFF;--soft:#F3F7FD;--panel:#FFFFFF;--stripbg:#F6F9FD; --ink:#0F1B2D;--muted:#566079;--faint:#8A93A6;--line:#E4E9F2; --accent:#2B54E6;--onaccent:#FFFFFF;--accentink:#2B54E6;--accentsoft:rgba(43,84,230,.10); --warnsoft:rgba(214,120,20,.10);--warnink:#B96C10; --oksoft:rgba(16,140,90,.12);--okink:#0C8A5A; --cardshadow:0 2px 12px rgba(16,27,45,.06); --ctaband:linear-gradient(158deg,#0E1B36 0%,#132A55 58%,#0B142B 100%); --navbg:rgba(255,255,255,.86);--prose:#33405a; } /* ---- theme + accent overrides (shared across pages via theme.js on ) ---- */ html.theme-dark{--bg:#0B0F1A;--soft:#0C1424;--panel:#121A2B;--stripbg:#0E1524;--ink:#EAEEF7;--muted:#93A0B8;--faint:#8A93A6;--line:#1E2740;--onaccent:#04140E;--cardshadow:none;--navbg:rgba(11,15,26,.82);--prose:#C3CCDD;--ctaband:linear-gradient(158deg,#0E1B36 0%,#132A55 58%,#0B142B 100%)} html.ac-teal{--accent:#0FB5A6;--accentink:#0C9488;--accentsoft:rgba(15,181,166,.12)} html.theme-dark.ac-teal{--accentink:#3FE7B8} html.ac-violet{--accent:#6B4EE6;--accentink:#6B4EE6;--accentsoft:rgba(107,78,230,.12)} html.theme-dark.ac-violet{--accentink:#b3a2ff} html.theme-dark.ac-indigo{--accentink:#7fa0ff} *{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--ink);font-family:'IBM Plex Sans',sans-serif;-webkit-font-smoothing:antialiased;line-height:1.5} a{color:var(--accentink);text-decoration:none} h1,h2,h3,h4{margin:0;font-family:'Sora',sans-serif;letter-spacing:-.02em} .wrap{max-width:1440px;margin:0 auto;padding:0 56px} .wrap-narrow{max-width:820px;margin:0 auto;padding:0 40px} /* nav */ .nav{position:sticky;top:0;z-index:20;background:var(--navbg);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)} .nav-in{display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;gap:32px;height:70px} .brand{display:flex;align-items:center;gap:11px;font-family:'Sora';font-weight:700;font-size:19px;letter-spacing:-.02em;color:var(--ink)} .logo{width:30px;height:30px;border-radius:9px;background:var(--accent);display:grid;place-items:center;flex:none} .logo-img{height:30px;width:auto;display:block} .logo-img.sm{height:26px} .logo-full{height:40px;width:auto;display:block} .logo-full.nav{height:36px} .logo-white-v{display:none} html.theme-dark .logo-color-v{display:none} html.theme-dark .logo-white-v{display:block} .tagline{font-family:'IBM Plex Mono';font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accentink);font-weight:600} .navlinks{display:flex;align-items:center;gap:26px;font-size:14px;font-weight:500} .navlinks>a{color:var(--muted)} .navlinks>a:hover{color:var(--ink)} /* platform dropdown */ .navgroup{position:relative} .navgroup::after{content:"";position:absolute;top:100%;left:0;right:0;height:10px} .navtrig{display:inline-flex;align-items:center;gap:6px;cursor:pointer;color:var(--muted);font-weight:500;padding:22px 0;margin:-22px 0} .navgroup:hover .navtrig{color:var(--ink)} .navcaret{transition:transform .18s ease} .navgroup:hover .navcaret{transform:rotate(180deg)} .navmenu{position:absolute;top:100%;left:-14px;min-width:326px;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 38px rgba(16,27,45,.16);padding:8px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .16s ease,transform .16s ease;z-index:40} .navgroup:hover .navmenu{opacity:1;visibility:visible;transform:translateY(0)} .navitem{display:block;padding:11px 13px;border-radius:10px} .navitem:hover{background:var(--accentsoft)} .ni-t{font-family:'Sora',sans-serif;font-weight:600;font-size:14px;color:var(--ink);letter-spacing:-.01em} .ni-d{font-size:12.5px;color:var(--muted);margin-top:3px} /* why-secteer mega menu — fixed + centered so it never clips at any width */ .navmenu.mega{position:fixed;top:64px;left:50%;min-width:0;width:min(748px,calc(100vw - 32px));padding:0;overflow:hidden;transform:translateX(-50%) translateY(6px)} .navgroup:hover .navmenu.mega{transform:translateX(-50%) translateY(0)} .mega-in{display:grid;grid-template-columns:236px 1fr} .mega-side{padding:24px 22px 20px;border-right:1px solid var(--line);background:var(--soft);display:flex;flex-direction:column} .mega-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accentink);font-weight:600} .mega-h{font-family:'Sora',sans-serif;font-weight:700;font-size:20px;line-height:1.18;letter-spacing:-.02em;color:var(--ink);margin-top:11px} .mega-p{font-size:12.5px;color:var(--muted);margin-top:10px;line-height:1.5} .mega-cta{margin-top:auto;padding-top:18px} .mega-cta .btn{width:100%;justify-content:center} .mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:10px} .usp{display:flex;gap:12px;padding:12px;border-radius:11px;align-items:flex-start} .usp:hover{background:var(--accentsoft)} .usp-ico{flex:none;width:36px;height:36px;border-radius:10px;background:var(--accentsoft);display:grid;place-items:center;margin-top:1px} .usp-t{display:block;font-family:'Sora',sans-serif;font-weight:600;font-size:13.5px;color:var(--ink);letter-spacing:-.01em} .usp-d{display:block;font-size:11.5px;color:var(--muted);margin-top:4px;line-height:1.42} .usp-wide{grid-column:1 / -1;border-top:1px solid var(--line);border-radius:0 0 11px 11px;margin-top:2px} .usp-wide:hover{background:var(--accentsoft)} /* platform mega menu */ .plat-grid{display:grid;grid-template-columns:repeat(3,1fr)} .plat-card{display:flex;flex-direction:column;border-right:1px solid var(--line)} .plat-card:last-child{border-right:none} .plat-card:hover{background:var(--accentsoft)} .plat-viz{position:relative;height:96px;overflow:hidden;background:linear-gradient(180deg,var(--soft),var(--panel));border-bottom:1px solid var(--line)} .plat-body{padding:15px 18px 18px;display:flex;flex-direction:column;flex:1} .plat-tag{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--accentink);font-weight:600} .plat-name{font-family:'Sora',sans-serif;font-weight:700;font-size:15px;color:var(--ink);letter-spacing:-.01em;margin-top:5px} .plat-desc{font-size:12.5px;color:var(--muted);margin-top:8px;line-height:1.5} .plat-more{margin-top:13px;font-size:12.5px;font-weight:600;color:var(--accentink);display:flex;align-items:center;gap:5px} .navcta{display:flex;gap:14px;align-items:center} .btn-navdemo{transition:transform .18s ease,box-shadow .22s ease,background .22s ease} .navcta .btn.btn-navdemo{background:linear-gradient(140deg,#3559d6 0%,#25409e 52%,#1b2d73 100%);color:#fff;border:1px solid rgba(120,150,230,.34);box-shadow:0 8px 20px rgba(20,36,92,.34),inset 0 1px 0 rgba(255,255,255,.2)} .navcta .btn.btn-navdemo:hover{transform:translateY(-1px);background:linear-gradient(140deg,#3f65e6 0%,#2b49b0 52%,#213684 100%);box-shadow:0 12px 28px rgba(26,45,115,.46),inset 0 1px 0 rgba(255,255,255,.26)} .link-login{font-size:14px;color:var(--muted);font-weight:600} /* buttons */ .btn{border:none;border-radius:10px;font-weight:600;font-size:14px;padding:10px 18px;font-family:'IBM Plex Sans';cursor:pointer;white-space:nowrap;display:inline-block;text-align:center} .btn-primary{background:var(--accent);color:var(--onaccent)} .btn-primary:hover{background:#2246c8} .btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line)} .btn-ghost:hover{border-color:var(--accent);color:var(--accent)} .btn-lg{padding:14px 26px;font-size:15px;border-radius:12px} .btn-block{display:block;width:100%} .btn-oncta{background:#fff;color:#0d1a14} /* generic sections */ .sec{padding:80px 0} .sec-tight{padding:56px 0} .eyebrow{font-family:'IBM Plex Mono';font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accentink);font-weight:600} .sec-kick{font-family:'IBM Plex Mono';font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accentink);font-weight:600} .sec-h{font-family:'Sora';font-weight:700;font-size:34px;letter-spacing:-.025em;margin-top:10px;max-width:660px;line-height:1.12} .sec-sub{font-size:16px;color:var(--muted);margin-top:14px;max-width:620px;line-height:1.6} .center{text-align:center} .center .sec-h,.center .sec-sub{margin-left:auto;margin-right:auto} /* page hero band */ .phero{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--soft),var(--bg));border-bottom:1px solid var(--line);padding:70px 0 60px} .phero-viz{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block} .phero>.wrap{position:relative;z-index:2} .phero h1{font-size:46px;line-height:1.05;letter-spacing:-.03em;margin-top:16px;max-width:780px} .phero .lead{font-size:19px;line-height:1.6;color:var(--muted);margin-top:20px;max-width:640px} .phero .cta-row{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap} /* checklist */ .check{color:var(--accentink);font-weight:800} .plist{display:flex;flex-direction:column;gap:10px} .li{font-size:14px;color:var(--ink);display:flex;gap:9px;align-items:flex-start;line-height:1.5} .li .check{margin-top:1px} .microtrust{display:flex;flex-wrap:wrap;gap:18px;margin-top:22px;font-size:13px;color:var(--muted)} .mt{display:flex;gap:7px;align-items:center} /* cards grid */ .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .cards-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px} .pcard{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:28px;box-shadow:var(--cardshadow)} .pico{width:48px;height:48px;border-radius:12px;background:var(--accentsoft);display:grid;place-items:center;margin-bottom:20px} .pkicker{font-family:'IBM Plex Mono';font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600} .ptitle{font-family:'Sora';font-weight:600;font-size:20px;color:var(--ink);margin:6px 0 12px} .pdesc{font-size:14px;line-height:1.6;color:var(--muted)} /* metric strip */ .strip{display:flex;justify-content:space-between;gap:20px;padding:30px 44px;border:1px solid var(--line);border-radius:18px;background:var(--stripbg)} .mnum{font-family:'Sora';font-weight:700;font-size:34px;color:var(--ink);letter-spacing:-.02em} .mlab{font-size:13px;color:var(--muted);margin-top:6px} /* split */ .split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center} /* steps */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .step{position:relative;padding-top:26px;border-top:2px solid var(--line)} .step-t{font-family:'Sora';font-weight:600;font-size:18px;color:var(--ink);margin-bottom:8px} .step-d{font-size:14px;line-height:1.6;color:var(--muted)} /* chips */ .chips{display:flex;flex-wrap:wrap;gap:10px} .chip{font-size:13px;font-weight:500;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:9px 16px;box-shadow:var(--cardshadow)} /* pills / badges */ .pill{font-family:'IBM Plex Mono';font-size:11px;font-weight:600;padding:4px 10px;border-radius:999px} .pill-fix{background:var(--accentsoft);color:var(--accentink)} .pill-ok{background:var(--oksoft);color:var(--okink)} .pill-wait{background:var(--warnsoft);color:var(--warnink)} /* console mock */ .console{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:var(--cardshadow)} .con-top{display:flex;align-items:center;justify-content:space-between;padding:4px 6px 14px;border-bottom:1px solid var(--line)} .con-title{font-size:13px;font-weight:600;color:var(--ink);display:flex;gap:8px;align-items:center} .con-live{font-family:'IBM Plex Mono';font-size:11px;color:var(--accentink);display:flex;gap:6px;align-items:center} .dot{width:7px;height:7px;border-radius:50%;background:var(--accent)} .con-row{display:flex;align-items:center;justify-content:space-between;padding:13px 6px;border-bottom:1px solid var(--line)} .con-row:last-child{border-bottom:none} .con-app{font-size:13px;color:var(--ink);font-weight:500} .con-cve{font-family:'IBM Plex Mono';font-size:11px;color:var(--muted);margin-top:2px} /* CTA band */ .cta-band{background:var(--ctaband);border-radius:22px;padding:56px 52px;display:flex;justify-content:space-between;align-items:center;gap:28px} .cta-h{font-family:'Sora';font-weight:700;font-size:32px;letter-spacing:-.025em;color:#fff} .cta-sub{font-size:15px;color:#fff;opacity:.82;margin-top:8px} /* pricing */ .price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start} .price-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:32px 28px;box-shadow:var(--cardshadow)} .price-card.feat{border-color:var(--accent);box-shadow:0 12px 40px rgba(43,84,230,.16)} .price-tag{font-family:'IBM Plex Mono';font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accentink);font-weight:600} .price-num{font-family:'Sora';font-weight:700;font-size:44px;letter-spacing:-.03em;margin:14px 0 2px} .price-num span{font-size:16px;color:var(--muted);font-weight:500} .price-note{font-size:13px;color:var(--muted);margin-bottom:22px} /* forms */ .form-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:36px;box-shadow:var(--cardshadow)} .field{margin-bottom:18px} .label{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:7px} .input,.textarea,.select{width:100%;border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-size:14px;font-family:'IBM Plex Sans';color:var(--ink);background:var(--bg)} .input:focus,.textarea:focus,.select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accentsoft)} .textarea{min-height:130px;resize:vertical} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px} .form-foot{font-size:13px;color:var(--muted);margin-top:16px;text-align:center} .auth-wrap{max-width:440px;margin:0 auto;padding:60px 40px 80px} .auth-logo{display:flex;justify-content:center;margin-bottom:24px} /* FAQ accordion */ .faq{border-top:1px solid var(--line)} .faq details{border-bottom:1px solid var(--line)} .faq summary{list-style:none;cursor:pointer;padding:22px 4px;font-family:'Sora';font-weight:600;font-size:17px;color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:20px} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:'+';font-family:'IBM Plex Mono';font-size:22px;color:var(--accentink);font-weight:500} .faq details[open] summary::after{content:'–'} .faq .ans{padding:0 4px 24px;font-size:15px;color:var(--muted);line-height:1.65;max-width:820px} /* blog */ .blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px} .bcard{background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--cardshadow);display:flex;flex-direction:column} .bcard-top{height:150px;background:linear-gradient(130deg,#1a2f66,#2B54E6)} .bcard-top.v2{background:linear-gradient(130deg,#0C8A5A,#12b57e)} .bcard-top.v3{background:linear-gradient(130deg,#0F1B2D,#39507f)} .bcard-body{padding:22px 22px 24px} .bcard-tag{font-family:'IBM Plex Mono';font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--accentink);font-weight:600} .bcard-t{font-family:'Sora';font-weight:600;font-size:18px;color:var(--ink);margin:8px 0 10px;line-height:1.3} .bcard-x{font-size:14px;color:var(--muted);line-height:1.55} .bcard-meta{font-size:12px;color:var(--faint);margin-top:16px} /* prose (legal / articles) */ .prose{max-width:760px;font-size:16px;line-height:1.75;color:var(--ink)} .prose h2{font-size:24px;margin:38px 0 12px} .prose h3{font-size:19px;margin:28px 0 10px} .prose p{margin:0 0 16px;color:var(--prose)} .prose ul{margin:0 0 16px;padding-left:22px;color:var(--prose)} .prose li{margin-bottom:8px} .prose a{text-decoration:underline} .prose h4{font-size:16px;margin:22px 0 8px;font-family:'Sora',sans-serif} .prose table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:14px} .prose th,.prose td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top;color:var(--prose)} .prose th{background:var(--stripbg);font-family:'IBM Plex Mono';font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);font-weight:600} .prose .clause{counter-reset:none} .prose blockquote{margin:0 0 16px;padding:2px 0 2px 16px;border-left:3px solid var(--line);color:var(--muted);font-style:italic} .doc-meta{font-size:13px;color:var(--faint);font-family:'IBM Plex Mono';margin-top:10px} /* footer */ .foot{border-top:1px solid var(--line);padding:56px 0 40px;background:var(--soft)} .foot-grid{display:grid;grid-template-columns:1.5fr repeat(5,1fr);gap:26px} .foot-brandtxt{font-size:13px;color:var(--muted);line-height:1.6;margin-top:14px;max-width:250px} .foot-h{font-family:'IBM Plex Mono';font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:16px} .foot-col a{display:block;font-size:14px;color:var(--ink);margin-bottom:11px} .foot-col a:hover{color:var(--accent)} .foot-bot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:44px;padding-top:24px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)} .foot-legal{display:flex;gap:18px;flex-wrap:wrap;align-items:center} .foot-legal a{color:var(--muted)} .foot-legal a:hover{color:var(--accent)} /* comparison table */ .cmp-wrap{overflow-x:auto;margin-top:34px} table.cmp{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--panel);box-shadow:var(--cardshadow);min-width:640px} .cmp th,.cmp td{text-align:left;padding:16px 20px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);font-size:14px;line-height:1.5;vertical-align:top;color:var(--ink)} .cmp th:last-child,.cmp td:last-child{border-right:none} .cmp thead th{font-family:'Sora',sans-serif;font-weight:700;font-size:15px;background:var(--soft)} .cmp thead th small{display:block;font-family:'IBM Plex Sans',sans-serif;font-weight:500;font-size:12px;color:var(--muted);margin-top:3px} .cmp tbody tr:last-child td{border-bottom:none} .cmp .dim{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);width:210px} .cmp .feat{background:var(--accentsoft)} .cmp thead th.feat{color:var(--accentink)} .cmp thead th.feat small{color:var(--accentink);opacity:.8} .cmp .yes{color:var(--okink);font-weight:800;margin-right:7px} .cmp .no{color:var(--faint);font-weight:800;margin-right:7px} /* nav responsive — must stay last so it beats the base .navlinks rule */ @media (max-width:1180px){ .nav-in{gap:20px} .nav-in .navlinks{gap:16px;font-size:13.5px;min-width:0} .nav-in .brand{flex:none} } @media (max-width:980px){ .nav-in{gap:14px} .nav-in .navlinks{gap:12px;font-size:12.5px} .nav-in .link-login{display:none} } @media (max-width:720px){ .nav-in .navlinks{display:none} } .pageback{display:inline-flex;align-items:center;gap:8px;font-family:'IBM Plex Sans',sans-serif;font-size:13.5px;font-weight:600;color:var(--muted);text-decoration:none;transition:color .2s ease,gap .2s ease} .pageback:hover{color:var(--accentink);gap:11px} .pageback svg{flex:none} .pageback-bar{padding:20px 0 4px} .phero .pageback{margin-bottom:20px}