:root{
  /* Base */
  --bg:#FFFFFF; --text:#0B1220; --muted:#475569; --border:#E5E7EB;
  --surface:#FFFFFF; --radius:14px; --shadow:0 6px 18px rgba(15,23,42,.05);
  /* Accent palette */
  --accent:#2563EB;         /* primary blue */
  --accent-green:#10B981;   /* support green */
  --accent-warm:#F59E0B;    /* warm amber */
  --accent-rose:#E11D48;    /* rose highlight */
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0B1220; --text:#F9FAFB; --muted:#94A3B8; --border:#1F2937;
    --surface:#0F172A; --shadow:0 8px 22px rgba(0,0,0,.35);
    --accent:#60A5FA; --accent-green:#34D399; --accent-warm:#FBBF24; --accent-rose:#FB7185;
  }
}
*{box-sizing:border-box}
html{font-family:Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial}
body{margin:0;background:var(--bg);color:var(--text);line-height:1.7}
.container{max-width:980px;margin:0 auto;padding:1.25rem}

/* Header (super minimal) */
.header{border-bottom:1px solid var(--border);position:sticky;top:0;background:rgba(255,255,255,.9);backdrop-filter:blur(6px);z-index:40}
@media (prefers-color-scheme: dark){.header{background:rgba(2,6,23,.7)}}
.nav{display:flex;align-items:center;justify-content:space-between;padding:.6rem 0}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:inherit}
.brand img{height:40px;width:auto}
.brand .title{font-weight:900}
.nav-links{display:flex;gap:.4rem}
.nav-links a{text-decoration:none;color:var(--text);padding:.4rem .7rem;border-radius:999px}
.nav-links a:hover,.nav-links a.active{background:rgba(100,116,139,.08)}

/* Hero */
.hero{padding:3.5rem 0 1.25rem}
.eyebrow{font-size:.9rem;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
h1{font-size:clamp(1.8rem, 4.5vw, 2.6rem);margin:.4rem 0 1rem;line-height:1.15}
.lead{color:var(--muted)}

/* Cards (single column) */
.section{padding:1rem 0}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1rem;box-shadow:var(--shadow)}
.card h2,.card h3{margin:.2rem 0 .5rem}

/* Accent utilities */
.accent{color:var(--accent)}
.badges{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.6rem}
.badge{padding:.25rem .55rem;border-radius:999px;font-size:.85rem;border:1px solid var(--border)}
.badge.blue{background:rgba(37,99,235,.08)}
.badge.green{background:rgba(16,185,129,.12)}
.badge.warm{background:rgba(245,158,11,.12)}
.badge.rose{background:rgba(225,29,72,.10)}

/* Footer */
.footer{margin-top:2rem;border-top:1px solid var(--border);padding:1rem 0;color:var(--muted);font-size:.98rem}
.footer a{color:inherit}


/* --- Responsive Enhancements (v6) --- */

/* Fluid type scale */
:root{
  --step--1: clamp(0.86rem, 0.8rem + 0.2vw, 0.95rem);
  --step-0: clamp(1.00rem, 0.95rem + 0.35vw, 1.08rem);
  --step-1: clamp(1.10rem, 1.02rem + 0.6vw, 1.25rem);
  --step-2: clamp(1.30rem, 1.08rem + 1.2vw, 1.50rem);
  --step-3: clamp(1.60rem, 1.2rem + 2.2vw, 1.95rem);
  --step-4: clamp(2.00rem, 1.4rem + 3.2vw, 2.60rem);
}

body{font-size:var(--step-0)}
h1{font-size:var(--step-4)}
h2{font-size:var(--step-3)}
h3{font-size:var(--step-2)}

/* Fluid container paddings */
.container{padding-left:clamp(1rem, 2vw, 1.25rem); padding-right:clamp(1rem, 2vw, 1.25rem)}

/* Touch targets & spacing */
.nav a, .nav button, .nav-links a, .button, .badge { min-height: 44px; display: inline-flex; align-items: center; }
.card{padding:clamp(.9rem, 1.5vw, 1.25rem)}

/* Collapsible nav for small screens */

@media (max-width: 860px){
  
  .nav-links{display:none; position:absolute; top:64px; right:1rem; left:1rem; background:var(--surface);
             border:1px solid var(--border); border-radius:12px; padding:.6rem; box-shadow:var(--shadow)}
  .nav-links.open{display:flex; flex-direction:column}
  .nav{position:relative}
}

/* Better grid for tablet/desktop */
@media (min-width: 600px){
  .grid{grid-template-columns: repeat(12, 1fr);}
  .card{grid-column: span 6}
}
@media (min-width: 960px){
  .card{grid-column: span 4}
}

/* Media elements */
img, svg, video{max-width:100%; height:auto;}

/* Dark-mode logo swap (class-free) */
.hide-on-dark{display:block}
.show-on-dark{display:none}
@media (prefers-color-scheme: dark){
  .hide-on-dark{display:none}
  .show-on-dark{display:block}
}

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

/* Focus visibility */
:focus-visible{outline: 3px solid var(--accent); outline-offset: 2px}