/* =========================
   Cizo Base Theme
   ========================= */
:root{
  --bg:#fffdf9;
  --ink:#2d2e2e;
  --ink-strong:#222;
  --muted:#6b6b6b;

  --brand:#3d4592;
  --brand-2:#f8f5ee;

  --surface:#f8f5ee;
  --border:#e9e5de;
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --radius:16px;

  /* Rose palette */
  --rose-50:#fff6f6;
  --rose-100:#ffecec;
  --rose-200:#ffd7d7;
  --rose-400:#ff6b6b;
  --rose-500:#ff4b4b;

  /* Type scale */
  --h1: clamp(32px, 5vw, 50px);
  --h2: clamp(24px, 3.2vw, 34px);
  --h3: clamp(20px, 2.6vw, 26px);
  --h4: clamp(18px, 2.2vw, 22px);
  --h5: 18px;
  --h6: 16px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.55;
}

/* Headings & shared title styling */
h1, h2, h3, h4, h5, h6,
.logo h1, .brand h1, .section-title h2{
  font-family:"Epilogue", Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:800; letter-spacing:.2px; line-height:1.08; margin:0 0 .5rem; color:var(--ink);
}
h1{font-size:var(--h1)}
h2{font-size:var(--h2)}
h3{font-size:var(--h3)}
h4{font-size:var(--h4)}
h5{font-size:var(--h5)}
h6{font-size:var(--h6)}

.container{max-width:1120px;margin:0 auto;padding:0 20px}
.center{text-align:center}
.muted{color:var(--muted)}
.highlight{color:var(--brand-2)}
.pill{
  display:inline-flex;align-items:center;gap:.5rem;background:var(--rose-100);
  color:var(--ink-strong); border:1px solid var(--rose-200); border-radius:999px;
  padding:.35rem .8rem; font-weight:600;
}

/* =========================
   Header / Nav (Sticky always visible)
   ========================= */
.site-header.header {
  position: fixed; /* instead of sticky */
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999; /* stays above everything */
  background: rgba(255, 253, 249, 0.95);
  backdrop-filter: saturate(1.2) blur(8px);
  -webkit-backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.05);
  height: 64px;
}

/* Add body padding to prevent content jump */
body {
  padding-top: 64px; /* matches header height */
}


/* Header styles */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.logo h1 {
  margin: 0;
  font-size: 1.75rem;
}

.nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 0;
  padding: 0;
}

.nav li {
  position: relative;
}

.nav a {
  display: block;
  padding: 16px 4px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
  opacity: 0.9;
  transition: opacity 0.2s, color 0.2s;
}

/* Hover Effect for Main Nav Links */
.nav a:hover {
  opacity: 1;
  color: var(--brand-2);
  font-weight: 800; /* Make the header text bold on hover */
}

/* --- dropdown style (soft orange sheet) --- */
.nav .dropdown { position: relative; }

/* Trigger link (keeps your existing look) */
.nav .dropdown > a {
  position: relative;
  z-index: 2;
}

/* The floating sheet */
.dropdown-content {
  position: absolute;
  top: calc(100% + 12px);
  left: -14px;             /* slight left align under the word */
  width: 320px;
  background: #fff;
  border: 1px solid rgba(255, 106, 61, 0.22);                 /* soft orange border */
  border-radius: 16px;
  padding: 8px;
  box-shadow:
    0 22px 48px rgba(0,0,0,0.08),
    0 10px 28px rgba(255, 106, 61, 0.12);                     /* warm glow */
  z-index: 1000;

  /* smooth show/hide without flicker */
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px) scale(0.98);
  transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
  pointer-events: none;
}

/* hover bridge so it doesn't disappear while moving the mouse */
.dropdown-content::before{
  content:"";
  position:absolute;
  left:0; right:0; top:-12px; height:12px;
}

/* little arrow */
.dropdown-content::after{
  content:"";
  position:absolute;
  top:-8px; left:26px;
  width:14px; height:14px;
  background:#fff;
  border:1px solid rgba(255,106,61,.22);
  border-right: none; border-bottom: none;
  transform: rotate(45deg);
}

/* open on hover / keyboard focus */
.dropdown:hover .dropdown-content,
.dropdown:focus-within .dropdown-content {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition-delay: 0s;
  pointer-events: auto;
}

/* items */
.dropdown-content a{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px;
  margin: 4px 0;
  border-radius: 12px;
  color: #1d1d1f;
  font-weight: 700;
  text-decoration: none;
  line-height: 1.2;
  transition: background .18s ease, transform .18s ease, border-color .18s ease;
  border: 1px solid transparent;
}

/* orange dot */
.dropdown-content a::before{
  content:"";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #ff6a3d;                           /* theme accent */
  flex: 0 0 8px;
  box-shadow: 0 0 0 4px rgba(255,106,61,.10);     /* soft ring */
}

/* chevron */
.dropdown-content a::after{
  content:"›";
  margin-left: auto;
  opacity: .35;
  font-weight: 800;
  transform: translateX(0);
  transition: transform .18s ease, opacity .18s ease;
}

/* hover/active look — subtle sheet highlight */
.dropdown-content a:hover,
.dropdown-content a:focus{
  background: linear-gradient(180deg, #fff7f5, #ffffff);
  border-color: rgba(255,106,61,.35);
  transform: translateX(2px);
}
.dropdown-content a:hover::after,
.dropdown-content a:focus::after{ opacity:.66; transform: translateX(2px); }



/* 1) Freeze the header CTA size on hover (no move, no grow) */
.site-header .cta-button {
  padding: 6px 16px !important;     /* keep size fixed */
  line-height: 1.2;
  box-shadow: 0 3px 6px rgba(255, 75, 75, 0.25);
  transform: none !important;
  transition: none !important;      /* kill hover animations */
}

.site-header .cta-button:hover {
  background: #ff4b4b !important;   /* same bg */
  color: #fff !important;           /* only text turns black */
  box-shadow: 0 3px 6px rgba(255, 75, 75, 0.25) !important;
  transform: none !important;
}

/* Remove any underline style from the header logo, everywhere */
.site-header .brand,
.site-header .brand a,
.site-header .logo,
.site-header .logo a {
  text-decoration: none !important;
  border: 0 !important;
  box-shadow: none !important;        /* kills fancy underline via box-shadow */
  background-image: none !important;  /* kills underline via background linear-gradient */
}

/* If you use a pseudo-element underline anywhere, kill it for the logo */
.site-header .brand a::before,
.site-header .brand a::after,
.site-header .logo a::before,
.site-header .logo a::after {
  content: none !important;
}

/* Make sure the logo link behaves like a block so no underline leaks */
.site-header .brand a,
.site-header .logo a {
  display: inline-block;
}



/* 2) Stop main nav items from changing width on hover */
.nav a {
  font-weight: 600;                  /* base weight */
}

.nav a:hover {
  font-weight: 600 !important;       /* do NOT get bolder */
  color: var(--ink) !important;      /* just change color (optional) */
  opacity: 1;
}
/* smaller, cleaner chevron next to dropdowns */
.nav .dropdown > .dropbtn::after {
  content: "";
  display: inline-block;
  width: 6px;                      /* smaller width */
  height: 6px;                     /* smaller height */
  margin-left: 6px;                /* tighter spacing */
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.6;
  transition: transform 0.2s ease, opacity 0.2s ease;
  vertical-align: middle;
}

/* subtle hover + open states */
.nav .dropdown:hover > .dropbtn::after,
.nav .dropdown:focus-within > .dropbtn::after {
  opacity: 1;
  transform: rotate(-135deg);
}




/* Hero Section Styling */
.hero-split {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  height: 80vh;                 /* Increased height to allow more space */
  padding: 40px 20px;           /* Adjusted padding */
  background-image: url('assets/images/Homepage.jpg'); /* Background image */
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

/* Force spacing below paragraph and above CTA */
.hero-copy a.cta-button,
.hero-split a.cta-button,
.hero-inner a.cta-button {
  display: inline-block;
  margin-top: 32px !important;  /* move it down */
}


/* New extended content section */
.extended-hero {
  background: #ff4b4b;          /* Orange background */
  color: white;
  padding: 60px 20px;
  text-align: center;
}

.extended-hero h2 {
  font-size: 36px;
  margin-bottom: 20px;
  font-weight: 700;
}

.extended-hero p {
  font-size: 18px;
  line-height: 1.6;
  max-width: 900px;
  margin: 0 auto;
}

/* Other sections (features, testimonials) will continue below */
.hero-split .hero-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;            /* Ensures the image covers the section */
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;                  /* Keep the image behind the text */
}

.hero-copy {
  position: relative;
  z-index: 1;                   /* Keep the text above the image */
  text-align: center;
  padding: 20px;
  color: white;
  max-width: 900px;
  margin: 0 auto;
}

.cta-button {
  background-color: #ff4b4b;
  color: white;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: bold;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.cta-button:hover {
  background-color: #e03939;    /* Darker button color on hover */
}

/* === Hero: make the white box perfectly square === */
.hero-split {
  background:#ffecec !important;        /* keep solid white */
  border-radius: 0 !important;         /* remove all rounding */
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  box-shadow: none;                     /* optional: remove glow; keep or drop */
}

.hero-split .hero-art,
.hero-split .hero-art img {
  border-radius: 0 !important;         /* remove inner image rounding */
}

/* === HERO: make image flush to edges and match text height === */
.hero-split{
  padding: 0 !important;                 /* no inner white space */
  background:#fff !important;
  min-height: 70vh;
}
.hero-split .hero-inner{
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;        /* text left / image right */
  gap: 0 !important;                     /* no gutter */
  align-items: stretch;                   /* same height for both sides */
}

/* TEXT: small inset from the left border only */
.hero-split .hero-copy{
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  padding: clamp(28px,4vw,48px) 28px;    /* mild left padding */
  margin: 0;                             
}

/* IMAGE: remove shadow/rounding/margins so it touches all edges */
.hero-split .hero-art{
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden;
  height: 100%;                          /* fill grid row */
}
.hero-split .hero-art img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;                      /* fill perfectly */
}

/* Mobile stack — keep nice height for image */
@media (max-width: 900px){
  .hero-split{ padding: 0 0 20px !important; }
  .hero-split .hero-inner{ grid-template-columns: 1fr; }
  .hero-split .hero-copy{ padding: 20px; text-align: center; }
  .hero-split .hero-art{ height: clamp(260px, 55vw, 420px); }
}

/* === Add subtle light-orange border around hero image === */
.hero-split .hero-art img {
  border: 4px solid #ffd2a8;   /* soft light orange border */
  box-sizing: border-box;      /* ensures border fits without shifting layout */
}

/* === Light peach border matching site gradient === */
.hero-split .hero-art img {
  border: 4px solid #ffe6e0;    /* matches the soft site tone */
  box-sizing: border-box;
  border-radius: 4px;
}




/* =========================
   Contact cards: make smaller
   (scoped to this page's block)
   =/* ====== Cizo Contact Page (Scoped) ====== */
:root{
  --ink: #1f2125;
  --muted:#6b7280;
  --brand:#ff5c2b;
  --brand-2:#ff7b52;
  --bg:#ffffff;
  --bg-soft:#fafafa;
  --line:#eceff4;
  --card:#ffffff;
  --radius: 16px;
  --shadow: 0 10px 28px rgba(16, 24, 40, .08);
  --shadow-lg: 0 20px 40px rgba(16, 24, 40, .12);
}

body{color:var(--ink); background:var(--bg);}

/* simple container utility if needed */
.container{max-width:1200px; margin:0 auto; padding:0 20px;}
.narrow{max-width:820px}

/* Grids */
.grid-3{display:grid; gap:22px; grid-template-columns:repeat(3,1fr)}
.grid-2{display:grid; gap:22px; grid-template-columns:2fr 1.25fr}
@media (max-width: 960px){
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
}

/* ---------- HERO ---------- */
.section-hero{
  padding:72px 0 40px;
  text-align:center;
  background:
    radial-gradient(900px 280px at 50% -10%, #ffe8df 0%, transparent 60%),
    var(--bg);
  border-bottom:1px solid var(--line);
}
.section-hero .pill{
  display:inline-block;
  padding:6px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--muted);
  font-weight:700;
  font-size:13px;
  background:#fff;
}
.section-hero h1{
  margin:14px auto 8px;
  font-size: clamp(26px, 3vw, 36px);
  font-weight:900;
  letter-spacing:-0.02em;
}
.section-hero .sub{
  max-width:780px; margin:0 auto;
  color:var(--muted); font-size:18px;
}
/* subtle underline */
.section-hero h1::after{
  content:""; display:block; width:120px; height:4px; border-radius:2px;
  background:linear-gradient(90deg, #ff6a3d, #ff6a3d);
  margin:10px auto 0;
}


/* ---------- FORM + SIDEBAR CARDS ---------- */
.card-rose{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:18px;
  padding:22px;
  box-shadow:var(--shadow);
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease;      /* added so border animates smoothly */
}

/* hover: lift + soft orange highlight around the card */
.card-rose:hover{
  transform:translateY(-2px);
  box-shadow:
    var(--shadow-lg),
    0 0 0 1px rgba(255,106,61,.45);  /* subtle outer orange ring */
  border-color: rgba(255,106,61,.75); /* warm orange border on hover */
}

.card-rose h2, .card-rose h3{margin:0 0 8px}
.card-rose .muted{color:var(--muted)}

/* Contact form fields */
.contact-form{margin-top:10px}
.contact-form .field{margin:14px 0}
.contact-form label{
  display:block; font-weight:700; margin:0 0 6px; color:#2b2d31;
}
.contact-form input,
.contact-form select,
.contact-form textarea{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  font-size:16px;
  outline:none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.contact-form textarea{resize:vertical}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
  border-color:#ffd0c1;
  box-shadow:0 0 0 3px rgba(255,92,43,.15);
}

/* Button */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  background:#ff6a3d;
  color:#fff; font-weight:800;
  border:2px solid #ff6a3d;
  border-radius:12px;
  padding:12px 16px;
  cursor:pointer;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.btn:hover{transform:translateY(-2px); background:#ff6a3d}
.btn--full{width:100%}
.fineprint{color:var(--muted); font-size:12px; margin-top:8px}

/* Map */
.map-frame{
  width:100%; height:240px; border:0; border-radius:12px;
  box-shadow:var(--shadow); margin-top:10px
}

/* Utility muted */
.muted{color:var(--muted)}
/* ======================== */

/* slightly narrower two-column wrapper */
.block .container.grid-2{
  max-width: 920px !important;   /* was 1100 via inline */
  gap: 16px;                     /* tighter gap */
}

/* compact cards */
.block .card-rose{
  padding: 16px;                 /* was 22 */
  border-radius: 14px;           /* subtle */
}

/* smaller headings inside cards */
.block .card-rose h2{
  font-size: 20px;
}
.block .card-rose h3{
  font-size: 18px;
}

/* compact fields */
.block .contact-form .field{ margin: 10px 0; }
.block .contact-form input,
.block .contact-form select,
.block .contact-form textarea{
  padding: 10px 12px;            /* was 12px 14px */
  font-size: 14px;               /* was 16px */
  border-radius: 10px;           /* was 12px */
}

/* smaller map */
.block .map-frame{
  height: 200px;                 /* was 240px */
  border-radius: 10px;
}

/* slimmer primary button */
.block .btn{
  padding: 10px 14px;            /* was 12px 16px */
  font-size: 14px;
  border-radius: 10px;
}





/* =========================
   Features block (Home)
   ========================= */
#features {
  position: relative;
  padding: 64px 0;
  text-align: center;
  overflow: hidden;
  background: none; /* remove the previous gradient */
}

/* Background layer for your downloaded image */
#features::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(255,253,249,0.95), rgba(255,75,75,0.05) 90%),
    url("assets/images/bg/features-bg.svg") center / cover no-repeat;
  opacity: 1;
}

/* =========================
   Features block (Home) with Background
   ========================= */
#features {
  position: relative;
  padding: 64px 0;
  text-align: center;
  overflow: hidden;
  background: none; /* remove old gradient */
}

/* Background layer with your downloaded template */
#features::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(255,253,249,0.96), rgba(255,75,75,0.06) 80%),
    url("../images/layered.png") center / cover no-repeat;
  opacity: 1;
}

/* Keep the content above the background */
#features .features-container {
  position: relative;
  z-index: 1;
}

.features-container{max-width:1100px;margin:0 auto;display:flex;justify-content:center;gap:28px;flex-wrap:wrap}
.feature-card{
  background:#fff;border:1px solid var(--rose-200);border-radius:14px;width:260px;padding:22px;
  box-shadow:0 10px 22px rgba(255,75,75,.08);display:flex;flex-direction:column;align-items:center;text-align:center;
  transition:transform .22s,box-shadow .25s,border-color .2s,background .25s;
}
.feature-card:hover{transform:translateY(-4px);border-color:var(--rose-400);box-shadow:0 18px 36px rgba(255,75,75,.18),0 2px 8px rgba(0,0,0,.03)}
.feature-card:hover h3{color:var(--rose-500)}
.feature-card img{width:60px;height:60px;margin-bottom:16px;object-fit:contain;transition:transform .22s}
.feature-card:hover img{transform:scale(1.06) rotate(-2deg)}
.feature-card p{font-size:.98rem;color:var(--muted);margin:0}

/* === Constant orange borders for partner chips === */
#partners .sf-grid .sf-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: #fff;
  border: 2px solid #ff6a3d !important;          /* 🔸always-on border */
  border-radius: 18px !important;                 /* pill look */
  box-shadow: 0 6px 20px rgba(255, 106, 61, 0.10);/* soft constant glow */
}

/* Make sure the inner elements don't override the border look */
#partners .sf-grid .sf-logo img {
  height: 28px;                                   /* adjust if needed */
  width: auto;
  object-fit: contain;
}

#partners .sf-grid .sf-logo span,
#partners .sf-grid .sf-logo p {
  margin: 0;
  font-weight: 600;
  color: #333;
}

/* Remove any hover-only border/glow from previous rules */
#partners .sf-grid .sf-logo:hover {
  border-color: #ff6a3d !important;
  box-shadow: 0 6px 20px rgba(255, 106, 61, 0.10) !important;
  transform: none !important;                     /* optional: no lift */
}

/* Container (optional, if you want a thin outer frame too) */
#partners .partners-container {
  border: 1px solid #ffd0c1;                      /* very light theme edge */
  border-radius: 20px;
}

/* (Optional) tighten caption look */
#partners .partner p {
  margin: 0;
  font-weight: 600;
  color: #555;
}

/* Mobile */
@media (max-width: 768px) {
  #partners .partners-container {
    padding: 30px !important;
    gap: 40px !important;
  }
  #partners .partner img {
    width: 110px !important;
  }
}

/* ===== Testimonial Section (Test Triangle style clone) ===== */
/* Section */
.ai-section {
  background-color: #f8f5ee;
  padding: 80px 0;
  text-align: center;
}

/* Title */
.section-title {
  font-size: 38px;
  font-weight: 800;
  margin-bottom: 50px;
  color: #1a1a1a;
  position: relative;
}
.section-title::after {
  content: "";
  display: block;
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, #ff6a3d, #ff4b2b);
  border-radius: 2px;
  margin: 14px auto 0;
}

