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

:root{

--bg:#0b1020;

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

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

--success:#22c55e;
--warning:#f59e0b;
--danger:#ef4444;

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

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

}

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

*{

margin:0;
padding:0;

box-sizing:border-box;

}

body{

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

background:var(--bg);

color:white;

overflow-x:hidden;

line-height:1.7;

}

html{

scroll-behavior:smooth;

}

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

.blob{

position:fixed;

border-radius:50%;

filter:blur(120px);

z-index:-2;

}

.blob-1{

width:420px;
height:420px;

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

top:-100px;
left:-100px;

}

.blob-2{

width:420px;
height:420px;

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

bottom:-120px;
right:-120px;

}

.grid-overlay{

position:fixed;

inset:0;

background:
linear-gradient(
rgba(255,255,255,.02) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(255,255,255,.02) 1px,
transparent 1px
);

background-size:
50px 50px;

z-index:-3;

}

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

.navbar{

position:sticky;

top:0;

z-index:999;

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

backdrop-filter:blur(20px);

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

}

.nav-container{

max-width:1400px;

margin:auto;

padding:22px 40px;

display:flex;

justify-content:space-between;

align-items:center;

}

.logo{

display:flex;

align-items:center;

gap:12px;

}

.logo-icon{

width:50px;
height:50px;

display:flex;

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

border-radius:16px;

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

}

.logo span{

font-size:1.8rem;

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

font-weight:800;

}

.nav-links{

display:flex;

gap:12px;

}

.nav-links a{

padding:12px 18px;

border-radius:999px;

text-decoration:none;

color:#cbd5e1;

transition:.3s;

}

.nav-links a:hover{

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

color:white;

}

.nav-actions{

display:flex;

gap:12px;

}

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

.primary-btn{

padding:14px 24px;

border:none;

cursor:pointer;

border-radius:16px;

font-weight:700;

color:white;

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

}

.secondary-btn,
.outline-btn{

padding:14px 24px;

border-radius:16px;

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:12px 20px;

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:35px;

}

.hero-buttons{

display:flex;

gap:14px;

flex-wrap:wrap;

}

/* ==========================================
PREVIEW CARD
========================================== */

.preview-card{

padding:50px;

border-radius:32px;

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

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

display:flex;

justify-content:center;

align-items:center;

min-height:320px;

}

.demo-btn{

padding:16px 24px;

border:none;

border-radius:14px;

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

color:white;

cursor:pointer;

font-weight:700;

}

.tooltip-demo{

position:relative;

}

.tooltip-box{

position:absolute;

left:50%;
bottom:120%;

transform:
translateX(-50%);

padding:12px 18px;

border-radius:12px;

background:#111827;

white-space:nowrap;

opacity:0;

visibility:hidden;

transition:.3s ease;

}

.tooltip-demo:hover .tooltip-box{

opacity:1;

visibility:visible;

}

/* ==========================================
SECTION HEADER
========================================== */

.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;

}

/* ==========================================
BASIC TOOLTIPS
========================================== */

.basic-section{

max-width:1400px;

margin:auto;

padding:0 40px 120px;

}

.tooltip-grid{

display:grid;

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

gap:24px;

}

.tooltip-card{

padding:35px;

text-align:center;

border-radius:28px;

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

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

}

.tooltip{

position:relative;

display:inline-block;

}

.tooltip button{

padding:14px 20px;

border:none;

border-radius:14px;

background:#6366f1;

color:white;

cursor:pointer;

}

.tooltip span{

position:absolute;

padding:10px 16px;

border-radius:12px;

background:#111827;

white-space:nowrap;

opacity:0;

visibility:hidden;

transition:.3s ease;

}

.tooltip:hover span{

opacity:1;

visibility:visible;

}

.tooltip.top span{

bottom:130%;
left:50%;

transform:
translateX(-50%);

}

.tooltip.bottom span{

top:130%;
left:50%;

transform:
translateX(-50%);

}

.tooltip.left span{

right:130%;
top:50%;

transform:
translateY(-50%);

}

