/* =========================================================================
   Aarvi Technology: shared "futuristic" design layer
   Loaded after styles.css on every landing page. Purely decorative:
   all elements it adds are aria-hidden, and the page reads the same without it.
   ========================================================================= */

@property --fx-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* ---------- Header: elevated on scroll + reading progress ---------- */
.site-header { transition: box-shadow .3s, background-color .3s; }
.site-header.fx-scrolled { box-shadow: 0 12px 32px -20px rgba(16, 32, 72, .35); }
.fx-progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, var(--blue), var(--blue-hi) 60%, var(--blue-soft));
  transform-origin: left; transform: scaleX(var(--fx-p, 0));
}

/* ---------- Buttons: light sweep + glow ---------- */
.btn-primary { position: relative; overflow: hidden; isolation: isolate; }
.btn-primary::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .38) 50%, transparent 70%);
  transform: translateX(-130%); transition: transform .75s var(--ease, ease);
}
.btn-primary:hover::after, .btn-primary:focus-visible::after { transform: translateX(130%); }
.btn-primary:hover { box-shadow: 0 12px 28px -12px rgba(31, 91, 234, .75), 0 0 0 4px rgba(61, 123, 255, .12); }
.btn-outline:hover, .btn-light:hover { box-shadow: 0 0 0 4px rgba(61, 123, 255, .1); }

