/* Base */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height:1.5;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
a:hover{ text-decoration: underline; }
.container{ width:min(var(--max), calc(100% - 2rem)); margin-inline:auto; }

.skip-link{
  position:absolute; left:-999px; top:0;
  padding:.75rem 1rem; background:var(--card); border:1px solid var(--border);
  border-radius: 999px; z-index:9999;
}
.skip-link:focus{ left:1rem; top:1rem; }

.section{ padding: 4rem 0; }
.section--alt{ background: var(--bg-2); }
.section__head{ margin-bottom: 1.5rem; }
.section__head h2{ margin:0 0 .25rem; font-size: clamp(1.4rem, 2vw, 2rem); }
.section__head p{ margin:0; color: var(--muted); max-width: 60ch; }

.accent{ color: var(--primary); }

/* Header */
.header{
  position: sticky; top:0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.header__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: .9rem 0;
}
.brand{ display:flex; gap:.75rem; align-items:center; }
.brand__logo{ width:36px; height:36px; }
.brand__text{ display:flex; flex-direction:column; line-height:1.1; }
.brand__text span{ color: var(--muted); font-size:.9rem; }

.nav{ display:flex; gap:1rem; align-items:center; }
.nav a{ color: var(--muted); font-weight: 600; font-size:.95rem; }
.nav a:hover{ color: var(--text); text-decoration:none; }

.nav-toggle + .nav-burger{ display:none; }

/* Burger (no JS) */
.nav-burger{
  width:44px; height:44px; border:1px solid var(--border);
  border-radius: 999px;
  display:none;
  align-items:center; justify-content:center;
  cursor:pointer;
  background: var(--card);
  box-shadow: var(--shadow);
}
.nav-burger span{
  width:18px; height:2px; background: var(--text); display:block;
  position:relative;
}
.nav-burger span:nth-child(2){ margin:.25rem 0; opacity:.9; }
.nav-burger span:nth-child(1){ transform: translateY(-6px); }
.nav-burger span:nth-child(3){ transform: translateY(6px); }

@media (max-width: 900px){
  .nav-burger{ display:flex; }
  .nav{
    position:absolute;
    left:0; right:0;
    top: 72px;
    display:none;
    flex-direction:column;
    gap:.25rem;
    padding: .75rem;
    margin: 0 .75rem;
    background: var(--card);
    border:1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
  }
  .nav a{ width:100%; padding:.75rem .9rem; border-radius: 12px; }
  .nav a:hover{ background: color-mix(in srgb, var(--bg-2) 70%, transparent); }

  /* checkbox hack */
  .nav-toggle:checked ~ .nav{ display:flex; }
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: .9rem 1.1rem;
  background: var(--primary);
  color:white;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--primary) 80%, black);
  font-weight: 700;
  text-decoration:none;
  box-shadow: var(--shadow);
}
.btn:hover{ background: var(--primary-2); text-decoration:none; }
.btn--ghost{
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}
.btn--ghost:hover{
  background: color-mix(in srgb, var(--bg-2) 70%, transparent);
}
.btn--small{ padding:.6rem .9rem; font-size:.92rem; }

.link{ color: var(--primary); font-weight: 700; }
.link:hover{ text-decoration: underline; }

/* Hero */
.hero{ padding: 4.5rem 0 3rem; }
.hero__grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 2rem;
  align-items: start;
}
@media (max-width: 900px){
  .hero__grid{ grid-template-columns: 1fr; }
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.35rem .7rem;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-2) 60%, transparent);
  border-radius: 999px;
  font-size: .9rem;
  color: var(--muted);
  margin: 0 0 .9rem;
}
.hero h1{
  margin:0 0 .75rem;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height:1.1;
}
.lead{
  margin:0 0 1.25rem;
  font-size: 1.05rem;
  color: var(--muted);
  max-width: 60ch;
}
.hero__cta{ display:flex; gap:.75rem; flex-wrap:wrap; margin-bottom: 1.25rem; }

.kpi{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
  margin: 1.2rem 0 0;
}
.kpi div{
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: var(--radius);
  padding: .9rem;
  box-shadow: var(--shadow);
}
.kpi dt{ font-size:.85rem; color: var(--muted); }
.kpi dd{ margin: .2rem 0 0; font-weight: 800; font-size:1.05rem; }

