/* ============================================================
   字节美学 · BYTE AESTHETICS
   官方样式表
   ============================================================ */

/* ---------- UKIJ Tor 维吾尔语字体 ---------- */
@font-face{
    font-family:'UKIJTor';
    src:url('../fonts/UKIJTor.ttf') format('truetype');
    font-weight:normal;
    font-style:normal;
    font-display:swap;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
    font-family:'Inter','Noto Sans SC',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    font-size:16px;line-height:1.6;
    color:var(--fg);
    background:var(--bg);
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    transition:background-color .4s ease,color .4s ease;
}
/* 自定义光标 — 仅在桌面端且有 JS 时启用 */
body.cursor-ready{cursor:none}
body.cursor-ready a,body.cursor-ready button{cursor:pointer}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;background:none;border:0;color:inherit}
input,textarea,select{font:inherit;color:inherit;background:transparent;border:0;outline:0}
ul{list-style:none}
::selection{background:var(--accent);color:var(--bg)}
*:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- 主题变量 ---------- */
:root{
    --bg:#08080F;
    --bg-soft:#0E0E1A;
    --bg-soft-2:#13132A;
    --fg:#F5F5F7;
    --fg-soft:#C7C7D1;
    --muted:#6E6E80;
    --line:rgba(255,255,255,.08);
    --line-strong:rgba(255,255,255,.16);
    --glass:rgba(255,255,255,.04);
    --glass-strong:rgba(255,255,255,.07);
    --accent:#00F0FF;
    --accent-2:#7B61FF;
    --accent-3:#FF6B35;
    --gradient:linear-gradient(135deg,#00F0FF 0%,#7B61FF 100%);
    --gradient-warm:linear-gradient(135deg,#FF6B35 0%,#F0C419 100%);
    --shadow-glow:0 0 60px rgba(0,240,255,.15);
    --shadow-glow-2:0 0 60px rgba(123,97,255,.18);
    --radius:18px;
    --radius-sm:10px;
    --container:1280px;
    --pad:clamp(20px,4vw,64px);
    --ease:cubic-bezier(.16,1,.3,1);
    --ease-2:cubic-bezier(.6,0,.2,1);
}

[data-theme="light"]{
    --bg:#F7F7F5;
    --bg-soft:#FFFFFF;
    --bg-soft-2:#FAFAF7;
    --fg:#0B0B12;
    --fg-soft:#1A1A26;
    --muted:#7A7A88;
    --line:rgba(11,11,18,.08);
    --line-strong:rgba(11,11,18,.16);
    --glass:rgba(255,255,255,.6);
    --glass-strong:rgba(255,255,255,.8);
    --accent:#0052FF;
    --accent-2:#7B61FF;
    --accent-3:#E5451F;
    --gradient:linear-gradient(135deg,#0052FF 0%,#7B61FF 100%);
    --gradient-warm:linear-gradient(135deg,#E5451F 0%,#F0C419 100%);
    --shadow-glow:0 0 60px rgba(0,82,255,.12);
    --shadow-glow-2:0 0 60px rgba(123,97,255,.15);
}

/* ---------- 全局工具 ---------- */
.container{max-width:var(--container);margin:0 auto;padding:0 var(--pad);position:relative;z-index:2}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace;letter-spacing:-.02em}
.muted{color:var(--muted)}
.gradient-text{
    background:var(--gradient);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
    background-size:200% 200%;
    animation:gradientShift 8s ease-in-out infinite;
}
@keyframes gradientShift{
    0%,100%{background-position:0% 50%}
    50%{background-position:100% 50%}
}
.btn-magnetic{position:relative;display:inline-flex;align-items:center;gap:10px}

/* ---------- 启动遮罩 ---------- */
.boot-overlay{
    position:fixed;inset:0;z-index:9999;
    background:var(--bg);
    display:flex;align-items:center;justify-content:center;
    transition:opacity .8s var(--ease),visibility .8s var(--ease);
}
.boot-overlay.hide{opacity:0;visibility:hidden;pointer-events:none}
.boot-grid{
    position:absolute;inset:0;
    background-image:
        linear-gradient(var(--line) 1px,transparent 1px),
        linear-gradient(90deg,var(--line) 1px,transparent 1px);
    background-size:50px 50px;
    mask-image:radial-gradient(circle at center,#000 0%,transparent 70%);
}
.boot-content{position:relative;text-align:center;z-index:2}
.boot-logo{
    font-family:'JetBrains Mono',monospace;
    font-size:clamp(60px,12vw,120px);font-weight:900;
    background:var(--gradient);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
    line-height:1;
}
.boot-cursor{color:var(--accent);-webkit-text-fill-color:var(--accent);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.boot-bar{
    width:clamp(200px,40vw,400px);height:2px;
    background:var(--line);margin:30px auto 12px;
    overflow:hidden;border-radius:1px;
}
.boot-bar-fill{
    height:100%;width:0;
    background:var(--gradient);
    box-shadow:0 0 20px var(--accent);
    transition:width .1s linear;
}
.boot-text{
    font-family:'JetBrains Mono',monospace;
    font-size:11px;letter-spacing:.3em;
    color:var(--muted);
}

/* ---------- 自定义光标 (优化: 无 transform 过渡, 用尺寸变化做 hover) ---------- */
.cursor,.cursor-follower{
    position:fixed;top:0;left:0;
    pointer-events:none;z-index:9000;
    /* 关键: transform 上不加 transition — 位置必须即时跟随鼠标 */
    transition:width .2s var(--ease-2),height .2s var(--ease-2),background .2s var(--ease-2),opacity .2s var(--ease-2),border-color .2s var(--ease-2);
    will-change:transform;
}
.cursor{
    width:8px;height:8px;
    background:var(--accent);
    border-radius:50%;
    transform:translate3d(0,0,0) translate(-50%,-50%);
}
.cursor-follower{
    width:40px;height:40px;
    border:1px solid var(--accent);
    border-radius:50%;
    transform:translate3d(0,0,0) translate(-50%,-50%);
    opacity:.5;
}
/* hover 时只改尺寸/颜色, 不碰 transform — 位置由 JS 控制 */
.cursor.hover{width:24px;height:24px;background:var(--accent-2);opacity:.8}
.cursor-follower.hover{width:60px;height:60px;opacity:0;border-color:var(--accent-2)}
@media (max-width:1024px){
    .cursor,.cursor-follower{display:none}
    body{cursor:auto}
}

/* ---------- 噪声 + 网格背景 ---------- */
.noise{
    position:fixed;inset:0;z-index:1;pointer-events:none;
    opacity:.04;mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.5'/></svg>");
}
.grid-bg{
    position:fixed;inset:0;z-index:0;pointer-events:none;
    background-image:
        linear-gradient(var(--line) 1px,transparent 1px),
        linear-gradient(90deg,var(--line) 1px,transparent 1px);
    background-size:80px 80px;
    mask-image:radial-gradient(ellipse at center,#000 0%,transparent 75%);
    -webkit-mask-image:radial-gradient(ellipse at center,#000 0%,transparent 75%);
}
.grid-bg-gradient{
    position:absolute;inset:0;
    background:radial-gradient(circle at 20% 10%,rgba(0,240,255,.08),transparent 50%),
               radial-gradient(circle at 80% 80%,rgba(123,97,255,.10),transparent 50%);
}

/* ---------- NAV ---------- */
.nav{
    position:fixed;top:0;left:0;right:0;z-index:100;
    display:flex;align-items:center;justify-content:space-between;
    padding:18px var(--pad);
    transition:background .3s var(--ease),backdrop-filter .3s var(--ease),border-color .3s var(--ease);
    border-bottom:1px solid transparent;
}
.nav.scrolled{
    background:var(--glass);
    backdrop-filter:blur(20px) saturate(180%);
    -webkit-backdrop-filter:blur(20px) saturate(180%);
    border-bottom-color:var(--line);
}
.nav-logo{
    display:flex;align-items:center;gap:12px;
    font-weight:700;
}
.logo-mark{
    font-family:'JetBrains Mono',monospace;
    font-size:24px;font-weight:900;
    background:var(--gradient);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
    line-height:1;
    transition:transform .3s var(--ease);
}
.nav-logo:hover .logo-mark{transform:rotate(-10deg) scale(1.1)}
.logo-text{display:flex;flex-direction:column;line-height:1.1}
.logo-zh{font-size:14px;font-weight:700;letter-spacing:.02em}
.logo-en{font-size:9px;letter-spacing:.25em;color:var(--muted);font-weight:500;margin-top:2px}
.logo-zh.big,.logo-en.big{font-size:18px}
.logo-en.big{font-size:10px;letter-spacing:.3em}

.nav-links{display:flex;align-items:center;gap:4px}
.nav-links a{
    position:relative;
    padding:10px 18px;
    font-size:14px;font-weight:500;
    color:var(--fg-soft);
    border-radius:30px;
    transition:color .25s var(--ease);
    display:flex;align-items:center;gap:6px;
}
.nav-links a::before{
    content:attr(data-num);
    font-family:'JetBrains Mono',monospace;
    font-size:10px;color:var(--muted);
    transition:color .25s var(--ease);
}
.nav-links a:hover{color:var(--fg)}
.nav-links a:hover::before{color:var(--accent)}
.nav-links a.active{color:var(--fg)}
.nav-links a.active::before{color:var(--accent)}

.nav-actions{display:flex;align-items:center;gap:12px}

/* 主题切换 */
.theme-toggle{
    position:relative;
    width:54px;height:28px;
    border-radius:30px;
    background:var(--glass);
    border:1px solid var(--line);
    display:flex;align-items:center;justify-content:space-between;
    padding:0 6px;
    transition:background .3s var(--ease);
}
.theme-toggle:hover{background:var(--glass-strong)}
.icon-sun,.icon-moon{width:14px;height:14px;transition:color .3s var(--ease)}
.icon-sun{color:var(--accent);opacity:1}
.icon-moon{color:var(--muted);opacity:.5}
[data-theme="light"] .icon-sun{opacity:.5;color:var(--muted)}
[data-theme="light"] .icon-moon{opacity:1;color:var(--accent-2)}
.theme-toggle-thumb{
    position:absolute;top:2px;left:2px;
    width:22px;height:22px;
    background:var(--gradient);
    border-radius:50%;
    box-shadow:0 2px 8px rgba(0,0,0,.2);
    transition:transform .35s var(--ease);
}
[data-theme="light"] .theme-toggle-thumb{transform:translateX(26px)}

/* 按钮 */
.btn-magnetic{
    position:relative;
    padding:11px 22px;
    font-size:14px;font-weight:600;
    border-radius:30px;
    color:var(--fg);
    background:var(--glass);
    border:1px solid var(--line);
    overflow:hidden;
    transition:border-color .3s var(--ease),color .3s var(--ease);
}
.btn-magnetic:hover{border-color:var(--accent);color:var(--accent)}
.btn-magnetic svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.btn-magnetic:hover svg{transform:translateX(3px)}
.btn-magnetic .btn-bg{
    position:absolute;inset:0;z-index:0;
    background:var(--gradient);
    transform:scaleX(0);transform-origin:left;
    transition:transform .4s var(--ease);
}
.btn-magnetic.btn-primary{color:var(--bg);background:var(--fg);border-color:transparent}
.btn-magnetic.btn-primary .btn-bg{transform:scaleX(1);background:var(--gradient)}
.btn-magnetic.btn-primary .btn-content{position:relative;z-index:1;display:flex;align-items:center;gap:8px}
.btn-magnetic.btn-primary:hover{border-color:transparent;color:var(--bg)}
.btn-magnetic.btn-ghost{background:transparent}
.btn-magnetic.btn-ghost .btn-line{
    display:inline-block;width:24px;height:1px;
    background:currentColor;
    transition:width .3s var(--ease);
}
.btn-magnetic.btn-ghost:hover .btn-line{width:36px}
.btn-magnetic.btn-lg{padding:18px 32px;font-size:15px}
.btn-magnetic.btn-full{width:100%;justify-content:center}
.nav-cta{padding:9px 18px;font-size:13px}

/* 汉堡 */
.nav-burger{
    display:none;
    width:36px;height:36px;
    border:1px solid var(--line);
    border-radius:50%;
    flex-direction:column;align-items:center;justify-content:center;
    gap:4px;
}
.nav-burger span{
    display:block;width:16px;height:1.5px;
    background:var(--fg);
    transition:transform .3s var(--ease),opacity .3s var(--ease);
}
.nav-burger.open span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0}
.nav-burger.open span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

/* 移动菜单 */
.mobile-menu{
    position:fixed;inset:0;z-index:99;
    visibility:hidden;opacity:0;
    transition:visibility .4s var(--ease),opacity .4s var(--ease);
}
.mobile-menu.open{visibility:visible;opacity:1}
.mobile-menu-bg{
    position:absolute;inset:0;
    background:var(--bg);
    backdrop-filter:blur(30px);
}
.mobile-menu-list{
    position:absolute;top:50%;left:50%;
    transform:translate(-50%,-50%);
    text-align:center;
    display:flex;flex-direction:column;gap:8px;
}
.mobile-menu-list a{
    display:flex;align-items:baseline;justify-content:center;gap:16px;
    font-size:clamp(36px,8vw,60px);font-weight:700;
    padding:8px 0;
    transition:color .3s var(--ease),letter-spacing .3s var(--ease);
}
.mobile-menu-list a:hover{color:var(--accent);letter-spacing:.05em}
.mobile-menu-list a span{
    font-family:'JetBrains Mono',monospace;
    font-size:11px;color:var(--muted);
    font-weight:500;
}
.mobile-menu-list a::before{
    content:attr(data-num);
    font-family:'JetBrains Mono',monospace;
    font-size:12px;color:var(--accent);
    margin-right:8px;
}
.mobile-menu-footer{
    position:absolute;bottom:40px;left:0;right:0;
    text-align:center;color:var(--muted);
    font-size:12px;line-height:1.8;
}

@media (max-width:900px){
    .nav-links,.nav-cta{display:none}
    .nav-burger{display:flex}
}

/* ---------- HERO ---------- */
.hero{
    position:relative;
    min-height:100vh;min-height:100svh;
    display:flex;align-items:center;
    padding:120px var(--pad) 80px;
    overflow:hidden;
}
.hero-canvas{
    position:absolute;inset:0;
    width:100%;height:100%;
    z-index:0;
}
.hero-overlay{
    position:absolute;inset:0;z-index:1;pointer-events:none;
    background:radial-gradient(ellipse at center,transparent 30%,var(--bg) 80%);
}
.hero-content{
    position:relative;z-index:3;
    max-width:1100px;width:100%;
    margin:0 auto;
}
.hero-badge{
    display:inline-flex;align-items:center;gap:14px;
    padding:8px 16px;
    border:1px solid var(--line);
    background:var(--glass);
    backdrop-filter:blur(20px);
    border-radius:30px;
    font-family:'JetBrains Mono',monospace;
    font-size:11px;letter-spacing:.1em;
    color:var(--fg-soft);
    margin-bottom:32px;
}
.hero-badge .dot{
    width:6px;height:6px;border-radius:50%;
    background:var(--accent);
    box-shadow:0 0 10px var(--accent);
    animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{50%{opacity:.4;transform:scale(1.3)}}
.hero-badge strong{color:var(--accent);font-weight:700}
.hero-badge .badge-divider{
    width:1px;height:12px;background:var(--line-strong);
}

.hero-title{
    font-size:clamp(48px,9vw,140px);
    font-weight:800;
    line-height:1.02;
    letter-spacing:-.04em;
    margin-bottom:32px;
}
.hero-title .line{display:block;overflow:hidden}
.hero-title .line span{display:inline-block}
.hero-title .line-2{font-weight:900}
.hero-cursor{
    color:var(--accent);
    -webkit-text-fill-color:var(--accent);
    animation:blink 1s steps(2) infinite;
    margin-left:8px;
    font-weight:300;
}

.hero-sub{
    max-width:680px;
    font-size:clamp(15px,1.4vw,18px);
    line-height:1.7;
    color:var(--fg-soft);
    margin-bottom:48px;
}
.hero-sub em{
    font-style:normal;color:var(--accent);font-weight:600;
    border-bottom:1px solid var(--accent);
    padding-bottom:1px;
}
.hero-sub-prefix{
    font-family:'JetBrains Mono',monospace;
    color:var(--accent);font-weight:600;
    margin-right:8px;
}

.hero-cta{
    display:flex;flex-wrap:wrap;gap:16px;
    margin-bottom:80px;
}

.hero-meta{
    display:flex;align-items:center;gap:24px;flex-wrap:wrap;
    padding-top:32px;
    border-top:1px solid var(--line);
}
.meta-item{display:flex;flex-direction:column;gap:4px}
.meta-label{
    font-family:'JetBrains Mono',monospace;
    font-size:10px;letter-spacing:.2em;
    color:var(--muted);text-transform:uppercase;
}
.meta-value{font-size:13px;font-weight:500;color:var(--fg)}
.meta-divider{width:1px;height:32px;background:var(--line)}

.hero-scroll{
    position:absolute;bottom:30px;left:var(--pad);
    display:flex;align-items:center;gap:14px;
    z-index:3;
    font-family:'JetBrains Mono',monospace;
    font-size:10px;letter-spacing:.3em;
    color:var(--muted);
}
.scroll-line{
    position:relative;width:60px;height:1px;
    background:var(--line);
    overflow:hidden;
}
.scroll-line::after{
    content:'';position:absolute;top:0;left:0;
    width:30px;height:1px;
    background:var(--accent);
    animation:scrollLine 2.5s var(--ease) infinite;
}
@keyframes scrollLine{
    0%{transform:translateX(-100%)}
    100%{transform:translateX(200%)}
}
.hero-marks{
    position:absolute;bottom:30px;right:var(--pad);
    display:flex;flex-direction:column;align-items:flex-end;gap:6px;
    z-index:3;
    font-family:'JetBrains Mono',monospace;
    font-size:10px;letter-spacing:.2em;
    color:var(--muted);
}
.hero-marks span:last-child{color:var(--accent)}

/* ---------- MARQUEE ---------- */
.marquee-section{
    position:relative;
    padding:30px 0;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    overflow:hidden;
    background:var(--bg-soft);
}
.marquee{
    overflow:hidden;
    mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
.marquee-track{
    display:inline-flex;align-items:center;gap:50px;
    white-space:nowrap;
    animation:marquee 40s linear infinite;
    font-size:clamp(28px,4vw,60px);
    font-weight:800;
    letter-spacing:-.02em;
}
.marquee-track span{color:var(--fg-soft)}
.marquee-track .dot{color:var(--accent);font-size:.6em}
@keyframes marquee{
    0%{transform:translateX(0)}
    100%{transform:translateX(-50%)}
}

/* ---------- SECTION 通用 ---------- */
.section{padding:140px 0;position:relative;z-index:2}
.section-head{margin-bottom:80px;max-width:900px}
.section-num{
    font-family:'JetBrains Mono',monospace;
    font-size:12px;letter-spacing:.3em;
    color:var(--accent);
    margin-bottom:24px;
    display:flex;align-items:center;gap:12px;
}
.section-num::after{
    content:'';flex:1;max-width:80px;height:1px;
    background:linear-gradient(90deg,var(--accent),transparent);
}
.section-title{
    font-size:clamp(36px,6vw,80px);
    font-weight:800;
    line-height:1.05;
    letter-spacing:-.03em;
    margin-bottom:24px;
}
.section-desc{
    max-width:600px;
    font-size:clamp(15px,1.4vw,18px);
    color:var(--fg-soft);
    line-height:1.7;
}

/* ---------- ABOUT ---------- */
.about{padding-top:160px}
.about-grid{
    display:grid;grid-template-columns:1.2fr .8fr;
    gap:80px;align-items:start;
}
.about-text .lead{
    font-size:clamp(18px,1.8vw,22px);
    line-height:1.65;color:var(--fg);
    margin-bottom:24px;
}
.about-text p{margin-bottom:20px;color:var(--fg-soft);line-height:1.8}
.about-text em{color:var(--accent);font-style:normal;font-weight:600}
.about-text strong{color:var(--fg);font-weight:700}
.dropcap{
    float:left;
    font-family:'JetBrains Mono',monospace;
    font-size:48px;line-height:.8;
    background:var(--gradient);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
    margin:6px 12px 0 0;font-weight:900;
}

.about-card{
    position:relative;
    background:var(--glass);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:36px;
    backdrop-filter:blur(20px);
    transform-style:preserve-3d;
    transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.about-card:hover{box-shadow:var(--shadow-glow)}
.card-corner{
    position:absolute;width:14px;height:14px;
    border:1px solid var(--accent);
}
.card-corner.tl{top:-1px;left:-1px;border-right:0;border-bottom:0}
.card-corner.tr{top:-1px;right:-1px;border-left:0;border-bottom:0}
.card-corner.bl{bottom:-1px;left:-1px;border-right:0;border-top:0}
.card-corner.br{bottom:-1px;right:-1px;border-left:0;border-top:0}
.card-inner{transform:translateZ(20px)}
.card-row{
    display:flex;justify-content:space-between;align-items:start;
    padding:16px 0;
    border-bottom:1px solid var(--line);
    gap:20px;
}
.card-row:last-child{border-bottom:0}
.card-label{
    font-family:'JetBrains Mono',monospace;
    font-size:11px;letter-spacing:.1em;
    color:var(--muted);text-transform:uppercase;
    flex-shrink:0;
}
.card-value{
    font-size:14px;font-weight:500;
    text-align:right;
}
.status-live{
    display:inline-flex;align-items:center;gap:8px;
    color:var(--accent);
}
.live-dot{
    width:8px;height:8px;border-radius:50%;
    background:var(--accent);
    box-shadow:0 0 10px var(--accent);
    animation:pulse 2s ease-in-out infinite;
}

/* 统计 */
.stats{
    display:grid;grid-template-columns:repeat(4,1fr);
    gap:0;
    margin-top:120px;
    padding:60px 0;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
}
.stat{
    text-align:center;
    padding:0 30px;
    position:relative;
}
.stat:not(:last-child)::after{
    content:'';position:absolute;right:0;top:50%;
    transform:translateY(-50%);
    width:1px;height:60%;
    background:var(--line);
}
.stat-num{
    font-family:'JetBrains Mono',monospace;
    font-size:clamp(40px,5vw,72px);
    font-weight:700;
    line-height:1;
    background:var(--gradient);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
    margin-bottom:8px;
}
.stat-label{
    font-size:13px;color:var(--muted);
    font-family:'JetBrains Mono',monospace;
    letter-spacing:.1em;
}

@media (max-width:900px){
    .about-grid{grid-template-columns:1fr;gap:40px}
    .stats{grid-template-columns:repeat(2,1fr);gap:40px 0}
    .stat:nth-child(2)::after{display:none}
}

/* ---------- SERVICES ---------- */
.services{padding-top:160px}
.services-grid{
    display:grid;grid-template-columns:repeat(3,1fr);
    gap:24px;
}
.service-card{
    position:relative;
    padding:48px 40px;
    background:var(--glass);
    border:1px solid var(--line);
    border-radius:var(--radius);
    overflow:hidden;
    transition:transform .5s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease);
    transform-style:preserve-3d;
    backdrop-filter:blur(10px);
    min-height:560px;
    display:flex;flex-direction:column;
}
.service-card:hover{
    border-color:var(--accent);
    box-shadow:var(--shadow-glow);
}
.service-card.highlight{
    background:linear-gradient(180deg,var(--bg-soft-2),var(--bg-soft));
    border-color:var(--line-strong);
}
.service-flag{
    position:absolute;top:24px;right:24px;
    padding:4px 10px;
    background:var(--gradient-warm);
    color:var(--bg);
    border-radius:20px;
    font-family:'JetBrains Mono',monospace;
    font-size:9px;font-weight:700;letter-spacing:.15em;
}
.service-num{
    position:absolute;top:24px;left:32px;
    font-family:'JetBrains Mono',monospace;
    font-size:13px;color:var(--muted);
    letter-spacing:.1em;
}
.service-icon{
    width:60px;height:60px;
    display:flex;align-items:center;justify-content:center;
    border:1px solid var(--line);
    border-radius:14px;
    color:var(--accent);
    margin:60px 0 32px;
    transition:transform .5s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
    transform:translateZ(40px);
}
.service-icon svg{width:32px;height:32px}
.service-card:hover .service-icon{
    transform:translateZ(60px) rotate(-5deg) scale(1.05);
    color:var(--bg);background:var(--accent);border-color:var(--accent);
}
.service-title{
    font-size:clamp(28px,3vw,36px);
    font-weight:800;
    letter-spacing:-.02em;
    line-height:1.1;
    margin-bottom:8px;
    transform:translateZ(30px);
}
.service-en{
    font-family:'JetBrains Mono',monospace;
    font-size:11px;letter-spacing:.2em;
    color:var(--muted);
    margin-bottom:24px;
    transform:translateZ(20px);
}
.service-desc{
    color:var(--fg-soft);
    line-height:1.7;
    margin-bottom:32px;
    font-size:14px;
    transform:translateZ(15px);
}
.service-list{
    margin-bottom:32px;
    flex-grow:1;
    transform:translateZ(10px);
}
.service-list li{
    position:relative;
    padding:10px 0 10px 24px;
    font-size:13.5px;
    color:var(--fg-soft);
    border-bottom:1px solid var(--line);
}
.service-list li::before{
    content:'';position:absolute;left:0;top:50%;
    transform:translateY(-50%);
    width:8px;height:1px;
    background:var(--accent);
}
.service-tags{
    display:flex;flex-wrap:wrap;gap:6px;
    transform:translateZ(20px);
}
.service-tags span{
    padding:4px 10px;
    font-family:'JetBrains Mono',monospace;
    font-size:10px;letter-spacing:.05em;
    background:var(--glass);
    border:1px solid var(--line);
    border-radius:14px;
    color:var(--fg-soft);
}
.service-bg{
    position:absolute;
    top:-50%;right:-50%;
    width:200%;height:200%;
    background:radial-gradient(circle,rgba(0,240,255,.06) 0%,transparent 50%);
    opacity:0;transition:opacity .6s var(--ease);
    pointer-events:none;
}
.service-card:hover .service-bg{opacity:1}

@media (max-width:1024px){
    .services-grid{grid-template-columns:1fr;gap:20px}
    .service-card{min-height:auto;padding:40px 32px}
}

/* ---------- PROCESS ---------- */
.process{padding-top:160px}
.process-list{display:flex;flex-direction:column;gap:0}
.process-item{
    display:grid;
    grid-template-columns:120px 1fr auto;
    gap:40px;align-items:center;
    padding:40px 0;
    border-top:1px solid var(--line);
    transition:padding-left .4s var(--ease);
    position:relative;
}
.process-item:last-child{border-bottom:1px solid var(--line)}
.process-item::before{
    content:'';position:absolute;left:-20px;top:50%;
    width:0;height:1px;
    background:var(--accent);
    transition:width .5s var(--ease);
}
.process-item:hover::before{width:20px}
.process-item:hover{padding-left:20px}
.process-num{
    font-family:'JetBrains Mono',monospace;
    font-size:clamp(40px,4vw,64px);font-weight:700;
    color:var(--muted);
    line-height:1;
    transition:color .4s var(--ease);
}
.process-item:hover .process-num{color:var(--accent)}
.process-content h3{
    font-size:clamp(22px,2.5vw,32px);
    font-weight:700;
    letter-spacing:-.01em;
    margin-bottom:8px;
}
.process-content p{color:var(--fg-soft);max-width:500px}
.process-time{
    font-family:'JetBrains Mono',monospace;
    font-size:13px;letter-spacing:.1em;
    color:var(--muted);
    padding:8px 16px;
    border:1px solid var(--line);
    border-radius:30px;
}
@media (max-width:768px){
    .process-item{grid-template-columns:80px 1fr;gap:20px}
    .process-time{grid-column:1/-1;justify-self:start}
}

/* ---------- STACK ---------- */
.stack{padding-top:160px}
.stack-grid{
    display:grid;grid-template-columns:repeat(4,1fr);
    gap:0;
    border:1px solid var(--line);
    border-radius:var(--radius);
    overflow:hidden;
    background:var(--glass);
    backdrop-filter:blur(20px);
}
.stack-col{
    padding:48px 36px;
    border-right:1px solid var(--line);
    transition:background .4s var(--ease);
}
.stack-col:last-child{border-right:0}
.stack-col:hover{background:var(--glass-strong)}
.stack-label{
    font-family:'JetBrains Mono',monospace;
    font-size:11px;letter-spacing:.2em;
    color:var(--accent);
    margin-bottom:32px;
    padding-bottom:16px;
    border-bottom:1px solid var(--line);
}
.stack-list li{
    display:flex;align-items:baseline;gap:14px;
    padding:10px 0;
    font-size:14px;color:var(--fg-soft);
    transition:color .3s var(--ease),padding-left .3s var(--ease);
    cursor:default;
}
.stack-list li:hover{color:var(--fg);padding-left:6px}
.stack-list li span{
    font-family:'JetBrains Mono',monospace;
    font-size:10px;color:var(--muted);
    font-weight:500;
}
@media (max-width:1024px){
    .stack-grid{grid-template-columns:repeat(2,1fr)}
    .stack-col{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
    .stack-col:nth-child(2n){border-right:0}
    .stack-col:nth-last-child(-n+2){border-bottom:0}
}
@media (max-width:600px){
    .stack-grid{grid-template-columns:1fr}
    .stack-col{border-right:0;border-bottom:1px solid var(--line)}
    .stack-col:last-child{border-bottom:0}
}

/* ---------- CTA BANNER ---------- */
.cta-banner{
    padding:120px 0;
    position:relative;
    z-index:2;
    overflow:hidden;
}
.cta-inner{
    text-align:center;
    max-width:900px;margin:0 auto;
    padding:80px 40px;
    background:var(--glass);
    border:1px solid var(--line);
    border-radius:24px;
    backdrop-filter:blur(20px);
    position:relative;
    overflow:hidden;
}
.cta-inner::before{
    content:'';position:absolute;
    top:-100%;left:50%;
    transform:translateX(-50%);
    width:600px;height:600px;
    background:radial-gradient(circle,rgba(0,240,255,.12) 0%,transparent 60%);
    pointer-events:none;
    animation:ctaGlow 6s ease-in-out infinite;
}
@keyframes ctaGlow{
    50%{transform:translateX(-50%) translateY(20%) scale(1.1)}
}
.cta-title{
    position:relative;z-index:1;
    font-size:clamp(32px,5vw,60px);
    font-weight:800;
    line-height:1.2;
    letter-spacing:-.02em;
    margin-bottom:24px;
}
.cta-title span{display:block}
.cta-sub{
    position:relative;z-index:1;
    font-size:clamp(15px,1.4vw,18px);
    color:var(--fg-soft);
    margin-bottom:40px;
    line-height:1.7;
}

/* ---------- CONTACT ---------- */
.contact{padding-top:120px}
.contact-grid{
    display:grid;grid-template-columns:1fr 1fr;
    gap:80px;align-items:start;
}
.contact-block{
    padding:24px 0;
    border-bottom:1px solid var(--line);
}
.contact-block:last-child{border-bottom:0}
.contact-label{
    font-family:'JetBrains Mono',monospace;
    font-size:11px;letter-spacing:.2em;
    color:var(--muted);text-transform:uppercase;
    margin-bottom:10px;
}
.contact-value{
    font-size:clamp(16px,1.6vw,20px);
    font-weight:500;
    color:var(--fg);
    transition:color .3s var(--ease);
    line-height:1.5;
}
a.contact-value:hover{color:var(--accent)}

.contact-form{
    background:var(--glass);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:48px;
    backdrop-filter:blur(20px);
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.form-field{
    position:relative;
    margin-bottom:32px;
}
.form-field label{
    display:block;
    font-family:'JetBrains Mono',monospace;
    font-size:11px;letter-spacing:.2em;
    color:var(--muted);
    margin-bottom:12px;
    text-transform:uppercase;
}
.form-field input,
.form-field select,
.form-field textarea{
    width:100%;
    padding:10px 0;
    font-size:15px;
    color:var(--fg);
    background:transparent;
    border-bottom:1px solid var(--line);
    transition:border-color .3s var(--ease);
    resize:vertical;
}
.form-field input::placeholder,
.form-field textarea::placeholder{color:var(--muted);opacity:.6}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{border-color:var(--accent)}
.field-line{
    position:absolute;left:0;bottom:-1px;
    width:0;height:1px;
    background:var(--accent);
    transition:width .4s var(--ease);
}
.form-field input:focus~.field-line,
.form-field select:focus~.field-line,
.form-field textarea:focus~.field-line{width:100%}
.form-field select{
    appearance:none;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300F0FF' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat:no-repeat;
    background-position:right 4px center;
    background-size:18px;
    padding-right:30px;
}
.form-note{
    margin-top:16px;
    font-size:12px;color:var(--muted);
    text-align:center;
}

@media (max-width:900px){
    .contact-grid{grid-template-columns:1fr;gap:60px}
    .contact-form{padding:32px 24px}
    .form-row{grid-template-columns:1fr;gap:0}
}

/* ---------- FOOTER ---------- */
.footer{
    position:relative;z-index:2;
    padding:80px 0 30px;
    background:var(--bg-soft);
    border-top:1px solid var(--line);
    overflow:hidden;
}
.footer-top{
    display:grid;grid-template-columns:1.5fr 2fr;
    gap:60px;
    padding-bottom:60px;
    border-bottom:1px solid var(--line);
}
.footer-logo{
    display:flex;align-items:center;gap:16px;
    margin-bottom:24px;
}
.logo-mark.big{font-size:48px}
.footer-tagline{
    color:var(--fg-soft);
    line-height:1.7;
    max-width:340px;
}
.footer-cols{
    display:grid;grid-template-columns:repeat(3,1fr);
    gap:30px;
}
.footer-col{display:flex;flex-direction:column;gap:12px}
.footer-label{
    font-family:'JetBrains Mono',monospace;
    font-size:11px;letter-spacing:.2em;
    color:var(--accent);
    margin-bottom:8px;
}
.footer-col a{font-size:14px;color:var(--fg-soft);transition:color .3s var(--ease),padding-left .3s var(--ease)}
.footer-col a:hover{color:var(--accent);padding-left:4px}

.footer-big{
    font-family:'Inter',sans-serif;
    font-size:clamp(80px,18vw,260px);
    font-weight:900;
    line-height:1;
    letter-spacing:-.04em;
    background:linear-gradient(180deg,var(--line-strong) 0%,transparent 100%);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
    text-align:center;
    margin:40px 0;
    user-select:none;
    white-space:nowrap;
    overflow:hidden;
}

.footer-bottom{
    display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px;
    padding-top:30px;
    font-family:'JetBrains Mono',monospace;
    font-size:11px;letter-spacing:.05em;
    color:var(--muted);
}
.footer-filing{
    display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 20px;
    padding-top:14px;margin-top:6px;
    border-top:1px solid var(--line);
    font-size:11px;color:var(--muted);
}
.footer-icp{
    display:inline-flex;align-items:center;gap:4px;
    color:var(--muted);text-decoration:none;
    transition:color .3s var(--ease);
}
.footer-icp:hover{color:var(--accent)}
.footer-icp:empty,.footer-psr:empty{display:none}
.footer-psr{display:inline-flex;align-items:center;gap:4px}

@media (max-width:900px){
    .footer-top{grid-template-columns:1fr;gap:40px}
    .footer-cols{grid-template-columns:repeat(2,1fr)}
}

/* ---------- 滚动进度 ---------- */
.scroll-progress{
    position:fixed;top:0;left:0;
    height:2px;
    background:var(--gradient);
    z-index:9999;
    width:0%;
    transition:width .1s linear;
    box-shadow:0 0 10px var(--accent);
}

/* ---------- 通用 Reveal 动效 ---------- */
[data-reveal]{
    opacity:0;
    transform:translateY(40px);
    transition:opacity 1s var(--ease),transform 1s var(--ease);
}
[data-reveal].revealed{opacity:1;transform:translateY(0)}

@media (prefers-reduced-motion:reduce){
    *{animation-duration:.01ms!important;transition-duration:.01ms!important}
    [data-reveal]{opacity:1;transform:none}
}

/* ---------- 滚动条 ---------- */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--accent)}

/* ---------- 文字分割入场 ---------- */
[data-split] span{
    display:inline-block;
    transform:translateY(110%);
    opacity:0;
}
[data-split].revealed span{
    animation:splitUp 1.2s var(--ease) forwards;
}
[data-split] span:nth-child(2){animation-delay:.1s}
[data-split] span:nth-child(3){animation-delay:.2s}
[data-split] span:nth-child(4){animation-delay:.3s}
@keyframes splitUp{
    0%{transform:translateY(110%);opacity:0}
    100%{transform:translateY(0);opacity:1}
}

/* ============================================================
   语言切换按钮
   ============================================================ */
.lang-toggle{
    display:flex;align-items:center;gap:8px;
    padding:7px 14px;
    background:var(--glass);
    border:1px solid var(--line);
    border-radius:30px;
    font-size:12px;font-weight:600;
    color:var(--fg-soft);
    transition:all .3s var(--ease);
}
.lang-toggle:hover{
    border-color:var(--accent);
    color:var(--accent);
}
.lang-icon{width:14px;height:14px}
.lang-current{min-width:48px;text-align:center}
.lang-arrow{font-size:14px;opacity:.6;transition:transform .3s var(--ease)}
.lang-toggle:hover .lang-arrow{transform:rotate(180deg)}

/* 维吾尔语时使用 Noto Naskh Arabic 字体 */
[lang="ug"] body,
[lang="ug"] .hero-title,
[lang="ug"] .section-title,
[lang="ug"] .service-title,
[lang="ug"] .cta-title,
[lang="ug"] .stat-num,
[lang="ug"] .process-num,
[lang="ug"] .contact-value,
[lang="ug"] .boot-logo,
[lang="ug"] .footer-big,
[lang="ug"] .marquee-track{
    font-family:'UKIJTor','Noto Naskh Arabic','Inter','Noto Sans SC',sans-serif;
}
[lang="ug"] .logo-zh,
[lang="ug"] .logo-en,
[lang="ug"] .service-en,
[lang="ug"] .section-num,
[lang="ug"] .meta-label,
[lang="ug"] .stat-label,
[lang="ug"] .contact-label,
[lang="ug"] .card-label,
[lang="ug"] .stack-label,
[lang="ug"] .footer-label,
[lang="ug"] .process-time,
[lang="ug"] .boot-text,
[lang="ug"] .hero-badge,
[lang="ug"] .hero-meta .meta-value,
[lang="ug"] .meta-label,
[lang="ug"] .hero-scroll,
[lang="ug"] .hero-marks,
[lang="ug"] .service-tags span,
[lang="ug"] .service-num,
[lang="ug"] .form-field label,
[lang="ug"] .form-note,
[lang="ug"] .footer-bottom,
[lang="ug"] .mobile-menu-footer,
[lang="ug"] .lang-current{
    font-family:'UKIJTor','JetBrains Mono','Noto Naskh Arabic',monospace;
}

/* ============================================================
   RTL 右到左布局 (维吾尔语)
   ============================================================ */
[dir="rtl"]{
    direction:rtl;
}

/* Nav 翻转 */
[dir="rtl"] .nav{direction:rtl}
[dir="rtl"] .nav-links{flex-direction:row-reverse}
[dir="rtl"] .nav-actions{flex-direction:row-reverse}
[dir="rtl"] .nav-logo{flex-direction:row-reverse}
[dir="rtl"] .nav-cta svg,
[dir="rtl"] .btn-magnetic svg{transform:scaleX(-1)}
[dir="rtl"] .nav-cta:hover svg,
[dir="rtl"] .btn-magnetic:hover svg{transform:scaleX(-1) translateX(3px)}

/* Hero 翻转 */
[dir="rtl"] .hero{text-align:right}
[dir="rtl"] .hero-badge{direction:rtl}
[dir="rtl"] .hero-sub-prefix{margin-right:0;margin-left:8px}
[dir="rtl"] .hero-meta{flex-direction:row-reverse}
[dir="rtl"] .hero-scroll{left:auto;right:var(--pad);flex-direction:row-reverse}
[dir="rtl"] .hero-marks{right:auto;left:var(--pad);align-items:flex-start}
[dir="rtl"] .hero-cta{flex-direction:row-reverse}
[dir="rtl"] .hero-title{text-align:right}

/* Section head */
[dir="rtl"] .section-head{text-align:right}
[dir="rtl"] .section-num{flex-direction:row-reverse}
[dir="rtl"] .section-num::after{
    background:linear-gradient(270deg,var(--accent),transparent);
}

/* About */
[dir="rtl"] .about-text{text-align:right}
[dir="rtl"] .dropcap{float:right;margin:6px 0 0 12px}
[dir="rtl"] .about-card .card-row{flex-direction:row-reverse}
[dir="rtl"] .about-card .card-value{text-align:left}

/* Stats */
[dir="rtl"] .stat:not(:last-child)::after{right:auto;left:0}

/* Services */
[dir="rtl"] .service-card{text-align:right}
[dir="rtl"] .service-flag{right:auto;left:24px}
[dir="rtl"] .service-num{left:auto;right:32px}
[dir="rtl"] .service-list li{padding-right:24px;padding-left:0}
[dir="rtl"] .service-list li::before{left:auto;right:0}
[dir="rtl"] .service-tags{flex-direction:row-reverse}

/* Process */
[dir="rtl"] .process-item{direction:rtl}
[dir="rtl"] .process-content{text-align:right}
[dir="rtl"] .process-item::before{left:auto;right:-20px}
[dir="rtl"] .process-item:hover{padding-left:0;padding-right:20px}

/* Stack */
[dir="rtl"] .stack-col{border-right:0;border-left:1px solid var(--line)}
[dir="rtl"] .stack-col:last-child{border-left:0}
[dir="rtl"] .stack-list li:hover{padding-left:0;padding-right:6px}
[dir="rtl"] .stack-label{text-align:right}

/* CTA */
[dir="rtl"] .cta-inner{text-align:right}
[dir="rtl"] .cta-title span{text-align:right}

/* Contact */
[dir="rtl"] .contact-info{text-align:right}
[dir="rtl"] .contact-grid{direction:rtl}
[dir="rtl"] .contact-form{text-align:right}
[dir="rtl"] .form-row{direction:rtl}
[dir="rtl"] .form-field input,
[dir="rtl"] .form-field textarea,
[dir="rtl"] .form-field select{text-align:right;direction:rtl}
[dir="rtl"] .form-field label{text-align:right}
[dir="rtl"] .form-field select{
    background-position:left 4px center;
    padding-left:30px;padding-right:0;
}

/* Footer */
[dir="rtl"] .footer{text-align:right}
[dir="rtl"] .footer-top{direction:rtl}
[dir="rtl"] .footer-logo{flex-direction:row-reverse}
[dir="rtl"] .footer-cols{direction:rtl}
[dir="rtl"] .footer-col a:hover{padding-left:0;padding-right:4px}
[dir="rtl"] .footer-bottom{flex-direction:row-reverse}

/* Mobile menu */
[dir="rtl"] .mobile-menu-list a{direction:rtl}
[dir="rtl"] .mobile-menu-footer{text-align:right}

/* Marquee 反向 */
[dir="rtl"] .marquee-track{animation-direction:reverse}

/* Scrollbar RTL */
[dir="rtl"] ::-webkit-scrollbar-track{direction:rtl}

/* General utilities for RTL */
[dir="rtl"] .btn-ghost .btn-line{transform:scaleX(-1)}
[dir="rtl"] .scroll-progress{left:auto;right:0}
[dir="rtl"] .theme-toggle{direction:ltr} /* 主题切换按钮保持 LTR */

/* 移动端 RTL 调整 */
@media (max-width:900px){
    [dir="rtl"] .nav-actions{flex-direction:row}
    [dir="rtl"] .nav-logo{flex-direction:row}
    [dir="rtl"] .footer-top{direction:rtl}
}

/* i18n 多行文本 */
.i18n-line{display:inline}

/* 语言切换时过渡 */
body{transition:all .3s ease}
[lang="ug"] body{letter-spacing:0}

