:root {

--bg: #07111f;
--card: rgba(255,255,255,.04);
--border: rgba(255,255,255,.08);

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

--accent: #00d2ff;
--accent2: #3b82f6;

}

* {

margin: 0;
padding: 0;
box-sizing: border-box;

}

html {
scroll-behavior: smooth;
}

body {

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

background: var(--bg);
color: white;

overflow-x: hidden;
}

.container {

width: min(1200px,92%);
margin: auto;

}

.noise {

position: fixed;
inset: 0;

background-image:
radial-gradient(rgba(255,255,255,.03) 1px, transparent 1px);

background-size: 4px 4px;

pointer-events: none;

z-index: -1;
}

.grid-bg {

position: fixed;
inset: 0;

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

background-size: 60px 60px;

z-index: -2;
}

.header {

position: sticky;
top: 0;

backdrop-filter: blur(20px);

background: rgba(5,10,20,.7);

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

z-index: 1000;
}

.nav {

height: 84px;

display: flex;
align-items: center;
justify-content: space-between;

}

.logo {

font-family: 'Manrope', sans-serif;
font-size: 28px;
font-weight: 800;

}

.logo span {

color: var(--accent);

}

.menu {

display: flex;
gap: 36px;

}

.menu a {

text-decoration: none;
color: white;

opacity: .8;

transition: .3s;

}

.menu a:hover {

opacity: 1;
color: var(--accent);

}

.btn {

display: inline-flex;
align-items: center;
justify-content: center;

padding: 16px 28px;

border-radius: 16px;

background:
linear-gradient(
135deg,
var(--accent),
var(--accent2)
);

color: white;
text-decoration: none;

font-weight: 600;

border: none;

cursor: pointer;

transition: .35s;
}

.btn:hover {

transform: translateY(-4px);

box-shadow:
0 10px 40px rgba(0,210,255,.25);

}

.btn-outline {

background: transparent;

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

}

.btn-small {

padding: 12px 18px;

}

.hero {

padding-top: 140px;
padding-bottom: 120px;

min-height: 100vh;

display: flex;
align-items: center;

}

.hero-grid {

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

gap: 60px;
align-items: center;

}

.hero-badge {

display: inline-flex;

padding: 10px 16px;

border-radius: 999px;

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

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

color: var(--accent);

margin-bottom: 28px;

}

h1 {

font-family: 'Manrope';

font-size: 68px;

line-height: 1.05;

margin-bottom: 28px;

}

.hero-text {

font-size: 20px;
line-height: 1.8;

color: var(--muted);

max-width: 680px;

}

.hero-buttons {

display: flex;
gap: 16px;

margin-top: 42px;

}

.hero-stats {

display: flex;
gap: 42px;

margin-top: 56px;

}

.stat strong {

display: block;

font-size: 32px;
font-weight: 700;

}

.stat span {

color: var(--muted);

}

.hero-dashboard {

position: relative;

max-width: 900px;

margin: auto;

}

.hero-graph {

width: 100%;
height: auto;

filter:
drop-shadow(0 0 50px rgba(0,210,255,.12));

}

