/* Main Styles for Agency Site */
:root{
  --bg:#0b1220;
  --card:#101826;
  --text:#e6eefc;
  --muted:#a5b4c7;
  --primary:#3b82f6;
  --accent:#22d3ee;
  --success:#10b981;
  --warning:#f59e0b;
  --danger:#ef4444;
  --maxw:1200px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";line-height:1.6}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.header{position:sticky;top:0;background:rgba(11,18,32,.8);backdrop-filter:blur(8px);border-bottom:1px solid #1f2a3d;z-index:50}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.nav a.logo{font-weight:700;letter-spacing:.2px;color:#fff}
.nav ul{display:flex;gap:18px;list-style:none;margin:0;padding:0}
.nav ul a{color:var(--text);opacity:.9}
.nav .menu-btn{display:none;background:#1f2a3d;color:#fff;border:1px solid #263248;padding:8px 10px;border-radius:8px}
.hero{padding:72px 0 32px;background:linear-gradient(180deg,rgba(34,211,238,.08),rgba(34,211,238,0) 30%),radial-gradient(1000px 400px at 20% -10%,rgba(59,130,246,.2),transparent 60%);border-bottom:1px solid #162033}
.hero h1{font-size:clamp(28px,4vw,44px);line-height:1.15;margin:0 0 14px}
.hero p{max-width:760px;color:var(--muted);margin:0 0 22px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border-radius:10px;border:1px solid #28406e;background:#12203a;color:#eaf2ff}
.btn:hover{background:#142645}
.btn.primary{background:linear-gradient(180deg,#2563eb,#1d4ed8);border-color:#1e3a8a}
.btn.primary:hover{filter:brightness(1.05)}
.grid{display:grid;gap:18px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){.grid.cols-3{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.grid.cols-3,.grid.cols-2{grid-template-columns:1fr}.nav ul{display:none}.nav .menu-btn{display:inline-flex}}
.nav ul.open{display:flex}
@media(max-width:640px){
  .nav ul.open{display:flex !important;position:absolute;right:12px;top:64px;flex-direction:column;background:#0f192a;border:1px solid #1e2b43;border-radius:12px;padding:10px;gap:10px}
}
.card{background:var(--card);border:1px solid #1f2a3d;border-radius:14px;padding:18px}
.kpis{display:flex;gap:18px;flex-wrap:wrap}
.kpi{flex:1 1 180px;background:#0f192a;border:1px solid #1e2b43;border-radius:12px;padding:14px}
.section{padding:36px 0;border-bottom:1px solid #162033}
.section h2{font-size:24px;margin:0 0 12px}
.muted{color:var(--muted)}
.footer{padding:28px 0;background:#0a111d;border-top:1px solid #152035}
.footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:20px}
@media(max-width:800px){.footer .cols{grid-template-columns:1fr}}
.badges{display:flex;gap:10px;flex-wrap:wrap}
.badge{padding:6px 10px;border-radius:999px;border:1px solid #26415f;background:#112139;font-size:12px;color:#b9c7de}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border:1px solid #243246;padding:10px;text-align:left}
.banner{position:fixed;inset:auto 12px 12px 12px;background:#0f192a;border:1px solid #1e2b43;border-radius:12px;padding:12px;z-index:60}
.hidden{display:none}
.small{font-size:13px}
.label{display:inline-block;font-size:12px;color:#a8c1ff;background:#112139;border:1px solid #27426b;padding:2px 8px;border-radius:999px}
.hero .sub{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.service-card h3{margin:6px 0 6px}
.breadcrumbs{font-size:13px;color:var(--muted);margin-bottom:10px}
.main{min-height:50vh}

/* Enhanced visual polish */
.card{transition:transform .25s ease, box-shadow .25s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 10px 30px rgba(0,0,0,.25)}
.btn{transition:transform .2s ease, filter .2s ease}
.btn:hover{transform:translateY(-1px)}
.btn.primary{box-shadow:0 6px 20px rgba(37,99,235,.35)}
.badge{box-shadow:inset 0 0 0 1px rgba(59,130,246,.25)}

/* Gradient text utility */
.gradient{background:linear-gradient(90deg,var(--accent),var(--primary));-webkit-background-clip:text;background-clip:text;color:transparent}

/* Section divider */
.section{position:relative}
.section::after{content:"";display:block;height:1px;background:linear-gradient(90deg,transparent,#1b2740,transparent);margin-top:24px;opacity:.8}

/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1;transform:none}

/* Fancy hero accents */
.hero{position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:-20% -10% auto auto;width:420px;height:420px;background:radial-gradient(circle at 30% 30%,rgba(34,211,238,.18),transparent 60%);filter:blur(20px);pointer-events:none}
.hero::after{content:"";position:absolute;inset:auto auto -25% -10%;width:520px;height:520px;background:radial-gradient(circle at 70% 70%,rgba(59,130,246,.16),transparent 60%);filter:blur(22px);pointer-events:none}

/* Subtle table polish */
.table th{background:#0f192a;color:#cfe0ff}
.table tr:hover td{background:#0e1727}

/* Typography & spacing */
h1,h2,h3{line-height:1.2}
h1{font-size:clamp(28px,4.5vw,44px)}
h2{font-size:clamp(20px,3vw,28px)}
h3{font-size:clamp(16px,2.2vw,20px)}
.prose p{margin:0 0 12px}
.prose ul{margin:0 0 12px;padding-left:18px}
.prose li{margin:4px 0;color:var(--muted)}

/* Header shadow on scroll */
.header.scrolled{box-shadow:0 8px 24px rgba(0,0,0,.25)}

/* Anchor offset for sticky header */
section,[id]{scroll-margin-top:80px}

/* Pros/Cons list and utilities */
.text-center{ text-align:center }
.pros, .cons{ list-style:none; padding-left:0 }
.pros li, .cons li{ position:relative; padding-left:20px }
.pros li::before{ content:'✓'; position:absolute; left:0; color:var(--success) }
.cons li::before{ content:'✗'; position:absolute; left:0; color:var(--danger) }
/* Nav active link */
.nav ul a.active{ color:#fff; border-bottom:2px solid var(--accent); padding-bottom:2px }

/* Back to top */
.back-to-top{ position:fixed; right:16px; bottom:16px; z-index:70; display:none; align-items:center; justify-content:center; width:40px; height:40px; border-radius:999px; border:1px solid #26415f; background:#0f192a; color:#cfe0ff; box-shadow:0 10px 30px rgba(0,0,0,.25) }
.back-to-top.show{ display:inline-flex }
.back-to-top:hover{ filter:brightness(1.05) }

/* Section header */
.section-header{ text-align:center; margin:0 0 16px }
.section-header h2{ margin:0 0 6px }
.section-header .muted{ max-width:800px; margin:0 auto }

/* CTA section */
.cta-section{ background:linear-gradient(180deg, rgba(34,211,238,.06), rgba(34,211,238,0)); }
.cta-section .btn.large{ padding:14px 22px; font-size:16px }

/* Secondary button */
.btn.secondary{ background:#0f1a2b; border-color:#27426b; color:#cfe0ff }

/* Check list */
.check-list{ list-style:none; padding-left:0 }
.check-list li{ position:relative; padding-left:20px }
.check-list li::before{ content:'\2713'; position:absolute; left:0; color:#10b981 }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important }
}


/* Content imagery */
.hero-image{ width:100%; max-width:960px; border-radius:12px; margin:12px auto; display:block; aspect-ratio: 16/9; }
.card-icon{ width:64px; height:auto; margin-bottom:8px; display:block }
/* Neon/glow utilities (data-added-neon) */
.neon { color: var(--text); text-shadow: 0 0 6px rgba(34,211,238,.6), 0 0 14px rgba(34,211,238,.5), 0 0 24px rgba(59,130,246,.4); }
.neon-accent { color: var(--accent); text-shadow: 0 0 8px rgba(34,211,238,.75), 0 0 18px rgba(34,211,238,.55), 0 0 30px rgba(59,130,246,.45); }
.gradient-strong { background: linear-gradient(90deg, var(--accent) 0%, var(--primary) 50%, #7dd3fc 100%); -webkit-background-clip:text; background-clip:text; color:transparent; filter: drop-shadow(0 0 8px rgba(34,211,238,.25)); }
@keyframes neonPulse { 0%,100% { text-shadow: 0 0 6px rgba(34,211,238,.6), 0 0 14px rgba(34,211,238,.5), 0 0 24px rgba(59,130,246,.4); } 50% { text-shadow: 0 0 10px rgba(34,211,238,.8), 0 0 22px rgba(34,211,238,.65), 0 0 36px rgba(59,130,246,.55); } }
.neon-pulse { animation: neonPulse 2.6s ease-in-out infinite; }
.glow-border { box-shadow: 0 0 0 1px rgba(34,211,238,.35), inset 0 0 24px rgba(34,211,238,.12); }

/* Feature bar utility */
.feature-bar{ display:inline-flex; align-items:center; gap:8px; margin-top:10px }


/* Footer revamp */
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:24px}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.footer-grid{grid-template-columns:1fr}}
.footer h4{margin:0 0 8px;font-size:14px;color:#cfe0ff;text-transform:uppercase;letter-spacing:.04em}
.footer a{display:block;color:var(--muted);margin:4px 0;opacity:.9}
.footer a:hover{color:#fff;opacity:1;text-decoration:none}
.bottom-footer{border-top:1px solid #152035;margin-top:12px;padding-top:12px}
.footer-brand p{max-width:420px}


/* Process Cards - Web Design Section */
.process-card {
  position: relative;
  background: var(--card);
  border: 1px solid #1f2a3d;
  border-radius: 14px;
  padding: 24px;
  transition: all 0.3s ease;
}
.process-card:hover {
  transform: translateY(-4px);
  border-color: rgba(34,211,238,0.4);
  box-shadow: 0 12px 32px rgba(0,0,0,0.3), 0 0 0 1px rgba(34,211,238,0.2);
}
.step-num {
  display: inline-block;
  width: 48px;
  height: 48px;
  line-height: 48px;
  text-align: center;
  background: linear-gradient(135deg, rgba(34,211,238,0.15), rgba(59,130,246,0.15));
  border: 2px solid rgba(34,211,238,0.3);
  border-radius: 50%;
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 16px;
  transition: all 0.3s ease;
}
.process-card:hover .step-num {
  transform: scale(1.1) rotate(5deg);
  background: linear-gradient(135deg, rgba(34,211,238,0.25), rgba(59,130,246,0.25));
  border-color: var(--accent);
  box-shadow: 0 0 20px rgba(34,211,238,0.4);
}
.process-card h4 {
  margin: 0 0 12px;
  font-size: 18px;
  color: #fff;
}
.process-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

/* Feature Block */
.feature-block {
  margin-top: 20px;
  padding: 16px;
  background: rgba(15,25,42,0.5);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
}
.feature-block h4 {
  margin: 0 0 8px;
  font-size: 16px;
  color: var(--accent);
}
.feature-block p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

/* Image Showcase */
.image-showcase {
  position: relative;
}
.ad-preview {
  position: relative;
  overflow: hidden;
}
.ad-preview .tag {
  position: absolute;
  top: 12px;
  right: 12px;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(16,185,129,0.4);
}

/* Utilities */
.shadow-sm { box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.mb-4 { margin-bottom: 2rem; }
.content-text { padding-right: 20px; }
@media(max-width: 900px) { .content-text { padding-right: 0; } }
.grid.align-center { align-items: center; }
.bg-light { background: linear-gradient(180deg, rgba(15,25,42,0.3), rgba(15,25,42,0.1)); }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.sub-badges { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }