/* ============================================================
   AllCoaching — shared stylesheet (used by all pages)
   ============================================================ */
:root{
  --primary:#2563EB; --primary-700:#1D4ED8; --primary-50:#EFF6FF;
  --ink:#0F172A; --muted:#64748B; --border:#E2E8F0;
  --bg:#FFFFFF; --bg-soft:#F8FAFC;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{ -webkit-tap-highlight-color:transparent; }
html,body{ font-family:'Inter',system-ui,sans-serif; color:var(--ink); background:var(--bg); overflow-x:hidden; }
.font-display{ font-family:'Plus Jakarta Sans',Inter,sans-serif; letter-spacing:-0.022em; }

/* Typography */
.h-display { font-size: clamp(2.5rem, 5vw, 4.75rem); line-height:1.04; font-weight:800; letter-spacing:-0.03em; }
.h1        { font-size: clamp(2rem, 4vw, 3.25rem);  line-height:1.08; font-weight:800; letter-spacing:-0.025em; }
.h2        { font-size: clamp(1.5rem, 2.2vw, 1.875rem); line-height:1.2;  font-weight:700; letter-spacing:-0.015em; }
.eyebrow   { font-size:.75rem; letter-spacing:.22em; text-transform:uppercase; font-weight:700; color:var(--primary); }
.lede      { font-size: clamp(1rem, 1.2vw, 1.125rem); line-height:1.65; color:var(--muted); }

.prose p{ color:#334155; font-size:16px; line-height:1.75; }
.prose h2{ font-family:'Plus Jakarta Sans',Inter,sans-serif; font-size:1.5rem; font-weight:700; color:#0F172A; margin-top:2rem; margin-bottom:.75rem; letter-spacing:-.01em; }
.prose h3{ font-family:'Plus Jakarta Sans',Inter,sans-serif; font-size:1.15rem; font-weight:700; color:#0F172A; margin-top:1.5rem; margin-bottom:.5rem; }
.prose ul{ list-style:disc; padding-left:1.25rem; color:#334155; }
.prose ul li{ margin:.35rem 0; }
.prose a{ color:var(--primary); text-decoration:underline; }
.prose strong{ color:#0F172A; }

/* ===== PURE LIQUID GLASS BUTTONS ===== */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-weight:600; font-size:.95rem; padding:.8rem 1.25rem; border-radius:14px;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
  cursor:pointer; white-space:nowrap; border:1px solid rgba(255,255,255,.5);
  isolation:isolate; overflow:hidden;
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  will-change: transform;
}
/* Top gloss — the hallmark of liquid glass */
.btn::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:1;
  background:
    linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 45%),
    radial-gradient(140% 60% at 50% -10%, rgba(255,255,255,.5), transparent 55%);
  mix-blend-mode:overlay; opacity:.9;
}
/* Moving specular sheen on hover — that "wet" liquid feel */
.btn::after{
  content:""; position:absolute; top:0; left:-60%; width:45%; height:100%; pointer-events:none; z-index:2;
  background:linear-gradient(100deg, transparent 0%, rgba(255,255,255,.45) 50%, transparent 100%);
  transform:skewX(-18deg); opacity:0; transition: transform .7s var(--ease), opacity .35s var(--ease);
}
.btn:hover::after{ opacity:1; transform:skewX(-18deg) translateX(340%); }
.btn > *{ position:relative; z-index:3; }
.btn:focus-visible{ outline:3px solid #BFDBFE; outline-offset:2px; }
.btn-lg{ padding:1rem 1.5rem; font-size:1rem; border-radius:16px; }

/* Primary — tinted blue liquid glass */
.btn-primary{
  background:
    linear-gradient(180deg, rgba(96,165,250,.75) 0%, rgba(37,99,235,.85) 100%),
    rgba(37,99,235,.2);
  color:#fff; border-color:rgba(255,255,255,.35);
  box-shadow:
    0 1px 0 rgba(255,255,255,.55) inset,
    0 -1px 0 rgba(255,255,255,.15) inset,
    0 0 0 1px rgba(37,99,235,.25),
    0 2px 6px rgba(15,23,42,.08),
    0 12px 30px -10px rgba(37,99,235,.55);
  text-shadow:0 1px 0 rgba(0,0,0,.08);
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.65) inset,
    0 -1px 0 rgba(255,255,255,.2) inset,
    0 0 0 1px rgba(37,99,235,.3),
    0 4px 10px rgba(15,23,42,.12),
    0 22px 44px -12px rgba(37,99,235,.7);
}
.btn-primary:active{ transform:translateY(0) scale(.985); }

/* Secondary — clear liquid glass, content visible through */
.btn-secondary{
  background:
    linear-gradient(180deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,.35) 100%),
    rgba(255,255,255,.25);
  color:var(--ink); border-color:rgba(255,255,255,.6);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 -1px 0 rgba(255,255,255,.4) inset,
    0 0 0 1px rgba(15,23,42,.06),
    0 2px 6px rgba(15,23,42,.06),
    0 12px 28px -14px rgba(15,23,42,.22);
}
.btn-secondary:hover{
  transform:translateY(-2px); border-color:rgba(37,99,235,.35);
  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 -1px 0 rgba(255,255,255,.5) inset,
    0 0 0 1px rgba(37,99,235,.15),
    0 4px 10px rgba(15,23,42,.08),
    0 18px 36px -14px rgba(37,99,235,.3);
}

/* Ghost — ultra-clear glass chip */
.btn-ghost{
  background:linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,.18));
  color:var(--ink); border-color:rgba(255,255,255,.5);
  box-shadow:
    0 1px 0 rgba(255,255,255,.8) inset,
    0 0 0 1px rgba(15,23,42,.04),
    0 6px 16px -10px rgba(15,23,42,.18);
}
.btn-ghost:hover{
  color:var(--primary);
  background:linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.35));
  border-color:rgba(37,99,235,.25);
  transform:translateY(-1px);
}

