/*
Theme Name: CatchOn TV
Theme URI: https://catchonetv.com
Author: CatchOn TV
Author URI: https://catchonetv.com
Description: Premium IPTV streaming service theme for CatchOn TV. Modern design with complete SEO, Schema markup, and all page templates.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: catchon
Tags: iptv, streaming, entertainment, custom-menu, featured-images
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
*/

/* ============================================================
   DESIGN SYSTEM — Cool Teal / Modern Minimal
   ============================================================ */
:root {
  --primary: #0EA5E9;
  --primary-hover: #0284C7;
  --primary-light: #E0F2FE;
  --primary-glow: rgba(14,165,233,0.10);
  --accent: #10B981;
  --accent-light: #D1FAE5;

  --white: #FFFFFF;
  --snow: #F8FAFC;
  --cloud: #F1F5F9;
  --fog: #E2E8F0;
  --steel: #94A3B8;
  --graphite: #64748B;
  --carbon: #334155;
  --midnight: #0F172A;

  --surface: var(--white);
  --surface-alt: var(--snow);

  --font-display: 'Sora', 'Poppins', sans-serif;
  --font-body: 'Nunito Sans', 'Segoe UI', sans-serif;

  --section-pad: 110px;
  --container: 1180px;

  --shadow-xs: 0 1px 2px rgba(15,23,42,0.04);
  --shadow-sm: 0 4px 12px rgba(15,23,42,0.06);
  --shadow-md: 0 8px 30px rgba(15,23,42,0.08);
  --shadow-lg: 0 20px 50px rgba(15,23,42,0.10);
  --shadow-primary: 0 8px 30px rgba(14,165,233,0.25);
  --radius: 14px;
  --radius-sm: 10px;
  --radius-xl: 22px;
  --radius-full: 100px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:16px; scroll-behavior:smooth; }
