/*
  Impulso Marketing Landing Page Styles
  Theme: Modern, futuristic, professional
  Colors: #0A1A2F (dark), #007BFF (blue), #FFFFFF (white)
  Fonts: Montserrat (bold headings), Poppins (body)
*/

:root {
  --bg-dark: #000814;
  --bg-deep: #001D3D;
  --primary: #00B4D8;
  --white: #FFFFFF;
  --text: #E8F6FF;
  --muted: #9ACAE0;
  --card: rgba(255, 255, 255, 0.06);
  --border: rgba(255, 255, 255, 0.12);
  --glow: 0 0 16px rgba(0, 180, 216, 0.6), 0 0 36px rgba(0, 180, 216, 0.4);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(0, 180, 216, 0.15), transparent 60%),
    radial-gradient(900px 500px at 80% 0%, rgba(0, 180, 216, 0.12), transparent 60%),
    linear-gradient(180deg, var(--bg-deep), var(--bg-dark));
  line-height: 1.6;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus { left: 1rem; top: 1rem; width: auto; height: auto; background: #000; color: #fff; padding: .5rem .75rem; border-radius: .5rem; }

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

/* Hero */
.hero {
  position: relative;
  min-height: 92vh;
  display: grid;
  align-items: center;
  padding: 5rem 0 3rem;
  overflow: hidden;
}
.hero__content { max-width: 900px; }
.hero__title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 4vw + 1rem, 3.25rem);
  line-height: 1.1;
  margin: 0 0 1rem;
  letter-spacing: 0.2px;
}
.text-neon { color: var(--white); text-shadow: 0 0 10px rgba(0,123,255,0.5), 0 0 30px rgba(0,123,255,0.35); }
.hero__subtitle { color: var(--muted); font-size: 1.05rem; margin: 0 0 2rem; }
.hero__cta { display: flex; gap: 1rem; flex-wrap: wrap; }

.hero__bg {
  position: absolute;
  inset: -2px;
  overflow: hidden;
  pointer-events: none;
}
.hero__bg .layer { position: absolute; inset: 0; }
/* Futuristic grid */
.layer--grid {
  background-image: 
    radial-gradient(circle at 50% 50%, rgba(0, 180, 216, 0.12), transparent 40%),
    linear-gradient(rgba(0, 180, 216, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 180, 216, 0.08) 1px, transparent 1px);
  background-size: 100% 100%, 80px 80px, 80px 80px;
  background-position: center, center, center;
  filter: drop-shadow(0 0 20px rgba(0, 180, 216, 0.15));
  opacity: .35;
}
/* Floating particles */
.layer--particles::before,
.layer--particles::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(6px 6px at 10% 20%, rgba(0,180,216,.7), transparent 40%),
              radial-gradient(6px 6px at 70% 30%, rgba(0,180,216,.6), transparent 40%),
              radial-gradient(6px 6px at 40% 80%, rgba(0,180,216,.6), transparent 40%);
  animation: floatParticles 12s linear infinite;
  opacity: .4;
}
/* Glowing aura */
.layer--glow {
  background: radial-gradient(400px 200px at 20% 20%, rgba(0,180,216,.25), transparent 60%),
              radial-gradient(500px 250px at 80% 30%, rgba(0,180,216,.2), transparent 65%);
  mix-blend-mode: screen;
}
@keyframes floatParticles {
  0% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
  100% { transform: translateY(0); }
}

/* Sections */
.section { padding: 4rem 0; }
.section--alt { background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)); }
.section__header { text-align: center; margin-bottom: 2rem; }
.section__title { font-family: 'Montserrat', sans-serif; font-weight: 800; margin: 0; }
.section__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

/* Cards */
.card { border: 1px solid var(--border); border-radius: 16px; padding: 1.25rem; background: var(--card); backdrop-filter: blur(10px); }
.card--glass { box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.card--service { text-align: center; padding: 1.75rem; transition: transform .25s ease, box-shadow .25s ease; }
.card--service:hover { transform: translateY(-4px); box-shadow: 0 10px 35px rgba(0,180,216,.18); }
.icon-wrap { width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 12px; margin-bottom: .85rem; color: var(--primary); background: rgba(0,180,216,0.1); box-shadow: inset 0 0 24px rgba(0,180,216,0.2); }

/* Services */
.service__icon { width: 70px; height: 70px; display: grid; place-items: center; margin: 0 auto .9rem; border-radius: 50%; background: rgba(0,180,216,0.12); color: var(--white); box-shadow: var(--glow); border: 1px solid rgba(255,255,255,0.15); }
.brand-facebook { background: radial-gradient(circle at 30% 30%, rgba(24,119,242,0.35), rgba(0,180,216,0.2)); }
.brand-instagram { background: radial-gradient(circle at 30% 30%, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5); }
.brand-tiktok { background: radial-gradient(circle at 30% 30%, #25F4EE, rgba(254,44,85,0.9)); }

.section__cta { text-align: center; margin-top: 2rem; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: .5rem; padding: .95rem 1.25rem; border-radius: 999px; border: 1px solid rgba(0,180,216,.2); text-decoration: none; font-weight: 700; letter-spacing:.2px; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.btn-primary { background: linear-gradient(180deg, #19c6eb, var(--primary)); color: var(--white); }
.btn-ghost { background: rgba(255,255,255,0.02); color: var(--text); border-color: rgba(255,255,255,0.12); }
.btn-glow { box-shadow: var(--glow); }
.btn:hover { transform: translateY(-2px); filter: brightness(1.05); }
.btn:active { transform: translateY(0); }
.neon-pulse { position: relative; }
.neon-pulse::after {
  content: '';
  position: absolute; inset: -6px; border-radius: 999px;
  box-shadow: 0 0 24px rgba(0,180,216,.35), 0 0 48px rgba(0,180,216,.25);
  opacity: .0; transition: opacity .25s ease;
}
.neon-pulse:hover::after { opacity: 1; }


/* Testimonial */
.testimonial blockquote { font-size: 1.2rem; margin: 0 0 .75rem; }
.testimonial figcaption { color: var(--muted); }

/* Footer */
.footer { border-top: 1px solid var(--border); padding: 2rem 0; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.03)); }
.footer__grid { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* Animations */
.reveal { opacity: 0; transform: translateY(12px); animation: fadeUp .8s ease .2s forwards; }
.reveal-up { opacity: 0; transform: translateY(14px); animation: fadeUp .9s ease .15s forwards; }
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }
/* Parallax utility (via data attribute) applied with JS */
[data-parallax] { will-change: transform; }


/* Responsive */
@media (max-width: 900px) {
  .section__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .hero { padding-top: 4rem; }
  .section__grid { grid-template-columns: 1fr; }
  .footer__grid { flex-direction: column; align-items: flex-start; }
  .hero__title { font-size: clamp(1.8rem, 5vw + 1rem, 2.4rem); }
}

/* Authority */
.authority { border: 1px solid rgba(0,180,216,.25); position: relative; overflow: hidden; }
.authority p { margin: 0; font-size: 1.05rem; color: var(--text); }
.authority::before {
  content: '';
  position: absolute; inset: -30%; pointer-events: none;
  background: radial-gradient(500px 220px at 60% 50%, rgba(0,180,216,.18), transparent 60%);
  filter: blur(12px);
}