.tooltip.right span{

left:130%;
top:50%;

transform:
translateY(-50%);

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

:root{

--bg:#0b1020;

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

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

--success:#22c55e;
--warning:#f59e0b;
--danger:#ef4444;

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

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

}

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

*{

margin:0;
padding:0;

box-sizing:border-box;

}

body{

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

background:var(--bg);

color:white;

overflow-x:hidden;

line-height:1.7;

}

html{

scroll-behavior:smooth;

}

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

.blob{

position:fixed;

border-radius:50%;

filter:blur(120px);

z-index:-2;

}

.blob-1{

width:420px;
height:420px;

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

top:-100px;
left:-100px;

}

.blob-2{

width:420px;
height:420px;

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

bottom:-120px;
right:-120px;

}

.grid-overlay{

position:fixed;

inset:0;

background:
linear-gradient(
rgba(255,255,255,.02) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(255,255,255,.02) 1px,
transparent 1px
);

background-size:
50px 50px;

z-index:-3;

}

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

.navbar{

position:sticky;

top:0;

z-index:999;

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

backdrop-filter:blur(20px);

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

}

.nav-container{

max-width:1400px;

margin:auto;

padding:22px 40px;

display:flex;

justify-content:space-between;

align-items:center;

}

.logo{

display:flex;

align-items:center;

gap:12px;

}

.logo-icon{

width:50px;
height:50px;

display:flex;

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

border-radius:16px;

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

}

.logo span{

font-size:1.8rem;

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

font-weight:800;

}

.nav-links{

display:flex;

gap:12px;

}

.nav-links a{

padding:12px 18px;

border-radius:999px;

text-decoration:none;

color:#cbd5e1;

transition:.3s;

}

.nav-links a:hover{

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

color:white;

}

.nav-actions{

display:flex;

gap:12px;

}

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

.primary-btn{

padding:14px 24px;

border:none;

cursor:pointer;

border-radius:16px;

font-weight:700;

color:white;

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

}

.secondary-btn,
.outline-btn{

padding:14px 24px;

border-radius:16px;

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:12px 20px;

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:35px;

}

.hero-buttons{

display:flex;

gap:14px;

flex-wrap:wrap;

}

/* ==========================================
PREVIEW CARD
========================================== */

.preview-card{

padding:50px;

border-radius:32px;

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

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

display:flex;

justify-content:center;

align-items:center;

min-height:320px;

}

.demo-btn{

padding:16px 24px;

border:none;

border-radius:14px;

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

color:white;

cursor:pointer;

font-weight:700;

}

.tooltip-demo{

position:relative;

}

.tooltip-box{

position:absolute;

left:50%;
bottom:120%;

transform:
translateX(-50%);

padding:12px 18px;

border-radius:12px;

background:#111827;

white-space:nowrap;

opacity:0;

visibility:hidden;

transition:.3s ease;

}

.tooltip-demo:hover .tooltip-box{

opacity:1;

visibility:visible;

}

/* ==========================================
SECTION HEADER
========================================== */

.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;

}

/* ==========================================
BASIC TOOLTIPS
========================================== */

.basic-section{

max-width:1400px;

margin:auto;

padding:0 40px 120px;

}

.tooltip-grid{

display:grid;

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

gap:24px;

}

.tooltip-card{

padding:35px;

text-align:center;

border-radius:28px;

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

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

}

.tooltip{

position:relative;

display:inline-block;

}

.tooltip button{

padding:14px 20px;

border:none;

border-radius:14px;

background:#6366f1;

color:white;

cursor:pointer;

}

.tooltip span{

position:absolute;

padding:10px 16px;

border-radius:12px;

background:#111827;

white-space:nowrap;

opacity:0;

visibility:hidden;

transition:.3s ease;

}

.tooltip:hover span{

opacity:1;

visibility:visible;

}

.tooltip.top span{

bottom:130%;
left:50%;

transform:
translateX(-50%);

}

.tooltip.bottom span{

top:130%;
left:50%;

transform:
translateX(-50%);

}

.tooltip.left span{

right:130%;
top:50%;

transform:
translateY(-50%);

}

