/* ============================================================
   global.css — Tashan IPTV
   Include this on EVERY page: <link rel="stylesheet" href="/global.css">
   ============================================================ */

/* Google Font — load once here, applied everywhere */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&display=swap');

/* ── CSS Variables ──────────────────────────────────────────
   Change a color here → updates the WHOLE website            */
:root {
  /* Brand */
  --red:        #E8001D;
  --red-dark:   #C00019;
  --red-glow:   rgba(232, 0, 29, .12);

  /* Neutrals */
  --white:      #FFFFFF;
  --g50:        #F9FAFB;
  --g100:       #F2F4F7;
  --g200:       #E4E7EC;
  --g300:       #CDD5DF;
  --g400:       #98A2B3;
  --g500:       #667085;
  --g600:       #475467;
  --g700:       #344054;
  --g800:       #1D2939;
  --g900:       #101828;

  /* Typography */
  --font:       'Outfit', sans-serif;
  --fz-xs:      12px;
  --fz-sm:      13.5px;
  --fz-base:    15px;
  --fz-md:      17px;
  --fz-lg:      20px;
  --fz-xl:      24px;
  --fz-2xl:     30px;
  --fz-3xl:     38px;
  --fz-4xl:     48px;
  --fz-5xl:     60px;

  /* Spacing */
  --nav-h:      70px;
  --r:          10px;
  --r-lg:       16px;
  --r-xl:       24px;

  /* Shadows */
  --sh-sm:      0 1px 4px rgba(0,0,0,.07);
  --sh-md:      0 4px 20px rgba(0,0,0,.10);
  --sh-lg:      0 12px 40px rgba(0,0,0,.13);
  --sh-red:     0 6px 20px rgba(232,0,29,.30);
}

/* ── Reset ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  font-size: var(--fz-base);
  color: var(--g900);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-top: var(--nav-h); /* offset for fixed header */
  line-height: 1.6;
}
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
button { font-family: var(--font); cursor: pointer; }

/* ── Typography — used on ALL pages ─────────────────────────
   Just use <h1>, <h2> etc in your HTML and they look great   */
h1 {
  font-size: clamp(var(--fz-3xl), 5vw, var(--fz-5xl));
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -.04em;
  color: var(--g900);
}
h2 {
  font-size: clamp(var(--fz-2xl), 4vw, var(--fz-4xl));
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.03em;
  color: var(--g900);
}
h3 {
  font-size: clamp(var(--fz-xl), 2.5vw, var(--fz-2xl));
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--g900);
}
h4 { font-size: var(--fz-lg); font-weight: 700; color: var(--g900); }
h5 { font-size: var(--fz-md); font-weight: 600; color: var(--g800); }
h6 { font-size: var(--fz-base); font-weight: 600; color: var(--g700); }
p  { font-size: var(--fz-base); line-height: 1.7; color: var(--g600); }

/* Italic / em used for red highlights inside headings */
h1 em, h2 em, h3 em { font-style: normal; color: var(--red); }

strong { font-weight: 700; }

/* ── Layout utility ──────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 28px;
}
@media (max-width: 600px) { .container { padding: 0 18px; } }

.section { padding: 80px 0; }
.section-sm { padding: 48px 0; }
@media (max-width: 768px) { .section { padding: 56px 0; } }

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font); font-weight: 700; font-size: 14.5px;
  border-radius: var(--r); border: none;
  cursor: pointer; white-space: nowrap;
  transition: background .17s, transform .13s, box-shadow .17s;
}
.btn-red {
  background: var(--red); color: #fff; padding: 12px 26px;
}
.btn-red:hover {
  background: var(--red-dark);
  transform: translateY(-1px);
  box-shadow: var(--sh-red);
}
.btn-red:active { transform: none; }

.btn-outline {
  background: transparent; color: var(--red);
  border: 2px solid var(--red); padding: 10px 24px;
}
.btn-outline:hover {
  background: var(--red-glow);
  transform: translateY(-1px);
}

/* ── Section heading helper ──────────────────────────────── */
.sec-label {
  display: inline-block;
  font-size: 11px; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--red);
  background: var(--red-glow); padding: 5px 12px;
  border-radius: 999px; margin-bottom: 12px;
}
.sec-sub {
  font-size: var(--fz-md); color: var(--g500); max-width: 600px;
  margin-top: 10px;
}

/* ── Badge ───────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fz-xs); font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; padding: 4px 10px;
  border-radius: 999px;
}
.badge-red  { background: var(--red); color: #fff; }
.badge-gray { background: var(--g100); color: var(--g600); }

/* ── Card ────────────────────────────────────────────────── */
.card {
  background: var(--white);
  border: 1px solid var(--g200);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  transition: box-shadow .2s, transform .2s;
}
.card:hover { box-shadow: var(--sh-md); transform: translateY(-2px); }