/*
Theme Name: Optimum Broadband
Theme URI: https://optimum.net.pk/
Author: Optimum Broadband
Description: Custom fiber ISP theme for Optimum Broadband with WhatsApp ordering, coverage checker, package finder and fault reporting. Edit prices, WhatsApp number and announcement in Appearance → Customize → Optimum Settings.
Version: 1.3.0
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary
Text Domain: optimum
*/

:root{
	--green:#0f7a3d; --green-dark:#0d6b33; --green-deep:#073d1e;
	--lime:#a3cd3a; --lime-soft:#eef7dc;
	--ink:#14211a; --muted:#5b6b62; --line:#e3ebe5; --bg:#ffffff; --bg-soft:#f5f9f6;
	--wa:#0f7a3d; --radius:16px; --shadow:0 10px 30px rgba(13,107,51,.12);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Poppins,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
section{padding:80px 0}
.soft{background:var(--bg-soft)}
.center{text-align:center}
.center .lead{margin-left:auto;margin-right:auto}
.eyebrow{display:inline-block;color:var(--green-dark);font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px}
.eyebrow.light{color:var(--lime)}
h2{font-size:clamp(26px,3.4vw,38px);line-height:1.2;font-weight:700;margin-bottom:12px}
.lead{color:var(--muted);max-width:640px}
.link{color:var(--green-dark);font-weight:600}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;border-radius:999px;font-weight:600;font-size:15px;border:2px solid transparent;cursor:pointer;transition:.2s;font-family:inherit;line-height:1.2;white-space:nowrap}
.btn svg{width:18px;height:18px;fill:currentColor;flex:none}
.btn-wa{background:var(--wa);color:#fff}.btn-wa:hover{background:#1ebe5a;transform:translateY(-1px)}
.btn-green{background:var(--green);color:#fff}.btn-green:hover{background:var(--green-dark)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}.btn-ghost:hover{background:rgba(255,255,255,.12)}
.btn-outline{background:#fff;color:var(--green);border-color:var(--green)}.btn-outline:hover{background:var(--green);color:#fff}
.btn-call{background:#fff;color:var(--green-dark);border-color:var(--green)}.btn-call:hover{background:var(--lime-soft)}
.btn-white{background:#fff;color:var(--green-dark)}.btn-white svg{fill:var(--wa)}.btn-white:hover{background:var(--lime-soft)}
.btn-sm{padding:8px 16px;font-size:14px}
.btn.full{width:100%}

/* Top bar */
.topbar{background:var(--green-deep);color:#e8f3d0;font-size:13.5px;text-align:center}
.topbar .wrap{padding-top:8px;padding-bottom:8px}
.topbar a:hover{color:#fff;text-decoration:underline}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.97);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.admin-bar .site-header{top:32px}
.nav{display:flex;align-items:center;justify-content:space-between;height:96px;gap:16px}
.logo{flex:none;display:flex;align-items:center}
.logo img{width:auto;height:auto;max-height:82px;max-width:230px}
.menu{display:flex;align-items:center;gap:2px;list-style:none}
.menu li{position:relative}
.menu a{display:block;padding:10px 12px;font-weight:500;font-size:15px;border-radius:10px;white-space:nowrap}
.menu a:hover,.menu .current-menu-item>a{color:var(--green);background:var(--bg-soft)}
.menu .sub-menu{position:absolute;top:100%;left:0;min-width:210px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:8px;display:none;list-style:none}
.menu li:hover>.sub-menu,.menu li:focus-within>.sub-menu{display:block}
.nav-cta{display:flex;align-items:center;gap:10px;flex:none}
.social{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--bg-soft);transition:.2s}
.social svg{width:18px;height:18px;fill:#1877f2}
.social:hover{background:var(--lime-soft)}
.burger{display:none;background:none;border:0;width:44px;height:44px;cursor:pointer}
.burger span{display:block;height:2px;background:var(--ink);margin:6px 10px;border-radius:2px}

/* Hero */
.hero{position:relative;background:radial-gradient(1200px 500px at 85% 20%,#1fae58 0%,transparent 60%),linear-gradient(135deg,var(--green-deep),var(--green-dark) 55%,var(--green));color:#fff;overflow:hidden;padding:0}
.hero::before,.page-hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px);background-size:22px 22px;pointer-events:none}
.slides{display:grid;position:relative;z-index:1}
.slide{grid-area:1/1;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:30px;min-height:480px;padding:50px 0;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .6s,transform .6s,visibility .6s}
.slide.active{opacity:1;visibility:visible;transform:none}
.slide h1{font-size:clamp(32px,5vw,56px);line-height:1.08;font-weight:800;margin-bottom:16px}
.slide h1 em,.page-hero h1 em{font-style:normal;color:var(--lime)}
.slide p{font-size:18px;opacity:.9;max-width:520px;margin-bottom:28px}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap}
.hero-art{position:relative;height:360px}
.ring{position:absolute;border-radius:50%;border:2px solid rgba(163,205,58,.45)}
.r1{width:340px;height:340px;right:10px;top:10px}.r2{width:240px;height:240px;right:60px;top:60px;border-color:rgba(255,255,255,.35)}.r3{width:140px;height:140px;right:110px;top:110px;background:rgba(163,205,58,.18)}
.big{position:absolute;right:120px;top:142px;font-weight:800;font-size:44px;line-height:1;text-align:center;width:120px}
.big small{display:block;font-size:13px;font-weight:600;letter-spacing:.1em;color:var(--lime)}
.fiber{position:absolute;height:3px;border-radius:3px;background:linear-gradient(90deg,transparent,var(--lime),#fff);animation:shoot 2.8s linear infinite;opacity:.8}
.f1{width:220px;top:70px;right:-40px}.f2{width:160px;top:250px;right:220px;animation-delay:1s}.f3{width:260px;top:320px;right:0;animation-delay:1.8s}
@keyframes shoot{0%{transform:translateX(120px);opacity:0}20%{opacity:.9}100%{transform:translateX(-260px);opacity:0}}
.dots{position:relative;z-index:1;display:flex;gap:10px;padding:0 0 34px}
.dots button{width:12px;height:12px;border-radius:999px;border:0;background:rgba(255,255,255,.4);cursor:pointer;transition:.3s}
.dots button.on{width:34px;background:var(--lime)}
/* Hero video */
.hero-video{position:absolute;inset:0;z-index:0;overflow:hidden;background:#3a9b3f}
.hero-video video{width:100%;height:100%;object-fit:cover;object-position:right bottom;display:block}
.hero-video::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,61,30,.88) 0%,rgba(7,61,30,.62) 38%,rgba(7,61,30,.12) 62%,rgba(7,61,30,0) 75%)}
.has-video::before{display:none}
.has-video>.wrap{position:relative;z-index:1}
.has-video .hero-art{display:none}
.has-video .slide p{text-shadow:0 1px 8px rgba(0,0,0,.25)}
.hero-strip{position:relative;background:rgba(0,0,0,.18);border-top:1px solid rgba(255,255,255,.12)}
.hero-strip .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:16px;padding-bottom:16px;font-size:14px}
.hero-strip b{color:var(--lime);margin-right:6px}

/* Inner page hero */
.page-hero{position:relative;background:linear-gradient(135deg,var(--green-deep),var(--green-dark) 60%,var(--green));color:#fff;padding:70px 0 64px;overflow:hidden}
.page-hero .wrap{position:relative}
.page-hero h1{font-size:clamp(30px,4.4vw,48px);line-height:1.12;font-weight:800;margin-bottom:12px;max-width:760px}
.page-hero p{font-size:18px;opacity:.9;max-width:640px}
.page-hero .hero-ctas{margin-top:26px}

/* Packages */
.pkgs{display:grid;grid-template-columns:repeat(var(--n,5),1fr);gap:18px;margin-top:44px}
.pkg{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 20px;text-align:center;transition:.25s;display:flex;flex-direction:column}
.pkg:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--lime)}
.pkg.pop{border:2px solid var(--green);box-shadow:var(--shadow)}
.tag{white-space:nowrap;position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--green);color:#fff;font-size:12px;font-weight:600;padding:4px 14px;border-radius:999px;letter-spacing:.05em}
.speed{font-size:44px;font-weight:800;line-height:1;color:var(--green-dark)}
.speed span{font-size:16px;font-weight:600;color:var(--muted)}
.price{margin:16px 0 4px;font-size:15px;color:var(--muted)}
.price b{font-size:28px;color:var(--ink)}
.price small{display:block;font-size:13px;margin-top:2px}
.feat{list-style:none;text-align:left;margin:18px 0 22px;font-size:14px;color:var(--muted);flex:1}
.feat li,.ticks li{padding:6px 0 6px 24px;position:relative}
.feat li::before,.ticks li::before{content:"";position:absolute;left:0;top:11px;width:14px;height:14px;border-radius:50%;background:var(--lime-soft);box-shadow:inset 0 0 0 4px var(--lime)}
.pkg .btn{width:100%;padding:11px 10px;font-size:14px}
.tax{margin-top:26px;background:var(--lime-soft);border-left:4px solid var(--lime);padding:14px 18px;border-radius:10px;font-size:14px;color:#3c4d22;text-align:left}

/* Cards / forms */
.card{background:#fff;border-radius:22px;box-shadow:var(--shadow);padding:32px;text-align:left}
label{display:block;font-size:13px;font-weight:600;margin:0 0 6px;color:var(--ink)}
label small{font-weight:400;color:var(--muted);font-size:13px}
select,input,textarea{width:100%;padding:13px 14px;border:1.5px solid var(--line);border-radius:12px;font-family:inherit;font-size:15px;background:#fff;color:var(--ink);margin-bottom:16px}
select:focus,input:focus,textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(21,148,71,.15)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.note{font-size:13px;color:var(--muted);margin-top:12px;text-align:center}

/* Coverage */
.cov{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.result{display:none;margin-top:16px;padding:18px;border-radius:14px;font-size:15px}
.result.ok{display:block;background:#e6f6ec;border:1px solid #b6e3c5}
.result.no{display:block;background:#fff6e5;border:1px solid #f3d9a4}
.result strong{display:block;font-size:17px;margin-bottom:4px}
.result .btn{margin-top:12px}
.phases{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.phases span{background:#fff;border:1px solid var(--line);padding:6px 14px;border-radius:999px;font-size:14px;font-weight:500}

/* Package finder */
.helper{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:center}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.chips button{padding:9px 16px;border-radius:999px;border:1.5px solid var(--line);background:#fff;font-family:inherit;font-size:14px;font-weight:500;cursor:pointer;color:var(--ink);transition:.15s}
.chips button:hover{border-color:var(--green)}
.chips button.on{background:var(--green);border-color:var(--green);color:#fff}
.reco{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:linear-gradient(135deg,var(--lime-soft),#e6f6ec);border-radius:16px;padding:18px 20px}
.reco small{display:block;color:var(--muted);font-size:13px}
.reco b{display:block;font-size:30px;line-height:1.1;color:var(--green-dark)}
.reco span{font-size:14px;color:var(--muted)}

/* Compare */
.table-wrap{overflow-x:auto;margin-top:40px;border:1px solid var(--line);border-radius:18px;background:#fff}
.cmp{width:100%;border-collapse:collapse;min-width:760px;font-size:15px}
.cmp th,.cmp td{padding:14px 12px;border-bottom:1px solid var(--line);text-align:center}
.cmp tr:last-child td{border-bottom:0}
.cmp th{background:var(--bg-soft);font-size:16px;font-weight:700;color:var(--green-dark)}
.cmp th.pop{background:var(--green);color:#fff}
.cmp td:first-child{text-align:left;font-weight:500;color:var(--muted)}
.cmp .yes{color:var(--green);font-weight:700;font-size:18px}
.cmp .no{color:#b9c4bd}

/* Products */
.prods{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px;text-align:left}
.prod{border-radius:22px;padding:32px;color:#fff;position:relative;overflow:hidden;min-height:260px;display:flex;flex-direction:column;justify-content:flex-end}
.prod.net{background:linear-gradient(135deg,var(--green-dark),var(--green))}
.prod.tv{background:linear-gradient(135deg,#1c2b22,#2f4a37)}
.prod.biz{background:linear-gradient(135deg,#123d27,#0d6b33)}
.prod .ico{position:absolute;top:26px;right:26px;width:60px;height:60px}
.prod h3{font-size:24px;margin-bottom:6px}
.prod p{opacity:.88;margin-bottom:18px}
.prod .btn{align-self:flex-start}

/* Steps */
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:40px 0 34px;counter-reset:s;text-align:left}
.steps li{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;position:relative}
.steps li span{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--green);color:#fff;font-weight:700;font-size:18px;margin-bottom:14px}
.steps h4{font-size:17px;margin-bottom:6px}
.steps p{font-size:14px;color:var(--muted)}

/* Why */
.why{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:40px;text-align:left}
.why div{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.why svg{width:42px;height:42px;margin-bottom:14px}
.why h4{font-size:17px;margin-bottom:6px}
.why p{font-size:14px;color:var(--muted)}

/* Tabs */
.tabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:34px 0 26px}
.tabs button{padding:11px 20px;border-radius:999px;border:1.5px solid var(--line);background:#fff;font-family:inherit;font-weight:600;font-size:15px;cursor:pointer;color:var(--ink)}
.tabs button.on{background:var(--green);border-color:var(--green);color:#fff}
.panel{display:none;max-width:720px;margin:0 auto;background:#fff;border-radius:22px;box-shadow:var(--shadow);padding:32px;text-align:left}
.panel.on{display:block}
#quote .panel{margin-top:34px}
.speedbox{text-align:center}
.speedbox p{color:var(--muted);margin:6px 0 20px}

/* FAQ */
.faq{max-width:820px;margin:40px auto 0;text-align:left}
details{background:#fff;border:1px solid var(--line);border-radius:14px;margin-bottom:12px;padding:0 22px}
summary{cursor:pointer;list-style:none;padding:18px 0;font-weight:600;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:22px;line-height:1;color:var(--green);transition:.2s}
details[open] summary::after{transform:rotate(45deg)}
details p{padding:0 0 18px;color:var(--muted);font-size:15px}

/* Feature grid (TV / About) */
.feature-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center}
.ticks{list-style:none;margin:20px 0 26px;color:var(--ink)}
.tv-art{display:flex;flex-direction:column;align-items:center}
.screen{width:100%;max-width:420px;aspect-ratio:16/10;border-radius:18px;background:linear-gradient(135deg,var(--green-deep),var(--green));border:10px solid #1c2b22;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;box-shadow:var(--shadow)}
.screen span{font-weight:700;letter-spacing:.3em;font-size:14px;color:var(--lime)}
.screen b{font-size:64px;line-height:1}
.stand{width:120px;height:14px;background:#1c2b22;border-radius:0 0 10px 10px}
.timeline{border-left:3px solid var(--lime);padding-left:26px;display:grid;gap:22px}
.timeline div{position:relative}
.timeline div::before{content:"";position:absolute;left:-35px;top:6px;width:15px;height:15px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px var(--lime-soft)}
.timeline b{font-size:18px;color:var(--green-dark)}
.timeline p{color:var(--muted);font-size:15px}

/* Contact */
.contact-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}
.ccard{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px;transition:.2s;display:block}
a.ccard:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--lime)}
.ccard svg{width:34px;height:34px;fill:var(--green);margin-bottom:12px}
.ccard.wa svg{fill:var(--wa)}
.ccard h4{font-size:17px}
.ccard p{color:var(--muted);font-size:15px;word-break:break-word}
.ccard span{display:block;margin-top:10px;font-weight:600;color:var(--green);font-size:14px}

/* Map */
.map{margin-top:34px;border-radius:20px;overflow:hidden;box-shadow:var(--shadow);aspect-ratio:16/7;background:var(--bg-soft)}
.map iframe{width:100%;height:100%;border:0;display:block}

/* CTA band */
.cta-sec{padding:70px 0}
.band{background:linear-gradient(135deg,var(--green-dark),var(--green));color:#fff;border-radius:26px;padding:44px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.band h2{margin:0}
.band p{opacity:.9}

/* Editor content */
.page-content{padding:60px 0}
.entry{max-width:860px}
.entry>*+*{margin-top:1em}
.entry h2,.entry h3{margin-top:1.4em}
.entry ul,.entry ol{padding-left:1.4em}
.entry a{color:var(--green);text-decoration:underline}
.entry table{width:100%;border-collapse:collapse}
.entry td,.entry th{border:1px solid var(--line);padding:10px}
.post-item{padding:20px 0;border-bottom:1px solid var(--line)}

/* Footer */
.site-footer{background:#0b1f13;color:#c9d6ce;padding:60px 0 0;font-size:15px}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:30px}
.flogo{background:#fff;display:inline-block;padding:10px 14px;border-radius:12px;margin-bottom:14px}
.flogo img{height:64px;width:auto}
.fsocial{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.08);margin-top:14px}
.fsocial svg{width:18px;height:18px;fill:#fff}
.site-footer h5{color:#fff;font-size:16px;margin-bottom:14px}
.site-footer ul{list-style:none}
.site-footer li{margin-bottom:2px}
.site-footer li a{display:inline-flex;align-items:center;min-height:44px}
.site-footer a:hover{color:var(--lime)}
.contact li{display:flex;gap:10px;align-items:flex-start}
.contact svg{width:18px;height:18px;flex:none;margin-top:3px;fill:var(--lime)}
.fbot{border-top:1px solid rgba(255,255,255,.1);margin-top:40px;padding:20px 0;font-size:13px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

/* Floating WhatsApp */
.fab{position:fixed;right:20px;bottom:20px;z-index:60;width:60px;height:60px;border-radius:50%;background:var(--wa);display:grid;place-items:center;box-shadow:0 8px 24px rgba(37,211,102,.45);animation:pulse 2.5s infinite}
.fab svg{width:32px;height:32px;fill:#fff}
.fab-call{display:none;position:fixed;right:26px;bottom:92px;z-index:60;width:48px;height:48px;border-radius:50%;background:var(--green);place-items:center;box-shadow:0 6px 18px rgba(13,107,51,.35)}
.fab-call svg{width:22px;height:22px;fill:#fff}
.fab-tip{position:fixed;right:90px;bottom:34px;z-index:60;background:#fff;color:var(--ink);font-size:14px;font-weight:500;padding:8px 14px;border-radius:999px;box-shadow:var(--shadow);pointer-events:none}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}50%{box-shadow:0 0 0 14px rgba(37,211,102,0)}}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* Responsive */
@media (max-width:1100px){
	.pkgs{grid-template-columns:repeat(3,1fr)}
	.why,.steps,.contact-cards{grid-template-columns:repeat(2,1fr)}
	.fgrid{grid-template-columns:1fr 1fr}
	.prods{grid-template-columns:1fr 1fr}
	.menu a{padding:10px 8px;font-size:14px}
	.logo img{max-width:190px;max-height:70px}
	.nav-cta .social{display:none}
}
@media (max-width:1024px){
	.menu{position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;padding:12px 16px 20px;border-bottom:1px solid var(--line);box-shadow:var(--shadow);display:none;max-height:calc(100vh - 110px);overflow:auto}
	.menu.open{display:flex}
	.menu .sub-menu{position:static;display:none;box-shadow:none;border:0;padding:0 0 4px 14px;min-width:0}
	.menu li.open>.sub-menu{display:block}
	.menu li:hover>.sub-menu{display:none}.menu li.open:hover>.sub-menu{display:block}
	.menu .menu-item-has-children>a{display:flex;justify-content:space-between}
	.burger{display:block}
	.nav-cta .btn-wa.top{display:none}
	.nav{height:78px}.logo img{max-height:60px;max-width:190px}
	.slide{grid-template-columns:1fr;padding:50px 0 10px;min-height:0}
	.hero-art{display:none}
	.hero-video{position:relative;aspect-ratio:2/1}
	.hero-video::after{display:none}
	.hero-video video{object-position:center}
	.cov,.helper,.feature-grid{grid-template-columns:1fr}
	.pkgs{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78%;overflow-x:auto;scroll-snap-type:x mandatory;padding:16px 4px 10px;margin-left:-4px;margin-right:-4px}
	.pkg{scroll-snap-align:center}
	section{padding:60px 0}
	.fab-tip{display:none}
	.map{aspect-ratio:4/3}
}
@media (max-width:600px){
	.fgrid,.grid2,.prods,.contact-cards,.steps.three{grid-template-columns:1fr}
	.why,.steps{grid-template-columns:1fr 1fr;gap:12px}
	.why>div,.steps li{padding:18px 14px}
	.why h4,.steps h4{font-size:15px}
	.why p,.steps p{font-size:13.5px}
	.why svg{width:34px;height:34px;margin-bottom:10px}
	.steps li span{width:36px;height:36px;font-size:16px;margin-bottom:10px}
	.band{padding:30px}
	.panel,.card{padding:22px}
	.hero-strip .wrap{justify-content:flex-start}
	.page-hero{padding:50px 0 46px}
}

/* Optimum TV page */
.why.five{grid-template-columns:repeat(5,1fr)}
.cats{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:36px}
.cats div{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px 12px;font-weight:600;transition:.2s}
.cats div:hover{border-color:var(--lime);transform:translateY(-3px);box-shadow:var(--shadow)}
.cats span{display:grid;place-items:center;width:56px;height:56px;margin:0 auto 12px;border-radius:50%;background:var(--lime-soft);color:var(--green)}
.cats svg{width:28px;height:28px}
.tv-entry{margin:36px auto 0;text-align:left;background:#fff;border-radius:18px;padding:28px;border:1px solid var(--line)}
.tvpk{display:grid;grid-template-columns:repeat(2,minmax(0,380px));justify-content:center;gap:24px;margin-top:40px}
.tvpk .pkg{padding:34px 28px}
.tvpk h3{font-size:24px;color:var(--green-dark);margin-bottom:8px}
.tvpk p{color:var(--muted);font-size:15px;flex:1}
.tvpk .ask{margin:18px 0 20px;font-weight:700;font-size:18px}
.steps.three{grid-template-columns:repeat(3,1fr)}
@media (max-width:1100px){.why.five{grid-template-columns:repeat(3,1fr)}.cats{grid-template-columns:repeat(3,1fr)}}
@media (max-width:600px){.why.five,.steps.three,.tvpk{grid-template-columns:1fr}.cats{grid-template-columns:repeat(2,1fr)}}

/* Call button */
.ccard.call svg{fill:var(--green)}
@media (max-width:1280px){.btn-call.top{padding:10px;width:44px;height:44px}.btn-call.top span{display:none}}
@media (max-width:1024px){.nav-cta .btn-call.top{display:none}.fab-call{display:grid}}

/* Download time calculator */
.calc{max-width:860px;margin:36px auto 0;text-align:left}
.calc-files{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.calc-files button{padding:9px 16px;border-radius:999px;border:1.5px solid var(--line);background:#fff;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;color:var(--ink)}
.calc-files button small{font-size:12.5px;font-weight:400;color:var(--muted);margin-left:4px}
.calc-files button.on{background:var(--green);border-color:var(--green);color:#fff}
.calc-files button.on small{color:#dff3e6}
.calc-custom{display:inline-flex;align-items:center;gap:6px;margin:0;font-size:14px;font-weight:600;border:1.5px solid var(--line);border-radius:999px;padding:3px 6px 3px 14px}
.calc-custom.on{border-color:var(--green)}
.calc-custom input,.calc-custom select{margin:0;padding:6px 8px;width:auto;border-radius:999px;font-size:14px}
.calc-custom input{width:80px}
.calc-bars{display:grid;gap:12px}
.calc-row{display:grid;grid-template-columns:92px 1fr 110px;align-items:center;gap:12px;font-size:15px}
.calc-row b{color:var(--green-dark);white-space:nowrap}
.calc-track{height:14px;background:var(--bg-soft);border-radius:999px;overflow:hidden}
.calc-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--lime),var(--green));transition:width .45s ease}
.calc-row.pop b::after{content:" ★";color:var(--lime)}
.calc-time{text-align:right;font-weight:600;white-space:nowrap}
.calc-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:22px;border-top:1px solid var(--line);padding-top:18px}
.calc-foot small{color:var(--muted);max-width:440px}
@media (max-width:600px){.calc-row{grid-template-columns:70px 1fr 88px;gap:8px;font-size:14px}.calc-foot .btn{width:100%}}

/* Offer banner */
.offer-sec{padding:44px 0 0}
.ob{position:relative;overflow:hidden;border-radius:24px;background:linear-gradient(120deg,#0d6b33,#159447 55%,#6fb83b);color:#fff;padding:30px 34px;display:grid;grid-template-columns:auto 1fr auto;gap:26px;align-items:center;box-shadow:var(--shadow)}
.ob::before{content:"";position:absolute;right:-80px;top:-80px;width:260px;height:260px;border-radius:50%;background:rgba(163,205,58,.25);pointer-events:none}
.gift{width:70px;height:70px;border-radius:20px;background:rgba(255,255,255,.15);display:grid;place-items:center}
.ob-tag{display:inline-block;background:var(--lime);color:var(--green-deep);font-size:12px;font-weight:700;letter-spacing:.08em;padding:3px 10px;border-radius:999px;margin-bottom:6px}
.ob h3{font-size:26px;line-height:1.2;margin-bottom:4px}.ob p{opacity:.92}
.cd{display:flex;gap:8px;margin-top:14px}.cd div{background:rgba(0,0,0,.2);border-radius:10px;padding:6px 10px;text-align:center;min-width:56px}
.cd b{display:block;font-size:22px;line-height:1.1}.cd small{font-size:12.5px;opacity:.9}
.ob-btns{display:flex;flex-direction:column;gap:10px;position:relative;z-index:1}
.offer-bar{background:linear-gradient(90deg,var(--green-deep),#0d6b33)}.offer-bar a{color:#fff;font-weight:500}
.free{display:inline-block;background:var(--lime);color:var(--green-deep);font-size:12px;font-weight:700;padding:2px 8px;border-radius:999px;margin-right:6px;vertical-align:middle}
.offer-note{margin-top:-10px;margin-bottom:16px;font-size:13px;color:var(--green)!important;font-weight:600}
@media (max-width:920px){.ob{grid-template-columns:1fr;padding:26px 22px}.gift{display:none}.ob-btns .btn{width:100%}}

/* Animations (only when JS adds .js-fx to <html>) */
.btn.shine{position:relative;overflow:hidden}
.btn.shine::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:opt-shine 3.6s ease-in-out infinite;pointer-events:none}
@keyframes opt-shine{0%,70%{left:-60%}100%{left:130%}}
.js-fx .fx{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.js-fx .fx.in{opacity:1;transform:none}
.fx-on .pkg:hover,.fx-on .why>div:hover,.fx-on .steps li:hover,.fx-on .ccard:hover,.fx-on .cats>div:hover{transform:translateY(-8px);box-shadow:0 18px 40px rgba(21,148,71,.22);border-color:var(--lime)}
.fx-on .why>div,.fx-on .steps li{transition:transform .25s,box-shadow .25s,border-color .25s}
.site-header .nav,.site-header .logo img{transition:height .3s,max-height .3s}
.site-header.shrink{box-shadow:0 6px 20px rgba(0,0,0,.08)}
.site-header.shrink .nav{height:68px}.site-header.shrink .logo img{max-height:54px}
@media (hover:none){.fx-on .pkg:hover,.fx-on .why>div:hover,.fx-on .steps li:hover{transform:none}}
@media (prefers-reduced-motion:reduce){.js-fx .fx{opacity:1;transform:none}.btn.shine::after{display:none}}

.speed .cnt,.big .cnt{font-size:inherit;color:inherit;font-weight:inherit}

/* Dropdown menu */
.menu .menu-item-has-children>a::after{content:"";display:inline-block;width:7px;height:7px;margin-left:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-3px) rotate(45deg);opacity:.6;transition:transform .2s}
.menu .menu-item-has-children:hover>a::after,.menu li.open>a::after{transform:translateY(0) rotate(225deg)}
.menu .sub-menu{z-index:60}
.menu .sub-menu::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.menu .sub-menu a{padding:10px 12px;font-size:14.5px;border-radius:8px;display:flex;align-items:center;gap:8px}
.menu .sub-menu a:hover{background:var(--lime-soft);color:var(--green-dark)}
.menu-tag{display:inline-block;background:var(--lime);color:var(--green-deep);font-size:12px;font-weight:700;letter-spacing:.04em;padding:1px 8px;border-radius:999px;line-height:1.5}
.menu .menu-item-type-custom.current-menu-item:not(:hover)>a{color:inherit;background:none}

/* v1.2 UX fixes */
.btn-wa:hover{background:var(--green-dark)}
.fab{background:var(--wa);box-shadow:0 8px 24px rgba(15,122,61,.45)}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(15,122,61,.45)}50%{box-shadow:0 0 0 14px rgba(15,122,61,0)}}
.btn-outline{color:var(--green-dark);border-color:var(--green)}
.hero-main{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:30px;min-height:480px;padding:50px 0 60px}
.hero-main h1{font-size:clamp(32px,5vw,56px);line-height:1.08;font-weight:800;margin-bottom:16px}
.hero-main h1 em{font-style:normal;color:var(--lime)}
.hero-main p{font-size:18px;opacity:.95;max-width:520px;margin-bottom:28px}
.hero-main p b{color:var(--lime)}
.swipe-hint{display:none;margin-top:6px;font-size:13.5px;font-weight:600;color:var(--green-dark)}
:focus-visible{outline:3px solid var(--lime);outline-offset:2px}
@media (max-width:1024px){.hero-main{grid-template-columns:1fr;min-height:0;padding:40px 0 44px}.swipe-hint{display:block}}
.fsocial{width:44px;height:44px}
.fbot a{display:inline-flex;align-items:center;min-height:44px}
.cmp .no{color:#6b7a71}
.contact li{align-items:center}.contact li svg{margin-top:0}

/* GSAP scroll effects */
.gsap-pre .hero-main h1,.gsap-pre .hero-main p,.gsap-pre .hero-main .hero-ctas{visibility:hidden}
.hero-main h1{perspective:600px}
.hero-video video{transform-origin:center bottom}