/* Mirror Lake — shared shell (index / geo / about)
   Visual bar raised toward product-marketing polish (CodeBuddy-class scale),
   while keeping Mirror Lake blue — not a clone of another brand. */
:root{
  --blue:        #0574b5;
  --blue-bright: #2a9fe0;
  --blue-deep:   #045d92;
  --blue-deeper: #034a78;

  --ink:        #05080d;
  --ink-2:      #080e16;
  --ink-3:      #0c1520;
  --light:      #f4f7fa;
  --light-2:    #ffffff;

  --t-strong:  #0a1218;
  --t-body:    #334555;
  --t-mute:    #5a6d7c;
  --dt-strong: #f7fbff;
  --dt-body:   rgba(230,240,250,.82);
  --dt-mute:   rgba(190,210,228,.58);

  --blue-text:    #066aa6;
  --blue-on-dark: #6ec4f0;

  --hair-light: rgba(12,25,34,.09);
  --hair-dark:  rgba(255,255,255,.08);

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;
  --r-btn: 10px;

  --sh-1: 0 1px 2px rgba(8,20,30,.05), 0 8px 24px rgba(8,20,30,.06);
  --sh-2: 0 4px 12px rgba(8,20,30,.08), 0 28px 64px rgba(8,20,30,.14);
  --sh-glow: 0 18px 56px -20px rgba(5,116,181,.55);

  --pad-sec: clamp(96px, 13vw, 176px);
  --gutter:  clamp(22px, 5vw, 72px);
  --maxw: 1240px;
  --prose: 720px;

  --font-sys: "Outfit", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-display: "Outfit", -apple-system, BlinkMacSystemFont, system-ui, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-serif: "Newsreader", Georgia, "Times New Roman", serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--font-sys);
  background:var(--ink);
  color:var(--dt-body);
  font-size:18px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

.hero-h1, .sec-h, .prod-name, .about-lead, .page-h{ font-family:var(--font-display); }
html[lang="zh"] .hero-h1,
html[lang="zh"] .sec-h,
html[lang="zh"] .prod-name,
html[lang="zh"] .about-lead,
html[lang="zh"] .page-h{ font-family:var(--font-sys); letter-spacing:0; }

