/* ============================================================
   Deidox.org — Home page sections
   Section-specific layout. Shared chrome/components live in site.css.
   ============================================================ */

/* ---------- 1 · Hero ---------- */
.hero {
  position: relative; min-height: 100svh; display: flex; align-items: flex-end;
  background: var(--ink-950) url("/assets/stills/fbr-hero.jpg") center/cover no-repeat;
  color: #fff; overflow: hidden;
}
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
@media (prefers-reduced-motion: reduce) { .hero__video { display: none; } }
.hero__overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(10,15,20,0.62) 0%, rgba(10,15,20,0.12) 28%, rgba(10,15,20,0.45) 62%, rgba(7,11,15,0.94) 100%),
    radial-gradient(72% 62% at 80% 10%, rgba(12,192,223,0.22), transparent 58%);
}
.hero__in {
  position: relative; z-index: 2; width: 100%;
  max-width: var(--container-wide); margin-inline: auto;
  padding: 0 var(--gutter) clamp(4rem, 9vh, 8rem);
}
.hero h1 {
  font-family: var(--font-display); font-weight: var(--weight-medium);
  font-size: clamp(2.75rem, 6.4vw, 5.5rem); line-height: 1.01; letter-spacing: -0.025em;
  margin: var(--space-6) 0 0; max-width: 17ch; text-wrap: balance;
}
.hero p {
  font-size: clamp(1.125rem, 1.55vw, 1.375rem); line-height: 1.55;
  color: rgba(255,255,255,0.84); margin: var(--space-6) 0 0; max-width: 44ch;
}
.hero__cta { display: flex; gap: var(--space-4); margin-top: var(--space-8); flex-wrap: wrap; }
.hero__scroll {
  position: absolute; left: 50%; bottom: var(--space-5); transform: translateX(-50%); z-index: 2;
  color: rgba(255,255,255,0.45); display: inline-flex;
}
.hero__scroll .material-symbols-sharp { font-size: 30px; animation: hero-bob 2.4s var(--ease-in-out) infinite; }
@keyframes hero-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(7px); } }

/* ---------- 2 · How we serve ---------- */
.serve {
  display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start;
  background: #F7FAFB;
  border-top: 4px solid var(--cyan-400, #0CC0DF);
  border-radius: 4px 4px 12px 12px;
  padding: var(--space-6) var(--space-6) var(--space-7);
}
.serve__icon {
  width: 54px; height: 54px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cyan-400,#0CC0DF); color: var(--ink-950,#0A0F14);
}
.serve__icon .material-symbols-sharp { font-size: 28px; }
.serve h3 { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--text-h3); color: var(--text-strong); margin: var(--space-2) 0 0; }
.serve p { color: var(--text-muted); line-height: var(--leading-relaxed); margin: 0; }

/* ---------- 3 · Feature (Free Burma Rangers) ---------- */
.feature__grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.feature__body h2 { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--text-h1); letter-spacing: var(--tracking-tight); color: var(--text-strong); margin: var(--space-5) 0 0; }
.feature__body p { color: var(--text-muted); line-height: var(--leading-relaxed); margin: var(--space-5) 0 0; }
.feature__body .btn { margin-top: var(--space-8); }
@media (max-width: 900px) { .feature__grid { grid-template-columns: 1fr; } }

/* ---------- 4 · Now in production ---------- */
.prod__body { margin-top: var(--space-5); }
.prod__body .eyebrow { color: var(--accent-text); }
.prod__body h3 { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--text-h3); color: var(--text-strong); margin: var(--space-3) 0 0; }
.prod__body p { color: var(--text-muted); margin: var(--space-2) 0 0; line-height: var(--leading-relaxed); }

