/* ============================================================
   SHMO CARD — product page styles
   Reuses .shm-guide / .shm-ribbon patterns from shmello.css
   ============================================================ */

/* ---------- Hero ---------- */
.sc-hero{position:relative;overflow:hidden;padding:6.5rem 0 4.5rem;}
.sc-hero .wrap{
  display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center;
  position:relative;z-index:2;
}
.sc-hero h1{font-size:clamp(2.4rem,5vw,3.8rem);line-height:1.05;margin:.6rem 0 1rem;}
.sc-hero .sc-grad{
  background:linear-gradient(90deg,#1b8df6,#7fc1ff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* mascot + card stage */
.sc-stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:360px;}
.sc-mascot{
  width:min(280px,64%);position:relative;z-index:3;
  filter:drop-shadow(0 18px 40px rgba(27,141,246,.3));
  animation:scBob 4.5s ease-in-out infinite;
}
@keyframes scBob{
  0%,100%{transform:translateY(0) rotate(-1.5deg);}
  50%{transform:translateY(-12px) rotate(1.5deg);}
}
.sc-stage .tapwave{
  position:absolute;border:2px solid rgba(27,141,246,.5);border-radius:50%;
  width:120px;height:120px;left:58%;top:30%;opacity:0;
  animation:tapPulse 2.6s ease-out infinite;
}
.sc-stage .tapwave.t2{animation-delay:.85s;}
.sc-stage .tapwave.t3{animation-delay:1.7s;}
@keyframes tapPulse{
  0%{transform:scale(.4);opacity:.9;}
  100%{transform:scale(1.9);opacity:0;}
}
/* floating star bits */
.sc-star{
  position:absolute;color:#ffd24a;opacity:0;font-size:1.1rem;
  animation:starRise 4.5s linear infinite;z-index:2;
}
.sc-star.s2{left:18%;bottom:20%;animation-delay:1.4s;font-size:.85rem;}
.sc-star.s3{left:74%;bottom:12%;animation-delay:2.8s;}
.sc-star.s1{left:30%;bottom:14%;}
@keyframes starRise{
  0%{transform:translateY(0) rotate(0);opacity:0;}
  12%{opacity:.95;}
  100%{transform:translateY(-200px) rotate(40deg);opacity:0;}
}

/* ---------- Review-lift chart ---------- */
.lift-zone{position:relative;}
.lift-chart{
  display:grid;grid-template-columns:repeat(8,1fr);gap:1rem;align-items:end;
  max-width:960px;margin:3rem auto 0;height:300px;padding:2.4rem .5rem 0;
}
.lift-col{display:flex;flex-direction:column;align-items:center;height:100%;justify-content:flex-end;
  position:relative;padding-bottom:60px;}
.lift-bar{
  width:100%;max-width:74px;border-radius:10px 10px 4px 4px;position:relative;
  background:linear-gradient(180deg,#1b8df6,#0044ff);
  box-shadow:0 8px 26px rgba(27,141,246,.3);
  height:0;transition:height 1.1s cubic-bezier(.22,1,.36,1);
}
.lift-chart.in .lift-bar{height:var(--h);}
.lift-bar .pct{
  position:absolute;top:-1.9rem;left:50%;transform:translateX(-50%);
  font-weight:900;font-size:1.05rem;color:#7fc1ff;white-space:nowrap;
  opacity:0;transition:opacity .4s ease .8s;
}
.lift-chart.in .lift-bar .pct{opacity:1;}
/* labels are absolutely anchored below a fixed baseline, so a shop
   name wrapping (Buffalo Jewelry & Loan) can never lift its bar */
.lift-meta{position:absolute;top:calc(100% - 52px);left:0;right:0;text-align:center;line-height:1.25;}
.lift-meta b{display:block;font-size:.82rem;color:#cfe3f7;}
.lift-meta span{font-size:.72rem;color:#7fa6cc;}
.lift-note{
  text-align:center;font-size:.8rem;color:#7fa6cc;margin-top:1.6rem;
}

/* ---------- Crew math ---------- */
.crew-math{
  display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;max-width:760px;margin:2.5rem auto 0;
}
.crew-card{
  border:1px solid rgba(127,166,204,.18);border-radius:18px;padding:1.8rem 1.6rem;
  background:rgba(21,39,65,.45);text-align:center;position:relative;overflow:hidden;
}
.crew-card.win{border-color:rgba(27,141,246,.55);background:rgba(27,141,246,.08);}
.crew-card .cnum{font-size:clamp(2.4rem,5vw,3.4rem);font-weight:900;color:#7fc1ff;}
.crew-card.win .cnum{color:#1b8df6;}
.crew-card .clabel{font-size:.95rem;color:#9db8d6;margin-top:.3rem;line-height:1.45;}
.crew-card .tagline{
  display:inline-block;margin-top:.9rem;font-size:.72rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:#7fa6cc;
}
.crew-card.win .tagline{color:#7fc1ff;}
.crew-vs{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:46px;height:46px;border-radius:50%;background:#152741;
  border:1px solid rgba(127,166,204,.3);display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:.8rem;color:#7fa6cc;z-index:2;
}
.crew-wrap{position:relative;}

/* ---------- Format cards ---------- */
.fmt-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2.5rem;
}
.fmt-card{
  border:1px solid rgba(127,166,204,.18);border-radius:18px;overflow:hidden;
  background:rgba(21,39,65,.45);transition:transform .3s ease,border-color .3s ease;
  position:relative;
}
.fmt-card:hover{transform:translateY(-5px);border-color:rgba(27,141,246,.5);}
.fmt-visual{
  height:170px;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 120%,rgba(27,141,246,.18),transparent 70%);
  position:relative;overflow:hidden;
}
.fmt-visual img{max-height:130px;max-width:80%;object-fit:contain;border-radius:10px;}
.fmt-visual .css-card{
  width:150px;height:95px;border-radius:10px;position:relative;
  background:linear-gradient(135deg,#152741,#0d1b30);
  border:1px solid rgba(127,166,204,.35);
  box-shadow:0 14px 34px rgba(0,0,0,.4);
}
.fmt-visual .css-card::after{
  content:"";position:absolute;right:12px;top:12px;width:22px;height:22px;
  border-radius:50%;border:2px solid rgba(27,141,246,.7);
}
.fmt-visual .css-sign{
  width:110px;height:140px;border-radius:10px 10px 4px 4px;position:relative;
  background:linear-gradient(170deg,#1a2f4e,#0d1b30);
  border:1px solid rgba(127,166,204,.35);
  box-shadow:0 14px 34px rgba(0,0,0,.4);
  transform:perspective(400px) rotateX(8deg);
}
.fmt-visual .css-sign::after{
  content:"★★★★★";position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);
  color:#ffd24a;font-size:.9rem;letter-spacing:.1em;
}
.fmt-visual .css-disc{
  width:110px;height:110px;border-radius:50%;position:relative;
  background:linear-gradient(135deg,#1a2f4e,#0d1b30);
  border:1px solid rgba(127,166,204,.35);
  box-shadow:0 14px 34px rgba(0,0,0,.4);
}
.fmt-visual .css-disc::after{
  content:"";position:absolute;inset:18px;border-radius:50%;
  border:2px dashed rgba(27,141,246,.5);
}
.fmt-body{padding:1.3rem 1.4rem 1.5rem;}
.fmt-body h3{margin:0 0 .3rem;font-size:1.08rem;}
.fmt-body p{margin:0;font-size:.88rem;color:#9db8d6;line-height:1.5;}
.fmt-tag{
  position:absolute;top:.9rem;left:.9rem;font-size:.66rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;padding:.3rem .6rem;border-radius:999px;
  background:rgba(27,141,246,.16);color:#7fc1ff;border:1px solid rgba(27,141,246,.3);
}

/* ---------- Testimonial cards ---------- */
.sc-quotes{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:2.5rem;}
.sc-quote{
  border:1px solid rgba(127,166,204,.18);border-radius:18px;padding:1.7rem 1.6rem;
  background:rgba(21,39,65,.45);position:relative;
}
.sc-quote::before{
  content:"\201C";position:absolute;top:-.4rem;left:1rem;font-size:5rem;
  color:rgba(27,141,246,.25);font-family:Georgia,serif;line-height:1;
}
.sc-quote p{margin:.8rem 0 1rem;font-size:1rem;line-height:1.6;color:#cfe3f7;position:relative;}
.sc-quote .who{display:flex;align-items:center;gap:.7rem;}
.sc-quote .who b{font-size:.92rem;}
.sc-quote .who span{display:block;font-size:.78rem;color:#7fa6cc;}
.sc-quote .stars{color:#ffd24a;font-size:.85rem;letter-spacing:.12em;margin-bottom:.3rem;}
.sc-quote .big-stat{
  position:absolute;right:1.3rem;bottom:1.2rem;font-weight:900;font-size:1.6rem;
  color:rgba(27,141,246,.85);
}

/* ---------- two jobs split ---------- */
.jobs-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:2.5rem;}
.job-card{
  border:1px solid rgba(127,166,204,.18);border-radius:18px;padding:1.8rem 1.6rem;
  background:rgba(21,39,65,.45);position:relative;overflow:hidden;
}
.job-card i{
  font-size:1.6rem;color:#1b8df6;display:inline-flex;padding:.6rem;border-radius:12px;
  background:rgba(27,141,246,.12);margin-bottom:.9rem;
}
.job-card h3{margin:0 0 .5rem;font-size:1.15rem;}
.job-card p{margin:0;font-size:.92rem;color:#9db8d6;line-height:1.55;}
.job-card .glow{
  position:absolute;width:220px;height:220px;border-radius:50%;right:-70px;bottom:-70px;
  background:radial-gradient(circle,rgba(27,141,246,.16),transparent 70%);
}

/* ---------- Responsive ---------- */
@media(max-width:760px){
  .sc-hero .wrap{grid-template-columns:1fr;gap:1.5rem;}
  .sc-stage{min-height:260px;order:-1;}
  .sc-mascot{width:min(210px,58%);}
  .fmt-grid{grid-template-columns:1fr;}
  .sc-quotes,.jobs-grid,.crew-math{grid-template-columns:1fr;}
  .crew-vs{display:none;}

  /* ----- Review-lift chart becomes a HORIZONTAL leaderboard on mobile -----
     Reuses the same markup + the same --h value + the same .in trigger.
     Each shop is a row: name on the left, bar grows rightward, % at the end. */
  .lift-chart{
    display:flex;flex-direction:column;gap:.9rem;
    height:auto;max-width:520px;padding:0;align-items:stretch;
  }
  .lift-col{
    display:grid;grid-template-columns:92px 1fr;align-items:center;gap:.7rem;
    height:auto;justify-content:initial;padding-bottom:0;
  }
  /* name block sits first, left-aligned */
  .lift-meta{order:0;position:static;text-align:left;line-height:1.15;}
  .lift-meta b{font-size:.82rem;}
  .lift-meta span{font-size:.66rem;}
  /* the bar becomes a horizontal track that fills left-to-right */
  .lift-bar{
    order:1;width:0;max-width:none;height:22px;min-width:46px;
    border-radius:5px 11px 11px 5px;
    background:linear-gradient(90deg,#1b8df6,#0044ff);
    box-shadow:0 4px 16px rgba(27,141,246,.3);
    transition:width 1.1s cubic-bezier(.22,1,.36,1);
    display:flex;align-items:center;justify-content:flex-end;
  }
  .lift-chart.in .lift-bar{width:var(--h);height:22px;}
  /* percentage label rides INSIDE the right end of the bar, so it can never clip */
  .lift-bar .pct{
    position:static;transform:none;opacity:0;
    font-size:.78rem;font-weight:900;color:#eaf4ff;
    padding-right:.55rem;white-space:nowrap;
    transition:opacity .4s ease .8s;
  }
  .lift-chart.in .lift-bar .pct{opacity:1;}
}
@media(prefers-reduced-motion:reduce){
  .sc-mascot,.tapwave,.sc-star{animation:none;}
  .lift-bar{transition:none;}
  .lift-chart .lift-bar{height:var(--h);}
  .lift-bar .pct{opacity:1;transition:none;}
}

/* ---------- ONE CARD: feature s'more ---------- */
.onecard-zone .smore-wrap{margin-top:1rem;}
.layer-mallow .mname.sc-name{font-size:1.35rem;}
.layer-mallow img.sc-mascot-mini{height:64px;width:auto;}
.onecard-feats{
  display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem;
}
.oc-chip{
  font-size:.78rem;font-weight:700;padding:.45rem .85rem;border-radius:999px;
  border:1px solid rgba(127,166,204,.3);color:#9db8d6;background:rgba(21,39,65,.4);
  display:inline-flex;align-items:center;gap:.4rem;
}
.oc-chip i{color:#1b8df6;}
.oc-chip.hot{border-color:rgba(27,141,246,.55);color:#cfe3f7;background:rgba(27,141,246,.1);}

/* ---------- DESIGN SLIDESHOW ---------- */
.design-zone{position:relative;overflow:clip;}
.design-belt{
  overflow:hidden;position:relative;padding:2.4rem 0 1.4rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
.design-track{
  display:flex;gap:1.6rem;width:max-content;
  animation:designScroll 55s linear infinite;
}
.design-belt:hover .design-track{animation-play-state:paused;}
@keyframes designScroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.dcard{
  width:168px;height:264px;border-radius:14px;flex:0 0 auto;position:relative;
  cursor:pointer;background:transparent;
  perspective:1100px;
  transition:transform .35s ease;
}
.design-track .dcard:nth-child(odd){transform:rotate(-2.2deg) translateY(6px);}
.design-track .dcard:nth-child(even){transform:rotate(1.8deg) translateY(-6px);}
.dcard:hover,.dcard:focus-visible{
  transform:rotate(0) translateY(-10px) scale(1.08) !important;z-index:3;outline:none;
}
/* flipping inner wrapper */
.dcard-inner{
  position:absolute;inset:0;border-radius:14px;
  transform-style:preserve-3d;
  transition:transform .7s cubic-bezier(.2,.7,.2,1);
}
/* desktop: hover flips; touch: .flipped class (set by JS tap) flips */
.dcard:hover .dcard-inner,
.dcard:focus-visible .dcard-inner,
.dcard.flipped .dcard-inner{transform:rotateY(180deg);}
.dcard-face{
  position:absolute;inset:0;border-radius:14px;overflow:hidden;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 16px 40px rgba(0,0,0,.45);
  background:#0a1322;
}
.dcard-face img{width:100%;height:100%;object-fit:cover;display:block;}
.dcard-back{transform:rotateY(180deg);}
.dcard-flag{
  position:absolute;left:50%;bottom:-2px;transform:translate(-50%,120%);
  font-size:.5rem;font-weight:800;white-space:nowrap;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55);
  opacity:0;transition:opacity .25s ease,transform .25s ease;pointer-events:none;
}
.dcard:hover .dcard-flag,.dcard:focus-visible .dcard-flag{
  opacity:1;transform:translate(-50%,135%);
}
.design-note{
  text-align:center;font-size:.82rem;color:#7fa6cc;margin-top:1.4rem;
}
.design-note b{color:#7fc1ff;}

/* ---------- responsive add-ons ---------- */
@media(max-width:960px){
  .dcard{width:140px;height:220px;}
}
@media(prefers-reduced-motion:reduce){
  .design-track{animation:none;}
}

/* ============================================================
   TAP vs QR — the friction pitch
   ============================================================ */
.friction-zone{position:relative;overflow:clip;}
.friction-zone::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(38% 30% at 12% 18%, rgba(66,133,244,.10), transparent 70%),
    radial-gradient(34% 28% at 88% 82%, rgba(52,168,83,.08), transparent 70%);
}
.vs-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin-top:2.4rem;
  position:relative;
}
.vs-card{
  border:1px solid rgba(127,166,204,.18);border-radius:20px;padding:2rem 1.8rem;
  background:rgba(21,39,65,.45);position:relative;overflow:hidden;
}
.vs-card.loser{opacity:.82;}
.vs-card.winner{border-color:rgba(27,141,246,.5);background:rgba(27,141,246,.07);}
.vs-head{display:flex;align-items:center;gap:.8rem;margin-bottom:1.2rem;}
.vs-badge{
  width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  font-size:1.7rem;
}
.vs-card.loser .vs-badge{background:rgba(127,166,204,.12);color:#8da3bf;}
.vs-card.winner .vs-badge{background:rgba(27,141,246,.14);color:#1b8df6;}
.vs-head h3{margin:0;font-size:1.3rem;}
.vs-head .vs-sub{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#7fa6cc;}
.vs-steps{list-style:none;display:flex;flex-direction:column;gap:.75rem;}
.vs-steps li{
  display:flex;align-items:flex-start;gap:.7rem;font-size:.92rem;color:#9db8d6;line-height:1.45;
}
.vs-steps li i{flex:0 0 auto;margin-top:.15rem;font-size:1rem;}
.vs-card.loser .vs-steps li i{color:#e07a7a;}
.vs-card.winner .vs-steps li i{color:#2fbf71;}
.vs-foot{
  margin-top:1.4rem;padding-top:1.1rem;border-top:1px solid rgba(127,166,204,.14);
  font-weight:800;font-size:.95rem;
}
.vs-card.loser .vs-foot{color:#8da3bf;}
.vs-card.winner .vs-foot{color:#7fc1ff;}
.vs-orb{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:54px;height:54px;border-radius:50%;background:#0a1322;
  border:1px solid rgba(127,166,204,.3);display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:.82rem;color:#7fa6cc;
}
@media(max-width:760px){.vs-orb{display:none;}}

/* phone-tap demo */
.tap-demo{
  display:flex;align-items:center;justify-content:center;gap:0;margin:2.6rem auto 0;
}
.tap-phone{
  width:150px;height:300px;border-radius:26px;
  border:3px solid rgba(127,166,204,.4);background:#0a1626;position:relative;
  box-shadow:0 24px 60px rgba(0,0,0,.5);overflow:hidden;flex:0 0 auto;
}
.tap-phone .notch{
  position:absolute;top:8px;left:50%;transform:translateX(-50%);
  width:46px;height:6px;border-radius:999px;background:rgba(127,166,204,.4);
}
.tap-phone .screen{
  position:absolute;inset:18px 10px 10px;border-radius:14px;
  background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;
  opacity:0;transition:opacity .5s ease;
}
.tap-demo.go .tap-phone .screen{opacity:1;}
.tap-phone .g-logo{font-size:1.6rem;font-weight:900;letter-spacing:-.02em;}
.tap-phone .g-logo .gb{color:#4285F4;}.tap-phone .g-logo .gr{color:#EA4335;}
.tap-phone .g-logo .gy{color:#FBBC05;}.tap-phone .g-logo .gg{color:#34A853;}
.tap-phone .g-stars{color:#FBBC05;font-size:1.3rem;letter-spacing:.1em;
  opacity:0;transform:scale(.6);transition:opacity .4s ease .4s,transform .4s cubic-bezier(.34,1.56,.64,1) .4s;}
.tap-demo.go .tap-phone .g-stars{opacity:1;transform:scale(1);}
.tap-phone .g-cap{font-size:.6rem;font-weight:700;color:#5f6368;letter-spacing:.04em;}
.tap-card-vis{
  width:96px;height:150px;border-radius:11px;flex:0 0 auto;position:relative;z-index:2;
  background:linear-gradient(135deg,#152741 25%,#1b8df6);
  border:1px solid rgba(255,255,255,.2);box-shadow:0 16px 40px rgba(27,141,246,.35);
  margin-right:-30px;
  animation:tapNudge 3.2s ease-in-out infinite;
}
.tap-card-vis .mini-chip{
  position:absolute;left:50%;top:34px;transform:translateX(-50%);
  width:30px;height:22px;border-radius:5px;
  background:linear-gradient(135deg,rgba(255,255,255,.85),rgba(255,255,255,.35));
}
.tap-card-vis .mini-name{
  position:absolute;left:0;right:0;bottom:18px;text-align:center;font-size:.6rem;font-weight:900;color:#fff;
}
@keyframes tapNudge{
  0%,100%{transform:translateX(0);}
  50%{transform:translateX(-10px);}
}
.tap-ripple{
  position:absolute;left:0;top:50%;width:40px;height:40px;border-radius:50%;
  border:2px solid rgba(27,141,246,.6);transform:translate(-50%,-50%) scale(.3);opacity:0;
}
.tap-demo.go .tap-ripple{animation:tapRipple 1.8s ease-out infinite;}
@keyframes tapRipple{0%{transform:translate(-50%,-50%) scale(.3);opacity:.8;}100%{transform:translate(-50%,-50%) scale(2.4);opacity:0;}}
.tap-demo-note{text-align:center;font-size:.82rem;color:#7fa6cc;margin-top:1.4rem;}

/* ============================================================
   GOOGLE REVIEW ENGINE — the friction chain
   ============================================================ */
.gengine{position:relative;overflow:clip;}
.gengine::before{
  content:"G";position:absolute;right:-3%;top:-8%;z-index:0;pointer-events:none;
  font-size:clamp(12rem,30vw,26rem);font-weight:900;line-height:1;
  color:transparent;-webkit-text-stroke:1.5px rgba(66,133,244,.08);
}
.gengine .wrap{position:relative;z-index:1;}
.chain{
  display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem;margin-top:2.6rem;align-items:stretch;
}
.chain-step{
  border:1px solid rgba(127,166,204,.18);border-radius:16px;padding:1.4rem 1rem;
  background:rgba(21,39,65,.45);text-align:center;position:relative;
  transition:transform .3s ease,border-color .3s ease;
}
.chain-step:hover{transform:translateY(-5px);border-color:rgba(66,133,244,.5);}
.chain-step .ci{
  width:48px;height:48px;border-radius:50%;margin:0 auto .8rem;
  display:flex;align-items:center;justify-content:center;font-size:1.4rem;
  background:rgba(66,133,244,.12);color:#4285F4;
}
.chain-step h4{margin:0 0 .35rem;font-size:.98rem;}
.chain-step p{margin:0;font-size:.78rem;color:#9db8d6;line-height:1.4;}
.chain-step .cn{
  position:absolute;top:8px;left:10px;font-size:.7rem;font-weight:900;color:rgba(127,166,204,.4);
}
.chain-arrow{display:flex;align-items:center;justify-content:center;color:rgba(66,133,244,.55);font-size:1.3rem;}
@media(max-width:860px){
  .chain{grid-template-columns:1fr;gap:.5rem;}
  .chain-arrow{transform:rotate(90deg);padding:.2rem 0;}
}

/* dashboard / leaderboard */
.board{
  margin-top:2.6rem;border:1px solid rgba(127,166,204,.2);border-radius:20px;overflow:hidden;
  background:rgba(13,27,48,.7);max-width:680px;margin-left:auto;margin-right:auto;
}
.board-bar{
  display:flex;align-items:center;gap:.5rem;padding:.85rem 1.2rem;
  border-bottom:1px solid rgba(127,166,204,.16);background:rgba(10,19,34,.6);
}
.board-bar .bdot{width:11px;height:11px;border-radius:50%;}
.board-bar .bdot.r{background:#ed6a5e;}.board-bar .bdot.y{background:#f4bf4f;}.board-bar .bdot.g{background:#61c554;}
.board-bar .btitle{margin-left:.6rem;font-size:.82rem;font-weight:700;color:#9db8d6;}
.board-bar .blive{margin-left:auto;font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#2fbf71;display:flex;align-items:center;gap:.35rem;}
.board-bar .blive::before{content:"";width:7px;height:7px;border-radius:50%;background:#2fbf71;animation:livePulse 1.6s ease-in-out infinite;}
@keyframes livePulse{0%,100%{opacity:1;}50%{opacity:.3;}}
.board-row{
  display:grid;grid-template-columns:34px 1fr 90px 64px;gap:1rem;align-items:center;
  padding:.85rem 1.2rem;border-bottom:1px solid rgba(127,166,204,.1);
}
.board-row:last-child{border-bottom:none;}
.board-row .rank{font-weight:900;font-size:1rem;color:#7fa6cc;text-align:center;}
.board-row.lead .rank{color:#FBBC05;}
.board-row .emp{display:flex;align-items:center;gap:.7rem;}
.board-row .emp .av{
  width:30px;height:30px;border-radius:50%;flex:0 0 auto;
  background:linear-gradient(135deg,#1b8df6,#0044ff);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.8rem;
}
.board-row .emp b{font-size:.9rem;}
.board-track{height:8px;border-radius:999px;background:rgba(127,166,204,.14);overflow:hidden;}
.board-track i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#4285F4,#34A853);width:0;transition:width 1.2s cubic-bezier(.22,1,.36,1);}
.board.in .board-track i{width:var(--w);}
.board-row .cnt{text-align:right;font-weight:900;font-size:.95rem;color:#cfe3f7;}
.board-row .cnt small{font-size:.6rem;font-weight:700;color:#7fa6cc;display:block;letter-spacing:.06em;}
.board-foot{padding:1rem 1.2rem;font-size:.82rem;color:#7fa6cc;text-align:center;background:rgba(10,19,34,.4);}
.board-foot b{color:#7fc1ff;}

/* ============================================================
   NAME BADGE GALLERY — fun + AI personas
   ============================================================ */
.badge-zone{position:relative;}
.badge-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-top:2.5rem;}
.badge{
  border-radius:18px;padding:1.5rem 1.2rem;text-align:center;position:relative;overflow:hidden;
  border:1px solid rgba(127,166,204,.2);
  background:linear-gradient(170deg, rgba(27,141,246,.1), rgba(21,39,65,.5));
  transition:transform .35s ease,box-shadow .35s ease;
}
.badge:hover{transform:translateY(-6px) rotate(-1deg);box-shadow:0 24px 50px rgba(27,141,246,.25);}
.badge .face{
  width:84px;height:84px;border-radius:50%;margin:0 auto .9rem;
  display:flex;align-items:center;justify-content:center;font-size:2.4rem;
  background:rgba(27,141,246,.14);border:2px solid rgba(27,141,246,.35);
}
.badge .bn{font-weight:900;font-size:1.05rem;margin-bottom:.15rem;}
.badge .br{font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#7fa6cc;}
.badge .bdream{
  margin-top:.7rem;font-size:.76rem;color:#9db8d6;font-style:italic;line-height:1.4;
}
.badge .b-chip{
  position:absolute;right:12px;bottom:12px;width:20px;height:16px;border-radius:4px;
  background:linear-gradient(135deg,rgba(255,255,255,.7),rgba(255,255,255,.3));
}
.badge .b-nfc{
  position:absolute;left:12px;top:12px;font-size:.85rem;color:rgba(27,141,246,.7);
}
.badge-cap{text-align:center;font-size:.9rem;color:#9db8d6;margin-top:2rem;max-width:60ch;margin-left:auto;margin-right:auto;line-height:1.55;}
@media(max-width:860px){.badge-grid{grid-template-columns:repeat(2,1fr);}}

/* ---------- real badge strip (Big Dog crew, 20260702) ---------- */
.badge-strip{overflow:hidden;position:relative;margin-top:2.4rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
.badge-track{display:flex;width:max-content;animation:badgeScroll 55s linear infinite;will-change:transform;transform:translateZ(0);}
.badge-track img{margin-right:1.1rem;}
.badge-strip:hover .badge-track{animation-play-state:paused;}
.badge-track img{width:168px;height:auto;border-radius:14px;
  box-shadow:0 14px 34px rgba(0,0,0,.45);border:1px solid rgba(127,166,204,.16);}
@keyframes badgeScroll{to{transform:translateX(-50%);}}
.badge-back-row{display:flex;align-items:center;justify-content:center;gap:2rem;
  flex-wrap:wrap;margin-top:2.6rem;}
.badge-back-row img{width:190px;height:auto;border-radius:14px;
  box-shadow:0 14px 34px rgba(0,0,0,.45);border:1px solid rgba(127,166,204,.16);
  transform:rotate(-3deg);}
.badge-back-tx{max-width:34ch;}
.badge-back-tx h3{margin:0 0 .5rem;font-size:1.15rem;}
.badge-back-tx p{margin:0;color:#9db8d6;font-size:.95rem;line-height:1.6;}
@media(prefers-reduced-motion:reduce){
  .badge-strip{overflow-x:auto;mask-image:none;-webkit-mask-image:none;}
  .badge-track{animation:none;}
}

/* ============================================================
   v3 REDESIGN (20260702) — warm atmo + toolkit + real product
   photography, studied from shmocard.com
   ============================================================ */

/* hero: real floating product photo, mascot presenting from the corner */
.sc-hero-product{
  position:relative;z-index:1;width:min(460px,100%);height:auto;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.5));
  animation:scProdFloat 8s ease-in-out infinite;
}
@keyframes scProdFloat{
  0%,100%{transform:translateY(0) rotate(-1deg);}
  50%{transform:translateY(-14px) rotate(1.2deg);}
}
.sc-stage .sc-mascot.sc-mascot-corner{
  position:absolute;z-index:2;right:-6px;bottom:-18px;width:min(150px,34%);
  transform:rotate(6deg);
}

/* ---------- the toolkit: mascot line-up ---------- */
.toolkit-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-top:2.6rem;
}
.tool-card{
  position:relative;border:1px solid rgba(127,166,204,.18);border-radius:20px;
  background:linear-gradient(180deg, rgba(30,41,59,.5), rgba(15,26,44,.7));
  padding:1.6rem 1.3rem 1.4rem;text-align:center;overflow:hidden;
  transition:transform .3s ease,border-color .3s ease;
}
.tool-card:hover{transform:translateY(-5px);border-color:rgba(255,150,70,.45);}
.tool-card img{width:110px;height:110px;object-fit:contain;margin:0 auto .9rem;display:block;}
.tool-card h3{margin:.2rem 0 .35rem;font-size:1.05rem;}
.tool-card p{margin:0;font-size:.85rem;color:#9db8d6;line-height:1.5;}
.tool-pill{
  position:absolute;top:.9rem;right:.9rem;
  font-size:.6rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:.28rem .6rem;border-radius:999px;
}
.tool-pill.live{background:rgba(53,208,127,.15);color:#5ce09b;border:1px solid rgba(53,208,127,.4);}
.tool-pill.live::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:#35d07f;margin-right:.35rem;vertical-align:1px;animation:livePulse 2.4s ease-in-out infinite;}
@keyframes livePulse{0%,100%{opacity:1;}50%{opacity:.35;}}
.tool-pill.soon{background:rgba(255,150,70,.12);color:#ffb27d;border:1px solid rgba(255,150,70,.35);}
.tool-card.is-soon img{filter:saturate(.55);opacity:.85;}
@media(max-width:960px){.toolkit-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.toolkit-grid{grid-template-columns:1fr 1fr;gap:.8rem;}
  .tool-card{padding:1.1rem .8rem 1rem;}
  .tool-card img{width:80px;height:80px;}
  .tool-card p{font-size:.78rem;}
}

/* format cards: real photos, warmer hover */
.fmt-visual img.fmt-photo{max-height:150px;max-width:92%;border-radius:10px;}
.fmt-card:hover{border-color:rgba(255,150,70,.5);}

@media(prefers-reduced-motion:reduce){
  .sc-hero-product{animation:none;}
  .tool-pill.live::before{animation:none;}
}


/* very small phones: copy leads, stage compacts below (h1 stays in the fold) */
@media(max-width:400px){
  .sc-stage{order:0;min-height:200px;}
  .sc-mascot{width:min(160px,50%);}
  .sc-hero-product{width:min(300px,94%);}
}