body { font-family:var(--font-body); color:var(--carbon); background:var(--white); line-height:1.7; overflow-x:hidden; -webkit-font-smoothing:antialiased; }
img { max-width:100%; height:auto; display:block; }
a { color:var(--primary); text-decoration:none; transition:color 0.3s var(--ease); }
a:hover { color:var(--primary-hover); }
h1,h2,h3,h4,h5,h6 { font-family:var(--font-display); color:var(--midnight); line-height:1.15; font-weight:700; letter-spacing:-0.02em; }
::selection { background:var(--primary); color:var(--white); }
.container { max-width:var(--container); margin:0 auto; padding:0 24px; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header { position:fixed; top:0; left:0; width:100%; z-index:1000; padding:14px 0; transition:all 0.4s var(--ease); }
.site-header.scrolled { padding:8px 0; background:rgba(255,255,255,0.92); backdrop-filter:blur(20px); border-bottom:1px solid rgba(15,23,42,0.05); }
.header-inner { display:flex; align-items:center; justify-content:space-between; background:var(--white); border:1px solid var(--fog); border-radius:var(--radius-full); padding:6px 6px 6px 22px; box-shadow:var(--shadow-sm); transition:all 0.4s var(--ease); }
.site-header.scrolled .header-inner { background:transparent; border-color:transparent; box-shadow:none; border-radius:0; }
.site-logo img { height:40px; width:auto; }
.main-nav ul { display:flex; list-style:none; gap:4px; align-items:center; }
.main-nav a { color:var(--carbon); font-weight:500; font-size:0.9rem; padding:8px 14px; border-radius:var(--radius-full); transition:all 0.3s var(--ease); }
.main-nav a:hover, .main-nav .current-menu-item a { color:var(--midnight); background:var(--cloud); }
.nav-cta { background:var(--primary) !important; color:var(--white) !important; padding:10px 24px !important; font-weight:600 !important; }
.nav-cta:hover { background:var(--primary-hover) !important; transform:translateY(-1px); box-shadow:var(--shadow-primary); }
.mobile-toggle { display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; padding:8px; z-index:1001; }
.mobile-toggle span { width:22px; height:2px; background:var(--midnight); border-radius:2px; transition:all 0.3s var(--ease); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 32px; border-radius:var(--radius-full); font-weight:600; font-size:0.95rem; font-family:var(--font-body); cursor:pointer; border:none; transition:all 0.35s var(--ease); position:relative; overflow:hidden; }
.btn-primary { background:var(--primary); color:var(--white); }
.btn-primary:hover { background:var(--primary-hover); color:var(--white); transform:translateY(-2px); box-shadow:var(--shadow-primary); }
.btn-accent { background:var(--accent); color:var(--white); }
.btn-accent:hover { background:#059669; color:var(--white); transform:translateY(-2px); }
.btn-dark { background:var(--midnight); color:var(--white); }
.btn-dark:hover { background:var(--primary); color:var(--white); transform:translateY(-2px); box-shadow:var(--shadow-primary); }
.btn-outline { background:transparent; color:var(--midnight); border:1.5px solid var(--fog); }
.btn-outline:hover { border-color:var(--primary); color:var(--primary); transform:translateY(-2px); }
.btn-white { background:var(--white); color:var(--midnight); }
.btn-white:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); color:var(--midnight); }
.btn-sm { padding:10px 20px; font-size:0.88rem; }
.btn-whatsapp { background:#25D366; color:var(--white); }
.btn-whatsapp:hover { background:#1DA851; color:var(--white); transform:translateY(-2px); box-shadow:0 8px 25px rgba(37,211,102,0.3); }
.btn-email { background:var(--primary); color:var(--white); }
.btn-email:hover { background:var(--primary-hover); color:var(--white); transform:translateY(-2px); }

/* ============================================================
   HERO
   ============================================================ */
.hero { min-height:100vh; display:flex; align-items:center; padding:130px 0 90px; position:relative; overflow:hidden; background:linear-gradient(160deg, var(--white) 0%, var(--snow) 50%, var(--primary-light) 100%); }
.hero::before { content:''; position:absolute; top:-20%; right:-15%; width:800px; height:800px; background:radial-gradient(circle, var(--primary-glow) 0%, transparent 55%); border-radius:50%; animation:drift 18s ease-in-out infinite; pointer-events:none; }
@keyframes drift { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-30px,20px) scale(1.08);} }
.hero-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; position:relative; z-index:2; }
.hero-content { max-width:540px; }
.hero-chip { display:inline-flex; align-items:center; gap:8px; background:var(--white); border:1px solid var(--fog); padding:6px 16px 6px 8px; border-radius:var(--radius-full); font-size:0.8rem; font-weight:600; color:var(--graphite); margin-bottom:24px; box-shadow:var(--shadow-xs); }
.hero-chip-dot { width:8px; height:8px; border-radius:50%; background:var(--accent); animation:pulse 2s ease infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:0.4;transform:scale(0.8);} }
.hero h1 { font-size:clamp(2.6rem,4.8vw,3.8rem); margin-bottom:20px; line-height:1.08; letter-spacing:-0.035em; }
.hero h1 .highlight { color:var(--primary); }
.hero p { font-size:1.1rem; color:var(--graphite); margin-bottom:32px; max-width:440px; }
.hero-buttons { display:flex; gap:12px; flex-wrap:wrap; }
.hero-visual { position:relative; display:flex; justify-content:center; }
.hero-card { background:var(--white); border:1px solid var(--fog); border-radius:var(--radius-xl); padding:36px; box-shadow:var(--shadow-lg); max-width:440px; width:100%; }
.hero-card-logo { height:50px; width:auto; margin-bottom:24px; }
.hero-stats-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.hero-stat { background:var(--snow); border-radius:var(--radius); padding:18px; text-align:center; }
.hero-stat-val { font-family:var(--font-display); font-size:1.8rem; font-weight:700; color:var(--midnight); line-height:1.1; }
.hero-stat-val.blue { color:var(--primary); }
.hero-stat-lbl { font-size:0.78rem; color:var(--steel); margin-top:4px; font-weight:500; }
.hero-float { position:absolute; top:-10px; right:-10px; background:var(--accent); color:var(--white); padding:8px 16px; border-radius:var(--radius-full); font-size:0.8rem; font-weight:700; box-shadow:0 6px 20px rgba(16,185,129,0.3); animation:bob 3s ease-in-out infinite; }
@keyframes bob { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-5px);} }

/* ============================================================
   SECTIONS
   ============================================================ */
.section { padding:var(--section-pad) 0; position:relative; }
.section-white { background:var(--white); }
.section-snow { background:var(--snow); }
.section-header { text-align:center; max-width:600px; margin:0 auto 60px; }
.section-chip { display:inline-flex; align-items:center; gap:6px; background:var(--primary-light); color:var(--primary-hover); padding:5px 14px; border-radius:var(--radius-full); font-size:0.78rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; margin-bottom:14px; }
.section-header h2 { font-size:clamp(1.9rem,3.2vw,2.6rem); margin-bottom:14px; letter-spacing:-0.03em; }
.section-header p { color:var(--graphite); font-size:1rem; }

