/* ============================================================
   SAKSHYA112 — mini-site. Brand: deep navy + sentinel teal
   (Sakshya112-Sentinel-lockup). Framework-free, system fonts,
   no CDNs — the whole site is these three files + assets.
   Theming follows the dispatcher's CSS-variable pattern.
   ============================================================ */

:root {
  --navy: #0c1622;
  --navy-2: #0f1d2c;
  --panel: #122233;
  --line: rgba(233, 241, 244, .10);
  --line-2: rgba(34, 193, 214, .28);
  --teal: #22c1d6;
  --teal-deep: #178fa0;
  --text: #e9f1f4;
  --dim: #93a7b2;
  --r-lg: 20px;
  --r-md: 14px;
}

* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--navy);
  color: var(--text);
  font: 16px/1.6 -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 22px; }
a { color: var(--teal); text-decoration: none; }
[hidden] { display: none !important; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 700; font-size: 15.5px; padding: 14px 26px; border-radius: 999px;
  border: 1px solid transparent; cursor: pointer; transition: all .15s ease; white-space: nowrap;
}
.btn-teal { background: var(--teal); color: #06222a; box-shadow: 0 8px 26px rgba(34, 193, 214, .25); }
.btn-teal: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(--teal); color: var(--teal); }

/* ---------- nav ---------- */
nav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(12, 22, 34, .86); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 66px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); font-weight: 800; font-size: 19px; }
.brand b { color: var(--teal); font-weight: 800; }
nav .btn { padding: 10px 20px; font-size: 14px; }

/* ---------- hero ---------- */
.hero { position: relative; text-align: center; padding: 84px 0 64px; overflow: hidden; }
.hero .halo {
  position: absolute; left: 50%; top: -220px; width: 900px; height: 560px;
  transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(34, 193, 214, .16), transparent);
}
.eyebrow {
  font-weight: 700; font-size: 12.5px; letter-spacing: .32em; color: var(--teal);
  text-transform: uppercase;
}
.hero h1 { font-size: clamp(34px, 6vw, 58px); line-height: 1.08; font-weight: 800; margin: 18px auto 0; max-width: 820px; }
.hero .sub { color: var(--dim); font-size: clamp(16px, 2.2vw, 19px); max-width: 720px; margin: 20px auto 0; }
.hero .cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 32px; }
.trust-row {
  display: flex; gap: 8px 26px; justify-content: center; flex-wrap: wrap;
  margin-top: 30px; color: var(--dim); font-size: 13.5px;
}
.trust-row span::before { content: "✓ "; color: var(--teal); font-weight: 700; }
.aim-line { color: var(--dim); font-size: 14px; max-width: 620px; margin: 22px auto 0; }

/* live stats strip */
.stats {
  display: inline-flex; gap: 34px; margin-top: 34px; padding: 14px 30px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
}
.stats .s { text-align: center; }
.stats .n { font-weight: 800; font-size: 22px; color: var(--teal); }
.stats .l { font-size: 12px; letter-spacing: .14em; color: var(--dim); text-transform: uppercase; }

