@import url("./tokens.css");

/* Base */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--c-ink);
  background:var(--c-bg);
  line-height:1.55;
  text-rendering:optimizeLegibility;
}
img{max-width:100%; height:auto}
a{color:inherit}
p{margin:0 0 1rem}
ul{margin:0; padding-left:1.1rem}
small{color:var(--c-muted)}
.skip-link{
  position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left:var(--pad-x); top:var(--pad-x); width:auto; height:auto; padding:.6rem .8rem;
  background:#fff; border-radius:10px; box-shadow:var(--shadow-sm); z-index:1000;
}

/* Layout */
.container{max-width:var(--container); margin:0 auto; padding:0 var(--pad-x)}
.section{padding:var(--section-y) 0}
.grid{display:grid; gap:1rem}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width: 920px){
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-2{grid-template-columns:1fr}
}
@media (max-width: 520px){
  .grid-4,.grid-3{grid-template-columns:1fr}
}

/* Topbar */
.topbar{
  background:rgba(11,31,58,.96);
  color:#fff;
  font-size:.92rem;
}
.topbar .container{display:flex; align-items:center; justify-content:space-between; padding:.55rem var(--pad-x)}
.topbar a{color:#fff; text-decoration:none}
.topbar .pill{
  display:inline-flex; gap:.5rem; align-items:center;
  padding:.2rem .55rem; border-radius:999px;
  background:rgba(24,182,255,.14);
  border:1px solid rgba(24,182,255,.22);
}

/* Header */
.header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(1.1) blur(10px);
  border-bottom:1px solid var(--c-border);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:.85rem 0;
}
.brand{display:flex; gap:.7rem; align-items:center; text-decoration:none}
.brand img{width:38px; height:38px}
.brand .name{display:flex; flex-direction:column; line-height:1.1}
.brand .name strong{font-size:1.02rem; letter-spacing:.2px; color:var(--c-navy)}
.brand .name span{font-size:.85rem; color:var(--c-muted)}
.nav{
  display:flex; align-items:center; gap:.9rem;
}
.nav a{
  text-decoration:none;
  font-size:.95rem;
  color:rgba(11,31,58,.86);
  padding:.4rem .55rem;
  border-radius:10px;
  transition:background var(--t) var(--ease), color var(--t) var(--ease);
}
.nav a:hover{background:rgba(30,94,255,.08); color:var(--c-navy)}
.nav a[aria-current="page"]{background:rgba(30,94,255,.10); color:var(--c-navy); font-weight:600}
.header-actions{display:flex; gap:.6rem; align-items:center}
.menu-btn{
  display:none;
  width:42px; height:42px; border-radius:12px;
  border:1px solid var(--c-border); background:#fff;
  box-shadow:var(--shadow-sm);
}
.menu-btn:focus{outline:none; box-shadow:var(--shadow-sm), var(--ring)}
@media (max-width: 980px){
  .nav{display:none}
  .menu-btn{display:inline-grid; place-items:center}
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  border-radius:12px; padding:.78rem 1rem;
  border:1px solid transparent;
  font-weight:600; letter-spacing:.2px;
  text-decoration:none;
  transition:transform var(--t-fast) var(--ease), box-shadow var(--t) var(--ease), background var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease);
  user-select:none;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--c-blue); color:#fff; box-shadow:0 10px 22px rgba(30,94,255,.18)}
