/* ============================================================ STRAVEX TECHNOLOGIES — SHARED DESIGN SYSTEM Extracted from the original single-page implementation and extended for the multi-page architecture. Source of visual truth: docs/DESIGN.md (brochure-derived) + this file. ============================================================ */ :root{ /* ============ SEMANTIC COLOR SYSTEM ============ Deep-navy aerospace register. Depth is tonal (bg → bg-secondary → panel → panel-elevated), never shadow-driven. Blue is deliberately scarce: --color-brand for fills/underlines/CTAs, --color-brand-hover for small bright marks + hover/focus, --color-brand-soft for accent TEXT on dark (7.4:1 on --color-bg; the saturated brand blue alone is only 3.4:1 and must never carry small text). --color-alert (amber) is the one warm signal — thesis rules, provenance chips — and is kept scarce on purpose. Inline SVG diagrams in the HTML can't reference custom properties from presentation attributes; they use these literal equivalents, mapped: #3D6AFF=brand-hover · #7E92B4=diagram neutral · #22304E=diagram border #5C6B85=diagram sub-label · #F5F7FA=text · #C9973A=alert. */ --color-bg:#060A16; --color-bg-secondary:#08101E; --color-panel:#0E1730; --color-panel-elevated:#121D38; --color-text:#F5F7FA; --color-text-secondary:#B7C2D6; --color-text-muted:#7B889F; --color-brand:#4F81C8; --color-brand-hover:#3D6AFF; --color-brand-soft:#6F9CFF; --color-alert:#C9973A; --color-border:rgba(130,150,190,.16); --color-border-strong:rgba(150,172,214,.30); --color-hairline:rgba(255,255,255,.05); --color-glow:rgba(79,120,255,.12); /* Legacy names — every pre-migration rule resolves through these aliases, so the whole cascade derives from the semantic set above. */ --surface-primary:var(--color-bg); --surface-secondary:var(--color-panel); --text-primary:var(--color-text); --text-secondary:var(--color-text-secondary); --text-faint:var(--color-text-muted); --accent-signal:var(--color-brand-soft); --accent-signal-dim:rgba(61,106,255,.45); --accent-alert:var(--color-alert); --border-hairline:var(--color-hairline); --border-mid:var(--color-border); --sp-1:8px;--sp-2:16px;--sp-3:24px;--sp-4:32px;--sp-5:48px;--sp-6:64px;--sp-7:96px;--sp-8:128px; --canvas-max:1440px; /* Shared reading measure for flowing prose paragraphs (section intros, page-header leads, long-form body copy). 62ch sits in the middle of the ~58-68ch range every component had picked independently (see DESIGN_AUDIT.md §2.3) and matches what was already the most common value in practice. Short one-line taglines/pull-quotes (.hero-brief, .sys-thesis, .highlight, etc.) are intentionally narrower than this and are NOT meant to use it — they're editorial accents, not paragraphs. */ --measure-prose:62ch; --font-display:'Archivo',sans-serif; --font-serif:'Instrument Serif',serif; --font-body:'IBM Plex Sans',sans-serif; --font-mono:'IBM Plex Mono',monospace; --ease-out:cubic-bezier(.16,1,.3,1); --ease-inout:cubic-bezier(.65,0,.35,1); --dur-a:750ms; --dur-hover:240ms; /* semantic z-index scale */ --z-base:0; --z-atmo:1; --z-content:2; --z-sticky:400; --z-nav:500; --z-mobile-nav:600; --z-grain:900; --z-toast:950; } html.reduced-motion .item:hover{padding-left:0;} html.reduced-motion *,html.reduced-motion *::before,html.reduced-motion *::after{ animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important; } *{box-sizing:border-box;} @media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth;}} /* Lenis smooth-scroll (classes added to by Lenis when active). When smoothing, native scroll-behavior must be auto so the two don't fight; disabled automatically under reduced motion since Lenis isn't initialised then (main.js). */ html.lenis,html.lenis body{height:auto;} .lenis.lenis-smooth{scroll-behavior:auto!important;} .lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain;} .lenis.lenis-stopped{overflow:hidden;} body{ margin:0;background-color:var(--surface-primary);color:var(--text-primary); font-family:var(--font-body);font-size:16px;line-height:1.6; -webkit-font-smoothing:antialiased;overflow-x:hidden; background-image: linear-gradient(rgba(70,86,120,.45),rgba(70,86,120,.45)), linear-gradient(rgba(70,86,120,.45),rgba(70,86,120,.45)), radial-gradient(135% 100% at 50% 42%, transparent 58%, rgba(0,0,0,.32) 100%), radial-gradient(1100px 700px at 82% -8%, rgba(79,120,255,.075), transparent 62%), radial-gradient(800px 600px at -12% 34%, rgba(79,120,255,.045), transparent 60%), radial-gradient(1300px 900px at 50% 118%, rgba(60,100,220,.07), transparent 62%), linear-gradient(180deg,#08101E 0%,#050810 100%); background-repeat:no-repeat;background-attachment:fixed; background-size:1px 100%,1px 100%,cover,auto,auto,auto,cover; background-position:max(14px,calc((100vw - 1440px)/2 + 30px)) 0,calc(100% - max(14px,calc((100vw - 1440px)/2 + 30px))) 0,0 0,0 0,0 0,0 0,0 0; } img,svg{display:block;max-width:100%;} a{color:inherit;text-decoration:none;} ul{list-style:none;margin:0;padding:0;} button{font-family:inherit;} ::selection{background:var(--accent-signal-dim);color:#fff;} ::-webkit-scrollbar{width:10px;} ::-webkit-scrollbar-track{background:var(--surface-primary);} ::-webkit-scrollbar-thumb{background:var(--border-mid);border:3px solid var(--surface-primary);border-radius:6px;} ::-webkit-scrollbar-thumb:hover{background:var(--text-faint);} a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--color-brand-hover);outline-offset:3px;border-radius:1px;} .cap-card:focus-visible,.contact-mod:focus-visible{outline-offset:-2px;} .skip-link{position:absolute;left:-9999px;top:0;background:var(--accent-signal);color:var(--surface-primary);padding:12px 20px;z-index:var(--z-toast);font-family:var(--font-mono);font-size:14px;} .skip-link:focus{left:16px;top:16px;} .grain{position:fixed;inset:-50%;width:200%;height:200%;pointer-events:none;z-index:var(--z-grain);opacity:.026; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation:grain 9s steps(6) infinite;} @keyframes grain{0%,100%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-2%)}80%{transform:translate(3%,3%)}} .scroll-progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:var(--z-sticky);opacity:0;transition:opacity .3s ease; background:linear-gradient(90deg,var(--color-brand),var(--color-brand-soft)); box-shadow:0 0 12px rgba(79,120,255,.55);} /* ============ ANNOUNCEMENT TICKER (homepage, above nav) ============ Full-bleed, in-flow seamless marquee. ONE animated .ticker__track holds the content twice (two identical .ticker__group spans); translateX(-50%) advances exactly one copy, so the loop has no seam. flex:0 0 auto stops the flex parent from shrinking the wide track. Tokens only — no new values. */ .ticker{height:32px;background:var(--color-bg-secondary);border-bottom:1px solid var(--color-hairline); overflow:hidden;display:flex;align-items:center;white-space:nowrap;} .ticker__track{display:inline-flex;flex:0 0 auto;align-items:center;animation:ticker-scroll 40s linear infinite;} .ticker__group{display:inline-flex;align-items:center;font-family:var(--font-mono);font-size:11px;font-weight:500; letter-spacing:.18em;text-transform:uppercase;color:var(--color-text-muted);} .ticker__sep{margin:0 1.6em;color:var(--color-text-muted);} @keyframes ticker-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}} /* Reduced motion: freeze, drop the visual duplicate, centre the single line. */ @media (prefers-reduced-motion:reduce){ .ticker{justify-content:center;} .ticker__track{animation:none;} .ticker__group[aria-hidden="true"]{display:none;} } /* The fixed nav must sit BELOW the in-flow ticker while it's in view. This is the pre-JS / no-JS baseline; main.js then eases nav top 32→0 as the ticker scrolls away. Targets the homepage's rebuilt .nav (legacy .site-nav has no ticker). */ html:has(.ticker) .nav{top:32px;} /* Horizontal longhands only — .canvas governs the horizontal grid and must never fight a co-located class's vertical padding (the padding-shorthand collision that broke .hero-index-inner / .hero-canvas / .pcat-caps at various breakpoints). The responsive override below follows the same longhand-only rule. */ .canvas{max-width:var(--canvas-max);margin:0 auto;padding-left:var(--sp-5);padding-right:var(--sp-5);} /* ---------- Type ---------- */ h1,h2,h3{font-family:var(--font-display);margin:0;color:var(--text-primary);} h2{font-size:clamp(32px,3.6vw,52px);font-weight:600;line-height:1.05;letter-spacing:-0.026em;text-wrap:balance; color:var(--text-primary);} h2 em,.serif-em{font-family:var(--font-serif);font-style:italic;font-weight:400;font-size:1.06em;letter-spacing:0;} h3{font-size:22px;font-weight:500;line-height:1.3;letter-spacing:-0.005em;} .body-lg{font-size:clamp(16px,1.4vw,19px);line-height:1.65;color:var(--text-secondary);font-weight:400;} /* Sitewide default reading measure for every paragraph (see --measure-prose in :root). Components in a container already narrower than this (cards, sidebars, footer columns) are unaffected — the cap only ever binds where a paragraph would otherwise stretch to an unreadably wide column. Components that want a different, deliberate measure set their own max-width and win on specificity; see the comments at each of those rules. */ p{color:var(--text-secondary);font-size:16px;line-height:1.75;margin:0 0 var(--sp-3) 0;text-wrap:pretty;max-width:var(--measure-prose);} .text-primary-copy{color:#C9D3E3;} /* Section head chrome — editorial document header */ .sec-head{border-top:1px solid var(--border-mid);display:flex;justify-content:space-between;gap:16px; padding-top:14px;margin-bottom:var(--sp-6);font-family:var(--font-mono);font-size:11px;font-weight:500; letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint);} .sec-head .l{color:var(--text-secondary);} .sec-head .l b{color:var(--accent-signal);font-weight:500;margin-right:12px;} /* ---------- Buttons ---------- */ .btn{display:inline-flex;align-items:center;gap:12px;font-family:var(--font-mono);font-size:13px;font-weight:500; letter-spacing:.06em;text-transform:uppercase;padding:18px 30px;border-radius:2px;border:1px solid transparent;cursor:pointer; transition:border-color var(--dur-hover) ease,color var(--dur-hover) ease,background var(--dur-hover) ease,opacity var(--dur-hover) ease,transform var(--dur-hover) ease; white-space:nowrap;} /* White label on the brand-blue fill: 5.8:1 on the #2454F2 mid-stop. The old dark-on-light-blue label would fall to ~3.4:1 against this deeper brand blue. */ .btn-primary{color:#fff;border-color:rgba(111,156,255,.85); background:linear-gradient(180deg,#4A78FF 0%,var(--color-brand) 55%,#1B3ED9 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 10px 30px -10px rgba(79,120,255,.5); animation:breathe 5s var(--ease-inout) infinite;} @keyframes breathe{ 0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 12px 32px -10px rgba(79,120,255,.45);} 50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 16px 42px -10px rgba(79,120,255,.72);}} .btn-primary:hover{transform:translateY(-1px);animation:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 14px 38px -10px rgba(79,120,255,.7),0 0 0 1px rgba(79,120,255,.35);} .btn-primary:active{transform:translateY(0); box-shadow:inset 0 2px 6px rgba(0,0,0,.25),0 6px 18px -10px rgba(79,120,255,.5);} .btn-ghost{background:transparent;color:var(--text-primary);border-color:var(--border-mid);} .btn-ghost{box-shadow:inset 0 1px 0 rgba(255,255,255,.04);} .btn-ghost:hover{border-color:var(--accent-signal);color:var(--accent-signal); box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 26px -8px rgba(79,120,255,.4);} .btn-ghost:active{transform:translateY(1px);} .btn-arrow{transition:transform var(--dur-hover) ease;} .btn:hover .btn-arrow{transform:translateX(4px);} .btn[disabled],.btn.is-disabled{opacity:.45;pointer-events:none;filter:grayscale(.4);} /* ---------- Reveal (dampened, engineered) ---------- */ .reveal{opacity:0;transform:translateY(14px);transition:opacity var(--dur-a) var(--ease-out),transform var(--dur-a) var(--ease-out);} .reveal.in-view{opacity:1;transform:translateY(0);} noscript .reveal,.no-js .reveal{opacity:1;transform:none;} /* ============ NAV ============ */ .site-nav{position:fixed;top:0;left:0;right:0;z-index:var(--z-nav);height:68px;display:flex;align-items:center; background:rgba(6,10,22,.5);border-bottom:1px solid transparent;transition:background .25s ease,border-color .25s ease;} .site-nav.scrolled{background:rgba(6,10,22,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--border-hairline);box-shadow:inset 0 -1px 0 rgba(255,255,255,.02),0 12px 32px -20px rgba(0,0,0,.8);} .nav-inner{width:100%;display:flex;align-items:center;justify-content:space-between;} .nav-logo{font-family:var(--font-display);font-size:16px;font-weight:700;letter-spacing:.2em;color:var(--text-primary);display:flex;align-items:center;gap:10px;} .nav-logo .dot{width:7px;height:7px;background:var(--color-brand-hover);display:inline-block;} /* Official Stravex logo (assets/img/stravex-logo.png) — replaces the text wordmark in the header, mobile drawer and footer. Height-based sizing preserves aspect ratio; the source (666×375) far exceeds the display size, so it stays crisp on high-DPI/Retina displays. */ .nav-logo__img{height:clamp(40px,3vw,46px);width:auto;display:block;} .nav-links{display:flex;gap:26px;align-items:center;} .nav-links a{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary);position:relative;padding:5px 0;transition:color var(--dur-hover) ease;} .nav-links a:hover{color:var(--text-primary);} .nav-links a.active{color:var(--text-primary);} .nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:var(--color-brand-hover);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease-out);} .nav-links a:hover::after{transform:scaleX(1);opacity:.45;} .nav-links a.active::after{transform:scaleX(1);opacity:1;box-shadow:0 0 8px rgba(79,120,255,.8);} .nav-cta .btn{padding:11px 20px;font-size:11px;} .nav-toggle{display:none;background:none;border:none;color:var(--text-primary);cursor:pointer;padding:11px;min-width:44px;min-height:44px;align-items:center;justify-content:center;} .nav-toggle svg{width:22px;height:22px;} .mobile-nav[hidden]{display:none;} .mobile-nav{position:fixed;inset:0;z-index:var(--z-mobile-nav);background:var(--surface-primary);display:flex;flex-direction:column;padding:var(--sp-4);transform:translateY(-100%);transition:transform .5s var(--ease-out);} .mobile-nav.open{transform:translateY(0);} .mobile-nav-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--sp-6);} .mobile-nav a{font-family:var(--font-display);font-size:32px;font-weight:600;letter-spacing:-.01em;color:var(--text-primary);padding:14px 0;border-bottom:1px solid var(--border-hairline);display:flex;justify-content:space-between;align-items:center;} .mobile-nav a .mono{font-family:var(--font-mono);font-size:11px;color:var(--text-faint);} .mobile-nav a.active{color:var(--accent-signal);} .mobile-nav .btn{margin-top:var(--sp-4);width:100%;justify-content:center;white-space:normal;text-align:center;line-height:1.4;} /* ============ PAGE HEADER (non-hero pages: company, products hub, services, contact, product detail) ============ */ .page-header{position:relative;isolation:isolate;padding:168px 0 var(--sp-6);overflow:hidden;} .page-header--banner { padding: 220px 0 100px; display: flex; align-items: center; justify-content: center; text-align: center; } .page-header--banner .page-crumb { justify-content: center; } .page-header--banner h1 { font-size: clamp(40px, 6vw, 72px); letter-spacing: -0.01em; margin-bottom: 0; } .page-header__media { position: absolute; inset: 0; z-index: -1; pointer-events: none; } .page-header__bg { width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.05); } .page-header__scrim { position: absolute; inset: 0; background: linear-gradient(to top, var(--color-bg) 0%, transparent 60%), linear-gradient(to bottom, rgba(6,10,22,0.7) 0%, transparent 50%); } .page-header__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; } .page-header::before{content:"";position:absolute;inset:0 0 auto 0;height:60%;pointer-events:none; background:linear-gradient(180deg,rgba(79,120,255,.06),transparent 70%);} .page-eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-primary);text-shadow:0 1px 3px rgba(0,0,0,0.8);margin-bottom:var(--sp-2);display:block;} .page-header h1{font-family:var(--font-display);font-weight:600;text-transform:uppercase; font-size:clamp(34px,4.6vw,64px);line-height:1.02;letter-spacing:-0.018em;margin:0 0 var(--sp-3) 0; color:var(--text-primary);text-wrap:balance;} .page-header .body-lg{max-width:var(--measure-prose);} .page-crumb{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary);text-shadow:0 1px 3px rgba(0,0,0,0.8);margin-bottom:var(--sp-4);flex-wrap:wrap;} .page-crumb a{color:var(--text-primary);text-shadow:0 1px 3px rgba(0,0,0,0.8);transition:color var(--dur-hover) ease;} .page-crumb a:hover{color:var(--accent-signal);} .page-crumb .sep{color:var(--border-mid);} .page-crumb .current{color:var(--text-primary);} /* ============ HERO (home page only) ============ The product is the composition. A real, cut-out photograph of Agni-Strike (extracted from the official brochure) is placed large and off-center as the one dominant object; typography lives in the negative space beside it rather than covering it. Hierarchy: 1 product, 2 headline, 3 sentence, 4 CTA, 5 secondary (About + product index, quiet, bottom edge). No HUD, no radar, no doc-metadata chrome — restraint carries the premium feel, not decoration. */ /* padding-top:120px — reserves clearance under the fixed nav (68px) plus a deliberate editorial margin; not a --sp-N value because it's sized to the nav's own height, not a content-rhythm gap. Reused verbatim by .page-header/.product-hero below for the same reason (same fixed nav clearance requirement). */ .hero{position:relative;isolation:isolate;min-height:100vh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;padding-top:120px;} .hero-canvas{position:relative;z-index:2;width:100%;padding-bottom:var(--sp-7);} .hero-seq{opacity:0;transform:translateY(22px);transition:opacity 1.1s var(--ease-out),transform 1.1s var(--ease-out);} .hero-loaded .hero-seq{opacity:1;transform:translateY(0);} noscript .hero-seq{opacity:1;transform:none;} /* Shared positioning frame: the object is centered against the copy block's own height (not an independent viewport percentage), so the two masses always read as one balanced composition regardless of copy length or viewport size. */ .hero-main{position:relative;width:100%;} /* The object — real photography, isolated from its source background, given a restrained cinematic grade (desaturated, cooled toward the brand's graphite/ navy register) so bright brochure-photo colors read as engineered, not toy-like. A soft bottom fade grounds it into the canvas instead of leaving a hard edge. */ /* Width is capped three ways: 58vw and 920px as the new primary scale to improve compositional balance and overlap with negative space, plus a viewport-height-derived ceiling. 180px = the revised vertical budget (accounting for hero-index and safe zones). 1.1192 = source image aspect ratio (1080/965). The inner max() keeps a 360px floor. */ /* right:-4%/bottom:-7% are a deliberate viewport-relative bleed position, increased slightly to offset the larger image scale so the optical center remains balanced and grounded. Do not convert to --sp-N or replace with a center-anchor. */ .hero-object{position:absolute;isolation:isolate;z-index:1;right:-4%;bottom:-7%; width:min(58vw, 920px, max(360px, calc((100vh - 180px) * 1.1192))); pointer-events:none;user-select:none; -webkit-mask-image:linear-gradient(to bottom,#000 88%,transparent 100%); mask-image:linear-gradient(to bottom,#000 88%,transparent 100%);} .hero-object img{width:100%;height:auto;display:block; filter:drop-shadow(-15px 25px 45px rgba(0,0,0,0.55)) contrast(1.05) saturate(0.9) brightness(0.98); transform:translateY(10px);transition:transform 1.4s var(--ease-out);} .hero-loaded .hero-object img{transform:translateY(0);} /* inset percentages bleed this ambient glow well past the object's own box on every side. Updated to use a multi-stop radial gradient for a distinct hotspot that fades into cinematic ambient light. */ .hero-object::after{content:"";position:absolute;inset:-30% -30% -10%;z-index:-1; background:radial-gradient(closest-side,rgba(110,170,255,.25) 0%, rgba(60,110,220,.1) 40%, transparent 80%); opacity:0;transition:opacity 1.6s ease .3s;} .hero-loaded .hero-object::after{opacity:1;} .hero-copy{position:relative;max-width:600px;} .hero-tag{display:inline-block;font-family:var(--font-mono);font-size:12px;font-weight:500; letter-spacing:.22em;text-transform:uppercase;color:var(--accent-signal);margin-bottom:var(--sp-3);} .hero-headline{font-family:var(--font-display);font-weight:600;letter-spacing:-0.015em; font-size:clamp(32px,4vw,58px);line-height:1.08;color:var(--text-primary);margin:0 0 var(--sp-3);text-wrap:balance;} /* 38ch is intentional, not var(--measure-prose): this is a single-line editorial tagline under a huge headline, not a body paragraph — it should break early. */ .hero-brief{font-size:16px;line-height:1.6;color:var(--text-secondary);max-width:38ch;margin:0 0 var(--sp-4);} /* CTA — solid, flat, machined. Its own class; never touches .btn/.btn-primary so the sitewide button system is untouched by this page-specific treatment. */ /* gap:12px is deliberately less than the var(--sp-2)=16px hover state below, so the arrow visibly steps out on hover — the two values are a paired interaction detail, not independent spacing choices. padding:18px 28px was visually tuned for this specific button and already verified (see CONTINUATION.md) — left as a deliberately-measured value rather than rounded to --sp-2/--sp-3, to avoid re-tuning a working control. */ .hero-cta{display:inline-flex;align-items:center;gap:12px;background:var(--text-primary);color:var(--surface-primary); font-family:var(--font-mono);font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase; padding:18px 28px;border-radius:0;transition:background-color var(--dur-hover) ease,gap var(--dur-hover) ease;} .hero-cta:hover{background-color:#fff;gap:var(--sp-2);} .hero-cta span{transition:transform var(--dur-hover) ease;} /* Secondary information — About + the five systems — preserved, real links, quietly present at the very bottom edge rather than competing for attention. */ .hero-index{border-top:1px solid var(--border-hairline);position:relative;z-index:2; background:linear-gradient(180deg,rgba(9,15,30,.72),rgba(6,10,22,.6));backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);} /* gap:28px sits exactly between --sp-3(24) and --sp-4(32) with no clear "nearest" token — kept as its own deliberate value for this link row rather than an arbitrary round. Vertical padding only — horizontal comes from .canvas so the row stays on the site grid. */ .hero-index-inner{display:flex;flex-wrap:wrap;gap:28px;padding-top:var(--sp-2);padding-bottom:var(--sp-2);} .hero-index-inner a{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase; color:var(--text-faint);transition:color var(--dur-hover) ease;} .hero-index-inner a:first-child{color:var(--text-secondary);padding-right:28px;border-right:1px solid var(--border-hairline);} .hero-index-inner a:hover{color:var(--text-primary);} /* ============ SECTIONS ============ */ .section{padding:var(--sp-8) 0;position:relative;scroll-margin-top:80px;} .section-header{max-width:860px;margin-bottom:var(--sp-6);} .section-header h2{margin-bottom:var(--sp-3);} .section-header .body-lg{max-width:var(--measure-prose);} /* Capabilities / product-card grid — engineering table (used for Primary Products) */ .cap-table{position:relative;border:1px solid var(--border-hairline);display:grid;grid-template-columns:repeat(5,1fr); background:linear-gradient(180deg,rgba(18,29,56,.55),rgba(10,17,36,.32)); box-shadow:inset 0 1px 0 rgba(255,255,255,.035);} .cap-table::before{content:"TBL. 01 — PRIMARY PRODUCTS";position:absolute;top:-9px;left:24px;z-index:1;background:var(--surface-primary);padding:0 10px;font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;color:var(--text-faint);} .cap-table .cap-card,.contact-grid .contact-mod{opacity:0;transform:translateY(16px); transition:opacity .6s var(--ease-out),transform .6s var(--ease-out),background var(--dur-hover) ease;} .cap-table.in-view .cap-card,.contact-grid.in-view .contact-mod{opacity:1;transform:translateY(0);} .cap-table.in-view .cap-card:nth-child(2){transition-delay:.08s;} .cap-table.in-view .cap-card:nth-child(3){transition-delay:.16s;} .cap-table.in-view .cap-card:nth-child(4){transition-delay:.24s;} .cap-table.in-view .cap-card:nth-child(5){transition-delay:.32s;} .contact-grid.in-view .contact-mod:nth-child(2){transition-delay:.07s;} .contact-grid.in-view .contact-mod:nth-child(3){transition-delay:.14s;} .contact-grid.in-view .contact-mod:nth-child(4){transition-delay:.21s;} .cap-card{position:relative;display:flex;flex-direction:column;gap:14px;padding:36px 28px 30px;border-left:1px solid var(--border-hairline);min-height:350px;overflow:hidden; transition:opacity .6s var(--ease-out),transform .6s var(--ease-out),background-color var(--dur-hover) ease,box-shadow var(--dur-hover) ease;} .cap-card::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.045) 50%,transparent 58%); transform:translateX(-130%);transition:transform 1.1s var(--ease-out);} .cap-card:hover::after{transform:translateX(130%);} .cap-card:first-child{border-left:none;} .cap-card:hover,.cap-card:focus-within{ background:radial-gradient(440px 280px at 50% 0%,rgba(79,120,255,.075),transparent 72%),var(--surface-secondary); box-shadow:inset 0 0 0 1px rgba(79,120,255,.14),inset 0 1px 0 rgba(255,255,255,.05);} .cap-idx{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;color:var(--text-faint);transition:color var(--dur-hover) ease;} .cap-card:hover .cap-idx{color:var(--accent-signal);} .cap-icon-wrap{position:relative;width:44px;height:44px;display:flex;align-items:center;justify-content:center;margin:4px 0 2px;} .cap-icon-wrap::before,.cap-icon-wrap::after{content:"";position:absolute;width:9px;height:9px;border-color:var(--border-mid);border-style:solid;border-width:0;transition:border-color var(--dur-hover) ease;} .cap-icon-wrap::before{top:0;left:0;border-top-width:1px;border-left-width:1px;} .cap-icon-wrap::after{bottom:0;right:0;border-bottom-width:1px;border-right-width:1px;} .cap-card:hover .cap-icon-wrap::before,.cap-card:hover .cap-icon-wrap::after{border-color:var(--accent-signal);} .cap-icon{width:26px;height:26px;color:var(--text-secondary);transition:color var(--dur-hover) ease;} .cap-card:hover .cap-icon{color:var(--accent-signal);} .cap-card h3{font-size:19px;} .cap-card p{font-size:14px;line-height:1.7;margin:0;} .cap-specificity{color:var(--text-secondary);font-size:13px;line-height:1.7;max-height:0;opacity:0;overflow:hidden; transition:max-height .25s ease,opacity .25s ease,margin-top .25s ease,padding-top .25s ease;margin-top:0;border-top:1px solid transparent;padding-top:0;} .cap-card:hover .cap-specificity,.cap-card:focus-within .cap-specificity{max-height:130px;opacity:1;margin-top:10px;border-top:1px solid var(--border-hairline);padding-top:12px;} .cap-learn{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-signal);margin-top:auto;display:flex;align-items:center;gap:8px;opacity:.6;transition:opacity var(--dur-hover) ease;} .cap-learn .a{transition:transform var(--dur-hover) ease;} .cap-card:hover .cap-learn{opacity:1;} .cap-card:hover .cap-learn .a{transform:translateX(4px);} .section-footer-row{margin-top:var(--sp-4);display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);flex-wrap:wrap;} .mono-note{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.04em;color:var(--text-faint);} .link-arrow{position:relative;font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-signal);display:inline-flex;align-items:center;gap:8px;line-height:1.5;} .link-arrow::before{content:"";position:absolute;inset:-8px;} .link-arrow .a{transition:transform var(--dur-hover) ease;} .link-arrow:hover .a{transform:translateX(4px);} /* ============ TECHNOLOGY & CAPABILITY AREAS (secondary tier, lighter treatment) ============ */ .capgrid-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-3);flex-wrap:wrap;margin:var(--sp-6) 0 var(--sp-4);} .capgrid-head h3{font-size:18px;} .capgrid-head .mono-tag{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;color:var(--text-faint);text-transform:uppercase;} .capability-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border-hairline);border:1px solid var(--border-hairline);} .capability-grid .capability-item{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out),background-color var(--dur-hover) ease;} .capability-grid.in-view .capability-item{opacity:1;transform:translateY(0);} .capability-grid.in-view .capability-item:nth-child(2){transition-delay:.08s;} .capability-grid.in-view .capability-item:nth-child(3){transition-delay:.16s;} .capability-grid.in-view .capability-item:nth-child(4){transition-delay:.24s;} .capability-item{background:var(--surface-primary);padding:26px 22px;display:flex;flex-direction:column;gap:10px;transition:background-color var(--dur-hover) ease;} .capability-item:hover{background-color:var(--surface-secondary);} .capability-item h4{font-family:var(--font-display);font-size:15px;font-weight:600;color:var(--text-primary);margin:0;letter-spacing:-0.005em;} .capability-item ul{display:flex;flex-direction:column;gap:6px;} .capability-item li{font-size:12.5px;line-height:1.6;color:var(--text-secondary);padding-left:14px;position:relative;} .capability-item li::before{content:"—";position:absolute;left:0;color:var(--text-faint);} /* ============ FEATURED (flagship product) ============ */ .featured{position:relative;scroll-margin-top:80px;padding:var(--sp-8) 0;border-top:1px solid var(--border-hairline);border-bottom:1px solid var(--border-hairline);overflow:hidden; background:linear-gradient(180deg,#0A1224 0%,#0E1730 46%,#081020 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.03),inset 0 -1px 0 rgba(0,0,0,.5);} .featured::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5; background-image:linear-gradient(var(--border-hairline) 1px,transparent 1px),linear-gradient(90deg,var(--border-hairline) 1px,transparent 1px); background-size:72px 72px; -webkit-mask-image:radial-gradient(ellipse 70% 60% at 38% 45%,#000 0%,transparent 75%); mask-image:radial-gradient(ellipse 70% 60% at 38% 45%,#000 0%,transparent 75%);} .featured::after{content:"";position:absolute;left:4%;top:16%;width:min(680px,60vw);height:480px;z-index:-1; background:radial-gradient(closest-side,rgba(79,120,255,.10),transparent 72%);filter:blur(8px);pointer-events:none;} .featured .canvas{position:relative;z-index:1;} .featured-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:var(--sp-6);gap:var(--sp-4);flex-wrap:wrap;} .featured-head h2{max-width:15ch;} .featured-head .mono-ref{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--text-secondary);text-transform:uppercase;text-align:right;line-height:2.1;} .featured-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:var(--sp-6);align-items:start;} .diagram-frame{border:1px solid var(--border-mid);padding:40px 32px 28px;position:relative; background:linear-gradient(180deg,rgba(10,17,36,.88),rgba(6,10,22,.62)); box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 30px 70px -34px rgba(0,0,0,.65);} .diagram-frame::after{content:"SVX-AGS-001";position:absolute;bottom:-8px;right:24px;background:var(--surface-secondary);padding:0 10px;font-family:var(--font-mono);font-size:9px;letter-spacing:.18em;color:var(--text-faint);} .diagram-frame::before{content:"FIG. 01";position:absolute;top:-9px;left:24px;background:var(--surface-secondary);padding:0 10px;font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;color:var(--text-faint);} .diagram-ruler{display:flex;justify-content:space-between;margin-bottom:22px;} .diagram-ruler span{width:1px;height:6px;background:var(--border-mid);} .pipeline-svg{width:100%;height:auto;} .stage-box{opacity:.22;transition:opacity .55s var(--ease-inout);} .stage-box.on{opacity:1;} .stage-label{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;} .stage-sub{font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;} .pipeline-line{stroke-dasharray:400;stroke-dashoffset:400;transition:stroke-dashoffset .7s var(--ease-inout);} .pipeline-line.on{stroke-dashoffset:0;filter:drop-shadow(0 0 2px rgba(79,120,255,.4));} .stage-dot{opacity:.25;transition:opacity .5s ease,filter .5s ease;} .stage-dot.on{opacity:1;filter:drop-shadow(0 0 6px rgba(79,120,255,.6));} .stage-dot.on[data-stage="3"]{filter:drop-shadow(0 0 8px rgba(201,151,58,.65));} .diagram-caption{font-family:var(--font-mono);font-size:11px;color:var(--text-faint);margin-top:22px;letter-spacing:.06em;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;text-transform:uppercase;} /* Body paragraphs in .featured-copy have no rule of their own and simply inherit var(--measure-prose) from the base p{} rule — same pattern as .sys-copy p above, noted here for the same reason (this is the flagship's equivalent of that column). */ /* 36ch, not var(--measure-prose): pull-quote/highlight statement, same accent pattern as .sys-thesis — deliberately narrower than a body paragraph. */ .featured-copy .highlight{font-family:var(--font-serif);font-style:italic;font-size:23px;max-width:36ch;font-weight:400;color:var(--text-primary); border-top:2px solid var(--accent-alert);padding-top:16px;margin:var(--sp-4) 0;line-height:1.45;} .featured-copy blockquote{margin:var(--sp-4) 0;padding:0 0 0 22px;border-left:1px solid var(--border-mid); font-family:var(--font-serif);font-style:italic;font-size:20px;color:#C9D3E3;line-height:1.5;} .featured-copy blockquote cite{display:block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;color:var(--text-faint);margin-top:12px;font-style:normal;text-transform:uppercase;} .featured-ctas{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-4);} .spec-table{width:100%;border-collapse:collapse;table-layout:fixed;margin-top:var(--sp-4);border-top:1px solid var(--border-mid);} .spec-table th,.spec-table td{text-align:left;padding:13px 0;border-bottom:1px solid var(--border-hairline);vertical-align:top;font-family:var(--font-mono);font-size:12.5px;letter-spacing:.02em;line-height:1.55;} .spec-table th{color:var(--text-secondary);font-weight:400;text-transform:uppercase;letter-spacing:.09em;font-size:11px;padding-right:20px;width:52%;} .spec-table td{color:var(--text-primary);word-break:break-word;} .spec-table tbody tr{transition:background-color var(--dur-hover) ease;} .spec-table tbody tr:hover{background-color:rgba(79,120,255,.05);} .spec-table tbody tr:hover th{color:var(--text-primary);} .featured-micro{font-family:var(--font-mono);font-size:11px;letter-spacing:.03em;color:var(--text-secondary);margin-top:var(--sp-2);} /* ============ PRODUCT SHOWCASE (SEC 03 — flagship + editorial system panels) ============ Architecture: one dominant flagship spread (.sys-flagship, reuses .featured) followed by four alternating full-width "chapters" (.sys-panel) — never a grid of equal cards. Hierarchy comes from scale (flagship > panel), typography (huge ghost index numerals), and rhythm (alternating image/copy side, alternating panel tint). Technology & Capability Areas keeps its lighter grid treatment below — those are capability categories, not flagship products. */ /* Bottom padding matches the sub-tier's weight (sp-7, one step under the section's sp-8 top) — without it the capability grid's footer row sat ~10px above the next band's border while that band's own padding put 128px below it: a lopsided seam. */ .showcase{position:relative;padding:var(--sp-8) 0 var(--sp-7);} /* padding-top:12px sits exactly between --sp-1(8) and --sp-2(16) with no clear "nearest" token — kept deliberate rather than an arbitrary round. gap converted to --sp-2 (exact match). */ .sys-mark{display:flex;justify-content:space-between;gap:var(--sp-2);padding-top:12px;margin-bottom:var(--sp-5); font-family:var(--font-mono);font-size:10.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase; color:var(--text-faint);border-top:1px solid var(--border-hairline);} /* margin-right:10px — tight run-in-label gap, same deliberately-below-scale pattern as .pcat-head .l b in products.css. */ .sys-mark b{color:var(--accent-signal);font-weight:500;margin-right:10px;} .sys-panels{display:flex;flex-direction:column;} .sys-panel{position:relative;padding:var(--sp-7) 0;border-top:1px solid var(--border-hairline);overflow:hidden;} .sys-panel-lead{padding:var(--sp-8) 0;background:rgba(14,23,48,.2);border-bottom:1px solid var(--border-hairline);} .sys-panels .sys-panel:last-child{border-bottom:1px solid var(--border-hairline);} .sys-panel:nth-of-type(even){background:rgba(14,23,48,.35);} .sys-panel-canvas{position:relative;} /* Positioned to clear the mono label row above it (sys-mark) so the watermark never overlaps small text. top:56px clears the label row's real rendered height — a measured constant, not a spacing-rhythm token. */ .sys-idx-mark{position:absolute;top:56px;font-family:var(--font-display);font-weight:700;line-height:.78; font-size:clamp(80px,10vw,146px);color:transparent;-webkit-text-stroke:1.5px rgba(160,178,214,.38); letter-spacing:-0.03em;pointer-events:none;user-select:none;z-index:0;} /* Panel numerals live INSIDE .sys-copy (see index.html) and anchor to the copy column's top-RIGHT corner — the one placement that reads identically on both flip directions. The old canvas-anchored flip rules put flip="0" numerals at the column's LEFT edge, exactly where the headline paints, burying ~85% of the glyph (measured at 1440); flip="1" panels always read cleanly because their numeral sat in the corner the headline never reaches. This unifies all four panels on that proven composition. z-index:-1 paints the numeral behind the column's own text (inside .sys-panel-grid's stacking context), never over it. */ .sys-panel .sys-idx-mark{right:0;z-index:-1;} .sys-idx-mark-flagship{right:var(--sp-4);} .sys-panel-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--sp-6);align-items:center;} .sys-panel-grid .sys-copy{order:0;} .sys-panel-grid .sys-visual{order:1;} .sys-panel[data-flip="1"] .sys-panel-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);} .sys-panel[data-flip="1"] .sys-panel-grid .sys-copy{order:1;} .sys-panel[data-flip="1"] .sys-panel-grid .sys-visual{order:0;} /* position:relative — anchors the panel's .sys-idx-mark to this column (see above). */ .sys-copy{position:relative;} /* max-width reserves the column's top-right corner for the ghost numeral (163px rendered at 1440 + breathing room): the headline wraps before it can reach the glyph, so the two can never collide at any desktop width. Reset at ≤1023 where the numeral goes static. */ .sys-copy h3{font-family:var(--font-display);font-weight:600;text-transform:uppercase;max-width:calc(100% - 175px); font-size:clamp(28px,3.4vw,46px);line-height:1.04;letter-spacing:-0.015em;margin:0 0 var(--sp-2);text-wrap:balance;} .sys-copy h3 em{font-family:var(--font-serif);font-style:italic;font-weight:400;font-size:1.02em;letter-spacing:0; text-transform:none;color:var(--text-primary);} /* 36ch, not var(--measure-prose): a one-to-two-line italic thesis statement under the headline, same "editorial accent, not a paragraph" pattern as .hero-brief. */ .sys-thesis{font-family:var(--font-serif);font-style:italic;font-weight:400;font-size:19px;color:var(--text-primary); border-top:2px solid var(--accent-alert);padding-top:12px;margin:var(--sp-3) 0;max-width:36ch;line-height:1.45;} /* max-width inherited from the base p{} rule (var(--measure-prose)) — made explicit here because DESIGN_AUDIT.md §2.3 flagged this rule as having no measure of its own; it's stated explicitly so the inheritance isn't accidental/silent. In practice the 5fr grid column is already narrower than 62ch at most viewport widths, so this mostly matters at very wide viewports where the column itself would otherwise exceed it. */ .sys-copy p{font-size:14.5px;max-width:var(--measure-prose);} .sys-copy .link-arrow{margin-top:var(--sp-3);} .sys-spec-strip{display:flex;gap:var(--sp-4) var(--sp-5);flex-wrap:wrap;margin:var(--sp-3) 0 var(--sp-4); padding-top:var(--sp-3);border-top:1px solid var(--border-hairline);} /* gap:4px — micro-spacing between a stacked value/label pair, deliberately below the --sp-1(8px) floor so the two lines of one spec read as a single unit. */ .sys-spec{display:flex;flex-direction:column;gap:4px;} .sys-spec .v{font-family:var(--font-mono);font-size:16px;font-weight:500;color:var(--text-primary); font-variant-numeric:tabular-nums;letter-spacing:.01em;white-space:nowrap;} .sys-spec .k{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);white-space:nowrap;} .sys-visual{position:relative;} /* padding:34px 26px 24px is tuned to balance the SVG diagram inside this frame against the ::before/::after "chip" labels that straddle its border — not a --sp-N rhythm gap. The ::before/::after top/bottom/left/right offsets below are similarly precise: they position each label chip so it visually straddles the frame's 1px border, a technique that needs exact half-chip-height offsets, not scale-token spacing. */ .sys-diagram-frame{position:relative;border:1px solid var(--border-mid);padding:34px 26px 24px; background:linear-gradient(180deg,rgba(10,17,36,.86),rgba(6,10,22,.6)); box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 26px 60px -30px rgba(0,0,0,.6);} .sys-diagram-frame::before{content:attr(data-fig);position:absolute;top:-9px;left:22px;background:var(--surface-secondary); padding:0 10px;font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;color:var(--text-faint);} .sys-diagram-frame::after{content:attr(data-doc);position:absolute;bottom:-8px;right:22px;background:var(--surface-secondary); padding:0 10px;font-family:var(--font-mono);font-size:9px;letter-spacing:.18em;color:var(--text-faint);} .sys-svg{width:100%;height:auto;display:block;} .sys-label{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;} .sys-sub{font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;} .sys-annot{opacity:.28;transition:opacity .6s var(--ease-inout);} .sys-annot.on{opacity:1;} /* ---- HUD host: cursor-tracked glow + targeting reticle (flagship diagram + all system panels) ---- Signature interaction tying the whole showcase to the brand's own detect/track/neutralize language — the same reticle+tag idiom used in the hero radar reappears here, driven by the visitor's own cursor as they move through each system's diagram. */ .hud-host{position:relative;--rx:50%;--ry:38%;} .hud-glow{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s ease;z-index:0; background:radial-gradient(240px 240px at var(--rx) var(--ry),rgba(79,120,255,.18),transparent 72%);} .hud-host:hover .hud-glow,.hud-host:focus-within .hud-glow{opacity:1;} .hud-reticle{position:absolute;left:var(--rx);top:var(--ry);width:0;height:0;pointer-events:none;opacity:0; transition:opacity .3s ease;z-index:2;} .hud-host:hover .hud-reticle,.hud-host:focus-within .hud-reticle{opacity:1;} .hud-reticle::before,.hud-reticle::after{content:"";position:absolute;background:var(--accent-signal); box-shadow:0 0 6px rgba(79,120,255,.7);} .hud-reticle::before{width:24px;height:1px;top:0;left:-12px;} .hud-reticle::after{width:1px;height:24px;left:0;top:-12px;} .hud-reticle .tag{position:absolute;top:15px;left:15px;white-space:nowrap;font-family:var(--font-mono);font-size:9.5px; letter-spacing:.1em;color:var(--accent-signal);background:rgba(6,10,22,.85);border:1px solid rgba(79,120,255,.4);padding:3px 7px;} @media (hover:none){.hud-glow,.hud-reticle{display:none!important;}} /* ============ COMPANY PAGE (About / Mission / Vision / Philosophy) ============ */ .company-section{padding:var(--sp-7) 0;border-top:1px solid var(--border-hairline);} .company-section:first-of-type{border-top:none;} .company-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--sp-6);align-items:start;} .company-label{position:sticky;top:100px;} .company-label .mono-tag{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-signal);display:block;margin-bottom:10px;} .company-label h2{font-size:clamp(26px,2.6vw,38px);} .company-body p{max-width:var(--measure-prose);} /* 40ch, not var(--measure-prose): same pull-quote accent pattern as .sys-thesis. */ .company-body .highlight{font-family:var(--font-serif);font-style:italic;font-size:22px;font-weight:400;color:var(--text-primary); border-top:2px solid var(--accent-alert);padding-top:16px;margin:var(--sp-4) 0;line-height:1.5;max-width:40ch;} .triad{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5);text-align:left;} .triad-item{position:relative;padding-top:var(--sp-3);border-top:1px solid var(--border-hairline);} .triad-item .t-idx{position:absolute;top:-13px;left:0;background:var(--surface-primary);padding-right:14px;font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;color:var(--accent-signal);} .triad-item strong{display:block;font-family:var(--font-display);font-size:18px;font-weight:600;color:var(--text-primary);margin-bottom:10px;letter-spacing:-0.01em;} .triad-item p{font-size:14px;line-height:1.75;margin:0;} .company-tagline{font-family:var(--font-serif);font-style:italic;font-size:20px;color:var(--text-primary);margin-top:var(--sp-4);} /* ============ PROOF / ACHIEVEMENTS & MEDIA ============ */ .proof{padding:var(--sp-8) 0;border-top:1px solid var(--border-hairline);border-bottom:1px solid var(--border-hairline); background:linear-gradient(100deg,#0C1428 0%,#101A32 54%,#0A1122 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.03);} .proof-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--sp-6);align-items:start;} .proof-intro h2{font-size:clamp(24px,2.5vw,34px);max-width:22ch;} /* 46ch, not var(--measure-prose): sits in the narrow 5fr half of .proof-grid's asymmetric split, beside the .proof-stats column — matches its own column, not the sitewide prose measure. */ .proof-intro p{margin-top:var(--sp-2);font-size:16px;max-width:46ch;} .proof-stats{display:grid;grid-template-columns:repeat(3,auto);gap:var(--sp-6);align-content:start;} .stat{border-left:1px solid var(--border-mid);padding-left:24px;} .stat-top{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;} .stat-num{font-family:var(--font-display);font-size:clamp(42px,4.2vw,62px);font-weight:600;color:var(--text-primary);line-height:1;letter-spacing:-0.02em;font-variant-numeric:tabular-nums;} .stat-unit{font-family:var(--font-mono);font-size:11.5px;font-weight:500;color:var(--accent-signal);letter-spacing:.06em;white-space:nowrap;} /* 220px, not var(--measure-prose): a short mono caption under a single stat number, sized to the stat column, not flowing prose. */ .stat-label{font-family:var(--font-mono);font-size:11px;letter-spacing:.02em;color:var(--text-secondary);margin-top:14px;max-width:220px;line-height:1.7;} .proof-note{grid-column:1/-1;margin-top:var(--sp-2);font-size:11.5px;line-height:1.9;color:var(--text-secondary);border-top:1px solid var(--border-hairline);padding-top:var(--sp-3);font-family:var(--font-mono);letter-spacing:.04em;} .media-row{grid-column:1/-1;margin-top:var(--sp-6);padding-top:var(--sp-5);border-top:1px solid var(--border-hairline);} .media-row-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-3);flex-wrap:wrap;margin-bottom:var(--sp-4);} .media-row-head h3{font-size:19px;} .media-badges{display:flex;gap:var(--sp-4);flex-wrap:wrap;margin-bottom:var(--sp-4);} .media-badge{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--text-secondary);text-transform:uppercase;} .media-badge b{display:block;font-family:var(--font-display);font-size:22px;color:var(--text-primary);letter-spacing:-0.01em;font-weight:600;margin-bottom:2px;} .clippings{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--sp-3);} .clipping{border:1px solid var(--border-hairline);padding:22px 20px;background:rgba(14,23,48,.4);opacity:0;transform:translateY(16px); transition:opacity .6s var(--ease-out),transform .6s var(--ease-out),border-color var(--dur-hover) ease,background-color var(--dur-hover) ease;} .media-row.in-view .clipping{opacity:1;transform:translateY(0);} .media-row.in-view .clipping:nth-child(2){transition-delay:.08s;} .media-row.in-view .clipping:nth-child(3){transition-delay:.16s;} .clipping:hover{border-color:var(--border-mid);background-color:var(--surface-secondary);} .clipping .src{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-signal);display:block;margin-bottom:10px;} .clipping p{font-size:13.5px;line-height:1.65;margin:0;color:#C9D3E3;} .clipping p.excerpt{font-family:var(--font-serif);font-style:italic;font-size:16px;color:var(--text-primary);margin-bottom:8px;line-height:1.5;} /* ============ PROGRAM STATUS (homepage) ============ State is driven entirely by the html.ps-hidden / html.ps-countdown / html.ps-released class set in (see window.__psApplyStateClass) — resolved before paints, so switching states never shifts layout. No class at all (JS never ran) is the no-JS fallback: only .ps-static-block is visible by default. Visual weight intentionally matches the flagship section (.featured) — full-bleed band, large padding, masked technical grid backdrop — rather than a bordered content panel, so it reads as an official programme milestone, not a settings/config block. */ .program-status{position:relative;scroll-margin-top:80px;padding:var(--sp-8) 0; border-top:1px solid var(--border-hairline);border-bottom:1px solid var(--border-hairline);overflow:hidden; background:linear-gradient(180deg,#0A1224 0%,#0E1730 46%,#081020 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.03),inset 0 -1px 0 rgba(0,0,0,.5);} .program-status::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.45; background-image:linear-gradient(var(--border-hairline) 1px,transparent 1px),linear-gradient(90deg,var(--border-hairline) 1px,transparent 1px); background-size:68px 68px; -webkit-mask-image:radial-gradient(ellipse 62% 55% at 76% 42%,#000 0%,transparent 75%); mask-image:radial-gradient(ellipse 62% 55% at 76% 42%,#000 0%,transparent 75%);} .program-status .canvas{position:relative;z-index:1;} html.ps-hidden .program-status{display:none;} .pgm-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--sp-6);align-items:center;} .pgm-reveal-tag{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:12.5px;font-weight:500; letter-spacing:.14em;text-transform:uppercase;color:var(--accent-signal);border:1px solid rgba(79,120,255,.4); padding:8px 14px;background:rgba(79,120,255,.06);margin-bottom:var(--sp-3);} .pgm-reveal-dot{width:6px;height:6px;background:var(--color-brand-hover);flex:none;} .ps-eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-secondary);display:block;margin-bottom:var(--sp-2);} .pgm-product-name{font-family:var(--font-display);font-weight:600;font-size:clamp(30px,3.4vw,48px);letter-spacing:-0.015em; color:var(--text-primary);margin:0 0 var(--sp-4) 0;text-wrap:balance;} .ps-static-block{display:block;} html.ps-countdown .ps-static-block,html.ps-released .ps-static-block{display:none;} .ps-countdown-block{display:none;} html.ps-countdown .ps-countdown-block{display:block;} .ps-clock{display:flex;align-items:stretch;border:1px solid var(--border-mid);width:max-content; background:linear-gradient(180deg,rgba(14,23,48,.5),rgba(6,10,22,.3));} .ps-clock-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px; padding:18px 26px;border-left:1px solid var(--border-hairline);min-width:84px;} .ps-clock-cell:first-child{border-left:none;} .ps-num{font-family:var(--font-mono);font-size:clamp(28px,3.4vw,40px);font-weight:500;color:var(--text-primary); font-variant-numeric:tabular-nums;letter-spacing:.02em;line-height:1;} .ps-clock-label{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint);} .ps-released-block{display:none;align-items:center;gap:20px;flex-wrap:wrap;} html.ps-released .ps-released-block{display:flex;} .ps-status-tag{font-family:var(--font-mono);font-size:11.5px;font-weight:500;letter-spacing:.07em;text-transform:uppercase; color:var(--accent-alert);border:1px solid rgba(201,151,58,.4);padding:6px 12px;background:rgba(201,151,58,.06);} .ps-released-date{font-family:var(--font-mono);font-size:13px;color:var(--text-secondary);letter-spacing:.02em;} .pgm-teaser-frame{position:relative;display:block;width:100%;max-width:320px;margin-left:auto;aspect-ratio:4/5; border:1px solid var(--border-mid);background:#0A1428;overflow:hidden; box-shadow:0 26px 54px -30px rgba(0,0,0,.6);} .pgm-teaser-frame::before{content:"FIG. 02";position:absolute;top:-9px;left:16px;z-index:1;background:var(--surface-primary); padding:0 10px;font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;color:var(--text-faint);} .pgm-teaser-frame::after{content:"PGM-NXT-000";position:absolute;bottom:-8px;right:16px;z-index:1;background:var(--surface-primary); padding:0 10px;font-family:var(--font-mono);font-size:9px;letter-spacing:.18em;color:var(--text-faint);} .pgm-teaser-img{display:block;width:100%;height:100%;object-fit:cover;} .pgm-teaser-released{display:none;} html.ps-released .pgm-teaser-pending{display:none;} html.ps-released .pgm-teaser-released{display:block;} .pgm-visual-caption{display:flex;justify-content:space-between;gap:12px;width:100%;max-width:320px;margin-top:14px;margin-left:auto; font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;color:var(--text-faint);text-transform:uppercase;} /* ============ SERVICES ============ */ .services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;background:var(--border-hairline);border:1px solid var(--border-hairline);} .services-grid .service-card{opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out),background-color var(--dur-hover) ease;} .services-grid.in-view .service-card{opacity:1;transform:translateY(0);} .services-grid.in-view .service-card:nth-child(4n+2){transition-delay:.08s;} .services-grid.in-view .service-card:nth-child(4n+3){transition-delay:.16s;} .services-grid.in-view .service-card:nth-child(4n+4){transition-delay:.24s;} .service-card{background:var(--surface-primary);display:flex;flex-direction:column;transition:background-color var(--dur-hover) ease;overflow:hidden;} .service-card__visual { width: 100%; aspect-ratio: 16/9; overflow: hidden; background: var(--surface-secondary); } .service-card__visual img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out); display: block; } .service-card:hover .service-card__visual img { transform: scale(1.05); } .service-card__content { padding: 32px 26px; display: flex; flex-direction: column; gap: 12px; flex: 1; } .service-card:hover{background-color:var(--surface-secondary);} .service-idx{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;color:var(--text-faint);} .service-card:hover .service-idx{color:var(--accent-signal);} .service-card h3{font-size:18px;} .service-card p{font-size:14px;margin:0;line-height:1.7;} /* ============ PRODUCT DETAIL PAGE ============ */ .product-hero{position:relative;isolation:isolate;padding:168px 0 var(--sp-7);overflow:hidden;border-bottom:1px solid var(--border-hairline); background:linear-gradient(180deg,#0A1224 0%,#0C142A 60%,#081020 100%);} .product-hero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.4; background-image:linear-gradient(var(--border-hairline) 1px,transparent 1px),linear-gradient(90deg,var(--border-hairline) 1px,transparent 1px); background-size:64px 64px; -webkit-mask-image:radial-gradient(ellipse 65% 55% at 75% 30%,#000 0%,transparent 75%); mask-image:radial-gradient(ellipse 65% 55% at 75% 30%,#000 0%,transparent 75%);} .product-hero .canvas{position:relative;z-index:1;} .product-hero-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--sp-7);align-items:center;} .product-tag{font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-signal);margin-bottom:var(--sp-2);display:block;} .product-hero h1{font-family:var(--font-display);font-weight:600;text-transform:uppercase; font-size:clamp(34px,4.8vw,68px);line-height:1.0;letter-spacing:-0.018em;margin:0 0 var(--sp-3) 0;max-width:16ch; color:var(--text-primary);text-wrap:balance;} .product-hero .body-lg{max-width:var(--measure-prose);margin-bottom:var(--sp-4);} .product-badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:var(--sp-3);} .product-badge{font-family:var(--font-mono);font-size:11.5px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--accent-alert);border:1px solid rgba(201,151,58,.4);padding:6px 12px;background:rgba(201,151,58,.06);} /* ---------- Product hero: poster panel ---------- */ .product-hero-visual{display:flex;flex-direction:column;align-items:flex-end;max-width:340px;margin-left:auto;width:100%;} .poster-panel{all:unset;box-sizing:border-box;display:block;width:100%;max-width:340px;cursor:zoom-in;position:relative;} .poster-frame{position:relative;display:block;width:100%;aspect-ratio:210/297;border:1px solid var(--border-mid); background:#0E1730;box-shadow:0 26px 54px -30px rgba(0,0,0,.6); transition:transform var(--dur-hover) var(--ease-out),border-color var(--dur-hover) ease,box-shadow var(--dur-hover) ease;} .poster-panel:hover .poster-frame,.poster-panel:focus-visible .poster-frame{transform:scale(1.015);border-color:var(--accent-signal); box-shadow:0 32px 64px -28px rgba(0,0,0,.68);} .poster-frame img{display:block;width:100%;height:100%;object-fit:contain;background:#EEF0F1;} .poster-frame .p-corner{position:absolute;width:13px;height:13px;border-color:var(--accent-signal);border-style:solid;border-width:0; opacity:0;transition:opacity var(--dur-hover) ease;pointer-events:none;} .poster-panel:hover .p-corner,.poster-panel:focus-visible .p-corner{opacity:.85;} .poster-frame .p-corner.tl{top:-1px;left:-1px;border-top-width:2px;border-left-width:2px;} .poster-frame .p-corner.tr{top:-1px;right:-1px;border-top-width:2px;border-right-width:2px;} .poster-frame .p-corner.bl{bottom:-1px;left:-1px;border-bottom-width:2px;border-left-width:2px;} .poster-frame .p-corner.br{bottom:-1px;right:-1px;border-bottom-width:2px;border-right-width:2px;} .poster-caption{display:flex;justify-content:space-between;gap:12px;width:100%;max-width:340px;margin-top:14px; font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;color:var(--text-faint);text-transform:uppercase;} .poster-actions{display:flex;justify-content:space-between;align-items:center;gap:16px;width:100%;max-width:340px;margin-top:12px; padding-top:12px;border-top:1px solid var(--border-hairline);} .poster-view-trigger{all:unset;cursor:pointer;font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase; color:var(--accent-signal);display:inline-flex;align-items:center;gap:8px;} .poster-pdf-pending{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase; color:var(--text-faint);display:inline-flex;align-items:center;gap:8px;opacity:.55;cursor:not-allowed;} .poster-pdf-pending .pending-tag{font-size:9.5px;border:1px solid var(--border-mid);padding:2px 6px;letter-spacing:.1em;} /* ---------- Poster fullscreen viewer ---------- */ .poster-viewer{border:0;padding:0;margin:0;width:100vw;height:100vh;max-width:100vw;max-height:100vh; background:transparent;} .poster-viewer:not([open]){display:none;} .poster-viewer[open]{display:flex;align-items:center;justify-content:center;} .poster-viewer::backdrop{background:rgba(4,7,16,.94);} .poster-viewer-img{max-width:min(88vw,760px);max-height:86vh;width:auto;height:auto;object-fit:contain; border:1px solid var(--border-mid);background:#EEF0F1;box-shadow:0 50px 100px -30px rgba(0,0,0,.75);} .poster-viewer-caption{position:fixed;left:0;right:0;bottom:22px;text-align:center;color:var(--text-faint); font-size:11px;letter-spacing:.04em;} .poster-viewer-close{all:unset;position:fixed;top:22px;right:26px;width:38px;height:38px;display:flex;align-items:center; justify-content:center;border:1px solid var(--border-mid);color:var(--text-secondary);cursor:pointer; font-family:var(--font-mono);font-size:16px;transition:color var(--dur-hover) ease,border-color var(--dur-hover) ease;} .poster-viewer-close:hover{color:var(--text-primary);border-color:var(--accent-signal);} .product-body{padding:var(--sp-7) 0;} .product-layout{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--sp-7);align-items:start;} .product-overview h2{font-size:clamp(24px,2.4vw,32px);margin-bottom:var(--sp-3);} .overview-list{display:flex;flex-direction:column;gap:16px;margin-bottom:var(--sp-4);} .overview-list li{font-size:15.5px;line-height:1.75;color:var(--text-secondary);padding-left:26px;position:relative;} .overview-list li::before{content:"";position:absolute;left:0;top:9px;width:12px;height:1px;background:var(--color-brand-hover);} .overview-list li strong{color:var(--text-primary);font-weight:600;} .mission-callout{border:1px solid var(--border-hairline);border-left:none;padding:22px 24px;margin-top:var(--sp-4);background:rgba(14,23,48,.4);position:relative;} .mission-callout::before{content:"MISSION PROFILES";position:absolute;top:-9px;left:24px;background:var(--surface-primary);padding:0 10px;font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;color:var(--text-faint);} .mission-callout p{margin:0;font-size:14.5px;color:#C9D3E3;} .product-specs{position:sticky;top:100px;border:1px solid var(--border-mid);padding:32px 28px 28px; background:linear-gradient(180deg,rgba(10,17,36,.88),rgba(6,10,22,.62)); box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 30px 70px -34px rgba(0,0,0,.65);} .product-specs h3{font-size:16px;font-family:var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);margin-bottom:var(--sp-3);font-weight:500;} .product-specs .spec-table{margin-top:0;} .product-ctas{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-4);} .product-achievements{margin-top:var(--sp-6);padding-top:var(--sp-5);border-top:1px solid var(--border-hairline);} .product-achievements h3{font-size:16px;font-family:var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent-signal);margin-bottom:var(--sp-3);font-weight:500;} .achv-list{display:flex;flex-direction:column;gap:10px;} .achv-list li{font-size:13.5px;line-height:1.65;color:var(--text-secondary);padding-left:20px;position:relative;} .achv-list li::before{content:"→";position:absolute;left:0;color:var(--accent-alert);} .achv-list li strong{color:var(--text-primary);} .cross-link{padding:var(--sp-7) 0;border-top:1px solid var(--border-hairline);background:rgba(14,23,48,.3);} .cross-link-head{margin-bottom:var(--sp-4);} .cross-link-head h2{font-size:clamp(22px,2.2vw,28px);} .cross-link-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:var(--border-hairline);border:1px solid var(--border-hairline);} .cross-link-grid .cross-link-item{opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out),background-color var(--dur-hover) ease;} .cross-link-grid.in-view .cross-link-item{opacity:1;transform:translateY(0);} .cross-link-grid.in-view .cross-link-item:nth-child(2){transition-delay:.08s;} .cross-link-grid.in-view .cross-link-item:nth-child(3){transition-delay:.16s;} .cross-link-grid.in-view .cross-link-item:nth-child(4){transition-delay:.24s;} .cross-link-item{background:var(--surface-primary);padding:24px 22px;display:flex;flex-direction:column;gap:8px;transition:background-color var(--dur-hover) ease;} .cross-link-item:hover{background-color:var(--surface-secondary);} .cross-link-item .idx{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;color:var(--text-faint);} .cross-link-item:hover .idx{color:var(--accent-signal);} .cross-link-item h4{font-family:var(--font-display);font-size:15.5px;font-weight:600;color:var(--text-primary);margin:0;letter-spacing:-0.005em;} .cross-link-item span.go{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-signal);display:flex;align-items:center;gap:6px;margin-top:auto;opacity:.7;transition:opacity var(--dur-hover) ease;} .cross-link-item:hover span.go{opacity:1;} /* ============ SEGMENTED CONTACT ============ */ .contact-grid{position:relative;display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--border-hairline); background:linear-gradient(180deg,rgba(18,29,56,.55),rgba(10,17,36,.32)); box-shadow:inset 0 1px 0 rgba(255,255,255,.035);} .contact-grid::before{content:"RT. 01 — INQUIRY ROUTING";position:absolute;top:-9px;left:24px;z-index:1;background:var(--surface-primary);padding:0 10px;font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;color:var(--text-faint);} .contact-mod{position:relative;display:block;padding:40px 30px 34px;border-left:1px solid var(--border-hairline);min-height:230px;overflow:hidden;} .contact-mod::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.045) 50%,transparent 58%); transform:translateX(-130%);transition:transform 1.1s var(--ease-out);} .contact-mod:hover::after{transform:translateX(130%);} .contact-mod:first-child{border-left:none;} .contact-mod:hover,.contact-mod:focus-visible{ background:radial-gradient(440px 280px at 50% 0%,rgba(79,120,255,.075),transparent 72%),var(--surface-secondary); box-shadow:inset 0 0 0 1px rgba(79,120,255,.14),inset 0 1px 0 rgba(255,255,255,.05);} .contact-mod .mod-label{display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-faint);margin-bottom:22px;transition:color var(--dur-hover) ease;} .contact-mod:hover .mod-label{color:var(--accent-signal);} .contact-mod h3{font-size:20px;margin-bottom:10px;} .contact-mod p{font-size:14px;color:var(--text-secondary);transition:color var(--dur-hover) ease;margin:0;line-height:1.7;} .contact-mod:hover p{color:#C9D3E3;} .mod-arrow{position:absolute;top:36px;right:28px;font-family:var(--font-mono);color:var(--text-faint);transition:transform var(--dur-hover) ease,color var(--dur-hover) ease;} .contact-mod:hover .mod-arrow{transform:translate(4px,-4px);color:var(--accent-signal);} .contact-direct{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-4);margin-top:var(--sp-4);padding-top:var(--sp-3);border-top:1px solid var(--border-hairline);} .contact-direct .cd-label{display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-faint);margin-bottom:8px;} .contact-direct a,.contact-direct .cd-static{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.02em;color:var(--text-secondary);line-height:1.7;transition:color var(--dur-hover) ease;} .contact-qr-note{margin-top:var(--sp-3);font-family:var(--font-mono);font-size:11px;color:var(--text-faint);letter-spacing:.04em;} /* ============ FOOTER ============ */ .site-footer{padding:var(--sp-7) 0 0;border-top:1px solid var(--border-hairline);overflow:hidden;} .footer-grid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:var(--sp-5);padding-bottom:var(--sp-6);} .footer-brand .nav-logo{margin-bottom:var(--sp-3);} /* 270px, not var(--measure-prose): footer brand blurb, sized to its own grid column in the footer, not a flowing body paragraph. */ .footer-brand p{font-size:14px;max-width:270px;line-height:1.75;} .footer-tag{font-family:var(--font-mono)!important;font-size:10.5px!important;letter-spacing:.2em;text-transform:uppercase;color:var(--text-faint);margin-top:14px;} .footer-col h4{font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-faint);font-weight:500;margin:0 0 var(--sp-3) 0;} .footer-col a{display:block;font-size:14px;color:var(--text-secondary);padding:6px 0;transition:color var(--dur-hover) ease,transform var(--dur-hover) var(--ease-out);} .footer-col a:hover{transform:translateX(3px);color:var(--text-primary);} .footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:var(--sp-4);border-top:1px solid var(--border-hairline);flex-wrap:wrap;gap:var(--sp-2);} /* Legal microtext — same mono scale as .footer-social so the whole bottom row reads as one quiet legal strip instead of body copy beside microtext. */ .footer-bottom p{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint);margin:0;max-width:none;} .footer-social{display:flex;gap:var(--sp-4);} .footer-social a{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;color:var(--text-faint);text-transform:uppercase;padding:8px 0;display:inline-block;} .footer-social a:hover{color:var(--accent-signal);} /* Sized from the wordmark's measured glyph ratio (rendered width = 4.679 × font-size in Archivo 700 at -0.02em): 19.5vw keeps "STRAVEX" inside the canvas content box at every viewport ≥768, and the 287px cap makes it fill the 1344px canvas content width almost exactly from ~1472px up — grid-aligned on wide screens, never clipped on narrow ones (the old 20.5vw/320px overflowed and clipped asymmetrically at 1200–1700px and on phones). The ≤767 override re-runs the same math for the 32px mobile canvas padding. */ .footer-mark{font-family:var(--font-display);font-weight:700;text-transform:uppercase; font-size:clamp(60px,19.5vw,287px);line-height:.76;letter-spacing:-0.02em; color:#121D38;text-align:center;user-select:none;pointer-events:none; margin:var(--sp-5) 0 -0.13em;white-space:nowrap;} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;} /* Global atmosphere: cool key light top-right, ambient fill bottom-left, cinematic vignette */ .atmo{position:fixed;inset:0;pointer-events:none;z-index:var(--z-atmo); background: radial-gradient(1000px 640px at 80% -12%, rgba(79,120,255,.09), transparent 62%), radial-gradient(1300px 860px at -14% 112%, rgba(30,58,130,.16), transparent 62%), radial-gradient(160% 130% at 50% 42%, rgba(0,0,0,0) 58%, rgba(4,5,7,.32) 100%);} /* ============ RESPONSIVE ============ */ @media (max-width:1279px){ .canvas{padding-left:var(--sp-4);padding-right:var(--sp-4);} .nav-links{gap:18px;} .nav-links a{font-size:11px;} .cap-table{grid-template-columns:repeat(3,1fr);} .cap-card:nth-child(3n+1){border-left:none;} .cap-card:nth-child(n+4){border-top:1px solid var(--border-hairline);} .cap-card{min-height:300px;} .capability-grid{grid-template-columns:repeat(2,1fr);} .footer-grid{grid-template-columns:1fr 1fr 1fr;} .proof-stats{gap:var(--sp-5);} .company-grid{grid-template-columns:1fr;gap:var(--sp-4);} .company-label{position:static;} .triad{gap:var(--sp-4);} } @media (max-width:1180px){ .featured-grid,.product-layout,.product-hero-grid,.pgm-grid,.sys-panel-grid{grid-template-columns:1fr;gap:var(--sp-5);} .sys-panel-grid .sys-copy,.sys-panel-grid .sys-visual,.sys-panel[data-flip="1"] .sys-panel-grid .sys-copy,.sys-panel[data-flip="1"] .sys-panel-grid .sys-visual{order:0;} /* Same vh-safety ceiling as the base rule (see comment there) — this breakpoint's smaller 46vw/600px caps already clear the nav at typical short-laptop heights, but an extremely short window (~550px tall) can still reach it without this term. */ .hero-object{width:min(54vw,740px,max(320px,calc((100vh - 180px) * 1.1192)));} .hero-headline{font-size:clamp(30px,4.6vw,46px);} .triad, .product-specs{position:static;} .product-hero-visual{max-width:300px;margin:0 auto;align-items:center;} .poster-caption,.poster-actions{max-width:300px;margin-left:auto;margin-right:auto;} .pgm-visual{max-width:300px;margin:0 auto;} .pgm-teaser-frame{max-width:300px;} .pgm-visual-caption{max-width:300px;} } @media (max-width:1023px){ body{background-image: radial-gradient(700px 500px at 85% -8%, rgba(79,120,255,.07), transparent 62%), linear-gradient(180deg,#08101E 0%,#050810 100%); background-size:auto,cover;background-position:0 0,0 0;} .atmo{background: radial-gradient(700px 480px at 85% -10%, rgba(79,120,255,.08), transparent 62%), radial-gradient(150% 120% at 50% 45%, rgba(0,0,0,0) 60%, rgba(4,5,7,.3) 100%);} .nav-links{display:none;} .nav-cta .btn{display:none;} .nav-toggle{display:inline-flex;} /* padding-top:130px — same nav-clearance pattern as the base .hero rule (see comment there), just re-measured for the mobile nav's own height at this breakpoint. */ .hero{min-height:auto;padding-top:130px;} .hero-object{position:static;width:min(76vw,480px);margin:0 auto var(--sp-5);right:auto;top:auto;transform:none;} .hero-copy{max-width:100%;} .featured-grid,.proof-grid,.product-layout{grid-template-columns:1fr;gap:var(--sp-5);} .sys-panel{padding:var(--sp-6) 0;} .sys-idx-mark{position:static;display:block;-webkit-text-stroke-width:1px;font-size:clamp(52px,15vw,88px);margin-bottom:0;} .sys-copy h3{max-width:none;} .triad, .cap-table{grid-template-columns:repeat(2,1fr);} .cap-card:nth-child(odd){border-left:none;} .cap-card:nth-child(even){border-left:1px solid var(--border-hairline);} .cap-card:nth-child(n+3){border-top:1px solid var(--border-hairline);} .capability-grid{grid-template-columns:1fr;width:100%;max-width:100%;overflow-x:hidden;} .capability-item{max-width:100%;box-sizing:border-box;word-break:break-word;} .hud-reticle .tag{max-width:calc(100vw - 32px);overflow:hidden;text-overflow:ellipsis;} .contact-grid{grid-template-columns:1fr 1fr;} .contact-direct{grid-template-columns:1fr 1fr;} .contact-mod:nth-child(odd){border-left:none;} .contact-mod:nth-child(n+3){border-top:1px solid var(--border-hairline);} .footer-grid{grid-template-columns:1fr 1fr;} .footer-brand{grid-column:1/-1;} .proof-stats{grid-template-columns:repeat(2,auto);} .featured-head .mono-ref{text-align:left;line-height:1.8;} .page-header{padding-top:130px;} .product-hero{padding-top:130px;} } @media (max-width:767px){ .product-hero-visual{max-width:240px;} .poster-caption,.poster-actions{max-width:240px;} .poster-viewer-close{top:14px;right:14px;width:34px;height:34px;} .program-status{padding:var(--sp-6) 0;} .pgm-visual{max-width:220px;} .pgm-teaser-frame{max-width:220px;} .pgm-visual-caption{max-width:220px;} .ps-clock{width:100%;} .ps-clock-cell{min-width:0;flex:1 1 0;padding:12px 6px;} .ps-num{font-size:clamp(18px,6vw,26px);} .section,.featured,.company-section,.product-body,.cross-link{padding:var(--sp-6) 0;} .showcase{padding:var(--sp-6) 0;} .sys-panel{padding:var(--sp-5) 0;} .sys-diagram-frame{padding:26px 16px 18px;} .hero-object{width:min(86vw,400px);} .hero-headline{font-size:clamp(26px,8vw,36px);} .hero-index-inner{gap:14px 20px;} .cap-table{grid-template-columns:1fr;} .cap-card{border-left:none!important;border-top:1px solid var(--border-hairline);min-height:auto;} .cap-card:first-child{border-top:none;} .cap-specificity{max-height:none!important;opacity:1!important;margin-top:10px!important;border-top:1px solid var(--border-hairline)!important;padding-top:12px!important;} .contact-grid{grid-template-columns:1fr;} .contact-mod{border-left:none!important;border-top:1px solid var(--border-hairline);min-height:auto;} .contact-mod:first-child{border-top:none;} .footer-grid{grid-template-columns:1fr;gap:var(--sp-4);} .footer-bottom{flex-direction:column;align-items:flex-start;} .contact-direct{grid-template-columns:1fr;gap:var(--sp-3);} .proof-stats{grid-template-columns:1fr;gap:var(--sp-4);} .featured-ctas,.product-ctas{flex-direction:column;align-items:stretch;} .featured-ctas .btn,.product-ctas .btn{justify-content:center;} .diagram-frame{padding:32px 18px 22px;} .spec-table th{width:48%;font-size:10px;} .spec-table th,.spec-table td{font-size:11.5px;padding:11px 0;} .sec-head{flex-direction:column;gap:4px;margin-bottom:var(--sp-5);} .section-header{margin-bottom:var(--sp-5);} .triad, .page-header h1{font-size:clamp(28px,9.5vw,40px);} .btn{padding:16px 24px;font-size:12px;} .footer-mark{margin-top:var(--sp-4);font-size:clamp(40px,16.5vw,140px);} .page-header,.product-hero{padding-top:120px;padding-bottom:var(--sp-5);} } @media print{ body{background:#fff!important;color:#000!important;} .grain,.scroll-progress,.hero-object,.site-nav,.mobile-nav,.footer-mark,.hero-index{display:none!important;} .hero,.page-header,.product-hero{min-height:auto;padding-top:0;} h1,h2,.hero-headline,.stat-num,.page-header h1,.product-hero h1{-webkit-text-fill-color:#000!important;background:none!important;color:#000!important;} p,li,td,th,.body-lg{color:#222!important;} .featured,.proof,.program-status{background:none!important;box-shadow:none!important;} .featured::before{display:none!important;} .cap-table,.contact-grid,.diagram-frame,.sys-diagram-frame,.capability-grid,.services-grid,.cross-link-grid{border-color:#bbb!important;background:none!important;box-shadow:none!important;} .cap-specificity{max-height:none!important;opacity:1!important;} .sys-panel{background:none!important;} .sys-idx-mark,.hud-glow,.hud-reticle{display:none!important;} .reveal,.hero-seq,.cap-card,.contact-mod,.clipping,.sys-annot{opacity:1!important;transform:none!important;} a{color:#000!important;text-decoration:underline;} .section,.featured,.proof,.company-section,.product-body{padding:24px 0!important;page-break-inside:avoid;} .spec-table{page-break-inside:avoid;} } /* No-JS fallback: content must never depend on JS to become visible */ .no-js .reveal,.no-js .hero-seq,.no-js .cap-table .cap-card,.no-js .contact-grid .contact-mod,.no-js .media-row .clipping,.no-js .sys-annot{opacity:1!important;transform:none!important;filter:none!important;} .no-js .pipeline-line{stroke-dashoffset:0!important;} .no-js .stage-box,.no-js .stage-dot{opacity:1!important;} .no-js .hud-glow,.no-js .hud-reticle{display:none!important;} /* ============================================================ PHASE 30 — HOMEPAGE IA ENHANCEMENT (additive; reuses tokens) Products Portfolio · Services Snapshot · Featured Programs · Who We Serve ============================================================ */ /* ---- Products Portfolio ---- */ .portfolio-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1px; background:var(--border-hairline);border:1px solid var(--border-hairline);margin-top:var(--sp-4);} .portfolio-tile{position:relative;display:flex;flex-direction:column;background:var(--surface-primary); text-decoration:none;overflow:hidden;transition:background-color var(--dur-hover) ease;} .portfolio-tile:hover{background:var(--surface-secondary);} .pf-visual{position:relative;display:block;aspect-ratio:1414/2000;overflow:hidden;background:var(--color-bg-secondary);} .pf-visual img{width:100%;height:100%;object-fit:cover;object-position:center;} .pf-visual::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,transparent 60%,rgba(6,10,22,.5));} .pf-visual-mark{display:flex;align-items:center;justify-content:center; background:radial-gradient(120% 90% at 50% 22%,rgba(79,120,255,.12),transparent 60%),var(--color-panel);} .pf-visual-mark b{font-family:var(--font-display);font-weight:600;font-size:clamp(48px,7vw,84px); color:var(--accent-signal);opacity:.5;letter-spacing:-.02em;} .pf-body{display:flex;flex-direction:column;gap:6px;padding:15px 17px 17px;flex:1;} .pf-kind{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);} .pf-name{font-family:var(--font-display);font-size:16px;font-weight:600;color:var(--text-primary);letter-spacing:-.01em; transition:color var(--dur-hover) ease;} .portfolio-tile:hover .pf-name{color:var(--accent-signal);} .pf-blurb{font-size:12.5px;line-height:1.55;color:var(--text-secondary);flex:1;} .pf-explore{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase; color:var(--accent-signal);display:inline-flex;gap:7px;margin-top:4px;} .pf-explore span{transition:transform var(--dur-hover) ease;} .portfolio-tile:hover .pf-explore span{transform:translateX(4px);} /* Lead tile = full-width banner: dominant, and robust to any tile count (no mid-grid gaps). */ .portfolio-tile.is-lead{grid-column:1/-1;} @media(min-width:721px){ .portfolio-tile.is-lead{flex-direction:row;align-items:stretch;} .portfolio-tile.is-lead .pf-visual{width:clamp(220px,24%,300px);flex:none;} .portfolio-tile.is-lead .pf-body{justify-content:center;padding:var(--sp-5);max-width:60ch;} .portfolio-tile.is-lead .pf-kind{font-size:11px;} .portfolio-tile.is-lead .pf-name{font-size:26px;} .portfolio-tile.is-lead .pf-blurb{font-size:14.5px;flex:none;max-width:46ch;} } .portfolio-fallback{display:flex;flex-direction:column;gap:8px;margin-top:var(--sp-3);} .portfolio-fallback a{color:var(--accent-signal);font-size:14px;} /* ---- Services Snapshot ---- */ /* Tighter vertical rhythm than the global .section (128px) so the added sections increase information density WITHOUT making the page feel longer/emptier. */ .svc-section{padding:var(--sp-6) 0 var(--sp-5);} .programs{padding:var(--sp-5) 0;} .svc-register{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--border-hairline); border:1px solid var(--border-hairline);margin-top:var(--sp-4);} .svc-item{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto; column-gap:14px;row-gap:4px;background:var(--surface-primary);padding:19px 22px; text-decoration:none;transition:background-color var(--dur-hover) ease;} .svc-item:hover{background:var(--surface-secondary);} .svc-idx{grid-column:1;grid-row:1;font-family:var(--font-mono);font-size:11px;color:var(--accent-signal);letter-spacing:.06em;} .svc-name{grid-column:2;grid-row:1;font-family:var(--font-display);font-size:15px;font-weight:600; color:var(--text-primary);letter-spacing:-.005em;transition:color var(--dur-hover) ease;} .svc-line{grid-column:2;grid-row:2;font-size:12.5px;line-height:1.55;color:var(--text-secondary);} .svc-go{grid-column:3;grid-row:1/3;align-self:center;font-family:var(--font-mono);color:var(--text-faint); transition:transform var(--dur-hover) ease,color var(--dur-hover) ease;} .svc-item:hover .svc-name{color:var(--accent-signal);} .svc-item:hover .svc-go{color:var(--accent-signal);transform:translateX(4px);} /* ---- Featured Programs (poster showcase) ---- */ .programs-head{margin-bottom:var(--sp-4);} .programs-track{display:flex;gap:var(--sp-3);overflow-x:auto;scroll-snap-type:x mandatory;list-style:none;margin:0; padding:0 max(var(--sp-5),calc((100vw - var(--canvas-max))/2 + var(--sp-5))) var(--sp-2); -webkit-overflow-scrolling:touch;scrollbar-width:thin;} .program-card{flex:0 0 auto;width:clamp(220px,58vw,300px);scroll-snap-align:start;} .program-card a{display:block;position:relative;text-decoration:none;overflow:hidden; border:1px solid var(--border-hairline);background:var(--color-panel); transition:border-color var(--dur-hover) ease,transform var(--dur-hover) ease;} .program-card a:hover{border-color:var(--accent-signal-dim);transform:translateY(-3px);} .pg-media{display:block;aspect-ratio:1414/2000;} .pg-media img{width:100%;height:100%;object-fit:cover;} .pg-cap{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:3px; padding:16px 16px 14px;background:linear-gradient(180deg,transparent,rgba(6,10,22,.88));} .pg-name{font-family:var(--font-display);font-size:16px;font-weight:600;color:#fff;letter-spacing:-.01em;} .pg-kind{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-signal);} /* Editorial Featured cards — text-forward, tagged; deliberately distinct from the poster-based Products Portfolio so the two sections never read as duplicates. */ .featured-card a{display:flex;flex-direction:column;height:100%;} .featured-card:not(.has-media) a{padding:24px 22px 20px;min-height:230px;} .featured-card:not(.has-media) .fc-body{display:flex;flex-direction:column;gap:8px;flex:1;} .has-media .fc-body{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:5px; padding:16px 16px 14px;background:linear-gradient(180deg,transparent,rgba(6,10,22,.9));} .fc-tag{align-self:flex-start;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase; color:var(--accent-signal);border:1px solid var(--accent-signal-dim);padding:4px 9px;line-height:1;} .fc-title{font-family:var(--font-display);font-size:18px;font-weight:600;color:var(--text-primary);letter-spacing:-.01em; line-height:1.22;margin-top:10px;transition:color var(--dur-hover) ease;} .has-media .fc-title{color:#fff;margin-top:6px;font-size:16px;} .fc-meta{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.05em;color:var(--text-faint);} .fc-blurb{font-size:13px;line-height:1.55;color:var(--text-secondary);margin-top:2px;} .has-media .fc-blurb{display:none;} .fc-cta{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-signal); display:inline-flex;gap:7px;margin-top:auto;padding-top:14px;} .fc-cta span{transition:transform var(--dur-hover) ease;} .featured-card a:hover .fc-cta span{transform:translateX(4px);} .featured-card:not(.has-media) a:hover .fc-title{color:var(--accent-signal);} /* ---- Who We Serve strip ---- */ .serve-strip{padding:var(--sp-3) 0;} .serve-inner{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap; border-top:1px solid var(--border-mid);border-bottom:1px solid var(--border-mid);padding:18px 0;} .serve-label{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:11px; letter-spacing:.12em;text-transform:uppercase;color:var(--text-secondary);white-space:nowrap;} .serve-dot{width:6px;height:6px;border-radius:50%;background:var(--accent-signal);box-shadow:0 0 0 3px rgba(111,156,255,.14);} .serve-list{display:flex;flex-wrap:wrap;gap:10px 28px;flex:1;} .serve-list li{position:relative;font-family:var(--font-display);font-size:15px;font-weight:500;color:var(--text-primary);} .serve-list li+li::before{content:"";position:absolute;left:-15px;top:50%;width:1px;height:14px; transform:translateY(-50%);background:var(--border-mid);} /* ---- Responsive ---- */ @media(max-width:720px){ .portfolio-grid{grid-template-columns:repeat(2,1fr);} .portfolio-tile.is-lead{grid-column:1/-1;} .svc-register{grid-template-columns:1fr;} } @media(max-width:440px){ .portfolio-grid{grid-template-columns:1fr;} } .no-js .hero-object img{transform:none!important;} /* ============================================================ PRIMARY NAV — homepage rebuild (.nav). Coexists with the legacy .site-nav used by other pages. Tokens only. See index.html + main.js. ============================================================ */ .nav{position:fixed;top:0;left:0;right:0;z-index:var(--z-nav);height:68px;display:flex;align-items:center; background:transparent;border-bottom:1px solid transparent; transition:background var(--dur-hover) var(--ease-out),border-color var(--dur-hover) var(--ease-out),backdrop-filter var(--dur-hover) var(--ease-out);} .nav__inner{width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);} .nav--scrolled{background:color-mix(in srgb, var(--color-bg) 90%, transparent); -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--color-border);} .nav__menu{display:flex;align-items:center;gap:var(--sp-4);} .nav__links{display:flex;align-items:center;gap:26px;} .nav__item{position:relative;} .nav__link{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:12px; letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-secondary);background:none;border:0; cursor:pointer;padding:6px 0;position:relative;transition:color var(--dur-hover) var(--ease-out);} .nav__link:hover,.nav__link:focus-visible{color:var(--color-text);} .nav__link[aria-current="page"]{color:var(--color-text);} .nav__link::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:var(--color-brand-hover); transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease-out),opacity var(--dur-hover) ease;} .nav__link:hover::after,.nav__link:focus-visible::after{transform:scaleX(1);opacity:.5;} .nav__link[aria-current="page"]::after{transform:scaleX(1);opacity:1;box-shadow:0 0 8px rgba(79,120,255,.8);} .nav__caret{width:13px;height:13px;transition:transform var(--dur-hover) var(--ease-out);} .nav__link[aria-expanded="true"] .nav__caret{transform:rotate(180deg);} /* Products flyout — positioned by @floating-ui/dom (main.js); hidden by default. */ .nav__flyout{position:fixed;top:0;left:0;min-width:250px;padding:8px;z-index:var(--z-mobile-nav); background:color-mix(in srgb, var(--color-panel) 97%, transparent);border:1px solid var(--color-border); box-shadow:0 30px 70px -34px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.04); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none; transition:opacity var(--dur-hover) var(--ease-out),transform var(--dur-hover) var(--ease-out),visibility var(--dur-hover);} .nav__flyout.is-open{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;} .nav__flyout a{display:flex;flex-direction:column;gap:2px;padding:10px 12px;color:var(--color-text-secondary); transition:background var(--dur-hover) ease,color var(--dur-hover) ease;} .nav__flyout a:hover,.nav__flyout a:focus-visible{background:var(--color-panel-elevated);color:var(--color-text);} .nav__flyout .fly-name{font-family:var(--font-display);font-size:15px;font-weight:600;letter-spacing:-.01em;} .nav__flyout .fly-kind{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-muted);} .nav__flyout-all{flex-direction:row!important;align-items:center;gap:8px!important;margin-top:4px; border-top:1px solid var(--color-hairline);font-family:var(--font-mono);font-size:11px;letter-spacing:.06em; text-transform:uppercase;color:var(--accent-signal)!important;} /* Circular search button */ .nav__search{width:44px;height:44px;min-width:44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center; background:transparent;border:1px solid var(--color-border);color:var(--color-text-secondary);cursor:pointer; transition:color var(--dur-hover) var(--ease-out),border-color var(--dur-hover) var(--ease-out),background var(--dur-hover) var(--ease-out);} .nav__search:hover,.nav__search:focus-visible{color:var(--color-text);border-color:var(--color-brand-hover);background:rgba(79,120,255,.06);} .nav__search svg{width:18px;height:18px;} /* Hamburger — mobile only */ .nav__burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;background:none;border:0;color:var(--color-text);cursor:pointer;} .nav__burger svg{width:22px;height:22px;} @media (max-width:767px){ .nav__menu{display:none;} .nav__burger{display:inline-flex;} } /* ---- Search dialog (native