/* ══════════════════════════════════════════════════════════
   SCOREMYBIZ DESIGN SYSTEM
   Signature element: the Score Gauge — a radial ring that
   appears at every scale across the site (nav badge, hero,
   result dashboard, example cards) as the visual fingerprint
   of the product. Everything else stays quiet around it.
   ══════════════════════════════════════════════════════════ */

:root{
  /* — Color — */
  --ink:      #0A1B3D;   /* primary dark navy */
  --ink-soft: #17295A;
  --signal:   #2951FF;   /* CTA / accent */
  --signal-deep: #1B3ACC;
  --paper:    #FBFAF7;   /* warm off-white bg, not stark white */
  --surface:  #FFFFFF;
  --mist:     #EEF1FA;   /* soft card tint */
  --slate:    #5B6478;   /* secondary text */
  --slate-soft: #687089;
  --line:     #E4E7EF;

  /* — Health bands (used consistently everywhere) — */
  --thrive: #16825D;
  --thrive-bg: #E7F5EE;
  --watch:  #9C6212;
  --watch-bg: #FCF3E1;
  --risk:   #C0392B;
  --risk-bg: #FBEAE8;

  /* — Type — */
  --font-display: 'Bricolage Grotesque', 'Inter', 'Noto Sans', 'Nirmala UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Noto Sans', 'Nirmala UI', system-ui, sans-serif;
  --font-numeral: 'Bricolage Grotesque', 'Inter', sans-serif; /* digits only — script-agnostic, so safe everywhere */

  /* — Scale — */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --shadow-card: 0 2px 8px rgba(10,27,61,.06), 0 12px 32px rgba(10,27,61,.05);
  --shadow-lift: 0 8px 24px rgba(10,27,61,.10), 0 24px 48px rgba(10,27,61,.08);
  --maxw: 1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}

/* Never break on long translated strings */
.txt-flex{overflow-wrap:break-word;word-break:break-word;hyphens:auto;}
h1,h2,h3,h4,p,span,button,a,li{overflow-wrap:break-word;}

/* — Layout — */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
@media(max-width:720px){.wrap{padding:0 18px;}}

.section{padding:88px 0;}
.section--tight{padding:56px 0;}
@media(max-width:720px){.section{padding:56px 0;}.section--tight{padding:36px 0;}}

.eyebrow{
  font-family:var(--font-display);
  font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--signal);margin:0 0 12px;
}
h1,h2,h3{font-family:var(--font-display);font-weight:700;letter-spacing:-.015em;text-wrap:balance;color:var(--ink);margin:0;}
h1{font-size:clamp(2.3rem,5.4vw,3.9rem);line-height:1.06;font-weight:850;}
h2{font-size:clamp(1.7rem,3.6vw,2.5rem);line-height:1.14;}
h3{font-size:1.15rem;line-height:1.3;font-weight:700;}
p{margin:0;color:var(--slate);}
.lede{font-size:1.08rem;line-height:1.6;color:var(--slate);max-width:640px;}

/* — Buttons — */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-display);font-weight:700;font-size:.95rem;
  padding:14px 26px;border-radius:100px;border:1.5px solid transparent;
  cursor:pointer;transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space:normal;text-align:center;line-height:1.3;
}
.btn:active{transform:scale(.98);}
.btn:disabled,.btn[disabled]{background:#6E7681;color:#fff;border-color:transparent;box-shadow:none;opacity:1;cursor:not-allowed;}
.btn-primary{background:var(--signal);color:#fff;box-shadow:0 6px 20px rgba(41,81,255,.28);}
.btn-primary:hover{background:var(--signal-deep);box-shadow:0 8px 26px rgba(41,81,255,.36);}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line);}
.btn-ghost:hover{border-color:var(--slate-soft);}
.btn-lg{padding:17px 32px;font-size:1.02rem;}

