/* Axiata campaign branding and the mission journey home page. Brand colours are sampled from the
   supplied logo; buttons use the darker crimson and plum so white text keeps AA contrast. */
:root {
  --ax-yellow: #fcb434; --ax-orange: #f49424; --ax-red: #ec6c24; --ax-pink: #ec3c84; --ax-crimson: #b4234f; --ax-plum: #8b2f6e; --ax-ink: #1f232e;
  --ax-gradient: linear-gradient(120deg, #fcb434 0%, #f49424 26%, #ec6c24 44%, #ec3c84 70%, #8b2f6e 100%);
  --ink: #1f232e; --navy: #3b1f4a; --accent: #b4234f; --accent-light: #fdebf1;
}
body { background: #f6f4f7; }
.button.primary { background: var(--ax-crimson); }
.button.primary:hover { background: #8f1a40; }
button:focus-visible, a:focus-visible, input:focus-visible, summary:focus-visible, select:focus-visible { outline-color: #6a2a8a; }
.site-header { position: relative; }
.site-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--ax-gradient); }
.brand-logo { display: block; height: 44px; width: auto; }
.brand { gap: 16px; }
.brand-caption { border-left: 1px solid var(--line); padding-left: 16px; }
.simulation-label { padding: 6px 12px; border-radius: 999px; background: #fdf3e7; color: #7a3d0c; font-weight: 600; font-size: .8rem; }
.simulation-label .icon { color: #b4561a; width: 17px; height: 17px; }
.site-footer { border-top: 3px solid transparent; border-image: var(--ax-gradient) 1; }

/* ---------- Journey home ---------- */
.journey { max-width: 1264px; }
.j-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 30px; align-items: center; padding: 40px 44px; margin: 26px 0 22px; border-radius: 28px; overflow: hidden; color: #fff;
  background: radial-gradient(90% 120% at 100% 0%, #6d2a5a 0%, transparent 60%), radial-gradient(70% 90% at 0% 100%, #5a1f3a 0%, transparent 60%), linear-gradient(135deg, #2a1636, #1b1226); box-shadow: 0 40px 70px -40px #2a1636cc; }
.j-hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(#ffffff0d 1px, transparent 1px), linear-gradient(90deg, #ffffff0d 1px, transparent 1px); background-size: 38px 38px; mask-image: linear-gradient(100deg, transparent 20%, #000 90%); pointer-events: none; }
.j-hero-copy { position: relative; }
.j-hero .section-label { color: #ffd59a; }
.j-hero h1 { margin: 12px 0 14px; color: #fff; max-width: 16ch; }
.j-hero .intro { color: #e8dcef; max-width: 56ch; }
.j-overall { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; margin-top: 26px; padding: 16px 18px; border-radius: 18px; background: #ffffff12; box-shadow: inset 0 0 0 1px #ffffff26; }
.j-overall > div:not(.j-ring) { display: grid; gap: 2px; flex: 1 1 220px; }
.j-overall strong { font-size: 1.05rem; }
.j-overall span { color: #e8dcef; font-size: .9rem; }
.j-ring { --p: 0; flex: 0 0 auto; width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--ax-yellow) 0, var(--ax-pink) calc(var(--p) * 100%), #ffffff26 0); }
.j-ring span { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: #241431; font-size: 1.4rem; font-weight: 800; }
.j-ring small { font-size: .7rem; color: #cbb8d6; margin-top: -6px; }
.j-go { background: #fff !important; color: var(--ax-crimson) !important; }
.j-go:hover { background: #ffeef4 !important; }
.j-hero-art { position: relative; height: 300px; perspective: 900px; }
.j-mark { position: absolute; left: 50%; top: 50%; width: 148px; height: 216px; margin: -118px 0 0 -74px; perspective: 700px; }
.j-mark-spin { position: absolute; inset: 0; transform-style: preserve-3d; animation: j-sway 9s ease-in-out infinite; }
.j-mark i { position: absolute; inset: 0; background: url(/src/assets/axiata-logo-white.png) no-repeat -458px -4px / 616px 367px; }
.j-mark i.d0 { filter: drop-shadow(0 0 18px #ec3c8466); }
.j-mark i.d1 { transform: translateZ(-3px); filter: brightness(.86); } .j-mark i.d2 { transform: translateZ(-6px); filter: brightness(.78); } .j-mark i.d3 { transform: translateZ(-9px); filter: brightness(.7); }
.j-mark i.d4 { transform: translateZ(-12px); filter: brightness(.62); } .j-mark i.d5 { transform: translateZ(-15px); filter: brightness(.55); } .j-mark i.d6 { transform: translateZ(-18px); filter: brightness(.48); }
.j-mark i.d7 { transform: translateZ(-21px); filter: brightness(.42); } .j-mark i.d8 { transform: translateZ(-24px); filter: brightness(.36) drop-shadow(0 30px 30px #0009); }.j-hero-art::after { content: ''; position: absolute; left: 50%; bottom: 26px; width: 180px; height: 26px; margin-left: -90px; border-radius: 50%; background: radial-gradient(#ec3c8466, transparent 70%); filter: blur(4px); animation: j-shadow 16s linear infinite; }
.j-orbit { position: absolute; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: #ffffffe6; color: var(--ax-crimson); box-shadow: 0 14px 26px -12px #000c; animation: j-float 6s ease-in-out infinite; }
.j-orbit.o1 { left: 8%; top: 18%; } .j-orbit.o2 { right: 6%; top: 34%; animation-delay: -2s; color: var(--ax-plum); } .j-orbit.o3 { left: 22%; bottom: 10%; animation-delay: -4s; color: #b4561a; }
.j-path { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 20px; counter-reset: p; }
.j-path li { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-weight: 650; font-size: .9rem; }
.j-path li:not(:last-child)::after { content: '→'; margin-left: 6px; color: #a08aa9; }
.j-path span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #f1ecf4; color: var(--ax-plum); font-size: .8rem; }
.j-path .st-done span { background: #e3f5ec; color: #18603f; }
.j-path .st-resume span { background: var(--ax-crimson); color: #fff; }
.j-path span .icon { width: 15px; height: 15px; }
.j-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.j-card { --c1: #fcb434; --c2: #ec6c24; position: relative; display: flex; flex-direction: column; border-radius: 22px; background: #fff; border: 1px solid var(--line); overflow: hidden; transition: transform .2s, box-shadow .2s; }
.j-card:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -26px #3b1d3a99; }
.j-card.is-next { border-color: var(--ax-pink); box-shadow: 0 0 0 3px #ec3c8433, 0 24px 40px -26px #3b1d3a99; }
.j-rose { --c1: #f49424; --c2: #ec3c84; } .j-plum { --c1: #ec3c84; --c2: #8b2f6e; } .j-ember { --c1: #ec6c24; --c2: #b4234f; }
.j-next { position: absolute; z-index: 2; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: #fff; color: var(--ax-crimson); font-size: .74rem; font-weight: 800; box-shadow: 0 6px 14px -6px #0005; }
.j-next .icon { width: 14px; height: 14px; }
.j-art { position: relative; height: 150px; overflow: hidden; perspective: 600px; background: radial-gradient(80% 90% at 30% 20%, color-mix(in srgb, var(--c1) 70%, white), transparent), linear-gradient(140deg, var(--c1), var(--c2)); }
.j-num { position: absolute; right: 14px; bottom: -18px; font-size: 6rem; font-weight: 900; line-height: 1; color: #ffffff38; letter-spacing: -.06em; }
.j-copy { padding: 18px 20px 6px; flex: 1; }
.j-topic { font-size: .76rem; font-weight: 700; color: #7a6a80; text-transform: uppercase; letter-spacing: .03em; }
.j-copy h2 { margin: 6px 0 8px; font-size: 1.3rem; }
.j-copy > p:not(.j-topic):not(.j-meta) { font-size: .9rem; color: #4a5866; line-height: 1.55; }
.j-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; font-size: .8rem; color: var(--muted); }
.j-meta span { display: inline-flex; align-items: center; gap: 5px; }
.j-meta .icon { width: 15px; height: 15px; }
.j-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 14px 20px 20px; }
.j-state { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; font-weight: 650; color: #4a5866; }
.j-state .icon { width: 16px; height: 16px; }
.st-done .j-state { color: #18603f; }
.st-resume .j-state { color: var(--ax-crimson); }
/* Card art: small animated props built from CSS shapes. */
.j-art > div { position: absolute; transform-style: preserve-3d; }
.ja-phone { left: 50%; top: 22px; width: 62px; height: 112px; margin-left: -31px; border-radius: 14px; background: #1f232e; box-shadow: 0 18px 24px -12px #0008; transform: rotateY(-20deg) rotateX(8deg); animation: j-float 5s ease-in-out infinite; }
.ja-phone i { position: absolute; inset: 6px; border-radius: 9px; background: linear-gradient(170deg, #4a2b63, #20152f); }
.ja-phone b { position: absolute; left: 10px; right: 10px; top: 26px; height: 30px; border-radius: 7px; background: #fff; }
.ja-phone span { position: absolute; left: 16px; right: 16px; top: 64px; height: 10px; border-radius: 5px; background: #ffffff55; }
.ja-ping { left: 50%; top: 40px; width: 70px; height: 70px; margin-left: -35px; border-radius: 50%; border: 2px solid #fff; opacity: 0; animation: q-ring 2.6s ease-out infinite; }
.ja-ping.p2 { animation-delay: 1.3s; }
.ja-doc { left: 28%; top: 24px; width: 74px; height: 96px; border-radius: 10px; background: #fff; box-shadow: 0 18px 24px -12px #0008; transform: rotateY(18deg) rotateZ(-6deg); padding: 18px 10px; display: grid; gap: 7px; align-content: start; animation: j-float 6s ease-in-out infinite; }
.ja-doc i { display: block; height: 6px; border-radius: 3px; background: #e7dbe8; }
.ja-lock { right: 26%; top: 44px; width: 42px; height: 36px; border-radius: 8px; background: #1f232e; box-shadow: 0 14px 20px -10px #0008; animation: j-float 6s ease-in-out -3s infinite; }
.ja-lock::before { content: ''; position: absolute; left: 9px; top: -16px; width: 18px; height: 20px; border: 4px solid #1f232e; border-bottom: 0; border-radius: 12px 12px 0 0; }
.ja-link { right: 18%; top: 100px; width: 44px; height: 4px; background: #ffffffaa; transform: rotate(-20deg); }
.ja-frame { left: 50%; top: 22px; width: 104px; height: 82px; margin-left: -40px; padding: 6px; border-radius: 6px; background: #fff; box-shadow: 0 18px 24px -12px #0008; transform: rotateY(-16deg) rotateZ(4deg); animation: j-float 6s ease-in-out infinite; }
.ja-frame i { display: block; height: 100%; border-radius: 3px; background: radial-gradient(40% 40% at 70% 30%, #ffe6a3 50%, transparent 52%), linear-gradient(170deg, #f7b267, #e8697e 55%, #6d3a7c); }
.ja-frame span { position: absolute; left: 6px; right: 6px; top: 6px; height: 30%; background: linear-gradient(transparent, #ffffff99); animation: qs-scan 3.6s ease-in-out infinite; }
.ja-frame.back { margin-left: -84px; top: 40px; transform: rotateY(20deg) rotateZ(-8deg) translateZ(-30px); opacity: .8; animation-delay: -3s; }
.ja-frame.back i { background: linear-gradient(170deg, #9fc5e8, #4a6fa5); }
.ja-lens { right: 18%; top: 70px; width: 40px; height: 40px; border-radius: 50%; border: 5px solid #fff; box-shadow: 0 10px 16px -8px #0008; animation: qs-search 5s ease-in-out infinite; }
.ja-lens::after { content: ''; position: absolute; right: -14px; bottom: -12px; width: 18px; height: 6px; border-radius: 3px; background: #fff; transform: rotate(45deg); }
.ja-room { left: 50%; top: 18px; width: 150px; height: 110px; margin-left: -75px; transform: rotateX(54deg) rotateZ(-34deg); background: #f3ece4; border-radius: 6px; box-shadow: 0 20px 26px -10px #0007; animation: j-turn 10s ease-in-out infinite alternate; }
.ja-room i { position: absolute; display: block; }
.ja-room .w1 { left: 0; top: 0; width: 100%; height: 34px; background: #fff; transform-origin: top; transform: rotateX(-90deg); }
.ja-room .w2 { left: 0; top: 0; width: 34px; height: 100%; background: #e9e1ef; transform-origin: left; transform: rotateY(90deg); }
.ja-room .desk { left: 60px; top: 48px; width: 56px; height: 26px; background: #8b6a48; }
.ja-room .screen { left: 76px; top: 52px; width: 24px; height: 4px; background: #1f232e; box-shadow: 0 0 10px 2px #fcb434; }
.ja-room .person { left: 30px; top: 70px; width: 16px; height: 16px; border-radius: 50%; background: var(--ax-crimson); box-shadow: 0 0 0 4px #ffffff88; animation: j-walk 6s ease-in-out infinite; }
/* Bonus mission strip */
.j-bonus { display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; margin-top: 22px; padding: 18px 22px; border-radius: 20px; background: linear-gradient(120deg, #0f2430, #173c57); color: #e8f2f7; }
.j-bonus .tx-emblem { width: 52px; height: 56px; }
.j-bonus h2 { color: #fff; font-size: 1.15rem; margin: 2px 0 4px; }
.j-bonus p { color: #b9cfdb; font-size: .9rem; }
.j-bonus .section-label { color: #ffd59a; }
.j-bonus .button.primary { background: #b8edcf; color: #102c23; }
.j-bonus .j-state { color: #b9cfdb; }
.j-info { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 22px 0 10px; }
.j-tile { display: flex; gap: 12px; align-items: flex-start; text-align: left; padding: 16px; border-radius: 16px; background: #fff; border: 1px solid var(--line); font: inherit; color: inherit; }
button.j-tile:hover { border-color: var(--ax-pink); }
.j-tile > .icon { color: var(--ax-crimson); flex: 0 0 auto; }
.j-tile span { display: grid; gap: 3px; }
.j-tile small { color: var(--muted); font-size: .8rem; line-height: 1.45; }
.j-tile.static { border-style: dashed; background: #fbfafc; }
.scoring-guide ul, .records-notice ul { padding-left: 18px; display: grid; gap: 8px; margin: 12px 0; }
.scoring-guide li, .records-notice li { line-height: 1.55; }
.records-notice h3 { margin-top: 12px; font-size: .95rem; }
.lb-data-note { margin: 4px 0 10px; padding: 10px 12px; border-radius: 10px; background: #f6f4f7; font-size: .86rem; }
.lb-data-note summary { cursor: pointer; display: flex; gap: 8px; align-items: center; font-weight: 650; }
@keyframes j-sway { 0%, 100% { transform: rotateY(-30deg) rotateX(6deg); } 50% { transform: rotateY(30deg) rotateX(-4deg); } }
@keyframes j-shadow { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.8); } }
@keyframes j-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes j-turn { from { transform: rotateX(54deg) rotateZ(-40deg); } to { transform: rotateX(54deg) rotateZ(-24deg); } }
@keyframes j-walk { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(74px, -40px); } }
@media (max-width: 1100px) { .j-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .j-info { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .j-hero { grid-template-columns: 1fr; padding: 28px 22px; border-radius: 22px; }
  .j-hero-art { height: 170px; order: -1; }
  .j-mark { scale: .62; }
  .j-bonus { grid-template-columns: 1fr; }
  .brand-logo { height: 34px; }
}
@media (max-width: 560px) { .j-grid, .j-info { grid-template-columns: 1fr; } .j-path li { font-size: .82rem; } .brand-caption { display: none; } }
@media (prefers-reduced-motion: reduce) { .j-mark-spin, .j-orbit, .j-art *, .j-hero-art::after { animation: none !important; } }

/* Brand type. No approved Axiata font was supplied, so headings, scores and buttons use Bahnschrift: a bold,
   DIN-style signage face installed on Windows 10/11 booth and office laptops. Body text uses Segoe UI Variable.
   Other devices fall back to their own system fonts; nothing is downloaded (CSP font-src 'self'). */
:root { --font-display: "Bahnschrift", "DIN Alternate", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif; font-family: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif; }
h1, h2, h3, .button, .section-label, .j-topic, .j-num, .j-ring span, .j-next, .j-path li, .q-kicker, .q-stage, .q-letter, .score-label strong, .result-score > strong, .of-topbar h1, .of-hud-stats b, .of-result-score strong, .ops-mission h1, .lb-table th { font-family: var(--font-display); }
h1 { letter-spacing: -.012em; }
h2 { letter-spacing: -.006em; }
.j-hero h1 { font-weight: 700; letter-spacing: -.015em; }