/* =====================================================================
   SMART GUARDIAN — LANDING
   "Not a website. A control room."
   ===================================================================== */

.landing { position: relative; overflow-x: clip; }

/* ---------------------------------------------------------------------
   Top navigation
   --------------------------------------------------------------------- */
.nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 500;
    height: var(--header-h);
    display: flex;
    align-items: center;
    transition: background var(--t) var(--ease), border-color var(--t) var(--ease), backdrop-filter var(--t);
    border-bottom: 1px solid transparent;
}

.nav.stuck {
    background: rgba(4, 8, 12, 0.72);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border-bottom-color: var(--line-soft);
}

.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; }

/* .brand / .brand-mark / .brand-text live in core.css — every shell uses them */

.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a {
    position: relative;
    font-size: 13.5px;
    font-weight: 550;
    color: var(--txt-soft);
    transition: color var(--t) var(--ease);
}
.nav-links a::after {
    content: "";
    position: absolute; left: 0; right: 100%; bottom: -6px;
    height: 1px;
    background: var(--neon);
    box-shadow: 0 0 8px var(--neon);
    transition: right var(--t) var(--ease);
}
.nav-links a:hover { color: var(--txt); }
.nav-links a:hover::after { right: 0; }

.nav-cta { display: flex; align-items: center; gap: 11px; }

.nav-burger { display: none; }

/* ---------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------- */
.hero {
    position: relative;
    min-height: 100svh;
    display: grid;
    place-items: center;
    /* Bottom padding reserves room for the scroll cue; Arabic copy wraps
       taller than English, so the reserve is sized for the longer of the two. */
    /* The extra 25px at the top pays for the orbit's lift below. The orbit
       sits flush under the fixed navigation — its box starts at the header
       height plus a few pixels, and its outer coins ride within about 6px
       of that box edge — so raising it without giving the hero the same
       amount back tucks the top coin behind the bar. */
    padding: calc(var(--header-h) + 31px) 0 66px;
    perspective: 1400px;
}

.stage.wrap { display: grid; gap: 0; }

/* Parallax stage — layers shift with the pointer */
.stage {
    position: relative;
    width: 100%;
    display: grid;
    place-items: center;
    transform-style: preserve-3d;
    transition: transform 500ms var(--ease-soft);
    transform:
        rotateY(calc(var(--mx, 0) * 5deg))
        rotateX(calc(var(--my, 0) * -4deg));
}

.layer { transition: transform 700ms var(--ease-soft); will-change: transform; }
.layer-1 { transform: translate3d(calc(var(--mx,0) * -14px), calc(var(--my,0) * -12px), 0); }
.layer-2 { transform: translate3d(calc(var(--mx,0) * -26px), calc(var(--my,0) * -20px), 0); }
.layer-3 { transform: translate3d(calc(var(--mx,0) * -42px), calc(var(--my,0) * -30px), 0); }

/* ---- Orbital system ------------------------------------------------ */
/*
   The whole system is derived from one number, --stage. Every radius and the
   coin size are fractions of it, so the arrangement is identical at 390px and
   at 1920px — and, critically, nothing is ever drawn outside the box. An
   orbit that overflowed used to change the page's scroll size as it turned,
   which is what made the page appear to drift while the coins rotated.

       core        38%   → radius .190 + .023 tick band = .213
       track A     62%   → radius .310   coin edge .263  (clears the core)
       track B     88%   → radius .440   coin edge .488  (clears the box)
       coin         9.5% of the stage
*/
.orbit-stage {
    /*
       Vertical room the copy underneath needs: badge, headline, paragraph,
       buttons, trust strip and the hero's own padding. Measured on the real
       page, not guessed. Without it the stage takes a flat fraction of the
       viewport, the hero grows ~150-200px taller than the screen, and the
       call-to-action is cut off by the fold on any 768px-tall laptop.
    */
    /* The vh term is not padding: the headline's own size is clamped against
       the viewport height, so a taller screen sets bigger type and the copy
       genuinely needs more room. A flat reserve fits one screen and clips
       the button on the next. */
    --copy-reserve: calc(400px + 7vh);
    /* max() keeps a sane floor: on a very short window the reserve would
       otherwise resolve negative and the stage would collapse. */
    --stage: max(190px, min(680px, 86vw, calc(100svh - var(--copy-reserve))));
    --coin-size: calc(var(--stage) * 0.095);

    position: relative;
    /* Lifted 25px clear of the copy beneath it, which was crowding it at a
       7px gap. A relative offset rather than a margin or a transform on
       purpose: a margin would shorten the row and drag the copy up with it,
       undoing the reserve measured above, and a transform would overwrite
       the pointer-parallax one .layer-1 sets. This moves only what is drawn. */
    top: -25px;
    width: var(--stage);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    margin-inline: auto;

    /* Rotation inside cannot reach outside, so it cannot affect the page */
    contain: layout style;
}

