/* ---------- วิธีทำงาน (เวทีกลางคืน) ---------- */
.how { background: var(--night); color: var(--on-dark); overflow: hidden; isolation: isolate; }
.how__bg { position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(50% 40% at 15% 10%, rgba(239, 109, 32, .22), transparent 70%),
  radial-gradient(45% 45% at 90% 40%, rgba(124, 58, 237, .3), transparent 70%),
  radial-gradient(40% 30% at 50% 100%, rgba(242, 180, 90, .14), transparent 70%); }
.how .lead { color: var(--on-dark-2); }

.score { position: relative; }
.score__staff { position: relative; height: 220px; margin-bottom: 28px; }
.score__staff svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.score__staff line { stroke: rgba(251, 243, 236, .22); stroke-width: 1.2; }
.score__staff .bar { stroke: rgba(251, 243, 236, .5); stroke-width: 2; }
.score__staff .bar--thick { fill: rgba(251, 243, 236, .5); }
.score__melody { fill: none; stroke: url(#score-grad); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.6s var(--ease) .2s; }
.score.is-drawn .score__melody, html:not(.js) .score__melody { stroke-dashoffset: 0; }
.score__dot { position: absolute; right: 20px; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: rgba(251, 243, 236, .6); }
.score__head {
  position: absolute; display: grid; place-items: center; width: 46px; height: 36px; translate: -50% -50%;
  color: #fff; font-weight: 700; font-size: 16px; --c: var(--orange); --glow: rgba(239, 109, 32, .2);
  transform: scale(0); transition: transform .6s cubic-bezier(.3, 1.6, .5, 1); transition-delay: calc(.35s + var(--i) * .32s);
}
.score__head--family { --c: var(--violet); --glow: rgba(124, 58, 237, .25); }
/* หัวโน้ตเอียงแบบตัวพิมพ์โน้ต · ก้านตั้งตรง */
.score__head::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; rotate: -20deg; background: var(--c); box-shadow: 0 0 0 6px var(--glow), 0 10px 20px -6px var(--c); }
.score__head::after { content: ""; position: absolute; right: 1px; bottom: 50%; width: 3px; height: 58px; border-radius: 2px; background: var(--c); z-index: -1; }
.score.is-drawn .score__head, html:not(.js) .score__head { transform: scale(1); }

.steps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.step {
  position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px 16px 16px;
  border-radius: 18px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .11);
  opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(.5s + var(--i) * .32s);
}
.score.is-drawn .step, html:not(.js) .step { opacity: 1; transform: none; }
.step__num { display: none; }
.step__lane { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 3px 10px 3px 7px; border-radius: 999px; font-size: 12px; font-weight: 700; background: rgba(239, 109, 32, .18); color: #ffb68a; }
.step--family .step__lane { background: rgba(124, 58, 237, .25); color: #c9b2ff; }
.step__title { font-family: var(--font-display); font-size: 19px; line-height: 1.25; margin-top: 4px; }
.step__body { font-size: 14.5px; color: var(--on-dark-2); }
.step__auto { margin-top: auto; padding-top: 12px; border-top: 1px dashed rgba(255, 255, 255, .18); font-size: 13.5px; color: var(--on-dark); display: grid; gap: 2px; }
.step__auto-label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.score__repeat { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 30px; font-family: var(--font-display); font-style: italic; font-size: 19px; color: var(--gold); }

@media (max-width: 1080px) {
  .score__staff { display: none; }
  .steps { grid-template-columns: 1fr; gap: 14px; max-width: 620px; margin-inline: auto; padding-left: 70px; position: relative; }
  .steps::before {
    content: ""; position: absolute; left: 12px; top: 10px; bottom: 10px; width: 44px;
    background: repeating-linear-gradient(90deg, rgba(251, 243, 236, .2) 0 1px, transparent 1px 10.75px);
  }
  .step { transition-delay: calc(.1s + var(--i) * .12s); }
  .step__num {
    display: grid; place-items: center; position: absolute; left: -68px; top: 18px; width: 44px; height: 34px;
    border-radius: 50%; rotate: -18deg; background: var(--orange); color: #fff; font-weight: 700;
    box-shadow: 0 0 0 5px rgba(239, 109, 32, .2);
  }
  .step--family .step__num { background: var(--violet); box-shadow: 0 0 0 5px rgba(124, 58, 237, .25); }
  .step__title { font-size: 21px; }
}
@media (max-width: 420px) {
  .steps { padding-left: 58px; }
  .steps::before { left: 6px; width: 38px; background: repeating-linear-gradient(90deg, rgba(251, 243, 236, .2) 0 1px, transparent 1px 9.25px); }
  .step__num { left: -58px; width: 40px; height: 30px; }
}

/* หน้าต่างข้อมูลชุดเดียว */
.hub { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); align-items: center; margin-top: clamp(80px, 10vw, 130px); }
.hub__copy p { margin-top: 16px; color: var(--on-dark-2); font-size: 18px; }
.hub__map { position: relative; aspect-ratio: 1.25 / 1; }
.hub__lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.hub__lines line { stroke: rgba(242, 180, 90, .55); stroke-width: 2; stroke-dasharray: 4 8; animation: flow 1.6s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -24; } }
.hub__center {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 1;
  display: grid; place-items: center; gap: 6px; width: clamp(150px, 16vw, 190px); aspect-ratio: 1; padding: 20px;
  border-radius: 50%; text-align: center; line-height: 1.25;
  background: radial-gradient(circle at 35% 30%, #ff9a5a, var(--orange) 45%, #a8410a);
  box-shadow: 0 30px 60px -20px rgba(239, 109, 32, .8), inset 0 2px 0 rgba(255, 255, 255, .3);
}
.hub__center .glyph { width: 40px; height: 40px; color: #fff; }
.hub__center strong { font-family: var(--font-display); font-size: 17px; }
.hub__pulse { position: absolute; inset: -14px; border-radius: 50%; border: 2px solid rgba(239, 109, 32, .5); animation: ring 2.8s ease-out infinite; }
@keyframes ring { from { transform: scale(.85); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
.door {
  position: absolute; width: 36%; display: grid; gap: 4px; padding: 16px 18px; border-radius: 18px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: 14px; color: var(--on-dark-2);
}
.door strong { color: var(--on-dark); font-size: 16px; }
.door__ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; margin-bottom: 6px; background: var(--orange); color: #fff; }
.door--teacher { left: 0; top: 0; }
.door--student { right: 0; top: 0; }
.door--parent { left: 0; bottom: 0; }
.door--admin { right: 0; bottom: 0; }
.door--student .door__ic, .door--parent .door__ic { background: var(--violet); }
.door--admin .door__ic { background: #3f5c7d; }
@media (max-width: 900px) {
  .hub { grid-template-columns: 1fr; text-align: center; }
  .hub__map { aspect-ratio: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .hub__lines { display: none; }
  .hub__center { position: relative; left: auto; top: auto; translate: none; grid-column: 1 / -1; margin: 10px auto 18px; }
  .door { position: static; width: auto; text-align: left; }
}
@media (max-width: 420px) { .hub__map { grid-template-columns: 1fr; } }

/* ---------- Journey ---------- */
.journey { background:
  radial-gradient(50% 50% at 90% 30%, rgba(124, 58, 237, .12), transparent 70%),
  radial-gradient(40% 40% at 0% 90%, rgba(239, 109, 32, .12), transparent 70%),
  var(--cream); overflow: hidden; }
.journey__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.path { position: relative; display: grid; gap: 22px; padding-left: 4px; }
.path::before { content: ""; position: absolute; left: 25px; top: 18px; bottom: 18px; width: 3px; border-radius: 3px; background: linear-gradient(var(--orange), var(--gold), var(--violet)); transform-origin: top; transform: scaleY(0); transition: transform 2s var(--ease) .2s; }
.path.is-drawn::before, html:not(.js) .path::before { transform: none; }
.path__stop { position: relative; display: grid; grid-template-columns: 48px 1fr; column-gap: 18px; align-items: center; opacity: 0; transform: translateX(-12px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(.3s + var(--i) * .25s); }
.path.is-drawn .path__stop, html:not(.js) .path__stop { opacity: 1; transform: none; }
.path__dot { grid-row: span 2; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #fff; color: var(--orange); box-shadow: var(--shadow), 0 0 0 4px var(--cream); padding: 11px; position: relative; z-index: 1; }
.path__stop:nth-child(n+3) .path__dot { color: #d98a1f; }
.path__stop:nth-child(n+4) .path__dot { color: var(--violet); }
.path__stop:last-child .path__dot { background: var(--violet); color: #fff; }
.path__when { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.path__title { font-family: var(--font-display); font-size: 21px; line-height: 1.25; }

.journey__visual { position: relative; display: grid; place-items: center; min-height: 560px; }
.journey__word {
  position: absolute; top: -4%; left: 50%; translate: -50% 0; rotate: -8deg; z-index: 0;
  font-family: var(--font-hand); font-weight: 700; font-size: clamp(110px, 14vw, 200px); line-height: 1;
  background: linear-gradient(120deg, var(--orange), var(--gold) 45%, var(--violet)); -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: .9; white-space: nowrap;
}
.journey__visual .phone { width: clamp(230px, 24vw, 290px); position: relative; z-index: 1; margin-top: 150px; }
.phone--tilt { rotate: 4deg; }

.registers__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 2.2vw, 28px); text-align: center; margin: clamp(64px, 8vw, 110px) 0 28px; }
.registers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.register { padding: 28px 26px; border-radius: var(--radius); background: var(--orange-soft); position: relative; overflow: hidden; }
.register--student { background: var(--violet-soft); }
.register--parent { background: var(--blush); }
.register__ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: #fff; color: var(--orange-2); margin-bottom: 16px; box-shadow: var(--shadow-sm); }
.register--student .register__ic { color: var(--violet); }
.register--parent .register__ic { color: #d6457a; }
.register__who { display: block; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.register__mood { display: block; font-family: var(--font-display); font-size: 24px; line-height: 1.25; margin: 4px 0 10px; }
.register p { color: var(--ink-2); font-size: 15.5px; }
@media (max-width: 900px) {
  .journey__grid { grid-template-columns: 1fr; }
  .journey__visual { min-height: 0; padding-top: 20px; }
  .journey__visual .phone { width: min(64vw, 270px); margin-top: 110px; }
  .registers { grid-template-columns: 1fr; }
}