/* Grid layout */
.testimonial-grid {
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Card base */
.ai-card {
  width: 340px;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ai-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
}

/* Image (fix head cropping) */
.ai-card img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Text content */
.ai-card-content {
  padding: 24px;
  text-align: left;
}
.ai-card-content h3 {
  font-size: 20px;
  font-weight: 800;
  color: #ff4b2b;
  margin-bottom: 4px;
}
.ai-card-content h4 {
  font-size: 15px;
  font-weight: 500;
  color: #5c5c5c;
  font-style: italic;
  margin-bottom: 12px;
  line-height: 1.5;
}
.ai-card-content p {
  font-size: 16px;
  color: #333;
  line-height: 1.6;
  font-weight: 400;
}

/* Responsive */
@media (max-width: 768px) {
  .testimonial-grid {
    flex-direction: column;
    align-items: center;
  }
  .ai-card {
    width: 90%;
  }
}



/* =============================
   CONTACT PAGE – TOP BANNER
   ============================= */

.contact-banner {
  background: linear-gradient(135deg, #ff6a3d, #ff4b2b);
  padding: 70px 20px;
  color: #fff;
}

.contact-banner__inner {
  max-width: 1100px;
  margin: 0 auto;
  text-align: left;
}

.contact-banner h1 {
  margin: 0 0 10px;
  font-size: clamp(30px, 3.4vw, 42px);
  font-weight: 800;
}

.contact-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  opacity: 0.95;
}

.contact-breadcrumb a {
  color: #fff;
  text-decoration: none;
  font-weight: 500;
}

.contact-breadcrumb a:hover {
  text-decoration: underline;
}


/* =============================
   CONTACT PAGE – MAIN GRID
   ============================= */

.contact-main {
  background: #f8f5ee;
  padding: 70px 20px;
}

.contact-main__grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  gap: 36px;
  align-items: flex-start;
}


/* =============================
   LEFT INFORMATION CARD – CIZO
   ============================= */

.contact-info-card {
  background: linear-gradient(180deg, #fffaf6 0%, #fff1e6 100%);
  color: #1f1f23;
  padding: 28px 26px 28px;
  border-radius: 24px;
  border: 1px solid #ffe0cf;
  box-shadow: 0 18px 42px rgba(15, 15, 26, 0.10);
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 360px;
}

.contact-info-tag {
  display: inline-block;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8a8178;
}

.contact-info-card h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  color: #27211a;
}

.contact-info-card > p {
  font-size: 14px;
  line-height: 1.8;
  margin: 0;
  color: #5e564d;
}

.contact-info-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 22px;
}

.contact-info-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.contact-info-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #ffece1;
  border: 1px solid #ffc9aa;
  color: #ff4b2b;
  font-size: 18px;
  flex-shrink: 0;
}

.contact-info-body h3 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 700;
  color: #2d2620;
}

.contact-info-body p {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: #534c45;
}

.contact-info-body a {
  font-size: 14px;
  color: #ff4b2b;
  text-decoration: none;
}

.contact-info-body a:hover {
  text-decoration: underline;
}


/* =============================
   RIGHT FORM CARD
   ============================= */

.contact-form-card {
  background: #ffffff;
  border-radius: 18px;
  padding: 26px 26px 28px;
  box-shadow: 0 16px 40px rgba(15, 15, 26, 0.06);
  border: 1px solid #ece5dd;
}

.contact-form-card h2 {
  margin: 0 0 6px;
  font-size: 24px;
  font-weight: 800;
}

.contact-form-subtitle {
  margin: 0 0 18px;
  font-size: 14px;
  color: #69625a;
}

.contact-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 22px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field--full {
  grid-column: 1 / -1;
}

.contact-form label {
  font-size: 13px;
  font-weight: 600;
  color: #3a352f;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  border-radius: 6px;
  border: 1px solid #d8d0c7;
  padding: 9px 11px;
  font-size: 14px;
  background: #fffaf4;
  transition: border-color .18s, box-shadow .18s, background .18s;
}

.contact-form textarea {
  resize: vertical;
  min-height: 120px;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: #ff6a3d;
  box-shadow: 0 0 0 1px rgba(255, 106, 61, 0.28);
  background: #fff;
}

/* ✅ Checkbox inline + left aligned */
.contact-agree {
  margin-top: 2px;
}

.contact-checkbox {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  font-size: 13px;
  color: #58514a;
}

.contact-checkbox input {
  width: 16px;
  height: 16px;
  margin: 0;
}

.contact-submit {
  margin-top: 18px;
  width: 100%;
  background: linear-gradient(135deg, #ff6a3d, #ff4b2b);
  border: none;
  color: #fff;
  font-weight: 700;
  padding: 11px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, opacity .15s;
}

.contact-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(255, 106, 61, 0.35);
}

.contact-form-card .fineprint {
  margin-top: 10px;
  font-size: 12px;
  color: #8a8178;
}


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

@media (max-width: 900px) {
  .contact-main {
    padding: 50px 16px;
  }

  .contact-main__grid {
    grid-template-columns: 1fr;
  }

  .contact-form-grid {
    grid-template-columns: 1fr;
  }
}


/* =============================
   FULL-WIDTH MAP
   ============================= */

.contact-map {
  margin-top: -10px;
  border-top: 2px solid #ff6a3d;
}

.contact-map iframe {
  display: block;
  width: 100%;
  height: 520px;
  border: 0;
}


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

.contact-essentials {
  max-width: 1100px;
  margin: 40px auto 70px;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 40px;
}

.ess-item {
  position: relative;
  flex: 1 1 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.2s ease;
}

.ess-item:hover {
  transform: translateY(-3px);
}

.ess-ico {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 26px;
  background: #ffffff;
  border: 1px solid #dcdcdc;
}

.ess-body h4 {
  font-size: 18px;
  font-weight: 800;
}

.ess-link,
.ess-muted {
  font-size: 15px;
  color: #333;
  text-decoration: none;
}

.ess-link:hover {
  text-decoration: underline;
}

.ess-copy,
.ess-open {
  border: 1px solid #e4e4e4;
  border-radius: 999px;
  padding: 6px 14px;
  font-weight: 700;
  font-size: 13px;
  background: #fff;
  cursor: pointer;
}

.ess-item:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -20px;
  top: 18%;
  width: 1px;
  height: 64%;
  background: #eee;
}

@media (max-width: 860px) {
  .contact-essentials {
    flex-direction: column;
    gap: 28px;
  }

  .ess-item:not(:last-child)::after {
    display: none;
  }
}

/* ========== Cizo Footer — Spacious Layout (Modern Web Style) ========== */
.cizo-footer {
  padding: 100px 20px 60px; /* ⬆️ increased top/bottom padding */
  background: #fff;
  color: #111;
}

.footer-inner {
  max-width: 1250px; /* ⬆️ slightly wider for breathing room */
  margin: 0 auto;
}

/* ---- Top Section ---- */
.footer-top {
  display: grid;
  grid-template-columns: 1.2fr 2fr; /* slightly more space for brand */
  gap: 70px; /* ⬆️ increased spacing between brand & links */
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  padding-bottom: 60px; /* ⬆️ increased padding bottom */
}

/* ---- Link Columns ---- */
.footer-links {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 50px; /* ⬆️ more gap between columns */
}

.footer-column h4 {
  margin-bottom: 18px; /* ⬆️ more space below titles */
  font-size: 1.05rem;
  font-weight: 700;
  color: #000;
}

.footer-column a {
  text-decoration: none;
  color: rgba(0, 0, 0, 0.75);
  display: block;
  margin-bottom: 10px; /* ⬆️ more gap between links */
  transition: color 0.2s ease;
}

.footer-column a:hover {
  color: #000;
}

/* ---- Brand and tagline ---- */
.footer-brand .footer-logo {
  font-size: 2.2rem;
  font-weight: 800;
  text-decoration: none;
  color: #111;
}

.footer-tagline {
  margin-top: 12px;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.85);
  max-width: 420px; /* wider for readability */
}

/* ---- Bottom Section ---- */
.footer-bottom {
  margin-top: 50px; /* ⬆️ increased margin for nice separation */
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.95rem;
  color: rgba(0, 0, 0, 0.8);
}

/* ---- Responsive ---- */
@media (max-width: 950px) {
  .footer-top {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 40px;
  }
  .footer-links {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }
  .footer-tagline {
    margin: 10px auto;
  }
}

@media (max-width: 550px) {
  .footer-links {
    grid-template-columns: 1fr;
  }
}

/* ---------- Social row (light chips) ---------- */
.footer-social-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 18px 0;
  align-items: center;
  justify-content: flex-start;
}

.sbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; 
  height: 38px; 
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 3px 8px rgba(0,0,0,.06);
  text-decoration: none;
}

.sbtn img {
  width: 18px;
  height: 18px;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: none !important;   /* ✅ remove color filtering */
  opacity: 1 !important;     /* ensure full visibility */
  transition: transform 0.2s ease;
}

.sbtn:hover img {
  transform: scale(1.1);
}

.sbtn:hover img {
  transform: scale(1.1);
  filter: brightness(0) invert(0.2);
}

.sbtn span {
  font-weight: 800; 
  font-size: 18px; 
  color: #ff6a3d; 
  line-height: 1;
}


/* ========== Footer Legal Section ========== */
.footer-legal-strip {
  display: flex;
  flex-direction: column; /* ✅ Stack vertically */
  align-items: flex-start;
  gap: 8px; /* space between nav and notes */
  font-size: 0.95rem;
  color: #333;
  margin-top: 12px;
}

.footer-legal-strip .legal-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.footer-legal-strip .legal-links a {
  color: #333;
  text-decoration: none;
  font-weight: 600;
}

.footer-legal-strip .legal-links a:hover {
  color: #ff6a3d;
}

.footer-legal-strip .sep {
  color: rgba(0,0,0,0.35);
  font-weight: 300;
}

.footer-legal-strip .legal-notes {
  display: flex;
  flex-direction: column; /* ✅ vertical layout */
  gap: 4px;
  font-size: 0.9rem;
  color: rgba(0,0,0,0.75);
}

.footer-legal-strip .legal-notes a {
  color: #333;
  text-decoration: underline;
}





