/*
Theme Name: DStv Installation Agent
Theme URI: https://www.dstvinstallation.co.za
Author: DStv Installation Agent
Author URI: https://www.dstvinstallation.co.za
Description: Professional WordPress theme for DStv Installation Agent - a certified DStv installation company in South Africa. Features full-page sections, SEO-optimised structure, service showcase, testimonials, FAQ, contact forms, and a responsive mobile-first design.
Version: 1.0.0
Requires at least: 5.8
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dstv-installation-agent
Tags: one-page, business, full-width-template, custom-colors, custom-menu, featured-images, footer-widgets, responsive-layout, right-sidebar, rtl-language-support, sticky-post, theme-options
*/

/* ─────────────────────────────────────────
   CSS CUSTOM PROPERTIES
───────────────────────────────────────── */
:root {
    --red:        #E8151B;
    --red-dark:   #B5101A;
    --red-light:  #ff3a40;
    --dark:       #0a0a0a;
    --dark2:      #111111;
    --dark3:      #1a1a1a;
    --dark4:      #222222;
    --gray:       #888888;
    --light-gray: #f4f4f4;
    --text:       #1a1a1a;
    --white:      #ffffff;
    --border:     rgba(255,255,255,0.10);
    --border-dark:rgba(0,0,0,0.08);
    --gold:       #f0a500;
    --font-head:  'Barlow Condensed', sans-serif;
    --font-body:  'Barlow', sans-serif;
}

/* ─────────────────────────────────────────
   RESET & BASE
───────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body {
    font-family: var(--font-body);
    font-weight: 400;
    color: var(--text);
    background: var(--white);
    overflow-x: hidden;
    line-height: 1.6;
}
img { max-width:100%; height:auto; display:block; }
a { color: var(--red); text-decoration:none; transition: color .2s; }
a:hover { color: var(--red-dark); }
ul, ol { list-style:none; }
button { cursor:pointer; font-family: var(--font-body); }
input, select, textarea, button { font-family: var(--font-body); }

/* ─────────────────────────────────────────
   TYPOGRAPHY
───────────────────────────────────────── */
h1,h2,h3,h4,h5,h6 {
    font-family: var(--font-head);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .02em;
    line-height: 1.05;
}
p { line-height: 1.75; }