.tooltip.right span{

left:130%;
top:50%;

transform:
translateY(-50%);

}
/* ==========================================
PROFILE TOOLTIPS
========================================== */

.profile-section{

max-width:1400px;

margin:auto;

padding:0 40px 120px;

}

.profile-grid{

display:grid;

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

gap:24px;

}

.profile-tooltip{

position:relative;

text-align:center;

}

.profile-tooltip img{

width:120px;
height:120px;

object-fit:cover;

border-radius:50%;

cursor:pointer;

border:4px solid #6366f1;

}

.profile-box{

position:absolute;

left:50%;

bottom:115%;

transform:
translateX(-50%);

padding:18px;

width:240px;

border-radius:18px;

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

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

opacity:0;

visibility:hidden;

transition:.3s ease;

}

.profile-tooltip:hover .profile-box{

opacity:1;

visibility:visible;

}

.profile-box h4{

margin-bottom:8px;

color:white;

}

.profile-box p{

color:#cbd5e1;

margin-bottom:6px;

}

.profile-box span{

color:var(--muted);

font-size:.9rem;

}

/* ==========================================
PRODUCT TOOLTIPS
========================================== */

.product-section{

max-width:1400px;

margin:auto;

padding:0 40px 120px;

}

.product-grid{

display:grid;

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

gap:24px;

}

.product-tooltip{

position:relative;

overflow:visible;

}

.product-tooltip img{

width:100%;

height:240px;

object-fit:cover;

border-radius:24px;

cursor:pointer;

}

.product-box{

position:absolute;

left:50%;

bottom:105%;

transform:
translateX(-50%);

width:260px;

padding:18px;

border-radius:18px;

background:#111827;

opacity:0;

visibility:hidden;

transition:.3s ease;

}

.product-tooltip:hover .product-box{

opacity:1;

visibility:visible;

}

.product-box h4{

margin-bottom:8px;

color:white;

}

.product-box p{

color:#4ade80;

font-weight:700;

margin-bottom:6px;

}

.product-box span{

color:var(--muted);

}

/* ==========================================
IMAGE TOOLTIPS
========================================== */

.image-section{

max-width:1400px;

margin:auto;

padding:0 40px 120px;

}

.image-grid{

display:grid;

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

gap:24px;

}

.image-tooltip{

position:relative;

overflow:hidden;

border-radius:24px;

}

.image-tooltip img{

width:100%;

height:260px;

object-fit:cover;

display:block;

}

.image-box{

position:absolute;

left:50%;

bottom:20px;

transform:
translateX(-50%);

padding:12px 18px;

border-radius:12px;

background:
rgba(0,0,0,.75);

backdrop-filter:blur(10px);

white-space:nowrap;

opacity:0;

visibility:hidden;

transition:.3s ease;

}

.image-tooltip:hover .image-box{

opacity:1;

visibility:visible;

}

/* ==========================================
SOCIAL TOOLTIPS
========================================== */

.social-section{

max-width:1400px;

margin:auto;

padding:0 40px 120px;

}

.social-row{

display:flex;

justify-content:center;

gap:24px;

flex-wrap:wrap;

}

.social-tooltip{

position:relative;

width:90px;
height:90px;

display:flex;

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

border-radius:24px;

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

font-size:1.8rem;

cursor:pointer;

}

.social-box{

position:absolute;

bottom:120%;

padding:12px 16px;

border-radius:12px;

background:#111827;

white-space:nowrap;

opacity:0;

visibility:hidden;

transition:.3s ease;

}

.social-tooltip:hover .social-box{

opacity:1;

visibility:visible;

}

/* ==========================================
TEAM TOOLTIPS
========================================== */

.team-section{

max-width:1400px;

margin:auto;

padding:0 40px 120px;

}

.team-grid{

display:grid;

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

gap:24px;

}

.team-tooltip{

position:relative;

text-align:center;

}

.team-avatar{

width:90px;
height:90px;

margin:auto;

display:flex;

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

border-radius:50%;

font-size:1.8rem;

font-weight:800;

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

cursor:pointer;

}