.btn-primary:hover{background:#1652E9}
.btn-secondary{
  background:transparent;
  border-color:rgba(255,255,255,.30);
  color:#fff;
}
.btn-secondary.on-light{
  border-color:rgba(11,31,58,.18);
  color:var(--c-navy);
  background:#fff;
}
.btn-secondary.on-light:hover{background:rgba(30,94,255,.06); border-color:rgba(30,94,255,.24)}
.btn-outline{
  background:transparent;
  border-color:rgba(11,31,58,.18);
  color:var(--c-navy);
}
.btn-outline:hover{background:rgba(30,94,255,.06); border-color:rgba(30,94,255,.24)}
.btn:focus{outline:none; box-shadow:var(--shadow-sm), var(--ring)}
.btn-icon{width:18px; height:18px}

/* Hero */
.hero{
  background:var(--g-hero);
  color:#fff;
  position:relative;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(900px 420px at 75% 10%, rgba(24,182,255,.28), rgba(24,182,255,0) 55%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 1px, rgba(255,255,255,0) 1px 11px);
  opacity:.55;
  pointer-events:none;
}
.hero .container{position:relative}
.hero-inner{
  padding:clamp(3.2rem, 7vw, 5rem) 0;
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:2rem;
  align-items:center;
}
@media (max-width: 920px){
  .hero-inner{grid-template-columns:1fr; gap:1.4rem}
}
.kicker{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.35rem .6rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(24,182,255,.10);
  color:rgba(255,255,255,.92);
  font-size:.92rem;
}
.h1{
  font-size:var(--fs-900);
  line-height:1.1;
  margin:.9rem 0 .85rem;
  letter-spacing:-.3px;
}
.lead{
  font-size:var(--fs-600);
  color:rgba(255,255,255,.88);
  max-width:56ch;
}
.hero-ctas{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.2rem}
.hero-panel{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius);
  padding:1.1rem;
  box-shadow:0 24px 80px rgba(0,0,0,.18);
}
.hero-panel h3{margin:0 0 .55rem; font-size:1.05rem}
.hero-panel ul{margin:.25rem 0 0}
.hero-panel li{margin:.35rem 0; color:rgba(255,255,255,.88)}
.hero-panel .mini{
  margin-top:.8rem;
  display:grid; gap:.6rem;
}
.mini-card{
  display:flex; gap:.75rem; align-items:flex-start;
  padding:.75rem .8rem;
  border-radius:12px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
}
.mini-card svg{flex:0 0 18px; margin-top:.15rem}
.mini-card strong{display:block; font-size:.92rem}
.mini-card span{display:block; font-size:.9rem; color:rgba(255,255,255,.80)}

/* Headings */
.section h2{
  font-size:var(--fs-800);
  margin:0 0 .6rem;
  letter-spacing:-.2px;
  color:var(--c-navy);
}
.section .sub{
  color:var(--c-muted);
  max-width:70ch;
  margin:0 0 1.4rem;
}

