*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,Arial,sans-serif;
  background:#f8fbff;
  color:#0f172a;
}

.support-container{width:min(1180px,92%);margin:auto;position:relative;z-index:2}

.support-hero{
  position:relative;
  overflow:hidden;
  min-height:90vh;
  display:flex;
  align-items:center;
  background:
    radial-gradient(circle at 10% 15%,rgba(20,184,166,.22),transparent 30%),
    radial-gradient(circle at 90% 20%,rgba(37,99,235,.18),transparent 32%),
    linear-gradient(135deg,#fff,#f8fbff,#eef6ff);
}

.grid-bg{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(37,99,235,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(20,184,166,.07) 1px,transparent 1px);
  background-size:46px 46px;
  animation:gridMove 18s linear infinite;
}

.orb{
  position:absolute;
  border-radius:50%;
  filter:blur(80px);
  opacity:.7;
  animation:floatOrb 8s ease-in-out infinite;
}

.orb-one{width:320px;height:320px;background:rgba(20,184,166,.3);left:-100px;top:120px}
.orb-two{width:360px;height:360px;background:rgba(124,58,237,.18);right:-120px;bottom:80px}

.hero-layout,.ticket-layout,.bot-layout{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:center;
}

.badge{
  display:inline-flex;
  gap:10px;
  align-items:center;
  padding:10px 16px;
  border-radius:999px;
  background:#fff;
  border:1px solid #dbeafe;
  color:#0f766e;
  font-weight:900;
  box-shadow:0 14px 35px rgba(15,23,42,.08);
}

.hero-text h1,.ticket-info h2,.bot-info h2,.section-head h2{
  font-size:clamp(2.2rem,5vw,5rem);
  line-height:1;
  letter-spacing:-.07em;
  margin:22px 0;
}

.hero-text p,.ticket-info p,.bot-info p,.support-card p{
  color:#64748b;
  line-height:1.8;
  font-weight:650;
}

.btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:15px 22px;
  border-radius:999px;
  border:0;
  text-decoration:none;
  color:#fff;
  font-weight:900;
  cursor:pointer;
  background:linear-gradient(135deg,#0f766e,#2563eb,#7c3aed);
  box-shadow:0 18px 42px rgba(37,99,235,.22);
  transition:.35s ease;
}

.btn-primary:hover{transform:translateY(-6px)}
.full{width:100%}

.ai-card,.ticket-form,.chat-widget{
  padding:30px;
  border-radius:34px;
  background:#fff;
  border:1px solid #dbeafe;
  box-shadow:0 30px 90px rgba(15,23,42,.12);
}

.console-top,.ai-top{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:25px;
}

.ai-top span{
  width:12px;height:12px;border-radius:50%;
  background:#22c55e;
}
.ai-top span:nth-child(1){background:#ef4444}
.ai-top span:nth-child(2){background:#f59e0b}

.bot-preview{
  text-align:center;
  padding:40px 20px;
}

.bot-preview i{
  width:110px;
  height:110px;
  display:grid;
  place-items:center;
  margin:auto;
  border-radius:34px;
  color:#fff;
  font-size:3rem;
  background:linear-gradient(135deg,#0f766e,#2563eb,#7c3aed);
  animation:pulseBot 2.5s infinite;
}

.support-section,.ticket-section,.bot-section{padding:90px 0}

.section-head{text-align:center;margin-bottom:45px}

.support-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}

.support-card{
  padding:30px;
  border-radius:30px;
  background:#fff;
  border:1px solid #e2e8f0;
  box-shadow:0 18px 60px rgba(15,23,42,.08);
  transition:.4s ease;
}

.support-card:hover{
  transform:translateY(-12px) scale(1.02);
  box-shadow:0 35px 90px rgba(37,99,235,.15);
}

.support-card i{
  width:64px;height:64px;
  display:grid;
  place-items:center;
  border-radius:22px;
  color:#0f766e;
  background:linear-gradient(135deg,#e0f7f5,#eef2ff);
  font-size:1.5rem;
}

.ticket-section{
  background:
    radial-gradient(circle at 10% 20%,rgba(20,184,166,.12),transparent 28%),
    linear-gradient(135deg,#fff,#eef6ff);
}

.ticket-status{
  display:grid;
  gap:14px;
  margin-top:30px;
}

.ticket-status div{
  display:flex;
  justify-content:space-between;
  padding:18px;
  border-radius:18px;
  background:#fff;
  border:1px solid #dbeafe;
  box-shadow:0 12px 35px rgba(15,23,42,.07);
}

.ticket-status span{
  color:#0f766e;
  font-weight:900;
}

.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.ticket-form input,
.ticket-form select,
.ticket-form textarea{
  width:100%;
  padding:15px 16px;
  margin-bottom:14px;
  border-radius:18px;
  border:1px solid #dbeafe;
  outline:0;
  font:inherit;
  font-weight:750;
}

.ticket-form textarea{
  min-height:150px;
  resize:vertical;
}

.ticket-form input:focus,
.ticket-form select:focus,
.ticket-form textarea:focus{
  border-color:#14b8a6;
  box-shadow:0 0 0 5px rgba(20,184,166,.13);
}

.chat-header{
  display:flex;
  gap:14px;
  align-items:center;
  padding-bottom:18px;
  border-bottom:1px solid #e2e8f0;
}

.chat-header i{
  width:52px;height:52px;
  display:grid;place-items:center;
  border-radius:18px;
  color:#fff;
  background:linear-gradient(135deg,#0f766e,#2563eb);
}

.chat-header span{
  display:block;
  color:#0f766e;
  font-size:.85rem;
  font-weight:900;
}

.chatbox{
  height:320px;
  overflow-y:auto;
  padding:18px 0;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.msg{
  max-width:85%;
  padding:13px 15px;
  border-radius:18px;
  line-height:1.5;
  font-weight:650;
  animation:messageIn .25s ease;
}

.msg.bot{
  align-self:flex-start;
  background:#eef6ff;
  color:#0f172a;
}

.msg.user{
  align-self:flex-end;
  background:linear-gradient(135deg,#0f766e,#2563eb);
  color:#fff;
}

.quick-questions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:12px;
}

.quick-questions button{
  border:1px solid #dbeafe;
  background:#fff;
  padding:9px 12px;
  border-radius:999px;
  font-weight:800;
  cursor:pointer;
}

.chat-input{
  display:flex;
  gap:10px;
}

.chat-input input{
  flex:1;
  padding:14px 16px;
  border-radius:999px;
  border:1px solid #dbeafe;
  outline:0;
}

.chat-input button{
  width:52px;
  height:52px;
  border:0;
  border-radius:50%;
  color:#fff;
  background:linear-gradient(135deg,#0f766e,#2563eb);
  cursor:pointer;
}

#toast{
  position:fixed;
  right:20px;
  top:20px;
  background:#10b981;
  color:#fff;
  padding:16px 22px;
  border-radius:16px;
  box-shadow:0 20px 60px rgba(15,23,42,.25);
  display:none;
  z-index:99999;
  font-weight:900;
}

@keyframes gridMove{to{background-position:46px 46px}}
@keyframes floatOrb{50%{transform:translateY(-30px) scale(1.06)}}
@keyframes pulseBot{50%{transform:scale(1.06);box-shadow:0 0 45px rgba(37,99,235,.3)}}
@keyframes messageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

@media(max-width:1000px){
  .hero-layout,.ticket-layout,.bot-layout{grid-template-columns:1fr}
  .support-cards{grid-template-columns:1fr 1fr}
}

@media(max-width:650px){
  .support-hero{min-height:auto;padding:80px 0}
  .support-cards,.form-row{grid-template-columns:1fr}
  .support-section,.ticket-section,.bot-section{padding:60px 0}
  .ai-card,.ticket-form,.chat-widget{padding:22px;border-radius:24px}
}