/* ── Academic AI Lab ── Navy & Amber scholarly design ────────────── */
/* Tokens */
:root {
  --navy-950: #0B1120; --navy-900: #0F172A; --navy-800: #1B2A4A;
  --navy-700: #253B5C; --navy-600: #334E74;
  --stone-50: #FAF8F5; --stone-100: #F5F2ED; --stone-200: #E9E4DC;
  --stone-300: #D4CDC2; --stone-400: #A69F95; --stone-500: #7D766C;
  --stone-600: #5D564C; --stone-700: #3E3830;
  --amber-50: #FFFBEB; --amber-100: #FEF3C7; --amber-200: #FDE68A;
  --amber-300: #FCD34D; --amber-400: #FBBF24; --amber-500: #F59E0B;
  --amber-600: #D97706; --amber-700: #B45309;
  --cyan-400: #22D3EE; --cyan-600: #0891B2;
  --success: #059669; --error: #DC2626;
  --glass-sm: rgba(255,255,255,0.06); --glass-md: rgba(255,255,255,0.10);
  --glass-lg: rgba(255,255,255,0.16); --glass-xl: rgba(255,255,255,0.22);
  --font-display: 'Fraunces','Georgia','Times New Roman',serif;
  --font-body: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-mono: 'JetBrains Mono','Fira Code',monospace;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;
  --space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;
  --space-16:64px;--space-20:80px;--space-24:96px;
  --max-w: 1200px; --r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:24px; --r-full:9999px;
  --radius-sm:6px; --radius-md:10px; --radius-lg:16px; --radius-xl:24px; --radius-full:9999px;
  --shadow-sm:0 1px 3px rgba(11,17,32,.06); --shadow-md:0 4px 14px rgba(11,17,32,.08);
  --shadow-lg:0 12px 40px rgba(11,17,32,.12); --shadow-xl:0 24px 64px rgba(11,17,32,.16);
  --shadow-glow:0 0 40px rgba(245,158,11,.15);
}

/* Skip link */
.skip-link { position:absolute; left:-9999px; z-index:999; padding:var(--space-3) var(--space-5); background:var(--navy-950); color:#fff; font-weight:700; border-radius:var(--r-md); }
.skip-link:focus { left:var(--space-4); top:var(--space-4); }

/* Base */
*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body { margin:0; font:400 1rem/1.55 var(--font-body); color:var(--stone-500); background:var(--stone-50); overflow-x:hidden; }
::selection { background:var(--amber-500); color:var(--navy-950); }
h1,h2,h3,h4 { font-family:var(--font-display); font-weight:600; line-height:1.1; color:var(--navy-950); margin:0 0 .5em; }
h1 { font-size:clamp(2.35rem,4.2vw,3.7rem); }
h2 { font-size:clamp(1.8rem,3.2vw,3.2rem); }
h3 { font-size:clamp(1.2rem,1.8vw,1.6rem); }
h4 { font-size:1.2rem; }
p { margin:0 0 1em; color:var(--stone-500); }
p:last-child { margin-bottom:0; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; height:auto; display:block; }

/* Utilities */
.container { width:min(100% - 40px,var(--max-w)); margin-inline:auto; }
.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; }
.label { display:inline-flex; align-items:center; gap:var(--space-2); font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.18em; color:var(--amber-600); margin-bottom:var(--space-3); }
.label::before { content:''; width:20px; height:2px; background:var(--amber-400); border-radius:999px; }
.label.light { color:var(--amber-300); }

