:root{--bg:#0f1220;--card:#151a2f;--ink:#0b0e1a;--text:#e7eaf6;--muted:#b6bdd3;--brand:#8ee3ff;--brand-2:#a7ffcb;--ring:#b2bffd;}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;background:radial-gradient(1200px 600px at 80% -10%, rgba(142,227,255,0.15), transparent 50%),
      radial-gradient(800px 400px at -10% 10%, rgba(167,255,203,0.12), transparent 60%), var(--bg);
      color:var(--text); font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif; line-height:1.6}
a{color:var(--brand); text-decoration:none} a:hover{text-decoration:underline}
.wrap{max-width:1100px;margin:0 auto;padding:28px}
header{position:sticky;top:0;background:linear-gradient(to bottom, rgba(15,18,32,.9), rgba(15,18,32,.65));
       backdrop-filter: blur(6px); z-index:20}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{display:flex;align-items:center;gap:12px;font-weight:700;letter-spacing:.4px}
.logo-mark{width:36px;height:36px;border-radius:10px;overflow:hidden; display:block}
.nav a.btn{padding:10px 16px;border-radius:12px;background:linear-gradient(135deg, rgba(142,227,255,.15), rgba(167,255,203,.12));
           border:1px solid rgba(178,191,253,.25)}
.nav a.btn:hover{background:linear-gradient(135deg, rgba(142,227,255,.22), rgba(167,255,203,.2))}
main section{padding:40px 0}
h1{font-size:clamp(32px, 5vw, 56px); line-height:1.1; margin:14px 0 10px}
h2{font-size:clamp(24px,3vw,34px); margin:0 0 8px}
.muted{color:var(--muted)}
.hero{padding:72px 0 36px}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr; gap:32px}
.tag{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid rgba(178,191,253,.25);
     border-radius:999px;color:var(--muted); background:rgba(255,255,255,.03)}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.cta{display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:14px;border:1px solid rgba(178,191,253,.3);
     background:linear-gradient(135deg, rgba(142,227,255,.18), rgba(167,255,203,.12)); font-weight:600}
.cta.secondary{background:transparent}
.hero-card{background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); border:1px solid rgba(178,191,253,.22);
           border-radius:18px; padding:22px; box-shadow:0 20px 50px rgba(0,0,0,.25)}
