/* ============================================================
   SAKSHYA112 — standalone site. 16b identity: warm ink + paper,
   brass gold, tricolour as a disciplined accent thread (the rule,
   the language chips, the feature keylines — never wallpaper).
   Display: Archivo 900. Editorial voice: Instrument Serif.
   Labels: Space Grotesk. Body: system sans.
   ============================================================ */

:root {
  --ink: #161310;
  --ink-2: #1c1814;
  --panel: #211d18;
  --paper: #f6f2ea;
  --paper-2: #ece5d8;
  --line: rgba(243, 242, 242, .10);
  --line-2: rgba(217, 162, 83, .30);
  --line-ink: rgba(32, 31, 29, .14);
  --brass: #d9a253;
  --brass-deep: #b68235;
  --saffron: #e98a2b;
  --green: #157a43;
  --chakra: #152a5e;
  --alert: #e23b3b;
  --text: #f3f2f2;
  --dim: #a59d90;
  --ink-text: #201f1d;
  --ink-dim: #6d675d;
  --r-lg: 20px;
  --r-md: 14px;
  --display: 'Archivo', -apple-system, sans-serif;
  --serif: 'Instrument Serif', Georgia, serif;
  --label: 'Space Grotesk', monospace;
  /* legacy aliases (demo internals) */
  --navy: var(--ink);
  --navy-2: var(--ink-2);
  --teal: var(--brass);
  --teal-deep: var(--brass-deep);
}

* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--ink);
  color: var(--text);
  font: 16px/1.65 -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
a { color: var(--brass); text-decoration: none; }
[hidden] { display: none !important; }
::selection { background: var(--brass); color: #241a06; }

/* ---------- the tricolour thread (appears exactly three times) ---------- */
.tri-rule {
  display: block; width: 64px; height: 3px; border-radius: 2px; margin: 18px 0;
  background: linear-gradient(90deg, var(--saffron) 0 33%, #f3f2f2 33% 67%, var(--green) 67%);
}
.hero .tri-rule, .final .tri-rule { margin-left: auto; margin-right: auto; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--display); font-weight: 700; font-size: 15.5px;
  padding: 15px 30px; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; transition: transform .15s ease, filter .15s ease, border-color .15s ease, color .15s ease;
  white-space: nowrap;
}
.btn:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.btn-brass { background: var(--brass); color: #241a06; box-shadow: 0 8px 26px rgba(217, 162, 83, .25); }
.btn-brass:hover { transform: translateY(-1px); filter: brightness(1.07); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--brass); color: var(--brass); }
.btn-sm { padding: 10px 20px; font-size: 14px; }
.paper .btn-ghost { color: var(--ink-text); border-color: var(--line-ink); }
.paper .btn-ghost:hover { border-color: var(--brass-deep); color: var(--brass-deep); }

/* ---------- nav ---------- */
nav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(246, 242, 234, .9); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line-ink);
}
.nav-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink-text);
         font-family: var(--display); font-weight: 900; font-size: 19px; }
.brand b { color: var(--brass-deep); font-weight: 900; }
.nav-links { display: flex; gap: 28px; margin-left: auto; margin-right: 6px; }
.nav-links a { color: var(--ink-dim); font-size: 14.5px; font-weight: 600; transition: color .15s ease; }
.nav-links a:hover { color: var(--ink-text); }
@media (max-width: 760px) { .nav-links { display: none; } }

/* ---------- hero ---------- */
.hero { position: relative; text-align: center; padding: 72px 0 96px; overflow: hidden; }
.hero .halo {
  position: absolute; left: 50%; top: -220px; width: 1000px; height: 620px;
  transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(217, 162, 83, .15), transparent);
}
.eyebrow {
  font-family: var(--label); font-weight: 700; font-size: 12px; letter-spacing: .3em;
  color: var(--brass); text-transform: uppercase;
}
.eyebrow.saffron { color: var(--saffron); }
.eyebrow.green-e { color: var(--green); }
.eyebrow.brass-e { color: var(--brass); }
.paper .eyebrow.saffron { color: #c76d14; }
.hero h1 {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(44px, 8.4vw, 104px); line-height: .98; letter-spacing: -.02em;
  margin: 26px auto 0; max-width: 1000px;
}
.hero .sub { color: var(--dim); font-size: clamp(16px, 2.1vw, 20px); max-width: 640px; margin: 26px auto 0; }
.cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 36px; }
.trust-row {
  display: flex; gap: 10px 30px; justify-content: center; flex-wrap: wrap;
  margin-top: 34px; color: var(--dim); font-size: 13.5px;
}
.trust-row span::before { content: "✓ "; color: var(--brass); font-weight: 700; }
.hero.light { background: var(--paper); }
.hero.light h1 { color: var(--ink-text); }
.hero.light .sub { color: var(--ink-dim); }
.hero.light .eyebrow { color: var(--brass-deep); }
.hero.light .halo { background: radial-gradient(closest-side, rgba(182, 130, 53, .13), transparent); }
.hero.light .trust-row { color: var(--ink-dim); }
.hero.light .trust-row span::before { color: var(--brass-deep); }
.hero.light .btn-ghost { color: var(--ink-text); border-color: var(--line-ink); }
.hero.light .btn-ghost:hover { border-color: var(--brass-deep); color: var(--brass-deep); }
.hero-mark { display: flex; justify-content: center; margin: 8px auto 2px; }
.hero-mark img { display: block; filter: drop-shadow(0 16px 44px rgba(32, 31, 29, .14)); }
@media (max-width: 560px) { .hero-mark img { width: 156px; height: 156px; } .hero { padding: 48px 0 72px; } }

