/* =========================================================================
   Afghan Gateway — public site, advanced layer
   Additive only: it decorates the existing markup, so no page has to be
   rewritten. Works in light and dark because every colour is a token.
   ========================================================================= */

/* ---------------- header ---------------- */
.site-nav{transition:height .28s ease,box-shadow .28s ease,background .28s ease}
.site-nav .nav-links a{position:relative;transition:color .2s}
.site-nav .nav-links a::after{
  content:"";position:absolute;left:10px;right:10px;bottom:2px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--brand),#F59E0B);transform:scaleX(0);transform-origin:left;
  transition:transform .25s cubic-bezier(.2,.7,.2,1)
}
.site-nav .nav-links a:hover::after{transform:scaleX(1)}
.site-nav.nav-scrolled{height:60px;box-shadow:0 18px 40px -32px rgba(11,16,32,.55)}

/* ---------------- hero ---------------- */
.hero{position:relative;overflow:hidden;isolation:isolate}
.hero::before,.hero::after{
  content:"";position:absolute;z-index:-1;border-radius:50%;filter:blur(70px);opacity:.55;pointer-events:none
}
.hero::before{
  width:620px;height:620px;top:-240px;inset-inline-start:-160px;
  background:radial-gradient(circle at 30% 30%,rgba(232,85,28,.55),transparent 62%);
  animation:agwFloat 18s ease-in-out infinite
}
.hero::after{
  width:520px;height:520px;top:-140px;inset-inline-end:-120px;
  background:radial-gradient(circle at 60% 40%,rgba(245,158,11,.42),transparent 64%);
  animation:agwFloat 22s ease-in-out infinite reverse
}
:root[data-theme="dark"] .hero::before{opacity:.42}
:root[data-theme="dark"] .hero::after{opacity:.34}
@keyframes agwFloat{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(24px,18px,0) scale(1.06)}
}

.hero h1{letter-spacing:-.045em}
.hero h1 em{
  font-style:normal;
  background:linear-gradient(100deg,var(--brand) 10%,#F59E0B 55%,var(--brand-600) 95%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:200% 100%;animation:agwShine 9s ease-in-out infinite
}
@keyframes agwShine{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

.hero .pill-lg{
  backdrop-filter:blur(8px);
  box-shadow:0 10px 26px -18px rgba(232,85,28,.9)
}
.hero .lede{max-width:56ch}

/* console / product shot */
.console{
  box-shadow:0 50px 90px -50px rgba(11,16,32,.65),0 18px 40px -30px rgba(11,16,32,.4);
  border-radius:22px;transform:perspective(1400px) rotateY(-4deg) rotateX(2deg);
  transition:transform .6s cubic-bezier(.2,.7,.2,1),box-shadow .6s
}
.console:hover{transform:perspective(1400px) rotateY(0) rotateX(0);box-shadow:0 60px 110px -50px rgba(11,16,32,.7)}
.float-card{animation:agwBob 6s ease-in-out infinite}
@keyframes agwBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* ---------------- buttons ---------------- */
.btn{position:relative;overflow:hidden;transition:transform .2s,box-shadow .25s,background .2s,color .2s}
.btn-primary{box-shadow:0 16px 32px -18px rgba(232,85,28,.85)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 22px 40px -18px rgba(232,85,28,.95)}
.btn-primary::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.35) 48%,transparent 66%);
  transform:translateX(-120%);transition:transform .7s ease
}
.btn-primary:hover::after{transform:translateX(120%)}
.btn-outline:hover{transform:translateY(-1px);border-color:var(--brand);color:var(--brand)}

/* ---------------- cards & sections ---------------- */
.svc-card,.step,.plan,.mini,.cmp{
  transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s,border-color .3s;
  will-change:transform
}
.svc-card:hover,.step:hover,.plan:hover{
  transform:translateY(-4px);
  box-shadow:0 30px 60px -36px rgba(11,16,32,.45);
  border-color:color-mix(in srgb,var(--brand) 35%,var(--line))
}
.svc-card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(420px 200px at var(--mx,50%) var(--my,0%),rgba(232,85,28,.10),transparent 60%);
  opacity:0;transition:opacity .3s
}
.svc-card{position:relative}
.svc-card:hover::before{opacity:1}

/* section headings */
section h2{letter-spacing:-.035em}
.section-eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brand);margin-bottom:10px
}
.section-eyebrow::before{content:"";width:22px;height:2px;background:var(--brand);border-radius:2px}

/* stats strip */
.stat-strip{position:relative;overflow:hidden}
.stat-strip::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(120deg,transparent 40%,rgba(232,85,28,.06) 60%,transparent 80%)
}
.stat-strip b{background:linear-gradient(120deg,var(--brand),#F59E0B);-webkit-background-clip:text;background-clip:text;color:transparent}

/* pricing highlight */
.plan.featured,.plan.pro{box-shadow:0 40px 80px -46px rgba(232,85,28,.75)}

/* footer */
.foot{position:relative}
.foot::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--brand),transparent);opacity:.55
}
.foot a{transition:color .2s,transform .2s}
.foot a:hover{color:var(--brand)}

/* auth block on the landing page keeps working but points at login.html */
.auth-wrap{box-shadow:0 50px 100px -60px rgba(11,16,32,.6)}

/* utility */
.grad-text{background:linear-gradient(100deg,var(--brand),#F59E0B);-webkit-background-clip:text;background-clip:text;color:transparent}
.agw-divider{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);margin:44px 0}

/* testimonials / logos marquee, only if present */
.logos{display:flex;gap:36px;align-items:center;opacity:.7;flex-wrap:wrap}

@media (max-width:900px){
  .console{transform:none}
  .hero::before,.hero::after{filter:blur(50px);opacity:.4}
}