/* ==========================================================================
   MindJek — Page-specific styles
   ========================================================================== */

/* ---- Hero ---- */
.hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(1.25rem, 4vw, 3rem));
  padding-bottom: clamp(3rem, 8vw, 6rem);
  overflow: hidden;
}
.hero__glow {
  position: absolute; z-index: 0; inset: -20% -10% auto;
  height: 70%;
  background: var(--grad-glow);
  filter: blur(20px);
  pointer-events: none;
}
/* faint dot grid for depth */
.hero::after {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background-image: radial-gradient(rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(65% 65% at 38% 32%, #000, transparent 78%);
  mask-image: radial-gradient(65% 65% at 38% 32%, #000, transparent 78%);
  pointer-events: none;
}
/* Three.js canvas layer (home hero) */
.hero__three {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
}
.hero__three canvas { width: 100%; height: 100%; display: block; }

/* floating ambient orbs (animated by GSAP) */
.hero__orb {
  position: absolute; z-index: 0;
  border-radius: 50%;
  filter: blur(72px);
  pointer-events: none;
}
.hero__orb--1 { width: 460px; height: 460px; top: -14%; right: 4%; background: rgba(76,85,196,.30); }
.hero__orb--2 { width: 340px; height: 340px; bottom: -10%; left: -8%; background: rgba(54,61,160,.26); }
.hero__orb--3 { width: 180px; height: 180px; top: 42%; right: 30%; background: rgba(138,144,255,.14); }
.hero__inner { position: relative; z-index: 1; }
/* text column stays left; the globe owns the right half on desktop */
.hero__inner h1 { max-width: 13ch; }
.hero__lead { max-width: 44ch; }
.hero__stats { max-width: 880px; gap: clamp(1.5rem, 3.5vw, 2.5rem); }
.hero .badge { margin-bottom: 1.75rem; }
.hero h1 { margin-bottom: 1.5rem; }
.hero h1 .line { display: block; overflow: hidden; padding-bottom: 0.05em; }
.hero h1 .line > * { display: inline-block; }
.hero__lead {
  font-size: var(--step-2);
  color: var(--text-muted);
  max-width: 42ch;
  margin-bottom: 2.25rem;
  line-height: 1.5;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.hero__stats {
  display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 5vw, 3.5rem);
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: 2.5rem;
  border-top: 1px solid var(--border);
}
.hero__stats .stat { text-align: left; }
.hero__stats .stat__num { font-size: var(--step-4); }

/* Page hero (interior pages) */
.page-hero {
  padding-top: calc(var(--header-h) + clamp(2.5rem, 7vw, 5rem));
  padding-bottom: clamp(2rem, 5vw, 3.5rem);
  position: relative; overflow: hidden;
}
.page-hero__glow { position: absolute; inset: -30% 0 auto 0; height: 60%; background: var(--grad-glow); pointer-events: none; z-index: 0; }
.page-hero > .container { position: relative; z-index: 1; }
.page-hero h1 { font-size: var(--step-5); margin: 1.25rem 0; max-width: 20ch; }
.page-hero__lead { font-size: var(--step-2); color: var(--text-muted); max-width: 56ch; line-height: 1.5; }

/* ---- Process / steps ---- */
.steps { display: grid; gap: 1.25rem; counter-reset: step; }
.step {
  display: grid; grid-template-columns: auto 1fr; gap: 1.5rem; align-items: start;
  padding: 1.75rem; border: 1px solid var(--border); border-radius: var(--radius-l);
  background: rgba(255,255,255,.02);
  transition: border-color var(--dur), background var(--dur);
}
.step:hover { border-color: var(--border-strong); background: rgba(255,255,255,.04); }
.step__num {
  counter-increment: step;
  font-family: var(--font-display); font-weight: 800; font-size: var(--step-3);
  line-height: 1; min-width: 2.5ch;
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.step__num::before { content: "0" counter(step); }
.step h3 { font-size: var(--step-1); margin-bottom: .5rem; }
.step p { color: var(--text-muted); }

/* ---- Feature / value list ---- */
.feature { display: flex; gap: 1rem; align-items: flex-start; }
.feature__icon { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--radius-s); background: var(--grad-brand-soft); color: var(--accent-2); border: 1px solid var(--border); }
.feature__icon svg { width: 22px; height: 22px; }
.feature h3 { font-size: var(--step-1); margin-bottom: .35rem; }
.feature p { color: var(--text-muted); font-size: var(--step-0); }

/* ---- Split (image + text) ---- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.split--reverse .split__media { order: 2; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } .split--reverse .split__media { order: 0; } }
.split__media {
  aspect-ratio: 4/3; border-radius: var(--radius-l); border: 1px solid var(--border);
  background:
    radial-gradient(70% 70% at 28% 18%, rgba(76,85,196,.32), transparent 62%),
    radial-gradient(65% 65% at 85% 92%, rgba(76,85,196,.14), transparent 60%),
    var(--ink-600);
  position: relative; overflow: hidden;
}

/* ---- Deliverables / check list ----
   li is block-flow (not flex) so <strong> terms stay inline with their
   description instead of splitting into a ragged second column */
.checklist, .prose .checklist { display: grid; gap: .85rem; padding-left: 0; }
.checklist li, .prose .checklist li { list-style: none; position: relative; padding-left: 2.1rem; color: var(--text-muted); }
.checklist li strong { color: var(--text); }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: .12rem; width: 22px; height: 22px; border-radius: 50%;
  background: var(--grad-brand);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.55 17.05 4.5 12l1.4-1.4 3.65 3.6 8.15-8.15 1.4 1.45z'/%3E%3C/svg%3E") center/16px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.55 17.05 4.5 12l1.4-1.4 3.65 3.6 8.15-8.15 1.4 1.45z'/%3E%3C/svg%3E") center/16px no-repeat;
}

/* ---- Answer block (AEO answer-first) — clean tinted card, no side bar ---- */
.answer {
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
  border-radius: var(--radius-l);
  background: var(--grad-brand-soft);
  border: 1px solid var(--border);
}
.answer p {
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--text);
  text-wrap: pretty;
}
.answer p > strong:first-child { color: var(--indigo-bright); font-weight: 700; }
.answer strong { color: var(--text); font-weight: 600; }

/* ---- Post / article cards ---- */
.post-card { display: flex; flex-direction: column; height: 100%; }
.post-card__thumb {
  aspect-ratio: 16/10; border-radius: var(--radius-m); margin-bottom: 1.25rem; overflow: hidden;
  background:
    radial-gradient(75% 75% at 22% 20%, rgba(76,85,196,.4), transparent 62%),
    radial-gradient(70% 70% at 88% 82%, rgba(76,85,196,.16), transparent 60%),
    var(--ink-600);
  border: 1px solid var(--border);
}
.post-card__meta { display: flex; gap: .75rem; align-items: center; font-size: var(--step--1); color: var(--text-faint); margin-bottom: .75rem; }
.post-card h3 { font-size: var(--step-1); margin-bottom: .6rem; }
.post-card p { color: var(--text-muted); font-size: var(--step-0); flex: 1; }
.post-card:hover h3 { color: var(--accent-2); }

/* ---- Case study result metrics ---- */
.results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
@media (max-width: 600px) { .results { grid-template-columns: 1fr; } }
.result { padding: 1.5rem; border: 1px solid var(--border); border-radius: var(--radius-m); background: rgba(255,255,255,.02); }
.result__num { font-family: var(--font-display); font-weight: 800; font-size: var(--step-4); background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.result__label { color: var(--text-muted); font-size: var(--step-0); margin-top: .35rem; }

/* ---- Contact ---- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
.field { display: grid; gap: .5rem; margin-bottom: 1.25rem; }
.field label { font-weight: 600; font-size: var(--step-0); font-family: var(--font-display); }
.field input, .field textarea, .field select {
  width: 100%; padding: .9rem 1.1rem;
  background: rgba(255,255,255,.03); border: 1px solid var(--border);
  border-radius: var(--radius-s); color: var(--text);
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent); background: rgba(255,255,255,.05); outline: none; }
.field textarea { min-height: 140px; resize: vertical; }
.contact-info { display: grid; gap: 1.25rem; }
.contact-info__item { display: flex; gap: 1rem; align-items: flex-start; padding: 1.25rem; border: 1px solid var(--border); border-radius: var(--radius-m); background: rgba(255,255,255,.02); }
.contact-info__item .feature__icon { flex: none; }
.contact-info__item strong { display: block; font-family: var(--font-display); }
.contact-info__item a, .contact-info__item span { color: var(--text-muted); }
.contact-info__item a:hover { color: var(--accent-2); }

/* ---- Team ---- */
.team-card { text-align: center; }
.team-card__avatar {
  width: 96px; height: 96px; border-radius: 50%; margin: 0 auto 1.25rem;
  display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: var(--step-3);
  background: var(--grad-brand); color: #0a0a12;
}
.team-card h3 { font-size: var(--step-1); }
.team-card .role { color: var(--accent-2); font-weight: 600; font-size: var(--step-0); margin-top: .25rem; }
.team-card p { color: var(--text-muted); font-size: var(--step-0); margin-top: .75rem; }
.team-card__socials { display: flex; justify-content: center; gap: .6rem; margin-top: 1rem; }
.team-card__socials a {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border: 1px solid var(--border); border-radius: 50%;
  color: var(--text-muted);
  transition: border-color var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
}
.team-card__socials a:hover { border-color: var(--accent); color: var(--accent-2); transform: translateY(-2px); }
.team-card__socials svg { width: 16px; height: 16px; }

/* ---- Logo/service pill grid (about, home) ---- */
.pill-grid { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ---- Reveal animation base (only hidden when JS is active) ---- */
.js [data-reveal] { opacity: 0; transform: translateY(28px); }
.reveal-ready [data-reveal] { transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
[data-reveal].is-in { opacity: 1; transform: none; }

/* stagger children */
.js [data-reveal-group] > * { opacity: 0; transform: translateY(24px); }
.reveal-ready [data-reveal-group] > * { transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
[data-reveal-group].is-in > * { opacity: 1; transform: none; }

.js .hero [data-hero] { opacity: 0; }

/* headlines + intro elements hidden until the GSAP intro runs (JS restores/animates) */
.js .hero h1, .js .page-hero h1 { opacity: 0; }
.js .page-hero .breadcrumb, .js .page-hero .eyebrow, .js .page-hero .chip,
.js .page-hero__lead, .js .page-hero .btn { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal-group] > *, .hero [data-hero],
  .hero h1, .page-hero h1,
  .page-hero .breadcrumb, .page-hero .eyebrow, .page-hero .chip,
  .page-hero__lead, .page-hero .btn { opacity: 1 !important; transform: none !important; }
}