:root{
  --bg:#07090d;
  --bg2:#0b0e14;
  --panel:#11141b;
  --text:#f5f7fa;
  --muted:#a7acb8;
  --line:rgba(255,255,255,.10);
  --violet:#8b78ff;
  --cyan:#6ad8d0;
  --pink:#dba2ff;
  --blue:#5b88ff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);overflow-x:hidden;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  letter-spacing:.01em;
}
.nav, main, .footer{position:relative;z-index:2}
a{color:inherit;text-decoration:none}
button{font:inherit}
.wrap{width:min(1480px,90vw);margin:auto}
.nav{
  position:fixed;z-index:50;top:0;left:0;right:0;height:74px;
  display:flex;align-items:center;border-bottom:1px solid rgba(255,255,255,.08);
  background:rgba(7,9,13,.70);backdrop-filter:blur(18px)
}
.nav .wrap{display:flex;justify-content:space-between;align-items:center}
.brand{font-weight:800;letter-spacing:.16em;font-size:18px}
.brand span{font-weight:400;color:#9ca2af;margin-left:12px;letter-spacing:.08em;font-size:13px}
.links{display:flex;align-items:center;gap:26px;font-size:14px;color:#c5c8d0}
.links a:hover{color:white}
.pill{padding:10px 16px;border:1px solid rgba(255,255,255,.18);border-radius:999px}
.hero{
  min-height:100vh;padding:145px 0 70px;position:relative;overflow:hidden;
  display:flex;align-items:center
}
.hero:before{
  content:"";position:absolute;inset:auto -12vw 6vh auto;width:62vw;height:62vw;border-radius:50%;
  background:
    radial-gradient(circle at 34% 30%, rgba(106,216,208,.20), transparent 26%),
    radial-gradient(circle at 58% 42%, rgba(139,120,255,.34), transparent 38%),
    radial-gradient(circle at 72% 66%, rgba(219,162,255,.14), transparent 28%);
  filter:blur(14px)
}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:6vw;align-items:center;position:relative;z-index:1}
.kicker{font-size:13px;letter-spacing:.20em;color:#b5bac4;text-transform:uppercase}
h1{
  font-size:clamp(50px,5.8vw,96px);line-height:.92;letter-spacing:-.05em;
  margin:18px 0 28px;font-weight:650
}
.gradient{
  background:linear-gradient(90deg,#fff 3%,#bcc5ff 37%,#6fe0d6 68%,#dda7ff);
  -webkit-background-clip:text;color:transparent
}
.hero p{font-size:18px;line-height:1.85;color:#c3c7cf;max-width:780px}
.hero-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.hero-tag{
  font-size:12px;color:#c6cad3;border:1px solid rgba(255,255,255,.12);
  border-radius:999px;padding:8px 12px;background:rgba(255,255,255,.02)
}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.btn{padding:13px 18px;border-radius:999px;border:1px solid var(--line);font-size:14px}
.btn.primary{background:#fff;color:#0a0b0e;border-color:#fff}
.hero-visual{
  height:620px;border-radius:32px;border:1px solid var(--line);overflow:hidden;position:relative;
  background:linear-gradient(145deg,rgba(17,21,33,.78),rgba(11,13,18,.9) 58%,rgba(17,20,29,.84));
  box-shadow:0 40px 100px rgba(0,0,0,.35)
}
.hero-visual .label{position:absolute;left:28px;top:26px;color:#aab0bc;font-size:12px;letter-spacing:.18em}
.space-box{
  position:absolute;left:7%;bottom:7%;width:60%;height:58%;border:1px solid rgba(255,255,255,.13);
  background:
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(0deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:48px 48px;transform:perspective(700px) rotateY(12deg) rotateX(4deg)
}
.toy{
  position:absolute;right:9%;bottom:8%;width:215px;height:290px;border-radius:120px 120px 72px 72px;
  background:linear-gradient(160deg,#f3f3f6,#aeb3c2 55%,#4b4f5c);
  box-shadow:0 0 90px rgba(139,120,255,.28)
}
.toy:before{
  content:"";position:absolute;width:150px;height:150px;border-radius:50%;left:32px;top:-38px;
  background:radial-gradient(circle at 42% 34%,#fff,#b7bdca 58%,#565b68)
}
.toy:after{
  content:"AI";position:absolute;left:82px;top:31px;color:#181b22;font-size:31px;font-weight:800;letter-spacing:.06em
}
.glow{
  position:absolute;right:5%;top:8%;width:290px;height:290px;border-radius:50%;
  background:radial-gradient(circle,rgba(106,216,208,.40),rgba(139,120,255,.22),transparent 70%);
  filter:blur(6px)
}
.section{padding:112px 0;border-top:1px solid rgba(255,255,255,.07)}
.section-head{display:flex;justify-content:space-between;gap:36px;align-items:flex-end;margin-bottom:42px}
.eyebrow{font-size:12px;letter-spacing:.18em;color:#9aa0ad;text-transform:uppercase}
h2{font-size:clamp(44px,5vw,74px);line-height:1.03;letter-spacing:-.045em;margin:10px 0 0;font-weight:620}
.desc{max-width:620px;color:#aeb3be;font-size:16px;line-height:1.82}
.experience-layout{display:grid;grid-template-columns:1.55fr .75fr;gap:18px;align-items:stretch}
.business{
  border:1px solid var(--line);border-radius:28px;padding:32px;background:linear-gradient(145deg,rgba(15,19,26,.70),rgba(10,13,18,.84));
  overflow:hidden;position:relative;height:100%;display:flex;flex-direction:column
}
.business:before{
  content:"";position:absolute;right:-80px;top:-80px;width:240px;height:240px;border-radius:50%;
  background:radial-gradient(circle,rgba(91,136,255,.14),transparent 68%)
}
.business h3{font-size:34px;margin:10px 0 12px;letter-spacing:-.03em}
.business p{color:#a9afba;line-height:1.78}
.space-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px;flex:1}
.narrative-grid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:26px;flex:1}
.narrative-business .subcard{min-height:260px}
.subcard{
  min-height:225px;border:1px solid rgba(255,255,255,.09);border-radius:20px;padding:22px;
  background:linear-gradient(145deg,rgba(20,24,32,.78),rgba(12,15,20,.88))
}
.subcard .num{font-size:12px;color:#838a98}
.subcard h4{font-size:20px;margin:34px 0 10px}
.subcard p{font-size:14px;color:#969daa;line-height:1.7}
.tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.tag{font-size:12px;color:#c3c7cf;border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:7px 10px}
.core{
  position:relative;border:1px solid var(--line);border-radius:30px;padding:42px;overflow:hidden;
  background:
    radial-gradient(circle at 82% 25%,rgba(139,120,255,.24),transparent 27%),
    radial-gradient(circle at 70% 74%,rgba(106,216,208,.17),transparent 30%),
    #0d1016;
}
.core-grid{display:grid;grid-template-columns:.88fr 1.12fr;gap:56px;align-items:center}
.core h3{font-size:clamp(42px,5vw,70px);letter-spacing:-.045em;margin:10px 0 16px}
.core-copy{color:#b5bac4;line-height:1.82}
.chip{
  min-height:430px;border-radius:28px;border:1px solid rgba(255,255,255,.12);position:relative;overflow:hidden;
  background:
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(0deg,rgba(255,255,255,.03) 1px,transparent 1px),
    #10141b;
  background-size:44px 44px
}
.chip-box{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:210px;height:210px;border-radius:32px;
  border:1px solid rgba(255,255,255,.20);
  background:linear-gradient(145deg,#202633,#111720);box-shadow:0 0 80px rgba(106,216,208,.15)
}
.chip-box:before,.chip-box:after{content:"";position:absolute;inset:18px;border:1px solid rgba(255,255,255,.12);border-radius:24px}
.chip-title{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;font-weight:750;letter-spacing:.04em}
.feature-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:28px}
.feature{border-top:1px solid var(--line);padding-top:15px;color:#aab0bc;font-size:13px;line-height:1.6}
.feature b{display:block;color:#fff;margin-bottom:6px;font-size:15px}
.products{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px}
.product{
  min-height:420px;border:1px solid var(--line);border-radius:24px;overflow:hidden;background:rgba(13,16,22,.78);
  display:flex;flex-direction:column
}
.product-visual{
  flex:1;min-height:250px;
  background:
    radial-gradient(circle at 30% 30%,rgba(91,136,255,.28),transparent 26%),
    radial-gradient(circle at 72% 60%,rgba(219,162,255,.22),transparent 28%),
    linear-gradient(145deg,#171b25,#0c0f14)
}
.product-copy{padding:23px}
.product-copy .mini{font-size:12px;color:#888f9d;letter-spacing:.14em;text-transform:uppercase}
.product-copy h4{font-size:23px;margin:9px 0 8px}
.product-copy p{font-size:14px;line-height:1.7;color:#9ea4b0}
.tabs{display:flex;gap:10px;margin-bottom:22px}
.tab{
  background:transparent;color:#afb5c0;border:1px solid rgba(255,255,255,.12);
  border-radius:999px;padding:10px 16px;cursor:pointer
}
.tab.active{background:white;color:#0a0b0e;border-color:white}
.case-panel{display:none}
.case-panel.active{display:grid}
.case-grid-culture{grid-template-columns:repeat(4,1fr);gap:18px}
.case-grid-ai{grid-template-columns:repeat(2,1fr);gap:18px}
.case{
  min-height:330px;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:#0e1117
}
.case.large{min-height:360px}
.case-visual{
  height:66%;
  background:
  radial-gradient(circle at 24% 30%,rgba(91,136,255,.28),transparent 26%),
  radial-gradient(circle at 78% 58%,rgba(219,162,255,.20),transparent 28%),
  linear-gradient(145deg,#171c26,#0c0f14)
}
.case-copy{padding:20px 22px}
.case-copy b{font-size:19px;line-height:1.35;display:block}
.case-copy span{display:block;font-size:13px;color:#8f96a3;margin-top:8px;line-height:1.6}
.about-box{
  border:1px solid var(--line);border-radius:28px;padding:44px;
  background:linear-gradient(145deg,rgba(17,21,29,.72),rgba(11,13,18,.86))
}
.bigline{font-size:clamp(42px,5.8vw,82px);line-height:1.02;letter-spacing:-.05em;max-width:1100px}
.about-copy{margin-top:28px;max-width:820px;color:#aab0bc;line-height:1.85}
.footer{padding:70px 0 40px;border-top:1px solid var(--line)}
.footergrid{display:flex;justify-content:space-between;gap:30px;align-items:flex-end}
.footer h3{font-size:32px;margin:0 0 8px}
.muted{color:#8e95a2;font-size:13px}
.about-head{align-items:flex-start}
.about-origin{
  max-width:560px;border-left:1px solid rgba(255,255,255,.14);padding-left:26px;
  display:flex;flex-direction:column;gap:8px;color:#aeb3be;line-height:1.75
}
.about-origin b{color:#fff;font-size:19px}
.about-profile{display:grid;grid-template-columns:.9fr 1.1fr;gap:18px}
.about-intro,
.values-panel{
  border:1px solid var(--line);border-radius:26px;padding:34px;
  background:linear-gradient(145deg,rgba(17,21,29,.78),rgba(11,14,19,.88))
}
.about-intro h3,.values-panel h3{font-size:32px;margin:10px 0 16px;letter-spacing:-.03em}
.about-intro p,.values-panel p{color:#aab0bc;line-height:1.85;margin:0}
.about-businesses{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.about-business-card{
  border:1px solid var(--line);border-radius:26px;padding:30px;background:linear-gradient(145deg,rgba(18,23,33,.74),rgba(12,15,20,.88))
}
.about-index{font-size:12px;color:#7f8795;margin-bottom:42px}
.about-business-card h4{font-size:25px;margin:0 0 14px}
.about-business-card p{color:#a4abb7;line-height:1.78;margin:0}
.values-panel{grid-column:1/-1;margin-top:0}
.value-tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.value-tags span{
  border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:9px 13px;
  color:#c3c8d0;font-size:13px
}
.contact-section{padding-bottom:92px}
.contact-card{
  border:1px solid var(--line);border-radius:30px;padding:44px;
  display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;
  background:
    radial-gradient(circle at 88% 20%,rgba(139,120,255,.16),transparent 26%),
    radial-gradient(circle at 76% 80%,rgba(106,216,208,.10),transparent 24%),
    linear-gradient(145deg,#11151d,#0b0d12)
}
.contact-main h2{margin-bottom:18px}
.contact-main p{max-width:560px;color:#aab0bc;line-height:1.85}
.contact-details{display:grid;grid-template-columns:1fr;gap:0}
.contact-item{
  display:grid;grid-template-columns:120px 1fr;gap:24px;padding:22px 0;
  border-bottom:1px solid rgba(255,255,255,.09);align-items:start
}
.contact-item:last-child{border-bottom:none}
.contact-item span{font-size:11px;letter-spacing:.16em;color:#838a97}
.contact-item b{font-size:17px;line-height:1.55;font-weight:550}
.contact-item a:hover{text-decoration:underline}
@media(max-width:1100px){
  .hero-grid,.core-grid{grid-template-columns:1fr}
  .experience-layout{grid-template-columns:1fr}
  .space-grid{grid-template-columns:repeat(2,1fr)}
  .products{grid-template-columns:1fr}
  .feature-row{grid-template-columns:1fr 1fr}
  .case-grid-culture{grid-template-columns:repeat(2,1fr)}
  .case-grid-ai{grid-template-columns:1fr 1fr}
  .about-profile{grid-template-columns:1fr}
  .about-businesses{grid-template-columns:1fr 1fr}
  .contact-card{grid-template-columns:1fr}
}
@media(max-width:760px){
  .links{display:none}
  .space-grid,.narrative-grid{grid-template-columns:1fr}
  .section-head,.footergrid{display:block}
  .hero-visual{height:430px}
  .section{padding:82px 0}
  h1{font-size:55px}
  .feature-row,.case-grid-culture,.case-grid-ai{grid-template-columns:1fr}
  .about-businesses{grid-template-columns:1fr}
  .contact-card{padding:28px}
  .contact-item{grid-template-columns:1fr;gap:8px}
}
body{
  background:
    radial-gradient(circle at 15% 10%, rgba(55,90,220,.16), transparent 20%),
    radial-gradient(circle at 82% 12%, rgba(129,96,255,.14), transparent 22%),
    radial-gradient(circle at 68% 70%, rgba(70,214,201,.10), transparent 20%),
    linear-gradient(180deg,#04060a 0%, #070a0f 46%, #05070b 100%);
}
.bg-system{
  position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:transparent;
}
.bg-mesh,
.bg-grid,
.bg-particles,
.bg-orb,
.bg-beam{position:absolute;inset:0}
.bg-mesh{
  background:
    radial-gradient(circle at 18% 20%, rgba(83,123,255,.20), transparent 22%),
    radial-gradient(circle at 74% 16%, rgba(136,111,255,.22), transparent 24%),
    radial-gradient(circle at 72% 64%, rgba(61,216,200,.14), transparent 20%),
    radial-gradient(circle at 26% 76%, rgba(84,120,255,.10), transparent 18%);
  filter: blur(28px);
  transform: scale(1.15);
  animation: meshFloat 16s ease-in-out infinite alternate;
  opacity:.92;
}
.bg-grid{
  opacity:.28;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 72px 72px, 72px 72px;
  mask-image: radial-gradient(circle at 50% 20%, rgba(255,255,255,.55), rgba(255,255,255,.16) 52%, rgba(255,255,255,.03) 78%);
  -webkit-mask-image: radial-gradient(circle at 50% 20%, rgba(255,255,255,.55), rgba(255,255,255,.16) 52%, rgba(255,255,255,.03) 78%);
  animation: gridMove 28s linear infinite;
}
.bg-orb{
  border-radius:50%;
  filter: blur(8px);
  mix-blend-mode:screen;
}
.orb-a{
  width:34vw;height:34vw;left:-10vw;top:18vh;
  background:radial-gradient(circle, rgba(76,130,255,.34), rgba(76,130,255,0) 64%);
  animation: orbDriftA 12s ease-in-out infinite alternate;
}
.orb-b{
  width:32vw;height:32vw;right:-8vw;top:8vh;
  background:radial-gradient(circle, rgba(136,111,255,.32), rgba(136,111,255,0) 66%);
  animation: orbDriftB 15s ease-in-out infinite alternate;
}
.orb-c{
  width:28vw;height:28vw;right:16vw;bottom:-8vh;
  background:radial-gradient(circle, rgba(70,214,201,.18), rgba(70,214,201,0) 68%);
  animation: orbDriftC 14s ease-in-out infinite alternate;
}
.bg-beam{
  width:46vw;height:130vh;top:-15vh;
  background:linear-gradient(90deg, transparent 0%, rgba(104,202,255,.08) 35%, rgba(166,130,255,.16) 55%, transparent 100%);
  filter: blur(10px);
  transform: rotate(-26deg);
  opacity:.68;
}
.beam-a{
  left:52vw;
  animation: beamSweepA 14s ease-in-out infinite alternate;
}
.beam-b{
  left:-8vw;
  top:20vh;
  transform: rotate(18deg);
  background:linear-gradient(90deg, transparent 0%, rgba(70,214,201,.06) 32%, rgba(83,123,255,.12) 54%, transparent 100%);
  opacity:.36;
  animation: beamSweepB 18s ease-in-out infinite alternate;
}
.bg-particles{
  opacity:.8;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(255,255,255,.65) 0 1px, transparent 1.8px),
    radial-gradient(circle at 22% 72%, rgba(119,144,255,.55) 0 1px, transparent 1.8px),
    radial-gradient(circle at 38% 42%, rgba(255,255,255,.45) 0 1px, transparent 1.8px),
    radial-gradient(circle at 48% 82%, rgba(102,224,214,.55) 0 1px, transparent 1.8px),
    radial-gradient(circle at 62% 18%, rgba(255,255,255,.45) 0 1px, transparent 1.8px),
    radial-gradient(circle at 74% 54%, rgba(182,148,255,.55) 0 1px, transparent 1.8px),
    radial-gradient(circle at 86% 28%, rgba(255,255,255,.42) 0 1px, transparent 1.8px);
  animation: particleFloat 20s linear infinite alternate;
}
.section{
  position:relative;
}
.section::before{
  content:"";
  position:absolute;
  left:50%;top:0;transform:translateX(-50%);
  width:min(1360px,90vw);height:1px;
  background:linear-gradient(90deg, transparent, rgba(87,222,207,.22), rgba(140,114,255,.28), transparent);
  opacity:.8;
}
.section::after{
  content:"";
  position:absolute;right:4%;top:8%;
  width:24vw;height:24vw;max-width:420px;max-height:420px;border-radius:50%;
  background:radial-gradient(circle, rgba(140,114,255,.08), transparent 64%);
  filter:blur(10px);
  animation: sectionPulse 10s ease-in-out infinite alternate;
  pointer-events:none;
}
.hero{
  overflow:hidden;
}
.hero::after{
  content:"";
  position:absolute;
  right:0;top:6%;
  width:48vw;height:48vw;max-width:820px;max-height:820px;border-radius:50%;
  background:
    radial-gradient(circle at 40% 40%, rgba(70,214,201,.16), transparent 16%),
    radial-gradient(circle at 56% 48%, rgba(140,114,255,.22), transparent 34%),
    radial-gradient(circle at 70% 62%, rgba(83,123,255,.14), transparent 20%);
  filter:blur(10px);
  animation: haloMotion 9s ease-in-out infinite alternate;
  pointer-events:none;
}
.hero-visual{
  position:relative;
  background:
    linear-gradient(145deg,rgba(15,18,28,.88),rgba(8,11,17,.92) 58%,rgba(16,19,28,.9)),
    radial-gradient(circle at 64% 20%, rgba(140,114,255,.18), transparent 24%);
}
.hero-visual::before{
  content:"";
  position:absolute;inset:-15%;
  background:
    linear-gradient(110deg, transparent 30%, rgba(255,255,255,.08) 45%, transparent 55%),
    linear-gradient(0deg, transparent 0%, rgba(91,136,255,.04) 52%, transparent 100%);
  animation: visualSweep 5.5s linear infinite;
  pointer-events:none;
}
.hero-visual::after{
  content:"";
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.026) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image: linear-gradient(to bottom, rgba(255,255,255,.25), rgba(255,255,255,.06));
  -webkit-mask-image: linear-gradient(to bottom, rgba(255,255,255,.25), rgba(255,255,255,.06));
  opacity:.35;
  animation: gridMoveSmall 12s linear infinite;
  pointer-events:none;
}
.business, .product, .case, .about-intro, .about-business-card, .values-panel, .contact-card, .core, .about-box, .hero-visual{
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.business:hover, .product:hover, .case:hover, .about-intro:hover, .about-business-card:hover, .values-panel:hover, .hero-visual:hover, .core:hover, .about-box:hover, .contact-card:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 42px rgba(0,0,0,.22), 0 0 0 1px rgba(140,114,255,.09) inset;
  border-color:rgba(255,255,255,.16);
}
.business, .product, .case, .core, .about-box, .about-intro, .about-business-card, .values-panel, .contact-card{
  backdrop-filter: blur(4px);
}
.core::after,
.about-box::after,
.contact-card::after,
.business::after,
.product::after,
.case::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(112deg, transparent 10%, rgba(255,255,255,.03) 28%, transparent 42%);
  background-size:180% 100%;
  animation: sheenRun 7s linear infinite;
  pointer-events:none;
  opacity:.9;
}
.business::after,.product::after,.case::after{animation-duration:9s;opacity:.65}
.btn{
  position:relative;overflow:hidden;
}
.btn::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(112deg, transparent 15%, rgba(255,255,255,.18) 38%, transparent 58%);
  transform:translateX(-130%);
  animation: btnSweep 4.8s linear infinite;
  pointer-events:none;
}
@keyframes meshFloat{
  0%{transform:translate3d(0,0,0) scale(1.1)}
  100%{transform:translate3d(-2vw,2vh,0) scale(1.16)}
}
@keyframes gridMove{
  0%{background-position:0 0,0 0}
  100%{background-position:72px 72px,72px 72px}
}
@keyframes gridMoveSmall{
  0%{background-position:0 0,0 0}
  100%{background-position:44px 44px,44px 44px}
}
@keyframes orbDriftA{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(6vw,-3vh,0) scale(1.08)}
}
@keyframes orbDriftB{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(-5vw,2vh,0) scale(1.12)}
}
@keyframes orbDriftC{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(-2vw,-3vh,0) scale(1.08)}
}
@keyframes beamSweepA{
  0%{transform:translate3d(0,0,0) rotate(-26deg)}
  100%{transform:translate3d(-12vw,2vh,0) rotate(-22deg)}
}
@keyframes beamSweepB{
  0%{transform:translate3d(0,0,0) rotate(18deg)}
  100%{transform:translate3d(10vw,-2vh,0) rotate(21deg)}
}
@keyframes particleFloat{
  0%{transform:translateY(0)}
  100%{transform:translateY(-26px)}
}
@keyframes sectionPulse{
  0%{transform:scale(1);opacity:.55}
  100%{transform:scale(1.08);opacity:.85}
}
@keyframes haloMotion{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(-2vw,1vh,0) scale(1.08)}
}
@keyframes visualSweep{
  0%{transform:translateX(-28%)}
  100%{transform:translateX(28%)}
}
@keyframes sheenRun{
  0%{background-position:140% 0}
  100%{background-position:-20% 0}
}
@keyframes btnSweep{
  0%,15%{transform:translateX(-130%)}
  35%{transform:translateX(130%)}
  100%{transform:translateX(130%)}
}
@media (prefers-reduced-motion: reduce){
  .bg-mesh,.bg-grid,.bg-orb,.bg-beam,.bg-particles,
  .hero::after,.hero-visual::before,.hero-visual::after,
  .core::after,.about-box::after,.contact-card::after,.business::after,.product::after,.case::after,
  .btn::after,.section::after{
    animation:none !important;
  }
}
.bg-ribbon,
.bg-arc,
.bg-node{position:absolute;pointer-events:none}
.bg-ribbon{
  height:1px;
  border-radius:999px;
  background:linear-gradient(90deg, transparent 0%, rgba(105,217,207,.0) 8%, rgba(105,217,207,.65) 28%, rgba(135,118,255,.85) 54%, rgba(219,162,255,.55) 72%, rgba(219,162,255,0) 92%, transparent 100%);
  filter:blur(.4px) drop-shadow(0 0 10px rgba(135,118,255,.35));
  opacity:.28;
}
.ribbon-a{
  width:46vw;left:8vw;top:28vh;
  transform:rotate(-12deg);
  animation:ribbonFlowA 8s ease-in-out infinite alternate;
}
.ribbon-b{
  width:38vw;right:7vw;top:56vh;
  transform:rotate(18deg);
  background:linear-gradient(90deg, transparent 0%, rgba(83,123,255,0) 12%, rgba(83,123,255,.5) 28%, rgba(135,118,255,.78) 54%, rgba(105,217,207,.52) 76%, rgba(105,217,207,0) 92%, transparent 100%);
  animation:ribbonFlowB 9s ease-in-out infinite alternate;
}
.bg-arc{
  border-radius:999px;
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 0 0 1px rgba(135,118,255,.02) inset, 0 0 28px rgba(135,118,255,.08);
  opacity:.38;
}
.arc-a{
  width:34vw;height:18vw;left:-8vw;top:14vh;
  border-color:rgba(135,118,255,.16);
  transform:rotate(-14deg);
  animation:arcShiftA 12s ease-in-out infinite alternate;
}
.arc-b{
  width:26vw;height:14vw;right:4vw;bottom:16vh;
  border-color:rgba(105,217,207,.15);
  transform:rotate(22deg);
  animation:arcShiftB 11s ease-in-out infinite alternate;
}
.bg-node{
  width:10px;height:10px;border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(139,120,255,.78) 46%, rgba(139,120,255,.08) 72%, transparent 74%);
  box-shadow:0 0 14px rgba(139,120,255,.35), 0 0 26px rgba(105,217,207,.12);
  opacity:.95;
}
.node-a{left:28vw;top:26vh;animation:nodePulse 3.6s ease-in-out infinite}
.node-b{right:25vw;top:51vh;animation:nodePulse 4.2s ease-in-out infinite .8s}
.node-c{left:56vw;top:68vh;animation:nodePulse 3.9s ease-in-out infinite 1.2s}
.hero p{max-width:720px}
.hero-tags{margin-top:20px}
.hero-tag{
  background:rgba(255,255,255,.03);
  backdrop-filter:blur(4px);
  border-color:rgba(255,255,255,.14);
}
.nav{
  background:rgba(7,9,13,.58);
  backdrop-filter:blur(22px);
}
.btn{backdrop-filter:blur(6px)}
.btn.primary{
  box-shadow:0 0 0 1px rgba(255,255,255,.14) inset, 0 10px 28px rgba(255,255,255,.08);
}
.hero-visual::before{
  background:
    linear-gradient(110deg, transparent 22%, rgba(255,255,255,.12) 42%, rgba(255,255,255,.04) 48%, transparent 56%),
    linear-gradient(90deg, transparent 0%, rgba(139,120,255,.08) 28%, rgba(105,217,207,.06) 48%, transparent 72%),
    linear-gradient(0deg, transparent 0%, rgba(91,136,255,.04) 52%, transparent 100%);
  animation:visualSweepLuxury 4.6s linear infinite;
}
.section::before{
  background:linear-gradient(90deg, transparent, rgba(87,222,207,.28), rgba(140,114,255,.34), transparent);
}
.core::after,
.about-box::after,
.contact-card::after,
.business::after,
.product::after,
.case::after{
  background:linear-gradient(112deg, transparent 10%, rgba(255,255,255,.05) 28%, rgba(139,120,255,.02) 34%, transparent 44%);
  animation:sheenRun 6.5s linear infinite;
}
.business:hover, .product:hover, .case:hover, .about-intro:hover, .about-business-card:hover, .values-panel:hover, .hero-visual:hover, .core:hover, .about-box:hover, .contact-card:hover{
  transform:translateY(-4px);
  box-shadow:0 24px 56px rgba(0,0,0,.24), 0 0 0 1px rgba(140,114,255,.10) inset;
}
.hero-visual .character-orbit{
  position:absolute;right:14%;top:14%;width:38%;height:56%;
  border:1px solid rgba(255,255,255,.06);
  border-radius:48% 52% 46% 54% / 40% 44% 56% 60%;
  filter:drop-shadow(0 0 18px rgba(139,120,255,.12));
  animation:orbitFloat 8s ease-in-out infinite alternate;
}
.hero-visual .character-orbit::before,
.hero-visual .character-orbit::after{
  content:"";position:absolute;border-radius:50%;
}
.hero-visual .character-orbit::before{
  width:38%;height:26%;left:30%;top:-10%;
  border:1px solid rgba(255,255,255,.08);
}
.hero-visual .character-orbit::after{
  width:12px;height:12px;left:66%;top:18%;
  background:radial-gradient(circle, rgba(255,255,255,.95), rgba(105,217,207,.65) 52%, transparent 72%);
  box-shadow:0 0 16px rgba(105,217,207,.26);
}
@keyframes ribbonFlowA{
  0%{transform:translate3d(0,0,0) rotate(-12deg) scaleX(1)}
  100%{transform:translate3d(4vw,-2vh,0) rotate(-9deg) scaleX(1.06)}
}
@keyframes ribbonFlowB{
  0%{transform:translate3d(0,0,0) rotate(18deg) scaleX(1)}
  100%{transform:translate3d(-4vw,2vh,0) rotate(15deg) scaleX(1.08)}
}
@keyframes arcShiftA{
  0%{transform:translate3d(0,0,0) rotate(-14deg)}
  100%{transform:translate3d(3vw,-1vh,0) rotate(-10deg)}
}
@keyframes arcShiftB{
  0%{transform:translate3d(0,0,0) rotate(22deg)}
  100%{transform:translate3d(-3vw,1vh,0) rotate(18deg)}
}
@keyframes nodePulse{
  0%,100%{transform:scale(1);opacity:.85}
  50%{transform:scale(1.45);opacity:1}
}
@keyframes visualSweepLuxury{
  0%{transform:translateX(-34%)}
  100%{transform:translateX(34%)}
}
@keyframes orbitFloat{
  0%{transform:translate3d(0,0,0) rotate(0deg)}
  100%{transform:translate3d(-1vw,1vh,0) rotate(3deg)}
}
@media (prefers-reduced-motion: reduce){
  .bg-ribbon,.bg-arc,.bg-node,.hero-visual .character-orbit{animation:none !important}
}
.light-flow-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  opacity:.96;
  mix-blend-mode:screen;
  filter:saturate(1.05);
}
.bg-mesh{opacity:.72}
.bg-particles{opacity:.32}
.bg-grid{opacity:.20}
.hero::after{opacity:.82}
.section::after{opacity:.52}
body{
  background:
    radial-gradient(ellipse at 78% 12%, rgba(102,76,210,.15) 0%, rgba(38,26,90,.08) 26%, transparent 52%),
    radial-gradient(ellipse at 22% 44%, rgba(28,94,132,.09) 0%, transparent 42%),
    radial-gradient(ellipse at 70% 78%, rgba(188,92,205,.07) 0%, transparent 38%),
    linear-gradient(145deg,#010205 0%,#04060b 38%,#090818 70%,#0e0c20 100%);
  background-attachment:fixed;
}
.bg-mesh{
  opacity:.58;
  filter:blur(36px);
  background:
    radial-gradient(circle at 18% 22%, rgba(67,136,255,.20), transparent 25%),
    radial-gradient(circle at 72% 12%, rgba(136,103,255,.30), transparent 30%),
    radial-gradient(circle at 84% 58%, rgba(223,111,229,.15), transparent 25%),
    radial-gradient(circle at 40% 78%, rgba(70,220,205,.14), transparent 22%);
}
.bg-grid{opacity:.11}
.bg-particles{opacity:.14}
.bg-ribbon,.bg-arc,.bg-node{opacity:.10 !important}
.light-flow-canvas{
  opacity:.82;
  mix-blend-mode:screen;
  filter:saturate(1.18) contrast(1.04);
}
.hero::after{
  opacity:.62;
  background:
    radial-gradient(circle at 44% 42%, rgba(85,224,208,.18), transparent 18%),
    radial-gradient(circle at 58% 48%, rgba(145,110,255,.34), transparent 38%),
    radial-gradient(circle at 78% 66%, rgba(224,111,229,.16), transparent 25%);
}
.news-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:18px;
}
.news-feature,
.news-list{
  border:1px solid var(--line);
  border-radius:26px;
  overflow:hidden;
  background:linear-gradient(145deg,rgba(15,19,26,.72),rgba(10,13,18,.86));
  backdrop-filter:blur(4px);
}
.news-feature{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:440px;
}
.news-visual{
  min-height:100%;
  position:relative;
  background:
    radial-gradient(circle at 28% 30%,rgba(74,214,201,.16),transparent 25%),
    radial-gradient(circle at 72% 62%,rgba(140,114,255,.24),transparent 30%),
    radial-gradient(circle at 62% 28%,rgba(220,110,226,.10),transparent 22%),
    linear-gradient(145deg,rgba(17,23,34,.86),rgba(7,9,14,.96));
}
.news-visual::before{
  content:"";
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:42px 42px;
  opacity:.28;
}
.news-badge{
  position:absolute;
  left:22px;top:22px;
  z-index:1;
  font-size:11px;
  letter-spacing:.16em;
  color:#d8dbe3;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  padding:8px 11px;
  background:rgba(8,10,14,.36);
  backdrop-filter:blur(6px);
}
.news-copy{
  padding:32px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.news-meta{
  font-size:11px;
  letter-spacing:.15em;
  color:#8d95a3;
  margin-bottom:20px;
}
.news-copy h3{
  font-size:30px;
  line-height:1.28;
  letter-spacing:-.025em;
  margin:0 0 16px;
}
.news-copy p{
  color:#9fa6b2;
  line-height:1.78;
  margin:0;
}
.news-more{
  margin-top:28px;
  font-size:12px;
  letter-spacing:.11em;
  color:#d8dbe3;
}
.news-list{
  display:flex;
  flex-direction:column;
}
.news-item{
  flex:1;
  display:grid;
  grid-template-columns:108px 1fr;
  gap:22px;
  padding:26px 28px;
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:background .3s ease,transform .3s ease;
}
.news-item:last-child{border-bottom:none}
.news-item:hover{
  background:rgba(255,255,255,.025);
}
.news-date{
  font-size:10px;
  letter-spacing:.13em;
  color:#747c89;
  padding-top:4px;
}
.news-item h4{
  margin:0 0 10px;
  font-size:19px;
  line-height:1.42;
}
.news-item p{
  margin:0;
  color:#9299a6;
  line-height:1.68;
  font-size:13px;
}
@media(max-width:1100px){
  .news-grid{grid-template-columns:1fr}
}
@media(max-width:760px){
  .news-feature{grid-template-columns:1fr}
  .news-visual{min-height:240px}
  .news-item{grid-template-columns:1fr;gap:10px}
}
.media-chip{
  padding:0;
  background:#090c12;
  position:relative;
  isolation:isolate;
}
.media-chip img{
  width:100%;
  height:100%;
  min-height:430px;
  display:block;
  object-fit:cover;
  object-position:center;
  border-radius:27px;
  transition:transform .8s cubic-bezier(.2,.7,.2,1);
}
.media-chip:hover img{transform:scale(1.018)}
.media-shade{
  position:absolute;
  inset:0;
  border-radius:27px;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(5,8,14,.04),transparent 54%,rgba(5,8,14,.24)),
    linear-gradient(90deg,rgba(82,130,255,.07),transparent 36%,rgba(151,108,255,.08));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.045);
}
.media-product{
  position:relative;
  overflow:hidden;
  background:#080b10;
}
.media-product img{
  width:100%;
  height:100%;
  min-height:250px;
  display:block;
  object-fit:cover;
  object-position:center;
  transition:transform .8s cubic-bezier(.2,.7,.2,1), filter .5s ease;
}
.product:hover .media-product img{
  transform:scale(1.035);
}
.product-image-shade{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(5,7,12,.02) 55%,rgba(5,7,12,.25) 100%),
    linear-gradient(120deg,rgba(79,135,255,.035),transparent 50%,rgba(178,111,255,.05));
}
@media(max-width:1000px){
  .media-chip img{min-height:380px}
  .media-product img{min-height:300px}
}
.integrated-case-card{padding:0;overflow:hidden;min-height:0;cursor:pointer}
.integrated-case-media{width:100%;aspect-ratio:16/9;overflow:hidden;position:relative;background:#070a0f;border-bottom:1px solid rgba(255,255,255,.06)}
.integrated-case-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .75s cubic-bezier(.2,.7,.2,1),filter .4s ease}
.integrated-case-card:hover .integrated-case-media img{transform:scale(1.04)}
.integrated-case-media::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 55%,rgba(5,7,12,.18))}
.integrated-case-body{padding:18px 22px 22px}
.integrated-case-card h4{margin:13px 0 9px}
.integrated-case-card p{margin:0}
.clickable-detail{cursor:pointer}
.clickable-detail:focus-visible{outline:2px solid rgba(122,211,207,.75);outline-offset:3px}
.detail-hint{margin-top:18px;padding-top:13px;border-top:1px solid rgba(255,255,255,.075);font-size:12px;letter-spacing:.06em;color:#b6bcc7;display:flex;align-items:center;justify-content:space-between}
.detail-hint span{color:#79d8cf;font-size:16px}
.detail-hint.compact{margin-top:16px;padding-top:12px}
.product-detail-hint{margin-top:18px}
.product-copy{display:flex;flex-direction:column;height:100%}
.detail-modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:28px;background:rgba(3,5,9,.72);backdrop-filter:blur(16px)}
.detail-modal.open{display:flex}
.detail-dialog{width:min(920px,94vw);max-height:88vh;overflow:auto;border:1px solid rgba(255,255,255,.12);border-radius:28px;background:linear-gradient(145deg,rgba(17,21,31,.97),rgba(8,10,15,.98));box-shadow:0 30px 100px rgba(0,0,0,.55)}
.detail-media{position:relative;min-height:320px;max-height:480px;overflow:hidden;background:radial-gradient(circle at 34% 28%,rgba(79,212,200,.13),transparent 24%),radial-gradient(circle at 70% 56%,rgba(139,115,255,.19),transparent 30%),#0a0d13}
.detail-media img{width:100%;height:100%;min-height:320px;max-height:480px;object-fit:cover;display:block}
.detail-body{padding:30px 34px 36px}
.detail-cat{font-size:11px;letter-spacing:.15em;color:#88919e;text-transform:uppercase}
.detail-title{font-size:34px;letter-spacing:-.035em;margin:10px 0 14px}
.detail-desc{color:#aab0bc;line-height:1.85;max-width:760px}
.detail-note{margin-top:18px;color:#7f8794;font-size:13px;line-height:1.7}
.detail-close{position:sticky;top:14px;float:right;margin:14px 14px -58px 0;z-index:2;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.13);background:rgba(5,7,11,.55);color:#fff;font-size:20px;cursor:pointer;backdrop-filter:blur(8px)}
@media(max-width:760px){.detail-modal{padding:14px}.detail-body{padding:24px}.detail-title{font-size:28px}.detail-media,.detail-media img{min-height:230px}}
.hero-visual{
  background:linear-gradient(145deg,rgba(14,18,29,.76),rgba(9,11,16,.92));
}
.hero-cover{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
  opacity:.96;
}
.hero-visual::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(5,7,11,.06),rgba(5,7,11,.16)),
    radial-gradient(circle at 70% 20%,rgba(117,222,213,.10),transparent 18%),
    radial-gradient(circle at 88% 12%,rgba(143,122,255,.12),transparent 24%);
}
.hero-visual .label{z-index:2}
.hero-visual .glow,
.hero-visual .space-box,
.hero-visual .character-orbit,
.hero-visual .toy{display:none !important;}
#experience .narrative-grid .integrated-case-card{
  display:flex;flex-direction:column;
}
#experience .narrative-grid .integrated-case-media{
  width:min(100%,250px);
  margin:0 auto;
  aspect-ratio:16/9;
}
#experience .narrative-grid .integrated-case-body{
  padding-top:16px;
}
.news-feature{
  align-items:stretch;
}
.news-visual{
  position:relative;
  min-height:520px;
  overflow:hidden;
}
.news-visual img{
  width:100%;height:100%;display:block;object-fit:cover;object-position:center;
  filter:saturate(1.03) contrast(1.02);
}
.news-visual::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,8,12,.04),rgba(6,8,12,.16));
}
.news-badge{
  position:absolute;left:18px;top:18px;z-index:2;
}
@media (max-width: 1100px){
  .news-visual{min-height:420px}
}
.hero-cover{
  object-position:center center;
  transform:scale(1.02);
}
.values-panel h3{
  max-width: 760px;
}
.value-tags{
  gap:10px 12px;
}
.section-head h2,
.contact-main h2{
  font-size:clamp(38px,4.2vw,58px) !important;
  line-height:1.02 !important;
  letter-spacing:-.04em !important;
}
.about-head h2{font-size:clamp(38px,4.2vw,58px) !important}
#ai .products .product:nth-child(1) .media-product,
#ai .products .product:nth-child(2) .media-product{
  background:#0a0d13;
  display:flex;
  align-items:center;
  justify-content:center;
}
#ai .products .product:nth-child(1) .media-product img,
#ai .products .product:nth-child(2) .media-product img{
  width:100%;
  height:100%;
  object-fit:contain !important;
  object-position:center !important;
  transform:none !important;
}
#ai .products .product:nth-child(1):hover .media-product img,
#ai .products .product:nth-child(2):hover .media-product img{
  transform:scale(1.012) !important;
}
#experience .narrative-grid .integrated-case-media{
  width:100% !important;
  margin:0 !important;
  height:168px;
  aspect-ratio:auto !important;
}
#experience .narrative-grid .integrated-case-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.compact-section-head{margin-bottom:28px}
.featured-cases-gallery{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.featured-case{
  position:relative;
  aspect-ratio:1.52 / 1;
  overflow:hidden;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:#080b10;
  cursor:pointer;
}
.featured-case img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .65s cubic-bezier(.2,.7,.2,1), filter .4s ease;
}
.featured-case::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(4,6,10,.88) 100%);
  opacity:0;
  transition:opacity .3s ease;
}
.featured-case-name{
  position:absolute;
  left:22px;
  right:22px;
  bottom:20px;
  z-index:2;
  color:#fff;
  font-size:20px;
  font-weight:650;
  letter-spacing:-.02em;
  transform:translateY(10px);
  opacity:0;
  transition:opacity .3s ease, transform .3s ease;
}
.featured-case:hover img{
  transform:scale(1.045);
  filter:saturate(1.04) brightness(.86);
}
.featured-case:hover::after{opacity:1}
.featured-case:hover .featured-case-name{
  opacity:1;
  transform:translateY(0);
}
@media(max-width:1000px){
  .featured-cases-gallery{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .featured-cases-gallery{grid-template-columns:1fr}
  .featured-case-name{opacity:1;transform:none}
  .featured-case::after{opacity:1}
}
#featured-cases .section-head{
  grid-template-columns:1fr;
  margin-bottom:28px;
}
#featured-cases .section-head .desc{
  display:none;
}
.featured-case-more{
  position:relative;
  aspect-ratio:1.52 / 1;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.06);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  text-decoration:none;
  color:#d9dce5;
  background:
    radial-gradient(circle at 62% 42%,rgba(129,106,255,.11),transparent 24%),
    radial-gradient(circle at 35% 70%,rgba(74,206,196,.06),transparent 22%),
    rgba(8,11,16,.28);
  transition:border-color .3s ease, background .3s ease, transform .3s ease;
}
.featured-case-more::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.025) 42%,transparent 58%);
  transform:translateX(-35%);
  transition:transform .6s ease;
}
.featured-case-more:hover{
  transform:translateY(-2px);
  border-color:rgba(124,218,208,.20);
  background:
    radial-gradient(circle at 62% 42%,rgba(129,106,255,.15),transparent 25%),
    radial-gradient(circle at 35% 70%,rgba(74,206,196,.09),transparent 23%),
    rgba(9,12,18,.42);
}
.featured-case-more:hover::before{
  transform:translateX(35%);
}
.more-icon{
  width:25px;
  height:38px;
  border:1px solid rgba(255,255,255,.34);
  opacity:.9;
}
.more-text{
  font-size:20px;
  letter-spacing:.04em;
}
.more-arrows{
  font-size:48px;
  line-height:.72;
  letter-spacing:-.12em;
  color:#8d79ff;
  transform:translateX(5px);
}
@media(max-width:640px){
  .featured-case-more{min-height:220px}
}


/* ===== 网站版权 / 备案信息 ===== */
.copyright{
  width:min(1320px,90vw);
  margin:0 auto;
  padding:20px 0 28px;
  border-top:1px solid rgba(255,255,255,.06);
  color:#747c89;
  font-size:12px;
  line-height:1.7;
}
.copyright p{margin:0}
.beian-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  margin-top:3px !important;
}
.beian-row img{
  width:14px;
  height:14px;
  object-fit:contain;
  opacity:.82;
}
.copyright a{
  color:#747c89;
  text-decoration:none;
  transition:color .25s ease;
}
.copyright a:hover{color:#b9c0cb}
@media(max-width:640px){
  .copyright{font-size:11px;padding-bottom:22px}
}


/* ===== V30 PERFORMANCE MODE =====
   Visual atmosphere remains, but continuous work is reduced to one lightweight canvas. */

/* Avoid fixed-background repaint during scrolling. */
body{
  background-attachment:scroll !important;
}

/* Offscreen sections are skipped until they approach the viewport. */
.section{
  content-visibility:auto;
  contain-intrinsic-size:900px;
}

/* Static background atmosphere: no large animated raster blur layers. */
.bg-mesh{
  filter:none !important;
  animation:none !important;
  transform:scale(1.04) !important;
  opacity:.22 !important;
}
.bg-grid,
.bg-particles{
  animation:none !important;
}
.bg-grid{opacity:.08 !important}
.bg-particles{opacity:.08 !important}

.bg-orb{
  filter:none !important;
  mix-blend-mode:normal !important;
  animation:none !important;
  opacity:.12 !important;
}
.bg-beam{
  display:none !important;
}

/* Decorative CSS motion is frozen; the canvas remains the one ambient motion layer. */
.bg-ribbon,
.bg-arc,
.bg-node{
  display:none !important;
}
.section::after,
.hero::after{
  filter:none !important;
  animation:none !important;
}
.section::after{opacity:.22 !important}
.hero::after{opacity:.28 !important}

.hero-visual::before,
.hero-visual::after{
  animation:none !important;
}
.hero-visual::before{opacity:.18 !important}
.hero-visual::after{opacity:.18 !important}

.core::after,
.about-box::after,
.contact-card::after,
.business::after,
.product::after,
.case::after,
.btn::after{
  animation:none !important;
  opacity:0 !important;
}

/* Canvas no longer forces screen blending or post-filtering. */
.light-flow-canvas{
  mix-blend-mode:normal !important;
  filter:none !important;
  opacity:.48 !important;
}

/* Remove widespread backdrop-filter layers; keep only a modest nav/modal blur. */
.business,
.product,
.case,
.core,
.about-box,
.about-intro,
.about-business-card,
.values-panel,
.contact-card,
.news-feature,
.news-list,
.hero-tag,
.btn,
.news-badge{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

.nav{
  backdrop-filter:blur(8px) !important;
  -webkit-backdrop-filter:blur(8px) !important;
  background:rgba(7,9,13,.88) !important;
}
.detail-modal{
  backdrop-filter:blur(8px) !important;
  -webkit-backdrop-filter:blur(8px) !important;
}
.detail-close{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* Hover can still feel responsive, but avoid oversized paint-heavy shadows. */
.business:hover,
.product:hover,
.case:hover,
.about-intro:hover,
.about-business-card:hover,
.values-panel:hover,
.hero-visual:hover,
.core:hover,
.about-box:hover,
.contact-card:hover{
  box-shadow:0 14px 34px rgba(0,0,0,.18) !important;
}

/* Let the browser isolate expensive content more efficiently. */
.product,
.integrated-case-card,
.featured-case,
.news-feature,
.news-list,
.about-business-card,
.values-panel,
.contact-card{
  contain:layout paint;
}

/* Mobile: lower canvas prominence even further. */
@media(max-width:760px){
  .light-flow-canvas{opacity:.34 !important}
  .nav{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
}


/* ===== V31 content + centered footer ===== */

/* Longer homepage introduction: maintain comfortable reading width/leading. */
.hero .hero-grid > div:first-child > p{
  max-width:900px;
  line-height:1.88;
}

/* Spatial exhibition description is now a full capability statement. */
#experience .space-business > p{
  max-width:none;
  line-height:1.82;
}

/* Centered footer — brand, slogan, copyright and filing info. */
.footer{
  text-align:center;
}
.footer-centered{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding-top:42px;
}
.footer-brand-centered{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.footer-brand-centered h3{
  margin:0;
  color:#f1f3f6;
  font-size:30px;
  line-height:1.2;
  letter-spacing:-.02em;
}
.footer-slogan{
  margin-top:10px;
  color:#929aa7;
  font-size:14px;
  line-height:1.75;
  letter-spacing:.02em;
}
.copyright{
  width:100%;
  margin:28px auto 0 !important;
  padding:22px 0 30px !important;
  border-top:1px solid rgba(255,255,255,.07);
  color:#747c89;
  font-size:12px;
  line-height:1.7;
  text-align:center !important;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.copyright p{
  margin:0;
  text-align:center !important;
}
.beian-row{
  display:flex;
  align-items:center;
  justify-content:center !important;
  flex-wrap:wrap;
  gap:6px;
  margin-top:4px !important;
  text-align:center !important;
}
.beian-row img{
  width:14px;
  height:14px;
  object-fit:contain;
  opacity:.82;
}
.copyright a{
  color:#747c89;
  text-decoration:none;
  transition:color .25s ease;
}
.copyright a:hover{
  color:#b9c0cb;
}
.beian-divider{
  display:inline-block;
}
@media(max-width:640px){
  .footer-centered{padding-top:32px}
  .footer-brand-centered h3{font-size:24px}
  .footer-slogan{font-size:12px}
  .copyright{font-size:11px}
}


/* ===== V32 AI Core logo beside heading ===== */
.ai-core-heading{
  display:flex;
  align-items:flex-start;
  gap:20px;
  margin:6px 0 12px;
}
.ai-core-logo-wrap{
  flex:0 0 auto;
  width:88px;
  height:88px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:24px;
  background:linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,.004));
  border:1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.ai-core-logo{
  width:62px;
  height:62px;
  object-fit:contain;
  display:block;
  opacity:.97;
  filter: drop-shadow(0 0 10px rgba(255,255,255,.05));
}
.ai-core-heading h3{
  margin:0;
}
@media (max-width: 900px){
  .ai-core-heading{ gap:14px; }
  .ai-core-logo-wrap{
    width:72px;
    height:72px;
    border-radius:20px;
  }
  .ai-core-logo{
    width:50px;
    height:50px;
  }
}
@media (max-width: 640px){
  .ai-core-heading{
    gap:12px;
    align-items:center;
  }
  .ai-core-logo-wrap{
    width:60px;
    height:60px;
    border-radius:18px;
  }
  .ai-core-logo{
    width:42px;
    height:42px;
  }
}


/* ===== V33 FAST-SCROLL STABILITY =====
   Chrome/Safari: avoid blank/white sections during rapid trackpad scrolling. */

/* Always keep a dark fallback behind every composited layer. */
html{
  background:#05070b !important;
  overscroll-behavior-y:none;
}
body{
  background-color:#05070b !important;
  min-height:100%;
  isolation:isolate;
}

/* content-visibility can delay painting during fast scroll in Chrome/Safari.
   Stability is more important here than skipping offscreen rendering. */
.section{
  content-visibility:visible !important;
  contain-intrinsic-size:none !important;
}

/* Paint/layout containment can also produce delayed tiles on Safari/WebKit. */
.product,
.integrated-case-card,
.featured-case,
.news-feature,
.news-list,
.about-business-card,
.values-panel,
.contact-card{
  contain:none !important;
}

/* Fixed background remains a simple composited layer, without forced GPU hints. */
.bg-system{
  transform:none !important;
  will-change:auto !important;
  backface-visibility:visible !important;
}

/* During active scrolling the canvas is temporarily hidden.
   The dark CSS atmosphere remains visible, avoiding compositor starvation. */
html.is-fast-scrolling .light-flow-canvas{
  opacity:0 !important;
  visibility:hidden !important;
}
html.is-fast-scrolling .bg-system{
  background:
    radial-gradient(circle at 18% 22%, rgba(42,76,145,.09), transparent 30%),
    radial-gradient(circle at 78% 18%, rgba(91,67,163,.10), transparent 34%),
    linear-gradient(145deg,#03050a 0%,#060711 54%,#0b0919 100%) !important;
}

/* Remove transition work while the trackpad is actively moving the page. */
html.is-fast-scrolling *,
html.is-fast-scrolling *::before,
html.is-fast-scrolling *::after{
  transition-duration:0s !important;
  transition-delay:0s !important;
}

/* Keep navigation stable in Safari. */
.nav{
  transform:translateZ(0);
}

/* Avoid browser bounce revealing a white root background. */
@supports (-webkit-touch-callout:none){
  html, body{
    background:#05070b !important;
  }
}


/* ===== V34 AI Core clean heading ===== */
.ai-core-heading-text-only{
  display:block !important;
  margin:6px 0 12px !important;
}
.ai-core-heading-text-only h3{margin:0 !important}
.ai-core-logo-wrap{display:none !important}

/* ===== V34 all cases page ===== */
.cases-page-body{
  margin:0;
  min-height:100vh;
  color:#f4f6f8;
  background:
    radial-gradient(circle at 14% 18%,rgba(30,77,112,.16),transparent 28%),
    radial-gradient(circle at 84% 14%,rgba(83,57,145,.16),transparent 30%),
    linear-gradient(145deg,#03050a 0%,#070812 52%,#0c0918 100%);
}
.cases-topbar{
  position:sticky;top:0;z-index:20;
  background:rgba(5,7,11,.94);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.cases-topbar-inner{
  min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.cases-brand{
  display:flex;align-items:baseline;gap:18px;color:#fff;text-decoration:none;
}
.cases-brand strong{font-size:22px;letter-spacing:.16em}
.cases-brand span,.cases-back{color:#8e96a3;font-size:14px}
.cases-back{text-decoration:none}
.cases-back:hover{color:#fff}
.all-cases-page{padding:74px 0 100px}
.all-cases-head{margin-bottom:34px}
.all-cases-head .eyebrow{color:#8793a6;letter-spacing:.18em;font-size:12px}
.all-cases-head h1{
  margin:10px 0 8px;font-size:clamp(42px,5vw,68px);line-height:1;letter-spacing:-.045em;
}
.all-cases-head p{margin:0;color:#8f97a4;font-size:14px}
.all-cases-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;
}
.all-case-card{
  position:relative;overflow:hidden;border-radius:18px;aspect-ratio:1.48/1;
  background:#0a0d13;border:1px solid rgba(255,255,255,.07);
}
.all-case-card img{
  width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1);transition:transform .45s ease,filter .35s ease;
}
.all-case-overlay{
  position:absolute;inset:0;display:flex;align-items:flex-end;padding:22px;
  background:linear-gradient(180deg,transparent 48%,rgba(3,5,9,.90) 100%);
  opacity:0;transition:opacity .28s ease;
}
.all-case-overlay span{
  color:#fff;font-size:18px;font-weight:650;line-height:1.35;
  transform:translateY(8px);transition:transform .28s ease;
}
.all-case-card:hover img{transform:scale(1.035);filter:brightness(.86)}
.all-case-card:hover .all-case-overlay{opacity:1}
.all-case-card:hover .all-case-overlay span{transform:translateY(0)}
.cases-footer{
  border-top:1px solid rgba(255,255,255,.07);color:#727b88;
  font-size:12px;text-align:center;padding:26px 0 34px;
}
@media(max-width:980px){
  .all-cases-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .cases-topbar-inner{min-height:62px}
  .cases-brand span{display:none}
  .all-cases-page{padding:54px 0 72px}
  .all-cases-grid{grid-template-columns:1fr}
  .all-case-overlay{opacity:1}
  .all-case-overlay span{transform:none}
}


/* ===== V35 Project detail / horizontal gallery ===== */
.all-case-link{
  text-decoration:none;
  color:inherit;
  cursor:pointer;
}

.case-detail-body{
  margin:0;
  min-height:100vh;
  color:#f4f6f8;
  background:
    radial-gradient(circle at 18% 15%,rgba(34,73,121,.14),transparent 28%),
    radial-gradient(circle at 82% 18%,rgba(91,62,151,.14),transparent 32%),
    linear-gradient(145deg,#03050a 0%,#070812 52%,#0c0918 100%);
}

.case-detail-page{
  padding:68px 0 92px;
}

.case-detail-head{
  margin-bottom:30px;
}
.case-detail-head .eyebrow{
  color:#8793a6;
  letter-spacing:.18em;
  font-size:12px;
}
.case-detail-head h1{
  margin:10px 0 8px;
  font-size:clamp(42px,5vw,68px);
  line-height:1;
  letter-spacing:-.045em;
}
.case-detail-head p{
  margin:0;
  color:#949caa;
  font-size:15px;
}

.case-detail-stage{
  width:100%;
  overflow:hidden;
}
.case-detail-viewport{
  position:relative;
  width:100%;
}
.case-detail-track{
  display:flex;
  gap:18px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
  padding:0 max(5vw,calc((100vw - 1320px)/2));
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
}
.case-detail-track::-webkit-scrollbar{display:none}

.case-detail-slide{
  flex:0 0 min(82vw,1180px);
  aspect-ratio:16/9;
  margin:0;
  overflow:hidden;
  border-radius:22px;
  background:#090c12;
  border:1px solid rgba(255,255,255,.08);
  scroll-snap-align:center;
}
.case-detail-slide img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  background:#05070b;
}

.case-detail-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:4;
  width:52px;
  height:52px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(5,8,14,.74);
  color:#fff;
  font-size:36px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .2s ease,border-color .2s ease;
}
.case-detail-arrow:hover{
  background:rgba(18,24,38,.90);
  border-color:rgba(255,255,255,.28);
}
.case-detail-prev{left:max(18px,3vw)}
.case-detail-next{right:max(18px,3vw)}

.case-detail-counter{
  position:absolute;
  right:max(28px,5vw);
  bottom:18px;
  z-index:4;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(4,7,12,.72);
  border:1px solid rgba(255,255,255,.10);
  color:#aab2bf;
  font-size:12px;
  letter-spacing:.12em;
}

.case-detail-thumbs{
  margin-top:18px;
  display:flex;
  gap:10px;
  overflow-x:auto;
  scrollbar-width:none;
}
.case-detail-thumbs::-webkit-scrollbar{display:none}
.case-detail-thumb{
  flex:0 0 112px;
  height:68px;
  padding:0;
  overflow:hidden;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.08);
  background:#090c12;
  opacity:.48;
  cursor:pointer;
  transition:opacity .2s ease,border-color .2s ease;
}
.case-detail-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.case-detail-thumb.is-active{
  opacity:1;
  border-color:rgba(112,201,196,.55);
}

.case-detail-meta{
  margin-top:54px;
  padding-top:30px;
  border-top:1px solid rgba(255,255,255,.08);
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:48px;
  align-items:start;
}
.case-detail-meta h2{
  margin:10px 0 0;
  font-size:clamp(28px,3vw,44px);
  letter-spacing:-.035em;
}
.case-detail-meta p{
  margin:0;
  color:#98a0ad;
  line-height:1.9;
  max-width:720px;
}

@media(max-width:760px){
  .case-detail-page{padding:48px 0 68px}
  .case-detail-slide{
    flex-basis:90vw;
    border-radius:16px;
  }
  .case-detail-arrow{
    width:42px;
    height:42px;
    font-size:30px;
  }
  .case-detail-prev{left:10px}
  .case-detail-next{right:10px}
  .case-detail-counter{
    right:18px;
    bottom:12px;
  }
  .case-detail-meta{
    grid-template-columns:1fr;
    gap:18px;
    margin-top:38px;
  }
}


/* ===== V36 Selected case project-name behavior ===== */
.featured-case-project-link{
  display:block;
  color:inherit;
  text-decoration:none;
  cursor:pointer;
}