/* CryptoPayr — landing page custom layer (rides on top of Tailwind CDN).
   Professional, flat aesthetic: one green accent, hairline borders, no
   gradients or glow. Tuned to read like Heleket / Cryptomus / Adyen. */

:root{
  --grn:#08a05a; --grn-600:#07914f; --grn-700:#066b3c; --grn-tint:#e9f7ef;
  --ink:#0a0e1a; --bd:#e7e9ee; --soft:#f7f8fa;
}
.dark{
  --grn:#16c47c; --grn-600:#13b370; --grn-700:#8ff0c4; --grn-tint:rgba(22,196,124,.12);
  --ink:#ffffff; --bd:rgba(255,255,255,.10); --soft:rgba(255,255,255,.03);
}

html { scroll-behavior: smooth; }

/* Display type — Space Grotesk for headings, tightened tracking */
h1, h2, h3, .cp-logo-text {
    font-family:'Space Grotesk', Inter, system-ui, sans-serif;
    letter-spacing:-0.02em;
}

/* Monospace + tabular figures for code, addresses, amounts */
.cp-mono { font-family:'JetBrains Mono', ui-monospace, Menlo, monospace; font-variant-numeric:tabular-nums; }

/* Visible keyboard focus (links, buttons, inputs) — does not affect mouse users */
:focus-visible { outline:2px solid var(--grn); outline-offset:2px; border-radius:6px; }