.team-box{

position:absolute;

left:50%;

bottom:120%;

transform:
translateX(-50%);

padding:18px;

width:220px;

border-radius:18px;

background:#111827;

opacity:0;

visibility:hidden;

transition:.3s ease;

}

.team-tooltip:hover .team-box{

opacity:1;

visibility:visible;

}

.team-box h4{

margin-bottom:8px;

}

/* ==========================================
PRICING TOOLTIPS
========================================== */

.pricing-section{

max-width:1400px;

margin:auto;

padding:0 40px 120px;

}

.pricing-grid{

display:grid;

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

gap:24px;

}

.pricing-tooltip{

padding:28px;

text-align:center;

border-radius:24px;

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

}

.price-info{

position:relative;

display:inline-flex;

align-items:center;

gap:10px;

font-size:1.4rem;

font-weight:700;

}

.price-info i{

cursor:pointer;

color:#38bdf8;

}

.price-box{

position:absolute;

left:50%;

bottom:130%;

transform:
translateX(-50%);

padding:12px 16px;

border-radius:12px;

background:#111827;

white-space:nowrap;

opacity:0;

visibility:hidden;

transition:.3s ease;

font-size:.9rem;

font-weight:400;

}

.price-info:hover .price-box{

opacity:1;

visibility:visible;

}

/* ==========================================
DASHBOARD STATS
========================================== */

.dashboard-section{

max-width:1400px;

margin:auto;

padding:0 40px 120px;

}

.dashboard-grid{

display:grid;

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

gap:24px;

}

.stat-tooltip{

position:relative;

padding:35px;

text-align:center;

border-radius:24px;

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

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

}

.stat-tooltip h3{

font-size:2.5rem;

margin-bottom:8px;

color:white;

}

.stat-tooltip p{

color:var(--muted);

}

.stat-box{

position:absolute;

left:50%;

bottom:110%;

transform:
translateX(-50%);

padding:12px 18px;

border-radius:12px;

background:#111827;

white-space:nowrap;

opacity:0;

visibility:hidden;

transition:.3s ease;

}

.stat-tooltip:hover .stat-box{

opacity:1;

visibility:visible;

}
/* ==========================================
INTERACTIVE TOOLTIPS
========================================== */

.interactive-section{

max-width:1400px;

margin:auto;

padding:0 40px 120px;

}

.interactive-grid{

display:grid;

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

gap:30px;

}

.interactive-tooltip{

position:relative;

text-align:center;

}

.interactive-btn{

padding:18px 28px;

border:none;

border-radius:18px;

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

color:white;

font-weight:700;

cursor:pointer;

}

.interactive-box{

position:absolute;

left:50%;

bottom:120%;

transform:
translateX(-50%);

width:260px;

padding:20px;

border-radius:18px;

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

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

opacity:0;

visibility:hidden;

transition:.35s ease;

}

.interactive-tooltip:hover .interactive-box{

opacity:1;

visibility:visible;

}

.quick-actions{

display:flex;

gap:10px;

justify-content:center;

margin-top:12px;

}

.quick-actions button{

padding:8px 12px;

border:none;

border-radius:10px;

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

color:white;

cursor:pointer;

}

/* ==========================================
RICH CONTENT TOOLTIPS
========================================== */

.rich-section{

max-width:1400px;

margin:auto;

padding:0 40px 120px;

}

.rich-grid{

display:grid;

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

gap:30px;

}

.rich-tooltip{

position:relative;

text-align:center;

}

.rich-tooltip button{

padding:16px 24px;

border:none;

border-radius:16px;

background:#06b6d4;

color:white;

cursor:pointer;

font-weight:700;

}

.rich-box{

position:absolute;

left:50%;

bottom:120%;

transform:
translateX(-50%);

width:300px;

padding:20px;

border-radius:20px;

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

opacity:0;

visibility:hidden;

transition:.35s ease;

}

.rich-tooltip:hover .rich-box{

opacity:1;

visibility:visible;

}

.rich-box img{

width:100%;

height:160px;

object-fit:cover;

border-radius:14px;

margin-bottom:14px;

}

