:root {
  color-scheme: light;
  font-family: "Avenir Next", Avenir, "Century Gothic", "Helvetica Neue", Arial, sans-serif;
  color: #172330;
  background: #e8edf2;
  --ink: #172330;
  --graphite: #223b4f;
  --muted: #4e6375;
  --soft: #708392;
  --line: rgba(255, 255, 255, .78);
  --cool-line: rgba(74, 104, 126, .22);
  --glass: linear-gradient(130deg, rgba(255,255,255,.62), rgba(237,244,250,.32) 48%, rgba(255,255,255,.58));
  --danger: #9b3030;
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  background:
    radial-gradient(circle at 74% -12%, rgba(255,255,255,.96) 0 9%, rgba(196,220,239,.58) 28%, transparent 54%),
    radial-gradient(circle at 3% 88%, rgba(218,235,244,.68), transparent 34rem),
    linear-gradient(145deg, #eef3f6 0%, #dce7f0 52%, #edf2f6 100%);
  background-attachment: fixed;
  overflow-x: hidden;
}
body::before,
body::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
}
body::before {
  width: min(76vw, 68rem);
  aspect-ratio: 1;
  top: -48vw;
  right: -10vw;
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 50%;
  box-shadow: 0 0 5rem rgba(108,159,193,.12), inset 0 0 5rem rgba(255,255,255,.45);
}
body::after {
  width: 70vw;
  height: 1px;
  left: -8vw;
  top: 34vh;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.94), rgba(126,173,204,.28), transparent);
  box-shadow: 0 0 2rem .15rem rgba(255,255,255,.72);
  transform: rotate(-6deg);
}

button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { touch-action: manipulation; }