body::after{
  content:""; position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.028; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

html[lang="en"] .zh{ display:none; }
html[lang="zh"] .en{ display:none; }
html[lang="zh"] body{ letter-spacing:0; }
html[lang="zh"] h1,
html[lang="zh"] h2,
html[lang="zh"] h3,
html[lang="zh"] .hero-h1,
html[lang="zh"] .sec-h,
html[lang="zh"] .page-h{ letter-spacing:.5px !important; }
html[lang="zh"] .hero-h1{ letter-spacing:1px !important; }
html[lang="zh"] .lead,
html[lang="zh"] .hero-sub,
html[lang="zh"] .prod-body,
html[lang="zh"] .about-body,
html[lang="zh"] .prose{ line-height:1.85; }

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

:focus-visible{
  outline:2px solid var(--blue-bright);
  outline-offset:3px;
  border-radius:6px;
}

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.wrap-prose{ width:100%; max-width:var(--prose); margin-inline:auto; padding-inline:var(--gutter); }

.vh{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

.skip{
  position:absolute; left:14px; top:-60px;
  background:var(--blue); color:#fff; padding:10px 16px; border-radius:10px;
  font-weight:600; z-index:200; transition:top .2s ease;
}
.skip:focus{ top:14px; }

/* HEADER */
header.site{
  position:sticky; top:0; z-index:100;
  background:rgba(5,8,13,.72);
  -webkit-backdrop-filter:saturate(160%) blur(22px);
  backdrop-filter:saturate(160%) blur(22px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav{ display:flex; align-items:center; justify-content:space-between; height:68px; gap:16px; }
.brand{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.brand img{ height:28px; width:auto; }
.brand .word{ font-weight:650; font-size:17px; letter-spacing:-.02em; color:var(--dt-strong); }
html[lang="zh"] .brand .word{ letter-spacing:0; font-weight:700; }

.nav-right{ display:flex; align-items:center; gap:4px; }
.nav-links{ display:flex; align-items:center; gap:2px; }
.nav-links a{
  padding:8px 12px; border-radius:8px;
  font-size:14px; font-weight:500; color:var(--dt-mute);
  transition:color .2s ease, background .2s ease;
}
.nav-links a:hover{ color:var(--dt-strong); background:rgba(255,255,255,.05); }
.nav-links a.is-active{ color:var(--dt-strong); }

.lang{
  margin-left:8px;
  display:inline-flex; align-items:center; justify-content:center;
  min-width:48px; height:34px; padding:0 12px;
  border:1px solid rgba(255,255,255,.12); border-radius:8px;
  background:transparent; color:var(--dt-strong);
  font-family:var(--font-sys); font-size:13px; font-weight:600; cursor:pointer;
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.lang:hover{ background:rgba(42,159,224,.12); border-color:rgba(42,159,224,.35); }
.lang:active{ transform:scale(.97); }

@media (max-width:720px){
  .nav-links{ display:none; }
  .brand .word{ display:none; }
  .brand img{ height:28px; }
}

/* SECTIONS */
section{ position:relative; }
.sec{ padding-block:var(--pad-sec); }
.sec.dark{ background:var(--ink); color:var(--dt-body); }
.sec.darker{ background:var(--ink-2); color:var(--dt-body); }
.sec.light{ background:var(--light); color:var(--t-body); }

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:13px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--blue-on-dark);
}
.sec.light .eyebrow{ color:var(--blue-text); }
html[lang="zh"] .eyebrow{ letter-spacing:.08em; }
.eyebrow::before{ content:""; width:26px; height:1px; background:currentColor; opacity:.55; }

.sec-h, .page-h{
  font-weight:650; font-size:clamp(30px,4.6vw,52px);
  line-height:1.08; letter-spacing:-.03em; margin:.45em 0 0;
  color:var(--dt-strong);
}
html[lang="zh"] .sec-h, html[lang="zh"] .page-h{ font-weight:650; letter-spacing:0; line-height:1.2; }
.sec.light .sec-h, .sec.light .page-h{ color:var(--t-strong); }

.lead{
  font-size:clamp(17px,1.55vw,20px); line-height:1.6;
  max-width:40ch; margin:20px 0 0; color:var(--dt-mute);
}
.sec.light .lead{ color:var(--t-body); }

.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 15px 7px 13px; border-radius:var(--r-pill);
  font-size:13px; font-weight:600; letter-spacing:.01em;
  border:1px solid var(--hair-dark);
  background:rgba(92,183,236,.10); color:var(--blue-on-dark);
}
.sec.light .pill{ border-color:rgba(5,116,181,.22); background:rgba(5,116,181,.07); color:var(--blue-text); }
.pill .dot{ width:7px; height:7px; border-radius:50%; background:var(--blue-bright); box-shadow:0 0 0 4px rgba(42,159,224,.18); }

.action{
  display:inline-flex; align-items:center; gap:7px;
  font-size:16px; font-weight:600; color:var(--blue-on-dark);
  transition:gap .2s ease, color .2s ease;
}
.sec.light .action{ color:var(--blue-text); }
.action .chev{ transition:transform .2s ease; }
.action:hover{ gap:11px; }
.action:hover .chev{ transform:translateX(2px); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:15px 28px; border-radius:var(--r-btn);
  font-size:15px; font-weight:650; letter-spacing:-.01em; border:1px solid transparent;
  transition:transform .22s ease, box-shadow .22s ease, background .2s ease, border-color .2s ease;
}
.btn.primary{
  color:#fff;
  background:var(--blue);
  box-shadow:var(--sh-glow);
}
.btn.primary:hover{ transform:translateY(-1px); background:var(--blue-bright); box-shadow:0 22px 60px -18px rgba(5,116,181,.7); }
.btn.ghost{
  color:var(--dt-strong);
  border-color:rgba(255,255,255,.16);
  background:rgba(255,255,255,.03);
}
.btn.ghost:hover{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.28); }
.sec.light .btn.ghost{
  color:var(--t-strong);
  border-color:rgba(12,25,34,.14);
  background:#fff;
}

/* HERO */
.hero{
  position:relative; isolation:isolate;
  min-height:100vh; min-height:100svh;
  display:flex; align-items:center; background:var(--ink); overflow:hidden;
}
.hero.compact{ min-height:auto; }
.hero::before{
  content:""; position:absolute; inset:0; z-index:-3;
  background:
    radial-gradient(90% 70% at 78% 28%, rgba(5,116,181,.28), transparent 58%),
    radial-gradient(70% 50% at 12% 80%, rgba(3,74,120,.22), transparent 55%),
    linear-gradient(180deg, #05080d 0%, #071018 45%, #05080d 100%);
}
.hero .orb{ position:absolute; z-index:-2; border-radius:50%; filter:blur(72px); opacity:.45; }
.hero .orb.a{ width:560px; height:560px; top:-200px; right:-80px;
  background:radial-gradient(circle,rgba(42,159,224,.38),transparent 68%); }
.hero .orb.b{ width:420px; height:420px; bottom:-140px; left:-100px;
  background:radial-gradient(circle,rgba(3,74,120,.5),transparent 70%); }

.horizon{
  position:absolute; left:0; right:0; top:58%; z-index:-1; height:1px;
  background:linear-gradient(90deg,transparent, rgba(110,196,240,.35) 30%, rgba(160,210,245,.55) 50%, rgba(110,196,240,.35) 70%, transparent);
  box-shadow:0 0 28px 2px rgba(42,159,224,.22);
}
.ripples{
  position:absolute; left:72%; top:52%; transform:translateX(-50%); z-index:-1;
  width:min(520px,70vw); height:200px; pointer-events:none;
  background:radial-gradient(60% 40% at 50% 0%, rgba(92,183,236,.14), transparent 70%);
  -webkit-mask:linear-gradient(180deg,#000,transparent); mask:linear-gradient(180deg,#000,transparent);
}
.ripples span{
  position:absolute; left:50%; transform:translateX(-50%); height:1px; border-radius:50%;
  background:linear-gradient(90deg,transparent,rgba(150,205,240,.4),transparent);
  animation:rippleGlow 7s ease-in-out infinite;
}
.ripples span:nth-child(1){ top:26px;  width:62%; opacity:.5;  animation-delay:0s; }
.ripples span:nth-child(2){ top:58px;  width:50%; opacity:.4;  animation-delay:.6s; }
.ripples span:nth-child(3){ top:96px;  width:38%; opacity:.32; animation-delay:1.2s; }
.ripples span:nth-child(4){ top:140px; width:26%; opacity:.24; animation-delay:1.8s; }
@keyframes rippleGlow{
  0%,100%{ opacity:.1; transform:translateX(-50%) scaleX(.96); }
  50%{ opacity:.45; transform:translateX(-50%) scaleX(1.04); }
}

.hero-inner{
  width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter);
  display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(32px,6vw,80px);
  align-items:center; padding-block:128px 96px;
}
.hero.compact .hero-inner{
  grid-template-columns:1fr;
  padding-block:120px 80px;
  max-width:var(--prose);
}
.hero-copy{ position:relative; z-index:2; }
.hero-eyebrow{
  font-size:12px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--blue-on-dark); display:inline-flex; align-items:center; gap:10px;
}
html[lang="zh"] .hero-eyebrow{ letter-spacing:.12em; }
.hero-eyebrow::before{ content:""; width:28px; height:1px; background:currentColor; opacity:.65; }

.hero-h1{
  margin:22px 0 0; font-weight:650; font-size:clamp(40px,6.4vw,68px);
  line-height:1.05; letter-spacing:-.03em; color:var(--dt-strong);
}
html[lang="zh"] .hero-h1{
  font-weight:650; line-height:1.18; letter-spacing:0;
  font-size:clamp(34px,5.8vw,56px);
}
.hero.compact .hero-h1{ font-size:clamp(32px,5.2vw,52px); }
.hero-sub{
  margin:24px 0 0; max-width:40ch; font-size:clamp(17px,1.6vw,19px);
  line-height:1.55; color:var(--dt-mute); font-weight:400;
}
.hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.hero-proof{
  margin:20px 0 0; font-size:13px; font-weight:500; letter-spacing:.02em;
  color:rgba(190,210,228,.55);
}
html[lang="zh"] .hero-proof{ letter-spacing:.04em; }
.hero-channels{
  display:flex; flex-wrap:wrap; gap:10px; margin-top:20px;
}
.hero-channels .ch{
  display:inline-flex; align-items:center; gap:9px;
  padding:9px 14px 9px 10px; border-radius:12px;
  font-size:13px; font-weight:600; letter-spacing:.01em;
  color:rgba(240,247,255,.88);
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.045);
}
.hero-channels .ch i{
  width:32px; height:32px; border-radius:8px;
  display:block; flex:none; overflow:hidden;
  background:transparent; box-shadow:none; border:0;
}
.hero-channels .ch i img{
  width:32px; height:32px; display:block;
  object-fit:cover;
}

.hero-mark{
  position:relative; z-index:1; justify-self:center;
  display:flex; flex-direction:column; align-items:center;
}
.hero-stage{
  position:relative;
  width:min(360px,78vw); aspect-ratio:1;
  display:grid; place-items:center;
  border-radius:32px;
  background:
    radial-gradient(80% 70% at 50% 35%, rgba(42,159,224,.18), transparent 62%),
    linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 40px 100px -40px rgba(5,116,181,.55), inset 0 1px 0 rgba(255,255,255,.08);
}
.hero-mark .logo-real{
  width:clamp(140px,18vw,200px); height:auto;
  filter:drop-shadow(0 20px 48px rgba(5,116,181,.5));
  animation:floaty 7s ease-in-out infinite;
}
.hero-mark .logo-refl{
  position:absolute; bottom:14%; left:50%; transform:translateX(-50%) scaleY(-1);
  width:clamp(140px,18vw,200px); height:auto; opacity:.18;
  -webkit-mask:linear-gradient(180deg,#000,transparent 70%); mask:linear-gradient(180deg,#000,transparent 70%);
  filter:blur(.5px); animation:floatyR 7s ease-in-out infinite;
}
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
@keyframes floatyR{ 0%,100%{ transform:translateX(-50%) scaleY(-1) translateY(0); } 50%{ transform:translateX(-50%) scaleY(-1) translateY(-10px); } }

.hero::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:120px; z-index:-1;
  background:linear-gradient(180deg,transparent,var(--ink-2));
}
.hero.compact::after{ height:64px; }

@media (max-width:820px){
  .hero-inner{ grid-template-columns:1fr; padding-block:112px 72px; gap:40px; }
  .hero-mark{ order:-1; }
  .hero-copy{ text-align:center; }
  .hero-eyebrow{ justify-content:center; }
  .hero-sub{ margin-inline:auto; }
  .hero-cta, .hero-channels{ justify-content:center; }
  .hero-proof{ text-align:center; }
}

/* LINES / PATHS */
.lines{
  background:var(--ink-2);
  border-block:1px solid var(--hair-dark);
  padding-block:clamp(48px,7vw,72px);
}
.lines-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,64px);
}
.line-link{ display:block; max-width:36ch; }
.line-link .kicker{
  font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--blue-on-dark); margin:0 0 12px;
}
html[lang="zh"] .line-link .kicker{ letter-spacing:.08em; }
.line-link h2{
  margin:0; font-family:var(--font-display); font-weight:650;
  font-size:clamp(26px,3.2vw,36px); letter-spacing:-.02em; color:var(--dt-strong); line-height:1.12;
}
html[lang="zh"] .line-link h2{ font-family:var(--font-sys); letter-spacing:0; }
.line-link p{ margin:14px 0 0; color:var(--dt-mute); font-size:16px; line-height:1.6; }
.line-link .go{
  display:inline-flex; align-items:center; gap:6px; margin-top:18px;
  font-weight:600; color:var(--blue-on-dark); transition:gap .2s ease;
}
.line-link:hover .go{ gap:10px; }
@media (max-width:720px){ .lines-grid{ grid-template-columns:1fr; gap:36px; } }

