/* --- Theme --- */
:root{
  --bg:#ffffff;
  --fg:#0a0a0a;
  --gray: #f5f5f5;
  --muted:#f6f6f6;
  --line:#eaeaea;
  --hover:#111;
  --accent:#000;
  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --header-h: 72px;
  --transition: all 0.3s ease;
}

*{ box-sizing:border-box; }
html,body{ height:100%; scroll-behavior:smooth; }

body{
  margin:0;
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--fg); background:var(--bg); line-height:1.6;
  padding-top: var(--header-h); 
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
.container{ width:min(1140px,92%); margin-inline:auto; }
.narrow{ width:min(820px,92%); margin-inline:auto; }

/* --- Header --- */
.site-header{
  position: fixed;                  
  top: 0; left: 0; right: 0;
  padding: 5px 0;
  z-index: 1000;
  box-shadow: var(--shadow);
  background: rgba(255,255,255,.9);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid #eaeaea;
  min-height: var(--header-h);
}

.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding:14px 0; }
.logo-img{ height:38px; width:auto; }

.nav{ display:flex; align-items:center; gap:24px; }
.nav ul{ list-style:none; display:flex; gap:20px; margin:0; padding:0; }
.nav a{ padding:8px 6px; border-radius:10px; transition:background .2s ease; }
.nav a:hover{ background:var(--muted); }
.nav .is-active{ font-weight:700; }


