:root{
  --navy:#061a2e;
  --navy-2:#0b2a49;
  --blue:#1598f2;
  --blue-soft:#dff2ff;
  --text:#0b1b2f;
  --muted:#61748a;
  --white:#ffffff;
  --line:#c9ddec;
  --shadow:0 24px 80px rgba(5,25,45,.16);
  --radius:28px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Be Vietnam Pro',system-ui,sans-serif;color:var(--text);background:#f5fbff;overflow-x:hidden}
a{text-decoration:none;color:inherit}img{max-width:100%;display:block}
body.intro-lock{overflow:hidden}
.site-header{position:fixed;top:0;left:0;right:0;height:76px;z-index:60;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(18px,6vw,110px);background:rgba(255,255,255,.9);backdrop-filter:blur(18px);border-bottom:1px solid rgba(9,57,95,.1)}
.brand{display:flex;align-items:center;gap:12px}.brand-mark{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,#073b75,#1598f2);display:grid;place-items:center;color:white;font-weight:900}.brand strong{display:block;letter-spacing:.06em}.brand small{color:var(--muted);font-size:12px}.main-nav{display:flex;gap:28px;font-weight:700;font-size:14px}.main-nav a{position:relative}.main-nav a:after{content:"";position:absolute;left:0;bottom:-8px;width:0;height:2px;background:var(--blue);transition:.3s}.main-nav a:hover:after{width:100%}.menu-toggle{display:none;background:transparent;border:0}.menu-toggle span{display:block;width:26px;height:2px;background:var(--navy);margin:6px 0}
.garage-intro{position:fixed;inset:0;z-index:200;background:#010914;display:grid;place-items:center;overflow:hidden}.garage-intro.hide{pointer-events:none}.garage-door{position:absolute;inset:0;background:linear-gradient(90deg,#0a1422,#1c2c39 45%,#0c1d2d);box-shadow:inset 0 -30px 80px rgba(0,0,0,.7);animation:doorOpen 2.2s cubic-bezier(.7,0,.18,1) 1s forwards}.door-slats{position:absolute;inset:0;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.09) 0 2px,transparent 2px 50px),linear-gradient(90deg,rgba(255,255,255,.06),transparent 25%,rgba(21,152,242,.15) 50%,transparent 75%,rgba(255,255,255,.04));border-bottom:10px solid rgba(255,255,255,.14)}.door-logo{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;color:white}.door-logo span{width:70px;height:70px;border-radius:20px;background:#0d77d5;display:grid;place-items:center;margin:0 auto 16px;font-weight:900;font-size:24px}.door-logo strong{display:block;font-size:clamp(28px,5vw,68px);letter-spacing:.08em}.door-logo small{color:#9edbff}.door-light{position:absolute;left:-40%;top:45%;width:180%;height:120px;background:linear-gradient(90deg,transparent,rgba(126,214,255,.4),transparent);transform:rotate(-8deg);animation:scanDoor 1.7s infinite}.garage-glow{position:absolute;inset:auto 0 0;height:35%;background:radial-gradient(ellipse at center bottom,rgba(24,163,255,.55),transparent 60%);opacity:0;animation:glowUp 2.2s 1.15s forwards}@keyframes doorOpen{to{transform:translateY(-112%)}}@keyframes scanDoor{to{transform:translateX(50%) rotate(-8deg)}}@keyframes glowUp{40%,100%{opacity:1}}
.welcome-layer{position:fixed;inset:0;z-index:180;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(1,10,22,.45);backdrop-filter:blur(8px)}.welcome-layer.show{display:flex;animation:fadeIn .5s ease forwards}.welcome-card{width:min(680px,100%);position:relative;background:linear-gradient(145deg,rgba(255,255,255,.97),rgba(226,244,255,.97));border:1px solid rgba(85,174,238,.35);box-shadow:0 35px 100px rgba(0,0,0,.35);border-radius:30px;padding:38px}.welcome-card h2{font-size:clamp(26px,4vw,44px);line-height:1.15;margin:8px 0 16px}.welcome-card p{color:#3f5368;line-height:1.75}.welcome-highlight{font-weight:800;color:var(--navy)!important}.welcome-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:22px}.tool-close{position:absolute;top:16px;right:16px;width:42px;height:42px;border:0;border-radius:50%;background:#061a2e;cursor:pointer}.tool-close span{position:absolute;left:11px;top:20px;width:20px;height:3px;border-radius:8px;background:linear-gradient(90deg,#dcecf8,#38b9ff)}.tool-close span:first-child{transform:rotate(45deg)}.tool-close span:last-child{transform:rotate(-45deg)}
.hero{min-height:100vh;position:relative;display:flex;align-items:center;padding:150px clamp(18px,6vw,110px) 90px;background:url('assets/ttworkshop.jpg') center/cover no-repeat;color:white;overflow:hidden}.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,15,29,.9) 0%,rgba(5,28,50,.72) 43%,rgba(4,31,58,.42) 100%)}.hero:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 75% 20%,rgba(68,173,255,.28),transparent 32%)}.hero-content{position:relative;z-index:2;width:min(900px,100%)}.eyebrow{text-transform:uppercase;letter-spacing:.18em;color:#32b5ff;font-size:13px;font-weight:900}.hero h1{font-size:clamp(40px,7vw,82px);line-height:1.08;margin:12px 0 20px;letter-spacing:.02em}.hero-desc{font-size:clamp(16px,2vw,20px);line-height:1.8;width:min(760px,100%);color:#e3f4ff}.hero-actions,.hero-badges{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:14px 22px;font-weight:900;border:1px solid rgba(255,255,255,.25);transition:.3s}.btn:hover{transform:translateY(-3px)}.btn-primary{background:linear-gradient(135deg,#078ef0,#38c3ff);color:white;box-shadow:0 14px 30px rgba(7,142,240,.32)}.btn-light{color:white;background:rgba(255,255,255,.12)}.btn-map{color:white;background:rgba(0,0,0,.28)}.btn-ghost{border-color:rgba(7,61,99,.18);background:white;color:var(--navy)}.hero-badges span{padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(10px);font-weight:700}.headlight{position:absolute;z-index:1;width:70%;height:120px;background:linear-gradient(90deg,transparent,rgba(195,235,255,.34),transparent);filter:blur(3px);transform:rotate(-10deg);animation:heroLight 5s ease-in-out infinite}.headlight-one{top:27%;left:-55%}.headlight-two{top:49%;left:-70%;animation-delay:1.5s}@keyframes heroLight{0%{transform:translateX(0) rotate(-10deg);opacity:0}18%,55%{opacity:1}100%{transform:translateX(220%) rotate(-10deg);opacity:0}}.scroll-cue{position:absolute;z-index:2;left:50%;bottom:26px;transform:translateX(-50%);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#c8edff}
.quick-info{width:min(1050px,calc(100% - 36px));margin:-42px auto 60px;position:relative;z-index:10;background:white;border-radius:24px;box-shadow:var(--shadow);display:grid;grid-template-columns:repeat(3,1fr);overflow:hidden}.quick-info a{padding:28px;border-right:1px solid var(--line)}.quick-info a:last-child{border:0}.quick-info strong{display:block}.quick-info span{color:var(--muted);font-size:14px}.section-road{width:min(1160px,calc(100% - 36px));height:50px;margin:0 auto;position:relative}.section-road:before{content:"";position:absolute;left:0;right:0;top:24px;height:2px;background:linear-gradient(90deg,transparent,var(--blue),transparent)}.line-car{position:absolute;top:4px;left:0;font-size:34px;color:var(--blue);filter:drop-shadow(0 0 12px rgba(21,152,242,.6));animation:carRun 4s ease-in-out infinite}@keyframes carRun{0%{left:0}70%,100%{left:calc(100% - 42px)}}
.section{padding:90px clamp(18px,6vw,110px)}.section-title{text-align:center;width:min(850px,100%);margin:0 auto 44px}.section-title h2,.about h2,.booking h2{font-size:clamp(30px,4vw,54px);line-height:1.15;margin:8px 0 14px}.about{display:grid;grid-template-columns:1.03fr .97fr;gap:48px;align-items:center;background:white}.about-text p{font-size:17px;line-height:1.9;color:#40556b}.about-points{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}.about-points span{padding:11px 14px;border-radius:12px;background:#edf8ff;color:#075b93;font-weight:800}.about-visual{position:relative}.about-visual img{border-radius:30px;box-shadow:var(--shadow);border:8px solid white}.gear-bg{position:absolute;right:-24px;bottom:-36px;font-size:110px;color:rgba(21,152,242,.15);animation:gearSpin 16s linear infinite}@keyframes gearSpin{to{transform:rotate(360deg)}}
.difference{background:linear-gradient(180deg,#f4fbff,#ffffff)}.diff-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.diff-card{background:white;padding:30px;border-radius:24px;border:1px solid #d7ebf8;box-shadow:0 18px 50px rgba(5,32,54,.08);position:relative;overflow:hidden}.diff-card:before{content:"";position:absolute;inset:0;border-top:3px solid var(--blue);opacity:.7}.diff-card span{font-size:38px;font-weight:900;color:#c8eaff}.diff-card h3{font-size:21px}.diff-card p{line-height:1.75;color:var(--muted)}
.services{background:#f6fbff}.service-block{width:min(1160px,100%);margin:0 auto 30px;background:white;border:1px solid #d6e9f5;border-radius:30px;padding:34px;box-shadow:0 24px 70px rgba(7,38,64,.09);position:relative;overflow:hidden}.service-block:after{content:"";position:absolute;right:-160px;top:-160px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(34,170,255,.16),transparent 65%)}.service-copy{position:relative;z-index:1}.service-no{font-size:42px;font-weight:900;color:#0aa5ff}.service-copy h3{font-size:clamp(24px,3vw,36px);margin:6px 0 14px}.service-copy p{font-size:16px;line-height:1.85;color:#53677c;width:min(840px,100%)}.media-row{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:18px;margin:26px 0 24px}.media-card{height:210px;border-radius:24px;background:linear-gradient(135deg,rgba(6,26,46,.9),rgba(0,122,216,.75)),url('assets/ttworkshop.jpg') center/cover;border:1px solid rgba(69,185,255,.35);display:flex;align-items:flex-end;padding:20px;color:white;font-weight:900;overflow:hidden;position:relative}.media-card:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);transform:translateX(-100%);transition:.6s}.media-card:hover:before{transform:translateX(100%)}.media-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(21,152,242,.2)}.media-video{background:linear-gradient(135deg,rgba(0,119,220,.92),rgba(68,194,255,.8)),url('assets/ttworkshop.jpg') center/cover;align-items:center;justify-content:center;font-size:20px}.lift-car{position:absolute;bottom:34px;right:34px;font-style:normal;font-size:38px;animation:lift 2.5s ease-in-out infinite}@keyframes lift{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}.service-btn{display:inline-flex;border-radius:999px;background:var(--navy);color:white;padding:14px 22px;font-weight:900}.service-btn:hover{background:#0b72ba}
.booking{background:linear-gradient(135deg,#061a2e,#0d3860);color:white}.booking-card{width:min(1100px,100%);margin:auto;display:grid;grid-template-columns:.85fr 1.15fr;gap:40px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:30px;padding:38px}.booking-card p{color:#d6eeff;line-height:1.75}.booking-form{display:grid;grid-template-columns:1fr 1fr;gap:14px}.booking-form input,.booking-form select{width:100%;padding:16px;border-radius:16px;border:1px solid rgba(255,255,255,.16);background:white;color:var(--text);font-family:inherit}.booking-form button{grid-column:1/-1;border:0;cursor:pointer}.site-footer{display:flex;justify-content:space-between;gap:20px;padding:40px clamp(18px,6vw,110px);background:#030c16;color:white}.site-footer p,.site-footer a{display:block;color:#b7cee3;line-height:1.7}.floating-actions{position:fixed;right:24px;bottom:24px;z-index:80;display:flex;gap:12px}.floating-actions a{width:58px;height:58px;border-radius:50%;background:#0b9cff;color:white;display:grid;place-items:center;font-weight:900;box-shadow:0 12px 30px rgba(0,120,220,.28)}
.reveal{opacity:0;transform:translateY(32px);transition:opacity .75s ease,transform .75s ease}.reveal.visible{opacity:1;transform:translateY(0)}@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@media (max-width:900px){.menu-toggle{display:block}.main-nav{position:absolute;top:76px;left:18px;right:18px;background:white;border-radius:20px;box-shadow:var(--shadow);padding:16px;display:none;flex-direction:column}.main-nav.open{display:flex}.hero{padding-top:130px;min-height:92vh}.hero h1{font-size:38px}.quick-info{grid-template-columns:1fr;margin-top:18px}.quick-info a{border-right:0;border-bottom:1px solid var(--line)}.about{grid-template-columns:1fr}.diff-grid{grid-template-columns:1fr}.media-row{grid-template-columns:1fr}.media-card{height:180px}.booking-card{grid-template-columns:1fr}.booking-form{grid-template-columns:1fr}.site-footer{flex-direction:column}.floating-actions{right:14px;bottom:14px}.floating-actions a{width:52px;height:52px}.welcome-card{padding:30px 22px}.site-header{padding:0 18px}.brand small{display:none}}
@media (max-width:560px){.hero-actions .btn{width:100%}.hero-badges span{width:100%}.section{padding:70px 18px}.service-block{padding:24px}.media-card{height:160px}.welcome-actions .btn{width:100%}.garage-door .door-logo strong{font-size:28px}}
