/* PUAPI HOMEPAGE 1.0.5
 * Homepage-only styles. Change colours here; edit page text in homepage/content.php.
 * No fonts, images, scripts or styles are fetched from an external service.
 */
:root {
  color-scheme: dark;
  --page: #071218;
  --text: #eef7fa;
  --muted: #a2b4be;
  --line: #283c46;
  --accent: #01abcd;
  --panel: #102029;
  --motion-x: 0deg;
  --motion-y: 0deg;
  --eye-x: 0px;
  --eye-y: 0px;
  font-family: Arial, Helvetica, sans-serif;
  background: var(--page);
  color: var(--text);
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 0; background: var(--page); }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--accent); outline-offset: 6px; }
::selection { background: var(--accent); color: #09252a; }

.skip-link { position: absolute; top: 12px; left: 12px; z-index: 10; padding: 14px 18px; border-radius: 8px; background: var(--accent); color: #09252a; transform: translateY(-180%); }
.skip-link:focus { transform: translateY(0); }
.homepage { width: min(100%, 1280px); min-height: 100vh; min-height: 100svh; margin: 0 auto; padding: 0 clamp(24px, 5.3vw, 76px); display: flex; flex-direction: column; }
.site-header { min-height: 112px; padding: 24px 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; column-gap: 24px; row-gap: 10px; }
.brand { display: inline-flex; align-items: center; gap: 16px; text-decoration: none; white-space: nowrap; min-height: 44px; padding: 7px 0; }
.brand-logo { display: block; width: 124px; height: auto; flex: 0 0 auto; }
.brand-label { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; padding: 5px 9px 5px 7px; color: #fff; background: linear-gradient(135deg, #cf2841, #b81c35); border: 1px solid #ed576b; border-radius: 7px; box-shadow: 0 3px 15px #c91e3529, inset 0 1px 0 #ffffff1a; font-size: .6875rem; font-weight: 700; line-height: 1; letter-spacing: .12em; text-transform: uppercase; }
.broadcast-signal { display: block; width: 22px; height: 22px; flex: 0 0 22px; }
.broadcast-dot { fill: currentColor; }
.broadcast-wave { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; animation: broadcast-signal 2.2s ease-in-out infinite paused; }
.broadcast-wave-outer { animation-delay: .3s; }
[data-broadcast-motion='running'] .broadcast-wave { animation-play-state: running; }
.navigation-link { display: inline-flex; align-items: center; gap: 16px; min-height: 44px; padding: 10px 0; text-decoration: none; font-size: .875rem; line-height: 1.5; }
.navigation-link:hover { color: var(--accent); }
.navigation-link span { font-size: 1rem; }
.main-content { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.main-content:focus { outline: none; }
.hero { display: grid; grid-template-columns: minmax(0, 1.13fr) minmax(0, 1fr); gap: 24px; align-items: center; flex: 1; padding: clamp(26px, 6vh, 75px) 0 38px; }
.hero-copy { min-width: 0; position: relative; z-index: 2; padding-bottom: 20px; }
.eyebrow { display: flex; align-items: center; gap: 9px; color: var(--accent); font-size: .75rem; font-weight: 400; line-height: 1.8; letter-spacing: .105em; text-transform: uppercase; margin: 0 0 26px; }
.eyebrow > span { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 6px; background: currentColor; box-shadow: 0 0 12px #01abcd55; }
h1 { font-size: clamp(2.75rem, 6.1vw, 5rem); line-height: 1.04; font-weight: 500; letter-spacing: -.05em; margin: 0; overflow-wrap: anywhere; }
h1 > span { display: block; }
.headline-accent { color: var(--accent); }
.hero-description { margin: 28px 0 30px; color: var(--muted); font-size: 1.0625rem; line-height: 1.75; overflow-wrap: anywhere; }
.hero-description > span { display: block; }
.hero-actions { display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap; }
.action { display: inline-flex; align-items: center; justify-content: space-between; flex: 1 1 245px; gap: 11px; min-height: 76px; max-width: 100%; padding: 12px 16px 12px 12px; border: 1px solid transparent; border-radius: 20px; font-size: .875rem; font-weight: 600; text-decoration: none; line-height: 1.5; transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; }
.action-primary { color: #09252a; background: var(--accent); box-shadow: 0 5px 24px #01abcd1f, inset 0 1px 0 #ffffff38; }
.action-secondary { color: var(--text); background: #21151c; border-color: #b94a5d; box-shadow: inset 0 1px 0 #ffffff08; }
.action-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; flex: 0 0 40px; background: #09252a18; }
.action-icon svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.action-secondary .action-icon { color: #ff8b9c; background: #cf284126; border-radius: 50%; }
.action-icon .play-mark { fill: currentColor; stroke: none; }
.action-copy { flex: 1 1 auto; min-width: 0; }
.action-label { display: block; overflow-wrap: anywhere; }
.action-note { display: block; margin-top: 2px; font-size: .75rem; font-weight: 400; line-height: 1.5; overflow-wrap: anywhere; }
.action-secondary .action-note { color: #c5bfc2; }
.action-primary .action-label,
.action-primary .action-note,
.action-primary .calendar-icon,
.action-primary .action-arrow { color: #fff; }
.action-arrow { flex: 0 0 auto; font-size: 1.125rem; font-weight: 400; }
.action-secondary .action-arrow { color: #ffc2cc; }
@media (hover: hover) {
  .action:hover { transform: translateY(-2px); }
  .action-primary:hover { box-shadow: 0 6px 28px #01abcd35; }
  .action-secondary:hover { background: #301822; border-color: #ed576b; box-shadow: 0 6px 28px #cf284126; }
}

/* The complete drawing stays flat while its wrappers float and follow the
 * pointer. Keep the head on the same plane to avoid independent depth-layer
 * changes during motion. All resting geometry is valid without JavaScript. */
.guide-scene { position: relative; width: 100%; max-width: 510px; height: 430px; min-width: 0; justify-self: center; pointer-events: none; overflow: hidden; overflow: clip; overflow-clip-margin: 8px; }
.scene-glow { position: absolute; inset: 0 -6%; background: radial-gradient(ellipse at 50% 50%, #01abcd1c, transparent 69%); filter: blur(9px); }
.orbital { position: absolute; left: 50%; top: 51%; width: 100%; height: 54%; border: 1px solid #01abcd30; border-radius: 50%; transform: translate(-50%, -50%) rotate(-28deg); }
.orbital-two { width: 87%; height: 72%; transform: translate(-50%, -50%) rotate(34deg); opacity: .5; }
.spark { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px #01abcd88; }
.spark-a { left: 6%; top: 35%; }
.spark-b { right: 2%; top: 64%; width: 3px; height: 3px; }
.spark-c { right: 21%; top: 8%; width: 3px; height: 3px; }
.robot-position { position: absolute; top: 49%; left: 50%; width: 220px; height: 260px; transform: translate(-50%, -50%) scale(1.24); }
.robot-float { position: relative; width: 220px; height: 260px; animation: guide-hover 5.5s ease-in-out infinite paused; will-change: transform; }
.robot-look { position: relative; width: 220px; height: 260px; transform: rotateX(var(--motion-x)) rotateY(var(--motion-y)); transform-style: flat; transition: transform .2s ease-out; will-change: transform; }
.robot-head { position: absolute; left: 8px; top: 28px; width: 204px; height: 154px; border-radius: 65px 65px 60px 60px; background: linear-gradient(135deg, #fcffff 2%, #d5e9ec 27%, #99afb6 65%, #effcff 96%); box-shadow: inset 3px 4px 4px #ffffffb3, inset -7px -10px 15px #3b657d70, 0 18px 35px #001e3545; z-index: 3; }
.robot-head::after { content: ''; position: absolute; inset: 6px; border-radius: 60px; box-shadow: inset 0 1px 1px #ffffff99; }
.robot-face { position: absolute; left: 18px; right: 18px; top: 30px; height: 100px; border-radius: 39px 39px 40px 40px; background: linear-gradient(150deg, #142d3c, #030b11 70%); box-shadow: inset 0 3px 8px #000, 0 1px 2px #ffffff99; overflow: hidden; }
.robot-face::after { content: ''; position: absolute; inset: 2px 3px 55%; border-radius: 35px 35px 60% 60%; background: linear-gradient(165deg, #b7e5ff29, transparent); }
.eye-pair { position: absolute; inset: 25px 30px 0; display: flex; justify-content: space-between; transform: translate(var(--eye-x), var(--eye-y)); transition: transform .18s ease-out; }
.eye { width: 21px; height: 31px; border-radius: 10px; background: var(--accent); box-shadow: 0 0 12px #01abcd88; animation: guide-blink 7s infinite paused; transform-origin: center; }
.smile { position: absolute; width: 25px; height: 13px; left: calc(50% - 12px); top: 60px; border-bottom: 3px solid #01abcd; border-radius: 0 0 20px 20px; }
.cheek { position: absolute; top: 62px; width: 14px; height: 5px; border-radius: 50%; background: #fa93b299; filter: blur(2px); }
.cheek-left { left: 22px; }
.cheek-right { right: 22px; }
.forehead { position: absolute; top: 7px; left: 0; right: 0; height: 17px; display: flex; align-items: center; justify-content: center; }
.forehead-logo { display: block; width: 44px; height: auto; max-height: 17px; object-fit: contain; filter: brightness(0) invert(1) drop-shadow(0 1px 1px #37526099); }
.ear { position: absolute; top: 84px; width: 19px; height: 48px; border-radius: 14px; background: linear-gradient(90deg, #5292a0, #d7f9ff); box-shadow: 0 0 14px #01abcd33; z-index: 1; }
.ear-left { left: -2px; }
.ear-right { right: -2px; transform: scaleX(-1); }
.antenna { position: absolute; top: 8px; left: calc(50% - 2px); width: 4px; height: 26px; background: linear-gradient(90deg, #7ba6b1, #d2fcff); }
.antenna > span { position: absolute; top: -6px; left: -4px; width: 12px; height: 12px; border-radius: 50%; background: #01abcd; box-shadow: 0 0 15px #01abcd88; }
.robot-body { position: absolute; top: 166px; left: 55px; width: 110px; height: 82px; border-radius: 28px 28px 44px 44px; background: linear-gradient(125deg, #e3f5f5, #a3bfc8 60%, #6f8d9b); box-shadow: inset 0 2px 3px #fff, 0 15px 28px #031a2c33; z-index: 2; }
.robot-light { position: absolute; top: 25px; left: calc(50% - 9px); width: 18px; height: 18px; border: 4px solid #01abcd; border-radius: 50%; box-shadow: 0 0 14px #01abcd99; background: #153543; }
.body-line { position: absolute; bottom: 14px; left: 44px; width: 22px; height: 2px; background: #668a97; border-radius: 2px; }
.hand { position: absolute; top: 184px; width: 28px; height: 51px; border-radius: 16px; background: linear-gradient(100deg, #e5f5f6, #7d9eac); z-index: 2; box-shadow: 0 5px 15px #00152630; }
.hand-left { left: 19px; transform: rotate(23deg); }
.hand-right { right: 19px; transform: rotate(-23deg); }
.robot-shadow { position: absolute; width: 155px; height: 17px; bottom: 31px; left: calc(50% - 77px); background: #01abcd38; filter: blur(13px); border-radius: 50%; animation: guide-shadow 5.5s infinite ease-in-out paused; }
.greeting { position: absolute; right: 1%; top: 24px; z-index: 4; display: flex; align-items: center; gap: 12px; max-width: 80%; padding: 12px 16px; color: var(--text); border: 1px solid #304852; background: var(--panel); border-radius: 14px 14px 14px 3px; box-shadow: 0 9px 30px #00122216; font-size: .8125rem; line-height: 1.5; transform: rotate(4deg); overflow-wrap: anywhere; }
.greeting > span { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex: 0 0 5px; }
[data-motion='running'] .robot-float, [data-motion='running'] .eye, [data-motion='running'] .robot-shadow { animation-play-state: running; }

.benefits { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px 30px; list-style: none; margin: 0; padding: 25px 0 39px; color: var(--muted); font-size: .75rem; line-height: 1.7; letter-spacing: .085em; text-transform: uppercase; }
.benefits li { position: relative; overflow-wrap: anywhere; }
.benefits li + li::before { content: '✧'; color: var(--accent); font-size: 18px; position: absolute; left: -23px; top: -5px; }
.site-footer { min-height: 84px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; padding: 18px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: .8125rem; line-height: 1.6; }
.site-footer > p { margin: 0; overflow-wrap: anywhere; }
.motion-toggle { flex: 0 0 auto; margin-left: auto; min-height: 44px; padding: 10px 0 10px 12px; border: 0; background: transparent; color: #b6c6ce; font-size: .8125rem; cursor: pointer; }
.motion-toggle:hover { color: var(--text); }
.motion-toggle:disabled { cursor: default; color: var(--muted); }

@keyframes guide-hover { 0%, 100% { transform: translateY(2px) rotate(-2deg); } 50% { transform: translateY(-10px) rotate(1deg); } }
@keyframes guide-shadow { 0%, 100% { opacity: .6; transform: scaleX(1); } 50% { opacity: .35; transform: scaleX(.78); } }
@keyframes guide-blink { 0%, 43%, 47%, 100% { transform: scaleY(1); } 45% { transform: scaleY(.08); } }
@keyframes broadcast-signal { 0%, 100% { opacity: .35; } 35%, 60% { opacity: 1; } }

@media (max-width: 62rem) {
  .hero { gap: 12px; }
  .guide-scene { height: 390px; }
  .robot-position { transform: translate(-50%, -50%) scale(1.12); }
  .greeting { top: 15px; right: 0; }
  .eyebrow { letter-spacing: .055em; }
  .action { padding: 9px 14px 9px 9px; gap: 10px; }
}
@media (max-width: 48rem) {
  .homepage { padding: 0 clamp(24px, 6vw, 48px); }
  .site-header { min-height: 95px; }
  .hero { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 36px 0 16px; }
  .hero-copy { padding: 0; }
  h1 { font-size: clamp(2.75rem, 9vw, 4.8rem); }
  .hero-description { margin: 23px 0 25px; font-size: 1rem; }
  .guide-scene { max-width: 430px; height: 370px; }
  .robot-position { transform: translate(-50%, -50%) scale(1.15); }
  .greeting { right: 5%; top: 15px; }
  .benefits { padding: 20px 0 29px; gap: 12px 32px; justify-content: flex-start; }
  .site-footer { min-height: 88px; }
}
@media (max-width: 28rem) {
  .homepage { padding: 0 24px; }
  .site-header { column-gap: 18px; }
  .brand { gap: 12px; }
  .brand-logo { width: 104px; }
  .brand-label { padding: 4px 7px 4px 5px; font-size: .625rem; letter-spacing: .1em; }
  .broadcast-signal { width: 20px; height: 20px; flex-basis: 20px; }
  .navigation-link { font-size: .8125rem; gap: 8px; }
  .hero { padding-top: 28px; }
  .eyebrow { font-size: .75rem; letter-spacing: .055em; margin-bottom: 18px; }
  h1 { font-size: clamp(2.6rem, 12vw, 3.2rem); }
  .hero-actions { gap: 12px; flex-direction: column; }
  .action { flex: 0 1 auto; width: 100%; gap: 12px; padding: 12px 16px 12px 12px; }
  .guide-scene { height: 340px; }
  .robot-position { transform: translate(-50%, -50%) scale(1.05); }
  .greeting { right: 2%; top: 9px; }
  .robot-shadow { bottom: 20px; }
  .benefits { flex-direction: column; align-items: flex-start; gap: 12px; }
  .benefits li + li::before { content: none; }
  .site-footer { align-items: flex-start; column-gap: 12px; }
  .site-footer > p { flex: 1 1 160px; padding-top: 10px; }
}
@media (max-width: 23rem) {
  .homepage { padding: 0 20px; }
  .site-header { column-gap: 12px; }
  .brand-logo { width: 88px; }
  .navigation-link { gap: 6px; }
  .hero-actions { flex-direction: column; }
  .action { width: 100%; }
  .greeting { max-width: 85%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .robot-look, .eye-pair { transform: none !important; }
  .robot-float, .robot-look { will-change: auto; }
  .action:hover { transform: none; }
}
@media (forced-colors: active) {
  .action, .motion-toggle { border: 1px solid ButtonText; }
  .brand-label { border-color: LinkText; }
  .guide-scene { display: none; }
  .hero { grid-template-columns: minmax(0, 1fr); }
}