.bullets{display:grid; gap:12px; margin:12px 0 0}
.bullets li{list-style:none; display:flex; gap:12px; align-items:flex-start}
.check{flex:0 0 22px; height:22px; border-radius:50%; background:linear-gradient(135deg,var(--brand),var(--brand-2)); display:grid; place-items:center}
.cards{display:grid; grid-template-columns:repeat(12,1fr); gap:18px}
.card{grid-column:span 6; background:var(--card); border:1px solid rgba(178,191,253,.2); border-radius:18px; padding:18px}
.card h3{margin:6px 0} .card p{margin:0}
.chip{display:inline-block;margin-top:10px;padding:6px 10px;border-radius:999px;background:rgba(142,227,255,.12); border:1px solid rgba(142,227,255,.25); font-size:14px}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}.card{grid-column:span 12}}
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.step{background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); border:1px solid rgba(178,191,253,.22); border-radius:16px; padding:16px}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr}} @media (max-width:600px){.steps{grid-template-columns:1fr}}
.quote{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid rgba(178,191,253,.18); border-radius:18px; padding:20px; font-size:18px}
form{display:grid; gap:12px; margin-top:10px}
label{font-weight:600}
input, textarea{width:100%; padding:12px 14px; border-radius:12px; border:1px solid rgba(178,191,253,.25); background:#0e1222; color:var(--text)}
input:focus, textarea:focus{outline:2px solid var(--ring); border-color:var(--ring)}
button{padding:12px 14px; border-radius:12px; border:1px solid rgba(178,191,253,.35); color:var(--text);
       background:linear-gradient(135deg, rgba(142,227,255,.2), rgba(167,255,203,.14)); font-weight:700; cursor:pointer}
button:hover{filter:brightness(1.08)}
footer{padding:40px 0 60px; color:var(--muted)} .fine{font-size:14px}
nav a{margin-left:14px} .active{color:#fff;text-decoration:underline}
/* Base: hide the toggle on desktop */
.menu-toggle {
  display: none;
  appearance: none;
  border: 1px solid rgba(178,191,253,.35);
  background: linear-gradient(135deg, rgba(142,227,255,.2), rgba(167,255,203,.14));
  color: var(--text);
  font-size: 20px; /* for the ⋯ symbol */
  line-height: 1;
  padding: 8px 12px;
  border-radius: 12px;
  cursor: pointer;
}

/* Mobile layout */
@media (max-width: 760px){
  .menu-toggle { display: inline-flex; align-items: center; justify-content: center; }

  /* Turn the links into a floating panel */
  .nav { position: relative; }
  .links {
    position: absolute;
    right: 28px;
    top: 56px;
    display: none;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    min-width: 180px;
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border: 1px solid rgba(178,191,253,.25);
    border-radius: 12px;
    box-shadow: 0 14px 40px rgba(0,0,0,.35);
    z-index: 50;
  }
  .links.open { display: flex; }

  /* Make links full-width in the popover, keep the button style for Contact */
  .links a { padding: 8px 10px; border-radius: 10px; }
  .links a:hover { background: rgba(255,255,255,.04); text-decoration: none; }
  .links a.btn { border: 1px solid rgba(178,191,253,.35); }
}
/* --- Mobile menu override block (place at END of styles.css) --- */

/* Desktop defaults */
.menu-toggle { display: none; }
.nav { position: relative; }
.nav .links { display: flex; align-items: center; gap: 14px; }

/* Mobile behavior */
@media (max-width: 760px){
  /* Show the ellipsis button only on mobile */
  .menu-toggle{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    appearance: none;
    border: 1px solid rgba(178,191,253,.35);
    background: linear-gradient(135deg, rgba(142,227,255,.2), rgba(167,255,203,.14));
    color: var(--text);
    font-size: 20px;
    line-height: 1;
    padding: 8px 12px;
    border-radius: 12px;
    cursor: pointer;
  }

  /* Hide links by default on mobile, show as a panel when 'open' */
  .nav .links{
    position: absolute;
    right: 28px;
    top: 56px;
    display: none;                /* key: hide on mobile by default */
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    min-width: 200px;
    background: var(--card); /* solid card color from the theme */
    border: 1px solid rgba(178,191,253,.35);
    border-radius: 14px;
    box-shadow: 0 14px 40px rgba(0,0,0,.45);
    z-index: 50;
  }
  .nav .links.open{ display: flex; }   /* key: opened state */

  /* Polish for mobile list items */
  .nav .links a{ padding: 8px 10px; border-radius: 10px; }
  .nav .links a:hover{ background: rgba(255,255,255,.04); text-decoration: none; }
  .nav .links a.btn{ border: 1px solid rgba(178,191,253,.35); }
}
/* Prevent gradient layers from tiling + make them oversized */
body{
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size:
    1600px 1100px,   /* first radial */
    1300px 900px,    /* second radial */
    auto;            /* solid fallback */
  background-position:
    80% -10%,
    -10% 10%,
    center;
}

/* translateZ to help with iOS/Safari */
@supports (-webkit-touch-callout: none) {
  body { transform: translateZ(0); }
}
/* Mobile background correction for gradient cutoff */
@media (max-width: 768px) {
  body {
    background-position:
      85% -10%,    /* first radial */
      10% 10%,     /* second radial (moved further left) */
      center;
    background-size:
      1800px 1200px,
      1500px 1000px,
      auto;
    background-attachment: fixed; /* helps prevent lateral cutoff */
  }
}