/* AbhiLeads web — shared tokens, type, buttons and the motion vocabulary.
   Used by the landing (license gate) and /buy/. Light only, one yellow accent,
   no glass / blur / glow. Motion language:
     1. type rises out of a mask (headlines, prices)
     2. the live extraction stage (stage.css) is the one centrepiece
     3. small loops only while their section is on screen */

:root {
  --al-white: #fff;
  --al-band: oklch(97.4% 0.003 265);
  --al-ink: oklch(21% 0.025 265);
  --al-ink-2: oklch(40% 0.02 265);
  --al-ink-3: oklch(54% 0.015 265);
  --al-rule: oklch(91.5% 0.005 265);
  --al-rule-2: oklch(84% 0.008 265);
  --al-yellow: oklch(87.5% 0.165 92);
  --al-yellow-2: oklch(80% 0.165 85);
  --al-yellow-wash: oklch(96.5% 0.05 95);
  --al-font: "Archivo", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --al-ease: cubic-bezier(.2, .7, .1, 1);
  --al-ease-io: cubic-bezier(.65, 0, .35, 1);
  --al-wrap: 1180px;
}

.al-wrap { width: min(var(--al-wrap), 100% - 40px); margin-inline: auto; }

/* ── nav ── */
.al-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 76px; font-family: var(--al-font); }
.al-nav nav { display: flex; align-items: center; gap: 22px; }
.al-nav nav > a:not(.al-btn) { color: var(--al-ink-2); font-size: 15px; font-weight: 500; text-decoration: none; }
.al-nav nav > a:not(.al-btn):hover { color: var(--al-ink); }
.al-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--al-ink); text-decoration: none; font-weight: 800; font-size: 18px; font-stretch: 112%; letter-spacing: -0.01em; }
.al-brand svg { width: 32px; height: 32px; display: block; }

/* brand mark: the A draws, then the three dots land one by one */
.al-mark path { stroke-dasharray: 80; stroke-dashoffset: 80; animation: al-draw .9s var(--al-ease) .15s forwards; }
.al-mark circle { transform-box: fill-box; transform-origin: center; scale: 0; animation: al-pop .32s var(--al-ease) forwards; }
.al-mark circle:nth-of-type(1) { animation-delay: .75s; }
.al-mark circle:nth-of-type(2) { animation-delay: .85s; }
.al-mark circle:nth-of-type(3) { animation-delay: .95s; }
.al-brand:hover .al-mark circle { animation: al-hop .5s var(--al-ease) both; }
.al-brand:hover .al-mark circle:nth-of-type(2) { animation-delay: .07s; }
.al-brand:hover .al-mark circle:nth-of-type(3) { animation-delay: .14s; }

/* ── buttons & links ── */
.al-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 24px; border-radius: 999px; border: 1px solid var(--al-ink);
  background: var(--al-ink); color: var(--al-white); font: 600 15px/1 var(--al-font);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, scale .15s var(--al-ease);
}
.al-btn:hover { background: oklch(31% 0.03 265); border-color: oklch(31% 0.03 265); }
.al-btn:active { scale: .97; }
.al-btn-y { background: var(--al-yellow); border-color: var(--al-yellow); color: var(--al-ink); }
.al-btn-y:hover { background: var(--al-yellow-2); border-color: var(--al-yellow-2); }
.al-btn-line { background: var(--al-white); color: var(--al-ink); border-color: var(--al-rule-2); }
.al-btn-line:hover { background: var(--al-band); border-color: var(--al-ink); }
.al-btn-sm { padding: 10px 18px; font-size: 14px; }

.al-link {
  color: var(--al-ink); font-weight: 600; text-decoration: none;
  background: linear-gradient(var(--al-yellow), var(--al-yellow)) 0 100% / 100% 3px no-repeat;
  padding-bottom: 3px; transition: background-size .35s var(--al-ease);
}
.al-link:hover { background-size: 100% 100%; }

/* ── type ── */
.al-h1, .al-h2 { margin: 0; color: var(--al-ink); font-family: var(--al-font); font-weight: 850; font-stretch: 114%; letter-spacing: -0.035em; text-wrap: balance; }
.al-h1 { font-size: clamp(44px, 5.4vw, 80px); line-height: .95; }
.al-h2 { font-size: clamp(32px, 3.6vw, 52px); line-height: 1; max-width: 18ch; }
.al-lede { margin: 0; color: var(--al-ink-2); font: 400 18px/1.55 var(--al-font); max-width: 50ch; }

/* 1. rise out of a mask — motion.js wraps each word in .w > span */
[data-al-words] .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .02em .1em; margin: 0 -.02em -.1em; }
[data-al-words] .w > span { display: inline-block; }
.al-js [data-al-words] .w > span { translate: 0 108%; }
.al-js [data-al-words].in .w > span {
  translate: 0 0; transition: translate .85s var(--al-ease);
  transition-delay: calc(var(--i, 0) * 42ms + var(--d, 0ms));
}

/* load-time entrance for supporting copy */
.al-js .al-in { opacity: 0; translate: 0 12px; animation: al-enter .8s var(--al-ease) forwards; animation-delay: var(--d, 0ms); }

/* reveal when scrolled to (motion.js adds .in) */
.al-js .al-r { opacity: 0; translate: 0 16px; transition: opacity .8s var(--al-ease), translate .8s var(--al-ease); transition-delay: var(--d, 0ms); }
.al-js .al-r.in { opacity: 1; translate: 0 0; }

/* brand dots as a "working" indicator */
.al-dots { display: inline-flex; gap: 4px; vertical-align: middle; }
.al-dots i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .25; }
.al-busy .al-dots i { animation: al-blink 1s ease-in-out infinite; }
.al-busy .al-dots i:nth-child(2) { animation-delay: .15s; }
.al-busy .al-dots i:nth-child(3) { animation-delay: .3s; }

/* ── footer ── */
.al-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 28px 0 40px; border-top: 1px solid var(--al-rule); font: 400 14px/1.4 var(--al-font); color: var(--al-ink-3); }
.al-foot nav { display: flex; flex-wrap: wrap; gap: 20px; }
.al-foot a { color: var(--al-ink-2); text-decoration: none; }
.al-foot a:hover { color: var(--al-ink); }

.al-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@keyframes al-draw { to { stroke-dashoffset: 0; } }
@keyframes al-pop { 0% { scale: 0; } 70% { scale: 1.35; } 100% { scale: 1; } }
@keyframes al-hop { 0%, 100% { translate: 0 0; } 40% { translate: 0 -3px; } }
@keyframes al-enter { to { opacity: 1; translate: 0 0; } }
@keyframes al-blink { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes al-press { 0%, 100% { scale: 1; } 40% { scale: .94; } }

@media (max-width: 640px) {
  .al-nav { height: 64px; }
  .al-nav nav { gap: 14px; }
  .al-lede { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .al-js [data-al-words] .w > span, .al-js .al-in, .al-js .al-r { translate: none !important; opacity: 1 !important; transition: none !important; animation: none !important; }
  .al-mark path { stroke-dashoffset: 0; animation: none; }
  .al-mark circle { scale: 1; animation: none !important; }
  .al-busy .al-dots i { animation: none; opacity: .6; }
}