@import url('./themes/silver.css');
@import url('./themes/silver.css');

/* Theme loader: default to Silver, can switch via ?theme=white or ?theme=grid */
:root{
  --bg:#f6f8fb; --panel:#ffffff; --ring:#e2e8f0;
  --text:#0b1220; --muted:#475569;
  --grad1:#0ea5e9; --grad2:#22c55e; --grad3:#6366f1;
  --accent:#0ea5e9;
}
*{box-sizing:border-box}
html,body{color:var(--text);}
a{text-decoration:none;color:var(--text)}
.container{width:min(1200px,92%);margin:0 auto}
.flex{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.grid-4{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2rem}
.site-header{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--ring)}
.logo{display:flex;align-items:center;padding:1rem 0}
.nav a{padding:.6rem .8rem;border-radius:10px;opacity:.9}
.nav .cta{background:linear-gradient(90deg,var(--grad1),var(--grad2));color:#001019;font-weight:800}
.hero{padding:clamp(3rem,6vw,7rem) 0}
.hero .grid{display:grid;grid-template-columns:1.2fr .8fr;gap:2rem;align-items:center}
h1{font-size:clamp(2rem,4.6vw,3.6rem);line-height:1.06;margin:.2rem 0 1rem}
p.lead{font-size:clamp(1rem,1.4vw,1.2rem);color:var(--muted)}
.badges{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.75rem}
.badge{border:1px solid var(--ring);color:var(--muted);padding:.3rem .6rem;border-radius:999px;font-size:.85rem}
.btn{display:inline-block;border:1px solid var(--ring);border-radius:14px;padding:.85rem 1rem;font-weight:800}
.btn.primary{background:linear-gradient(90deg,var(--grad1),var(--grad2));color:#001019}
.btn.ghost{background:transparent}
.card{background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.78));border:1px solid var(--ring);border-radius:18px;padding:1.2rem}
.section{padding:3rem 0}
.section-title{font-size:2rem;margin:0 0 1rem}
.icon-img{width:52px;height:52px;border-radius:14px;display:inline-grid;place-items:center;background:rgba(2,6,23,.04);border:1px solid var(--ring);margin-bottom:.4rem}
.marquee{display:flex;gap:2rem;overflow:hidden;mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%)}
.marquee .row{display:flex;gap:2rem;animation:slide 24s linear infinite}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.step{border-left:3px solid var(--grad2);padding:0 0 0 .8rem}
.kicker{text-transform:uppercase;letter-spacing:.18em;color:var(--muted);font-size:.8rem}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.stat{background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.78));border:1px solid var(--ring);border-radius:18px;padding:1.2rem;text-align:center}
.stat .num{font-weight:900;font-size:2rem}
.slider{overflow:hidden;border-radius:18px;border:1px solid var(--ring)}
.slides{display:flex;transition:transform .6s ease}
.slide{min-width:100%;padding:1.2rem;background:rgba(2,6,23,0.02)}
.slider-controls{display:flex;gap:.5rem;justify-content:center;margin-top:.5rem}
.dot{width:10px;height:10px;border-radius:999px;background:#cbd5e1;cursor:pointer}
.dot.active{background:linear-gradient(90deg,var(--grad1),var(--grad2))}
.site-footer{border-top:1px solid var(--ring);margin-top:3rem;padding:2rem 0;background:rgba(255,255,255,.75)}
.foot-title{font-weight:800;margin-bottom:.6rem}
.brand{font-weight:900;font-size:1.1rem}
.legal{border-top:1px solid var(--ring);margin-top:1rem;padding-top:1rem;color:var(--muted)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.list{padding-left:1.1rem}
blockquote{margin:0;background:rgba(2,6,23,.04);border-left:3px solid var(--grad2);padding:1rem;border-radius:8px}
.form{display:grid;gap:.8rem}
input,select,textarea{width:100%;background:rgba(2,6,23,.04);border:1px solid var(--ring);color:var(--text);padding:.85rem 1rem;border-radius:12px;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--grad2)}
form .row{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem}
.floating-cta{position:fixed;right:1rem;bottom:1rem;z-index:40}
.floating-cta .btn{box-shadow:0 10px 35px rgba(34,197,94,.2)}
.small{padding:.6rem .8rem;font-size:.9rem}
.reveal{opacity:0;transform:translateY(16px);transition:all .6s ease}
.reveal.visible{opacity:1;transform:none}
@media(max-width:980px){
  .grid-4,.cards,.process,.stats,.split,.hero .grid{grid-template-columns:1fr}
}