/* ═══════════════════════════════════════
   PISTON QUARKS — Electric Precision Design System
   Inspired by Stitch DS "Electric Precision Executive"
   ═══════════════════════════════════════ */

/* ─── FONTS ─── */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700;800&family=Anybody:wght@300;400;500;600&family=Bebas+Neue&display=swap');

/* ─── RESET ─── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px;-webkit-font-smoothing:antialiased}
body{font-family:'Anybody',sans-serif;background:#f9f9f9;color:#1a1c1c;line-height:1.5;overflow-x:hidden}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
button{cursor:pointer;border:none;background:none;font-family:inherit}
ul{list-style:none}

/* ─── DESIGN TOKENS ─── */
:root{
  /* Brand */
  --primary:#1307e4;
  --primary-hover:#1710e6;
  --primary-container:#595fff;
  --primary-light:#e1e0ff;
  --secondary:#235cb4;
  --secondary-container:#72a2fe;
  --tertiary:#5c5c5c;
  --tertiary-container:#747474;
  --accent:#1307e4;

  /* Surfaces */
  --surface:#f9f9f9;
  --surface-dim:#dadada;
  --surface-bright:#f9f9f9;
  --surface-low:#f3f3f4;
  --surface-container:#eeeeee;
  --surface-high:#e8e8e8;
  --surface-highest:#e2e2e2;
  --bg-card:#ffffff;
  --bg-card-hover:#f5f5f7;
  --bg-deep:#f9f9f9;

  /* Text */
  --text-primary:#1a1c1c;
  --text-secondary:#414753;
  --text-muted:#717785;
  --text-inverse:#ffffff;

  /* Borders */
  --border-fine:#e5e5e7;
  --border-hover:#d2d2d7;
  --border-outline:#717785;
  --border-outline-variant:#c1c6d5;

  /* Spacing */
  --space-xs:4px;
  --space-sm:8px;
  --space-md:16px;
  --space-lg:24px;
  --space-xl:32px;
  --space-2xl:48px;
  --space-3xl:64px;
  --space-4xl:80px;

  /* Typography */
  --font-display:'Open Sans',sans-serif;
  --font-body:'Anybody',sans-serif;
  --font-label:'Bebas Neue',sans-serif;

  /* Radius */
  --radius-sm:4px;
  --radius:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-xl:24px;
  --radius-full:9999px;

  /* Shadows */
  --shadow-sm:0 1px 3px rgba(0,0,0,0.04);
  --shadow-md:0 4px 12px rgba(0,0,0,0.06);
  --shadow-lg:0 8px 30px rgba(0,0,0,0.08);

  /* Container */
  --container-max:1200px;
  --nav-height:64px;
}

/* ─── DARK SECTION OVERRIDES ─── */
.dark-section{
  --surface:#0d0d0f;
  --surface-dim:#111113;
  --surface-bright:#1c1c1e;
  --surface-low:#151517;
  --surface-container:#1a1a1d;
  --surface-high:#1f1f22;
  --surface-highest:#2a2a2d;
  --bg-card:#151517;
  --bg-card-hover:#1c1c1e;
  --bg-deep:#0a0a0c;
  --text-primary:#f5f5f7;
  --text-secondary:#a1a1a6;
  --text-muted:#6b6b70;
  --border-fine:#1f1f22;
  --border-hover:#2d2d30;
  --shadow-sm:0 1px 3px rgba(0,0,0,0.2);
  --shadow-md:0 4px 12px rgba(0,0,0,0.3);
  --shadow-lg:0 8px 30px rgba(0,0,0,0.4);
  background:var(--bg-deep);color:var(--text-primary)
}

/* ─── CONTAINER ─── */
.container{max-width:var(--container-max);margin:0 auto;padding:0 var(--space-lg)}
@media(max-width:640px){.container{padding:0 var(--space-md)}}

/* ─── TYPOGRAPHY ─── */
.h-display{font-family:var(--font-display);font-size:clamp(2rem,5vw,3.5rem);font-weight:800;line-height:1.1;letter-spacing:-0.03em}
.h1{font-family:var(--font-display);font-size:clamp(1.75rem,4vw,2.5rem);font-weight:700;line-height:1.2;letter-spacing:-0.02em}
.h2{font-family:var(--font-display);font-size:clamp(1.5rem,3vw,2rem);font-weight:700;line-height:1.25;letter-spacing:-0.01em}
.h3{font-family:var(--font-display);font-size:1.25rem;font-weight:600;line-height:1.3}
.body-lg{font-size:1.125rem;line-height:1.6;color:var(--text-secondary)}
.body{font-size:1rem;line-height:1.5;color:var(--text-secondary)}
.body-sm{font-size:0.875rem;line-height:1.5;color:var(--text-muted)}
.label{font-family:var(--font-label);font-size:1rem;letter-spacing:0.05em;text-transform:uppercase;color:var(--text-muted)}
.label-sm{font-family:var(--font-label);font-size:0.75rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-muted)}

