/* style.css — Surfskate Flow Lab (unified) */

:root { --bg:#ffffff; --text:#0a0a0a; --muted:#6b7280; --accent:#0ea5e9; --border:#e5e7eb; }

/* Base */
*{box-sizing:border-box} html,body{margin:0;padding:0;background:var(--bg);color:var(--text)}
body{font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:underline;text-decoration-color:rgba(14,165,233,.45);text-underline-offset:2px}
a:hover{text-decoration-color:var(--accent)}

/* Layout */
.container{max-width:760px;margin:0 auto;padding:24px}
header{display:flex;align-items:center;gap:12px;padding:12px 0}
header img{height:36px;width:auto}
nav{margin-left:auto}
nav a{margin-left:16px;font-size:14px;color:var(--muted);text-decoration:none}
nav a:hover{color:var(--text);text-decoration:underline}
.footer{margin-top:48px;padding-top:16px;border-top:1px solid var(--border);color:var(--muted);font-size:14px;text-align:center}

/* Typography */
h1{font-size:2.4rem;line-height:1.2;margin:.5em 0 .3em}
h2{font-size:1.5rem;line-height:1.3;margin:1.6em 0 .6em}
p{font-size:1.075rem;margin:.85em 0}
.muted{color:var(--muted)}
.badge{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
blockquote{border-left:3px solid var(--border);padding-left:14px;color:#374151;margin:1em 0}
hr{border:0;border-top:1px solid var(--border);margin:24px 0}

/* Sections */
.section{margin-top:48px}
.section-lg{margin-top:60px}
.center{text-align:center}

/* HERO */
.hero{text-align:center;padding:80px 20px}
.logo-hero{display:block;margin:0 auto 24px;width:100%;max-width:640px;height:auto}
.hero-title{font-size:2.8rem;margin-bottom:.3em}
.hero-subtitle{color:var(--muted);font-size:1.2rem}

/* Buttons */
.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border-radius:10px;border:1px solid var(--border);background:#fff;color:var(--text);text-decoration:none;font-weight:500}
.button:hover{border-color:var(--accent);box-shadow:0 1px 0 rgba(0,0,0,.02)}
.button.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.button.primary:hover{filter:brightness(1.05)}

/* Responsive */
@media (max-width:640px){
  .container{padding:16px}
  .logo-hero{max-width:320px}
  .hero-title{font-size:2.1rem}
  h1{font-size:2rem}
  h2{font-size:1.3rem}
  p{font-size:1rem}
}

/* Accessibility */
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}