@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root{
  --ink:#10213f;
  --muted:#65738a;
  --line:#dce5f1;
  --surface:#ffffff;
  --bg:#f5f8fc;
  --navy:#0c2344;
  --blue:#1769e0;
  --cyan:#22a7c9;
  --green:#15966b;
  --red:#d94b5d;
  --shadow:0 18px 55px rgba(16,33,63,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:
    radial-gradient(circle at 90% 5%,rgba(34,167,201,.09),transparent 30%),
    radial-gradient(circle at 5% 90%,rgba(23,105,224,.06),transparent 28%),
    var(--bg);
  font-family:"DM Sans",sans-serif;
}
button{font:inherit}
.app-shell{min-height:100vh}
.topbar{
  height:78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 5vw;
  border-bottom:1px solid rgba(220,229,241,.8);
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(14px);
  position:sticky;
  top:0;
  z-index:50;
}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{
  width:40px;height:40px;border-radius:12px;
  display:grid;place-items:center;
  color:white;font:700 21px "Space Grotesk";
  background:linear-gradient(145deg,var(--blue),var(--cyan));
  box-shadow:0 8px 20px rgba(23,105,224,.25)
}
.brand-name{font:700 20px "Space Grotesk";letter-spacing:.08em}
.brand-sub{font-size:11px;color:var(--muted);margin-top:2px}
.top-status{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--muted)}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 5px rgba(21,150,107,.10)}
.rural-pill,.tag{
  font-size:10px;font-weight:700;letter-spacing:.08em;
  padding:6px 9px;border-radius:20px;background:#edf5ff;color:var(--blue)
}
main{max-width:1400px;margin:auto;padding:0 5vw 40px}
.screen{display:none;min-height:calc(100vh - 160px);padding:65px 0 35px}
.active-screen{display:block;animation:screenIn .55s ease both}
@keyframes screenIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

