/* ============================================================
   imagic — Homepage v2 ("light-lit" redesign)

   Loaded AFTER style.css on /home-v2 only. Everything here is scoped to
   body.hv2 so nothing leaks into the 200+ pages that share style.css.

   Motion vocabulary (ported from the RedSun Webflow template and Luke's
   pin set, board #174):
     - staggered load choreography (.hv2-load-1 .. -5, outExpo 1.4s)
     - a "sun": dark disc with a bright top rim + orange glow that the
       app screenshot rises out of; rotates 90deg and sinks as you scroll
     - hero text sinks 408px and fades while the app frame un-tilts
       from rotateX(35deg), scales to 1.05, then tips away (-60deg)
     - three blurred light beams rotated -30deg behind the hero
     - a 150px blurred orange spotlight that follows the cursor
     - word-by-word headline reveal, scroll reveals (y 24px -> 0)
     - logo marquee (32s linear), glow-border prompt box, 3D tilt frames
   Scroll progress arrives as --p (0..1) on [data-hero], written by
   home-v2.js. CSS derives the two RedSun phases from it:
     --p1 = first half (0..1 over the first 50% of the hero)
     --p2 = second half
   ============================================================ */

body.hv2 {
    --page: #0a0a0c;
    --ink: #f2f2f3;
    --muted: #a3a3a8;
    --dim: #6c6c73;
    --line: rgba(255, 255, 255, 0.08);
    --line-hi: rgba(255, 178, 102, 0.30);
    --card: #12121a;
    --card-2: #16161c;
    --brand: #ff9800;
    --brand-deep: #f26a10;
    --brand-glow: rgba(246, 112, 20, 0.35);
    --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --stage-top: clamp(120px, 16vw, 200px);

    background: var(--page);
    color: var(--ink);
    /* clip, not hidden: hidden would make body a scroll container and
       position: sticky (the hero pin) would never stick */
    overflow-x: clip;
}

body.hv2 .container { position: relative; z-index: 3; }

/* ------------------------------------------------------------
   Keyframes
   ------------------------------------------------------------ */
