:root{--ink:#0b0b0d;--a1:#6d4dff;--a2:#2f49ff;--grad:linear-gradient(90deg,#8a5cff,#2f49ff);--mut:#8c8c94;
--fa:"Vazirmatn",Tahoma,sans-serif;--en:"Unbounded","Arial Black",Arial,sans-serif;--mono:"JetBrains Mono",ui-monospace,Menlo,monospace;--ease:cubic-bezier(.22,1,.36,1)}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#07070b;color:var(--ink);font-family:var(--fa);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{overscroll-behavior:none}
::selection{background:#2f49ff;color:#fff}
#scroll{height:1300vh}
#stage{position:fixed;inset:0;overflow:hidden;background:#07070b}
.layer{position:absolute;inset:0;overflow:hidden;isolation:isolate}
#side{z-index:1;transform-origin:50% 30%;background:linear-gradient(180deg,#dfe4ee 0%,#efe9e4 46%,#f8f1ea 70%,#fbf7f2 100%)}
#side:before{content:"";position:absolute;right:16%;top:24%;width:46vw;height:46vw;border-radius:50%;background:radial-gradient(closest-side,rgba(255,190,140,.38),rgba(255,190,140,0));pointer-events:none}
#top{z-index:2}#portL{z-index:3;background:#012537}#ocean{z-index:4}#clouds{z-index:5}#sky{z-index:6}#map{z-index:7}#cta{z-index:8}
svg.full{position:absolute;inset:0;width:100%;height:100%;display:block}
.en{font-family:var(--en);direction:ltr;unicode-bidi:isolate}
.mono{font-family:var(--mono);direction:ltr;unicode-bidi:isolate;letter-spacing:.12em}
.gt{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.ln{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.ln>span{display:block;will-change:transform}
.ey{font-size:10.5px;color:var(--mut);margin-bottom:20px;display:flex;align-items:center;gap:10px;justify-content:flex-end}
.ey:before{content:"";width:22px;height:1px;background:currentColor;opacity:.6}

/* PRELOADER */
#pre{position:fixed;inset:0;z-index:100;background:#07070b;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;transition:clip-path 1.2s var(--ease);clip-path:inset(0 0 0 0)}
#pre.done{clip-path:inset(0 0 100% 0)}
#pre .lg{font:900 clamp(40px,7vw,96px)/1 var(--en);letter-spacing:.08em;display:flex;gap:.02em}
#pre .lg i{font-style:normal;display:inline-block;transform:translateY(110%);animation:up .9s var(--ease) forwards}
#pre .lg i:nth-child(2){animation-delay:.06s}#pre .lg i:nth-child(3){animation-delay:.12s}#pre .lg i:nth-child(4){animation-delay:.18s}#pre .lg i:nth-child(5){animation-delay:.24s}
#pre .lgw{overflow:hidden}
@keyframes up{to{transform:none}}
#pre .pb{width:220px;height:1px;background:#2a2a30;position:relative;overflow:hidden}
#pre .pb b{position:absolute;inset:0;background:var(--grad);transform-origin:left;transform:scaleX(0);transition:transform .4s var(--ease)}
#pre .mono{font-size:11px;color:#8d8d96}

/* NAV / HUD */
.dif{color:#fff;mix-blend-mode:difference;pointer-events:none}
#nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;padding:24px 3.6vw}
#nav a{pointer-events:auto;color:#fff;text-decoration:none}
.logo{display:flex;align-items:center;gap:10px;font:900 19px var(--en);letter-spacing:.16em;direction:ltr}
.logo svg{width:26px;height:26px}
#nav ul{display:flex;gap:30px;list-style:none;font-size:13px;font-weight:500}
#nav ul a{position:relative;opacity:.75;transition:opacity .3s;display:flex;gap:7px;align-items:baseline}
#nav ul a i{font:500 9px var(--mono);font-style:normal;opacity:.6}
#nav ul a:hover,#nav ul a.on{opacity:1}
#nav ul a:after{content:"";position:absolute;right:0;left:0;bottom:-7px;height:1px;background:#fff;transform:scaleX(0);transition:transform .5s var(--ease);transform-origin:right}
#nav ul a:hover:after,#nav ul a.on:after{transform:scaleX(1)}
.btn-q{border:1px solid rgba(255,255,255,.7);border-radius:40px;padding:10px 22px;font-size:13px;font-weight:700;transition:background .3s,color .3s}
.btn-q:hover{background:#fff;color:#000!important}
#tele{position:fixed;top:88px;left:3.6vw;z-index:60;font-size:10px;line-height:2;letter-spacing:.14em}
#tele i{font-style:normal;opacity:.5;display:inline-block;width:44px}
#tele .st{display:inline-flex;align-items:center;gap:7px}
#tele .st:before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;animation:bl 1.4s infinite}
@keyframes bl{50%{opacity:.2}}
#trk{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);z-index:60;width:min(640px,64vw)}
#trk .rail{position:relative;height:1px;background:rgba(255,255,255,.3);margin:0 6px}
#trk .rail b{position:absolute;inset:0;background:#fff;transform-origin:right;transform:scaleX(0)}
#trk .box{position:absolute;top:-5px;right:0;width:16px;height:10px;border:1px solid #fff;background:#000;margin-right:-8px}
#trk .nodes{position:absolute;inset:0;display:flex;justify-content:space-between;top:-4px}
#trk .nd{width:9px;height:9px;border-radius:50%;border:1px solid #fff;background:#000;position:relative;transition:background .4s}
#trk .nd.on{background:#fff}
#trk .nd span{position:absolute;top:16px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:11px;opacity:.55;transition:opacity .4s}
#trk .nd span em{font:500 8.5px var(--mono);font-style:normal;margin-left:5px;opacity:.7}
#trk .nd.cur span{opacity:1}
#lb1,#lb2{position:fixed;left:0;right:0;height:0;background:#000;z-index:55;pointer-events:none}
#lb1{top:0}#lb2{bottom:0}
#chap{position:fixed;left:3.6vw;top:21vh;z-index:61;pointer-events:none;color:#fff;mix-blend-mode:difference}
#chap .n{font:800 clamp(80px,9vw,150px)/.9 var(--en);color:transparent;-webkit-text-stroke:1px #fff;direction:ltr;text-align:left}
#chap .t{font-weight:900;font-size:clamp(26px,2.4vw,40px);margin-top:10px;text-align:left}
#chap .s{font-size:10px;margin-top:8px;opacity:.7;text-align:left}
#chap .rl{height:1px;background:#fff;margin-top:14px;transform-origin:left;width:180px}
#cur{position:fixed;left:0;top:0;z-index:90;width:42px;height:42px;margin:-21px 0 0 -21px;border:1px solid #fff;border-radius:50%;mix-blend-mode:difference;pointer-events:none;display:grid;place-items:center;transition:width .3s,height .3s,margin .3s}
#cur:after{content:"";width:4px;height:4px;background:#fff;border-radius:50%}
#cur.big{width:74px;height:74px;margin:-37px 0 0 -37px}
@media (hover:none){#cur{display:none}}
#grain{position:fixed;inset:-100px;z-index:58;pointer-events:none;opacity:.12;mix-blend-mode:overlay;animation:gr 1s steps(8) infinite}
@keyframes gr{0%{transform:translate(0,0)}12%{transform:translate(-40px,22px)}25%{transform:translate(30px,-50px)}37%{transform:translate(-60px,-10px)}50%{transform:translate(20px,40px)}62%{transform:translate(-20px,-30px)}75%{transform:translate(50px,10px)}87%{transform:translate(-10px,50px)}}
#veil{position:fixed;inset:0;z-index:54;background:#07070b;opacity:0;pointer-events:none}

/* MAP (prologue + arrival) */
#map{background:#07070b;color:#fff}
#mapC{position:absolute;inset:0;width:100%;height:100%}
#mVig{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,transparent 40%,rgba(0,0,0,.6) 100%);pointer-events:none}
#pro{position:absolute;top:17vh;right:4.5vw;width:min(36vw,560px);text-align:right}
#pro .ey{color:#8d8d98}
#pro h1{font-weight:900;font-size:clamp(34px,4.3vw,70px);line-height:1.12;color:#fff}
#pro p{margin-top:22px;color:#a2a2ad;font-size:clamp(13.5px,1.02vw,16px);line-height:2;max-width:420px}
#pro .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
#pro .chips span{border:1px solid #2b2b35;border-radius:30px;padding:7px 14px;font-size:10px;color:#c9c9d3;background:rgba(255,255,255,.03)}
#hint{position:absolute;left:50%;bottom:92px;transform:translateX(-50%);color:#fff;font-size:11.5px;display:flex;align-items:center;gap:12px;white-space:nowrap}
#hint .m{width:20px;height:32px;border:1px solid #fff;border-radius:12px;position:relative}
#hint .m:after{content:"";position:absolute;left:50%;top:6px;width:2px;height:7px;margin-left:-1px;background:#fff;border-radius:2px;animation:wh 1.8s infinite}
@keyframes wh{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(11px)}}
#arr{position:absolute;top:16vh;right:4.5vw;width:min(38vw,600px);text-align:right}
#arr .ey{color:#8d8d98}
#arr h2{font-weight:900;font-size:clamp(32px,4.1vw,66px);line-height:1.12;color:#fff}
#arr h2 .g{color:#5d5d68}
#stamp{display:inline-flex;flex-direction:column;align-items:center;border:2px solid #7d6bff;color:#9d8cff;border-radius:10px;padding:10px 20px;margin-top:28px;font:800 22px var(--en);letter-spacing:.12em;transform:rotate(-8deg);direction:ltr}
#stamp small{font:500 9px var(--mono);letter-spacing:.2em;margin-top:4px;color:#8f86c9}
.astats{display:flex;gap:34px;margin-top:5vh;flex-wrap:wrap}
.astats b{display:block;font:700 clamp(22px,2.1vw,34px) var(--en);direction:ltr;text-align:right;color:#fff}
.astats span{font-size:11.5px;color:#83838f}
#tcol{position:absolute;right:4.5vw;top:0;width:min(470px,36vw)}
.tm{display:grid;grid-template-columns:58px 1fr;gap:18px;padding:24px 22px;margin-bottom:14px;border:1px solid rgba(255,255,255,.08);border-radius:20px;background:rgba(18,18,26,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:#fff}
.av{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;font-size:16px}
.tm q{display:block;font-size:14px;line-height:2.05;quotes:"«" "»";color:#e2e2ea}
.tm .who{margin-top:12px;font-weight:800;font-size:13px}
.tm .who span{display:block;font-weight:400;color:#8a8a96;font-size:12px;margin-top:2px}
.tm .tg{font-size:9px;color:#7d6bff;margin-bottom:8px}

/* CH01 SIDE */
#c1{position:absolute;top:15vh;right:4.5vw;width:min(31vw,500px);text-align:right;pointer-events:none}
#c1 h2{font-weight:900;font-size:clamp(28px,3.4vw,56px);line-height:1.13}
#c1 p{margin-top:20px;max-width:360px;color:#5e5e66;font-size:clamp(13px,1vw,15.5px);line-height:2}
#bol{position:absolute;left:3.6vw;top:24vh;width:300px;background:rgba(255,255,255,.78);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(0,0,0,.06);border-radius:16px;padding:18px 20px;box-shadow:0 24px 60px rgba(40,30,20,.12);pointer-events:none;overflow:hidden}
#bol .bh{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px dashed #d4d4da;padding-bottom:10px;margin-bottom:8px}
#bol .bh b{font-size:15px;font-weight:900}
#bol .bh span{font-size:8.5px;color:#8b8b93}
#bol dl div{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid #f0f0f2;font-size:12px}
#bol dt{font:500 8.5px var(--mono);letter-spacing:.14em;color:#9a9aa2;direction:ltr}
#bol dd{font-weight:700;color:#202024;text-align:left}
#bol dd.mono{font-size:10.5px;letter-spacing:.06em}
#bol .stamp{position:absolute;left:60px;bottom:26px;border:2px solid #2f49ff;color:#2f49ff;border-radius:8px;padding:5px 12px;font:800 17px var(--en);letter-spacing:.1em;display:flex;flex-direction:column;align-items:center;direction:ltr;mix-blend-mode:multiply}
#bol .stamp small{font:500 7.5px var(--mono);letter-spacing:.2em}
#bol .bar{height:3px;border-radius:2px;background:#ececf0;margin-top:12px;overflow:hidden}
#bol .bar b{display:block;height:100%;background:var(--grad);transform-origin:left}
#bol .bs{display:flex;justify-content:space-between;margin-top:7px;font-size:8.5px;color:#8b8b93}

/* BAND CH02 */
#band{position:absolute;left:0;right:0;bottom:0;color:#fff;padding:7vh 5vw 0}
.bt{display:grid;grid-template-columns:1.15fr 1fr;gap:6vw;align-items:start}
.bt h2{font-weight:900;font-size:clamp(26px,3.1vw,50px);line-height:1.2}
.bt h2 .g{color:#4f4f57}
.bt p{color:#9c9ca5;font-size:clamp(13px,.95vw,15px);line-height:2.05;max-width:470px}
#bst{display:grid;grid-template-columns:repeat(4,1fr);margin-top:6vh;border-top:1px solid #222228}
#bst>div{padding:22px 26px 0 0;border-right:1px solid #222228}
#bst>div:first-child{border-right:0;padding-right:0}
#bst b{display:block;font:700 clamp(22px,2.2vw,36px) var(--en);direction:ltr;text-align:right}
#bst span{font-size:12.5px;color:#8c8c95;display:block;margin-top:6px}
#bst em{font:500 8.5px var(--mono);font-style:normal;color:#5c5c66;letter-spacing:.18em;display:block;margin-top:4px;direction:ltr;text-align:right}

/* ROAD */
#rel .head{position:absolute;top:15vh;right:4.5vw;width:33vw}
#rel h2{font-weight:900;font-size:clamp(30px,4vw,64px);line-height:1.1}
#rel h2 .g{color:#b9b9c0}
#rel .desc{position:absolute;bottom:13vh;right:4.5vw;width:27vw;font-size:13.5px;line-height:2.05;color:#5c5c64}
#rel .list{position:absolute;left:5.5vw;top:0;width:29vw}
.feat{position:absolute;left:0;width:100%;padding:22px 0 26px;border-bottom:1px solid #e7e7eb;will-change:transform,opacity}
.feat .hd{display:flex;align-items:center;justify-content:space-between}
.feat svg{width:28px;height:28px;stroke:var(--ink);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.feat .mono{font-size:9.5px;color:#a1a1a8}
.feat h4{font-size:19px;font-weight:800;margin:12px 0 4px}
.feat .en{font-size:8.5px;letter-spacing:.18em;color:var(--a2)}
.feat p{font-size:13px;line-height:2;color:#6a6a72;margin-top:8px}

/* PORT */
#portC{position:absolute;top:15vh;right:4.5vw;width:min(31vw,470px);text-align:right;color:#fff;pointer-events:none;background:rgba(8,12,24,.72);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.08);border-radius:22px;padding:30px 32px 32px;box-shadow:0 30px 80px rgba(0,0,0,.35)}
#portC .ey{color:#c9d3e6}
#portC h2{font-weight:900;font-size:clamp(30px,3.8vw,62px);line-height:1.12}
#portC h2 .g{color:rgba(255,255,255,.55)}
#portC p{margin-top:20px;color:#e3e8f2;font-size:clamp(13px,1vw,15.5px);line-height:2;max-width:380px}
#cLab{position:absolute;left:0;top:0;pointer-events:none;color:#fff;font-size:10px;white-space:nowrap;will-change:transform}
#cLab .bx{background:rgba(10,12,22,.82);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(140,120,255,.6);border-radius:10px;padding:9px 13px;line-height:1.75}
#cLab b{font-weight:700;color:#fff}
#cLab .s{color:#a99bff}
#cLab:before{content:"";position:absolute;left:-26px;top:50%;width:26px;height:1px;background:rgba(140,120,255,.8)}
#pVig{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,transparent 45%,rgba(0,8,20,.5) 100%);pointer-events:none}

/* OCEAN */
#ocean{background:#012537}
.cs{position:absolute;left:0;top:0;width:1000px;height:640px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,6,16,.42),rgba(0,6,16,0));will-change:transform;pointer-events:none}
#glint{position:absolute;inset:0;background:radial-gradient(ellipse 45% 32% at 72% 26%,rgba(170,210,255,.16),transparent 70%);mix-blend-mode:screen;pointer-events:none}
#oTex{position:absolute;inset:-2px;background-repeat:repeat;mix-blend-mode:screen;opacity:.55}
#shipW{position:absolute;left:0;top:0;width:848px;height:1264px;transform-origin:0 0;will-change:transform;
 -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24%,#000 76%,transparent 100%),linear-gradient(180deg,transparent 0,#000 9%,#000 86%,transparent 100%);-webkit-mask-composite:source-in;
 mask-image:linear-gradient(90deg,transparent 0,#000 24%,#000 76%,transparent 100%),linear-gradient(180deg,transparent 0,#000 9%,#000 86%,transparent 100%);mask-composite:intersect}
#shipW img{width:100%;height:100%;display:block}
#oVig{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 48%,transparent 30%,rgba(0,10,22,.55) 100%);pointer-events:none}
#oLines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#ret{position:absolute;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;pointer-events:none}
#ret i{position:absolute;width:9px;height:9px;border:1.5px solid #fff}
#ret i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0}#ret i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0}#ret i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0}#ret i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0}
#ret span{position:absolute;left:44px;top:50%;transform:translateY(-50%);font-size:9.5px;color:#fff;white-space:nowrap;background:rgba(0,10,25,.6);padding:6px 10px;border-radius:6px;line-height:1.7;border-left:2px solid #8a5cff}
#oHead{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;color:#fff;font-weight:900;font-size:clamp(32px,4.8vw,78px);line-height:1.14;pointer-events:none;text-shadow:0 10px 50px rgba(0,8,20,.7)}
#oHead .gt{background:linear-gradient(90deg,#b7a4ff,#7f9cff);-webkit-background-clip:text;background-clip:text}
#oHead .sm{display:block;font:500 11px var(--mono);letter-spacing:.3em;color:#9fb7d4;margin-bottom:22px;text-shadow:none}
.of{position:absolute;left:0;top:0;width:min(270px,22vw);color:#fff;will-change:transform,opacity}
.of .ic{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.35);display:grid;place-items:center;backdrop-filter:blur(6px);background:rgba(255,255,255,.06)}
.of svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.of h4{font-size:15.5px;font-weight:800;margin:12px 0 6px}
.of p{font-size:12.5px;line-height:1.95;color:#bcd0e6}
.of .mono{font-size:9px;color:#7fa3c7}

/* CLOUDS */
#clouds{pointer-events:none}
#clouds img{position:absolute;left:0;top:0;width:1100px;height:508px;will-change:transform,opacity}
#wo{position:absolute;inset:0;background:#f3f6fb;opacity:0}

/* SKY */
#sky{background:linear-gradient(180deg,#c9dbf2 0%,#e3ecf7 45%,#f5f8fc 100%)}
.tc{position:absolute;left:0;top:0;width:1100px;height:508px;z-index:1;opacity:.75;will-change:transform;pointer-events:none}
#plane{position:absolute;left:0;top:0;width:888px;height:922px;z-index:2;transform-origin:444px 461px;will-change:transform;pointer-events:none}
#plane img{position:absolute;inset:0;width:100%;height:100%}
#plane .sh{filter:brightness(0) blur(16px);opacity:.16;transform:translate(90px,120px) scale(.94)}
#skyH{position:absolute;top:15vh;right:4.5vw;width:min(36vw,560px);z-index:3;pointer-events:none}
#skyH h2{font-weight:900;font-size:clamp(30px,4vw,64px);line-height:1.12}
#skyH h2 .g{color:#9aa6b8}
#skyH p{margin-top:20px;max-width:400px;color:#4d5868;font-size:clamp(13px,1vw,15.5px);line-height:2}
#svcW{position:absolute;left:0;right:0;bottom:12vh;z-index:3;padding:0 5vw}
#svcW .hh{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:22px}
#svcW h3{font-weight:900;font-size:clamp(20px,1.9vw,30px)}
#svcW .hh .mono{font-size:10px;color:#6d7787}
#track{display:flex;gap:14px;will-change:transform}
.svc{flex:0 0 clamp(240px,21vw,300px);padding:24px 24px 26px;border-radius:20px;background:rgba(255,255,255,.62);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.9);box-shadow:0 20px 50px rgba(30,50,90,.08);transition:background .5s,transform .5s var(--ease)}
.svc .ix{font-size:9.5px;color:#8a93a3;display:flex;justify-content:space-between}
.svc svg{width:30px;height:30px;stroke:#0b0b0d;fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;margin-top:18px}
.svc h4{font-size:18px;font-weight:800;margin:14px 0 4px}
.svc .en{display:block;font-size:8.5px;color:#7b8494;letter-spacing:.18em;margin-bottom:10px}
.svc p{font-size:12.8px;line-height:1.95;color:#556070}
.svc.on{background:#0b0b0d;border-color:#0b0b0d}
.svc.on h4,.svc.on p{color:#fff}.svc.on svg{stroke:#9d8cff}.svc.on p{color:#a8a8b4}
#tprog{height:1px;background:rgba(0,0,0,.1);margin-top:22px;position:relative}
#tprog b{position:absolute;inset:0;background:var(--grad);transform-origin:right;transform:scaleX(0)}

/* CTA */
#cta{background:#0b0b0d;color:#fff;transform:translateY(100%);display:flex;flex-direction:column;justify-content:center;padding:0 5vw}
#cta .ey{color:#7c7c88}
#cta .big{font-weight:900;font-size:clamp(34px,5.6vw,92px);line-height:1.08}
#cta form{display:flex;gap:10px;margin-top:6vh;max-width:760px}
#cta input{flex:1;background:#151519;border:1px solid #2a2a31;border-radius:40px;padding:15px 24px;color:#fff;font-family:var(--fa);font-size:14px;outline:none;transition:border-color .3s;min-width:0}
#cta input:focus{border-color:#6d4dff}
.b{display:inline-flex;align-items:center;gap:10px;padding:14px 28px;border-radius:50px;font-weight:700;font-size:14px;border:0;cursor:pointer;font-family:var(--fa);color:#fff;background:var(--grad);transition:transform .3s var(--ease),box-shadow .3s;white-space:nowrap}
.b:hover{box-shadow:0 12px 30px rgba(80,70,255,.35)}
#cta .row{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:4vw;margin-top:8vh;border-top:1px solid #222228;padding-top:4vh}
#cta h5{font:700 9.5px var(--mono);letter-spacing:.22em;color:#62626c;margin-bottom:14px}
#cta .row p,#cta .row a{color:#d4d4da;font-size:13.5px;line-height:2.05;text-decoration:none;display:block}
#cta .copy{margin-top:5vh;font-size:11px;color:#55555e;display:flex;justify-content:space-between}

@media (max-width:820px){
 #nav ul{display:none}#tele{top:74px;font-size:9px}
 #trk{width:86vw;bottom:22px}#trk .nd span{font-size:9.5px}#trk .nd span em{display:none}
 #chap{top:auto;bottom:16vh}#chap .n{font-size:72px}
 #pro{width:90vw;right:5vw;top:auto;bottom:17vh}#pro p{display:none}#pro .chips{margin-top:16px}
 #hint{display:none}
 #c1{width:90vw;right:5vw;top:13vh}#c1 p{display:none}
 #bol{display:none}
 .bt{grid-template-columns:1fr;gap:12px}.bt p{display:none}#bst{grid-template-columns:1fr 1fr}#bst>div{padding:14px 0 0!important;border:0!important}
 #rel .head{width:90vw;right:5vw;top:11vh;background:rgba(255,255,255,.95);padding:14px 16px;border-radius:14px}
 #rel h2{font-size:30px}#rel .desc{display:none}
 #rel .list{left:5vw;width:90vw}
 .feat{background:rgba(255,255,255,.96);padding:16px 18px;border-radius:14px;border:0;box-shadow:0 12px 30px rgba(0,0,0,.1)}
 #portC{width:90vw;right:5vw;top:auto;bottom:11vh;padding:18px 20px}#portC p{display:none}#portC .ey{margin-bottom:10px}
 .of{width:40vw}.of p{display:none}
 #skyH{width:90vw;top:12vh}#skyH p{display:none}#svcW{bottom:14vh}
 #arr{width:90vw;top:11vh}.astats{gap:18px}#tcol{width:90vw}
 #cta .row{grid-template-columns:1fr 1fr}#cta form{flex-direction:column}
}
/* ===== CH07 · THE NETWORK (showreel chapter) ===== */
#net{z-index:8;color:#fff;pointer-events:none}
#cta{z-index:9}
#net.live{pointer-events:auto}
#netBg{position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 38% 52%,#141033 0%,#0a0918 55%,#07070b 100%);opacity:0}
#netC{position:absolute;inset:0;width:100%;height:100%;touch-action:pan-y;cursor:none}
#netSeam{position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:#fff;opacity:0;box-shadow:0 0 30px 8px rgba(160,140,255,.9),0 0 120px 40px rgba(110,80,255,.55);pointer-events:none;z-index:3}
#doors{position:absolute;inset:0;perspective:1500px;perspective-origin:50% 50%;pointer-events:none;z-index:4}
#doorsI{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.leaf{position:absolute;top:0;bottom:0;width:50%;overflow:hidden;will-change:transform;backface-visibility:hidden;
 background:
  linear-gradient(180deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,0) 30%,rgba(0,0,0,.28) 100%),
  repeating-linear-gradient(90deg,#28237a 0 18px,#3a33a0 18px 22px,#4a42bf 22px 25px,#2f2a8a 25px 31px,#1d195c 31px 37px,#28237a 37px 56px)}
.leaf.l{left:0;transform-origin:0 50%;border-right:2px solid #0b0a22}
.leaf.r{right:0;transform-origin:100% 50%;border-left:2px solid #0b0a22}
.leaf .rail{position:absolute;left:0;right:0;height:5.5vh;background:linear-gradient(180deg,#3d3794,#1a1752);box-shadow:inset 0 -2px 0 rgba(0,0,0,.4),inset 0 2px 0 rgba(255,255,255,.08)}
.leaf .rail.t{top:0}.leaf .rail.b{bottom:0}
.leaf .shade{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none}
.leaf .paint{position:absolute;top:0;bottom:0;width:200%;}
.leaf.l .paint{left:0}.leaf.r .paint{right:0}
.rod{position:absolute;top:3vh;bottom:3vh;width:14px;margin-left:-7px;border-radius:7px;background:linear-gradient(90deg,#4b4f63,#c9cee0 40%,#f1f3fa 52%,#80859a 80%,#3a3d4d);box-shadow:4px 0 10px rgba(0,0,0,.45)}
.rod:before,.rod:after{content:"";position:absolute;left:-9px;width:32px;height:28px;border-radius:4px;background:linear-gradient(180deg,#8a8fa3,#4b4f63);box-shadow:0 3px 6px rgba(0,0,0,.4)}
.rod:before{top:2.5vh}.rod:after{bottom:2.5vh}
.hdl{position:absolute;top:52%;width:12px;height:22vh;margin-left:-26px;border-radius:6px;transform-origin:50% 8px;background:linear-gradient(90deg,#55596d,#d9dcea 50%,#5c6074);box-shadow:5px 6px 12px rgba(0,0,0,.5);will-change:transform}
.hdl:before{content:"";position:absolute;left:-6px;top:-6px;width:24px;height:24px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#e9ecf5,#6d7186)}
.ret{position:absolute;top:calc(52% + 22vh - 34px);width:40px;height:20px;margin-left:-40px;border-radius:3px;background:linear-gradient(180deg,#7e8397,#3d4051)}
#seal{position:absolute;top:calc(52% + 6vh);width:30px;margin-left:-9px;will-change:transform}
#seal i{display:block;width:6px;height:46px;margin:0 auto;background:linear-gradient(90deg,#666,#ddd,#666);border-radius:3px}
#seal b{display:block;width:30px;height:58px;border-radius:6px 6px 12px 12px;background:linear-gradient(160deg,#ffd84a,#f2a900);box-shadow:0 6px 12px rgba(0,0,0,.45);margin-top:-6px;position:relative}
#seal b:after{content:"AS-889214";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-90deg);font:700 7.5px var(--mono);letter-spacing:.08em;color:#4a3300;white-space:nowrap}
.pt{position:absolute;font-family:var(--mono);color:rgba(255,255,255,.88);direction:ltr;text-align:left;letter-spacing:.06em}
.pt.code{top:12vh;right:12.4vw;font-size:clamp(16px,1.8vw,30px);font-weight:700;line-height:1.25;text-align:right}
.pt.code small{display:block;font-size:.5em;opacity:.7;letter-spacing:.2em}
.pt.csc{bottom:11vh;right:12.4vw;font-size:10px;line-height:2;opacity:.75;border:1px solid rgba(255,255,255,.35);padding:10px 14px;border-radius:4px}
.pt.mk{bottom:11vh;left:15vw;display:flex;align-items:center;gap:12px;font:900 20px var(--en);letter-spacing:.2em}
.pt.mk svg{width:34px;height:34px}
#net .dTxt{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;direction:rtl}
#net .dTxt .ey{justify-content:center;color:rgba(255,255,255,.7);font-size:11px}
#net .dTxt .ey:after{content:"";width:22px;height:1px;background:currentColor;opacity:.6}
#net .dTxt h2{font-weight:900;font-size:clamp(40px,6.4vw,118px);line-height:1.1;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.25)}
#net .dTxt h2 .gt{background:linear-gradient(90deg,#efeaff,#c6d1ff);-webkit-background-clip:text;background-clip:text}
#net .dTxt .cue{margin-top:3.4vh;font-size:12px;color:rgba(255,255,255,.65);letter-spacing:.3em}
#net .dTxt .cue b{display:inline-block;width:1px;height:26px;background:currentColor;vertical-align:middle;margin-left:12px;transform-origin:top;animation:cue 1.6s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* globe copy */
.nb{position:absolute;pointer-events:none;text-align:right}
#n1{top:17vh;right:4.5vw;width:min(34vw,540px)}
#n1 .ey,#n2 .ey,#n3 .ey{color:#9a93c9}
#n1 h2{font-weight:900;font-size:clamp(32px,4.1vw,68px);line-height:1.12}
#n1 h2 .g{color:#5d5a78}
#n1 p{margin-top:22px;color:#a6a3bd;font-size:clamp(14px,1.05vw,16px);line-height:2;max-width:400px;margin-right:0}
.keys{display:flex;gap:10px;margin-top:26px;justify-content:flex-start;flex-wrap:wrap}
.keys span{display:inline-flex;align-items:center;gap:9px;border:1px solid rgba(160,140,255,.35);border-radius:30px;padding:8px 14px 8px 12px;font-size:10px;color:#d6d0ff;background:rgba(110,80,255,.08);direction:ltr}
.keys span i{width:7px;height:7px;border-radius:50%;background:#8a5cff;box-shadow:0 0 10px #8a5cff;animation:bl 1.4s infinite}
#n2{top:15vh;right:4.5vw;width:min(36vw,520px)}
#n2 h2{font-weight:900;font-size:clamp(28px,3.2vw,52px);line-height:1.12}
#n2 h2 .g{color:#5d5a78}
#offs{margin-top:4vh;border-top:1px solid rgba(255,255,255,.1)}
.of7{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:16px;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.1);position:relative;transition:color .5s;color:#77738f}
.of7:before{content:"";position:absolute;right:-14px;top:50%;width:4px;height:0;margin-top:0;background:var(--grad);border-radius:2px;transition:height .5s var(--ease),margin .5s var(--ease)}
.of7 .cd{font:700 12px var(--mono);letter-spacing:.14em;direction:ltr;text-align:right}
.of7 .nm{font-weight:800;font-size:17px}
.of7 .nm span{display:block;font-weight:400;font-size:12.5px;margin-top:2px;opacity:.75}
.of7 .tz{font:500 14px var(--mono);direction:ltr;letter-spacing:.06em}
.of7 .tz em{display:block;font-style:normal;font-size:9px;opacity:.6;letter-spacing:.18em;text-align:left}
.of7.on{color:#fff}
.of7.on:before{height:70%;margin-top:-35%;height:38px;margin-top:-19px}
.of7.on .cd{color:#a99bff}
#n3{left:0;right:0;bottom:11vh;text-align:center}
#n3 .ey{justify-content:center}
#n3 .ey:after{content:"";width:22px;height:1px;background:currentColor;opacity:.6}
#n3 h2{font-weight:900;font-size:clamp(28px,3.6vw,60px);line-height:1.15}
#n3 .keys{justify-content:center;margin-top:20px}
#netLog{position:absolute;left:3.6vw;bottom:13vh;width:min(420px,36vw);font:500 10.5px var(--mono);letter-spacing:.08em;direction:ltr;text-align:left;color:#8f8aae;pointer-events:none}
#netLog .hd{display:flex;justify-content:space-between;color:#d6d0ff;border-bottom:1px solid rgba(255,255,255,.12);padding-bottom:8px;margin-bottom:6px}
#netLog .hd b{font-weight:700}
#netLog .hd span{display:inline-flex;align-items:center;gap:7px}
#netLog .hd span:before{content:"";width:6px;height:6px;border-radius:50%;background:#46e39a;box-shadow:0 0 8px #46e39a;animation:bl 1.4s infinite}
#logL div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:3px 0;animation:logIn .6s var(--ease)}
#logL div:first-child{color:#fff}
#logL div em{font-style:normal;color:#a99bff}
@keyframes logIn{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
#netCard{position:absolute;left:0;top:0;pointer-events:none;opacity:0;transition:opacity .25s;will-change:transform}
#netCard .bx{background:rgba(12,10,30,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(160,140,255,.55);border-radius:12px;padding:12px 16px;min-width:190px;text-align:right}
#netCard .c{font:700 10px var(--mono);letter-spacing:.18em;color:#a99bff;direction:ltr;text-align:right}
#netCard .n{font-weight:900;font-size:18px;margin-top:4px}
#netCard .r{font-size:12.5px;color:#a6a3bd;margin-top:2px}
#netCard .t{display:flex;justify-content:space-between;margin-top:10px;padding-top:8px;border-top:1px solid rgba(255,255,255,.1);font:500 10px var(--mono);letter-spacing:.1em;color:#d6d0ff;direction:ltr}
#cur b{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:700 8px var(--mono);letter-spacing:.16em;color:#fff;white-space:nowrap;opacity:0;transition:opacity .25s}
#cur.lbl{width:86px;height:86px;margin:-43px 0 0 -43px}
#cur.lbl b{opacity:1}
#cur.lbl:after{opacity:0}
@media (max-width:820px){
 #n1{width:90vw;right:5vw;top:auto;bottom:15vh}#n1 p{display:none}#n1 h2{font-size:34px}
 #n2{width:90vw;right:5vw;top:auto;bottom:12vh}#n2 h2{font-size:26px}#offs{margin-top:2vh}.of7{padding:8px 0;grid-template-columns:44px 1fr auto}.of7 .nm{font-size:14px}.of7 .nm span{display:none}
 #netLog{display:none}
 .pt.csc,.pt.code{display:none}
 .hdl{height:16vh}
 #net .dTxt .ey{display:none}#net .dTxt h2{font-size:44px}
}

.leaf.r .hdl{margin-left:14px}.leaf.r .ret{margin-left:0}
/* ===================== v6 · MOTION / INTERACTION LAYER ===================== */
#fxC{position:absolute;inset:0;width:100%;height:100%;z-index:10;pointer-events:none}
.ln{transform:skewY(var(--sk,0deg));transform-origin:100% 50%}
/* preloader v2 */
#pre{gap:30px}
#pre .pc{position:absolute;top:28px;left:3.6vw;right:3.6vw;display:flex;justify-content:space-between;font:500 10px var(--mono);letter-spacing:.2em;color:#6f6f7a;direction:ltr}
#pre .pc span:last-child{text-align:right}
#preN{position:absolute;left:3.6vw;bottom:3vh;font:800 clamp(90px,15vw,240px)/.8 var(--en);color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.22);direction:ltr;letter-spacing:-.02em}
#pre .pb{width:min(460px,72vw);height:1px;overflow:visible}
#pre .pb b{overflow:hidden}
.prn{position:absolute;top:-4px;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;border:1px solid #55555f;background:#07070b;transition:background .4s,border-color .4s,box-shadow .4s}
.prn span{position:absolute;top:16px;left:50%;transform:translateX(-50%);font:500 9.5px var(--mono);letter-spacing:.16em;color:#55555f;white-space:nowrap;transition:color .4s}
.prn.on{background:#fff;border-color:#fff;box-shadow:0 0 14px #8a5cff}
.prn.on span{color:#fff}
#pre #preT{margin-top:22px}
/* nav sound toggle */
.navR{display:flex;align-items:center;gap:22px;pointer-events:auto}
#snd{pointer-events:auto;background:none;border:0;color:#fff;cursor:pointer;display:flex;align-items:center;gap:10px;font:500 10px var(--mono);letter-spacing:.2em;padding:8px 0}
#snd .eq{display:flex;align-items:flex-end;gap:2px;height:14px}
#snd .eq i{width:2px;height:3px;background:#fff;transition:height .3s}
#snd.on .eq i{animation:eq .9s ease-in-out infinite alternate}
#snd.on .eq i:nth-child(2){animation-delay:-.3s}#snd.on .eq i:nth-child(3){animation-delay:-.6s}#snd.on .eq i:nth-child(4){animation-delay:-.15s}
@keyframes eq{0%{height:3px}100%{height:14px}}
/* instrument cluster */
#ins{position:fixed;top:86px;left:calc(3.6vw + 262px);z-index:60;width:250px;height:82px;opacity:0;pointer-events:none}
#insC{width:250px;height:82px;display:block}
/* chapter scan */
#scan{position:fixed;left:0;right:0;top:0;height:1px;z-index:57;pointer-events:none;opacity:0;background:#fff;box-shadow:0 0 18px 2px rgba(150,130,255,.8)}
#scan span{position:absolute;left:3.6vw;top:8px;font:500 10px var(--mono);letter-spacing:.24em;color:#fff;white-space:nowrap;direction:ltr}
#scan.go{animation:scan 1.1s cubic-bezier(.65,0,.35,1) forwards}
@keyframes scan{0%{opacity:0;transform:translateY(0)}8%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateY(100vh)}}
/* map node card */
#mapCard{position:fixed;left:0;top:0;z-index:59;pointer-events:none;opacity:0;transition:opacity .25s;will-change:transform}
#mapCard .bx{background:rgba(12,10,30,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(160,140,255,.55);border-radius:12px;padding:12px 16px;min-width:210px;text-align:right;color:#fff}
#mapCard .c{font:700 10px var(--mono);letter-spacing:.18em;color:#a99bff;direction:ltr;text-align:right}
#mapCard .n{font-weight:900;font-size:18px;margin-top:4px}
#mapCard .r{font-size:13px;color:#b9b6cf;margin-top:3px;line-height:1.8}
#mapCard .d{margin-top:9px;padding-top:8px;border-top:1px solid rgba(255,255,255,.1);font:500 10px var(--mono);letter-spacing:.12em;color:#d6d0ff;direction:ltr;text-align:left}
#mapC{transform-origin:50% 50%;will-change:transform}
/* warehouse light */
#rays{position:absolute;inset:-10% -10% 30% -10%;pointer-events:none;mix-blend-mode:soft-light;opacity:.9;
 background:repeating-linear-gradient(108deg,rgba(255,236,206,0) 0 70px,rgba(255,240,215,.75) 70px 120px,rgba(255,236,206,0) 120px 250px,rgba(255,240,215,.45) 250px 275px,rgba(255,236,206,0) 275px 380px);
 -webkit-mask-image:radial-gradient(ellipse 60% 75% at 82% 0%,#000 0%,transparent 70%);mask-image:radial-gradient(ellipse 60% 75% at 82% 0%,#000 0%,transparent 70%);
 filter:blur(10px);animation:rays 16s ease-in-out infinite alternate}
@keyframes rays{0%{transform:translateX(-50px) skewX(-4deg);opacity:.65}50%{opacity:1}100%{transform:translateX(60px) skewX(3deg);opacity:.75}}
#side{perspective:1300px}
#bol{transform-style:preserve-3d}
#bol:after{content:"";position:absolute;inset:-40%;pointer-events:none;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.65) 48%,rgba(160,140,255,.22) 52%,transparent 60%);transform:translateX(var(--shx,-60%));mix-blend-mode:overlay}
/* road time-of-day */
#tod{position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;z-index:0}
#topSvg{position:absolute}
#rel{position:absolute;inset:0;z-index:1;pointer-events:none}
#cLab .ldb{display:block;height:3px;margin-top:6px;background:rgba(255,255,255,.15);border-radius:2px;overflow:hidden}
#cLab .ldb i{display:block;height:100%;width:100%;background:var(--grad);transform-origin:left;transform:scaleX(0)}
/* cards: tilt + spotlight */
.svc,.tm{position:relative;overflow:hidden}
.svc>*,.tm>*{position:relative;z-index:1}
.svc:before,.tm:before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),rgba(138,92,255,.2),transparent 62%);opacity:0;transition:opacity .4s;pointer-events:none}
.svc.hov:before,.tm.hov:before{opacity:1}
.tm{transition:transform .5s var(--ease)}
/* CTA v2 */
#cta .ctaTop{display:grid;grid-template-columns:1fr minmax(440px,520px);gap:5vw;align-items:center}
#cta .big{font-size:clamp(32px,4.3vw,74px)}
#cta form.qcard{display:flex;flex-direction:column;gap:11px;margin:0;max-width:none;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));border:1px solid #24242c;border-radius:24px;padding:18px 22px 20px;position:relative;overflow:hidden}
#cta form.qcard:before{content:"";position:absolute;inset:-1px;border-radius:24px;padding:1px;background:conic-gradient(from var(--qa,0deg),transparent 0 70%,rgba(138,92,255,.9) 82%,rgba(47,73,255,.9) 90%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.qh{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#7c7c88}
.qh .live{display:inline-flex;align-items:center;gap:7px;color:#cfc8ff}
.qh .live:before{content:"";width:6px;height:6px;border-radius:50%;background:#46e39a;box-shadow:0 0 8px #46e39a;animation:bl 1.4s infinite}
.qmodes{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.qm{display:flex;align-items:center;justify-content:center;gap:8px;padding:9px 8px;border-radius:14px;border:1px solid #2a2a31;background:#111115;color:#a6a6b2;font:700 14px var(--fa);cursor:pointer;transition:background .35s,color .35s,border-color .35s,transform .35s var(--ease)}
.qm svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.qm:hover{color:#fff;border-color:#3a3a46}
.qm.on{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 10px 26px rgba(80,70,255,.3)}
.qsel{display:grid;grid-template-columns:1fr 40px 1fr;gap:8px;align-items:end}
.qsel label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:#8c8c96}
.qsel select{height:44px;appearance:none;-webkit-appearance:none;background:#111115 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' fill='none'/%3E%3C/svg%3E") no-repeat 14px 50%;border:1px solid #2a2a31;border-radius:14px;padding:0 16px;color:#fff;font:700 15px var(--fa);outline:none;cursor:pointer;transition:border-color .3s}
.qsel select:focus,.qsel select:hover{border-color:#6d4dff}
.qsel option{background:#111115;color:#fff}
#qSw{height:44px;border-radius:14px;border:1px solid #2a2a31;background:#111115;color:#cfc8ff;font-size:16px;cursor:pointer;transition:transform .5s var(--ease),border-color .3s}
#qSw:hover{border-color:#6d4dff;transform:rotate(180deg)}
#qMap{width:100%;height:92px;display:block;border-radius:14px;background:#0c0c10;border:1px solid #1d1d24}
.qw{display:flex;align-items:center;gap:14px;font-size:13px;color:#8c8c96}
#cta .qw input{flex:1;min-width:0;padding:0;border:0;background:none;border-radius:0;-webkit-appearance:none;appearance:none;height:20px;cursor:pointer}
.qw input::-webkit-slider-runnable-track{height:2px;background:linear-gradient(90deg,#8a5cff var(--p,50%),#2a2a31 var(--p,50%))}
.qw input::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;margin-top:-7px;box-shadow:0 0 0 5px rgba(138,92,255,.25)}
.qw input::-moz-range-track{height:2px;background:#2a2a31}.qw input::-moz-range-progress{height:2px;background:#8a5cff}
.qw input::-moz-range-thumb{width:16px;height:16px;border:0;border-radius:50%;background:#fff}
.qw b{font-size:13px;color:#fff;min-width:46px;text-align:left}
.qout{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #222228;border-bottom:1px solid #222228}
.qout>div{padding:10px 0 9px;text-align:right}
.qout>div+div{border-right:1px solid #222228;padding-right:16px}
.qout b{display:block;font:700 22px var(--en);direction:ltr;text-align:right;color:#fff;white-space:nowrap}
.qout b small{font:500 9px var(--mono);letter-spacing:.16em;color:#8c8c96;margin-left:6px}
.qout span{display:block;font-size:12px;color:#8c8c96;margin-top:4px}
.qnote{font-size:11px;color:#5c5c66;margin-top:-4px}
#qGo{justify-content:center;width:100%}
#qGo.ok{background:linear-gradient(90deg,#1fbf7a,#2f49ff)}
#cta .row{margin-top:4.5vh;padding-top:3.4vh}
#cta .copy{margin-top:3vh}
#qGo{padding:13px 28px}
.qsel label{gap:4px}
@media (max-width:820px){
 #ins,#snd .mono{display:none}
 .navR{gap:12px}
 #cta{justify-content:flex-start;padding-top:12vh;overflow:auto}
 #cta .ctaTop{grid-template-columns:1fr;gap:18px}
 #cta .row,#cta .copy,#qMap,.qnote,.qw{display:none}
 #cta form.qcard{padding:16px;gap:10px}
 .qm{font-size:12px;padding:9px 4px;gap:5px}.qm svg{width:15px;height:15px}
 .qout b{font-size:17px}
 #preN{font-size:110px}
}
/* ===================== v7 · DIRECTOR LAYER ===================== */
#reel{pointer-events:auto;background:none;border:1px solid rgba(255,255,255,.55);border-radius:40px;color:#fff;cursor:pointer;display:flex;align-items:center;gap:9px;font:500 10px var(--mono);letter-spacing:.18em;padding:9px 14px 9px 16px;direction:ltr;transition:background .3s,color .3s}
#reel:hover{background:#fff;color:#000}
#reel svg{width:10px;height:10px;fill:currentColor}
#reel .pz{display:none}#reel.on .pl{display:none}#reel.on .pz{display:block}
#reel .rg{width:16px;height:16px;transform:rotate(-90deg)}
#reel .rg circle{fill:none;stroke:currentColor;stroke-width:2}
#reel .rg circle+circle{stroke-dasharray:44;stroke-dashoffset:44}
#trk{pointer-events:auto}
#trkHit{position:absolute;left:-10px;right:-10px;top:-16px;height:34px;cursor:pointer;touch-action:none}
#trkTip{display:flex;gap:10px;align-items:baseline;position:absolute;bottom:22px;left:0;transform:translateX(-50%);white-space:nowrap;font:500 10px var(--mono);letter-spacing:.14em;color:#fff;opacity:0;transition:opacity .2s;pointer-events:none;direction:ltr}
#trkTip .tn{font:800 13px var(--fa);letter-spacing:0;direction:rtl;unicode-bidi:isolate}
#trkTip:after{content:"";position:absolute;left:50%;top:100%;width:1px;height:12px;background:#fff}
#trk.hv #trkTip{opacity:1}
#trk .rail{transition:height .25s}
#trk.hv .rail{height:3px}
#keys{display:flex;justify-content:center;gap:18px;margin-top:14px;font:500 9.5px var(--mono);letter-spacing:.18em;color:rgba(255,255,255,.6);direction:ltr}
#keys kbd{font:700 9.5px var(--mono);border:1px solid rgba(255,255,255,.45);border-radius:4px;padding:2px 6px;margin-right:6px;color:#fff}
#hint{flex-direction:column}
#hint .hr{display:flex;align-items:center;gap:12px}
#storm{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,rgba(10,18,32,.35),rgba(2,6,14,.75));opacity:0;pointer-events:none}
#flash{position:absolute;inset:0;background:radial-gradient(ellipse at 30% 10%,rgba(235,240,255,.95),rgba(190,205,255,.35) 60%,rgba(160,180,255,.1));opacity:0;pointer-events:none;mix-blend-mode:screen}
#sig{display:block;width:190px;height:54px;margin-top:14px;overflow:visible}
#sig path{fill:none;stroke:#cfc6ff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#sigL{font:500 9.5px var(--mono);letter-spacing:.14em;color:#7d7a96;direction:ltr;text-align:left;margin-top:4px;white-space:nowrap}
.sigw{display:inline-block;vertical-align:top;margin-right:28px;margin-top:22px}
@media (max-width:820px){#reel span{display:none}#keys{display:none}.sigw{display:none}#trkHit{top:-20px;height:40px}}
/* ===================== CH.03 · RAIL — one line ===================== */
#railL{z-index:9;background:#07070b;color:#0b0b0d}
#railIn{position:absolute;inset:0;background:#f4f6fa;clip-path:inset(50% 0 50% 0)}
#railC{position:absolute;inset:0;width:100%;height:100%;touch-action:pan-y}
#railSeam{position:fixed;left:0;right:0;top:50%;height:2px;margin-top:-1px;z-index:9;background:#58A5E7;box-shadow:0 0 24px 4px rgba(88,165,231,.7);transform:scaleX(0);pointer-events:none;display:none}
#railH{position:absolute;top:13vh;right:4.5vw;width:min(34vw,520px);text-align:right;pointer-events:none}
#railH .ey{color:#6d7a90}
#railH h2{font-weight:900;font-size:clamp(30px,3.9vw,64px);line-height:1.12;color:#0A2949}
#railH h2 .g{color:#a7b3c6}
#railH p{margin-top:20px;max-width:400px;color:#4f5b6e;font-size:clamp(14px,1.02vw,16px);line-height:2}
#railSt{display:flex;gap:30px;margin-top:3vh;flex-wrap:wrap}
#railSt b{display:block;font:700 clamp(20px,1.9vw,30px) var(--en);direction:ltr;text-align:right;color:#0A2949}
#railSt span{font-size:12px;color:#6d7a90}
#railKm{position:absolute;left:3.6vw;bottom:9vh;font:800 clamp(80px,11vw,190px)/.8 var(--en);color:transparent;-webkit-text-stroke:1px rgba(10,41,73,.16);direction:ltr;pointer-events:none;letter-spacing:-.02em}
#railKm small{font:500 11px var(--mono);letter-spacing:.24em;-webkit-text-stroke:0;color:#8a96a8;display:block;margin-bottom:14px}
#railFin{position:absolute;left:0;right:0;text-align:center;pointer-events:none;opacity:0}
#railFin .t{font-weight:800;font-size:clamp(15px,1.25vw,20px);color:#0A2949}
#railFin .m{font:500 10.5px var(--mono);letter-spacing:.26em;color:#7b879a;margin-top:10px;direction:ltr}
.wm{font-family:"Montserrat",var(--en);font-weight:800;letter-spacing:0;direction:ltr;white-space:nowrap}
.ii{position:relative;display:inline-block}
.ii:after{content:"";position:absolute;left:50%;top:-.02em;width:.15em;height:.19em;background:currentColor;transform:translateX(-35%) skewX(-28deg);border-radius:1px}
.logo{gap:12px}
.logo .wm{font-size:17px;letter-spacing:.01em}
.logo svg{width:50px!important;height:14px!important}
#preM{width:min(300px,62vw)!important;height:auto!important;aspect-ratio:300/82;overflow:visible}
#preM path{fill:none;stroke-width:4;stroke-linecap:round;stroke-dasharray:420;stroke-dashoffset:420;animation:pmD 1.5s cubic-bezier(.65,0,.35,1) forwards}
#preM path:nth-child(2){animation-delay:.14s}#preM path:nth-child(3){animation-delay:.28s}
@keyframes pmD{to{stroke-dashoffset:0}}
#pre .lg{font-family:"Montserrat",var(--en)!important;font-weight:800!important;letter-spacing:.01em!important;gap:0!important}
#pre .lg i.sp{width:.28em}
.pt.mk{font:800 22px "Montserrat",var(--en)!important;letter-spacing:0!important;gap:14px!important}
.pt.mk svg{width:84px!important;height:24px!important}
#nav ul{gap:24px}
@media (max-width:820px){
 #railH{width:90vw;right:5vw;top:21vh}
 .btn-q{padding:8px 14px!important;font-size:12px!important;white-space:nowrap}#snd{display:none!important}#reel{padding:7px 10px!important}#reel .rg{display:none}.navR{gap:8px!important}#nav{padding:18px 4vw!important}#railH p{display:none}#railSt{gap:18px;margin-top:2vh}
 #railKm{font-size:76px;bottom:16vh}
 .logo .wm{font-size:14px}.logo svg{width:40px!important;height:11px!important}
}
#pre .lg{direction:ltr;font-size:clamp(28px,4vw,56px)!important}
#pre .lgw{margin-top:-6px}
#railS{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#railTip{position:absolute;left:0;top:0;width:260px;padding:14px 16px 12px;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(10,41,73,.12);border-radius:10px;box-shadow:0 18px 40px -12px rgba(10,41,73,.35);opacity:0;transition:opacity .2s;pointer-events:none;direction:rtl;text-align:right;z-index:3}
#railTip .t1{font-size:10px;letter-spacing:.12em;color:#0057A0;direction:ltr;text-align:left}
#railTip .t2{font-weight:800;font-size:18px;color:#0A2949;margin-top:8px}
#railTip .t3{font-size:10px;letter-spacing:.18em;color:#7d8796;direction:ltr;text-align:right;margin-top:2px}
#railTip dl{display:flex;justify-content:space-between;gap:8px;margin:12px 0 0;padding-top:10px;border-top:1px solid rgba(10,41,73,.1);direction:ltr}
#railTip dt{font:500 9px var(--mono);letter-spacing:.16em;color:#8a96a8}#railTip dd{margin:3px 0 0;font:700 11px var(--mono);color:#0A2949}
#railTip .t4{margin-top:10px;font-size:9px;letter-spacing:.2em;color:#58A5E7;direction:ltr;text-align:left}
#railKeys{display:flex;gap:16px;margin-top:2.4vh;direction:ltr;justify-content:flex-end;font-size:9.5px;letter-spacing:.16em;color:#6d7a90;flex-wrap:wrap}
#railKeys i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#58A5E7;margin-right:7px;vertical-align:1px;box-shadow:0 0 0 3px rgba(88,165,231,.18)}
#railThr{position:absolute;right:4.5vw;bottom:11vh;width:220px;direction:ltr;opacity:0;pointer-events:none}
#railThr span{display:block;font-size:9.5px;letter-spacing:.2em;color:#0A2949;margin-bottom:8px;text-align:right}
#railThr i{display:block;height:3px;background:rgba(10,41,73,.14);border-radius:2px;overflow:hidden}
#railThr b{display:block;height:100%;background:linear-gradient(90deg,#58A5E7,#0057A0);transform-origin:left;transform:scaleX(.08);transition:transform .25s}

#railTel{position:absolute;left:3.6vw;top:24vh;width:250px;padding:14px 16px;border-radius:12px;background:var(--tb,rgba(255,255,255,.82));border:1px solid var(--tl,rgba(10,41,73,.12));backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);direction:ltr;opacity:0;pointer-events:none;color:var(--ri,#0A2949);box-shadow:0 20px 50px -20px rgba(10,41,73,.35)}
#railTel .r1{display:flex;justify-content:space-between;font-size:9.5px;letter-spacing:.18em;color:var(--rm,#6d7a90)}
#railTel .r1 b{color:#46A171;font-weight:700}#railTel .r1 b i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#46A171;margin-right:6px;animation:rtB 1.2s infinite}
@keyframes rtB{50%{opacity:.2}}
#railTel svg{display:block;width:100%;margin-top:10px}#rtEl{height:40px}
#rtMapP{stroke:var(--rm,#6d7a90);opacity:.6}#rtMapD{stroke:#58A5E7}#rtStn circle{fill:var(--ri,#0A2949)}#rtDot{fill:#58A5E7;stroke:#fff;stroke-width:1.4}
#rtElF{fill:rgba(88,165,231,.14)}#rtElP{stroke:#0057A0}#rtCur line{stroke:var(--ri,#0A2949)}#rtCur circle{fill:#58A5E7;stroke:#fff;stroke-width:1}
#railTel .lb{display:flex;justify-content:space-between;font-size:8px;letter-spacing:.2em;color:var(--rm,#6d7a90);margin-top:4px}
#railTel .g{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;margin-top:12px;padding-top:12px;border-top:1px solid var(--tl,rgba(10,41,73,.12))}
#railTel .g em{display:block;font-style:normal;font-size:8.5px;letter-spacing:.2em;color:var(--rm,#6d7a90)}#railTel .g b{font:700 20px var(--en);color:var(--ri,#0A2949);margin-right:5px}#railTel .g i{font-style:normal;font-size:9px;color:var(--rm,#6d7a90)}
#railTel .thr{margin-top:12px}#railTel .thr span{display:block;font-size:9px;letter-spacing:.2em;margin-bottom:6px;color:var(--ri,#0A2949)}#railTel .thr i{display:block;height:3px;background:var(--tl,rgba(10,41,73,.14));border-radius:2px;overflow:hidden}#railTel .thr b{display:block;height:100%;background:linear-gradient(90deg,#58A5E7,#0057A0);transform-origin:left;transition:transform .25s}
#railL #railH h2{color:var(--ri,#0A2949)}#railL #railH h2 .g{color:var(--rg,#a7b3c6)}#railL #railH p{color:var(--rp,#4f5b6e)}#railL #railH .ey,#railL #railSt span,#railL #railKeys{color:var(--rm,#6d7a90)}#railL #railSt b{color:var(--ri,#0A2949)}#railL #railKm{-webkit-text-stroke-color:var(--rk,rgba(10,41,73,.16))}
/* ===== MOBILE / RESPONSIVE PASS ===== */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
*{-webkit-tap-highlight-color:transparent}
#railHorn{display:none}
@media (max-width:820px){
 #nav{padding-top:calc(16px + env(safe-area-inset-top))!important;padding-left:calc(4vw + env(safe-area-inset-left))!important;padding-right:calc(4vw + env(safe-area-inset-right))!important}
 #tele{top:calc(64px + env(safe-area-inset-top));left:4vw;right:4vw;display:flex;gap:14px;align-items:center;font-size:8.5px;line-height:1.4;letter-spacing:.12em;white-space:nowrap;overflow:hidden}
 #tele>div:nth-child(2),#tele>div:nth-child(4){display:none}
 #tele>div:first-child i{display:none}
 #tele i{width:auto;margin-right:6px}
 #trk{bottom:calc(34px + env(safe-area-inset-bottom))}
 #trk .nd span{font-size:9px;top:13px}
 #rel .head{z-index:3;box-shadow:0 10px 30px rgba(0,0,0,.06)}
 #rel .list{z-index:1}
 /* rail chapter */
 body.inRail #chap{top:43vh;bottom:auto}
 body.inRail #chap .n{font-size:54px}
 body.inRail #chap .t{font-size:22px;margin-top:4px}
 body.inRail #chap .rl{width:120px;margin-top:8px}
 #railH{top:calc(17vh + env(safe-area-inset-top))}
 #railH h2{font-size:30px!important;line-height:1.18!important}
 #railSt{gap:16px!important;margin-top:1.6vh!important}
 #railSt b{font-size:22px!important}
 #railKm{display:none!important}
 #railKeys{display:flex;gap:10px;margin-top:1.4vh;font-size:8px;letter-spacing:.12em}
 #railKeys i{width:5px;height:5px;margin-right:5px;box-shadow:0 0 0 2px rgba(88,165,231,.18)}
 #railTip{width:min(250px,78vw)!important;font-size:12px}
 #railTel{display:grid;grid-template-columns:112px 1fr;column-gap:12px;left:4vw;right:4vw;width:auto;top:auto;bottom:calc(62px + env(safe-area-inset-bottom));padding:10px 12px 11px;border-radius:14px}
 #railTel .r1{grid-column:1/-1;font-size:8px;letter-spacing:.16em}
 #rtMap{grid-column:1;grid-row:2/4;margin-top:8px!important;align-self:center}
 #railTel .lb{display:none}
 #rtEl{grid-column:2;grid-row:2;height:22px!important;margin-top:8px!important}
 #railTel .g{grid-column:2;grid-row:3;grid-template-columns:1fr 1fr;gap:5px 10px;margin-top:6px;padding-top:6px}
 #railTel .g em{font-size:7px;letter-spacing:.16em}
 #railTel .g b{font-size:14px;margin-right:3px}
 #railTel .g i{font-size:7.5px}
 #railTel .thr{grid-column:1/-1;margin-top:8px}
 #railTel .thr span{font-size:7.5px;margin-bottom:4px}
 #railHorn{display:flex;position:absolute;right:4vw;top:47vh;width:46px;height:46px;border-radius:50%;align-items:center;justify-content:center;flex-direction:column;gap:1px;background:var(--tb,rgba(255,255,255,.82));border:1px solid var(--tl,rgba(10,41,73,.12));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--ri,#0A2949);font:600 7px var(--mono);letter-spacing:.14em;opacity:0;pointer-events:none;transition:transform .15s;touch-action:manipulation}
 #railHorn svg{width:18px;height:18px}
 #railHorn:active{transform:scale(.9)}
 #railHorn.on{pointer-events:auto}
 #railHorn:after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid rgba(88,165,231,.5);animation:rhP 2.2s infinite}
}
@keyframes rhP{0%{transform:scale(.9);opacity:.9}100%{transform:scale(1.35);opacity:0}}
@media (max-width:380px){#railH h2{font-size:26px!important}#railTel{grid-template-columns:96px 1fr}#railTel .g b{font-size:13px}}
/* landscape phones */
@media (max-height:520px) and (orientation:landscape){
 #tele,#ins,#nav ul,#keys,.sigw,#snd,#reel span,#reel .rg,#hint{display:none!important}
 #nav{padding:12px 4vw!important}
 body.inRail #chap{display:none!important}
 #railH{top:17vh!important;width:44vw!important}
 #railH p{display:none}
 #railH h2{font-size:26px!important}
 #railSt{margin-top:1vh!important}#railSt b{font-size:20px!important}
 #railKeys,#railKm{display:none!important}
 #railTel{display:none!important}
 #chap{top:18vh!important;bottom:auto!important}#chap .n{font-size:48px!important}#chap .t{font-size:20px!important}
 #trk{bottom:calc(16px + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){#railHorn:after,#railTel .r1 b i{animation:none}}

/* ===== HERO IMAGE ===== */
#heroW{position:absolute;inset:0;overflow:hidden;background:#efece6}
#heroImg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 45%;will-change:transform;transform-origin:59% 42%}
#heroShade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(242,239,234,.94) 0%,rgba(242,239,234,.8) 22%,rgba(242,239,234,.28) 36%,rgba(242,239,234,0) 46%),linear-gradient(0deg,rgba(242,239,234,.6) 0%,rgba(242,239,234,0) 24%)}
#map #mapC,#map #mVig{display:none}
#pro{right:auto;left:4.5vw;width:min(31vw,520px)}
#pro .ey{color:#6b6b76}#pro h1{color:#0d0d12}#pro p{color:#3f3f48}
#pro .chips span{border-color:rgba(13,13,18,.18);color:#24242c;background:rgba(255,255,255,.55)}
#hint{color:#14141a}#hint .m{border-color:#14141a}#hint .m:after{background:#14141a}
#keys{color:rgba(20,20,26,.62)}#keys kbd{border-color:rgba(20,20,26,.4);color:#14141a}
@media (max-width:820px){#heroImg{object-position:62% 40%}#heroShade{background:linear-gradient(0deg,rgba(242,239,234,.97) 0%,rgba(242,239,234,.86) 34%,rgba(242,239,234,0) 62%)}#pro{left:5vw;right:5vw;width:auto}}
/* ===== HEADER MENU BUTTON ===== */
.btn-m{pointer-events:auto;background:none;border:1px solid rgba(255,255,255,.7);border-radius:40px;color:#fff;cursor:pointer;display:flex;align-items:center;gap:10px;padding:10px 18px;font:700 13px var(--fa);transition:background .3s,color .3s}
.btn-m:hover{background:#fff;color:#000}
.btn-m .bg{display:flex;flex-direction:column;gap:4px;width:16px}.btn-m .bg i{display:block;height:1.5px;background:currentColor;border-radius:2px}.btn-m .bg i:last-child{width:10px}
@media (max-width:820px){.btn-m{padding:8px 12px;font-size:12px}}@media (max-width:420px){.btn-m>span:last-child{display:none}}
/* ===== OVERLAYS (menu + pages) ===== */
.ovTop{position:relative;display:flex;align-items:center;justify-content:space-between;padding:22px 3.6vw}
.ovTop a{color:#fff;text-decoration:none}
.ovAct{display:flex;align-items:center;gap:12px}
.ovX{width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:none;cursor:pointer;position:relative;transition:background .3s,border-color .3s}
.ovX:hover{background:#fff;border-color:#fff}.ovX:hover i{background:#000}
.ovX i{position:absolute;left:50%;top:50%;width:16px;height:1.5px;background:#fff;margin:-.75px 0 0 -8px;transform:rotate(45deg)}.ovX i+i{transform:rotate(-45deg)}
#menu{position:fixed;inset:0;z-index:84;background:#07070b;color:#fff;display:flex;flex-direction:column;clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .9s var(--ease),visibility 0s .9s}
body.mOpen #menu{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .9s var(--ease),visibility 0s}
#menu:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(60vw 60vw at 12% 110%,rgba(109,77,255,.24),transparent 62%),radial-gradient(42vw 42vw at 100% 0%,rgba(47,73,255,.16),transparent 60%)}
#mList{position:relative;flex:1;display:flex;flex-direction:column;justify-content:center;gap:1vh;list-style:none;padding:0 8vw}
#mList a{display:flex;align-items:baseline;gap:22px;color:#fff;text-decoration:none;font-weight:900;font-size:clamp(38px,6.2vw,100px);line-height:1.18;overflow:hidden;padding-bottom:.06em}
#mList a i{font:500 12px var(--mono);font-style:normal;color:#8c8c94;letter-spacing:.14em;direction:ltr}
#mList a span{display:inline-block;transform:translateY(110%);transition:transform 1s var(--ease)}
body.mOpen #mList a span{transform:none}
body.mOpen #mList li:nth-child(2) a span{transition-delay:.07s}body.mOpen #mList li:nth-child(3) a span{transition-delay:.14s}body.mOpen #mList li:nth-child(4) a span{transition-delay:.21s}
#mList a:hover span,#mList a.on span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.mFoot{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:26px 8vw 34px;border-top:1px solid rgba(255,255,255,.08);font-size:13px;color:#a2a2ad}
.mFoot>div{display:grid;gap:6px}.mFoot small{font-size:10px;color:#6d6d78;letter-spacing:.18em}.mFoot a.mono{color:#fff;text-decoration:none;letter-spacing:.04em;text-align:right}
.pill{display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 26px;border-radius:40px;background:#fff;color:#000!important;font-weight:800;text-decoration:none;font-size:14px;white-space:nowrap}
.pill.g{background:var(--grad);color:#fff!important}
.pg{position:fixed;inset:0;z-index:83;background:#08080c;color:#fff;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;opacity:0;visibility:hidden;transform:translateY(28px);transition:opacity .6s var(--ease),transform .8s var(--ease),visibility 0s .8s}
.pg.on{opacity:1;visibility:visible;transform:none;transition:opacity .6s var(--ease),transform .8s var(--ease),visibility 0s}
.pg .ovTop{position:sticky;top:0;z-index:2;background:rgba(8,8,12,.8);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.06)}
.pgIn{max-width:1180px;margin:0 auto;padding:10vh 5vw 12vh}
.pg .ey{justify-content:flex-start}
.pgHero h1{font-weight:900;font-size:clamp(40px,5.8vw,90px);line-height:1.12}
.pgHero p{margin-top:26px;max-width:660px;color:#a9a9b4;font-size:clamp(14px,1.12vw,17px);line-height:2.1}
.pgSec{margin-top:11vh}
.pgSec>h3{font-weight:900;font-size:clamp(24px,2.3vw,36px);margin-bottom:28px;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.pgSec>h3 small{font:500 10.5px var(--mono);letter-spacing:.16em;color:#7b7b86;direction:ltr}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.card{border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:26px 24px;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01));transition:border-color .4s,transform .5s var(--ease)}
.card:hover{border-color:rgba(138,92,255,.55);transform:translateY(-4px)}
.card svg{width:28px;height:28px;fill:none;stroke:#9b8bff;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.card .ix{float:left;font-size:10px;color:#6d6d78}
.card h4{font-weight:800;font-size:19px;margin-top:18px}
.card .sub{display:block;font-size:9.5px;color:#7b7b86;margin-top:8px;text-align:right}
.card p{margin-top:14px;color:#a2a2ad;font-size:14px;line-height:2}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:8vh}
.stats div{border-top:1px solid rgba(255,255,255,.12);padding-top:18px}
.stats b{display:block;font:800 clamp(28px,3vw,48px) var(--en);direction:ltr;text-align:right}
.stats span{font-size:13px;color:#8c8c94}
#abTm{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}#abTm .tm{margin:0}
.offs7{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.offs7 div{border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:16px 18px}
.offs7 b{display:block;font-weight:800;font-size:16px}.offs7 span{font-size:12.5px;color:#8c8c94}.offs7 em{float:left;font:500 10px var(--mono);font-style:normal;letter-spacing:.14em;color:#6d6d78}
.ct{display:grid;grid-template-columns:1fr 1.25fr;gap:5vw;margin-top:8vh;align-items:start}
.ctInfo .lb{font-size:10.5px;color:#7b7b86;margin-top:34px;text-align:right}.ctInfo .lb:first-child{margin-top:0}
.ctInfo a.big{display:block;font:700 clamp(20px,2vw,30px) var(--mono);direction:ltr;text-align:right;color:#fff;text-decoration:none;letter-spacing:.02em;margin-top:8px}
.ctInfo .offs7{margin-top:12px}
.cf{border:1px solid rgba(255,255,255,.1);border-radius:22px;padding:30px;background:rgba(255,255,255,.025);display:grid;gap:14px}
.cf .r2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cf label{display:grid;gap:8px;font-size:12.5px;color:#a2a2ad}
.cf input,.cf select,.cf textarea{width:100%;background:#111116;border:1px solid #26262f;border-radius:12px;color:#fff;font:500 14px var(--fa);padding:13px 14px;outline:none;transition:border-color .3s}
.cf input[type=email],.cf input[type=tel]{direction:ltr;text-align:right}
.cf textarea{min-height:130px;resize:vertical}
.cf input:focus,.cf select:focus,.cf textarea:focus{border-color:#6d4dff}
.cf .send{margin-top:6px;height:52px;border:0;border-radius:40px;background:var(--grad);color:#fff;font:800 15px var(--fa);cursor:pointer}
.cf .note{font-size:12px;color:#7b7b86;line-height:1.9}
.pgCta{margin-top:12vh;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;border:1px solid rgba(255,255,255,.08);border-radius:24px;padding:36px 4vw;background:radial-gradient(60% 140% at 0% 100%,rgba(109,77,255,.22),transparent 70%)}
.pgCta h3{font-weight:900;font-size:clamp(22px,2.3vw,34px);line-height:1.5}
@media (max-width:900px){.ct{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.cf{padding:22px}.cf .r2{grid-template-columns:1fr}.pgIn{padding-top:7vh}#abTm{grid-template-columns:1fr}}

/* light mode: scene texts hidden */
#sideSvg text,#topSvg text,#portSvg text,#topSvg #pins{display:none!important}
/* light mode: particles & light effects off */
#side:before{display:none!important}

/* ===== HEADER BAR · glass band under logo + menu, adaptive light/dark ===== */
#nav{color:#fff;pointer-events:none;mix-blend-mode:normal;padding:9px 3.6vw;transition:padding .5s var(--ease),color .4s}
#nav:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(9,9,14,.84),rgba(9,9,14,.68));-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);border-bottom:1px solid rgba(255,255,255,.07);box-shadow:0 12px 32px -14px rgba(0,0,0,.5);transition:background .5s,border-color .5s,box-shadow .5s}
#nav:after,.pg .ovTop:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;background:linear-gradient(90deg,rgba(138,92,255,0),rgba(138,92,255,.8) 28%,rgba(47,73,255,.8) 72%,rgba(47,73,255,0));opacity:.85}
body.hdrS #nav{padding-top:6px;padding-bottom:6px}
#nav a,#nav .btn-m{transition:color .4s,background .3s,border-color .4s,box-shadow .3s}
#nav .lgm path{transition:stroke .4s}
#nav .btn-q{background:var(--grad);border-color:transparent;color:#fff;box-shadow:0 6px 22px -8px rgba(109,77,255,.7)}
#nav .btn-q:hover{background:#fff;color:#0d0d12!important;box-shadow:0 8px 26px -8px rgba(109,77,255,.8)}
body.hdrL #nav{color:#0d0d12}
body.hdrL #nav:before{background:linear-gradient(180deg,rgba(248,246,242,.88),rgba(248,246,242,.72));border-bottom-color:rgba(13,13,18,.08);box-shadow:0 12px 32px -16px rgba(20,20,40,.2)}
body.hdrL #nav a,body.hdrL #nav .btn-m{color:#0d0d12}
body.hdrL #nav .btn-q{color:#fff}
body.hdrL #nav .lgm path{stroke:#0d0d12}
body.hdrL #nav ul a:after{background:#0d0d12}
body.hdrL #nav .btn-m{border-color:rgba(13,13,18,.32)}
body.hdrL #nav .btn-m:hover,body.hdrL #nav .btn-q:hover{background:#0d0d12;color:#fff!important}
#nav .btn-q{padding:7px 18px;font-size:12.5px}#nav .btn-m{padding:7px 15px;font-size:12.5px}
#nav .logo .wm{font-size:16px}
.ovTop{padding:10px 3.6vw}.ovX{width:38px;height:38px}.ovTop .btn-m{padding:7px 15px;font-size:12.5px}
@media (max-width:820px){#nav:before{-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%)}
 #nav{padding-top:calc(7px + env(safe-area-inset-top))!important;padding-bottom:7px!important}body.hdrS #nav{padding-top:calc(5px + env(safe-area-inset-top))!important;padding-bottom:5px!important}
 #nav .btn-q{padding:6px 12px!important;font-size:12px!important}#nav .btn-m{padding:6px 11px;font-size:12px}#nav .logo .wm{font-size:14px}.ovTop{padding:8px 4vw}}


/* ===== TYPOGRAPHY SYSTEM =====
   Display · Persian headlines ........ Noto Kufi Arabic
   Text & UI · copy, nav, forms ....... Vazirmatn
   Latin · wordmark, numbers, contacts Montserrat */
:root{--fa:"Vazirmatn",Tahoma,sans-serif;--disp:"Noto Kufi Arabic","Vazirmatn",Tahoma,sans-serif;--en:"Montserrat","Vazirmatn",Arial,sans-serif;--mono:"Montserrat","Vazirmatn",Arial,sans-serif}
html,body,button,input,select,textarea{font-family:var(--fa)}
body{font-weight:400;font-kerning:normal;text-rendering:optimizeLegibility}
/* display */
#pro h1,.pgHero h1,#cta .big,#oHead,#c1 h2,.bt h2,#rel h2,#portC h2,#skyH h2,#railH h2,#mList a,#railFin .t,.pgCta h3{font-family:var(--disp);letter-spacing:0}
#pro h1,.pgHero h1,#cta .big{font-weight:800;line-height:1.42}
#oHead,#c1 h2,.bt h2,#rel h2,#portC h2,#skyH h2,#railH h2{font-weight:700;line-height:1.42}
#mList a{font-weight:700;line-height:1.4}
#railFin .t{font-weight:600}
.pgCta h3{font-weight:700;line-height:1.65}
.ln{padding-bottom:.18em;margin-bottom:-.18em}
/* sub-headings */
#svcW h3,.pgSec>h3{font-family:var(--fa);font-weight:700;letter-spacing:0}
.feat h4,.of h4,.svc h4,.card h4,.offs7 b,.tm .who{font-family:var(--fa);font-weight:700;letter-spacing:0}
/* body copy */
p,.feat p,.of p,.svc p,.card p,.tm q,.qnote,.cf .note,.offs7 span,.tm .who span,#cta .row p{font-family:var(--fa);font-weight:400;letter-spacing:0}
#pro p,.pgHero p{line-height:2.05}
.copy{font-family:var(--fa);font-weight:300;letter-spacing:0}
/* interface */
#nav ul{font-family:var(--fa);font-weight:500}#nav ul a{letter-spacing:0}
.btn-q,.b,.pill,.cf .send,#qGo{font-family:var(--fa);font-weight:700;letter-spacing:0}
.btn-m,.qm{font-family:var(--fa);font-weight:600;letter-spacing:0}
label,.qsel span,.qw span,.cf label,.qout span,.stats span{font-family:var(--fa);font-weight:500;letter-spacing:0}
.cf input,.cf select,.cf textarea,.qsel select{font-family:var(--fa);font-weight:400}
/* Latin · numbers · contacts */
.stats b,.qout b{font-family:var(--en);font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums lining-nums}
#qWv{font-family:var(--en);font-weight:600}
.mono,.en{font-family:var(--en);font-weight:500;letter-spacing:.04em}
#cta h5{font-family:var(--en);font-weight:700;font-size:10.5px;letter-spacing:.16em}
.ctInfo a.big,.mFoot a.mono,#cta .row a{font-family:var(--en);font-weight:600;letter-spacing:.01em}
/* brand wordmark */
.wm,.logo .wm{font-family:var(--en)!important;font-weight:800;letter-spacing:.01em}
#pre .lg{font-family:var(--en)!important;font-weight:800!important}

/* ===== LAYOUT & TYPE SCALE · one grid for every section =====
   gutter aligns with the header edges · content starts below the header bar */
:root{--gx:3.6vw;--ty:calc(54px + 8vh);--w-copy:min(32vw,500px);
 --fs-display:clamp(32px,3.9vw,64px);--fs-h2:clamp(26px,2.9vw,48px);--fs-state:clamp(30px,3.9vw,64px);--fs-cta:clamp(30px,3.7vw,60px);
 --fs-h3:clamp(19px,1.55vw,26px);--fs-h4:clamp(15px,1.1vw,18px);--fs-body:clamp(13.5px,.98vw,16px);--fs-sm:clamp(12.5px,.86vw,14px);--gap-hp:clamp(14px,1.9vh,22px)}
/* shared section copy */
#c1,#rel .head,#portC,#skyH,#railH{top:var(--ty);right:var(--gx);width:var(--w-copy)}
#c1 h2,#rel h2,#skyH h2,#railH h2,.bt h2{font-size:var(--fs-h2);line-height:1.42}
#c1 p,#skyH p,#railH p,#portC p,.bt p{margin-top:var(--gap-hp);font-size:var(--fs-body);line-height:2.05;max-width:30em}
/* hero · vertically centred on the empty wall, left of the illustration */
#pro{top:calc(50% + 27px);bottom:auto;left:var(--gx);right:auto;width:min(30vw,500px);translate:0 -50%}
#pro h1{font-size:var(--fs-display)}
#pro p{margin-top:calc(var(--gap-hp) + 4px);font-size:var(--fs-body);max-width:28em}
/* warehouse band */
#band{padding:6.5vh var(--gx) 0}
.bt{grid-template-columns:1.1fr 1fr;gap:5vw;align-items:end}
.bt p{margin-top:0;max-width:32em}
/* road · headline right, checkpoints left, note bottom-right */
#rel .list{left:var(--gx);width:min(28vw,420px)}
#rel .desc{right:var(--gx);bottom:11vh;width:min(26vw,400px);font-size:var(--fs-sm);line-height:2.05}
.feat{padding:20px 0 22px}
.feat h4{font-size:var(--fs-h4);margin:0 0 6px;line-height:1.6}
.feat p{font-size:var(--fs-sm);line-height:2;margin-top:4px}
/* port · glass card */
#portC{width:min(30vw,460px);padding:clamp(22px,2.2vw,32px)}
#portC h2{font-size:clamp(24px,2.5vw,40px);line-height:1.42}
/* ocean · centred statement + features around the ship */
#oHead{font-size:var(--fs-state);line-height:1.38}
.of{width:min(250px,19vw)}
.of h4{font-size:var(--fs-h4);margin:0 0 6px;line-height:1.6}
.of p{font-size:var(--fs-sm);line-height:1.95}
/* sky · headline + services rail */
#svcW{padding:0 var(--gx);bottom:10vh}
#svcW .hh{margin-bottom:18px}
#svcW h3{font-size:var(--fs-h3)}
.svc{flex-basis:clamp(230px,19vw,280px);padding:22px 22px 24px}
.svc h4{font-size:var(--fs-h4);margin:0 0 8px;line-height:1.6}
.svc p{font-size:var(--fs-sm);line-height:1.95}
/* rail */
#railFin .t{font-size:clamp(16px,1.3vw,21px)}
/* inquiry */
#cta{padding:calc(54px + 3vh) var(--gx) 0}
#cta .ctaTop{grid-template-columns:1fr minmax(420px,500px);gap:5vw}
#cta .big{font-size:var(--fs-cta);line-height:1.4}
#cta .row{gap:3.5vw;margin-top:5vh;padding-top:3.4vh}
#cta .row p,#cta .row a{font-size:var(--fs-sm)}
#cta .copy{font-size:11.5px}
/* overlays */
#mList{padding:0 calc(var(--gx) + 4vw)}
#mList a{font-size:clamp(32px,5vw,80px)}
.pgIn{padding:9vh var(--gx) 12vh}
.pgHero h1{font-size:clamp(34px,4.4vw,72px);line-height:1.4}
.pgHero p{font-size:var(--fs-body);margin-top:var(--gap-hp)}
.pgSec>h3{font-size:var(--fs-h3)}
.pgCta h3{font-size:clamp(20px,2vw,30px)}
.card h4{font-size:var(--fs-h4);margin-top:0}
.card p{font-size:var(--fs-sm)}
/* tablet & phone */
@media (max-width:820px){
 :root{--gx:5vw;--ty:calc(50px + 5vh);--w-copy:90vw;--fs-h2:clamp(24px,7vw,30px);--fs-state:clamp(26px,7.6vw,36px);--fs-cta:clamp(26px,7.4vw,34px);--fs-display:clamp(28px,8vw,38px)}
 #pro{top:auto;bottom:11vh;left:var(--gx);right:var(--gx);width:auto;translate:none}
 #c1,#rel .head,#skyH{right:var(--gx);width:var(--w-copy)}
 #railH{top:calc(var(--ty) + env(safe-area-inset-top))!important;right:var(--gx);width:var(--w-copy)}
 #railH h2{font-size:var(--fs-h2)!important;line-height:1.42!important}
 #rel .list{left:var(--gx);width:90vw}
 #portC{top:auto;bottom:11vh;right:var(--gx);width:90vw;padding:18px 20px}#portC h2{font-size:clamp(22px,6.4vw,28px)}
 .of{width:42vw}
 #svcW{bottom:12vh}
 #cta{padding-top:calc(64px + 3vh)}#cta .ctaTop{grid-template-columns:1fr}
 .bt{grid-template-columns:1fr}
}
@media (max-height:520px) and (orientation:landscape){#railH h2,#c1 h2,#rel h2,#skyH h2{font-size:24px!important}}

/* ===== MOBILE QA · symmetry, touch, performance ===== */
a,button,select,input,label{-webkit-tap-highlight-color:transparent}
@media (hover:none){.card:hover,.svc:hover,.tm:hover{transform:none}.card:hover{border-color:rgba(255,255,255,.08)}}
@media (max-width:820px){
 #nav{padding-left:calc(var(--gx) + env(safe-area-inset-left))!important;padding-right:calc(var(--gx) + env(safe-area-inset-right))!important}
 .ovTop{padding:8px calc(var(--gx) + env(safe-area-inset-right)) 8px calc(var(--gx) + env(safe-area-inset-left))}
 #mList{padding:0 var(--gx);gap:.6vh}
 .mFoot{padding:20px var(--gx) calc(24px + env(safe-area-inset-bottom))}
 .pgIn{padding-bottom:calc(10vh + env(safe-area-inset-bottom))}
 #nav .btn-q,#nav .btn-m{min-height:38px}.navR{gap:8px!important}
 .ovX{width:40px;height:40px}
 #pro p{display:block;font-size:14px;line-height:2;max-width:none;margin-top:12px}
 #cta{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-bottom:calc(24px + env(safe-area-inset-bottom))}
 .cf input,.cf select,.cf textarea,.qsel select{font-size:16px}
 /* GPU relief: no live blur on moving cards */
 .svc{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,255,255,.9)}
 #portC{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(8,12,24,.9)}
 #nav:before{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
}
@media (max-width:400px){
 #nav .logo{gap:8px}#nav .logo .wm{font-size:12.5px}#nav .logo svg{width:32px!important;height:9px!important}
 #nav .btn-q{padding:6px 10px!important;font-size:11.5px!important}
 #pro p{font-size:13.5px}
}
@media (max-width:350px){#nav .logo .wm{display:none}#nav .logo svg{width:42px!important;height:12px!important}}

/* ===== BRAND LOGO · larger, crisper, in brand colours =====
   mark lines: #58A5E7 / #0057A0 / #0A2949 on light · #58A5E7 / #2F7FD3 / #E8EEF8 on dark (preloader variant) */
#nav .logo,.ovTop .logo{gap:14px;align-items:center}
#nav .logo svg,.ovTop .logo svg{width:76px!important;height:21px!important;overflow:visible}
#nav .logo .wm,.ovTop .logo .wm{font-size:19px!important;font-weight:800;letter-spacing:.015em;line-height:1;display:inline-block!important}
#nav .lgm path,.ovTop .lgm path{stroke-width:2.4;transition:stroke .45s}
#nav .lgm path:nth-child(1),.ovTop .lgm path:nth-child(1){stroke:#58A5E7}
#nav .lgm path:nth-child(2),.ovTop .lgm path:nth-child(2){stroke:#2F7FD3}
#nav .lgm path:nth-child(3),.ovTop .lgm path:nth-child(3){stroke:#E8EEF8}
#nav .logo .wm,.ovTop .logo .wm{color:#fff}
body.hdrL #nav .lgm path:nth-child(1){stroke:#58A5E7}
body.hdrL #nav .lgm path:nth-child(2){stroke:#0057A0}
body.hdrL #nav .lgm path:nth-child(3){stroke:#0A2949}
body.hdrL #nav .logo .wm{color:#0A2949}
@media (max-width:820px){#nav .logo svg,.ovTop .logo svg{width:56px!important;height:15.5px!important}#nav .logo .wm,.ovTop .logo .wm{font-size:15.5px!important}#nav .logo,.ovTop .logo{gap:10px}}
@media (max-width:400px){#nav .logo svg,.ovTop .logo svg{width:46px!important;height:12.7px!important}#nav .logo .wm,.ovTop .logo .wm{font-size:13.5px!important}#nav .logo,.ovTop .logo{gap:8px}}
@media (max-width:350px){#nav .logo .wm{display:none!important}#nav .logo svg{width:60px!important;height:16.5px!important}}

/* logo fit guard for narrow phones */
@media (max-width:820px){#nav .logo svg,.ovTop .logo svg{width:52px!important;height:14.4px!important}#nav .logo .wm,.ovTop .logo .wm{font-size:15px!important}}
@media (max-width:480px){.btn-m>span:last-child{display:none}.btn-m{padding:6px 11px!important}}
@media (max-width:400px){#nav .logo svg,.ovTop .logo svg{width:46px!important;height:12.7px!important}#nav .logo .wm,.ovTop .logo .wm{font-size:13.5px!important}}
@media (max-width:380px){#nav .logo svg,.ovTop .logo svg{width:40px!important;height:11px!important}#nav .logo .wm,.ovTop .logo .wm{font-size:12px!important}#nav .logo,.ovTop .logo{gap:7px}}
@media (max-width:350px){#nav .logo .wm{display:none!important}#nav .logo svg{width:60px!important;height:16.5px!important}}

/* ===== LIGHT THEME · About / Services / Contact pages ===== */
.pg{background:#f7f5f1;color:#0d0d12;color-scheme:light}
.pg:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(55vw 40vw at 100% 0%,rgba(109,77,255,.07),transparent 65%),radial-gradient(50vw 40vw at 0% 100%,rgba(47,73,255,.06),transparent 65%)}
.pg .pgIn{position:relative;z-index:1}
.pg .ovTop{background:rgba(247,245,241,.86);border-bottom-color:rgba(13,13,18,.07)}
.pg .ovTop a{color:#0A2949}
.pg .ovTop .logo .wm{color:#0A2949}
.pg .ovTop .lgm path:nth-child(1){stroke:#58A5E7}.pg .ovTop .lgm path:nth-child(2){stroke:#0057A0}.pg .ovTop .lgm path:nth-child(3){stroke:#0A2949}
.pg .btn-m{border-color:rgba(13,13,18,.25);color:#0d0d12}.pg .btn-m:hover{background:#0d0d12;color:#fff}
.pg .ovX{border-color:rgba(13,13,18,.2)}.pg .ovX i{background:#0d0d12}.pg .ovX:hover{background:#0d0d12;border-color:#0d0d12}.pg .ovX:hover i{background:#fff}
.pg .pgHero p{color:#4a4a55}
.pg .stats div{border-top-color:rgba(13,13,18,.12)}.pg .stats b{color:#0A2949}.pg .stats span{color:#6b6b76}
.pg .card{background:#fff;border-color:rgba(13,13,18,.07);box-shadow:0 1px 2px rgba(13,13,18,.03),0 14px 34px -20px rgba(20,20,60,.22)}
.pg .card:hover{border-color:rgba(109,77,255,.45)}
.pg .card h4{color:#0d0d12}.pg .card p{color:#5a5a66}
.pg .tm{background:#fff;color:#0d0d12;border-color:rgba(13,13,18,.07);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 14px 34px -20px rgba(20,20,60,.22)}
.pg .tm q{color:#3a3a44}.pg .tm .who span{color:#6b6b76}.pg .tm .tg{color:#6d4dff}
.pg .offs7 div{background:#fff;border-color:rgba(13,13,18,.07)}.pg .offs7 b{color:#0d0d12}.pg .offs7 span{color:#6b6b76}
.pg .ctInfo a.big{color:#0A2949}
.pg .cf{background:#fff;border-color:rgba(13,13,18,.08);box-shadow:0 18px 44px -24px rgba(20,20,60,.25)}
.pg .cf label{color:#55555f}
.pg .cf input,.pg .cf select,.pg .cf textarea{background:#f7f6f3;border-color:#e2dfd8;color:#0d0d12}
.pg .cf input:focus,.pg .cf select:focus,.pg .cf textarea:focus{border-color:#6d4dff;background:#fff}
.pg .cf .note{color:#7b7b86}
.pg .pgCta{background:radial-gradient(60% 140% at 0% 100%,rgba(109,77,255,.12),transparent 70%),#fff;border-color:rgba(13,13,18,.08);box-shadow:0 18px 44px -26px rgba(20,20,60,.25)}
.pg .pgCta h3{color:#0d0d12}
.pg .pill{background:var(--grad);color:#fff!important;box-shadow:0 8px 24px -10px rgba(109,77,255,.7)}

/* ===== LIGHT THEME · full-screen menu ===== */
#menu{background:#f7f5f1;color:#0d0d12;color-scheme:light}
#menu:before{background:radial-gradient(60vw 60vw at 12% 110%,rgba(109,77,255,.12),transparent 62%),radial-gradient(42vw 42vw at 100% 0%,rgba(47,73,255,.09),transparent 60%)}
#menu .ovTop{border-bottom:1px solid rgba(13,13,18,.07)}
#menu .ovTop a,#menu .ovTop .logo .wm{color:#0A2949}
#menu .lgm path:nth-child(1){stroke:#58A5E7}#menu .lgm path:nth-child(2){stroke:#0057A0}#menu .lgm path:nth-child(3){stroke:#0A2949}
#menu .ovX{border-color:rgba(13,13,18,.2)}#menu .ovX i{background:#0d0d12}#menu .ovX:hover{background:#0d0d12;border-color:#0d0d12}#menu .ovX:hover i{background:#fff}
#mList a{color:#0d0d12}
#mList li{border-bottom:1px solid rgba(13,13,18,.06)}#mList li:last-child{border-bottom:0}
.mFoot{border-top-color:rgba(13,13,18,.08);color:#5a5a66}
.mFoot a.mono{color:#0A2949}
#menu .pill.g{box-shadow:0 8px 24px -10px rgba(109,77,255,.7)}

/* ===== BRAND LOGO v2 · larger & more legible on every screen ===== */
#nav .logo .wm,.ovTop .logo .wm{font-weight:800;letter-spacing:.02em;line-height:1}
#nav .logo svg,.ovTop .logo svg{width:92px!important;height:25.1px!important}#nav .logo .wm,.ovTop .logo .wm{font-size:22px!important;display:inline-block!important}#nav .logo,.ovTop .logo{gap:16px}#nav .lgm path,.ovTop .lgm path{stroke-width:2.6}
@media (max-width:820px){#nav .logo svg,.ovTop .logo svg{width:62px!important;height:16.9px!important}#nav .logo .wm,.ovTop .logo .wm{font-size:17px!important;display:inline-block!important}#nav .logo,.ovTop .logo{gap:12px}#nav .lgm path,.ovTop .lgm path{stroke-width:2.3}}
@media (max-width:480px){#nav .logo svg,.ovTop .logo svg{width:56px!important;height:15.3px!important}#nav .logo .wm,.ovTop .logo .wm{font-size:15.5px!important;display:inline-block!important}#nav .logo,.ovTop .logo{gap:10px}#nav .lgm path,.ovTop .lgm path{stroke-width:2.2}.btn-q .q2{display:none}#nav .btn-q{padding:6px 13px!important;font-size:12px!important}}
@media (max-width:400px){#nav .logo svg,.ovTop .logo svg{width:56px!important;height:15.3px!important}#nav .logo .wm,.ovTop .logo .wm{font-size:15.5px!important;display:inline-block!important}#nav .logo,.ovTop .logo{gap:10px}#nav .lgm path,.ovTop .lgm path{stroke-width:2.2}}
@media (max-width:380px){#nav .logo svg,.ovTop .logo svg{width:56px!important;height:15.3px!important}#nav .logo .wm,.ovTop .logo .wm{font-size:15.5px!important;display:inline-block!important}#nav .logo,.ovTop .logo{gap:10px}#nav .lgm path,.ovTop .lgm path{stroke-width:2.2}}
@media (max-width:359px){#nav .logo svg,.ovTop .logo svg{width:48px!important;height:13.1px!important}#nav .logo .wm,.ovTop .logo .wm{font-size:13.5px!important;display:inline-block!important}#nav .logo,.ovTop .logo{gap:8px}#nav .lgm path,.ovTop .lgm path{stroke-width:2}}
@media (max-width:339px){#nav .logo .wm{display:none!important}#nav .logo svg{width:64px!important;height:17.5px!important}}

/* ===== HERO FRAME + HEADER NOTCH (from the reference layout, mirrored for RTL) ===== */
#map{background:#f7f5f1}
#heroW{will-change:clip-path}
#nav{transition:padding-top .5s var(--ease),padding-bottom .5s var(--ease),color .4s}
#nav{padding-left:calc(3.6vw + var(--shL,0px))}
/* while the frame is shown the header sits on the page canvas, not on a bar */
body.hdrL.hFrame #nav:before{background:rgba(247,245,241,0);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;border-bottom-color:transparent}
body.hdrL.hFrame #nav:after{opacity:0}
#nav:after{transition:opacity .4s}
@media (min-width:821px) and (max-width:1200px){body.hFrame #navL{display:none}}
/* hero copy sits inside the frame on the empty wall */
#pro{left:calc(3.6vw + clamp(28px,3.4vw,56px))}
@media (max-width:820px){#pro{left:calc(var(--gx) + 18px);right:calc(var(--gx) + 18px);bottom:calc(2.8vh + 7vh)}}

/* ===== HERO · floating quick-quote card (reference pattern) ===== */
#pro{top:calc(44% + 27px)}
.hq{position:absolute;left:calc(3.6vw + clamp(28px,3.4vw,56px));bottom:calc(max(14px,4.5vh) + clamp(22px,2.4vw,34px));width:min(31vw,460px);background:#fff;color:#0d0d12;border-radius:22px;padding:18px 20px 20px;z-index:2;direction:rtl;box-shadow:0 1px 2px rgba(13,13,30,.05),0 22px 50px -22px rgba(13,13,40,.35);will-change:transform,opacity}
.hqH b{font:700 16px var(--fa);letter-spacing:0}
.hqM{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.hqC{height:30px;padding:0 14px;border-radius:20px;border:1px solid rgba(13,13,18,.1);background:#f3f1ec;color:#3a3a44;font:600 12.5px var(--fa);cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.hqC:hover{border-color:rgba(109,77,255,.5)}
.hqC.on{background:#0d0d12;color:#fff;border-color:#0d0d12}
.hqP{display:flex;align-items:center;gap:6px;margin-top:12px;background:#f3f1ec;border-radius:40px;padding:5px 18px 5px 5px;min-height:56px}
.hqS{flex:1;min-width:0;display:grid;gap:1px;cursor:pointer}
.hqS span{font:500 10.5px var(--fa);color:#8a8a94}
.hqS select{-webkit-appearance:none;appearance:none;border:0;outline:none;width:100%;padding:0 0 0 14px;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b6b76' fill='none' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat left center;font:600 14px var(--fa);color:#0d0d12;cursor:pointer;text-overflow:ellipsis}
.hqS select:focus-visible{color:#6d4dff}
.hqA{font-style:normal;font-weight:700;color:#6d4dff;padding:0 2px}
.hqB{flex:none;height:46px;padding:0 20px;border:0;border-radius:40px;background:var(--grad);color:#fff;font:700 13.5px var(--fa);cursor:pointer;white-space:nowrap;box-shadow:0 8px 22px -10px rgba(109,77,255,.8);transition:transform .25s var(--ease),box-shadow .25s}
.hqB:hover{transform:translateY(-1px);box-shadow:0 12px 26px -10px rgba(109,77,255,.95)}
@media (min-width:821px) and (max-height:700px){#pro p{display:none}}
@media (min-width:821px) and (max-width:1100px){.hq{width:min(40vw,440px)}.hqB{padding:0 14px}}
@media (max-width:820px){
 .hq{left:calc(var(--gx) + 12px);right:calc(var(--gx) + 12px);width:auto;bottom:calc(2.8vh + 12px);padding:14px;border-radius:20px}
 .hqH b{font-size:14.5px}.hqM{margin-top:10px}.hqC{padding:0 12px;font-size:12px}
 .hqP{flex-wrap:wrap;border-radius:18px;padding:8px 12px;gap:4px 6px}
 .hqS{flex:1 1 38%}.hqS select{font-size:16px}
 .hqB{flex:1 1 100%;height:44px;margin-top:6px}
 #pro{bottom:calc(2.8vh + 250px)}#pro p{display:none}
}
@media (max-height:520px) and (orientation:landscape){.hq{display:none}}

/* ===== HERO · branded container image ===== */
#heroW{background:#b6e0f9}
#heroImg{object-position:60% 45%}
#heroShade{background:linear-gradient(90deg,rgba(196,230,251,.5) 0%,rgba(196,230,251,.2) 30%,rgba(196,230,251,0) 44%)}
@media (max-width:820px){#heroImg{object-position:74% 50%}#heroShade{background:linear-gradient(0deg,rgba(214,236,252,.97) 0%,rgba(214,236,252,.86) 34%,rgba(214,236,252,0) 62%)}}

/* ===== HERO v3 · branded truck in the concrete studio ===== */
#heroW{background:#2a2b2e}
#heroImg{object-position:50% 50%}
#heroShade{background:linear-gradient(180deg,rgba(8,10,16,.62) 0%,rgba(8,10,16,.28) 26%,rgba(8,10,16,0) 42%),linear-gradient(0deg,rgba(8,10,16,.55) 0%,rgba(8,10,16,0) 24%)}
#pro{top:calc(54px + 9vh);translate:none;width:min(58vw,920px)}
#pro h1{color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.35)}
#pro h1 .ln{display:inline-block}#pro h1 .ln+.ln{margin-inline-start:.28em}
#pro .gt{background:linear-gradient(90deg,#c3b5ff,#86b9ff);-webkit-background-clip:text;background-clip:text}
#pro p{color:rgba(255,255,255,.84);max-width:40em;text-shadow:0 1px 18px rgba(0,0,0,.35)}
body.hdrL.hFrame #nav{color:#0d0d12}
@media (min-width:1180px){
 .hq{width:min(64vw,1000px);display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:16px;padding:12px 14px 12px 20px;border-radius:999px}
 .hqH b{font-size:15px;white-space:nowrap}.hqM{margin-top:0;flex-wrap:nowrap}.hqP{margin-top:0;min-height:52px}
}
@media (min-width:821px) and (max-height:760px){#pro p{display:none}}
@media (max-width:820px){
 #heroImg{object-position:56% 50%}
 #heroShade{background:linear-gradient(180deg,rgba(8,10,16,.7) 0%,rgba(8,10,16,.3) 30%,rgba(8,10,16,0) 44%),linear-gradient(0deg,rgba(8,10,16,.6) 0%,rgba(8,10,16,0) 30%)}
 #pro{top:calc(var(--ty) + 2vh);bottom:auto;width:auto}
 #pro h1 .ln{display:block}#pro h1 .ln+.ln{margin-inline-start:0}
}

/* WordPress layer: inner pages, admin bar, editor content, form states. */
html:has(body.asana-inner),body.asana-inner{background:#f7f5f1}
.pg.pg-static{position:relative;inset:auto;min-height:100vh;overflow:visible;opacity:1;visibility:visible;transform:none;z-index:auto}
.pg-static .ovTop{position:sticky;top:0}
body.admin-bar .pg-static .ovTop{top:32px}
body.admin-bar.asana-story #nav{top:32px}
@media (max-width:782px){body.admin-bar .pg-static .ovTop,body.admin-bar.asana-story #nav{top:46px}}
a.ovX{display:inline-block;flex:none}
.pgBody{margin-top:6vh;max-width:780px;color:#3a3a44;font-size:var(--fs-body);line-height:2.05}
.pgBody>*+*{margin-top:1.1em}
.pgBody h2,.pgBody h3{font-family:var(--disp);color:#0d0d12;line-height:1.5;margin-top:1.6em}
.pgBody a{color:#6d4dff}
.pgBody img{max-width:100%;height:auto;border-radius:18px}
.pgList a.card{display:block;color:inherit;text-decoration:none}
.pgNav{margin-top:6vh}.pgNav .page-numbers{display:inline-block;padding:6px 12px;border-radius:10px;color:#0d0d12;text-decoration:none}.pgNav .current{background:#0d0d12;color:#fff}
.cf .hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.cfMsg{border-radius:14px;padding:14px 16px;font-size:14px;line-height:1.9}
.cfMsg.ok{background:rgba(34,160,90,.1);color:#156b3c;border:1px solid rgba(34,160,90,.25)}
.cfMsg.err{background:rgba(220,60,60,.08);color:#9b2222;border:1px solid rgba(220,60,60,.25)}
.ctInfo .offs7{margin-top:26px}
#cta .qph{flex:none;height:44px;width:100%;border-radius:14px;background:#111115;border:1px solid #2a2a31;color:#fff;padding:0 14px;font:500 14px var(--fa);outline:none;direction:ltr;text-align:right;transition:border-color .3s}
#cta .qph::placeholder{color:#7c7c88}
#cta .qph:focus{border-color:#6d4dff}
#cta .qph.err{border-color:#e5484d}
@media (max-width:820px){#cta .qph{font-size:16px}}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important}

/* ===================== v1.1 · content & UX standards ===================== */
/* navigation */
.navL{display:flex;gap:22px;list-style:none;margin:0;padding:0;font-size:13.5px;font-weight:500}
.navL>li{position:relative}
.navL>li>a{display:inline-flex;align-items:center;gap:6px;padding:10px 0;opacity:.86;color:inherit;text-decoration:none;transition:opacity .3s}
.navL>li>a:hover,.navL>li>a.on,.navL>li:focus-within>a{opacity:1}
.navL .chev{width:6px;height:6px;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg) translateY(-2px);display:inline-block}
#nav ul.sub,.navL .sub{display:block;position:absolute;top:100%;right:-14px;min-width:230px;list-style:none;margin:0;padding:8px;background:#fff;border-radius:16px;box-shadow:0 22px 50px -18px rgba(13,13,40,.35),0 0 0 1px rgba(13,13,18,.06);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .25s,transform .3s var(--ease),visibility 0s .3s;z-index:5}
.navL li:hover>.sub,.navL li:focus-within>.sub{opacity:1;visibility:visible;transform:none;transition:opacity .25s,transform .3s var(--ease),visibility 0s}
.navL .sub a{display:block!important;padding:10px 14px;border-radius:10px;color:#0d0d12!important;font-size:14px;font-weight:500;text-decoration:none;opacity:1!important}
.navL .sub a:hover,.navL .sub a.on{background:#f3f1ec;color:#4a3acb!important}
#nav ul.sub a:after{display:none}
@media (min-width:821px) and (max-width:1360px){body.hFrame #navL{display:none}}
.pgHead{gap:20px}.pgNavW{flex:1;display:flex;justify-content:center}.pgHead .navL{color:#0A2949}
.pgCtaBtn{height:42px;padding:0 18px;font-size:13.5px}
@media (max-width:1100px){.pgNavW{display:none}}@media (max-width:600px){.pgCtaBtn{display:none}}
@media (max-width:600px){.btn-q .q0{display:none}}@media (max-width:480px){.btn-q .q0,.btn-q .q2{display:none}}
/* hero */
.proBtns{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.pill.ghost{background:rgba(255,255,255,.12);color:#fff!important;border:1px solid rgba(255,255,255,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:none}
.pill.ghost:hover{background:#fff;color:#0d0d12!important}
.pg .pill.ghost{background:transparent;color:#0d0d12!important;border-color:rgba(13,13,18,.28)}.pg .pill.ghost:hover{background:#0d0d12;color:#fff!important}
#pro{top:calc(52px + 5vh)}#pro h1{font-size:clamp(30px,3.3vw,54px)}
@media (min-width:821px) and (max-height:800px){#pro p{display:none}}
/* hero quick inquiry form */
.hq{left:50%;right:auto;translate:-50% 0;width:min(calc(100% - 2*(3.6vw + 28px)),1120px);display:block;padding:14px 16px 12px;border-radius:22px}
.hqTop{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.hqTitle{font:700 15px var(--fa);color:#0d0d12;white-space:nowrap}
.hq .hqM{margin-top:0}
.hq .hqP{display:grid;grid-template-columns:1.2fr 1.2fr .75fr 1.3fr auto;gap:8px;align-items:stretch;margin-top:10px;background:none;padding:0;min-height:0;border-radius:0}
.hq .hqS{display:grid;gap:3px;background:#f3f1ec;border-radius:14px;padding:7px 12px;align-content:center}
.hq .hqS span{font:600 11.5px var(--fa);color:#55555f}
.hq .hqS select{font:600 14px var(--fa);min-height:22px}
.hq .hqS input{border:0;outline:none;background:transparent;font:600 14px var(--fa);color:#0d0d12;width:100%;padding:0;min-height:22px;text-align:right}
.hq .hqS:focus-within{box-shadow:inset 0 0 0 2px #6d4dff}
.hq .hqS:has([aria-invalid="true"]){box-shadow:inset 0 0 0 2px #e5484d}
.hq .hqB{height:auto;min-height:52px;padding:0 22px}
.hqN{margin:8px 0 0;font-size:11.5px;line-height:1.8;color:#55555f}
.plink{color:#4a3acb;text-decoration:underline;text-underline-offset:3px}
@media (max-width:820px){
 .hq{left:calc(var(--gx) + 10px);right:calc(var(--gx) + 10px);width:auto;translate:none;bottom:calc(2.8vh + 10px);padding:12px}
 .hq .hqP{grid-template-columns:1fr 1fr}.hq .hqB{grid-column:1/-1;min-height:46px}
 .hq .hqS select,.hq .hqS input{font-size:16px}.hqN{display:none}.proBtns{display:none}.hqTitle{font-size:14px}
 #pro{bottom:auto}
}
/* form messages */
.fMsg{display:none;margin-top:8px;border-radius:12px;padding:10px 12px;font-size:13px;line-height:1.9}
.fMsg.err{display:block;background:#fdecec;color:#8f1d1d;border:1px solid #f3c1c1}
.fMsg.ok{display:block;background:#e9f7ef;color:#14532d;border:1px solid #b7e4c7}
.fMsg b{display:block}.fMsg bdi{font-family:var(--en);letter-spacing:.04em}
#cta .fMsg.err{background:rgba(229,72,77,.14);color:#ffc2c4;border-color:rgba(229,72,77,.45)}
#cta .fMsg.ok{background:rgba(52,178,98,.14);color:#b8f5cf;border-color:rgba(52,178,98,.45)}
[aria-invalid="true"]{border-color:#e5484d!important}
/* final inquiry + footer */
#cta{overflow-y:auto;overscroll-behavior:contain;justify-content:flex-start}#cta>.ctaTop{margin-top:auto}#cta>.copy{margin-bottom:auto;padding-bottom:3vh}
.ctaP{margin-top:18px;max-width:34em;color:#c9c9d3;font-size:var(--fs-body);line-height:2}
.qT{font:700 15px var(--fa);color:#fff}
.qphL{display:grid;gap:6px}.qphL span,#cta .qsel span,#cta .qw>span{font-size:12.5px;color:#c4c4ce;font-weight:500}
#cta .qnote{color:#b3b3be}
.qTrust{margin:0;font-size:12px;line-height:1.9;color:#b3b3be}.qTrust .plink{color:#c9bcff}
#cta .row{grid-template-columns:1.4fr 1fr 1fr 1.1fr}
.fh{font:700 14px var(--fa);color:#fff;margin:0 0 12px;letter-spacing:0}
.fl{list-style:none;margin:0;padding:0;display:grid;gap:2px}
#cta .fl a{color:#cfcfd8;font-size:13px;line-height:1.95}#cta .fl a:hover{color:#fff}
#cta .row .fc{margin:0;color:#cfcfd8}#cta .row .fc a{display:inline-block}
.fcta{margin-top:14px;height:42px!important;font-size:13px}
.ltr{direction:ltr;unicode-bidi:isolate}
#cta .copy{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center;color:#a3a3ae}
.legal{display:flex;gap:18px;flex-wrap:wrap}.legal a{color:#c4c4ce;text-decoration:none;font-size:12px}.legal a:hover{color:#fff;text-decoration:underline}
@media (max-width:820px){#cta .row{display:grid!important;grid-template-columns:1fr 1fr;gap:22px}#cta .copy{display:flex!important;flex-direction:column;align-items:flex-start}#cta .qnote{display:block!important}#cta .qw{display:flex!important}}
@media (max-width:480px){#cta .row{grid-template-columns:1fr}}
/* story sections */
.oP{display:block;margin:18px auto 0;max-width:40em;font:400 var(--fs-body)/2 var(--fa);color:rgba(255,255,255,.92);text-shadow:0 2px 20px rgba(0,8,20,.65);padding:0 4vw}
.rFeat{margin-top:18px;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.7);border:1px solid rgba(10,41,73,.08);max-width:30em}
.rFeat b{display:block;font:700 15px var(--fa);color:var(--ri,#0A2949)}.rFeat span{display:block;margin-top:4px;font-size:13.5px;line-height:1.95;color:var(--rp,#4f5b6e)}
#railFin .p{margin:10px auto 0;max-width:36em;font-size:var(--fs-sm);line-height:1.9;color:#4f5b6e}
@media (max-width:820px){.rFeat{display:none}.oP{font-size:13.5px}}
a.svc{display:block;color:inherit;text-decoration:none}
/* contrast (WCAG 2.2 AA) */
.bt h2 .g{color:#a3a3ac}#rel h2 .g{color:#66666f}#skyH h2 .g{color:#55637a}#railL #railH h2 .g{color:#5a6982}
#c1 p{color:#46464e}.feat p{color:#55555e}.pg .stats span,.pg .offs7 span{color:#5a5a65}.cf .note,.pg .cf .note{color:#5a5a65}.mFoot{color:#4f4f5a}
/* inner pages */
a.card{display:block;color:inherit;text-decoration:none}.card .more{display:inline-block;margin-top:12px;font-size:13px;font-weight:700;color:#4a3acb}
.pgSec>h2.h3{font-weight:700;font-size:var(--fs-h3);margin-bottom:28px}
.crumbs{display:flex;gap:8px;font-size:13px;color:#5a5a65;margin-bottom:22px;flex-wrap:wrap}.crumbs a{color:#4a3acb;text-decoration:none}.crumbs a:hover{text-decoration:underline}
.pgBody h2{font-size:clamp(20px,1.8vw,28px)}.pgBody ul{padding-right:1.3em;list-style:disc}.pgBody li{margin:.45em 0}
.ctInfo .fc{margin:26px 0 0;font-size:12.5px;color:#5a5a65}.ctInfo .fc:first-child{margin-top:0}.ctRg{margin-top:30px;font-size:16px!important}
/* full-screen menu */
#mList a{font-size:clamp(26px,3.6vw,56px)}
#mList .mSub{list-style:none;display:flex;flex-wrap:wrap;gap:4px 18px;margin:2px 0 10px;padding:0}
#mList .mSub a{display:inline;font:500 15px var(--fa);color:#4a4a55;overflow:visible;padding:0}#mList .mSub a:hover,#mList .mSub a.on{color:#4a3acb}
/* accessibility */
:focus-visible{outline:2px solid #6d4dff;outline-offset:3px}
#cta :focus-visible,#nav :focus-visible{outline-color:#c9bcff}
.skip-link:focus{position:fixed!important;top:10px;right:10px;width:auto;height:auto;clip:auto;clip-path:none;margin:0;z-index:1000;background:#fff;color:#0d0d12;padding:10px 16px;border-radius:10px;font:700 14px var(--fa);box-shadow:0 10px 30px rgba(0,0,0,.2)}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* standalone: overlay pages */
.pg .ovTop.pgHead{gap:20px}.pg .ovAct .ovX{flex:none}


/* ===== v1.1.1 · brand logo (official artwork) ===== */
.logo{display:inline-flex!important;align-items:center;line-height:0;gap:0!important}
.logo img{display:block;height:46px;width:auto;transition:height .4s var(--ease)}
.logo .lg-c{display:none}
body.hdrL #nav .logo .lg-c,.pg .logo .lg-c,#menu .logo .lg-c{display:block}
body.hdrL #nav .logo .lg-r,.pg .logo .lg-r,#menu .logo .lg-r{display:none}
#nav{padding-top:5px;padding-bottom:5px}body.hdrS #nav .logo img{height:40px}body.hdrS #nav{padding-top:4px;padding-bottom:4px}
.preLogo{width:min(300px,62vw);height:auto;opacity:0;animation:preIn 1s var(--ease) .25s forwards}@keyframes preIn{to{opacity:1}}
.fLogo{display:block;height:58px;width:auto;margin-bottom:18px}
@media (max-width:820px){.logo img{height:40px}body.hdrS #nav .logo img{height:36px}}
@media (max-width:380px){.logo img{height:36px}}
/* ===== v1.1.1 · all Persian text in Vazirmatn ===== */
:root{--fa:"Vazirmatn",Tahoma,sans-serif;--disp:"Vazirmatn",Tahoma,sans-serif}
#pro h1,.pgHero h1,#cta .big,#oHead,#c1 h2,.bt h2,#rel h2,#portC h2,#skyH h2,#railH h2,#mList a,#railFin .t,.pgCta h3{font-family:"Vazirmatn",Tahoma,sans-serif;line-height:1.38}
#pro h1,.pgHero h1,#cta .big{font-weight:800}#oHead,#c1 h2,.bt h2,#rel h2,#portC h2,#skyH h2,#railH h2{font-weight:800}
.ln{padding-bottom:.14em;margin-bottom:-.14em}

.logo svg.lg-r,.logo svg.lg-c,svg.preLogo,svg.fLogo{aspect-ratio:560/238;width:auto}
.logo svg{display:block;height:46px;transition:height .4s var(--ease)}
.logo svg.lg-c{display:none}
body.hdrL #nav .logo svg.lg-c,.pg .logo svg.lg-c,#menu .logo svg.lg-c{display:block}
body.hdrL #nav .logo svg.lg-r,.pg .logo svg.lg-r,#menu .logo svg.lg-r{display:none}
body.hdrS #nav .logo svg{height:40px}
svg.preLogo{width:min(300px,62vw);height:auto}svg.fLogo{height:58px}
@media (max-width:820px){.logo svg{height:40px}body.hdrS #nav .logo svg{height:36px}}
@media (max-width:380px){.logo svg{height:36px}}

/* ===================== v2.0 · Header logo + Directional mega menu ===================== */
/* Logo: larger and proportional to the header (artwork ratio 560:238) */
#nav .logo,.ovTop .logo{--lgH:66px}
.ovTop .logo{--lgH:60px}
html body.hdrS #nav .logo{--lgH:56px}
html body #nav .logo svg,html body .ovTop .logo svg{height:var(--lgH)!important;width:calc(var(--lgH) * 2.353)!important;max-width:none!important;transition:height .45s var(--ease),width .45s var(--ease)}
html body #nav{padding-top:calc(8px + env(safe-area-inset-top))!important;padding-bottom:8px!important}
html body.hdrS #nav{padding-top:calc(5px + env(safe-area-inset-top))!important;padding-bottom:5px!important}
html body .ovTop{padding-top:8px;padding-bottom:8px}
html body #tele{top:calc(var(--navH,82px) + 12px)}
@media (max-width:1100px){#nav .logo{--lgH:58px}.ovTop .logo{--lgH:54px}html body.hdrS #nav .logo{--lgH:50px}}
@media (max-width:820px){#nav .logo{--lgH:50px}.ovTop .logo{--lgH:48px}html body.hdrS #nav .logo{--lgH:46px}}
@media (max-width:480px){#nav .logo,.ovTop .logo{--lgH:44px}html body.hdrS #nav .logo{--lgH:42px}}
@media (max-width:360px){#nav .logo,.ovTop .logo{--lgH:38px}html body.hdrS #nav .logo{--lgH:36px}}

/* Bar */
.dm{display:flex;align-items:center;justify-content:center;flex:1 1 auto;min-width:0;pointer-events:auto;font-family:var(--fa)}
#nav>.dm{margin:0 2vw}
.pgHead .dm{color:#0A2949}
.dm .dm-panes,.dm .dm-mextra{display:none!important}
#nav .dm .dm-list,.dm .dm-list{display:none;align-items:center;gap:4px;list-style:none;margin:0;padding:0;font-size:14.5px}
@media (min-width:1101px){#nav .dm .dm-list,.dm .dm-list{display:flex}}
@media (min-width:1101px) and (max-width:1360px){html body.hFrame #nav .dm .dm-list{display:none}}
.dm .dm-list>li{position:relative;list-style:none}
#nav .dm .dm-trg,.dm .dm-trg{position:relative;display:inline-flex;align-items:center;gap:6px;padding:10px 15px;margin:0;border:0;border-radius:999px;background:transparent;color:inherit!important;font:500 14.5px/1.4 var(--fa);letter-spacing:0;white-space:nowrap;text-decoration:none;cursor:pointer;opacity:.8;transition:opacity .3s,background-color .3s}
#nav .dm .dm-trg:hover,#nav .dm .dm-trg.is-active,.dm .dm-trg:hover,.dm .dm-trg.is-active{opacity:1}
#nav .dm .dm-trg.is-active{background:rgba(255,255,255,.1)}
html body.hdrL #nav .dm .dm-trg.is-active,.ovTop .dm .dm-trg.is-active{background:rgba(13,13,18,.06)}
#nav .dm .dm-trg:after,.dm .dm-trg:after{content:"";display:block;position:absolute;left:15px;right:15px;top:auto;bottom:5px;height:2px;border-radius:2px;background:var(--grad);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
#nav .dm .dm-trg:hover:after,#nav .dm .dm-trg.is-active:after,.dm .dm-trg:hover:after,.dm .dm-trg.is-active:after{transform:scaleX(1)}
.dm .dm-trg:focus-visible,.dm-mob :focus-visible{outline:2px solid #8a5cff;outline-offset:2px}
.dm-chev{width:15px;height:15px;flex:none;transition:transform .3s var(--ease)}
.dm .dm-trg.is-active .dm-chev{transform:rotate(-180deg)}

/* Panel */
.dm .dm-drop{position:absolute;top:100%;left:50%;transform:translateX(-50%);width:min(1240px,calc(100vw - 4vw));padding:12px 20px 40px;z-index:90;overflow:hidden;pointer-events:auto;direction:rtl;text-align:right;color:#0d0d12}
.dm .dm-drop[hidden]{display:none}
.dm .dm-panel{background:#fff;border:1px solid rgba(13,13,18,.08);border-radius:26px;padding:30px 32px 26px;box-shadow:0 34px 80px -34px rgba(13,13,40,.5)}
.dm .dm-vp{position:relative}
.dm .dm-pv{width:100%}
.dm-g{display:grid;gap:30px}
.dm-g--tr{grid-template-columns:minmax(0,1.85fr) minmax(0,1fr)}
.dm-eb{display:flex;align-items:center;gap:10px;margin:0 0 8px;font:700 12px/1.6 var(--fa);color:#6d4dff;letter-spacing:0}
.dm-eb:before{content:"";width:22px;height:2px;border-radius:2px;background:var(--grad)}
.dm-h{margin:0 0 20px;font:800 21px/1.6 var(--fa);color:#0A2949;letter-spacing:0}
.dm-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.dm .dm-card,.dm-mob .dm-card{display:flex;align-items:flex-start;gap:14px;padding:16px;border:1px solid rgba(13,13,18,.08);border-radius:18px;background:#fff;color:#0d0d12!important;text-decoration:none;opacity:1!important;transition:background-color .25s,border-color .25s,box-shadow .3s}
.dm .dm-card:hover,.dm-mob .dm-card:hover{background:#f6f4ff;border-color:rgba(109,77,255,.35);box-shadow:0 14px 30px -20px rgba(74,58,203,.55)}
.dm-ic{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:linear-gradient(135deg,rgba(138,92,255,.15),rgba(47,73,255,.15));color:#4a3acb}
.dm-ic svg{width:22px;height:22px}
.dm-ctx{display:flex;flex-direction:column;gap:3px;min-width:0}
.dm-ct{font:700 15px/1.6 var(--fa);color:#0d0d12}
.dm-cd{font:400 12.5px/1.95 var(--fa);color:#6b6b78}
.dm-media{display:grid;gap:12px;align-content:start}
.dm .dm-tile,.dm-mob .dm-tile{position:relative;display:block;overflow:hidden;border-radius:18px;aspect-ratio:16/8;background:#0b0b10;color:#fff!important;text-decoration:none;opacity:1!important}
.dm-tile img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.dm-tile:hover img{transform:scale(1.05)}
.dm-tile>span{position:absolute;inset:auto 0 0 0;padding:34px 16px 14px;font:700 13.5px/1.6 var(--fa);color:#fff;background:linear-gradient(0deg,rgba(7,7,11,.86),rgba(7,7,11,0))}
.dm .dm-tile--tall{aspect-ratio:auto;min-height:100%}
.dm-blocks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.dm .dm-block,.dm-mob .dm-block{display:flex;flex-direction:column;gap:10px;padding:20px;border:1px solid rgba(13,13,18,.08);border-radius:20px;background:linear-gradient(180deg,#fff,#faf9f6);color:#0d0d12!important;text-decoration:none;opacity:1!important;transition:background .25s,border-color .25s,box-shadow .3s}
.dm .dm-block:hover,.dm-mob .dm-block:hover{border-color:rgba(109,77,255,.35);background:#f6f4ff;box-shadow:0 14px 30px -20px rgba(74,58,203,.55)}
.dm-bt{margin:6px 0 0;font:700 15px/1.6 var(--fa);color:#0d0d12}
.dm-bd{margin:0;flex:1;font:400 12.5px/1.95 var(--fa);color:#6b6b78}
.dm-more{display:inline-flex;align-items:center;gap:6px;font:600 12.5px/1.6 var(--fa);color:#4a3acb}
.dm-more svg,.dm-cta svg{width:15px;height:15px}
.dm-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:22px;padding-top:18px;border-top:1px solid rgba(13,13,18,.07);font:500 13px/1.8 var(--fa);color:#6b6b78}
.dm .dm-cta,.dm-mob .dm-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 20px;border-radius:999px;background:var(--grad);color:#fff!important;font:600 13.5px/1.4 var(--fa);text-decoration:none;opacity:1!important;box-shadow:0 10px 24px -12px rgba(109,77,255,.8);transition:transform .3s var(--ease),box-shadow .3s}
.dm .dm-cta:hover,.dm-mob .dm-cta:hover{transform:translateY(-1px);box-shadow:0 14px 30px -12px rgba(109,77,255,.9)}
.dm-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.25fr);gap:34px}
.dm-ch{margin:0 0 14px;font:700 13px/1.6 var(--fa);color:#0A2949}
.dm .dm-ln,.dm-mob .dm-ln{display:block;padding:7px 0;font:600 14px/1.6 var(--fa);color:#2d2d36!important;text-decoration:none;opacity:1!important;transition:color .2s}
.dm a.dm-ln:hover,.dm-mob a.dm-ln:hover{color:#4a3acb!important}
.dm-ln small{display:block;margin-top:2px;font:400 11.5px/1.7 var(--fa);color:#9393a0}
.dm-ln bdi{direction:ltr;unicode-bidi:isolate;font-family:var(--en)}
.dm-city{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
.dm-cols .dm-cta{margin-top:12px}

/* Mobile accordion */
.dm-mob{position:absolute;top:calc(100% + 8px);left:12px;right:12px;z-index:95;max-height:0;overflow:hidden;opacity:0;visibility:hidden;pointer-events:none;padding:0 16px;border:1px solid transparent;border-radius:22px;background:#fff;color:#0d0d12;direction:rtl;text-align:right;box-shadow:0 30px 70px -28px rgba(13,13,40,.55);transition:max-height .4s var(--ease),opacity .3s,padding .4s var(--ease),border-color .3s,visibility 0s .4s}
.dm-mob.is-open{max-height:min(80vh,calc(100dvh - var(--navH,72px) - 24px));overflow-y:auto;overscroll-behavior:contain;opacity:1;visibility:visible;pointer-events:auto;padding:6px 16px 16px;border-color:rgba(13,13,18,.08);transition:max-height .4s var(--ease),opacity .3s,padding .4s var(--ease),border-color .3s,visibility 0s}
.dm-mob .dm-mlink,.dm-mob .dm-mbtn{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:16px 4px;margin:0;border:0;border-bottom:1px solid rgba(13,13,18,.07);border-radius:0;background:none;color:#0A2949!important;font:700 15px/1.5 var(--fa);text-align:right;text-decoration:none;cursor:pointer;opacity:1!important}
.dm-mob .dm-mlink:after{display:none!important}
.dm-mbtn .dm-chev{color:#6b6b78}
.dm-mbtn[aria-expanded="true"] .dm-chev{transform:rotate(180deg)}
.dm-mbody{max-height:0;overflow:hidden;opacity:0;transition:max-height .4s var(--ease),opacity .3s}
.dm-msec.is-open .dm-mbody{max-height:150rem;opacity:1}
.dm-minner{padding:14px 0 18px}
.dm-mob .dm-g,.dm-mob .dm-cards,.dm-mob .dm-blocks,.dm-mob .dm-cols{grid-template-columns:minmax(0,1fr)!important;gap:10px}
.dm-mob .dm-media,.dm-mob .dm-h,.dm-mob .dm-eb,.dm-mob .dm-foot,.dm-mob .dm-tile,.dm-mob .dm-more,.dm-mob .dm-cols .dm-cta{display:none!important}
.dm-mob .dm-card,.dm-mob .dm-block{padding:13px}
.dm-mob .dm-block{flex-direction:row;align-items:flex-start;gap:12px}
.dm-mob .dm-block .dm-bt{margin:0}
.dm-mob .dm-cd,.dm-mob .dm-bd{font-size:12px}
.dm-mfoot{display:flex;flex-direction:column;gap:12px;padding-top:16px}
.dm-mfoot .dm-cta{width:100%}
.dm-mcontact{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;direction:ltr;font:600 13px/1.6 var(--en)}
.dm-mob .dm-mcontact a{color:#4a3acb!important;text-decoration:none}

/* Toggle (reuses the existing "منو" button) */
@media (min-width:1101px){html body #nav [data-dm-toggle],html body .ovTop [data-dm-toggle]{display:none!important}}
@media (min-width:1101px) and (max-width:1360px){html body.hFrame #nav [data-dm-toggle]{display:flex!important}}
.btn-m .bg i{transition:transform .35s var(--ease),width .35s var(--ease)}
.btn-m.is-open .bg i:first-child{transform:translateY(2.75px) rotate(45deg)}
.btn-m.is-open .bg i:last-child{width:16px;transform:translateY(-2.75px) rotate(-45deg)}
@media (prefers-reduced-motion:reduce){.dm-mob,.dm-mbody,.dm-chev,.dm-tile img,.dm .dm-trg:after,.btn-m .bg i{transition:none!important}}

@media (max-height:520px) and (orientation:landscape){#nav .logo,.ovTop .logo,html body.hdrS #nav .logo{--lgH:42px}}
@media (max-height:520px) and (orientation:landscape) and (min-width:1101px){html body #nav [data-dm-toggle]{display:flex!important}}