/* ============================================================
   FEATURES
   ============================================================ */
.features-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.feature-card { background:var(--white); border:1px solid var(--fog); border-radius:var(--radius-xl); padding:36px 28px; transition:all 0.4s var(--ease); position:relative; overflow:hidden; }
.feature-card::after { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--primary),var(--accent)); transform:scaleX(0); transform-origin:left; transition:transform 0.5s var(--ease); }
.feature-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:transparent; }
.feature-card:hover::after { transform:scaleX(1); }
.feature-icon { width:52px; height:52px; background:var(--primary-light); border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin-bottom:18px; }
.feature-card h3 { font-size:1.1rem; margin-bottom:8px; font-family:var(--font-body); font-weight:700; }
.feature-card p { font-size:0.9rem; color:var(--graphite); line-height:1.6; }

/* ============================================================
   ABOUT
   ============================================================ */
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; }
.about-content h2 { font-size:clamp(1.7rem,2.8vw,2.2rem); margin-bottom:18px; }
.about-content > p { color:var(--graphite); margin-bottom:24px; font-size:1rem; }
.about-list { list-style:none; margin-bottom:28px; }
.about-list li { padding:9px 0 9px 30px; position:relative; font-weight:500; color:var(--carbon); font-size:0.93rem; }
.about-list li::before { content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:18px; height:18px; background:var(--primary-light); border-radius:50%; border:2px solid var(--primary); }
.about-list li::after { content:'✓'; position:absolute; left:4px; top:50%; transform:translateY(-50%); font-size:0.65rem; color:var(--primary); font-weight:700; }
.about-image-wrap { border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-lg); }
.about-image-wrap img { width:100%; height:400px; object-fit:cover; }

/* ============================================================
   PRICING
   ============================================================ */
.pricing-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; align-items:start; }
.pricing-card { background:var(--white); border:1px solid var(--fog); border-radius:var(--radius-xl); padding:32px 22px; text-align:center; transition:all 0.4s var(--ease); position:relative; }
.pricing-card.featured { border-color:var(--primary); box-shadow:0 0 0 1px var(--primary), var(--shadow-md); transform:scale(1.03); z-index:2; }
.pricing-card.featured .pricing-pop { position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--primary); color:var(--white); padding:4px 18px; border-radius:var(--radius-full); font-size:0.75rem; font-weight:700; white-space:nowrap; }
.pricing-card:hover { transform:translateY(-8px); box-shadow:var(--shadow-lg); border-color:transparent; }
.pricing-card.featured:hover { transform:scale(1.03) translateY(-8px); }
.pricing-tag { font-size:0.75rem; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:var(--primary); margin-bottom:4px; }
.pricing-dur { font-size:1rem; font-weight:600; color:var(--midnight); margin-bottom:20px; }
.pricing-amount { font-family:var(--font-display); font-size:2.8rem; font-weight:700; color:var(--midnight); margin-bottom:22px; letter-spacing:-0.04em; line-height:1; }
.pricing-amount sup { font-size:1rem; vertical-align:super; margin-right:2px; }
.pricing-line { height:1px; background:var(--fog); margin-bottom:20px; }
.pricing-features { list-style:none; margin-bottom:20px; text-align:left; }
.pricing-features li { padding:6px 0 6px 24px; position:relative; font-size:0.85rem; color:var(--carbon); }
.pricing-features li::before { content:'✓'; position:absolute; left:0; color:var(--accent); font-weight:700; font-size:0.82rem; }

/* Card Device Selector */
.card-device-selector { display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:16px; padding:10px 0; border-top:1px solid var(--fog); }
.card-device-label { font-size:0.8rem; font-weight:600; color:var(--steel); }
.card-dev-btn { width:28px; height:28px; border-radius:50%; border:1.5px solid var(--fog); background:var(--white); color:var(--midnight); font-size:1rem; font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.2s var(--ease); padding:0; font-family:var(--font-body); }
.card-dev-btn:hover { border-color:var(--primary); background:var(--primary-light); color:var(--primary); }
.card-dev-count { font-family:var(--font-display); font-size:1.1rem; font-weight:700; color:var(--midnight); min-width:22px; text-align:center; }

/* ============================================================
   WHY / TESTIMONIALS / FAQ / CTA
   ============================================================ */