.rich-box h4{

margin-bottom:10px;

}

.rich-box p{

color:var(--muted);

margin-bottom:8px;

}

/* ==========================================
DASHBOARD WIDGETS
========================================== */

.widget-section{

max-width:1400px;

margin:auto;

padding:0 40px 120px;

}

.widget-grid{

display:grid;

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

gap:24px;

}

.widget-tooltip{

position:relative;

}

.widget-card{

padding:30px;

border-radius:24px;

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

text-align:center;

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

}

.widget-card h3{

margin-bottom:12px;

color:#cbd5e1;

}

.widget-card h2{

font-size:2.4rem;

color:white;

}

.widget-box{

position:absolute;

left:50%;

bottom:110%;

transform:
translateX(-50%);

padding:12px 18px;

border-radius:12px;

background:#111827;

white-space:nowrap;

opacity:0;

visibility:hidden;

transition:.3s ease;

}

.widget-tooltip:hover .widget-box{

opacity:1;

visibility:visible;

}

/* ==========================================
NOTIFICATION TOOLTIPS
========================================== */

.notification-section{

max-width:1400px;

margin:auto;

padding:0 40px 120px;

}

.notification-row{

display:flex;

justify-content:center;

gap:24px;

flex-wrap:wrap;

}

.notification-tooltip{

position:relative;

width:90px;
height:90px;

display:flex;

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

border-radius:24px;

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

font-size:1.7rem;

cursor:pointer;

}

.notification-box{

position:absolute;

bottom:120%;

padding:12px 16px;

border-radius:12px;

background:#111827;

white-space:nowrap;

opacity:0;

visibility:hidden;

transition:.3s ease;

}

.notification-tooltip:hover .notification-box{

opacity:1;

visibility:visible;

}

/* ==========================================
AI ASSISTANT TOOLTIPS
========================================== */

.ai-section{

max-width:1400px;

margin:auto;

padding:0 40px 120px;

}

.ai-grid{

display:grid;

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

gap:30px;

}

.ai-tooltip{

position:relative;

text-align:center;

}

.ai-avatar{

width:110px;
height:110px;

margin:auto;

display:flex;

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

border-radius:24px;

font-size:2.5rem;

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

cursor:pointer;

}

.ai-box{

position:absolute;

left:50%;

bottom:115%;

transform:
translateX(-50%);

width:260px;

padding:18px;

border-radius:18px;

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

opacity:0;

visibility:hidden;

transition:.35s ease;

}

.ai-tooltip:hover .ai-box{

opacity:1;

visibility:visible;

}

/* ==========================================
GLASS CARDS
========================================== */

.glass-card-section{

max-width:1400px;

margin:auto;

padding:0 40px 120px;

}

.glass-card-grid{

display:grid;

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

gap:24px;

}

.glass-card-tooltip{

position:relative;

}

.glass-card{

padding:30px;

border-radius:24px;

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

backdrop-filter:blur(20px);

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

text-align:center;

}

.glass-info{

position:absolute;

left:50%;

bottom:115%;

transform:
translateX(-50%);

padding:12px 18px;

border-radius:12px;

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

backdrop-filter:blur(20px);

white-space:nowrap;

opacity:0;

visibility:hidden;

transition:.35s ease;

}

.glass-card-tooltip:hover .glass-info{

opacity:1;

visibility:visible;

}

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

.advanced-section{

max-width:1400px;

margin:auto;

padding:0 40px 120px;

}

.advanced-grid{

display:grid;

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

gap:24px;

}

.advanced-tooltip{

position:relative;

text-align:center;

}

.advanced-tooltip button{

padding:16px 24px;

border:none;

border-radius:16px;

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

color:white;

cursor:pointer;

font-weight:700;

}

.advanced-box{

position:absolute;

left:50%;

bottom:120%;

transform:
translateX(-50%) scale(.8);

padding:14px 18px;

border-radius:14px;

background:#111827;

white-space:nowrap;

opacity:0;

visibility:hidden;

transition:.35s ease;

}

