/* ==========================================================================
   Cyber Falak v3: "Paper & night"
   Content sections sit on a soft light paper with white cards; the night sky
   is kept for the hero, the feature (dark) sections, the lifecycle, banners,
   contact and footer. Motion is calm: no scroll scenes, nothing moves on its
   own except a gentle hover.
   Loaded after space.css and access.css, before mobile.css.
   ========================================================================== */

/* ---------- Calm motion (all themes) ---------- */
/* Kept: twinkling stars and comets, the partner ticker, lifecycle rings. Removed: entrance rises and tab slide-ins. */
.hero-copy > *, .tab-panel:not([hidden]) { animation: none !important; }

/* ---------- Banners: a framed portal card, at every size ---------- */
.finale { background: transparent; }
.finale .finale-stage { min-height: 0; padding: clamp(1.5rem, 3vw, 2.5rem) 16px; overflow: visible; }
.finale .finale-window {
  position: absolute; inset: clamp(1.5rem, 3vw, 2.5rem) max(16px, calc(50% - 600px)); width: auto; aspect-ratio: auto;
  transform: none; border-radius: 32px; left: max(16px, calc(50% - 600px)); top: clamp(1.5rem, 3vw, 2.5rem);
}
.finale .finale-window::before { content: ""; position: absolute; inset: 0; background-image: var(--sp-stars); background-size: 280px 240px; opacity: .55; animation: lux-twinkle 5s ease-in-out infinite alternate; }
.finale .finale-window::after { content: ""; position: absolute; inset: 0; background-image: var(--sp-stars); background-size: 190px 170px; background-position: 60px 40px; opacity: .25; animation: lux-twinkle 7s 1.5s ease-in-out infinite alternate-reverse; }
@keyframes lux-twinkle { from { opacity: .2; } to { opacity: .7; } }
.a11y-still .finale .finale-window::before, .a11y-still .finale .finale-window::after { animation: none; }
@media (prefers-reduced-motion: reduce) { .finale .finale-window::before, .finale .finale-window::after { animation: none; } }
.finale .finale-planet { top: 62%; width: max(210%, 1100px); }
.finale .finale-content { padding: clamp(3.25rem, 7vw, 5.5rem) 1.25rem clamp(3.5rem, 7vw, 6rem); opacity: 1; transform: none; filter: none; }
.finale .finale-title { font-size: clamp(1.5rem, 3.2vw, 2.75rem); line-height: 1.08; letter-spacing: -.035em; margin-bottom: 1.75rem; }
.finale-mini .finale-title { font-size: clamp(1.4rem, 2.8vw, 2.4rem); }

/* ---------- Lifecycle without the pinned scene ---------- */
@media (min-width: 960px) {
  .story:not([data-pinned]) .story-steps { grid-template-columns: 1fr 1fr; }
  .story:not([data-pinned]) .story-art { width: min(100%, 440px); }
}

/* ==========================================================================
   Paper sections (space theme only; contrast and dark modes keep their own)
   ========================================================================== */