.why-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.why-card { display:flex; gap:14px; align-items:flex-start; padding:24px; background:var(--white); border:1px solid var(--fog); border-radius:var(--radius); transition:all 0.35s var(--ease); }
.why-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-sm); border-color:transparent; }
.why-icon { width:46px; height:46px; min-width:46px; background:var(--primary-light); border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; }
.why-card h4 { font-size:0.95rem; margin-bottom:4px; font-family:var(--font-body); font-weight:700; }
.why-card p { font-size:0.83rem; color:var(--graphite); line-height:1.6; }

.cta-banner { background:linear-gradient(135deg, var(--midnight) 0%, #1E293B 100%); border-radius:var(--radius-xl); padding:68px 56px; text-align:center; position:relative; overflow:hidden; }
.cta-banner::before { content:''; position:absolute; top:-40%; right:-15%; width:500px; height:500px; background:radial-gradient(circle, rgba(14,165,233,0.12) 0%, transparent 55%); border-radius:50%; }
.cta-banner h2 { font-size:clamp(1.7rem,2.8vw,2.2rem); color:var(--white); margin-bottom:12px; position:relative; z-index:1; }
.cta-banner p { color:var(--steel); margin-bottom:28px; font-size:1rem; position:relative; z-index:1; }

.testimonials-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.testimonial-card { background:var(--white); border:1px solid var(--fog); border-radius:var(--radius-xl); padding:32px; transition:all 0.4s var(--ease); }
.testimonial-card:hover { box-shadow:var(--shadow-md); transform:translateY(-4px); border-color:transparent; }
.testimonial-stars { color:var(--primary); margin-bottom:14px; font-size:0.88rem; letter-spacing:2px; }
.testimonial-text { font-size:0.92rem; color:var(--carbon); line-height:1.7; margin-bottom:20px; font-style:italic; }
.testimonial-author { display:flex; align-items:center; gap:12px; padding-top:18px; border-top:1px solid var(--fog); }
.testimonial-avatar { width:42px; height:42px; border-radius:50%; object-fit:cover; border:2px solid var(--primary-light); }
.testimonial-name { font-weight:700; color:var(--midnight); font-size:0.88rem; }
.testimonial-role { font-size:0.76rem; color:var(--steel); }

.faq-list { max-width:760px; margin:0 auto; }
.faq-item { border:1px solid var(--fog); border-radius:var(--radius); margin-bottom:10px; overflow:hidden; background:var(--white); transition:all 0.35s var(--ease); }
.faq-item:hover { border-color:var(--steel); }
.faq-item.active { border-color:var(--primary); }
.faq-question { padding:18px 22px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; font-weight:600; font-size:0.93rem; color:var(--midnight); user-select:none; }
.faq-toggle { width:26px; height:26px; min-width:26px; border-radius:50%; background:var(--cloud); display:flex; align-items:center; justify-content:center; font-size:1rem; color:var(--carbon); transition:all 0.35s var(--ease); }
.faq-item.active .faq-toggle { background:var(--primary); color:var(--white); transform:rotate(45deg); }
.faq-answer { max-height:0; overflow:hidden; transition:max-height 0.45s var(--ease),padding 0.35s var(--ease); padding:0 22px; }
.faq-item.active .faq-answer { max-height:300px; padding:0 22px 22px; }
.faq-answer p { color:var(--graphite); font-size:0.9rem; line-height:1.7; }

/* ============================================================
   RESELLER
   ============================================================ */
.reseller-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.reseller-card { background:var(--white); border:1px solid var(--fog); border-radius:var(--radius-xl); padding:32px 22px; text-align:center; transition:all 0.4s var(--ease); }
.reseller-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:transparent; }
.reseller-icon { font-size:2.2rem; margin-bottom:14px; display:block; }
.reseller-card h3 { font-size:1rem; margin-bottom:8px; font-family:var(--font-body); font-weight:700; }
.reseller-card p { font-size:0.86rem; color:var(--graphite); }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid { display:grid; grid-template-columns:1fr 1.2fr; gap:50px; }
.contact-info-card { background:var(--snow); border:1px solid var(--fog); border-radius:var(--radius); padding:24px; margin-bottom:14px; display:flex; gap:14px; align-items:center; transition:all 0.35s var(--ease); }
.contact-info-card:hover { box-shadow:var(--shadow-sm); border-color:var(--primary); }
.contact-info-icon { width:48px; height:48px; min-width:48px; background:var(--primary-light); border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; }
.contact-info-card h4 { font-size:0.8rem; color:var(--steel); font-weight:500; font-family:var(--font-body); margin-bottom:2px; }
.contact-info-card a, .contact-info-card .info-value { color:var(--midnight); font-weight:600; font-size:0.93rem; }
.contact-form input,.contact-form textarea,.contact-form select { width:100%; padding:13px 16px; background:var(--snow); border:1px solid var(--fog); border-radius:var(--radius-sm); color:var(--midnight); font-family:var(--font-body); font-size:0.93rem; margin-bottom:14px; transition:all 0.3s var(--ease); }
.contact-form input:focus,.contact-form textarea:focus { outline:none; border-color:var(--primary); background:var(--white); box-shadow:0 0 0 4px var(--primary-glow); }
.contact-form textarea { min-height:130px; resize:vertical; }
.contact-form input::placeholder,.contact-form textarea::placeholder { color:var(--steel); }

/* ============================================================
   ORDER PAGE
   ============================================================ */
.order-steps { display:flex; align-items:center; justify-content:center; max-width:420px; margin:0 auto 44px; }
.order-step { display:flex; align-items:center; gap:7px; white-space:nowrap; }
.step-num { width:30px; height:30px; border-radius:50%; background:var(--fog); color:var(--steel); display:flex; align-items:center; justify-content:center; font-size:0.8rem; font-weight:700; transition:all 0.3s var(--ease); }
.order-step.active .step-num { background:var(--primary); color:var(--white); }
.order-step.completed .step-num { background:var(--accent); color:var(--white); }
.step-text { font-size:0.82rem; font-weight:600; color:var(--steel); }
.order-step.active .step-text,.order-step.completed .step-text { color:var(--midnight); }
.order-step-line { flex:1; height:2px; background:var(--fog); margin:0 10px; min-width:25px; }
.order-step-line.active { background:var(--primary); }

.order-layout { display:grid; grid-template-columns:1.3fr 1fr; gap:36px; align-items:start; }
.order-section-title { font-size:1.1rem; font-family:var(--font-body); font-weight:700; margin-bottom:14px; color:var(--midnight); }

.plan-selector { display:flex; flex-direction:column; gap:8px; }
.plan-option { cursor:pointer; display:block; }
.plan-option input { display:none; }
.plan-option-inner { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border:1.5px solid var(--fog); border-radius:var(--radius); transition:all 0.25s var(--ease); background:var(--white); }
.plan-option:hover .plan-option-inner { border-color:var(--steel); }
.plan-option.selected .plan-option-inner { border-color:var(--primary); background:var(--primary-light); box-shadow:0 0 0 1px var(--primary); }
.plan-option-left { display:flex; align-items:center; gap:12px; }
.plan-option-check { width:22px; height:22px; border-radius:50%; border:2px solid var(--fog); display:flex; align-items:center; justify-content:center; font-size:0.65rem; color:transparent; transition:all 0.25s var(--ease); flex-shrink:0; }
.plan-option.selected .plan-option-check { background:var(--primary); border-color:var(--primary); color:var(--white); }
.plan-option-left strong { font-size:0.92rem; color:var(--midnight); display:block; }
.plan-option-dur { font-size:0.78rem; color:var(--steel); }
.plan-option-right { text-align:right; }
.plan-option-price { font-family:var(--font-display); font-size:1.2rem; font-weight:700; color:var(--midnight); display:block; }

.device-selector { margin-top:8px; margin-bottom:22px; }
.device-counter { display:flex; align-items:center; gap:14px; }
.device-btn { width:42px; height:42px; border-radius:50%; border:1.5px solid var(--fog); background:var(--white); color:var(--midnight); font-size:1.2rem; font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.25s var(--ease); font-family:var(--font-body); }
.device-btn:hover { border-color:var(--primary); background:var(--primary-light); color:var(--primary); }
.device-btn.disabled { opacity:0.3; pointer-events:none; }
.device-count-display { min-width:90px; text-align:center; }
.device-count-number { font-family:var(--font-display); font-size:1.7rem; font-weight:700; color:var(--midnight); line-height:1; }
.device-count-label { font-size:0.76rem; color:var(--steel); margin-top:3px; }
.device-price-info { margin-top:10px; background:var(--snow); border:1px solid var(--fog); border-radius:var(--radius-sm); padding:10px 14px; display:flex; justify-content:space-between; font-size:0.86rem; }
.device-price-info .base-text { color:var(--steel); }
.device-price-info .extra-text { color:var(--primary); font-weight:700; }
.device-total-row { display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-top:2px solid var(--fog); margin-top:8px; }
.device-total-label { font-weight:700; font-size:0.95rem; color:var(--midnight); }
.device-total-price { font-family:var(--font-display); font-size:1.5rem; font-weight:700; color:var(--primary); }

.order-form label { display:block; font-weight:600; font-size:0.83rem; color:var(--midnight); margin-bottom:5px; }
.order-form .form-group { margin-bottom:14px; }
.order-form input,.order-form select { width:100%; padding:12px 15px; background:var(--snow); border:1px solid var(--fog); border-radius:var(--radius-sm); color:var(--midnight); font-family:var(--font-body); font-size:0.9rem; transition:all 0.3s var(--ease); }
.order-form input:focus,.order-form select:focus { outline:none; border-color:var(--primary); background:var(--white); box-shadow:0 0 0 4px var(--primary-glow); }
.order-form input::placeholder { color:var(--steel); }
.order-form .form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.order-note { font-size:0.78rem; color:var(--steel); text-align:center; margin-top:14px; line-height:1.6; }
.order-note a { font-weight:600; }

.order-summary-card { background:var(--white); border:1px solid var(--fog); border-radius:var(--radius-xl); padding:28px 24px; box-shadow:var(--shadow-sm); position:sticky; top:96px; }
.order-summary-card h3 { font-size:1rem; margin-bottom:18px; font-family:var(--font-body); font-weight:700; }
.order-summary-logo { margin-bottom:14px; }
.order-summary-logo img { height:32px; width:auto; }
.order-summary-plan { font-weight:700; font-size:1rem; color:var(--midnight); }
.order-summary-duration { font-size:0.83rem; color:var(--steel); margin-bottom:8px; }
.order-summary-divider { height:1px; background:var(--fog); margin:14px 0; }
.order-summary-row { display:flex; justify-content:space-between; padding:5px 0; font-size:0.86rem; }
.order-summary-row span:first-child { color:var(--steel); }
.order-summary-row span:last-child { font-weight:600; color:var(--midnight); }
.order-summary-total { display:flex; justify-content:space-between; padding:10px 0 0; font-size:1.1rem; font-weight:700; color:var(--midnight); }
.order-summary-total span:last-child { font-family:var(--font-display); font-size:1.3rem; color:var(--primary); }
.order-summary-badges { display:flex; flex-direction:column; gap:5px; margin-top:16px; padding-top:14px; border-top:1px solid var(--fog); }
.order-summary-badges span { font-size:0.78rem; color:var(--accent); font-weight:500; }

/* ============================================================
   PAY VIA PAGE (WhatsApp/Email)
   ============================================================ */
.payvia-wrapper { max-width:600px; margin:0 auto; }
.payvia-card { background:var(--white); border:1px solid var(--fog); border-radius:var(--radius-xl); padding:44px 36px; box-shadow:var(--shadow-md); text-align:center; }
.payvia-icon { font-size:3rem; margin-bottom:16px; }
.payvia-card h2 { font-size:1.5rem; margin-bottom:8px; }
.payvia-card > p { color:var(--graphite); font-size:0.95rem; margin-bottom:32px; }
.payvia-summary { background:var(--snow); border-radius:var(--radius); padding:22px; margin-bottom:28px; text-align:left; }
.payvia-summary-row { display:flex; justify-content:space-between; padding:6px 0; font-size:0.88rem; }
.payvia-summary-row span:first-child { color:var(--steel); }
.payvia-summary-row span:last-child { font-weight:600; color:var(--midnight); }
.payvia-summary-total { display:flex; justify-content:space-between; padding:12px 0 0; margin-top:8px; border-top:2px solid var(--fog); font-size:1.1rem; font-weight:700; }
.payvia-summary-total span:last-child { color:var(--primary); font-family:var(--font-display); }
.payvia-buttons { display:flex; flex-direction:column; gap:12px; margin-bottom:24px; }
.payvia-buttons .btn { padding:18px 28px; font-size:1.05rem; width:100%; justify-content:center; }
.payvia-divider { position:relative; text-align:center; margin:4px 0; }
.payvia-divider span { background:var(--white); padding:0 14px; font-size:0.82rem; color:var(--steel); position:relative; z-index:1; }
.payvia-divider::before { content:''; position:absolute; left:0; right:0; top:50%; height:1px; background:var(--fog); }
.payvia-note { font-size:0.82rem; color:var(--graphite); line-height:1.6; }
.payvia-note strong { color:var(--midnight); }

/* ============================================================
   POLICY / PAGE HEADER / BLOG / FOOTER / 404
   ============================================================ */
.policy-content { max-width:740px; margin:0 auto; }
.policy-content h3 { font-size:1.2rem; margin:36px 0 12px; color:var(--midnight); font-family:var(--font-body); font-weight:700; }
.policy-content h3:first-child { margin-top:0; }
.policy-content p { margin-bottom:12px; color:var(--carbon); font-size:0.93rem; }
.policy-content ul { margin:8px 0 18px 22px; }
.policy-content ul li { margin-bottom:7px; color:var(--carbon); font-size:0.91rem; }
.policy-content strong { color:var(--midnight); }

.page-header { padding:145px 0 55px; text-align:center; background:var(--snow); position:relative; overflow:hidden; }
.page-header::before { content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:700px; height:350px; background:radial-gradient(ellipse,var(--primary-glow) 0%,transparent 65%); pointer-events:none; }
.page-header h1 { font-size:clamp(2rem,3.5vw,2.8rem); margin-bottom:8px; position:relative; }
.page-header p { color:var(--graphite); font-size:1rem; position:relative; }
.breadcrumbs { position:relative; margin-top:14px; font-size:0.83rem; color:var(--steel); }
.breadcrumbs a { color:var(--primary); font-weight:500; }

.blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.blog-card { background:var(--white); border:1px solid var(--fog); border-radius:var(--radius-xl); overflow:hidden; transition:all 0.4s var(--ease); }
.blog-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:transparent; }
.blog-card-img { height:190px; object-fit:cover; width:100%; }
.blog-card-content { padding:22px; }
.blog-card-meta { font-size:0.76rem; color:var(--steel); margin-bottom:7px; font-weight:500; }
.blog-card h3 { font-size:1.05rem; margin-bottom:7px; font-family:var(--font-body); font-weight:700; }
.blog-card h3 a { color:var(--midnight); }
.blog-card h3 a:hover { color:var(--primary); }
.blog-card p { font-size:0.86rem; color:var(--graphite); margin-bottom:12px; }
.read-more { color:var(--primary); font-weight:600; font-size:0.86rem; }
.blog-layout { display:grid; grid-template-columns:2fr 1fr; gap:36px; }
.widget { background:var(--snow); border:1px solid var(--fog); border-radius:var(--radius); padding:22px; margin-bottom:22px; }
.widget h3 { font-size:1rem; margin-bottom:12px; padding-bottom:10px; border-bottom:1px solid var(--fog); font-family:var(--font-body); font-weight:700; }

