@font-face {
  font-family:Inter;
  src:local("Inter");
  font-display:swap;
}

:root {
  color-scheme:dark;
  --bg:#0e141c;
  --panel:#17212c;
  --text:#edf3fc;
  --muted:#a4b4c9;
  --line:#2b3746;
  --primary:#88b1ff;
  --accent:#88b1ff;
  --surface:#202c3a;
  --saved:#9ed5c0;
  font-family:Inter,"Segoe UI",sans-serif;
  background:var(--bg);
  color:var(--text);
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
  background:radial-gradient(ellipse at 50% 0,#17243a66,transparent 65%),var(--bg);
}

button,input,textarea {
  font:inherit;
}

button,a,input,textarea {
  -webkit-tap-highlight-color:transparent;
}

a {
  color:inherit;
  text-decoration:none;
}

button {
  cursor:pointer;
  border:0;
  background:transparent;
  color:inherit;
}

button:disabled {
  cursor:wait;
  opacity:.6;
}

button,a {
  touch-action:manipulation;
}

:focus-visible {
  outline:2px solid var(--primary);
  outline-offset:5px;
}

svg {
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex:none;
}

[hidden] {
  display:none!important;
}

.landing-page {
  height:100svh;
  min-height:560px;
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  padding:clamp(18px,3vh,36px) clamp(20px,5vw,80px) 16px;
}

main {
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr);
  gap:clamp(18px,3vh,32px);
  width:100%;
  max-width:1100px;
  margin:auto;
  height:100%;
  min-height:0;
  text-align:center;
}

.brand-header h1 {
  margin:0;
}

.brand-logo {
  width:clamp(240px,27vw,360px);
  height:auto;
  display:block;
  margin:auto;
}

.brand-header p {
  margin:8px 0 0;
  color:var(--muted);
  font-size:14px;
  letter-spacing:.015em;
}

.entry-actions {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:36px;
}

.review-entry {
  display:grid;
  gap:9px;
  justify-items:center;
}

.review-link {
  display:flex;
  align-items:center;
  gap:14px;
  font-size:17px;
  font-weight:550;
  padding:12px 4px;
}

.review-link svg {
  width:23px;
  height:23px;
  color:#aa8cff;
}

.review-link:hover {
  color:var(--primary);
}

.text-button {
  border:0;
  background:transparent;
  color:var(--muted);
  padding:6px 4px;
  font-size:13px;
}

.text-button:hover {
  color:var(--text);
}

.action-divider {
  height:48px;
  width:1px;
  background:var(--line);
}

.login-fab {
  display:flex;
  align-items:center;
  gap:17px;
  border:0;
  border-radius:20px;
  background:#8db4ff;
  color:#101e34;
  padding:20px 24px;
  font-weight:600;
  font-size:17px;
  box-shadow:0 3px 12px #0002;
  transition:background .15s,transform .15s;
}

.login-fab svg {
  width:23px;
  height:23px;
}

.login-fab:hover {
  background:#a6c4ff;
  transform:translateY(-2px);
}

.about {
  min-height:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding-bottom:20px;
}

.about h2 {
  font-size:18px;
  font-weight:550;
  margin:0;
}

.about>p {
  font-size:13px;
  color:var(--muted);
  margin:0 0 4px;
}

.promo-stage {
  width:min(100%,660px);
  aspect-ratio:16/9;
  min-height:0;
  max-height:100%;
  display:flex;
  justify-content:center;
  overflow:hidden;
}

.promo-stage video {
  width:100%;
  height:100%;
  object-fit:contain;
  background:#080e16;
}

.promo-placeholder {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
  width:100%;
  background:linear-gradient(135deg,#16233377,#10192366);
  color:var(--muted);
  font-size:13px;
}

.promo-placeholder svg {
  width:48px;
  height:48px;
  color:#7897be;
}

.promo-placeholder svg path {
  fill:currentColor;
  stroke:none;
}

footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  color:#91a1b7;
  font-size:11px;
  padding-top:12px;
}

footer nav {
  display:flex;
  gap:24px;
}

footer a:hover {
  color:var(--text);
}

/* The landing occurs at 420ms. All impact effects share that moment;
   transforms animate without changing layout or delaying the entry controls. */