@keyframes hv2-rise {
    from { opacity: 0; transform: translate3d(0, 30px, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes hv2-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes hv2-word {
    from { opacity: 0; transform: translate3d(0, 0.45em, 0); filter: blur(8px); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
}
@keyframes hv2-sun-in {
    from { opacity: 0; transform: rotate(-360deg) scale(0.7); filter: saturate(160%) blur(14px); }
    to   { opacity: 1; transform: rotate(0deg) scale(1); filter: saturate(100%) blur(0); }
}
@keyframes hv2-glow-in {
    from { opacity: 0; transform: translate3d(-248px, 95px, 0) rotate(-26deg) scale(0.9); filter: blur(30px); }
    to   { opacity: 1; transform: translate3d(0, 0, 0) rotate(0) scale(1); filter: blur(0); }
}
@keyframes hv2-app-in {
    from { opacity: 0; transform: translate3d(0, -120px, 0) scale(1.15); }
    to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes hv2-beam {
    0%, 100% { opacity: var(--beam-o, 0.4); transform: scaleY(1); }
    50%      { opacity: calc(var(--beam-o, 0.4) * 1.45); transform: scaleY(1.06); }
}
@keyframes hv2-marquee {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-100%, 0, 0); }
}
@keyframes hv2-sweep {
    0%, 100% { transform: translate3d(-30%, 0, 0); }
    50%      { transform: translate3d(30%, 0, 0); }
}
@keyframes hv2-caret {
    0%, 45% { opacity: 1; }
    50%, 95% { opacity: 0; }
}
@property --hv2-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}
@keyframes hv2-spin {
    to { --hv2-angle: 360deg; }
}

/* ------------------------------------------------------------
   Load choreography (RedSun "Animate On Load": y30 + fade, outExpo)
   ------------------------------------------------------------ */
.hv2-load {
    opacity: 0;
    animation: hv2-rise 1.4s var(--ease-expo) both;
}
.hv2-load-1 { animation-delay: 0.4s; }
.hv2-load-2 { animation-delay: 0.6s; }
.hv2-load-3 { animation-delay: 0.8s; }
.hv2-load-4 { animation-delay: 1.0s; }
.hv2-load-5 { animation-delay: 1.2s; }

/* ------------------------------------------------------------
   Cursor spotlight
   ------------------------------------------------------------ */
.hv2-cursor {
    position: fixed;
    inset: 0;
    z-index: 20;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hv2-cursor-dot {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(246, 112, 20, 0.20), rgba(246, 112, 20, 0) 70%);
    filter: blur(18px);
    opacity: 0;
    transform: translate3d(var(--cx, 0px), var(--cy, 0px), 0);
    transition: opacity 0.6s ease;
    will-change: transform;
}
body.hv2.hv2-pointer .hv2-cursor-dot { opacity: 1; }
@media (hover: none) { .hv2-cursor { display: none; } }

/* ------------------------------------------------------------
   Sale (only rendered while body[data-desktop-sale-percent] > 0)
   ------------------------------------------------------------ */
body.hv2.hv2-sale [data-no-sale] { display: none !important; }
/* the hidden attribute must win over the display set by component classes */
body.hv2 [hidden] { display: none !important; }
.hv2-salebar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px 16px;
    font-size: 0.82rem;
    color: #1a1200;
    text-decoration: none;
    background: linear-gradient(90deg, #ffb347, #ff9800 45%, #ff6a00);
    box-shadow: 0 6px 24px rgba(246, 112, 20, 0.35);
    opacity: var(--q);
}
.hv2-salebar strong { font-weight: 700; }
.hv2-salebar-sub { opacity: 0.85; }
.hv2-salebar-arrow { font-size: 0.7rem; transition: transform 0.3s var(--ease-expo); }
.hv2-salebar:hover { color: #1a1200; }
.hv2-salebar:hover .hv2-salebar-arrow { transform: translateX(3px); }
body.hv2.hv2-sale .navbar { top: 36px; }
body.hv2.hv2-sale .hv2-hero-pin { padding-top: 148px; }
.hv2-pill-chip--sale { background: linear-gradient(90deg, #ffb347, #ff6a00); }
.hv2-sale-ribbon {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
    padding: 10px 18px;
    border-radius: 14px;
    border: 1px solid rgba(255, 152, 0, 0.35);
    background: rgba(255, 152, 0, 0.10);
    color: var(--muted);
    font-size: 0.9rem;
    text-align: left;
}
.hv2-sale-ribbon i { color: var(--brand); }
.hv2-sale-ribbon strong { color: var(--brand); }
body.hv2 .price-was { color: var(--dim); font-weight: 500; font-size: 0.6em; margin-right: 6px; text-decoration-color: rgba(255, 152, 0, 0.7); }
body.hv2 .price-now { color: #fff; white-space: nowrap; }
/* every sale price carries its own tag: the percent is written to --sale-pct
   by home-v2.js from the same server attribute */
body.hv2.hv2-sale .price-now::after {
    content: "-" var(--sale-pct, "50") "%";
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.45em;
    padding: 0.12em 0.45em;
    border-radius: 999px;
    font-size: 0.58em;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.3;
    color: #1a1200;
    background: linear-gradient(90deg, #ffb347, #ff8a1f);
    box-shadow: 0 2px 10px rgba(246, 112, 20, 0.35);
}
.hv2-price-amount .price-now::after { font-size: 0.34em; vertical-align: 0.5em; margin-left: 0.4em; }
.hv2-btn .price-now::after { font-size: 0.7em; padding: 0.1em 0.4em; }
.hv2-stat .price-now::after { font-size: 0.42em; vertical-align: 0.6em; }
.hv2-btn .price-was { font-size: 0.85em; color: rgba(255, 255, 255, 0.6); }
.hv2-price-amount .price-was { font-size: 0.42em; margin-right: 8px; }
/* was + now + chip on one line, "one-time" beneath */
body.hv2.hv2-sale .hv2-price-amount { display: flex; flex-wrap: wrap; align-items: baseline; }
body.hv2.hv2-sale .hv2-price-amount > span:last-child { flex-basis: 100%; }
/* the old price always sits on its own line above, so all three cards match */
body.hv2.hv2-sale .hv2-price-amount .price-was { flex-basis: 100%; margin: 0 0 2px; }
.hv2-btn .price-was { color: rgba(255, 255, 255, 0.75); }
@media (max-width: 560px) { .hv2-salebar-sub { display: none; } }

/* ------------------------------------------------------------
   Navigation: glass pill
   ------------------------------------------------------------ */
body.hv2 .navbar {
    padding: 14px 0;
    background: transparent;
    opacity: var(--q);
}
body.hv2 .navbar .container {
    animation: hv2-fade 1.4s var(--ease-expo) 1s both;
    max-width: 1160px;
    background: rgba(18, 18, 22, 0.55);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 8px 10px 8px 18px;
    -webkit-backdrop-filter: blur(17px);
    backdrop-filter: blur(17px);
    box-shadow: inset 0 -8px 24px rgba(246, 112, 20, 0.06), 0 10px 40px rgba(0, 0, 0, 0.35);
    transition: background 0.4s, border-color 0.4s, box-shadow 0.4s;
}
body.hv2 .navbar.scrolled {
    background: transparent;
    border-bottom: 0;
    padding: 8px 0;
}
body.hv2 .navbar.scrolled .container {
    background: rgba(14, 14, 18, 0.82);
    border-color: rgba(255, 255, 255, 0.12);
}
body.hv2 .navbar-links a { font-size: 0.9rem; color: var(--muted); }
body.hv2 .navbar-links a:hover { color: var(--ink); }

/* ------------------------------------------------------------
   Buttons (RedSun button-glow / button-simple)
   ------------------------------------------------------------ */
.hv2-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 22px;
    border-radius: 14px;
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    color: #fff;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.375s var(--spring), box-shadow 0.375s, border-color 0.375s, background 0.375s;
}
.hv2-btn i { font-size: 0.85em; }
.hv2-btn--glow {
    background: var(--brand) radial-gradient(circle farthest-corner at 50% 100%, #ffb347, #ff6a00 79%);
    border-color: #ba530e;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    box-shadow:
        inset 0 2px 5px rgba(255, 255, 255, 0.28),
        inset 0 -8px 16px rgba(120, 40, 0, 0.35),
        0 6px 24px rgba(246, 112, 20, 0.35);
}
.hv2-btn--glow:hover {
    color: #fff;
    transform: scale(1.04);
    box-shadow:
        inset 0 6px 5px rgba(255, 255, 255, 0.2),
        inset 1px -9px 13px rgba(0, 0, 23, 0.34),
        0 7px 30px rgba(246, 112, 20, 0.6);
}
.hv2-btn--ghost {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 -9px 24px rgba(246, 112, 20, 0.18);
}
.hv2-btn--ghost:hover {
    color: #fff;
    border-color: var(--brand);
    transform: scale(1.04);
    box-shadow: inset 0 -8px 32px rgba(246, 112, 20, 0.24), inset 0 0 12px rgba(255, 255, 255, 0.08);
}
.hv2-btn--sm { padding: 10px 16px; font-size: 14px; border-radius: 12px; }
.hv2-btn--lg { padding: 16px 28px; font-size: 16px; border-radius: 16px; }
.hv2-btn:focus-visible { outline: 2px solid #ffb347; outline-offset: 3px; }

/* ------------------------------------------------------------
   Shared type + section chrome
   ------------------------------------------------------------ */
.hv2-section { padding: 110px 0; position: relative; }
.hv2-section--tight { padding: 70px 0; }
.hv2-head { text-align: center; margin-bottom: 64px; }
.hv2-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 190px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.03);
    box-shadow: inset 0 -8px 24px rgba(246, 112, 20, 0.14);
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 22px;
}
.hv2-tag i { color: var(--brand); }
.hv2-h2 {
    font-size: clamp(2rem, 4.2vw, 3.1rem);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.12;
    margin: 0 0 16px;
    background-image: linear-gradient(348deg, rgba(255, 255, 255, 0.36), #fff 54%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.hv2-h2 em {
    font-style: normal;
    background-image: linear-gradient(135deg, #ff9800, #ffb347, #ffcc80);
    -webkit-background-clip: text;
    background-clip: text;
}
.hv2-lead {
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1.65;
    max-width: 640px;
    margin: 0 auto;
}
.hv2-lead a { color: var(--brand); }

/* Scroll reveals (RedSun fade-in-on-scroll: y20 -> 0, fade) */
.hv2-reveal {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    transition: opacity 0.9s var(--ease-expo), transform 0.9s var(--ease-expo);
    transition-delay: calc(var(--i, 0) * 90ms);
    will-change: opacity, transform;
}
.hv2-reveal.is-in { opacity: 1; transform: none; }

/* ------------------------------------------------------------
   HERO
   ------------------------------------------------------------ */
.hv2-hero {
    --p: 0;
    --p1: min(1, calc(var(--p) * 2));
    --p2: max(0, calc(var(--p) * 2 - 1));
    position: relative;
    z-index: 1;
    /* no overflow clipping: the frame may swing past the hero's box while it
       tilts; the sun clips itself (.hv2-sun-clip) and the body clips the
       horizontal overflow */
    overflow: visible;
    isolation: isolate;
}

/* ------------------------------------------------------------
   Intro: the first screen is the shutter alone. The pin holds the whole
   hero for one viewport of scroll (the spacer's height) while --q runs
   0 -> 1: the disc scrubs from centre-screen down to its resting place and
   the copy + frame rise in behind it. --q lives on :root (home-v2.js) so the
   navbar can follow it too; without JS it stays 1 and the page is static.
   ------------------------------------------------------------ */
:root { --q: 1; }
.hv2-intro-track { position: relative; }
.hv2-hero-pin {
    position: sticky;
    top: 0;
    padding-top: 112px;
}
.hv2-intro-space { height: 100vh; pointer-events: none; }
.hv2-scroll-hint {
    position: absolute;
    left: 50%;
    top: calc(100vh - 56px);
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 0.68rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--dim);
    opacity: calc(1 - var(--q) * 3);
    pointer-events: none;
    z-index: 5;
}
/* the load fade lives on the children so it cannot override the --q opacity */
.hv2-scroll-hint span, .hv2-scroll-hint i { animation: hv2-fade 1.2s ease 2.6s both; }
.hv2-scroll-hint i { animation: hv2-fade 1.2s ease 2.6s both, hv2-hint 1.6s ease-in-out 3.8s infinite; font-size: 0.7rem; color: var(--brand); }
@keyframes hv2-hint {
    0%, 100% { transform: translateY(0); opacity: 0.5; }
    50%      { transform: translateY(6px); opacity: 1; }
}
.hv2-sun-ring {
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 7px solid rgba(255, 190, 110, 0.85);
    box-shadow:
        0 0 70px 18px rgba(255, 140, 40, 0.55),
        0 0 220px 70px rgba(255, 120, 30, 0.22),
        inset 0 0 90px rgba(255, 150, 60, 0.28);
    opacity: calc(1 - var(--q));
    pointer-events: none;
}

/* light beams */
.hv2-lights {
    position: absolute;
    inset: 0;
    overflow: hidden;
    opacity: calc(0.22 + 0.52 * var(--q));
    pointer-events: none;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hv2-lights-holder {
    position: relative;
    top: -217px;
    left: -129px;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 70px;
    opacity: 0.41;
    transform: rotate(-30deg);
}
.hv2-light {
    width: 180px;
    height: 1000px;
    background-image: linear-gradient(#fff 5%, rgba(207, 207, 207, 0) 67%);
    filter: blur(18px);
    opacity: var(--beam-o);
    transform-origin: 50% 0;
    animation: hv2-beam var(--beam-t, 9s) ease-in-out infinite;
}
.hv2-light--l { --beam-o: 0.37; --beam-t: 11s; width: 110px; height: 750px; filter: blur(9px); }
.hv2-light--m { --beam-o: 0.53; --beam-t: 9s; height: 820px; }
.hv2-light--r { --beam-o: 0.47; --beam-t: 13s; width: 110px; height: 650px; filter: blur(16px); }

.hv2-hero-inner { position: relative; z-index: 2; }

.hv2-hero-content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 860px;
    margin: 0 auto;
    /* rises 60px in with --q, then (RedSun) sinks 408px and fades with --p1 */
    transform: translate3d(0, calc(var(--p1) * 408px + (1 - var(--q)) * 60px), 0);
    opacity: calc(var(--q) * (1 - var(--p1)));
    will-change: transform, opacity;
}

.hv2-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 1px 16px 1px 1px;
    border-radius: 60px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.03);
    box-shadow: inset 0 -8px 24px rgba(246, 112, 20, 0.16);
    color: var(--ink);
    font-size: 14.5px;
    font-weight: 400;
    text-decoration: none;
    margin-bottom: 26px;
    transition: border-color 0.3s, transform 0.375s var(--spring);
}
.hv2-pill:hover { color: var(--ink); border-color: var(--line-hi); transform: scale(1.03); }
.hv2-pill-chip {
    display: inline-block;
    white-space: nowrap;
    flex: none;
    padding: 8px 14px;
    border-radius: 40px;
    background: var(--brand) radial-gradient(circle farthest-corner at 50% 100%, #ffb347, #ff6a00 59%);
    border: 1px solid rgba(255, 200, 150, 0.4);
    font-weight: 600;
    font-size: 13.5px;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.hv2-pill i { font-size: 0.75em; color: var(--muted); }

.hv2-title {
    font-size: clamp(2.6rem, 6.2vw, 4.4rem);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.08;
    margin: 0 0 22px;
    color: #fff;
}
.hv2-title .hv2-word {
    display: inline-block;
    animation: hv2-word 1.1s var(--ease-expo) both;
    animation-delay: calc(0.7s + var(--wi, 0) * 0.08s);
    will-change: transform, opacity, filter;
}
.hv2-title .hv2-accent .hv2-word {
    background-image: linear-gradient(135deg, #ff9800, #ffb347, #ffcc80);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    padding-right: 0.03em; /* keeps the clipped glyph edge from being shaved */
}

.hv2-sub {
    color: var(--muted);
    font-size: clamp(1rem, 1.35vw, 1.15rem);
    line-height: 1.7;
    max-width: 580px;
    margin: 0 0 28px;
}

.hv2-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
.hv2-note {
    display: block;
    margin: 20px 0 0;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--dim);
    text-align: center;
}
.hv2-note i { color: var(--brand); margin-right: 6px; }

/* Mobile lead-capture (same ids as the live homepage; landing.js wires it) */
.hero-capture { margin: 6px 0 12px; max-width: 540px; width: 100%; }
.hero-capture-lead { font-size: 15px; line-height: 1.55; color: var(--ink); margin: 0 0 14px; font-weight: 600; }
.hero-capture-row { display: flex; flex-direction: column; gap: 10px; }
.hero-capture-input { width: 100%; padding: 15px 16px; font-size: 16px; border-radius: 14px;
    border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); color: var(--ink); }
.hero-capture-input:focus { outline: none; border-color: var(--brand); }
.hero-capture-btn { width: 100%; justify-content: center; }
#heroCaptureHoneypot { position: absolute; left: -9999px; height: 0; width: 0; border: 0; padding: 0; }
.hero-capture-msg { font-size: 13px; color: var(--dim); margin: 11px 2px 8px; line-height: 1.5; }
.hero-capture-msg.error { color: #ef5350; }
.hero-capture-msg.success { color: #57c46a; font-weight: 600; }
.hero-capture-editor { display: inline-block; font-size: 14px; color: var(--brand); text-decoration: none; }
.hero-capture-editor:hover { text-decoration: underline; }
html.is-mobile #heroActionsDesktop { display: none; }
html.is-mobile #heroCapture { display: block; }

/* the stage: sun + app frame */
.hv2-stage {
    position: relative;
    z-index: 2;
    margin-top: 10px;
    padding-top: var(--stage-top);
}

.hv2-sun-clip {
    position: absolute;
    z-index: 0;
    top: -140vh;
    bottom: 0; /* the disc stops exactly where the fade stops */
    left: 50%;
    width: 100vw;
    margin-left: -50vw;
    overflow: hidden;
    pointer-events: none;
}
/* belt and braces for iOS, which ignores overflow-x on body alone */
html:has(> body.hv2) { overflow-x: clip; }
.hv2-sun {
    --sun: min(1800px, 150vw);
    position: absolute;
    z-index: 0;
    top: calc(140vh + clamp(4px, 0.7vw, 10px)); /* the clip box starts 140vh up */
    left: 50%;
    width: var(--sun);
    height: var(--sun);
    margin-left: calc(var(--sun) / -2);
    pointer-events: none;
    /* RedSun circle-wrapper: sinks 200px and rotates over the first half (55deg
       here, not 90: the disc is far wider than theirs, so 90 would swing the
       glow off the frame's edge) */
    transform:
        translate3d(0, calc(var(--sun-dy, 0px) * (1 - var(--q)) + var(--p1) * 200px), 0)
        rotate(calc(var(--p1) * 55deg))
        scale(calc(var(--sun-s0, 1) + (1 - var(--sun-s0, 1)) * var(--q)));
    will-change: transform;
}
.hv2-sun-inner {
    position: absolute;
    inset: 0;
    animation: hv2-sun-in 2.4s var(--ease-expo) 0.6s both;
    will-change: transform, opacity, filter;
}
.hv2-sun-disc {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        /* warm inner rim: the disc interior glows near the top edge */
        radial-gradient(circle at 50% 50%, transparent 93%, rgba(255, 110, 30, 0.18) 96.5%, rgba(255, 150, 60, 0.55) 99%, rgba(255, 210, 160, 0.75) 100%),
        linear-gradient(180deg, #08080c 0%, #0b0b10 50%, #1c1c22 100%);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.16),
        0 0 40px rgba(255, 140, 40, 0.18),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
/* bright rim: white-hot at the top, orange to the sides, nothing below */
.hv2-sun-disc::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    padding: 3px;
    background: #ffa24d; /* uniform rim, Luke */
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    filter: drop-shadow(0 0 8px rgba(255, 170, 70, 0.9)) drop-shadow(0 0 22px rgba(255, 120, 30, 0.6));
}
/* soft outer halo ring */
.hv2-sun-disc::after {
    content: '';
    position: absolute;
    inset: -40px;
    border-radius: 50%;
    background: rgba(255, 140, 40, 0.55); /* uniform halo */
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 84px), #000 calc(100% - 42px), transparent 100%);
    mask: radial-gradient(farthest-side, transparent calc(100% - 84px), #000 calc(100% - 42px), transparent 100%);
    filter: blur(18px);
}
/* scroll-linked spin of the blades, from the very first pixel of scroll
   (--spin is written by home-v2.js); the idle turn below stacks on top */
.hv2-sun-spin {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    transform: rotate(var(--spin, 0deg));
    will-change: transform;
}
/* the imagic shutter, turning slowly inside the disc (the animated logo's
   blades, redrawn as vectors so 1800px stays crisp) */
.hv2-sun-shutter {
    position: absolute;
    inset: 2.6%;
    width: 94.8%;
    height: 94.8%;
    border-radius: 50%;
    overflow: visible;
    animation: hv2-shutter 110s linear infinite;
    will-change: transform;
}
.hv2-blade--a { fill: #33303a; }
.hv2-blade--b { fill: #1a191f; }
.hv2-blade { stroke: rgba(255, 205, 160, 0.22); stroke-width: 0.9; stroke-linejoin: round; }
/* the rim light falling onto the blades near the top */
.hv2-sun-light { display: none; } /* uniform rim: no directional light */
@keyframes hv2-shutter {
    to { transform: rotate(360deg); }
}
.hv2-sun-glow { display: none; } /* uniform rim: no apex bloom */
.hv2-sun-core { display: none; } /* Luke: no white glint at the apex */

.hv2-app {
    position: relative;
    z-index: 2;
    max-width: 1100px;
    margin: 0 auto;
    /* RedSun "Hero (Home V1)": rotateX 35 -> 0 -> -60, y -90 -> 0 -> 200,
       and the inner wrapper y 40 -> -17 with scale 1 -> 1.05 */
    /* --tx/--ty: mouse-follow tilt written by home-v2.js (0 when idle) */
    transform:
        perspective(1500px)
        translate3d(0, calc(-90px * (1 - var(--p1)) + 200px * var(--p2) + 40px - 57px * var(--p1) + (1 - var(--q)) * 70vh), 0)
        rotateX(calc(-60deg * var(--p2) + var(--tx, 0deg))) /* flat at rest (Luke); only the pointer tilts it until it leaves */
        rotateY(var(--ty, 0deg))
        scale(calc(1 + 0.05 * var(--p1)));
    transform-origin: 50% 40%;
    will-change: transform;
}
.hv2-app-frame {
    position: relative;
    border-radius: 14px;
    padding: 8px;
    background: rgba(14, 14, 18, 0.72);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 190, 130, 0.22);
    box-shadow:
        inset 0 24px 48px rgba(255, 200, 150, 0.05),
        0 30px 80px rgba(0, 0, 0, 0.65),
        0 0 0 1px rgba(255, 255, 255, 0.04);
    animation: hv2-app-in 1.2s var(--ease-expo) 1.2s both;
    will-change: transform, opacity;
}
.hv2-app-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 8px 10px;
}
.hv2-dots { display: flex; gap: 6px; }
.hv2-dots i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.hv2-dots i:nth-child(1) { background: #ff5f57; }
.hv2-dots i:nth-child(2) { background: #ffbd2e; }
.hv2-dots i:nth-child(3) { background: #28c840; }
.hv2-app-title { flex: 1; text-align: center; font-size: 0.74rem; color: var(--dim); font-weight: 500; }
.hv2-app-frame img {
    width: 100%;
    height: auto; /* the width/height attributes only reserve space */
    display: block;
    border-radius: 8px;
}

.hv2-fade {
    position: absolute;
    z-index: 1;
    left: -20vw;
    right: -20vw;
    top: calc(var(--stage-top) - 60px);
    bottom: 0; /* never past the stage: the hero paints above the next section */
    background: linear-gradient(180deg, rgba(10, 10, 12, 0) 0%, var(--page) 14%);
    opacity: var(--q);
    pointer-events: none;
    will-change: transform;
}

.hv2-trademark {
    position: relative;
    z-index: 3;
    font-size: 7px;
    line-height: 1.3;
    opacity: 0.28;
    text-align: center;
    margin: 18px 0 0;
    letter-spacing: 0.02em;
}

/* ------------------------------------------------------------
   Marquee ("drive imagic from")
   ------------------------------------------------------------ */
.hv2-runs {
    position: relative;
    z-index: auto; /* below the hero, so a tipping frame is never cut by it */
    background: var(--page);
    padding: 48px 0 60px;
}
.hv2-runs-label {
    text-align: center;
    color: var(--dim);
    font-size: 0.9rem;
    margin: 0 0 30px;
}
.hv2-marquee {
    position: relative;
    display: flex;
    overflow: hidden;
    padding: 6px 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.hv2-marquee-track {
    display: flex;
    flex: none;
    align-items: center;
    animation: hv2-marquee 32s linear infinite;
    will-change: transform;
}
.hv2-marquee:hover .hv2-marquee-track { animation-play-state: paused; }
.hv2-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 32px;
    padding: 0 40px;
    color: var(--muted);
    font-weight: 500;
    font-size: 0.98rem;
    white-space: nowrap;
    opacity: 0.7;
    transition: opacity 0.3s, color 0.3s;
}
.hv2-logo:hover { opacity: 1; color: var(--ink); }
.hv2-logo-ic {
    width: 22px;
    height: 22px;
    background: currentColor;
    -webkit-mask: var(--ic) center / contain no-repeat;
    mask: var(--ic) center / contain no-repeat;
    flex: none;
}
.hv2-logo-mono {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    padding: 4px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
}

/* ------------------------------------------------------------
   Bento (RedSun home-grid)
   ------------------------------------------------------------ */
.hv2-bento {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.hv2-box-wrap {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 28px;
    padding: 6px;
    transition: border-color 0.4s, box-shadow 0.4s;
}
/* glow only: changing the padding on hover (the template's trick) reflows
   the copy, shrinks the grid row and makes the whole bento jump */
.hv2-box-wrap:hover { border-color: var(--line-hi); box-shadow: 0 0 0 1px rgba(255, 178, 102, 0.12), 0 18px 60px rgba(246, 112, 20, 0.14); }
.hv2-box {
    position: relative;
    height: 100%;
    border-radius: 24px;
    background: var(--card);
    box-shadow: inset 0 -9px 24px rgba(246, 112, 20, 0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 30px;
    min-height: 320px;
}
.hv2-box--wide { grid-column: span 2; }
.hv2-box--wide .hv2-box {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 28px;
    align-items: center;
}
.hv2-box-copy h3 {
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    margin: 0 0 10px;
    color: #fff;
}
.hv2-box-copy p { color: var(--muted); font-size: 0.95rem; line-height: 1.6; margin: 0; }
.hv2-box-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brand);
    margin-bottom: 14px;
}
.hv2-box-visual { position: relative; }
.hv2-box:not(.hv2-box--row) .hv2-box-visual { margin-top: auto; padding-top: 22px; }

/* widget: metric bars + score ring */
.hv2-metrics {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 22px;
    align-items: center;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 18px 20px;
}
.hv2-metric { display: grid; grid-template-columns: 92px 1fr 34px; gap: 10px; align-items: center; font-size: 0.78rem; color: var(--muted); margin: 7px 0; }
.hv2-metric b { color: var(--ink); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.hv2-bar { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.hv2-bar i {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 6px;
    background: linear-gradient(90deg, #ff6a00, #ffb347);
    box-shadow: 0 0 12px rgba(255, 140, 40, 0.6);
    transition: width 1.3s var(--ease-expo);
    transition-delay: calc(var(--i, 0) * 80ms + 200ms);
}
.is-in .hv2-bar i { width: var(--w); }
.hv2-ring { position: relative; width: 108px; height: 108px; }
.hv2-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.hv2-ring circle { fill: none; stroke-width: 7; }
.hv2-ring .hv2-ring-track { stroke: rgba(255, 255, 255, 0.07); }
.hv2-ring .hv2-ring-fill {
    stroke: url(#hv2RingGrad);
    stroke-linecap: round;
    stroke-dasharray: 289.03;
    stroke-dashoffset: 289.03;
    filter: drop-shadow(0 0 6px rgba(255, 150, 50, 0.7));
    transition: stroke-dashoffset 1.6s var(--ease-expo) 0.3s;
}
.is-in .hv2-ring .hv2-ring-fill { stroke-dashoffset: calc(289.03 * (1 - var(--score))); }
.hv2-ring-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.hv2-ring-label b { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.03em; color: #fff; line-height: 1; font-variant-numeric: tabular-nums; }
.hv2-ring-label span { font-size: 0.66rem; color: var(--dim); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 4px; }

/* widget: burst stack */
.hv2-stack {
    position: relative;
    height: 190px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hv2-shot {
    position: absolute;
    width: 118px;
    height: 148px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: #1a1a20 center / cover no-repeat;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
    transform: translate3d(0, 28px, 0) rotate(0deg) scale(0.92);
    opacity: 0;
    transition: transform 1.1s var(--ease-expo), opacity 0.6s ease, filter 0.6s ease;
    transition-delay: calc(var(--i, 0) * 110ms + 150ms);
}
.hv2-shot::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.55));
}
.hv2-shot-tag {
    position: absolute;
    right: 8px;
    bottom: 8px;
    z-index: 1;
    width: 24px;
    height: 24px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    color: #fff;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.15);
}
.is-in .hv2-shot { opacity: 1; }
.is-in .hv2-shot:nth-child(1) { transform: translate3d(-118px, 6px, 0) rotate(-9deg) scale(0.88); filter: brightness(0.55) saturate(0.7); }
.is-in .hv2-shot:nth-child(2) { transform: translate3d(-44px, 2px, 0) rotate(-3deg) scale(0.94); filter: brightness(0.65) saturate(0.8); }
.is-in .hv2-shot:nth-child(3) { transform: translate3d(44px, -6px, 0) rotate(3deg) scale(1.02); z-index: 2; }
.is-in .hv2-shot:nth-child(4) { transform: translate3d(118px, 6px, 0) rotate(9deg) scale(0.88); filter: brightness(0.55) saturate(0.7); }
.hv2-shot--keep { border-color: rgba(255, 150, 50, 0.9); box-shadow: 0 0 0 1px rgba(255, 150, 50, 0.6), 0 0 28px rgba(255, 130, 30, 0.45), 0 16px 40px rgba(0, 0, 0, 0.5); }
.hv2-shot--keep .hv2-shot-tag { background: var(--brand); border-color: rgba(255, 220, 180, 0.6); }
.hv2-stack:hover .hv2-shot:nth-child(1) { transform: translate3d(-150px, 10px, 0) rotate(-13deg) scale(0.86); }
.hv2-stack:hover .hv2-shot:nth-child(2) { transform: translate3d(-58px, 4px, 0) rotate(-5deg) scale(0.92); }
.hv2-stack:hover .hv2-shot:nth-child(3) { transform: translate3d(50px, -14px, 0) rotate(2deg) scale(1.08); }
.hv2-stack:hover .hv2-shot:nth-child(4) { transform: translate3d(150px, 10px, 0) rotate(13deg) scale(0.86); }
.hv2-stack-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    text-align: center;
    font-size: 0.74rem;
    color: var(--dim);
}
.hv2-stack-caption b { color: var(--brand); font-weight: 600; }

/* widget: floating format chips (mouse parallax) */
.hv2-formats {
    position: relative;
    height: 190px;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    gap: 10px;
    padding: 0 6px;
}
.hv2-chip {
    display: inline-flex;
    align-items: center;
    padding: 8px 13px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.03);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--muted);
    box-shadow: inset 0 -6px 16px rgba(246, 112, 20, 0.10);
    transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0);
    transition: transform 0.5s var(--ease-expo), border-color 0.3s, color 0.3s;
    will-change: transform;
}
.hv2-chip--raw { color: var(--ink); border-color: rgba(255, 178, 102, 0.28); }
.hv2-chip:hover { border-color: var(--brand); color: #fff; }

/* widget: glow-border prompt box */
.hv2-glowbox {
    position: relative;
    border-radius: 18px;
    padding: 1.5px;
    background: conic-gradient(from var(--hv2-angle),
        transparent 0%, transparent 18%,
        rgba(255, 152, 0, 0.95) 30%, rgba(255, 220, 160, 0.95) 38%, rgba(255, 152, 0, 0.9) 46%,
        transparent 58%, transparent 74%,
        rgba(255, 152, 0, 0.55) 84%, transparent 94%, transparent 100%);
    animation: hv2-spin 7s linear infinite;
}
.hv2-glowbox::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 24px;
    background: inherit;
    filter: blur(18px);
    opacity: 0.5;
    z-index: -1;
}
.hv2-glowbox-inner {
    position: relative;
    border-radius: 16.5px;
    background: #0b0b0f;
    padding: 18px 20px 16px;
    font-family: var(--font-mono);
    font-size: 0.88rem;
    line-height: 1.7;
    color: var(--ink);
    min-height: 132px;
}
.hv2-prompt-line { color: var(--muted); }
.hv2-prompt-line .hv2-dollar { color: var(--brand); margin-right: 10px; }
.hv2-prompt-text { color: #fff; white-space: pre-wrap; word-break: break-word; }
.hv2-caret {
    display: inline-block;
    width: 0.55em;
    height: 1.05em;
    vertical-align: -0.18em;
    margin-left: 2px;
    background: var(--brand);
    animation: hv2-caret 1s steps(1) infinite;
}
.hv2-prompt-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    font-family: var(--font-sans);
    font-size: 0.74rem;
    color: var(--dim);
}
.hv2-prompt-foot .hv2-logo-mono { font-size: 0.72rem; padding: 3px 8px; color: var(--muted); }
.hv2-prompt-tools { display: flex; gap: 8px; align-items: center; }
.hv2-prompt-tools .hv2-logo-ic { width: 16px; height: 16px; color: var(--muted); }

/* ------------------------------------------------------------
   Features: six compact cards + the MCP showcase
   ------------------------------------------------------------ */
.hv2-feat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-bottom: 26px;
}
.hv2-feat {
    padding: 26px 24px 24px;
    border-radius: 20px;
    border: 1px solid var(--line);
    background: var(--card);
    box-shadow: inset 0 -9px 24px rgba(246, 112, 20, 0.07);
    transition: transform 0.5s var(--ease-expo), border-color 0.4s, box-shadow 0.4s;
}
.hv2-feat:hover { transform: translateY(-4px); border-color: var(--line-hi); box-shadow: inset 0 -9px 24px rgba(246, 112, 20, 0.12), 0 18px 50px rgba(0, 0, 0, 0.35); }
.hv2-feat-ic {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    color: var(--brand);
    background: rgba(255, 152, 0, 0.10);
    border: 1px solid rgba(255, 152, 0, 0.22);
    box-shadow: inset 0 -6px 14px rgba(246, 112, 20, 0.16);
    margin-bottom: 18px;
}
.hv2-feat h3 { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; color: #fff; margin: 0 0 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hv2-feat p { color: var(--muted); font-size: 0.92rem; line-height: 1.6; margin: 0; }
.hv2-feat { display: flex; flex-direction: column; }
/* a real piece of the app under each card's copy, at its native proportions */
.hv2-feat-shot {
    margin-top: auto;
    padding-top: 18px;
}
.hv2-feat-shot img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.hv2-feat-tier {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--brand);
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255, 152, 0, 0.3);
    background: rgba(255, 152, 0, 0.08);
}
/* spec mosaic: one panel, hairline dividers, cells of different spans */
.hv2-mosaic {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1px;
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 26px;
    overflow: hidden;
    margin-bottom: 26px;
}
.hv2-cell {
    background: var(--card);
    padding: 30px 30px 28px;
    min-height: 210px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.hv2-cell--2 { grid-column: span 2; }
.hv2-cell--3 { grid-column: span 3; }
.hv2-eyebrow { display: block; font-size: 0.8rem; color: var(--dim); margin-bottom: 10px; }
.hv2-eyebrow .hv2-feat-tier { margin-left: 6px; vertical-align: 1px; }
.hv2-big {
    font-size: clamp(1.45rem, 2.2vw, 2.05rem);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.12;
    color: #fff;
    margin: 0 0 10px;
}
.hv2-cell p { color: var(--muted); font-size: 0.9rem; line-height: 1.55; margin: 0; max-width: 34ch; }
.hv2-cell--visual { padding: 22px; justify-content: center; align-items: center; }
.hv2-cell--visual img {
    display: block;
    width: 100%;
    max-height: 250px;
    object-fit: contain;
    border-radius: 10px;
}
.hv2-cell--tier { justify-content: flex-start; align-items: stretch; }
.hv2-cell--tier img { margin-top: 18px; width: 100%; height: auto; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.08); }
.hv2-cell--visual.hv2-cell--tier { align-items: stretch; justify-content: flex-start; padding: 30px; }
.hv2-cell--visual.hv2-cell--tier img { max-height: none; }
.hv2-cell--split {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 22px;
    align-items: center;
}
.hv2-cell--split img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.hv2-cell-strip { display: block; width: 100%; height: auto; margin-top: 16px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.08); }
@media (max-width: 1024px) {
    .hv2-cell--2 { grid-column: span 3; }
    .hv2-cell--3 { grid-column: span 6; }
}
@media (max-width: 640px) {
    .hv2-cell--2, .hv2-cell--3 { grid-column: span 6; }
    .hv2-cell--split { grid-template-columns: 1fr; }
    .hv2-cell { min-height: 0; }
}
/* spec grid, clean on the page: no panel, no dividers, cells of different
   spans, each image whole and inside the cell of its own text */
.hv2-spec {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1px; /* inner hairlines only: the grid's background shows in the gaps */
    background: rgba(255, 255, 255, 0.10);
    margin: 8px 0 44px;
}
.hv2-spec-cell { display: flex; flex-direction: column; min-width: 0; background: var(--page); padding: 34px 34px 32px; }
/* explicit placement: tall image cells get a stacked pair beside them */
.hv2-spec-cell--quality  { grid-column: 1 / 4; grid-row: 1 / 3; }
.hv2-spec-cell--dupes    { grid-column: 4 / 7; grid-row: 1; }
.hv2-spec-cell--speed    { grid-column: 4 / 7; grid-row: 2; }
.hv2-spec-cell--feedback { grid-column: 1 / 4; grid-row: 3; }
.hv2-spec-cell--raw      { grid-column: 4 / 7; grid-row: 3 / 5; }
.hv2-spec-cell--masks    { grid-column: 1 / 4; grid-row: 4; }
.hv2-spec-cell--max      { grid-column: 1 / 7; grid-row: 5; }
.hv2-spec-cell--band { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.hv2-spec-cell--band .hv2-spec-img, .hv2-spec-cell--band .hv2-spec-img-box { margin-top: 0; }
.hv2-spec-cell--quality .hv2-spec-img-box, .hv2-spec-cell--masks .hv2-spec-img-box { margin-top: auto; padding-top: 22px; }
.hv2-spec-cell--flip .hv2-spec-img-box { order: -1; margin: 0 0 22px; }
.hv2-spec-cell--short { justify-content: center; }
.hv2-spec-cell .hv2-eyebrow { font-size: 0.82rem; margin-bottom: 8px; }
.hv2-spec-cell .hv2-big { margin-bottom: 10px; }
.hv2-big--xl { font-size: clamp(2.4rem, 4vw, 3.4rem); letter-spacing: -0.035em; }
.hv2-spec-cell p { color: var(--muted); font-size: 0.93rem; line-height: 1.6; margin: 0; max-width: 46ch; }
.hv2-spec-img {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 22px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}
.hv2-spec-img--narrow, .hv2-spec-img-box--narrow { width: min(100%, 320px); }
.hv2-spec-img--center, .hv2-spec-img-box--center { margin-left: auto; margin-right: auto; margin-top: 26px; }
/* the box carries the image's place in the cell; the cover inside it shrinks off the image */
.hv2-spec-img-box { position: relative; display: block; margin-top: 22px; }
.hv2-spec-img-box > .hv2-spec-img { margin: 0; width: 100%; }
.hv2-spec-cell--raw { justify-content: center; }
.hv2-runs-showcase { margin-top: 44px; }
@media (max-width: 760px) {
    .hv2-spec-cell--quality, .hv2-spec-cell--dupes, .hv2-spec-cell--speed, .hv2-spec-cell--feedback,
    .hv2-spec-cell--raw, .hv2-spec-cell--masks, .hv2-spec-cell--max { grid-column: 1 / 7; grid-row: auto; }
    .hv2-spec-cell--band { grid-template-columns: 1fr; }
    .hv2-spec-cell { padding: 26px 22px; }
}
/* the cells themselves stay put (hairlines must not shift); only their
   contents animate */
.hv2-spec-cell.hv2-reveal { opacity: 1; transform: none; transition: none; }
/* one animation per mosaic cell, each matching what the cell shows ------- */
.hv2-spec-cell .hv2-eyebrow, .hv2-spec-cell .hv2-big, .hv2-spec-cell p {
    opacity: 0;
    transform: translate3d(0, 12px, 0);
    transition: opacity 0.7s var(--ease-expo), transform 0.7s var(--ease-expo);
}
.hv2-spec-cell .hv2-big { transition-delay: 90ms; }
.hv2-spec-cell p { transition-delay: 180ms; }
.hv2-spec-cell.is-in .hv2-eyebrow, .hv2-spec-cell.is-in .hv2-big, .hv2-spec-cell.is-in p { opacity: 1; transform: none; }

/* image reveals run on the compositor only (transform / opacity), so they
   stay smooth while the page's scroll work keeps the main thread busy: a
   page-coloured cover shrinks off each image instead of a clip-path wipe */
.hv2-wipe-cover {
    position: absolute;
    inset: -1px;
    background: var(--page);
    pointer-events: none;
    transform: scale3d(1, 1, 1);
    transform-origin: right center;
    will-change: transform;
    transition: transform 1.1s var(--ease-expo) 0.25s;
}
/* review tile: reveals left to right, like its metric bars filling */
.is-in .hv2-wipe--right .hv2-wipe-cover { transform: scale3d(0, 1, 1); }
/* duplicate group: one slower sweep across the four cards */
.hv2-wipe--cards .hv2-wipe-cover { transition-duration: 1.5s; transition-delay: 0.2s; }
.is-in .hv2-wipe--cards .hv2-wipe-cover { transform: scale3d(0, 1, 1); }
/* histogram: draws upward */
.hv2-wipe--up .hv2-wipe-cover { transform-origin: center top; transition-duration: 1.2s; }
.is-in .hv2-wipe--up .hv2-wipe-cover { transform: scale3d(1, 0, 1); }
/* AI tool rows: top row first */
.hv2-wipe--down .hv2-wipe-cover { transform-origin: center bottom; transition-duration: 1s; }
.is-in .hv2-wipe--down .hv2-wipe-cover { transform: scale3d(1, 0, 1); }
/* denoise: resolves from faint and slightly large to crisp */
.hv2-anim-sharpen {
    opacity: 0.2;
    transform: scale3d(1.06, 1.06, 1);
    will-change: transform, opacity;
    transition: opacity 1.1s ease 0.2s, transform 1.3s var(--ease-expo) 0.2s;
}
.is-in .hv2-anim-sharpen { opacity: 1; transform: none; }
/* headline that rises word by word on scroll (feedback learning) */
.hv2-words-scroll .hv2-word-s { display: inline-block; opacity: 0; transform: translate3d(0, 0.5em, 0); filter: blur(6px);
    transition: opacity 0.7s var(--ease-expo), transform 0.7s var(--ease-expo), filter 0.7s var(--ease-expo);
    transition-delay: calc(120ms + var(--wi, 0) * 90ms); }
.is-in .hv2-words-scroll .hv2-word-s { opacity: 1; transform: none; filter: blur(0); }
@media (prefers-reduced-motion: reduce) {
    .hv2-spec-cell .hv2-eyebrow, .hv2-spec-cell .hv2-big, .hv2-spec-cell p,
    .hv2-anim-sharpen, .hv2-words-scroll .hv2-word-s {
        opacity: 1 !important; transform: none !important; clip-path: none !important; filter: none !important; transition: none !important;
    }
    .hv2-wipe-cover { display: none; }
}

.hv2-mcp {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 44px;
    align-items: center;
    padding: 40px 44px;
    border-radius: 26px;
    border: 1px solid var(--line);
    background:
        radial-gradient(ellipse at 0% 0%, rgba(255, 152, 0, 0.10), transparent 55%),
        var(--card);
    box-shadow: inset 0 -12px 30px rgba(246, 112, 20, 0.08);
}
.hv2-mcp-copy .hv2-tag { margin-bottom: 18px; }
.hv2-mcp-copy h3 {
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0 0 14px;
    color: #fff;
}
.hv2-mcp-copy h3 em {
    font-style: normal;
    background-image: linear-gradient(135deg, #ff9800, #ffb347, #ffcc80);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.hv2-mcp-copy p { color: var(--muted); font-size: 0.98rem; line-height: 1.7; margin: 0 0 18px; }
.hv2-mcp-clients { display: flex; gap: 14px; align-items: center; margin-bottom: 22px; }
.hv2-mcp-clients .hv2-logo-ic { width: 20px; height: 20px; color: var(--muted); opacity: 0.8; }
.hv2-actions--left { justify-content: flex-start; }
@media (max-width: 1024px) { .hv2-feat-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 860px) { .hv2-mcp { grid-template-columns: 1fr; padding: 28px 22px; } .hv2-feat-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------
   Workflow rows (RedSun feature-grid + "Visible Images" scroll anim)
   ------------------------------------------------------------ */
.hv2-rows { display: flex; flex-direction: column; gap: 96px; }
.hv2-row {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 64px;
    align-items: center;
}
.hv2-row--flip .hv2-row-copy { order: 2; }
.hv2-row--flip .hv2-row-visual { order: 1; }
.hv2-step {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--brand);
    letter-spacing: 0.06em;
    margin-bottom: 16px;
}
.hv2-step::after { content: ''; width: 36px; height: 1px; background: linear-gradient(90deg, var(--brand), transparent); }
.hv2-row-copy h3 {
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0 0 14px;
    color: #fff;
}
.hv2-row-copy h3 span {
    background-image: linear-gradient(135deg, #ff9800, #ffb347, #ffcc80);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.hv2-row-copy p { color: var(--muted); font-size: 1rem; line-height: 1.7; margin: 0 0 20px; }
.hv2-checks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.hv2-checks li { display: flex; align-items: flex-start; gap: 10px; color: var(--muted); font-size: 0.92rem; line-height: 1.5; }
.hv2-checks li i {
    flex: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.56rem;
    color: var(--brand);
    background: rgba(255, 152, 0, 0.12);
    border: 1px solid rgba(255, 152, 0, 0.25);
    margin-top: 2px;
}

.hv2-row-visual {
    position: relative;
    opacity: 0.5;
    transform: translate3d(0, 60px, 0);
    transition: opacity 0.9s var(--ease-expo), transform 0.9s var(--ease-expo);
    perspective: 1200px;
}
.hv2-row-visual.is-in { opacity: 1; transform: none; }
.hv2-frame {
    position: relative;
    border-radius: 14px;
    padding: 6px;
    background: rgba(14, 14, 18, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: inset 0 18px 40px rgba(255, 200, 150, 0.04), 0 28px 70px rgba(0, 0, 0, 0.6);
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform 0.6s var(--ease-expo), box-shadow 0.6s;
    transform-style: preserve-3d;
    will-change: transform;
}
.hv2-frame:hover { box-shadow: inset 0 18px 40px rgba(255, 200, 150, 0.04), 0 28px 70px rgba(0, 0, 0, 0.6), 0 0 70px rgba(246, 112, 20, 0.18); }
.hv2-frame img, .hv2-frame video { width: 100%; height: auto; display: block; border-radius: 9px; background: #0b0b0f; }
.hv2-frame .hv2-app-bar { padding: 4px 8px 8px; }
.hv2-frame-glow {
    position: absolute;
    inset: 12% -10% -20% -10%;
    background: radial-gradient(ellipse at 50% 100%, rgba(246, 112, 20, 0.28), transparent 65%);
    filter: blur(30px);
    z-index: -1;
    pointer-events: none;
}

/* ------------------------------------------------------------
   Stats strip + comparison
   ------------------------------------------------------------ */
.hv2-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: 0 auto 64px;
    max-width: 1000px;
}
.hv2-stat {
    text-align: center;
    padding: 24px 16px 20px;
    border-radius: 20px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.025);
    box-shadow: inset 0 -9px 24px rgba(246, 112, 20, 0.08);
}
/* one centred line per card, identical structure on all four, so the big
   figures share a baseline and the labels line up. The sale card reads
   "from €9.50 -50%": the struck regular price is left to the pricing
   section, where there is room for it; here it would force a second line. */
.hv2-stat { display: flex; flex-direction: column; justify-content: center; }
.hv2-stat b {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: baseline;
    font-size: clamp(1.55rem, 2.3vw, 2.05rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
    color: #fff;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.hv2-stat b > [data-price-eur] { display: contents; }
.hv2-stat b .hv2-stat-pre { font-size: 0.55em; font-weight: 500; color: var(--muted); margin-right: 0.3em; letter-spacing: 0; }
.hv2-stat .price-was { display: none; }
.hv2-stat .price-now { white-space: nowrap; }
/* two-column phones: a label that wraps must not push its figure off the
   row's shared line, so every label gets a two-line box there */
@media (max-width: 560px) { .hv2-stat > span { min-height: 3.2em; } }
.hv2-stat > span { display: block; margin-top: 8px; font-size: 0.8rem; color: var(--dim); }

body.hv2 .comparison-table {
    border: 1px solid var(--line);
    border-radius: 24px;
    background: var(--card);
    box-shadow: inset 0 -9px 24px rgba(246, 112, 20, 0.06);
    overflow: hidden;
}
body.hv2 .benefits-grid { display: none; }

/* ------------------------------------------------------------
   Pricing (RedSun pricing cards)
   ------------------------------------------------------------ */
.hv2-prices {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    max-width: 1080px;
    margin: 0 auto;
    align-items: stretch;
}
.hv2-price {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 34px 28px 28px;
    border-radius: 24px;
    border: 1px solid var(--line);
    background: var(--card);
    box-shadow: inset 0 -9px 24px rgba(246, 112, 20, 0.08);
    transition: transform 0.5s var(--ease-expo), border-color 0.4s, box-shadow 0.4s;
}
.hv2-price:hover { transform: translateY(-6px); border-color: rgba(255, 255, 255, 0.16); }
.hv2-price--featured {
    border-color: rgba(255, 152, 0, 0.55);
    background:
        radial-gradient(ellipse at 50% 0%, rgba(255, 152, 0, 0.18), transparent 60%),
        var(--card);
    box-shadow: 0 0 0 1px rgba(255, 152, 0, 0.35), 0 24px 60px rgba(246, 112, 20, 0.18), inset 0 -9px 24px rgba(246, 112, 20, 0.12);
}
.hv2-price--featured:hover { border-color: var(--brand); }
.hv2-price-tag {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: var(--brand) radial-gradient(circle farthest-corner at 50% 100%, #ffb347, #ff6a00 79%);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0 6px 20px rgba(246, 112, 20, 0.4);
}
.hv2-price-tag--quiet { background: var(--card-2); border: 1px solid var(--line); color: var(--muted); box-shadow: none; text-shadow: none; }
.hv2-price-name { font-size: 1.1rem; font-weight: 700; margin-bottom: 14px; color: #fff; }
.hv2-price-amount { font-size: 2.7rem; font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: #fff; }
.hv2-price-amount > span:last-child { display: block; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.01em; color: var(--dim); margin-top: 6px; }
.hv2-price-amount .price-approx { font-size: 1rem; font-weight: 500; letter-spacing: 0; color: var(--dim); }
.hv2-price-tagline { color: var(--dim); font-size: 0.88rem; margin: 14px 0 0; min-height: 40px; line-height: 1.5; }
.hv2-price-divider { height: 1px; background: var(--line); margin: 18px 0; }
.hv2-price--featured .hv2-price-divider { background: rgba(255, 152, 0, 0.35); }
.hv2-price-prefix { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 14px; }
.hv2-price .hv2-checks { margin-bottom: 28px; flex: 1; }
.hv2-price .hv2-btn { width: 100%; margin-top: auto; }
.hv2-price-note {
    max-width: 1080px;
    margin: 40px auto 0;
    text-align: center;
    padding: 22px 28px;
    border-radius: 18px;
    border: 1px solid rgba(255, 152, 0, 0.28);
    background: linear-gradient(180deg, rgba(255, 152, 0, 0.07), rgba(255, 152, 0, 0.02)), var(--card);
    color: var(--muted);
    font-size: 0.95rem;
}
.hv2-price-note strong { color: var(--brand); }
.hv2-price-note .hv2-btn { margin-top: 14px; }
.hv2-price-upgrade { text-align: center; color: var(--dim); font-size: 0.88rem; margin: 22px auto 0; max-width: 760px; line-height: 1.6; }
.hv2-price-upgrade i { color: var(--brand); }

/* ------------------------------------------------------------
   FAQ
   ------------------------------------------------------------ */
.hv2-faq { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.hv2-faq details {
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--card);
    box-shadow: inset 0 -9px 24px rgba(246, 112, 20, 0.05);
    padding: 18px 22px;
    transition: border-color 0.3s;
}
.hv2-faq details:hover, .hv2-faq details[open] { border-color: var(--line-hi); }
.hv2-faq summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    font-weight: 600;
    font-size: 1rem;
    color: #fff;
}
.hv2-faq summary::-webkit-details-marker { display: none; }
.hv2-faq summary i { color: var(--brand); flex: none; font-size: 0.8rem; transition: transform 0.4s var(--ease-expo); }
.hv2-faq details[open] summary i { transform: rotate(180deg); }
.hv2-faq details > p { will-change: height, opacity; }
body.hv2 a.format-chip { display: inline-block; text-decoration: none; }
.hv2-faq p { margin: 12px 0 0; color: var(--muted); line-height: 1.7; font-size: 0.95rem; }
.hv2-faq p strong { color: var(--ink); }
.hv2-faq code { background: rgba(255, 255, 255, 0.06); padding: 2px 8px; border-radius: 6px; font-family: var(--font-mono); font-size: 0.85em; }

/* ------------------------------------------------------------
   CTA with a second sun
   ------------------------------------------------------------ */
.hv2-cta {
    position: relative;
    z-index: 1; /* above the camera photograph running up behind it */
    overflow: hidden;
    padding: 130px 0 130px;
    text-align: center;
    isolation: isolate;
}
.hv2-cta .hv2-sun {
    --sun: min(1300px, 140vw);
    /* only the top of the arc shows: the disc starts two thirds down and
       the section's overflow clips the rest */
    top: 64%;
    z-index: 0;
    opacity: 0;
    transition: opacity 1.2s ease, transform 1.6s var(--ease-expo);
    transform: translate3d(0, 140px, 0);
}
.hv2-cta .hv2-sun-inner { animation: none; }
.hv2-cta .hv2-sun-glow, .hv2-cta .hv2-sun-core { animation: none; }
.hv2-cta.is-in .hv2-sun { opacity: 1; transform: none; }
.hv2-cta h2 {
    font-size: clamp(2rem, 4.4vw, 3.3rem);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin: 0 0 18px;
    color: #fff;
}
.hv2-cta h2 span {
    background-image: linear-gradient(135deg, #ff9800, #ffb347, #ffcc80);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.hv2-cta p { color: var(--muted); font-size: 1.08rem; max-width: 560px; margin: 0 auto 34px; line-height: 1.65; }

/* ------------------------------------------------------------
   Footer: giant wordmark + light sweep
   ------------------------------------------------------------ */
.hv2-footer { position: relative; background: var(--page); }
.hv2-footer-mark {
    position: relative;
    overflow: hidden;
    margin: 0 auto -10px;
    max-width: 1200px;
    padding: 40px 0 0;
}
.hv2-footer-mark img {
    position: relative;
    z-index: 1;
    display: block;
    width: min(78vw, 880px);
    height: auto;
    margin: 0 auto;
    opacity: 0.92;
    -webkit-mask-image: linear-gradient(180deg, #fff 55%, rgba(255, 255, 255, 0.25) 100%);
    mask-image: linear-gradient(180deg, #fff 55%, rgba(255, 255, 255, 0.25) 100%);
}
.hv2-footer-sweep {
    position: absolute;
    left: 15%;
    right: 15%;
    bottom: -35%;
    height: 80%;
    background: radial-gradient(ellipse at 50% 100%, rgba(255, 150, 50, 0.55), rgba(255, 110, 20, 0.2) 45%, transparent 72%);
    filter: blur(40px);
    animation: hv2-sweep 14s ease-in-out infinite;
    pointer-events: none;
}
body.hv2 .footer { position: relative; z-index: 2; padding-top: 40px; }
body.hv2 .footer-bottom { border-top-color: var(--line); }

/* ------------------------------------------------------------
   Works with your camera + footer over the shared camera photograph
   ------------------------------------------------------------ */
body.hv2 .camera-footer-wrap {
    position: relative;
    background: var(--page);
    /* the photograph is taller than this block on wide screens; it may run
       up behind the CTA (which sits above it) rather than be cut off */
    overflow: visible;
    z-index: 0;
}
/* the photograph: pinned to the bottom edge. Its fade-in from the top and
   its dark overlay are plain paint in the same layer (a page-coloured
   gradient over the photo), not a mask: a masked layer drew a faint step
   exactly where the block begins, whatever the stacking */
body.hv2 .camera-footer-wrap::after {
    content: '';
    position: absolute;
    z-index: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 40vw; /* cameras.png is 2000x800 */
    background:
        linear-gradient(to bottom, var(--page) 0%, rgba(10, 10, 12, 0) 45%),
        linear-gradient(to bottom, rgba(10, 10, 12, 0.74) 0%, rgba(10, 10, 12, 0.86) 40%, rgba(10, 10, 12, 0.88) 70%, rgba(10, 10, 12, 0.82) 100%),
        url('/static/img/cameras.png') center bottom / 100% auto no-repeat;
    pointer-events: none;
}
body.hv2 .camera-footer-wrap > section,
body.hv2 .camera-footer-wrap > .hv2-footer { position: relative; z-index: 2; }
body.hv2 .camera-footer-wrap .hv2-footer { background: transparent; }
body.hv2 .hv2-camera { padding: 72px 0 8px; }
.hv2-head--tight { margin-bottom: 28px; }
/* a flatter footer: five columns, tighter rows */
body.hv2 .footer { padding: 36px 0 22px; }
body.hv2 .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 28px; margin-bottom: 26px; }
body.hv2 .footer-col h4 { margin-bottom: 12px; }
body.hv2 .footer-col ul li { margin-bottom: 6px; }
body.hv2 .footer-brand p { margin: 10px 0 14px; }
body.hv2 .footer-bottom { padding-top: 18px; }
@media (max-width: 900px) { body.hv2 .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { body.hv2 .footer-grid { grid-template-columns: 1fr; } }
body.hv2 .format-chip {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--muted);
    box-shadow: inset 0 -6px 16px rgba(246, 112, 20, 0.10);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
body.hv2 .format-chip:hover { border-color: var(--brand); color: #fff; }

/* ------------------------------------------------------------
   Reduced motion + responsive
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .hv2-load, .hv2-reveal, .hv2-row-visual, .hv2-title .hv2-word,
    .hv2-sun-inner, .hv2-sun-glow, .hv2-sun-core, .hv2-app-frame, .hv2-shot,
    body.hv2 .navbar {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
    .hv2-hero-content, .hv2-app, .hv2-sun, .hv2-fade { transform: none !important; opacity: 1 !important; }
    :root { --q: 1 !important; }
    .hv2-intro-space, .hv2-scroll-hint, .hv2-sun-ring { display: none !important; }
    .hv2-hero-pin { position: static; }
    .hv2-light, .hv2-marquee-track, .hv2-glowbox, .hv2-footer-sweep, .hv2-caret, .hv2-sun-shutter { animation: none !important; }
    .hv2-cursor { display: none; }
    .hv2-bar i { width: var(--w) !important; }
    .hv2-ring .hv2-ring-fill { stroke-dashoffset: calc(289.03 * (1 - var(--score))) !important; }
}

@media (max-width: 1024px) {
    .hv2-bento { grid-template-columns: 1fr 1fr; }
    .hv2-box--wide { grid-column: span 2; }
    .hv2-row { gap: 40px; }
}

@media (max-width: 860px) {
    .hv2-hero { padding-top: 120px; }
    .hv2-app { transform: translate3d(0, calc(20px - 40px * var(--p1)), 0) scale(calc(1 + 0.03 * var(--p1))); }
    .hv2-stage { margin-top: 10px; }
    .hv2-box--wide .hv2-box { grid-template-columns: 1fr; }
    .hv2-bento { grid-template-columns: 1fr; }
    .hv2-box--wide { grid-column: auto; }
    .hv2-row, .hv2-row--flip { grid-template-columns: 1fr; }
    .hv2-row--flip .hv2-row-copy { order: 1; }
    .hv2-row--flip .hv2-row-visual { order: 2; }
    .hv2-rows { gap: 64px; }
    .hv2-stats { grid-template-columns: 1fr 1fr; }
    .hv2-prices { grid-template-columns: 1fr; max-width: 440px; }
    .hv2-price--featured { order: -1; }
    .hv2-price-tagline { min-height: 0; }
    .hv2-section { padding: 80px 0; }
    .hv2-lights-holder { left: -60px; top: -260px; gap: 40px; }
}

@media (max-width: 560px) {
    .hv2-pill { font-size: 13px; padding-right: 12px; }
    .hv2-pill span:not(.hv2-pill-chip) { white-space: normal; text-align: left; }
    .hv2-actions .hv2-btn { width: 100%; }
    .hv2-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
    .hv2-metrics { grid-template-columns: 1fr; }
    .hv2-ring { margin: 0 auto; }
    .hv2-shot { width: 92px; height: 116px; }
    .is-in .hv2-shot:nth-child(1) { transform: translate3d(-96px, 6px, 0) rotate(-9deg) scale(0.88); }
    .is-in .hv2-shot:nth-child(2) { transform: translate3d(-34px, 2px, 0) rotate(-3deg) scale(0.94); }
    .is-in .hv2-shot:nth-child(3) { transform: translate3d(34px, -6px, 0) rotate(3deg) scale(1.02); }
    .is-in .hv2-shot:nth-child(4) { transform: translate3d(96px, 6px, 0) rotate(9deg) scale(0.88); }
    .hv2-box { padding: 24px 20px; min-height: 0; }
}

/* photo breaks: taller windows onto the fixed photograph. Each one opens as
   it travels through the viewport (--open is written by the scroll loop):
   a slit at the top and bottom edges, the whole band around the middle, so
   the visible slice of the photo grows as you scroll. The band's layout
   height never changes, only the clip, so nothing below it moves. */
body.hv2 .parallax-divider {
    height: 62vh;
    min-height: 340px;
    max-height: 680px;
    --open: 1;
    clip-path: inset(calc((1 - var(--open)) * 32%) 0);
}
@media (max-width: 768px) {
    body.hv2 .parallax-divider { height: 42vh; min-height: 220px; max-height: 420px; }
}
@media (prefers-reduced-motion: reduce) {
    body.hv2 .parallax-divider { clip-path: none; }
}

/* the online editor, one line under the hero note (the old homepage had it too) */
.hv2-note--editor { margin-top: 6px; }
.hv2-note--editor a { color: var(--muted); text-decoration: underline; text-decoration-color: rgba(255, 152, 0, 0.55); text-underline-offset: 3px; transition: color 0.25s var(--ease-expo); }
.hv2-note--editor a:hover { color: #fff; }