:root{--bg:#070707;--panel:#111;--text:#fff;--muted:#aaa;--orange:#ff7100;--orange2:#ff9a2f;--line:#252525}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Heebo,Arial,sans-serif;overflow-x:hidden}.noise{position:fixed;inset:0;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");z-index:99}.topbar{position:fixed;top:18px;left:50%;transform:translateX(-50%);width:min(1180px,calc(100% - 28px));height:72px;border:1px solid #2a2a2a;background:#0b0b0bd9;backdrop-filter:blur(14px);border-radius:22px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;z-index:50}.brand{display:flex;align-items:center;gap:10px;color:white;text-decoration:none;font-weight:900}.brand img{width:48px;height:48px;border-radius:50%}.topbar nav{display:flex;gap:26px}.topbar nav a{color:#bbb;text-decoration:none;font-weight:700}.topbar nav a:hover{color:#fff}.btn{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--orange),var(--orange2));color:#111;text-decoration:none;font-weight:900;border-radius:14px;padding:15px 24px;box-shadow:0 12px 36px #ff710033;transition:.25s;border:0}.btn:hover{transform:translateY(-3px);box-shadow:0 16px 44px #ff710055}.btn-small{padding:10px 18px}.btn-ghost{background:#151515;color:#fff;border:1px solid #333;box-shadow:none}.btn-light{background:#fff;color:#111}.section{width:min(1180px,calc(100% - 32px));margin:auto;padding:110px 0}.hero{min-height:860px;padding-top:170px;display:grid;grid-template-columns:1.08fr .92fr;align-items:center;gap:40px;position:relative}.hero-glow{position:absolute;width:660px;height:660px;background:radial-gradient(circle,#ff71002b,transparent 67%);left:-200px;top:60px;filter:blur(10px)}.eyebrow,.section-heading span,.cta span{color:var(--orange2);font-weight:900;letter-spacing:.06em}.hero h1{font-size:clamp(58px,8vw,112px);line-height:.86;margin:20px 0 28px;letter-spacing:-.055em}.hero h1 span{color:transparent;-webkit-text-stroke:1px #777}.hero-lead{font-size:22px;line-height:1.7;color:#c7c7c7;max-width:720px}.hero-actions{display:flex;gap:12px;margin:34px 0}.trust-row{display:flex;gap:22px;flex-wrap:wrap;color:#aaa}.hero-visual{position:relative;display:grid;place-items:center;min-height:560px}.logo-orbit{width:min(460px,90vw);aspect-ratio:1;border-radius:50%;padding:12px;background:linear-gradient(145deg,#ff7b00,#1b1b1b 30%,#ff7b00 70%,#111);animation:float 5s ease-in-out infinite;box-shadow:0 0 100px #ff71002d}.logo-orbit img{width:100%;height:100%;object-fit:cover;border-radius:50%}.floating-card{position:absolute;background:#111e;border:1px solid #333;border-radius:16px;padding:14px 18px;font-weight:800;backdrop-filter:blur(12px);box-shadow:0 18px 60px #000}.fc1{top:80px;right:-10px}.fc2{bottom:85px;left:-12px}.fc3{bottom:30px;right:30px}.ticker{overflow:hidden;border-block:1px solid #272727;background:#0d0d0d;transform:rotate(-1deg);width:102%;margin-right:-1%}.ticker-track{display:flex;gap:32px;white-space:nowrap;width:max-content;padding:17px 0;font-size:22px;font-weight:900;animation:ticker 24s linear infinite}.ticker i{width:8px;height:8px;background:var(--orange);border-radius:50%;align-self:center}.section-heading h2{font-size:clamp(46px,6vw,82px);line-height:.98;margin:14px 0 18px;letter-spacing:-.04em}.section-heading p{color:#aaa;font-size:18px}.center{text-align:center}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}.about-media img{width:100%;border-radius:26px;box-shadow:0 35px 100px #000;border:1px solid #222}.about-copy>p{font-size:22px;color:#c6c6c6;line-height:1.8}.feature-list article{display:grid;grid-template-columns:60px 1fr;gap:18px;padding:22px 0;border-bottom:1px solid var(--line)}.feature-list b{color:var(--orange);font-size:30px}.feature-list h3{margin:0 0 5px;font-size:22px}.feature-list p{margin:0;color:#999}.stats{display:grid;grid-template-columns:repeat(4,1fr);padding:45px 0;border-block:1px solid var(--line)}.stat{text-align:center;border-left:1px solid var(--line)}.stat:last-child{border:0}.stat strong{display:block;font-size:58px;color:var(--orange2)}.stat span{color:#aaa}.plans{background:radial-gradient(circle at 50% 20%,#ff710016,transparent 35%)}.plan-toggle{display:flex;margin:35px auto;width:max-content;padding:5px;background:#111;border:1px solid #2a2a2a;border-radius:14px}.plan-toggle button{border:0;background:transparent;color:#aaa;padding:10px 26px;font:inherit;font-weight:900;border-radius:10px;cursor:pointer}.plan-toggle .active{background:var(--orange);color:#111}.plans-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.plan-card{position:relative;background:linear-gradient(180deg,#151515,#0d0d0d);border:1px solid #292929;border-radius:26px;padding:32px;min-height:560px;display:flex;flex-direction:column}.plan-card.featured{border-color:#ff7100;transform:translateY(-18px);box-shadow:0 25px 80px #ff710020}.plan-card.vip{background:linear-gradient(180deg,#211303,#0d0d0d)}.badge{position:absolute;top:15px;left:15px;background:var(--orange);color:#111;padding:7px 12px;border-radius:999px;font-size:13px;font-weight:900}.plan-icon{font-size:34px}.plan-card h3{font-size:29px;margin:18px 0}.price{display:flex;align-items:flex-start;gap:5px}.price b{font-size:72px;line-height:1}.price small{font-size:24px}.plan-card ul{list-style:none;padding:0;margin:30px 0;flex:1}.plan-card li{padding:12px 0;border-bottom:1px solid #252525;color:#c9c9c9}.plan-card li:before{content:'✓';color:var(--orange);margin-left:10px}.full{width:100%}.wins{overflow:hidden}.wins-slider{position:relative}.wins-track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:20px 58px}.wins-track::-webkit-scrollbar{display:none}.wins-track img{width:310px;aspect-ratio:9/16;object-fit:cover;border-radius:22px;border:1px solid #333;scroll-snap-align:center;transition:.3s}.wins-track img:hover{transform:translateY(-8px) rotate(-1deg)}.slider-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:48px;height:48px;border-radius:50%;border:1px solid #444;background:#111;color:#fff;font-size:35px;cursor:pointer}.prev{right:0}.next{left:0}.process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.process-grid article{padding:34px;border:1px solid var(--line);border-radius:24px;background:#0e0e0e}.process-grid b{font-size:64px;color:#ff710033}.process-grid h3{font-size:26px;margin:0}.process-grid p{color:#999}.faq{display:grid;grid-template-columns:.75fr 1.25fr;gap:70px}.accordion details{border-bottom:1px solid #2a2a2a;padding:24px 0}.accordion summary{cursor:pointer;font-size:22px;font-weight:800}.accordion p{color:#aaa;line-height:1.8}.cta{background:linear-gradient(135deg,#ff6a00,#ff9a2f);color:#111;border-radius:34px;padding:70px;display:flex;align-items:center;justify-content:space-between;margin-bottom:100px}.cta span{color:#111}.cta h2{font-size:clamp(42px,6vw,76px);line-height:1;margin:10px 0 0}footer{text-align:center;padding:55px 20px;border-top:1px solid #222;color:#888}footer img{width:84px;border-radius:50%}footer small{display:block;margin-top:10px}.reveal{opacity:0;transform:translateY(32px);transition:opacity .8s ease,transform .8s ease}.reveal.visible{opacity:1;transform:none}@keyframes float{50%{transform:translateY(-18px) rotate(1deg)}}@keyframes ticker{to{transform:translateX(50%)}}@media(max-width:900px){.topbar nav{display:none}.hero{grid-template-columns:1fr;text-align:center}.hero-copy{order:2}.hero-visual{min-height:430px}.trust-row,.hero-actions{justify-content:center}.about-grid,.faq{grid-template-columns:1fr}.stats{grid-template-columns:1fr 1fr;gap:30px}.plans-grid{grid-template-columns:1fr}.plan-card.featured{transform:none}.process-grid{grid-template-columns:1fr}.cta{margin-inline:16px;flex-direction:column;gap:30px;text-align:center}.section{padding:80px 0}}@media(max-width:560px){.hero h1{font-size:55px}.hero-lead{font-size:18px}.logo-orbit{width:310px}.floating-card{font-size:13px}.stats{grid-template-columns:1fr}.stat{border-left:0;border-bottom:1px solid #222;padding:20px}.wins-track img{width:76vw}.cta{padding:44px 22px}.topbar .brand span{display:none}}

/* Proof galleries — v2 */
.proof-section{width:100%;max-width:none;position:relative;overflow:hidden}.proof-section>.section-heading{width:min(1180px,calc(100% - 32px));margin-inline:auto}.proof-marquee{margin-top:48px;display:grid;gap:22px;position:relative}.proof-marquee:before,.proof-marquee:after{content:"";position:absolute;top:0;bottom:0;width:10vw;z-index:3;pointer-events:none}.proof-marquee:before{right:0;background:linear-gradient(90deg,transparent,var(--bg))}.proof-marquee:after{left:0;background:linear-gradient(-90deg,transparent,var(--bg))}.proof-row{overflow:hidden;padding:8px 0}.proof-track{display:flex;width:max-content;gap:20px;animation:proofMove 50s linear infinite;will-change:transform}.proof-row-right .proof-track{animation-direction:reverse;animation-duration:56s}.proof-row-slow .proof-track{animation-duration:64s}.proof-row:hover .proof-track{animation-play-state:paused}.proof-track img{width:300px;aspect-ratio:9/16;object-fit:cover;border-radius:22px;border:1px solid #383838;box-shadow:0 20px 54px #000b,0 0 0 1px #ff71000d;cursor:zoom-in;transition:transform .35s ease,filter .35s ease,border-color .35s ease,box-shadow .35s ease;filter:saturate(.9) brightness(.9)}.proof-track img:hover{transform:translateY(-9px) scale(1.035);filter:saturate(1.08) brightness(1.03);border-color:#ff8a2d;box-shadow:0 26px 70px #000,0 0 38px #ff710033;z-index:2}.hits{padding-top:90px;background:radial-gradient(circle at 50% 45%,#ff710014,transparent 36%)}.hits-glow{position:absolute;inset:22% 12% auto;height:340px;background:radial-gradient(ellipse,#ff710018,transparent 68%);filter:blur(20px);pointer-events:none}.hits-marquee{transform:rotate(-.35deg);width:102%;margin-right:-1%}.proof-hint{text-align:center;color:#777;margin:32px 0 0;font-size:15px}.lightbox[hidden]{display:none}.lightbox{position:fixed;inset:0;background:#000e;z-index:1000;display:grid;place-items:center;padding:28px;backdrop-filter:blur(12px);animation:lightboxIn .2s ease}.lightbox img{max-width:min(520px,92vw);max-height:91vh;border-radius:20px;box-shadow:0 30px 120px #000,0 0 60px #ff71002c}.lightbox-close{position:fixed;top:22px;left:25px;border:1px solid #555;background:#151515;color:#fff;width:48px;height:48px;border-radius:50%;font-size:32px;line-height:1;cursor:pointer}@keyframes proofMove{to{transform:translateX(50%)}}@keyframes lightboxIn{from{opacity:0}to{opacity:1}}@media(max-width:700px){.proof-track{gap:12px}.proof-track img{width:68vw;border-radius:18px}.proof-marquee{gap:12px;margin-top:32px}.proof-marquee:before,.proof-marquee:after{width:7vw}.hits{padding-top:65px}.proof-row-slow .proof-track{animation-duration:48s}}@media(prefers-reduced-motion:reduce){.proof-track{animation-play-state:paused}.proof-track img{transition:none}}

/* Clear visual separation between proof categories */
.proof-section{position:relative;isolation:isolate}
.proof-section + .proof-section{margin-top:28px;border-top:1px solid rgba(255,255,255,.09);padding-top:110px}
.proof-section + .proof-section::before{content:"";position:absolute;top:-1px;left:8%;right:8%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,122,0,.9),transparent);box-shadow:0 0 28px rgba(255,122,0,.65)}
.proof-category-label{width:max-content;margin:0 0 22px auto;padding:9px 18px;border-radius:999px;font-weight:900;font-size:.92rem;letter-spacing:.02em;border:1px solid rgba(255,255,255,.13);backdrop-filter:blur(10px);box-shadow:0 10px 35px rgba(0,0,0,.28)}
.wins-label{color:#fff;background:linear-gradient(135deg,rgba(255,106,0,.94),rgba(255,54,0,.82));box-shadow:0 10px 35px rgba(255,90,0,.22)}
.hits-label{margin-left:auto;margin-right:auto;color:#151515;background:linear-gradient(135deg,#ffd84d,#ff9d00);box-shadow:0 10px 35px rgba(255,174,0,.24)}
#wins .section-heading p,#hits .section-heading p{max-width:720px}
#wins .proof-marquee{margin-top:34px}
#hits .proof-marquee{margin-top:38px}
@media(max-width:700px){.proof-section + .proof-section{padding-top:82px}.proof-category-label{margin-bottom:16px}.wins-label{margin-right:auto}.proof-category-label{font-size:.82rem}}

/* Hero refinement — v5 */
.hero-visual{display:flex;align-items:flex-end;justify-content:center;overflow:visible}
.hero-character{position:relative;width:min(620px,48vw);height:560px;display:flex;align-items:flex-end;justify-content:center;animation:characterFloat 5.5s ease-in-out infinite;filter:drop-shadow(0 28px 45px rgba(0,0,0,.72)) drop-shadow(0 0 32px rgba(255,113,0,.18));z-index:1}
.hero-character::before{content:"";position:absolute;left:50%;bottom:10px;transform:translateX(-50%);width:76%;height:52%;background:radial-gradient(ellipse,rgba(255,113,0,.22),transparent 68%);filter:blur(28px);z-index:-1;pointer-events:none}
.hero-character img{display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom}
.hero-lead strong{display:inline-block;margin-top:8px;color:#fff;font-weight:900}
.hero-actions{flex-wrap:wrap}
.hero-actions .btn{background:linear-gradient(135deg,#ff6a00,#ff972f);color:#111;border-color:transparent;box-shadow:0 10px 30px rgba(255,113,0,.16)}
.hero-actions .btn:hover{transform:translateY(-3px);box-shadow:0 16px 38px rgba(255,113,0,.28)}
@keyframes characterFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}
@media(max-width:900px){.hero-character{width:min(560px,88vw);height:470px}.hero-visual{min-height:470px}}
@media(max-width:560px){.hero-character{width:96vw;height:390px}.hero-visual{min-height:400px}.hero-actions .btn{min-width:calc(50% - 8px)}.hero-actions .btn:first-child{min-width:100%}}

/* Hero final refinement — v6 */
.hero{grid-template-columns:1fr 1fr;gap:20px}
.hero-copy{position:relative;z-index:2}
.hero h1{font-size:clamp(56px,7.2vw,104px);line-height:.91}
.hero-lead span{display:inline-block}
.hero-visual{min-height:650px;align-self:end}
.hero-character{width:min(760px,56vw);height:650px}
.hero-character img{object-fit:contain;object-position:center bottom}
@media(max-width:900px){
  .hero{grid-template-columns:1fr}
  .hero-visual{min-height:560px}
  .hero-character{width:min(680px,94vw);height:560px}
}
@media(max-width:560px){
  .hero h1{font-size:50px;line-height:.94}
  .hero-visual{min-height:450px}
  .hero-character{width:104vw;height:450px}
}

/* Hero typography alignment — v7 */
@media (min-width: 901px){
  .hero{grid-template-columns:1.22fr .78fr;gap:24px}
  .hero-copy{min-width:0}
  .hero h1{font-size:clamp(54px,6.1vw,88px);line-height:.94;letter-spacing:-.05em}
  .hero-title-line{display:block;white-space:nowrap}
  .hero-title-solid{color:#fff;-webkit-text-stroke:0}
  .hero-title-outline{color:transparent;-webkit-text-stroke:1px #777}
  .hero-lead{font-size:20px;line-height:1.75;max-width:none}
  .hero-copy-line{display:block;white-space:nowrap}
}
@media (max-width: 900px){
  .hero-title-line,.hero-copy-line{display:block}
}

/* Hero final refinements */
.hero h1 .hero-title-solid{
  color:#fff;
  -webkit-text-stroke:0;
  text-shadow:none;
}
.hero-actions{
  display:flex;
  flex-wrap:nowrap;
  align-items:stretch;
  gap:12px;
}
.hero-actions .btn{
  flex:1 1 0;
  min-width:0;
  white-space:nowrap;
  padding-inline:18px;
}
::selection{
  background:#ff7100;
  color:#111;
}
::-moz-selection{
  background:#ff7100;
  color:#111;
}

@media(max-width:700px){
  .hero-actions{
    flex-wrap:wrap;
  }
  .hero-actions .btn{
    flex:1 1 calc(50% - 6px);
  }
}

/* Hero ticker placement and continuous loop — v10 */
.hero-ticker{
  margin-top:112px;
  transform:none;
  width:100%;
  margin-right:0;
}
.hero-ticker + .hero{
  padding-top:72px;
}
.hero-ticker .ticker-track{
  display:flex;
  gap:0;
  width:max-content;
  padding:0;
  direction:ltr;
  animation:none;
  will-change:transform;
}
.hero-ticker .ticker-group{
  display:flex;
  flex:none;
  align-items:center;
  gap:24px;
  padding:11px 12px;
  white-space:nowrap;
  direction:rtl;
  font-size:18px;
  line-height:1.15;
  font-weight:900;
}
.hero-ticker .ticker-group i{
  flex:0 0 6px;
  width:6px;
  height:6px;
  background:var(--orange);
  border-radius:50%;
}
@media(max-width:900px){
  .hero-ticker{margin-top:104px}
  .hero-ticker + .hero{padding-top:54px}
  .hero-ticker .ticker-group{font-size:15px;gap:18px;padding:9px 10px}
  .hero-ticker .ticker-group i{width:5px;height:5px;flex-basis:5px}
}


/* Continuous hero ticker — v12 (requestAnimationFrame, no CSS restart) */
.hero-ticker .ticker-track{
  transform:translate3d(0,0,0);
  animation:none !important;
}

}

/* Seamless ticker recycling — v13 */
.hero-ticker{overflow:hidden;}
.hero-ticker .ticker-track{
  display:flex;
  flex-wrap:nowrap;
  gap:0;
  width:max-content;
  animation:none !important;
  transform:translate3d(0,0,0);
  will-change:transform;
}
.hero-ticker .ticker-group{
  flex:0 0 auto;
}


/* Truly seamless hero ticker — v14
   Two identical groups move together by exactly one group width.
   The animation restarts on a visually identical frame, so no jump is visible. */
.hero-ticker{
  overflow:hidden;
}
.hero-ticker .ticker-track{
  display:flex;
  flex-wrap:nowrap;
  gap:0;
  width:max-content;
  padding:0;
  direction:ltr;
  transform:translate3d(0,0,0);
  animation:heroTickerSeamless 30s linear infinite !important;
  will-change:transform;
}
.hero-ticker .ticker-group{
  display:flex;
  flex:0 0 auto;
  align-items:center;
  gap:24px;
  padding:11px 12px;
  white-space:nowrap;
  direction:rtl;
}
@keyframes heroTickerSeamless{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}
@media(max-width:900px){
  .hero-ticker .ticker-track{animation-duration:24s !important}
}
@media(prefers-reduced-motion:reduce){
  .hero-ticker .ticker-track{animation-play-state:paused !important}
}

/* Truly continuous hero ticker — v15
   JavaScript recycles whole identical groups after they are fully outside the viewport. */
.hero-ticker .ticker-track{
  animation:none !important;
  transform:translate3d(0,0,0);
  will-change:transform;
}


/* Individual-item infinite ticker — v16 */
.hero-ticker{
  position:relative;
  height:43px;
  overflow:hidden;
}
.hero-ticker .ticker-track.ticker-items-track{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  padding:0;
  transform:none !important;
  animation:none !important;
  direction:ltr;
}
.hero-ticker .ticker-text-item,
.hero-ticker .ticker-dot-item{
  position:absolute;
  top:50%;
  left:0;
  display:block;
  flex:none;
  white-space:nowrap;
  will-change:transform;
}
.hero-ticker .ticker-text-item{
  direction:rtl;
  font-size:18px;
  line-height:1;
  font-weight:900;
  color:#fff;
}
.hero-ticker .ticker-dot-item{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--orange);
}
@media(max-width:900px){
  .hero-ticker{height:37px}
  .hero-ticker .ticker-text-item{font-size:15px}
  .hero-ticker .ticker-dot-item{width:5px;height:5px}
}

/* Mobile navigation and primary actions — v17 */
@media (max-width: 900px){
  .topbar{
    top:10px;
    width:calc(100% - 20px);
    height:106px;
    padding:10px 12px 9px;
    border-radius:20px;
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-rows:48px 34px;
    column-gap:12px;
    row-gap:5px;
  }
  .topbar .brand{
    grid-column:1;
    grid-row:1;
    justify-self:start;
    min-width:0;
  }
  .topbar .brand img{
    width:44px;
    height:44px;
  }
  .topbar .brand span{
    display:inline;
    font-size:16px;
  }
  .topbar .btn-small{
    grid-column:2;
    grid-row:1;
    min-height:44px;
    padding:0 19px;
    border-radius:13px;
    font-size:15px;
    box-shadow:0 8px 26px rgba(255,113,0,.34);
  }
  .topbar nav{
    grid-column:1 / -1;
    grid-row:2;
    display:flex;
    width:100%;
    gap:6px;
    overflow-x:auto;
    scrollbar-width:none;
    padding:0 1px;
    scroll-snap-type:x proximity;
  }
  .topbar nav::-webkit-scrollbar{display:none}
  .topbar nav a{
    flex:1 0 auto;
    min-width:72px;
    height:34px;
    padding:0 12px;
    border:1px solid #292929;
    border-radius:10px;
    background:#121212;
    color:#e7e7e7;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
    font-weight:800;
    scroll-snap-align:center;
  }
  .topbar nav a:active{
    background:#1d1d1d;
    border-color:#ff7100;
  }
  .hero-ticker{margin-top:126px}
}

@media (max-width: 700px){
  .hero-actions{
    width:min(100%,520px);
    margin:28px auto 0;
    gap:10px;
  }
  .hero-actions .btn{
    min-height:54px;
    padding:14px 16px;
    border-radius:14px;
    font-size:16px;
    line-height:1.15;
    box-shadow:0 10px 28px rgba(255,113,0,.24);
  }
  .hero-actions .btn:first-child{
    flex:1 0 100%;
  }
  .hero-actions .btn:not(:first-child){
    flex:1 1 calc(50% - 5px);
  }
}

@media (max-width: 430px){
  .topbar{
    width:calc(100% - 14px);
    padding-inline:9px;
  }
  .topbar .brand span{font-size:15px}
  .topbar .btn-small{
    padding-inline:16px;
    font-size:14px;
  }
  .topbar nav a{
    min-width:68px;
    padding-inline:10px;
    font-size:13.5px;
  }
  .hero-actions .btn{
    min-height:56px;
    font-size:16px;
  }
}

/* Mobile header layout fix — v18 */
@media (max-width: 900px){
  .topbar{
    top:10px;
    left:10px;
    right:10px;
    transform:none;
    width:auto;
    height:auto;
    min-height:138px;
    padding:10px;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-rows:48px auto;
    gap:9px 10px;
    border-radius:18px;
    overflow:hidden;
  }
  .topbar .brand{
    grid-column:1;
    grid-row:1;
    justify-self:start;
    max-width:100%;
  }
  .topbar .btn-small{
    grid-column:2;
    grid-row:1;
    justify-self:end;
    min-width:104px;
    white-space:nowrap;
  }
  .topbar nav{
    grid-column:1 / -1;
    grid-row:2;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    width:100%;
    gap:6px;
    overflow:visible;
    padding:0;
  }
  .topbar nav a{
    min-width:0;
    width:100%;
    height:39px;
    padding:0 5px;
    font-size:14px;
    white-space:nowrap;
  }
  .hero-ticker{
    margin-top:158px;
    width:100%;
    margin-right:0;
    transform:none;
    position:relative;
    z-index:1;
  }
}

@media (max-width: 430px){
  .topbar{
    left:7px;
    right:7px;
    width:auto;
    padding:9px;
  }
  .topbar .brand img{width:42px;height:42px}
  .topbar .brand span{font-size:15px}
  .topbar .btn-small{
    min-width:96px;
    padding-inline:13px;
    font-size:14px;
  }
  .topbar nav{gap:5px}
  .topbar nav a{
    min-width:0;
    padding-inline:3px;
    font-size:13px;
  }
  .hero-ticker{margin-top:155px}
}

/* Mobile header flow and full-width ticker fix — v19 */
@media (max-width: 900px){
  html,body{
    width:100%;
    max-width:100%;
    overflow-x:clip;
  }

  /* Keep the mobile header inside the normal document flow. This prevents
     fixed-position clipping and guarantees equal spacing on both sides. */
  .topbar{
    position:relative;
    top:auto;
    left:auto;
    right:auto;
    inset:auto;
    transform:none;
    width:calc(100% - 20px);
    max-width:620px;
    min-height:0;
    height:auto;
    margin:10px auto 0;
    padding:10px;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-rows:48px 42px;
    gap:9px 10px;
    overflow:visible;
  }

  .topbar .brand{
    min-width:0;
    justify-self:start;
  }

  .topbar .btn-small{
    justify-self:end;
    min-width:104px;
  }

  .topbar nav{
    width:100%;
    max-width:100%;
    min-width:0;
    grid-template-columns:repeat(4,minmax(0,1fr));
    overflow:hidden;
  }

  .topbar nav a{
    width:100%;
    min-width:0;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  /* The ticker now follows the header in normal flow and always spans the
     complete viewport, with no inherited offset or reduced width. */
  main{
    width:100%;
    max-width:100%;
    overflow-x:clip;
  }

  .hero-ticker{
    margin:10px 0 0;
    width:100%;
    max-width:100%;
    left:auto;
    right:auto;
    transform:none;
  }
}

@media (max-width: 430px){
  .topbar{
    width:calc(100% - 14px);
    margin-top:7px;
    padding:9px;
    grid-template-rows:46px 40px;
  }

  .topbar .btn-small{
    min-width:94px;
    padding-inline:12px;
  }

  .topbar nav a{
    font-size:12.5px;
    padding-inline:2px;
  }

  .hero-ticker{
    margin-top:8px;
  }
}

/* Mobile viewport containment — v20 */
@media (max-width: 900px){
  html,
  body{
    width:100%;
    max-width:100%;
    overflow-x:hidden !important;
  }

  body,
  main,
  header,
  section,
  footer{
    min-width:0;
    max-width:100%;
  }

  main{
    overflow-x:hidden !important;
  }

  .section{
    width:calc(100% - 28px);
    max-width:100%;
    margin-inline:auto;
  }

  .topbar{
    width:calc(100% - 20px);
    max-width:calc(100% - 20px);
    margin-inline:auto;
  }

  .hero{
    width:100%;
    padding-inline:14px;
    overflow:hidden;
  }

  .hero-copy,
  .hero-visual,
  .hero-character,
  .hero-character img{
    min-width:0;
    max-width:100%;
  }

  .hero-character{
    width:min(100%,560px) !important;
  }

  .hero h1,
  .hero-lead,
  .hero-title-line,
  .hero-copy-line{
    max-width:100%;
    white-space:normal;
    overflow-wrap:anywhere;
  }

  .hero-actions{
    width:100%;
    max-width:100%;
  }

  .hero-actions .btn{
    min-width:0 !important;
    max-width:100%;
  }

  .ticker,
  .hero-ticker,
  .hits-marquee{
    width:100% !important;
    max-width:100% !important;
    margin-inline:0 !important;
    transform:none !important;
    overflow:hidden !important;
  }

  .about-grid,
  .plans-grid,
  .process-grid,
  .faq,
  .stats,
  .cta,
  .proof-section,
  .proof-marquee,
  .proof-row{
    min-width:0;
    max-width:100%;
  }

  img,
  video,
  svg,
  canvas{
    max-width:100%;
    height:auto;
  }

  .plan-toggle{
    max-width:100%;
  }

  .proof-section > .section-heading{
    width:100%;
    max-width:100%;
    padding-inline:0;
  }
}

@media (max-width: 560px){
  .hero-character{
    width:100% !important;
    height:410px;
  }

  .hero h1{
    font-size:clamp(40px,11.5vw,50px);
  }

  .hero-actions .btn:first-child{
    width:100%;
    flex-basis:100%;
  }

  .hero-actions .btn:not(:first-child){
    flex-basis:calc(50% - 5px);
  }
}

/* Compact mobile hero — v21
   Keeps the complete opening message and CTA buttons inside the first phone viewport.
   Desktop styles remain unchanged. */
@media (max-width: 560px){
  .hero-ticker + .hero{
    min-height:calc(100svh - 176px);
    padding-top:16px;
    padding-bottom:24px;
  }

  .hero{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    align-content:start;
    gap:2px;
  }

  .hero-visual{
    min-height:285px !important;
    height:285px;
    margin:0;
    overflow:visible;
  }

  .hero-character{
    width:min(82vw,350px) !important;
    height:285px !important;
  }

  .hero-character::before{
    width:68%;
    height:45%;
    bottom:2px;
  }

  .hero-copy{
    margin-top:0;
  }

  .eyebrow{
    font-size:15px;
    line-height:1.2;
    margin-top:2px;
  }

  .hero h1{
    font-size:clamp(38px,10.5vw,45px);
    line-height:.92;
    margin:10px 0 14px;
    letter-spacing:-.045em;
  }

  .hero-title-outline{
    font-size:.93em;
  }

  .hero-lead{
    margin:0 auto;
    font-size:16px;
    line-height:1.48;
    max-width:390px;
  }

  .hero-lead strong{
    margin-top:5px;
  }

  .hero-actions{
    gap:9px;
    margin:18px 0 0;
  }

  .hero-actions .btn{
    min-height:52px;
    padding:12px 10px;
    border-radius:13px;
    font-size:15px;
    line-height:1.15;
  }
}

@media (max-width: 380px){
  .hero-ticker + .hero{
    padding-top:12px;
  }

  .hero-visual{
    min-height:255px !important;
    height:255px;
  }

  .hero-character{
    width:min(80vw,310px) !important;
    height:255px !important;
  }

  .hero h1{
    font-size:36px;
  }

  .hero-lead{
    font-size:15px;
  }

  .hero-actions .btn{
    min-height:48px;
    font-size:14px;
  }
}

/* Mobile horizontal-overflow lock — v22
   Keeps the compact v21 hero, while preventing any element from widening the page. */
@media (max-width: 900px){
  html{
    width:100%;
    max-width:100%;
    overflow-x:clip !important;
  }

  body{
    width:100%;
    max-width:100%;
    min-width:0;
    overflow-x:clip !important;
    position:relative;
  }

  body > header,
  body > main,
  body > footer,
  main > section,
  main > .hero-ticker{
    min-width:0;
    max-width:100%;
  }

  .topbar,
  .hero-ticker,
  .hero,
  .hero-copy,
  .hero-visual,
  .hero-actions{
    box-sizing:border-box;
    min-width:0;
  }

  .topbar{
    left:auto !important;
    right:auto !important;
    transform:none !important;
    max-width:calc(100% - 20px) !important;
  }

  .hero-ticker{
    position:relative;
    inset:auto;
    inline-size:100% !important;
    max-inline-size:100% !important;
    overflow:hidden !important;
    contain:paint;
  }

  .hero-ticker .ticker-track{
    position:relative;
    max-width:none !important;
  }

  .hero{
    inline-size:calc(100% - 28px) !important;
    max-inline-size:calc(100% - 28px) !important;
    padding-inline:0 !important;
    margin-inline:auto !important;
    overflow:hidden !important;
    contain:paint;
  }

  .hero-glow{
    max-width:100%;
    left:0;
    right:0;
    margin-inline:auto;
  }

  .hero-copy,
  .hero-visual{
    inline-size:100%;
    max-inline-size:100%;
    overflow:hidden;
  }

  .hero-character{
    max-inline-size:100% !important;
    margin-inline:auto;
  }

  .hero-character img{
    display:block;
    inline-size:100%;
    max-inline-size:100%;
  }

  .hero h1,
  .hero-lead,
  .hero-title-line,
  .hero-copy-line{
    inline-size:100%;
    max-inline-size:100%;
  }

  .hero-actions{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:9px;
    inline-size:100%;
    max-inline-size:100%;
  }

  .hero-actions .btn{
    inline-size:100% !important;
    min-inline-size:0 !important;
    max-inline-size:100% !important;
  }

  .hero-actions .btn:first-child{
    grid-column:1 / -1;
  }
}

@media (max-width: 560px){
  .hero{
    inline-size:calc(100% - 16px) !important;
    max-inline-size:calc(100% - 16px) !important;
  }
}


/* Mobile hero breathing room + updated brand label — v23 */
@media (max-width: 560px){
  /* Keeps the floating character clear of the ticker at the top of its animation. */
  .hero-ticker + .hero{
    padding-top:30px;
  }
}

@media (max-width: 380px){
  .hero-ticker + .hero{
    padding-top:25px;
  }
}

/* Mobile viewport containment — v32.1 */
html,body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  overscroll-behavior-x:none;
}
body{position:relative}
main,header,footer,section,.section,.hero,.about-grid,.about-copy,.about-media,.stats,.plans-grid,.process-grid,.faq,.cta{
  min-width:0;
  max-width:100%;
}
img,svg,video,canvas,iframe{
  max-width:100%;
}
.about-copy p,.stat span,.section-heading h2,.section-heading p{
  overflow-wrap:anywhere;
  word-break:normal;
}
@supports (overflow:clip){
  html,body{overflow-x:clip}
}
@media(max-width:900px){
  .hero,.about-grid,.faq,.plans-grid,.process-grid{width:100%}
  .hero-copy,.hero-visual,.about-copy,.about-media,.stat,.plan-card{min-width:0;max-width:100%}
  .hero-character{max-width:100%}
  .stats{width:100%}
  .topbar{max-width:calc(100% - 20px)}
}
@media(max-width:560px){
  .hero-character{width:100%;max-width:100%}
  .hero-actions{width:100%}
  .hero-actions .btn{white-space:normal}
  .stat strong{font-size:52px}
  .stat span{display:block;max-width:100%;padding-inline:8px}
}


/* Wins heading refinement — v32 */
#wins .section-heading h2{
  white-space:nowrap;
  max-width:100%;
  font-size:clamp(28px,8vw,82px);
}
@media(max-width:700px){
  #wins .section-heading{max-width:100%;overflow:visible}
  #wins .section-heading h2{letter-spacing:-.035em}
}

/* v32 — updated plan cards */
.plans-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.plan-card{
  min-width:0;
  transition:opacity .8s ease,transform .28s ease,box-shadow .28s ease,border-color .28s ease;
  will-change:transform;
}
.plan-icon{
  width:58px;
  height:58px;
  margin:0 auto 12px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.plan-icon img{
  display:block;
  width:54px;
  height:54px;
  max-width:100%;
  object-fit:contain;
}
.plan-card h3{
  margin-top:8px;
  text-align:center;
}
@media (hover:hover) and (pointer:fine){
  .plan-card:hover{
    transform:translateY(-8px) scale(1.025);
    border-color:#ff7100;
    box-shadow:0 0 28px rgba(255,113,0,.36),0 24px 70px rgba(0,0,0,.5);
    z-index:2;
  }
}
@media(max-width:1100px) and (min-width:901px){
  .plans-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:900px){
  .plans-grid{grid-template-columns:1fr;}
  .plan-card{width:100%;max-width:100%;}
}
@media(max-width:560px){
  .plan-icon{width:52px;height:52px;margin-bottom:10px;}
  .plan-icon img{width:48px;height:48px;}
  .plan-card h3{font-size:27px;}
}


/* v32 — detailed monthly plan content */
.plan-card{
  min-height:760px;
}
.plan-card ul{
  margin-top:24px;
}
.plan-card li{
  line-height:1.45;
  overflow-wrap:anywhere;
}
.plan-icon-professor img{
  width:62px;
  height:62px;
}
.plan-icon-vip img{
  width:64px;
  height:64px;
}
.plan-card.profitable{
  border-color:#ff7100;
  box-shadow:0 0 26px rgba(255,113,0,.22),0 25px 80px rgba(255,113,0,.12);
}
@media(max-width:1100px){
  .plan-card{min-height:720px;}
}
@media(max-width:900px){
  .plan-card{min-height:0;}
}
@media(max-width:560px){
  .plan-card{padding:28px 22px;}
  .plan-icon-professor img{width:56px;height:56px;}
  .plan-icon-vip img{width:58px;height:58px;}
  .plan-card li{font-size:15.5px;}
}


/* v32 — plan card spacing and price refinement */
#plans.section{
  width:min(1500px,calc(100% - 32px));
}
.plan-icon{
  width:84px;
  height:68px;
}
.plan-icon img{
  max-width:none;
}
.plan-icon:not(.plan-icon-professor):not(.plan-icon-vip) img{
  width:58px;
  height:58px;
}
.plan-icon-professor img{
  width:84px;
  height:62px;
}
.plan-icon-vip img{
  width:84px;
  height:58px;
}
.price{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  text-align:center;
}
.price-line{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:5px;
}
.price b{
  font-size:56px;
}
.price small{
  font-size:20px;
}
.price-period{
  color:#aaa;
  font-size:15px;
  font-weight:700;
  line-height:1;
}
@media(min-width:901px){
  .plan-card li{
    white-space:nowrap;
    overflow-wrap:normal;
    font-size:14px;
    letter-spacing:-.015em;
  }
}
@media(max-width:900px){
  #plans.section{width:min(1180px,calc(100% - 32px));}
  .plan-card li{
    white-space:normal;
    overflow-wrap:break-word;
  }
}
@media(max-width:560px){
  .plan-icon{width:76px;height:62px;}
  .plan-icon:not(.plan-icon-professor):not(.plan-icon-vip) img{width:54px;height:54px;}
  .plan-icon-professor img{width:76px;height:56px;}
  .plan-icon-vip img{width:76px;height:53px;}
  .price b{font-size:50px;}
}

/* v32 — final plans order and ambient orange particles */
#plans.plans{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
#plans.plans > :not(.plans-particles){
  position:relative;
  z-index:2;
}
.plans-particles{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  contain:paint;
}
.plans-particles::before{
  content:"";
  position:absolute;
  inset:8% 4%;
  background:radial-gradient(circle at 50% 45%,rgba(255,113,0,.09),transparent 55%);
  filter:blur(18px);
}
.plans-particles i{
  position:absolute;
  bottom:-28px;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#ff7b16;
  box-shadow:0 0 10px rgba(255,113,0,.95),0 0 22px rgba(255,113,0,.45);
  opacity:0;
  animation:plansParticleFloat 12s linear infinite;
}
.plans-particles i:nth-child(1){left:4%;animation-delay:-1s;animation-duration:13s}
.plans-particles i:nth-child(2){left:11%;width:3px;height:3px;animation-delay:-8s;animation-duration:10s}
.plans-particles i:nth-child(3){left:18%;animation-delay:-4s;animation-duration:15s}
.plans-particles i:nth-child(4){left:26%;width:4px;height:4px;animation-delay:-10s;animation-duration:12s}
.plans-particles i:nth-child(5){left:33%;animation-delay:-6s;animation-duration:14s}
.plans-particles i:nth-child(6){left:40%;width:3px;height:3px;animation-delay:-2s;animation-duration:11s}
.plans-particles i:nth-child(7){left:47%;animation-delay:-9s;animation-duration:16s}
.plans-particles i:nth-child(8){left:54%;width:4px;height:4px;animation-delay:-5s;animation-duration:13s}
.plans-particles i:nth-child(9){left:61%;animation-delay:-12s;animation-duration:15s}
.plans-particles i:nth-child(10){left:68%;width:3px;height:3px;animation-delay:-3s;animation-duration:10s}
.plans-particles i:nth-child(11){left:75%;animation-delay:-7s;animation-duration:14s}
.plans-particles i:nth-child(12){left:82%;width:4px;height:4px;animation-delay:-11s;animation-duration:12s}
.plans-particles i:nth-child(13){left:89%;animation-delay:-5s;animation-duration:16s}
.plans-particles i:nth-child(14){left:95%;width:3px;height:3px;animation-delay:-9s;animation-duration:11s}
.plans-particles i:nth-child(15){left:22%;width:3px;height:3px;animation-delay:-13s;animation-duration:17s}
.plans-particles i:nth-child(16){left:72%;width:5px;height:5px;animation-delay:-15s;animation-duration:18s}
@keyframes plansParticleFloat{
  0%{transform:translate3d(0,0,0) scale(.7);opacity:0}
  12%{opacity:.7}
  55%{transform:translate3d(22px,-52vh,0) scale(1);opacity:.5}
  100%{transform:translate3d(-18px,-108vh,0) scale(.55);opacity:0}
}

/* On phones the first card shown is VIP, followed by Professor, Football and Basketball. */
@media(max-width:900px){
  .plans-grid .plan-vip{order:1}
  .plans-grid .plan-professor{order:2}
  .plans-grid .plan-football{order:3}
  .plans-grid .plan-basketball{order:4}
  .plans-particles i:nth-child(n+11){display:none}
}
@media(prefers-reduced-motion:reduce){
  .plans-particles i{animation-play-state:paused;opacity:.25}
}

/* v32 — allow plan hover glow/scale to extend beyond the section bounds */
#plans.plans{
  overflow:visible;
}
.plans-particles{
  overflow:hidden;
}
.plans-particles::before{
  background:radial-gradient(circle at 50% 45%,rgba(255,113,0,.14),transparent 58%);
}
.plans-particles i{
  box-shadow:0 0 12px rgba(255,113,0,1),0 0 26px rgba(255,113,0,.58);
}
@keyframes plansParticleFloat{
  0%{transform:translate3d(0,0,0) scale(.7);opacity:0}
  12%{opacity:.9}
  55%{transform:translate3d(22px,-52vh,0) scale(1);opacity:.68}
  100%{transform:translate3d(-18px,-108vh,0) scale(.55);opacity:0}
}

/* v32 — weekly plan: a single centered Professor card */
.plans-grid.weekly-mode{
  grid-template-columns:minmax(0,520px);
  justify-content:center;
}
.plans-grid.weekly-mode .plan-professor{
  width:100%;
  max-width:520px;
  transform:none;
  border-color:#292929;
  box-shadow:none;
}
.plan-card[hidden]{display:none!important;}
@media(max-width:900px){
  .plans-grid.weekly-mode{
    grid-template-columns:minmax(0,1fr);
    width:100%;
  }
  .plans-grid.weekly-mode .plan-professor{
    max-width:100%;
  }
}

/* v32 — weekly card matches a standard monthly card width and hover */
.plans-grid.weekly-mode{
  display:flex;
  justify-content:center;
}
.plans-grid.weekly-mode .plan-professor{
  flex:0 1 calc((100% - 54px) / 4);
  width:calc((100% - 54px) / 4);
  max-width:none;
}
@media (hover:hover) and (pointer:fine){
  .plans-grid.weekly-mode .plan-professor:hover{
    transform:translateY(-8px) scale(1.025);
    border-color:#ff7100;
    box-shadow:0 0 28px rgba(255,113,0,.36),0 24px 70px rgba(0,0,0,.5);
    z-index:2;
  }
}
@media(max-width:1100px) and (min-width:901px){
  .plans-grid.weekly-mode .plan-professor{
    flex-basis:calc((100% - 18px) / 2);
    width:calc((100% - 18px) / 2);
  }
}
@media(max-width:900px){
  .plans-grid.weekly-mode{display:grid;}
  .plans-grid.weekly-mode .plan-professor{
    width:100%;
    max-width:100%;
  }
}

/* v32 — plans-only secret offer popup */
.plans-offer-popup[hidden]{display:none!important}
.plans-offer-popup{
  position:fixed;
  inset:0;
  z-index:1400;
  display:grid;
  place-items:center;
  padding:22px;
  direction:rtl;
}
.plans-offer-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.68);
  backdrop-filter:blur(7px);
  animation:plansOfferFade .24s ease both;
}
.plans-offer-card{
  position:relative;
  isolation:isolate;
  width:min(760px,calc(100vw - 44px));
  min-height:390px;
  display:grid;
  grid-template-columns:minmax(250px,.82fr) minmax(320px,1.18fr);
  align-items:center;
  gap:8px;
  overflow:hidden;
  padding:34px 38px 30px;
  border:1px solid rgba(255,126,24,.8);
  border-radius:30px;
  background:
    radial-gradient(circle at 15% 50%,rgba(255,113,0,.22),transparent 37%),
    linear-gradient(145deg,#151515 0%,#080808 62%,#111 100%);
  box-shadow:0 34px 110px rgba(0,0,0,.82),0 0 0 1px rgba(255,255,255,.035) inset,0 0 48px rgba(255,113,0,.28);
  animation:plansOfferPop .48s cubic-bezier(.2,.9,.28,1.18) both;
}
.plans-offer-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(115deg,transparent 25%,rgba(255,255,255,.055) 46%,transparent 67%);
  transform:translateX(100%);
  animation:plansOfferSheen 3.8s 1s ease-in-out infinite;
}
.plans-offer-close{
  position:absolute;
  top:14px;
  left:14px;
  z-index:5;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.22);
  border-radius:50%;
  background:rgba(12,12,12,.82);
  color:#fff;
  font:400 30px/1 Arial,sans-serif;
  cursor:pointer;
  transition:transform .2s ease,border-color .2s ease,background .2s ease;
}
.plans-offer-close:hover{transform:rotate(8deg) scale(1.06);border-color:#ff7100;background:#231307}
.plans-offer-glow{
  position:absolute;
  z-index:-1;
  right:-80px;
  bottom:-120px;
  width:430px;
  height:430px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,113,0,.34),rgba(255,113,0,.08) 43%,transparent 70%);
  filter:blur(18px);
  animation:plansOfferGlow 2.4s ease-in-out infinite;
}
.plans-offer-character{
  position:relative;
  z-index:1;
  justify-self:center;
  align-self:end;
  width:min(310px,100%);
  max-height:350px;
  object-fit:contain;
  object-position:center bottom;
  filter:drop-shadow(0 22px 30px rgba(0,0,0,.72)) drop-shadow(0 0 24px rgba(255,113,0,.34));
}
.plans-offer-copy{position:relative;z-index:2;text-align:center}
.plans-offer-kicker{
  margin:0 0 15px;
  color:#fff;
  font-size:clamp(22px,2.3vw,30px);
  font-weight:950;
  line-height:1.1;
  letter-spacing:-.035em;
  white-space:nowrap;
}
.plans-offer-discount{
  margin:0;
  color:#ff7a16;
  font-size:clamp(31px,4.2vw,52px);
  font-weight:1000;
  line-height:1.02;
  letter-spacing:-.045em;
  text-shadow:0 0 12px rgba(255,113,0,.55),0 0 30px rgba(255,113,0,.34);
  animation:plansOfferDiscount 1.75s ease-in-out infinite;
}
.plans-offer-code{
  margin:19px 0 0;
  color:#d8d8d8;
  font-size:clamp(16px,1.8vw,20px);
  font-weight:700;
}
.plans-offer-code strong{
  display:inline-block;
  color:#ff7a16;
  font-size:1.15em;
  font-weight:1000;
  direction:ltr;
  text-shadow:0 0 15px rgba(255,113,0,.5);
}
@keyframes plansOfferFade{from{opacity:0}to{opacity:1}}
@keyframes plansOfferPop{from{opacity:0;transform:translateY(28px) scale(.88)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes plansOfferGlow{50%{transform:scale(1.08);opacity:.72}}
@keyframes plansOfferDiscount{0%,100%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.025);filter:brightness(1.22)}}
@keyframes plansOfferSheen{0%,28%{transform:translateX(115%)}65%,100%{transform:translateX(-115%)}}
@media(max-width:700px){
  .plans-offer-popup{padding:14px}
  .plans-offer-card{
    width:min(430px,calc(100vw - 28px));
    min-height:0;
    grid-template-columns:1fr;
    gap:0;
    padding:50px 20px 28px;
    border-radius:25px;
  }
  .plans-offer-character{
    order:1;
    align-self:center;
    width:min(220px,62vw);
    max-height:235px;
    margin:-18px auto -8px;
  }
  .plans-offer-copy{order:2}
  .plans-offer-kicker{font-size:clamp(16px,5.2vw,22px);margin-bottom:13px;white-space:nowrap}
  .plans-offer-discount{font-size:clamp(29px,8.2vw,39px)}
  .plans-offer-code{font-size:16px;line-height:1.5;margin-top:15px}
  .plans-offer-close{top:11px;left:11px;width:39px;height:39px;font-size:28px}
  .plans-offer-glow{right:50%;transform:translateX(50%);bottom:30px;width:330px;height:330px}
}
@media(max-height:650px) and (max-width:700px){
  .plans-offer-card{grid-template-columns:150px 1fr;gap:4px;padding:48px 18px 24px}
  .plans-offer-character{order:0;width:155px;max-height:250px;margin:0 -12px -24px 0}
  .plans-offer-copy{order:0}
  .plans-offer-kicker{font-size:22px}
  .plans-offer-discount{font-size:29px}
  .plans-offer-code{font-size:14px}
}
@media(prefers-reduced-motion:reduce){
  .plans-offer-backdrop,.plans-offer-card,.plans-offer-card::before,.plans-offer-glow,.plans-offer-discount{animation:none!important}
}
body.plans-offer-open{overflow:hidden}

