/* src/styles/vainusa8.css */ :root{ color-scheme:light; --coral:#E8481F; --coral-2:#C93A15; --amber:#F2A63A; --sky:#3E7CB1; --sky-deep:#2C5F8C; --green:#1E9E6C; --paper:#FBF5EC; --paper-2:#F4EBDD; --surface:#FFFFFF; --ink:#132433; --heading:#0C1D2B; --muted:#5F6C79; --faint:#98A2AC; --line:#EAE0D1; --hair:#F0E8DA; --line-strong:#D9CDB9; --dark:#0B1A27; --dark-2:#0E2233; --on-dark:#F5EFE4; --on-dark-mut:rgba(245,239,228,.64); --on-dark-line:rgba(245,239,228,.12); --header-bg:rgba(251,245,236,.8); --input-bg:#FFFFFF; --warmtint:#FCEFE4; --cooltint:#E9F0F6; --art:#0C1D2B; --display:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --body:'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif; --wrap:1180px; --ease:cubic-bezier(.22,1,.36,1); --r:20px; --r-sm:13px; --r-pill:999px; --sh-sm:0 2px 12px rgba(11,26,39,.06); --sh:0 14px 44px rgba(11,26,39,.10); --sh-lg:0 34px 80px rgba(11,26,39,.16); } :root[data-theme="dark"], :root:not([data-theme="light"]) [data-dark-probe]{} :root[data-theme="dark"]{ color-scheme:dark; --coral:#F3592E; --coral-2:#FF7150; --amber:#F6B455; --sky:#6FA6D6; --green:#33B683; --paper:#091622; --paper-2:#0C1E2C; --surface:#11242F; --ink:#E6EDF2; --heading:#F3F8FB; --muted:#93A2AF; --faint:#66757F; --line:rgba(255,255,255,.08); --hair:rgba(255,255,255,.055); --line-strong:rgba(255,255,255,.16); --dark:#050E17; --dark-2:#0A1B27; --on-dark:#F3F8FB; --on-dark-mut:rgba(243,248,251,.64); --on-dark-line:rgba(255,255,255,.1); --header-bg:rgba(9,22,34,.74); --input-bg:#0C1E2B; --warmtint:#211514; --cooltint:#122636; --art:#EAF3FB; --sh-sm:0 2px 12px rgba(0,0,0,.4); --sh:0 14px 44px rgba(0,0,0,.5); --sh-lg:0 34px 80px rgba(0,0,0,.6); } @media (prefers-color-scheme: dark){:root:not([data-theme="light"]){ color-scheme:dark; --coral:#F3592E; --coral-2:#FF7150; --amber:#F6B455; --sky:#6FA6D6; --green:#33B683; --paper:#091622; --paper-2:#0C1E2C; --surface:#11242F; --ink:#E6EDF2; --heading:#F3F8FB; --muted:#93A2AF; --faint:#66757F; --line:rgba(255,255,255,.08); --hair:rgba(255,255,255,.055); --line-strong:rgba(255,255,255,.16); --dark:#050E17; --dark-2:#0A1B27; --on-dark:#F3F8FB; --on-dark-mut:rgba(243,248,251,.64); --on-dark-line:rgba(255,255,255,.1); --header-bg:rgba(9,22,34,.74); --input-bg:#0C1E2B; --warmtint:#211514; --cooltint:#122636; --art:#EAF3FB; --sh-sm:0 2px 12px rgba(0,0,0,.4); --sh:0 14px 44px rgba(0,0,0,.5); --sh-lg:0 34px 80px rgba(0,0,0,.6); }} *{box-sizing:border-box; margin:0; padding:0;} html{scroll-behavior:smooth;} body{font-family:var(--body); background:var(--paper); color:var(--ink); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;} a{color:inherit; text-decoration:none;} img{max-width:100%; display:block;} ul{list-style:none;} h1,h2,h3,h4{font-family:var(--display); line-height:1.05; letter-spacing:-.025em; font-weight:700; color:var(--heading); text-wrap:balance;} .j-head p, .faq .head p, .catch .lead, .ap-p{text-wrap:balance;} .wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 28px;} @media(max-width:640px){.wrap{padding:0 20px;}} .kick{display:inline-flex; align-items:center; gap:9px; font-weight:600; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--coral);} .kick .no{font-family:var(--display); font-size:.9rem; color:var(--coral);} .btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; font-weight:600; font-size:1rem; padding:11px 28px; border-radius:12px; border:1.6px solid transparent; cursor:pointer; transition:transform .17s var(--ease), box-shadow .2s, background .2s, border-color .2s, color .2s;} .btn .arw{transition:transform .17s var(--ease);} .btn:hover .arw{transform:translateX(4px);} .btn-primary{position:relative; background:var(--coral); color:#fff; box-shadow:0 12px 28px rgba(232,72,31,.3); animation:btnpulse 3.6s ease-in-out infinite;} .btn-primary:hover{background:var(--coral-2); transform:translateY(-2px) scale(1.03); box-shadow:0 16px 36px rgba(232,72,31,.42); animation-play-state:paused;} @keyframes btnpulse{0%,100%{transform:scale(1);} 50%{transform:scale(1.02);}} /* idle light sweep to draw the eye; fades out on hover so it does not fight the cursor */ .btn-primary::after{content:""; position:absolute; inset:0; z-index:0; border-radius:inherit; pointer-events:none; background:linear-gradient(100deg, transparent 40%, rgba(255,255,255,.38) 50%, transparent 60%); background-size:250% 100%; background-repeat:no-repeat; background-position:170% 0; animation:btnsheen 3.6s ease-in-out infinite; transition:opacity .25s var(--ease);} @keyframes btnsheen{0%{background-position:170% 0;} 55%,100%{background-position:-70% 0;}} .btn-primary:hover::after{opacity:0;} @media(prefers-reduced-motion:reduce){.btn-primary{animation:none;} .btn-primary::after{display:none;} .btn-primary:hover{transform:translateY(-2px);}} .btn-quiet{background:transparent; color:var(--heading); border-color:var(--line-strong);} .btn-quiet:hover{border-color:var(--heading); transform:translateY(-2px);} .btn-quiet.on-dark{color:var(--on-dark); border-color:var(--on-dark-line);} .btn-quiet.on-dark:hover{border-color:var(--on-dark);} a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--amber); outline-offset:3px; border-radius:8px;} /* ===== Huly-inspired creative layer (lightweight, no images) ===== */ @property --gedge{syntax:""; inherits:false; initial-value:0deg;} @property --gang{syntax:""; inherits:true; initial-value:0deg;} @keyframes gangspin{to{--gang:360deg;}} :root{--gridline:rgba(12,29,43,.045); --dot:rgba(12,29,43,.12); --blueprint:#0C1D2B;} :root[data-theme="dark"], :root:not([data-theme="light"]){--gridline:rgba(255,255,255,.035); --dot:rgba(255,255,255,.13); --blueprint:#EAF3FB;} @media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--gridline:rgba(255,255,255,.035); --dot:rgba(255,255,255,.13); --blueprint:#EAF3FB;}} /* hero background dot field removed */ .hero .hgrid{display:none;} /* cursor-reveal blueprint layer */ .reveal-layer{position:absolute; inset:0; z-index:0; pointer-events:none; color:var(--blueprint); opacity:.64; -webkit-mask-image:radial-gradient(560px circle at var(--mx,-600px) var(--my,-600px), #000 0%, rgba(0,0,0,.58) 45%, rgba(0,0,0,.38) 100%); mask-image:radial-gradient(560px circle at var(--mx,-600px) var(--my,-600px), #000 0%, rgba(0,0,0,.58) 45%, rgba(0,0,0,.38) 100%);} .reveal-layer svg{width:100%; height:100%; display:block;} .reveal-layer .bp{opacity:.5;} .reveal-layer .gnode[data-pool="us"] .gdot{fill:#3f83c4;} .reveal-layer .gdot{transform-box:fill-box; transform-origin:center; animation:gbreathe 2.8s ease-in-out infinite;} @keyframes gbreathe{0%,100%{transform:scale(1);} 50%{transform:scale(1.5); opacity:.8;}} @media(prefers-reduced-motion:reduce){.reveal-layer .gdot{animation:none;}} /* neuron graph: orange edges, electric-blue signals firing along them; each node flashes (zoom in fast, fade + zoom out slowly) as the signal passes */ .reveal-layer .signals circle{filter:drop-shadow(0 0 5px rgba(61,182,255,.9));} .reveal-layer .fire{fill:none; stroke:#3db6ff; stroke-width:1.6; opacity:0; transform-box:fill-box; transform-origin:center; filter:drop-shadow(0 0 5px rgba(92,196,255,.85)); animation:fire 4.2s ease-out infinite;} @keyframes fire{0%{transform:scale(.5); opacity:0;} 10%{transform:scale(1.45); opacity:.95;} 100%{transform:scale(.6); opacity:0;}} .reveal-layer .route-hi{opacity:.14; animation:routehi 6s ease-in-out infinite;} @keyframes routehi{0%,100%{opacity:.12;} 45%{opacity:.6;} 65%{opacity:.5;}} @media(prefers-reduced-motion:reduce){.reveal-layer .signals,.reveal-layer .fire{display:none;} .reveal-layer .route-hi{opacity:.4; animation:none;}} .hero .wrap, .hero-top, .console{position:relative; z-index:2;} /* GLOW: two-corner conic bloom (orange + opposite blue) behind the OPAQUE card, radial soft fade that hugs the card and fades ~100px, slow eased drift; dense halftone grain baked over it; a longer WHITE stroke travels the card border (offset-path). .cbeam avoids the constellation .beam. */ .console{position:relative; isolation:isolate; background:var(--surface); --bloom: conic-gradient(from 0deg at 50% 50%, transparent 0deg, transparent 76deg, rgba(255,124,40,.5) 100deg, rgba(255,150,72,1) 126deg, rgba(255,188,132,1) 138deg, rgba(255,150,72,1) 150deg, rgba(255,124,40,.5) 174deg, transparent 196deg, transparent 254deg, rgba(40,116,255,.5) 284deg, rgba(74,156,255,1) 306deg, rgba(132,200,255,1) 316deg, rgba(74,156,255,1) 326deg, rgba(40,116,255,.5) 346deg, transparent 360deg); --beamgrad: conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,0) 26deg, rgba(255,255,255,.08) 52deg, rgba(255,255,255,.5) 74deg, rgba(255,255,255,1) 84deg, rgba(255,255,255,1) 96deg, rgba(255,255,255,.5) 106deg, rgba(255,255,255,.08) 128deg, rgba(255,255,255,0) 154deg, rgba(255,255,255,0) 206deg, rgba(255,255,255,.08) 232deg, rgba(255,255,255,.5) 254deg, rgba(255,255,255,1) 264deg, rgba(255,255,255,1) 276deg, rgba(255,255,255,.5) 286deg, rgba(255,255,255,.08) 308deg, rgba(255,255,255,0) 334deg, rgba(255,255,255,0) 360deg); --twotone: conic-gradient(from 0deg at 50% 50%, #ff5028 0deg, #ff5028 165deg, #2f88ff 195deg, #2f88ff 345deg, #ff5028 360deg); --colormask: conic-gradient(from 0deg at 50% 50%, rgba(0,0,0,0) 22deg, rgba(0,0,0,.08) 48deg, rgba(0,0,0,.5) 70deg, #000 83deg, #000 97deg, rgba(0,0,0,.5) 110deg, rgba(0,0,0,.08) 132deg, rgba(0,0,0,0) 158deg, rgba(0,0,0,0) 202deg, rgba(0,0,0,.08) 228deg, rgba(0,0,0,.5) 250deg, #000 263deg, #000 277deg, rgba(0,0,0,.5) 290deg, rgba(0,0,0,.08) 312deg, rgba(0,0,0,0) 338deg, rgba(0,0,0,0) 360deg);} .gedge{position:absolute; inset:0; z-index:-1; pointer-events:none;} /* faint inner colour dots inside the card, tinted by the SAME rotating two-tone as the outer glow */ .console .innerglow{position:absolute; inset:1px; z-index:0; border-radius:23px; overflow:hidden; pointer-events:none; opacity:.42;} /* the two discs travel an ellipse matched to the card's wide shape (scaleY squash), rotating in sync with the stroke */ .console .innerglow .igorbit{position:absolute; left:50%; top:50%; width:104%; aspect-ratio:1; transform:translate(-50%,-50%) scaleY(.5);} .console .innerglow .igspin{position:absolute; left:50%; top:50%; width:100%; aspect-ratio:1; display:block; transform:translate(-50%,-50%) rotate(0deg); background: radial-gradient(circle at 91% 50%, rgba(47,136,255,.9) 0%, rgba(47,136,255,0) 36%), radial-gradient(circle at 9% 50%, rgba(255,80,40,.9) 0%, rgba(255,80,40,0) 36%); filter:blur(19px) saturate(1.4); animation:glowspin 13s linear infinite;} .console .console-bar, .console .bridge{position:relative; z-index:1;} @media(prefers-reduced-motion:reduce){.console .innerglow .igspin{animation:none;}} /* COLOUR follows the card shape: a rotating orange/blue split fills a thick rounded-rect FRAME (adopts the outline), then the whole frame is blurred so it fades out softly. Rotates in sync with the white stroke (same glowspin timing). */ .gedge .cglow{position:absolute; inset:-12px; z-index:-1; pointer-events:none; filter:blur(18px) saturate(2.9) brightness(1.75);} .gedge .cglow2{mix-blend-mode:overlay; opacity:.8; inset:-13px; filter:blur(26px) saturate(2.9) brightness(1.75);} .gedge .cglow2 .frame{padding:13px; border-radius:37px;} .gedge .cglow .frame{position:absolute; inset:0; border-radius:36px; box-sizing:border-box; padding:12px; overflow:hidden; -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;} .gedge .cglow .frame .cg2{position:absolute; left:50%; top:50%; width:178%; aspect-ratio:1; display:block; transform:translate(-50%,-50%) rotate(0deg); background:var(--twotone); -webkit-mask:var(--colormask); mask:var(--colormask); animation:glowspin 13s linear infinite; will-change:transform;} /* DOTS: a white copy of the colour shape (frame + colormask + 18px blur) masked by a crisp dot pattern. The dots are crisp; their BRIGHTNESS follows the soft blurred spindle, so where the spindle is transparent (no colour / at the edges) there is simply nothing -- no black, no stray dots. Screen-blended so the dots light up only on the colour. */ .gedge .dotmask{position:absolute; inset:-50px; z-index:-1; pointer-events:none; mix-blend-mode:screen;} .gedge .dotmask .dsp{position:absolute; inset:0; filter:blur(18px); -webkit-mask:radial-gradient(#000 0.55px, transparent 0.95px) 0 0 / 3.2px 3.2px, radial-gradient(rgba(0,0,0,.35) 0.5px, transparent 0.9px) 1.6px 1.6px / 3.2px 3.2px; mask:radial-gradient(#000 0.55px, transparent 0.95px) 0 0 / 3.2px 3.2px, radial-gradient(rgba(0,0,0,.35) 0.5px, transparent 0.9px) 1.6px 1.6px / 3.2px 3.2px;} .gedge .dotmask .dsp .dframe{position:absolute; inset:42px; border-radius:32px; box-sizing:border-box; padding:8px; overflow:hidden; -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;} .gedge .dotmask .dsp .dframe .dfill{position:absolute; left:50%; top:50%; width:190%; aspect-ratio:1; display:block; transform:translate(-50%,-50%) rotate(0deg); background:#fff; -webkit-mask:var(--colormask); mask:var(--colormask); animation:glowspin 13s linear infinite; will-change:transform;} /* GRAIN as a SECOND colour layer: same shape+rotation as the glow, but the dots are baked into it via background-blend, so its alpha IS the colour shape -> dots can only ever appear on the colour, never on the background. Lightly blurred so it sits inside the soft glow. */ .gedge .cdots{position:absolute; inset:-18px; z-index:-1; pointer-events:none; filter:blur(2px); mix-blend-mode:multiply;} .gedge .cdots .dframe{position:absolute; inset:0; border-radius:42px; box-sizing:border-box; padding:18px; overflow:hidden; -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;} .gedge .cdots .dframe .dg2{position:absolute; left:50%; top:50%; width:178%; aspect-ratio:1; display:block; transform:translate(-50%,-50%) rotate(0deg); background-image:radial-gradient(rgba(4,8,14,.72) 0.9px, transparent 1.5px); background-size:3.6px 3.6px; -webkit-mask:var(--colormask); mask:var(--colormask); animation:glowspin 13s linear infinite; will-change:transform;} .gedge .cover{position:absolute; inset:0; border-radius:24px; background:var(--surface);} /* white stroke = thin rounded-rect border frame with two bright highlights that sweep the border */ .cbeam{position:absolute; inset:0; z-index:4; pointer-events:none; border-radius:24px; box-sizing:border-box; padding:1.2px; overflow:hidden; -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; filter:drop-shadow(0 0 1.6px rgba(255,255,255,.75)) drop-shadow(0 0 6px rgba(255,255,255,.4)) drop-shadow(0 0 15px rgba(255,255,255,.3));} .cbeam .b2{position:absolute; left:50%; top:50%; width:180%; aspect-ratio:1; display:block; transform:translate(-50%,-50%) rotate(0deg); background:var(--beamgrad); animation:glowspin 13s linear infinite; will-change:transform;} /* dwell at the four card corners, quick across the straight sides (corner angles for a ~2:1 card) */ @keyframes glowspin{ 0%{transform:translate(-50%,-50%) rotate(27deg); animation-timing-function:cubic-bezier(.5,0,.5,1);} 25%{transform:translate(-50%,-50%) rotate(153deg); animation-timing-function:cubic-bezier(.5,0,.5,1);} 50%{transform:translate(-50%,-50%) rotate(207deg); animation-timing-function:cubic-bezier(.5,0,.5,1);} 75%{transform:translate(-50%,-50%) rotate(333deg); animation-timing-function:cubic-bezier(.5,0,.5,1);} 100%{transform:translate(-50%,-50%) rotate(387deg);}} @keyframes travel{0%{offset-distance:0%;} 100%{offset-distance:100%;}} @media(prefers-reduced-motion:reduce){.gedge .cglow .cg2, .gedge .cdots .dg2, .cbeam .b2{animation:none;}} :root[data-theme="light"] .gedge .cglow{opacity:.55;} @media(prefers-color-scheme:light){:root:not([data-theme="dark"]) .gedge .cglow{opacity:.55;}} /* magnetic / mouse-reactive buttons */ .btn.mag{position:relative;} /* light particles drifting up */ .hero .parts{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;} .hero .parts i{position:absolute; bottom:-10px; width:2px; height:2px; border-radius:50%; background:var(--amber); opacity:0; animation:rise linear infinite;} @keyframes rise{0%{transform:translateY(0); opacity:0;} 10%{opacity:.7;} 90%{opacity:.5;} 100%{transform:translateY(-560px); opacity:0;}} @media(prefers-reduced-motion:reduce){.hero .parts{display:none;}} .roles, .faq{background:radial-gradient(82% 64% at 100% 0%, color-mix(in srgb,var(--sky) 18%, transparent), transparent 58%), radial-gradient(74% 58% at 0% 100%, color-mix(in srgb,var(--coral) 15%, transparent), transparent 60%), var(--paper);} .roles > .wrap, .faq > .wrap{position:relative; z-index:1;} /* header */ header.nav{position:sticky; top:0; z-index:70; background:var(--header-bg); backdrop-filter:blur(16px); border-bottom:1px solid transparent; transition:border-color .3s var(--ease), box-shadow .3s var(--ease);} header.nav.scrolled{border-color:var(--line); box-shadow:0 10px 30px rgba(11,26,39,.06);} .nav-in{display:flex; align-items:center; justify-content:space-between; height:84px; transition:height .3s var(--ease);} header.nav.scrolled .nav-in{height:46px;} .brand .logo{height:35px; width:auto; display:block; transition:height .3s var(--ease);} header.nav.scrolled .brand .logo{height:25px;} .logo-dark{display:none;} .brand .logo-dark{display:none;} :root[data-theme="dark"] .logo-light{display:none;} :root[data-theme="dark"] .logo-dark{display:block;} @media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .logo-light{display:none;} :root:not([data-theme="light"]) .logo-dark{display:block;}} .nav-links{display:flex; gap:34px;} .nav-links a{font-weight:450; font-size:.95rem; color:var(--muted); transition:color .15s;} .nav-links a:hover{color:var(--heading);} .nav-right{display:flex; align-items:center; gap:12px;} .nav-cta{padding:9px 20px; font-size:.93rem; transition:padding .28s var(--ease), font-size .28s var(--ease);} header.nav.scrolled .nav-cta{padding:4px 14px; font-size:.83rem;} /* top bar follows the theme; the hero section stays dark in both (below) */ .tt{width:32px; height:32px; flex:none; border:none; background:none; color:var(--muted); display:grid; place-items:center; cursor:pointer; opacity:.9; transition:opacity .15s, color .15s;} /* on wide screens: theme toggle sits at the page's far right, Apply stays at the content edge */ @media(min-width:1280px){.tt{position:absolute; right:30px; top:50%; transform:translateY(-50%);}} .tt:hover{opacity:1; color:var(--heading);} .tt svg{width:17px; height:17px;} .tt .sun{display:none;} :root[data-theme="dark"] .tt .sun{display:block;} :root[data-theme="dark"] .tt .moon{display:none;} @media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .tt .sun{display:block;} :root:not([data-theme="light"]) .tt .moon{display:none;}} .menu-btn{display:none; width:44px; height:44px; border:1.5px solid var(--line-strong); border-radius:12px; background:none; color:var(--heading); align-items:center; justify-content:center;} /* ===== HERO : the matching console ===== */ .hero{position:relative; overflow:hidden; padding:68px 0 90px; --coral:#F3592E; --coral-2:#FF7150; --amber:#F6B455; --sky:#6FA6D6; --green:#33B683; --paper:#091622; --paper-2:#0C1E2C; --surface:#11242F; --ink:#E6EDF2; --heading:#F3F8FB; --muted:#93A2AF; --faint:#66757F; --line:rgba(255,255,255,.08); --hair:rgba(255,255,255,.055); --line-strong:rgba(255,255,255,.16); --blueprint:#EAF3FB; --warmtint:#211514; --cooltint:#122636; --art:#EAF3FB; --sh-sm:0 2px 12px rgba(0,0,0,.4); --sh:0 14px 44px rgba(0,0,0,.5); --sh-lg:0 34px 80px rgba(0,0,0,.6); background:#091622; color:var(--ink);} .hero::before{content:""; position:absolute; inset:0; background: radial-gradient(600px 380px at 12% 8%, var(--warmtint), transparent 66%), radial-gradient(620px 420px at 90% 4%, var(--cooltint), transparent 66%); opacity:.85;} .hero .wrap{position:relative;} .hero-grid{display:grid; grid-template-columns:1.04fr .96fr; gap:52px; align-items:center;} @media(max-width:980px){.hero-grid{grid-template-columns:1fr; gap:38px;}} .hero h1{font-size:clamp(2rem,3.2vw,3.05rem); font-weight:800; letter-spacing:-.035em; line-height:1.04; margin-top:16px; text-wrap:balance;} .hero h1 .c{color:var(--coral);} .hero .sub{font-size:clamp(1.02rem,1.1vw,1.14rem); color:var(--muted); max-width:50ch; margin-top:20px; line-height:1.66;} .hero .sub b{color:var(--ink); font-weight:600;} .hero-cta{display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-top:30px;} .hero-free{display:inline-flex; align-items:center; gap:9px; font-size:.94rem; color:var(--ink); font-weight:500;} .hero-free .t{width:22px; height:22px; border-radius:50%; background:color-mix(in srgb,var(--green) 15%,transparent); color:var(--green); display:grid; place-items:center; flex:none;} /* the console */ .console{margin-top:0; background:var(--surface); border:1px solid var(--line); border-radius:24px; box-shadow:var(--sh-lg); padding:10px; position:relative;} .console-bar{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 16px; border-bottom:1px solid var(--hair);} .console-bar .lbl{font-weight:600; font-size:.68rem; letter-spacing:.05em; text-transform:uppercase; color:var(--faint); display:flex; align-items:center; gap:8px; white-space:nowrap; flex:none;} .console-bar .lbl .live{width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px color-mix(in srgb,var(--green) 22%,transparent); animation:blip 2.4s var(--ease) infinite;} @keyframes blip{0%,100%{opacity:1}50%{opacity:.35}} .ticker{overflow:hidden; flex:1; min-width:0; margin-left:14px;} .ticker .roll{display:block; font-family:var(--display); font-weight:600; font-size:.84rem; color:var(--coral); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:right;} .bridge{display:grid; grid-template-columns:1fr auto 1fr; align-items:stretch; gap:0;} .side{padding:22px 18px;} .side.you{} .side.us{text-align:right;} .side .who{font-weight:600; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; display:flex; align-items:center; gap:8px;} .side.us .who{justify-content:flex-end;} .side.you .who{color:var(--coral);} .side.us .who{color:var(--sky);} .side .who .pin{width:8px; height:8px; border-radius:50%;} .side.you .who .pin{background:var(--coral);} .side.us .who .pin{background:var(--sky);} .side .place{font-family:var(--display); font-weight:700; font-size:1.02rem; color:var(--heading); margin-top:10px; letter-spacing:-.02em; white-space:nowrap;} .side .clock{font-family:var(--display); font-weight:700; font-size:1.7rem; letter-spacing:-.03em; margin-top:6px; color:var(--heading); font-variant-numeric:tabular-nums;} .side .clock .ap{font-size:1rem; color:var(--muted); margin-left:4px;} .side .note{font-size:.7rem; color:var(--muted); margin-top:8px; white-space:nowrap;} .link{position:relative; width:78px; display:grid; place-items:center;} .link .wire{position:absolute; top:50%; left:8px; right:8px; height:2px; transform:translateY(-50%); background:repeating-linear-gradient(90deg, var(--line-strong) 0 7px, transparent 7px 14px);} .link .pulse{position:absolute; top:50%; width:12px; height:12px; border-radius:50%; transform:translate(-50%,-50%); background:var(--coral); box-shadow:0 0 0 5px color-mix(in srgb,var(--coral) 20%,transparent); animation:travel 2.8s ease-in-out infinite alternate;} @keyframes travel{0%{left:12px; background:var(--amber);} 50%{background:var(--coral);} 100%{left:calc(100% - 12px); background:var(--sky);}} .link .badge{position:relative; z-index:2; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-pill); padding:6px 12px; font-family:var(--display); font-weight:700; font-size:.72rem; color:var(--heading); box-shadow:var(--sh-sm);} @media(max-width:760px){ .bridge{grid-template-columns:1fr;} .side.us{text-align:left;} .side.us .who{justify-content:flex-start;} .link{width:auto; height:70px;} .link .wire{top:8px; bottom:8px; left:50%; right:auto; width:2px; height:auto; background:repeating-linear-gradient(180deg,var(--line-strong) 0 7px,transparent 7px 14px);} .link .pulse{left:50%!important; animation:travelv 2.8s ease-in-out infinite alternate;} @keyframes travelv{0%{top:12px}100%{top:calc(100% - 12px)}} } /* ===== JOURNEY : left-rail timeline (overlap-proof) ===== */ .journey{padding:58px 0 66px;} .j-head{max-width:640px; margin:0 auto 42px; text-align:center;} .j-head h2{font-size:clamp(1.45rem,2vw,1.9rem);} .j-head p{margin-top:16px; color:var(--muted); font-size:1.06rem;} .jrail{position:relative; max-width:900px; margin:0 auto; padding:0 24px;} .spine{position:absolute; left:50px; top:8px; bottom:70px; width:2px; background:linear-gradient(180deg, transparent 0 25%, var(--line) 25% 100%); z-index:0;} .spine::before{content:""; position:absolute; top:0; left:0; width:100%; height:25%; background:repeating-linear-gradient(180deg, var(--coral) 0 5px, transparent 5px 11px); opacity:.55;} .spine-fill{position:absolute; left:0; top:0; width:100%; height:0; background:linear-gradient(180deg, transparent 0%, transparent 26%, var(--green) 26%, var(--green) 100%); background-repeat:no-repeat; background-position:top; background-size:100% var(--sfh,1200px); transition:height .12s linear;} .station{position:relative; display:grid; grid-template-columns:1fr 290px; gap:30px; align-items:start; padding:0 0 40px 74px;} .station:last-child{padding-bottom:0;} .node{position:absolute; left:26px; top:0; transform:translateX(-50%); width:52px; height:52px; border-radius:50%; background:var(--surface); border:2px solid var(--line-strong); display:grid; place-items:center; font-family:var(--display); font-weight:800; font-size:1.1rem; color:var(--faint); z-index:3; transition:all .4s var(--ease);} .station.bad.on .node{border-color:var(--coral); color:#fff; background:var(--coral); box-shadow:0 10px 24px rgba(232,72,31,.34);} .station.good.on .node{border-color:var(--green); color:#fff; background:var(--green); box-shadow:0 10px 24px rgba(31,169,108,.32);} .station.good .node{border-color:color-mix(in srgb,var(--green) 46%,var(--line-strong));} .node.start{background:var(--coral); border-color:var(--coral); box-shadow:0 8px 20px rgba(232,72,31,.3);} .node.start .nd{width:12px; height:12px; border-radius:50%; background:#fff;} .station.good .tag{color:var(--green);} .station.good .artcard .rowline .i{color:var(--green);} .station .tag{font-weight:600; font-size:.68rem; letter-spacing:.15em; text-transform:uppercase; color:var(--coral); display:block; margin-bottom:9px;} .station h3{font-size:clamp(1.15rem,1.5vw,1.4rem); letter-spacing:-.02em;} .station p{color:var(--muted); margin-top:11px; font-size:1rem; max-width:44ch;} .chips{display:flex; flex-wrap:wrap; gap:9px; margin-top:16px;} .chips .c{font-size:.8rem; font-weight:500; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-pill); padding:7px 13px;} .chips .c .g{color:var(--green); font-weight:700; margin-right:5px;} .artcard{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-sm); padding:20px; width:100%;} .artcard .h{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;} .artcard .h .t{font-family:var(--display); font-weight:700; color:var(--heading); font-size:.98rem;} .artcard .h .pill{font-size:.64rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:5px 10px; border-radius:var(--r-pill);} .pill-warm{background:color-mix(in srgb,var(--amber) 16%,transparent); color:var(--coral);} .pill-cool{background:color-mix(in srgb,var(--sky) 16%,transparent); color:var(--sky-deep);} .pill-good{background:color-mix(in srgb,var(--green) 14%,transparent); color:var(--green);} .artcard .rowline{display:flex; align-items:center; gap:10px; padding:10px 0; border-top:1px solid var(--hair); font-size:.9rem; font-weight:500;} .artcard .rowline:first-of-type{border-top:none;} .artcard .rowline .i{width:24px; height:24px; border-radius:7px; background:var(--paper-2); color:var(--coral); display:grid; place-items:center; flex:none;} .artcard .big{font-family:var(--display); font-weight:800; font-size:2.2rem; letter-spacing:-.03em; color:var(--heading);} .artcard .big .u{color:var(--coral);} .artcard .cap{font-size:.82rem; color:var(--muted);} @media(max-width:820px){ .station{grid-template-columns:1fr; gap:20px; padding-left:66px;} .spine{left:44px;} .node{left:22px;} } /* ===== ROLES : compact grid, single global expand ===== */ .roles{padding:64px 0 66px;} .roles .wrap.head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:26px;} .roles h2{font-size:clamp(1.45rem,2vw,1.95rem);} .rsub{font-family:var(--body); font-weight:500; font-size:1rem; color:var(--muted); margin-top:7px; letter-spacing:0;} .roles-toggle{display:inline-flex; align-items:center; gap:8px; background:none; border:none; padding:0; cursor:pointer; font-family:inherit; font-weight:600; font-size:.95rem; color:var(--coral); transition:color .15s;} .roles-toggle:hover{color:var(--coral-2);} .roles-toggle .arw{transition:transform .2s var(--ease);} .roles-toggle.on .arw{transform:rotate(180deg);} .roles-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; align-items:stretch;} /* the "Not listed?" catch-all always sits in the last column (gap in the row if short) */ .roles-grid > .role:last-child{grid-column:-2 / -1;} @media(max-width:820px){.roles-grid{grid-template-columns:repeat(2,1fr);}} @media(max-width:560px){.roles-grid{grid-template-columns:1fr;}} .role{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm); display:flex; flex-direction:column; position:relative; transition:border-color .18s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);} .role:hover{border-color:color-mix(in srgb,var(--green) 45%,var(--line-strong)); transform:scale(1.03); box-shadow:0 12px 34px rgba(0,0,0,.32), 0 0 24px -6px color-mix(in srgb,var(--green) 60%,transparent), 0 0 30px -4px color-mix(in srgb,var(--sky) 45%,transparent), inset 0 0 0 1px rgba(255,255,255,.09); z-index:2;} @media(prefers-reduced-motion:reduce){.role:hover{transform:none;}} .roles-grid.expanded .role{box-shadow:var(--sh-sm);} .rhead{padding:15px 16px; display:flex; justify-content:space-between; align-items:flex-start; gap:12px;} .rname{font-family:var(--display); font-weight:700; font-size:1.02rem; color:var(--heading); letter-spacing:-.01em;} .rmeta{display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex:none; text-align:right;} .rteam{font-size:.56rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--tag-fg);} .rpay{font-family:var(--display); font-weight:700; font-size:.82rem; color:var(--green); white-space:nowrap;} .role-detail{display:none; padding:0 16px 16px; border-top:1px solid var(--hair); flex-direction:column; gap:12px; flex:1;} .roles-grid.expanded .role-detail{display:flex;} .role-detail .desc{color:var(--muted); font-size:.9rem; margin-top:12px;} .role-detail .reqs{display:flex; flex-direction:column; gap:7px;} .role-detail .reqs li{display:flex; gap:8px; font-size:.85rem; color:var(--ink);} .role-detail .reqs .ck{color:var(--green); font-weight:700; flex:none;} .role-detail .rapply{margin-top:auto; align-self:flex-end; font-weight:600; font-size:.88rem; color:var(--coral); display:inline-flex; align-items:center; gap:6px; transform-origin:right center; transition:transform .16s var(--ease), color .16s var(--ease);} .role-detail .rapply .arw{transition:transform .15s var(--ease);} .role-detail .rapply:hover .arw{transform:translateX(4px);} .role-detail .rapply:hover{transform:scale(1.06);} /* quick apply on the CLOSED role cards; hidden once the grid is expanded (detail's own apply takes over) */ .rquick{display:inline-flex; align-items:center; gap:6px; margin-top:auto; padding:2px 16px 14px; font-weight:600; font-size:.82rem; color:var(--coral); text-decoration:none; align-self:flex-start;} .rquick .arw{transition:transform .15s var(--ease);} .rquick:hover{color:var(--coral-2);} .rquick:hover .arw{transform:translateX(4px);} .roles-grid.expanded .rquick{display:none;} .rtop2{display:flex; align-items:center; justify-content:space-between; gap:10px;} .playbtn{width:28px; height:28px; flex:none; border-radius:50%; border:1.5px solid var(--line-strong); background:transparent; color:var(--coral); display:grid; place-items:center; cursor:pointer; padding-left:2px; transition:background .15s, border-color .15s, transform .15s;} .playbtn:hover{background:var(--coral); color:#fff; border-color:var(--coral); transform:scale(1.06);} .vidmodal{border:none; border-radius:var(--r); padding:0; background:var(--surface); color:var(--ink); max-width:720px; width:92vw; box-shadow:var(--sh-lg); margin:auto;} .vidmodal[open]{position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); margin:0;} .vidmodal::backdrop{background:rgba(6,15,24,.66); backdrop-filter:blur(3px);} .vm-frame{position:relative; aspect-ratio:16/9; background:linear-gradient(150deg,var(--dark),var(--dark-2)); display:grid; place-items:center; border-radius:var(--r) var(--r) 0 0;} .vm-ph{text-align:center; color:var(--on-dark-mut); font-size:.95rem;} .vm-ph b{display:block; color:var(--on-dark); font-family:var(--display); font-size:1.2rem; margin-bottom:6px;} .vm-ph .disc{width:56px; height:56px; border-radius:50%; background:rgba(255,255,255,.1); display:grid; place-items:center; margin:0 auto 14px; color:#fff;} .vm-bar{display:flex; justify-content:space-between; align-items:center; padding:14px 18px;} .vm-bar .t{font-weight:650;} .vm-close{background:none; border:none; font-size:1.5rem; color:var(--muted); cursor:pointer; line-height:1;} .rail-note{text-align:center; color:var(--muted); font-size:.9rem; margin-top:22px;} /* journey storyboard art (barely-visible, theme-aware) */ .station > .jfig{position:absolute; left:-14px; top:6px; width:min(48%,430px); z-index:0; color:var(--art); opacity:.5; pointer-events:none; -webkit-mask-image:linear-gradient(105deg,#000 26%, transparent 74%); mask-image:linear-gradient(105deg,#000 26%, transparent 74%);} .station > .jfig svg{width:100%; height:auto; display:block;} .station > .jfig .ink{opacity:.14;} .station .body, .station .aside{position:relative; z-index:1;} /* scroll-lit journey cards: the aside card lights up in its theme colour as the step crosses centre */ .station .artcard{transform:scale(.95); opacity:.8; transition:border-color .5s var(--ease), box-shadow .5s var(--ease), transform .5s var(--ease), opacity .5s var(--ease);} .station.lit .artcard{border-color:var(--line-strong); transform:scale(1.02) translateY(-2px); opacity:1; box-shadow:0 18px 46px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.07);} .station.bad.lit .artcard{box-shadow:0 18px 46px rgba(0,0,0,.4), 0 0 40px -8px color-mix(in srgb,var(--coral) 55%,transparent), inset 0 0 0 1px color-mix(in srgb,var(--coral) 22%,transparent);} .station.good.lit .artcard{box-shadow:0 18px 46px rgba(0,0,0,.4), 0 0 40px -8px color-mix(in srgb,var(--green) 55%,transparent), inset 0 0 0 1px color-mix(in srgb,var(--green) 22%,transparent);} /* faint state tint so the gradient carries meaning: coral = stuck, green = placed */ .station.bad .artcard{background:linear-gradient(158deg, color-mix(in srgb,var(--coral) 18%, var(--surface)) 0%, var(--surface) 66%);} .station.good .artcard{background:linear-gradient(158deg, color-mix(in srgb,var(--green) 18%, var(--surface)) 0%, var(--surface) 66%);} .station .artcard:hover{transform:scale(1.05) translateY(-3px); z-index:3;} .station .artcard{position:relative;} /* the stroke draws itself around the active card (a bright arc sweeping the border) */ @property --cardang{syntax:""; inherits:false; initial-value:0deg;} .station .artcard::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:3; padding:1.4px; opacity:0; transition:opacity .45s var(--ease); background:conic-gradient(from var(--cardang) at 50% 50%, transparent 0deg, rgba(255,255,255,.92) 44deg, transparent 100deg, transparent 360deg); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;} .station.lit .artcard::after{opacity:1; animation:cardbeam 3s linear infinite;} @keyframes cardbeam{from{--cardang:0deg;} to{--cardang:360deg;}} /* inner rows fly/settle in, staggered, as the card becomes active */ .station .artcard .h, .station .artcard .rowline{opacity:.32; transform:translateX(18px); transition:opacity .55s var(--ease), transform .55s var(--ease);} .station.lit .artcard .h{opacity:1; transform:none; transition-delay:.05s;} .station.lit .artcard .rowline{opacity:1; transform:none;} .station.lit .artcard .rowline:nth-child(2){transition-delay:.15s;} .station.lit .artcard .rowline:nth-child(3){transition-delay:.24s;} .station.lit .artcard .rowline:nth-child(4){transition-delay:.33s;} @media(prefers-reduced-motion:reduce){.station .artcard{transition:none;} .station.lit .artcard{transform:none;} .station .artcard:hover{transform:none;} .station .artcard::after{display:none;} .station .artcard .h, .station .artcard .rowline{opacity:1!important; transform:none!important; transition:none;}} @media(max-width:820px){.station > .jfig{opacity:.28; width:70%;}} /* section separators (faded hairline, works in both themes) */ .journey, .roles, .faq{position:relative;} .journey::before, .roles::before, .faq::before{content:""; position:absolute; top:0; left:0; right:0; height:1px; z-index:3; background:linear-gradient(90deg, transparent, var(--line) 18%, var(--line) 82%, transparent);} .catch{border-top:1px solid rgba(255,255,255,.05);} /* ===== WALL : real reviews + seamless placed marquee ===== */ .wall{padding:60px 0; background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden;} .wall .head{text-align:center; max-width:800px; margin:0 auto 34px;} .wall h2{font-size:clamp(1.45rem,2vw,1.95rem);} .wall .head p{color:var(--muted); margin-top:14px;} .reviews{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:40px;} .review{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:22px; display:flex; flex-direction:column; gap:12px; position:relative; transition:border-color .18s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);} .review:hover{border-color:color-mix(in srgb,var(--green) 45%,var(--line-strong)); transform:scale(1.03); box-shadow:0 12px 34px rgba(0,0,0,.32), 0 0 24px -6px color-mix(in srgb,var(--green) 60%,transparent), 0 0 30px -4px color-mix(in srgb,var(--sky) 45%,transparent), inset 0 0 0 1px rgba(255,255,255,.09); z-index:2;} @media(prefers-reduced-motion:reduce){.review:hover{transform:none;}} /* stroke draws itself around the card on hover; phase offset per card so it reads randomised */ .review::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:3; padding:1.4px; opacity:0; transition:opacity .3s var(--ease); background:conic-gradient(from var(--cardang,0deg) at 50% 50%, transparent 0deg, rgba(255,255,255,.92) 44deg, transparent 100deg, transparent 360deg); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;} .review:hover::after{opacity:1; animation:cardbeam 2.6s linear infinite;} .review:nth-child(2)::after{animation-delay:-.5s;} .review:nth-child(3)::after{animation-delay:-1.3s;} .review:nth-child(4)::after{animation-delay:-2s;} @media(prefers-reduced-motion:reduce){.review::after{display:none;}} .review .stars{color:var(--amber); letter-spacing:2px; font-size:.85rem;} .review .q{font-size:.92rem; color:var(--ink); line-height:1.5; flex:1;} .review .who{display:flex; align-items:center; gap:11px;} .review .av{width:40px; height:40px; border-radius:50%; display:grid; place-items:center; color:#fff; font-family:var(--display); font-weight:700; flex:none; font-size:.9rem;} .review .nm{font-weight:650; font-size:.9rem;} .review .rl{font-size:.78rem; color:var(--muted);} .marq-wrap{display:flex; flex-direction:column; gap:12px;} .marq{display:flex; width:max-content; animation:slide 44s linear infinite;} .marq.s2{animation-direction:reverse; animation-duration:52s;} .marq.s3{animation-duration:60s;} /* marquee runs continuously — no pause on hover (endless-VAs feel) */ @keyframes slide{from{transform:translateX(0);} to{transform:translateX(-50%);}} .mgroup{display:flex; gap:12px; padding-right:12px; flex:none;} .pcard2{flex:0 0 auto; display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-pill); padding:8px 15px 8px 8px; box-shadow:var(--sh-sm);} .pcard2 .av{width:33px; height:33px; border-radius:50%; display:grid; place-items:center; color:#fff; font-family:var(--display); font-weight:700; flex:none; font-size:.82rem;} .pcard2 .nm{font-weight:650; font-size:.84rem; color:var(--heading);} .pcard2 .rl{font-size:.71rem; color:var(--muted);} .pcard2 .flag{font-size:.95rem;} @media(max-width:900px){.reviews{grid-template-columns:1fr 1fr;}} @media(max-width:560px){.reviews{grid-template-columns:1fr;}} @media(prefers-reduced-motion:reduce){.marq{animation:none; flex-wrap:wrap; width:auto; justify-content:center;} .marq .mgroup:nth-child(2){display:none;}} /* ===== NO CATCH (full-bleed dark type) ===== */ .catch{color:var(--on-dark); padding:74px 0; position:relative; overflow:hidden; background: radial-gradient(115% 80% at 92% -12%, color-mix(in srgb,var(--coral) 26%, transparent), transparent 55%), radial-gradient(105% 78% at 0% 112%, color-mix(in srgb,var(--amber) 20%, transparent), transparent 57%), radial-gradient(95% 72% at 64% 128%, color-mix(in srgb,var(--sky) 22%, transparent), transparent 59%), linear-gradient(152deg, var(--dark) 0%, var(--dark-2) 55%, var(--dark) 100%);} .catch::after{content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(140% 90% at 50% 50%, transparent 55%, rgba(0,0,0,.22) 100%);} .catch .wrap{position:relative; z-index:2;} .catch .kick{color:var(--amber);} .catch h2{color:var(--on-dark); font-size:clamp(1.7rem,2.6vw,2.4rem); letter-spacing:-.03em; max-width:18ch; margin-top:18px;} .catch h2 em{font-style:normal; color:var(--amber);} .catch .lead{color:var(--on-dark-mut); font-size:1.14rem; max-width:none; margin-top:22px;} .catch-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:40px;} .cc{position:relative; background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.018)); border:1px solid var(--on-dark-line); border-radius:var(--r-sm); padding:22px 20px; transition:border-color .18s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);} .cc:hover{border-color:color-mix(in srgb,var(--green) 45%,var(--on-dark-line)); transform:scale(1.04); box-shadow:0 14px 36px rgba(0,0,0,.42), 0 0 24px -6px color-mix(in srgb,var(--green) 55%,transparent), 0 0 30px -4px color-mix(in srgb,var(--sky) 40%,transparent); z-index:2;} .cc .cn{display:inline-flex; align-items:center; gap:7px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-weight:700; font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--green); margin-bottom:14px;} .cc .cn::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 24%,transparent);} .cc b{display:block; color:var(--on-dark); font-weight:650; font-size:1.04rem; margin:0 0 7px;} .cc span{color:var(--on-dark-mut); font-size:.92rem; line-height:1.5;} /* same hover stroke-draw as the role and review cards, so the section shares the card language */ .cc::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:3; padding:1.4px; opacity:0; transition:opacity .3s var(--ease); background:conic-gradient(from var(--cardang,0deg) at 50% 50%, transparent 0deg, rgba(255,255,255,.9) 44deg, transparent 100deg, transparent 360deg); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;} .cc:hover::after{opacity:1; animation:cardbeam 2.6s linear infinite;} .cc:nth-child(2)::after{animation-delay:-.5s;} .cc:nth-child(3)::after{animation-delay:-1.1s;} .cc:nth-child(4)::after{animation-delay:-1.8s;} @media(prefers-reduced-motion:reduce){.cc:hover{transform:none;} .cc::after{display:none;}} .catch-foot{margin-top:36px; display:flex; align-items:center; gap:15px; flex-wrap:wrap;} .catch-foot .av{width:52px; height:52px; border-radius:50%; background:linear-gradient(150deg,var(--coral),var(--amber)); display:grid; place-items:center; color:#fff; font-family:var(--display); font-weight:700; font-size:1.1rem; flex:none;} .catch-foot .nm{font-weight:650; color:var(--on-dark);} .catch-foot .rl{font-size:.85rem; color:var(--on-dark-mut);} @media(max-width:860px){.catch-grid{grid-template-columns:1fr 1fr;} .catch{padding:80px 0;}} /* ===== APPLY ===== */ .apply{padding:68px 0; border-top:1px solid var(--line); position:relative; background: radial-gradient(72% 68% at 100% 0%, color-mix(in srgb,var(--coral) 20%, transparent), transparent 58%), radial-gradient(68% 62% at 0% 100%, color-mix(in srgb,var(--sky) 18%, transparent), transparent 60%), var(--paper);} .apply-grid{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;} .apply h2{font-size:clamp(1.55rem,2.2vw,2.1rem); letter-spacing:-.03em;} .apply h2 em{font-style:normal; color:var(--coral);} .apply .lead{color:var(--muted); font-size:1.1rem; margin-top:20px;} .perks{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px;} .perk{display:inline-flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-pill); padding:9px 16px; font-size:.88rem; font-weight:500;} .perk .d{width:6px; height:6px; border-radius:50%; background:var(--coral);} .form{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:30px; box-shadow:var(--sh);} .form h3{font-family:var(--body); font-weight:700; font-size:1.25rem; margin-bottom:6px; color:var(--heading);} .form .fsub{font-size:.9rem; color:var(--muted); margin-bottom:24px;} .field{margin-bottom:15px;} .field label{display:block; font-size:.82rem; font-weight:600; margin-bottom:7px; color:var(--heading);} .field input,.field select{width:100%; padding:13px 15px; border:1.5px solid var(--line-strong); border-radius:12px; font-family:var(--body); font-size:.95rem; color:var(--ink); background:var(--input-bg); transition:border-color .15s, box-shadow .15s;} .field input:focus,.field select:focus{outline:none; border-color:var(--coral); box-shadow:0 0 0 3px color-mix(in srgb,var(--coral) 18%,transparent);} .frow{display:grid; grid-template-columns:1fr 1fr; gap:14px;} .form .btn{width:100%; margin-top:8px;} .form .fine{font-size:.77rem; color:var(--muted); text-align:center; margin-top:14px;} .form .fine b{color:var(--heading);} /* ===== APPLY panel ===== */ .applypanel{position:relative; overflow:hidden; background: radial-gradient(88% 98% at 100% 0%, color-mix(in srgb,var(--coral) 28%, transparent), transparent 60%), radial-gradient(82% 88% at 0% 100%, color-mix(in srgb,var(--sky) 24%, transparent), transparent 62%), linear-gradient(158deg, var(--surface) 0%, color-mix(in srgb,var(--amber) 12%, var(--surface)) 100%); border:1px solid var(--line); border-radius:var(--r); padding:34px; box-shadow:var(--sh); transition:transform .25s var(--ease), box-shadow .25s var(--ease);} /* stroke travels the border at all times; hover adds glow + a little zoom */ .applypanel::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:3; padding:1.5px; opacity:.85; background:conic-gradient(from var(--cardang,0deg) at 50% 50%, transparent 0deg, rgba(255,255,255,.85) 44deg, transparent 100deg, transparent 360deg); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; animation:cardbeam 3.2s linear infinite; transition:opacity .3s var(--ease);} .applypanel:hover{transform:scale(1.012); box-shadow:0 22px 54px rgba(0,0,0,.42), 0 0 34px -6px color-mix(in srgb,var(--green) 55%,transparent), 0 0 40px -4px color-mix(in srgb,var(--sky) 42%,transparent);} .applypanel:hover::after{opacity:1;} @media(prefers-reduced-motion:reduce){.applypanel::after{animation:none; opacity:.45;} .applypanel:hover{transform:none;}} .applypanel > *{position:relative;} .ap-badge{display:inline-flex; align-items:center; gap:8px; font-size:.76rem; font-weight:600; color:var(--green); background:color-mix(in srgb,var(--green) 13%,transparent); border-radius:var(--r-pill); padding:7px 14px; margin-bottom:20px;} .ap-badge .dot{width:7px; height:7px; border-radius:50%; background:var(--green);} .ap-h{font-family:var(--display); font-weight:700; font-size:1.55rem; letter-spacing:-.02em; color:var(--heading);} .ap-p{color:var(--muted); font-size:.98rem; margin-top:12px;} .ap-ticks{margin:22px 0 26px; display:flex; flex-direction:column; gap:13px;} .ap-ticks li{display:flex; align-items:center; gap:12px; font-weight:500; font-size:.96rem;} .ap-ticks .ck{width:24px; height:24px; border-radius:50%; background:color-mix(in srgb,var(--green) 14%,transparent); color:var(--green); display:grid; place-items:center; flex:none;} .ap-btn{width:100%; font-size:1.05rem; padding:17px 28px;} .ap-fine{display:block; text-align:center; font-size:.8rem; color:var(--muted); margin-top:14px;} .ap-fine b{color:var(--heading);} /* ===== FAQ ===== */ .faq{padding:66px 0 74px;} .faq .head{text-align:center; max-width:600px; margin:0 auto 34px;} .faq h2{font-size:clamp(1.45rem,2vw,1.95rem);} .faq-grid{max-width:800px; margin:0 auto; display:flex; flex-direction:column;} details.qa{border-top:1px solid var(--line); padding:6px 0;} details.qa:last-child{border-bottom:1px solid var(--line);} details.qa summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:26px 2px; font-family:var(--display); font-weight:600; font-size:1.14rem; color:var(--heading);} details.qa summary::-webkit-details-marker{display:none;} details.qa summary .pl{color:var(--coral); font-size:1.5rem; flex:none; transition:transform .22s var(--ease);} details.qa[open] summary .pl{transform:rotate(45deg);} details.qa[open] summary{padding-bottom:8px;} details.qa .ans{padding:0 2px 26px; color:var(--muted); font-size:1rem; max-width:64ch;} /* footer */ footer.site{background:var(--surface); border-top:1px solid var(--line); padding:54px 0 30px;} .foot-grid{display:grid; grid-template-columns:1.8fr 1fr 1fr 1fr; gap:40px; padding-bottom:40px; border-bottom:1px solid var(--line);} .foot-brand .logo{height:36px; width:auto;} .foot-brand p{color:var(--muted); margin-top:16px; max-width:34ch; font-size:.94rem;} .foot-col h5{font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--heading); margin-bottom:15px; font-weight:700;} .foot-col a{display:block; width:fit-content; color:var(--muted); margin-bottom:11px; font-size:.94rem; transform-origin:left center; transition:color .16s, transform .16s var(--ease), text-shadow .2s var(--ease);} .foot-col a:hover{color:var(--coral); transform:scale(1.06); text-shadow:0 0 4px color-mix(in srgb,var(--coral) 60%,transparent), 0 0 9px color-mix(in srgb,var(--coral) 32%,transparent);} @media(prefers-reduced-motion:reduce){.foot-col a:hover{transform:none;}} .foot-bottom{display:flex; justify-content:space-between; gap:14px; margin-top:26px; flex-wrap:wrap; font-size:.83rem; color:var(--faint);} .reveal{opacity:0; transform:translateY(20px); transition:opacity .7s var(--ease), transform .7s var(--ease);} .reveal.in{opacity:1; transform:none;} @media(max-width:1240px){.foot-grid{grid-template-columns:1fr 1fr;}} @media(max-width:860px){ .apply-grid{grid-template-columns:1fr; gap:40px;} .roles .wrap.head{align-items:flex-start;} } @media(max-width:640px){ .nav-links{display:none;} .menu-btn{display:flex;} .catch-grid,.frow{grid-template-columns:1fr;} .foot-grid{grid-template-columns:1fr;} .rcard{flex-basis:80vw;} } @media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important; animation:none!important; transition:none!important;} .reveal{opacity:1; transform:none;} .spine-fill{display:none;}} /* theme-toggle icon drawn in CSS (import strips inline in