/* Scapia ad landing page (/scapia/). Night palette to match the ad film: black sky, ember glow, dot globe.
   Loaded after site.css, only on this page. */

/* Clash Display (headlines) + General Sans (everything else), Indian Type Foundry via Fontshare,
   free for commercial use; self-hosted. Both have the ₹ sign; Clash lacks ∞, which falls back to General Sans. */
@font-face { font-family: 'Clash Display'; src: url('/fonts/clash-display-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'General Sans'; src: url('/fonts/general-sans-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'General Sans'; src: url('/fonts/general-sans-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'General Sans'; src: url('/fonts/general-sans-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }

.sx-body {
  --sans: 'General Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Clash Display', 'General Sans', system-ui, sans-serif;
  font-family: var(--sans);
  font-variation-settings: normal;
  --night: #050608;
  --night-2: #0D0E12;
  --tile: #111217;
  --edge: rgba(255, 255, 255, .09);
  --text: #F5F2EE;
  --dim: #A3A4AD;
  --ember: #E4521B;
  --ember-hot: #FF6A33;
  --mint: #63E08F;
  --gold: #F7C86A;
  --err: #FF8E7E;
  background: var(--night);
  color: var(--text);
}
.sx-body a { color: #FFB38F; }

/* Header floats over the hero; footer goes dark. */
.sx-body .masthead-slim { position: absolute; inset: 0 0 auto; background: transparent; border: 0; z-index: 5; }
.sx-body .masthead-note { color: rgba(255, 255, 255, .55); }
.sx-body .foot-slim { background: var(--night); border-top: 1px solid var(--edge); margin: 0; color: #80818B; }
.sx-body .foot-slim a { color: #B9BAC2; }

.sx { overflow: hidden; }
.sx h1, .sx h2, .sx h3 { color: var(--text); }

/* ---------- hero ---------- */
.sx-hero { position: relative; padding: 20px 0 0; isolation: isolate; }
.sx-sky { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 38% at 78% 22%, rgba(228, 82, 27, .34), transparent 70%),
    radial-gradient(50% 30% at 10% 60%, rgba(120, 24, 50, .25), transparent 70%),
    linear-gradient(180deg, #0B0708 0%, var(--night) 70%); }
.sx-globe { position: absolute; width: 560px; height: 560px; right: -230px; top: -50px; opacity: .95;
  -webkit-mask-image: linear-gradient(180deg, #000 44%, transparent 64%); mask-image: linear-gradient(180deg, #000 44%, transparent 64%); }

.sx-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }

.sx-stage { position: relative; height: 228px; perspective: 1200px; }
.sx-float { position: absolute; inset: 0; animation: sx-float 6s ease-in-out 1.4s infinite alternate; }
.sx-card { position: absolute; top: 8px; border-radius: 5.5% / 3.4%; box-shadow: 0 30px 50px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06); overflow: hidden; }
.sx-card img { display: block; width: 100%; height: auto; }
.sx-card-back { width: 118px; left: calc(50% - 128px); transform: rotate(-13deg); animation: sx-drop-back 1s cubic-bezier(.2, .85, .25, 1.12) .1s both; filter: brightness(.82); }
.sx-card-front { width: 132px; left: calc(50% - 30px); transform: rotate(8deg); animation: sx-drop-front 1.15s cubic-bezier(.2, .85, .25, 1.12) .25s both; }
/* one light sweep across the front card as it lands */
.sx-card-front::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .38) 50%, transparent 65%); transform: translateX(-120%); animation: sx-sheen 1.1s ease-out 1.2s both; }

@keyframes sx-drop-back { from { opacity: 0; transform: translateY(-70px) rotate(-34deg); } to { opacity: 1; transform: rotate(-13deg); } }
@keyframes sx-drop-front { from { opacity: 0; transform: translateY(-90px) rotate(32deg); } to { opacity: 1; transform: rotate(8deg); } }
@keyframes sx-sheen { to { transform: translateX(120%); } }
@keyframes sx-float { from { transform: translateY(0); } to { transform: translateY(-8px); } }

.sx-copy { position: relative; }
.sx h1, .sx h2, .sx h3 { font-variation-settings: normal; }
.sx h1 { font-family: var(--display); font-size: clamp(2.2rem, 10vw, 4.6rem); font-weight: 600; line-height: 1; letter-spacing: 0; word-spacing: .04em; margin: 0 0 12px; }
.sx h1 span { display: block; white-space: nowrap; }
.sx-sub { color: var(--dim); font-size: 1rem; line-height: 1.5; margin: 0 0 16px; max-width: 40ch; text-shadow: 0 0 10px var(--night), 0 0 18px var(--night); }

.sx-ribbon { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 10px 14px 10px 10px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .12);
  background: linear-gradient(95deg, #8E0E2B 0%, #3D1D46 55%, #B23A0B 100%); box-shadow: 0 12px 30px rgba(0, 0, 0, .35); }
.sx-ticket { width: 46px; height: 46px; flex: none; transform: rotate(-8deg); filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .35)); }
.sx-ribbon p { margin: 0; line-height: 1.3; }
.sx-ribbon span { display: block; color: var(--gold); font-size: .84rem; font-weight: 500; }
.sx-ribbon strong { display: block; color: #fff; font-size: 1.04rem; font-weight: 600; }

/* ---------- the sheet ---------- */
.sx-sheet { margin: 0 -16px; padding: 18px 16px 22px; border-radius: 24px 24px 0 0; border-top: 1px solid rgba(255, 255, 255, .14);
  background: linear-gradient(180deg, #2E2F35 0%, #1A1B20 46%, #131419 100%); box-shadow: 0 -18px 40px rgba(0, 0, 0, .45); }
.sx-zero { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 14px; color: var(--mint); font-weight: 500; font-size: 1.02rem; }
.sx-spark { width: 18px; height: 18px; fill: var(--mint); }

.sx-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.sx-field input, .sx-phone { width: 100%; min-height: 52px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .11); color: #fff; font: 500 1.02rem/1.2 var(--sans); }
.sx-field input { padding: 0 14px; }
.sx-body ::placeholder { color: rgba(255, 255, 255, .5); opacity: 1; }
.sx-phone { display: flex; align-items: center; margin-top: 10px; padding: 4px 4px 4px 14px; gap: 8px; }
.sx-phone > span { color: rgba(255, 255, 255, .7); font-weight: 500; }
.sx-phone input { flex: 1; min-width: 0; height: 44px; border: 0; background: transparent; color: #fff; font: inherit; padding: 0; }
.sx-phone input:focus-visible { outline: none; }
.sx-phone:focus-within { box-shadow: 0 0 0 2px var(--ember-hot); }
.sx-field input:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ember-hot); }
.sx [aria-invalid=true] { box-shadow: 0 0 0 2px var(--err); }
.sx-phone:has([aria-invalid=true]) { box-shadow: 0 0 0 2px var(--err); }
.sx-phone [aria-invalid=true] { box-shadow: none; }

.sx-go { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border: 0; border-radius: 10px; background: var(--ember); color: #fff; font: 600 1.02rem/1 var(--sans); text-decoration: none; cursor: pointer; box-shadow: 0 6px 18px rgba(228, 82, 27, .35); }
.sx-body a.sx-go { color: #fff; }
.sx-go:hover { background: var(--ember-hot); }
.sx-go:disabled { opacity: .8; cursor: progress; }
.sx-go-wide { width: 100%; min-height: 54px; font-size: 1.06rem; }

.sx-check { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; margin: 14px 0 0; color: var(--dim); font-size: .82rem; line-height: 1.45; cursor: pointer; }
.sx-check input { width: 19px; height: 19px; margin: 1px 0 0; accent-color: var(--ember); }
.sx-check:has([aria-invalid=true]) input { outline: 2px solid var(--err); outline-offset: 2px; box-shadow: none; }
.sx-err { color: var(--err); font-size: .86rem; font-weight: 500; margin: 6px 2px 0; }
.sx-fine { color: #85868F; font-size: .78rem; line-height: 1.45; margin: 12px 0 0; }
.sx-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sx-back h2 { font-family: var(--display); font-size: 1.8rem; font-weight: 600; margin: 0 0 4px; text-align: center; }
.sx-back > p:not(.sx-zero):not(.sx-fine) { color: var(--dim); text-align: center; margin: 0 0 16px; }
.sx-back .sx-fine { text-align: center; }
.sx-link { background: none; border: 0; padding: 0; color: #FFB38F; font: inherit; text-decoration: underline; cursor: pointer; }

/* ---------- below the fold ---------- */
.sx-band { padding: 56px 0 8px; background: var(--night); }
.sx-h2 { font-family: var(--display); font-size: clamp(1.8rem, 1.2rem + 2.6vw, 2.9rem); font-weight: 600; letter-spacing: 0; word-spacing: .05em; line-height: 1.05; margin: 0 0 22px; }
.sx-perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.sx-perks li { background: var(--tile); border: 1px solid var(--edge); border-radius: 18px; padding: 18px 16px; }
.sx-num { margin: 0 0 8px; font: 600 2.6rem/1 var(--display); color: #fff; }
.sx-perks h3 { font-size: 1rem; font-weight: 600; margin: 0 0 6px; color: var(--ember-hot); }
.sx-perks li > p:last-child { color: var(--dim); font-size: .86rem; line-height: 1.5; margin: 0; }
.sx-src { color: #7D7E87; font-size: .82rem; margin: 16px 0 0; max-width: 80ch; }

.sx-lede { color: var(--dim); max-width: 42ch; margin: -8px 0 22px; }
.sx-steps { list-style: none; counter-reset: s; margin: 0; padding: 0; }
.sx-steps li { counter-increment: s; position: relative; padding: 0 0 22px 56px; }
.sx-steps li::before { content: counter(s); position: absolute; left: 0; top: -2px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font: 600 1.05rem/1 var(--display); color: #fff; background: radial-gradient(circle at 30% 30%, var(--ember-hot), #9C2A08); box-shadow: 0 0 0 5px rgba(228, 82, 27, .14); }
.sx-steps li:not(:last-child)::after { content: ''; position: absolute; left: 18px; top: 44px; bottom: 6px; width: 2px; background: linear-gradient(var(--ember), transparent); }
.sx-steps h3 { font-size: 1.1rem; font-weight: 600; margin: 0 0 4px; }
.sx-steps p { color: var(--dim); margin: 0; font-size: .95rem; }

.sx-band-end { padding-bottom: 48px; }
.sx-end { max-width: 640px; }
.sx-safe { border-left: 3px solid var(--ember); padding: 4px 0 4px 14px; color: #D8D6D2; margin: 0 0 22px; }

.sx-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(5, 6, 8, .78); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--edge); }

/* ---------- wider screens ---------- */
@media (min-width: 600px) {
  .sx-sheet { margin: 0; border-radius: 22px; border: 1px solid rgba(255, 255, 255, .12); padding: 22px 22px 22px; }
  .sx-perks { grid-template-columns: repeat(4, 1fr); }
  .sx-dock { display: none; }
}
@media (min-width: 960px) {
  .sx-hero { padding: 56px 0 72px; }
  .sx-globe { width: 860px; height: 860px; left: -90px; right: auto; top: -40px; -webkit-mask-image: none; mask-image: none; }
  .sx h1 { font-size: 3.4rem; }
  .sx-sky { background:
    radial-gradient(40% 50% at 28% 46%, rgba(228, 82, 27, .30), transparent 70%),
    radial-gradient(32% 32% at 92% 62%, rgba(120, 24, 50, .2), transparent 70%),
    linear-gradient(180deg, #0B0708 0%, var(--night) 80%); }
  .sx-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 540px); gap: 48px; align-items: center; }
  /* cards scale with their column: a box with a fixed shape, cards placed in percentages of it */
  .sx-stage { height: auto; }
  .sx-float { position: relative; inset: auto; width: min(100%, 520px); aspect-ratio: 52 / 62; margin: 0 auto; }
  .sx-card-back { width: 44%; left: 4%; top: 8%; }
  .sx-card-front { width: 50%; left: 44%; top: 10%; }
  .sx-steps-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .sx-float, .sx-card, .sx-card-front::after { animation: none !important; }
  .sx-card-front::after { display: none; }
}