/* ─────────────────────────────────────────────
   Home page — hero + all sections
───────────────────────────────────────────── */

/* ══════════════════════════════════════════
   HERO
══════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  /* content col | orb col */
  grid-template-columns: 1fr 1fr;
  align-items: center;
  overflow: hidden;
  background: var(--bg-0);
  padding-block: var(--nav-h) 80px;
}

/* WebGL canvas — fills behind everything */
#hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}

/* Noise texture overlay */
.hero__noise {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.022;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px;
  pointer-events: none;
}

/* ── Left column: text ── */
.hero__text {
  position: relative;
  z-index: 3;
  padding-inline: var(--pad-x);
  padding-left: max(var(--pad-x), calc((100vw - var(--wrap)) / 2 + var(--pad-x)));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
}

.hero__heading {
  opacity: 0;
  animation: aFadeUp 0.8s var(--ease) 0.1s forwards;
}
.hero__sub {
  color: var(--tx-2);
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  font-weight: 300;
  line-height: 1.75;
  max-width: 480px;
  opacity: 0;
  animation: aFadeUp 0.8s var(--ease) 0.46s forwards;
}
.hero__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  opacity: 0;
  animation: aFadeUp 0.8s var(--ease) 0.62s forwards;
}

/* ── Right column: orb ── */
.hero__orb-col {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--sp-5);
  height: 100%;
  min-height: 400px;
  opacity: 0;
  animation: aFadeIn 1.2s var(--ease) 0.5s forwards;
}

.hero__orb {
  position: relative;
  width: clamp(260px, 38vw, 560px);
  aspect-ratio: 1 / 1;
  perspective: 800px;
  will-change: transform;
  animation: orbFloat 9s ease-in-out infinite;
}

/* Outer ambient glow — neon purple halo */
.hero__orb::before {
  content: '';
  position: absolute;
  inset: -30%;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(168, 85, 247, 0.13) 0%,
    rgba(109, 40, 217, 0.07) 45%,
    transparent 68%
  );
  animation: orbGlow 7s ease-in-out infinite;
  will-change: opacity, transform;
  pointer-events: none;
}

/* Core sphere — violet & neon purple */
.hero__orb-sphere {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at 32% 26%,
    rgba(245, 240, 255, 0.95) 0%,
    rgba(168,  85, 247, 0.85) 25%,
    rgba( 76,  29, 149, 0.92) 55%,
    rgba(  8,   2,  15, 0.97) 100%
  );
  box-shadow:
    0 0 50px  rgba(168,  85, 247, 0.50),
    0 0 110px rgba(139,  92, 246, 0.22),
    inset 0 0 32px rgba(255, 255, 255, 0.08);
  will-change: filter;
  animation: sphereBreath 7s ease-in-out infinite;
}

/* Specular — pure white catch-light */
.hero__orb-sphere::before {
  content: '';
  position: absolute;
  top: 8%;
  left: 14%;
  width: 28%;
  height: 16%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,255,255,0.88) 0%, transparent 62%);
  transform: rotate(-20deg);
  filter: blur(4px);
  pointer-events: none;
}
/* Indigo rim — deepens the shadow side */
.hero__orb-sphere::after {
  content: '';
  position: absolute;
  bottom: 11%;
  right: 9%;
  width: 34%;
  height: 15%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(99, 60, 220, 0.35) 0%, transparent 70%);
  filter: blur(9px);
  pointer-events: none;
}

/*
   Ring occlusion — "globe wearing a ring" (Saturn effect).

   Each ring is two nested layers:
   1. .hero__orb-ringmask — holds the FIXED tilt only (rotateX/rotateY,
      no spin) and a static clip-path cutting it to exactly the half
      that is nearer the camera (front) or farther (back), given that
      tilt. Because the tilt never changes, this near/far boundary is
      camera-stable — clipping here is correct at every instant.
   2. .hero__orb-ring / .hero__orb-ring2 — the actual ellipse + light
      dot, sized to fill the mask exactly, carrying only the rotateZ
      spin animation. It spins freely inside the mask; whichever part
      of it currently lies in the "wrong" half for that mask instance
      is clipped away by the parent.

   Two mask instances of each ring exist in the DOM: a --back copy
   painted before the sphere (so the sphere occludes anything drawn
   over it) showing only the far half, and a --front copy painted
   after the sphere showing only the near half. Together they always
   reconstruct a full ring that passes correctly behind the globe.
*/
.hero__orb-ringmask {
  position: absolute;
  inset: 0%;
  border-radius: 50%;
  transform-style: preserve-3d;
  pointer-events: none;
}
.hero__orb-ringmask--r1 { transform: rotateX(68deg); }
.hero__orb-ringmask--r2 { inset: -7%; transform: rotateX(58deg) rotateY(25deg); }

