/* ===================================================================
   MrScreenOn — theme.css  (Design v3.0 "Graphite & Volt")
   Tokens, reset, typography, layout. Everything else builds on this.
   =================================================================== */

:root{
  /* --- brand: electric volt on deep graphite -------------------- */
  --volt:         #C6F035;
  --volt-deep:    #9FCC17;
  --volt-ink:     #121708;            /* text on volt */
  --volt-soft:    #F3FBDA;
  --volt-line:    #E2F3B2;

  --brand:        var(--volt);
  --brand-dark:   var(--volt-deep);
  --brand-soft:   var(--volt-soft);
  --brand-grad:   linear-gradient(135deg,#D7FA55 0%,#C6F035 55%,#AFDC23 100%);

  --ink:          #0E1217;            /* graphite */
  --ink-2:        #161C24;
  --navy:         #0E1217;
  --navy-2:       #161C24;
  --navy-grad:    linear-gradient(145deg,#12171E 0%,#0E1217 60%,#171E27 100%);

  --blue:         #2563EB;
  --blue-soft:    #E8EFFE;
  --blue-grad:    linear-gradient(90deg,#2563EB 0%,#5B8DF4 100%);

  --green:        #18A957;
  --green-soft:   #E3F6EC;
  --red:          #E5484D;
  --red-soft:     #FDECEC;
  --amber:        #F5A50B;
  --amber-soft:   #FEF3D8;

  --body:         #49535E;
  --muted:        #87929D;
  --line:         #E6E9ED;
  --wash:         #FFFFFF;
  --tint:         #F5F6F8;
  --white:        #FFFFFF;

  /* --- shape ------------------------------------------------------ */
  --r-xl: 24px;
  --r-lg: 18px;
  --r-md: 14px;
  --r-sm: 12px;
  --r-xs: 9px;
  --r-pill: 999px;

  /* --- elevation: crisp, visible, never muddy --------------------- */
  --sh-xs: 0 1px 2px rgba(14,18,23,.07);
  --sh-sm: 0 4px 16px rgba(14,18,23,.08);
  --sh-md: 0 14px 34px rgba(14,18,23,.12);
  --sh-lg: 0 30px 70px rgba(14,18,23,.18);
  --sh-brand: 0 10px 26px rgba(159,204,23,.45);

  /* --- type -------------------------------------------------------- */
  --f-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --f-body:    'Inter', 'Segoe UI', system-ui, sans-serif;

  /* --- motion ------------------------------------------------------ */
  --t:      190ms cubic-bezier(.4,0,.2,1);
  --t-slow: 480ms cubic-bezier(.22,.8,.3,1);

  --wrap: 1264px;
  --gut: 24px;
}

/* ===================================================================
   Reset
   =================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--f-body);
  font-size:15.5px;
  line-height:1.65;
  color:var(--body);
  background:var(--wash);
  -webkit-font-smoothing:antialiased;
}
img,svg,video{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
table{border-collapse:collapse;width:100%}
hr{border:0;border-top:1px solid var(--line);margin:24px 0}

:focus-visible{outline:3px solid rgba(159,204,23,.6);outline-offset:2px;border-radius:6px}
::selection{background:rgba(198,240,53,.5)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ===================================================================
   Typography — big, tight, confident
   =================================================================== */
h1,h2,h3,h4,h5{
  font-family:var(--f-display);
  color:var(--ink);
  margin:0 0 .5em;
  line-height:1.08;
  letter-spacing:-.02em;
  font-weight:700;
}
h1{font-size:clamp(2.4rem,5vw,3.9rem);letter-spacing:-.03em}
h2{font-size:clamp(1.65rem,3vw,2.5rem);letter-spacing:-.025em}
h3{font-size:1.32rem;line-height:1.2}
h4{font-size:1.05rem;line-height:1.3}
h5{font-size:.94rem;line-height:1.35}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
strong,b{font-weight:600;color:var(--ink)}
small{font-size:.83rem}

.lead{font-size:1.1rem;color:var(--body);line-height:1.7}
.muted{color:var(--muted)}
.ink{color:var(--ink)}
.brand-text{color:var(--volt-deep)}
.green-text{color:var(--green);font-weight:600}
.strike{text-decoration:line-through;color:var(--muted);font-weight:400}

/* Uppercase micro-label with a volt tick */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--f-display);
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink);
  margin-bottom:12px;
}
.eyebrow::before{
  content:"";width:26px;height:8px;border-radius:3px;
  background:var(--volt);
}
.eyebrow-center::before{display:none}
.on-dark .eyebrow{color:#fff}

/* ===================================================================
   Layout
   =================================================================== */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.wrap-narrow{max-width:880px}

.section{padding:84px 0}
.section-tight{padding:48px 0}
.section-white{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section-tint{background:var(--tint)}
@media (max-width:768px){
  .section{padding:54px 0}
  .section-tight{padding:32px 0}
}

.head-center{text-align:center;max-width:700px;margin:0 auto 42px}
.head-center h2{margin-bottom:10px}
.head-center p{color:var(--muted);margin:0}

.head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:28px}
.head-row h2,.head-row h3{margin-bottom:2px}
.head-row .sub{color:var(--muted);font-size:.9rem;margin:0}
.head-link{
  flex-shrink:0;display:inline-flex;align-items:center;gap:7px;
  padding:10px 18px;border-radius:var(--r-sm);
  background:var(--ink);color:#fff;
  font-family:var(--f-display);font-size:.82rem;font-weight:700;
  transition:var(--t);
}
.head-link:hover{background:#000;transform:translateY(-2px);box-shadow:var(--sh-sm)}

.grid{display:grid;gap:20px}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.g-6{grid-template-columns:repeat(6,minmax(0,1fr))}
@media (max-width:1080px){
  .g-6{grid-template-columns:repeat(4,minmax(0,1fr))}
  .g-5{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:768px){
  .grid{gap:14px}
  .g-6,.g-5,.g-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:460px){
  .g-3,.g-2{grid-template-columns:minmax(0,1fr)}
}

.row{display:flex;align-items:center;gap:12px}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:16px}
.row-wrap{flex-wrap:wrap}
.tc{text-align:center}
.tr{text-align:right}

.mb-0{margin-bottom:0}.mb-1{margin-bottom:4px}.mb-2{margin-bottom:8px}
.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}.mb-6{margin-bottom:24px}
.mb-8{margin-bottom:32px}.mb-10{margin-bottom:40px}
.mt-2{margin-top:8px}.mt-4{margin-top:16px}.mt-6{margin-top:24px}.mt-8{margin-top:32px}

.hide-md{display:initial}
@media (max-width:900px){.hide-md{display:none}}

.wrap-wide{max-width:1420px}
@media (max-width:1460px){ .wrap-wide{max-width:calc(100vw - 48px)} }