/* Desktop only: anchor the popup character to the card's bottom edge */
@media (min-width:701px){
  .plans-offer-character{
    width:min(330px,100%);
    max-height:380px;
    margin-bottom:-30px;
  }
}


/* v36.5 — navigation, polished entrances and first-load ticker stability */
#hits .section-heading p{
  margin-inline:auto;
  text-align:center;
}

/* Each plan enters with a short, staggered lift when the section reaches view. */
.plans-grid .plan-card.reveal{
  opacity:0;
  transform:translateY(52px) scale(.965);
  filter:blur(2px);
  transition:opacity .72s ease,transform .72s cubic-bezier(.2,.8,.2,1),filter .72s ease,box-shadow .28s ease,border-color .28s ease;
}
.plans-grid .plan-card.reveal.visible{
  opacity:1;
  transform:none;
  filter:none;
}
.plans-grid .plan-card:nth-child(1){transition-delay:.04s}
.plans-grid .plan-card:nth-child(2){transition-delay:.12s}
.plans-grid .plan-card:nth-child(3){transition-delay:.20s}
.plans-grid .plan-card:nth-child(4){transition-delay:.28s}
@media (hover:hover) and (pointer:fine){
  .plans-grid .plan-card.reveal.visible:hover{
    transform:translateY(-8px) scale(1.025);
  }
}

