/* ===================================================================
   THE777 — Automotive Services
   High-tech red / black / white design system
=================================================================== */
:root{
  --red:#E8262E; --red-2:#FF3B41; --red-deep:#B00E16; --red-glow:rgba(232,38,46,.55);
  --bg:#08080C; --bg-2:#0D0D13; --panel:#111119; --panel-2:#15151f;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16);
  --white:#FFFFFF; --ash:#C3C3CE; --mute:#83838F;
  --font-d:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  --font-b:"Inter",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --maxw:1240px; --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg); color:var(--white); font-family:var(--font-b); line-height:1.6; overflow-x:hidden; -webkit-font-smoothing:antialiased}
img{display:block; max-width:100%; height:auto}
a{color:inherit; text-decoration:none}
em{font-style:italic; color:var(--red-2)}
.accent{color:var(--red)}
::selection{background:var(--red); color:#fff}

/* background field */
#bubbles{position:fixed; inset:0; z-index:0; width:100%; height:100%; pointer-events:none}
body::before{content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(60vw 60vw at 12% -5%, rgba(232,38,46,.16), transparent 60%),
    radial-gradient(55vw 55vw at 100% 40%, rgba(232,38,46,.10), transparent 60%),
    radial-gradient(50vw 50vw at 20% 105%, rgba(232,38,46,.08), transparent 60%);}
main,.footer{position:relative; z-index:2}

/* checkered-flag motif */
.checker{position:absolute; z-index:1; pointer-events:none; opacity:.9;
  background-image:conic-gradient(var(--red) 0 25%, transparent 0 50%, var(--red) 0 75%, transparent 0);
  background-size:46px 46px;}
.checker-hero{top:0; left:0; width:min(340px,42vw); height:150px;
  -webkit-mask-image:linear-gradient(135deg,#000,transparent 75%); mask-image:linear-gradient(135deg,#000,transparent 75%); opacity:.55}
.checker-contact{top:0; right:0; width:min(300px,40vw); height:120px;
  -webkit-mask-image:linear-gradient(225deg,#000,transparent 75%); mask-image:linear-gradient(225deg,#000,transparent 75%); opacity:.4}

/* WhatsApp floating button */
.wa-fab{position:fixed; right:22px; bottom:22px; z-index:90; display:flex; align-items:center; gap:0;
  width:58px; height:58px; border-radius:50%; background:linear-gradient(150deg,#25D366,#128C7E); color:#fff;
  box-shadow:0 12px 30px -8px rgba(37,211,102,.6), 0 0 0 0 rgba(37,211,102,.5);
  transition:width .35s var(--ease),border-radius .35s var(--ease),transform .25s var(--ease),box-shadow .3s;
  overflow:hidden; padding:0 16px; animation:waPulse 2.6s infinite}
.wa-fab svg{width:30px; height:30px; flex:none}
.wa-tip{white-space:nowrap; font-family:var(--font-d); font-weight:600; font-size:.92rem; max-width:0; opacity:0; margin-left:0; transition:max-width .35s var(--ease),opacity .3s,margin-left .35s}
.wa-fab:hover{width:220px; border-radius:32px; transform:translateY(-2px)}
.wa-fab:hover .wa-tip{max-width:160px; opacity:1; margin-left:12px}
@keyframes waPulse{0%{box-shadow:0 12px 30px -8px rgba(37,211,102,.6),0 0 0 0 rgba(37,211,102,.5)}
  70%{box-shadow:0 12px 30px -8px rgba(37,211,102,.6),0 0 0 16px rgba(37,211,102,0)}
  100%{box-shadow:0 12px 30px -8px rgba(37,211,102,.6),0 0 0 0 rgba(37,211,102,0)}}
@media (prefers-reduced-motion:reduce){ .wa-fab{animation:none} }
.ccard-wa:hover{border-color:rgba(37,211,102,.55)}
.ccard-wa span{color:#25D366}

/* scroll progress */
.scroll-bar{position:fixed; top:0; left:0; height:3px; width:0%; z-index:100;
  background:linear-gradient(90deg,var(--red-deep),var(--red),var(--red-2)); box-shadow:0 0 14px var(--red-glow); transition:width .1s linear}

/* cursor glow */
.cursor-glow{position:fixed; top:0; left:0; width:26px; height:26px; z-index:99; border-radius:50%;
  pointer-events:none; background:radial-gradient(circle,var(--red-2),transparent 70%); mix-blend-mode:screen;
  transform:translate(-50%,-50%); transition:width .2s,height .2s,opacity .3s; opacity:0}
@media (hover:hover){ .cursor-glow{opacity:.9} }

/* ===================== NAV ===================== */
.nav{position:fixed; top:0; left:0; right:0; z-index:60; display:flex; align-items:center; justify-content:space-between;
  padding:18px clamp(18px,4vw,46px); transition:padding .4s var(--ease),background .4s,backdrop-filter .4s,border-color .4s; border-bottom:1px solid transparent}
.nav.scrolled{padding:11px clamp(18px,4vw,46px); background:rgba(8,8,12,.72); backdrop-filter:blur(14px) saturate(1.4); border-bottom:1px solid var(--line)}
.brand{display:flex; align-items:center; gap:12px}
.brand img{height:42px; width:auto; transition:height .4s var(--ease); filter:drop-shadow(0 4px 10px rgba(0,0,0,.5))}
.nav.scrolled .brand img{height:34px}
.brand-word{font-family:var(--font-d); font-weight:700; font-size:1.15rem; letter-spacing:.02em; color:#fff}
.brand-word b{color:var(--red)}
.nav-links{display:flex; align-items:center; gap:6px}
.nav-links a{font-family:var(--font-d); font-size:.9rem; font-weight:500; color:var(--ash); padding:9px 14px; border-radius:9px; position:relative; transition:color .25s}
.nav-links a:not(.nav-cta):hover{color:#fff}
.nav-links a:not(.nav-cta)::after{content:""; position:absolute; left:14px; right:14px; bottom:4px; height:2px; background:var(--red); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease)}
.nav-links a:not(.nav-cta):hover::after{transform:scaleX(1)}
.nav-cta{background:var(--red); color:#fff !important; font-weight:600; border:1px solid var(--red-2); box-shadow:0 6px 22px -8px var(--red-glow); transition:transform .25s var(--ease),box-shadow .25s,background .25s}
.nav-cta:hover{background:var(--red-2); transform:translateY(-2px)}
.nav-toggle{display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px}
.nav-toggle span{width:26px; height:2px; background:#fff; border-radius:2px; transition:.3s}

/* ===================== TYPO / HELPERS ===================== */
.section{max-width:var(--maxw); margin:0 auto; padding:clamp(76px,10vw,140px) clamp(20px,5vw,40px); position:relative}
.kicker{display:inline-block; font-family:var(--font-d); font-size:.78rem; font-weight:600; letter-spacing:.32em; text-transform:uppercase; color:var(--red); margin-bottom:18px}
.sec-head{max-width:760px; margin-bottom:clamp(40px,6vw,68px)}
.sec-head.center{margin-left:auto; margin-right:auto; text-align:center}
.sec-head.center .lead{margin-left:auto; margin-right:auto}
.sec-head h2,.section h2{font-family:var(--font-d); font-weight:700; line-height:1.02; font-size:clamp(2.1rem,5.2vw,4rem); letter-spacing:-.02em; margin-bottom:18px}
h3{font-family:var(--font-d); font-weight:600; letter-spacing:-.01em}
h4{font-family:var(--font-d); font-weight:600}
.lead{font-size:clamp(1.02rem,1.5vw,1.22rem); color:var(--ash); max-width:640px}

.btn{display:inline-flex; align-items:center; gap:10px; font-family:var(--font-d); font-weight:600; font-size:.98rem;
  padding:15px 28px; border-radius:12px; position:relative; overflow:hidden; transition:transform .3s var(--ease),box-shadow .3s,background .3s,border-color .3s; will-change:transform}
.btn .arr{transition:transform .3s var(--ease)}
.btn:hover .arr{transform:translateX(6px)}
.btn-red{background:var(--red); color:#fff; border:1px solid var(--red-2); box-shadow:0 14px 34px -12px var(--red-glow)}
.btn-red:hover{background:var(--red-2); box-shadow:0 20px 46px -12px var(--red-glow)}
.btn-ghost{background:rgba(255,255,255,.04); color:#fff; border:1px solid var(--line-2)}
.btn-ghost:hover{border-color:#fff; background:rgba(255,255,255,.08)}
.btn.big{padding:19px 40px; font-size:1.08rem}

.reveal{opacity:0; transform:translateY(34px); transition:opacity .8s var(--ease),transform .8s var(--ease); transition-delay:var(--d,0s)}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1 !important; transform:none !important} }

/* ===================== HERO ===================== */
.hero{position:relative; min-height:100vh; display:flex; align-items:center; padding:120px clamp(20px,5vw,40px) 90px; overflow:hidden}
.hero-media{position:absolute; inset:0; z-index:0}
.hero-media img{width:100%; height:100%; object-fit:cover; object-position:60% center; filter:saturate(1.05) contrast(1.05); animation:heroZoom 18s ease-out both}
@keyframes heroZoom{from{transform:scale(1.12)}to{transform:scale(1)}}
.hero-scrim{position:absolute; inset:0;
  background:linear-gradient(90deg,var(--bg) 0%,rgba(8,8,12,.86) 34%,rgba(8,8,12,.35) 66%,rgba(8,8,12,.7) 100%),linear-gradient(0deg,var(--bg) 2%,transparent 40%)}
.hero-logo{position:absolute; z-index:3; right:clamp(10px,5vw,80px); top:50%; width:clamp(210px,29vw,430px); pointer-events:none;
  filter:drop-shadow(0 26px 50px rgba(0,0,0,.55)) drop-shadow(0 0 46px rgba(232,38,46,.4)); animation:floatLogo 6.5s ease-in-out infinite; will-change:transform}
@keyframes floatLogo{0%,100%{transform:translateY(-54%) rotate(-1.5deg)}50%{transform:translateY(-44%) rotate(1.5deg)}}
.hero-inner{position:relative; z-index:3; max-width:var(--maxw); margin:0 auto; width:100%}
.eyebrow{display:inline-flex; align-items:center; gap:10px; font-family:var(--font-d); font-size:.82rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ash); background:rgba(255,255,255,.05); border:1px solid var(--line); padding:9px 16px; border-radius:100px; margin-bottom:26px; backdrop-filter:blur(6px)}
.eyebrow .dot{width:8px; height:8px; border-radius:50%; background:var(--red); box-shadow:0 0 12px var(--red); animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{opacity:1; transform:scale(1)}50%{opacity:.4; transform:scale(.7)}}
.hero-title{font-family:var(--font-d); font-weight:700; line-height:.92; font-size:clamp(3.2rem,11vw,8.6rem); letter-spacing:-.04em; margin-bottom:22px}
.hero-title span{display:block}
.hero-title .accent{background:linear-gradient(100deg,var(--red-2),var(--red) 40%,#fff 130%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; filter:drop-shadow(0 6px 30px var(--red-glow))}
.hero-sub{font-size:clamp(1.05rem,1.8vw,1.4rem); color:var(--ash); max-width:560px; margin-bottom:38px}
.hero-cta{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:52px}
.hero-stats{display:flex; gap:clamp(22px,4vw,54px); flex-wrap:wrap}
.hstat .num{font-family:var(--font-d); font-weight:700; font-size:clamp(2rem,4vw,3.1rem); letter-spacing:-.03em; line-height:1; display:block;
  background:linear-gradient(180deg,#fff,var(--ash)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.hstat label{font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); margin-top:8px; display:block}
.scroll-hint{position:absolute; bottom:30px; left:50%; transform:translateX(-50%); z-index:3; display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family:var(--font-d); font-size:.72rem; letter-spacing:.28em; text-transform:uppercase; color:var(--mute)}
.scroll-hint span{width:22px; height:36px; border:2px solid var(--line-2); border-radius:14px; position:relative}
.scroll-hint span::after{content:""; position:absolute; top:7px; left:50%; transform:translateX(-50%); width:4px; height:8px; background:var(--red); border-radius:2px; animation:scrolldot 1.6s infinite}
@keyframes scrolldot{0%{opacity:0; top:6px}30%{opacity:1}60%{opacity:1; top:18px}100%{opacity:0; top:22px}}

/* ===================== SERVICES OVERVIEW ===================== */
.svc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.svc{display:flex; flex-direction:column; align-items:flex-start; background:linear-gradient(180deg,var(--panel),var(--bg-2));
  border:1px solid var(--line); border-radius:18px; padding:30px 28px; position:relative; overflow:hidden; transition:transform .4s var(--ease),border-color .4s,box-shadow .4s}
.svc::before{content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--red),var(--red-2)); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease)}
.svc:hover{transform:translateY(-8px); border-color:var(--line-2); box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}
.svc:hover::before{transform:scaleX(1)}
.svc-ic{display:grid; place-items:center; width:56px; height:56px; border-radius:14px; margin-bottom:20px;
  background:linear-gradient(150deg,var(--red),var(--red-deep)); box-shadow:0 10px 26px -10px var(--red-glow)}
.svc-ic svg{width:28px; height:28px; color:#fff}
.svc-no{position:absolute; top:26px; right:26px; font-family:var(--font-d); font-weight:700; font-size:.95rem; color:var(--red); letter-spacing:.05em}
.svc h3{font-size:1.35rem; margin-bottom:10px}
.svc p{color:var(--ash); font-size:.98rem; margin-bottom:16px}
.svc-link{margin-top:auto; font-family:var(--font-d); font-weight:600; font-size:.9rem; color:#fff; transition:letter-spacing .3s,color .3s}
.svc:hover .svc-link{color:var(--red-2); letter-spacing:.02em}
.svc.feat{background:linear-gradient(180deg,rgba(232,38,46,.16),var(--bg-2)); border-color:rgba(232,38,46,.4)}
.svc.feat::before{transform:scaleX(1)}
.svc-cta{background:linear-gradient(150deg,var(--red-deep),var(--red)); border-color:var(--red-2); align-items:flex-start; justify-content:center}
.svc-cta::before{display:none}
.svc-cta h3{font-size:1.4rem; margin-bottom:8px}
.svc-cta p{color:rgba(255,255,255,.9)}
.svc-cta .btn{background:#0b0b10; border-color:rgba(255,255,255,.2)}
.svc-cta:hover{transform:translateY(-8px)}

/* ===================== SERVICE DETAIL ===================== */
.detail-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(34px,5vw,72px); align-items:center}
.detail.alt .detail-grid{grid-template-columns:.95fr 1.05fr}
.d-no{font-family:var(--font-d); font-weight:700; font-size:clamp(3rem,7vw,5rem); line-height:.8; letter-spacing:-.04em; display:block; margin-bottom:14px;
  -webkit-text-stroke:1.4px rgba(232,38,46,.6); color:transparent}
.detail-copy .kicker{margin-bottom:14px}
.detail-copy>p{color:var(--ash); max-width:560px; margin-bottom:26px; font-size:1.05rem}
.feat-list{list-style:none; display:flex; flex-direction:column; gap:2px; margin-bottom:30px}
.feat-list li{position:relative; padding:14px 8px 14px 40px; border-bottom:1px solid var(--line); color:var(--ash); transition:padding .3s,background .3s}
.feat-list li b{color:#fff; font-weight:600; font-family:var(--font-d)}
.feat-list li::before{content:""; position:absolute; left:10px; top:20px; width:12px; height:12px; border-radius:4px;
  background:linear-gradient(140deg,var(--red-2),var(--red-deep)); box-shadow:0 0 12px var(--red-glow)}
.feat-list li:hover{padding-left:46px; background:rgba(255,255,255,.02)}
.detail-media{position:relative; border-radius:22px; overflow:hidden; border:1px solid var(--line)}
.detail-media img{width:100%; aspect-ratio:4/5; object-fit:cover; transition:transform 1s var(--ease)}
.detail.alt .detail-media img{aspect-ratio:4/5}
.detail-media:hover img{transform:scale(1.05)}
.d-badge{position:absolute; left:20px; bottom:20px; background:rgba(8,8,12,.8); backdrop-filter:blur(8px); border:1px solid var(--line-2); border-radius:14px; padding:14px 20px}
.d-badge b{font-family:var(--font-d); display:block; color:var(--red); font-size:1.4rem; letter-spacing:-.01em}
.d-badge span{font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ash)}

/* roadside */
.roadside{max-width:none; padding-left:0; padding-right:0; overflow:hidden}
.road-bg{position:absolute; inset:0; z-index:0; opacity:.16}
.road-bg img{width:100%; height:100%; object-fit:cover}
.roadside .detail-grid{position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,5vw,40px); grid-template-columns:1fr}
.detail-copy.wide{max-width:none}
.road-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:12px 0 32px}
.road-item{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:24px 22px; transition:transform .35s var(--ease),border-color .35s,background .35s}
.road-item:hover{transform:translateY(-6px); border-color:rgba(232,38,46,.45); background:var(--panel-2)}
.road-item span{font-size:1.7rem; display:block; margin-bottom:12px}
.road-item b{font-family:var(--font-d); font-size:1.1rem; display:block; margin-bottom:6px}
.road-item p{color:var(--ash); font-size:.92rem}

/* ===================== FLEET MARQUEE ===================== */
.marquee-sec{padding:clamp(40px,6vw,70px) 0; position:relative; overflow:hidden}
.marquee-head{display:flex; align-items:center; gap:20px; max-width:var(--maxw); margin:0 auto 26px; padding:0 clamp(20px,5vw,40px)}
.marquee-head .kicker{margin-bottom:0; white-space:nowrap}
.marq-line{flex:1; height:1px; background:linear-gradient(90deg,var(--red),transparent)}
.marquee{position:relative; width:100%; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marq-track{display:flex; gap:18px; width:max-content; animation:marq 46s linear infinite}
.marquee:hover .marq-track{animation-play-state:paused}
.marq-track figure{width:clamp(240px,26vw,360px); aspect-ratio:16/10; border-radius:16px; overflow:hidden; border:1px solid var(--line); position:relative; flex:none}
.marq-track figure img{width:100%; height:100%; object-fit:cover; filter:grayscale(.15) saturate(1.05); transition:transform .6s var(--ease),filter .5s}
.marq-track figure:hover img{transform:scale(1.07); filter:none}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 9px))}}
@media (prefers-reduced-motion:reduce){ .marq-track{animation:none} }

/* ===================== WHY ===================== */
.why-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.why-item{display:flex; align-items:flex-start; gap:14px; padding:26px 24px; background:var(--panel); border:1px solid var(--line); border-radius:14px; transition:transform .35s var(--ease),background .35s,border-color .35s}
.why-item:hover{transform:translateY(-5px); background:var(--panel-2); border-color:rgba(232,38,46,.4)}
.why-item span{font-family:var(--font-d); font-weight:700; color:var(--red); font-size:1.1rem; line-height:1}
.why-item p{font-size:1rem; color:#e9e9ef; font-weight:500}

/* ===================== CONTACT ===================== */
.contact{text-align:center; overflow:hidden}
.contact-inner{max-width:820px; margin:0 auto; position:relative; z-index:2}
.big-cta{font-size:clamp(2.2rem,6vw,4.6rem)}
.contact .lead{margin:0 auto 40px}
.contact-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:42px}
.ccard{padding:26px 20px; border-radius:16px; background:var(--panel); border:1px solid var(--line); transition:transform .35s var(--ease),border-color .35s,background .35s}
.ccard:hover{transform:translateY(-6px); border-color:rgba(232,38,46,.5); background:var(--panel-2)}
.ccard span{font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--red); display:block; margin-bottom:10px}
.ccard b{font-family:var(--font-d); font-size:1.02rem; word-break:break-word}

/* ===================== FOOTER ===================== */
.footer{text-align:center; padding:64px 20px 48px; border-top:1px solid var(--line); background:var(--bg-2)}
.foot-brand img{height:70px; margin:0 auto 24px; filter:drop-shadow(0 0 30px rgba(232,38,46,.35))}
.foot-tag{font-family:var(--font-d); font-weight:600; color:#fff; letter-spacing:.04em; margin-bottom:14px; font-size:1.02rem}
.foot-note{color:var(--ash); font-size:.98rem; margin-bottom:8px}
.foot-fine{color:var(--mute); font-size:.82rem}

/* ===================== RESPONSIVE ===================== */
@media (max-width:980px){
  .svc-grid,.why-grid{grid-template-columns:repeat(2,1fr)}
  .road-grid{grid-template-columns:repeat(2,1fr)}
  .detail-grid,.detail.alt .detail-grid{grid-template-columns:1fr}
  .detail.alt .detail-media{order:-1}
  .detail-media{max-width:520px}
  .hero-logo{width:clamp(150px,26vw,240px); opacity:.9; right:2vw}
}
@media (max-width:760px){
  .hero-logo{top:86px; right:16px; width:96px; opacity:.95}
  @keyframes floatLogo{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-12px) rotate(2deg)}}
  .brand-word{display:none}
  .nav-links{position:fixed; inset:0 0 0 auto; width:min(320px,82vw); flex-direction:column; align-items:stretch; justify-content:center; gap:6px;
    padding:40px 26px; background:rgba(10,10,15,.97); backdrop-filter:blur(16px); border-left:1px solid var(--line); transform:translateX(105%); transition:transform .4s var(--ease); z-index:59}
  .nav-links.open{transform:none}
  .nav-links a{font-size:1.2rem; padding:14px}
  .nav-toggle{display:flex; z-index:61}
  .nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle.open span:nth-child(2){opacity:0}
  .nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .svc-grid,.why-grid,.road-grid,.contact-cards{grid-template-columns:1fr}
  .hero-stats{gap:22px}
  .cursor-glow{display:none}
}