/* CASES */
.cases-head{ max-width:46ch; margin-bottom:clamp(36px,5vw,56px); }
.case-feature{
  display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(22px,3vw,40px);
  align-items:center; margin-bottom:clamp(28px,4vw,44px);
}
.case-feature-shot{
  display:block; border-radius:var(--r-xl); overflow:hidden;
  border:1px solid var(--hair-dark); aspect-ratio:16/10; background:#0a151d;
}
.sec.light .case-feature-shot{ border-color:var(--hair-light); }
.case-feature-shot img{
  width:100%; height:100%; object-fit:cover; object-position:top center; display:block;
  transition:transform .55s cubic-bezier(.22,.7,.25,1);
}
.case-feature-shot:hover img{ transform:scale(1.02); }
.case-feature-copy .name{
  margin:10px 0 12px; font-size:clamp(22px,2.4vw,28px); font-weight:650;
  letter-spacing:-.02em; color:var(--dt-strong);
}
.sec.light .case-feature-copy .name{ color:var(--t-strong); }
.case-feature-copy .name a{ color:inherit; }
.case-feature-copy .name a:hover{ color:var(--blue-on-dark); }
.sec.light .case-feature-copy .name a:hover{ color:var(--blue-text); }
.case-feature-copy .desc{ margin:0; font-size:16px; line-height:1.7; color:var(--dt-mute); max-width:40ch; }
.sec.light .case-feature-copy .desc{ color:var(--t-body); }
@media (max-width:820px){
  .case-feature{ grid-template-columns:1fr; gap:18px; }
}
.case-group{ margin-top:clamp(28px,4vw,44px); }
.case-group:first-of-type{ margin-top:0; }
.case-group .group-label{
  font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--blue-on-dark); margin:0 0 8px;
}
.sec.light .case-group .group-label{ color:var(--blue-text); }
html[lang="zh"] .case-group .group-label{ letter-spacing:.08em; }
.case-list{ list-style:none; margin:0; padding:0; }
.case-list li{
  display:grid; grid-template-columns:minmax(9rem,14rem) 1fr;
  gap:16px 28px; align-items:baseline;
  padding:22px 0; border-top:1px solid var(--hair-dark);
}
.sec.light .case-list li{ border-color:var(--hair-light); }
.case-list li:last-child{ border-bottom:1px solid var(--hair-dark); }
.sec.light .case-list li:last-child{ border-color:var(--hair-light); }
.case-list .name{
  margin:0; font-weight:650; font-size:clamp(17px,1.6vw,20px);
  color:var(--dt-strong); line-height:1.3;
}
.sec.light .case-list .name{ color:var(--t-strong); }
.case-list .name a{ color:inherit; }
.case-list .name a:hover{ color:var(--blue-on-dark); }
.sec.light .case-list .name a:hover{ color:var(--blue-text); }
.case-list .desc{ margin:0; font-size:16px; line-height:1.65; color:var(--dt-mute); max-width:52ch; }
.sec.light .case-list .desc{ color:var(--t-body); }
@media (max-width:640px){
  .case-list li{ grid-template-columns:1fr; gap:8px; }
}