.graph-line {

fill: none;

stroke: url(#lineGradient);

stroke-width: 6;

stroke-linecap: round;

stroke-dasharray: 2400;
stroke-dashoffset: 2400;

filter: url(#glow);

animation:
drawGraph 4s ease forwards;

}

.graph-area {

fill: url(#areaGradient);

opacity: .85;

animation:
fadeArea 2s ease forwards;

}

.graph-line-secondary {

fill: none;

stroke: rgba(0,210,255,.35);

stroke-width: 2;

stroke-dasharray: 10 10;

animation:
moveSecondary 12s linear infinite;

}

.graph-point {

fill: #00d2ff;

filter:
drop-shadow(0 0 12px #00d2ff);

animation:
pulsePoint 3s infinite;

}

.dashboard-card {

position: absolute;

padding: 18px 24px;

background:
rgba(10,20,40,.7);

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

backdrop-filter: blur(20px);

border-radius: 20px;

font-size: 32px;
font-weight: 700;

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

}

.dashboard-card span {

display: block;

font-size: 14px;

margin-top: 6px;

opacity: .7;

}

.card1 {

top: 16%;
left: 5%;

}

.card2 {

top: 48%;
right: 4%;

}

.card3 {

bottom: 6%;
left: 40%;

}

.section {

padding: 120px 0;

}

.section-title {

font-family: 'Manrope';

font-size: 46px;

margin-bottom: 60px;

max-width: 760px;

}

.cards-grid,
.cases-grid {

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

gap: 24px;

}

.cases-grid {

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

}

.glass-card,
.case-card {

background: var(--card);

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

border-radius: 28px;

padding: 36px;

backdrop-filter: blur(20px);

transition: .4s;

}

.glass-card:hover,
.case-card:hover {

transform: translateY(-8px);

border-color:
rgba(0,210,255,.3);

}

.icon {

width: 80px;
height: 80px;

margin-bottom: 24px;

}

.icon svg {

width: 100%;
height: 100%;

filter:
drop-shadow(0 0 12px rgba(0,210,255,.5));

}

.glass-card h3,
.case-card h3 {

font-size: 26px;

margin-bottom: 18px;

}

.glass-card p {

line-height: 1.8;

color: var(--muted);

}

.case-stat {

margin-top: 18px;

font-size: 34px;
font-weight: 700;

color: var(--accent);

}

.mini-chart {

margin-top: 28px;

height: 90px;

border-radius: 18px;

position: relative;

overflow: hidden;

background:
linear-gradient(
180deg,
rgba(0,210,255,.12),
transparent
);

}

.mini-chart::before {

content: '';

position: absolute;

width: 200%;
height: 2px;

top: 50%;

background:
linear-gradient(
90deg,
transparent,
#00d2ff,
transparent
);

animation:
moveChart 3s linear infinite;

}

.dark-section {

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

}

.lead-box {

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

gap: 60px;

padding: 70px;

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

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

border-radius: 32px;

}

.lead-text {

font-size: 18px;

line-height: 1.8;

color: var(--muted);

}

.lead-form {

display: flex;
flex-direction: column;

gap: 18px;

}

.lead-form input,
.lead-form textarea {

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

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

border-radius: 18px;

padding: 18px;

font-size: 16px;

color: white;

outline: none;

}

.lead-form textarea {

min-height: 140px;

resize: vertical;

}

.reveal {

opacity: 0;
transform: translateY(40px);

transition:
opacity .8s ease,
transform .8s ease;

}

.reveal.active {

opacity: 1;
transform: translateY(0);

}

@keyframes drawGraph {

to {
stroke-dashoffset: 0;
}

}

@keyframes pulsePoint {

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

50% {
transform: scale(1.5);
}

}

@keyframes moveSecondary {

0% {
stroke-dashoffset: 0;
}

100% {
stroke-dashoffset: 100;
}

}

@keyframes fadeArea {

from {
opacity: 0;
}

to {
opacity: .85;
}

}

@keyframes moveChart {

0% {
transform: translateX(-100%);
}

100% {
transform: translateX(100%);
}

}

@media (max-width: 980px) {

.hero-grid,
.cards-grid,
.cases-grid,
.lead-box {

grid-template-columns: 1fr;

}

.menu {

display: none;

}

h1 {

font-size: 48px;

}

.section-title {

font-size: 36px;

}

.hero {

padding-top: 120px;

}

.hero-stats {

flex-direction: column;
gap: 20px;

}

.dashboard-card {

display: none;

}

}

@media (max-width: 640px) {

h1 {

font-size: 40px;

}

.hero-buttons {

flex-direction: column;

}

.section {

padding: 90px 0;

}

.lead-box {

padding: 32px;

}

}