:root{
  --bg:#ffffff;
  --text:#111822;
  --text-muted:#5e6b7e;
  --brand-1:#111822;
  --brand-2:#221b11;
  --brand-3:#2b3c55;
  --accent:#2b3c55;
  --border:rgba(17,24,34,0.12);
  --surface:#f6f8fb;
  --radius:12px;
  --shadow:0 8px 30px rgba(0,0,0,0.08);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
}

.container{
  width:min(1100px, 92%);
  margin-inline:auto;
}

/* Header */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  background:linear-gradient(120deg, rgba(255,42,109,0.18) 0%, rgba(161,0,255,0.18) 45%, rgba(0,230,255,0.18) 100%), rgba(255,255,255,0.86);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--border);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.logo{font-weight:800;text-decoration:none;color:transparent;letter-spacing:0.2px;background:linear-gradient(120deg,#ff2a6d 0%,#a100ff 45%,#00e6ff 100%);-webkit-background-clip:text;background-clip:text;text-shadow:0 0 1px rgba(255,255,255,0.2),0 0 10px rgba(161,0,255,0.35),0 0 22px rgba(0,230,255,0.25)}
.logo:hover{filter:brightness(1.1) saturate(1.25)}
.site-nav ul{display:flex;gap:24px;list-style:none;margin:0;padding:0;align-items:center}
.site-nav a{color:var(--text);text-decoration:none}
.site-nav a:hover{color:var(--accent)}
.nav-cta .btn{padding:10px 14px}

.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:8px;margin:0}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--text)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--border);padding:12px 18px;border-radius:10px;text-decoration:none;color:var(--text);transition:all .2s ease;font-weight:600}
.btn:hover{transform:translateY(-1px)}
.btn-accent{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-accent:hover{filter:brightness(1.05)}
.btn-ghost{background:transparent}
.btn-inverse{background:#fff;color:var(--accent);border-color:#fff}

/* Hero split */
.hero{display:grid;grid-template-columns:1.2fr 0.8fr;min-height:92vh}
.hero-media{position:relative;overflow:hidden}
.hero-media img{position:absolute;inset:0;object-fit:cover;width:100%;height:100%;filter:contrast(1.05) saturate(1.05)}
.hero-content{display:flex;flex-direction:column;justify-content:center;padding:120px 0 80px 0;max-width:560px}
.brand-tag{display:inline-block;background:var(--surface);border:1px solid var(--border);padding:6px 10px;border-radius:999px;font-size:12px;color:var(--text-muted);margin-bottom:18px}
.hero h1{font-size:clamp(32px,4.2vw,52px);line-height:1.1;margin:0 0 14px}
.lead{color:var(--text-muted);max-width:56ch;margin:0 0 22px}
.quote{margin:0 0 18px}
.quote blockquote{margin:0;color:#0d1520;font-weight:600}
.quote figcaption{margin-top:6px;color:var(--text-muted);font-size:13px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.trust-points{display:flex;gap:16px;list-style:none;margin:8px 0 0;padding:0;color:var(--text-muted);font-size:14px}

/* Sections */
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px}
.section-head h2{font-size:28px;margin:0}
.section-head p{margin:0;color:var(--text-muted)}

.services{padding:72px 0;background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.service-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.service-card .media{height:160px;background-size:cover;background-position:center}
.service-card .content{padding:16px}
.service-card h3{margin:0 0 8px;font-size:18px}
.service-card p{margin:0 0 12px;color:var(--text-muted)}
.tags{display:flex;gap:8px;list-style:none;margin:0;padding:0}
.tags li{font-size:12px;color:var(--accent);background:rgba(43,60,85,0.08);border:1px solid rgba(43,60,85,0.15);padding:4px 8px;border-radius:999px}
.service-extras{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.badge{font-size:12px;color:var(--text);background:#fff;border:1px dashed var(--border);padding:6px 10px;border-radius:999px}

.cta-strip{background:linear-gradient(120deg,#ff2a6d 0%,#a100ff 50%,#00e6ff 100%);color:#fff;padding:38px 0}
.cta-strip-inner{display:flex;align-items:center;justify-content:space-between;gap:16px}
.cta-strip h3{margin:0}
.cta-strip p{margin:0;opacity:.9}

.contact{padding:72px 0;position:relative;background:linear-gradient(180deg, rgba(255,42,109,0.06) 0%, rgba(161,0,255,0.06) 45%, rgba(0,230,255,0.06) 100%)}
.contact:after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:linear-gradient(120deg,#ff2a6d 0%,#a100ff 50%,#00e6ff 100%);opacity:.75}
.contact-grid{display:grid;grid-template-columns:1fr;gap:24px}
.contact-hours h3{margin:0 0 8px}
.contact-list{list-style:none;margin:0 0 12px;padding:0}
.contact-list a{color:var(--accent);text-decoration:none}
.hours{list-style:none;margin:6px 0 0 0;padding:0;display:grid;gap:6px;max-width:320px}
.hours li{display:flex;align-items:center;justify-content:space-between;border-bottom:1px dashed var(--border);padding:4px 0}
.hours li span:last-child{color:var(--text-muted)}
.form-microcopy{display:none}
.microcopy{font-size:13px;color:var(--text-muted)}

/* Footer */
.site-footer{background:#0f141c;color:#c7d0dd;margin-top:40px}
.footer-grid{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:18px;padding:28px 0}
.site-footer .logo{color:#fff}
.footer-links h4,.footer-contact h4{margin:0 0 8px;color:#fff}
.footer-links ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.footer-links a{color:#c7d0dd;text-decoration:none}
.footer-links a:hover{color:#fff}
.footer-bottom{padding:12px 0;border-top:1px solid rgba(255,255,255,0.08);color:#9fb0c8;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.footer-credit{display:inline-flex;align-items:center;gap:10px;color:#c7d0dd}
.footer-credit a{color:#c7d0dd;text-decoration:none}
.footer-credit a:hover{color:#fff}
.logo-wsgratis{height:20px;width:auto;display:block;filter:brightness(1.1) contrast(1.05)}

/* Utilities */
.hidden{display:none !important}

/* Responsive */
@media (max-width: 1000px){
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:1fr}
  .cta-strip-inner{flex-direction:column;align-items:flex-start}
}
@media (max-width: 800px){
  .hero{grid-template-columns:1fr}
  .hero-media{height:46vh}
  .hero-content{padding:28px 0 56px}
  .site-nav{position:absolute;top:58px;right:0;background:#fff;border:1px solid var(--border);border-right:0;border-top:0;border-bottom-left-radius:12px;box-shadow:var(--shadow);padding:12px}
  .site-nav ul{flex-direction:column;gap:12px}
  .site-nav{display:none}
  .site-header.open .site-nav{display:block}
  .nav-toggle{display:flex}
}
@media (max-width: 520px){
  .services-grid{grid-template-columns:1fr}
  .hero h1{font-size:28px}
  .lead{font-size:15px}
  .quote blockquote{font-size:15px}
  .cta-strip-inner{gap:8px}
  .btn{padding:10px 14px}
  .footer-grid{grid-template-columns:1fr}
  .footer-grid .brand{grid-column:1/-1}
}

@media (max-width: 360px){
  .hero-media{height:40vh}
  .hero h1{font-size:24px}
  .lead{font-size:14px}
  .quote blockquote{font-size:14px}
  .btn{padding:8px 12px}
  .header-inner{padding:10px 0}
  main:before{height:58px}
}

/* Offset main content for fixed header spacing */
main{display:block}
main:before{content:"";display:block;height:66px}

/* Sticky call on mobile */
.sticky-call{position:fixed;left:0;right:0;bottom:10px;margin:auto;display:none;max-width:92%;
  background:#22c55e;color:#083418;border:2px solid #16a34a;border-radius:999px;box-shadow:0 8px 24px rgba(22,163,74,.35);
  padding:12px 16px;text-decoration:none;z-index:1200;align-items:center;justify-content:center;gap:10px;font-weight:700;transition:opacity .2s ease, transform .2s ease}
.sticky-call strong{font-weight:800}
.sticky-call .phone-emoji{filter:saturate(1.1)}
.sticky-call.sticky-hidden{opacity:0;pointer-events:none;transform:translateY(18px)}

@media (max-width: 800px){
  .sticky-call{display:flex}
}

@media (min-width: 1001px){
  .contact-grid{grid-template-columns:1.1fr .9fr}
}