/* --------------------------------------------------
   TILMOR PULSE
---------------------------------------------------*/

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{

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

background:#030712;

color:#F8FAFC;

overflow-x:hidden;

line-height:1.6;

}

h1,h2,h3,h4{

font-family:'Space Grotesk',sans-serif;

font-weight:700;

letter-spacing:-1px;

}

a{

text-decoration:none;

color:inherit;

}

img{

max-width:100%;

display:block;

}

/* -------------------------------------------------- */

.container{

width:min(1180px,92%);

margin:auto;

}

/* -------------------------------------------------- */

.background-glow{

position:fixed;

border-radius:50%;

filter:blur(130px);

opacity:.18;

z-index:-1;

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

}

.glow-one{

width:600px;

height:600px;

background:#22D3EE;

left:-220px;

top:-160px;

}

.glow-two{

width:500px;

height:500px;

background:#10B981;

right:-180px;

bottom:-150px;

animation-delay:4s;

}

/* -------------------------------------------------- */

nav{

position:fixed;

top:0;

left:0;

right:0;

padding:24px 0;

backdrop-filter:blur(20px);

background:rgba(3,7,18,.55);

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

z-index:999;

}

.nav-container{

display:flex;

justify-content:space-between;

align-items:center;

}

.logo{

font-family:'Space Grotesk';

font-size:28px;

font-weight:700;

}

.logo-accent{

color:#22D3EE;

}

nav ul{

display:flex;

gap:38px;

list-style:none;

}

nav li{

font-size:15px;

color:#CBD5E1;

transition:.3s;

}

nav li:hover{

color:white;

}

.nav-button{

padding:12px 22px;

border-radius:10px;

background:#22D3EE;

color:#030712;

font-weight:700;

transition:.3s;

}

.nav-button:hover{

transform:translateY(-2px);

box-shadow:0 12px 30px rgba(34,211,238,.35);

}

/* -------------------------------------------------- */

.hero{

min-height:100vh;

display:flex;

align-items:center;

padding-top:120px;

}

.hero-grid{

display:grid;

grid-template-columns:1fr 520px;

gap:70px;

align-items:center;

}

.badge{

display:inline-flex;

padding:8px 16px;

border-radius:40px;

background:rgba(34,211,238,.12);

border:1px solid rgba(34,211,238,.35);

font-size:13px;

font-weight:700;

color:#22D3EE;

margin-bottom:30px;

}

.hero h1{

font-size:72px;

line-height:.95;

margin-bottom:30px;

}

.hero h1 span{

display:block;

background:linear-gradient(90deg,#22D3EE,#10B981);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.hero p{

font-size:20px;

color:#94A3B8;

max-width:620px;

margin-bottom:40px;

}

.hero-buttons{

display:flex;

gap:18px;

margin-bottom:60px;

}

.primary-button{

background:#22D3EE;

padding:16px 28px;

border-radius:12px;

color:#030712;

font-weight:700;

transition:.35s;

}

.primary-button:hover{

transform:translateY(-3px);

box-shadow:0 20px 45px rgba(34,211,238,.35);

}

.secondary-button{

padding:16px 28px;

border-radius:12px;

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

transition:.35s;

}

.secondary-button:hover{

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

}

.stats{

display:flex;

gap:45px;

}

.stats h2{

font-size:38px;

margin-bottom:6px;

}

.stats p{

margin:0;

font-size:14px;

color:#94A3B8;

}

/* -------------------------------------------------- */

.dashboard{

background:rgba(17,24,39,.82);

backdrop-filter:blur(30px);

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

border-radius:24px;

padding:30px;

box-shadow:

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

0 0 0 1px rgba(34,211,238,.08);

}

.dashboard-header{

display:flex;

align-items:center;

gap:12px;

margin-bottom:30px;

font-weight:700;

}

.live-dot{

width:12px;

height:12px;

border-radius:50%;

background:#10B981;

box-shadow:0 0 20px #10B981;

animation:pulse 2s infinite;

}

.metric{

display:flex;

justify-content:space-between;

padding:16px 0;

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

}

.metric:last-child{

border:none;

}

.metric span{

color:#94A3B8;

}

.metric strong{

font-size:18px;

}

.green{

color:#10B981;

}

/* -------------------------------------------------- */

.section{

padding:120px 0;

}

.section.dark{

background:#07101D;

}

.section h2{

font-size:48px;

margin-bottom:25px;

text-align:center;

}

.section-text{

text-align:center;

max-width:760px;

margin:auto;

color:#94A3B8;

font-size:18px;

}

/* -------------------------------------------------- */

.cards{

display:grid;

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

gap:28px;

margin-top:70px;

}

.card{

background:#111827;

padding:40px;

border-radius:22px;

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

transition:.35s;

}

.card:hover{

transform:translateY(-8px);

border-color:#22D3EE;

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

}

.card h3{

margin-bottom:18px;

font-size:24px;

}

.card p{

color:#94A3B8;

}

/* -------------------------------------------------- */

.signup-card{

max-width:760px;

margin:auto;

padding:60px;

background:rgba(17,24,39,.82);

border-radius:28px;

backdrop-filter:blur(24px);

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

}

.signup-card h2{

text-align:center;

margin-bottom:20px;

}

.signup-card p{

text-align:center;

margin-bottom:40px;

color:#94A3B8;

}

.grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:18px;

}