/* — Nav — */
.nav{
  position:sticky;top:0;z-index:50;background:rgba(251,250,247,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
}
.nav__row{display:flex;align-items:center;gap:22px;height:68px;}
.nav__logo{font-family:var(--font-display);font-weight:800;font-size:1.15rem;color:var(--ink);flex-shrink:0;}
.nav__links{display:flex;gap:20px;flex:1;min-width:0;}
.nav__links a{font-size:.88rem;font-weight:600;color:var(--slate);white-space:nowrap;padding:4px 0;border-bottom:2px solid transparent;}
.nav__links a:hover{color:var(--ink);}
.nav__right{display:flex;align-items:center;gap:14px;flex-shrink:0;}
.nav__lang{font-size:.85rem;font-weight:600;color:var(--ink);background:var(--mist);padding:8px 14px;border-radius:100px;cursor:pointer;border:none;}
.nav__burger{display:none;background:none;border:none;cursor:pointer;padding:8px;flex-shrink:0;order:-1;}
.nav__burger span{display:block;width:22px;height:2px;background:var(--ink);margin:5px 0;border-radius:2px;transition:.2s;}
.nav__mobile-panel{display:none;flex-direction:column;gap:2px;padding:14px var(--gutter,20px) 18px;border-top:1px solid var(--line);background:var(--bg,#fbfaf7);}
.nav__mobile-panel a{font-size:.95rem;font-weight:600;color:var(--slate);padding:11px 4px;border-bottom:1px solid var(--line);}
.nav__mobile-panel a:last-child{border-bottom:none;}
.nav__mobile-panel.open{display:flex;}
@media(max-width:1200px){
  .nav__links{display:none;}
  .nav__burger{display:block;}
}

/* — Trust bar — */
.trust-bar{display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:center;}
.trust-item{
  display:flex;align-items:center;gap:7px;font-size:.83rem;font-weight:600;color:var(--slate);
}
.trust-item::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--thrive);flex-shrink:0;}

/* — Cards — */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:28px;box-shadow:var(--shadow-card);
}
.card-grid{display:grid;gap:20px;}
.card-grid--2{grid-template-columns:repeat(2,1fr);}
.card-grid--3{grid-template-columns:repeat(3,1fr);}
.card-grid--4{grid-template-columns:repeat(4,1fr);}
@media(max-width:900px){.card-grid--3,.card-grid--4{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.card-grid--2,.card-grid--3,.card-grid--4{grid-template-columns:1fr;}}

.link-card{
  display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:26px;transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.link-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:var(--signal);}
.link-card__num{font-family:var(--font-numeral);font-size:.78rem;font-weight:700;color:var(--signal);letter-spacing:.06em;}
.link-card__go{font-size:.82rem;font-weight:700;color:var(--signal);margin-top:14px;display:inline-block;}

/* — Badges — */
.badge{
  display:inline-flex;align-items:center;gap:5px;font-size:.75rem;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:100px;
}
.badge--live{background:var(--thrive-bg);color:var(--thrive);}
.badge--soon{background:var(--watch-bg);color:var(--watch);}
.badge--app{background:var(--mist);color:var(--signal);}

/* ══ SIGNATURE ELEMENT — THE SCORE GAUGE ══ */
.gauge{position:relative;display:inline-flex;align-items:center;justify-content:center;}
.gauge svg{transform:rotate(-90deg);}
.gauge circle{fill:none;}
.gauge__track{stroke:var(--line);}
.gauge__fill{stroke:var(--thrive);stroke-linecap:round;transition:stroke-dashoffset 1.1s cubic-bezier(.4,0,.2,1);}
.gauge--watch .gauge__fill{stroke:var(--watch);}
.gauge--risk .gauge__fill{stroke:var(--risk);}
.gauge__num{
  position:absolute;font-family:var(--font-numeral);font-weight:700;color:var(--ink);
  display:flex;align-items:baseline;gap:2px;
}
.gauge__num small{font-family:var(--font-body);font-weight:600;font-size:.4em;color:var(--slate-soft);}

/* — Accordion (for calculators) — */
.accordion-item{border:1px solid var(--line);border-radius:var(--radius-md);margin-bottom:12px;overflow:hidden;background:var(--surface);}
.accordion-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;cursor:pointer;
}
.accordion-head h3{display:flex;align-items:center;gap:10px;}
.accordion-tag{font-size:.75rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:100px;}
.accordion-tag--req{background:var(--signal);color:#fff;}
.accordion-tag--opt{background:var(--mist);color:var(--slate);}
.accordion-chevron{transition:transform .2s ease;color:var(--slate-soft);flex-shrink:0;}
.accordion-item.open .accordion-chevron{transform:rotate(180deg);}
.accordion-body{padding:0 22px 22px;display:none;}
.accordion-item.open .accordion-body{display:block;}

/* — Field — */
.field{margin-bottom:16px;}
.field label{display:block;font-size:.85rem;font-weight:600;color:var(--ink);margin-bottom:6px;}
.field input,.field select{
  width:100%;padding:13px 16px;border:1.5px solid var(--line);border-radius:var(--radius-sm);
  font-size:.95rem;font-family:var(--font-body);background:var(--surface);color:var(--ink);
}
.field input:focus,.field select:focus{outline:none;border-color:var(--signal);box-shadow:0 0 0 3px rgba(41,81,255,.12);}

/* — Footer — */
.footer{background:var(--ink);color:#C7CEE5;padding:64px 0 32px;}
.footer h3,.footer h4{color:#fff;font-family:var(--font-display);font-size:.85rem;font-weight:700;margin-bottom:14px;}
.footer a{color:#AEB8D6;font-size:.87rem;display:block;padding:5px 0;}
.footer a:hover{color:#fff;}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:32px;}
@media(max-width:800px){.footer-grid{grid-template-columns:1fr 1fr;}}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:48px;padding-top:24px;font-size:.8rem;color:#8391B5;}

/* Accessibility */
:focus-visible{outline:2px solid var(--signal);outline-offset:2px;}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important;}}

/* Reveal-on-scroll utility */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .5s ease, transform .5s ease;}
.reveal.in{opacity:1;transform:none;}

/* ══ MODAL (registration) ══ */
.modal-overlay{
  position:fixed;inset:0;background:rgba(10,27,61,.55);backdrop-filter:blur(3px);
  display:none;align-items:center;justify-content:center;z-index:200;padding:20px;
}
.modal-overlay.open{display:flex;}
.modal-box{
  background:var(--surface);border-radius:var(--radius-lg);padding:32px;max-width:420px;width:100%;
  box-shadow:var(--shadow-lift);max-height:92vh;overflow-y:auto;
}
.modal-box h3{margin-bottom:6px;}
.modal-box .lede{font-size:.88rem;margin-bottom:22px;}
.modal-note{background:var(--mist);border-radius:10px;padding:12px 14px;font-size:.78rem;color:var(--slate);margin-top:6px;display:flex;gap:8px;align-items:flex-start;}
.consent-row{display:flex;gap:10px;align-items:flex-start;margin:16px 0;font-size:.82rem;color:var(--slate);}
.consent-row input{margin-top:3px;flex-shrink:0;}

/* ══ RESULT DASHBOARD ══ */
.result-hero{
  background:var(--ink);border-radius:var(--radius-lg);padding:40px 32px;text-align:center;
  box-shadow:var(--shadow-lift);position:relative;overflow:hidden;
}
.result-hero::before{content:"";position:absolute;top:-30%;left:-20%;width:60%;height:120%;background:radial-gradient(circle,rgba(41,81,255,.24),transparent 70%);}
.result-hero__label{color:#8391B5;font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;position:relative;z-index:1;}
.result-band{
  display:inline-flex;font-size:.95rem;font-weight:800;padding:7px 18px;border-radius:100px;margin-top:16px;position:relative;z-index:1;
}
.result-band.thriving{background:var(--thrive-bg);color:var(--thrive);}
.result-band.healthy{background:#E0EBFF;color:var(--signal-deep);}
.result-band.watch{background:var(--watch-bg);color:var(--watch);}
.result-band.at-risk,.result-band.critical{background:var(--risk-bg);color:var(--risk);}

.metric{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:18px;}
.metric-label{font-size:.78rem;color:var(--slate);margin-bottom:6px;}
.metric-value{font-family:var(--font-numeral);font-size:1.4rem;font-weight:700;}
.metric-bar{height:5px;background:var(--line);border-radius:100px;margin-top:10px;overflow:hidden;}
.metric-fill{height:100%;border-radius:100px;transition:width .8s ease;}

.action-list{list-style:none;margin:0;padding:0;}
.action-list li{
  display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);font-size:.92rem;color:var(--ink);
}
.action-list li:last-child{border-bottom:none;}
.action-list li::before{content:"→";color:var(--signal);font-weight:700;flex-shrink:0;}

/* ══ ADVISOR CHAT ══ */
.chat-box{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px;}
.chat-area{min-height:70px;max-height:340px;overflow-y:auto;margin-bottom:14px;}
.chat-bubble{background:var(--mist);border-radius:12px;padding:13px 16px;font-size:.85rem;line-height:1.6;margin-top:10px;color:var(--ink);}
.chat-input-row{display:flex;gap:10px;}
.chat-input-row input{flex:1;}
.chat-limit-note{font-size:.76rem;color:var(--slate-soft);margin-top:10px;}

/* Loading state */
.loading-panel{display:none;text-align:center;padding:60px 20px;}
.loading-panel.show{display:block;}
.spinner{width:40px;height:40px;border:3px solid var(--line);border-top-color:var(--signal);border-radius:50%;margin:0 auto 16px;animation:spin 0.8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ══ LANGUAGE SWITCHER ══ */
.lang-wrap{position:relative;}
.lang-menu{
  display:none;position:absolute;top:calc(100% + 8px);right:0;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--shadow-lift);
  width:240px;max-height:340px;overflow:hidden;z-index:100;
}
.lang-menu.open{display:block;}
.lang-search{width:100%;border:none;border-bottom:1px solid var(--line);padding:12px 14px;font-size:.85rem;font-family:var(--font-body);outline:none;box-sizing:border-box;}
.lang-search:focus{box-shadow:inset 0 -2px 0 var(--signal);}
.lang-list{max-height:280px;overflow-y:auto;padding:6px;}
.lang-opt{display:flex;justify-content:space-between;padding:9px 10px;border-radius:8px;cursor:pointer;font-size:.85rem;}
.lang-opt:hover{background:var(--mist);}
.lang-opt.active{background:var(--mist);color:var(--signal);font-weight:700;}
.lang-opt__native{color:var(--slate-soft);font-size:.78rem;}


/* Phones: an input under 16px makes iOS zoom the page on focus. */
@media (max-width:420px){ input:not([type=checkbox]):not([type=radio]), select, textarea { font-size:16px !important; } }
/* A signed-in visitor has Log out + country + language beside the logo: tighten so nothing passes the screen edge at 390px. */
@media (max-width:420px){ .nav__row{gap:6px !important;} .nav__logo{font-size:1rem !important;gap:6px !important;} .nav__burger{padding:8px 6px !important;} .nav__right{gap:4px !important;} #logoutLink{font-size:.72rem !important;} }