/* ============================================================
   遠航飛行 Altivision Aviation — 獨立設計系統
   ============================================================
   ⚠ 只給 /fly/ 使用。與 altivision.css(無人機)、
     altivision-ai.css(AI)完全獨立,三套互不影響。

   ── 三個品牌怎麼區隔 ──
   遠航智控:深色霓虹 / 粉紫洋紅 / 大圓角卡片 / Orbitron
   遠航智能:紙白 × 墨綠 / 零發光 / 近直角 / 編號分節
   遠航飛行:夜航深藍 × 水藍(取自 logo)× 跑道琥珀 /
            儀表板斜角卡 / 航班資訊顯示器式的等寬數字

   ── 字級 ──
   ⚠ 這個站一開始就把基準訂大:桌機內文 18px、手機 16.5px,
     等寬小標一律不低於 12px。要再調整請改最下面的「字級」段落。
   ============================================================ */

:root{
  --bg:      #0A1824;   /* 夜航深藍 */
  --bg-2:    #0D1F2E;
  --panel:   #112839;   /* 儀表板面板 */
  --panel-2: #16334A;
  --line:    #1E3C52;
  --line-2:  #2C5872;
  --txt:     #EDF6FA;
  --muted:   #A7BECD;   /* 在 --bg 上對比 9.2:1 */
  --cyan:    #91E7F1;   /* 取自 logo */
  --cyan-2:  #5CC9DC;
  --cyan-dk: #0E7792;
  --amber:   #FFC048;   /* 跑道燈 / 價格強調 */
  --amber-2: #E89A1C;
  --ok:      #5BD6A0;

  --font-zh: "Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  --font-en: "Barlow",var(--font-zh);
  --font-mono:"Roboto Mono",ui-monospace,Menlo,monospace;

  --r:   10px;
  --r-sm: 6px;
  --maxw: 1240px;
  --gut: clamp(18px,4vw,52px);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--font-zh);background:var(--bg);color:var(--txt);
  font-size:16.5px;line-height:1.85;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
::selection{background:var(--cyan);color:var(--bg)}
section[id]{scroll-margin-top:84px}

.wrap{width:min(var(--maxw),100% - var(--gut)*2);margin:0 auto}
.narrow{max-width:62ch}
.mt1{margin-top:14px}.mt2{margin-top:28px}.mt3{margin-top:44px}.mt4{margin-top:68px}

/* ============ 背景:地平線 + 航圖格線 ============
   1) sky   上深下亮的夜空漸層,模擬姿態儀的天地線
   2) chart 航圖式的細格線,往下淡出
   兩層都是 fixed + pointer-events:none。 */