.app-ready .brand-logo {
  animation:logo-impact 1s both;
  transform-origin:50% 85%;
}
.app-ready .landing-page {
  animation:landing-impact .48s .42s both;
}
@keyframes logo-impact {
  0% {opacity:0;transform:translateY(-210px) scale(.94);animation-timing-function:cubic-bezier(.6,0,1,.6);}
  12% {opacity:1;}
  42% {opacity:1;transform:translateY(8px) scale(1.065,.88);animation-timing-function:cubic-bezier(.15,.65,.3,1);}
  61% {transform:translateY(-24px) scale(.985,1.035);}
  77% {transform:translateY(3px) scale(1.015,.97);}
  89% {transform:translateY(-5px) scale(1);}
  100% {opacity:1;transform:none;}
}
@keyframes landing-impact {
  0%,100% {transform:none;}
  12% {transform:translate3d(0,7px,0);}
  27% {transform:translate3d(-4px,-5px,0);}
  43% {transform:translate3d(3px,3px,0);}
  60% {transform:translate3d(-2px,-2px,0);}
  78% {transform:translate3d(1px,1px,0);}
}
#review-request-dialog {
  background:var(--bg);
  color:var(--text);
  border:1px solid var(--line);
  border-radius:8px;
  width:min(520px,calc(100vw - 28px));
  max-height:calc(100dvh - 28px);
  padding:28px;
  overflow:auto;
}

#review-request-dialog::backdrop {
  background:#030811bb;
  backdrop-filter:blur(5px);
}

.request-heading {
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-bottom:22px;
}

.request-heading h2 {
  font-size:22px;
  letter-spacing:-.4px;
  margin:0 0 8px;
}

.request-heading p {
  color:var(--muted);
  font-size:13px;
  margin:0;
  line-height:1.5;
}

.icon-button {
  align-self:flex-start;
  border:0;
  background:none;
  color:var(--muted);
  font-size:25px;
  padding:0 4px;
}

.request-fields {
  display:grid;
  gap:16px;
}

.request-fields label {
  display:grid;
  gap:7px;
  font-size:12px;
  color:var(--muted);
}

.request-fields input,.request-fields textarea {
  width:100%;
  border:1px solid var(--line);
  border-radius:4px;
  background:#121c27;
  color:var(--text);
  padding:11px 12px;
  font-size:14px;
}

.request-fields textarea {
  resize:vertical;
}

.privacy-note,.captcha-note {
  font-size:11px;
  line-height:1.6;
  color:var(--muted);
}

.privacy-note a,.captcha-note a {
  text-decoration:underline;
  text-underline-offset:3px;
}

.captcha-note {
  font-size:10px;
}

.request-footer {
  display:flex;
  justify-content:flex-end;
  gap:20px;
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid var(--line);
}

.submit-button {
  background:#8db4ff;
  color:#101e34;
  border:0;
  border-radius:6px;
  padding:12px 18px;
  font-weight:550;
  font-size:13px;
}

#request-feedback {
  font-size:13px;
  line-height:1.5;
  color:#b9d2ff;
  min-height:0;
}

#request-feedback:empty {
  display:none;
}

@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation:none!important;
    transition:none!important;
  }
}

#account-dialog .primary {
  background:#8db4ff;
  color:#101e34;
}

#account-dialog input,#account-dialog textarea {
  color:var(--text);
}