.site-footer { background:var(--snow); padding:72px 0 0; border-top:1px solid var(--fog); }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:44px; padding-bottom:44px; }
.footer-about p { margin:14px 0 0; font-size:0.86rem; color:var(--graphite); line-height:1.7; }
.footer-logo img { height:38px; width:auto; }
.footer-heading { font-size:0.85rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--midnight); margin-bottom:18px; font-family:var(--font-body); }
.footer-links { list-style:none; }
.footer-links li { margin-bottom:9px; }
.footer-links a { color:var(--graphite); font-size:0.88rem; }
.footer-links a:hover { color:var(--primary); }
.footer-contact-item { display:flex; gap:10px; align-items:center; margin-bottom:12px; font-size:0.88rem; }
.footer-contact-item span { font-size:1rem; }
.footer-contact-item a,.footer-contact-item p { color:var(--carbon); font-weight:500; }
.footer-bottom { border-top:1px solid var(--fog); padding:18px 0; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; }
.footer-bottom p { font-size:0.8rem; color:var(--steel); }
.footer-bottom a { color:var(--graphite); }
.footer-bottom-links { display:flex; gap:22px; list-style:none; }
.footer-bottom-links a { font-size:0.8rem; color:var(--steel); }
.footer-bottom-links a:hover { color:var(--primary); }