html:not(.a11y-contrast):not(.a11y-dark) {
  & :is(.stats, .marquee-band, .section:not(.section-dark):not(.contact), [id="investors"], [id="academy"]) {
    --bg: #f3f4f7;
    --bg-tint: #fff;
    --surface: #fff;
    --text: #0b1230;
    --text-muted: #5a6585;
    --border: rgba(11, 18, 48, .08);
    --blue-700: #2f5bea;
    --blue-600: #2f5bea;
    --blue-100: #e9eefd;
    --green-700: #12865a;
    --green-100: #e2f5ec;
    --link: #2f5bea;
    --lux-card: 0 1px 2px rgba(11, 18, 48, .04), 0 18px 40px -24px rgba(11, 18, 48, .22);
    color-scheme: light;
    position: relative; background: #f3f4f7; color: var(--text);

    & :is(h2, h3, h4, .h2-like, .bento-title, .sector-name, .solution-grid span, .team-stats strong, .team-stats span, .mini-stats strong, .value-grid strong, .quote blockquote p) { color: var(--text); }
    & .eyebrow { color: #2f5bea; }
    & .eyebrow::before { color: #2f5bea; }
    & p, & .ticks { color: var(--text-muted); }

    /* White cards, hairline edge, soft long shadow */
    & :is(.card, .values-grid li, .why-list li, .coverage-grid li, .solution-grid li, .domain-grid > li, .sector-grid li, .team-stats li,
          .mini-stats li, .invest-grid > li, .tier-grid > li, .wave-grid > li, .service, .steps li, .fusion-grid li, .engine, .org-box, .glossary-list div,
          .ai-tiles li, .rule-list > li, .explore-grid a, .fam-card) {
      background: #fff; border: 1px solid rgba(11, 18, 48, .06); box-shadow: var(--lux-card); color: var(--text);
    }
    & :is(.card, .values-grid li, .why-list li, .coverage-grid li, .solution-grid li, .domain-grid > li, .sector-grid li, .service, .steps li, .invest-grid > li, .fusion-grid li, .explore-grid a):hover {
      background: #fff; border-color: rgba(47, 91, 234, .25); box-shadow: 0 1px 2px rgba(11, 18, 48, .05), 0 24px 48px -24px rgba(47, 91, 234, .35);
    }
    & :is(.card, .values-grid, .why-list, .coverage-grid, .domain-grid, .service-grid, .steps, .fusion-grid, .invest-grid, .tier-grid, .wave-grid) :is(p, .ticks) { color: var(--text-muted); }
    & .card h3, & .values-grid h3, & .service h3, & .domain-grid h3 { color: var(--text); }
    & .ticks li::before { background: #2f5bea; }
    & :is(.value-num, .cov-num, .step-num, .family-div, .fusion-kicker, .infra-num, .solution-grid b, .fam-card .family-div, .partner-map h3) { color: #2f5bea; }

    /* Accent tiles: soft blue and deep gradient, like framed pictures */
    & .ai-cards li:nth-child(1), & .vm-grid .card:nth-child(2) { background: linear-gradient(160deg, #c9d8fb, #aec4f2); border-color: transparent; }
    & .ai-cards li:nth-child(4) { background: linear-gradient(150deg, #5f86ef 0%, #2340a8 45%, #0b1230 100%); border-color: transparent; }
    & .ai-cards li:nth-child(4) :is(h3, p, span, li) { color: #eef2ff; }

    /* Small parts */
    & :is(.service-icon, .sector-ic, .badge) { background: #e9eefd; color: #2f5bea; }
    & .sector-ic svg { stroke: #2f5bea; }
    & .domain-grid b { background: #e9eefd; color: #2f5bea; }
    & .partner-chips li, & :is(.chips, .chip-grid) li { background: #f3f4f7; border-color: rgba(11, 18, 48, .06); color: var(--text); }
    & .tab-list { background: #fff; border-color: rgba(11, 18, 48, .06); box-shadow: var(--lux-card); }
    & .tab-list [role="tab"] { color: #5a6585; }
    & .tab-list [role="tab"][aria-selected="true"] { background: #0b1230; color: #fff; }
    & [aria-selected="true"] > .tab-count { background: rgba(255, 255, 255, .16); color: #fff; }
    & .table-wrap { background: #fff; border-color: rgba(11, 18, 48, .06); box-shadow: var(--lux-card); }
    & .data-table :is(th, td) { border-color: rgba(11, 18, 48, .07); color: var(--text); }
    & .data-table thead th { color: #2f5bea; }
    & .bar { background: #e9eefd; }
    & .bar span { background: linear-gradient(90deg, #2f5bea, #7fa2ff); }
    & .carousel-btn { background: #fff; border-color: rgba(11, 18, 48, .1); color: var(--text); }
    & .carousel-btn:hover:not(:disabled) { background: #e9eefd; }
    & .more-btn { background: #fff; border-color: rgba(11, 18, 48, .12); color: var(--text); box-shadow: var(--lux-card); }
    & .more-btn:hover { background: #f8f9fc; border-color: rgba(47, 91, 234, .35); }
    & :is(.listen, .listen-dark) { background: #fff; border-color: rgba(11, 18, 48, .1); color: #2f5bea; }
    & .listen:hover { color: #0b1230; border-color: #2f5bea; }
    & .glossary-search input { background: #fff; border-color: rgba(11, 18, 48, .12); color: var(--text); }
    & .glossary-list mark { background: #d7f2e5; color: var(--text); }
    & .gloss-popular button { background: #fff; color: var(--text); }
    & .dom-toggle, & .card-preview li { color: var(--text); }
    & .marquee-track li { color: #8a93ad; }
    & .marquee-title { color: var(--text-muted); }
    & a:not(.btn):not(.explore-grid a):not(.more-btn) { color: #2f5bea; }
    & .ex-kicker, & .ex-go { color: #2f5bea; }
    & .tab-panel, & .domain-grid { color: var(--text); }

    /* Services carousel: dark "pictures" on white frames */
    & .fam-card .fam-body p { color: var(--text-muted); }

    /* Numbers: the bento from the screenshot. White intro, soft blue tile, deep gradient tile, white strip */
    & .stats-grid li, & .stats-grid li:nth-child(odd) { background: #fff; border: 1px solid rgba(11, 18, 48, .05); box-shadow: var(--lux-card); }
    & .stats-grid strong { color: #0b1230; }
    & .stats-grid span { color: #5a6585; }
    & .stats-grid li:nth-child(2) { background: linear-gradient(160deg, #c9d8fb, #aec4f2); border-color: transparent; }
    & .stats-grid li:nth-child(2) span { color: #1c2a55; }
    & .stats-grid li:nth-child(4) { background: radial-gradient(120% 90% at 85% 40%, #05070f 0%, #0b1230 30%, transparent 62%), linear-gradient(150deg, #7a9cf3 0%, #3a62dd 40%, #142a7a 100%); border-color: transparent; }
    & .stats-grid li:nth-child(4) :is(strong, span) { color: #fff; }
    & .stats-note { color: #8a93ad; }
  }

  /* Paper sheets: rounded where they meet the night */
  & :is(.hero, .section-dark, .story, .finale, .contact) + :is(.stats, .marquee-band, .section:not(.section-dark):not(.contact), [id="investors"], [id="academy"]) {
    border-radius: 36px 36px 0 0; margin-top: -36px; z-index: 1;
  }
  & :is(.stats, .marquee-band, .section:not(.section-dark):not(.contact), [id="investors"], [id="academy"]):has(+ :is(.section-dark, .story, .finale, .contact)),
  & main > :is(.stats, .marquee-band, .section:not(.section-dark):not(.contact), [id="investors"], [id="academy"]):last-child {
    border-radius: 0 0 36px 36px;
  }
  & :is(.hero, .section-dark, .story, .finale, .contact) + :is(.stats, .marquee-band, .section:not(.section-dark):not(.contact), [id="investors"], [id="academy"]):has(+ :is(.section-dark, .story, .finale, .contact)) {
    border-radius: 36px;
  }
  & .hero { padding-bottom: calc(6rem + 36px); }
  & .hero.page-hero { padding-bottom: calc(4.5rem + 36px); }
  & .finale { background: transparent; }

  /* Feature sections: no opening clip, they simply sit in the night */
  & :is(.section-dark, .contact), & .story-stage, & .finale-stage { clip-path: none; }
}

/* Banner cards keep their full frame: the paper sheet after them does not tuck underneath */
html:not(.a11y-contrast):not(.a11y-dark) .finale + :is(.stats, .marquee-band, .section:not(.section-dark):not(.contact), [id="investors"], [id="academy"]) { margin-top: 0; }

/* Investors and Academy were one long night section; they now read on paper too */
html:not(.a11y-contrast):not(.a11y-dark) :is([id="investors"], [id="academy"]) {
  clip-path: none;
  &::before, &::after { display: none; }
  & .eyebrow { color: #2f5bea; }
}
html:not(.a11y-contrast):not(.a11y-dark) :is([id="investors"], [id="academy"]) {
  & :is(.bar-label, .bar-num, strong, b, dt, th) { color: var(--text); }
  & :is(.fusion-kicker, .value-num) { color: #12865a !important; }
  & :is(li, dd, td, span:not(.tab-count)) { color: inherit; }
}

/* Smaller banner text */
html:not(.a11y-contrast):not(.a11y-dark) {
  & .hero-simple h1 { font-size: clamp(2.25rem, 4vw, 3.5rem); }
  & .hero .lead { font-size: clamp(.9375rem, 1.2vw, 1.0625rem); }
  & .page-hero h1 { font-size: clamp(2rem, 4vw, 3.25rem); }
}
html:not(.a11y-contrast):not(.a11y-dark) {
  & main .finale .finale-title { font-size: clamp(1.5rem, 3.2vw, 2.75rem); line-height: 1.12; }
  & main .finale-mini .finale-title { font-size: clamp(1.4rem, 2.8vw, 2.4rem); }
}

/* ==========================================================================
   Home banner: the globe inside its shield (drawn by js/shield.js)
   ========================================================================== */
.shield-scene { display: none; }
.hero:not(.page-hero) .shield-scene {
  display: block; position: absolute; z-index: 0; aspect-ratio: 1; pointer-events: none;
  right: max(-3%, calc(50% - 760px)); top: 50%; width: min(760px, 54vw); transform: translateY(-47%);
}
.shield-scene canvas { display: block; width: 100%; height: 100%; }
.shield-chip {
  position: absolute; left: 50%; bottom: 13%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: .5rem;
  padding: .45rem .9rem; border-radius: 999px; white-space: nowrap; font: 600 .8125rem/1 var(--sp-font, inherit); letter-spacing: .02em;
  color: #dfe8ff; background: rgba(5, 11, 38, .7); border: 1px solid rgba(60, 207, 142, .45); backdrop-filter: blur(8px);
}
.shield-chip i { width: 8px; height: 8px; border-radius: 50%; background: #3ccf8e; box-shadow: 0 0 0 0 rgba(60, 207, 142, .6); animation: shield-ping 2s ease-out infinite; }
@keyframes shield-ping { 70% { box-shadow: 0 0 0 8px rgba(60, 207, 142, 0); } 100% { box-shadow: 0 0 0 0 rgba(60, 207, 142, 0); } }
.a11y-still .shield-chip i { animation: none; }
@media (prefers-reduced-motion: reduce) { .shield-chip i { animation: none; } }
.a11y-contrast .shield-scene, .a11y-noimages .shield-scene { display: none !important; }
.hero:not(.page-hero) .hero-copy { position: relative; z-index: 1; }
@media (min-width: 720px) and (max-width: 1079px) {
  .hero:not(.page-hero) .shield-scene { width: 520px; right: -120px; opacity: .55; }
  .hero:not(.page-hero) .shield-chip { display: none; }
}