/* ============================================================================ DRAYELD — dark home page sheet Loads AFTER assets/eld-light.css and only applies under . The light sheet still supplies the shell mechanics (nav layout, dropdown positioning, burger animation, footer grid); everything colour-bearing is re-stated here so the light sheet never has to know about dark mode. ========================================================================= */ .hd{ /* palette */ --bg:#060A12; /* page background */ --bg-2:#080D18; /* alternating band */ --card:#0B1220; /* every panel / card surface */ --card-2:#0E1728; /* raised card (hover, hero widget) */ --cta:#01D4FF; /* buttons + CTA */ --cta-on:#04121A; /* ink ON a --cta fill — 10.7:1. #01D4FF is a bright cyan: white on it is 1.8:1 and unreadable. */ --cta-600:#00A8CC; /* button hover / gradient end*/ --cta-text:#7DE8FF; /* CTA colour as TEXT — 8.4:1 on --bg */ --cta-dim:rgba(1,212,255,.16); --cta-line:rgba(1,212,255,.34); /* The logo artwork is green (#65B909) and can't be recoloured, so the wordmark's "ELD" stays green to match the mark. Blue is the CTA colour everywhere else. */ --logo-green:#7DE8FF; --edge:rgba(255,255,255,.08); /* card borders */ --edge-2:rgba(255,255,255,.045); /* hairlines */ --fg:#F1F5F9; /* headings */ --fg-2:#94A3B8; /* body copy — 7.1:1 */ --fg-3:#64748B; /* meta / labels */ --r:16px; --r-sm:11px; --r-lg:22px; background:var(--bg); color:var(--fg-2); } .hd h1,.hd h2,.hd h3,.hd h4{color:var(--fg)} .hd ::selection{background:var(--cta);color:var(--cta-on)} .hd .g{ color:var(--cta-text); text-shadow:0 0 26px rgba(1,212,255,.55),0 0 60px rgba(1,212,255,.25); } /* ---------------------------------------------------------------- shell -- */ .hd .annbar{background:var(--card);border-bottom:1px solid var(--edge-2)} .hd .annbar .tagpill{background:var(--cta);color:var(--cta-on)} .hd .annbar .go{color:var(--cta-text)} .hd .nav{ background:rgba(6,10,18,.82); backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); border-bottom:1px solid var(--edge-2); } .hd .nav.scrolled{border-bottom-color:var(--edge);box-shadow:0 8px 30px -18px #000} .hd .logo-word{color:var(--fg)} .hd .logo-word em{color:var(--logo-green)} .hd .nav-links a.top,.hd .nav-links button.top{color:var(--fg-2)} .hd .nav-links a.top:hover,.hd .nav-links button.top:hover, .hd .nav-links li.open > .top{background:rgba(255,255,255,.06);color:var(--fg)} .hd .nav-links .chev{color:var(--fg-3)} .hd .burger span{background:var(--fg)} .hd .dd{ background:var(--card);border:1px solid var(--edge); box-shadow:0 30px 70px -30px #000; } .hd .dd a:hover{background:rgba(255,255,255,.05)} .hd .dd .di{background:var(--cta-dim);color:var(--cta-text);border-color:var(--cta-line)} .hd .dd a:hover .di{background:var(--cta);color:var(--cta-on);border-color:var(--cta)} .hd .dd b{color:var(--fg)} .hd .dd span{color:var(--fg-3)} .hd .mnav{background:var(--bg)} .hd .mnav .wrap > a,.hd .mnav .mgroup > b{color:var(--fg);border-bottom-color:var(--edge-2)} .hd .mnav .mgroup > b{color:var(--fg-3)} .hd .mnav .mgroup a{color:var(--fg-2);border-bottom-color:var(--edge-2)} .hd footer{background:var(--bg);border-top:1px solid var(--edge-2);color:var(--fg-2)} .hd footer .logo-word{color:var(--fg)} .hd footer .logo-word em{color:var(--logo-green)} .hd footer h4{color:var(--fg-3)} .hd footer ul a{color:var(--fg-2)} .hd footer ul a:hover{color:var(--cta-text)} .hd .fbot{border-top-color:var(--edge-2)} .hd .fbot p,.hd .fbot .mini{color:var(--fg-3)} .hd .fbot .mini a:hover{color:var(--cta-text)} /* --------------------------------------------------------------- buttons -- */ .hd .btn-pri{ background:linear-gradient(180deg,var(--cta),var(--cta-600)); color:var(--cta-on);border-color:transparent; box-shadow:0 0 0 1px rgba(1,212,255,.5),0 10px 30px -12px rgba(1,212,255,.75); } .hd .btn-pri:hover{ background:linear-gradient(180deg,#3FDEFF,var(--cta)); box-shadow:0 0 0 1px rgba(1,212,255,.7),0 14px 40px -12px rgba(1,212,255,.95); transform:translateY(-1px); } .hd .btn-ghost{background:transparent;color:var(--cta-text);border-color:var(--cta-line)} .hd .btn-ghost:hover{background:var(--cta-dim);border-color:var(--cta);color:#D6F7FF;transform:translateY(-1px)} .hd .btn-nav{background:rgba(255,255,255,.07);color:var(--fg);border-color:var(--edge)} .hd .btn-nav:hover{background:rgba(255,255,255,.12);transform:translateY(-1px)} /* ------------------------------------------------------------- primitives -- */ .hd .sec{padding:clamp(72px,8vw,116px) 0;position:relative;background:var(--bg)} .hd .sec.alt{background:var(--bg-2)} /* ---------------------------------------------------------------- light band -- A WHITE section inside the dark page. Used for the hardware line-up: the product shots are black devices on white studio backdrops, and they read far better on a light surface than floating on near-black. Like `.sec.dark` over in the light sheet, this RE-MAPS the palette tokens rather than restyling components, so cards, headings, chips, buttons and the spec
rows all flip on their own. ⚠️ Inside this block a literal colour must be a HEX. Writing var(--bg) here resolves against the --bg set in this very block, which is the trap that painted `.sec.dark` white on the subpages. */ .hd .sec.lite{ --bg:#FFFFFF; --bg-2:#F3F6FC; --card:#FFFFFF; --card-2:#F6FDFF; --edge:rgba(11,18,32,.14); --edge-2:rgba(11,18,32,.09); --fg:#0B1220; --fg-2:#44536E; --fg-3:#6C7B95; --cta-text:#0B6480; --cta-dim:rgba(1,212,255,.10); --cta-line:rgba(1,212,255,.32); background:#FFFFFF; color:#44536E; } /* the headline accent carries a blue glow tuned for a near-black background; on white it just smears, so drop the shadow and darken the ink */ .hd .sec.lite .g{color:#0B6480;text-shadow:none} /* card + hover shadows in the dark sheet are pure black — far too heavy here */ .hd .sec.lite .card{box-shadow:0 16px 40px -32px rgba(11,18,32,.55)} .hd .sec.lite .card:hover{ border-color:rgba(1,212,255,.45); box-shadow:0 26px 54px -32px rgba(11,18,32,.6),0 0 0 1px rgba(1,212,255,.14); } /* .btn-ghost:hover goes to #D6F7FF, which vanishes on white */ .hd .sec.lite .btn-ghost:hover{color:#08536B;border-color:#01D4FF} /* -- components that hardcode an on-dark colour and so can't follow the tokens -- */ /* step cards: the photo is held at 50% opacity to sit down into a near-black card, and the scrim's mid-stop is a dark navy. Both fight a white surface. */ .hd .sec.lite .step3 .shot img{opacity:.9} .hd .sec.lite .step3:hover .shot img{opacity:1} .hd .sec.lite .step3 .shot::after{ background:linear-gradient(to top,#FFFFFF 3%,rgba(255,255,255,.35) 46%,transparent); } .hd .sec.lite .step3 .ico{background:rgba(255,255,255,.92);color:#0B6480} .hd .sec.lite .step3 .n{color:rgba(11,100,128,.30)} /* compliance panel: the "In DRAYELD" heading is #B8F2FF, invisible on white */ .hd .sec.lite .req-ans b{color:#08536B} .hd .sec-head h2{margin:14px 0 16px} .hd .lede{color:var(--fg-2)} .hd .eyebrow{ color:var(--cta-text);background:var(--cta-dim); border:1px solid var(--cta-line); } .hd .eyebrow::before{background:var(--cta);box-shadow:0 0 10px var(--cta)} /* The reusable panel — one surface token for every card on the page. padding:0 is deliberate: the light sheet's .card ships padding:28px, and every variant below owns its own spacing (image cards go full-bleed). */ .hd .card{ background:var(--card); border:1px solid var(--edge); border-radius:var(--r); padding:0; box-shadow:none; transition:border-color .28s,transform .28s,box-shadow .28s,background .28s; } .hd .card:hover{ border-color:var(--cta-line); background:var(--card-2); transform:translateY(-3px); box-shadow:0 24px 50px -30px #000,0 0 0 1px rgba(1,212,255,.12); } /* faint square grid used behind the hero and the closing CTA */ .hd .gridfx{ position:absolute;inset:0;pointer-events:none;opacity:.5; background-image: linear-gradient(rgba(1,212,255,.07) 1px,transparent 1px), linear-gradient(90deg,rgba(1,212,255,.07) 1px,transparent 1px); background-size:44px 44px; mask-image:radial-gradient(120% 90% at 50% 0%,#000 30%,transparent 78%); -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 30%,transparent 78%); } /* ================================================================== HERO == */ .hd .hero{ position:relative;overflow:hidden;background:var(--bg); padding:clamp(64px,8vw,104px) 0 clamp(72px,8vw,112px); } /* The WebGL warp background (assets/warp.js). It mounts its own in here; the sheet the library injects is inside @layer paper-shaders, so these unlayered rules win. */ /* The warp shader moved OUT of the hero on 2026-08-27 (the hero is a video now) and backs the "How it works" band instead — see .warpsec further down. warp.js still calls document.querySelector('.hero').classList.add('warp-on'), which is now inert: there is no .warp inside .hero and no rule keys off it. */ /* Hero background video (replaced the warp shader 2026-08-27). Sits at the very back; .veil and .gridfx layer on top of it, then .wrap holds the copy. object-fit:cover, NOT width/height alone — the clip is 16:9 and the hero is much shorter on desktop, so it has to crop rather than letterbox. */ .hd .hero .herovid{ position:absolute;inset:0;z-index:0; width:100%;height:100%;object-fit:cover;object-position:50% 42%; pointer-events:none;border:0; opacity:0;transition:opacity .9s ease; } /* only revealed once it is genuinely painting — see the IIFE in index.html */ .hd .hero.vid-on .herovid{opacity:1} .hd .hero.vid-on .mesh{display:none} /* The clip is bright daylight — green fields, blue sky — and the hero copy is white. The shader-era veil (.68) leaves the headline fighting the grass, so video mode darkens further and weights it to the left where the text sits. */ .hd .hero.vid-on .veil{ background: linear-gradient(90deg,rgba(6,10,18,.90) 0%,rgba(6,10,18,.70) 52%,rgba(6,10,18,.46) 100%), rgba(6,10,18,.18); } /* Drifting gradient mesh — the CSS fallback for browsers with no WebGL2. Three blurred blobs on long, offset loops; pauses for reduced-motion. */ .hd .hero .mesh{position:absolute;inset:-20% -10%;pointer-events:none;filter:blur(70px);opacity:.75} .hd .hero .mesh i{position:absolute;display:block;border-radius:50%} .hd .hero .mesh i:nth-child(1){ width:52vw;height:52vw;left:-6%;top:-12%; background:radial-gradient(circle,rgba(1,212,255,.55),transparent 66%); animation:hd-drift-a 22s ease-in-out infinite; } .hd .hero .mesh i:nth-child(2){ width:46vw;height:46vw;right:-8%;top:6%; background:radial-gradient(circle,rgba(0,168,204,.42),transparent 66%); animation:hd-drift-b 27s ease-in-out infinite; } .hd .hero .mesh i:nth-child(3){ width:60vw;height:38vw;left:22%;bottom:-26%; background:radial-gradient(circle,rgba(56,221,255,.26),transparent 68%); animation:hd-drift-c 33s ease-in-out infinite; } @keyframes hd-drift-a{50%{transform:translate3d(9%,7%,0) scale(1.14)}} @keyframes hd-drift-b{50%{transform:translate3d(-11%,10%,0) scale(1.2)}} @keyframes hd-drift-c{50%{transform:translate3d(6%,-9%,0) scale(1.1)}} /* The light sheet paints a green radial into .hero::before and .ctaband::before. Both are real pseudo-elements on these nodes, so they have to be restated rather than merely out-specified by a background on the element itself. */ .hd .hero::before{ background:radial-gradient(760px 420px at 50% -14%,rgba(1,212,255,.16),transparent 70%); } /* wash the mesh back down so text keeps its contrast */ .hd .hero .veil{position:absolute;inset:0;pointer-events:none;background:rgba(6,10,18,.68)} .hd .hero .wrap{position:relative;z-index:2} .hd .hero-grid{ display:grid;grid-template-columns:1.05fr .95fr; gap:clamp(32px,4vw,60px);align-items:center; } /* The light sheet's hero is a single centred column; this one is a two-column split, so the centring (text-align, auto margins, justify-content) has to be unwound. The closing .ctaband stays centred — it sets its own alignment. */ .hd .hero{text-align:left} .hd .hero h1{font-size:clamp(2.4rem,4.9vw,3.7rem);margin:20px 0 18px;max-width:18ch} .hd .hero .lede{font-size:clamp(1.02rem,1.2vw,1.13rem);max-width:52ch;margin-inline:0} .hd .hero .hero-cta{justify-content:flex-start;margin:0} .hd .proof{display:flex;align-items:center;gap:14px;margin:26px 0 28px} .hd .proof .stars{display:flex;gap:3px;color:var(--cta-text)} .hd .proof .stars svg{width:14px;height:14px;fill:currentColor} .hd .proof p{font-size:12.5px;color:var(--fg-3);margin-top:3px} .hd .proof .fact{font:800 14px/1 var(--body);color:var(--fg);letter-spacing:-.01em} .hd .proof .rule{width:1px;height:30px;background:var(--edge)} .hd .hero-cta{display:flex;gap:12px;flex-wrap:wrap} .hd .assure{display:flex;gap:20px;flex-wrap:wrap;margin-top:30px} .hd .assure span{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--fg-3)} .hd .assure svg{width:15px;height:15px;color:var(--cta-text);flex:none} /* ------------------------------------------------------- savings widget -- */ .hd .calc{ background:var(--card);border:1px solid var(--edge); border-radius:var(--r-lg);padding:clamp(20px,2.4vw,28px); box-shadow:0 40px 90px -50px #000,0 0 0 1px rgba(1,212,255,.1); width:100%;max-width:440px;margin-left:auto; } .hd .calc-top{display:flex;align-items:center;gap:11px;margin-bottom:22px} .hd .calc-ico{ width:36px;height:36px;border-radius:10px;flex:none;display:grid;place-items:center; background:linear-gradient(180deg,var(--cta),var(--cta-600));color:var(--cta-on); box-shadow:0 8px 22px -10px rgba(1,212,255,.9); } .hd .calc-ico svg{width:19px;height:19px} .hd .calc-top b{font:700 15px/1.2 var(--body);color:var(--fg)} .hd .calc-top .tag{ margin-left:auto;font:700 10.5px/1 var(--body);letter-spacing:.06em;text-transform:uppercase; color:var(--cta-text);background:var(--cta-dim);border:1px solid var(--cta-line); padding:6px 10px;border-radius:7px; } .hd .fld{margin-bottom:15px} .hd .fld label{display:block;font:600 12.5px/1 var(--body);color:var(--fg-3);margin-bottom:7px} .hd .fld input,.hd .fld select{ width:100%;background:#070C16;border:1px solid var(--edge);border-radius:var(--r-sm); padding:12px 13px;font:600 15px/1.2 var(--body);color:var(--fg); transition:border-color .2s,box-shadow .2s; -webkit-appearance:none;appearance:none; } .hd .fld select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' stroke='%2394A3B8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 13px center;padding-right:34px; } .hd .fld input:focus,.hd .fld select:focus{ outline:none;border-color:var(--cta);box-shadow:0 0 0 3px rgba(1,212,255,.22); } .hd .fld input::placeholder{color:#475569} .hd .fld-row{display:grid;grid-template-columns:1fr 1fr;gap:12px} .hd .calc-out{ margin:20px 0 16px;padding:18px;border-radius:var(--r); background:linear-gradient(180deg,rgba(1,212,255,.15),rgba(1,212,255,.04)); border:1px solid var(--cta-line); } .hd .calc-out .row{display:flex;justify-content:space-between;align-items:baseline;gap:12px} .hd .calc-out .row + .row{margin-top:9px;padding-top:9px;border-top:1px solid rgba(255,255,255,.07)} .hd .calc-out .k{font-size:13px;color:var(--fg-2)} .hd .calc-out .v{font:700 15px/1 var(--body);color:var(--fg);font-variant-numeric:tabular-nums} .hd .calc-out .big .k{font-size:13.5px;color:var(--fg)} .hd .calc-out .big .v{ font-size:clamp(1.5rem,2.4vw,1.9rem);font-weight:800;letter-spacing:-.02em; color:#B8F2FF;text-shadow:0 0 24px rgba(1,212,255,.5); } .hd .calc .btn{width:100%} .hd .calc .note{font-size:11.5px;color:var(--fg-3);text-align:center;margin-top:11px;line-height:1.5} /* =============================================================== STEPS === */ .hd .steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .hd .step3{overflow:hidden;display:flex;flex-direction:column} .hd .step3 .shot{position:relative;aspect-ratio:16/10;overflow:hidden} .hd .step3 .shot img{ width:100%;height:100%;object-fit:cover;opacity:.5; transition:opacity .55s,transform .55s; } .hd .step3:hover .shot img{opacity:.72;transform:scale(1.05)} .hd .step3 .shot::after{ content:"";position:absolute;inset:0; background:linear-gradient(to top,var(--card) 4%,rgba(11,18,32,.35) 55%,transparent); } .hd .step3 .ico{ position:absolute;left:16px;top:16px;z-index:2; width:38px;height:38px;border-radius:11px;display:grid;place-items:center; background:rgba(6,10,18,.85);border:1px solid var(--cta-line);color:var(--cta-text); backdrop-filter:blur(6px); } .hd .step3 .ico svg{width:18px;height:18px} .hd .step3 .n{ position:absolute;right:16px;top:10px;z-index:2; font:800 40px/1 var(--body);color:rgba(56,221,255,.34);letter-spacing:-.04em; } .hd .step3 .body{padding:20px 22px 24px} .hd .step3 h3{font:700 17px/1.3 var(--body);margin-bottom:8px} .hd .step3 p{font-size:14px;line-height:1.6;color:var(--fg-2)} /* ============================================================= DEVICES === */ .hd .devs{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:40px} .hd .dev{overflow:hidden;display:flex;flex-direction:column} /* Fixed height, not aspect-ratio: the three product shots have very different proportions, and aspect-ratio is only a hint — a taller image just grows the box, which knocked the card headings out of alignment. */ /* WHITE product plate. The shots are studio images whose backdrop has been flood-filled to pure #FFF, so the plate must be pure #FFF too — any tint and you get a visible rectangle where the photo ends. */ .hd .dev .plate{ position:relative;height:clamp(228px,19vw,286px);overflow:hidden; background:#fff; border-bottom:1px solid var(--edge-2); } /* Pinned to the plate and fitted with object-fit rather than sized with max-height:100% — the percentage doesn't resolve against a flex-item plate, so the taller shots rendered full size and overlapped the card text. Padding is small because the breathing room is already baked into the image (each device is scaled to a fixed fraction of its 4:3 canvas, so all three read at the same size). No drop-shadow — the photos carry their own. */ .hd .dev .plate img{ position:absolute;inset:0;width:100%;height:100%; padding:10px;object-fit:contain; /* chip clearance is baked into the image's top strip */ transition:transform .5s cubic-bezier(.2,.6,.2,1); } .hd .dev:hover .plate img{transform:scale(1.05) translateY(-3px)} /* chip now sits on white, so it needs dark ink instead of the on-dark treatment */ .hd .dev .cat{ position:absolute;left:14px;top:14px;z-index:2; font:800 10px/1 var(--body);letter-spacing:.1em;text-transform:uppercase; background:rgba(1,212,255,.12);border:1px solid rgba(1,212,255,.34);color:#0B6480; padding:6px 10px;border-radius:7px; } .hd .dev .body{padding:22px 22px 24px} .hd .dev h3{font:700 17px/1.3 var(--body);margin-bottom:8px} .hd .dev > .body > p{font-size:13.5px;line-height:1.62;color:var(--fg-2);margin-bottom:18px} .hd .dev dl{display:grid;grid-template-columns:auto 1fr;border-top:1px solid var(--edge-2)} .hd .dev dt,.hd .dev dd{padding:9px 0;border-bottom:1px solid var(--edge-2);font-size:12.5px;line-height:1.4} .hd .dev dt{color:var(--fg-3);padding-right:14px;white-space:nowrap} .hd .dev dd{color:var(--fg);font-weight:600;text-align:right} /* ============================================================= MODULES === */ .hd .mods{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:44px} .hd .mod{overflow:hidden} .hd .mod .shot{position:relative;aspect-ratio:4/3;overflow:hidden} .hd .mod .shot img{width:100%;height:100%;object-fit:cover;opacity:.6;transition:opacity .5s,transform .6s} .hd .mod:hover .shot img{opacity:.85;transform:scale(1.07)} .hd .mod .shot::after{ content:"";position:absolute;inset:0; background:linear-gradient(to top,var(--card) 3%,transparent 62%); } .hd .mod .pill{ position:absolute;left:12px;top:12px;z-index:2; font:700 10.5px/1 var(--body);letter-spacing:.05em;text-transform:uppercase; background:rgba(6,10,18,.82);border:1px solid var(--edge);color:var(--fg-2); padding:6px 9px;border-radius:7px;backdrop-filter:blur(6px); } .hd .mod .inc{ position:absolute;right:12px;top:12px;z-index:2;display:inline-flex;align-items:center;gap:5px; font:700 10.5px/1 var(--body); background:var(--cta-dim);border:1px solid var(--cta-line);color:var(--cta-text); padding:6px 9px;border-radius:7px;backdrop-filter:blur(6px); } .hd .mod .inc svg{width:11px;height:11px} .hd .mod .body{padding:4px 18px 20px} .hd .mod h3{font:700 15px/1.35 var(--body);margin-bottom:6px} .hd .mod p{font-size:13px;line-height:1.55;color:var(--fg-3)} /* ============================================================ FEATURES === */ .hd .feats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .hd .feat{padding:26px} .hd .feat .ico{ width:46px;height:46px;border-radius:13px;display:grid;place-items:center;margin-bottom:18px; background:var(--cta-dim);border:1px solid var(--cta-line);color:var(--cta-text); transition:box-shadow .3s,background .3s,color .3s; } .hd .feat .ico svg{width:21px;height:21px} .hd .feat:hover .ico{ background:var(--cta);color:var(--cta-on);border-color:var(--cta); box-shadow:0 0 26px -4px rgba(1,212,255,.75); } .hd .feat h3{font:700 16px/1.3 var(--body);margin-bottom:9px} .hd .feat p{font-size:14px;line-height:1.62;color:var(--fg-2)} /* ============================================================= COMPARE === */ .hd .cmp{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:940px;margin:0 auto} .hd .cmp-col{padding:28px} .hd .cmp-col.them{background:var(--bg-2)} .hd .cmp-col.us{ border-color:var(--cta-line); background:linear-gradient(180deg,rgba(1,212,255,.11),var(--card) 62%); box-shadow:0 0 0 1px rgba(1,212,255,.14),0 30px 70px -45px rgba(1,212,255,.5); } .hd .cmp-col.us:hover{transform:none} .hd .cmp-col.them:hover{transform:none;border-color:var(--edge);background:var(--bg-2)} .hd .cmp-h{display:flex;align-items:center;gap:10px;margin-bottom:6px} .hd .cmp-h b{font:700 15px/1 var(--body);color:var(--fg)} .hd .cmp-col.us .cmp-h b{color:#B8F2FF} .hd .cmp-sub{font-size:13px;color:var(--fg-3);margin-bottom:20px} .hd .cmp-col ul{display:flex;flex-direction:column;gap:13px} .hd .cmp-col li{display:flex;gap:11px;align-items:flex-start;font-size:14px;line-height:1.55} .hd .cmp-col li svg{width:17px;height:17px;flex:none;margin-top:1px} .hd .cmp-col.them li{color:var(--fg-3)} .hd .cmp-col.them li svg{color:#64748B} .hd .cmp-col.us li{color:var(--fg-2)} .hd .cmp-col.us li svg{color:var(--cta-text)} .hd .cmp-col.us li b{color:var(--fg);font-weight:650} /* ============================================================= PRICING === */ .hd .plans3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start} .hd .plan3{padding:30px 26px;position:relative;overflow:hidden;display:flex;flex-direction:column} .hd .plan3.hot{ border-color:var(--cta-line); background:linear-gradient(180deg,rgba(1,212,255,.15),var(--card) 58%); box-shadow:0 0 0 1px rgba(1,212,255,.2),0 34px 80px -46px rgba(1,212,255,.6); } .hd .plan3.hot::before{ content:"";position:absolute;left:0;right:0;top:0;height:1px; background:linear-gradient(90deg,transparent,var(--cta),transparent); } /* left/transform are reset explicitly: the light sheet centres .ribbon with left:50% + translateX(-50%), which would fight the right-corner placement. */ .hd .plan3 .ribbon{ position:absolute;right:18px;top:18px;left:auto;transform:none; font:800 10px/1 var(--body);letter-spacing:.08em;text-transform:uppercase; background:var(--cta);color:var(--cta-on);padding:6px 10px;border-radius:7px; box-shadow:0 6px 18px -6px rgba(1,212,255,.9); } .hd .plan3 .pname{font:700 13px/1 var(--body);color:var(--fg-3);letter-spacing:.04em;text-transform:uppercase} .hd .plan3 .price{display:flex;align-items:baseline;gap:8px;margin:14px 0 8px;flex-wrap:wrap} .hd .plan3 .price b{font:800 clamp(2.4rem,4vw,3rem)/1 var(--body);letter-spacing:-.035em;color:var(--fg)} .hd .plan3.hot .price b{color:#B8F2FF;text-shadow:0 0 30px rgba(1,212,255,.55)} .hd .plan3 .price .was{font:600 16px/1 var(--body);color:var(--fg-3);text-decoration:line-through} .hd .plan3 .price span:not(.was){font-size:13px;color:var(--fg-3);line-height:1.35} .hd .plan3 .psub{font-size:13.5px;line-height:1.6;color:var(--fg-2);margin-bottom:20px} .hd .plan3 .inc{ font:700 11px/1 var(--body);letter-spacing:.1em;text-transform:uppercase; color:var(--fg-3);padding-bottom:13px;border-bottom:1px solid var(--edge-2);margin-bottom:15px; } .hd .plan3 ul{display:flex;flex-direction:column;gap:11px;margin-bottom:26px;flex:1} .hd .plan3 li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.5;color:var(--fg-2)} .hd .plan3 li svg{width:16px;height:16px;flex:none;margin-top:1px;color:var(--cta-text)} .hd .plan3 .btn{width:100%} .hd .plan3 .foot{font-size:11.5px;color:var(--fg-3);text-align:center;margin-top:12px} .hd .finenote{ max-width:760px;margin:36px auto 0;text-align:center; font-size:12.5px;line-height:1.65;color:var(--fg-3); } /* ================================================================= FAQ === */ .hd .faq2{display:flex;flex-direction:column;gap:11px;max-width:820px;margin:0 auto} .hd .qa2{overflow:hidden} .hd .qa2.open{border-color:var(--cta-line);background:var(--card-2)} .hd .qa2 > button{ width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px; padding:19px 22px;text-align:left; font:650 15px/1.45 var(--body);color:var(--fg); } .hd .qa2 .plus{ width:26px;height:26px;flex:none;border-radius:8px;display:grid;place-items:center; background:var(--cta-dim);border:1px solid var(--cta-line);color:var(--cta-text); transition:transform .3s,background .25s,color .25s; } .hd .qa2 .plus svg{width:11px;height:11px} .hd .qa2.open .plus{transform:rotate(45deg);background:var(--cta);color:var(--cta-on);border-color:var(--cta)} .hd .qa2 .ans{max-height:0;overflow:hidden;transition:max-height .34s cubic-bezier(.2,.6,.2,1)} .hd .qa2 .ans > div{padding:0 22px 21px;font-size:14px;line-height:1.68;color:var(--fg-2)} .hd .qa2 .ans a{color:var(--cta-text);text-decoration:underline;text-underline-offset:3px} /* ============================================================= CTA BAND == */ .hd .ctaband{ position:relative;overflow:hidden;background:var(--bg); padding:clamp(80px,9vw,124px) 0; border-top:1px solid var(--edge-2); } .hd .ctaband::before{ background: radial-gradient(700px 340px at 50% 0%,rgba(1,212,255,.18),transparent 68%), radial-gradient(520px 300px at 88% 100%,rgba(1,212,255,.10),transparent 66%); } .hd .ctaband .glow{ position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:min(900px,100%);height:420px;pointer-events:none; background:radial-gradient(closest-side,rgba(1,212,255,.22),transparent); filter:blur(20px); } .hd .ctaband .wrap{position:relative;z-index:2} .hd .ctaband h2{font-size:clamp(2.1rem,4.4vw,3.3rem);margin:22px 0 18px} .hd .ctaband .lede{margin:0 auto 34px} .hd .ctaband .hero-cta{justify-content:center} .hd .ctaband .sub{margin-top:22px;font-size:13px;color:var(--fg-3)} .hd .ctaband .sub a{color:var(--cta-text);text-decoration:underline;text-underline-offset:3px} /* =========================================================== RESPONSIVE == */ @media (max-width:1080px){ .hd .mods{grid-template-columns:repeat(2,1fr)} .hd .feats{grid-template-columns:repeat(2,1fr)} } @media (max-width:900px){ .hd .hero-grid{grid-template-columns:1fr;gap:44px} .hd .calc{margin-inline:auto;max-width:520px} .hd .steps3{grid-template-columns:1fr} .hd .plans3{grid-template-columns:1fr;max-width:460px;margin-inline:auto} .hd .cmp{grid-template-columns:1fr} } @media (max-width:620px){ .hd .mods{grid-template-columns:1fr} .hd .feats{grid-template-columns:1fr} .hd .hero-cta .btn{width:100%} .hd .fld-row{grid-template-columns:1fr} .hd .assure{gap:12px} } @media (prefers-reduced-motion:reduce){ .hd .hero .mesh i{animation:none} .hd .card:hover{transform:none} }