/* ============================================================
   Ad Somnia — shared design system
   Nocturnal indigo→magenta, lavender glow orb signature.
   ============================================================ */

:root {
  /* palette */
  --void:        #07021a;
  --deep:        #130734;
  --violet:      #3a1078;
  --magenta:     #7e1c83;
  --glow:        #a78bfa;
  --glow-bright: #d2c4ff;
  --periwinkle:  #8b8cf0;

  --text:        #f3effc;
  --muted:       #c0b1e2;
  --muted-dim:   #8b7cb2;

  --line:        rgba(167,139,250,0.16);
  --line-strong: rgba(167,139,250,0.30);
  --card:        rgba(255,255,255,0.045);
  --card-hover:  rgba(255,255,255,0.075);

  /* type */
  --display: "Sora", ui-sans-serif, system-ui, sans-serif;
  --body:    "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;

  /* scale */
  --w:       1080px;
  --pad:     clamp(20px, 5vw, 40px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--body);
  color: var(--text);
  line-height: 1.6;
  font-size: 17px;
  background:
    radial-gradient(1100px 760px at 50% -120px, #2c1268 0%, transparent 62%),
    radial-gradient(1000px 700px at 50% 100%, #7c1b6e 0%, transparent 60%),
    linear-gradient(180deg, var(--void) 0%, #0c0526 50%, #160a33 100%);
  background-repeat: no-repeat;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* faint drifting starfield, kept very low so the orb stays the star */
body::before {
  content: "";
  position: fixed;
  inset: -50%;
  background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, rgba(255,255,255,0.55), transparent),
    radial-gradient(1.5px 1.5px at 70% 65%, rgba(255,255,255,0.4),  transparent),
    radial-gradient(1px 1px   at 45% 80%, rgba(255,255,255,0.5),  transparent),
    radial-gradient(1px 1px   at 85% 18%, rgba(255,255,255,0.45), transparent),
    radial-gradient(1.5px 1.5px at 12% 70%, rgba(210,196,255,0.45), transparent),
    radial-gradient(1px 1px   at 60% 12%, rgba(255,255,255,0.4),  transparent);
  background-size: 600px 600px;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
  animation: drift 90s linear infinite;
}
@keyframes drift { to { transform: translateY(-200px); } }

a { color: var(--glow-bright); text-decoration: none; }
a:hover { color: #fff; }

:focus-visible {
  outline: 2px solid var(--glow-bright);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- layout primitives ---------- */
.wrap { width: 100%; max-width: var(--w); margin: 0 auto; padding-inline: var(--pad); }
.shell { position: relative; z-index: 1; }
section { padding-block: clamp(56px, 9vw, 104px); }

.eyebrow {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--glow);
  margin-bottom: 18px;
}

h1, h2, h3 { font-family: var(--display); line-height: 1.08; letter-spacing: -0.02em; font-weight: 700; }
h2 { font-size: clamp(28px, 4.4vw, 44px); }
h3 { font-size: 19px; letter-spacing: -0.01em; }

p.lead { color: var(--muted); font-size: clamp(17px, 2.1vw, 20px); max-width: 56ch; }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(10,4,30,0.55);
  border-bottom: 1px solid var(--line);
}
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: flex; align-items: center; gap: 11px; font-family: var(--display); font-weight: 700; font-size: 18px; letter-spacing: -0.01em; color: var(--text); }
.brand:hover { color: var(--text); }
.brand .mark {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 38% 32%, var(--glow-bright), var(--violet) 72%);
  box-shadow: 0 0 14px rgba(167,139,250,0.7), inset 0 0 6px rgba(255,255,255,0.4);
}
.brand .name i { font-style: normal; color: var(--glow); }
.nav-links { display: flex; align-items: center; gap: 8px; }
.nav-links a { color: var(--muted); font-weight: 500; font-size: 15px; padding: 8px 12px; border-radius: 9px; }
.nav-links a:hover { color: #fff; background: var(--card); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--display); font-weight: 600; font-size: 15.5px;
  padding: 13px 22px; border-radius: 999px; border: 0; cursor: pointer;
  transition: transform .18s ease, box-shadow .25s ease, background .2s ease;
}
.btn-primary {
  color: #1a0840;
  background: linear-gradient(135deg, var(--glow-bright), var(--glow) 60%, var(--periwinkle));
  box-shadow: 0 8px 30px rgba(139,140,240,0.45), 0 0 0 1px rgba(255,255,255,0.18) inset;
}
.btn-primary:hover { color: #1a0840; transform: translateY(-2px); box-shadow: 0 12px 38px rgba(139,140,240,0.6), 0 0 0 1px rgba(255,255,255,0.28) inset; }
.btn-ghost {
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--line-strong);
}
.btn-ghost:hover { color: #fff; background: var(--card-hover); transform: translateY(-2px); }
.btn svg { width: 18px; height: 18px; }

/* ---------- the orb (signature) ---------- */
.orb-stage { display: grid; place-items: center; padding-block: clamp(20px, 5vw, 44px); }
.orb {
  position: relative;
  width: clamp(168px, 34vw, 232px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid; place-items: center;
  background:
    radial-gradient(circle at 42% 36%, var(--glow-bright) 0%, var(--glow) 34%, #5a2bb0 66%, #2f1170 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.18) inset,
    0 18px 40px rgba(20,6,52,0.6),
    0 0 60px rgba(167,139,250,0.55),
    0 0 130px rgba(139,140,240,0.5);
  animation: orbPulse 5.5s ease-in-out infinite;
}
.orb::before {           /* outer halo */
  content: ""; position: absolute; inset: -26%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(167,139,250,0.32) 0%, transparent 62%);
  z-index: -1;
  animation: haloPulse 5.5s ease-in-out infinite;
}
.orb::after {            /* glossy top highlight */
  content: ""; position: absolute; inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 26%, rgba(255,255,255,0.45), transparent 46%);
  pointer-events: none;
}
.orb svg { width: 44%; height: 44%; filter: drop-shadow(0 0 10px rgba(255,255,255,0.85)); z-index: 1; }
.orb svg path { stroke: #fff; stroke-width: 2; stroke-linecap: round; fill: none; }

@keyframes orbPulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 0 1px rgba(255,255,255,0.18) inset, 0 18px 40px rgba(20,6,52,0.6), 0 0 55px rgba(167,139,250,0.5),  0 0 120px rgba(139,140,240,0.45); }
  50%      { transform: scale(1.035); box-shadow: 0 0 0 1px rgba(255,255,255,0.22) inset, 0 18px 40px rgba(20,6,52,0.6), 0 0 80px rgba(167,139,250,0.7), 0 0 165px rgba(139,140,240,0.6); }
}
@keyframes haloPulse { 0%,100% { opacity: 0.7; } 50% { opacity: 1; } }

.orb-sm { width: clamp(96px, 20vw, 128px); animation-duration: 6s; }
.orb-sm svg { width: 42%; height: 42%; }

/* ---------- hero ---------- */
.hero { text-align: center; padding-top: clamp(36px, 7vw, 68px); padding-bottom: clamp(20px, 5vw, 40px); }
.hero h1 {
  font-size: clamp(44px, 9vw, 88px);
  font-weight: 700;
  margin-bottom: 20px;
  background: linear-gradient(180deg, #ffffff 0%, #e4dcff 60%, var(--glow) 130%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p.lead { margin: 0 auto 8px; text-align: center; }
.hero .cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }
.hero-anim > * { opacity: 0; animation: rise .9s cubic-bezier(.2,.7,.2,1) forwards; }
.hero-anim > *:nth-child(1) { animation-delay: .05s; }
.hero-anim > *:nth-child(2) { animation-delay: .15s; }
.hero-anim > *:nth-child(3) { animation-delay: .25s; }
.hero-anim > *:nth-child(4) { animation-delay: .35s; }
.orb-stage.hero-anim { opacity: 1; animation: none; }
.orb-stage.hero-anim .orb { animation: rise .9s cubic-bezier(.2,.7,.2,1) .45s both, orbPulse 5.5s ease-in-out 1.4s infinite; }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- "what is" band ---------- */
.band { text-align: center; }
.band p { color: var(--muted); font-size: clamp(19px, 2.6vw, 26px); line-height: 1.5; max-width: 24ch; margin: 0 auto; font-family: var(--display); font-weight: 500; letter-spacing: -0.01em; }
.band p em { font-style: normal; color: var(--glow-bright); }

/* ---------- steps (a real sequence — numbering earns its place) ---------- */
.steps { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); margin-top: 44px; }
.step {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 20px; padding: 28px 24px 30px;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.step:hover { transform: translateY(-4px); border-color: var(--line-strong); background: var(--card-hover); }
.step .num { font-family: var(--display); font-weight: 700; font-size: 14px; letter-spacing: 0.1em; color: var(--glow); }
.step .num::after { content: ""; display: block; width: 30px; height: 2px; margin-top: 12px; background: linear-gradient(90deg, var(--glow), transparent); border-radius: 2px; }
.step h3 { margin: 18px 0 8px; }
.step p { color: var(--muted); font-size: 15.5px; }

/* ---------- features grid ---------- */
.section-head { text-align: center; margin-bottom: 8px; }
.section-head p { color: var(--muted); margin: 14px auto 0; max-width: 50ch; }
.features { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); margin-top: 44px; }
.feature {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 18px; padding: 24px;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.feature:hover { transform: translateY(-4px); border-color: var(--line-strong); background: var(--card-hover); }
.feature .ico {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 16px;
  background: linear-gradient(140deg, rgba(167,139,250,0.28), rgba(139,140,240,0.12));
  border: 1px solid var(--line-strong);
}
.feature .ico svg { width: 21px; height: 21px; stroke: var(--glow-bright); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.feature h3 { margin-bottom: 7px; }
.feature p { color: var(--muted); font-size: 15px; }

/* ---------- closing cta ---------- */
.closing { text-align: center; }
.closing h2 { margin: 24px auto 14px; max-width: 16ch; }
.closing p.lead { margin: 0 auto 30px; text-align: center; }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--line); padding-block: 48px; margin-top: 24px; }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 24px 48px; justify-content: space-between; align-items: flex-start; }
.foot .brand { margin-bottom: 12px; }
.foot .tag { color: var(--muted-dim); font-size: 14px; max-width: 34ch; }
.foot nav { display: flex; flex-direction: column; gap: 10px; }
.foot nav a { color: var(--muted); font-size: 15px; }
.foot nav a:hover { color: #fff; }
.foot .legal { width: 100%; border-top: 1px solid var(--line); margin-top: 18px; padding-top: 22px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; color: var(--muted-dim); font-size: 13px; }
.foot .legal p { max-width: 70ch; }

/* ============================================================
   Support + Privacy (document) styles
   ============================================================ */
.doc-hero { text-align: center; padding-top: clamp(40px, 7vw, 72px); padding-bottom: clamp(8px, 3vw, 24px); }
.doc-hero h1 { font-size: clamp(38px, 7vw, 60px); margin: 22px 0 16px; background: linear-gradient(180deg,#fff,#e4dcff 70%,var(--glow) 130%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.doc-hero p.lead { margin: 0 auto; text-align: center; }

.contact-card {
  max-width: 640px; margin: 0 auto;
  background: var(--card); border: 1px solid var(--line-strong);
  border-radius: 22px; padding: 30px;
  display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: center; justify-content: space-between;
}
.contact-card .ct-label { font-family: var(--display); font-weight: 600; font-size: 14px; letter-spacing: 0.04em; color: var(--glow); margin-bottom: 6px; }
.contact-card .ct-mail { font-family: var(--display); font-size: clamp(20px,3vw,26px); font-weight: 600; color: var(--text); }
.contact-card .ct-mail:hover { color: var(--glow-bright); }
.contact-card .ct-note { color: var(--muted-dim); font-size: 14px; margin-top: 6px; }

/* FAQ */
.faq-wrap { max-width: 760px; margin: 0 auto; }
.faq-group { margin-top: 44px; }
.faq-group > h2 { font-size: clamp(22px, 3vw, 28px); margin-bottom: 6px; }
.faq-group > .gl { color: var(--muted-dim); font-size: 14px; margin-bottom: 18px; }
details.faq {
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--card); margin-bottom: 12px; overflow: hidden;
  transition: border-color .2s ease, background .2s ease;
}
details.faq[open] { border-color: var(--line-strong); background: var(--card-hover); }
details.faq summary {
  cursor: pointer; list-style: none; padding: 18px 22px;
  font-family: var(--display); font-weight: 600; font-size: 16.5px; color: var(--text);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary .chev { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; color: var(--glow); transition: transform .25s ease; }
details.faq[open] summary .chev { transform: rotate(180deg); }
details.faq summary .chev svg { width: 13px; height: 13px; stroke: currentColor; stroke-width: 2.4; fill: none; stroke-linecap: round; }
details.faq .ans { padding: 0 22px 20px; color: var(--muted); font-size: 15.5px; }
details.faq .ans p + p { margin-top: 12px; }
details.faq .ans ul { margin: 12px 0 0; padding-left: 20px; }
details.faq .ans li { margin-bottom: 7px; }
details.faq .ans strong { color: var(--text); font-weight: 600; }
.ui-chip { font-family: var(--display); font-size: 13px; font-weight: 600; color: var(--glow-bright); background: rgba(167,139,250,0.12); border: 1px solid var(--line); padding: 1px 8px; border-radius: 7px; white-space: nowrap; }

/* prose (privacy) */
.prose { max-width: 760px; margin: 0 auto; }
.prose h2 { font-size: clamp(21px, 3vw, 27px); margin: 40px 0 12px; }
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--muted); margin-bottom: 14px; }
.prose ul { color: var(--muted); margin: 0 0 16px; padding-left: 22px; }
.prose li { margin-bottom: 8px; }
.prose strong { color: var(--text); font-weight: 600; }
.prose code, .ans code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.86em;
  color: var(--glow-bright);
  background: rgba(167,139,250,0.12);
  border: 1px solid var(--line);
  padding: 1px 6px;
  border-radius: 6px;
  word-break: break-word;
}
.prose .updated { color: var(--muted-dim); font-size: 14px; }
.notice {
  background: rgba(167,139,250,0.10); border: 1px solid var(--line-strong);
  border-radius: 14px; padding: 18px 20px; margin: 0 auto 32px; max-width: 760px;
  color: var(--muted); font-size: 14.5px;
}
.notice strong { color: var(--glow-bright); }

/* ---------- responsive ---------- */
@media (max-width: 760px) {
  .steps, .features { grid-template-columns: 1fr; }
  .nav-links a:not(.btn) { display: none; }       /* keep nav tidy on phones */
  .foot .wrap { flex-direction: column; }
  .contact-card { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; scroll-behavior: auto; transition: none !important; }
  .hero-anim > *, .orb-stage.hero-anim .orb { opacity: 1 !important; transform: none !important; }
}