/* ==================== CSS Variables ==================== */
:root {
  --navy:#1B2B57;--navy-dark:#0F1A3A;--navy-mid:#233566;--navy-light:#2C3F6B;
  --gold:#BEA672;--gold-light:#D4C08A;--gold-bright:#E8D5A3;
  --gradient-gold:linear-gradient(135deg,#BEA672,#D4C08A);
  --gradient-hero:linear-gradient(135deg,#0F1A3A 0%,#1B2B57 40%,#233566 100%);
  --gradient-card-edge:linear-gradient(180deg,#BEA672,#D4C08A);
  --text-white:#FFFFFF;--text-muted:rgba(255,255,255,0.85);
  --text-body:#1E293B;--text-secondary:#475569;--text-light:#64748B;
  --bg-page:#F8F9FC;--bg-card:#FFFFFF;--bg-dark:#1B2B57;
  --border-light:#E2E8F0;
  --shadow-card:rgba(50,50,93,0.06) 0px 4px 12px -2px,rgba(0,0,0,0.04) 0px 2px 4px;
  --shadow-card-hover:rgba(50,50,93,0.10) 0px 20px 40px -8px,rgba(0,0,0,0.06) 0px 8px 16px -8px;
  --shadow-drawer:-8px 0 30px rgba(0,0,0,0.12);
  --radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-xl:24px;--radius-full:999px;
  --ease-spring:cubic-bezier(0.16,1,0.3,1);--ease-smooth:cubic-bezier(0.4,0,0.2,1);
  --content-max:1200px;--nav-h:110px;
  font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif;
}
/* ==================== Reset ==================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-tap-highlight-color:transparent}
body{background:var(--bg-page);color:var(--text-body);line-height:1.6;overflow-x:hidden;font-size:15px}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
button{cursor:pointer;font-family:inherit}
input,textarea{font-family:inherit}
ul{list-style:none}
/* ==================== Navigation ==================== */
#navbar{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);transition:all .35s var(--ease-smooth)}
#navbar::after{content:"";position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 5%,rgba(190,166,114,0.25) 30%,rgba(190,166,114,0.35) 50%,rgba(190,166,114,0.25) 70%,transparent 95%);opacity:1;transition:opacity .35s var(--ease-smooth)}
#navbar.scrolled{background:rgba(255,255,255,0.97);backdrop-filter:blur(12px) saturate(1.4);-webkit-backdrop-filter:blur(12px) saturate(1.4);border-bottom:1px solid rgba(190,166,114,0.18);box-shadow:0 4px 20px rgba(15,26,58,0.08)}
#navbar.scrolled::after{opacity:0}
.nav-inner{max-width:var(--content-max);margin:0 auto;display:flex;align-items:center;justify-content:center;height:100%;padding:0 32px;position:relative}
/* 品牌Logo区：放大logo+加金色分隔线+加粗品牌名 */
.nav-logo{position:absolute;left:32px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:12px;transition:all .3s var(--ease-smooth)}
.nav-logo-img{width:42px;height:42px;border-radius:10px;flex-shrink:0;object-fit:cover;box-shadow:0 4px 12px rgba(190,166,114,0.35),0 2px 4px rgba(0,0,0,0.1);transition:all .3s var(--ease-smooth);border:1px solid rgba(232,213,163,0.3)}
.nav-logo:hover .nav-logo-img{transform:scale(1.06) rotate(-3deg);box-shadow:0 6px 18px rgba(190,166,114,0.5),0 3px 6px rgba(0,0,0,0.15)}
.nav-logo-text{display:flex;flex-direction:column;gap:1px;line-height:1.1}
.nav-logo-brand{font-size:21px;font-weight:800;letter-spacing:-0.3px;color:var(--text-white);transition:color .3s}
.nav-logo-tag{font-size:10px;font-weight:500;letter-spacing:2px;color:var(--gold-light);text-transform:uppercase;opacity:0.85}
#navbar.scrolled .nav-logo-brand{color:var(--navy)}
#navbar.scrolled .nav-logo-tag{color:var(--gold)}
/* 导航链接区：精炼学院派 — 大尺寸金色细线 SVG 图标在上、文字在下 */
.nav-links{display:flex;align-items:center;gap:8px;justify-content:center}
.nav-link{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 18px 12px;font-size:13px;font-weight:500;letter-spacing:.5px;color:var(--text-muted);border-radius:var(--radius-sm);transition:all .25s var(--ease-smooth);position:relative;white-space:nowrap}
.nav-link::after{content:"";position:absolute;bottom:4px;left:50%;width:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold-light),transparent);border-radius:2px;transition:width .3s var(--ease-smooth);transform:translateX(-50%)}
.nav-link .nav-svg-icon{width:32px;height:32px;color:currentColor;flex-shrink:0;transition:transform .3s var(--ease-smooth);stroke-width:1.3}
.nav-link .nav-text{line-height:1;font-size:13px}
.nav-link:hover{color:var(--gold-light)}
.nav-link:hover::after{width:70%}
.nav-link:hover .nav-svg-icon{transform:translateY(-1px) scale(1.08)}
#navbar.scrolled .nav-link{color:var(--text-secondary)}
#navbar.scrolled .nav-link:hover{color:var(--gold)}
.nav-link.active{color:var(--gold-light)}
.nav-link.active::after{width:70%}
#navbar.scrolled .nav-link.active{color:var(--gold)}
/* 幽灵登录按钮（边框样式，水平紧凑） */
.nav-link-ghost{flex-direction:row;gap:7px;padding:8px 14px;border:1px solid rgba(232,213,163,0.35);background:rgba(255,255,255,0.04)}
.nav-link-ghost .nav-svg-icon{width:18px;height:18px}
.nav-link-ghost .nav-text{font-size:13px}
.nav-link-ghost:hover{border-color:var(--gold-light);background:rgba(190,166,114,0.08)}
#navbar.scrolled .nav-link-ghost{border-color:rgba(190,166,114,0.3)}
#navbar.scrolled .nav-link-ghost:hover{border-color:var(--gold);background:rgba(190,166,114,0.06)}
.nav-hamburger{display:none;background:none;border:none;color:var(--text-white);padding:6px;transition:color .3s;position:absolute;right:32px;top:50%;transform:translateY(-50%);width:32px;height:32px}
.nav-hamburger svg{width:100%;height:100%;display:block}
#navbar.scrolled .nav-hamburger{color:var(--text-body)}
/* ==================== Nav Auth (Right Side) ==================== */
.nav-auth{position:absolute;right:76px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:8px;z-index:1}
/* ==================== User Menu (Desktop, Logged In) ==================== */
.nav-user-menu{position:relative;display:inline-flex;align-items:center}
.nav-user-avatar{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;cursor:pointer;user-select:none;flex-shrink:0;letter-spacing:0;transition:all .25s var(--ease-smooth);background:rgba(255,255,255,0.12);color:var(--gold-light);border:2px solid rgba(232,213,163,0.35)}
.nav-user-avatar:hover{background:rgba(255,255,255,0.22);border-color:var(--gold-light);box-shadow:0 0 16px rgba(190,166,114,0.25)}
.nav-user-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
#navbar.scrolled .nav-user-avatar{background:rgba(190,166,114,0.12);color:var(--navy);border-color:rgba(190,166,114,0.3)}
#navbar.scrolled .nav-user-avatar:hover{background:rgba(190,166,114,0.22);border-color:var(--gold);box-shadow:0 0 12px rgba(190,166,114,0.2)}
.nav-user-dropdown{position:absolute;top:calc(100% + 10px);right:0;min-width:170px;background:var(--bg-card);border-radius:var(--radius-md);box-shadow:0 10px 30px rgba(0,0,0,0.12),0 2px 8px rgba(0,0,0,0.06);border:1px solid rgba(190,166,114,0.18);overflow:hidden;opacity:0;pointer-events:none;transform:translateY(-4px);transition:all .2s var(--ease-smooth);z-index:300}
.nav-user-dropdown.open{opacity:1;pointer-events:auto;transform:translateY(0)}
.nav-user-dropdown-item{display:flex;align-items:center;gap:10px;padding:11px 18px;font-size:14px;font-weight:500;color:var(--text-body);text-decoration:none;transition:all .15s;border-bottom:1px solid var(--border-light)}
.nav-user-dropdown-item:last-child{border-bottom:none}
.nav-user-dropdown-item .dropdown-svg{width:18px;height:18px;color:var(--gold);flex-shrink:0;transition:transform .2s}
.nav-user-dropdown-item:hover{background:rgba(190,166,114,0.07);color:var(--gold)}
.nav-user-dropdown-item:hover .dropdown-svg{transform:scale(1.1)}
.nav-user-dropdown-item:last-child{color:#DC2626}
.nav-user-dropdown-item:last-child .dropdown-svg{color:#DC2626}
.nav-user-dropdown-item:last-child:hover{background:rgba(220,38,38,0.06);color:#DC2626}
/* Mobile Nav Drawer */
.nav-overlay{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,0.4);opacity:0;pointer-events:none;transition:opacity .25s}
.nav-overlay.open{opacity:1;pointer-events:auto}
.nav-drawer{position:fixed;top:0;right:0;bottom:0;width:300px;z-index:201;background:var(--bg-card);padding:24px 22px;transform:translateX(100%);transition:transform .3s var(--ease-smooth);box-shadow:var(--shadow-drawer);overflow-y:auto}
.nav-drawer.open{transform:translateX(0)}
.nav-drawer-close{background:none;border:none;color:var(--text-light);float:right;padding:4px;width:32px;height:32px;cursor:pointer;transition:color .2s}
.nav-drawer-close svg{width:100%;height:100%;display:block}
.nav-drawer-close:hover{color:var(--gold)}
.nav-drawer-link{display:flex;align-items:center;gap:14px;padding:14px 4px;font-size:16px;font-weight:500;color:var(--text-body);border-bottom:1px solid var(--border-light);transition:all .2s}
.nav-drawer-link:last-child{border-bottom:none}
.nav-drawer-link .drawer-svg{width:24px;height:24px;color:var(--gold);flex-shrink:0;transition:transform .2s}
.nav-drawer-link:hover{color:var(--gold);padding-left:8px}
.nav-drawer-link:hover .drawer-svg{transform:scale(1.1)}
.nav-drawer-section{margin-top:16px;padding-top:16px;border-top:1px solid var(--border-light)}
/* 抽屉底部：登录入口二维码 */
.nav-drawer-qr{ padding-bottom:20px; }
.nav-drawer-qr-title{ font-size:12px; font-weight:600; color:var(--text-light); margin-bottom:10px; letter-spacing:.02em; }
.nav-drawer-qr-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.nav-drawer-qr-card{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px 6px; background:var(--bg-card); border:1px solid var(--border-light); border-radius:var(--radius-md); text-decoration:none; transition:border-color .2s, transform .2s; }
.nav-drawer-qr-card:hover{ border-color:var(--gold); transform:translateY(-1px); }
.nav-drawer-qr-card img{ width:80px; height:80px; display:block; background:#fff; border-radius:6px; }
.nav-drawer-qr-name{ font-size:13px; font-weight:600; color:var(--text-body); }
.nav-drawer-qr-tip{ font-size:11px; color:var(--text-light); }
.nav-drawer-qr-loading{ grid-column:1 / -1; text-align:center; color:var(--text-light); font-size:12px; padding:14px 0; }

/* ==================== Hero ==================== */
#hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--gradient-hero);padding:80px 24px 60px;box-shadow:inset 0 12px 24px -12px rgba(0,0,0,0.3)}
.hero-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
/* 立体泡泡：多层渐变营造玻璃质感+高光+边缘反光+内阴影 */
.particle{position:absolute;border-radius:50%;
  background:
    radial-gradient(circle at 32% 28%,rgba(255,255,255,0.95) 0%,rgba(255,255,255,0.6) 8%,rgba(255,255,255,0) 22%),
    radial-gradient(circle at 65% 72%,rgba(190,166,114,0.35) 0%,rgba(190,166,114,0) 50%),
    radial-gradient(circle at 50% 50%,rgba(160,195,235,0.18) 0%,rgba(120,160,210,0.1) 60%,rgba(80,120,180,0.05) 100%);
  box-shadow:
    inset 0 0 12px rgba(255,255,255,0.25),
    inset -4px -6px 10px rgba(40,70,120,0.2),
    inset 4px 4px 8px rgba(255,255,255,0.15),
    0 0 8px rgba(190,166,114,0.3),
    0 2px 6px rgba(0,0,0,0.15);
  border:1px solid rgba(255,255,255,0.25);
  animation:floatUp linear infinite}
.p1{width:80px;height:80px;left:10%;bottom:-80px;animation-duration:14s}
.p2{width:50px;height:50px;left:25%;bottom:-50px;animation-duration:20s;animation-delay:-3s}
.p3{width:120px;height:120px;left:50%;bottom:-120px;animation-duration:16s;animation-delay:-7s}
.p4{width:40px;height:40px;left:70%;bottom:-40px;animation-duration:22s;animation-delay:-5s}
.p5{width:90px;height:90px;left:85%;bottom:-90px;animation-duration:18s;animation-delay:-10s}
.p6{width:30px;height:30px;left:40%;bottom:-30px;animation-duration:24s;animation-delay:-2s}
.p7{width:60px;height:60px;left:5%;bottom:-60px;animation-duration:19s;animation-delay:-6s}
.p8{width:100px;height:100px;left:60%;bottom:-100px;animation-duration:17s;animation-delay:-9s}
.p9{width:45px;height:45px;left:92%;bottom:-45px;animation-duration:23s;animation-delay:-4s}
.p10{width:70px;height:70px;left:35%;bottom:-70px;animation-duration:21s;animation-delay:-11s}
.p11{width:35px;height:35px;left:78%;bottom:-35px;animation-duration:25s;animation-delay:-8s}
.p12{width:110px;height:110px;left:18%;bottom:-110px;animation-duration:15s;animation-delay:-13s}
@keyframes floatUp{
  from{transform:translateY(0) rotate(0deg) scale(0.5);opacity:0}
  12%{opacity:0.95}
  50%{transform:translateY(-55vh) rotate(360deg) scale(1.05);opacity:0.85}
  85%{opacity:0.5}
  to{transform:translateY(-115vh) rotate(720deg) scale(0.9);opacity:0}
}

/* ==================== 古典帆船舰队背景 ==================== */
.hero-ship-scene{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
/* 星星 */
.ship-stars{position:absolute;inset:0}
.star{position:absolute;width:2px;height:2px;background:#fff;border-radius:50%;box-shadow:0 0 4px rgba(255,255,255,0.8);animation:twinkle 3s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:0.3;transform:scale(0.8)}50%{opacity:1;transform:scale(1.2)}}
/* 月亮 */
.ship-moon{position:absolute;top:10%;right:14%;width:80px;height:80px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#F5E6C8,#D4C08A 60%,#BEA672);box-shadow:0 0 50px rgba(212,192,138,0.45),0 0 100px rgba(212,192,138,0.25);opacity:0.75}

/* ===== 船只容器：每艘船的位置+缓动动画 ===== */
.ship-wrapper{position:absolute;transform-origin:50% 90%}
/* 旗舰：最大，居中偏右，最慢，近景 */
.ship-flagship{bottom:20%;width:380px;height:280px;animation:shipSailA 60s linear infinite,shipBob 6s ease-in-out infinite,shipRock 7s ease-in-out infinite}
@keyframes shipSailA{0%{left:115%}100%{left:-30%}}
/* 中型船：中速，中景 */
.ship-mid{bottom:17%;width:260px;height:190px;opacity:0.85;animation:shipSailB 75s linear infinite,shipBob 5s ease-in-out infinite,shipRock 6s ease-in-out infinite;animation-delay:-20s,-1s,-2s}
@keyframes shipSailB{0%{left:-25%}100%{left:115%}}
/* 小型船A：右侧远景，较快 */
.ship-small-a{bottom:14%;width:180px;height:130px;opacity:0.6;animation:shipSailA 90s linear infinite,shipBob 4s ease-in-out infinite,shipRock 5s ease-in-out infinite;animation-delay:-40s,-0.5s,-1s}
/* 小型船B：左侧远景，最快 */
.ship-small-b{bottom:13%;width:160px;height:115px;opacity:0.5;animation:shipSailB 100s linear infinite,shipBob 4.5s ease-in-out infinite,shipRock 5.5s ease-in-out infinite;animation-delay:-60s,-1.5s,-3s}
/* 起伏+摇晃 */
@keyframes shipBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes shipRock{0%,100%{rotate:-1.8deg}50%{rotate:1.8deg}}

/* ===== 古典帆船主体（通用结构，按容器尺寸自适应） ===== */
.classic-ship{position:relative;width:100%;height:100%}
/* 船首斜桅（bowed bowsprit） */
.cs-bowsprit{position:absolute;bottom:24%;left:-8%;width:18%;height:4px;background:linear-gradient(90deg,#0A1A40,#1B2654);transform:rotate(-8deg);border-radius:2px;box-shadow:0 1px 3px rgba(0,0,0,0.4)}
/* 船体：深海军蓝剪影风格（参考logo #102060） */
.cs-hull{position:absolute;bottom:0;left:8%;right:8%;height:28%;
  background:linear-gradient(180deg,#1B2654 0%,#102060 30%,#0A1A40 70%,#001040 100%);
  border-radius:0 0 45% 55%/0 0 90% 100%;
  box-shadow:inset 0 -10px 18px rgba(0,0,0,0.5),inset 0 6px 10px rgba(80,120,200,0.15),0 6px 24px rgba(0,0,0,0.5)}
/* 船体装饰条纹（金色点缀，参考logo底部#928d77） */
.cs-hull-stripe{position:absolute;left:0;right:0;height:3px}
.cs-stripe-1{top:30%;background:linear-gradient(90deg,transparent,rgba(200,180,100,0.5) 15%,rgba(200,180,100,0.5) 85%,transparent)}
.cs-stripe-2{top:55%;background:linear-gradient(90deg,transparent,rgba(160,140,80,0.4) 15%,rgba(160,140,80,0.4) 85%,transparent);height:2px}
/* 炮口（深色圆点排） */
.cs-gunport-row{position:absolute;top:62%;left:15%;right:15%;display:flex;justify-content:space-around}
.cs-gunport-row span{width:7px;height:7px;border-radius:50%;background:radial-gradient(circle,#000,#0A1A40);box-shadow:inset 0 1px 2px rgba(0,0,0,0.9),0 0 3px rgba(80,120,200,0.2)}
/* 舷窗（蓝白小圆点） */
.cs-porthole{position:absolute;top:18%;left:50%;width:6px;height:6px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,#E0F0F0,#A0B0D0);box-shadow:0 0 4px rgba(160,180,220,0.5)}
/* 下层甲板 */
.cs-deck{position:absolute;left:6%;right:6%;background:linear-gradient(180deg,#2A3870,#1B2654);border-radius:3px;box-shadow:0 2px 6px rgba(0,0,0,0.4),inset 0 1px 2px rgba(120,150,210,0.2)}
.cs-deck-low{bottom:27%;height:5px}
.cs-deck-high{bottom:30%;height:4px;left:18%;right:18%;background:linear-gradient(180deg,#1B2654,#0A1A40)}
/* 船尾楼（aftercastle） */
.cs-castle-aft{position:absolute;bottom:31%;right:6%;width:22%;height:10%;background:linear-gradient(180deg,#1B2654,#0A1A40);border-radius:3px 6px 2px 2px;box-shadow:inset 0 2px 4px rgba(120,150,210,0.15),0 2px 4px rgba(0,0,0,0.4)}
/* 桅杆 */
.cs-mast{position:absolute;bottom:30%;width:3px;background:linear-gradient(180deg,#0A1A40,#001040);border-radius:2px;box-shadow:0 0 4px rgba(0,0,0,0.5),1px 0 2px rgba(120,150,210,0.15)}
.ship-flagship .cs-mast-1{left:30%;height:62%}
.ship-flagship .cs-mast-2{left:50%;height:75%}
.ship-flagship .cs-mast-3{left:70%;height:55%}
.ship-mid .cs-mast-1{left:32%;height:60%}
.ship-mid .cs-mast-2{left:55%;height:72%}
.ship-small-a .cs-mast-1{left:35%;height:58%}
.ship-small-a .cs-mast-2{left:58%;height:70%}
.ship-small-b .cs-mast-1{left:35%;height:58%}
.ship-small-b .cs-mast-2{left:58%;height:70%}
/* 横桁（帆下方的横杆） */
.cs-yard{position:absolute;width:22%;height:2px;background:linear-gradient(90deg,transparent,#0A1A40 10%,#0A1A40 90%,transparent);border-radius:1px;transform:translateX(-50%)}
.ship-flagship .cs-yard-1{bottom:55%;left:30%}
.ship-flagship .cs-yard-2{bottom:68%;left:50%;width:26%}
.ship-flagship .cs-yard-3{bottom:50%;left:70%}
.ship-mid .cs-yard-1{bottom:53%;left:32%}
.ship-mid .cs-yard-2{bottom:64%;left:55%;width:24%}
.ship-small-a .cs-yard-1{bottom:52%;left:35%}
.ship-small-b .cs-yard-1{bottom:52%;left:35%}
/* 缆绳（rigging，斜线） */
.cs-rigging{position:absolute;bottom:30%;width:1px;background:linear-gradient(180deg,rgba(120,150,210,0.5),rgba(120,150,210,0.2));transform-origin:bottom center}
.ship-flagship .cs-rig-1{left:30%;height:55%;transform:rotate(15deg)}
.ship-flagship .cs-rig-2{left:50%;height:68%;transform:rotate(-12deg)}
.ship-flagship .cs-rig-3{left:70%;height:48%;transform:rotate(18deg)}
.ship-mid .cs-rig-1{left:32%;height:53%;transform:rotate(15deg)}
.ship-mid .cs-rig-2{left:55%;height:64%;transform:rotate(-12deg)}
.ship-small-a .cs-rig-1{left:35%;height:50%;transform:rotate(15deg)}
.ship-small-b .cs-rig-1{left:35%;height:50%;transform:rotate(15deg)}

/* 帆布：白色剪影风格（与深蓝船体对比，呼应logo蓝白配色） */
.cs-sail{position:absolute;background:linear-gradient(180deg,rgba(248,250,254,0.92),rgba(210,225,245,0.82));border:1px solid rgba(27,38,84,0.4);box-shadow:inset -10px 0 14px rgba(27,38,84,0.12),inset 10px 0 14px rgba(27,38,84,0.08),0 3px 10px rgba(0,0,0,0.15);transform:translateX(-50%)}
.ship-flagship .cs-sail-1{bottom:34%;left:30%;width:18%;height:24%;clip-path:polygon(12% 0,88% 0,100% 100%,0 100%);border-radius:4px 4px 2px 2px}
.ship-flagship .cs-sail-2{bottom:34%;left:50%;width:22%;height:30%;clip-path:polygon(10% 0,90% 0,100% 100%,0 100%);border-radius:4px 4px 2px 2px}
.ship-flagship .cs-sail-3{bottom:34%;left:70%;width:16%;height:20%;clip-path:polygon(12% 0,88% 0,100% 100%,0 100%);border-radius:4px 4px 2px 2px}
.ship-flagship .cs-sail-4{bottom:60%;left:50%;width:18%;height:14%;clip-path:polygon(0 0,100% 0,92% 100%,8% 100%);border-radius:4px 4px 0 0}
.ship-flagship .cs-sail-5{bottom:72%;left:50%;width:14%;height:8%;clip-path:polygon(0 0,100% 0,90% 100%,10% 100%);border-radius:4px 4px 0 0}
.ship-mid .cs-sail-1{bottom:34%;left:32%;width:18%;height:22%;clip-path:polygon(12% 0,88% 0,100% 100%,0 100%);border-radius:4px 4px 2px 2px}
.ship-mid .cs-sail-2{bottom:34%;left:55%;width:20%;height:28%;clip-path:polygon(10% 0,90% 0,100% 100%,0 100%);border-radius:4px 4px 2px 2px}
.ship-mid .cs-sail-3{bottom:58%;left:55%;width:16%;height:12%;clip-path:polygon(0 0,100% 0,92% 100%,8% 100%);border-radius:4px 4px 0 0}
.ship-mid .cs-sail-4{bottom:70%;left:55%;width:12%;height:7%;clip-path:polygon(0 0,100% 0,90% 100%,10% 100%);border-radius:4px 4px 0 0}
.ship-small-a .cs-sail-1{bottom:34%;left:35%;width:18%;height:22%;clip-path:polygon(12% 0,88% 0,100% 100%,0 100%);border-radius:4px 4px 2px 2px}
.ship-small-a .cs-sail-2{bottom:34%;left:58%;width:20%;height:26%;clip-path:polygon(10% 0,90% 0,100% 100%,0 100%);border-radius:4px 4px 2px 2px}
.ship-small-a .cs-sail-3{bottom:60%;left:58%;width:14%;height:12%;clip-path:polygon(0 0,100% 0,92% 100%,8% 100%);border-radius:4px 4px 0 0}
.ship-small-b .cs-sail-1{bottom:34%;left:35%;width:18%;height:22%;clip-path:polygon(12% 0,88% 0,100% 100%,0 100%);border-radius:4px 4px 2px 2px}
.ship-small-b .cs-sail-2{bottom:34%;left:58%;width:20%;height:26%;clip-path:polygon(10% 0,90% 0,100% 100%,0 100%);border-radius:4px 4px 2px 2px}
.ship-small-b .cs-sail-3{bottom:60%;left:58%;width:14%;height:12%;clip-path:polygon(0 0,100% 0,92% 100%,8% 100%);border-radius:4px 4px 0 0}

/* 主旗帜（桅顶大旗，深蓝+金色点缀） */
.cs-flag-main{position:absolute;width:16px;height:11px;background:linear-gradient(180deg,#1B2654,#0A1A40);clip-path:polygon(0 0,100% 0,75% 50%,100% 100%,0 100%);animation:flagWave 2.5s ease-in-out infinite;transform-origin:left center;box-shadow:0 1px 3px rgba(0,0,0,0.3);border:1px solid rgba(200,180,100,0.4)}
.ship-flagship .cs-flag-main{bottom:96%;left:50%;transform:translateX(-2px)}
.ship-mid .cs-flag-main{bottom:94%;left:55%}
.ship-small-a .cs-flag-main{bottom:92%;left:58%}
.ship-small-b .cs-flag-main{bottom:92%;left:58%}
/* 三角燕尾长旗（pennant，金色） */
.cs-pennant{position:absolute;width:28px;height:5px;background:linear-gradient(90deg,rgba(200,180,100,0.8),transparent);clip-path:polygon(0 0,100% 50%,0 100%);animation:flagWave 3s ease-in-out infinite;transform-origin:left center;opacity:0.7}
.ship-flagship .cs-pennant{bottom:98%;left:50%}
.ship-mid .cs-pennant{bottom:96%;left:55%}
.ship-small-a .cs-pennant{bottom:94%;left:58%}
.ship-small-b .cs-pennant{bottom:94%;left:58%}
@keyframes flagWave{0%,100%{skewX(0deg)}50%{skewX(-10deg)}}

/* 海面 */
.ship-sea{position:absolute;bottom:0;left:0;right:0;height:18%;background:linear-gradient(180deg,rgba(15,26,58,0) 0%,rgba(27,43,87,0.4) 30%,rgba(15,26,58,0.7) 100%);overflow:hidden}
.sea-wave{position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(190,166,114,0.4),transparent);animation:waveMove 8s linear infinite}
.sea-wave-1{bottom:70%;animation-duration:7s}
.sea-wave-2{bottom:50%;animation-duration:9s;animation-delay:-2s;opacity:0.6}
.sea-wave-3{bottom:30%;animation-duration:11s;animation-delay:-4s;opacity:0.4}
.sea-wave-4{bottom:15%;animation-duration:13s;animation-delay:-6s;opacity:0.3}
@keyframes waveMove{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

/* 响应式：小屏缩小所有船只 */
@media (max-width:768px){
  .ship-flagship{width:240px;height:175px;bottom:22%}
  .ship-mid{width:165px;height:120px;bottom:19%}
  .ship-small-a{width:115px;height:85px;bottom:16%}
  .ship-small-b{width:100px;height:72px;bottom:15%}
  .ship-moon{width:54px;height:54px;top:9%;right:10%}
}
.hero-content{position:relative;z-index:1;text-align:center;max-width:680px}
.hero-logo{font-size:56px;margin-bottom:16px;display:inline-block;animation:logoFloat 3s ease-in-out infinite}
@keyframes logoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.hero-title{font-size:48px;font-weight:700;color:var(--text-white);line-height:1.2;margin-bottom:12px}
.hero-subtitle{font-size:18px;color:var(--text-muted);margin-bottom:8px;line-height:1.6}
.hero-actions{display:flex;gap:12px;justify-content:center;margin-top:32px;flex-wrap:wrap}
.btn-primary{display:inline-flex;align-items:center;gap:10px;padding:14px 34px;border-radius:var(--radius-full);font-size:16px;font-weight:700;border:none;cursor:pointer;background:linear-gradient(135deg,#D4C08A,#BEA672,#D4C08A);background-size:150% auto;color:var(--navy);transition:all .25s var(--ease-spring);box-shadow:0 6px 24px rgba(190,166,114,0.45),0 2px 8px rgba(0,0,0,0.1)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 10px 32px rgba(190,166,114,0.55),0 4px 12px rgba(0,0,0,0.15)}
.btn-primary:active{transform:translateY(0)}
.btn-secondary{display:inline-flex;align-items:center;gap:10px;padding:14px 34px;border-radius:var(--radius-full);font-size:16px;font-weight:600;border:2px solid rgba(255,255,255,0.5);cursor:pointer;background:rgba(255,255,255,0.07);color:#FFFFFF;letter-spacing:0.3px;transition:all .25s var(--ease-spring)}
.btn-secondary:hover{border-color:var(--gold-bright);color:var(--gold-bright);background:rgba(190,166,114,0.12);box-shadow:0 0 28px rgba(190,166,114,0.2);transform:translateY(-2px)}
.scroll-indicator{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:4px;color:rgba(255,255,255,0.5);font-size:11px;animation:bounceDown 2s ease-in-out infinite}
.scroll-arrow{width:16px;height:16px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg)}
@keyframes bounceDown{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(6px)}}
/* ==================== Section Common ==================== */
section{padding:80px 24px}
/* 锚点跳转时预留固定导航高度，防止标题被遮挡（桌面 110px / 移动 64px） */
section[id]{scroll-margin-top:calc(var(--nav-h) + 24px)}
.section-inner{max-width:var(--content-max);margin:0 auto}
.section-title{font-size:32px;font-weight:700;color:var(--text-body);text-align:center;margin-bottom:8px}
.section-subtitle{font-size:16px;color:var(--text-secondary);text-align:center;margin-bottom:48px;line-height:1.5}
.section-divider{height:1px;background:linear-gradient(90deg,transparent,var(--gold-light),transparent);opacity:0.25;margin:0}
.section-bg-alt{background:var(--bg-page)}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease-spring),transform .6s var(--ease-spring)}
.reveal.visible{opacity:1;transform:translateY(0)}
/* ==================== About ==================== */
#about{background:var(--bg-card)}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:16px}
.about-mission{border-left:3px solid var(--gold);padding-left:20px}
.about-mission blockquote{font-size:22px;font-weight:600;color:var(--navy);line-height:1.4;margin-bottom:16px}
.about-mission p{font-size:15px;color:var(--text-secondary);line-height:1.8}
.about-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.stat-card{text-align:center;padding:24px 12px;border-radius:var(--radius-md);background:var(--bg-page)}
.stat-number{font-size:40px;font-weight:700;color:var(--gold);line-height:1}
.stat-label{font-size:13px;color:var(--text-secondary);margin-top:8px}
.about-values{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:32px}
.value-card{padding:16px 20px;border-radius:var(--radius-md);border:1px solid var(--border-light);display:flex;align-items:flex-start;gap:12px}
.value-icon{font-size:24px;flex-shrink:0;margin-top:2px}
.value-text h4{font-size:15px;font-weight:600;color:var(--text-body);margin-bottom:4px}
.value-text p{font-size:13px;color:var(--text-secondary)}
/* ==================== Products ==================== */
#products{background:var(--bg-page)}
.products-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:900px;margin:0 auto}
.product-card{background:var(--bg-card);border-radius:var(--radius-lg);padding:28px 24px;border:1px solid var(--border-light);box-shadow:var(--shadow-card);transition:all .3s var(--ease-spring);position:relative;overflow:hidden}
.product-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--gradient-gold);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease-smooth)}
.product-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-hover)}
.product-card:hover::before{transform:scaleX(1)}
.product-icon{width:44px;height:44px;margin-bottom:14px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);background:linear-gradient(135deg,rgba(190,166,114,0.12),rgba(190,166,114,0.04));font-size:24px}
.product-card h3{font-size:17px;font-weight:600;color:var(--text-body);margin-bottom:4px}
.product-card .product-tag{font-size:12px;color:var(--text-light);margin-bottom:10px}
.product-card ul{list-style:none;padding:0}
.product-card ul li{position:relative;padding-left:14px;margin-bottom:6px;font-size:13px;color:var(--text-secondary);line-height:1.5}
.product-card ul li::before{content:'·';position:absolute;left:2px;color:var(--gold);font-weight:700}
/* ==================== Advantages ==================== */
#advantages{background:var(--bg-card)}
.adv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.adv-card{text-align:center;padding:32px 16px;border-radius:var(--radius-md);transition:all .3s var(--ease-spring)}
.adv-card:hover{background:var(--bg-page);transform:translateY(-2px)}
.adv-icon{font-size:36px;margin-bottom:12px;display:block}
.adv-card h4{font-size:16px;font-weight:600;color:var(--text-body);margin-bottom:6px}
.adv-card p{font-size:13px;color:var(--text-secondary);line-height:1.5}
/* ==================== Scenarios ==================== */
#scenarios{background:var(--bg-page)}
.scenarios-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.scenario-card{background:var(--bg-card);border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border-light);box-shadow:var(--shadow-card);transition:all .3s var(--ease-spring)}
.scenario-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-card-hover)}
.scenario-head{padding:24px 24px 16px;display:flex;align-items:center;gap:12px}
.scenario-icon{font-size:32px}
.scenario-head h3{font-size:17px;font-weight:600;color:var(--text-body)}
.scenario-body{padding:0 24px 20px}
.scenario-body p{font-size:13px;color:var(--text-secondary);line-height:1.6;margin-bottom:12px}
.scenario-features{display:flex;flex-wrap:wrap;gap:6px}
.scenario-tag{padding:3px 10px;border-radius:var(--radius-full);font-size:11px;font-weight:500;background:linear-gradient(135deg,rgba(190,166,114,0.1),rgba(190,166,114,0.05));color:var(--gold)}
.scenario-more{display:inline-block;margin-top:12px;font-size:13px;color:var(--gold);font-weight:500;cursor:pointer;transition:color .15s}
.scenario-more:hover{color:var(--navy)}
/* Scenario Modal */
.scenario-modal{position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;padding:20px}
.scenario-modal.open{display:flex}
.scenario-modal-overlay{position:absolute;inset:0;background:rgba(0,0,0,0.45);backdrop-filter:blur(4px)}
.scenario-modal-card{position:relative;background:var(--bg-card);border-radius:var(--radius-lg);padding:32px;max-width:480px;width:100%;animation:modalIn .3s var(--ease-spring)}
@keyframes modalIn{from{opacity:0;transform:scale(0.92) translateY(12px)}to{opacity:1;transform:scale(1) translateY(0)}}
.scenario-modal-close{position:absolute;top:12px;right:16px;background:none;border:none;font-size:22px;color:var(--text-light);padding:4px}
.scenario-modal h3{font-size:20px;font-weight:600;color:var(--text-body);margin-bottom:12px}
.scenario-modal p{font-size:14px;color:var(--text-secondary);line-height:1.7;margin-bottom:16px}
.scenario-modal .feature-list{display:flex;flex-wrap:wrap;gap:8px}
.scenario-modal .feature-list span{padding:6px 14px;border-radius:var(--radius-full);background:var(--bg-page);font-size:13px;color:var(--text-body)}
/* ==================== FAQ ==================== */
#faq{background:var(--bg-card)}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;max-width:900px;margin:0 auto}
.faq-item{border:1px solid var(--border-light);border-radius:var(--radius-md);overflow:hidden;transition:all .2s}
.faq-item:hover{border-color:var(--gold-light)}
.faq-question{padding:14px 18px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:500;color:var(--text-body);user-select:none;gap:12px}
.faq-toggle{width:18px;height:18px;flex-shrink:0;transition:transform .3s var(--ease-smooth);color:var(--text-light)}
.faq-item.open .faq-toggle{transform:rotate(180deg);color:var(--gold)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .3s var(--ease-smooth)}
.faq-answer-inner{padding:0 18px 14px;font-size:13px;line-height:1.7;color:var(--text-secondary)}
.faq-item.open .faq-answer{max-height:300px}
/* ==================== Consult Section (dual mode) ==================== */
#consult{background:var(--bg-page);padding-bottom:80px}
.consult-container{max-width:800px;margin:0 auto}
.consult-tabs{display:flex;gap:0;margin-bottom:0;background:var(--bg-card);border-radius:var(--radius-lg) var(--radius-lg) 0 0;overflow:hidden;border:1px solid var(--border-light);border-bottom:none}
.consult-tab{flex:1;padding:14px 16px;font-size:14px;font-weight:500;border:none;background:var(--bg-surface);color:var(--text-secondary);transition:all .2s;position:relative}
.consult-tab.active{background:var(--bg-card);color:var(--navy);font-weight:600}
.consult-tab.active::after{content:'';position:absolute;bottom:0;left:20%;right:20%;height:2px;background:var(--gradient-gold);border-radius:2px}
.consult-tab:hover:not(.active){color:var(--gold);background:rgba(190,166,114,0.04)}
.consult-panel{display:none;background:var(--bg-card);border:1px solid var(--border-light);border-top:none;border-radius:0 0 var(--radius-lg) var(--radius-lg);min-height:400px}
.consult-panel.active{display:flex;flex-direction:column}
/* AI Chat Panel */
.consult-chat{display:flex;flex-direction:column;height:460px}
.chat-messages{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:0;scroll-behavior:smooth}
.chat-welcome{padding:16px;text-align:center;color:var(--text-secondary);font-size:13px;line-height:1.6}
.chat-welcome p{margin-bottom:4px}
.quick-prompts{display:flex;flex-wrap:wrap;gap:6px;padding:8px 16px 4px;border-top:1px solid var(--border-light)}
.quick-btn{padding:5px 12px;border-radius:var(--radius-full);border:1px solid var(--border-light);background:var(--bg-page);font-size:12px;color:var(--text-secondary);cursor:pointer;transition:all .15s}
.quick-btn:hover{border-color:var(--gold);color:var(--gold);background:rgba(190,166,114,0.06)}
.quick-btn:active{transform:scale(0.96)}
.chat-input-bar{display:flex;align-items:center;gap:8px;padding:8px 12px;border-top:1px solid var(--border-light);background:var(--bg-card)}
.chat-input{flex:1;height:40px;border:1px solid var(--border-light);border-radius:var(--radius-full);padding:0 14px;font-size:13px;outline:none;transition:border-color .2s}
.chat-input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(190,166,114,0.12)}
.send-btn{width:38px;height:38px;border-radius:50%;border:none;background:var(--gradient-gold);color:var(--navy);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;flex-shrink:0}
.send-btn:hover{transform:scale(1.05);box-shadow:0 2px 8px rgba(190,166,114,0.3)}
.send-btn:disabled{opacity:0.4;cursor:not-allowed;transform:none;box-shadow:none}
.send-btn.loading{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* Message Bubbles */
.msg-ai{display:flex;gap:8px;margin-bottom:10px;max-width:90%;align-self:flex-start}
.msg-ai-avatar{width:28px;height:28px;border-radius:50%;background:var(--gradient-gold);display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;color:var(--navy)}
.msg-ai-avatar-img{width:28px;height:28px;border-radius:50%;object-fit:cover;flex-shrink:0;border:1px solid rgba(190,166,114,0.3)}
.msg-ai-content{background:#F1F4F9;border-radius:0 10px 10px 10px;padding:8px 12px;font-size:13px;line-height:1.6;color:var(--text-body);white-space:pre-wrap}
.msg-user{display:flex;justify-content:flex-end;margin-bottom:10px}
.msg-user-content{background:var(--navy);color:#fff;border-radius:10px 0 10px 10px;padding:8px 12px;font-size:13px;line-height:1.6;max-width:80%;white-space:pre-wrap}
.typing .msg-ai-content::after{content:'▍';animation:blink 1s step-end infinite;color:var(--gold)}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.msg-error .msg-ai-content{background:#FEF2F2;color:#991B1B}
.retry-btn{display:inline-block;margin-top:6px;padding:4px 10px;font-size:11px;border:1px solid var(--gold);border-radius:var(--radius-full);background:transparent;color:var(--gold);cursor:pointer}
.retry-btn:hover{background:rgba(190,166,114,0.08)}
.transfer-card{padding:10px 14px;background:#F0F7FF;border-radius:10px;font-size:12px;color:var(--text-secondary);line-height:1.5;margin-bottom:10px}
.transfer-card .btn-contact{display:inline-block;margin-top:6px;padding:6px 14px;border-radius:var(--radius-full);border:none;background:var(--gradient-gold);color:var(--navy);font-size:12px;font-weight:600;cursor:pointer}
.transfer-card .or{display:inline-block;margin:0 6px;color:var(--text-light)}
/* Contact Form */
.consult-form{padding:24px}
.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:13px;font-weight:500;color:var(--text-body);margin-bottom:4px}
.form-group label .required{color:#DC2626;margin-left:2px}
.form-group input,.form-group textarea{width:100%;height:40px;border:1px solid var(--border-light);border-radius:var(--radius-md);padding:0 12px;font-size:14px;outline:none;transition:border-color .2s}
.form-group textarea{height:80px;padding:10px 12px;resize:vertical}
.form-group input:focus,.form-group textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(190,166,114,0.12)}
.form-group .field-error{border-color:#DC2626 !important}
.form-error-msg{font-size:12px;color:#DC2626;margin-top:2px;display:none}
.form-group .field-error + .form-error-msg{display:block}
.form-checkbox{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-secondary);margin-bottom:16px}
.form-checkbox input{width:15px;height:15px;accent-color:var(--gold);cursor:pointer}
.form-checkbox a{color:var(--gold);text-decoration:underline}
.submit-btn{width:100%;height:44px;border:none;border-radius:var(--radius-md);background:var(--gradient-gold);color:var(--navy);font-size:15px;font-weight:600;cursor:pointer;transition:all .2s;box-shadow:0 2px 8px rgba(190,166,114,0.25)}
.submit-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(190,166,114,0.35)}
.submit-btn:disabled{opacity:0.5;cursor:not-allowed;transform:none;box-shadow:none}
.form-success{display:none;text-align:center;padding:48px 24px}
.form-success.show{display:block}
.form-success .success-icon{font-size:48px;margin-bottom:12px}
.form-success h3{font-size:20px;font-weight:600;color:var(--text-body);margin-bottom:8px}
.form-success p{font-size:14px;color:var(--text-secondary);margin-bottom:20px}
.form-success .btn-back{padding:10px 24px;border-radius:var(--radius-full);border:none;background:var(--gradient-gold);color:var(--navy);font-size:14px;font-weight:600;cursor:pointer}
/* ==================== Footer ==================== */
footer{background:var(--navy);padding:48px 24px 24px;color:var(--text-muted)}
.footer-inner{max-width:var(--content-max);margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px}
.footer-brand .footer-logo{font-size:20px;font-weight:700;color:var(--text-white);margin-bottom:8px;display:flex;align-items:center;gap:6px}
.footer-logo-img{width:22px;height:22px;border-radius:4px;flex-shrink:0;object-fit:contain}
.footer-brand p{font-size:13px;line-height:1.7;max-width:320px}
.footer-contact h4,.footer-links h4{font-size:14px;font-weight:600;color:var(--gold);margin-bottom:12px}
.footer-contact p,.footer-links p{font-size:13px;margin-bottom:4px;line-height:1.6}
.footer-links a{color:var(--text-muted);text-decoration:none;transition:color .2s}
.footer-links a:hover{color:var(--gold)}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.1);margin-top:32px;padding-top:16px;text-align:center;font-size:12px;color:rgba(255,255,255,0.6)}
/* ==================== Footer QR Codes ==================== */
.footer-qr{max-width:var(--content-max);margin:24px auto 0;padding:0 0 8px;display:flex;align-items:center;gap:24px;justify-content:flex-start}
.footer-qr-item{display:flex;align-items:center;gap:12px}
.footer-qr-img{width:72px;height:72px;border-radius:8px;background:#fff;object-fit:contain;display:block;flex-shrink:0}
.footer-qr-label{font-size:14px;font-weight:600;color:rgba(255,255,255,0.8);line-height:1.4}
.footer-qr-label span{font-size:12px;font-weight:400;color:rgba(255,255,255,0.7);display:block;margin-top:2px}
/* ==================== FAB + Drawer ==================== */
.consult-fab{position:fixed;bottom:24px;right:24px;z-index:99;width:52px;height:52px;border-radius:50%;border:none;background:var(--gradient-gold);color:var(--navy);font-size:22px;cursor:pointer;box-shadow:0 4px 16px rgba(190,166,114,0.4);transition:all .3s var(--ease-spring);display:flex;align-items:center;justify-content:center}
.consult-fab:hover{transform:scale(1.08);box-shadow:0 8px 24px rgba(190,166,114,0.5)}
.consult-fab::before{content:'';position:absolute;inset:-3px;border-radius:50%;border:2px solid rgba(190,166,114,0.25);animation:pulseRing 2s ease-out infinite}
@keyframes pulseRing{0%{transform:scale(1);opacity:1}100%{transform:scale(1.2);opacity:0}}
.consult-overlay{position:fixed;inset:0;z-index:500;background:rgba(0,0,0,0.35);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .25s}
.consult-overlay.open{opacity:1;pointer-events:auto}
.consult-drawer{position:fixed;top:0;right:0;bottom:0;width:380px;z-index:501;background:var(--bg-card);box-shadow:var(--shadow-drawer);transform:translateX(100%);transition:transform .3s var(--ease-smooth);display:flex;flex-direction:column}
.consult-drawer.open{transform:translateX(0)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border-light);flex-shrink:0}
.drawer-head h3{font-size:15px;font-weight:600;color:var(--text-body);display:flex;align-items:center;gap:6px}
.drawer-close{background:none;border:none;font-size:18px;color:var(--text-light);padding:4px}
.drawer-body{flex:1;display:flex;flex-direction:column;overflow:hidden}
.drawer-tabs{display:flex;border-bottom:1px solid var(--border-light);flex-shrink:0}
.drawer-tab{flex:1;padding:10px;font-size:13px;font-weight:500;border:none;background:none;color:var(--text-secondary);transition:all .2s}
.drawer-tab.active{color:var(--navy);font-weight:600;border-bottom:2px solid var(--gold)}
.drawer-panel{display:none;flex:1;flex-direction:column;overflow:hidden}
.drawer-panel.active{display:flex}
.drawer-chat{display:flex;flex-direction:column;height:100%}
.drawer-messages{flex:1;overflow-y:auto;padding:16px;-webkit-overflow-scrolling:touch}
.drawer-form{padding:20px;overflow-y:auto;-webkit-overflow-scrolling:touch}
/* ==================== Responsive ==================== */
@media(max-width:1023px){
  --nav-h:var(--b-nav-h-mobile);
  #navbar{height:64px}
  .nav-inner{justify-content:space-between;padding:0 16px;gap:12px}
  .nav-logo{position:static;transform:none}
  .nav-links .nav-link{display:none}
  .nav-hamburger{position:static;transform:none;display:block}
  .nav-auth{display:none}
  .nav-logo-img{width:36px;height:36px;border-radius:8px}
  .nav-logo-brand{font-size:18px}
  .nav-logo-tag{font-size:9px;letter-spacing:1.5px}
  .hero-title{font-size:36px}
  .hero-subtitle{font-size:16px}
  .about-grid{grid-template-columns:1fr;gap:32px}
  .about-stats{grid-template-columns:repeat(3,1fr)}
  .adv-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .scenarios-grid{grid-template-columns:1fr;max-width:500px;margin:0 auto}
  .faq-grid{grid-template-columns:1fr}
  .consult-drawer{width:100%;border-radius:16px 16px 0 0;top:auto;bottom:0;right:0;left:0;max-height:85vh;transform:translateY(100%)}
  .consult-drawer.open{transform:translateY(0)}
}
/* 中等桌面屏幕：7 个链接紧凑排布 */
@media(min-width:1024px) and (max-width:1279px){
  .nav-link{padding:12px 14px 10px;gap:5px}
  .nav-link .nav-svg-icon{width:28px;height:28px}
  .nav-link .nav-text{font-size:12px}
  .nav-logo-brand{font-size:19px}
  .nav-logo-img{width:38px;height:38px}
}
/* 小屏幕桌面：进一步紧凑 */
@media(min-width:1280px) and (max-width:1439px){
  .nav-link{padding:13px 15px 11px;gap:6px}
  .nav-link .nav-svg-icon{width:30px;height:30px}
  .nav-link .nav-text{font-size:12px}
}
@media(max-width:639px){
  section{padding:48px 16px}
  .hero-title{font-size:28px}
  .hero-subtitle{font-size:14px}
  .hero-logo{font-size:40px}
  .btn-primary,.btn-secondary{padding:12px 24px;font-size:14px}
  .section-title{font-size:26px}
  .section-subtitle{font-size:14px;margin-bottom:32px}
  .about-stats{grid-template-columns:repeat(3,1fr);gap:8px}
  .stat-number{font-size:32px}
  .stat-label{font-size:12px}
  .about-values{grid-template-columns:1fr}
  .products-grid{grid-template-columns:1fr;max-width:400px;margin:0 auto}
  .adv-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .product-card{padding:20px}
  .footer-inner{grid-template-columns:1fr;gap:24px}
  .footer-qr{flex-wrap:wrap;gap:12px;justify-content:center}
  .consult-fab{bottom:16px;right:16px;width:48px;height:48px;font-size:20px}
  .chat-input{font-size:15px}
  .consult-tab{font-size:13px;padding:12px 10px}
}
@media(min-width:1024px){
  .hero-title{font-size:52px}
  .hero-content{max-width:720px}
  .consult-drawer{border-radius:0}
}

/* ========== 可访问性增强：键盘焦点指示 ========== */
/* 为所有可交互元素提供清晰的键盘焦点轮廓 */
:focus-visible {
  outline: 2px solid var(--gold, #BEA672);
  outline-offset: 2px;
  border-radius: 4px;
}
/* 输入框焦点已有自定义样式，保持原有体验 */
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--gold, #BEA672);
  outline-offset: 0;
}
/* 移除鼠标点击时的焦点轮廓（仅键盘聚焦时显示） */
:focus:not(:focus-visible) {
  outline: none;
}

/* ========== 触控目标尺寸修正（WCAG 2.5.5：最小 44×44px） ========== */
@media (max-width: 768px) {
  /* 确保移动端按钮和可交互元素有足够触控面积 */
  .nav-link, .footer-link, .consult-tab {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ========== 动效无障碍：尊重用户的减少动画偏好 ========== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* 英雄区装饰元素保留静态展示（保持可见，仅停止运动） */
  .hero-bg, .hero-ship-scene, .ship-stars, .ship-moon,
  .ship-wrapper, .ship-fleet, .particle, .classic-ship,
  .cs-hull, .cs-sail, .cs-mast, .cs-flag-main, .cs-pennant,
  .hero-stars, .hero-moon, .bubbles-bg, .sea-wave {
    animation: none !important;
    opacity: 1 !important;
  }
  /* 星星和月亮保持基础可见度 */
  .star { opacity: 0.8 !important; }
  .ship-moon { opacity: 0.95 !important; }
  /* 远景船只保留透视感 */
  .ship-small-a { opacity: 0.6 !important; }
  .ship-small-b { opacity: 0.5 !important; }
}