/* Keep ticker text and separator dots isolated and evenly spaced. */
.hero-ticker .ticker-text-item,
.hero-ticker .ticker-dot-item{
  margin:0;
  padding:0;
}
.hero-ticker .ticker-dot-item{
  flex-shrink:0;
}

@media(max-width:900px){
  .plans-grid .plan-card:nth-child(n){transition-delay:.06s}
  #hits .section-heading p{max-width:min(620px,100%);padding-inline:4px}
}
@media(prefers-reduced-motion:reduce){
  .plans-grid .plan-card.reveal{filter:none;transition:none;transform:none}
}

/* v36.6 — mobile five-item fixed navigation */
@media (max-width:900px){
  .topbar{
    position:fixed;
    top:calc(8px + env(safe-area-inset-top, 0px));
    left:50%;
    right:auto;
    transform:translateX(-50%);
    width:calc(100% - 20px);
    max-width:620px;
    margin:0;
    min-height:0;
    height:auto;
    padding:9px 10px;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-rows:46px 38px;
    gap:7px 8px;
    overflow:hidden;
    z-index:1200;
  }
  .topbar nav{
    grid-column:1 / -1;
    grid-row:2;
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    width:100%;
    min-width:0;
    max-width:100%;
    gap:4px;
    padding:0;
    overflow:visible;
  }
  .topbar nav a{
    width:100%;
    min-width:0;
    max-width:100%;
    height:38px;
    padding:0 2px;
    font-size:12px;
    line-height:1;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:clip;
    border-radius:9px;
  }
  .hero-ticker{
    margin-top:calc(116px + env(safe-area-inset-top, 0px));
  }
}

