/* ============================================================
   CryptoTestament — Shared Stylesheet v2
   Dark (default) + Light mode · Theme toggle · Lang switcher
   Fonts: Cormorant Garamond (display) + DM Sans (body)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=DM+Sans:wght@300;400;500&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ---- Dark (default) ---- */
:root {
  --bg:        #0B0F19;
  --bg-surface:#131929;
  --bg-card:   #1A2235;
  --border:    rgba(255,255,255,0.07);
  --border-md: rgba(255,255,255,0.14);
  --gold:      #C9A84C;
  --gold-lt:   #E8CC80;
  --gold-bg:   rgba(201,168,76,0.08);
  --green:     #2ECC8F;
  --red:       #E05555;
  --txt-1:     #F0EDE6;
  --txt-2:     rgba(240,237,230,0.58);
  --txt-3:     rgba(240,237,230,0.32);
  --nav-bg:    rgba(11,15,25,0.90);
  --radius:    10px;
  --radius-lg: 16px;
}

/* ---- Light ---- */
html.light {
  --bg:        #F5F2EB;
  --bg-surface:#FFFFFF;
  --bg-card:   #FFFFFF;
  --border:    rgba(0,0,0,0.08);
  --border-md: rgba(0,0,0,0.16);
  --gold:      #9A6F1E;
  --gold-lt:   #7A540E;
  --gold-bg:   rgba(154,111,30,0.07);
  --green:     #1A8A5F;
  --red:       #CC3333;
  --txt-1:     #1A1812;
  --txt-2:     rgba(26,24,18,0.60);
  --txt-3:     rgba(26,24,18,0.35);
  --nav-bg:    rgba(245,242,235,0.94);
}

html { font-size: 16px; scroll-behavior: smooth; }

body {
  background: var(--bg); color: var(--txt-1);
  font-family: 'DM Sans', sans-serif; font-weight: 400;
  line-height: 1.65; -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  transition: background 0.25s, color 0.25s;
}

.display { font-family:'Cormorant Garamond',serif; font-weight:500; line-height:1.15; letter-spacing:-0.02em; }
h1 { font-size: clamp(2.2rem,5vw,3.4rem); }
h2 { font-size: clamp(1.5rem,3vw,2rem); }
p  { color: var(--txt-2); }
a  { color: var(--gold); text-decoration: none; transition: color 0.15s; }
a:hover { color: var(--gold-lt); }

.container       { max-width: 860px; margin: 0 auto; padding: 0 1.5rem; }
.container--wide { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; }