/* ---------- Eyebrows: glass pills ---------- */
.eyebrow {
  padding: 6px 14px 6px 12px; border-radius: 999px; letter-spacing: .12em;
  background: rgba(255, 255, 255, .72); border: 1px solid rgba(31, 91, 234, .18);
  box-shadow: 0 6px 18px -12px rgba(31, 91, 234, .55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.eyebrow::before { width: 7px !important; height: 7px !important; border-radius: 50% !important; box-shadow: 0 0 0 3px rgba(61, 123, 255, .18); }
.section-head-center .eyebrow::after { display: none !important; }

/* ---------- Section heads: outlined index numbers + depth on H2 ---------- */
.section-head { position: relative; }
.fx-num {
  position: absolute; top: -0.42em; z-index: -1; pointer-events: none; user-select: none;
  font: 800 clamp(5.5rem, 4rem + 6vw, 9.5rem)/1 var(--font-head); letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(31, 91, 234, .1);
}
.section-head:not(.section-head-center) .fx-num { left: -0.04em; }
.section-head-center .fx-num { left: 50%; transform: translateX(-50%); }
.section-head h2 {
  background: linear-gradient(180deg, var(--navy) 55%, #2A3B63);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.section { isolation: isolate; }

/* ---------- Tinted sections: faint technical dot field ---------- */
.section-pale, .section-light {
  background:
    radial-gradient(rgba(31, 91, 234, .075) 1px, transparent 1.3px) 0 0 / 22px 22px,
    radial-gradient(900px 420px at 88% 0%, rgba(61, 123, 255, .07), transparent 62%),
    radial-gradient(700px 380px at 0% 100%, rgba(143, 184, 255, .12), transparent 60%),
    var(--bg-soft);
}

/* ---------- Light cards: gradient edge + cursor spotlight ---------- */
.fx-card { isolation: isolate; }
.fx-rel { position: relative; }
.fx-edge, .fx-glow, .fx-ring { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.fx-edge {
  padding: 1px; z-index: 1;
  background: linear-gradient(135deg, rgba(61, 123, 255, .5), rgba(229, 233, 240, 0) 32%, rgba(229, 233, 240, 0) 68%, rgba(143, 184, 255, .55));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: .8; transition: opacity .3s;
}
.fx-glow {
  z-index: -1; opacity: 0; transition: opacity .35s;
  background: radial-gradient(260px circle at var(--fx-x, 50%) var(--fx-y, 50%), rgba(61, 123, 255, .1), transparent 65%);
}
.fx-card:hover .fx-glow { opacity: 1; }
.fx-card:hover .fx-edge { opacity: 1; }

/* ---------- Dark panels: travelling light on the edge ---------- */
.fx-ring {
  padding: 1px; z-index: 1;
  padding: 1.5px;
  background: conic-gradient(from var(--fx-a), rgba(143, 184, 255, .12) 0 58%, rgba(143, 184, 255, .95) 74%, #fff 78%, rgba(61, 123, 255, .95) 82%, rgba(143, 184, 255, .12) 94%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.anim .fx-ring { animation: fxSpin 7s linear infinite; }
.fx-off .fx-ring { animation-play-state: paused; }
@keyframes fxSpin { to { --fx-a: 360deg; } }
/* ---------- Compact cards: pointer tilt ---------- */
.fx-tilt { transform: perspective(900px) rotateX(var(--fx-rx, 0deg)) rotateY(var(--fx-ry, 0deg)); transition: transform .35s var(--ease, ease), box-shadow .3s, border-color .3s, opacity .55s; will-change: transform; }
.anim .reveal.fx-tilt:not(.is-in) { transform: translateY(14px); }

/* ---------- Hero accent: slow light shimmer ---------- */
.h1-accent {
  background-image: linear-gradient(100deg, var(--blue) 0%, var(--blue-hi) 30%, #7FA8FF 45%, var(--blue-hi) 60%, var(--blue) 100%) !important;
  background-size: 220% 100% !important;
}
.anim .h1-accent { animation: fxShimmer 7s ease-in-out infinite; }
.hero.is-offscreen .h1-accent { animation-play-state: paused; }
@keyframes fxShimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* ---------- Section dividers: gradient seam with a glowing node ---------- */
main > .section { position: relative; }
main > .section + .section::before {
  content: ""; position: absolute; left: 50%; top: 0; width: min(78%, 960px); height: 1px; transform: translateX(-50%); pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(31, 91, 234, .35) 50%, transparent);
}
main > .section + .section::after {
  content: ""; position: absolute; left: 50%; top: -4px; width: 9px; height: 9px; border-radius: 50%; transform: translateX(-50%); pointer-events: none;
  background: var(--white); border: 2px solid var(--blue-hi); box-shadow: 0 0 0 4px rgba(61, 123, 255, .14), 0 0 14px rgba(61, 123, 255, .6);
}

/* ---------- Hero: pointer light + viewfinder corners on the showcase ---------- */
.fx-spot {
  position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0; transition: opacity .5s;
  background: radial-gradient(520px circle at var(--fx-x, 70%) var(--fx-y, 30%), rgba(61, 123, 255, .1), transparent 62%);
}
.hero:hover .fx-spot { opacity: 1; }
.fx-hud {
  position: absolute; inset: -10px; border-radius: 30px; pointer-events: none; z-index: 2;
  --c: rgba(31, 91, 234, .75); --l: 34px;
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--l) 2px no-repeat,
    linear-gradient(var(--c), var(--c)) top left / 2px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) top right / var(--l) 2px no-repeat,
    linear-gradient(var(--c), var(--c)) top right / 2px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / var(--l) 2px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / 2px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / var(--l) 2px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / 2px var(--l) no-repeat;
}
.anim .fx-hud { animation: hudIn .9s var(--ease, ease) .2s both; }
@keyframes hudIn { from { opacity: 0; inset: 6px; } to { opacity: 1; inset: -10px; } }
@media (max-width: 420px) { .fx-hud { inset: -6px; --l: 18px; } @keyframes hudIn { from { opacity: 0; } to { opacity: 1; } } }

/* ---------- Footer: glowing top edge + outlined wordmark ---------- */
.site-footer { position: relative; overflow: hidden; isolation: isolate; }
.site-footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(61, 123, 255, .8), transparent);
}
.fx-word {
  position: absolute; left: 50%; bottom: -0.22em; z-index: -1; transform: translateX(-50%); pointer-events: none; user-select: none;
  font: 800 clamp(5rem, 2rem + 14vw, 15rem)/1 var(--font-head); letter-spacing: -.04em; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1px rgba(143, 184, 255, .1);
}

@media (prefers-reduced-motion: reduce) {
  .fx-ring, .fx-hud, .h1-accent { animation: none !important; }
  .fx-tilt { transform: none !important; }
  .btn-primary::after { transition: none; }
}

/* ---------- Hero: floating glass status chips (wide screens) ---------- */
.fx-chip { display: none; }
@media (min-width: 1280px) {
  .fx-chip {
    position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 14px;
    background: rgba(255, 255, 255, .9); border: 1px solid var(--border); white-space: nowrap; pointer-events: none;
    box-shadow: 0 18px 38px -18px rgba(16, 32, 72, .35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    font-size: .78rem; line-height: 1.3; color: var(--text-2);
  }
  .fx-chip b { display: block; font-family: var(--font-head); font-size: .84rem; color: var(--navy); }
  .fx-chip-1 { right: 32px; top: -46px; }
  .fx-chip-2 { left: -48px; bottom: -30px; }
  .anim .fx-chip-1 { animation: fxFloat 6s ease-in-out infinite; }
  .anim .fx-chip-2 { animation: fxFloat 7s ease-in-out -3s infinite; }
  .hero.is-offscreen .fx-chip { animation-play-state: paused; }
}
.fx-chip-ico { position: relative; flex: none; width: 28px; height: 28px; border-radius: 9px; background: linear-gradient(180deg, var(--blue-hi), var(--blue)); }
.fx-chip-ico::after { content: ""; position: absolute; left: 9px; top: 8px; width: 8px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }
.fx-chip-live { background: var(--pale); }
.fx-chip-live::after { left: 9px; top: 9px; width: 10px; height: 10px; border: 0; border-radius: 50%; transform: none; background: var(--blue-hi); box-shadow: 0 0 0 4px rgba(61, 123, 255, .2); }
@keyframes fxFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .fx-chip { animation: none !important; } }