/* ===================================================================
   搭子电竞 · DELTA FORCE ESPORTS  —  极致美学官网样式
   设计语言：战术暗绿底 + 荧光战术绿 + 战术橙 + 玻璃拟态 + 霓虹光感
   =================================================================== */

/* ---------- 设计令牌 ---------- */
:root{
    /* 色彩 —— 三角洲行动军事暗绿 + 战术橙 */
    --bg:        #070a07;
    --bg-2:      #0b100b;
    --surface:   rgba(255,255,255,.04);
    --surface-2: rgba(255,255,255,.07);
    --border:    rgba(255,255,255,.08);
    --border-2:  rgba(255,255,255,.14);

    --text:      #e8f0e6;
    --text-2:    #94a392;
    --text-3:    #56645a;

    --cyan:      #5eead4;
    --blue:      #4ade80;
    --green:     #84cc16;
    --gold:      #fbbf24;
    --orange:    #f97316;
    --red:       #ef4444;
    --tactical:  #b6f368;   /* 战术荧光绿 */

    --grad:      linear-gradient(120deg,#84cc16 0%,#5eead4 50%,#3b82f6 100%);
    --grad-2:    linear-gradient(120deg,#bef264 0%,#5eead4 100%);

    /* 阴影 */
    --shadow-1: 0 10px 40px -10px rgba(0,0,0,.5);

    /* 字体 */
    --f-display: 'Orbitron', 'Noto Sans SC', sans-serif;
    --f-body: 'Noto Sans SC', system-ui, sans-serif;

    /* 尺寸 */
    --nav-h: 76px;
    --radius: 18px;
    --radius-lg: 28px;

    --maxw: 1240px;
}

/* ---------- 重置 ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
    font-family:var(--f-body);
    background:var(--bg);
    color:var(--text);
    line-height:1.6;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    cursor:none;
}
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
img{ display:block; max-width:100%; }
button{ font-family:inherit; border:0; background:none; color:inherit; cursor:none; }
iconify-icon{ display:inline-block; vertical-align:-0.15em; }

/* 键盘可达性：自定义光标环境下仍保留清晰焦点环 */
:focus{ outline:none; }
:focus-visible{
    outline:2px solid var(--tactical);
    outline-offset:3px;
    box-shadow:0 0 0 4px rgba(182,243,104,.18);
}
.skip-link{
    position:absolute; left:16px; top:12px; z-index:10000;
    padding:10px 16px; border-radius:999px;
    background:var(--tactical); color:#0a1208; font-weight:700; font-size:14px;
    transform:translateY(-140%); transition:transform .2s;
}
.skip-link:focus, .skip-link:focus-visible{ transform:translateY(0); outline-offset:2px; }

.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.section{ padding:120px 0; position:relative; }
.txt-grad{ background:var(--grad-2); -webkit-background-clip:text; background-clip:text; color:transparent; }
.txt-neon{ color:var(--cyan); text-shadow:0 0 12px rgba(132,204,22,.6); }

/* =================================================================
   自定义光标 —— 战术准星式双层光标
   ================================================================= */
.cursor-dot,.cursor-ring{
    position:fixed; top:0; left:0; pointer-events:none; z-index:9999;
    border-radius:50%;
    will-change:transform,width,height;
}
/* 实心跟随点 —— 用 transform 平移，性能更优 */
.cursor-dot{
    width:7px; height:7px; margin:-3.5px 0 0 -3.5px;
    background:var(--tactical);
    box-shadow:0 0 10px var(--tactical),0 0 22px rgba(132,204,22,.45);
    transition:width .2s,height .2s,margin .2s,background .2s,box-shadow .2s,opacity .2s;
}
/* 跟随圆环 —— 缓动拖尾 */
.cursor-ring{
    width:34px; height:34px; margin:-17px 0 0 -17px;
    border:1.5px solid rgba(132,204,22,.6);
    box-shadow:0 0 14px rgba(132,204,22,.25),inset 0 0 8px rgba(132,204,22,.12);
    transition:width .28s cubic-bezier(.2,.8,.2,1),height .28s cubic-bezier(.2,.8,.2,1),
               margin .28s cubic-bezier(.2,.8,.2,1),border-color .25s,background .25s,opacity .2s;
}
/* 悬停可交互元素 —— 圆环放大变橙、中心点收成核心 */
body.hovering .cursor-ring{
    width:56px; height:56px; margin:-28px 0 0 -28px;
    border-color:var(--orange);
    background:radial-gradient(circle,rgba(249,115,22,.14),transparent 70%);
    box-shadow:0 0 22px rgba(249,115,22,.3);
}
body.hovering .cursor-dot{
    width:5px; height:5px; margin:-2.5px 0 0 -2.5px;
    background:var(--orange);
    box-shadow:0 0 12px var(--orange),0 0 26px rgba(249,115,22,.5);
}
/* 按下 —— 整体收紧，给按压反馈 */
body.pressing .cursor-ring{
    width:24px; height:24px; margin:-12px 0 0 -12px;
    border-width:2px; border-color:var(--tactical);
}
body.pressing .cursor-dot{
    width:11px; height:11px; margin:-5.5px 0 0 -5.5px;
    background:#fff; box-shadow:0 0 14px #fff;
}
/* 鼠标离开窗口 / 触屏 —— 隐藏自定义光标 */
body.cursor-hidden .cursor-dot,body.cursor-hidden .cursor-ring{ opacity:0; }
@media (hover:none){
    body{cursor:auto;}
    .cursor-dot,.cursor-ring{display:none;}
    button,a{cursor:pointer;}
}

/* =================================================================
   全局背景层
   ================================================================= */
.bg-stage{ position:fixed; inset:0; z-index:-1; overflow:hidden; background:radial-gradient(ellipse at 50% -10%,#0e1a0e 0%,var(--bg) 55%); }
.bg-grid{
    position:absolute; inset:-2px;
    background-image:
        linear-gradient(rgba(132,204,22,.06) 1px,transparent 1px),
        linear-gradient(90deg,rgba(132,204,22,.06) 1px,transparent 1px);
    background-size:60px 60px;
    mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 0%,transparent 80%);
    -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 0%,transparent 80%);
}
.bg-noise{ position:absolute; inset:0; opacity:.035; pointer-events:none;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.bg-orb{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.5; will-change:transform; }
.bg-orb--1{ width:520px; height:520px; background:radial-gradient(circle,#4d7c0f,transparent 70%); top:-120px; left:-100px; animation:orbFloat1 22s ease-in-out infinite; }
.bg-orb--2{ width:460px; height:460px; background:radial-gradient(circle,#5eead4,transparent 70%); top:30%; right:-120px; animation:orbFloat2 26s ease-in-out infinite; opacity:.32; }
.bg-orb--3{ width:540px; height:540px; background:radial-gradient(circle,#f97316,transparent 70%); bottom:-160px; left:30%; animation:orbFloat3 30s ease-in-out infinite; opacity:.25; }
@keyframes orbFloat1{ 50%{ transform:translate(120px,80px) scale(1.1);} }
@keyframes orbFloat2{ 50%{ transform:translate(-100px,120px) scale(1.15);} }
@keyframes orbFloat3{ 50%{ transform:translate(80px,-90px) scale(1.08);} }

#particles{ position:absolute; inset:0; width:100%; height:100%; }
.bg-scan{ position:absolute; inset:0; pointer-events:none; opacity:.4;
    background:repeating-linear-gradient(to bottom,transparent 0,transparent 3px,rgba(132,204,22,.018) 3px,rgba(132,204,22,.018) 4px);
}

/* =================================================================
   加载层
   ================================================================= */
.loader{ position:fixed; inset:0; z-index:9000; background:var(--bg); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:28px; transition:opacity .6s,visibility .6s; }
.loader.hide{ opacity:0; visibility:hidden; }
.loader__logo{ position:relative; width:120px; height:120px; animation:loaderPulse 1.6s ease-in-out infinite; }
.loader__logo img{ width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 0 24px rgba(132,204,22,.6)); }
.loader__glow{ position:absolute; inset:-20px; border-radius:50%; background:radial-gradient(circle,rgba(132,204,22,.35),transparent 70%); animation:loaderPulse 1.6s ease-in-out infinite; }
@keyframes loaderPulse{ 0%,100%{ transform:scale(1); opacity:1;} 50%{ transform:scale(1.08); opacity:.85;} }
.loader__bar{ width:240px; height:3px; background:rgba(255,255,255,.1); border-radius:3px; overflow:hidden; }
.loader__bar span{ display:block; height:100%; width:0; background:var(--grad); box-shadow:0 0 14px var(--cyan); transition:width .2s; }
.loader__text{ font-family:var(--f-display); font-size:11px; letter-spacing:3px; color:var(--text-2); }

/* =================================================================
   按钮
   ================================================================= */
.btn{
    position:relative; display:inline-flex; align-items:center; gap:8px;
    padding:11px 22px; border-radius:99px; font-weight:600; font-size:14px;
    transition:transform .25s,box-shadow .25s,background .25s,color .25s,border-color .25s;
    white-space:nowrap; overflow:hidden; will-change:transform;
}
.btn iconify-icon{ font-size:18px; }
.btn--lg{ padding:14px 30px; font-size:15px; }
.btn--xl{ padding:17px 38px; font-size:16px; }
.btn--sm{ padding:9px 18px; font-size:13px; }
.btn--primary{
    background:var(--grad); color:#0a1505;
    box-shadow:0 8px 30px -6px rgba(132,204,22,.55), inset 0 1px 0 rgba(255,255,255,.4);
}
.btn--primary::after{
    content:""; position:absolute; inset:0; background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.5),transparent 70%);
    transform:translateX(-120%); transition:transform .6s;
}
.btn--primary:hover{ transform:translateY(-3px); box-shadow:0 14px 40px -8px rgba(132,204,22,.75); }
.btn--primary:hover::after{ transform:translateX(120%); }
.btn--ghost{
    background:var(--surface); color:var(--text); border:1px solid var(--border-2); backdrop-filter:blur(10px);
}
.btn--ghost:hover{ transform:translateY(-3px); border-color:var(--tactical); background:var(--surface-2); box-shadow:0 10px 30px -10px rgba(132,204,22,.4); }

/* =================================================================
   导航
   ================================================================= */
.nav{ position:fixed; top:0; left:0; right:0; height:var(--nav-h); z-index:800; transition:background .35s,border-color .35s,backdrop-filter .35s; border-bottom:1px solid transparent; }
.nav.scrolled{ background:rgba(7,10,7,.72); backdrop-filter:blur(18px) saturate(140%); border-bottom-color:var(--border); }
.nav__inner{ height:100%; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.nav__brand{ display:flex; align-items:center; gap:12px; }
.nav__logo{ width:42px; height:42px; object-fit:contain; filter:drop-shadow(0 0 10px rgba(132,204,22,.5)); transition:transform .4s; }
.nav__brand:hover .nav__logo{ transform:rotate(-8deg) scale(1.06); }
.nav__brandtext{ display:flex; flex-direction:column; line-height:1.2; }
.nav__name{ font-weight:900; font-size:17px; letter-spacing:1px; }
.nav__sub{ margin-top:4px; font-family:var(--f-display); font-size:9px; letter-spacing:2.5px; color:var(--text-3); }

.nav__links{ display:flex; align-items:center; gap:4px; }
.nav__link{ padding:9px 16px; border-radius:99px; font-size:14px; font-weight:500; color:var(--text-2); position:relative; transition:color .25s; }
.nav__link::after{ content:""; position:absolute; left:50%; bottom:4px; width:0; height:2px; background:var(--grad); border-radius:2px; transform:translateX(-50%); transition:width .25s; }
.nav__link:hover,.nav__link.is-active{ color:var(--text); }
.nav__link:hover::after,.nav__link.is-active::after{ width:18px; }

.nav__cta{ display:flex; align-items:center; gap:10px; }
.nav__burger{ display:none; flex-direction:column; gap:5px; padding:8px; }
.nav__burger span{ width:24px; height:2px; background:var(--text); border-radius:2px; transition:transform .3s,opacity .3s; }
.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:1040px){
    .nav__links,.nav__cta .btn--ghost{ display:none; }
    .nav__burger{ display:flex; }
    .nav__links.mobile-open{
        display:flex; flex-direction:column; position:fixed; top:var(--nav-h); left:0; right:0;
        background:rgba(7,10,7,.96); backdrop-filter:blur(20px); padding:20px 24px; gap:6px;
        border-bottom:1px solid var(--border);
    }
    .nav__links.mobile-open .nav__link{ width:100%; padding:14px 16px; }
}

/* =================================================================
   HERO
   ================================================================= */
.hero{ position:relative; min-height:100vh; padding:calc(var(--nav-h) + 40px) 0 0; display:flex; flex-direction:column; overflow:hidden; }
.hero__deco{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); pointer-events:none; }
.hero__ring{ position:absolute; top:50%; left:50%; border:1px solid rgba(132,204,22,.12); border-radius:50%; transform:translate(-50%,-50%); }
.hero__ring--1{ width:700px; height:700px; animation:ringSpin 40s linear infinite; }
.hero__ring--2{ width:1050px; height:1050px; border-color:rgba(94,234,212,.1); animation:ringSpin 60s linear infinite reverse; }
.hero__ring--3{ width:1400px; height:1400px; border-color:rgba(249,115,22,.08); animation:ringSpin 80s linear infinite; }
.hero__ring::before{ content:""; position:absolute; top:-3px; left:50%; width:6px; height:6px; background:var(--tactical); border-radius:50%; box-shadow:0 0 14px var(--tactical); transform:translateX(-50%); }
@keyframes ringSpin{ to{ transform:translate(-50%,-50%) rotate(360deg);} }

.hero__inner{ position:relative; z-index:2; text-align:center; flex:1; display:flex; flex-direction:column; justify-content:center; padding-bottom:40px; }
.hero__badge{
    align-self:center; display:inline-flex; align-items:center; gap:10px; padding:8px 18px;
    background:var(--surface); border:1px solid var(--border-2); border-radius:99px;
    font-size:13px; color:var(--text-2); backdrop-filter:blur(10px); margin-bottom:32px;
}
.pulse-dot{ width:8px; height:8px; background:var(--tactical); border-radius:50%; box-shadow:0 0 10px var(--tactical); animation:pulseDot 1.5s ease-in-out infinite; }
@keyframes pulseDot{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.4; transform:scale(.7);} }

.hero__title{ font-weight:900; font-size:clamp(2.6rem,7vw,5.6rem); line-height:1.08; letter-spacing:-1px; margin-bottom:28px; display:flex; flex-direction:column; gap:6px; }
.hero__line{ display:block; }
.hero__line--grad{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; font-family:var(--f-display); letter-spacing:2px; }
.hero__line--grad em{ font-style:normal; color:var(--cyan); -webkit-text-fill-color:var(--cyan); text-shadow:0 0 28px rgba(132,204,22,.55); padding:0 6px; }
.caret{ color:var(--cyan); -webkit-text-fill-color:var(--cyan); animation:caretBlink 1s steps(2) infinite; }
@keyframes caretBlink{ 50%{ opacity:0; } }
.hero__dash{ color:var(--cyan); -webkit-text-fill-color:var(--cyan); }

.hero__desc{ font-size:clamp(1rem,1.6vw,1.18rem); color:var(--text-2); max-width:680px; margin:0 auto 40px; }
.hero__desc .txt-neon{ font-weight:600; }
.hero__actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-bottom:48px; }

.hero__stats{ display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; row-gap:20px; }
.hstat{ padding:0 24px; }
.hstat__num{ font-family:var(--f-display); font-size:clamp(1.6rem,3vw,2.4rem); font-weight:700; background:var(--grad-2); -webkit-background-clip:text; background-clip:text; color:transparent; line-height:1; }
.hstat__label{ font-size:12px; color:var(--text-3); letter-spacing:1px; margin-top:6px; }
.hstat__sep{ width:1px; height:44px; background:var(--border-2); }

.hero__scroll{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:10px; font-family:var(--f-display); font-size:9px; letter-spacing:3px; color:var(--text-3); padding:24px 0 18px; }
.hero__scrollline{ width:1px; height:50px; background:rgba(255,255,255,.15); overflow:hidden; position:relative; }
.hero__scrollline i{ position:absolute; top:0; left:0; width:100%; height:40%; background:var(--cyan); box-shadow:0 0 8px var(--cyan); animation:scrollLine 1.8s ease-in-out infinite; }
@keyframes scrollLine{ 0%{ transform:translateY(-100%);} 100%{ transform:translateY(250%);} }

/* 跑马灯 */
.marquee{ position:absolute; bottom:0; left:0; right:0; overflow:hidden; padding:18px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:rgba(11,16,11,.5); backdrop-filter:blur(8px); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee__track{ display:flex; gap:48px; width:max-content; animation:marquee 30s linear infinite; }
.marquee__track span{ display:inline-flex; align-items:center; gap:8px; font-family:var(--f-display); font-size:18px; font-weight:600; letter-spacing:2px; color:var(--text-3); white-space:nowrap; }
.marquee__track span iconify-icon{ color:var(--cyan); font-size:20px; }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* =================================================================
   数据统计带
   ================================================================= */
.stats-band{ padding:60px 0; border-bottom:1px solid var(--border); }
.stats-band__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.sb-item{ text-align:center; }
.sb-item iconify-icon{ font-size:30px; color:var(--cyan); margin-bottom:10px; filter:drop-shadow(0 0 8px rgba(132,204,22,.5)); }
.sb-item__num{ font-family:var(--f-display); font-size:2rem; font-weight:700; background:var(--grad-2); -webkit-background-clip:text; background-clip:text; color:transparent; }
.sb-item__label{ font-size:13px; color:var(--text-3); margin-top:4px; }

/* =================================================================
   区块标题
   ================================================================= */
.sec-head{ margin-bottom:60px; max-width:680px; }
.sec-head--center{ margin-left:auto; margin-right:auto; text-align:center; }
.sec-head__tag{ font-family:var(--f-display); font-size:11px; letter-spacing:3px; color:var(--cyan); display:block; margin-bottom:16px; }
.sec-head__title{ font-size:clamp(2rem,4vw,3rem); font-weight:900; line-height:1.15; margin-bottom:16px; letter-spacing:-.5px; }
.sec-head__desc{ color:var(--text-2); font-size:16px; }

/* =================================================================
   服务卡片
   ================================================================= */
.services__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.svc-card{
    position:relative; padding:36px 30px; border-radius:var(--radius-lg);
    background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
    border:1px solid var(--border); overflow:hidden;
    transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s;
    transform-style:preserve-3d;
}
.svc-card__glow{ position:absolute; inset:0; opacity:0; transition:opacity .4s; background:radial-gradient(circle at var(--mx,50%) var(--my,0%),rgba(132,204,22,.18),transparent 60%); pointer-events:none; }
.svc-card:hover{ border-color:rgba(132,204,22,.4); }
.svc-card:hover .svc-card__glow{ opacity:1; }
.svc-card__badge{ position:absolute; top:20px; right:20px; padding:4px 12px; border-radius:99px; font-family:var(--f-display); font-size:10px; letter-spacing:2px; background:var(--gold); color:#1a1300; box-shadow:0 0 16px rgba(251,191,36,.6); }
.svc-card__icon{ width:60px; height:60px; border-radius:16px; display:flex; align-items:center; justify-content:center; background:var(--surface-2); border:1px solid var(--border-2); margin-bottom:22px; }
.svc-card__icon iconify-icon{ font-size:30px; color:var(--tactical); filter:drop-shadow(0 0 8px rgba(132,204,22,.5)); }
.svc-card h3{ font-size:22px; font-weight:800; margin-bottom:10px; }
.svc-card p{ color:var(--text-2); font-size:14.5px; margin-bottom:18px; }
.svc-card__tags{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; }
.svc-card__tags li{ font-size:12px; padding:4px 12px; border-radius:99px; background:var(--surface); border:1px solid var(--border); color:var(--text-2); }
.svc-card__price{ font-size:14px; color:var(--text-3); padding-top:18px; border-top:1px dashed var(--border); }
.svc-card__price b{ font-family:var(--f-display); font-size:26px; color:var(--tactical); -webkit-text-fill-color:var(--tactical); margin:0 2px; }
.svc-card--feature{ background:linear-gradient(180deg,rgba(132,204,22,.1),rgba(249,115,22,.06)); border-color:rgba(132,204,22,.3); }
.svc-card--link{ display:block; color:inherit; cursor:none; }
.svc-card--link:hover{ transform:translateY(-4px); }
.price-note{
    margin-top:28px; text-align:center; font-size:13px; color:var(--text-3); line-height:1.6;
}

/* =================================================================
   示意价格
   ================================================================= */
.pricing__grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-bottom:28px;
}
.price-card{
    position:relative; padding:32px 28px; border-radius:var(--radius-lg);
    background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
    border:1px solid var(--border); display:flex; flex-direction:column; gap:18px;
    transition:transform .35s,border-color .35s,box-shadow .35s;
}
.price-card:hover{
    transform:translateY(-6px); border-color:rgba(132,204,22,.35);
    box-shadow:0 18px 40px -20px rgba(132,204,22,.45);
}
.price-card--hot{
    background:linear-gradient(180deg,rgba(132,204,22,.12),rgba(249,115,22,.08));
    border-color:rgba(132,204,22,.35);
}
.price-card__badge{
    position:absolute; top:18px; right:18px; padding:4px 12px; border-radius:99px;
    font-size:11px; font-weight:800; letter-spacing:1px; background:var(--gold); color:#1a1300;
    box-shadow:0 0 16px rgba(251,191,36,.45);
}
.price-card__tier{ font-family:var(--f-display); font-size:13px; letter-spacing:2px; color:var(--cyan); }
.price-card__amount{ display:flex; align-items:baseline; gap:6px; color:var(--text-3); }
.price-card__amount b{
    font-family:var(--f-display); font-size:48px; line-height:1; color:var(--tactical);
    -webkit-text-fill-color:var(--tactical);
}
.price-card__amount span{ font-size:13px; }
.price-card__list{ display:flex; flex-direction:column; gap:10px; flex:1; }
.price-card__list li{
    position:relative; padding-left:16px; font-size:14px; color:var(--text-2); line-height:1.5;
}
.price-card__list li::before{
    content:""; position:absolute; left:0; top:.55em; width:6px; height:6px; border-radius:50%;
    background:var(--tactical); box-shadow:0 0 8px rgba(182,243,104,.6);
}
.price-card .btn{ align-self:stretch; justify-content:center; }
.pricing__extras{
    display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:18px;
}
.pricing__extra{
    display:flex; gap:14px; align-items:flex-start; padding:18px 16px; border-radius:var(--radius);
    background:var(--surface); border:1px solid var(--border);
}
.pricing__extra iconify-icon{ font-size:24px; color:var(--cyan); flex-shrink:0; margin-top:2px; }
.pricing__extra b{ display:block; font-size:14px; margin-bottom:4px; }
.pricing__extra span{ font-size:12.5px; color:var(--text-3); line-height:1.5; }

/* =================================================================
   游戏阵营
   ================================================================= */
.games{ position:relative; overflow:hidden; }
.games__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; position:relative; z-index:2; }
.game-card{ position:relative; border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); background:var(--bg-2); transition:border-color .35s; transform-style:preserve-3d; }
.game-card:hover{ border-color:var(--g); }
.game-card__cover{ aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; position:relative; transition:transform .5s; transform-style:preserve-3d; }
.game-card__cover::after{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 50% 80%,var(--g),transparent 65%); opacity:.35; transition:opacity .4s; }
.game-card:hover .game-card__cover::after{ opacity:.6; }
.game-card__emoji{ font-size:56px; color:#fff; filter:drop-shadow(0 4px 18px rgba(0,0,0,.5)); transition:transform .4s; position:relative; z-index:1; }
.game-card:hover .game-card__emoji{ transform:scale(1.15) rotate(-6deg); }
.game-card__body{ padding:16px 18px; }
.game-card__body h4{ font-size:17px; font-weight:700; margin-bottom:4px; }
.game-card__body span{ font-size:12px; color:var(--text-3); }
.game-card__bar{ height:3px; background:var(--surface); border-radius:3px; margin-top:12px; overflow:hidden; }
.game-card__bar i{ display:block; height:100%; width:30%; background:var(--g); box-shadow:0 0 8px var(--g); transition:width .5s; }
.game-card:hover .game-card__bar i{ width:100%; }
.game-card--more .game-card__emoji{ color:var(--text-2); }

/* —— 玩法大卡片（三模式）—— */
.games__grid--3{ grid-template-columns:repeat(3,1fr); }
.game-card--lg{ display:flex; flex-direction:column; }
.game-card--lg .game-card__cover{ aspect-ratio:4/3; }
.game-card--lg .game-card__emoji{ font-size:64px; transform:translateZ(40px); }
.game-card--lg:hover .game-card__emoji{ transform:translateZ(40px) scale(1.15) rotate(-6deg); }
.game-card--lg .game-card__body{ padding:24px 22px; flex:1; display:flex; flex-direction:column; }
.game-card--lg .game-card__body h4{ font-size:22px; }
.game-card__desc{ font-size:13.5px; color:var(--text-2); margin:10px 0 16px; line-height:1.6; flex:1; }
.game-card--lg .game-card__bar{ margin-top:auto; }

/* —— 兵种胶囊 —— */
.roles{ display:grid; grid-template-columns:repeat(6,1fr); gap:16px; }
.role{
    padding:24px 16px; text-align:center; border-radius:var(--radius);
    background:linear-gradient(180deg,rgba(132,204,22,.06),rgba(255,255,255,.02));
    border:1px solid var(--border); transition:transform .35s,border-color .35s,background .35s;
}
.role iconify-icon{ font-size:34px; color:var(--tactical); filter:drop-shadow(0 0 8px rgba(182,243,104,.45)); transition:transform .35s; }
.role h5{ font-size:16px; font-weight:700; margin:12px 0 4px; }
.role span{ font-size:12px; color:var(--text-3); display:block; line-height:1.4; }
.role:hover{ transform:translateY(-6px); border-color:rgba(132,204,22,.4); background:linear-gradient(180deg,rgba(132,204,22,.12),rgba(255,255,255,.02)); }
.role:hover iconify-icon{ transform:scale(1.2) rotate(-8deg); }

.games__ghost{
    position:absolute; bottom:-30px; left:50%; transform:translateX(-50%);
    font-family:var(--f-display); font-size:clamp(4rem,16vw,14rem); font-weight:900;
    color:transparent; -webkit-text-stroke:1px rgba(132,204,22,.06);
    white-space:nowrap; pointer-events:none; z-index:0; letter-spacing:4px;
}
.games__ghost--sub{ font-size:clamp(3rem,12vw,10rem); -webkit-text-stroke:1px rgba(94,234,212,.05); }

/* =================================================================
   陪玩师
   ================================================================= */
.pros__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.pro-card{ background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02)); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; transition:transform .35s,border-color .35s; transform-style:preserve-3d; }
.pro-card:hover{ border-color:var(--accent); }
.pro-card__media{ position:relative; height:160px; background:linear-gradient(135deg,var(--accent),rgba(0,0,0,.4)); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.pro-card__media::before{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.25),transparent 60%); }
.pro-card__avatar{ width:88px; height:88px; border-radius:50%; background:rgba(0,0,0,.4); border:3px solid rgba(255,255,255,.6); display:flex; align-items:center; justify-content:center; font-size:38px; font-weight:900; color:#fff; font-family:var(--f-display); position:relative; z-index:1; box-shadow:0 8px 30px rgba(0,0,0,.4); }
.pro-card__live{ position:absolute; top:12px; right:12px; display:flex; align-items:center; gap:6px; padding:4px 10px; background:rgba(0,0,0,.5); border-radius:99px; font-size:11px; backdrop-filter:blur(6px); z-index:2; }
.pro-card__info{ padding:22px 22px 24px; }
.pro-card__info h4{ font-size:19px; font-weight:800; display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.pro-card__v{ color:var(--cyan); font-size:18px; filter:drop-shadow(0 0 6px rgba(132,204,22,.6)); }
.pro-card__info > p{ font-size:13px; color:var(--text-3); margin-bottom:16px; }
.pro-card__stats{ display:flex; justify-content:space-between; padding:14px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); margin-bottom:16px; }
.pro-card__stats div{ text-align:center; }
.pro-card__stats b{ display:block; font-family:var(--f-display); font-size:16px; color:var(--text); }
.pro-card__stats span{ font-size:11px; color:var(--text-3); }
.pro-card__tags{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:18px; }
.pro-card__tags span{ font-size:11px; padding:3px 10px; border-radius:99px; background:var(--surface); border:1px solid var(--border); color:var(--text-2); }
.pro-card__foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.pro-card__price{ font-size:13px; color:var(--text-3); white-space:nowrap; }
.pro-card__price b{ font-family:var(--f-display); font-size:22px; color:var(--cyan); -webkit-text-fill-color:var(--cyan); }

.pros__more{ text-align:center; margin-top:50px; }

/* =================================================================
   流程
   ================================================================= */
.flow__grid{ display:flex; align-items:stretch; justify-content:space-between; gap:0; position:relative; }
.flow-step{ flex:1; text-align:center; padding:0 16px; position:relative; }
.flow-step__num{ font-family:var(--f-display); font-size:14px; letter-spacing:3px; color:var(--text-3); margin-bottom:18px; }
.flow-step__icon{ width:80px; height:80px; margin:0 auto 22px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--surface); border:1px solid var(--border-2); position:relative; transition:transform .35s,border-color .35s; }
.flow-step__icon iconify-icon{ font-size:34px; color:var(--cyan); }
.flow-step__icon::before{ content:""; position:absolute; inset:-6px; border-radius:50%; border:1px dashed rgba(132,204,22,.25); transition:transform 8s linear; }
.flow-step:hover .flow-step__icon{ transform:translateY(-6px); border-color:var(--cyan); box-shadow:0 14px 40px -10px rgba(132,204,22,.5); }
.flow-step:hover .flow-step__icon::before{ transform:rotate(360deg); }
.flow-step h4{ font-size:19px; font-weight:800; margin-bottom:8px; }
.flow-step p{ font-size:14px; color:var(--text-2); max-width:220px; margin:0 auto; }
.flow-line{ align-self:flex-start; margin-top:40px; height:2px; flex:.5; background:linear-gradient(90deg,transparent,var(--border-2),transparent); position:relative; }
.flow-line::after{ content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:8px; height:8px; border-radius:50%; background:var(--cyan); box-shadow:0 0 10px var(--cyan); }