.shell {
  width: min(100%, 78rem);
  margin: 0 auto;
  padding: max(1rem, env(safe-area-inset-top)) clamp(.8rem, 2vw, 1.5rem) max(2rem, env(safe-area-inset-bottom));
}
.topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 5rem;
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
  padding: .75rem 1rem .75rem 1.55rem;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 100px;
  background: linear-gradient(145deg, rgba(255,255,255,.70), rgba(237,244,255,.45) 55%, rgba(255,255,255,.50));
  box-shadow: inset 0 1px 1px #fff, 0 14px 36px rgba(56,83,106,.075);
  backdrop-filter: blur(22px) saturate(115%);
  -webkit-backdrop-filter: blur(22px) saturate(115%);
}
.identity { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.brand {
  color: #111b24;
  font-size: clamp(1rem, 2vw, 1.32rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .3em;
  white-space: nowrap;
}
.brand span { color: #697a87; font-weight: 300; }
.mode {
  padding-left: .9rem;
  border-left: 1px solid rgba(63,92,114,.22);
  color: #536a7c;
  font-size: .72rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: .13em;
  text-transform: uppercase;
  white-space: nowrap;
}
.step-status { display: grid; gap: .45rem; justify-items: end; }
.step-label { color: #596f80; font-size: .75rem; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; }
.progress {
  position: relative;
  display: flex;
  gap: .68rem;
  padding: .18rem;
}
.progress::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: .55rem;
  right: .55rem;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, rgba(104,139,164,.24), rgba(255,255,255,.9), rgba(104,139,164,.24));
}
.progress span {
  width: .72rem;
  height: .72rem;
  border: 1px solid rgba(255,255,255,.92);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #fff, rgba(193,215,230,.66) 55%, rgba(116,156,181,.32));
  box-shadow: inset -.12rem -.12rem .3rem rgba(79,127,157,.12), 0 0 .65rem rgba(255,255,255,.72);
}
.progress span.on {
  background: radial-gradient(circle at 32% 27%, #fff, #bbdce9 56%, #6f9eb7 100%);
  box-shadow: inset -.12rem -.12rem .3rem rgba(55,104,133,.18), 0 0 .85rem rgba(112,177,203,.38);
}
.step-1 .progress span:nth-child(1),
.step-2 .progress span:nth-child(2),
.step-3 .progress span:nth-child(3),
.step-4 .progress span:nth-child(4) {
  transform: scale(1.35);
  border-color: rgba(255,255,255,.98);
  box-shadow: inset -.15rem -.15rem .35rem rgba(42,85,111,.18), 0 0 1.15rem rgba(86,164,194,.58);
}

.panel {
  position: relative;
  isolation: isolate;
  min-height: calc(100dvh - 9rem);
  padding: clamp(1.3rem, 5vw, 4.6rem) clamp(.35rem, 3vw, 2.3rem);
}
.panel::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: clamp(15rem, 34vw, 29rem);
  aspect-ratio: 1;
  right: -8%;
  top: -5rem;
  border: 1px solid rgba(255,255,255,.62);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, rgba(255,255,255,.7), rgba(183,217,235,.12) 48%, transparent 70%);
  box-shadow: inset -1.5rem -1.5rem 5rem rgba(72,130,164,.08), 0 0 5rem rgba(255,255,255,.42);
}

.intro { position: relative; z-index: 1; max-width: 54rem; margin-bottom: clamp(1.8rem, 5vw, 3.8rem); }
.eyebrow {
  display: inline-block;
  margin-bottom: .9rem;
  color: #5f7687;
  font-size: .76rem;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
}
h1 {
  max-width: 52rem;
  margin: 0;
  color: var(--ink);
  font-size: clamp(2.15rem, 5.1vw, 4rem);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.hint, .description { color: var(--muted); line-height: 1.6; }
.intro .hint { margin: 1rem 0 0; font-size: 1rem; }

.stack { display: grid; gap: .9rem; }
.needs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.need,
.card {
  border: 1px solid rgba(255,255,255,.78);
  color: var(--ink);
  background: var(--glass);
  box-shadow: inset 0 1px 1px #fff, inset 0 -1px 2px rgba(255,255,255,.42), 0 12px 34px rgba(67,93,118,.055);
  backdrop-filter: blur(18px) saturate(112%);
  -webkit-backdrop-filter: blur(18px) saturate(112%);
}
.need {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .8rem;
  min-height: 7.2rem;
  width: 100%;
  padding: 1rem 1.05rem;
  border-radius: 1.8rem;
  text-align: left;
  font-size: 1rem;
  font-weight: 400;
  cursor: pointer;
  overflow: hidden;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.need-number { align-self: start; color: #6b8292; font-size: .68rem; letter-spacing: .12em; }
.need-copy { line-height: 1.35; }
.need-light {
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid rgba(255,255,255,.92);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 27%, #fff, rgba(197,220,233,.58) 55%, rgba(115,157,181,.2));
  box-shadow: inset -.22rem -.22rem .65rem rgba(66,113,141,.12), 0 0 1rem rgba(255,255,255,.76);
  transition: transform .2s ease, box-shadow .2s ease;
}
.need:hover { transform: translateY(-2px); border-color: rgba(139,178,200,.52); }
.need.selected {
  color: #fff;
  border-color: rgba(255,255,255,.5);
  background: linear-gradient(145deg, rgba(49,70,86,.98), rgba(27,48,64,.96));
  box-shadow: inset 0 1px 1px rgba(255,255,255,.16), 0 18px 38px rgba(28,52,69,.18);
}
.need.selected .need-number { color: rgba(225,238,246,.65); }
.need.selected .need-light {
  transform: scale(1.08);
  background: radial-gradient(circle at 30% 25%, #fff, #c4e7f2 52%, #6ca6bd 100%);
  box-shadow: inset -.25rem -.25rem .7rem rgba(44,102,130,.22), 0 0 1.3rem rgba(130,211,235,.68);
}

.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.15rem; }
.card {
  display: flex;
  flex-direction: column;
  min-height: 19rem;
  padding: clamp(1.25rem, 3vw, 1.9rem);
  border-radius: 30px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: inset 0 1px 1px #fff, 0 18px 44px rgba(67,93,118,.09); }
.card:last-child:nth-child(odd) { grid-column: 1 / -1; min-height: 16rem; }
.card.selected { border-color: rgba(69,100,122,.55); box-shadow: inset 0 1px 1px #fff, 0 0 0 1px rgba(34,59,79,.22), 0 18px 44px rgba(67,93,118,.1); }
.card-topline { display: flex; justify-content: space-between; color: #63798a; font-size: .75rem; letter-spacing: .13em; text-transform: uppercase; }
.card h2 { margin: 2rem 0 .45rem; max-width: 29rem; font-size: clamp(1.45rem, 2.55vw, 1.94rem); font-weight: 400; line-height: 1.18; letter-spacing: -.035em; }
.price { color: var(--ink); font-size: clamp(1.4rem, 2.5vw, 1.7rem); font-weight: 400; }
.card .description { flex: 1; margin: 1rem 0; }
.actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.25rem; }
.card .actions { margin-top: auto; }
.btn {
  min-height: 3rem;
  border-radius: 100px;
  padding: .72rem 1.25rem;
  border: 1px solid rgba(255,255,255,.82);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #223b4f;
  background: linear-gradient(155deg, rgba(255,255,255,.76), rgba(225,237,246,.54) 62%, rgba(255,255,255,.63));
  box-shadow: inset 0 1px 1px rgba(255,255,255,.9), 0 8px 22px rgba(58,87,110,.08);
  font-size: .94rem;
  font-weight: 400;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: inset 0 1px 1px #fff, 0 11px 26px rgba(58,87,110,.12); }
.btn-primary { border-color: rgba(27,48,64,.92); background: linear-gradient(145deg, #314858, #1c3446); color: #fff; box-shadow: inset 0 1px 1px rgba(255,255,255,.15), 0 10px 25px rgba(27,48,64,.16); }
.btn-secondary { color: #223b4f; }
.btn-ghost { color: #223b4f; }
.btn:disabled { opacity: .36; cursor: not-allowed; transform: none; box-shadow: none; }
.return-note { color: #617687; font-size: .88rem; text-align: center; margin: 1.1rem 0 0; }
.unknown {
  margin-top: 1.35rem;
  padding: 1.05rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 24px;
  background: rgba(255,255,255,.28);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.unknown strong { font-weight: 400; }
.unknown .hint { margin: .2rem 0 0; font-size: .9rem; }

.nav { display: flex; justify-content: space-between; gap: .75rem; margin-top: 1.8rem; }
.nav .btn:last-child { margin-left: auto; }
.back-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  margin: -.4rem 0 1.6rem;
  padding: .55rem .9rem;
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 100px;
  background: rgba(255,255,255,.42);
  color: #29465a;
  font-size: .94rem;
  font-weight: 400;
  cursor: pointer;
}
.back-link:hover { border-color: rgba(65,111,138,.4); }

.selection-summary { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; margin-bottom: 1.5rem; }
.summary {
  min-width: 0;
  padding: 1.05rem 1.15rem;
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 20px;
  background: var(--glass);
  color: #38556a;
  overflow-wrap: anywhere;
  box-shadow: inset 0 1px 1px #fff;
}
.summary span { display: block; margin-bottom: .35rem; color: #718493; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
.summary strong { color: var(--ink); font-weight: 400; }
.form-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.field { display: grid; align-content: start; gap: .45rem; }
.field:has(textarea), .form-actions, .submit-error { grid-column: 1 / -1; }
.field label { color: #2a4659; font-weight: 400; }
.field input, .field textarea, .field select {
  width: 100%;
  min-height: 3.25rem;
  padding: .82rem .95rem;
  border: 1px solid rgba(75,111,135,.23);
  border-radius: 16px;
  background: rgba(255,255,255,.68);
  color: var(--ink);
  box-shadow: inset 0 1px 2px rgba(38,73,98,.035);
}
.field textarea { min-height: 7rem; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus, button:focus-visible, a:focus-visible {
  outline: 3px solid rgba(89,156,184,.27);
  outline-offset: 2px;
  border-color: rgba(54,112,141,.52);
}
.field [aria-invalid="true"] { border-color: var(--danger); }
.error { min-height: .2rem; color: var(--danger); font-size: .875rem; margin: 0; }
.submit-error { padding: .9rem 1rem; border: 1px solid rgba(176,74,74,.32); border-radius: 16px; background: rgba(255,237,237,.82); color: #7e1f1f; }
.form-actions { margin-top: .25rem; }
.form-actions .btn { min-width: min(100%, 14rem); }

.success { min-height: min(34rem, 68vh); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.success h1 { max-width: 42rem; }
.success .description { max-width: 35rem; margin: 1.2rem auto 0; font-size: 1.05rem; }
.success .actions { justify-content: center; }
.success-mark {
  width: 4.7rem;
  height: 4.7rem;
  display: grid;
  place-items: center;
  margin-bottom: 1.4rem;
  border: 1px solid rgba(255,255,255,.94);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, #fff, #c6e6ef 54%, #74a7bc 100%);
  color: #17384d;
  font-size: 1.7rem;
  box-shadow: inset -.35rem -.35rem 1rem rgba(55,113,141,.18), 0 0 2.7rem rgba(103,183,211,.44);
}

.details-view { position: fixed; inset: 0; z-index: 1000; display: grid; grid-template-rows: auto minmax(0, 1fr); background: #e8edf2; }
.details-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: max(.8rem, env(safe-area-inset-top)) 1rem .8rem;
  border-bottom: 1px solid rgba(255,255,255,.9);
  background: linear-gradient(145deg, rgba(255,255,255,.88), rgba(225,237,246,.82));
  color: var(--ink);
  box-shadow: 0 .35rem 1.2rem rgba(48,77,101,.11);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.details-copy { min-width: 0; display: grid; gap: .15rem; }
.details-copy small { color: #668092; font-size: .78rem; }
.details-title { min-width: 0; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.details-return {
  flex: 0 0 auto;
  min-height: 3.25rem;
  padding: .85rem 1.4rem;
  color: #123b54;
  font-weight: 600;
  line-height: 1.35;
  border: 1px solid #6bbbdc;
  background: linear-gradient(135deg, #e6faff 0%, #a8ddf3 52%, #c5edfc 100%);
  box-shadow: inset 0 2px 3px rgba(255,255,255,.95), inset 0 -2px 5px rgba(59,139,176,.13), 0 0 0 3px rgba(160,220,245,.25), 0 5px 18px rgba(63,148,188,.23), 0 0 24px rgba(129,215,249,.4);
}
.details-return:hover {
  color: #0d3047;
  border-color: #48a1ca;
  background: linear-gradient(135deg, #f2fcff, #98d6f0 52%, #bceafb);
  box-shadow: inset 0 2px 3px #fff, 0 0 0 3px rgba(142,209,240,.35), 0 7px 22px rgba(54,137,181,.3);
}
.details-return:focus-visible { outline: 3px solid #286789; outline-offset: 4px; }
.details-frame { width: 100%; height: 100%; border: 0; background: #fff; }

@media (max-width: 850px) {
  .needs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  body::before { width: 34rem; top: -26rem; right: -20rem; }
  body::after { width: 120vw; top: 27vh; }
  .shell { padding-inline: .65rem; }
  .topline { min-height: 4.2rem; padding: .65rem .72rem .65rem 1rem; }
  .identity { gap: .65rem; }
  .brand { font-size: .9rem; letter-spacing: .22em; }
  .mode { padding-left: .6rem; font-size: .6rem; letter-spacing: .08em; }
  .step-label { font-size: .64rem; }
  .progress { gap: .46rem; }
  .progress span { width: .58rem; height: .58rem; }
  .panel { min-height: calc(100dvh - 7rem); padding: 1.65rem .35rem 1.2rem; }
  .panel::before { width: 18rem; right: -9rem; top: -7rem; }
  h1 { font-size: clamp(2.15rem, 10.4vw, 3rem); line-height: 1.08; letter-spacing: -.035em; }
  .intro { margin-bottom: 2rem; }
  .needs-grid, .cards, .selection-summary, .form-stack { grid-template-columns: 1fr; }
  .need { min-height: 5.4rem; border-radius: 24px; }
  .card { min-height: 17rem; border-radius: 26px; }
  .card:last-child:nth-child(odd) { grid-column: auto; min-height: 17rem; }
  .unknown { align-items: stretch; flex-direction: column; }
  .unknown .btn { width: 100%; }
  .field:has(textarea), .form-actions, .submit-error { grid-column: auto; }
  .nav .btn { min-width: 7.2rem; }
  .details-bar { align-items: stretch; flex-direction: column; gap: .55rem; }
  .details-copy { text-align: center; }
  .details-return { width: 100%; min-height: 3.25rem; }
}

@media (max-width: 430px) {
  .mode { max-width: 5rem; white-space: normal; }
  .step-label { display: none; }
  .btn { padding-inline: 1rem; }
  .card .actions .btn { flex: 1 1 8rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

/* MVS application system — approved visual direction */
.step-1 .panel { padding-top: clamp(1.2rem, 2.4vw, 2.4rem); }
.step-1 .panel::before { opacity: .55; }
.choice-stage {
  display: grid;
  grid-template-columns: minmax(0, .94fr) minmax(31rem, 1.06fr);
  align-items: center;
  gap: clamp(1.15rem, 3vw, 3.3rem);
  min-height: calc(100dvh - 11rem);
}
.choice-work { position: relative; z-index: 2; min-width: 0; }
.choice-work .intro { margin-bottom: 1.55rem; }
.choice-work h1 { max-width: 42rem; }
.choice-work .needs-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  align-items: stretch;
  gap: .72rem;
}
.choice-work .need {
  min-height: 5.55rem;
  padding: .9rem 1rem;
  border-radius: 1.55rem;
  background: linear-gradient(135deg, rgba(255,255,255,.70), rgba(220,238,251,.34) 52%, rgba(255,255,255,.56));
  box-shadow: inset 0 1px 1px #fff, inset 0 -1px 2px rgba(255,255,255,.52), 0 12px 34px rgba(67,93,118,.055), 0 0 1.8rem rgba(255,255,255,.22);
}
.choice-work .need:hover {
  border-color: rgba(255,255,255,.98);
  box-shadow: inset 0 1px 1px #fff, 0 15px 34px rgba(71,124,158,.10), 0 0 1.8rem rgba(137,209,232,.22);
}
.choice-work .need.selected {
  color: #173246;
  border-color: rgba(255,255,255,.98);
  background: linear-gradient(145deg, rgba(255,255,255,.90), rgba(183,226,244,.54) 66%, rgba(255,255,255,.72));
  box-shadow: inset 0 1px 1px #fff, inset 0 0 1.6rem rgba(255,255,255,.78), 0 0 0 1px rgba(87,169,201,.18), 0 1rem 2.5rem rgba(70,143,173,.14), 0 0 1.9rem rgba(126,214,238,.30);
}
.choice-work .need.selected .need-number { color: #4c7087; }
.choice-work .need.selected .need-light {
  background: radial-gradient(circle at 30% 25%, #fff, #bdebf4 50%, #55a7c3 100%);
  box-shadow: inset -.25rem -.25rem .7rem rgba(44,102,130,.18), 0 0 1.4rem rgba(91,200,226,.72);
}
.choice-work .nav { margin-top: 1.15rem; }
.system-visual {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.94);
  border-radius: clamp(2.1rem, 4vw, 4.25rem);
  background: linear-gradient(145deg, rgba(255,255,255,.44), rgba(205,229,248,.22));
  box-shadow: inset 0 1px 1px #fff, inset 0 -1px 2px rgba(255,255,255,.72), 0 2rem 5rem rgba(63,101,133,.10), 0 0 4rem rgba(255,255,255,.48);
  isolation: isolate;
}
.system-visual::after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 10rem;
  height: 10rem;
  left: 44%;
  top: 34%;
  border-radius: 50%;
  box-shadow: 0 0 5.5rem 1.2rem rgba(91,197,224,.22);
  pointer-events: none;
  animation: system-breathe 4.8s ease-in-out infinite;
}
.system-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1672 / 941;
  object-fit: cover;
}
.system-caption {
  position: absolute;
  z-index: 3;
  left: clamp(.8rem, 2vw, 1.25rem);
  right: clamp(.8rem, 2vw, 1.25rem);
  bottom: clamp(.8rem, 2vw, 1.25rem);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: .18rem 1rem;
  padding: .9rem 1.05rem;
  border: 1px solid rgba(255,255,255,.94);
  border-radius: 1.55rem;
  background: linear-gradient(145deg, rgba(255,255,255,.75), rgba(217,237,251,.48));
  box-shadow: inset 0 1px 1px #fff, 0 .8rem 2.2rem rgba(51,86,113,.09);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
}
.system-caption-label { color: #61798c; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.system-caption strong { grid-column: 1; color: #173246; font-size: 1rem; font-weight: 400; }
.system-nodes { grid-column: 2; grid-row: 1 / 3; display: flex; gap: .35rem; }
.system-nodes i {
  width: .7rem;
  height: .7rem;
  border: 1px solid rgba(255,255,255,.98);
  border-radius: 50%;
  background: rgba(141,178,203,.32);
  box-shadow: inset -.1rem -.1rem .22rem rgba(68,115,147,.12);
  transition: background .24s ease, box-shadow .24s ease, transform .24s ease;
}
.system-nodes i.active {
  transform: scale(1.2);
  background: radial-gradient(circle at 32% 28%, #fff 0 18%, #bcecf4 48%, #51a8c4 100%);
  box-shadow: 0 0 1rem rgba(80,188,219,.76), inset -.1rem -.1rem .28rem rgba(49,112,141,.22);
}
.btn-primary {
  border-color: rgba(255,255,255,.96);
  color: #173246;
  background: linear-gradient(145deg, rgba(255,255,255,.90), rgba(197,229,247,.64) 64%, rgba(255,255,255,.76));
  box-shadow: inset 0 1px 1px #fff, inset 0 0 1rem rgba(255,255,255,.64), 0 0 0 1px rgba(83,153,185,.16), 0 .7rem 1.8rem rgba(64,119,151,.13), 0 0 1.4rem rgba(133,215,238,.20);
}
.btn-primary:hover { box-shadow: inset 0 1px 1px #fff, 0 0 0 1px rgba(77,160,193,.24), 0 .9rem 2.1rem rgba(64,119,151,.17), 0 0 1.8rem rgba(105,208,235,.34); }

@keyframes system-breathe {
  0%, 100% { opacity: .4; transform: scale(.92); }
  50% { opacity: .9; transform: scale(1.08); }
}

@media (max-width: 1080px) {
  .choice-stage { grid-template-columns: minmax(0, .92fr) minmax(26rem, 1.08fr); gap: 1.2rem; }
  .choice-work .need { min-height: 5.15rem; }
  .system-caption { position: relative; left: auto; right: auto; bottom: auto; margin: -.2rem .7rem .7rem; }
}

@media (max-width: 850px) {
  .choice-stage { grid-template-columns: 1fr; min-height: auto; }
  .choice-work .needs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .system-visual { grid-row: 1; }
  .choice-work { grid-row: 2; }
}

@media (max-width: 700px) {
  .step-1 .panel { padding-top: .8rem; }
  .choice-stage { gap: 1.45rem; }
  .system-visual { border-radius: 2rem; }
  .system-image { min-height: 12.5rem; object-fit: cover; }
  .system-caption { margin: -.35rem .55rem .55rem; padding: .72rem .85rem; border-radius: 1.2rem; }
  .system-caption-label { font-size: .66rem; }
  .system-caption strong { font-size: .92rem; }
  .system-nodes { gap: .27rem; }
  .system-nodes i { width: .58rem; height: .58rem; }
  .choice-work .intro { margin-bottom: 1.3rem; }
  .choice-work .needs-grid { grid-template-columns: 1fr; }
  .choice-work .need { min-height: 4.85rem; }
}

@media (prefers-reduced-motion: reduce) {
  .system-visual::after { animation: none; }
}

/* Alignment correction after desktop QA */
.choice-stage {
  grid-template-columns: minmax(0, 1.03fr) minmax(30rem, .97fr);
  align-items: stretch;
}
.choice-work {
  display: flex;
  min-height: 100%;
  flex-direction: column;
}
.choice-work .need {
  grid-template-columns: minmax(0, 1fr) 2.35rem;
  grid-template-rows: auto minmax(2.8rem, 1fr);
  align-items: start;
  gap: .28rem .75rem;
  min-height: 7.1rem;
  height: 100%;
  padding: .95rem 1rem 1rem 1.05rem;
}
.choice-work .need-number {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  line-height: 1;
}
.choice-work .need-copy {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  min-width: 0;
  padding: 0;
  font-size: .98rem;
  line-height: 1.34;
  max-width: 100%;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
.choice-work .need-light {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  justify-self: end;
}
.choice-work .nav { margin-top: auto; padding-top: 1.2rem; }
.system-visual {
  display: grid;
  min-height: 100%;
  align-content: center;
}
.system-image { object-fit: contain; }

@media (max-width: 1180px) {
  .choice-stage { grid-template-columns: 1fr; min-height: auto; }
  .system-visual { grid-row: 1; min-height: auto; }
  .choice-work { grid-row: 2; }
  .choice-work .needs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .choice-work .needs-grid {
    /* Must override the two-column tablet rule above, not just its row sizing. */
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: minmax(5.5rem, 1fr);
    align-items: stretch;
  }
  .choice-work .need {
    grid-template-columns: 1.25rem minmax(0, 1fr) 1.75rem;
    grid-template-rows: 1fr;
    align-items: center;
    width: 100%;
    height: auto;
    min-height: 5.5rem;
    gap: .55rem;
    padding: .78rem .9rem;
    border-radius: 1.55rem;
  }
  .choice-work .need-number { grid-column: 1; grid-row: 1; align-self: center; }
  .choice-work .need-copy {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    font-size: 1rem;
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }
  .choice-work .need-light {
    grid-column: 3;
    grid-row: 1;
    width: 1.75rem;
    height: 1.75rem;
  }
  .choice-work .nav {
    margin-top: 1.5rem;
    padding-top: .2rem;
  }
}

/* Animated route: inputs → application → working system */
.system-art {
  --flow-cycle: 8s;
  position: relative;
  width: 100%;
  line-height: 0;
}
.system-flow {
  --flow-cycle: 8s;
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  mix-blend-mode: screen;
}
.system-visual.has-selection .system-flow { filter: saturate(1.08) brightness(1.03); }
.flow-line {
  fill: none;
  stroke: url(#flow-cool);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 2 14;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 7px rgba(116,222,246,.9));
}
.flow-out, .flow-branch { stroke: url(#flow-warm); }
.source-signal {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.source-aura {
  fill: url(#source-glow);
  filter: url(#packet-glow);
}
.source-ring {
  display: none;
}
.source-a { animation: source-a var(--flow-cycle) ease-in-out infinite; }
.source-b { animation: source-b var(--flow-cycle) ease-in-out infinite; }
.source-c { animation: source-c var(--flow-cycle) ease-in-out infinite; }
.route-packet { opacity: 0; }
.packet-tail {
  fill: rgba(255,226,143,.34);
  filter: url(#packet-glow);
}
.packet-core {
  fill: #fffbed;
  stroke: rgba(255,220,123,.95);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  filter: url(#packet-glow);
}
.packet-a { animation: packet-a var(--flow-cycle) ease-in-out infinite; }
.packet-b { animation: packet-b var(--flow-cycle) ease-in-out infinite; }
.packet-c { animation: packet-c var(--flow-cycle) ease-in-out infinite; }
.flow-core {
  fill: url(#source-glow);
  stroke: none;
  transform-box: fill-box;
  transform-origin: center;
  filter: url(#packet-glow);
  animation: core-receive var(--flow-cycle) ease-in-out infinite;
}
.flow-out { animation: route-out var(--flow-cycle) linear infinite; }
.flow-branch { animation: route-branch var(--flow-cycle) linear infinite; }
.branch-b { animation-delay: -.12s; }
.branch-c { animation-delay: -.24s; }
.flow-result {
  display: none;
}
.result-glow {
  position: absolute;
  z-index: 3;
  width: 12.5%;
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  transform: translate(-50%, -50%) scale(.86);
  filter: blur(1.5px);
}
.result-table {
  left: 81.8%;
  top: 32.2%;
  background: radial-gradient(circle, rgba(240,253,255,.96) 0 13%, rgba(154,225,249,.56) 34%, rgba(177,229,250,.18) 58%, transparent 76%);
  animation: table-receive var(--flow-cycle) ease-in-out infinite;
}
.result-status {
  left: 74.1%;
  top: 55.8%;
  background: radial-gradient(circle, rgba(226,255,255,.98) 0 12%, rgba(56,226,231,.66) 32%, rgba(70,210,222,.20) 59%, transparent 77%);
  animation: status-receive var(--flow-cycle) ease-in-out infinite;
}
.result-email {
  left: 88.1%;
  top: 55.2%;
  background: radial-gradient(circle, rgba(255,252,232,.98) 0 12%, rgba(255,221,143,.60) 33%, rgba(255,232,178,.18) 59%, transparent 77%);
  animation: email-receive var(--flow-cycle) ease-in-out infinite;
}

@keyframes source-a {
  0%, 1%, 18%, 100% { opacity: 0; transform: scale(.86); }
  5% { opacity: .26; transform: scale(.94); }
  8%, 10% { opacity: .84; transform: scale(1.06); }
  14% { opacity: .28; transform: scale(.98); }
}
@keyframes source-b {
  0%, 19%, 36%, 100% { opacity: 0; transform: scale(.86); }
  23% { opacity: .26; transform: scale(.94); }
  26%, 28% { opacity: .84; transform: scale(1.06); }
  32% { opacity: .28; transform: scale(.98); }
}
@keyframes source-c {
  0%, 37%, 54%, 100% { opacity: 0; transform: scale(.86); }
  41% { opacity: .26; transform: scale(.94); }
  44%, 46% { opacity: .84; transform: scale(1.06); }
  50% { opacity: .28; transform: scale(.98); }
}
@keyframes packet-a {
  0%, 5%, 24%, 100% { opacity: 0; }
  8%, 20% { opacity: 1; }
}
@keyframes packet-b {
  0%, 23%, 42%, 100% { opacity: 0; }
  26%, 38% { opacity: 1; }
}
@keyframes packet-c {
  0%, 41%, 60%, 100% { opacity: 0; }
  44%, 56% { opacity: 1; }
}
@keyframes core-receive {
  0%, 55%, 100% { opacity: 0; transform: scale(.88); }
  59% { opacity: .24; transform: scale(.94); }
  63%, 65% { opacity: .82; transform: scale(1.045); }
  70% { opacity: .24; transform: scale(.98); }
}
@keyframes route-out {
  0%, 62% { opacity: .06; stroke-dashoffset: 100; }
  69%, 78% { opacity: .95; }
  84%, 100% { opacity: .08; stroke-dashoffset: 0; }
}
@keyframes route-branch {
  0%, 70% { opacity: .05; stroke-dashoffset: 100; }
  77%, 87% { opacity: .84; }
  94%, 100% { opacity: .08; stroke-dashoffset: 0; }
}
@keyframes result-receive {
  0%, 82%, 100% { opacity: .08; transform: scale(.97) rotate(0deg); }
  91% { opacity: .80; transform: scale(1.025) rotate(5deg); }
  97% { opacity: .24; transform: scale(1) rotate(8deg); }
}
@keyframes table-receive {
  0%, 76%, 94%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.86); }
  82%, 85% { opacity: .82; transform: translate(-50%, -50%) scale(1.05); }
  90% { opacity: .22; transform: translate(-50%, -50%) scale(.98); }
}
@keyframes status-receive {
  0%, 80%, 97%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.86); }
  86%, 89% { opacity: .86; transform: translate(-50%, -50%) scale(1.05); }
  94% { opacity: .22; transform: translate(-50%, -50%) scale(.98); }
}
@keyframes email-receive {
  0%, 84%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.86); }
  90%, 93% { opacity: .84; transform: translate(-50%, -50%) scale(1.05); }
  98% { opacity: .20; transform: translate(-50%, -50%) scale(.98); }
}

@media (prefers-reduced-motion: reduce) {
  .flow-line,
  .flow-core,
  .flow-result,
  .source-signal,
  .route-packet,
  .result-glow { animation: none; opacity: .18; }
  .route-packet animateMotion { display: none; }
}