@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;800&display=swap');

:root{
  /* core */
  --bg-deep:#05070d;
  --bg-top:#0b0f17;
  --panel:#0b0f17;
  --text:#e8ecf7;
  --muted:#dfe8ff;

  /* glow gradient */
  --glow-a:#00f0ff;
  --glow-b:#8a2be2;

  /* smoke */
  --smoke1: rgba(68,140,255,0.08);
  --smoke2: rgba(120,200,255,0.06);
  --smoke3: rgba(40,110,255,0.05);

  --radius:18px;
  --radius2:14px;
  --max:1100px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  -webkit-text-size-adjust:100%;
}

/* ===== Luxury dark background + blue smoke (no images) ===== */
html, body{
  background:
    radial-gradient(1300px 900px at 50% 40%, var(--bg-top) 0%, var(--bg-deep) 70%) fixed;
}

/* Smoke layer */
html::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:
    radial-gradient(900px 700px at 70% 25%, var(--smoke1) 0%, transparent 60%),
    radial-gradient(750px 650px at 25% 30%, var(--smoke2) 0%, transparent 62%),
    radial-gradient(900px 800px at 80% 75%, var(--smoke3) 0%, transparent 65%),
    radial-gradient(700px 600px at 20% 78%, var(--smoke1) 0%, transparent 60%),
    radial-gradient(1000px 900px at 50% 55%, rgba(160,210,255,0.035) 0%, transparent 70%);
  mix-blend-mode: screen;
  opacity:.75;
}

/* Micro grain */
html::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:
    linear-gradient(0deg, rgba(255,255,255,0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.01) 1px, transparent 1px);
  background-size:4px 4px, 3px 3px;
  opacity:.12;
}

a{ color:inherit; text-decoration:none; }
a:any-link{
  text-decoration-thickness:.02em;
  text-underline-offset:.16em;
}
a:hover{ text-decoration:none; }

.container{ max-width:var(--max); margin:0 auto; padding:0 20px; }

/* sticky footer */
body{ display:flex; flex-direction:column; }
main{ flex:1; }
footer{ margin-top:auto; padding:18px 0; border-top:1px solid rgba(255,255,255,.08); }

/* ===== Header ===== */
header{
  padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.header-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  letter-spacing:.2px;
}
.brand-dot{
  width:10px;height:10px;border-radius:999px;
  background:linear-gradient(135deg,var(--glow-a),var(--glow-b));
  box-shadow:0 0 18px rgba(0,200,255,.35);
}

