:root {
  color-scheme: dark;
  --background: #081a27;
  --background-deep: #061522;
  --surface: rgba(255, 255, 255, .055);
  --surface-border: rgba(255, 255, 255, .115);
  --text: #f7fbfd;
  --text-muted: #a9bbc6;
  --teal: #7ce8d9;
  --teal-strong: #22c6b4;
  --orange: #ffb758;
  --font-heading: 'Outfit', 'Segoe UI', sans-serif;
  --font-body: 'DM Sans', 'Segoe UI', sans-serif;
}
*, *::before, *::after {box-sizing: border-box;}
html {min-width: 320px; scroll-behavior: smooth;}
body { margin: 0; background: var(--background-deep); color: var(--text); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
button {font: inherit;}
button:focus-visible {outline: 3px solid var(--orange); outline-offset: 5px;}
.site-wrap { isolation:isolate; position:relative; width:100%; min-height:100svh; overflow:hidden; display:flex; flex-direction:column; padding: 27px clamp(22px, 6.4vw, 110px) 23px; background: radial-gradient(ellipse at 77% 35%,#123844 0%,transparent 45%), radial-gradient(ellipse at 10% 87%,#0b3340 0%,transparent 43%), linear-gradient(145deg,#071824 0%,#091c2a 64%,#071722 100%); }
.background-grid {z-index:-1;position:absolute;inset:0;background-image: linear-gradient(to right,rgba(105,210,205,.045) 1px,transparent 1px),linear-gradient(to bottom,rgba(105,210,205,.045) 1px,transparent 1px); background-size:70px 70px; mask-image:linear-gradient(90deg,transparent 0,black 20%,black 90%,transparent 100%); pointer-events:none;}
.ambient {position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none;z-index:-1;animation:ambient-breathe 10s ease-in-out infinite alternate;}
.ambient--one {width:340px;height:340px;top:12%;right:2%;background:rgba(27,210,183,.12);}
.ambient--two {width:250px;height:250px;bottom:7%;left:0;background:rgba(15,111,130,.19);animation-delay:-4s;}
.ambient--three {width:170px;height:170px;top:14%;left:36%;background:rgba(66,124,153,.11);animation-delay:-7s;}
.topbar {width:min(100%,1440px);margin:0 auto; display:flex;align-items:center;justify-content:space-between;gap:18px;position:relative;z-index:2;}
.brand-mark {display:flex;align-items:center;gap:12px;font-family:var(--font-heading);font-weight:600;font-size:15px;letter-spacing:.015em;}
.brand-point {color:var(--teal);font-size:20px;}
.brand-icon {width:42px;height:42px;display:grid;place-items:center;border:1px solid rgba(124,232,217,.22);border-radius:13px;background:rgba(124,232,217,.085);color:var(--teal);}
.brand-icon svg {width:23px;height:23px;}
.top-status {display:inline-flex;gap:11px;align-items:center;color:#c2d3da;border:1px solid var(--surface-border);border-radius:100px;padding:10px 17px;font-size:12px;font-weight:600;white-space:nowrap;letter-spacing:.02em;background:rgba(255,255,255,.035);}
.status-dot {width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 0 rgba(124,232,217,.48);animation:pulse-status 2.4s infinite;}
.main-content {flex:1;width:min(100%,1440px);margin:0 auto;display:flex;flex-direction:column;justify-content:center;}
.hero {display:grid;grid-template-columns: 1fr 1fr; align-items:center;gap:clamp(14px,3vw,55px);padding-block:clamp(45px,5.3vh,80px) clamp(25px,3vh,55px);}
.hero-content {max-width:630px;position:relative;z-index:1;}
.eyebrow {display:flex;align-items:center;gap:13px;font-size:12px;letter-spacing:.23em;font-weight:700;color:var(--teal);margin-bottom:27px;}
.eyebrow-line {display:block;width:27px;height:2px;background:var(--teal);border-radius:3px;}
.headline {font-family:var(--font-heading);font-size:clamp(43px,5.3vw,83px);line-height:1.055;letter-spacing:-.055em;font-weight:700;margin:0 0 27px;max-width:720px;text-wrap:balance;}
.headline-highlight {position:relative;white-space:nowrap;color:var(--teal);}
.headline-highlight::after {content:"";position:absolute;height:8px;left:1%;right:11%;bottom:2px;background:rgba(124,232,217,.25);border-radius:50%;transform:rotate(-2deg);}
.highlight-star {display:inline-block;font-size:.35em;letter-spacing:0;color:var(--orange);vertical-align:top;transform:translate(2px,-1px);}
.description {color:var(--text-muted);font-size:clamp(15px,1.22vw,18px);line-height:1.85;max-width:535px;margin:0 0 35px;}
.description strong {color:#e2eff1;font-weight:700;}
.action-area {display:flex;align-items:center;flex-wrap:wrap;gap:22px;}
.retry-button {display:inline-flex;justify-content:center;align-items:center;gap:12px;padding:18px 23px;min-height:60px;min-width:234px;background:var(--teal);color:#062633;border:0;border-radius:16px;font-size:14px;font-weight:800;cursor:pointer;box-shadow:0 13px 37px rgba(44,210,183,.15);transition:transform .25s ease,background .25s ease,box-shadow .25s ease;}
.retry-button:hover {transform:translateY(-3px);background:#a0f3e8;box-shadow:0 17px 40px rgba(44,210,183,.23);}
.retry-button:active {transform:translateY(0);}
.retry-button:disabled {cursor:progress;opacity:.85;}
.retry-button .button-arrow {margin-left:auto;transition:transform .2s ease;}
.retry-button:hover .button-arrow {transform:translateX(4px);}
.retry-button.is-retrying .retry-icon {animation:spin 1s linear infinite;}
.action-note {display:flex;align-items:center;gap:9px;font-size:13px;color:#aebfc7;}
.action-note svg {color:var(--orange);}
.mascot-scene {position:relative;display:grid;place-items:center;width:100%;min-height:510px;aspect-ratio:1 / 1;max-width:650px;justify-self:center;}
.scene-halo {position:absolute;width:76%;aspect-ratio:1;z-index:-1;border-radius:50%;background: radial-gradient(circle at 50% 42%,#defaf5 0%,#a3e9df 53%,#4bb2a6 87%,#34998f 100%); box-shadow:0 0 100px rgba(52,211,191,.11), 0 0 0 45px rgba(124,232,217,.025);}
.orbit {position:absolute;z-index:-1;border-radius:50%;pointer-events:none;}
.orbit--outer {inset:5%;border:1px dashed rgba(124,232,217,.24);animation:spin 70s linear infinite;}
.orbit--inner {inset:13%;border:1px solid rgba(124,232,217,.13);}
.orbit--inner::before,.orbit--inner::after {content:"";position:absolute;border-radius:100%;border:2px solid var(--teal);width:10px;height:10px;}
.orbit--inner::before {top:12%;left:15%;}
.orbit--inner::after {bottom:12%;right:15%;background:var(--teal);}
.orbit-dot {position:absolute;border-radius:50%;z-index:-1;}
.orbit-dot--first {width:10px;height:10px;background:var(--orange);top:12%;right:25%;box-shadow:0 0 24px rgba(255,183,88,.35);}
.orbit-dot--second {width:7px;height:7px;background:var(--teal);bottom:14%;left:14%;}
.mascot-float {position:relative;width:85%;will-change:transform;filter:drop-shadow(0 25px 25px rgba(1,34,39,.22));animation:owl-hover 4s ease-in-out infinite alternate;}
.mascot-image {display:block;width:100%;height:auto;user-select:none;pointer-events:none;}
.little-star {position:absolute;pointer-events:none;color:var(--orange);animation:star-blink 3s ease-in-out infinite alternate;}
.little-star--one {top:8%;left:14%;font-size:35px;}
.little-star--two {top:18%;right:13%;font-size:24px;color:var(--teal);animation-delay:-1.5s;}
.little-star--three {bottom:15%;right:9%;font-size:43px;animation-delay:-2.2s;}
.floating-bubble {position:absolute;display:flex;gap:12px;align-items:center;border:1px solid rgba(255,255,255,.4);background:rgba(245,255,253,.96);box-shadow:0 17px 38px rgba(0,13,22,.16);backdrop-filter:blur(8px);padding:11px 16px;border-radius:17px;color:#16303c;white-space:nowrap;animation:bubble-float 5s ease-in-out infinite alternate;}
.floating-bubble small {display:block;font-size:9px;letter-spacing:.12em;color:#677e84;font-weight:800;margin-bottom:3px;}
.floating-bubble strong {font-size:13px;font-weight:800;font-family:var(--font-heading);letter-spacing:-.015em;}
.floating-bubble--top {top:17%;left:0;transform:rotate(-4deg);}
.floating-bubble--bottom {right:-3%;bottom:16%;transform:rotate(3deg);animation-delay:-2s;}
.bubble-icon {display:grid;place-items:center;width:35px;height:35px;border-radius:11px;flex-shrink:0;}
.bubble-icon--orange {background:#fff1d9;color:#ed9b24;}
.bubble-icon--teal {background:#defaf4;color:#039c88;}
.info-strip {display:flex;align-items:center;gap:20px;border:1px solid var(--surface-border);border-radius:20px;padding:18px 24px;max-width:950px;width:100%;margin:0 auto 34px;background:linear-gradient(115deg,rgba(124,232,217,.075),rgba(255,255,255,.025));backdrop-filter:blur(8px);}
.info-symbol {font-size:22px;display:grid;place-items:center;flex-shrink:0;width:48px;height:48px;color:var(--orange);background:rgba(255,183,88,.1);border:1px solid rgba(255,183,88,.13);border-radius:14px;}
.info-text {display:flex;flex-direction:column;gap:3px;}
.info-text strong {font-family:var(--font-heading);font-size:16px;font-weight:600;}
.info-text span {font-size:13px;color:var(--text-muted);}
.info-decoration {display:flex;align-items:center;gap:7px;margin-left:auto;}
.info-decoration span {display:block;width:8px;height:8px;border-radius:50%;background:rgba(124,232,217,.28);animation:step-twinkle 1.7s ease-in-out infinite alternate;}
.info-decoration span:nth-child(2) {animation-delay:.25s;}
.info-decoration span:nth-child(3) {animation-delay:.5s;}
.info-decoration span:nth-child(4) {animation-delay:.75s;}
.footer {border-top:1px solid rgba(255,255,255,.09);display:flex;justify-content:space-between;align-items:center;gap:15px;width:min(100%,1440px);margin:0 auto;padding-top:19px;color:#8fa5af;font-size:12px;}
.footer p {margin:0;}
.footer p span {color:#cbdae0;}
.footer-decoration {font-size:10px;letter-spacing:.16em;font-weight:700;color:#7a929c;}
.footer-decoration span {color:var(--orange);}
@keyframes owl-hover {from {transform:translateY(6px) rotate(-1.4deg)} to {transform:translateY(-12px) rotate(1.4deg)}}
@keyframes bubble-float {from {translate:0 -4px;} to {translate:0 9px;}}
@keyframes pulse-status {0% {box-shadow:0 0 0 0 rgba(124,232,217,.4)} 60%,100% {box-shadow:0 0 0 9px rgba(124,232,217,0)}}
@keyframes ambient-breathe {from {transform:scale(1) translateY(0);opacity:.7} to {transform:scale(1.2) translateY(-15px);opacity:1}}
@keyframes spin {to {transform:rotate(360deg)}}
@keyframes star-blink {from {opacity:.5;scale:.8} to {opacity:1;scale:1.1}}
@keyframes step-twinkle {from {background:rgba(124,232,217,.25);transform:scale(.8)} to {background:var(--teal);transform:scale(1.1)}}
@media (min-width:1500px) { .hero {gap:75px;} .mascot-scene {max-width:620px;} }
@media (max-width:1150px) {
  .site-wrap {padding-inline:clamp(25px,5vw,65px);}
  .headline {font-size:clamp(46px,5.6vw,72px);}
  .mascot-scene {min-height:400px;}
  .floating-bubble {scale:.86;}
  .floating-bubble--top {left:-7%;}
  .floating-bubble--bottom {right:-9%;}
}
@media (max-width:800px) {
  .site-wrap {padding:22px clamp(21px,6vw,50px) 20px;}
  .hero {grid-template-columns:1fr;gap:0;padding-top:68px;padding-bottom:12px;}
  .hero-content {max-width:710px;}
  .headline {font-size:clamp(43px,8vw,69px);}
  .description {max-width:650px;}
  .mascot-scene {min-height:0;max-width:520px;width:90%;margin:14px auto 10px;}
  .floating-bubble--top {left:-8%;}
  .floating-bubble--bottom {right:-8%;}
  .info-strip {margin-top:22px;}
}
@media (max-width:540px) {
  .top-status {font-size:0;min-width:43px;height:43px;padding:0;justify-content:center;}
  .top-status .status-dot {width:9px;height:9px;}
  .brand-mark {font-size:13px;gap:9px;}
  .brand-icon {width:38px;height:38px;border-radius:11px;}
  .hero {padding-top:51px;}
  .eyebrow {font-size:10px;letter-spacing:.17em;gap:9px;margin-bottom:24px;}
  .headline {font-size:clamp(40px,10.8vw,55px);line-height:1.08;margin-bottom:24px;}
  .description {font-size:15px;line-height:1.75;margin-bottom:28px;}
  .action-area {gap:17px;}
  .retry-button {width:100%;min-height:57px;border-radius:14px;}
  .action-note {font-size:12px;}
  .mascot-scene {width:100%;margin:16px auto 5px;}
  .scene-halo {width:73%;}
  .floating-bubble {scale:.70;padding:9px 12px;}
  .floating-bubble--top {left:0;top:11%;}
  .floating-bubble--bottom {right:0;bottom:11%;}
  .little-star--one {left:8%;}
  .info-strip {padding:16px;gap:13px;border-radius:17px;margin-top:27px;margin-bottom:31px;}
  .info-symbol {width:39px;height:39px;font-size:19px;}
  .info-text strong {font-size:14px;}
  .info-text span {font-size:12px;line-height:1.5;}
  .info-decoration {display:none;}
  .footer {flex-wrap:wrap;gap:12px;}
}
@media (max-width:360px) {.brand-mark {font-size:11.5px;}.headline {font-size:39px;}.floating-bubble {scale:.61;}.eyebrow {letter-spacing:.12em;}}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important;}
}