:root {
  --bg: #f7f8f4;
  --paper: #fbfcf9;
  --ink: #1f241f;
  --muted: #687267;
  --line: #dfe4dc;
  --accent: #647b58;
  --accent-soft: #e8eee4;
  --max: 1180px;
  --body: 17px;
  --small: 13px;
  --h3: 20px;
  --h2: clamp(32px, 3.6vw, 48px);
  --h1: clamp(48px, 6.2vw, 82px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
  font-size: var(--body);
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 66px;
  padding: 0 36px;
  border-bottom: 1px solid rgba(223,228,220,.82);
  background: rgba(247,248,244,.91);
  backdrop-filter: blur(14px);
}
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 650; letter-spacing: .02em; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid #cdd5c9;
  border-radius: 8px;
  color: var(--accent);
  font-size: 14px;
}
.nav { display: flex; gap: 22px; color: var(--muted); font-size: 13.5px; }
.nav a:hover { color: var(--ink); }

.section {
  width: min(var(--max), calc(100% - 64px));
  margin: 0 auto;
  padding: 86px 0;
  border-bottom: 1px solid var(--line);
}
.section-kicker {
  margin-bottom: 22px;
  color: var(--accent);
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: .14em;
  text-transform: uppercase;
}
h1,h2,h3,p { margin-top: 0; }
h1 {
  max-width: 900px;
  margin-bottom: 22px;
  font-size: var(--h1);
  line-height: 1.01;
  letter-spacing: -.045em;
  font-weight: 620;
}
h2 {
  max-width: 790px;
  margin-bottom: 22px;
  font-size: var(--h2);
  line-height: 1.16;
  letter-spacing: -.025em;
  font-weight: 590;
}
h3 {
  margin-bottom: 9px;
  font-size: var(--h3);
  line-height: 1.4;
  font-weight: 610;
}
p { color: #535d52; }

.hero { padding-top: 108px; padding-bottom: 96px; }
.hero .eyebrow { margin-bottom: 25px; color: var(--muted); font-size: 11.5px; letter-spacing: .22em; }
.hero-cn { max-width: 720px; margin-bottom: 18px; font-size: clamp(22px, 2.45vw, 27px); line-height: 1.5; color: #4e584d; }
.hero-role {
  display: inline-flex;
  margin: 0 0 26px;
  padding: 8px 12px;
  border: 1px solid #d7ddd3;
  border-radius: 9px;
  background: rgba(251,252,249,.72);
  color: #5e695d;
  font-size: 13.5px;
}
.hero-meta { display: flex; flex-wrap: wrap; gap: 9px 18px; margin: 0 0 40px; color: var(--muted); font-size: 13.5px; }
.hero-meta span::before { content: "·"; margin-right: 7px; color: var(--accent); }
.text-link { display: inline-flex; gap: 9px; align-items: center; color: var(--accent); font-weight: 600; font-size: 15px; }
.text-link:hover { opacity: .75; }

.body-copy { max-width: 570px; font-size: 17px; }
.body-copy p { margin-bottom: 20px; }

.overview { padding-top: 68px; }
.overview-head { max-width: 760px; margin-bottom: 38px; }
.overview-head h2 { margin-bottom: 0; font-size: clamp(32px, 3vw, 44px); }
.overview-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.overview-grid article { min-height: 132px; padding: 22px 20px 20px 0; }
.overview-grid article + article { padding-left: 20px; border-left: 1px solid var(--line); }
.overview-grid span { display: block; margin-bottom: 16px; color: #8a9388; font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; }
.overview-grid strong { display: block; margin-bottom: 8px; font-size: 17px; font-weight: 610; line-height: 1.45; }
.overview-grid p { margin: 0; font-size: 13.5px; }
.case-note { max-width: 880px; margin: 22px 0 0; color: #7e877c; font-size: 12.5px; }

.story-section {
  display: grid;
  grid-template-columns: .86fr 1.24fr;
  gap: 62px;
  align-items: center;
}
.story-section.story-reverse { grid-template-columns: 1.24fr .86fr; }
.story-section.story-reverse .story-copy { order: 2; }
.story-section.story-reverse .story-visual { order: 1; }
.story-copy { min-width: 0; }
.story-copy > p { max-width: 560px; }
.story-visual { margin: 0; min-width: 0; }
.story-visual img,
.product-shot img,
.closing-visual img {
  width: 100%;
  border: 1px solid #d7ddd3;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 20px 56px rgba(36,45,34,.07);
}
.story-visual figcaption,
.product-shot figcaption {
  margin-top: 10px;
  color: #899188;
  font-size: 12px;
  line-height: 1.5;
  text-align: right;
}

.flow h2 { margin-bottom: 44px; }
.flow-grid { display: grid; grid-template-columns: 1fr 42px 1fr 42px 1fr; gap: 14px; align-items: stretch; }
.flow-grid article {
  min-height: 210px;
  padding: 25px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
}
.flow-num { display: block; margin-bottom: 40px; color: var(--accent); font-size: 12px; }
.flow-grid p { margin-bottom: 0; font-size: 15.5px; }
.flow-arrow { display: grid; place-items: center; color: #a1aaa0; font-size: 24px; }
.flow-note { max-width: 760px; margin: 22px 0 0; color: #7a8378; font-size: 13.5px; }

.flow-compact h2 { margin-bottom: 30px; }
.flow-rail {
  display: grid;
  grid-template-columns: 1fr 42px 1fr 42px 1fr;
  align-items: stretch;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.flow-rail a {
  display: grid;
  grid-template-columns: 34px 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  min-height: 92px;
  padding: 20px 16px;
  border-radius: 12px;
  transition: background .25s ease, transform .25s ease;
}
.flow-rail a:hover {
  background: rgba(232,238,228,.65);
  transform: translateY(-2px);
}
.flow-rail .flow-num {
  grid-row: 1 / 3;
  margin: 2px 0 0;
  font-size: 10.5px;
}
.flow-rail strong {
  align-self: end;
  font-size: 17px;
  font-weight: 620;
  line-height: 1.35;
}
.flow-rail small {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
}
.flow-rail .flow-arrow {
  min-height: 92px;
  font-size: 19px;
}

.product-section {
  display: grid;
  grid-template-columns: .76fr 1.42fr;
  gap: 62px;
  align-items: start;
}
.product-section.reverse { grid-template-columns: 1.42fr .76fr; }
.product-section.reverse .product-copy { order: 2; }
.product-section.reverse > .visual-stack { order: 1; }
.product-copy { position: sticky; top: 96px; }
.product-copy p { max-width: 520px; font-size: 16.5px; }
.quiet-list { margin: 26px 0 0; padding: 0; list-style: none; color: var(--muted); font-size: 15px; }
.quiet-list li { padding: 7px 0; border-bottom: 1px solid #e4e8e1; }
.quiet-list li::before { content: "—"; margin-right: 9px; color: var(--accent); }
.visual-stack { display: grid; gap: 24px; min-width: 0; }
.visual-stack-large { gap: 28px; }
.product-shot { margin: 0; min-width: 0; }

.thought-showcase { position: relative; }
.thought-home-shot {
  transform: translateX(-14px) rotate(-.35deg);
  transition: transform .5s ease;
}
.thought-showcase:hover .thought-home-shot { transform: translateX(-8px) rotate(0deg); }
.thought-transform {
  position: relative;
  overflow: hidden;
  border: 1px solid #d7ddd3;
  border-radius: 20px;
  background: linear-gradient(145deg, #fbfcf9 0%, #f3f6f0 100%);
  box-shadow: 0 24px 70px rgba(36,45,34,.09);
  isolation: isolate;
}
.thought-transform::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 18% -10% -18% 28%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(125,151,111,.20), rgba(125,151,111,0) 66%);
  opacity: 0;
  transform: scale(.72);
  transition: opacity .85s ease, transform 1.05s cubic-bezier(.2,.8,.2,1);
}
.thought-transform.ai-active::before { opacity: 1; transform: scale(1.08); }
.thought-transform-head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 15px 17px 13px;
  border-bottom: 1px solid rgba(215,221,211,.82);
  background: rgba(251,252,249,.8);
}
.thought-mode {
  color: #8a9388;
  font-size: 11.5px;
  transition: color .35s ease, opacity .35s ease;
}
.thought-mode-faithful { color: #4e584d; }
.thought-transform.ai-active .thought-mode-faithful { color: #9aa198; }
.thought-transform.ai-active .thought-mode-ai { color: var(--accent); }
.thought-demo-toggle {
  position: relative;
  width: 38px;
  height: 22px;
  padding: 0;
  border: 1px solid #ccd5c8;
  border-radius: 999px;
  background: #e6ebe3;
  cursor: pointer;
  transition: background .4s ease, border-color .4s ease, box-shadow .4s ease;
}
.thought-demo-toggle span {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(36,45,34,.18);
  transition: transform .45s cubic-bezier(.2,.85,.2,1);
}
.thought-transform.ai-active .thought-demo-toggle {
  border-color: #78906d;
  background: #7d936f;
  box-shadow: 0 0 0 5px rgba(100,123,88,.08);
}
.thought-transform.ai-active .thought-demo-toggle span { transform: translateX(16px); }
.thought-transform-canvas {
  position: relative;
  aspect-ratio: 1.48 / 1;
  overflow: hidden;
  background: #fff;
}
.thought-layer {
  position: absolute;
  inset: 0;
  margin: 0;
  transition: opacity .85s ease, transform 1s cubic-bezier(.2,.8,.2,1), filter .85s ease;
}
.thought-layer img { width: 100%; height: 100%; object-fit: cover; }
.thought-layer-faithful { opacity: 1; transform: scale(1); filter: blur(0); }
.thought-layer-ai { opacity: 0; transform: translateY(18px) scale(.985); filter: blur(5px) saturate(.9); }
.thought-transform.ai-active .thought-layer-faithful { opacity: .16; transform: scale(.972); filter: blur(3px); }
.thought-transform.ai-active .thought-layer-ai { opacity: 1; transform: translateY(0) scale(1); filter: blur(0) saturate(1); }
.thought-transform-flare {
  position: absolute;
  right: 18px;
  bottom: 16px;
  padding: 6px 9px;
  border: 1px solid rgba(109,134,96,.34);
  border-radius: 999px;
  background: rgba(247,250,245,.88);
  color: #657b59;
  font-size: 8.5px;
  font-weight: 680;
  letter-spacing: .14em;
  opacity: 0;
  transform: translateY(7px);
  transition: opacity .55s ease .32s, transform .55s ease .32s;
}
.thought-transform.ai-active .thought-transform-flare { opacity: 1; transform: translateY(0); }
.thought-transform-caption {
  position: relative;
  min-height: 43px;
  padding: 12px 16px 13px;
  color: #7c8579;
  font-size: 12px;
}
.thought-transform-caption span {
  position: absolute;
  left: 16px;
  right: 16px;
  transition: opacity .45s ease, transform .45s ease;
}
.caption-faithful { opacity: 1; transform: translateY(0); }
.caption-ai { opacity: 0; transform: translateY(5px); }
.thought-transform.ai-active .caption-faithful { opacity: 0; transform: translateY(-5px); }
.thought-transform.ai-active .caption-ai { opacity: 1; transform: translateY(0); }

.decision-list { display: grid; gap: 0; margin-top: 28px; }
.decision-list article {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 18px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
}
.decision-list article:last-child { border-bottom: 1px solid var(--line); }
.decision-list span { color: var(--accent); font-size: 11.5px; padding-top: 4px; }
.decision-list h3 { font-size: 18px; margin-bottom: 6px; }
.decision-list p { margin: 0; font-size: 14.5px; }

.project-meta { margin: 34px 0 0; }
.project-meta div { display: grid; grid-template-columns: 88px 1fr; gap: 17px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.project-meta dt { color: #899188; font-size: 12.5px; }
.project-meta dd { margin: 0; color: #485247; font-size: 15px; }
.about-section h2 { font-size: clamp(30px, 3.2vw, 42px); max-width: 620px; }

.closing { padding-top: 96px; padding-bottom: 104px; }
.closing-grid {
  display: grid;
  grid-template-columns: .88fr 1.12fr;
  gap: 64px;
  align-items: center;
}
.closing-copy { min-width: 0; }
.closing-mark { margin-bottom: 27px; color: var(--accent); font-size: 13px; font-weight: 650; letter-spacing: .16em; }
.closing h2 { max-width: 760px; margin-bottom: 34px; }
.closing-visual { margin: 0; min-width: 0; }
.closing-visual img { background: #fbfcf9; }
.beta-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; }
.beta-cta p { margin: 0; color: #778176; font-size: 13.5px; }
.beta-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid #42523d;
  border-radius: 999px;
  background: #283226;
  color: #f8faf6;
  font-size: 14px;
  font-weight: 620;
  transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
}
.beta-button:hover {
  transform: translateY(-2px);
  background: #344131;
  box-shadow: 0 10px 28px rgba(36,45,34,.13);
}

footer {
  display: flex;
  justify-content: space-between;
  width: min(var(--max), calc(100% - 64px));
  margin: 0 auto;
  padding: 24px 0 38px;
  color: #8c948a;
  font-size: 12px;
}

.reveal { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; }
.reveal.visible { opacity: 1; transform: none; }

@media (max-width: 1080px) {
  .product-section,
  .product-section.reverse,
  .story-section,
  .story-section.story-reverse,
  .closing-grid { grid-template-columns: .86fr 1.14fr; gap: 46px; }
  .product-copy { position: static; }
}

@media (max-width: 980px) {
  .overview-grid { grid-template-columns: 1fr; }
  .overview-grid article,
  .overview-grid article + article { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .overview-grid article:first-child { border-top: 0; }
}

@media (max-width: 900px) {
  .site-header { padding: 0 22px; }
  .nav { gap: 15px; }
  .nav a:nth-child(2), .nav a:nth-child(3), .nav a:nth-child(4) { display: none; }
  .section { width: min(100% - 40px, var(--max)); padding: 66px 0; }
  .hero { padding-top: 84px; }
  .hero-role { display: block; width: fit-content; }
  .product-section,
  .product-section.reverse,
  .story-section,
  .story-section.story-reverse,
  .closing-grid { grid-template-columns: 1fr; gap: 34px; }
  .product-section.reverse .product-copy,
  .product-section.reverse > .visual-stack,
  .story-section.story-reverse .story-copy,
  .story-section.story-reverse .story-visual { order: initial; }
  .flow-grid { grid-template-columns: 1fr; }
  .flow-arrow { transform: rotate(90deg); min-height: 28px; }
  .flow-rail { grid-template-columns: 1fr; }
  .flow-rail a { min-height: 76px; padding: 16px 12px; }
  .flow-rail .flow-arrow { min-height: 24px; transform: rotate(90deg); }
  .thought-home-shot { transform: none; }
  .story-visual { margin-top: 4px; }
  .closing-visual { margin-top: 8px; }
  footer { width: calc(100% - 40px); }
}

@media (max-width: 620px) {
  .site-header { height: 62px; }
  .nav a:not(:last-child) { display: none; }
  .section { width: min(100% - 30px, var(--max)); padding: 58px 0; }
  h1 { font-size: clamp(44px, 14vw, 66px); }
  h2 { font-size: clamp(30px, 9vw, 40px); }
  .hero-cn { font-size: 21px; }
  .hero-role { font-size: 12.5px; line-height: 1.6; }
  .hero-meta { font-size: 12.5px; }
  .body-copy { font-size: 16px; }
  .product-copy p { font-size: 16px; }
  .quiet-list { font-size: 14.5px; }
  .decision-list article { grid-template-columns: 34px 1fr; gap: 12px; }
  .about-section h2 { font-size: clamp(29px, 8.5vw, 38px); }
  .thought-transform-head { justify-content: center; }
  .thought-transform-canvas { aspect-ratio: 1.15 / 1; }
  .beta-cta { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .thought-home-shot,
  .thought-transform::before,
  .thought-mode,
  .thought-demo-toggle,
  .thought-demo-toggle span,
  .thought-layer,
  .thought-transform-flare,
  .thought-transform-caption span,
  .beta-button,
  .flow-rail a { transition: none; }
}