/* ============================= */
/* D&B SOFTWARE GLOBAL STYLES */
/* ============================= */

:root {

/* COLORS */

--color-bg:#0f1f2f;
--color-bg-soft:#14293f;

--color-primary:#c9b37c;
--color-primary-hover:#d8c79a;

--color-text:#ffffff;
--color-text-muted:#b8c3d1;

--color-border:rgba(255,255,255,0.08);

--color-card:rgba(255,255,255,0.04);


/* LAYOUT */

--container-width:1200px;

--radius-sm:8px;
--radius-md:12px;
--radius-lg:18px;

--transition:all .25s ease;

}


/* ============================= */
/* BASE RESET */
/* ============================= */

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

html{
scroll-behavior:smooth;
}

body{

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

background:var(--color-bg);

color:var(--color-text);

line-height:1.6;

-webkit-font-smoothing:antialiased;

}


/* ============================= */
/* GLOBAL ELEMENTS */
/* ============================= */

a{
text-decoration:none;
color:inherit;
}

img{
max-width:100%;
display:block;
}

ul{
list-style:none;
}

button{
font-family:inherit;
cursor:pointer;
border:none;
}


/* ============================= */
/* LAYOUT */
/* ============================= */

.container{

width:90%;
max-width:var(--container-width);

margin:auto;

}

.narrow{
max-width:700px;
margin:auto;
}

.section{

padding:100px 0;

}


/* ============================= */
/* TYPOGRAPHY */
/* ============================= */

h1{
font-size:56px;
line-height:1.1;
margin-bottom:20px;
}

h2{
font-size:38px;
margin-bottom:18px;
}

h3{
font-size:22px;
margin-bottom:10px;
}

p{
color:var(--color-text-muted);
font-size:16px;
}

.section-text{
margin-top:15px;
}

.section-tag{

font-size:12px;

letter-spacing:2px;

text-transform:uppercase;

color:var(--color-primary);

margin-bottom:10px;

display:block;

}

.eyebrow{
color:var(--color-primary);
font-size:13px;
letter-spacing:1.5px;
text-transform:uppercase;
margin-bottom:12px;
}


/* ============================= */
/* GRID SYSTEM */
/* ============================= */

.card-grid{

display:grid;
gap:30px;

}

.three-column{

grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

}

.two-column{

grid-template-columns:repeat(auto-fit,minmax(400px,1fr));

}

.blog-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

gap:30px;

}


/* ============================= */
/* CARDS */
/* ============================= */

.info-card{

background:var(--color-card);

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

border-radius:var(--radius-lg);

padding:30px;

transition:var(--transition);

}

.info-card:hover{

transform:translateY(-5px);

border-color:rgba(255,255,255,0.15);

}

.card-icon{

font-size:18px;

font-weight:600;

color:var(--color-primary);

margin-bottom:10px;

}


/* ============================= */
/* SPLIT LAYOUT */
/* ============================= */

.split-layout{

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:center;

}

.split-layout.reverse{
direction:rtl;
}

.split-layout.reverse *{
direction:ltr;
}

.panel-card{

background:var(--color-card);

padding:35px;

border-radius:var(--radius-lg);

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

}

.panel-card ul{
margin-top:15px;
}

.panel-card li{
margin-bottom:10px;
color:var(--color-text-muted);
}


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

.page-hero{

padding:120px 0 80px;

}

.page-hero-grid{

display:grid;

grid-template-columns:1fr 420px;

gap:80px;

align-items:center;

}

.page-hero-description{

margin-top:15px;

font-size:18px;

}


/* ============================= */
/* BUTTONS */
/* ============================= */

.btn{
  display:inline-block;
  padding:14px 26px;
  border-radius:var(--radius-md);
  font-weight:600;
  font-size:15px;
  transition:all 0.4s cubic-bezier(0.23, 1, 0.320, 1);
  position:relative;
  overflow:hidden;
}

.btn::before {
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255,255,255,0.15) 0%, transparent 80%);
  opacity:0;
  transition:opacity 0.3s ease;
  pointer-events:none;
}

.btn:hover::before {
  opacity:1;
}

.btn-primary{
  background:var(--color-primary);
  color:#111;
}

.btn-primary:hover{
  background:var(--color-primary-hover);
  transform:translateY(-3px);
  box-shadow:0 12px 24px rgba(201,179,124,0.25);
}

.btn-primary:active {
  transform:translateY(-1px);
}

.btn-secondary{
  border:1px solid var(--color-border);
  color:var(--color-text);
}

.btn-secondary:hover{
  background:rgba(255,255,255,0.08);
  border-color:rgba(201,179,124,0.4);
  transform:translateY(-3px);
  box-shadow:0 12px 24px rgba(0,0,0,0.2);
}

.btn-secondary:active {
  transform:translateY(-1px);
}


/* ============================= */
/* CTA SECTION */
/* ============================= */

.cta-box{

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

border-radius:var(--radius-lg);

padding:60px;

display:flex;

justify-content:space-between;

align-items:center;

gap:40px;

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

}

.cta-actions{
display:flex;
gap:20px;
flex-wrap:wrap;
}


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

.site-footer{

background:#0b1825;

margin-top:120px;

padding:70px 0 40px;

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

}

.footer-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(200px,1fr));

gap:40px;

}

.footer-brand p{
margin-top:10px;
}

.footer-links h4{

margin-bottom:10px;

}

.footer-links li{

margin-bottom:6px;

color:var(--color-text-muted);

}

.footer-links a:hover{
color:var(--color-primary);
}

.footer-bottom{

text-align:center;

margin-top:50px;

color:var(--color-text-muted);

font-size:14px;

}


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

@media(max-width:1000px){

.page-hero-grid{
grid-template-columns:1fr;
gap:40px;
}

.split-layout{
grid-template-columns:1fr;
}

.cta-box{
flex-direction:column;
text-align:center;
}

}

@media(max-width:700px){

h1{
font-size:40px;
}

h2{
font-size:28px;
}

.section{
padding:70px 0;
}

}