/* ══════════════════════════════════════════════════════════════════
   homepage-v2.css — aligned to existing HB design system
   Linked EXCLUSIVELY from homepage-v2.html.
   Loaded after css/style.css — inherits all tokens, fonts, buttons,
   navbar, and base typography. This file adds ONLY layout and
   component styles unique to homepage-v2.
   Never link from index.html or any other production page.
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. BASE OVERRIDES ──────────────────────────────────────────── */
section             { padding: 5.5rem 0; }
.bg                 { background: var(--bg); }

/* ── 2. TYPOGRAPHIC HELPERS ─────────────────────────────────────── */
.eyebrow {
  display: inline-block;
  font-size: .75rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--primary); margin-bottom: .75rem;
}
.sec-intro {
  color: var(--text-light); font-size: 1.05rem;
  max-width: 520px; line-height: 1.75; margin-top: .25rem;
}
.lnk {
  color: var(--primary); font-size: .95rem; font-weight: 600;
  display: inline-flex; align-items: center; gap: .3rem;
  transition: var(--t);
}
.lnk:hover { gap: .6rem; }

/* ── 3. HERO ────────────────────────────────────────────────────── */
/* RTL auto-placement: hero-content (first in DOM) → right col, hero-image (second) → left col */
/* grid-template-columns: right-col(7fr) left-col(5fr) — because in RTL col-1 is rightmost */
.hero               { padding: 5rem 0 4rem; }
.hero-inner         { display: grid; grid-template-columns: 7fr 5fr; gap: 0 4rem; align-items: center; }
.hero-image         { align-self: stretch; position: relative; z-index: 1; min-height: 360px; min-width: 0; }
.hero-image img     { width: 100%; height: 100%; object-fit: cover; object-position: 20% center; border-radius: 18px; box-shadow: 0 16px 48px rgba(0,0,0,.12); display: block; }
.hero-content       { max-width: none; padding: 2rem 0; position: relative; z-index: 1; min-width: 0; }
.hero h1            { font-weight: 600; }
.hero-desc strong   { color: var(--dark); font-weight: 800; }
.hero-stats         { padding-top: 1.75rem; border-top: 1px solid rgba(244,114,43,.18); }

/* ── 4. TRUST BAR ───────────────────────────────────────────────── */
.trust-bar          { background: var(--bg); padding: 1.75rem 0; border-bottom: 1px solid var(--gray-light); }
.trust-items        { display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; gap: 1.25rem; }
.titem              { display: flex; align-items: center; gap: .85rem; color: var(--text); }
.ticon              { font-size: 1.4rem; flex-shrink: 0; }
.titem strong       { display: block; font-size: .97rem; font-weight: 700; }
.titem span         { font-size: .73rem; color: var(--text-light); }
.tdiv               { width: 1px; height: 36px; background: var(--gray-light); }

/* ── 5. SITUATIONS ──────────────────────────────────────────────── */
.sit-list {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0; margin-top: 3rem;
  border-top: 1px solid var(--gray-light);
}
.sit-item {
  padding: 1.75rem 0; border-bottom: 1px solid var(--gray-light);
  display: flex; align-items: flex-start; gap: 1rem;
}
.sit-item:nth-child(odd) { padding-left: 2.5rem; border-left: 1px solid var(--gray-light); }
.sit-dot            { width: 8px; height: 8px; background: var(--primary); border-radius: 50%; flex-shrink: 0; margin-top: .7rem; }
.sit-item-title     { font-size: 1.05rem; font-weight: 700; color: var(--dark); line-height: 1.3; margin-bottom: .3rem; }
.sit-item-desc      { font-size: .87rem; color: var(--text-light); line-height: 1.65; }

/* ── 6. PRINCIPLES — editorial layout ───────────────────────────── */
.prin-editorial     { max-width: 780px; margin: 3.5rem auto 0; }
.prin-ed-item {
  padding: 2.5rem 0; border-bottom: 1px solid var(--gray-light);
  display: grid; grid-template-columns: auto 1fr; gap: 2rem; align-items: start;
}
.prin-ed-item:first-child { border-top: 1px solid var(--gray-light); }
.prin-ed-num        { font-size: 3.5rem; font-weight: 900; line-height: 1; color: var(--gray-mid); flex-shrink: 0; width: 60px; text-align: center; font-variant-numeric: tabular-nums; }
.prin-ed-name       { font-size: 1.2rem; font-weight: 800; color: var(--dark); margin-bottom: .6rem; }
.prin-ed-text       { font-size: .95rem; color: var(--text); line-height: 1.85; }

