/* ===================================================================
   MrScreenOn — theme.css
   Tokens, reset, typography, layout. Everything else builds on this.
   =================================================================== */

:root{
  /* --- brand --------------------------------------------------- */
  --brand:        #6366F1;
  --brand-dark:   #4F46E5;
  --brand-light:  #818CF8;
  --brand-soft:   #EEF0FE;
  --brand-grad:   linear-gradient(135deg,#818CF8 0%,#6366F1 55%,#4F46E5 100%);
  --navy:         #0F172A;
  --navy-2:       #1E293B;
  --navy-grad:    linear-gradient(135deg,#0F172A 0%,#1E293B 60%,#293548 100%);
  --blue:         #3B82F6;
  --blue-soft:    #E7F0FE;
  --blue-grad:    linear-gradient(90deg,#3B82F6 0%,#60A5FA 100%);
  --green:        #22C55E;
  --green-soft:   #DCFCE7;
  --red:          #EF4444;
  --red-soft:     #FEE9E9;
  --amber:        #F59E0B;
  --amber-soft:   #FEF3DC;
  --ink:          #0F172A;
  --body:         #475569;
  --muted:        #94A3B8;
  --line:         #E2E8F0;
  --wash:         #F5F7FA;
  --tint:         #F8FAFC;
  --white:        #FFFFFF;

  /* --- shape --------------------------------------------------- */
  --r-xl: 24px;
  --r-lg: 20px;
  --r-md: 16px;
  --r-sm: 12px;
  --r-xs: 10px;
  --r-pill: 999px;

  /* --- elevation ----------------------------------------------- */
  --sh-xs: 0 1px 2px rgba(15,23,42,.05);
  --sh-sm: 0 2px 10px rgba(15,23,42,.05);
  --sh-md: 0 8px 26px rgba(15,23,42,.07);
  --sh-lg: 0 18px 48px rgba(15,23,42,.10);
  --sh-brand: 0 10px 26px rgba(99,102,241,.30);

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

  /* --- motion -------------------------------------------------- */
  --t:      180ms cubic-bezier(.4,0,.2,1);
  --t-slow: 420ms cubic-bezier(.4,0,.2,1);

  --wrap: 1240px;
  --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(99,102,241,.45);outline-offset:2px;border-radius:6px}

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

/* ===================================================================
   Typography
   =================================================================== */
h1,h2,h3,h4,h5{
  font-family:var(--f-display);
  color:var(--ink);
  margin:0 0 .5em;
  line-height:1.18;
  letter-spacing:-.02em;
  font-weight:700;
}
h1{font-size:clamp(2.2rem,4.6vw,3.5rem);font-weight:800;letter-spacing:-.035em}
h2{font-size:clamp(1.45rem,2.4vw,1.95rem)}
h3{font-size:1.25rem}
h4{font-size:1.05rem}
h5{font-size:.95rem}
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.08rem;color:var(--body);line-height:1.7}
.muted{color:var(--muted)}
.ink{color:var(--ink)}
.brand-text{color:var(--brand)}
.green-text{color:var(--green)}
.strike{text-decoration:line-through;color:var(--muted);font-weight:400}

.eyebrow{
  display:inline-block;
  font-family:var(--f-display);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--brand);
  margin-bottom:10px;
}

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

.section{padding:64px 0}
.section-tight{padding:40px 0}
@media (max-width:768px){
  .section{padding:44px 0}
  .section-tight{padding:28px 0}
}

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

.head-row{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:22px}
.head-row h2,.head-row h3{margin-bottom:2px}
.head-row .sub{color:var(--muted);font-size:.88rem;margin:0}
.head-link{
  flex-shrink:0;font-size:.85rem;font-weight:600;color:var(--brand);
  display:inline-flex;align-items:center;gap:5px;transition:var(--t);
}
.head-link:hover{gap:9px}

.grid{display:grid;gap:20px}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.g-5{grid-template-columns:repeat(5,1fr)}
.g-6{grid-template-columns:repeat(6,1fr)}
@media (max-width:1080px){
  .g-6{grid-template-columns:repeat(4,1fr)}
  .g-5{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:768px){
  .grid{gap:14px}
  .g-6,.g-5,.g-4{grid-template-columns:repeat(2,1fr)}
  .g-3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:460px){
  .g-3,.g-2{grid-template-columns: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}}