.bg-sky{position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(70vw 46vw at 78% -10%,rgba(145,231,241,.13),transparent 64%),
    radial-gradient(52vw 40vw at 8% 8%,rgba(92,201,220,.09),transparent 60%),
    linear-gradient(180deg,#0A1824 0%,#0C1E2D 52%,#0A1824 100%)}
.bg-chart{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(145,231,241,.07) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(145,231,241,.07) 1px,transparent 1px);
  background-size:68px 68px;
  -webkit-mask-image:radial-gradient(130% 80% at 50% -6%,#000 16%,transparent 74%);
          mask-image:radial-gradient(130% 80% at 50% -6%,#000 16%,transparent 74%)}

/* ============ 捲動進度 ============ */
.prog{position:fixed;top:0;left:0;height:3px;width:0;z-index:1000;
  background:linear-gradient(90deg,var(--cyan),var(--amber));transition:width .08s linear}

/* ============ 文字 ============ */
h1,h2,h3,h4{font-family:var(--font-en);line-height:1.1;font-weight:700;letter-spacing:-.015em}
h1 .zh,h2 .zh,h3 .zh,h4 .zh{font-family:var(--font-zh);letter-spacing:-.03em}
.d1{font-size:clamp(38px,6.6vw,86px)}
.d2{font-size:clamp(28px,3.8vw,50px)}
.d3{font-size:clamp(21px,2.2vw,29px)}
p{color:var(--muted)}
.lead{font-size:clamp(17px,1.5vw,20px);line-height:1.9;color:#C6D8E4}
.sm{font-size:15.5px;color:var(--muted);line-height:1.8}
.hl{color:var(--cyan)}
.amb{color:var(--amber)}
/* 等寬小標:航班顯示器的那種字 */
.mono{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--cyan-2)}
.mono.dim{color:var(--muted)}

/* ============ 航班資訊列(FIDS) ============ */
.fids{background:#071320;border-bottom:1px solid var(--line);overflow:hidden}
.fids .wrap{display:flex;gap:24px;justify-content:space-between;align-items:center;
  min-height:34px;font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;color:#8FA8B8}
.fids b{color:var(--cyan);font-weight:500}
.fids .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ok);
  margin-right:7px;vertical-align:1px;animation:beat 2.6s steps(1) infinite}
@keyframes beat{0%,62%{opacity:1}63%,100%{opacity:.25}}
@media(max-width:860px){.fids .wrap span:nth-child(2){display:none}}
/* ⚠ 字放大到 12px 之後,品牌名 + 時鐘在窄螢幕會擠成兩行。
   窄螢幕只留品牌名,時鐘收起來(它只是裝飾)。 */
@media(max-width:560px){.fids .wrap{font-size:12px;gap:10px;letter-spacing:.08em}
  .fids .clk{display:none}}

/* ============ 導覽列 ============ */
.nav{position:sticky;top:0;z-index:900;background:rgba(10,24,36,.88);
  border-bottom:1px solid var(--line);backdrop-filter:saturate(1.4) blur(12px)}
.nav-in{width:min(var(--maxw),100% - var(--gut)*2);margin:0 auto;display:flex;align-items:center;
  justify-content:space-between;height:76px;gap:20px}
.brand{display:flex;align-items:center;gap:11px}
.brand .mark{width:40px;height:auto;flex:0 0 auto}
.brand .txt{display:flex;flex-direction:column;line-height:1.1}
.brand b{font-size:22px;font-weight:700;letter-spacing:-.02em;white-space:nowrap}
.brand small{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.16em;
  color:var(--cyan-2);margin-top:3px;white-space:nowrap}
.nav-menu{display:flex;align-items:center;gap:3px}
.nav-menu a{padding:9px 14px;font-size:16px;color:#C6D8E4;border-radius:var(--r-sm);
  transition:.2s var(--ease)}
.nav-menu a:hover{color:var(--cyan);background:rgba(145,231,241,.08)}
.nav-menu a.on{color:var(--cyan)}
.nav-cta{background:var(--cyan)!important;color:var(--bg)!important;font-weight:700;
  padding:10px 20px!important;box-shadow:0 6px 20px -8px rgba(145,231,241,.6)}
.nav-cta:hover{background:#fff!important;color:var(--bg)!important}
.nav-burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:9px}
.nav-burger span{width:24px;height:2px;background:var(--cyan);border-radius:2px;transition:.25s var(--ease)}
.nav-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0}
.nav-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:1060px){
  /* ⚠ 手機版必留:.nav 上的 backdrop-filter(毛玻璃)會變成
     position:fixed 的定位基準,導致全螢幕選單不是對齊視窗,而是對齊
     導覽列 —— 選單會被頂部狀態列的高度往下推,底部同樣高度被切到畫面外。
     手機版用不到毛玻璃(選單是實心底),直接關掉。
     (同一個坑在無人機站的 .nav-wrap.scrolled 也踩過一次。) */
  .nav{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--bg)}
  .nav-in{height:66px}
  .brand .mark{width:33px}.brand b{font-size:19px}.brand small{font-size:11.5px;letter-spacing:.12em}
  .nav-burger{display:flex}
  .nav-menu{position:fixed;top:0;left:0;right:0;height:100vh;height:100dvh;background:var(--bg-2);
    flex-direction:column;justify-content:flex-start;align-items:stretch;gap:0;
    padding:92px 8% calc(40px + env(safe-area-inset-bottom,0px));
    transform:translateX(100%);transition:transform .38s var(--ease);
    overflow-y:auto;overscroll-behavior:contain}
  .nav-menu.open{transform:translateX(0)}
  .nav-menu>*{flex:0 0 auto}
  .nav-menu a{padding:19px 4px;font-size:20px;border-bottom:1px solid var(--line);border-radius:0}
  .nav-cta{margin-top:24px;text-align:center;border-radius:var(--r-sm)}
}

/* ============ HERO ============ */
.hero{padding:clamp(52px,7vw,100px) 0 clamp(40px,5vw,72px);position:relative}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(30px,5vw,68px);align-items:center}
@media(max-width:1000px){.hero-grid{grid-template-columns:1fr}}
.hero h1{letter-spacing:-.03em}
/* 逐行揭開:純 CSS,不依賴 JS */
.rl{display:block;overflow:hidden}
.rl>span{display:block;animation:rise 1s var(--ease) both}
.rl:nth-child(2)>span{animation-delay:.1s}
.rl:nth-child(3)>span{animation-delay:.2s}
@keyframes rise{from{transform:translateY(110%)}to{transform:none}}

