.experience {
  max-width: 1240px;
  margin: 0 auto;
  padding: 72px 34px 120px;
}

.experience-heading {
  display: grid;
  grid-template-columns: 1fr 0.62fr;
  align-items: end;
  gap: 72px;
  margin-bottom: 54px;
}

.experience-heading h2 {
  margin: 0;
  font-size: clamp(48px, 5.7vw, 78px);
  line-height: 0.92;
  letter-spacing: -0.065em;
}

.experience-heading h2 i {
  font-family: var(--serif);
  color: var(--green);
  font-weight: 400;
}

.experience-heading > p {
  margin: 0 0 5px;
  max-width: 470px;
  color: #61766f;
  font-size: 13px;
  line-height: 1.75;
}

.experience-shell {
  overflow: hidden;
  border: 1px solid rgba(14, 52, 43, 0.12);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.58);
  box-shadow: 0 34px 90px rgba(24, 60, 50, 0.12);
  backdrop-filter: blur(18px);
}

.experience-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--line);
  background: rgba(245, 247, 242, 0.72);
}

.experience-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 67px;
  padding: 0 24px;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  color: #7b8c86;
  cursor: pointer;
  overflow: hidden;
  transition: color 0.25s, background 0.25s;
}

.experience-tab:last-child { border-right: 0; }
.experience-tab span { font: 400 12px var(--serif); }
.experience-tab b { font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; }
.experience-tab > i { position: absolute; inset: auto 0 0; height: 2px; background: var(--green); transform: scaleX(0); transform-origin: left; }
.experience-tab.active { color: var(--forest); background: rgba(255, 255, 255, 0.65); }
.experience-tab.active > i { animation: tabProgress 7s linear both; }
.experience-tab:hover { color: var(--forest); }