@media (max-width:430px){
  .topbar{
    top:calc(6px + env(safe-area-inset-top, 0px));
    width:calc(100% - 12px);
    padding:8px;
    grid-template-rows:44px 37px;
    gap:6px;
  }
  .topbar .brand{gap:7px}
  .topbar .brand img{width:40px;height:40px}
  .topbar .brand span{font-size:13px}
  .topbar .btn-small{
    min-width:88px;
    min-height:40px;
    padding-inline:10px;
    font-size:13px;
  }
  .topbar nav{gap:3px}
  .topbar nav a{
    height:37px;
    padding-inline:1px;
    font-size:11.5px;
    letter-spacing:-.02em;
  }
  .hero-ticker{
    margin-top:calc(108px + env(safe-area-inset-top, 0px));
  }
}

/* v36.8 — mobile ticker cycles always remain complete */

/* v36.9 — mobile header returns to normal page flow and lightboxes are truly centered */
@media (max-width:900px){
  /* Mobile only: keep the navigation at the top of the page, but let it scroll away. */
  .topbar{
    position:absolute !important;
    top:calc(8px + env(safe-area-inset-top, 0px)) !important;
    left:10px !important;
    right:10px !important;
    width:auto !important;
    max-width:620px !important;
    margin-inline:auto !important;
    transform:none !important;
  }

  /* Center enlarged win/hit images against the viewport rather than RTL flow. */
  .lightbox{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100dvw !important;
    height:100dvh !important;
    padding:20px 16px !important;
    direction:ltr;
  }
  .lightbox[hidden]{display:none !important}
  .lightbox img{
    display:block;
    width:auto;
    height:auto;
    max-width:calc(100dvw - 32px) !important;
    max-height:calc(100dvh - 40px) !important;
    margin:auto !important;
    object-fit:contain;
    transform:none !important;
  }
}

