/* ── Reset ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Tokens ──────────────────────────────────────── */
:root {
  --bg:        #0f172a;
  --surface:   #1e293b;
  --surface2:  #263349;
  --border:    rgba(148,163,184,0.12);
  --border-hi: rgba(99,102,241,0.45);
  --accent:    #6366f1;
  --accent-hi: #818cf8;
  --cyan:      #22d3ee;
  --green:     #4ade80;
  --amber:     #fbbf24;
  --text:      #e2e8f0;
  --muted:     #94a3b8;
  --glow:      rgba(99,102,241,0.25);
  --nav-h:     60px;
  --r:         14px;
  --ease:      0.26s cubic-bezier(.4,0,.2,1);
  --max:       1120px;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── Ambient glow ────────────────────────────────── */
#ambient {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.orb {
  position: absolute; border-radius: 50%;
  filter: blur(100px); opacity: 0.45;
  animation: drift 20s ease-in-out infinite alternate;
}
.orb-1 { width:560px;height:560px;background:rgba(99,102,241,0.18);top:-140px;left:-100px; }
.orb-2 { width:420px;height:420px;background:rgba(34,211,238,0.1);bottom:-80px;right:-60px;animation-delay:-8s; }
#ambient::after {
  content:''; position:absolute; inset:0;
  background-image: radial-gradient(rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 0%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 0%, transparent 100%);
}
@keyframes drift {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(24px,16px) scale(1.06); }
}

/* ── Utility ─────────────────────────────────────── */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 clamp(1.25rem,5vw,2.5rem); }
.divider { height:1px; background:linear-gradient(90deg,transparent,var(--border),transparent); position:relative;z-index:1; }
.tag {
  font-size: .7rem; font-weight: 700; letter-spacing: .13em;
  color: var(--accent-hi); text-transform: uppercase; margin-bottom: .6rem;
}
h2 {
  font-size: clamp(1.7rem,3.8vw,2.8rem); font-weight: 800;
  letter-spacing: -.025em; line-height: 1.15; margin-bottom: .85rem;
}
.lead { color: var(--muted); font-size: 1rem; max-width: 520px; line-height: 1.75; margin-bottom: 2.5rem; }

