:root{
--bg:#040806;
--bg2:#08110c;
--panel:#0b1610;
--accent:#3ddc84;
--accent-dim:#1c5c39;
--amber:#ffc46b;
--text:#eaf3ec;
--muted:#8ea79a;
--line:#1a2a21;
--pcb:#0e3a2b;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
background:var(--bg);
color:var(--text);
font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
overflow-x:hidden;
-webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none;}
/* ---------- Fixed 3D canvas layer ---------- */
#canvas-wrap{
position:fixed;
inset:0;
z-index:0;
background:radial-gradient(ellipse at 60% 30%, #08170f 0%, #040806 60%, #020604 100%);
}
#scene-canvas{ display:block; width:100%; height:100%; }
/* Vignette + grid overlay for tech feel */
#canvas-wrap::after{
content:"";
position:absolute; inset:0;
background:
radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(0,0,0,0.55) 100%);
pointer-events:none;
}
.grid-lines{
position:absolute; inset:0;
background-image:
linear-gradient(rgba(61,220,132,0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(61,220,132,0.045) 1px, transparent 1px);
background-size:56px 56px;
mask-image:radial-gradient(ellipse at 50% 40%, black 0%, transparent 70%);
pointer-events:none;
}
/* ---------- Content layer ---------- */
main{ position:relative; z-index:2; }
header{
position:fixed; top:0; left:0; right:0; z-index:20;
display:flex; align-items:center; justify-content:space-between;
padding:15px 5vw;
transition:background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
border-bottom:1px solid transparent;
}
/* 84px -> 70px bar. Only the header CTA shrinks; every other .btn keeps
its 44px minimum. */
header .btn.ghost{ padding:10px 20px; min-height:40px; }
header.scrolled{
background:rgba(4,8,6,0.75);
backdrop-filter:blur(10px);
border-bottom:1px solid var(--line);
}
/* Tighter than the old bar-separated pair: "TENA by enerthon" should read
as one lockup, not three items in a row. */
.brand-lockup{ display:flex; align-items:center; gap:9px; }
/* "TENA by enerthon" — the endorsement lockup. The rule that used to sit
here read as two separate marks sharing a bar; the word states the
relationship instead. Sized and weighted to sit under both wordmarks
rather than compete with them. */
.brand-lockup .by{
flex:none;
font-family:'Inter',sans-serif;
font-size:12px; font-weight:400; letter-spacing:0.01em;
color:var(--muted);
line-height:1;
position:relative; top:1px;
}
.logo{ display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:0.08em; font-size:15px;}
.enerthon-logo{
display:flex; align-items:center; line-height:0;
opacity:0.92; transition:opacity .2s ease;
}
.enerthon-logo:hover{ opacity:1; }
.enerthon-logo img{ height:26px; width:auto; display:block; }
nav{ display:flex; gap:34px; font-size:13px; color:var(--muted); }
nav a{ position:relative; padding:4px 0; transition:color .2s ease; }
nav a::after{
content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
background:var(--accent); transition:width .25s ease;
}
nav a:hover{ color:var(--text); }
nav a:hover::after{ width:100%; }
.btn{
display:inline-flex; align-items:center; gap:8px;
padding:12px 22px; min-height:44px; border-radius:8px;
background:var(--accent); color:#04140a; font-weight:700; font-size:13.5px;
border:1px solid var(--accent);
transition:transform .2s ease, box-shadow .2s ease;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 8px 24px rgba(61,220,132,0.25); }
.btn svg{ width:15px; height:15px; flex:none; }
.btn.ghost{ background:transparent; color:var(--text); border:1px solid var(--line); }
.btn.ghost:hover{ border-color:var(--accent); }
section{ position:relative; padding:0 5vw; }
.eyebrow{
display:inline-flex; align-items:center; gap:8px;
font-size:11.5px; letter-spacing:0.16em; text-transform:uppercase;
color:var(--accent); font-weight:700; margin-bottom:18px;
}
.eyebrow::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px var(--accent); }
h1, h2, h3, .logo{ font-family:'Space Grotesk','Inter',sans-serif; }
h1{ font-size:clamp(38px,6.2vw,84px); line-height:1.03; font-weight:700; letter-spacing:-0.02em; }
h2{ font-size:clamp(28px,4vw,48px); line-height:1.08; font-weight:700; letter-spacing:-0.015em; }
::selection{ background:rgba(61,220,132,0.28); color:#fff; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }
a, button{ cursor:pointer; }
p.lead{ color:var(--text); font-size:clamp(15px,1.3vw,18px); line-height:1.65; max-width:560px; }
/* ---------- Intro (house-installation reveal) ---------- */
#intro{ height:220vh; }
.intro-frame{
position:sticky; top:0; height:100vh;
display:flex; flex-direction:column; justify-content:center;
padding-top:0;
}
/* intro copy sits over the bright hallway scene - force light text + shadow */
#intro .lead{ color:#f2f6f8; text-shadow:0 1px 14px rgba(0,0,0,0.6); }
#intro h1{ text-shadow:0 2px 20px rgba(0,0,0,0.5); }
#intro .eyebrow{ text-shadow:0 1px 10px rgba(0,0,0,0.55); }
#intro .scroll-cue{ color:#eef3f5; text-shadow:0 1px 10px rgba(0,0,0,0.55); }
/* ---------- Hero ---------- */
#hero{
position:relative;
min-height:100vh; display:flex; flex-direction:column; justify-content:center;
padding-top:100px;
}
#hero .tags{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; max-width:640px; }
#hero .tags span{
font-size:11.5px; color:var(--text); border:1px solid var(--line);
padding:6px 12px; border-radius:999px; background:rgba(255,255,255,0.02);
}
#hero .cta-row{ display:flex; gap:14px; margin-top:34px; }
.scroll-cue{
margin-top:40px;
display:flex; align-items:center; gap:12px; color:var(--muted); font-size:12px; letter-spacing:0.1em; text-transform:uppercase;
}
.scroll-cue .stick{ width:1px; height:38px; background:linear-gradient(var(--accent),transparent); position:relative; overflow:hidden;}
.scroll-cue .stick::after{
content:""; position:absolute; top:-38px; left:0; width:100%; height:38px; background:var(--accent);
animation:cueDrop 1.8s ease-in-out infinite;
}
@keyframes cueDrop{ 0%{transform:translateY(0);} 100%{transform:translateY(76px);} }
/* ---------- About / stats strip ---------- */
#about{ min-height:70vh; display:flex; align-items:center; }
.about-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:60px; width:100%; align-items:center; }
.checklist{ list-style:none; margin-top:26px; display:flex; flex-direction:column; gap:14px; }
.checklist li{ display:flex; gap:12px; font-size:14.5px; color:#c3d8c9; }
.checklist li .tick{
flex:none; width:18px; height:18px; border-radius:5px; background:rgba(61,220,132,0.12);
border:1px solid var(--accent-dim); color:var(--accent); font-size:11px; font-weight:800;
display:flex; align-items:center; justify-content:center; margin-top:2px;
}
.stat-card{
background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)), rgba(8,17,12,0.82);
border:1px solid var(--line); border-radius:14px; padding:26px;
backdrop-filter:blur(9px);
}
.stat-card + .stat-card{ margin-top:14px; }
.stat-card .num{ font-size:34px; font-weight:700; color:var(--accent); letter-spacing:-0.02em; font-family:'Space Grotesk',sans-serif; }
.stat-card .lbl{ font-size:12.5px; color:var(--muted); margin-top:4px; text-transform:uppercase; letter-spacing:0.08em;}
/* ---------- Explode (disassembly) section ---------- */
#explode{ height:640vh; }
.explode-frame{
position:sticky; top:0; height:100vh;
display:flex; flex-direction:column; justify-content:flex-start; padding-top:110px;
pointer-events:none;
}
.explode-heading{ max-width:520px; pointer-events:auto; }
.progress-rail{
position:absolute; right:5vw; top:50%; transform:translateY(-50%);
width:2px; height:220px; background:var(--line); pointer-events:auto;
}
.progress-rail .fill{
position:absolute; bottom:0; left:0; width:100%; background:linear-gradient(var(--accent),#1e8f52);
height:0%;
}
.progress-rail .pct{
position:absolute; top:-30px; right:-6px; font-size:11px; color:var(--accent); font-weight:500; letter-spacing:0.05em;
font-family:'JetBrains Mono',monospace;
}
.part-label{
position:absolute; top:0; left:0;
transform:translate(-50%,-50%);
display:flex; align-items:center; gap:10px;
opacity:0; transition:opacity .25s ease;
pointer-events:none;
white-space:nowrap;
}
.part-label .dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px var(--accent); flex:none;}
.part-label .card{
background:rgba(7,15,11,0.86); border:1px solid var(--line); border-left:2px solid var(--accent);
padding:10px 15px; border-radius:10px; backdrop-filter:blur(8px);
box-shadow:0 10px 30px rgba(0,0,0,0.45);
}
.part-label .card .t{ font-size:12px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; color:var(--text);}
.part-label .card .d{ font-size:11.5px; color:var(--muted); margin-top:2px; max-width:230px; white-space:normal;}
/* ---------- Features ---------- */
#features{ padding-top:120px; padding-bottom:120px; }
.feat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:50px; }
.feat-card{
background:rgba(8,17,12,0.82); backdrop-filter:blur(9px); border:1px solid var(--line); border-radius:16px;
padding:26px; transition:border-color .25s ease, transform .25s ease;
}
.feat-card:hover{ border-color:var(--accent-dim); transform:translateY(-4px); }
.feat-card .tag{
display:inline-flex; align-items:center; justify-content:center;
font-size:11px; font-weight:800; letter-spacing:0.05em; color:var(--accent);
background:rgba(61,220,132,0.08); border:1px solid var(--accent-dim);
padding:5px 10px; border-radius:6px; margin-bottom:16px;
}
.feat-card h3{ font-size:17px; margin-bottom:8px; letter-spacing:-0.01em; }
.feat-card p{ font-size:13.5px; color:var(--muted); line-height:1.55; }
/* ---------- Reassemble transition ---------- */
#reassemble{ height:180vh; }
.reassemble-frame{
position:sticky; top:0; height:100vh; display:flex; flex-direction:column;
align-items:center; justify-content:flex-start; padding-top:100px;
text-align:center; pointer-events:none;
}
.reassemble-frame .inner{ pointer-events:auto; }
/* ---------- Legibility over the 3D layer ----------
Tight, layered shadows rather than a background panel: the first two
stops hug the glyph edges (that is what actually separates text from a
bright specular highlight), the third is a soft pool for small text.
Declared after the #intro rules above so it supersedes them. */
#intro h1, #hero h1, #explode h2, #reassemble h2{
text-shadow:
0 1px 3px rgba(0,0,0,0.92),
0 3px 12px rgba(0,0,0,0.72),
0 0 34px rgba(0,0,0,0.45);
}
#intro .lead, #hero .lead, #explode .lead,
#intro .eyebrow, #hero .eyebrow, #explode .eyebrow, #reassemble .eyebrow,
#intro .scroll-cue, #hero .scroll-cue, .made-by,
.progress-rail .pct{
text-shadow:
0 1px 2px rgba(0,0,0,0.95),
0 2px 7px rgba(0,0,0,0.8),
0 0 18px rgba(0,0,0,0.5);
}
/* the checklist and tags sit over the canvas in #about / #hero too */
.checklist li{ text-shadow:0 1px 3px rgba(0,0,0,0.85), 0 2px 8px rgba(0,0,0,0.6); }
/* Section headings further down the page have no background of their own,
so the fixed canvas shows straight through them -- same problem, milder,
because the vignette darkens the edges. A lighter halo is enough here.
The section-specific rules above are more specific and still win. */
h1, h2, .eyebrow, p.lead, .stats-row .num, .stats-row .lbl{
text-shadow:
0 1px 3px rgba(0,0,0,0.85),
0 2px 10px rgba(0,0,0,0.55);
}
/* ...but NOT where the text already sits on its own panel. A halo behind
17px copy on a backdrop-filtered card just smears it, and #contact and
the footer have opaque backgrounds, so there is nothing to separate
from. Listed last so it wins over the blanket rule above. */
.feat-card h3, .feat-card p, .feat-card .tag,
.tier-card h3, .tier-card p, .tier-card .num,
.case-card h3, .case-card p, .case-id, .case-tag, .case-metric,
.stat-card .num, .stat-card .lbl,
.benefit-list li, .console-panel h3, .console-panel p,
.part-label .card .t, .part-label .card .d,
#telemetry .tel-lbl, #telemetry .tel-val,
.network-caption, .nda-note, .pilot-form input, .pilot-form select,
.pilot-form textarea, .contact-info .info-line,
#contact h2, #contact p.lead, #contact .eyebrow,
.site-footer h4, .site-footer p, .site-footer a, .site-footer .footnote{
text-shadow:none;
}
/* ---------- Deploy tiers ---------- */
#tiers{ padding:100px 5vw; }
.tier-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:44px; }
.tier-card{ border:1px solid var(--line); border-radius:16px; padding:28px; background:rgba(8,17,12,0.82); backdrop-filter:blur(9px); }
.tier-card.hi{ border-color:var(--accent); background:linear-gradient(180deg, rgba(61,220,132,0.10), rgba(61,220,132,0.02)), rgba(8,17,12,0.85); backdrop-filter:blur(9px); }
.tier-card .num{ font-size:11px; color:var(--muted); letter-spacing:0.1em; }
.tier-card h3{ margin-top:8px; font-size:19px; letter-spacing:0.03em;}
.tier-card p{ margin-top:10px; font-size:13.5px; color:var(--muted); line-height:1.6;}
/* ---------- Stats bar ---------- */
#statsbar{ padding:90px 5vw; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.stats-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:center; }
.stats-row .num{ font-size:clamp(30px,3.4vw,46px); font-weight:700; color:var(--accent); font-family:'Space Grotesk',sans-serif; }
.stats-row .lbl{ font-size:12.5px; color:var(--muted); margin-top:6px; text-transform:uppercase; letter-spacing:0.08em;}
/* ---------- Contact / footer ---------- */
#contact{
padding:130px 5vw 60px; text-align:center;
background:var(--bg);
border-top:1px solid var(--line);
}
#contact h2{ max-width:700px; margin:0 auto; }
#contact p.lead{ margin:18px auto 0; }
.site-footer{
margin-top:0; padding:56px 5vw 28px;
border-top:1px solid var(--line);
background:var(--bg2);
color:var(--muted); font-size:13px;
}
.site-footer .footer-cols{
display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px;
max-width:1060px; margin:0 auto;
}
.site-footer .footer-brand .brand{
display:inline-flex; align-items:center; gap:10px;
margin-bottom:12px; color:var(--text);
}
.site-footer .brand-logo{ width:26px; height:26px; display:block; }
.site-footer .brand-name{ font-family:'Space Grotesk',sans-serif; font-size:15px; letter-spacing:0.06em; font-weight:500; }
.site-footer .brand-name b{ font-weight:700; }
.site-footer .footer-brand p{ line-height:1.55; max-width:280px; }
.site-footer .footnote{ font-size:12px; color:#6f8478; }
.site-footer h4{
color:var(--text); font-size:12px; letter-spacing:0.12em; text-transform:uppercase;
font-weight:700; margin-bottom:14px;
}
.site-footer ul{ list-style:none; }
.site-footer li{ margin-bottom:10px; }
.site-footer a{ color:var(--muted); transition:color .2s ease; }
.site-footer a:hover{ color:var(--accent); }
.site-footer .footer-bottom{
max-width:1060px; margin:36px auto 0; padding-top:22px;
border-top:1px solid var(--line);
display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
font-size:12.5px;
}
/* =========================================================
NARROW-VIEWPORT LAYOUT
Everything below is scoped to <=860px and builds on the two
breakpoints that already existed (860 / 560). No section
scroll-height (#intro 220vh, #explode 640vh, #reassemble 180vh)
and no sticky-frame height is touched, so ScrollTrigger start/end
resolution and the GSAP timing are unaffected.
========================================================= */
@media (max-width:860px){
nav{ display:none; }
.about-grid{ grid-template-columns:1fr; }
.feat-grid{ grid-template-columns:1fr 1fr; }
.tier-grid{ grid-template-columns:1fr; }
.stats-row{ grid-template-columns:1fr 1fr; row-gap:30px; }
.site-footer .footer-cols{ grid-template-columns:1fr 1fr; gap:28px; }
/* --- Type scale ---------------------------------------------------
The desktop clamp floors (h1 38px, h2 28px) are larger than a 360px
column can carry once the 5vw side padding is removed, so long words
overflowed instead of wrapping.
The fix keeps each element's DESKTOP vw coefficient (h1 6.2vw, h2 4vw,
#intro h1 5vw) and only lowers the floor. That means these rules sit
exactly on the desktop curve and rejoin it seamlessly at 861px -- the
caps below exist purely to hand off to the next narrower block, so
resizing across 480 / 560 / 860 produces no visible size jump. */
h1{ font-size:clamp(29px,6.2vw,84px); }
h2{ font-size:clamp(22px,4vw,48px); }
p.lead{ font-size:15px; line-height:1.6; max-width:none; }
/* #intro h1 carries an inline clamp(), so this needs !important. */
#intro h1{ font-size:clamp(28px,5vw,64px) !important; }
/* The hard-coded
in the display headings are desktop line
breaks; on a narrow column they force absurdly short lines. */
#intro h1 br, #hero h1 br, #explode h2 br, #reassemble h2 br{ display:none; }
.eyebrow{ font-size:11px; margin-bottom:14px; }
/* --- Header -------------------------------------------------------
Brand lockup (TENA + 140px Enerthon logo) plus the CTA measured
~400px, which overflowed every phone width. */
header{ padding:14px 5vw; }
.brand-lockup{ gap:7px; min-width:0; }
.brand-lockup .by{ font-size:11px; }
.enerthon-logo img{ height:20px; }
header .btn.ghost{ padding:9px 13px; min-height:38px; font-size:12px; white-space:nowrap; }
/* --- #intro / #hero -----------------------------------------------
#hero was a 100vh flex column with justify-content:center, so once
content exceeded the viewport it overflowed in both directions and
the top got clipped under the fixed header. Top-align it instead
and let the section grow past 100vh. */
/* .intro-frame is a 100vh sticky flex column that was centring its copy
vertically -- which put the headline and lead straight over the device
in the hallway scene. Pin the copy to the top and let the scroll cue
take the slack at the bottom, so the middle/lower band stays clear for
the 3D subject. */
.intro-frame{ justify-content:flex-start; padding-top:76px; padding-bottom:24px; }
#intro .scroll-cue{ margin-top:auto !important; padding-top:20px; }
#hero{ justify-content:flex-start; padding-top:88px; padding-bottom:48px; }
#hero .lead{ margin-top:16px !important; }
#hero .tags{ margin-top:20px; gap:8px; }
#hero .tags span{ font-size:11px; padding:5px 10px; }
#hero .cta-row{ flex-wrap:wrap; margin-top:24px; }
#hero .cta-row .btn{ flex:1 1 auto; justify-content:center; }
.made-by{ margin-top:18px; }
.scroll-cue{ margin-top:26px; font-size:11px; }
.scroll-cue .stick{ height:30px; }
/* --- #explode overlays --------------------------------------------
Heading reflows to the full column and reserves a gutter for the
rail; the rail itself becomes a short top-right indicator (kept
vertical, because the JS drives .fill through style.height as a
percentage). */
.explode-frame{ padding-top:84px; }
#explode .explode-heading{ max-width:none; padding-right:38px; }
#explode .lead{ margin-top:12px !important; }
#explode .progress-rail{
right:14px; top:88px; bottom:auto; transform:none; height:92px;
}
#explode .progress-rail .pct{ top:auto; bottom:-22px; right:-9px; font-size:10px; }
/* Part labels stay attached to their part on mobile: updateLabels()
still projects the 3D position, and the JS clamps the result into a
readable band so a callout can never land under the heading or off
the edge. The matching guard keeps exactly ONE label visible at a
time -- several label ranges overlap, and on a narrow screen 3-4
simultaneous callouts is what made them collide in the first place.
Keeping the card small is what lets it read as attached rather than
as a floating panel. */
.part-label{
z-index:5;
align-items:flex-start;
gap:8px;
white-space:normal;
}
.part-label .dot{ margin-top:6px; }
.part-label .card{ padding:8px 11px; max-width:200px; min-width:0; }
.part-label .card .t{ font-size:11px; white-space:normal; line-height:1.25; }
.part-label .card .d{
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
overflow:hidden;
max-width:none; font-size:10.5px; margin-top:3px; line-height:1.35;
}
.reassemble-frame{ padding-top:88px; }
/* Portrait puts the device closer behind the copy, so the halo is
tightened and deepened a little -- still glyph-hugging, no panel. */
#intro h1, #hero h1, #explode h2, #reassemble h2{
text-shadow:
0 1px 3px rgba(0,0,0,0.96),
0 2px 10px rgba(0,0,0,0.85),
0 0 26px rgba(0,0,0,0.6);
}
#intro .lead, #hero .lead, #explode .lead,
#intro .eyebrow, #hero .eyebrow, #explode .eyebrow, #reassemble .eyebrow,
#intro .scroll-cue, #hero .scroll-cue, .made-by{
text-shadow:
0 1px 2px rgba(0,0,0,0.98),
0 2px 6px rgba(0,0,0,0.9),
0 0 14px rgba(0,0,0,0.6);
}
}
@media (max-width:560px){
.feat-grid{ grid-template-columns:1fr; }
.site-footer .footer-cols{ grid-template-columns:1fr; }
h1{ font-size:clamp(28px,6.2vw,35px); }
p.lead{ font-size:14.5px; }
#intro h1{ font-size:clamp(27px,5vw,28px) !important; }
/* tighter leading buys back ~2 lines of clear space under the intro copy */
#intro .lead{ line-height:1.5; }
/* Reclaim vertical room for the 3D stage: the explode lead restates
what the heading already says. */
#explode .lead{ display:none; }
.explode-frame{ padding-top:76px; }
#explode .progress-rail{ top:80px; height:76px; }
.part-label .card{ max-width:170px; }
#hero{ padding-top:80px; }
#hero .cta-row .btn{ flex:1 1 100%; }
}
@media (max-width:480px){
h1{ font-size:clamp(27px,6.2vw,30px); }
p.lead{ font-size:14px; }
#intro h1{ font-size:clamp(26px,5vw,27px) !important; }
.enerthon-logo img{ height:18px; }
header .btn.ghost{ padding:8px 11px; font-size:11.5px; }
#hero .tags span{ font-size:10.5px; padding:5px 9px; }
.part-label .card .d{ -webkit-line-clamp:2; }
.part-label .card{ max-width:158px; }
}
/* Short viewports (landscape phones, small split-screen): the sticky
100vh frames have no room for both a scroll cue and a docked card. */
@media (max-height:560px) and (max-width:860px){
#intro .scroll-cue, #hero .scroll-cue{ display:none; }
#intro .lead{ display:none; } /* no room for it beside the device */
.explode-frame{ padding-top:62px; }
#explode .explode-heading .lead{ display:none; }
#explode .progress-rail{ top:66px; height:60px; }
.part-label .card .d{ display:none; } /* title only when the frame is this short */
}
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }
/* ---------- Live telemetry panel (right of the device) ---------- */
#telemetry{
position:fixed; z-index:6;
right:calc(5vw + 26px); top:50%; transform:translateY(-50%);
width:248px;
opacity:0; pointer-events:none;
transition:opacity .2s linear;
}
#telemetry .tel-head{
display:flex; align-items:center; gap:8px;
font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase;
color:var(--muted); font-weight:700; margin-bottom:10px;
}
#telemetry .tel-head .live-dot{
width:7px; height:7px; border-radius:50%; background:var(--accent);
box-shadow:0 0 8px var(--accent);
animation:telPulse 1.6s ease-in-out infinite;
}
@keyframes telPulse{ 0%,100%{opacity:1;} 50%{opacity:0.35;} }
.tel-card{
background:rgba(7,15,11,0.85); border:1px solid var(--line); border-left:2px solid var(--accent);
border-radius:10px; padding:9px 12px 7px; margin-bottom:8px;
backdrop-filter:blur(8px);
box-shadow:0 8px 26px rgba(0,0,0,0.4);
}
.tel-card .tel-lbl{
font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); font-weight:600;
}
.tel-card .tel-val{
font-family:'JetBrains Mono',monospace; font-size:19px; font-weight:500;
color:var(--text); margin:2px 0 4px; font-variant-numeric:tabular-nums;
}
.tel-card .tel-val span{ font-size:11px; color:var(--accent); margin-left:3px; }
.tel-card canvas{ display:block; width:100%; height:30px; }
@media (max-width:1100px){ #telemetry{ display:none; } }
#cases{ padding:110px 5vw 70px; }
.case-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:44px; }
.case-card{
position:relative; border:1px solid var(--line); border-radius:16px; padding:26px;
background:rgba(8,17,12,0.82); backdrop-filter:blur(9px); transition:border-color .25s ease, transform .25s ease;
}
.case-card:hover{ border-color:var(--accent-dim); transform:translateY(-4px); }
.case-id{ font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--accent); letter-spacing:0.08em; }
.case-card h3{ margin-top:10px; font-size:18px; letter-spacing:-0.01em; padding-right:90px; }
.case-card p{ margin-top:8px; font-size:13.5px; color:var(--muted); line-height:1.6; }
.case-tag{
position:absolute; top:24px; right:24px; font-size:10.5px; font-weight:700;
letter-spacing:0.08em; text-transform:uppercase; color:var(--accent);
border:1px solid var(--accent-dim); border-radius:999px; padding:4px 10px;
}
.case-metric{
margin-top:14px; display:inline-block; font-family:'JetBrains Mono',monospace; font-size:12px;
color:#a8e9c1; background:rgba(61,220,132,0.07); border:1px solid var(--accent-dim);
border-radius:6px; padding:6px 10px;
}
.nda-note{ margin-top:18px; color:var(--muted); font-size:12px; }
#network{ padding:40px 5vw 110px; }
.network-row{
margin-top:40px; display:grid; grid-template-columns:1fr 1fr; gap:18px;
max-width:1100px; align-items:start;
}
.network-figure{
border:1px solid var(--line); border-radius:16px; overflow:hidden;
background:rgba(255,255,255,0.02);
display:flex; flex-direction:column;
}
.network-figure img{ flex:1; object-fit:cover; }
@media (max-width:860px){
.network-row{ grid-template-columns:1fr; }
}
.network-figure img{ display:block; width:100%; height:auto; }
.network-caption{
padding:12px 18px; font-family:'JetBrains Mono',monospace; font-size:11.5px;
color:var(--accent); letter-spacing:0.08em; border-top:1px solid var(--line);
}
#benefits{ padding:110px 5vw; }
.benefit-list{ list-style:none; margin-top:36px; display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.benefit-list li{
display:flex; gap:14px; font-size:14.5px; color:#c3d8c9; line-height:1.6;
border:1px solid var(--line); border-radius:14px; padding:20px 22px; background:rgba(8,17,12,0.82); backdrop-filter:blur(9px);
}
.benefit-list .diamond{ color:var(--accent); flex:none; margin-top:2px; }
#console{ padding:40px 5vw 110px; }
.console-panel{
display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
border:1px solid var(--accent-dim); border-radius:18px; padding:34px 38px;
background:linear-gradient(135deg, rgba(61,220,132,0.10), rgba(61,220,132,0.02)), rgba(8,17,12,0.85);
backdrop-filter:blur(9px);
}
.console-panel h3{ font-size:22px; }
.console-panel p{ margin-top:8px; color:var(--muted); font-size:14px; }
#team{ padding:110px 5vw; }
.miniteam{
margin-top:40px; display:flex; align-items:center; gap:22px; flex-wrap:wrap;
max-width:720px;
}
.miniteam-people{ display:flex; align-items:center; }
.miniteam-people img{
width:64px; height:64px; border-radius:50%; object-fit:cover;
border:2px solid var(--bg2); background:#0d1a12;
margin-left:-14px;
}
.miniteam-people img:first-child{ margin-left:0; }
.contact-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:40px; margin-top:44px; text-align:left; max-width:1060px; margin-left:auto; margin-right:auto; }
.contact-info .info-line{ display:flex; gap:12px; align-items:flex-start; margin-bottom:16px; color:#c3d8c9; font-size:14px; }
.contact-info .info-line svg{ width:16px; height:16px; flex:none; margin-top:3px; color:var(--accent); }
.contact-info a{ color:var(--text); }
.contact-info a:hover{ color:var(--accent); }
.pilot-form .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
.pilot-form input, .pilot-form select, .pilot-form textarea{
width:100%; background:var(--panel); border:1px solid var(--line); border-radius:8px;
color:var(--text); padding:12px 14px; font-size:13.5px; font-family:'Inter',sans-serif;
}
.pilot-form textarea{ margin-bottom:12px; resize:vertical; }
.pilot-form input:focus, .pilot-form select:focus, .pilot-form textarea:focus{ outline:2px solid var(--accent); outline-offset:1px; border-color:transparent; }
.made-by{ margin-top:22px; font-size:12.5px; color:var(--muted); }
.made-by a{ color:#c3d8c9; border-bottom:1px solid var(--accent-dim); }
.made-by a:hover{ color:var(--accent); }
@media (max-width:860px){
.case-grid, .benefit-list, .contact-grid{ grid-template-columns:1fr; }
.pilot-form .form-row{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce){
html{ scroll-behavior:auto; }
*, *::before, *::after{
animation-duration:0.01ms !important;
animation-iteration-count:1 !important;
transition-duration:0.01ms !important;
}
.reveal{ opacity:1; transform:none; }
}
/* =========================================================
TENA — audience-first restructure
Appended after the original stylesheet; overrides only.
========================================================= */
/* ---- Shorter 3D sequence (was 220vh / 640vh / 180vh) ---- */
#intro{ height:170vh; }
#explode{ height:400vh; }
#reassemble{ height:140vh; }
/* ---------------- Header: split nav with dropdowns ---------------- */
#siteHeader nav{ position:relative; }
.nav-item{ position:relative; }
.nav-item > a.nav-top{
display:inline-flex; align-items:center; gap:6px;
}
.nav-item > a.nav-top::after{
content:''; width:5px; height:5px; flex:none;
border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
transform:rotate(45deg) translateY(-1px); opacity:.55;
transition:transform .18s ease, opacity .18s ease;
}
.nav-item:hover > a.nav-top::after{ transform:rotate(225deg) translateY(-2px); opacity:1; }
.nav-drop{
position:absolute; top:calc(100% + 14px); left:-14px;
min-width:268px; padding:10px;
background:rgba(9,18,13,.97); border:1px solid var(--line); border-radius:12px;
box-shadow:0 24px 60px rgba(0,0,0,.6);
opacity:0; visibility:hidden; transform:translateY(-6px);
transition:opacity .18s ease, transform .18s ease, visibility .18s;
z-index:60;
}
.nav-item:hover .nav-drop, .nav-item:focus-within .nav-drop{
opacity:1; visibility:visible; transform:translateY(0);
}
.nav-drop::before{ content:''; position:absolute; top:-16px; left:0; right:0; height:16px; }
.nav-drop a{
display:block; padding:9px 12px; border-radius:8px;
font-size:13px; line-height:1.35; color:var(--text);
}
.nav-drop a small{ display:block; font-size:11.5px; color:var(--muted); margin-top:2px; font-weight:400; }
.nav-drop a:hover{ background:rgba(61,220,132,.08); color:var(--accent); }
.nav-drop .drop-head{
padding:6px 12px 8px; font-family:'JetBrains Mono',monospace;
font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
}
/* ---------------- Mobile nav ---------------- */
.nav-toggle{
display:none; width:42px; height:42px; flex:none;
align-items:center; justify-content:center; gap:4px; flex-direction:column;
background:transparent; border:1px solid var(--line); border-radius:9px; cursor:pointer;
}
.nav-toggle span{ display:block; width:17px; height:1.5px; background:var(--text); transition:transform .22s ease, opacity .22s ease; }
body.nav-open .nav-toggle span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2){ opacity:0; }
body.nav-open .nav-toggle span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }
@media (max-width:1080px){
.nav-toggle{ display:flex; }
#siteHeader nav{
display:none; position:fixed; top:0; left:0; right:0; bottom:0;
background:rgba(4,8,6,.985); backdrop-filter:blur(14px);
flex-direction:column; align-items:flex-start; gap:0;
padding:96px 6vw 40px; overflow-y:auto; z-index:50;
}
body.nav-open #siteHeader nav{ display:flex; }
body.nav-open{ overflow:hidden; }
.nav-item{ width:100%; border-bottom:1px solid var(--line); }
.nav-item > a.nav-top, #siteHeader nav > a{
display:flex; width:100%; padding:16px 0; font-size:16px; font-weight:600;
}
.nav-drop{
position:static; opacity:1; visibility:visible; transform:none;
background:transparent; border:0; box-shadow:none; padding:0 0 14px;
min-width:0; display:none;
}
.nav-item.open .nav-drop{ display:block; }
.nav-item.open > a.nav-top::after{ transform:rotate(225deg); }
.nav-drop a{ padding:9px 0 9px 14px; border-left:1px solid var(--line); border-radius:0; }
#siteHeader .btn.ghost{ display:none; }
}
/* ---------------- Audience doors ---------------- */
#doors{ padding:96px 5vw 40px; }
.doors-grid{
display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:44px;
}
.door{
position:relative; padding:38px 34px 34px;
background:linear-gradient(180deg, rgba(10,22,15,.92) 0%, rgba(6,13,9,.92) 100%);
border:1px solid var(--line); border-radius:16px;
display:flex; flex-direction:column;
transition:border-color .25s ease, transform .25s ease;
}
.door:hover{ border-color:rgba(61,220,132,.4); transform:translateY(-3px); }
.door::before{
content:''; position:absolute; inset:0 0 auto 0; height:2px; border-radius:16px 16px 0 0;
background:linear-gradient(90deg, var(--accent), transparent 70%);
}
.door.amber::before{ background:linear-gradient(90deg, var(--amber), transparent 70%); }
.door-eyebrow{
font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.16em;
text-transform:uppercase; color:var(--accent);
}
.door.amber .door-eyebrow{ color:var(--amber); }
.door h3{
font-family:'Space Grotesk',sans-serif; font-size:clamp(21px,2.4vw,27px);
line-height:1.25; margin-top:14px; letter-spacing:-.01em;
}
.door .door-sub{ color:var(--muted); font-size:14.5px; line-height:1.6; margin-top:14px; }
.door-pains{ list-style:none; margin:26px 0 0; padding:0; display:grid; gap:12px; }
.door-pains li{
position:relative; padding-left:26px; font-size:14px; line-height:1.55; color:var(--text);
}
.door-pains li::before{
content:''; position:absolute; left:2px; top:8px; width:9px; height:9px;
border:1.5px solid rgba(224,110,96,.75); border-radius:2px; transform:rotate(45deg);
}
.door-answer{
margin-top:26px; padding-top:22px; border-top:1px solid var(--line);
}
.door-answer .lbl{
font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.14em;
text-transform:uppercase; color:var(--muted); margin-bottom:14px;
}
.door-gains{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.door-gains li{ position:relative; padding-left:26px; font-size:14px; line-height:1.55; }
.door-gains li::before{
content:'✓'; position:absolute; left:2px; top:0; color:var(--accent); font-size:13px; font-weight:700;
}
.door.amber .door-gains li::before{ color:var(--amber); }
.door .cta-row{ margin-top:30px; padding-top:4px; }
.door-foot{ margin-top:auto; }
/* ---------------- Problem statement band ---------------- */
#problem{ padding:120px 5vw 20px; text-align:center; }
#problem .kicker{
font-family:'Space Grotesk',sans-serif;
font-size:clamp(26px,3.6vw,44px); line-height:1.28; letter-spacing:-.015em;
max-width:940px; margin:22px auto 0;
}
#problem .kicker em{ color:var(--accent); font-style:normal; }
.problem-cols{
display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
max-width:1080px; margin:56px auto 0; text-align:left;
}
.problem-col{
padding:26px 24px; border:1px solid var(--line); border-radius:14px;
background:rgba(10,22,15,.6);
}
.problem-col .n{
font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.14em;
color:var(--accent); margin-bottom:12px;
}
.problem-col h4{ font-family:'Space Grotesk',sans-serif; font-size:16.5px; line-height:1.35; margin-bottom:10px; }
.problem-col p{ color:var(--muted); font-size:13.5px; line-height:1.6; }
/* ---------------- Deep-dive audience blocks ---------------- */
.audience-block{ padding:110px 5vw 30px; }
.audience-head{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.audience-badge{
font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.16em;
text-transform:uppercase; padding:6px 12px; border-radius:999px;
border:1px solid var(--accent-dim); color:var(--accent);
}
.audience-badge.amber{ border-color:rgba(255,196,107,.4); color:var(--amber); }
.split-row{
display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:44px; align-items:start;
}
.split-panel{
padding:30px 28px; border:1px solid var(--line); border-radius:14px;
background:rgba(10,22,15,.55);
}
.split-panel.before{ border-left:2px solid rgba(224,110,96,.45); }
.split-panel.after{ border-left:2px solid var(--accent); }
.split-panel .lbl{
font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.14em;
text-transform:uppercase; color:var(--muted); margin-bottom:18px;
}
.split-panel ol{ margin:0; padding-left:0; list-style:none; counter-reset:step; display:grid; gap:16px; }
.split-panel ol li{
counter-increment:step; position:relative; padding-left:36px;
font-size:14px; line-height:1.6; color:var(--text);
}
.split-panel ol li::before{
content:counter(step,decimal-leading-zero);
position:absolute; left:0; top:1px;
font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--muted);
}
.split-panel.after ol li::before{ color:var(--accent); }
.split-panel ol li b{ display:block; margin-bottom:3px; font-weight:600; }
.split-panel ol li span{ color:var(--muted); font-size:13.5px; }
/* ---------------- Quiet credibility strip ---------------- */
#trust{ padding:70px 5vw; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.trust-inner{ display:flex; align-items:center; gap:34px; flex-wrap:wrap; justify-content:space-between; }
.trust-label{
font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.14em;
text-transform:uppercase; color:var(--muted); max-width:230px; line-height:1.7;
}
.trust-marks{ display:flex; gap:14px; flex-wrap:wrap; flex:1 1 480px; }
.trust-mark{
padding:14px 20px; border:1px solid var(--line); border-radius:10px;
background:rgba(10,22,15,.5); min-width:132px;
}
.trust-mark .m{ font-family:'Space Grotesk',sans-serif; font-size:14.5px; font-weight:600; }
.trust-mark .d{ font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--muted); margin-top:4px; }
/* ---------------- Section intro helper ---------------- */
.sec-intro{ max-width:760px; }
.sec-note{
font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--muted);
letter-spacing:.06em; margin-top:10px;
}
/* ---------------- Anchor offset for fixed header ---------------- */
#doors, #problem, #insurers, #owners, #cases, #features, #tiers, #trust, #contact, #network{
scroll-margin-top:84px;
}
/* ---------------- Responsive ---------------- */
@media (max-width:960px){
.doors-grid{ grid-template-columns:1fr; }
.problem-cols{ grid-template-columns:1fr; }
.split-row{ grid-template-columns:1fr; }
}
@media (max-width:560px){
#doors{ padding:64px 5vw 20px; }
#problem{ padding:80px 5vw 10px; }
.audience-block{ padding:74px 5vw 20px; }
.door{ padding:30px 24px 28px; }
.split-panel{ padding:24px 20px; }
.trust-inner{ gap:22px; }
}
/* =========================================================
Multi-page additions
Applies to pages that do NOT carry the WebGL backdrop.
========================================================= */
body.page{
background:
radial-gradient(ellipse at 60% 18%, #08170f 0%, #040806 55%, #020604 100%);
background-attachment:fixed;
}
body.page main{ z-index:auto; }
/* ---------------- Standard page hero ---------------- */
.page-hero{
position:relative;
padding:158px 5vw 76px;
border-bottom:1px solid var(--line);
}
.page-hero::after{
content:''; position:absolute; left:5vw; right:5vw; bottom:-1px; height:1px;
background:linear-gradient(90deg, var(--accent), transparent 55%);
}
.page-hero .inner{ max-width:900px; }
.page-hero h1{
font-family:'Space Grotesk',sans-serif;
font-size:clamp(32px,5.4vw,62px); line-height:1.08; letter-spacing:-.025em;
}
.page-hero .lead{ max-width:720px; margin-top:22px; }
.page-hero .cta-row{ margin-top:34px; }
/* Home hero sits a little taller and centres its own measure */
.home-hero{ padding:170px 5vw 96px; }
.home-hero h1{ font-size:clamp(34px,6vw,74px); }
/* ---------------- CTA band ---------------- */
.cta-band{ padding:96px 5vw 110px; }
.cta-band-inner{
border:1px solid var(--accent-dim); border-radius:18px;
padding:44px 44px 46px;
background:linear-gradient(135deg, rgba(61,220,132,.10), rgba(61,220,132,.02) 60%, transparent);
display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;
}
.cta-band-inner h3{
font-family:'Space Grotesk',sans-serif; font-size:clamp(21px,2.6vw,29px);
line-height:1.25; letter-spacing:-.015em; max-width:560px;
}
.cta-band-inner p{ color:var(--muted); font-size:14.5px; line-height:1.6; margin-top:12px; max-width:520px; }
.cta-band .cta-row{ margin-top:0; }
/* ---------------- Active nav state ---------------- */
#siteHeader nav a.active,
#siteHeader nav .nav-item.active > a.nav-top{ color:var(--accent); }
#siteHeader nav .nav-item.active > a.nav-top::after{ opacity:1; }
/* ---------------- Cross-page "next step" pair ---------------- */
.next-pair{
display:grid; grid-template-columns:1fr 1fr; gap:18px;
max-width:1000px; margin:44px 0 0;
}
.next-card{
display:block; padding:26px 26px 24px;
border:1px solid var(--line); border-radius:14px; background:rgba(10,22,15,.55);
transition:border-color .22s ease, transform .22s ease;
}
.next-card:hover{ border-color:var(--accent); transform:translateY(-2px); }
.next-card .k{
font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.14em;
text-transform:uppercase; color:var(--accent); margin-bottom:10px;
}
.next-card h4{ font-family:'Space Grotesk',sans-serif; font-size:17px; line-height:1.3; }
.next-card p{ color:var(--muted); font-size:13.5px; line-height:1.6; margin-top:8px; }
/* ---------------- Loading / fallback notice for the 3D page ---------------- */
#modelNotice{
position:fixed; left:50%; bottom:26px; transform:translateX(-50%);
z-index:30; padding:10px 18px; border-radius:999px;
border:1px solid var(--line); background:rgba(9,18,13,.92);
font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.06em;
color:var(--muted); display:none;
}
#modelNotice.show{ display:block; }
#modelNotice b{ color:var(--accent); font-weight:500; }
@media (max-width:960px){
.next-pair{ grid-template-columns:1fr; }
}
@media (max-width:640px){
.page-hero{ padding:120px 5vw 56px; }
.home-hero{ padding:126px 5vw 64px; }
.cta-band{ padding:64px 5vw 76px; }
.cta-band-inner{ padding:32px 26px 34px; }
}
/* =========================================================
Ambient backdrop + section depth
Applies to pages carrying only.
The technology page is untouched — it has the WebGL scene.
========================================================= */
/* ---------------------------------------------------------
1. The backdrop stack
Four fixed layers behind everything:
base gradient -> waveform canvas -> scope grid -> vignette
--------------------------------------------------------- */
#backdrop{
position:fixed; inset:0; z-index:0; pointer-events:none;
overflow:hidden;
background:
radial-gradient(ellipse 120% 80% at 62% 12%, #0d2418 0%, #061109 45%, #030805 78%, #020604 100%);
}
/* Two large, slowly drifting colour fields give the flat gradient
somewhere to breathe. Pure CSS, composited, no repaint cost. */
#backdrop::before,
#backdrop::after{
content:''; position:absolute; border-radius:50%;
filter:blur(110px); opacity:.5;
will-change:transform;
}
#backdrop::before{
width:58vw; height:58vw; left:-14vw; top:-18vw;
background:radial-gradient(circle, rgba(61,220,132,.16), transparent 68%);
animation:driftA 34s ease-in-out infinite alternate;
}
#backdrop::after{
width:52vw; height:52vw; right:-16vw; top:34vh;
background:radial-gradient(circle, rgba(255,196,107,.085), transparent 68%);
animation:driftB 46s ease-in-out infinite alternate;
}
@keyframes driftA{
from{ transform:translate3d(0,0,0) scale(1); }
to { transform:translate3d(7vw,9vh,0) scale(1.13); }
}
@keyframes driftB{
from{ transform:translate3d(0,0,0) scale(1.06); }
to { transform:translate3d(-9vw,-7vh,0) scale(1); }
}
/* The waveform canvas itself */
#waveBackdrop{
position:absolute; inset:0;
width:100%; height:100%;
display:block;
mask-image:linear-gradient(180deg, transparent 0%, black 18%, black 72%, transparent 100%);
-webkit-mask-image:linear-gradient(180deg, transparent 0%, black 18%, black 72%, transparent 100%);
}
/* Oscilloscope grid, same motif as the technology page */
#backdrop .scope-grid{
position:absolute; inset:0;
background-image:
linear-gradient(rgba(61,220,132,.040) 1px, transparent 1px),
linear-gradient(90deg, rgba(61,220,132,.040) 1px, transparent 1px);
background-size:56px 56px;
mask-image:radial-gradient(ellipse 90% 70% at 55% 30%, black 0%, transparent 78%);
-webkit-mask-image:radial-gradient(ellipse 90% 70% at 55% 30%, black 0%, transparent 78%);
}
/* Vignette so text always has contrast at the edges */
#backdrop .vignette{
position:absolute; inset:0;
background:radial-gradient(ellipse 85% 65% at 50% 45%, transparent 35%, rgba(2,7,4,.62) 100%);
}
/* body.page no longer paints its own flat gradient — #backdrop does it */
body.page{ background:#030805; }
body.page main{ position:relative; z-index:2; }
body.page #siteHeader{ z-index:20; }
/* ---------------------------------------------------------
2. Section depth
Alternating tonal weight so sections read as layers rather
than one continuous flat sheet.
--------------------------------------------------------- */
body.page main > section{ position:relative; }
/* Recessed band — sits *under* the content, slightly darker and
bounded by hairlines that fade out at the edges. */
body.page section.band{
background:
linear-gradient(180deg, rgba(3,9,6,.55) 0%, rgba(5,12,8,.72) 50%, rgba(3,9,6,.55) 100%);
backdrop-filter:blur(2px);
-webkit-backdrop-filter:blur(2px);
}
body.page section.band::before,
body.page section.band::after{
content:''; position:absolute; left:0; right:0; height:1px;
background:linear-gradient(90deg, transparent, var(--line) 18%, var(--line) 82%, transparent);
}
body.page section.band::before{ top:0; }
body.page section.band::after { bottom:0; }
/* Accent hairline — a single teal-fading rule to open a section */
body.page section.ruled::before{
content:''; position:absolute; top:0; left:5vw; right:5vw; height:1px;
background:linear-gradient(90deg, var(--accent), rgba(61,220,132,.15) 30%, transparent 70%);
}
/* Hero glow anchor — a soft pool of light behind the page title */
.page-hero::before{
content:''; position:absolute; z-index:-1;
left:2vw; top:-10vh; width:46vw; height:46vw; max-width:720px; max-height:720px;
background:radial-gradient(circle, rgba(61,220,132,.13), transparent 65%);
filter:blur(70px); pointer-events:none;
}
.page-hero.amber-glow::before{
background:radial-gradient(circle, rgba(255,196,107,.11), transparent 65%);
}
/* Statsbar reads better as a solid plate than a transparent strip */
body.page #statsbar{
background:linear-gradient(180deg, rgba(8,12,19,.78), rgba(5,8,13,.88));
backdrop-filter:blur(4px);
-webkit-backdrop-filter:blur(4px);
}
/* Contact already sets a solid --bg; soften it so the waveform
doesn't just stop dead at the section edge. */
body.page #contact{
background:linear-gradient(180deg, rgba(4,8,6,.86) 0%, var(--bg) 22%);
}
/* Cards gain a touch more presence now there is something behind them */
body.page .feat-card,
body.page .case-card,
body.page .tier-card,
body.page .problem-col,
body.page .split-panel,
body.page .next-card,
body.page .trust-mark{
backdrop-filter:blur(10px) saturate(115%);
-webkit-backdrop-filter:blur(10px) saturate(115%);
box-shadow:0 12px 40px rgba(0,0,0,.30);
}
body.page .door{
backdrop-filter:blur(12px) saturate(115%);
-webkit-backdrop-filter:blur(12px) saturate(115%);
box-shadow:0 20px 60px rgba(0,0,0,.38);
}
/* Footer anchors the page with a solid base */
body.page .site-footer{
position:relative;
background:linear-gradient(180deg, rgba(3,9,6,.85), #020705);
}
/* ---------------------------------------------------------
3. Motion and performance guards
--------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
#backdrop::before,
#backdrop::after{ animation:none; }
}
/* On small screens drop the blurred colour fields — they are the most
expensive part of this and the least visible at that size. */
@media (max-width:640px){
#backdrop::before,
#backdrop::after{ display:none; }
#backdrop .scope-grid{ background-size:40px 40px; }
.page-hero::before{ width:80vw; height:80vw; left:-10vw; }
body.page .feat-card,
body.page .case-card,
body.page .tier-card,
body.page .problem-col,
body.page .split-panel,
body.page .next-card,
body.page .trust-mark,
body.page .door{
backdrop-filter:none; -webkit-backdrop-filter:none;
}
}
/* =========================================================
Accessibility & interaction pass
Audited against WCAG AA + the ui-ux-pro-max priority table.
========================================================= */
/* ---------------------------------------------------------
1. Focus system (priority 1-2: keyboard nav, focus states)
Every interactive element gets a visible ring. :focus-visible
means mouse users never see it, so nothing looks "broken".
--------------------------------------------------------- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible{
outline:2px solid var(--accent);
outline-offset:3px;
border-radius:6px;
}
/* Inside the accent-coloured button the teal ring would vanish */
.btn:not(.ghost):focus-visible{
outline-color:var(--text);
outline-offset:3px;
}
/* Form fields also shift their border, so focus reads two ways */
.pilot-form input:focus,
.pilot-form select:focus,
.pilot-form textarea:focus{
border-color:var(--accent);
background:rgba(61,220,132,.04);
}
/* ---------------------------------------------------------
2. Skip link (priority 1: skip navigation)
--------------------------------------------------------- */
.skip-link{
position:absolute; left:16px; top:-60px; z-index:100;
padding:12px 20px; border-radius:0 0 10px 10px;
background:var(--accent); color:#04140a;
font-size:14px; font-weight:700;
transition:top .18s ease;
}
.skip-link:focus{ top:0; }
/* ---------------------------------------------------------
3. Touch targets (priority 2: min 44x44, 8px spacing)
--------------------------------------------------------- */
.btn.ghost{ min-height:44px; padding:12px 20px; }
header .btn.ghost{ min-height:44px; padding:11px 18px; }
#siteHeader nav > a,
#siteHeader nav .nav-item > a.nav-top{
min-height:44px;
display:inline-flex;
align-items:center;
}
.nav-drop a{ min-height:44px; display:flex; flex-direction:column; justify-content:center; }
.nav-toggle{ width:44px; height:44px; }
.pilot-form input,
.pilot-form select,
.pilot-form textarea,
.pilot-form button{ min-height:44px; }
/* Pointer affordance on everything clickable */
a, button, [role="button"], .btn, .next-card, .nav-toggle,
.pilot-form button, summary{ cursor:pointer; }
input, select, textarea{ cursor:auto; }
select{ cursor:pointer; }
/* ---------------------------------------------------------
4. Form labels (priority 8: visible labels, not placeholders)
--------------------------------------------------------- */
.field{ display:flex; flex-direction:column; gap:7px; text-align:left; }
.field > label{
font-family:'JetBrains Mono',monospace;
font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
color:var(--muted);
}
.field > label .req{ color:var(--accent); margin-left:3px; }
.pilot-form .form-row{ align-items:start; }
/* Submission status message */
.form-status{
margin-top:14px; padding:14px 16px; border-radius:10px;
font-size:13.5px; line-height:1.55; text-align:left;
border:1px solid var(--accent-dim);
background:rgba(61,220,132,.07);
color:var(--text);
display:none;
}
.form-status.show{ display:block; }
.form-status.err{
border-color:rgba(224,110,96,.5);
background:rgba(224,110,96,.08);
}
.form-status b{ color:var(--accent); }
.form-status.err b{ color:#ff9a8d; }
.form-status a{ color:var(--accent); text-decoration:underline; }
/* Inline field errors */
.field.invalid input,
.field.invalid select,
.field.invalid textarea{ border-color:rgba(224,110,96,.65); }
.field .err-msg{
font-size:12px; color:#ff9a8d; display:none;
}
.field.invalid .err-msg{ display:block; }
/* ---------------------------------------------------------
5. Heading hierarchy support
#problem's kicker is now a real ; keep it looking the same.
--------------------------------------------------------- */
h2.kicker{
font-family:'Space Grotesk',sans-serif;
font-weight:500;
font-size:clamp(26px,3.6vw,44px); line-height:1.28; letter-spacing:-.015em;
max-width:940px; margin:22px auto 0;
}
/* Footer column headings moved h4 -> h3; preserve appearance */
.site-footer h3{
font-family:'JetBrains Mono',monospace;
font-size:11px; letter-spacing:.14em; text-transform:uppercase;
color:var(--muted); margin-bottom:16px; font-weight:500;
}
/* .problem-col and .next-card headings moved h4 -> h3 */
.problem-col h3{
font-family:'Space Grotesk',sans-serif; font-size:16.5px;
line-height:1.35; margin-bottom:10px;
}
.next-card h3{
font-family:'Space Grotesk',sans-serif; font-size:17px; line-height:1.3;
}
.cta-band-inner h3{ font-weight:600; }
/* ---------------------------------------------------------
6. Screen-reader-only utility
--------------------------------------------------------- */
.sr-only{
position:absolute; width:1px; height:1px; padding:0; margin:-1px;
overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
/* ---------------------------------------------------------
7. Motion (priority 7: respect reduced-motion everywhere)
--------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
*, *::before, *::after{
animation-duration:.001ms !important;
animation-iteration-count:1 !important;
transition-duration:.001ms !important;
scroll-behavior:auto !important;
}
.reveal{ opacity:1 !important; transform:none !important; }
}
/* ---------------------------------------------------------
Heading-level correction on technology.html
#hero's title is semantically a level-2 heading (it follows the
#intro h1), but must keep the h1 visual weight it was designed with.
--------------------------------------------------------- */
h2.as-h1{
font-size:clamp(38px,6.2vw,84px);
line-height:1.03;
font-weight:700;
letter-spacing:-0.02em;
}
@media (max-width:860px){
h2.as-h1{ font-size:clamp(29px,6.2vw,84px); }
}
@media (max-width:480px){
h2.as-h1{ font-size:clamp(27px,6.2vw,30px); }
}
/* =========================================================
TENA — "Nature green & white" light theme
---------------------------------------------------------
Scoped to body.page, i.e. the three content pages
(index / insurers / owners). technology.html keeps its dark
showroom stage, because the WebGL scene is lit and fogged for
a dark environment; its accents were recoloured to the same
leaf green so the two halves stay on-brand.
Appended last so it supersedes the dark rules above.
========================================================= */
body.page{
/* Core palette */
--bg:#ffffff;
--bg2:#f3f8f4;
--panel:#ffffff;
--text:#12241b;
--heading:#0b1c14;
--muted:#4d635a;
--line:#e0ebe3;
/* Leaf green */
--accent:#177a48;
--accent-2:#2ea86a;
--accent-3:#5cc98d;
--accent-dim:#c2e2ce;
--accent-soft:rgba(23,122,72,.07);
/* Warm earth secondary (was amber) */
--amber:#9c6512;
--amber-soft:rgba(156,101,18,.07);
--amber-dim:rgba(156,101,18,.28);
/* Clay red for "what goes wrong" markers */
--clay:#bb4f3a;
/* One shadow ramp, tinted green-black rather than pure black */
--sh-1:0 1px 2px rgba(13,45,29,.05), 0 2px 8px rgba(13,45,29,.05);
--sh-2:0 2px 6px rgba(13,45,29,.05), 0 12px 28px rgba(13,45,29,.07);
--sh-3:0 4px 10px rgba(13,45,29,.06), 0 22px 50px rgba(13,45,29,.10);
background:var(--bg);
color:var(--text);
}
body.page h1, body.page h2, body.page h3, body.page h4{ color:var(--heading); }
/* The dark theme separated text from a busy canvas with black halos.
On white they read as smudges — remove them wholesale. */
body.page h1, body.page h2, body.page h3,
body.page .eyebrow, body.page p.lead,
body.page .stats-row .num, body.page .stats-row .lbl,
body.page .checklist li, body.page .scroll-cue, body.page .made-by{
text-shadow:none;
}
body.page ::selection{ background:rgba(46,168,106,.24); color:var(--heading); }
/* ---------------------------------------------------------
1. Backdrop — daylight instead of night
Same four-layer stack, re-lit: a warm-white base, two very
soft green fields, a faint scope grid and no vignette to
speak of (nothing to protect text from any more).
--------------------------------------------------------- */
body.page #backdrop{
background:
radial-gradient(ellipse 120% 80% at 62% 8%, #f4fbf6 0%, #ffffff 46%, #fbfdfb 100%);
}
body.page #backdrop::before{
background:radial-gradient(circle, rgba(46,168,106,.16), transparent 68%);
filter:blur(120px); opacity:.75;
}
body.page #backdrop::after{
background:radial-gradient(circle, rgba(156,101,18,.08), transparent 68%);
filter:blur(120px); opacity:.6;
}
body.page #backdrop .scope-grid{
background-image:
linear-gradient(rgba(23,122,72,.055) 1px, transparent 1px),
linear-gradient(90deg, rgba(23,122,72,.055) 1px, transparent 1px);
}
body.page #backdrop .vignette{
background:radial-gradient(ellipse 85% 65% at 50% 45%, transparent 45%, rgba(23,122,72,.05) 100%);
}
body.page #waveBackdrop{
mask-image:linear-gradient(180deg, transparent 0%, black 16%, black 68%, transparent 100%);
-webkit-mask-image:linear-gradient(180deg, transparent 0%, black 16%, black 68%, transparent 100%);
}
/* ---------------------------------------------------------
2. Header + navigation
--------------------------------------------------------- */
body.page #siteHeader{ color:var(--text); }
body.page #siteHeader.scrolled{
background:rgba(255,255,255,.82);
backdrop-filter:blur(14px) saturate(140%);
-webkit-backdrop-filter:blur(14px) saturate(140%);
border-bottom:1px solid var(--line);
box-shadow:0 1px 0 rgba(13,45,29,.02), 0 8px 26px rgba(13,45,29,.05);
}
body.page .logo{ color:var(--heading); }
body.page .brand-lockup .by{ color:var(--muted); }
/* The header now uses Enerthon's own light-background wordmark (dark slate
type, green sunburst "e"), so no filter is applied. The previous rule
inverted the white-on-dark variant, which flipped every hue and then
crushed it dark -- the mark could not keep its colour through that. */
body.page .enerthon-logo img{ opacity:1; }
/* The wrapper was held at 92% to take the edge off a pure-white wordmark on
the dark build. A brand mark on white should be at full strength. */
body.page .enerthon-logo{ opacity:1; }
body.page nav{ color:var(--muted); }
body.page nav a:hover{ color:var(--accent); }
body.page nav a::after{ background:var(--accent); height:1.5px; }
body.page .nav-drop{
background:#ffffff;
border:1px solid var(--line);
box-shadow:0 18px 48px rgba(13,45,29,.14);
}
body.page .nav-drop a{ color:var(--heading); }
body.page .nav-drop a small{ color:var(--muted); }
body.page .nav-drop a:hover{ background:var(--accent-soft); color:var(--accent); }
body.page .nav-drop .drop-head{ color:var(--accent); }
body.page .nav-toggle{ border-color:var(--line); background:#fff; }
body.page .nav-toggle span{ background:var(--heading); }
@media (max-width:1080px){
body.page #siteHeader nav{
background:rgba(255,255,255,.985);
backdrop-filter:blur(14px);
}
body.page .nav-item{ border-bottom:1px solid var(--line); }
body.page .nav-drop a{ border-left:1px solid var(--line); }
}
/* ---------------------------------------------------------
3. Buttons
--------------------------------------------------------- */
body.page .btn{
background:linear-gradient(180deg, var(--accent-2), var(--accent));
border:1px solid var(--accent);
color:#ffffff;
border-radius:10px;
box-shadow:0 1px 2px rgba(13,45,29,.10), 0 6px 16px rgba(23,122,72,.18);
transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
body.page .btn:hover{
filter:saturate(115%);
transform:translateY(-2px);
box-shadow:0 2px 4px rgba(13,45,29,.10), 0 12px 28px rgba(23,122,72,.26);
}
body.page .btn.ghost{
background:#ffffff;
color:var(--heading);
border:1px solid var(--line);
box-shadow:var(--sh-1);
filter:none;
}
body.page .btn.ghost:hover{
border-color:var(--accent);
color:var(--accent);
background:var(--accent-soft);
box-shadow:var(--sh-2);
}
body.page .btn:not(.ghost):focus-visible{ outline-color:var(--heading); }
body.page .skip-link{ background:var(--accent); color:#fff; }
/* ---------------------------------------------------------
4. Type accents
--------------------------------------------------------- */
body.page .eyebrow{ color:var(--accent); }
body.page .eyebrow::before{ background:var(--accent-2); box-shadow:none; }
body.page p.lead{ color:#394f45; }
body.page .checklist li,
body.page .benefit-list li,
body.page .contact-info .info-line{ color:#33493f; }
/* ---------------------------------------------------------
5. Section rhythm
Alternating white / mint bands, hairlines instead of shadow
edges. The band is now *lighter* than the page, which is the
right direction on a light ground.
--------------------------------------------------------- */
body.page section.band{
background:linear-gradient(180deg, rgba(243,248,244,.75) 0%, rgba(238,246,241,.9) 50%, rgba(243,248,244,.75) 100%);
backdrop-filter:blur(3px);
-webkit-backdrop-filter:blur(3px);
}
body.page section.band::before,
body.page section.band::after{
background:linear-gradient(90deg, transparent, var(--line) 18%, var(--line) 82%, transparent);
}
body.page section.ruled::before{
background:linear-gradient(90deg, var(--accent), rgba(46,168,106,.25) 30%, transparent 70%);
}
body.page #statsbar{
background:linear-gradient(180deg, #f1f8f3, #eaf4ee);
border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
body.page #contact{
background:linear-gradient(180deg, rgba(243,248,244,.6) 0%, #ffffff 26%);
border-top:1px solid var(--line);
}
/* Hero: a soft pool of leaf light behind the title */
body.page .page-hero{ border-bottom:1px solid var(--line); }
body.page .page-hero::before{
background:radial-gradient(circle, rgba(46,168,106,.20), transparent 64%);
filter:blur(80px);
}
body.page .page-hero.amber-glow::before{
background:radial-gradient(circle, rgba(199,140,42,.18), transparent 64%);
}
body.page .page-hero::after{
background:linear-gradient(90deg, var(--accent), transparent 55%);
}
/* ---------------------------------------------------------
6. Cards and panels
One surface treatment everywhere: white, hairline border,
soft tinted shadow, a 2px lift on hover.
--------------------------------------------------------- */
body.page .feat-card,
body.page .case-card,
body.page .tier-card,
body.page .problem-col,
body.page .split-panel,
body.page .next-card,
body.page .trust-mark,
body.page .stat-card,
body.page .benefit-list li,
body.page .network-figure{
background:#ffffff;
border:1px solid var(--line);
border-radius:16px;
box-shadow:var(--sh-1);
backdrop-filter:none;
-webkit-backdrop-filter:none;
}
body.page .feat-card:hover,
body.page .case-card:hover,
body.page .next-card:hover{
border-color:var(--accent-dim);
box-shadow:var(--sh-2);
transform:translateY(-3px);
}
body.page .trust-mark{ border-radius:12px; }
body.page .feat-card p,
body.page .case-card p,
body.page .tier-card p,
body.page .problem-col p,
body.page .next-card p{ color:var(--muted); }
body.page .feat-card .tag,
body.page .audience-badge{
background:var(--accent-soft);
border:1px solid var(--accent-dim);
color:var(--accent);
}
body.page .audience-badge.amber{
background:var(--amber-soft);
border-color:var(--amber-dim);
color:var(--amber);
}
body.page .case-id{ color:var(--accent); }
body.page .case-tag{ color:var(--accent); border:1px solid var(--accent-dim); background:var(--accent-soft); }
body.page .case-metric{
color:#0f5c37;
background:var(--accent-soft);
border:1px solid var(--accent-dim);
}
body.page .nda-note{ color:var(--muted); }
body.page .network-figure{ overflow:hidden; }
body.page .network-caption{ color:var(--accent); border-top:1px solid var(--line); background:#f6fbf8; }
body.page .problem-col .n{ color:var(--accent-2); }
body.page .stats-row .num{ color:var(--accent); }
body.page .stats-row .lbl{ color:var(--muted); }
body.page .checklist li .tick{ background:var(--accent-soft); border-color:var(--accent-dim); color:var(--accent); }
/* Highlighted tier / promo panels */
body.page .tier-card.hi{
border-color:var(--accent);
background:linear-gradient(180deg, rgba(46,168,106,.10), rgba(46,168,106,.02)), #ffffff;
box-shadow:var(--sh-2);
}
body.page .console-panel,
body.page .cta-band-inner{
border:1px solid var(--accent-dim);
background:linear-gradient(135deg, rgba(46,168,106,.12), rgba(46,168,106,.03) 60%, #ffffff);
box-shadow:var(--sh-1);
backdrop-filter:none; -webkit-backdrop-filter:none;
}
body.page .console-panel p,
body.page .cta-band-inner p{ color:var(--muted); }
/* Trust strip */
body.page .trust-label{ color:var(--muted); }
body.page .trust-mark .m{ color:var(--heading); }
body.page .trust-mark .d{ color:var(--accent); }
/* ---------------------------------------------------------
7. Audience doors
--------------------------------------------------------- */
body.page .door{
background:linear-gradient(180deg, #ffffff 0%, #f7fbf8 100%);
border:1px solid var(--line);
border-radius:18px;
box-shadow:var(--sh-2);
backdrop-filter:none; -webkit-backdrop-filter:none;
}
body.page .door:hover{
border-color:var(--accent-dim);
box-shadow:var(--sh-3);
transform:translateY(-3px);
}
body.page .door::before{
height:3px; border-radius:18px 18px 0 0;
background:linear-gradient(90deg, var(--accent), var(--accent-3) 45%, transparent 78%);
}
body.page .door.amber::before{
background:linear-gradient(90deg, var(--amber), rgba(199,140,42,.5) 45%, transparent 78%);
}
body.page .door-eyebrow{ color:var(--accent); }
body.page .door.amber .door-eyebrow{ color:var(--amber); }
body.page .door .door-sub{ color:var(--muted); }
body.page .door-pains li{ color:#33493f; }
body.page .door-pains li::before{ border-color:var(--clay); }
body.page .door-answer{ border-top:1px solid var(--line); }
body.page .door-answer .lbl{ color:var(--muted); }
body.page .door-gains li::before{ color:var(--accent); }
body.page .door.amber .door-gains li::before{ color:var(--amber); }
/* Before / after split panels */
body.page .split-panel.before{ border-left:3px solid var(--clay); }
body.page .split-panel.after{ border-left:3px solid var(--accent); }
body.page .split-panel .lbl{ color:var(--muted); }
body.page .split-panel ol li{ color:#33493f; }
body.page .split-panel ol li b{ color:var(--heading); }
body.page .split-panel ol li span{ color:var(--muted); }
body.page .split-panel.after ol li::before{ color:var(--accent); }
body.page #problem .kicker em,
body.page h2.kicker em{ color:var(--accent); }
body.page .next-card .k{ color:var(--accent); }
body.page .sec-note{ color:var(--muted); }
/* ---------------------------------------------------------
8. Form
--------------------------------------------------------- */
body.page .field > label{ color:var(--muted); }
body.page .field > label .req{ color:var(--clay); }
body.page .pilot-form input,
body.page .pilot-form select,
body.page .pilot-form textarea{
background:#ffffff;
border:1px solid var(--line);
color:var(--text);
border-radius:10px;
box-shadow:inset 0 1px 2px rgba(13,45,29,.04);
}
body.page .pilot-form input::placeholder,
body.page .pilot-form textarea::placeholder{ color:#8ba396; }
body.page .pilot-form input:focus,
body.page .pilot-form select:focus,
body.page .pilot-form textarea:focus{
border-color:var(--accent);
background:rgba(46,168,106,.04);
outline:2px solid rgba(23,122,72,.35);
outline-offset:1px;
}
body.page .field.invalid input,
body.page .field.invalid select,
body.page .field.invalid textarea{ border-color:var(--clay); }
body.page .field .err-msg{ color:#a83a26; }
body.page .form-status{
border:1px solid var(--accent-dim);
background:var(--accent-soft);
color:var(--text);
}
body.page .form-status b{ color:var(--accent); }
body.page .form-status.err{
border-color:rgba(187,79,58,.4);
background:rgba(187,79,58,.07);
}
body.page .form-status.err b{ color:#a83a26; }
body.page .form-status a{ color:var(--accent); }
body.page .contact-info a{ color:var(--heading); }
body.page .contact-info a:hover{ color:var(--accent); }
body.page .contact-info .info-line svg{ color:var(--accent); }
/* ---------------------------------------------------------
9. Footer
--------------------------------------------------------- */
body.page .site-footer{
background:linear-gradient(180deg, #f3f8f4 0%, #eaf3ed 100%);
border-top:1px solid var(--line);
color:var(--muted);
}
body.page .site-footer .footer-brand .brand{ color:var(--heading); }
/* The "e" mark is already a full-colour logo — only the wordmark PNG is
the light-on-dark variant that needs inverting. */
body.page .site-footer h3{ color:var(--heading); }
body.page .site-footer a{ color:var(--muted); }
body.page .site-footer a:hover{ color:var(--accent); }
body.page .site-footer .footnote{ color:#6c8378; }
body.page .site-footer .footer-bottom{ border-top:1px solid var(--line); }
body.page .made-by{ color:var(--muted); }
body.page .made-by a{ color:var(--heading); border-bottom:1px solid var(--accent-dim); }
body.page .made-by a:hover{ color:var(--accent); }
body.page .miniteam-people img{ border-color:#ffffff; background:#e7f1ea; box-shadow:var(--sh-1); }
/* ---------------------------------------------------------
10. Mobile — the blurred fields were dropped below 640px in
the dark theme; the light ground needs even less help.
--------------------------------------------------------- */
@media (max-width:640px){
body.page .feat-card,
body.page .case-card,
body.page .tier-card,
body.page .problem-col,
body.page .split-panel,
body.page .next-card,
body.page .trust-mark,
body.page .door{ box-shadow:var(--sh-1); }
}
/* =========================================================
Homepage restructure — hero video, steps, tabs, comparison
---------------------------------------------------------
New components for the landing-page flow:
hero split + video -> credential strip -> problem
-> how it works -> journey -> audience tabs
-> metrics -> what it records -> comparison -> cases
Written light-first (body.page); the few dark-theme values
are declared where the component could appear on a dark page.
========================================================= */
/* ---------------------------------------------------------
Shared section header
Section intros were being centred or left-aligned ad hoc;
this is the one rule they all use now.
--------------------------------------------------------- */
.sec-head{ max-width:760px; }
.sec-head h2{ margin-top:4px; }
.sec-head .lead{ margin-top:16px; }
#compare .sec-head, #how .sec-head, #audience .sec-head{ margin-bottom:8px; }
/* ---------------------------------------------------------
1. Hero — copy left, video right
--------------------------------------------------------- */
.hero-split{
display:grid;
grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
gap:clamp(32px,5vw,72px);
align-items:center;
padding-top:clamp(120px,13vh,170px);
padding-bottom:clamp(56px,8vh,96px);
}
.hero-split .hero-copy{ max-width:620px; }
/* The copy column is roughly half the page, so the headline is sized
against that column rather than the full viewport width. */
.hero-split h1{ font-size:clamp(32px,3.5vw,52px); }
.hero-split .lead{ max-width:560px; }
.hero-split .cta-row{ display:flex; gap:14px; flex-wrap:wrap; margin-top:32px; }
.hero-points{
list-style:none; margin:30px 0 0; padding:0;
display:grid; gap:10px;
}
.hero-points li{
position:relative; padding-left:26px;
font-size:14px; line-height:1.55; color:var(--muted);
}
.hero-points li::before{
content:''; position:absolute; left:3px; top:7px;
width:8px; height:8px; border-radius:50%;
background:var(--accent-2, var(--accent));
box-shadow:0 0 0 3px rgba(46,168,106,.16);
}
/* --- The video panel --- */
.hero-media{ margin:0; min-width:0; }
.video-frame{
position:relative;
border-radius:20px;
overflow:hidden;
background:#eef4f0;
border:1px solid var(--line);
box-shadow:0 4px 12px rgba(13,45,29,.07), 0 26px 60px rgba(13,45,29,.13);
aspect-ratio:16 / 9;
}
.hero-video{
display:block; width:100%; height:100%;
object-fit:cover;
}
/* A very light green wash ties the render's neutral studio grey to
the page palette without touching the product itself. */
.video-frame::after{
content:''; position:absolute; inset:0; pointer-events:none;
background:linear-gradient(160deg, rgba(46,168,106,.10), transparent 45%);
mix-blend-mode:multiply;
}
.hero-media figcaption{
margin-top:14px;
font-family:'JetBrains Mono',monospace;
font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
color:var(--muted);
}
/* Pause control — WCAG 2.2.2: anything that moves for more than five
seconds needs a way to stop it. */
.video-toggle{
position:absolute; right:14px; bottom:14px; z-index:2;
width:40px; height:40px; padding:0;
display:flex; align-items:center; justify-content:center;
border-radius:50%; border:1px solid rgba(13,45,29,.10);
background:rgba(255,255,255,.82);
backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
color:#12241b;
box-shadow:0 2px 10px rgba(13,45,29,.14);
opacity:0; transform:translateY(4px);
transition:opacity .2s ease, transform .2s ease, background .2s ease;
}
.video-frame:hover .video-toggle,
.video-toggle:focus-visible{ opacity:1; transform:translateY(0); }
.video-toggle:hover{ background:#fff; }
.video-toggle svg{ width:17px; height:17px; }
.video-toggle .ico-play{ display:none; }
.video-toggle.paused{ opacity:1; transform:translateY(0); }
.video-toggle.paused .ico-play{ display:block; }
.video-toggle.paused .ico-pause{ display:none; }
@media (max-width:960px){
.hero-split{ grid-template-columns:1fr; }
.hero-split .hero-copy{ max-width:none; }
.hero-media{ order:2; }
.hero-points{ margin-top:24px; }
}
@media (prefers-reduced-motion: reduce){
.video-toggle{ opacity:1; transform:none; }
}
/* ---------------------------------------------------------
2. Credential strip
The "trusted by" slot: certifications rather than logos,
because that is the credential this product actually has.
--------------------------------------------------------- */
.cred-strip{ padding:34px 5vw; }
.cred-inner{
display:flex; align-items:center; gap:34px; flex-wrap:wrap;
justify-content:space-between; max-width:1240px; margin:0 auto;
}
.cred-label{
font-family:'JetBrains Mono',monospace;
font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
color:var(--muted); line-height:1.8; flex:none;
}
.cred-marks{
display:flex; gap:12px; flex-wrap:wrap; flex:1 1 520px; justify-content:flex-end;
}
.cred-mark{
padding:12px 18px; border-radius:10px;
border:1px solid var(--line); background:#fff;
min-width:132px;
}
.cred-mark .m{ font-family:'Space Grotesk',sans-serif; font-size:14px; font-weight:600; color:var(--heading); }
.cred-mark .d{ font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--accent); margin-top:3px; }
@media (max-width:860px){
.cred-inner{ gap:20px; }
.cred-marks{ justify-content:flex-start; }
.cred-mark{ flex:1 1 132px; min-width:0; }
}
/* ---------------------------------------------------------
3. How it works — four numbered steps
--------------------------------------------------------- */
#how{ padding:96px 5vw; }
.steps-grid{
list-style:none; margin:52px 0 0; padding:0;
display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
counter-reset:none;
}
.step-card{
position:relative;
padding:30px 26px 28px;
border:1px solid var(--line); border-radius:16px;
background:#fff;
box-shadow:0 1px 2px rgba(13,45,29,.05), 0 2px 8px rgba(13,45,29,.05);
transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.step-card:hover{
border-color:var(--accent-dim);
transform:translateY(-3px);
box-shadow:0 2px 6px rgba(13,45,29,.05), 0 12px 28px rgba(13,45,29,.07);
}
.step-n{
display:inline-flex; align-items:center; justify-content:center;
width:38px; height:38px; border-radius:11px;
background:var(--accent-soft, rgba(46,168,106,.09));
border:1px solid var(--accent-dim);
color:var(--accent);
font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:500;
margin-bottom:18px;
}
.step-card h3{
font-family:'Space Grotesk',sans-serif; font-size:16.5px;
line-height:1.35; margin-bottom:10px;
}
.step-card p{ font-size:13.5px; line-height:1.6; color:var(--muted); }
/* The connecting rule between steps, desktop only */
.step-card::after{
content:''; position:absolute; top:49px; right:-18px; width:18px; height:1px;
background:linear-gradient(90deg, var(--accent-dim), transparent);
}
.step-card:last-child::after{ display:none; }
@media (max-width:1080px){
.steps-grid{ grid-template-columns:1fr 1fr; }
.step-card:nth-child(2n)::after{ display:none; }
}
@media (max-width:620px){
.steps-grid{ grid-template-columns:1fr; }
.step-card::after{ display:none; }
}
/* ---------------------------------------------------------
4. Audience tabs
Replaces the two side-by-side "doors": same content, but the
reader picks a side instead of scanning both.
--------------------------------------------------------- */
#audience{ padding:96px 5vw; }
.tabs{ margin-top:40px; }
.tab-list{
display:inline-flex; gap:4px; padding:5px;
border:1px solid var(--line); border-radius:14px; background:#fff;
box-shadow:0 1px 2px rgba(13,45,29,.05);
max-width:100%; flex-wrap:wrap;
}
.tab{
appearance:none; border:0; background:transparent;
padding:12px 22px; min-height:44px; border-radius:10px;
font-family:'Inter',sans-serif; font-size:13.5px; font-weight:600;
color:var(--muted); cursor:pointer;
transition:background .2s ease, color .2s ease;
}
.tab:hover{ color:var(--heading); background:rgba(46,168,106,.06); }
.tab[aria-selected="true"]{
background:linear-gradient(180deg, var(--accent-2), var(--accent));
color:#fff;
box-shadow:0 1px 2px rgba(13,45,29,.10), 0 6px 16px rgba(23,122,72,.18);
}
.tab-panel{
margin-top:26px;
padding:38px 34px 34px;
border:1px solid var(--line); border-radius:18px;
background:linear-gradient(180deg,#ffffff 0%, #f7fbf8 100%);
box-shadow:0 2px 6px rgba(13,45,29,.05), 0 12px 28px rgba(13,45,29,.07);
}
.tab-panel[hidden]{ display:none; }
.tab-panel:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.tab-grid{
display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:start;
}
.tab-grid h3{
font-family:'Space Grotesk',sans-serif;
font-size:clamp(20px,2.3vw,26px); line-height:1.25; letter-spacing:-.01em;
}
.tab-grid .door-sub{ margin-top:14px; }
.tab-grid .door-pains{ margin-top:26px; }
.tab-answer{
padding:26px 26px 24px;
border-radius:14px;
background:rgba(46,168,106,.06);
border:1px solid var(--accent-dim);
}
.tab-answer.amber{
background:rgba(156,101,18,.06);
border-color:var(--amber-dim, rgba(156,101,18,.28));
}
.tab-answer .lbl{
font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.14em;
text-transform:uppercase; color:var(--muted); margin-bottom:16px;
}
.tab-answer.amber .door-gains li::before{ color:var(--amber); }
.tab-answer .cta-row{ display:flex; gap:12px; flex-wrap:wrap; margin-top:26px; }
@media (max-width:860px){
.tab-grid{ grid-template-columns:1fr; gap:26px; }
.tab-panel{ padding:28px 22px 26px; }
.tab-list{ display:flex; width:100%; }
.tab{ flex:1 1 auto; padding:12px 14px; text-align:center; }
}
/* ---------------------------------------------------------
5. Comparison table
Scrolls inside its own container on narrow screens rather
than pushing the page sideways.
--------------------------------------------------------- */
#compare{ padding:96px 5vw; }
/* The table is wider than a phone; say so rather than leaving the
sideways scroll to be discovered. */
.cmp-hint{
display:none;
margin-top:36px;
font-family:'JetBrains Mono',monospace;
font-size:11px; letter-spacing:.06em; color:var(--muted);
}
.cmp-wrap{
margin-top:44px;
overflow-x:auto;
border:1px solid var(--line); border-radius:18px; background:#fff;
box-shadow:0 2px 6px rgba(13,45,29,.05), 0 12px 28px rgba(13,45,29,.06);
-webkit-overflow-scrolling:touch;
}
table.cmp{
width:100%; border-collapse:collapse; min-width:820px;
font-size:13.5px;
}
table.cmp th, table.cmp td{
padding:16px 18px; text-align:left; vertical-align:middle;
border-bottom:1px solid var(--line);
}
table.cmp thead th{
font-family:'Space Grotesk',sans-serif;
font-size:13px; font-weight:600; color:var(--heading);
background:#f6faf7;
border-bottom:1px solid var(--line);
white-space:nowrap;
}
table.cmp thead th.hi{
color:#fff;
background:linear-gradient(180deg, var(--accent-2), var(--accent));
}
table.cmp tbody th{
font-weight:600; color:var(--heading); font-size:13.5px;
width:210px; background:#fbfdfc;
}
table.cmp td.hi{ background:rgba(46,168,106,.055); }
table.cmp tbody tr:last-child th,
table.cmp tbody tr:last-child td{ border-bottom:0; }
table.cmp tbody tr:hover td,
table.cmp tbody tr:hover th{ background-color:rgba(46,168,106,.04); }
table.cmp .yes,
table.cmp .no,
table.cmp .part{ display:inline-flex; align-items:flex-start; gap:8px; line-height:1.45; }
table.cmp .yes{ color:#0f5c37; font-weight:600; }
table.cmp .no{ color:var(--muted); }
table.cmp .part{ color:#7a5a1a; }
table.cmp .yes::before,
table.cmp .no::before,
table.cmp .part::before{
flex:none; width:16px; height:16px; margin-top:1px;
border-radius:50%; display:flex; align-items:center; justify-content:center;
font-size:10px; font-weight:800;
}
table.cmp .yes::before{ content:'✓'; background:rgba(23,122,72,.12); color:var(--accent); }
table.cmp .no::before{ content:'✕'; background:rgba(77,99,90,.10); color:#7b8f85; }
table.cmp .part::before{ content:'~'; background:rgba(156,101,18,.12); color:#9c6512; }
/* ---------------------------------------------------------
6. Spacing for the reused sections in their new positions
--------------------------------------------------------- */
#inside{ padding:96px 5vw; }
#inside .feat-grid{ margin-top:44px; }
#cases{ padding:96px 5vw 70px; }
#cases .case-grid{ margin-top:44px; }
#cases .network-row{ margin-top:34px; }
#console{ padding:40px 5vw 96px; }
#journey{ padding:96px 5vw; }
#journey .split-row{ margin-top:40px; }
/* Anchor offsets for the new section ids */
#credentials, #how, #journey, #audience, #inside, #compare{
scroll-margin-top:84px;
}
@media (max-width:900px){
.cmp-hint{ display:block; }
.cmp-wrap{ margin-top:14px; }
}
@media (max-width:640px){
#how, #audience, #compare, #inside, #journey{ padding:66px 5vw; }
#cases{ padding:66px 5vw 40px; }
#console{ padding:30px 5vw 66px; }
}
/* =========================================================
Technology page — light theme over the WebGL stage
---------------------------------------------------------
technology.html now carries `body.page tech`, so it inherits the
whole light system (header, buttons, cards, footer). What is left
here is everything specific to having a live 3D scene behind the
content: the canvas backdrop, the copy that sits directly over it,
and the floating HUD elements.
========================================================= */
/* The scene fills the viewport, so the page's own ambient backdrop
(used on the other three pages) must not paint over it. */
body.tech{ background:#f4f9f6; }
/* ---------------------------------------------------------
1. The canvas stage
applyStory() rewrites this gradient every ~120ms from the current
fog colour; the value here is only what shows before the first
frame and if WebGL never starts.
--------------------------------------------------------- */
body.tech #canvas-wrap{
background:radial-gradient(ellipse at 60% 30%, #ffffff 0%, #eef5f0 60%, #dfe9e3 100%);
}
/* The dark build darkened the frame edges to hold the product. On a light
stage the opposite is needed: a soft white falloff, or the corners look
dirty against the page. */
/* Kept light and slight: the composer's final pass already lightens the
corners in-shader. This one only matters if the post-processing scripts
fail to load, in which case it is the whole falloff. */
body.tech #canvas-wrap::after{
background:radial-gradient(ellipse at 50% 50%, transparent 60%, rgba(255,255,255,0.18) 100%);
}
body.tech .grid-lines{
background-image:
linear-gradient(rgba(23,122,72,0.055) 1px, transparent 1px),
linear-gradient(90deg, rgba(23,122,72,0.055) 1px, transparent 1px);
}
/* ---------------------------------------------------------
2. Copy sitting directly on the 3D stage
Every one of these carried a black halo to survive a dark, busy
canvas. On a bright stage the halo is the problem, and the text
itself has to go dark. The id-level selectors below are needed to
outrank the shadow rules in the original stylesheet.
--------------------------------------------------------- */
body.tech #intro h1, body.tech #hero h1, body.tech h2.as-h1,
body.tech #explode h2, body.tech #reassemble h2,
body.tech #intro .lead, body.tech #hero .lead, body.tech #explode .lead,
body.tech #intro .eyebrow, body.tech #hero .eyebrow,
body.tech #explode .eyebrow, body.tech #reassemble .eyebrow,
body.tech #intro .scroll-cue, body.tech #hero .scroll-cue,
body.tech .made-by, body.tech .progress-rail .pct,
body.tech .checklist li{
text-shadow:
0 1px 2px rgba(255,255,255,0.9),
0 2px 10px rgba(255,255,255,0.75);
}
body.tech #intro h1, body.tech #hero h1, body.tech h2.as-h1,
body.tech #explode h2, body.tech #reassemble h2{ color:var(--heading); }
body.tech #intro .lead, body.tech #hero .lead, body.tech #explode .lead{ color:#33493f; }
body.tech #intro .eyebrow, body.tech #hero .eyebrow,
body.tech #explode .eyebrow, body.tech #reassemble .eyebrow{ color:var(--accent); }
body.tech #intro .scroll-cue, body.tech #hero .scroll-cue{ color:var(--muted); }
body.tech .scroll-cue .stick{ background:linear-gradient(var(--accent),transparent); }
body.tech .scroll-cue .stick::after{ background:var(--accent); }
/* The hero capability chips */
body.tech #hero .tags span{
color:var(--heading);
border:1px solid var(--line);
background:rgba(255,255,255,.75);
backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
/* ---------------------------------------------------------
3. Scroll progress rail
--------------------------------------------------------- */
body.tech .progress-rail{ background:rgba(23,122,72,.16); }
body.tech .progress-rail .fill{ background:linear-gradient(var(--accent-2), var(--accent)); }
body.tech .progress-rail .pct{ color:var(--accent); }
/* ---------------------------------------------------------
4. Part callouts on the exploded view
--------------------------------------------------------- */
body.tech .part-label .dot{
background:var(--accent);
box-shadow:0 0 0 3px rgba(46,168,106,.22);
}
body.tech .part-label .card{
background:rgba(255,255,255,.94);
border:1px solid var(--line);
border-left:2px solid var(--accent);
box-shadow:0 6px 22px rgba(13,45,29,.14);
}
body.tech .part-label .card .t{ color:var(--heading); }
body.tech .part-label .card .d{ color:var(--muted); }
/* ---------------------------------------------------------
5. Live telemetry HUD
--------------------------------------------------------- */
body.tech #telemetry .tel-head{ color:var(--muted); }
body.tech #telemetry .tel-head .live-dot{
background:var(--accent-2);
box-shadow:0 0 0 3px rgba(46,168,106,.20);
}
body.tech .tel-card{
background:rgba(255,255,255,.92);
border:1px solid var(--line);
border-left:2px solid var(--accent);
box-shadow:0 6px 22px rgba(13,45,29,.12);
}
body.tech .tel-card .tel-lbl{ color:var(--muted); }
body.tech .tel-card .tel-val{ color:var(--heading); }
body.tech .tel-card .tel-val span{ color:var(--accent); }
/* ---------------------------------------------------------
6. Loading / fallback notice
--------------------------------------------------------- */
body.tech #modelNotice{
background:rgba(255,255,255,.94);
border:1px solid var(--line);
color:var(--muted);
box-shadow:0 6px 20px rgba(13,45,29,.12);
}
body.tech #modelNotice b{ color:var(--accent); }
/* ---------------------------------------------------------
7. Sections below the 3D sequence
These stay transparent, exactly as they were on the dark build: the
device keeps drifting behind them through the features / stats /
brand chapters, and plating them over would throw that away. The
cards inside are already opaque white, so only the section-level
headings sit directly on the moving scene -- those get the same
white halo used higher up the page.
--------------------------------------------------------- */
body.tech #features h2, body.tech #features .eyebrow, body.tech #features .lead,
body.tech #rnd h2, body.tech #rnd .eyebrow, body.tech #rnd .lead,
body.tech #trust .trust-label,
body.tech #team h2, body.tech #team .eyebrow,
body.tech .checklist li{
text-shadow:
0 1px 2px rgba(255,255,255,0.92),
0 2px 10px rgba(255,255,255,0.8);
}
body.tech .checklist li{ color:#33493f; }
/* Contact and the footer did carry solid backgrounds on the dark build
too -- the scene has finished its story by then. */
body.tech #contact{
background:linear-gradient(180deg, rgba(255,255,255,.90), #ffffff 30%);
border-top:1px solid var(--line);
}
body.tech #trust{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
/* =========================================================
Marketing pass — outcomes grid, proof quote, FAQ, sticky CTA
========================================================= */
#outcomes{ padding:110px 5vw 100px; }
.outcome-grid{ grid-template-columns:repeat(4,1fr); }
@media (max-width:1100px){ .outcome-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .outcome-grid{ grid-template-columns:1fr; } }
/* Featured result, pulled out of the case grid */
.quote-band{
position:relative; margin:44px 0 40px; padding:36px 40px 34px 92px;
border:1px solid var(--accent-dim); border-radius:18px;
background:linear-gradient(135deg, var(--accent-soft, rgba(61,220,132,.08)), transparent 70%);
max-width:1000px;
}
.quote-band .quote-mark{
position:absolute; left:34px; top:18px;
font-family:'Space Grotesk',sans-serif; font-size:84px; line-height:1;
color:var(--accent); opacity:.55;
}
.quote-band blockquote p{
font-family:'Space Grotesk',sans-serif; font-weight:500;
font-size:clamp(19px,2.2vw,26px); line-height:1.35; letter-spacing:-.01em;
color:var(--heading, var(--text));
}
.quote-band blockquote footer{
margin-top:16px; font-family:'JetBrains Mono',monospace;
font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
}
@media (max-width:640px){
.quote-band{ padding:30px 22px 26px 22px; }
.quote-band .quote-mark{ position:static; display:block; font-size:56px; margin-bottom:-14px; }
}
/* FAQ */
#faq{ padding:96px 5vw; }
.faq-list{ max-width:820px; margin-top:36px; border-top:1px solid var(--line); }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item summary{
list-style:none; cursor:pointer; padding:20px 44px 20px 0; position:relative;
font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:17px; line-height:1.35;
color:var(--heading, var(--text));
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
content:'+'; position:absolute; right:4px; top:50%; transform:translateY(-50%);
width:28px; height:28px; border-radius:50%; border:1px solid var(--line);
display:flex; align-items:center; justify-content:center;
font-weight:500; color:var(--accent); transition:transform .2s ease, background .2s ease;
}
.faq-item[open] summary::after{ content:'\2013'; background:var(--accent-soft, rgba(61,220,132,.1)); }
.faq-item summary:hover{ color:var(--accent); }
.faq-item p{ padding:0 44px 22px 0; color:var(--muted); font-size:15px; line-height:1.65; max-width:720px; }
.faq-item p b{ color:var(--heading, var(--text)); font-weight:600; }
/* Form reassurance line */
.form-note{ margin-top:12px; font-size:12.5px; color:var(--muted); text-align:left; }
/* Mobile-only sticky CTA */
.sticky-cta{ display:none; }
@media (max-width:760px){
.sticky-cta{
display:block; position:fixed; left:0; right:0; bottom:0; z-index:25;
padding:10px 16px calc(10px + env(safe-area-inset-bottom));
background:rgba(255,255,255,.92); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
border-top:1px solid var(--line);
}
.sticky-cta .btn{ width:100%; justify-content:center; }
body.page{ padding-bottom:72px; }
}
/* =========================================================
Decisions-deck pass — pricing cards, free vs plan split
========================================================= */
#learn, #protection, #record, #pricing, #compare, #inside, #schemes, #audit{ padding:100px 5vw; }
.price-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:44px; max-width:1040px; }
.price-card{
display:flex; flex-direction:column; gap:12px;
padding:32px 30px; border:1px solid var(--line); border-radius:18px;
background:var(--panel, #fff); box-shadow:var(--sh-1, none);
}
.price-card .k{
font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.14em;
text-transform:uppercase; color:var(--accent);
}
.price-card .amt{
font-family:'Space Grotesk',sans-serif; font-weight:700;
font-size:clamp(40px,5vw,56px); line-height:1; letter-spacing:-.02em; color:var(--heading, var(--text));
}
.price-card .what{ font-size:15px; line-height:1.6; color:var(--text); }
.price-card .after{ font-size:14px; line-height:1.6; color:var(--muted); padding-top:12px; border-top:1px solid var(--line); }
.price-card .after b{ color:var(--heading, var(--text)); font-weight:600; }
.price-card .btn{ align-self:flex-start; margin-top:6px; }
.plan-split{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:20px; max-width:1040px; }
.plan-col{ padding:26px 28px; border:1px solid var(--line); border-radius:18px; background:var(--accent-soft, rgba(61,220,132,.06)); }
.plan-col.paid{ background:var(--panel, #fff); }
.plan-col .lbl{
font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.14em;
text-transform:uppercase; color:var(--muted);
}
.plan-col .checklist{ margin-top:16px; }
.plan-col .checklist li{ color:var(--text); }
.plan-note{ margin-top:22px; max-width:760px; font-size:13.5px; line-height:1.6; color:var(--muted); }
@media (max-width:760px){
.price-grid, .plan-split{ grid-template-columns:1fr; }
.price-card{ padding:26px 22px; }
}
/* Money-back guarantee badge on price cards */
.price-card .mbg{
align-self:flex-start; padding:6px 12px; border-radius:999px;
border:1px solid var(--accent-dim); background:var(--accent-soft, rgba(61,220,132,.08));
color:var(--accent); font-size:12.5px; font-weight:600;
}
/* Feature lists inside each price card */
.price-card .card-feats{ padding-top:14px; border-top:1px solid var(--line); }
.price-card .card-feats .lbl{
font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.14em;
text-transform:uppercase; color:var(--muted);
}
.price-card .card-feats .checklist{ margin:12px 0 20px; gap:10px; }
.price-card .card-feats .checklist li{ font-size:14px; color:var(--text); }
.price-card .card-feats .checklist:last-child{ margin-bottom:6px; }
.price-card .btn{ margin-top:auto; }
/* Facebook link: header icon, footer, contact */
.header-actions{ display:flex; align-items:center; gap:10px; }
.social-fb{
display:inline-flex; align-items:center; justify-content:center;
width:40px; height:40px; border-radius:10px;
border:1px solid var(--line); color:var(--muted);
transition:color .2s ease, border-color .2s ease;
}
.social-fb svg{ width:18px; height:18px; }
.social-fb:hover{ color:#1877f2; border-color:#1877f2; }
@media (max-width:1080px){ .social-fb{ display:none; } }
.site-footer .footer-social{
display:inline-flex; align-items:center; gap:8px; margin-top:14px; font-size:13.5px;
}
.site-footer .footer-social svg{ width:16px; height:16px; flex:none; }
.contact-info .info-line svg[fill="currentColor"]{ stroke:none; }
/* Header phone number */
.header-phone{
display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:0 4px;
font-size:14px; font-weight:600; color:var(--heading, var(--text)); white-space:nowrap;
}
.header-phone svg{ width:17px; height:17px; color:var(--accent); flex:none; }
.header-phone:hover{ color:var(--accent); }
@media (max-width:1080px){
#siteHeader .brand-lockup{ order:1; }
#siteHeader .header-actions{ order:2; margin-left:auto; margin-right:10px; }
#siteHeader .nav-toggle{ order:3; }
.header-phone{
width:44px; height:44px; padding:0; justify-content:center;
border:1px solid var(--line); border-radius:9px;
}
.header-phone span{ display:none; }
}
.header-actions > *{ flex:none; }
#siteHeader .header-actions .btn.ghost{ white-space:nowrap; }
@media (max-width:1400px){
.header-phone{
width:40px; height:40px; padding:0; justify-content:center;
border:1px solid var(--line); border-radius:10px;
}
.header-phone span{ display:none; }
.header-actions{ gap:8px; }
}
@media (min-width:1081px){
#mainNav > a, #mainNav .nav-top{ white-space:nowrap; }
}
@media (min-width:1081px) and (max-width:1320px){
#siteHeader nav{ gap:20px; }
}
@media (min-width:1081px) and (max-width:1200px){
#siteHeader nav{ gap:15px; }
#siteHeader .header-actions{ margin-left:14px; }
}
/* ---------------------------------------------------------
Technology page: white outline on all text, so it stays
readable where the 3D device sits behind the content.
--------------------------------------------------------- */
body.tech main h1, body.tech main h2, body.tech main h3,
body.tech main p, body.tech main li, body.tech main .eyebrow,
body.tech main .lbl, body.tech main .num, body.tech main .tag,
body.tech main .m, body.tech main .d, body.tech main .t,
body.tech main .trust-label, body.tech main .scroll-cue,
body.tech main .made-by, body.tech main .pct,
body.tech #intro h1, body.tech #hero h1, body.tech h2.as-h1,
body.tech #explode h2, body.tech #reassemble h2,
body.tech #intro .lead, body.tech #hero .lead, body.tech #explode .lead,
body.tech #intro .eyebrow, body.tech #hero .eyebrow,
body.tech #explode .eyebrow, body.tech #reassemble .eyebrow{
text-shadow:
-1.5px -1.5px 0 #fff, 1.5px -1.5px 0 #fff,
-1.5px 1.5px 0 #fff, 1.5px 1.5px 0 #fff,
0 -2px 0 #fff, 0 2px 0 #fff,
-2px 0 0 #fff, 2px 0 0 #fff,
0 0 10px rgba(255,255,255,.95);
}
body.tech main .btn, body.tech main .btn *,
body.tech .site-footer, body.tech .site-footer *{ text-shadow:none; }
/* Console dropdown sits at the right edge of the nav */
.nav-drop.nav-drop-right{ left:auto; right:-14px; min-width:220px; }
@media (max-width:1080px){ .nav-drop.nav-drop-right{ right:auto; } }
.console-links{ display:flex; gap:12px; flex-wrap:wrap; }
/* Second button on a price card ("Buy online" / "Check availability") */
.price-card .btn + .btn.buy-online{ margin-top:10px; }