/* Navbar "Payments" dropdown — hover + keyboard focus, no JS */
.cp-dd { position:relative; }
.cp-dd-btn { cursor:pointer; }
.cp-dd-btn:focus-visible { outline:none; }
.cp-dd::after { content:''; position:absolute; left:0; right:0; top:100%; height:12px; } /* hover bridge */
.cp-dd-menu {
    position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(6px);
    width:320px; padding:8px; border-radius:16px; background:#fff; border:1px solid var(--bd);
    box-shadow:0 24px 60px -28px rgba(10,14,26,.35);
    opacity:0; visibility:hidden; pointer-events:none; transition:opacity .18s ease, transform .18s ease; z-index:60;
}
.dark .cp-dd-menu { background:#0f1420; box-shadow:0 24px 60px -28px rgba(0,0,0,.6); }
.cp-dd:hover .cp-dd-menu, .cp-dd:focus-within .cp-dd-menu {
    opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0);
}
.cp-dd-caret { transition:transform .18s ease; }
.cp-dd:hover .cp-dd-caret, .cp-dd:focus-within .cp-dd-caret { transform:rotate(180deg); }
.cp-dd-item { display:flex; gap:12px; align-items:flex-start; padding:10px 12px; border-radius:11px; transition:background .15s ease; }
.cp-dd-item:hover { background:var(--soft); }
.cp-dd-ico { flex:0 0 36px; width:36px; height:36px; border-radius:10px; display:grid; place-items:center; color:var(--grn); background:var(--grn-tint); }
.cp-dd-title { display:block; font-weight:600; font-size:14px; color:var(--ink); }
.cp-dd-sub { display:block; font-size:12px; line-height:1.35; color:#64748b; margin-top:1px; }
.dark .cp-dd-sub { color:#94a3b8; }

/* ── Mobile nav (hamburger + slide-down panel) ─────────────────────────────
   The desktop links are `hidden md:flex`; below md they're gone, so the burger
   below drives a full-width panel. Burger shows on mobile only. */
.cp-burger { display:grid; place-items:center; width:38px; height:38px; border-radius:10px;
    border:1px solid var(--bd, #e2e8f0); background:transparent; color:inherit; cursor:pointer; transition:border-color .15s ease; }
.cp-burger:hover { border-color:var(--grn); }
.dark .cp-burger { border-color:rgba(255,255,255,.1); }
.cp-burger svg { width:20px; height:20px; }
.cp-burger .cp-burger-close { display:none; }
.cp-burger[aria-expanded="true"] .cp-burger-open { display:none; }
.cp-burger[aria-expanded="true"] .cp-burger-close { display:block; }

.cp-mobnav { display:none; border-top:1px solid var(--bd, #e2e8f0); background:#fff;
    padding:8px 12px 16px; max-height:calc(100vh - 64px); overflow-y:auto; }
.dark .cp-mobnav { background:#0b0f1a; border-top-color:rgba(255,255,255,.08); }
.cp-mobnav.open { display:block; }
.cp-mobnav-group { padding:14px 6px 4px; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#94a3b8; }
.cp-mobnav a { display:block; padding:11px 12px; border-radius:11px; font-size:15px; font-weight:600; color:var(--ink, #0f172a); }
.dark .cp-mobnav a { color:#e2e8f0; }
.cp-mobnav a:hover, .cp-mobnav a.active { background:var(--soft, #f1f5f9); color:var(--grn); }
.dark .cp-mobnav a:hover, .dark .cp-mobnav a.active { background:rgba(255,255,255,.05); }
.cp-mobnav-sub { font-weight:500; font-size:14px; color:#64748b; }
.dark .cp-mobnav-sub { color:#94a3b8; }
.cp-mobnav-divider { height:1px; margin:10px 6px; background:var(--bd, #e2e8f0); }
.dark .cp-mobnav-divider { background:rgba(255,255,255,.08); }
.cp-mobnav-cta { margin:8px 6px 0; }
.cp-mobnav-cta a { text-align:center; color:#fff !important; background:var(--grn); }
.cp-mobnav-cta a:hover { background:var(--grn); opacity:.92; }
@media (min-width: 768px) {
    .cp-burger { display:none; }
    .cp-mobnav, .cp-mobnav.open { display:none !important; }
}

/* Brand wordmark text — solid, not gradient */
.cp-logo-text { color:#0a0e1a; }
.dark .cp-logo-text { color:#fff; }

/* Accent text (headline word, stats, prices) — solid green, tabular figures */
.cp-gradient-text { color: var(--grn); font-variant-numeric:tabular-nums; }

/* Hero: flat, only a faint green wash */
.cp-hero-glow {
    position:absolute; inset:-160px 0 auto 0; height:460px; pointer-events:none;
    background: radial-gradient(800px 360px at 50% 0, rgba(8,160,90,.06), transparent 70%);
}
.dark .cp-hero-glow { background: radial-gradient(800px 360px at 50% 0, rgba(22,196,124,.10), transparent 70%); }

/* Mock checkout card */
.cp-card { background:#fff; border:1px solid var(--bd); box-shadow:0 1px 2px rgba(10,14,26,.04); }
.dark .cp-card { background:#0f1420; box-shadow:none; }
.cp-field {
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:10px 12px; border-radius:10px; background:var(--soft); border:1px solid var(--bd); font-size:13px;
}
.cp-field span { color:#64748b; }
.cp-field code { font-family:'JetBrains Mono', ui-monospace, Menlo, monospace; font-variant-numeric:tabular-nums; font-weight:600; max-width:55%; }
.cp-qr-demo { width:150px; height:150px; display:block; border-radius:6px; }

/* Coin carousel (all assets, two opposing rows) */
.cp-coin-carousel {
    padding:20px 0; overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
            mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.cp-cz-row { overflow:hidden; }
.cp-cz-row + .cp-cz-row { margin-top:12px; }
.cp-cz-track { display:flex; gap:12px; width:max-content; animation:cpMarquee 90s linear infinite; will-change:transform; }
.cp-cz-rev { animation-direction:reverse; animation-duration:110s; }
.cp-cz {
    flex:0 0 auto; width:46px; height:46px; border-radius:12px;
    display:grid; place-items:center; background:#fff; border:1px solid var(--bd);
}
.dark .cp-cz { background:#0f1420; }
.cp-cz img { width:28px !important; height:28px !important; display:block; object-fit:contain; }
.cp-coin-carousel:hover .cp-cz-track { animation-play-state:paused; }
@media (prefers-reduced-motion: reduce) { .cp-cz-track { animation:none; } }
@keyframes cpMarquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }

/* Feature cards — flat, hairline border, restrained hover */
.cp-feature { padding:26px; border-radius:16px; border:1px solid var(--bd); background:#fff; transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.dark .cp-feature { background:var(--soft); }
.cp-feature:hover { border-color:var(--grn); box-shadow:0 8px 30px -18px rgba(10,14,26,.22); transform:translateY(-2px); }
.cp-feature-icon { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; color:var(--grn); background:var(--grn-tint); }

/* Coin cards */
.cp-coin-card { display:flex; align-items:center; gap:14px; padding:16px; border-radius:14px; border:1px solid var(--bd); background:#fff; transition:border-color .2s ease, transform .2s ease; }
.dark .cp-coin-card { background:var(--soft); }
.cp-coin-card:hover { border-color:var(--grn); transform:translateY(-2px); }
.cp-coin-card img { width:40px; height:40px; flex:0 0 auto; }
.cp-card img { max-width:40px; max-height:40px; }

/* Steps */
.cp-step { padding:28px; border-radius:16px; border:1px solid var(--bd); background:#fff; }
.dark .cp-step { background:var(--soft); }
.cp-step-num { display:inline-grid; place-items:center; width:46px; height:46px; border-radius:12px; font-weight:800; font-size:17px; color:var(--grn); background:var(--grn-tint); }

/* Code block (stays dark; neutral shadow) */
.cp-code { border-radius:16px; overflow:hidden; border:1px solid rgba(255,255,255,.10); background:#0b0f14; box-shadow:0 20px 50px -30px rgba(10,14,26,.5); }
.cp-code-bar { display:flex; align-items:center; gap:7px; padding:12px 16px; background:#11151c; border-bottom:1px solid rgba(255,255,255,.08); }
.cp-dot { width:11px; height:11px; border-radius:50%; }
.cp-code-body { margin:0; padding:22px; overflow-x:auto; font-size:13px; line-height:1.7; color:#e6edf6; font-family:'JetBrains Mono', ui-monospace, Menlo, monospace; }

/* Pricing */
.cp-plan { position:relative; padding:28px; border-radius:18px; border:1px solid var(--bd); background:#fff; }
.dark .cp-plan { background:var(--soft); }
.cp-plan-featured { border-color:var(--grn); box-shadow:0 12px 40px -24px rgba(8,160,90,.45); }
.cp-plan-badge { position:absolute; top:-12px; left:28px; font-size:11px; font-weight:700; letter-spacing:.3px; padding:5px 12px; border-radius:999px; color:#fff; background:var(--grn); }
.cp-plan-cta { display:block; text-align:center; margin-top:26px; padding:12px; border-radius:10px; font-weight:600; border:1px solid var(--bd); color:#0a0e1a; transition:border-color .15s, background .15s; }
.dark .cp-plan-cta { color:#fff; }
.cp-plan-cta:hover { border-color:var(--grn); }
.cp-plan-cta-featured { color:#fff; background:var(--grn); border:1px solid var(--grn); }
.cp-plan-cta-featured:hover { background:var(--grn-600); }

/* CTA band — deep and flat */
.cp-cta { text-align:center; padding:60px 24px; border-radius:24px; color:#fff; background:#0b0f14; border:1px solid rgba(255,255,255,.06); }

/* ── Media kit (/mediakit) ───────────────────────────────────────────────── */
.mk-grad-text { background:linear-gradient(135deg,#43C56D,#0FAD85); -webkit-background-clip:text; background-clip:text; color:transparent; }
/* Logo preview tiles */
.mk-tile { display:grid; place-items:center; min-height:180px; padding:32px; border-radius:16px; border:1px solid var(--bd); }
.mk-tile img { max-height:96px; max-width:100%; }
.mk-tile-light { background:#ffffff; }
.mk-tile-navy { background:#0D1B2A; border-color:rgba(255,255,255,.10); }
.mk-tile-grad { background:linear-gradient(135deg,#43C56D,#0FAD85); border-color:transparent; }
.mk-tile-soft { background:var(--soft); }
.mk-tile-cap { margin-top:10px; font-size:12px; color:#64748b; }
/* Colour swatches */
.mk-swatch { border-radius:16px; border:1px solid var(--bd); overflow:hidden; background:#fff; }
.dark .mk-swatch { background:var(--soft); }
.mk-swatch-fill { height:120px; }
.mk-swatch-body { padding:14px 16px; }
.mk-swatch-name { font-weight:700; font-size:14px; color:var(--ink); }
.mk-swatch-hex { margin-top:2px; font-family:'JetBrains Mono', ui-monospace, Menlo, monospace; font-size:12.5px; color:#64748b; text-transform:uppercase; }
/* Do / Don't cards */
.mk-rule { padding:22px; border-radius:16px; border:1px solid var(--bd); background:#fff; }
.dark .mk-rule { background:var(--soft); }
.mk-rule-do { border-left:3px solid #08a05a; }
.mk-rule-no { border-left:3px solid #e11d48; }
.mk-rule-h { display:flex; align-items:center; gap:8px; font-weight:700; font-size:14px; }
.mk-rule-do .mk-rule-h { color:#08a05a; }
.mk-rule-no .mk-rule-h { color:#e11d48; }
/* Download chips */
.mk-dl { display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:10px; font-size:13px; font-weight:600; border:1px solid var(--bd); color:var(--ink); transition:border-color .15s, color .15s; }
.mk-dl:hover { border-color:var(--grn); color:var(--grn); }
/* Section sub-labels + spacing (utilities not in the static Tailwind build) */
.mk-eyebrow { font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#64748b; }
.mk-gap-lg { margin-top:64px; }
/* Type specimen */
.mk-type { font-size:34px; line-height:1.15; color:var(--ink); }
.mk-quicksand { font-family:'Quicksand', Inter, system-ui, sans-serif; font-weight:700; letter-spacing:-.015em; }
.mk-display { font-family:'Space Grotesk', Inter, system-ui, sans-serif; letter-spacing:-.02em; }

/* ── Contact page (/contact-us) ─────────────────────────────────────────────
   Self-contained styles (the static Tailwind build doesn't cover this page).
   Two-column hero → info aside + form card, plus the form controls. */
.cp-contact-grid { display:grid; grid-template-columns:1fr; gap:44px; }
@media (min-width:1024px) {
    .cp-contact-grid { grid-template-columns:0.85fr 1.15fr; gap:56px; align-items:start; }
}
.cp-form-card { padding:34px; border-radius:20px; }
@media (max-width:540px) { .cp-form-card { padding:22px; } }
.cp-form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:560px) { .cp-form-row { grid-template-columns:1fr; } }
.cp-form-group { margin-top:18px; }
.cp-form-group:first-child { margin-top:0; }

.cp-label { display:block; font-size:13px; font-weight:600; color:var(--ink); margin-bottom:7px; }
.cp-label .req { color:var(--grn); }
.cp-input, .cp-textarea {
    width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--bd);
    background:#fff; color:var(--ink); font-size:14.5px; font-family:inherit; line-height:1.5;
    transition:border-color .15s ease, box-shadow .15s ease;
}
.dark .cp-input, .dark .cp-textarea { background:var(--soft); }
.cp-input::placeholder, .cp-textarea::placeholder { color:#9aa3b2; }
.cp-input:focus, .cp-textarea:focus {
    outline:none; border-color:var(--grn); box-shadow:0 0 0 3px var(--grn-tint);
}
.cp-textarea { resize:vertical; min-height:158px; }

.cp-check { display:flex; gap:11px; align-items:flex-start; font-size:13.5px; color:#475569; line-height:1.55; }
.dark .cp-check { color:#94a3b8; }
.cp-check input { margin-top:1px; width:18px; height:18px; accent-color:var(--grn); flex:0 0 auto; cursor:pointer; }
.cp-check a { color:var(--grn); font-weight:600; }
.cp-check a:hover { text-decoration:underline; }

.cp-submit {
    width:100%; padding:14px 22px; border-radius:12px; border:0; cursor:pointer;
    font-size:15px; font-weight:700; color:#fff; background:var(--grn);
    transition:background .15s ease, transform .1s ease;
}
.cp-submit:hover { background:var(--grn-600); }
.cp-submit:active { transform:translateY(1px); }

.cp-alert { padding:13px 16px; border-radius:12px; font-size:14px; font-weight:500; line-height:1.5; }
.cp-alert-ok  { background:var(--grn-tint); color:var(--grn-700); border:1px solid rgba(8,160,90,.28); }
.cp-alert-err { background:rgba(225,29,72,.08); color:#e11d48; border:1px solid rgba(225,29,72,.25); }
.dark .cp-alert-err { color:#fb7185; }

/* Info aside (left rail) */
.cp-info-item { display:flex; gap:14px; align-items:flex-start; }
.cp-info-ico { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; color:var(--grn); background:var(--grn-tint); flex:0 0 auto; }
.cp-info-label { font-size:13px; font-weight:600; color:#64748b; }
.dark .cp-info-label { color:#94a3b8; }
.cp-info-value { font-weight:700; color:var(--ink); font-size:15px; margin-top:2px; }
.cp-info-value a:hover { color:var(--grn); }

/* Off-screen honeypot — bots fill it, humans never see it */
.cp-honey { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }

/* Respect reduced-motion: kill smooth scroll, marquee, transforms & pulses */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior:auto; }
    .cp-cz-track { animation:none; }
    .cp-feature:hover, .cp-coin-card:hover { transform:none; }
    .animate-pulse { animation:none; }
    *, *::before, *::after { transition-duration:.01ms !important; }
}