/* ─────────────────────────────────────────
   UTILITY CLASSES
───────────────────────────────────────── */
.container { max-width:1200px; margin:0 auto; padding:0 20px; }
.section-pad { padding:80px 20px; }
.text-center { text-align:center; }
.text-white { color:#fff !important; }
.bg-dark { background: var(--dark); }
.bg-dark2 { background: var(--dark2); }
.bg-light { background: var(--light-gray); }
.bg-red  { background: var(--red); }

/* Section Header */
.section-header { text-align:center; margin-bottom:56px; }
.section-tag {
    display:inline-block;
    background:rgba(232,21,27,.10);
    color: var(--red);
    font-size:12px;
    font-weight:700;
    letter-spacing:.10em;
    text-transform:uppercase;
    padding:5px 14px;
    border-radius:3px;
    margin-bottom:14px;
}
.section-tag.white { background:rgba(255,255,255,.10); color:#fff; }
.section-title {
    font-family: var(--font-head);
    font-size: clamp(32px,5vw,50px);
    font-weight:900;
    color: var(--text);
    line-height:1.05;
    text-transform:uppercase;
}
.section-title.white { color:#fff; }
.section-sub {
    font-size:16px;
    color: var(--gray);
    margin-top:14px;
    max-width:620px;
    margin-left:auto;
    margin-right:auto;
    line-height:1.75;
}
.section-sub.white { color:rgba(255,255,255,.60); }

/* Buttons */
.btn-primary {
    display:inline-flex;
    align-items:center;
    gap:10px;
    background: var(--red);
    color:#fff;
    text-decoration:none;
    padding:15px 32px;
    border-radius:6px;
    font-weight:700;
    font-size:15px;
    letter-spacing:.03em;
    border:none;
    transition:all .2s;
}
.btn-primary:hover { background: var(--red-dark); transform:translateY(-2px); color:#fff; }
.btn-outline {
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:transparent;
    color:#fff;
    text-decoration:none;
    padding:15px 32px;
    border-radius:6px;
    font-weight:600;
    font-size:15px;
    border:1px solid rgba(255,255,255,.25);
    transition:all .2s;
}
.btn-outline:hover { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.5); color:#fff; }
.btn-white {
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:#fff;
    color: var(--red);
    text-decoration:none;
    padding:15px 36px;
    border-radius:6px;
    font-weight:700;
    font-size:15px;
    transition:all .2s;
}
.btn-white:hover { background:rgba(255,255,255,.9); transform:translateY(-2px); color: var(--red); }
.btn-dark-outline {
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:rgba(0,0,0,.20);
    color:#fff;
    text-decoration:none;
    padding:15px 36px;
    border-radius:6px;
    font-weight:600;
    font-size:15px;
    border:1px solid rgba(255,255,255,.30);
    transition:all .2s;
}
.btn-dark-outline:hover { background:rgba(0,0,0,.35); color:#fff; }

/* ─────────────────────────────────────────
   TOP BAR
───────────────────────────────────────── */
#top-bar {
    background: var(--red);
    padding:8px 0;
    font-size:13px;
    font-weight:500;
    letter-spacing:.02em;
}
#top-bar .top-inner {
    max-width:1200px;
    margin:0 auto;
    padding:0 20px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
}
#top-bar .info-items { display:flex; gap:24px; flex-wrap:wrap; }
#top-bar .info-item {
    display:flex;
    align-items:center;
    gap:6px;
    color:#fff;
    font-size:13px;
}
#top-bar a { color:#fff; }
#top-bar .tb-cta {
    background:rgba(0,0,0,.25);
    color:#fff;
    padding:4px 14px;
    border-radius:3px;
    font-weight:600;
    font-size:12px;
    letter-spacing:.05em;
    text-transform:uppercase;
}

/* ─────────────────────────────────────────
   HEADER / NAV
───────────────────────────────────────── */
#masthead {
    background: var(--dark);
    position:sticky;
    top:0;
    z-index:1000;
    box-shadow:0 2px 20px rgba(0,0,0,.50);
}
#masthead .nav-inner {
    max-width:1200px;
    margin:0 auto;
    padding:0 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:68px;
}
/* Logo */
.site-logo {
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
}
.logo-icon {
    width:44px;
    height:44px;
    background: var(--red);
    border-radius:6px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}
.logo-icon svg { width:26px; height:26px; fill:#fff; }
.logo-text .brand {
    font-family: var(--font-head);
    font-size:22px;
    font-weight:800;
    color:#fff;
    line-height:1;
    letter-spacing:.02em;
    display:block;
}
.logo-text .tagline {
    font-size:10px;
    color:rgba(255,255,255,.45);
    letter-spacing:.08em;
    text-transform:uppercase;
    display:block;
}
/* Primary Nav */
#primary-navigation { display:flex; align-items:center; gap:4px; }
#primary-navigation a {
    color:rgba(255,255,255,.80);
    text-decoration:none;
    font-size:14px;
    font-weight:500;
    padding:8px 14px;
    border-radius:4px;
    transition:all .2s;
    letter-spacing:.02em;
}
#primary-navigation a:hover,
#primary-navigation .current-menu-item > a { color:#fff; background:rgba(255,255,255,.08); }
#primary-navigation .nav-cta {
    background: var(--red);
    color:#fff;
    padding:8px 20px;
    font-weight:700;
    letter-spacing:.04em;
}
#primary-navigation .nav-cta:hover { background: var(--red-dark); }
/* Hamburger */
.menu-toggle {
    display:none;
    background:none;
    border:none;
    padding:8px;
    flex-direction:column;
    gap:5px;
    cursor:pointer;
}
.menu-toggle span {
    display:block;
    width:24px;
    height:2px;
    background:#fff;
    border-radius:1px;
    transition:all .3s;
}
/* Mobile Nav */
#mobile-nav {
    display:none;
    background: var(--dark2);
    border-top:1px solid rgba(255,255,255,.06);
}
#mobile-nav a {
    display:block;
    color:rgba(255,255,255,.80);
    text-decoration:none;
    padding:14px 20px;
    font-size:15px;
    font-weight:500;
    border-bottom:1px solid rgba(255,255,255,.04);
    transition:all .2s;
}
#mobile-nav a:hover { color:#fff; background:rgba(255,255,255,.04); }

