
:root{
  --brand:#2563eb;
  --brand-dark:#0f172a;
  --brand-soft:#eff6ff;
  --ink:#0f172a;
  --muted:#475569;
  --line:#e2e8f0;
  --gold:#cfa24d;
}
html,body{overflow-x:hidden}
body{font-family:'Cairo',Tahoma,Arial,sans-serif;background:#f8fafc;color:var(--ink);line-height:1.75;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,h5,h6,.font-bold,strong{font-family:'Cairo',Tahoma,Arial,sans-serif}
p{line-height:1.95}

.container{max-width:1200px}
.section-pad{padding-top:5rem;padding-bottom:5rem}
.hero-grid{background:radial-gradient(circle at top right, rgba(37,99,235,.12), transparent 36%),linear-gradient(135deg,#f8fbff 0%,#ffffff 52%,#eef4ff 100%);border:1px solid rgba(37,99,235,.09)}
.brand-shadow{box-shadow:0 20px 60px rgba(15,23,42,.08)}
.brand-card{background:linear-gradient(180deg,#0f172a 0%,#162344 100%);color:#fff;box-shadow:0 18px 42px rgba(15,23,42,.22)}
.premium-line{height:3px;width:76px;background:linear-gradient(90deg,var(--brand),var(--gold));border-radius:999px;display:inline-block}
.info-pill{background:#fff;border:1px solid var(--line);border-radius:1rem;padding:1rem 1.1rem;box-shadow:0 10px 30px rgba(15,23,42,.05)}
.service-card,.why-card,.ad-card,.faq-card,.contact-card,.mini-card{background:#fff;border:1px solid rgba(148,163,184,.22);border-radius:1.35rem;box-shadow:0 10px 30px rgba(15,23,42,.04)}
.service-card:hover,.why-card:hover,.ad-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(15,23,42,.08)}
.service-card,.why-card,.ad-card{transition:.25s ease}
.ad-card{background:linear-gradient(180deg,#0f172a 0%,#1d4ed8 100%);color:#fff;border-color:rgba(255,255,255,.1)}
.contact-panel{background:linear-gradient(180deg,#0f172a 0%,#15213f 100%);color:#fff;border-radius:1.6rem}
.glass-chip{background:rgba(37,99,235,.08);border:1px solid rgba(37,99,235,.1);color:#1e40af}
.hero-badge{background:rgba(15,23,42,.04);border:1px solid rgba(15,23,42,.08);color:#0f172a}
.dot-grid{background-image:radial-gradient(rgba(15,23,42,.08) 1px, transparent 1px);background-size:16px 16px}
.contact-input, .contact-select, .contact-textarea{width:100%;border:1px solid #cbd5e1;border-radius:1rem;background:#fff;padding:.95rem 1rem;color:#0f172a}
.contact-input:focus,.contact-select:focus,.contact-textarea:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 4px rgba(37,99,235,.12)}
.top-strip{font-size:.88rem;background:#fff;border-bottom:1px solid #e2e8f0}
.brand-logo{width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,#0f172a,#2563eb);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;box-shadow:0 12px 30px rgba(37,99,235,.22)}
header.site-nav{backdrop-filter:saturate(180%) blur(10px);background:rgba(255,255,255,.9);border-bottom:1px solid rgba(226,232,240,.8)}
.nav-link{color:#334155;font-weight:600}
.nav-link:hover{color:#2563eb}
.floating-wa{position:fixed;left:18px;bottom:18px;z-index:40;background:#22c55e;color:#fff;border-radius:999px;padding:.9rem 1rem;box-shadow:0 14px 30px rgba(34,197,94,.32)}
.floating-wa:hover{background:#16a34a;color:#fff}
.number-badge{width:48px;height:48px;border-radius:999px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;box-shadow:0 8px 20px rgba(15,23,42,.14)}
.bg-step-1{background:#2563eb}.bg-step-2{background:#16a34a}.bg-step-3{background:#f59e0b}.bg-step-4{background:#9333ea}
.footer-dark{background:#081227;color:#e2e8f0}
.footer-dark a{color:#cbd5e1}
.footer-dark a:hover{color:#fff}
@media (max-width: 991px){
  .section-pad{padding-top:4rem;padding-bottom:4rem}
}
@media (max-width: 767px){
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta a{width:100%;justify-content:center}
  .mobile-stack{display:flex;flex-direction:column;gap:.75rem}
}

.section-lead{max-width:58rem;margin-inline:auto} 
.hero-grid .info-pill{height:100%}
.service-card p,.why-card p,.ad-card p,.faq-card,.contact-panel p,.mini-card p{font-size:1rem}
.contact-card form label{color:#0f172a}
.footer-dark p,.footer-dark li,.footer-dark a{font-size:.98rem}
@media (max-width: 767px){
  h1{line-height:1.25!important}
  .hero-grid{padding:1.35rem}
  .brand-card{padding:1.25rem}
  .info-pill{padding:.9rem 1rem}
}
