/* ================= Intro: AI search sequence ================= */
body.intro-on { overflow: hidden; }

.intro {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  background: #07070a;
  overflow: hidden;
  font-family: var(--body);
}
.intro.is-done { pointer-events: none; }

/* backdrop */
.intro__bg { position: absolute; inset: 0; }
.intro__bg::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, #000 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 70%);
}
.glow { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .55; }
.glow--a { width: 46vmax; height: 46vmax; left: -12vmax; top: -14vmax; background: radial-gradient(circle, rgba(124,92,255,.55), transparent 65%); animation: drift 14s ease-in-out infinite alternate; }
.glow--b { width: 40vmax; height: 40vmax; right: -12vmax; bottom: -14vmax; background: radial-gradient(circle, rgba(198,255,61,.35), transparent 65%); animation: drift 12s ease-in-out infinite alternate-reverse; }
@keyframes drift { to { transform: translate(6vmax, 4vmax) scale(1.1); } }

.float {
  position: absolute; width: 64px; height: 64px; border-radius: 18px;
  background: linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 20px 40px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.2);
  opacity: 0;
}
.float::after { content: ""; position: absolute; inset: 0; margin: auto; width: 26px; height: 26px; }
.float--1 { left: 12%; top: 18%; transform: rotate(-12deg); }
.float--1::after { background: conic-gradient(from 0deg, #c6ff3d, #6ee7ff, #7c5cff, #c6ff3d); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
.float--2 { right: 13%; top: 22%; transform: rotate(10deg); }
.float--2::after { border-radius: 50%; border: 3px solid #6ee7ff; box-shadow: 0 0 0 5px rgba(110,231,255,.18); }
.float--3 { left: 15%; bottom: 20%; transform: rotate(8deg); width: 54px; height: 54px; }
.float--3::after { background: linear-gradient(90deg, #c6ff3d 0 30%, transparent 30% 40%, #c6ff3d 40% 70%, transparent 70% 80%, #c6ff3d 80%); height: 4px; border-radius: 2px; box-shadow: 0 8px 0 rgba(198,255,61,.5), 0 -8px 0 rgba(198,255,61,.5); }
.float--4 { right: 16%; bottom: 18%; transform: rotate(-8deg); width: 56px; height: 56px; }
.float--4::after { border-radius: 6px; background: radial-gradient(circle at 30% 30%, #b8a6ff, #7c5cff); }

/* orb (brand AI mark) */
.orb {
  display: block; width: 100%; height: 100%; border-radius: 50%;
  background: conic-gradient(from 0deg, #c6ff3d, #6ee7ff, #7c5cff, #ff7ad9, #c6ff3d);
  animation: spin 4s linear infinite;
  position: relative;
}
.orb::after { content: ""; position: absolute; inset: 22%; border-radius: 50%; background: #0d0d12; box-shadow: inset 0 0 12px rgba(255,255,255,.08); }
.orb--sm { width: 22px; height: 22px; }
.orb--sm::after { inset: 26%; }
.orb--lg { width: 64px; height: 64px; margin: 0 auto 18px; filter: drop-shadow(0 0 24px rgba(124,92,255,.5)); }
@keyframes spin { to { transform: rotate(360deg); } }

/* app icon (launch) */
.appicon {
  position: absolute; width: 96px; height: 96px; border-radius: 26px; padding: 22px;
  background: linear-gradient(160deg, #1a1a22, #0d0d12);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 30px 80px rgba(124,92,255,.35), inset 0 1px 0 rgba(255,255,255,.15);
  z-index: 3;
}

/* chat window */
.chat {
  position: relative; z-index: 2;
  width: min(560px, calc(100vw - 32px));
  height: min(660px, calc(100vh - 48px));
  height: min(660px, calc(100svh - 48px));
  display: flex; flex-direction: column;
  border-radius: 30px;
  background: linear-gradient(180deg, rgba(22,22,30,.92), rgba(12,12,17,.96));
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 40px 120px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.08);
  overflow: hidden;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  visibility: hidden;
}
.chat::before { /* glass sheen */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.06) 0%, transparent 30%);
}
.chat__top { display: flex; align-items: center; gap: 10px; padding: 18px 20px; border-bottom: 1px solid rgba(255,255,255,.06); }
.chat__mark { display: grid; place-items: center; }
.chat__model { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .95rem; }
.chat__model em { font-style: normal; font-weight: 500; color: var(--muted); padding: 2px 8px; border: 1px solid rgba(255,255,255,.1); border-radius: 99px; font-size: .78rem; }
.chat__model svg { color: var(--muted); }
.chat__dots { margin-left: auto; color: var(--muted); letter-spacing: 2px; font-size: .7rem; }

.chat__body { position: relative; flex: 1; min-height: 0; padding: 20px; display: flex; flex-direction: column; justify-content: center; gap: 16px; overflow: hidden; }
.chat__body > * { flex: none; }
.chat__hello { text-align: center; }
.chat__hello p { font-family: var(--display); font-size: clamp(1.3rem, 4vw, 1.7rem); font-weight: 500; letter-spacing: -0.02em; }

.msg--user {
  align-self: flex-end; max-width: 85%;
  padding: 12px 16px; border-radius: 20px 20px 6px 20px;
  background: #24242f; border: 1px solid rgba(255,255,255,.06);
  font-size: .95rem; display: none;
}

/* thinking */
.think { display: none; }
.think__head { display: flex; align-items: center; gap: 12px; }
.think__orb { position: relative; width: 34px; height: 34px; }
.think__orb i { position: absolute; inset: 0; border-radius: 45% 55% 50% 50%; mix-blend-mode: screen; filter: blur(.5px); }
.think__orb i:nth-child(1) { background: #7c5cff; animation: blob 1.4s ease-in-out infinite; }
.think__orb i:nth-child(2) { background: #6ee7ff; animation: blob 1.4s ease-in-out -.45s infinite; opacity: .85; }
.think__orb i:nth-child(3) { background: #c6ff3d; animation: blob 1.4s ease-in-out -.9s infinite; opacity: .75; }
@keyframes blob {
  0%, 100% { transform: translate(0,0) scale(.7) rotate(0); border-radius: 45% 55% 50% 50%; }
  33% { transform: translate(5px,-4px) scale(.85) rotate(120deg); border-radius: 60% 40% 55% 45%; }
  66% { transform: translate(-5px,3px) scale(.75) rotate(240deg); border-radius: 40% 60% 45% 55%; }
}
.shimmer {
  font-weight: 600;
  background: linear-gradient(90deg, #6b6b75 0%, #ffffff 45%, #6b6b75 70%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 1.2s linear infinite;
}
@keyframes shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }
.think__steps { margin: 14px 0 0 46px; display: grid; gap: 8px; }
.think__steps li { position: relative; padding-left: 24px; font-size: .88rem; color: var(--muted); opacity: 0; }
.think__steps li::before { content: ""; position: absolute; left: 0; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; border: 1.5px solid #4a4a55; border-top-color: #c6ff3d; animation: spin .7s linear infinite; }
.think__steps li.ok { color: #cfcfd6; }
.think__steps li.ok::before { animation: none; border: 0; background: #c6ff3d; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }

/* answer + result card */
.answer { display: none; }
.answer__text { font-size: .95rem; color: #d6d6dc; margin-bottom: 14px; min-height: 1.5em; }
.answer__text b { color: #fff; }
.result {
  position: relative; text-align: center;
  padding: 26px 20px 20px; border-radius: 24px;
  background: linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.03) 60%);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 20px 50px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.2);
  overflow: hidden; opacity: 0;
}
.result::after { /* glass sweep */
  content: ""; position: absolute; top: 0; bottom: 0; width: 45%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent);
  transform: skewX(-18deg);
}
.result.is-sweep::after { animation: sweep 1.1s ease-out; }
@keyframes sweep { to { left: 130%; } }
.result__rank { position: absolute; top: 14px; left: 14px; font-family: var(--mono); font-size: .72rem; font-weight: 500; color: #0a0a0c; background: #c6ff3d; padding: 3px 8px; border-radius: 99px; }
.result__photo { width: 84px; height: 84px; margin: 0 auto 12px; border-radius: 50%; overflow: hidden; background: #fff; box-shadow: 0 0 0 3px rgba(198,255,61,.9), 0 0 0 7px rgba(198,255,61,.15); }
.result__photo img, .hero__photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); display: block; }
.result__name { display: inline-flex; align-items: center; gap: 6px; font-family: var(--display); font-size: 1.45rem; font-weight: 700; letter-spacing: -0.02em; }
.badge { width: 20px; height: 20px; fill: #6ee7ff; }
.result__sub { color: var(--muted); font-size: .88rem; margin-top: 2px; }
.result__rate { font-size: .8rem; color: #bdbdc6; margin-top: 8px; }
.stars { color: #ffd166; letter-spacing: 1px; }
.result__stats { display: flex; justify-content: center; gap: 8px; margin: 14px 0 16px; flex-wrap: wrap; }
.result__stats span { font-size: .75rem; color: #bdbdc6; padding: 5px 10px; border-radius: 99px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); }
.result__stats b { color: #c6ff3d; }
.result__btn {
  position: relative; overflow: hidden; width: 100%;
  border: 0; cursor: pointer; font: 600 .95rem var(--body);
  padding: 13px 18px; border-radius: 14px;
  background: #c6ff3d; color: #0a0a0c;
  box-shadow: 0 10px 30px rgba(198,255,61,.25);
}
.result__btn span { display: inline-block; transition: transform .3s; }
.result__btn.is-hover span { transform: translateX(4px); }
.result__btn.is-press { transform: scale(.96); }
.result__btn.is-live { animation: btnPulse 1.8s ease-out infinite; transition: transform .2s, box-shadow .2s; }
.result__btn.is-live:hover { transform: translateY(-2px); }
.result__btn.is-live:hover span { transform: translateX(4px); }
.result__btn.is-live:active { transform: scale(.97); }
.result__btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@keyframes btnPulse {
  0% { box-shadow: 0 10px 30px rgba(198,255,61,.25), 0 0 0 0 rgba(198,255,61,.55); }
  70% { box-shadow: 0 10px 30px rgba(198,255,61,.25), 0 0 0 14px rgba(198,255,61,0); }
  100% { box-shadow: 0 10px 30px rgba(198,255,61,.25), 0 0 0 0 rgba(198,255,61,0); }
}
.result__hint { margin-top: 10px; color: var(--muted); font-size: .72rem; opacity: 0; transform: translateY(4px); transition: opacity .4s .2s, transform .4s .2s; }
.result.is-waiting .result__hint { opacity: 1; transform: none; }
.result.is-waiting .result__hint::before { content: "● "; color: #c6ff3d; animation: blink 1.2s steps(1) infinite; }
/* composer */
.composer {
  display: flex; align-items: center; gap: 10px;
  margin: 0 16px 14px; padding: 10px 10px 10px 18px;
  border-radius: 20px; background: #1a1a23; border: 1px solid rgba(255,255,255,.08);
  transition: border-color .3s, box-shadow .3s;
}
.composer.is-focus { border-color: rgba(198,255,61,.45); box-shadow: 0 0 0 4px rgba(198,255,61,.08); }
.composer__field { position: relative; flex: 1; min-height: 24px; font-size: .98rem; line-height: 1.5; }
.composer__ph { position: absolute; left: 0; top: 0; color: #5d5d68; pointer-events: none; }
.caret { display: inline-block; width: 2px; height: 1.1em; margin-left: 1px; vertical-align: -3px; background: #c6ff3d; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.composer__send {
  flex: none; width: 38px; height: 38px; border-radius: 12px; border: 0;
  display: grid; place-items: center;
  background: #2a2a35; color: #6b6b75; transition: background .25s, color .25s, transform .15s;
}
.composer__send svg { width: 18px; height: 18px; }
.composer__send.is-ready { background: #c6ff3d; color: #0a0a0c; }
.composer__send.is-press { transform: scale(.86); }

/* keyboard */
.kb { padding: 8px 8px 12px; background: rgba(255,255,255,.03); border-top: 1px solid rgba(255,255,255,.06); overflow: hidden; }
.kb__row { display: flex; justify-content: center; gap: 5px; margin-top: 6px; }
.kb__key {
  flex: 0 1 38px; height: 36px; border-radius: 8px;
  display: grid; place-items: center;
  font-size: .82rem; color: #d6d6dc; text-transform: lowercase;
  background: #23232d; box-shadow: 0 1px 0 rgba(0,0,0,.5);
  transition: background .12s, transform .12s, color .12s;
}
.kb__key--wide { flex-basis: 52px; font-size: .7rem; color: var(--muted); }
.kb__key--space { flex: 0 1 200px; }
.kb__key.is-down { background: #c6ff3d; color: #0a0a0c; transform: translateY(1px) scale(.94); }

/* pointer + ripple */
.pointer { position: fixed; left: 0; top: 0; width: 28px; height: 28px; z-index: 6; pointer-events: none; opacity: 0; filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)); transform-origin: 4px 3px; }
.ripple { position: fixed; left: 0; top: 0; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; border: 2px solid #c6ff3d; z-index: 5; pointer-events: none; opacity: 0; }

/* photo flyer + wipe */
.flyer { position: fixed; left: 0; top: 0; border-radius: 50%; object-fit: cover; z-index: 7; opacity: 0; pointer-events: none; background: #fff; }
.wipe { position: fixed; left: 0; top: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--bg); z-index: 4; pointer-events: none; opacity: 0; }

.intro__skip {
  position: absolute; z-index: 8; right: 20px; bottom: 20px;
  color: var(--muted); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  padding: 8px 14px; border-radius: 99px; cursor: pointer;
}
.intro__skip:hover { color: var(--text); }

/* ================= Hero photo (site) ================= */
.hero__photo {
  position: absolute; z-index: 2;
  right: var(--pad); top: 50%; margin-top: calc(clamp(240px, 28vw, 440px) / -2);
  width: clamp(240px, 28vw, 440px); aspect-ratio: 1;
}
.hero__photo img { border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px var(--accent), 0 0 0 14px rgba(198,255,61,.1), 0 40px 100px rgba(0,0,0,.6); transform: none; }
.hero__photo::before { /* clip the circle ring baked into the source image */
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; z-index: 1;
  box-shadow: inset 0 0 0 6px #fff;
}
.hero__badge {
  position: absolute; z-index: 2; left: 50%; bottom: -6px; transform: translateX(-50%);
  white-space: nowrap; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 99px;
  background: rgba(10,10,12,.85); border: 1px solid var(--line); color: var(--text);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
@media (min-width: 821px) {
  .hero__content { max-width: min(1100px, calc(100% - clamp(240px, 28vw, 440px) - 40px)); }
}
@media (max-width: 820px) {
  .hero__photo { position: relative; right: auto; top: auto; margin: 0 0 28px; width: 112px; }
  .hero__badge { display: none; }
  .hero__photo img { box-shadow: 0 0 0 3px var(--accent), 0 0 0 9px rgba(198,255,61,.1); }
  .hero__photo::before { box-shadow: inset 0 0 0 4px #fff; }
}

.sitelinks { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding: 28px var(--pad); border-top: 1px solid var(--line); font-family: var(--display); font-size: 1.05rem; }
.sitelinks a { color: var(--text); transition: color .2s; }
.sitelinks a:hover { color: var(--accent); }
.footer__links { display: inline-flex; gap: 20px; }
.linklike { background: none; border: 0; color: inherit; cursor: pointer; }
.linklike:hover { color: var(--accent); }

/* intro on small screens */
@media (max-width: 560px) {
  .chat { border-radius: 26px; height: min(640px, calc(100svh - 32px)); }
  .chat__body { padding: 16px; }
  .float { width: 46px; height: 46px; border-radius: 14px; }
  .float::after { width: 18px; height: 18px; }
  .float--1 { left: 4%; top: 6%; } .float--2 { right: 5%; top: 8%; }
  .float--3 { left: 6%; bottom: 7%; } .float--4 { right: 6%; bottom: 6%; }
  .kb__key { height: 34px; font-size: .78rem; }
  .kb__row { gap: 4px; }
  .intro__skip { right: 50%; transform: translateX(50%); bottom: 10px; }
}
@media (max-height: 640px) { .kb { display: none; } }
@media (max-height: 720px) {
  .result { padding: 18px 16px 16px; }
  .result__photo { width: 68px; height: 68px; margin-bottom: 8px; }
  .result__stats { margin: 10px 0 12px; }
}