/* ============================================================
   海隅软件开发工作室 · 科幻主题样式
   ============================================================ */
:root{
    --bg:#04060f;
    --bg2:#080c1a;
    --panel:rgba(13,22,45,.55);
    --panel-border:rgba(86,140,255,.22);
    --cyan:#36e6ff;
    --blue:#4d7cff;
    --purple:#a855f7;
    --pink:#ff3d9a;
    --text:#d4e6ff;
    --muted:#7e93bd;
    --glow:0 0 24px rgba(54,230,255,.35);
    --radius:18px;
    --maxw:1180px;
    --ease:cubic-bezier(.22,1,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
    background:var(--bg);
    color:var(--text);
    overflow-x:hidden;
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:"Orbitron","Noto Sans SC",sans-serif;font-weight:700;letter-spacing:.5px}
::selection{background:var(--cyan);color:#04060f}

/* ---------- 背景层 ---------- */
.bg-grid{
    position:fixed;inset:0;z-index:-3;
    background-image:
        linear-gradient(rgba(77,124,255,.06) 1px,transparent 1px),
        linear-gradient(90deg,rgba(77,124,255,.06) 1px,transparent 1px);
    background-size:48px 48px;
    mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 30%,transparent 80%);
    animation:gridmove 18s linear infinite;
}
@keyframes gridmove{to{background-position:0 48px,48px 0}}
.bg-glow{position:fixed;z-index:-2;border-radius:50%;filter:blur(90px);opacity:.5;pointer-events:none}
.glow-1{width:520px;height:520px;background:radial-gradient(circle,#1b4dff,transparent 70%);top:-160px;left:-120px}
.glow-2{width:560px;height:560px;background:radial-gradient(circle,#a855f7,transparent 70%);bottom:-200px;right:-140px;opacity:.4}
.bg-scan{
    position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.35;
    background:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px);
    mix-blend-mode:overlay;
}
#particles{position:fixed;inset:0;z-index:-1;opacity:.65;pointer-events:none}

/* ---------- 加载动画 ---------- */
.preloader{
    position:fixed;inset:0;z-index:999;background:var(--bg);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
    transition:opacity .6s var(--ease),visibility .6s;
}
.preloader.hide{opacity:0;visibility:hidden}
.loader-ring{
    width:64px;height:64px;border-radius:50%;
    border:3px solid rgba(54,230,255,.15);
    border-top-color:var(--cyan);border-right-color:var(--purple);
    animation:spin 1s linear infinite;
    box-shadow:var(--glow);
}
@keyframes spin{to{transform:rotate(360deg)}}
.loader-text{font-family:"Orbitron";letter-spacing:3px;color:var(--cyan);font-size:13px}
.loader-text i{animation:blink 1.2s infinite}
.loader-text i:nth-child(2){animation-delay:.2s}
.loader-text i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,100%{opacity:.2}50%{opacity:1}}

/* ---------- 导航 ---------- */
.nav{
    position:fixed;top:0;left:0;right:0;z-index:100;
    display:flex;align-items:center;justify-content:space-between;
    padding:18px clamp(18px,5vw,48px);
    transition:background .4s,backdrop-filter .4s,padding .4s,border-color .4s;
    border-bottom:1px solid transparent;
}
.nav.scrolled{
    background:rgba(4,6,15,.72);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--panel-border);
    padding-top:12px;padding-bottom:12px;
}
.nav-logo{display:flex;align-items:center;gap:10px;font-family:"Orbitron";font-weight:700}
.logo-mark{
    width:32px;height:32px;flex:0 0 auto;
    filter:drop-shadow(0 0 6px rgba(54,230,255,.5));
    animation:logoPulse 3s ease-in-out infinite;
}
@keyframes logoPulse{50%{transform:scale(1.08)}}
.footer-brand .logo-mark{width:40px;height:40px;margin-bottom:8px}
.logo-text{font-size:17px;letter-spacing:.5px}
.nav-links{display:flex;gap:30px}
.nav-links a{font-size:14px;color:var(--muted);position:relative;transition:color .3s}
.nav-links a::after{
    content:"";position:absolute;left:0;bottom:-6px;width:0;height:2px;
    background:linear-gradient(90deg,var(--cyan),var(--purple));transition:width .3s var(--ease);
}
.nav-links a:hover{color:var(--text)}
.nav-links a:hover::after{width:100%}
.nav-cta{
    padding:9px 20px;border-radius:30px;font-size:13px;
    border:1px solid var(--cyan);color:var(--cyan);
    transition:.3s var(--ease);box-shadow:0 0 0 rgba(54,230,255,0);
}
.nav-cta:hover{background:var(--cyan);color:#04060f;box-shadow:var(--glow)}
.nav-toggle{display:none;background:none;border:none;color:var(--text);font-size:24px;cursor:pointer}

/* 语言切换按钮 */
.lang-switch{
    padding:7px 14px;border-radius:30px;font-size:12px;letter-spacing:1px;
    border:1px solid var(--panel-border);color:var(--muted);
    font-family:"Orbitron",sans-serif;transition:.3s var(--ease);white-space:nowrap;
}
.lang-switch:hover{color:var(--cyan);border-color:var(--cyan);box-shadow:var(--glow)}
/* 英文页长标题字距收敛 */
.lang-en .hero-title .line2{letter-spacing:2px}
.lang-en .hero-sub{font-size:clamp(14px,1.9vw,18px)}

/* ---------- 英雄区 ---------- */
.hero{
    min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;padding:120px 20px 60px;position:relative;
}
.hero-inner{max-width:880px}
.hero-tag{
    font-family:"Orbitron";color:var(--cyan);letter-spacing:4px;font-size:13px;
    margin-bottom:22px;opacity:0;animation:fadeUp .8s .2s var(--ease) forwards;
}
.hero-title{display:flex;flex-direction:column;gap:6px;margin-bottom:24px}
.line1{
    font-size:clamp(38px,7vw,86px);line-height:1.05;
    background:linear-gradient(120deg,#fff,#9fd8ff 40%,var(--cyan));
    -webkit-background-clip:text;background-clip:text;color:transparent;
    text-shadow:0 0 40px rgba(54,230,255,.25);
    opacity:0;animation:fadeUp .9s .35s var(--ease) forwards;
}
.line2{
    font-size:clamp(15px,2.4vw,26px);letter-spacing:8px;color:var(--muted);
    font-weight:500;opacity:0;animation:fadeUp .9s .5s var(--ease) forwards;
}
.hero-sub{
    font-size:clamp(15px,2vw,19px);color:var(--text);max-width:620px;margin:0 auto 36px;
    opacity:0;animation:fadeUp .9s .65s var(--ease) forwards;
}
.hero-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;
    opacity:0;animation:fadeUp .9s .8s var(--ease) forwards}
.btn{
    padding:13px 28px;border-radius:30px;font-size:15px;font-weight:500;
    display:inline-flex;align-items:center;gap:8px;cursor:pointer;transition:.3s var(--ease);
}
.btn-primary{
    background:linear-gradient(120deg,var(--cyan),var(--blue));
    color:#04060f;box-shadow:0 8px 30px rgba(54,230,255,.35);
}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 14px 40px rgba(54,230,255,.5)}
.btn-primary span{transition:transform .3s}
.btn-primary:hover span{transform:translateX(4px)}
.btn-ghost{border:1px solid var(--panel-border);color:var(--text)}
.btn-ghost:hover{border-color:var(--cyan);color:var(--cyan);box-shadow:var(--glow)}

.hero-stats{
    display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:64px;max-width:720px;
    opacity:0;animation:fadeUp 1s 1s var(--ease) forwards;
}
.stat{display:flex;flex-direction:column;align-items:center;padding:18px 10px;
    border:1px solid var(--panel-border);border-radius:14px;background:var(--panel);backdrop-filter:blur(6px)}
.stat b{font-family:"Orbitron";font-size:clamp(26px,4vw,40px);color:var(--cyan);
    text-shadow:0 0 18px rgba(54,230,255,.4)}
.stat span{font-size:12px;color:var(--muted);margin-top:4px}

.scroll-hint{position:absolute;bottom:26px;display:flex;flex-direction:column;align-items:center;gap:8px;
    font-family:"Orbitron";font-size:10px;letter-spacing:3px;color:var(--muted)}
.scroll-hint span{width:22px;height:36px;border:1px solid var(--muted);border-radius:14px;position:relative}
.scroll-hint span::after{content:"";position:absolute;top:7px;left:50%;transform:translateX(-50%);
    width:3px;height:7px;border-radius:3px;background:var(--cyan);animation:scrolldot 1.6s infinite}
@keyframes scrolldot{0%{opacity:0;top:7px}40%{opacity:1}80%{opacity:0;top:20px}100%{opacity:0}}

/* ---------- 通用 section ---------- */
.section{max-width:var(--maxw);margin:0 auto;padding:110px clamp(18px,5vw,32px)}
.section.alt{position:relative}
.section.alt::before{
    content:"";position:absolute;inset:0;z-index:-1;
    background:linear-gradient(180deg,transparent,rgba(13,22,45,.4),transparent);
}
.section-head{margin-bottom:54px;max-width:640px}
.sec-index{font-family:"Orbitron";color:var(--cyan);font-size:14px;letter-spacing:3px;
    border-left:3px solid var(--cyan);padding-left:12px;margin-bottom:14px;display:inline-block}
.section-head h2{font-size:clamp(28px,4vw,44px);margin-bottom:12px;
    background:linear-gradient(120deg,#fff,var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.section-head p{color:var(--muted)}

/* ---------- 服务卡片 ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{
    position:relative;padding:30px 26px;border-radius:var(--radius);
    background:var(--panel);border:1px solid var(--panel-border);
    backdrop-filter:blur(8px);overflow:hidden;transition:.4s var(--ease);
}
.card::before{
    content:"";position:absolute;inset:0;border-radius:var(--radius);padding:1px;
    background:linear-gradient(135deg,var(--cyan),transparent 40%,transparent 60%,var(--purple));
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .4s;
}
.card:hover{transform:translateY(-8px);box-shadow:0 20px 50px rgba(0,0,0,.45)}
.card:hover::before{opacity:1}
.card-icon{font-size:34px;margin-bottom:16px;filter:drop-shadow(0 0 10px rgba(54,230,255,.5))}
.card h3{font-size:19px;margin-bottom:10px;color:#fff}
.card p{color:var(--muted);font-size:14px}
.card-line{height:2px;width:40px;background:linear-gradient(90deg,var(--cyan),var(--purple));
    margin-top:18px;border-radius:2px;transition:width .4s var(--ease)}
.card:hover .card-line{width:100%}

/* ---------- 技术栈 ---------- */
.tech-wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.tech-col{padding:26px 22px;border-radius:var(--radius);background:var(--panel);
    border:1px solid var(--panel-border);transition:.4s var(--ease)}
.tech-col:hover{border-color:var(--cyan);box-shadow:var(--glow);transform:translateY(-5px)}
.tech-col h4{color:var(--cyan);font-size:16px;margin-bottom:14px;font-family:"Orbitron"}
.tech-col ul{list-style:none}
.tech-col li{padding:8px 0;color:var(--text);font-size:14px;border-bottom:1px solid rgba(255,255,255,.05);
    transition:padding-left .3s,color .3s}
.tech-col li:last-child{border-bottom:none}
.tech-col li:hover{padding-left:8px;color:var(--cyan)}

/* ---------- 关于 ---------- */
.about-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:50px;align-items:center}
.about-text h2{font-size:clamp(28px,4vw,42px);margin:14px 0 18px;
    background:linear-gradient(120deg,#fff,var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.about-text p{color:var(--muted);margin-bottom:14px}
.about-points{margin-top:20px;display:flex;flex-direction:column;gap:10px}
.about-points div{display:flex;align-items:center;gap:10px;font-size:15px}
.about-points span{color:var(--cyan);font-weight:700}
.about-visual{display:flex;justify-content:center;align-items:center;min-height:320px}
.orbit{position:relative;width:280px;height:280px;display:flex;align-items:center;justify-content:center}
.orbit-core{
    width:96px;height:96px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    font-family:"Orbitron";font-size:22px;color:#04060f;font-weight:700;
    background:linear-gradient(135deg,var(--cyan),var(--blue));box-shadow:0 0 40px rgba(54,230,255,.6);
    z-index:2;
}
.orbit-ring{position:absolute;border:1px solid var(--panel-border);border-radius:50%}
.orbit-ring i{position:absolute;top:-5px;left:50%;width:10px;height:10px;border-radius:50%;
    background:var(--cyan);box-shadow:0 0 14px var(--cyan)}
.r1{width:160px;height:160px;animation:spin 9s linear infinite}
.r2{width:220px;height:220px;animation:spin 14s linear infinite reverse;border-color:rgba(168,85,247,.3)}
.r2 i{background:var(--purple);box-shadow:0 0 14px var(--purple)}
.r3{width:280px;height:280px;animation:spin 20s linear infinite;border-color:rgba(77,124,255,.25)}
.r3 i{background:var(--blue);box-shadow:0 0 14px var(--blue)}

/* ---------- 联系 ---------- */
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.contact-card{padding:34px 26px;border-radius:var(--radius);background:var(--panel);
    border:1px solid var(--panel-border);text-align:center;transition:.4s var(--ease)}
.contact-card:hover{transform:translateY(-6px);border-color:var(--cyan);box-shadow:var(--glow)}
.contact-ico{font-size:36px;margin-bottom:14px}
.contact-card h4{color:var(--cyan);font-size:15px;letter-spacing:2px;margin-bottom:8px;font-family:"Orbitron"}
.contact-card p{color:var(--text);margin-bottom:14px;word-break:break-all}
.copy-btn{padding:7px 18px;border-radius:20px;border:1px solid var(--panel-border);
    background:transparent;color:var(--muted);cursor:pointer;font-size:13px;transition:.3s}
.copy-btn:hover{border-color:var(--cyan);color:var(--cyan)}
.tag{display:inline-block;padding:6px 14px;border-radius:20px;font-size:12px;
    border:1px solid var(--panel-border);color:var(--muted)}

/* ---------- 页脚 ---------- */
.footer{max-width:var(--maxw);margin:0 auto;padding:60px clamp(18px,5vw,32px) 40px;
    border-top:1px solid var(--panel-border);text-align:center}
.footer-top{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:26px}
.footer-brand{display:flex;align-items:center;gap:10px;font-family:"Orbitron";font-size:20px}
.footer-slogan{color:var(--muted);font-size:14px}
.footer-links{display:flex;gap:26px;justify-content:center;flex-wrap:wrap;margin-bottom:28px}
.footer-links a{color:var(--muted);font-size:14px;transition:color .3s}
.footer-links a:hover{color:var(--cyan)}
.footer-legal{display:flex;flex-direction:column;align-items:center;gap:14px;font-size:13px;color:var(--muted)}
.icp-badge{
    display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:30px;
    border:1px solid var(--cyan);color:var(--cyan);font-size:13px;letter-spacing:1px;
    background:rgba(54,230,255,.08);transition:.3s var(--ease);box-shadow:0 0 0 rgba(54,230,255,0);
}
.icp-badge:hover{background:var(--cyan);color:#04060f;box-shadow:var(--glow);transform:translateY(-2px)}
.icp-dot{width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor;
    animation:pulse 2s infinite}

/* 访问量计数器 */
.footer-counter{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:18px;
    font-size:13px;color:var(--muted)}
.footer-counter b{font-family:"Orbitron";color:var(--cyan);font-size:16px;margin-left:5px;
    text-shadow:0 0 12px rgba(54,230,255,.45)}
.fc-sep{color:var(--panel-border)}

/* 备案徽章容器 */
.footer-badges{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:4px}
.gaan-badge{
    display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:30px;
    border:1px solid var(--purple);color:var(--purple);font-size:13px;letter-spacing:1px;
    background:rgba(168,85,247,.08);transition:.3s var(--ease);box-shadow:0 0 0 rgba(168,85,247,0);
}
.gaan-badge:hover{background:var(--purple);color:#04060f;box-shadow:0 0 18px rgba(168,85,247,.5);transform:translateY(-2px)}
.gaan-ico{filter:drop-shadow(0 0 4px currentColor)}

/* ---------- 滚动揭示 ---------- */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}

@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}

/* ---------- 响应式 ---------- */
@media (max-width:900px){
    .cards,.tech-wrap,.contact-grid{grid-template-columns:repeat(2,1fr)}
    .about-grid{grid-template-columns:1fr}
    .nav-links{display:none}
    .nav-toggle{display:block}
    .nav.menu-open .nav-links{
        display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;
        background:rgba(4,6,15,.96);padding:20px 30px;gap:18px;border-bottom:1px solid var(--panel-border)
    }
    .hero-stats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
    .cards,.tech-wrap,.contact-grid{grid-template-columns:1fr}
    .hero-stats{grid-template-columns:repeat(2,1fr)}
    .line2{letter-spacing:4px}
}