/* ===== VARIABLES - CHANGE COLORS HERE ===== */
:root {
  --primary: #29543D;
  --secondary: #F86060;/*#fdd062*/
  --bg: #faf8f5;
  --white: #ffffff;
  --border: #e4e4e7;
  --text: #18181b;
  --muted: #71717a;
  --input-bg: #fbfbfb;
  --radius: 16px;
  --radius-sm: 10px;
}

/* ===== RESET & BASE ===== */
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  min-height: 100vh;
}

/* ===== DEMO WEBSITE (YOU CAN REMOVE) ===== */
.navbar {
  position: sticky; top:0; z-index:20;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.nav-inner {
  max-width:1200px; margin:0 auto;
  padding:0 24px; height:68px;
  display:flex; align-items:center; justify-content:space-between;
}
.logo-wrap { display:flex; align-items:center; gap:10px; }
.logo-icon {
  width:36px; height:36px; border-radius:10px;
  background: var(--primary); color:#fff;
  display:grid; place-items:center; font-weight:700;
}
.logo-text { font-weight:600; font-size:18px; letter-spacing:-0.02em; }
.logo-badge {
  display:none; font-size:10px; letter-spacing:0.15em; font-weight:600;
  background:#f4f4f5; color:#71717a; padding:4px 8px; border-radius:999px;
}
@media(min-width:768px){ .logo-badge{ display:inline-block; } }
.nav-cta {
  padding:0 20px; height:40px; border-radius:999px; border:none;
  background: var(--secondary); color:#fff; font-weight:600; font-size:14px; cursor:pointer;
  transition: filter 0.2s;
}
.nav-cta:hover { filter: brightness(0.95); }
.hero { max-width:1200px; margin:0 auto; padding:60px 24px; }
.hero h1 { font-size: clamp(32px, 5vw, 56px); line-height:0.95; letter-spacing:-0.04em; font-weight:800; }
.hero h1 span { color: var(--primary); }
.hero p { margin-top:16px; max-width:600px; color:#52525b; font-size:18px; }

/* ===== POPUP OVERLAY ===== */
.popup-overlay {
  position: fixed; inset:0;
  background: rgba(0,0,0,0.48);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 1000;
  opacity:0; visibility:hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.popup-overlay.active {
  opacity:1; visibility:visible;
}

/* ===== POPUP WRAPPER ===== */
.popup-wrapper {
  position: fixed;
  top:50%; left:50%;
  transform: translate(-50%, -48%) scale(0.94);
  z-index: 1001;
  width: calc(100% - 32px);
  max-width: 440px;
  opacity:0; visibility:hidden;
  transition: all 0.42s cubic-bezier(0.16,1,0.3,1);
}
.popup-wrapper.active {
  opacity:1; visibility:visible;
  transform: translate(-50%, -50%) scale(1);
}

.popup-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0,0,0,0.18), 0 8px 24px rgba(0,0,0,0.1);
  overflow: hidden;
  position: relative;
}

/* Close Button */
.popup-close {
  position: absolute; top:14px; right:14px;
  width:32px; height:32px; border-radius:999px;
  border: none; background: rgba(255,255,255,0.18);
  color: #fff; display:grid; place-items:center;
  cursor:pointer; z-index:2;
  transition: background 0.2s;
}
.popup-close:hover { background: rgba(255,255,255,0.28); }

/* Header */
.popup-header {
  background: var(--primary);
  color: #fff;
  padding: 22px 24px 5px;
}
.popup-header h2 {
  font-size:20px; font-weight:700; letter-spacing:-0.02em; color: #fff;line-height:1.2;
}
.popup-header p {
  margin-top:4px; font-size:12.5px; opacity:0.85; color: #fff; font-weight:400;
}

/* Body */
.popup-body { padding: 20px 22px 22px; }

/* Form */
.form-group { margin-bottom:0px; }
.form-group label {
  display:block; font-size:11.5px; font-weight:600;
  text-transform: uppercase; letter-spacing:0.06em; color:#3f3f46;
  margin-bottom:6px;
}
.form-group label span { color: var(--secondary); }

.form-group input,
.select-wrap select {
  width:100%; height:46px; padding:0 12px;
  border:1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  font-size:14px; outline:none;
  transition: border-color 0.2s;
  font-family: inherit;
}
.form-group input:focus,
.select-wrap select:focus { border-color: var(--primary); }
.form-group input.error,
.select-wrap select.error { border-color: var(--secondary) !important; }

.select-wrap { position:relative; }
.select-wrap select {
  appearance:none; -webkit-appearance:none;
  padding-right:36px; cursor:pointer;
}
.select-arrow {
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  pointer-events:none; color:#a1a1aa;
}

.error-msg {
  display:block; margin-top:6px;
  font-size:11px; font-weight:500; color: var(--secondary);
  min-height:14px;
}

/* Submit */
.submit-btn {
  width:100%; height:48px; margin-top:6px;
  border:none; border-radius: var(--radius-sm);
  background: var(--secondary); color:#fff;
  font-weight:600; font-size:14px; letter-spacing:0.02em;
  cursor:pointer; transition: background 0.3s ease, transform 0.1s;
}
.submit-btn:hover { background: var(--primary); }
.submit-btn:active { transform: scale(0.99); }

.form-note {
  margin-top:10px; text-align:center;
  font-size:11px; color:#a1a1aa; line-height:1.4;
}

/* Thank You State */
.thankyou-state {
  display:none; text-align:center; padding:12px 0 4px;
}
.thankyou-state.active { display:block; }
.check-circle {
  width:72px; height:72px; margin:0 auto 16px;
  border-radius:999px; background:#eaf6ee;
  display:grid; place-items:center;
  animation: checkPop 0.4s 0.1s cubic-bezier(0.34,1.56,0.64,1) both;
}
.check-path {
  stroke-dasharray:48; stroke-dashoffset:48;
  animation: checkDraw 0.5s 0.25s ease forwards;
}
.thankyou-state h3 { font-size:22px; font-weight:700; letter-spacing:-0.02em; }
.thankyou-state p {
  margin-top:8px; font-size:14px; color:#52525b;
  line-height:1.5; max-width:300px; margin-inline:auto;
}
.close-thanks-btn {
  width:100%; height:44px; margin-top:22px;
  border:none; border-radius: var(--radius-sm);
  background:#18181b; color:#fff; font-weight:600; font-size:14px;
  cursor:pointer; transition: background 0.2s;
}
.close-thanks-btn:hover { background:#000; }
.auto-close-text {
  display:block; margin-top:10px;
  font-size:11px; color:#a1a1aa;
}

/* Animations */
@keyframes checkDraw { to { stroke-dashoffset:0; } }
@keyframes checkPop {
  0% { transform: scale(0.7); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* Responsive */
@media(max-width:480px){
  .popup-wrapper { width: calc(100% - 20px); }
  .popup-header { padding:20px 18px 16px; }
  .popup-body { padding:16px 18px 18px; }
}