:root{--bg:#060B14;--bg2:#101B2B;--ink:#EEF4FF;--muted:#9FB0C6;--gold:#F2C46B;--cyan:#5EE6F0;--violet:#9B8CFF;--line:rgba(160,200,255,.16)}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 "Inter","Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--gold)}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* film background */
.film-bg{position:fixed;inset:0;z-index:0;background:#05100f}
.bg-still,.bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bg-video{opacity:0;transition:opacity .6s}.bg-video.on{opacity:1}
.bg-shade{position:absolute;inset:0;background:linear-gradient(270deg,rgba(5,16,15,.55) 0%,rgba(5,16,15,0) 45%),linear-gradient(0deg,rgba(5,16,15,.5),rgba(5,16,15,0) 35%)}
.logo{position:fixed;z-index:3;top:calc(env(safe-area-inset-top,0px) + 18px);left:clamp(16px,3vw,32px);display:flex;align-items:center;gap:8px;color:var(--ink);font-weight:800;font-size:22px;text-decoration:none;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.legal{position:fixed;z-index:3;left:clamp(16px,3vw,32px);bottom:calc(env(safe-area-inset-bottom,0px) + 12px);margin:0;font-size:12px;color:rgba(243,241,234,.7)}
.legal a{color:inherit}
/* chat panel */
.log:focus-visible{outline:2px solid var(--cyan);outline-offset:-4px}
.chat{position:fixed;z-index:2;right:clamp(12px,3vw,40px);top:clamp(12px,4vh,40px);bottom:clamp(12px,4vh,40px);width:min(430px,calc(100% - 24px));display:flex;flex-direction:column;
  background:rgba(12,29,34,.82);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);border:1px solid var(--line);border-radius:24px;box-shadow:0 30px 80px rgba(0,0,0,.45);overflow:hidden}
.chat.drop{outline:3px dashed var(--gold);outline-offset:-10px}
.chat-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.chat-head div{flex:1;display:flex;flex-direction:column;line-height:1.2}
.chat-head span{font-size:12px;color:#7FD1A8}
.icon-btn{background:none;border:1px solid var(--line);color:var(--ink);width:34px;height:34px;border-radius:50%;cursor:pointer;font-size:16px}
.log{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:8px;scroll-behavior:smooth}
.msg{max-width:86%;padding:10px 14px;border-radius:18px;animation:pop .25s ease-out both}
.msg.tally{align-self:flex-start;background:var(--bg2);border:1px solid var(--line);border-bottom-left-radius:6px}
.msg.you{align-self:flex-end;background:linear-gradient(90deg,var(--cyan),var(--violet));color:#041018;font-weight:600;border-bottom-right-radius:6px}
.msg.big{display:flex;flex-direction:column;gap:2px;background:linear-gradient(135deg,#1B3A33,#2A2A14);border:1px solid rgba(224,176,74,.45);color:var(--muted);font-size:14px}
.msg.big b{font-size:44px;line-height:1.05;color:var(--gold);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.typing{display:flex;gap:4px;padding:14px}
.typing span{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:blink 1s infinite}
.typing span:nth-child(2){animation-delay:.15s}.typing span:nth-child(3){animation-delay:.3s}
@keyframes blink{0%,80%,100%{opacity:.3}40%{opacity:1}}
@keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.clist,.plans-mini{list-style:none;margin:0;padding:0;min-width:230px}
.clist li,.plans-mini li{display:flex;flex-wrap:wrap;gap:0 10px;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--line)}
.clist li:last-child,.plans-mini li:last-child{border:0}
.clist b{color:var(--gold)}.clist em{flex-basis:100%;font-style:normal;font-size:12px;color:#F09A8A}
.plans-mini li{justify-content:flex-start}.plans-mini b{color:var(--gold)}
.chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 10px}
.chip{background:rgba(94,230,240,.05);color:var(--ink);border:1px solid rgba(94,230,240,.45);border-radius:999px;padding:8px 14px;font:inherit;font-size:14px;cursor:pointer;animation:pop .25s ease-out both}
.chip:hover{background:rgba(94,230,240,.14)}
.composer{display:flex;align-items:center;gap:8px;padding:10px 12px calc(env(safe-area-inset-bottom,0px) + 10px);border-top:1px solid var(--line)}
.composer input{flex:1;min-width:0;background:var(--bg2);color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:11px 16px;font:inherit}
.composer input:focus{outline:2px solid var(--gold);outline-offset:0}
.attach,.send{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;cursor:pointer;font-size:18px;position:relative;overflow:hidden}
.attach{border:1px solid var(--line)}.attach input{position:absolute;inset:0;opacity:0;cursor:pointer}
.attach:focus-within{outline:3px solid var(--gold);outline-offset:2px}
.send{background:linear-gradient(135deg,var(--cyan),var(--violet));color:#041018;border:0;font-weight:800}
@media (max-width:760px){
  .film-bg{position:fixed;height:38vh}
  .bg-shade{background:linear-gradient(0deg,var(--bg) 0%,rgba(12,29,34,0) 45%)}
  .chat{top:calc(38vh - 30px);left:8px;right:8px;bottom:8px;width:auto;border-radius:22px}
  .legal{display:none}
}
@media (prefers-reduced-motion:reduce){.msg,.chip{animation:none}.log{scroll-behavior:auto}.typing span{animation:none;opacity:.6}}
/* plain pages */
body.plain .sec{max-width:760px;margin:0 auto;padding:60px 20px}
body.plain p{color:var(--muted)}

/* ================= futuristic everyday homepage ================= */
body.chatpage{background:#060B14;font-family:"Inter","SF Pro Display","Segoe UI Variable","Segoe UI",system-ui,sans-serif}
.bg-still,.bg-video{object-position:65% center}
.bg-shade{background:linear-gradient(90deg,rgba(6,11,20,.92) 0%,rgba(6,11,20,.55) 32%,rgba(6,11,20,0) 55%),linear-gradient(0deg,rgba(6,11,20,.6),rgba(6,11,20,0) 30%)}
.logo{letter-spacing:-.02em}.logo::after{content:"AI";margin-left:4px;font-size:10px;font-weight:700;letter-spacing:.12em;color:#051017;background:linear-gradient(90deg,var(--cyan),var(--violet));padding:2px 6px;border-radius:6px}
.hero-copy{position:fixed;z-index:2;left:clamp(20px,5vw,72px);top:50%;transform:translateY(-50%);width:min(460px,calc(100% - 520px))}
.hero-copy .eyebrow{color:var(--cyan);font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;margin:0 0 12px}
.hero-copy h1{font-size:clamp(48px,6.4vw,92px);line-height:.95;margin:0 0 18px;letter-spacing:-.045em;font-weight:750;background:linear-gradient(95deg,#FFFFFF 0%,#D6EDFF 45%,#8FEFF6 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-copy p{text-shadow:0 2px 14px rgba(0,0,0,.85),0 0 2px rgba(0,0,0,.6);color:#D2DEEC;font-size:clamp(16px,1.35vw,19px);line-height:1.55;margin:0 0 26px}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center}.hero-cta span{color:var(--muted);font-size:13px}
.cta{display:inline-block;padding:15px 24px;border-radius:14px;font-weight:700;text-decoration:none;color:#041018;background:linear-gradient(90deg,var(--cyan),#8FB8FF 55%,var(--violet));box-shadow:0 10px 34px rgba(94,230,240,.35);transition:transform .15s,box-shadow .15s}
.cta:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(94,230,240,.45)}
.cta:focus-visible{outline:3px solid #fff;outline-offset:3px}
.chat{background:rgba(10,18,32,.72);border:1px solid rgba(94,230,240,.22);box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 0 1px rgba(94,230,240,.06),0 0 60px rgba(94,230,240,.08)}
.msg.tally{background:rgba(30,46,70,.62);border-color:rgba(160,200,255,.14)}
.msg.big{background:linear-gradient(135deg,rgba(40,70,90,.8),rgba(60,40,110,.6));border-color:rgba(242,196,107,.45)}
.chat-head span{color:#6FE3B4}
@media (min-width:901px){.film-bg{right:calc(clamp(12px,3vw,40px) + min(430px,calc(100% - 24px)) - 40px)}.bg-still,.bg-video{object-position:34% center}.bg-shade{background:linear-gradient(90deg,rgba(6,11,20,.97) 0%,rgba(6,11,20,.9) 26%,rgba(6,11,20,.35) 42%,rgba(6,11,20,0) 55%),linear-gradient(270deg,rgba(6,11,20,.9) 0%,rgba(6,11,20,0) 12%)}}
@media (max-width:1100px){.hero-copy{width:min(400px,calc(100% - 490px))}.hero-copy p{display:none}}
@media (min-width:761px) and (max-width:900px){.hero-copy{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;top:0;left:0;transform:none}}
@media (max-width:760px){.bg-still,.bg-video{object-position:center 20%}.bg-shade{background:linear-gradient(0deg,#060B14 0%,rgba(6,11,20,0) 45%)}
  .hero-copy{display:block;position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;top:0;left:0;transform:none}}

.msg.film{padding:6px}.msg.film video{display:block;width:100%;max-width:270px;border-radius:14px;background:#000}