/*
Theme Name: Meridian TV
Theme URI: https://example.com/meridian
Author: School Project
Author URI: https://example.com
Description: A modern WordPress theme for a licensed live TV and on-demand streaming service. Includes Home, Pricing, Channels, Tutorial, FAQ, Blog and Contact pages, a custom header and footer, and a one-click setup that builds every page and menu on activation. Meridian TV is a fictional demo brand created for a school assignment.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: meridian
Tags: streaming, entertainment, one-column, custom-menu, custom-logo, featured-images, blog
*/

/* ============================================================
   MERIDIAN TV — design tokens
   Direction: the "on air" studio. Deep plum surfaces, one
   broadcast red accent (the tally light), monospaced clock
   type for anything time-related.
   ============================================================ */
:root{
  --ink:#1A0F20;
  --ink-2:#25142E;
  --panel:#33193D;
  --panel-2:#3F2049;
  --live:#FF4A2B;
  --live-2:#FF7A5C;
  --peach:#FFD7C7;
  --peach-soft:rgba(255,74,43,.12);
  --paper:#FAF6F4;
  --white:#FFFFFF;
  --muted:#B8A5C2;
  --ink-muted:#6B5A72;
  --line:rgba(255,255,255,.11);
  --line-l:rgba(26,15,32,.12);
  --r-sm:10px;
  --r:16px;
  --r-lg:24px;
  --shadow:0 26px 60px -30px rgba(20,8,26,.75);
  --shadow-live:0 18px 44px -18px rgba(255,74,43,.5);
  --maxw:1180px;
  --f-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-body:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"DM Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:#241729;
  font-family:var(--f-body);line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:800;line-height:1.06;letter-spacing:-.025em;margin:0}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
button{font-family:inherit}
:focus-visible{outline:3px solid var(--live);outline-offset:3px;border-radius:4px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.sec{padding:104px 0}
.sec-tight{padding:70px 0}

/* ---------- Eyebrow / tally label ---------- */
.tally{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--live);margin-bottom:20px;
}
.tally::before{
  content:"";width:8px;height:8px;border-radius:50%;background:var(--live);
  box-shadow:0 0 0 4px rgba(255,74,43,.2);animation:tally 2s ease-in-out infinite;
}
@keyframes tally{50%{opacity:.35}}
.tally.on-light{color:#C22E12}
.tally.on-light::before{background:#C22E12;box-shadow:0 0 0 4px rgba(194,46,18,.14)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--f-display);font-weight:700;font-size:.98rem;letter-spacing:-.01em;
  padding:15px 28px;border-radius:100px;border:1.5px solid transparent;cursor:pointer;
  transition:transform .18s ease,background .18s ease,border-color .18s ease,color .18s ease;
}
.btn svg{width:17px;height:17px}
.btn-live{background:var(--live);color:#fff;box-shadow:var(--shadow-live)}
.btn-live:hover{background:var(--live-2);transform:translateY(-2px)}
.btn-line{background:transparent;color:var(--paper);border-color:var(--line)}
.btn-line:hover{border-color:var(--live);color:var(--live-2)}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ink:hover{background:var(--ink-2);transform:translateY(-2px)}
.btn-light{background:var(--white);color:var(--ink);border-color:var(--line-l)}
.btn-light:hover{border-color:var(--ink);transform:translateY(-2px)}

/* ============================================================
   HEADER
   ============================================================ */
.hdr{position:fixed;inset:0 0 auto;z-index:80;padding:16px 0;transition:.28s ease}
.hdr.is-stuck{background:rgba(26,15,32,.9);backdrop-filter:blur(16px);
  padding:10px 0;box-shadow:0 12px 34px -22px rgba(0,0,0,.9)}
.hdr-in{display:flex;align-items:center;gap:22px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--f-display);
  font-weight:800;font-size:1.28rem;color:var(--paper);letter-spacing:-.04em;flex:none}
.logo-mark{width:32px;height:32px;border-radius:9px;flex:none;position:relative;
  background:var(--live);overflow:hidden}
.logo-mark::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:10px;height:10px;border-radius:50%;background:#fff}
.logo-mark::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:22px;height:22px;border-radius:50%;border:2px solid rgba(255,255,255,.55)}
.logo em{font-style:normal;color:var(--live)}
.logo-img{max-height:40px;width:auto;object-fit:contain}
.ftr .logo-img{max-height:44px}
.ftr-legal-list{display:flex;gap:20px;flex-wrap:wrap;margin:0;padding:0;list-style:none}
.ftr-legal-list a{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.05em;color:var(--muted)}
.ftr-legal-list a:hover{color:var(--live-2)}

.nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav a{color:var(--paper);font-size:.94rem;font-weight:500;padding:9px 14px;
  border-radius:100px;opacity:.82;transition:.16s}
.nav a:hover,.nav .current-menu-item>a{opacity:1;color:var(--live-2);background:rgba(255,255,255,.07)}
.hdr-act{display:flex;align-items:center;gap:12px;flex:none}
.burger{display:none;background:none;border:0;padding:7px;cursor:pointer}
.burger i{display:block;width:24px;height:2px;background:var(--paper);margin:5px 0;
  border-radius:2px;transition:.25s}
.nav-open .burger i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-open .burger i:nth-child(2){opacity:0}
.nav-open .burger i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ============================================================
   HERO — signature: the live schedule grid
   ============================================================ */
.hero{position:relative;padding:164px 0 84px;color:var(--paper);overflow:hidden;
  background:
    radial-gradient(90% 70% at 88% 4%,rgba(255,74,43,.24),transparent 55%),
    radial-gradient(70% 60% at 4% 20%,rgba(126,58,168,.24),transparent 60%),
    linear-gradient(175deg,#1A0F20 0%,#25142E 60%,#2E1738 100%);
}
.hero-in{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;position:relative}
.hero h1{font-size:clamp(2.5rem,5.2vw,4.05rem)}
.hero h1 em{font-style:normal;color:var(--live)}
.hero-sub{color:var(--muted);font-size:1.1rem;max-width:38ch;margin:22px 0 32px}
.hero-btns{display:flex;flex-wrap:wrap;gap:12px}
.hero-meta{display:flex;gap:30px;margin-top:38px;flex-wrap:wrap}
.hero-meta div{border-left:2px solid var(--live);padding-left:14px}
.hero-meta b{display:block;font-family:var(--f-display);font-size:1.45rem;color:var(--paper)}
.hero-meta span{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}

/* --- EPG (electronic programme guide) --- */
.epg{background:rgba(255,255,255,.045);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:18px;position:relative;box-shadow:var(--shadow);backdrop-filter:blur(6px)}
.epg-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:0 4px 14px;border-bottom:1px solid var(--line);margin-bottom:14px}
.epg-title{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.epg-onair{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-mono);
  font-size:.68rem;letter-spacing:.12em;color:#fff;background:var(--live);
  padding:4px 10px;border-radius:6px}
.epg-onair::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;
  animation:tally 1.4s infinite}
.epg-scale{display:grid;grid-template-columns:78px 1fr;gap:10px;margin-bottom:8px}
.epg-times{display:grid;grid-template-columns:repeat(4,1fr);font-family:var(--f-mono);
  font-size:.68rem;color:var(--muted);letter-spacing:.06em}
