/* ===== Spec shell + compare bar ===== */
.shell{position:sticky;top:0;z-index:60;background:rgba(8,12,32,.95);backdrop-filter:blur(12px);color:#EDEFF7;border-bottom:1px solid #232a55}
.shell-top{display:flex;align-items:center;gap:16px;padding:8px var(--gut)}
.shell-top .brand{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.shell-top .brand img{width:28px;height:28px;border-radius:50%;background:#fff}
.shell-top .brand b{font-size:11px;letter-spacing:.18em}
.tabs{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;flex:1}
.tabs::-webkit-scrollbar{display:none}
.tabs a{flex:0 0 auto;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;padding:8px 11px;border-radius:var(--pill);color:#9AA2C8;transition:background .3s,color .3s}
.tabs a:hover{color:#fff}
.tabs a[aria-current="page"]{background:#C9A66B;color:#0F1535}
.tabs i{flex:0 0 1px;background:#232a55;margin:6px}
.compare{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:8px var(--gut) 10px;border-top:1px solid #1a2048;font-size:12px}
.compare .grp{display:flex;align-items:center;gap:6px}
.compare .grp>span{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#7F88B4;margin-right:4px}
.seg{display:flex;background:#141a3f;border-radius:var(--pill);padding:3px}
.seg button{border:0;background:transparent;color:#AEB5D8;padding:6px 12px;border-radius:var(--pill);cursor:pointer;font-size:12px;font-weight:600;display:flex;align-items:center;gap:6px;transition:background .3s,color .3s}
.seg button[aria-pressed="true"]{background:#EDEFF7;color:#0F1535}
.seg .chip{width:10px;height:10px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.compare .hint{margin-left:auto;color:#7F88B4;font-size:11px}
.seg button{white-space:nowrap}
/* 7 type options: keep the bar to one scrollable row so it never overlaps the page */
.compare{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin}
.compare .grp,.compare .ab{flex:0 0 auto}
@media (max-width:900px){
  .compare{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:14px}
  .compare::-webkit-scrollbar{display:none}
  .compare .grp,.compare .ab{flex:0 0 auto}
}
body{overflow-x:clip}
.compare .ab{border:1px solid #C9A66B;color:#C9A66B;background:transparent;border-radius:var(--pill);padding:6px 12px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}

.page{display:none}.page.on{display:block}
.frame{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding:14px var(--gut);background:var(--line);color:var(--ink2)}
.frame b{font-family:var(--display);font-weight:var(--d-wt);text-transform:var(--d-case);font-size:22px;color:var(--ink)}

/* ===== Preloader ===== */
.loader{position:fixed;inset:0;z-index:100;background:var(--deep);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;color:var(--on-dark)}
.loader .runway{display:flex;gap:14px}
.loader .runway i{width:10px;height:10px;border-radius:50%;background:var(--accent);opacity:.15;animation:rw 1.1s infinite}
.loader .runway i:nth-child(2){animation-delay:.1s}.loader .runway i:nth-child(3){animation-delay:.2s}.loader .runway i:nth-child(4){animation-delay:.3s}.loader .runway i:nth-child(5){animation-delay:.4s}.loader .runway i:nth-child(6){animation-delay:.5s}.loader .runway i:nth-child(7){animation-delay:.6s}
@keyframes rw{0%,60%,100%{opacity:.15;box-shadow:none}20%{opacity:1;box-shadow:0 0 16px var(--accent)}}
.loader .mono{color:var(--on-dark3)}
.loader.gone{opacity:0;visibility:hidden;transition:opacity .6s .1s,visibility 0s .8s}

/* ===== Flight progress (scroll) ===== */
.fprog{position:fixed;left:0;right:0;bottom:0;height:3px;z-index:45;pointer-events:none}
.fprog b{position:absolute;inset:0;background:var(--accent);transform-origin:left;transform:scaleX(0)}
.fprog svg{position:absolute;bottom:-7px;width:18px;height:18px;color:var(--accent);transform:translateX(-50%) rotate(45deg);left:0}
/* Shell collapses its variant row while reading down, returns on scroll up */
.compare{max-height:120px;transition:max-height .45s var(--ease),opacity .3s,padding .45s var(--ease)}
.shell.min .compare{max-height:0;opacity:0;padding-block:0;overflow:hidden;border-top-color:transparent}
.alti{opacity:0;transform:translateY(10px);transition:opacity .4s,transform .4s var(--ease);pointer-events:none}
.alti.on{opacity:.9;transform:none}
.alti{position:fixed;left:18px;bottom:18px;z-index:44;background:var(--deep);color:var(--on-dark);border-radius:12px;padding:8px 12px;display:flex;flex-direction:column;gap:0;box-shadow:var(--e2);font-family:var(--mono);font-size:10px;letter-spacing:.1em}
.alti b{font-size:17px;color:var(--accent);font-weight:500;letter-spacing:.04em}

/* ===== Custom cursor ===== */
.cur{position:fixed;left:0;top:0;z-index:90;pointer-events:none;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:1.5px solid var(--accent);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:var(--accent-ink);transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),background .35s,border-color .35s;mix-blend-mode:normal}
.cur.link{width:54px;height:54px;margin:-27px 0 0 -27px;background:rgba(201,166,107,.18)}
.cur.view{width:78px;height:78px;margin:-39px 0 0 -39px;background:var(--accent);border-color:var(--accent)}
.cur-dot{position:fixed;left:0;top:0;z-index:91;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:var(--accent);pointer-events:none}
@media (hover:none){.cur,.cur-dot{display:none}}

/* ===== Site nav ===== */
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px var(--gut);position:relative;z-index:3}
.nav.light{border-bottom:1px solid var(--line)}
.logo{display:flex;align-items:center;gap:12px}
.logo img{width:44px;height:44px;border-radius:50%;background:#fff;transition:transform .8s var(--ease)}
.logo:hover img{transform:rotate(-360deg)}
.logo span{display:flex;flex-direction:column;line-height:1.2}
.logo b{font-size:13px;letter-spacing:.16em}
.links{display:flex;gap:28px;font-size:15px;font-weight:500}
.links a{position:relative;padding:4px 0}
.links a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.links a:hover::after,.links a.cur-l::after{transform:scaleX(1);transform-origin:left}
.nav-r{display:flex;align-items:center;gap:14px}
.seatbelt{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:var(--pill);border:1px solid currentColor;opacity:.55;font-family:var(--mono);font-size:10px;letter-spacing:.1em;transition:opacity .3s,color .3s,box-shadow .3s}
.seatbelt svg{width:16px;height:16px}
.seatbelt.lit{opacity:1;color:var(--accent);box-shadow:0 0 18px rgba(201,166,107,.35)}
.burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;border-radius:50%;border:1px solid currentColor}

/* PA ticker */
.pa{display:flex;overflow:hidden;white-space:nowrap;border-block:1px solid var(--dark-line);background:var(--deep);color:var(--on-dark2)}
.pa-track{display:flex;gap:48px;padding:10px 0;animation:pa 38s linear infinite;flex:0 0 auto;padding-right:48px}
.pa-track span{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.pa-track span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
.pa:hover .pa-track{animation-play-state:paused}
@keyframes pa{to{transform:translateX(-100%)}}

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:var(--pill);font-weight:700;font-size:15px;border:0;cursor:pointer;position:relative;overflow:hidden;isolation:isolate;transition:transform .5s var(--ease),box-shadow .4s}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--hov,rgba(255,255,255,.2));transform:translateY(101%);border-radius:inherit;transition:transform .5s var(--ease)}
.btn:hover::before{transform:none}
.btn:active{transform:scale(.97)}
.btn .fly{width:18px;height:18px;flex:0 0 auto;transition:transform .6s var(--ease)}
.btn:hover .fly{animation:takeoff .9s var(--ease)}
@keyframes takeoff{0%{transform:none}45%{transform:translate(26px,-18px);opacity:0}46%{transform:translate(-26px,18px);opacity:0}100%{transform:none;opacity:1}}
.btn-acc{background:var(--accent);color:var(--accent-ink);--hov:var(--accent-hi)}
.btn-light{background:var(--on-dark);color:var(--dark);--hov:#fff}
.btn-dark{background:var(--dark);color:var(--on-dark);--hov:var(--dark2)}
.btn-line{background:transparent;color:inherit;box-shadow:inset 0 0 0 1px currentColor;--hov:rgba(127,127,127,.12)}
.btn-wa{background:transparent;color:#128C4B;box-shadow:inset 0 0 0 1px #25D366;--hov:rgba(37,211,102,.12)}
.dark .btn-wa{color:#6EE7A0}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn-sm{min-height:40px;padding:0 16px;font-size:13px}
.link-a{display:inline-flex;gap:8px;align-items:center;font-weight:600;padding-bottom:4px;background:linear-gradient(var(--accent),var(--accent)) 0 100%/100% 1px no-repeat;transition:background-size .5s var(--ease)}
.link-a:hover{background-size:0 1px;background-position:100% 100%}
.link-a i{font-style:normal;transition:transform .4s var(--ease)}
.link-a:hover i{transform:translateX(5px)}
.icon-btn{width:44px;height:44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);background:var(--surface);cursor:pointer;transition:transform .4s var(--ease),border-color .3s}
.icon-btn:hover{transform:rotate(-12deg);border-color:var(--accent)}
.ico{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}

/* chips / badges */
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--pill);font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line);background:var(--surface);color:var(--ink2)}
.chip.on{background:var(--dark);color:var(--on-dark);border-color:var(--dark)}
.chip .dot{width:7px;height:7px;border-radius:50%;background:var(--signal)}
.chip.live .dot{animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.2}}
.dark .chip{background:transparent;border-color:var(--dark-line);color:var(--on-dark2)}
.wings{display:inline-flex;align-items:center;gap:10px;color:var(--accent)}
.wings svg{width:88px;height:22px}

/* WhatsApp float + mobile bar */
.wa{position:fixed;right:24px;bottom:24px;z-index:46;width:62px;height:62px;border-radius:50%;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 14px 30px rgba(0,0,0,.28);transition:transform .5s var(--ease)}
.wa:hover{transform:scale(1.06) rotate(-8deg)}
.wa::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #25D366;animation:ping 2.6s var(--ease) infinite}
@keyframes ping{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.75);opacity:0}}
.wa .tip{position:absolute;right:76px;white-space:nowrap;background:var(--deep);color:var(--on-dark);font-size:13px;font-weight:600;padding:9px 13px;border-radius:10px;opacity:0;transform:translateX(8px);transition:.4s var(--ease);pointer-events:none}
.wa .tip::after{content:"";position:absolute;right:-5px;top:50%;width:10px;height:10px;background:inherit;transform:translateY(-50%) rotate(45deg)}
.wa:hover .tip,.wa.hello .tip{opacity:1;transform:none}
.mbar{display:none}