/* ==== ABOUT US – Unified Background Section ==== */
.about-section {
  background: linear-gradient(180deg, #fff7f4 0%, #fff3ee 100%);
  /* or try a solid color: background-color: #fff5f0; */
  padding: 80px 0; /* generous vertical spacing */
  position: relative;
  z-index: 1;
}

/* Keep all inner text readable */
.about-section h2, 
.about-section h3, 
.about-section p, 
.about-section span {
  color: #2e2e2e;
}

/* Remove background colors from any nested cards or containers */
.about-section .container,
.about-section .content-block,
.about-section .info-box {
  background: transparent !important;
  box-shadow: none !important;
}

/* “About us” pill */
/* === About Us button – main heading style === */
.section-hero.about-hero .pill {
  display: inline-block;
  margin-bottom: 20px;
  padding: 10px 24px;
  border-radius: 40px;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  background: linear-gradient(90deg, #ff6a3d, #ff4b2b);
  color: #fff;
  border: none;
  box-shadow: 0 6px 18px rgba(255, 90, 50, 0.35);
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  z-index: 2;
}

/* Hover glow effect */
.section-hero.about-hero .pill:hover {
  background: linear-gradient(90deg, #ff8459, #ff5033);
  box-shadow: 0 8px 22px rgba(255, 90, 50, 0.45);
  transform: translateY(-2px);
}

/* Click (active) feedback */
.section-hero.about-hero .pill:active {
  transform: scale(0.97);
  box-shadow: 0 4px 12px rgba(255, 90, 50, 0.3);
}


/* ---------- Responsive tweaks ---------- */
@media (max-width: 1200px){
  .section-hero.about-hero{
    background:
      linear-gradient(to bottom,
        rgba(255,255,255,0) 0%,
        rgba(255,240,235,0.65) 65%,
        rgba(255,225,215,0.85) 85%,
        rgba(255,210,200,0.95) 100%),
      linear-gradient(90deg,
        rgba(255,255,255,.96) 0%,
        rgba(255,255,255,.92) 48%,
        rgba(255,255,255,.60) 64%,
        rgba(255,255,255,.15) 78%,
        rgba(255,255,255,0) 100%),
      radial-gradient(1200px 420px at 50% -10%,
        rgba(255,121,80,.15) 0%,
        rgba(255,121,80,.07) 45%,
        rgba(255,255,255,0) 80%),
      url("/assets/images/About-homepage.png") no-repeat right -20px / auto 480px;
  }
}

@media (max-width: 980px){
  .section-hero.about-hero{
    background:
      linear-gradient(to bottom,
        rgba(255,255,255,0) 0%,
        rgba(255,240,235,0.75) 75%,
        rgba(255,230,220,0.9) 90%,
        rgba(255,210,200,0.95) 100%),
      linear-gradient(90deg,
        rgba(255,255,255,.98) 0%,
        rgba(255,255,255,.95) 60%,
        rgba(255,255,255,.70) 80%,
        rgba(255,255,255,0) 100%),
      radial-gradient(1000px 380px at 50% -10%,
        rgba(255,121,80,.15) 0%,
        rgba(255,121,80,.06) 45%,
        rgba(255,255,255,0) 80%),
      url("/assets/images/About-homepage.png") no-repeat right 0 / auto 360px;
  }
}

@media (max-width: 720px){
  .section-hero.about-hero{
    background:
      linear-gradient(180deg,
        rgba(255,245,240,.98),
        rgba(255,250,248,.98)),
      radial-gradient(900px 320px at 50% -10%,
        rgba(255,121,80,.14) 0%,
        rgba(255,121,80,.05) 45%,
        rgba(255,255,255,0) 80%);
    padding: 72px 0 46px;
  }
  .section-hero.about-hero h1,
  .section-hero.about-hero .sub{
    text-shadow:none;
  }
}


/* =========================
   Cards Animation for Cloud solutions
   ========================= */
.kb-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, 1fr);
}

.kb {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 18px;
  text-align: left;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

.kb:hover {
  transform: translateY(-10px);  /* Subtle lift */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); /* Soft shadow on hover */
  background-color: rgba(255, 75, 75, 0.1);  /* Soft background color change */
}

.kb h3 {
  margin: 6px 0 6px;
  font-size: 1.05rem;
  transition: color 0.3s ease;
}

.kb p {
  margin: 0;
  color: var(--muted);
  font-size: .98rem;
  transition: color 0.3s ease;
}

.kb:hover h3 {
  color: var(--brand-2);  /* Highlight the heading color on hover */
}

.kb:hover p {
  color: #333;  /* Darker text color on hover for better contrast */
}

.kb .ico {
  width: 40px;
  height: 40px;
  margin-bottom: 8px;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.kb:hover .ico {
  transform: scale(1.1); /* Slightly enlarge the icon on hover */
}

/* Hover Animation Effect for Specific Cards */
.stat-card {
  transition: all 0.3s ease;  /* Smooth transition for all hover effects */
}

.stat-card:hover {
  transform: scale(1.05);  /* Slightly enlarge the card on hover */
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); /* Add shadow on hover */
  background-color: #f4f4f4;  /* Change background color on hover */
}

/* Optional: You can also adjust this for smaller screens (responsive design) */
@media (max-width: 768px) {
  .kb-grid {
    grid-template-columns: 1fr 1fr;
  }
}


/* ===== banner + image cards (Cizo themed) ===== */
.impl-banner{
  /* soft off-white like Calendly section */
  background: radial-gradient(1100px 260px at 50% 0,
              rgba(255, 229, 221, .25) 0%,
              #fffaf7 38%,
              #ffffff 70%);
  padding: clamp(48px, 7vw, 96px) 20px;
}

.impl-container{
  max-width: 1100px;
  margin: 0 auto;
}

/* Heading style mirrors Calendly’s weight/size/centering */
.impl-heading {
  margin: 0 auto clamp(24px, 3vw, 32px);
  text-align: center;
  font-family: "Epilogue", Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 800;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.1;
  color: var(--ink, #222);
  position: relative;
  display: block;
  width: 100%;
}

/* Centered underline directly below heading */
.impl-heading::after {
  content: "";
  display: block;
  width: 100px;
  height: 4px;
  margin: 10px auto 0; /* centers perfectly */
  background: linear-gradient(90deg, #ff8b4d, #ff4b2b);
  border-radius: 2px;
  opacity: 0.9;
}



/* Card grid */
.impl-cards{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 2.2vw, 24px);
}

/* Card shell — rounded, subtle border + lift on hover (Calendly vibe) */
.impl-card{
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--border, #ece5de) 70%, #fff);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  transition: transform .22s cubic-bezier(.16,1,.3,1),
              box-shadow .22s cubic-bezier(.16,1,.3,1),
              border-color .22s ease;
}
.impl-card:hover{
  transform: translateY(-4px);
  border-color: rgba(255,106,61,.30);              /* Cizo orange accent */
  box-shadow: 0 18px 36px rgba(255,106,61,.14);    /* warm glow */
}

/* Media: image on top with fixed aspect like Calendly image tiles */
.impl-card-media{
  margin: 0;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #fff7f5;
}
.impl-card-media img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;                /* same fill style */
  transition: transform .35s ease;
}
.impl-card:hover .impl-card-media img{ transform: scale(1.04); }

/* Body */
.impl-card-body{
  padding: 16px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.impl-card-title{
  margin: 0;
  font-weight: 800;
  font-size: clamp(16px, 1.6vw, 18px);
  color: #1f1f1f;
}
.impl-card-desc{
  margin: 0;
  color: var(--muted, #6b6b6b);
  font-size: clamp(14px, 1.4vw, 15px);
  line-height: 1.55;
}

/* Responsive: 2-up on tablets, 1-up on phones */
@media (max-width: 980px){
  .impl-cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .impl-cards{ grid-template-columns: 1fr; }
}


/* Pricing Section — HubSpot Style */
:root {
  --brand: #ff6a3d; /* Orange color */
  --ink: #1f1f1f;
  --muted: #6b7280;
  --border: #ffe1d5;
  --shadow: 0 8px 20px rgba(255, 106, 61, 0.08);
  --radius: 16px;
}

.pricing-cards {
  background: #fffdf9;
  padding: 70px 20px;
  text-align: center;
}

.pricing-cards .wrap {
  max-width: 1080px;
  margin: 0 auto;
  text-align: center;
}

/* Pricing Section Heading */
.pricing-cards h2 {
  font-family: "Epilogue", Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 800;
  font-size: clamp(26px, 3vw, 36px);
  color: var(--ink, #222);
  line-height: 1.1;
  margin: 0 auto clamp(24px, 3vw, 32px);
  position: relative;
  display: inline-block;
  text-align: center;
}

/* Gradient underline same as other heading */
.pricing-cards h2::after {
  content: "";
  display: block;
  width: 100px;
  height: 4px;
  margin: 10px auto 0;
  background: linear-gradient(90deg, #ff8b4d, #ff4b2b);
  border-radius: 2px;
  opacity: 0.9;
}


.pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 40px;
}

@media (min-width: 820px) {
  .pricing-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.price-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px 26px;
  text-align: left;
  box-shadow: var(--shadow);
  transition: all 0.3s ease;
}

.price-card:hover {
  transform: translateY(-3px);
  border-color:#ff4b2b;
  box-shadow: 0 10px 30px rgba(255, 106, 61, 0.18);
}

/* Small orange icon in header */
.price-card .icon {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(180deg, #ffe2d5, #ffc8b4);
  color: #d54b23;
  font-size: 18px;
  margin-bottom: 12px;
}
 
/* Badge for most popular plan */
.price-card .badge {
  position: absolute;
  top: 14px;
  right: 14px;
  background: #ff4b2b; /* your orange */
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 999px;
}

/* Headings */
.price-card h3 {
  margin: 0 0 8px;
  font-weight: 800;
  color: var(--ink);
}

.price {
  font-size: 1.8rem;
  font-weight: 800;
  margin: 6px 0 18px;
  color:  #ff6a3d !important;
}

.price small {
  font-weight: 600;
  color: var(--muted);
}

/* Features */
.features {
  margin: 14px 0 22px;
  display: grid;
  gap: 12px;
  padding-left: 0;
  list-style: none;
}

/* Check icon styling */
.check {
  color: --brand: #ff6a3d; /* Orange color */ /* Orange color for the checkmark */
}

/* Force orange Get Started buttons across pricing section */
.card-btn,
.price-card .card-btn {
  background-color: #ff6a3d !important; /* Force brand orange */
  color: #fff !important;
  padding: 12px 30px;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 700;
  font-size: 1rem;
  border: 2px solid #ff6a3d !important;
  box-shadow: 0 6px 18px rgba(255, 106, 61, 0.25);
  transition: all 0.3s ease;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 15px;
}

.card-btn:hover,
.price-card .card-btn:hover {
  background-color: #ff4b2b !important; /* Slightly deeper orange */
  border-color: #ff4b2b !important;
  box-shadow: 0 10px 24px rgba(255, 106, 61, 0.3);
  transform: translateY(-4px);
}

.card-btn svg {
  width: 18px;
  height: 18px;
  fill: white;
}



/* Features */
.features {
  margin: 14px 0 22px;
  display: grid;
  gap: 12px;
  padding-left: 0;
  list-style: none;
}

/* Button Styling */
.card-btn {
  background-color: --brand: #ff6a3d; /* Orange color */
  color: white;
  padding: 12px 30px;
  text-decoration: none;
  border-radius: 5px;
  font-weight: 600;
  transition: background-color 0.3s ease, transform 0.3s ease;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 15px;
}

.card-btn:hover {
  background-color: #ff4b2b; /* Darker shade on hover */
  transform: translateY(-4px);
}

/* Arrow in the button */
.card-btn svg {
  width: 18px;
  height: 18px;
  fill: white;
}

/* Features */
.features {
  margin: 14px 0 22px;
  display: grid;
  gap: 12px;
  padding-left: 0;
  list-style: none;
}

/* Button Styling */
.card-btn {
  background-color: #ff6a3d; /* Orange color */
  color: white;
  padding: 12px 30px;
  text-decoration: none;
  border-radius: 5px;
  font-weight: 600;
  transition: background-color 0.3s ease, transform 0.3s ease;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 15px;
}

.card-btn:hover {
  background-color: #ff8655; /* Darker shade on hover */
  transform: translateY(-4px);
}

/* Arrow in the button */
.card-btn svg {
  width: 18px;
  height: 18px;
  fill: white;
}

/* Features */
.features {
  margin: 14px 0 22px;
  display: grid;
  gap: 12px;
  padding-left: 0;
  list-style: none;
}

.features li {
  display: flex;
  align-items: start;
  gap: 10px;
  color: var(--ink);
  position: relative;
  padding-left: 22px;
}

.features li::before {
  content: "✓";
  color: var(--brand);
  font-weight: bold;
  position: absolute;
  left: 0;
}

/* Buttons */
.card-btn {
  display: inline-block;
  background: #ff4b2b;
  color: #fff;
  font-weight: 700;
  padding: 10px 16px;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.card-btn:hover {
  background: #ff4b2b;
  transform: translateY(-2px);
}

/* Text link CTA */
.card-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--brand);
  margin-left: 12px;
  text-decoration: none;
  position: relative;
}

.card-cta::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.card-cta:hover::after {
  transform: scaleX(1);
}


/* Features */
.features {
  margin: 14px 0 22px;
  display: grid;
  gap: 12px;
  padding-left: 0;
  list-style: none;
}

.features li {
  display: flex;
  align-items: start;
  gap: 10px;
  color: var(--ink);
  position: relative;
  padding-left: 22px;
}

.features li::before {
  content: "✓";
  color: #ff6a3d;
  font-weight: bold;
  position: absolute;
  left: 0;
}

/* Buttons */
.card-btn {
  display: inline-block;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  padding: 10px 16px;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.card-btn:hover {
  background: #ff855c;
  transform: translateY(-2px);
}

/* Text link CTA */
.card-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--brand);
  margin-left: 12px;
  text-decoration: none;
  position: relative;
}

.card-cta::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.card-cta:hover::after {
  transform: scaleX(1);
}




/* ================================
   ABOUT PAGE – Cizo
   Unique, warm & modern styling
   ================================ */

:root{
  --ink: #1f2125;
  --muted:#6f7684;
  --brand:#ff5c2b;
  --brand-2:#ff7b52;
  --bg:#ffffff;
  --bg-soft:#fffaf7;
  --line:#eceff4;
  --card:#ffffff;
  --radius: 16px;
  --shadow: 0 10px 28px rgba(16, 24, 40, .08);
  --shadow-lg: 0 22px 52px rgba(16,24,40,.18);
}

/* Container helpers */
.container{max-width:1200px; margin:0 auto; padding:0 20px;}
.narrow{max-width:900px;}

/* -------------------- HERO -------------------- */
.section-hero[aria-labelledby="about-title"]{
  position: relative;
  padding: 88px 0 56px;
  text-align: center;
  color: var(--ink);
  background:
    radial-gradient(1000px 380px at 50% -60px, rgba(255, 106, 61, .10) 0%, transparent 65%),
    var(--bg);
  border-bottom: 1px solid var(--line);
}

.section-hero .pill{
  display:inline-block;
  padding:3px 12px;
  border:1px solid var(--line);
  border-radius:500px;
  color:var(--muted);
  font-weight:800;
  font-size:13px;
  background:#fff;
}

.section-hero h1{
  margin:18px auto 10px;
  font-size: clamp(26px, 3vw, 36px);
  font-weight:900;
  letter-spacing:-0.02em;
}

.section-hero .sub{
  max-width:820px; margin:0 auto;
  color:var(--muted); font-size:18px; line-height:1.6;
}

/* animated underline */
.section-hero h1::after{
  content:""; display:block; width:140px; height:4px; border-radius:3px;
  background:linear-gradient(90deg, #ff7b52, #ff5c2b);
  margin:14px auto 0;
  animation: underlinePulse 2.8s ease-in-out infinite;
}
@keyframes underlinePulse{
  0%,100%{opacity:.6; transform:scaleX(.95)}
  50%{opacity:1; transform:scaleX(1)}
}

/* ==== About – Illustrated Background Hero ==== */
.section-hero.about-hero {
  position: relative;
  padding: 80px 0 56px;
  text-align: center;
  color: var(--ink, #222);

  /* Background stack: soft radial glow + your illustration */
  background:
    radial-gradient(1200px 420px at 50% -10%, rgba(255, 121, 80, 0.12) 0%, rgba(255, 121, 80, 0.05) 45%, rgba(255, 255, 255, 0) 80%),
    url("/assets/images/About-homepage.png") repeat;
  background-size:
    auto,
    1200px; /* tweak for density of the pattern */
  background-position:
    center -60px,
    center top;
  border-bottom: 1px solid var(--line, #eceff4);
}

/* tighten/space the hero content a bit for readability */
.section-hero.about-hero .container.narrow {
  max-width: 980px;
}

/* Title */
.section-hero.about-hero h1 {
  margin: 14px auto 12px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.12;
  font-size: clamp(28px, 3.6vw, 44px);
}

/* Pill (About Us) */
.section-hero.about-hero .pill {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid rgba(255, 106, 61, 0.35);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 6px 20px rgba(255, 106, 61, 0.09);
  color: var(--ink, #222);
  font-weight: 800;
}

/* Underline accent under the headline */
.section-hero.about-hero h1::after {
  content: "";
  display: block;
  width: 140px;
  height: 4px;
  margin: 14px auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg, #ff6a3d, #ff4b2b);
  opacity: 0.9;
}

/* Sub copy */
.section-hero.about-hero .sub {
  max-width: 1000px;
  margin: 12px auto 0;
  color: #5a5f6a;
  font-size: clamp(16px, 2.2vw, 22px);
  line-height: 1.6;
}

/* Optional: micro text-shadow on small screens to help over busy backgrounds */
@media (max-width: 720px) {
  .section-hero.about-hero h1,
  .section-hero.about-hero .sub {
    text-shadow: 0 1px 0 #323338;
  }
}

/* Slightly tighter top padding on very small devices */
@media (max-width: 520px) {
  .section-hero.about-hero {
    padding: 72px 0 46px;
  }
}


/* ====== About – “Who we are” elevated panel ====== */
.about-intro.enhanced {
  background: linear-gradient(180deg, #fffefb 0%, #fffdfa 100%);
  padding: 64px 20px;
}

.about-intro.enhanced .container.narrow {
  position: relative;
  max-width: 1080px;
  background: #ffffff;
  border: 1px solid #eceff4;
  border-radius: 18px;
  padding: 36px 34px;
  box-shadow: 0 18px 48px rgba(15, 15, 26, .10);
  overflow: hidden;
}

/* Brand ribbon on the left */
.about-intro.enhanced .container.narrow::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 6px;
  background: linear-gradient(180deg, #ff6a3d, #ff4b2b);
  opacity: .95;
}

/* Accent glow corner */
.about-intro.enhanced .container.narrow::after {
  content: "";
  position: absolute;
  right: -120px; top: -120px;
  width: 240px; height: 240px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,106,61,.18), rgba(255,106,61,0));
  pointer-events: none;
}

/* Title with underline accent */
.about-intro.enhanced .section-title {
  margin: 0 0 12px;
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.1;
  position: relative;
  display: inline-block;
}

.about-intro.enhanced .section-title::after {
  content: "";
  display: block;
  height: 4px; width: 88px;
  margin-top: 12px;
  border-radius: 2px;
  background: linear-gradient(90deg, #ff6a3d, #ff4b2b);
}

/* Lead paragraph */
.about-intro.enhanced .lede {
  margin: 10px 0 12px;
  font-size: clamp(16px, 2.1vw, 22px);
  line-height: 1.6;
  color: #32363f;
}

/* Supporting text */
.about-intro.enhanced .trust {
  margin: 8px 0 0;
  font-size: clamp(15px, 1.9vw, 19px);
  color: #5a6170;
  line-height: 1.6;
}

/* Optional highlights inside text */
.about-intro.enhanced mark.hi {
  background: linear-gradient(180deg, rgba(255,220,207,.55), rgba(255,220,207,0));
  border-radius: 6px;
  padding: 0 .25em;
}

/* Small screens */
@media (max-width: 720px) {
  .about-intro.enhanced .container.narrow {
    padding: 26px 22px;
    border-radius: 16px;
  }
}

/* ====== Our Mission – matched to “Who We Are” style ====== */
.mission-section {
  background: linear-gradient(180deg, #fffefb 0%, #fffdfa 100%);
  padding: 64px 20px;
}

.mission-section .container.narrow {
  position: relative;
  max-width: 1080px; /* identical to Who We Are */
  background: #ffffff;
  border: 1px solid #eceff4;
  border-radius: 18px;
  padding: 36px 34px;
  box-shadow: 0 18px 48px rgba(15, 15, 26, .10);
  overflow: hidden;
}

/* Orange ribbon on the left */
.mission-section .container.narrow::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 6px;
  background: linear-gradient(180deg, #ff6a3d, #ff4b2b);
  opacity: .95;
}

/* Accent glow in top-right corner */
.mission-section .container.narrow::after {
  content: "";
  position: absolute;
  right: -120px; top: -120px;
  width: 240px; height: 240px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,106,61,.18), rgba(255,106,61,0));
  pointer-events: none;
}

/* Title with orange underline */
.mission-section .section-title {
  margin: 0 0 12px;
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.1;
  position: relative;
  display: inline-block;
}

.mission-section .section-title::after {
  content: "";
  display: block;
  height: 4px; width: 88px;
  margin-top: 12px;
  border-radius: 2px;
  background: linear-gradient(90deg, #ff6a3d, #ff4b2b);
}

/* Mission paragraph */
.mission-section .lede {
  margin: 10px 0 12px;
  font-size: clamp(16px, 2.1vw, 22px);
  line-height: 1.6;
  color: #32363f;
}

/* Mission key points */
.mission-section .trust {
  margin: 8px 0 0;
  font-size: clamp(15px, 1.9vw, 19px);
  color: #5a6170;
  line-height: 1.6;
}

/* Small screens */
@media (max-width: 720px) {
  .mission-section .container.narrow {
    padding: 26px 22px;
    border-radius: 16px;
  }
}
/* Highlight headings inside Our Mission */
.mission-section .trust strong {
  display: inline-block;
  background: linear-gradient(90deg, #ff7b52, #ff5c2b);
  color: #fff;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 6px;
  margin-right: 6px;
  font-size: 17px;
  letter-spacing: 0.2px;
  box-shadow: 0 3px 10px rgba(255, 92, 43, 0.3);
}

/* Optional subtle fade for the text next to it */
.mission-section .trust {
  color: #505764;
  line-height: 1.7;
}


/* ===== TEAM: CSS-only tabs ===== */
.team-tabs-css { padding: 48px 0; }
.team-tabs-css .muted.center { margin-top: 6px; }

.team-tabset {
  display: grid;
  gap: 16px;
  /* chips row on top, panel below */
  grid-template-rows: auto 1fr;
}

/* Hide radios (but keep them accessible) */
.team-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Chips (tab labels) */
.team-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--line, #eceff4);
  border-radius: 999px;
  font-weight: 800;
  color: var(--ink, #1f2125);
  cursor: pointer;
  box-shadow: var(--shadow, 0 8px 20px rgba(16,24,40,.08));
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  margin-right: 10px;
}
.team-chip:hover { transform: translateY(-2px); }

.chip-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  object-fit: cover; display: block;
}

/* --- Softer active style for team tab chips --- */
#t-alex:checked  + label[for="t-alex"],
#t-meera:checked + label[for="t-meera"],
#t-daniel:checked + label[for="t-daniel"],
#t-sophia:checked + label[for="t-sophia"] {
  background: linear-gradient(90deg, #fff5f0 0%, #ffe4d9 100%);
  color: #ff5c2b;
  border: 2px solid #ff7b52;
  box-shadow: 0 4px 14px rgba(255, 92, 43, 0.2);
  transform: translateY(-2px);
}

/* Optional hover polish (for smoother transition) */
.team-chip {
  transition: transform .2s ease, box-shadow .2s ease, background .3s ease, border .3s ease, color .3s ease;
}


/* Panels container */
.team-panels {
  position: relative;
  min-height: 360px;
  margin-top: 6px;
}

/* Panels default hidden (we’ll show via :checked selectors) */
.team-panel {
  position: absolute; inset: 0;
  opacity: 0; transform: translateY(10px) scale(.98);
  pointer-events: none;
  transition: opacity .28s ease, transform .28s ease;
}

/* Card look */
.panel-card {
  display: grid; grid-template-columns: 220px 1fr; gap: 18px;
  background: #fff;
  border: 1px solid var(--line, #eceff4);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(16,24,40,.16);
  padding: 20px;
}
@media (max-width: 680px){
  .panel-card{ grid-template-columns: 1fr; text-align: center; }
  .panel-hero{ height: 200px; }
}

.panel-hero{
  width: 100%; height: 220px; object-fit: cover; border-radius: 14px;
  box-shadow: 0 10px 30px rgba(16,24,40,.12);
}
.panel-copy h3{ margin: 0 0 4px; font-size: 24px; font-weight: 900; }
.panel-copy .role{ margin: 0 0 8px; font-weight: 700; color: #ff5c2b; }
.panel-copy p{ margin: 0; color: var(--muted, #6b7280); }

/* ====== Show the right panel when a radio is checked ====== */
#t-alex:checked  ~ .team-panels #p-alex,
#t-meera:checked ~ .team-panels #p-meera,
#t-daniel:checked ~ .team-panels #p-daniel,
#t-sophia:checked ~ .team-panels #p-sophia {
  opacity: 1; transform: translateY(0) scale(1);
  pointer-events: auto;
}

#our-team .section-title {
  display: block;
  text-align: center;
  position: relative;
  margin: 0 auto;
  padding-bottom: 12px; /* underline gap from text */
  margin-bottom: 40px;  /* 👈 actual visible gap below heading */
}

#our-team .section-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0; /* underline sits right below text */
  transform: translateX(-50%);
  width: 70px;
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(90deg, #ff7b52, #ff5c2b);
}



/* ================= Partners – Marquee  About================= */
.partners-marquee { padding: 42px 0 56px; }
.partners-marquee .section-title { margin-bottom: 6px; }
.partners-marquee .muted { margin-bottom: 18px; }

/* Marquee wrapper */
.marquee {
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

/* Track */
.marquee__track {
  display: flex;
  align-items: center;
  gap: 48px;                 /* space between logos */
  width: max-content;        /* shrink to content width for translateX */
  animation: marqueeScroll 28s linear infinite;
  will-change: transform;
  padding: 16px 0;
}
/* Logo container */
.logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 999px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

/* Adjusted logo image size */
.logo img {
  display: block;
  height: 64px;       /* increased from 40px for better visibility */
  width: auto;
  object-fit: contain;
  margin-top: 2px;    /* vertically balanced */
}

/* Hover effect */
.logo:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(255, 92, 43, 0.25);
}

/* Pause on hover/focus inside marquee */
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track {
  animation-play-state: paused;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* Keyframes for seamless scroll */
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* exactly half because we duplicated the set */
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .marquee__track { gap: 28px; }
  .logo img { height: 28px; }
  .logo { padding: 8px 14px; }
}

/* --- Partnerships Heading Styling --- */
#our-partnerships .section-title {
  text-align: center;
  position: relative;
  margin: 0 auto;
  padding-bottom: 12px; /* underline spacing from text */
  margin-bottom: 20px; /* spacing before subtext */
}

#our-partnerships .section-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 70px;
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(90deg, #ff7b52, #ff5c2b);
}

/* --- Subheading text (below Our Partnerships) --- */
#our-partnerships .subtext {
  text-align: center;
  font-size: 1.1rem;
  color: #6e6e6e;
  max-width: 680px;
  margin: 0 auto 40px;
  line-height: 1.6;
  font-weight: 500;
}

/* ==== Centered underline for "Our Partnerships" ==== */
.partners-marquee .section-title.center {
  position: relative;
  display: inline-block;
  text-align: center;
  padding-bottom: 12px;
  margin: 0 auto;                 /* centers the heading itself */
  left: 50%;
  transform: translateX(-50%);    /* perfect center alignment */
}

.partners-marquee .section-title.center::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 90px;
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(90deg, #ff7b52, #ff5c2b);
}




.hero-split {
  background: linear-gradient(
    135deg,
    color: #ffffff;
background-color: #fff;
 /* softer tone blend */
  ) !important;
  color: #fff;
  padding: clamp(20px, 3vw, 36px) 20px;
  min-height: 55vh;
  display: flex;
  align-items: center;
  border-top-right-radius: 60px;
  border-bottom-left-radius: 60px;
  box-shadow: 0 10px 30px rgba(255, 75, 75, 0.15); /* soft glow */
}


.hero-split .hero-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(18px, 3vw, 42px);
  align-items: center;
}

/* ✅ Move text to LEFT */
.hero-split .hero-copy {
  text-align: left;
  padding-left: 40px;
}

/* Compact label fits exactly around text */
.hero-split .eyebrow {
  display: inline-block;
  color: #ff4b4b;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.3px;
  padding: 3px 8px;                 /* tighter box */
  border: 1px solid rgba(255, 75, 75, 0.4);
  border-radius: 6px;
  background: rgba(255, 75, 75, 0.04);  /* light tint */
  margin-bottom: 10px;
  line-height: 1;
  width: fit-content;               /* box auto-sizes to text */
  white-space: nowrap;              /* prevents line wrap */
  box-shadow: none;
}


/* Main heading (smaller, cleaner) */
.hero-split h1 {
  font-family: "Epilogue", Inter, system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(22px, 3.2vw, 32px); /* smaller and responsive */
  line-height: 1.15;
  letter-spacing: -0.2px;
  margin: 4px 0 10px;
  max-width: 30ch;
  color: #000;
}

/* Subtext */
.hero-split .sub {
  color: #000;
  font-size: clamp(14px, 1.1vw, 15px);
  line-height: 1.45;
  margin-top: 6px;
  max-width: 46ch;
}

/* CTA button styling */
.hero-split .cta-button {
  background: #fff;
  color: #ff4b4b;
  border-radius: 10px;
  padding: 10px 18px;
  font-size: 0.9rem;
  font-weight: 700;
  margin-top: 14px;
  text-decoration: none;
  transition: all 0.2s;
}
.hero-split .cta-button:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* Image (fixed height and centered) */
.hero-split .hero-art {
  position: relative;
  min-height: 250px;
  border-radius: 19px;
  overflow: hidden;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.15);
}
.hero-split .hero-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ✅ Responsive Fixes */
@media (max-width: 900px) {
  .hero-split {
    min-height: auto;
    padding: 36px 20px;
  }

  .hero-split .hero-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero-split .hero-copy {
    text-align: center;
    padding-left: 0;
  }

  .hero-split h1 {
    font-size: clamp(20px, 5vw, 28px);
    max-width: none;
  }

  .hero-split .sub {
    font-size: 15px;
    max-width: none;
  }
}
/* Desktop: text left, image right */
@media (min-width: 901px) {
  .hero-split .hero-copy { order: 1; }
  .hero-split .hero-art  { order: 2; }
}

/* Mobile: image on top, text below (already centered by your rules) */
@media (max-width: 900px) {
  .hero-split .hero-art  { order: 1; }
  .hero-split .hero-copy { order: 2; }
}
/* =========================
   Floating Hero Image Effect
   ========================= */
.hero-split .hero-art {
  position: relative;
  max-width: 540px;
  aspect-ratio: 4 / 3;
  border-radius: 28px 80px 28px 28px;  /* curved top-right edge */
  overflow: hidden;
  background: rgba(255,255,255,0.05);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.15),
    0 8px 20px rgba(255, 126, 103, 0.25); /* orange glow tint */
  transform: translateY(0);
  transition: all 0.5s ease;
}

/* Image inside stays responsive */
.hero-split .hero-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s ease;
  border-radius: inherit;
}

/* Hover animation: subtle float and zoom */
.hero-split .hero-art:hover {
  transform: translateY(-10px);
  box-shadow:
    0 28px 50px rgba(0, 0, 0, 0.25),
    0 12px 30px rgba(255, 126, 103, 0.35);
}

.hero-split .hero-art:hover img {
  transform: scale(1.05);
}
/* === Fix: Restore original brand orange background === */
.hero-split {
  background: #fff !important; /* solid brand white */
}

/* Add space above the CTA button inside hero section */
.hero-split .cta-button {
  margin-top: 28px !important;   /* adjust to your liking (20–40px looks good) */
}
/* ==== Logos (Cizo theme) ===== */
.sf-partners{
  padding: 48px 0;
  /* soft section background that matches your rose theme */
  background: linear-gradient(180deg,#fffdf9 0%, #fff7f7 100%);
}

.sf-partners .section-title{
  text-align:center;
  margin: 0 0 22px;
  font-size: clamp(22px, 2.6vw, 36px);
  font-weight: 800;
  color: var(--ink-strong);
}

/* Grid card wrapper (Salesforce vibe) */
.sf-partners .sf-grid{
  list-style:none;
  margin: 0 auto;
  padding: 24px;
  max-width: 980px;

  display:grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap: 24px;

  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(255,75,75,.10);
}

/* Individual logo tiles */
.sf-partners .sf-logo{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:18px 10px;
  border-radius:14px;
  transition: background .2s, box-shadow .2s, transform .2s;
}

.sf-partners .sf-logo img{
  width: 78px;
  height: 78px;
  object-fit:contain;
  /* Salesforce-like muted to vivid on hover */
  filter: grayscale(100%) contrast(.9) opacity(.78);
  transition: transform .25s, filter .25s;
}

.sf-partners .sf-logo span{
  font-weight:600;
  color: var(--muted);
  font-size: .95rem;
}

.sf-partners .sf-logo:hover{
  background:#fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0,0,0,.08), 0 4px 12px rgba(255,75,75,.12);
}

.sf-partners .sf-logo:hover img{
  filter: grayscale(0) opacity(1);
  transform: translateY(-1px) scale(1.04);
}

/* Responsive columns (Salesforce-style breathing room) */
@media (max-width: 900px){
  .sf-partners .sf-grid{ grid-template-columns: repeat(4,1fr); }
}
@media (max-width: 600px){
  .sf-partners .sf-grid{ grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 420px){
  .sf-partners .sf-grid{ grid-template-columns: repeat(2,1fr); }
}
/* ===== Modern Interactive CTA Button ===== */
/* ===== Compact Gradient CTA Button ===== */
.site-header .cta-button {
  background: linear-gradient(90deg, #ff6a3d, #ff4b4b);
  color: #fff;
  font-weight: 700;
  padding: 6px 14px !important; /* reduced size */
  font-size: 0.85rem !important; /* slightly smaller text */
  border-radius: 8px !important;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(255, 75, 75, 0.25);
  transition: all 0.25s ease-in-out;
  transform: translateY(0);
}

/* Hover effect */
.site-header .cta-button:hover {
  background: linear-gradient(90deg, #ff8557, #ff2e2e);
  box-shadow: 0 4px 10px rgba(255, 75, 75, 0.4);
  transform: translateY(-2px);
  cursor: pointer;
}

/* Click/active effect */
.site-header .cta-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 5px rgba(255, 75, 75, 0.3);
}


/* --- Global motion tokens --- */
:root{
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-inout: cubic-bezier(.22,.61,.36,1);
  --t-fast: 150ms;
  --t-med: 280ms;
}

/* Smooth anchor scrolling */
html { scroll-behavior: smooth; }

/* Sticky header polish */
.site-header.header{
  transition: box-shadow var(--t-med) var(--ease-out),
              background-color var(--t-med) var(--ease-out);
}
.site-header.header.is-scrolled{
  /* subtle elevation only after you scroll a bit */
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  background: rgba(255,253,249,.96);
}

/* Respect reduced motion users */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}
/* --- Step 2: Hero polish (subtle parallax + reveal) --- */

/* Generic reveal animation */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--t-med, 280ms) var(--ease-out, cubic-bezier(.16,1,.3,1)),
    transform var(--t-med, 280ms) var(--ease-out, cubic-bezier(.16,1,.3,1));
  will-change: opacity, transform;
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Parallax target (hero image) uses a CSS var to move */
.hero-split .hero-art.parallax {
  transform: translateY(var(--y, 0px));
  will-change: transform;
}

/* Slightly stagger the headline and sub to feel premium */
.hero-split h1.reveal { transition-delay: 60ms; }
.hero-split .sub.reveal { transition-delay: 140ms; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .reveal { opacity: 1 !important; transform: none !important; }
  .hero-split .hero-art.parallax { transform: none !important; }
}
/* =========================
   Step 3 — Subtle gradient header glow + micro-interactions
   ========================= */

/* --- Gradient glow under sticky header --- */
/* Warm off-white header that matches the orange theme */
.site-header.header{
  position: fixed;             /* keep it constant */
  top: 0; left: 0; right: 0;
  z-index: 9999;

  /* subtle warm tint + tiny vertical gradient */
  background:
    linear-gradient(
      to bottom,
      rgba(255, 244, 240, .88), /* #fff4f0 */
      rgba(255, 244, 240, .84)
    );
  backdrop-filter: saturate(1.15) blur(8px);
  -webkit-backdrop-filter: saturate(1.15) blur(8px);

  /* warmer border + softer shadow */
  border-bottom: 1px solid rgba(255, 106, 61, 0.22);
  box-shadow:
    0 2px 12px rgba(255, 75, 75, 0.10),
    0 1px 0 rgba(255, 106, 61, 0.06);

  height: 64px;
  transition: box-shadow .28s cubic-bezier(.22,.61,.36,1),
              background-color .28s cubic-bezier(.22,.61,.36,1);
}

/* Slightly increase opacity + depth when scrolled */
.site-header.header.is-scrolled{
  background:
    linear-gradient(
      to bottom,
      rgba(255, 240, 236, .95), /* a hair stronger */
      rgba(255, 240, 236, .92)
    );
  box-shadow:
    0 8px 24px rgba(0,0,0,.08),
    0 1px 0 rgba(255, 106, 61, 0.10);
}

/* Keep the tiny gradient glow line you already had, just warm the hue */
.site-header.header::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-1px; height:3px;
  background: linear-gradient(90deg, rgba(255,75,75,.55) 0%, rgba(255,140,110,.18) 100%);
  opacity: .9;
  transform-origin:left;
  transform: scaleX(1);
}

.site-header.header.is-scrolled::after {
  opacity: 1;
  transform: scaleX(1);
}

/* --- CTA Button Hover Animation --- */
.cta-button:hover {
  transform: translateY(-2px);
  animation: pulse 1s infinite;
  box-shadow: 0 5px 10px rgba(255, 75, 75, 0.3);
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 rgba(255, 75, 75, 0.4); }
  70% { box-shadow: 0 0 20px rgba(255, 75, 75, 0.6); }
  100% { box-shadow: 0 0 0 rgba(255, 75, 75, 0.4); }
}



/* --- Cards: slight lift & shadow --- */
.feature-card,
.testimonial-card,
.sf-logo {
  transition: transform 240ms var(--ease-out,.16,1,.3,1),
              box-shadow 240ms var(--ease-out,.16,1,.3,1),
              background-color 240ms var(--ease-out,.16,1,.3,1);
}
.feature-card:hover,
.testimonial-card:hover,
.sf-logo:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.12);
  background-color: rgba(255,255,255,0.98);
}

/* --- CTA button micro-bounce --- */
.cta-button {
  transition: transform 180ms var(--ease-out,.16,1,.3,1),
              box-shadow 180ms var(--ease-out,.16,1,.3,1),
              background-color 180ms var(--ease-out,.16,1,.3,1);
}
.cta-button:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 10px 24px rgba(255,75,75,0.18);
}
.cta-button:active {
  transform: scale(0.98);
}