@media (max-width:430px){
  .topbar{
    top:calc(6px + env(safe-area-inset-top, 0px)) !important;
    left:6px !important;
    right:6px !important;
  }
}


/* v36.10 — final mobile content polish and popup action */
.proof-hint-mobile{display:none}
.plans-offer-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:220px;
  min-height:50px;
  margin:18px auto 0;
  padding:13px 28px;
  border:1px solid rgba(255,177,82,.8);
  border-radius:14px;
  background:linear-gradient(135deg,var(--orange),var(--orange2));
  color:#111;
  text-decoration:none;
  font-weight:900;
  font-size:18px;
  box-shadow:0 12px 34px rgba(255,113,0,.32),0 0 24px rgba(255,113,0,.2);
  transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;
}
.plans-offer-cta:hover{
  transform:translateY(-3px) scale(1.02);
  box-shadow:0 16px 42px rgba(255,113,0,.46),0 0 32px rgba(255,113,0,.3);
  filter:brightness(1.08);
}

@media(max-width:560px){
  /* Keep the hits eyebrow on one line on phones. */
  #hits .section-heading > span{
    display:block;
    width:100%;
    white-space:nowrap;
    font-size:clamp(11px,3.25vw,14px);
    letter-spacing:0;
  }

  /* Touch-specific image instruction. */
  .proof-hint-desktop{display:none}
  .proof-hint-mobile{display:inline}

  /* The mobile character now floats only downward, so its head never exits the hero. */
  .hero-character{
    animation:characterFloatMobile 5.5s ease-in-out infinite !important;
  }

  .plans-offer-cta{
    width:100%;
    min-width:0;
    min-height:48px;
    margin-top:15px;
    font-size:17px;
  }
}

@keyframes characterFloatMobile{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(10px)}
}

/* How it works — v36 content refinement */
.process-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
  align-items:stretch;
}
.process-grid article{
  min-width:0;
  display:flex;
  flex-direction:column;
}
.process-grid h3{
  line-height:1.15;
  min-height:60px;
  display:flex;
  align-items:flex-end;
}
.process-grid p{
  margin:14px 0 0;
  line-height:1.75;
}
.process-grid .process-one-line{
  white-space:nowrap;
  font-size:clamp(14px,1.05vw,16px);
}
.process-availability{
  margin-top:auto !important;
  padding-top:14px;
  color:#fff !important;
  font-weight:800;
}
@media(max-width:1100px) and (min-width:701px){
  .process-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .process-grid h3{min-height:auto;}
  .process-grid .process-one-line{font-size:16px;}
}
@media(max-width:700px){
  .process-grid{grid-template-columns:1fr;}
  .process-grid h3{min-height:auto;}
  .process-grid .process-one-line{
    white-space:normal;
    font-size:inherit;
  }
  .process-desktop-break{display:none;}
  .process-grid article{padding:28px 24px;}
}


/* How it works — desktop alignment polish */
@media(min-width:1101px){
  .process-grid article{
    padding:34px 26px;
  }
  .process-grid h3{
    min-height:60px;
    height:60px;
    align-items:flex-end;
    white-space:nowrap;
    font-size:clamp(21px,1.65vw,25px);
    letter-spacing:-.015em;
  }
  .process-grid p{
    text-align:center;
    overflow-wrap:normal;
    word-break:normal;
  }
  .process-grid .process-one-line{
    white-space:normal;
    font-size:inherit;
  }
  .process-availability{
    margin:14px 0 0 !important;
    padding-top:0;
    color:#999 !important;
    font-weight:400;
  }
}

/* How it works — final title alignment and ordered entrance */
.process-grid article.reveal{
  transition-property:opacity,transform;
  transition-duration:.72s;
  transition-timing-function:cubic-bezier(.22,1,.36,1);
}
.process-grid article.reveal:nth-child(1){transition-delay:.05s}
.process-grid article.reveal:nth-child(2){transition-delay:.20s}
.process-grid article.reveal:nth-child(3){transition-delay:.35s}
.process-grid article.reveal:nth-child(4){transition-delay:.50s}
.process-grid article.reveal:not(.visible){
  transform:translateY(38px) scale(.975);
}
.process-grid article.reveal.visible{
  transform:translateY(0) scale(1);
}

@media(min-width:1101px){
  .process-grid article{
    text-align:center;
    align-items:stretch;
  }
  .process-grid article > b{
    display:block;
    line-height:1;
    margin:0 0 10px;
    text-align:center;
  }
  .process-grid h3{
    width:100%;
    height:auto;
    min-height:34px;
    margin:0;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
  }
}

@media (prefers-reduced-motion:reduce){
  .process-grid article.reveal{
    transition-delay:0s !important;
    transform:none !important;
  }
}

/* v36.7 — FAQ mobile layout fix */
@media (max-width: 900px){
  #faq.faq{
    display:block;
    width:min(100% - 28px, 720px);
    max-width:100%;
    margin-inline:auto;
    padding-inline:0;
    overflow:visible;
  }

  #faq .section-heading{
    width:100%;
    max-width:100%;
    margin:0 auto 28px;
    padding-inline:4px;
    text-align:center;
  }

  #faq .section-heading span,
  #faq .section-heading h2{
    display:block;
    width:100%;
    max-width:100%;
    text-align:center;
    overflow-wrap:anywhere;
  }

  #faq .section-heading span{
    font-size:clamp(15px,4.2vw,18px);
    line-height:1.45;
    letter-spacing:0;
  }

  #faq .section-heading h2{
    margin:10px 0 0;
    font-size:clamp(40px,11vw,58px);
    line-height:1.05;
  }

  #faq .accordion{
    width:100%;
    max-width:100%;
    min-width:0;
    margin:0;
  }

  #faq .accordion details{
    width:100%;
    max-width:100%;
    min-width:0;
    margin:0 0 12px;
    padding:0;
    overflow:hidden;
    border:1px solid #292929;
    border-radius:18px;
    background:linear-gradient(180deg,#131313,#0d0d0d);
  }

  #faq .accordion summary{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    width:100%;
    min-width:0;
    padding:18px 18px;
    list-style:none;
    text-align:right;
    font-size:clamp(16px,4.35vw,19px);
    line-height:1.4;
    font-weight:800;
    overflow-wrap:anywhere;
  }

  #faq .accordion summary::-webkit-details-marker{
    display:none;
  }

  #faq .accordion summary::after{
    content:'+';
    flex:0 0 30px;
    width:30px;
    height:30px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#1a1a1a;
    border:1px solid #3a3a3a;
    color:var(--orange2);
    font-size:22px;
    line-height:1;
    transition:transform .25s ease,background .25s ease;
  }

  #faq .accordion details[open] summary::after{
    content:'−';
    transform:rotate(180deg);
    background:#241407;
  }

  #faq .accordion details[open] summary{
    border-bottom:1px solid #252525;
  }

  #faq .accordion p{
    max-width:100%;
    margin:0;
    padding:0 18px 16px;
    color:#b5b5b5;
    font-size:15px;
    line-height:1.75;
    text-align:right;
    overflow-wrap:anywhere;
    word-break:normal;
  }

  #faq .accordion p:first-of-type{
    padding-top:16px;
  }
}

@media (max-width: 420px){
  #faq.faq{
    width:calc(100% - 20px);
  }

  #faq .accordion summary{
    gap:10px;
    padding:16px 14px;
    font-size:15.5px;
  }

  #faq .accordion summary::after{
    flex-basis:28px;
    width:28px;
    height:28px;
    font-size:20px;
  }

  #faq .accordion p{
    padding-inline:14px;
    font-size:14.5px;
  }
}


/* v36 CTA entrance, branded logo light sweep and responsive polish */
.topbar .brand{
  position:relative;
  isolation:isolate;
}
.topbar .brand::after{
  content:"";
  position:absolute;
  z-index:3;
  top:0;
  right:0;
  width:48px;
  height:48px;
  border-radius:50%;
  pointer-events:none;
  background:linear-gradient(110deg,transparent 22%,rgba(255,255,255,.12) 38%,rgba(255,255,255,.92) 50%,rgba(255,255,255,.16) 62%,transparent 78%);
  transform:translateX(135%) skewX(-18deg);
  mix-blend-mode:screen;
  animation:brandLightSweep 5s ease-in-out infinite;
}
@keyframes brandLightSweep{
  0%,70%{transform:translateX(135%) skewX(-18deg);opacity:0}
  74%{opacity:.9}
  88%{transform:translateX(-135%) skewX(-18deg);opacity:.9}
  92%,100%{transform:translateX(-135%) skewX(-18deg);opacity:0}
}

.cta.reveal{
  opacity:0;
  transform:translateX(110px);
  transition:opacity .85s cubic-bezier(.2,.75,.2,1),transform .85s cubic-bezier(.2,.75,.2,1),box-shadow .35s ease;
}
.cta.reveal.visible{
  opacity:1;
  transform:translateX(0);
}
.cta .btn-light{
  white-space:nowrap;
}

@media(max-width:900px){
  .cta.reveal{transform:translateX(58px)}
  .cta.reveal.visible{transform:translateX(0)}
  .cta h2{max-width:760px}
}
@media(max-width:560px){
  .topbar .brand::after{width:48px;height:48px}
  .cta.reveal{transform:translateX(38px)}
  .cta.reveal.visible{transform:translateX(0)}
  .cta h2{font-size:clamp(35px,10vw,48px);line-height:1.08}
  .cta .btn-light{width:100%;max-width:330px;padding-inline:16px;font-size:16px}
}
@media(prefers-reduced-motion:reduce){
  .topbar .brand::after{animation:none;display:none}
  .cta.reveal{transition:none;transform:none}
}


/* v36.10 — refined CTA, logo-only sweep and navigation interactions */
.cta-title-line{
  display:block;
}