/* Near half (larger local-Y, i.e. bottom in local space) renders in front of the sphere. */
.hero__orb-ringmask--front { clip-path: inset(50% 0 0 0); }
/* Far half (top in local space) renders behind the sphere. */
.hero__orb-ringmask--back  { clip-path: inset(0 0 50% 0); }

/* Ring 1 — violet */
.hero__orb-ring {
  position: absolute;
  inset: 0%;
  border-radius: 50%;
  border: 1px solid rgba(167, 139, 250, 0.40);
  animation: ring1Spin 13s linear infinite;
}
.hero__orb-ring::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c4b5fd;
  box-shadow: 0 0 14px #c4b5fd, 0 0 5px #fff;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
}

/* Ring 2 — indigo */
.hero__orb-ring2 {
  position: absolute;
  inset: 0%;
  border-radius: 50%;
  border: 1px solid rgba(139, 92, 246, 0.20);
  animation: ring2Spin 20s linear infinite reverse;
}
.hero__orb-ring2::after {
  content: '';
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #a78bfa;
  box-shadow: 0 0 10px #a78bfa;
  bottom: -2.5px;
  left: 50%;
  transform: translateX(-50%);
}

/* Floating particles */
.hero__orb-dots {
  position: absolute;
  inset: -30%;
  pointer-events: none;
}
.hero__orb-dot {
  position: absolute;
  border-radius: 50%;
}
.hero__orb-dot:nth-child(1){ width:4px;height:4px;background:var(--ac-lt);box-shadow:0 0 6px var(--ac-lt);top:18%;left:78%;animation:dotDrift 7s ease-in-out 0s    infinite; }
.hero__orb-dot:nth-child(2){ width:3px;height:3px;background:var(--gd);   box-shadow:0 0 5px var(--gd);   top:70%;left:80%;animation:dotDrift 9s ease-in-out -2s   infinite; }
.hero__orb-dot:nth-child(3){ width:5px;height:5px;background:var(--ac-lt);box-shadow:0 0 8px var(--ac-lt);top:82%;left:22%;animation:dotDrift 6s ease-in-out -1.5s infinite; }
.hero__orb-dot:nth-child(4){ width:3px;height:3px;background:var(--gd);   box-shadow:0 0 5px var(--gd);   top:14%;left:28%;animation:dotDrift 8s ease-in-out -3.2s infinite; }
.hero__orb-dot:nth-child(5){ width:4px;height:4px;background:var(--ac-lt);box-shadow:0 0 6px var(--ac-lt);top:50%;left:90%;animation:dotDrift 10s ease-in-out -4s  infinite; }
.hero__orb-dot:nth-child(6){ width:3px;height:3px;background:var(--gd);   box-shadow:0 0 5px var(--gd);   top:32%;left:10%;animation:dotDrift 7.5s ease-in-out -5s infinite; }

/* Scroll hint */
.hero__scroll {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  color: var(--tx-3);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0;
  animation: aFadeIn 1s var(--ease) 1.4s forwards;
}
.hero__scroll-line {
  width: 1px;
  height: 44px;
  background: linear-gradient(to bottom, var(--ac-lt), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}

/* ── Mobile hero ── */
@media (max-width: 800px) {
  .hero {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    padding-block: calc(var(--nav-h) + 32px) 100px;
    text-align: center;
  }
  .hero__text {
    align-items: center;
    padding-inline: var(--pad-x);
    padding-left: var(--pad-x);
    order: 1;
  }
  .hero__sub { text-align: center; }
  .hero__actions { justify-content: center; }
  .hero__orb-col {
    order: 2;
    min-height: 300px;
    padding-inline: var(--sp-3);
  }
  .hero__orb {
    width: clamp(220px, 70vw, 360px);
  }
}

/* ══════════════════════════════════════════
   MARQUEE
══════════════════════════════════════════ */
.marquee-wrap {
  border-block: 1px solid var(--bd);
  overflow: hidden;
  padding-block: 18px;
}
.marquee-track {
  display: flex;
  width: max-content;
  gap: 48px;
  animation: marqueeRun 28s linear infinite;
}
.marquee-item {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--tx-3);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}
.marquee-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ac);
  flex-shrink: 0;
}

