/* ============================================================
   HOME.CSS — homepage-only vibrant / interactive layer.
   Loaded only on index.html, on top of the shared styles.css.
   Nothing here affects other pages.
   ============================================================ */

/* ---------- Grain texture overlay ---------- */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 999; pointer-events: none;
  opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Custom cursor (pointer devices only) ---------- */
@media (pointer: fine) {
  body { cursor: none; }
  #cursorDot, #cursorRing {
    position: fixed; top: 0; left: 0; border-radius: 50%;
    pointer-events: none; z-index: 1000; transform: translate(-50%, -50%);
  }
  #cursorDot { width: 6px; height: 6px; background: var(--pop); }
  #cursorRing {
    width: 34px; height: 34px; border: 1.5px solid rgba(215,255,61,0.55);
    transition: width .2s ease, height .2s ease, border-color .2s ease, background .2s ease;
  }
  #cursorRing.is-active {
    width: 56px; height: 56px; background: rgba(215,255,61,0.08); border-color: var(--pop);
  }
}
@media (pointer: coarse) {
  #cursorDot, #cursorRing { display: none; }
}

/* ---------- Scroll reveal ---------- */
[data-reveal] {
  opacity: 0; transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.16,.8,.3,1), transform .7s cubic-bezier(.16,.8,.3,1);
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
[data-reveal-group] > * { transition-delay: calc(var(--i, 0) * 90ms); }

/* ---------- Load-in hero animation ---------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
.hero-vibrant .eyebrow { animation: fadeUp .8s cubic-bezier(.16,.8,.3,1) both; animation-delay: .05s; }
.hero-vibrant h1 { animation: fadeUp .9s cubic-bezier(.16,.8,.3,1) both; animation-delay: .18s; }
.hero-vibrant .hero-sub { animation: fadeUp .9s cubic-bezier(.16,.8,.3,1) both; animation-delay: .32s; }
.hero-vibrant .hero-actions { animation: fadeUp .9s cubic-bezier(.16,.8,.3,1) both; animation-delay: .46s; }

/* ---------- Hero glow blobs ---------- */
.hero-vibrant { position: relative; overflow: hidden; }
.glow-blob {
  position: absolute; border-radius: 50%; filter: blur(70px); z-index: 0;
  opacity: 0.55; will-change: transform;
}
.blob-blue { width: 520px; height: 520px; background: var(--accent); top: -220px; left: -140px; animation: driftA 16s ease-in-out infinite alternate; }
.blob-lime { width: 380px; height: 380px; background: var(--pop); top: 40px; right: -160px; opacity: 0.35; animation: driftB 13s ease-in-out infinite alternate; }
.blob-blue2 { width: 300px; height: 300px; background: var(--accent-2); bottom: -160px; left: 30%; opacity: 0.3; animation: driftC 18s ease-in-out infinite alternate; }
@keyframes driftA { from { transform: translate(0,0) scale(1); } to { transform: translate(60px,40px) scale(1.15); } }
@keyframes driftB { from { transform: translate(0,0) scale(1); } to { transform: translate(-50px,50px) scale(0.9); } }
@keyframes driftC { from { transform: translate(0,0) scale(1); } to { transform: translate(40px,-30px) scale(1.1); } }
.hero-vibrant .wrap { position: relative; z-index: 1; }

.hero-vibrant h1 .accent { color: var(--pop); text-shadow: 0 0 28px rgba(215,255,61,0.35); }

/* ---------- Marquee ticker ---------- */
.ticker {
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  background: var(--bg-alt); overflow: hidden; white-space: nowrap; padding: 16px 0;
}
.ticker-track { display: inline-flex; animation: marquee 26s linear infinite; }
.ticker-track span {
  display: inline-flex; align-items: center; font-weight: 800; font-size: 15px;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-dim); padding: 0 28px;
}
.ticker-track span em { color: var(--pop); font-style: normal; margin-right: 28px; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ticker:hover .ticker-track { animation-play-state: paused; }

/* ---------- Count-up stats ---------- */
.strip-inner strong { font-variant-numeric: tabular-nums; }

/* ---------- Magnetic buttons ---------- */
.magnetic { position: relative; transition: transform .15s ease-out; }

/* ---------- Card tilt ---------- */
.tilt-card { transform-style: preserve-3d; will-change: transform; transition: transform .25s ease-out, border-color .15s; }
.tilt-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(215,255,61,0.12), transparent 60%);
  opacity: 0; transition: opacity .25s; pointer-events: none;
}
.tilt-card:hover::after { opacity: 1; }
.info-card { position: relative; overflow: hidden; }

