/* ============================================================ CONFINIUM — Frutiger Aero restyle · DARK Same layout & class structure as the light theme, reskinned to a dark, underwater-glass take on Frutiger Aero: deep teal-navy surfaces, glowing aqua/cyan accents, translucent frosted panels, subtle top highlights, and glow-based depth instead of white insets. ============================================================ */ :root{ color-scheme:dark; /* ===== Deep aqua-navy surfaces ===== */ --paper:#071318; /* page base (near-black teal) */ --paper-2:#0c1c23; /* slightly lifted */ --paper-card:#0f242d; /* glass card base */ --ink:#e8f4f8; /* bright aqua-white text */ --ink-soft:#a9c4cd; /* soft aqua-grey */ --ink-dim:#6f8b95; /* muted */ /* ===== Cyan / teal / aqua palette (glowing on dark) ===== */ --sky-blue:#5fc6e8; /* bright sky cyan */ --accent:#46b3cc; /* aqua teal */ --accent-bright:#5aa6e6; /* water blue */ --accent-rgb:70,179,204; --accent-bright-rgb:90,166,230; --sky-blue-rgb:95,198,232; /* ===== Bright blue — the one punchy accent (used for em "next") ===== */ --blue-deep:#7fd4ff; --blue-deep-soft:#4aa8ec; /* ===== Accent dots for section labels ===== */ --sq-blue:#5fc6e8; --sq-peach:#54d6cf; /* turquoise */ --sq-coral:#5aa6e6; --sq-ink:#7fb4c4; --line:#1d3a46; /* aqua hairline on dark */ --line-strong:#2c5566; --nav-bg:rgba(9,22,28,.72); /* Recolors the light (#e8e3dc) logo artwork to the bright ink #e8f4f8. On dark, the logo should be near-white aqua, so just normalize-to-black then invert to a soft bright tone. Empirically tuned (exact match). */ --logo-ink:brightness(0) saturate(100%) invert(95%) sepia(5%) saturate(451%) hue-rotate(168deg) brightness(102%) contrast(94%); /* ===== Glow-based shadows & glass highlights ===== */ --shadow:0 18px 48px rgba(0,0,0,.55); --win-shadow:0 16px 40px rgba(0,0,0,.6); --gloss-inset:0 1px 0 rgba(255,255,255,.08) inset; --glow:0 0 24px rgba(95,198,232,.28); --font-primary:'DM Sans',-apple-system,sans-serif; --font-mono:'JetBrains Mono','Fira Code',monospace; --radius-small:8px; --radius-med:12px; --radius-large:18px; --transition-fast:180ms ease; --transition-med:350ms ease; --maxw:1180px; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{font-family:var(--font-primary);color:var(--ink);line-height:1.6; -webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative; background:var(--paper)} a{color:inherit;text-decoration:none} a,button{cursor:pointer} img{max-width:100%;display:block} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px} .mono{font-family:var(--font-mono)} /* Page background lives on a FIXED, viewport-sized layer so its geometry never depends on document height. When sections expand (e.g. the FAQ accordion), the body grows taller — if these gradients were painted on their percentage sizing would rescale and the whole background would appear to drift/band downward. Locking them to the viewport keeps everything still. */ body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none; background: linear-gradient(180deg,rgba(9,24,31,.4),rgba(4,12,16,.85)), radial-gradient(120% 90% at 50% -10%,#0e2a35 0%,#0a1d25 45%,#05111600 100%), var(--paper)} /* fine dot wash + soft cyan top-glow, also viewport-locked */ body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none; background-image: radial-gradient(closest-side at 50% -8%,rgba(70,179,204,.22),transparent 70%), radial-gradient(rgba(120,200,225,.07) 1px,transparent 1px); background-size:auto,4px 4px; background-repeat:no-repeat,repeat; opacity:.9} /* ============================================================ SECTION LABELS — glossy rounded chip ============================================================ */ .flag{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--font-mono); font-size:.66rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft); margin-bottom:1.5rem;padding:.34rem .7rem;border-radius:999px; border:1px solid var(--line-strong); background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(70,179,204,.09)); box-shadow:var(--gloss-inset),0 2px 8px rgba(0,0,0,.35); position:relative;overflow:hidden} .flag::before{content:"";width:11px;height:11px;border-radius:50%;flex-shrink:0; background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.95) 0 22%,transparent 23%),var(--sq-ink); box-shadow:0 0 9px rgba(127,180,196,.8)} .flag--teal::before{background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.95) 0 22%,transparent 23%),var(--sq-peach);box-shadow:0 0 9px rgba(84,214,207,.8)} .flag--cyan::before{background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.95) 0 22%,transparent 23%),var(--sq-coral);box-shadow:0 0 9px rgba(90,166,230,.75)} .flag--deep::before{background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.95) 0 22%,transparent 23%),var(--sq-blue);box-shadow:0 0 9px rgba(95,198,232,.8)} .flag--ink::before{background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.95) 0 22%,transparent 23%),var(--sq-ink)} .flag .pulse{width:7px;height:7px;border-radius:50%;background:var(--accent-bright);animation:pulse 2s infinite} /* Shine sweep across section badges */ .flag::before,.flag .pulse,.flag .window__dot{position:relative;z-index:1} .flag::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;z-index:0; background:linear-gradient(100deg,transparent,rgba(255,255,255,.18),transparent); transform:skewX(-18deg);animation:shimmer 4.5s ease-in-out infinite;pointer-events:none} @keyframes shimmer{0%{left:-60%}45%,100%{left:130%}} /* shared glass box */ .panel{border:1px solid var(--line-strong);border-radius:var(--radius-large); background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(15,36,45,.85)); box-shadow:var(--shadow),var(--gloss-inset)} /* ============================================================ BUTTONS / PILLS — glassy aqua bubbles with glow ============================================================ */ .btn{font-family:var(--font-mono);font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase; display:inline-flex;align-items:center;gap:.6rem;padding:.9rem 1.4rem;border-radius:999px; border:1px solid var(--line-strong);color:var(--ink); background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(70,179,204,.06)); box-shadow:var(--gloss-inset),0 6px 16px rgba(0,0,0,.4); transition:transform var(--transition-fast),background var(--transition-fast), color var(--transition-fast),border-color var(--transition-fast),box-shadow var(--transition-fast)} .btn:hover{transform:translateY(-2px);border-color:var(--accent); box-shadow:var(--gloss-inset),0 10px 24px rgba(0,0,0,.45),var(--glow)} .btn:active{transform:translateY(0)} .btn--teal{color:#03161c;border-color:rgba(95,198,232,.6); background:linear-gradient(180deg,#7fdcf4,#46b3cc); box-shadow:var(--gloss-inset),0 6px 18px rgba(70,179,204,.45)} .btn--teal:hover{background:linear-gradient(180deg,#93e6fb,#5cc4da); box-shadow:var(--gloss-inset),0 10px 26px rgba(70,179,204,.55)} .btn--cyan{color:#021019;border-color:rgba(90,166,230,.6); background:linear-gradient(180deg,#8fc4f4,#5aa6e6); box-shadow:var(--gloss-inset),0 6px 18px rgba(90,166,230,.45)} .btn--cyan:hover{background:linear-gradient(180deg,#a3d0f7,#6cb2ec)} .soon-pill{font-family:var(--font-mono);font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase; display:inline-flex;align-items:center;gap:.55rem;padding:.85rem 1.3rem;border-radius:999px; border:1px solid rgba(95,198,232,.6);color:#03161c; background:linear-gradient(180deg,#7fdcf4,#46b3cc); box-shadow:var(--gloss-inset),0 6px 18px rgba(70,179,204,.42); transition:transform var(--transition-fast),background var(--transition-fast),box-shadow var(--transition-fast)} .soon-pill:hover{transform:translateY(-2px);background:linear-gradient(180deg,#93e6fb,#5cc4da); box-shadow:var(--gloss-inset),0 10px 26px rgba(70,179,204,.55),var(--glow)} .soon-pill:active{transform:translateY(0)} .soon-pill .pulse{width:7px;height:7px;border-radius:50%;background:#03161c;animation:pulse 2s infinite} @keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}} .badge{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:.6rem; font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#021019; border:1px solid rgba(90,166,230,.6);border-radius:999px;padding:.34rem .7rem;white-space:nowrap; background:linear-gradient(180deg,#8fc4f4,#5aa6e6); box-shadow:var(--gloss-inset),0 3px 12px rgba(90,166,230,.4)} .badge .pulse{width:6px;height:6px;border-radius:50%;background:#021019;animation:pulse 2s infinite} .badge--muted{color:var(--ink-soft);border-color:var(--line-strong); background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(15,36,45,.8));box-shadow:var(--gloss-inset)} /* ============================================================ NAV — glassy floating island ============================================================ */ .nav-outer{position:fixed;top:0;left:0;right:0;z-index:1000;display:flex;justify-content:center; padding:16px;pointer-events:none} .nav{pointer-events:auto;display:flex;align-items:center;justify-content:space-between;width:100%; max-width:min(94vw,1180px);gap:24px;background:var(--nav-bg); backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:10px 16px; box-shadow:0 12px 34px rgba(0,0,0,.5),var(--gloss-inset)} .nav-logo{display:flex;align-items:center;line-height:0;flex-shrink:0;gap:9px} .nav-logo-img{height:1.7rem;width:auto;filter:var(--logo-ink)} .nav-logo .mark{font-family:var(--font-mono);font-weight:700;font-size:1rem;letter-spacing:.06em; color:var(--ink);line-height:1;display:flex;align-items:center;gap:9px} .nav-logo .dot{width:10px;height:10px;border-radius:50%;flex-shrink:0; background:radial-gradient(circle at 34% 30%,#fff 0 24%,transparent 25%),var(--accent); box-shadow:0 0 12px rgba(70,179,204,.9)} .nav-links{display:none;align-items:center;gap:2px} .nav-link{font-family:var(--font-mono);font-size:.72rem;font-weight:600;letter-spacing:.06em; text-transform:uppercase;color:var(--ink-soft);padding:.6rem .95rem;white-space:nowrap;border-radius:999px; display:inline-flex;align-items:center;gap:.5rem;transition:background var(--transition-fast),color var(--transition-fast)} .nav-link::before{content:"";width:9px;height:9px;border-radius:50%;flex-shrink:0; background:radial-gradient(circle at 34% 30%,#fff 0 24%,transparent 25%),var(--sq-ink)} .nav-link:nth-child(1)::before{background:radial-gradient(circle at 34% 30%,#fff 0 24%,transparent 25%),var(--sq-peach)} .nav-link:nth-child(2)::before{background:radial-gradient(circle at 34% 30%,#fff 0 24%,transparent 25%),var(--sq-coral)} .nav-link:nth-child(3)::before{background:radial-gradient(circle at 34% 30%,#fff 0 24%,transparent 25%),var(--sq-blue)} .nav-link:hover{background:rgba(255,255,255,.08);color:var(--sky-blue)} .nav-pill{font-family:var(--font-mono);font-size:.64rem;font-weight:700;letter-spacing:.1em; text-transform:uppercase;padding:.55rem .95rem;border-radius:999px;border:1px solid rgba(90,166,230,.6); color:#021019;white-space:nowrap; background:linear-gradient(180deg,#8fc4f4,#5aa6e6); box-shadow:var(--gloss-inset),0 3px 12px rgba(90,166,230,.4)} @media(min-width:900px){.nav-links{display:flex}.nav{padding:10px 14px 10px 18px}.nav-logo-img{height:1.9rem}} /* mobile island */ .nav-top-row{display:contents} .ham{display:none} @media(max-width:899px){ .nav{flex-direction:column;align-items:stretch;gap:0;overflow:hidden;height:auto;border-radius:22px; transition:height var(--transition-med),padding var(--transition-med)} .nav-top-row{display:flex;align-items:center;justify-content:space-between;width:100%;flex-shrink:0;min-height:42px} .nav-links{display:none} .ham{display:flex;align-items:center;justify-content:center;position:relative;z-index:1002;flex-shrink:0; width:42px;height:42px;padding:0;border:1px solid var(--line-strong);border-radius:50%; background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(70,179,204,.06));box-shadow:var(--gloss-inset); -webkit-tap-highlight-color:transparent;transition:background var(--transition-fast)} .ham:hover{background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(70,179,204,.12))} .ham .ham4-svg{width:34px;height:34px;transition:transform 400ms} .ham.open .ham4-svg{transform:rotate(45deg)} .ham .line{fill:none;stroke:var(--ink-soft);stroke-width:5.5;stroke-linecap:round; transition:stroke-dasharray 400ms,stroke-dashoffset 400ms} .ham:hover .line{stroke:var(--sky-blue)} .ham .line.top,.ham .line.bottom{stroke-dasharray:40 121} .ham.open .line.top,.ham.open .line.bottom{stroke-dashoffset:-68px} .nav.island-open{padding-bottom:22px} .island-menu{width:100%;display:flex;flex-direction:column;gap:0; max-height:0;opacity:0;pointer-events:none;overflow:hidden; transition:max-height var(--transition-med),opacity .35s cubic-bezier(.76,0,.24,1),margin-top var(--transition-med)} .nav.island-open .island-menu{max-height:60vh;opacity:1;pointer-events:auto;margin-top:14px; border-top:1px solid var(--line);padding-top:8px;transition-delay:.05s,.12s,0s} .island-menu-link{font-family:var(--font-primary);font-size:clamp(1.3rem,6vw,1.7rem);font-weight:600; text-transform:uppercase;letter-spacing:-.01em;color:var(--ink);line-height:1;padding:14px 2px;display:flex; align-items:center;gap:.7rem;position:relative;opacity:0;transform:translateY(16px); transition:opacity .4s cubic-bezier(.76,0,.24,1),transform .4s cubic-bezier(.76,0,.24,1),color var(--transition-fast)} .island-menu-link::before{content:"";width:12px;height:12px;border-radius:50%;flex-shrink:0; background:radial-gradient(circle at 34% 30%,#fff 0 24%,transparent 25%),var(--sq-ink)} .island-menu-link:nth-of-type(1)::before{background:radial-gradient(circle at 34% 30%,#fff 0 24%,transparent 25%),var(--sq-peach)} .island-menu-link:nth-of-type(2)::before{background:radial-gradient(circle at 34% 30%,#fff 0 24%,transparent 25%),var(--sq-coral)} .island-menu-link:nth-of-type(3)::before{background:radial-gradient(circle at 34% 30%,#fff 0 24%,transparent 25%),var(--sq-blue)} .island-menu-link:hover{color:var(--sky-blue)} .nav.island-open .island-menu-link{opacity:1;transform:translateY(0)} .nav.island-open .island-menu-link:nth-child(1){transition-delay:.10s} .nav.island-open .island-menu-link:nth-child(2){transition-delay:.14s} .nav.island-open .island-menu-link:nth-child(3){transition-delay:.18s} .nav.island-open .island-menu-link:nth-child(4){transition-delay:.22s} .island-menu .nav-pill{display:inline-flex;align-self:flex-start;margin-top:18px;font-size:.7rem; opacity:0;transform:translateY(16px); transition:opacity .4s cubic-bezier(.76,0,.24,1),transform .4s cubic-bezier(.76,0,.24,1)} .nav.island-open .island-menu .nav-pill{opacity:1;transform:translateY(0);transition-delay:.26s} } @media(min-width:900px){.island-menu{display:none}} @media(prefers-reduced-motion:reduce){ .nav,.island-menu,.island-menu-link,.ham .line,.ham .ham4-svg{transition:none!important} } /* ============================================================ HERO — shader bleeds to the very top, light glass overlay ============================================================ */ .hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden} .aurora-field{position:absolute;inset:0;z-index:0;width:100%;height:100%;display:block;pointer-events:none} /* darken the shader toward the deep page base so bright text reads over it */ .hero-shade{position:absolute;inset:0;z-index:1;pointer-events:none; background: linear-gradient(90deg,rgba(7,19,24,.88) 0%,rgba(7,19,24,.62) 40%,rgba(7,19,24,.18) 66%,transparent 84%), linear-gradient(180deg,rgba(7,19,24,.5) 0%,rgba(7,19,24,.15) 42%,rgba(5,17,22,.75) 100%)} @media(max-width:899px){ .hero-shade{background: linear-gradient(180deg,rgba(7,19,24,.45) 0%,rgba(7,19,24,.2) 30%,rgba(6,18,23,.82) 56%,rgba(5,17,22,.92) 100%)} } .hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr;align-items:center; gap:40px;padding:130px 0 90px;width:100%} .hero-copy{order:2;position:relative} .hero-label{font-family:var(--font-mono);font-size:.66rem;font-weight:600;letter-spacing:.14em; text-transform:uppercase;color:var(--ink-soft);margin-bottom:1.5rem;display:inline-flex;align-items:center;gap:.6rem} .hero-label::before{content:"";width:12px;height:12px;border-radius:50%;display:inline-block; background:radial-gradient(circle at 34% 30%,#fff 0 22%,transparent 23%),var(--sq-peach)} .hero-title{font-family:var(--font-primary);font-size:clamp(2.3rem,min(6.5vw,7svh),5rem);font-weight:700; line-height:.96;text-transform:uppercase;letter-spacing:-.015em;color:var(--ink); text-shadow:0 2px 20px rgba(0,0,0,.55)} .hero-title em{font-style:normal;text-shadow:0 0 26px rgba(127,212,255,.45); background:linear-gradient(180deg,var(--blue-deep),var(--blue-deep-soft)); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent} .hero-sub{font-family:var(--font-mono);font-size:clamp(.9rem,1.5vw,1.02rem);color:var(--ink-soft); max-width:48ch;margin-top:1.5rem;line-height:1.75;font-weight:400} .hero-ctas{display:flex;gap:1rem;margin-top:2.2rem;flex-wrap:wrap;align-items:center} .hero-stage{order:1;position:relative;min-height:340px;display:flex;align-items:center;justify-content:center} @media(min-width:900px){ .hero-grid{grid-template-columns:1.02fr .98fr;gap:34px} .hero-copy{order:1} .hero-stage{order:2;min-height:460px} } /* ============================================================ DESKTOP WINDOW — glossy glass frame ============================================================ */ .window{position:relative;width:100%;border-radius:var(--radius-large); box-shadow:var(--win-shadow),var(--gloss-inset)} .window__bar{display:flex;align-items:center;gap:10px;border:1px solid var(--line-strong);border-bottom:none; padding:9px 12px;border-radius:var(--radius-large) var(--radius-large) 0 0; background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(15,36,45,.92))} .window__bar .flag{margin:0;font-size:.58rem;padding:.24rem .55rem} .window__bar .flag::after{display:none} .window__bars{flex:1;height:10px;border-radius:999px; background:repeating-linear-gradient(180deg,rgba(95,198,232,.4) 0 1.5px,transparent 1.5px 4px)} .window__dot{width:11px;height:11px;border-radius:50%;border:1px solid var(--line-strong);flex-shrink:0; background:radial-gradient(circle at 34% 30%,#fff 0 24%,transparent 25%),#2c5566} .window__screen{position:relative;overflow:hidden; background:linear-gradient(180deg,#0c2029,#081820); border:1px solid var(--line-strong);border-radius:0 0 var(--radius-large) var(--radius-large)} .media-slot{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center; justify-content:center;gap:.7rem;text-align:center; background:repeating-linear-gradient(135deg,rgba(12,28,35,.9) 0 10px,rgba(9,22,28,.9) 10px 20px)} .media-slot__inner{border:1px dashed var(--line-strong);background:rgba(7,19,24,.55); border-radius:var(--radius-med);backdrop-filter:blur(4px);padding:1rem 1.4rem; display:flex;flex-direction:column;align-items:center;gap:.5rem;max-width:80%;box-shadow:var(--gloss-inset)} .media-slot__play{width:46px;height:46px;border-radius:50%;border:1px solid rgba(95,198,232,.6); background:linear-gradient(180deg,#7fdcf4,#46b3cc);box-shadow:var(--gloss-inset),0 4px 14px rgba(70,179,204,.4); display:grid;place-items:center} .media-slot__play svg{width:18px;height:18px;display:block;fill:#03161c} .media-slot__label{font-family:var(--font-mono);font-size:.6rem;font-weight:600;letter-spacing:.14em; text-transform:uppercase;color:var(--ink-soft)} .window__img{display:block;width:100%;height:100%;object-fit:cover} .window--hero .window__screen{aspect-ratio:1080/825;height:auto; background:radial-gradient(120% 120% at 70% 25%,rgba(var(--sky-blue-rgb),.22),#081820 62%)} /* ============================================================ SECTION SCAFFOLD ============================================================ */ section{padding:96px 0;position:relative} .sec-title{font-family:var(--font-primary);font-size:clamp(1.7rem,3.8vw,2.7rem);font-weight:700; line-height:1.08;letter-spacing:-.015em;text-transform:uppercase;max-width:18ch;margin-bottom:1.2rem; color:var(--ink)} .sec-blurb{font-family:var(--font-mono);color:var(--ink-soft);max-width:62ch;font-size:.92rem; font-weight:400;line-height:1.75} .sec-blurb+.sec-blurb{margin-top:1.1rem} .divider{height:1px;background:var(--line);max-width:var(--maxw);margin:0 auto} /* ============================================================ PHILOSOPHY + BORDERLAND PANEL ============================================================ */ .phil{border-top:1px solid var(--line);border-bottom:1px solid var(--line); background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(12,28,35,.6)),var(--paper-2)} .phil-head{text-align:center;max-width:none;margin:0} .phil .phil-title{max-width:none;margin:0 auto .4rem} .phil-word{font-family:var(--font-mono);font-size:clamp(1.1rem,2.4vw,1.6rem);font-weight:700; letter-spacing:.22em;color:var(--ink-dim);text-transform:uppercase;margin-top:1.6rem; display:inline-flex;align-items:center;gap:.05em} .phil-word .frag{background:linear-gradient(180deg,var(--sky-blue),var(--accent-bright)); -webkit-background-clip:text;background-clip:text;color:transparent} .phil-def{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;color:var(--ink-dim); text-transform:uppercase;margin:1rem auto 0;line-height:1.7;max-width:54ch} .phil-body{max-width:none;margin:46px 0 0} .phil-body p{font-family:var(--font-mono);color:var(--ink-soft);font-size:.95rem;font-weight:400; line-height:1.85;margin-bottom:1.1rem} .phil-body p:last-child{margin-bottom:0} .phil-body p strong{color:var(--ink);font-weight:700} .borderland{max-width:none;margin:46px 0 0} .borderland .window__screen{height:clamp(260px,42vw,460px);background:var(--paper-2)} .borderland .aurora-field{position:absolute;inset:0;z-index:0} .borderland__overlay{position:absolute;inset:0;z-index:2;pointer-events:none;display:flex;align-items:center} .borderland__line{position:absolute;left:50%;top:8%;bottom:8%;width:3px;transform:translateX(-50%); background:repeating-linear-gradient(180deg,rgba(232,244,248,.95) 0 8px,transparent 8px 16px)} .borderland__word{position:absolute;font-family:var(--font-primary);font-weight:700;text-transform:uppercase; letter-spacing:-.01em;font-size:clamp(1.4rem,4vw,2.6rem);color:#03161c;border-radius:999px; padding:.2em .6em;background:linear-gradient(180deg,#7fdcf4,#46b3cc); border:1px solid rgba(255,255,255,.4); box-shadow:var(--gloss-inset),0 6px 22px rgba(0,0,0,.5); text-shadow:0 1px 4px rgba(255,255,255,.25)} .borderland__word.l{left:6%} .borderland__word.r{right:6%} /* ============================================================ PRINCIPLES — glossy boxed cards ============================================================ */ .tenet-grid{display:grid;grid-template-columns:1fr;gap:1px;margin-top:52px; border:1px solid var(--line-strong);border-radius:var(--radius-large);overflow:hidden; background:var(--line-strong);box-shadow:var(--shadow)} .tenet{background:linear-gradient(180deg,#0f242d,#0b1d24);padding:30px 26px 32px; transition:background var(--transition-fast)} .tenet:hover{background:linear-gradient(180deg,#143039,#0f242d)} .tenet-ico{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px; margin-bottom:18px;border-radius:var(--radius-med);border:1px solid rgba(95,198,232,.5); background:linear-gradient(180deg,#7fdcf4,#46b3cc);color:#03161c; box-shadow:var(--gloss-inset),0 4px 14px rgba(70,179,204,.4)} .tenet-ico svg{width:24px;height:24px;display:block} .tenet h3{font-family:var(--font-primary);font-size:1.18rem;font-weight:700;text-transform:uppercase; letter-spacing:-.01em;margin-bottom:12px;line-height:1.2;color:var(--ink)} .tenet p{font-family:var(--font-mono);color:var(--ink-soft);font-size:.86rem;font-weight:400;line-height:1.7} @media(min-width:760px){.tenet-grid{grid-template-columns:repeat(3,1fr)}} /* ============================================================ EIGHTFIELD TEASER ============================================================ */ .eightfield{border-top:1px solid var(--line);border-bottom:1px solid var(--line); background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(12,28,35,.5))} .ef-grid{display:grid;grid-template-columns:1fr;gap:40px;align-items:center;margin-top:8px} .ef-copy .flag{margin-bottom:1.5rem} .ef-logo-row{display:flex;align-items:center;gap:1rem;margin-bottom:1.2rem} .ef-logo{width:52px;height:52px;object-fit:contain;border-radius:var(--radius-med); padding:0;flex-shrink:0;filter:var(--logo-ink)} .ef-title{margin-bottom:0;font-size:clamp(2rem,4.5vw,3rem)} .ef-tags{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.5rem 0 1.7rem} .ef-tag{font-family:var(--font-mono);font-size:.64rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase; color:var(--ink-soft);padding:.5rem .9rem;border-radius:999px;border:1px solid var(--line-strong); background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(70,179,204,.07)); box-shadow:var(--gloss-inset)} .window--ef .window__screen{aspect-ratio:16/9; background:radial-gradient(120% 120% at 65% 30%,rgba(var(--accent-rgb),.22),#081820 64%)} @media(min-width:860px){.ef-grid{grid-template-columns:1fr 1.12fr;gap:48px}} /* studio section uses the same grid */ #studio .ef-grid{margin-top:0} /* ============================================================ FAQ — glass accordion ============================================================ */ .faq{background:transparent} .faq-list{margin-top:52px;border:1px solid var(--line-strong);border-radius:var(--radius-large);overflow:hidden; box-shadow:var(--shadow)} .faq-item{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(15,36,45,.92))} .faq-item+.faq-item{border-top:1px solid var(--line)} .faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between; gap:1rem;padding:22px 24px;font-family:var(--font-primary);font-weight:700;font-size:clamp(1rem,2vw,1.18rem); text-transform:uppercase;letter-spacing:-.01em;color:var(--ink); transition:background var(--transition-fast)} .faq-item summary::-webkit-details-marker{display:none} .faq-q{flex:1;min-width:0} .faq-ico{flex-shrink:0;width:22px;height:22px;color:var(--sky-blue); transition:transform .4s cubic-bezier(.76,0,.24,1)} .faq-item[open] summary .faq-ico{transform:rotate(45deg)} .faq-item summary:hover{background:rgba(255,255,255,.05)} .faq-a{max-height:0;opacity:0;overflow:hidden; transition:max-height .4s cubic-bezier(.76,0,.24,1),opacity .35s cubic-bezier(.76,0,.24,1)} .faq-item.faq-open .faq-a{opacity:1} .faq-a p{padding:20px 24px 26px;font-family:var(--font-mono);color:var(--ink-soft);font-size:.88rem; font-weight:400;line-height:1.8;max-width:70ch} @media(prefers-reduced-motion:reduce){ .faq-ico{transition:none} .faq-a{transition:none} } /* ============================================================ WHAT'S NEXT — glass cards ============================================================ */ .prod-grid{display:grid;grid-template-columns:1fr;gap:24px;margin-top:52px} .prod{position:relative;border:1px solid var(--line-strong);border-radius:var(--radius-large); background:linear-gradient(180deg,#0f242d,#0b1d24); padding:32px 28px;overflow:hidden;box-shadow:var(--shadow),var(--gloss-inset); transition:background var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast)} .prod:hover{transform:translateY(-4px);background:linear-gradient(180deg,#143039,#0f242d); box-shadow:0 24px 56px rgba(0,0,0,.6),var(--gloss-inset),var(--glow)} .prod-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px;gap:12px;flex-wrap:wrap} .prod-name{font-family:var(--font-mono);font-size:1.15rem;font-weight:700;color:var(--ink); display:inline-flex;align-items:center;gap:.6rem} .prod-logo{height:1.5rem;width:1.5rem;object-fit:contain;display:block;filter:var(--logo-ink)} .prod p{font-family:var(--font-mono);color:var(--ink-soft);font-size:.86rem;font-weight:400; line-height:1.7;margin-bottom:22px} .prod-soonbig{font-family:var(--font-mono);font-size:1.1rem;font-weight:700;letter-spacing:.08em; text-transform:uppercase;color:var(--ink-dim)} .prod-feature{border-color:rgba(95,198,232,.4); background:linear-gradient(160deg,rgba(var(--sky-blue-rgb),.16),#0c2029)} .prod-feature:hover{background:linear-gradient(160deg,rgba(var(--sky-blue-rgb),.24),#143039)} .prod-feature .prod-name{color:var(--ink)} .prod-feature .prod-soonbig{background:linear-gradient(180deg,var(--sky-blue),var(--accent-bright)); -webkit-background-clip:text;background-clip:text;color:transparent} @media(min-width:680px){.prod-grid{grid-template-columns:repeat(2,1fr)}} /* ============================================================ FINAL ============================================================ */ .final{text-align:center;border-top:1px solid var(--line)} .final .flag{justify-content:center} .final h2{font-family:var(--font-primary);font-size:clamp(2.2rem,6vw,4.4rem);font-weight:700; text-transform:uppercase;letter-spacing:-.015em;margin-bottom:16px;line-height:1.04;color:var(--ink)} .final h2 em{font-style:normal;text-shadow:0 0 26px rgba(95,198,232,.35); background:linear-gradient(180deg,var(--sky-blue),var(--accent-bright));-webkit-background-clip:text;background-clip:text;color:transparent} .final p{font-family:var(--font-mono);color:var(--ink-soft);max-width:56ch;margin:0 auto 28px; font-weight:400;font-size:.92rem;line-height:1.75} /* ============================================================ FOOTER — glass columns + shader block ============================================================ */ .footer{border-top:1px solid var(--line); background:linear-gradient(180deg,rgba(5,17,22,.5),rgba(5,17,22,1))} .foot-cols{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line)} .fcol{padding:30px 24px} .fcol:last-child{border-right:none} .fcol .flag{margin-bottom:18px;font-size:.62rem} .fcol .flag::after{display:none} .fcol .fbrand{margin-bottom:14px} .fcol a{display:block;font-family:var(--font-mono);font-size:.78rem;color:var(--ink-soft); padding:7px 0;transition:color var(--transition-fast)} .fcol a:hover{color:var(--sky-blue)} .fcol .foot-ig{display:inline-flex;align-items:center;gap:.5rem} .fcol .foot-ig svg{transition:transform var(--transition-fast)} .fcol .foot-ig:hover svg{transform:scale(1.12) rotate(-4deg)} .fbrand{display:flex;align-items:center;gap:9px} .fbrand-img{height:1.5rem;width:auto;filter:var(--logo-ink)} .fbrand .mark{font-family:var(--font-mono);font-weight:700;font-size:1rem;display:flex;align-items:center;gap:9px} .fbrand .dot{width:9px;height:9px;border-radius:50%; background:radial-gradient(circle at 34% 30%,#fff 0 24%,transparent 25%),var(--accent)} .foot-tag{font-family:var(--font-mono);color:var(--ink-soft);font-size:.78rem;letter-spacing:.03em;font-weight:400} .foot-block{position:relative;height:190px;overflow:hidden;display:flex;align-items:center; justify-content:center;padding:24px 28px;border-radius:var(--radius-large);margin:22px} .foot-block .aurora-field{position:absolute;inset:0;z-index:0} /* soft dark veil so the white logo reads on the shader */ .foot-block::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(180deg,rgba(5,17,22,.35),rgba(5,17,22,.55))} .foot-block__logo{position:relative;z-index:2;height:40px;width:auto; filter:brightness(0) invert(1) drop-shadow(0 2px 10px rgba(0,0,0,.6))} .copy{padding:20px 0;text-align:center;font-size:.74rem;color:var(--ink-dim);font-family:var(--font-mono); letter-spacing:.06em} @media(max-width:760px){ .foot-cols{grid-template-columns:repeat(2,1fr)} .fcol:nth-child(2){border-right:none} .fcol:nth-child(1),.fcol:nth-child(2){border-bottom:1px solid var(--line)} } /* ============================================================ LEGAL OVERLAY — glass panel ============================================================ */ .legal{position:fixed;inset:0;z-index:2000;background:rgba(2,9,12,.66);backdrop-filter:blur(8px); display:none;align-items:flex-start;justify-content:center;padding:60px 16px;overflow-y:auto} .legal.open{display:flex} .legal-panel{max-width:760px;width:100%;border:1px solid var(--line-strong);border-radius:var(--radius-large); background:linear-gradient(180deg,rgba(15,36,45,.98),rgba(9,22,28,.99)); box-shadow:0 30px 80px rgba(0,0,0,.7),var(--gloss-inset); padding:clamp(28px,5vw,48px) clamp(20px,4vw,44px);position:relative;margin:auto} .legal-close{position:absolute;top:18px;right:18px;border-radius:50%; border:1px solid var(--line-strong);color:var(--ink); background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(70,179,204,.06));box-shadow:var(--gloss-inset); width:38px;height:38px;font-size:1.1rem;line-height:1; transition:background var(--transition-fast),color var(--transition-fast)} .legal-close:hover{background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(70,179,204,.12));color:var(--sky-blue)} .legal-panel h1{font-family:var(--font-primary);font-size:1.6rem;font-weight:700;text-transform:uppercase; letter-spacing:-.01em;margin-bottom:24px;color:var(--ink)} .legal-panel h2{font-family:var(--font-mono);font-size:.82rem;font-weight:700;text-transform:uppercase; letter-spacing:.06em;color:var(--sky-blue);margin:24px 0 8px} .legal-panel h3{font-size:.96rem;font-weight:700;margin:18px 0 6px;color:var(--ink)} .legal-panel h4{font-size:.88rem;font-weight:600;margin:14px 0 5px;color:var(--ink-soft)} .legal-panel p{font-family:var(--font-mono);color:var(--ink-soft);font-size:.82rem;font-weight:400; margin-bottom:12px;line-height:1.75;word-wrap:break-word} .legal-panel ul,.legal-panel ol{font-family:var(--font-mono);color:var(--ink-soft);font-size:.82rem; font-weight:400;line-height:1.75;margin:0 0 12px;padding-left:1.4rem} .legal-panel li{margin-bottom:10px} .legal-panel li::marker{color:var(--sky-blue)} .legal-panel a{color:var(--sky-blue);font-weight:600;word-break:break-word} /* Standalone legal pages (imprint.html / privacy.html) */ .legal-static{min-height:100vh;display:flex;align-items:flex-start;justify-content:center; padding:clamp(110px,16vh,150px) 16px 60px;box-sizing:border-box} .legal-back{display:inline-block;font-family:var(--font-mono);font-size:.78rem;font-weight:600; letter-spacing:.04em;color:var(--sky-blue);text-decoration:none;margin-bottom:24px} .legal-back:hover{text-decoration:underline} .legal-footer-links{margin-top:32px;padding-top:18px;border-top:1px solid var(--line-strong); font-size:.78rem} /* ============================================================ 404 PAGE ============================================================ */ .nf{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center; overflow:hidden;text-align:center;padding:120px 20px} .nf-shade{position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(180deg,rgba(7,19,24,.55),rgba(5,17,22,.78))} .nf-inner{position:relative;z-index:2;max-width:560px;display:flex;flex-direction:column; align-items:center;gap:.2rem; background:linear-gradient(180deg,rgba(15,36,45,.7),rgba(9,22,28,.78)); border:1px solid var(--line-strong);border-radius:var(--radius-large); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); box-shadow:var(--shadow),var(--gloss-inset);padding:clamp(32px,6vw,56px)} .nf-icon{height:48px;width:auto;margin-bottom:14px;filter:var(--logo-ink)} .nf-code{font-family:var(--font-primary);font-weight:700;letter-spacing:-.02em;line-height:1; font-size:clamp(4rem,18vw,9rem);margin:.4rem 0 .6rem; background:linear-gradient(180deg,var(--sky-blue),var(--accent-bright));-webkit-background-clip:text;background-clip:text;color:transparent; text-shadow:0 0 30px rgba(95,198,232,.35)} .nf-inner h1{font-family:var(--font-primary);font-size:clamp(1.3rem,4vw,2rem);font-weight:700; text-transform:uppercase;letter-spacing:-.01em;color:var(--ink);margin-bottom:.8rem} .nf-inner p{font-family:var(--font-mono);color:var(--ink-soft);font-size:.9rem;line-height:1.75; max-width:46ch;margin-bottom:1.6rem} .nf-inner .btn{margin-bottom:1.4rem} .nf-meta{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase; color:var(--ink-dim)} /* ============================================================ REVEAL ============================================================ */ .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease} .reveal.in{opacity:1;transform:none} .reveal:not(.in) .tenet,.reveal:not(.in) .ef-tag,.reveal:not(.in) .prod{opacity:0;transform:translateY(14px)} .reveal.in .tenet{animation:rise .6s ease both} .reveal.in .ef-tag{animation:rise .5s ease both} .reveal.in .prod{animation:rise .6s ease both} .reveal.in .tenet:nth-child(1){animation-delay:.05s} .reveal.in .tenet:nth-child(2){animation-delay:.15s} .reveal.in .tenet:nth-child(3){animation-delay:.25s} .reveal.in .ef-tag:nth-child(1){animation-delay:.05s} .reveal.in .ef-tag:nth-child(2){animation-delay:.12s} .reveal.in .ef-tag:nth-child(3){animation-delay:.19s} .reveal.in .ef-tag:nth-child(4){animation-delay:.26s} .reveal.in .prod:nth-child(1){animation-delay:.05s} .reveal.in .prod:nth-child(2){animation-delay:.18s} @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} :focus-visible{outline:3px solid var(--accent-bright);outline-offset:2px} @media(prefers-reduced-motion:reduce){ .reveal .tenet,.reveal .ef-tag,.reveal .prod, .reveal.in .tenet,.reveal.in .ef-tag,.reveal.in .prod{animation:none!important;opacity:1!important;transform:none!important} .soon-pill .pulse,.badge .pulse,.flag .pulse{animation:none!important} .flag::after{animation:none!important} }