.error-page { min-height:70vh; display:flex; align-items:center; justify-content:center; text-align:center; padding:150px 0 70px; }
.error-page h1 { font-size:7rem; color:var(--primary); line-height:1; }
.error-page h2 { font-size:1.7rem; margin:8px 0 18px; }

.scroll-top { position:fixed; bottom:26px; right:26px; width:42px; height:42px; background:var(--white); border:1px solid var(--fog); border-radius:50%; cursor:pointer; display:none; align-items:center; justify-content:center; font-size:1rem; color:var(--midnight); z-index:99; transition:all 0.35s var(--ease); box-shadow:var(--shadow-sm); }
.scroll-top.visible { display:flex; }
.scroll-top:hover { background:var(--primary); color:var(--white); border-color:var(--primary); }

.nav-overlay { position:fixed; inset:0; z-index:998; opacity:0; visibility:hidden; }
.nav-overlay.active { opacity:1; visibility:visible; }

/* ============================================================
   ANIMATIONS
   ============================================================ */
.fade-up { opacity:0; transform:translateY(22px); transition:opacity 0.6s var(--ease),transform 0.6s var(--ease); }
.fade-up.visible { opacity:1; transform:translateY(0); }
.fade-up-stagger > * { opacity:0; transform:translateY(18px); transition:opacity 0.5s var(--ease),transform 0.5s var(--ease); }
.fade-up-stagger.visible > *:nth-child(1){transition-delay:0s;opacity:1;transform:translateY(0)}
.fade-up-stagger.visible > *:nth-child(2){transition-delay:.07s;opacity:1;transform:translateY(0)}
.fade-up-stagger.visible > *:nth-child(3){transition-delay:.14s;opacity:1;transform:translateY(0)}
.fade-up-stagger.visible > *:nth-child(4){transition-delay:.21s;opacity:1;transform:translateY(0)}
.fade-up-stagger.visible > *:nth-child(5){transition-delay:.28s;opacity:1;transform:translateY(0)}
.fade-up-stagger.visible > *:nth-child(6){transition-delay:.35s;opacity:1;transform:translateY(0)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1024px){
  :root{--section-pad:80px}
  .pricing-grid{grid-template-columns:repeat(3,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  :root{--section-pad:56px}
  .main-nav{display:block}
  .main-nav>ul{display:none}
  .nav-overlay.active{background:transparent}
  .main-nav.active{display:block;position:fixed;top:0;right:0;width:290px;max-width:80vw;height:100vh;height:100dvh;background:var(--white);z-index:999;box-shadow:-6px 0 36px rgba(15,23,42,0.1);overflow-y:auto;padding:88px 24px 36px;transition:transform 0.35s var(--ease)}
  .main-nav:not(.active){transform:translateX(100%);transition:transform 0.3s var(--ease)}
  .main-nav.active ul{display:flex;flex-direction:column;text-align:left;gap:3px;list-style:none;width:100%}
  .main-nav.active a{font-size:1rem;padding:13px 16px;display:block;border-radius:var(--radius-sm);font-weight:600;color:var(--midnight);border-bottom:1px solid var(--fog);transition:all 0.25s var(--ease)}
  .main-nav.active a:hover{background:var(--cloud);color:var(--primary);border-color:transparent}
  .main-nav.active .nav-cta{margin-top:14px;background:var(--primary)!important;color:var(--white)!important;border-radius:var(--radius-full)!important;text-align:center!important;border-bottom:none!important}
  .mobile-toggle{display:flex}
  .mobile-toggle.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
  .mobile-toggle.active span:nth-child(2){opacity:0}
  .mobile-toggle.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}
  .header-inner{background:rgba(255,255,255,0.95);padding:8px 14px}
  .hero{padding:110px 0 50px;min-height:auto}
  .hero-grid{grid-template-columns:1fr}
  .hero-visual{display:none}
  .features-grid,.testimonials-grid,.why-grid,.blog-grid{grid-template-columns:1fr}
  .pricing-grid{grid-template-columns:1fr}
  .pricing-card.featured{transform:none}
  .pricing-card.featured:hover{transform:translateY(-8px)}
  .about-grid,.contact-grid{grid-template-columns:1fr;gap:36px}
  .reseller-grid{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr;gap:28px}
  .footer-bottom{flex-direction:column;text-align:center}
  .page-header h1{font-size:1.9rem}
  .blog-layout{grid-template-columns:1fr}
  .cta-banner{padding:44px 24px}
  .order-layout{grid-template-columns:1fr}
  .order-summary-card{position:static}
  .order-steps{flex-wrap:wrap;gap:6px}
  .step-text{display:none}
}
@media(max-width:480px){
  .hero h1{font-size:1.8rem}
  .hero-buttons{flex-direction:column}
  .reseller-grid{grid-template-columns:1fr}
  .scroll-top{bottom:14px;right:14px}
  .order-form .form-row{grid-template-columns:1fr}
  .payvia-card{padding:30px 20px}
  .payvia-buttons .btn{font-size:0.95rem;padding:16px 22px}
}