@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap');
:root{
--bg:#07080f;
--bg-2:#0b0d18;
--bg-card:#0e1020;
--bg-card-2:#131626;
--text:#f0f2fa;
--text-2:#b0bcd8;
--text-muted:#8a97b8;
--blue:#2463EB;
--blue-bright:#4a7fff;
--blue-soft:#93b4fd;
--magenta:#E91EBF;
--magenta-bright:#ff3cd6;
--magenta-soft:#f472d8;
--yellow:#e8ff3c;
--neonpink:#ff2d9b;
--yellow-dim:#c8e030;
--cyan:#06c8e0;
--grad-primary:linear-gradient(135deg, #2463EB 0%, #E91EBF 100%);
--grad-yellow:linear-gradient(135deg, #e8ff3c 0%, #06c8e0 100%);
--grad-full:linear-gradient(135deg, #2463EB 0%, #E91EBF 50%, #e8ff3c 100%);
--grad-glow:linear-gradient(135deg, #4a7fff22, #E91EBF22);
--border:rgba(255,255,255,.07);
--border-blue:rgba(36,99,235,.3);
--border-mag:rgba(233,30,191,.3);
--glow-blue:0 0 40px rgba(36,99,235,.35);
--glow-mag:0 0 40px rgba(233,30,191,.35);
--glow-yellow:0 0 30px rgba(232,255,60,.25);
--shadow:0 8px 40px rgba(0,0,0,.45);
--shadow-card:0 4px 24px rgba(0,0,0,.35);
--font-display:'Plus Jakarta Sans', sans-serif;
--font-body:'DM Sans', sans-serif;
--container:1180px;
--radius:14px;
--radius-sm:8px;
--radius-lg:24px;
--section-gap:120px;
}
*, *::before, *::after{box-sizing:border-box;margin:0;padding:0;}
html{
scroll-behavior:smooth;
-webkit-text-size-adjust:100%;
}
body{
font-family:var(--font-body);
font-size:1rem;
line-height:1.65;
color:var(--text);
background-color:var(--bg);
overflow-x:hidden;
}
#bg-canvas{
position:fixed;
inset:0;
z-index:-1;
pointer-events:none;
}
h1, h2, h3, h4, h5, h6{
font-family:var(--font-display);
line-height:1.15;
letter-spacing:-.02em;
color:var(--text);
}
h1{font-size:clamp(2.4rem, 5vw, 4.2rem);font-weight:800;}
h2{font-size:clamp(1.8rem, 3.5vw, 2.8rem);font-weight:700;}
h3{font-size:clamp(1.2rem, 2vw, 1.5rem);font-weight:600;}
h4{font-size:1.1rem;font-weight:600;}
p{color:var(--text-2);max-width:68ch;}
p + p{margin-top:.9rem;}
a{color:var(--blue-soft);text-decoration:none;transition:color .2s;}
a:hover{color:var(--text);}
p a, .faq-answer a{
color:#93b4fd;
text-decoration:underline;
text-underline-offset:3px;
}
p a:hover, .faq-answer a:hover{color:#c5d8fe;}
strong{color:var(--text);font-weight:600;}
.container{
width:100%;
max-width:var(--container);
margin:0 auto;
padding:0 24px;
}
section{padding:var(--section-gap) 0;}
.section-label{
display:inline-block;
font-family:var(--font-display);
font-size:.75rem;
font-weight:700;
letter-spacing:.12em;
text-transform:uppercase;
color:var(--magenta-bright);
background:rgba(233,30,191,.12);
border:1px solid rgba(233,30,191,.25);
padding:6px 14px;
border-radius:100px;
margin-bottom:20px;
}
.section-header{
max-width:760px;
margin-bottom:64px;
}
.section-header p{
margin-top:16px;
font-size:1.1rem;
}
#header{
position:fixed;
top:0;left:0;right:0;
z-index:100;
transition:background .3s, box-shadow .3s;
}
#header::before{
content:'';
display:block;
height:3px;
background:var(--grad-primary);
}
#header.scrolled{
background:rgba(7,8,15,.92);
backdrop-filter:blur(16px);
-webkit-backdrop-filter:blur(16px);
box-shadow:0 1px 0 var(--border);
}
.nav-inner{
display:flex;
align-items:center;
gap:32px;
height:72px;
}
.nav-logo{
flex-shrink:0;
}
.nav-logo img{
height:44px;
width:auto;
display:block;
}
.nav-logo .logo-text{
font-family:var(--font-display);
font-size:1.25rem;
font-weight:800;
letter-spacing:-.03em;
color:var(--text);
line-height:1;
}
.logo-dot{color:var(--magenta-bright);}
.nav-menu{
display:flex;
align-items:center;
gap:8px;
margin-left:auto;
list-style:none;
}
.nav-menu a{
font-family:var(--font-display);
font-size:.9rem;
font-weight:500;
color:var(--text-2);
padding:8px 14px;
border-radius:var(--radius-sm);
transition:color .2s, background .2s;
text-decoration:none;
}
.nav-menu a:hover,
.nav-menu a.active{
color:var(--text);
background:rgba(255,255,255,.07);
}
.nav-menu .nav-cta a{
background:var(--grad-primary);
color:#fff;
padding:9px 20px;
font-weight:700;
}
.nav-menu .nav-cta a:hover{
filter:brightness(1.1);
background:var(--grad-primary);
}
#nav-toggle{
display:none;
flex-direction:column;
gap:5px;
background:none;
border:none;
cursor:pointer;
padding:6px;
margin-left:auto;
}
#nav-toggle span{
display:block;
width:24px;
height:2px;
background:var(--text);
border-radius:2px;
transition:transform .3s, opacity .3s;
}
.btn{
display:inline-flex;
align-items:center;
gap:8px;
font-family:var(--font-display);
font-size:.95rem;
font-weight:700;
padding:13px 28px;
border-radius:var(--radius-sm);
transition:filter .2s, transform .15s, box-shadow .2s;
cursor:pointer;
border:none;
text-decoration:none;
line-height:1;
letter-spacing:.01em;
}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0);}
.btn-primary{
background:var(--grad-primary);
color:#fff;
box-shadow:0 4px 20px rgba(233,30,191,.35);
}
.btn-primary:hover{
filter:brightness(1.1);
box-shadow:0 6px 30px rgba(233,30,191,.5);
color:#fff;
}
.btn-secondary{
background:transparent;
color:var(--text);
border:1px solid var(--border-blue);
}
.btn-secondary:hover{
border-color:var(--blue-bright);
background:rgba(36,99,235,.1);
color:var(--text);
}
.btn-pink{
background:var(--neonpink);
color:#fff;
box-shadow:0 4px 20px rgba(255,45,155,.4);
}
.btn-pink:hover{
filter:brightness(1.08);
box-shadow:0 6px 30px rgba(255,45,155,.55);
color:#fff;
}
.btn-lg{padding:16px 36px;font-size:1.05rem;}
.hero{
position:relative;
min-height:100svh;
display:flex;
align-items:center;
padding:140px 0 100px;
overflow:hidden;
}
.hero-bg{
position:absolute;
inset:0;
background:
radial-gradient(ellipse 60% 50% at 80% 50%, rgba(233,30,191,.12) 0%, transparent 70%),
radial-gradient(ellipse 50% 60% at 20% 40%, rgba(36,99,235,.15) 0%, transparent 65%),
radial-gradient(ellipse 30% 40% at 50% 90%, rgba(232,255,60,.07) 0%, transparent 60%);
}
.hero-bg::after{
content:'';
position:absolute;
inset:0;
background:url('/hero.webp') center center / cover no-repeat;
opacity:.18;
mix-blend-mode:luminosity;
}
.hero-grid-deco{
position:absolute;
inset:0;
background-image:
linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
background-size:60px 60px;
mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
-webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
}
.hero-inner{
position:relative;
z-index:1;
display:grid;
grid-template-columns:1fr 1fr;
gap:64px;
align-items:center;
}
.hero-content{}
.hero-badge{
display:inline-flex;
align-items:center;
gap:8px;
font-family:var(--font-display);
font-size:.78rem;
font-weight:700;
letter-spacing:.1em;
text-transform:uppercase;
color:var(--yellow);
background:rgba(232,255,60,.1);
border:1px solid rgba(232,255,60,.25);
padding:7px 16px;
border-radius:100px;
margin-bottom:28px;
}
.hero-badge svg{width:14px;height:14px;}
.hero h1{
margin-bottom:24px;
}
.hero h1 .highlight{
background:var(--grad-primary);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
}
.hero-sub{
font-size:1.15rem;
color:var(--text-2);
margin-bottom:40px;
max-width:52ch;
}
.hero-actions{
display:flex;
flex-wrap:wrap;
gap:14px;
align-items:center;
}
.hero-trust{
margin-top:48px;
display:flex;
align-items:center;
gap:16px;
font-size:.87rem;
color:var(--text-muted);
}
.hero-trust-divider{width:1px;height:20px;background:var(--border);}
.hero-trust strong{color:var(--text-2);}
.hero-visual{
position:relative;
}
.hero-card-stack{
position:relative;
padding:20px;
}
.hero-card-stack::before{
content:'';
position:absolute;
inset:-30px;
background:radial-gradient(ellipse at 50% 50%, rgba(233,30,191,.12) 0%, transparent 70%);
filter:blur(20px);
}
.hero-main-card{
background:var(--bg-card);
border:1px solid var(--border-blue);
border-radius:var(--radius-lg);
padding:32px;
position:relative;
z-index:2;
box-shadow:var(--shadow);
}
.hero-main-card .card-label{
font-size:.75rem;
font-weight:700;
letter-spacing:.1em;
text-transform:uppercase;
color:var(--magenta-bright);
margin-bottom:16px;
}
.service-pills{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-bottom:24px;
}
.pill{
font-size:.8rem;
font-weight:600;
padding:6px 14px;
border-radius:100px;
font-family:var(--font-display);
}
.pill-blue{background:rgba(36,99,235,.18);color:#93b4fd;border:1px solid rgba(36,99,235,.3);}
.pill-mag{background:rgba(233,30,191,.15);color:var(--magenta-soft);border:1px solid rgba(233,30,191,.25);}
.pill-yel{background:rgba(255,45,155,.12);color:var(--neonpink);border:1px solid rgba(255,45,155,.25);}
.pill-cyan{background:rgba(6,200,224,.12);color:var(--cyan);border:1px solid rgba(6,200,224,.2);}
.hero-mini-stats{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
}
.mini-stat{
background:var(--bg-card-2);
border:1px solid var(--border);
border-radius:var(--radius-sm);
padding:16px;
text-align:center;
}
.mini-stat-num{
font-family:var(--font-display);
font-size:1.6rem;
font-weight:800;
background:var(--grad-primary);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
line-height:1;
}
.mini-stat-label{
font-size:.76rem;
color:var(--text-muted);
margin-top:4px;
}
.deco-card{
position:absolute;
background:var(--bg-card);
border-radius:var(--radius-sm);
padding:12px 16px;
display:flex;
align-items:center;
gap:10px;
box-shadow:var(--shadow-card);
font-size:.82rem;
font-weight:600;
color:var(--text-2);
z-index:3;
animation:float 4s ease-in-out infinite;
}
.deco-card svg{flex-shrink:0;}
.deco-card-1{
top:-20px;right:-20px;
border:1px solid rgba(232,255,60,.3);
animation-delay:0s;
}
.deco-card-2{
bottom:10px;left:-30px;
border:1px solid rgba(233,30,191,.3);
animation-delay:2s;
}
@keyframes float{
0%, 100%{transform:translateY(0);}
50%{transform:translateY(-8px);}
}
.stats-bar{
padding:48px 0;
border-top:1px solid var(--border);
border-bottom:1px solid var(--border);
position:relative;
}
.stats-bar::before{
content:'';
position:absolute;
inset:0;
background:linear-gradient(90deg, transparent, rgba(233,30,191,.05) 50%, transparent);
}
.stats-grid{
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:24px;
text-align:center;
}
.stat-item{
position:relative;
}
.stat-item + .stat-item::before{
content:'';
position:absolute;
left:0;top:15%;bottom:15%;
width:1px;
background:var(--border);
}
.stat-num{
font-family:var(--font-display);
font-size:clamp(1.8rem, 3vw, 2.6rem);
font-weight:800;
line-height:1;
margin-bottom:6px;
}
.stat-num.gradient{
background:var(--grad-primary);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
}
.stat-num.yellow{color:var(--neonpink);}
.stat-label{
font-size:.85rem;
color:var(--text-muted);
}
.services-grid{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:20px;
}
.service-card{
background:var(--bg-card);
border:1px solid var(--border);
border-radius:var(--radius);
padding:32px 28px;
position:relative;
overflow:hidden;
transition:border-color .3s, transform .3s, box-shadow .3s;
}
.service-card::before{
content:'';
position:absolute;
top:0;left:0;right:0;
height:3px;
opacity:0;
transition:opacity .3s;
}
.service-card.blue::before{background:var(--grad-primary);}
.service-card.yellow::before{background:var(--grad-yellow);}
.service-card.mag::before{background:linear-gradient(90deg, var(--magenta), var(--cyan));}
.service-card:hover{
transform:translateY(-4px);
box-shadow:var(--shadow);
}
.service-card.blue:hover{border-color:var(--border-blue);box-shadow:var(--glow-blue);}
.service-card.yellow:hover{border-color:rgba(232,255,60,.3);box-shadow:0 4px 20px rgba(255,45,155,.4);}
.service-card.mag:hover{border-color:var(--border-mag);box-shadow:var(--glow-mag);}
.service-card:hover::before{opacity:1;}
.card-icon{
width:48px;
height:48px;
border-radius:12px;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:20px;
}
.card-icon.blue-bg{background:rgba(36,99,235,.15);}
.card-icon.mag-bg{background:rgba(233,30,191,.15);}
.card-icon.yellow-bg{background:rgba(232,255,60,.12);}
.card-icon.cyan-bg{background:rgba(6,200,224,.12);}
.service-card h3,
.service-card .card-title{
margin-bottom:10px;
font-size:1.15rem;
font-family:var(--font-display);
font-weight:600;
color:var(--text);
line-height:1.2;
}
.service-card p{
font-size:.9rem;
color:var(--text-muted);
max-width:none;
}
.card-tag{
display:inline-block;
margin-top:20px;
font-size:.76rem;
font-weight:700;
letter-spacing:.08em;
text-transform:uppercase;
padding:5px 12px;
border-radius:100px;
font-family:var(--font-display);
}
.tag-blue{color:#93b4fd;background:rgba(36,99,235,.15);}
.tag-mag{color:var(--magenta-soft);background:rgba(233,30,191,.15);}
.tag-yellow{color:var(--yellow);background:rgba(232,255,60,.1);}
.tag-cyan{color:var(--cyan);background:rgba(6,200,224,.1);}
.why-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:80px;
align-items:center;
}
.why-list{
list-style:none;
margin-top:32px;
display:flex;
flex-direction:column;
gap:20px;
}
.why-item{
display:flex;
gap:16px;
align-items:flex-start;
}
.why-icon{
flex-shrink:0;
width:40px;
height:40px;
border-radius:10px;
display:flex;
align-items:center;
justify-content:center;
background:rgba(233,30,191,.12);
border:1px solid rgba(233,30,191,.2);
margin-top:2px;
}
.why-item h3{margin-bottom:4px;font-size:1rem;}
.why-item p{font-size:.9rem;color:var(--text-muted);max-width:none;margin:0;}
.why-visual{
position:relative;
}
.neon-box{
background:var(--bg-card);
border:1px solid var(--border-blue);
border-radius:var(--radius-lg);
padding:40px;
position:relative;
overflow:hidden;
}
.neon-box::after{
content:'';
position:absolute;
bottom:-40px;right:-40px;
width:200px;height:200px;
background:radial-gradient(circle, rgba(233,30,191,.2) 0%, transparent 70%);
filter:blur(20px);
}
.neon-box-title{
font-family:var(--font-display);
font-size:1rem;
font-weight:700;
color:var(--text-muted);
letter-spacing:.08em;
text-transform:uppercase;
margin-bottom:24px;
}
.check-list{
list-style:none;
display:flex;
flex-direction:column;
gap:14px;
}
.check-list li{
display:flex;
align-items:center;
gap:12px;
font-size:.95rem;
color:var(--text-2);
}
.check-list li .check-icon{
width:22px;
height:22px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
background:rgba(255,45,155,.15);
}
.check-list li .check-icon svg{
width:13px;
height:13px;
stroke:var(--neonpink);
}
.neon-box-cta{
margin-top:28px;
padding-top:24px;
border-top:1px solid var(--border);
}
.process-section{background:var(--bg-2);}
.process-grid{
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:24px;
position:relative;
}
.process-grid::before{
content:'';
position:absolute;
top:28px;left:calc(12.5% + 24px);right:calc(12.5% + 24px);
height:1px;
background:linear-gradient(90deg, var(--border-blue), var(--border-mag), var(--border-blue));
z-index:0;
}
.process-step{
position:relative;
z-index:1;
text-align:center;
padding:28px 20px;
background:var(--bg-card);
border:1px solid var(--border);
border-radius:var(--radius);
transition:border-color .3s, box-shadow .3s;
}
.process-step:hover{
border-color:var(--border-blue);
box-shadow:var(--glow-blue);
}
.process-num{
font-family:var(--font-display);
font-size:2rem;
font-weight:800;
background:var(--grad-primary);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
line-height:1;
margin-bottom:16px;
}
.process-step h3,
.process-step .card-title{
font-size:1rem;
margin-bottom:8px;
font-family:var(--font-display);
font-weight:600;
color:var(--text);
}
.process-step p{
font-size:.85rem;
color:var(--text-muted);
max-width:none;
}
.pricing-grid{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:24px;
align-items:start;
}
.pricing-card{
background:var(--bg-card);
border:1px solid var(--border);
border-radius:var(--radius-lg);
padding:36px 32px;
position:relative;
transition:transform .3s, box-shadow .3s;
}
.pricing-card:hover{
transform:translateY(-4px);
}
.pricing-card.featured{
border-color:var(--border-mag);
box-shadow:var(--glow-mag);
background:linear-gradient(160deg, #14102a, var(--bg-card));
}
.pricing-badge{
position:absolute;
top:-14px;left:50%;
transform:translateX(-50%);
background:var(--grad-primary);
color:#fff;
font-family:var(--font-display);
font-size:.74rem;
font-weight:800;
letter-spacing:.1em;
text-transform:uppercase;
padding:5px 18px;
border-radius:100px;
white-space:nowrap;
}
.pricing-name{
font-family:var(--font-display);
font-size:1rem;
font-weight:700;
color:var(--text-muted);
letter-spacing:.08em;
text-transform:uppercase;
margin-bottom:12px;
}
.pricing-price{
font-family:var(--font-display);
font-size:3rem;
font-weight:800;
line-height:1;
color:var(--text);
margin-bottom:4px;
}
.pricing-price span{
font-size:1.5rem;
color:var(--text-muted);
font-weight:400;
margin-left:2px;
}
.pricing-note{
font-size:.8rem;
color:var(--text-muted);
margin-bottom:24px;
}
.pricing-divider{
height:1px;
background:var(--border);
margin-bottom:24px;
}
.pricing-features{
list-style:none;
display:flex;
flex-direction:column;
gap:10px;
margin-bottom:28px;
}
.pricing-features li{
display:flex;
align-items:center;
gap:10px;
font-size:.9rem;
color:var(--text-2);
}
.check{color:var(--neonpink);font-weight:700;}
.check.no{color:var(--text-muted);}
.faq-list{
max-width:780px;
display:flex;
flex-direction:column;
gap:12px;
}
.faq-item{
background:var(--bg-card);
border:1px solid var(--border);
border-radius:var(--radius-sm);
overflow:hidden;
transition:border-color .2s;
}
.faq-item.open{border-color:var(--border-blue);}
.faq-question{
width:100%;
background:none;
border:none;
padding:20px 24px;
text-align:left;
cursor:pointer;
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
font-family:var(--font-display);
font-size:1rem;
font-weight:600;
color:var(--text);
transition:color .2s;
}
.faq-question:hover{color:var(--blue-soft);}
.faq-icon{
flex-shrink:0;
font-size:1.3rem;
line-height:1;
color:var(--magenta-bright);
font-weight:300;
transition:transform .3s;
font-family:var(--font-body);
}
.faq-item.open .faq-icon{transform:rotate(45deg);}
.faq-answer{
max-height:0;
overflow:hidden;
transition:max-height .4s ease;
}
.faq-item.open .faq-answer{max-height:500px;}
.faq-answer p{
padding:0 24px 20px;
font-size:.93rem;
color:var(--text-muted);
max-width:none;
}
.cta-section{
position:relative;
overflow:hidden;
padding:100px 0;
}
.cta-bg{
position:absolute;
inset:0;
background:
radial-gradient(ellipse 50% 100% at 50% 0%, rgba(233,30,191,.12) 0%, transparent 70%),
radial-gradient(ellipse 40% 60% at 80% 50%, rgba(36,99,235,.1) 0%, transparent 60%);
}
.cta-inner{
position:relative;
z-index:1;
text-align:center;
max-width:720px;
margin:0 auto;
}
.cta-inner h2{margin-bottom:16px;}
.cta-inner p{
font-size:1.1rem;
margin:0 auto 36px;
}
.cta-inner .cta-footnote{
font-size:.82rem;
margin:44px auto 0;
}
.cta-buttons{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:14px;
width:100%;
}
.cta-footnote{
margin-top:44px;
padding-top:24px;
border-top:1px solid var(--border);
font-size:.82rem;
color:var(--text-muted);
width:100%;
text-align:center;
}
#footer{
background:#040508;
border-top:1px solid var(--border);
padding:72px 0 0;
}
.footer-grid{
display:grid;
grid-template-columns:2fr 1fr 1fr 1fr;
gap:48px;
padding-bottom:56px;
border-bottom:1px solid var(--border);
}
.footer-brand img{
height:32px;
width:auto;
max-width:200px;
object-fit:contain;
display:block;
margin-bottom:14px;
}
.footer-brand .logo-text{
font-family:var(--font-display);
font-size:1.3rem;
font-weight:800;
letter-spacing:-.03em;
display:block;
margin-bottom:14px;
}
.footer-brand p{
font-size:.88rem;
color:#8898b8;
max-width:30ch;
margin-bottom:20px;
}
.footer-contact a{
display:flex;
align-items:center;
gap:8px;
font-size:.87rem;
color:#8898b8;
margin-bottom:8px;
text-decoration:none;
transition:color .2s;
}
.footer-contact a:hover{color:var(--text);}
.footer-contact svg{width:15px;height:15px;stroke:var(--blue-soft);flex-shrink:0;}
.footer-col h3{
font-size:.8rem;
font-weight:700;
letter-spacing:.1em;
text-transform:uppercase;
color:#9aa5c0;
margin-bottom:16px;
}
.footer-col ul{list-style:none;}
.footer-col ul li + li{margin-top:10px;}
.footer-col ul a{
font-size:.88rem;
color:#8898b8;
text-decoration:none;
transition:color .2s;
}
.footer-col ul a:hover{color:var(--text);}
.footer-bottom{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
padding:20px 0;
font-size:.82rem;
color:#9aa5c0;
flex-wrap:wrap;
}
.footer-bottom a{
color:#9aa5c0;
text-decoration:none;
transition:color .2s;
}
.footer-bottom a:hover{color:var(--text-2);}
.footer-bottom .made-by a{color:#9aa5c0;}
[data-reveal]{
opacity:0;
transform:translateY(28px);
transition:opacity .6s ease, transform .6s ease;
}
[data-reveal].revealed{
opacity:1;
transform:translateY(0);
}
[data-reveal-delay="1"]{transition-delay:.1s;}
[data-reveal-delay="2"]{transition-delay:.2s;}
[data-reveal-delay="3"]{transition-delay:.3s;}
[data-reveal-delay="4"]{transition-delay:.4s;}
.text-gradient{
background:var(--grad-primary);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
}
.text-yellow{color:var(--yellow);}
.text-mag{color:var(--magenta-bright);}
.text-muted{color:var(--text-muted);}
.visually-hidden{
position:absolute;
width:1px;height:1px;
overflow:hidden;
clip:rect(0,0,0,0);
white-space:nowrap;
}
@media (max-width:1060px){
:root{--section-gap:90px;}
.services-grid{grid-template-columns:repeat(2, 1fr);}
.pricing-grid{grid-template-columns:1fr 1fr;}
.pricing-grid .pricing-card:last-child{grid-column:1 / -1;max-width:400px;margin:0 auto;width:100%;}
.footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:900px){
.hero-inner{grid-template-columns:1fr;}
.hero-visual{display:none;}
.why-grid{grid-template-columns:1fr;}
.process-grid{grid-template-columns:1fr 1fr;}
.process-grid::before{display:none;}
.stats-grid{grid-template-columns:repeat(2, 1fr);}
}
@media (max-width:768px){
:root{--section-gap:70px;}
.nav-menu{
display:none;
position:fixed;
inset:0;
top:75px;
background:rgba(7,8,15,.97);
backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(20px);
flex-direction:column;
align-items:center;
justify-content:center;
gap:24px;
padding:40px 24px;
}
.nav-menu.open{display:flex;}
.nav-menu a{font-size:1.2rem;padding:12px 24px;}
#nav-toggle{display:flex;}
.services-grid{grid-template-columns:1fr;}
.process-grid{grid-template-columns:1fr;}
.pricing-grid{grid-template-columns:1fr;}
.pricing-card:last-child{grid-column:auto;max-width:none;}
.footer-grid{grid-template-columns:1fr;gap:32px;}
.hero-actions{flex-direction:column;align-items:flex-start;}
.cta-buttons{flex-direction:column;align-items:center;}
}
@media (max-width:480px){
.stats-grid{grid-template-columns:1fr 1fr;}
.hero-trust{flex-direction:column;align-items:flex-start;gap:8px;}
.hero-trust-divider{display:none;}
.footer-bottom{flex-direction:column;text-align:center;}
}
.has-dropdown{
position:relative;
}
.has-dropdown > a::after{
content:'';
display:inline-block;
width:8px;
height:8px;
margin-left:6px;
border-right:1.5px solid currentColor;
border-bottom:1.5px solid currentColor;
transform:rotate(45deg) translateY(-2px);
transition:transform .2s;
vertical-align:middle;
}
.has-dropdown:hover > a::after{
transform:rotate(-135deg) translateY(-2px);
}
.nav-dropdown{
visibility:hidden;
opacity:0;
pointer-events:none;
position:absolute;
top:calc(100% + 8px);
left:0;
min-width:240px;
background:#0e1020;
border:1px solid var(--border-blue);
border-radius:var(--radius);
padding:10px;
list-style:none;
box-shadow:var(--shadow), var(--glow-blue);
z-index:200;
transition:opacity .18s ease, visibility .18s ease, transform .18s ease;
transform:translateY(-4px);
}
.has-dropdown::after{
content:'';
position:absolute;
top:100%;
left:0;
right:0;
height:16px;
background:transparent;
z-index:199;
}
.nav-dropdown::before{
content:'';
position:absolute;
top:-6px;left:24px;
width:10px;height:10px;
background:#0e1020;
border-top:1px solid var(--border-blue);
border-left:1px solid var(--border-blue);
transform:rotate(45deg);
}
.has-dropdown:hover .nav-dropdown,
.has-dropdown:focus-within .nav-dropdown{
visibility:visible;
opacity:1;
pointer-events:auto;
transform:translateY(0);
}
.nav-dropdown li + li{margin-top:2px;}
.nav-dropdown a{
display:block;
padding:9px 14px;
font-size:.87rem;
font-weight:500;
color:var(--text-2);
border-radius:var(--radius-sm);
transition:background .15s, color .15s;
}
.nav-dropdown a:hover{
background:rgba(36,99,235,.12);
color:var(--text);
}
@media (max-width:768px){
.nav-dropdown{
visibility:visible !important;
opacity:1 !important;
pointer-events:auto !important;
transform:none !important;
display:flex;
position:static;
flex-direction:column;
background:transparent;
border:none;
box-shadow:none;
padding:0 0 0 16px;
min-width:auto;
margin-top:8px;
transition:none;
}
.nav-dropdown::before{display:none;}
.nav-dropdown a{font-size:1rem;padding:8px 0;}
.has-dropdown > a::after{display:none;}
}
.fit-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:24px;
}
.fit-card{
background:var(--bg-card);
border-radius:var(--radius);
padding:36px 32px;
border:1px solid var(--border);
}
.fit-card.fit-yes{border-color:rgba(232,255,60,.2);}
.fit-card.fit-no{border-color:rgba(233,30,191,.15);}
.fit-header{
display:flex;
align-items:center;
gap:14px;
margin-bottom:24px;
}
.fit-icon{
width:44px;
height:44px;
border-radius:12px;
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
}
.fit-icon-yes{background:rgba(255,45,155,.12);border:1px solid rgba(255,45,155,.25);}
.fit-icon-no{background:rgba(233,30,191,.12);border:1px solid rgba(233,30,191,.2);}
.fit-header h3{margin:0;font-size:1.15rem;}
.fit-list{
list-style:none;
display:flex;
flex-direction:column;
gap:12px;
}
.fit-list li{
display:flex;
align-items:flex-start;
gap:10px;
font-size:.93rem;
color:var(--text-2);
line-height:1.5;
}
.fit-list li::before{
content:'→';
flex-shrink:0;
margin-top:1px;
font-size:.85rem;
}
.fit-card.fit-yes .fit-list li::before{color:var(--neonpink);}
.fit-card.fit-no .fit-list li::before{color:var(--text-muted);}
@media (max-width:768px){
.fit-grid{grid-template-columns:1fr;}
}
.subhero{
padding:140px 0 80px;
position:relative;
overflow:hidden;
}
.subhero-bg{
position:absolute;
inset:0;
background:
radial-gradient(ellipse 50% 80% at 70% 50%, rgba(36,99,235,.1) 0%, transparent 65%),
radial-gradient(ellipse 40% 60% at 20% 60%, rgba(233,30,191,.08) 0%, transparent 60%),
linear-gradient(rgba(7,8,15,.80), rgba(7,8,15,.92)),
url('/hero-sub.webp') center center / cover no-repeat;
}
.subhero-inner{
position:relative;
z-index:1;
}
.subhero h1{margin-bottom:20px;max-width:860px;}
.subhero p{font-size:1.1rem;max-width:60ch;}
.subhero .section-label{display:inline-block;margin-bottom:20px;}
.leistung-grid{
display:grid;
grid-template-columns:repeat(2, 1fr);
gap:24px;
}
.leistung-card{
background:var(--bg-card);
border:1px solid var(--border);
border-radius:var(--radius-lg);
padding:36px 32px;
display:flex;
flex-direction:column;
position:relative;
overflow:hidden;
transition:border-color .3s, transform .3s, box-shadow .3s;
text-decoration:none;
}
.leistung-card::before{
content:'';
position:absolute;
top:0;left:0;right:0;
height:3px;
opacity:0;
transition:opacity .3s;
background:var(--grad-primary);
}
.leistung-card:hover{
transform:translateY(-4px);
border-color:var(--border-blue);
box-shadow:var(--glow-blue);
color:inherit;
}
.leistung-card:hover::before{opacity:1;}
.leistung-card-top{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:16px;
margin-bottom:16px;
}
.leistung-card h2{
font-size:1.3rem;
margin-bottom:10px;
color:var(--text);
}
.leistung-card p{
font-size:.93rem;
color:var(--text-muted);
max-width:none;
flex-grow:1;
}
.leistung-card-footer{
display:flex;
align-items:center;
justify-content:space-between;
margin-top:24px;
padding-top:20px;
border-top:1px solid var(--border);
}
.leistung-price{
font-family:var(--font-display);
font-size:1.4rem;
font-weight:800;
background:var(--grad-primary);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
}
.leistung-link{
display:flex;
align-items:center;
gap:6px;
font-size:.87rem;
font-weight:600;
color:var(--blue-soft);
font-family:var(--font-display);
transition:color .2s, gap .2s;
}
.leistung-link:hover{color:var(--text);gap:10px;}
.leistung-link svg{width:16px;height:16px;transition:transform .2s;}
.leistung-link:hover svg{transform:translateX(3px);}
.leistung-card.full{grid-column:1 / -1;}
@media (max-width:768px){
.leistung-grid{grid-template-columns:1fr;}
.leistung-card.full{grid-column:auto;}
.subhero{padding:120px 0 60px;}
}
.hero-electric-card{
padding:32px 28px 28px;
}
.electric-logo-wrap{
position:relative;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:18px;
min-height:160px;
margin-bottom:24px;
}
#electric-canvas{
position:absolute;
inset:0;
width:100%;
height:100%;
z-index:1;
pointer-events:none;
}
.electric-logo-inner{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:center;
}
#electric-logo{
display:block;
width:240px;
height:auto;
filter:none;
position:relative;
z-index:2;
transition:filter .05s;
}
@keyframes logo-flash{
0%,100%{filter:none;}
8%{filter:brightness(0) invert(1) drop-shadow(0 0 12px #fff) drop-shadow(0 0 24px #E91EBF);}
16%{filter:none;}
30%{filter:brightness(0) invert(1) drop-shadow(0 0 8px #fff) drop-shadow(0 0 18px #4a7fff);}
40%{filter:none;}
}
.glitch-clone{
position:absolute;
top:0;left:0;
width:240px;
height:auto;
opacity:0;
pointer-events:none;
}
.glitch-r{
filter:sepia(1) saturate(10) hue-rotate(-20deg);
mix-blend-mode:screen;
z-index:3;
}
.glitch-b{
filter:sepia(1) saturate(10) hue-rotate(180deg);
mix-blend-mode:screen;
z-index:3;
}
.electric-pills{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:6px;
max-width:280px;
position:relative;
z-index:2;
}
.electric-pills .pill{
font-size:.72rem;
padding:4px 11px;
}
@keyframes glitch-shake{
0%,100%{transform:translate(0,0);}
5%{transform:translate(-4px, 1px) skewX(-1deg);}
10%{transform:translate(3px,-2px) skewX(.8deg);}
15%{transform:translate(-2px, 2px);}
20%{transform:translate(2px,-1px) skewX(-.5deg);}
25%{transform:translate(-1px, 1px);}
30%{transform:translate(0,0);}
}
@keyframes glitch-r{
0%,100%{opacity:0;transform:translate(0,0);}
5%{opacity:.55;transform:translate(-5px, 1px);clip-path:inset(20% 0 60% 0);}
8%{opacity:.4;transform:translate(3px,-1px);clip-path:inset(50% 0 10% 0);}
12%{opacity:.5;transform:translate(-4px, 2px);clip-path:inset(10% 0 40% 0);}
16%{opacity:0;}
40%{opacity:.3;transform:translate(-3px,0);clip-path:inset(30% 0 30% 0);}
43%{opacity:0;}
}
@keyframes glitch-b{
0%,100%{opacity:0;transform:translate(0,0);}
5%{opacity:.5;transform:translate(5px,-1px);clip-path:inset(60% 0 5% 0);}
9%{opacity:.4;transform:translate(-3px, 2px);clip-path:inset(10% 0 55% 0);}
13%{opacity:.55;transform:translate(4px,-2px);clip-path:inset(35% 0 25% 0);}
17%{opacity:0;}
41%{opacity:.28;transform:translate(3px,0);clip-path:inset(25% 0 40% 0);}
44%{opacity:0;}
}
.electric-logo-wrap.firing #electric-logo{
animation:glitch-shake .55s steps(1) forwards, logo-flash .55s ease-out forwards;
}
.electric-logo-wrap.firing .glitch-r{
animation:glitch-r .55s steps(1) forwards;
}
.electric-logo-wrap.firing .glitch-b{
animation:glitch-b .55s steps(1) forwards;
}
/* ── FAQ + Reviews Grid ───────────────────────────────────── */
.faq-reviews-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.reviews-col{display:flex;flex-direction:column;gap:16px}
.review-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:24px 22px;transition:border-color .3s,box-shadow .3s}
.review-card:hover{border-color:var(--border-mag);box-shadow:var(--glow-mag)}
.review-stars{font-size:1.1rem;color:#FD007F;letter-spacing:2px;margin-bottom:12px}
.review-text{font-size:.9rem;color:var(--text-2);font-style:italic;margin-bottom:14px;max-width:none}
.review-author{display:flex;align-items:center;gap:8px}
.review-name{font-family:var(--font-display);font-weight:700;font-size:.88rem;color:var(--text)}
.review-location{font-size:.8rem;color:var(--text-muted);background:rgba(255,255,255,.06);padding:2px 10px;border-radius:100px}
.review-card-proven{border-color:rgba(253,0,127,.2)}
.proven-badge{display:inline-flex;margin-top:14px;padding:10px 16px;background:rgba(217,237,66,.06);border-radius:var(--radius-sm);border:1px solid rgba(217,237,66,.4);transition:background .2s,border-color .2s}
.proven-badge:hover{background:rgba(217,237,66,.1);border-color:rgba(217,237,66,.7)}
.proven-badge img{height:32px;width:auto;display:block;filter:none}
@media(max-width:900px){.faq-reviews-grid{grid-template-columns:1fr;gap:48px}}