/* ==========================================================================
   Pathway IT — hero.css
   Dark starfield hero · italic-serif question in a flowing sky gradient ·
   heavy sans answer with a hand-drawn squiggle · avatar proof · glass CTA ·
   and a tilted browser mockup that cycles through four site designs.

   Motion ownership (important):
   · CSS animates colour only — background-position, stroke, filter hue.
   · GSAP owns every `transform`. The two never touch the same property,
     which is what keeps the mockup from juddering.
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--header-h) + clamp(2rem, 5vw, 4.5rem));
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
  background: #070912;
  overflow: clip;
  isolation: isolate;
}

/* ────────────────────────────────────────────────────── backdrop ────── */
.hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

.hero-dots {
  position: absolute;
  inset: -6%;
  background-image: radial-gradient(rgba(255, 255, 255, .17) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(ellipse 95% 85% at 50% 42%, #000 15%, transparent 82%);
}

.hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  will-change: filter;
}
.hero-glow.g1 {
  width: 900px; height: 640px;
  left: -14%; bottom: -26%;
  background: radial-gradient(ellipse, rgba(56, 189, 248, .30), transparent 68%);
  animation: glow-a 17s ease-in-out infinite alternate;
}
.hero-glow.g2 {
  width: 780px; height: 620px;
  right: -12%; top: -20%;
  background: radial-gradient(ellipse, rgba(79, 70, 229, .34), transparent 68%);
  animation: glow-b 21s ease-in-out infinite alternate;
}
.hero-glow.g3 {
  width: 620px; height: 420px;
  left: 34%; bottom: -32%;
  background: radial-gradient(ellipse, rgba(124, 58, 237, .22), transparent 70%);
  animation: glow-c 26s ease-in-out infinite alternate;
}
@keyframes glow-a {
  from { filter: blur(110px) hue-rotate(0deg)   saturate(1);    opacity: 1; }
  to   { filter: blur(132px) hue-rotate(-26deg) saturate(1.3);  opacity: .78; }
}
@keyframes glow-b {
  from { filter: blur(110px) hue-rotate(0deg)  saturate(1);     opacity: .92; }
  to   { filter: blur(126px) hue-rotate(30deg) saturate(1.25);  opacity: 1; }
}
@keyframes glow-c {
  from { filter: blur(110px) hue-rotate(0deg)   saturate(1);    opacity: .7; }
  to   { filter: blur(140px) hue-rotate(-40deg) saturate(1.4);  opacity: 1; }
}

/* lit horizon line across the very top */
.hero::before {
  content: "";
  position: absolute;
  inset-inline: 0; top: 0;
  height: 1px;
  z-index: -1;
  background: linear-gradient(90deg,
    transparent, rgba(125, 211, 252, .55), rgba(99, 102, 241, .4),
    rgba(34, 211, 238, .5), transparent);
  background-size: 220% 100%;
  animation: hue-flow 14s ease-in-out infinite alternate;
}

@keyframes hue-flow { to { background-position: 100% 50%; } }

/* ──────────────────────────────────────────────────────── layout ────── */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}
.hero-copy { max-width: 620px; }

/* ───────────────────────────────────────────────────── headline ─────── */
.hero-title { margin-bottom: 1.9rem; }
.hero-title .t-script,
.hero-title .t-strong { display: block; }

.hero-title .t-script {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2.7rem, 6.2vw, 5.4rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  background: linear-gradient(100deg,
    #6366F1 0%, #38BDF8 26%, #7DD3FC 42%, #22D3EE 58%, #38BDF8 74%, #6366F1 100%);
  background-size: 260% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-bottom: .06em;
  animation: hue-flow 12s ease-in-out infinite alternate;
}

.hero-title .t-strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 5.9vw, 5.1rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
  color: #fff;
  margin-top: .06em;
}

