/*
Theme Name: Spotix Dynamics
Theme URI: https://spotixdynamics.com
Author: Spotix Dynamics
Description: One Spot. Endless Solutions. Custom WordPress theme for Spotix Dynamics — marketing, media production and business growth solutions. Ported from the Hostinger Horizons export.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: spotix-dynamics
*/

/* ============ Design tokens ============ */
:root{
  --primary:#053852;          /* hsl(200 89% 17%) deep blue */
  --secondary:#333333;        /* hsl(0 0% 20%) charcoal */
  --accent:#FFE600;           /* hsl(60 100% 50%) yellow */
  --red:#C70000;              /* hsl(0 100% 39%) brand red */
  --red-dark:#A30000;
  --gray-50:#f9fafb; --gray-100:#f3f4f6; --gray-200:#e5e7eb; --gray-300:#d1d5db;
  --gray-600:#4b5563; --gray-700:#374151; --gray-900:#111827;
  --radius:0.75rem;
  --shadow-md:0 4px 6px -1px rgb(0 0 0 / .1),0 2px 4px -2px rgb(0 0 0 / .1);
  --shadow-lg:0 10px 15px -3px rgb(0 0 0 / .1),0 4px 6px -4px rgb(0 0 0 / .1);
  --shadow-xl:0 20px 25px -5px rgb(0 0 0 / .1),0 8px 10px -6px rgb(0 0 0 / .1);
  --shadow-2xl:0 25px 50px -12px rgb(0 0 0 / .25);
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
}

