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

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;background:#02060d;color:white;overflow-x:hidden}
a{text-decoration:none;color:inherit}
button{font-family:inherit}

:root{
--black:#02060d;
--panel:#06101a;
--gold:#d4af37;
--gold2:#ffd56a;
--white:#ffffff;
--muted:#b8c3d3;
--blue:#1e88e5;
--crimson:#8b1116;
}

.scripture-bar{
background:linear-gradient(90deg,#050b14,#16080a,#050b14);
color:var(--gold);
text-align:center;
font-size:13px;
letter-spacing:.5px;
padding:10px 5%;
border-bottom:1px solid rgba(212,175,55,.18);
}

.nav{
position:sticky;
top:0;
height:86px;
padding:0 5%;
display:flex;
justify-content:space-between;
align-items:center;
background:rgba(2,6,13,.94);
backdrop-filter:blur(18px);
border-bottom:1px solid rgba(212,175,55,.16);
z-index:9999;
}

.brand,.footer-brand{
display:flex;
align-items:center;
gap:14px;
}

.mark{
width:54px;
height:54px;
border:1px solid rgba(212,175,55,.85);
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:30px;
font-weight:900;
color:var(--gold2);
background:
radial-gradient(circle,rgba(139,17,22,.38),rgba(255,255,255,.03) 55%);
box-shadow:0 0 34px rgba(139,17,22,.34),0 0 22px rgba(212,175,55,.16);
}

.brand h3,.footer-brand h3{
font-size:24px;
letter-spacing:7px;
}

.brand p,.footer-brand p{
font-size:10px;
letter-spacing:4px;
color:var(--gold);
}

.nav-links{
display:flex;
gap:28px;
font-size:13px;
text-transform:uppercase;
letter-spacing:1px;
}

.nav-links a{color:#d7dce6}
.nav-links a:hover{color:var(--gold2)}

.nav-actions{
display:flex;
align-items:center;
gap:14px;
}

.phone-icon{
width:48px;
height:48px;
border-radius:50%;
border:1px solid rgba(212,175,55,.45);
display:grid;
place-items:center;
font-size:22px;
background:rgba(255,255,255,.025);
}

.quote-btn,.gold-btn{
background:linear-gradient(135deg,#ffe08a,#d4af37,#a97816);
color:#06101a;
border:none;
padding:15px 24px;
border-radius:999px;
font-weight:900;
cursor:pointer;
box-shadow:0 14px 45px rgba(212,175,55,.18);
}

.quote-btn:hover,.gold-btn:hover,.outline-btn:hover{
transform:translateY(-3px);
}

.outline-btn{
background:rgba(255,255,255,.05);
color:white;
border:1px solid rgba(212,175,55,.55);
padding:15px 24px;
border-radius:999px;
font-weight:900;
display:inline-flex;
align-items:center;
justify-content:center;
transition:.25s ease;
}

.hero{
min-height:92vh;
display:flex;
align-items:center;
padding:110px 5%;
background:
linear-gradient(90deg,rgba(2,6,13,.97),rgba(2,6,13,.72),rgba(2,6,13,.35)),
url("https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?auto=format&fit=crop&w=2200&q=85");
background-size:cover;
background-position:center;
position:relative;
}

.hero::after{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(circle at 78% 18%,rgba(139,17,22,.28),transparent 22%),
radial-gradient(circle at 80% 20%,rgba(30,136,229,.18),transparent 25%),
linear-gradient(to bottom,transparent 72%,#02060d);
}

.hero-content{
position:relative;
z-index:2;
max-width:900px;
}

.tagline{
color:var(--gold2);
font-size:13px;
font-weight:900;
text-transform:uppercase;
letter-spacing:3px;
margin-bottom:18px;
}

.hero h1{
font-family:'Playfair Display',serif;
font-size:clamp(58px,8vw,104px);
line-height:1;
margin-bottom:26px;
}

.hero h1 span{color:var(--gold2)}

.subtext{
font-size:20px;
line-height:1.8;
color:#c8d2df;
max-width:800px;
}

.hero-badges{
display:flex;
flex-wrap:wrap;
gap:12px;
margin-top:32px;
max-width:980px;
}

.hero-badges div{
display:flex;
align-items:center;
justify-content:center;
gap:10px;
min-width:155px;
height:60px;
padding:0 16px;
background:rgba(255,255,255,.04);
border:1px solid rgba(212,175,55,.28);
border-radius:14px;
font-weight:800;
font-size:14px;
color:#fff;
backdrop-filter:blur(8px);
transition:.25s ease;
}

.hero-badges div:hover{
transform:translateY(-2px);
border-color:var(--gold);
background:rgba(139,17,22,.16);
}

.hero-badges span{
display:block;
line-height:1.2;
text-align:center;
}

.buttons{
display:flex;
gap:16px;
flex-wrap:wrap;
margin-top:34px;
}

.services,.who-we-serve,.process,.why-valoren,.contact{
padding:95px 5%;
}

.center{text-align:center}

.services h2,.who-we-serve h2,.process h2,.why-valoren h2,.quote-banner h2,.contact h2{
font-family:'Playfair Display',serif;
font-size:clamp(36px,5vw,62px);
text-align:center;
margin-bottom:24px;
}

.section-text{
max-width:900px;
margin:0 auto;
text-align:center;
color:var(--muted);
line-height:1.8;
font-size:18px;
}

.division-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:22px;
margin-top:45px;
}

.division-card{
background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
border:1px solid rgba(212,175,55,.16);
border-radius:20px;
padding:28px;
min-height:390px;
display:flex;
flex-direction:column;
justify-content:space-between;
transition:.28s ease;
position:relative;
overflow:hidden;
}

.division-card::before{
content:"";
position:absolute;
inset:0;
background:radial-gradient(circle at top right,rgba(139,17,22,.14),transparent 38%);
opacity:.8;
pointer-events:none;
}

.division-card:hover{
transform:translateY(-7px);
border-color:rgba(212,175,55,.55);
box-shadow:0 24px 60px rgba(0,0,0,.28);
}

.division-card h3{
position:relative;
font-size:22px;
margin-bottom:20px;
color:white;
}

.division-card ul{
position:relative;
list-style:none;
margin-bottom:25px;
}

.division-card li{
color:#c7d1df;
padding:8px 0;
border-bottom:1px solid rgba(255,255,255,.06);
font-size:15px;
}

.division-card button{
position:relative;
width:100%;
padding:14px 18px;
border-radius:999px;
background:rgba(212,175,55,.12);
color:var(--gold2);
font-weight:900;
cursor:pointer;
border:1px solid rgba(212,175,55,.35);
}

.division-card button:hover{
background:var(--gold);
color:#06101a;
}

.who-we-serve{
background:#040b15;
}

.serve-grid,.process-grid,.why-grid,.contact-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
margin-top:42px;
}

.serve-card,.process-grid div,.why-card,.contact-card{
padding:30px;
border-radius:18px;
background:rgba(255,255,255,.035);
border:1px solid rgba(255,255,255,.08);
}

.serve-card h3,.why-card h3,.contact-card h3{
margin-bottom:12px;
color:var(--gold2);
font-size:20px;
}

.serve-card p,.process-grid p,.why-card p,.contact-card p{
color:var(--muted);
line-height:1.7;
}

.process-grid span{
font-size:44px;
font-weight:900;
color:var(--gold2);
}

.process-grid h3{
margin:15px 0;
}

.quote-banner{
padding:80px 5%;
background:
radial-gradient(circle at center,rgba(139,17,22,.22),transparent 35%),
#030914;
}

.quote-banner-content{
max-width:950px;
margin:auto;
text-align:center;
padding:50px;
border-radius:24px;
border:1px solid rgba(212,175,55,.25);
background:rgba(255,255,255,.035);
}

.quote-banner-content p{
color:var(--muted);
font-size:18px;
line-height:1.8;
margin-bottom:30px;
}

footer{
background:#01040a;
border-top:1px solid rgba(255,255,255,.08);
}

.footer-grid{
display:grid;
grid-template-columns:1.5fr 1fr 1.4fr;
gap:40px;
padding:60px 5%;
}

.footer-text{
color:var(--muted);
line-height:1.7;
max-width:360px;
}

footer h4{
color:var(--gold2);
margin-bottom:16px;
font-size:18px;
}

footer p{
color:#c8d2df;
margin-bottom:9px;
line-height:1.5;
}

.socials{
display:flex;
gap:12px;
margin-top:24px;
}

.socials a{
width:46px;
height:46px;
border-radius:50%;
border:1px solid rgba(212,175,55,.45);
display:grid;
place-items:center;
font-weight:900;
font-size:22px;
}

.footer-scripture{
text-align:center;
color:var(--gold);
padding:18px 5%;
border-top:1px solid rgba(212,175,55,.12);
font-size:14px;
letter-spacing:.4px;
}

.copy{
text-align:center;
color:#7d8796;
padding:20px 5%;
font-size:13px;
}

.floating-quote{
position:fixed;
right:22px;
bottom:22px;
z-index:9999;
}

.floating-quote button{
background:linear-gradient(135deg,#ffe08a,#d4af37,#a97816);
color:#06101a;
border:none;
padding:16px 22px;
border-radius:999px;
font-weight:900;
cursor:pointer;
box-shadow:0 15px 45px rgba(212,175,55,.28);
}

.quote-modal{
position:fixed;
inset:0;
display:none;
justify-content:center;
align-items:center;
background:rgba(0,0,0,.84);
z-index:99999;
padding:22px;
}

.quote-modal.active{
display:flex;
}

.quote-container{
width:100%;
max-width:650px;
background:#06101a;
border-radius:22px;
padding:38px;
border:1px solid rgba(212,175,55,.38);
box-shadow:0 0 70px rgba(139,17,22,.24);
position:relative;
}

.close-btn{
position:absolute;
top:18px;
right:20px;
background:none;
border:none;
color:white;
font-size:24px;
cursor:pointer;
}

.quote-container h2{
font-family:'Playfair Display',serif;
font-size:40px;
margin-bottom:10px;
}

.quote-container p{
color:var(--muted);
line-height:1.6;
margin-bottom:24px;
}

#quoteForm{
display:flex;
flex-direction:column;
gap:14px;
}

.form-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}

#quoteForm input,#quoteForm select,#quoteForm textarea{
background:#0d1828;
border:1px solid rgba(255,255,255,.10);
padding:15px;
border-radius:10px;
color:white;
font-family:inherit;
font-size:15px;
}