/* ─────────────────────────────────────────
   HERO SECTION
───────────────────────────────────────── */
#hero {
    background: var(--dark);
    position:relative;
    overflow:hidden;
    padding:90px 20px 80px;
}
.hero-bg {
    position:absolute;
    inset:0;
    background:linear-gradient(135deg,#0a0a0a 0%,#1a0505 50%,#0a0a0a 100%);
}
.hero-grid {
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(232,21,27,.06) 1px,transparent 1px),
        linear-gradient(90deg,rgba(232,21,27,.06) 1px,transparent 1px);
    background-size:60px 60px;
}
.hero-glow {
    position:absolute;
    top:-100px;
    left:50%;
    transform:translateX(-50%);
    width:600px;
    height:400px;
    background:radial-gradient(ellipse,rgba(232,21,27,.20) 0%,transparent 70%);
    pointer-events:none;
}
.hero-inner {
    max-width:1200px;
    margin:0 auto;
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:1fr 420px;
    gap:60px;
    align-items:center;
}
.hero-badge {
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:rgba(232,21,27,.15);
    border:1px solid rgba(232,21,27,.30);
    color:#ff6b6e;
    font-size:12px;
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;
    padding:6px 14px;
    border-radius:100px;
    margin-bottom:24px;
}
.badge-dot {
    width:6px;
    height:6px;
    background: var(--red);
    border-radius:50%;
    animation:pulse 2s infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
#hero h1 {
    font-family: var(--font-head);
    font-size: clamp(46px,7vw,80px);
    font-weight:900;
    color:#fff;
    line-height:.95;
    letter-spacing:-.01em;
    margin-bottom:20px;
    text-transform:uppercase;
}
#hero h1 .accent { color: var(--red); display:block; }
#hero .hero-desc {
    color:rgba(255,255,255,.65);
    font-size:17px;
    line-height:1.75;
    max-width:500px;
    margin-bottom:36px;
}
.hero-buttons { display:flex; gap:16px; flex-wrap:wrap; }
.hero-stats {
    display:flex;
    gap:32px;
    margin-top:44px;
    padding-top:36px;
    border-top:1px solid rgba(255,255,255,.08);
    flex-wrap:wrap;
}
.hero-stat-num {
    font-family: var(--font-head);
    font-size:36px;
    font-weight:900;
    color: var(--red);
    line-height:1;
}
.hero-stat-label {
    font-size:12px;
    color:rgba(255,255,255,.50);
    text-transform:uppercase;
    letter-spacing:.06em;
    margin-top:4px;
}
/* Quote Card */
.hero-card {
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.10);
    border-radius:12px;
    padding:32px;
    backdrop-filter:blur(10px);
}
.hero-card-title {
    font-family: var(--font-head);
    font-size:22px;
    font-weight:700;
    color:#fff;
    text-transform:uppercase;
    margin-bottom:6px;
    letter-spacing:.04em;
}
.hero-card-sub { font-size:13px; color:rgba(255,255,255,.40); margin-bottom:24px; }
.quick-form { display:flex; flex-direction:column; gap:14px; }
.form-group { display:flex; flex-direction:column; gap:6px; }
.form-label {
    font-size:12px;
    font-weight:600;
    color:rgba(255,255,255,.60);
    text-transform:uppercase;
    letter-spacing:.06em;
}
.form-input {
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.12);
    border-radius:6px;
    padding:12px 16px;
    color:#fff;
    font-size:14px;
    outline:none;
    transition:border-color .2s;
    width:100%;
}
.form-input::placeholder { color:rgba(255,255,255,.30); }
.form-input:focus { border-color: var(--red); }
.form-input option { background: var(--dark); color:#fff; }
.hero-card .btn-primary { width:100%; justify-content:center; margin-top:6px; }
.card-trust {
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:16px;
    font-size:12px;
    color:rgba(255,255,255,.40);
}
.card-trust svg { width:14px; height:14px; fill: var(--gold); }
.form-success {
    display:none;
    text-align:center;
    padding:20px;
    background:rgba(0,200,100,.10);
    border:1px solid rgba(0,200,100,.20);
    border-radius:8px;
    color:#4caf86;
    font-weight:500;
    font-size:15px;
}

/* ─────────────────────────────────────────
   TRUST STRIP
───────────────────────────────────────── */
#trust-strip {
    background: var(--dark2);
    border-top:1px solid rgba(255,255,255,.05);
    border-bottom:1px solid rgba(255,255,255,.05);
    padding:20px 0;
}
.trust-inner {
    max-width:1200px;
    margin:0 auto;
    padding:0 20px;
    display:flex;
    justify-content:space-around;
    align-items:center;
    flex-wrap:wrap;
    gap:20px;
}
.trust-item {
    display:flex;
    align-items:center;
    gap:10px;
    color:rgba(255,255,255,.65);
    font-size:13px;
    font-weight:500;
}
.trust-icon {
    width:32px;
    height:32px;
    background:rgba(232,21,27,.15);
    border-radius:6px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}