/* Radar sweep */
.radar {
    position: absolute;
    inset: 8%;
    border-radius: 50%;
    overflow: hidden;
    opacity: .55;
    mask-image: radial-gradient(circle, #000 30%, transparent 72%);
    -webkit-mask-image: radial-gradient(circle, #000 30%, transparent 72%);
}
.radar::before {
    content: "";
    position: absolute;
    inset: 0;
    background: conic-gradient(from 0deg,
        rgba(107,255,122,.30) 0deg,
        rgba(107,255,122,.10) 22deg,
        transparent 60deg,
        transparent 360deg);
    animation: radarSweep 5.5s linear infinite;
}
@keyframes radarSweep { to { transform: rotate(360deg); } }

/* Orbital tracks. Two of these sit exactly on the coin radii, so each group
   of four visibly rides a drawn path rather than floating at random. */
.rings { position: absolute; inset: 0; }
.rings i {
    position: absolute;
    inset: 0;
    margin: auto;
    border-radius: 50%;
    border: 1px solid rgba(107,255,122,.10);
}
.rings i:nth-child(1) { width: 40%; height: 40%; border-color: rgba(107,255,122,.16); }
.rings i:nth-child(2) { width: 62%; height: 62%; border-color: rgba(107,255,122,.26); }  /* track A */
.rings i:nth-child(3) { width: 88%; height: 88%; border-color: rgba(107,255,122,.22); border-style: dashed; }  /* track B */
.rings i:nth-child(4) { width: 100%; height: 100%; opacity: .3; }

/* Expanding pulse rings */
.pulse-rings { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.pulse-rings i {
    position: absolute;
    width: 30%; height: 30%;
    border-radius: 50%;
    border: 1px solid rgba(107,255,122,.5);
    animation: ringExpand 4.2s var(--ease-soft) infinite;
}
.pulse-rings i:nth-child(2) { animation-delay: 1.4s; }
.pulse-rings i:nth-child(3) { animation-delay: 2.8s; }

/* ---- The Core ------------------------------------------------------ */
.core {
    position: relative;
    /* Large enough that the wordmark inside sits comfortably rather than
       fighting the rim for space */
    width: 38%;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 50%;
    z-index: 5;
    background:
        radial-gradient(circle at 34% 28%, rgba(255,255,255,.16), transparent 46%),
        radial-gradient(circle, rgba(107,255,122,.20) 0%, rgba(8,16,12,.94) 62%);
    border: 1px solid rgba(107,255,122,.36);
    box-shadow:
        0 0 60px rgba(107,255,122,.30),
        0 0 140px rgba(107,255,122,.16),
        inset 0 0 44px rgba(107,255,122,.14),
        inset 0 2px 0 rgba(255,255,255,.18);
    animation: coreBreathe 5.5s var(--ease-soft) infinite;
}

/* The glow is scaled to the stage and kept short of the inner track, so the
   badges riding it stay crisp instead of being washed out by the core. */
@keyframes coreBreathe {
    0%, 100% {
        box-shadow:
            0 0 calc(var(--stage) * .10) rgba(107, 255, 122, .26),
            0 0 calc(var(--stage) * .22) rgba(107, 255, 122, .10),
            inset 0 0 44px rgba(107, 255, 122, .12),
            inset 0 2px 0 rgba(255, 255, 255, .18);
    }
    50% {
        box-shadow:
            0 0 calc(var(--stage) * .14) rgba(107, 255, 122, .38),
            0 0 calc(var(--stage) * .28) rgba(107, 255, 122, .15),
            inset 0 0 60px rgba(107, 255, 122, .2),
            inset 0 2px 0 rgba(255, 255, 255, .24);
    }
}

/* Rotating scanner arc on the core rim */
.core::before {
    content: "";
    position: absolute;
    inset: -9px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0 72%, rgba(200,255,56,.85) 84%, transparent 92%);
    mask: radial-gradient(circle, transparent calc(50% - 3px), #000 calc(50% - 2px));
    -webkit-mask: radial-gradient(circle, transparent calc(50% - 3px), #000 calc(50% - 2px));
    animation: radarSweep 7s linear infinite;
}

/* Segmented tick ring — scales with the stage so it never crowds track A */
.core::after {
    content: "";
    position: absolute;
    inset: calc(var(--stage) * -0.023);
    border-radius: 50%;
    background: repeating-conic-gradient(from 0deg,
        rgba(107,255,122,.42) 0deg 1.1deg,
        transparent 1.1deg 9deg);
    mask: radial-gradient(circle, transparent calc(50% - 7px), #000 calc(50% - 6px), #000 calc(50% - 1px), transparent 50%);
    -webkit-mask: radial-gradient(circle, transparent calc(50% - 7px), #000 calc(50% - 6px), #000 calc(50% - 1px), transparent 50%);
    animation: radarSweep 30s linear infinite reverse;
    opacity: .7;
}

/*
   Type inside the core scales with --stage, not with the viewport. Tying it
   to vw meant the wordmark could outgrow the circle it lives in and wrap —
   which is exactly what made it look cramped.
*/
.core-inner {
    display: grid;
    place-items: center;
    gap: calc(var(--stage) * 0.012);
    text-align: center;
    z-index: 2;
    padding: 0 8%;
    max-width: 100%;
}

.core-inner .shield {
    width: calc(var(--stage) * 0.085);
    min-width: 20px;
    height: auto;
    color: var(--neon);
    filter: drop-shadow(0 0 14px rgba(107, 255, 122, .8));
}

.core-inner .name {
    font-size: clamp(11px, calc(var(--stage) * 0.05), 23px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    background: linear-gradient(180deg, #fff, var(--neon));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

.core-inner .status {
    font-family: var(--mono);
    font-size: clamp(7.5px, calc(var(--stage) * 0.026), 11px);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--neon);
    opacity: .78;
    white-space: nowrap;
}

/* Arabic sets wider than Latin, so it gets a slightly smaller step and no tracking */
[dir="rtl"] .core-inner .name {
    letter-spacing: 0;
    font-size: clamp(11px, calc(var(--stage) * 0.046), 21px);
}
[dir="rtl"] .core-inner .status { letter-spacing: .05em; }

/* ---- Orbits -------------------------------------------------------- */
.orbit {
    position: absolute;
    inset: 0;
    margin: auto;
    border-radius: 50%;
    transform-style: preserve-3d;
}
/* The two groups counter-rotate. Ring B is offset half a step (45°) in the
   markup so the eight coins interleave instead of pairing up. */
.orbit-a { width: 62%; height: 62%; animation: orbitSpin 52s linear infinite; }
.orbit-b { width: 88%; height: 88%; animation: orbitSpin 78s linear infinite reverse; }

.orbit-a, .orbit-b { will-change: transform; }

@keyframes orbitSpin { to { transform: rotate(360deg); } }
@keyframes orbitSpinRev { to { transform: rotate(-360deg); } }

/*
   Three nested transforms keep each badge upright while it orbits:
     .coin      → rotate(θ) about the ring centre   places it on the track
     .coin-anti → rotate(-θ)                        undoes the placement angle
     .coin-body → counter-spin animation            undoes the ring's rotation
   Net rotation of the badge is exactly zero at every moment.

   The radius is expressed as CSS — .coin is an arm reaching from the ring
   centre to its rim (height 50%), pivoting at the bottom. It used to be a
   pixel value measured in JavaScript, which meant that any change of size
   moved the drawn track immediately while the badges kept the radius from
   the last measurement, leaving them beside their track until a debounced
   recalculation caught up. As a percentage of the same box the ring uses,
   the two cannot disagree.
*/
.coin {
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: 50%;              /* centre → rim: exactly the track radius */
    transform-origin: bottom center;   /* pivot on the ring centre */
    transform: rotate(calc(var(--a) + var(--offset, 0deg)));
}

.coin-anti {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    transform: rotate(calc(-1 * (var(--a) + var(--offset, 0deg))));
}

/* Four badges to a ring, a quarter turn apart. --a and --offset inherit
   into .coin-anti, which negates their sum to keep the badge upright. */
.orbit .coin:nth-child(1) { --a:   0deg; }
.orbit .coin:nth-child(2) { --a:  90deg; }
.orbit .coin:nth-child(3) { --a: 180deg; }
.orbit .coin:nth-child(4) { --a: 270deg; }

/* Ring B starts half a step round so the two groups of four interleave
   into an even eight instead of pairing up. */
.orbit-b .coin { --offset: 45deg; }

/*
   The badge is the coin itself — the disc, its rim light and its shadow are
   drawn inside the SVG, so the wrapper only positions it and adds the glow
   that ties it to the platform's palette.
*/
.coin-body {
    position: absolute;
    /* Pinned explicitly, never left to the static position: that position
       is resolved from the *inline-start* edge, which flips with the page
       direction, so on Arabic every badge was offset half its own width to
       the left of the track. left/top are physical and direction-blind. */
    left: 0;
    top: 0;
    width: var(--coin-size);
    height: var(--coin-size);
    margin-left: calc(var(--coin-size) / -2);
    margin-top: calc(var(--coin-size) / -2);
    display: grid;
    place-items: center;
    /* A shallow offset grounds the disc without shifting where it reads as
       centred — the badge has to sit ON its track, not beside it. */
    filter:
        drop-shadow(0 3px 10px rgba(0, 0, 0, .65))
        drop-shadow(0 0 14px rgba(107, 255, 122, .2));
    transition: filter var(--t) var(--ease);
}

/* Each badge counter-spins at its ring's exact period so it stays upright */
.orbit-a .coin-body { animation: orbitSpinRev 52s linear infinite; }
.orbit-b .coin-body { animation: orbitSpin 78s linear infinite; }

.coin-logo {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.coin-body:hover {
    filter:
        drop-shadow(0 8px 18px rgba(0, 0, 0, .65))
        drop-shadow(0 0 30px rgba(107, 255, 122, .55));
}

/* Connection filaments from core to orbit */
.filaments { position: absolute; inset: 0; pointer-events: none; opacity: .5; }
.filaments line { stroke: url(#filamentGrad); stroke-width: 1; }

/* ---- Hero copy ----------------------------------------------------- */
.hero-copy {
    position: relative;
    z-index: 20;
    text-align: center;
    /* The outer ring now reaches past the stage box, so the copy no longer
       tucks underneath it — that used to put a coin on top of the badge. */
    margin-top: clamp(0px, 1vh, 14px);
    display: grid;
    justify-items: center;
    /*
       Deliberately uneven. A single uniform gap gives five elements the same
       weight; the eye then has to work out the hierarchy from type size
       alone. Tight under the eyebrow, open before the call to action.
    */
    gap: 0;
}

.hero-badge   { margin-bottom: clamp(13px, 1.7vh, 22px); }
.hero h1      { margin-bottom: clamp(11px, 1.4vh, 18px); }
.hero-sub     { margin-bottom: clamp(19px, 2.5vh, 32px); }

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 16px 7px 9px;
    border-radius: 99px;
    background: rgba(107,255,122,.07);
    border: 1px solid rgba(107,255,122,.24);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--txt-soft);
    backdrop-filter: blur(10px);
    animation: fadeUp .9s var(--ease) both;
}
.hero-badge .live {
    display: inline-grid; place-items: center;
    width: 20px; height: 20px; border-radius: 50%;
    background: rgba(107,255,122,.16);
}
.hero-badge .live i {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--neon);
    box-shadow: 0 0 10px var(--neon);
    animation: dotPulse 1.6s var(--ease-soft) infinite;
}

.hero h1 {
    font-size: clamp(30px, min(4.6vw, 6.6vh), 60px);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: .98;
    animation: fadeUp 1s var(--ease) .1s both;
    text-wrap: balance;
}

.hero h1 .line2 {
    display: block;
    background: linear-gradient(100deg, var(--neon) 0%, var(--lime) 48%, var(--aqua) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 0 26px rgba(107,255,122,.35));
}

.hero-sub {
    max-width: 640px;
    font-size: clamp(13.5px, 1.5vw, 16px);
    color: var(--txt-soft);
    line-height: 1.62;
    animation: fadeUp 1s var(--ease) .2s both;
    text-wrap: pretty;
}

.hero-trust {
    display: flex; gap: 30px; flex-wrap: wrap; justify-content: center;
    margin-top: 2px;
    animation: fadeUp 1s var(--ease) .42s both;
}
.hero-trust div { display: grid; justify-items: center; gap: 1px; }
.hero-trust b { font-family: var(--mono); font-size: 19px; font-weight: 700; color: var(--txt); }
.hero-trust span { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--txt-faint); }

/* Scroll cue */
.scroll-cue {
    position: absolute;
    bottom: 22px; left: 50%;
    transform: translateX(-50%);
    display: grid; justify-items: center; gap: 8px;
    font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
    color: var(--txt-faint);
    animation: fadeIn 1.4s var(--ease) 1s both;
}
.scroll-cue .mouse {
    width: 23px; height: 36px;
    border: 1.5px solid rgba(107,255,122,.34);
    border-radius: 14px;
    position: relative;
}
.scroll-cue .mouse::after {
    content: "";
    position: absolute;
    top: 7px; left: 50%;
    width: 3px; height: 7px;
    margin-left: -1.5px;
    border-radius: 2px;
    background: var(--neon);
    box-shadow: 0 0 8px var(--neon);
    animation: scrollDot 1.9s var(--ease-soft) infinite;
}
@keyframes scrollDot {
    0%   { opacity: 0; transform: translateY(0); }
    35%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(11px); }
}

/* ---------------------------------------------------------------------
   Feature sections
   --------------------------------------------------------------------- */
.section { position: relative; padding: 96px 0; }
.section-head { display: grid; justify-items: center; gap: 14px; text-align: center; margin-bottom: 52px; }
.section-head h2 { font-size: clamp(26px, 3.6vw, 42px); letter-spacing: -.03em; text-wrap: balance; }
.section-head p  { max-width: 580px; color: var(--txt-soft); text-wrap: pretty; }

.feature {
    padding: 28px;
    display: grid;
    gap: 14px;
    align-content: start;
    position: relative;
    overflow: hidden;
}

.feature .fx {
    position: absolute;
    right: -30px; top: -30px;
    width: 150px; height: 150px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(107,255,122,.14), transparent 70%);
    opacity: 0;
    transition: opacity var(--t-slow) var(--ease);
}
.feature:hover .fx { opacity: 1; }

.feature .ico {
    width: 50px; height: 50px;
    border-radius: 15px;
    display: grid; place-items: center;
    background: linear-gradient(140deg, rgba(107,255,122,.18), rgba(107,255,122,.04));
    border: 1px solid rgba(107,255,122,.24);
    color: var(--neon);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
    transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.feature .ico svg { width: 23px; height: 23px; }
.feature:hover .ico { transform: translateY(-3px) scale(1.06); box-shadow: var(--glow-sm), inset 0 1px 0 rgba(255,255,255,.16); }

.feature h3 { font-size: 17px; }
.feature p  { font-size: 13.5px; color: var(--txt-soft); line-height: 1.65; }

/* How it works — timeline */
.steps { display: grid; gap: 0; position: relative; }
.steps::before {
    content: "";
    position: absolute;
    left: 27px; top: 34px; bottom: 34px;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(107,255,122,.4), rgba(107,255,122,.4), transparent);
}
.step { display: grid; grid-template-columns: 56px 1fr; gap: 20px; padding: 20px 0; position: relative; }
.step .num {
    width: 56px; height: 56px;
    border-radius: 18px;
    display: grid; place-items: center;
    font-family: var(--mono);
    font-size: 16px; font-weight: 700;
    color: var(--neon);
    background: rgba(6,12,16,.96);
    border: 1px solid rgba(107,255,122,.3);
    box-shadow: 0 0 0 6px rgba(3,6,10,1), var(--glow-sm);
    z-index: 2;
}
.step h3 { font-size: 16.5px; margin-bottom: 5px; }
.step p  { font-size: 13.5px; color: var(--txt-soft); }

/* Preview mockup card */
.preview {
    padding: 20px;
    border-radius: var(--r-lg);
    position: relative;
    overflow: hidden;
}
.preview .bar { display: flex; gap: 7px; margin-bottom: 16px; }
.preview .bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.12); }
.preview .bar i:first-child { background: rgba(255,61,99,.55); }
.preview .bar i:nth-child(2) { background: rgba(255,176,46,.55); }
.preview .bar i:nth-child(3) { background: rgba(107,255,122,.55); }

.mini-pos {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 13px;
    background: rgba(255,255,255,.03);
    border: 1px solid var(--line-soft);
    margin-bottom: 10px;
    animation: fadeUp .7s var(--ease) both;
}
.mini-pos:nth-child(3) { animation-delay: .1s; }
.mini-pos:nth-child(4) { animation-delay: .2s; }

/* CTA band */
.cta-band {
    position: relative;
    padding: 62px 42px;
    border-radius: var(--r-xl);
    text-align: center;
    overflow: hidden;
    background:
        radial-gradient(700px 320px at 50% 0%, rgba(107,255,122,.16), transparent 70%),
        linear-gradient(160deg, rgba(20,30,38,.85), rgba(8,14,20,.9));
    border: 1px solid rgba(107,255,122,.2);
    box-shadow: var(--shadow-2), 0 0 90px rgba(107,255,122,.1);
}
.cta-band::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(107,255,122,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(107,255,122,.05) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(circle at 50% 40%, #000, transparent 72%);
    -webkit-mask-image: radial-gradient(circle at 50% 40%, #000, transparent 72%);
}
.cta-band > * { position: relative; }

/* Footer */
.foot {
    padding: 44px 0 34px;
    border-top: 1px solid var(--line-soft);
    margin-top: 70px;
}
.foot .wrap { display: flex; justify-content: space-between; align-items: center; gap: 22px; flex-wrap: wrap; }
.foot small { color: var(--txt-faint); font-size: 12px; }
.foot-links { display: flex; gap: 22px; flex-wrap: wrap; }
.foot-links a { font-size: 12.5px; color: var(--txt-mute); transition: color var(--t) var(--ease); }
.foot-links a:hover { color: var(--neon); }

.disclaimer {
    margin-top: 20px;
    padding: 15px 18px;
    border-radius: 12px;
    background: rgba(255,176,46,.05);
    border: 1px solid rgba(255,176,46,.16);
    font-size: 11.5px;
    line-height: 1.65;
    color: var(--txt-mute);
}

/* ---------------------------------------------------------------------
   Auth screens
   --------------------------------------------------------------------- */
.auth-screen {
    min-height: 100svh;
    display: grid;
    place-items: center;
    padding: 48px 20px;
}

.auth-card {
    width: min(468px, 100%);
    padding: 38px 34px;
    border-radius: var(--r-lg);
    animation: popIn .6s var(--ease) both;
    position: relative;
}

.auth-card.wide { width: min(560px, 100%); }

.auth-head { display: grid; justify-items: center; gap: 9px; text-align: center; margin-bottom: 28px; }
.auth-head .mark {
    width: 58px; height: 58px;
    border-radius: 19px;
    display: grid; place-items: center;
    background: linear-gradient(140deg, rgba(107,255,122,.22), rgba(200,255,56,.06));
    border: 1px solid rgba(107,255,122,.34);
    box-shadow: var(--glow-md);
    margin-bottom: 5px;
}
.auth-head .mark svg { width: 27px; height: 27px; color: var(--neon); }
.auth-head h1 { font-size: 25px; }
.auth-head p  { font-size: 13.5px; color: var(--txt-mute); }

.auth-alt { margin-top: 22px; text-align: center; font-size: 13px; color: var(--txt-mute); }
.auth-alt a { color: var(--neon); font-weight: 600; }
.auth-alt a:hover { text-decoration: underline; text-underline-offset: 3px; }

.auth-back {
    position: absolute;
    top: 26px; left: 26px;
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 12.5px; color: var(--txt-mute);
    transition: color var(--t) var(--ease);
    z-index: 100;
}
.auth-back:hover { color: var(--neon); }
.auth-back svg { width: 15px; height: 15px; }

/* ---------------------------------------------------------------------
   Activation sequence — the neon lock
   --------------------------------------------------------------------- */
.activation {
    position: fixed;
    inset: 0;
    z-index: 9500;
    display: grid;
    place-items: center;
    background: #010305;
    overflow: hidden;
}

.activation .halo {
    position: absolute;
    width: 620px; height: 620px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(107,255,122,.22), transparent 62%);
    opacity: 0;
    transition: opacity 1s var(--ease);
}
.activation.lit .halo { opacity: 1; }

.lock-stage { display: grid; place-items: center; gap: 34px; text-align: center; z-index: 2; }

.lock {
    position: relative;
    width: 148px; height: 148px;
    display: grid; place-items: center;
}

.lock svg { width: 100%; height: 100%; overflow: visible; }
.lock .lock-body,
.lock .lock-shackle {
    fill: none;
    stroke: var(--neon);
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 14px rgba(107,255,122,.75));
}
.lock .lock-body { fill: rgba(107,255,122,.06); }

.lock .lock-shackle {
    transform-origin: 62px 44px;
    transition: transform .9s var(--ease);
}

.activation.shaking .lock { animation: lockShake .5s var(--ease-soft) 3; }
.activation.opened .lock .lock-shackle { transform: translateY(-16px) rotate(14deg); }

@keyframes lockShake {
    0%, 100% { transform: translateX(0) rotate(0); }
    20%  { transform: translateX(-7px) rotate(-3deg); }
    40%  { transform: translateX(7px)  rotate(3deg); }
    60%  { transform: translateX(-5px) rotate(-2deg); }
    80%  { transform: translateX(5px)  rotate(2deg); }
}

.lock .keyhole { fill: var(--neon); opacity: .85; filter: drop-shadow(0 0 8px var(--neon)); }

.lock-burst {
    position: absolute;
    inset: -40px;
    border-radius: 50%;
    border: 2px solid rgba(107,255,122,.7);
    opacity: 0;
}
.activation.opened .lock-burst { animation: ringExpand 1.1s var(--ease) forwards; }

.lock-status {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--txt-mute);
    min-height: 20px;
    transition: color var(--t) var(--ease);
}
.activation.opened .lock-status { color: var(--neon); }

.lock-progress {
    width: 260px; height: 3px;
    border-radius: 99px;
    background: rgba(255,255,255,.08);
    overflow: hidden;
}
.lock-progress i {
    display: block; height: 100%; width: 0;
    background: linear-gradient(90deg, var(--neon), var(--lime));
    box-shadow: 0 0 14px var(--neon);
    transition: width .5s var(--ease);
}

.activation-done {
    opacity: 0;
    transform: translateY(14px);
    transition: all .7s var(--ease);
    display: grid; gap: 9px; justify-items: center;
}
.activation.opened .activation-done { opacity: 1; transform: none; }
.activation-done h2 {
    font-size: clamp(22px, 4vw, 34px);
    background: linear-gradient(100deg, #fff, var(--neon), var(--lime));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.activation-done p { font-size: 13.5px; color: var(--txt-soft); }

/* ---------------------------------------------------------------------
   Landing responsive
   --------------------------------------------------------------------- */
/* ---------------------------------------------------------------------
   Console — the guardian's session, typed
   --------------------------------------------------------------------- */

/* The navigation is fixed, so whatever section leads the page has to make
   room for it. Written against the first section rather than against the
   console by name: reordering the page then cannot silently slide content
   back under the bar. */
main > section:first-of-type { padding-top: calc(var(--header-h) + 26px); }

/*
   Leading the page changes what this section has to fit into. The measured
   budget on a 768px-tall laptop leaves no room for a 42px headline, a
   400px terminal and four rows of keys all at once — forcing them would
   crush all three. So the terminal takes what is left after the heading,
   and the fold is allowed to fall across the keyboard: cutting a repeating
   element is what tells a reader there is more underneath.
*/
.console-section .section-head { margin-bottom: clamp(22px, 3vh, 40px); }
.console-section .section-head h2 { font-size: clamp(24px, min(3.6vw, 4.4vh), 42px); }

/*
   The two calls to action, spanning the panel below them and pushed to its
   opposite edges rather than paired in the middle. Aligned to the console's
   own width so the three elements share one left and one right edge.
*/
.lead-actions {
    max-width: 880px;
    margin: 0 auto clamp(18px, 2.6vh, 30px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

/* Side by side still, just sharing the row — stacking them would lose the
   "one on each side" the layout is built around. */
@media (max-width: 620px) {
    .lead-actions { gap: 10px; }
    .lead-actions .btn { flex: 1 1 0; min-width: 0; justify-content: center; padding-inline: 12px; }
}

/* The console and the simulator are two panels of one idea, so they sit a
   hand's width apart rather than a section's width apart. Exactly 50px:
   the console gives up its bottom padding and the simulator carries the
   whole gap, so the number is in one place instead of split across two. */
.console-section { padding-bottom: 0; }
.sim-section     { padding-top: 50px; }

.console {
    max-width: 880px;
    margin: 0 auto;
    border-radius: var(--r);
    overflow: hidden;
    border: 1px solid rgba(107, 255, 122, .20);
    background: linear-gradient(180deg, #070d10, #04080b);
    box-shadow:
        0 30px 90px rgba(0, 0, 0, .60),
        0 0 0 1px rgba(255, 255, 255, .03) inset,
        0 0 60px rgba(107, 255, 122, .07);
}

.console-bar {
    /* Window chrome does not mirror here. Everything inside this frame is a
       shell — an LTR one — so flipping the buttons to the right while the
       transcript below stays left reads as two different windows stitched
       together. */
    direction: ltr;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 14px;
    height: 40px;
    background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.012));
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.console-dots { display: flex; gap: 7px; flex: 0 0 auto; }
.console-dots i { width: 11px; height: 11px; border-radius: 50%; }
.console-dots i:nth-child(1) { background: #ff5f56; }
.console-dots i:nth-child(2) { background: #ffbd2e; }
.console-dots i:nth-child(3) { background: #27c93f; }

.console-name {
    flex: 1;
    text-align: center;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .12em;
    color: var(--txt-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.console-live {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--neon);
    opacity: .8;
}
.console-live i {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--neon);
    box-shadow: 0 0 8px var(--neon);
    animation: dotPulse 1.6s var(--ease-soft) infinite;
}

/*
   Fixed height, scrolling inside itself. A panel that grew with the
   transcript would push the rest of the page down on every character.
*/
.console-screen {
    position: relative;
    /* What is left of the screen once the heading above it has been paid
       for — not a flat fraction of the viewport, which ignores it. */
    height: clamp(200px, calc(100svh - 450px), 400px);
    overflow: hidden auto;
    padding: 16px clamp(14px, 2.4vw, 26px) 22px;
    scrollbar-width: none;
}
.console-screen::-webkit-scrollbar { display: none; }

/* Shell output is left-to-right in every locale, Arabic included. */
.console-out {
    direction: ltr;
    text-align: left;
    font-family: var(--mono);
    font-size: clamp(10.5px, 1.15vw, 13px);
    line-height: 1.72;
    white-space: pre;
    color: rgba(150, 214, 168, .62);
}

.console-out .cl { min-height: 1.72em; }
.console-out .cl b { color: var(--lime); font-weight: 400; }
.console-out .cl-cmd   { color: #eafff0; }
.console-out .cl-head  { color: rgba(150, 214, 168, .40); }
.console-out .cl-ok    { color: rgba(122, 240, 148, .82); }
.console-out .cl-good  { color: var(--neon); text-shadow: 0 0 14px rgba(107,255,122,.45); }
.console-out .cl-warn  { color: var(--warn); }
.console-out .cl-alert { color: var(--danger); text-shadow: 0 0 14px rgba(255,61,99,.4); }

/* The caret rides the end of the last line */
.console-out .cl:last-child::after {
    content: "";
    display: inline-block;
    width: .58em;
    height: 1.05em;
    margin-inline-start: 3px;
    background: var(--neon);
    vertical-align: text-bottom;
    animation: caretBlink 1.05s steps(1, end) infinite;
}
@keyframes caretBlink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }

/* Scanlines and a faint bloom, sitting over the text */
.console-scan {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(0deg, rgba(0,0,0,.26) 0 1px, transparent 1px 3px),
        radial-gradient(120% 90% at 50% 0%, rgba(107,255,122,.06), transparent 62%);
    mix-blend-mode: overlay;
    z-index: 2;
}

/* ---- Keyboard ------------------------------------------------------ */
.keyboard {
    /* Height matters as much as width here: on a short laptop the deck has
       to give ground too, or it eats the terminal above it. */
    --key:  clamp(17px, min(3.1vw, 4.4vh), 40px);
    --kgap: clamp(3px, .45vw, 7px);

    direction: ltr;                 /* a QWERTY deck does not mirror */
    max-width: 880px;
    margin: clamp(14px, 2vw, 22px) auto 0;
    display: grid;
    gap: var(--kgap);
    padding: clamp(10px, 1.4vw, 18px);
    border-radius: var(--r);
    border: 1px solid rgba(255, 255, 255, .06);
    background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.28));
    box-shadow: 0 20px 60px rgba(0,0,0,.45);
}

.kbd-row { display: flex; gap: var(--kgap); justify-content: center; }

.key {
    /* A key of span S covers S key widths plus the (S-1) gaps it absorbs,
       so a row's total width depends only on its total span — which is why
       every row lines up despite having different key counts. */
    flex: 0 0 calc(var(--span, 1) * var(--key) + (var(--span, 1) - 1) * var(--kgap));
    height: var(--key);
    display: grid;
    place-items: center;
    border-radius: calc(var(--key) * .22);
    border: 1px solid rgba(255, 255, 255, .07);
    background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.012));
    box-shadow: 0 2px 0 rgba(0,0,0,.5), 0 0 0 1px rgba(0,0,0,.25);
    font-family: var(--mono);
    font-size: clamp(7.5px, .82vw, 11px);
    color: var(--txt-mute);
    user-select: none;
    transition: background .16s var(--ease), color .16s var(--ease), box-shadow .16s var(--ease);
}

.key-wide { font-size: clamp(6.5px, .68vw, 9.5px); letter-spacing: .06em; }

/* Struck. No transition on the way in, so the hit reads as instant and
   only the release fades — which is how a key actually feels. */
.key.is-down {
    background: var(--neon);
    color: #04210b;
    box-shadow: 0 0 0 1px var(--neon), 0 0 18px rgba(107,255,122,.55);
    transform: translateY(1px);
    transition: none;
}

.console-note {
    max-width: 880px;
    margin: clamp(12px, 1.6vw, 18px) auto 0;
    text-align: center;
    font-size: 11.5px;
    color: var(--txt-faint);
}

/* Space is the only key hit often enough to be worth labelling quietly */
.key[data-key=" "] { color: var(--txt-faint); font-size: clamp(6.5px, .6vw, 8.5px); }

/* ---------------------------------------------------------------------
   Simulator — one trade, drawn

   Every class here is prefixed. The source this was adapted from used bare
   names — .coin, .entry, .main, .dot, .bar — six of which already mean
   something else in this stylesheet. .coin in particular is the orbit badge
   in the hero, so dropping the widget in unprefixed rewrote the hero.
   --------------------------------------------------------------------- */
.tg {
    max-width: 980px;
    margin: 0 auto;
    border-radius: var(--r);
    overflow: hidden;
    border: 1px solid rgba(107, 255, 122, .16);
    background: linear-gradient(160deg, #0a1116, #05090c);
    box-shadow: 0 30px 90px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.04);
}

/* ---- Title bar ---- */
.tg-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    background: linear-gradient(180deg, rgba(255,255,255,.045), transparent);
}

.tg-pair { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14px; }
.tg-mark { width: 26px; height: 26px; display: grid; place-items: center; }
.tg-logo { width: 100%; height: 100%; }

.tg-tag {
    padding: 4px 9px;
    border-radius: 7px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.07);
    color: var(--txt-faint);
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.tg-caps { display: inline-flex; align-items: center; gap: 7px; }
.tg-caps-label { font-size: 11px; color: var(--txt-faint); margin-inline-end: 3px; }

.tg-cap {
    padding: 6px 11px;
    border-radius: 9px;
    border: 1px solid rgba(255,255,255,.09);
    background: rgba(255,255,255,.035);
    color: var(--txt-mute);
    font-family: var(--mono);
    font-size: 11px;
    cursor: pointer;
    transition: all var(--t-fast) var(--ease);
}
.tg-cap:hover { color: var(--txt-soft); border-color: rgba(107,255,122,.3); }
.tg-cap.is-on {
    background: rgba(107,255,122,.14);
    border-color: rgba(107,255,122,.5);
    color: var(--neon);
    box-shadow: 0 0 16px rgba(107,255,122,.18);
}

/* ---- Fact strip ---- */
.tg-facts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-bottom: 1px solid rgba(255,255,255,.06);
    background: rgba(0,0,0,.28);
}
.tg-facts > div { padding: 11px 16px; border-inline-end: 1px solid rgba(255,255,255,.05); }
.tg-facts > div:last-child { border-inline-end: 0; }
.tg-facts label {
    display: block;
    margin-bottom: 5px;
    font-size: 9.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--txt-faint);
}
.tg-facts b { font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: var(--txt); }

/* ---- Body ---- */
.tg-body { display: grid; grid-template-columns: minmax(0, 1fr) 236px; }

.tg-chart {
    position: relative;
    direction: ltr;               /* a price chart does not mirror */
    min-height: clamp(280px, 34vh, 360px);
    overflow: hidden;
    background:
        repeating-linear-gradient(0deg,  transparent 0 59px, rgba(255,255,255,.035) 59px 60px),
        repeating-linear-gradient(90deg, transparent 0 74px, rgba(255,255,255,.025) 74px 75px);
}

.tg-axis {
    position: absolute;
    right: 12px;
    font-family: var(--mono);
    font-size: 9.5px;
    color: var(--txt-faint);
    z-index: 2;
}
.tg-axis-1 { top: 12px; }
.tg-axis-2 { top: 50%; transform: translateY(-50%); }
.tg-axis-3 { bottom: 12px; }

.tg-readout {
    position: absolute;
    z-index: 5;
    left: 14px;
    top: 14px;
    padding: 7px 10px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 8px;
    background: rgba(4, 9, 12, .84);
    backdrop-filter: blur(8px);
    font-family: var(--mono);
    font-size: 11px;
    color: var(--txt-soft);
    white-space: nowrap;
}
.tg-readout b { color: var(--loss); font-weight: 600; }

/* Entry and exit levels */
.tg-level {
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    border-top: 1px dashed;
    transition: top .4s var(--ease);
}
.tg-level span {
    position: absolute;
    top: -10px;
    left: 12px;
    padding: 3px 8px;
    border-radius: 6px;
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: .06em;
    white-space: nowrap;
}
.tg-entry { top: var(--tg-entry-y, 21%); border-color: rgba(127, 233, 255, .45); }
.tg-entry span { background: rgba(20, 58, 72, .95); color: var(--ice); }
/* The exit is drawn from the first frame, not revealed when it is hit. It
   is armed the moment the cap is set — that is the product — and hiding it
   until the loss arrives would tell the opposite story. */
.tg-stop { top: var(--tg-stop-y, 79%); border-color: rgba(255, 77, 109, .5); }
.tg-stop span { background: rgba(78, 16, 30, .95); color: #ff97ab; }

/* Live price */
.tg-price-line {
    position: absolute;
    z-index: 3;
    left: 0; right: 0;
    top: var(--tg-price-y, 21%);
    border-top: 1px solid rgba(127, 233, 255, .55);
    transition: top .42s var(--ease), border-color .42s var(--ease);
}
.tg-price-dot {
    position: absolute;
    z-index: 4;
    right: 8px;
    top: var(--tg-price-y, 21%);
    width: 9px; height: 9px;
    margin-top: -4px;
    border-radius: 50%;
    background: var(--ice);
    box-shadow: 0 0 0 5px rgba(127,233,255,.14), 0 0 16px rgba(127,233,255,.7);
    transition: top .42s var(--ease), background .42s var(--ease), box-shadow .42s var(--ease);
}
.tg.is-falling .tg-price-line { border-color: rgba(255, 77, 109, .6); }
.tg.is-falling .tg-price-dot  { background: var(--loss); box-shadow: 0 0 0 5px rgba(255,77,109,.16), 0 0 18px rgba(255,77,109,.75); }

/*
   Candles are placed against the same price axis as the lines, not stood on
   the floor of the chart. The version this came from ramped their heights
   up from left to right, which drew a rising bar chart underneath a falling
   price line — the two halves of the picture disagreeing with each other.
   Each body now spans its own open to its close.
*/
.tg-candles { position: absolute; inset: 0; }

.tg-candle {
    position: absolute;
    left: var(--x);
    top: var(--top);
    height: var(--h);
    width: clamp(7px, 1vw, 13px);
    transform: translateX(-50%) scaleY(.15);
    transform-origin: center;
    border-radius: 2px;
    background: linear-gradient(180deg, #ff6d84, #b32944);
    opacity: 0;
    transition: opacity .26s var(--ease), transform .26s var(--ease);
}
.tg-candle.is-in { opacity: 1; transform: translateX(-50%); }
.tg-candle::before, .tg-candle::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 2px;
    margin-left: -1px;
    background: #ff7d90;
}
.tg-candle::before { height: var(--up);   bottom: 100%; }
.tg-candle::after  { height: var(--down); top: 100%; }
.tg-candle.is-up { background: linear-gradient(180deg, #6bffb0, #158a63); }
.tg-candle.is-up::before, .tg-candle.is-up::after { background: #6bffb0; }

/* ---- Sentinel panel ---- */
.tg-sentinel {
    position: relative;
    /* The top strip is reserved for the alert, which is absolutely placed
       and would otherwise land on top of the sensor when it fires. */
    padding: clamp(62px, 7vh, 76px) 16px 18px;
    border-inline-start: 1px solid rgba(255,255,255,.06);
    text-align: center;
    background: radial-gradient(circle at 50% 30%, rgba(107,255,122,.10), transparent 58%), rgba(0,0,0,.24);
}

.tg-eye {
    width: 74px; height: 74px;
    margin: 0 auto 14px;
    display: grid;
    place-items: center;
    border-radius: 24px;
    border: 1px solid rgba(107,255,122,.45);
    background: linear-gradient(150deg, rgba(107,255,122,.16), rgba(8,20,12,.9));
    box-shadow: 0 0 0 6px rgba(107,255,122,.07), 0 0 30px rgba(107,255,122,.28);
    color: var(--neon);
    transition: all .4s var(--ease);
}
.tg-eye svg { width: 30px; height: 30px; }

.tg.is-breached .tg-eye {
    border-color: rgba(255,77,109,.55);
    background: linear-gradient(150deg, rgba(255,77,109,.2), rgba(28,6,12,.9));
    box-shadow: 0 0 0 6px rgba(255,77,109,.09), 0 0 34px rgba(255,77,109,.4);
    color: var(--loss);
}

.tg-sentinel h3 { font-size: 13.5px; margin-bottom: 5px; }
.tg-sentinel > p { font-size: 11.5px; color: var(--txt-mute); min-height: 2.6em; }

.tg-rows {
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,.06);
    font-size: 10.5px;
    color: var(--txt-faint);
}
.tg-rows > div { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; }
.tg-rows dt { margin: 0; }
.tg-rows dd { margin: 0; color: var(--txt-soft); }

.tg-button {
    display: block;
    margin-top: 14px;
    padding: 11px;
    border-radius: 10px;
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(255,255,255,.08);
    color: var(--txt-mute);
    font-size: 11.5px;
    font-weight: 700;
    transition: all .4s var(--ease);
}
.tg.is-breached .tg-button {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
    box-shadow: 0 10px 26px rgba(255,61,99,.32);
}
.tg.is-done .tg-button {
    background: rgba(107,255,122,.16);
    border-color: rgba(107,255,122,.5);
    color: var(--neon);
    box-shadow: 0 10px 26px rgba(107,255,122,.16);
}

/* The hand comes in from outside the panel and presses the button */
/*
   The photograph points down and to the left with the wrist leaving frame
   on the right, so the hand reaches in from the right and its fingertip
   lands on the button. Physical `right`, not an inline property: the hand
   is a picture of a right hand and mirroring it with the page direction
   would put the thumb on the wrong side.
*/
.tg-hand {
    position: absolute;
    z-index: 7;
    right: -46px;
    bottom: 4px;
    width: min(238px, 96%);
    height: auto;
    opacity: 0;
    transform: translate(64px, 62px) rotate(6deg);
    transform-origin: bottom right;
    filter: drop-shadow(-10px 12px 22px rgba(0,0,0,.7));
    pointer-events: none;
}
.tg-hand.is-tap { animation: tgTap 1.8s cubic-bezier(.22,.75,.25,1) forwards; }

@keyframes tgTap {
    0%        { opacity: 0; transform: translate(64px, 62px) rotate(6deg); }
    32%, 64%  { opacity: 1; transform: translate(0, 0) rotate(0deg); }
    73%       { opacity: 1; transform: translate(-2px, 7px) rotate(-1deg); }
    100%      { opacity: 0; transform: translate(-6px, 16px) rotate(-2deg); }
}

/* Alert */
.tg-alert {
    position: absolute;
    z-index: 8;
    top: 14px;
    left: 14px;
    right: 14px;
    padding: 9px 11px;
    border-radius: 10px;
    border: 1px solid rgba(255,77,109,.3);
    background: rgba(26, 8, 13, .95);
    box-shadow: 0 14px 30px rgba(0,0,0,.55);
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: .04em;
    color: var(--txt-mute);
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.tg-alert b { display: block; margin-top: 3px; font-size: 14px; color: var(--loss); }
.tg.is-breached .tg-alert { opacity: 1; transform: none; }

/* ---- Footer ---- */
.tg-foot {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 16px;
    border-top: 1px solid rgba(255,255,255,.06);
    font-size: 11px;
    color: var(--txt-mute);
}
.tg-led {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--warn);
    box-shadow: 0 0 10px var(--warn);
    flex: 0 0 auto;
    transition: all .4s var(--ease);
}
.tg.is-done .tg-led { background: var(--loss); box-shadow: 0 0 10px var(--loss); }

/* ---- Narrow ---- */
@media (max-width: 780px) {
    .tg-body { grid-template-columns: 1fr; }
    .tg-sentinel { border-inline-start: 0; border-top: 1px solid rgba(255,255,255,.06); }
    .tg-facts { grid-template-columns: repeat(2, 1fr); }
    .tg-facts > div:nth-child(2n) { border-inline-end: 0; }
    .tg-facts > div:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.05); }
    .tg-chart { min-height: 260px; }
    .tg-hand { width: 190px; right: -20px; }
    .tg-caps-label { display: none; }
}

/* ---------------------------------------------------------------------
   Responsive
   Only the stage's two caps change between breakpoints — its widest size,
   and how much vertical room the copy beneath needs. Every radius is a
   fraction of the result, so the orbital arrangement is identical on every
   device and only its scale differs. Narrower screens wrap the headline and
   paragraph onto more lines, so they reserve more.
   --------------------------------------------------------------------- */

/* Laptop */
@media (max-width: 1200px) {
    .orbit-stage { --stage: max(190px, min(600px, 86vw, calc(100svh - var(--copy-reserve)))); }
}

/* Tablet */
@media (max-width: 900px) {
    .nav-links { display: none; }
    .hero-copy { margin-top: 0; }

    .orbit-stage {
        --copy-reserve: 450px;
        --stage: max(190px, min(520px, 82vw, calc(100svh - var(--copy-reserve))));
    }

    .steps::before { left: 22px; }
    .step { grid-template-columns: 46px 1fr; gap: 15px; }
    .step .num { width: 46px; height: 46px; font-size: 14px; border-radius: 15px; }
}

/* Large phone */
@media (max-width: 620px) {
    .hero { padding-top: calc(var(--header-h) + 10px); padding-bottom: 84px; }

    .orbit-stage {
        --copy-reserve: 470px;
        --stage: max(180px, min(78vw, calc(100svh - var(--copy-reserve))));
        /* Slightly larger coins so the marks stay legible when the stage shrinks */
        --coin-size: calc(var(--stage) * 0.115);
    }

    .hero-trust { gap: 18px; }
    .cta-band { padding: 42px 22px; }
    .auth-card { padding: 30px 22px; }
    .auth-back { top: 16px; left: 16px; }

    /* The hand is there to show the tap, not to be the picture. At the
       tablet size it is 190px against a chart that has narrowed to about
       330px — more than half the panel, covering the candles it is meant
       to be pointing at. It scales with the chart from here down. */
    .tg-hand { width: min(150px, 45%); right: -14px; }
}

/* Small phone — the navigation sheds everything but the essentials */
@media (max-width: 520px) {
    .brand-text { display: none; }
    .nav-cta { gap: 8px; }
    .nav-cta .lang-switch b { display: none; }
    .nav-cta .lang-switch { padding: 7px 10px; }
    .nav-cta .btn-sm { padding: 8px 12px; }

    .orbit-stage {
        --copy-reserve: 470px;
        --stage: max(180px, min(84vw, calc(100svh - var(--copy-reserve))));
        --coin-size: calc(var(--stage) * 0.125);
    }

    .scroll-cue { display: none; }
}

/* Short landscape windows: height, not width, is the binding constraint */
@media (max-height: 620px) and (min-width: 620px) {
    .orbit-stage {
        --copy-reserve: 360px;   /* wide window, so the copy wraps short */
        --stage: max(160px, min(420px, 60vw, calc(100svh - var(--copy-reserve))));
    }
    .hero { padding-bottom: 46px; }
    .scroll-cue { display: none; }
}