:root {
  --navy: #13213e;
  --navy-2: #07435a;
  --blue: #149eaf;
  --blue-2: #2fc2ce;
  --ice: #eafafb;
  --cloud: #f4fafb;
  --white: #fff;
  --ink: #17203a;
  --muted: #66718c;
  --gold: #d6f450;
  --line: rgba(20, 42, 89, .12);
  --shadow: 0 22px 64px rgba(4, 62, 78, .15);
  --radius-xl: 24px;
  --radius-lg: 24px;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--cloud); }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 7% 8%, rgba(47,194,206,.13), transparent 27%),
    radial-gradient(circle at 92% 88%, rgba(20,158,175,.08), transparent 29%),
    var(--cloud);
  font-family: "Anuphan", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 3px solid rgba(37,94,232,.32); outline-offset: 3px; }

.app-shell { min-height: 100vh; padding: clamp(16px, 2.5vw, 32px); }
.topbar {
  max-width: 1240px;
  height: 64px;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--navy); font-weight: 700; }
.brand img { width: 48px; height: 48px; border-radius: 4px; object-fit: cover; box-shadow: 0 8px 22px rgba(17,27,61,.16); }
.brand span { font-family: Manrope, sans-serif; letter-spacing: -.02em; }
.trust-note { color: var(--muted); font-size: .86rem; }

.stage {
  max-width: 1240px;
  min-height: calc(100vh - 130px);
  margin: 0 auto;
  border: 0;
  border-radius: 0;
  background: rgba(255,255,255,.78);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
  overflow: hidden;
}
.screen { min-height: inherit; animation: enter .48s cubic-bezier(.2,.8,.2,1); }
@keyframes enter { from { opacity: 0; transform: translateY(12px) scale(.995); } }

.landing { min-height: inherit; position:relative; display:grid; align-items:center; overflow:hidden; background:var(--navy); }
.landing::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(4,49,66,.72) 0%,rgba(4,49,66,.38) 46%,rgba(4,49,66,.02) 75%); }
.landing-copy { z-index:3; width:min(660px,60%); margin-left:clamp(30px,6vw,78px); padding:clamp(32px,4.8vw,64px); display:flex; flex-direction:column; justify-content:center; position:relative; background:linear-gradient(135deg,rgba(16,164,180,.78),rgba(9,123,143,.68)); border:1px solid rgba(255,255,255,.36); box-shadow:0 26px 70px rgba(3,38,52,.24); backdrop-filter:blur(5px); }
.eyebrow { color: var(--blue); font: 700 .78rem/1 Manrope, sans-serif; letter-spacing: .13em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin: 18px 0 20px; font-size:clamp(2.5rem,4.9vw,5rem); line-height:1.05; letter-spacing:-.055em; color:white; }
.landing-copy .eyebrow { color:#d4fbff; }
.landing-copy > p { max-width:580px; color:rgba(255,255,255,.9); font-size:clamp(1.04rem,1.5vw,1.2rem); line-height:1.7; }
.primary-btn {
  min-height: 60px;
  padding: 0 28px;
  border: 0;
  border-radius: 18px;
  background:linear-gradient(135deg,var(--blue),#08788c);
  color:white;
  font-weight: 700;
  font-size: 1.05rem;
  box-shadow:0 14px 30px rgba(0,50,65,.18);
  transition: transform .2s, box-shadow .2s;
}
.primary-btn:hover { transform:translateY(-2px); box-shadow:0 18px 36px rgba(0,50,65,.26); }
.landing-copy .primary-btn { background:white; color:var(--navy); }
.primary-btn svg { width: 20px; vertical-align: middle; margin-left: 10px; }
.landing-actions { display: flex; align-items: center; gap: 22px; margin-top: 22px; flex-wrap: wrap; }
.microcopy { color:var(--muted); font-size:.88rem; }
.landing-copy .microcopy { color:rgba(255,255,255,.86); }
.landing-visual { position:absolute; inset:0; background:var(--navy); overflow:hidden; }
.landing-visual::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(4,49,66,.35),transparent 55%); }
.landing-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
.visual-chip { position:absolute; z-index:2; right:30px; bottom:30px; padding:16px 20px; border-radius:4px; color:white; background:rgba(7,67,90,.8); border-left:5px solid var(--blue-2); backdrop-filter:blur(15px); }
.visual-chip strong { display: block; font-size: 1.22rem; margin-bottom: 6px; }
.visual-chip span { color: rgba(255,255,255,.78); }

