/* hero: refined layout, chat app window, floating cards */
.hero{position:relative;isolation:isolate;min-height:calc(100svh - 78px);padding-top:56px;padding-bottom:72px;grid-template-columns:1.05fr .95fr;gap:48px}
.hero-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.7;animation:heroDrift 18s ease-in-out infinite}
.blob.b1{width:520px;height:520px;right:4%;top:6%;background:radial-gradient(circle at 35% 30%,#ffffff,#b9d3ff 50%,transparent 72%)}
.blob.b2{width:420px;height:420px;right:24%;top:40%;background:radial-gradient(circle,#dccbff,transparent 70%);animation-delay:-6s;animation-duration:22s}
.blob.b3{width:360px;height:360px;left:-6%;top:-10%;background:radial-gradient(circle,#ffffff,transparent 70%);opacity:.9;animation-delay:-11s}
@keyframes heroDrift{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(-30px,20px) scale(1.05)}66%{transform:translate(20px,-24px) scale(.97)}}
.vis .orb{display:none}

.hero-pill{display:inline-flex;align-items:center;gap:10px;padding:7px 14px 7px 10px;margin-bottom:22px;border-radius:999px;font-size:12px;
  background:var(--glass,linear-gradient(135deg,rgba(255,255,255,.75),rgba(255,255,255,.3)));border:1px solid var(--glass-line,rgba(255,255,255,.9));box-shadow:inset 0 1px 0 #fff,0 6px 16px rgba(30,30,90,.08);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.hero-pulse{position:relative;width:8px;height:8px;border-radius:50%;background:var(--brand-b,#7c5cff)}
.hero-pulse::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--brand-b,#7c5cff);opacity:0;animation:heroPing 2.4s ease-out infinite}
@keyframes heroPing{0%{transform:scale(.5);opacity:.7}100%{transform:scale(1.8);opacity:0}}
/* the title keeps its three lines: its size is capped so the widest line fits the column.
   --h1r is that line's width in ems for the design's font (measured, plus 9%: system fonts track wider at small sizes) */
.hero-copy{container-type:inline-size}
.hero h1{--h1-max:clamp(42px,5.2vw,72px);--h1r:8.46;font-size:min(var(--h1-max),calc(100cqi / var(--h1r)));margin-bottom:22px}
.hero h1 strong{background:linear-gradient(110deg,var(--t-ink,#111318) 20%,var(--brand-a,#3040c8) 50%,var(--brand-b,#7c5cff) 65%,var(--t-ink,#111318) 85%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:heroShine 7s ease-in-out infinite}
.hero h1 strong:nth-of-type(2){animation-delay:-3.5s}
@keyframes heroShine{0%,100%{background-position:100% 0}50%{background-position:0 0}}
.hero .lede{max-width:30ch}
.hero .actions{margin-top:34px}

/* chat window */
.hero-vis{min-height:520px;perspective:1200px}
#chat{width:min(440px,100%);padding:0 0 14px;gap:10px;transform:rotateX(var(--rx,0)) rotateY(var(--ry,0));transition:transform .4s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d}
#chat > .bubble{margin:0 18px}
.chat-head{display:flex;align-items:center;gap:11px;padding:14px 16px!important;margin:0;font-size:13px;border-bottom:1px solid rgba(17,19,24,.07)!important;border-radius:28px 28px 0 0;background:var(--glass,rgba(255,255,255,.35))!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:none!important}
.chat-head::after{display:none!important}
.chat-av{width:34px;height:34px;flex:none;border-radius:11px;display:flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(135deg,var(--brand-a,#3040c8),var(--brand-b,#7c5cff));box-shadow:0 6px 14px color-mix(in srgb,var(--brand-a,#3040c8) 35%,transparent)}
.chat-id{flex:1;line-height:1.25}
.chat-id b{display:block;font-size:14px;font-weight:600;color:var(--t-ink,#111318)}
.chat-id small{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--t-muted,#5b6170)}
.chat-id small i{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.18)}
.chat-dots{display:flex;gap:5px}
.chat-dots i{width:9px;height:9px;border-radius:50%;background:rgba(17,19,24,.12)}
#chat > .bubble.me{margin-top:6px}
#chat .chat-pick{max-width:none}
.svc-list{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:12px}
.svc-btn{display:flex;align-items:center;gap:8px;text-align:left;font-size:12.5px;line-height:1.25;padding:9px 11px;border-radius:12px}
.svc-btn svg{flex:none;color:var(--brand-a,#3040c8)}
.svc-btn[aria-pressed="true"] svg{color:#fff}

.chat-input{display:flex;align-items:center;gap:8px;margin:4px 14px 0;padding:6px 6px 6px 16px;border-radius:999px;background:var(--glass,rgba(255,255,255,.7));border:1px solid var(--glass-line,rgba(255,255,255,.95));box-shadow:inset 0 1px 0 #fff,0 6px 16px rgba(30,30,90,.08)}
.js .chat-input{opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .45s ease}
.js .chat-input.show{opacity:1;transform:none}
.chat-input input{flex:1;min-width:0;border:0;background:none;outline:none;font:inherit;font-size:14px;color:var(--t-ink,#111318)}
.chat-input input::placeholder{color:#7a8090}
.chat-input button{width:34px;height:34px;flex:none;border-radius:50%;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(135deg,var(--brand-a,#3040c8),var(--brand-b,#7c5cff));box-shadow:0 6px 14px color-mix(in srgb,var(--brand-a,#3040c8) 35%,transparent);transition:transform .2s}
.chat-input button:hover{transform:scale(1.06)}
.chat-input:focus-within{box-shadow:inset 0 1px 0 #fff,0 0 0 3px color-mix(in srgb,var(--brand-b,#7c5cff) 20%,transparent)}
.chat-input.nudge{animation:heroNudge .4s}
@keyframes heroNudge{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}

/* floating cards */
.hero-float{position:absolute;z-index:2;display:flex;align-items:center;gap:10px;padding:10px 16px 10px 10px;border-radius:16px;white-space:nowrap;
  background:var(--glass,linear-gradient(135deg,rgba(255,255,255,.85),rgba(255,255,255,.45)));border:1px solid var(--glass-line,rgba(255,255,255,.95));box-shadow:inset 0 1px 0 #fff,0 18px 36px rgba(30,30,90,.14);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);transform:translate(var(--px,0),var(--py,0));transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.hero-float b{display:block;font-size:13px;font-weight:600;color:var(--t-ink,#111318);line-height:1.2}
.hero-float small{display:block;font-size:11px;color:var(--t-muted,#5b6170)}
.hf-ic{width:30px;height:30px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--brand-a,#3040c8);background:var(--brand-s,#efedfc)}
.chat-wrap{position:relative;width:min(440px,100%)}
.chat-wrap #chat{width:100%}
.hero-float.f1{right:calc(100% - 22px);top:46%;animation:heroBob 6s ease-in-out infinite}
.hero-float.f2{left:calc(100% - 70px);top:-26px;animation:heroBob 7s ease-in-out infinite -3s}
.hero-float.f2 .hf-ic{color:#15803d;background:#dcfce7}
@keyframes heroBob{0%,100%{margin-top:0}50%{margin-top:-10px}}

@media(max-width:1100px){.hero-float.f1{right:calc(100% - 60px)}.hero-float.f2{left:auto;right:-10px}}
@media(max-width:900px){.hero{min-height:0;padding-top:48px}.hero-vis{min-height:0;padding:30px 0}.hero-float.f1{right:auto;left:-8px;top:auto;bottom:-24px}.hero-float.f2{right:-8px;top:-28px}}
/* phones: shrink the grid and chat before laying out their contents */
@media(max-width:640px){.hero{grid-template-columns:minmax(0,1fr)}.hero-copy,.hero-vis,.chat-wrap{min-width:0}.chat-wrap{max-width:100%}.hero h1{overflow-wrap:anywhere}.chat-id{min-width:0}.chat-pick,.svc-btn{overflow-wrap:anywhere}#chat .chat-pick{width:calc(100% - 36px);max-width:calc(100% - 36px);min-width:0}.svc-list{grid-template-columns:minmax(0,1fr)}.svc-btn{min-width:0;max-width:100%}}
@media(max-width:480px){.chat-wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}.chat-wrap #chat{grid-row:1}.hero-float{position:static;max-width:100%;width:fit-content;white-space:normal;animation:none;transform:none}.hero-float.f2{justify-self:end}}
@media (prefers-reduced-motion: reduce){.blob,.hero-pulse::after,.hero h1 strong,.hero-float{animation:none!important}#chat,.hero-float{transition:none!important;transform:none!important}}

/* neo-brutal */
body[data-theme="neo"] .hero-bg{display:none}
body[data-theme="neo"] .hero h1{--h1-max:clamp(38px,4.4vw,62px);--h1r:9.75}
body[data-theme="neo"] .hero h1 strong{background:none;-webkit-text-fill-color:currentColor;animation:none;box-shadow:inset 0 -.28em 0 #ffd84d}
body[data-theme="neo"] .hero-pill,body[data-theme="neo"] .hero-float,body[data-theme="neo"] .chat-input{background:#fff;border:2.5px solid #000;box-shadow:3px 3px 0 #000;backdrop-filter:none;-webkit-backdrop-filter:none}
body[data-theme="neo"] .hero-pulse,body[data-theme="neo"] .hero-pulse::after{background:#000;border-color:#000}
body[data-theme="neo"] .chat-head{background:#ffd84d!important;border-bottom:3px solid #000!important;border-radius:13px 13px 0 0}
body[data-theme="neo"] .chat-av,body[data-theme="neo"] .chat-input button{background:#000;box-shadow:none}
body[data-theme="neo"] .hf-ic,body[data-theme="neo"] .hero-float.f2 .hf-ic{background:#fff;color:#000;border:2px solid #000}
body[data-theme="neo"] .svc-btn svg{color:#000}
body[data-theme="neo"] .chat-dots i{background:#000}
body[data-theme="neo"] .chat-id b,body[data-theme="neo"] .hero-float b{color:#000}

/* dark */
body[data-theme="dark"] .blob.b1{background:radial-gradient(circle,rgba(80,100,220,.45),transparent 70%)}
body[data-theme="dark"] .blob.b2{background:radial-gradient(circle,color-mix(in srgb,var(--brand-b,#7c5cff) 35%,transparent),transparent 70%)}
body[data-theme="dark"] .blob.b3{background:radial-gradient(circle,rgba(255,255,255,.06),transparent 70%)}
body[data-theme="dark"] .hero h1 strong{background-image:linear-gradient(110deg,var(--t-ink-d,#eef1f7) 20%,var(--brand-l,#8fa0ff) 50%,var(--brand-l,#b9a6ff) 65%,var(--t-ink-d,#eef1f7) 85%)}
body[data-theme="dark"] .hero-pill,body[data-theme="dark"] .hero-float,body[data-theme="dark"] .chat-input{background:rgba(20,23,32,.75);border-color:var(--glass-line-d,rgba(255,255,255,.12));box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 36px rgba(0,0,0,.45)}
body[data-theme="dark"] .chat-head{background:var(--glass-d,rgba(255,255,255,.04))!important;border-bottom-color:rgba(255,255,255,.08)!important}
body[data-theme="dark"] .chat-id b,body[data-theme="dark"] .hero-float b,body[data-theme="dark"] .chat-input input{color:var(--t-ink-d,#eef1f7)}
body[data-theme="dark"] .chat-id small,body[data-theme="dark"] .hero-float small{color:var(--t-muted-d,#9aa3b5)}
body[data-theme="dark"] .chat-dots i{background:var(--glass-d,rgba(255,255,255,.14))}
body[data-theme="dark"] .hf-ic{background:color-mix(in srgb,var(--brand-b,#7c5cff) 18%,transparent);color:var(--brand-l,#c4b8ff)}
body[data-theme="dark"] .hero-float.f2 .hf-ic{background:rgba(34,197,94,.16);color:#86efac}
body[data-theme="dark"] .svc-btn svg{color:var(--brand-l,#a99bff)}