.trust-icon svg { width:18px; height:18px; fill: var(--red); }

/* ─────────────────────────────────────────
   SERVICES SECTION
───────────────────────────────────────── */
#services { background: var(--light-gray); }
.services-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:24px;
}
.service-card {
    background:#fff;
    border-radius:10px;
    padding:32px 28px;
    border:1px solid var(--border-dark);
    transition:all .3s;
    position:relative;
    overflow:hidden;
}
.service-card::before {
    content:'';
    position:absolute;
    bottom:0; left:0; right:0;
    height:3px;
    background: var(--red);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .3s;
}
.service-card:hover { transform:translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,.12); }
.service-card:hover::before { transform:scaleX(1); }
.service-icon {
    width:56px;
    height:56px;
    background:rgba(232,21,27,.08);
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:20px;
}
.service-icon svg { width:28px; height:28px; fill: var(--red); }
.service-name {
    font-family: var(--font-head);
    font-size:20px;
    font-weight:700;
    color: var(--text);
    margin-bottom:10px;
    text-transform:uppercase;
    letter-spacing:.03em;
}
.service-desc { font-size:14px; color: var(--gray); line-height:1.75; margin-bottom:20px; }
.service-link {
    font-size:13px;
    font-weight:700;
    color: var(--red);
    text-decoration:none;
    text-transform:uppercase;
    letter-spacing:.06em;
    display:inline-flex;
    align-items:center;
    gap:6px;
    transition:gap .2s;
}
.service-link:hover { gap:10px; color: var(--red-dark); }
.service-link svg { width:14px; height:14px; fill: var(--red); }

