:root{
  --plum:#5B2E8C; /* brand primary */
  --plum-700:#4A2573;
  --gold:#F0C419; /* accent */
  --teal:#2E8C7D; /* secondary accent */
  --ink:#17151F;
  --muted:#6B6478;
  --surface:#ffffff;
  --bg:#FBFAFF;

  /* contact modal vars */
  --primary: var(--plum);
  --accent: var(--gold);
  --modal-radius: 18px;
  --fab-h: 44px;
  --fab-gap: 18px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
}
@media (prefers-color-scheme: dark){
  :root{
    --surface:#16131D;
    --bg:#0E0B14;
    --ink:#F4F2F8;
    --muted:#A9A3B6;
  }
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(240,196,25,.12), transparent 60%),
    radial-gradient(1000px 500px at 110% 10%, rgba(46,140,125,.10), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg));
}
.container{min-height:100dvh;display:grid;grid-template-rows:auto 1fr auto;align-items:stretch}
header{display:flex;align-items:center;justify-content:space-between;padding:24px clamp(16px, 3vw, 40px);max-width:1100px;margin:0 auto;width:100%}
.brand{display:flex;gap:12px;align-items:center;text-decoration:none;color:inherit}
.logo{width:40px;height:40px;border-radius:12px;background: conic-gradient(from 220deg at 50% 50%, var(--gold), var(--plum), var(--teal), var(--gold));display:grid;place-items:center;box-shadow: 0 10px 30px rgba(91,46,140,.25)}
.logo span{font-weight:800;color:white;letter-spacing:.5px}
.wordmark{font-weight:800;font-size:20px;letter-spacing:.4px}
main{display:grid;place-items:center;padding:0 clamp(16px, 3vw, 40px)}
.hero{max-width:1100px;width:100%;display:grid;grid-template-columns:1.1fr .9fr;gap:min(6vw,60px);align-items:center;margin:24px auto 40px}
@media (max-width: 900px){.hero{grid-template-columns:1fr;gap:28px}}
.badge{display:inline-flex;gap:10px;align-items:center;padding:8px 12px;border-radius:999px;background:rgba(91,46,140,.09);color:var(--plum);font-weight:600;font-size:14px}
.badge .dot{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 6px rgba(240,196,25,.18)}
h1{font-size:clamp(32px, 5vw, 56px);line-height:1.05;margin:14px 0 12px;font-weight:900;letter-spacing:.2px}
.subtitle{font-size:clamp(16px, 2vw, 20px);line-height:1.5;color:var(--muted);margin:0 0 22px}
.points{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 28px}
.pill{padding:8px 12px;border:1px solid rgba(107,100,120,.28);border-radius:999px;font-size:14px;color:var(--muted);backdrop-filter:saturate(120%)}
.card{background:var(--surface);border:1px solid rgba(107,100,120,.18);border-radius:18px;padding:18px;box-shadow:0 10px 40px rgba(16,7,29,.08)}
.newsletter{display:flex;gap:10px;flex-wrap:wrap}
.newsletter input{flex:1 1 260px;padding:14px 14px;border-radius:12px;border:1px solid rgba(107,100,120,.32);background:transparent;color:inherit;font-size:16px;outline:none}
.newsletter button{padding:14px 18px;border:0;border-radius:12px;background:var(--plum);color:white;font-weight:700;cursor:pointer}
.newsletter button:hover{filter:brightness(1.05)}
.confidence{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-top:14px;color:var(--muted);font-size:14px}
.confidence .lock{width:18px;height:18px;border-radius:4px;background:linear-gradient(180deg, var(--plum), var(--plum-700));display:inline-grid;place-items:center;color:white;font-weight:900}
.pane{position:relative}
.glass{position:relative;overflow:hidden;border-radius:20px;padding:20px;min-height:300px;background:linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.35));border:1px solid rgba(255,255,255,.45);backdrop-filter: blur(8px)}
@media (prefers-color-scheme: dark){.glass{background:linear-gradient(180deg, rgba(22,19,29,.5), rgba(22,19,29,.25));border-color:rgba(255,255,255,.08)}}
.grid{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:12px}
@media (max-width:520px){.grid{grid-template-columns:1fr}}
.tile{padding:14px;border-radius:14px;border:1px dashed rgba(107,100,120,.35)}
.tile b{display:block;margin-bottom:6px}
footer{padding:24px clamp(16px, 3vw, 40px) 40px;max-width:1100px;margin:0 auto;width:100%;display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;color:var(--muted);font-size:14px}
.social a{color:var(--muted);text-decoration:none;margin-right:16px}
.social a:hover{color:var(--ink)}
.fade-up{opacity:0;transform:translateY(10px);animation:fadeUp .7s ease forwards var(--delay, 0s)}
@keyframes fadeUp{to{opacity:1;transform:none}}
.countdown{font-variant-numeric: tabular-nums;display:flex;gap:10px;margin-top:8px}
.time{display:grid;place-items:center;border-radius:12px;padding:10px 12px;border:1px solid rgba(107,100,120,.28);min-width:64px}
.time .num{font-size:20px;font-weight:800}
.time .lbl{font-size:11px;color:var(--muted)}

