:root{
  --bg:#060912;
  --bg2:#0a1224;
  --panel:rgba(255,255,255,0.06);
  --text:#eef2ff;
  --muted:#a7b0c7;
  --accent1:#00e1ff;
  --accent2:#7c4dff;
  --border:rgba(255,255,255,0.12);
  --card-border:linear-gradient(90deg, rgba(0,225,255,.5), rgba(124,77,255,.5));
  --shadow:0 10px 30px rgba(0,0,0,.35);
  /* SVG text colors (dark theme defaults) */
  --svg-t:#eef2ff;
  --svg-m:#a7b0c7;
}

body[data-theme="light"]{
  --bg:#f7f9fc;
  --bg2:#ffffff;
  --panel:rgba(0,0,0,0.04);
  --text:#0b1220;
  --muted:#445168;
  --accent1:#006dff;
  --accent2:#7c4dff;
  --border:rgba(0,0,0,0.12);
  --card-border:linear-gradient(90deg, rgba(0,109,255,.5), rgba(124,77,255,.5));
  --shadow:0 10px 30px rgba(0,0,0,.10);
  /* Force hero SVG text to solid black in light theme */
  --svg-t:#000000;
  --svg-m:#000000;
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, PingFang SC, "Noto Sans CJK SC", "Microsoft YaHei", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 85% -10%, rgba(124,77,255,.25), transparent 60%),
    radial-gradient(900px 600px at 10% 120%, rgba(0,225,255,.22), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  overflow-x:hidden;
}

/* Ambient grid + orbs */
body::before, body::after{
  content:""; position:fixed; inset:-10%; pointer-events:none; z-index:-1;
}
body::before{
  background-image:
    linear-gradient(rgba(255,255,255,.06), rgba(255,255,255,.06)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.06) 1px, transparent 1px, transparent 40px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.06), rgba(255,255,255,.06) 1px, transparent 1px, transparent 40px);
  mix-blend-mode: overlay; opacity:.08;
}
body[data-theme="light"]::before{
  background-image:
    linear-gradient(rgba(0,0,0,.06), rgba(0,0,0,.06)),
    repeating-linear-gradient(90deg, rgba(0,0,0,.06), rgba(0,0,0,.06) 1px, transparent 1px, transparent 40px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.06), rgba(0,0,0,.06) 1px, transparent 1px, transparent 40px);
}
@keyframes floatOrb{ 0%{transform:translate(-2%, -1%) scale(1)} 50%{transform:translate(1%, 2%) scale(1.03)} 100%{transform:translate(-2%, -1%) scale(1)} }
body::after{
  background:
    radial-gradient(600px 400px at 20% 80%, rgba(0,225,255,.14), transparent 60%),
    radial-gradient(700px 520px at 80% 10%, rgba(124,77,255,.18), transparent 65%);
  animation: floatOrb 10s ease-in-out infinite;
}
body[data-theme="light"]::after{
  background:
    radial-gradient(600px 400px at 20% 80%, rgba(0,109,255,.10), transparent 60%),
    radial-gradient(700px 520px at 80% 10%, rgba(124,77,255,.14), transparent 65%);
}

.container{max-width:1180px;margin:0 auto;padding:0 24px}

/* Header: transparent gradient -> solid; plus shrink animation */
.header{
  position:sticky;top:0;z-index:20;
  background:linear-gradient(180deg, rgba(6,9,18,.75), rgba(6,9,18,0));
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid transparent;
  transition: background .28s ease, border-color .28s ease, box-shadow .28s ease;
}
body[data-theme="light"] .header{ background:linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,0)); }
.header.solid{
  background:rgba(6,9,18,.92);
  border-bottom-color:var(--border);
  box-shadow:var(--shadow);
}
body[data-theme="light"] .header.solid{ background:rgba(255,255,255,.92); }
.header-inner{
  display:flex;align-items:center;gap:16px;
  padding:14px 0;
  transition: padding .28s ease;
}
.header.shrink .header-inner{ padding:6px 0; }

.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}
.brand img{width:30px;height:30px;transition: width .28s ease, height .28s ease}
.header.shrink .brand img{width:22px;height:22px}
.brand strong{font-size:18px;letter-spacing:.4px;transition: font-size .28s ease}
.header.shrink .brand strong{font-size:16px}

.nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto}
.nav a{
  color:var(--muted);text-decoration:none;padding:8px 10px;border-radius:10px;border:1px solid transparent;
  transition:background .2s ease, color .2s ease, border-color .2s ease, padding .28s ease
}
.header.shrink .nav a{ padding:6px 8px }
.nav a.active{color:var(--text);border-color:var(--border);background:var(--panel)}
.nav-toggle{display:none}
.lang-toggle,.theme-toggle{
  appearance:none;border:none;background:var(--panel); color:var(--text);
  padding:8px 14px;border-radius:999px;cursor:pointer;border:1px solid var(--border);
  font-weight:700;margin-left:8px;transition: padding .28s ease
}
.header.shrink .lang-toggle,.header.shrink .theme-toggle{ padding:6px 12px }

@media (max-width: 940px){
  .nav{display:none;position:absolute;right:16px;top:58px;background:linear-gradient(180deg, rgba(6,9,18,.96), rgba(6,9,18,.75));border:1px solid var(--border);border-radius:12px;padding:10px;min-width:270px;box-shadow:var(--shadow)}
  body[data-theme="light"] .nav{ background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.75)); }
  .nav.open{display:grid}
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;border:1px solid var(--border);background:var(--panel);color:var(--text);cursor:pointer;margin-left:auto;transition: width .28s ease, height .28s ease}
  .header.shrink .nav-toggle{width:34px;height:34px}
}

.hero{
  position:relative;
  display:grid;grid-template-columns:1.1fr .9fr;gap:34px;align-items:center;padding:46px 0 24px;
  overflow:hidden;
}
@media (max-width: 980px){ .hero{grid-template-columns:1fr} .hero-visual{order:-1} }
.badge{display:inline-flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--border);padding:6px 10px;border-radius:999px;color:var(--muted);font-size:12px}
h1{font-size:44px;margin:14px 0 10px;line-height:1.15}
.lead{color:var(--muted);font-size:17px;line-height:1.65}

/* Particles canvas */
.particles{position:absolute;inset:0;z-index:-1;opacity:.7;mix-blend-mode:screen}
body[data-theme="light"] .particles{mix-blend-mode:normal;opacity:.5}

.hero-visual{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04));
  border:1px solid var(--border); border-radius:16px; padding:12px; box-shadow:var(--shadow)
}
.hero-visual svg{display:block;width:100%;height:auto}

/* Sections */
.section{padding:50px 0 18px}
.section header{display:flex;align-items:end;justify-content:space-between;gap:10px;margin-bottom:12px}
.section h2{
  font-size:24px;margin:0 0 6px;
  background:linear-gradient(90deg,var(--accent1),var(--accent2));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.section .muted{color:var(--muted);font-size:14px}

/* Cards */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:980px){.card-grid{grid-template-columns:1fr}}
.card{
  position:relative;
  background:var(--panel); border:1px solid var(--border); padding:18px;border-radius:16px; box-shadow:var(--shadow);
  overflow:hidden;
}
.card::after{
  content:""; position:absolute; inset:-1px;
  background:linear-gradient(90deg, rgba(0,225,255,.25), rgba(124,77,255,.25));
  opacity:.0; border-radius:16px; z-index:-1; transition:opacity .25s ease;
}
.card:hover::after{ opacity:.4 }
.card h3{margin:0 0 8px;font-size:18px;color:var(--text)}
.card p{margin:0;color:var(--muted);line-height:1.65}

.kv{font-weight:800}
.small{font-size:12px;color:var(--muted)}

/* Footer center layout */
.footer{
  border-top:1px solid var(--border); margin-top:44px; padding:30px 0 60px;color:var(--muted);
  display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center
}
.contact-card{
  position:relative;display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:center;
  border-radius:16px;padding:18px;border:1px solid transparent;
  background:linear-gradient(var(--bg2), var(--bg2)) padding-box, var(--card-border) border-box;
  box-shadow:var(--shadow);max-width:780px
}
.contact-card .icon{
  width:42px;height:42px;border-radius:12px;
  background:linear-gradient(135deg, rgba(0,225,255,.12), rgba(124,77,255,.12));
  display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border)
}
.contact-card .button{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  padding:12px 16px;border-radius:12px;border:1px solid var(--border);background:var(--panel);
  color:var(--text);font-weight:800
}
.copyright{color:var(--muted);font-size:13px}

/* Scroll reveal */
.revealable{opacity:0; transform: translateY(10px); transition: opacity .6s ease, transform .6s ease}
.revealable.revealed{opacity:1; transform:none}