/* ===== Design Tokens ===== */
:root{
  --accent:#06a6d6;
  --grad-start:#0fb5d9;
  --grad-end:#0b98c2;
  --surface:#ffffff;
  --background:#f6f8fb;
  --text:#0f172a;
  --muted:#6b7280;

  --radius:12px;
  --shadow:0 6px 18px rgba(9,30,66,0.06);

  --max-w:1200px;
  --pad:20px;
  --space:20px;

  --hero-size-clamp:clamp(28px, 4vw, 32px);
  --body-size-clamp:clamp(14px, 1.2vw, 16px);
}

/* ===== Base ===== */
*{box-sizing:border-box}
html{color-scheme:light;background:var(--background)}
html:focus-within{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  font-size:var(--body-size-clamp);
  line-height:1.6;
  background:var(--background);
}
.wrap{
  max-width:var(--max-w);
  margin-inline:auto;
  padding:var(--pad);
}
.section-title{
  font-size:1.375rem;
  line-height:1.25;
  margin:0 0 calc(var(--space) * 1.2);
}

/* Accessibility */
.skip-link{
  position:absolute; left:-999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left:var(--pad); top:var(--pad); width:auto; height:auto;
  background:var(--surface); color:var(--text);
  padding:8px 12px; border-radius:8px; box-shadow:var(--shadow);
}
:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }

/* ===== Header ===== */
.site-header{
  background:var(--surface);
  box-shadow:var(--shadow);
  position:sticky; top:0; z-index:10;
}
.brand{ display:flex; align-items:center; gap:12px; }

/* Logo Link Styles */
.logo-link {
  display: inline-block;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.logo-link:hover {
  opacity: 0.8;
}

.brand-logo {
  height: 44px;
  width: auto;
  display: block;
}

/* ===== Hero ===== */
.hero{ padding:clamp(32px, 6vw, 72px) 0; }
.hero-grid{
  display:grid; gap:var(--space);
  grid-template-columns: 1fr;
}
.hero-left .kicker{
  letter-spacing:.12em; font-weight:700; color:var(--accent);
  margin:0 0 10px; font-size:.8rem;
}
.hero-title{
  font-size:var(--hero-size-clamp);
  line-height:1.2; margin:0 0 12px;
}
.hero-subtitle{ color:var(--muted); margin:0 0 20px; max-width:60ch; }
.hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px; border-radius:10px; text-decoration:none; font-weight:600;
  box-shadow:var(--shadow);
}
.btn-primary{ background:var(--accent); color:#fff; }
.btn-primary:focus-visible{ outline-color:#0c8eb4; }
.btn-secondary{
  background:var(--surface); color:var(--text); border:1px solid #e5e7eb;
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:none; }

/* Screenshot placeholder card */
.hero-right{ display:flex; align-items:center; justify-content:center; }
.screenshot-card{
  width:100%; max-width:560px; border-radius:16px; overflow:hidden;
  background:linear-gradient(135deg, var(--grad-start), var(--grad-end));
  box-shadow:var(--shadow);
  color:#0b2a36;
}
.s-card-top{
  display:flex; gap:6px; align-items:center;
  padding:10px 12px; background:rgba(255,255,255,.7);
}
.s-card-top .dot{
  width:10px; height:10px; border-radius:50%; background:#fff; box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);
}
.s-card-body{
  padding:18px; background:rgba(255,255,255,.2); backdrop-filter:saturate(140%) blur(4px);
}
.s-card-body .row{ display:flex; align-items:center; gap:10px; margin:12px 0; }
.pill{
  flex:0 0 auto; padding:6px 10px; border-radius:999px; background:#fff; font-weight:600; font-size:.85rem;
}
.bar{ height:10px; flex:1; border-radius:8px; background:rgba(255,255,255,.75); }
.bar.short{ flex-basis:35%; }
.bar.medium{ flex-basis:65%; }
.mini-chart{
  margin-top:18px; height:120px; border-radius:12px;
  background:
    radial-gradient(closest-side, rgba(255,255,255,.8), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.3), rgba(255,255,255,.3) 1px, transparent 1px, transparent 24px),
    linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,0));
}

/* ===== Features ===== */
.features{ padding:60px 0; }
.features-grid{
  display:grid; gap:var(--space);
  grid-template-columns: 1fr;
}
.feature{
  background:var(--surface); border:1px solid #e5e7eb; border-radius:var(--radius);
  padding:18px; box-shadow:var(--shadow);
  transition:transform .2s ease, box-shadow .2s ease;
}
.feature:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(9,30,66,0.08); }
.feature h3{ margin:0 0 6px; font-size:1.05rem; }
.feature p{ margin:0; color:var(--muted); }

/* ===== Metrics ===== */
.metrics{ padding:60px 0; }
.stats-grid{
  display:grid; gap:var(--space);
  grid-template-columns: 1fr;
}
.stat{
  background:var(--surface); border:1px solid #e5e7eb; border-radius:var(--radius);
  padding:22px; text-align:center; box-shadow:var(--shadow);
}
.stat .value{ font-size:1.8rem; font-weight:700; line-height:1.1; }
.stat .label{ color:var(--muted); margin-top:6px; }

/* ===== Footer ===== */
.site-footer{
  padding:32px 0; border-top:1px solid #e5e7eb; background:#fff;
}
.site-footer .wrap{ display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.contact-link{ color:var(--accent); text-decoration:none; }
.contact-link:focus-visible{ outline-color:#0c8eb4; }

/* ===== Layout: Responsive ===== */
/* Tablet */
@media (min-width:768px){
  .hero-grid{
    grid-template-columns: 1.1fr .9fr;
    align-items:center;
  }
  .features-grid{
    grid-template-columns: repeat(2, 1fr);
  }
  .stats-grid{
    grid-template-columns: repeat(3, 1fr);
  }
}
/* Desktop */
@media (min-width:1024px){
  .hero{ padding:84px 0; }
  .features-grid{
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ===== Motion preferences ===== */
@media (prefers-reduced-motion:no-preference){
  .btn, .feature{ transition:transform .2s ease, box-shadow .2s ease; }
}