/* ── Spaninsight Shared Styles ─────────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --teal:#0D9488;--teal-light:#14B8A6;--teal-dark:#0F766E;
  --orange:#F97316;--orange-light:#FB923C;
  --bg:#FAFAFA;--bg-alt:#FFFFFF;--bg-card:#FFFFFF;
  --text:#1A1A2E;--text-secondary:#64748B;--border:rgba(0,0,0,0.06);
  --shadow:0 1px 3px rgba(0,0,0,0.06),0 4px 16px rgba(0,0,0,0.04);
  --shadow-lg:0 8px 40px rgba(0,0,0,0.08);
}
[data-theme="dark"]{
  --bg:#0F172A;--bg-alt:#1E293B;--bg-card:#1E293B;
  --text:#F1F5F9;--text-secondary:#94A3B8;--border:rgba(255,255,255,0.06);
  --shadow:0 1px 3px rgba(0,0,0,0.3),0 4px 16px rgba(0,0,0,0.2);
  --shadow-lg:0 8px 40px rgba(0,0,0,0.4);
}

html{scroll-behavior:smooth}
body{font-family:'Outfit',system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.65;overflow-x:hidden;transition:background .3s,color .3s}
a{color:inherit;text-decoration:none}
.container{max-width:1140px;margin:0 auto;padding:0 1.5rem}

/* ── NAV ──────────────────────────────────────────────── */
nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:1rem 0;background:rgba(250,250,250,.9);backdrop-filter:blur(16px);border-bottom:1px solid var(--border);transition:background .3s}
[data-theme="dark"] nav{background:rgba(15,23,42,.9)}
.nav-inner{display:flex;align-items:center;justify-content:space-between}
nav img{height:40px; transform: scale(2.5); transform-origin: left center;}
.nav-right{display:flex;align-items:center;gap:1.75rem}
.nav-right a:not(.btn){font-size:.9rem;color:var(--text-secondary);transition:color .2s;font-weight:500}
.nav-right a:not(.btn):hover{color:var(--teal)}

/* ── BUTTONS ──────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.6rem 1.4rem;border-radius:8px;font-weight:600;font-size:.9rem;transition:all .25s;cursor:pointer;border:none;font-family:inherit}
.btn-teal{background:var(--teal);color:#fff}
.btn-teal:hover{background:var(--teal-dark);transform:translateY(-1px);box-shadow:0 6px 20px rgba(13,148,136,.25)}
.btn-ghost{background:transparent;color:var(--text);border:1.5px solid var(--border)}
.btn-ghost:hover{border-color:var(--teal);color:var(--teal)}
.btn-orange{background:var(--orange);color:#fff}
.btn-orange:hover{background:#EA580C;transform:translateY(-1px);box-shadow:0 6px 20px rgba(249,115,22,.25)}

/* ── THEME TOGGLE ─────────────────────────────────────── */
.theme-toggle{background:none;border:1px solid var(--border);border-radius:50%;width:36px;height:36px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;color:var(--text-secondary)}
.theme-toggle:hover{border-color:var(--teal);color:var(--teal)}

/* ── SECTION COMMON ───────────────────────────────────── */
section{padding:5rem 0}
.section-label{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin-bottom:.6rem}
.section-title{font-size:clamp(1.6rem,3.5vw,2.4rem);font-weight:700;margin-bottom:.75rem;line-height:1.2}
.section-desc{color:var(--text-secondary);max-width:520px;margin-bottom:2.5rem}
.section-center{text-align:center}
.section-center .section-desc{margin-left:auto;margin-right:auto}

/* ── CARDS ─────────────────────────────────────────────── */
.f-card,.dl-card{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:1.75rem;transition:all .25s}
.f-card:hover,.dl-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px);border-color:rgba(13,148,136,.15)}
.f-icon{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:1rem;font-weight:700;font-size:1.1rem}
.f-card h3{font-size:1.05rem;font-weight:600;margin-bottom:.4rem}
.f-card p,.dl-card .dl-desc{font-size:.88rem;color:var(--text-secondary);line-height:1.55}

/* ── GRIDS ─────────────────────────────────────────────── */
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.steps-row{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;counter-reset:s}
.dl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}