/* ---------- section chassis ---------- */
section { padding: 104px 0; }
@media (max-width: 640px) { section { padding: 72px 0; } }

.paper { background: var(--paper); color: var(--ink-text); }
.act-app { border-top: 1px solid var(--line-ink); background: #fdfbf6; }
.paper .eyebrow.brass-e { color: var(--brass-deep); }

/* big left-set moment headline (dark acts) */
.moment-h {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(36px, 5.6vw, 68px); line-height: 1.0; letter-spacing: -.015em;
  margin-top: 18px;
}
.moment-sub { color: var(--dim); font-size: clamp(15.5px, 1.8vw, 18px); max-width: 620px; margin-top: 22px; }

/* serif editorial headline (paper acts) */
.serif-line {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(34px, 5vw, 60px); line-height: 1.02; letter-spacing: -.015em;
  margin-top: 18px; color: var(--ink-text);
}
.serif-line em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: 0; }
.paper-sub { color: var(--ink-dim); font-size: clamp(15.5px, 1.8vw, 18px); max-width: 620px; margin-top: 20px; }

/* ---------- act: the app (paper) ---------- */
.app-cols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 26px 54px; margin-top: 44px; max-width: 980px;
  color: #3a352d; font-size: 17px; line-height: 1.75;
}
.app-cols b { color: var(--ink-text); }
.feature-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px; margin-top: 54px;
}
.feature {
  background: #fffdf8; border: 1px solid var(--line-ink); border-radius: var(--r-md);
  border-top: 3px solid var(--brass-deep); padding: 24px 22px 20px;
}
.feature.saffron-f { border-top-color: var(--saffron); background: rgba(233, 138, 43, .10); }
.feature.green-f   { border-top-color: var(--green); background: rgba(21, 122, 67, .09); }
.feature.chakra-f  { border-top-color: var(--chakra); background: rgba(21, 42, 94, .07); }
.feature.brass-f   { border-top-color: var(--brass-deep); background: rgba(182, 130, 53, .10); }
.f-label { font-family: var(--label); font-weight: 700; font-size: 13px; letter-spacing: .12em;
           text-transform: uppercase; color: var(--ink-text); }
.feature p { color: var(--ink-dim); font-size: 14.5px; margin-top: 10px; line-height: 1.6; }

