/* ====== Base ====== */
:root{
--bg:  #0e1224;
--bg2: #111a34;
--card:#121f3f;
--text:#eef2ff;
--muted:#bac3ee;
--line: rgba(255,255,255,.12);
  --shadow: 0 18px 60px rgba(0,0,0,.35);
  --radius: 18px;
  --radius2: 26px;
  --max: 1120px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background: radial-gradient(1200px 800px at 15% 0%, rgba(120,150,255,.18), transparent 45%),
              radial-gradient(900px 600px at 90% 10%, rgba(120,255,200,.12), transparent 40%),
              linear-gradient(180deg, var(--bg), var(--bg2));
  color:var(--text);
  line-height:1.55;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.container{ width:min(var(--max), calc(100% - 2rem)); margin-inline:auto; }

.muted{ color:var(--muted); }
.tiny{ font-size:.9rem; }
.spacer{ height:22px; }

/* ====== Header / Nav ====== */
.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(14px);
  background: rgba(14,18,36,.65);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 18px 0;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand-logo{
  height:52px;
  width:auto;
}

.brand-name{
  color:#ffffff;
}



.nav-list{
  display:flex; gap:18px; align-items:center;
  list-style:none; margin:0; padding:0;
}
.nav-link{
  color: rgba(255,255,255,.85);
  font-weight:600;
}

.nav-link:hover{
  color:#ffffff;
}

.nav-link.active{
  color:#ffffff;
}


.nav-toggle{
  display:none;
  background:transparent; border:1px solid var(--line);
  border-radius:14px;
  width:44px; height:44px; color:var(--text);
}
.burger{
  width:18px; height:2px; display:block; margin:0 auto;
  background: var(--text);
  position:relative;
}
.burger::before,.burger::after{
  content:""; position:absolute; left:0; width:18px; height:2px; background:var(--text);
}
.burger::before{ top:-6px; }
.burger::after{ top:6px; }

.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;
}

/* =========================
   Header logo overrides
   ========================= */

/* Force white logo (SVG) */
.logo-white{
  filter: brightness(0) invert(1);
}



/* ====== Buttons ====== */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(120,150,255,.22);
  border: 1px solid rgba(120,150,255,.35);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  font-weight:800;
}
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }
.btn-small{ padding:10px 14px; font-weight:800; }
.btn-wide{ width:100%; }
.btn-ghost{
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line);
}

/* ====== Sections ====== */
.section{ padding: 64px 0; }
.section-alt{ background: rgba(255,255,255,.03); border-block:1px solid var(--line); }
.section-head{ margin-bottom: 22px; }
.section-head h2{ margin:0 0 6px; font-size: 2rem; }
.section-head p{ margin:0; color:var(--muted); }

/* ====== Hero ====== */
.hero{ padding: 58px 0 22px; }
.hero-grid{
  display:grid; gap:22px;
  grid-template-columns: 1.35fr .9fr;
  align-items: start;
}
.pill{
  display:inline-block;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255,255,255,.04);
  font-weight:700;
  font-size: .95rem;
}
.hero h1{ margin: 12px 0 8px; font-size: clamp(2.2rem, 4.2vw, 3.2rem); line-height:1.1; }
.lead{ font-size:1.1rem; color: var(--muted); margin: 0 0 18px; }
.hero-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:18px; }

.trust{
  display:flex; gap:14px; flex-wrap:wrap;
}
.trust-item{
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  min-width: 150px;
}
.trust-item strong{ display:block; font-size: 1.05rem; }
.trust-item span{ color: var(--muted); font-size: .95rem; }

/* ====== Cards / Grids ====== */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid var(--line);
  border-radius: var(--radius2);
  padding: 18px;
  box-shadow: var(--shadow);
}
.card-title{ margin:0 0 10px; font-size: 1.25rem; }
.hero-card .card{ position: sticky; top: 96px; }