.btn{
  display:inline-block; padding:10px 16px; border-radius:999px;
  border:1px solid var(--fg); font-weight:600; transition:transform .15s, background .15s, color .15s, box-shadow .15s;
}
.btn:hover{ transform:translateY(-1px); box-shadow:var(--shadow); }
.btn-black{ background:var(--accent); color:#fff; border-color:var(--accent); }
.btn-black:hover{ background:var(--hover); }

/* Hamburger */
.nav-toggle{ display:none; }
.hamburger{ display:none; cursor:pointer; padding:6px 8px; }
.hamburger span{ display:block; width:22px; height:2px; background:#000; margin:5px 0; transition:.2s; }

/* --- Hero --- */
.section{ padding:84px 0; }
.section-tight{ padding:72px 0 56px; }

.hero{ 
  padding: clamp(60px, 10vw, 100px) 0;
  text-align: center;
  background: linear-gradient(135deg, var(--gray) 0%, var(--bg) 100%);
  min-height: 60vh;
  display: flex;
  align-items: center;
}

.hero h1{ 
  font-size:clamp(2rem,4.6vw,3.2rem); 
  line-height:1.1; 
  letter-spacing:-.02em; 
  margin:0 0 12px; 
}

.subtext{ color:#555; max-width:720px; margin:0 auto 24px; font-size:1.05rem; }

/* --- Section Heads --- */
.section-head h2{ font-size:clamp(1.6rem,3.4vw,2.2rem); margin:0 0 8px; }
.section-head.center{ text-align:center; }
.section-head p{ color:#555; margin:0 0 24px; }

/* --- Cards (Solutions) --- */
.cards{
  display:grid; gap:18px;
  grid-template-columns:repeat(4,1fr);
}
.card{
  border:2px solid transparent; 
  border-radius:var(--radius); 
  background:#333333; 
  padding:22px;
  display:flex; 
  flex-direction:column; 
  gap:12px; 
  transition:transform .2s, box-shadow .2s, border-color .2s;
  margin: 8px 0 10px; 
}
.card:hover{ 
  transform:translateY(-8px); 
  box-shadow:var(--shadow); 
  border-color:#000000; 
}

.card .icon{ 
  width:60px; 
  height:60px; 
  border-radius:14px; 
  display:grid; 
  place-items:center; 
  background:#363434; 
}

.card .icon img{ 
  width:60px; 
  height:60px; 
  object-fit:contain; 
  filter:grayscale(100%); 
  transition:filter .2s ease; 
}

.card:hover .icon img{ filter:none; }
.card h3{ 
  font-size:1.1rem; 
  margin:2px 0; 
  color:#e2dede;
}
.card ul{ 
  color:#e2dede; 
  margin: 0;                           /* remove extra left margin */
  padding: 0;                          /* remove default list padding */
  list-style: none;                    /* we'll draw our own bullets */
}

.card li{ 
  position: relative;
  margin: 10px 0;
  padding-left: 0;                     /* text starts exactly where h3 starts */
  color: #ffffff;
}

/* “Hanging” bullet that sits in the left gutter, so text aligns with h3 */
.cards .card li::before{
  content: "";
  position: absolute;
  left: -10px;                         /* tweak -12 to -16px to taste */
  top: 0.65em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d7d7d7;                    /* bullet color */
}

/* --- Quote Banner --- */
.quote{ 
  background:#000000; 
  color:#fff; 
  padding: clamp(10px, 7vw, 50px) 20px;
  text-align:center; 
}

.quote p{ 
    font-weight: 700;
    max-width: 1200px;
    margin: 0 auto;
    line-height: 1.4;
    font-size: clamp(10px, 3.5vw, 25px);
}

/* --- Process --- */
.process{
  list-style:none;
  margin:0;
  padding:0;                         /* header spacing handled by .section */
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(24px, 4vw, 48px);
  align-items:start;
  text-align:center;
  justify-items:center;
  margin-top: 40px !important; 
}

.step{
  background:transparent;            /* remove card look */
  border:0;                          /* override previous border */
  padding:0;                         /* tighter vertical rhythm */
}

.step-num{
  width:64px;
  height:64px;
  border-radius:50%;
  background:#000;
  color:#fff;
  display:grid;
  place-items:center;
  font-weight:800;
  font-size:1.1rem;
  box-shadow:0 10px 24px rgba(0,0,0,.12);
  transition:transform .25s ease, box-shadow .25s ease;
  margin: 0 auto 34px;  /* more space below the number */
}
.step:hover .step-num{
  transform:translateY(-4px);
  box-shadow:0 16px 32px rgba(0,0,0,.18);
}

.step h3{
  margin: clamp(8px, 1.2vw, 12px) 0 10px;   /* ensure some top margin too */
  margin-top: 18px !important;
  font-size:clamp(1.1rem,2.2vw,1.4rem);  /* bold, readable */
  letter-spacing:-0.01em;
}

.step p{
  margin:0 auto;
  color:#6b6b6b;                        /* softer gray, like screenshot */
  max-width:320px;                       /* keeps lines tidy under title */
  line-height:1.6;
}

/* Responsive */
@media (max-width:1024px){
  .process{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .process{ grid-template-columns:1fr; }
}


/* --- Benefits --- */
.section-muted{ background:var(--muted); }
.section-head { text-align: center; }
.benefits{
  display:grid; gap:16px;
  grid-template-columns:repeat(3,1fr);
}
.benefit{
  background:#e2e2e2; 
  color:#111111; 
  border-radius:20px; 
  padding:20px; 
  transition:transform .2s, box-shadow .2s;
}
.benefit:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(0,0,0,.25); }
.benefit h4{ margin:0 0 6px; }

/* --- CTA --- */
.cta{ 
  text-align:center; 
  background:#fff;                 /* or var(--bg) */
  border-top:1px solid var(--line);
  padding: 72px 0;      
}
.cta-inner{ display:grid; place-items:center; gap:8px; }

.cta h2, .cta h3 { 
  font-size: clamp(1.4rem, 3.2vw, 1.9rem); 
  margin: 0; 
}

/* --- Forms --- */
.form-card{ 
  max-width:880px; 
  margin:0 auto;
  background:#ebeaea; 
}
.form-title{ margin:0 0 12px; font-size:1.1rem; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
label{ display:grid; gap:8px; font-weight:600; color:#111; }
input, textarea, select{
  border:1px solid var(--line); background:#fff; border-radius:12px; padding:12px 14px; font:inherit;
  transition:border-color .15s, box-shadow .15s;
}
input:focus, textarea:focus, select:focus{
  outline:none; border-color:#aaa; box-shadow:0 0 0 4px rgba(0,0,0,.06);
}
.form-actions{ display:flex; align-items:center; gap:12px; margin-top:12px; }
.form-status{ font-size:.95rem; color:#555; }

@media (max-width: 768px){
  .form-row{ grid-template-columns:1fr; }
}

/* optional extras I mentioned */
.form-title{ margin:0 0 12px; font-size:1.1rem; }
.check{ display:flex; gap:10px; align-items:center; font-weight:500; color:#333; }

/* --- Footer --- */
.site-footer{ border-top:1px solid var(--line); background:#fff; }
.footer-inner{ display:flex; justify-content:space-between; gap:24px; padding:26px 0; }
.footer-bottom{ border-top:1px solid var(--line); padding:14px 0 26px; text-align:center; color:#666; }
.social{ list-style:none; display:flex; gap:14px; margin:0; padding:0; }

/* ===== Footer (grid layout + polish) ===== */
.footer-grid{
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr 1.4fr;   /* logo | links | company | cta */
  gap: 28px;
  padding: 32px 0;
  align-items:start;
}

.footer-brand .footer-logo img{
  height: 23px;
  width: auto;
  display: block;
  margin-bottom: 10px;
}
.footer-tagline{ color:#666; margin:3px 0 0; max-width: 300px; }

.footer-col h4,
.footer-cta h4{ margin:0 0 10px; font-size:1rem; }

.footer-col ul{ list-style:none; margin:0; padding:0; }
.footer-col li{ margin:8px 0; }
.footer-col a{ color:inherit; }
.footer-col a:hover{ text-decoration:underline; }

.footer-cta p{ color:#666; margin:0 0 10px; max-width: 320px; }
.footer-cta .btn{ margin-top: 6px; }

.footer-social{
  list-style:none; display:flex; gap:12px; margin:14px 0 0; padding:0;
}
.icon-btn{
  display:inline-grid; place-items:center;
  width:36px; height:36px; border-radius:50%;
  background:#f5f5f5; color:#111; border:1px solid #eaeaea;
  transition: transform .15s, background .15s;
}
.icon-btn:hover{ transform:translateY(-1px); background:#eee; }



/* Responsive */
@media (max-width: 900px){
  .footer-grid{
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px){
  .footer-grid{
    grid-template-columns: 1fr;
  }
  .footer-cta{ border-top:1px solid var(--line); padding-top:16px; }
}


/* --- Responsive --- */
@media (max-width: 1024px){
  .cards{ grid-template-columns:repeat(2,1fr); }
  .process{ grid-template-columns:repeat(2,1fr); }
  .benefits{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 768px){
  .hamburger{ display:block; }
  .nav{
    position:fixed; inset:var(--header-h) 0 auto 0; background:#fff; border-bottom:1px solid var(--line);
    padding:14px 4%; display:none; flex-direction:column; gap:14px;
  }
  .nav ul{ flex-direction:column; gap:8px; }
  .nav .btn{ align-self:flex-start; }

  .nav-toggle:checked ~ .hamburger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle:checked ~ .hamburger span:nth-child(2){ opacity:0; }
  .nav-toggle:checked ~ .hamburger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .nav-toggle:checked ~ .nav{ display:flex; }

  .header-inner{ padding:12px 0; }
  .form-row{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .cards{ grid-template-columns:1fr; }
  .process{ grid-template-columns:1fr; }
  .benefits{ grid-template-columns:1fr; }
}