/* 內頁 hero */
.phero{padding:clamp(40px,5vw,66px) 0 clamp(28px,3.4vw,44px);border-bottom:1px solid var(--line)}
.phero h1{font-size:clamp(30px,4.4vw,58px)}
.crumb{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.14em;color:var(--muted);
  margin-bottom:18px;text-transform:uppercase}
.crumb a:hover{color:var(--cyan)}

/* ============ 跑道分隔線 ============
   中線虛線 + 兩側實線,像跑道中心線。 */
.rwy{height:26px;margin:clamp(26px,3vw,40px) 0;position:relative}
.rwy::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;
  background:repeating-linear-gradient(90deg,var(--line-2) 0 36px,transparent 36px 64px)}
.rwy::after{content:"";position:absolute;left:0;top:calc(50% - 10px);width:3px;height:20px;
  background:var(--amber);box-shadow:0 0 12px rgba(255,192,72,.6)}

/* ============ 分節標題 ============ */
.secmark{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;
  padding-bottom:18px;margin-bottom:clamp(26px,3vw,40px);border-bottom:1px solid var(--line)}
.secmark h2{font-size:clamp(24px,3.1vw,40px)}
.secmark .no{font-family:var(--font-mono);font-size:13px;letter-spacing:.16em;color:var(--amber)}
.secmark .en{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.18em;
  color:var(--muted);text-transform:uppercase;margin-left:auto}
@media(max-width:700px){.secmark .en{display:none}}

.sec{padding:clamp(48px,5.6vw,84px) 0}
.sec.deep{background:rgba(7,19,32,.6);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* ============ 儀表板面板(主要卡片) ============
   上緣一道亮邊模擬面板斜角,hover 時水藍外緣亮起。 */
.panel{position:relative;background:linear-gradient(180deg,var(--panel),var(--bg-2));
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  transition:border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)}
.panel::before{content:"";position:absolute;top:0;left:14px;right:14px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(145,231,241,.5),transparent)}
.panel:hover{border-color:var(--line-2);transform:translateY(-3px);
  box-shadow:0 22px 50px -26px rgba(0,0,0,.8),0 0 0 1px rgba(145,231,241,.18)}
.panel .bd{padding:clamp(22px,2.4vw,30px)}
.panel h3{font-size:clamp(19px,2vw,25px);margin-bottom:12px}
.panel p{font-size:16px;line-height:1.82}

/* ============ 登機證式課程卡 ============
   左右兩欄中間一道撕線,右側是價格存根。 */
