/* =====================================
   BRADION AI WEBSITE
   PREMIUM DARK DESIGN
===================================== */


/* RESET */

*{

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

}


html{

scroll-behavior:smooth;

}



body{

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

background:#070707;

color:#ffffff;

line-height:1.6;

overflow-x:hidden;

}




h1,h2,h3,h4{

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

}



a{

text-decoration:none;

color:inherit;

}



p{

color:#a1a1aa;

}





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


.header{

position:fixed;

top:0;

width:100%;

z-index:999;

background:rgba(7,7,7,.85);

backdrop-filter:blur(15px);

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

}



.navbar{

max-width:1200px;

margin:auto;

height:90px;

display:flex;

align-items:center;

justify-content:space-between;

padding:0 25px;

}




.logo{

font-family:"Space Grotesk";

font-size:32px;

font-weight:700;

letter-spacing:-1px;

}



.logo span{

color:#d4af37;

}






.nav-links{

display:flex;

gap:35px;

list-style:none;

align-items:center;

}



.nav-links a{

font-size:15px;

color:#d4d4d8;

transition:.3s;

}



.nav-links a:hover{

color:#ffffff;

}








/* DROPDOWN */


.dropdown{

position:relative;

}



.dropdown-menu{

position:absolute;

top:35px;

left:0;

width:240px;

background:#111111;

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

border-radius:12px;

padding:10px;

opacity:0;

visibility:hidden;

transform:translateY(10px);

transition:.3s;

box-shadow:0 20px 50px rgba(0,0,0,.6);

}




.dropdown-menu a{

display:block;

padding:12px 15px;

border-radius:8px;

}



.dropdown-menu a:hover{

background:#1c1c1c;

color:#d4af37;

}





.dropdown:hover .dropdown-menu{

opacity:1;

visibility:visible;

transform:translateY(0);

}








.nav-button{

background:#d4af37;

color:#080808!important;

padding:13px 25px;

border-radius:12px;

font-weight:700;

transition:.3s;

}



.nav-button:hover{

background:#ffffff;

transform:translateY(-2px);

}









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


.hero{

min-height:100vh;

padding:160px 8% 100px;

display:flex;

align-items:center;

justify-content:space-between;

gap:70px;

position:relative;

}



.hero::before{

content:"";

position:absolute;

width:500px;

height:500px;

background:#d4af37;

opacity:.08;

filter:blur(150px);

top:100px;

right:100px;

}





.hero-content{

max-width:650px;

}




.badge{

display:inline-block;

padding:8px 18px;

border-radius:30px;

background:rgba(212,175,55,.12);

border:1px solid rgba(212,175,55,.3);

color:#d4af37;

font-size:14px;

margin-bottom:25px;

}






.hero h1{

font-size:70px;

line-height:1.05;

letter-spacing:-3px;

margin-bottom:25px;

}



.hero h1 span{

color:#d4af37;

}



.hero p{

font-size:19px;

max-width:600px;

margin-bottom:35px;

}






.hero-buttons{

display:flex;

gap:20px;

}




.primary-button{

display:inline-flex;

align-items:center;

justify-content:center;

background:#d4af37;

color:#080808;

padding:16px 30px;

border-radius:12px;

font-weight:700;

transition:.3s;

}



.primary-button:hover{

background:#ffffff;

transform:translateY(-3px);

}




.secondary-button{

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

padding:16px 30px;

border-radius:12px;

transition:.3s;

}



.secondary-button:hover{

border-color:#d4af37;

color:#d4af37;

}








/* STATISTIEKEN */


.statistics{

display:flex;

gap:45px;

margin-top:55px;

}



.statistics div{

display:flex;

flex-direction:column;

}



.statistics strong{

font-size:35px;

font-family:"Space Grotesk";

color:white;

}



.statistics span{

color:#888;

font-size:14px;

}



.









/* =====================================
   SECTIES
===================================== */


.section{

padding:120px 8%;

}



.dark-section{

background:#0d0d0d;

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

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

}





.section-title{

text-align:center;

max-width:800px;

margin:0 auto 60px;

}



.section-title span{

color:#d4af37;

font-size:14px;

text-transform:uppercase;

letter-spacing:2px;

font-weight:700;

}



.section-title h2{

font-size:48px;

line-height:1.15;

margin:15px 0 20px;

letter-spacing:-1px;

}



.section-title p{

font-size:17px;

}









/* =====================================
   KAARTEN
===================================== */


.cards{

max-width:1200px;

margin:auto;

display:grid;

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

gap:25px;

}



.card,
.service-card{

background:#111111;

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

border-radius:20px;

padding:35px;

transition:.35s;

}




.card:hover,
.service-card:hover{

transform:translateY(-8px);

border-color:#d4af37;

box-shadow:

0 20px 50px rgba(0,0,0,.5);

}




.card h3,
.service-card h3{

font-size:25px;

margin-bottom:15px;

}



.card p,
.service-card p{

font-size:15px;

}





.service-icon{

font-size:40px;

margin-bottom:20px;

}









/* =====================================
   STAPPEN
===================================== */


.steps{

max-width:1100px;

margin:auto;

display:grid;

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

gap:30px;

}



.steps div{

background:#111111;

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

padding:35px;

border-radius:20px;

}




