/* ─────────────────── SSKAMPUS UNIFIED CINEMATIC THEME ─────────────────── */
  :root{
    --bg:        #0a0a0b;
    --surface:   #111114;
    --text:      #eae7e2;
    --muted:     #7a7a82;
    --muted-2:   #5a5a5e;
    --accent:    #c8a97e;   /* warm gold   — Gold tier */
    --accent-2:  #5eadb5;   /* cool teal   — Platinum tier */
    --accent-3:  #b89be0;   /* soft violet — Diamond tier */
    --border:    #1e1e22;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    background:var(--bg);color:var(--text);
    font-family:'Outfit',sans-serif;-webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  a{color:inherit}

  /* ─────────────────── [22] DYNAMIC ISLAND NAV ───────────────────
     Starts inline in the hero (matches reference); promotes to fixed-top
     after the user scrolls past the hero. */
  .island{
    position:absolute;top:150px;left:50%;transform:translateX(-50%);z-index:100;
    background:rgba(26,26,31,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border:1px solid rgba(200,169,126,.22);border-radius:100px;padding:11px 26px;
    display:flex;align-items:center;gap:12px;cursor:pointer;
    transition:all .5s cubic-bezier(.16,1,.3,1);overflow:hidden;max-height:48px;
    box-shadow:0 10px 40px -10px rgba(200,169,126,.18);
  }
  .island.pinned{position:fixed;top:16px;padding:8px 20px;max-height:44px;
    border-color:#2a2a30;box-shadow:0 8px 30px -10px rgba(0,0,0,.6)}
  .island.expanded{
    border-radius:22px;padding:18px 22px;max-height:460px;
    flex-direction:column;align-items:stretch;gap:6px;
    width:min(320px,92vw);left:50%;margin-left:0;transform:translateX(-50%);
    background:rgba(17,17,20,.94);
  }
  .island-dot{
    width:8px;height:8px;border-radius:50%;background:var(--accent);
    flex-shrink:0;animation:breathe 2.4s ease infinite;box-shadow:0 0 12px var(--accent);
  }
  @keyframes breathe{0%,100%{opacity:.55;transform:scale(.9)}50%{opacity:1;transform:scale(1.05)}}
  .island-label{font-size:13px;font-weight:500;white-space:nowrap;letter-spacing:.02em}
  .island.expanded .island-label{display:none}
  .island-title{
    font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);
    padding:4px 6px 6px;display:none;
  }
  .island.expanded .island-title{display:block}
  .island-content{display:none;flex-direction:column;gap:4px}
  .island.expanded .island-content{display:flex}
  .island-item{
    display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;
    background:rgba(255,255,255,.03);font-size:14px;text-decoration:none;color:var(--text);
    transition:background .2s,transform .2s;
  }
  .island-item:hover{background:rgba(255,255,255,.08);transform:translateX(2px)}
  .island-item .mini{width:6px;height:6px;border-radius:50%;flex-shrink:0}
  .island-item .mini.gold{background:var(--accent)}
  .island-item .mini.plat{background:var(--accent-2)}
  .island-item .mini.diam{background:var(--accent-3)}
  .island-item .mini.neutral{background:#555}
  .island-sep{height:1px;background:var(--border);margin:6px 2px}
  .island-close{font-size:11px;color:var(--muted-2);text-align:center;padding-top:6px;letter-spacing:.05em}

  /* ─────────────────── HERO — cinematic serif, foot-silhouette backdrop ─────────────────── */
  .hero{
    position:relative;min-height:100dvh;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;padding:80px 24px 120px;overflow:hidden;
    /* Pure neutral black base — no blue undertone. Warm radials are kept
       so the gold theming still glows from center-top. */
    background:
      radial-gradient(1400px 900px at 50% 35%,rgba(18,14,8,.55),transparent 70%),
      radial-gradient(1200px 800px at 50% 100%,rgba(200,169,126,.06),transparent 60%),
      #050505;
  }
  /* Two flowing light-foot silhouettes, one per side, subtle breathing.
     Narrower (28vw, was 38vw) so they hug the edges and leave the center
     clear for the headline. Slightly dimmer so the text reads against them. */
  .hero-form{
    position:absolute;top:0;bottom:0;width:28vw;min-width:260px;max-width:520px;
    background-repeat:no-repeat;background-size:cover;background-position:center;
    z-index:0;pointer-events:none;opacity:.82;
    mix-blend-mode:screen;  /* lifts the luminous forms against the dark bg */
    animation:heroBreathe 9s ease-in-out infinite;
    filter:drop-shadow(0 0 60px rgba(0,0,0,.4));
  }
  /* Mirror horizontally so each image's "foot" silhouette hugs the OUTER
     edge of the viewport instead of drifting toward the center text. */
  .hero-form.left {left:0; background-position:left center;
    animation:heroBreatheLeft  9s ease-in-out infinite}
  /* Right (blue/platinum) foot — extra treatment so its photo's midtones
     don't broadcast a blue halo across the dark canvas via the screen
     blend. We:
       1. Lower its base opacity vs the gold side.
       2. Apply `filter: brightness(.78)` to crush the photo's mid-grays
          (the source of the spill) while keeping the bright silhouette.
       3. Apply a horizontal `mask-image` that fades the form to
          transparent at its inner edge (toward the headline), so the
          halo can't reach the center area. */
  .hero-form.right{right:0;background-position:left center;
    opacity:.72;
    filter:brightness(.95) saturate(1.06) drop-shadow(0 0 60px rgba(0,0,0,.4));
    /* Mask in DOM-space. The element is then mirrored by scaleX(-1) in
       the breathe keyframes, so DOM-right ends up as the VISUAL inner
       edge (toward the headline) — that's the side we fade out. */
    -webkit-mask-image:linear-gradient(to right, #000 35%, transparent 95%);
            mask-image:linear-gradient(to right, #000 35%, transparent 95%);
    animation:heroBreatheRight 9s ease-in-out infinite;animation-delay:-4.5s}
  @keyframes heroBreatheLeft{
    0%,100%{transform:scaleX(-1) translateY(0)    scale(1.00);opacity:.78}
    50%   {transform:scaleX(-1) translateY(-10px) scale(1.02);opacity:.9}
  }
  @keyframes heroBreatheRight{
    /* Mirror so the blue foot faces left (toward the headline) instead of right.
       Opacity ranges run lower than the gold side. */
    0%,100%{transform:scaleX(-1) translateY(0)    scale(1.00);opacity:.68}
    50%   {transform:scaleX(-1) translateY(-10px) scale(1.02);opacity:.78}
  }
  /* Vignette tames edges so the forms read as flowing, not clipped */
  .hero-vignette{
    position:absolute;inset:0;z-index:1;pointer-events:none;
    background:radial-gradient(120% 80% at 50% 55%,transparent 45%,rgba(0,0,0,.7) 100%);
  }
  /* Dedicated darker pool behind the headline so gold text never blends into
     the gold light-form on the left side. Invisible where forms don't reach. */
  .hero-text-mask{
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    width:min(900px,80vw);height:min(620px,80vh);z-index:2;pointer-events:none;
    background:radial-gradient(ellipse 60% 55% at 50% 50%,rgba(0,0,0,.72) 0%,rgba(0,0,0,.5) 35%,transparent 75%);
    filter:blur(12px);
  }

  .hero-inner{position:relative;z-index:4;max-width:1100px;margin-top:0}
  .hero-label{
    font-family:'Outfit',sans-serif;
    font-size:12px;font-weight:500;letter-spacing:.34em;text-transform:uppercase;color:var(--accent);
    margin-bottom:100px;opacity:0;animation:fadeUp 1s ease .1s forwards;
  }
  .hero-label .sep{color:rgba(200,169,126,.5);margin:0 10px;font-weight:300}

  .hero h1{
    font-family:'Cormorant Garamond','Cormorant',Georgia,serif;
    font-weight:500;letter-spacing:-.01em;line-height:.96;
    display:flex;flex-direction:column;align-items:center;gap:.02em;
  }
  .hero h1 .line{
    display:block;opacity:0;transform:translateY(28px);
    animation:fadeUp 1.2s cubic-bezier(.16,1,.3,1) forwards;
  }
  .hero h1 .line-human{
    font-size:clamp(72px,11vw,168px);
    color:#f3ece0;font-weight:400;font-style:italic;
    animation-delay:.35s;letter-spacing:-.005em;
  }
  .hero h1 .line-connection{
    font-size:clamp(76px,13.5vw,210px);
    color:var(--accent);font-weight:500;
    animation-delay:.55s;letter-spacing:-.015em;
    /* A subtle dark glow behind the letters keeps them legible even if the
       left-side gold light-form briefly drifts into their footprint. */
    text-shadow:
      0 0 24px rgba(10,8,6,.85),
      0 2px 40px rgba(10,8,6,.7),
      0 2px 60px rgba(200,169,126,.22);
  }
  /* Per-character scramble slots — widths are measured in JS so the serif
     stays perfectly still as random chars cycle to their targets. */
  .hero h1 .line-connection .char{
    display:inline-block;text-align:center;
    transition:color .18s cubic-bezier(.16,1,.3,1),text-shadow .18s;
  }
  .hero h1 .line-connection .char.scrambling{
    color:rgba(200,169,126,.35);text-shadow:none;font-weight:400;
  }
  .hero h1 .line-connection .char.resolved{
    color:var(--accent);
  }
  .hero-divider{
    width:clamp(180px,22vw,300px);height:1px;
    background:linear-gradient(90deg,transparent,rgba(200,169,126,.5),transparent);
    margin:34px auto 0;
    opacity:0;animation:fadeUp 1s ease .9s forwards;
  }
  .hero .tagline{
    margin-top:26px;font-size:clamp(15px,1.25vw,18px);
    color:rgba(234,231,226,.78);font-weight:300;
    max-width:58ch;line-height:1.7;margin-left:auto;margin-right:auto;
    opacity:0;animation:fadeUp 1s ease 1.05s forwards;letter-spacing:.005em;
  }
  .hero .intro-text{
    display:inline-block;margin-top:44px;
    font-family:'Outfit',sans-serif;font-size:12px;letter-spacing:.34em;font-weight:500;
    color:var(--accent);opacity:0;animation:fadeUp 1s ease 1.2s forwards;
  }
  .hero .intro-text::before{content:"〉 ";color:var(--accent);margin-right:4px}

  .hero-cta-row{
    margin-top:32px;display:flex;flex-wrap:wrap;justify-content:center;
    gap:14px;align-items:center;
    opacity:0;animation:fadeUp 1s ease 1.35s forwards;
  }
  .btn{
    font-family:'Outfit',sans-serif;font-size:14px;font-weight:500;letter-spacing:.015em;
    padding:14px 28px;border-radius:100px;text-decoration:none;
    transition:transform .3s cubic-bezier(.16,1,.3,1),background .3s,border-color .3s,box-shadow .3s,color .3s;
    display:inline-flex;align-items:center;gap:10px;border:1px solid transparent;
    cursor:pointer;white-space:nowrap;
  }
  .btn-accent{
    position:relative;overflow:hidden;
    color:#1a120a;font-weight:600;
    background:linear-gradient(180deg,#e6c689 0%,#c8a97e 55%,#a88856 100%);
    box-shadow:
      0 12px 40px -10px rgba(200,169,126,.55),
      inset 0 1px 0 rgba(255,240,210,.55),
      inset 0 -1px 0 rgba(90,60,30,.35);
    padding:15px 32px;
  }
  .btn-accent::after{
    content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    background:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.35) 50%,transparent 60%);
    background-size:220% 100%;background-position:120% 0;
    transition:background-position .9s ease;
    mix-blend-mode:overlay;
  }
  .btn-accent:hover{transform:translateY(-2px);
    box-shadow:0 18px 55px -8px rgba(200,169,126,.75),inset 0 1px 0 rgba(255,240,210,.65),inset 0 -1px 0 rgba(90,60,30,.4)}
  .btn-accent:hover::after{background-position:-40% 0}
  .btn-accent .arrow{display:inline-block;transition:transform .3s}
  .btn-accent:hover .arrow{transform:translateX(4px)}

  .btn-ghost{
    background:rgba(12,12,14,.55);color:var(--text);border-color:rgba(234,231,226,.18);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    padding:13px 26px;
  }
  .btn-ghost:hover{background:rgba(20,20,22,.75);border-color:rgba(234,231,226,.4);transform:translateY(-1px)}

  @keyframes fadeUp{to{opacity:1;transform:translateY(0)}}

  .scroll-hint{
    position:absolute;bottom:36px;left:50%;transform:translateX(-50%);
    font-family:'Outfit',sans-serif;font-size:11px;letter-spacing:.38em;color:rgba(234,231,226,.45);
    z-index:4;animation:pulse 2.6s ease-in-out infinite;text-transform:uppercase;font-weight:400;
  }
  .scroll-hint::before{content:"";display:block;width:1px;height:54px;
    background:linear-gradient(180deg,transparent,rgba(234,231,226,.45));
    margin:0 auto 14px;
  }
  @keyframes pulse{0%,100%{opacity:.5}50%{opacity:1}}

  /* ─────────────────── TABLET (≤900px) ─────────────────── */
  @media(max-width:900px){
    .hero-form{width:46vw;min-width:0;max-width:380px;opacity:.6}
    .hero h1 .line-human     {font-size:clamp(50px,13vw,82px)}
    .hero h1 .line-connection{font-size:clamp(54px,15vw,100px)}
    .hero-label{margin-bottom:60px}
    .island{top:90px;padding:9px 20px}
  }

  /* ─────────────────── PHONE (≤640px) ───────────────────
     The desktop hero crushes itself on phones — foot silhouettes
     collide behind the headline, the h1 grows to 19vw and eats the
     viewport, and 6 CTAs stagger into 4 jagged rows.  Re-tune for
     phone-first instead of letting fluid clamps run wild. */
  @media(max-width:640px){
    /* Foot forms: the source JPGs are 768x1376 portraits.  At a 38vw-wide,
       full-height column on mobile, `background-size:cover` crops the image
       horizontally to a meaningless skin-tone sliver — that's the "distorted
       feet" artifact.  Switch to `contain` so each foot stays fully visible,
       and shorten the form vertically so it sits gently behind the headline
       rather than spanning the whole hero. */
    .hero-form{
      width:46vw;min-width:0;max-width:none;
      top:10%;bottom:auto;height:64%;
      background-size:contain;
      background-position:center center !important;
      opacity:.5;
      filter:drop-shadow(0 0 40px rgba(0,0,0,.5)) blur(.3px);
    }
    .hero-form.right{
      filter:brightness(.95) saturate(1.06) drop-shadow(0 0 40px rgba(0,0,0,.5)) blur(.25px);
    }

    /* Hero box: tighter padding, headline gets vertical breathing room */
    .hero{padding:72px 20px 96px;min-height:100dvh}
    .hero-inner{padding:0}
    .hero-label{margin-bottom:36px;font-size:10px;letter-spacing:.34em}

    /* Headline — much smaller, never edge-to-edge */
    .hero h1 .line-human     {font-size:clamp(40px,11vw,60px)}
    .hero h1 .line-connection{font-size:clamp(44px,13vw,68px)}

    .hero-divider{margin-top:22px;width:60vw}
    .hero .tagline{
      font-size:14px;margin-top:18px;line-height:1.55;
      padding:0 4px;max-width:36ch;
    }
    .hero .intro-text{margin-top:28px;font-size:11px;letter-spacing:.32em}

    /* CTA stack:
         row 1 — Visit Our Channel (primary, full-width)
         row 2 — Gold / Platinum / Diamond (3 equal tier pills)
         row 3 — Sign Up / Log In   (2 equal auth pills)            */
    .hero-cta-row{
      margin-top:22px;gap:8px;width:100%;
      flex-wrap:wrap;justify-content:center;
    }
    .hero-cta-row .btn-accent{
      flex:1 1 100%;order:1;
      justify-content:center;text-align:center;
      padding:15px 20px;font-size:14px;
    }
    /* Tier row (3 pills) */
    .hero-cta-row .btn-ghost:nth-of-type(2),
    .hero-cta-row .btn-ghost:nth-of-type(3),
    .hero-cta-row .btn-ghost:nth-of-type(4){
      flex:1 1 calc(33.333% - 8px);order:2;
    }
    /* Auth row (2 pills) */
    .hero-cta-row .btn-ghost:nth-of-type(5),
    .hero-cta-row .btn-ghost:nth-of-type(6){
      flex:1 1 calc(50% - 8px);order:3;
    }
    .hero-cta-row .btn-ghost{
      justify-content:center;text-align:center;min-width:0;
      padding:11px 8px;font-size:12px;letter-spacing:.01em;
      white-space:nowrap;
    }

    .scroll-hint{bottom:20px;font-size:10px;letter-spacing:.32em}
    .scroll-hint::before{height:38px}

    /* Marquee — shorter band, smaller items, tighter dots */
    .marquee-band{padding:18px 0}
    .marquee-item{font-size:clamp(20px,7vw,32px);padding:0 18px}
    .marquee-item .dot{margin:0 14px;width:7px;height:7px}

    /* Curtain headlines — let "Spontaneous" actually fit */
    .curtain-section{height:auto}
    .curtain-left,.curtain-right{padding:0 12px}
    .curtain-left h2,.curtain-right h2{
      font-size:clamp(22px,6vw,30px);
      line-height:1;
      white-space:nowrap;
      overflow-wrap:normal;
      word-break:keep-all;
    }
    .curtain-left .tag,.curtain-right .tag{font-size:9px;letter-spacing:.18em}

    /* Section anchors */
    .section-anchor{padding:48px 20px 24px}
    .section-eyebrow{font-size:10px}
    .section-title{font-size:clamp(34px,9vw,52px)}
    .section-kicker{font-size:14px;line-height:1.55}

    /* Scouting horizontal scroll: one big card visible at a time */
    .h-intro{width:78vw;padding:24px 20px}
    .h-intro h2{font-size:clamp(28px,8.5vw,44px)}
    .h-intro p{font-size:15px}
    .h-card{width:78vw;height:60vh;min-height:420px}
    .h-card-content{padding:18px}

    /* Footer */
    .site-footer{padding:48px 20px 32px}
  }

  /* ─────────────────── [25] KINETIC MARQUEE ─────────────────── */
  .marquee-band{
    position:relative;padding:28px 0;overflow:hidden;
    border-top:1px solid var(--border);border-bottom:1px solid var(--border);
    background:linear-gradient(180deg,rgba(200,169,126,.04),rgba(200,169,126,0));
  }
  .marquee-row{display:flex;white-space:nowrap;will-change:transform;padding:0}
  .marquee-item{
    display:inline-flex;align-items:center;
    font-size:clamp(28px,5vw,56px);font-weight:700;letter-spacing:-.03em;line-height:1;
    color:var(--text);padding:0 32px;flex-shrink:0;
  }
  .marquee-item.outline{
    color:transparent;-webkit-text-stroke:1.5px var(--accent);
  }
  .marquee-item .dot{
    display:inline-block;width:10px;height:10px;border-radius:50%;
    background:var(--accent);margin:0 24px;opacity:.7;
  }

  /* ─────────────────── [07] CURTAIN REVEAL — ORIGINAL CONTENT ─────────────────── */
  .section-anchor{padding:140px 24px 40px;text-align:center}
  .section-eyebrow{
    font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.22em;
    text-transform:uppercase;color:var(--accent);margin-bottom:14px;
  }
  .section-title{
    font-size:clamp(36px,5.5vw,72px);font-weight:600;letter-spacing:-.03em;line-height:1.05;
    max-width:14ch;margin:0 auto;
  }
  .section-kicker{
    margin-top:18px;font-size:17px;color:rgba(234,231,226,.65);max-width:54ch;
    margin-left:auto;margin-right:auto;line-height:1.55;
  }

  .curtain-section{position:relative;height:280vh}
  .curtain-sticky{
    position:sticky;top:0;height:100dvh;overflow:hidden;
    display:flex;align-items:center;justify-content:center;
  }
  .curtain-left,.curtain-right{
    position:absolute;top:0;bottom:0;width:50%;z-index:2;
    display:flex;align-items:center;padding:0 6vw;
    background:linear-gradient(180deg,#0e0c09 0%,#080706 100%);
  }
  .curtain-left{
    left:0;justify-content:flex-end;
    border-right:1px solid rgba(200,169,126,.15);
    background:linear-gradient(135deg,#140f09 0%,#080706 80%);
  }
  .curtain-right{
    right:0;justify-content:flex-start;
    border-left:1px solid rgba(94,173,181,.15);
    /* Match the left half's neutral-black gradient (was a teal-blue
       gradient #0b1518→#070a0b). Tier accent is preserved via the
       border-left color and the platinum h2 text color, but the
       surrounding canvas now reads consistently black. */
    background:linear-gradient(225deg,#0e0c09 0%,#080706 80%);
  }
  .curtain-left h2,.curtain-right h2{
    /* Sized so even the longest word ("Spontaneous", 11 chars) fits within
       a 50%-width curtain half at common viewports without clipping. */
    font-size:clamp(40px,7vw,112px);font-weight:700;letter-spacing:-.04em;line-height:.92;
    max-width:100%;word-break:normal;overflow-wrap:break-word;
  }
  .curtain-left h2{color:var(--accent);text-align:right}
  .curtain-right h2{color:var(--accent-2);text-align:left}
  .curtain-left .tag, .curtain-right .tag{
    display:block;font-family:'JetBrains Mono',monospace;
    font-size:11px;letter-spacing:.22em;color:var(--muted);margin-bottom:16px;text-transform:uppercase;
  }
  .curtain-left  .half-inner{text-align:right;max-width:100%;width:100%}
  .curtain-right .half-inner{text-align:left; max-width:100%;width:100%}
  .curtain-content{
    position:absolute;inset:0;z-index:1;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;padding:40px;
    background:
      radial-gradient(1200px circle at 50% 40%,rgba(200,169,126,.08),transparent 60%),
      linear-gradient(135deg,#1a120a 0%,#0d0a08 100%);
  }
  .curtain-content .rev-eyebrow{
    font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.24em;
    text-transform:uppercase;color:var(--accent);margin-bottom:18px;
  }
  .curtain-content h3{
    font-size:clamp(40px,6vw,88px);font-weight:600;letter-spacing:-.03em;line-height:1.02;
    max-width:16ch;margin-bottom:20px;
  }
  .curtain-content p{
    font-size:18px;color:rgba(234,231,226,.7);max-width:52ch;line-height:1.6;margin-bottom:32px;
  }

  /* ─────────────────── [04] HORIZONTAL SCROLL HIJACK — SCOUTING SESSIONS ─────────────────── */
  /* NOTE: use `overflow-x:clip` (not `hidden`) — `hidden` breaks position:sticky on the child. */
  .h-scroll-section{overflow-x:clip;position:relative;background:#060607}
  .h-scroll-sticky{
    position:sticky;top:0;height:100dvh;display:flex;align-items:center;overflow:hidden;
  }
  .h-scroll-track{
    display:flex;gap:28px;padding:0 max(48px,5vw);will-change:transform;align-items:center;
  }
  .h-intro{
    flex-shrink:0;width:clamp(280px,30vw,420px);padding:0 24px 0 0;
  }
  .h-intro .eyebrow{
    font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.22em;
    text-transform:uppercase;color:var(--accent-2);margin-bottom:16px;
  }
  .h-intro h2{
    font-size:clamp(36px,4.5vw,64px);font-weight:600;letter-spacing:-.03em;line-height:1.05;
    margin-bottom:16px;
  }
  .h-intro p{font-size:16px;color:rgba(234,231,226,.65);line-height:1.6;max-width:40ch}
  .h-intro .count{
    margin-top:28px;display:flex;align-items:baseline;gap:10px;
    font-family:'JetBrains Mono',monospace;color:var(--muted);font-size:12px;letter-spacing:.12em;
  }
  .h-intro .count strong{color:var(--accent-2);font-size:44px;font-weight:500;letter-spacing:-.02em}

  .h-card{
    flex-shrink:0;
    width:clamp(260px,24vw,360px);
    height:min(72vh,560px);
    border-radius:16px;overflow:hidden;position:relative;
    border:1px solid var(--border);
    display:flex;flex-direction:column;justify-content:flex-end;
    background:linear-gradient(135deg,#141418,#0a0a0c);
    transition:transform .35s cubic-bezier(.16,1,.3,1),border-color .35s;
  }
  .h-card:hover{transform:translateY(-6px);border-color:rgba(94,173,181,.35)}
  .h-card .h-media{
    position:absolute;inset:0;z-index:0;width:100%;height:100%;
    object-fit:cover;transition:transform .6s ease;
  }
  .h-card:hover .h-media{transform:scale(1.05)}
  .h-card-overlay{
    position:absolute;inset:0;z-index:1;
    background:linear-gradient(to top,rgba(6,6,7,.95) 0%,rgba(6,6,7,.35) 45%,transparent 75%);
  }
  .h-card-content{position:relative;z-index:2;padding:22px}
  .h-card-label{
    font-family:'JetBrains Mono',monospace;
    font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent-2);
  }

  /* Progress bar */
  .h-progress{
    position:fixed;bottom:28px;left:50%;transform:translateX(-50%);z-index:50;
    display:flex;align-items:center;gap:14px;
    opacity:0;transition:opacity .3s;
    background:rgba(10,10,11,.75);backdrop-filter:blur(10px);
    padding:10px 18px;border-radius:100px;border:1px solid var(--border);
  }
  .h-progress.visible{opacity:1}
  .h-progress-bar{width:180px;height:2px;background:var(--border);border-radius:1px;overflow:hidden}
  .h-progress-fill{height:100%;background:var(--accent-2);width:0%;transition:width .1s}
  .h-progress-label{
    font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;color:var(--muted);
  }

  /* ─────────────────── FOOTER ─────────────────── */
  .site-footer{
    border-top:1px solid var(--border);padding:60px 24px 40px;
    text-align:center;background:#06060a;
  }
  .site-footer .brand{
    font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.3em;
    color:var(--muted);margin-bottom:8px;
  }
  .site-footer .tag{font-size:13px;color:var(--muted-2)}

  /* ─────────────────── RESPONSIVE ─────────────────── */
  @media(max-width:900px){
    .curtain-left,.curtain-right{padding:0 24px}
    .curtain-left h2,.curtain-right h2{font-size:clamp(36px,11vw,72px)}
    .h-card{width:clamp(220px,70vw,320px)}
    .h-intro{width:clamp(240px,70vw,360px)}
  }
  @media(prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  }

  @media(max-width:640px){
    .curtain-left,.curtain-right{padding:0 12px}
    .curtain-left h2,.curtain-right h2{
      font-size:clamp(22px,6vw,30px);
      line-height:1;
      white-space:nowrap;
      overflow-wrap:normal;
      word-break:keep-all;
    }
    .curtain-left .tag,.curtain-right .tag{
      font-size:8px;letter-spacing:.16em;line-height:1.35;margin-bottom:12px;
    }
  }