/* ---------- 5 · Church hook band ---------- */
.hook {
  position: relative; min-height: 58vh; display: flex; align-items: center;
  background: var(--ink-950) url("/assets/stills/fc-chan-laughing.jpg") center 25%/cover no-repeat;
  color: #fff; overflow: hidden;
}
.hook__overlay { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(7,11,15,0.92) 0%, rgba(7,11,15,0.66) 52%, rgba(7,11,15,0.40) 100%); }
.hook__in { position: relative; z-index: 2; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.hook h2 { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: clamp(1.9rem, 3.5vw, 3.1rem); line-height: 1.1; letter-spacing: var(--tracking-tight); margin: var(--space-5) 0 0; max-width: 20ch; text-wrap: balance; }
.hook p { color: rgba(255,255,255,0.78); font-size: var(--text-body-lg); line-height: var(--leading-relaxed); margin: var(--space-5) 0 0; max-width: 46ch; }
.hook .btn { margin-top: var(--space-8); }

/* ---------- 6 · Miraculous ---------- */
.ep { display: flex; flex-direction: column; gap: var(--space-4); }
.ep__art {
  position: relative; aspect-ratio: 1 / 1; border-radius: var(--radius-md); overflow: hidden; cursor: pointer;
  background: radial-gradient(120% 120% at 30% 20%, #103a4a 0%, #0c2330 55%, #081019 100%);
  display: flex; align-items: center; justify-content: center;
}
.ep__art::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, rgba(12,192,223,0.16) 0 2px, transparent 2px 9px);
  -webkit-mask-image: radial-gradient(60% 40% at 50% 50%, #000 0%, transparent 72%);
  mask-image: radial-gradient(60% 40% at 50% 50%, #000 0%, transparent 72%);
  opacity: 0.7;
}
.ep__num { position: absolute; top: var(--space-4); left: var(--space-4); z-index: 2; font-family: var(--font-mono); font-size: var(--text-eyebrow); letter-spacing: 0.14em; color: rgba(255,255,255,0.7); }
.ep__body { display: flex; flex-direction: column; gap: var(--space-2); }
.ep__body h3 { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--text-h4); color: var(--text-strong); margin: 0; }
.ep__hook { color: var(--text-muted); font-size: var(--text-body-sm); line-height: var(--leading-snug); margin: 0; }
.ep__meta { font-family: var(--font-mono); font-size: var(--text-eyebrow); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.mirac__listen { display: flex; align-items: center; gap: var(--space-5); margin-top: var(--space-12); flex-wrap: wrap; }
.mirac__listen .lbl { font-family: var(--font-mono); font-size: var(--text-eyebrow); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.mirac__listen a { display: inline-flex; align-items: center; gap: 7px; font-size: var(--text-body-sm); font-weight: var(--weight-medium); color: var(--text); }
.mirac__listen a:hover { color: var(--accent-text); }
.mirac__listen .material-symbols-sharp { font-size: 19px; color: var(--accent-text); }

/* Miraculous — series brand block: dark cinematic base, grunge wordmark, dirty blue episode tiles */
.mirac-band { position: relative; color: #fff; overflow: hidden;
  background: radial-gradient(120% 110% at 18% 0%, #0a1330 0%, #070b18 52%, #04060c 100%); }
.mirac-band__tex { position: absolute; inset: 0; z-index: 0;
  background: url("/assets/miraculous/tex-riso.jpg") center / cover; opacity: 0.14; mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(130% 100% at 50% 45%, transparent 30%, #000 100%);
  mask-image: radial-gradient(130% 100% at 50% 45%, transparent 30%, #000 100%); }
.mirac-band > .container { position: relative; z-index: 1; }
.mirac-band__logo { display: block; height: clamp(60px, 8vw, 104px); width: auto; max-width: 100%; margin: var(--space-3) 0 calc(-1 * var(--space-2)); }
.mirac-band__sub { font-family: var(--font-mono); font-size: var(--text-body-sm); letter-spacing: 0.08em; text-transform: uppercase; color: #4d6bff; margin-top: var(--space-4); }
.mirac-band .section__head > p { color: rgba(255,255,255,0.84); }
.mirac-band .eyebrow { color: rgba(255,255,255,0.62); }
.mirac-band .eyebrow--tick::before { background: #0000FF; }
.mirac-band .btn--link { color: #fff; }
.mirac-band .btn--link:hover { color: #4d6bff; }
/* episode thumbnails → dirty electric-blue pixel texture */
.mirac-band .ep__art { background: #0000FF; }
.mirac-band .ep__art::before { background: url("/assets/miraculous/tex-pixel-mid.jpg") center / cover; opacity: 1; -webkit-mask-image: none; mask-image: none; }
.mirac-band .ep__art .play--sm { background: #fff; border-color: #fff; box-shadow: 0 2px 16px rgba(0,0,0,0.35); }
.mirac-band .ep__art .play--sm .material-symbols-sharp { color: #0000FF; }
.mirac-band .ep__num { color: #fff; }
.mirac-band .ep__body h3 { color: #fff; }
.mirac-band .ep__hook { color: rgba(255,255,255,0.66); }
.mirac-band .mirac__listen { border-top: 1px solid rgba(255,255,255,0.14); padding-top: var(--space-8); }
.mirac-band .mirac__listen .lbl { color: rgba(255,255,255,0.6); }
.mirac-band .mirac__listen a { color: #fff; }
.mirac-band .mirac__listen a:hover { color: #4d6bff; }
.mirac-band .mirac__listen .material-symbols-sharp { color: #4d6bff; }

/* ---------- 7 · Training band ---------- */
.train { background: var(--surface-sunken); }
.train__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 4vw, 4.5rem); align-items: center; }
.train__body h2 { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--text-h1); letter-spacing: var(--tracking-tight); color: var(--text-strong); margin: var(--space-5) 0 0; text-wrap: balance; }
.train__body p { color: var(--text-muted); line-height: var(--leading-relaxed); margin: var(--space-5) 0 0; max-width: 44ch; }
.train__body .btn { margin-top: var(--space-8); }
.train__img { aspect-ratio: 4 / 3; border-radius: var(--radius-md); overflow: hidden; }
.train__img img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .train__grid { grid-template-columns: 1fr; } }

/* ---------- 8 · Who's behind Deidox ---------- */
.who__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 4.5rem); align-items: center; }
.who__body h2 { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--text-h1); letter-spacing: var(--tracking-tight); color: var(--text-strong); margin: var(--space-5) 0 0; text-wrap: balance; }
.who__body p { color: var(--text-muted); line-height: var(--leading-relaxed); margin: var(--space-5) 0 0; }
.who__figure { position: relative; }
.who__figure .frame { aspect-ratio: 4 / 5; }
.who__cap { margin-top: var(--space-3); font-family: var(--font-mono); font-size: var(--text-eyebrow); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.who__stats { margin-top: var(--section-y); padding-top: var(--space-12); border-top: 1px solid var(--border); }
@media (max-width: 900px) { .who__grid { grid-template-columns: 1fr; } }

/* ---------- 9 · Testimonials ---------- */
.tgrid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.tfeature { padding-left: var(--space-6); border-left: 2px solid var(--accent); }
.tfeature blockquote { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.22; color: var(--text-strong); margin: 0; text-wrap: pretty; }
.tfeature__who { margin-top: var(--space-6); display: flex; flex-direction: column; gap: 3px; }
.tfeature__name { font-weight: var(--weight-semibold); color: var(--text-strong); }
.tfeature__role { font-family: var(--font-mono); font-size: var(--text-eyebrow); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.tstack { display: flex; flex-direction: column; gap: var(--space-5); }
.tstack .tcard { box-shadow: none; }
@media (max-width: 900px) { .tgrid { grid-template-columns: 1fr; } }

/* ---------- 10 · 7-day journey ---------- */
.journey { text-align: center; }
.journey__in { max-width: var(--container-narrow); margin-inline: auto; }
.journey h2 { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--text-h1); letter-spacing: var(--tracking-tight); color: #fff; margin: var(--space-5) 0 0; }
.journey p { color: rgba(255,255,255,0.74); font-size: var(--text-body-lg); line-height: var(--leading-relaxed); margin: var(--space-5) auto 0; max-width: 40ch; }
.journey__form { display: flex; gap: var(--space-3); max-width: 30rem; margin: var(--space-8) auto 0; }
.field-email {
  flex: 1; height: 54px; padding: 0 var(--space-5); border-radius: var(--radius-sm);
  border: var(--border-width-strong) solid var(--border-strong); background: rgba(255,255,255,0.04);
  color: #fff; font-family: var(--font-sans); font-size: var(--text-body);
}
.field-email::placeholder { color: rgba(255,255,255,0.42); }
.field-email:focus { outline: var(--ring-width) solid var(--cyan-400); outline-offset: 2px; border-color: transparent; }
.journey__note { margin-top: var(--space-5); font-family: var(--font-mono); font-size: var(--text-eyebrow); letter-spacing: 0.06em; color: rgba(255,255,255,0.45); }
@media (max-width: 560px) { .journey__form { flex-direction: column; } }

/* ---------- 11 · Final CTA ---------- */
.finalcta {
  position: relative; text-align: center; color: #fff; overflow: hidden;
  background: var(--ink-950) url("/assets/stills/fbr-tank.jpg") center/cover no-repeat;
}
.finalcta__overlay { position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(7,11,15,0.86), rgba(7,11,15,0.78)),
    radial-gradient(70% 80% at 50% 0%, rgba(12,192,223,0.18), transparent 60%); }
.finalcta__in { position: relative; z-index: 2; max-width: var(--container-narrow); margin-inline: auto; }
.finalcta h2 { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: clamp(2.25rem, 4.5vw, 4rem); line-height: 1.06; letter-spacing: -0.02em; margin: var(--space-5) 0 0; text-wrap: balance; }
.finalcta p { color: rgba(255,255,255,0.78); font-size: var(--text-body-lg); line-height: var(--leading-relaxed); margin: var(--space-6) auto 0; max-width: 44ch; }
.finalcta__cta { display: flex; gap: var(--space-4); justify-content: center; margin-top: var(--space-8); flex-wrap: wrap; }
.trust { display: flex; gap: var(--space-6); justify-content: center; flex-wrap: wrap; margin-top: var(--space-10); }
.trust span { font-family: var(--font-mono); font-size: var(--text-eyebrow); letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.6); display: inline-flex; align-items: center; gap: 6px; }
.trust .material-symbols-sharp { font-family: 'Material Symbols Sharp' !important; font-size: 16px; color: var(--cyan-400); }
@media (prefers-reduced-motion: reduce) { .hero__scroll .material-symbols-sharp { animation: none; } }

/* ---------- 12 · Instagram strip ---------- */
.ig__follow { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.ig__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-3); margin-top: var(--space-8); }
.ig__tile { position: relative; aspect-ratio: 1 / 1; border-radius: var(--radius-sm); overflow: hidden; display: block; }
.ig__tile img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-base) var(--ease-out); }
.ig__tile:hover img { transform: scale(1.06); }
.ig__tile::after { content: ""; position: absolute; inset: 0; background: rgba(10,15,20,0); transition: background var(--dur-fast); }
.ig__tile:hover::after { background: rgba(10,15,20,0.22); }
@media (max-width: 760px) { .ig__grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- 12 · Follow the journey (head) ---------- */
.follow__head { text-align: center; max-width: var(--container-narrow); margin: 0 auto var(--space-12); }
.follow__head h2 { color: #fff; margin-top: var(--space-5); }
.follow__form { max-width: 32rem; margin-left: auto; margin-right: auto; }
.follow__social { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; margin-top: var(--space-5); }
.band-dark .btn--secondary { color: #fff; border-color: rgba(255,255,255,0.22); background: transparent; }
.band-dark .btn--secondary:hover { border-color: var(--cyan-400); color: var(--cyan-400); background: rgba(255,255,255,0.04); }

/* divider between email signup and social follow */
.follow__divider { display: flex; align-items: center; gap: var(--space-4); max-width: 24rem; margin: var(--space-8) auto 0; }
.follow__divider::before, .follow__divider::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,0.14); }
.follow__divider span { font-family: var(--font-mono); font-size: var(--text-eyebrow); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.42); white-space: nowrap; }

/* ============ spacing pass: hook band + follow section ============ */
.hook__in{padding-block:clamp(5rem,10vh,8rem)}
.follow__head{text-align:center}
.follow__head .ml-panel{margin-top:var(--space-8)}
.follow__divider{margin:var(--space-10) auto var(--space-6)}
.follow__social{justify-content:center}

.prod__tag{font-family:var(--font-mono);font-size:.62em;font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted,rgba(255,255,255,.5));font-style:normal}