/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2); padding:0 var(--space-6); min-height:48px; font:700 .9rem/1 var(--font-body); border-radius:var(--r-md); border:1px solid transparent; cursor:pointer; transition:all .25s cubic-bezier(.2,.9,.4,1); white-space:nowrap; position:relative; overflow:hidden; }
.btn:active { transform:scale(.97); }
.btn-primary { background:linear-gradient(135deg,var(--amber-400),var(--amber-600)); color:var(--navy-950); box-shadow:0 4px 16px rgba(245,158,11,.3); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(245,158,11,.4); }
.btn-secondary { background:var(--glass-lg); color:#fff; border-color:rgba(255,255,255,.2); backdrop-filter:blur(8px); }
.btn-secondary:hover { background:var(--glass-xl); transform:translateY(-2px); }
.btn-sm { min-height:42px; padding:0 var(--space-4); font-size:.85rem; }
.btn .arrow { display:inline-block; transition:transform .25s ease; }
.btn:hover .arrow { transform:translateX(4px); }

/* Header */
.site-header { position:sticky; top:0; z-index:100; display:flex; align-items:center; gap:var(--space-5); padding:var(--space-2) max(20px,calc((100vw - var(--max-w))/2)); background:rgba(6,10,22,.96); backdrop-filter:blur(20px) saturate(180%); border-bottom:1px solid rgba(255,255,255,.06); min-height:60px; }
.brand { display:flex; align-items:center; gap:var(--space-3); flex-shrink:0; }
.brand-mark { width:38px; height:38px; object-fit:contain; transition:transform .3s ease; }
.brand:hover .brand-mark { transform:scale(1.06) rotate(-3deg); }
.brand-text { display:flex; flex-direction:column; }
.brand-name { font:800 1.05rem/1.2 var(--font-body); color:#fff; }
.brand-tagline { font-size:.68rem; color:rgba(255,255,255,.68); letter-spacing:.02em; }
.site-nav { display:flex; align-items:center; gap:var(--space-1); margin-left:auto; }
.site-nav a { padding:var(--space-2) var(--space-3); font-size:.85rem; font-weight:600; color:rgba(255,255,255,.78); border-radius:var(--r-sm); transition:all .2s ease; }
.site-nav a:hover { color:#fff; background:var(--glass-sm); }
.site-nav a.nav-active { color:var(--amber-400); background:rgba(245,158,11,.08); }
.header-actions { display:flex; align-items:center; gap:var(--space-3); flex-shrink:0; }
.menu-toggle { display:none; background:transparent; border:1px solid rgba(255,255,255,.15); border-radius:var(--r-sm); padding:var(--space-2) var(--space-3); color:#fff; cursor:pointer; margin-left:auto; }
.menu-toggle:hover { background:var(--glass-sm); }
.menu-toggle svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }

/* Mobile drawer */
.nav-overlay { display:none; position:fixed; inset:0; z-index:98; background:rgba(11,17,32,.6); backdrop-filter:blur(4px); opacity:0; transition:opacity .3s ease; }
.nav-overlay.open { opacity:1; }
.mobile-drawer { display:none; position:fixed; top:0; right:0; bottom:0; z-index:99; width:min(340px,85vw); background:var(--navy-950); border-left:1px solid rgba(255,255,255,.06); padding:var(--space-6); transform:translateX(100%); transition:transform .35s cubic-bezier(.2,.9,.3,1); overflow-y:auto; }
.mobile-drawer.open { transform:translateX(0); }
.drawer-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-8); padding-bottom:var(--space-4); border-bottom:1px solid rgba(255,255,255,.06); }
.drawer-brand-name { color:#fff; font:800 1.05rem/1 var(--font-body); }
.drawer-close { width:36px; height:36px; display:grid; place-items:center; background:transparent; border:1px solid rgba(255,255,255,.12); border-radius:var(--r-sm); color:#fff; cursor:pointer; font-size:1.3rem; }
.drawer-close:hover { background:var(--glass-sm); }
.drawer-nav { display:flex; flex-direction:column; gap:var(--space-1); }
.drawer-nav a { display:flex; align-items:center; padding:var(--space-3) var(--space-4); font-size:1.05rem; font-weight:500; color:rgba(255,255,255,.72); border-radius:var(--r-sm); transition:all .2s; }
.drawer-nav a:hover { color:#fff; background:var(--glass-sm); }
.drawer-nav .btn { margin-top:var(--space-4); text-align:center; }

/* Hero */
.hero { position:relative; padding:var(--space-20) 0 var(--space-16); background:var(--navy-950); overflow:hidden; }
.hero::before { content:''; position:absolute; top:-30%; right:-10%; width:620px; height:620px; background:radial-gradient(circle,rgba(245,158,11,.06),transparent 60%); border-radius:50%; pointer-events:none; animation:heroOrb 8s ease-in-out infinite alternate; }
.hero::after { content:''; position:absolute; bottom:-20%; left:-15%; width:500px; height:500px; background:radial-gradient(circle,rgba(6,182,212,.05),transparent 60%); border-radius:50%; pointer-events:none; animation:heroOrb2 10s ease-in-out infinite alternate; }
@keyframes heroOrb { 0%{transform:translate(0,0) scale(1)} 100%{transform:translate(-80px,40px) scale(1.15)} }
@keyframes heroOrb2 { 0%{transform:translate(0,0) scale(1)} 100%{transform:translate(60px,-50px) scale(1.2)} }
.hero-grid-bg { position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px); background-size:60px 60px; pointer-events:none; }
.hero .container { position:relative; z-index:1; }
.hero-layout { display:grid; grid-template-columns:1.2fr .8fr; gap:var(--space-16); align-items:center; }
.hero h1 { color:#fff; max-width:680px; margin-bottom:var(--space-5); }
.hero h1 .highlight { background:linear-gradient(to right,var(--amber-300),var(--amber-500)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.hero-sub { font-size:1.06rem; color:rgba(255,255,255,.76); max-width:590px; margin-bottom:var(--space-6); line-height:1.65; }
.hero-actions { display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; margin-bottom:var(--space-10); }
.hero-actions-tight { margin-bottom:0; }

/* Hero search */
.hero-search { display:flex; align-items:center; background:var(--glass-md); border:1px solid rgba(255,255,255,.2); border-radius:var(--r-md); padding:5px; max-width:600px; margin-bottom:var(--space-4); transition:border-color .25s ease; }
.hero-search:focus-within { border-color:var(--amber-400); box-shadow:0 0 0 3px rgba(245,158,11,.1); }
.hero-search .search-icon { color:rgba(255,255,255,.58); flex-shrink:0; margin-left:var(--space-4); }
.hero-search input { flex:1; padding:var(--space-3); background:transparent; border:none; outline:none; color:#fff; font:400 1rem/1 var(--font-body); }
.hero-search input::placeholder { color:rgba(255,255,255,.5); }
.hero-search .btn { min-height:42px; padding:0 var(--space-5); flex-shrink:0; }

/* Source tags */
.hero-sources { display:flex; flex-wrap:wrap; gap:.35rem; margin-bottom:var(--space-5); }
.hero-sources span { font-size:.72rem; padding:.22rem .55rem; border-radius:var(--r-sm); background:var(--glass-sm); color:rgba(255,255,255,.66); border:1px solid rgba(255,255,255,.1); }

/* Preview card */
.tool-preview { background:rgba(255,255,255,.045); backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,.12); border-radius:var(--r-md); padding:var(--space-6); overflow:hidden; }
.tool-preview .preview-dot { width:8px; height:8px; border-radius:50%; background:var(--cyan-400); margin-bottom:var(--space-5); }
.preview-row { display:flex; justify-content:space-between; align-items:center; padding:var(--space-3) 0; border-bottom:1px solid rgba(255,255,255,.06); gap:var(--space-3); }
.preview-row:last-child { border-bottom:0; }
.preview-row .title { font-size:.92rem; font-weight:500; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.preview-row .meta { font-size:.72rem; color:rgba(255,255,255,.48); flex-shrink:0; font-family:var(--font-mono); }

/* Sections */
.section-padding { padding:var(--space-20) 0; }
.section-padding-sm { padding:var(--space-12) 0; }
.section-white { background:var(--stone-50); }
.section-light { background:var(--stone-100); }
.section-dark { background:var(--navy-950); }
.section-header { margin-bottom:var(--space-12); }
.section-header.center { text-align:center; max-width:680px; margin-inline:auto; }
.subtitle { font-size:1.05rem; color:var(--stone-400); margin-top:var(--space-3); }

/* Stats strip */
.stats-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-6); text-align:center; }
.stat-item { padding:var(--space-4); }
.stat-number { display:block; font:700 clamp(1.8rem,3vw,2.8rem)/1 var(--font-display); background:linear-gradient(135deg,var(--amber-300),var(--amber-600)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:var(--space-2); }
.stat-label { font-size:.82rem; color:var(--stone-400); font-weight:500; }

/* Steps */
.steps-grid { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:start; gap:var(--space-6); }
.step-card { text-align:center; padding:var(--space-8) var(--space-5); background:var(--stone-100); border-radius:var(--r-lg); }
.step-card h3 { margin-bottom:var(--space-3); }
.step-card p { font-size:.9rem; }
.step-num { display:grid; width:44px; height:44px; place-items:center; margin:0 auto var(--space-4); border-radius:50%; background:linear-gradient(135deg,var(--amber-400),var(--amber-600)); color:var(--navy-950); font-weight:800; font-size:1.1rem; }
.step-connector { display:grid; place-items:center; padding-top:var(--space-10); }
.step-connector span { display:block; width:2px; height:40px; background:linear-gradient(to bottom,var(--amber-400),transparent); }

/* Source grid */
.source-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-4); }
.source-chip { display:flex; flex-direction:column; padding:var(--space-5); background:var(--stone-50); border-radius:var(--r-md); border:1px solid var(--stone-200); }
.source-chip strong { color:var(--navy-950); margin-bottom:var(--space-1); }
.source-chip span { font-size:.82rem; color:var(--stone-400); }

/* Benefit grid */
.benefit-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-6); }
.benefit-card { padding:var(--space-8); background:var(--stone-50); border-radius:var(--r-lg); border:1px solid var(--stone-200); text-align:center; transition:transform .25s ease,box-shadow .25s ease; }
.benefit-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }
.benefit-icon { display:grid; width:48px; height:48px; place-items:center; margin:0 auto var(--space-5); border-radius:var(--r-md); background:rgba(245,158,11,.1); color:var(--amber-600); }
.benefit-icon svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; }
.benefit-card h3 { margin-bottom:var(--space-2); font-size:1.1rem; }
.benefit-card p { font-size:.88rem; }

