
:root{
  --orange:#FF5E1A;
  --orange2:#FF8A00;
  --orange3:#FF3B0F;
  --glass:rgba(255,255,255,0.72);
  --glass2:rgba(255,255,255,0.9);
  --border:rgba(255,255,255,0.6);
  --dark:#0F0F0F;
  --muted:#6B7280;
}
*{margin:0;padding:0;box-sizing:border-box;font-family:'Cairo','Segoe UI',Tahoma,sans-serif}
body{background:#FFFCF8;color:var(--dark);overflow-x:hidden}
body::before{
  content:'';position:fixed;inset:-20%;z-index:-2;
  background:
    radial-gradient(600px at 15% 15%, rgba(255,94,26,0.18), transparent 60%),
    radial-gradient(800px at 85% 20%, rgba(255,138,0,0.18), transparent 60%),
    radial-gradient(500px at 50% 90%, rgba(255,59,15,0.12), transparent 70%),
    linear-gradient(180deg,#FFFEFC 0%, #FFF7F0 100%);
}
.glass{
  background:var(--glass);
  backdrop-filter:blur(18px) saturate(1.2);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);
  border:1px solid var(--border);
  box-shadow:0 10px 40px rgba(255,94,26,0.08), 0 2px 8px rgba(0,0,0,0.04);
}
.btn-fire{
  background:linear-gradient(135deg,var(--orange3),var(--orange),var(--orange2));
  color:white;border:none;border-radius:999px;padding:14px 28px;font-weight:800;
  letter-spacing:.2px;cursor:pointer;box-shadow:0 8px 24px rgba(255,94,26,0.35);
  transition:.25s;position:relative;overflow:hidden;
}
.btn-fire:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(255,94,26,0.45)}
.btn-fire:active{transform:translateY(0)}
.btn-ghost{background:rgba(255,255,255,0.9);border:1px solid rgba(0,0,0,0.08);border-radius:999px;padding:12px 22px;cursor:pointer;font-weight:700}
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:14px 22px;margin:12px;border-radius:18px}
.logo{display:flex;align-items:center;gap:10px;font-weight:900;font-size:22px}
.logo i{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--orange3),var(--orange2));display:grid;place-items:center;color:white;box-shadow:0 6px 18px rgba(255,94,26,0.4)}
.hero{max-width:1250px;margin:30px auto;padding:20px 24px;display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center}
@media(max-width:900px){.hero{grid-template-columns:1fr}}
.badge{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;font-size:13px;font-weight:700;background:rgba(255,94,26,0.1);border:1px solid rgba(255,94,26,0.2);color:var(--orange3)}
.h1{font-size: clamp(32px,5vw,56px);line-height:1.05;font-weight:900;letter-spacing:-.02em;margin:14px 0}
.h1 span{background:linear-gradient(135deg,var(--orange3),var(--orange2));-webkit-background-clip:text;background-clip:text;color:transparent}
.p{color:var(--muted);font-size:17px;line-height:1.7}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}
@media(max-width:900px){.cards{grid-template-columns:1fr}}
.card-mini{padding:18px;border-radius:18px}
.card-mini h4{font-size:15px;margin-bottom:6px}
.card-mini p{font-size:13px;color:var(--muted);line-height:1.6}
.chat-preview{border-radius:28px;padding:16px;height:520px;display:flex;flex-direction:column;position:relative;overflow:hidden}
.chat-preview::after{content:'';position:absolute;inset:auto -20% -30% -20%;height:60%;background:radial-gradient(500px at 50% 0%, rgba(255,94,26,0.15), transparent);pointer-events:none}
.msg-list{flex:1;overflow:auto;display:flex;flex-direction:column;gap:12px;padding:6px;scroll-behavior:smooth}
.msg{max-width:82%;padding:12px 16px;border-radius:18px;font-size:14px;line-height:1.6;animation:pop .25s ease}
.msg.user{align-self:flex-end;background:linear-gradient(135deg,var(--orange),var(--orange2));color:white;border-bottom-right-radius:6px}
.msg.bot{align-self:flex-start;background:rgba(255,255,255,0.9);border:1px solid rgba(0,0,0,0.06);border-bottom-left-radius:6px}
@keyframes pop{from{transform:translateY(6px) scale(.98);opacity:0}to{transform:none;opacity:1}}
.inputbar{display:flex;gap:10px;margin-top:12px;padding:10px;background:rgba(255,255,255,0.9);border-radius:999px;border:1px solid rgba(0,0,0,0.08)}
.inputbar input{flex:1;border:none;outline:none;background:transparent;padding:8px 14px;font-size:14px}
.section{max-width:1250px;margin:30px auto;padding:0 24px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:900px){.grid2{grid-template-columns:1fr}}
.price-card{padding:26px;border-radius:22px;position:relative;overflow:hidden}
.price-card.popular{border:1.5px solid var(--orange);box-shadow:0 16px 40px rgba(255,94,26,0.15)}
.price{font-size:36px;font-weight:900;margin:10px 0}
.price small{font-size:14px;font-weight:600;color:var(--muted)}
.input{width:100%;padding:13px 14px;border-radius:12px;border:1px solid rgba(0,0,0,0.1);background:rgba(255,255,255,0.9);outline:none;font-size:14px}
.input:focus{border-color:var(--orange);box-shadow:0 0 0 4px rgba(255,94,26,0.12)}
.label{font-size:12px;font-weight:800;letter-spacing:.6px;color:#111;margin:14px 0 6px;display:block}
.secret-overlay{position:fixed;inset:0;z-index:999;display:none;place-items:center;background:rgba(0,0,0,0.72);backdrop-filter:blur(10px)}
.secret-box{width:min(92vw,720px);background:#0F0F0F;color:white;border-radius:22px;padding:22px;border:1px solid rgba(255,255,255,0.1);box-shadow:0 20px 80px rgba(0,0,0,0.6)}
.tag{display:inline-block;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.12);font-size:11px}
.live-dot{width:8px;height:8px;border-radius:50%;background:#22C55E;box-shadow:0 0 0 6px rgba(34,197,94,0.18);display:inline-block;animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,0.4)}70%{box-shadow:0 0 0 10px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.kbd{font-family:monospace;background:rgba(0,0,0,0.06);border:1px solid rgba(0,0,0,0.1);border-bottom-width:2px;padding:2px 6px;border-radius:6px;font-size:12px}