.concept-window { min-height: 650px; }
.concept-toolbar { height: 54px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 22px; border-bottom: 1px solid var(--line); color: #83928d; font-size: 8px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 850; }
.concept-toolbar > b { justify-self: end; display: flex; align-items: center; gap: 8px; color: #5f756e; }
.concept-toolbar > b i { width: 6px; height: 6px; border-radius: 50%; background: #36b98f; box-shadow: 0 0 0 5px rgba(54, 185, 143, 0.11); animation: pulse 2.2s ease-out infinite; }
.window-dots { display: flex; gap: 6px; }
.window-dots i { width: 7px; height: 7px; border-radius: 50%; background: #d9dfdc; }
.window-dots i:nth-child(1) { background: #dfa79d; }
.window-dots i:nth-child(2) { background: #e5cf91; }
.window-dots i:nth-child(3) { background: #9ed1bd; }

.concept-scene {
  min-height: 596px;
  padding: 36px 42px 42px;
  opacity: 0;
  transform: translateY(12px);
}

.concept-scene.active { animation: sceneIn 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
.snapshot-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
.concept-label { display: block; margin-bottom: 8px; color: var(--green); font-size: 8px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.14em; }
.snapshot-head h3 { margin: 0; font: 400 clamp(29px, 3.2vw, 46px)/1.03 var(--serif); letter-spacing: -0.04em; color: var(--forest); }
.evidence-chip { flex: 0 0 auto; padding: 9px 12px; border-radius: 999px; background: #dff2e9; color: #176d56; font-size: 8px; font-weight: 850; letter-spacing: 0.07em; text-transform: uppercase; }
.evidence-chip.amber { background: #f7edcf; color: #8b611e; }
.evidence-chip.blue { background: #e2eef4; color: #3c6680; }

.snapshot-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; align-items: center; gap: 54px; min-height: 300px; padding: 30px 50px; border-radius: 20px; background: linear-gradient(135deg, #edf4f0, #f4f6f2); border: 1px solid rgba(14, 52, 43, 0.07); }
.score-orbit { width: 218px; aspect-ratio: 1; margin: auto; border-radius: 50%; position: relative; display: grid; place-items: center; background: conic-gradient(from 225deg, var(--green) 0 var(--score), #dce5e0 var(--score) 75%, transparent 75%); transform: rotate(-135deg); }
.score-orbit::after { content: ""; position: absolute; inset: 18px; border-radius: 50%; background: #f1f5f2; }
.score-orbit > div { position: relative; z-index: 1; display: grid; grid-template-columns: auto auto; align-items: baseline; transform: rotate(135deg); text-align: center; }
.score-orbit strong { font: 700 66px/1 var(--sans); letter-spacing: -0.07em; color: var(--forest); }
.score-orbit small { color: #8a9c95; font-size: 16px; }
.score-orbit span { grid-column: 1 / -1; color: #71857e; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; margin-top: 8px; }
.signal-bars { display: grid; gap: 27px; }
.signal-bars > div { display: grid; gap: 10px; }
.signal-bars span { display: flex; justify-content: space-between; color: #556c64; font-size: 11px; font-weight: 700; }
.signal-bars span b { color: var(--forest); }
.signal-bars i { height: 7px; border-radius: 999px; background: #dce6e1; overflow: hidden; }
.signal-bars em { display: block; width: var(--fill); height: 100%; border-radius: inherit; background: linear-gradient(90deg, #1da47d, #70b995); transform: scaleX(0); transform-origin: left; }
.concept-scene.active .signal-bars em { animation: fillBar 0.9s 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
.mini-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px; }
.mini-metrics > div { display: grid; gap: 5px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, 0.72); }
.mini-metrics span, .mini-metrics small { color: #7b8d86; font-size: 8px; text-transform: uppercase; letter-spacing: 0.07em; }
.mini-metrics strong { color: var(--forest); font: 600 20px var(--serif); }
.mini-metrics small { font-size: 7px; text-transform: none; letter-spacing: 0; }

.scenario-board { border: 1px solid rgba(14, 52, 43, 0.08); border-radius: 20px; background: linear-gradient(145deg, #fbfcf9, #eef3ef); padding: 28px; }
.chart-area { height: 315px; position: relative; padding: 5px 0 28px 48px; }
.chart-area svg { position: absolute; inset: 18px 18px 34px 48px; width: calc(100% - 66px); height: calc(100% - 52px); overflow: visible; }
.axis-label { position: absolute; left: 3px; font-size: 8px; color: #8c9a95; }
.y-top { top: 22px; } .y-mid { top: 48%; } .y-base { bottom: 35px; }
.chart-gridline { position: absolute; left: 48px; right: 18px; height: 1px; border-top: 1px dashed #ccd7d1; }
.g1 { top: 28px; } .g2 { top: 50%; } .g3 { bottom: 40px; }
.line-path { fill: none; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 900; stroke-dashoffset: 900; }
.line-high { stroke: #94bcae; stroke-dasharray: 8 8; }
.line-base { stroke: #178066; stroke-width: 4; }
.line-low { stroke: #d09a3b; stroke-dasharray: 8 8; }
.area-path { fill: url(#scenarioFill); opacity: 0; }
.concept-scene.active .line-path { animation: drawLine 1.5s 0.15s ease forwards; }
.concept-scene.active .area-path { animation: fadeArea 0.8s 0.9s ease forwards; }
.chart-years { position: absolute; left: 48px; right: 18px; bottom: 10px; display: flex; justify-content: space-between; font-size: 8px; color: #84958f; }
.chart-tip { position: absolute; right: 5%; top: 28%; min-width: 155px; padding: 13px 15px; display: grid; gap: 5px; border: 1px solid rgba(14, 52, 43, 0.1); border-radius: 12px; background: rgba(255, 255, 255, 0.92); box-shadow: 0 15px 35px rgba(24, 60, 50, 0.12); transform: translateY(8px); opacity: 0; }
.concept-scene.active .chart-tip { animation: tipIn 0.45s 1.2s ease forwards; }
.chart-tip small { color: #7a8d86; font-size: 8px; }
.chart-tip strong { color: var(--green); font: 600 15px var(--serif); }
.scenario-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.scenario-values > div { display: grid; gap: 5px; padding: 15px 17px; border-radius: 13px; background: white; border: 1px solid var(--line); }
.scenario-values .base { background: #dfebe5; border-color: transparent; }
.scenario-values span, .scenario-values small { color: #7c8d87; font-size: 8px; }
.scenario-values strong { color: var(--forest); font-size: 16px; }

.locality-grid { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 16px; min-height: 430px; }
.local-map { position: relative; overflow: hidden; border-radius: 20px; background: #e6ece8; border: 1px solid rgba(14, 52, 43, 0.08); }
.local-map::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(35deg, transparent 48%, rgba(255,255,255,.62) 49%, rgba(255,255,255,.62) 51%, transparent 52%), linear-gradient(125deg, transparent 48%, rgba(255,255,255,.48) 49%, rgba(255,255,255,.48) 51%, transparent 52%); background-size: 115px 115px; }
.local-road { position: absolute; height: 4px; background: white; border: 1px solid rgba(70, 100, 90, 0.08); border-radius: 4px; transform-origin: left; }
.r1 { width: 90%; left: -5%; top: 58%; transform: rotate(-18deg); }.r2 { width: 75%; left: 30%; top: 25%; transform: rotate(45deg); }.r3 { width: 65%; left: 8%; top: 78%; transform: rotate(12deg); }
.local-heat { position: absolute; border-radius: 50%; filter: blur(13px); background: radial-gradient(circle, rgba(34,160,125,.42), rgba(90,196,164,.14) 52%, transparent 72%); animation: breathe 5s ease-in-out infinite; }
.h1 { width: 220px; height: 190px; left: 18%; top: 16%; }.h2 { width: 170px; height: 145px; right: 4%; bottom: 5%; animation-delay: -2.5s; }
.local-home, .local-point { position: absolute; display: grid; justify-items: center; gap: 5px; color: var(--forest); font-size: 8px; font-weight: 800; }
.local-home { left: 42%; top: 39%; }
.local-home i { width: 42px; height: 42px; border: 3px solid white; border-radius: 50%; background: var(--forest); box-shadow: 0 10px 30px rgba(11,45,39,.28), 0 0 0 8px rgba(24,128,102,.13); animation: float 4s ease-in-out infinite; }
.local-home i::after { content: "⌂"; color: white; display: grid; place-items: center; height: 100%; font-style: normal; font-size: 18px; }
.local-point i { width: 14px; height: 14px; border: 3px solid white; border-radius: 50%; background: #35a784; box-shadow: 0 5px 14px rgba(11,45,39,.2); }
.p1 { left: 18%; top: 22%; }.p2 { right: 16%; top: 27%; }.p3 { right: 22%; bottom: 16%; }
.context-list { display: grid; gap: 11px; }
.context-list > div { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 12px; padding: 18px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.76); }
.context-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: #e2f0e9; color: var(--green); font-size: 18px; }
.context-list p { margin: 0; display: grid; gap: 3px; }
.context-list small { color: #84958f; font-size: 7px; text-transform: uppercase; letter-spacing: .08em; }
.context-list strong { color: var(--forest); font-size: 11px; }
.context-list em { color: #82918c; font-size: 8px; font-style: normal; }
.context-list > div > b { color: var(--green); font: 600 13px var(--serif); white-space: nowrap; }

.capability-intro { display: grid; grid-template-columns: 1fr .82fr; align-items: end; gap: 70px; margin: 96px 0 34px; padding-top: 38px; border-top: 1px solid rgba(13,55,45,.13); }
.capability-intro span { color: var(--green); font-size: 8px; font-weight: 900; text-transform: uppercase; letter-spacing: .15em; }
.capability-intro h3 { margin: 13px 0 0; color: var(--forest); font: 500 42px/1.02 var(--serif); letter-spacing: -.04em; }
.capability-intro h3 i { color: var(--green); font-weight: 400; }
.capability-intro p { max-width: 480px; margin: 0 0 4px; color: #63766f; font-size: 11px; line-height: 1.8; }

.capability-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.capability-cards article { position: relative; min-height: 455px; overflow: hidden; padding: 30px; border: 1px solid rgba(14,55,45,.11); border-radius: 22px; background: linear-gradient(155deg, rgba(255,255,255,.83), rgba(242,247,244,.7)); box-shadow: 0 18px 50px rgba(24,60,50,.06); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s; }
.capability-cards article::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(180deg, var(--green), rgba(39,163,130,.08)); transform: scaleY(.32); transform-origin: top; transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.capability-cards article::after { content: ""; position: absolute; width: 180px; height: 180px; right: -85px; top: -85px; border-radius: 50%; background: radial-gradient(circle, rgba(44,174,139,.11), transparent 70%); transition: transform .5s; }
.capability-cards article:hover { transform: translateY(-7px); border-color: rgba(18,132,103,.25); box-shadow: 0 28px 70px rgba(24,60,50,.12); }
.capability-cards article:hover::before { transform: scaleY(1); }
.capability-cards article:hover::after { transform: scale(1.3); }
.capability-cards .analytics { transform: translateY(22px); background: linear-gradient(155deg, rgba(229,242,235,.92), rgba(255,255,255,.74)); }
.capability-cards .analytics:hover { transform: translateY(15px); }
.capability-cards .risk::before { background: linear-gradient(180deg, #d49a3a, rgba(212,154,58,.08)); }
.capability-top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.card-number { position: absolute; right: 23px; bottom: 12px; color: rgba(18,67,56,.055); font: 500 86px/1 var(--serif); letter-spacing: -.08em; }
.capability-icon { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 15px; background: #e3efea; color: #159577; }
.risk .capability-icon { color: #a96e17; background: #f5ead8; }
.capability-icon svg { width: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.capability-cards small { color: var(--green); font-size: 8px; font-weight: 900; text-transform: uppercase; letter-spacing: .13em; }
.risk small { color: #9a691f; }
.capability-cards h3 { position: relative; z-index: 1; margin: 35px 0 17px; color: var(--forest); font: 500 34px/1 var(--serif); letter-spacing: -.04em; }
.capability-cards h3 i { color: var(--green); font-weight: 400; }
.risk h3 i { color: #a56d1d; }
.capability-cards p { position: relative; z-index: 1; margin: 0; color: #63776f; font-size: 10px; line-height: 1.72; }
.capability-cards ul { list-style: none; padding: 0; margin: 25px 0 0; display: grid; gap: 10px; }
.capability-cards li { position: relative; z-index: 1; display: flex; align-items: center; gap: 9px; padding-bottom: 10px; border-bottom: 1px solid rgba(16,62,52,.08); color: #435e55; font-size: 9px; font-weight: 750; }
.capability-cards li::before { content: "✓"; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: #e1f1ea; color: var(--green); font-size: 9px; }
.risk li::before { background: #f5ead8; color: #a56d1d; }
.availability-note { position: absolute; left: 30px; bottom: 25px; z-index: 1; color: #8a9893; font-size: 7px; font-weight: 700; letter-spacing: .02em; }
.concept-disclaimer { max-width: 850px; margin: 22px auto 0; color: #84928e; font-size: 8px; line-height: 1.6; text-align: center; }

@keyframes sceneIn { to { opacity: 1; transform: none; } }
@keyframes fillBar { to { transform: scaleX(1); } }
@keyframes drawLine { to { stroke-dashoffset: 0; } }
@keyframes fadeArea { to { opacity: 1; } }
@keyframes tipIn { to { opacity: 1; transform: none; } }
@keyframes tabProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (max-width: 900px) {
  .experience-heading { grid-template-columns: 1fr; gap: 24px; }
  .concept-window { min-height: 690px; }
  .snapshot-grid { gap: 25px; padding: 30px; }
  .locality-grid { grid-template-columns: 1fr; }
  .local-map { min-height: 320px; }
  .context-list { grid-template-columns: repeat(3, 1fr); }
  .context-list > div { grid-template-columns: 1fr; align-content: start; }
  .capability-intro { grid-template-columns: 1fr; gap: 20px; margin-top: 75px; }
  .capability-cards { grid-template-columns: 1fr; }
  .capability-cards article { min-height: 410px; }
  .capability-cards .analytics, .capability-cards .analytics:hover { transform: none; }
}

@media (max-width: 620px) {
  .experience { padding: 45px 20px 90px; }
  .experience-heading { margin-bottom: 36px; }
  .experience-heading h2 { font-size: 47px; }
  .experience-tabs { display: flex; overflow-x: auto; scrollbar-width: none; }
  .experience-tab { flex: 0 0 190px; min-height: 62px; padding: 0 17px; }
  .concept-toolbar { grid-template-columns: 1fr 1fr; padding: 0 15px; }
  .concept-toolbar > span { display: none; }
  .concept-scene { min-height: 690px; padding: 27px 18px 22px; }
  .snapshot-head { align-items: flex-start; }
  .snapshot-head h3 { font-size: 30px; }
  .evidence-chip { font-size: 7px; padding: 7px 9px; }
  .snapshot-grid { grid-template-columns: 1fr; gap: 32px; padding: 24px 18px; }
  .score-orbit { width: 170px; }
  .score-orbit strong { font-size: 52px; }
  .signal-bars { width: 100%; gap: 19px; }
  .mini-metrics { grid-template-columns: 1fr; }
  .scenario-board { padding: 17px 10px; }
  .chart-area { height: 310px; padding-left: 34px; }
  .chart-area svg { left: 34px; width: calc(100% - 46px); }
  .chart-gridline, .chart-years { left: 34px; }
  .chart-tip { right: 3%; top: 36%; min-width: 130px; }
  .scenario-values { grid-template-columns: 1fr; }
  .local-map { min-height: 315px; }
  .context-list { grid-template-columns: 1fr; }
  .context-list > div { grid-template-columns: 38px 1fr auto; }
  .capability-intro { margin: 58px 0 25px; padding-top: 28px; }
  .capability-intro h3 { font-size: 36px; }
  .capability-intro p { font-size: 10px; }
  .capability-cards article { padding: 25px; }
  .capability-cards h3 { margin-top: 28px; font-size: 32px; }
  .availability-note { left: 25px; }
}

@media (prefers-reduced-motion: reduce) {
  .experience-tab.active > i, .concept-scene.active, .concept-scene.active .signal-bars em, .concept-scene.active .line-path, .concept-scene.active .area-path, .concept-scene.active .chart-tip, .local-heat, .local-home i { animation: none; }
  .concept-scene.active { opacity: 1; transform: none; }
  .concept-scene.active .signal-bars em { transform: scaleX(1); }
  .concept-scene.active .line-path { stroke-dashoffset: 0; }
  .concept-scene.active .area-path, .concept-scene.active .chart-tip { opacity: 1; transform: none; }
}