/* ================================================================
   M2 IST — About / "قصتنا" · Story Chapters design system (ist-story-*)
   Distinct narrative layout. Alternating dark/light chapters.
   Brand colors only. Rich but scroll-safe motion (transform/opacity).
   ================================================================ */

.ist-story {
    --s-cyan: #55C8E8;
    --s-cyan-deep: #0891b2;
    --s-ink: #05141F;
    --s-ink-2: #0a1628;
    --s-violet: #7c3aed;
    --s-paper: #ffffff;
    --s-paper-2: #f3f8fb;
    --s-text-dark: #2b3648;
    --s-text-muted: #6b7689;
    --s-line-light: rgba(5, 20, 31, .1);
    --s-line-dark: rgba(255, 255, 255, .14);
    --s-num: 'Orbitron', sans-serif;
    --s-font: 'Cairo', system-ui, sans-serif;
    --s-pad: clamp(64px, 8vw, 130px);
    background: var(--s-paper);
}

.ist-story .ist-wrap { width: min(1120px, 90vw); margin-inline: auto; }
.ist-story .ist-wrap--narrow { width: min(880px, 90vw); }

/* ---------- reveal (safe: visible by default) ---------- */
.ist-reveal { opacity: 1; transform: none; }
html.ist-anim .ist-reveal {
    opacity: 0;
    transform: translateY(34px);
    transition: opacity .8s cubic-bezier(.2, .75, .25, 1), transform .8s cubic-bezier(.2, .75, .25, 1);
    will-change: opacity, transform;
}
html.ist-anim .ist-reveal.is-in { opacity: 1; transform: none; }
html.ist-anim .ist-reveal[data-x="r"] { transform: translateX(46px); }
html.ist-anim .ist-reveal[data-x="l"] { transform: translateX(-46px); }
html.ist-anim .ist-reveal[data-x="r"].is-in,
html.ist-anim .ist-reveal[data-x="l"].is-in { transform: none; }
html.ist-anim .ist-reveal[data-d="1"] { transition-delay: .1s; }
html.ist-anim .ist-reveal[data-d="2"] { transition-delay: .2s; }
html.ist-anim .ist-reveal[data-d="3"] { transition-delay: .3s; }
html.ist-anim .ist-reveal[data-d="4"] { transition-delay: .4s; }

/* ---------- shared typography ---------- */
.ist-kicker {
    display: inline-flex; align-items: center; gap: 9px;
    font-family: var(--s-num); font-size: 12px; font-weight: 600;
    letter-spacing: .22em; text-transform: uppercase; color: var(--s-cyan-deep);
}
.ist-kicker::before { content: ""; width: 26px; height: 2px; background: currentColor; border-radius: 2px; }
.ist-chap--dark .ist-kicker { color: var(--s-cyan); }

