/* ============================================================
   TCGwrap — landing & coaching pages (loads after styles.css)
   ============================================================ */

main{position:relative;z-index:1}

/* ===================== HERO ===================== */
.hero{
  display:grid;grid-template-columns:1.05fr 1fr;gap:44px;align-items:center;
  max-width:1160px;margin:0 auto;padding:76px 22px 48px;
}
.hero-slim{grid-template-columns:1fr;padding-bottom:20px}
.eyebrow{
  color:var(--green);font-size:.85rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin-bottom:18px;
}
.eyebrow::before{content:"[ "}
.eyebrow::after{content:" ]"}
.hero h1{
  font-family:'Russo One',system-ui,sans-serif;font-weight:400;
  font-size:clamp(1.7rem,4.2vw,2.7rem);line-height:1.18;letter-spacing:.01em;color:var(--txt);
}
.hero h1 em{font-style:normal;color:var(--accent-bright)}
.hero-sub{color:var(--txt-dim);font-size:1.05rem;line-height:1.6;max-width:52ch;margin-top:20px}
.hero-ctas{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
.hero-stats{display:flex;gap:10px;margin-top:26px;color:var(--txt-faint);font-size:.9rem;flex-wrap:wrap;text-transform:lowercase}
.hero-stats span+span::before{content:"/";margin-right:10px;color:var(--accent)}
.hero-stats::before{content:"> ";color:var(--green)}
.hero-stats::after{content:"▮";color:var(--green);animation:blink 1.1s steps(1) infinite}

/* landing buttons: anchors, don't stretch */
.btn-lg{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  height:50px;padding:0 26px;font-size:1rem;border-radius:10px;text-decoration:none;
}
/* the main action of the site — bigger than everything else */
.btn-xl{height:62px;padding:0 38px;font-size:1.2rem}

/* ===================== HERO CARDS (shuffle) ===================== */
.hero-visual{position:relative;height:390px;overflow:hidden}
/* synthwave grid horizon under the cards */
.grid-floor{
  position:absolute;left:-18%;right:-18%;bottom:-4px;height:190px;
  background:
    linear-gradient(transparent,rgba(37,99,235,.14)),
    repeating-linear-gradient(90deg,rgba(37,99,235,.4) 0 1px,transparent 1px 46px),
    repeating-linear-gradient(0deg,rgba(37,99,235,.32) 0 1px,transparent 1px 30px);
  transform:perspective(300px) rotateX(58deg);transform-origin:bottom center;
  -webkit-mask-image:linear-gradient(transparent,#000 32%);mask-image:linear-gradient(transparent,#000 32%);
}
.table-shadow{
  position:absolute;left:50%;bottom:6px;width:420px;height:56px;transform:translateX(-50%);
  background:radial-gradient(50% 50% at 50% 50%,rgba(3,6,12,.7),transparent 70%);
  filter:blur(6px);
}
.hcard{
  --dx:0px;--dy:0px;--rot:0deg;
  position:absolute;left:50%;bottom:36px;width:150px;height:208px;margin-left:-75px;
  border-radius:10px;
  background:linear-gradient(165deg,#1b2540 0%,#131b33 55%,#0d1526 100%);
  border:1px solid rgba(239,68,68,.45);
  box-shadow:0 16px 30px rgba(2,6,16,.6), 0 0 14px rgba(220,38,38,.18), inset 0 0 0 1px rgba(255,255,255,.04);
  transform:translate(var(--dx),var(--dy)) rotate(var(--rot));
  animation:shuffle 11s ease-in-out infinite;
}
/* neon grid inside the card back (synthwave) */
.hcard::before{
  content:"";position:absolute;inset:7px;border-radius:6px;
  border:1px solid rgba(59,130,246,.28);
  background:
    repeating-linear-gradient(0deg,rgba(37,99,235,.14) 0 1px,transparent 1px 14px),
    repeating-linear-gradient(90deg,rgba(37,99,235,.14) 0 1px,transparent 1px 14px);
}
.hc-emblem{
  position:absolute;top:50%;left:50%;width:46px;height:46px;
  transform:translate(-50%,-50%) rotate(45deg);
  border:2px solid rgba(239,68,68,.75);border-radius:7px;
  box-shadow:0 0 14px rgba(220,38,38,.45);
}
.hc-emblem::after{content:"";position:absolute;inset:10px;border:2px solid rgba(59,130,246,.7);border-radius:3px}
.c1{--dx:-112px;--dy:18px;--rot:-22deg;z-index:1;animation-delay:0s}
.c2{--dx:-56px;--dy:5px;--rot:-11deg;z-index:2;animation-delay:2.2s}
.c3{--dx:0px;--dy:0px;--rot:0deg;z-index:3;animation-delay:4.4s;border-color:rgba(239,68,68,.85);box-shadow:0 16px 30px rgba(2,6,16,.6),0 0 22px rgba(220,38,38,.35)}
.c4{--dx:56px;--dy:5px;--rot:11deg;z-index:4;animation-delay:6.6s}
.c5{--dx:112px;--dy:18px;--rot:22deg;z-index:5;animation-delay:8.8s}
@keyframes shuffle{
  0%,70%,100%{transform:translate(var(--dx),var(--dy)) rotate(var(--rot))}
  76%{transform:translate(calc(var(--dx)*.55),calc(var(--dy) - 70px)) rotate(calc(var(--rot)*.35)) scale(1.05)}
  83%{transform:translate(calc(var(--dx)*.15),calc(var(--dy) - 86px)) rotate(0deg) scale(1.06)}
  90%{transform:translate(calc(var(--dx)*.7),calc(var(--dy) - 26px)) rotate(calc(var(--rot)*.7)) scale(1.02)}
}
@media (prefers-reduced-motion: reduce){
  .hcard{animation:none}
}

/* ===================== FEATURE DECK (TCG-card slider) ===================== */
.fdeck{
  position:relative;max-width:1160px;margin:0 auto;
  padding:10px 22px 74px;display:flex;align-items:center;justify-content:center;gap:16px;
  overflow:hidden;
}
.fd-stage{position:relative;width:min(720px,100%);height:450px}
.fcard{
  position:absolute;top:0;left:50%;width:330px;margin-left:-165px;
  background:linear-gradient(165deg,#1b2540 0%,#131b33 55%,#0d1526 100%);
  border:2px solid rgba(239,68,68,.5);border-radius:14px;padding:16px;
  box-shadow:0 14px 30px rgba(2,6,16,.6),0 0 16px rgba(220,38,38,.15);
  transition:transform .45s ease,opacity .45s ease;cursor:pointer;
}
.fcard.is-active{transform:translateX(0) scale(1);opacity:1;z-index:3;cursor:default}
.fcard.is-left{transform:translateX(-52%) rotate(-7deg) scale(.86);opacity:.5;z-index:1}
.fcard.is-right{transform:translateX(52%) rotate(7deg) scale(.86);opacity:.5;z-index:1}
.fc-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.fc-name{font-family:'Russo One',system-ui,sans-serif;font-size:.95rem;line-height:1.3;color:var(--txt)}
.fc-hp{color:var(--green);font-size:.9rem;font-weight:700;white-space:nowrap}
.fc-art{
  height:150px;margin:13px 0;border-radius:8px;border:1px solid rgba(59,130,246,.3);
  background:
    repeating-linear-gradient(0deg,rgba(37,99,235,.12) 0 1px,transparent 1px 13px),
    repeating-linear-gradient(90deg,rgba(37,99,235,.12) 0 1px,transparent 1px 13px);
  display:flex;align-items:center;justify-content:center;color:var(--blue-bright);
}
.fc-art svg{width:52px;height:52px;filter:drop-shadow(0 0 10px rgba(37,99,235,.5))}
.fc-type{
  text-align:center;color:var(--txt-faint);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
  border-top:1px solid var(--glass-border);border-bottom:1px solid var(--glass-border);padding:5px 0;
}
.fc-attack{display:flex;justify-content:space-between;gap:10px;margin-top:14px;font-family:'Russo One',system-ui,sans-serif;font-size:.85rem;line-height:1.4}
.fc-attack .fc-dmg{color:var(--green)}
.fc-text{margin-top:9px;color:var(--txt-dim);font-size:.92rem;line-height:1.55}
.fd-arrow{
  flex:0 0 auto;width:46px;height:46px;border-radius:8px;cursor:pointer;
  background:var(--glass-strong);border:1px solid var(--glass-border);color:var(--txt);
  font-family:'Exo 2',system-ui,sans-serif;font-weight:700;font-size:1rem;transition:.16s;
}
.fd-arrow:hover{border-color:var(--accent);color:var(--accent-bright)}
.fd-dots{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);display:flex;gap:10px}
.fd-dots button{width:14px;height:14px;border-radius:3px;border:1px solid var(--glass-border);background:var(--glass-strong);cursor:pointer;padding:0}
.fd-dots button.on{background:var(--accent);border-color:var(--accent-bright)}

/* ===================== COACHING TEASER (landing) ===================== */
.teaser{
  display:grid;grid-template-columns:1fr auto;gap:26px;align-items:center;
  max-width:1116px;margin:0 auto 76px;padding:34px 36px;
  border:1px solid var(--glass-border);border-radius:18px;
  background:linear-gradient(135deg,rgba(220,38,38,.12),rgba(37,99,235,.06) 70%,transparent);
}
.serif-line{font-family:'Russo One',system-ui,sans-serif;font-size:1.4rem;color:var(--txt);letter-spacing:.02em;margin-bottom:8px}
.serif-line::before{content:"> ";color:var(--green)}
.teaser-sub{color:var(--txt-dim);font-size:.98rem;line-height:1.6;max-width:58ch}

/* ===================== COMING SOON (coaching) ===================== */
.soon{max-width:720px;margin:0 auto;padding:20px 22px 90px}
.soon-card{
  border:1px solid var(--glass-border);border-radius:18px;padding:44px 36px;text-align:center;
  background:linear-gradient(135deg,rgba(220,38,38,.10),rgba(37,99,235,.05) 70%,transparent);
}
.soon-badge{
  display:inline-block;color:var(--green);font-size:.82rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;margin-bottom:16px;
}
.soon-card h2{font-family:'Russo One',system-ui,sans-serif;font-weight:400;font-size:1.6rem;color:var(--txt);margin-bottom:14px}
.soon-card p{color:var(--txt-dim);font-size:1.02rem;line-height:1.6;max-width:52ch;margin:0 auto}
.soon-sub{color:var(--txt-faint);font-size:.92rem;margin-top:14px !important}
.soon-card .btn-xl{margin-top:28px}

/* ===================== PACKAGES (coaching) ===================== */
.pkg-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  max-width:1160px;margin:0 auto;padding:34px 22px 10px;
}
.pkg{
  position:relative;display:flex;flex-direction:column;
  background:var(--glass);border:1px solid var(--glass-border);border-radius:16px;
  padding:26px 24px;
}
.pkg.popular{border-color:rgba(239,68,68,.6);box-shadow:0 0 20px rgba(220,38,38,.22)}
.tag-pop{
  position:absolute;top:-12px;left:24px;
  background:var(--accent);color:#fff;font-family:'Russo One',system-ui,sans-serif;font-size:.62rem;font-weight:400;letter-spacing:.08em;
  text-transform:uppercase;padding:6px 10px;border-radius:6px;
}
.pkg h3{
  font-family:'Russo One',system-ui,sans-serif;font-weight:400;
  font-size:1.05rem;line-height:1.4;
}
.pkg .price{
  font-family:'Russo One',system-ui,sans-serif;font-weight:400;
  font-size:1.7rem;color:var(--green);margin-top:14px;
}
.pkg .price span{font-family:'Exo 2',system-ui,sans-serif;font-weight:500;font-size:.85rem;color:var(--txt-faint)}
.pkg ul{list-style:none;margin:16px 0 22px;padding:0;display:flex;flex-direction:column;gap:9px;flex:1}
.pkg li{color:var(--txt-dim);font-size:.95rem;line-height:1.5;padding-left:22px;position:relative}
.pkg li::before{content:"+";position:absolute;left:0;color:var(--green);font-weight:400}
.pkg-cta{width:100%}
.pkg-note{text-align:center;color:var(--txt-faint);font-size:.88rem;margin:16px auto 0}

/* ===================== STEPS ===================== */
.steps{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  max-width:1160px;margin:0 auto;padding:56px 22px 30px;
}
.step{padding:8px 6px}
.step-num{
  font-family:'Russo One',system-ui,sans-serif;
  font-size:1.5rem;color:var(--accent-bright);display:block;margin-bottom:12px;
}
.step h4{
  font-family:'Russo One',system-ui,sans-serif;font-weight:400;
  font-size:.95rem;line-height:1.4;margin-bottom:8px;
}
.step p{color:var(--txt-dim);font-size:.92rem;line-height:1.6}

/* ===================== FINAL CTA ===================== */
.cta-final{text-align:center;padding:56px 22px 80px}
.cta-final .serif-line{font-size:2rem;margin-bottom:20px}

/* ===================== LEGAL (privacy) ===================== */
.legal{max-width:760px;margin:0 auto;padding:48px 22px 80px}
.legal h1{font-family:'Russo One',system-ui,sans-serif;font-weight:400;font-size:2rem;color:var(--txt);margin-bottom:6px}
.legal-updated{color:var(--txt-faint);font-size:.85rem;margin-bottom:24px}
.legal-lead{color:var(--txt-dim);font-size:1.05rem;line-height:1.65;margin-bottom:12px}
.legal h2{font-family:'Russo One',system-ui,sans-serif;font-weight:400;font-size:1.1rem;color:var(--accent-bright);margin:28px 0 8px}
.legal p{color:var(--txt-dim);font-size:.98rem;line-height:1.7;margin-bottom:10px}
.legal ul{margin:0 0 12px;padding-left:22px;display:flex;flex-direction:column;gap:6px}
.legal li{color:var(--txt-dim);font-size:.96rem;line-height:1.55}
.legal a{color:var(--accent-bright);text-decoration:none}
.legal a:hover{text-decoration:underline}
.legal strong{color:var(--txt)}
.legal-back{margin-top:32px;font-size:1rem}

/* ===================== RESPONSIVE ===================== */
@media(max-width:960px){
  .hero{grid-template-columns:1fr;padding-top:52px;gap:22px}
  .hero-visual{height:300px;transform:scale(.82);transform-origin:top center;margin-top:-8px}
  .pkg-grid,.steps{grid-template-columns:1fr;max-width:560px}
  .fd-stage{height:440px}
  .fcard.is-left{transform:translateX(-26%) rotate(-6deg) scale(.82)}
  .fcard.is-right{transform:translateX(26%) rotate(6deg) scale(.82)}
  .teaser{grid-template-columns:1fr;max-width:560px;margin-bottom:60px}
}
@media(max-width:640px){
  /* mobile: drop the decorative card fan, keep the hero text clean */
  .hero-visual{display:none}
  .hero{padding-bottom:20px}
}
@media(max-width:560px){
  .hero{padding:40px 16px 30px}
  .fd-arrow{display:none}
  .fcard{width:290px;margin-left:-145px}
  .hero-visual{transform:scale(.66);height:250px}
  .hero-ctas .btn-lg{width:100%}
  .cta-final .serif-line{font-size:1.6rem}
}