#quoteForm input:focus,#quoteForm select:focus,#quoteForm textarea:focus{
outline:none;
border-color:var(--gold);
}

#quoteForm button{
background:linear-gradient(135deg,#ffe08a,#d4af37,#a97816);
color:#06101a;
border:none;
padding:16px;
border-radius:10px;
font-weight:900;
cursor:pointer;
}

#successMessage{
display:none;
text-align:center;
padding:25px 10px;
}

#successMessage h3{
font-size:30px;
color:var(--gold2);
margin-bottom:10px;
}

@media(max-width:1150px){
.division-grid,.serve-grid,.process-grid,.why-grid,.contact-grid{
grid-template-columns:repeat(2,1fr);
}

.nav-links{
display:none;
}
}

@media(max-width:760px){
.scripture-bar{
font-size:11px;
padding:8px 4%;
}

.nav{
height:78px;
}

.brand h3{
font-size:18px;
letter-spacing:5px;
}

.brand p{
font-size:9px;
letter-spacing:3px;
}

.phone-icon{
display:none;
}

.quote-btn{
padding:12px 15px;
font-size:13px;
}

.hero{
padding:90px 5%;
min-height:85vh;
}

.hero h1{
font-size:52px;
}

.subtext{
font-size:17px;
}

.hero-badges,.division-grid,.serve-grid,.process-grid,.why-grid,.contact-grid,.footer-grid,.form-row{
grid-template-columns:1fr;
}

.hero-badges div{
width:100%;
}

.division-card{
min-height:auto;
}

.services,.who-we-serve,.process,.why-valoren,.contact{
padding:70px 5%;
}

.quote-banner-content{
padding:32px 22px;
}

.footer-grid{
padding:45px 5%;
}

.floating-quote button{
padding:14px 18px;
font-size:13px;
}
}