input{

width:100%;

padding:18px;

margin-bottom:18px;

border-radius:12px;

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

background:#0F172A;

color:white;

font-size:16px;

outline:none;

transition:.3s;

}

input:focus{

border-color:#22D3EE;

box-shadow:0 0 20px rgba(34,211,238,.18);

}

button{

width:100%;

padding:18px;

border:none;

border-radius:12px;

background:linear-gradient(90deg,#22D3EE,#10B981);

font-size:17px;

font-weight:700;

cursor:pointer;

transition:.3s;

color:#030712;

}

button:hover{

transform:translateY(-3px);

box-shadow:0 20px 50px rgba(34,211,238,.35);

}

/* -------------------------------------------------- */

footer{

padding:45px 0;

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

}

.footer{

display:flex;

justify-content:space-between;

color:#64748B;

font-size:14px;

}

/* -------------------------------------------------- */

@keyframes pulse{

0%{transform:scale(1);}

50%{transform:scale(1.35);}

100%{transform:scale(1);}

}

@keyframes float{

0%{transform:translateY(0);}

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

100%{transform:translateY(0);}

}

/* -------------------------------------------------- */

@media(max-width:1100px){

.hero-grid{

grid-template-columns:1fr;

}

.dashboard{

margin-top:50px;

}

.cards{

grid-template-columns:1fr;

}

nav ul{

display:none;

}

.footer{

flex-direction:column;

gap:12px;

text-align:center;

}

}

@media(max-width:700px){

.hero h1{

font-size:52px;

}

.hero p{

font-size:18px;

}

.stats{

flex-direction:column;

gap:20px;

}

.grid{

grid-template-columns:1fr;

}

.signup-card{

padding:35px;

}

.hero-buttons{

flex-direction:column;

}

.hero-chart{

margin:25px 0 35px;

height:180px;

}

.hero-chart svg{

width:100%;

height:100%;

}

.chart-line{

fill:none;

stroke:url(#lineGradient);

stroke-width:6;

stroke-linecap:round;

stroke-linejoin:round;

stroke-dasharray:1200;

stroke-dashoffset:1200;

animation:drawLine 3s ease forwards;

}

.dashboard-grid{

display:grid;

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

gap:18px;

margin-bottom:35px;

}

.metric-card{

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

padding:22px;

border-radius:16px;

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

transition:.35s;

}

.metric-card:hover{

transform:translateY(-5px);

border-color:#22D3EE;

}

.metric-card label{

display:block;

font-size:12px;

color:#94A3B8;

margin-bottom:8px;

text-transform:uppercase;

letter-spacing:1px;

}

.metric-card h2{

font-size:30px;

}

.opportunities{

margin-top:10px;

}

.opportunities h4{

margin-bottom:15px;

font-size:15px;

color:#94A3B8;

}

.opportunity{

display:flex;

justify-content:space-between;

padding:14px 0;

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

}

.status{

margin-left:auto;

font-size:12px;

color:#10B981;

}

.ticker{

margin-top:30px;

overflow:hidden;

white-space:nowrap;

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

padding-top:18px;

}

.ticker-track{

display:inline-block;

padding-left:100%;

animation:ticker 20s linear infinite;

}

.ticker-track span{

margin-right:28px;

color:#94A3B8;

}

@keyframes drawLine{

to{

stroke-dashoffset:0;

}

}

@keyframes ticker{

from{

transform:translateX(0);

}

to{

transform:translateX(-100%);

}

}

}