:root {
  --ink: #132721;
  --muted: #63736d;
  --subtle: #899891;
  --line: #dbe5df;
  --surface: #ffffff;
  --surface-alt: #f4f8f5;
  --canvas: var(--world-page-background, #f4f3ee);
  --green: #176847;
  --green-dark: #103f2d;
  --green-soft: #e4f2e9;
  --lime: #dbeccc;
  --amber: #a46013;
  --amber-bg: #fff1dd;
  --red: #ae4231;
  --red-bg: #fdefed;
  --blue: #356a88;
  --blue-bg: #e8f1f6;
  --shadow: 0 16px 42px rgba(14, 43, 34, 0.07);
  --radius-xl: 28px;
  --radius-lg: 18px;
  --radius-md: 12px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--world-font-sans);
  line-height: 1.6;
}
button, input, select { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, dl, dt, dd { margin: 0; }

.site-header {
  height: 70px;
  padding: 0 clamp(20px, 4vw, 48px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(22, 70, 53, 0.08);
  background: rgba(247, 250, 248, 0.9);
  backdrop-filter: blur(14px);
  position: sticky;
  top: 0;
  z-index: 20;
}
.brand-area, .header-actions { display: flex; align-items: center; gap: 14px; }
.brand {
  font-family: var(--world-font-sans);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: .11em;
}
.brand-divider { width: 1px; height: 20px; background: var(--line); }
.product-name { font-weight: 600; font-size: 15px; }
.beta-pill {
  border: 1px solid #bad8c8;
  color: var(--green);
  border-radius: 30px;
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
}
.mode-chip {
  background: var(--green-soft);
  color: var(--green-dark);
  padding: 7px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

main { max-width: 1280px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 46px) 62px; }
.hero {
  display: grid;
  grid-template-columns: minmax(380px, 1.05fr) minmax(350px, .95fr);
  align-items: center;
  gap: clamp(34px, 7vw, 88px);
  min-height: 527px;
  padding: 50px 0 34px;
}
.eyebrow {
  color: var(--green);
  text-transform: uppercase;
  font: 700 11px/1.5 var(--world-font-sans);
  letter-spacing: .19em;
  margin-bottom: 15px;
}
.hero h1 {
  font-size: clamp(35px, 4.1vw, 51px);
  line-height: 1.26;
  letter-spacing: -.055em;
  font-weight: 700;
  margin-bottom: 20px;
}
.hero h1 span { color: inherit; }
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}
.asset-title {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(100%, 590px);
  max-width: 100%;
  isolation: isolate;
}
.asset-map-preview {
  width: 100%;
  margin: 0;
  padding: clamp(19px, 2.3vw, 25px) clamp(16px, 2.2vw, 22px) clamp(17px, 2vw, 22px);
  border-radius: var(--radius-xl);
  border: 1px solid #e5ede8;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.asset-map-caption {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0 0 17px;
}
.asset-map-caption small {
  color: var(--green);
  font: 700 10px/1.5 var(--world-font-sans);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.asset-map-caption strong {
  color: var(--ink);
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.45;
  letter-spacing: -.03em;
}
.asset-map-canvas {
  position: relative;
  display: block;
  width: 100%;
  height: 170px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: normal;
  line-height: 1.2;
}
.asset-links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.asset-link {
  fill: none;
  stroke: rgba(23, 104, 71, .34);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
  animation: assetLinkDraw .66s cubic-bezier(.25,.75,.26,1) var(--link-delay, .42s) forwards;
}
.link-customer { --link-delay: .43s; }
.link-sales { --link-delay: .50s; }
.link-summary { --link-delay: .58s; }
.link-report { --link-delay: .64s; }
.similar-link {
  fill: none;
  stroke: rgba(164, 96, 19, .58);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-dasharray: 3 5;
  opacity: 0;
  animation: similarLinkShow .35s ease-out .73s forwards;
}
.asset-card {
  position: absolute;
  min-width: 100px;
  height: 44px;
  padding: 7px 10px 7px 30px;
  border-radius: 9px;
  border: 1px solid #dae7e0;
  background: var(--surface);
  box-shadow: 0 9px 22px rgba(14, 43, 34, .07);
  opacity: 0;
  transform: translate(var(--from-x), var(--from-y)) scale(.96);
  animation: assetCardEnter .48s cubic-bezier(.15,.8,.24,1) var(--delay) forwards;
}
.asset-card::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 11px;
  width: 12px;
  height: 17px;
  border-radius: 2px;
  background: var(--icon-bg);
  border: 1px solid var(--icon-border);
}
.asset-card::after {
  content: "";
  position: absolute;
  left: 13px;
  top: 15px;
  width: 6px;
  height: 1px;
  background: var(--icon-border);
  box-shadow: 0 4px 0 var(--icon-border), 0 8px 0 var(--icon-border);
}
.asset-card small {
  display: block;
  margin-bottom: 3px;
  color: var(--subtle);
  font: 700 8px/1 var(--world-font-sans);
  letter-spacing: .09em;
  text-transform: uppercase;
}
.asset-card strong {
  display: block;
  color: var(--ink);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.asset-card.excel {
  --icon-bg: #e8f3ed;
  --icon-border: #298057;
}
.asset-card.sheets {
  --icon-bg: #e4f2e9;
  --icon-border: #176847;
}
.asset-card.duplicate {
  border-style: dashed;
  border-color: #ead6ba;
  background: #fffdf8;
}
.asset-customer {
  left: 0;
  top: 17px;
  --from-x: -19px;
  --from-y: -11px;
  --delay: .05s;
}
.asset-sales {
  right: 5px;
  top: 10px;
  --from-x: 21px;
  --from-y: -13px;
  --delay: .12s;
}
.asset-copy {
  right: 0;
  top: 63px;
  min-width: 132px;
  --from-x: 28px;
  --from-y: -1px;
  --delay: .20s;
}
.asset-summary {
  left: 1px;
  bottom: 7px;
  --from-x: -20px;
  --from-y: 13px;
  --delay: .17s;
}
.asset-report {
  right: 5px;
  bottom: 5px;
  --from-x: 21px;
  --from-y: 13px;
  --delay: .25s;
}
.asset-hub {
  position: absolute;
  left: 50%;
  top: 52%;
  width: 106px;
  height: 52px;
  transform: translate(-50%, -50%) scale(.94);
  border-radius: 12px;
  border: 1px solid #bbdccb;
  background: var(--green-soft);
  box-shadow: 0 12px 24px rgba(23,104,71,.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  animation: assetHubEnter .46s cubic-bezier(.15,.8,.24,1) .48s forwards;
}
.asset-hub small {
  color: var(--green);
  font: 700 8px/1 var(--world-font-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.asset-hub strong {
  color: var(--green-dark);
  font: 700 11px/1 var(--world-font-sans);
  letter-spacing: .08em;
}
.similar-tag {
  position: absolute;
  right: 105px;
  top: 71px;
  padding: 2px 7px;
  border-radius: 12px;
  background: var(--amber-bg);
  color: var(--amber);
  font-size: 9px;
  font-weight: 700;
  opacity: 0;
  transform: translateY(-3px);
  animation: similarTagShow .38s ease-out .80s forwards;
}
.title-line {
  display: block;
  opacity: 0;
  transform: translateY(9px);
  animation: titleLineEnter .54s cubic-bezier(.2,.75,.25,1) .62s forwards;
}
.hero h1 .title-context {
  font-size: .76em;
  font-weight: 600;
  letter-spacing: -.045em;
  margin-bottom: .06em;
}
.hero h1 .title-object {
  animation-delay: .75s;
}
.hero h1 .title-accent {
  color: var(--green);
  animation-delay: .88s;
}
@keyframes assetCardEnter {
  to { opacity: 1; transform: translate(0, 0) scale(1); }
}
@keyframes assetHubEnter {
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes assetLinkDraw {
  to { stroke-dashoffset: 0; }
}
@keyframes similarLinkShow {
  to { opacity: 1; }
}
@keyframes similarTagShow {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes titleLineEnter {
  to { opacity: 1; transform: translateY(0); }
}
.hero-text {
  max-width: 520px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.95;
}
.primary-button, .secondary-button {
  border-radius: 10px;
  padding: 13px 21px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 600;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.primary-button { background: var(--green); color: #fff; box-shadow: 0 8px 22px rgba(23,104,71,.16); }
.primary-button:hover { background: #125b3e; transform: translateY(-1px); }
.secondary-button { background: var(--surface); color: var(--green-dark); border-color: var(--line); }
.secondary-button:hover { background: #eff6f2; transform: translateY(-1px); }
.compact { padding: 9px 15px; font-size: 13px; }


.risk-stage {
  margin: 0 0 clamp(32px, 5vw, 50px);
  padding: clamp(25px, 4vw, 38px);
  border: 1px solid #e9dfd2;
  border-radius: var(--radius-xl);
  background: linear-gradient(140deg, #fffdf9 0%, #faf6ef 100%);
  scroll-margin-top: 92px;
}
.risk-stage__intro {
  display: grid;
  grid-template-columns: minmax(350px, .92fr) minmax(330px, .8fr);
  justify-content: space-between;
  gap: clamp(22px, 4vw, 56px);
  align-items: end;
  margin-bottom: 21px;
}
.risk-stage__intro h2 {
  max-width: 650px;
  color: var(--ink);
  font-size: clamp(25px, 3.1vw, 36px);
  letter-spacing: -.055em;
  line-height: 1.43;
}
.risk-stage__lead {
  max-width: 485px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.9;
}
.risk-alert {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 0 0 18px;
  padding: 12px 15px;
  border: 1px solid #efd9bc;
  border-left: 4px solid var(--amber);
  border-radius: 12px;
  background: var(--amber-bg);
}
.risk-alert svg {
  flex: none;
  width: 25px;
  height: 25px;
  stroke: var(--amber);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.risk-alert strong {
  display: block;
  color: #75430d;
  font-size: 13px;
  margin-bottom: 2px;
}
.risk-alert p {
  color: #7c603b;
  font-size: 12px;
  line-height: 1.65;
}
.risk-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}
.risk-card {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
  padding: clamp(17px, 2vw, 22px);
  border: 1px solid #e4e1d8;
  border-radius: 16px;
  background: var(--surface);
}
.risk-card--featured { grid-column: span 3; min-height: 225px; }
.risk-card--compact { grid-column: span 2; min-height: 185px; }
.risk-card--privacy { border-color: #eccac2; background: linear-gradient(140deg, #fff 0%, #fff9f8 100%); }
.risk-card--security { border-color: #edd9b9; background: linear-gradient(140deg, #fff 0%, #fffaf1 100%); }
.risk-card__top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 2px;
}
.risk-card__top > div { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.risk-card small {
  color: var(--subtle);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
}
.risk-card--privacy small { color: var(--red); }
.risk-card--security small { color: var(--amber); }
.risk-card__icon {
  flex: none;
  width: 43px;
  height: 43px;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.risk-card--privacy .risk-card__icon { color: var(--red); }
.risk-card--security .risk-card__icon { color: var(--amber); }
.risk-card__icon .icon-shield,
.risk-card__icon .icon-file,
.risk-card__icon .icon-alert { stroke: currentColor; fill: none; }
.risk-card__icon .icon-alert { fill: var(--amber-bg); }
.risk-card__icon .icon-mark { stroke: currentColor; fill: none; stroke-width: 2.25; }
.risk-tag {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 3px 7px;
  color: var(--red);
  background: var(--red-bg);
  font-size: 10px;
  font-weight: 700;
}
.risk-card--security .risk-tag { color: var(--amber); background: var(--amber-bg); }
.risk-card h3 {
  color: var(--ink);
  font-size: clamp(16px, 1.65vw, 18px);
  letter-spacing: -.035em;
  line-height: 1.5;
}
.risk-card p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.75;
  flex: 1;
}
.risk-capability {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--green-soft);
  color: var(--green-dark);
  font-size: 11px;
  font-weight: 700;
}
.risk-card--privacy .risk-capability { color: #873529; background: #fceceb; }
.risk-card--security .risk-capability { color: #80500e; background: #fff0d8; }
.risk-bridge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 18px;
  padding: clamp(16px, 2vw, 20px);
  border: 1px solid #cfe2d7;
  border-radius: 15px;
  background: #f4faf6;
}
.risk-bridge div { display: grid; gap: 4px; }
.risk-bridge strong { color: var(--green-dark); font-size: 15px; line-height: 1.6; }
.risk-bridge p { color: var(--muted); font-size: 12px; line-height: 1.7; }
.risk-bridge .primary-button { flex: none; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 980px) {
  .risk-stage__intro { grid-template-columns: 1fr; }
  .risk-card--compact { grid-column: span 3; }
}
@media (max-width: 680px) {
  .risk-stage { padding: 20px 15px; }
  .risk-grid { grid-template-columns: 1fr; }
  .risk-card--featured, .risk-card--compact { grid-column: auto; min-height: auto; }
  .risk-bridge { flex-direction: column; align-items: stretch; }
  .risk-bridge .primary-button { width: 100%; text-align: center; }
}



.landing-flow {
  margin: 0 0 clamp(36px, 6vw, 70px);
  padding: clamp(28px, 4vw, 44px);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--surface);
}
.landing-flow__heading { display: grid; grid-template-columns: minmax(300px, .95fr) minmax(290px, .7fr); gap: clamp(22px, 4vw, 56px); align-items: end; margin-bottom: 28px; }
.landing-flow__heading h2 { max-width: 700px; font-size: clamp(25px, 3vw, 36px); line-height: 1.42; letter-spacing: -.055em; }
.landing-flow__heading > p { color: var(--muted); font-size: 14px; line-height: 1.9; }
.landing-flow__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.landing-flow__steps article { padding: 22px 20px; border-radius: 16px; background: var(--surface-alt); border: 1px solid #e3ece7; }
.landing-flow__steps small { display: block; margin-bottom: 9px; color: var(--green); font-size: 10px; font-weight: 700; letter-spacing: .16em; }
.landing-flow__steps h3 { margin-bottom: 7px; font-size: 17px; letter-spacing: -.035em; }
.landing-flow__steps p { color: var(--muted); font-size: 12px; line-height: 1.8; }
.landing-flow__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 25px; }
.landing-flow__actions .primary-button, .landing-flow__actions .secondary-button { display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 1040px) {
  .hero { grid-template-columns: 1fr; min-height: auto; padding-top: 44px; }
  .asset-map-preview { max-width: 610px; }
}
@media (max-width: 760px) {
  .hero h1 { font-size: 33px; }
  .asset-map-preview { padding: 17px 13px 14px; }
  .asset-map-caption { margin-bottom: 13px; }
  .asset-map-canvas { height: 152px; }
  .asset-card { min-width: 86px; height: 40px; padding: 6px 7px 6px 26px; }
  .asset-card::before { left: 8px; top: 10px; width: 11px; height: 15px; }
  .asset-card::after { left: 11px; top: 14px; width: 5px; }
  .asset-card strong { font-size: 10px; }
  .asset-copy { min-width: 114px; }
  .asset-hub { width: 94px; height: 46px; }
  .similar-tag { display: none; }
  .landing-flow__heading, .landing-flow__steps { grid-template-columns: 1fr; }
  .landing-flow__actions { flex-direction: column; }
  .landing-flow__actions a { width: 100%; }
}
@media (max-width: 410px) { .hero h1 { font-size: 28px; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .asset-card, .similar-link, .similar-tag, .title-line { animation: none !important; opacity: 1; transform: none; }
  .asset-link { animation: none !important; stroke-dashoffset: 0; }
}