/* ── RESET ─────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; display: block; }

    /* ── TOKENS ─────────────────────────────────────── */
    :root {
      --bg:          #0a0a0a;
      --bg-2:        #0f0f0f;
      --bg-3:        #141414;
      --card:        rgba(255,255,255,0.032);
      --card-hov:    rgba(255,255,255,0.055);
      --border:      rgba(255,255,255,0.07);
      --border-mid:  rgba(255,255,255,0.11);
      --accent:      #00ff8c;
      --accent-lt:   #4dffb0;
      --accent-dim:  rgba(0,255,140,0.14);
      --text:        #f0ede8;
      --text-2:      #b8b2ab;
      --text-3:      #6b6560;
      --text-4:      #2e2b28;
      --display:     'Syne', sans-serif;
      --body:        'Space Grotesk', sans-serif;
      --r:           12px;
      --r-lg:        20px;
      --ease:        cubic-bezier(.4,0,.2,1);
    }

    /* ── BASE ───────────────────────────────────────── */
    body {
      background: var(--bg); color: var(--text);
      font-family: var(--body); line-height: 1.6;
      overflow-x: hidden; -webkit-font-smoothing: antialiased;
    }

    /* ── GRID TEXTURE ────────────────────────────────── */
    /* Subtle graph-paper grid that fades toward edges & bottom */
    .grid-bg {
      position: fixed; inset: 0; z-index: -1; pointer-events: none;
      background-image:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
      background-size: 44px 44px;
      -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 0%, black 0%, rgba(0,0,0,.45) 45%, transparent 78%);
      mask-image: radial-gradient(ellipse 90% 80% at 50% 0%, black 0%, rgba(0,0,0,.45) 45%, transparent 78%);
    }
    ::selection { background: var(--accent-dim); color: var(--accent-lt); }
    ::-webkit-scrollbar { width: 4px; }
    ::-webkit-scrollbar-track { background: var(--bg); }
    ::-webkit-scrollbar-thumb {
      background: var(--accent);
      border-radius: 2px;
      box-shadow: 0 0 8px rgba(0,255,140,.8), 0 0 18px rgba(0,255,140,.4);
    }
    ::-webkit-scrollbar-thumb:hover {
      background: var(--accent-lt);
      box-shadow: 0 0 14px rgba(0,255,140,1), 0 0 36px rgba(0,255,140,.9), 0 0 70px rgba(0,255,140,.55), 0 0 120px rgba(0,255,140,.25);
    }
    /* Moving glow that follows the scrollbar thumb */
    .scroll-light {
      position: fixed; right: 0; pointer-events: none; z-index: 98;
      width: 90px; height: 220px; transform: translateY(-50%);
      background: radial-gradient(ellipse at 100% 50%, rgba(0,255,140,.22) 0%, rgba(0,255,140,.07) 38%, transparent 68%);
      will-change: top; transition: width .25s ease, height .25s ease, background .25s ease;
    }
    .scroll-light.lit {
      width: 150px; height: 300px;
      background: radial-gradient(ellipse at 100% 50%, rgba(0,255,140,.32) 0%, rgba(0,255,140,.14) 35%, rgba(0,255,140,.05) 58%, transparent 72%);
    }

    /* ── LAYOUT ─────────────────────────────────────── */
    .wrap { max-width: 1160px; margin: 0 auto; padding: 0 28px; }
    .sec  { padding: 108px 0; }

    /* ── TYPE ───────────────────────────────────────── */
    .eyebrow {
      display: inline-flex; align-items: center; gap: 7px;
      font-size: 10.5px; font-weight: 600; letter-spacing: .14em;
      text-transform: uppercase; color: var(--accent);
    }
    .eyebrow::before { content:''; display:block; width:18px; height:1px; background:var(--accent); }

    .h2 {
      font-family: var(--display);
      font-size: clamp(1.9rem, 3.6vw, 2.85rem);
      font-weight: 700; line-height: 1.15; letter-spacing: -.03em;
      margin: 10px 0;
    }
    .muted { font-size: .94rem; color: var(--text-3); line-height: 1.75; max-width: 480px; }

    /* ── BUTTONS ─────────────────────────────────────── */
    .btn {
      display: inline-flex; align-items: center; gap: 7px;
      padding: 11px 22px; border-radius: 10px;
      font-family: var(--body); font-size: .88rem; font-weight: 600;
      border: 1px solid transparent; white-space: nowrap;
      transition: all .22s var(--ease); cursor: pointer;
    }
    .btn-fill  { background: var(--accent); color: #fff; border-color: var(--accent); }
    .btn-fill:hover  { background: var(--accent-lt); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0,255,140,.28); }
    .btn-ghost { background: transparent; color: var(--text-2); border-color: var(--border-mid); }
    .btn-ghost:hover { color: var(--text); border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.04); transform: translateY(-1px); }

    /* ── REVEAL ─────────────────────────────────────── */
    .rev { opacity: 0; transform: translateY(22px); transition: opacity .65s var(--ease), transform .65s var(--ease); }
    .rev.in { opacity: 1; transform: none; }

    /* ══════════════════════════════════════════════════
       NAVBAR
    ══════════════════════════════════════════════════ */
    .nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 200;
      padding: 18px 0; border-bottom: 1px solid transparent;
      transition: background .3s var(--ease), border-color .3s var(--ease), padding .3s var(--ease);
    }
    .nav.stuck {
      background: rgba(10,10,10,.88);
      backdrop-filter: blur(22px) saturate(180%);
      -webkit-backdrop-filter: blur(22px) saturate(180%);
      border-bottom-color: var(--border);
      padding: 13px 0;
    }
    .nav-row { display: flex; align-items: center; justify-content: space-between; }

    .nav-logo { display: flex; flex-direction: column; align-items: center; line-height: 1; gap: 4px; }
    .nav-logo-mark { height: 22px; width: auto; display: block; }
    .nav-logo-word { font-family: var(--display); font-size: .82rem; font-weight: 800; letter-spacing: -.01em; color: var(--text); }
    .nav-logo-word em { font-style: normal; color: var(--accent); }

    /* Links + CTA grouped on the right, center stays clear for lamp */
    .nav-right { display: flex; align-items: center; gap: 28px; }
    .nav-links { display: flex; align-items: center; gap: 28px; list-style: none; }
    .nav-links a { font-size: .85rem; color: var(--text-3); font-weight: 500; transition: color .22s, text-shadow .22s; }
    .nav-links a:hover { color: var(--accent-lt); text-shadow: 0 0 16px rgba(0,255,140,.5); }

    .nav-cta {
      background: var(--accent); color: #fff; padding: 8px 17px; border-radius: 8px;
      font-family: var(--body); font-size: .82rem; font-weight: 700;
      border: none; cursor: pointer; transition: background .2s, transform .2s, box-shadow .2s;
    }
    .nav-cta:hover { background: var(--accent-lt); transform: translateY(-1px); box-shadow: 0 0 18px rgba(0,255,140,.4); }

    .ham { display: none; flex-direction: column; gap: 4.5px; cursor: pointer; padding: 4px; }
    .ham span { display: block; width: 21px; height: 1.5px; background: var(--text-2); border-radius: 2px; }

    .mob-menu {
      display: none; position: fixed; inset: 0;
      background: rgba(10,10,10,.97); backdrop-filter: blur(20px);
      z-index: 201; flex-direction: column; align-items: center; justify-content: center; gap: 32px;
    }
    .mob-menu.open { display: flex; }
    .mob-menu a { font-family: var(--display); font-size: 2rem; font-weight: 700; color: var(--text-2); transition: color .2s; }
    .mob-menu a:hover { color: var(--accent); }
    .mob-close { position: absolute; top: 20px; right: 28px; font-size: 1.5rem; color: var(--text-3); background: none; border: none; cursor: pointer; }

    /* ══════════════════════════════════════════════════
       HERO
    ══════════════════════════════════════════════════ */
    .hero {
      min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
      padding-top: 72px; position: relative; overflow: hidden;
    }
    /* Amber spotlight — originates from lamp bulb at top center */
    .hero::before {
      content: '';
      position: absolute; top: 0; left: 50%; transform: translateX(-50%);
      width: 920px; height: 720px; pointer-events: none; z-index: 0;
      background:
        radial-gradient(ellipse 58% 62% at 50% 9%, rgba(0,255,140,.28) 0%, transparent 68%),
        radial-gradient(ellipse 24% 18% at 50% 7%, rgba(150,255,225,.18) 0%, transparent 52%);
    }

    /* ── LAMP ───────────────────────────────────────── */
    .lamp {
      position: absolute; top: 0; left: 50%; transform: translateX(-50%);
      z-index: 3; pointer-events: none; width: 60px;
    }
    .lamp-inner {
      transform-origin: 50% 4%;   /* pivot at cord mount */
      transition: transform 0.45s cubic-bezier(.22,.8,.2,1);
    }
    .lamp svg {
      filter:
        drop-shadow(0 2px 10px rgba(0,255,140,.5))
        drop-shadow(0 0 3px rgba(180,255,220,.25));
    }

    .hero-content { position: relative; z-index: 1; text-align: center; padding: 52px 0 40px; }

    .hero-badge {
      display: inline-flex; align-items: center; gap: 8px;
      background: var(--accent-dim); border: 1px solid rgba(0,255,140,.22);
      border-radius: 100px; padding: 5px 14px 5px 8px;
      font-size: .75rem; font-weight: 600; color: var(--accent-lt);
      margin-bottom: 28px; letter-spacing: .03em;
    }
    .bdot { width: 6px; height: 6px; background: var(--accent); border-radius: 50%; animation: blink 2s infinite; }
    @keyframes blink { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.75)} }

    /* REPLACE: name — put surname/key word in .o for orange color */
    .hero-name {
      font-family: var(--display);
      font-size: clamp(3.8rem, 11vw, 9rem);
      font-weight: 800; line-height: .9; letter-spacing: -.045em; color: var(--text);
      margin-bottom: 22px;
    }
    .hero-name .o { color: var(--accent); }

    /* REPLACE: tagline */
    .hero-sub { font-size: clamp(.95rem, 1.8vw, 1.15rem); color: var(--text-3); max-width: 470px; margin: 0 auto 34px; line-height: 1.7; }

    .hero-btns { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }

    /* Code window ─────────────── */
    .cw-wrap { position: relative; z-index: 1; max-width: 740px; margin: 52px auto 0; padding: 0 28px 60px; }

    .cw {
      background: rgba(13,13,13,.96); border: 1px solid var(--border); border-radius: var(--r-lg);
      overflow: hidden;
      box-shadow: 0 50px 90px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.03), inset 0 1px 0 rgba(255,255,255,.04);
      transform: perspective(1400px) rotateX(7deg); transform-origin: top center;
    }
    .cw-bar {
      display: flex; align-items: center; gap: 7px; padding: 11px 16px;
      background: rgba(255,255,255,.025); border-bottom: 1px solid var(--border);
    }
    .wd { width: 10px; height: 10px; border-radius: 50%; }
    .wd-r { background: #ff5f57; } .wd-y { background: #febc2e; } .wd-g { background: #28c840; }
    .cw-title { margin-left: 6px; font-size: .75rem; color: var(--text-3); font-weight: 500; }
    .cw-body { padding: 18px 24px 22px; font-family: 'Fira Code','Cascadia Code','Courier New',monospace; font-size: .8rem; line-height: 1.85; }
    .cl  { display: flex; gap: 16px; }
    .ln  { color: var(--text-4); user-select: none; min-width: 16px; text-align: right; flex-shrink: 0; }
    .kw  { color: #cf8f6f; } .vr { color: #e8c07a; } .st { color: #98c379; }
    .pr  { color: #9fb1d8; } .cm { color: var(--text-3); font-style: italic; }
    .br  { color: var(--text-2); } .nm { color: #d19a66; } .bl { color: #56b6c2; }
    .ind { display: inline-block; width: 20px; }

    /* ══════════════════════════════════════════════════
       PARTNERS
    ══════════════════════════════════════════════════ */
    .partners { padding: 44px 0; background: #0e0c0a; border-top: 1px solid rgba(255,255,255,0.09); border-bottom: 1px solid rgba(255,255,255,0.09); }
    .p-lbl { text-align: center; font-size: .76rem; color: var(--text-3); letter-spacing: .13em; text-transform: uppercase; font-weight: 600; margin-bottom: 26px; }
    .p-row { display: flex; align-items: center; justify-content: center; gap: 44px; flex-wrap: wrap; }

    /* Partner logos — transparent-bg PNGs, grayscale default, colour on hover */
    .pl {
      display: flex; align-items: center; position: relative;
      padding: 4px 10px; border-radius: 10px;
      transition: background .3s var(--ease), box-shadow .3s var(--ease);
    }
    .pl img {
      height: 100px; width: auto; max-width: 240px; object-fit: contain; display: block;
      filter: grayscale(1) brightness(1.5) opacity(0.5);
      transition: filter .3s var(--ease), opacity .3s var(--ease);
    }
    .pl:hover img { filter: grayscale(0) brightness(1) opacity(1); }
    /* Hover-swap variant: shown on hover, hidden by default */
    .pl-hover {
      position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
      opacity: 0; filter: none !important;
    }
    .pl:hover .pl-hover { opacity: 1; }
    .pl:has(.pl-hover):hover img:not(.pl-hover) { opacity: 0; }

    /* ══════════════════════════════════════════════════
       ABOUT
    ══════════════════════════════════════════════════ */
    .about-grid { display: grid; grid-template-columns: 1fr 380px; gap: 72px; align-items: center; }
    .about-p { font-size: .92rem; color: var(--text-3); line-height: 1.78; margin-top: 13px; }

    .about-slogan { font-family: var(--display); font-size: 1.06rem; font-weight: 600; color: var(--text-2); margin-top: 10px; letter-spacing: -.01em; }
    .about-slogan strong { color: var(--accent); font-weight: 700; }

    .stats { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 26px; }
    .stat {
      background: var(--card); border: 1px solid var(--border); border-radius: 100px;
      padding: 7px 15px; display: flex; align-items: center; gap: 7px;
      font-size: .81rem; color: var(--text-2);
    }
    .stat strong { color: var(--text); font-weight: 700; }

    .photo-wrap { position: relative; }
    .photo-frame {
      width: 100%; aspect-ratio: 3/4; background: var(--card);
      border-radius: var(--r-lg); border: 1px solid var(--border);
      display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative;
    }
    .photo-frame::after {
      content: ''; position: absolute; inset: 0; border-radius: var(--r-lg);
      background: linear-gradient(135deg, rgba(0,255,140,.2) 0%, transparent 45%); pointer-events: none;
    }

    .a-float {
      position: absolute; bottom: -14px; left: -18px;
      background: var(--bg-3); border: 1px solid var(--border-mid); border-radius: 12px;
      padding: 10px 14px; display: flex; align-items: center; gap: 10px;
      box-shadow: 0 16px 36px rgba(0,0,0,.45); min-width: 165px;
    }
    .a-float-ico { width: 33px; height: 33px; background: var(--accent-dim); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: .95rem; flex-shrink: 0; }
    .a-float-lbl { font-size: .66rem; color: var(--text-3); text-transform: uppercase; letter-spacing: .08em; }
    /* REPLACE: your status */
    .a-float-val { font-family: var(--display); font-size: .88rem; font-weight: 700; }

    /* ══════════════════════════════════════════════════
       SKILLS GRAPH
    ══════════════════════════════════════════════════ */
    .skills-head { text-align: center; margin-bottom: 36px; }
    .skills-head .muted { margin: 0 auto; }
    .graph-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    #skill-graph { display: block; min-width: 580px; cursor: default; }

    /* ══════════════════════════════════════════════════
       PROJECTS
    ══════════════════════════════════════════════════ */
    .proj-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 36px; flex-wrap: wrap; gap: 14px; }
    .proj-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }

    .pc {
      background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg);
      padding: 26px; display: flex; flex-direction: column; gap: 14px;
      transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
    }
    .pc:hover { background: var(--card-hov); border-color: rgba(0,255,140,.2); transform: translateY(-3px); box-shadow: 0 20px 44px rgba(0,0,0,.28); }
    .pc.feat { grid-column: span 2; flex-direction: row; align-items: flex-start; gap: 28px; }
    .pc.feat .pc-main { flex: 1; display: flex; flex-direction: column; gap: 14px; }
    .pc.feat .pc-vis {
      width: 175px; flex-shrink: 0; align-self: stretch;
      background: var(--accent-dim); border: 1px solid rgba(0,255,140,.2);
      border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 2.8rem;
    }

    .pc-top { display: flex; align-items: center; justify-content: space-between; }
    .pc-num { font-family: var(--display); font-size: .7rem; font-weight: 700; color: var(--accent); letter-spacing: .1em; }
    .pc-ico { width: 33px; height: 33px; background: var(--accent-dim); border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: .9rem; color: var(--accent); }
    .pc-title { font-family: var(--display); font-size: 1.15rem; font-weight: 700; line-height: 1.3; }
    .pc-desc { font-size: .85rem; color: var(--text-3); line-height: 1.72; flex: 1; }

    .pc-tech { display: flex; flex-wrap: wrap; gap: 5px; }
    .tt { background: rgba(255,255,255,.04); border: 1px solid var(--border); border-radius: 5px; padding: 2px 8px; font-size: .71rem; color: var(--text-3); font-family: 'Fira Code',monospace; }

    .pc-link { display: inline-flex; align-items: center; gap: 5px; font-size: .83rem; font-weight: 600; color: var(--accent); transition: gap .2s, opacity .2s; }
    .pc-link:hover { gap: 9px; opacity: .8; }

    /* ══════════════════════════════════════════════════
       SERVICES
    ══════════════════════════════════════════════════ */
    .services-head { margin-bottom: 60px; }
    .services-note { font-size: .84rem; color: var(--text-3); max-width: 480px; line-height: 1.7; margin-top: 10px; }

    .pkg-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px;
    }

    .pkg {
      position: relative;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      padding: 32px 28px 28px;
      display: flex;
      flex-direction: column;
      gap: 0;
      transition: border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
      overflow: hidden;
    }
    .pkg::before {
      content: '';
      position: absolute; inset: 0; border-radius: var(--r-lg); pointer-events: none;
      background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0,255,140,.06) 0%, transparent 65%);
      opacity: 0; transition: opacity .35s var(--ease);
    }
    .pkg:hover { border-color: rgba(0,255,140,.35); background: var(--card-hov); transform: translateY(-4px); box-shadow: 0 16px 48px rgba(0,0,0,.4); }
    .pkg:hover::before { opacity: 1; }

    .pkg-popular {
      border-color: rgba(0,255,140,.4);
      background: rgba(0,255,140,.04);
    }
    .pkg-popular::after {
      content: 'Most Popular';
      position: absolute; top: 16px; right: 16px;
      background: var(--accent); color: #fff;
      font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
      padding: 3px 10px; border-radius: 100px;
    }
    .pkg-popular:hover { border-color: rgba(0,255,140,.65); box-shadow: 0 16px 48px rgba(0,255,140,.15); }

    .pkg-icon {
      width: 40px; height: 40px; border-radius: 10px;
      background: var(--accent-dim); border: 1px solid rgba(0,255,140,.2);
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 20px; color: var(--accent);
    }

    .pkg-name {
      font-family: var(--display); font-size: 1.35rem; font-weight: 700;
      letter-spacing: -.02em; margin-bottom: 4px;
    }
    .pkg-tagline { font-size: .82rem; color: var(--text-3); margin-bottom: 20px; }

    .pkg-divider { height: 1px; background: var(--border); margin: 0 0 20px; }

    .pkg-price-row { display: flex; align-items: baseline; gap: 6px; margin-bottom: 6px; }
    .pkg-amt {
      font-family: var(--body); font-size: 2.6rem; font-weight: 700;
      letter-spacing: -.02em; color: var(--text);
    }
    .pkg-currency { font-size: 1.1rem; font-weight: 600; color: var(--text-2); align-self: flex-start; margin-top: 6px; }
    .pkg-period { font-size: .8rem; color: var(--text-3); }
    .pkg-flex-note { font-size: .76rem; color: var(--accent); font-weight: 600; margin-bottom: 24px; }

    .pkg-feats { list-style: none; display: flex; flex-direction: column; gap: 10px; flex: 1; margin-bottom: 28px; }
    .pkg-feat {
      display: flex; align-items: flex-start; gap: 9px;
      font-size: .84rem; color: var(--text-2); line-height: 1.45;
    }
    .pkg-feat-icon {
      flex-shrink: 0; width: 16px; height: 16px; margin-top: 1px;
      color: var(--accent);
    }
    .pkg-feat.dim { color: var(--text-3); }
    .pkg-feat.dim .pkg-feat-icon { color: var(--text-4); }

    .pkg-cta {
      display: flex; align-items: center; justify-content: center; gap: 7px;
      padding: 12px 20px; border-radius: 10px;
      font-family: var(--body); font-size: .86rem; font-weight: 600;
      border: 1px solid var(--border-mid); color: var(--text-2);
      background: transparent; cursor: pointer;
      transition: all .22s var(--ease); text-decoration: none; white-space: nowrap;
    }
    .pkg-cta:hover { border-color: var(--accent); color: var(--text); background: var(--accent-dim); }
    .pkg-cta-fill { background: var(--accent); color: #fff; border-color: var(--accent); }
    .pkg-cta-fill:hover { background: var(--accent-lt); border-color: var(--accent-lt); box-shadow: 0 8px 24px rgba(0,255,140,.3); }

    .pkg-addons {
      margin-top: 56px; background: var(--card); border: 1px solid var(--border);
      border-radius: var(--r-lg); padding: 28px 32px;
    }
    .pkg-addons-title { font-family: var(--display); font-size: 1rem; font-weight: 700; margin-bottom: 18px; color: var(--text-2); }
    .addon-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
    .addon {
      display: flex; align-items: center; justify-content: space-between; gap: 12px;
      background: var(--bg-3); border: 1px solid var(--border); border-radius: 9px;
      padding: 11px 15px; font-size: .82rem;
    }
    .addon-name { color: var(--text-2); }
    .addon-price { color: var(--accent); font-weight: 600; white-space: nowrap; }

    @media (max-width: 1180px) {
      .pkg-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 860px) {
      .pkg-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
      .services-head { flex-direction: column; gap: 12px; }
    }

    /* ══════════════════════════════════════════════════
       CONTACT
    ══════════════════════════════════════════════════ */
    .contact { position: relative; overflow: hidden; }
    .contact::before {
      content: ''; position: absolute; bottom: -180px; left: 50%; transform: translateX(-50%);
      width: 1200px; height: 1000px; pointer-events: none;
      background: radial-gradient(ellipse 68% 62% at 50% 80%, rgba(0,255,140,.24) 0%, rgba(0,255,140,.08) 50%, transparent 72%);
    }
    .contact-in { position: relative; z-index: 1; text-align: center; max-width: 620px; margin: 0 auto; }
    .contact-h { font-family: var(--display); font-size: clamp(2.4rem, 5.5vw, 4.2rem); font-weight: 800; line-height: 1.08; letter-spacing: -.035em; margin: 10px 0 18px; }
    .contact-h span { color: var(--accent); }
    .contact-email { font-size: .98rem; color: var(--text-3); margin-bottom: 32px; }
    .contact-email a { color: var(--text-2); text-decoration: underline; text-decoration-color: var(--border-mid); text-underline-offset: 4px; transition: color .2s; }
    .contact-email a:hover { color: var(--accent-lt); }

    /* ── CONTACT FORM ────────────────────────────────── */
    .contact-form { text-align: left; }
    .cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .cf-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
    .cf-field label { font-size: .8rem; font-weight: 600; color: var(--text-2); }
    .cf-field input, .cf-field textarea {
      font-family: var(--body); font-size: .92rem; color: var(--text);
      background: var(--card); border: 1px solid var(--border); border-radius: 10px;
      padding: 11px 14px; resize: vertical;
      transition: border-color .2s var(--ease), background .2s var(--ease);
    }
    .cf-field input::placeholder, .cf-field textarea::placeholder { color: rgba(240,237,232,.38); }
    .cf-field input:focus, .cf-field textarea:focus {
      outline: none; border-color: var(--accent); background: var(--card-hov);
    }
    .cf-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
    .cf-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 4px; }
    .cf-actions .btn { border: none; cursor: pointer; }
    .cf-actions .btn:disabled { opacity: .6; cursor: not-allowed; transform: none; box-shadow: none; }
    .cf-status { font-size: .86rem; margin: 0; }
    .cf-status[data-state="success"] { color: var(--accent-lt); }
    .cf-status[data-state="error"]   { color: #ff8a7a; }

    @media (max-width: 640px) {
      .cf-row { grid-template-columns: 1fr; gap: 0; }
    }

    .socials { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 30px; }
    .soc {
      display: inline-flex; align-items: center; gap: 7px;
      background: var(--card); border: 1px solid var(--border); border-radius: 9px;
      padding: 9px 16px; font-size: .84rem; font-weight: 500; color: var(--text-3);
      transition: all .22s var(--ease);
    }
    .soc:hover { border-color: var(--accent); color: var(--text); background: var(--accent-dim); }

    /* ── EMAIL BUTTON SPINNING BORDER ──────────────────── */
    .email-btn-wrap {
      position: relative; display: inline-flex;
      border-radius: 12px; padding: 1.5px; overflow: hidden; isolation: isolate;
    }
    .email-btn-wrap::before {
      content: '';
      position: absolute; top: 50%; left: 50%;
      width: 300%; height: 300%;
      background: conic-gradient(
        from 0deg,
        transparent 0%, transparent 70%,
        rgba(0,255,140,.75) 74%,
        rgba(130,255,210,1)  78%,
        rgba(0,255,140,.75) 82%,
        transparent 86%
      );
      animation: email-border-spin 2.4s linear infinite;
      transform: translate(-50%, -50%) rotate(0deg);
      transition: opacity .2s ease;
    }
    .email-btn-wrap:hover::before { opacity: 0; }
    .email-btn-wrap .btn-fill { position: relative; z-index: 1; }
    .email-btn-wrap:hover .btn-fill {
      background: var(--accent-lt);
      box-shadow: 0 0 6px rgba(0,255,140,1), 0 0 18px rgba(0,255,140,.9), 0 0 40px rgba(0,255,140,.6), 0 0 80px rgba(0,255,140,.25);
      transform: translateY(-1px);
    }
    @keyframes email-border-spin {
      to { transform: translate(-50%, -50%) rotate(360deg); }
    }

    /* ══════════════════════════════════════════════════
       FOOTER
    ══════════════════════════════════════════════════ */
    .footer { padding: 44px 0 24px; border-top: 1px solid var(--border); }
    .foot-top {
      display: flex; align-items: flex-start; justify-content: space-between;
      flex-wrap: wrap; gap: 28px;
      padding-bottom: 26px; border-bottom: 1px solid var(--border);
    }
    .foot-brand { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; gap: 4px; cursor: default; }
    .foot-mark { height: 26px; width: auto; margin-bottom: 2px; }
    .foot-mha { font-family: var(--display); font-weight: 800; font-size: .95rem; color: var(--text-2); letter-spacing: -.02em; transition: color .22s var(--ease), text-shadow .22s var(--ease); }
    .foot-brand:hover .foot-mha { color: var(--accent-lt); text-shadow: 0 0 18px rgba(0,255,140,.65), 0 0 40px rgba(0,255,140,.3); }
    .foot-mha em { font-style: normal; color: var(--accent); }
    .foot-sub { font-family: var(--body); font-size: .62rem; color: var(--text-3); letter-spacing: .02em; }
    .foot-nav { display: flex; align-items: center; gap: 22px; }
    .foot-link {
      display: inline-flex; align-items: center; gap: 6px;
      color: var(--text-3); font-size: .82rem; font-weight: 500;
      transition: color .22s var(--ease), text-shadow .22s var(--ease);
    }
    .foot-link:hover { color: var(--accent-lt); text-shadow: 0 0 12px rgba(0,255,140,.45); }
    .foot-email { font-weight: 600; color: var(--text-2); }
    .foot-bottom { padding-top: 18px; text-align: center; font-size: .76rem; color: var(--text-3); }

    /* ══════════════════════════════════════════════════
       RESPONSIVE
    ══════════════════════════════════════════════════ */
    @media (max-width: 960px) {
      .about-grid { grid-template-columns: 1fr; gap: 52px; }
      .photo-wrap { max-width: 300px; margin: 0 auto; padding-bottom: 24px; }
      .proj-grid { grid-template-columns: repeat(2,1fr); }
      .pc.feat { grid-column: span 2; flex-direction: column; }
      .pc.feat .pc-vis { width: 100%; height: 110px; }
    }
    @media (max-width: 640px) {
      .wrap { padding: 0 18px; }
      .sec { padding: 64px 0; }
      .nav-right { display: none; }
      .ham { display: flex; padding: 8px; margin-right: -8px; }
      .hero-content { padding: 28px 0 20px; }
      .hero-name { font-size: min(10vw, 3.4rem); letter-spacing: -.025em; }
      .hero-sub { font-size: min(3.8vw, .95rem); max-width: 100%; }
      .proj-grid { grid-template-columns: 1fr; }
      .pc.feat { grid-column: span 1; }
      .pl img { height: 60px; max-width: 180px; }
      .pl-hover { height: 60px; max-width: 180px; }
      .p-row { gap: 16px; }
      .cw { transform: none; overflow-x: auto; }
      .cw-wrap { padding: 0 0 40px; }
      .cw-body { white-space: nowrap; font-size: .72rem; padding-left: 14px; padding-right: 14px; }
      .photo-wrap { max-width: 260px; }
      .a-float { left: 0; }
      .services-head { margin-bottom: 40px; }
      .foot-top { flex-direction: column; align-items: center; text-align: center; }
      .foot-brand { align-items: center; }
      .foot-nav { flex-wrap: wrap; justify-content: center; }
    }

    /* ── PROCESS CARD (testsite about section) ──────────── */
    .proc-card {
      background: var(--card); border: 1px solid var(--border);
      border-radius: var(--r-lg); padding: 32px 28px;
      display: flex; flex-direction: column; gap: 0;
      align-self: start;
    }
    .proc-step {
      display: flex; gap: 18px; align-items: flex-start; padding: 22px 0;
    }
    .proc-num {
      font-family: var(--display); font-size: 1.6rem; font-weight: 800;
      color: var(--accent); letter-spacing: -.03em; line-height: 1;
      min-width: 32px; flex-shrink: 0;
    }
    .proc-title {
      font-family: var(--display); font-size: .98rem; font-weight: 700;
      color: var(--text); margin-bottom: 6px;
    }
    .proc-desc { font-size: .84rem; color: var(--text-3); line-height: 1.65; }
    .proc-div { height: 1px; background: var(--border); }
    @media (max-width: 960px) {
      .proc-card { max-width: 460px; margin: 0 auto; width: 100%; }
    }

    /* ── ROBOT SCENE — large robot with arch of logos ── */
    .robo-scene {
      position: relative; z-index: 1;
      width: 100%; max-width: 1000px;
      margin: 16px auto 0;
      min-height: 78vh;
      display: flex; align-items: flex-end; justify-content: center;
    }
    .robo-arch {
      position: absolute; inset: 0; pointer-events: none;
    }
    /* Each logo sits at its (left, top) point on the arch curve */
    .robo-logo {
      position: absolute;
      width: 48px; height: 48px; object-fit: contain;
      transform: translate(-50%, -50%);
      animation: float-tool 2.8s ease-in-out infinite;
      animation-delay: var(--d, 0s);
      filter: drop-shadow(0 0 10px rgba(0,255,140,0.55));
    }
        /* Each logo sits at its (left, top) point on the arch curve */
    .robo-logo2 {
      position: absolute;
      width: 150px; height: 150px; object-fit: contain;
      transform: translate(-50%, -50%);
      animation: float-tool 2.8s ease-in-out infinite;
      animation-delay: var(--d, 0s);
      filter: drop-shadow(0 0 10px rgba(0,255,140,0.55));
    }
    @keyframes float-tool {
      0%,100% { transform: translate(-50%,-50%) translateY(0);    opacity: 0.7; }
      50%      { transform: translate(-50%,-50%) translateY(-10px); opacity: 1;   }
    }
    .robo-img {
      height: 74vh; min-height: 460px; max-height: 820px;
      width: auto; max-width: 90%;
      object-fit: contain; position: relative; z-index: 1;
      filter: drop-shadow(0 0 48px rgba(0,255,140,0.28))
              drop-shadow(0 0 14px rgba(0,255,140,0.14));
    }
    @media (max-width: 760px) {
      .robo-scene  { min-height: 60vh; }
      .robo-img    { height: 56vh; min-height: 320px; }
      .robo-logo   { width: 34px; height: 34px; }
    }
    @media (max-width: 480px) {
      .robo-logo   { width: 26px; height: 26px; }
    }

    /* ── HERO CINEMATIC ──────────────────────────────── */
    .hero-cinematic {
      position: relative; z-index: 1;
      width: 100%; max-width: 940px;
      margin: 8px auto 16px;
    }
    /* W + robot + E flex row — defines the composition height */
    .hc-row {
      display: flex; align-items: flex-start;
      justify-content: center; gap: 4px;
      position: relative; z-index: 2;
    }
    .hc-w, .hc-e {
      font-family: var(--display); font-weight: 800;
      font-size: clamp(3.8rem, 11vw, 9rem);
      letter-spacing: -.04em; line-height: .88;
      color: var(--text); flex-shrink: 0;
      position: relative; z-index: 0;
      padding-top: .04em; /* nudge down slightly to align with robot head */
    }
    .hc-robot {
      height: 58vh; min-height: 380px; max-height: 700px;
      width: auto; max-width: 52vw;
      flex-shrink: 0; display: block;
      position: relative; z-index: 1; /* in front of W and E */
      filter: drop-shadow(0 0 44px rgba(0,255,140,0.26))
              drop-shadow(0 0 12px rgba(0,255,140,0.12));
    }
    /* BUILD sits behind the entire hc-row (z:1 < hc-row z:2) */
    .hc-build {
      position: absolute;
      top: 35%; left: 50%; transform: translateX(-50%);
      font-family: var(--display); font-weight: 800;
      font-size: clamp(3.2rem, 12vw, 9.5rem);
      letter-spacing: -.04em; line-height: 1;
      color: var(--text); white-space: nowrap;
      z-index: 1;
    }
    /* WEBSITES. sits in front of the entire hc-row (z:3 > hc-row z:2) */
    .hc-sites {
      position: absolute;
      bottom: -.05em; left: 50%; transform: translateX(-50%);
      font-family: var(--display); font-weight: 800;
      font-size: clamp(2.6rem, 10vw, 7.5rem);
      letter-spacing: -.04em; white-space: nowrap;
      z-index: 3;
    }
    @media (max-width: 640px) {
      .hc-robot { height: 48vh; min-height: 280px; max-width: 70vw; }
      .hc-w, .hc-e { font-size: min(10vw, 3.2rem); }
      .hc-build  { font-size: min(10.5vw, 3rem); top: 32%; }
      .hc-sites  { font-size: min(9.5vw, 2.6rem); }
    }

    /* ── CINEMATIC UPDATES ───────────────────────────── */
    /* Bigger robot */
    .hc-robot {
      height: 68vh !important; min-height: 440px !important;
    }
    /* W and E pushed into robot — use negative margin so they visually overlap */
    .hc-row { gap: 0 !important; }
    .hc-w   { margin-right: -26px; }
    .hc-e   { margin-left:  -26px; }

    /* ── FLOATING HERO LOGOS ─────────────────────────── */
    .hc-floats {
      position: absolute; inset: 0;
      pointer-events: none; z-index: 5;
    }
    .hc-float {
      position: absolute;
      width: 38px; height: 38px; object-fit: contain;
      animation: float-hero 2.8s ease-in-out infinite;
      animation-delay: var(--d, 0s);
      filter: drop-shadow(0 0 8px rgba(0,255,140,0.45));
    }
    @keyframes float-hero {
      0%,100% { transform: translateY(0);    opacity: 0.65; }
      50%      { transform: translateY(-9px); opacity: 1;   }
    }

    /* ── ELECTRIC ARCS (SVG) ─────────────────────────── */
    .hc-elec {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      pointer-events: none;
    }
    .hc-elec-bg { z-index: 1; }  /* behind BUILD + row  */
    .hc-elec-fg { z-index: 4; }  /* in front of WEBSITES. */

    .lc {
      fill: none;
      stroke: rgba(0,255,140,0.92);
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* Each arc class: different length + delay for organic feel */
    .lc-1  { stroke-dasharray:480; stroke-dashoffset:480; animation: elec-arc 3.6s ease-in-out infinite 0s;    }
    .lc-2  { stroke-dasharray:480; stroke-dashoffset:480; animation: elec-arc 3.6s ease-in-out infinite 1.4s;  }
    .lc-3  { stroke-dasharray:220; stroke-dashoffset:220; animation: elec-arc 2.8s ease-in-out infinite 0.7s;  stroke:rgba(0,255,140,0.7); }
    .lc-4  { stroke-dasharray:140; stroke-dashoffset:140; animation: elec-arc 2.4s ease-in-out infinite 0.3s;  }
    .lc-5  { stroke-dasharray:140; stroke-dashoffset:140; animation: elec-arc 2.4s ease-in-out infinite 1.9s;  }
    .lc-6  { stroke-dasharray:140; stroke-dashoffset:140; animation: elec-arc 2.2s ease-in-out infinite 1.0s;  stroke:rgba(0,255,140,0.75); }
    .lc-6b { stroke-dasharray:140; stroke-dashoffset:140; animation: elec-arc 2.2s ease-in-out infinite 2.3s;  stroke:rgba(0,255,140,0.75); }

    @keyframes elec-arc {
      0%   { stroke-dashoffset: var(--len, 480); opacity: 0; }
      4%   { opacity: 0.95; stroke-dashoffset: calc(var(--len,480) * .78); }
      5%   { opacity: 0.2; }
      7%   { opacity: 0.9;  stroke-dashoffset: calc(var(--len,480) * .55); }
      9%   { opacity: 0.15; }
      13%  { opacity: 1;    stroke-dashoffset: 0; }
      20%  { opacity: 0;    stroke-dashoffset: 0; }
      100% { stroke-dashoffset: var(--len, 480); opacity: 0; }
    }
    /* Override --len per arc via stroke-dasharray (browsers use the property directly) */
    .lc-1,.lc-2 { --len: 480; }
    .lc-3        { --len: 220; }
    .lc-4,.lc-5,.lc-6,.lc-6b { --len: 140; }

    /* ── LETTER ELECTRIC FLICKER ─────────────────────── */
    @keyframes elec-flicker {
      0%,92%,100% { text-shadow: none; opacity: 1; }
      93%  { text-shadow: 0 0 18px rgba(0,255,140,0.95), 0 0 40px rgba(0,255,140,0.55); opacity:0.88; }
      94%  { text-shadow: none; opacity: 1; }
      96%  { text-shadow: 0 0 24px rgba(0,255,140,1),   0 0 60px rgba(0,255,140,0.7);  opacity:0.82; }
      97%  { text-shadow: none; opacity: 1; }
    }
    .hc-w    { animation: elec-flicker 5.2s ease-in-out infinite 0.6s; }
    .hc-e    { animation: elec-flicker 5.2s ease-in-out infinite 2.1s; }
    .hc-build{ animation: elec-flicker 6.5s ease-in-out infinite 1.3s; color: var(--text); }

    /* ── ROBOT ELECTRIC PULSE ────────────────────────── */
    @keyframes elec-robot {
      0%,80%,100% {
        filter: drop-shadow(0 0 44px rgba(0,255,140,.26)) drop-shadow(0 0 12px rgba(0,255,140,.12));
      }
      82% {
        filter: drop-shadow(0 0 80px rgba(0,255,140,.85)) drop-shadow(0 0 28px rgba(200,255,240,.7)) drop-shadow(0 0 5px rgba(255,255,255,.9));
      }
      83% {
        filter: drop-shadow(0 0 44px rgba(0,255,140,.26)) drop-shadow(0 0 12px rgba(0,255,140,.12));
      }
      86% {
        filter: drop-shadow(0 0 75px rgba(0,255,140,.8)) drop-shadow(0 0 24px rgba(200,255,240,.6));
      }
      87% {
        filter: drop-shadow(0 0 44px rgba(0,255,140,.26)) drop-shadow(0 0 12px rgba(0,255,140,.12));
      }
    }
    .hc-robot { animation: elec-robot 4.5s ease-in-out infinite !important; }

    /* ── LAMP HOVER GLOW ─────────────────────────────── */
    .lamp { cursor: pointer; }
    .lamp svg {
      transition: filter .25s ease;
    }
    .lamp:hover svg {
      filter:
        drop-shadow(0 0 36px rgba(0,255,140,1))
        drop-shadow(0 0 70px rgba(0,255,140,0.75))
        drop-shadow(0 0 10px rgba(220,255,240,0.95)) !important;
    }
    /* Hero spotlight intensifies when lamp is hovered */
    .hero:has(.lamp:hover)::before {
      background:
        radial-gradient(ellipse 65% 68% at 50% 8%, rgba(0,255,140,.52) 0%, transparent 65%),
        radial-gradient(ellipse 28% 20% at 50% 6%, rgba(180,255,225,.38) 0%, transparent 50%);
      transition: background .25s ease;
    }

    @media (max-width: 640px) {
      .hc-float   { width: 28px; height: 28px; }
      .hc-w       { margin-right: -14px; }
      .hc-e       { margin-left:  -14px; }
    }

    /* ═══════════════════════════════════════════════════
       REFINEMENTS
    ═══════════════════════════════════════════════════ */

    /* Toned-down accent — less blinding green for buttons */
    :root {
      --accent:     #00c870;
      --accent-lt:  #00e882;
      --accent-dim: rgba(0,200,112,0.13);
    }

    /* .o class: accent color everywhere (not only inside .hero-name) */
    .o { color: var(--accent); }

    /* W/E — restore gap, remove negative overlap */
    .hc-row { gap: 8px !important; }
    .hc-w   { margin-right: 0 !important; }
    .hc-e   { margin-left:  0 !important; }

    /* Float logos — explicit delays so they definitely bob */
    .hc-float {
      will-change: transform;
      animation: float-hero 2.8s ease-in-out infinite !important;
      animation-delay: var(--d,0s) !important;
    }
    @keyframes float-hero {
      0%,100% { transform: translateY(0);    opacity: .65; }
      50%      { transform: translateY(-9px); opacity: 1;   }
    }

    /* Electricity — much less frequent, much softer strokes */
    .lc { stroke-width: 1.4; stroke: rgba(0,220,120,0.7); }
    .lc-1  { animation-duration:  9s !important; animation-delay:  0s   !important; }
    .lc-2  { animation-duration: 10s !important; animation-delay:  2.8s !important; }
    .lc-3  { animation-duration:  8s !important; animation-delay:  1.4s !important; }
    .lc-4  { animation-duration:  7s !important; animation-delay:  0.6s !important; }
    .lc-5  { animation-duration:  8s !important; animation-delay:  3.5s !important; }
    .lc-6  { animation-duration:  6s !important; animation-delay:  2.0s !important; }
    .lc-6b { animation-duration:  7s !important; animation-delay:  4.5s !important; }

    /* Letter flicker — rare, subtle */
    @keyframes elec-flicker {
      0%,94%,100% { text-shadow:none; opacity:1; }
      95%  { text-shadow: 0 0 10px rgba(0,220,120,.6), 0 0 24px rgba(0,220,120,.3); opacity:.93; }
      96%  { text-shadow:none; opacity:1; }
      98%  { text-shadow: 0 0 12px rgba(0,220,120,.5), 0 0 30px rgba(0,220,120,.25); opacity:.9; }
    }
    .hc-w    { animation: elec-flicker 9s  ease-in-out infinite 1.2s !important; }
    .hc-e    { animation: elec-flicker 9s  ease-in-out infinite 3.8s !important; }
    .hc-build{ animation: elec-flicker 12s ease-in-out infinite 2.4s !important; }

    /* Robot glow — subtle base, rare soft flash */
    @keyframes elec-robot {
      0%,84%,100% {
        filter: drop-shadow(0 0 28px rgba(0,200,112,.14)) drop-shadow(0 0 7px rgba(0,200,112,.07));
      }
      86% {
        filter: drop-shadow(0 0 48px rgba(0,220,120,.32)) drop-shadow(0 0 14px rgba(0,220,120,.16));
      }
      87% {
        filter: drop-shadow(0 0 28px rgba(0,200,112,.14)) drop-shadow(0 0 7px rgba(0,200,112,.07));
      }
      90% {
        filter: drop-shadow(0 0 40px rgba(0,220,120,.26)) drop-shadow(0 0 10px rgba(0,220,120,.12));
      }
    }
    .hc-robot { animation: elec-robot 6s ease-in-out infinite !important; }

    /* ── WORD FLIP: WEBSITES / VISIONS / NETWORKS ────── */
    .hc-sites { perspective: 900px; }
    .wf {
      display: inline-block;
      position: relative;
    }
    .wf-a, .wf-b, .wf-c {
      display: flex; align-items: center; justify-content: center;
      position: absolute; inset: 0;
      white-space: nowrap;
      backface-visibility: hidden;
      color: var(--accent);
      opacity: 0;
      transform: rotateX(90deg);
      animation: wf-cycle 9s cubic-bezier(.45,.05,.55,.95) infinite;
    }
    .wf-a { position: relative; animation-delay: 0s; }
    .wf-b { animation-delay: 3s; }
    .wf-c { animation-delay: 6s; }
    @keyframes wf-cycle {
      0%, 100% { opacity: 0; transform: rotateX(90deg); }
      4%, 29%  { opacity: 1; transform: rotateX(0deg); }
      33%      { opacity: 0; transform: rotateX(-90deg); }
    }

    /* ── HCO COMPOSITION (WE + arch + robot) ────────── */
    .hc-comp {
      position: relative;
      display: flex; justify-content: center; align-items: flex-start;
      z-index: 2; /* above hc-build z:1 */
    }
    /* WE — centred, behind robot's head */
    .hc-we {
      position: absolute;
      top: 6%; left: 50%; transform: translateX(-50%);
      font-family: var(--display); font-weight: 800;
      font-size: clamp(3.8rem, 12vw, 9.5rem);
      letter-spacing: -.04em; line-height: .88;
      color: var(--text); white-space: nowrap;
      z-index: 0; /* robot (z:1) paints over it */
      animation: elec-flicker 9s ease-in-out infinite 1.2s;
    }
    /* Arch overlay — on top of robot */
    .hc-arch {
      position: absolute; inset: 0;
      pointer-events: none;
      z-index: 2; /* above robot z:1 */
    }
    .hc-arch .robo-logo { pointer-events: auto; }

    /* Remove old scattered-float rules that are no longer used */
    .hc-floats, .hc-float { display: none; }

    /* ── PROGRESSIVE LAMP GLOW CSS ───────────────────── */
    /* JS sets data-glow="1..4" on .hero as cursor lingers */
    .hero[data-glow="1"]::before {
      background:
        radial-gradient(ellipse 60% 64% at 50% 8%, rgba(0,220,112,.22) 0%, transparent 65%),
        radial-gradient(ellipse 25% 18% at 50% 7%, rgba(150,255,205,.16) 0%, transparent 50%);
    }
    .hero[data-glow="2"]::before {
      background:
        radial-gradient(ellipse 62% 67% at 50% 8%, rgba(0,220,112,.34) 0%, transparent 65%),
        radial-gradient(ellipse 26% 19% at 50% 7%, rgba(150,255,205,.24) 0%, transparent 50%);
    }
    .hero[data-glow="3"]::before {
      background:
        radial-gradient(ellipse 64% 70% at 50% 8%, rgba(0,220,112,.46) 0%, transparent 65%),
        radial-gradient(ellipse 27% 20% at 50% 7%, rgba(150,255,205,.32) 0%, transparent 50%);
    }
    .hero[data-glow="4"]::before {
      background:
        radial-gradient(ellipse 66% 73% at 50% 8%, rgba(0,220,112,.60) 0%, transparent 65%),
        radial-gradient(ellipse 28% 22% at 50% 7%, rgba(150,255,205,.40) 0%, transparent 50%);
    }

    /* ── MOBILE: fix robot stretch + tighten vertical spacing ── */
    @media (max-width: 640px) {
      .hc-robot {
        height: 44vh !important;
        min-height: 210px !important;
        max-height: 320px !important;
      }
      .hero-content {
        padding: 12px 0 8px !important;
      }
      .hero-cinematic {
        margin: 2px auto 6px !important;
      }
      .hero-badge {
        margin-bottom: 14px !important;
      }
      .hero-sub {
        margin-bottom: 18px !important;
      }
    }