/* ===================================================================== LayerOS — shared styles (all pages) ===================================================================== */ :root{ --bg:#05080f; --bg2:#0a1019; --panel:rgba(255,255,255,.035); --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.16); --ink:#eef3fa; --muted:#93a1b5; --dim:#5c6a7e; --accent:#38d9f5; --accent2:#3b82f6; --good:#34d399; --warn:#fbbf24; --bad:#f87171; --grad:linear-gradient(92deg,var(--accent),var(--accent2)); --r:16px; --maxw:1120px; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ background:var(--bg);color:var(--ink); font:16px/1.65 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; /* clip, not hidden: hidden turns into its own scroll container, which breaks window.scrollY (progress bar, nav state, reveals). clip only cuts horizontal overflow without hijacking scrolling. */ -webkit-font-smoothing:antialiased;overflow-x:clip; } ::selection{background:rgba(56,217,245,.25)} a{color:inherit;text-decoration:none} img{max-width:100%} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px} section{position:relative;padding:104px 0} h1,h2,h3,.logo,.counter .n,.plan .price{font-family:"Space Grotesk",Inter,sans-serif} h1,h2,h3{font-weight:700;letter-spacing:-.025em;line-height:1.1} h2{font-size:clamp(28px,4vw,42px)} .lead{color:var(--muted);font-size:18px;max-width:640px} .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600; letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:18px} .eyebrow::before{content:"";width:22px;height:1.5px;background:var(--grad);border-radius:2px} .center{text-align:center} .center .eyebrow{justify-content:center} .center .lead{margin:14px auto 0} .grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} /* atmosphere */ .atmo{position:fixed;inset:0;z-index:-2;background: radial-gradient(900px 480px at 78% -8%,rgba(59,130,246,.16),transparent 60%), radial-gradient(720px 420px at 12% 14%,rgba(56,217,245,.10),transparent 60%),var(--bg)} .gridbg{position:fixed;inset:0;z-index:-1;opacity:.5;pointer-events:none;background: linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px); background-size:56px 56px; mask-image:radial-gradient(1200px 800px at 50% 0%,black 30%,transparent 85%); -webkit-mask-image:radial-gradient(1200px 800px at 50% 0%,black 30%,transparent 85%)} /* film-grain overlay — kills the flat "AI gradient" look without any assets */ .grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.05;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")} /* floating glow orbs (parallax via JS) */ .orb{position:fixed;border-radius:50%;filter:blur(90px);z-index:-1;pointer-events:none;opacity:.5} .orb.o1{width:420px;height:420px;background:rgba(56,217,245,.13);top:-120px;right:-80px} .orb.o2{width:360px;height:360px;background:rgba(59,130,246,.13);top:45%;left:-140px} /* scroll progress bar */ #progress{position:fixed;top:0;left:0;height:2.5px;width:0;background:var(--grad);z-index:60; box-shadow:0 0 12px rgba(56,217,245,.6)} /* buttons */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px; padding:13px 24px;border-radius:12px;font-weight:600;font-size:15.5px; border:1px solid var(--line2);color:var(--ink);cursor:pointer; transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s; background:rgba(255,255,255,.04)} .btn:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.3)} .btn.primary{background:var(--grad);border:none;color:#04121c;box-shadow:0 6px 26px rgba(56,190,245,.28)} .btn.primary:hover{box-shadow:0 10px 34px rgba(56,190,245,.4)} .btn.small{padding:9px 16px;font-size:14px;border-radius:10px} /* nav */ nav.top{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .25s,border-color .25s; border-bottom:1px solid transparent} nav.top.scrolled{background:rgba(6,9,15,.85);backdrop-filter:blur(14px);border-color:var(--line)} .nav-inner{max-width:var(--maxw);margin:0 auto;padding:0 24px;height:66px;display:flex;align-items:center;gap:30px} .logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;letter-spacing:-.01em} .logo svg{display:block} .nav-links{display:flex;gap:24px;font-size:14.5px;color:var(--muted)} .nav-links a{transition:color .15s;padding:4px 0;border-bottom:1.5px solid transparent} .nav-links a:hover{color:var(--ink)} .nav-links a.here{color:var(--accent);border-bottom-color:var(--accent)} .nav-cta{margin-left:auto;display:flex;gap:10px;align-items:center} .burger{display:none;margin-left:auto;background:none;border:1px solid var(--line2);border-radius:10px; color:var(--ink);width:40px;height:40px;font-size:18px;cursor:pointer} .mobile-menu{display:none;position:fixed;top:66px;left:0;right:0;z-index:49;background:rgba(6,9,15,.97); backdrop-filter:blur(16px);border-bottom:1px solid var(--line);padding:18px 24px 26px} .mobile-menu.open{display:block} .mobile-menu a{display:block;padding:13px 4px;font-size:16px;font-weight:600;border-bottom:1px solid var(--line)} .mobile-menu a:last-child{border:none} /* page hero (subpages) */ .page-hero{padding:160px 0 40px} .page-hero h1{font-size:clamp(34px,4.8vw,52px);font-weight:800} .page-hero .lead{margin-top:18px} /* home hero */ .hero{padding:172px 0 80px;overflow:hidden} .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center} .hero h1{font-size:clamp(38px,5.4vw,60px);font-weight:800} .hero .lead{margin-top:20px} .hero-ctas{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap} .trustline{margin-top:22px;font-size:13.5px;color:var(--dim);display:flex;align-items:center;gap:8px} .trustline .dot{width:6px;height:6px;border-radius:50%;background:var(--good);box-shadow:0 0 10px var(--good);animation:pulse 2.4s infinite} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}} /* rotating word */ .rot{display:inline-block;position:relative;color:transparent} .rot span{position:absolute;left:0;top:0;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent; opacity:0;transform:translateY(12px);transition:opacity .45s ease,transform .45s ease;white-space:nowrap} .rot span.on{opacity:1;transform:none} /* hero flow visual */ .flow{position:relative;display:flex;flex-direction:column;gap:14px} .fcard{background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.028)); border:1px solid var(--line);border-radius:var(--r);padding:16px 18px; backdrop-filter:blur(8px);box-shadow:0 18px 48px rgba(0,0,0,.42); opacity:0;transform:translateY(18px) scale(.985);animation:fpop .7s cubic-bezier(.2,.8,.2,1) forwards} .fcard:nth-child(2){animation-delay:.25s} .fcard:nth-child(3){animation-delay:1.05s;margin-left:26px} .fcard:nth-child(4){animation-delay:1.9s;margin-left:8px} .fcard:nth-child(5){animation-delay:2.75s;margin-left:34px} @keyframes fpop{to{opacity:1;transform:none}} .frow{display:flex;align-items:center;gap:12px} .ficon{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none;font-size:17px} .i-red{background:rgba(248,113,113,.14);border:1px solid rgba(248,113,113,.3)} .i-cyan{background:rgba(56,217,245,.12);border:1px solid rgba(56,217,245,.32)} .i-green{background:rgba(52,211,153,.13);border:1px solid rgba(52,211,153,.32)} .ft b{font-size:14.5px;display:block} .ft span{font-size:13px;color:var(--muted)} .fbadge{margin-left:auto;font-size:11.5px;font-weight:700;letter-spacing:.06em;padding:4px 10px;border-radius:99px} .b-red{color:var(--bad);background:rgba(248,113,113,.12)} .b-live{color:var(--accent);background:rgba(56,217,245,.1)} .b-good{color:var(--good);background:rgba(52,211,153,.12)} .fmsg{margin-top:12px;padding:11px 14px;border-radius:12px;font-size:13.5px;line-height:1.5} .m-ai{background:rgba(56,217,245,.08);border:1px solid rgba(56,217,245,.18)} .m-cust{background:rgba(255,255,255,.05);border:1px solid var(--line);margin-top:8px} .fmsg small{display:block;font-size:11px;color:var(--dim);margin-bottom:3px;letter-spacing:.05em;text-transform:uppercase;font-weight:600} .flowline{position:absolute;left:19px;top:44px;bottom:44px;width:2px;z-index:-1; background:linear-gradient(180deg,var(--bad),var(--accent) 45%,var(--good));opacity:.35;border-radius:2px} /* counters strip */ .counters{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:64px} .counter{padding:24px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line);text-align:center} .counter .n{font-size:clamp(26px,3.4vw,38px);font-weight:800;background:var(--grad); -webkit-background-clip:text;background-clip:text;color:transparent} .counter .l{font-size:13px;color:var(--muted);margin-top:6px} /* marquee */ .marquee{overflow:hidden;border-block:1px solid var(--line);padding:16px 0;margin-top:70px; mask-image:linear-gradient(90deg,transparent,black 12%,black 88%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,black 12%,black 88%,transparent)} .marq-track{display:flex;gap:44px;width:max-content;animation:marq 30s linear infinite} .marquee:hover .marq-track{animation-play-state:paused} .marq-track span{font-size:14px;font-weight:600;color:var(--dim);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap} .marq-track span::before{content:"◆";color:var(--accent);margin-right:14px;font-size:9px;vertical-align:2px} @keyframes marq{to{transform:translateX(-50%)}} /* generic cards */ .cards{display:grid;gap:18px;margin-top:48px} .cards.c3{grid-template-columns:repeat(3,1fr)} .cards.c2{grid-template-columns:repeat(2,1fr)} .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r); padding:26px;transition:transform .22s ease,border-color .22s,background .22s;will-change:transform} .card:hover{border-color:rgba(56,217,245,.35);background:rgba(255,255,255,.05)} .card .ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;margin-bottom:16px; background:rgba(56,217,245,.1);border:1px solid rgba(56,217,245,.25);font-size:19px} .card h3{font-size:17.5px;margin-bottom:8px} .card p{font-size:14.5px;color:var(--muted)} .problem-line{margin-top:34px;padding:22px 26px;border-radius:var(--r);font-size:17.5px;font-weight:600; background:linear-gradient(90deg,rgba(248,113,113,.09),rgba(56,217,245,.07));border:1px solid var(--line)} .problem-line span{color:var(--accent)} /* dashboard mockup */ .dash{margin-top:52px;border-radius:20px;border:1px solid var(--line2);overflow:hidden; background:linear-gradient(180deg,#0c1420,#090f18); box-shadow:0 40px 90px rgba(0,0,0,.55),0 0 0 1px rgba(56,217,245,.05)} .dash-top{display:flex;align-items:center;gap:8px;padding:13px 18px;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--dim)} .dash-top i{width:10px;height:10px;border-radius:50%;display:inline-block} .dash-body{display:grid;grid-template-columns:1.15fr .85fr} .dash-main{padding:26px;border-right:1px solid var(--line)} .dash-side{padding:26px;display:flex;flex-direction:column;gap:14px} .dtag{display:inline-flex;gap:7px;align-items:center;font-size:11.5px;font-weight:700;letter-spacing:.07em; text-transform:uppercase;padding:4px 11px;border-radius:99px} .dash h4{font-size:19px;margin:14px 0 4px} .dmeta{font-size:13px;color:var(--muted);display:flex;gap:16px;flex-wrap:wrap;margin-bottom:18px} .dmeta b{color:var(--ink)} .dsummary{background:rgba(56,217,245,.06);border:1px solid rgba(56,217,245,.16);border-radius:12px;padding:15px 17px;font-size:14px;color:#cfe0ef} .dsummary small{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:5px} .dactions{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap} .dbtn{padding:9px 15px;border-radius:10px;font-size:13.5px;font-weight:600;border:1px solid var(--line2); background:rgba(255,255,255,.045);cursor:pointer;transition:.15s;color:var(--ink);font-family:inherit} .dbtn:hover{border-color:rgba(56,217,245,.4)} .dbtn.p{background:var(--grad);border:none;color:#04121c} .sidecard{background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:15px 17px} .sidecard small{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);font-weight:700;margin-bottom:7px} .sidecard .v{font-size:14.5px;font-weight:600} .sidecard .v em{font-style:normal;color:var(--muted);font-weight:400;font-size:13px} .urg{display:flex;align-items:center;gap:8px} .urg .bar{flex:1;height:6px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden} .urg .bar i{display:block;height:100%;width:82%;border-radius:4px;background:linear-gradient(90deg,var(--warn),var(--bad))} /* steps (home) */ .steps{margin-top:54px;display:grid;grid-template-columns:repeat(5,1fr);gap:16px;counter-reset:step} .step{position:relative;padding:24px 20px 22px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line)} .step::before{counter-increment:step;content:counter(step,decimal-leading-zero); font-size:12px;font-weight:800;letter-spacing:.1em;color:var(--accent)} .step h3{font-size:15.5px;margin:10px 0 6px} .step p{font-size:13px;color:var(--muted)} .step::after{content:"";position:absolute;top:34px;right:-14px;width:14px;height:2px;background:var(--line2)} .step:last-child::after{display:none} /* vertical timeline (how-it-works page) */ .vtl{position:relative;max-width:820px;margin:56px auto 0;padding-left:38px} .vtl::before{content:"";position:absolute;left:11px;top:6px;bottom:6px;width:2px; background:linear-gradient(180deg,var(--accent),var(--accent2));opacity:.35;border-radius:2px} .vt{position:relative;padding:0 0 44px} .vt:last-child{padding-bottom:0} .vt::before{content:"";position:absolute;left:-33px;top:6px;width:12px;height:12px;border-radius:50%; background:var(--bg);border:2.5px solid var(--accent);box-shadow:0 0 14px rgba(56,217,245,.5)} .vt h3{font-size:19px;margin-bottom:8px} .vt h3 small{font-size:12px;font-weight:800;letter-spacing:.1em;color:var(--accent);display:block;margin-bottom:6px} .vt p{color:var(--muted);font-size:15px;max-width:640px} .vt .detail{margin-top:14px;padding:15px 18px;border-radius:12px;background:var(--panel); border:1px solid var(--line);font-size:13.5px;color:var(--muted)} .vt .detail b{color:var(--ink)} /* layers stack */ .layersec{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;margin-top:20px} .stack{display:flex;flex-direction:column;align-items:center;padding:30px 0} .layer{width:min(360px,88%);padding:15px 22px;border-radius:14px;font-weight:600;font-size:14.5px; display:flex;justify-content:space-between;align-items:center; background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03)); border:1px solid var(--line2);backdrop-filter:blur(6px); transition:transform .3s ease,border-color .3s;margin-top:-8px;box-shadow:0 16px 40px rgba(0,0,0,.4)} .layer:hover{transform:translateY(-6px);border-color:rgba(56,217,245,.45);z-index:3} .layer span{font-size:11.5px;color:var(--dim);font-weight:500} .layer.now{border-color:rgba(56,217,245,.5);background:linear-gradient(180deg,rgba(56,217,245,.13),rgba(56,217,245,.05))} .layer.now span{color:var(--accent)} .checks{margin-top:26px;display:grid;gap:12px} .checks li{list-style:none;display:flex;gap:11px;font-size:15px;color:var(--muted)} .checks li::before{content:"✓";color:var(--good);font-weight:800} /* tabs */ .tabs{display:flex;gap:8px;flex-wrap:wrap;margin-top:40px} .tab{padding:9px 18px;border-radius:99px;font-size:14px;font-weight:600;border:1px solid var(--line); color:var(--muted);cursor:pointer;background:transparent;transition:.15s;font-family:inherit} .tab:hover{color:var(--ink)} .tab.active{background:rgba(56,217,245,.12);border-color:rgba(56,217,245,.45);color:var(--accent)} .tabpanes{margin-top:26px} .pane{display:none;grid-template-columns:1fr 1fr 1fr;gap:16px} .pane.active{display:grid;animation:fadein .4s ease} @keyframes fadein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .uc{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px} .uc b{display:block;font-size:14.5px;margin-bottom:5px} .uc p{font-size:13px;color:var(--muted)} /* testimonials */ .quote{position:relative;padding:28px} .quote p{font-size:15.5px;color:#d4deea} .quote footer{margin-top:16px;font-size:13.5px;color:var(--muted)} .quote footer b{color:var(--ink);display:block;font-size:14px} .tnote{margin-top:20px;font-size:12.5px;color:var(--dim);text-align:center} .bigquote{padding:34px;border-radius:20px;background:var(--panel);border:1px solid var(--line)} .bigquote .mark{font-size:44px;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800} .bigquote p{font-size:17px;color:#dbe4ef;margin-top:10px} .bigquote .who{margin-top:20px;display:flex;align-items:center;gap:13px} .bigquote .av{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:15px; background:rgba(56,217,245,.13);border:1px solid rgba(56,217,245,.35);color:var(--accent)} .bigquote .who b{display:block;font-size:14.5px} .bigquote .who span{font-size:13px;color:var(--muted)} .bigquote .res{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:13.5px;color:var(--good);font-weight:600} /* founder / values */ .founder{max-width:760px;margin:0 auto;text-align:center} .founder blockquote{font-size:clamp(19px,2.4vw,24px);line-height:1.55;font-weight:500;color:#dde6f1;margin-top:26px} .founder .sig{margin-top:26px;color:var(--muted);font-size:14.5px} .founder .sig b{color:var(--ink)} .value{padding:26px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line)} .value .n{font-size:13px;font-weight:800;color:var(--accent);letter-spacing:.1em} .value h3{font-size:17px;margin:10px 0 8px} .value p{font-size:14px;color:var(--muted)} /* pricing */ .plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:52px;align-items:stretch} .plan{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:30px;display:flex;flex-direction:column;position:relative} .plan.featured{border-color:rgba(56,217,245,.5);background:linear-gradient(180deg,rgba(56,217,245,.08),rgba(255,255,255,.03));box-shadow:0 24px 60px rgba(20,120,160,.18)} .plan .flag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);font-size:11px;font-weight:800;letter-spacing:.1em; text-transform:uppercase;background:var(--grad);color:#04121c;padding:5px 14px;border-radius:99px} .plan h3{font-size:17px} .plan .price{font-size:34px;font-weight:800;margin:14px 0 2px} .plan .price small{font-size:14px;color:var(--muted);font-weight:500} .plan .pdesc{font-size:13.5px;color:var(--muted);margin-bottom:20px} .plan ul{margin:0 0 26px;display:grid;gap:10px} .plan li{list-style:none;font-size:14px;color:var(--muted);display:flex;gap:10px} .plan li::before{content:"✓";color:var(--accent);font-weight:800} .plan .btn{margin-top:auto;width:100%} .pilot{margin-top:22px;text-align:center;font-size:13.5px;color:var(--dim)} /* FAQ */ .faq{max-width:780px;margin:44px auto 0} .qa{border:1px solid var(--line);border-radius:14px;margin-bottom:12px;background:var(--panel);overflow:hidden} .qa button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;text-align:left; padding:19px 22px;background:none;border:none;color:var(--ink);font:600 15.5px Inter,sans-serif;cursor:pointer} .qa .plus{flex:none;width:22px;height:22px;border-radius:7px;display:grid;place-items:center;color:var(--accent); border:1px solid rgba(56,217,245,.35);font-size:15px;transition:transform .25s} .qa.open .plus{transform:rotate(45deg)} .qa .a{max-height:0;overflow:hidden;transition:max-height .3s ease} .qa .a p{padding:0 22px 20px;font-size:14.5px;color:var(--muted)} /* CTA panel + form */ .cta-panel{border-radius:24px;border:1px solid var(--line2);padding:60px 48px; background:radial-gradient(600px 300px at 20% 0%,rgba(56,217,245,.14),transparent 65%), radial-gradient(500px 280px at 85% 100%,rgba(59,130,246,.14),transparent 60%), rgba(255,255,255,.03); display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center} .form{display:grid;gap:13px} .form .row{display:grid;grid-template-columns:1fr 1fr;gap:13px} .form input,.form select,.form textarea{width:100%;padding:13px 15px;border-radius:11px;border:1px solid var(--line2); background:rgba(4,8,14,.6);color:var(--ink);font:15px Inter,sans-serif;outline:none;transition:border-color .15s} .form input:focus,.form select:focus,.form textarea:focus{border-color:rgba(56,217,245,.55)} .form ::placeholder{color:var(--dim)} .form textarea{resize:vertical;min-height:88px} .form-ok{display:none;padding:16px;border-radius:12px;background:rgba(52,211,153,.1); border:1px solid rgba(52,211,153,.35);color:var(--good);font-weight:600;font-size:14.5px} .form-err{display:none;padding:14px;border-radius:12px;background:rgba(248,113,113,.09); border:1px solid rgba(248,113,113,.3);color:var(--bad);font-size:14px} /* footer */ footer.site{border-top:1px solid var(--line);padding:56px 0 40px;color:var(--dim);font-size:13.5px} .footgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px} .footgrid h5{color:var(--ink);font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px} .footgrid a{display:block;padding:5px 0;color:var(--muted);transition:color .15s} .footgrid a:hover{color:var(--ink)} .footbase{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:40px;padding-top:24px;border-top:1px solid var(--line)} /* reveals */ /* hidden state only when JS is running (html.js) — no-JS visitors see everything */ .js .rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease} .rv.in{opacity:1;transform:none} .rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s} @media (prefers-reduced-motion:reduce){ .rv,.js .rv{opacity:1;transform:none;transition:none} .fcard{animation:none;opacity:1;transform:none} .marq-track{animation:none} .trustline .dot{animation:none} } /* responsive */ @media (max-width:960px){ .hero-grid,.layersec,.cta-panel,.dash-body,.footgrid{grid-template-columns:1fr} .dash-main{border-right:none;border-bottom:1px solid var(--line)} .cards.c3,.pane{grid-template-columns:1fr 1fr} .steps{grid-template-columns:1fr 1fr} .step::after{display:none} .plans{grid-template-columns:1fr} .counters{grid-template-columns:1fr 1fr} .nav-links,.nav-cta .btn.ghost{display:none} .burger{display:block} .hero{padding-top:130px} .page-hero{padding-top:130px} } @media (max-width:600px){ .cards.c3,.cards.c2,.pane,.steps,.form .row,.counters{grid-template-columns:1fr} section{padding:72px 0} .cta-panel{padding:38px 24px} .nav-inner{gap:14px} .nav-cta .btn{white-space:nowrap;padding:8px 13px;font-size:13.5px} }