.grid-3{
  display:grid; gap:16px;
  grid-template-columns: repeat(3, 1fr);
}
.grid-2{
  display:grid; gap:16px;
  grid-template-columns: repeat(2, 1fr);
}
.feature{
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.03);
}
.feature h3{ margin:0 0 8px; }
.feature p{ margin:0 0 10px; color: var(--muted); }
.link{ color: #dbe2ff; font-weight:800; }

.about-grid{
  display:grid; gap:16px;
  grid-template-columns: 1.2fr .8fr;
  align-items:start;
}
.stack{ display:grid; gap:10px; }
.mini{
  padding: 12px;
  border-radius: 14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
}
.mini strong{ display:block; }
.mini span{ color: var(--muted); font-size:.95rem; }

.checklist{
  list-style:none; padding:0; margin:0 0 14px;
}
.checklist li{
  padding-left: 26px;
  margin: 10px 0;
  position:relative;
  color: var(--muted);
}
.checklist li::before{
  content:"✓";
  position:absolute; left:0; top:0;
  color:#e8ecff;
  font-weight:900;
}

.bullets{ margin:0; padding-left:18px; color:var(--muted); }
.bullets li{ margin: 8px 0; }

.steps{ margin:0; padding-left:20px; color:var(--muted); }
.steps li{ margin:10px 0; }
.steps strong{ color: var(--text); }

/* ====== Page hero ====== */
.page-hero{
  padding: 54px 0 10px;
}
.page-hero h1{ margin:0 0 6px; font-size: clamp(2rem, 4vw, 2.8rem); }
.page-hero .lead{ margin:0; }

/* ====== CTA ====== */
.cta{
  padding: 56px 0;
  border-top: 1px solid var(--line);
  background: radial-gradient(1000px 500px at 20% 40%, rgba(120,150,255,.16), transparent 55%),
              rgba(255,255,255,.02);
}
.cta-inner{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.cta h2{ margin:0 0 6px; }
.cta p{ margin:0; color:var(--muted); }

/* ====== Form ====== */
.form{ display:grid; gap:12px; }
label{ display:grid; gap:6px; font-weight:700; }
input, textarea{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,.18);
  color: var(--text);
  font: inherit;
}
input:focus, textarea:focus{ outline: 2px solid rgba(120,150,255,.45); outline-offset: 2px; }
.hp{ display:none; }

/* ====== Footer ====== */
.site-footer{
  border-top: 1px solid var(--line);
  padding: 34px 0;
  background: rgba(0,0,0,.18);
}
.footer-grid{
  display:grid; gap:16px;
  grid-template-columns: 1.3fr .7fr .7fr;
  align-items:start;
}
.footer-links{ list-style:none; margin:10px 0 0; padding:0; }
.footer-links li{ margin: 8px 0; color: var(--muted); }
.footer-links a:hover{ color: var(--text); }
.footer-bottom{
  border-top: 1px solid var(--line);
  margin-top: 18px; padding-top: 14px;
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
}

/* ====== Responsive ====== */
@media (max-width: 920px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-card .card{ position:static; }
  .grid-3{ grid-template-columns: 1fr; }
  .grid-2{ grid-template-columns: 1fr; }
  .about-grid{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr; }
  .cta-inner{ flex-direction:column; align-items:flex-start; }
}

@media (max-width: 820px){
  .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; }
  .nav-list{
    position:absolute;
    right: 1rem;
    top: 64px;
    width: min(420px, calc(100% - 2rem));
    flex-direction:column;
    align-items:stretch;
    padding: 12px;
    border-radius: 18px;
    border: 1px solid var(--line);
    background: rgba(11,16,32,.92);
    box-shadow: var(--shadow);
    display:none;
  }
  .nav-list.open{ display:flex; }
}
/* =========================
   Logos marquee (left->right)
   ========================= */

.section-head.center{
  text-align:center;
}

.logo-marquee{
  position:relative;
  margin-top: 22px;
  padding: 16px 0;
  overflow:hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius2);
  background: rgba(255,255,255,.03);
}

.logo-marquee::before,
.logo-marquee::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width: 120px;
  z-index:2;
  pointer-events:none;
}

.logo-marquee::before{
  left:0;
  background: linear-gradient(90deg, rgba(14,18,36,1), rgba(14,18,36,0));
}

.logo-marquee::after{
  right:0;
  background: linear-gradient(270deg, rgba(14,18,36,1), rgba(14,18,36,0));
}

.logo-track{
  display:flex;
  align-items:center;
  gap: 56px;
  width: max-content;
  will-change: transform;
  animation: marquee 28s linear infinite;
}

/* Move left -> right.
   If you want right -> left, swap 100% and -50% direction. */
@keyframes marquee{
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0%); }
}

.logo-item{
  flex: 0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width: 140px;
  height: 54px;
  opacity: .9;
  transition: opacity .2s ease, filter .2s ease, transform .2s ease;
}

.logo-item img{
  max-height: 54px;
  max-width: 160px;
  width:auto;
  height:auto;
  display:block;
}

.logo-item:hover{
  opacity: 1;
  filter: none;
  transform: translateY(-1px);
}

/* Pause on hover */
.logo-marquee:hover .logo-track{
  animation-play-state: paused;
}

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce){
  .logo-track{ animation:none; }
  .logo-marquee{ overflow-x:auto; }
}

.clients{
  position: relative;
  z-index: 1;
  overflow: hidden;
}