/* ── Nav ─────────────────────────────────────────── */
nav {
  position: fixed; top:0;left:0;right:0; height: var(--nav-h); z-index: 200;
  background: rgba(15,23,42,0.72); backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid var(--border); transition: background var(--ease);
}
nav.scrolled { background: rgba(15,23,42,0.94); }
.nav-inner {
  max-width: var(--max); margin: 0 auto;
  padding: 0 clamp(1.25rem,5vw,2.5rem);
  height: 100%; display:flex; align-items:center; justify-content:space-between;
}
.nav-logo {
  font-size: 1rem; font-weight: 900; letter-spacing: .07em;
  color: var(--text); text-decoration: none;
  display: flex; align-items: center; gap: .4rem;
}
.nav-logo .hi { color: var(--accent-hi); }
.nav-logo .pulse {
  width:6px;height:6px;background:var(--green);border-radius:50%;
  box-shadow:0 0 8px var(--green);animation:blink 2.2s ease-in-out infinite;
}
.nav-links { display:flex; align-items:center; gap:.1rem; list-style:none; }
.nav-links a {
  color:var(--muted);text-decoration:none;font-size:.84rem;font-weight:500;
  padding:.4rem .75rem;border-radius:8px;
  transition:color var(--ease),background var(--ease);
}
.nav-links a:hover { color:var(--text);background:rgba(255,255,255,0.05); }
.nav-cta {
  background:var(--accent)!important;color:#fff!important;
  padding:.4rem 1rem!important;margin-left:.35rem;
  box-shadow:0 0 16px var(--glow);
}
.nav-cta:hover { background:var(--accent-hi)!important; }
.burger {
  display:none;flex-direction:column;gap:5px;cursor:pointer;
  padding:6px;background:none;border:none;border-radius:8px;
}
.burger span { display:block;width:22px;height:2px;background:var(--text);border-radius:2px;transition:var(--ease); }
.burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ── Hero ────────────────────────────────────────── */
#home {
  position:relative;z-index:1;min-height:100svh;
  display:flex;align-items:center;
  padding: calc(var(--nav-h) + 5rem) clamp(1.25rem,5vw,2.5rem) 6rem;
}
.hero-inner { max-width:var(--max);margin:0 auto;width:100%; }
.hero-badge {
  display:inline-flex;align-items:center;gap:.55rem;
  background:rgba(99,102,241,0.1);border:1px solid rgba(99,102,241,0.28);
  border-radius:100px;padding:.35rem .95rem;
  font-size:.7rem;font-weight:700;letter-spacing:.12em;
  color:var(--accent-hi);text-transform:uppercase;margin-bottom:1.6rem;
}
.hero-badge .dot {
  width:6px;height:6px;background:var(--green);border-radius:50%;
  box-shadow:0 0 8px var(--green);animation:blink 2s ease-in-out infinite;
}
.brand-line {
  font-size:clamp(1.6rem,3.6vw,2.2rem);font-weight:800;letter-spacing:.18em;
  color:var(--accent-hi);text-transform:uppercase;margin-bottom:.4rem;opacity:.9;
  animation:fadeUp .6s ease both;
}
h1.hero-h1 {
  font-size:clamp(2rem,4.8vw,4rem);font-weight:900;line-height:1.08;
  letter-spacing:-.035em;margin-bottom:1.3rem;animation:fadeUp .7s ease both .07s;
}
.g {
  background:linear-gradient(130deg,var(--accent-hi) 0%,var(--cyan) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.hero-sub {
  font-size:clamp(.94rem,1.85vw,1.08rem);color:var(--muted);
  max-width:570px;line-height:1.78;margin-bottom:2.4rem;
  animation:fadeUp .7s ease both .14s;
}
.hero-sub strong { color:var(--text);font-weight:600; }
.hero-actions {
  display:flex;gap:.75rem;flex-wrap:wrap;margin-bottom:4rem;
  animation:fadeUp .7s ease both .21s;
}
.btn {
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.78rem 1.6rem;border-radius:10px;
  font-size:.87rem;font-weight:600;text-decoration:none;
  transition:all var(--ease);cursor:pointer;border:none;font-family:inherit;
}
.btn-p { background:var(--accent);color:#fff;box-shadow:0 0 24px var(--glow); }
.btn-p:hover { background:var(--accent-hi);transform:translateY(-2px);box-shadow:0 0 36px var(--glow); }
.btn-g { background:var(--surface);color:var(--text);border:1px solid var(--border); }
.btn-g:hover { background:var(--surface2);border-color:rgba(255,255,255,0.12);transform:translateY(-2px); }
.hero-stats {
  display:flex;gap:clamp(1.5rem,4vw,3.5rem);flex-wrap:wrap;
  animation:fadeUp .7s ease both .28s;
}
.stat-num {
  font-size:1.5rem;font-weight:800;line-height:1;
  background:linear-gradient(130deg,var(--accent-hi),var(--cyan));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.stat-lbl { font-size:.72rem;color:var(--muted);font-weight:500;margin-top:.18rem; }

/* ── Sections shared ─────────────────────────────── */
.sec { position:relative;z-index:1;padding:5rem clamp(1.25rem,5vw,2.5rem); }

/* ── Solution Cards ──────────────────────────────── */
.cards { display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:.9rem; }
.card {
  position:relative;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);padding:1.55rem;overflow:hidden;
  transition:border-color var(--ease),background var(--ease),transform var(--ease),box-shadow var(--ease);
}
.card::before {
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(99,102,241,0.07) 0%,transparent 60%);
  opacity:0;transition:opacity var(--ease);
}
.card:hover { border-color:var(--border-hi);background:var(--surface2);transform:translateY(-4px);box-shadow:0 14px 36px rgba(0,0,0,0.35); }
.card:hover::before { opacity:1; }
.card::after {
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--accent),var(--cyan));
  opacity:0;transition:opacity var(--ease);border-radius:var(--r) var(--r) 0 0;
}
.card:hover::after { opacity:1; }
.card-icon {
  width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  background:rgba(99,102,241,0.12);border:1px solid rgba(99,102,241,0.2);
  border-radius:10px;font-size:1.12rem;margin-bottom:.9rem;position:relative;z-index:1;
}
.c-title { font-size:.93rem;font-weight:700;margin-bottom:.42rem;position:relative;z-index:1; }
.c-body  { font-size:.81rem;color:var(--muted);line-height:1.65;position:relative;z-index:1; }
.card-link {
  display:inline-flex;align-items:center;gap:.28rem;margin-top:.8rem;
  font-size:.74rem;font-weight:600;color:var(--accent-hi);text-decoration:none;
  position:relative;z-index:1;transition:color var(--ease),gap var(--ease);
}
.card-link:hover { color:var(--cyan);gap:.45rem; }