.epg-row{display:grid;grid-template-columns:78px 1fr;gap:10px;align-items:center;margin-bottom:7px}
.epg-ch{font-family:var(--f-mono);font-size:.7rem;color:var(--peach);letter-spacing:.04em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.epg-progs{display:flex;gap:5px}
.epg-prog{background:rgba(255,255,255,.07);border-radius:var(--r-sm);padding:11px 10px;
  font-size:.74rem;color:#EDE3F0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  border-left:2px solid rgba(255,255,255,.16);transition:.2s}
.epg-prog:hover{background:rgba(255,255,255,.13)}
.epg-prog.live{background:rgba(255,74,43,.2);border-left-color:var(--live);color:#fff}
.epg-now{position:absolute;top:78px;bottom:18px;width:2px;background:var(--live);
  left:calc(18px + 78px + 10px + 34%);pointer-events:none}
.epg-now::before{content:"";position:absolute;top:-5px;left:50%;transform:translateX(-50%);
  width:10px;height:10px;border-radius:50%;background:var(--live);
  box-shadow:0 0 0 4px rgba(255,74,43,.25)}

/* ---------- Marquee ---------- */
.marq{background:var(--ink-2);border-block:1px solid var(--line);overflow:hidden;padding:15px 0}
.marq-t{display:flex;width:max-content;animation:marq 34s linear infinite}
.marq:hover .marq-t{animation-play-state:paused}
.marq i{font-style:normal;display:inline-flex;align-items:center;gap:34px;padding-right:34px;
  font-family:var(--f-display);font-weight:700;font-size:1rem;letter-spacing:.02em;color:var(--muted)}
.marq i::after{content:"●";color:var(--live);font-size:.5rem}
@keyframes marq{to{transform:translateX(-50%)}}

/* ============================================================
   SECTION HEADS
   ============================================================ */
.head{max-width:640px;margin-bottom:54px}
.head.mid{margin-inline:auto;text-align:center}
.head h2{font-size:clamp(1.85rem,3.5vw,2.65rem)}
.head p{margin-top:16px;font-size:1.04rem;color:var(--ink-muted)}
.on-dark .head p{color:var(--muted)}

/* ============================================================
   DEVICES
   ============================================================ */
.s-light{background:var(--paper)}
.s-dark{background:var(--ink);color:var(--paper)}
.s-white{background:var(--white)}
.dev-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.dev{background:var(--white);border:1px solid var(--line-l);border-radius:var(--r);
  padding:24px 14px;text-align:center;transition:.2s}
.dev:hover{transform:translateY(-4px);border-color:var(--live);box-shadow:0 18px 36px -26px rgba(26,15,32,.6)}
.dev svg{width:26px;height:26px;color:#C22E12;margin:0 auto 12px}
.dev span{font-size:.86rem;font-weight:600;color:#3B2A42}

/* ============================================================
   CHANNEL / CONTENT RAIL
   ============================================================ */
.rail{display:grid;grid-template-columns:repeat(6,1fr);gap:13px}
.tile{aspect-ratio:2/3;border-radius:var(--r);position:relative;overflow:hidden;
  border:1px solid var(--line);display:flex;align-items:flex-end;padding:13px;transition:.25s;
  background:linear-gradient(165deg,#3B2049,#241331)}
.tile:nth-child(4n+1){background:linear-gradient(165deg,#4A1F3D,#2B1226)}
.tile:nth-child(4n+2){background:linear-gradient(165deg,#2E2154,#1A1233)}
.tile:nth-child(4n+3){background:linear-gradient(165deg,#4E2430,#2A121B)}
.tile:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 48%,rgba(14,6,18,.8))}
.tile b{position:relative;z-index:2;font-family:var(--f-display);font-size:.9rem}
.tile small{position:absolute;top:11px;left:11px;z-index:2;font-family:var(--f-mono);
  font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--live-2)}

/* ============================================================
   FEATURES
   ============================================================ */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.feat{background:var(--white);border:1px solid var(--line-l);border-radius:var(--r-lg);
  padding:34px 30px;transition:.22s;position:relative}
.feat:hover{transform:translateY(-5px);box-shadow:0 26px 52px -34px rgba(26,15,32,.6);border-color:transparent}
.feat-n{font-family:var(--f-mono);font-size:.7rem;color:var(--live);letter-spacing:.1em;margin-bottom:18px;display:block}
.feat-ic{width:48px;height:48px;border-radius:13px;background:var(--peach-soft);color:#C22E12;
  display:grid;place-items:center;margin-bottom:18px}
.feat-ic svg{width:23px;height:23px}
.feat h3{font-size:1.18rem;margin-bottom:9px}
.feat p{color:var(--ink-muted);font-size:.95rem}

/* ============================================================
   PRICING
   ============================================================ */
.s-price{background:var(--ink);color:var(--paper);position:relative;overflow:hidden}
.s-price::before{content:"";position:absolute;top:-25%;left:50%;transform:translateX(-50%);
  width:76%;height:56%;background:radial-gradient(circle,rgba(255,74,43,.16),transparent 70%)}
.tabs{display:flex;gap:6px;justify-content:center;margin-bottom:40px;position:relative;
  background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:100px;
  padding:5px;width:max-content;margin-inline:auto}
.tab{background:none;border:0;cursor:pointer;padding:11px 22px;border-radius:100px;
  font-family:var(--f-display);font-weight:700;font-size:.9rem;color:var(--muted);transition:.2s}
.tab.on{background:var(--live);color:#fff}
.tier-panel{display:none}
.tier-panel.on{display:block}
.tier-note{text-align:center;font-family:var(--f-mono);font-size:.74rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-bottom:26px}
.plan-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;position:relative}
.plan{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:30px 26px;display:flex;flex-direction:column;transition:.24s}
.plan:hover{transform:translateY(-6px)}
.plan.pick{background:linear-gradient(180deg,#4A2140,#331A3E);border-color:var(--live);
  box-shadow:var(--shadow-live)}
.plan-tag{align-self:flex-start;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.12em;
  text-transform:uppercase;color:#fff;background:var(--live);padding:5px 11px;
  border-radius:6px;margin-bottom:16px}
.plan-term{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-bottom:12px}
.plan-cost{display:flex;align-items:baseline;gap:5px;margin-bottom:6px}
.plan-cost b{font-family:var(--f-display);font-size:clamp(2rem,2.5vw,2.7rem);font-weight:800;
  color:var(--paper);line-height:1;letter-spacing:-.03em}
.plan-cost span{color:var(--muted);font-size:.88rem}
.plan-qual{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.08em;color:var(--live-2);margin-bottom:22px}
.plan-list{display:flex;flex-direction:column;gap:10px;margin-bottom:26px;flex:1}
.plan-list li{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;color:#E4D8E8}
.plan-list svg{width:16px;height:16px;color:var(--live);flex:none;margin-top:4px}
.plan .btn{width:100%}
.plan-note{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.06em;color:var(--muted);
  text-align:center;margin-top:12px}

/* ============================================================
   STATS
   ============================================================ */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.stat{background:var(--white);border:1px solid var(--line-l);border-radius:var(--r-lg);
  padding:32px 20px;text-align:center}
.stat b{display:block;font-family:var(--f-display);font-size:2.6rem;font-weight:800;
  color:var(--ink);line-height:1}
.stat span{display:block;margin-top:10px;font-family:var(--f-mono);font-size:.7rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted)}

/* ============================================================
   STEPS
   ============================================================ */
.s-steps{background:var(--ink-2);color:var(--paper)}
.step-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.step{position:relative;padding-top:18px;border-top:1px solid var(--line)}
.step-n{font-family:var(--f-mono);font-size:.74rem;color:var(--live);letter-spacing:.14em;
  display:block;margin-bottom:14px}
.step h3{font-size:1.08rem;margin-bottom:8px}
.step p{color:var(--muted);font-size:.91rem}

/* ============================================================
   SPLIT / VALUE
   ============================================================ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.card-big{border-radius:var(--r-lg);padding:44px;display:flex;flex-direction:column;justify-content:center}
.card-big.dark{background:var(--ink);color:var(--paper)}
.card-big.dark p{color:var(--muted)}
.card-big.live{background:linear-gradient(155deg,#FF6B47,#E63914);color:#fff}
.card-big .num{font-family:var(--f-display);font-size:3.2rem;font-weight:800;line-height:1;margin-bottom:10px}
.card-big h3{font-size:1.4rem;margin-bottom:12px}

/* ============================================================
   REVIEWS
   ============================================================ */
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.rev{background:var(--white);border:1px solid var(--line-l);border-radius:var(--r-lg);padding:30px}
.s-dark .rev{background:var(--panel);border-color:var(--line)}
.rev-stars{color:var(--live);letter-spacing:2px;font-size:.9rem;margin-bottom:14px}
.rev p{font-size:.96rem;color:#3B2A42;margin-bottom:22px}
.s-dark .rev p{color:#E4D8E8}
.rev-who{display:flex;align-items:center;gap:12px}
.rev-av{width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--live);color:#fff;font-family:var(--f-display);font-weight:800}
.rev-who b{display:block;font-size:.92rem}
.rev-who small{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.06em;color:var(--ink-muted)}
.s-dark .rev-who small{color:var(--muted)}

/* ============================================================
   CTA BAND
   ============================================================ */
.band{border-radius:var(--r-lg);padding:64px 44px;text-align:center;position:relative;overflow:hidden;
  background:linear-gradient(150deg,#25142E,#1A0F20);color:var(--paper)}
.band::before{content:"";position:absolute;top:-45%;left:50%;transform:translateX(-50%);
  width:68%;height:88%;background:radial-gradient(circle,rgba(255,74,43,.2),transparent 70%)}
.band h2{position:relative;font-size:clamp(1.75rem,3.3vw,2.5rem);margin-bottom:14px}
.band p{position:relative;color:var(--muted);max-width:52ch;margin:0 auto 28px}
.band .btn{position:relative}

/* ============================================================
   PAGE HERO
   ============================================================ */
.p-hero{padding:150px 0 68px;color:var(--paper);text-align:center;position:relative;overflow:hidden;
  background:radial-gradient(80% 70% at 50% 0,rgba(255,74,43,.2),transparent 62%),
             linear-gradient(180deg,#1A0F20,#25142E)}
.p-hero h1{position:relative;font-size:clamp(2.1rem,4.3vw,3.3rem);margin-bottom:14px}
.p-hero p{position:relative;color:var(--muted);max-width:56ch;margin:0 auto;font-size:1.05rem}
.crumb{position:relative;display:inline-flex;gap:9px;font-family:var(--f-mono);font-size:.7rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:20px}
.crumb a:hover{color:var(--live-2)}
.crumb i{font-style:normal;color:var(--live)}

/* ============================================================
   CHANNELS PAGE
   ============================================================ */
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cat{background:var(--white);border:1px solid var(--line-l);border-radius:var(--r-lg);
  padding:30px;transition:.22s}
.cat:hover{transform:translateY(-5px);box-shadow:0 26px 52px -34px rgba(26,15,32,.55)}
.cat-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.cat-top h3{font-size:1.15rem}
.cat-count{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.08em;color:#fff;
  background:var(--ink);padding:5px 10px;border-radius:6px}
.cat ul{display:flex;flex-wrap:wrap;gap:7px}
.cat li{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.04em;color:#4B3752;
  background:var(--paper);border:1px solid var(--line-l);padding:6px 11px;border-radius:100px}

/* ============================================================
   TUTORIAL PAGE
   ============================================================ */
.plat-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:46px}
.plat{display:inline-flex;align-items:center;gap:9px;background:var(--white);
  border:1px solid var(--line-l);border-radius:100px;padding:11px 20px;
  font-weight:600;font-size:.9rem;color:#3B2A42}
.plat svg{width:19px;height:19px;color:#C22E12}
.how-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.how{background:var(--white);border:1px solid var(--line-l);border-radius:var(--r-lg);
  padding:30px;display:flex;gap:18px}
.how-n{flex:none;width:42px;height:42px;border-radius:12px;background:var(--ink);color:var(--live);
  display:grid;place-items:center;font-family:var(--f-mono);font-weight:500;font-size:.95rem}
.how h3{font-size:1.1rem;margin-bottom:7px}
.how p{color:var(--ink-muted);font-size:.93rem}

/* ============================================================
   FAQ
   ============================================================ */
.faq{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.q-item{background:var(--white);border:1px solid var(--line-l);border-radius:var(--r);overflow:hidden;transition:.2s}
.q-item.open{border-color:var(--live)}
.q-btn{width:100%;text-align:left;background:none;border:0;cursor:pointer;padding:21px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-family:var(--f-display);font-weight:700;font-size:1.02rem;color:#241729}
.q-ic{flex:none;width:25px;height:25px;border-radius:50%;background:var(--peach-soft);color:#C22E12;
  display:grid;place-items:center;font-size:1.15rem;line-height:1;transition:.25s}
.q-item.open .q-ic{transform:rotate(45deg);background:var(--live);color:#fff}
.q-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.q-a p{padding:0 24px 22px;color:var(--ink-muted);font-size:.95rem}

/* ============================================================
   CONTACT
   ============================================================ */
.c-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:26px;align-items:start}
.c-info{background:var(--ink);color:var(--paper);border-radius:var(--r-lg);padding:38px}
.c-info h3{font-size:1.3rem;margin-bottom:10px}
.c-info>p{color:var(--muted);margin-bottom:26px;font-size:.95rem}
.c-line{display:flex;gap:14px;margin-bottom:20px}
.c-line .ic{flex:none;width:42px;height:42px;border-radius:12px;background:rgba(255,74,43,.16);
  color:var(--live-2);display:grid;place-items:center}
.c-line .ic svg{width:19px;height:19px}
.c-line b{display:block;font-size:.93rem}
.c-line span{font-family:var(--f-mono);font-size:.78rem;color:var(--muted)}
.c-form{background:var(--white);border:1px solid var(--line-l);border-radius:var(--r-lg);padding:36px}
.fld{margin-bottom:17px}
.fld label{display:block;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-muted);margin-bottom:8px}
.fld input,.fld textarea,.fld select{width:100%;padding:13px 15px;border-radius:12px;
  border:1px solid var(--line-l);background:var(--paper);font-family:inherit;font-size:.95rem;transition:.16s}
.fld input:focus,.fld textarea:focus,.fld select:focus{outline:none;border-color:var(--live);
  background:#fff;box-shadow:0 0 0 3px var(--peach-soft)}
.fld textarea{min-height:130px;resize:vertical}
.f-note{font-size:.8rem;color:var(--ink-muted);margin-top:10px}
.f-ok{background:var(--peach-soft);border:1px solid var(--live);color:#A82910;
  padding:14px 18px;border-radius:12px;margin-bottom:20px;font-weight:600;font-size:.93rem}

/* ============================================================
   BLOG
   ============================================================ */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.post{background:var(--white);border:1px solid var(--line-l);border-radius:var(--r-lg);
  overflow:hidden;transition:.22s;display:flex;flex-direction:column}
.post:hover{transform:translateY(-5px);box-shadow:0 26px 52px -34px rgba(26,15,32,.55)}
.post-thumb{aspect-ratio:16/9;background:linear-gradient(150deg,#3B2049,#241331);position:relative}
.post:nth-child(3n+2) .post-thumb{background:linear-gradient(150deg,#4A1F3D,#2B1226)}
.post:nth-child(3n+3) .post-thumb{background:linear-gradient(150deg,#2E2154,#1A1233)}
.post-thumb img{width:100%;height:100%;object-fit:cover}
.post-body{padding:26px;display:flex;flex-direction:column;flex:1}
.post-date{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--live);margin-bottom:11px}
.post h3{font-size:1.15rem;margin-bottom:10px;line-height:1.25}
.post p{color:var(--ink-muted);font-size:.93rem;flex:1}
.post-more{margin-top:18px;font-family:var(--f-display);font-weight:700;font-size:.9rem;color:var(--ink)}
.post-more:hover{color:var(--live)}

.article{max-width:760px;margin:0 auto}
.article p{margin-bottom:17px;color:#3B2A42}
.article h2{font-size:1.6rem;margin:34px 0 13px}
.article h3{font-size:1.22rem;margin:26px 0 10px}
.article ul{list-style:disc;padding-left:22px;margin-bottom:17px}
.article li{margin-bottom:8px;color:#3B2A42}
.article img{border-radius:var(--r);margin:22px 0}
.pagination{display:flex;justify-content:center;gap:8px;margin-top:44px}
.pagination .page-numbers{padding:10px 16px;border-radius:10px;background:var(--white);
  border:1px solid var(--line-l);font-weight:600;font-size:.9rem}
.pagination .current{background:var(--live);color:#fff;border-color:var(--live)}

/* ============================================================
   FOOTER
   ============================================================ */
.ftr{background:var(--ink);color:var(--paper);padding:72px 0 28px}
.ftr-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:38px;
  padding-bottom:42px;border-bottom:1px solid var(--line)}
.ftr-about p{color:var(--muted);font-size:.93rem;margin-top:16px;max-width:34ch}
.ftr-col h4{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--live);margin-bottom:18px;font-weight:500}
.ftr-col ul{display:flex;flex-direction:column;gap:11px}
.ftr-col a,.ftr-col li{color:var(--muted);font-size:.92rem;transition:.16s}
.ftr-col a:hover{color:var(--live-2)}
.ftr-btm{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding-top:26px;flex-wrap:wrap}
.ftr-btm small,.ftr-legal a{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.05em;color:var(--muted)}
.ftr-legal{display:flex;gap:20px;flex-wrap:wrap}
.ftr-legal a:hover{color:var(--live-2)}

/* ============================================================
   ELEMENTOR COMPATIBILITY
   ============================================================ */
/* Full-width canvas template */
.el-canvas{width:100%}
.el-canvas > .wrap{max-width:var(--maxw);margin-inline:auto}

/* When Elementor Pro supplies the header, the theme's fixed
   header is gone — so remove the space that allowed for it.
   The .el-header class is added by assets/js/main.js. */
.el-header .hero{padding-top:84px}
.el-header .p-hero{padding-top:70px}

/* Let Elementor sections breathe inside theme templates */
.elementor-section-wrap > .elementor-section{width:100%}

/* ============================================================
   REVEAL
   ============================================================ */
.rv{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .marq-t,.tally::before,.epg-onair::before{animation:none}
  html{scroll-behavior:auto}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1040px){
  .hero-in{grid-template-columns:1fr;gap:44px}
  .epg-now{display:none}
  .rail{grid-template-columns:repeat(4,1fr)}
  .dev-grid{grid-template-columns:repeat(3,1fr)}
  .plan-grid{grid-template-columns:repeat(2,1fr)}
  .feat-grid,.rev-grid,.cat-grid,.post-grid{grid-template-columns:repeat(2,1fr)}
  .stat-grid,.step-grid{grid-template-columns:repeat(2,1fr)}
  .ftr-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:840px){
  .sec{padding:72px 0}
  .burger{display:block;z-index:90}
  .nav{position:fixed;inset:0 0 0 auto;width:min(82vw,320px);flex-direction:column;
    align-items:flex-start;justify-content:center;gap:4px;padding:40px;margin:0;
    background:rgba(26,15,32,.98);backdrop-filter:blur(18px);transform:translateX(100%);
    transition:transform .3s ease}
  .nav-open .nav{transform:none}
  .nav a{width:100%;font-size:1.08rem;padding:14px 16px}
  .hdr-act .btn-line{display:none}
  .split,.c-grid,.how-grid{grid-template-columns:1fr}
  .band{padding:46px 26px}
}
@media (max-width:560px){
  .rail{grid-template-columns:repeat(3,1fr)}
  .dev-grid{grid-template-columns:repeat(2,1fr)}
  .plan-grid,.feat-grid,.rev-grid,.cat-grid,.post-grid,.stat-grid,.step-grid{grid-template-columns:1fr}
  .ftr-grid{grid-template-columns:1fr}
  .tabs{width:100%;justify-content:stretch}
  .tab{flex:1;padding:11px 8px;font-size:.82rem}
  .hero{padding-top:128px}
  .card-big{padding:32px 24px}
}