/* ---- NAV ---- */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--nav-bg);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border); padding: 0.75rem 0;
  transition: background 0.25s, border-color 0.25s;
}
.nav__inner {
  max-width: 900px; margin: 0 auto; padding: 0 1.5rem;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.nav__logo { font-family:'Cormorant Garamond',serif; font-size:1.25rem; font-weight:600; color:var(--txt-1); flex-shrink:0; }
.nav__logo span { color: var(--gold); }
.nav__controls { display: flex; align-items: center; gap: 8px; }
.nav__back { font-size:0.78rem; color:var(--txt-2); display:flex; align-items:center; gap:5px; }
.nav__back:hover { color: var(--gold); }

/* Theme toggle */
.theme-toggle {
  width:34px; height:34px; border-radius:50%;
  background:var(--bg-card); border:1px solid var(--border-md);
  color:var(--txt-2); font-size:14px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:border-color 0.15s, color 0.15s, background 0.2s;
}
.theme-toggle:hover { border-color:var(--gold); color:var(--gold); }

/* Lang switch */
.lang-switch {
  display:flex; align-items:center;
  background:var(--bg-card); border:1px solid var(--border-md);
  border-radius:20px; overflow:hidden; transition:border-color 0.15s;
}
.lang-switch:hover { border-color:var(--gold); }
.lang-btn {
  background:none; border:none;
  font-family:'DM Sans',sans-serif; font-size:0.7rem; font-weight:500;
  letter-spacing:0.05em; color:var(--txt-3);
  padding:5px 10px; cursor:pointer; transition:color 0.15s, background 0.15s;
}
.lang-btn.active { background:var(--gold); color:var(--bg); }
.lang-btn:hover:not(.active) { color:var(--txt-1); }

/* ---- BUTTONS ---- */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:0.75rem 2rem; border-radius:var(--radius);
  font-family:'DM Sans',sans-serif; font-size:0.9rem; font-weight:500;
  cursor:pointer; border:none; transition:all 0.2s; text-decoration:none;
}
.btn--primary { background:var(--gold); color:#0B0F19; }
.btn--primary:hover { background:var(--gold-lt); color:#0B0F19; transform:translateY(-1px); }
html.light .btn--primary { color:#fff; }
html.light .btn--primary:hover { color:#fff; }
.btn--outline { background:transparent; color:var(--txt-1); border:1px solid var(--border-md); }
.btn--outline:hover { border-color:var(--gold); color:var(--gold); }
.btn--full { width:100%; justify-content:center; }

/* ---- PILLS ---- */
.pill {
  display:inline-flex; align-items:center; gap:6px;
  font-size:0.75rem; font-weight:500; padding:4px 12px;
  border-radius:20px; letter-spacing:0.03em;
}
.pill--gold  { background:rgba(201,168,76,0.12); color:var(--gold-lt); border:1px solid rgba(201,168,76,0.25); }
.pill--green { background:rgba(46,204,143,0.10); color:var(--green);   border:1px solid rgba(46,204,143,0.22); }
html.light .pill--gold  { color:var(--gold); }
html.light .pill--green { color:var(--green); }

.section-label { font-size:0.7rem; font-weight:500; letter-spacing:0.12em; text-transform:uppercase; color:var(--gold); margin-bottom:0.75rem; }
.divider { border:none; border-top:1px solid var(--border); margin:2.5rem 0; }

/* ---- STAT CARDS ---- */
.stat-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:2rem 0; }
.stat-card { background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.25rem 1rem; text-align:center; transition:background 0.25s, border-color 0.25s; }
.stat-card__val { font-family:'Cormorant Garamond',serif; font-size:2rem; font-weight:500; color:var(--gold-lt); line-height:1; }
html.light .stat-card__val { color:var(--gold); }
.stat-card__lbl { font-size:0.75rem; color:var(--txt-2); margin-top:6px; line-height:1.4; }

/* ---- PROBLEM BLOCK ---- */
.problem-block { background:rgba(201,168,76,0.05); border-left:3px solid var(--gold); border-radius:0 var(--radius) var(--radius) 0; padding:1.25rem 1.5rem; font-size:0.95rem; color:var(--txt-2); line-height:1.7; }
.problem-block strong { color:var(--txt-1); }

/* ---- STEPS ---- */
.steps { display:flex; flex-direction:column; gap:1rem; }
.step  { display:flex; gap:1rem; align-items:flex-start; }
.step__num { flex-shrink:0; width:32px; height:32px; border-radius:50%; background:rgba(201,168,76,0.10); border:1px solid rgba(201,168,76,0.30); color:var(--gold-lt); font-size:0.8rem; font-weight:500; display:flex; align-items:center; justify-content:center; }
html.light .step__num { color:var(--gold); }
.step__content { flex:1; }
.step__title { font-size:0.95rem; font-weight:500; color:var(--txt-1); margin-bottom:3px; }
.step__desc  { font-size:0.85rem; color:var(--txt-2); line-height:1.5; }

/* ---- FEATURES ---- */
.features-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:2rem 0; }
.feature { background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.25rem; transition:background 0.25s, border-color 0.25s; }
.feature__icon  { font-size:1.3rem; margin-bottom:0.6rem; display:block; }
.feature__title { font-size:0.9rem; font-weight:500; color:var(--txt-1); margin-bottom:4px; }
.feature__desc  { font-size:0.78rem; color:var(--txt-2); line-height:1.5; }

/* ---- FAQ ---- */
.faq { display:flex; flex-direction:column; gap:8px; }
.faq-item { background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; transition:border-color 0.2s, background 0.25s; }
.faq-item:hover { border-color:var(--border-md); }
.faq-item.open  { border-color:rgba(201,168,76,0.35); }
.faq-q { width:100%; background:none; border:none; color:var(--txt-1); font-family:'DM Sans',sans-serif; font-size:0.9rem; font-weight:500; text-align:left; padding:1rem 1.25rem; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.faq-arrow { flex-shrink:0; width:18px; height:18px; border-radius:50%; background:rgba(201,168,76,0.10); color:var(--gold); font-size:10px; display:flex; align-items:center; justify-content:center; transition:transform 0.25s; }
.faq-item.open .faq-arrow { transform:rotate(180deg); }
.faq-a { display:none; padding:0.85rem 1.25rem 1rem; font-size:0.85rem; color:var(--txt-2); line-height:1.7; border-top:1px solid var(--border); }
.faq-item.open .faq-a { display:block; }

/* ---- CTA BOTTOM ---- */
.cta-bottom { background:linear-gradient(135deg,var(--gold-bg) 0%,rgba(46,204,143,0.05) 100%); border:1px solid rgba(201,168,76,0.20); border-radius:var(--radius-lg); padding:2.5rem 2rem; text-align:center; margin:2.5rem 0; transition:background 0.25s; }
.cta-bottom__title { font-family:'Cormorant Garamond',serif; font-size:1.8rem; font-weight:500; color:var(--txt-1); margin-bottom:0.5rem; }
.cta-bottom__sub { font-size:0.85rem; color:var(--txt-2); margin-bottom:1.5rem; }

/* ---- FOOTER ---- */
.footer { border-top:1px solid var(--border); padding:1.5rem 0; margin-top:4rem; transition:border-color 0.25s; }
.footer__inner { max-width:860px; margin:0 auto; padding:0 1.5rem; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px; }
.footer__copy { font-size:0.78rem; color:var(--txt-3); }
.footer__links { display:flex; gap:16px; flex-wrap:wrap; }
.footer__links a { font-size:0.78rem; color:var(--txt-2); }
.footer__links a:hover { color:var(--gold); }

/* ---- HERO ---- */
.hero { padding:5rem 0 3.5rem; text-align:center; }
.hero__flag  { font-size:4rem; margin-bottom:1.25rem; display:block; animation:fadeDown 0.6s ease both; }
.hero__title { margin-bottom:1rem; animation:fadeDown 0.6s 0.1s ease both; }
.hero__title em { font-style:italic; color:var(--gold-lt); }
html.light .hero__title em { color:var(--gold); }
.hero__sub   { font-size:1.05rem; color:var(--txt-2); max-width:520px; margin:0 auto 1.5rem; animation:fadeDown 0.6s 0.2s ease both; }
.hero__pill  { margin-bottom:2rem; animation:fadeDown 0.6s 0.3s ease both; }
.hero__cta   { animation:fadeDown 0.6s 0.4s ease both; }

/* ---- SELECTOR (index) ---- */
.selector-hero { padding:5rem 0 3rem; text-align:center; }
.selector-hero__eyebrow { font-size:0.72rem; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold); margin-bottom:1rem; }
.country-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; max-width:680px; margin:0 auto 2.5rem; animation:fadeDown 0.6s 0.2s ease both; }
.country-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.75rem 1rem; text-align:center; text-decoration:none; display:flex; flex-direction:column; align-items:center; gap:10px; cursor:pointer; position:relative; overflow:hidden; transition:border-color 0.2s, transform 0.2s, background 0.2s; }
.country-card::before { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:var(--gold); transform:scaleX(0); transition:transform 0.25s; }
.country-card:hover { border-color:rgba(201,168,76,0.4); transform:translateY(-3px); background:var(--bg-surface); }
.country-card:hover::before { transform:scaleX(1); }
.country-card__flag  { font-size:2.8rem; line-height:1; }
.country-card__name  { font-size:0.95rem; font-weight:500; color:var(--txt-1); }
.country-card__note  { font-size:0.72rem; color:var(--txt-2); line-height:1.4; }
.country-card__arrow { font-size:0.75rem; color:var(--gold); opacity:0; transition:opacity 0.2s; }
.country-card:hover .country-card__arrow { opacity:1; }
.trust-bar { display:flex; justify-content:center; gap:2rem; flex-wrap:wrap; margin:2rem 0; animation:fadeDown 0.6s 0.35s ease both; }
.trust-item { display:flex; align-items:center; gap:7px; font-size:0.8rem; color:var(--txt-2); }
.trust-item__icon { width:20px; height:20px; border-radius:50%; background:rgba(46,204,143,0.10); color:var(--green); font-size:10px; display:flex; align-items:center; justify-content:center; }

