/* EuroToBTC — design system. Dark, premium fintech. Deliberately single-theme. */

:root{
  --bg: #090d18;
  --bg-1: #0d1220;
  --surface: #11172b;
  --surface-2: #161d38;
  --border: #232c4a;
  --border-soft: #1a2140;
  --text: #eef1fb;
  --text-muted: #9aa4c7;
  --text-dim: #7a84a8; /* WCAG AA-checked: ~5.3:1 against --bg */
  --accent: #4c7cf0;
  --accent-hover: #6690ff;
  --accent-soft: #182449;
  --btc: #e8a13f;
  --success: #34c78a;
  --success-soft: #10291f;
  --warning: #eab84f;
  --warning-soft: #2c2412;
  --danger: #f0645c;
  --danger-soft: #2c1416;
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;
  --shadow-card: 0 1px 0 rgba(255,255,255,.03) inset, 0 20px 60px -30px rgba(0,0,0,.7);
  --max: 1160px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: radial-gradient(1100px 600px at 12% -10%, #12224f33, transparent 60%),
              radial-gradient(900px 500px at 100% 0%, #1a1233aa, transparent 55%),
              var(--bg);
  color: var(--text);
  font-family: "Public Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4{
  font-family: "Sora", "Public Sans", system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.18;
  text-wrap: balance;
  margin: 0 0 .5em;
  letter-spacing: -0.01em;
}
h1{ font-size: clamp(34px, 5vw, 54px); }
h2{ font-size: clamp(24px, 3.2vw, 34px); }
h3{ font-size: 19px; }
p{ margin:0 0 1em; color: var(--text); max-width: 68ch; }
p.lead{ font-size: 18px; color: var(--text-muted); }
a{ color: var(--accent); text-decoration:none; }
a:hover{ color: var(--accent-hover); }
strong{ color: var(--text); }
.mono, code, .addr, input, .rate-num{ font-family: "IBM Plex Mono", ui-monospace, monospace; }
img{ max-width:100%; display:block; }
:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
::selection{ background: var(--accent-soft); }

.container{ max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.section{ padding: 88px 0; }
.section.tight{ padding: 56px 0; }
.section-head{ max-width: 640px; margin: 0 auto 44px; text-align:center; }
.section-head p{ margin:0 auto; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:"IBM Plex Mono"; font-size: 12px; letter-spacing:.09em; text-transform: uppercase;
  color: var(--accent); font-weight:600; margin-bottom: 14px;
}
.eyebrow::before{ content:""; width:6px; height:6px; border-radius:50%; background: var(--accent); }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 13px 22px; border-radius: 999px; border: 1px solid transparent;
  font-weight: 600; font-size: 15px; cursor:pointer; text-decoration:none;
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
  font-family: inherit;
}
.btn:active{ transform: translateY(1px); }
.btn-primary{ background: var(--accent); color:#08101f; }
.btn-primary:hover{ background: var(--accent-hover); color:#08101f; }
.btn-ghost{ background: transparent; border-color: var(--border); color: var(--text); }
.btn-ghost:hover{ border-color: var(--accent); color: var(--text); }
.btn-block{ width:100%; }
.btn-sm{ padding: 8px 14px; font-size: 13px; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }

/* Navbar */
.navbar{
  position: sticky; top:0; z-index: 40;
  background: rgba(9,13,24,.78);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-soft);
}
.navbar .container{ display:flex; align-items:center; justify-content:space-between; height:72px; gap:24px; }
.brand{ display:flex; align-items:center; gap:10px; font-family:"Sora"; font-weight:700; font-size:18px; color:var(--text); }
.brand:hover{ color:var(--text); }
.brand .mark{ width:26px; height:26px; flex-shrink:0; }
.nav-links{ display:flex; align-items:center; gap:28px; list-style:none; margin:0; padding:0; }
.nav-links a{ color: var(--text-muted); font-size:14.5px; font-weight:500; }
.nav-links a:hover, .nav-links a[aria-current="page"]{ color: var(--text); }
.nav-cta{ display:flex; align-items:center; gap:14px; }
.nav-toggle{ display:none; background:none; border:1px solid var(--border); color:var(--text); border-radius:10px; padding:8px 10px; cursor:pointer; }
@media (max-width: 900px){
  .nav-links{ position:fixed; inset:72px 0 0 0; background: var(--bg-1); flex-direction:column; align-items:flex-start;
    padding: 28px 24px; gap:6px; transform: translateY(-8px); opacity:0; visibility:hidden; pointer-events:none;
    transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s; border-top:1px solid var(--border-soft); }
  .nav-links a{ width:100%; padding: 14px 4px; border-bottom:1px solid var(--border-soft); font-size:16px; }
  .nav-links.open{ opacity:1; visibility:visible; pointer-events:auto; transform:none; transition: opacity .15s ease, transform .15s ease; }
  .nav-toggle{ display:inline-flex; }
  .nav-cta .btn-ghost{ display:none; }
}

/* Footer */
.footer{ border-top: 1px solid var(--border-soft); padding: 56px 0 32px; margin-top: 60px; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; margin-bottom:40px; }
.footer-col h4{ font-family:"IBM Plex Mono"; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color: var(--text-dim); margin-bottom:14px; font-weight:600; }
.footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.footer-col a{ color: var(--text-muted); font-size:14px; }
.footer-col a:hover{ color: var(--text); }
.footer-brand p{ color: var(--text-dim); font-size:13.5px; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; padding-top:24px; border-top:1px solid var(--border-soft); color: var(--text-dim); font-size:13px; }
@media (max-width: 860px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .footer-grid{ grid-template-columns: 1fr; } }

/* Cards */
.card{ background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-card); }
.card-tight{ padding:18px; }

/* Grids */
.grid{ display:grid; gap:20px; }
.grid-2{ grid-template-columns: 1fr 1fr; }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px){ .grid-3{ grid-template-columns: 1fr 1fr; } .grid-4{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px){ .grid-2,.grid-3,.grid-4{ grid-template-columns: 1fr; } }

/* Hero */
.hero{ padding: 64px 0 40px; }
.hero-grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items:start; }
@media (max-width: 980px){ .hero-grid{ grid-template-columns: 1fr; } }
.hero-badges{ display:flex; flex-wrap:wrap; gap:10px; margin: 22px 0 28px; }
.hero-badge{ display:flex; align-items:center; gap:7px; font-size:13px; color: var(--text-muted); background: var(--surface); border:1px solid var(--border); padding:7px 12px; border-radius:999px; }
.hero-badge svg{ width:14px; height:14px; color: var(--accent); flex-shrink:0; }
.hero-cta-row{ display:flex; gap:14px; flex-wrap:wrap; }

/* Calculator */
.calc{ padding:22px; }
.calc-title{ font-size:13px; text-transform:uppercase; letter-spacing:.07em; color: var(--text-dim); font-family:"IBM Plex Mono"; margin-bottom:16px; font-weight:600; }
.amount-chips{ display:flex; gap:8px; flex-wrap:wrap; margin: 12px 0 16px; }
.chip{ border:1px solid var(--border); background: var(--surface-2); color: var(--text); border-radius:999px; padding:8px 16px; font-size:14px; font-weight:600; cursor:pointer; font-family:"IBM Plex Mono"; }
.chip.active, .chip:hover{ border-color: var(--accent); color: var(--accent); }
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:13px; color: var(--text-muted); margin-bottom:7px; }
.field input, .field select, .field textarea{
  width:100%; background: var(--surface-2); border:1px solid var(--border); color: var(--text);
  padding: 13px 14px; border-radius: var(--radius-sm); font-size:15px; outline:none;
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color: var(--accent); }
.field .hint{ font-size:12.5px; color: var(--text-dim); margin-top:6px; }
.field .error{ font-size:12.5px; color: var(--danger); margin-top:6px; display:none; }
.field.has-error input{ border-color: var(--danger); }
.field.has-error .error{ display:block; }
.input-copy{ display:flex; gap:8px; }
.input-copy input{ flex:1; }
.copy-btn{ flex-shrink:0; background: var(--surface-2); border:1px solid var(--border); color: var(--text-muted); border-radius: var(--radius-sm); padding: 0 14px; cursor:pointer; font-size:13px; font-weight:600; }
.copy-btn:hover{ color: var(--text); border-color: var(--accent); }
.copy-btn.copied{ color: var(--success); border-color: var(--success); }

