/*=========================================================
  TILMOR V2
  CHUNK 1
  ROOT • GLOBAL • HEADER • HERO
=========================================================*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root{

--bg:#040816;
--bg2:#08111F;
--bg3:#0D1726;

--panel:#101C2E;
--panel2:#14233A;

--border:#1D3354;

--text:#F8FAFC;
--muted:#94A3B8;

--cyan:#18D5FF;
--cyan2:#00B8FF;

--emerald:#22C55E;

--radius:24px;

--shadow:0 25px 80px rgba(0,0,0,.45);

}

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Inter',sans-serif;
}

html{
scroll-behavior:smooth;
}

body{

background:

radial-gradient(circle at 100% 0%,rgba(24,213,255,.10),transparent 30%),
radial-gradient(circle at 0% 100%,rgba(34,197,94,.06),transparent 35%),
linear-gradient(180deg,#040816,#07111d);

color:var(--text);

overflow-x:hidden;

}

section{

padding:140px 0;

position:relative;

}

.container{

width:min(1400px,92%);

margin:auto;

}

a{

text-decoration:none;

transition:.35s;

}

h1,h2,h3,h4{

font-weight:800;

letter-spacing:-1.5px;

color:white;

}

p{

color:var(--muted);

line-height:1.8;

font-size:19px;

}

img{

max-width:100%;

display:block;

}

::selection{

background:var(--cyan);

color:#00131d;

}

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

header{

position:fixed;

top:0;

left:0;

width:100%;

height:90px;

display:flex;

justify-content:space-between;

align-items:center;

padding:0 8%;

background:rgba(4,8,22,.75);

backdrop-filter:blur(18px);

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

z-index:9999;

}

.logo{

font-size:34px;

font-weight:900;

color:white;

letter-spacing:-1px;

}

.logo span{

color:var(--cyan);

}

nav{

display:flex;

align-items:center;

gap:40px;

}

nav a{

font-size:15px;

font-weight:600;

color:var(--muted);

position:relative;

}

nav a:hover{

color:white;

}

nav a::after{

content:"";

position:absolute;

left:0;

bottom:-10px;

height:2px;

width:0;

background:var(--cyan);

transition:.3s;

}

nav a:hover::after{

width:100%;

}

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

.btn-primary{

display:inline-flex;

align-items:center;

justify-content:center;

padding:18px 42px;

border-radius:14px;

font-weight:700;

background:linear-gradient(135deg,var(--cyan2),var(--cyan));

color:#021019;

box-shadow:0 0 35px rgba(24,213,255,.25);

}

.btn-primary:hover{

transform:translateY(-3px);

box-shadow:0 0 60px rgba(24,213,255,.45);

}

.btn-secondary{

display:inline-flex;

align-items:center;

justify-content:center;

padding:18px 42px;

border-radius:14px;

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

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

color:white;

}

.btn-secondary:hover{

border-color:var(--cyan);

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

}

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

.hero{

min-height:100vh;

display:flex;

align-items:center;

justify-content:space-between;

gap:100px;

padding:180px 8% 120px;

}

.hero-left{

flex:1;

max-width:700px;

}

.hero-right{

flex:1;

display:flex;

justify-content:center;

}

.hero h1{

font-size:78px;

line-height:.95;

margin-bottom:35px;

}

.hero h1 span{

background:linear-gradient(90deg,var(--cyan),var(--emerald));

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.hero p{

font-size:22px;

margin-bottom:45px;

}

.buttons{

display:flex;

gap:18px;

margin-top:20px;

}

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

.dashboard{

width:620px;

height:420px;

border-radius:28px;

background:linear-gradient(180deg,#121d2d,#0c1422);

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

box-shadow:

0 40px 100px rgba(0,0,0,.45),

0 0 0 1px rgba(24,213,255,.08);

overflow:hidden;

position:relative;

}

.dashboard::before{

content:"";

position:absolute;

width:420px;

height:420px;

background:radial-gradient(circle,var(--cyan),transparent 70%);

opacity:.08;

right:-180px;

top:-180px;

}

.top{

height:70px;

background:#09111d;

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

}

.content{

padding:28px;

}

.card{

height:72px;

margin-bottom:20px;

border-radius:14px;

background:linear-gradient(90deg,#182538,#121d2d);

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

}

/*=========================================================
SECTION TITLE
=========================================================*/

