/* ===========================
   Agenciade — Premium Styles
   =========================== */

:root {
  --brand: #0052FF;
  --brand-hover: #003EDD;
  --grad-1: #0052FF;
  --grad-2: #7928CA;
  --grad-3: #FF0080;
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }

::selection { background: #0052FF; color: #fff; }

/* ---------- Buttons ---------- */
.btn-primary {
  display: inline-flex; align-items: center; gap: .5rem;
  background: #0A0A0A; color: #fff;
  padding: .85rem 1.5rem; border-radius: 999px;
  font-weight: 500; font-size: .95rem;
  box-shadow: 0 8px 24px -8px rgba(10,10,10,.45);
  transition: all .3s ease;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 32px -8px rgba(10,10,10,.55); }

.btn-secondary {
  display: inline-flex; align-items: center; gap: .5rem;
  background: #fff; color: #0A0A0A;
  border: 1px solid #E4E4E7;
  padding: .85rem 1.5rem; border-radius: 999px;
  font-weight: 500; font-size: .95rem;
  transition: all .3s ease;
}
.btn-secondary:hover { border-color: #A1A1AA; transform: translateY(-2px); }

.btn-ghost {
  display: inline-flex; align-items: center; gap: .35rem;
  color: #27272A; font-weight: 500; font-size: .95rem;
  padding: .85rem 1rem; transition: gap .3s ease;
}
.btn-ghost:hover { gap: .65rem; color: #0052FF; }

/* ---------- Typography helpers ---------- */
.gradient-text {
  background: linear-gradient(135deg, #0052FF 0%, #7928CA 50%, #FF0080 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.overline {
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem; text-transform: uppercase;
  letter-spacing: .22em; color: #0052FF; font-weight: 600;
}
.section-title { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: clamp(1.875rem, 4vw, 3.25rem); line-height: 1.05; letter-spacing: -0.02em; }
.section-sub { font-size: 1.125rem; color: #52525B; line-height: 1.7; max-width: 42rem; }

/* ---------- Hero mesh gradient ---------- */
.hero-mesh {
  position: absolute; inset: -10%;
  background:
    radial-gradient(circle at 20% 30%, rgba(0,82,255,0.12) 0%, transparent 40%),
    radial-gradient(circle at 80% 20%, rgba(255,0,128,0.10) 0%, transparent 40%),
    radial-gradient(circle at 50% 80%, rgba(121,40,202,0.10) 0%, transparent 50%);
  filter: blur(40px);
  animation: meshMove 20s ease-in-out infinite alternate;
  z-index: 0;
}
@keyframes meshMove {
  0% { transform: translate(0,0) scale(1); }
  50% { transform: translate(2%, -1%) scale(1.05); }
  100% { transform: translate(-2%, 1%) scale(1); }
}

.hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(10,10,10,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,10,10,0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at 50% 0%, #000 30%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 30%, transparent 70%);
  z-index: 0;
}

/* ---------- Floating cards ---------- */
.float-a { animation: floatA 8s ease-in-out infinite; }
.float-b { animation: floatB 9s ease-in-out infinite; }
.float-c { animation: floatC 10s ease-in-out infinite; }
@keyframes floatA { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
@keyframes floatB { 0%,100%{transform:translateY(0)} 50%{transform:translateY(10px)} }
@keyframes floatC { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

.flow-dash { stroke-dashoffset: 0; animation: dashFlow 4s linear infinite; }
@keyframes dashFlow { to { stroke-dashoffset: -100; } }

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity .9s cubic-bezier(.22,.8,.36,1), transform .9s cubic-bezier(.22,.8,.36,1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ---------- Marquee ---------- */
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track {
  display: inline-flex; gap: 3rem; white-space: nowrap;
  animation: marquee 45s linear infinite;
  font-family: 'Outfit', sans-serif; font-weight: 600; color: #52525B; font-size: 1.05rem;
}
.marquee-track span { padding: 0 .25rem; opacity: .85; }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ---------- Service cards ---------- */
.service-card {
  background: #fff; border: 1px solid #E4E4E7;
  border-radius: 1.25rem; padding: 1.75rem;
  transition: all .35s ease;
  position: relative; overflow: hidden;
}
.service-card:hover { transform: translateY(-4px); border-color: #C7D3FF; box-shadow: 0 24px 48px -24px rgba(0,82,255,.18); }
.service-card .icon-wrap {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.15rem;
  background-image: linear-gradient(135deg, var(--tw-gradient-stops));
}
.icon-wrap { background-image: linear-gradient(135deg, var(--tw-gradient-from, #0052FF), var(--tw-gradient-to, #7928CA)); }
.icon-wrap.from-brand-500 { --tw-gradient-from: #0052FF; }
.icon-wrap.to-purple-600 { --tw-gradient-to: #7928CA; }
.icon-wrap.from-emerald-500 { --tw-gradient-from: #10B981; }
.icon-wrap.to-teal-600 { --tw-gradient-to: #0D9488; }
.icon-wrap.from-pink-500 { --tw-gradient-from: #EC4899; }
.icon-wrap.to-rose-600 { --tw-gradient-to: #E11D48; }
.icon-wrap.from-amber-500 { --tw-gradient-from: #F59E0B; }
.icon-wrap.to-orange-600 { --tw-gradient-to: #EA580C; }
.icon-wrap.from-sky-500 { --tw-gradient-from: #0EA5E9; }
.icon-wrap.to-indigo-600 { --tw-gradient-to: #4F46E5; }
.icon-wrap.from-violet-500 { --tw-gradient-from: #8B5CF6; }
.icon-wrap.to-fuchsia-600 { --tw-gradient-to: #C026D3; }
.icon-wrap.from-cyan-500 { --tw-gradient-from: #06B6D4; }
.icon-wrap.to-blue-600 { --tw-gradient-to: #2563EB; }
.icon-wrap.from-red-500 { --tw-gradient-from: #EF4444; }
.icon-wrap.to-orange-500 { --tw-gradient-to: #F97316; }
.icon-wrap.from-slate-700 { --tw-gradient-from: #334155; }
.icon-wrap.to-ink-900 { --tw-gradient-to: #0A0A0A; }

.card-title { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 1.2rem; margin-top: 1.1rem; letter-spacing: -.01em; }
.card-sub { color: #52525B; font-size: .95rem; margin-top: .5rem; line-height: 1.6; }
.card-list { margin-top: 1rem; display: flex; flex-direction: column; gap: .4rem; font-size: .85rem; color: #27272A; }
.card-list i { color: #10B981; margin-right: .25rem; }

/* ---------- Bento ---------- */
.bento {
  border: 1px solid #E4E4E7;
  border-radius: 1.25rem;
  padding: 1.5rem;
  transition: all .35s ease;
  overflow: hidden;
  position: relative;
}
.bento:hover { transform: translateY(-3px); box-shadow: 0 24px 48px -24px rgba(0,0,0,.12); }

/* ---------- Showcase frame ---------- */
.showcase-frame {
  background: #fff;
  border: 1px solid #E4E4E7;
  border-radius: 1.5rem;
  padding: 1.5rem;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.12);
}
.kpi-mini { background: #FAFAFA; border: 1px solid #E4E4E7; border-radius: .75rem; padding: .75rem; }

.flow-node {
  display: flex; align-items: center; gap: .5rem;
  background: #fff; border: 1px solid #E4E4E7;
  border-radius: .75rem; padding: .65rem .85rem;
  font-size: .82rem;
}
.flow-arrow { width: 2px; height: 14px; background: linear-gradient(180deg, #0052FF, transparent); margin-left: 1.1rem; }

.ai-node {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .5rem .9rem; border-radius: 999px;
  background-image: linear-gradient(135deg, var(--tw-gradient-from, #0052FF), var(--tw-gradient-to, #7928CA));
  color: #fff; font-size: .75rem; font-weight: 600;
  box-shadow: 0 0 24px rgba(0,82,255,.4);
  animation: nodePulse 3s ease-in-out infinite;
}
@keyframes nodePulse { 0%,100%{box-shadow:0 0 24px rgba(0,82,255,.35)} 50%{box-shadow:0 0 36px rgba(255,0,128,.5)} }

.bg-gradient-conic { background: conic-gradient(from 0deg, #0052FF 0%, #7928CA 50%, #FF0080 82%, #E4E4E7 82%, #E4E4E7 100%); }

/* ---------- AI orbit (dark section) ---------- */
.ai-orbit {
  position: relative; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.ai-orbit::before, .ai-orbit::after {
  content: ''; position: absolute; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.12);
  top: 50%; left: 50%; transform: translate(-50%,-50%);
}
.ai-orbit::before { width: 280px; height: 280px; }
.ai-orbit::after { width: 420px; height: 420px; border-style: dashed; border-color: rgba(255,255,255,.08); animation: spin 60s linear infinite; }
@keyframes spin { to { transform: translate(-50%,-50%) rotate(360deg); } }

.ai-core {
  position: relative; z-index: 2;
  width: 130px; height: 130px; border-radius: 50%;
  background: linear-gradient(135deg, #0052FF 0%, #7928CA 60%, #FF0080 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #fff;
  box-shadow: 0 0 80px rgba(0,82,255,.5), 0 0 120px rgba(255,0,128,.25);
  animation: coreGlow 4s ease-in-out infinite;
}
@keyframes coreGlow { 0%,100%{box-shadow:0 0 60px rgba(0,82,255,.4),0 0 100px rgba(255,0,128,.2)} 50%{box-shadow:0 0 100px rgba(121,40,202,.6),0 0 140px rgba(255,0,128,.3)} }

.ai-satellite {
  position: absolute; top: 50%; left: 50%;
  width: 56px; height: 56px;
  margin: -28px;
  border-radius: 50%;
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.2rem;
  transform: rotate(var(--angle)) translateX(210px) rotate(calc(var(--angle) * -1));
}

/* ---------- Payment cards ---------- */
.payment-card {
  background: #fff; border: 1px solid #E4E4E7;
  border-radius: 1rem; padding: 1.25rem 1.5rem;
  transition: all .3s ease;
}
.payment-card:hover { border-color: #0052FF; box-shadow: 0 12px 24px -12px rgba(0,82,255,.25); transform: translateY(-2px); }

.info-card {
  background: #FAFAFA; border: 1px solid #E4E4E7;
  border-radius: 1.25rem; padding: 1.75rem;
}

/* ---------- Steps ---------- */
.step {
  background: #fff; border: 1px solid #E4E4E7;
  border-radius: 1.25rem; padding: 1.75rem;
  position: relative;
}
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, #0052FF, #7928CA);
  color: #fff; font-family: 'JetBrains Mono', monospace; font-weight: 600;
}

/* ---------- Case cards ---------- */
.case-card {
  background: #fff; border: 1px solid #E4E4E7;
  border-radius: 1.5rem; padding: 1.75rem;
  transition: all .35s ease;
}
.case-card:hover { transform: translateY(-3px); border-color: #C7D3FF; }

/* ---------- FAQ ---------- */
.faq-item {
  border-bottom: 1px solid #E4E4E7;
  background: #fff;
  border-radius: .75rem;
  margin-bottom: .5rem;
  padding: 0 1.25rem;
  transition: all .3s ease;
}
.faq-item[open] { background: #fff; border: 1px solid #E4E4E7; box-shadow: 0 6px 24px -10px rgba(0,0,0,.08); }
.faq-item summary {
  list-style: none; cursor: pointer;
  font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 1.05rem;
  padding: 1.1rem 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+'; font-size: 1.5rem; font-weight: 300; color: #0052FF;
  transition: transform .3s ease;
  width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: #EEF3FF;
}
.faq-item[open] summary::after { content: '−'; transform: rotate(0deg); }
.faq-body {
  color: #52525B; font-size: .95rem; line-height: 1.7;
  padding: 0 0 1.25rem 0;
  animation: faqIn .4s ease;
}
@keyframes faqIn { from { opacity:0; transform: translateY(-4px) } to { opacity:1; transform: translateY(0) } }

/* ---------- Form ---------- */
.form-label { display: block; font-size: .8rem; font-weight: 500; color: #27272A; margin-bottom: .4rem; }
.form-input {
  width: 100%; background: #FAFAFA;
  border: 1px solid #E4E4E7; border-radius: .85rem;
  padding: .8rem 1rem; font-size: .95rem;
  transition: all .25s ease;
  outline: none;
}
.form-input:focus { background: #fff; border-color: #0052FF; box-shadow: 0 0 0 4px rgba(0,82,255,.12); }

#form-status.success { background: #ECFDF5; color: #047857; border: 1px solid #A7F3D0; }
#form-status.error { background: #FEF2F2; color: #B91C1C; border: 1px solid #FECACA; }

/* ---------- Responsive helpers ---------- */
@media (max-width: 640px) {
  .ai-orbit::before { width: 200px; height: 200px; }
  .ai-orbit::after { width: 320px; height: 320px; }
  .ai-satellite { transform: rotate(var(--angle)) translateX(150px) rotate(calc(var(--angle) * -1)); }
  .ai-core { width: 100px; height: 100px; }
}