/* ── 7. EMOTIONAL INTERLUDE ─────────────────────────────────────── */
.interlude {
  background: var(--dark); padding: 6rem 0;
  text-align: center; position: relative; overflow: hidden;
}
.interlude::before {
  content: ''; position: absolute;
  top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(244,114,43,.07) 0%, transparent 70%);
  pointer-events: none;
}
.interlude-inner    { position: relative; z-index: 1; }
.interlude-text     { font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 800; line-height: 1.35; color: #fff; max-width: 680px; margin: 0 auto; }
.interlude-text em  { display: block; color: rgba(255,255,255,.45); font-style: normal; font-weight: 400; font-size: clamp(.95rem, 1.5vw, 1.15rem); margin-top: 1.25rem; line-height: 1.7; }

/* ── 8. HOW IT WORKS ────────────────────────────────────────────── */
.steps-wrap {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 0; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm);
  margin-top: 3rem;
}
.step-card          { padding: 2.25rem 1.75rem; background: var(--white); border-left: 1px solid var(--gray-light); transition: var(--t); }
.step-card:last-child { border-left: none; }
.step-card:hover    { background: var(--bg); }
.step-n             { font-size: 2.5rem; font-weight: 900; color: var(--gray-mid); line-height: 1; margin-bottom: 1rem; font-variant-numeric: tabular-nums; }
.step-card h3       { font-size: 1rem; margin-bottom: .4rem; font-weight: 700; }
.step-card p        { font-size: .85rem; color: var(--text-light); line-height: 1.7; }