/* ─── BUTTONS ─── */
.btn{display:inline-flex;align-items:center;gap:var(--space-sm);padding:12px 24px;border-radius:var(--radius);font-family:var(--font-display);font-size:0.9rem;font-weight:600;transition:all 0.2s ease}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-hover);transform:translateY(-1px)}
.btn-secondary{background:var(--surface-low);color:var(--text-primary);border:1px solid var(--border-fine)}
.btn-secondary:hover{background:var(--surface-high)}
.btn-dark{background:rgba(255,255,255,0.1);color:#fff;border:1px solid rgba(255,255,255,0.15)}
.btn-dark:hover{background:rgba(255,255,255,0.15)}
.btn-outline{background:transparent;color:var(--primary);border:1.5px solid var(--primary)}
.btn-outline:hover{background:var(--primary-light)}
.btn-ghost{background:transparent;color:var(--text-secondary)}
.btn-ghost:hover{color:var(--text-primary);background:var(--surface-low)}
.btn-lg{padding:16px 32px;font-size:1rem;border-radius:var(--radius-md)}
.btn-full{width:100%;justify-content:center}
.label-btn{font-family:var(--font-label);font-size:1.1rem;letter-spacing:0.08em;padding:12px 28px;border-radius:var(--radius-full)}

/* ─── CARDS ─── */
.card{background:var(--bg-card);border:1px solid var(--border-fine);border-radius:var(--radius-xl);padding:var(--space-xl);transition:all 0.25s ease}
.card:hover{box-shadow:var(--shadow-md);border-color:var(--border-hover)}
.card-sm{padding:var(--space-lg);border-radius:var(--radius-lg)}
.card-flat{box-shadow:none}
.card-flat:hover{box-shadow:var(--shadow-sm)}

/* ─── SECTION ─── */
.section{padding:var(--space-4xl) 0}
.section-sm{padding:var(--space-2xl) 0}
.section-tag{font-family:var(--font-label);font-size:0.85rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--primary);margin-bottom:var(--space-sm)}
.section-sub{color:var(--text-secondary);max-width:600px;font-size:1.05rem;line-height:1.6;margin-top:var(--space-sm)}

/* ─── GRID ─── */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-lg)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-lg)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-lg)}
.grid-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-lg)}

@media(max-width:1024px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
}

/* ─── TAG ─── */
.tag{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:var(--radius-full);font-family:var(--font-body);font-size:0.75rem;font-weight:500;background:var(--primary-light);color:var(--primary)}
.tag-outline{background:transparent;border:1px solid var(--border-outline-variant);color:var(--text-secondary)}
.tag-dark{background:rgba(255,255,255,0.1);color:var(--text-inverse)}

/* ─── DIVIDER ─── */
.divider{height:1px;background:var(--border-fine);border:none;margin:var(--space-xl) 0}

/* ─── UTILITIES ─── */
.text-center{text-align:center}
.text-primary{color:var(--text-primary)}
.text-secondary{color:var(--text-secondary)}
.text-accent{color:var(--primary)}
.text-inverse{color:var(--text-inverse)}
.mt-sm{margin-top:var(--space-sm)}
.mt-md{margin-top:var(--space-md)}
.mt-lg{margin-top:var(--space-lg)}
.mt-xl{margin-top:var(--space-xl)}
.mb-lg{margin-bottom:var(--space-lg)}
.gap-sm{gap:var(--space-sm)}
.gap-md{gap:var(--space-md)}
.flex{display:flex}
.flex-col{flex-direction:column}
.items-center{align-items:center}
.justify-center{justify-content:center}
.justify-between{justify-content:space-between}
.flex-wrap{flex-wrap:wrap}
.w-full{width:100%}

/* ─── ANIMATIONS ─── */
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideLeft{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes pulse-glow{0%,100%{box-shadow:0 0 20px rgba(19,7,228,0.15)}50%{box-shadow:0 0 40px rgba(19,7,228,0.3)}}
@keyframes scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

.reveal{opacity:0;transform:translateY(30px);transition:all 0.7s cubic-bezier(0.16,1,0.3,1)}
.reveal-visible{opacity:1;transform:translateY(0)}

/* ─── PRICE ─── */
.price{font-family:var(--font-display);font-size:1.75rem;font-weight:700;color:var(--text-primary)}
.price-original{text-decoration:line-through;color:var(--text-muted);font-size:1rem}
.price-badge{display:inline-block;padding:4px 12px;background:#e8f5e9;color:#2e7d32;border-radius:var(--radius-full);font-size:0.8rem;font-weight:600}

/* ─── RESPONSIVE ─── */
@media(max-width:640px){
  .section{padding:var(--space-2xl) 0}
  :root{--nav-height:56px}
}