/* ═══════════════════════════════════════════════
   HABITUAL — Global Stylesheet
   ═══════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&display=swap');

:root {
  --teal-deep:   #0d6e6e;
  --teal:        #1a8f8f;
  --teal-light:  #2ab5b5;
  --teal-mist:   #e6f6f6;
  --gold:        #c8973a;
  --gold-light:  #e8b857;
  --gold-pale:   #fdf5e6;
  --white:       #ffffff;
  --off-white:   #f8fafa;
  --ink:         #1a2929;
  --ink-mid:     #3d5252;
  --ink-soft:    #7a9494;
  --border:      #d4e8e8;
  --shadow-teal: 0 8px 40px rgba(13,110,110,.13);
  --radius-lg:   20px;
  --radius-md:   12px;
  --sans:        'DM Sans', sans-serif;
  --serif:       'DM Serif Display', Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--sans); background: var(--white); color: var(--ink); line-height: 1.6; overflow-x: hidden; }

/* ── NAV ── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 64px;
  background: rgba(255,255,255,.93);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow .3s;
}
nav.scrolled { box-shadow: 0 4px 24px rgba(0,0,0,.07); }
.nav-logo {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--serif); font-size: 1.22rem; color: var(--teal-deep);
  text-decoration: none;
}
.nav-logo-mark {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg,var(--teal),var(--teal-light));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(26,143,143,.3);
}
.nav-logo-mark svg { width: 18px; height: 18px; fill: white; }
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a { font-size: .875rem; font-weight: 500; color: var(--ink-mid); text-decoration: none; transition: color .2s; }
.nav-links a:hover, .nav-links a.active { color: var(--teal-deep); }
.btn-nav {
  padding: 9px 22px; border-radius: 50px; font-size: .875rem; font-weight: 600;
  background: var(--teal-deep); color: white; border: none; cursor: pointer;
  transition: background .2s, transform .15s; text-decoration: none; display: inline-block;
}
.btn-nav:hover { background: var(--teal); transform: translateY(-1px); }

/* ── FOOTER ── */
footer {
  background: var(--ink); color: rgba(255,255,255,.65);
  padding: 64px 80px 32px;
}
.footer-top {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.6fr;
  gap: 48px; padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,.1); margin-bottom: 32px;
}
.footer-brand .nav-logo { color: white; margin-bottom: 14px; }
.footer-brand p { font-size: .85rem; line-height: 1.75; max-width: 220px; }
.footer-col h4 {
  font-size: .75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: rgba(255,255,255,.38); margin-bottom: 18px;
}
.footer-col a {
  display: block; font-size: .875rem; color: rgba(255,255,255,.6);
  text-decoration: none; margin-bottom: 10px; transition: color .2s;
}
.footer-col a:hover { color: var(--teal-light); }
.subscribe-label { font-size: .875rem; color: rgba(255,255,255,.8); margin-bottom: 4px; font-weight: 500; }
.subscribe-sub { font-size: .77rem; color: rgba(255,255,255,.38); margin-bottom: 14px; }
.subscribe-form { display: flex; gap: 8px; }
.subscribe-input {
  flex: 1; padding: 11px 16px; border-radius: 50px;
  border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06);
  color: white; font-size: .85rem; outline: none; font-family: var(--sans);
  transition: border-color .2s;
}
.subscribe-input::placeholder { color: rgba(255,255,255,.28); }
.subscribe-input:focus { border-color: var(--teal-light); }
.subscribe-btn {
  padding: 11px 18px; border-radius: 50px; font-size: .82rem; font-weight: 600;
  background: var(--teal); color: white; border: none; cursor: pointer;
  white-space: nowrap; transition: background .2s; font-family: var(--sans);
}
.subscribe-btn:hover { background: var(--teal-light); }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  font-size: .78rem; color: rgba(255,255,255,.3);
}
.footer-bottom-links { display: flex; gap: 20px; }
.footer-bottom-links a { color: rgba(255,255,255,.3); text-decoration: none; transition: color .2s; }
.footer-bottom-links a:hover { color: rgba(255,255,255,.7); }
.gold-rule { height: 3px; border: none; border-radius: 2px; background: linear-gradient(to right,var(--teal-light),var(--gold),transparent); }

/* ── UTILS ── */
.section-tag {
  display: inline-block; font-size: .73rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--teal); margin-bottom: 10px;
}
.section-h2 {
  font-family: var(--serif); font-size: clamp(1.9rem,3vw,2.8rem);
  line-height: 1.2; color: var(--ink); margin-bottom: 14px;
}
.section-sub { font-size: 1rem; color: var(--ink-mid); max-width: 520px; line-height: 1.75; }
.btn-primary {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 34px; border-radius: 50px; font-size: .97rem; font-weight: 600;
  background: linear-gradient(135deg,var(--teal-deep),var(--teal)); color: white;
  border: none; cursor: pointer; text-decoration: none;
  box-shadow: 0 6px 28px rgba(13,110,110,.26);
  transition: transform .2s, box-shadow .2s; font-family: var(--sans);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 36px rgba(13,110,110,.34); }
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: none; }