/* ─────────────────────────────────────────
   WHY US SECTION
───────────────────────────────────────── */
#why-us { background: var(--dark); }
#why-us .section-pad { padding:80px 20px; }
.why-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;
}
.why-content h2 {
    font-family: var(--font-head);
    font-size: clamp(36px,5vw,56px);
    font-weight:900;
    color:#fff;
    line-height:1;
    text-transform:uppercase;
    margin-bottom:20px;
}
.why-content h2 span { color: var(--red); }
.why-content p { color:rgba(255,255,255,.60); font-size:16px; line-height:1.80; margin-bottom:32px; }
.why-list { display:flex; flex-direction:column; gap:14px; }
.why-list li {
    display:flex;
    align-items:flex-start;
    gap:12px;
    color:rgba(255,255,255,.75);
    font-size:15px;
    line-height:1.50;
}
.check-icon {
    width:22px;
    height:22px;
    background:rgba(232,21,27,.20);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    margin-top:1px;
}
.check-icon svg { width:12px; height:12px; fill: var(--red); }
.why-features {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}
.why-feat {
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    border-radius:10px;
    padding:28px 24px;
    text-align:center;
    transition:all .3s;
}
.why-feat:hover { background:rgba(255,255,255,.07); border-color:rgba(232,21,27,.30); }
.why-feat-num {
    font-family: var(--font-head);
    font-size:44px;
    font-weight:900;
    color: var(--red);
    line-height:1;
    margin-bottom:6px;
}
.why-feat-label { font-size:12px; color:rgba(255,255,255,.50); text-transform:uppercase; letter-spacing:.06em; }

/* ─────────────────────────────────────────
   HOW IT WORKS
───────────────────────────────────────── */
#how-it-works { background: var(--white); }
.steps-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
}
.step-card { text-align:center; }
.step-num {
    width:72px;
    height:72px;
    background: var(--red);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 20px;
    font-family: var(--font-head);
    font-size:28px;
    font-weight:900;
    color:#fff;
    position:relative;
}
.step-num::after {
    content:'';
    position:absolute;
    inset:-4px;
    border-radius:50%;
    border:2px solid rgba(232,21,27,.25);
}
.step-title {
    font-family: var(--font-head);
    font-size:18px;
    font-weight:700;
    color: var(--text);
    text-transform:uppercase;
    margin-bottom:10px;
    letter-spacing:.03em;
}
.step-desc { font-size:14px; color: var(--gray); line-height:1.75; }

/* ─────────────────────────────────────────
   PACKAGES
───────────────────────────────────────── */
#packages { background: var(--dark2); }
.packages-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:20px;
}
.pkg-card {
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    border-radius:10px;
    padding:28px 24px;
    transition:all .3s;
    position:relative;
    overflow:hidden;
}
.pkg-card.featured { border-color: var(--red); background:rgba(232,21,27,.06); }
.pkg-card.featured::before {
    content:'MOST POPULAR';
    position:absolute;
    top:14px; right:-24px;
    background: var(--red);
    color:#fff;
    font-size:9px;
    font-weight:700;
    letter-spacing:.08em;
    padding:4px 36px;
    transform:rotate(45deg);
}
.pkg-card:hover { transform:translateY(-4px); border-color: var(--red); }
.pkg-name {
    font-family: var(--font-head);
    font-size:22px;
    font-weight:800;
    color:#fff;
    text-transform:uppercase;
    margin-bottom:6px;
    letter-spacing:.04em;
}
.pkg-tagline { font-size:12px; color:rgba(255,255,255,.40); margin-bottom:20px; }
.pkg-features { display:flex; flex-direction:column; gap:10px; margin-bottom:24px; }
.pkg-features li {
    display:flex;
    align-items:center;
    gap:10px;
    font-size:14px;
    color:rgba(255,255,255,.70);
}
.pkg-check { width:16px; height:16px; fill: var(--red); flex-shrink:0; }
.pkg-cta {
    display:block;
    text-align:center;
    background: var(--red);
    color:#fff;
    text-decoration:none;
    padding:12px;
    border-radius:6px;
    font-weight:700;
    font-size:13px;
    letter-spacing:.05em;
    text-transform:uppercase;
    transition:all .2s;
}
.pkg-cta:hover { background: var(--red-dark); color:#fff; }

/* ─────────────────────────────────────────
   TESTIMONIALS
───────────────────────────────────────── */
#testimonials { background: var(--light-gray); }
.testimonials-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:24px;
}
.testimonial-card {
    background:#fff;
    border-radius:10px;
    padding:32px 28px;
    border:1px solid var(--border-dark);
}
.quote-mark {
    font-family:Georgia,serif;
    font-size:80px;
    color:rgba(232,21,27,.10);
    line-height:.70;
    margin-bottom:16px;
    display:block;
}
.testimonial-text { font-size:15px; color: var(--text); line-height:1.80; margin-bottom:24px; }
.testimonial-author { display:flex; align-items:center; gap:12px; }
.author-avatar {
    width:44px; height:44px;
    border-radius:50%;
    background: var(--red);
    display:flex;
    align-items:center;
    justify-content:center;
    font-family: var(--font-head);
    font-size:18px;
    font-weight:700;
    color:#fff;
    flex-shrink:0;
}
.author-name { font-weight:700; font-size:14px; color: var(--text); }
.author-loc  { font-size:12px; color: var(--gray); }
.stars { display:flex; gap:3px; margin-bottom:16px; }
.star { width:14px; height:14px; fill: var(--gold); }

