/* Sincronyx AI — landing (Coinbase-inspired: white canvas + Coinbase Blue + near-black). */
:root {
  --canvas:#ffffff; --surface-soft:#f7f7f7; --surface-strong:#eef0f3;
  --surface-dark:#0a0b0d; --surface-dark-elevated:#16181c;
  --ink:#0a0b0d; --body:#5b616e; --muted:#7c828a; --muted-soft:#a8acb3;
  --primary:#0052ff; --primary-active:#003ecc; --on-primary:#ffffff;
  --on-dark:#ffffff; --on-dark-soft:#a8acb3;
  --hairline:#dee1e6;
  --r-md:12px; --r-lg:16px; --r-xl:24px; --r-pill:100px; --r-full:9999px;
  --section:96px;
  --sans:'Inter', -apple-system, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--canvas); color:var(--body); font-family:var(--sans); font-size:16px; line-height:1.5; }
a { color:var(--primary); text-decoration:none; }
a:hover { text-decoration:underline; }
.wrap { max-width:1120px; margin:0 auto; padding:0 24px; }

h1,h2,h3 { color:var(--ink); font-weight:400; margin:0 0 .4em; }
h1 { font-size:64px; line-height:1.0; letter-spacing:-1.6px; }
h2 { font-size:44px; line-height:1.09; letter-spacing:-1px; }
h3 { font-size:18px; font-weight:600; letter-spacing:0; }
p.lead { font-size:18px; color:var(--body); max-width:620px; }
.muted { color:var(--muted); }

/* Nav */
.nav { display:flex; justify-content:space-between; align-items:center; height:64px; }
.brand img { height:36px; width:auto; display:block; }
.nav nav a { color:var(--ink); font-weight:500; font-size:14px; margin-left:18px; }

/* Buttons — pill */
.btn { display:inline-block; background:var(--primary); color:var(--on-primary)!important; padding:14px 28px; border-radius:var(--r-pill); font-weight:600; font-size:16px; text-decoration:none!important; border:0; cursor:pointer; }
.btn:hover { background:var(--primary-active); }
.btn.secondary { background:var(--surface-strong); color:var(--ink)!important; }
.btn.on-dark { background:var(--surface-dark-elevated); color:var(--on-dark)!important; }
.btn.outline-dark { background:transparent; color:var(--on-dark)!important; border:1px solid rgba(255,255,255,.5); }

/* Sections */
section { padding:var(--section) 0; }
section.tight { padding:56px 0; }

/* Hero */
.hero { text-align:center; padding-top:48px; }
.hero .hero-logo { height:120px; width:auto; margin:8px auto 24px; display:block; }
.hero .btn { margin-top:8px; }

/* Steps */
.steps { list-style:none; padding:0; max-width:760px; margin:0 auto; }
.steps li { background:var(--surface-soft); border:1px solid var(--hairline); border-radius:var(--r-xl); padding:18px 22px; margin-bottom:12px; color:var(--ink); }

/* Feature grid */
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:24px; }
.card { background:var(--canvas); border:1px solid var(--hairline); border-radius:var(--r-xl); padding:32px; }
.card h3 { margin:0 0 6px; }
.card p { margin:0; color:var(--body); }

/* Dark CTA / pricing band */
.dark { background:var(--surface-dark); color:var(--on-dark); border-radius:var(--r-xl); padding:64px 48px; text-align:center; }
.dark h2 { color:var(--on-dark); }
.dark .price { font-size:48px; letter-spacing:-1px; color:var(--on-dark); }
.dark .price small { font-size:16px; color:var(--on-dark-soft); }
.dark .muted { color:var(--on-dark-soft); }
/* Light card so every Bold payment-method logo is fully visible on the dark band. */
.bold-methods { background:#ffffff; color:var(--ink); border-radius:var(--r-lg); padding:20px; margin:20px auto 0; max-width:460px; text-align:center; }
.bold-methods .muted { color:var(--muted); }
.bold-methods [data-bold-payment-methods] { display:flex; justify-content:center; align-items:center; }
.bold-methods [data-bold-payment-methods] img,
.bold-methods [data-bold-payment-methods] svg { max-width:100%; height:auto; }

/* Legal */
.legal { max-width:820px; margin:0 auto; }
.legal h1 { font-size:44px; }
.legal h2 { font-size:20px; font-weight:600; margin-top:24px; letter-spacing:0; }
.legal p, .legal li { color:var(--body); }

/* Badge */
.badge { display:inline-block; background:var(--surface-strong); color:var(--ink); font-size:12px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; padding:5px 14px; border-radius:var(--r-pill); }

/* Footer */
footer { background:var(--canvas); border-top:1px solid var(--hairline); padding:64px 0; margin-top:64px; text-align:center; }
footer .footer-logo { height:72px; width:auto; margin:0 auto 16px; display:block; }
footer a { color:var(--ink); }
footer .fine { color:var(--muted); font-size:13px; margin-top:12px; }

@media (max-width:768px){ h1{font-size:44px;letter-spacing:-1px;} h2{font-size:30px;} section{padding:64px 0;} .dark{padding:40px 24px;} .hero .hero-logo{height:88px;} }