/* ── Links grid (quick-access) ───────────────────── */
.links-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:.75rem; }
.link-card {
  display:flex;align-items:center;gap:.9rem;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);padding:1.1rem 1.25rem;
  text-decoration:none;color:var(--text);
  transition:border-color var(--ease),background var(--ease),transform var(--ease);
}
.link-card:hover { border-color:var(--border-hi);background:var(--surface2);transform:translateY(-2px); }
.link-icon {
  width:36px;height:36px;min-width:36px;display:flex;align-items:center;justify-content:center;
  background:rgba(99,102,241,0.12);border:1px solid rgba(99,102,241,0.2);
  border-radius:9px;font-size:1rem;
}
.link-label { font-size:.84rem;font-weight:600; }
.link-url   { font-size:.73rem;color:var(--muted);margin-top:.12rem; }

/* ── Stack pills ─────────────────────────────────── */
.pills { display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.5rem; }
.pill {
  background:rgba(99,102,241,0.09);border:1px solid rgba(99,102,241,0.2);
  color:var(--accent-hi);padding:.27rem .62rem;border-radius:100px;
  font-size:.75rem;font-weight:600;
}
.pill-cyan  { background:rgba(34,211,238,0.08);border-color:rgba(34,211,238,0.2);color:var(--cyan); }
.pill-green { background:rgba(74,222,128,0.08);border-color:rgba(74,222,128,0.2);color:var(--green); }

/* ── Contact ─────────────────────────────────────── */
.contact-box {
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);padding:clamp(2rem,5vw,3.5rem);
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.5rem;
}
.contact-box p { color:var(--muted);font-size:.95rem;max-width:500px;line-height:1.72; }
.contact-box .c-rows { display:flex;gap:1.25rem;flex-wrap:wrap;justify-content:center; }
.c-row {
  display:flex;align-items:center;gap:.6rem;
  font-size:.87rem;background:var(--surface2);border:1px solid var(--border);
  border-radius:9px;padding:.55rem 1rem;
}
.c-row a { color:var(--text);text-decoration:none;transition:color var(--ease); }
.c-row a:hover { color:var(--accent-hi); }

/* ── Footer ──────────────────────────────────────── */
footer {
  position:relative;z-index:1;border-top:1px solid var(--border);
  padding:1.6rem clamp(1.25rem,5vw,2.5rem);
}
.footer-inner {
  max-width:var(--max);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;
}
.f-logo { font-size:.88rem;font-weight:900;color:var(--text);text-decoration:none;letter-spacing:.05em; }
.f-logo span { color:var(--accent-hi); }
.f-copy { font-size:.74rem;color:var(--muted); }
.f-links { display:flex;gap:1.25rem; }
.f-links a { font-size:.74rem;color:var(--muted);text-decoration:none;transition:color var(--ease); }
.f-links a:hover { color:var(--text); }

/* ── Animations ──────────────────────────────────── */
@keyframes fadeUp { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }
@keyframes blink  { 0%,100%{opacity:1} 50%{opacity:.15} }
.reveal { opacity:0;transform:translateY(20px);transition:opacity .55s ease,transform .55s ease; }
.reveal.in { opacity:1;transform:translateY(0); }
.d1{transition-delay:.06s}.d2{transition-delay:.12s}.d3{transition-delay:.18s}
.d4{transition-delay:.24s}.d5{transition-delay:.30s}.d6{transition-delay:.36s}

/* ── Responsive ──────────────────────────────────── */
@media(max-width:640px) {
  .nav-links { display:none; }
  .nav-links.open {
    display:flex;flex-direction:column;align-items:flex-start;
    position:fixed;top:var(--nav-h);left:0;right:0;
    background:rgba(15,23,42,0.97);backdrop-filter:blur(18px);
    border-bottom:1px solid var(--border);
    padding:1.25rem clamp(1.25rem,5vw,2.5rem);gap:.3rem;
  }
  .nav-links.open .nav-cta { margin-left:0; }
  .burger { display:flex; }
}
@media(max-width:420px) {
  .cards { grid-template-columns:1fr; }
  .hero-stats { gap:1.5rem; }
}

/* ── Accessibility ───────────────────────────────── */
:focus-visible { outline:2px solid var(--accent-hi);outline-offset:3px;border-radius:4px; }
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms!important;transition-duration:.01ms!important; }
}