:root{
  --bg:#121212; --panel:#1f2226; --panel-2:#2a2d32; --light:#f5f5f5; --muted:#cfd2d6; --accent:#f4b400;
}
*{box-sizing:border-box} html,body{margin:0;padding:0;background:var(--bg);color:var(--light);font-family:Arial,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
.wrapper{min-height:100vh;background:radial-gradient(1200px 600px at 40% -10%,rgba(255,255,255,.06),transparent 60%), #111}
.container{max-width:1200px;margin:0 auto;padding:24px}
header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;margin-bottom:12px;background:rgba(0,0,0,.65);backdrop-filter:saturate(120%) blur(8px);border-radius:14px}
.logo{font-weight:800;letter-spacing:.6px}
.phone-pill{display:inline-block;background:var(--accent);color:#1a1a1a;font-weight:800;padding:10px 14px;border-radius:12px;text-decoration:none;box-shadow:0 2px 0 #c69900}
.phone-pill:active{transform:translateY(1px)}
.hero{margin:28px 0;padding:40px;background:rgba(0,0,0,.72);border-radius:16px;text-align:center}
.hero h1{font-size:64px;line-height:1.12;margin:0 0 12px;color:var(--accent)}
.hero p{font-size:20px;line-height:1.55;margin:0 0 8px;color:var(--light)}
.blink-text{font-size:24px;font-weight:bold;margin-top:10px;animation:blink-colors 1.1s infinite}
@keyframes blink-colors{0%,100%{color:#ff2a2a}50%{color:var(--accent)}}
.phone-call{font-size:22px;font-weight:bold;color:var(--accent);display:flex;gap:8px;align-items:center;justify-content:center;margin-top:10px}
.phone-icon{display:inline-block;animation:ring .9s infinite}
@keyframes ring{0%{transform:rotate(0)}20%{transform:rotate(15deg)}40%{transform:rotate(-15deg)}60%{transform:rotate(10deg)}80%{transform:rotate(-10deg)}100%{transform:rotate(0)}}
.section{margin:24px 0;padding:22px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:16px}
.section h2{margin:0 0 16px 0}
.services{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.card{background:var(--panel);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:16px;transition:transform .15s ease, box-shadow .15s ease}
.card:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.35)}
.card h3{margin:10px 0 6px} .card p{margin:0;color:var(--muted)}
.icon{width:48px;height:48px;margin-bottom:8px;color:var(--accent)}
.icon svg{width:48px;height:48px;display:block;animation-play-state:paused}
.card:hover .icon svg{animation-play-state:running}
.icon-bricks rect{opacity:.35}
.icon-bricks rect:nth-child(1){animation:pop .9s ease-in-out infinite}
.icon-bricks rect:nth-child(2){animation:pop .9s .1s ease-in-out infinite}
.icon-bricks rect:nth-child(3){animation:pop .9s .2s ease-in-out infinite}
@keyframes pop{0%,100%{opacity:.35;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)}}
.icon-door svg{animation:door 1.6s ease-in-out infinite}
@keyframes door{0%,100%{transform:scaleX(1)}50%{transform:scaleX(1.08)}}
.icon-fence svg{animation:wiggle 1.4s ease-in-out infinite;transform-origin:32px 24px}
@keyframes wiggle{0%,100%{transform:rotate(0)}50%{transform:rotate(-3deg)}}
.icon-road svg{animation:dash 1.6s linear infinite}
@keyframes dash{0%{transform:translateX(0)}100%{transform:translateX(-4px)}}
.icon-garage svg{animation:bounce 1.8s ease-in-out infinite;transform-origin:32px 28px}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
.icon-truck svg{animation:bob 2.2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
.icon-gear svg{animation:spin 4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.icon-hammer svg{animation:tap 1.2s ease-in-out infinite;transform-origin:12px 20px}
@keyframes tap{0%,100%{transform:rotate(0)}50%{transform:rotate(-10deg)}}
footer{margin:34px 0;background:rgba(0,0,0,.8);border-radius:14px;padding:24px 20px;text-align:center;color:var(--muted);font-size:14px}
.footer-links{margin-top:6px}
.footer-links a{color:var(--muted);text-decoration:underline}
@media (max-width:1024px){.services{grid-template-columns:repeat(3,1fr)} .hero h1{font-size:56px}}
@media (max-width:720px){.services{grid-template-columns:repeat(2,1fr)} .hero h1{font-size:40px} .hero p{font-size:18px}}
@media (max-width:460px){.services{grid-template-columns:1fr}}