/* Dark — smoked liquid glass */
.btn-dark{
  background:
    linear-gradient(180deg, rgba(51,65,85,.75) 0%, rgba(2,6,23,.85) 100%),
    rgba(15,23,42,.25);
  color:#fff; border-color:rgba(255,255,255,.18);
  box-shadow:
    0 1px 0 rgba(255,255,255,.22) inset,
    0 -1px 0 rgba(255,255,255,.05) inset,
    0 0 0 1px rgba(0,0,0,.3),
    0 2px 6px rgba(0,0,0,.2),
    0 12px 30px -12px rgba(0,0,0,.55);
}
.btn-dark:hover{
  transform:translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.28) inset,
    0 -1px 0 rgba(255,255,255,.08) inset,
    0 0 0 1px rgba(0,0,0,.35),
    0 4px 10px rgba(0,0,0,.25),
    0 20px 40px -12px rgba(0,0,0,.65);
}

/* Cards */
.card{ background:#fff; border:1px solid var(--border); border-radius:20px; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
.card:hover{ transform:translateY(-3px); box-shadow: 0 2px 4px rgba(15,23,42,.06), 0 24px 48px -16px rgba(15,23,42,.18); border-color:#DBE3EC; }
.chip{ display:inline-flex; align-items:center; gap:.4rem; font-size:.78rem; font-weight:600; padding:.35rem .7rem; border-radius:999px; background:#EFF6FF; color:#1D4ED8; border:1px solid #DBEAFE; }

.bg-soft{ background:var(--bg-soft); }
.bg-mesh{
  background:
    radial-gradient(60% 45% at 15% 0%, rgba(37,99,235,0.10), transparent 60%),
    radial-gradient(50% 35% at 85% 0%, rgba(46,158,74,0.08), transparent 60%),
    radial-gradient(35% 35% at 50% 100%, rgba(244,184,26,0.06), transparent 60%),
    #fff;
}

.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

.float-y{ animation:floatY 6s ease-in-out infinite; }
@keyframes floatY{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

.pulse-dot{ animation:pulse 2s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.4} }

.ping-ring{ animation:ping 2.4s cubic-bezier(0,0,.2,1) infinite; }
@keyframes ping{ 75%,100%{ transform:scale(2); opacity:0 } }

details[open] summary .chev{ transform:rotate(180deg); }
.chev{ transition:transform .2s var(--ease); }

.accent-blue  { color:#2563EB; }
.accent-green { color:#2E9E4A; }
.accent-red   { color:#E63935; }

.grad-text{
  background:linear-gradient(90deg,#2563EB 0%, #2E9E4A 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ===== Glassmorphism Header — frosted liquid glass, soft black outer shadow ===== */
.nav-shell{
  position:relative;
  /* Glassmorphism: translucent white tint lets blurred content show through */
  background:
    linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.30) 50%, rgba(255,255,255,.45) 100%),
    rgba(255,255,255,.22);
  backdrop-filter: blur(34px) saturate(2) contrast(1.05);
  -webkit-backdrop-filter: blur(34px) saturate(2) contrast(1.05);
  border:1px solid rgba(255,255,255,.55);
  border-radius:22px;
  /* Soft light-black layered outer shadow */
  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 -1px 0 rgba(255,255,255,.40) inset,
    0 0 0 1px rgba(15,23,42,.06),
    0 2px 6px rgba(15,23,42,.08),
    0 10px 24px -8px rgba(15,23,42,.18),
    0 24px 48px -16px rgba(15,23,42,.22);
  isolation:isolate;
}
/* Subtle white glass rim */
.nav-shell::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.25) 50%, rgba(255,255,255,.6));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity:.9;
}
/* Liquid top gloss sheen */
.nav-shell::after{
  content:""; position:absolute; inset:1px; border-radius:inherit; pointer-events:none; z-index:-1;
  background:
    linear-gradient(180deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 48%),
    radial-gradient(160% 70% at 50% -20%, rgba(255,255,255,.65), transparent 55%);
  mix-blend-mode:overlay; opacity:.95;
}
/* Light-black halo behind the glass — clean floating feel */
.nav-shell-halo{
  position:absolute; inset:-10px -6px -14px -6px; border-radius:28px; pointer-events:none; z-index:-1;
  background: radial-gradient(60% 100% at 50% 50%, rgba(15,23,42,.12), transparent 70%);
  filter: blur(14px);
}
@supports not (backdrop-filter: blur(1px)){
  .nav-shell{ background:rgba(255,255,255,.92); }
}

/* Mobile header — compact & aesthetic (≤ 640px) */
@media (max-width:640px){
  .nav-shell{ padding:6px 10px !important; border-radius:18px; }
  .nav-shell-halo{ inset:-6px -4px -10px -4px; }
  .nav-logo{ height:30px !important; }

  /* Compact CTA pill: smaller padding, rounded-full, subtle font */
  .nav-shell .btn{
    padding:.5rem .9rem !important;
    font-size:.8rem;
    border-radius:999px;
    min-height:36px;
    gap:.35rem;
    letter-spacing:.005em;
  }

  /* Hide leading icon inside nav CTA on mobile — text-only is cleaner */
  .nav-shell .btn svg{ display:none; }
}

/* Tablet portrait (641-767px) — slightly compact */
@media (min-width:641px) and (max-width:767px){
  .nav-shell .btn{ padding:.6rem 1rem; font-size:.875rem; }
}

/* Social */
.soc{ display:inline-grid; place-items:center; width:40px; height:40px; border-radius:10px; background:#F1F5F9; color:#475569; transition: all .2s var(--ease); border:1px solid transparent; }
.soc:hover{ transform:translateY(-2px); box-shadow:0 8px 20px -8px rgba(15,23,42,.25); }
.soc-whatsapp:hover{ background:#25D366; color:#fff; }
.soc-youtube:hover{ background:#FF0000; color:#fff; }
.soc-telegram:hover{ background:#229ED9; color:#fff; }
.soc-instagram:hover{ background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF,#515BD4); color:#fff; }
.soc-facebook:hover{ background:#1877F2; color:#fff; }
.soc-x:hover{ background:#000; color:#fff; }

/* Floating WA */
.fab-wa{ position:fixed; right:20px; bottom:20px; z-index:60;
  display:inline-flex; align-items:center; gap:.6rem; background:#25D366; color:#fff; padding:.85rem 1.1rem;
  border-radius:999px; box-shadow:0 10px 30px -6px rgba(37,211,102,.55), 0 4px 10px rgba(0,0,0,.1);
  font-weight:600; font-size:.9rem; transition: all .25s var(--ease); }
.fab-wa:hover{ transform:translateY(-3px) scale(1.02); box-shadow:0 18px 45px -10px rgba(37,211,102,.65); }
.fab-wa .pulse-ring{ position:absolute; inset:0; border-radius:inherit; animation:waPulse 2s infinite; }
@keyframes waPulse{ 0%{box-shadow:0 0 0 0 rgba(37,211,102,.55)} 70%{box-shadow:0 0 0 18px rgba(37,211,102,0)} 100%{box-shadow:0 0 0 0 rgba(37,211,102,0)} }
@media (max-width:640px){ .fab-wa span.label{ display:none } }

/* ===== INFINITE MARQUEE (shared by testimonials + product showcase) ===== */
.marq-rail{
  position:relative; width:100vw; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw;
  overflow:hidden; padding:8px 0;
  mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
}
.marq-track{
  display:flex; gap:22px; width:max-content;
  will-change: transform;
}
.marq-track.anim-testimonials{ animation: marq-scroll 70s linear infinite; }
/* Product showcase scrolls in the OPPOSITE direction */
.marq-track.anim-product     { animation: marq-scroll 60s linear infinite reverse; }
/* Click-to-pause — hover no longer pauses */
.marq-rail{ cursor: pointer; }
.marq-rail.is-paused .marq-track{ animation-play-state: paused; }
@keyframes marq-scroll{
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-50%,0,0); }
}

/* Testimonial card */
.t-card{
  flex:0 0 340px; background:#fff; border:1px solid var(--border); border-radius:20px; padding:22px;
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 14px 30px -20px rgba(15,23,42,.18);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.t-card:hover{ transform:translateY(-4px); box-shadow: 0 2px 4px rgba(15,23,42,.06), 0 24px 48px -16px rgba(15,23,42,.22); }
@media (max-width:640px){ .t-card{ flex:0 0 280px; } }

/* Product-showcase card (used inside marquee) */
.ps-card{
  flex: 0 0 min(880px, 90vw);
  background:#fff; border:1px solid var(--border); border-radius:28px;
  padding:24px; box-shadow: 0 40px 80px -40px rgba(15,23,42,.25);
}
@media (max-width:768px){ .ps-card{ padding:18px; } }

/* Phone mock shared */
.phone{ position:relative; width:272px; height:560px; border-radius:44px; background:#0f172a; padding:12px; box-shadow:0 30px 50px -20px rgba(0,0,0,.35); }
.phone .screen{ height:100%; border-radius:34px; background:#fff; overflow:hidden; position:relative; }
.phone .notch{ position:absolute; top:8px; left:50%; transform:translateX(-50%); width:96px; height:20px; background:#0f172a; border-radius:999px; z-index:10; }

/* Revenue Calculator */
input[type="range"].slider { -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:999px; background:#E2E8F0; outline:none; }
input[type="range"].slider::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:24px; height:24px; border-radius:999px; background:#fff; border:3px solid var(--primary); box-shadow:0 4px 10px rgba(37,99,235,.35); cursor:pointer; transition: transform .15s var(--ease); }
input[type="range"].slider::-webkit-slider-thumb:hover{ transform:scale(1.12); }
input[type="range"].slider::-moz-range-thumb{ width:24px; height:24px; border-radius:999px; background:#fff; border:3px solid var(--primary); box-shadow:0 4px 10px rgba(37,99,235,.35); cursor:pointer; }
.slider-fill{ background:linear-gradient(90deg, #2563EB, #2E9E4A); }
.earn-num { font-variant-numeric: tabular-nums; transition: color .2s ease; }
.earn-pop { animation: popNum .35s var(--ease); }
@keyframes popNum { 0%{transform:scale(1)} 50%{transform:scale(1.06)} 100%{transform:scale(1)} }

.avatar-ring{ padding:2px; border-radius:999px; background:linear-gradient(135deg,#2563EB,#2E9E4A); display:inline-block; }
.avatar-ring img{ border-radius:999px; display:block; background:#fff; object-fit:cover; }

/* ===== App Store / Play Store buttons ===== */
.store-btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 16px; border-radius:14px;
  background:linear-gradient(180deg, #0B1220, #000);
  color:#fff; border:1px solid rgba(255,255,255,.08);
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 10px 24px -14px rgba(0,0,0,.6);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
  line-height:1;
}
.store-btn:hover{ transform:translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 18px 34px -14px rgba(0,0,0,.7); }
.store-btn .store-icon{ width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; flex:0 0 26px; }
.store-btn .store-icon img{ width:26px; height:26px; display:block; object-fit:contain; image-rendering:-webkit-optimize-contrast; }
.store-btn .store-icon.is-apple img{ filter: drop-shadow(0 0 0 #fff); }
.store-btn .store-meta{ line-height:1.1; text-align:left; }
.store-btn .store-meta .up{ font-size:10px; opacity:.7; letter-spacing:.08em; text-transform:uppercase; }
.store-btn .store-meta .dn{ font-size:14px; font-weight:600; letter-spacing:.01em; }

/* Hover tooltip */
.tip{ position:relative; cursor:help; }
.tip > .tip-body{
  position:absolute; left:50%; bottom:calc(100% + 8px); transform:translateX(-50%) translateY(4px);
  background:#0F172A; color:#fff; font-size:11px; font-weight:500; padding:6px 10px; border-radius:8px;
  white-space:nowrap; opacity:0; pointer-events:none; transition: .2s var(--ease); box-shadow:0 10px 24px -10px rgba(0,0,0,.35); z-index:20;
}
.tip:hover > .tip-body{ opacity:1; transform:translateX(-50%) translateY(0); }
.tip > .tip-body::after{ content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:5px solid transparent; border-top-color:#0F172A; }

/* ===== Insights / Blog cards ===== */
.blog-card{
  display:flex; flex-direction:column; background:#fff;
  border:1px solid var(--border); border-radius:22px;
  overflow:hidden; text-decoration:none; color:inherit; position:relative;
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 14px 30px -22px rgba(15,23,42,.18);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.blog-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 4px 8px rgba(15,23,42,.06), 0 36px 70px -22px rgba(15,23,42,.30);
  border-color:#BFDBFE;
}
.blog-card-img{
  aspect-ratio: 16 / 10; overflow:hidden; position:relative;
  background: linear-gradient(135deg,#1D4ED8,#2E9E4A);
}
.blog-card-img img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform: scale(1.01); transition: transform .55s var(--ease);
}
.blog-card:hover .blog-card-img img{ transform: scale(1.06); }
.blog-card-img::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.15));
}
.blog-card-body{ padding: 1.4rem 1.5rem 1.6rem; display:flex; flex-direction:column; flex:1; }
.blog-card-tag{
  display:inline-flex; align-items:center; gap:.4rem; align-self:flex-start;
  font-family:'Inter',sans-serif;
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; font-weight:800;
  color:#1D4ED8; padding:5px 10px; border-radius:999px;
  background:#EFF6FF; border:1px solid #DBEAFE;
}
.blog-card h3{
  font-family:'Plus Jakarta Sans', Inter, sans-serif;
  font-weight:800; font-size:1.18rem; line-height:1.3;
  letter-spacing:-.015em; color:#0F172A;
  margin-top: .9rem;
}
.blog-card p{
  font-size: 14.5px; line-height: 1.65; color:#475569;
  margin-top: .6rem; flex:1;
}
.blog-card-meta{
  display:flex; align-items:center; gap:.6rem;
  font-size: 12px; color:#64748B; margin-top: 1rem;
}
.blog-card-meta .dot{ width:3px; height:3px; border-radius:999px; background:#CBD5E1; }
.blog-card-cta{
  display:inline-flex; align-items:center; gap:.4rem;
  margin-top: 1.1rem; padding-top: 1.1rem;
  border-top: 1px dashed #E2E8F0;
  font-weight:700; font-size:.9rem; color:#1D4ED8;
  letter-spacing:-.005em;
  transition: gap .25s var(--ease), color .25s var(--ease);
}
.blog-card-cta::after{
  content:"→"; font-weight:800; transition: transform .3s var(--ease);
}
.blog-card:hover .blog-card-cta{ color:#2563EB; gap:.6rem; }
.blog-card:hover .blog-card-cta::after{ transform: translateX(3px); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .marq-track{ animation:none; }
  .reveal{ opacity:1; transform:none; }
  .blog-card:hover{ transform:none; }
  .blog-card:hover .blog-card-img img{ transform:none; }
}