/* ── INNER PAGE HERO ── */
.page-hero {
  padding: 140px 80px 80px;
  background: var(--off-white);
  border-bottom: 1px solid var(--border);
  position: relative; overflow: hidden;
}
.page-hero::before {
  content: ''; position: absolute; top: -100px; right: -60px;
  width: 480px; height: 480px; border-radius: 50%;
  background: radial-gradient(circle,rgba(42,181,181,.10) 0%,transparent 70%);
  pointer-events: none;
}
.page-hero-breadcrumb { font-size: .8rem; color: var(--ink-soft); margin-bottom: 16px; }
.page-hero-breadcrumb a { color: var(--teal); text-decoration: none; }
.page-hero h1 { font-family: var(--serif); font-size: clamp(2rem,4vw,3.2rem); color: var(--ink); margin-bottom: 14px; line-height: 1.15; }
.page-hero p { font-size: 1.05rem; color: var(--ink-mid); max-width: 560px; line-height: 1.75; }

/* ── RESPONSIVE ── */
@media(max-width:1100px){ nav,footer{ padding-left:32px; padding-right:32px; } .footer-top{ grid-template-columns:1fr 1fr; } .page-hero{ padding:120px 32px 60px; } }
@media(max-width:768px){ .nav-links{ display:none; } .footer-top{ grid-template-columns:1fr; } .page-hero{ padding:110px 24px 48px; } }

/* ── QUIZ ── */
.quiz-section{background:linear-gradient(135deg,var(--teal-deep),#0a5252);padding:80px;text-align:center;}
.quiz-wrap{max-width:620px;margin:0 auto;}
.quiz-wrap h2{font-family:var(--serif);font-size:2rem;color:white;margin-bottom:12px;}
.quiz-wrap p{color:rgba(255,255,255,.75);margin-bottom:36px;font-size:1rem;}
.quiz-card{background:white;border-radius:var(--radius-lg);padding:36px;text-align:left;}
.quiz-q{font-family:var(--serif);font-size:1.2rem;color:var(--ink);margin-bottom:20px;}
.quiz-options{display:flex;flex-direction:column;gap:12px;}
.quiz-opt{padding:14px 18px;border-radius:var(--radius-md);border:2px solid var(--border);background:white;font-size:.95rem;color:var(--ink);cursor:pointer;transition:all .2s;text-align:left;font-family:var(--sans);}
.quiz-opt:hover{border-color:var(--teal);background:var(--teal-mist);}
.quiz-opt.selected{border-color:var(--teal-deep);background:var(--teal-mist);}
.quiz-result{display:none;text-align:center;padding:20px 0;}
.quiz-result .result-emoji{font-size:3rem;margin-bottom:12px;}
.quiz-result h3{font-family:var(--serif);font-size:1.5rem;color:var(--teal-deep);margin-bottom:8px;}
.quiz-result p{font-size:.95rem;color:var(--ink-mid);margin-bottom:20px;}
.quiz-progress{display:flex;gap:8px;justify-content:center;margin-bottom:24px;}
.quiz-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.3);}
.quiz-dot.active{background:white;}
.quiz-dot.done{background:var(--gold);}

/* ── COUNTDOWN ── */
.countdown-bar{background:var(--gold-pale);border-bottom:1px solid rgba(200,151,58,.2);padding:14px;text-align:center;}
.countdown-inner{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;}
.countdown-label{font-size:.85rem;font-weight:600;color:var(--ink);}
.countdown-timer{display:flex;gap:8px;}
.countdown-unit{background:var(--teal-deep);color:white;border-radius:8px;padding:6px 12px;text-align:center;}
.countdown-num{font-family:var(--serif);font-size:1.4rem;line-height:1;display:block;}
.countdown-sub{font-size:.6rem;text-transform:uppercase;letter-spacing:.05em;opacity:.7;}

/* ── EMAIL SIGNUP ── */
.signup-section{background:var(--teal-mist);padding:80px;text-align:center;}
.signup-wrap{max-width:500px;margin:0 auto;}
.signup-wrap h2{font-family:var(--serif);font-size:2rem;color:var(--ink);margin-bottom:12px;}
.signup-wrap p{color:var(--ink-mid);margin-bottom:28px;}
.signup-form{display:flex;gap:10px;flex-direction:column;}
.signup-name,.signup-email{padding:14px 18px;border-radius:50px;border:1.5px solid var(--border);font-size:.95rem;font-family:var(--sans);outline:none;transition:border-color .2s;}
.signup-name:focus,.signup-email:focus{border-color:var(--teal);}
.signup-btn{padding:14px;border-radius:50px;background:var(--teal-deep);color:white;font-size:1rem;font-weight:600;border:none;cursor:pointer;font-family:var(--sans);transition:background .2s;}
.signup-btn:hover{background:var(--teal);}
.signup-success{display:none;background:white;border-radius:var(--radius-lg);padding:28px;margin-top:20px;}
.signup-success h3{font-family:var(--serif);font-size:1.3rem;color:var(--teal-deep);margin-bottom:8px;}
.signup-success p{font-size:.9rem;color:var(--ink-mid);}

/* ── SOCIAL PROOF ── */
.proof-bar{background:white;padding:20px 80px;border-bottom:1px solid var(--border);}
.proof-inner{display:flex;align-items:center;justify-content:center;gap:32px;flex-wrap:wrap;}
.proof-item{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--ink-mid);}
.proof-item strong{color:var(--teal-deep);}
.proof-avatars{display:flex;}
.proof-av{width:28px;height:28px;border-radius:50%;border:2px solid white;margin-right:-8px;background:linear-gradient(135deg,var(--teal),var(--gold));display:flex;align-items:center;justify-content:center;font-size:.6rem;font-weight:700;color:white;}

@media(max-width:768px){.quiz-section,.signup-section{padding:60px 24px;}.proof-bar{padding:20px 24px;}}