/* ══════════════════════════════════════════
   STATS
══════════════════════════════════════════ */
.stats-sec { padding-block: var(--sec-y); }
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--bd);
  border-radius: var(--r-l);
  overflow: hidden;
}
.stat-cell {
  padding: 44px 36px;
  background: var(--bg-3);
  text-align: center;
  border-right: 1px solid var(--bd);
  position: relative;
  overflow: hidden;
  transition: background 0.3s;
}
.stat-cell:last-child { border-right: none; }
.stat-cell::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, var(--ac-fill) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.stat-cell:hover::after { opacity: 1; }
.stat-num {
  font-family: var(--f-head);
  font-size: clamp(2.2rem, 3.5vw, 3.5rem);
  font-weight: 700;
  line-height: 1;
  margin-bottom: 8px;
  background: linear-gradient(135deg, #fff 0%, var(--ac-lt) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.stat-label {
  color: var(--tx-2);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
}
@media (max-width: 900px) {
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stat-cell:nth-child(2) { border-right: none; }
  .stat-cell:nth-child(1),
  .stat-cell:nth-child(2) { border-bottom: 1px solid var(--bd); }
}
@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr; }
  .stat-cell { border-right: none !important; border-bottom: 1px solid var(--bd) !important; }
  .stat-cell:last-child { border-bottom: none !important; }
}

/* ══════════════════════════════════════════
   SERVICES
══════════════════════════════════════════ */
.services-sec { padding-block: var(--sec-y); }
.sec-header {
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: var(--sp-7);
}
.sec-header .eyebrow { justify-content: center; margin-bottom: var(--sp-2); }
.sec-header p {
  color: var(--tx-2);
  font-size: 1rem;
  line-height: 1.75;
  margin-top: var(--sp-2);
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.svc-card {
  padding: 40px 36px;
  border-radius: var(--r-l);
  border: 1px solid var(--bd);
  background: var(--bg-3);
  position: relative;
  overflow: hidden;
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.svc-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--ac), var(--gd));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.svc-card:hover {
  transform: translateY(-5px);
  border-color: var(--ac-border);
  box-shadow: 0 20px 60px rgba(0,0,0,0.45), 0 0 48px var(--ac-glow);
}
.svc-card:hover::after { transform: scaleX(1); }
.svc-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--r-m);
  background: var(--ac-fill);
  border: 1px solid var(--ac-border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  transition: all 0.3s var(--ease);
}
.svc-icon svg { width: 22px; height: 22px; color: var(--ac-lt); transition: color 0.3s; }
.svc-card:hover .svc-icon { background: var(--ac); border-color: var(--ac); box-shadow: 0 0 24px var(--ac-glow); }
.svc-card:hover .svc-icon svg { color: #fff; }
.svc-title { font-family: var(--f-head); font-size: 1.2rem; font-weight: 600; margin-bottom: 10px; }
.svc-desc  { color: var(--tx-2); font-size: 0.875rem; line-height: 1.7; }
@media (max-width: 960px) { .services-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .services-grid { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════
   WORK GRID
══════════════════════════════════════════ */
.work-sec { padding-block: var(--sec-y); }
.work-hd {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: var(--sp-6);
  flex-wrap: wrap;
}
/*
  3-column grid.
  Left 2 cols: landscape cards (16/9), stacked 3 rows.
  Right col:   portrait card spanning all 3 rows — no empty space.
  Bottom row:  3 equal landscape cards.
*/
.work-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}
.wcard--land { aspect-ratio: 16 / 9; }
.wcard--port {
  grid-column: 3;
  grid-row: 1 / 4;
}

.wcard {
  border-radius: var(--r-l);
  overflow: hidden;
  position: relative;
  border: 1px solid var(--bd);
  background: var(--bg-2);
  cursor: pointer;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.wcard:hover { transform: translateY(-4px); box-shadow: 0 24px 72px rgba(0,0,0,0.55); }

.wcard__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform 0.5s var(--ease);
}
.wcard:hover .wcard__img { transform: scale(1.03); }

.wcard__info {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(7,7,26,0.92) 0%, transparent 55%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px;
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}
.wcard:hover .wcard__info { opacity: 1; }
.wcard__cat  { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ac-lt); margin-bottom: 6px; }
.wcard__name {
  font-family: var(--f-head);
  font-size: 1.3rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}
.wcard__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.22);
  color: #fff;
  flex-shrink: 0;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.wcard__link:hover { background: var(--ac); border-color: var(--ac); transform: scale(1.15); }

@media (max-width: 860px) {
  .work-grid { grid-template-columns: 1fr; }
  .wcard--land { aspect-ratio: 16 / 9; }
  .wcard--port { grid-column: auto; grid-row: auto; aspect-ratio: 3 / 4; }
}

