/* =========================
Tokens
========================= */
:root{
--gradient-line: linear-gradient(90deg,#00aae3,#7b12d4);
--gradient-bg: #dbe0ef;

--btn:#3363ff;
--btn-hover:#274fe0;

--icon-dark:#0000c3;
--icon-light:#b1e2f2;

--text:#111;
--muted:#505a6b;

--card:#fff;
--shadow:0 8px 30px rgba(0,0,0,.08);
--radius:12px;
--radius-sm:10px;

--font:'Oxygen','Roboto',system-ui,-apple-system,Segoe UI,Arial,sans-serif;
}



/* =========================
Base
========================= */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
margin:0;
font-family:var(--font);
color:var(--text);
background:#fff;
line-height:1.6;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
h1,h2,h3,p{ margin:0 0 .75rem }
h1{ font-size:clamp(1.8rem,1.2rem + 2.2vw,2.5rem) }
h2{ font-size:clamp(1.4rem,1.05rem + 1.2vw,2rem) }
h3{ font-size:20px }

.container{
width:min(1120px,92%);
margin-inline:auto;
padding:3rem 0;
}

.site-header{
  background: #000;
  height:80px;
  border-bottom:1px solid #e9ecef;
  position:relative;
  z-index:100;
}

.header-container {
  height:100%;
  max-width:1400px;
  margin:0 auto;
  padding:0 40px;
  display:flex;
  align-items:center;
}

.header-logo{
  height:30px;
  width:auto;
}

/* =========================
Hero (top section)
========================= */
.gradient-bg{ background:var(--gradient-bg) }

.hero{
position:relative;
overflow:hidden;
height:100vh;
background: #000; 
}

/* Right-side image — replace URL */
.hero-media{
position:absolute;  
z-index: 0;
inset: 0;
top: 0; left: 0; right: 0; bottom: 0;
background-image:url('images/bfg-hero-image.png');
background-size:cover;
background-position:center center;
background-repeat:no-repeat;
opacity:1;
height: auto;
filter:none;
}

/* Left-aligned card */
.hero-inner{
position:relative; z-index:2;
height:100vh;
display:flex; align-items:center; justify-content:flex-start;
padding-left:40px;
}

.hero-card{
background:rgba(96,96,96,0.9);
color:#fff;
border:1px solid rgba(0,0,0,0.10);
border-radius:18px;
box-shadow:0 16px 40px rgba(0,0,0,0.35);
padding:2rem;
text-align:left;
margin-left: -50px;
}
.hero-card h1{ color:#000; margin:0 0 .75rem }
.hero-card p{ color:#000; margin:0 0 1.25rem }

.gradient-line.hero-accent {
  display:block;
  width: 90px;
  height: 10px;
  background: linear-gradient(90deg,#00aae3,#3363ff);
  margin: .25rem 0 .75rem;
}




/* =========================
Responsive
========================= */
@media (min-width: 900px){
.hero-inner{ justify-content:flex-start; }
}

@media (max-width: 992px){
.grid-4{ grid-template-columns:repeat(2,1fr) }
.grid-3{ grid-template-columns:repeat(2,1fr) }
}

@media (max-width: 640px){
.container{ padding:2rem 0 }
.grid-4, .grid-3{ grid-template-columns:1fr }
.btn-primary{ width:100%; text-align:center }

.hero{ padding:28px 0 100px }
.hero-inner{ min-height:380px; justify-content:center; padding-left:0 }
.hero-card{ width:92% }
.integrate-inner{ padding:2rem 0 }
}

/* Tidy card width on desktop */
@media (min-width: 992px){
.integrate-inner .grid.grid-3 > .card{
width: 420px; /* adjust to match your comp */
}
}

/* Responsive: heading above cards on small screens */
@media (max-width: 900px){
.integrate-inner{ grid-template-columns: 1fr; align-items: start; }
.integrate-inner .grid.grid-3 > .card{ width: 900px; }
}


@media (min-width:768px){
  .integrate-inner{
    grid-template-columns: minmax(420px, 560px) minmax(520px, 780px);
    align-items: center;
    gap: clamp(16px, 4vw, 48px);
  }
}

/* ===== Force stack on mobile ===== */
@media (max-width: 767px) {
/* section: single column */
.integrate-inner {
grid-template-columns: 1fr !important;
align-items: start;
}

/* cards container: one column, no named areas, no right alignment */
.integrate-inner .grid.grid-3 {
display: grid !important;
grid-template-columns: 1fr !important;
grid-template-areas: none !important;
max-width: 100% !important;
justify-self: stretch !important;
margin: 0 !important;
gap: 16px;
}

/* CRITICAL: clear child placements from desktop layout */
.integrate-inner .grid.grid-3 > article {
grid-area: auto !important;
grid-column: auto !important;
grid-row: auto !important;
width: 100% !important;
}
}