/**
 * HERO SECTION — the big opening section of index.html: the glowing
 * lamp at the top (also the light/dark mode switch), the "VigiWorks"
 * heading and tagline, the code-window graphic, and the animated
 * robot/lettering scene below it ("hero-cinematic").
 *
 * WHERE TO LOOK FOR SPECIFIC THINGS:
 *   - Lamp POSITION (where it sits on the page) — the `.lamp` rule,
 *     just below.
 *   - Lamp SWAY (it tilts slightly as your cursor moves near it) — NOT
 *     controlled by this file at all. That's done in JavaScript, in
 *     public/js/marketing/theme.js, which directly sets the lamp's
 *     rotation as an inline style based on cursor position.
 *   - Lamp GLOW brightness/intensity while hovering — mostly controlled
 *     by JavaScript too (theme.js gradually increases a "glow level"
 *     the longer you hover, and writes it directly onto the lamp as an
 *     inline `filter` style). The `.lamp:hover svg` rule in the "LAMP
 *     HOVER GLOW" section below is only a simple fallback glow; the JS
 *     version overrides it (using `!important`) as soon as you start
 *     hovering. To change how fast the glow builds/fades, or how bright
 *     it gets, edit theme.js, not this file.
 *   - The green "spotlight" glow behind the lamp — `.hero::before`,
 *     just below, and the `.hero[data-glow="1..4"]` rules further down
 *     (those 4 steps are also driven by theme.js, based on hover time).
 *   - The page's one real h1 and its tagline — `.hero-sub`. (Despite the
 *     similar name, `.hero-name` further down has no matching markup in
 *     index.html and is unused — don't confuse the two.)
 *   - The animated robot + flickering "WE BUILD WEBSITES" text — the
 *     "HERO CINEMATIC" section, further down.
 *   - Animation SPEED/timing for the flickering text and electric-arc
 *     effects — see the "REFINEMENTS" section near the bottom of this
 *     file (explained below).
 *
 * A FEW THINGS WORTH KNOWING BEFORE YOU EDIT THIS FILE:
 *
 * 1. In the "ROBOT SCENE" block below, `.robo-scene`/`.robo-img`/
 *    `.robo-arch` have no matching markup in index.html (verified: zero
 *    matches) — editing them has no visible effect. The robot you
 *    actually see on the live page is built by the `.hc-*` "HERO
 *    CINEMATIC" rules further down. `.robo-logo`/`.robo-logo2`, despite
 *    sharing the "robo-" prefix, ARE used — they're the small floating
 *    tech-stack icons around the robot, placed by index.html's markup
 *    inside the `.hc-arch` element from HERO CINEMATIC, not by
 *    `.robo-scene`/`.robo-arch` above them.
 * 2. `float-hero`, `elec-flicker`, and `elec-robot` (animation timing
 *    definitions) are each declared TWICE in this file (once in "HERO
 *    CINEMATIC", again — with softer/slower values — in "REFINEMENTS"
 *    near the bottom). That's not a mistake: in CSS, when an `@keyframes`
 *    animation is defined twice with the same name, the LAST definition
 *    completely replaces the first one — so the REFINEMENTS versions
 *    (the softer ones) are what you actually see on the site today. If
 *    you want to change how the flicker/glow animations behave, edit
 *    the versions in REFINEMENTS, near the bottom — editing the first
 *    ("HERO CINEMATIC") versions further up will have no visible effect.
 *    If you ever reorder this file, keep the REFINEMENTS versions after
 *    the ones in HERO CINEMATIC, or you'll flip which one "wins".
 * 3. `.hc-row`, `.hc-w`, and `.hc-e` (near the "W + robot + E flex row"
 *    comment, just above "HERO CINEMATIC") also have no matching markup
 *    in index.html (verified: zero matches) — the current markup spells
 *    out "WE" as a single `.hc-we` element instead of a separate "W" and
 *    "E" on either side of the robot. Editing `.hc-row`/`.hc-w`/`.hc-e`
 *    (including their overrides further down, in "HERO CINEMATIC" and
 *    "REFINEMENTS") has no visible effect.
 *
 * Requires base.css (tokens) to be linked first.
 */

/* The full-screen dark section at the top of the page. min-height:100vh
   makes it always fill at least the visitor's whole screen height. */
.hero {
  min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
  padding-top: 72px; position: relative; overflow: hidden;
}
/* The soft green glow behind the lamp, always-on at a low level (JS
   brightens it further while you hover the lamp — see this file's top
   comment). Change the colors/opacity here to adjust the glow's base
   color and intensity; change width/height to change how large an area
   it covers. */
.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%);
  transition: background .3s ease;
}
/* Lamp is "off" in light mode — no ambient spill onto the hero */
[data-theme="light"] .hero::before { background: none; }