.quiz-wrap { min-height: inherit; display: grid; grid-template-columns: minmax(300px,.72fr) minmax(500px,1.28fr); }
.scene-panel { padding:clamp(28px,4vw,58px); color:white; background:linear-gradient(150deg,#063b52,#08778b 64%,#20aebd); position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; }
.scene-panel::before { content: ""; position: absolute; width: 360px; height: 360px; right: -150px; top: -120px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; box-shadow: 0 0 0 60px rgba(255,255,255,.035), 0 0 0 120px rgba(255,255,255,.025); }
.scene-count { display: flex; justify-content: space-between; align-items: center; font-weight: 600; position: relative; }
.scene-no { font: 700 clamp(5rem,10vw,9rem)/.9 Manrope,sans-serif; color: rgba(255,255,255,.1); position: relative; }
.scene-caption { position: relative; max-width: 320px; }
.scene-caption svg { width:44px; height:44px; color:#7eeaf2; margin-bottom:18px; }
.scene-caption p { margin: 0; font-size: 1.08rem; line-height: 1.7; color: rgba(255,255,255,.82); }
.question-panel { padding: clamp(28px,5vw,72px); display: flex; flex-direction: column; background: rgba(255,255,255,.94); }
.progress-row { display: flex; align-items: center; gap: 16px; color: var(--muted); font-weight: 600; }
.back-btn { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 14px; background: white; color: var(--navy); display: grid; place-items: center; }
.back-btn[disabled] { opacity: .35; cursor: default; }
.progress-track { height: 7px; flex: 1; background: #e5eaf4; border-radius: 99px; overflow: hidden; }
.progress-fill { height:100%; background:linear-gradient(90deg,#0d8fa2,#2fc2ce); border-radius:inherit; transition:width .4s ease; }
.question { margin: clamp(30px,5vh,54px) 0 26px; font-size: clamp(1.65rem,3vw,2.7rem); line-height: 1.35; letter-spacing: -.035em; color: var(--navy); }
.answers { display: grid; gap: 14px; }
.answer {
  width: 100%; min-height: 88px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 20px; background: white; color: var(--ink); text-align: left; display: grid; grid-template-columns: 46px 1fr 26px; align-items: center; gap: 16px; box-shadow: 0 8px 24px rgba(20,42,89,.05); transition: .22s ease;
}
.answer:hover { transform:translateY(-3px); border-color:rgba(20,158,175,.42); box-shadow:0 14px 32px rgba(4,96,112,.11); }
.answer.selected { transform:translateY(-3px); color:var(--navy); border-color:var(--blue); background:linear-gradient(135deg,#f3feff,#e1f8fa); box-shadow:0 15px 35px rgba(20,158,175,.18); }
.letter { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; color: var(--blue); background: var(--ice); font: 700 1rem Manrope,sans-serif; }
.answer.selected .letter { color: white; background: var(--blue); }
.answer-copy { font-size: 1rem; line-height: 1.58; }
.check { width: 22px; height: 22px; border: 2px solid #cbd4e6; border-radius: 50%; }
.answer.selected .check { border-color: var(--blue); box-shadow: inset 0 0 0 5px white; background: var(--blue); }
.quiz-hint { margin-top: auto; padding-top: 24px; color: var(--muted); font-size: .82rem; }

.result { min-height: inherit; display: grid; grid-template-columns: minmax(340px,.8fr) minmax(480px,1.2fr); }
.result-visual { padding:clamp(34px,5vw,66px); color:white; background:linear-gradient(150deg,#063b52,#08778b 58%,#20aebd); display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; }
.result-ring { width:min(300px,72vw); aspect-ratio:1; border-radius:50%; display:grid; place-items:center; position:relative; background:conic-gradient(var(--gold) 0 4%,#64e3eb 4% 67%,rgba(255,255,255,.14) 67%); box-shadow:0 24px 60px rgba(0,0,0,.2); animation:reveal 1s ease both; }
.result-ring::before { content:""; position:absolute; inset:18px; border-radius:50%; background:linear-gradient(145deg,#063b52,#0a7185); }
.ring-copy { position:relative; z-index:1; }
.ring-copy span { display:block; color:#bcd3ff; font-size:.86rem; }
.ring-copy strong { display:block; margin-top:6px; font-size:clamp(1.8rem,4vw,2.7rem); }
@keyframes reveal { from { transform:scale(.84) rotate(-24deg); opacity:0; } }
.result-main { padding:clamp(24px,3.5vh,42px) clamp(30px,4vw,58px); display:flex; flex-direction:column; justify-content:center; background:white; }
.result-main h2 { margin:9px 0 11px; color:var(--navy); font-size:clamp(2.1rem,3.8vw,3.65rem); line-height:1.02; letter-spacing:-.05em; }
.result-main > p { max-width:640px; color:var(--muted); font-size:1.08rem; line-height:1.78; }
.map-kicker { margin-bottom:24px; color:#d1fbff; font:700 .82rem Manrope,sans-serif; letter-spacing:.13em; }
.style-map { width:min(100%,430px); display:grid; grid-template-columns:70px 1fr 70px; grid-template-rows:28px 1fr 28px; align-items:center; }
.map-axis { color:#e3fcff; font-size:.78rem; font-weight:700; line-height:1.3; }
.map-axis-top { grid-column:2; grid-row:1; }
.map-axis-bottom { grid-column:2; grid-row:3; }
.map-axis-left { grid-column:1; grid-row:2; padding-right:8px; }
.map-axis-right { grid-column:3; grid-row:2; padding-left:8px; }
.map-grid { grid-column:2; grid-row:2; aspect-ratio:1; position:relative; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; border:2px solid rgba(255,255,255,.8); border-radius:18px; overflow:hidden; box-shadow:0 22px 44px rgba(0,31,44,.22); }
.map-grid::before,.map-grid::after { content:""; position:absolute; z-index:1; background:rgba(255,255,255,.65); }
.map-grid::before { width:1px; height:100%; left:50%; top:0; }
.map-grid::after { height:1px; width:100%; left:0; top:50%; }
.map-quadrant { display:grid; place-items:center; padding:8px; background:rgba(255,255,255,.09); color:rgba(255,255,255,.7); font:700 clamp(.72rem,1.4vw,.9rem)/1.35 Manrope,sans-serif; }
.map-quadrant:nth-child(2),.map-quadrant:nth-child(3) { background:rgba(255,255,255,.16); }
.map-quadrant.current { background:rgba(214,244,80,.2); color:white; }
.map-dot { position:absolute; z-index:3; left:var(--dot-x); top:var(--dot-y); width:22px; height:22px; background:var(--gold); border:4px solid white; border-radius:50%; box-shadow:0 0 0 8px rgba(214,244,80,.28),0 5px 16px rgba(0,0,0,.3); transform:translate(-50%,-50%); animation:map-pop .8s cubic-bezier(.2,1.6,.3,1) both; }
@keyframes map-pop { from { opacity:0; transform:translate(-50%,-50%) scale(.2); } to { opacity:1; transform:translate(-50%,-50%) scale(1); } }
.result-english { margin:0 0 10px; color:var(--blue); font:700 .95rem Manrope,sans-serif; }
.result-description { color:var(--muted); font-size:.95rem; line-height:1.58; }
.result-description p { margin:0 0 8px; }
.line-cta { margin-top:14px; padding:16px 18px; border-radius:16px; background:#f0fbfc; }
.line-cta strong { color:var(--navy); font-size:1.08rem; }
.line-cta p { margin:5px 0 12px; color:#36556a; font-size:.91rem; }
.primary-actions { display:grid; grid-template-columns:minmax(200px,1.25fr) minmax(190px,1fr); gap:12px; }
.line-btn { display:inline-flex; align-items:center; justify-content:center; min-width:180px; min-height:56px; text-decoration:none; }
.contact-btn { min-height:56px; border-color:rgba(9,123,143,.34); background:rgba(255,255,255,.9); }
.resource-links { display:grid; gap:6px; margin-top:12px; padding:11px 4px 0; border-top:1px solid var(--line); }
.resource-links a { color:#536079; font-size:.9rem; line-height:1.55; text-decoration:none; transition:color .2s ease; }
.resource-links a:hover { color:var(--blue); }
.resource-links span { color:var(--blue); font-weight:700; }
.line-btn:focus-visible, .resource-links a:focus-visible { outline:3px solid rgba(37,94,232,.32); outline-offset:3px; }
.restart-link { align-self:flex-start; margin-top:10px; padding:0; border:0; background:none; color:#7b879c; font-family:inherit; font-size:.84rem; font-weight:600; line-height:1.5; text-decoration:underline; text-underline-offset:4px; }
.profile-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:26px 0; }
.profile-segment { padding:12px 8px; border-radius:12px; background:#eef2f8; color:#8390aa; text-align:center; font-size:.76rem; font-weight:700; }
.profile-segment.active { color:white; background:var(--blue); box-shadow:0 8px 20px rgba(37,94,232,.22); }
.note-card { padding:12px 16px; border-radius:8px; background:var(--ice); color:#36556a; font-size:.84rem; line-height:1.5; border-left:4px solid var(--blue); }
.result-actions { display:flex; gap:12px; margin-top:26px; flex-wrap:wrap; }
.secondary-btn { min-height:56px; padding:0 22px; border:1px solid var(--line); border-radius:18px; background:white; color:var(--navy); font-weight:700; }

.lead-card { max-width:660px; margin:auto; padding:clamp(30px,6vw,68px); }
.lead-card h2 { color:var(--navy); font-size:clamp(2rem,4vw,3.6rem); line-height:1.15; letter-spacing:-.04em; }
.lead-card > p { color:var(--muted); line-height:1.7; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:28px 0; }
.field { display:grid; gap:7px; }
.field.full { grid-column:1/-1; }
.field label { font-size:.85rem; color:#536079; font-weight:600; }
.field input { width:100%; min-height:54px; border:1px solid var(--line); border-radius:15px; padding:0 16px; color:var(--ink); background:#fbfcff; }
.privacy { font-size:.78rem; color:var(--muted); }
.honeypot { position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important; overflow:hidden !important; }
.form-status { min-height:24px; margin:14px 0 0; font-size:.88rem; font-weight:600; }
.form-status.error { color:#aa2534; }
.form-status.sending { color:var(--blue); }
.primary-btn[disabled] { cursor:wait; opacity:.66; transform:none; }
.success-icon { width:76px; height:76px; border-radius:24px; display:grid; place-items:center; color:white; background:var(--blue); box-shadow:0 18px 34px rgba(37,94,232,.25); margin-bottom:24px; }

@media (min-width: 768px) {
  .app-shell { padding:16px clamp(16px,2.5vw,32px); }
  .result { min-height:calc(100vh - 114px); }
}

@media (max-width: 1023px) {
  .landing-copy { width:min(620px,72%); margin-left:38px; padding:42px; }
  .quiz-wrap { grid-template-columns: .62fr 1.38fr; }
  .scene-panel { padding:32px; }
  .scene-no { font-size:5rem; }
  .result { grid-template-columns:.8fr 1.2fr; }
}
@media (max-width: 767px) {
  .app-shell { padding:0; }
  .topbar { height:70px; margin:0; padding:10px 18px; background:var(--navy); }
  .brand { color:white; font-size:.88rem; }
  .brand img { width:42px; height:42px; }
  .trust-note { display:none; }
  .stage { min-height:calc(100vh - 70px); border-radius:0; border:0; }
  .landing { min-height:calc(100vh - 70px); align-items:end; }
  .landing::after { background:linear-gradient(0deg,rgba(3,48,65,.78) 0%,rgba(3,48,65,.12) 76%); }
  .landing-visual img { object-position:62% center; }
  .landing-copy { width:auto; margin:0 16px 18px; padding:28px 22px 30px; justify-content:flex-start; }
  h1 { font-size:clamp(2.25rem,11vw,3.5rem); }
  .visual-chip { display:none; }
  .landing-actions { align-items:stretch; flex-direction:column; gap:12px; }
  .primary-btn { width:100%; }
  .quiz-wrap { display:block; }
  .scene-panel { min-height:132px; padding:20px 22px; display:grid; grid-template-columns:1fr auto; }
  .scene-no { display:none; }
  .scene-caption { grid-column:1/-1; max-width:none; display:flex; gap:12px; align-items:center; }
  .scene-caption svg { width:30px; height:30px; margin:0; flex:none; }
  .scene-caption p { font-size:.86rem; line-height:1.5; }
  .question-panel { min-height:calc(100vh - 202px); padding:20px 18px 24px; }
  .question { margin:24px 0 18px; font-size:clamp(1.35rem,6vw,1.8rem); }
  .answer { min-height:78px; padding:13px 14px; grid-template-columns:40px 1fr 20px; gap:12px; border-radius:17px; }
  .letter { width:40px; height:40px; border-radius:12px; }
  .answer-copy { font-size:.91rem; line-height:1.48; }
  .quiz-hint { display:none; }
  .result { display:block; }
  .result-visual { min-height:340px; padding:28px 14px; }
  .style-map { max-width:360px; grid-template-columns:64px 1fr 64px; }
  .map-axis { font-size:.67rem; }
  .map-quadrant { font-size:.67rem; }
  .result-ring { width:230px; }
  .result-main { padding:32px 24px 40px; }
  .result-main h2 { font-size:2.65rem; }
  .result-description { font-size:1rem; line-height:1.7; }
  .result-description p { margin-bottom:12px; }
  .note-card { padding:18px 20px; font-size:.9rem; line-height:1.65; }
  .line-cta { margin-top:22px; padding:20px; }
  .line-cta p { margin:8px 0 16px; font-size:.95rem; }
  .primary-actions { grid-template-columns:1fr; }
  .line-btn, .contact-btn { min-height:60px; }
  .resource-links { gap:12px; margin-top:20px; padding-top:18px; }
  .result-actions { flex-direction:column; }
  .result-actions button { width:100%; }
  .lead-card { padding:32px 22px; }
  .form-grid { grid-template-columns:1fr; }
  .field.full { grid-column:auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}