/* ==========================================
ROOT VARIABLES
========================================== */

:root{

--bg:#0b1020;

--card:#121a2f;
--card2:#1a2540;

--primary:#6366f1;
--secondary:#8b5cf6;

--success:#22c55e;
--error:#ef4444;
--warning:#f59e0b;
--info:#06b6d4;

--text:#ffffff;
--muted:#94a3b8;

--border:
rgba(255,255,255,.08);

}

/* ==========================================
RESET
========================================== */

*{

margin:0;
padding:0;

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:'DM Sans',sans-serif;

background:var(--bg);

color:white;

overflow-x:hidden;

}

/* ==========================================
BACKGROUND
========================================== */

.bg-gradient{

position:fixed;

inset:0;

z-index:-1;

background:

radial-gradient(
circle at top left,
rgba(99,102,241,.18),
transparent 40%
),

radial-gradient(
circle at bottom right,
rgba(139,92,246,.18),
transparent 40%
);

}

/* ==========================================
NAVBAR
========================================== */

.navbar{

display:flex;

justify-content:space-between;

align-items:center;

padding:24px 40px;

position:sticky;

top:0;

z-index:999;

background:
rgba(11,16,32,.85);

backdrop-filter:blur(20px);

border-bottom:
1px solid var(--border);

}

