/*
 * ═══════════════════════════════════════════════════════
 *  WAVE DIGITAL — HOME.CSS
 *  Styles specific to index.html only.
 *  Do not import on other pages.
 * ═══════════════════════════════════════════════════════
 */

/* ═══════════════════════════
   HERO — BROKEN GRID
═══════════════════════════ */
.hero {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  padding: 0;
  position: relative;
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 60% 60% at 80% 50%, rgba(37,99,235,.13) 0%, transparent 65%),
    radial-gradient(ellipse 30% 40% at 10% 80%, rgba(96,165,250,.07) 0%, transparent 60%);
}
.hero-grid-lines {
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(rgba(59,130,246,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59,130,246,.03) 1px, transparent 1px);
  background-size: 72px 72px;
}
/* left col — big type */
.hero-left {
  position: relative; z-index: 1;
  padding: 11rem 3rem 5rem 4rem;
  display: flex; flex-direction: column; justify-content: flex-end;
  border-right: 1px solid rgba(255,255,255,.06);
  overflow: hidden;
}
.hero-eyebrow {
  font-family: 'Manrope', sans-serif;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--blue-b);
  display: flex; align-items: center; gap: .7rem;
  margin-bottom: 1.8rem;
  animation: fadeUp .6s var(--ease) both;
}
.hero-eyebrow::before { content: ''; width: 22px; height: 2px; background: currentColor; border-radius: 2px; }
h1.hero-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(3.8rem, 7vw, 9.5rem);
  line-height: .88;
  letter-spacing: .01em;
  color: var(--pure);
  margin-bottom: 0;
  animation: fadeUp .7s .1s var(--ease) both;
}
/* offset line — creative broken grid */
.hero-title-offset {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(3.8rem, 7vw, 9.5rem);
  line-height: .88;
  letter-spacing: .01em;
  color: transparent;
  -webkit-text-stroke: 2px rgba(255,255,255,.55);
  margin-left: 3rem;
  animation: fadeUp .7s .18s var(--ease) both;
}
.hero-title-blue {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(3.8rem, 7vw, 9.5rem);
  line-height: .88;
  color: var(--blue-b);
  animation: fadeUp .7s .26s var(--ease) both;
}
/* right col */
.hero-right {
  position: relative; z-index: 1;
  padding: 11rem 4rem 5rem 3rem;
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: 2.4rem;
}
.hero-sub {
  font-family: 'Manrope', sans-serif;
  font-size: 1.12rem; font-weight: 400;
  color: rgba(232,236,242,.82);
  max-width: 420px; line-height: 1.78;
  animation: fadeUp .7s .3s var(--ease) both;
}
.hero-sub strong { color: var(--pure); font-weight: 700; }
.hero-actions {
  display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap;
  animation: fadeUp .7s .38s var(--ease) both;
}
.btn-p {
  font-family: 'Manrope', sans-serif;
  font-size: .84rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  background: var(--blue); color: var(--pure);
  padding: 1rem 2.2rem; border-radius: 3px;
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(37,99,235,.28);
  transition: background .2s, transform .15s, box-shadow .2s;
  display: inline-flex; align-items: center; gap: .4rem;
}
.btn-p:hover { background: var(--blue-b); transform: translateY(-2px); box-shadow: 0 8px 32px rgba(37,99,235,.42); }
.btn-g {
  font-family: 'Manrope', sans-serif;
  font-size: .84rem; font-weight: 600;
  color: rgba(232,236,242,.5); text-decoration: none;
  display: inline-flex; align-items: center; gap: .4rem;
  transition: color .2s;
}
.btn-g:hover { color: var(--blue-g); }
.btn-g .arr, .btn-p .arr { transition: transform .2s; }
.btn-g:hover .arr, .btn-p:hover .arr { transform: translateX(4px); }
/* hero metrics — floating cards */
.hero-metrics {
  display: grid; grid-template-columns: 1fr 1fr; gap: .8rem;
  animation: fadeUp .8s .45s var(--ease) both;
}
.hm {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(59,130,246,.1);
  border-radius: 8px; padding: 1.2rem 1rem;
  backdrop-filter: blur(8px);
  transition: border-color .3s, transform .3s;
}
.hm:hover { border-color: rgba(59,130,246,.3); transform: translateY(-3px); }
.hm-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2.2rem; line-height: 1;
  color: var(--blue-g); margin-bottom: .2rem;
}
.hm-label {
  font-family: 'Manrope', sans-serif;
  font-size: .65rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: rgba(232,236,242,.34);
}
/* hero vertical scroll hint */
.hero-scroll-hint {
  position: absolute; bottom: 2.5rem; left: 4rem;
  display: flex; align-items: center; gap: .8rem; z-index: 1;
  font-family: 'Manrope', sans-serif;
  font-size: .7rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(232,236,242,.22);
  animation: fadeUp 1s .8s var(--ease) both;
}
.scroll-line {
  width: 1px; height: 40px;
  background: linear-gradient(to bottom, transparent, rgba(59,130,246,.4));
  animation: scrollAnim 2s ease-in-out infinite;
}
@keyframes scrollAnim { 0%,100%{transform:scaleY(1);opacity:.5} 50%{transform:scaleY(1.4);opacity:1} }

