/* ===== TG 10-step learning journey ===== */
.tj{
  position:relative;color:#fff;margin-top:-2px;
  padding:96px 0 128px;
  font-family:'Plus Jakarta Sans','Nunito','Segoe UI',system-ui,sans-serif;
  background:
    radial-gradient(ellipse 52% 42% at 6% 8%,rgba(122,76,255,.28),transparent 70%),
    radial-gradient(ellipse 46% 40% at 96% 92%,rgba(122,76,255,.3),transparent 70%),
    radial-gradient(ellipse 40% 34% at 82% 22%,rgba(61,120,255,.1),transparent 70%),
    linear-gradient(180deg,#0a0f26 0%,#080b1f 55%,#0a0d23 100%);
}
.tj-head{text-align:center;max-width:980px;margin:0 auto clamp(18px,3.2vh,34px);padding:0 var(--pad-x);position:relative;z-index:1;}
.jn-eyebrow{display:inline-flex;align-items:center;gap:10px;padding:10px 24px;border-radius:999px;border:1px solid rgba(116,93,255,.45);background:rgba(40,34,110,.45);
  color:#c3b9ff;font-weight:800;font-size:13px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:clamp(14px,2.4vh,24px);}
.jn-eyebrow svg{width:16px;height:16px;fill:currentColor;}
.tj-title{font-family:'Plus Jakarta Sans','Nunito',sans-serif;font-weight:800;color:#fff;margin:0;font-size:clamp(34px,3.9vw,56px);line-height:1.1;letter-spacing:-.035em;}
.tj-grad{font-size:1.24em;line-height:1;letter-spacing:-.04em;display:inline-block;background:linear-gradient(90deg,#7b9bff 0%,#a77bf6 60%,#c776ec 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;}
.jn-pass{position:relative;display:inline-block;}
.jn-pass svg{position:absolute;left:-4%;bottom:-.2em;width:108%;height:.28em;overflow:visible;color:#a77bf6;}
.jn-sub{margin:clamp(14px,2.4vh,24px) auto 0;max-width:36em;color:#c3c7e6;font-size:clamp(14px,1.25vw,19px);line-height:1.6;}

.tj-pin{width:100%;}
.jn-desk{position:relative;z-index:1;max-width:1240px;margin:0 auto;padding:0 clamp(12px,2vw,28px);}
.jn-stage{position:relative;width:100%;aspect-ratio:1200/450;container-type:inline-size;}
.jn-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;}
.jn-lines path{fill:none;stroke-linecap:round;stroke-linejoin:round;}
.jn-base{stroke:rgba(120,110,230,.2);stroke-width:2.2;}
.jn-prog{stroke:url(#jnGrad);stroke-width:3;filter:drop-shadow(0 0 5px rgba(130,110,255,.6));stroke-dasharray:1;stroke-dashoffset:0;}
.jn-tail{stroke:url(#jnGrad);stroke-width:2.4;opacity:.28;}
.jn-arrow{fill:#ffb3d1;stroke:none;filter:drop-shadow(0 0 6px rgba(255,160,200,.7));transition:opacity .4s ease;}
.jn-it{position:absolute;left:calc(var(--x) / 12 * 1%);top:calc(var(--y) / 4.5 * 1%);width:0;height:0;transition:opacity .5s ease;}
.jn-tile{position:absolute;left:0;bottom:1.9cqw;translate:-50% 0;display:grid;place-items:center;width:6.3cqw;height:5.5cqw;border-radius:1.5cqw;
  background:linear-gradient(160deg,rgba(104,86,225,.6),rgba(30,24,86,.82));border:1px solid rgba(165,145,255,.4);
  box-shadow:0 1cqw 2.6cqw rgba(8,5,44,.6),inset 0 1px 0 rgba(255,255,255,.14);color:#fff;}
.jn-tile svg{width:2.9cqw;height:2.9cqw;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.jn-num{position:absolute;left:0;top:0;translate:-50% -50%;display:grid;place-items:center;width:3.3cqw;height:3.3cqw;border-radius:50%;
  background:linear-gradient(180deg,#e0daff,#a99bff);color:#241b6e;font-weight:800;font-size:clamp(11px,1.25cqw,16px);letter-spacing:-.01em;
  box-shadow:0 0 0 .38cqw rgba(150,130,255,.25),0 0 1.5cqw rgba(130,110,255,.7);}
.jn-txt{position:absolute;left:-9.2cqw;top:2.5cqw;width:18.4cqw;text-align:center;}
.jn-txt h3{margin:0;font-size:clamp(12.5px,1.38cqw,18px);line-height:1.28;font-weight:800;letter-spacing:-.01em;color:#fff;}
.jn-txt p{margin:.55cqw 0 0;font-size:clamp(10.5px,1.14cqw,15px);line-height:1.45;color:#aeb5de;}
.jn-it.gold .jn-tile{background:linear-gradient(160deg,rgba(255,200,90,.28),rgba(120,70,10,.5));border-color:rgba(255,196,84,.7);box-shadow:0 0 3cqw rgba(255,177,57,.4),inset 0 1px 0 rgba(255,235,170,.3);}
.jn-it.gold .jn-tile svg{width:3.6cqw;height:3.6cqw;stroke:none;}
.jn-it.gold .jn-num{background:linear-gradient(180deg,#ffe9a0,#f5a623);color:#3a2300;box-shadow:0 0 0 .38cqw rgba(255,190,80,.3),0 0 1.8cqw rgba(255,177,57,.75);}
.jn-it.gold .jn-txt h3{font-size:clamp(15px,1.85cqw,24px);color:#ffc760;}
.jn-play .jn-it:not(.on){opacity:.32;}
.jn-play .jn-prog{stroke-dashoffset:1;}
.jn-play .jn-arrow{opacity:0;}

.tj-action{position:relative;z-index:1;text-align:center;margin-top:clamp(18px,3.4vh,38px);padding:0 var(--pad-x);}
.tj-action .btn{min-width:220px;justify-content:center;gap:12px;padding:17px 44px;font-size:17px;font-weight:700;border-radius:999px;border:0;color:#fff;
  background:linear-gradient(90deg,#4a6bff,#8359ff);box-shadow:0 12px 32px rgba(92,80,255,.4);}

/* Phones and tablets: swipeable cards */
.jn-mob{display:none;position:relative;z-index:1;}
@media(max-width:1000px){
  .tj{padding:calc(var(--header-h,76px) + 14px) 0 94px;}
  .jn-desk{display:none;}
  .jn-mob{display:block;}
  .jn-eyebrow{font-size:11.5px;padding:8px 18px;letter-spacing:.14em;}
  .tj-title{font-size:clamp(28px,8.4vw,44px);}
  .jn-sub{font-size:clamp(13.5px,3.7vw,16px);max-width:26em;}
  .jn-seg{display:flex;justify-content:center;gap:7px;margin:clamp(14px,2.6vh,26px) 0 clamp(14px,2.4vh,22px);}
  .jn-seg i{width:clamp(18px,6vw,30px);height:4px;border-radius:4px;background:rgba(255,255,255,.2);transition:background .3s,width .3s;}
  .jn-seg i.on{background:linear-gradient(90deg,#8a5cff,#b07af5);}
  .jn-view{--cw:min(76vw,360px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:6px 0 10px;}
  .jn-view::-webkit-scrollbar{display:none;}
  .jn-slides{list-style:none;margin:0;padding:0;display:flex;gap:14px;}
  .jn-slides::before,.jn-slides::after{content:"";flex:0 0 calc((100% - var(--cw)) / 2 - 14px);}
  .jn-card{position:relative;flex:0 0 var(--cw);scroll-snap-align:center;scroll-snap-stop:always;overflow:hidden;border-radius:26px;padding:clamp(14px,2.4vh,22px) 20px clamp(16px,2.8vh,26px);min-height:clamp(168px,25vh,238px);
    background:linear-gradient(160deg,rgba(104,86,228,.42),rgba(26,22,78,.82));border:1.5px solid rgba(150,125,255,.5);
    box-shadow:0 18px 40px rgba(8,5,44,.5),inset 0 1px 0 rgba(255,255,255,.1);transform:scale(.88);opacity:.55;transition:transform .35s ease,opacity .35s ease;}
  .jn-card.cur{transform:none;opacity:1;}
  .jn-card::after{content:"";position:absolute;right:-30%;bottom:-48%;width:90%;aspect-ratio:1.4;border-radius:50%;background:linear-gradient(135deg,rgba(150,110,255,.5),rgba(110,80,230,.15));pointer-events:none;}
  .jn-top{display:flex;align-items:flex-start;justify-content:space-between;position:relative;z-index:1;}
  .jn-badge{display:inline-flex;align-items:baseline;gap:6px;padding:6px 16px;border-radius:999px;background:rgba(140,110,255,.38);font-size:15px;color:#b9b2e8;}
  .jn-badge b{font-size:21px;color:#fff;font-weight:800;}
  .jn-ico{display:grid;place-items:center;width:clamp(46px,6vh,58px);aspect-ratio:1;border-radius:16px;background:linear-gradient(160deg,rgba(100,84,215,.7),rgba(34,28,92,.9));border:1px solid rgba(165,145,255,.35);color:#fff;}
  .jn-ico svg{width:56%;height:56%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
  .jn-card h3{position:relative;z-index:1;margin:clamp(10px,1.8vh,16px) 0 0;font-size:clamp(20px,5.6vw,26px);line-height:1.2;font-weight:800;letter-spacing:-.02em;text-align:left;}
  .jn-card p{position:relative;z-index:1;margin:8px 0 0;font-size:clamp(14px,3.9vw,17px);line-height:1.5;color:#c5c2ee;text-align:left;max-width:15em;}
  .jn-card.gold{border-color:rgba(255,196,84,.7);background:linear-gradient(160deg,rgba(255,190,80,.22),rgba(26,22,60,.85));}
  .jn-card.gold::after{background:linear-gradient(135deg,rgba(255,190,80,.4),rgba(255,150,40,.1));}
  .jn-card.gold .jn-badge{background:rgba(255,196,84,.28);}
  .jn-card.gold .jn-ico{border-color:rgba(255,196,84,.6);}
  .jn-card.gold .jn-ico svg{stroke:none;}
  .jn-card.gold h3{color:#ffd37a;}
  .jn-nav{display:flex;justify-content:center;gap:clamp(18px,5vw,30px);margin-top:clamp(8px,1.6vh,16px);}
  .jn-nav button{display:grid;place-items:center;width:clamp(42px,6vh,50px);aspect-ratio:1;border-radius:50%;cursor:pointer;color:#fff;border:1px solid rgba(160,140,255,.35);background:rgba(255,255,255,.06);transition:opacity .2s,transform .2s;}
  .jn-nav button.next{background:linear-gradient(135deg,#7a5cff,#9a62f2);border-color:transparent;box-shadow:0 8px 22px rgba(122,92,255,.45);}
  .jn-nav button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
  .jn-nav button:disabled{opacity:.35;cursor:default;}
  .tj-action{margin-top:clamp(16px,3vh,28px);}
  .tj-action .btn{width:100%;max-width:340px;padding:15px 24px;font-size:16.5px;}
}
/* Step 10: golden glow and glitter */
.jn-fx{position:absolute;pointer-events:none;}
.jn-it.gold .jn-fx{left:0;top:0;width:0;height:0;}
.jn-gl{position:absolute;left:0;top:-4.6cqw;width:15cqw;height:15cqw;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle,rgba(255,200,90,.55) 0,rgba(255,170,50,.22) 38%,transparent 68%);opacity:0;}
.jn-ray{position:absolute;left:0;top:-4.6cqw;width:13cqw;height:13cqw;translate:-50% -50%;border-radius:50%;opacity:0;
  background:repeating-conic-gradient(from 0deg,rgba(255,214,120,.5) 0 3deg,transparent 3deg 22deg);
  -webkit-mask:radial-gradient(circle,transparent 30%,#000 44%,transparent 72%);mask:radial-gradient(circle,transparent 30%,#000 44%,transparent 72%);}
.jn-sp{position:absolute;left:0;top:0;width:6px;height:6px;margin:-3px 0 0 -3px;opacity:0;background:#ffe9a8;
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);filter:drop-shadow(0 0 4px #ffc247);}
.jn-it.gold .jn-sp{translate:calc(var(--dx) * 1cqw / 12) calc(var(--dy) * 1cqw / 12);top:-4.6cqw;}
.jn-it.gold.on .jn-gl,.jn-it.gold:not(.on) .jn-gl.never{opacity:1;}
.jn-it.gold.on .jn-gl{animation:jnPulse 2.6s ease-in-out infinite;}
.jn-it.gold.on .jn-ray{animation:jnSpin 14s linear infinite,jnRayIn .8s ease-out both;}
.jn-it.gold.on .jn-sp{animation:jnTwinkle 2.2s ease-in-out infinite;animation-delay:var(--dl);}
.jn-it.gold.on .jn-tile{animation:jnGlowTile 2.6s ease-in-out infinite;}
@keyframes jnPulse{0%,100%{opacity:.75;scale:.94;}50%{opacity:1;scale:1.08;}}
@keyframes jnSpin{to{rotate:360deg;}}
@keyframes jnRayIn{from{opacity:0}to{opacity:.85}}
@keyframes jnTwinkle{0%,100%{opacity:0;scale:.3;}45%{opacity:1;scale:1.15;}70%{opacity:.6;scale:.8;}}
@keyframes jnGlowTile{0%,100%{box-shadow:0 0 2.2cqw rgba(255,177,57,.35),inset 0 1px 0 rgba(255,235,170,.3);}50%{box-shadow:0 0 4.2cqw rgba(255,190,80,.75),inset 0 1px 0 rgba(255,235,170,.4);}}
@media(max-width:1000px){
  .jn-card.gold .jn-fx{right:34px;top:36px;left:auto;width:0;height:0;position:absolute;}
  .jn-card.gold .jn-gl{width:150px;height:150px;translate:-50% -50%;opacity:1;animation:jnPulse 2.6s ease-in-out infinite;}
  .jn-card.gold .jn-ray{width:130px;height:130px;translate:-50% -50%;opacity:.85;animation:jnSpin 14s linear infinite;}
  .jn-card.gold .jn-sp{translate:var(--dx) var(--dy);animation:jnTwinkle 2.2s ease-in-out infinite;animation-delay:var(--dl);}
  .jn-card.gold .jn-ico{animation:jnGlowTile 2.6s ease-in-out infinite;}
}@media(prefers-reduced-motion:reduce){
  .tj *,.tj *::before,.tj *::after{transition:none!important;animation:none!important;}
}