/* ─────────────────────────────────────────
   CTA BAND
───────────────────────────────────────── */
#cta-band { background: var(--red); padding:80px 20px; text-align:center; }
#cta-band h2 {
    font-family: var(--font-head);
    font-size: clamp(36px,6vw,64px);
    font-weight:900;
    color:#fff;
    text-transform:uppercase;
    line-height:1;
    margin-bottom:16px;
}
#cta-band p { color:rgba(255,255,255,.80); font-size:17px; margin-bottom:36px; max-width:500px; margin-left:auto; margin-right:auto; }
.cta-buttons { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* ─────────────────────────────────────────
   SERVICE AREAS
───────────────────────────────────────── */
#service-areas { background: var(--light-gray); }
.areas-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
    gap:12px;
}
.area-chip {
    background:#fff;
    border:1px solid var(--border-dark);
    border-radius:6px;
    padding:12px 16px;
    display:flex;
    align-items:center;
    gap:8px;
    font-size:14px;
    font-weight:500;
    color: var(--text);
    transition:all .2s;
}
.area-chip:hover { border-color: var(--red); color: var(--red); transform:translateY(-2px); }
.area-dot { width:8px; height:8px; background: var(--red); border-radius:50%; flex-shrink:0; }

/* ─────────────────────────────────────────
   FAQ
───────────────────────────────────────── */
#faq { background: var(--white); }
.faq-grid { max-width:800px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.faq-item {
    background:#fff;
    border:1px solid var(--border-dark);
    border-radius:8px;
    overflow:hidden;
}
.faq-q {
    width:100%;
    background:none;
    border:none;
    text-align:left;
    padding:20px 24px;
    font-size:15px;
    font-weight:600;
    color: var(--text);
    cursor:pointer;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    transition:color .2s;
}
.faq-q:hover { color: var(--red); }
.faq-arrow { width:18px; height:18px; fill: var(--red); flex-shrink:0; transition:transform .3s; }
.faq-item.open .faq-arrow { transform:rotate(180deg); }
.faq-a {
    max-height:0;
    overflow:hidden;
    transition:max-height .4s ease;
    font-size:14px;
    color: var(--gray);
    line-height:1.80;
    padding:0 24px;
}
.faq-item.open .faq-a { max-height:300px; padding-bottom:20px; }

/* ─────────────────────────────────────────
   CONTACT
───────────────────────────────────────── */
#contact { background: var(--dark); }
.contact-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:start;
}
.contact-info h2 {
    font-family: var(--font-head);
    font-size:40px;
    font-weight:800;
    color:#fff;
    text-transform:uppercase;
    margin-bottom:16px;
}
.contact-info > p { color:rgba(255,255,255,.60); font-size:15px; line-height:1.80; margin-bottom:32px; }
.contact-items { display:flex; flex-direction:column; gap:20px; }
.contact-item {
    display:flex;
    align-items:flex-start;
    gap:16px;
    padding:20px;
    background:rgba(255,255,255,.04);
    border-radius:8px;
    border:1px solid rgba(255,255,255,.06);
    text-decoration:none;
    transition:all .2s;
    color:inherit;
}
.contact-item:hover { border-color:rgba(232,21,27,.40); }
.contact-item-icon {
    width:44px; height:44px;
    background:rgba(232,21,27,.15);
    border-radius:8px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}