/* ═══════════════════════════
   HORIZONTAL SCROLL
═══════════════════════════ */
.hscroll-outer { position: relative; }
.hscroll-sticky {
  position: sticky; top: 0; height: 100vh;
  overflow: hidden; background: var(--bg2);
  border-top: 1px solid rgba(255,255,255,.04);
}
.hscroll-track { display: flex; height: 100%; will-change: transform; }
.hslide {
  flex: 0 0 100vw;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6rem 6vw;
}
.hslide.intro-slide {
  flex-direction: row; align-items: center; justify-content: space-between;
  gap: 4rem;
}
.intro-with-svg { display: flex !important; }
.intro-text { flex: 0 0 50%; }
.hslide.intro-slide h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2.8rem, 5.5vw, 6rem);
  line-height: .9; color: var(--pure); margin-bottom: 1.4rem;
}
.hslide.intro-slide h2 em { color: var(--blue-b); font-style: normal; }
.hslide.intro-slide p {
  font-family: 'Manrope', sans-serif;
  font-size: 1.05rem; color: rgba(232,236,242,.72);
  max-width: 480px; line-height: 1.78;
}
.intro-svg-wrap {
  flex: 0 0 44%;
  display: flex; align-items: center; justify-content: center;
}
.intro-svg-wrap svg {
  width: 100%; max-width: 420px; height: auto;
  filter: drop-shadow(0 0 60px rgba(37,99,235,.25));
}
/* Orbiting dots animation */
@keyframes orbit1 { from{transform:rotate(0deg) translateX(180px) rotate(0deg)} to{transform:rotate(360deg) translateX(180px) rotate(-360deg)} }
@keyframes orbit2 { from{transform:rotate(90deg) translateX(180px) rotate(-90deg)} to{transform:rotate(450deg) translateX(180px) rotate(-450deg)} }
@keyframes orbit3 { from{transform:rotate(180deg) translateX(180px) rotate(-180deg)} to{transform:rotate(540deg) translateX(180px) rotate(-540deg)} }
@keyframes orbit4 { from{transform:rotate(270deg) translateX(180px) rotate(-270deg)} to{transform:rotate(630deg) translateX(180px) rotate(-630deg)} }
@keyframes globePulse { 0%,100%{opacity:.6} 50%{opacity:1} }
.orbit-dot-1 { transform-origin:240px 210px; animation:orbit1 8s linear infinite; }
.orbit-dot-2 { transform-origin:240px 210px; animation:orbit2 8s linear infinite; }
.orbit-dot-3 { transform-origin:240px 210px; animation:orbit3 8s linear infinite; }
.orbit-dot-4 { transform-origin:240px 210px; animation:orbit4 8s linear infinite; }
.hslide.prob-slide {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  padding-left: 8vw !important;
  padding-right: 8vw !important;
  justify-items: center;
}
.prob-svg-wrap svg {
  width: 520px;
  max-width: 52vw;
  min-width: 300px;
  height: auto;
  display: block;
  filter: drop-shadow(0 0 60px rgba(37,99,235,.22));
}
.prob-text .tag { color: var(--blue-g); }
.prob-text .tag::before { background: var(--blue-g); }
h3.prob-title {
  font-family: 'Manrope', sans-serif;
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  font-weight: 800; color: var(--pure);
  margin-bottom: 1rem; line-height: 1.2;
}
.prob-body {
  font-family: 'Manrope', sans-serif;
  font-size: 1rem; color: rgba(232,236,242,.75);
  line-height: 1.82; max-width: 440px;
}
.hscroll-dots {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
  display: flex; gap: .6rem; z-index: 10;
}
.hdot { width:8px; height:8px; border-radius:50%; background:rgba(232,236,242,.25); transition:all .35s; cursor:pointer; }
.hdot.active { background:var(--blue-b); transform:scale(1.4); box-shadow:0 0 0 3px rgba(59,130,246,.3); }
.scroll-hint-v {
  position: absolute; bottom: 2rem; right: 3rem;
  font-family: 'Manrope', sans-serif;
  font-size: .68rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(232,236,242,.2);
}