.hero-grid{
  min-height:calc(100vh - 160px);
  display:grid;grid-template-columns:1.02fr .98fr;align-items:center;gap:5vw
}
.eyebrow{color:var(--blue);font-size:11px;font-weight:700;letter-spacing:.15em}
.hero-copy h1,h2{font-family:"Space Grotesk",sans-serif}
.hero-copy h1{
  font-size:clamp(43px,5.4vw,78px);line-height:1.02;
  margin:20px 0;letter-spacing:-.055em
}
.hero-copy h1 span{color:var(--blue)}
.hero-text{max-width:590px;color:var(--muted);line-height:1.75;font-size:17px}
.primary-btn,.secondary-btn,.outline-btn,.nav-btn{
  border:0;cursor:pointer;transition:.25s ease
}
.primary-btn{
  background:var(--navy);color:white;border-radius:12px;
  padding:15px 20px;display:inline-flex;gap:18px;align-items:center;
  font-weight:700;box-shadow:0 12px 25px rgba(12,35,68,.17)
}
.primary-btn:hover{transform:translateY(-2px);box-shadow:0 16px 30px rgba(12,35,68,.23)}
.primary-btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.primary-btn .arrow{font-size:18px}
.primary-btn.full{width:100%;justify-content:center;margin-top:15px}
.secondary-btn,.outline-btn{
  padding:12px 17px;border-radius:10px;background:#edf5ff;color:var(--blue);font-weight:700
}
.outline-btn{background:white;border:1px solid var(--line);color:var(--ink)}
.full-alt{width:100%;margin-top:10px}
.hero-meta{display:flex;gap:30px;margin-top:55px}
.hero-meta div{display:grid;gap:5px}
.hero-meta strong{color:var(--blue);font:700 11px "Space Grotesk"}
.hero-meta span{font-size:12px;color:var(--muted)}
.retina-visual{min-height:560px;position:relative;display:grid;place-items:center}
.retina-ring{
  width:min(500px,75vw);aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;
  background:conic-gradient(from 30deg,#b7e6f0,#1769e0,#8dd8e5,#d7eff8,#1769e0);
  box-shadow:0 30px 90px rgba(23,105,224,.22);
  animation:slowSpin 18s linear infinite
}
.retina-core{
  width:82%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 47% 42%,#c7edf0 0 7%,#7eced7 9%,#317da6 35%,#102c57 70%,#071a35 100%);
  display:grid;place-items:center;box-shadow:inset 0 0 80px rgba(0,0,0,.25);overflow:hidden
}
.retina-placeholder{color:white;text-align:center;display:grid;gap:7px;opacity:.92;animation:breathe 3s ease-in-out infinite}
.retina-icon{font-size:64px}
.retina-placeholder span{font:700 14px "Space Grotesk";letter-spacing:.16em}
.retina-placeholder small{color:#c7d9ef}
@keyframes slowSpin{to{transform:rotate(360deg)}}
@keyframes breathe{50%{transform:scale(1.04);opacity:1}}
.floating-card{
  position:absolute;display:flex;gap:10px;align-items:center;
  padding:12px 15px;border:1px solid rgba(255,255,255,.7);
  background:rgba(255,255,255,.88);backdrop-filter:blur(12px);
  border-radius:13px;box-shadow:var(--shadow);animation:float 4s ease-in-out infinite
}
.floating-card strong,.floating-card small{display:block}
.floating-card strong{font-size:12px}
.floating-card small{font-size:10px;color:var(--muted);margin-top:3px}
.mini-icon{color:var(--green);font-weight:700}
.card-quality{left:0;top:23%}
.card-xai{right:0;bottom:20%;animation-delay:-1.5s}
@keyframes float{50%{transform:translateY(-8px)}}

.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:35px}
.section-head h2{font-size:clamp(32px,4vw,52px);line-height:1.05;letter-spacing:-.045em;margin:13px 0;max-width:850px}
.section-head p{color:var(--muted);margin:0}
.step-count{font:700 18px "Space Grotesk";color:var(--blue)}
.step-count span{color:#aab7c8;font-size:12px}
.acquisition-grid,.gateway-layout,.review-grid,.report-layout{display:grid;grid-template-columns:1fr 1fr;gap:25px}
.upload-panel,.preview-panel,.scan-card,.quality-panel,.ai-result-card,.review-card,.report-card,.next-card{
  background:rgba(255,255,255,.86);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow)
}
.upload-panel,.preview-panel{padding:25px}
.upload-zone{
  min-height:360px;border:2px dashed #b9c9dc;border-radius:16px;
  display:grid;place-items:center;align-content:center;text-align:center;
  transition:.25s ease;cursor:pointer
}
.upload-zone.drag{border-color:var(--blue);background:#f1f7ff}
.upload-icon{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:#eaf3ff;color:var(--blue);font-size:25px}
.upload-zone h3{margin:16px 0 5px;font-family:"Space Grotesk"}
.upload-zone p{margin:0 0 17px;color:var(--muted);font-size:13px}
.file-name{margin-top:15px;color:var(--muted);font-size:11px;max-width:85%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.panel-label,.result-label{color:#8593a7;font-size:10px;font-weight:700;letter-spacing:.14em}
.image-preview,.scan-image,.visual-image{
  margin-top:12px;min-height:390px;border-radius:15px;overflow:hidden;
  background:linear-gradient(145deg,#071a35,#123e67);position:relative
}
.preview-empty{height:390px;display:grid;place-items:center;align-content:center;color:#9db0c8;text-align:center}
.preview-empty span{font-size:70px;opacity:.3}
.preview-empty p{font-size:13px}
.preview-img{width:100%;height:100%;min-height:390px;object-fit:contain;display:block}
.scan-card{padding:15px;overflow:hidden;position:relative}
.scan-image{margin:0;min-height:510px;background-size:contain;background-repeat:no-repeat;background-position:center}
.scan-line{position:absolute;left:15px;right:15px;height:2px;top:15%;background:rgba(34,220,202,.9);box-shadow:0 0 20px #22dccb;animation:scan 2.7s ease-in-out infinite}
@keyframes scan{50%{top:83%}}
.scan-label{position:absolute;left:30px;bottom:27px;color:white;font:700 10px "Space Grotesk";letter-spacing:.12em}
.pulse{display:inline-block;width:7px;height:7px;background:#31e5c4;border-radius:50%;margin-right:7px;box-shadow:0 0 0 5px rgba(49,229,196,.12)}
.quality-panel{padding:28px}
.quality-status{display:flex;align-items:center;gap:14px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.shield{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;background:#e8f8f2;color:var(--green);font-size:24px;font-weight:700}
.quality-status strong,.quality-status span{display:block}
.quality-status strong{font:700 16px "Space Grotesk"}
.quality-status span{color:var(--muted);font-size:12px;margin-top:4px}
.metric-list{padding:15px 0}
.metric{display:flex;justify-content:space-between;padding:15px 0;border-bottom:1px solid #edf1f6;font-size:13px}
.metric strong{color:var(--green)}
.gateway-result{margin-top:20px;padding:15px;background:#edf9f5;border-radius:13px;display:flex;gap:12px}
.gateway-result>span{color:var(--green);font-weight:700}
.gateway-result strong,.gateway-result small{display:block}
.gateway-result strong{font-size:12px}
.gateway-result small{color:var(--muted);margin-top:3px;font-size:11px}

.analysis-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.analysis-card{padding:25px;background:white;border:1px solid var(--line);border-radius:18px;min-height:230px}
.analysis-number{color:#a6b5c8;font-size:10px;font-weight:700}
.analysis-icon{color:var(--blue);font-size:30px;margin:25px 0 18px}
.analysis-card h3{font:700 17px "Space Grotesk";margin:0 0 7px}
.analysis-card p{color:var(--muted);font-size:12px;min-height:46px}
.analysis-state{display:inline-block;margin-top:12px;font-size:9px;font-weight:700;color:var(--green);letter-spacing:.12em}
.result-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:22px}
.result-strip div{padding:18px;background:white;border:1px solid var(--line);border-radius:14px}
.result-strip span,.result-strip strong{display:block}
.result-strip span{font-size:10px;color:var(--muted);letter-spacing:.08em}
.result-strip strong{margin-top:6px;font-size:14px}

.xai-grid{display:grid;grid-template-columns:1fr 1fr;gap:25px}
.visual-card{background:white;padding:15px;border-radius:20px;border:1px solid var(--line);box-shadow:var(--shadow)}
.visual-title{display:flex;justify-content:space-between;font-size:10px;font-weight:700;letter-spacing:.1em;padding:6px 4px 12px}
.tag.hot{background:#fff0f1;color:var(--red)}
.visual-image{margin:0;min-height:430px;background-size:contain;background-repeat:no-repeat;background-position:center}
.gradcam-demo{
  background:
    radial-gradient(circle at 65% 33%,rgba(255,65,75,.95) 0 5%,rgba(255,150,0,.75) 10%,transparent 24%),
    radial-gradient(circle at 38% 62%,rgba(255,80,0,.65),transparent 24%),
    radial-gradient(circle at 72% 70%,rgba(255,210,0,.55),transparent 20%),
    radial-gradient(circle at center,#497d86,#102b4a 70%)
}
.heat-blob{position:absolute;border-radius:50%;filter:blur(15px);animation:heat 2.5s ease-in-out infinite alternate}
.blob-1{width:120px;height:120px;left:55%;top:25%;background:rgba(255,50,60,.55)}
.blob-2{width:90px;height:90px;left:27%;top:54%;background:rgba(255,120,0,.45);animation-delay:.5s}
.blob-3{width:75px;height:75px;right:15%;bottom:18%;background:rgba(255,220,0,.4);animation-delay:1s}
@keyframes heat{to{transform:scale(1.13);opacity:.75}}
.evidence-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:20px}
.evidence-strip>div{padding:17px;border:1px solid var(--line);border-radius:14px;background:white;display:flex;gap:12px}
.evidence-icon{color:var(--blue);font-size:18px}
.evidence-strip strong,.evidence-strip small{display:block}
.evidence-strip strong{font-size:12px}
.evidence-strip small{color:var(--muted);font-size:10px;line-height:1.5;margin-top:4px}

.ai-result-card{padding:30px;display:flex;flex-direction:column;justify-content:center;min-height:380px;background:linear-gradient(145deg,#0c2344,#123c69);color:white}
.big-grade{font:700 55px "Space Grotesk";margin:18px 0}
.confidence{display:flex;justify-content:space-between;padding:15px 0;border-top:1px solid rgba(255,255,255,.16);border-bottom:1px solid rgba(255,255,255,.16)}
.confidence span{color:#b8c9df;font-size:12px}
.confidence strong{font-size:15px}
.referral-badge{display:inline-block;width:fit-content;margin-top:22px;padding:9px 12px;border-radius:20px;background:rgba(255,255,255,.12);color:#dceeff;font-size:10px;font-weight:700;letter-spacing:.1em}
.review-card{padding:30px;display:flex;flex-direction:column;justify-content:center}
.review-icon{width:58px;height:58px;border-radius:50%;background:#eaf3ff;color:var(--blue);display:grid;place-items:center;font-size:25px}
.review-card h3{font:700 27px "Space Grotesk";margin:22px 0 10px}
.review-card p{color:var(--muted);line-height:1.65;font-size:13px;max-width:520px}
.review-actions{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.review-status{margin-top:18px;color:var(--muted);font-size:11px;padding:11px;background:#f5f8fc;border-radius:10px}

.report-card{overflow:hidden}
.report-header{display:flex;justify-content:space-between;padding:22px 25px;background:#0c2344;color:white}
.report-header strong,.report-header span{display:block}
.report-header strong{font:700 20px "Space Grotesk"}
.report-header span{color:#b8c9df;font-size:10px;margin-top:3px}
.report-ok{align-self:center;color:#8ce2c5!important;font-weight:700;letter-spacing:.08em}
.report-grid{display:grid;grid-template-columns:1fr 1fr}
.report-grid>div{padding:20px 25px;border-bottom:1px solid #edf1f6}
.report-grid span,.report-grid strong{display:block}
.report-grid span{color:var(--muted);font-size:11px}
.report-grid strong{margin-top:6px;font-size:14px}
.recommendation{margin:20px 25px;padding:18px;border-radius:13px;background:#edf5ff}
.recommendation span{display:block;color:var(--blue);font-size:9px;font-weight:700;letter-spacing:.12em}
.recommendation strong{display:block;margin-top:6px;font-size:13px}
.report-footer{padding:15px 25px;border-top:1px solid var(--line);color:var(--muted);font-size:10px;line-height:1.5}
.next-card{padding:30px;display:flex;flex-direction:column;justify-content:center}
.next-icon{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:#e8f8f2;color:var(--green);font-size:24px}
.next-card h3{font:700 27px "Space Grotesk";margin:20px 0 8px}
.next-card p{color:var(--muted);line-height:1.6;font-size:13px}

.navigation{display:flex;justify-content:space-between;align-items:center;padding:5px 0 25px}
.nav-btn{background:white;border:1px solid var(--line);padding:11px 15px;border-radius:10px;color:var(--ink);font-weight:600}
.nav-btn:disabled{opacity:.35;cursor:not-allowed}
.nav-dots{display:flex;gap:7px}
.nav-dot{width:7px;height:7px;border-radius:50%;background:#c8d4e2;transition:.25s}
.nav-dot.active{width:24px;border-radius:8px;background:var(--blue)}
footer{text-align:center;border-top:1px solid var(--line);padding:24px 5vw;color:var(--muted);font-size:11px}

@media(max-width:1000px){
  .hero-grid,.acquisition-grid,.gateway-layout,.review-grid,.report-layout,.xai-grid{grid-template-columns:1fr}
  .analysis-flow,.result-strip{grid-template-columns:1fr 1fr}
}
@media(max-width:700px){
  .topbar{padding:0 20px}
  .brand-sub,.top-status span:not(.status-dot):not(.rural-pill){display:none}
  main{padding:0 20px 30px}
  .hero-copy h1{font-size:44px}
  .screen{padding-top:40px}
  .section-head{align-items:start;gap:20px}
  .hero-meta{gap:15px;flex-wrap:wrap}
  .analysis-flow,.result-strip,.evidence-strip,.report-grid{grid-template-columns:1fr}
  .retina-ring{width:320px}
}

/* Language selector, accessible theme switch, and dark theme. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.header-control{font:600 12px "DM Sans",sans-serif;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:9px 10px;cursor:pointer;max-width:125px}
.theme-toggle{font-size:18px;min-width:39px;line-height:1;padding:9px}
.header-control:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
:root[data-theme="dark"]{color-scheme:dark;--ink:#e9f1ff;--muted:#a6b7ce;--line:#30445f;--surface:#17263b;--bg:#0a1424;--navy:#2766b7;--blue:#7bb3ff;--cyan:#68d6ed;--green:#5bdbac;--red:#ff8995;--shadow:0 18px 55px rgba(0,0,0,.27)}
[data-theme="dark"] .topbar{background:rgba(14,27,44,.95);border-bottom-color:var(--line)}
[data-theme="dark"] .upload-panel,[data-theme="dark"] .preview-panel,[data-theme="dark"] .scan-card,[data-theme="dark"] .quality-panel,[data-theme="dark"] .ai-result-card:not(.review-card),[data-theme="dark"] .review-card,[data-theme="dark"] .report-card,[data-theme="dark"] .next-card{border-color:var(--line)}
[data-theme="dark"] .upload-panel,[data-theme="dark"] .preview-panel,[data-theme="dark"] .scan-card,[data-theme="dark"] .quality-panel,[data-theme="dark"] .review-card,[data-theme="dark"] .report-card,[data-theme="dark"] .next-card,[data-theme="dark"] .analysis-card,[data-theme="dark"] .result-strip>div,[data-theme="dark"] .visual-card,[data-theme="dark"] .evidence-strip>div{background:var(--surface);color:var(--ink)}
[data-theme="dark"] .floating-card{background:rgba(23,38,59,.94);border-color:var(--line)}
[data-theme="dark"] .secondary-btn,[data-theme="dark"] .outline-btn,[data-theme="dark"] .nav-btn,[data-theme="dark"] .rural-pill,[data-theme="dark"] .tag,[data-theme="dark"] .review-status,[data-theme="dark"] .recommendation,[data-theme="dark"] .upload-icon,[data-theme="dark"] .review-icon{background:#233c5b;color:var(--ink);border-color:var(--line)}
[data-theme="dark"] .gateway-result{background:#173c35}
[data-theme="dark"] .metric,[data-theme="dark"] .report-grid>div{border-bottom-color:var(--line)}
[data-theme="dark"] .primary-btn{background:#2766b7;color:#fff}
[data-theme="dark"] .ai-result-card{background:linear-gradient(145deg,#102c4c,#183c65);color:#fff}
[data-theme="dark"] .report-header{background:#102c4c}
@media(max-width:700px){.topbar{height:auto;min-height:78px;gap:8px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}.top-status{gap:7px}.rural-pill{display:none}.brand-name{font-size:18px}.header-control{max-width:110px;padding:8px}}

.landmark-note{margin:12px 6px 4px;color:var(--muted);font-size:12px;line-height:1.5}