/* ========= STELLAR SYSTEMS — CONTACT.CSS (NAV REMOVED; USE nav.css) ========= */
*{margin:0;padding:0;box-sizing:border-box;}

:root{
  --container:1200px; --gutter:24px; --radius:16px;
  --s-1:12px; --s-2:20px; --s-3:32px; --s-4:48px; --s-5:64px; --s-6:100px;

  --bg:#0b0b13; --ink:#fff; --ink-2:#e2e2f0; --muted:#c8c5e0;
  --purple:#8f5fff; --purple-2:#b68aff; --blue:#3b82f6;

  --glass:rgba(15,15,25,.58); --border:rgba(255,255,255,.06);
  --elev-1:0 8px 18px rgba(0,0,0,.16); --elev-2:0 10px 26px rgba(0,0,0,.28);
}

html,body{
  font-family:'Space Grotesk',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--bg); color:var(--ink); scroll-behavior:smooth; overflow-x:clip;
}
body{ scroll-padding-top:120px; }
.container{ max-width:var(--container); margin:0 auto; padding:0 var(--gutter); }
section{ position:relative; z-index:2; padding:var(--s-6) 0; }

/* background hint */
body::before{
  content:""; position:fixed; inset:0; z-index:0;
  background: radial-gradient(ellipse at center, #3c1a77 0%, var(--bg) 100%);
  opacity:.06;
}

/* ===== Hero ===== */
.hero{
  position:relative; text-align:center;
  padding:calc(var(--s-6) + 120px) 0 var(--s-5);
  background:radial-gradient(circle at 35% -10%, #44208a 0%, rgba(68,32,138,.35) 35%, var(--bg) 92%);
  box-shadow:inset 0 -60px 80px -60px rgba(143,95,255,.16);
}
.gradient-bg{
  position:absolute; inset:-30% -30% auto -30%;
  height:160%; background:radial-gradient(ellipse at 60% 40%, #7429c6, #111827);
  filter:blur(140px); opacity:.34; z-index:0;
}
.hero .container{ position:relative; z-index:1; }
.hero h1{ font-size: clamp(2rem, 4.5vw + 1rem, 3rem); letter-spacing:-.02em; margin-bottom:14px; }
.subtitle{ color:#c5c5df; margin-bottom:18px; }
.hero-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
@media (max-width:520px){
  .container{ padding:0 18px; }
  .hero-actions .btn-primary,
  .hero-actions .btn-secondary{ width:100%; }
}

/* ===== Buttons ===== */
.btn-primary,.btn-secondary{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:46px; line-height:46px; padding:0 20px; border-radius:10px; text-decoration:none; white-space:nowrap;
}
.btn-primary{ background:linear-gradient(135deg,var(--purple),var(--blue)); color:#fff; font-weight:600; box-shadow:0 0 18px rgba(139,92,246,.28); }
.btn-secondary{ border:1px solid rgba(143,95,255,.45); color:#d9cffd; background:rgba(143,95,255,.10); }
.btn-link{ color:var(--purple-2); text-decoration:none; font-weight:700; }
.btn-link:hover{ text-decoration:underline; }

/* ===== Contact Layout ===== */
#form{ scroll-margin-top:120px; }
.contact .grid{
  display:grid; grid-template-columns: 380px 1fr; gap:var(--s-3);
}
@media (max-width:980px){ .contact .grid{ grid-template-columns:1fr; } }

.info .pane{
  background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.08);
  border-radius:16px; padding:18px; margin-bottom:12px; box-shadow:var(--elev-2);
}
.info h3{ font-size:1.05rem; margin-bottom:6px; }
.info .link{ color:#eae6ff; text-decoration:none; }
.info .muted{ color:#b9b5d6; display:block; margin-top:6px; }
.badges{ list-style:none; display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; }
.pill{
  display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px;
  background:rgba(143,95,255,.12); border:1px solid rgba(143,95,255,.35); color:#e8e3ff; font-weight:700; font-size:.82rem;
}

/* ===== Form ===== */
.form-wrap{
  position:relative; background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.08);
  border-radius:20px; padding:24px; box-shadow:var(--elev-2);
}
.toast{
  position:absolute; top:-14px; right:16px; transform:translateY(-100%);
  background:rgba(15,15,25,.85); border:1px solid rgba(255,255,255,.12); padding:10px 14px; border-radius:10px;
  font-weight:600; color:#eae6ff; box-shadow:0 10px 24px rgba(0,0,0,.35);
}
.toast[data-type="error"]{ color:#ffd6d6; border-color:rgba(255,106,106,.45); }
.toast[data-type="success"]{ color:#d7ffdf; border-color:rgba(72,187,120,.45); }
.hp{ position:absolute !important; left:-99999px !important; opacity:0 !important; }

.row.two{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-2); }
@media (max-width:720px){ .row.two{ grid-template-columns:1fr; } }

.field{ display:flex; flex-direction:column; gap:8px; margin-bottom:var(--s-2); }
.field label, .label{ color:#e6e3ff; font-weight:600; font-size:.95rem; }
.field input, .field select, .field textarea{
  background:rgba(15,15,25,.55); color:#fff; border:1px solid rgba(255,255,255,.12);
  padding:12px 14px; border-radius:12px; outline:none; font:inherit;
  transition:border .2s ease, box-shadow .2s ease, background .2s ease;
}
.field textarea{ resize:vertical; }
.field input::placeholder, .field textarea::placeholder{ color:#a9a6c7; }
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:rgba(143,95,255,.55);
  box-shadow:0 0 0 4px rgba(143,95,255,.18);
  background:rgba(15,15,25,.7);
}

/* Checkbox chips */
.chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; }
.chips input{ position:absolute; opacity:0; pointer-events:none; }
.chips label{ position:relative; }
.chips label span{
  display:inline-flex; align-items:center; padding:10px 14px; border-radius:999px; cursor:pointer;
  border:1px solid rgba(143,95,255,.35); background:rgba(143,95,255,.08); color:#e8e3ff; font-weight:700; font-size:.9rem;
  transition:transform .15s ease, box-shadow .15s ease, background .2s ease;
}
.chips input:checked + span{
  background:linear-gradient(90deg,var(--purple),var(--blue)); color:#fff; border-color:transparent;
  box-shadow:0 8px 24px rgba(139,92,246,.35);
}
.chips label:hover span{ transform:translateY(-1px); }

.consent{ display:flex; align-items:flex-start; gap:10px; margin:6px 0 var(--s-2); color:#d9d6ee; }
.consent input{ margin-top:3px; transform:scale(1.05); }

.actions{ display:flex; gap:12px; flex-wrap:wrap; }
.actions .btn-primary[disabled]{ opacity:.6; cursor:not-allowed; }

/* Success panel */
.success-panel{
  text-align:left;
  background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.08);
  border-radius:14px; padding:24px; box-shadow:var(--elev-2);
}
.success-panel h3{ font-size:1.35rem; margin-bottom:6px; }
.success-actions{ display:flex; gap:12px; margin-top:12px; }

/* ===== Final CTA / Footer ===== */
.final-cta{
  text-align:center; background:linear-gradient(145deg,#6f2bd5,#3b1b75); border-radius:20px; color:#fff;
  box-shadow:0 10px 30px rgba(139,92,246,.25);
}
.final-cta .container{ display:grid; place-items:center; gap:var(--s-2); padding:var(--s-6) var(--gutter); }
.final-cta h2{ font-size:2.2rem; }
.footer{ text-align:center; padding:40px var(--gutter); font-size:.9rem; color:#888; border-top:1px solid rgba(255,255,255,.08); margin-top:var(--s-6); }
/* === Mobile optimization for the success panel === */
@media (max-width: 640px){
  .form-wrap{ padding:18px; }
  .success-panel{ text-align:center; padding:20px; }
  .success-panel h3{ font-size:1.2rem; }
  .success-actions{
    flex-direction:column;
    align-items:stretch;
  }
  .success-actions .btn-primary,
  .success-actions .btn-secondary{
    width:100%;
    height:48px;
    line-height:48px;
  }
}