.calc-result{ background: var(--surface-2); border:1px solid var(--border-soft); border-radius: var(--radius); padding:18px 20px; margin-top:4px; }
.calc-row{ display:flex; justify-content:space-between; align-items:baseline; padding:7px 0; font-size:14.5px; color: var(--text-muted); }
.calc-row.total{ border-top:1px solid var(--border); margin-top:6px; padding-top:14px; }
.calc-row.total .val{ font-size:20px; color: var(--text); font-weight:700; }
.calc-row .val{ color: var(--text); font-weight:600; font-variant-numeric: tabular-nums; }
.calc-note{ font-size:12px; color: var(--text-dim); margin-top:10px; }
.rate-pill{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color: var(--text-dim); font-family:"IBM Plex Mono"; }
.rate-pill .dot{ width:6px; height:6px; border-radius:50%; background: var(--success); }
.rate-pill.stale .dot{ background: var(--warning); }

/* Steps */
.steps{ counter-reset: step; display:flex; flex-direction:column; gap:0; }
.step{ display:grid; grid-template-columns: 44px 1fr; gap:18px; padding: 22px 0; border-bottom:1px solid var(--border-soft); }
.step:last-child{ border-bottom:none; }
.step-num{ counter-increment: step; width:40px; height:40px; border-radius:50%; background: var(--surface-2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-family:"IBM Plex Mono"; color: var(--accent); font-weight:700; }
.step-num::before{ content: counter(step); }
.step h3{ margin-bottom:6px; }
.step p{ color: var(--text-muted); margin-bottom:0; }

/* Trust strip */
.trust-strip{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.trust-item{ display:flex; align-items:center; gap:9px; padding: 12px 18px; border:1px solid var(--border); border-radius:999px; background: var(--surface); font-size:14px; color: var(--text-muted); }
.trust-item svg{ width:16px; height:16px; color: var(--success); flex-shrink:0; }

/* FAQ accordion */
.faq-item{ border-bottom:1px solid var(--border-soft); }
.faq-q{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:16px; background:none; border:none; color: var(--text); text-align:left; padding: 20px 0; font-size:16px; font-weight:600; cursor:pointer; font-family: inherit; }
.faq-q .chev{ flex-shrink:0; transition: transform .15s ease; color: var(--text-dim); }
.faq-item.open .faq-q .chev{ transform: rotate(180deg); color: var(--accent); }
.faq-a{ display:none; padding: 0 0 22px; color: var(--text-muted); max-width:70ch; }
.faq-item.open .faq-a{ display:block; }

/* Badges / pills */
.badge{ display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:999px; font-size:12px; font-weight:600; font-family:"IBM Plex Mono"; }
.badge.pending{ background: var(--warning-soft); color: var(--warning); }
.badge.paid{ background: var(--accent-soft); color: var(--accent); }
.badge.sent{ background: var(--success-soft); color: var(--success); }

/* Review panel (checkout) */
.review-panel{ display:none; }
.review-panel.open{ display:block; }
.review-row{ display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--border-soft); font-size:14.5px; }
.review-row:last-child{ border-bottom:none; }
.review-row .k{ color: var(--text-muted); }
.review-row .v{ color: var(--text); font-weight:600; text-align:right; word-break:break-all; max-width:60%; }

.notice{ display:flex; gap:12px; padding:14px 16px; border-radius: var(--radius-sm); font-size:14px; }
.notice.warn{ background: var(--warning-soft); border:1px solid #4a3a18; color: #f3d38b; }
.notice.info{ background: var(--accent-soft); border:1px solid #23315e; color:#b9caff; }
.notice svg{ flex-shrink:0; width:18px; height:18px; margin-top:1px; }

/* Article / prose pages */
.prose{ max-width: 720px; margin:0 auto; }
.prose h2{ margin-top:2em; }
.prose h3{ margin-top:1.6em; }
.prose ul, .prose ol{ color: var(--text-muted); padding-left: 22px; }
.prose li{ margin-bottom:.5em; }
.article-meta{ display:flex; gap:12px; align-items:center; color: var(--text-dim); font-size:13px; font-family:"IBM Plex Mono"; margin-bottom:18px; }

/* Table (fees example etc.) */
.table-wrap{ overflow-x:auto; border:1px solid var(--border); border-radius: var(--radius); }
table{ border-collapse:collapse; width:100%; min-width:480px; font-size:14.5px; }
th,td{ padding:12px 16px; text-align:left; border-bottom:1px solid var(--border-soft); }
th{ background: var(--surface-2); font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color: var(--text-dim); }
tr:last-child td{ border-bottom:none; }
td.num{ font-family:"IBM Plex Mono"; }

.divider{ height:1px; background: var(--border-soft); border:none; margin: 40px 0; }
.small-print{ font-size:13px; color: var(--text-dim); }
.center{ text-align:center; }

@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; } }

/* Cookie consent banner (only ever created if analytics is configured) */
.consent-banner{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:60;
  max-width:640px; margin:0 auto;
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius);
  padding:16px 18px; box-shadow: var(--shadow-card);
  display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between;
}
.consent-banner p{ margin:0; font-size:13.5px; color: var(--text-muted); flex:1 1 260px; }
.consent-actions{ display:flex; gap:10px; flex-shrink:0; }