.routes-page{--route-accent:#f5a524;--route-glow:rgba(245,165,36,.2);background:#0a111b;color:#f5f7fb;overflow:hidden;isolation:isolate;font-family:Vazirmatn,system-ui,sans-serif}
.routes-accent-blue{--route-accent:#68b9ff;--route-glow:rgba(104,185,255,.19)}
.routes-accent-violet{--route-accent:#c39aff;--route-glow:rgba(195,154,255,.19)}
.routes-page *{box-sizing:border-box}
.routes-page a{color:inherit;text-decoration:none}
.routes-breadcrumb{width:min(1180px,calc(100% - 3rem));margin:auto;padding:1.15rem 0;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;color:#a7b2c1;font-size:.76rem}
.routes-breadcrumb a:hover,.routes-breadcrumb a:focus-visible{color:#ffbc53}
.routes-breadcrumb [aria-current]{color:#fff}
.routes-hero{position:relative;min-height:min(690px,83svh);padding:clamp(3.5rem,8vw,8rem) max(1.5rem,calc((100vw - 1180px)/2));display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:2rem;background:radial-gradient(circle at 80% 46%,var(--route-glow),transparent 39%),linear-gradient(145deg,#0b1421,#101927 62%,#0a111b)}
.routes-hero:after{content:"";position:absolute;inset:auto 0 0;height:1px;background:linear-gradient(90deg,transparent,#445161,transparent)}
.routes-hero__copy{position:relative;z-index:1}
.routes-kicker{color:var(--route-accent);font-size:.72rem;font-weight:800;letter-spacing:.19em;direction:ltr;display:inline-block}
.routes-hero h1{font-size:clamp(2.7rem,6.2vw,6rem);line-height:1.24;letter-spacing:-.055em;font-weight:900;margin:1.1rem 0 1rem;max-width:780px}
.routes-hero h1 em{font-style:normal;color:var(--route-accent)}
.routes-hero p{font-size:clamp(.96rem,1.25vw,1.12rem);line-height:2;max-width:600px;color:#b7c2d0;margin:0 0 2rem}
.routes-hero__actions{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap}
.routes-hero__jump,.routes-finish a:first-child{display:inline-flex;align-items:center;gap:1rem;background:var(--route-accent);color:#101722!important;font-weight:900;padding:.9rem 1.5rem;border-radius:14px;transition:transform .2s,filter .2s}
.routes-hero__jump:hover,.routes-finish a:first-child:hover{transform:translateY(-3px);filter:brightness(1.08)}
.routes-hero__secondary{color:#c2cddd!important;border-bottom:1px solid #556174;padding:.45rem 0}
.routes-hero__art{position:relative;min-height:330px;display:grid;place-items:center;perspective:700px}
.routes-orbit{position:absolute;display:block;aspect-ratio:1;border:1px solid rgba(232,239,247,.15);border-radius:50%;transform:rotateX(64deg) rotate(-24deg)}
.routes-orbit--one{width:min(36vw,450px)}.routes-orbit--two{width:min(27vw,330px);border-color:var(--route-accent);opacity:.35}
.routes-hero__symbol{position:relative;display:grid;place-items:center;min-width:170px;height:170px;padding:0 1rem;border-radius:35px;background:linear-gradient(135deg,#273447,#101a29);border:1px solid #526175;box-shadow:16px 24px 2px #070e18,0 30px 75px var(--route-glow),inset 0 1px 10px #61738955;color:var(--route-accent);font-family:ui-monospace,monospace;font-weight:900;font-size:clamp(2.4rem,5vw,4rem);direction:ltr;transform:rotateX(12deg) rotateY(-18deg) rotateZ(-9deg)}
.routes-section-heading{text-align:center;max-width:660px;margin:0 auto 3rem}.routes-section-heading>span{color:var(--route-accent);font-weight:800;font-size:.78rem}.routes-section-heading h2{font-size:clamp(2rem,4vw,3.2rem);line-height:1.35;margin:.5rem 0}.routes-section-heading p{color:#aab6c6;line-height:1.95;margin:0}
.routes-choice{padding:6rem max(1.5rem,calc((100vw - 1180px)/2)) 7rem;background:radial-gradient(circle at 50% 0,#182334,#0a111b 70%);scroll-margin-top:5rem}
.routes-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.35rem}
.routes-card{min-height:360px;display:flex;flex-direction:column;align-items:flex-start;padding:2rem;border:1px solid #344356;border-radius:24px;background:linear-gradient(150deg,#182536,#101a29 70%);position:relative;overflow:hidden;transition:transform .25s,border-color .25s,box-shadow .25s}
.routes-card:before{content:"";position:absolute;top:0;right:2rem;width:75px;height:3px;background:var(--route-accent);box-shadow:0 0 18px var(--route-accent)}
.routes-card:hover,.routes-card:focus-visible{transform:translateY(-6px);border-color:var(--route-accent);box-shadow:0 22px 55px var(--route-glow)}
@media(prefers-reduced-motion:no-preference){.routes-card.is-visible{animation:route-enter .6s ease-out both}}
.routes-card__symbol{display:grid;place-items:center;width:76px;height:70px;flex:0 0 76px;padding:0;background:#0b1421;border:1px solid #35465b;border-radius:17px;color:var(--route-accent);font:800 1.75rem ui-monospace,monospace;direction:ltr;margin-bottom:1.6rem}
.routes-card__count{color:var(--route-accent);font-size:.75rem;font-weight:800}.routes-card strong{font-size:1.6rem;margin:.5rem 0}.routes-card__description{color:#a9b7c8;font-size:.91rem;line-height:1.9}.routes-card__link{margin-top:auto;padding-top:2rem;color:var(--route-accent);font-weight:800;font-size:.88rem}
.routes-index-note{text-align:center;border-top:1px solid #263547;padding:2rem 1.5rem 3rem;color:#a9b7c8;display:flex;justify-content:center;align-items:center;gap:.8rem}.routes-index-note p{margin:0;line-height:1.8}.routes-index-note a{color:#f5a524;text-decoration:underline}
.routes-hero--detail{min-height:min(600px,75svh)}
.routes-progress{position:sticky;top:80px;z-index:15;height:3px;background:#243043}.routes-progress>span{display:block;height:100%;width:0;background:var(--route-accent);box-shadow:0 0 14px var(--route-accent);transition:width .08s linear}
.routes-roadmap{padding:6rem max(1.5rem,calc((100vw - 1180px)/2)) 4rem;background:radial-gradient(circle at 50% 40%,#172233,#0a111b 74%);scroll-margin-top:5rem}
.routes-track{position:relative;max-width:1000px;margin:0 auto;display:grid;gap:3.5rem;padding:1.5rem 0 3rem}
.routes-track__line{position:absolute;top:0;bottom:0;left:50%;width:3px;transform:translateX(-50%);background:repeating-linear-gradient(to bottom,#354357 0 26px,transparent 26px 39px);border-radius:10px}
.routes-track__line>span{display:block;width:100%;height:0;background:var(--route-accent);box-shadow:0 0 15px var(--route-accent);border-radius:10px}
.routes-step{position:relative;width:calc(50% - 54px);min-height:250px;margin-right:auto;scroll-margin-top:7rem}.routes-step:nth-of-type(even){margin-left:auto;margin-right:0}
.routes-step__marker{position:absolute;top:2.2rem;right:-79px;display:grid;place-items:center;width:50px;height:50px;border:2px solid #66788c;border-radius:50%;background:#101b2a;color:#d8e0e8;font-weight:900;z-index:1;transition:background .3s,color .3s,box-shadow .3s}
.routes-step:nth-of-type(even) .routes-step__marker{right:auto;left:-79px}
.routes-step.is-current .routes-step__marker,.routes-step.is-complete .routes-step__marker{background:var(--route-accent);border-color:var(--route-accent);color:#111824;box-shadow:0 0 25px var(--route-glow)}
.routes-step__card{padding:1.7rem 1.9rem;border:1px solid #344357;border-radius:23px;background:linear-gradient(145deg,#1a293b,#101a29);box-shadow:0 20px 45px #02070f35;transition:transform .45s,border-color .4s,opacity .45s}
@media(prefers-reduced-motion:no-preference){.routes-step.is-visible .routes-step__card{animation:route-enter .55s ease-out both}@keyframes route-enter{from{opacity:.55;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}}
.routes-step.is-current .routes-step__card{border-color:var(--route-accent);transform:translateY(-5px)}
.routes-step__code{direction:ltr;display:inline-block;color:var(--route-accent);font:.8rem ui-monospace,monospace;letter-spacing:.14em}.routes-step h3{font-size:1.6rem;margin:.7rem 0}.routes-step p{color:#b4c0cf;line-height:1.95;font-size:.94rem;margin:0}
.routes-step__outcome{border-top:1px solid #344357;margin-top:1.4rem;padding-top:1rem;display:grid;gap:.3rem}.routes-step__outcome span{color:var(--route-accent);font-size:.74rem}.routes-step__outcome strong{font-size:.87rem;font-weight:600;line-height:1.9}
.routes-finish{text-align:center;padding:6rem 1.5rem;background:radial-gradient(circle at 50% 10%,var(--route-glow),transparent 60%),#0d1724}.routes-finish h2{font-size:clamp(2rem,4vw,3.6rem);margin:.8rem 0}.routes-finish p{max-width:580px;margin:0 auto 2rem;line-height:1.9;color:#b1bdcc}.routes-finish>div{display:flex;justify-content:center;align-items:center;gap:1.5rem;flex-wrap:wrap}.routes-finish a:last-child{color:#d4deeb;text-decoration:underline}
.routes-other{padding:3rem max(1.5rem,calc((100vw - 1180px)/2)) 5rem;border-top:1px solid #28394b}.routes-other h2{font-size:1.25rem}.routes-other>div{display:flex;gap:1rem;flex-wrap:wrap}.routes-other a{padding:1rem 1.5rem;border:1px solid #39485c;border-radius:12px}.routes-other a:hover{border-color:var(--route-accent)}
.routes-page :focus-visible{outline:3px solid var(--route-accent);outline-offset:4px}
@media(max-width:800px){.routes-hero{min-height:0;grid-template-columns:1fr;padding:3.5rem 1.5rem 4rem;gap:1rem}.routes-hero__art{min-height:230px}.routes-orbit--one{width:260px}.routes-orbit--two{width:200px}.routes-hero__symbol{min-width:135px;height:135px;border-radius:25px;box-shadow:11px 16px 2px #070e18,0 20px 45px var(--route-glow)}.routes-card-grid{grid-template-columns:1fr}.routes-card{min-height:300px}.routes-choice,.routes-roadmap{padding:4rem 1.25rem}.routes-track{gap:1.7rem;padding-right:58px}.routes-track__line{left:auto;right:18px;transform:none}.routes-step,.routes-step:nth-of-type(even){width:100%;margin:0;min-height:0}.routes-step__marker,.routes-step:nth-of-type(even) .routes-step__marker{right:-60px;left:auto;width:40px;height:40px;top:1.6rem}.routes-step__card{padding:1.4rem}.routes-progress{top:80px}.routes-index-note{align-items:flex-start;text-align:right}}
@media(max-width:480px){.routes-hero h1{font-size:clamp(2.45rem,11vw,3.4rem)}.routes-hero__art{min-height:185px}.routes-hero__symbol{min-width:105px;height:105px;font-size:2rem}.routes-orbit--one{width:205px}.routes-orbit--two{width:160px}.routes-step h3{font-size:1.35rem}.routes-breadcrumb{width:calc(100% - 2.5rem)}.routes-roadmap{padding-inline:1rem}.routes-track{padding-right:50px}.routes-step__marker,.routes-step:nth-of-type(even) .routes-step__marker{right:-52px}}
@media(prefers-reduced-motion:reduce){.routes-page *, .routes-page *:before,.routes-page *:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}.routes-step__card{opacity:1!important;transform:none!important}}

/* The public website uses a light palette; keep the roadmap in that system. */
.routes-page{--route-accent:#a85e00;--route-glow:rgba(245,165,36,.16);background:#f5f7fb;color:#14213a}
.routes-accent-blue{--route-accent:#216baf;--route-glow:rgba(57,139,215,.14)}
.routes-accent-violet{--route-accent:#7843b6;--route-glow:rgba(147,103,205,.13)}
.routes-breadcrumb{color:#62748b}.routes-breadcrumb [aria-current]{color:#192942}.routes-breadcrumb a:hover,.routes-breadcrumb a:focus-visible{color:var(--route-accent)}
.routes-hero{background:radial-gradient(circle at 78% 45%,var(--route-glow),transparent 39%),linear-gradient(145deg,#fff,#f5f8fc 65%,#edf2f8)}
.routes-hero:after{background:linear-gradient(90deg,transparent,#dce4ef,transparent)}
.routes-hero p,.routes-section-heading p,.routes-finish p{color:#566b83}
.routes-hero__jump,.routes-finish a:first-child{color:#fff!important}
.routes-hero__secondary{color:#38506b!important;border-color:#bccbdc}
.routes-orbit{border-color:rgba(37,67,106,.18)}.routes-orbit--two{border-color:var(--route-accent)}
.routes-hero__symbol{background:linear-gradient(135deg,#fff,#e6edf7);border-color:#c3d0e0;box-shadow:16px 24px 2px #dce5f0,0 25px 65px var(--route-glow),inset 0 1px 12px #fff;color:var(--route-accent)}
.routes-choice{background:radial-gradient(circle at 50% 0,#eaf0f8,#f7f9fc 72%)}
.routes-card{border-color:#d9e3ee;background:linear-gradient(150deg,#fff,#f7f9fc 80%);box-shadow:0 16px 35px rgba(24,48,83,.055)}
.routes-card__symbol{background:#fff;border-color:#dce5ef}.routes-card__description{color:#60748b}
.routes-index-note{border-color:#dce5ef;color:#536980}.routes-index-note a{color:#aa6100}
.routes-progress{background:#e2e9f2}
.routes-roadmap{background:radial-gradient(circle at 50% 40%,#edf3fa,#f8fafc 75%)}
.routes-track__line{background:repeating-linear-gradient(to bottom,#cad7e7 0 26px,transparent 26px 39px)}
.routes-step__marker{background:#fff;border-color:#a9bcd1;color:#435a74}
.routes-step.is-current .routes-step__marker,.routes-step.is-complete .routes-step__marker{color:#fff}
.routes-step__card{border-color:#dbe4ee;background:linear-gradient(145deg,#fff,#f8fafd);box-shadow:0 20px 45px rgba(30,52,82,.07)}
.routes-step p{color:#5d7187}.routes-step__outcome{border-color:#e1e8f0}
.routes-finish{background:radial-gradient(circle at 50% 10%,var(--route-glow),transparent 60%),#edf3fa}
.routes-finish a:last-child{color:#38526f}.routes-other{background:#f7f9fc;border-color:#dce5ef}.routes-other a{border-color:#cad8e7}.routes-other a:hover{background:#fff}
.routes-flight-icon{position:fixed;top:0;left:0;z-index:20;pointer-events:none;display:grid;place-items:center;width:52px;height:52px;border:1px solid color-mix(in srgb,var(--route-accent) 38%,#fff);border-radius:15px;background:#fff;color:var(--route-accent);box-shadow:0 12px 28px rgba(25,49,78,.16),0 0 0 5px rgba(255,255,255,.65);font:900 1.2rem ui-monospace,monospace;direction:ltr;transform-origin:center;will-change:transform,opacity}
.routes-flight-icon.is-landed{box-shadow:0 5px 16px rgba(25,49,78,.12)}
.routes-flight-icon[data-route-flight="hub"]{width:76px;height:70px;border-radius:17px;font-size:1.7rem}
.routes-step__card{position:relative;padding-left:5.4rem}
.routes-step__icon-anchor{position:absolute;left:1.55rem;top:1.5rem;display:grid;place-items:center;width:52px;height:52px;border:1px solid #d9e4ef;border-radius:15px;background:#fff;color:var(--route-accent);font:900 1.2rem ui-monospace,monospace;direction:ltr}
.routes-card__symbol svg,.routes-hero__symbol svg,.routes-step__icon-anchor svg,.routes-flight-icon svg{display:block;width:55%;height:55%;overflow:visible}
.routes-motion-ready .routes-step__icon-anchor svg,.routes-motion-ready .routes-card__symbol svg{visibility:hidden}
.routes-motion-ready .routes-card__symbol{background:transparent;border-color:transparent}
@media(max-width:800px){.routes-hero__symbol{box-shadow:11px 16px 2px #dce5f0,0 20px 45px var(--route-glow)}.routes-flight-icon{width:40px;height:40px;border-radius:12px;font-size:.95rem}.routes-flight-icon[data-route-flight="hub"]{width:76px;height:70px}}
@media(max-width:800px){.routes-step__card{padding-left:4.6rem}.routes-step__icon-anchor{width:40px;height:40px;left:1.1rem;top:1.2rem;border-radius:12px}}
@media(prefers-reduced-motion:reduce){.routes-flight-icon{display:none}}
.routes-accent-teal{--route-accent:#0D827C;--route-glow:rgba(31,157,151,.15)}
.routes-accent-rose{--route-accent:#B5456A;--route-glow:rgba(210,89,129,.14)}
@media(min-width:801px){.routes-card-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.routes-card{grid-column:span 2}.routes-card:nth-child(4):nth-last-child(2){grid-column:2/span 2}}
@media(max-width:1023px){body.learning-route-page .public-mobile-bottom-nav{right:0;bottom:0;left:0;max-width:none;border-radius:1.15rem 1.15rem 0 0;border-bottom:0;padding-bottom:env(safe-area-inset-bottom,0px)}body.learning-route-page .public-mobile-bottom-nav-items{border-radius:1.15rem 1.15rem 0 0}}
@media(max-width:800px){.routes-hero,.routes-hero--detail{padding:1.35rem 1.25rem 3rem;gap:.5rem}.routes-hero__art{grid-row:1;min-height:220px;margin:0 auto .65rem;width:min(100%,340px)}.routes-hero__copy{grid-row:2}.routes-hero h1{margin:.55rem 0 .8rem}.routes-hero p{margin-bottom:1.35rem}.routes-hero__jump{padding:.8rem 1.25rem}}
@media(max-width:480px){.routes-hero__art{min-height:205px}.routes-orbit--one{width:230px}.routes-orbit--two{width:170px}.routes-hero__symbol{min-width:110px;height:110px}}
.routes-hero__mobile-icons{display:none}
@media(max-width:800px){
  .routes-hero__mobile-icons{position:absolute;inset:0;display:block;pointer-events:none}
  .routes-motion-ready .routes-hero__mobile-icon{visibility:hidden}
  .routes-hero__mobile-icon{position:absolute;display:grid;place-items:center;width:48px;height:48px;border:1px solid color-mix(in srgb,var(--route-accent) 35%,#fff);border-radius:14px;color:var(--route-accent);background:#fff;box-shadow:0 8px 20px rgba(25,49,78,.12)}
  .routes-hero__mobile-icon svg{width:60%;height:60%}
  .routes-hero__mobile-icon:nth-child(1){top:8%;right:68%;transform:rotate(-12deg)}
  .routes-hero__mobile-icon:nth-child(2){top:6%;left:68%;transform:rotate(11deg)}
  .routes-hero__mobile-icon:nth-child(3){top:55%;right:74%;transform:rotate(10deg)}
  .routes-hero__mobile-icon:nth-child(4){top:53%;left:74%;transform:rotate(-10deg)}
  .routes-hero__mobile-icon:nth-child(5){bottom:0;right:43%;transform:rotate(8deg)}
  .routes-index .routes-card__symbol{width:54px;height:54px;flex-basis:54px;border-radius:14px}
  .routes-flight-icon[data-route-flight="hub"]{width:48px;height:48px;border-radius:14px;font-size:1rem}
  .routes-flight-icon[data-route-flight="hub"] svg{width:60%;height:60%}
  .routes-card-reveal-ready .routes-card__symbol{opacity:0;transform:translateY(-24px) rotate(-16deg) scale(.78);transition:opacity .4s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
  .routes-card-reveal-ready .routes-card.is-visible .routes-card__symbol{opacity:1;transform:none}
}
