/* ───────────────────────── 0 · RESET & TOKENS ───────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* palette */
  --primary: #1e3c72;
  --primary-end: #2a5298;
  --accent: #ffcc00;
  --text-dark: #222;
  --text-light: #fff;
  --muted: #6b7280;

  --max-width: 1200px;
  --shadow-sm: 0 2px 4px rgba(0,0,0,.05);
  --shadow-md: 0 4px 12px rgba(0,0,0,.1);
}

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
  color: var(--text-dark);
  background: #fff;
}

/* ───────────────────────── 1 · GLOBAL UTILITIES ────────────────────── */
.container { width: 90%; max-width: var(--max-width); margin: 0 auto; }

/* buttons */
.btn           { display:inline-block; padding:.75rem 1.5rem; border-radius:4px;
                 font-weight:600; text-decoration:none; transition:opacity .3s; }
.btn-primary   { background:var(--accent); color:#000; }
.btn-primary:hover{ opacity:.85; }
.btn-lg        { font-size:1.2rem; }

/* generic grids */
.grid-3 { display:grid; gap:1.5rem;
          grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.grid-2 { display:grid; gap:2rem; align-items:center;
          grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }

/* ───────────────────────── 2 · NAVBAR ──────────────────────────────── */
.navbar {
  position:sticky; top:0; z-index:1000;
  background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.nav-container{
  max-width:var(--max-width); margin:0 auto;
  display:flex; justify-content:space-between; align-items:center;
  padding:.9rem 1rem; position:relative;   /* anchor for abs panel */
}
.brand{ display:flex; align-items:center; gap:.5rem;
        font-weight:700; font-size:1.2rem; color:var(--primary); }
.nav-links{ display:flex; gap:1.25rem; flex-wrap:wrap; align-items:center; }
.nav-links a{
  font-size:.95rem; font-weight:600; color:var(--text-dark);
  text-decoration:none; transition:color .2s;
}
.nav-links a:hover{ color:var(--primary); }

.btn-demo{
  background:var(--accent); color:#000; font-weight:600;
  padding:.55rem 1.3rem; border-radius:.5rem;
  text-decoration:none; transition:opacity .25s;
}
.btn-demo:hover{ opacity:.85; }

/* burger icon */
.burger      { display:none; cursor:pointer; position:relative; z-index:1101; }
.burger span { display:block; width:22px; height:2px; margin:4px 0;
               background:var(--text-dark); transition:.3s; }

.mobile-only  { display:none; }
.desktop-only { display:inline-block; }

/* — MOBILE navbar (≤ 768 px) — */
@media (max-width:768px){
  .burger      { display:block; }
  .desktop-only{ display:none; }

  .nav-links{
    position:absolute; top:100%; left:0; right:0; z-index:1100;
    flex-direction:column; align-items:flex-start;
    background:#fff; border-top:1px solid #eef1f5;
    padding:1rem 1.2rem;

    max-height:0; overflow:hidden;
    opacity:0; visibility:hidden; pointer-events:none;
    transition:max-height .35s ease, opacity .25s ease;
  }
  .nav-links a{ padding:.45rem 0; }
  .mobile-only{ display:inline-block; margin-top:.5rem; }

  /* checkbox toggle */
  .nav-toggle:checked + .burger + .nav-links{
    max-height:500px; opacity:1; visibility:visible; pointer-events:auto;
  }

  /* burger → X */
  .nav-toggle:checked + .burger span:nth-child(1){
    transform:translateY(6px) rotate(45deg);
  }
  .nav-toggle:checked + .burger span:nth-child(2){ opacity:0; }
  .nav-toggle:checked + .burger span:nth-child(3){
    transform:translateY(-6px) rotate(-45deg);
  }
}

/* ───────────────────────── 3 · HERO & WRAPPER ─────────────────────── */
.hero{
  background:linear-gradient(135deg,var(--primary) 0%,var(--primary-end) 100%);
  color:var(--text-light); text-align:center; padding:6rem 2rem 7rem;
}
.hero h1{ font-size:2.9rem; font-weight:700; margin-bottom:.75rem; }
.hero p { font-size:1.2rem; max-width:680px; margin:0 auto 1.5rem; }

.hero .btn-cta{
  display:inline-block; background:var(--accent); color:#000;
  font-weight:600; padding:.9rem 2.3rem; border-radius:.6rem;
  text-decoration:none; transition:opacity .25s;
}
.hero .btn-cta:hover{ opacity:.85; }

.wrapper{ width:90%; max-width:var(--max-width); margin:-5rem auto 4rem; }
.card   { background:#fff; border-radius:1rem; padding:3rem 2rem;
          box-shadow:0 8px 20px rgba(0,0,0,.08); }

/* ───────────────────────── 4 · FEATURE GRIDS & CARDS ──────────────── */
.grid{ display:grid; gap:1.5rem; grid-template-columns:repeat(3,1fr); }
@media(max-width:1024px){ .grid{ grid-template-columns:repeat(2,1fr);} }
@media(max-width:640px) { .grid{ grid-template-columns:1fr;} }

.f-card{
  border:1px solid #eef1f5; border-radius:.9rem;
  padding:1.75rem 1.25rem; background:#fff;
  display:flex; flex-direction:column; gap:.65rem;
  transition:transform .2s, box-shadow .2s;
}
.f-card:hover{ transform:translateY(-2px);
               box-shadow:0 12px 22px rgba(0,0,0,.06); }

.icon-badge{
  width:50px; height:50px; border-radius:50%;
  background:var(--accent); color:#000; font-weight:700;
  display:grid; place-content:center; font-size:1.3rem;
}
.f-title{ font-size:1.1rem; font-weight:600; color:var(--primary); }
.f-desc { font-size:.95rem; color:var(--muted); }

.f-link { margin-top:auto; font-weight:600; font-size:.95rem;
          color:var(--primary); text-decoration:none;
          display:inline-flex; gap:.25rem; align-items:center; }
.f-link:hover{ text-decoration:underline; }

/* reusable feature grid (other pages) */
.features-grid{
  display:grid; gap:1.5rem; padding-top:10px; margin-top:2rem;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
}
.feature-card{
  background:#f9f9f9; padding:1.5rem; border-radius:8px;
  box-shadow:var(--shadow-sm); transition:transform .3s, box-shadow .3s;
}
.feature-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); }
.feature-card h3 { margin-bottom:.75rem; color:var(--primary-end); }
.feature-card ul { list-style:disc; margin-left:1.2rem; line-height:1.45; }

/* ───────────────────────── 5 · SECTION‑SPECIFIC STYLES ────────────── */
.section-title  { text-align:center; margin-bottom:2rem; font-size:2rem;
                  color:var(--primary); }

.tagline        { font-size:1.25rem; margin-bottom:2rem; color:var(--text-light); }

.case-study     { background:#f7faff; padding:3rem 0; }

.cta            { background:var(--primary-end); color:#fff;
                  text-align:center; padding:3rem 0; }

.architecture   { background:#fff; padding:3rem 0; }
.arch-caption   { text-align:center; margin-bottom:1rem; color:#555; }

.how-arch       { background:#fff; padding:3rem 0; }
.how-list       { font-size:1.1rem; list-style-position:inside;
                  max-width:480px; margin-left:1rem; }
.how-list li    { margin-bottom:.8rem; }

.trust .badge-row{ display:flex; flex-wrap:wrap; gap:1rem;
                   justify-content:center; margin-top:1rem; }
.trust img      { height:24px; }

.unique-strip   { background:#f1f5ff; padding:3rem 0; }

.pain           { border-left:4px solid #ff4d4d; }
.solution-list li{ margin-bottom:.7rem; }

.diagram        { max-width:800px; width:100%; margin:0 auto;
                  border-radius:8px; box-shadow:0 4px 8px rgba(0,0,0,.08); }

/* testimonial band */
.testimonial   { text-align:center; margin-top:4rem; background:#f9fafb;
                 border-radius:1rem; padding:2.8rem 1.8rem;
                 border:1px solid #edf1f5; }
.testimonial blockquote{ font-size:1.2rem; font-style:italic;
                         margin-bottom:1.2rem; color:#374151; }
.testimonial cite     { font-size:.95rem; color:var(--primary); font-weight:600; }

/* footer */
footer{ background:#f3f4f6; padding:1.8rem 1rem; text-align:center;
        font-size:.9rem; color:#555; }

/* demo lead‑capture form */
.demo-form      { background:#0d47a1; color:#fff; text-align:center; padding:72px 0; }
.demo-form h2   { font-size:1.9rem; font-weight:700; margin-bottom:.5rem; }
.cta-sub        { margin-bottom:1.75rem; color:#dbe3ff; }

.form-wrapper   { max-width:640px; margin:0 auto; }
.form-grid{
  display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  margin-bottom:1.25rem;
}
.form-group          { display:flex; flex-direction:column; text-align:left; }
.form-group label    { font-size:.9rem; margin-bottom:.25rem; color:#e3e9ff; }
.form-group input,
.form-group textarea {
  padding:.6rem .75rem; border:1px solid #ccd5ff; border-radius:6px;
  font-size:.95rem; line-height:1.4;
}
.form-group input:focus,
.form-group textarea:focus{
  outline:none; border-color:#ffd54f;
  box-shadow:0 0 0 2px rgb(255 213 79 / .45);
}
.form-span      { grid-column:1 / -1; }
.tiny-note      { font-size:.8rem; color:#dbe3ff; margin-top:.5rem; }

/* ───────────────────────── 6 · RESPONSIVE TWEAKS ─────────────────── */
@media(max-width:600px){
  .hero h1 { font-size:2.4rem; }
  .tagline { font-size:1.1rem; }
}
@media(max-width:450px){
  .hero h1 { font-size:2rem; }
}
.grid-2 img,
.illustration {
  display: block;        /* remove inline‑img whitespace */
  width: 100%;           /* never exceed the column width */
  max-width: 100%;       /* safeguard for oversized PNG/JPG */
  height: auto;          /* preserve aspect ratio */
  object-fit: contain;   /* if you ever give explicit height */
}

/* optionally centre the image on XL screens */
@media (min-width: 1200px) {
  .grid-2 > :nth-child(2) {
    justify-self: center;   /* keeps some breathing room */
  }
}
/* Logo sizing */
.logo-img{
  height: 40px;        /* desktop / tablet */
  width:  auto;
  object-fit: contain;
}

/* slightly smaller on mobile so the navbar stays compact */
@media (max-width: 768px){
  .logo-img{ height: 32px; }
}