/* WYN Gamification Features — drop-in stylesheet
   <link rel="stylesheet" href="assets/wyn-features.css">
*/

/* ─────────────── BODY AGE CALCULATOR ─────────────── */
.bodyage{background:linear-gradient(180deg,#0d0d10,#14141a);padding:140px 0;position:relative;overflow:hidden}
.bodyage::before{content:'';position:absolute;top:30%;left:50%;width:700px;height:700px;transform:translateX(-50%);background:radial-gradient(circle,rgba(212,174,110,0.10),transparent 60%);filter:blur(80px);pointer-events:none}
.bodyage-head{text-align:center;max-width:820px;margin:0 auto 60px;padding:0 32px;position:relative;z-index:2}
.bodyage-head .eyebrow{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:500;letter-spacing:0.22em;text-transform:uppercase;color:#dde0e5;display:inline-block}
.bodyage-head h2{font-family:'Montserrat',sans-serif;font-weight:200;font-size:clamp(40px,5.5vw,76px);color:#f1f3f6;margin:24px 0 20px;letter-spacing:-0.025em}
.bodyage-head .lead{font-size:clamp(16px,1.3vw,19px);color:#dde0e5;line-height:1.65;max-width:62ch;margin:0 auto}
.bodyage-card{max-width:760px;margin:0 auto;padding:0 32px;position:relative;z-index:2}
.bodyage-form{background:linear-gradient(180deg,#1f1f26,#1a1a20);border:1px solid rgba(208,211,216,0.18);padding:48px 40px;box-shadow:0 30px 60px rgba(0,0,0,0.5)}
.ba-progress{display:flex;gap:4px;justify-content:center;margin-bottom:36px}
.ba-dot{width:32px;height:3px;background:#44464c}
.ba-dot.done{background:#d4ae6e}
.ba-q{display:none}
.ba-q.active{display:block;animation:baFade 0.4s ease}
@keyframes baFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.ba-q-text{font-family:'Montserrat',sans-serif;font-weight:300;font-size:22px;color:#f1f3f6;margin-bottom:28px;text-align:center;line-height:1.4}
.ba-q-sub{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:0.18em;color:#b8bbc0;text-align:center;text-transform:uppercase;margin-bottom:14px}
.ba-options{display:grid;gap:10px}
.ba-option{background:#1c1c22;border:1px solid rgba(208,211,216,0.15);color:#dde0e5;padding:18px 22px;font-family:'Montserrat',sans-serif;font-size:15px;font-weight:300;text-align:left;cursor:pointer;transition:all 0.25s;display:flex;justify-content:space-between;align-items:center}
.ba-option:hover{background:#26262e;border-color:#d4ae6e;color:#f1f3f6}
.ba-option .opt-arrow{color:#d4ae6e;opacity:0;transition:opacity 0.25s}
.ba-option:hover .opt-arrow{opacity:1}
.ba-num-input{display:flex;gap:10px;align-items:center;justify-content:center;margin:20px 0}
.ba-num-input input{background:#1c1c22;border:1px solid rgba(208,211,216,0.15);color:#f1f3f6;padding:14px 18px;font-family:'IBM Plex Mono',monospace;font-size:18px;width:120px;text-align:center}
.ba-num-input button{background:#f1f3f6;color:#08080a;border:none;padding:14px 28px;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;font-weight:600;border-radius:100px;cursor:pointer}
.ba-result{display:none;text-align:center}
.ba-result.active{display:block;animation:baFade 0.5s ease}
.ba-result-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:32px;align-items:center;margin:40px 0;padding:32px;background:#1c1c22;border-left:2px solid #d4ae6e}
.ba-result-num{text-align:center}
.ba-result-num .label{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:#b8bbc0;margin-bottom:12px}
.ba-result-num .value{font-family:'Montserrat',sans-serif;font-weight:100;font-size:72px;color:#f1f3f6;line-height:1}
.ba-result-num.bio .value{color:#ecc888}
.ba-result-arrow{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-size:32px;color:#d4ae6e}
.ba-verdict{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-size:clamp(22px,2.4vw,28px);color:#f1f3f6;margin:24px 0;line-height:1.4}
.ba-improvement{background:linear-gradient(135deg,rgba(212,174,110,0.12),#1c1c22);padding:24px 28px;margin:24px 0;border:1px solid rgba(212,174,110,0.30)}
.ba-improvement .lbl{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:#ecc888;margin-bottom:10px}
.ba-improvement .body{font-size:15px;color:#dde0e5;line-height:1.7}
.ba-improvement strong{color:#ecc888}
.ba-result-cta{display:inline-block;padding:18px 40px;background:#f1f3f6;color:#08080a;text-decoration:none;font-size:12px;letter-spacing:0.18em;text-transform:uppercase;font-weight:600;border-radius:100px;margin-top:8px}
.ba-reset{background:transparent;border:1px solid rgba(208,211,216,0.20);color:#dde0e5;padding:12px 24px;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;cursor:pointer;margin-top:14px;margin-left:14px}
.ba-email-capture{margin-top:32px;padding-top:32px;border-top:1px solid rgba(208,211,216,0.10)}
.ba-email-capture p{font-size:13px;color:#b8bbc0;margin-bottom:14px}
.ba-email-capture form{display:flex;gap:8px;max-width:480px;margin:0 auto}
.ba-email-capture input{flex:1;background:#1c1c22;border:1px solid rgba(208,211,216,0.18);color:#f1f3f6;padding:14px 18px;font-family:'Montserrat',sans-serif;font-size:14px}
.ba-email-capture button{background:#d4ae6e;color:#08080a;border:none;padding:14px 28px;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;font-weight:600;cursor:pointer}

/* ─────────────── WYN-30 CHALLENGE BANNER ─────────────── */
.wyn30-banner{background:linear-gradient(135deg,#1c1c22,#0d0d10);border:1px solid #d4ae6e;padding:48px;max-width:1080px;margin:80px auto;text-align:center;position:relative;overflow:hidden;box-shadow:0 0 80px rgba(212,174,110,0.15)}
.wyn30-banner::before{content:'30';position:absolute;top:-40px;right:-20px;font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-size:280px;color:rgba(212,174,110,0.05);font-weight:600;pointer-events:none;line-height:1}
.wyn30-tag{display:inline-block;background:#d4ae6e;color:#08080a;padding:6px 14px;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:0.22em;font-weight:600;margin-bottom:20px;position:relative;z-index:2}
.wyn30-banner h3{font-family:'Montserrat',sans-serif;font-weight:200;font-size:clamp(28px,3vw,42px);color:#f1f3f6;margin-bottom:14px;position:relative;z-index:2;letter-spacing:-0.02em}
.wyn30-banner h3 em{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;color:#ecc888}
.wyn30-banner p{font-size:16px;color:#dde0e5;line-height:1.7;max-width:680px;margin:0 auto 24px;position:relative;z-index:2}
.wyn30-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:760px;margin:30px auto;position:relative;z-index:2}
.wyn30-pillar{background:#1f1f26;padding:18px;border-top:1px solid #d4ae6e;text-align:left}
.wyn30-pillar .n{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:0.18em;color:#ecc888;margin-bottom:8px}
.wyn30-pillar .t{font-size:14px;color:#f1f3f6;line-height:1.5}

/* ─────────────── PHASE WHEEL WIDGET ─────────────── */
.phase-wheel-section{background:#0d0d10;padding:120px 0;border-top:1px solid rgba(208,211,216,0.08);border-bottom:1px solid rgba(208,211,216,0.08)}
.phase-wheel-inner{max-width:1080px;margin:0 auto;padding:0 32px;display:grid;grid-template-columns:auto 1fr;gap:64px;align-items:center}
.phase-wheel-wrap{position:relative;width:280px;height:280px}
.phase-wheel-svg{width:100%;height:100%}
.pw-track{fill:none;stroke:#1f1f26;stroke-width:14}
.pw-segment{fill:none;stroke-width:14;opacity:0.7;transition:opacity 0.4s,stroke-width 0.4s}
.pw-segment.active{opacity:1;stroke-width:20;filter:drop-shadow(0 0 12px currentColor)}
.pw-segment.morning{stroke:#e8763d}
.pw-segment.day{stroke:#f1f3f6}
.pw-segment.wind{stroke:#7d8085}
.pw-segment.night{stroke:#5c7a99}
.pw-segment.repair{stroke:#7bae91}
.pw-center{text-align:center}
.pw-center-label{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:0.18em;text-transform:uppercase;fill:#b8bbc0}
.pw-center-time{font-family:'IBM Plex Mono',monospace;font-size:32px;fill:#f1f3f6;font-weight:300}
.pw-center-state{font-family:'Montserrat',sans-serif;font-weight:300;font-size:16px;fill:#ecc888}
.pw-info h3{font-family:'Montserrat',sans-serif;font-weight:200;font-size:clamp(32px,3.5vw,44px);color:#f1f3f6;margin-bottom:14px;letter-spacing:-0.02em}
.pw-info h3 em{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;color:#ecc888}
.pw-info p{color:#dde0e5;font-size:15px;line-height:1.7;margin-bottom:18px}
.pw-info .pw-recommend{background:#1c1c22;padding:18px 22px;border-left:2px solid #d4ae6e;font-family:'IBM Plex Mono',monospace;font-size:13px;color:#f1f3f6;letter-spacing:0.04em;line-height:1.6}
.pw-info .pw-recommend strong{color:#ecc888}

/* ─────────────── DASHBOARD PREVIEW ─────────────── */
.dash-preview{background:linear-gradient(180deg,#0d0d10,#14141a);padding:140px 0;position:relative}
.dash-head{text-align:center;max-width:760px;margin:0 auto 60px;padding:0 32px}
.dash-head .eyebrow{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:500;letter-spacing:0.22em;text-transform:uppercase;color:#dde0e5}
.dash-head h2{font-family:'Montserrat',sans-serif;font-weight:200;font-size:clamp(40px,5.5vw,76px);color:#f1f3f6;margin:24px 0 20px;letter-spacing:-0.025em}
.dash-head .lead{font-size:clamp(16px,1.3vw,19px);color:#dde0e5;line-height:1.65;max-width:62ch;margin:0 auto}
.dash-mockup{max-width:1080px;margin:0 auto;padding:0 32px}
.dash-card{background:linear-gradient(180deg,#1f1f26,#181820);border:1px solid rgba(208,211,216,0.18);padding:40px;box-shadow:0 40px 80px rgba(0,0,0,0.5)}
.dash-greeting{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px;padding-bottom:24px;border-bottom:1px solid rgba(208,211,216,0.10)}
.dash-greeting .hi{font-family:'Montserrat',sans-serif;font-weight:200;font-size:26px;color:#f1f3f6}
.dash-greeting .streak{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:#ecc888;background:rgba(212,174,110,0.10);padding:8px 14px;border:1px solid rgba(212,174,110,0.30)}
.dash-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:32px}
.dash-stat{background:#1c1c22;padding:22px 18px;text-align:center;border-top:1px solid #d4ae6e}
.dash-stat .lbl{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:#b8bbc0;margin-bottom:10px}
.dash-stat .val{font-family:'Montserrat',sans-serif;font-weight:200;font-size:36px;color:#f1f3f6;line-height:1}
.dash-stat .delta{font-family:'IBM Plex Mono',monospace;font-size:11px;color:#7bae91;margin-top:8px}
.dash-chart{background:#1c1c22;padding:24px;height:160px;position:relative;margin-bottom:24px}
.dash-chart-label{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:#b8bbc0;margin-bottom:12px}
.dash-chart svg{width:100%;height:110px}
.dash-line{fill:none;stroke:#d4ae6e;stroke-width:2.5;filter:drop-shadow(0 0 8px rgba(212,174,110,0.4))}
.dash-area{fill:url(#dash-grad);opacity:0.4}
.dash-meta{font-family:'IBM Plex Mono',monospace;font-size:10px;color:#7d8085;text-align:center;margin-top:24px;letter-spacing:0.06em}

@media (max-width:1100px){
  .phase-wheel-inner{grid-template-columns:1fr;text-align:center}
  .phase-wheel-wrap{margin:0 auto}
  .wyn30-pillars{grid-template-columns:1fr}
  .dash-stats{grid-template-columns:1fr 1fr}
  .ba-result-grid{grid-template-columns:1fr;gap:16px}
}