/* ── LAMP (also doubles as the light/dark mode toggle) ──────────── */
/* This is the lamp's position on the page: centered horizontally
   (left:50% + the transform), pinned to the very top of the hero
   section. `width: 60px` sets its overall size (the actual lamp image
   is inline SVG in index.html, so this just sets the box it's drawn
   in). To move the lamp lower, change `top: 0` to a larger value — but
   see the file-splitting notes in this project's history: the lamp
   sits right where the fixed nav bar's invisible click area ends, so
   moving it can require nav.css changes too if it overlaps. */
.lamp {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  z-index: 3; width: 60px;
}
.lamp:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 6px; }
/* `transform-origin` sets the pivot point the lamp swings from when
   JavaScript (theme.js) rotates it — 50% 4% means "near the very top,
   where the cord would attach", so it swings like it's hanging from
   there. The `transition` controls how smoothly it swings back and
   forth — a shorter time makes the sway feel snappier/twitchier, a
   longer one makes it feel slower/heavier. */
.lamp-inner {
  transform-origin: 50% 4%;   /* pivot at cord mount */
  transition: transform 0.45s cubic-bezier(.22,.8,.2,1);
}
/* The lamp's resting (not hovered) glow — a small drop-shadow so it
   reads as lit even before you interact with it. */
.lamp svg {
  filter:
    drop-shadow(0 2px 10px rgba(0,255,140,.5))
    drop-shadow(0 0 3px rgba(180,255,220,.25));
  transition: filter .3s ease, opacity .3s ease;
}

.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 the accent-green color.
   The big "VigiWorks" heading style. `.o` is a small reusable utility
   class (also used further down, on the cycling words in .wf-a/.wf-b/
   .wf-c): wrap any word or letter in `<span class="o">...</span>` and it
   renders in the accent green instead of the normal text color, via
   `color: var(--accent)`. `clamp(3.8rem, 11vw, 9rem)` means "shrink/grow
   with screen width, but never smaller than 3.8rem or bigger than 9rem"
   — built-in responsive sizing without a separate mobile override. */
.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. This is the page's actual <h1> (see index.html) —
   font-weight:400 is required here: browsers bold <h1> by default, and
   without this override this text would render bolder than it did back
   when it was a <p>. Every other property below already fully overrides
   the browser's default h1/p styling either way. */
.hero-sub { font-size: clamp(.95rem, 1.8vw, 1.15rem); font-weight: 400; 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 ─────────────── */
/* The little "editor window" graphic under the hero heading, styled to
   look like a code editor with colored dots and syntax-highlighted
   text. Purely decorative — the "code" inside it is just styled text in
   index.html, not real running code. */
.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 = "window dot" — the 3 small circles in the top bar that mimic a
   macOS window's red/yellow/green close/minimize/maximize buttons. */
.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 = one line of the fake code ("code line"); .ln = its line number. */
.cl  { display: flex; gap: 16px; }
.ln  { color: var(--text-4); user-select: none; min-width: 16px; text-align: right; flex-shrink: 0; }
/* Syntax-highlighting colors applied to spans of text inside .cl, one
   class per token type: .kw = keyword, .vr = variable, .st = string,
   .pr = property, .cm = comment, .br = bracket/punctuation, .nm = number,
   .bl = boolean. index.html hand-wraps each word in the fake code with
   the matching class — there's no real syntax highlighter involved. */
.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 = one level of fake indentation (a fixed-width empty inline box,
   not a real tab character) inside a .cl line. */
.ind { display: inline-block; width: 20px; }

/* Mobile/small-screen overrides for this section (hero heading, code
   window). */
@media (max-width: 640px) {
  .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%; }
  .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; }
}

/* ── ROBOT SCENE — large robot with arch of logos ── */
/* Unused on the current page (see file header) — kept verbatim. */
.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
   The animated scene below the tagline: a big "W" and "E" on either
   side of the robot graphic, "BUILD" behind it, and "WEBSITES." (which
   cycles between a few different words) in front. Everything below this
   point, down through "REFINEMENTS", is part of this one composition.
══════════════════════════════════════════════════ */
.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));
}
/* ── ROBOT TIP BUBBLE — first-visit lamp hint + playful hover lines,
   alternating on either side of the robot's head ── */