/* The sweep is clipped to the circular logo only, never the brand text. */
.topbar .brand::after{
  content:none !important;
  display:none !important;
}
.brand-logo-sweep{
  position:relative;
  display:inline-grid;
  place-items:center;
  width:48px;
  height:48px;
  flex:0 0 48px;
  border-radius:50%;
  overflow:hidden;
  isolation:isolate;
}
.brand-logo-sweep img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
}
.brand-logo-sweep::after{
  content:"";
  position:absolute;
  inset:-18% auto -18% -34%;
  width:28%;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent);
  filter:blur(.6px);
  transform:translateX(-210%) rotate(16deg);
  opacity:0;
  animation:logoOnlySweep 5s cubic-bezier(.22,.65,.32,1) infinite;
  mix-blend-mode:screen;
}
@keyframes logoOnlySweep{
  0%,72%{transform:translateX(-210%) rotate(16deg);opacity:0}
  75%{opacity:.72}
  88%{transform:translateX(610%) rotate(16deg);opacity:.72}
  91%,100%{transform:translateX(610%) rotate(16deg);opacity:0}
}

/* Stronger but premium emphasis for the primary join action. */
.topbar .btn-small{
  position:relative;
  isolation:isolate;
  animation:joinGlow 2.4s ease-in-out infinite;
}
.topbar .btn-small::before{
  content:"";
  position:absolute;
  inset:-5px;
  border-radius:inherit;
  border:1px solid rgba(255,145,47,.48);
  opacity:.42;
  pointer-events:none;
  animation:joinRing 2.4s ease-in-out infinite;
}
@keyframes joinGlow{
  0%,100%{box-shadow:0 8px 24px rgba(255,113,0,.26),0 0 0 rgba(255,113,0,0)}
  50%{box-shadow:0 10px 34px rgba(255,113,0,.55),0 0 22px rgba(255,113,0,.34)}
}
@keyframes joinRing{
  0%,100%{transform:scale(.98);opacity:.26}
  50%{transform:scale(1.05);opacity:.72}
}

.topbar nav a{
  display:inline-block;
  transform-origin:center;
  transition:color .22s ease,transform .22s cubic-bezier(.2,.75,.2,1),text-shadow .22s ease;
}
@media (hover:hover) and (pointer:fine){
  .topbar nav a:hover{
    color:#fff;
    transform:scale(1.09);
    text-shadow:0 0 16px rgba(255,255,255,.18);
  }
  .topbar .btn-small:hover{
    transform:translateY(-2px) scale(1.03);
  }
}

footer .copyright-mark{
  display:inline-block;
  direction:ltr;
  margin-left:4px;
  color:inherit;
}

@media(max-width:560px){
  .brand-logo-sweep{width:40px;height:40px;flex-basis:40px}
  .cta-title-line{display:block}
  .topbar .btn-small{animation:joinGlow 2.8s ease-in-out infinite}
}
@media(prefers-reduced-motion:reduce){
  .brand-logo-sweep::after,
  .topbar .btn-small,
  .topbar .btn-small::before{animation:none !important}
}

/* v36.11 — final mobile navigation alignment and two-line CTA title */
@media (max-width:900px){
  /* Mobile only: remove FAQ shortcut and evenly center the remaining four links. */
  .topbar nav{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    align-items:center;
    justify-items:stretch;
  }
  .topbar nav a[href="#faq"]{
    display:none !important;
  }
  .topbar nav a{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    line-height:1.15 !important;
    padding:0 4px !important;
  }
}

@media (max-width:560px){
  /* Preserve the intentionally authored two-line headline on small screens. */
  .cta h2{
    width:100%;
    font-size:clamp(29px,8.2vw,38px) !important;
    line-height:1.12 !important;
  }
  .cta-title-line{
    display:block;
    white-space:nowrap;
  }
}

@media (max-width:360px){
  .topbar nav a{
    font-size:11px !important;
    padding-inline:2px !important;
  }
  .cta h2{
    font-size:27px !important;
  }
}

/* v36 final mobile polish — keep the About heading on one line */
@media(max-width:560px){
  #about .section-heading h2{
    width:100%;
    white-space:nowrap;
    font-size:clamp(27px,8.8vw,40px) !important;
    line-height:1.08 !important;
    letter-spacing:-.035em !important;
    text-align:center;
  }
}


/* Fix about heading alignment */
#about .section-heading{
  text-align:right !important;
}
#about .section-heading span,
#about .section-heading h2,
#about .section-heading p{
  text-align:right !important;
  margin-inline:0 !important;
}

/* =========================================================
   v37 — premium, conversion-focused opening section
   Hero-only visual upgrade. All following sections unchanged.
   ========================================================= */
@media (min-width: 901px){
  .hero-ticker + .hero{
    min-height:760px;
    padding-top:50px;
    padding-bottom:34px;
  }

  .hero{
    grid-template-columns:minmax(0,1.03fr) minmax(0,.97fr);
    gap:10px;
    align-items:center;
    width:min(1460px,calc(100% - 48px));
    max-width:1460px;
  }

  .hero-copy{
    padding:32px 0 44px;
    align-self:center;
  }

  .hero .eyebrow{
    display:inline-flex;
    align-items:center;
    width:max-content;
    padding:8px 15px;
    margin-bottom:18px;
    border:1px solid rgba(255,113,0,.42);
    border-radius:999px;
    background:rgba(255,113,0,.075);
    box-shadow:inset 0 0 22px rgba(255,113,0,.035);
    font-size:16px;
    letter-spacing:.035em;
  }

  .hero h1{
    font-size:clamp(72px,7.15vw,116px);
    line-height:.86;
    letter-spacing:-.065em;
    margin:0 0 27px;
    text-wrap:balance;
    filter:drop-shadow(0 10px 28px rgba(0,0,0,.34));
  }

  .hero-title-solid,
  .hero-title-outline{
    white-space:nowrap;
  }

  .hero-title-outline{
    color:#ff7100;
    -webkit-text-stroke:0;
    text-shadow:0 0 34px rgba(255,113,0,.17);
    margin-top:12px;
  }

  .hero-lead{
    max-width:780px;
    margin:0;
    font-size:clamp(20px,1.55vw,25px);
    line-height:1.58;
    color:#d4d4d4;
  }

  .hero-lead strong{
    margin-top:10px;
    font-size:.92em;
    color:#fff;
  }

  .hero-actions{
    display:grid;
    grid-template-columns:1.18fr 1fr 1fr;
    gap:14px;
    width:min(760px,100%);
    margin-top:32px;
  }

  .hero-actions .btn{
    min-height:65px;
    padding:17px 18px;
    border-radius:15px;
    font-size:18px;
    font-weight:900;
    white-space:nowrap;
  }

  .hero-actions .btn:first-child{
    background:linear-gradient(135deg,#ff6900,#ff8f24);
    box-shadow:0 15px 40px rgba(255,113,0,.24),inset 0 1px 0 rgba(255,255,255,.2);
  }

  .hero-actions .btn:not(:first-child){
    background:rgba(12,12,12,.76);
    color:#fff;
    border:1px solid rgba(255,113,0,.62);
    box-shadow:inset 0 0 24px rgba(255,113,0,.035),0 12px 32px rgba(0,0,0,.2);
  }

  .hero-visual{
    min-height:700px;
    height:700px;
    align-self:end;
    justify-content:flex-start;
    overflow:visible;
    margin-inline-start:-40px;
  }

  .hero-character{
    width:min(820px,55vw) !important;
    max-width:none;
    height:700px;
    filter:drop-shadow(0 34px 48px rgba(0,0,0,.76)) drop-shadow(0 0 42px rgba(255,113,0,.22));
  }

  .hero-character::before{
    width:88%;
    height:60%;
    bottom:0;
    background:radial-gradient(ellipse,rgba(255,113,0,.28),transparent 68%);
  }
}

@media (min-width: 1200px){
  .hero-visual{margin-inline-start:-72px}
  .hero-character{width:min(900px,58vw) !important}
}

/* Tablet: still dramatic, but balanced and fully contained. */
@media (min-width: 561px) and (max-width: 900px){
  .hero-ticker + .hero{
    padding-top:30px;
    padding-bottom:50px;
  }

  .hero{
    gap:6px;
  }

  .hero-visual{
    min-height:510px !important;
    height:510px;
  }

  .hero-character{
    width:min(700px,94vw) !important;
    height:510px !important;
  }

  .hero h1{
    font-size:clamp(58px,10.2vw,78px);
    line-height:.88;
    margin:10px 0 22px;
  }

  .hero-title-outline{
    color:#ff7100;
    -webkit-text-stroke:0;
    margin-top:8px;
  }

  .hero-lead{
    font-size:20px;
    line-height:1.55;
  }

  .hero-actions{
    display:grid;
    grid-template-columns:1.15fr 1fr 1fr;
    gap:12px;
    margin-top:26px;
  }

  .hero-actions .btn{
    min-height:59px;
    font-size:17px;
  }
}

/* Mobile: large character, bold sales headline and three clear CTAs,
   while preserving the no-horizontal-scroll behavior of v36. */
@media (max-width: 560px){
  .hero-ticker + .hero{
    min-height:auto;
    padding-top:14px;
    padding-bottom:38px;
  }

  .hero{
    gap:0;
    overflow:hidden;
  }

  .hero-visual{
    min-height:330px !important;
    height:330px;
    margin-top:0;
  }

  .hero-character{
    width:min(96vw,430px) !important;
    max-width:430px;
    height:330px !important;
    filter:drop-shadow(0 22px 34px rgba(0,0,0,.72)) drop-shadow(0 0 26px rgba(255,113,0,.18));
  }

  .hero-copy{
    padding-inline:2px;
  }

  .hero .eyebrow{
    display:inline-block;
    margin:4px auto 4px;
    padding:6px 12px;
    border:1px solid rgba(255,113,0,.38);
    border-radius:999px;
    background:rgba(255,113,0,.07);
    font-size:14px;
  }

  .hero h1{
    font-size:clamp(43px,12.2vw,56px);
    line-height:.86;
    letter-spacing:-.055em;
    margin:13px 0 18px;
  }

  .hero-title-outline{
    color:#ff7100;
    -webkit-text-stroke:0;
    margin-top:8px;
  }

  .hero-lead{
    max-width:420px;
    font-size:16px;
    line-height:1.48;
  }

  .hero-lead strong{
    margin-top:7px;
  }

  .hero-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:21px;
  }

  .hero-actions .btn{
    width:100%;
    min-height:55px;
    padding:13px 8px;
    border-radius:13px;
    font-size:15px;
  }

  .hero-actions .btn:first-child{
    grid-column:1/-1;
    min-height:60px;
    font-size:17px;
  }

  .hero-actions .btn:not(:first-child){
    background:rgba(12,12,12,.8);
    color:#fff;
    border:1px solid rgba(255,113,0,.58);
  }
}

@media (max-width: 380px){
  .hero-visual{
    min-height:292px !important;
    height:292px;
  }

  .hero-character{
    width:min(94vw,365px) !important;
    height:292px !important;
  }

  .hero h1{
    font-size:40px;
  }

  .hero-lead{
    font-size:14.5px;
  }
}