/* ---------- sections ---------- */
section { padding: 72px 0; }
section.alt { background: var(--navy-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
h2 { font-size: clamp(26px, 4vw, 36px); font-weight: 800; line-height: 1.15; text-align: center; }
.section-sub { color: var(--dim); text-align: center; max-width: 640px; margin: 14px auto 0; }

/* ---- interactive response demo ---- */
.demo { position: relative; max-width: 920px; margin: 44px auto 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: #060d15; 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, #0e2233, #0a1520 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-weight: 800; font-size: 17px; }
.ph-brand b { color: var(--teal); }
.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 inherit; 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-alt { color: var(--dim); font-size: 12px; }

.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, #14324a, #0c1d2c 55%, #123048);
             background-size: 250% 250%; animation: camDrift 5s ease-in-out infinite alternate; }
@keyframes camDrift { to { background-position: 100% 100%; } }
/* live webcam fills the viewfinder (mirrored, selfie-style) when granted;
   otherwise the gradient above shows. Freeze-frame canvas holds the last
   frame after the camera switches off, so it reads as "footage sealed". */
.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 'Space Grotesk', monospace; letter-spacing: .2em; color: var(--teal);
             background: rgba(6, 18, 26, .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: #cfe; background: rgba(6, 18, 26, .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(--teal); 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(--teal);
               opacity: .85; animation: chainIn .3s ease; }
@keyframes chainIn { from { transform: scale(.2); opacity: 0; } }

/* control room (right column) */
.control { flex: 1; min-width: 290px; max-width: 440px; 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: 'Space Grotesk', monospace; font-size: 10px; font-weight: 700; letter-spacing: .16em;
            color: var(--warn); border: 1px solid rgba(201, 137, 43, .5); border-radius: 999px; padding: 3px 9px; }
.ctrl-map { position: relative; background: var(--navy); 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: 'Space Grotesk', monospace; font-size: 8px; letter-spacing: .14em; }
.map-lbl-inc { fill: #ff8a80; }
.map-eta { position: absolute; top: 8px; right: 10px; font-family: 'Space Grotesk', monospace;
           font-size: 11px; font-weight: 700; color: var(--teal); background: rgba(6, 18, 26, .6);
           padding: 3px 9px; border-radius: 999px; }
.map-eta b { color: #fff; }
.dispatch-btn { background: var(--teal); color: #06222a; border: 0; border-radius: 999px;
                font: 800 14px inherit; letter-spacing: .02em; padding: 13px; cursor: pointer;
                box-shadow: 0 6px 20px rgba(34, 193, 214, .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(--teal); font-weight: 800; }
.feed-item.final { border-color: var(--line-2); background: rgba(34, 193, 214, .07); font-size: 15px; }
.chip-mini { display: inline-block; border: 1px solid var(--line-2); color: var(--teal);
             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: 22px; }
.demo-honesty { color: var(--dim); font-size: 12.5px; max-width: 620px; }
.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(--teal); color: var(--teal); }
.voice-status { color: var(--teal); font-size: 12px; font-weight: 700; min-height: 16px; }
.heard { color: var(--teal); font-size: 12px; font-weight: 700; margin-top: 6px; }

/* app screens */
.app-screens { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin-top: 40px; }
.app-frame { width: 190px; background: #060d15; border: 1px solid var(--line-2);
             border-radius: 26px; padding: 9px; box-shadow: 0 20px 50px rgba(0, 0, 0, .45); }
.app-frame img { display: block; width: 100%; border-radius: 18px; }
.app-cap { color: var(--dim); font-size: 12px; text-align: center; margin-top: 10px; padding: 0 4px; }
.app-drop-note { border: 1px dashed var(--line-2); border-radius: var(--r-md); color: var(--dim);
                 font-size: 13.5px; padding: 26px 30px; text-align: center; max-width: 520px; }
.app-drop-note b { color: var(--teal); font-weight: 700; }

.boundary {
  margin: 34px auto 0; max-width: 760px; background: rgba(34, 193, 214, .06);
  border: 1px solid var(--line-2); border-radius: var(--r-md); padding: 18px 22px;
  color: var(--dim); font-size: 14.5px; text-align: center;
}
.boundary b { color: var(--text); }

/* where the money goes */
.money { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 44px; }
.money .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px 24px; }
.money .num { font-weight: 800; font-size: 30px; color: var(--teal); }
.money h3 { font-size: 18px; margin: 10px 0 8px; }
.money p { color: var(--dim); font-size: 14px; }

/* membership */
.member-band { text-align: center; }
.member-perks { display: flex; gap: 10px 14px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }
.perk {
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
  padding: 10px 20px; font-size: 14px; color: var(--text);
}
.perk b { color: var(--teal); }

/* faq */
.faq { max-width: 760px; margin: 40px auto 0; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%; text-align: left; background: none; border: 0; color: var(--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(--teal); 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(--dim); font-size: 15px; padding: 0 2px 22px; line-height: 1.65; }
.faq-item.open .faq-a { display: block; }

/* final cta */
.final { text-align: center; padding: 88px 0; }
.final h2 { max-width: 700px; margin: 0 auto; }

/* footer */
footer { border-top: 1px solid var(--line); padding: 40px 0 50px; color: var(--dim); font-size: 13px; }
footer .cols { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
footer .fine { margin-top: 18px; font-size: 12px; line-height: 1.65; max-width: 860px; }
footer b { color: var(--text); }

@media (max-width: 560px) {
  .hero { padding: 60px 0 48px; }
  .stats { gap: 22px; padding: 12px 22px; }
  section { padding: 56px 0; }
}

/* ============================================================
   3D layer — Sentinel Eye hero, evidence tamper wall, blueprint
   drone, certificate card. All progressive enhancement: without
   JS/WebGL (or with prefers-reduced-motion) the page stays the
   static version above; hidden sections un-hide only when their
   scene actually initializes.
   ============================================================ */

/* hero: the living sentinel mark */
.eye-mount { height: 280px; position: relative; margin: 0 auto 10px; max-width: 560px; }
.eye-mount canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.eye-mount .eye-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: .9; }
@media (max-width: 560px) { .eye-mount { height: 190px; } }

/* the Wall of Protectors */
.wall-gen { margin-top: 34px; }
.wall-stage { position: relative; margin-top: 34px; padding: 26px 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.wall-row { display: flex; overflow: hidden; margin: 11px 0; }
.wall-row .strip { display: flex; gap: 12px; flex: none; padding-right: 12px;
                   animation: wallDrift 70s linear infinite; }
.wall-row.back .strip  { animation-duration: 110s; }
.wall-row.front .strip { animation-direction: reverse; animation-duration: 85s; }
@keyframes wallDrift { to { transform: translateX(-50%); } }
.plq { flex: none; white-space: nowrap; background: var(--panel); border: 1px solid var(--line);
       border-radius: 10px; padding: 10px 18px; font-weight: 600; color: var(--text); }
.wall-row.back .plq  { font-size: 12px; opacity: .5; padding: 8px 14px; }
.wall-row.mid .plq   { font-size: 14px; opacity: .78; }
.wall-row.front .plq { font-size: 16.5px; border-color: var(--line-2); }
.my-plaque { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center;
  background: linear-gradient(160deg, #10303c, #0c1f2c); border: 1px solid var(--teal);
  border-radius: 14px; padding: 16px 30px; box-shadow: 0 0 0 6px rgba(34, 193, 214, .10),
  0 18px 50px rgba(0, 0, 0, .55), 0 0 40px rgba(34, 193, 214, .25);
  animation: plaqueIn .35s ease; }
@keyframes plaqueIn { from { transform: translate(-50%, -50%) scale(.7); opacity: 0; } }
.my-name { font-weight: 800; font-size: 21px; color: #fff; }
.my-tag { font-family: 'Space Grotesk', monospace; font-size: 9.5px; font-weight: 700;
          letter-spacing: .22em; color: var(--teal); }
.wall-note { text-align: center; color: var(--dim); font-size: 12.5px; margin-top: 20px; }
@media (prefers-reduced-motion: reduce) { .wall-row .strip { animation: none; } }

/* blueprint drone */
.drone-stage { position: relative; max-width: 920px; margin: 40px auto 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, #0e2030, var(--navy));
}
.drone-canvas:active { cursor: grabbing; }
@media (max-width: 560px) { .drone-canvas { height: 320px; } }
.proto-chip {
  position: absolute; top: 14px; left: 14px; font-size: 11px; font-weight: 800;
  letter-spacing: .22em; color: var(--teal); border: 1px solid var(--line-2);
  border-radius: 999px; padding: 6px 12px; background: rgba(12, 22, 34, .72);
}
.callout {
  position: absolute; transform: translate(-50%, -130%); white-space: nowrap;
  background: rgba(12, 22, 34, .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(--teal); }

/* minutes-matter comparison */
.vs-row { display: flex; gap: 16px 22px; align-items: stretch; justify-content: center;
          flex-wrap: wrap; margin-top: 42px; }
.vs-tile { flex: 1; min-width: 240px; max-width: 350px; text-align: center;
           background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg);
           padding: 32px 30px; }
.vs-tile.teal { border-color: var(--line-2); box-shadow: 0 0 40px rgba(34, 193, 214, .08); }
.vs-tile .big { font-weight: 800; font-size: 46px; line-height: 1; color: var(--text); }
.vs-tile.teal .big { color: var(--teal); }
.vs-tile .unit { font-size: 22px; font-weight: 700; color: var(--dim); }
.vs-tile.teal .unit { color: var(--teal-deep); }
.vs-tile .lbl { font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
                color: var(--dim); margin-top: 12px; font-weight: 700; }
.vs-tile .sub { color: var(--dim); font-size: 13.5px; line-height: 1.55; margin-top: 12px; }
.vs-badge { align-self: center; font-weight: 800; font-size: 14px; color: var(--dim); letter-spacing: .1em; }
.vs-note { text-align: center; color: var(--dim); font-size: 13.5px; max-width: 560px; margin: 30px auto 0; }

/* certificate preview generator */
.cert-gen { max-width: 420px; margin: 30px auto 0; }
.cert-gen input { width: 100%; text-align: center; background: var(--panel); color: var(--text);
              border: 1px solid var(--line-2); border-radius: 999px; padding: 14px 22px;
              font: 600 16px inherit; }
.cert-gen input:focus { outline: none; border-color: var(--teal); }
.cert-gen input::placeholder { color: var(--dim); font-weight: 400; }
.cert-hint { max-width: 520px; margin: 18px auto 0; text-align: center; color: var(--dim); font-size: 13px; }

/* certificate card (pure CSS 3D — works without WebGL too) */
.cert3d-wrap { perspective: 1200px; max-width: 560px; margin: 24px auto 0; }
.cert3d {
  position: relative; overflow: hidden; border: 1px solid var(--line-2); border-radius: 18px;
  background: var(--navy-2); padding: 30px 30px 24px; transform-style: preserve-3d;
  transition: transform .18s ease; box-shadow: 0 30px 70px rgba(0, 0, 0, .45);
}
.cert3d .sheen {
  position: absolute; inset: -40%; pointer-events: none; transform: translateX(-65%);
  background: linear-gradient(115deg, transparent 42%, rgba(233, 241, 244, .10) 50%, transparent 58%);
  transition: transform .25s ease;
}
.cert3d .c-rings { display: flex; justify-content: center; margin-bottom: 12px; }
.cert3d .c-eyebrow { font-weight: 700; font-size: 11px; letter-spacing: .4em; color: var(--teal); text-align: center; }
.cert3d .c-name { font-size: 26px; font-weight: 800; text-align: center; margin-top: 12px; }
.cert3d .c-no { font-size: 14.5px; color: var(--dim); text-align: center; margin-top: 6px; }
.cert3d .c-no b { color: var(--teal); font-size: 19px; }
.cert3d .c-foot { display: flex; justify-content: space-between; gap: 12px; font-size: 10.5px; color: var(--dim); margin-top: 20px; }

@media (prefers-reduced-motion: reduce) {
  .cert3d, .cert3d .sheen { transition: none; }
}

/* the scroll fly-through drone: fixed layer BEHIND the page content —
   it shows through the transparent sections and slides behind the solid
   .alt bands and cards for depth. Never blocks input. */
.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; }