.advanced-tooltip:hover .advanced-box{

opacity:1;

visibility:visible;

transform:
translateX(-50%) scale(1);

}
/* ==========================================
ANIMATED TOOLTIPS
========================================== */

.animated-section{

max-width:1400px;

margin:auto;

padding:0 40px 120px;

}

.animated-grid{

display:grid;

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

gap:24px;

}

.animated-tooltip{

position:relative;

text-align:center;

}

.animated-tooltip button{

padding:16px 24px;

border:none;

border-radius:16px;

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

color:white;

cursor:pointer;

font-weight:700;

}

.animated-box{

position:absolute;

left:50%;

bottom:120%;

transform:
translateX(-50%);

padding:14px 18px;

border-radius:14px;

background:#111827;

white-space:nowrap;

opacity:0;

visibility:hidden;

}

.fade-tip:hover .animated-box{

opacity:1;

visibility:visible;

transition:.35s ease;

}

.slide-tip .animated-box{

transform:
translateX(-50%) translateY(20px);

}

.slide-tip:hover .animated-box{

opacity:1;

visibility:visible;

transform:
translateX(-50%) translateY(0);

transition:.35s ease;

}

.bounce-tip:hover .animated-box{

opacity:1;

visibility:visible;

animation:
bounceTip .5s ease;

}

/* ==========================================
FLOATING TOOLTIPS
========================================== */

.floating-section{

max-width:1400px;

margin:auto;

padding:0 40px 120px;

}

.floating-container{

display:flex;

justify-content:center;

gap:40px;

flex-wrap:wrap;

}

.floating-tooltip{

position:relative;

}

.floating-icon{

width:90px;
height:90px;

display:flex;

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

border-radius:24px;

font-size:2rem;

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

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

cursor:pointer;

}

.floating-box{

position:absolute;

left:50%;

bottom:120%;

transform:
translateX(-50%);

padding:14px 18px;

border-radius:14px;

background:#111827;

white-space:nowrap;

opacity:0;

visibility:hidden;

transition:.35s ease;

}

.floating-tooltip:hover .floating-box{

opacity:1;

visibility:visible;

}

/* ==========================================
FAQ TOOLTIPS
========================================== */

.faq-section{

max-width:1400px;

margin:auto;

padding:0 40px 120px;

}

.faq-grid{

display:grid;

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

gap:24px;

}

.faq-tooltip{

position:relative;

padding:30px;

border-radius:24px;

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

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

cursor:pointer;

}

.faq-tooltip h4{

color:white;

}

.faq-box{

position:absolute;

left:50%;

bottom:110%;

transform:
translateX(-50%);

width:240px;

padding:16px;

border-radius:14px;

background:#111827;

opacity:0;

visibility:hidden;

transition:.35s ease;

}

.faq-tooltip:hover .faq-box{

opacity:1;

visibility:visible;

}

/* ==========================================
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;

}

/* ==========================================
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,
var(--primary),
var(--secondary)
);

}

.cta-content span{

font-weight:700;

}

.cta-content h2{

font-size:3rem;

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

margin:18px 0;

}

.cta-content p{

max-width:650px;

line-height:1.9;

margin-bottom:24px;

}

.cta-buttons{

display:flex;

gap:14px;

flex-wrap:wrap;

}

.cta-icon{

font-size:6rem;

opacity:.9;

}

/* ==========================================
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:700px;

margin:auto;

margin-bottom:30px;

}

.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-container{

max-width:1400px;

margin:auto;

padding:80px 40px;

display:grid;

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

gap:40px;

}

.footer-logo{

font-size:2rem;

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

font-weight:800;

margin-bottom:18px;

}

.footer-brand p{

color:var(--muted);

}

.footer-column h3{

margin-bottom:18px;

}

.footer-column ul{

list-style:none;

}

.footer-column li{

margin-bottom:12px;

}

.footer-column a{

text-decoration:none;

color:var(--muted);

}

.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,
var(--primary),
var(--secondary)
);

color:white;

cursor:pointer;

opacity:0;

visibility:hidden;

transition:.35s ease;

z-index:999;

}

.scroll-top.show{

opacity:1;

visibility:visible;

}

/* ==========================================
NEW TOOLTIP COMPONENTS
========================================== */