/* PRODUCTS */
.prod-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,84px); align-items:center; }
.prod-grid.flip .prod-copy{ order:2; }
.prod-grid.flip .prod-visual{ order:1; }

.prod-index{
  font-family:var(--font-serif); font-size:15px; font-weight:500; letter-spacing:.04em;
  color:var(--dt-mute); font-variant-numeric:tabular-nums; margin-bottom:18px; display:block;
}
.sec.light .prod-index{ color:var(--t-mute); }

.prod-name{
  font-size:clamp(32px,4.4vw,52px); font-weight:650; letter-spacing:-.025em; line-height:1; margin:0;
  color:var(--dt-strong);
}
.sec.light .prod-name{ color:var(--t-strong); }

.prod-headline{
  font-size:clamp(20px,2.2vw,27px); font-weight:600; line-height:1.28;
  letter-spacing:-.01em; margin:18px 0 0; color:var(--dt-strong);
}
.sec.light .prod-headline{ color:#16323f; }
html[lang="zh"] .prod-headline{ letter-spacing:0; line-height:1.42; }

.prod-body{ font-size:17px; line-height:1.65; max-width:46ch; margin:16px 0 0; color:var(--dt-body); }
.sec.light .prod-body{ color:var(--t-body); }

.prod-meta{ display:flex; align-items:center; gap:18px; margin-top:24px; flex-wrap:wrap; }

.trusted{ margin-top:28px; }
.trusted-label{
  font-size:12px; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color:var(--dt-mute); margin-bottom:12px;
}
.sec.light .trusted-label{ color:var(--t-mute); }
html[lang="zh"] .trusted-label{ letter-spacing:.06em; }
.chips{ display:flex; flex-wrap:wrap; gap:9px; }
.chip{
  padding:7px 15px; border-radius:var(--r-pill); font-size:14px; font-weight:500;
  border:1px solid var(--hair-dark); background:rgba(255,255,255,.04); color:var(--dt-body);
}
.sec.light .chip{ border-color:var(--hair-light); background:rgba(12,25,34,.03); color:#46596a; }

.channels{ margin-top:22px; }
.channels .trusted-label{ margin-bottom:10px; }

.prod-visual{
  position:relative; border-radius:var(--r-xl); overflow:hidden;
  aspect-ratio:16/10; min-height:280px;
  border:1px solid var(--hair-dark); box-shadow:var(--sh-2); isolation:isolate;
  background:#0a151d;
}
.sec.light .prod-visual{ border-color:var(--hair-light); }
.prod-visual .shot{ display:block; width:100%; height:100%; }
.prod-visual .shot img{
  width:100%; height:100%; object-fit:cover; object-position:top center;
  display:block; transition:transform .55s cubic-bezier(.22,.7,.25,1);
}
.prod-visual .shot:hover img{ transform:scale(1.02); }

@media (max-width:820px){
  .prod-grid{ grid-template-columns:1fr; gap:34px; }
  .prod-grid.flip .prod-copy{ order:1; }
  .prod-grid.flip .prod-visual{ order:2; }
  .prod-visual{ min-height:260px; }
}

/* ABOUT / PROSE */
.about-grid{ display:grid; grid-template-columns:auto 1fr; gap:clamp(28px,5vw,72px); align-items:start; }
.about-mark{ display:flex; flex-direction:column; align-items:center; }
.about-mark img{ width:108px; height:auto; }
.about-mark .refl{ width:108px; transform:scaleY(-1); opacity:.16; margin-top:4px;
  -webkit-mask:linear-gradient(180deg,#000,transparent 70%); mask:linear-gradient(180deg,#000,transparent 70%); }
.about-body{
  margin-top:20px; font-size:clamp(17px,1.6vw,20px); line-height:1.65;
  max-width:46ch; color:#27414f; font-weight:400;
}
.about-points{
  list-style:none; margin:22px 0 0; padding:0; display:grid; gap:14px; max-width:48ch;
}
.about-points li{
  padding:14px 0 0; border-top:1px solid var(--hair-light);
  font-size:15px; line-height:1.65; color:var(--t-body);
}
.about-points li:first-child{ border-top:0; padding-top:0; }
.about-points strong{ color:var(--t-strong); font-weight:650; }
.sig{ margin-top:22px; font-family:var(--font-serif); font-style:italic; font-size:24px; color:var(--blue-deep); }
.about-lead{ font-weight:650; font-size:clamp(26px,3.4vw,40px); line-height:1.14; letter-spacing:-.025em; color:var(--t-strong); margin:16px 0 0; max-width:22ch; }
html[lang="zh"] .about-lead{ letter-spacing:0; line-height:1.28; max-width:16em; }
.about-credit{ margin-top:22px; font-size:15px; line-height:1.6; color:var(--t-mute); max-width:48ch; }
@media (max-width:680px){
  .about-grid{ grid-template-columns:1fr; }
  .about-mark{ flex-direction:row; align-items:center; gap:0; }
  .about-mark img{ width:78px; }
  .about-mark .refl{ display:none; }
}

.prose{ font-size:clamp(16px,1.4vw,18px); line-height:1.75; color:var(--t-body); }
.prose p{ margin:0 0 1.1em; max-width:62ch; }
.prose h2{
  font-family:var(--font-display); font-weight:650; font-size:clamp(24px,3vw,34px);
  letter-spacing:-.02em; color:var(--t-strong); margin:2.2em 0 .7em; line-height:1.2;
}
html[lang="zh"] .prose h2{ font-family:var(--font-sys); letter-spacing:0; }
.prose h3{
  font-weight:650; font-size:clamp(18px,1.8vw,22px); color:var(--t-strong);
  margin:1.8em 0 .5em;
}
.prose ul, .prose ol{ margin:0 0 1.2em; padding-left:1.2em; max-width:62ch; }
.prose li{ margin:.35em 0; }
.prose a{ color:var(--blue-text); text-decoration:underline; text-underline-offset:3px; }
.fact-list{ list-style:none; padding:0; margin:0 0 1.4em; }
.fact-list li{
  display:grid; grid-template-columns:9rem 1fr; gap:16px;
  padding:14px 0; border-top:1px solid var(--hair-light);
  font-size:16px;
}
.fact-list li:last-child{ border-bottom:1px solid var(--hair-light); }
.fact-list .k{ color:var(--t-mute); font-weight:600; }
.fact-list .v{ color:var(--t-strong); }
@media (max-width:560px){
  .fact-list li{ grid-template-columns:1fr; gap:4px; }
}

/* FAQ */
.faq{ margin-top:8px; }
.faq details{ border-top:1px solid var(--hair-light); padding:20px 0; }
.faq details:last-child{ border-bottom:1px solid var(--hair-light); }
.faq summary{
  cursor:pointer; list-style:none; display:flex; align-items:flex-start; justify-content:space-between; gap:18px;
  font-weight:600; font-size:clamp(17px,1.7vw,20px); color:var(--t-strong);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; color:var(--blue-text); font-weight:400; font-size:1.4em; line-height:1; flex:none; }
.faq details[open] summary::after{ content:"–"; }
.faq details p{ margin-top:12px; max-width:72ch; color:var(--t-body); line-height:1.7; font-size:clamp(15px,1.5vw,17px); }
html[lang="zh"] .faq details p{ line-height:1.85; }
.sec.dark .faq details{ border-color:var(--hair-dark); }
.sec.dark .faq summary{ color:var(--dt-strong); }
.sec.dark .faq summary::after{ color:var(--blue-on-dark); }
.sec.dark .faq details p{ color:var(--dt-body); }

/* CONTACT */
.contact{ text-align:center; background:radial-gradient(120% 100% at 50% 0%, #11293c, #0a151d 62%); }
.contact .lead{ margin-inline:auto; }
.contact-ways{
  margin-top:40px;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:28px 40px;
}
.contact-actions{
  display:flex; flex-direction:column; align-items:stretch; gap:12px;
  min-width:min(100%, 320px);
}
.mail-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:11px;
  padding:17px 34px; border-radius:var(--r-pill);
  font-size:clamp(17px,1.9vw,20px); font-weight:600; color:#fff;
  background:linear-gradient(180deg,var(--blue-bright),var(--blue-deep));
  box-shadow:var(--sh-glow); transition:transform .25s ease, box-shadow .25s ease, background .2s ease, border-color .2s ease;
}
.mail-btn:hover{ transform:translateY(-2px); box-shadow:0 32px 90px -24px rgba(5,116,181,.75); }
.mail-btn svg{ width:20px; height:20px; flex:none; }
.mail-btn.secondary{
  background:transparent; box-shadow:none;
  border:1px solid rgba(255,255,255,.22); color:rgba(240,247,255,.9);
  font-size:clamp(15px,1.6vw,17px); padding:14px 28px;
}
.mail-btn.secondary:hover{
  border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.05);
  box-shadow:none;
}
.wechat-card{
  margin:0; display:flex; flex-direction:column; align-items:center; gap:12px;
}
.wechat-card img{
  width:168px; height:168px; display:block;
  border-radius:14px; background:#fff; padding:10px;
  box-sizing:border-box;
}
.wechat-card figcaption{
  font-size:13px; font-weight:600; letter-spacing:.02em;
  color:rgba(220,232,244,.72);
}
html[lang="zh"] .wechat-card figcaption{ letter-spacing:.06em; }

/* FOOTER */
footer.site{ background:var(--ink); border-top:1px solid var(--hair-dark); padding-block:48px; }
.foot{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.foot-brand{ display:flex; align-items:center; gap:11px; }
.foot-brand img{ height:34px; width:auto; }
.foot-brand span{ font-weight:600; color:var(--dt-strong); }
.foot-prod{ font-size:14px; color:var(--dt-mute); }
.foot-prod a{ color:var(--dt-mute); }
.foot-prod a:hover{ color:var(--blue-on-dark); }
.foot-copy{ font-size:14px; color:var(--dt-mute); }
@media (max-width:560px){ .foot{ flex-direction:column; align-items:flex-start; gap:14px; } }

/* REVEAL */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .55s cubic-bezier(.22,.7,.25,1), transform .55s cubic-bezier(.22,.7,.25,1); will-change:opacity,transform; }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.06s; }
.reveal.d2{ transition-delay:.12s; }
.reveal.d3{ transition-delay:.18s; }
.no-js .reveal{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .hero-mark .logo-real,.hero-mark .logo-refl,.ripples span{ animation:none !important; }
  *{ scroll-behavior:auto !important; }
}