:root{
  --primary:#1A1A1A;
  --primary-light:#242424;
  --primary-soft:#2E2E2E;
  --secondary:#FF5722;
  --secondary-hover:#E64A19;
  --secondary-soft:#FF8A65;
  --bg-shell:#111315;
  --bg-shell-alt:#17191c;
  --surface:#1F1F1F;
  --surface-soft:#262626;
  --surface-raised:#303030;
  --border:rgba(255,255,255,.08);
  --border-strong:rgba(255,255,255,.18);
  --text:#F5F5F5;
  --text-muted:#C6CCD2;
  --text-subtle:#9EA6AE;
  --white:#FFFFFF;
  --shadow-sm:0 10px 24px rgba(0,0,0,.22);
  --shadow-md:0 18px 42px rgba(0,0,0,.38);
  --navy:var(--primary);
  --charcoal:var(--primary-light);
  --gold:var(--secondary-hover);
  --yellow:var(--secondary);
  --accent:var(--secondary-soft);
  --urgent:var(--secondary);
  --urgent-dark:var(--secondary-hover);
}

html,body{
  margin:0;
  padding:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(255,87,34,.12) 0%, rgba(255,87,34,0) 40%),
    linear-gradient(180deg, #171717 0%, #121212 36%, #1A1A1A 100%);
  color:var(--text);
  font-family:'Inter','Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,iframe{max-width:100%;height:auto}
a{color:var(--secondary-soft)}
a:hover{color:var(--white)}

@keyframes pulse{
  0%,100%{transform:translateY(0);box-shadow:0 8px 18px rgba(0,0,0,.28)}
  50%{transform:translateY(-1px);box-shadow:0 14px 26px rgba(255,87,34,.22)}
}
@keyframes slideInFromTop{0%{transform:translateY(-20px);opacity:0}100%{transform:translateY(0);opacity:1}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes glowCycle{
  0%,100%{filter:drop-shadow(0 8px 18px rgba(255,255,255,.08)) drop-shadow(0 0 18px rgba(255,87,34,.18))}
  50%{filter:drop-shadow(0 10px 22px rgba(255,255,255,.1)) drop-shadow(0 0 24px rgba(255,87,34,.26))}
}
@keyframes blink{50%{opacity:.2}}
@keyframes dropdownBounce{0%{transform:translateY(-10px);opacity:0}60%{transform:translateY(4px);opacity:1}80%{transform:translateY(-1px)}100%{transform:translateY(0)}}
@keyframes blinkGlow{0%,100%{transform:translateY(0) scale(1);box-shadow:0 0 0 rgba(255,87,34,0)}50%{transform:translateY(-1px) scale(1.02);box-shadow:0 0 18px rgba(255,87,34,.45)}}
@keyframes scroll-left{from{transform:translateX(100%)}to{transform:translateX(-100%)}}

h1{
  margin:0 0 1.3rem;
  color:#d6b164;
  background:linear-gradient(180deg,#f6e4b7 0%,#d6b164 48%,#9f7931 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  font-size:clamp(1.15rem,1.55vw,1.58rem);
  font-weight:900;
  letter-spacing:0;
  line-height:1.02;
  text-align:center;
  white-space:nowrap;
}
h2{
  margin-top:1.9rem;
  padding-bottom:.38rem;
  border-bottom:1px solid rgba(255,255,255,.14);
  color:#d6b164;
  background:linear-gradient(180deg,#f6e4b7 0%,#d6b164 48%,#9f7931 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  font-size:clamp(.96rem,1.05vw,1.08rem);
  font-weight:800;
  letter-spacing:0;
  white-space:nowrap;
}
h3{
  margin:.15rem 0 .55rem;
  color:var(--white);
  font-size:1.05rem;
  font-weight:800;
}
p{
  margin:.45rem 0 1rem;
  color:var(--text-muted);
  line-height:1.62;
}

.grid{
  display:grid;
  gap:1.2rem;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  margin-top:1rem;
}
.card{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:1.1rem;
  background:linear-gradient(180deg, rgba(40,40,40,.96) 0%, rgba(28,28,28,.98) 100%);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:var(--shadow-sm);
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.card:hover{
  transform:translateY(-3px);
  border-color:rgba(255,87,34,.42);
  box-shadow:0 18px 34px rgba(0,0,0,.4);
}

.cta-row{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.2rem}
.cta{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.72rem 1.1rem;
  border:none;
  border-radius:10px;
  background:linear-gradient(180deg,var(--secondary) 0%, var(--secondary-hover) 100%);
  color:var(--white);
  font-weight:800;
  text-decoration:none;
  text-align:center;
  line-height:1.2;
  cursor:pointer;
  box-shadow:0 10px 20px rgba(255,87,34,.2);
  transition:transform .2s ease,box-shadow .2s ease,filter .2s ease,background .2s ease;
}
.cta:hover{
  transform:translateY(-1px);
  filter:brightness(1.02);
  box-shadow:0 14px 26px rgba(255,87,34,.28);
  background:linear-gradient(180deg,#ff6d3a 0%, var(--secondary) 100%);
}
.scrolling-banner{
  width:100%;
  min-height:2.4rem;
  padding:.7rem 0;
  overflow:hidden;
  white-space:nowrap;
  text-align:center;
  color:var(--white);
  font-size:1rem;
  font-weight:800;
  background:linear-gradient(90deg, rgba(255,87,34,.95) 0%, rgba(230,74,25,.95) 100%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  box-shadow:0 12px 24px rgba(0,0,0,.22);
}
.scrolling-banner span{
  display:inline-block;
  padding-right:3rem;
  animation:scroll-left 18s linear infinite;
}
.scrolling-banner:hover span{animation-play-state:paused}
.tel-link{color:inherit;text-decoration:none}
footer{
  margin-top:auto;
  padding:1.2rem;
  background:linear-gradient(180deg,#151515 0%, #111111 100%);
  border-top:1px solid rgba(255,255,255,.08);
  color:var(--text-subtle);
  text-align:center;
  font-size:.95rem;
  box-shadow:0 -8px 24px rgba(0,0,0,.28);
}

@media (max-width:1024px){.grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}}
@media (max-width:768px){
  .grid{gap:1rem;grid-template-columns:1fr}
  .cta-row{display:grid;grid-template-columns:1fr}
}
@media (max-width:640px){
  .scrolling-banner{font-size:.94rem;padding:.68rem 10px}
  .scrolling-banner span{padding-right:2rem;animation:scroll-left 20s linear infinite}
}
@media (max-width:480px){
  h1{font-size:clamp(1.7rem,9vw,2.2rem);letter-spacing:.01em;white-space:normal}
  h2{font-size:clamp(1.05rem,4.8vw,1.3rem);white-space:normal}
  .card{padding:.95rem}
  .cta{width:100%}
}
@media (max-width:768px){
  h1,h2{white-space:normal}
}
@media (max-width:360px){
  html,body{font-size:15px}
  .card{padding:.85rem}
  .scrolling-banner{font-size:.9rem}
}
@media (prefers-reduced-motion:reduce){
  .scrolling-banner span,.cta,footer{animation:none !important;transition:none !important}
}
