/*
Theme Name: TOWFORCE Demo
Theme URI: https://example.com/
Author: TEN28digital
Description: Premium cinematic towing and roadside assistance WordPress demo theme.
Version: 1.0.0
License: GPL-2.0-or-later
Text Domain: towforce-demo
*/
:root{--green:#25e67c;--green2:#0bb65d;--ink:#050d13;--navy:#081824;--muted:#9eb1b7;--white:#f5f8f8;--line:rgba(255,255,255,.1);--glass:rgba(7,20,30,.7)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ink);color:var(--white);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.6;overflow-x:hidden}a{color:inherit;text-decoration:none}img,video{max-width:100%}.container{width:min(1180px,calc(100% - 32px));margin:auto}.site-main{min-height:60vh}
.header{position:fixed;inset:0 0 auto;z-index:1000;padding:18px 0;transition:.35s}.header.scrolled{padding:10px 0;background:rgba(2,9,14,.86);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}.nav{display:flex;justify-content:space-between;align-items:center;gap:20px}.brand{display:flex;align-items:center;gap:10px;font-weight:950;letter-spacing:-.05em;font-size:1.25rem}.brand-mark{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--green);color:#02130a;box-shadow:0 0 32px rgba(37,230,124,.3)}.brand small{display:block;color:var(--green);font-size:.55rem;letter-spacing:.16em;text-transform:uppercase}.menu{display:flex;gap:26px;align-items:center;font-size:.9rem}.menu a{transition:.2s}.menu a:hover{color:var(--green)}.nav-cta{padding:10px 16px;border:1px solid rgba(37,230,124,.3);border-radius:999px;background:rgba(37,230,124,.08)}.toggle{display:none;background:none;border:0;color:#fff;font-size:1.6rem}
.hero{min-height:100svh;position:relative;display:flex;align-items:center;overflow:hidden;isolation:isolate;background:#030b11}.hero-video,.hero-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-4}.hero-fallback{background:radial-gradient(circle at 70% 35%,rgba(37,230,124,.2),transparent 23%),linear-gradient(125deg,#06141f,#102b3a 55%,#03100b)}.shade{position:absolute;inset:0;z-index:-3;background:linear-gradient(90deg,rgba(2,8,12,.95),rgba(2,8,12,.7) 48%,rgba(2,8,12,.3)),linear-gradient(0deg,rgba(2,8,12,.92),transparent 48%)}.grid{position:absolute;inset:0;z-index:-2;opacity:.1;background-image:linear-gradient(rgba(37,230,124,.4) 1px,transparent 1px),linear-gradient(90deg,rgba(37,230,124,.4) 1px,transparent 1px);background-size:75px 75px;mask-image:linear-gradient(transparent,#000 20%,#000 75%,transparent)}
.hero-content{padding:150px 0 90px;max-width:820px}.eyebrow,.kicker{color:var(--green);font-size:.72rem;font-weight:900;letter-spacing:.18em;text-transform:uppercase}.eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:18px}.eyebrow:before{content:"";width:28px;height:2px;background:var(--green);box-shadow:0 0 14px var(--green)}h1{font-size:clamp(3.5rem,8.5vw,7.5rem);line-height:.88;letter-spacing:-.07em;margin:0 0 25px;font-weight:950}h1 em,h2 em{font-style:normal;color:var(--green);text-shadow:0 0 28px rgba(37,230,124,.18)}.hero p{max-width:660px;color:#c8d4d7;font-size:clamp(1rem,2vw,1.22rem);margin:0 0 32px}.actions{display:flex;gap:12px;flex-wrap:wrap}.btn{min-height:54px;padding:0 22px;display:inline-flex;align-items:center;justify-content:center;border-radius:14px;font-weight:900;transition:.25s;border:1px solid transparent}.btn:hover{transform:translateY(-3px)}.primary{background:var(--green);color:#02130a;box-shadow:0 12px 40px rgba(37,230,124,.22)}.ghost{background:rgba(255,255,255,.06);border-color:var(--line);backdrop-filter:blur(10px)}.hero-pills{display:flex;gap:9px;flex-wrap:wrap;margin-top:30px}.pill{padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:rgba(0,0,0,.22);color:#d9e4e6;font-size:.78rem}.scroll{position:absolute;bottom:25px;left:50%;transform:translateX(-50%);font-size:.65rem;letter-spacing:.16em;text-transform:uppercase;color:#9fb1b6;display:flex;flex-direction:column;align-items:center;gap:7px}.scroll i{width:1px;height:45px;background:linear-gradient(var(--green),transparent);animation:pulse 1.7s infinite}@keyframes pulse{50%{transform:scaleY(.45);opacity:.4}}
.section{padding:105px 0}.dark{background:#07141f}.heading{max-width:760px;margin-bottom:45px}.heading h2{font-size:clamp(2.3rem,5vw,4.5rem);line-height:.96;letter-spacing:-.06em;margin:10px 0 16px}.heading p{color:var(--muted);font-size:1.04rem}
.services{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.card{min-height:310px;padding:27px;border-radius:25px;background:linear-gradient(145deg,rgba(17,39,52,.82),rgba(5,18,28,.88));border:1px solid var(--line);position:relative;overflow:hidden;transition:.35s}.card:after{content:"";position:absolute;width:180px;height:180px;right:-90px;top:-90px;background:radial-gradient(circle,rgba(37,230,124,.2),transparent 68%)}.card:hover{transform:translateY(-9px);border-color:rgba(37,230,124,.32);box-shadow:0 25px 80px rgba(0,0,0,.4)}.icon{width:58px;height:58px;display:grid;place-items:center;border-radius:17px;background:rgba(37,230,124,.1);border:1px solid rgba(37,230,124,.2);font-size:1.7rem;margin-bottom:70px}.card h3{margin:0 0 8px;font-size:1.35rem}.card p{margin:0;color:var(--muted);font-size:.9rem}.num{position:absolute;top:23px;right:23px;color:rgba(255,255,255,.2);font-weight:900;font-size:.72rem}
.split{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.visual{min-height:520px;border-radius:32px;border:1px solid var(--line);position:relative;overflow:hidden;background:radial-gradient(circle at 50% 40%,rgba(37,230,124,.17),transparent 25%),linear-gradient(145deg,#0d2a39,#041018);box-shadow:0 30px 100px rgba(0,0,0,.4)}.tow-truck{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:9rem;filter:drop-shadow(0 0 35px rgba(37,230,124,.25));animation:float 4.5s ease-in-out infinite}@keyframes float{50%{transform:translate(-50%,-57%)}}.circle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:1px solid rgba(37,230,124,.2);border-radius:50%;animation:spin 22s linear infinite}.c1{width:300px;height:300px}.c2{width:440px;height:440px;animation-direction:reverse;animation-duration:30s}@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.checks{list-style:none;padding:0;margin:28px 0;display:grid;gap:14px}.checks li{display:flex;gap:12px;color:#dce6e7}.checks li:before{content:"✓";width:25px;height:25px;flex:none;border-radius:50%;display:grid;place-items:center;background:rgba(37,230,124,.1);color:var(--green);font-weight:900}
.emergency{padding:90px 0;background:radial-gradient(circle at 75% 40%,rgba(37,230,124,.16),transparent 30%),#06131d}.emergency-inner{display:flex;justify-content:space-between;align-items:center;gap:30px}.emergency h2{font-size:clamp(2.5rem,6vw,5.2rem);line-height:.93;letter-spacing:-.065em;margin:10px 0}.emergency p{color:var(--muted);max-width:620px}
.area{display:grid;grid-template-columns:1.1fr .9fr;gap:20px}.area-card{min-height:360px;border:1px solid var(--line);border-radius:28px;padding:30px;background:linear-gradient(145deg,#0b2230,#06121c)}.map{height:100%;min-height:360px;border-radius:20px;background:radial-gradient(circle at 55% 45%,rgba(37,230,124,.2),transparent 9%),repeating-linear-gradient(25deg,rgba(255,255,255,.04) 0 1px,transparent 1px 45px),repeating-linear-gradient(115deg,rgba(255,255,255,.03) 0 1px,transparent 1px 55px);position:relative;overflow:hidden}.pin{position:absolute;left:55%;top:44%;width:25px;height:25px;border-radius:50% 50% 50% 0;background:var(--green);transform:rotate(-45deg);box-shadow:0 0 30px rgba(37,230,124,.5)}.pin:after{content:"";position:absolute;width:9px;height:9px;background:#06131d;border-radius:50%;left:8px;top:8px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:24px;overflow:hidden}.stat{padding:30px;background:#081924;border-right:1px solid var(--line)}.stat:last-child{border:0}.stat strong{display:block;color:var(--green);font-size:2.7rem;line-height:1}.stat span{color:var(--muted);font-size:.85rem}
.footer{padding:40px 0;background:#030a10;border-top:1px solid var(--line);color:#91a4a9}.footer-inner{display:flex;justify-content:space-between;gap:20px}.footer-brand{font-weight:950;color:#fff}.footer-brand span{color:var(--green)}
.reveal{opacity:0;transform:translateY(35px);transition:.8s}.reveal.show{opacity:1;transform:none}.mobile-bar{display:none}
@media(max-width:950px){.services{grid-template-columns:repeat(2,1fr)}.split,.area{grid-template-columns:1fr}.visual{min-height:400px}.menu{display:none;position:absolute;top:70px;left:16px;right:16px;padding:18px;flex-direction:column;align-items:stretch;background:rgba(3,12,19,.96);border:1px solid var(--line);border-radius:20px}.menu.open{display:flex}.toggle{display:block}.stats{grid-template-columns:repeat(2,1fr)}.stat{border-bottom:1px solid var(--line)}}
@media(max-width:600px){.container{width:min(100% - 26px,1180px)}.hero-content{padding-top:125px}.hero h1{font-size:clamp(3.1rem,16vw,5rem)}.hero-video{opacity:.48}.services{grid-template-columns:1fr}.card{min-height:275px}.icon{margin-bottom:55px}.stats{grid-template-columns:1fr 1fr}.stat{padding:22px 15px}.stat strong{font-size:2.1rem}.emergency-inner,.footer-inner{flex-direction:column;align-items:flex-start}.mobile-bar{display:flex;position:fixed;left:10px;right:10px;bottom:10px;z-index:1200;gap:8px}.mobile-bar a{flex:1;min-height:50px;display:grid;place-items:center;border-radius:14px;font-weight:950;font-size:.8rem}.m-call{background:#fff;color:#03110a}.m-wa{background:var(--green);color:#03110a}.footer{padding-bottom:85px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}