/* ---------- Section angle dividers ---------- */
.angle-top { position: relative; }
.angle-top::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 60px;
  background: var(--bg-alt);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

/* ---------- Video section glow frame ---------- */
.video-frame.glow {
  position: relative; border-color: transparent;
  background: linear-gradient(var(--bg-alt), var(--bg-alt)) padding-box,
              linear-gradient(120deg, var(--accent), var(--pop)) border-box;
  border: 1px solid transparent;
  box-shadow: 0 0 60px rgba(47,111,255,0.18), 0 0 90px rgba(215,255,61,0.08);
}

/* ---------- Portfolio tile hover ---------- */
.portfolio-tile { transition: transform .3s ease, border-color .3s ease; }
.portfolio-tile:hover { transform: translateY(-6px); border-color: var(--pop); }
.portfolio-tile .placeholder { transition: transform .4s ease; }
.portfolio-tile:hover .placeholder { transform: scale(1.06); }

/* ---------- Pop CTA accents ---------- */
.pop-text { color: var(--pop); }
.btn-pop { background: var(--pop); color: #0a0a05; }
.btn-pop:hover { background: #e4ff6e; }

@media (max-width: 700px) {
  .glow-blob { display: none; }
  .ticker-track { animation-duration: 16s; }
}

/* ============================================================
   HOMEPAGE V2 — deeper, longer, more animated
   ============================================================ */

/* ---------- Interactive canvas backdrop ---------- */
#heroCanvas {
  position: absolute; inset: 0; z-index: 0; opacity: 0.55;
}
.hero-vibrant { min-height: 92vh; display: flex; align-items: center; padding: 140px 0 60px; }
.scroll-cue {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--text-dim); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  z-index: 1; animation: fadeUp .9s cubic-bezier(.16,.8,.3,1) both; animation-delay: .7s;
}
.scroll-cue .arrow { width: 1px; height: 26px; background: linear-gradient(var(--pop), transparent); animation: bounceY 1.6s ease-in-out infinite; }
@keyframes bounceY { 0%,100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(8px); opacity: .3; } }

/* ---------- Section labels ---------- */
.section-tag {
  display: inline-flex; align-items: center; gap: 8px; color: var(--pop);
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.16em; margin-bottom: 18px;
}
.section-tag::before { content: ""; width: 22px; height: 1px; background: var(--pop); }