.contact-item-icon svg { width:22px; height:22px; fill: var(--red); }
.contact-item-label { font-size:11px; color:rgba(255,255,255,.40); text-transform:uppercase; letter-spacing:.08em; margin-bottom:4px; }
.contact-item-value { font-size:16px; font-weight:600; color:#fff; }
/* Contact Form */
.contact-form-wrap {
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    border-radius:12px;
    padding:36px;
}
.contact-form-title {
    font-family: var(--font-head);
    font-size:24px;
    font-weight:700;
    color:#fff;
    text-transform:uppercase;
    margin-bottom:6px;
}
.contact-form-sub { font-size:13px; color:rgba(255,255,255,.40); margin-bottom:28px; }
.contact-form { display:flex; flex-direction:column; gap:16px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.contact-form .form-input {
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.12);
    border-radius:6px;
    padding:14px 16px;
    color:#fff;
    font-size:14px;
    outline:none;
    transition:border-color .2s;
    width:100%;
}
.contact-form textarea.form-input { resize:vertical; min-height:120px; }
.form-submit {
    background: var(--red);
    color:#fff;
    border:none;
    padding:15px 32px;
    border-radius:6px;
    font-weight:700;
    font-size:15px;
    letter-spacing:.04em;
    cursor:pointer;
    transition:all .2s;
    width:100%;
    text-transform:uppercase;
}
.form-submit:hover { background: var(--red-dark); transform:translateY(-1px); }

/* ─────────────────────────────────────────
   FOOTER
───────────────────────────────────────── */
#colophon {
    background:#050505;
    border-top:1px solid rgba(255,255,255,.05);
    padding:60px 20px 30px;
}
.footer-inner {
    max-width:1200px;
    margin:0 auto;
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1.5fr;
    gap:48px;
    margin-bottom:48px;
}
.footer-desc { font-size:14px; color:rgba(255,255,255,.40); line-height:1.80; margin:16px 0 20px; }
.footer-contact-link {
    display:flex;
    align-items:center;
    gap:8px;
    color:rgba(255,255,255,.50);
    font-size:13px;
    margin-bottom:8px;
    text-decoration:none;
}
.footer-contact-link:hover { color: var(--red); }
.footer-contact-link svg { width:14px; height:14px; fill: var(--red); flex-shrink:0; }
.footer-col h4 {
    font-family: var(--font-head);
    font-size:16px;
    font-weight:700;
    color:#fff;
    text-transform:uppercase;
    letter-spacing:.05em;
    margin-bottom:16px;
}
.footer-links { display:flex; flex-direction:column; gap:8px; }
.footer-links a { color:rgba(255,255,255,.45); text-decoration:none; font-size:13px; transition:color .2s; }
.footer-links a:hover { color: var(--red); }
.footer-newsletter {
    background:rgba(255,255,255,.04);
    border-radius:8px;
    padding:20px;
    border:1px solid rgba(255,255,255,.06);
}
.footer-newsletter p { font-size:13px; color:rgba(255,255,255,.50); margin-bottom:12px; }
.newsletter-form { display:flex; gap:8px; }
.newsletter-input {
    flex:1;
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.10);
    border-radius:6px;
    padding:10px 14px;
    color:#fff;
    font-size:13px;
    outline:none;
}
.newsletter-input::placeholder { color:rgba(255,255,255,.30); }
.newsletter-btn {
    background: var(--red);
    color:#fff;
    border:none;
    padding:10px 16px;
    border-radius:6px;
    font-size:12px;
    font-weight:700;
    cursor:pointer;
    transition:background .2s;
}
.newsletter-btn:hover { background: var(--red-dark); }
.footer-bottom {
    max-width:1200px;
    margin:0 auto;
    padding-top:24px;
    border-top:1px solid rgba(255,255,255,.05);
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;
}
.footer-bottom p { font-size:12px; color:rgba(255,255,255,.30); }
.footer-legal { display:flex; gap:16px; }
.footer-legal a { font-size:12px; color:rgba(255,255,255,.30); text-decoration:none; }
.footer-legal a:hover { color: var(--red); }

