/* =========================================================
   ThrasherApps — global styles (light, Apple-leaning)
   Tokens, reset, layout, components, motion, utilities
   ========================================================= */

/* ---------- Design Tokens ---------- */
:root{
  --color-primary:#007AFF;        /* Apple blue */
  --color-primary-hover:#0062CC;
  --text-strong:#0F172A;
  --text-muted:#475569;
  --bg:#F8FAFC;
  --card:#FFFFFF;
  --border:#E5E7EB;

  --radius-card:12px;
  --radius-btn:8px;
  --shadow-sm:0 4px 14px rgba(0,0,0,0.08);

  --space-1:8px;
  --space-2:12px;
  --space-3:16px;
  --space-4:24px;
  --space-5:32px;
  --space-6:48px;

  --maxw:1100px;
}

/* ---------- Base Reset ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color:var(--text-strong);
  background:var(--bg);
  line-height:1.6;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:var(--color-primary);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}

/* ---------- Layout ---------- */
.container{max-width:var(--maxw);margin:0 auto;padding:0 var(--space-3)}
.section{padding:var(--space-6) 0}
.section--tight{padding:var(--space-5) 0}
.grid{
  display:grid;
  gap:var(--space-4);
}
@media (min-width:720px){
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .grid-2{grid-template-columns:repeat(2,1fr)}
}

/* ---------- Header / Nav ---------- */
.site-header{
  position:sticky; top:0; z-index:20;
  background:rgba(255,255,255,0.9); backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--border);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  height:64px;
}
.brand{font-weight:700; letter-spacing:.2px; color:var(--text-strong)}
.nav-links{display:flex; gap:var(--space-3); align-items:center}
.nav-links a{
  color:var(--text-strong); text-decoration:none; padding:8px 10px; border-radius:6px;
}
.nav-links a:hover{background:#f1f5f9}
.nav-links a.active{color:var(--color-primary); font-weight:600;}

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden;
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,#ffffff, #f6f9ff);
}
.hero-inner{padding:64px 0}
.hero h1{
  font-size: clamp(32px, 5vw, 44px);
  line-height:1.15; margin:0 0 12px;
}
.hero p{
  color:var(--text-muted); margin:0 0 20px; max-width: 680px;
}

/* Subtle animated gradient blob */
.hero::before{
  content:""; position:absolute; inset:auto -20% -30% -20%; height:300px;
  background:radial-gradient(60% 60% at 50% 50%, rgba(0,122,255,.35), rgba(0,122,255,0));
  filter:blur(40px); opacity:.6; animation:floaty 8s ease-in-out infinite alternate;
}
@keyframes floaty{
  0%{transform:translateY(0)}
  100%{transform:translateY(-20px)}
}
@media (prefers-reduced-motion: reduce){
  .hero::before{animation:none}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 18px; border-radius:var(--radius-btn); border:1px solid transparent;
  background:var(--color-primary); color:#fff; font-weight:600;
  box-shadow: var(--shadow-sm); text-decoration:none; transition: transform .12s ease, background .12s ease;
}
.btn:hover{background:var(--color-primary-hover); transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-secondary{
  background:#fff; color:var(--text-strong); border-color:var(--border);
  box-shadow:none;
}
.btn-secondary:hover{background:#f8fafc}

/* ---------- Cards ---------- */
.card{
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius-card); padding:var(--space-4);
  box-shadow: var(--shadow-sm); transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover{transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.10)}
.card h3{margin:0 0 6px; font-size:20px}
.card p{margin:0; color:var(--text-muted)}

/* ---------- Pillars / Badges ---------- */
.pillars{display:grid; gap:var(--space-3)}
@media (min-width:720px){ .pillars{grid-template-columns:repeat(3,1fr)} }
.badge{
  display:inline-block; font-size:12px; padding:4px 10px; border-radius:999px;
  background:#EEF2FF; color:#3730A3; border:1px solid #E0E7FF;
}

/* ---------- CTA band ---------- */
.cta-band{
  background:#F1F5F9; border:1px solid var(--border); border-left:0;border-right:0;
}
.cta-band .wrap{
  display:flex; gap:var(--space-3); align-items:center; justify-content:space-between; flex-wrap:wrap;
}

/* ---------- Footer ---------- */
.site-footer{
  color:var(--text-muted); border-top:1px solid var(--border);
  padding:var(--space-5) 0; font-size:14px;
}
.site-footer a{color:var(--text-muted)}
.site-footer a:hover{text-decoration:underline}

/* ---------- Typography helpers ---------- */
.lead{font-size:18px; color:var(--text-muted)}
.h2{font-size: clamp(24px, 3.5vw, 32px); margin:0 0 8px}
.h3{font-size:20px; margin:0 0 6px}

/* ---------- Scroll reveal (class-driven) ---------- */
.reveal{opacity:0; transform: translateY(12px); transition: opacity .4s ease, transform .4s ease}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none}
}

/* ---------- Utilities ---------- */
.mt-1{margin-top:var(--space-1)} .mt-2{margin-top:var(--space-2)} .mt-3{margin-top:var(--space-3)} .mt-4{margin-top:var(--space-4)} .mt-5{margin-top:var(--space-5)}
.mb-1{margin-bottom:var(--space-1)} .mb-2{margin-bottom:var(--space-2)} .mb-3{margin-bottom:var(--space-3)} .mb-4{margin-bottom:var(--space-4)} .mb-5{margin-bottom:var(--space-5)}
.center{text-align:center}
.hidden{display:none}