/* ── STEPS ─────────────────────────────────────────────── */
.step-item{counter-increment:s;position:relative;padding:1.5rem}
.step-num{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;background:var(--teal);color:#fff;font-weight:700;font-size:1rem;margin-bottom:1rem}
.step-num::after{content:counter(s)}
.step-item h3{font-weight:600;margin-bottom:.35rem}
.step-item p{font-size:.88rem;color:var(--text-secondary)}

/* ── PRIVACY BLOCK ─────────────────────────────────────── */
.privacy-block{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:3rem;display:flex;align-items:center;gap:3rem;box-shadow:var(--shadow)}
.privacy-block .left{flex:1}
.privacy-block h2{font-size:1.6rem;font-weight:700;margin-bottom:.6rem}
.privacy-block>p,.privacy-block .left p{color:var(--text-secondary);margin-bottom:1.25rem}
.badges{display:flex;gap:.6rem;flex-wrap:wrap}
.badge{padding:.35rem .75rem;border-radius:6px;font-size:.78rem;font-weight:600;background:rgba(13,148,136,.08);color:var(--teal);border:1px solid rgba(13,148,136,.12)}

/* ── DOWNLOAD CARDS ────────────────────────────────────── */
.dl-card{text-align:center;padding:2rem}
.dl-card .dl-title{font-size:1.1rem;font-weight:600;margin-bottom:.2rem}
.dl-card .dl-sub{margin-top:.75rem}
.dl-card .dl-sub a{font-size:.78rem;color:var(--teal);display:block;margin-top:.3rem}
.dl-card .dl-sub a:hover{text-decoration:underline}

/* ── HERO ──────────────────────────────────────────────── */
.hero{min-height:100vh;display:flex;align-items:center;padding:7rem 0 5rem}
.hero-content{max-width:620px}
.hero-label{display:inline-block;padding:.3rem .75rem;border-radius:6px;font-size:.78rem;font-weight:600;background:rgba(13,148,136,.08);color:var(--teal);margin-bottom:1.5rem;letter-spacing:.02em}
.hero h1{font-size:clamp(2.2rem,5vw,3.5rem);font-weight:800;line-height:1.12;margin-bottom:1.25rem}
.hero h1 .accent{color:var(--teal)}
.hero h1 .accent-orange{color:var(--orange)}
.hero p{font-size:1.1rem;color:var(--text-secondary);margin-bottom:2rem;max-width:520px}
.hero-actions{display:flex;gap:.75rem;flex-wrap:wrap}

/* ── FOOTER ────────────────────────────────────────────── */
footer{border-top:1px solid var(--border);padding:2.5rem 0;margin-top:2rem}
.footer-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem}
.footer-links{display:flex;gap:1.5rem}
.footer-links a{font-size:.85rem;color:var(--text-secondary);transition:color .2s}
.footer-links a:hover{color:var(--teal)}
.footer-copy{font-size:.82rem;color:var(--text-secondary)}
.footer-copy a{color:var(--teal)}

/* ── LEGAL PAGES ───────────────────────────────────────── */
.legal-wrap{max-width:720px;margin:0 auto;padding:6rem 1.5rem 4rem}
.legal-wrap h1{font-size:2rem;font-weight:700;margin-bottom:.5rem}
.legal-wrap .updated{font-size:.85rem;color:var(--text-secondary);margin-bottom:2rem}
.legal-wrap h2{font-size:1.2rem;font-weight:600;margin:2rem 0 .5rem;color:var(--teal)}
.legal-wrap p,.legal-wrap li{font-size:.95rem;color:var(--text-secondary);margin-bottom:.75rem}
.legal-wrap ul{padding-left:1.25rem}
.legal-wrap a{color:var(--teal)}

/* ── RESPONSIVE ────────────────────────────────────────── */
@media(max-width:900px){
  .features-grid,.steps-row,.dl-grid{grid-template-columns:1fr 1fr}
  .privacy-block{flex-direction:column;text-align:center}
}
@media(max-width:600px){
  .features-grid,.steps-row,.dl-grid{grid-template-columns:1fr}
  .nav-right a:not(.btn):not(.theme-toggle){display:none}
  .footer-inner{flex-direction:column;text-align:center}
}