/* ============================================================ TOKENS */
    :root {
      --bg: #030303;
      --surface: #0a0a0a;
      --surface-2: #111111;
      --fg: #f0f0f0;
      --muted: #888888;
      --muted-2: #444444;
      --accent: #ffffff;
      --accent-dim: rgba(255,255,255,.05);
      --accent-glow: rgba(255,255,255,.1);
      --red: #ffffff;
      --cyan: #ffffff;
      --border: rgba(255,255,255,.055);
      --border-h: rgba(255,255,255,.13);
      --font-sans: 'Space Grotesk', system-ui, sans-serif;
      --font-mono: 'Space Mono', monospace;
      --eoe: cubic-bezier(.16,1,.3,1);
      --eio: cubic-bezier(.76,0,.24,1);
      --container: 1300px;
      --gutter: clamp(1.25rem,5vw,3rem);
      --r: 6px;
      --rl: 14px;
    }

    /* ============================================================ RESET */
    *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
    html { font-size:16px; scroll-behavior:auto; -webkit-text-size-adjust:100%; }
    body {
      background:var(--bg);
      color:var(--fg);
      font-family:var(--font-sans);
      overflow-x:hidden;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
    }
    img { display:block; max-width:100%; }
    a { color:inherit; text-decoration:none; }
    button { font-family:inherit; cursor:pointer; border:none; background:none; }
    ul,ol { list-style:none; }

    /* Skip link */
    .skip-link {
      position:absolute; top:-100%; left:1rem;
      background:var(--accent); color:#000;
      padding:.5rem 1rem; font-size:.875rem; font-weight:700;
      border-radius:var(--r); z-index:10000; transition:top .2s;
    }
    .skip-link:focus { top:1rem; }
    .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; }

    /* ============================================================ NOISE */
    body::before {
      content:''; position:fixed; inset:0; z-index:9997; pointer-events:none;
      background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      opacity:.025;
    }

    /* ============================================================ SCROLL PROGRESS */
    #scroll-progress {
      position:fixed; top:0; left:0; height:2px; width:0%;
      background:linear-gradient(90deg, var(--accent), rgba(201,249,71,.4));
      z-index:9999; transition:width .05s linear;
      box-shadow:0 0 10px var(--accent-glow);
    }

    /* ============================================================ CURSOR */
    .cur { position:fixed; border-radius:50%; pointer-events:none; z-index:9998; transform:translate(-50%,-50%); }
    .cur-dot {
      width:6px; height:6px; background:var(--accent);
      transition:width .2s var(--eoe), height .2s var(--eoe), opacity .2s;
    }
    .cur-ring {
      width:38px; height:38px;
      border:1.5px solid rgba(201,249,71,.38);
      transition:width .35s var(--eoe), height .35s var(--eoe), border-color .2s, opacity .35s;
    }
    .cur-trail { background:var(--accent); opacity:.18; }
    body.c-hover .cur-dot { width:10px; height:10px; }
    body.c-hover .cur-ring { width:58px; height:58px; border-color:rgba(201,249,71,.65); }
    @media(hover:none){ .cur { display:none; } }

    /* ============================================================ CONTAINER */
    .container { width:100%; max-width:var(--container); margin:0 auto; padding:0 var(--gutter); }

    /* ============================================================ TYPOGRAPHY */
    .label {
      font-family:var(--font-mono); font-size:.68rem;
      letter-spacing:.2em; text-transform:uppercase; color:var(--accent);
    }
    .display-1 { font-size:clamp(3rem,8.5vw,8rem); font-weight:700; line-height:.97; letter-spacing:-.04em; }
    .display-2 { font-size:clamp(2.2rem,5vw,4.5rem); font-weight:700; line-height:1.08; letter-spacing:-.03em; }
    .display-3 { font-size:clamp(1.5rem,2.5vw,2.2rem); font-weight:600; line-height:1.2; letter-spacing:-.02em; }
    .body-lg { font-size:clamp(1rem,1.4vw,1.15rem); line-height:1.75; color:var(--muted); }

    /* Split text */
    .word-wrap { display:inline-block; overflow:hidden; vertical-align:bottom; }
    .word { display:inline-block; }

    /* ============================================================ GLITCH */
    .glitch-target { position:relative; display:inline-block; color:var(--accent); }
    .glitch-target::before,
    .glitch-target::after {
      content:attr(data-text);
      position:absolute; left:0; top:0;
      width:100%; overflow:hidden;
      color:var(--accent);
      opacity:0; pointer-events:none;
    }
    .glitch-target.glitch-active::before {
      opacity:.7; color:var(--red);
      clip-path:inset(40% 0 30% 0);
      transform:translate(-3px,1px) skewX(-3deg);
      animation:glitch-1 .12s steps(1) forwards;
    }
    .glitch-target.glitch-active::after {
      opacity:.6; color:var(--cyan);
      clip-path:inset(55% 0 10% 0);
      transform:translate(3px,-1px) skewX(2deg);
      animation:glitch-2 .12s steps(1) .04s forwards;
    }
    @keyframes glitch-1 {
      0%  { clip-path:inset(20% 0 50% 0); transform:translate(-3px,0); }
      33% { clip-path:inset(60% 0 10% 0); transform:translate(2px,1px); }
      66% { clip-path:inset(35% 0 40% 0); transform:translate(-1px,-1px); }
      100%{ clip-path:inset(0% 0 0% 0);   transform:translate(0,0); opacity:0; }
    }
    @keyframes glitch-2 {
      0%  { clip-path:inset(55% 0 10% 0); transform:translate(3px,0); }
      33% { clip-path:inset(10% 0 55% 0); transform:translate(-2px,1px); }
      66% { clip-path:inset(40% 0 30% 0); transform:translate(1px,-1px); }
      100%{ clip-path:inset(0% 0 0% 0);   transform:translate(0,0); opacity:0; }
    }

    /* Scramble chars */
    .scramble-char { color:var(--accent); opacity:.65; }

    /* Terminal cursor blink */
    .terminal-cursor::after {
      content:'_'; color:var(--accent);
      animation:blink .7s step-end infinite;
    }
    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

    /* ============================================================ LOADER */
    #loader {
      position:fixed; inset:0; background:var(--bg); z-index:10000;
      display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.8rem;
    }
    .loader-logo {
      font-family:var(--font-mono); font-size:1.8rem; font-weight:700; letter-spacing:.15em;
      opacity:0; animation:fadeUp .5s var(--eoe) .1s forwards;
    }
    .loader-logo span { color:var(--accent); }
    .loader-sys {
      font-family:var(--font-mono); font-size:.65rem; letter-spacing:.2em;
      color:var(--muted); text-transform:uppercase;
      opacity:0; animation:fadeUp .4s var(--eoe) .4s forwards;
    }
    .loader-track {
      width:220px; height:1px; background:var(--muted-2); overflow:hidden;
      opacity:0; animation:fadeUp .4s var(--eoe) .45s forwards;
    }
    .loader-bar {
      height:100%; width:0%; background:var(--accent);
      box-shadow:0 0 8px var(--accent-glow);
      animation:loadBar 1.5s var(--eoe) .6s forwards;
    }
    .loader-pct {
      font-family:var(--font-mono); font-size:.6rem; letter-spacing:.15em; color:var(--accent);
      opacity:0; animation:fadeUp .4s var(--eoe) .6s forwards;
    }
    .loader-jack {
      font-family:var(--font-mono); font-size:.7rem; letter-spacing:.25em;
      color:var(--fg); text-transform:uppercase;
      opacity:0;
    }
    .loader-jack.show { animation:fadeUp .4s var(--eoe) forwards; }
    @keyframes fadeUp { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
    @keyframes loadBar { to{width:100%} }

    /* ============================================================ NAV */
    .nav {
      position:fixed; top:0; left:0; right:0; z-index:1000;
      padding:1.75rem 0; transition:padding .4s var(--eoe), background .4s;
    }
    .nav.scrolled {
      padding:1rem 0;
      background:rgba(5,5,5,.82);
      backdrop-filter:blur(24px);
      -webkit-backdrop-filter:blur(24px);
      border-bottom:1px solid var(--border);
    }
    .nav__inner { display:flex; align-items:center; justify-content:space-between; gap:2rem; }
    .nav__logo {
      font-family:var(--font-mono); font-size:1.1rem; font-weight:700;
      letter-spacing:.1em; position:relative;
    }
    .nav__logo span { color:var(--accent); }
    .nav__links { display:flex; align-items:center; gap:2.5rem; }
    .nav-link {
      font-size:.82rem; font-weight:500; color:var(--muted);
      letter-spacing:.02em; position:relative; overflow:hidden;
      display:inline-block; transition:color .2s;
    }
    .nav-link span { display:block; transition:transform .3s var(--eoe); }
    .nav-link::after {
      content:attr(data-text);
      position:absolute; top:100%; left:0; font-size:.82rem; font-weight:500;
      color:var(--fg); letter-spacing:.02em;
      transition:transform .3s var(--eoe);
    }
    .nav-link:hover span { transform:translateY(-100%); }
    .nav-link:hover::after { transform:translateY(-100%); }
    .nav-link:hover { color:var(--fg); }
    @media(max-width:768px){ .nav__links{display:none} }

    /* ============================================================ BUTTONS */
    .btn {
      display:inline-flex; align-items:center; gap:.5rem;
      padding:.68rem 1.5rem; font-size:.85rem; font-weight:600;
      border-radius:var(--r); white-space:nowrap;
      position:relative; overflow:hidden;
      transition:transform .3s var(--eoe), box-shadow .3s;
    }
    .btn-fill {
      position:absolute; inset:0; transform:translateY(101%);
      transition:transform .38s var(--eoe); z-index:0; border-radius:var(--r);
    }
    .btn-text { position:relative; z-index:1; transition:color .25s; }
    .btn-arr { position:relative; z-index:1; transition:transform .3s var(--eoe), color .25s; }
    .btn:hover .btn-arr { transform:translateX(3px); }
    .btn--accent { background:var(--accent); color:#000; }
    .btn--accent .btn-fill { background:#d8ff5a; }
    .btn--accent:hover .btn-fill { transform:translateY(0); }
    .btn--accent:hover { box-shadow:0 10px 36px var(--accent-glow); }
    .btn--ghost { background:transparent; color:var(--fg); border:1px solid var(--border); }
    .btn--ghost .btn-fill { background:var(--accent); }
    .btn--ghost:hover .btn-fill { transform:translateY(0); }
    .btn--ghost:hover .btn-text,
    .btn--ghost:hover .btn-arr { color:#000; }
    .btn--ghost:hover { border-color:var(--accent); }
    .btn--lg { padding:.95rem 2.1rem; font-size:.95rem; }
    /* Ripple */
    .btn-ripple {
      position:absolute; border-radius:50%;
      background:rgba(0,0,0,.2); pointer-events:none; z-index:2;
      transform:scale(0); animation:rippleAnim .5s var(--eoe) forwards;
    }
    @keyframes rippleAnim { to{transform:scale(4);opacity:0} }

    /* ============================================================ HERO */
    #hero {
      position:relative; width:100%; height:100svh; min-height:600px;
      display:flex; align-items:center; overflow:hidden;
    }
    #hero-canvas { position:absolute; inset:0; z-index:0; cursor:crosshair; }
    .hero__grad {
      position:absolute; inset:0; z-index:1; pointer-events:none;
      background:
        radial-gradient(ellipse 65% 70% at 68% 50%, rgba(201,249,71,.05) 0%, transparent 65%),
        radial-gradient(ellipse 55% 90% at 5% 50%, rgba(5,5,5,.72) 0%, transparent 65%),
        linear-gradient(to right, rgba(5,5,5,.55) 0%, transparent 50%);
    }
    .hero__content { position:relative; z-index:2; padding-top:5.5rem; max-width:860px; }
    .hero__label-wrap { margin-bottom:2rem; opacity:0; transform:translateY(18px); }
    .hero__label-wrap .label { display:inline-flex; align-items:center; gap:.75rem; }
    .hero__label-wrap .label::before { content:''; display:inline-block; width:22px; height:1px; background:var(--accent); }
    .hero__title { margin-bottom:1.5rem; }
    .hero__title .t-line { display:block; overflow:hidden; }
    .hero__title .t-line-inner { display:block; opacity:0; transform:translateY(110%); }
    .hero__sub { max-width:510px; margin-bottom:2.75rem; opacity:0; transform:translateY(20px); }
    .hero__actions { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; opacity:0; transform:translateY(20px); }
    .hero__hint {
      position:absolute; bottom:2.5rem; left:50%; transform:translateX(-50%);
      z-index:2; display:flex; flex-direction:column; align-items:center; gap:.5rem;
      opacity:0;
    }
    .hero__hint span { font-family:var(--font-mono); font-size:.6rem; letter-spacing:.18em; color:var(--muted); text-transform:uppercase; }
    .scroll-line { width:1px; height:38px; background:linear-gradient(to bottom, var(--accent), transparent); animation:pulse 2s ease-in-out infinite; }
    @keyframes pulse { 0%,100%{opacity:.3} 50%{opacity:1} }

    /* Canvas tooltip */
    .canvas-tip {
      position:absolute; bottom:6rem; right:var(--gutter); z-index:2;
      font-family:var(--font-mono); font-size:.6rem; letter-spacing:.12em;
      color:var(--muted); text-transform:uppercase;
      opacity:0; animation:fadeUp .5s var(--eoe) 3.5s forwards;
    }

    /* ============================================================ MARQUEE */
    .marquee-section { padding:1.75rem 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); overflow:hidden; }
    .marquee-track { display:flex; width:max-content; animation:marquee 30s linear infinite; }
    .marquee-track:hover { animation-play-state:paused; }
    .marquee-item {
      display:flex; align-items:center; gap:1.5rem; padding:0 1.5rem;
      font-family:var(--font-mono); font-size:.7rem; letter-spacing:.15em;
      text-transform:uppercase; color:var(--muted); white-space:nowrap;
    }
    .dot { width:4px; height:4px; background:var(--accent); border-radius:50%; flex-shrink:0; }
    @keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }

    /* ============================================================ SECTIONS */
    section { padding:clamp(5rem,10vw,9rem) 0; }
    .section-header { display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; margin-bottom:clamp(3rem,6vw,5rem); flex-wrap:wrap; }
    .section-header .right { max-width:380px; color:var(--muted); font-size:.95rem; line-height:1.75; }

    /* ============================================================ SERVICES */
    .services-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--rl); overflow:hidden; }
    .service-card {
      background:var(--bg); padding:2.5rem 2rem;
      position:relative; overflow:hidden;
      transition:background .3s;
      opacity:0; transform:translateY(30px);
    }
    .card-sheen {
      position:absolute; inset:0; pointer-events:none; z-index:0;
      background:radial-gradient(120px circle at var(--mx,50%) var(--my,50%), rgba(201,249,71,.07), transparent);
      opacity:0; transition:opacity .3s;
    }
    .service-card:hover .card-sheen { opacity:1; }
    .service-num { position:absolute; top:1.5rem; right:1.5rem; font-family:var(--font-mono); font-size:.6rem; color:var(--muted-2); letter-spacing:.1em; }
    .service-icon { font-size:1.6rem; margin-bottom:1.5rem; display:block; position:relative; z-index:1; transition:transform .4s var(--eoe); }
    .service-card:hover .service-icon { transform:scale(1.15) rotate(-8deg); }
    .service-card h3 { font-size:1.1rem; font-weight:600; margin-bottom:.7rem; position:relative; z-index:1; transition:color .3s; }
    .service-card:hover h3 { color:var(--accent); }
    .service-card p { font-size:.875rem; color:var(--muted); line-height:1.72; position:relative; z-index:1; }
    .svc-tags { margin-top:1.5rem; display:flex; flex-wrap:wrap; gap:.4rem; position:relative; z-index:1; }
    .tag { font-family:var(--font-mono); font-size:.62rem; letter-spacing:.08em; padding:.28rem .55rem; background:var(--surface-2); border:1px solid var(--border); border-radius:3px; color:var(--muted); text-transform:uppercase; transition:border-color .2s,color .2s; }
    .service-card:hover .tag { border-color:rgba(201,249,71,.2); }

    /* ============================================================ WORK */
    .work-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:1.5rem; }
    .work-card {
      background:var(--surface); border:1px solid var(--border); border-radius:var(--rl);
      overflow:hidden; position:relative;
      transition:border-color .35s, box-shadow .35s;
      opacity:0; transform:translateY(40px);
    }
    .work-card:hover { border-color:var(--border-h); box-shadow:0 20px 60px rgba(0,0,0,.5); }
    .work-card .card-sheen { background:radial-gradient(180px circle at var(--mx,50%) var(--my,50%), rgba(201,249,71,.055), transparent); }
    .work-card:hover .card-sheen { opacity:1; }
    .wc-featured { grid-column:span 7; }
    .wc-sm { grid-column:span 5; }
    .wc-full { grid-column:span 12; }
    @media(max-width:900px){ .wc-featured,.wc-sm,.wc-full { grid-column:span 12; } }
    .work-visual { width:100%; aspect-ratio:16/9; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; }
    .wc-sm .work-visual { aspect-ratio:4/3; }
    .wc-full .work-visual { aspect-ratio:21/6; }
    .work-img { position:absolute; top:-15%; left:0; right:0; bottom:-15%; height:130%; transition:transform .6s var(--eoe); }
    .work-card:hover .work-img { transform:scale(1.06); }
    .work-badge {
      position:absolute; top:1rem; right:1rem; z-index:2;
      background:rgba(5,5,5,.7); border:1px solid var(--border);
      border-radius:100px; padding:.28rem .7rem;
      font-family:var(--font-mono); font-size:.58rem; letter-spacing:.12em;
      color:var(--accent); text-transform:uppercase; backdrop-filter:blur(8px);
      transition:background .2s, border-color .2s;
    }
    .work-card:hover .work-badge { background:rgba(201,249,71,.12); border-color:rgba(201,249,71,.3); }
    .work-info { padding:1.75rem; }
    .work-info .label { margin-bottom:.5rem; display:block; }
    .work-info h3 { font-size:1.15rem; font-weight:600; margin-bottom:.5rem; letter-spacing:-.01em; }
    .work-info p { font-size:.875rem; color:var(--muted); }
    .work-meta { display:flex; align-items:center; justify-content:space-between; margin-top:1.25rem; gap:1rem; flex-wrap:wrap; }
    .work-link { display:inline-flex; align-items:center; gap:.4rem; font-size:.78rem; font-weight:600; color:var(--accent); letter-spacing:.02em; transition:gap .25s var(--eoe); }
    .work-link:hover { gap:.75rem; }

    /* ============================================================ PROCESS */
    .process-wrap { position:relative; }
    .process-line-draw {
      position:absolute; top:2.5rem; left:0; height:1px; width:0%;
      background:linear-gradient(to right, var(--accent), rgba(201,249,71,.1));
      z-index:1; box-shadow:0 0 6px var(--accent-glow);
    }
    @media(max-width:768px){ .process-line-draw{display:none} }
    .process-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:0; }
    .process-step { padding:2.5rem 2rem 2rem 0; opacity:0; transform:translateY(28px); position:relative; }
    .process-step:not(:last-child) { border-right:1px solid var(--border); }
    @media(max-width:768px){ .process-step { border-right:none; border-bottom:1px solid var(--border); padding:1.5rem 0; } }
    .process-num { font-family:var(--font-mono); font-size:.6rem; color:var(--accent); letter-spacing:.2em; margin-bottom:1.5rem; display:block; }
    .process-step h3 { font-size:1.05rem; font-weight:600; margin-bottom:.7rem; }
    .process-step p { font-size:.875rem; color:var(--muted); line-height:1.72; }

    /* ============================================================ STATS */
    .stats-section { background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
    .stats-grid { display:grid; grid-template-columns:repeat(4,1fr); }
    @media(max-width:768px){ .stats-grid{grid-template-columns:repeat(2,1fr)} }
    .stat-item { padding:clamp(2rem,4vw,3.5rem) clamp(1.5rem,3vw,2.5rem); border-right:1px solid var(--border); opacity:0; transform:translateY(18px); }
    .stat-item:last-child { border-right:none; }
    @media(max-width:768px){
      .stat-item:nth-child(2){border-right:none}
      .stat-item:nth-child(3){border-right:1px solid var(--border)}
      .stat-item:nth-child(1),.stat-item:nth-child(2){border-bottom:1px solid var(--border)}
    }
    .stat-num { font-size:clamp(2.5rem,5vw,4.5rem); font-weight:700; letter-spacing:-.04em; line-height:1; margin-bottom:.4rem; }
    .stat-num .hi { color:var(--accent); }
    .stat-lbl { font-size:.85rem; color:var(--muted); }

    /* ============================================================ TESTIMONIAL */
    .testimonial-section { padding:clamp(5rem,10vw,9rem) 0; }
    .testi-inner { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
    @media(max-width:768px){ .testi-inner{grid-template-columns:1fr} }
    .testi-quote { font-size:clamp(1.2rem,2.3vw,1.75rem); font-weight:400; line-height:1.6; letter-spacing:-.01em; opacity:0; transform:translateX(-30px); }
    .testi-quote::before { content:'\201C'; font-size:4rem; line-height:.4; display:block; color:var(--accent); margin-bottom:1.2rem; font-family:Georgia,serif; }
    .testi-meta { margin-top:2rem; opacity:0; transform:translateX(-30px); }
    .testi-meta strong { display:block; font-size:.95rem; font-weight:600; margin-bottom:.2rem; }
    .testi-meta span { font-size:.78rem; color:var(--muted); font-family:var(--font-mono); }
    .testi-card-wrap { display:flex; align-items:center; justify-content:center; opacity:0; transform:translateX(30px); }
    .testi-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--rl); padding:2rem; width:100%; max-width:340px; transition:border-color .3s; }
    .testi-card:hover { border-color:var(--border-h); }
    .stars { display:flex; gap:3px; margin-bottom:1.2rem; }
    .star { color:var(--accent); font-size:.9rem; }
    .testi-card p { font-size:.875rem; color:var(--muted); line-height:1.72; margin-bottom:1.5rem; }
    .author-row { display:flex; align-items:center; gap:.75rem; }
    .avatar { width:36px; height:36px; background:linear-gradient(135deg,var(--accent),#7fff00); border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.72rem; color:#000; }
    .author-info strong { display:block; font-size:.83rem; font-weight:600; }
    .author-info span { font-size:.73rem; color:var(--muted); }

    /* ============================================================ CTA */
    .cta-section { padding:clamp(5rem,10vw,9rem) 0; text-align:center; position:relative; overflow:hidden; }
    .cta-bg {
      position:absolute; inset:0; pointer-events:none;
      background:radial-gradient(ellipse 60% 60% at 50% 50%, rgba(201,249,71,.045) 0%, transparent 70%);
      animation:ctaPulse 4s ease-in-out infinite;
    }
    @keyframes ctaPulse { 0%,100%{opacity:.6;transform:scale(1)} 50%{opacity:1;transform:scale(1.05)} }
    .cta-inner { position:relative; z-index:1; }
    .cta-inner .label { display:inline-block; margin-bottom:1.5rem; }
    .cta-inner h2 { margin-bottom:1.25rem; }
    .cta-inner > p { max-width:460px; margin:0 auto 2.75rem; color:var(--muted); }
    .cta-actions { display:flex; align-items:center; justify-content:center; gap:1rem; flex-wrap:wrap; }
    .cta-email-note { font-family:var(--font-mono); font-size:.72rem; color:var(--muted); margin-top:1.5rem; }
    .cta-email-note a { color:var(--accent); border-bottom:1px solid transparent; transition:border-color .2s; }
    .cta-email-note a:hover { border-color:var(--accent); }

    /* ============================================================ FOOTER */
    footer { padding:2.5rem 0; border-top:1px solid var(--border); }
    .footer-inner { display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
    .footer-logo { font-family:var(--font-mono); font-size:.9rem; font-weight:700; letter-spacing:.1em; color:var(--muted); cursor:default; }
    .footer-logo span { color:var(--accent); }
    .footer-copy { font-size:.75rem; color:var(--muted-2); font-family:var(--font-mono); }
    .footer-links { display:flex; gap:2rem; }
    .footer-links a { font-size:.78rem; color:var(--muted); transition:color .2s; }
    .footer-links a:hover { color:var(--fg); }
    .footer-sub { font-family:var(--font-mono); font-size:.6rem; letter-spacing:.1em; color:var(--muted-2); margin-top:.25rem; }

    /* ============================================================ FOCUS & A11Y */
    :focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:3px; }

    /* ============================================================ CONTACT FORM */
    .contact-form { max-width:600px; margin:2.75rem auto 0; text-align:left; }
    .cf-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
    @media(max-width:560px){ .cf-row{grid-template-columns:1fr} }

    /*
     * Each field has padding-top that serves as the "runway" for the floated label.
     * The label's default top = field-padding-top + input-padding-top, so it sits
     * at exactly the same Y position as the input text (no overlap).
     * On focus/fill it slides up into the runway above the input border.
     */
    .cf-field { position:relative; margin-bottom:1rem; padding-top:1.25rem; }

    .cf-field input,
    .cf-field select,
    .cf-field textarea {
      display:block; width:100%;
      background:rgba(255,255,255,.025);
      border:1px solid var(--border); border-radius:var(--r);
      padding:.8rem 1rem;
      font-family:var(--font-sans); font-size:.9rem; color:var(--fg);
      transition:border-color .25s var(--eoe), box-shadow .25s var(--eoe), background .25s;
      outline:none; -webkit-appearance:none; appearance:none;
    }
    .cf-field select { cursor:pointer; padding-right:2.5rem; }
    .cf-field select option { background:#111; color:var(--fg); }
    .cf-field textarea { resize:none; line-height:1.65; padding-bottom:2rem; }

    /* Focus glow */
    .cf-field input:focus,
    .cf-field select:focus,
    .cf-field textarea:focus {
      border-color:rgba(201,249,71,.42);
      box-shadow:0 0 0 3px rgba(201,249,71,.07);
      background:rgba(201,249,71,.018);
    }

    /* Label default: sits at text level inside the input (runway + input padding) */
    .cf-field label {
      position:absolute; left:1rem; right:1rem;
      top:2.05rem; transform:translateY(-50%);
      font-size:.9rem; color:var(--muted); pointer-events:none;
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
      transition:top .22s var(--eoe), transform .22s var(--eoe),
                 font-size .22s var(--eoe), color .22s, letter-spacing .22s;
    }

    /* Floated — focus or content present */
    .cf-field:focus-within label,
    .cf-field input:not(:placeholder-shown) ~ label,
    .cf-field textarea:not(:placeholder-shown) ~ label,
    .cf-field.has-val label {
      top:.15rem; transform:none;
      font-size:.59rem; letter-spacing:.1em; text-transform:uppercase;
      font-family:var(--font-mono); color:rgba(201,249,71,.78);
    }

    /* Textarea: start at top of content, not vertically centred */
    .cf-field--ta label { top:2.05rem; transform:none; }
    .cf-field--ta:focus-within label,
    .cf-field--ta textarea:not(:placeholder-shown) ~ label,
    .cf-field--ta.has-val label { top:.15rem; }

    /* Select: label always floated since selects have no :placeholder-shown */
    .cf-field--select label {
      top:.15rem; transform:none;
      font-size:.59rem; letter-spacing:.1em; text-transform:uppercase;
      font-family:var(--font-mono); color:var(--muted);
    }
    .cf-field--select:focus-within label,
    .cf-field--select.has-val label { color:rgba(201,249,71,.78); }

    /* Select arrow */
    .cf-select-arr {
      position:absolute; right:1rem; bottom:.8rem;
      color:var(--muted); font-size:.8rem; pointer-events:none;
      transition:transform .25s var(--eoe), color .25s;
    }
    .cf-field--select:focus-within .cf-select-arr {
      transform:rotate(180deg); color:rgba(201,249,71,.7);
    }

    /* Character counter */
    .cf-count {
      position:absolute; bottom:.55rem; right:.85rem;
      font-family:var(--font-mono); font-size:.57rem; letter-spacing:.04em;
      color:var(--muted-2); pointer-events:none; transition:color .2s;
    }
    .cf-count.near-limit { color:rgba(201,249,71,.8); }

    /* Error */
    .cf-field.cf-err input,
    .cf-field.cf-err select,
    .cf-field.cf-err textarea {
      border-color:rgba(255,80,80,.5);
      box-shadow:0 0 0 3px rgba(255,80,80,.07);
      animation:cf-shake .3s var(--eoe);
    }
    .cf-field.cf-err label { color:rgba(255,110,110,.85) !important; }
    .cf-err-msg {
      display:block; font-family:var(--font-mono); font-size:.59rem;
      letter-spacing:.06em; color:rgba(255,110,110,.8); margin-top:.3rem;
    }
    @keyframes cf-shake {
      0%,100%{ transform:translateX(0) }
      20%{ transform:translateX(-5px) }
      40%{ transform:translateX(4px) }
      60%{ transform:translateX(-3px) }
      80%{ transform:translateX(2px) }
    }

    /* Footer row */
    .cf-footer { display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; margin-top:.25rem; }
    .cf-note { font-family:var(--font-mono); font-size:.63rem; letter-spacing:.1em; color:var(--muted-2); }

    /* Submit loading */
    .cf-btn-loading .btn-arr { display:none; }
    .cf-btn-loading .btn-text::after {
      content:''; display:inline-block; width:11px; height:11px;
      border:1.5px solid rgba(0,0,0,.25); border-top-color:#000;
      border-radius:50%; animation:cf-spin .55s linear infinite;
      vertical-align:middle; margin-left:.45rem;
    }
    @keyframes cf-spin { to{transform:rotate(360deg)} }

    /* ============================================================ SUCCESS MODAL */
    .cf-modal {
      position:fixed; inset:0; z-index:9996;
      display:flex; align-items:center; justify-content:center; padding:1.5rem;
    }
    .cf-modal[hidden] { display:none; }

    .cf-modal-backdrop {
      position:absolute; inset:0;
      background:rgba(3,3,3,.82);
      backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
      animation:cf-bd-in .3s ease forwards;
    }
    @keyframes cf-bd-in { from{opacity:0} to{opacity:1} }

    .cf-modal-card {
      position:relative; z-index:1;
      background:var(--surface); border:1px solid var(--border-h);
      border-radius:var(--rl); padding:3rem 2.5rem;
      max-width:460px; width:100%; text-align:center; overflow:hidden;
      animation:cf-card-in .4s var(--eoe) forwards;
    }
    @keyframes cf-card-in {
      from{ transform:scale(.9) translateY(16px); opacity:0; }
      to  { transform:scale(1)  translateY(0);    opacity:1; }
    }

    /* Scan-line texture on card */
    .cf-modal-scan {
      position:absolute; inset:0; pointer-events:none; z-index:0;
      background:repeating-linear-gradient(
        0deg, transparent, transparent 2px,
        rgba(255,255,255,.012) 2px, rgba(255,255,255,.012) 4px
      );
    }

    .cf-modal-icon {
      position:relative; z-index:1; display:block;
      font-family:var(--font-mono); font-size:2.5rem;
      color:rgba(201,249,71,.9); margin-bottom:1rem;
      animation:cf-pop .5s var(--eoe);
    }
    @keyframes cf-pop { from{transform:scale(.4);opacity:0} to{transform:scale(1);opacity:1} }

    .cf-modal-sys {
      position:relative; z-index:1;
      font-family:var(--font-mono); font-size:.6rem;
      letter-spacing:.18em; color:var(--muted-2);
      text-transform:uppercase; margin-bottom:.75rem;
    }
    .cf-modal-title {
      position:relative; z-index:1;
      font-size:1.75rem; font-weight:700; letter-spacing:-.03em; margin-bottom:.6rem;
    }
    .cf-modal-body {
      position:relative; z-index:1;
      color:var(--muted); font-size:.875rem; line-height:1.7; margin-bottom:2rem;
    }
    .cf-modal-close { position:relative; z-index:1; }

    /* ============================================================ 404 PAGE */
    .not-found-section {
      min-height: 100vh;
      display: flex;
      align-items: center;
      padding: 6rem 0 4rem;
    }
    .not-found-inner {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 1rem;
    }

    /* ============================================================ REDUCED MOTION */
    @media(prefers-reduced-motion:reduce){
      *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
      .marquee-track { animation:none; }
      #hero-canvas { display:none; }
    }