/* 1. Pulse Tooltip */
.tooltip-pulse{
  display:flex !important;
  align-items:center;
  gap:8px;
}
.pulse-dot{
  width:8px;
  height:8px;
  background:#10b981;
  border-radius:50%;
  box-shadow:0 0 0 0 rgba(16,185,129,0.7);
  animation:pulseDot 1.5s infinite;
}
@keyframes pulseDot{
  0%{box-shadow:0 0 0 0 rgba(16,185,129,0.7);}
  70%{box-shadow:0 0 0 10px rgba(16,185,129,0);}
  100%{box-shadow:0 0 0 0 rgba(16,185,129,0);}
}

/* 2. Gradient Tooltip */
.tooltip-gradient{
  background:linear-gradient(135deg,var(--primary),var(--secondary)) !important;
  border:none;
  box-shadow:0 4px 15px rgba(99,102,241,0.4);
}

/* 3. Glass Tooltip */
.tooltip-glass{
  background:rgba(255,255,255,0.1) !important;
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.2);
  color:#fff;
}

/* 4. Soft Tooltip */
.tooltip-soft{
  background:#f1f5f9 !important;
  color:#0f172a !important;
  font-weight:600;
  box-shadow:0 4px 10px rgba(0,0,0,0.1);
}

/* 5. Bounce Tooltip */
.tooltip-wrapper:hover .tooltip-bounce{
  animation:bounceTip 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* 6. Info Tooltip */
.tooltip-info{
  display:flex !important;
  align-items:center;
  gap:8px;
  background:#1e293b !important;
  border-left:3px solid #38bdf8;
}
.tooltip-info i{
  color:#38bdf8;
}

/* 7. Action Tooltip */
.tooltip-action{
  display:flex !important;
  flex-direction:column;
  gap:10px;
  padding:14px !important;
}
.tip-btn{
  background:var(--primary);
  color:white;
  border:none;
  padding:6px 12px;
  border-radius:6px;
  cursor:pointer;
  font-size:0.75rem;
}

/* 8. Success Tooltip */
.tooltip-success{
  background:var(--success) !important;
  color:white;
  display:flex !important;
  align-items:center;
  gap:8px;
}

/* 9. Warning Tooltip */
.tooltip-warning{
  background:var(--warning) !important;
  color:#fff !important;
  display:flex !important;
  align-items:center;
  gap:8px;
}

/* 10. Danger Tooltip */
.tooltip-danger{
  background:var(--danger) !important;
  color:white;
  display:flex !important;
  align-items:center;
  gap:8px;
}

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

@keyframes float{

0%{transform:translateY(0);}
50%{transform:translateY(-10px);}
100%{transform:translateY(0);}

}

@keyframes bounceTip{

0%{transform:translateX(-50%) scale(.8);}
60%{transform:translateX(-50%) scale(1.08);}
100%{transform:translateX(-50%) scale(1);}

}

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

@media(max-width:992px){

.hero{

grid-template-columns:1fr;

text-align:center;

}

.tooltip-grid,
.profile-grid,
.product-grid,
.image-grid,
.dashboard-grid,
.widget-grid{

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

}

.footer-container{

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

}

.cta-card{

flex-direction:column;

text-align:center;

}

}

@media(max-width:768px){

.nav-container{

flex-direction:column;

gap:20px;

}

.tooltip-grid,
.profile-grid,
.product-grid,
.image-grid,
.dashboard-grid,
.widget-grid,
.glass-grid,
.button-grid,
.neon-grid,
.status-grid,
.faq-grid,
.advanced-grid,
.animated-grid{

grid-template-columns:1fr;

}

.footer-container{

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;

}

}

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

.tooltip-card:hover,
.profile-tooltip:hover,
.product-tooltip:hover,
.stat-tooltip:hover,
.widget-card:hover{

transform:
translateY(-6px);

transition:.35s ease;

}

.primary-btn:hover{

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

}

.logo-icon{

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

}