/* Site Sprint template — token-driven so a rebrand is a variable change. Four theme presets selected by (set from data.js). */ :root { --ink:#1A2330; --dim:#5C6B7A; --bg:#FFFFFF; --soft:#F5F7FA; --line:#E4E9EF; --accent:#1E62D0; --accent-ink:#FFFFFF; --radius:12px; --font:-apple-system,"Segoe UI",Roboto,sans-serif; --display:var(--font); } [data-theme="trade"] { --accent:#D96B12; --ink:#20242B; --soft:#F7F4EF; } [data-theme="warm"] { --accent:#7A8450; --ink:#2E2A24; --bg:#FDFBF7; --soft:#F4EFE6; --line:#E7DFD2; } [data-theme="sharp"] { --ink:#EAF0F6; --dim:#93A1B0; --bg:#101720; --soft:#18212C; --line:#243040; --accent:#E8B54A; --accent-ink:#141414; } * { box-sizing:border-box; margin:0; } body { font-family:var(--font); color:var(--ink); background:var(--bg); line-height:1.6; } img { max-width:100%; display:block; border-radius:var(--radius); } .wrap { max-width:1020px; margin:0 auto; padding:0 20px; } header.top { position:sticky; top:0; background:var(--bg); border-bottom:1px solid var(--line); z-index:10; } .topRow { display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:12px; } .logo { font-weight:900; font-size:19px; color:var(--ink); text-decoration:none; } nav[data-nav] { display:flex; gap:18px; align-items:center; } nav[data-nav] a { color:var(--ink); text-decoration:none; font-weight:600; font-size:15px; } nav[data-nav] a.navCta { background:var(--accent); color:var(--accent-ink); padding:9px 18px; border-radius:9px; font-weight:800; } .hero { padding:64px 0 44px; } .hero h1 { font-family:var(--display); font-size:clamp(30px,5vw,46px); line-height:1.12; font-weight:900; max-width:680px; } .hero .tag { margin-top:14px; font-size:18px; color:var(--dim); max-width:600px; } .ctaRow { margin-top:26px; display:flex; gap:12px; flex-wrap:wrap; } .btn { display:inline-block; padding:13px 26px; border-radius:10px; font-weight:800; text-decoration:none; font-size:16px; } .btn.primary { background:var(--accent); color:var(--accent-ink); } .btn.ghost { border:1.5px solid var(--accent); color:var(--accent); } .proofStrip { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; padding:26px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .stat { text-align:center; } .stat b { display:block; font-size:24px; font-weight:900; color:var(--accent); } .stat span { color:var(--dim); font-size:13.5px; } section { padding:46px 0; } section + section { border-top:1px solid var(--line); } h2 { font-family:var(--display); font-size:26px; font-weight:900; margin-bottom:10px; } .lead { color:var(--dim); max-width:640px; margin-bottom:24px; } .grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px; } .card { background:var(--soft); border:1px solid var(--line); border-radius:var(--radius); padding:22px; } .card h3 { font-size:17px; margin-bottom:8px; } .card p { color:var(--dim); font-size:14.5px; } .card .price { margin-top:12px; font-weight:800; color:var(--accent); } .chips { display:flex; flex-wrap:wrap; gap:8px; } .chip { border:1px solid var(--line); background:var(--soft); border-radius:999px; padding:6px 14px; font-size:14px; font-weight:600; } dl[data-faq] dt { font-weight:800; margin-top:18px; } dl[data-faq] dd { margin:6px 0 0; color:var(--dim); } form[data-form] { max-width:520px; } form[data-form] label { display:block; font-weight:700; font-size:14px; margin:14px 0 6px; } form[data-form] input, form[data-form] textarea, form[data-form] select { width:100%; border:1.5px solid var(--line); border-radius:9px; padding:11px 12px; font:inherit; font-size:15px; background:var(--bg); color:var(--ink); } form[data-form] input:focus, form[data-form] textarea:focus { outline:none; border-color:var(--accent); } form[data-form] button { margin-top:18px; background:var(--accent); color:var(--accent-ink); border:0; font-weight:800; font-size:16px; padding:13px 30px; border-radius:10px; cursor:pointer; } .formMsg { margin-top:10px; font-size:14px; font-weight:700; color:var(--accent); } .gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; } footer.bottom { border-top:1px solid var(--line); padding:30px 0 44px; color:var(--dim); font-size:14px; } footer.bottom a { color:var(--dim); } footer.bottom [data-footer] { display:flex; flex-direction:column; gap:6px; } @media (max-width:640px) { nav[data-nav] a:not(.navCta) { display:none; } /* phone: logo + CTA only */ .hero { padding:44px 0 32px; } } @media print { header.top, .ctaRow, form[data-form] { display:none; } }