/* ---- LEGAL / PRIVACY ---- */
.legal-content { max-width:720px; margin:3rem auto; padding:0 1.5rem 4rem; }
.legal-content h1 { font-size:clamp(1.8rem,4vw,2.6rem); margin-bottom:0.5rem; }
.legal-content h2 { font-size:1.1rem; font-weight:500; color:var(--txt-1); margin:2rem 0 0.6rem; padding-top:2rem; border-top:1px solid var(--border); }
.legal-content h2:first-of-type { border-top:none; padding-top:0; }
.legal-content p, .legal-content li { font-size:0.9rem; color:var(--txt-2); line-height:1.75; }
.legal-content ul { margin:0.5rem 0 0.5rem 1.5rem; }
.legal-content li { margin-bottom:4px; }
.legal-content strong { color:var(--txt-1); }
.legal-content .updated { display:inline-block; font-size:0.75rem; color:var(--txt-3); margin-bottom:2.5rem; }
.legal-content .contact-box { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:1rem 1.25rem; font-size:0.85rem; margin-top:1rem; color:var(--txt-2); }

/* ---- ANIMATIONS ---- */
@keyframes fadeDown { from{opacity:0;transform:translateY(-14px)} to{opacity:1;transform:translateY(0)} }

/* ---- RESPONSIVE ---- */
@media (max-width:640px) {
  .country-grid  { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .features-grid { grid-template-columns:1fr; }
  .hero          { padding:3rem 0 2.5rem; }
  .hero__flag    { font-size:3rem; }
  .trust-bar     { gap:1.2rem; }
  .footer__inner { flex-direction:column; text-align:center; }
}
@media (max-width:400px) {
  .stat-grid     { grid-template-columns:1fr; }
  .country-grid  { grid-template-columns:1fr; }
}