/* ==========================================================================
   THEME TOKENS
   ========================================================================== */
:root{
  --ink:   #0e1421;      /* site background */
  --brand: #ff0000;      /* accent red */
  --muted: #9aa2b1;      /* secondary text */
  --ease:  cubic-bezier(.22,.61,.36,1);
}

/* ==========================================================================
   BASE
   ========================================================================== */
html,body{
  background: var(--ink);
  color:#e6e9ef;
  font-family: Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  scroll-behavior:smooth;
}

/* GLOBAL ambient glow for continuity across sections */
body::before{
  content:"";
  position:fixed;
  inset:-15%;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(1200px 700px at 20% -15%,rgba(255,0,0,.20),transparent 60%),
    radial-gradient(900px 500px at 110% 5%,rgba(255,0,0,.14),transparent 60%),
    radial-gradient(900px 600px at 50% 120%,rgba(255,0,0,.10),transparent 65%);
  filter:blur(10px);
}

/* Utility bits used in markup */
.glass{
  background:rgba(255,255,255,.04);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.08);
}
.ring-brand:focus{ box-shadow:0 0 0 4px rgba(255,0,0,.25) }
.badge{ border:1px solid rgba(255,255,255,.14) }

/* Header subtle divider (Tailwind handles most of it) */
header{ border-bottom: 1px solid rgba(255,255,255,.05) }

/* ==========================================================================
   SECTION BACKDROPS + SOFT FADES (for smoother transitions)
   ========================================================================== */

/* Hero section gradient */
.hero-grad{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:
    radial-gradient(1100px 700px at 20% -15%,rgba(255,0,0,.35),transparent 65%),
    radial-gradient(900px 500px at 110% 5%,rgba(255,0,0,.25),transparent 60%),
    linear-gradient(180deg,rgba(255,0,0,.08),transparent 40%);
}
.hero-grad::after{
  content:"";
  position:absolute; inset:-10%;
  background:
    radial-gradient(60% 40% at 20% 0%,rgba(255,0,0,.15),transparent 60%),
    radial-gradient(50% 40% at 90% 10%,rgba(255,0,0,.12),transparent 60%);
  filter:blur(40px);
  animation:heroPulse 12s ease-in-out infinite alternate;
  pointer-events:none;
  z-index:0;
}
@keyframes heroPulse{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(-2%,2%,0) scale(1.05)}
}

/* Dark sections */
.section-ink,
.section-ink-alt{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.section-ink{
  background:
    radial-gradient(1000px 600px at 15% -10%,rgba(255,0,0,.22),transparent 60%),
    var(--ink);
}
.section-ink-alt{
  background:
    radial-gradient(900px 500px at 85% 0%,rgba(255,0,0,.18),transparent 60%),
    var(--ink);
}
/* Soft edge fade to unify boundaries with page background */
.section-ink::before,
.section-ink-alt::before{
  content:""; position:absolute; left:0; right:0; top:-1px; height:84px;
  background:linear-gradient(to top, rgba(14,20,33,0), var(--ink));
  pointer-events:none; z-index:1;
}
.section-ink::after,
.section-ink-alt::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:84px;
  background:linear-gradient(to bottom, rgba(14,20,33,0), var(--ink));
  pointer-events:none; z-index:1;
}

/* Light sections (features/methods/services/proof) */
section#features, section#methods, section#services, section#proof{
  position:relative; isolation:isolate; overflow:hidden;
}
section#features::before,
section#methods::before,
section#services::before,
section#proof::before{
  content:""; position:absolute; left:0; right:0; top:-1px; height:72px;
  background:linear-gradient(to top, rgba(255,255,255,0), rgba(14,20,33,.55));
  pointer-events:none; z-index:1; mix-blend-mode:soft-light; opacity:.35;
}
section#features::after,
section#methods::after,
section#services::after,
section#proof::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:72px;
  background:linear-gradient(to bottom, rgba(255,255,255,0), rgba(14,20,33,.55));
  pointer-events:none; z-index:1; mix-blend-mode:soft-light; opacity:.35;
}

/* Footer top fade */
footer.section-ink,
footer.bg-ink{
  position:relative; isolation:isolate; overflow:hidden;
}
footer.section-ink::before,
footer.bg-ink::before{
  content:""; position:absolute; left:0; right:0; top:-1px; height:84px;
  background:linear-gradient(to top, rgba(14,20,33,0), var(--ink));
  pointer-events:none; z-index:1;
}

/* ==========================================================================
   ACCORDION
   ========================================================================== */
.accordion .item{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  border-radius:16px;
}
.accordion .item + .item{ margin-top:.75rem }
.accordion button{
  width:100%; padding:14px 18px;
  display:flex; justify-content:space-between; align-items:center;
  font-weight:600; cursor:pointer;
  transition:filter .2s var(--ease), background-color .2s var(--ease);
}
.accordion button:hover{ filter:brightness(1.05) }
.accordion .content{
  display:none; padding:0 18px 14px; color:var(--muted);
}
.accordion .item.open .content{ display:block }

/* Plus/minus icon */
.accordion .icon{
  width:18px; height:18px; position:relative; margin-left:12px; flex:0 0 auto;
}
.accordion .icon:before,
.accordion .icon:after{
  content:""; position:absolute; left:0; right:0; top:50%;
  height:2px; background:currentColor; transform:translateY(-50%);
}
.accordion .icon:after{ transform:translateY(-50%) rotate(90deg) }
.accordion .item.open .icon:after{ opacity:0 }

/* ==========================================================================
   PHONE INPUT (intl-tel-input) — dropdown theming
   ========================================================================== */
.iti{ width:100% }
.iti--container{ z-index:2147483647 }
.iti__flag-container{ z-index:10 }
.iti__country-list{
  background:#fff; color:var(--ink);
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  max-height:300px; overflow-y:auto;
  min-width:280px; width:min(360px,92vw);
  border-radius:12px;
}
.iti__country-list .iti__country{ font-size:14px }
.iti__country-list .iti__country:hover{ background:#f6f6f6 }
.iti__divider{ border-bottom-color:#eee }
.iti__search-input{ background:#fff; color:var(--ink); border-radius:10px }
.iti--separate-dial-code .iti__selected-dial-code{ margin-left:6px }
.iti--allow-dropdown input,
.iti--allow-dropdown input[type=tel]{ padding-left:12px }
.iti__selected-dial-code{ color:#e6e9ef !important }

/* Fallback phone group */
.phone-fb{ display:flex; gap:.5rem; align-items:center }
.phone-fb.hidden{ display:none }
.phone-fb select{
  appearance:none; background:#fff; color:var(--ink);
  border:1px solid rgba(0,0,0,.1);
  border-radius:.75rem; padding:.6rem .75rem; font-size:14px;
}
.phone-fb input{ flex:1 }

/* ==========================================================================
   MICRO-INTERACTIONS
   ========================================================================== */
.btn-anim{
  position:relative; overflow:hidden;
  transition:transform .18s var(--ease), filter .2s var(--ease);
}
.btn-anim:hover{ transform:translateY(-1px) }
.btn-anim:active{ transform:translateY(0) scale(.98) }
.btn-anim::before{
  content:""; position:absolute; inset:-200% -40%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);
  transform:translateX(-100%);
}
.btn-anim:hover::before{ animation:btnShine 1s var(--ease) }
@keyframes btnShine{ to{ transform:translateX(100%) } }

.hover-lift{ transition:transform .25s var(--ease), box-shadow .25s var(--ease) }
.hover-lift:hover{ transform:translateY(-4px) }

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