.steps strong{

font-size:45px;

color:#d4af37;

font-family:"Space Grotesk";

}



.steps h3{

font-size:25px;

margin:15px 0;

}









/* =====================================
   CASE
===================================== */


.case-box{

max-width:900px;

margin:auto;

background:#111111;

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

padding:45px;

border-radius:25px;

}



.case-box h3{

font-size:30px;

margin-bottom:30px;

}



.case-item{

padding:20px 0;

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

}



.case-item strong{

color:#d4af37;

display:block;

margin-bottom:8px;

}









/* =====================================
   PRIJZEN
===================================== */


.pricing-container{

max-width:900px;

margin:auto;

display:grid;

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

gap:30px;

align-items:stretch;

}





.pricing-card{

position:relative;

background:#111111;

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

border-radius:25px;

padding:40px 35px;

display:flex;

flex-direction:column;

transition:.35s;

}





.pricing-card:hover{

transform:translateY(-10px);

border-color:#d4af37;

box-shadow:

0 30px 60px rgba(0,0,0,.5);

}





.featured-card{

border:2px solid #d4af37;

background:

linear-gradient(
180deg,
rgba(212,175,55,.12),
#111111
);

}





.recommended{

position:absolute;

top:20px;

right:20px;

background:#d4af37;

color:#080808;

padding:7px 15px;

border-radius:30px;

font-size:11px;

font-weight:800;

}





.pricing-header{

padding-bottom:25px;

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

}



.pricing-header h3{

font-size:32px;

margin-bottom:10px;

}





.price-area{

margin:30px 0;

}



.price-area > span{

color:#999;

font-size:14px;

}



.price{

display:flex;

align-items:flex-end;

gap:8px;

}



.price strong{

font-size:60px;

font-family:"Space Grotesk";

line-height:1;

}



.price small{

color:#999;

font-size:16px;

padding-bottom:8px;

}
/* =====================================
   PRIJZEN VERVOLG
===================================== */


.setup-box{

background:#080808;

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

border-radius:15px;

padding:20px;

margin-bottom:30px;

}



.setup-box p{

font-size:13px;

color:#999;

margin-bottom:5px;

}



.setup-box strong{

display:block;

font-size:28px;

font-family:"Space Grotesk";

color:#d4af37;

}



.setup-box span{

font-size:12px;

color:#777;

}







.features{

flex-grow:1;

}



.features h4{

color:#d4af37;

font-size:13px;

letter-spacing:1px;

text-transform:uppercase;

margin-bottom:15px;

}



.features ul{

list-style:none;

}



.features li{

padding:10px 0;

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

color:#d4d4d8;

font-size:15px;

}





.pricing-button{

margin-top:35px;

background:#d4af37;

color:#080808;

padding:16px;

border-radius:12px;

text-align:center;

font-weight:700;

transition:.3s;

}



.pricing-button:hover{

background:white;

transform:translateY(-3px);

}









/* =====================================
   CONTACT
===================================== */


.contact-box{

max-width:700px;

margin:auto;

background:#111111;

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

padding:45px;

border-radius:25px;

display:flex;

flex-direction:column;

gap:20px;

align-items:center;

text-align:center;

}



.contact-box a:not(.primary-button){

font-size:18px;

color:#d4d4d8;

transition:.3s;

}



.contact-box a:hover{

color:#d4af37;

}








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


footer{

background:#050505;

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

padding:70px 8% 30px;

}



.footer-content{

max-width:1200px;

margin:auto;

display:grid;

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

gap:40px;

}



.footer-content h2{

font-size:32px;

margin-bottom:15px;

}



.footer-content h3{

margin-bottom:20px;

font-size:18px;

}



.footer-content a{

display:block;

color:#999;

margin-bottom:10px;

transition:.3s;

}



.footer-content a:hover{

color:#d4af37;

}



.copyright{

max-width:1200px;

margin:50px auto 0;

padding-top:25px;

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

text-align:center;

color:#777;

font-size:14px;

}








/* =====================================
   ANIMATIES
===================================== */


.hidden{

opacity:0;

transform:translateY(40px);

transition:.8s ease;

}



.show{

opacity:1;

transform:translateY(0);

}









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



@media(max-width:1100px){


.nav-links{

display:none;

}



.hero{

flex-direction:column;

text-align:center;

}



.hero h1{

font-size:52px;

}



.hero p{

margin-left:auto;

margin-right:auto;

}



.statistics{

justify-content:center;

}



.ai-demo{

width:100%;

max-width:450px;

}



.cards{

grid-template-columns:1fr;

max-width:500px;

}



.steps{

grid-template-columns:1fr;

max-width:500px;

}



.pricing-container{

grid-template-columns:1fr;

max-width:500px;

}



.footer-content{

grid-template-columns:1fr;

}



}





@media(max-width:600px){



.section{

padding:80px 5%;

}



.hero{

padding:130px 5% 80px;

}



.hero h1{

font-size:40px;

letter-spacing:-1px;

}



.hero-buttons{

flex-direction:column;

}



.statistics{

flex-direction:column;

gap:25px;

}



.section-title h2{

font-size:35px;

}



.pricing-card{

padding:30px 25px;

}



.price strong{

font-size:48px;

}



}