/* ══════════════════════════════════════════
   PROCESS
══════════════════════════════════════════ */
.process-sec { padding-block: var(--sec-y); background: var(--bg-1); }
.process-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
  margin-top: var(--sp-7);
}
.process-steps::before {
  content: '';
  position: absolute;
  top: 44px;
  left: 12.5%;
  right: 12.5%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ac-border), var(--gd-glow), var(--ac-border), transparent);
}
.pstep {
  padding: 0 20px var(--sp-5);
  text-align: center;
  position: relative;
  z-index: 1;
}
.pstep__num {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  border: 1px solid var(--ac-border);
  background: var(--bg-2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--sp-3);
  font-family: var(--f-head);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--ac-lt);
  transition: all 0.35s var(--ease);
}
.pstep:hover .pstep__num { background: var(--ac); border-color: var(--ac); color: #fff; box-shadow: 0 0 32px var(--ac-glow); }
.pstep__title { font-family: var(--f-head); font-size: 1.1rem; font-weight: 600; margin-bottom: 10px; }
.pstep__desc  { color: var(--tx-2); font-size: 0.83rem; line-height: 1.7; }
@media (max-width: 860px) {
  .process-steps { grid-template-columns: 1fr 1fr; }
  .process-steps::before { display: none; }
}
@media (max-width: 480px) {
  .process-steps { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════
   TESTIMONIALS
══════════════════════════════════════════ */
.testi-sec { padding-block: var(--sec-y); }
.testi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: var(--sp-6);
}
.tcard {
  padding: 36px;
  border-radius: var(--r-l);
  border: 1px solid var(--bd);
  background: var(--bg-3);
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.tcard:hover { border-color: var(--ac-border); box-shadow: 0 12px 40px rgba(0,0,0,0.4); }
.tcard__stars { display: flex; gap: 3px; margin-bottom: 18px; color: var(--gd); font-size: 13px; }
.tcard__quote {
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--tx-2);
  font-style: italic;
  margin-bottom: 24px;
}
.tcard__author { display: flex; align-items: center; gap: 12px; }
.tcard__avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ac), var(--gd));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  color: #fff;
  flex-shrink: 0;
}
.tcard__name { font-weight: 600; font-size: 0.875rem; margin-bottom: 2px; }
.tcard__role { color: var(--tx-3); font-size: 0.78rem; }
@media (max-width: 680px) {
  .testi-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════
   CTA BANNER
══════════════════════════════════════════ */
.cta-sec { padding-block: var(--sec-y); }
.cta-box {
  position: relative;
  border-radius: var(--r-2xl);
  border: 1px solid var(--ac-border);
  background: linear-gradient(135deg, rgba(139,92,246,0.12) 0%, rgba(212,168,67,0.06) 100%);
  padding: clamp(60px, 8vw, 110px) clamp(32px, 6vw, 80px);
  text-align: center;
  overflow: hidden;
}
.cta-box::before {
  content: '';
  position: absolute;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--ac-glow) 0%, transparent 70%);
  pointer-events: none;
}
.cta-box .h-lg { max-width: 640px; margin-inline: auto; margin-bottom: var(--sp-2); }
.cta-sub { color: var(--tx-2); font-size: 1.05rem; max-width: 480px; margin: 0 auto var(--sp-5); }
.cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ══════════════════════════════════════════
   KEYFRAMES
══════════════════════════════════════════ */
@keyframes aFadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}
@keyframes aFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes orbFloat {
  0%, 100% { transform: translateY(0); }
  45%       { transform: translateY(-16px); }
}
@keyframes orbGlow {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.06); }
}
@keyframes sphereBreath {
  0%, 100% { filter: brightness(1)    saturate(1); }
  50%       { filter: brightness(1.16) saturate(1.12); }
}
@keyframes ring1Spin {
  from { transform: rotateZ(0deg); }
  to   { transform: rotateZ(360deg); }
}
@keyframes ring2Spin {
  from { transform: rotateZ(0deg); }
  to   { transform: rotateZ(360deg); }
}
@keyframes dotDrift {
  0%, 100% { transform: translate(0, 0)       opacity: 0.7; }
  30%       { transform: translate(10px,-14px); opacity: 1;   }
  60%       { transform: translate(-6px,-20px); opacity: 0.5; }
}
@keyframes scrollPulse {
  0%, 100% { opacity: 1;   transform: scaleY(1);   }
  50%       { opacity: 0.3; transform: scaleY(0.5); }
}
@keyframes marqueeRun {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}