:root{
  --bg:#06111f;--bg2:#0b1e38;--card:#0e1b2e;--card2:#0b1728;--line:#1d3150;--blue:#1677ff;--cyan:#00b4ff;--text:#eef6ff;--muted:#9fb2ce;--white:#fff;--danger:#ff5b6e;--green:#18c48f;--yellow:#ffc857;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,Arial,sans-serif;background:radial-gradient(circle at top right,rgba(22,119,255,.22),transparent 35%),linear-gradient(135deg,#06111f,#0b1e38 45%,#07111f);color:var(--text)}
a{color:inherit;text-decoration:none}
p{line-height:1.7}
.muted{color:var(--muted)}
.btn{border:0;border-radius:12px;padding:10px 14px;font-size:13px;font-weight:900;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:.2s}
.btn:hover{transform:translateY(-1px)}
.btn-sm{padding:7px 10px;font-size:12px;border-radius:10px}
.btn-primary{background:linear-gradient(135deg,#0d6efd,#00a7ff);color:white;box-shadow:0 12px 28px rgba(22,119,255,.22)}
.btn-dark{background:#13233a;color:white;border:1px solid var(--line)}
.btn-green{background:rgba(24,196,143,.16);color:#62e0bb;border:1px solid rgba(24,196,143,.35)}
.btn-yellow{background:rgba(255,200,87,.14);color:#ffd179;border:1px solid rgba(255,200,87,.3)}
.btn-red{background:rgba(255,91,110,.13);color:#ff94a2;border:1px solid rgba(255,91,110,.35)}
.site-header{position:fixed;top:0;left:0;right:0;z-index:999;display:flex;justify-content:space-between;align-items:center;padding:16px 36px;background:rgba(6,16,32,.78);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:12px}.brand-mark{width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,#0d6efd,#00b4ff);display:grid;place-items:center;font-weight:1000}.brand-text{font-size:22px;font-weight:1000;line-height:1}.brand-text span,.footer-brand span{color:var(--blue)}.brand-text small{display:block;color:var(--muted);font-size:11px;letter-spacing:2px;text-transform:uppercase;margin-top:4px}.site-nav{display:flex;gap:24px;color:#c8d8ee;font-weight:800}.site-nav a:hover{color:#fff}.nav-cta{background:rgba(22,119,255,.16);border:1px solid rgba(22,119,255,.45);padding:12px 16px;border-radius:14px;font-weight:900}
.hero{min-height:100vh;display:grid;place-items:center;padding:120px 30px 60px}.vip-hero{grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:28px;max-width:1180px;margin:auto}.hero-content,.hero-card,.section{background:rgba(14,27,46,.78);border:1px solid var(--line);box-shadow:0 24px 80px rgba(0,0,0,.25);border-radius:32px}.hero-content{padding:44px}.eyebrow{display:inline-flex;color:#75c9ff;font-weight:1000;letter-spacing:1.5px;text-transform:uppercase;font-size:12px;margin-bottom:12px}.hero h1{font-size:58px;line-height:1.03;margin:0 0 18px;letter-spacing:-1px}.hero h1 span{background:linear-gradient(135deg,#39a2ff,#00d4ff);-webkit-background-clip:text;background-clip:text;color:transparent}.hero-text{color:#c9d9ef;font-size:18px;max-width:760px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0}.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:24px}.hero-stats div{background:#08182b;border:1px solid var(--line);padding:16px;border-radius:18px}.hero-stats strong{display:block;font-size:24px}.hero-stats span{color:var(--muted);font-size:13px}.hero-card{padding:26px}
.section{max-width:1180px;margin:0 auto 28px;padding:40px}.section-head{text-align:center;max-width:760px;margin:0 auto 28px}.section-head h2,.ai-highlight h2,.contact-section h2{font-size:38px;line-height:1.1;margin:6px 0 10px}.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.service-card{background:linear-gradient(180deg,rgba(8,24,43,.95),rgba(8,18,33,.95));border:1px solid var(--line);padding:22px;border-radius:22px;transition:.2s}.service-card:hover{transform:translateY(-4px);border-color:rgba(22,119,255,.7)}.service-card .icon{font-size:30px;margin-bottom:12px}.service-card h3{margin:0 0 8px}.service-card p{color:var(--muted);font-size:14px;margin:0}.ai-highlight,.contact-section{display:grid;grid-template-columns:1.4fr .6fr;gap:24px;align-items:center}.check-list{list-style:none;padding:0;margin:18px 0}.check-list li{padding:9px 0;color:#cfe2ff}.check-list li:before{content:'✓';color:var(--green);font-weight:1000;margin-right:10px}.glass-panel{background:rgba(8,24,43,.9);border:1px solid var(--line);border-radius:24px;padding:28px}.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.process-grid div{background:#08182b;border:1px solid var(--line);padding:22px;border-radius:22px}.process-grid span{color:var(--blue);font-weight:1000}.contact-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}.footer{max-width:1180px;margin:0 auto 40px;padding:26px;display:flex;align-items:center;justify-content:space-between;gap:18px;color:#9fb2ce}.footer-brand{font-size:22px;font-weight:1000;color:#fff}.footer-links{display:flex;flex-wrap:wrap;gap:16px}.footer a:hover{color:#fff}
.premium-card h3{font-size:30px;margin:10px 0 10px}.premium-card p{color:#c9d9ef}.card-label{display:inline-flex;padding:8px 12px;border-radius:999px;background:rgba(22,119,255,.16);border:1px solid rgba(22,119,255,.4);color:#8ed6ff;font-weight:900;font-size:12px;text-transform:uppercase;letter-spacing:1px}.mini-list{display:grid;gap:10px;margin:22px 0}.mini-list span{background:#08182b;border:1px solid var(--line);padding:12px 14px;border-radius:14px;color:#d8e9ff;font-weight:800}.full-btn{width:100%}.pricing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.price-card{background:linear-gradient(180deg,rgba(8,24,43,.95),rgba(8,18,33,.95));border:1px solid var(--line);padding:24px;border-radius:24px;transition:.2s}.price-card:hover{transform:translateY(-4px);border-color:rgba(22,119,255,.7)}.price-card.featured{border-color:rgba(0,180,255,.85);box-shadow:0 18px 45px rgba(0,180,255,.12)}.price-card h3{margin:0 0 12px;font-size:22px}.price-card p{color:var(--muted);min-height:94px}.faq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.faq-item{background:#08182b;border:1px solid var(--line);padding:22px;border-radius:22px}.faq-item h3{margin:0 0 8px}.faq-item p{color:var(--muted);margin:0}.hero-box{max-width:900px;margin:auto;background:rgba(14,27,46,.78);border:1px solid var(--line);box-shadow:0 24px 80px rgba(0,0,0,.25);border-radius:32px;padding:44px}.hero-box h1{font-size:46px;line-height:1.08;margin:0 0 16px}.hero-box h1 span{background:linear-gradient(135deg,#39a2ff,#00d4ff);-webkit-background-clip:text;background-clip:text;color:transparent}.service-list{display:grid;gap:12px;margin-top:22px}.service-item{background:#08182b;border:1px solid var(--line);padding:14px 16px;border-radius:16px;font-weight:800}

/* Compact CRM Dashboard */
.login-page{min-height:100vh;display:grid;place-items:center;padding:20px}.login-card{width:100%;max-width:420px;background:rgba(14,27,46,.92);border:1px solid var(--line);border-radius:20px;padding:26px;box-shadow:0 25px 70px rgba(0,0,0,.35)}.brand-badge{width:60px;height:60px;border-radius:18px;background:linear-gradient(135deg,#0d6efd,#00b4ff);display:grid;place-items:center;font-size:24px;font-weight:900;margin-bottom:16px}.form-group{margin:12px 0}.form-group label{display:block;margin-bottom:7px;color:#cfe2ff;font-size:13px}.input,select,textarea{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:#081525;color:var(--text);outline:none;font-size:13px}.input:focus,textarea:focus,select:focus{border-color:var(--blue)}.alert{padding:10px 12px;border-radius:10px;margin:10px 0;font-size:13px}.alert-danger{background:rgba(255,91,110,.12);color:#ff8e9d;border:1px solid rgba(255,91,110,.35)}.alert-success{background:rgba(24,196,143,.12);color:#62e0bb;border:1px solid rgba(24,196,143,.35)}
.layout{display:flex;min-height:100vh}.sidebar{width:230px;background:#061020;border-right:1px solid var(--line);padding:18px;position:fixed;inset:0 auto 0 0}.logo{font-size:21px;font-weight:900;letter-spacing:.5px}.logo span{color:#1388ff}.nav{margin-top:22px}.nav a{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:10px;color:#c8d8ee;margin-bottom:6px;font-size:13px;font-weight:800}.nav a:hover,.nav a.active{background:#10213a;color:white}.main{margin-left:230px;width:calc(100% - 230px);padding:20px}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;gap:12px}.topbar h1{font-size:24px;margin:0}.topbar-actions{display:flex;gap:8px;flex-wrap:wrap}.cards{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}.card{background:rgba(14,27,46,.86);border:1px solid var(--line);border-radius:16px;padding:14px;box-shadow:0 12px 34px rgba(0,0,0,.14)}.card h2{font-size:18px;margin:0 0 12px}.metric{font-size:24px;font-weight:900;margin-top:5px}.metric-label{font-size:12px;color:#9fb2ce}.metric-hot{color:#5fe3bd}.metric-warm{color:#ffd179}.metric-cold{color:#ff94a2}.metric-blue{color:#83b9ff}.table-wrap{overflow:auto}.table{width:100%;border-collapse:collapse;min-width:980px}.table th,.table td{padding:10px 9px;border-bottom:1px solid var(--line);text-align:left;font-size:12.5px;vertical-align:top}.table th{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:#89a6c9}.table td{color:#d9e9ff}.table .small{font-size:11px;color:#9fb2ce}.badge{display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:900;white-space:nowrap}.Hot{background:rgba(24,196,143,.15);color:#5fe3bd}.Warm{background:rgba(255,200,87,.15);color:#ffd179}.Cold,.Lost{background:rgba(255,91,110,.15);color:#ff94a2}.New,.Follow.Up,.Closed{background:rgba(22,119,255,.15);color:#83b9ff}.score-pill{display:inline-flex;padding:5px 9px;border-radius:999px;background:#08182b;border:1px solid var(--line);font-size:11px;font-weight:900}.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.lead-info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.info-box{background:#08182b;border:1px solid var(--line);border-radius:12px;padding:10px}.info-box small{display:block;color:#9fb2ce;font-size:11px;margin-bottom:4px}.info-box strong{font-size:13px}.chat-history{display:flex;flex-direction:column;gap:10px}.chat-message{padding:10px 12px;border-radius:14px;max-width:78%;font-size:13px;line-height:1.55}.chat-message.customer{background:#0d6efd;margin-left:auto}.chat-message.sara{background:#132743}.chat-message small{display:block;margin-top:7px;opacity:.75;font-size:10px}.quick-actions{display:flex;gap:6px;flex-wrap:wrap}.filter-form{display:flex;gap:8px;flex-wrap:wrap}.filter-form .input{max-width:280px}.status-select{min-width:120px}.summary-cell{max-width:260px;white-space:normal}
.whatsapp-float{position:fixed;right:22px;bottom:22px;width:58px;height:58px;background:#25D366;color:#fff;padding:0;border-radius:50%;font-size:0;font-weight:900;display:flex;align-items:center;justify-content:center;gap:0;box-shadow:0 14px 40px rgba(0,0,0,.35);z-index:99999;transition:.2s;border:1px solid rgba(255,255,255,.18)}.whatsapp-float:hover{background:#1ebe5d;transform:translateY(-2px)}.whatsapp-icon{width:29px;height:29px;display:block;flex-shrink:0}

@media(max-width:1150px){.cards{grid-template-columns:repeat(3,1fr)}.service-grid,.pricing-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:950px){
  .site-header{position:static;display:block;text-align:center;padding:16px}.brand{justify-content:center}.site-nav{justify-content:center;flex-wrap:wrap;margin:14px 0;gap:14px}.nav-cta{display:inline-flex}.vip-hero,.ai-highlight,.contact-section{grid-template-columns:1fr}.hero{padding:26px 14px}.hero-content{padding:26px}.hero h1{font-size:36px}.hero-text{font-size:16px}.hero-stats,.service-grid,.process-grid,.pricing-grid,.faq-grid{grid-template-columns:1fr}.section{margin:0 14px 20px;padding:24px}.section-head h2,.ai-highlight h2,.contact-section h2{font-size:28px}.footer{display:block;text-align:center;margin:0 14px 30px}.footer-links{justify-content:center;margin-top:14px}.hero-box{padding:26px;margin:0 14px}.hero-box h1{font-size:34px}.price-card p{min-height:auto}.contact-actions{justify-content:flex-start}
  .layout{display:block}.sidebar{position:static;width:100%;display:block}.nav{display:flex;gap:6px;overflow:auto;margin-top:14px}.nav a{white-space:nowrap}.main{margin:0;width:100%;padding:14px}.topbar{align-items:flex-start;flex-direction:column}.topbar h1{font-size:22px}.cards{grid-template-columns:repeat(2,1fr)}.card{padding:12px;border-radius:14px}.metric{font-size:22px}.grid{grid-template-columns:1fr}.lead-info-grid{grid-template-columns:1fr}.table{min-width:880px}.table th,.table td{padding:9px 8px;font-size:12px}.filter-form .input{max-width:100%}.chat-message{max-width:92%;font-size:12.5px}.whatsapp-float{right:14px;bottom:14px;width:56px;height:56px;text-align:center;justify-content:center}
}
@media(max-width:520px){.cards{grid-template-columns:1fr}.btn{width:auto}.quick-actions .btn{flex:1}.table{min-width:820px}}

/* Sara Website Chat Widget */
.chat-bubble{position:fixed;right:22px;bottom:92px;width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0d6efd,#00b4ff);color:#fff;font-size:25px;box-shadow:0 14px 40px rgba(0,0,0,.35);z-index:999999;cursor:pointer;border:1px solid rgba(255,255,255,.18)}
.chat-box{position:fixed;right:22px;bottom:92px;width:360px;max-width:calc(100vw - 28px);height:510px;max-height:calc(100vh - 120px);background:#071526;border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:0 22px 70px rgba(0,0,0,.45);z-index:999999;color:var(--text);display:none}
.chat-head{height:66px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;background:linear-gradient(135deg,#0d6efd,#00b4ff);color:#fff}.chat-head strong{display:block;font-size:17px}.chat-head span{display:block;font-size:12px;opacity:.9}.chat-head button{width:34px;height:34px;border:0;border-radius:10px;background:rgba(255,255,255,.18);color:#fff;font-size:22px;cursor:pointer}
.chat-body{height:calc(100% - 126px);padding:14px;overflow:auto;background:radial-gradient(circle at top right,rgba(22,119,255,.12),transparent 45%),#071526}.msg{max-width:84%;padding:10px 12px;border-radius:15px;margin:0 0 10px;font-size:13px;line-height:1.55;white-space:normal}.msg.user{margin-left:auto;background:#0d6efd;color:#fff;border-bottom-right-radius:5px}.msg.bot{margin-right:auto;background:#132743;color:#e9f4ff;border:1px solid rgba(255,255,255,.06);border-bottom-left-radius:5px}.msg.typing{opacity:.75;font-style:italic}
.chat-form{height:60px;display:flex;gap:8px;padding:10px;background:#081525;border-top:1px solid var(--line)}.chat-form input{flex:1;border:1px solid var(--line);background:#06111f;color:#fff;border-radius:12px;padding:0 12px;outline:none}.chat-form input:focus{border-color:#0d6efd}.chat-form button{border:0;border-radius:12px;background:linear-gradient(135deg,#0d6efd,#00b4ff);color:#fff;font-weight:900;padding:0 15px;cursor:pointer}
@media(max-width:520px){.chat-box{right:14px;left:14px;bottom:82px;width:auto;height:500px}.chat-bubble{right:18px;bottom:82px}.whatsapp-float{bottom:14px}.msg{font-size:12.5px;max-width:90%}}


/* =========================================================
   TrendHive Premium AI SaaS Theme
   Floating glowing cards + animated sidebar + glass buttons
   Paste/update generated by ChatGPT
   ========================================================= */

:root{
    --th-bg:#050816;
    --th-bg-soft:#08111f;
    --th-glass:rgba(15,23,42,.72);
    --th-glass-strong:rgba(10,18,35,.88);
    --th-border:rgba(255,255,255,.10);
    --th-border-blue:rgba(22,119,255,.35);
    --th-blue:#1677ff;
    --th-cyan:#00d4ff;
    --th-green:#18c48f;
    --th-yellow:#ffc857;
    --th-red:#ff5b6e;
    --th-text:#f3f8ff;
    --th-muted:#9fb2ce;
    --th-shadow:0 24px 70px rgba(0,0,0,.38);
    --th-blue-shadow:0 26px 70px rgba(22,119,255,.18);
}

html{
    background:#050816;
}

body{
    color:var(--th-text)!important;
    background:
        radial-gradient(circle at 12% 8%, rgba(0,212,255,.16), transparent 28%),
        radial-gradient(circle at 88% 5%, rgba(22,119,255,.20), transparent 28%),
        radial-gradient(circle at 50% 105%, rgba(24,196,143,.08), transparent 38%),
        linear-gradient(135deg,#040713,#071527 45%,#030713)!important;
    background-attachment:fixed;
    overflow-x:hidden;
}

body:before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:-1;
    background:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size:42px 42px;
    mask-image:linear-gradient(to bottom, rgba(0,0,0,.75), transparent 85%);
}

body:after{
    content:"";
    position:fixed;
    width:520px;
    height:520px;
    right:-180px;
    top:80px;
    background:radial-gradient(circle, rgba(0,212,255,.14), transparent 65%);
    filter:blur(10px);
    pointer-events:none;
    z-index:-1;
    animation:thFloatGlow 8s ease-in-out infinite alternate;
}

/* Floating glowing cards */
.card,
.hero-content,
.hero-card,
.hero-box,
.section,
.login-card,
.service-card,
.price-card,
.faq-item,
.glass-panel,
.process-grid div,
.info-box,
.mini-list span,
.table-wrap,
.mode-box,
.manual-reply-bottom,
.conversation-box{
    position:relative;
    background:linear-gradient(180deg, rgba(15,23,42,.78), rgba(8,17,32,.68))!important;
    border:1px solid var(--th-border)!important;
    border-radius:24px!important;
    backdrop-filter:blur(22px) saturate(135%);
    -webkit-backdrop-filter:blur(22px) saturate(135%);
    box-shadow:
        var(--th-shadow),
        inset 0 1px 0 rgba(255,255,255,.07)!important;
    overflow:hidden;
    transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease;
}

.card:before,
.hero-content:before,
.hero-card:before,
.hero-box:before,
.section:before,
.login-card:before,
.service-card:before,
.price-card:before,
.glass-panel:before,
.mode-box:before,
.manual-reply-bottom:before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        linear-gradient(135deg, rgba(255,255,255,.10), transparent 22%),
        radial-gradient(circle at top right, rgba(0,212,255,.12), transparent 36%);
    opacity:.65;
}

.card:hover,
.service-card:hover,
.price-card:hover,
.faq-item:hover,
.process-grid div:hover,
.info-box:hover{
    transform:translateY(-5px);
    border-color:var(--th-border-blue)!important;
    box-shadow:
        0 28px 85px rgba(22,119,255,.18),
        0 18px 55px rgba(0,0,0,.38),
        inset 0 1px 0 rgba(255,255,255,.10)!important;
}

/* Premium animated sidebar */
.sidebar{
    background:
        linear-gradient(180deg, rgba(6,15,30,.94), rgba(5,10,22,.98))!important;
    border-right:1px solid rgba(255,255,255,.08)!important;
    box-shadow:18px 0 55px rgba(0,0,0,.28);
    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);
    overflow:hidden;
}

.sidebar:before{
    content:"";
    position:absolute;
    inset:-40%;
    background:
        conic-gradient(from 180deg, transparent, rgba(22,119,255,.16), transparent, rgba(0,212,255,.10), transparent);
    animation:thSidebarSpin 12s linear infinite;
    opacity:.7;
    pointer-events:none;
}

.sidebar:after{
    content:"";
    position:absolute;
    inset:1px;
    background:linear-gradient(180deg, rgba(6,15,30,.94), rgba(5,10,22,.98));
    border-radius:0;
    pointer-events:none;
}

.sidebar .logo,
.sidebar .nav{
    position:relative;
    z-index:2;
}

.logo{
    font-size:26px!important;
    font-weight:1000!important;
    letter-spacing:.4px;
    background:linear-gradient(135deg,#fff,#87d8ff);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    text-shadow:0 0 26px rgba(0,212,255,.18);
}

.logo span{
    background:linear-gradient(135deg,var(--th-blue),var(--th-cyan));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent!important;
}

.nav a{
    position:relative;
    border-radius:16px!important;
    margin-bottom:9px!important;
    border:1px solid transparent;
    transition:.25s ease;
}

.nav a:before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:16px;
    background:linear-gradient(135deg, rgba(22,119,255,.18), rgba(0,212,255,.08));
    opacity:0;
    transition:.25s ease;
}

.nav a:hover{
    transform:translateX(5px);
    color:#fff!important;
    border-color:rgba(22,119,255,.24);
}

.nav a:hover:before,
.nav a.active:before{
    opacity:1;
}

.nav a.active{
    color:#fff!important;
    border-color:rgba(22,119,255,.34)!important;
    box-shadow:0 12px 30px rgba(22,119,255,.14);
}

/* Glass buttons */
.btn,
.nav-cta,
.chat-form button{
    position:relative;
    isolation:isolate;
    border:1px solid rgba(255,255,255,.12)!important;
    border-radius:16px!important;
    color:#fff!important;
    font-weight:900!important;
    background:
        linear-gradient(135deg, rgba(22,119,255,.96), rgba(0,212,255,.88))!important;
    box-shadow:
        0 14px 35px rgba(22,119,255,.24),
        inset 0 1px 0 rgba(255,255,255,.22)!important;
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    overflow:hidden;
    transition:transform .22s ease, box-shadow .22s ease, filter .22s ease;
}

.btn:before,
.nav-cta:before,
.chat-form button:before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.28) 35%, transparent 70%);
    transform:translateX(-130%);
    transition:transform .55s ease;
}

.btn:hover,
.nav-cta:hover,
.chat-form button:hover{
    transform:translateY(-2px);
    filter:saturate(1.16);
    box-shadow:
        0 18px 45px rgba(22,119,255,.42),
        0 8px 24px rgba(0,212,255,.15),
        inset 0 1px 0 rgba(255,255,255,.28)!important;
}

.btn:hover:before,
.nav-cta:hover:before,
.chat-form button:hover:before{
    transform:translateX(130%);
}

.btn-dark{
    background:rgba(255,255,255,.06)!important;
    color:#dcecff!important;
    border-color:rgba(255,255,255,.12)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 12px 30px rgba(0,0,0,.22)!important;
}

.btn-green{
    background:linear-gradient(135deg, rgba(24,196,143,.90), rgba(42,235,183,.72))!important;
    color:#03130e!important;
}

.btn-yellow{
    background:linear-gradient(135deg, rgba(255,200,87,.95), rgba(255,154,60,.86))!important;
    color:#1b1000!important;
}

.btn-red{
    background:linear-gradient(135deg, rgba(255,91,110,.92), rgba(255,65,95,.78))!important;
    color:#fff!important;
}

/* Inputs */
.input,
textarea,
select,
.status-select,
.chat-form input{
    background:rgba(255,255,255,.055)!important;
    border:1px solid rgba(255,255,255,.10)!important;
    color:#fff!important;
    border-radius:16px!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
}

.input:focus,
textarea:focus,
select:focus,
.chat-form input:focus{
    border-color:rgba(0,212,255,.55)!important;
    box-shadow:
        0 0 0 4px rgba(0,212,255,.10),
        inset 0 1px 0 rgba(255,255,255,.07)!important;
}

.input::placeholder,
textarea::placeholder,
.chat-form input::placeholder{
    color:rgba(220,235,255,.52);
}

/* Tables */
.table{
    background:transparent!important;
    border-collapse:separate!important;
    border-spacing:0 8px!important;
}

.table th{
    background:rgba(255,255,255,.035)!important;
    border-bottom:0!important;
    color:#9fc9ff!important;
    padding:12px 10px!important;
}

.table td{
    background:rgba(255,255,255,.035)!important;
    border-top:1px solid rgba(255,255,255,.07)!important;
    border-bottom:1px solid rgba(255,255,255,.07)!important;
    padding:13px 10px!important;
}

.table tr td:first-child{
    border-left:1px solid rgba(255,255,255,.07)!important;
    border-radius:16px 0 0 16px;
}

.table tr td:last-child{
    border-right:1px solid rgba(255,255,255,.07)!important;
    border-radius:0 16px 16px 0;
}

.table tbody tr{
    transition:.22s ease;
}

.table tbody tr:hover td{
    background:rgba(22,119,255,.08)!important;
    border-color:rgba(22,119,255,.20)!important;
}

/* Topbar */
.topbar{
    margin-bottom:24px!important;
}

.topbar h1{
    font-size:30px!important;
    letter-spacing:-.5px;
    background:linear-gradient(135deg,#fff,#8bdcff);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

/* Metrics and badges */
.metric{
    font-size:34px!important;
    letter-spacing:-1px;
    text-shadow:0 0 24px rgba(22,119,255,.18);
}

.metric-blue{color:#8ecbff!important}
.metric-hot{color:#66f2c6!important}
.metric-warm{color:#ffe08a!important}
.metric-cold{color:#ff9daf!important}

.badge,
.badge-source,
.score-pill{
    border-radius:999px!important;
    border:1px solid rgba(255,255,255,.12)!important;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}

/* Conversation */
.conversation-box{
    background:
        radial-gradient(circle at top right, rgba(22,119,255,.10), transparent 35%),
        rgba(4,10,20,.58)!important;
    border-radius:26px!important;
    max-height:700px!important;
}

.chat-row{
    max-width:66%!important;
}

.chat-message{
    padding:13px 15px!important;
    border-radius:18px!important;
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    box-shadow:0 10px 28px rgba(0,0,0,.16);
}

.chat-row.customer .chat-message{
    background:rgba(255,255,255,.075)!important;
    border-color:rgba(255,255,255,.10)!important;
}

.chat-row.agent .chat-message{
    background:linear-gradient(135deg, rgba(22,119,255,.34), rgba(0,212,255,.18))!important;
    border-color:rgba(22,119,255,.34)!important;
}

.chat-row.human .chat-message{
    background:linear-gradient(135deg, rgba(24,196,143,.32), rgba(42,235,183,.16))!important;
    border-color:rgba(24,196,143,.42)!important;
}

/* Website chat widget */
.chat-box{
    background:rgba(7,15,28,.76)!important;
    border:1px solid rgba(255,255,255,.12)!important;
    border-radius:26px!important;
    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);
    box-shadow:0 28px 90px rgba(0,0,0,.48)!important;
}

.chat-head{
    background:linear-gradient(135deg, rgba(22,119,255,.96), rgba(0,212,255,.88))!important;
}

.chat-body{
    background:
        radial-gradient(circle at top right, rgba(0,212,255,.10), transparent 38%),
        rgba(5,11,21,.70)!important;
}

.chat-bubble,
.whatsapp-float{
    box-shadow:
        0 18px 45px rgba(0,0,0,.38),
        0 0 38px rgba(0,212,255,.20)!important;
}

/* Header / public website */
.site-header{
    background:rgba(5,12,24,.72)!important;
    border-bottom:1px solid rgba(255,255,255,.09)!important;
    backdrop-filter:blur(24px) saturate(140%);
    -webkit-backdrop-filter:blur(24px) saturate(140%);
}

.brand-mark{
    box-shadow:0 12px 30px rgba(22,119,255,.28);
}

.brand-text{
    background:linear-gradient(135deg,#fff,#96deff);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.brand-text span{
    background:linear-gradient(135deg,var(--th-blue),var(--th-cyan));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent!important;
}

/* Hero polish */
.hero h1,
.hero-box h1{
    letter-spacing:-1.6px!important;
}

.hero h1 span,
.hero-box h1 span{
    background:linear-gradient(135deg,#55b7ff,#00e1ff)!important;
    -webkit-background-clip:text!important;
    background-clip:text!important;
    color:transparent!important;
}

/* Alerts */
.alert{
    border-radius:16px!important;
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
}

/* Small animation */
@keyframes thFloatGlow{
    from{transform:translate3d(0,0,0) scale(1)}
    to{transform:translate3d(-40px,30px,0) scale(1.08)}
}

@keyframes thSidebarSpin{
    to{transform:rotate(360deg)}
}

@media(max-width:950px){
    .sidebar:before,
    .sidebar:after{
        display:none;
    }
    .chat-row{
        max-width:88%!important;
    }
    .topbar h1{
        font-size:25px!important;
    }
}

@media(max-width:520px){
    .card,
    .section,
    .hero-content,
    .hero-card,
    .hero-box{
        border-radius:20px!important;
    }
    .chat-row{
        max-width:92%!important;
    }
}


/* =========================================================
   TrendHive WhatsApp Style Full Page Chat
   Paste at the END of style.css
   ========================================================= */

.chat-bubble{
    position:fixed!important;
    right:22px!important;
    bottom:92px!important;
    width:64px!important;
    height:64px!important;
    border-radius:50%!important;
    display:grid!important;
    place-items:center!important;
    background:linear-gradient(135deg,#1677ff,#00d4ff)!important;
    color:#fff!important;
    font-size:28px!important;
    box-shadow:0 18px 50px rgba(22,119,255,.35),0 10px 34px rgba(0,0,0,.38)!important;
    z-index:999999!important;
    cursor:pointer!important;
    border:1px solid rgba(255,255,255,.25)!important;
    transition:.25s ease!important;
}

.chat-bubble:hover{
    transform:translateY(-4px) scale(1.04)!important;
}

.chat-box{
    position:fixed!important;
    right:24px!important;
    bottom:24px!important;
    width:440px!important;
    max-width:calc(100vw - 36px)!important;
    height:720px!important;
    max-height:calc(100vh - 48px)!important;
    background:rgba(5,13,25,.88)!important;
    border:1px solid rgba(255,255,255,.14)!important;
    border-radius:30px!important;
    overflow:hidden!important;
    box-shadow:0 30px 100px rgba(0,0,0,.55),0 0 60px rgba(22,119,255,.20)!important;
    z-index:999999!important;
    color:#eef6ff!important;
    display:none;
    flex-direction:column!important;
    backdrop-filter:blur(28px) saturate(145%)!important;
    -webkit-backdrop-filter:blur(28px) saturate(145%)!important;
}

.chat-box:before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        radial-gradient(circle at top right,rgba(0,212,255,.16),transparent 34%),
        radial-gradient(circle at bottom left,rgba(22,119,255,.12),transparent 38%);
    z-index:0;
}

.chat-head{
    position:relative!important;
    z-index:2!important;
    height:74px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:12px!important;
    padding:14px 18px!important;
    background:linear-gradient(135deg,#075e54,#128c7e)!important;
    color:#fff!important;
    border-bottom:1px solid rgba(255,255,255,.14)!important;
}

.chat-head:before{
    content:"";
    width:44px;
    height:44px;
    border-radius:50%;
    background:
        radial-gradient(circle at 35% 30%,#fff,transparent 13%),
        linear-gradient(135deg,#1677ff,#00d4ff);
    box-shadow:0 10px 28px rgba(0,0,0,.25);
    flex:0 0 auto;
}

.chat-head > div{
    flex:1;
    min-width:0;
}

.chat-head strong{
    display:block!important;
    font-size:17px!important;
    line-height:1.1!important;
}

.chat-head span{
    display:block!important;
    font-size:12px!important;
    color:rgba(255,255,255,.86)!important;
    margin-top:3px!important;
}

.chat-head span:before{
    content:"● ";
    color:#53ff9c;
    font-size:11px;
}

.chat-head button{
    width:38px!important;
    height:38px!important;
    border:0!important;
    border-radius:13px!important;
    background:rgba(255,255,255,.16)!important;
    color:#fff!important;
    font-size:25px!important;
    line-height:1!important;
    cursor:pointer!important;
    display:grid!important;
    place-items:center!important;
}

.chat-body{
    position:relative!important;
    z-index:2!important;
    flex:1!important;
    height:auto!important;
    padding:18px!important;
    overflow:auto!important;
    background:
        linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),
        radial-gradient(circle at top right,rgba(18,140,126,.13),transparent 38%),
        rgba(4,12,22,.72)!important;
    background-size:34px 34px,34px 34px,auto,auto!important;
    scroll-behavior:smooth!important;
}

.msg{
    position:relative!important;
    max-width:78%!important;
    padding:10px 13px!important;
    border-radius:18px!important;
    margin:0 0 12px!important;
    font-size:14px!important;
    line-height:1.55!important;
    white-space:normal!important;
    word-break:break-word!important;
    box-shadow:0 10px 24px rgba(0,0,0,.18)!important;
    animation:thMsgIn .18s ease both!important;
}

.msg.user{
    margin-left:auto!important;
    margin-right:0!important;
    background:linear-gradient(135deg,#dcf8c6,#b7f1a5)!important;
    color:#0b1b12!important;
    border-bottom-right-radius:5px!important;
}

.msg.bot{
    margin-right:auto!important;
    margin-left:0!important;
    background:rgba(255,255,255,.09)!important;
    color:#eef6ff!important;
    border:1px solid rgba(255,255,255,.10)!important;
    border-bottom-left-radius:5px!important;
    backdrop-filter:blur(14px)!important;
    -webkit-backdrop-filter:blur(14px)!important;
}

.msg.typing{
    display:inline-flex!important;
    align-items:center!important;
    gap:4px!important;
    opacity:1!important;
    font-style:normal!important;
    color:#dbeafe!important;
}

.msg.typing b{
    width:5px;
    height:5px;
    border-radius:50%;
    background:#9fb2ce;
    display:inline-block;
    animation:thTyping 1s infinite ease-in-out;
}

.msg.typing b:nth-child(2){animation-delay:.15s}
.msg.typing b:nth-child(3){animation-delay:.30s}

.chat-form{
    position:relative!important;
    z-index:2!important;
    height:76px!important;
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
    padding:12px!important;
    background:rgba(5,13,25,.94)!important;
    border-top:1px solid rgba(255,255,255,.12)!important;
}

.chat-form input{
    flex:1!important;
    height:50px!important;
    border:1px solid rgba(255,255,255,.12)!important;
    background:rgba(255,255,255,.08)!important;
    color:#fff!important;
    border-radius:999px!important;
    padding:0 18px!important;
    outline:none!important;
    font-size:14px!important;
    backdrop-filter:blur(14px)!important;
    -webkit-backdrop-filter:blur(14px)!important;
}

.chat-form input::placeholder{
    color:rgba(238,246,255,.55)!important;
}

.chat-form button{
    width:54px!important;
    height:50px!important;
    padding:0!important;
    border:0!important;
    border-radius:999px!important;
    background:linear-gradient(135deg,#25d366,#128c7e)!important;
    color:#fff!important;
    font-size:0!important;
    cursor:pointer!important;
    box-shadow:0 12px 30px rgba(18,140,126,.30)!important;
}

.chat-form button:before{
    content:"➤";
    font-size:23px;
    display:block;
    transform:translateX(1px);
}

body.th-chat-open .whatsapp-float{
    display:none!important;
}

/* Desktop: make it feel like a mini WhatsApp web page */
@media(min-width:900px){
    .chat-box{
        width:520px!important;
        height:760px!important;
        right:34px!important;
        bottom:28px!important;
    }
}

/* Mobile: full page WhatsApp feel */
@media(max-width:720px){
    body.th-chat-open{
        overflow:hidden!important;
    }

    .chat-box{
        inset:0!important;
        width:100vw!important;
        max-width:100vw!important;
        height:100dvh!important;
        max-height:100dvh!important;
        border-radius:0!important;
        border:0!important;
    }

    .chat-head{
        height:72px!important;
        padding-top:max(14px,env(safe-area-inset-top))!important;
    }

    .chat-body{
        padding:14px!important;
    }

    .msg{
        max-width:86%!important;
        font-size:13.5px!important;
    }

    .chat-form{
        height:76px!important;
        padding-bottom:max(12px,env(safe-area-inset-bottom))!important;
    }

    .chat-bubble{
        right:18px!important;
        bottom:84px!important;
        width:60px!important;
        height:60px!important;
    }
}

@keyframes thMsgIn{
    from{opacity:0;transform:translateY(8px) scale(.98)}
    to{opacity:1;transform:translateY(0) scale(1)}
}

@keyframes thTyping{
    0%,80%,100%{opacity:.35;transform:translateY(0)}
    40%{opacity:1;transform:translateY(-4px)}
}

/* =========================================================
   TrendHive Mobile Table Scroll Fix
   Normal table layout, finger swipe left/right on mobile
   ========================================================= */
@media(max-width:768px){

    body{
        overflow-x:hidden !important;
    }

    .main{
        overflow-x:hidden !important;
    }

    .table-wrap{
        overflow-x:auto !important;
        overflow-y:hidden !important;
        -webkit-overflow-scrolling:touch !important;
        width:100% !important;
        max-width:100% !important;
    }

    .table{
        display:table !important;
        min-width:1200px !important;
        width:1200px !important;
        table-layout:auto !important;
    }

    .table thead{
        display:table-header-group !important;
    }

    .table tbody{
        display:table-row-group !important;
    }

    .table tr{
        display:table-row !important;
    }

    .table th,
    .table td{
        display:table-cell !important;
        width:auto !important;
        white-space:normal !important;
    }

    .table tr,
    .table td,
    .table th{
        border-radius:0 !important;
    }
}