/* CSS-only color fields and halftone keep the first paint lightweight. */
body {background:#0c101d;}
.landing-page {position:relative;isolation:isolate;overflow:hidden;min-height:0;}
.landing-page::before,.landing-page::after {content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;}
.landing-page::before {background:radial-gradient(ellipse at 25% 10%,#6223c550,transparent 65%),radial-gradient(ellipse at 85% 5%,#008cff30,transparent 65%);}
.landing-page::after {background-image:radial-gradient(#aa8aff40 1px,transparent 1px);background-size:7px 7px;mask-image:linear-gradient(120deg,#0009,transparent 45%,transparent 70%,#0007);}
main {max-width:1200px;grid-template-rows:minmax(0,1fr) minmax(0,1fr);gap:28px;}
.brand-header {position:relative;display:flex;flex-direction:column;justify-content:center;gap:26px;isolation:isolate;}
.brand-header::before {content:"";position:absolute;inset:-15vh -25vw 12px;z-index:-1;background:linear-gradient(110deg,#5927b876,#087ee93d);clip-path:polygon(0 0,100% 0,100% 92%,0 100%);}
/* Small angular chips and two soft dust puffs erupt at the logo's impact point.
   Decorative particles never receive input and disappear after the one-shot entrance. */
.brand-header h1 {position:relative;}
.impact-debris {position:absolute;left:50%;bottom:0;width:0;height:0;pointer-events:none;}
.impact-debris i {position:absolute;width:var(--size);height:var(--size);background:#a594d2;opacity:0;clip-path:polygon(15% 0,100% 20%,75% 100%,0 70%);}
.app-ready .impact-debris i {animation:impact-chip .65s .42s both;}
.impact-debris::before,.impact-debris::after {content:"";position:absolute;left:-35px;top:-6px;width:70px;height:18px;background:radial-gradient(ellipse,#b0a0db55,transparent 70%);opacity:0;}
.impact-debris::before {--drift:-85px;}
.impact-debris::after {--drift:85px;}
.app-ready .impact-debris::before,.app-ready .impact-debris::after {animation:impact-dust .75s .42s both;}
@keyframes impact-chip {
  0% {opacity:0;transform:translate(0,0) rotate(0);}
  12% {opacity:.85;}
  50% {opacity:.65;transform:translate(calc(var(--x)*.65),var(--y)) rotate(var(--r));}
  100% {opacity:0;transform:translate(var(--x),16px) rotate(calc(var(--r)*2));}
}
@keyframes impact-dust {
  0% {opacity:0;transform:translateX(0) scale(.4);}
  18% {opacity:.65;}
  100% {opacity:0;transform:translateX(var(--drift)) scale(1.7,1.2);}
}
.brand-logo {width:clamp(340px,44vw,590px);max-width:100%;filter:drop-shadow(0 8px 24px #080b23);}
.entry-actions {gap:24px;}
.action-divider {display:none;}
.review-entry {gap:7px;}
.review-link,.login-fab {min-height:56px;padding:16px 25px;border-radius:3px;font-size:16px;transition:background .15s,transform .15s;}
.review-link {background:#141a31;border:1px solid #9e7aff;box-shadow:4px 4px 0 #7544c9;}
.review-link:hover {background:#292044;color:#fff;transform:translateY(-2px);}
.review-link svg {color:#bf9aff;}
.login-fab {background:#219aff;color:#051327;border:1px solid #75c2ff;box-shadow:4px 4px 0 #095aaf;align-self:flex-start;}
.login-fab:hover {background:#65b8ff;}
.review-entry>.text-button {color:#c8b7ee;}
.about {width:min(100%,740px);margin:auto;align-self:center;gap:12px;padding:0 0 14px;max-height:100%;}
.about-heading {display:flex;align-items:center;gap:12px;width:100%;text-align:left;border-left:3px solid #ad70ff;padding-left:12px;}
.about h2 {font-size:22px;font-weight:750;letter-spacing:-.4px;}
.about-heading>span {margin-left:auto;color:#a5b5d0;font-size:11px;letter-spacing:.08em;text-transform:uppercase;}
.promo-stage {width:100%;max-height:calc(100% - 40px);border:1px solid #566598;box-shadow:6px 6px 0 #6846ac55;background:#10182a;}
.promo-placeholder {background:radial-gradient(ellipse at 80% 0,#087bd32e,transparent 65%),linear-gradient(120deg,#32205480,#10182a);gap:12px;color:#b6c1dc;}
.promo-placeholder svg {width:58px;height:58px;color:#ae90ff;}
@media(max-width:600px) {
 .landing-page {padding:20px 20px 14px;}
 main {grid-template-rows:minmax(0,1.1fr) minmax(0,1fr);gap:22px;}
 .brand-header::before {bottom:0;}

 .brand-logo {width:360px;}
 .entry-actions {gap:12px;}
 .review-link,.login-fab {padding:14px 12px;font-size:14px;min-height:50px;gap:8px;}
 .review-link svg,.login-fab svg {width:19px;height:19px;}
 .login-fab svg:last-child {display:none;}
 .review-entry>.text-button {font-size:12px;}
 .about h2 {font-size:20px;}
 .about-heading>span {display:none;}
 footer {flex-wrap:wrap;justify-content:center;gap:10px 22px;font-size:10px;}
 footer>span {display:none;}
 footer nav {gap:20px;}
 #review-request-dialog {padding:22px;}
}
/* Use two columns on short landscape displays to preserve usable controls. */
@media(max-height:500px) and (min-width:601px) {
 .landing-page {padding:12px 28px;}
 main {grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr);gap:36px;}
 .brand-header {gap:20px;}
 .brand-logo {width:340px;}
 .brand-header::before {inset:-20% -8% -20% -30vw;}

 .entry-actions {gap:12px;}
 .review-link,.login-fab {padding:12px;font-size:13px;min-height:48px;gap:8px;}
 .login-fab svg:last-child {display:none;}
 .review-entry>.text-button {font-size:11px;}
 .about h2 {font-size:19px;}
 .about-heading>span {display:none;}
 footer {padding-top:8px;}
}

.footer-brand {display:flex;flex-direction:column;gap:4px;align-items:flex-start;}
.footer-brand img {display:block;width:120px;height:auto;}
.footer-brand small {font-size:10px;line-height:1.5;color:var(--muted);}
@media(max-width:600px) {
 .footer-brand {flex-basis:100%;align-items:center;gap:2px;}
 .footer-brand img {width:100px;}
 .footer-brand small {font-size:9px;}
}