/* latin-ext */ @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 480; font-display: swap; src: url(/assets/fonts/Fraunces-480-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 480; font-display: swap; src: url(/assets/fonts/Fraunces-480-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 560; font-display: swap; src: url(/assets/fonts/Fraunces-560-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 560; font-display: swap; src: url(/assets/fonts/Fraunces-560-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/IBMPlexMono-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/IBMPlexMono-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/IBMPlexMono-500-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/IBMPlexMono-500-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/SchibstedGrotesk-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/SchibstedGrotesk-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/SchibstedGrotesk-500-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/SchibstedGrotesk-500-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/SchibstedGrotesk-600-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/SchibstedGrotesk-600-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ============================================================ ETSDGC - design tokens Register: instrumentation / control room, lit like brass and smoked glass. One operator, two executive lenses. Deep ink surfaces, one amber signal, mono readouts, serif display. Light source: single, implied, top-left. Every specular edge and every glow agrees with it. ============================================================ */ :root{ --ink-0:#06111C; --ink-1:#081522; --ink-2:#0B1B2A; --ink-3:#10283B; --line:rgba(198,220,238,.16); --line-strong:rgba(198,220,238,.28); --text-hi:#F5F7FA; --text-mid:#CBD6E2; --text-low:#A4B6C5; --glass-hl:rgba(255,255,255,.14); --glass-hl-strong:rgba(255,255,255,.24); --glass-border:rgba(255,255,255,.15); --signal:#E5A13D; --signal-hi:#F2BC6B; --signal-dim:rgba(229,161,61,.14); --glow:rgba(229,161,61,.36); --glass-fill:rgba(15,27,42,.62); --glass-fill-strong:rgba(11,22,35,.78); --blur-1:14px; --blur-2:22px; --sat:160%; --elev-1:0 1px 2px rgba(0,0,0,.5), 0 12px 32px -12px rgba(0,0,0,.55); --elev-2:0 1px 2px rgba(0,0,0,.55), 0 24px 64px -20px rgba(0,0,0,.65); --r-s:10px; --r-m:16px; --r-l:22px; --font-display:"Fraunces",Georgia,serif; --font-body:"Schibsted Grotesk",system-ui,sans-serif; --font-mono:"IBM Plex Mono",ui-monospace,monospace; --max:1120px; --mx:50vw; --my:30vh; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ background:var(--ink-1);color:var(--text-mid); font-family:var(--font-body);font-size:16.5px;line-height:1.65; -webkit-font-smoothing:antialiased;overflow-x:hidden; position:relative;isolation:isolate; } main,footer{position:relative;z-index:1} ::selection{background:var(--signal);color:var(--ink-0)} h1,h2,h3{font-family:var(--font-display);color:var(--text-hi);font-weight:480;line-height:1.1;letter-spacing:-.01em} a{color:inherit} :focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:4px} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .wrap{max-width:var(--max);margin:0 auto;padding:0 clamp(20px,4vw,44px)} .tag{font-family:var(--font-mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-low);display:flex;align-items:center;gap:12px;flex-wrap:wrap} .tag::before{content:"";width:22px;height:1px;background:var(--signal);flex:none;box-shadow:0 0 10px var(--glow)} .tag b{color:var(--signal);font-weight:500} .tag-author{color:var(--text-hi);letter-spacing:.18em;font-weight:500;margin-left:auto} /* ============================================================ AMBIENT FIELD - sitewide, fixed, behind everything. Eight layers of light, all transform/opacity, no filter blur: 1 halo - breathing horizon glow behind the hero 2 plumes - amber key light + steel fill + warm core 3 aurora - two slow ribbon lights crossing the upper page 4 bokeh - six large soft lights drifting on long cycles 5 sweep - rotating instrument beam 6 beam - a sheen that sweeps the page every ~17s 7 scan - a fine scanline descending every ~13s 8 grid - cursor-lit calibration grid, slowly drifting + vignette - soft edge grounding (no longer crushes to black) ============================================================ */ .ambient{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--ink-1)} .halo{ position:absolute;left:50%;top:-30vh;width:150vmax;height:74vh;transform:translateX(-50%); background:radial-gradient(50% 62% at 50% 42%,rgba(40,120,170,.18),rgba(25,95,145,.06) 46%,transparent 72%); animation:breathe 11s ease-in-out infinite; } @keyframes breathe{0%,100%{opacity:.8}50%{opacity:1}} .plume{position:absolute;width:120vmax;height:120vmax;border-radius:50%;will-change:transform} .plume.key{ top:-58vmax;left:-32vmax; background:radial-gradient(circle,rgba(25,95,145,.22),rgba(16,40,59,.08) 34%,transparent 64%); animation:driftA 64s ease-in-out infinite alternate; } .plume.fill{ bottom:-62vmax;right:-38vmax; background:radial-gradient(circle,rgba(40,120,170,.16),rgba(21,53,74,.05) 36%,transparent 64%); animation:driftB 84s ease-in-out infinite alternate; } .plume.core{ bottom:-70vmax;left:50%;margin-left:-60vmax; background:radial-gradient(circle,rgba(65,145,190,.10),transparent 58%); animation:driftC 52s ease-in-out infinite alternate; } @keyframes driftA{to{transform:translate3d(10vmax,8vmax,0) scale(1.14)}} @keyframes driftB{to{transform:translate3d(-9vmax,-7vmax,0) scale(1.1)}} @keyframes driftC{to{transform:translate3d(6vmax,-5vmax,0) scale(1.16)}} .aurora{position:absolute;mix-blend-mode:screen;will-change:transform} .aurora.a1{ --rot:-16deg;left:-22vmax;top:1vh;width:155vmax;height:46vmax; background:radial-gradient(52% 50% at 50% 50%,rgba(40,120,170,.16),rgba(25,95,145,.05) 46%,transparent 72%); transform:rotate(var(--rot));animation:auro 34s ease-in-out infinite alternate; } .aurora.a2{ --rot:13deg;right:-30vmax;top:24vh;width:150vmax;height:42vmax; background:radial-gradient(52% 50% at 50% 50%,rgba(65,145,190,.12),rgba(21,53,74,.04) 46%,transparent 72%); transform:rotate(var(--rot));animation:auro 46s ease-in-out infinite alternate-reverse; } @keyframes auro{ from{transform:rotate(var(--rot)) translate3d(0,0,0) scale(1)} to{transform:rotate(var(--rot)) translate3d(6vmax,2.5vmax,0) scale(1.07)} } .bokeh{position:absolute;inset:0} .bokeh span{position:absolute;border-radius:50%;mix-blend-mode:screen;will-change:transform;animation:bob var(--t,30s) ease-in-out infinite alternate} @keyframes bob{to{transform:translate3d(var(--dx,4vmin),var(--dy,-6vmin),0) scale(var(--ds,1.16))}} .bokeh span:nth-child(1){width:26vmin;height:26vmin;left:8%;top:16%;background:radial-gradient(circle,rgba(25,95,145,.24),transparent 62%);--t:26s;--dx:5vmin;--dy:-7vmin} .bokeh span:nth-child(2){width:18vmin;height:18vmin;left:76%;top:10%;background:radial-gradient(circle,rgba(40,120,170,.20),transparent 62%);--t:34s;--dx:-4vmin;--dy:5vmin;--ds:1.22} .bokeh span:nth-child(3){width:32vmin;height:32vmin;left:62%;top:56%;background:radial-gradient(circle,rgba(65,145,190,.16),transparent 62%);--t:42s;--dx:-6vmin;--dy:-5vmin;--ds:1.1} .bokeh span:nth-child(4){width:14vmin;height:14vmin;left:22%;top:70%;background:radial-gradient(circle,rgba(25,95,145,.22),transparent 62%);--t:30s;--dx:6vmin;--dy:4vmin;--ds:1.25} .bokeh span:nth-child(5){width:22vmin;height:22vmin;left:44%;top:32%;background:radial-gradient(circle,rgba(140,185,210,.12),transparent 62%);--t:46s;--dx:4vmin;--dy:6vmin} .bokeh span:nth-child(6){width:12vmin;height:12vmin;left:89%;top:74%;background:radial-gradient(circle,rgba(40,120,170,.22),transparent 62%);--t:22s;--dx:-5vmin;--dy:-6vmin;--ds:1.3} .sweep{ position:absolute;left:50%;top:38%;width:180vmax;height:180vmax;margin:-90vmax 0 0 -90vmax; background:conic-gradient(from 0deg,transparent 0deg 334deg,rgba(40,120,170,.08) 351deg,rgba(65,145,190,.14) 356deg,transparent 360deg); -webkit-mask:radial-gradient(circle,transparent 16%,#000 32%,#000 54%,transparent 74%); mask:radial-gradient(circle,transparent 16%,#000 32%,#000 54%,transparent 74%); animation:sweep 58s linear infinite;will-change:transform; opacity:0;transition:opacity 1.2s ease; } body.amb-ready .sweep{opacity:1} @keyframes sweep{to{transform:rotate(1turn)}} .beam{ position:absolute;top:-10%;bottom:-10%;left:0;width:36vw;mix-blend-mode:screen; background:linear-gradient(100deg,transparent 0,rgba(140,185,210,.04) 42%,rgba(65,145,190,.08) 50%,rgba(140,185,210,.04) 58%,transparent); transform:translateX(-70vw) skewX(-12deg);animation:beam 17s ease-in-out infinite;will-change:transform; } @keyframes beam{0%{transform:translateX(-70vw) skewX(-12deg)}30%{transform:translateX(150vw) skewX(-12deg)}100%{transform:translateX(150vw) skewX(-12deg)}} .scan{ position:absolute;left:0;right:0;top:0;height:2px;opacity:0;will-change:transform,opacity; background:linear-gradient(90deg,transparent,rgba(40,120,170,.18) 30%,rgba(65,145,190,.35) 50%,rgba(40,120,170,.18) 70%,transparent); box-shadow:0 0 20px rgba(40,120,170,.3); animation:scan 13s cubic-bezier(.4,0,.6,1) infinite; } @keyframes scan{0%{transform:translateY(-6vh);opacity:0}7%{opacity:.5}46%{transform:translateY(106vh);opacity:.4}52%,100%{transform:translateY(106vh);opacity:0}} .gridwrap{ position:absolute;inset:0; -webkit-mask:linear-gradient(#000 0,#000 46vh,transparent 88vh); mask:linear-gradient(#000 0,#000 46vh,transparent 88vh); } .grid-plane{ position:absolute;inset:-70px; background: linear-gradient(var(--line) 1px,transparent 1px), linear-gradient(90deg,var(--line) 1px,transparent 1px), linear-gradient(rgba(198,220,238,.05) 1px,transparent 1px), linear-gradient(90deg,rgba(198,220,238,.05) 1px,transparent 1px); background-size:180px 180px,180px 180px,36px 36px,36px 36px; -webkit-mask:radial-gradient(760px 580px at var(--mx) var(--my),#000 0%,rgba(0,0,0,.32) 46%,transparent 78%); mask:radial-gradient(760px 580px at var(--mx) var(--my),#000 0%,rgba(0,0,0,.32) 46%,transparent 78%); animation:gridDrift 70s linear infinite alternate;will-change:transform; } @keyframes gridDrift{to{transform:translate3d(-46px,-46px,0)}} .vignette{ position:absolute;inset:0; background: radial-gradient(1200px 760px at 26% 12%,rgba(65,145,190,.06),transparent 60%), radial-gradient(160% 140% at 50% 6%,transparent 52%,rgba(6,17,28,.85) 100%); } /* ============================================================ GLASS Exactly three surfaces sitewide: nav, lens, case file. */ .glass{position:relative;background:var(--glass-fill);border-radius:var(--r-m);box-shadow:var(--elev-1)} @supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){ .glass{-webkit-backdrop-filter:blur(var(--blur-1)) saturate(var(--sat));backdrop-filter:blur(var(--blur-1)) saturate(var(--sat))} } @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .glass{background:var(--ink-2)} } .glass::before{ content:"";position:absolute;inset:0;border-radius:inherit;padding:1px; background:linear-gradient(135deg,rgba(255,255,255,.30),rgba(255,255,255,.07) 38%,rgba(255,255,255,.02) 70%,rgba(255,255,255,.10)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask-composite:exclude; pointer-events:none; } .glass::after{ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; background: radial-gradient(340px 220px at var(--gx,50%) var(--gy,20%),rgba(255,255,255,.075),transparent 62%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E"); mix-blend-mode:screen; } /* ============================================================ NAV */ :root{--nav-max:1400px} .nav{position:fixed;top:0;left:0;right:0;z-index:60} .nav-inner{ max-width:var(--nav-max);margin:14px auto 0;padding:10px 26px 10px 26px; display:flex;align-items:center;gap:24px;border-radius:999px; margin-left:max(16px,calc((100vw - var(--nav-max))/2)); margin-right:max(16px,calc((100vw - var(--nav-max))/2)); background:transparent;box-shadow:none; } .nav-inner::before,.nav-inner::after{opacity:0;transition:opacity .35s ease} .nav.scrolled .nav-inner{background:var(--glass-fill-strong);box-shadow:var(--elev-1)} .nav.scrolled .nav-inner::before,.nav.scrolled .nav-inner::after{opacity:1} .brand{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto;flex:none} .brand-mark{width:30px;height:30px;border-radius:8px;background:var(--ink-3);display:grid;place-items:center;flex:none;border:1px solid var(--line-strong)} .brand-name{font-family:var(--font-mono);font-size:13px;letter-spacing:.18em;color:#FFFFFF;font-weight:700} .brand-name small{display:block;font-size:9.5px;letter-spacing:.22em;color:#CBD6E2;font-weight:600;white-space:nowrap;margin-top:1px} .brand-logo{height:64px;width:auto;display:block} footer .brand-logo{height:96px} .nav-links{display:flex;gap:20px;list-style:none;flex-wrap:nowrap;align-items:center} .nav-links a{font-size:13.5px;color:#F5F7FA;font-weight:500;text-decoration:none;transition:color .25s,opacity .25s,text-shadow .25s;white-space:nowrap;opacity:.92} .nav-links a:hover{color:#FFC86B;opacity:1;text-shadow:0 0 12px var(--glow)} .nav-links a.active{color:#FFC86B;font-weight:700;opacity:1;text-shadow:0 0 14px var(--glow)} .nav-inner .btn,.nav .btn{flex:none;padding:12px 24px;font-size:11.5px;font-weight:750;letter-spacing:.16em} @media (max-width:1240px) and (min-width:961px){ .nav-inner{gap:16px;padding:10px 20px} .nav-links{gap:14px} .nav-links a{font-size:13px} .nav-inner .btn,.nav .btn{padding:11px 20px;font-size:11px} } .btn{ display:inline-flex;align-items:center;gap:10px; font-family:var(--font-mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase; padding:13px 22px;border-radius:999px;text-decoration:none;cursor:pointer;border:0;white-space:nowrap; transition:transform .25s cubic-bezier(.34,1.4,.64,1),background .2s,color .2s,box-shadow .3s; } .btn-signal{ position:relative;overflow:hidden; background:linear-gradient(180deg,#F2BC6B,#E5A13D 60%);color:#0B0F14;font-weight:750;letter-spacing:.18em; text-shadow:0 1px 0 rgba(255,255,255,.35); box-shadow:0 2px 8px rgba(0,0,0,.5),0 10px 30px -8px var(--glow),inset 0 1px 0 rgba(255,255,255,.45); } .btn-signal:hover{box-shadow:0 4px 16px rgba(0,0,0,.6),0 16px 48px -6px rgba(242,188,107,.65),inset 0 1px 0 rgba(255,255,255,.6);transform:translateY(-2px) scale(1.02);color:#0B0F14} .btn-signal::after{content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:45%;transform:translateX(-160%) skewX(-16deg); background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);transition:transform .55s ease;pointer-events:none} .btn-signal:hover::after{transform:translateX(320%) skewX(-16deg)} .btn-ghost{ background:rgba(13,18,25,.90);color:#FFFFFF;font-weight:700;letter-spacing:.18em; border:1px solid rgba(242,188,107,.50);box-shadow:0 2px 8px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.12); backdrop-filter:blur(8px); } .btn-ghost:hover{color:#FFFFFF;border-color:#FFC86B;background:rgba(23,32,44,.95);box-shadow:0 4px 16px rgba(0,0,0,.5),0 0 24px -6px var(--glow),inset 0 1px 0 rgba(255,255,255,.25);transform:translateY(-2px)} .menu-btn{display:none;background:none;border:1px solid var(--line-strong);border-radius:999px;color:var(--text-hi);font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:10px 16px;cursor:pointer} .mobile-menu{display:none;position:fixed;top:74px;left:16px;right:16px;z-index:59;background:var(--ink-3);border:1px solid var(--line-strong);border-radius:var(--r-m);box-shadow:var(--elev-2);padding:10px} .mobile-menu.open{display:block} .mobile-menu a{display:block;padding:13px 16px;text-decoration:none;color:var(--text-mid);font-size:15px;border-radius:8px} .mobile-menu a:hover,.mobile-menu a.active{background:var(--ink-2);color:var(--signal)} /* ============================================================ ROUTER / PAGES */ .page{display:none} .page.active{display:block;animation:pageIn .5s cubic-bezier(.2,.7,.2,1)} @keyframes pageIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} /* ============================================================ HERO (home) + PAGE HERO (subpages) */ .hero{position:relative;min-height:92vh;display:flex;align-items:center;padding:150px 0 90px} .hero .tag b{color:#FFC86B;font-weight:700;letter-spacing:.18em} .hero .tag-author{color:#FFFFFF;font-weight:700;letter-spacing:.18em;border-left:1px solid rgba(255,200,107,.5);padding-left:10px} .hero h1{font-size:clamp(42px,6.4vw,84px);max-width:15ch;margin:26px 0 24px;color:#FFFFFF;font-weight:600;text-shadow:0 2px 20px rgba(0,0,0,.7)} .hero h1 em,.page-hero h1 em{font-style:italic;color:#FFC86B;font-weight:500;text-shadow:0 0 32px rgba(242,188,107,.85)} .hero p.lede{font-size:clamp(17px,1.6vw,19.5px);max-width:520px;color:#F5F7FA;font-weight:450;line-height:1.68;text-shadow:0 1px 4px rgba(0,0,0,.6)} .page-hero p.lede{font-size:clamp(17px,1.6vw,20px);max-width:52ch;color:var(--text-mid)} .hero-cta{display:flex;flex-direction:column;align-items:flex-start;gap:15px;margin-top:40px} .hero-cta .btn{width:max-content} .hero-rail{ position:absolute;left:0;right:0;bottom:26px; display:flex;justify-content:space-between;align-items:center; font-family:var(--font-mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:#CBD6E2;font-weight:600; padding:0 clamp(20px,4vw,44px);max-width:var(--max);margin:0 auto; } .hero-rail span i{font-style:normal;color:#FFC86B;font-weight:700} .page-hero{padding:190px 0 70px;border-bottom:1px solid var(--line)} .page-hero h1{font-size:clamp(36px,4.8vw,62px);max-width:18ch;margin:24px 0 20px} .rise{opacity:0;transform:translateY(14px);animation:riseIn .6s cubic-bezier(.2,.7,.2,1) forwards} .rise.d1{animation-delay:.05s}.rise.d2{animation-delay:.16s}.rise.d3{animation-delay:.27s}.rise.d4{animation-delay:.38s}.rise.d5{animation-delay:.52s} @keyframes riseIn{to{opacity:1;transform:none}} /* ============================================================ SECTIONS */ section{padding:clamp(76px,8vw,108px) 0;position:relative} .sec-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:52px;flex-wrap:wrap} .sec-head h2{font-size:clamp(32px,3.8vw,50px);max-width:22ch;margin-top:16px} .sec-head .side{max-width:38ch;font-size:15.5px;color:#C2D0DC;font-weight:420} /* ============================================================ LENS (signature) */ .advisory{background:linear-gradient(rgba(6,17,28,.5),transparent 22%)} .advisory-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,0.8fr);gap:36px;align-items:center;margin-bottom:28px} .sec-head-left h2{font-size:clamp(32px,3.8vw,48px);max-width:20ch;margin-top:10px;margin-bottom:12px} .sec-head-left .side{max-width:54ch;font-size:15.5px;color:#C2D0DC;font-weight:420;margin:0} .sec-head-right{display:flex;justify-content:flex-end;align-items:center} .lens{display:flex;align-items:center;gap:8px;padding:7px;border-radius:999px;width:max-content;margin:0;background:rgba(14,21,32,.92);border:1px solid rgba(245,184,75,.45);box-shadow:0 12px 32px -10px rgba(0,0,0,.8),0 0 20px rgba(245,184,75,.15);position:relative} .lens-btn{ position:relative;z-index:1;border:0;background:transparent;cursor:pointer; font-family:var(--font-mono);font-size:13.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase; color:#96A7B3;padding:14px 30px;border-radius:999px;transition:color .25s; } .lens-btn[aria-pressed="true"]{color:#0E0903;font-weight:700;text-shadow:0 1px 0 rgba(255,255,255,.4)} .lens-pill{ position:absolute;top:7px;bottom:7px;left:7px;width:0;border-radius:999px;z-index:0; background:linear-gradient(180deg,#FFD06E,#F5B84B 60%); box-shadow:0 1px 2px rgba(0,0,0,.4),0 8px 26px -4px rgba(245,184,75,.8),inset 0 1px 0 rgba(255,255,255,.45); transition:transform .5s cubic-bezier(.34,1.35,.5,1),width .5s cubic-bezier(.34,1.35,.5,1); } @media (max-width:900px){.advisory-head{grid-template-columns:1fr;gap:20px}.sec-head-right{justify-content:flex-start}} .lens-copy{position:relative;min-height:115px;margin-bottom:0} @media (max-width:640px){.lens-copy{min-height:190px}} .lens-copy>div{position:absolute;inset:0;transition:opacity .4s ease,transform .5s cubic-bezier(.2,.8,.2,1)} .lens-copy h3{font-size:clamp(24px,2.6vw,34px);font-weight:700;color:#FFFFFF;margin-bottom:10px;text-shadow:0 2px 10px rgba(0,0,0,.9)} .lens-copy p{max-width:62ch;color:#E0ECF8;font-size:15.5px;line-height:1.6;text-shadow:0 1px 6px rgba(0,0,0,.9);font-weight:420} [data-lens="cto"] .copy-cgo,[data-lens="cgo"] .copy-cto{opacity:0;transform:translateY(10px);pointer-events:none} [data-lens="cto"] .copy-cto,[data-lens="cgo"] .copy-cgo{opacity:1;transform:none;transition-delay:.08s} .scope{display:grid;grid-template-columns:minmax(0,1fr) 116px minmax(0,1fr);gap:0;align-items:stretch} .scope-col{position:relative;overflow:hidden!important;isolation:isolate;padding:32px 32px 28px;border:1px solid var(--line-strong);border-radius:var(--r-m);background:var(--ink-2);transition:opacity .45s ease,transform .5s cubic-bezier(.2,.8,.2,1),border-color .45s,box-shadow .45s} .scope-col > *{position:relative;z-index:2} .scope-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center right;border-radius:inherit;opacity:.55;filter:contrast(1.2) brightness(1.25);transition:opacity .5s ease,transform .5s ease,filter .5s ease;will-change:opacity,transform} .scope-overlay{position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;background:linear-gradient(180deg,rgba(8,21,34,.96) 0%,rgba(8,21,34,.84) 48%,rgba(8,21,34,.40) 100%)} .scope-col:hover .scope-bg{opacity:.78;transform:scale(1.02);filter:contrast(1.25) brightness(1.35)} .scope-col h4{font-family:var(--font-mono);font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:#FFFFFF;margin-bottom:6px;font-weight:700;display:flex;align-items:center;justify-content:space-between} .scope-col .role-sub{font-size:14px;color:#CBD6E2;margin-bottom:20px;font-weight:500} .scope-col ul{list-style:none;margin:0;padding:0} .scope-col li{font-size:15px;color:#F5F7FA;font-weight:500;padding:12px 14px 12px 12px;position:relative;border-top:1px solid rgba(255,255,255,.10);display:flex;align-items:center;justify-content:space-between;gap:12px;border-radius:6px;transition:background .25s,transform .25s} .scope-col li:hover{background:rgba(229,161,61,.12);transform:translateX(4px)} .scope-col li .ric{color:#FFC86B;flex:none;filter:drop-shadow(0 0 6px rgba(242,188,107,.5))} .scope-col li span{flex:1} .scope-col li .arr{color:#CBD6E2;transition:transform .25s,color .25s} .scope-col li:hover .arr{transform:translateX(3px);color:#FFC86B} [data-lens="cto"] .scope-cgo,[data-lens="cgo"] .scope-cto{opacity:.72;transform:scale(.988)} [data-lens="cto"] .scope-cto{border-color:#FFC86B;box-shadow:0 0 44px -14px rgba(245,184,75,.6);opacity:1} [data-lens="cgo"] .scope-cgo{border-color:#38BDF8;box-shadow:0 0 44px -14px rgba(56,189,248,.6);opacity:1} [data-lens="cto"] .scope-cto .scope-bg,[data-lens="cgo"] .scope-cgo .scope-bg{opacity:.72} [data-lens="cgo"] .scope-cgo .mandate-stat.active{background:#0B0F14;border:1px solid #38BDF8;color:#38BDF8;box-shadow:0 0 10px rgba(56,189,248,.4)} .mandate-stat{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;padding:3px 8px;border-radius:5px;display:inline-flex;align-items:center;gap:5px} .mandate-stat.active{background:#0B0F14;border:1px solid #FFC86B;color:#FFC86B;box-shadow:0 0 10px rgba(242,188,107,.4)} .mandate-stat.standby{background:#0B0F14;border:1px solid rgba(198,220,238,.35);color:#CBD6E2} /* CENTRAL COMMAND HUB & CONNECTORS */ .scope-spine{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;z-index:3;width:116px} .spine-line{position:absolute;left:0;right:0;top:50%;height:2px;background:rgba(198,220,238,.25);transform:translateY(-50%);z-index:0;transition:background .4s,box-shadow .4s} [data-lens="cto"] .spine-line{background:linear-gradient(90deg,#FFD06E,rgba(198,220,238,.25));box-shadow:0 0 10px rgba(245,184,75,.6)} [data-lens="cgo"] .spine-line{background:linear-gradient(90deg,rgba(198,220,238,.25),#38BDF8);box-shadow:0 0 10px rgba(56,189,248,.6)} .scope-spine .node{width:90px;height:90px;border-radius:50%;background:radial-gradient(135deg,rgba(20,30,44,.96),rgba(10,16,26,.98));border:1.5px solid #FFD06E;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;z-index:2;box-shadow:0 0 32px -6px rgba(245,184,75,.6),inset 0 1px 0 rgba(255,255,255,.2);transition:border-color .4s,box-shadow .4s} [data-lens="cgo"] .scope-spine .node{border-color:#38BDF8;box-shadow:0 0 32px -6px rgba(56,189,248,.6)} .node-b1{font-family:var(--font-mono);font-size:11.5px;font-weight:800;letter-spacing:.18em;color:#FFFFFF;text-shadow:0 0 10px rgba(255,255,255,.6);display:block;line-height:1.2} .node-b2{font-family:var(--font-mono);font-size:9.5px;font-weight:700;letter-spacing:.16em;color:#FFD06E;text-shadow:0 0 8px rgba(245,184,75,.6);display:block;line-height:1.2;margin-top:2px} [data-lens="cgo"] .node-b2{color:#38BDF8;text-shadow:0 0 8px rgba(56,189,248,.6)} /* ============================================================ CARDS */ .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} @media (min-width:1440px){.svc-grid{gap:20px}} .svc{position:relative;overflow:hidden!important;isolation:isolate;padding:26px 26px 24px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--ink-2);transition:transform .4s cubic-bezier(.2,.8,.2,1),border-color .35s,opacity .45s,box-shadow .35s} .svc > *{position:relative;z-index:2} .svc-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:right center;border-radius:inherit;opacity:.55;filter:contrast(1.2) brightness(1.25);transition:opacity .5s ease,transform .5s ease,filter .5s ease;will-change:opacity,transform} .svc-overlay{position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;background:linear-gradient(90deg,rgba(8,21,34,.96) 0%,rgba(8,21,34,.78) 45%,rgba(8,21,34,.22) 100%)} .svc:hover .svc-bg{opacity:.78;transform:scale(1.03);filter:contrast(1.25) brightness(1.35)} .svc:hover{transform:translateY(-3px);border-color:var(--line-strong);box-shadow:0 20px 48px -20px rgba(0,0,0,.85),0 0 30px -12px var(--glow)} .svc .tag{margin-bottom:14px}.svc .tag::before{width:14px} .svc h4{font-family:var(--font-body);font-weight:600;font-size:17px;color:var(--text-hi);margin-bottom:8px} .svc p{font-size:15px;line-height:1.65;color:var(--text-mid);font-weight:420} .svc-grid > .svc::before{content:"";position:absolute;top:0;left:0;width:26%;height:2px;border-radius:2px;z-index:1; background:linear-gradient(90deg,transparent,var(--signal-hi),transparent);opacity:0;transform:translateX(-115%);pointer-events:none} .svc-grid > .svc:hover::before{animation:edgeTravel 1.7s cubic-bezier(.3,.6,.3,1) forwards} @keyframes edgeTravel{0%{transform:translateX(-115%);opacity:0}12%{opacity:1}86%{opacity:1}100%{transform:translateX(505%);opacity:0}} .svc-group{margin-bottom:44px} .svc-group-head{display:flex;align-items:baseline;gap:16px;margin-bottom:20px} .svc-group-head h3{font-size:22px} .svc-group-head span{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-low)} [data-lens="cto"] .svc-group.g-cgo .svc,[data-lens="cgo"] .svc-group.g-cto .svc{opacity:.38} /* ============================================================ CASE FILE */ .casefile{background:linear-gradient(transparent,rgba(6,17,28,.48) 30%,rgba(6,17,28,.48) 75%,transparent)} .case-stage{position:relative;padding:36px 0 8px} .roadmap-bg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:.5;pointer-events:none} .case-card{position:relative;overflow:hidden!important;isolation:isolate;border-radius:var(--r-l);background:var(--ink-2);border:1px solid var(--line-strong);box-shadow:var(--elev-2);max-width:880px;margin:0 auto;padding:clamp(28px,4vw,52px)} .case-card > *{position:relative;z-index:2} .case-card-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:right center;border-radius:inherit;opacity:.55;filter:contrast(1.2) brightness(1.25);transition:opacity .5s ease,transform .5s ease;will-change:opacity,transform} .case-card-overlay{position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;background:linear-gradient(90deg,rgba(8,21,34,.96) 0%,rgba(8,21,34,.80) 50%,rgba(8,21,34,.25) 100%)} .case-card:hover .case-card-bg{opacity:.78;transform:scale(1.02);filter:contrast(1.25) brightness(1.35)} .case-card blockquote{font-family:var(--font-display);font-size:clamp(21px,2.4vw,29px);color:var(--text-hi);line-height:1.35;margin:18px 0 10px} .case-card cite{font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-mid);font-style:normal} .case-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line-strong);border-radius:var(--r-s);overflow:hidden;margin-top:34px} .case-cell{background:rgba(8,21,34,.88);backdrop-filter:blur(8px);padding:22px 24px} .case-cell h5{font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--signal);margin-bottom:9px} .case-cell p{font-size:14.5px;color:var(--text-mid)} /* roadmap */ .roadmap{margin-top:76px} .roadmap-frame{position:relative;overflow:hidden!important;isolation:isolate;border:1px solid var(--line-strong);border-radius:var(--r-m);background:var(--ink-2);padding:clamp(22px,3.4vw,40px)} .roadmap-frame > *{position:relative;z-index:2} .roadmap-frame-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:right center;border-radius:inherit;opacity:.55;filter:contrast(1.2) brightness(1.25);transition:opacity .5s ease,transform .5s ease,filter .5s ease;will-change:opacity,transform} .roadmap-frame-overlay{position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;background:linear-gradient(90deg,rgba(8,21,34,.96) 0%,rgba(8,21,34,.82) 48%,rgba(8,21,34,.25) 100%)} .roadmap-frame:hover .roadmap-frame-bg{opacity:.78;transform:scale(1.02);filter:contrast(1.25) brightness(1.35)} .horizons{display:grid;position:relative} .horizon{display:grid;grid-template-columns:190px 1fr;gap:26px;padding:26px 0;border-top:1px solid var(--line);position:relative} .horizon:first-child{border-top:0;padding-top:6px} .h-key{display:flex;gap:16px;align-items:flex-start} .h-key .dot{width:12px;height:12px;border-radius:50%;background:var(--ink-1);border:2px solid var(--signal-hi);margin-top:5px;flex:none;position:relative;z-index:1} .h-key h5{font-family:var(--font-display);font-size:22px;color:var(--text-hi);font-weight:600} .h-key span{display:block;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-mid);margin-top:5px;font-weight:500} .h-items{display:flex;flex-wrap:wrap;gap:10px;align-content:center} .chip{font-size:13.5px;font-weight:500;color:var(--text-hi);padding:9px 16px;border:1px solid var(--line-strong);border-radius:999px;background:rgba(23,31,42,.88);backdrop-filter:blur(8px);transition:border-color .3s,box-shadow .3s,transform .3s} .chip:hover{border-color:var(--signal);box-shadow:0 4px 20px -2px var(--glow);transform:translateY(-2px)} .h-spine{position:absolute;left:4.5px;top:20px;bottom:-26px;width:2px;background:var(--line);overflow:hidden} .horizon:last-child .h-spine{display:none} .h-spine i{position:absolute;inset:0;background:linear-gradient(180deg,var(--signal-hi),var(--signal));box-shadow:0 0 12px var(--glow);transform:translateY(-101%);transition:transform .8s cubic-bezier(.2,.7,.2,1)} .in-view .h-spine i{transform:none} .in-view .horizon:nth-child(2) .h-spine i{transition-delay:.55s} .horizon .dot{transition:box-shadow .4s ease .2s,transform .4s ease .2s} .in-view .horizon .dot{box-shadow:0 0 0 5px var(--signal-dim),0 0 18px var(--glow);transform:scale(1.15)} .in-view .horizon:nth-child(2) .dot{transition-delay:.75s} .in-view .horizon:nth-child(3) .dot{transition-delay:1.3s} .coverage{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:26px;padding-top:22px;border-top:1px dashed var(--line-strong)} .coverage .tag{margin-right:6px;color:var(--signal-hi);font-weight:600} .coverage .chip{background:rgba(18,26,35,.75)} /* roadmap: staged reveal + rail pulse */ .roadmap .chip{opacity:0;transform:translateY(8px);transition:border-color .3s,box-shadow .3s,color .3s} .roadmap.in-view .chip{animation:chipRise .5s cubic-bezier(.2,.7,.2,1) forwards} @keyframes chipRise{to{opacity:1;transform:translateY(0)}} .roadmap.in-view .horizon:nth-child(1) .chip:nth-child(1){animation-delay:.25s} .roadmap.in-view .horizon:nth-child(1) .chip:nth-child(2){animation-delay:.34s} .roadmap.in-view .horizon:nth-child(1) .chip:nth-child(3){animation-delay:.43s} .roadmap.in-view .horizon:nth-child(2) .chip:nth-child(1){animation-delay:.82s} .roadmap.in-view .horizon:nth-child(2) .chip:nth-child(2){animation-delay:.91s} .roadmap.in-view .horizon:nth-child(2) .chip:nth-child(3){animation-delay:1s} .roadmap.in-view .horizon:nth-child(3) .chip:nth-child(1){animation-delay:1.38s} .roadmap.in-view .horizon:nth-child(3) .chip:nth-child(2){animation-delay:1.47s} .roadmap.in-view .horizon:nth-child(3) .chip:nth-child(3){animation-delay:1.56s} .roadmap.in-view .coverage .chip:nth-of-type(1){animation-delay:1.9s} .roadmap.in-view .coverage .chip:nth-of-type(2){animation-delay:1.98s} .roadmap.in-view .coverage .chip:nth-of-type(3){animation-delay:2.06s} .roadmap.in-view .coverage .chip:nth-of-type(4){animation-delay:2.14s} .roadmap .chip:hover{border-color:rgba(229,161,61,.55);box-shadow:0 0 16px -5px var(--glow);color:var(--text-hi)} .rail-run{position:absolute;left:3.5px;top:16px;bottom:58px;width:4px;pointer-events:none;opacity:0} .roadmap.in-view .rail-run{opacity:1;transition:opacity .5s ease 1.9s} .rail-run i{position:absolute;left:0;right:0;height:44px;border-radius:4px; background:linear-gradient(transparent,var(--signal-hi),transparent);box-shadow:0 0 10px var(--glow); animation:railRun 7s ease-in-out infinite 2.1s} @keyframes railRun{0%{top:-12%;opacity:0}10%{opacity:.9}55%{top:96%;opacity:.8}63%,100%{top:104%;opacity:0}} /* slopegraph */ /* slopegraph & Risk Transformation Map */ .posture{margin-top:76px;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:44px;align-items:center} .posture-copy h3{font-size:clamp(28px,3.4vw,42px);line-height:1.15;margin:16px 0 16px;color:var(--text-hi)} .posture-copy p{max-width:44ch;font-size:15.5px;line-height:1.65;color:var(--text-mid)} .posture-note{font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;color:var(--signal);margin-top:24px;text-transform:uppercase;display:flex;align-items:center;gap:8px} .posture-note::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--signal);box-shadow:0 0 10px var(--glow);flex:none} .slope-frame{position:relative;overflow:hidden!important;isolation:isolate;border:1px solid var(--line-strong);border-radius:var(--r-l);background:var(--ink-2);box-shadow:0 24px 64px -20px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.12);padding:24px 22px 20px} .slope-frame > *{position:relative;z-index:2} .slope-frame-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:right center;border-radius:inherit;opacity:.55;filter:contrast(1.2) brightness(1.25);transition:opacity .5s ease,transform .5s ease,filter .5s ease;will-change:opacity,transform} .slope-frame-overlay{position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;background:linear-gradient(90deg,rgba(8,21,34,.97) 0%,rgba(8,21,34,.86) 45%,rgba(8,21,34,.55) 100%)} .slope-frame:hover .slope-frame-bg{opacity:.78;transform:scale(1.02);filter:contrast(1.25) brightness(1.35)} .slope-frame svg{width:100%;height:auto;display:block} .slope-frame text{font-family:var(--font-mono);letter-spacing:.08em} .venn-frame{padding:0;overflow:hidden;position:relative} /* bg SVG is IN-FLOW — it determines the card height naturally */ .venn-frame .venn-bg-svg{display:block;width:100%;height:auto!important;position:relative;z-index:0} /* foreground diagram + vignette stack absolutely over the bg */ .venn-frame .venn-fg,.venn-frame .venn-vig{position:absolute;inset:0;width:100%;height:100%} .venn-frame .venn-fg{z-index:2} .venn-frame .venn-vig{z-index:1;pointer-events:none} @keyframes vennScan{0%{transform:translateY(0)}50%{transform:translateY(500px)}100%{transform:translateY(500px)}} @keyframes vennTrace{from{stroke-dashoffset:0}to{stroke-dashoffset:-60}} @keyframes vennTrace2{from{stroke-dashoffset:0}to{stroke-dashoffset:60}} @keyframes vennRipple{0%{r:52;opacity:.55}100%{r:130;opacity:0}} .cv-frame{padding:0;overflow:hidden} .cv-bg-svg{position:absolute;inset:0;z-index:0;width:100%!important;height:100%!important;border-radius:inherit;display:block} .cv-frame svg:not(.cv-bg-svg){padding:24px 22px 20px;box-sizing:border-box} .risk-path-base{stroke:rgba(198,220,238,.14);stroke-width:1.5;fill:none} .risk-line{fill:none;stroke:#FFC86B;stroke-width:3.2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s cubic-bezier(.3,.6,.2,1),stroke .3s,stroke-width .3s,filter .3s;filter:drop-shadow(0 0 10px rgba(229,161,61,.95)) drop-shadow(0 0 2px #FFF)} .in-view .risk-line{stroke-dashoffset:0} .in-view .risk-line.rl1{transition-delay:.5s} .in-view .risk-line.rl2{transition-delay:.8s} .in-view .risk-line.rl3{transition-delay:1.1s} .in-view .risk-line.rl4{transition-delay:1.4s} .risk-label-before{opacity:0;transform:translateX(-8px);transition:opacity .5s ease .3s,transform .5s ease .3s} .in-view .risk-label-before{opacity:1;transform:none} .risk-badge{opacity:0;transform:scale(.85);transition:opacity .5s ease,transform .5s ease} .in-view .risk-badge.rb1{opacity:1;transform:none;transition-delay:1.8s} .in-view .risk-badge.rb2{opacity:1;transform:none;transition-delay:2.0s} .in-view .risk-badge.rb3{opacity:1;transform:none;transition-delay:2.2s} .in-view .risk-badge.rb4{opacity:1;transform:none;transition-delay:2.4s} .slope-dot{opacity:0;transition:opacity .4s ease 1.7s,transform .3s} .in-view .slope-dot{opacity:1} .flow-particle{fill:none;stroke:var(--signal-hi);stroke-width:2.8;stroke-linecap:round;stroke-dasharray:10 160;opacity:0;animation:dashFlow 3.6s linear infinite;filter:drop-shadow(0 0 7px rgba(242,188,107,.85))} .in-view .flow-particle{opacity:.95;transition:opacity .6s ease 1.6s} .risk-status-bar{display:flex;align-items:center;justify-content:space-between;background:rgba(6,17,28,.85);backdrop-filter:blur(8px);border:1px solid rgba(198,220,238,.20);border-radius:8px;padding:10px 16px;margin-top:14px;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.14em;color:var(--text-mid);transition:border-color .3s,background .3s} .risk-status-bar .k{color:var(--text-mid);font-weight:500;text-transform:uppercase} .risk-status-bar .v{color:#F5F7FA;font-weight:600} .risk-status-bar .dir{color:var(--signal-hi);font-weight:600} .risk-row{cursor:pointer;transition:opacity .3s} .risk-row:hover .risk-line{stroke:#F5F7FA;stroke-width:3.5;filter:drop-shadow(0 0 12px rgba(242,188,107,.95))} .risk-row:hover .slope-dot circle{r:6;fill:var(--signal-hi)} .posture:has(.risk-row:hover) .risk-row:not(:hover){opacity:.35} /* ============================================================ ORBITAL INTELLIGENCE ENGINE (Cross-Pollination) */ .orbit-frame{position:relative;border:1px solid rgba(245,184,75,.45);border-radius:var(--r-l);background:radial-gradient(550px 320px at 50% 50%,rgba(40,120,170,.18),transparent 75%),linear-gradient(135deg,rgba(20,30,44,.92),rgba(10,16,26,.96));box-shadow:0 24px 64px -20px rgba(245,184,75,.25),inset 0 1px 0 rgba(255,255,255,.2);padding:24px 22px 18px;overflow:hidden} @supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){ .orbit-frame{-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%)} } .orbit-frame svg{width:100%;height:auto;display:block} .orbit-ring{transform-origin:260px 180px;fill:none;stroke:rgba(245,184,75,.25);stroke-width:1.4;stroke-dasharray:4 8} .orbit-ring.r-outer{animation:orbitCW 32s linear infinite} .orbit-ring.r-mid{animation:orbitCCW 46s linear infinite} .orbit-ring.r-inner{animation:orbitCW 60s linear infinite} @keyframes orbitCW{from{transform:rotate(0deg)}to{transform:rotate(360deg)}} @keyframes orbitCCW{from{transform:rotate(0deg)}to{transform:rotate(-360deg)}} .orbit-center-hub{transform-origin:260px 180px;animation:hubBreathing 5s ease-in-out infinite alternate} @keyframes hubBreathing{from{transform:scale(1)}to{transform:scale(1.025)}} .orbit-node{cursor:pointer;transition:transform .35s ease,opacity .3s ease} .orbit-node rect.node-box{fill:rgba(10,16,26,.92);stroke:rgba(245,184,75,.45);stroke-width:1.4;rx:16px;ry:16px;transition:stroke .3s,fill .3s,filter .3s;filter:drop-shadow(0 4px 12px rgba(0,0,0,.8))} .orbit-node:hover rect.node-box{fill:rgba(245,184,75,.22);stroke:#FFD06E;stroke-width:2;filter:drop-shadow(0 0 18px rgba(245,184,75,.75))} .orbit-node:hover{transform:scale(1.05)} .orbit-node text{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.12em;fill:#FFFFFF;transition:fill .3s,text-shadow .3s} .orbit-node:hover text{fill:#FFD06E;text-shadow:0 0 8px rgba(245,184,75,.7)} .orbit-line{fill:none;stroke:rgba(245,184,75,.28);stroke-width:1.6;transition:stroke .3s,stroke-width .3s,filter .3s} .orbit-line.active-line{stroke:#FFD06E;stroke-width:2.6;filter:drop-shadow(0 0 10px rgba(245,184,75,.9))} .transfer-dot{fill:#FFD06E;filter:drop-shadow(0 0 10px rgba(245,184,75,.95));opacity:0;transition:opacity .3s} .orbit-frame:has(.orbit-node:hover) .orbit-node:not(:hover){opacity:.38} .orbit-status-bar{display:flex;align-items:center;justify-content:space-between;background:rgba(10,16,26,.92);border:1px solid rgba(245,184,75,.4);border-radius:8px;padding:10px 16px;margin-top:14px;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:#E0ECF8;box-shadow:0 0 14px rgba(245,184,75,.2);transition:border-color .3s,background .3s} .orbit-status-bar .k{color:#FFD06E;font-weight:700;text-transform:uppercase;text-shadow:0 0 6px rgba(245,184,75,.4)} .orbit-status-bar .v{color:#FFFFFF;font-weight:600} .orbit-status-bar .dir{color:#F5B84B;font-weight:700} /* ============================================================ PRINCIPLES / OPERATING MODEL */ .principles{margin-top:80px} .principles .sec-head{margin-bottom:32px} .principles .sec-head .side{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.14em;color:var(--text-hi);font-weight:500} .op-model-frame{position:relative;border:1px solid var(--line-strong);border-radius:var(--r-l);background:var(--ink-2);box-shadow:0 24px 64px -20px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.10);padding:32px 28px 24px;overflow:hidden!important;isolation:isolate;margin-bottom:44px} .op-model-frame > *{position:relative;z-index:2} .op-model-frame-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center right;border-radius:inherit;opacity:.45;filter:contrast(1.2) brightness(1.2);transition:opacity .5s ease,transform .5s ease,filter .5s ease;will-change:opacity,transform} .op-model-frame-overlay{position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;background:radial-gradient(650px 360px at 75% 50%,rgba(40,120,170,.14),transparent 75%),linear-gradient(90deg,rgba(8,21,34,.88) 0%,rgba(8,21,34,.75) 45%,rgba(8,21,34,.40) 100%)} .op-model-frame:hover .op-model-frame-bg{opacity:.75;transform:scale(1.02);filter:contrast(1.25) brightness(1.30)} .op-model-frame svg{width:100%;height:auto;display:block} .bench-group{opacity:.92;transform:none;transition:opacity .6s ease,transform .6s ease,filter .6s ease} .in-view .bench-group, .op-model-frame.in-view .bench-group, .principles.in-view .bench-group{opacity:1;transform:none} .in-view .bench-group.dimmed, .op-model-frame.in-view .bench-group.dimmed, .principles.in-view .bench-group.dimmed{opacity:.45;filter:grayscale(0.3)} .operator-group{opacity:1;transform:none;transition:opacity .6s ease,transform .6s ease} .in-view .operator-group, .op-model-frame.in-view .operator-group, .principles.in-view .operator-group{opacity:1;transform:none} .op-direct-line{fill:none;stroke:#FFC86B;stroke-width:3.2;stroke-linecap:round;filter:drop-shadow(0 0 10px rgba(229,161,61,.95)) drop-shadow(0 0 2px #FFF)} .op-flow-particle{fill:none;stroke:#FFFFFF;stroke-width:3.5;stroke-linecap:round;stroke-dasharray:12 180;opacity:.95;animation:opParticleFlow 3.4s linear infinite;filter:drop-shadow(0 0 8px rgba(242,188,107,.95))} @keyframes opParticleFlow{0%{stroke-dashoffset:192}100%{stroke-dashoffset:0}} .op-you-node{transform-origin:480px 62px;animation:youNodePulse 4s ease-in-out infinite alternate} @keyframes youNodePulse{0%{transform:scale(1)}100%{transform:scale(1.05)}} .proof-pillars-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .proof-pillar{position:relative;overflow:hidden!important;isolation:isolate;border:1px solid var(--line-strong);border-radius:var(--r-m);background:var(--ink-2);padding:28px 24px;transition:transform .4s cubic-bezier(.2,.8,.2,1),border-color .35s,box-shadow .35s;cursor:default} .proof-pillar > *{position:relative;z-index:2} .pillar-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:right center;border-radius:inherit;opacity:.55;filter:contrast(1.2) brightness(1.25);transition:opacity .5s ease,transform .5s ease,filter .5s ease;will-change:opacity,transform} .pillar-overlay{position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;background:linear-gradient(180deg,rgba(8,21,34,.96) 0%,rgba(8,21,34,.85) 50%,rgba(8,21,34,.48) 100%)} .proof-pillar:hover .pillar-bg{opacity:.78;transform:scale(1.03);filter:contrast(1.25) brightness(1.35)} .proof-pillar:hover{transform:translateY(-5px);border-color:var(--signal);box-shadow:0 20px 48px -18px rgba(0,0,0,.85),0 0 28px -8px var(--glow)} .proof-pillar-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:12px;flex-wrap:wrap} .proof-pillar h4{font-family:var(--font-display);font-weight:600;font-size:20px;color:#FFFFFF;line-height:1.3;margin:0;transition:color .3s} .pillar-marker{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;padding:4px 10px;border-radius:6px;background:#0B0F14;border:1px solid #F2BC6B;color:#FFC86B;transition:border-color .3s,box-shadow .3s,background .3s} .proof-pillar:hover .pillar-marker{background:rgba(229,161,61,.20);border-color:#FFC86B;box-shadow:0 0 14px rgba(242,188,107,.6)} .pillar-marker i{font-style:normal} .pillar-marker i.dot{width:6px;height:6px;border-radius:50%;background:#FFC86B;display:inline-block;box-shadow:0 0 6px var(--glow)} /* ============================================================ MULTI-GENERATIONAL ROADMAP */ .roadmap-frame{position:relative;border:1px solid rgba(245,184,75,.4);border-radius:var(--r-l);background:radial-gradient(600px 340px at 50% 50%,rgba(40,120,170,.14),transparent 80%),linear-gradient(135deg,rgba(18,27,40,.94),rgba(8,12,20,.98));box-shadow:0 24px 64px -20px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.18);padding:36px 30px 28px;margin:38px 0 44px;overflow:hidden;isolation:isolate} .roadmap-progress-bar{position:relative;width:100%;height:4px;margin-bottom:28px;z-index:2} .roadmap-line-bg{position:absolute;inset:0;background:rgba(245,184,75,.2);border-radius:2px} .roadmap-line-flow{position:absolute;top:0;left:0;height:100%;width:0;background:linear-gradient(90deg,#F5B84B,#FFD06E);border-radius:2px;box-shadow:0 0 14px rgba(245,184,75,.95);transition:width 1.4s cubic-bezier(.25,1,.5,1)} .in-view .roadmap-line-flow, .roadmap-frame.in-view .roadmap-line-flow, [data-reveal].in-view .roadmap-line-flow{width:100%} .roadmap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;position:relative;z-index:2} .roadmap-card{position:relative;border:1px solid rgba(245,184,75,.3);border-radius:var(--r-m);background:linear-gradient(135deg,rgba(15,22,34,.9),rgba(8,12,18,.96));padding:26px 22px 24px;overflow:hidden;transition:transform .4s cubic-bezier(.2,.8,.2,1),border-color .4s ease,box-shadow .4s ease,opacity .6s ease;opacity:0.6;transform:translateY(16px)} .in-view .roadmap-card[data-step="1"], .roadmap-frame.in-view .roadmap-card[data-step="1"], [data-reveal].in-view .roadmap-card[data-step="1"]{opacity:1;transform:translateY(0);transition-delay:.15s} .in-view .roadmap-card[data-step="2"], .roadmap-frame.in-view .roadmap-card[data-step="2"], [data-reveal].in-view .roadmap-card[data-step="2"]{opacity:1;transform:translateY(0);transition-delay:.35s} .in-view .roadmap-card[data-step="3"], .roadmap-frame.in-view .roadmap-card[data-step="3"], [data-reveal].in-view .roadmap-card[data-step="3"]{opacity:1;transform:translateY(0);transition-delay:.55s} .roadmap-card:hover{transform:translateY(-5px)!important;border-color:rgba(245,184,75,.75);box-shadow:0 20px 48px -12px rgba(245,184,75,.35),inset 0 1px 0 rgba(255,255,255,.25)} .roadmap-card-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.22;mix-blend-mode:screen;filter:saturate(140%) contrast(115%);transition:opacity .5s ease,transform .6s cubic-bezier(.2,.8,.2,1);z-index:0;pointer-events:none} .roadmap-card:hover .roadmap-card-bg{opacity:.48;transform:scale(1.06)} .roadmap-card-overlay{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(circle at 50% 0%,rgba(245,184,75,.15),transparent 70%),linear-gradient(180deg,rgba(10,15,24,.4) 0%,rgba(8,12,18,.94) 100%)} .roadmap-card-content{position:relative;z-index:2;display:flex;flex-direction:column;height:100%} .roadmap-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px} .roadmap-badge{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.18em;color:#FFD06E;background:rgba(229,161,61,.18);border:1px solid rgba(245,184,75,.45);padding:4px 10px;border-radius:4px;text-shadow:0 0 8px rgba(245,184,75,.5)} .roadmap-node-dot{width:10px;height:10px;border-radius:50%;background:#FFD06E;border:2px solid #0B0F14;box-shadow:0 0 10px rgba(245,184,75,.9);transition:transform .3s ease,box-shadow .3s ease} .roadmap-card:hover .roadmap-node-dot{transform:scale(1.3);box-shadow:0 0 16px rgba(245,184,75,1)} .roadmap-title{font-family:var(--font-mono);font-weight:700;font-size:18px;letter-spacing:.15em;color:#FFFFFF;margin-bottom:4px;text-shadow:0 2px 10px rgba(0,0,0,.95),0 0 16px rgba(245,184,75,.4)} .roadmap-subtitle{font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#FFD06E;margin-bottom:12px;text-shadow:0 0 6px rgba(245,184,75,.4)} .roadmap-desc{font-family:var(--font-body);font-size:13.5px;line-height:1.6;color:#E0ECF8;text-shadow:0 1px 6px rgba(0,0,0,.95);margin:0} .roadmap-caption{display:flex;align-items:center;justify-content:center;margin-top:24px;padding-top:16px;border-top:1px solid rgba(245,184,75,.2);font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.2em;color:#FFD06E;text-transform:uppercase;position:relative;z-index:2;text-shadow:0 0 8px rgba(245,184,75,.4)} @media (max-width:768px){.roadmap-grid{grid-template-columns:1fr;gap:16px}} /* ============================================================ DECISION-GATE SYSTEM */ .decision-gate-frame{position:relative;border:1px solid rgba(245,184,75,.45);border-radius:var(--r-l);background:radial-gradient(600px 340px at 50% 50%,rgba(40,120,170,.14),transparent 80%),linear-gradient(135deg,rgba(18,27,40,.94),rgba(8,12,20,.98));box-shadow:0 24px 64px -20px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.18);padding:32px 28px 24px;margin:38px 0 44px;overflow:hidden;isolation:isolate} .gate-status-bar{display:flex;align-items:center;justify-content:space-between;background:rgba(10,16,26,.92);border:1px solid rgba(245,184,75,.4);border-radius:8px;padding:10px 16px;margin-bottom:28px;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:#E0ECF8;box-shadow:0 0 14px rgba(245,184,75,.2)} .gate-status-bar .k{color:#FFD06E;font-weight:700;text-transform:uppercase;text-shadow:0 0 6px rgba(245,184,75,.4)} .gate-status-bar .v{color:#FFFFFF;font-weight:600} .gate-status-bar .dir{color:#F5B84B;font-weight:700} .gate-journey-flow{display:grid;grid-template-columns:130px 1fr 150px;gap:20px;align-items:center;position:relative;z-index:2} .gate-path-line{position:absolute;top:50%;left:120px;right:140px;height:4px;transform:translateY(-50%);z-index:1;pointer-events:none} .gate-line-bg{position:absolute;inset:0;background:rgba(245,184,75,.2);border-radius:2px} .gate-line-flow{position:absolute;top:0;left:0;height:100%;width:0;background:linear-gradient(90deg,#F5B84B,#FFD06E);border-radius:2px;box-shadow:0 0 14px rgba(245,184,75,.95);transition:width 1.4s cubic-bezier(.25,1,.5,1)} .in-view .gate-line-flow, .decision-gate-frame.in-view .gate-line-flow, [data-reveal].in-view .gate-line-flow{width:100%} .gate-start-box{position:relative;z-index:3;border:1px solid rgba(198,220,238,.3);border-radius:var(--r-m);background:linear-gradient(135deg,rgba(15,22,34,.95),rgba(8,12,18,.98));padding:20px 14px;text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.6)} .gate-pill-tag{font-family:var(--font-mono);font-size:9.5px;font-weight:700;letter-spacing:.16em;color:#96A7B3;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);padding:2px 7px;border-radius:4px;display:inline-block;margin-bottom:8px} .gate-node-title{font-family:var(--font-mono);font-weight:700;font-size:16px;letter-spacing:.14em;color:#FFFFFF;margin:0 0 4px} .gate-sub-label{font-family:var(--font-mono);font-size:10.5px;color:#96A7B3;display:block} .gate-checkpoints-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;position:relative;z-index:3} .gate-card{position:relative;border:1px solid rgba(245,184,75,.35);border-radius:var(--r-m);background:linear-gradient(135deg,rgba(14,21,32,.92),rgba(8,12,18,.96));padding:20px 16px 18px;overflow:hidden;transition:transform .4s cubic-bezier(.2,.8,.2,1),border-color .4s ease,box-shadow .4s ease,opacity .6s ease;opacity:0.6;transform:translateY(14px)} .in-view .gate-card[data-gate="1"], .decision-gate-frame.in-view .gate-card[data-gate="1"], [data-reveal].in-view .gate-card[data-gate="1"]{opacity:1;transform:translateY(0);transition-delay:.15s} .in-view .gate-card[data-gate="2"], .decision-gate-frame.in-view .gate-card[data-gate="2"], [data-reveal].in-view .gate-card[data-gate="2"]{opacity:1;transform:translateY(0);transition-delay:.35s} .in-view .gate-card[data-gate="3"], .decision-gate-frame.in-view .gate-card[data-gate="3"], [data-reveal].in-view .gate-card[data-gate="3"]{opacity:1;transform:translateY(0);transition-delay:.55s} .gate-card:hover{transform:translateY(-5px)!important;border-color:rgba(245,184,75,.75);box-shadow:0 18px 44px -12px rgba(245,184,75,.38),inset 0 1px 0 rgba(255,255,255,.22)} .gate-card-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.2;mix-blend-mode:screen;filter:saturate(140%) contrast(115%);transition:opacity .5s ease,transform .6s cubic-bezier(.2,.8,.2,1);z-index:0;pointer-events:none} .gate-card:hover .gate-card-bg{opacity:.45;transform:scale(1.06)} .gate-card-overlay{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(circle at 50% 0%,rgba(245,184,75,.15),transparent 70%),linear-gradient(180deg,rgba(10,15,24,.4) 0%,rgba(8,12,18,.94) 100%)} .gate-card-content{position:relative;z-index:2;display:flex;flex-direction:column;height:100%} .gate-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px} .gate-num{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.16em;color:#FFD06E;background:rgba(229,161,61,.18);border:1px solid rgba(245,184,75,.45);padding:2px 7px;border-radius:4px;text-shadow:0 0 6px rgba(245,184,75,.5)} .gate-dot{width:8px;height:8px;border-radius:50%;background:#FFD06E;box-shadow:0 0 8px rgba(245,184,75,.9);transition:transform .3s ease} .gate-card:hover .gate-dot{transform:scale(1.4);box-shadow:0 0 14px rgba(245,184,75,1)} .gate-card-title{font-family:var(--font-mono);font-weight:700;font-size:15px;letter-spacing:.12em;color:#FFFFFF;margin-bottom:3px;text-shadow:0 2px 8px rgba(0,0,0,.95),0 0 14px rgba(245,184,75,.4)} .gate-card-question{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#FFD06E;margin-bottom:8px;text-shadow:0 0 6px rgba(245,184,75,.4)} .gate-card-desc{font-family:var(--font-body);font-size:12.5px;line-height:1.55;color:#E0ECF8;text-shadow:0 1px 6px rgba(0,0,0,.95);margin:0} .gate-end-box{position:relative;z-index:3;border:1px solid rgba(245,184,75,.6);border-radius:var(--r-m);background:linear-gradient(135deg,rgba(229,161,61,.22),rgba(20,28,40,.96));padding:20px 14px;text-align:center;box-shadow:0 0 28px rgba(245,184,75,.35),inset 0 1px 0 rgba(255,255,255,.25);transition:transform .3s ease,box-shadow .3s ease} .gate-end-box:hover{transform:scale(1.03);box-shadow:0 0 36px rgba(245,184,75,.55)} .gate-active-pill{font-family:var(--font-mono);font-size:9.5px;font-weight:700;letter-spacing:.16em;color:#FFD06E;background:rgba(229,161,61,.25);border:1px solid #FFD06E;padding:2px 7px;border-radius:4px;display:inline-block;margin-bottom:8px;text-shadow:0 0 6px rgba(245,184,75,.6)} .gate-prod-title{font-family:var(--font-mono);font-weight:700;font-size:16px;letter-spacing:.14em;color:#FFFFFF;margin:0 0 4px;text-shadow:0 0 12px rgba(245,184,75,.6)} .gate-prod-sub{font-family:var(--font-mono);font-size:10.5px;font-weight:600;color:#FFD06E;display:block} .gate-fallback-branch{display:flex;flex-direction:column;align-items:center;margin-top:22px;position:relative;z-index:2} .gate-branch-line{width:2px;height:24px;background:linear-gradient(180deg,rgba(245,184,75,.5),rgba(245,184,75,.1));margin-bottom:6px} .gate-retire-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(10,16,26,.88);border:1px solid rgba(245,184,75,.35);border-radius:20px;padding:6px 16px;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:#C0D0E0} .gate-retire-badge b{color:#FFD06E;font-weight:700;text-shadow:0 0 8px rgba(245,184,75,.5)} .gate-retire-icon{color:#FFD06E;font-weight:700} .decision-caption{display:flex;align-items:center;justify-content:center;margin-top:18px;padding-top:14px;border-top:1px solid rgba(245,184,75,.2);font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.18em;color:#FFD06E;text-transform:uppercase;position:relative;z-index:2;text-shadow:0 0 8px rgba(245,184,75,.4)} } @media (max-width:900px){ .gate-journey-flow{grid-template-columns:1fr;gap:16px} .gate-path-line{display:none} .gate-checkpoints-grid{grid-template-columns:1fr} } /* ============================================================ SECURITY MODEL COMPARISON (PADLOCK vs PLANE) */ .security-model-frame{position:relative;border:1px solid rgba(245,184,75,.45);border-radius:var(--r-l);background:radial-gradient(600px 340px at 50% 50%,rgba(40,120,170,.14),transparent 80%),linear-gradient(135deg,rgba(18,27,40,.94),rgba(8,12,20,.98));box-shadow:0 24px 64px -20px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.18);padding:32px 28px 24px;margin:38px 0 44px;overflow:hidden;isolation:isolate} .sec-model-status-bar{display:flex;align-items:center;justify-content:space-between;background:rgba(10,16,26,.92);border:1px solid rgba(245,184,75,.4);border-radius:8px;padding:10px 16px;margin-bottom:28px;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:#E0ECF8;box-shadow:0 0 14px rgba(245,184,75,.2)} .sec-model-status-bar .k{color:#FFD06E;font-weight:700;text-transform:uppercase;text-shadow:0 0 6px rgba(245,184,75,.4)} .sec-model-status-bar .v{color:#FFFFFF;font-weight:600} .sec-model-status-bar .dir{color:#F5B84B;font-weight:700} .sec-comparison-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;position:relative;z-index:2} .sec-model-card{position:relative;border:1px solid rgba(198,220,238,.2);border-radius:var(--r-m);background:linear-gradient(135deg,rgba(14,21,32,.92),rgba(8,12,18,.96));padding:26px 22px 22px;overflow:hidden;transition:transform .4s cubic-bezier(.2,.8,.2,1),border-color .4s ease,box-shadow .4s ease} .sec-model-card.plane-side{border-color:rgba(245,184,75,.45);background:linear-gradient(135deg,rgba(20,30,44,.95),rgba(10,16,26,.98));box-shadow:0 16px 44px -14px rgba(245,184,75,.25)} .sec-model-card.plane-side:hover{transform:translateY(-4px);border-color:rgba(245,184,75,.75);box-shadow:0 22px 52px -12px rgba(245,184,75,.4)} .sec-card-header{margin-bottom:20px} .sec-model-tag{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;padding:3px 8px;border-radius:4px;display:inline-block;margin-bottom:10px} .padlock-tag{color:#96A7B3;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15)} .plane-tag{color:#FFD06E;background:rgba(229,161,61,.18);border:1px solid rgba(245,184,75,.45);text-shadow:0 0 6px rgba(245,184,75,.5)} .sec-model-title{font-family:var(--font-mono);font-weight:700;font-size:20px;letter-spacing:.14em;color:#FFFFFF;margin:0 0 4px} .plane-title{color:#FFFFFF;text-shadow:0 0 14px rgba(245,184,75,.5)} .sec-model-subtitle{font-family:var(--font-mono);font-size:11.5px;color:#96A7B3;margin:0} .plane-sub{color:#FFD06E;font-weight:600} .sec-layers-stack{display:flex;flex-direction:column;gap:10px;margin-bottom:22px;position:relative;z-index:2} .sec-layer-row{position:relative;display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-radius:8px;border:1px solid rgba(198,220,238,.12);background:rgba(10,15,22,.6);overflow:hidden;transition:border-color .3s,background .3s,transform .3s} .sec-layer-row.unshielded{opacity:.75} .sec-layer-row.shielded{border-color:rgba(245,184,75,.35);background:rgba(15,24,36,.85)} .sec-layer-row.shielded:hover{border-color:rgba(245,184,75,.6);background:rgba(22,34,50,.92);transform:translateX(3px)} .layer-card-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.16;mix-blend-mode:screen;filter:saturate(140%) contrast(115%);pointer-events:none;z-index:0} .sec-layer-num{font-family:var(--font-mono);font-size:11px;font-weight:700;color:#96A7B3;position:relative;z-index:2} .active-num{color:#FFD06E} .sec-layer-name{font-family:var(--font-mono);font-size:12.5px;font-weight:600;color:#FFFFFF;position:relative;z-index:2} .active-name{color:#FFFFFF;text-shadow:0 1px 6px rgba(0,0,0,.9)} .sec-layer-status{font-family:var(--font-mono);font-size:10.5px;color:#96A7B3;position:relative;z-index:2} .active-status{color:#FFD06E;font-weight:700} .sec-plane-beam{position:absolute;top:70px;bottom:30px;right:18px;width:4px;border-radius:2px;z-index:3;pointer-events:none} .sec-beam-glow{position:absolute;inset:0;background:linear-gradient(180deg,#F5B84B,#FFD06E);border-radius:2px;box-shadow:0 0 14px rgba(245,184,75,.95);opacity:0;transition:opacity 1s ease} .in-view .sec-beam-glow, .security-model-frame.in-view .sec-beam-glow, [data-reveal].in-view .sec-beam-glow{opacity:1} .plane-shield-dot{width:8px;height:8px;border-radius:50%;background:#FFD06E;box-shadow:0 0 8px rgba(245,184,75,.9);position:relative;z-index:2;transition:transform .3s ease} .sec-layer-row.shielded:hover .plane-shield-dot{transform:scale(1.4);box-shadow:0 0 14px rgba(245,184,75,1)} .padlock-exit-node{display:flex;flex-direction:column;align-items:center;position:relative;z-index:2;margin-top:8px} .padlock-stem-line{width:2px;height:20px;background:dashed 1px rgba(198,220,238,.3);margin-bottom:6px} .padlock-lock-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(10,15,22,.9);border:1px solid rgba(198,220,238,.3);border-radius:8px;padding:8px 14px;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;color:#C0D0E0} .padlock-caption-tag{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.14em;color:#96A7B3;margin-top:8px} .plane-integrated-footer{display:flex;justify-content:center;margin-top:14px;position:relative;z-index:2} .plane-footer-tag{font-family:var(--font-mono);font-size:10.5px;font-weight:700;letter-spacing:.14em;color:#FFD06E;background:rgba(229,161,61,.18);border:1px solid rgba(245,184,75,.45);border-radius:20px;padding:6px 14px;text-shadow:0 0 8px rgba(245,184,75,.5)} .sec-model-caption{display:flex;align-items:center;justify-content:center;margin-top:24px;padding-top:16px;border-top:1px solid rgba(245,184,75,.2);font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.2em;color:#FFD06E;text-transform:uppercase;position:relative;z-index:2;text-shadow:0 0 8px rgba(245,184,75,.4)} @media (max-width:800px){.sec-comparison-grid{grid-template-columns:1fr;gap:18px}} /* ============================================================ RANSOMWARE RECOVERY JOURNEY */ .ransomware-journey-frame{position:relative;border:1px solid rgba(245,184,75,.45);border-radius:var(--r-l);background:radial-gradient(600px 340px at 50% 50%,rgba(40,120,170,.14),transparent 80%),linear-gradient(135deg,rgba(18,27,40,.94),rgba(8,12,20,.98));box-shadow:0 24px 64px -20px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.18);padding:32px 28px 24px;margin:38px 0 44px;overflow:hidden;isolation:isolate} .rw-status-bar{display:flex;align-items:center;justify-content:space-between;background:rgba(10,16,26,.92);border:1px solid rgba(245,184,75,.4);border-radius:8px;padding:10px 16px;margin-bottom:28px;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:#E0ECF8;box-shadow:0 0 14px rgba(245,184,75,.2)} .rw-status-bar .k{color:#FFD06E;font-weight:700;text-transform:uppercase;text-shadow:0 0 6px rgba(245,184,75,.4)} .rw-status-bar .v{color:#FFFFFF;font-weight:600} .rw-status-bar .dir{color:#F5B84B;font-weight:700} .rw-phases-container{display:flex;flex-direction:column;gap:24px;position:relative;z-index:2} .rw-phase-block{position:relative;border:1px solid rgba(198,220,238,.2);border-radius:var(--r-m);padding:24px 20px 20px;overflow:hidden} .rw-phase-block.phase-urgent{border-color:rgba(245,184,75,.45);background:linear-gradient(135deg,rgba(24,20,12,.85),rgba(12,16,24,.96));box-shadow:0 12px 36px -12px rgba(245,184,75,.2)} .urgent-pill{color:#FFD06E;background:rgba(229,161,61,.2);border:1px solid rgba(245,184,75,.5);text-shadow:0 0 6px rgba(245,184,75,.5)} .urgent-title{color:#FFFFFF;text-shadow:0 0 12px rgba(245,184,75,.5)} .rw-phase-block.phase-rebuild{border-color:rgba(14,165,233,.45);background:linear-gradient(135deg,rgba(10,24,36,.88),rgba(8,14,24,.96));box-shadow:0 12px 36px -12px rgba(14,165,233,.2)} .rebuild-pill{color:#38BDF8;background:rgba(14,165,233,.18);border:1px solid rgba(14,165,233,.5);text-shadow:0 0 6px rgba(14,165,233,.5)} .rebuild-title{color:#FFFFFF;text-shadow:0 0 12px rgba(14,165,233,.5)} .rw-phase-header{margin-bottom:18px} .rw-phase-pill{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;padding:3px 8px;border-radius:4px;display:inline-block;margin-bottom:8px} .rw-phase-title{font-family:var(--font-mono);font-weight:700;font-size:18px;letter-spacing:.14em;margin:0 0 4px} .rw-phase-desc{font-family:var(--font-mono);font-size:11.5px;color:#96A7B3;margin:0} .rw-milestones-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .rw-mcard{position:relative;border:1px solid rgba(198,220,238,.2);border-radius:var(--r-s);background:linear-gradient(135deg,rgba(14,21,32,.9),rgba(8,12,18,.96));padding:16px 14px 14px;overflow:hidden;transition:transform .35s ease,border-color .35s,box-shadow .35s} .rw-mcard-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.18;mix-blend-mode:screen;filter:saturate(140%) contrast(115%);pointer-events:none;z-index:0} .rw-mcard.urgent-mcard{border-color:rgba(245,184,75,.3)} .rw-mcard.urgent-mcard:hover{transform:translateY(-4px);border-color:rgba(245,184,75,.75);box-shadow:0 14px 32px -10px rgba(245,184,75,.35)} .urgent-dot{background:#FFD06E;box-shadow:0 0 8px rgba(245,184,75,.9)} .rw-mcard.urgent-mcard:hover .urgent-dot{transform:scale(1.4);box-shadow:0 0 14px rgba(245,184,75,1)} .rw-mcard.rebuild-mcard{border-color:rgba(14,165,233,.3)} .rw-mcard.rebuild-mcard:hover{transform:translateY(-4px);border-color:rgba(56,189,248,.75);box-shadow:0 14px 32px -10px rgba(14,165,233,.35)} .rebuild-num{color:#38BDF8!important} .rebuild-dot{background:#38BDF8;box-shadow:0 0 8px rgba(56,189,248,.9)} .rw-mcard.rebuild-mcard:hover .rebuild-dot{transform:scale(1.4);box-shadow:0 0 14px rgba(56,189,248,1)} .rw-mcard-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;position:relative;z-index:2} .rw-mnum{font-family:var(--font-mono);font-size:10px;font-weight:700;color:#FFD06E} .rw-mdot{width:8px;height:8px;border-radius:50%;transition:transform .3s ease} .rw-mtitle{font-family:var(--font-mono);font-weight:700;font-size:14px;letter-spacing:.12em;color:#FFFFFF;margin:0 0 4px;position:relative;z-index:2;text-shadow:0 1px 6px rgba(0,0,0,.95)} .rw-mdesc{font-family:var(--font-body);font-size:12px;line-height:1.45;color:#E0ECF8;margin:0;position:relative;z-index:2;text-shadow:0 1px 4px rgba(0,0,0,.95)} .rw-phase-transition{display:flex;flex-direction:column;align-items:center;position:relative;z-index:2} .rw-trans-line{width:2px;height:20px;background:linear-gradient(180deg,rgba(245,184,75,.6),rgba(14,165,233,.6));margin-bottom:4px} .rw-trans-badge{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.16em;color:#FFD06E;background:rgba(10,16,26,.88);border:1px solid rgba(245,184,75,.35);padding:4px 12px;border-radius:14px;text-shadow:0 0 6px rgba(245,184,75,.4)} .rw-journey-caption{display:flex;align-items:center;justify-content:center;margin-top:22px;padding-top:16px;border-top:1px solid rgba(245,184,75,.2);font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.2em;color:#FFD06E;text-transform:uppercase;position:relative;z-index:2;text-shadow:0 0 8px rgba(245,184,75,.4)} @media (max-width:850px){.rw-milestones-grid{grid-template-columns:1fr 1fr;gap:12px}} @media (max-width:550px){.rw-milestones-grid{grid-template-columns:1fr}} /* ============================================================ LEADERSHIP HANDOFF TRANSITION SYSTEM */ .leadership-handoff-frame{position:relative;border:1px solid rgba(245,184,75,.45);border-radius:var(--r-l);background:radial-gradient(600px 340px at 50% 50%,rgba(40,120,170,.14),transparent 80%),linear-gradient(135deg,rgba(18,27,40,.94),rgba(8,12,20,.98));box-shadow:0 24px 64px -20px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.18);padding:32px 28px 24px;margin:38px 0 44px;overflow:hidden;isolation:isolate} .handoff-status-bar{display:flex;align-items:center;justify-content:space-between;background:rgba(10,16,26,.92);border:1px solid rgba(245,184,75,.4);border-radius:8px;padding:10px 16px;margin-bottom:24px;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:#E0ECF8;box-shadow:0 0 14px rgba(245,184,75,.2)} .handoff-status-bar .k{color:#FFD06E;font-weight:700;text-transform:uppercase;text-shadow:0 0 6px rgba(245,184,75,.4)} .handoff-status-bar .v{color:#FFFFFF;font-weight:600} .handoff-status-bar .dir{color:#F5B84B;font-weight:700} .handoff-chart-box{position:relative;border:1px solid rgba(198,220,238,.2);border-radius:var(--r-m);background:linear-gradient(135deg,rgba(12,18,28,.92),rgba(8,12,18,.96));padding:24px 20px 20px;overflow:hidden} .handoff-card-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.18;mix-blend-mode:screen;filter:saturate(140%) contrast(115%);pointer-events:none;z-index:0} .handoff-card-overlay{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(circle at 50% 40%,rgba(245,184,75,.12),transparent 70%),linear-gradient(180deg,rgba(10,15,24,.4) 0%,rgba(8,12,18,.94) 100%)} .handoff-svg{width:100%;height:auto;display:block;position:relative;z-index:2} .handoff-curve{stroke-dasharray:1000;stroke-dashoffset:1000;transition:stroke-dashoffset 1.8s cubic-bezier(.25,1,.5,1)} .in-view .handoff-curve, .leadership-handoff-frame.in-view .handoff-curve, [data-reveal].in-view .handoff-curve{stroke-dashoffset:0} .successor-pulse-ring{transform-origin:260px 118px;animation:successorPulse 3s ease-in-out infinite alternate} @keyframes successorPulse{0%{transform:scale(1);opacity:.5}100%{transform:scale(1.35);opacity:1}} .handoff-phases-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:20px;position:relative;z-index:2} .handoff-phase-card{position:relative;border:1px solid rgba(198,220,238,.2);border-radius:var(--r-s);background:rgba(10,15,24,.75);padding:14px 12px;transition:border-color .3s,transform .3s,box-shadow .3s} .handoff-phase-card.focus-card{border-color:rgba(245,184,75,.45);background:rgba(20,28,40,.88)} .handoff-phase-card:hover{transform:translateY(-3px);border-color:rgba(245,184,75,.6);box-shadow:0 12px 28px -10px rgba(245,184,75,.3)} .hphase-tag{font-family:var(--font-mono);font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:2px 7px;border-radius:4px;display:inline-block;margin-bottom:6px} .amber-htag{color:#FFD06E;background:rgba(229,161,61,.18);border:1px solid rgba(245,184,75,.45)} .gold-htag{color:#FFFFFF;background:rgba(245,184,75,.25);border:1px solid #FFD06E;text-shadow:0 0 6px rgba(245,184,75,.5)} .blue-htag{color:#38BDF8;background:rgba(14,165,233,.18);border:1px solid rgba(14,165,233,.45)} .hphase-title{font-family:var(--font-mono);font-weight:700;font-size:13.5px;color:#FFFFFF;margin:0 0 3px} .hphase-desc{font-family:var(--font-body);font-size:12px;line-height:1.5;color:#E0ECF8;margin:0} .handoff-caption{display:flex;align-items:center;justify-content:center;margin-top:22px;padding-top:16px;border-top:1px solid rgba(245,184,75,.2);font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.2em;color:#FFD06E;text-transform:uppercase;position:relative;z-index:2;text-shadow:0 0 8px rgba(245,184,75,.4)} @media (max-width:768px){.handoff-phases-grid{grid-template-columns:1fr}} /* ============================================================ EMERGING TECHNOLOGY ADOPTION FRAMEWORK */ .tech-adoption-frame{position:relative;border:1px solid rgba(245,184,75,.45);border-radius:var(--r-l);background:radial-gradient(600px 340px at 50% 50%,rgba(40,120,170,.14),transparent 80%),linear-gradient(135deg,rgba(18,27,40,.94),rgba(8,12,20,.98));box-shadow:0 24px 64px -20px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.18);padding:32px 28px 24px;margin:38px 0 44px;overflow:hidden;isolation:isolate} .tech-status-bar{display:flex;align-items:center;justify-content:space-between;background:rgba(10,16,26,.92);border:1px solid rgba(245,184,75,.4);border-radius:8px;padding:10px 16px;margin-bottom:24px;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:#E0ECF8;box-shadow:0 0 14px rgba(245,184,75,.2)} .tech-status-bar .k{color:#FFD06E;font-weight:700;text-transform:uppercase;text-shadow:0 0 6px rgba(245,184,75,.4)} .tech-status-bar .v{color:#FFFFFF;font-weight:600} .tech-status-bar .dir{color:#F5B84B;font-weight:700} .four-questions-header{display:flex;flex-direction:column;align-items:center;margin-bottom:22px;position:relative;z-index:2} .fq-badge{display:inline-flex;align-items:center;gap:10px;background:rgba(10,16,26,.95);border:1px solid rgba(245,184,75,.5);border-radius:20px;padding:8px 18px;font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.14em;color:#FFD06E;box-shadow:0 0 16px rgba(245,184,75,.3);text-shadow:0 0 8px rgba(245,184,75,.4)} .fq-connector-line{width:2px;height:16px;background:linear-gradient(180deg,rgba(245,184,75,.6),rgba(56,189,248,.6));margin-top:6px} .adoption-stages-grid{display:flex;flex-direction:column;gap:16px;position:relative;z-index:2} .adoption-stage-card{position:relative;border:1px solid rgba(198,220,238,.2);border-radius:var(--r-m);background:linear-gradient(135deg,rgba(14,21,32,.92),rgba(8,12,18,.96));padding:20px 22px;overflow:hidden;transition:transform .35s ease,border-color .35s,box-shadow .35s} .astage-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.18;mix-blend-mode:screen;filter:saturate(140%) contrast(115%);pointer-events:none;z-index:0} .stage-emerging{border-color:rgba(245,184,75,.35)} .stage-emerging:hover{transform:translateX(4px);border-color:rgba(245,184,75,.75);box-shadow:0 14px 32px -10px rgba(245,184,75,.3)} .stage-growth{border-color:rgba(229,161,61,.45);background:linear-gradient(135deg,rgba(20,28,40,.94),rgba(10,16,26,.98))} .stage-growth:hover{transform:translateX(4px);border-color:rgba(255,208,110,.85);box-shadow:0 14px 32px -10px rgba(255,208,110,.35)} .stage-mainstream{border-color:rgba(14,165,233,.45);background:linear-gradient(135deg,rgba(10,26,40,.94),rgba(8,14,24,.98))} .stage-mainstream:hover{transform:translateX(4px);border-color:rgba(56,189,248,.85);box-shadow:0 14px 32px -10px rgba(56,189,248,.35)} .astage-content{display:grid;grid-template-columns:180px 1fr 220px;align-items:center;gap:18px;position:relative;z-index:2} .astage-left{display:flex;flex-direction:column;gap:2px} .astage-step-num{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.16em;color:#96A7B3} .astage-title{font-family:var(--font-mono);font-weight:700;font-size:16px;letter-spacing:.12em;color:#FFFFFF;margin:0 0 2px} .astage-horizon{font-family:var(--font-mono);font-size:11px;color:#FFD06E;font-weight:600} .astage-arrow{display:flex;align-items:center;position:relative;height:2px} .astage-line{flex:1;height:2px;background:linear-gradient(90deg,rgba(198,220,238,.2),rgba(245,184,75,.6))} .astage-node-dot{width:8px;height:8px;border-radius:50%;background:#FFD06E;box-shadow:0 0 8px rgba(245,184,75,.9);transition:transform .3s ease} .adoption-stage-card:hover .astage-node-dot{transform:scale(1.4);box-shadow:0 0 14px rgba(245,184,75,1)} .astage-right{display:flex;flex-direction:column;gap:6px;align-items:flex-end;text-align:right} .astage-posture-tag{font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;padding:4px 12px;border-radius:6px;display:inline-block} .posture-watch{color:#FFD06E;background:rgba(229,161,61,.18);border:1px solid rgba(245,184,75,.45);text-shadow:0 0 6px rgba(245,184,75,.4)} .posture-pilot{color:#FFFFFF;background:rgba(245,184,75,.28);border:1px solid #FFD06E;text-shadow:0 0 8px rgba(245,184,75,.6)} .posture-adopt{color:#38BDF8;background:rgba(14,165,233,.2);border:1px solid rgba(56,189,248,.6);text-shadow:0 0 6px rgba(56,189,248,.5)} .astage-posture-desc{font-family:var(--font-body);font-size:12px;line-height:1.45;color:#E0ECF8;margin:0;max-width:210px} .tech-adoption-caption{display:flex;align-items:center;justify-content:center;margin-top:22px;padding-top:16px;border-top:1px solid rgba(245,184,75,.2);font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.2em;color:#FFD06E;text-transform:uppercase;position:relative;z-index:2;text-shadow:0 0 8px rgba(245,184,75,.4)} @media (max-width:768px){.astage-content{grid-template-columns:1fr;gap:12px;text-align:left}.astage-right{align-items:flex-start;text-align:left}.astage-arrow{display:none}} .proof-pillar p{font-size:14.5px;line-height:1.65;color:#CBD6E2;font-weight:420;margin:0} /* ============================================================ SERVICE DETAIL ROWS (services page) */ .svc-row{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);gap:44px;padding:44px 0;border-top:1px solid var(--line);align-items:start} .svc-row:first-of-type{border-top:0} .svc-row h3{font-size:clamp(22px,2.4vw,30px);margin-top:12px;max-width:16ch} .svc-row .body p{font-size:15.5px;max-width:62ch} .svc-row .metrics{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px} .svc-row .metrics .chip{border-color:rgba(229,161,61,.3);color:var(--signal);background:var(--signal-dim)} /* ============================================================ SEQUENCE (approach / adoption - real sequences, so numbered) */ .seq{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;counter-reset:step} .step{position:relative;padding:28px 24px 26px;border:1px solid rgba(229,161,61,.32);border-radius:var(--r-m);background:linear-gradient(135deg, rgba(16,24,36,.94), rgba(8,12,18,.98));counter-increment:step;overflow:hidden;box-shadow:0 12px 32px -12px rgba(0,0,0,.7);transition:transform .4s cubic-bezier(.2,.8,.2,1),border-color .4s ease,box-shadow .4s ease} .step:hover{transform:translateY(-4px);border-color:rgba(245,184,75,.7);box-shadow:0 18px 48px -12px rgba(245,184,75,.35),inset 0 1px 0 rgba(255,255,255,.2)} /* Context background image for steps - darker & softer */ .step-bg-img{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.2;mix-blend-mode:screen;filter:saturate(120%) contrast(110%) brightness(80%);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.2,1);z-index:0;pointer-events:none} .step:hover .step-bg-img{opacity:.35;transform:scale(1.04)} /* Subtle dark gradient overlay behind text to ensure crisp legibility */ .step::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(10,16,24,.6) 0%, rgba(6,10,16,.88) 100%);z-index:1;pointer-events:none} .step::before{ content:"0" counter(step);position:absolute;top:16px;right:18px; font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.16em; color:#FFD06E;background:rgba(10,16,26,.92);border:1px solid rgba(245,184,75,.5); padding:3px 9px;border-radius:4px;box-shadow:0 0 12px rgba(245,184,75,.35); text-shadow:0 0 8px rgba(245,184,75,.6);z-index:3; } .step h4{font-family:var(--font-body);font-weight:700;font-size:19px;color:#FFFFFF;margin-bottom:10px;text-shadow:0 2px 8px rgba(0,0,0,.95);letter-spacing:-.01em;position:relative;z-index:3} .step p{font-size:14px;line-height:1.6;color:#E0ECF8;text-shadow:0 1px 4px rgba(0,0,0,.95);font-weight:420;position:relative;z-index:3} .step .bar{position:absolute;left:0;top:0;bottom:0;width:3px;background:rgba(229,161,61,.2);z-index:3} .step .bar i{position:absolute;inset:0;background:var(--signal);box-shadow:0 0 14px var(--glow);transform:translateY(-101%);transition:transform .6s cubic-bezier(.2,.7,.2,1)} .in-view .step .bar i{transform:none} .in-view .step:nth-child(2) .bar i{transition-delay:.2s} .in-view .step:nth-child(3) .bar i{transition-delay:.4s} .in-view .step:nth-child(4) .bar i{transition-delay:.6s} /* ============================================================ ABOUT */ .founder{display:grid;grid-template-columns:300px minmax(0,1fr);gap:56px;align-items:start} .portrait{ aspect-ratio:3/3.6;border-radius:var(--r-l);border:1px solid var(--line-strong); background: radial-gradient(560px 380px at 32% 10%,rgba(40,120,170,.18),transparent 62%), radial-gradient(360px 220px at 70% 96%,rgba(25,95,145,.10),transparent 70%), linear-gradient(160deg,var(--ink-3),var(--ink-1)); display:flex;flex-direction:column;justify-content:space-between;padding:22px; } .portrait .mono-big{font-family:var(--font-display);font-style:italic;font-size:70px;color:var(--text-hi);line-height:1;text-shadow:0 2px 26px rgba(229,161,61,.28)} .portrait .cap{font-family:var(--font-body);font-size:12.5px;letter-spacing:.02em;color:var(--text-mid);line-height:1.55} .portrait.has-photo{padding:0;justify-content:flex-end} .portrait.has-photo img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%; filter:saturate(.9) contrast(1.05) brightness(.99); } .portrait.has-photo::before{ content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background: linear-gradient(180deg,rgba(6,17,28,0) 46%,rgba(6,17,28,.82) 88%), radial-gradient(130% 90% at 30% 8%,rgba(40,120,170,.14),transparent 55%), linear-gradient(160deg,rgba(21,30,41,.22),rgba(6,17,28,.30)); } .portrait.has-photo .cap{position:relative;z-index:2;padding:18px 20px;color:var(--text-hi);text-shadow:0 1px 8px rgba(0,0,0,.6)} .portrait.has-photo .cap br+ *{color:var(--text-mid)} .founder h3{font-size:clamp(24px,2.6vw,32px);margin:14px 0 6px} .founder .role{font-family:var(--font-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--signal);margin-bottom:22px} .founder .bio p{margin-bottom:16px;max-width:66ch;line-height:1.75} .cred{display:flex;gap:10px;flex-wrap:wrap;margin:26px 0 0} .pull{font-family:var(--font-display);font-size:clamp(20px,2.2vw,27px);color:var(--text-hi);line-height:1.4;border-left:2px solid var(--signal);padding-left:24px;margin:34px 0 0;max-width:30ch} .mvx{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:64px} .mvx .svc{min-height:340px;padding:30px 28px 28px;border-color:rgba(255,255,255,.12)} .mvx .svc h4{font-family:var(--font-display);font-weight:480;font-size:20px;color:#F5F7FA;line-height:1.25;margin-bottom:10px} .mvx .svc p{font-size:14.5px;line-height:1.7;color:#C8D6E0;font-weight:420} .mvx .svc .tag{color:#E5A13D;font-weight:700;letter-spacing:.18em;font-size:10.5px} .mvx .svc .tag::before{background:#E5A13D} .mvx-svg{position:absolute;inset:0;z-index:0;width:100%;height:100%;border-radius:inherit;overflow:hidden;opacity:.85;transition:opacity .5s,transform .5s} .mvx .svc:hover .mvx-svg{opacity:1;transform:scale(1.03)} .mvx .svc:hover{border-color:rgba(229,161,61,.45);box-shadow:0 20px 50px -18px rgba(0,0,0,.9),0 0 36px -12px rgba(229,161,61,.25);transform:translateY(-4px)} .mvx-text{position:relative;z-index:2} /* Mission neural-net pulse */ @keyframes mvxPulse{0%,100%{opacity:.18}50%{opacity:.55}} @keyframes mvxDash{to{stroke-dashoffset:-60}} @keyframes mvxOrbit{from{transform:rotate(0deg)}to{transform:rotate(360deg)}} @keyframes mvxOrbitR{from{transform:rotate(0deg)}to{transform:rotate(-360deg)}} @keyframes mvxBeam{0%,100%{opacity:.12}45%{opacity:.6}} @keyframes mvxRise{from{transform:translateY(0)}to{transform:translateY(-60px);opacity:0}} @keyframes mvxSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}} @keyframes mvxFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}} /* ============================================================ INDUSTRIES */ .ind-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px} .ind{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-m);background:var(--ink-2);padding:30px;transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .35s} .ind > *{position:relative;z-index:2} .ind-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:right center;opacity:.55;filter:contrast(1.2) brightness(1.25);transition:opacity .5s ease,transform .5s ease,filter .5s ease;will-change:opacity,transform} .ind-overlay{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(8,21,34,.96) 0%,rgba(8,21,34,.80) 52%,rgba(8,21,34,.25) 100%)} .ind:hover .ind-bg{opacity:.78;transform:scale(1.03);filter:contrast(1.25) brightness(1.35)} .ind:hover{transform:translateY(-3px);border-color:var(--line-strong);box-shadow:0 18px 44px -22px rgba(0,0,0,.7)} .ind h3{font-size:23px;margin-top:12px;color:var(--text-hi)} .ind .sub{font-size:14.5px;color:var(--text-mid);font-weight:420;margin:4px 0 22px} .ind-cols{display:grid;grid-template-columns:1fr 1fr;gap:22px} .ind-cols h6{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-low);margin-bottom:10px} .ind-cols .sol h6{color:var(--signal)} .ind-cols ul{list-style:none} .ind-cols li{font-size:13.5px;padding:7px 0 7px 16px;position:relative;border-top:1px solid var(--line)} .ind-cols li::before{content:"";position:absolute;left:0;top:50%;width:7px;height:1px;background:var(--text-low)} .ind-cols .sol li::before{background:var(--signal)} .ind .proof{margin-top:20px;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase} .ind .proof a{color:var(--signal);text-decoration:none} .ind .proof a:hover{text-decoration:underline} /* ============================================================ TECHNOLOGIES */ .bands{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:70px} .band{position:relative;border:1px solid rgba(229,161,61,.28);border-radius:var(--r-m);background:linear-gradient(135deg, rgba(20,30,44,.88), rgba(10,16,26,.95));padding:24px 22px 22px;overflow:hidden;transition:transform .4s cubic-bezier(.2,.8,.2,1),border-color .4s ease,box-shadow .4s ease} .band:hover{transform:translateY(-4px);border-color:rgba(245,184,75,.6);box-shadow:0 18px 48px -12px rgba(245,184,75,.3),inset 0 1px 0 rgba(255,255,255,.25)} .band::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,#F5B84B,rgba(245,184,75,.1) var(--fill,60%));box-shadow:0 0 12px rgba(245,184,75,.8);z-index:2} .band-bg-img{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.25;mix-blend-mode:screen;filter:saturate(140%) contrast(115%);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.2,1);z-index:0;pointer-events:none} .band:hover .band-bg-img{opacity:.48;transform:scale(1.05)} .band .tag{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#FFD06E;background:rgba(229,161,61,.16);border:1px solid rgba(245,184,75,.4);padding:3px 9px;border-radius:4px;display:inline-block;margin-bottom:12px;position:relative;z-index:2;text-shadow:0 0 8px rgba(245,184,75,.5)} .band h4{font-family:var(--font-body);font-weight:700;font-size:17.5px;color:#FFFFFF;margin-bottom:8px;text-shadow:0 2px 10px rgba(0,0,0,.9),0 0 18px rgba(245,184,75,.35);letter-spacing:-.01em;position:relative;z-index:2} .band p{font-size:13.5px;line-height:1.6;color:#E0ECF8;text-shadow:0 1px 6px rgba(0,0,0,.9);font-weight:400;position:relative;z-index:2} .tech-row{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);gap:44px;padding:40px 0;border-top:1px solid var(--line)} .tech-row:first-of-type{border-top:0} .tech-row h3{font-size:clamp(21px,2.2vw,27px);margin-top:12px;max-width:16ch} .tech-row p.desc{font-size:15px;max-width:60ch;margin-bottom:18px;color:var(--text-mid)} .use{display:flex;flex-wrap:wrap;gap:10px} /* ============================================================ PRICING */ .always{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .svc{position:relative;border:1px solid rgba(229,161,61,.32);border-radius:var(--r-m);background:linear-gradient(135deg, rgba(16,24,36,.94), rgba(8,12,18,.98));padding:28px 24px 26px;overflow:hidden;box-shadow:0 12px 32px -12px rgba(0,0,0,.7);transition:transform .4s cubic-bezier(.2,.8,.2,1),border-color .4s ease,box-shadow .4s ease} .svc:hover{transform:translateY(-4px);border-color:rgba(245,184,75,.7);box-shadow:0 18px 48px -12px rgba(245,184,75,.35),inset 0 1px 0 rgba(255,255,255,.2)} /* Background image - darker and softer */ .svc-bg-img{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.2;mix-blend-mode:screen;filter:saturate(120%) contrast(110%) brightness(78%);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.2,1);z-index:0;pointer-events:none} .svc:hover .svc-bg-img{opacity:.35;transform:scale(1.04)} /* Dark gradient overlay behind text */ .svc::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(10,16,24,.62) 0%, rgba(6,10,16,.9) 100%);z-index:1;pointer-events:none} .svc .tag{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#FFD06E;background:rgba(10,16,26,.92);border:1px solid rgba(245,184,75,.5);padding:4px 10px;border-radius:4px;display:inline-block;margin-bottom:14px;position:relative;z-index:3;box-shadow:0 0 12px rgba(245,184,75,.35);text-shadow:0 0 8px rgba(245,184,75,.6)} .svc h4{font-family:var(--font-body);font-weight:700;font-size:19px;color:#FFFFFF;margin-bottom:10px;text-shadow:0 2px 8px rgba(0,0,0,.95);letter-spacing:-.01em;position:relative;z-index:3} .svc p{font-size:14px;line-height:1.65;color:#E0ECF8;text-shadow:0 1px 4px rgba(0,0,0,.95);font-weight:420;position:relative;z-index:3} .custom{ margin-top:50px;border:1px solid rgba(245,184,75,.45);border-radius:var(--r-l);padding:clamp(32px,4vw,54px); background:linear-gradient(135deg, rgba(28,40,58,.92), rgba(12,18,28,.96)); box-shadow:0 20px 60px -16px rgba(245,184,75,.25),inset 0 1px 0 rgba(255,255,255,.2); display:grid;grid-template-columns:minmax(0,1.4fr) auto;gap:30px;align-items:center; position:relative;overflow:hidden;transition:transform .4s ease,border-color .4s ease,box-shadow .4s ease; } .custom:hover{transform:translateY(-3px);border-color:rgba(245,184,75,.75);box-shadow:0 24px 64px -16px rgba(245,184,75,.35)} .custom-bg-img{position:absolute;inset:0;background-size:cover;background-position:center right;opacity:.22;mix-blend-mode:screen;filter:saturate(135%) contrast(110%);transition:opacity .5s ease,transform .5s ease;pointer-events:none;z-index:0} .custom:hover .custom-bg-img{opacity:.42;transform:scale(1.03)} .custom-content{position:relative;z-index:2} .custom h3{font-size:clamp(24px,2.8vw,34px);max-width:22ch;color:#FFFFFF;font-weight:700;text-shadow:0 2px 14px rgba(0,0,0,.9),0 0 20px rgba(245,184,75,.3);margin-top:8px} .custom p{margin-top:14px;max-width:52ch;color:#E2F1FF;font-size:15px;line-height:1.65;text-shadow:0 1px 6px rgba(0,0,0,.9)} /* ============================================================ CTA BAND + CONTACT + FOOTER */ .cta-band{border-top:1px solid var(--line);padding:90px 0;background:linear-gradient(transparent,rgba(6,17,28,.5))} .cta-band .inner{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap} .cta-band h2{font-size:clamp(28px,3.6vw,44px);max-width:20ch} .contact-inner{display:grid;grid-template-columns:1.2fr 1fr;gap:60px;align-items:start} .contact h2{font-size:clamp(34px,4.4vw,56px);max-width:14ch;margin-top:16px} .contact .lede{margin-top:18px;max-width:44ch;color:var(--text-mid)} .contact-cta{margin-top:36px;display:flex;gap:14px;flex-wrap:wrap} .contact-list{list-style:none;border-top:1px solid var(--line-strong)} .contact-list li{display:flex;justify-content:space-between;gap:20px;padding:18px 2px;border-bottom:1px solid var(--line);font-size:15px} .contact-list .k{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-mid);font-weight:500;padding-top:3px} .contact-list a{color:var(--text-hi);text-decoration:none} .contact-list a:hover{color:var(--signal)} .contact-list address{font-style:normal;color:var(--text-mid);text-align:right} footer{border-top:1px solid var(--line);padding:44px 0;background:var(--ink-0)} .foot-grid{display:grid;grid-template-columns:1.3fr .9fr .8fr 1fr;gap:36px;margin-bottom:34px} .foot-grid p{font-size:14px;color:var(--text-mid);max-width:40ch;margin-top:14px} .foot-grid h6{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:#D6E0E8;font-weight:500;margin-bottom:14px} .foot-grid ul{list-style:none} .foot-grid li{padding:5px 0} .foot-grid a{color:var(--text-mid);text-decoration:none;font-size:14px} .foot-grid a:hover{color:var(--signal)} .foot{display:flex;justify-content:space-between;gap:20px;align-items:center;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-mid);flex-wrap:wrap;border-top:1px solid var(--line);padding-top:26px} .foot a{color:var(--text-mid);text-decoration:none;display:inline-flex;align-items:center;gap:8px} .foot a:hover{color:var(--signal)} /* ============================================================ REVEAL */ [data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.7,.2,1)} [data-reveal].in-view{opacity:1;transform:none} /* ============================================================ DIAGRAM UTILITIES Shared draw-on + glow language for every inline diagram. */ .d-line{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s cubic-bezier(.3,.6,.2,1)} .in-view .d-line{stroke-dashoffset:0} .d-fade{opacity:0;transition:opacity .5s ease .65s} .in-view .d-fade{opacity:1} .dl1{transition-delay:.1s}.dl2{transition-delay:.22s}.dl3{transition-delay:.34s} .dl4{transition-delay:.46s}.dl5{transition-delay:.58s}.dl6{transition-delay:.7s} .glow-s{filter:drop-shadow(0 0 6px rgba(229,161,61,.55))} .pulse{animation:pulseOp 3.2s ease-in-out infinite} @keyframes pulseOp{0%,100%{opacity:.18}50%{opacity:.6}} /* ============================================================ OPERATING ARCHITECTURE (services) Layered stack, HTML so it reflows. Security is a plane, not a padlock: a cross-cutting column spanning every layer. */ .arch{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:14px} .layer{position:relative;border:1px solid rgba(229,161,61,.28);border-radius:var(--r-m);background:linear-gradient(135deg, rgba(20,30,44,.85), rgba(10,16,26,.92));padding:22px 24px 22px 28px;overflow:hidden;transition:transform .4s cubic-bezier(.2,.8,.2,1),border-color .4s ease,box-shadow .4s ease} .layer:hover{transform:translateY(-3px);border-color:rgba(245,184,75,.6);box-shadow:0 16px 44px -12px rgba(245,184,75,.3),inset 0 1px 0 rgba(255,255,255,.25)} /* Context-fitting background image layer */ .layer-bg-img{position:absolute;inset:0;background-size:cover;background-position:center right;opacity:.25;mix-blend-mode:screen;filter:saturate(140%) contrast(115%);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.2,1);z-index:0;pointer-events:none} .layer:hover .layer-bg-img{opacity:.48;transform:scale(1.04)} .layer h4{font-family:var(--font-body);font-weight:700;font-size:17.5px;color:#FFFFFF;margin-bottom:6px;text-shadow:0 2px 10px rgba(0,0,0,.9),0 0 18px rgba(245,184,75,.35);letter-spacing:-.01em;position:relative;z-index:2} .layer .lp{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:#FFD06E;margin-bottom:14px;background:rgba(229,161,61,.16);border:1px solid rgba(245,184,75,.4);padding:4px 11px;border-radius:4px;display:inline-block;box-shadow:0 0 12px rgba(245,184,75,.25);position:relative;z-index:2;text-shadow:0 0 8px rgba(245,184,75,.5)} .lchips{display:flex;gap:8px;flex-wrap:wrap;position:relative;z-index:2} .lchips .chip{font-size:12.5px;font-weight:600;padding:7px 14px;color:#F0F6FC;background:rgba(10,16,26,.88);border:1px solid rgba(245,184,75,.35);border-radius:20px;backdrop-filter:blur(8px);text-shadow:0 1px 4px rgba(0,0,0,.8);box-shadow:0 2px 8px rgba(0,0,0,.4)} .lchips .chip:hover{color:#FFFFFF;background:rgba(245,184,75,.28);border-color:rgba(245,184,75,.9);box-shadow:0 0 16px rgba(245,184,75,.5);transform:translateY(-2px) scale(1.03)} .layer .bar{position:absolute;left:0;top:0;bottom:0;width:3px;background:rgba(229,161,61,.2);z-index:2} .layer .bar i{position:absolute;inset:0;background:var(--signal);box-shadow:0 0 14px var(--glow);transform:translateY(-101%);transition:transform .55s cubic-bezier(.2,.7,.2,1)} .in-view .layer .bar i{transform:none} .in-view .layer:nth-child(2) .bar i{transition-delay:.15s} .in-view .layer:nth-child(3) .bar i{transition-delay:.3s} .in-view .layer:nth-child(4) .bar i{transition-delay:.45s} .in-view .layer:nth-child(5) .bar i{transition-delay:.6s} .in-view .layer:nth-child(6) .bar i{transition-delay:.75s} .arch .sec{grid-column:2;grid-row:1/span 4;border-color:rgba(245,184,75,.5);background:linear-gradient(180deg, rgba(25,35,50,.92), rgba(12,18,28,.96));box-shadow:0 0 48px -16px var(--glow);display:flex;flex-direction:column} .arch .sec .lchips{flex-direction:column;align-items:flex-start} .arch .found{grid-column:1/-1} /* per-plane themed animated art inside each layer */ .layer-art{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.75;transition:opacity 1s ease .25s;mix-blend-mode:screen} .in-view .layer-art{opacity:.9} .layer:hover .layer-art{opacity:1} .layer-art svg{width:100%;height:100%;display:block} .layer h4,.layer .lp,.layer .lchips{position:relative;z-index:2} .layer .bar{z-index:2} .arch .chip{opacity:0;transform:translateY(10px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1),border-color .3s,box-shadow .3s,background .3s} .arch.in-view .chip{opacity:1;transform:none} .arch.in-view .lchips .chip:nth-child(2){transition-delay:.09s} .arch.in-view .lchips .chip:nth-child(3){transition-delay:.18s} .arch.in-view .lchips .chip:nth-child(4){transition-delay:.27s} @keyframes archGrow{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1)}} @keyframes archBlink{0%,88%,100%{opacity:.12}44%{opacity:.95}} @keyframes archScanY{0%{transform:translateY(-60px)}100%{transform:translateY(680px)}} .arch .sec .sec-art-wide{display:none} /* ============================================================ DELIVERABLES CONNECTOR & SUPPORTING OUTCOMES */ .outcome-connector{position:relative;width:100%;height:40px;margin:10px 0 14px;pointer-events:none} .outcome-connector svg{width:100%;height:100%;display:block} .conn-base{stroke:rgba(229,161,61,.28);stroke-width:1.5;fill:none} .conn-flow{stroke:#F5B84B;stroke-width:2.2;fill:none;stroke-dasharray:8 36;animation:connFlow 3.5s linear infinite;filter:drop-shadow(0 0 6px rgba(245,184,75,.8))} .conn-flow.f2{animation-delay:1.2s} @keyframes connFlow{from{stroke-dashoffset:88}to{stroke-dashoffset:0}} .conn-node{fill:#081522;stroke:#E5A13D;stroke-width:1.8;filter:drop-shadow(0 0 6px rgba(229,161,61,.85))} .supporting-outcomes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:4px} .outcome-card{position:relative;padding:22px 20px 20px;border:1px solid rgba(229,161,61,.38);border-radius:var(--r-m);background:linear-gradient(135deg,rgba(18,28,42,.94),rgba(10,16,26,.98));box-shadow:0 12px 32px -10px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.18);transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s ease,box-shadow .35s ease;overflow:hidden} .outcome-card:hover{transform:translateY(-4px);border-color:rgba(245,184,75,.75);box-shadow:0 18px 44px -10px rgba(245,184,75,.32),inset 0 1px 0 rgba(255,255,255,.28)} .outcome-card::before{content:"";position:absolute;top:0;left:20px;right:20px;height:2px;background:linear-gradient(90deg,transparent,rgba(245,184,75,.85),transparent)} .outcome-badge{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:10.5px;font-weight:700;letter-spacing:.12em;color:#FFD06E;background:rgba(245,184,75,.12);border:1px solid rgba(245,184,75,.38);padding:4px 10px;border-radius:14px;margin-bottom:12px;text-shadow:0 0 8px rgba(245,184,75,.45)} .outcome-badge svg{color:#F5B84B} .outcome-card h4{font-family:var(--font-body);font-weight:700;font-size:16.5px;color:#FFFFFF;margin-bottom:8px;letter-spacing:-.01em;position:relative;z-index:2} .outcome-card p{font-size:13.5px;line-height:1.55;color:#D2E0EE;margin:0;position:relative;z-index:2} /* ============================================================ TIERED GLASS Glass is now the surface language, at three intensities. LOCKED - reflection and brightness values are final per design review. Do not increase further: premium comes from subtle reflection, not obvious frost. G1 (every card): smoked translucent glass - white reflection top-left, 135deg white film, translucent ink base, inset top highlight. NO backdrop-filter: over a soft gradient ambient, blur is invisible; this keeps 40+ cards at 60fps. G2 (elevated: security plane, custom panel, portrait): real 12px blur + brighter border + amber glow. G3 (hero: nav, lens, case card): the original .glass recipe, strongest blur, specular ring, grain. */ .svc,.step,.ind,.band,.layer,.scope-col,.slope-frame,.roadmap-frame,.custom,.bcard{ position:relative;overflow:hidden; border-color:var(--glass-border); background: radial-gradient(520px 220px at 0% 0%,rgba(255,255,255,.08),transparent 55%), linear-gradient(135deg,rgba(255,255,255,.062),rgba(255,255,255,.017) 55%), rgba(28,36,46,.58); box-shadow:0 20px 60px -18px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.11); } .case-cell{background-image:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0) 30%)} .ind,.band{transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .35s} .ind:hover,.band:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.16)} /* cursor spotlight inside cards - extends the --gx/--gy system */ .svc::after,.step::after,.ind::after,.layer::after,.scope-col::after,.bcard::after{ content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s ease; background:radial-gradient(300px 200px at var(--gx,50%) var(--gy,40%),rgba(255,255,255,.075),rgba(229,161,61,.04) 40%,transparent 70%); mix-blend-mode:screen; } .svc:hover::after,.step:hover::after,.ind:hover::after,.layer:hover::after,.scope-col:hover::after,.bcard:hover::after{opacity:1} .principles .svc{overflow:visible;background:transparent;box-shadow:none;border-color:transparent;border-top:1px solid var(--line-strong)} .principles .svc::after{display:none} /* G2 elevated */ .arch .sec,.custom,.portrait{ box-shadow:0 24px 70px -20px rgba(0,0,0,.5),0 0 44px -14px var(--glow),inset 0 1px 0 var(--glass-hl); } .custom,.portrait{border-color:rgba(255,255,255,.15)} .custom{background: radial-gradient(600px 300px at 12% 0%,rgba(229,161,61,.14),transparent 62%), linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.02)), rgba(19,27,37,.55);} @supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){ .arch .sec,.custom,.portrait{-webkit-backdrop-filter:blur(12px) saturate(150%);backdrop-filter:blur(12px) saturate(150%)} } .portrait{position:relative;overflow:hidden;border-color:rgba(255,255,255,.15)} .portrait::after{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.08) 46%,rgba(229,161,61,.06) 53%,transparent 66%); transform:translateX(-130%);animation:portSweep 8.5s ease-in-out infinite; } @keyframes portSweep{0%{transform:translateX(-130%)}38%{transform:translateX(130%)}100%{transform:translateX(130%)}} /* ============================================================ FLOW - moving light along any SVG path */ .flow{fill:none;stroke:var(--signal);stroke-width:2;stroke-linecap:round;stroke-dasharray:10 150; filter:drop-shadow(0 0 4px rgba(229,161,61,.5));animation:dashFlow 3.4s linear infinite} .flow.slow{animation-duration:5.6s} .flow.f2{animation-delay:-1.2s} .flow.f3{animation-delay:-2.3s} @keyframes dashFlow{to{stroke-dashoffset:-160}} /* ============================================================ CURSOR GLOW - page-level light following the pointer */ .cursor-glow{ position:fixed;left:0;top:0;width:440px;height:440px;border-radius:50%;pointer-events:none; z-index:5;mix-blend-mode:screen;opacity:0;transition:opacity .5s ease;will-change:transform; background:radial-gradient(circle,rgba(255,255,255,.04),rgba(229,161,61,.032) 32%,transparent 70%); transform:translate(-999px,-999px); } /* ============================================================ HERO VIZ - executive operating system */ .hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:42px;align-items:center;width:100%} .hero h1{font-size:clamp(46px,6vw,82px);letter-spacing:-.016em} .hv-float{perspective:1100px;animation:vizFloat 11s ease-in-out infinite alternate} .hero-viz svg{ width:100%;height:auto;display:block;will-change:transform; transform:rotateX(calc(var(--ty,0)*-4deg)) rotateY(calc(var(--tx,0)*5deg)); transition:transform .3s ease-out; } @keyframes vizFloat{to{transform:translateY(-10px)}} .hv-back,.hv-mid,.hv-front{transition:transform .35s ease-out} .hv-back{transform:translate(calc(var(--tx,0)*3px),calc(var(--ty,0)*3px))} .hv-mid{transform:translate(calc(var(--tx,0)*6px),calc(var(--ty,0)*6px))} .hv-front{transform:translate(calc(var(--tx,0)*9px),calc(var(--ty,0)*9px))} .hv-bezel,.hv-arc{transform-box:fill-box;transform-origin:center} .hv-bezel{animation:spinSlow 96s linear infinite} .hv-arc{animation:spinSlow 46s linear infinite reverse} @keyframes spinSlow{to{transform:rotate(1turn)}} .hero-viz .panel{fill:rgba(255,255,255,.05);stroke:rgba(255,255,255,.13)} .hero-viz text{font-family:var(--font-mono);letter-spacing:1.5px} .hv-dot{animation:pulseOp 3s ease-in-out infinite} /* ---- hero console: living system pass ---- */ .hv-tech{transform-box:fill-box;transform-origin:center;animation:spinSlow 140s linear infinite reverse} .run{animation:runLoop 8s linear infinite;filter:drop-shadow(0 0 4px rgba(245,184,75,.55))} .run-b{animation-duration:14s;animation-delay:-5s} .run-c{animation:runAccel 21s cubic-bezier(.4,.1,.6,.9) infinite;filter:drop-shadow(0 0 3px rgba(240,246,255,.4))} .run-d{animation-duration:17s;animation-direction:reverse;animation-delay:-9s} @keyframes runLoop{to{stroke-dashoffset:-100}} @keyframes runAccel{0%{stroke-dashoffset:0}40%{stroke-dashoffset:-26}55%{stroke-dashoffset:-68}100%{stroke-dashoffset:-100}} .drift{animation:driftF 11s ease-in-out infinite alternate} @keyframes driftF{0%{transform:translate(0,0);opacity:.25}50%{opacity:.8}100%{transform:translate(5px,-8px);opacity:.35}} .bl{transition:stroke .4s ease} .seq{fill:none;stroke:#F5B84B;stroke-width:2;stroke-linecap:round;stroke-dasharray:.16 .84;stroke-dashoffset:1.16; filter:drop-shadow(0 0 4px rgba(245,184,75,.6))} .seq-s{animation:seqS 10s linear infinite} .seq-t{animation:seqT 10s linear infinite} .seq-g{animation:seqG 10s linear infinite} .seq-o{animation:seqO 10s linear infinite} @keyframes seqS{0%,3%{stroke-dashoffset:1.16}15%,100%{stroke-dashoffset:-.16}} @keyframes seqT{0%,28%{stroke-dashoffset:1.16}40%,100%{stroke-dashoffset:-.16}} @keyframes seqG{0%,53%{stroke-dashoffset:1.16}65%,100%{stroke-dashoffset:-.16}} @keyframes seqO{0%,78%{stroke-dashoffset:1.16}90%,100%{stroke-dashoffset:-.16}} .n-halo{opacity:0} .n-strategy .n-halo{animation:haloS 10s ease-in-out infinite} .n-tech .n-halo{animation:haloT 10s ease-in-out infinite} .n-growth .n-halo{animation:haloG 10s ease-in-out infinite} .n-out .n-halo{animation:haloO 10s ease-in-out infinite} @keyframes haloS{0%{opacity:.9}10%{opacity:.9}18%,100%{opacity:0}} @keyframes haloT{0%,36%{opacity:0}42%{opacity:.9}52%,100%{opacity:0}} @keyframes haloG{0%,61%{opacity:0}67%{opacity:.9}77%,100%{opacity:0}} @keyframes haloO{0%,86%{opacity:0}92%{opacity:.9}99%,100%{opacity:0}} .core-flare{opacity:0;animation:flare 10s ease-in-out infinite} @keyframes flare{0%,89%{opacity:0}94%{opacity:1}100%{opacity:0}} .core-glint,.core-ring{transform-box:fill-box;transform-origin:center} .core-glint{animation:spinSlow 70s linear infinite} .core-ring{animation:spinSlow 34s linear infinite reverse} .node{transition:opacity .4s ease} .node .panel{transform-box:fill-box;transform-origin:center;transition:transform .35s cubic-bezier(.2,.8,.2,1),stroke .35s} .node:hover .panel{transform:scale(1.045);stroke:rgba(245,184,75,.7)} .node:hover .n-halo{animation:none;opacity:.7;transition:opacity .3s} svg[data-hot] .node{opacity:.5} svg[data-hot] .node.hot{opacity:1} svg[data-hot] .hv-bezel,svg[data-hot] .hv-arc,svg[data-hot] .hv-tech{animation-play-state:paused} svg[data-hot="strategy"] .l-strategy,svg[data-hot="tech"] .l-tech, svg[data-hot="growth"] .l-growth,svg[data-hot="out"] .l-out{stroke:rgba(245,184,75,.65)} .hero h1 em{ background:linear-gradient(105deg,var(--signal) 32%,#FFE1A6 50%,var(--signal) 68%); background-size:260% 100%;background-position:120% 0; -webkit-background-clip:text;background-clip:text;color:transparent; animation:emShine 7.5s ease-in-out infinite; } @keyframes emShine{0%,72%{background-position:120% 0}92%,100%{background-position:-40% 0}} .hero .tag::before{animation:tagGlow 4.5s ease-in-out infinite} @keyframes tagGlow{0%,100%{box-shadow:0 0 8px rgba(229,161,61,.35)}50%{box-shadow:0 0 16px rgba(229,161,61,.7)}} .hero-copy{transform:translate(calc(var(--tx,0)*-2.5px),calc(var(--ty,0)*-2px));transition:transform .45s ease-out;will-change:transform} /* ============================================================ PAGE MICRO-SYSTEMS */ .journey{display:block;width:100%;height:14px;margin-bottom:18px} .lifecycle{position:relative;padding:clamp(24px,3.5vw,36px);border:1px solid rgba(229,161,61,.38);border-radius:var(--r-l);background:linear-gradient(135deg,rgba(22,34,50,.92),rgba(10,16,26,.96));box-shadow:0 24px 64px -16px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.25)} .journey .base{stroke:rgba(245,184,75,.35);stroke-width:1.2;fill:none} .journey .flow{stroke:#F5B84B;stroke-width:2.2;stroke-dasharray:6 30;animation-duration:4s;filter:drop-shadow(0 0 8px rgba(245,184,75,.85))} .motif{margin:2px 0 20px} .motif svg{width:280px;max-width:100%;height:auto;display:block} .motif text{font-family:var(--font-mono);letter-spacing:.8px} .mvx .svc::before{ content:attr(data-glyph);position:absolute;right:6px;top:-16px;pointer-events:none; font-family:var(--font-display);font-size:112px;font-weight:480;line-height:1;color:rgba(255,255,255,.05); } .values{list-style:none} .values li{padding:14px 0;border-top:1px solid var(--line);font-size:14.5px;color:var(--text-low)} .values strong{display:block;color:var(--text-hi);font-weight:600;font-size:15.5px;margin-bottom:2px} [data-page="services"] section{counter-reset:svcrow} [data-page="services"] .svc-row{counter-increment:svcrow} .svc-row .tag::after{content:"/ 0" counter(svcrow);font-family:var(--font-mono);font-size:11.5px;letter-spacing:.18em;color:var(--text-low)} .svc-row,.tech-row{position:relative} .svc-row::after,.tech-row::after{ content:"";position:absolute;left:0;top:20%;bottom:20%;width:2px;background:var(--signal); box-shadow:0 0 12px var(--glow);opacity:0;transition:opacity .35s ease; } .svc-row:hover::after,.tech-row:hover::after{opacity:1} .arch .sec::before{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,transparent 0%,rgba(229,161,61,.20) 50%,transparent 100%); transform:translateY(-101%); } .in-view .arch .sec::before{animation:secWipe 1.15s ease .95s both} @keyframes secWipe{to{transform:translateY(101%)}} .scope-spine .node{position:relative} .scope-spine .node::after{ content:"";position:absolute;inset:-2px;border-radius:50%;border:1px solid rgba(229,161,61,.5); animation:ringPulse 4s ease-out infinite; } @keyframes ringPulse{0%{transform:scale(.9);opacity:.6}70%,100%{transform:scale(1.62);opacity:0}} .scope-spine .stem{transition:background .45s,box-shadow .45s} .lens-fire .stem{background:var(--signal);box-shadow:0 0 10px var(--glow)} /* Mandate console: the lens drives a live instrument, not a dim/undim */ .mode-tag{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.24em;color:var(--signal);margin-bottom:10px} .scope{position:relative} .scope-col,.scope-spine{position:relative;z-index:1} .scope-col h4{display:flex;align-items:center;justify-content:space-between;gap:10px} .stat{font-size:10px;letter-spacing:.18em;color:var(--text-low);display:inline-flex;align-items:center;gap:6px;font-weight:400} .stat::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--text-low);flex:none} .stat::after{content:"STANDBY"} [data-lens="cto"] .scope-cto .stat::after,[data-lens="cgo"] .scope-cgo .stat::after{content:"ACTIVE";color:var(--signal)} [data-lens="cto"] .scope-cto .stat::before,[data-lens="cgo"] .scope-cgo .stat::before{background:var(--signal);box-shadow:0 0 8px var(--glow);animation:pulseOp 2.6s ease-in-out infinite} .scope-spine .node::before{content:"";position:absolute;inset:-9px;border-radius:50%;border:1px dashed rgba(229,161,61,.45);animation:spinSlow 42s linear infinite} .lens-fire .node{animation:nodePop .55s cubic-bezier(.34,1.4,.5,1)} @keyframes nodePop{0%{transform:scale(1)}45%{transform:scale(1.14)}100%{transform:scale(1)}} @keyframes itemIn{from{opacity:0;transform:translateX(-9px)}to{opacity:1;transform:none}} [data-lens="cto"] .scope.in-view .scope-cto li,[data-lens="cgo"] .scope.in-view .scope-cgo li{animation:itemIn .45s cubic-bezier(.2,.7,.2,1) both} .scope.in-view .scope-col li:nth-child(1){animation-delay:.05s} .scope.in-view .scope-col li:nth-child(2){animation-delay:.11s} .scope.in-view .scope-col li:nth-child(3){animation-delay:.17s} .scope.in-view .scope-col li:nth-child(4){animation-delay:.23s} .scope.in-view .scope-col li:nth-child(5){animation-delay:.29s} /* ============================================================ EXECUTIVE COMMAND CENTER */ .advisory-grid{display:grid;grid-template-columns:minmax(0,0.85fr) minmax(0,1.25fr);gap:20px;align-items:center;margin-bottom:32px} .advisory-grid .lens-copy{margin-bottom:0} .command{position:relative;width:100%;max-width:610px;aspect-ratio:1;margin:-38px auto 0} .cmd-atmo{position:absolute;inset:-6%;border-radius:50%;background:radial-gradient(circle at 50% 52%,rgba(229,161,61,.16),rgba(229,161,61,.05) 42%,transparent 70%);animation:pulseOp 5.5s ease-in-out infinite} .cmd-stage{position:absolute;inset:0;width:100%;height:100%} .king-glow{animation:kingBreath 5s ease-in-out infinite} @keyframes kingBreath{0%,100%{opacity:.75}50%{opacity:1}} .gr-run{animation:grRun 9s linear infinite;opacity:.55} @keyframes grRun{to{stroke-dashoffset:-100}} .ln{opacity:0;transition:opacity .45s ease;stroke-dasharray:3 6} .ln.lit{opacity:.55} .ln.amb{opacity:.4;animation:lnRun 1.5s linear} @keyframes lnRun{to{stroke-dashoffset:-72}} .sat{position:absolute;left:0;top:0;will-change:transform;transition:filter .5s} .command .chip{ display:flex;flex-direction:column;align-items:center;gap:4px;transform:translate(-50%,-50%); width:46px;height:46px;justify-content:center;border-radius:50%;color:#F5F7FA; background:linear-gradient(150deg,rgba(255,255,255,.09),rgba(255,255,255,.02)),rgba(16,23,31,.72); border:1px solid rgba(255,255,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 8px 22px -10px rgba(0,0,0,.7); transition:border-color .4s,box-shadow .4s,color .4s; } .command .chip i{position:absolute;top:100%;margin-top:5px;font-style:normal;font-family:var(--font-mono);font-size:8px;letter-spacing:.16em;color:#CBD6E2;font-weight:600;white-space:nowrap;transition:color .4s} .sat.dim{filter:grayscale(.4)} .sat.lit .chip{border-color:rgba(245,184,75,.75);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 22px -4px var(--glow);color:var(--signal-hi)} .sat.lit .chip i{color:var(--signal)} .part{position:absolute;left:0;top:0;width:4px;height:4px;border-radius:50%;background:var(--signal-hi);box-shadow:0 0 10px var(--glow);will-change:transform} .tw{position:absolute;width:3px;height:3px;border-radius:50%;background:rgba(245,184,75,.7);animation:pulseOp 3.4s ease-in-out infinite} .command .chip{opacity:0;transform:translate(-50%,-50%) scale(.5)} .command.in-view .chip{animation:chipIn .55s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(1s + var(--i)*.11s)} @keyframes chipIn{to{opacity:1;transform:translate(-50%,-50%) scale(1)}} .command .king{transition:opacity .6s ease .55s} /* rows */ .scope-col li{display:flex;align-items:center;gap:12px;padding:11px 8px 11px 6px;border-radius:8px;transition:background .3s} .scope-col li::before{display:none} .scope-col li:hover{background:rgba(255,255,255,.035)} .scope-cto{background: radial-gradient(500px 240px at 0% 0%,rgba(229,161,61,.10),transparent 60%), radial-gradient(520px 220px at 0% 0%,rgba(255,255,255,.08),transparent 55%), linear-gradient(135deg,rgba(255,255,255,.062),rgba(255,255,255,.017) 55%), rgba(25,31,39,.60)} .scope-cgo{background: radial-gradient(500px 240px at 100% 0%,rgba(118,172,206,.08),transparent 60%), radial-gradient(520px 220px at 0% 0%,rgba(255,255,255,.08),transparent 55%), linear-gradient(135deg,rgba(255,255,255,.062),rgba(255,255,255,.017) 55%), rgba(25,33,42,.60)} .ric{flex:none;display:inline-flex;color:var(--text-low);transition:color .3s} .scope-col li:hover .ric{color:var(--signal)} .arr{margin-left:auto;flex:none;color:var(--text-low);opacity:.7;transition:transform .3s,color .3s} .scope-col li:hover .arr{transform:translateX(4px);color:var(--signal)} /* cards: real glass + reflection + hover */ .scope-col{transition:opacity .45s ease,transform .45s cubic-bezier(.2,.8,.2,1),border-color .45s,box-shadow .45s} .scope-col:hover{transform:translateY(-3px)} @supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){ .scope-col{-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%)} } .scope-col::before{ content:"";position:absolute;top:-12%;bottom:-12%;left:0;width:44%;pointer-events:none; background:linear-gradient(105deg,transparent,rgba(255,255,255,.06) 46%,rgba(229,161,61,.045) 53%,transparent); transform:translateX(-165%) skewX(-14deg);animation:cardSheen 11s ease-in-out infinite; } [data-lens="cto"] .scope-cgo::before,[data-lens="cgo"] .scope-cto::before{animation:none;opacity:0} @keyframes cardSheen{0%,58%{transform:translateX(-165%) skewX(-14deg)}92%,100%{transform:translateX(400%) skewX(-14deg)}} /* energy spine */ .spine-line{position:absolute;left:50%;top:6px;bottom:6px;width:2px;transform:translateX(-50%); background:linear-gradient(rgba(229,161,61,.06),rgba(229,161,61,.42),rgba(229,161,61,.06))} .spine-line::after{content:"";position:absolute;left:-1.5px;width:5px;height:36px;border-radius:5px; background:linear-gradient(transparent,var(--signal-hi),transparent);box-shadow:0 0 12px var(--glow); animation:spinePulse 5.4s ease-in-out infinite} @keyframes spinePulse{0%{top:-12%;opacity:0}9%{opacity:1}46%{top:96%;opacity:.9}55%,100%{top:106%;opacity:0}} /* ============================================================ LIVELINESS PASS Three additions only: a signal runner on the CTA bands, the bench-vs-operator figure on Home principles, and role motifs on the two fractional rows. Everything else stays quiet. */ .cta-band{position:relative;overflow:hidden} .cta-band::before{ content:"";position:absolute;top:-1px;left:0;height:2px;width:28%; background:linear-gradient(90deg,transparent,var(--signal) 45%,var(--signal-hi) 50%,var(--signal) 55%,transparent); box-shadow:0 0 12px var(--glow); transform:translateX(-110%);animation:ctaRun 6.5s cubic-bezier(.4,.1,.6,.9) infinite; } @keyframes ctaRun{0%{transform:translateX(-110%)}55%{transform:translateX(460%)}100%{transform:translateX(460%)}} .pline{width:min(330px,100%)} .pline svg{width:100%;height:auto;display:block} .pline text{font-family:var(--font-mono)} /* ============================================================ INSIGHTS (blog) */ .blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .bcard{position:relative;display:flex;flex-direction:column;padding:28px 24px 26px;border:1px solid rgba(229,161,61,.28);border-radius:var(--r-m);background:linear-gradient(135deg, rgba(20,30,44,.88), rgba(10,16,26,.95));text-decoration:none;color:inherit;overflow:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .35s} .bcard:hover{transform:translateY(-4px);border-color:rgba(245,184,75,.6);box-shadow:0 18px 48px -12px rgba(245,184,75,.3),inset 0 1px 0 rgba(255,255,255,.25)} .bcard-bg-img{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.18;mix-blend-mode:screen;filter:saturate(135%) contrast(110%);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.2,1);z-index:0;pointer-events:none} .bcard:hover .bcard-bg-img{opacity:.38;transform:scale(1.04)} .bcard .tag{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#FFD06E;background:rgba(229,161,61,.16);border:1px solid rgba(245,184,75,.4);padding:4px 10px;border-radius:4px;display:inline-block;margin-bottom:12px;position:relative;z-index:2;text-shadow:0 0 8px rgba(245,184,75,.5);width:fit-content} .bcard h3{font-family:var(--font-body);font-weight:700;font-size:20px;line-height:1.32;color:#FFFFFF;margin:6px 0 12px;text-shadow:0 2px 10px rgba(0,0,0,.95),0 0 16px rgba(245,184,75,.25);letter-spacing:-.01em;position:relative;z-index:2} .bcard>p,.bcard.feat>div>p{font-size:14.5px;line-height:1.65;color:#D8E6F5;text-shadow:0 1px 6px rgba(0,0,0,.95);font-weight:400;flex:1;position:relative;z-index:2} .bmeta{display:flex;gap:16px;flex-wrap:wrap;font-family:var(--font-mono);font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#C8D8E8;margin-top:20px;padding-top:14px;border-top:1px solid rgba(245,184,75,.25);position:relative;z-index:2;text-shadow:0 1px 4px rgba(0,0,0,.9)} .bcard.feat{grid-column:1/-1;display:grid;grid-template-columns:1.35fr .65fr;gap:38px;align-items:center;padding:clamp(30px,3.5vw,48px);border-color:rgba(245,184,75,.4);box-shadow:0 20px 60px -16px rgba(245,184,75,.2)} .bcard.feat h3{font-size:clamp(24px,2.8vw,34px);margin:8px 0 14px} .feat-rail{border-left:1px solid rgba(245,184,75,.3);padding-left:32px;display:flex;flex-direction:column;gap:14px;font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#C8D8E8;position:relative;z-index:2} .feat-rail b{color:#FFD06E;font-weight:700;text-shadow:0 0 8px rgba(245,184,75,.5)} .post{display:none;max-width:780px;margin:0 auto} .post.open{display:block;animation:pageIn .5s cubic-bezier(.2,.7,.2,1)} .post h2{font-size:clamp(30px,4vw,46px);margin:18px 0 16px;max-width:22ch} .post .pmeta{display:flex;gap:16px;flex-wrap:wrap;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-low);margin-bottom:36px;padding-bottom:22px;border-bottom:1px solid var(--line)} .post .pmeta b{color:var(--signal);font-weight:500} .post p{margin-bottom:18px;max-width:70ch} .post h3{font-size:22px;margin:36px 0 12px} .post .pull{margin:30px 0} .backlink{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--signal);text-decoration:none;margin-bottom:28px} .backlink:hover{text-decoration:underline} .afig{margin:34px 0;padding:24px 18px 16px} .afig svg{width:100%;height:auto;display:block} .afig figcaption{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-low);margin-top:14px} .afig text{font-family:var(--font-mono)} /* ============================================================ RESPONSIVE */ @media (max-width:1200px){ .nav-links{gap:15px} .nav-links a{font-size:13px} } @media (max-width:1180px){ .brand-name small{display:none} .brand-logo{height:52px} .nav-links{gap:13px} .nav-links a{font-size:12.5px} .nav-inner .btn{padding:10px 15px;font-size:11px} } @media (max-width:1040px){ .nav-links{display:none} .menu-btn{display:inline-block} } @media (max-width:960px){ .svc-grid,.principles .svc-grid{grid-template-columns:1fr 1fr} .posture{grid-template-columns:1fr;gap:34px} .contact-inner{grid-template-columns:1fr;gap:40px} .scope{grid-template-columns:1fr;gap:14px} .scope-spine{flex-direction:row;padding:2px 0} .scope-spine .stem{height:1px;width:auto;flex:1} .svc-row,.tech-row{grid-template-columns:1fr;gap:18px} .seq,.bands{grid-template-columns:1fr 1fr} .founder{grid-template-columns:1fr;gap:34px} .portrait{max-width:300px} .ind-grid{grid-template-columns:1fr} .mvx,.always{grid-template-columns:1fr} .custom{grid-template-columns:1fr} .foot-grid{grid-template-columns:1fr;gap:28px} .hero .wrap{grid-template-columns:1fr;gap:30px} .hero-viz{max-width:430px;margin:6px auto 0;width:100%} .arch{grid-template-columns:1fr} .arch .sec{grid-column:1;grid-row:auto} .arch .sec .sec-art-tall{display:none} .arch .sec .sec-art-wide{display:block} .blog-grid{grid-template-columns:1fr 1fr} .advisory-grid{grid-template-columns:1fr;gap:26px} .command{margin:6px auto 0;max-width:420px} .spine-line{left:6px;right:6px;top:50%;bottom:auto;height:2px;width:auto;transform:translateY(-50%);background:linear-gradient(90deg,rgba(229,161,61,.06),rgba(229,161,61,.42),rgba(229,161,61,.06))} .spine-line::after{width:36px;height:5px;left:auto;top:-1.5px;background:linear-gradient(90deg,transparent,var(--signal-hi),transparent);animation:spinePulseX 5.4s ease-in-out infinite} .bcard.feat{grid-template-columns:1fr;gap:20px} .feat-rail{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:16px;flex-direction:row;flex-wrap:wrap;gap:16px} .deliv{grid-template-columns:1fr 1fr} } @media (max-width:640px){ body{font-size:15.5px} .svc-grid,.principles .svc-grid,.seq,.bands{grid-template-columns:1fr} .horizon{grid-template-columns:1fr;gap:14px;padding:22px 0} .h-spine{display:none} .case-grid,.ind-cols{grid-template-columns:1fr} .hero{padding-top:130px} .page-hero{padding-top:150px} .hero-rail{display:none} .contact-list li{flex-direction:column;gap:6px} .contact-list address{text-align:left} .nav .btn{padding:10px 13px;font-size:10.5px;letter-spacing:.1em} .hero{min-height:auto;padding-bottom:70px} .hero-viz{max-width:310px} .hero-viz svg text[font-size="8.5"],.hero-viz svg g[font-size="8.5"]{display:none} .run,.drift,.hv-guides{display:none} .nav-inner{gap:14px} .blog-grid{grid-template-columns:1fr} .command{max-width:330px} .command .chip i{display:none} .command .sat[data-ring="1"]{display:none} .deliv{grid-template-columns:1fr;margin-top:6px} .dcell{padding-top:0} .dcell.empty{display:none} .dcell::before,.dcell::after{display:none} } /* Performance trim: touch devices and small screens drop the two sweeping movers and two bokeh lights. The system stays; the compositing bill on low-power hardware does not. */ @media (hover:none) and (pointer:coarse),(max-width:768px){ .beam,.scan{display:none} .bokeh span:nth-child(n+5){display:none} } @media (max-width:400px){ .brand-name{display:none} .brand-logo{height:42px} } @keyframes spinePulseX{0%{left:-12%;opacity:0}9%{opacity:1}46%{left:92%;opacity:.9}55%,100%{left:104%;opacity:0}} /* ============================================================ REDUCED MOTION - remove, don't shorten */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important;transition:none!important} .rise,[data-reveal]{opacity:1!important;transform:none!important} .slope-line{stroke-dashoffset:0!important} .slope-dot{opacity:1!important} .h-spine i,.step .bar i{transform:none!important} .plume,.sweep,.halo,.aurora,.bokeh span,.grid-plane{animation:none!important} .beam,.scan,.cursor-glow{display:none} .cta-band::before{display:none} .flow{animation:none!important;stroke-dasharray:none;opacity:.35} .portrait::after,.scope-spine .node::after{display:none} .arch .sec::before{display:none} .hero-viz svg{animation:none!important} .seq,.run,.drift,.core-flare{display:none} .n-halo{opacity:0!important} .roadmap .chip{opacity:1!important;transform:none!important} .rail-run{display:none} .hero h1 em{background:none;color:var(--signal);animation:none!important} .command .chip{opacity:1!important;transform:translate(-50%,-50%)!important} .spine-line::after,.command .part,.command .tw,.ln{display:none} .gr-run,.king-glow,.cmd-atmo,.scope-col::before{animation:none!important} .d-line{stroke-dashoffset:0!important} .d-fade{opacity:1!important} .layer .bar i{transform:none!important} .arch .chip{opacity:1!important;transform:none!important} .layer-art{opacity:1!important} .pulse{animation:none!important;opacity:.35!important} .sweep{display:none} }