/* =================================================================
   口碑
   ================================================================= */
.reviews__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.review-card{ background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02)); border:1px solid var(--border); border-radius:var(--radius-lg); padding:30px; transition:transform .35s,border-color .35s; position:relative; overflow:hidden; }
.review-card::before{ content:"\201C"; position:absolute; top:-34px; right:12px; font-family:Georgia,serif; font-size:110px; color:rgba(132,204,22,.06); line-height:1; pointer-events:none; }
.review-card:hover{ transform:translateY(-6px); border-color:rgba(132,204,22,.3); }
.review-card__stars{ position:relative; z-index:1; color:var(--gold); letter-spacing:2px; margin-bottom:14px; filter:drop-shadow(0 0 6px rgba(251,191,36,.4)); }
.review-card p{ color:var(--text); font-size:15px; margin-bottom:22px; position:relative; z-index:1; }
.review-card__author{ display:flex; align-items:center; gap:12px; }
.review-card__ava{ width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; color:#fff; font-size:16px; }
.review-card__author b{ display:block; font-size:14px; }
.review-card__author span{ font-size:12px; color:var(--text-3); }

/* =================================================================
   安全承诺
   ================================================================= */
.trust__inner{ display:grid; grid-template-columns:.9fr 1.1fr; gap:60px; align-items:center; }
.trust__left .sec-head{ margin-bottom:24px; }
.trust__right{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.trust-item{ display:flex; gap:14px; padding:22px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--border); transition:transform .35s,border-color .35s; }
.trust-item:hover{ transform:translateY(-4px); border-color:rgba(132,204,22,.3); }
.trust-item iconify-icon{ font-size:26px; color:var(--cyan); flex-shrink:0; filter:drop-shadow(0 0 8px rgba(132,204,22,.4)); }
.trust-item b{ display:block; font-size:15px; margin-bottom:4px; }
.trust-item span{ font-size:12.5px; color:var(--text-3); line-height:1.5; }

/* =================================================================
   FAQ / 点单需知
   ================================================================= */
.faq__list{ max-width:860px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.faq-item{
    border:1px solid var(--border); border-radius:var(--radius);
    background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
    overflow:hidden;
}
.faq-item summary{
    list-style:none; cursor:pointer; padding:18px 52px 18px 20px; font-weight:700; font-size:15px;
    position:relative; color:var(--text); user-select:none;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
    content:"+"; position:absolute; right:18px; top:50%; transform:translateY(-50%);
    width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    border:1px solid var(--border-2); color:var(--tactical); font-size:18px; line-height:1;
    transition:transform .25s,background .25s,border-color .25s;
}
.faq-item[open] summary::after{
    content:"–"; background:rgba(132,204,22,.12); border-color:rgba(132,204,22,.4);
}
.faq-item p{
    padding:0 20px 18px; color:var(--text-2); font-size:14.5px; line-height:1.75;
}
.faq-item a{ color:var(--cyan); text-decoration:underline; text-underline-offset:3px; }
.faq__contact{
    max-width:860px; margin:34px auto 0; padding:22px 24px; border-radius:var(--radius-lg);
    border:1px solid var(--border-2); background:rgba(132,204,22,.06);
    display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.faq__contact b{ display:block; font-size:16px; margin-bottom:4px; }
.faq__contact span{ font-size:13px; color:var(--text-3); }

/* =================================================================
   CTA
   ================================================================= */
.cta{ padding:140px 0; }
.cta__inner{ position:relative; text-align:center; padding:80px 40px; border-radius:var(--radius-lg); overflow:hidden; background:linear-gradient(135deg,rgba(132,204,22,.12),rgba(249,115,22,.12)); border:1px solid var(--border-2); }
.cta__glow{ position:absolute; top:-50%; left:50%; transform:translateX(-50%); width:800px; height:800px; background:radial-gradient(circle,rgba(132,204,22,.25),transparent 60%); pointer-events:none; }
.cta__badge{ position:relative; display:inline-flex; align-items:center; gap:8px; padding:8px 18px; border-radius:99px; background:var(--gold); color:#1a1300; font-weight:700; font-size:13px; margin-bottom:24px; box-shadow:0 0 24px rgba(251,191,36,.5); }
.cta__badge iconify-icon{ font-size:18px; }
.cta__title{ position:relative; font-size:clamp(2.4rem,6vw,4.4rem); font-weight:900; margin-bottom:18px; line-height:1.1; }
.cta__desc{ position:relative; color:var(--text-2); font-size:17px; max-width:520px; margin:0 auto 40px; }
.cta__actions{ position:relative; display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-bottom:28px; }
.cta__note{ position:relative; font-size:13px; color:var(--text-3); }

/* =================================================================
   Footer
   ================================================================= */
.footer{ border-top:1px solid var(--border); padding-top:70px; background:linear-gradient(180deg,transparent,rgba(11,16,11,.6)); }
.footer__inner{ display:grid; grid-template-columns:1.2fr 2fr; gap:60px; padding-bottom:50px; }
.footer__brand{ display:flex; gap:16px; align-items:flex-start; }
.footer__logo{ width:56px; height:56px; object-fit:contain; filter:drop-shadow(0 0 10px rgba(132,204,22,.5)); }
.footer__name{ font-weight:900; font-size:18px; margin-bottom:8px; }
.footer__brand p{ font-size:14px; color:var(--text-3); line-height:1.7; }
.footer__mail{ margin-top:12px; }
.footer__mail a{ color:var(--cyan); }
.footer__cols{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; }
.footer__col h5{ font-size:13px; font-weight:700; margin-bottom:16px; color:var(--text); letter-spacing:1px; }
.footer__col a{ display:block; font-size:13.5px; color:var(--text-3); padding:5px 0; transition:color .2s,padding-left .2s; }
.footer__col a:hover{ color:var(--cyan); padding-left:6px; }
.footer__bar{ display:flex; align-items:center; justify-content:space-between; padding:24px 24px; border-top:1px solid var(--border); flex-wrap:wrap; gap:14px; font-size:13px; color:var(--text-3); }
.footer__legal{ display:flex; flex-direction:column; gap:4px; max-width:640px; }
.footer__social{ display:flex; gap:14px; }
.footer__social a{ width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--surface); border:1px solid var(--border); color:var(--text-2); transition:all .25s; }
.footer__social a:hover{ color:var(--cyan); border-color:var(--cyan); transform:translateY(-3px); box-shadow:0 8px 20px -6px rgba(132,204,22,.5); }
.footer__social iconify-icon{ font-size:18px; }

/* =================================================================
   返回顶部
   ================================================================= */
.totop{ position:fixed; right:28px; bottom:28px; width:48px; height:48px; border-radius:50%; background:var(--surface-2); border:1px solid var(--border-2); backdrop-filter:blur(10px); display:flex; align-items:center; justify-content:center; color:var(--cyan); z-index:700; opacity:0; visibility:hidden; transform:translateY(20px); transition:opacity .35s,transform .35s,visibility .35s,box-shadow .25s; box-shadow:var(--shadow-1); }
.totop.show{ opacity:1; visibility:visible; transform:translateY(0); }
.totop:hover{ box-shadow:0 12px 30px -6px rgba(132,204,22,.6); border-color:var(--cyan); }
.totop iconify-icon{ font-size:24px; }

/* =================================================================
   滚动入场动画
   ================================================================= */
.reveal{ opacity:0; transform:translateY(40px); transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
    .reveal{ opacity:1; transform:none; transition:none; }
    /* 不再全局 *{animation:none}：那会误杀 SCROLL 指示条、脉冲点、旋转环等
       装饰性循环动画。仅关闭 reveal 入场位移即可。如需严格无障碍，可改回
       *{ animation:none !important; } */
}

/* =================================================================
   响应式
   ================================================================= */
@media (max-width:1024px){
    .services__grid{ grid-template-columns:repeat(2,1fr); }
    .games__grid--3{ grid-template-columns:1fr; }
    .games__grid{ grid-template-columns:repeat(3,1fr); }
    .pros__grid{ grid-template-columns:repeat(2,1fr); }
    .reviews__grid{ grid-template-columns:repeat(2,1fr); }
    .trust__inner{ grid-template-columns:1fr; gap:40px; }
    .roles{ grid-template-columns:repeat(3,1fr); }
    .pricing__grid{ grid-template-columns:1fr; max-width:420px; margin-left:auto; margin-right:auto; }
    .pricing__extras{ grid-template-columns:1fr; }
}
@media (max-width:768px){
    .section{ padding:80px 0; }
    .container{ padding:0 18px; }
    .stats-band__grid{ grid-template-columns:repeat(2,1fr); gap:30px 10px; }
    .hstat{ padding:0 10px; }
    .hstat__sep{ display:none; }
    .hero__scroll{ display:none; }
    /* 跑马灯为 absolute bottom:0，需给 hero 内容让出底部空间，避免覆盖数字指标 */
    .hero__inner{ padding-bottom:96px; }
    /* 跑马灯在手机上更紧凑，少占垂直空间 */
    .marquee{ padding:13px 0; }
    .marquee__track span{ font-size:15px; gap:6px; letter-spacing:1px; }
    .marquee__track span iconify-icon{ font-size:17px; }
    .services__grid,.games__grid,.pros__grid,.reviews__grid{ grid-template-columns:1fr; }
    .flow__grid{ flex-direction:column; gap:30px; }
    .flow-line{ display:none; }
    .footer__inner{ grid-template-columns:1fr; gap:36px; }
    .footer__cols{ grid-template-columns:repeat(2,1fr); gap:24px; }
    .cta__inner{ padding:50px 22px; }
    .trust__right{ grid-template-columns:1fr; }
    .nav__cta .btn--ghost{ display:none; }
    .roles{ grid-template-columns:repeat(2,1fr); }
    .faq__contact{ align-items:stretch; }
    .faq__contact .btn{ justify-content:center; }
}
@media (max-width:480px){
    .stats-band__grid{ grid-template-columns:1fr; gap:24px; }
    .hero__stats{ gap:6px; row-gap:18px; }
    .hstat{ padding:0 8px; }
    .hero__actions{ flex-direction:column; align-items:stretch; }
    .hero__actions .btn{ justify-content:center; }
    .cta__actions{ flex-direction:column; align-items:stretch; }
    .cta__actions .btn{ justify-content:center; }
    .footer__cols{ grid-template-columns:1fr; }
    .footer__bar{ flex-direction:column; text-align:center; }
    .footer__legal{ text-align:center; }
    .price-card__amount b{ font-size:40px; }
}