.bpass{display:grid;grid-template-columns:1fr 206px;background:linear-gradient(180deg,var(--panel),var(--bg-2));
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;position:relative;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.bpass:hover{border-color:var(--cyan-dk);box-shadow:0 0 0 1px rgba(145,231,241,.2),0 24px 54px -28px rgba(0,0,0,.85)}
.bpass .main{padding:clamp(24px,2.6vw,34px)}
.bpass .stub{border-left:2px dashed var(--line-2);padding:clamp(22px,2.4vw,30px) 22px;
  display:flex;flex-direction:column;justify-content:center;gap:4px;text-align:center;
  background:rgba(7,19,32,.45)}
.bpass .stub .k{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;color:var(--muted)}
.bpass .stub .v{font-family:var(--font-en);font-size:30px;font-weight:700;color:var(--amber);
  letter-spacing:-.02em;line-height:1.15}
.bpass .stub .u{font-size:13.5px;color:var(--muted)}
/* 撕線上下的半圓缺口 */
.bpass::before,.bpass::after{content:"";position:absolute;right:205px;width:18px;height:18px;
  border-radius:50%;background:var(--bg);transform:translateX(50%);z-index:2}
.bpass::before{top:-9px}
.bpass::after{bottom:-9px}
.bpass h3{font-size:clamp(21px,2.2vw,27px);margin-bottom:10px}
.bpass .tags{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
@media(max-width:760px){
  .bpass{grid-template-columns:1fr}
  .bpass .stub{border-left:0;border-top:2px dashed var(--line-2);flex-direction:row;
    justify-content:space-between;align-items:center;text-align:left}
  .bpass::before,.bpass::after{display:none}
}

/* ============ 標籤 ============ */
.tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:12.5px;
  letter-spacing:.06em;padding:6px 13px;border-radius:999px;border:1px solid var(--line-2);
  color:var(--cyan-2);background:rgba(145,231,241,.07)}
.tag.amb{border-color:rgba(255,192,72,.4);color:var(--amber);background:rgba(255,192,72,.08)}
.tag.ok{border-color:rgba(91,214,160,.4);color:var(--ok);background:rgba(91,214,160,.08)}

/* ============ 訓練階段(課程大綱) ============ */
.stages{border-top:1px solid var(--line)}
.stage{display:grid;grid-template-columns:96px 1fr auto;gap:22px;align-items:start;
  padding:22px 0;border-bottom:1px solid var(--line);transition:.28s var(--ease)}
.stage:hover{padding-left:12px;background:linear-gradient(90deg,rgba(145,231,241,.06),transparent)}
.stage .lv{font-family:var(--font-mono);font-size:13px;letter-spacing:.1em;color:var(--amber);padding-top:4px}
.stage h4{font-size:19px;margin-bottom:7px}
.stage p{font-size:15.5px;line-height:1.78}
.stage .hrs{font-family:var(--font-mono);font-size:13px;color:var(--cyan-2);white-space:nowrap;padding-top:5px}
@media(max-width:820px){
  .stage{grid-template-columns:72px 1fr;gap:6px 16px}
  .stage .hrs{grid-column:2;padding-top:0}
}

/* ============ 規格表 ============ */
.specs{width:100%;border-collapse:collapse;font-size:16px}
.specs tr{border-bottom:1px solid var(--line)}
.specs tr:first-child{border-top:1px solid var(--line)}
.specs th{text-align:left;font-family:var(--font-mono);font-size:12.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);font-weight:400;padding:15px 22px 15px 0;
  white-space:nowrap;vertical-align:top;width:148px}