.hero__media{ position:relative; }
.hero__img{
  height: 360px;
  border-radius: calc(var(--radius) + 10px);
  border: 1px solid var(--border);
  background:
    linear-gradient(120deg, rgba(11,95,255,.18), rgba(11,18,32,.0)),
    url("assets/hero.jpg") center/cover no-repeat;
  box-shadow: var(--shadow);
}
.hero__card{
  position:absolute;
  right: 16px;
  bottom: -16px;
  width: min(320px, 92%);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  box-shadow: var(--shadow);
}
.hero__card p{ margin:.35rem 0 .6rem; color: var(--muted); }

/* Grid + Cards */
.grid{ display:grid; gap: 1rem; }
.grid--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px){
  .grid--3, .grid--2{ grid-template-columns: 1fr; }
}

.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.15rem;
  box-shadow: var(--shadow);
}
.card h3{ margin:.1rem 0 .35rem; }
.card p{ margin:0; color: var(--muted); }

.card--icon{
  display:flex; gap: .9rem; align-items:flex-start;
}
.icon{
  width:42px; height:42px;
  border-radius: 14px;
  border: 1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  background: color-mix(in srgb, var(--bg-2) 75%, transparent);
  flex: 0 0 auto;
}

/* Steps */
.steps{
  list-style:none; padding:0; margin:0;
  display:grid; gap: 1rem;
}
.step{
  display:flex; gap: .9rem; align-items:flex-start;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.15rem;
  box-shadow: var(--shadow);
}
.step__n{
  width:38px; height:38px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border));
  display:flex; align-items:center; justify-content:center;
  font-weight: 900;
  color: var(--primary);
}

/* Logos + Testimonials */
.logos{
  display:grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .75rem;
  margin-bottom: 1.25rem;
}
@media (max-width: 900px){
  .logos{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.logo{
  background: var(--card);
  border: 1px dashed var(--border);
  border-radius: 14px;
  padding: .9rem;
  text-align:center;
  color: var(--muted);
  font-weight: 700;
}

.testimonials{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
@media (max-width: 900px){
  .testimonials{ grid-template-columns: 1fr; }
}
.quote{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.15rem;
  box-shadow: var(--shadow);
}
.quote p{ margin:0 0 .6rem; color: var(--text); font-weight: 650; }
.quote span{ color: var(--muted); font-size: .95rem; }

/* FAQ (details) */
.faq details{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .9rem 1rem;
  box-shadow: var(--shadow);
}
.faq details + details{ margin-top: .8rem; }
.faq summary{
  cursor:pointer;
  font-weight: 800;
  list-style: none;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq details p{ margin: .6rem 0 0; color: var(--muted); }

/* Contact */
.contact{
  display:grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 1rem;
  align-items:start;
}
@media (max-width: 900px){
  .contact{ grid-template-columns: 1fr; }
}
.list{ margin:.8rem 0 0; padding-left: 1.1rem; color: var(--muted); }
.list li{ margin:.35rem 0; }
.note{ margin: .9rem 0 0; color: var(--muted); font-size: .95rem; }
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size: .92rem; }

form label{ display:block; font-weight: 700; margin: .75rem 0 .2rem; }
input, textarea{
  width:100%;
  padding: .8rem .85rem;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  color: var(--text);
  font: inherit;
}
input:focus, textarea:focus{
  outline: 3px solid color-mix(in srgb, var(--primary) 35%, transparent);
  border-color: color-mix(in srgb, var(--primary) 60%, var(--border));
}
.check{ display:flex; gap:.6rem; align-items:flex-start; margin-top: .75rem; }
.check input{ width:auto; margin-top:.2rem; }
.small{ margin:.6rem 0 0; color: var(--muted); font-size: .92rem; }

/* Footer */
.footer{ padding: 1.8rem 0; border-top: 1px solid var(--border); }
.footer__inner{
  display:flex; gap: 1rem; align-items:center; justify-content:space-between;
  color: var(--muted);
  flex-wrap: wrap;
}
.footer__links a{ color: var(--muted); font-weight: 700; }
.footer__links a:hover{ color: var(--text); }