/* ═══════════════════════════
   ABOUT
═══════════════════════════ */
.about {
  padding: 7rem 4rem;
  background: var(--white);
  color: var(--bg);
}
.tag {
  font-family: 'Manrope', sans-serif;
  font-size: .7rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--blue-b);
  display: flex; align-items: center; gap: .6rem;
  margin-bottom: .9rem;
}
.tag::before { content: ''; width: 20px; height: 2px; background: currentColor; border-radius: 2px; flex-shrink: 0; }
.about .tag { color: var(--blue); }
.about .tag::before { background: var(--blue); }
.about-inner {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 6rem; align-items: start; max-width: 1240px; margin: 0 auto;
}
h2.about-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(3rem, 5.5vw, 5.5rem);
  line-height: .9; color: var(--bg); margin-bottom: 1.6rem;
}
h2.about-title span { color: var(--blue); }
.about-lead {
  font-family: 'Manrope', sans-serif;
  font-size: 1.08rem; font-weight: 500;
  color: rgba(26,29,35,.72); line-height: 1.78; margin-bottom: 1.2rem;
}
.about-body {
  font-family: 'Manrope', sans-serif;
  font-size: .95rem; color: rgba(26,29,35,.52);
  line-height: 1.84; margin-bottom: 2.4rem;
}
.about-vals { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.aval {
  background: #fff; border-radius: 8px; padding: 1.2rem 1.4rem;
  border: 1px solid rgba(26,29,35,.07);
  border-left: 3px solid var(--blue);
}
h4.aval-title { font-family: 'Manrope', sans-serif; font-size: .85rem; font-weight: 700; color: var(--bg); margin-bottom: .3rem; }
.aval p { font-size: .8rem; color: rgba(26,29,35,.48); line-height: 1.55; }
/* about right — orbit svg */
.about-visual { display: flex; justify-content: center; align-items: center; padding-top: 2rem; }
.about-visual svg { width: min(420px, 90%); height: auto; }


/* ═══════════════════════════
   HOW — same hscroll
═══════════════════════════ */
.how-slide {
  flex: 0 0 100vw; width: 100vw; height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 6rem 4rem; background: var(--bg2);
}
.how-slide.intro-slide {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding-left: 8vw !important;
  padding-right: 8vw !important;
}
.how-slide.intro-slide h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(3rem, 7vw, 7rem); line-height: .9; color: var(--pure); margin-bottom: 1.2rem;
}
.how-slide.intro-slide h2 em { color: var(--blue-b); font-style: normal; }
.how-slide.intro-slide p { font-family: 'Manrope', sans-serif; font-size: 1.05rem; color: rgba(232,236,242,.5); max-width: 520px; line-height: 1.78; margin-top: 1rem; }
.how-slide.step-slide {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  padding-left: 8vw !important;
  padding-right: 8vw !important;
  justify-items: center;
}
.step-num-big {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(7rem, 13vw, 12rem); line-height: 1;
  color: rgba(37,99,235,.1); margin-bottom: .4rem;
  transition: color .4s;
}
.step-slide:hover .step-num-big { color: rgba(37,99,235,.2); }
h3.step-title { font-family: 'Manrope', sans-serif; font-size: clamp(1.6rem, 2.4vw, 2.1rem); font-weight: 800; color: var(--pure); margin-bottom: 1rem; }
.step-body { font-family: 'Manrope', sans-serif; font-size: 1rem; color: rgba(232,236,242,.75); line-height: 1.8; max-width: 420px; }
.step-svg-wrap svg {
  width: 480px;
  max-width: 50vw;
  min-width: 280px;
  height: auto;
  display: block;
  filter: drop-shadow(0 0 50px rgba(37,99,235,.2));
}



/* ─── INTRO SPLIT — hero section layout ─── */
.intro-split {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 3rem;
  align-items: center;
  flex-direction: unset !important;
  padding-left: 8vw !important;
  padding-right: 8vw !important;
}
.intro-text { display: flex; flex-direction: column; gap: 1rem; }
.intro-visual { display: flex; align-items: center; justify-content: center; }
.intro-svg {
  width: 520px; max-width: 50vw; min-width: 320px;
  height: auto; display: block;
  filter: drop-shadow(0 0 80px rgba(37,99,235,.32));
}
@media(max-width:960px) {
  .intro-split { grid-template-columns: 1fr !important; padding-left:1.5rem !important; padding-right:1.5rem !important; }
  .intro-visual { display: none; }
}