:root{
  --bg:#0b0b0f; --bg-alt:#0f1218; --text:#f7fbff; --muted:#a7b0c0;
  --pink:#ec4899; --blue:#0ea5e9; --green:#10b981;
  --glow1:0 0 30px rgba(236,72,153,.55); --glow2:0 0 40px rgba(14,165,233,.45);
  --radius:22px; --radius-xl:28px; --shadow:0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:radial-gradient(1200px 600px at 10% 10%, #111827 0%, #0b0b0f 50%, #07070b 100%);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.5}
img{max-width:100%;display:block;border-radius:16px}
.container{width:min(1200px,92%);margin-inline:auto}
.lead{color:var(--muted)}
.hidden{display:none}

.navbar{position:sticky;top:0;z-index:1000;background:rgba(10,12,17,.6);backdrop-filter: blur(12px);border-bottom:1px solid rgba(255,255,255,.06)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);font-weight:700}
.logo{width:28px;height:28px;filter:drop-shadow(var(--glow2))}
.nav-links{display:flex;gap:18px;align-items:center;position:relative}
.nav-links a{color:var(--text);text-decoration:none;opacity:.9}
.btn-nav{padding:.5rem .9rem;border:1px solid #ffffff22;border-radius:999px}
.has-mega{position:relative}
.with-caret::after{content:"▾";margin-left:6px;font-size:.8rem;opacity:.7}
.mega{position:absolute;top:36px;left:-40px;background:#0c1016;border:1px solid #ffffff18;border-radius:18px;padding:16px;display:none;gap:30px;box-shadow:var(--shadow)}
.mega a{display:block;padding:6px 0;opacity:.85}
.has-mega:hover .mega{display:grid;grid-template-columns:repeat(3,180px)}

.hero{padding:96px 0 40px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:-20% -10% auto -10%;height:70%;background:radial-gradient(700px 400px at 20% 20%, rgba(14,165,233,.3), rgba(236,72,153,.15) 40%, transparent 60%);filter:blur(40px);pointer-events:none}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center}
.hero-copy h1{font-size: clamp(2.4rem, 6vw, 4.6rem);margin:0 0 10px}
.glow{text-shadow: var(--glow1), var(--glow2)}
.hero-copy p{font-size:1.15rem;color:#dbe7ff}
.cta-row{display:flex;gap:12px;margin:18px 0 10px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.9rem 1.2rem;border-radius:16px;border:1px solid #ffffff22;text-decoration:none;color:var(--text);box-shadow:var(--shadow)}
.btn-primary{background:linear-gradient(120deg, var(--blue), var(--pink));border:0}
.btn-secondary{background:#10131a}
.bullets{list-style:none;padding-left:0;color:var(--muted)}
.bullets li{margin:6px 0}

.ticker{display:flex;gap:60px;white-space:nowrap;overflow:hidden;border-top:1px solid #ffffff10;border-bottom:1px solid #ffffff10;padding:10px 0;margin-top:20px;color:#cfe6ff99;font-weight:600}
.ticker span{animation:marquee 28s linear infinite}
@keyframes marquee{to{transform:translateX(-100%)}}

.section{padding:80px 0}
.section.alt{background:linear-gradient(180deg, #0c1016 0%, #0b0b0f 100%)}
h2{font-size: clamp(1.8rem, 4vw, 2.6rem);margin:0 0 10px}
.grid{display:grid;gap:22px}
.cards{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:#0d1118;border:1px solid #ffffff12;border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}

.reasons{grid-template-columns:repeat(4,1fr)}
.reason{background:#0d1118;border:1px solid #ffffff12;padding:18px;border-radius:var(--radius)}
.social-proof{display:flex;gap:12px;margin-top:16px}
.badge{border:1px solid #ffffff24;border-radius:999px;padding:.4rem .8rem;background:#0b0f16}

.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.step{background:#0d1118;border:1px solid #ffffff12;padding:18px;border-radius:var(--radius);position:relative}
.step span{position:absolute;top:10px;right:12px;color:#7bd3ff;font-weight:800;opacity:.7}

.gallery{grid-template-columns:repeat(3,1fr)}
.gallery figure{margin:0;background:#0b0f16;border:1px solid #ffffff10;padding:10px;border-radius:18px}
.gallery figcaption{text-align:center;margin-top:8px;color:#c7d3ea}

.pricing{grid-template-columns:repeat(3,minmax(0,1fr))}
.price-card{background:#0b0e14;border:1px solid #ffffff14;border-radius:var(--radius-xl);padding:22px;position:relative;box-shadow:var(--shadow)}
.price-card .price{font-size:2rem;margin:6px 0 10px;text-shadow:var(--glow2)}
.price-card .btn{margin-top:8px}
.price-card.featured{border-color:#ffffff35;box-shadow:0 0 0 1px #ffffff18, var(--shadow)}
.ribbon{position:absolute;top:16px;left:-10px;background:linear-gradient(120deg,var(--blue),var(--pink));padding:4px 12px;border-radius:999px;color:white;font-size:.8rem}

.payments{margin-top:26px}
.pill{display:inline-block;border:1px solid #ffffff30;padding:.35rem .7rem;border-radius:999px;margin-right:10px}

.contact{background: radial-gradient(800px 400px at 90% 10%, rgba(236,72,153,.3), transparent), radial-gradient(800px 400px at 10% 80%, rgba(14,165,233,.35), transparent)}
.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:16px;background:#0c1020;border:1px solid #ffffff18;border-radius:26px;padding:22px;box-shadow:0 20px 50px rgba(0,0,0,.35), 0 0 60px rgba(14,165,233,.25), 0 0 60px rgba(236,72,153,.25)}
.contact-form label{display:flex;flex-direction:column;gap:6px}
.contact-form label.full{grid-column:1/-1}
.contact-form input,.contact-form textarea{background:#0b0e16;border:1px solid #273042;color:#eaf2ff;border-radius:14px;padding:12px 14px;outline:none}
.contact-form input:focus,.contact-form textarea:focus{border-color:#4cc9ff;box-shadow:0 0 0 3px #4cc9ff22}
.form-status{margin-left:12px;color:#9be8ff}

.footer{border-top:1px solid #ffffff10;padding:24px 0;background:#090b10}
.foot-inner{display:flex;justify-content:space-between;align-items:center;color:#aab8d6}
.tiny{font-size:.9rem;opacity:.75}

@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr 1fr}
  .reasons{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
  .pricing{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr}
  .contact-form{grid-template-columns:1fr}
}


/* ===== Neon section gradients (unique per section) ===== */
@keyframes floatGlow { 
  0% { transform: translate3d(0,0,0) scale(1); filter:blur(40px); opacity:.65; }
  50% { transform: translate3d(10px,-6px,0) scale(1.06); filter:blur(46px); opacity:.8; }
  100% { transform: translate3d(0,0,0) scale(1); filter:blur(40px); opacity:.65; }
}
@keyframes huePulse {
  0% { filter: hue-rotate(0deg) }
  50% { filter: hue-rotate(25deg) }
  100% { filter: hue-rotate(0deg) }
}

/* HERO — pink/blue cinematic */
.hero{background: radial-gradient(900px 500px at 20% 20%, rgba(236,72,153,.28), transparent 60%), radial-gradient(900px 500px at 80% 10%, rgba(14,165,233,.25), transparent 70%), radial-gradient(700px 400px at 50% 120%, rgba(168,85,247,.18), transparent 70%)}
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(400px 220px at 65% 35%, rgba(56,189,248,.25), transparent 60%);
  animation: floatGlow 10s ease-in-out infinite;
}

/* SERVICES — deep navy with magenta/violet sweep */
#services{position:relative; overflow:hidden}
#services::before{
  content:""; position:absolute; inset:-10% -10% -20% -10%; z-index:-1;
  background:
    radial-gradient(600px 300px at 15% 30%, rgba(219,39,119,.28), transparent 60%),
    radial-gradient(700px 360px at 85% 20%, rgba(168,85,247,.22), transparent 70%),
    linear-gradient(180deg, rgba(2,6,23,.55), rgba(2,6,23,.2));
  animation: floatGlow 12s ease-in-out infinite;
}

/* WHY US — neon yellow + green aura */
#whyus{position:relative; overflow:hidden}
#whyus::before{
  content:""; position:absolute; inset:-10% -10% -10% -10%; z-index:-1;
  background:
    radial-gradient(700px 360px at 20% 80%, rgba(250,204,21,.32), transparent 60%),
    radial-gradient(500px 280px at 85% 25%, rgba(16,185,129,.28), transparent 65%);
  animation: floatGlow 11s ease-in-out infinite;
}

/* PROCESS — blue/pink laser diagonals */
#process{position:relative; overflow:hidden}
#process::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    repeating-linear-gradient(110deg, rgba(14,165,233,.10) 0 2px, transparent 2px 12px),
    linear-gradient(120deg, rgba(14,165,233,.22), rgba(236,72,153,.18));
  mix-blend-mode: screen; opacity:.7; animation: huePulse 14s ease-in-out infinite;
}

/* PORTFOLIO — dark with yellow/pink blobs */
#portfolio{position:relative; overflow:hidden}
#portfolio::before{
  content:""; position:absolute; inset:-15% -15% -10% -15%; z-index:-1;
  background:
    radial-gradient(520px 300px at 18% 20%, rgba(250,204,21,.25), transparent 65%),
    radial-gradient(580px 340px at 82% 70%, rgba(236,72,153,.22), transparent 70%),
    radial-gradient(420px 260px at 60% 10%, rgba(56,189,248,.18), transparent 70%);
  animation: floatGlow 13s ease-in-out infinite;
}

/* PRICING — diagonal tri‑color sweep */
#pricing{position:relative; overflow:hidden}
#pricing::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background: linear-gradient(135deg, rgba(236,72,153,.18), rgba(56,189,248,.15) 45%, rgba(168,85,247,.16) 100%);
}

/* FAQ — soft neon tips */
#faq{position:relative; overflow:hidden}
#faq::before{
  content:""; position:absolute; inset:-10% -10% -10% -10%; z-index:-1;
  background:
    radial-gradient(420px 240px at 16% 30%, rgba(56,189,248,.22), transparent 65%),
    radial-gradient(420px 240px at 84% 70%, rgba(250,204,21,.22), transparent 65%);
  filter:saturate(1.1);
}

/* CONTACT — strong dual glow */
#contact{position:relative; overflow:hidden}
#contact::before{
  content:""; position:absolute; inset:-15% -10% -15% -10%; z-index:-1;
  background:
    radial-gradient(700px 420px at 90% 10%, rgba(236,72,153,.35), transparent 70%),
    radial-gradient(800px 460px at 10% 80%, rgba(14,165,233,.38), transparent 70%);
  animation: floatGlow 12s ease-in-out infinite;
}
/* Extra card glow accents */
.card, .reason, .price-card, .gallery figure{
  box-shadow: 0 0 0 1px #ffffff10, 0 12px 40px rgba(0,0,0,.35), 0 0 60px rgba(14,165,233,.10), 0 0 60px rgba(236,72,153,.10);
}


/* Extra saturated, multi-layer neon backgrounds */
:root{
  --neon-pink: rgba(236,72,153,.45);
  --neon-blue: rgba(56,189,248,.40);
  --neon-yellow: rgba(250,204,21,.40);
  --neon-green: rgba(16,185,129,.36);
  --neon-purple: rgba(168,85,247,.38);
}
.gradient-text{background:linear-gradient(90deg,#fff, #e879f9, #60a5fa, #facc15); -webkit-background-clip:text; background-clip:text; color:transparent}
.gradient-text.g1{background-image:linear-gradient(90deg,#f472b6,#60a5fa)}
.gradient-text.g2{background-image:linear-gradient(90deg,#60a5fa,#facc15)}
.gradient-text.g3{background-image:linear-gradient(90deg,#a78bfa,#34d399)}

.lead-xl{font-size:1.2rem;color:#dae6ff;max-width:60ch}
.badge-row{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0 8px}

/* Animated blob helper (used per section via ::after) */
.blobbed::after{
  content:""; position:absolute; inset:-15%; z-index:-2; pointer-events:none;
  background:
    radial-gradient(800px 500px at 20% 20%, var(--neon-pink), transparent 60%),
    radial-gradient(900px 520px at 85% 15%, var(--neon-blue), transparent 65%),
    radial-gradient(700px 420px at 60% 120%, var(--neon-purple), transparent 70%),
    radial-gradient(600px 360px at -10% 80%, var(--neon-yellow), transparent 70%);
  animation: megaGlow 16s ease-in-out infinite;
  filter: blur(6px) saturate(1.2);
}
@keyframes megaGlow{
  0%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(12px,-10px,0)}
  100%{transform:translate3d(0,0,0)}
}

/* Apply stronger blobs per section */
.hero, #services, #whyus, #process, #portfolio, #pricing, #faq, #contact{position:relative}
.hero.blobbed::after{opacity:.55}
#services.blobbed::after{opacity:.50}
#whyus.blobbed::after{opacity:.50}
#process.blobbed::after{opacity:.45}
#portfolio.blobbed::after{opacity:.55}
#pricing.blobbed::after{opacity:.48}
#faq.blobbed::after{opacity:.42}
#contact.blobbed::after{opacity:.58}


/* Animated gradient backgrounds for each section */
@keyframes gradientShift {
  0% {background-position:0% 50%}
  50% {background-position:100% 50%}
  100% {background-position:0% 50%}
}

.hero{
  background: linear-gradient(270deg, #ec4899, #3b82f6);
  background-size: 400% 400%;
  animation: gradientShift 18s ease infinite;
}
#services{
  background: linear-gradient(270deg, #a855f7, #ec4899);
  background-size: 400% 400%;
  animation: gradientShift 20s ease infinite;
}
#whyus{
  background: linear-gradient(270deg, #facc15, #10b981);
  background-size: 400% 400%;
  animation: gradientShift 22s ease infinite;
}
#process{
  background: linear-gradient(270deg, #06b6d4, #3b82f6);
  background-size: 400% 400%;
  animation: gradientShift 24s ease infinite;
}
#portfolio{
  background: linear-gradient(270deg, #ec4899, #a855f7);
  background-size: 400% 400%;
  animation: gradientShift 20s ease infinite;
}
#pricing{
  background: linear-gradient(270deg, #f59e0b, #ec4899);
  background-size: 400% 400%;
  animation: gradientShift 26s ease infinite;
}
#faq{
  background: linear-gradient(270deg, #3b82f6, #f472b6);
  background-size: 400% 400%;
  animation: gradientShift 22s ease infinite;
}
#contact{
  background: linear-gradient(270deg, #ec4899, #22c55e);
  background-size: 400% 400%;
  animation: gradientShift 24s ease infinite;
}

/* ensure text contrast */
.section, .hero{color:white; position:relative}


/* Neon text styles */
.neon-text{
  color:#fff;
  text-shadow:0 0 8px rgba(255,255,255,.8),
              0 0 16px rgba(236,72,153,.7),
              0 0 28px rgba(14,165,233,.6);
}
h1,h2,h3{color:#fff;text-shadow:0 0 6px rgba(255,255,255,.6),0 0 14px rgba(14,165,233,.6),0 0 20px rgba(236,72,153,.7)}
p,li,figcaption,summary{color:#fff;text-shadow:0 0 4px rgba(255,255,255,.6)}

/* Neon card/box styles */
.card,.reason,.price-card,.gallery figure,.contact-form{
  background:rgba(255,255,255,.08);
  border:2px solid rgba(255,255,255,.3);
  backdrop-filter: blur(10px);
  border-radius:20px;
  box-shadow:0 0 12px rgba(236,72,153,.6),
             0 0 20px rgba(14,165,233,.5),
             0 0 28px rgba(250,204,21,.4);
}

/* Neon buttons */
.btn{
  background:transparent;
  border:2px solid #fff;
  color:#fff;
  text-shadow:0 0 6px rgba(255,255,255,.8);
  box-shadow:0 0 10px rgba(236,72,153,.6),0 0 16px rgba(14,165,233,.6);
  transition:all .3s ease;
}
.btn-primary{
  border-color:#ec4899;
  box-shadow:0 0 12px rgba(236,72,153,.8),0 0 20px rgba(14,165,233,.7);
}
.btn:hover{
  background:rgba(255,255,255,.1);
  transform:scale(1.05);
}

/* FAQ details neon border */
details{
  border:2px solid rgba(255,255,255,.4);
  border-radius:14px;
  padding:10px 14px;
  margin:10px 0;
  background:rgba(255,255,255,.05);
  box-shadow:0 0 10px rgba(236,72,153,.5),0 0 18px rgba(14,165,233,.5);
}
details[open]{background:rgba(255,255,255,.1)}


/* ===== Neon text & cards on colorful gradients ===== */

/* Section accent colors */
.hero{ --accent:#ec4899; --accent-glow: rgba(236,72,153,.7) }
#services{ --accent:#a855f7; --accent-glow: rgba(168,85,247,.7) }
#whyus{ --accent:#facc15; --accent-glow: rgba(250,204,21,.65) }
#process{ --accent:#06b6d4; --accent-glow: rgba(6,182,212,.7) }
#portfolio{ --accent:#ec4899; --accent-glow: rgba(236,72,153,.7) }
#pricing{ --accent:#f59e0b; --accent-glow: rgba(245,158,11,.7) }
#faq{ --accent:#3b82f6; --accent-glow: rgba(59,130,246,.7) }
#contact{ --accent:#22c55e; --accent-glow: rgba(34,197,94,.7) }

/* Global text color for readability on colorful backgrounds */
body, .section, .hero { color: #fff; }
p, li, .lead, .lead-xl { color: #f9fbff; text-shadow: 0 1px 1px rgba(0,0,0,.06) }

/* Neon headings */
h1, h2, h3 { color:#fff; text-shadow:
  0 0 8px var(--accent-glow),
  0 0 18px var(--accent-glow),
  0 2px 10px rgba(0,0,0,.15);
}

/* Neon cards/boxes: translucent light with accent border + glow */
.card, .reason, .step, .price-card, .gallery figure, .contact-form {
  background: rgba(255,255,255,.10);
  border: 2px solid color-mix(in hsl, var(--accent) 80%, white 20%);
  box-shadow:
    0 8px 30px rgba(0,0,0,.18),
    0 0 24px var(--accent-glow),
    0 0 60px color-mix(in srgb, var(--accent-glow) 50%, transparent);
  backdrop-filter: blur(8px) saturate(1.1);
}

/* List items and captions get subtle glow */
.gallery figcaption, .bullets li { text-shadow: 0 0 6px var(--accent-glow) }

/* Neon pills and badges */
.pill, .badge {
  border-color: color-mix(in hsl, var(--accent) 70%, white 30%);
  box-shadow: 0 0 14px var(--accent-glow);
  background: rgba(255,255,255,.12);
  color:#fff;
}

/* Buttons: gradient fill + glow, outline variant */
.btn-primary {
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 75%, #ffffff 0%), var(--accent));
  box-shadow: 0 0 18px var(--accent-glow), 0 6px 20px rgba(0,0,0,.2);
  border: 1px solid color-mix(in srgb, var(--accent) 80%, white 20%);
}
.btn-primary:hover { transform: translateY(-1px) scale(1.02) }
.btn-secondary {
  background: transparent;
  border: 2px solid color-mix(in srgb, var(--accent) 80%, white 20%);
  box-shadow: 0 0 14px var(--accent-glow) inset, 0 0 12px var(--accent-glow);
}

/* Contact inputs: light with neon focus */
.contact-form input, .contact-form textarea {
  background: rgba(255,255,255,.14);
  border-color: color-mix(in srgb, var(--accent) 40%, #ffffff 60%);
  color:#ffffff;
}
.contact-form input::placeholder, .contact-form textarea::placeholder { color:#eef3ffcc }
.contact-form input:focus, .contact-form textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent), 0 0 20px var(--accent-glow);
}

/* Navbar link glow on hover */
.nav-links a:hover { text-shadow: 0 0 8px var(--accent-glow) }

/* Fine-tune section paddings for full-color backgrounds */
.section, .hero { padding-top: 90px; padding-bottom: 90px }


/* Black theme with neon gradients */
html, body {
  background:#000 !important;
  color:#fff;
}

/* Animated neon blobs per section */
@keyframes neonBlob {
  0% {transform:translate(0,0) scale(1); opacity:.55}
  50% {transform:translate(20px,-15px) scale(1.1); opacity:.8}
  100% {transform:translate(0,0) scale(1); opacity:.55}
}
.section, .hero {position:relative; overflow:hidden}
.section::before, .hero::before{
  content:""; position:absolute; inset:-20%; z-index:-1;
  background: radial-gradient(600px 400px at 20% 30%, rgba(236,72,153,.4), transparent 70%),
              radial-gradient(700px 420px at 80% 40%, rgba(59,130,246,.35), transparent 70%),
              radial-gradient(500px 300px at 50% 90%, rgba(250,204,21,.28), transparent 70%);
  filter:blur(60px); animation: neonBlob 22s ease-in-out infinite;
}

/* Per-section accent overrides */
.hero::before {background:
  radial-gradient(700px 420px at 25% 25%, rgba(236,72,153,.5), transparent 70%),
  radial-gradient(800px 500px at 75% 20%, rgba(59,130,246,.45), transparent 70%);
}
#services::before {background:
  radial-gradient(600px 400px at 20% 50%, rgba(168,85,247,.5), transparent 70%),
  radial-gradient(700px 420px at 80% 40%, rgba(236,72,153,.45), transparent 70%);
}
#whyus::before {background:
  radial-gradient(600px 400px at 30% 30%, rgba(250,204,21,.5), transparent 70%),
  radial-gradient(600px 400px at 70% 70%, rgba(34,197,94,.45), transparent 70%);
}
#process::before {background:
  radial-gradient(600px 400px at 20% 40%, rgba(6,182,212,.5), transparent 70%),
  radial-gradient(600px 400px at 80% 50%, rgba(59,130,246,.45), transparent 70%);
}
#portfolio::before {background:
  radial-gradient(600px 400px at 25% 25%, rgba(236,72,153,.5), transparent 70%),
  radial-gradient(600px 400px at 75% 75%, rgba(168,85,247,.45), transparent 70%);
}
#pricing::before {background:
  radial-gradient(600px 400px at 30% 30%, rgba(245,158,11,.5), transparent 70%),
  radial-gradient(600px 400px at 70% 70%, rgba(236,72,153,.45), transparent 70%);
}
#faq::before {background:
  radial-gradient(600px 400px at 20% 40%, rgba(59,130,246,.5), transparent 70%),
  radial-gradient(600px 400px at 80% 60%, rgba(244,114,182,.45), transparent 70%);
}
#contact::before {background:
  radial-gradient(600px 400px at 20% 40%, rgba(236,72,153,.5), transparent 70%),
  radial-gradient(600px 400px at 80% 60%, rgba(34,197,94,.45), transparent 70%);
}


/* ===== BLACK THEME + NEON BLOBS ===== */

/* Base black background */
html, body { background:#000 !important; }
.section, .hero { background: transparent !important; position: relative; }

/* Disable previous animated full gradients */
.hero, #services, #whyus, #process, #portfolio, #pricing, #faq, #contact {
  animation: none !important;
  background: transparent !important;
}

/* Generic blob animation */
@keyframes blobDrift {
  0% { transform: translate3d(0,0,0) scale(1); filter: blur(42px); opacity:.65; }
  50% { transform: translate3d(18px,-12px,0) scale(1.06); filter: blur(48px); opacity:.85; }
  100% { transform: translate3d(0,0,0) scale(1); filter: blur(42px); opacity:.65; }
}

/* Helper: create layered neon blobs on black via ::before and ::after */
.neon-blobbed::before, .neon-blobbed::after {
  content:""; position:absolute; inset:-18% -12% -18% -12%; z-index:-1; pointer-events:none;
  background: transparent;
  mix-blend-mode: screen;
}
.neon-blobbed::before { animation: blobDrift 16s ease-in-out infinite; }
.neon-blobbed::after  { animation: blobDrift 20s ease-in-out infinite reverse; }

/* Section-specific blob palettes */
.hero.neon-blobbed::before {
  background:
    radial-gradient(780px 480px at 20% 25%, rgba(236,72,153,.55), transparent 65%),
    radial-gradient(820px 520px at 78% 18%, rgba(59,130,246,.45), transparent 70%);
}
.hero.neon-blobbed::after {
  background:
    radial-gradient(720px 460px at 55% 120%, rgba(168,85,247,.35), transparent 70%);
}

#services.neon-blobbed::before {
  background:
    radial-gradient(720px 420px at 18% 30%, rgba(168,85,247,.55), transparent 65%),
    radial-gradient(680px 380px at 86% 22%, rgba(236,72,153,.42), transparent 70%);
}
#services.neon-blobbed::after {
  background:
    radial-gradient(540px 320px at -10% 80%, rgba(56,189,248,.35), transparent 70%);
}

#whyus.neon-blobbed::before {
  background:
    radial-gradient(760px 420px at 22% 82%, rgba(250,204,21,.55), transparent 65%),
    radial-gradient(620px 360px at 84% 24%, rgba(34,197,94,.45), transparent 70%);
}
#whyus.neon-blobbed::after {
  background:
    radial-gradient(520px 300px at 60% 10%, rgba(56,189,248,.25), transparent 70%);
}

#process.neon-blobbed::before {
  background:
    radial-gradient(740px 420px at 18% 18%, rgba(56,189,248,.50), transparent 65%),
    radial-gradient(720px 420px at 82% 70%, rgba(236,72,153,.40), transparent 70%);
}
#process.neon-blobbed::after {
  background:
    radial-gradient(540px 320px at 50% 110%, rgba(168,85,247,.30), transparent 70%);
}

#portfolio.neon-blobbed::before {
  background:
    radial-gradient(760px 420px at 16% 22%, rgba(236,72,153,.55), transparent 65%),
    radial-gradient(760px 420px at 84% 72%, rgba(250,204,21,.45), transparent 70%);
}
#portfolio.neon-blobbed::after {
  background:
    radial-gradient(520px 320px at 50% 10%, rgba(59,130,246,.30), transparent 70%);
}

#pricing.neon-blobbed::before {
  background:
    radial-gradient(760px 420px at 20% 30%, rgba(245,158,11,.55), transparent 65%),
    radial-gradient(760px 420px at 86% 28%, rgba(236,72,153,.40), transparent 70%);
}
#pricing.neon-blobbed::after {
  background:
    radial-gradient(520px 320px at 60% 105%, rgba(168,85,247,.30), transparent 70%);
}

#faq.neon-blobbed::before {
  background:
    radial-gradient(720px 420px at 18% 32%, rgba(59,130,246,.50), transparent 65%),
    radial-gradient(680px 380px at 84% 72%, rgba(244,114,182,.38), transparent 70%);
}
#faq.neon-blobbed::after {
  background:
    radial-gradient(520px 320px at 50% 8%, rgba(250,204,21,.30), transparent 70%);
}

#contact.neon-blobbed::before {
  background:
    radial-gradient(820px 500px at 88% 16%, rgba(236,72,153,.55), transparent 65%),
    radial-gradient(760px 420px at 12% 84%, rgba(34,197,94,.45), transparent 70%);
}
#contact.neon-blobbed::after {
  background:
    radial-gradient(520px 320px at 60% 12%, rgba(56,189,248,.30), transparent 70%);
}

/* Apply helper class to all sections */
.hero, #services, #whyus, #process, #portfolio, #pricing, #faq, #contact { }


/* ===== Dowalony navbar ===== */
.navbar{
  position:sticky; top:0; z-index:1000;
  background: rgba(5,5,8,.55);
  backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid #ffffff1a;
  box-shadow: 0 10px 30px rgba(0,0,0,.55), 0 0 30px rgba(14,165,233,.15), 0 0 30px rgba(236,72,153,.15);
}
.nav-inner{ padding: 16px 0 }
.brand .logo{ width:36px; height:36px }
.brand span{ font-size:1.05rem; letter-spacing:.3px }
.nav-links{ gap:22px }
.nav-links a{ font-weight:600 }
.btn-nav.btn-cta{
  padding:.6rem 1.05rem;
  border:2px solid #ffffff30;
  background: linear-gradient(90deg, rgba(14,165,233,.25), rgba(236,72,153,.25));
  box-shadow: 0 0 16px rgba(14,165,233,.35), 0 0 16px rgba(236,72,153,.35);
  border-radius:14px;
}
.btn-nav.btn-cta:hover{ transform: translateY(-1px); box-shadow: 0 0 26px rgba(14,165,233,.55), 0 0 26px rgba(236,72,153,.55) }

/* Social icons (pure CSS) */
.nav-socials, .foot-socials{ display:flex; align-items:center; gap:10px }
.nav-socials{ margin-right:6px }
.ico{ width:28px; height:28px; display:inline-block; border-radius:10px; position:relative; overflow:hidden; border:1px solid #ffffff26; background:#0e1220 }
.ico::after{ content:""; position:absolute; inset:0; mask-size:60% 60%; mask-repeat:no-repeat; mask-position:center }
.ico.ig{ box-shadow: 0 0 12px rgba(236,72,153,.5) }
.ico.ig::after{ background:linear-gradient(45deg,#feda75,#d62976,#fa7e1e,#962fbf,#4f5bd5); -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox=\'0 0 24 24\'><path fill=\'%23fff\' d=\'M7 2C4.239 2 2 4.239 2 7v10c0 2.761 2.239 5 5 5h10c2.761 0 5-2.239 5-5V7c0-2.761-2.239-5-5-5H7zm0 2h10c1.654 0 3 1.346 3 3v10c0 1.654-1.346 3-3 3H7c-1.654 0-3-1.346-3-3V7c0-1.654 1.346-3 3-3zm5 3a5 5 0 100 10 5 5 0 000-10zm6.5-.75a1.25 1.25 0 11-2.5 0 1.25 1.25 0 012.5 0z\'/></svg>'); mask-image: -webkit-mask-image }
.ico.fb{ box-shadow: 0 0 12px rgba(59,130,246,.5) }
.ico.fb::after{ background:#3b82f6; -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox=\'0 0 24 24\'><path fill=\'%23fff\' d=\'M22 12a10 10 0 10-11.5 9.875v-6.99H7.897V12h2.603V9.797c0-2.57 1.532-3.989 3.874-3.989 1.122 0 2.296.2 2.296.2v2.524h-1.293c-1.275 0-1.672.79-1.672 1.6V12h2.843l-.455 2.885h-2.388v6.99A10.002 10.002 0 0022 12z\'/></svg>'); mask-image: -webkit-mask-image }
.ico.mail{ box-shadow: 0 0 12px rgba(34,197,94,.5) }
.ico.mail::after{ background:#22c55e; -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox=\'0 0 24 24\'><path fill=\'%23fff\' d=\'M2 6.5A2.5 2.5 0 014.5 4h15A2.5 2.5 0 0122 6.5v11A2.5 2.5 0 0119.5 20h-15A2.5 2.5 0 012 17.5v-11zm2.5-.5a.5.5 0 00-.5.5v.217l8 5.283 8-5.283V6.5a.5.5 0 00-.5-.5h-15z\'/></svg>'); mask-image: -webkit-mask-image }

/* Footer layout tweak */
.foot-inner{ gap:12px }
.foot-socials a{ opacity:.95 }
.foot-socials a:hover{ transform:translateY(-1px) scale(1.03) }


/* Offer section */
.offers{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;margin-top:26px}
.offer-card{
  background: rgba(255,255,255,.08);
  border:2px solid #ffffff22;
  border-radius:18px;
  padding:20px;
  text-align:center;
  color:#fff;
  box-shadow:0 0 20px rgba(236,72,153,.25), 0 0 20px rgba(14,165,233,.25);
  backdrop-filter:blur(6px) saturate(1.2);
}
.offer-card h3{margin:12px 0 8px;font-size:1.2rem}
.offer-icon{font-size:2rem;margin-bottom:8px;text-shadow:0 0 12px rgba(255,255,255,.5)}


/* Brand: gradient W + title */
.logo-w{ width:38px; height:26px; filter: drop-shadow(0 0 10px rgba(79,70,229,.55)) drop-shadow(0 0 14px rgba(34,197,94,.35)) }
.brand-title{ font-weight:800; letter-spacing:.2px; font-size:1.05rem }

/* Falling neon flakes canvas */
#flakesCanvas{
  position:fixed; inset:0; pointer-events:none; z-index:0;
  opacity:.65; /* subtle overlay */
}
/* Ensure main content sits above */
.navbar, .hero, .section, .footer{ position:relative; z-index:1 }


/* ===== Mega menu: always on top, vivid, readable ===== */
.navbar{ z-index: 5000 }
.nav-links{ position:relative; z-index: 5001 }
.has-mega{ position:relative }
.mega{
  position:absolute; top:44px; left:-60px;
  display:none;
  background: rgba(10,12,18,.9);
  backdrop-filter: blur(12px) saturate(1.2);
  border:1px solid #ffffff2a;
  border-radius:18px;
  padding:18px 20px;
  gap:26px;
  grid-template-columns:repeat(3, 200px);
  box-shadow: 0 20px 50px rgba(0,0,0,.6), 0 0 30px rgba(14,165,233,.25), 0 0 30px rgba(236,72,153,.25);
  z-index: 6000;
  pointer-events:auto;
}
.has-mega:hover .mega,
.has-mega:focus-within .mega{ display:grid }
.mega h4{ margin:6px 0 8px; color:#fff; text-shadow:0 0 10px rgba(56,189,248,.5) }
.mega a{
  color:#eaf2ff; text-decoration:none; padding:6px 0; font-weight:600; opacity:.95;
}
.mega a:hover{
  text-shadow:0 0 10px rgba(236,72,153,.65), 0 0 10px rgba(56,189,248,.5);
  transform: translateX(2px);
}
/* Ensure content below doesn't overlap the menu */
.hero, .section{ z-index: 100; }


.hero-art img{
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,.55), 0 0 40px rgba(59,130,246,.25), 0 0 40px rgba(236,72,153,.25);
  width: 100%;
  height: auto;
}