.logo{

font-size:1.8rem;

font-family:'Syne',sans-serif;

font-weight:800;

background:
linear-gradient(
90deg,
var(--primary),
var(--secondary)
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

}

.navbar nav{

display:flex;

gap:16px;

}

.navbar nav a{

text-decoration:none;

color:#cbd5e1;

padding:10px 16px;

border-radius:999px;

transition:.3s;

}

.navbar nav a:hover{

background:
rgba(255,255,255,.06);

color:white;

}

.nav-actions{

display:flex;

gap:12px;

}

/* ==========================================
BUTTONS
========================================== */

.primary-btn{

padding:14px 24px;

border:none;

border-radius:14px;

cursor:pointer;

font-weight:700;

color:white;

background:
linear-gradient(
135deg,
var(--primary),
var(--secondary)
);

}

.outline-btn{

padding:14px 24px;

border-radius:14px;

background:none;

border:
1px solid var(--border);

color:white;

cursor:pointer;

}

/* ==========================================
HERO
========================================== */

.hero{

max-width:1400px;

margin:auto;

padding:110px 40px;

display:grid;

grid-template-columns:
1.1fr .9fr;

gap:60px;

align-items:center;

}

.hero-badge{

display:inline-block;

padding:10px 18px;

border-radius:999px;

background:
rgba(99,102,241,.15);

color:#c7d2fe;

font-weight:700;

margin-bottom:24px;

}

.hero h1{

font-size:
clamp(
3.5rem,
8vw,
6rem
);

line-height:1.05;

font-family:'Syne',sans-serif;

margin-bottom:20px;

}

.hero h1 span{

background:
linear-gradient(
90deg,
var(--primary),
var(--secondary)
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

}

.hero p{

font-size:1.1rem;

max-width:650px;

color:var(--muted);

margin-bottom:32px;

}

.hero-buttons{

display:flex;

gap:14px;

flex-wrap:wrap;

}

/* ==========================================
DEMO TOASTS
========================================== */

.hero-right{

display:flex;

flex-direction:column;

gap:18px;

}

.toast-demo{

display:flex;

align-items:center;

gap:16px;

padding:20px;

border-radius:20px;

background:
linear-gradient(
145deg,
var(--card),
var(--card2)
);

border:
1px solid var(--border);

}

.toast-demo i{

font-size:1.5rem;

}

.success-toast i{

color:var(--success);

}

.warning-toast i{

color:var(--warning);

}

.error-toast i{

color:var(--error);

}

/* ==========================================
SECTIONS
========================================== */

.toast-section{

max-width:1400px;

margin:auto;

padding:0 40px 120px;

}

.section-header{

text-align:center;

margin-bottom:50px;

}

.section-header span{

display:inline-block;

padding:10px 18px;

border-radius:999px;

background:
rgba(99,102,241,.15);

color:#c7d2fe;

font-weight:700;

margin-bottom:14px;

}

.section-header h2{

font-size:3rem;

font-family:'Syne',sans-serif;

}

.toast-grid{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:24px;

}

.toast-card{

padding:30px;

border-radius:24px;

background:
linear-gradient(
145deg,
var(--card),
var(--card2)
);

border:
1px solid var(--border);

}

.toast-card h3{

margin-top:20px;

margin-bottom:10px;

}

/* ==========================================
MINI TOASTS
========================================== */

.mini-toast{

padding:14px 18px;

border-radius:14px;

font-weight:600;

}

.success{

background:
rgba(34,197,94,.15);

color:#4ade80;

}

.error{

background:
rgba(239,68,68,.15);

color:#f87171;

}

.warning{

background:
rgba(245,158,11,.15);

color:#fbbf24;

}

.info{

background:
rgba(6,182,212,.15);

color:#38bdf8;

}

/* ==========================================
STATUS TOASTS
========================================== */

.online{

background:
rgba(34,197,94,.15);

color:#4ade80;

}

.offline{

background:
rgba(239,68,68,.15);

color:#f87171;

}

.loading{

background:
rgba(99,102,241,.15);

color:#a5b4fc;

}

.update{

background:
rgba(245,158,11,.15);

color:#fbbf24;

}
/* ==========================================
GLASS TOASTS
========================================== */

.glass-toast{

padding:16px 20px;

border-radius:18px;

background:
rgba(255,255,255,.08);

backdrop-filter:blur(20px);

border:
1px solid rgba(255,255,255,.12);

color:white;

}

.blue-glass{

background:
rgba(6,182,212,.12);

}

.purple-glass{

background:
rgba(139,92,246,.15);

}

/* ==========================================
GRADIENT TOASTS
========================================== */

.gradient-toast{

padding:16px 20px;

border-radius:16px;

color:white;

font-weight:600;

}

.sunset{

background:
linear-gradient(
135deg,
#f97316,
#ef4444
);

}

.ocean{

background:
linear-gradient(
135deg,
#06b6d4,
#3b82f6
);

}

.aurora{

background:
linear-gradient(
135deg,
#22c55e,
#06b6d4,
#8b5cf6
);

}

.rainbow{

background:
linear-gradient(
90deg,
#ef4444,
#f59e0b,
#22c55e,
#06b6d4,
#8b5cf6
);

}

/* ==========================================
NEON TOASTS
========================================== */

.neon-toast{

padding:16px 20px;

border-radius:16px;

background:#0f172a;

font-weight:600;

}

.purple-neon{

border:1px solid #8b5cf6;

box-shadow:
0 0 20px rgba(139,92,246,.4);

}

.blue-neon{

border:1px solid #06b6d4;

box-shadow:
0 0 20px rgba(6,182,212,.4);

}

.pink-neon{

border:1px solid #ec4899;

box-shadow:
0 0 20px rgba(236,72,153,.4);

}

/* ==========================================
AI TOASTS
========================================== */

.ai-toast{

display:flex;

align-items:center;

gap:14px;

padding:18px;

border-radius:18px;

background:
linear-gradient(
145deg,
#111827,
#1e293b
);

}

.ai-icon{

width:50px;
height:50px;

display:flex;

align-items:center;
justify-content:center;

border-radius:14px;

background:
linear-gradient(
135deg,
#6366f1,
#8b5cf6
);

font-size:1.3rem;

}

/* ==========================================
MUSIC TOASTS
========================================== */

.music-toast{

display:flex;

align-items:center;

gap:14px;

padding:16px;

border-radius:18px;

background:
linear-gradient(
145deg,
#111827,
#1e293b
);

}

.music-toast img{

width:60px;
height:60px;

border-radius:12px;

object-fit:cover;

}

.music-toast h4{

margin-bottom:4px;

}

/* ==========================================
DOWNLOAD TOASTS
========================================== */

.download-toast{

padding:18px;

border-radius:18px;

background:
linear-gradient(
145deg,
#111827,
#1e293b
);

}

.download-top{

display:flex;

justify-content:space-between;

margin-bottom:12px;

}

.download-bar{

height:10px;

border-radius:999px;

background:
rgba(255,255,255,.08);

overflow:hidden;

}

.download-fill{

height:100%;

width:78%;

border-radius:999px;

background:
linear-gradient(
135deg,
#22c55e,
#06b6d4
);

}

.upload-fill{

width:56%;

background:
linear-gradient(
135deg,
#8b5cf6,
#ec4899
);

}
/* ==========================================
ACHIEVEMENT TOASTS
========================================== */

.achievement-toast{

display:flex;

align-items:center;

gap:14px;

padding:18px;

border-radius:18px;

background:
linear-gradient(
145deg,
#111827,
#1e293b
);

border:
1px solid rgba(255,215,0,.2);

}

.trophy{

width:52px;
height:52px;

display:flex;

align-items:center;
justify-content:center;

border-radius:14px;

font-size:1.4rem;

background:
rgba(255,215,0,.15);

}

.achievement-toast.gold{

background:
linear-gradient(
135deg,
#f59e0b,
#facc15
);

color:#111827;

}

/* ==========================================
GAMING TOASTS
========================================== */

.gaming-toast{

padding:16px 20px;

border-radius:16px;

font-weight:700;

background:
linear-gradient(
145deg,
#111827,
#1e293b
);

border:
1px solid rgba(139,92,246,.2);

}

.gaming-toast.epic{

background:
linear-gradient(
135deg,
#7c3aed,
#ec4899
);

}

.gaming-toast.neon{

background:#0f172a;

border:1px solid #06b6d4;

box-shadow:
0 0 20px rgba(6,182,212,.35);

}

/* ==========================================
FINANCE TOASTS
========================================== */

.finance-toast{

padding:16px 20px;

border-radius:16px;

font-weight:600;

background:
rgba(34,197,94,.15);

color:#4ade80;

}

.finance-toast.green{

background:
linear-gradient(
135deg,
#16a34a,
#22c55e
);

color:white;

}

.finance-toast.red{

background:
linear-gradient(
135deg,
#dc2626,
#ef4444
);

color:white;

}

/* ==========================================
SECURITY TOASTS
========================================== */

.security-toast{

padding:16px 20px;

border-radius:16px;

font-weight:600;

background:
rgba(34,197,94,.12);

color:#4ade80;

border-left:
4px solid #22c55e;

}

.security-toast.warning{

background:
rgba(245,158,11,.12);

color:#fbbf24;

border-left:
4px solid #f59e0b;

}

.security-toast.danger{

background:
rgba(239,68,68,.12);

color:#f87171;

border-left:
4px solid #ef4444;

}

/* ==========================================
SOCIAL TOASTS
========================================== */

.social-toast{

padding:16px 20px;

border-radius:16px;

font-weight:600;

background:
linear-gradient(
145deg,
#111827,
#1e293b
);

border:
1px solid rgba(255,255,255,.08);

}

.social-toast:hover{

transform:
translateY(-3px);

transition:.3s ease;

}

/* ==========================================
ANIMATED TOASTS
========================================== */

.animated-toast{

padding:16px 20px;

border-radius:16px;

font-weight:600;

background:
linear-gradient(
145deg,
#111827,
#1e293b
);

}

.slide-toast{

animation:
slideToast 2.5s infinite;

}

.bounce-toast{

animation:
bounceToast 2s infinite;

}

.pulse-toast{

animation:
pulseToast 2s infinite;

}

/* ==========================================
NOTIFICATION CENTER
========================================== */

.notification-center{

display:grid;

gap:18px;

padding:35px;

border-radius:28px;

background:
linear-gradient(
145deg,
var(--card),
var(--card2)
);

border:
1px solid var(--border);

}

.notification-item{

display:flex;

align-items:center;

gap:16px;

padding:18px;

border-radius:16px;

background:
rgba(255,255,255,.03);

}

.notification-icon{

width:52px;
height:52px;

display:flex;

align-items:center;
justify-content:center;

border-radius:14px;

background:
linear-gradient(
135deg,
#6366f1,
#8b5cf6
);

font-size:1.2rem;

}

/* ==========================================
ANIMATIONS
========================================== */

@keyframes slideToast{

0%{

transform:
translateX(-10px);

}

50%{

transform:
translateX(10px);

}

100%{

transform:
translateX(-10px);

}

}

@keyframes bounceToast{

0%,100%{

transform:
translateY(0);

}

50%{

transform:
translateY(-10px);

}

}

@keyframes pulseToast{

0%{

box-shadow:
0 0 0 0 rgba(99,102,241,.4);

}

70%{

box-shadow:
0 0 0 14px rgba(99,102,241,0);

}

100%{

box-shadow:
0 0 0 0 rgba(99,102,241,0);

}

}
/* ==========================================
AI DASHBOARD TOASTS
========================================== */

.ai-dashboard-toast{

display:flex;

align-items:center;

gap:16px;

padding:20px;

border-radius:20px;

background:
linear-gradient(
145deg,
#111827,
#1e293b
);

border:
1px solid rgba(99,102,241,.2);

}

.ai-badge{

width:56px;
height:56px;

display:flex;

align-items:center;
justify-content:center;

border-radius:16px;

font-size:1.4rem;

background:
linear-gradient(
135deg,
#6366f1,
#8b5cf6
);

box-shadow:
0 0 20px rgba(99,102,241,.3);

}

/* ==========================================
SMART HOME TOASTS
========================================== */

.home-toast{

padding:18px 20px;

border-radius:18px;

font-weight:600;

background:
linear-gradient(
145deg,
#111827,
#1e293b
);

border-left:
4px solid #22c55e;

}

.home-toast:hover{

transform:
translateX(5px);

transition:.3s ease;

}

/* ==========================================
GLASS NOTIFICATION CENTER
========================================== */

.glass-center{

display:grid;

grid-template-columns:
repeat(2,1fr);

gap:20px;

}

.glass-item{

padding:20px;

border-radius:20px;

background:
rgba(255,255,255,.08);

backdrop-filter:blur(20px);

border:
1px solid rgba(255,255,255,.12);

color:white;

}

/* ==========================================
PREMIUM TOAST CARDS
========================================== */

.premium-toast-grid{

display:grid;

grid-template-columns:
repeat(3,1fr);

gap:24px;

}

.premium-toast-card{

padding:30px;

border-radius:28px;

background:
linear-gradient(
145deg,
#111827,
#1e293b
);

border:
1px solid rgba(255,255,255,.08);

}

.premium-header{

display:inline-block;

padding:10px 16px;

border-radius:999px;

margin-bottom:16px;

background:
linear-gradient(
135deg,
#6366f1,
#8b5cf6
);

font-weight:700;

}

.premium-toast-card p{

color:var(--muted);

line-height:1.8;

}

/* ==========================================
BENTO LAYOUT
========================================== */

.bento-layout{

display:grid;

grid-template-columns:
2fr 1fr;

gap:24px;

}

.bento-card{

padding:30px;

border-radius:28px;

background:
linear-gradient(
145deg,
var(--card),
var(--card2)
);

border:
1px solid var(--border);

}

.bento-card.large{

min-height:220px;

}

.bento-card h3{

margin-bottom:20px;

}

/* ==========================================
PLAYGROUND
========================================== */

.playground{

display:flex;

justify-content:center;

gap:16px;

flex-wrap:wrap;

}

.toast-btn{

padding:14px 24px;

border:none;

border-radius:14px;

font-weight:700;

cursor:pointer;

color:white;

}

.success-btn{

background:#22c55e;

}

.error-btn{

background:#ef4444;

}

.warning-btn{

background:#f59e0b;

}

.info-btn{

background:#06b6d4;

}

/* ==========================================
LIVE PREVIEW PANEL
========================================== */

.live-preview{

display:grid;

gap:20px;

padding:35px;

border-radius:28px;

background:
linear-gradient(
145deg,
var(--card),
var(--card2)
);

border:
1px solid var(--border);

}

.live-toast{

display:flex;

align-items:center;

gap:16px;

padding:18px;

border-radius:18px;

background:
rgba(255,255,255,.04);

}

.live-icon{

width:52px;
height:52px;

display:flex;

align-items:center;
justify-content:center;

border-radius:14px;

background:
linear-gradient(
135deg,
#22c55e,
#06b6d4
);

font-size:1.3rem;

}

/* ==========================================
HOVER EFFECTS
========================================== */

.toast-card:hover,
.premium-toast-card:hover,
.glass-item:hover,
.bento-card:hover{

transform:
translateY(-6px);

transition:.35s ease;

box-shadow:
0 20px 40px rgba(0,0,0,.2);

}
/* ==========================================
FAQ SECTION
========================================== */

.faq-section{

max-width:1400px;

margin:auto;

padding:0 40px 120px;

}

.faq-grid{

display:grid;

grid-template-columns:
repeat(3,1fr);

gap:24px;

}

.faq-card{

padding:32px;

border-radius:24px;

background:
linear-gradient(
145deg,
var(--card),
var(--card2)
);

border:
1px solid var(--border);

}

.faq-card h3{

margin-bottom:16px;

}

.faq-card p{

color:var(--muted);

line-height:1.8;

}

/* ==========================================
DOCUMENTATION
========================================== */

.docs-section{

max-width:1400px;

margin:auto;

padding:0 40px 120px;

}

.docs-card{

padding:35px;

border-radius:24px;

background:#0f172a;

border:
1px solid var(--border);

overflow:auto;

}

.docs-card pre{

font-family:
"Fira Code",
monospace;

color:#38bdf8;

line-height:2;

}

/* ==========================================
PLAYGROUND SECTION
========================================== */

.playground-section{

max-width:1400px;

margin:auto;

padding:0 40px 120px;

}

.playground-card{

padding:35px;

border-radius:28px;

background:
linear-gradient(
145deg,
var(--card),
var(--card2)
);

border:
1px solid var(--border);

display:grid;

gap:20px;

}

.play-item{

display:flex;

justify-content:space-between;

align-items:center;

padding:16px 0;

border-bottom:
1px solid rgba(255,255,255,.06);

}

.play-item:last-child{

border-bottom:none;

}

/* ==========================================
CTA SECTION
========================================== */

.cta-section{

max-width:1400px;

margin:auto;

padding:0 40px 120px;

}

.cta-card{

padding:70px;

border-radius:36px;

display:flex;

justify-content:space-between;

align-items:center;

gap:40px;

background:
linear-gradient(
135deg,
#6366f1,
#8b5cf6
);

}

.cta-card span{

font-weight:700;

opacity:.9;

}

.cta-card h2{

font-size:3rem;

font-family:'Syne',sans-serif;

margin:16px 0;

}

.cta-card p{

max-width:650px;

line-height:1.9;

margin-bottom:24px;

}

.cta-icon{

font-size:7rem;

animation:
floatBell 4s ease-in-out infinite;

}

/* ==========================================
NEWSLETTER
========================================== */

.newsletter-section{

max-width:1400px;

margin:auto;

padding:0 40px 120px;

}

.newsletter-card{

padding:70px;

text-align:center;

border-radius:36px;

background:
linear-gradient(
135deg,
#06b6d4,
#6366f1
);

}

.newsletter-card h2{

font-size:3rem;

font-family:'Syne',sans-serif;

margin-bottom:16px;

}

.newsletter-card p{

max-width:650px;

margin:auto;

margin-bottom:28px;

line-height:1.8;

}

.newsletter-form{

display:flex;

justify-content:center;

gap:12px;

flex-wrap:wrap;

}

.newsletter-form input{

width:380px;

padding:18px;

border:none;

outline:none;

border-radius:16px;

}

.newsletter-form button{

padding:18px 24px;

border:none;

border-radius:16px;

background:#111827;

color:white;

font-weight:700;

cursor:pointer;

}

/* ==========================================
FOOTER
========================================== */

.footer{

background:#050b16;

border-top:
1px solid var(--border);

}

.footer-grid{

max-width:1400px;

margin:auto;

padding:80px 40px;

display:grid;

grid-template-columns:
2fr 1fr 1fr 1fr;

gap:40px;

}

.footer h3,
.footer h4{

margin-bottom:18px;

}

.footer p,
.footer li{

color:var(--muted);

line-height:1.8;

}

.footer ul{

list-style:none;

}

.footer-bottom{

padding:24px;

text-align:center;

border-top:
1px solid var(--border);

color:var(--muted);

}

/* ==========================================
SCROLL TO TOP
========================================== */

.scroll-top{

position:fixed;

right:30px;
bottom:30px;

width:60px;
height:60px;

border:none;

border-radius:50%;

background:
linear-gradient(
135deg,
#6366f1,
#8b5cf6
);

color:white;

cursor:pointer;

opacity:0;

visibility:hidden;

transition:.35s ease;

z-index:999;

}

.scroll-top.show{

opacity:1;

visibility:visible;

}

/* ==========================================
DEMO TOAST CONTAINER
========================================== */

#toastContainer{

position:fixed;

top:30px;
right:30px;

display:flex;

flex-direction:column;

gap:12px;

z-index:1000;

}

.demo-toast{

padding:16px 22px;

border-radius:14px;

background:
linear-gradient(
135deg,
#22c55e,
#06b6d4
);

color:white;

font-weight:700;

animation:
toastSlide .35s ease;

}

/* ==========================================
ANIMATIONS
========================================== */

@keyframes toastSlide{

from{

opacity:0;

transform:
translateX(40px);

}

to{

opacity:1;

transform:
translateX(0);

}

}

@keyframes floatBell{

0%{

transform:
translateY(0);

}

50%{

transform:
translateY(-12px);

}

100%{

transform:
translateY(0);

}

}

@keyframes fadeUp{

from{

opacity:0;

transform:
translateY(30px);

}

to{

opacity:1;

transform:
translateY(0);

}

}

/* ==========================================
GLOBAL ANIMATION
========================================== */

.toast-card,
.faq-card,
.premium-toast-card,
.glass-item,
.bento-card{

animation:
fadeUp .7s ease both;

}

/* ==========================================
RESPONSIVE
========================================== */

@media(max-width:992px){

.hero{

grid-template-columns:1fr;

text-align:center;

}

.toast-grid{

grid-template-columns:
repeat(2,1fr);

}

.premium-toast-grid{

grid-template-columns:
repeat(2,1fr);

}

.glass-center{

grid-template-columns:1fr;

}

.bento-layout{

grid-template-columns:1fr;

}

.footer-grid{

grid-template-columns:
repeat(2,1fr);

}

.cta-card{

flex-direction:column;

text-align:center;

}

}

@media(max-width:768px){

.navbar{

flex-direction:column;

gap:20px;

}

.navbar nav{

flex-wrap:wrap;

justify-content:center;

}

.toast-grid,
.premium-toast-grid,
.faq-grid{

grid-template-columns:1fr;

}

.footer-grid{

grid-template-columns:1fr;

}

.newsletter-form{

flex-direction:column;

}

.newsletter-form input{

width:100%;

}

.hero h1{

font-size:2.8rem;

}

.section-header h2{

font-size:2rem;

}

.cta-card,
.newsletter-card{

padding:40px;

}

}

/* ==========================================
FINAL POLISH
========================================== */

.primary-btn:hover{

transform:
translateY(-2px);

box-shadow:
0 12px 28px rgba(99,102,241,.35);

}

.outline-btn:hover{

background:
rgba(255,255,255,.06);

}

.toast-btn:hover{

transform:
translateY(-2px);

filter:brightness(1.08);

}

.logo{

letter-spacing:1px;

}

.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 9999;
}

.toast {
  min-width: 250px;
  padding: 1rem;
  border-radius: 6px;
  color: #fff;
  font-family: "DM Sans", sans-serif;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  opacity: 0;
  transform: translateY(-20px);
  animation: slideIn 0.4s forwards;
}

.toast.success { background: #28a745; }
.toast.error   { background: #dc3545; }
.toast.info    { background: #17a2b8; }
.toast.warning { background: #ffc107; color: #000; }

@keyframes slideIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeOut {
  to {
    opacity: 0;
    transform: translateY(-20px);
  }
}