.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  grid-template-columns: .88fr 1.12fr;
  background:
    radial-gradient(circle at 82% 40%, rgba(255,255,255,.08), transparent 30%),
    linear-gradient(125deg, #050505 0%, #090909 50%, #111 100%);
}
.hero::before { content:""; position:absolute; inset:0; z-index:-2; opacity:.2; background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px); background-size:52px 52px; mask-image:linear-gradient(90deg,transparent,#000 58%,transparent); animation:grid-drift 16s linear infinite; }
.hero::after { content:""; position:absolute; width:560px; height:560px; right:-100px; top:7%; z-index:-1; border-radius:50%; background:rgba(255,255,255,.06); filter:blur(110px); animation:light-breathe 4s ease-in-out infinite alternate; }
.hero-copy { position:relative; z-index:3; max-width:none; padding-right:2vw; }
.hero-copy h1 { font-size:clamp(48px,5.3vw,86px); }
.hero-visual { position:relative; overflow:visible; border:0; min-width:0; display:grid; place-items:center; padding:70px 5vw 70px 1vw; background:none; }
.ticket-window { width:min(100%,720px); border:1px solid #343434; border-radius:20px; overflow:hidden; color:#e9e9e9; background:rgba(12,12,13,.96); box-shadow:0 40px 100px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.025); animation:ticket-float 6s ease-in-out infinite; }
.ticket-top { height:48px; padding:0 16px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #2b2b2b; background:#151515; }
.ticket-top>div { display:flex; gap:6px; }
.ticket-top>div span { width:7px; height:7px; border-radius:50%; background:#555; }
.ticket-top>div span:first-child { background:#fff; }
.ticket-top small { color:#888; font-size:9px; font-weight:700; }
.ticket-top b { color:#666; font-size:10px; }
.ticket-body { display:grid; grid-template-columns:48px 122px 1fr; height:470px; }
.ticket-sidebar { padding:14px 8px; display:flex; align-items:center; flex-direction:column; gap:12px; border-right:1px solid #292929; background:#0a0a0a; }
.server-logo { display:grid; place-items:center; width:32px; height:32px; border-radius:10px; background:#fff; color:#050505; font:800 10px "Space Grotesk"; }
.ticket-sidebar i { width:27px; height:27px; border:1px solid #333; border-radius:9px; }
.channel-list { padding:22px 10px; display:flex; flex-direction:column; gap:15px; border-right:1px solid #292929; background:#111; }
.channel-list strong { margin-bottom:4px; color:#656565; font-size:8px; letter-spacing:.12em; }
.channel-list span { padding:8px 9px; color:#777; font-size:10px; white-space:nowrap; }
.channel-list .active-channel { border:1px solid #3d3d3d; border-radius:8px; color:#fff; background:#242424; animation:channel-glow 3s ease-in-out infinite; }
.active-channel i { margin-right:6px; color:#bbb; font-style:normal; }
.ticket-chat { position:relative; min-width:0; padding:0 18px 18px; display:flex; flex-direction:column; background:#0d0d0e; }
.chat-heading { height:63px; margin:0 -18px 17px; padding:0 18px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #292929; }
.chat-heading>div { display:flex; flex-direction:column; gap:3px; }
.chat-heading strong { font-size:12px; }
.chat-heading small { color:#666; font-size:8px; }
.chat-heading>span { padding:6px 8px; border:1px solid #3d3d3d; border-radius:99px; color:#bdbdbd; font-size:7px; letter-spacing:.1em; }
.ticket-welcome,.bot-message { display:flex; gap:10px; opacity:0; animation:message-in .5s ease forwards; }
.ticket-welcome { animation-delay:.5s; }
.bot-avatar,.mini-avatar { flex:0 0 auto; display:grid; place-items:center; width:28px; height:28px; border-radius:8px; background:#fff; color:#050505; font:800 8px "Space Grotesk"; }
.ticket-welcome strong,.bot-message strong { font-size:10px; }
.ticket-welcome strong small,.bot-message strong small { margin-left:4px; padding:2px 4px; border-radius:3px; background:#fff; color:#050505; font-size:6px; }
.ticket-welcome p,.bot-message p,.client-message p { margin:6px 0 0; color:#aaa; font-size:9px; line-height:1.6; }
.client-message { align-self:flex-end; max-width:78%; margin:25px 0; padding:10px 12px; border:1px solid #3b3b3b; border-radius:11px 11px 2px 11px; background:#1c1c1e; opacity:0; animation:message-in .5s 1.5s ease forwards; }
.client-message span { display:block; color:#777; font-size:6px; font-weight:800; letter-spacing:.1em; }
.bot-message { animation-delay:2.5s; }
.mini-avatar { width:25px; height:25px; }
.typing { margin:20px 0 0 35px; display:flex; align-items:center; gap:4px; opacity:0; animation:typing-show 6s 3.1s ease infinite; }
.typing>span { width:4px; height:4px; border-radius:50%; background:#aaa; animation:typing-dot 1s ease-in-out infinite; }
.typing>span:nth-child(2){animation-delay:.15s}.typing>span:nth-child(3){animation-delay:.3s}
.typing small { margin-left:5px; color:#555; font-size:7px; }
.message-box { position:absolute; left:18px; right:18px; bottom:17px; height:39px; padding:0 13px; display:flex; align-items:center; justify-content:space-between; border:1px solid #303030; border-radius:8px; background:#171719; color:#5f5f5f; font-size:8px; }
.message-box b { color:#fff; }
.online-card,.opened-card { position:absolute; z-index:4; display:flex; align-items:center; gap:10px; padding:13px 15px; border:1px solid #383838; border-radius:13px; background:rgba(19,19,20,.94); box-shadow:0 18px 50px rgba(0,0,0,.5); backdrop-filter:blur(12px); animation:badge-float 5s ease-in-out infinite; }
.online-card { top:13%; right:2vw; }
.opened-card { left:-1.5vw; bottom:16%; animation-delay:-2s; }
.online-card i { width:8px; height:8px; border-radius:50%; background:#fff; box-shadow:0 0 14px #fff; animation:online-pulse 1.6s ease-in-out infinite; }
.opened-card>span { display:grid; place-items:center; width:25px; height:25px; border-radius:8px; background:#fff; color:#050505; font-weight:900; }
.online-card div,.opened-card div { display:flex; flex-direction:column; gap:4px; }
.online-card strong,.opened-card strong { font-size:8px; letter-spacing:.06em; }
.online-card small,.opened-card small { color:#777; font-size:7px; }
@keyframes ticket-float { 0%,100%{transform:translateY(0) rotateX(0)} 50%{transform:translateY(-10px) rotateX(.8deg)} }
@keyframes badge-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes message-in { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} }
@keyframes typing-show { 0%,15%{opacity:0} 22%,78%{opacity:1} 88%,100%{opacity:0} }
@keyframes typing-dot { 0%,100%{transform:translateY(0);opacity:.4} 50%{transform:translateY(-3px);opacity:1} }
@keyframes online-pulse { 0%,100%{opacity:.4} 50%{opacity:1} }
@keyframes channel-glow { 0%,100%{box-shadow:none} 50%{box-shadow:0 0 20px rgba(255,255,255,.08)} }
@keyframes grid-drift { from{background-position:0 0,0 0} to{background-position:52px 52px,52px 52px} }
@keyframes light-breathe { from{opacity:.55;transform:scale(.9)} to{opacity:1;transform:scale(1.08)} }
@media(max-width:1100px){.hero{grid-template-columns:1fr}.hero-copy{padding-bottom:45px}.hero-visual{padding:30px 7vw 100px;min-height:600px}.ticket-window{max-width:760px}.opened-card{left:5vw}.online-card{right:5vw}}
@media(max-width:700px){.hero-copy{padding-bottom:30px}.hero-visual{min-height:500px;padding:20px 16px 85px}.ticket-window{border-radius:14px}.ticket-body{grid-template-columns:38px 1fr;height:405px}.ticket-sidebar{padding-inline:5px}.server-logo{width:27px;height:27px}.ticket-sidebar i{width:24px;height:24px}.channel-list{display:none}.ticket-chat{padding-inline:13px}.chat-heading{margin-inline:-13px;padding-inline:13px}.message-box{left:13px;right:13px}.online-card{top:2px;right:18px}.opened-card{left:18px;bottom:26px}.ticket-welcome p,.bot-message p,.client-message p{font-size:8px}.opened-card,.online-card{padding:10px 11px}}
@media(prefers-reduced-motion:reduce){.ticket-window,.online-card,.opened-card,.ticket-welcome,.client-message,.bot-message,.typing,.typing>span,.online-card i,.hero::before,.hero::after,.active-channel{animation:none!important}.ticket-welcome,.client-message,.bot-message{opacity:1}.typing{opacity:1}}