/* nav */
.nav{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.link{
  display:inline-block;
  padding:10px 18px;
  margin:6px 0;
  border-radius:14px;
  background:var(--panel);
  border:2px solid transparent;
  background-image:
    linear-gradient(var(--panel),var(--panel)),
    linear-gradient(135deg,var(--glow-a),var(--glow-b));
  background-origin:border-box;
  background-clip:padding-box,border-box;
  box-shadow:0 0 18px rgba(0,200,255,.14);
  color:var(--muted);
  transition: box-shadow .18s, transform .18s;
}
.link:hover{
  box-shadow:0 0 26px rgba(0,200,255,.24);
  transform:translateY(-1px);
}

/* ===== Buttons ===== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 14px;
  border-radius:12px;
  font-weight:800;
  background:#e7fbff;
  color:#0a1220;
  border:1px solid transparent;
  box-shadow:0 0 14px rgba(0,200,255,.18);
  cursor:pointer;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 0 22px rgba(0,200,255,.24); }
.btn.secondary{
  background:transparent;
  color:var(--muted);
  border:1px solid rgba(0,200,255,.4);
  box-shadow:none;
}
.btn.full{ width:100%; }
.btn:disabled{ opacity:.55; cursor:not-allowed; transform:none; }

/* ===== Forms ===== */
.label{ display:block; font-size:.9rem; color:var(--muted); margin-bottom:6px; opacity:.9; }
.input{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(0,200,255,.16);
  background: rgba(11,15,23,.55);
  color:var(--text);
  outline:none;
}
.input:focus{
  border-color:rgba(0,224,255,.7);
  box-shadow:0 0 0 4px rgba(0,240,255,.12);
}
textarea.input{ resize:vertical; }

/* ===== Cards ===== */
.card{
  background:var(--panel);
  border-radius:18px;
  padding:22px 18px;
  border:2px solid transparent;
  background-image:
    linear-gradient(var(--panel),var(--panel)),
    linear-gradient(135deg,var(--glow-a),var(--glow-b));
  background-origin:border-box;
  background-clip:padding-box,border-box;
  box-shadow:0 0 22px rgba(0,200,255,.14);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.card:hover{ box-shadow:0 0 30px rgba(0,200,255,.24); }
.card.tight{ padding:16px 14px; }
.card.soft{
  background: rgba(11,15,23,.55);
  border:1px solid rgba(0,200,255,.18);
  background-image:none;
  box-shadow:none;
}

/* grid helpers */
.grid{ display:grid; gap:18px; }
.grid.two{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid.three{ grid-template-columns:repeat(3,minmax(0,1fr)); }

@media (max-width:1024px){
  .grid.three{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:560px){
  .grid.two, .grid.three{ grid-template-columns:1fr; }
}

/* Alerts */
.alert{
  margin:12px 0;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(0,200,255,.30);
  background: rgba(0,224,255,.08);
}

/* ===== Home sections (from your old site) ===== */
.sh-offer-wrapper, .sh-how-wrapper{
  max-width:var(--max);
  margin:60px auto;
  padding:0 20px;
  text-align:center;
  color:var(--text);
}
.sh-offer-wrapper h2, .sh-how-wrapper h2{
  font-size:2rem;
  font-weight:800;
  margin-bottom:40px;
  color:#fff;
}
.offer-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:24px;
}
.offer-card{
  background:var(--panel);
  padding:28px 22px;
  border-radius:18px;
  border:2px solid transparent;
  background-image:linear-gradient(var(--panel),var(--panel)),
                   linear-gradient(135deg,var(--glow-a),var(--glow-b));
  background-origin:border-box;
  background-clip:padding-box,border-box;
  box-shadow:0 0 25px rgba(0,200,255,.16);
  transition: transform .2s ease, box-shadow .2s ease;
  text-align:left;
}
.offer-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 0 35px rgba(0,200,255,.18);
}
.offer-card h3{
  font-size:1.3rem;
  margin:0 0 12px;
  font-weight:700;
  color:#00e0ff;
}
.offer-card p{ margin:0; }

.how-grid{ display:grid; gap:18px; grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:1024px){ .how-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .how-grid{ grid-template-columns:1fr; } }

.how-card{
  background:var(--panel);
  padding:22px 18px;
  border-radius:18px;
  text-align:left;
  border:2px solid transparent;
  background-image:linear-gradient(var(--panel),var(--panel)),
                   linear-gradient(135deg,var(--glow-a),var(--glow-b));
  background-origin:border-box;
  background-clip:padding-box,border-box;
  box-shadow:0 0 22px rgba(0,200,255,.16);
  position:relative;
  overflow:hidden;
}
.how-card.highlight{ text-align:center; margin-bottom:16px; }
.how-card.highlight h3{ color:#00e0ff; margin:0 0 8px; font-size:1.3rem; font-weight:800; }

.how-step{
  width:36px;height:36px;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:800;color:#0b1220;background:#e7fbff;
  margin-bottom:10px; box-shadow:0 0 14px rgba(0,200,255,.35);
}
.how-card h3{ margin:0 0 8px; font-size:1.15rem; font-weight:700; color:#00e0ff; }
.bullets{ margin:0 0 8px 0; padding-left:18px; line-height:1.6; }
.bullets li{ margin:4px 0; }
.inline{ color:#8fd7ff; text-decoration:underline; text-underline-offset:3px; }

/* Mobile menu (your current header pattern) */
.mobile-toggle{ display:none; }
@media (max-width:860px){
  .desktop-nav{ display:none !important; }
  .mobile-toggle{ display:inline-flex; }
  #navtoggle:checked ~ .mobile-panel{
    display:flex !important;
    flex-direction:column;
    gap:10px;
    margin-top:12px;
  }
}

/* ===== Mobile drawer menu (stable) ===== */
.mnav-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  backdrop-filter:saturate(60%) blur(1px);
  z-index:9998;
}
.mnav-drawer{
  display:none;
  position:fixed;
  top:0; right:0; bottom:0;
  width:min(86vw, 360px);
  background:var(--panel);
  border-left:1px solid rgba(255,255,255,.08);
  box-shadow:-18px 0 40px rgba(0,0,0,.55);
  z-index:9999;
  padding:14px;
  overflow:auto;
}
.mnav-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
}
.mnav-links{
  display:flex;
  flex-direction:column;
  gap:10px;
}
body.mnav-open .mnav-overlay{ display:block; }
body.mnav-open .mnav-drawer{ display:block; }

@media (min-width:861px){
  .mnav-overlay, .mnav-drawer{ display:none !important; }
}

/* iOS input zoom fix */
input, select, textarea, button{
  font-size:16px;
}

/* iOS input zoom fix (force) */
input, select, textarea, button,
.input,
[type="text"], [type="email"], [type="password"], [type="number"], [type="tel"], [type="search"]{
  font-size:16px !important;
}

/* ===== Desktop calm mode (more breathing room) ===== */
@media (min-width: 1024px){
  body{ font-size:15px; }
  h1{ font-size:2.1rem; }
  h2{ font-size:1.7rem; }
  h3{ font-size:1.15rem; }

  .container{ max-width: 1120px; }

  .card{ padding:18px 16px; }
  .card.tight{ padding:14px 12px; }

  .btn{ padding:9px 12px; border-radius:12px; font-weight:800; }
  .link{ padding:9px 14px; border-radius:14px; }

  .grid{ gap:16px; }
  .offer-grid{ gap:18px; }
  .offer-card{ padding:22px 18px; }
  .how-card{ padding:18px 16px; }

  .sh-offer-wrapper, .sh-how-wrapper{ margin:48px auto; }
  .sh-offer-wrapper h2, .sh-how-wrapper h2{ margin-bottom:28px; }

  header{ padding:12px 0; }
}

/* ===== Calm mode v2 (global) ===== */
:root{
  --radius:16px;
}

/* Typography */
body{ font-size:15px; }
h1{ font-size:2.0rem; line-height:1.15; margin:0 0 10px; }
h2{ font-size:1.6rem; line-height:1.2; margin:0 0 10px; }
h3{ font-size:1.1rem; line-height:1.25; }

/* Reduce “thickness” + shadows */
.card{
  padding:16px 14px;
  border-width:1px;
  box-shadow: 0 0 14px rgba(0,200,255,.12);
}
.card.tight{ padding:12px 12px; }
.card:hover{ box-shadow: 0 0 18px rgba(0,200,255,.16); }

.link{
  padding:8px 12px;
  border-width:1px;
  box-shadow: 0 0 12px rgba(0,200,255,.12);
}
.link:hover{ transform: translateY(-1px); box-shadow:0 0 16px rgba(0,200,255,.18); }

.btn{
  padding:8px 12px;
  box-shadow: 0 0 12px rgba(0,200,255,.16);
}
.btn:hover{ transform: translateY(-1px); box-shadow: 0 0 16px rgba(0,200,255,.20); }

/* Layout spacing */
.grid{ gap:14px; }
.sh-offer-wrapper, .sh-how-wrapper{ margin:42px auto; }
.sh-offer-wrapper h2, .sh-how-wrapper h2{ margin-bottom:22px; }

/* Offer/How cards a bit smaller */
.offer-card{ padding:20px 16px; box-shadow:0 0 14px rgba(0,200,255,.12); border-width:1px; }
.offer-card:hover{ transform: translateY(-2px); box-shadow:0 0 18px rgba(0,200,255,.18); }
.how-card{ padding:16px 14px; box-shadow:0 0 14px rgba(0,200,255,.12); border-width:1px; }

/* Inputs slightly tighter */
.input{ padding:11px 12px; border-radius:12px; }

/* iOS zoom fix (keep) */
input, select, textarea, button,
.input,
[type="text"], [type="email"], [type="password"], [type="number"], [type="tel"], [type="search"]{
  font-size:16px !important;
}

/* Logo in header */
.brand img{ height:40px; width:auto; display:block; }
@media (max-width:560px){
  .brand img{ height:34px; }
}

/* Logo sizing (override) */
.brand img{
  height: 46px !important;
  width: auto !important;
  display: block;
}
@media (max-width:560px){
  .brand img{ height: 38px !important; }
}

/* Logo sizing (mobile override) */
@media (max-width:560px){
  .brand img{ height: 26px !important; }
}

/* Mobile font fallback (reduces render-blocking) */
@media (max-width:560px){
  body{
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  }
}

/* === UX Mobile patch (safe append) === */
@media (max-width:560px){
  /* Make grids stack on small screens */
  .grid.two{ grid-template-columns: 1fr !important; }
  .grid.three{ grid-template-columns: 1fr !important; }

  /* Slightly tighter cards on mobile */
  .card{ padding:14px !important; }

  /* Buttons/inputs behave nicer when inside flex forms */
  form[method="GET"], form[method="POST"]{
    max-width: 100%;
  }
  form[method="GET"] input, form[method="POST"] input,
  form[method="GET"] textarea, form[method="POST"] textarea,
  form[method="GET"] select, form[method="POST"] select{
    width: 100%;
  }
}