.hero-title .uline { position: relative; display: inline-block; white-space: nowrap; }
.hero-title .uline svg {
  position: absolute;
  left: -2%; bottom: -.28em;
  width: 104%; height: .3em;
  overflow: visible;
}
.hero-title .uline svg path {
  fill: none;
  stroke: var(--sky);
  stroke-width: 6;
  stroke-linecap: round;
  animation: squiggle-hue 8s ease-in-out infinite alternate;
}
@keyframes squiggle-hue {
  0%   { stroke: #38BDF8; filter: drop-shadow(0 0 6px rgba(56, 189, 248, .55)); }
  50%  { stroke: #7DD3FC; filter: drop-shadow(0 0 10px rgba(125, 211, 252, .75)); }
  100% { stroke: #818CF8; filter: drop-shadow(0 0 8px rgba(129, 140, 248, .6)); }
}

/* ─────────────────────────────────────────────── social proof row ───── */
.hero-proof { display: flex; align-items: center; gap: .85rem; margin-bottom: 1.85rem; }
.proof-avatars { display: flex; flex: none; }
.proof-avatars span {
  width: 46px; height: 46px;
  margin-left: -13px;
  border-radius: 50%;
  border: 2px solid #0B0F1C;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 700; color: #fff;
  letter-spacing: -0.02em;
}
.proof-avatars span:first-child { margin-left: 0; }
.proof-avatars span:nth-child(1) { background: linear-gradient(140deg, #6366F1, #A5B4FC); }
.proof-avatars span:nth-child(2) { background: linear-gradient(140deg, #0EA5E9, #7DD3FC); }
.proof-avatars span:nth-child(3) { background: linear-gradient(140deg, #4F46E5, #38BDF8); }

.proof-text { display: flex; flex-direction: column; gap: .18rem; }
.proof-text .pt-top { font-size: .95rem; font-weight: 600; color: #fff; letter-spacing: -0.012em; }
.proof-rating { display: flex; align-items: center; gap: .4rem; }
.proof-rating .g-mark { width: 19px; height: 19px; flex: none; }
.proof-rating .stars { display: flex; gap: 1.5px; }
.proof-rating .stars svg { width: 15px; height: 15px; color: #FBBC04; }

/* ──────────────────────────────────────────────────── paragraph ─────── */
.hero-desc {
  font-size: clamp(1.02rem, 1.25vw, 1.16rem);
  line-height: 1.62;
  color: rgba(255, 255, 255, .72);
  max-width: 33rem;
  margin-bottom: 2.25rem;
}
.hero-desc b { color: #fff; font-weight: 600; }

/* ────────────────────────────────────────────────────────── CTA ─────── */
.hero-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: 1.15rem 2rem;
  border-radius: var(--r-pill);
  background: linear-gradient(120deg,
    rgba(99, 102, 241, .34), rgba(56, 189, 248, .22), rgba(34, 211, 238, .26), rgba(99, 102, 241, .34));
  background-size: 240% 100%;
  border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(12px);
  color: #fff;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  white-space: nowrap;
  isolation: isolate;
  will-change: transform;
  animation: hue-flow 9s ease-in-out infinite alternate;
  transition: transform var(--t) var(--ease), border-color var(--t) var(--ease);
}
.hero-cta::before {
  content: "";
  position: absolute;
  inset: 12% -4% -46%;
  z-index: -1;
  border-radius: var(--r-pill);
  background: radial-gradient(ellipse at center,
    rgba(56, 189, 248, .55), rgba(99, 102, 241, .3) 45%, transparent 72%);
  animation: cta-pulse 4.5s ease-in-out infinite alternate;
}
@keyframes cta-pulse {
  from { opacity: .7; filter: blur(20px); }
  to   { opacity: 1;  filter: blur(26px); }
}
.hero-cta:hover { transform: scale(1.035); border-color: rgba(125, 211, 252, .55); }
.hero-cta svg { width: 17px; height: 17px; transition: transform var(--t) var(--ease); }
.hero-cta:hover svg { transform: translate(3px, -3px); }

/* ══════════════════════════════════════════ tilted browser mockup ═══ */
.hero-visual { perspective: 1900px; perspective-origin: 40% 50%; }

.browser {
  --acc1: #6366F1;
  --acc2: #38BDF8;
  position: relative;
  width: 100%;
  border-radius: 18px;
  background: linear-gradient(165deg, #1B2444 0%, #101A33 55%, #080D1A 100%);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow:
    0 60px 120px rgba(0, 0, 0, .6),
    0 0 0 1px rgba(255, 255, 255, .04),
    0 0 90px rgba(56, 189, 248, .22);
  box-shadow:
    0 60px 120px rgba(0, 0, 0, .6),
    0 0 0 1px rgba(255, 255, 255, .04),
    0 0 90px color-mix(in srgb, var(--acc2) 22%, transparent);
  overflow: hidden;
  /* rests flat / straight-facing; GSAP adds only a slight pointer tilt */
  transform: none;
  transform-style: preserve-3d;
  will-change: transform;
  transition: box-shadow 1.2s var(--ease);
}

/* title bar (never changes) */
.bw-bar {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .8rem 1rem;
  background: linear-gradient(180deg, #2A3358, #212A4A);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.bw-dots { display: flex; gap: 6px; flex: none; }
.bw-dots i { width: 11px; height: 11px; border-radius: 50%; }
.bw-dots i:nth-child(1) { background: #FF5F57; }
.bw-dots i:nth-child(2) { background: #FEBC2E; }
.bw-dots i:nth-child(3) { background: #28C840; }
.bw-url {
  display: flex; align-items: center; gap: .45rem;
  flex: 1;
  padding: .4rem 1rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .08);
  font-size: .8rem; font-weight: 600;
  color: rgba(255, 255, 255, .82);
  letter-spacing: -0.01em;
}
.bw-url svg { width: 13px; height: 13px; color: #34D399; flex: none; }

/* the loading sweep between designs */
.bw-loader { position: relative; height: 2.5px; background: rgba(255, 255, 255, .05); overflow: hidden; }
.bw-loader i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(90deg, var(--acc1), var(--acc2));
  box-shadow: 0 0 10px rgba(56, 189, 248, .7);
  box-shadow: 0 0 10px color-mix(in srgb, var(--acc2) 70%, transparent);
}

/* the swapped page body */
.bw-screen {
  padding: 1rem 1.1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: .8rem;
  min-height: 340px;
}

/* ── mock atoms — shared by every design variant ─────────────────────── */
.m-top { display: flex; align-items: center; justify-content: space-between; }
.m-tabs { display: flex; gap: .4rem; }
.m-tabs i { width: 32px; height: 8px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .13); }

.m-bar { height: 10px; border-radius: 5px; background: rgba(255, 255, 255, .1); }
.m-bar.light { height: 17px; background: rgba(255, 255, 255, .84); }
.m-bar.xl { height: 21px; background: rgba(255, 255, 255, .84); }
.m-bar.w90 { width: 90%; } .m-bar.w85 { width: 85%; } .m-bar.w80 { width: 80%; }
.m-bar.w70 { width: 70%; } .m-bar.w60 { width: 60%; } .m-bar.w55 { width: 55%; }
.m-bar.w45 { width: 45%; } .m-bar.w35 { width: 35%; } .m-bar.w30 { width: 30%; }

.m-pill {
  height: 15px; width: 74px;
  border-radius: 5px;
  background: linear-gradient(100deg, var(--acc1), var(--acc2));
}
.m-pill.btn { height: 26px; width: 40%; border-radius: 8px; }
.m-pill.btn.lg { height: 34px; width: 72%; border-radius: 10px; }
.m-pill.btn.sm { height: 22px; width: 32%; border-radius: 7px; }

.m-sq { width: 22px; height: 22px; border-radius: 6px; background: linear-gradient(140deg, var(--acc1), var(--acc2)); }
.m-sq.lg { width: 52px; height: 52px; border-radius: 12px; opacity: .55; }
.m-circ { width: 46px; height: 46px; border-radius: 50%; background: rgba(56, 189, 248, .24); background: color-mix(in srgb, var(--acc2) 24%, transparent); }

.m-panel {
  position: relative;
  border-radius: 12px;
  border: 1px solid rgba(125, 211, 252, .18);
  border: 1px solid color-mix(in srgb, var(--acc2) 18%, transparent);
  background: linear-gradient(150deg, rgba(56, 189, 248, .16), rgba(99, 102, 241, .08) 60%, transparent);
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--acc2) 16%, transparent),
    color-mix(in srgb, var(--acc1) 8%, transparent) 60%, transparent);
}
.m-panel.plain {
  border-color: rgba(255, 255, 255, .07);
  background: linear-gradient(160deg, rgba(255, 255, 255, .045), transparent);
}
.m-panel.hero { min-height: 152px; padding: 1rem; display: flex; justify-content: space-between; align-items: flex-start; }
.m-panel.hero .m-sq.lg { align-self: flex-end; }
.m-panel.tall { min-height: 150px; }
.m-panel.half { flex: 1; min-height: 66px; }

.m-cols { display: grid; gap: .8rem; }
.m-cols.c6040 { grid-template-columns: 1.1fr .9fr; }
.m-cols.c5545 { grid-template-columns: 1.05fr .95fr; }
.m-cols.c6535 { grid-template-columns: 1.4fr .8fr; }

.m-stack { display: flex; flex-direction: column; gap: .5rem; }
.m-stack.gap { gap: .7rem; }
.m-stack.center { justify-content: center; }

.m-grid { display: grid; gap: .7rem; }
.m-grid.g3 { grid-template-columns: repeat(3, 1fr); }
.m-grid.g4 { grid-template-columns: repeat(4, 1fr); }

.m-card {
  padding: .75rem;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, .07);
  background: linear-gradient(160deg, rgba(255, 255, 255, .045), transparent);
  display: flex; flex-direction: column; gap: .45rem;
  min-height: 74px;
}
.m-card.plain { min-height: 84px; }

.m-row {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .6rem;
  border-radius: 9px;
  background: rgba(255, 255, 255, .045);
}
.m-row .m-bar { flex: 1; height: 8px; }

.m-inline { display: flex; align-items: center; gap: .6rem; }
.m-dots { display: flex; gap: .3rem; }
.m-dots i { width: 18px; height: 18px; border-radius: 50%; background: rgba(255, 255, 255, .13); }

/* dashboard variant */
.m-dash { display: grid; grid-template-columns: 128px 1fr; gap: .9rem; }
.m-side {
  display: flex; flex-direction: column; gap: .45rem;
  padding-right: .9rem;
  border-right: 1px solid rgba(255, 255, 255, .07);
}
.m-side .m-bar { height: 8px; }
.m-main { display: flex; flex-direction: column; gap: .7rem; }
.m-stat {
  padding: .6rem .7rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .07);
  background: rgba(255, 255, 255, .035);
  display: flex; flex-direction: column; gap: .4rem; align-items: center;
}
.m-stat .m-pill { width: 46px; height: 13px; }

.m-chart { display: flex; align-items: flex-end; gap: 7px; height: 108px; padding: .5rem; }
.m-chart i {
  flex: 1;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, var(--acc2), var(--acc1));
}

/* scripted cursor: parked at 0,0 and moved with transforms */
.bw-cursor {
  position: absolute;
  left: 0; top: 0;
  width: 23px; height: 23px;
  filter: drop-shadow(0 3px 7px rgba(0, 0, 0, .6));
  pointer-events: none;
  opacity: 0;
  z-index: 5;
  will-change: transform;
}

/* click ripple, fired at the cursor tip */
.bw-ripple {
  position: absolute;
  left: 0; top: 0;
  width: 46px; height: 46px;
  margin: -23px 0 0 -23px;
  border-radius: 50%;
  border: 2px solid var(--acc2);
  background: rgba(255, 255, 255, .06);
  opacity: 0;
  pointer-events: none;
  z-index: 4;
  will-change: transform, opacity;
}

/* the element the cursor clicks in each design */
.m-click { position: relative; }

/* ──────────────────────────────────────────────────── responsive ────── */
@media (max-width: 1080px) {
  .hero { min-height: auto; padding-top: calc(var(--header-h) + 2.75rem); }
  .hero-grid { grid-template-columns: 1fr; gap: 3rem; }
  .hero-copy { max-width: 640px; }
  .hero-visual { perspective-origin: 50% 50%; }
  .browser { transform: none; }
}
@media (max-width: 720px) {
  .hero-title .t-script { font-size: clamp(2.3rem, 11vw, 3.2rem); }
  .hero-title .t-strong { font-size: clamp(2.1rem, 10vw, 3rem); }
  .proof-avatars span { width: 40px; height: 40px; }
  .hero-cta { width: 100%; justify-content: center; }
  .browser { transform: none; }
  .m-grid.g4 { grid-template-columns: repeat(2, 1fr); }
  .m-dash { grid-template-columns: 92px 1fr; }
  .bw-screen { min-height: 260px; }
}
@media (max-width: 480px) {
  .m-cols.c6040, .m-cols.c5545, .m-cols.c6535 { grid-template-columns: 1fr; }
  .m-grid.g3 { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-title .t-script, .hero::before, .hero-title .uline svg path,
  .hero-cta, .hero-cta::before,
  .hero-glow.g1, .hero-glow.g2, .hero-glow.g3 { animation: none !important; }
}