/* ============================================================================
   09) CONTACT — FAB, MODAL, FORM (tight + green checkboxes)
   ========================================================================== */

/* FAB: always above footer */
.contact-fab{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:calc(var(--fab-gap) + var(--safe-bottom));
  z-index:3000;                       /* above page content & footer */
  height:var(--fab-h);
  line-height:calc(var(--fab-h) - 2px);
  padding:0 18px;

  background:var(--primary);
  color:#fff;
  border:none;
  border-radius:999px;
  font-weight:700;
  font-size:1.05rem;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(0,0,0,.15);
}
.contact-fab:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* Hide FAB when modal open (JS toggles body.modal-open) */
body.modal-open .contact-fab{ display:none; }

/* Modal Shell (iPhone-safe) */
.modal[hidden]{ display:none; }
.modal{
  position:fixed;
  inset:0;
  z-index:3500;
  display:grid;
  place-items:center;
  overflow:hidden;                                   /* page doesn’t scroll */
  padding:var(--safe-top) 0 var(--safe-bottom);
  background:transparent;
}
.modal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.42) }

/* Modal Card: uses desktop space to avoid unnecessary scroll */
.modal-card{
  position:relative;
  z-index:1;
  box-sizing:border-box;
  width:clamp(420px, 80vw, 780px);                  /* wider on desktops */
  max-height:min(94svh, 1000px);
  overflow:auto;                                    /* rarely scrolls */

  background:#fff;
  color:#333;
  color-scheme:light;
  border-radius:var(--modal-radius);
  box-shadow:0 22px 70px rgba(0,0,0,.28);

  padding:24px 28px 20px;                           /* balanced, not loose */
}

/* Modal Close */
.modal-close{
  position:absolute;
  top:10px; right:10px;
  width:34px; height:34px;
  border:none; border-radius:10px;
  background:#f1eef7; cursor:pointer; font-size:16px;
}

/* Logo header centered */
.modal-logo{
  display:flex;
  justify-content:center;
  align-items:center;
  margin:4px 0 8px;
}

/* Form Layout (tighter labels & compact fields) */
#contact-form{
  display:flex;
  flex-direction:column;
  gap:8px;                                /* tighter overall gap */
  max-width:680px;
  margin:6px auto 0;
}
#contact-form .tight-label{
  margin:4px 0 2px;                       /* closer label-to-input */
  font-weight:600;
  line-height:1.15;
}
#contact-form input,
#contact-form textarea{
  margin:0 0 6px;
  padding:10px 12px;
}

/* Message placeholder copy */
#message::placeholder{
  color:#8a8a8a; opacity:1;
}

/* Phone helper sits close to field */
#phone + .help{
  display:block;
  margin:2px 0 6px;                       /* tighter to phone field */
  font-size:.85rem;
  color:#777;
}

/* Consents: text left, checkbox at far right */
.consents{
  display:grid;
  gap:8px;
  margin-top:2px;
}
.consent-row{
  display:grid;
  grid-template-columns:1fr auto;   /* label expands, box sticks right */
  align-items:center;
  column-gap:10px;
}
.consent-row .label-text{
  margin-right:6px;
  line-height:1.2;
}

/* Universal square GREEN checkbox (robust across browsers) */
.consent-row input[type="checkbox"]{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  width:18px; height:18px;
  border:2px solid #2e7d32;    /* green outline */
  border-radius:0;              /* square box (no rounded rectangle) */
  background:#fff;
  cursor:pointer;
  position:relative;
  justify-self:end;             /* push to far right */
  outline:none;
}
.consent-row input[type="checkbox"]::after{
  content:"";
  position:absolute;
  left:4px; top:0px;
  width:8px; height:12px;
  border-right:2px solid transparent;
  border-bottom:2px solid transparent;
  transform:rotate(45deg);
}
.consent-row input[type="checkbox"]:checked{
  background:#2e7d32;
  border-color:#2e7d32;
}
.consent-row input[type="checkbox"]:checked::after{
  border-right-color:#fff;
  border-bottom-color:#fff;     /* green box with white check */
}
.consent-row input[type="checkbox"]:focus-visible{
  box-shadow:0 0 0 2px rgba(192,108,132,0.35);
}

/* Legal copy (tight & readable) */
.legal{
  margin:6px 0 0;
  font-size:.85rem;
  color:#555;
  line-height:1.45;
}

/* Turnstile right-aligned */
.turnstile-row{
  display:flex;
  justify-content:flex-end;
  margin-top:2px;
  margin-bottom:6px;
}
.turnstile-row .cf-turnstile{ margin:0; }

/* Submit button */
.submit-btn{
  background:var(--primary); color:#fff; border:none;
  padding:12px 14px; border-radius:10px; font-weight:700;
  width:min(60%, 320px); margin:8px auto 0; cursor:pointer;
}
.submit-btn[disabled]{ opacity:.65; cursor:progress; }

.form-feedback{ min-height:1.1rem; color:#0a7; margin-top:4px; }