.ist-h2 {
    font-family: var(--s-font); font-weight: 800;
    font-size: clamp(1.7rem, 3.4vw, 2.7rem); line-height: 1.22;
    letter-spacing: -.01em; color: var(--s-ink); margin: 14px 0 0; text-wrap: balance;
}
.ist-h2 .hl { color: var(--s-cyan-deep); }
.ist-chap--dark .ist-h2 { color: #fff; }
.ist-chap--dark .ist-h2 .hl { color: var(--s-cyan); }
.ist-lead {
    font-size: clamp(1rem, 1.3vw, 1.12rem); line-height: 1.9;
    color: var(--s-text-dark); margin: 16px 0 0; max-width: 60ch;
}
.ist-chap--dark .ist-lead { color: rgba(255, 255, 255, .72); }

/* ---------- chapter shell ---------- */
.ist-chap { position: relative; padding: var(--s-pad) 0; overflow: hidden; }
.ist-chap--light { background: var(--s-paper); }
.ist-chap--light.ist-chap--alt { background: var(--s-paper-2); }
.ist-chap--dark { background: var(--s-ink); color: #fff; }
.ist-chap--dark::before {
    content: ""; position: absolute; pointer-events: none; z-index: 0;
    inset: 0;
    background:
        radial-gradient(ellipse 50% 50% at 85% 12%, rgba(85, 200, 232, .14), transparent 60%),
        radial-gradient(ellipse 45% 55% at 10% 90%, rgba(124, 58, 237, .16), transparent 62%);
}
.ist-chap > .ist-wrap { position: relative; z-index: 1; }

/* big faint chapter numeral */
.ist-chap__no {
    position: absolute; top: clamp(18px, 3vw, 40px); inset-inline-start: clamp(10px, 4vw, 60px);
    font-family: var(--s-num); font-weight: 700; font-size: clamp(80px, 16vw, 220px);
    line-height: .8; letter-spacing: -.04em; z-index: 0; pointer-events: none;
    color: transparent; -webkit-text-stroke: 1.5px rgba(5, 20, 31, .06);
}
.ist-chap--dark .ist-chap__no { -webkit-text-stroke: 1.5px rgba(255, 255, 255, .07); }

.ist-chap__head { max-width: 64ch; margin-bottom: clamp(30px, 4vw, 56px); }
.ist-chap__tag {
    display: inline-block; font-family: var(--s-num); font-size: 13px; font-weight: 700;
    letter-spacing: .2em; color: var(--s-cyan); margin-bottom: 6px;
}

/* =====================================================
   1) HERO — cinematic opening (distinct from homepage)
   ===================================================== */
.ist-hero {
    position: relative; overflow: hidden;
    padding: clamp(150px, 18vh, 230px) 0 clamp(80px, 12vh, 140px);
    background:
        radial-gradient(ellipse 60% 55% at 78% 16%, rgba(85, 200, 232, .2) 0%, transparent 58%),
        radial-gradient(ellipse 55% 55% at 14% 84%, rgba(124, 58, 237, .24) 0%, transparent 60%),
        linear-gradient(165deg, #0a0626 0%, #0b0a2e 38%, #071226 78%, #05101f 100%);
    color: #fff;
}
.ist-hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.ist-hero__stars {
    position: absolute; inset: -60px;
    background-image:
        radial-gradient(1.5px 1.5px at 12% 18%, rgba(255,255,255,.85), transparent),
        radial-gradient(1.5px 1.5px at 28% 62%, rgba(200,240,255,.7), transparent),
        radial-gradient(1px 1px at 47% 30%, rgba(255,255,255,.6), transparent),
        radial-gradient(1.5px 1.5px at 66% 72%, rgba(255,255,255,.7), transparent),
        radial-gradient(1px 1px at 80% 22%, rgba(200,240,255,.7), transparent),
        radial-gradient(1.5px 1.5px at 92% 56%, rgba(255,255,255,.6), transparent),
        radial-gradient(1px 1px at 38% 84%, rgba(255,255,255,.55), transparent),
        radial-gradient(1px 1px at 58% 12%, rgba(255,255,255,.6), transparent);
    animation: istTwinkle 6s ease-in-out infinite alternate;
}
@keyframes istTwinkle { 0% { opacity: 1; } 100% { opacity: .5; } }
.ist-hero__aurora {
    position: absolute; inset: -30% -15%;
    background: conic-gradient(from 210deg at 50% 45%, transparent 0deg, rgba(85,200,232,.12) 70deg, rgba(124,58,237,.18) 150deg, rgba(85,200,232,.1) 240deg, transparent 320deg);
    filter: blur(26px); mix-blend-mode: screen; opacity: .8;
    animation: istAuroraSpin 40s linear infinite;
}
@keyframes istAuroraSpin { to { transform: rotate(360deg); } }
.ist-hero__planet {
    position: absolute; top: 50%; inset-inline-end: -160px; transform: translateY(-50%);
    width: 460px; height: 460px; border-radius: 50%; z-index: 0; opacity: .8;
    background:
        radial-gradient(circle at 32% 30%, rgba(85,200,232,.5), transparent 55%),
        radial-gradient(circle at 70% 75%, rgba(124,58,237,.45), transparent 58%),
        radial-gradient(circle at 50% 50%, #0c1f33, #060d18 70%);
    box-shadow: 0 0 120px rgba(85,200,232,.25), inset -30px -20px 80px rgba(0,0,0,.6);
    animation: istFloat 9s ease-in-out infinite;
}
.ist-hero__planet::after {
    content: ""; position: absolute; inset: -16% -8%;
    border-radius: 50%; border: 1px solid rgba(85,200,232,.25);
    transform: rotate(-18deg) scaleY(.32);
}
@keyframes istFloat { 0%, 100% { transform: translateY(-50%); } 50% { transform: translateY(calc(-50% - 18px)); } }
@media (max-width: 991px) { .ist-hero__planet { width: 300px; height: 300px; inset-inline-end: -130px; opacity: .5; } }

.ist-hero .ist-wrap { position: relative; z-index: 2; }
.ist-hero__eyebrow {
    display: inline-flex; align-items: center; gap: 9px;
    font-family: var(--s-num); font-size: 12.5px; font-weight: 600; letter-spacing: .26em;
    text-transform: uppercase; color: var(--s-cyan);
    background: rgba(85,200,232,.1); border: 1px solid rgba(85,200,232,.3);
    padding: 8px 16px; border-radius: 999px; margin-bottom: 24px;
}
.ist-hero__eyebrow .ist-hero__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--s-cyan); box-shadow: 0 0 10px var(--s-cyan); }
.ist-hero__title {
    font-family: var(--s-font); font-weight: 800;
    font-size: clamp(2.1rem, 5.6vw, 4rem); line-height: 1.12; letter-spacing: -.02em;
    margin: 0; max-width: 17ch; color: #fff; text-wrap: balance;
}
.ist-hero__title .grad {
    background: linear-gradient(100deg, var(--s-cyan), #9b8cff);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.ist-hero__sub {
    margin: clamp(20px, 3vw, 30px) 0 0; max-width: 56ch;
    font-size: clamp(1rem, 1.5vw, 1.18rem); line-height: 1.9; color: rgba(255,255,255,.75);
}
.ist-hero__sub strong { color: #fff; font-weight: 800; }
.ist-hero__meta {
    margin-top: clamp(30px, 4vw, 46px); display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center;
    font-family: var(--s-num); font-size: 12.5px; letter-spacing: .14em; color: rgba(255,255,255,.55);
}
.ist-hero__meta span { display: inline-flex; align-items: center; gap: 9px; }
.ist-hero__meta span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--s-cyan); }
.ist-hero__slogan {
    display: inline-block; margin-top: clamp(16px, 2.5vw, 24px);
    font-family: var(--s-num); font-size: clamp(.78rem, 1vw, .92rem); font-weight: 600;
    letter-spacing: .08em; color: var(--s-cyan); line-height: 1.8;
}
.ist-hero__scroll {
    margin-top: clamp(40px, 6vw, 72px); display: inline-flex; align-items: center; gap: 12px;
    color: rgba(255,255,255,.6); font-size: 13px; font-weight: 600;
}
.ist-hero__mouse {
    width: 22px; height: 36px; border: 2px solid rgba(255,255,255,.4); border-radius: 12px; position: relative;
}
.ist-hero__mouse::before {
    content: ""; position: absolute; top: 7px; left: 50%; width: 3px; height: 7px; border-radius: 3px;
    background: var(--s-cyan); transform: translateX(-50%); animation: istWheel 1.6s ease-in-out infinite;
}
@keyframes istWheel { 0% { opacity: 0; transform: translate(-50%, -4px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, 9px); } }

/* =====================================================
   CH 01 — Who we are (2-col layout)
   ===================================================== */
.ist-who__layout {
    display: grid;
    grid-template-columns: 1fr clamp(280px, 30%, 360px);
    gap: clamp(28px, 5vw, 60px);
    align-items: start;
}
@media (max-width: 860px) { .ist-who__layout { grid-template-columns: 1fr; } }

.ist-who__content .ist-chap__head { margin-bottom: clamp(20px, 3vw, 30px); }
.ist-who__manifesto {
    font-family: var(--s-font); font-weight: 800;
    font-size: clamp(1.25rem, 2.2vw, 1.75rem); line-height: 1.6; letter-spacing: -.01em;
    color: #fff; margin: 0 0 20px; border-inline-start: 3px solid var(--s-cyan); padding-inline-start: 16px;
}
/* strike works anywhere inside a dark chapter */
.ist-chap--dark .strike {
    text-decoration: line-through;
    text-decoration-color: rgba(85,200,232,.7);
    text-decoration-thickness: 2px;
}
/* in the h2: keep cyan color + strikethrough */
.ist-h2 .strike { color: var(--s-cyan); }
.ist-chap--dark .ist-h2 .strike { color: var(--s-cyan); }
/* in the manifesto prose: dim + strikethrough */
.ist-who__manifesto .strike { color: rgba(255,255,255,.35); }
.ist-who__manifesto .hl { color: var(--s-cyan); }
.ist-who__content p { color: rgba(255,255,255,.74); line-height: 1.95; font-size: 1rem; margin: 0 0 14px; }
.ist-who__content p strong { color: #fff; font-weight: 800; }

.ist-who__card {
    background: rgba(255,255,255,.04); border: 1px solid var(--s-line-dark); border-radius: 18px;
    padding: clamp(22px, 3vw, 30px); backdrop-filter: blur(6px); position: sticky; top: 100px;
}
.ist-who__card-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ist-who__card-logo img { width: 44px; height: 44px; }
.ist-who__card-logo span { font-family: var(--s-num); font-weight: 700; letter-spacing: .08em; color: #fff; font-size: 1rem; display: flex; flex-direction: column; gap: 2px; }
.ist-who__facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ist-who__facts li { display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,.8); font-size: .95rem; }
.ist-who__facts i { color: var(--s-cyan); width: 20px; text-align: center; flex-shrink: 0; }
.ist-who__slogan {
    display: block; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--s-line-dark);
    font-family: var(--s-num); font-size: .82rem; font-weight: 600;
    letter-spacing: .06em; color: var(--s-cyan); line-height: 1.8;
}
.ist-who__card-sub { display: block; font-size: .75rem; font-weight: 500; color: rgba(255,255,255,.5); margin-top: 2px; letter-spacing: .04em; }

/* inline brand name — same style as homepage hero oneliner */
.ist-brand-title {
    font-family: var(--s-font);
    font-weight: 800;
    font-size: clamp(1.1rem, 2vw, 1.7rem);
    letter-spacing: -.02em;
    line-height: 1.2;
    white-space: nowrap;
    vertical-align: middle;
    background: linear-gradient(110deg, var(--s-cyan) 0%, #a78bfa 60%, var(--s-cyan) 100%);
    background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: istBrandShift 6s linear infinite;
}
@keyframes istBrandShift { to { background-position: 200% center; } }

/* =====================================================
   CH 02 — Timeline (light) — RTL-safe
   Line is always on the inline-start (right in RTL) side.
   Dots are positioned from the container's start edge.
   ===================================================== */
.ist-time {
    position: relative;
    margin-top: 8px;
    /* no padding here — padding goes on each item so dots stay on container edge */
}
.ist-time::before {
    content: ""; position: absolute; top: 8px; bottom: 0;
    /* line: 7px from inline-start = right edge in RTL, center at 8px */
    inset-inline-start: 7px; width: 2px;
    background: linear-gradient(var(--s-cyan-deep), rgba(8,145,178,.1));
}
.ist-time__item {
    position: relative;
    /* padding-inline-start pushes text away from the dot; dot stays on container edge */
    padding-inline-start: clamp(36px, 5vw, 52px);
    padding-bottom: clamp(28px, 4vw, 44px);
}
.ist-time__item:last-child { padding-bottom: 0; }
/* dot: right edge at container's inline-start → center is 8px in → aligns with line */
.ist-time__item::before {
    content: ""; position: absolute;
    inset-inline-start: 0; top: 4px;
    width: 16px; height: 16px; border-radius: 50%;
    background: #fff; border: 3px solid var(--s-cyan-deep);
    box-shadow: 0 0 0 6px rgba(8,145,178,.1);
}
.ist-time__item::after {
    content: ""; position: absolute;
    inset-inline-start: 0; top: 4px;
    width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid var(--s-cyan); animation: istPing 2.6s ease-out infinite;
}
.ist-time__item:nth-child(2)::after { animation-delay: .6s; }
.ist-time__item:nth-child(3)::after { animation-delay: 1.2s; }
.ist-time__item:nth-child(4)::after { animation-delay: 1.8s; }
@keyframes istPing { 0% { opacity: .8; transform: scale(1); } 80%, 100% { opacity: 0; transform: scale(2.2); } }
.ist-time__year { font-family: var(--s-num); font-weight: 700; font-size: clamp(1.3rem, 2.2vw, 1.75rem); color: var(--s-cyan-deep); letter-spacing: -.02em; }
.ist-time__item h3 { font-size: clamp(1.05rem, 1.6vw, 1.25rem); font-weight: 800; color: var(--s-ink); margin: 6px 0 8px; }
.ist-time__item p { color: var(--s-text-dark); line-height: 1.85; font-size: 1rem; margin: 0; max-width: 60ch; }

/* =====================================================
   CH 03 — How we think (dark, principles)
   ===================================================== */
.ist-think__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(14px, 1.6vw, 20px); }
@media (max-width: 720px) { .ist-think__grid { grid-template-columns: 1fr; } }
.ist-think__card {
    position: relative; background: rgba(255,255,255,.04); border: 1px solid var(--s-line-dark);
    border-radius: 18px; padding: clamp(24px, 3vw, 34px); overflow: hidden;
    transition: transform .3s ease, border-color .3s ease, background .3s ease;
}
.ist-think__card:hover { transform: translateY(-6px); border-color: rgba(85,200,232,.5); background: rgba(85,200,232,.06); }
.ist-think__no { font-family: var(--s-num); font-weight: 700; font-size: 14px; letter-spacing: .14em; color: var(--s-cyan); }
.ist-think__card h3 { font-size: clamp(1.1rem, 1.6vw, 1.35rem); font-weight: 800; color: #fff; margin: 14px 0 10px; }
.ist-think__card p { color: rgba(255,255,255,.72); line-height: 1.85; font-size: 1rem; margin: 0; }
.ist-think__card i {
    position: absolute; inset-inline-end: 22px; top: 26px; font-size: 1.5rem; color: rgba(85,200,232,.5);
}

/* =====================================================
   CH 04 — What we do (light, ecosystem)
   ===================================================== */
.ist-do__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.5vw, 18px); }
@media (max-width: 860px) { .ist-do__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .ist-do__grid { grid-template-columns: 1fr; } }
.ist-do__item {
    display: flex; align-items: center; gap: 15px; text-decoration: none;
    background: #fff; border: 1px solid var(--s-line-light); border-radius: 15px; padding: clamp(15px, 1.8vw, 20px);
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.ist-do__item:hover { transform: translateY(-5px); border-color: rgba(8,145,178,.4); box-shadow: 0 20px 44px -24px rgba(8,145,178,.5); }
.ist-do__ico { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 14px; background: var(--s-paper-2); display: grid; place-items: center; transition: background .28s ease; }
.ist-do__item:hover .ist-do__ico { background: rgba(85,200,232,.14); }
.ist-do__ico img { width: 58%; height: 58%; object-fit: contain; }
.ist-do__ico--fa { color: var(--s-cyan-deep); font-size: 1.35rem; }
.ist-do__name { display: block; font-weight: 800; font-size: 1rem; color: var(--s-ink); }
.ist-do__cat { display: block; margin-top: 2px; font-size: 12.5px; color: var(--s-text-muted); }
.ist-do__foot { margin-top: clamp(28px, 4vw, 42px); text-align: center; }

/* =====================================================
   CH 05 — How we help (dark, process)
   ===================================================== */
.ist-help__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.6vw, 20px); counter-reset: step; }
@media (max-width: 900px) { .ist-help__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .ist-help__grid { grid-template-columns: 1fr; } }
.ist-help__step {
    position: relative; background: rgba(255,255,255,.04); border: 1px solid var(--s-line-dark);
    border-radius: 18px; padding: clamp(24px, 2.6vw, 32px);
}
.ist-help__step-no {
    font-family: var(--s-num); font-weight: 700; font-size: 13px; letter-spacing: .14em; color: var(--s-cyan);
    display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px;
}
.ist-help__step-ico {
    width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 16px;
    background: linear-gradient(135deg, rgba(85,200,232,.2), rgba(124,58,237,.2));
    color: var(--s-cyan); font-size: 1.3rem;
}
.ist-help__step h3 { font-size: 1.08rem; font-weight: 800; color: #fff; margin: 0 0 9px; }
.ist-help__step p { color: rgba(255,255,255,.7); line-height: 1.8; font-size: .96rem; margin: 0; }

/* =====================================================
   Stats band
   ===================================================== */
.ist-stats { background: linear-gradient(135deg, var(--s-cyan-deep), #064e63); color: #fff; padding: clamp(48px, 6vw, 80px) 0; position: relative; overflow: hidden; }
.ist-stats::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 50% 60% at 80% 20%, rgba(255,255,255,.12), transparent 60%); pointer-events: none; }
.ist-stats__grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
@media (max-width: 720px) { .ist-stats__grid { grid-template-columns: repeat(2, 1fr); gap: 32px 16px; } }
.ist-stat__num { font-family: var(--s-num); font-weight: 700; font-size: clamp(2rem, 4vw, 3rem); line-height: 1; letter-spacing: -.02em; }
.ist-stat__num i { font-style: normal; color: rgba(255,255,255,.7); font-size: .6em; }
.ist-stat__label { margin-top: 10px; font-size: .95rem; font-weight: 600; color: rgba(255,255,255,.85); }

/* =====================================================
   Voices (light)
   ===================================================== */
.ist-voices__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.8vw, 22px); }
@media (max-width: 860px) { .ist-voices__grid { grid-template-columns: 1fr; } }
.ist-voice {
    background: #fff; border: 1px solid var(--s-line-light); border-radius: 18px; padding: clamp(22px, 2.4vw, 30px);
    display: flex; flex-direction: column; transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.ist-voice:hover { transform: translateY(-5px); border-color: rgba(8,145,178,.35); box-shadow: 0 22px 48px -28px rgba(5,20,31,.45); }
.ist-voice__stars { color: #f5b417; font-size: 13px; margin-bottom: 14px; }
.ist-voice__quote { color: var(--s-text-dark); line-height: 1.9; font-size: 1rem; margin: 0 0 20px; flex: 1; font-weight: 500; }
.ist-voice__by { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--s-line-light); }
.ist-voice__av { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 15px; flex: 0 0 auto; }
.ist-voice__name { font-weight: 800; font-size: 15px; color: var(--s-ink); }
.ist-voice__role { font-size: 12.5px; color: var(--s-text-muted); margin-top: 2px; }

/* =====================================================
   Closing CTA
   ===================================================== */
.ist-cta { text-align: center; padding: var(--s-pad) 0; position: relative; overflow: hidden; }
.ist-cta .ist-wrap { position: relative; z-index: 1; }
.ist-cta__title { font-family: var(--s-font); font-weight: 800; font-size: clamp(1.8rem, 3.6vw, 2.9rem); line-height: 1.16; letter-spacing: -.02em; margin: 16px auto 0; max-width: 20ch; }
.ist-cta__sub { font-size: clamp(1rem, 1.4vw, 1.12rem); line-height: 1.85; max-width: 56ch; margin: 18px auto 0; }
.ist-cta__btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 30px; }
.ist-cta--light {
    background: var(--s-paper);
    color: var(--s-ink);
}
.ist-cta--light::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse 55% 60% at 50% 0%, rgba(85,200,232,.1), transparent 62%);
}
.ist-cta--light .ist-kicker { color: var(--s-cyan-deep); }
.ist-cta--light .ist-cta__title { color: var(--s-ink); }
.ist-cta--light .ist-cta__title .hl { color: var(--s-cyan-deep); }
.ist-cta--light .ist-cta__sub { color: var(--s-text-dark); }

/* =====================================================
   Motion off
   ===================================================== */
@media (prefers-reduced-motion: reduce) {
    .ist-hero__stars, .ist-hero__aurora, .ist-hero__planet, .ist-hero__mouse::before,
    .ist-time__item::after { animation: none; }
    html.ist-anim .ist-reveal { opacity: 1; transform: none; transition: none; }
}