/* --- Partner logos soft grayscale-to-color --- */
.sf-logo img {
  filter: grayscale(100%) contrast(110%);
  opacity: .85;
  transition: filter 0.3s var(--ease-out,.16,1,.3,1), opacity 0.3s;
}
.sf-logo:hover img {
  filter: grayscale(0%) contrast(100%);
  opacity: 1;
}
/* =========================
   Step 4 — Scroll reveal sequencing
   ========================= */
.reveal {
  opacity: 0;
  transform: translateY(14px) scale(.985);
  filter: blur(2px);
  transition:
    opacity 600ms cubic-bezier(.2,.8,.2,1),
    transform 600ms cubic-bezier(.2,.8,.2,1),
    filter   600ms cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform, filter;
}
.reveal.is-in {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* allow per-item stagger via a CSS var set in JS */
.reveal { transition-delay: var(--reveal-delay, 0ms); }

/* no surprises for folks who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; filter: none; transition: none; }
}
/* ====== Curved overlap under header / hero ====== */
:root{
  /* you already have --brand & --brand-2; keep your values.
     If --brand-2 doesn’t exist, this fallback keeps harmony. */
  --brand-2: #ff8461;
}
.curved-overlap{
  position: relative;
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-2) 100%);
  height: 56px;
  z-index: 0;
}
.curved-overlap .curve-top{
  position: absolute; top: -56px; left: 0; width: 100%; height: 120px; display:block;
}
.curved-overlap .curve-top path{ fill: var(--brand); opacity:.95; }