.lang-band { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 46px; }
.lang-cap { font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--ink-text); margin-right: 6px; }
.lang {
  font-weight: 600; font-size: 14.5px; border-radius: 999px; padding: 7px 15px;
  border: 1px solid transparent;
}
.chip-saffron { color: #a35a0e; background: rgba(233, 138, 43, .12); border-color: rgba(233, 138, 43, .35); }
.chip-green   { color: var(--green); background: rgba(21, 122, 67, .10); border-color: rgba(21, 122, 67, .30); }
.chip-chakra  { color: var(--chakra); background: rgba(21, 42, 94, .08); border-color: rgba(21, 42, 94, .25); }

/* ---------- act: trigger (full saffron ground) ---------- */
.moment { background: var(--ink-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.saffron-act { background: var(--saffron); border: 0; }
.saffron-act .eyebrow { color: #6b3a04; }
.saffron-act .moment-h { color: #241505; }
.saffron-act .moment-sub { color: rgba(36, 21, 5, .8); }

/* ---------- act: demo ---------- */
.demo-act { position: relative; }
.demo { position: relative; max-width: 940px; margin: 54px 0 0; }
.demo-drone { position: absolute; left: 0; right: 0; top: -105px; width: 100%; height: 190px;
              pointer-events: none; opacity: 0; transition: opacity .6s ease; z-index: 3; }
.demo-drone.on { opacity: 1; }
.demo-stage { display: flex; gap: 26px; align-items: stretch; justify-content: center; flex-wrap: wrap; }

.ph { flex: none; width: 250px; background: #0e0c0a; border: 1px solid var(--line-2);
      border-radius: 30px; padding: 12px; box-shadow: 0 24px 60px rgba(0, 0, 0, .5); }
.ph-screen { position: relative; height: 460px; border-radius: 20px; overflow: hidden;
             background: linear-gradient(170deg, #1d1914, #12100d 65%); }
.ph-idle { position: absolute; inset: 0; display: flex; flex-direction: column;
           align-items: center; justify-content: center; gap: 18px; padding: 22px; text-align: center; }
.ph-brand { font-family: var(--display); font-weight: 900; font-size: 17px; }
.ph-brand b { color: var(--brass); }
.ph-hint { color: var(--dim); font-size: 13.5px; line-height: 1.5; }
.panic { width: 158px; height: 158px; border-radius: 50%; border: 0; cursor: pointer;
         background: radial-gradient(circle at 50% 38%, #ff6a5e, #d43a30 70%);
         color: #fff; font: 800 15px/1.3 var(--display); letter-spacing: .04em;
         box-shadow: 0 0 0 10px rgba(212, 58, 48, .12), 0 14px 40px rgba(212, 58, 48, .35);
         animation: panicPulse 2.2s ease-in-out infinite; }
.panic:active { transform: scale(.96); }
@keyframes panicPulse {
  0%, 100% { box-shadow: 0 0 0 10px rgba(212, 58, 48, .12), 0 14px 40px rgba(212, 58, 48, .35); }
  50%      { box-shadow: 0 0 0 18px rgba(212, 58, 48, .05), 0 14px 40px rgba(212, 58, 48, .35); }
}

.ph-live { position: absolute; inset: 0; padding: 16px 14px; display: flex; flex-direction: column; }
.rec-row { display: flex; align-items: center; gap: 7px; font-weight: 800; font-size: 13px; letter-spacing: .1em; }
.cam-exit { margin-left: auto; background: rgba(255, 93, 93, .16); color: #ff6a5e; border: 1px solid rgba(255, 93, 93, .5);
            font: 800 11px inherit; letter-spacing: .04em; border-radius: 999px; padding: 5px 11px; cursor: pointer; }
.cam-exit:hover { background: rgba(255, 93, 93, .28); }
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: #ff4646; animation: recBlink 1s steps(2) infinite; }
@keyframes recBlink { 50% { opacity: .15; } }
.cam-noise { position: relative; overflow: hidden; flex: 1; margin: 12px 0; border-radius: 12px;
             border: 1px solid var(--line);
             background: linear-gradient(120deg, #2c2418, #191612 55%, #292117);
             background-size: 250% 250%; animation: camDrift 5s ease-in-out infinite alternate; }
@keyframes camDrift { to { background-position: 100% 100%; } }
.cam-noise video, .cam-noise canvas { position: absolute; inset: 0; width: 100%; height: 100%;
             object-fit: cover; display: none; }
.cam-noise.live video { display: block; }
.cam-noise.frozen canvas { display: block; }
.cam-noise.frozen::after { content: "SEALED"; position: absolute; left: 8px; bottom: 7px;
             font: 800 9px/1 var(--label); letter-spacing: .2em; color: var(--brass);
             background: rgba(14, 12, 9, .7); padding: 3px 7px; border-radius: 5px; }
.cam-tag { position: absolute; top: 7px; right: 8px; z-index: 2; font-size: 9.5px; font-weight: 700;
             letter-spacing: .05em; color: #f3e9d4; background: rgba(16, 13, 9, .62);
             padding: 3px 8px; border-radius: 999px; }
.cam-tag::first-letter { color: #ff5d5d; }
.gps-row { font-size: 12.5px; color: var(--dim); }
.gps-row.ok { color: var(--brass); font-weight: 700; }
.chain-label { margin-top: 10px; font-size: 9.5px; letter-spacing: .24em; color: var(--dim); }
.chain-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; min-height: 32px; }
.chain-row i { width: 11px; height: 11px; border-radius: 3px; background: var(--brass);
               opacity: .85; animation: chainIn .3s ease; }
@keyframes chainIn { from { transform: scale(.2); opacity: 0; } }

.control { flex: 1; min-width: 290px; max-width: 460px; display: flex; flex-direction: column; gap: 12px; }
.ctrl-head { display: flex; justify-content: space-between; align-items: center; }
.ctrl-title { font-weight: 800; font-size: 13px; letter-spacing: .04em; color: var(--text); }
.sim-chip { font-family: var(--label); font-size: 10px; font-weight: 700; letter-spacing: .16em;
            color: var(--saffron); border: 1px solid rgba(233, 138, 43, .5); border-radius: 999px; padding: 3px 9px; }
.ctrl-map { position: relative; background: var(--ink); border: 1px solid var(--line-2);
            border-radius: var(--r-md); overflow: hidden; }
.map-svg { display: block; width: 100%; height: auto; }
.map-lbl { fill: var(--dim); font-family: var(--label); font-size: 8px; letter-spacing: .14em; }
.map-lbl-inc { fill: #ff8a80; }
.map-eta { position: absolute; top: 8px; right: 10px; font-family: var(--label);
           font-size: 11px; font-weight: 700; color: var(--brass); background: rgba(14, 12, 9, .6);
           padding: 3px 9px; border-radius: 999px; }
.map-eta b { color: #fff; }
.dispatch-btn { background: var(--brass); color: #241a06; border: 0; border-radius: 999px;
                font: 800 14px var(--display); letter-spacing: .02em; padding: 13px; cursor: pointer;
                box-shadow: 0 6px 20px rgba(217, 162, 83, .28); animation: panicPulse 2.2s ease-in-out infinite; }
.dispatch-btn:active { transform: scale(.98); }
.ctrl-note { color: var(--dim); font-size: 11.5px; line-height: 1.5; }

.feed { display: flex; flex-direction: column; gap: 10px; }
.feed-item { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md);
             padding: 14px 16px; font-size: 14px; color: var(--text); line-height: 1.55;
             opacity: 0; transform: translateY(10px); transition: all .5s ease; }
.feed-item.on { opacity: 1; transform: none; }
.feed-item b { color: var(--brass); font-weight: 800; }
.feed-item.final { border-color: var(--line-2); background: rgba(217, 162, 83, .07); font-size: 15px; }
.chip-mini { display: inline-block; border: 1px solid var(--line-2); color: var(--brass);
             border-radius: 999px; font-size: 11px; font-weight: 700; padding: 2px 9px; margin-left: 4px; }
.demo-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px 22px;
             flex-wrap: wrap; margin-top: 24px; }
.demo-honesty { color: var(--dim); font-size: 12.5px; max-width: 640px; }
.voice-btn { background: none; border: 1px solid var(--line); color: var(--text); cursor: pointer;
             font: 600 12.5px inherit; border-radius: 999px; padding: 9px 16px; transition: all .15s ease; }
.voice-btn:hover { border-color: var(--brass); color: var(--brass); }
.voice-status { color: var(--brass); font-size: 12px; font-weight: 700; min-height: 16px; }
.heard { color: var(--brass); font-size: 12px; font-weight: 700; margin-top: 6px; }

/* ---------- act: drone anatomy (chakra-navy ground) ---------- */
.drone-act { background: #11234e; border-top: 1px solid rgba(243, 242, 242, .12);
             border-bottom: 1px solid rgba(243, 242, 242, .12); }
.drone-act .eyebrow { color: #ffc46b; }
.drone-act .moment-sub { color: #b7c2e4; }
.drone-act .a-num { color: #ffc46b; }
.drone-act .a-item p { color: #a9b5d8; }
.drone-act .anatomy { border-top-color: rgba(243, 242, 242, .16); }
.drone-act .a-item { border-bottom-color: rgba(243, 242, 242, .16); }
.drone-act .drone-canvas { border-color: rgba(217, 162, 83, .45); }
.drone-stage { position: relative; max-width: 940px; margin: 52px 0 0; }
.drone-canvas {
  width: 100%; height: 400px; display: block; touch-action: pan-y; cursor: grab;
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  background: linear-gradient(180deg, #1c1813, var(--ink));
}
.drone-canvas:active { cursor: grabbing; }
@media (max-width: 560px) { .drone-canvas { height: 320px; } }
.proto-chip {
  position: absolute; top: 14px; left: 14px; font-family: var(--label); font-size: 11px; font-weight: 700;
  letter-spacing: .22em; color: var(--brass); border: 1px solid var(--line-2);
  border-radius: 999px; padding: 6px 12px; background: rgba(18, 15, 11, .72);
}
.callout {
  position: absolute; transform: translate(-50%, -130%); white-space: nowrap;
  background: rgba(18, 15, 11, .88); border: 1px solid var(--line-2); border-radius: 999px;
  color: var(--text); font-size: 12.5px; font-weight: 700; padding: 7px 14px;
  opacity: 0; transition: opacity .3s ease; pointer-events: none;
}
.callout.on { opacity: 1; }
.callout b { color: var(--brass); }

.anatomy {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0; margin-top: 54px; border-top: 1px solid var(--line);
}
.a-item { padding: 26px 22px 8px 0; border-bottom: 1px solid var(--line); }
.a-num { display: block; font-family: var(--label); font-weight: 700; font-size: 13px;
         letter-spacing: .2em; color: var(--brass); }
.a-item b { display: block; font-family: var(--display); font-weight: 700; font-size: 17px; margin-top: 10px; }
.a-item p { color: var(--dim); font-size: 13.5px; line-height: 1.6; margin-top: 8px; }

/* ---------- act: minutes (green ground) ---------- */
.green-act { background: #0f5c33; color: #f0f5ee; }
.green-act .eyebrow.green-e { color: #ffcf7e; }
.green-act .serif-line { color: #f6f2ea; }
.green-act .paper-sub, .green-act .vs-note { color: rgba(240, 245, 238, .78); }
.green-act .vs-tile { background: var(--paper); border-color: transparent; }
.green-act .vs-tile.go { background: #ffffff; border-color: #ffffff;
                         box-shadow: 0 24px 60px rgba(0, 0, 0, .22); }
.green-act .vs-badge { color: rgba(240, 245, 238, .7); }

.vs-row { display: flex; gap: 16px 22px; align-items: stretch; justify-content: flex-start;
          flex-wrap: wrap; margin-top: 48px; }
.vs-tile { flex: 1; min-width: 250px; max-width: 380px;
           background: #fffdf8; border: 1px solid var(--line-ink); border-radius: var(--r-lg);
           padding: 34px 32px; }
.vs-tile.go { border-color: rgba(21, 122, 67, .4); background: rgba(21, 122, 67, .06);
              box-shadow: 0 0 40px rgba(21, 122, 67, .07); }
.vs-tile .big { font-family: var(--display); font-weight: 900; font-size: 52px; line-height: 1; color: var(--ink-text); }
.vs-tile.go .big { color: var(--green); }
.vs-tile .unit { font-size: 22px; font-weight: 700; color: var(--ink-dim); }
.vs-tile.go .unit { color: var(--green); opacity: .75; }
.vs-tile .lbl { font-family: var(--label); font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
                color: var(--ink-dim); margin-top: 14px; font-weight: 700; }
.vs-tile .sub { color: var(--ink-dim); font-size: 13.5px; line-height: 1.6; margin-top: 12px; }
.vs-badge { align-self: center; font-family: var(--label); font-weight: 700; font-size: 14px;
            color: var(--ink-dim); letter-spacing: .1em; }
.vs-note { color: var(--ink-dim); font-size: 13.5px; max-width: 560px; margin-top: 30px; }

/* ---------- act: real moments ---------- */
.moments { margin-top: 34px; }
.moments p {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(24px, 3.8vw, 44px); line-height: 1.28; letter-spacing: -.01em;
  color: var(--dim);
}
.moments p:nth-of-type(1) { color: #e0a06a; }
.moments p:nth-of-type(2) { color: #aebadd; }
.moments p:nth-of-type(3) { color: #8fcbaa; }
.moments p:nth-of-type(4) { color: #d9a253; }
.moments p:nth-of-type(5) { color: #d8cbb4; }
.moments p.m-brass { color: var(--brass); margin-top: 26px;
  font-size: clamp(20px, 3vw, 34px); font-weight: 700; }

/* ---------- act: honesty + faq (paper) ---------- */
.truth-cols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 18px; margin-top: 46px;
}
.truth { background: #fffdf8; border: 1px solid var(--line-ink); border-radius: var(--r-lg); padding: 30px 30px 24px; }
.truth.building { background: rgba(21, 42, 94, .05); border-color: rgba(21, 42, 94, .2); }
.truth h3 { font-family: var(--label); font-weight: 700; font-size: 13px; letter-spacing: .2em;
            text-transform: uppercase; color: var(--green); }
.truth.building h3 { color: var(--chakra); }
.truth ul { list-style: none; padding: 0; margin-top: 16px; }
.truth li { padding: 10px 0 10px 26px; position: relative; color: #3a352d; font-size: 15px;
            border-bottom: 1px solid rgba(32, 31, 29, .07); }
.truth li:last-child { border-bottom: 0; }
.truth li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 700; }
.truth.building li::before { content: "→"; color: var(--chakra); }

.faq { max-width: 820px; margin: 54px 0 0; }
.faq-item { border-bottom: 1px solid var(--line-ink); }
.faq-q {
  width: 100%; text-align: left; background: none; border: 0; color: var(--ink-text);
  font: inherit; font-weight: 700; font-size: 16.5px; padding: 20px 34px 20px 2px;
  cursor: pointer; position: relative;
}
.faq-q::after {
  content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  color: var(--brass-deep); font-size: 22px; font-weight: 400; transition: transform .18s ease;
}
.faq-item.open .faq-q::after { transform: translateY(-50%) rotate(45deg); }
.faq-a { display: none; color: var(--ink-dim); font-size: 15px; padding: 0 2px 22px; line-height: 1.7; }
.faq-item.open .faq-a { display: block; }

/* ---------- final + footer ---------- */
.final { text-align: center; padding: 128px 0 110px; }
.final-h {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(36px, 6vw, 76px); line-height: 1.04; letter-spacing: -.02em;
  max-width: 900px; margin: 8px auto 0;
}
.final-h em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--brass); }
.final .cta-row { margin-top: 44px; }

footer { border-top: 1px solid var(--line); padding: 46px 0 56px; color: var(--dim); font-size: 13px; }
.foot-lockup { display: block; height: 56px; width: auto; margin-bottom: 26px; }
footer .cols { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
footer .fine { margin-top: 18px; font-size: 12px; line-height: 1.7; max-width: 880px; }
footer b { color: var(--text); }

/* ---------- 3D layers ---------- */
.sky-canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
header.hero, section, footer { position: relative; z-index: 2; }
.paper, .moment, .drone-act { z-index: 3; }

@media (prefers-reduced-motion: reduce) {
  .panic, .dispatch-btn { animation: none; }
  .feed-item { transition: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   Demo v2 — countdown, languages, discreet chat, AI brief,
   drone cam, case file. All labelled SIMULATED on-page.
   ============================================================ */

.lang-row { display: flex; gap: 6px; }
.lang-pick { background: none; border: 1px solid var(--line); color: var(--dim); cursor: pointer;
             font: 600 11.5px inherit; border-radius: 999px; padding: 5px 12px; transition: all .15s ease; }
.lang-pick.on { border-color: var(--brass); color: var(--brass); }
.lang-pick:hover { color: var(--text); }

.ph-count { position: absolute; inset: 0; display: flex; flex-direction: column;
            align-items: center; justify-content: center; gap: 14px; padding: 22px; text-align: center; }
.count-word { font-family: var(--label); font-size: 11px; font-weight: 700; letter-spacing: .3em; color: var(--dim); }
.count-num { font-family: var(--display); font-weight: 900; font-size: 96px; line-height: 1; color: var(--brass);
             animation: countPop .8s ease infinite; }
@keyframes countPop { 0% { transform: scale(1.15); opacity: .6; } 30% { transform: scale(1); opacity: 1; } }
.count-cancel { background: none; border: 1.5px solid #ff6a5e; color: #ff6a5e; cursor: pointer;
                font: 800 14px var(--display); letter-spacing: .06em; border-radius: 999px; padding: 12px 34px; }
.count-cancel:hover { background: rgba(255, 106, 94, .12); }
.count-note { color: var(--dim); font-size: 11px; line-height: 1.5; max-width: 190px; }
@media (prefers-reduced-motion: reduce) { .count-num { animation: none; } }

.chat { max-height: 118px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px;
        margin-bottom: 8px; }
.chat-b { max-width: 88%; font-size: 11.5px; line-height: 1.45; padding: 7px 10px; border-radius: 11px;
          animation: chatIn .25s ease; }
.chat-b.cr { align-self: flex-start; background: rgba(217, 162, 83, .14); color: var(--text);
             border: 1px solid var(--line-2); border-bottom-left-radius: 3px; }
.chat-b.me { align-self: flex-end; background: rgba(243, 242, 242, .12); color: var(--text);
             border-bottom-right-radius: 3px; }
@keyframes chatIn { from { transform: translateY(6px); opacity: 0; } }
.chat-replies { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.chat-chip { background: none; border: 1px solid var(--brass); color: var(--brass); cursor: pointer;
             font: 700 11px inherit; border-radius: 999px; padding: 6px 12px; }
.chat-chip:hover { background: rgba(217, 162, 83, .14); }

.ctrl-tools { display: inline-flex; align-items: center; gap: 8px; }
.say-toggle { background: none; border: 1px solid var(--line); border-radius: 999px; cursor: pointer;
              font-size: 13px; padding: 3px 9px; line-height: 1; }
.say-toggle:hover { border-color: var(--brass); }

.ai-brief { background: rgba(21, 42, 94, .22); border: 1px solid rgba(122, 148, 224, .35);
            border-radius: var(--r-md); padding: 12px 14px; }
.ai-head { font-family: var(--label); font-size: 10px; font-weight: 700; letter-spacing: .2em; color: #aebadd; }
.ai-lines { max-height: 96px; overflow-y: auto; margin-top: 7px; display: flex; flex-direction: column; gap: 4px; }
.ai-line { font-size: 12.5px; color: #d5ddf3; line-height: 1.5; }
.ai-line::before { content: "▸ "; color: #7a94e0; }

.drone-view { border: 1px solid var(--line-2); border-radius: var(--r-md); overflow: hidden; }
.dv-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px;
           font-family: var(--label); font-size: 10px; font-weight: 700; letter-spacing: .18em; color: var(--brass); }
.dv-btns { display: flex; gap: 5px; }
.dv-btn { background: none; border: 1px solid var(--line); color: var(--dim); cursor: pointer;
          font: 700 10px var(--label); letter-spacing: .1em; border-radius: 999px; padding: 3px 10px; }
.dv-btn.on { border-color: var(--brass); color: var(--brass); }
.dv-scene { position: relative; height: 120px; overflow: hidden;
            background: linear-gradient(180deg, #14110d 0%, #241f17 70%, #2e2820 100%); }
.dv-spot { position: absolute; left: 50%; top: -20%; width: 150px; height: 150px; transform: translateX(-50%);
           background: radial-gradient(closest-side, rgba(255, 228, 160, .30), transparent 70%);
           border-radius: 50%; }
.dv-person { position: absolute; left: 50%; bottom: 18px; width: 13px; height: 30px; transform: translateX(-50%);
             background: #d9cbb2; border-radius: 7px 7px 4px 4px; opacity: .9; }
.dv-person::before { content: ""; position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
                     width: 9px; height: 9px; border-radius: 50%; background: #d9cbb2; }
.dv-osd { position: absolute; right: 9px; bottom: 7px; font-family: var(--label); font-size: 9px;
          letter-spacing: .12em; color: rgba(243, 242, 242, .75); }
.dv-scene.thermal { background: linear-gradient(180deg, #060d2c 0%, #0c1c46 70%, #12285c 100%); }
.dv-scene.thermal .dv-spot { background: radial-gradient(closest-side, rgba(80, 120, 255, .18), transparent 70%); }
.dv-scene.thermal .dv-person,
.dv-scene.thermal .dv-person::before { background: #ffb01f; box-shadow: 0 0 14px 5px rgba(255, 122, 32, .55); }
.dv-scene.thermal .dv-osd::after { content: " · THERMAL"; color: #ffb01f; }

.case-file { background: rgba(21, 122, 67, .12); border: 1px solid rgba(21, 122, 67, .4);
             border-radius: var(--r-md); padding: 12px 14px; }
.cf-head { font-family: var(--label); font-size: 10px; font-weight: 700; letter-spacing: .2em; color: #8fcbaa; }
.cf-row { font-size: 12.5px; color: var(--text); margin-top: 6px; }
.cf-row b { color: #ffcf7e; }
.cf-row b.ok { color: #8fcbaa; }
.cf-custody { font-family: var(--label); font-size: 10.5px; letter-spacing: .06em; color: var(--dim); }

/* ============================================================
   The fleet — VEER / NAYAK / RAKSHAK cards on the chakra act.
   ============================================================ */
.fleet { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
         gap: 18px; margin-top: 54px; }
.craft { background: rgba(10, 18, 44, .55); border: 1px solid rgba(243, 242, 242, .14);
         border-radius: var(--r-lg); padding: 28px 26px 22px; }
.craft-k { font-family: var(--label); font-size: 10.5px; font-weight: 700; letter-spacing: .22em;
           text-transform: uppercase; color: #ffc46b; }
.craft h3 { font-family: var(--display); font-weight: 900; font-size: 34px; letter-spacing: .01em;
            margin-top: 10px; color: #f3f2f2; }
.craft-sub { color: #b7c2e4; font-size: 14px; line-height: 1.6; margin-top: 10px; }
.craft ul { list-style: none; padding: 0; margin-top: 18px; }
.craft li { padding: 9px 0 9px 22px; position: relative; color: #d5ddf3; font-size: 13.5px;
            line-height: 1.55; border-top: 1px solid rgba(243, 242, 242, .10); }
.craft li::before { content: "◆"; position: absolute; left: 0; top: 10px;
                    color: #d9a253; font-size: 9px; }
.fleet-note { color: #8e9bc4; font-size: 12.5px; line-height: 1.7; max-width: 820px;
              margin-top: 30px; }

/* ============================================================
   Fleet visuals — original animated archetypes drawn from our
   own engineering targets (not any vendor's design).
   ============================================================ */
.craft-viz { margin: -6px -8px 14px; }
.viz { display: block; width: 100%; height: auto; }
.viz * { transform-box: fill-box; }

.vz-hover { animation: vzBob 3.6s ease-in-out infinite; }
.vz-hover.n { animation-duration: 3s; }
@keyframes vzBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.vz-shadow { animation: vzShadow 3.6s ease-in-out infinite; transform-origin: center; }
@keyframes vzShadow { 0%, 100% { transform: scaleX(1); opacity: .3; } 50% { transform: scaleX(.86); opacity: .2; } }

.vz-rotor { animation: vzSpin .5s linear infinite; transform-origin: center; }
.vz-rotor.r2 { animation-duration: .4s; }
@keyframes vzSpin { 0% { transform: scaleX(1); } 25% { transform: scaleX(.35); } 50% { transform: scaleX(1); } 75% { transform: scaleX(.35); } 100% { transform: scaleX(1); } }

.vz-beam { animation: vzSweep 5.5s ease-in-out infinite; transform-origin: 50% 0%; }
@keyframes vzSweep { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); } }
.vz-voice path { animation: vzVoice 2.2s ease-out infinite; }
.vz-voice path:last-child { animation-delay: .25s; }
@keyframes vzVoice { 0% { opacity: 0; } 25% { opacity: .9; } 70% { opacity: 0; } 100% { opacity: 0; } }

.vz-cage { animation: vzCage 16s linear infinite; transform-origin: center; }
@keyframes vzCage { to { transform: rotate(360deg); } }
.vz-ir circle { animation: vzIr 2.6s ease-out infinite; transform-origin: center; }
@keyframes vzIr { 0% { transform: scale(.72); opacity: .55; } 70% { transform: scale(1.12); opacity: 0; } 100% { opacity: 0; } }

.vz-lid-l { animation: vzLidL 9s ease-in-out infinite; transform-origin: 0% 100%; }
.vz-lid-r { animation: vzLidR 9s ease-in-out infinite; transform-origin: 100% 100%; }
@keyframes vzLidL { 0%, 18% { transform: rotate(0); } 32%, 68% { transform: rotate(-58deg); } 82%, 100% { transform: rotate(0); } }
@keyframes vzLidR { 0%, 18% { transform: rotate(0); } 32%, 68% { transform: rotate(58deg); } 82%, 100% { transform: rotate(0); } }
.vz-nested { animation: vzRise 9s ease-in-out infinite; }
@keyframes vzRise { 0%, 22% { transform: translateY(6px); opacity: .55; } 36%, 64% { transform: translateY(-6px); opacity: 1; } 78%, 100% { transform: translateY(6px); opacity: .55; } }
.vz-charge { animation: vzCharge 1.6s ease-in-out infinite; }
@keyframes vzCharge { 50% { opacity: .25; } }

@media (prefers-reduced-motion: reduce) {
  .vz-hover, .vz-hover.n, .vz-shadow, .vz-rotor, .vz-beam, .vz-voice path,
  .vz-cage, .vz-ir circle, .vz-lid-l, .vz-lid-r, .vz-nested, .vz-charge { animation: none; }
}

/* ============================================================
   Four-colour cycle: orange → white → blue → green, repeated.
   Ground classes override each act's earlier palette.
   ============================================================ */
.g-orange { background: var(--saffron); border: 0; }
.g-orange h1, .g-orange .moment-h, .g-orange .serif-line { color: #241505; }
.g-orange .sub, .g-orange .moment-sub, .g-orange .paper-sub, .g-orange .vs-note { color: rgba(36, 21, 5, .8); }
.g-orange .eyebrow { color: #6b3a04; }
.g-orange .trust-row { color: rgba(36, 21, 5, .75); }
.g-orange .trust-row span::before { color: #241505; }
.g-orange .btn-brass { background: #201f1d; color: #f6f2ea; box-shadow: 0 8px 26px rgba(32, 31, 29, .3); }
.g-orange .btn-ghost { color: #241505; border-color: rgba(36, 21, 5, .35); }
.g-orange .btn-ghost:hover { border-color: #241505; color: #241505; }
.g-orange .halo { background: radial-gradient(closest-side, rgba(255, 255, 255, .22), transparent); }
.g-orange .hero-mark img { filter: drop-shadow(0 16px 44px rgba(36, 21, 5, .25)); }
.g-orange .vs-tile { background: #fffdf8; border-color: transparent; }
.g-orange .vs-tile.go { background: #ffffff; border-color: #ffffff; box-shadow: 0 24px 60px rgba(36, 21, 5, .2); }
.g-orange .vs-badge { color: rgba(36, 21, 5, .6); }

.g-blue { background: #11234e; border: 0; }
.g-blue .moment-h, .g-blue .serif-line { color: #f3f2f2; }
.g-blue .moment-sub, .g-blue .paper-sub { color: #b7c2e4; }
.g-blue .eyebrow { color: #ffc46b; }
.g-blue .truth { background: #fffdf8; border-color: transparent; }
.g-blue .truth.building { background: #e9edf8; border-color: transparent; }

.g-green { background: #0f5c33; border: 0; }
.g-green .moment-h, .g-green .final-h { color: #f6f2ea; }
.g-green .moment-sub { color: #cfe6d4; }
.g-green .eyebrow { color: #ffcf7e; }
.g-green .craft { background: rgba(6, 46, 26, .55); border-color: rgba(243, 242, 242, .16); }
.g-green .craft-sub { color: #cfe6d4; }
.g-green .craft li { color: #e2f0e4; border-top-color: rgba(243, 242, 242, .12); }
.g-green .fleet-note { color: #a8cdb2; }
.g-green .final-h em { color: #ffcf7e; }
footer.g-green { background: #0b4a28; border-top: 1px solid rgba(243, 242, 242, .15); color: #cfe6d4; }
footer.g-green b { color: #f6f2ea; }

.moments-act.g-white { background: var(--paper); }
.g-white .eyebrow { color: var(--brass-deep); }
.g-white .moments p:nth-of-type(1) { color: #c76d14; }
.g-white .moments p:nth-of-type(2) { color: #44598f; }
.g-white .moments p:nth-of-type(3) { color: #157a43; }
.g-white .moments p:nth-of-type(4) { color: #b68235; }
.g-white .moments p:nth-of-type(5) { color: #6d675d; }
.g-white .moments p.m-brass { color: #b68235; }

/* NAYAK patrols its house */
.vz-patrol { animation: vzPatrol 9s ease-in-out infinite; }
@keyframes vzPatrol { 0%, 100% { transform: translateX(-30px); } 50% { transform: translateX(34px); } }
@media (prefers-reduced-motion: reduce) { .vz-patrol { animation: none; } }

/* ============================================================
   Camera spec blocks · dock launch-out · site-wide sky drone.
   ============================================================ */
.cam-k { font-family: var(--label); font-size: 10.5px; font-weight: 700; letter-spacing: .22em;
         text-transform: uppercase; color: #ffcf7e; margin-top: 22px; }
ul.cam { margin-top: 10px; }
ul.cam li b { color: #f6f2ea; font-weight: 700; }

/* RAKSHAK: lid opens, the drone launches out of frame, returns, lid closes */
.vz-lid-l { animation: vzLidL 12s ease-in-out infinite; }
.vz-lid-r { animation: vzLidR 12s ease-in-out infinite; }
@keyframes vzLidL { 0%, 8% { transform: rotate(0); } 16%, 78% { transform: rotate(-58deg); } 88%, 100% { transform: rotate(0); } }
@keyframes vzLidR { 0%, 8% { transform: rotate(0); } 16%, 78% { transform: rotate(58deg); } 88%, 100% { transform: rotate(0); } }
.vz-nested { animation: vzLaunch 12s ease-in-out infinite; }
@keyframes vzLaunch {
  0%, 12%  { transform: translate(0, 6px); opacity: .55; }
  20%      { transform: translate(0, -16px); opacity: 1; }
  32%      { transform: translate(85px, -170px) rotate(6deg); opacity: 1; }
  33%, 62% { transform: translate(85px, -190px); opacity: 0; }
  72%      { transform: translate(0, -16px); opacity: 1; }
  82%, 100% { transform: translate(0, 6px); opacity: .55; }
}
@media (prefers-reduced-motion: reduce) { .vz-nested { animation: none; } }

/* the gold 3D drone now flies IN FRONT of the coloured bands, across the
   whole site (pointer-events stay off — it can never block a click) */
.sky-canvas { z-index: 30; }

/* ============================================================
   Drone flies OVER the colour bands but BEHIND every letter:
   sections stop forming stacking contexts (z auto) so their
   backgrounds sit under the canvas (z1), while each .wrap lifts
   the actual content above it (z2).
   ============================================================ */
header.hero, section, footer { z-index: auto; }
.paper, .moment, .drone-act { z-index: auto; }
.sky-canvas { z-index: 1; }
.wrap { position: relative; z-index: 2; }