.bot-tip {
  position: absolute;
  top: 4%;
  max-width: 220px;
  background: rgba(8,7,6,.96);
  border: 1px solid var(--border-mid);
  border-radius: 14px;
  padding: 12px 30px 12px 16px;
  font-size: .82rem; line-height: 1.5;
  color: var(--text-2);
  box-shadow: 0 14px 34px rgba(0,0,0,.55);
  z-index: 6;
  opacity: 0;
  transform: translateY(6px) scale(.96);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
  pointer-events: none;
}
.bot-tip.show { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.bot-tip p { margin: 0; }
.bot-tip-close {
  position: absolute; top: 5px; right: 7px;
  width: 18px; height: 18px; display: flex; align-items: center; justify-content: center;
  border: none; background: none; cursor: pointer; padding: 0; border-radius: 50%;
  color: var(--text-3); font-size: 1rem; line-height: 1;
  transition: color .2s ease, background .2s ease;
}
.bot-tip-close:hover { color: var(--text); background: var(--card-hov); }

/* Bubble sits to the robot's right, tail points down-left into it */
.bot-tip.side-right { right: -6%; left: auto; }
.bot-tip.side-right::after {
  content: ""; position: absolute; bottom: -8px; left: 30px;
  width: 15px; height: 15px; background: rgba(8,7,6,.96);
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  transform: rotate(45deg);
}
/* Bubble sits to the robot's left, tail points down-right into it */
.bot-tip.side-left { left: -6%; right: auto; }
.bot-tip.side-left::after {
  content: ""; position: absolute; bottom: -8px; right: 30px;
  width: 15px; height: 15px; background: rgba(8,7,6,.96);
  border-left: 1px solid var(--border); border-top: 1px solid var(--border);
  transform: rotate(45deg);
}

@media (max-width: 760px) {
  .bot-tip.side-right { top: 10px; right: 2%; max-width: 180px; font-size: .78rem; }
  .bot-tip.side-left  { top: 10px; left: 2%;  max-width: 180px; font-size: .78rem; }
}
@media (max-width: 480px) {
  .bot-tip.side-right, .bot-tip.side-left {
    left: 50%; right: auto; top: 8px; max-width: 88vw; width: max-content; text-align: center;
    transform: translateX(-50%) translateY(6px) scale(.96);
  }
  .bot-tip.side-right.show, .bot-tip.side-left.show { transform: translateX(-50%) translateY(0) scale(1); }
  .bot-tip.side-right::after, .bot-tip.side-left::after {
    left: 50%; right: auto; transform: translateX(-50%) rotate(45deg);
    border-left: none; border-top: none;
    border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  }
}

/* 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 = one jagged electric-arc line — an SVG <polyline> inside the
   .hc-elec group above. .lc-1 through .lc-6b (below) are the individual
   arcs; each gets its own length/animation delay so they don't all flash
   in sync. */
.lc {
  fill: none;
  stroke: rgba(0,255,140,0.92);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.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 ─────────────────────────────── */
/* Base hover glow for the lamp — shown briefly when you first hover,
   then JavaScript (theme.js) takes over and gradually brightens it
   further the longer you keep hovering (using `!important` to override
   whatever this rule sets). To change the FINAL/brightest glow color or
   intensity, you actually need to edit theme.js's glow calculation, not
   this rule. */
.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;
}

/* Light mode = lamp switched off — no glow at rest, and hovering
   doesn't relight it. */
[data-theme="light"] .lamp svg {
  filter: grayscale(1) opacity(.4);
}
[data-theme="light"] .lamp:hover svg {
  filter: grayscale(1) opacity(.4) !important;
}
[data-theme="light"] .hero:has(.lamp:hover)::before {
  background: none;
}

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

/* ═══════════════════════════════════════════════════
   REFINEMENTS
   A later tuning pass over the HERO CINEMATIC animations above: slower/
   softer flicker and glow timings, restored letter spacing, and a few
   extra pieces (the word-flip effect, the final robot/text layering).
   Because several @keyframes names are reused from above, THESE are the
   versions that actually apply (see this file's top comment for why).
   If you're trying to change animation SPEED or INTENSITY for the
   flickering text/electric arcs/robot glow, this is the section to
   edit, not the earlier "HERO CINEMATIC" versions.
═══════════════════════════════════════════════════ */

/* .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; }

/* .hc-floats/.hc-float have no matching markup in index.html — this rule
   is a defensive no-op that keeps either hidden if that markup is ever
   added back without also adding real layout rules for it. */
.hc-floats, .hc-float { display: none; }

/* ── PROGRESSIVE LAMP GLOW CSS ───────────────────── */
/* These 4 rules are the visual steps of the background spotlight
   getting brighter the longer you hover the lamp. JavaScript
   (theme.js) sets a `data-glow="1"` through `data-glow="4"` attribute
   on the hero section as your cursor lingers on the lamp, and removes
   it when you stop — this file just defines what each of those 4 steps
   looks like. To make the glow-building effect more/less dramatic,
   adjust the opacity values below (bigger gap between step 1 and step 4
   = more dramatic); to change how FAST it builds, edit theme.js instead. */
.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;
  }
}