/* ── 9. VIDEOS — "Proof Moment" ─────────────────────────────────── */
.videos-featured    { padding: 5.5rem 0; background: var(--dark); }
.videos-featured .eyebrow   { color: rgba(255,255,255,.5); }
.videos-featured h2         { color: #fff; }
.videos-featured .sec-intro { color: rgba(255,255,255,.5); }

.vf-featured {
  position: relative; aspect-ratio: 16/9;
  border-radius: var(--r-lg); overflow: hidden;
  margin-top: 2.5rem; box-shadow: var(--shadow-lg);
  background: #000;
}
.vf-featured video  { width: 100%; height: 100%; display: block; object-fit: cover; }
.vf-featured .vf-play-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(26,26,26,.35); cursor: pointer; transition: background var(--t);
}
.vf-featured .vf-play-overlay:hover { background: rgba(26,26,26,.18); }
.vf-play-btn {
  width: 72px; height: 72px; background: var(--primary); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 24px rgba(244,114,43,.55); transition: transform var(--t), box-shadow var(--t);
}
.vf-play-btn:hover  { transform: scale(1.08); box-shadow: 0 6px 32px rgba(244,114,43,.65); }
.vf-play-btn svg    { width: 28px; height: 28px; fill: #fff; margin-right: -4px; }
.vf-caption         { margin-top: 1rem; font-size: .88rem; color: rgba(255,255,255,.5); text-align: center; }

.vf-secondary       { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; margin-top: 2rem; }
.vf-item {
  position: relative; aspect-ratio: 16/9;
  border-radius: var(--r-md); overflow: hidden;
  background: #000; box-shadow: var(--shadow-sm);
}
.vf-item video      { width: 100%; height: 100%; object-fit: cover; display: block; }
.vf-item iframe     { width: 100%; height: 100%; display: block; border: none; }
.vf-yt-link {
  display: block; margin-top: 1.75rem; text-align: center;
  font-size: .88rem; color: rgba(255,255,255,.45);
}
.vf-yt-link a       { color: rgba(255,255,255,.65); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; transition: color var(--t); }
.vf-yt-link a:hover { color: #fff; }

/* ── 10. MANIFESTO ──────────────────────────────────────────────── */
.manifesto          { margin-top: 3.5rem; }
.manifesto-item {
  padding: 2.5rem 0; border-bottom: 1px solid var(--gray-light);
  display: grid; grid-template-columns: 1fr auto; gap: 3rem; align-items: center;
  transition: var(--t);
}
.manifesto-item:first-child { border-top: 1px solid var(--gray-light); }
.manifesto-item:hover .manifesto-stmt { color: var(--primary); }
.manifesto-stmt {
  font-size: clamp(1.1rem, 2.2vw, 1.45rem); font-weight: 800;
  line-height: 1.25; color: var(--dark); margin-bottom: .6rem;
  transition: color var(--t);
}
.manifesto-body p   { font-size: .9rem; color: var(--text-light); line-height: 1.7; max-width: 640px; }
.manifesto-icon     { font-size: 1.75rem; flex-shrink: 0; opacity: .65; }

/* ── 11. TEAM ───────────────────────────────────────────────────── */
.team-leads         { display: grid; grid-template-columns: repeat(2,1fr); gap: 2rem; margin-bottom: 2.5rem; }
.team-rest          { display: grid; grid-template-columns: repeat(5,1fr); gap: 1.25rem; }
.tlead              { background: var(--white); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.tlead img          { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: center; }
.tlead-info         { padding: 1.1rem 1.4rem; }
.tlead-role         { font-size: .72rem; font-weight: 700; color: var(--primary); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .4rem; }
.tlead-info h3      { font-size: 1.2rem; margin-bottom: .35rem; font-weight: 800; }
.tlead-info p       { font-size: .9rem; color: var(--text-light); line-height: 1.6; }
.tlead-philosophy {
  margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--gray-light);
  font-size: .83rem; color: var(--text-light); line-height: 1.65; font-style: italic;
}
.tlead-team-role {
  margin-top: .55rem; padding-top: .55rem; border-top: 1px solid var(--gray-light);
  font-size: .85rem; color: var(--text-light); line-height: 1.55;
}
.tmini              { text-align: center; }
.tmini img          { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: center 15%; border-radius: 50%; margin-bottom: .65rem; border: 3px solid var(--bg); }
.tmini h4           { font-size: .88rem; font-weight: 700; color: var(--dark); }
.tmini span         { font-size: .73rem; color: var(--text-light); }

/* ── 12. TESTIMONIALS ───────────────────────────────────────────── */
.tes-grid           { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.75rem; }
.tcard              { background: var(--white); border: 1.5px solid var(--gray-light); border-radius: var(--r-lg); padding: 2.25rem; position: relative; transition: var(--t); }
.tcard:hover        { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--primary); }
.tcard-quote        { font-size: 4rem; color: var(--primary-light); font-family: Georgia, serif; line-height: .8; margin-bottom: .75rem; display: block; font-weight: 900; }
blockquote.tq       { font-size: .97rem; line-height: 1.9; color: var(--text); margin: 0 0 1.5rem; padding: 0; }
.tauthor            { display: flex; align-items: center; gap: .85rem; padding-top: 1.1rem; border-top: 1.5px solid var(--gray-light); }
.tavatar            { width: 42px; height: 42px; background: var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 1rem; flex-shrink: 0; }
.tauthor cite       { font-style: normal; font-weight: 700; font-size: .88rem; }

/* ── 13. SUCCESS STORY ──────────────────────────────────────────── */
.story-pullquote {
  font-size: clamp(1.5rem, 2.8vw, 2rem); font-weight: 800;
  color: var(--dark); line-height: 1.4;
  text-align: center; max-width: 760px; margin: 0 auto 4rem;
  position: relative; padding: 2rem 0;
}
.story-pullquote::before,
.story-pullquote::after { content: ''; display: block; width: 44px; height: 3px; background: var(--primary); border-radius: 2px; margin: 1.25rem auto; }
.story-grid         { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
.story-phases       { display: flex; flex-direction: column; gap: 1.5rem; margin: 1.5rem 0 2rem; }
.sphase             { display: flex; gap: 1.1rem; align-items: flex-start; }
.sphase-dot         { width: 36px; height: 36px; background: var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: .8rem; font-weight: 700; flex-shrink: 0; margin-top: .1rem; }
.sphase h3          { font-size: .85rem; font-weight: 700; color: var(--primary); margin-bottom: .25rem; text-transform: uppercase; letter-spacing: .05em; }
.sphase p           { font-size: .95rem; color: var(--text); line-height: 1.75; }
.story-img img      { width: 100%; border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
.story-caption      { background: var(--primary); color: #fff; border-radius: var(--r-md); padding: 1.25rem 1.75rem; margin-top: 1.25rem; text-align: center; }
.story-caption .n   { font-size: 2rem; font-weight: 900; display: block; line-height: 1; }
.story-caption .l   { font-size: .78rem; opacity: .85; margin-top: .2rem; }

/* ── 14. PRICING ────────────────────────────────────────────────── */
.price-wrap         { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; max-width: 900px; margin: 0 auto; }
.price-left h2      { font-size: clamp(1.8rem, 3vw, 2.4rem); margin-bottom: 1rem; }
.price-left p       { color: var(--text-light); line-height: 1.8; margin-bottom: 1.25rem; }
.price-box          { background: var(--white); border: 2px solid var(--primary); border-radius: var(--r-lg); padding: 2.5rem; box-shadow: var(--shadow-md); }
.price-num          { font-size: 3.5rem; font-weight: 900; color: var(--primary); line-height: 1; margin: 1rem 0; }
.price-num span     { font-size: 1rem; font-weight: 500; color: var(--text-light); }
.price-list         { display: flex; flex-direction: column; gap: .6rem; margin: 1.5rem 0; }
.pitem              { display: flex; align-items: center; gap: .6rem; font-size: .92rem; }
.pitem::before      { content: '✓'; color: #3D6B50; font-weight: 700; flex-shrink: 0; }
.price-note         { font-size: .78rem; color: var(--text-light); margin-top: 1rem; line-height: 1.6; }

/* ── 15. PERSONAL CLOSE ─────────────────────────────────────────── */
.personal-close     { background: var(--bg); padding: 7rem 0; border-top: 1px solid var(--gray-light); }
.personal-grid      { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; max-width: 960px; margin: 0 auto; }
.personal-text h2   { font-size: clamp(1.6rem, 2.8vw, 2.2rem); margin-bottom: 1.75rem; line-height: 1.25; }
.personal-body      { font-size: 1rem; line-height: 2; color: var(--text); }
.personal-body p    { margin-bottom: 1.1rem; }
.personal-sig       { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--gray-light); }
.personal-sig-name  { font-size: 1.15rem; font-weight: 800; color: var(--dark); }
.personal-sig-role  { font-size: .78rem; color: var(--text-light); margin-top: .2rem; }
.personal-area-note { font-size: .85rem; color: var(--text-light); margin-top: 1.5rem; line-height: 1.6; }
.personal-ctas      { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.25rem; }
.personal-photo img { width: 100%; border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }

/* ── 16. FOOTER (v2) ────────────────────────────────────────────── */
.foot-v2            { background: var(--dark); color: rgba(255,255,255,.45); padding: 2.25rem 0; font-size: .82rem; }
.foot-v2 a          { color: rgba(255,255,255,.45); }
.foot-v2 a:hover    { color: #fff; }
.foot-inner         { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }
.foot-links         { display: flex; gap: 1.25rem; flex-wrap: wrap; }

/* ── 17. WHATSAPP FLOAT ─────────────────────────────────────────── */
.wafloat            { position: fixed; left: 1.5rem; bottom: 4.5rem; z-index: 899; }
.wafloat a          { display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; background: #25D366; border-radius: 50%; box-shadow: 0 4px 16px rgba(37,211,102,.45); transition: var(--t); }
.wafloat a:hover    { transform: scale(1.08); }
.wafloat svg        { width: 27px; height: 27px; fill: #fff; }

/* ── 18. RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .team-rest        { grid-template-columns: repeat(3,1fr); }
}

/* ── Tablet: dedicated layout, not a compressed desktop ─────────── */
@media (max-width: 1024px) {
  .hero               { padding: 4.5rem 0 3.5rem; }
  .hero-inner         { grid-template-columns: 1fr 1fr; gap: 0 2.5rem; }
  .hero-image         { min-height: 320px; }
  .hero-image img     { border-radius: 14px; }
  .hero-content       { padding: 1.5rem 0; }
}

@media (max-width: 768px) {
  .sit-list         { grid-template-columns: 1fr; }
  .sit-item:nth-child(odd) { padding-left: 0; border-left: none; }
  .tes-grid         { grid-template-columns: 1fr; }
  .story-grid, .price-wrap, .personal-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .team-leads       { grid-template-columns: 1fr; }
  .team-rest        { grid-template-columns: repeat(3,1fr); }
  .steps-wrap       { grid-template-columns: 1fr; box-shadow: none; }
  .step-card        { border-left: none; border-bottom: 1px solid var(--gray-light); }
  .step-card:last-child { border-bottom: none; }
  .manifesto-item   { grid-template-columns: 1fr; gap: 0; }
  .manifesto-icon   { display: none; }
  /* Hero mobile — intentional single-column design */
  .hero             { padding: 2.5rem 0 3rem; }
  .hero-inner       { grid-template-columns: 1fr; gap: 1.75rem 0; }
  .hero-image       { order: -1; align-self: auto; min-height: unset; }
  .hero-image img   { height: 230px; border-radius: 14px; object-position: 20% 35%; box-shadow: 0 8px 24px rgba(0,0,0,.1); }
  .hero-content     { padding: 0; max-width: none; }
  .hero-badge       { display: none; }
  .hero-stats       { gap: 1.5rem; }
  .tdiv             { display: none; }
  .trust-items      { flex-direction: column; align-items: flex-start; padding: 0 1rem; }
  .prin-ed-item     { grid-template-columns: 1fr; gap: .5rem; }
  .prin-ed-num      { font-size: 2rem; text-align: right; width: auto; }
  .vf-secondary     { grid-template-columns: repeat(2,1fr); }
  .interlude        { padding: 4rem 0; }
  .videos-featured  { padding: 3.5rem 0; }
}

@media (max-width: 480px) {
  section           { padding: 3.5rem 0; }
  .vf-secondary     { grid-template-columns: 1fr; }
  .hero-actions     { flex-direction: column; }
  .personal-ctas    { flex-direction: column; }
}

/* ── [NEW] Single-video section ─────────────────────────────────── */
.sv-video {
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: #000;
  margin-top: 2.5rem;
}

.sv-video iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: none;
}