/* Cards */
.card{
  border:1px solid var(--c-border);
  border-radius:var(--radius);
  background:#fff;
  box-shadow:var(--shadow-sm);
  padding:1.05rem;
}
.card:hover{box-shadow:var(--shadow-md)}
.card h3{margin:.1rem 0 .35rem; color:var(--c-navy); font-size:1.05rem}
.card p{color:var(--c-muted); margin:0 0 .75rem}
.meta{
  display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.4rem;
  color:var(--c-muted); font-size:.92rem;
}
.badge{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.25rem .55rem;
  border-radius:999px;
  font-size:.82rem;
  border:1px solid rgba(11,31,58,.14);
  background:rgba(11,31,58,.04);
  color:rgba(11,31,58,.84);
}
.badge.blue{background:rgba(30,94,255,.08); border-color:rgba(30,94,255,.18); color:#1B3D99}
.badge.cyan{background:rgba(24,182,255,.10); border-color:rgba(24,182,255,.22); color:#0B5B82}

/* Why / bullets */
.bullets{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem 1.2rem;
}
.bullets li{margin:.4rem 0; color:var(--c-muted)}
@media (max-width: 820px){ .bullets{grid-template-columns:1fr} }

/* Testimonials slider */
.slider{
  position:relative;
  border-radius:var(--radius);
  border:1px solid var(--c-border);
  background:var(--g-highlight);
  overflow:hidden;
}
.slide-track{
  display:flex;
  transition:transform var(--t) var(--ease);
}
.testimonial{
  min-width:100%;
  padding:1.4rem 1.2rem;
}
.testimonial p{
  color:rgba(11,31,58,.86);
  font-size:1.02rem;
  margin:0 0 1rem;
}
.testimonial .who{
  display:flex; gap:.75rem; align-items:center;
}
.avatar{
  width:44px; height:44px; border-radius:14px;
  background:linear-gradient(135deg, rgba(30,94,255,.25), rgba(24,182,255,.20));
  border:1px solid rgba(11,31,58,.14);
}
.who strong{color:var(--c-navy)}
.who span{display:block; color:var(--c-muted); font-size:.92rem}
.slider-controls{
  position:absolute; right:.75rem; bottom:.75rem;
  display:flex; gap:.5rem;
}
.icon-btn{
  width:42px; height:42px;
  border-radius:14px;
  border:1px solid rgba(11,31,58,.14);
  background:rgba(255,255,255,.72);
  backdrop-filter: blur(8px);
  box-shadow:var(--shadow-sm);
  display:grid; place-items:center;
}
.icon-btn:hover{background:#fff}
.icon-btn:focus{outline:none; box-shadow:var(--shadow-sm), var(--ring)}

/* Logos row */
.logos{
  display:flex; gap:1.2rem; flex-wrap:wrap;
  align-items:center;
  opacity:.85;
}
.logo-pill{
  border:1px dashed rgba(11,31,58,.18);
  border-radius:999px;
  padding:.55rem .8rem;
  background:#fff;
  color:rgba(11,31,58,.72);
  font-weight:600;
  font-size:.92rem;
}

/* Forms */
.form{
  display:grid; gap:.85rem;
}
.field{display:grid; gap:.35rem}
label{font-weight:600; color:rgba(11,31,58,.88)}
input, select, textarea{
  width:100%;
  padding:.85rem .9rem;
  border-radius:12px;
  border:1px solid rgba(11,31,58,.16);
  background:#fff;
  font:inherit;
  transition:border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
textarea{min-height:120px; resize:vertical}
input:focus, select:focus, textarea:focus{
  outline:none;
  border-color:rgba(24,182,255,.60);
  box-shadow:var(--ring);
}
.help{font-size:.92rem; color:var(--c-muted)}
.form-row{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.85rem}
@media (max-width: 820px){ .form-row{grid-template-columns:1fr} }
.form-actions{display:flex; gap:.7rem; flex-wrap:wrap; align-items:center}

/* Accordion */
.accordion{
  border:1px solid var(--c-border);
  border-radius:var(--radius);
  overflow:hidden;
  background:#fff;
}
.accordion details{border-top:1px solid var(--c-border)}
.accordion details:first-child{border-top:none}
.accordion summary{
  list-style:none;
  cursor:pointer;
  padding:1rem 1.05rem;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem;
  font-weight:700;
  color:var(--c-navy);
}
.accordion summary::-webkit-details-marker{display:none}
.accordion summary:focus{outline:none; box-shadow:inset var(--ring)}
.accordion .content{padding:0 1.05rem 1rem; color:var(--c-muted)}
.chev{transition:transform var(--t) var(--ease)}
details[open] .chev{transform:rotate(180deg)}

/* Mobile drawer */
.drawer-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.38);
  display:none; z-index:80;
}
.drawer{
  position:fixed; top:0; right:0; height:100%; width:min(360px, 92vw);
  background:#fff;
  border-left:1px solid var(--c-border);
  transform:translateX(100%);
  transition:transform var(--t) var(--ease);
  z-index:90;
  padding:1rem;
  display:grid; grid-template-rows:auto 1fr auto; gap:1rem;
}
.drawer.open{transform:translateX(0)}
.drawer-backdrop.open{display:block}
.drawer a{display:block; padding:.75rem .85rem; border-radius:12px; text-decoration:none; color:rgba(11,31,58,.86)}
.drawer a:hover{background:rgba(30,94,255,.08)}
.drawer .drawer-actions{display:grid; gap:.6rem}

/* Reveal */
.reveal{opacity:0; transform:translateY(12px); transition:opacity 420ms var(--ease), transform 520ms var(--ease)}
.reveal.visible{opacity:1; transform:none}

/* Footer */
.footer{
  background:var(--c-navy);
  color:rgba(255,255,255,.86);
}
.footer a{color:rgba(255,255,255,.92); text-decoration:none}
.footer a:hover{text-decoration:underline}
.footer-top{
  padding:2.2rem 0 1.6rem;
  display:grid; grid-template-columns:1.2fr .8fr 1fr; gap:1.2rem;
}
.footer h4{margin:.1rem 0 .7rem; color:#fff}
.footer .muted{color:rgba(255,255,255,.72)}
.footer-bottom{
  padding:1rem 0;
  border-top:1px solid rgba(255,255,255,.14);
  font-size:.92rem;
  display:flex; gap:1rem; flex-wrap:wrap;
  justify-content:space-between; align-items:center;
}
@media (max-width: 920px){ .footer-top{grid-template-columns:1fr} }

/* Utilities */
.divider{height:1px; background:var(--c-border); margin:1rem 0}
.highlight{
  background:var(--g-highlight);
  border-top:1px solid var(--c-border);
  border-bottom:1px solid var(--c-border);
}
.kpi{
  display:flex; gap:1rem; flex-wrap:wrap;
  align-items:center;
  padding:1rem;
  border-radius:var(--radius);
  border:1px solid var(--c-border);
  background:#fff;
  box-shadow:var(--shadow-sm);
}
.kpi strong{color:var(--c-navy)}
.kpi .num{font-size:1.4rem}
.notice{
  border:1px solid rgba(24,182,255,.24);
  background:rgba(24,182,255,.08);
  border-radius:var(--radius);
  padding:1rem;
  color:rgba(11,31,58,.85);
}