/* ============ Reset / base ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{font-family:var(--font);color:var(--gray-900);background:#fff;line-height:1.6;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
.container-custom{max-width:1200px;margin:0 auto;padding:0 1.25rem}
.section-padding{padding:5rem 0}
@media(min-width:768px){.section-padding{padding:6.5rem 0}}
.text-red{color:var(--red)}
.section-head{text-align:center;margin-bottom:4rem}
.section-head h2{font-size:clamp(2rem,4.5vw,3rem);font-weight:800;letter-spacing:-.025em;margin-bottom:1.25rem}
.section-head p{font-size:1.15rem;color:var(--gray-600);max-width:46rem;margin:0 auto}
.bg-gray{background:var(--gray-50)}

/* ============ Buttons ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-weight:700;border-radius:var(--radius);padding:1rem 2rem;font-size:1.05rem;transition:all .3s ease;line-height:1.2;text-align:center}
.btn:active{transform:scale(.98)}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-dark);box-shadow:0 12px 24px rgb(199 0 0 / .25);transform:translateY(-3px)}
.btn-ghost{background:rgb(255 255 255 / .1);color:#fff;border:2px solid rgb(255 255 255 / .3);backdrop-filter:blur(4px)}
.btn-ghost:hover{background:rgb(255 255 255 / .2);transform:translateY(-3px)}
.btn-white{background:#fff;color:var(--red)}
.btn-white:hover{background:var(--gray-100);transform:translateY(-3px);box-shadow:var(--shadow-xl)}
.btn-green{background:#22c55e;color:#fff}
.btn-green:hover{background:#16a34a;transform:translateY(-3px);box-shadow:var(--shadow-xl)}
.btn-outline{background:#fff;color:var(--gray-900);border:2px solid var(--gray-200);width:100%;padding:1.6rem 2rem}
.btn-outline:hover{border-color:var(--red);color:var(--red);background:var(--gray-50);transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.btn svg{width:1.25rem;height:1.25rem;flex:none}

/* ============ Header ============ */
.site-header{position:fixed;inset:0 0 auto 0;z-index:50;background:#fff;transition:all .3s ease;padding:1rem 0}
.topbar{background:var(--red);color:#fff;padding:.5rem 0;font-size:.875rem;transition:transform .3s ease,opacity .3s}
.topbar-inner{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:.35rem}
@media(min-width:640px){.topbar-inner{flex-direction:row}}
.topbar a{display:inline-flex;align-items:center;gap:.4rem}
.topbar a:hover{color:var(--accent)}
.site-header.scrolled{box-shadow:var(--shadow-md);padding:.5rem 0}
.site-header.scrolled .topbar{display:none}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:.5rem}
.brand{display:flex;align-items:center;gap:.75rem}
.brand img{height:2.75rem;width:auto;object-fit:contain}
.brand-name{font-size:1.4rem;font-weight:800;color:var(--red);display:none}
.brand-name span{color:var(--gray-900)}
@media(min-width:640px){.brand-name{display:block}}
.nav-links{display:none;align-items:center;gap:2rem}
.nav-links a{font-weight:500;color:var(--gray-700);transition:color .2s}
.nav-links a:hover,.nav-links a.active{color:var(--red)}
.nav-cta{display:none}
@media(min-width:1024px){.nav-links{display:flex}.nav-cta{display:block}.menu-toggle{display:none}}
.nav-cta .btn{padding:.7rem 1.5rem;font-size:.95rem}
.menu-toggle{padding:.5rem;color:var(--gray-700)}
.menu-toggle:hover{color:var(--red)}
.menu-toggle svg{width:1.5rem;height:1.5rem}
.mobile-menu{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;box-shadow:var(--shadow-xl);border-top:1px solid var(--gray-200);padding:1.25rem;flex-direction:column;gap:1rem}
.mobile-menu.open{display:flex}
.mobile-menu a{font-weight:500;color:var(--gray-700)}
.mobile-menu a:hover{color:var(--red)}
.mobile-menu .btn{width:100%}

/* ============ Hero ============ */
.hero{position:relative;min-height:100dvh;display:flex;align-items:center;overflow:hidden;color:#fff;padding-top:8rem;padding-bottom:4rem}
.hero-bg{position:absolute;inset:0;background-image:url('https://images.unsplash.com/photo-1697638164340-6c5fc558bdf2?auto=format&fit=crop&w=1920&q=70');background-size:cover;background-position:center}
.hero-bg::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgb(199 0 0 / .9),rgb(17 24 39 / .82),rgb(17 24 39 / .92));mix-blend-mode:multiply}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#111827,transparent 55%)}
.hero-content{position:relative;z-index:2;max-width:56rem}
.hero h1{font-size:clamp(2.6rem,6.5vw,4.5rem);font-weight:800;letter-spacing:-.03em;line-height:1.08;margin-bottom:1.5rem}
.hero h1 .accent{color:var(--accent)}
.hero .tagline{font-size:clamp(1.35rem,3vw,1.9rem);font-weight:700;color:rgb(255 255 255 / .92);margin-bottom:1.5rem}
.hero .lede{font-size:1.15rem;color:rgb(255 255 255 / .82);max-width:40rem;margin-bottom:2.5rem;font-weight:500}
.hero-ctas{display:flex;flex-direction:column;gap:1rem;margin-bottom:3.5rem}
@media(min-width:640px){.hero-ctas{flex-direction:row}}
.trust-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem;text-align:center}
@media(min-width:768px){.trust-grid{grid-template-columns:repeat(5,1fr)}}
.trust-grid .num{font-size:1.7rem;font-weight:700}
.trust-grid .lbl{font-size:.85rem;color:rgb(255 255 255 / .8)}