/* Split layout */
.split-layout { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-16); align-items:center; }
.section-dark h2 { color:#fff; }
.section-dark p:not(.label) { color:rgba(255,255,255,.65); }

/* Compact service grid */
.compact-service-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); }
.compact-service { padding:var(--space-5); background:var(--glass-md); border-radius:var(--r-md); border:1px solid rgba(255,255,255,.08); }
.compact-service .cs-number { font-family:var(--font-mono); font-size:.75rem; color:var(--amber-400); margin-bottom:var(--space-2); display:block; }
.compact-service h4 { color:#fff; font-family:var(--font-body); font-weight:600; font-size:.95rem; margin-bottom:var(--space-1); }
.compact-service p { font-size:.82rem; color:rgba(255,255,255,.55); }

/* Card grid */
.card-grid { display:grid; gap:var(--space-6); }
.card-grid.col-3 { grid-template-columns:repeat(3,1fr); }
.card { padding:var(--space-6); background:var(--stone-100); border-radius:var(--r-lg); border:1px solid var(--stone-200); }
.section-dark .card { background:var(--glass-md); border-color:rgba(255,255,255,.1); }
.section-dark .card h3 { color:#fff; }
.section-dark .card p { color:rgba(255,255,255,.6); }

/* CTA */
.cta-section { padding:var(--space-20) 0; background:var(--navy-950); text-align:center; position:relative; overflow:hidden; }
.cta-section::before { content:''; position:absolute; top:50%; left:50%; width:800px; height:800px; transform:translate(-50%,-50%); background:radial-gradient(circle,rgba(245,158,11,.04),transparent 60%); pointer-events:none; }
.cta-section h2 { color:#fff; max-width:640px; margin:0 auto var(--space-6); }
.cta-actions { display:flex; gap:var(--space-4); justify-content:center; flex-wrap:wrap; }

/* Footer */
.site-footer { padding:var(--space-16) 0 var(--space-8); background:var(--navy-900); border-top:1px solid rgba(255,255,255,.05); }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:var(--space-10); margin-bottom:var(--space-12); }
.footer-brand p { font-size:.88rem; color:rgba(255,255,255,.5); margin-top:var(--space-3); }
.footer-col h4 { font-family:var(--font-body); font-weight:700; font-size:.88rem; color:#fff; margin-bottom:var(--space-4); }
.footer-col a { display:block; font-size:.85rem; color:rgba(255,255,255,.6); padding:var(--space-1) 0; transition:color .2s; }
.footer-col a:hover { color:var(--amber-400); }
.footer-bottom { display:flex; align-items:center; justify-content:space-between; padding-top:var(--space-8); border-top:1px solid rgba(255,255,255,.06); font-size:.82rem; color:rgba(255,255,255,.4); }
.social-links { display:flex; gap:var(--space-3); }
.social-link { display:grid; width:34px; height:34px; place-items:center; border-radius:50%; border:1px solid rgba(255,255,255,.15); color:rgba(255,255,255,.55); font-size:.8rem; font-weight:700; transition:all .2s; }
.social-link:hover { border-color:var(--amber-400); color:var(--amber-400); }

/* Floating actions */
.float-actions { position:fixed; bottom:var(--space-8); right:var(--space-8); z-index:50; display:flex; flex-direction:column; gap:var(--space-3); }
.float-btn { width:44px; height:44px; display:grid; place-items:center; border-radius:50%; border:1px solid rgba(255,255,255,.15); background:rgba(11,17,32,.85); backdrop-filter:blur(12px); color:rgba(255,255,255,.7); cursor:pointer; transition:all .25s ease; }
.float-btn svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.float-btn:hover { background:var(--navy-950); color:#fff; border-color:var(--amber-400); }

/* Responsive */
@media (max-width: 1024px) {
  .hero-layout { grid-template-columns:1fr; gap:var(--space-10); }
  .hero-tool .hero-layout { grid-template-columns:1fr; }
  .tool-preview { max-width:500px; }
  .split-layout { grid-template-columns:1fr; gap:var(--space-10); }
}
@media (max-width: 768px) {
  .site-nav, .header-actions { display:none; }
  .menu-toggle { display:block; }
  .nav-overlay { display:block; }
  .mobile-drawer { display:flex; flex-direction:column; }
  .stats-strip { grid-template-columns:repeat(2,1fr); }
  .steps-grid { grid-template-columns:1fr; gap:var(--space-4); }
  .step-connector { display:none; }
  .source-grid { grid-template-columns:repeat(2,1fr); }
  .benefit-grid { grid-template-columns:1fr; }
  .compact-service-grid { grid-template-columns:1fr; }
  .card-grid.col-3 { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:var(--space-8); }
  .hero { padding:var(--space-12) 0 var(--space-10); }
  .section-padding { padding:var(--space-12) 0; }
  .split-layout { gap:var(--space-8); }
  .float-actions { bottom:var(--space-4); right:var(--space-4); }
}
@media (max-width: 480px) {
  .source-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; }
  .stats-strip { grid-template-columns:1fr 1fr; gap:var(--space-3); }
}

/* ── Homepage: Product Grid ──────────────────────── */
.hero-compact {
  position:relative; padding:var(--space-16) 0 var(--space-14); background:var(--navy-950); overflow:hidden; text-align:center;
}
.hero-compact .hero-grid-bg { position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px); background-size:60px 60px; pointer-events:none; }
.hero-compact .container { position:relative; z-index:1; }
.hero-compact h1 { color:#fff; max-width:720px; margin:0 auto var(--space-4); font-size:clamp(2.2rem,4vw,3.5rem); }
.hero-compact h1 .highlight { background:linear-gradient(to right,var(--amber-300),var(--amber-500)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.hero-compact .hero-sub { font-size:1.05rem; color:rgba(255,255,255,.7); max-width:640px; margin:0 auto var(--space-6); line-height:1.65; }
.hero-compact .hero-actions { justify-content:center; }

.section-tools { padding:var(--space-20) 0; background:var(--stone-50); }

.product-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; max-width:var(--max-w); margin:0 auto;
}

.product-tile {
  display:flex; flex-direction:column; padding:var(--space-6); background:#fff; border:1px solid var(--stone-200); border-radius:var(--r-lg); transition:all .25s ease; text-decoration:none; position:relative;
}
.product-tile.live:hover {
  transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--amber-400);
}
.product-tile.coming {
  opacity:0.65; cursor:default;
}

.product-icon {
  font-size:2rem; line-height:1; margin-bottom:var(--space-3);
}

.product-name {
  font-family:var(--font-display); font-weight:600; font-size:1.15rem; color:var(--navy-950); margin-bottom:var(--space-2);
}
.product-tile.coming .product-name { color:var(--stone-500); }

.product-desc {
  font-size:.85rem; color:var(--stone-500); line-height:1.55; flex:1; margin-bottom:var(--space-4);
}

.product-badge {
  display:inline-flex; align-items:center; gap:5px; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:.3rem .65rem; border-radius:999px; align-self:flex-start;
}
.badge-live { background:rgba(245,158,11,.12); color:var(--amber-600); }
.badge-dot { width:6px; height:6px; border-radius:50%; background:var(--amber-500); }
.badge-coming { background:var(--stone-200); color:var(--stone-500); }

@media (max-width: 900px) {
  .product-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 560px) {
  .product-grid { grid-template-columns:1fr; }
  .hero-compact { padding:var(--space-10) 0 var(--space-8); }
}