/* v38 — subtle stadium background and animated orange particles in the hero */
.hero{
  isolation:isolate;
}
.hero::before{
  content:"";
  position:absolute;
  z-index:-3;
  top:0;
  bottom:0;
  left:50%;
  width:100vw;
  transform:translateX(-50%);
  background-image:url("../images/hero-stadium.png");
  background-size:cover;
  background-position:center 58%;
  background-repeat:no-repeat;
  opacity:.31;
  filter:saturate(.72) contrast(1.12) brightness(.62);
  pointer-events:none;
}
.hero::after{
  content:"";
  position:absolute;
  z-index:-2;
  top:0;
  bottom:0;
  left:50%;
  width:100vw;
  transform:translateX(-50%);
  background:
    linear-gradient(90deg,rgba(7,7,7,.94) 0%,rgba(7,7,7,.66) 30%,rgba(7,7,7,.58) 62%,rgba(7,7,7,.91) 100%),
    linear-gradient(180deg,rgba(7,7,7,.86) 0%,rgba(7,7,7,.27) 43%,rgba(7,7,7,.95) 100%);
  pointer-events:none;
}
.hero-copy,.hero-visual,.hero-glow{z-index:1}
.hero-glow{z-index:0}
.hero-visual{isolation:isolate}
.hero-particles{
  position:absolute;
  inset:3% -5% 2%;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  mask-image:radial-gradient(ellipse at 50% 53%,#000 30%,rgba(0,0,0,.82) 61%,transparent 88%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 53%,#000 30%,rgba(0,0,0,.82) 61%,transparent 88%);
}
.hero-particles i{
  position:absolute;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#ff7100;
  opacity:0;
  box-shadow:0 0 8px #ff7100,0 0 18px rgba(255,113,0,.7);
  animation:heroParticle 5.8s ease-in-out infinite;
}
.hero-particles i:nth-child(1){left:12%;top:72%;animation-delay:-.4s;animation-duration:5.1s}
.hero-particles i:nth-child(2){left:20%;top:24%;animation-delay:-2.7s;animation-duration:6.6s;width:3px;height:3px}
.hero-particles i:nth-child(3){left:31%;top:58%;animation-delay:-1.2s}
.hero-particles i:nth-child(4){left:39%;top:17%;animation-delay:-4.1s;animation-duration:7.2s}
.hero-particles i:nth-child(5){left:48%;top:78%;animation-delay:-3.3s;width:4px;height:4px}
.hero-particles i:nth-child(6){left:58%;top:31%;animation-delay:-.9s;animation-duration:6.9s}
.hero-particles i:nth-child(7){left:67%;top:67%;animation-delay:-4.8s;width:3px;height:3px}
.hero-particles i:nth-child(8){left:77%;top:19%;animation-delay:-2.1s}
.hero-particles i:nth-child(9){left:86%;top:52%;animation-delay:-5.1s;animation-duration:6.2s}
.hero-particles i:nth-child(10){left:91%;top:80%;animation-delay:-1.7s;width:4px;height:4px}
.hero-particles i:nth-child(11){left:8%;top:42%;animation-delay:-4.4s;width:3px;height:3px}
.hero-particles i:nth-child(12){left:25%;top:87%;animation-delay:-2.9s;animation-duration:7.4s}
.hero-particles i:nth-child(13){left:44%;top:44%;animation-delay:-5.4s;width:3px;height:3px}
.hero-particles i:nth-child(14){left:55%;top:9%;animation-delay:-1.5s}
.hero-particles i:nth-child(15){left:71%;top:43%;animation-delay:-3.7s;animation-duration:5.4s}
.hero-particles i:nth-child(16){left:82%;top:88%;animation-delay:-.2s;width:3px;height:3px}
.hero-particles i:nth-child(17){left:34%;top:36%;animation-delay:-4.9s;width:4px;height:4px}
.hero-particles i:nth-child(18){left:63%;top:84%;animation-delay:-2.4s}
@keyframes heroParticle{
  0%{opacity:0;transform:translate3d(0,18px,0) scale(.45)}
  18%{opacity:.8}
  55%{opacity:.42}
  100%{opacity:0;transform:translate3d(12px,-72px,0) scale(1.25)}
}
.hero-character{z-index:2}

@media(max-width:900px){
  .hero::before{
    background-position:center 55%;
    opacity:.27;
  }
  .hero::after{
    background:
      linear-gradient(180deg,rgba(7,7,7,.72) 0%,rgba(7,7,7,.42) 30%,rgba(7,7,7,.77) 62%,rgba(7,7,7,.97) 100%),
      linear-gradient(90deg,rgba(7,7,7,.78),rgba(7,7,7,.5),rgba(7,7,7,.78));
  }
  .hero-particles{inset:1% 2% 0}
}
@media(max-width:560px){
  .hero::before{
    background-size:auto 100%;
    background-position:center top;
    opacity:.24;
  }
  .hero::after{
    background:linear-gradient(180deg,rgba(7,7,7,.6) 0%,rgba(7,7,7,.36) 25%,rgba(7,7,7,.84) 52%,#070707 100%);
  }
  .hero-particles{inset:0 4% 3%;opacity:.8}
  .hero-particles i{box-shadow:0 0 6px #ff7100,0 0 12px rgba(255,113,0,.55)}
}
@media(prefers-reduced-motion:reduce){
  .hero-particles i{animation:none;opacity:.28}
}

/* v39 — brighter stadium background + orange "לשחק חכם" title */
.hero h1 .hero-title-outline{
  color:#ff7100 !important;
  -webkit-text-stroke:0 !important;
  text-shadow:0 8px 28px rgba(255,113,0,.16);
}
.hero::before{
  opacity:.46;
  filter:saturate(.82) contrast(1.08) brightness(.82);
}
.hero::after{
  background:
    linear-gradient(90deg,rgba(7,7,7,.82) 0%,rgba(7,7,7,.46) 30%,rgba(7,7,7,.38) 62%,rgba(7,7,7,.79) 100%),
    linear-gradient(180deg,rgba(7,7,7,.68) 0%,rgba(7,7,7,.15) 43%,rgba(7,7,7,.84) 100%);
}
@media(max-width:900px){
  .hero::before{opacity:.42;filter:saturate(.8) contrast(1.06) brightness(.8)}
  .hero::after{
    background:
      linear-gradient(180deg,rgba(7,7,7,.58) 0%,rgba(7,7,7,.25) 30%,rgba(7,7,7,.64) 62%,rgba(7,7,7,.9) 100%),
      linear-gradient(90deg,rgba(7,7,7,.65),rgba(7,7,7,.34),rgba(7,7,7,.65));
  }
}
@media(max-width:560px){
  .hero::before{opacity:.38;filter:saturate(.78) contrast(1.05) brightness(.78)}
  .hero::after{
    background:linear-gradient(180deg,rgba(7,7,7,.48) 0%,rgba(7,7,7,.22) 25%,rgba(7,7,7,.72) 52%,#070707 100%);
  }
}

/* v40 — mobile edge-to-edge stadium background and slide-out navigation */
.topbar-actions{display:flex;align-items:center;gap:10px}
.mobile-menu-toggle,.mobile-menu,.mobile-menu-backdrop{display:none}

@media (max-width:900px){
  .topbar .desktop-nav{display:none !important}
  .topbar{padding:0 12px;height:68px}
  .topbar-actions{margin-right:auto;gap:8px}
  .join-button{display:inline-flex !important;padding:9px 14px;font-size:14px;white-space:nowrap}
  .mobile-menu-toggle{
    display:flex;
    width:44px;height:44px;padding:0;
    border:1px solid rgba(255,113,0,.52);
    border-radius:13px;background:#111;color:#fff;
    align-items:center;justify-content:center;flex-direction:column;gap:5px;
    cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.28)
  }
  .mobile-menu-toggle span{display:block;width:21px;height:2px;background:#fff;border-radius:9px;transition:.25s}
  .mobile-menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .mobile-menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .mobile-menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  .mobile-menu-backdrop{
    display:block;position:fixed;inset:0;background:rgba(0,0,0,.68);
    backdrop-filter:blur(3px);z-index:70;opacity:0;transition:opacity .28s ease
  }
  .mobile-menu-backdrop[hidden]{display:none}
  .mobile-menu-backdrop.is-open{opacity:1}
  .mobile-menu{
    display:flex;position:fixed;z-index:71;top:0;right:0;width:min(82vw,330px);height:100dvh;
    padding:24px 20px;background:linear-gradient(180deg,#121212,#080808);
    border-left:1px solid rgba(255,113,0,.35);box-shadow:-28px 0 80px rgba(0,0,0,.62);
    transform:translateX(105%);transition:transform .3s ease;flex-direction:column
  }
  .mobile-menu.is-open{transform:translateX(0)}
  .mobile-menu-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:18px;border-bottom:1px solid #2a2a2a}
  .mobile-menu-head strong{font-size:23px;color:#fff}
  .mobile-menu-close{width:42px;height:42px;border:1px solid #333;border-radius:12px;background:#171717;color:#fff;font-size:30px;line-height:1;cursor:pointer}
  .mobile-menu nav{display:flex !important;flex-direction:column;gap:0;padding-top:18px;overflow:visible}
  .mobile-menu nav a{display:flex !important;align-items:center;min-height:58px;padding:0 10px;color:#eee;text-decoration:none;font-size:20px;font-weight:800;border-bottom:1px solid #242424}
  .mobile-menu nav a::before{content:"";width:7px;height:7px;margin-left:12px;border-radius:50%;background:#ff7100;box-shadow:0 0 12px rgba(255,113,0,.65)}
  body.mobile-menu-open{overflow:hidden}
}

@media (max-width:560px){
  .hero::before{
    left:50% !important;width:100vw !important;
    background-size:cover !important;
    background-position:center center !important;
    transform:translateX(-50%) !important;
  }
  .hero::after{left:50% !important;width:100vw !important;transform:translateX(-50%) !important}
  .topbar{width:calc(100% - 18px);top:9px;border-radius:18px}
  .brand img{width:43px;height:43px}
  .join-button{padding:9px 12px;font-size:13px}
  .mobile-menu-toggle{width:42px;height:42px}
}

/* v41 — clean integrated mobile header layout */
@media (max-width:900px){
  .topbar{
    top:0;
    left:0;
    transform:none;
    width:100%;
    height:82px;
    padding:8px 14px;
    border:0;
    border-radius:0;
    background:linear-gradient(180deg,rgba(7,7,7,.98),rgba(7,7,7,.9));
    box-shadow:none;
    backdrop-filter:blur(10px);
    display:grid;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    align-items:center;
    column-gap:8px;
  }
  .topbar .brand{
    grid-column:2;
    justify-self:center;
    min-width:0;
    gap:7px;
    white-space:nowrap;
  }
  .topbar-actions{display:contents}
  .join-button{
    grid-column:1;
    grid-row:1;
    justify-self:start;
    margin:0;
  }
  .mobile-menu-toggle{
    grid-column:3;
    grid-row:1;
    justify-self:end;
    margin:0;
    border-color:rgba(255,113,0,.35);
    background:rgba(14,14,14,.72);
    box-shadow:none;
  }
  .hero-ticker{margin-top:82px}
}

@media (max-width:560px){
  .topbar{
    top:0;
    width:100%;
    height:76px;
    padding:7px 10px;
    border-radius:0;
  }
  .topbar .brand{gap:5px}
  .brand-logo-sweep{width:38px;height:38px;flex-basis:38px}
  .topbar .brand span{font-size:12px;line-height:1.1}
  .join-button{padding:8px 10px;font-size:12px;border-radius:11px}
  .mobile-menu-toggle{width:40px;height:40px;border-radius:11px}
  .hero-ticker{margin-top:76px}
}

@media (max-width:390px){
  .topbar{padding-inline:8px;column-gap:5px}
  .brand-logo-sweep{width:34px;height:34px;flex-basis:34px}
  .topbar .brand span{font-size:11px}
  .join-button{padding:7px 8px;font-size:11px}
  .mobile-menu-toggle{width:38px;height:38px}
}

/* v42 — precise mobile header order, seamless stadium edges, clean menu-open state */
@media (max-width:900px){
  .topbar{
    direction:ltr;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    transition:opacity .22s ease,visibility .22s ease;
  }
  .topbar .brand,
  .topbar .join-button,
  .topbar .mobile-menu-toggle{direction:rtl}
  .join-button{
    grid-column:1;
    grid-row:1;
    justify-self:start;
  }
  .topbar .brand{
    grid-column:2;
    grid-row:1;
    justify-self:center;
  }
  .mobile-menu-toggle{
    grid-column:3;
    grid-row:1;
    justify-self:end;
  }
  body.mobile-menu-open .topbar{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
  }
}

@media (max-width:560px){
  .hero::before,
  .hero::after{
    left:50% !important;
    right:auto !important;
    width:104vw !important;
    transform:translateX(-50%) !important;
  }
  .hero::before{
    background-size:cover !important;
    background-position:center center !important;
  }
}

/* v43 — final mobile header positioning: menu right, brand centered, join left */
@media (max-width:900px){
  .topbar{
    position:fixed;
    display:block;
    direction:ltr;
  }
  .topbar-actions{
    display:block;
    position:static;
    margin:0;
  }
  .topbar .brand{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    display:flex;
    align-items:center;
    justify-content:center;
    width:max-content;
    max-width:calc(100% - 210px);
    margin:0;
    z-index:2;
    overflow:hidden;
  }
  .topbar .brand span:last-child{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .topbar .join-button{
    position:absolute;
    left:12px;
    top:50%;
    transform:translateY(-50%);
    margin:0;
    z-index:3;
  }
  .topbar .mobile-menu-toggle{
    position:absolute;
    right:12px;
    top:50%;
    transform:translateY(-50%);
    margin:0;
    z-index:3;
  }
}

@media (max-width:560px){
  .topbar .brand{max-width:calc(100% - 180px)}
  .topbar .join-button{left:10px}
  .topbar .mobile-menu-toggle{right:10px}
}

@media (max-width:390px){
  .topbar .brand{max-width:calc(100% - 160px);gap:4px}
  .topbar .brand span:last-child{font-size:10px}
  .brand-logo-sweep{width:32px;height:32px;flex-basis:32px}
  .topbar .join-button{left:8px;padding:7px 7px;font-size:10px}
  .topbar .mobile-menu-toggle{right:8px;width:36px;height:36px}
}

/* v44 — keep the centered mobile brand/logo pixel-sharp (no transformed image layer) */
@media (max-width:900px){
  .topbar .brand{
    left:0;
    right:0;
    top:0;
    bottom:0;
    transform:none;
    margin:auto;
    height:max-content;
    width:max-content;
  }
  .brand-logo-sweep,
  .brand-logo-sweep img{
    transform:none !important;
    backface-visibility:hidden;
    image-rendering:auto;
  }
}

/* v45 — restore a crisp, undistorted mobile header logo */
@media (max-width:900px){
  .topbar .brand{
    overflow:visible;
  }
  .brand-logo-sweep{
    width:44px !important;
    height:44px !important;
    flex:0 0 44px !important;
    min-width:44px;
    min-height:44px;
    border-radius:50%;
    overflow:hidden;
    transform:none !important;
    filter:none !important;
  }
  .brand-logo-sweep::after{
    display:none !important;
    content:none !important;
    animation:none !important;
  }
  .brand-logo-sweep img{
    display:block;
    width:44px !important;
    height:44px !important;
    max-width:none !important;
    object-fit:contain !important;
    object-position:center !important;
    border-radius:50%;
    transform:none !important;
    filter:none !important;
    opacity:1 !important;
  }
}
@media (max-width:390px){
  .brand-logo-sweep{
    width:40px !important;
    height:40px !important;
    flex-basis:40px !important;
    min-width:40px;
    min-height:40px;
  }
  .brand-logo-sweep img{
    width:40px !important;
    height:40px !important;
  }
  .topbar .brand{
    max-width:calc(100% - 158px);
  }
}

/* v46 — mobile only: centered logo without brand text, with the original logo sweep */
@media (max-width:900px){
  .topbar .brand{
    left:0 !important;
    right:0 !important;
    top:0 !important;
    bottom:0 !important;
    width:44px !important;
    height:44px !important;
    max-width:none !important;
    margin:auto !important;
    gap:0 !important;
    overflow:visible !important;
    transform:none !important;
  }
  .topbar .brand > span:last-child{
    display:none !important;
  }
  .brand-logo-sweep{
    position:relative !important;
    display:inline-grid !important;
    place-items:center !important;
    width:44px !important;
    height:44px !important;
    flex:0 0 44px !important;
    min-width:44px !important;
    min-height:44px !important;
    border-radius:50% !important;
    overflow:hidden !important;
    isolation:isolate !important;
    transform:none !important;
    filter:none !important;
  }
  .brand-logo-sweep img{
    display:block !important;
    width:44px !important;
    height:44px !important;
    max-width:none !important;
    object-fit:contain !important;
    object-position:center !important;
    border-radius:50% !important;
    transform:none !important;
    filter:none !important;
    opacity:1 !important;
  }
  .brand-logo-sweep::after{
    content:"" !important;
    display:block !important;
    position:absolute !important;
    inset:-18% auto -18% -34% !important;
    width:28% !important;
    pointer-events:none !important;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent) !important;
    filter:blur(.6px) !important;
    transform:translateX(-210%) rotate(16deg);
    opacity:0;
    animation:logoOnlySweep 5s cubic-bezier(.22,.65,.32,1) infinite !important;
    mix-blend-mode:screen !important;
    z-index:2;
  }
}
@media (max-width:360px){
  .topbar .brand,
  .brand-logo-sweep,
  .brand-logo-sweep img{
    width:40px !important;
    height:40px !important;
  }
  .brand-logo-sweep{
    flex-basis:40px !important;
    min-width:40px !important;
    min-height:40px !important;
  }
}


/* v47: social shortcuts inside the mobile drawer */
@media (max-width: 820px){
  .mobile-social-links{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:22px;
    margin-top:22px;
    padding:22px 10px 6px;
    border-top:1px solid #242424;
  }
  .mobile-social-links a{
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,113,0,.34);
    border-radius:14px;
    background:rgba(255,113,0,.07);
    box-shadow:0 8px 24px rgba(0,0,0,.25);
    transition:transform .2s ease, border-color .2s ease, background .2s ease;
  }
  .mobile-social-links a:active{
    transform:scale(.94);
    background:rgba(255,113,0,.14);
    border-color:rgba(255,113,0,.65);
  }
  .mobile-social-links img{
    width:25px;
    height:25px;
    object-fit:contain;
    display:block;
  }
}
@media (min-width: 821px){
  .mobile-social-links{display:none}
}


/* v48: fixed desktop social shortcuts */
.desktop-social-links{display:none}
@media (min-width:821px){
  .desktop-social-links{
    position:fixed;
    right:24px;
    bottom:24px;
    z-index:9999;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
  }
  .desktop-social-links a{
    width:50px;
    height:50px;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,113,0,.38);
    border-radius:15px;
    background:rgba(12,12,12,.88);
    box-shadow:0 10px 28px rgba(0,0,0,.42),0 0 18px rgba(255,113,0,.08);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    transition:transform .22s ease,border-color .22s ease,background .22s ease,box-shadow .22s ease;
  }
  .desktop-social-links a:hover{
    transform:translateY(-3px) scale(1.04);
    border-color:rgba(255,113,0,.78);
    background:rgba(255,113,0,.12);
    box-shadow:0 14px 32px rgba(0,0,0,.46),0 0 24px rgba(255,113,0,.18);
  }
  .desktop-social-links img{
    width:27px;
    height:27px;
    object-fit:contain;
    display:block;
  }
}
@media (max-width:820px){
  .desktop-social-links{display:none !important}
}

/* v58.6 — mobile only: ticker sits directly below the fixed header.
   Match the ticker offset to the actual mobile header height, with no extra gap. */
@media (max-width:900px){
  .hero-ticker{
    margin-top:82px !important;
    position:relative;
    z-index:1;
  }
  .topbar{z-index:1200}
}

@media (max-width:560px){
  .hero-ticker{margin-top:76px !important}
}

/* v58.7 — mobile header/ticker dynamic lock.
   JS measures the rendered header box and exposes its exact bottom edge.
   No hard-coded mobile header height is used, so the ticker stays flush below
   the header across phone sizes, safe-area insets and font/layout changes. */
@media (max-width:900px){
  .hero-ticker{
    margin-top:var(--mobile-header-bottom, 110px) !important;
  }
}


/* WP v2.3 — preserve v58.7 header spacing inside WordPress. */
@media (min-width:901px){
  body.admin-bar .topbar{top:50px !important}
  body.admin-bar .hero-ticker{margin-top:144px !important}
}
@media (max-width:900px){
  body.admin-bar .topbar{top:32px !important}
}
@media (max-width:782px){
  body.admin-bar .topbar{top:46px !important}
}

/* Exact measured loop for the wins rows only. Hits keep their proven v58.7 behavior. */
#wins .proof-track.proof-track-exact-loop{animation:professorProofExact 50s linear infinite !important}
#wins .proof-row-right .proof-track.proof-track-exact-loop{animation-direction:reverse !important;animation-duration:56s !important}
#wins .proof-row:hover .proof-track.proof-track-exact-loop{animation-play-state:paused !important}
@keyframes professorProofExact{to{transform:translate3d(var(--proof-loop-distance),0,0)}}
@media(max-width:700px){#wins .proof-track.proof-track-exact-loop{animation-duration:48s !important}}
@media(prefers-reduced-motion:reduce){#wins .proof-track.proof-track-exact-loop{animation-play-state:paused !important}}


/* v2.7.3 — mobile logo light sweep: clip the shine to the transparent PNG alpha,
   so the effect follows the actual circular professor mark instead of its image box. */
@media (max-width:900px){
  .brand-logo-sweep::after{
    -webkit-mask-image:url("../images/logo.png") !important;
    mask-image:url("../images/logo.png") !important;
    -webkit-mask-repeat:no-repeat !important;
    mask-repeat:no-repeat !important;
    -webkit-mask-position:center !important;
    mask-position:center !important;
    -webkit-mask-size:44px 44px !important;
    mask-size:44px 44px !important;
  }
}
@media (max-width:360px){
  .brand-logo-sweep::after{
    -webkit-mask-size:40px 40px !important;
    mask-size:40px 40px !important;
  }
}


/* v2.7.4 — robust mobile logo-only sweep.
   Keep the effect layer the full logo size, mask that full layer with the PNG alpha,
   and animate the gradient *inside* it. This avoids exposing the rectangular image box
   on mobile WebKit/Chrome. Desktop behavior is intentionally untouched. */
@media (max-width:900px){
  .brand-logo-sweep::after{
    content:"" !important;
    display:block !important;
    position:absolute !important;
    inset:0 !important;
    width:auto !important;
    height:auto !important;
    pointer-events:none !important;
    z-index:2 !important;
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
    mix-blend-mode:screen !important;
    border-radius:50% !important;
    background:
      linear-gradient(105deg,
        transparent 0%,
        transparent 38%,
        rgba(255,255,255,0.02) 44%,
        rgba(255,255,255,0.82) 50%,
        rgba(255,255,255,0.12) 56%,
        transparent 63%,
        transparent 100%) !important;
    background-repeat:no-repeat !important;
    background-size:310% 100% !important;
    background-position:155% 0 !important;
    -webkit-mask-image:url("../images/logo.png") !important;
    mask-image:url("../images/logo.png") !important;
    -webkit-mask-repeat:no-repeat !important;
    mask-repeat:no-repeat !important;
    -webkit-mask-position:center !important;
    mask-position:center !important;
    -webkit-mask-size:100% 100% !important;
    mask-size:100% 100% !important;
    -webkit-mask-mode:alpha !important;
    mask-mode:alpha !important;
    animation:professorMobileLogoSweep 5s cubic-bezier(.22,.65,.32,1) infinite !important;
  }
}
@keyframes professorMobileLogoSweep{
  0%,72%{background-position:155% 0;opacity:0}
  75%{opacity:.9}
  88%{background-position:-55% 0;opacity:.9}
  91%,100%{background-position:-55% 0;opacity:0}
}


/* v2.7.5 — mobile logo sweep: highlight a clipped clone of the PNG itself.
   This uses the logo image's native alpha channel, so transparent pixels can never
   reveal a rectangular sweep box. Desktop remains unchanged. */
@media (max-width:900px){
  .brand-logo-sweep::after{
    content:"" !important;
    display:block !important;
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    z-index:2 !important;
    pointer-events:none !important;
    border-radius:50% !important;
    background-image:url("../images/logo.png") !important;
    background-repeat:no-repeat !important;
    background-position:center !important;
    background-size:100% 100% !important;
    -webkit-mask-image:none !important;
    mask-image:none !important;
    mix-blend-mode:screen !important;
    filter:brightness(2.9) saturate(.75) contrast(1.08) !important;
    opacity:0;
    transform:none !important;
    animation:professorMobileLogoCloneSweep 5s cubic-bezier(.22,.65,.32,1) infinite !important;
    will-change:clip-path,opacity;
  }
}
@keyframes professorMobileLogoCloneSweep{
  0%,72%{
    opacity:0;
    clip-path:polygon(-42% 0,-15% 0,-2% 100%,-29% 100%);
    -webkit-clip-path:polygon(-42% 0,-15% 0,-2% 100%,-29% 100%);
  }
  75%{opacity:.72}
  88%{
    opacity:.72;
    clip-path:polygon(102% 0,129% 0,142% 100%,115% 100%);
    -webkit-clip-path:polygon(102% 0,129% 0,142% 100%,115% 100%);
  }
  91%,100%{
    opacity:0;
    clip-path:polygon(102% 0,129% 0,142% 100%,115% 100%);
    -webkit-clip-path:polygon(102% 0,129% 0,142% 100%,115% 100%);
  }
}


/* v2.8.3 — desktop header/ticker vertical rhythm.
   WordPress already offsets normal-flow content by the admin-bar height.
   Only the fixed topbar needs that extra top offset; the ticker must keep the same
   110px document spacing for logged-in and logged-out views, otherwise the admin
   toolbar gets counted twice and creates an oversized gap below the header. */
@media (min-width:901px){
  .topbar{top:18px !important}
  .hero-ticker{margin-top:110px !important}
  body.admin-bar .topbar{top:50px !important}
  body.admin-bar .hero-ticker{margin-top:110px !important}
}

/* v2.9.0 — mobile homepage header remains pinned while the visitor scrolls.
   This is mobile-only; the existing desktop header rhythm is untouched. */
@media (max-width:900px){
  .topbar{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    margin:0 !important;
    transform:none !important;
    z-index:1200 !important;
  }
  body.admin-bar .topbar{top:32px !important}
}
@media (max-width:782px){
  body.admin-bar .topbar{top:46px !important}
}

/* v2.10.8 — mobile frontend header always starts at the real viewport top.
   WordPress injects a 46px html top margin for logged-in users on phones even
   when the admin toolbar is visually hidden. That stale offset was the blank
   band seen above the fixed Professor header. Remove it on the mobile frontend
   and keep the header fixed without any scroll-linked positioning. */
@media (max-width:900px){
  html{margin-top:0 !important}
  #wpadminbar{display:none !important}
  .topbar,
  body.admin-bar .topbar{
    position:fixed !important;
    top:0 !important;
    right:0 !important;
    left:0 !important;
    transform:none !important;
    margin-top:0 !important;
  }
}

/* v2.12.7 — mobile-only: keep lightbox close button below browser chrome/safe area */
@media (max-width:900px){
  .lightbox-close{
    top:calc(64px + env(safe-area-inset-top, 0px)) !important;
    left:16px !important;
    z-index:1005 !important;
  }
}