/* ================================================================
   Anuyog — supplementary effects (light, only what the pages need).
   Most visual styles live in anuyog-theme.css now.
   ================================================================ */

/* ---------- Spotlight that follows the mouse ---------- */
.anuyog-spotlight { position: relative; }
.anuyog-spotlight > .anuyog-spotlight-mask {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(360px 360px at var(--x, 50%) var(--y, 50%), rgba(96,165,250,0.22), transparent 60%);
  mix-blend-mode: screen;
  transition: background .2s ease;
}

/* ---------- Magnetic round button (hero arrow) ---------- */
.anuyog-magnetic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--anuyog-gradient);
  color: #fff;
  font-size: 18px;
  transition: transform .3s ease, box-shadow .3s ease;
  box-shadow: 0 12px 26px -10px rgba(37,99,235,0.6);
  text-decoration: none;
}
.anuyog-magnetic:hover { color: #fff; transform: scale(1.08); }

/* ---------- Underline reveal on inline links ---------- */
.anuyog-underline { position: relative; display: inline-block; }
.anuyog-underline::after {
  content: ""; position: absolute; left: 0; bottom: -3px; height: 2px; width: 100%;
  background: var(--anuyog-gradient);
  transform: scaleX(0); transform-origin: right center;
  transition: transform .5s ease;
}
.anuyog-underline:hover::after { transform: scaleX(1); transform-origin: left center; }

/* ---------- Soft separator bar ---------- */
.anuyog-divider {
  height: 1px; border: 0;
  background: linear-gradient(90deg, transparent, var(--anuyog-border), transparent);
  margin: 20px 0;
}

/* ---------- Optional subtle floating elements ---------- */
.anuyog-drift { animation: anuyog-drift 10s ease-in-out infinite alternate; }
.anuyog-drift.delay-1 { animation-delay: -3s; }
.anuyog-drift.delay-2 { animation-delay: -6s; }
@keyframes anuyog-drift {
  0%   { transform: translate(0,0); }
  100% { transform: translate(16px, -20px); }
}

/* ---------- Coming-soon specific ---------- */
.anuyog-coming-soon { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; position: relative; overflow: hidden; }
@media (max-width: 991px) { .anuyog-coming-soon { grid-template-columns: 1fr; } .anuyog-coming-soon .cs-visual { display: none; } }
.anuyog-coming-soon .cs-text {
  background: var(--anuyog-gradient-dark);
  color: #fff; padding: 120px 8% 60px;
  display: flex; flex-direction: column; justify-content: center;
  position: relative; overflow: hidden;
}
.anuyog-coming-soon .cs-text::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(380px 280px at 10% 20%, rgba(34, 211, 238, 0.2), transparent 60%),
    radial-gradient(500px 400px at 90% 80%, rgba(37, 99, 235, 0.28), transparent 60%);
}
.anuyog-coming-soon .cs-text > * { position: relative; z-index: 1; }
.anuyog-coming-soon .cs-visual {
  background: radial-gradient(circle at 50% 50%, #1e40af, #0a1b3d);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.anuyog-coming-soon .cs-visual img {
  width: 60%;
  animation: anuyog-cs-float 5s ease-in-out infinite alternate;
}
@keyframes anuyog-cs-float { from { transform: translateY(0); } to { transform: translateY(-14px); } }

.anuyog-countdown { display: flex; gap: 14px; margin: 30px 0; flex-wrap: wrap; }
.anuyog-countdown div {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 18px 22px; min-width: 86px; text-align: center;
}
.anuyog-countdown b { font-family: var(--tj-ff-display); font-size: 30px; color: #fff; display: block; line-height: 1; }
.anuyog-countdown span { font-size: 11px; letter-spacing: 0.2em; color: rgba(255, 255, 255, 0.55); text-transform: uppercase; }

.anuyog-cs-form { display: flex; gap: 10px; max-width: 460px; flex-wrap: wrap; }
.anuyog-cs-form input {
  flex: 1; min-width: 200px;
  background: rgba(255,255,255,0.06) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
}
.anuyog-cs-form input::placeholder { color: rgba(255,255,255,0.5); }

/* ---------- 404 page ---------- */
.anuyog-err {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--anuyog-gradient-dark);
  color: #fff; padding: 140px 20px 60px; position: relative; overflow: hidden; text-align: center;
}
.anuyog-err::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(96,165,250,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(96,165,250,0.06) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 80%);
          mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 80%);
}
.anuyog-err > * { position: relative; z-index: 1; max-width: 620px; }
.anuyog-err-logo { width: 64px; height: auto; margin-bottom: 24px; }
.anuyog-err-digits {
  font-family: var(--tj-ff-display); font-weight: 800;
  font-size: clamp(110px, 22vw, 240px);
  line-height: 1; letter-spacing: -0.04em;
  background: linear-gradient(180deg, #60a5fa, #22d3ee, #2563eb);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- Spotlight card (portfolio featured) ---------- */
.anuyog-spotlight-card {
  background: var(--anuyog-gradient-dark);
  border-radius: var(--anuyog-radius-lg);
  padding: 46px; color: #fff;
  position: relative; overflow: hidden;
  box-shadow: var(--anuyog-shadow-lg);
}
.anuyog-spotlight-card::before {
  content: ""; position: absolute; top: -80px; right: -80px;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(34,211,238,0.35), transparent 70%);
  filter: blur(20px);
}
.anuyog-spotlight-card > * { position: relative; z-index: 1; }
.anuyog-spotlight-card h3 { color: #fff; font-family: var(--tj-ff-display); margin: 14px 0 10px; }
.anuyog-spotlight-card p { color: rgba(255,255,255,0.82); }
.anuyog-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 28px; }
.anuyog-kpis .kpi {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--anuyog-radius-sm); padding: 18px 16px; text-align: center;
}
.anuyog-kpis .kpi .n {
  font-family: var(--tj-ff-display); font-weight: 700; font-size: 30px; line-height: 1;
  background: linear-gradient(135deg, #60a5fa, #22d3ee);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.anuyog-kpis .kpi .l { font-size: 12px; margin-top: 8px; display: block; color: rgba(255,255,255,0.7); letter-spacing: 0.04em; }

/* ---------- List row (ticked items) ---------- */
.anuyog-list-row { list-style: none; padding: 0; margin: 0; }
.anuyog-list-row li {
  padding: 12px 0;
  border-bottom: 1px solid var(--anuyog-divider);
  display: flex; align-items: flex-start; gap: 12px;
  color: var(--anuyog-body);
  font-size: 15px;
  line-height: 1.55;
}
.anuyog-list-row li:last-child { border-bottom: 0; }
.anuyog-list-row li::before {
  content: "\f00c"; font-family: "Font Awesome 6 Pro"; font-weight: 900;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--anuyog-primary-soft); color: var(--anuyog-primary);
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; font-size: 11px;
}