/* ---------- Service rows (editorial layout) ---------- */
.service-rows { border-top: 1px solid var(--border); }
.service-row {
  display: grid; grid-template-columns: 120px 1fr 260px; gap: 32px; align-items: center;
  padding: 44px 28px; border-bottom: 1px solid var(--border);
  position: relative; overflow: hidden; transition: background .3s ease;
}
.service-row::before {
  content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .35s ease;
  background: linear-gradient(90deg, rgba(47,111,255,0.10), rgba(215,255,61,0.06) 60%, transparent);
  pointer-events: none;
}
.service-row:hover::before { opacity: 1; }
.service-row:hover .service-num { color: var(--pop); text-shadow: 0 0 24px rgba(215,255,61,0.4); }
.service-row:hover .service-name { transform: translateX(8px); }
.service-num {
  font-size: 40px; font-weight: 800; color: var(--border); transition: color .3s ease, text-shadow .3s ease;
  font-variant-numeric: tabular-nums;
}
.service-name { font-size: clamp(22px, 2.6vw, 32px); transition: transform .3s ease; margin-bottom: 10px; }
.service-desc { color: var(--text-dim); font-size: 15px; max-width: 640px; }
.service-tags { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.service-tags span {
  border: 1px solid var(--border); border-radius: 999px; padding: 6px 14px;
  font-size: 12px; color: var(--text-dim); white-space: nowrap;
}
@media (max-width: 860px) {
  .service-row { grid-template-columns: 60px 1fr; }
  .service-tags { grid-column: 2; justify-content: flex-start; }
  .service-num { font-size: 28px; }
}

/* ---------- Process timeline (horizontal scroll-snap) ---------- */
.process-scroll {
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 8px 4px 28px; margin: 0 -4px; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: var(--accent-dim) transparent;
}
.process-scroll::-webkit-scrollbar { height: 6px; }
.process-scroll::-webkit-scrollbar-thumb { background: var(--accent-dim); border-radius: 999px; }
.process-step {
  scroll-snap-align: start; flex: 0 0 260px; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 28px; transition: border-color .25s, transform .25s;
}
.process-step:hover { border-color: var(--pop); transform: translateY(-4px); }
.process-step .step-index {
  width: 40px; height: 40px; border-radius: 50%; background: var(--bg-alt); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--pop); margin-bottom: 18px;
}
.process-step h4 { font-size: 17px; margin-bottom: 8px; }
.process-step p { color: var(--text-dim); font-size: 13px; }
.process-hint { text-align: center; color: var(--text-dim); font-size: 12px; margin-top: 28px; letter-spacing: 0.06em; text-transform: uppercase; }

/* ---------- SkillBazaar showcase ---------- */
.skillbazaar-section {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, var(--bg-alt) 0%, #0a0d16 100%);
}
.skillbazaar-section .glow-blob { opacity: 0.3; }
.sb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 44px; }
@media (max-width: 900px) { .sb-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .sb-grid { grid-template-columns: 1fr; } }
.sb-card {
  background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 24px; transition: border-color .25s, transform .25s;
}
.sb-card:hover { border-color: var(--pop); transform: translateY(-4px); }
.sb-tier {
  display: inline-block; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em;
  padding: 4px 10px; border-radius: 999px; margin-bottom: 14px;
}
.sb-tier.starter { background: rgba(176,141,87,0.15); color: var(--tier-bronze); }
.sb-tier.mid { background: rgba(154,165,177,0.15); color: var(--tier-silver); }
.sb-tier.pro { background: rgba(215,255,61,0.12); color: var(--pop); }
.sb-card h4 { font-size: 16px; margin-bottom: 8px; }
.sb-card p { color: var(--text-dim); font-size: 13px; margin-bottom: 16px; min-height: 40px; }
.sb-price { font-weight: 800; font-size: 18px; }
.sb-cta { text-align: center; margin-top: 44px; }

/* ---------- Proof / results marquee ---------- */
.proof-section { overflow: hidden; }
.proof-track { display: flex; gap: 20px; animation: marquee2 34s linear infinite; width: max-content; }
.proof-section:hover .proof-track { animation-play-state: paused; }
@keyframes marquee2 { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.proof-card {
  flex: 0 0 300px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 26px;
}
.proof-card strong { display: block; font-size: 28px; color: var(--pop); margin-bottom: 6px; }
.proof-card span { color: var(--text-dim); font-size: 13px; }
.proof-quote {
  flex: 0 0 380px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 26px; font-style: italic; color: var(--text-dim); font-size: 14px;
  display: flex; flex-direction: column; justify-content: center;
}
.proof-quote cite { display: block; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--border); color: var(--accent-2); font-style: normal; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }

/* ---------- Big diagonal CTA ---------- */
.cta-big {
  position: relative; overflow: hidden;
  background: linear-gradient(120deg, rgba(47,111,255,0.16), rgba(215,255,61,0.08));
}
.cta-big::before {
  content: ""; position: absolute; inset: -20% -10%;
  background: radial-gradient(circle at 20% 20%, rgba(215,255,61,0.14), transparent 45%),
              radial-gradient(circle at 80% 80%, rgba(47,111,255,0.22), transparent 45%);
  z-index: 0;
}
.cta-big .wrap { position: relative; z-index: 1; }

/* ---------- FAQ tag on homepage ---------- */
.faq-item .faq-q h3 { font-size: 16px; }