.specs td{padding:15px 0;color:#C6D8E4;line-height:1.8}
.specs td b{color:#fff;font-weight:700}
@media(max-width:620px){
  .specs th{display:block;padding:14px 0 2px;width:auto}
  .specs td{display:block;padding:0 0 14px}
  .specs tr:first-child{border-top:0}
}

/* ============ 條列 ============ */
.blist{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.blist li{position:relative;padding-left:26px;font-size:16px;color:var(--muted);line-height:1.8}
.blist li::before{content:"";position:absolute;left:0;top:12px;width:13px;height:2px;
  background:var(--cyan);border-radius:2px}
.blist li b{color:#fff;font-weight:700}

/* ============ 提示 ============ */
.note{display:flex;gap:14px;align-items:flex-start;border:1px solid rgba(145,231,241,.3);
  background:rgba(145,231,241,.06);border-radius:var(--r);padding:20px 24px;font-size:16px;
  line-height:1.84;color:#C6D8E4}
.note b{color:var(--cyan)}
.note .ic{flex:0 0 auto;font-size:20px;margin-top:2px}
.note.warn{border-color:rgba(255,192,72,.34);background:rgba(255,192,72,.07)}
.note.warn b{color:var(--amber)}
.note>div{flex:1;min-width:0}

/* ============ 按鈕 ============ */
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 28px;border-radius:var(--r-sm);
  font-family:var(--font-zh);font-weight:700;font-size:16.5px;border:1px solid transparent;
  cursor:pointer;transition:.24s var(--ease);white-space:nowrap}
.btn-main{background:var(--cyan);color:var(--bg);box-shadow:0 8px 24px -10px rgba(145,231,241,.7)}
.btn-main:hover{background:#fff;transform:translateY(-2px);box-shadow:0 14px 32px -12px rgba(145,231,241,.9)}
.btn-line{border-color:var(--line-2);color:var(--txt);background:rgba(145,231,241,.04)}
.btn-line:hover{border-color:var(--cyan);color:var(--cyan);background:rgba(145,231,241,.1)}
.btn-ln{background:#06C755;color:#04301A;box-shadow:0 8px 24px -10px rgba(6,199,85,.6)}
.btn-ln:hover{background:#17D866;transform:translateY(-2px)}
.btn-sm{padding:10px 19px;font-size:15px}
.btn .ar{transition:transform .24s var(--ease)}
.btn:hover .ar{transform:translateX(5px)}

/* ============ 數據 ============ */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:0;
  border-top:1px solid var(--line);border-left:1px solid var(--line)}
.stats>div{padding:24px 24px 26px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.stats .n{font-family:var(--font-en);font-size:clamp(32px,3.6vw,46px);font-weight:700;line-height:1;
  color:var(--cyan);letter-spacing:-.02em}
.stats .l{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-top:11px}

/* ============ 圖片框 / 相片牆 ============ */
.shot{margin:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:var(--panel);transition:.3s var(--ease)}
.shot:hover{border-color:var(--line-2);box-shadow:0 20px 44px -24px rgba(0,0,0,.8)}
.shot img{width:100%;height:auto;cursor:zoom-in;transition:transform .7s var(--ease)}
.shot:hover img{transform:scale(1.02)}
.shot figcaption{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.05em;color:var(--muted);
  padding:13px 18px;border-top:1px solid var(--line);background:rgba(7,19,32,.5);line-height:1.7}
.shot figcaption b{color:var(--cyan);font-weight:500}

.gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:14px}
.gal figure{margin:0;position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r);
  border:1px solid var(--line);background:var(--panel);cursor:zoom-in;transition:.28s var(--ease)}
.gal figure:hover{border-color:var(--cyan-dk);box-shadow:0 18px 40px -22px rgba(0,0,0,.8)}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.gal figure:hover img{transform:scale(1.06)}
.gal figcaption{position:absolute;inset:auto 0 0;padding:24px 14px 12px;font-family:var(--font-mono);
  font-size:12.5px;letter-spacing:.06em;color:#fff;line-height:1.5;
  background:linear-gradient(transparent,rgba(5,14,24,.92));opacity:0;transform:translateY(7px);
  transition:.32s var(--ease)}
.gal figure:hover figcaption{opacity:1;transform:none}

/* ============ 商品卡(飛機模型) ============ */
.prods{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:22px}
.prod{display:flex;flex-direction:column;background:linear-gradient(180deg,var(--panel),var(--bg-2));
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:.3s var(--ease)}
.prod:hover{border-color:var(--cyan-dk);transform:translateY(-4px);
  box-shadow:0 26px 56px -28px rgba(0,0,0,.85),0 0 0 1px rgba(145,231,241,.16)}
.prod .ph{position:relative;aspect-ratio:1/1;background:#fff;overflow:hidden;cursor:zoom-in}
.prod .ph img{width:100%;height:100%;object-fit:contain;transition:transform .7s var(--ease)}
.prod:hover .ph img{transform:scale(1.04)}
.prod .ph .pin{position:absolute;top:12px;left:12px;z-index:2;font-family:var(--font-mono);
  font-size:12px;letter-spacing:.1em;padding:5px 12px;border-radius:999px;
  background:rgba(7,19,32,.88);color:var(--cyan);border:1px solid rgba(145,231,241,.3)}
.prod .bd{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1}
.prod h3{font-size:22px;margin-bottom:5px}
.prod .sub{font-family:var(--font-mono);font-size:13px;letter-spacing:.08em;color:var(--muted);margin-bottom:14px}
.prod p{font-size:15.5px;flex:1}
.prod .price{font-family:var(--font-en);font-size:32px;font-weight:700;color:var(--amber);
  letter-spacing:-.02em;margin:18px 0 4px}
.prod .inc{font-size:14.5px;color:var(--muted);margin-bottom:18px}

/* ============ 縮圖切換列 ============ */
.thumbs{display:flex;gap:9px;flex-wrap:wrap;margin-top:12px}
.thumbs button{width:62px;height:62px;padding:0;border-radius:var(--r-sm);overflow:hidden;
  border:1px solid var(--line);background:#fff;cursor:pointer;transition:.22s var(--ease)}
.thumbs button img{width:100%;height:100%;object-fit:contain}
.thumbs button:hover{border-color:var(--cyan-2)}
.thumbs button.on{border-color:var(--cyan);box-shadow:0 0 0 2px rgba(145,231,241,.3)}

/* ============ 常見問題 ============ */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq details[open]{background:rgba(145,231,241,.04)}
.faq summary{list-style:none;cursor:pointer;position:relative;padding:21px 48px 21px 0;
  font-weight:700;font-size:17.5px;line-height:1.56;color:var(--txt);transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--cyan)}
.faq summary::after{content:"";position:absolute;right:12px;top:28px;width:11px;height:11px;
  border-right:2px solid var(--cyan-2);border-bottom:2px solid var(--cyan-2);
  transform:rotate(45deg);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq .a{padding:0 20px 24px 0;font-size:16px;color:var(--muted);line-height:1.9}
.faq .a b{color:#fff}
.faq .a a{color:var(--cyan);border-bottom:1px solid var(--cyan-dk)}

/* ============ CTA ============ */
.cta{border:1px solid var(--line);border-radius:var(--r);padding:clamp(36px,4.4vw,60px) var(--gut);
  text-align:center;position:relative;overflow:hidden;
  background:linear-gradient(160deg,var(--panel-2),var(--bg-2) 60%)}
.cta::before{content:"";position:absolute;inset:0;opacity:.6;pointer-events:none;
  background:radial-gradient(44vw 30vw at 80% -20%,rgba(145,231,241,.2),transparent 62%),
             radial-gradient(36vw 26vw at 6% 120%,rgba(255,192,72,.12),transparent 60%)}
.cta>*{position:relative;z-index:1}
.cta h2{font-size:clamp(24px,3vw,38px);margin-bottom:14px}
.cta p{font-size:17px;max-width:56ch;margin:0 auto 28px}
.cta-row{display:flex;gap:13px;justify-content:center;flex-wrap:wrap}

/* ============ 下一頁導引 ============ */
.nextnav{display:grid;grid-template-columns:repeat(auto-fit,minmax(236px,1fr));gap:0;
  border-top:1px solid var(--line);border-left:1px solid var(--line)}
.nextnav a{padding:26px 24px 28px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  transition:.28s var(--ease)}
.nextnav a:hover{background:rgba(145,231,241,.07)}
.nextnav .n{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;color:var(--amber);
  display:block;margin-bottom:10px}
.nextnav h4{font-size:19px;margin-bottom:7px}
.nextnav p{font-size:15.5px;line-height:1.7}

/* ============ 姐妹品牌 ============ */
.sister{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:var(--r);padding:22px 26px;background:rgba(7,19,32,.5)}
.sister .t{font-size:16px;color:var(--muted)}
.sister .t b{color:#fff;font-weight:700}

/* ============ 頁尾 ============ */
footer{border-top:1px solid var(--line);padding:52px 0 28px;background:rgba(7,19,32,.7)}
.f-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.1fr;gap:34px}
@media(max-width:880px){.f-grid{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.f-grid{grid-template-columns:1fr}}
.f-brand p{font-size:15px;color:var(--muted);margin-top:13px;line-height:1.8}
footer h5{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cyan-2);margin-bottom:15px;font-weight:400}
footer ul{display:flex;flex-direction:column;gap:10px}
footer li,footer a{font-size:15.5px;color:var(--muted)}
footer a{transition:color .2s}
footer a:hover{color:var(--cyan)}
.f-end{border-top:1px solid var(--line);margin-top:38px;padding-top:20px;display:flex;
  justify-content:space-between;gap:12px;flex-wrap:wrap;font-family:var(--font-mono);
  font-size:12.5px;letter-spacing:.08em;color:var(--muted)}

/* ============ 進場動畫 ============ */
.rv{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.09s}.rv.d2{transition-delay:.18s}.rv.d3{transition-delay:.27s}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .rl>span{animation:none}
  .btn-main:hover,.panel:hover,.prod:hover{transform:none}
}

/* ============ 燈箱 ============ */
.lb{position:fixed;inset:0;z-index:2000;background:rgba(5,14,24,.97);display:none;
  align-items:center;justify-content:center;padding:4vw;cursor:zoom-out}
.lb.open{display:flex;animation:fade .3s var(--ease)}
@keyframes fade{from{opacity:0}to{opacity:1}}
.lb img{max-width:100%;max-height:86vh;object-fit:contain;border-radius:var(--r)}
.lb .cap{position:absolute;bottom:3vh;left:0;right:0;text-align:center;color:var(--muted);
  font-family:var(--font-mono);font-size:13px;letter-spacing:.1em}
.lb .cls{position:absolute;top:2.6vh;right:max(14px,2.6vw);width:38px;height:38px;display:flex;
  align-items:center;justify-content:center;font-size:21px;color:var(--muted);background:transparent;
  border:1px solid var(--line-2);border-radius:var(--r-sm);cursor:pointer;transition:.22s}
.lb .cls:hover{color:var(--cyan);border-color:var(--cyan)}

/* ============ 手機底部列 ============ */
.m-cta{display:none}
@media(max-width:780px){
  .m-cta{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:800;
    background:rgba(7,19,32,.97);border-top:1px solid var(--line);
    backdrop-filter:blur(10px);padding-bottom:env(safe-area-inset-bottom,0px)}
  .m-cta a{flex:1;text-align:center;padding:15px 6px;font-size:15px;font-weight:700;
    color:var(--txt);white-space:nowrap}
  .m-cta a.ln{background:rgba(6,199,85,.16);color:#3FE07F}
  .m-cta a.main{background:var(--cyan);color:var(--bg)}
  body{padding-bottom:54px}
}

/* ============ 鍵盤焦點 ============ */
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:2px solid var(--cyan);outline-offset:3px;border-radius:3px}

/* ============================================================
   字級 —— 桌機再放大一級
   ⚠ 使用者明確要求「字不要太小」。這一段是整站字級的總開關,
     要調整就改這裡,不要去動上面各元件的定義。
   ============================================================ */
@media(min-width:1061px){
  body{font-size:18px}
  .lead{font-size:clamp(18px,1.5vw,21px)}
  .sm{font-size:16.5px}
  .mono{font-size:13px}
  .nav-menu a{font-size:16.5px}
  .panel p{font-size:17px}
  .stage h4{font-size:20px}
  .stage p{font-size:16.5px}
  .stage .lv,.stage .hrs{font-size:13.5px}
  .specs{font-size:17px}
  .specs th{font-size:13px}
  .blist li{font-size:17px}
  .note{font-size:17px}
  .btn{font-size:17px}
  .btn-sm{font-size:15.5px}
  .prod h3{font-size:23px}
  .prod p{font-size:16.5px}
  .prod .sub,.prod .inc{font-size:15px}
  .faq summary{font-size:18.5px}
  .faq .a{font-size:17px}
  .nextnav h4{font-size:20px}
  .nextnav p{font-size:16.5px}
  .sister .t{font-size:17px}
  .cta p{font-size:18px}
  .stats .l{font-size:13px}
  .f-brand p,footer li,footer a{font-size:16.5px}
  .f-end,footer h5{font-size:13px}
  .shot figcaption,.gal figcaption{font-size:13px}
  .tag{font-size:13px}
}

/* ============================================================
   導覽列的「遠航品牌」下拉
   ============================================================
   三個品牌(智控/智能/飛行)收在一個群組裡,說明同屬一間公司。
   桌機 hover 下拉;手機選單裡直接攤開,不用再點一次。
   ============================================================ */
.nav-brands{position:relative}
.nav-brands>.t{appearance:none;background:none;border:0;font-family:inherit;display:inline-flex;align-items:center;gap:7px;padding:9px 14px;font-size:16px;
  color:#C6D8E4;border-radius:var(--r-sm);cursor:default;transition:.2s var(--ease)}
.nav-brands>.t::after{content:"";width:6px;height:6px;flex:0 0 auto;
  border-right:2px solid var(--cyan-2);border-bottom:2px solid var(--cyan-2);
  transform:rotate(45deg) translate(-1px,-2px);transition:.25s var(--ease)}
.nav-brands:hover>.t,.nav-brands:focus-within>.t,.nav-brands.open>.t{color:var(--cyan);background:rgba(145,231,241,.08)}
.nav-brands:hover>.t::after,.nav-brands:focus-within>.t::after,.nav-brands.open>.t::after{
  border-color:var(--cyan);transform:rotate(225deg) translate(-2px,-1px)}
.nav-brands .bmenu{position:absolute;top:calc(100% + 8px);right:0;min-width:292px;z-index:20;
  background:rgba(13,31,46,.97);backdrop-filter:blur(14px);
  border:1px solid var(--line-2);border-radius:var(--r);padding:7px;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .26s var(--ease),transform .26s var(--ease),visibility .26s;
  box-shadow:0 26px 58px -26px rgba(0,0,0,.85)}
.nav-brands:hover .bmenu,.nav-brands.open .bmenu{opacity:1;visibility:visible;transform:none}
.nav-brands .bl{display:block;padding:9px 14px 5px;font-family:var(--font-mono);font-size:12px;
  letter-spacing:.14em;color:var(--muted)}
.nav-brands .bmenu a{display:block;padding:11px 14px;border-radius:var(--r-sm);font-size:16px;
  font-weight:700;color:var(--txt);transition:.2s var(--ease)}
.nav-brands .bmenu a span{display:block;font-size:13.5px;font-weight:400;color:var(--muted);margin-top:3px}
.nav-brands .bmenu a:hover{background:rgba(145,231,241,.1);color:var(--cyan)}

/* 手機選單:直接攤開成分組 */
@media(max-width:1060px){
  .nav-brands{border-bottom:1px solid var(--line);padding-bottom:12px}
  .nav-brands>.t{display:block;width:100%;text-align:left;padding:19px 4px 6px;font-size:20px;color:var(--txt);background:none}
  .nav-brands>.t::after{display:none}
  .nav-brands .bmenu{position:static;opacity:1;visibility:visible;transform:none;min-width:0;
    background:transparent;backdrop-filter:none;border:0;box-shadow:none;padding:0 0 0 14px}
  .nav-brands .bl{padding:4px 0 8px}
  .nav-brands .bmenu a{padding:12px 0;font-size:17px}
  .nav-brands .bmenu a:hover{background:transparent}
}