/* ====== Section helpers ====== */
.section-soft{
  background: radial-gradient(1200px 300px at 50% 0, #ffccb8 0%, #ffe8de 35%, #fff 60%);
}
.container{max-width:1200px;margin:0 auto;padding:48px 24px;}
.h2{font-size:clamp(28px,3.5vw,44px);font-weight:800;color:var(--ink);margin:0 0 28px;}
.center{text-align:center}

/* ===== Partners — Salesforce clean cards, no outer box ===== */

:root{
  --partners-bg: #f9fbfd;                /* soft light background */
  --title-ink: #111;
  --accent: #ff6a3d;
  --card-border: #e4ebf3;
  --card-shadow: 0 8px 22px rgba(0, 0, 0, 0.06);
  --card-shadow-hover: 0 16px 36px rgba(0, 0, 0, 0.12);
  --radius: 16px;
}

.sf-partners{
  background: var(--partners-bg);
  padding: 80px 0;
  text-align: center;
}

.sf-container{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Remove all container box visuals */
.sf-container::before,
.sf-container::after {
  content: none !important;
  display: none !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Heading */
.sf-title{
  margin: 0;
  font-size: 40px;
  font-weight: 800;
  color: var(--title-ink);
}
.sf-underline{
  width: 110px;
  height: 4px;
  margin: 14px auto 48px;
  background: var(--accent);
  border-radius: 2px;
}

/* Partner Grid */
.sf-grid{
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 40px;
  justify-content: center;
  align-items: center;

  /* REMOVE outer box effect */
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Partner Cards — clean floating look */
.sf-card{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 150px; /* slightly bigger */
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.sf-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--card-shadow-hover);
}

/* Partner logos */
.sf-card img{
  max-height: 50px;
  max-width: 80%;
  object-fit: contain;
  filter: none !important;
  opacity: 1 !important;
}

/* Mobile responsive */
@media (max-width: 768px){
  .sf-grid{ gap: 24px; }
  .sf-card{ height: 120px; }
  .sf-card img{ max-height: 40px; }
}


/* =========================
   Cizo Base Theme
   ========================= */
:root{
  --bg:#fffdf9;
  --ink:#2d2e2e;
  --ink-strong:#222;
  --muted:#6b6b6b;

  --brand:#3d4592;
  --brand-2:#ff4b4b;

  --surface:#ffffff;
  --border:#e9e5de;
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --radius:16px;

  /* Rose palette */
  --rose-50:#fff6f6;
  --rose-100:#ffecec;
  --rose-200:#ffd7d7;
  --rose-400:#ff6b6b;
  --rose-500:#ff4b4b;

  /* Type scale */
  --h1: clamp(32px, 5vw, 50px);
  --h2: clamp(24px, 3.2vw, 34px);
  --h3: clamp(20px, 2.6vw, 26px);
  --h4: clamp(18px, 2.2vw, 22px);
  --h5: 18px;
  --h6: 16px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.55;
}

/* Headings & shared title styling */
h1, h2, h3, h4, h5, h6,
.logo h1, .brand h1, .section-title h2{
  font-family:"Epilogue", Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:800; letter-spacing:.2px; line-height:1.08; margin:0 0 .5rem; color:var(--ink);
}
/* Center align the 'Meet Our Team' heading and underline */
#our-team .section-title {
  display: block;
  text-align: center;
  margin: 0 auto 12px;
  position: relative;
}

#our-team .section-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  width: 60px;
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(90deg, #ff7b52, #ff5c2b);
}


h1{font-size:var(--h1)}
h2{font-size:var(--h2)}
h3{font-size:var(--h3)}
h4{font-size:var(--h4)}
h5{font-size:var(--h5)}
h6{font-size:var(--h6)}

.container{max-width:1120px;margin:0 auto;padding:0 20px}
.center{text-align:center}
.muted{color:var(--muted)}
.highlight{color:var(--brand-2)}
.pill{
  display:inline-flex;align-items:center;gap:.5rem;background:var(--rose-100);
  color:var(--ink-strong); border:1px solid var(--rose-200); border-radius:999px;
  padding:.35rem .8rem; font-weight:600;
}

.solution-hero {
  background: linear-gradient(135deg, #3d4592, #6a74d9);
  color: #fff;
  padding: 72px 20px 56px;
  text-align: center;
}

.requirements h2 {
  color: var(--ink);
  font-size: 24px;
  font-weight: 800;
  margin-top: 40px;
  text-align: center;
}

.requirements p {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.7;
}

.requirements ul {
  color: var(--muted);
  font-size: 1rem;
  list-style-type: disc;
  margin-left: 40px;
}

.requirements li {
  margin-bottom: 10px;
}

.requirements {
  padding: 40px 20px;
  background: #fff;
}
.cta-button:hover {
  background-color: #ff6b6b !important; /* or your hover background color */
  color: #000000 !important;            /* keeps text black */
}
/* === FIX: normalize <a> cards and apply the stat card box === */
.stat-grid{
  display:grid; gap:24px; grid-template-columns:repeat(3,1fr);
}
@media (max-width:980px){ .stat-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:620px){ .stat-grid{ grid-template-columns:1fr; } }

/* theme colors */
.stat--purple{ --c:#7a5af8; --ink:#1d2740; --cta-on:#ffffff; }
.stat--green { --c:#16a34a; --ink:#0b2b17; --cta-on:#ffffff; }
.stat--orange{ --c:#ff6b35; --ink:#2a1d16; --cta-on:#ffffff; }

/* core card */
.stat-card{
  display:flex; flex-direction:column; gap:14px;
  min-height:260px;
  padding:28px 32px 24px;
  background:#fff;
  color:var(--ink);
  border:2px solid color-mix(in srgb, var(--c) 55%, #fff);
  border-radius:24px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  position:relative; overflow:hidden; isolation:isolate;

  /* kill default link look */
  text-decoration:none !important;
}
.stat-card:link,
.stat-card:visited,
.stat-card *{
  color:inherit;
  text-decoration:none !important;
}

/* lift + shadow */
.stat-card:hover,
.stat-card:focus-visible{
  transform: translateY(-8px);
  box-shadow:0 14px 40px rgba(0,0,0,.12);
  transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s;
}

/* icon + title centered */
.stat-header{ display:flex; justify-content:center; }
.stat-ico{ width:60px; height:60px; object-fit:contain; transition:transform .3s; }
.stat-card:hover .stat-ico{ transform:scale(1.08); }

.stat-title{
  text-align:center;
  font-weight:800; letter-spacing:.2px; margin:8px 0 4px;
}
.stat-sub{
  text-align:center;
  color:#3a3a3a; margin:0 0 12px; line-height:1.6;
}

/* CTA */
.stat-cta{
  margin-top:auto;
  display:inline-flex; align-items:center; gap:6px;
  align-self:center;
  font-weight:700;
  color:var(--c);
}
.stat-card .arrow{ transition:transform .25s; }
.stat-card:hover .arrow{ transform:translateX(3px); }

/* decorative corner blob */
.stat-card::after{
  content:"";
  position:absolute; right:-40px; bottom:-36px;
  width:220px; height:140px; background:var(--c);
  border-radius:60% 40% 30% 70% / 60% 60% 40% 40%;
  opacity:.08; transform:rotate(-8deg) scale(1);
  transition:transform .45s cubic-bezier(.16,1,.3,1), opacity .35s;
}
.stat-card:hover::after{ transform:rotate(-4deg) translateY(-6px) scale(1.08); opacity:.14; }

/* hover fill (no default fill) */
.stat-card:hover{
  background:var(--c);
  color:#fff; border-color:transparent;
}
.stat-card:hover .stat-title,
.stat-card:hover .stat-sub{ color:#fff; }
.stat-card:hover .stat-cta{ color:var(--cta-on); }
/* =========================================================
   Cloud Solutions — polished image hero (shorter + brighter)
   ========================================================= */
:root{
  /* tweak these to taste */
  --hero-accent: #FFFFFF;   /* warm peach that matches your orange network */
  --hero-copy:   #ffffff;   /* body text on the hero */
  --hero-shadow: rgba(0,0,0,.40);
}

/* Cloud Solutions Hero Section */
/* ===== Refined Cloud Hero (no big dark box) ===== */
.solution-hero{
  position: relative;
  height: 86vh;
  display: grid;
  align-items: center;
  padding: clamp(56px, 7vw, 120px) 22px;
  overflow: hidden;
  color: #fff;
  /* gentle vignette so text always reads */
  background:
    radial-gradient(1200px 500px at 15% 30%, rgba(0,0,0,.35), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.55) 70%);
}
.solution-hero::before{
  content:"";
  position:absolute; inset:0;
  background: url("/assets/images/CS.png") center/cover no-repeat;
  filter: brightness(.72) saturate(1.15);
  transform: scale(1.04);
  animation: heroZoom 18s ease-in-out infinite alternate;
  z-index: 0;
}
@keyframes heroZoom{ from{transform:scale(1)} to{transform:scale(1.08)} }

/* text sits on the left, no heavy panel */
.hero-text{
  position: relative;
  z-index: 1;
  max-width: 920px;
  margin-left: clamp(8px, 8vw, 100px);
  text-align: left;
}

/* soft “energy band” behind the text (not a box) */
.hero-text::before{
  content:"";
  position:absolute;
  left:-10vw; right:-8vw; top:28%;
  height: clamp(160px, 26vh, 260px);
  transform: skewY(-5deg);
  filter: blur(16px);
  background:
    linear-gradient(90deg,
      rgba(255,106,61,.14),
      rgba(255,131,90,.18) 45%,
      rgba(255,106,61,.12));
  mix-blend-mode: screen;
  z-index:-1;
}

/* Headline: crisp white with subtle depth */
.hero-text h1{
  margin: 0 0 10px;
  font: 800 clamp(38px, 6vw, 72px)/1.05 "Inter", system-ui, sans-serif;
  letter-spacing: -.02em;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.45);
}

/* optional accent color on the first word */
.hero-text h1 .accent{
  background: linear-gradient(90deg, #fff 0%, #ffe5dc 60%, #ffd2bf 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Underline accent */
.hero-text h1::after{
  content:"";
  display:block;
  width: 110px; height: 5px;
  margin-top: 12px;
  border-radius: 3px;
  background: linear-gradient(90deg, #ff7b52, #ff4b2b);
  box-shadow: 0 6px 24px rgba(255,100,70,.35);
}

/* Subtitle */
.hero-text p{
  margin: 14px 0 28px;
  max-width: 760px;
  color: rgba(255,255,255,.92);
  font-size: clamp(16px, 2.1vw, 20px);
  line-height: 1.55;
  text-shadow: 0 1px 10px rgba(0,0,0,.45);
}

/* CTA: compact, premium, with tiny arrow */
.hero-text .cta-button{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(90deg, #ff6a3d, #ff4b4b);
  color: #fff;
  padding: 12px 22px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.98rem;
  text-decoration: none;
  border: 2px solid transparent;
  box-shadow: 0 10px 28px rgba(255, 85, 60, .35);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.hero-text .cta-button:hover{
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow: 0 16px 36px rgba(255, 85, 60, .45);
}
.hero-text .cta-button svg{
  width: 18px; height: 18px; display: block;
}

/* Mobile polish */
@media (max-width: 860px){
  .hero-text{ margin: 0 auto; text-align:center; }
  .hero-text::before{ left:-20vw; right:-20vw; top:36%; }
  .hero-text h1::after{ margin-left:auto; margin-right:auto; }
}


/* CTA Button */
.cta-button {
  background: linear-gradient(90deg, #ff6a3d, #ff4b4b);
  color: #fff;
  padding: 14px 34px;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
  font-size: 1.05rem;
  letter-spacing: 0.4px;
  box-shadow: 0 10px 25px rgba(255, 75, 75, 0.25);
  transition: all 0.3s ease;
  animation: fadeInUp 1.8s ease;
}

.cta-button:hover {
  background: linear-gradient(90deg, #ff8459, #ff5050);
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 16px 35px rgba(255, 100, 80, 0.45);
}

/* Subtle entry animations */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(25px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-25px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- Key Features & Benefits section spacing & styling --- for database solutions  */
.kb-wrap {
  margin-top: 60px; /* adds breathing room below hero image */
  padding-top: 40px;
  padding-bottom: 20px;
  text-align: center;
  background: linear-gradient(to bottom, #fffaf7 0%, #ffffff 100%);
  border-top: 1px solid rgba(0,0,0,0.05);
  position: relative;
}
/* Heading styling */
.kb-wrap h2 {
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 800;
  color: #2d2d2d;
  letter-spacing: 0.5px;
  margin-bottom: 28px;
  position: relative;
  display: inline-block;
}
/* Add subtle underline accent */
.kb-wrap h2::after {
  content: "";
  display: block;
  width: 60%;
  height: 4px;
  background: linear-gradient(90deg, #ff7f32, #ffb87a);
  border-radius: 2px;
  margin: 10px auto 0;
  opacity: 0.85;
}

/* Optional glowing effect for more visual appeal */
.kb-wrap h2:hover::after {
  filter: brightness(1.2);
  transform: scaleX(1.05);
  transition: all 0.3s ease;
}

/* Smooth section transition from hero */
.solution-hero {
  border-bottom: none;
}
/* Container to hold cards */
.cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  padding: 20px;
  justify-items: center;
}

/* Card styles */
.card {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.card h3 {
  font-size: 1.2rem;
  margin-bottom: 10px;
  color: #333;
}

.card p {
  color: #666;
  font-size: 1rem;
  margin-bottom: 20px;
}

/* Card hover effects */
.card:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

/* Add a background color on hover */
.card:hover {
  background-color: #f4f4f4;
}


/* =============================
   BASE VARIABLES
   ============================= */
:root {
  --brand--black: #000;
  --brand--blakish: #323338;
  --brand--white: #fff;
  --brand--primary: #6161ff;
  --brand--light: #f0f3ff;
  --brand--border: #d0d4e4;
  --brand--marketing: #9d50dd;
  --brand--pink: #ff7575;
  --brand--yellow: #fc0;
  --brand--light-grey: #f3f3f5;
  --brand--primary-blue: #0073ea;
  --brand--working-orange: #fdab3d;
  --wm--highlight-cold: #97aeff;

  /* Spacing */
  --_spacing---padding-global: 2rem;
  --_spacing---padding-sec-large: 6rem;
  --_spacing---padding-section-md: 4rem;
  --_spacing---padding-section-sm: 3rem;
  --_spacing---full-width: 100%;
  --_spacing---container-large: 86rem;

  /* Dev */
  --dev--primary: #00ca72;
  --dev--contrast: #025231;
  --dev--alternative: #008559;

  /* Service */
  --service--primary: #fc527d;
  --service--contrast: #98013d;

  /* CRM */
  --crm--primary: #00a3c3;
  --crm--contrast: #0c86ab;
  --crm--dark: #006278;
  --crm--bright: #24c4e6;

  /* Layout */
  --layout-border-color: #d0d4e4;
}

/* =============================
   STRUCTURE & CONTAINERS
   ============================= */
.css-1cdmlfu {
  display: flex;
  gap: 100px;
  min-height: 959px;
}

.css-1cdmlfu.vertical-view {
  flex-direction: column;
  align-items: center;
  margin: 0 32px;
}

.css-1s2t9qz {
  position: relative;
  width: fit-content;
}

.use-cases-container {
  position: absolute;
  top: -30px;
  right: 0;
  z-index: 200;
}

/* =============================
   CARDS / SEGMENTS
   ============================= */
.css-1zqrqz .segment-wrapper.card {
  margin: 0 16px;
  border-radius: 40px;
  background-color: #f0f3ff;
  position: relative;
}

.css-1zqrqz .segment-wrapper {
  margin: 0 16px;
  border-radius: 40px;
  transform: none;
}

/* =============================
   TAGS GRID & COMPONENTS
   ============================= */
.css-g4cp0b {
  display: flex;
  flex-direction: column;
  width: fit-content;
  padding: 24px 16px 16px;
  gap: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 40%, rgba(240, 243, 255, 0.3) 80%);
  box-shadow: 3.977px 3.977px 34.8px rgba(0, 0, 0, 0.15);
  border-radius: 18px;
  border: 1px solid #dcdfec;
  backdrop-filter: blur(24px);
}

.css-g4cp0b .tags-container {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 12px;
  width: fit-content;
}

.tag-component {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100px;
  height: 96px;
  border-radius: 8px;
  background-color: #fff;
  border: 0.6px solid #c3c6d4;
  cursor: pointer;
  font-size: 0.875rem;
}

/* =============================
   BUTTONS
   ============================= */
button.ladda-button {
  padding: 16px 32px;
  font-size: 1rem;
  border-radius: 40px;
  border: none;
  font-weight: 400;
  text-align: center;
  cursor: pointer;
  user-select: none;
  line-height: 17px;
}

button.ladda-button.workos-iris {
  background-color: #6161ff;
  color: #fff;
}

button.ladda-button.xs {
  font-size: 0.8125rem;
  padding: 8px 16px;
}

/* =============================
   IMAGE STYLES
   ============================= */
.css-1s2t9qz img {
  width: 100%;
  object-fit: contain;
  max-width: 970px;
}

.assets-container {
  position: relative;
  z-index: 100;
  width: fit-content;
  min-width: 970px;
}

/* =============================
   TEXT STYLES
   ============================= */
.css-18anjwe .core-title.xxl {
  font-size: 4.5rem;
  line-height: 85px;
  font-weight: 700;
  text-align: center;
}

.css-18anjwe .core-title {
  font-size: 2.25rem;
  line-height: 48px;
  word-break: break-word;
  font-weight: 400;
}


/* --- Image swapper viewport --- */
.assets-container {
  position: relative;
  z-index: 100;
  width: fit-content;
  min-width: 970px;           /* keep your width */
  overflow: hidden;           /* keep images inside */
}

/* treat every slide (default + picture-wrapper) as a layer */
.assets-container > .default-asset,
.assets-container > .picture-wrapper {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}

/* show the active slide */
.assets-container > .active {
  opacity: 1;
  pointer-events: auto;
}

/* image sizing inside the viewport */
.assets-container picture,
.assets-container img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 970px;
  object-fit: contain;
}

/* make sure something is visible on load */
.assets-container > .default-asset { opacity: 1; }

/* tag visual selection (optional) */
.tags-container .tag-component {
  outline: none;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.tags-container .tag-component:focus-visible,
.tags-container .tag-component.is-active {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
  border-color: var(--brand--primary);
}
/* ===========================
   USE CASES — VISUAL STYLING
   =========================== */

/* Main wrapper layout (image + grid) */
.uc-wrap {
  max-width: 1100px;
  margin: 40px auto 20px;
  padding: 0 20px;
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

/* Left preview image box (final full-bleed version is below, this one is overridden) */
.uc-preview {
  flex: 1;
  min-width: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 3px solid #ff914d;          /* orange border */
  border-radius: 24px;
  overflow: hidden;                   /* ensures no extra space inside */
  box-shadow: 0 8px 28px rgba(0,0,0,0.06);
  aspect-ratio: 4 / 3;
  max-height: 500px;
  padding: 0;                         /* removes internal gap */
}

/* The image itself */
.uc-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;                  /* fills the area perfectly */
  border-radius: 0;                   /* removes inner curve */
  transition: opacity 0.3s ease-in-out;
}

/* Right side panel with heading and cards */
.uc-panel {
  background: #ffffff;
  border-radius: 28px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
  padding: 24px 22px 22px;
  width: min(540px, 100%);
  border: 1px solid #f3e5dd;
}

.uc-panel h3 {
  margin: 6px 8px 16px;
  font-weight: 700;
  font-size: 18px;
  color: #111;
}

/* Grid layout for the small cards */
.uc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

/* Individual small card (button) – PRO STYLE */
.uc-card {
  position: relative;
  border-radius: 20px;
  background: radial-gradient(circle at top left, #fff7f0 0, #ffffff 55%);
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  padding: 14px 10px 12px;
  border: 1px solid rgba(255, 145, 77, 0.55);
  box-shadow:
    0 4px 12px rgba(15, 23, 42, 0.03),
    0 1px 0 rgba(15, 23, 42, 0.04);
  transition:
    transform 0.18s var(--ease-out, cubic-bezier(.16,1,.3,1)),
    box-shadow 0.18s var(--ease-out, cubic-bezier(.16,1,.3,1)),
    border-color 0.18s var(--ease-out, cubic-bezier(.16,1,.3,1)),
    background 0.18s var(--ease-out, cubic-bezier(.16,1,.3,1));
  user-select: none;
  background-clip: padding-box;
}

/* Hover & focus effect */
.uc-card:hover,
.uc-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(255, 145, 77, 0.28);
  border-color: #ff6f1e;
  outline: none;
}

/* Selected card (pressed) */
.uc-card[aria-pressed="true"] {
  border-color: #ff6a3d;
  box-shadow: 0 18px 40px rgba(255, 106, 61, 0.40);
  background: radial-gradient(circle at top left, #ffe2d0 0, #ffffff 60%);
}

/* Small checkbox style (top-left corner) */
.uc-checkbox {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  border: 2px solid rgba(255, 106, 61, 0.7);
  display: grid;
  place-items: center;
  background: #fff;
  box-shadow: 0 2px 5px rgba(15, 23, 42, 0.18);
}

.uc-card[aria-pressed="true"] .uc-checkbox::after {
  content: "";
  width: 10px;
  height: 10px;
  background: #ff4b4b;
  clip-path: polygon(14% 56%, 0 70%, 36% 100%, 100% 28%, 86% 14%, 36% 72%);
}

/* Card icon and label */
.uc-icon {
  width: 30px;
  height: 30px;
  object-fit: contain;
  opacity: 0.95;
  filter: drop-shadow(0 2px 4px rgba(15, 23, 42, 0.18));
}

.uc-label {
  font-size: 13px;
  font-weight: 600;
  color: #1f2933;
  text-align: center;
  padding: 0 8px;
}

.uc-card[aria-pressed="true"] .uc-label {
  color: #111827;
}

/* Responsive (stack vertically on mobile) */
@media (max-width: 900px) {
  .uc-wrap {
    flex-direction: column;
    gap: 20px;
  }

  .uc-preview {
    aspect-ratio: 3 / 2;
    max-height: 360px;
  }

  .uc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ===== Mobile ===== */
@media (max-width: 900px) {
  .hero-split.hero--bg .hero-copy {
    width: 100%;
    background: #ffffff;                      /* keep white on mobile too */
  }
}

#uc-preview-content {
  width: 100%;
  height: 100%;
  padding: 20px;
  background: #ffffff;
  border-radius: 16px;
  overflow: auto;
}

#uc-preview-content h4 {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 700;
  color: #111;
}
#uc-preview-content p {
  margin: 0 0 10px;
  color: #333;
}
#uc-preview-content ul {
  margin: 0;
  padding-left: 18px;
  color: #333;
}

/* === Full-bleed preview image (no inner box) === */
.uc-preview{
  position: relative;
  flex: 1;
  min-width: 280px;

  /* Remove the 'box' styling */
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;

  /* Keep the nice rounded outer shape & clip the image to it */
  border-radius: 24px;
  overflow: hidden;

  /* Make it tall enough to feel immersive */
  height: 560px;                /* adjust to taste */
  aspect-ratio: auto;           /* let height drive it */
}

/* The image should completely fill the preview area */
.uc-preview img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;             /* full bleed */
  border-radius: 0;              /* no inner rounding */
}

/* Mobile: slightly smaller height */
@media (max-width: 900px){
  .uc-preview{
    height: 360px;
  }
}

/* --- Use-cases section spacing (keeps the title nicely centered & separated) --- */
#use-cases {
  /* room from the previous section */
  padding-top: 72px;
  /* if you ever anchor-link to this id, it won't hide under fixed header */
  scroll-margin-top: 96px;
}

/* space under the centered title + orange underline */
#use-cases .sf-container {
  margin: 0 auto 28px;
}

/* reduce the top margin on the content row since we added padding above */
#use-cases .uc-wrap {
  margin-top: 20px;   /* was 40px in base rules */
}



/* ===== RQ–CH–OBJ (alternating split) ===== */
.rqco{
  padding: 70px 0 40px;
  background: linear-gradient(180deg,#fffaf7 0%, #ffffff 100%);
}

.rqco .container{ max-width: 1150px; }

/* one row */
.rsplit{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(24px,3vw,48px);
  align-items:center;
  margin: 28px 0 60px;
  position: relative;
}

/* subtle divider line between rows */
.rsplit:not(:last-child)::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-30px; height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,106,61,.18), transparent);
}

/* columns */
.rsplit .col{ min-width:0; }
.rsplit .col-copy{ order:1; }
.rsplit .col-media{ order:2; }

/* auto-reverse middle row (Challenges) */
.rsplit:nth-child(2) .col-copy{ order:2; }
.rsplit:nth-child(2) .col-media{ order:1; }

/* text side */
.rqco .eyebrow{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,75,75,.25);
  background:rgba(255,107,107,.08);
  color:#ff4b4b;
  font-weight:700;
  letter-spacing:.2px;
  font-size:.8rem;
  margin-bottom:10px;
}

.rqco h2{
  font-size: clamp(26px, 3vw, 36px);
  line-height:1.15;
  margin: 4px 0 14px;
  font-weight:800;
  color: var(--ink-strong);
  position: relative;
}
.rqco h2::after{
  content:"";
  display:block;
  width:72px; height:4px; margin:10px 0 0;
  background: linear-gradient(90deg,#ff8b4d,#ff4b2b);
  border-radius: 2px;
  opacity:.9;
}

.copy-card{
  background:#fff;
  border:1px solid var(--rose-200);
  border-radius: 16px;
  padding: clamp(18px,2vw,26px);
  box-shadow: 0 12px 28px rgba(255,75,75,.08);
}

.copy-card p{ color: var(--muted); font-size:1.02rem; }
.copy-card .bullets{ margin:0; padding-left:20px; }
.copy-card .bullets li{ margin:10px 0; color: #3a3a3a; }

/* small highlight pills under Objective */
.rqco .highlights{
  display:flex; flex-wrap:wrap; gap:10px; margin-top:14px;
}
.rqco .highlights .pill{
  background: #fff7f7;
  border:1px solid rgba(255,107,61,.28);
  color:#333;
}

/* image side */
.media-card{
  position:relative;
  border-radius: 20px;
  overflow:hidden;
  background: #fff;
  border:1px solid rgba(255,107,61,.18);
  box-shadow:
    0 18px 46px rgba(0,0,0,.10),
    0 8px 26px rgba(255,126,103,.18);
  transition: transform .35s cubic-bezier(.16,1,.3,1),
              box-shadow .35s cubic-bezier(.16,1,.3,1);
}
.media-card img{
  display:block; width:100%; height:100%; object-fit:cover;
}
.media-card:hover{
  transform: translateY(-6px);
  box-shadow:
    0 26px 60px rgba(0,0,0,.16),
    0 12px 34px rgba(255,126,103,.24);
}

/* responsive */
@media (max-width: 900px){
  .rsplit{
    grid-template-columns: 1fr;
    margin: 20px 0 46px;
  }
  .rsplit .col-copy{ order:1 !important; }
  .rsplit .col-media{ order:2 !important; }
}


/* ===== FAQ — clean card with orange accents (replace previous FAQ CSS) ===== */

.faq { background:#fffdf9; padding:56px 20px; }
.faq .wrap { max-width: 900px; margin: 0 auto; }

/* Heading with subtle underline accent */
.faq .section-title{
  margin:0 0 28px;
  display:inline-block;
  font-weight:800;
  color:var(--ink);
  position:relative;
}
.faq .section-title::after{
  content:"";
  position:absolute;
  left:0; bottom:-6px;
  width:60px; height:4px; border-radius:3px;
  background:linear-gradient(90deg, var(--rose-400), var(--rose-500));
}

/* Card */
.faq-item{
  margin:14px 0;
  border:1px solid var(--border);       /* light grey border */
  border-radius:12px;
  background:#fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
  transition: box-shadow .2s ease, border-color .2s ease, transform .12s ease;
  overflow:hidden;
}
.faq-item:hover{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.06); }

/* Row header */
.faq-item > summary{
  list-style:none; cursor:pointer; user-select:none;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:18px 20px;
  background:#fff;                       /* keep white */
  color:var(--ink); font-weight:800;
  border:none;
}
.faq-item > summary::-webkit-details-marker{ display:none; }

/* Small circular + badge on the right */
.faq-item > summary .chev{
  position:relative; flex:0 0 22px; width:22px; height:22px; border-radius:50%;
  border:2px solid var(--rose-400);
  box-sizing:border-box;
}
.faq-item > summary .chev::before,
.faq-item > summary .chev::after{
  content:""; position:absolute; left:50%; top:50%;
  width:10px; height:2px; margin:-1px 0 0 -5px;
  background:var(--rose-500); border-radius:1px;
  transition: transform .25s ease, opacity .2s ease;
}
.faq-item > summary .chev::after{ transform:rotate(90deg); } /* creates the + */

/* Open state: subtle emphasis, turn + into – */
.faq-item[open]{ border-color:var(--rose-400); box-shadow:0 10px 26px rgba(0,0,0,.08); }
.faq-item[open] > summary .chev::after{ opacity:0; transform:rotate(0deg); }

/* Content (smooth slide) */
.faq-content{
  max-height:0; overflow:hidden; opacity:0; padding:0 20px;
  border-top:1px solid #f1efeb;          /* thin divider */
  transition:max-height .28s ease, opacity .22s ease, padding .22s ease;
}
.faq-item[open] .faq-content{
  max-height:420px; opacity:1; padding:14px 20px 18px;
}
.faq-content p{ margin:0; color:var(--ink); line-height:1.6; }

/* Make sure no old styles leak through */
.faq-item > summary::before { content:none !important; }


/* Basic Style Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: #f8f5ee;
  color: #2d2e2e;
  line-height: 1.55;
}


/* Database Solutions style sheet */
/* Adjustable variables */
:root {
  --overlay-top: .32;
  --overlay-bottom: .38;
  --spot-alpha: .04;       /* 0 to disable */
  --kenburns-duration: 32s;
  --kenburns-scale-min: 1.05;
  --kenburns-scale-max: 1.12;
  --kenburns-shift: 8px;   /* vertical nudge up/down */
}

.database-hero {
  position: relative;
  height: 85vh;
  display: grid;
  place-items: center;
  text-align: center;
  color: #fff;
  overflow: hidden;
  padding: 0 20px;
}

.database-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1200px 600px at var(--spot-x, 50%) var(--spot-y, 40%),
      rgba(255,255,255,var(--spot-alpha)), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(0,0,0,var(--overlay-top)), rgba(0,0,0,var(--overlay-bottom))),
    url('../images/Database.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(var(--kenburns-scale-min)) var(--transform-extra, translate3d(0,0,0));
  will-change: transform;
  animation: kenburns var(--kenburns-duration) ease-in-out infinite alternate;
  z-index: -1;
}

@keyframes kenburns {
  0%   { transform: scale(var(--kenburns-scale-min)) translate3d(0, calc(-1 * var(--kenburns-shift)), 0); }
  100% { transform: scale(var(--kenburns-scale-max)) translate3d(0, var(--kenburns-shift), 0); }
}

.database-hero h1 {
  font-size: clamp(2.2rem, 5.6vw, 4rem);
  font-weight: 800;
  margin: 0 0 18px;
  text-shadow: 0 6px 18px rgba(0,0,0,.55);
  letter-spacing: .5px;
}

.database-hero p {
  font-size: clamp(1rem, 2vw, 1.3rem);
  line-height: 1.6;
  max-width: 960px;
  margin: 0 auto 26px;
  color: #f3f3f3;
  text-shadow: 0 4px 14px rgba(0,0,0,.5);
}

.database-hero .cta-button {
  background: linear-gradient(90deg, #ff6a3d, #ff4b4b);
  color: #fff;
  padding: 14px 28px;
  font-weight: 800;
  border-radius: 12px;
  text-decoration: none;
  border: 0;
  box-shadow: 0 8px 26px rgba(255,75,75,.35);
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}
.database-hero .cta-button:hover {
  transform: translateY(-3px);
  filter: brightness(1.05);
  box-shadow: 0 14px 36px rgba(255,90,70,.45);
}

@media (prefers-reduced-motion: reduce) {
  .database-hero::before { animation: none; transform: none; }
}


/* ========== KB Cards: Fresh, dynamic design ========== */
.database-kb {
  --kb-radius: 22px;
  --shadow-soft: 0 10px 28px rgba(22, 23, 27, 0.08);
  --shadow-lift: 0 18px 40px rgba(22, 23, 27, 0.16);
}

.database-kb .kb-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: 28px;
  margin-top: 24px;
}

/* Base card */
.database-kb .kb {
  position: relative;
  border-radius: var(--kb-radius);
  background: #fff;
  border: 1px solid rgba(255, 106, 61, 0.18);
  padding: 56px 28px 36px;
  text-align: center;
  box-shadow: var(--shadow-soft);
  transition: transform .35s cubic-bezier(.16,1,.3,1),
              box-shadow .35s cubic-bezier(.16,1,.3,1),
              border-color .35s ease;
  overflow: hidden;
  isolation: isolate;
}

/* Top animated accent bar */
.database-kb .kb::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  height: 5px;
  width: 100%;
  transform-origin: left center;
  transform: scaleX(0);
  background: linear-gradient(90deg, rgba(255,106,61,0.0), rgba(255,106,61,.85), rgba(255,106,61,0.0));
  transition: transform .35s cubic-bezier(.16,1,.3,1);
}
.database-kb .kb:hover::before,
.database-kb .kb:focus-within::before { transform: scaleX(1); }

/* Hover/focus effect */
.database-kb .kb:hover,
.database-kb .kb:focus-within {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lift);
  border-color: rgba(255, 106, 61, 0.35);
}

/* Icon orb with soft glow + pulse ring */
.database-kb .ico-container {
  --size: 96px;
  width: var(--size);
  height: var(--size);
  margin: 0 auto 18px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: radial-gradient(120% 120% at 30% 30%, rgba(255,255,255,.95), rgba(255,255,255,.85) 60%, rgba(255,255,255,.65));
  border: 8px solid var(--accent, #ff6a3d);
  box-shadow: 0 10px 30px rgba(255,106,61,.18), inset 0 6px 14px rgba(255,255,255,.6);
  position: relative;
}

/* Pulse ring */
.database-kb .ico-container::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: inherit;
  border: 2px solid var(--accent, #ff6a3d);
  opacity: .0;
  transform: scale(.8);
  animation: kb-pulse 2.6s ease-out infinite;
}

/* Icon */
.database-kb .ico {
  width: 42px;
  height: 42px;
  object-fit: contain;
  transform: translateY(0);
  transition: transform .35s cubic-bezier(.16,1,.3,1);
}
.database-kb .kb:hover .ico,
.database-kb .kb:focus-within .ico { transform: translateY(-3px); }

/* Title & text */
.database-kb .kb h3 {
  font-weight: 800;
  font-size: clamp(1.05rem, 1.1rem + .6vw, 1.6rem);
  margin: 6px 0 10px;
  color: #1F1F20;
}
.database-kb .kb p {
  color: #4a4a4a;
  line-height: 1.6;
  max-width: 40ch;
  margin: 0 auto;
}

/* Subtle entrance animation (once) */
@keyframes kb-pop {
  0%   { transform: translateY(12px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
.database-kb .kb { animation: kb-pop .6s ease both; }
.database-kb .kb:nth-child(2) { animation-delay: .08s; }
.database-kb .kb:nth-child(3) { animation-delay: .16s; }

/* Pulse keyframes */
@keyframes kb-pulse {
  0%   { opacity: .0; transform: scale(.8); }
  45%  { opacity: .35; transform: scale(1.08); }
  100% { opacity: .0; transform: scale(1.22); }
}

/* Unique accent tones per card — feel free to tweak */
.database-kb .kb:nth-child(1) { --accent: #ff6a3d; }  /* orange (brand) */
.database-kb .kb:nth-child(2) { --accent: #6a9cff; }  /* soft blue */
.database-kb .kb:nth-child(3) { --accent: #00c7a5; }  /* teal */

/* Responsive */
@media (max-width: 900px) {
  .database-kb .kb-grid { grid-template-columns: 1fr; gap: 20px; }
  .database-kb .kb { padding: 44px 22px 28px; }
  .database-kb .ico-container { --size: 82px; }
}
/* === Key Features & Benefits Section === */
.database-kb {
  margin-top: 55px;   /* reduced spacing */
  padding-top: 20px;
  text-align: center;
}

/* Center heading */
.database-kb h2 {
  font-size: 2.3rem;
  font-weight: 800;
  color: #222;
  margin-bottom: 24px;
  position: relative;
  display: inline-block;
}

/* Underline image below heading */
.database-kb h2::after {
  content: "";
  display: block;
  width: 90px;
  height: 10px;
  margin: 10px auto 0;
  background: url("../images/underline.png") center/contain no-repeat;
  background-size: contain;
}

/* fallback if image fails to load */
.database-kb h2::after {
  background-color: transparent;
  border-bottom: 4px solid #ff6a3d;
  width: 60px;
  height: 0;
  margin: 10px auto 0;
}

@media (max-width: 768px) {
  .database-kb {
    margin-top: 40px;
    padding-top: 10px;
  }

  .database-kb h2 {
    font-size: 1.9rem;
  }

  .database-kb h2::after {
    width: 55px;
  }
}


/* For Pricing Section */
.database-pricing {
  background: linear-gradient(180deg, rgba(255, 138, 75, 0.1), rgba(255, 255, 255, 0.6));
  padding: 60px 20px;
}

.database-pricing h2 {
  text-align: center;
  font-size: 2.5rem;
  color: #2d2e2e;
  margin-bottom: 30px;
}

.database-pricing .plan {
  background: white;
  padding: 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.database-pricing .plan:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}

.database-pricing .cta-button {
  background: #ff6a3d;
  color: white;
  padding: 12px 30px;
  text-decoration: none;
  border-radius: 5px;
  font-weight: 600;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.database-pricing .cta-button:hover {
  background: #e03939;
  transform: translateY(-4px);
}

/* FAQ Section Styling */
/* FAQ Section Heading */
.database-faq h2 {
  font-family: 'Epilogue', system-ui, sans-serif;
  font-size: 26px;
  font-weight: 800;
  color: #222222;
  margin: 0 0 20px;
  position: relative;
  display: inline-block;
}

.database-faq h2::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, #ff6a3d, #ff4b4b); /* Orange underline */
  border-radius: 2px;
}

.database-faq {
  background-color: #f9f9f9;
  padding: 40px 20px;
}

/* part 4 last one

.database-faq .wrap {
  max-width: 800px; /* Reduced width for a more compact appearance */
  margin: 0 auto;
}

/* FAQ Section Heading */
.database-faq h2 {
  font-family: 'Epilogue', system-ui, sans-serif;
  font-size: 36px;
  font-weight: 800;
  color: #222222;
  margin: 0 0 20px;
  position: relative;
  display: inline-block;
  text-align: center; /* Center align the heading */
}

/* Lighter Orange Underline for the FAQ heading */
.database-faq h2::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, #FF9A6B, #FF6A3D); /* Lighter orange underline */
  border-radius: 2px;
}

/* FAQ Details (Questions and Answers) */
.database-faq details {
  margin: 12px 0;
  padding: 15px;
  border: 2px solid #FF9A6B; /* Light orange border */
  border-radius: 10px;
  background: #fff;
  transition: background-color 0.3s ease;
}

/* FAQ Summary (Questions) */
.database-faq summary {
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  color: #222222;
}


/* FAQ Answer (p) */
.database-faq p {
  font-size: 16px;
  margin-top: 10px;
  color: #555;
  line-height: 1.6;
}

/* Keep the boxes with constant light orange border and appearance even when hovering */
.database-faq details:hover {
  background-color: rgba(255, 154, 107, 0.1); /* Light orange subtle background change on hover */
}

/* General styling for process section */
.database-process {
  background: #f9f9f9; /* Light gray background */
  padding: 60px 20px;
  margin-top: 60px;
  text-align: center;
}

/* Heading for Process Section */
.database-process h2 {
  font-size: 36px;
  font-weight: 800;
  color: #2d2e2e;
  margin-bottom: 40px;
  text-transform: uppercase;
  letter-spacing: 2px;
  display: inline-block; /* Ensures the underline is only as wide as the text */
}

.database-process h2::after {
  content: "";
  display: block;
  width: 60px; /* Controls the length of the underline */
  height: 4px;
  background: linear-gradient(90deg, #ff6a3d, #ff4b2b); /* Orange underline */
  border-radius: 2px;
  margin: 10px auto 0; /* Centers the underline */
}

/* Step layout */
.steps {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Each Step */
.step {
  display: flex;
  align-items: center;
  gap: 20px;
  position: relative;
  padding: 30px 20px;
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.step:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Image inside step */
.step-image {
  width: 80px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  overflow: hidden;
}

.step-image img {
  width: 60%;
  height: 60%;
  object-fit: contain;
}

/* Step Content */
.step-content {
  flex: 1;
  text-align: left;
}

.step h3 {
  font-size: 1.6rem;
  font-weight: 700;
  color: #333;
  margin-bottom: 10px;
}

.step p {
  color: #666;
  font-size: 1rem;
  line-height: 1.6;
}

/* Hover Effects for Image */
.step:hover .step-image img {
  transform: scale(1.1);
  transition: transform 0.3s ease;
}

/* Responsive Design */
@media (max-width: 768px) {
  .steps {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .step-image {
    width: 60px;
    height: 60px;
  }

  .step h3 {
    font-size: 1.3rem;
  }

  .step p {
    font-size: 0.9rem;
  }
}


/* ----------  (Analytics page scope) ---------- */
:root {
  --an-ink: #1f1f23;
  --an-sub: #4a4a50;
  --an-brand: #ff6a3d;
  --an-brand-2: #ff835a;
  --an-bg-1: #fff7f3;
  --an-ring: rgba(255,106,61,.25);
  --an-card: #ffffff;
  --an-shadow: 0 14px 40px rgba(15, 15, 26, .08);
}

/* ---------- HERO (unchanged) ---------- */
.an-hero{
  min-height: 68vh;
  display:grid;
  place-items:center;
  padding: 72px 20px;
  background:
    radial-gradient(1200px 500px at 80% -20%, rgba(255,106,61,.15), transparent 60%),
    radial-gradient(1000px 400px at 10% -10%, rgba(255,131,90,.15), transparent 60%),
    linear-gradient(180deg, #fff, #fff7f3);
  text-align:center;
}
.an-hero__text h1{
  font: 800 clamp(36px, 6vw, 64px)/1.05 "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--an-ink);
  margin: 0 0 12px;
  letter-spacing: -0.02em;
}
.an-hero__text p{
  color: var(--an-sub);
  font-size: clamp(16px, 2.2vw, 20px);
  max-width: 880px;
  margin: 0 auto 22px;
}
.an-btn {
  display: inline-block;
  background: var(--an-brand);
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem; /* slightly smaller font */
  border-radius: 10px;
  padding: 8px 16px; /* reduced padding */
  text-decoration: none;
  border: 2px solid var(--an-brand);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  box-shadow: 0 6px 18px rgba(255, 106, 61, 0.25); /* reduced shadow */
}

.an-btn:hover {
  transform: translateY(-2px);
  background: #ff6031;
}

.an-btn--ghost {
  background: #fff;
  color: var(--an-brand);
  border-color: var(--an-brand);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
}

.an-btn--ghost:hover {
  background: #fff2ed;
}


/* --- Title (centered + underline) --- */
.an-title{
  text-align:center;
  font-weight:800;
  font-size:clamp(28px,4vw,42px);
  color:var(--ink,#222);
  margin:0 auto 16px;
  display:block;
  width:100%;
}
.an-title__underline{
  display:block;
  width:80px;
  height:4px;
  margin:12px auto 0;
  background:linear-gradient(90deg,#ff8b4d,#ff4b2b);
  border-radius:2px;
}

/* --- Process layout --- */
.an-process--clean{
  padding:34px 20px 18px;
  background:linear-gradient(180deg,var(--an-bg-1,#fff7f3),#fff);
}

/* Steps row */
.an-steps--row{
  max-width:1100px;
  margin:18px auto 0;
  padding:0;
  list-style:none;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  position:relative;
}

/* soft connector line (desktop only) */
@media (min-width:900px){
  .an-steps--row::before{
    content:"";
    position:absolute;
    top:28px;                     /* sits gently above badges */
    left:0; right:0;
    height:3px;
    background:linear-gradient(90deg,transparent 0%, #ffc2ad 10%, #ffc2ad 90%, transparent 100%);
    opacity:.5;
    border-radius:2px;
  }
}

/* Each step */
.an-step{
  text-align:center;
  padding:8px 10px 0;
  position:relative;
}

/* Icon + badge wrapper */
.step-figure{
  position:relative;
  width:96px; height:96px;
  margin:0 auto 14px;
  border-radius:50%;
  display:grid; place-items:center;
  background:#fff;
  box-shadow:0 10px 28px rgba(15,15,26,.10), inset 0 0 0 2px rgba(255,106,61,.25);
}

/* Icon image */
.step-figure > img{
  width:64px; height:64px;
  object-fit:contain;
}

/* Small number badge (tidy, not overlapping content) */
.step-badge{
  position:absolute;
  left:-10px; top:-10px;
  width:30px; height:30px;
  border-radius:50%;
  background:#ff6a3d;
  color:#fff;
  font-weight:800;
  font-size:14px;
  display:grid; place-items:center;
  box-shadow:0 6px 18px rgba(255,106,61,.32);
  border:2px solid #fff;
}

/* Titles and copy */
.step-title{
  margin:2px 0 6px;
  font-weight:800;
  font-size:clamp(18px,2.2vw,22px);
  color:var(--ink,#222);
}
.step-copy{
  margin:0 auto;
  max-width:20ch;
  color:var(--an-sub,#4a4a50);
  font-size:clamp(14px,1.8vw,16px);
  line-height:1.4;
}

/* Hover polish (desktop only) */
@media (hover:hover){
  .an-step:hover .step-figure{
    transform:translateY(-3px);
    box-shadow:0 14px 34px rgba(15,15,26,.14), inset 0 0 0 2px rgba(255,106,61,.35);
    transition:transform .2s ease, box-shadow .2s ease;
  }
}

/* Stack on mobile */
@media (max-width:720px){
  .an-steps--row{
    grid-template-columns:1fr 1fr;
    row-gap:26px;
  }
}

/* --- vertical connector lines from top bar to each icon --- */
.an-step::before {
  content: "";
  position: absolute;
  top: 0;                   /* starts at the top bar */
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 50px;             /* adjust this height to match your layout spacing */
  background: linear-gradient(180deg, #ffc2ad 0%, #ff6a3d 100%);
  opacity: 0.5;
  border-radius: 2px;
}

/* To ensure the connector line is visually behind the number badge and icon */
.step-figure,
.step-badge {
  position: relative;
  z-index: 2;
}


/* ===========================
   KEY FEATURES – ASANA CARDS
   =========================== */

/* Section wrapper */
.an-kb {
  padding: 72px 20px 80px;
  background: #ffffff;
}

/* reuse your global heading style (.an-title / .an-title__underline) */

/* Grid */
.an-kb__grid {
  max-width: 1120px;
  margin: 40px auto 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

@media (max-width: 1024px) {
  .an-kb__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .an-kb__grid {
    grid-template-columns: 1fr;
  }
}

/* Card – Asana style */
.an-card {
  background: #ffffff;
  border-radius: 24px;
  border: 1px solid #eef0f4;
  padding: 28px 28px 26px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease,
    background-color 0.25s ease;
}

.an-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.1);
  border-color: #ffd8c7;
  background-color: #ffffff;
}

/* Icon */
.an-card__icon {
  width: 64px;
  height: 64px;
  margin-bottom: 18px;
  display: block;
}

/* Title */
.an-card__title {
  margin: 0 0 8px;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--an-ink, #101827);
}

/* Description */
.an-card__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--an-sub, #4b5563);
  max-width: 32rem;
}


/* ==============================
   HOW WE IMPLEMENT – FIXED LAYOUT
   ============================== */

.an-process {
  padding: 60px 20px 90px;
  background: linear-gradient(180deg, #fff7f3 0%, #ffffff 40%, #fffdf9 100%);
}

.an-process__inner {
  max-width: 1250px;
  margin: 0 auto;
}
https://github.com/ajaxorg/ace/wiki/Default-Keyboard-Shortcuts
/* ---------- Timeline Wrapper ---------- */

.an-timeline {
  margin-top: 60px;
  display: flex;
  flex-direction: column;
  gap: 80px; /* more elegant separation between steps */
}

/* ---------- Each Row ---------- */

.an-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px; /* perfect spacing */
}

/* Alternate placement */
.an-row:nth-child(even) {
  flex-direction: row-reverse;
}

/* ======================================
   IMAGE — Bigger + NO white border
   ====================================== */

.an-row__media {
  position: relative;
  flex: 0 0 430px;        /* wider image */
  max-width: 430px;
  border-radius: 20px;    /* smooth corners */
  overflow: hidden;       /* removes white border effect */
}

.an-row__media img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.20);
  transition: transform .28s ease, box-shadow .28s ease;
}

/* Hover effect */
.an-row:hover .an-row__media img {
  transform: translateY(-4px);
  box-shadow: 0 28px 70px rgba(0,0,0,0.28);
}

/* Step chip */
.an-step-chip {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #ff6a3d;
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid #fff;
  box-shadow: 0 6px 16px rgba(255,106,61,0.28);
}

/* ---------- TEXT CONTENT (card style) ---------- */

.an-row__content {
  flex: 1;
  max-width: 620px;

  /* card look */
  padding: 22px 26px 24px;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, 0.04);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
}

/* eyebrow, title, body, list stay inside the card */
.an-row__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 12px;
  font-weight: 700;
  color: #ff6a3d;
  margin-bottom: 4px;
}

.an-row__content h3 {
  font-size: 26px;
  font-weight: 800;
  margin: 0 0 12px;
  color: #111;
}

.an-row__content p {
  font-size: 16px;
  color: #333;
  line-height: 1.65;
  margin-bottom: 12px;
}

.an-row__list {
  margin: 6px 0 0;
  padding-left: 18px;
  font-size: 15px;
  line-height: 1.6;
  color: #444;https://github.com/ajaxorg/ace/wiki/Default-Keyboard-Shortcuts
}

.an-row__list li + li {
  margin-top: 4px;
}

/* Mobile: slightly softer padding so it doesn’t feel cramped */
@media (max-width: 960px) {
  .an-row__content {
    max-width: 100%;
    padding: 18px 20px 20px;
  }
}


/* ===============================
   Analytics – Pricing
   =============================== */

/* ---------- Pricing ---------- */
.an-pricing {
  padding: 64px 20px 80px;
  background: #f6f6f4; /* similar to Mailchimp section bg */
}

.an-pricing__grid {
  max-width: 1120px;
  margin: 32px auto 0;
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px) {
  .an-pricing__grid {
    grid-template-columns: 1fr;
  }
}

.an-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #dde0e6;
  padding: 24px 24px 28px;
  text-align: left;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease,
    background 0.22s ease;
}

.an-plan:hover {
  transform: translateY(-4px);
  border-color: #c4c9d6;
  box-shadow: 0 18px 40px rgba(15, 15, 26, 0.12);
}

/* Plan title + small text */
.an-plan__name {
  font-weight: 800;
  font-size: 20px;
  color: var(--an-ink, #16161d);
  margin: 0 0 4px;
}

.an-plan__tagline {
  margin: 0;
  font-size: 14px;
  color: var(--an-sub, #555a66);
}

/* Price box (like Mailchimp’s white card inside the plan) */
.an-plan__price-box {
  margin: 18px 0 20px;
  padding: 16px 18px;
  border-radius: 10px;
  border: 1px solid #e3e5ec;
  background: #f8f9fc;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.an-plan__price-label {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8a8fa0;
  font-weight: 700;
}

.an-plan__price-main {
  font-size: 26px;
  line-height: 1.1;
  font-weight: 800;
  color: var(--an-ink, #16161d);
}

.an-plan__price-note {
  font-size: 13px;
  color: #6b7280;
}

/* Feature list */
.an-plan__list {
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  color: var(--an-sub, #444955);
  font-size: 14px;
}

.an-plan__list li {
  position: relative;
  padding-left: 18px;
  margin: 6px 0;
}

.an-plan__list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.7em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #ff4b2b; /* matches your brand orange */
  transform: translateY(-50%);
}

/* CTA button inside card */
.an-plan__cta {
  margin-top: auto;
  width: 100%;
  text-align: center;
  justify-content: center;
  background: #ff4b2b;
  border-color: #ff4b2b;
  color: #fff;
  font-weight: 700;
  padding: 11px 20px;
  border-radius: 999px;
  box-shadow: 0 8px 22px rgba(255, 75, 43, 0.2);
  transition: all 0.22s ease;
}

.an-plan__cta:hover {
  background: #ff6031;
  border-color: #ff6031;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(255, 75, 43, 0.25);
}

/* ---------- Featured plan (middle card) ---------- */
/* Now uses soft light-orange instead of yellow */
.an-plan--featured {
  border-color: #ff9a6b;  /* light orange border */
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.12);
  background: linear-gradient(
      180deg,
      rgba(255, 154, 107, 0.20),
      rgba(255, 154, 107, 0.06)
    ),
    #ffffff;              /* subtle light-orange glow */
  transform: translateY(-6px);
}

.an-plan--featured .an-plan__price-box {
  border-color: rgba(255, 154, 107, 0.8); /* match featured orange */
}

/* “Best value / Most popular” pill */
.an-plan__badge {
  position: absolute;
  top: -16px;
  left: 24px;
  padding: 4px 12px;
  background: #ff4b2b;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #fff;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.16);
}


/* ---------- FAQ Analytics page---------- */
.an-plan a {
  display: inline-block;
  background: #ff4b2b; /* orange theme */
  color: #fff;
  font-weight: 700;
  padding: 10px 26px;
  border-radius: 8px;
  text-decoration: none;
  border: 2px solid #ff4b2b;
  transition: all 0.25s ease;
  box-shadow: 0 8px 22px rgba(255, 75, 43, 0.2);
}

.an-plan a:hover {
  background: #ff6031;
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(255, 75, 43, 0.25);
}

/* ---------- FAQ (Dynamic / Unique) ---------- */

/* Title (kept from your style, small polish) */
.an-faq__title{
  text-align:center;
  font-family:"Epilogue", Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:800;
  font-size:clamp(26px,3.3vw,42px);
  color:var(--an-ink,#222);
  margin:0 auto 26px;
  position:relative;
  display:inline-block;
  left:50%;
  transform:translateX(-50%);
}
.an-faq__title::after{
  content:"";
  display:block;
  width:110px;
  height:4px;
  margin:12px auto 0;
  background:linear-gradient(90deg,#ff8b4d,#ff4b2b);
  border-radius:2px;
  opacity:.95;
}

/* Section wrap */
.an-faq{
  padding:48px 20px 72px;
  background:
    radial-gradient(800px 260px at 10% 0%, rgba(255,138,77,.06), transparent 60%),
    radial-gradient(700px 240px at 95% 5%, rgba(255,75,43,.06), transparent 60%),
    #fff;
}
.an-faq__wrap{
  max-width:980px;
  margin:0 auto;
  counter-reset: faq;  /* enables auto numbering */
}

/* Card shell */
.an-faq__item{
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(8px);
          backdrop-filter:blur(8px);
  border:1px solid rgba(0,0,0,.06);
  border-radius:16px;
  box-shadow:0 8px 26px rgba(15,15,26,.08);
  transition:border-color .24s ease, box-shadow .24s ease, transform .2s ease, background .24s ease;
  overflow:hidden;
}
.an-faq__item + .an-faq__item{ margin-top:14px; }

/* Summary line */
.an-faq__item > summary{
  list-style:none; /* remove default marker */
  cursor:pointer;
  padding:18px 18px 18px 66px;
  font-weight:800;
  color:var(--an-ink,#1f1f1f);
  display:grid;
  grid-template-columns: 1fr auto;
  align-items:center;
  position:relative;
  user-select:none;
}

/* Number badge (auto) */
.an-faq__item > summary::before{
  counter-increment: faq;
  content: counter(faq);
  position:absolute;
  left:18px;
  top:50%;
  transform:translateY(-50%);
  width:36px;height:36px;
  display:grid;place-items:center;
  font:700 16px/1 Inter, system-ui, sans-serif;
  color:#fff;
  background:linear-gradient(180deg,#ff835a,#ff6a3d);
  border:2px solid #fff;
  box-shadow:0 8px 22px rgba(255,106,61,.28);
  border-radius:999px;
}

/* Chevron */
.an-faq__item > summary::after{
  content:"";
  width:12px;height:12px;
  border-right:3px solid #b3b7c2;
  border-bottom:3px solid #b3b7c2;
  transform:rotate(-45deg);
  transition:transform .25s ease, border-color .25s ease;
}

/* Answer body – smooth open/close */
.an-faq__item p{
  margin:0;
  padding:0 18px 18px 66px;
  color:#525760;
  max-height:0;
  overflow:hidden;
  opacity:.0;
  transition:max-height .35s ease, opacity .3s ease, padding-top .25s ease;
}

/* Hover / focus affordance */
.an-faq__item:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 32px rgba(15,15,26,.12);
}

/* Open state */
.an-faq__item[open]{
  border-color:rgba(255,106,61,.35);
  box-shadow:0 18px 44px rgba(255,106,61,.16);
  background:rgba(255,255,255,.96);
}
.an-faq__item[open] > summary::after{
  transform:rotate(135deg);
  border-color:#ff6a3d;
}
.an-faq__item[open] p{
  padding-top:8px;
  max-height:260px; /* large enough for your longest answer */
  opacity:1;
}

/* Keyboard focus ring */
.an-faq__item > summary:focus{
  outline:none;
  box-shadow:0 0 0 3px rgba(255,106,61,.35) inset;
  border-radius:16px;
}

/* Small screens */
@media (max-width:560px){
  .an-faq__item > summary{
    padding:16px 16px 16px 58px;
  }
  .an-faq__item > summary::before{ left:14px; width:32px; height:32px; }
  .an-faq__item p{ padding:0 16px 16px 58px; }
}

/* ===========================
   HERO — Band style (unique)
   =========================== */

.an-hero-band{
  position: relative;
  min-height: 68vh;
  display: grid;
  place-items: center;
  padding: clamp(48px, 8vw, 96px) 20px;
  overflow: hidden;

  /* background image from the inline --bg */
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,247,243,.88)),
    var(--bg) center/cover no-repeat;
}

/* Soft diagonal “energy band” behind the text */
.an-hero-band .an-band{
  position: absolute;
  left: -12vw;
  right: -12vw;
  top: 44%;
  height: 42vh;
  transform: skewY(-6deg);
  filter: blur(18px);
  border-radius: 8px;
  z-index: 0;

  background:
    linear-gradient(90deg,
      rgba(255,106,61,.10),
      rgba(255,106,61,.18) 30%,
      rgba(255,131,90,.18) 70%,
      rgba(255,106,61,.10));
  mix-blend-mode: multiply;

  animation: an-band-drift 12s ease-in-out infinite alternate;
}

@keyframes an-band-drift{
  from{ transform: skewY(-6deg) translateX(-3%); }
  to  { transform: skewY(-6deg) translateX(3%); }
}

/* Text block */
.an-hero-band__text{
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 1000px;
}

/* Heading: crisp, no card */
.an-hero-band__text h1{
  margin: 0 0 14px;
  font: 800 clamp(36px, 6vw, 68px)/1.05 "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: #1f1f23;                 /* brand mild black */
  letter-spacing: -0.02em;
  text-shadow: 0 1px 8px rgba(255,106,61,.10); /* subtle warmth */
}

/* Subcopy */
.an-hero-band__text p{
  margin: 0 0 22px;
  color: #333;
  font-size: clamp(16px, 2vw, 20px);
}

/* Reuse your brand button */
.an-btn{
  display:inline-block;
  background:#ff4b4b;
  color:#fff;
  font-weight:700;
  border-radius:12px;
  padding:12px 18px;
  text-decoration:none;
  border:2px solid #ff6a3d;
  box-shadow:0 10px 30px rgba(255,106,61,.25);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.an-btn:hover{ transform: translateY(-2px); background:#ff6031; }

/* ====== Split hero that fits your image (subject on right) ====== */
.an-hero-split{
  --ink: #1f1f23;
  --sub: #2d2e33;
  --brand: #ff6a3d;

  position: relative;
  min-height: 70vh;
  display: grid;
  align-items: center;
  padding: clamp(48px, 7vw, 100px) 22px;

  /* background image */
  background:
    var(--bg) center/cover no-repeat;
}

/* Gentle left → right gradient + vignette to make text readable */
.an-hero-split__overlay{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,0.92) 0%,
      rgba(255,245,240,0.72) 28%,
      rgba(255,245,240,0.28) 55%,
      rgba(255,245,240,0.08) 70%,
      rgba(255,245,240,0.00) 100%),
    radial-gradient(1200px 500px at 50% 100%, rgba(0,0,0,.10), transparent 70%);
  pointer-events: none;
}

/* Content column (left) */
.an-hero-split__content{
  position: relative;
  z-index: 1;
  max-width: 980px;
  margin-left: clamp(6px, 6vw, 90px);
  color: var(--ink);
}

/* 3D-ish headline: crisp + subtle depth */
.an-hero-split__title{
  margin: 0 0 14px;
  font: 800 clamp(36px, 5.8vw, 68px)/1.06 "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  letter-spacing: -0.02em;
  color: var(--ink);
  /* light rim + warm drop for a premium “pop” */
  text-shadow:
     0 1px 0 #fff,
     0 8px 20px rgba(255,106,61,.18),
     0 2px 10px rgba(0,0,0,.06);
}

/* Subcopy: slightly darker for contrast */
.an-hero-split__sub{
  margin: 0 0 20px;
  max-width: 760px;
  font-size: clamp(16px, 2.1vw, 20px);
  color: var(--sub);
}

/* Brand CTA */
.an-btn{
  display:inline-block;
  background: var(--brand);
  color:#fff;
  font-weight:700;
  border-radius: 12px;
  padding: 12px 18px;
  text-decoration:none;
  border: 2px solid var(--brand);
  box-shadow: 0 10px 30px rgba(255,106,61,.25);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.an-btn:hover{ transform: translateY(-2px); background:#ff6031; }

/* Mobile: center content while keeping the image visible */
@media (max-width: 820px){
  .an-hero-split{
    min-height: 64vh;
    padding: 56px 18px;
    background-position: 60% center; /* show more of the person on right */
  }
  .an-hero-split__content{
    margin: 0 auto;
    text-align: center;
  }
  .an-hero-split__sub{ margin-left:auto; margin-right:auto; }
}
/* --- CTA Button Hover Animation --- */
.cta-button:hover {
  transform: translateY(-2px);
  animation: pulse 1s infinite;
  box-shadow: 0 5px 10px rgba(255, 75, 75, 0.3);
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 rgba(255, 75, 75, 0.4); }
  70% { box-shadow: 0 0 20px rgba(255, 75, 75, 0.6); }
  100% { box-shadow: 0 0 0 rgba(255, 75, 75, 0.4); }
}
/* ===== Consultation modal (compact) ===== */
.modal{
  display: none;                 /* must be none by default */
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,.5);
  overflow: auto;                /* page can scroll if needed */
  padding: 24px;
}

.modal-content{
  position: relative;            /* so .close positions correctly */
  background: #fff;
  margin: auto;
  width: min(480px, 90%);        /* smaller width */
  max-height: 85vh;              /* compact height */
  overflow-y: auto;              /* scroll INSIDE modal */
  border-radius: 12px;
  padding: 20px 24px;
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
  font-family: 'Inter', sans-serif;
}

.modal-content h2{
  font-size: 1.3rem;
  margin: 0 0 10px;
  line-height: 1.35;
}

.modal-content label{
  display: block;
  margin: 8px 0 3px;
  font-weight: 600;
  font-size: .9rem;
  color: #333;
}

.modal-content input,
.modal-content select,
.modal-content textarea{
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: .95rem;
  margin-bottom: 10px;
  transition: border-color .2s;
}

.modal-content input:focus,
.modal-content select:focus,
.modal-content textarea:focus{
  border-color: #ff4b4b;
  outline: none;
}

.modal-content textarea{
  resize: vertical;
  min-height: 60px;
}

.modal-content .cta-button{
  width: 100%;
  padding: 8px 14px;
  font-size: .95rem;
  border-radius: 8px;
  font-weight: 600;
  margin-top: 6px;
}

.close{
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 1.2rem;
  color: #ff4b4b;
  cursor: pointer;
  font-weight: 700;
}

/* optional: nicer scrollbar for long forms */
.modal::-webkit-scrollbar{ width: 6px; }
.modal::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.2); border-radius: 4px; }

/* ===== Header Layout ===== */
.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between; /* logo left, nav center, button right */
  gap: 24px;
}

/* logo text cleanup */
.brand.logo h1 {
  margin: 0;
  font-size: 1.75rem;
  color: #333;
  display: flex;
  align-items: center;
}
.brand.logo .highlight {
  color: #ff4b4b; /* orange C */
}

/* center menu */
.nav {
  flex: 1;
  display: flex;
  justify-content: center; /* centers the UL inside */
}

.nav ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px; /* adjust spacing */
  list-style: none;
  margin: 0;
  padding: 0;
}

/* CTA stays at right */
.cta-button {
  background: #ff4b4b;
  color: #fff;
  font-weight: 700;
  padding: 8px 20px;
  font-size: 0.95rem;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 0 3px 6px rgba(255, 75, 75, 0.25);
  transition: all 0.2s ease-in-out;
}

.cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 10px rgba(255, 75, 75, 0.35);
}

/* layout container */
.header-inner{
  max-width:1200px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between; /* left logo | center nav | right CTA */
  gap:24px;
  padding:0 16px;
}

/* logo */
.brand.logo h1{ margin:0; font-size:1.75rem; color:#333; }
.brand.logo .highlight{ color:#ff4b4b; }

/* center the nav */
.nav{ flex:1; display:flex; justify-content:center; }
.nav .menu{ display:flex; align-items:center; gap:40px; list-style:none; margin:0; padding:0; }

/* keyboard focus outline is important */
.dropbtn:focus{ outline:2px solid #ffb3a3; outline-offset:3px; }

/* skip link for accessibility */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  position:static; width:auto; height:auto; padding:6px 10px; background:#000; color:#fff; border-radius:6px;
}


.cizo-footer {
  background: linear-gradient(180deg, #f8f9fa 0%, #eceff1 100%);
  border-top: 2px solid #ff6a3d;
  color: #333;
}
.cizo-footer a:hover { color: #ff6a3d; }

/* ================================
   HERO — readable over photo
   ================================ */
.hero-split.hero--bg{
  position: relative;
  min-height: 78vh;
  display: grid;
  align-items: center;

  /* the image */
  background: url("/assets/images/Homepage.jpg") center / cover no-repeat fixed !important;
  /* neutralize older styles */
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* dark overlay so text is readable, fades to clear on the right */
.hero-split.hero--bg::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(1200px 600px at 25% 45%, rgba(0,0,0,.55), rgba(0,0,0,.15) 60%, rgba(0,0,0,0) 75%),
    linear-gradient(90deg, rgba(0,0,0,.65), rgba(0,0,0,.25) 38%, rgba(0,0,0,0) 70%);
  z-index:0;
}

/* layout for content */
.hero-split .hero-inner{
  position: relative;
  z-index: 1;               /* above overlay */
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: clamp(24px,4vw,48px) 24px;
}

/* ===== Overlay with subtle warm tone ===== */
.hero-split.hero--bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1200px 600px at 25% 45%, rgba(50, 28, 16, 0.7), rgba(50, 28, 16, 0.25) 60%, rgba(0, 0, 0, 0) 80%),
    linear-gradient(90deg, rgba(40, 22, 12, 0.75), rgba(50, 30, 20, 0.3) 40%, rgba(0, 0, 0, 0) 70%);
  z-index: 0;
}
/* ===== Hero copy with clean white panel (sharp text) ===== */
.hero-split.hero--bg .hero-copy {
  width: min(780px, 92%);
  background: #ffffff;                       /* solid white, no blur */
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 18px;
  padding: clamp(18px, 2.8vw, 32px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.15);
  position: relative;
  color: #111 !important;
  text-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Make sure everything inside is crisp black */
.hero-split.hero--bg .hero-copy *,
.hero-split.hero--bg .hero-copy h1,
.hero-split.hero--bg .hero-copy p,
.hero-split.hero--bg .hero-copy span {
  color: #111 !important;
  text-shadow: none !important;
}

/* Optional: tighten headline & sub for readability */
.hero-split.hero--bg .hero-copy h1 {
  line-height: 1.1;
  margin: 8px 0 14px;
}
.hero-split.hero--bg .hero-copy .sub {
  color: #444 !important;
}

/* Eyebrow chip */
.hero-split.hero--bg .eyebrow {
  color: #ff4b4b !important;
  border-color: rgba(255, 75, 75, 0.3) !important;
  background: rgba(255, 75, 75, 0.08) !important;
}

/* CTA (unchanged) */
.hero-split.hero--bg .cta-button {
  background: linear-gradient(90deg, #ff6a3d, #ff4b4b) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 22px rgba(255, 75, 75, 0.35);
  transition: all 0.25s ease;
}
.hero-split.hero--bg .cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(255, 75, 75, 0.45);
}

/* === Use-Cases Background Image === */
.usecases-bg {
  position: relative;
  background: url("/assets/images/Cloud-bg.png")
              center / cover no-repeat fixed;
  padding: 80px 0;
  z-index: 0;
}

/* Light overlay for readability */
.usecases-bg__overlay {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.65); /* adjust for brightness */
  backdrop-filter: blur(2px);
  z-index: 0;
}

/* Keep content above overlay */
.usecases-bg > * {
  position: relative;
  z-index: 1;
}

/* ========== About – balanced text over image (final polish) ========== */
.section-hero.about-hero{
  position: relative;
  /* give the image room to breathe */
  min-height: 420px;
  padding: 84px 0 64px;
  text-align: center;
  color: #1f1f23;

  /* Stack:
     1) soft white strip behind the copy (for readability),
     2) your warm radial glow,
     3) hand illustration on the right
  */
  background:
    /* readable strip under text */
    linear-gradient(90deg,
      rgba(255,255,255,.96) 0%,
      rgba(255,255,255,.92) 44%,
      rgba(255,255,255,.70) 58%,
      rgba(255,255,255,.20) 75%,
      rgba(255,255,255,0) 100%),
    radial-gradient(1200px 420px at 50% -10%,
      rgba(255,121,80,.12) 0%,
      rgba(255,121,80,.05) 45%,
      rgba(255,255,255,0) 80%),
    url("/assets/images/About-homepage.png") no-repeat right -40px / auto 520px;
  border-bottom: 1px solid var(--line, #eceff4);
}

/* Keep the hero content narrow but transparent (no grey panel) */
.section-hero.about-hero .container.narrow{
  max-width: 980px;
  background: transparent !important;
  box-shadow: none !important;
}

/* Headline */
.section-hero.about-hero h1{
  margin: 14px auto 10px;
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1.12;
  font-size: clamp(34px, 4vw, 52px);
  color: #1f1f23;
  text-shadow: 0 1px 0 rgba(255,255,255,.75); /* subtle crispness over image */
}
.section-hero.about-hero h1::after{
  content:"";
  display:block;
  width:140px; height:4px;
  margin:14px auto 0;
  border-radius:2px;
  background:linear-gradient(90deg,#ff6a3d,#ff4b2b);
  opacity:.95;
}

/* Subhead */
.section-hero.about-hero .sub{
  max-width: 1000px;
  margin: 14px auto 0;
  color:#4b4f59;
  font-size: clamp(17px, 2.2vw, 22px);
  line-height:1.6;
  text-shadow: 0 1px 0 rgba(255,255,255,.55);
}

/* === About Hero - Modern Gradient Blend Style === */
.section-hero.about-hero {
  position: relative;
  min-height: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: left;
  padding: 100px 8%;
  color: #1a1a1a;

  /* Background layers */
  background:
    linear-gradient(110deg,
      rgba(255, 250, 247, 0.98) 0%,
      rgba(255, 237, 228, 0.95) 40%,
      rgba(255, 230, 220, 0.9) 55%,
      rgba(255, 255, 255, 0.6) 80%,
      rgba(255, 255, 255, 0.1) 100%),
    url("/assets/images/About-homepage.png") no-repeat right center / auto 90%;
  border-bottom: 1px solid #f2f2f2;
  overflow: hidden;
}

/* === About Hero – Clean Solid Text Version === */
.section-hero.about-hero {
  position: relative;
  min-height: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: left;
  padding: 100px 8%;
  color: #111;

  /* Background layers */
  background:
    linear-gradient(110deg,
      rgba(255, 250, 247, 0.98) 0%,
      rgba(255, 237, 228, 0.95) 40%,
      rgba(255, 230, 220, 0.9) 55%,
      rgba(255, 255, 255, 0.6) 80%,
      rgba(255, 255, 255, 0.1) 100%),
    url("/assets/images/About-homepage.png") no-repeat right center / auto 90%;
  border-bottom: 1px solid #f2f2f2;
  overflow: hidden;
}

/* ========== About – balanced text over image (final polish) ========== */
.section-hero.about-hero{
  position: relative;
  /* give the image room to breathe */
  min-height: 420px;
  padding: 84px 0 64px;
  text-align: center;
  color: #1f1f23;

  /* Stack:
     1) soft white strip behind the copy (for readability),
     2) your warm radial glow,
     3) hand illustration on the right
  */
  background:
    /* readable strip under text */
    linear-gradient(90deg,
      rgba(255,255,255,.96) 0%,
      rgba(255,255,255,.92) 44%,
      rgba(255,255,255,.70) 58%,
      rgba(255,255,255,.20) 75%,
      rgba(255,255,255,0) 100%),
    radial-gradient(1200px 420px at 50% -10%,
      rgba(255,121,80,.12) 0%,
      rgba(255,121,80,.05) 45%,
      rgba(255,255,255,0) 80%),
    url("/assets/images/About-homepage.png") no-repeat right -40px / auto 520px;
  border-bottom: 1px solid var(--line, #eceff4);
}

/* Keep the hero content narrow but transparent (no grey panel) */
.section-hero.about-hero .container.narrow{
  max-width: 980px;
  background: transparent !important;
  box-shadow: none !important;
}

/* Headline */
.section-hero.about-hero h1{
  margin: 14px auto 10px;
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1.12;
  font-size: clamp(34px, 4vw, 52px);
  color: #1f1f23;
  text-shadow: 0 1px 0 rgba(255,255,255,.75); /* subtle crispness over image */
}
.section-hero.about-hero h1::after{
  content:"";
  display:block;
  width:140px; height:4px;
  margin:14px auto 0;
  border-radius:2px;
  background:linear-gradient(90deg,#ff6a3d,#ff4b2b);
  opacity:.95;
}

/* Subhead */
.section-hero.about-hero .sub{
  max-width: 1000px;
  margin: 14px auto 0;
  color:#4b4f59;
  font-size: clamp(17px, 2.2vw, 22px);
  line-height:1.6;
  text-shadow: 0 1px 0 rgba(255,255,255,.55);
}
/* =============================
   ABOUT HERO — PURE ORANGE + BLACK TEXT
   ============================= */

.about-banner {
  width: 100%;
  padding: 130px 20px 140px;
  background: #ff6a3d;       /* Pure Cizo orange */
  text-align: center;
  color: #000000;            /* Black text */
  position: relative;
}

.about-banner::after {
  content: none;
}

.about-banner__inner {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.about-banner h1 {
  font-size: clamp(40px, 4vw, 64px);
  font-weight: 800;
  margin: 0 0 14px;
  color: #000000;            /* Black heading */
}

.about-banner h1::after {
  content: "";
  display: block;
  width: 120px;
  height: 4px;
  margin: 14px auto 0;
  border-radius: 3px;
  background: #ffffff;       /* White underline */
}

.about-breadcrumb {
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  color: #ffffff !important;        /* <-- WHITE */
}

.about-breadcrumb a {
  color: #ffffff !important;        /* <-- WHITE links */
  text-decoration: none;
  opacity: 0.95;
}

.about-breadcrumb a:hover {
  opacity: 1;
}

.about-breadcrumb span {
  color: #ffffff !important;        /* <-- WHITE separator */
  opacity: 1;
}


/* Locations css code*/

/* ========== Office Cards Compact Style ========== */

/* Make the grid tighter */
.block.alt .container.grid-2 {
  max-width: 950px !important; /* was 1100 */
  gap: 16px; /* smaller gap between cards */
}

/* Compact the cards */
.block.alt .card-rose {
  padding: 16px 18px; /* reduced padding */
  border-radius: 12px; /* slightly smaller corners */
}

/* Title section adjustments */
.block.alt .card-rose .section-title .icon-circle {
  font-size: 18px; /* smaller country code circle */
  font-weight: 700;
  width: 38px;
  height: 38px;
  line-height: 38px;
  border-radius: 50%;
  text-align: center;
  background: #ff6a3d;
  color: #fff;
  display: inline-block;
}

.block.alt .card-rose h3 {
  font-size: 16px; /* was 18px */
  font-weight: 700;
  margin-bottom: 2px;
}

.block.alt .card-rose .muted {
  font-size: 14px; /* was around 16px */
  color: #555;
  margin-top: 2px;
  margin-bottom: 10px;
}

/* Content text smaller */
.block.alt .card-rose p {
  font-size: 14px; /* was 16px */
  line-height: 1.5;
  margin-bottom: 8px;
}

/* Reduce map height slightly */
.block.alt .card-rose .map-frame {
  height: 180px; /* was 240px */
  border-radius: 10px;
  margin-top: 8px;
}

/* Slight hover lift retained */
.block.alt .card-rose:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(16,24,40,0.08);
}


/* ---------- Hero (Our Locations – Refined) ---------- */
.hero-locations {
  position: relative;
  padding: 120px 20px 100px;
  text-align: center;
  background: linear-gradient(180deg, #fff9f6 0%, #ffffff 100%);
  background-image: url("/assets/images/locations-bg.jpg"); /* optional */
  background-size: cover;
  background-position: center;
  background-blend-mode: lighten;
  border-bottom: 1px solid #eee;
  overflow: hidden;
}

/* slight overlay for readability */
.hero-locations::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(2px);
  z-index: 0;
}

.hero-locations-inner {
  position: relative;
  z-index: 1;
  max-width: 950px;
  margin: 0 auto;
}

/* “Our Locations” button */
.hero-btn {
  display: inline-block;
  padding: 10px 22px;
  font-weight: 700;
  font-size: 14px;
  border-radius: 999px;
  border: 2px solid #ff6a3d;
  color: #ff6a3d;
  background: #fff;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(255, 106, 61, 0.1);
  transition: all 0.25s ease;
}
.hero-btn:hover {
  background: #ff6a3d;
  color: #fff;
  transform: translateY(-2px);
}

/* Hero heading — all text identical now */
.hero-heading {
  font-size: clamp(30px, 4vw, 50px);
  font-weight: 800;
  line-height: 1.15;
  color: #111;
  margin: 30px 0 16px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* Remove any highlight difference completely */
.hero-heading .highlight {
  color: inherit;
  background: none;
  -webkit-text-fill-color: inherit;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
}



/* Sub paragraph */
.hero-sub {
  max-width: 780px;
  margin: 0 auto;
  font-size: 18px;
  color: #4b4f58;
  line-height: 1.7;
  letter-spacing: 0.2px;
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .hero-heading {
    font-size: 30px;
  }
  .hero-sub {
    font-size: 16px;
  }
}

/* ----- BASE: only affect the home hero ----- */
#home-hero {
  position: relative;
  isolation: isolate;
  min-height: clamp(560px, 78vh, 840px);
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 36px);
  padding-block: clamp(24px, 6vh, 56px);
}

/* Desktop: lock the layout with grid so the card doesn’t slide at 100% zoom */
@media (min-width: 1200px) {
  #home-hero {
    display: grid;
    grid-template-columns: minmax(360px, 640px) 1fr;  /* left card, right image */
    align-items: center;
  }
}

/* Keep media in normal flow unless you explicitly use a bg layer */
#home-hero .hero-media {
  position: static !important;
  inset: auto !important;
  z-index: auto !important;
  width: 100%;
  height: 100%;
}
#home-hero .hero-media img,
#home-hero .hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* If you use a CSS background layer, target THAT only */
#home-hero .hero-bg {               /* optional decorative bg */
  position: absolute;
  inset: 0;
  z-index: -1;
  background-size: cover;
  background-position: center;
}

/* Card: compact so it wraps less at 100% zoom */
#home-hero.hero--bg .hero-copy {
  width: auto;
  max-width: 640px;                 /* dial this up/down as you like */
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  padding: clamp(18px, 2.8vw, 32px);
  box-shadow: 0 8px 22px rgba(0,0,0,.15);
  color: #111 !important;
}

/* Headline sizing tuned for stability at 100% zoom */
#home-hero.hero--bg .hero-copy h1 {
  font-size: clamp(28px, 4.2vw, 44px);
  line-height: 1.12;
  margin: 8px 0 14px;
}
#home-hero.hero--bg .hero-copy .sub { color: #444 !important; }

/* Sticky header offset (if you use anchor links) */
html { scroll-padding-top: 72px; }   /* match your header height */



/* =========================
   TESTIMONIALS – Clean + Smooth Slider (NO VERTICAL SCROLL)
   ========================= */

.buffer-testimonials {
  padding: 80px 0;
  background: #faf8f2;
  overflow: visible; /* important */
}

.buffer-testimonials .container {
  overflow: visible !important;
}

/* Section title */
.section-title {
  font-size: 38px;
  font-weight: 800;
  text-align: center;
  margin-bottom: 40px;
  color: #111;
}

/* ==== VIEWPORT ==== */
.bt-viewport {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 90px;
  overflow-x: hidden;   /* prevents horizontal bar */
  overflow-y: hidden !important; /* REMOVE vertical scroll */
}

/* ==== TRACK ==== */
.bt-track {
  display: flex;
  gap: 28px;
  padding: 0;
  margin: 0;
  list-style: none;
  transition: transform .45s cubic-bezier(.2,.8,.2,1); /* smooth slide */
}

/* ==== ARROWS ==== */
.bt-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: white;
  box-shadow: 0 10px 26px rgba(0,0,0,0.25);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .2s ease, background .2s ease;
}

.bt-btn svg {
  width: 24px;
  height: 24px;
  stroke: #333;
}

.bt-btn:hover {
  transform: translateY(-50%) scale(1.1);
}

.bt-prev { left: 14px; }
.bt-next { right: 14px; }

/* ==== CARD ==== */
.bt-card {
  position: relative;
  flex: 0 0 360px;
  background: #fff;
  border-radius: 22px;
  padding: 82px 28px 30px;
  text-align: center;
  box-shadow: 0 18px 40px rgba(15,23,42,0.12);
  transition: transform .35s ease, box-shadow .35s ease;
}

.bt-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 60px rgba(15,23,42,0.18);
}

/* ==== AVATAR ==== */
.bt-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  position: absolute;
  left: 50%;
  top: -50px;
  transform: translateX(-50%);
  border: 8px solid #fff;
  box-shadow: 0 10px 22px rgba(0,0,0,0.18);
  background: #fff;
}

.bt-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%; /* no cutting */
  transition: transform .4s ease;
}

.bt-card:hover .bt-avatar img {
  transform: scale(1.06);
}

/* ==== TEXT ==== */
.bt-quote {
  color: #0f1115;
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 24px;
}

.bt-brand {
  font-size: 30px;
  font-weight: 800;
  opacity: .1;
  margin-bottom: 20px;
}

.bt-person strong {
  font-size: 16px;
  font-weight: 800;
  color: #000;
}

.bt-person span {
  display: block;
  font-size: 14px;
  color: #6b7280;
}

/* Border highlight on hover */
.bt-card {
  border: 2px solid transparent;
  transition: 
      transform .35s ease,
      box-shadow .35s ease,
      border-color .3s ease;   /* add smooth border transition */
}

.bt-card:hover {
  border-color: #ff6a3d;   /* orange border on hover */
}


/* ===== RESPONSIVE ===== */
@media (max-width:1100px) {
  .bt-card { flex-basis: 320px; }
}
@media (max-width:768px) {
  .bt-card { flex-basis: 86vw; }
  .bt-prev { left: 4px; }
  .bt-next { right: 4px; }
}


/* ---------- Footer Brand Logo (matches header logo) ---------- */
.footer-brand {
  text-align: center;                /* center logo and tagline */
}

.footer-logo-img {
  display: inline-block;
}

.footer-logo-img img {
  width: 110px;                      /* adjust as needed */
  height: auto;
  display: block;
  margin: 0 auto 16px;
  filter: none;
  transition: transform 0.25s ease;
}

.footer-logo-img img:hover {
  transform: scale(1.05);
}

/* Keep tagline aligned and readable */
.footer-tagline {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.85);
  max-width: 420px;
  margin: 0 auto;
}

/* Adjust spacing for footer top grid */
.footer-top {
  display: grid;
  grid-template-columns: 1.2fr 2fr;
  gap: 70px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  padding-bottom: 60px;
  align-items: start;
}

@media (max-width: 950px) {
  .footer-top {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

/* ===============================
   BACK TO TOP BUTTON 
   =============================== */

.scroll-top {
  position: fixed;
  right: 28px;
  bottom: 28px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #ff6a3d;          
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 999;
  color: #ffffff;
  font-size: 20px;

  /* subtle shadow, no big glow */
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);

  /* show/hide animation */
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition:
    opacity 0.22s ease,
    transform 0.22s ease,
    box-shadow 0.22s ease;
}

/* visible state after scroll */
.scroll-top--visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* icon */
.scroll-top__icon {
  font-weight: 700;
  line-height: 1;
}

/* hover  – small lift */
.scroll-top:hover {
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
  transform: translateY(-1px);
}

/* smaller on mobile */
@media (max-width: 600px) {
  .scroll-top {
    right: 18px;
    bottom: 18px;
    width: 46px;
    height: 46px;
    font-size: 18px;
  }
}

.scroll-top__icon svg {
  width: 28px;
  height: 28px;
  display: block;
}