.section-heading{

text-align:center;

max-width:850px;

margin:0 auto 80px;

}

.eyebrow{

display:inline-block;

padding:8px 18px;

border-radius:999px;

font-size:13px;

font-weight:700;

letter-spacing:2px;

text-transform:uppercase;

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

border:1px solid rgba(24,213,255,.25);

color:var(--cyan);

margin-bottom:24px;

}

.section-heading h2{

font-size:58px;

margin-bottom:24px;

}

.section-heading p{

font-size:20px;

max-width:760px;

margin:auto;

}

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

@media(max-width:1100px){

.hero{

flex-direction:column;

text-align:center;

}

.buttons{

justify-content:center;

flex-wrap:wrap;

}

.dashboard{

width:100%;

max-width:700px;

}

}

@media(max-width:768px){

nav{

display:none;

}

.hero h1{

font-size:52px;

}

.section-heading h2{

font-size:40px;

}

}
/*=========================================================
TILMOR V2
CHUNK 2
PRODUCTS • WHY TILMOR • PLATFORM
=========================================================*/

/*=========================
PRODUCTS
=========================*/

.products{

background:linear-gradient(180deg,#06101d,#08111f);

}

.product-grid{

display:grid;

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

gap:34px;

}

.product-card{

position:relative;

padding:42px;

border-radius:28px;

background:linear-gradient(180deg,#101b2d,#0b1422);

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

overflow:hidden;

transition:.35s;

box-shadow:0 20px 60px rgba(0,0,0,.35);

}

.product-card::before{

content:"";

position:absolute;

top:-120px;

right:-120px;

width:240px;

height:240px;

border-radius:50%;

background:radial-gradient(circle,var(--cyan),transparent 70%);

opacity:.06;

}

.product-card:hover{

transform:translateY(-10px);

border-color:rgba(24,213,255,.45);

box-shadow:

0 35px 80px rgba(0,0,0,.45),

0 0 40px rgba(24,213,255,.18);

}

.product-card .icon{

width:72px;

height:72px;

display:flex;

align-items:center;

justify-content:center;

border-radius:20px;

background:linear-gradient(135deg,#132740,#0d1726);

font-size:34px;

margin-bottom:28px;

box-shadow:0 0 25px rgba(24,213,255,.15);

}

.product-card h3{

font-size:30px;

margin-bottom:18px;

}

.product-card p{

margin-bottom:28px;

}

.product-card a{

color:var(--cyan);

font-weight:700;

}

.product-card a:hover{

color:white;

}

/*=========================
WHY TILMOR
=========================*/

.why-tilmor{

background:#07101d;

}

.why-grid{

display:grid;

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

gap:32px;

}

.why-card{

padding:48px;

border-radius:28px;

background:linear-gradient(180deg,#111c2d,#0c1522);

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

transition:.35s;

position:relative;

overflow:hidden;

}

.why-card::after{

content:"";

position:absolute;

left:0;

bottom:0;

width:100%;

height:3px;

background:linear-gradient(90deg,var(--cyan),var(--emerald));

transform:scaleX(0);

transform-origin:left;

transition:.35s;

}

.why-card:hover{

transform:translateY(-8px);

border-color:rgba(24,213,255,.35);

}

.why-card:hover::after{

transform:scaleX(1);

}

.why-card h3{

font-size:30px;

margin-bottom:20px;

}

.why-card p{

margin:0;

}

/*=========================
PLATFORM
=========================*/

.platform{

background:linear-gradient(180deg,#06101d,#040816);

}

.platform .container{

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

align-items:center;

}

.platform-left h2{

font-size:62px;

margin:28px 0;

}

.platform-list{

margin-top:50px;

display:flex;

flex-direction:column;

gap:28px;

}

.platform-item{

display:flex;

align-items:flex-start;

gap:22px;

padding:24px;

border-radius:20px;

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

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

transition:.3s;

}

.platform-item:hover{

border-color:rgba(24,213,255,.35);

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

}

.platform-item span{

width:52px;

height:52px;

display:flex;

align-items:center;

justify-content:center;

border-radius:16px;

background:linear-gradient(135deg,var(--cyan2),var(--cyan));

color:#04111d;

font-weight:800;

font-size:22px;

flex-shrink:0;

}

.platform-item h4{

font-size:24px;

margin-bottom:8px;

}

.platform-item p{

margin:0;

}

.platform-image{

height:650px;

border-radius:32px;

background:

radial-gradient(circle at center,rgba(24,213,255,.12),transparent 60%),

linear-gradient(180deg,#101b2d,#09111d);

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

position:relative;

overflow:hidden;

box-shadow:0 35px 90px rgba(0,0,0,.45);

}

.circle{

position:absolute;

border:1px solid rgba(24,213,255,.18);

border-radius:50%;

left:50%;

top:50%;

transform:translate(-50%,-50%);

}

.circle.one{

width:240px;

height:240px;

}

.circle.two{

width:380px;

height:380px;

}

.circle.three{

width:520px;

height:520px;

}

.center-logo{

position:absolute;

left:50%;

top:50%;

transform:translate(-50%,-50%);

width:180px;

height:180px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:linear-gradient(135deg,var(--cyan2),var(--cyan));

color:#04111d;

font-size:30px;

font-weight:900;

box-shadow:0 0 50px rgba(24,213,255,.35);

}

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

@media(max-width:1100px){

.product-grid{

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

}

.platform .container{

grid-template-columns:1fr;

}

.platform-left{

text-align:center;

}

}

@media(max-width:768px){

.product-grid{

grid-template-columns:1fr;

}

.why-grid{

grid-template-columns:1fr;

}

.platform-left h2{

font-size:42px;

}

.platform-image{

height:420px;

}

}

/*=========================================================
TILMOR V2
CHUNK 3
DASHBOARD • FEATURES • STATS • AI SHOWCASE
=========================================================*/

/*=========================
DASHBOARD PREVIEW
=========================*/

.dashboard-preview{

background:#040816;

}

.dashboard-window{

background:linear-gradient(180deg,#101b2d,#09111d);

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

border-radius:30px;

overflow:hidden;

box-shadow:0 40px 120px rgba(0,0,0,.5);

}

.dashboard-header{

height:72px;

display:flex;

align-items:center;

justify-content:space-between;

padding:0 35px;

background:#0b1422;

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

}

.window-controls{

display:flex;

gap:10px;

}

.dot{

width:12px;

height:12px;

border-radius:50%;

}

.red{background:#ef4444;}

.amber{background:#f59e0b;}

.green{background:#22c55e;}

.dashboard-tabs{

display:flex;

gap:26px;

}

.dashboard-tabs span{

color:#6b7280;

font-size:14px;

}

.dashboard-tabs .active{

color:var(--cyan);

font-weight:700;

}

.dashboard-body{

display:grid;

grid-template-columns:260px 1fr;

}

.dashboard-sidebar{

padding:35px;

background:#0b1422;

border-right:1px solid rgba(255,255,255,.05);

}

.menu-item{

padding:16px 18px;

border-radius:14px;

margin-bottom:12px;

color:#94a3b8;

transition:.3s;

}

.menu-item:hover{

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

}

.menu-item.active{

background:linear-gradient(90deg,var(--cyan2),var(--cyan));

color:#021019;

font-weight:700;

}

.dashboard-content{

padding:40px;

}

.stats-row{

display:grid;

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

gap:20px;

margin-bottom:30px;

}

.stat-card{

padding:28px;

background:#111d2d;

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

border-radius:18px;

}

.stat-card h4{

color:#94a3b8;

font-size:14px;

margin-bottom:10px;

}

.stat-card h2{

font-size:34px;

color:var(--cyan);

}

.chart-placeholder{

height:320px;

border-radius:24px;

background:
linear-gradient(180deg,#101b2d,#0b1422);

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

margin-bottom:25px;

}

.table-placeholder{

height:220px;

border-radius:20px;

background:#111d2d;

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

}

/*=========================
FEATURES
=========================*/

.features{

background:#08111f;

}

.features-grid{

display:grid;

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

gap:34px;

}

.feature-box{

padding:42px;

border-radius:28px;

background:#101b2d;

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

}

.feature-box h3{

font-size:30px;

margin-bottom:28px;

}

.feature-box ul{

list-style:none;

}

.feature-box li{

padding:14px 0;

color:#cbd5e1;

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

}

.feature-box li:last-child{

border:none;

}

/*=========================
STATISTICS
=========================*/

.statistics{

background:#040816;

}

.stats-grid{

display:grid;

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

gap:30px;

}

.stat{

padding:55px;

border-radius:28px;

background:#101b2d;

text-align:center;

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

}

.stat h3{

font-size:62px;

margin-bottom:16px;

color:var(--cyan);

text-shadow:0 0 20px rgba(24,213,255,.35);

}

.stat span{

color:#94a3b8;

font-size:18px;

}

/*=========================
AI SHOWCASE
=========================*/

.ai-showcase{

background:#07101d;

}

.ai-window{

border-radius:30px;

overflow:hidden;

background:#0b1422;

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

box-shadow:0 40px 120px rgba(0,0,0,.5);

}

.ai-header{

display:flex;

justify-content:space-between;

align-items:center;

padding:25px 35px;

background:#09111d;

}

.status{

width:14px;

height:14px;

border-radius:50%;

background:var(--emerald);

box-shadow:0 0 18px var(--emerald);

}

.live{

padding:8px 18px;

border-radius:999px;

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

border:1px solid rgba(34,197,94,.4);

color:var(--emerald);

font-size:13px;

font-weight:700;

}

.ai-console{

padding:40px;

font-family:Consolas,monospace;

background:#040816;

}

.console-line{

padding:15px 0;

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

color:#94a3b8;

}

.console-line:last-child{

border:none;

}

.console-line .time{

color:var(--cyan);

margin-right:20px;

}

.console-line.success{

color:var(--emerald);

font-weight:700;

}

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

@media(max-width:1100px){

.dashboard-body{

grid-template-columns:1fr;

}

.dashboard-sidebar{

border-right:none;

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

}

.stats-row{

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

}

.stats-grid{

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

}

.features-grid{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.stats-row,

.stats-grid{

grid-template-columns:1fr;

}

.dashboard-tabs{

display:none;

}

}
/*=========================================================
TILMOR V2
CHUNK 4
PARTNERS • TIMELINE • ECOSYSTEM • COMPARISON
=========================================================*/

/*=========================
PARTNERS
=========================*/

.partners{

background:#08111f;

}

.partners-grid{

display:grid;

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

gap:30px;

}

.partner-card{

display:flex;

align-items:center;

justify-content:center;

height:140px;

border-radius:24px;

background:linear-gradient(180deg,#111c2d,#0b1422);

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

font-size:24px;

font-weight:700;

color:#cbd5e1;

transition:.35s;

}

.partner-card:hover{

transform:translateY(-8px);

border-color:rgba(24,213,255,.4);

color:var(--cyan);

box-shadow:0 0 35px rgba(24,213,255,.15);

}

/*=========================
TIMELINE
=========================*/

.timeline{

background:#040816;

}

.timeline-grid{

display:grid;

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

gap:30px;

position:relative;

}

.timeline-card{

position:relative;

padding:45px;

background:#101b2d;

border-radius:28px;

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

transition:.35s;

}

.timeline-card:hover{

transform:translateY(-10px);

border-color:rgba(24,213,255,.35);

}

.timeline-number{

width:70px;

height:70px;

display:flex;

align-items:center;

justify-content:center;

border-radius:18px;

background:linear-gradient(135deg,var(--cyan2),var(--cyan));

color:#04111d;

font-size:26px;

font-weight:800;

margin-bottom:30px;

box-shadow:0 0 25px rgba(24,213,255,.25);

}

.timeline-card h3{

font-size:30px;

margin-bottom:16px;

}

/*=========================
ECOSYSTEM
=========================*/

.ecosystem{

background:#08111f;

overflow:hidden;

}

.ecosystem-grid{

position:relative;

height:850px;

}

.core-circle{

position:absolute;

left:50%;

top:50%;

transform:translate(-50%,-50%);

width:240px;

height:240px;

border-radius:50%;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

background:linear-gradient(135deg,var(--cyan2),var(--cyan));

color:#04111d;

font-weight:900;

box-shadow:0 0 80px rgba(24,213,255,.35);

z-index:10;

}

.core-circle h3{

font-size:40px;

color:#04111d;

margin-bottom:10px;

}

.core-circle span{

font-size:18px;

}

.eco-card{

position:absolute;

width:260px;

padding:35px;

border-radius:22px;

background:#101b2d;

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

text-align:center;

transition:.3s;

}

.eco-card:hover{

border-color:rgba(24,213,255,.4);

transform:scale(1.03);

}

.eco-card h4{

font-size:28px;

margin-bottom:10px;

}

.top{

top:0;

left:50%;

transform:translateX(-50%);

}

.top-right{

top:140px;

right:60px;

}

.right{

top:50%;

right:0;

transform:translateY(-50%);

}

.bottom-right{

bottom:140px;

right:60px;

}

.bottom{

bottom:0;

left:50%;

transform:translateX(-50%);

}

.left{

top:50%;

left:0;

transform:translateY(-50%);

}

/*=========================
COMPARISON
=========================*/

.comparison{

background:#040816;

}

.comparison-table{

overflow:hidden;

border-radius:30px;

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

}

.comparison-header{

display:grid;

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

background:#0c1522;

}

.comparison-header div{

padding:30px;

font-weight:700;

}

.comparison-header .new{

background:linear-gradient(135deg,var(--cyan2),var(--cyan));

color:#04111d;

}

.comparison-row{

display:grid;

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

}

.comparison-row div{

padding:28px 30px;

background:#101b2d;

border-top:1px solid rgba(255,255,255,.05);

}

.comparison-row div:first-child{

font-weight:700;

}

.comparison-row div:last-child{

color:var(--cyan);

font-weight:700;

}

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

@media(max-width:1200px){

.timeline-grid{

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

}

.partners-grid{

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

}

.ecosystem-grid{

display:grid;

grid-template-columns:1fr;

height:auto;

gap:25px;

}

.core-circle,

.eco-card{

position:static;

transform:none;

width:100%;

}

.core-circle{

margin:0 auto 30px;

}

}

@media(max-width:768px){

.timeline-grid,

.partners-grid{

grid-template-columns:1fr;

}

.comparison-header,

.comparison-row{

grid-template-columns:1fr;

}

}
/*=========================================================
TILMOR V2
CHUNK 5
INDUSTRIES • LIVE METRICS • CTA • FOOTER • ANIMATIONS
=========================================================*/

/*=========================
INDUSTRIES
=========================*/

.industries{

background:#08111f;

}

.industries-grid{

display:grid;

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

gap:32px;

}

.industry-card{

padding:45px;

border-radius:28px;

background:linear-gradient(180deg,#101b2d,#0b1422);

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

transition:.35s;

position:relative;

overflow:hidden;

}

.industry-card::before{

content:"";

position:absolute;

top:-120px;

right:-120px;

width:240px;

height:240px;

border-radius:50%;

background:radial-gradient(circle,var(--emerald),transparent 70%);

opacity:.08;

}

.industry-card:hover{

transform:translateY(-10px);

border-color:rgba(34,197,94,.35);

box-shadow:0 0 40px rgba(34,197,94,.15);

}

.industry-icon{

width:72px;

height:72px;

display:flex;

align-items:center;

justify-content:center;

font-size:34px;

border-radius:18px;

background:#162338;

margin-bottom:28px;

}

.industry-card h3{

font-size:30px;

margin-bottom:18px;

}

/*=========================
LIVE METRICS
=========================*/

.live-metrics{

background:#040816;

}

.metrics-grid{

display:grid;

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

gap:30px;

}

.metric-card{

padding:38px;

background:#101b2d;

border-radius:24px;

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

transition:.35s;

}

.metric-card:hover{

transform:translateY(-8px);

border-color:rgba(24,213,255,.4);

}

.metric-label{

display:block;

font-size:13px;

letter-spacing:2px;

text-transform:uppercase;

color:#64748b;

margin-bottom:20px;

}

.metric-card h3{

font-size:54px;

color:var(--cyan);

margin-bottom:18px;

}

.metric-change{

font-weight:700;

}

.metric-change.positive{

color:var(--emerald);

}

.metric-change.neutral{

color:var(--cyan);

}

/*=========================
FINAL CTA
=========================*/

.final-hero{

padding:180px 0;

background:

radial-gradient(circle at center,rgba(24,213,255,.12),transparent 40%),

linear-gradient(180deg,#08111f,#040816);

text-align:center;

overflow:hidden;

}

.final-hero .container{

max-width:900px;

}

.final-hero h2{

font-size:72px;

margin:30px 0;

}

.final-hero p{

font-size:22px;

margin:0 auto 60px;

max-width:720px;

}

.final-buttons{

display:flex;

justify-content:center;

gap:24px;

}

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

footer{

background:#020611;

padding:90px 0 40px;

border-top:1px solid rgba(255,255,255,.05);

}

.footer-grid{

display:grid;

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

gap:60px;

margin-bottom:70px;

}

footer h3{

font-size:34px;

margin-bottom:24px;

}

footer h4{

margin-bottom:24px;

font-size:20px;

}

footer p{

color:#64748b;

}

footer ul{

list-style:none;

}

footer li{

margin-bottom:14px;

}

footer a{

color:#94a3b8;

}

footer a:hover{

color:var(--cyan);

}

.footer-bottom{

padding-top:30px;

border-top:1px solid rgba(255,255,255,.05);

text-align:center;

color:#64748b;

}

/*=========================
SCROLLBAR
=========================*/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#040816;

}

::-webkit-scrollbar-thumb{

background:#1a365d;

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:var(--cyan);

}

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

@keyframes float{

0%{transform:translateY(0px);}

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

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

}

.dashboard{

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

}

.platform-image{

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

}

.core-circle{

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

}

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

@media(max-width:1200px){

.metrics-grid{

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

}

.industries-grid{

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

}

.footer-grid{

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

}

}

@media(max-width:768px){

.metrics-grid,

.industries-grid,

.footer-grid{

grid-template-columns:1fr;

}

.final-buttons{

flex-direction:column;

align-items:center;

}

.final-hero h2{

font-size:46px;

}

.final-hero p{

font-size:19px;

}

}

/*=========================================================
TILMOR V2
CHUNK 6
PREMIUM EFFECTS
=========================================================*/

/*=========================
GLOBAL GLOW
=========================*/

section::before{

content:"";

position:absolute;

left:50%;

top:0;

transform:translateX(-50%);

width:900px;

height:1px;

background:linear-gradient(90deg,transparent,var(--cyan),transparent);

opacity:.12;

}

section::after{

content:"";

position:absolute;

top:50%;

left:50%;

transform:translate(-50%,-50%);

width:900px;

height:900px;

border-radius:50%;

background:radial-gradient(circle,rgba(24,213,255,.025),transparent 70%);

pointer-events:none;

z-index:0;

}

section>*{

position:relative;

z-index:2;

}

/*=========================
CARD GLOW
=========================*/

.product-card,
.why-card,
.feature-box,
.partner-card,
.timeline-card,
.industry-card,
.metric-card,
.stat,
.eco-card{

overflow:hidden;

}

.product-card::after,
.why-card::after,
.feature-box::after,
.partner-card::after,
.timeline-card::after,
.industry-card::after,
.metric-card::after,
.stat::after,
.eco-card::after{

content:"";

position:absolute;

left:-120%;

top:0;

width:70%;

height:100%;

background:

linear-gradient(
90deg,
transparent,
rgba(255,255,255,.08),
transparent
);

transform:skewX(-25deg);

transition:1s;

}

.product-card:hover::after,
.why-card:hover::after,
.feature-box:hover::after,
.partner-card:hover::after,
.timeline-card:hover::after,
.industry-card:hover::after,
.metric-card:hover::after,
.stat:hover::after,
.eco-card:hover::after{

left:170%;

}

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

body{

background-image:

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(24,213,255,.10),transparent 30%),

linear-gradient(180deg,#040816,#07111d);

background-size:

60px 60px,

60px 60px,

auto,

auto;

}

/*=========================
IMAGE TREATMENT
=========================*/

img{

filter:

brightness(.94)

contrast(1.05)

saturate(1.1);

transition:.4s;

}

img:hover{

transform:scale(1.02);

}

/*=========================
TEXT GRADIENTS
=========================*/

.hero h1 span,
.section-heading h2 span{

background:linear-gradient(
90deg,
var(--cyan),
#7dd3fc,
var(--emerald)
);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

/*=========================
BUTTON GLOW
=========================*/

.btn-primary{

position:relative;

overflow:hidden;

}

.btn-primary::before{

content:"";

position:absolute;

top:0;

left:-100%;

width:100%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.35),

transparent

);

transition:.8s;

}

.btn-primary:hover::before{

left:120%;

}

/*=========================
SOFT SHADOWS
=========================*/

.dashboard,
.dashboard-window,
.ai-window,
.platform-image{

box-shadow:

0 60px 120px rgba(0,0,0,.55),

0 0 120px rgba(24,213,255,.08);

}

/*=========================
ANIMATED BACKGROUND BLOBS
=========================*/

.hero::before{

content:"";

position:absolute;

width:500px;

height:500px;

right:-150px;

top:80px;

border-radius:50%;

background:

radial-gradient(circle,

rgba(24,213,255,.12),

transparent 70%);

animation:blob1 14s infinite ease-in-out;

}

.hero::after{

content:"";

position:absolute;

width:400px;

height:400px;

left:-120px;

bottom:-120px;

border-radius:50%;

background:

radial-gradient(circle,

rgba(34,197,94,.08),

transparent 70%);

animation:blob2 16s infinite ease-in-out;

}

@keyframes blob1{

0%{transform:translateY(0) scale(1);}

50%{transform:translateY(-40px) scale(1.08);}

100%{transform:translateY(0) scale(1);}

}

@keyframes blob2{

0%{transform:translateY(0) scale(1);}

50%{transform:translateY(30px) scale(.95);}

100%{transform:translateY(0) scale(1);}

}

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

.product-card,
.why-card,
.feature-box,
.partner-card,
.timeline-card,
.industry-card,
.metric-card,
.stat,
.eco-card,
.dashboard-window,
.ai-window,
.platform-image{

backdrop-filter:blur(18px);

}