/* ============ About ============ */
.about-wrap{max-width:56rem;margin:0 auto;text-align:center}
.about-wrap p.big{font-size:1.25rem;color:var(--gray-600);margin-bottom:2.5rem}
.about-banner{background:linear-gradient(90deg,var(--primary),var(--red));color:#fff;border-radius:1.5rem;padding:3rem 2rem;box-shadow:var(--shadow-2xl);transition:transform .5s ease}
.about-banner:hover{transform:translateY(-8px)}
.about-banner p{font-size:clamp(1.6rem,3.5vw,2.4rem);font-weight:800;letter-spacing:-.02em}

/* ============ Cards grids ============ */
.grid-3{display:grid;grid-template-columns:1fr;gap:2rem}
@media(min-width:768px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.grid-3{grid-template-columns:repeat(3,1fr)}}
.grid-2{display:grid;grid-template-columns:1fr;gap:2rem}
@media(min-width:768px){.grid-2{grid-template-columns:repeat(2,1fr)}}

/* Service card */
.service-card{background:#fff;border:1px solid var(--gray-100);border-radius:1rem;box-shadow:var(--shadow-md);padding:2rem;display:flex;flex-direction:column;transition:all .3s ease}
.service-card:hover{box-shadow:var(--shadow-xl);transform:translateY(-6px)}
.service-icon{width:3.5rem;height:3.5rem;border-radius:.9rem;background:rgb(199 0 0 / .08);display:flex;align-items:center;justify-content:center;color:var(--red);margin-bottom:1.25rem}
.service-icon svg{width:1.9rem;height:1.9rem}
.service-card h3{font-size:1.4rem;font-weight:800;margin-bottom:.25rem}
.service-card .pricing{color:var(--red);font-weight:700;margin-bottom:1.25rem}
.service-card ul{display:grid;gap:.5rem;max-height:16rem;overflow-y:auto;padding-right:.25rem;flex:1}
.service-card ul li{display:flex;gap:.5rem;align-items:flex-start;color:var(--gray-700);font-size:.95rem}
.service-card ul li::before{content:"✓";color:var(--red);font-weight:800;flex:none}
.service-card .btn{margin-top:1.5rem;width:100%}

/* Feature card */
.feature-card{background:#fff;border:1px solid var(--gray-100);border-radius:1rem;box-shadow:var(--shadow-md);padding:2rem;transition:all .3s ease}
.feature-card:hover{box-shadow:var(--shadow-xl);transform:translateY(-6px)}
.feature-card h3{font-size:1.25rem;font-weight:800;margin:1rem 0 .5rem}
.feature-card p{color:var(--gray-600)}

/* Stat card */
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
@media(min-width:1024px){.stats-grid{grid-template-columns:repeat(5,1fr)}}
.stat-card{background:#fff;border:1px solid var(--gray-100);border-radius:1rem;box-shadow:var(--shadow-md);padding:2rem 1rem;text-align:center;transition:all .3s ease}
.stat-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.stat-card.featured{background:linear-gradient(135deg,var(--red),var(--red-dark));color:#fff}
.stat-card .num{font-size:2.2rem;font-weight:800}
.stat-card .lbl{color:var(--gray-600);font-weight:600;font-size:.95rem}
.stat-card.featured .lbl{color:rgb(255 255 255 / .85)}
.stat-card svg{width:2rem;height:2rem;margin:0 auto .75rem;color:var(--red)}
.stat-card.featured svg{color:#fff}

/* Case study card */
.case-card{background:#fff;border:1px solid var(--gray-100);border-radius:1rem;box-shadow:var(--shadow-md);overflow:hidden;display:flex;flex-direction:column;transition:all .3s ease}
.case-card:hover{box-shadow:var(--shadow-xl);transform:translateY(-6px)}
.case-card .thumb{height:12rem;background-size:cover;background-position:center}
.case-card .body{padding:1.75rem;display:flex;flex-direction:column;gap:.9rem;flex:1}
.case-card h3{font-size:1.4rem;font-weight:800;color:var(--red)}
.case-card h4{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--gray-600);margin-bottom:.15rem}
.case-card p{color:var(--gray-700);font-size:.95rem}
.case-card .results{background:var(--gray-50);border-left:4px solid var(--red);padding:.75rem 1rem;border-radius:.5rem;font-weight:700;color:var(--gray-900)}

/* Testimonial card */
.testi-grid{display:grid;grid-template-columns:1fr;gap:2rem}
@media(min-width:768px){.testi-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.testi-grid{grid-template-columns:repeat(3,1fr)}}
.testi-card{background:#fff;border:1px solid var(--gray-100);border-radius:1rem;box-shadow:var(--shadow-md);padding:2rem;transition:all .3s}
.testi-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.testi-card .stars{color:#f59e0b;letter-spacing:.15em;margin-bottom:1rem;font-size:1.1rem}
.testi-card blockquote{color:var(--gray-700);margin-bottom:1.5rem;font-style:italic}
.testi-card .who{display:flex;align-items:center;gap:.9rem}
.testi-card .who img{width:3rem;height:3rem;border-radius:50%;object-fit:cover}
.testi-card .who .name{font-weight:800}
.testi-card .who .title{font-size:.85rem;color:var(--gray-600)}

/* Client logo marquee */
.marquee{overflow:hidden;position:relative;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:2rem;width:max-content;animation:marquee 30s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.logo-pill{background:#fff;border:1px solid var(--gray-200);border-radius:.9rem;box-shadow:var(--shadow-md);padding:1.25rem 2.5rem;font-size:1.25rem;font-weight:800;color:var(--gray-700);white-space:nowrap}

/* Careers */
.careers-grid{display:grid;grid-template-columns:1fr;gap:1.5rem;max-width:62rem;margin:0 auto}
@media(min-width:768px){.careers-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.careers-grid{grid-template-columns:repeat(3,1fr)}}

/* FAQ */
.faq-wrap{max-width:56rem;margin:0 auto;display:grid;gap:1rem}
.faq-item{background:#fff;border:1px solid var(--gray-100);border-radius:.9rem;box-shadow:var(--shadow-md);overflow:hidden}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:1rem;text-align:left;font-weight:700;font-size:1.05rem;color:var(--gray-900);padding:1.5rem}
.faq-q:hover{color:var(--red)}
.faq-q .chev{transition:transform .3s;flex:none;width:1.25rem;height:1.25rem}
.faq-item.open .faq-q .chev{transform:rotate(180deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.faq-a-inner{padding:0 1.5rem 1.5rem;color:var(--gray-700)}

/* CTA band */
.cta-band{background:linear-gradient(135deg,var(--primary),var(--red));color:#fff;text-align:center;position:relative;overflow:hidden}
.cta-band h2{font-size:clamp(2rem,5vw,3.5rem);font-weight:800;letter-spacing:-.025em;margin-bottom:1.75rem}
.cta-band p{font-size:1.3rem;color:rgb(255 255 255 / .9);max-width:46rem;margin:0 auto 3rem;font-weight:500}
.cta-band .btn-row{display:flex;flex-direction:column;gap:1.25rem;justify-content:center}
@media(min-width:640px){.cta-band .btn-row{flex-direction:row}}

/* ============ Contact form ============ */
.contact-card{background:#fff;border:1px solid var(--gray-100);border-radius:1.25rem;box-shadow:var(--shadow-xl);padding:2rem;max-width:48rem;margin:0 auto}
.contact-card h3{font-size:1.5rem;font-weight:800;margin-bottom:1.5rem}
.form-grid{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media(min-width:768px){.form-grid{grid-template-columns:repeat(2,1fr)}}
.field label{display:block;font-weight:600;margin-bottom:.5rem}
.field input,.field select,.field textarea{width:100%;background:#fff;color:var(--gray-900);border:1px solid var(--gray-300);border-radius:.6rem;padding:.8rem 1rem;font-size:1rem;font-family:inherit;transition:border-color .2s,box-shadow .2s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgb(199 0 0 / .12)}
.form-actions{display:flex;flex-direction:column;gap:1rem;margin-top:.5rem}
@media(min-width:640px){.form-actions{flex-direction:row}.form-actions .btn{flex:1}}
.form-notice{border-radius:.75rem;padding:1rem 1.25rem;margin-bottom:1.5rem;font-weight:600}
.form-notice.success{background:#dcfce7;color:#166534;border:1px solid #86efac}
.form-notice.error{background:#fee2e2;color:#991b1b;border:1px solid #fca5a5}
.hp-field{position:absolute!important;left:-9999px!important;opacity:0}

/* ============ Contact page ============ */
.page-hero{background:linear-gradient(135deg,var(--primary),var(--red));color:#fff;padding:11rem 0 5rem;text-align:center}
.page-hero h1{font-size:clamp(2.5rem,6vw,4rem);font-weight:800;letter-spacing:-.03em;margin-bottom:1rem}
.page-hero p{font-size:1.25rem;color:rgb(255 255 255 / .9);max-width:44rem;margin:0 auto}
.contact-info-list{display:grid;gap:1.25rem}
.contact-info-item{display:flex;align-items:flex-start;gap:1rem;background:#fff;border:1px solid var(--gray-100);border-radius:1rem;box-shadow:var(--shadow-md);padding:1.5rem;transition:all .3s}
.contact-info-item:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.contact-info-item .ico{flex:none;width:3rem;height:3rem;border-radius:.8rem;background:rgb(199 0 0 / .08);display:flex;align-items:center;justify-content:center;color:var(--red)}
.contact-info-item .ico svg{width:1.4rem;height:1.4rem}
.contact-info-item .t{font-weight:800}
.contact-info-item .d{color:var(--gray-600);font-size:.95rem}
.office-card{background:#fff;border:1px solid var(--gray-100);border-radius:1.25rem;box-shadow:var(--shadow-lg);padding:2rem;transition:box-shadow .3s}
.office-card:hover{box-shadow:var(--shadow-xl)}
.office-card h3{font-size:1.5rem;font-weight:800;margin-bottom:.4rem}
.office-card p{color:var(--gray-700);margin-bottom:1.5rem}
.office-card .btn{width:100%}

/* ============ Footer ============ */
.site-footer{background:var(--secondary);color:#fff;border-top:4px solid var(--red)}
.footer-grid{display:grid;grid-template-columns:1fr;gap:3rem;padding:4.5rem 0 3rem}
@media(min-width:768px){.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.footer-grid{grid-template-columns:4fr 2fr 3fr 3fr}}
.footer-logo{display:inline-block;background:#fff;border-radius:1rem;padding:1rem;margin-bottom:1.5rem}
.footer-logo img{height:4.5rem;width:auto;object-fit:contain}
.site-footer p.tag{color:rgb(255 255 255 / .8);max-width:24rem;margin-bottom:2rem}
.socials{display:flex;gap:1rem}
.socials a{width:2.9rem;height:2.9rem;border-radius:50%;background:rgb(255 255 255 / .1);display:flex;align-items:center;justify-content:center;transition:all .3s}
.socials a:hover{background:var(--red);transform:translateY(-3px)}
.socials svg{width:1.2rem;height:1.2rem}
.site-footer h3{font-size:1.2rem;font-weight:800;margin-bottom:1.5rem}
.footer-links li{margin-bottom:1rem}
.footer-links a{color:rgb(255 255 255 / .7);display:flex;align-items:center;gap:.6rem;transition:color .2s}
.footer-links a::before{content:"";width:.4rem;height:.4rem;border-radius:50%;background:var(--red);flex:none}
.footer-links a:hover{color:var(--accent)}
.footer-contact a,.footer-office{display:flex;align-items:flex-start;gap:.8rem;color:rgb(255 255 255 / .8);margin-bottom:1rem}
.footer-contact a:hover{color:var(--accent)}
.footer-contact .ico,.footer-office .ico{flex:none;background:rgb(255 255 255 / .1);border-radius:.5rem;padding:.5rem;display:flex}
.footer-contact svg,.footer-office svg{width:1rem;height:1rem}
.footer-office .ico svg{color:var(--red)}
.footer-office .city{font-weight:700;color:#fff}
.footer-office .addr{font-size:.85rem;color:rgb(255 255 255 / .6)}
.footer-offices{border-top:1px solid rgb(255 255 255 / .1);padding-top:1.25rem;margin-top:1.25rem}
.footer-bottom{border-top:1px solid rgb(255 255 255 / .1);padding:2rem 0;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:1rem;font-size:.875rem;color:rgb(255 255 255 / .6)}
@media(min-width:768px){.footer-bottom{flex-direction:row}}
.footer-bottom a:hover{color:#fff}
.footer-bottom .links{display:flex;gap:2rem}

/* ============ Scroll reveal ============ */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

/* WP admin bar offset */
body.admin-bar .site-header{top:32px}
@media(max-width:782px){body.admin-bar .site-header{top:46px}}