/* ─────────────────────────────────────────
   FLOATING BUTTONS
───────────────────────────────────────── */
.whatsapp-float {
    position:fixed;
    bottom:28px; right:28px;
    width:58px; height:58px;
    background:#25D366;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 6px 24px rgba(37,211,102,.40);
    z-index:9999;
    text-decoration:none;
    transition:all .3s;
    animation:floatAnim 3s ease-in-out infinite;
}
.whatsapp-float:hover { transform:scale(1.12) !important; animation:none; box-shadow:0 8px 32px rgba(37,211,102,.50); }
@keyframes floatAnim { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
.whatsapp-float svg { width:30px; height:30px; fill:#fff; }
.wa-tooltip {
    position:absolute;
    right:70px;
    background: var(--dark);
    color:#fff;
    font-size:12px;
    font-weight:600;
    padding:6px 12px;
    border-radius:6px;
    white-space:nowrap;
    opacity:0;
    pointer-events:none;
    transition:opacity .2s;
}
.whatsapp-float:hover .wa-tooltip { opacity:1; }
.call-float {
    position:fixed;
    bottom:28px; right:100px;
    width:58px; height:58px;
    background: var(--red);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 6px 24px rgba(232,21,27,.40);
    z-index:9999;
    text-decoration:none;
    transition:all .3s;
}
.call-float:hover { transform:scale(1.12); }
.call-float svg { width:26px; height:26px; fill:#fff; }

/* ─────────────────────────────────────────
   WORDPRESS CORE COMPATIBILITY
───────────────────────────────────────── */
.wp-block-image { margin:1.5rem 0; }
.wp-caption { max-width:100%; }
.alignleft  { float:left; margin-right:1.5rem; }
.alignright { float:right; margin-left:1.5rem; }
.aligncenter { display:block; margin:0 auto; }
.screen-reader-text {
    position:absolute;
    width:1px; height:1px;
    overflow:hidden;
    clip:rect(1px,1px,1px,1px);
}
.skip-link { position:absolute; left:-9999px; }
.skip-link:focus { left:6px; top:7px; z-index:99999; }

/* ─────────────────────────────────────────
   ANIMATIONS
───────────────────────────────────────── */
.animate-in {
    opacity:0;
    transform:translateY(20px);
    transition:opacity .5s ease, transform .5s ease;
}
.animate-in.visible { opacity:1; transform:translateY(0); }

/* ─────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────── */
@media (max-width:1024px) {
    .hero-inner    { grid-template-columns:1fr; gap:48px; }
    .hero-card     { max-width:500px; }
    .why-grid      { grid-template-columns:1fr; gap:48px; }
    .steps-grid    { grid-template-columns:repeat(2,1fr); }
    .contact-grid  { grid-template-columns:1fr; gap:40px; }
    .footer-inner  { grid-template-columns:1fr 1fr; gap:32px; }
}
@media (max-width:768px) {
    section { padding:60px 20px; }
    #primary-navigation { display:none; }
    .menu-toggle { display:flex; }
    #hero { padding:60px 20px; }
    .why-features  { grid-template-columns:1fr 1fr; }
    .form-row      { grid-template-columns:1fr; }
    .footer-inner  { grid-template-columns:1fr; }
    #top-bar .top-inner { flex-direction:column; align-items:flex-start; }
    .hero-stats    { gap:20px; }
    .steps-grid    { grid-template-columns:1fr; }
    .call-float    { display:none; }
}
@media (max-width:480px) {
    .hero-buttons  { flex-direction:column; }
    .cta-buttons   { flex-direction:column; align-items:center; }
    .why-features  { grid-template-columns:1fr; }
    .footer-bottom { flex-direction:column; text-align:center; }
}