/* NeoVuo AI — dark product theme (used alongside Tailwind) */

:root {
  --ink-900: #070B18;
  --ink-800: #0B1124;
  --ink-700: #111936;
  --line: rgba(255,255,255,.08);
  --line-strong: rgba(255,255,255,.14);
  --indigo: #6366F1;
  --indigo-soft: #818CF8;
  --emerald: #10B981;
}

html { scroll-behavior: smooth; scroll-padding-top: 6.5rem; background: var(--ink-900); scrollbar-color: #312E81 var(--ink-900); }
body { overflow-x: hidden; }
::selection { background: rgba(99,102,241,.45); color: #fff; }
:focus-visible { outline: 2px solid var(--indigo-soft); outline-offset: 3px; }

/* Ambient page lighting */
.page-glow {
  position: fixed; inset: 0; pointer-events: none; z-index: -1;
  background:
    radial-gradient(900px 500px at 15% -5%, rgba(99,102,241,.16), transparent 60%),
    radial-gradient(800px 500px at 100% 10%, rgba(16,185,129,.08), transparent 60%);
}
.section-glow { position: absolute; inset: 10% 0 auto; height: 70%; pointer-events: none;
  background: radial-gradient(600px 300px at 50% 30%, rgba(99,102,241,.14), transparent 70%); }
.section-glow.alt { background: radial-gradient(600px 300px at 20% 40%, rgba(16,185,129,.08), transparent 70%); }

.text-gradient {
  background: linear-gradient(90deg, #A5B4FC, #818CF8 40%, #34D399);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------------- Buttons ---------------- */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  border-radius: .9rem; font-weight: 700; color: #fff;
  background: linear-gradient(180deg, #7C7FF5, #5B5EEA);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 10px 30px -10px rgba(99,102,241,.8);
  transition: transform .2s, box-shadow .2s, filter .2s;
}
.btn-primary:hover { transform: translateY(-1px); filter: brightness(1.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 14px 40px -10px rgba(99,102,241,.95); }
.btn-primary:active { transform: translateY(0) scale(.98); }
.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  border-radius: .9rem; font-weight: 700; color: #E2E8F0;
  background: rgba(255,255,255,.04); border: 1px solid var(--line-strong);
  transition: background .2s, border-color .2s;
}
.btn-ghost:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.25); }
.btn-light {
  display: inline-flex; align-items: center; gap: .55rem; padding: .8rem 1.3rem; border-radius: .8rem;
  background: #fff; color: #065F46; font-weight: 700; font-size: .9rem; transition: transform .2s;
}
.btn-light:hover { transform: translateY(-2px); }
.btn-shine { position: relative; overflow: hidden; }
.btn-shine::after {
  content: ""; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; pointer-events: none;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg); transition: left .7s ease;
}
.btn-shine:hover::after { left: 130%; }

/* ---------------- Navigation ---------------- */
.logo-mark {
  width: 2.25rem; height: 2.25rem; border-radius: .7rem; display: inline-flex; align-items: center; justify-content: center;
  color: #fff; background: linear-gradient(135deg, #6366F1, #10B981);
  box-shadow: 0 6px 20px -6px rgba(99,102,241,.8);
}
.nav-shell { border: 1px solid transparent; transition: background .3s, border-color .3s, box-shadow .3s; }
.nav-scrolled .nav-shell, #mobileMenu.nav-shell {
  background: rgba(11,17,36,.75); border-color: var(--line-strong);
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 20px 50px -20px rgba(0,0,0,.7);
}
.nav-link { color: #94A3B8; transition: color .2s, background .2s; }
.nav-link:hover { color: #fff; background: rgba(255,255,255,.05); }
.nav-link.active { color: #fff; background: rgba(99,102,241,.18); }

/* ---------------- Hero ---------------- */
.hero-grid {
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 20%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 20%, #000 20%, transparent 75%);
}
.hero-beam {
  position: absolute; top: -200px; left: 50%; width: 900px; height: 700px; transform: translateX(-50%); pointer-events: none;
  background: conic-gradient(from 180deg at 50% 0%, transparent 40%, rgba(99,102,241,.35) 50%, transparent 60%);
  filter: blur(40px); opacity: .7;
}
.announce {
  display: inline-flex; align-items: center; gap: .7rem; padding: .35rem .9rem .35rem .4rem; border-radius: 9999px;
  font-size: .8rem; font-weight: 600; color: #CBD5E1;
  background: rgba(255,255,255,.04); border: 1px solid var(--line-strong); transition: border-color .2s, background .2s;
}
.announce:hover { border-color: rgba(129,140,248,.5); background: rgba(99,102,241,.1); }
.announce-tag { padding: .15rem .55rem; border-radius: 9999px; background: linear-gradient(90deg, #6366F1, #10B981); color: #fff; font-size: .7rem; font-weight: 800; }

/* ---------------- Demo app window ---------------- */
.demo-glow {
  position: absolute; inset: 8% 5% -5%; border-radius: 3rem; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(99,102,241,.55), rgba(16,185,129,.35));
  filter: blur(80px); opacity: .45;
}
.app-window {
  border-radius: 1.5rem; overflow: hidden; background: rgba(11,17,36,.88);
  border: 1px solid var(--line-strong);
  box-shadow: 0 40px 120px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
}
.app-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1.1rem; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.02); }
.app-bar > div:first-child span { width: .7rem; height: .7rem; border-radius: 9999px; background: #334155; }
.app-bar > div:first-child span:nth-child(1) { background: #F87171; }
.app-bar > div:first-child span:nth-child(2) { background: #FBBF24; }
.app-bar > div:first-child span:nth-child(3) { background: #34D399; }
.app-url { display: flex; align-items: center; gap: .5rem; padding: .3rem .9rem; border-radius: .6rem; background: rgba(255,255,255,.04); border: 1px solid var(--line); color: #94A3B8; font-size: .75rem; font-family: 'JetBrains Mono', monospace; }
.app-side { padding: 1.25rem; border-bottom: 1px solid var(--line); }
.app-main { padding: 1.25rem; }
.app-results { padding: 1.25rem; border-top: 1px solid var(--line); }
@media (min-width: 1024px) {
  .app-side { border-bottom: 0; border-right: 1px solid var(--line); }
  .app-results { border-top: 0; border-left: 1px solid var(--line); }
}
.app-label { font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #64748B; margin-bottom: .8rem; }
.app-side > .space-y-2 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .5rem; }
.app-side > .space-y-2 > * + * { margin-top: 0; }
@media (min-width: 1024px) { .app-side > .space-y-2 { display: block; } .app-side > .space-y-2 > * + * { margin-top: .5rem; } }
.case-btn {
  width: 100%; display: flex; align-items: center; gap: .7rem; padding: .6rem; border-radius: .8rem;
  border: 1px solid transparent; transition: background .2s, border-color .2s;
}
.case-btn:hover { background: rgba(255,255,255,.04); }
.case-btn.active { background: rgba(99,102,241,.14); border-color: rgba(129,140,248,.4); }
.case-avatar { width: 2rem; height: 2rem; border-radius: .6rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .8rem; color: #C7D2FE; background: rgba(99,102,241,.2); }
@media (max-width: 640px) { .case-btn { flex-direction: column; text-align: center; } .case-btn .text-left { text-align: center; } .case-btn .text-xs { display: none; } }

.pipeline { list-style: none; padding: 0; margin: 0; }
.pipeline li { position: relative; display: flex; align-items: center; gap: .7rem; padding: .45rem 0; font-size: .8rem; color: #64748B; transition: color .3s; }
.pipeline li span { width: .65rem; height: .65rem; border-radius: 9999px; border: 2px solid #334155; flex-shrink: 0; transition: all .3s; }
.pipeline li.running { color: #C7D2FE; }
.pipeline li.running span { border-color: var(--indigo-soft); box-shadow: 0 0 0 4px rgba(129,140,248,.2); animation: pulseDot 1s infinite; }
.pipeline li.done { color: #CBD5E1; }
.pipeline li.done span { background: var(--emerald); border-color: var(--emerald); }
@keyframes pulseDot { 50% { box-shadow: 0 0 0 7px rgba(129,140,248,.05); } }

.fundus-stage {
  position: relative; aspect-ratio: 4/3; border-radius: 1rem; overflow: hidden;
  background: radial-gradient(circle at center, #140A0A, #000 75%); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
}
.fundus { height: 92%; width: auto; filter: drop-shadow(0 0 40px rgba(217,102,31,.25)); transition: filter .6s; }
.vessels path { transition: stroke .6s, stroke-width .6s; }
.fundus-stage.analysed .vessels path { stroke: #FCA5A5; }
.fundus-stage[data-case="2"] .vessels path { stroke-width: 6; }
.overlay { opacity: 0; transition: opacity .6s; }
.fundus-stage.analysed .overlay { opacity: 1; }
.zone-ring { fill: none; stroke: rgba(165,180,252,.7); stroke-width: 1.5; stroke-dasharray: 5 6; }
.zone-text { fill: rgba(199,210,254,.85); font: 700 13px 'JetBrains Mono', monospace; text-anchor: middle; }
.hotspot { fill: rgba(244,63,94,.35); stroke: #FB7185; stroke-width: 1.5; animation: hot 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes hot { 50% { transform: scale(1.25); opacity: .7; } }
.scan-sweep {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(129,140,248,.0) 40%, rgba(129,140,248,.35) 49%, rgba(165,180,252,.9) 50%, transparent 51%);
  background-size: 100% 220%;
}
.fundus-stage.scanning .scan-sweep { opacity: 1; animation: sweep 1.4s linear infinite; }
@keyframes sweep { from { background-position: 0 100%; } to { background-position: 0 -20%; } }
.fundus-status {
  position: absolute; left: .8rem; bottom: .8rem; right: .8rem; padding: .55rem .8rem; border-radius: .7rem;
  font: 500 .72rem 'JetBrains Mono', monospace; color: #CBD5E1;
  background: rgba(7,11,24,.75); border: 1px solid var(--line); backdrop-filter: blur(8px);
}

.result-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 220px; border: 1px dashed var(--line-strong); border-radius: 1rem; padding: 1.5rem; }
.result-body { animation: fadeIn .5s ease-out both; }
.risk-pill { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .8rem; border-radius: 9999px; font-size: .75rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.risk-pill::before { content: ""; width: .5rem; height: .5rem; border-radius: 9999px; background: currentColor; }
.risk-low { color: #6EE7B7; background: rgba(16,185,129,.12); border: 1px solid rgba(16,185,129,.3); }
.risk-moderate { color: #FCD34D; background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.3); }
.risk-high { color: #FDA4AF; background: rgba(244,63,94,.12); border: 1px solid rgba(244,63,94,.35); }
.result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: 1rem; }
.result-grid > div { padding: .75rem .9rem; border-radius: .8rem; background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.result-grid dt { font-size: .65rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #64748B; }
.result-grid dd { font-size: 1.05rem; font-weight: 800; color: #fff; margin-top: .2rem; }
.bar-row { font-size: .75rem; color: #94A3B8; }
.bar-row .bar { height: .4rem; border-radius: 9999px; background: rgba(255,255,255,.06); overflow: hidden; margin-top: .35rem; }
.bar-row .bar > span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #6366F1, #34D399); transition: width 1s cubic-bezier(.2,.8,.2,1); }
.recommend { margin-top: 1.1rem; padding: .9rem 1rem; border-radius: .9rem; background: linear-gradient(135deg, rgba(99,102,241,.15), rgba(16,185,129,.08)); border: 1px solid rgba(129,140,248,.25); }

/* ---------------- Trust strip ---------------- */
.supporter-logo { display: flex; align-items: center; justify-content: center; height: 3.5rem; padding: .5rem .9rem; border-radius: .9rem; background: rgba(255,255,255,.92); transition: transform .2s; }
.supporter-logo:hover { transform: translateY(-2px); }
.supporter-logo img { max-height: 100%; width: auto; max-width: 8rem; object-fit: contain; }
.highlights-strip { mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee { display: flex; width: max-content; animation: marquee 36s linear infinite; }
.highlights-strip:hover .marquee { animation-play-state: paused; }
.marquee-track { display: flex; gap: 2.75rem; padding-right: 2.75rem; list-style: none; margin: 0; }
.marquee-track li { display: flex; align-items: center; gap: .6rem; white-space: nowrap; color: #94A3B8; font-weight: 600; font-size: .9rem; }
.marquee-track li i { color: var(--indigo-soft); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------------- Sections & bento ---------------- */
.section-head { max-width: 46rem; margin: 0 auto 3.5rem; text-align: center; }
.section-head h2 { margin-top: 1.25rem; font-size: clamp(2rem, 4.5vw, 3.25rem); line-height: 1.1; font-weight: 800; letter-spacing: -.03em; color: #fff; }
.section-head p { margin-top: 1.1rem; color: #94A3B8; font-size: 1.1rem; line-height: 1.7; }
.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem; padding: .4rem .9rem; border-radius: 9999px;
  font-size: .72rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  background: color-mix(in srgb, currentColor 10%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
}
.eyebrow::before { content: ""; width: .4rem; height: .4rem; border-radius: 9999px; background: currentColor; box-shadow: 0 0 10px currentColor; }

.bento-card, .step-card, .supervisor-card {
  position: relative; isolation: isolate; display: flex; flex-direction: column;
  padding: 1.75rem; border-radius: 1.5rem;
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  border: 1px solid var(--line);
  transition: border-color .3s, transform .3s, background .3s;
}
.bento-card::before, .step-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 0%), rgba(129,140,248,.14), transparent 60%);
}
.bento-card:hover, .step-card:hover { border-color: rgba(129,140,248,.35); }
.bento-card:hover::before, .step-card:hover::before { opacity: 1; }
.bento-card.flex-row { flex-direction: row; }
.bento-icon { width: 2.75rem; height: 2.75rem; border-radius: .85rem; display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; border: 1px solid rgba(255,255,255,.06); }
.stat-xl { font-size: clamp(4rem, 9vw, 6.5rem); font-weight: 900; letter-spacing: -.05em; line-height: 1; color: #fff; }
.stat-lg { font-size: 3rem; font-weight: 900; letter-spacing: -.04em; line-height: 1; margin-top: 1.5rem; margin-bottom: .5rem;
  background: linear-gradient(135deg, #fff, #A5B4FC); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bento-card .stat-lg.mt-auto { margin-top: auto; padding-top: 1.5rem; }

.photo-card { overflow: hidden; padding: 2rem; }
.photo-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: .55; transition: transform .8s; }
.photo-card:hover img { transform: scale(1.04); }
.photo-card::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(180deg, rgba(7,11,24,.2), rgba(7,11,24,.92) 75%); }

.steps { counter-reset: step; }
.step-card { min-height: 15rem; }
@media (min-width: 1024px) {
  .step-card:not(:last-child)::after {
    content: ""; position: absolute; top: 3.1rem; right: -1rem; width: 1rem; height: 2px;
    background: linear-gradient(90deg, rgba(129,140,248,.6), transparent);
  }
}

.chip { display: inline-flex; align-items: center; padding: .3rem .7rem; border-radius: .6rem; font-size: .72rem; font-weight: 700; color: #C7D2FE; background: rgba(99,102,241,.12); border: 1px solid rgba(129,140,248,.22); }
.quote { margin-top: 1.5rem; padding: 1rem 1.2rem; border-left: 3px solid var(--indigo-soft); border-radius: .25rem .9rem .9rem .25rem; background: rgba(255,255,255,.03); color: #CBD5E1; font-style: italic; line-height: 1.6; }
.sdg { padding: .35rem .6rem; border-radius: .5rem; color: #fff; font-size: .72rem; font-weight: 800; }
.image-card { padding: 0; overflow: hidden; background: #fff; min-height: 14rem; }
.image-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.image-card:hover img { transform: scale(1.04); }
.image-card-label { position: absolute; left: 1rem; bottom: 1rem; display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .85rem; border-radius: .7rem; font-size: .8rem; font-weight: 700; color: #fff; background: rgba(7,11,24,.8); backdrop-filter: blur(8px); }

/* ---------------- Team ---------------- */
.supervisor-card { align-items: center; text-align: center; justify-content: center; background: linear-gradient(180deg, rgba(99,102,241,.14), rgba(255,255,255,.02)); border-color: rgba(129,140,248,.25); }
.supervisor-card .chip { align-self: center; }
.team-card { display: block; padding: .6rem .6rem 1rem; border-radius: 1.25rem; background: rgba(255,255,255,.03); border: 1px solid var(--line); transition: border-color .3s, transform .3s, background .3s; }
.team-card:hover, .team-card:focus-visible { border-color: rgba(129,140,248,.4); background: rgba(99,102,241,.08); transform: translateY(-3px); }
.team-photo { position: relative; display: block; aspect-ratio: 1; border-radius: .9rem; overflow: hidden; background: var(--ink-700); }
.team-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.35) contrast(1.05); transition: transform .5s, filter .5s; }
.team-card:hover .team-photo img, .team-card:focus-visible .team-photo img { transform: scale(1.06); filter: none; }
.team-photo::after {
  content: "\f06e"; font-family: "Font Awesome 6 Free"; font-weight: 900;
  position: absolute; right: .5rem; bottom: .5rem; width: 2rem; height: 2rem; border-radius: .6rem;
  display: flex; align-items: center; justify-content: center; font-size: .8rem; color: #fff; background: rgba(99,102,241,.9);
  opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s;
}
.team-card:hover .team-photo::after, .team-card:focus-visible .team-photo::after { opacity: 1; transform: none; }

/* ---------------- FAQ & survey ---------------- */
.faq-item { border-radius: 1rem; background: rgba(255,255,255,.03); border: 1px solid var(--line); transition: border-color .3s, background .3s; }
.faq-item:hover { border-color: var(--line-strong); }
.faq-icon { background: rgba(255,255,255,.05); color: #A5B4FC; transition: background .3s, color .3s; }
.faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.faq-answer > div { overflow: hidden; }
.faq-item.open { border-color: rgba(129,140,248,.4); background: rgba(99,102,241,.07); }
.faq-item.open .faq-answer { grid-template-rows: 1fr; }
.faq-item.open .faq-icon { background: var(--indigo); color: #fff; }
.faq-item.open .faq-icon i { transform: rotate(45deg); }
.survey-card { padding: 1.75rem; border-radius: 1.5rem; background: linear-gradient(135deg, rgba(16,185,129,.22), rgba(13,148,136,.08)); border: 1px solid rgba(52,211,153,.3); }

/* ---------------- CTA & forms ---------------- */
.cta-panel { border-radius: 2rem; background: linear-gradient(135deg, rgba(99,102,241,.16), rgba(11,17,36,.9) 55%, rgba(16,185,129,.1)); border: 1px solid var(--line-strong); }
.field-label { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #94A3B8; }
.field-dark {
  width: 100%; padding: .95rem 1.1rem; border-radius: .9rem; color: #fff; outline: none;
  background: rgba(7,11,24,.6); border: 1px solid var(--line-strong);
  transition: border-color .2s, box-shadow .2s;
}
.field-dark::placeholder { color: #475569; }
.field-dark:focus { border-color: var(--indigo-soft); box-shadow: 0 0 0 4px rgba(99,102,241,.2); }
.field-dark.invalid { border-color: #FB7185; box-shadow: 0 0 0 4px rgba(244,63,94,.15); }

@property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.glow-border { position: relative; }
.glow-border::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 1;
  background: linear-gradient(var(--angle), #818CF8, transparent 35%, transparent 65%, #34D399);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: rotateBorder 6s linear infinite;
}
@keyframes rotateBorder { to { --angle: 360deg; } }

/* ---------------- Footer, modal, misc ---------------- */
.footer-head { font-size: .72rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: #fff; margin-bottom: 1.1rem; }
.footer-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.footer-list a { color: #94A3B8; font-size: .92rem; transition: color .2s; }
.footer-list a:hover { color: #fff; }
.social-btn { width: 2.5rem; height: 2.5rem; border-radius: .75rem; display: inline-flex; align-items: center; justify-content: center; color: #94A3B8; background: rgba(255,255,255,.04); border: 1px solid var(--line); transition: all .2s; }
.social-btn:hover { color: #fff; background: var(--indigo); border-color: var(--indigo); }

.modal-panel { background: linear-gradient(180deg, #131B3A, #0B1124); border: 1px solid var(--line-strong); box-shadow: 0 40px 100px -20px rgba(0,0,0,.9); animation: modalIn .25s ease-out; }
@keyframes modalIn { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
.modal-link { width: 2.75rem; height: 2.75rem; border-radius: .8rem; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.05); border: 1px solid var(--line); color: #CBD5E1; transition: all .2s; }
.modal-link:hover { background: var(--indigo); color: #fff; transform: translateY(-2px); }

#backToTop.show { opacity: 1; pointer-events: auto; transform: none; }

.animate-fade-in { animation: fadeIn .7s ease-out both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; transition-delay: var(--d, 0ms); }
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* Collapsed FAQ rows must not leak padding */
.faq-answer > div { padding-bottom: 0 !important; }
.faq-answer p { padding-bottom: 1.5rem; }

/* ---------------- Secondary pages (privacy / ethics / terms) ---------------- */
.doc-card {
  position: relative; border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  transition: border-color .3s;
}
.doc-card:hover { border-color: rgba(129,140,248,.3); }
.doc-card-accent { background: linear-gradient(135deg, rgba(99,102,241,.16), rgba(16,185,129,.08)); border-color: rgba(129,140,248,.25); }
.doc-card strong { color: #fff; }
.doc-card li { color: #94A3B8; }