:root {
      --bg: #ffffff;
      --text: #0b0f19;
      --muted: #6b7280;
      --border: #e5e7eb;
      --surface: #f8fafc;
      --accent: #134a7f;
      --accent-contrast: #ffffff;
      --ok: #16a34a;
      --warn: #ef4444;
      /* Section backgrounds */
      --bg-home: #f0f9ff;
      --bg-values: #f0f9ff;
      --bg-features: #f0f9ff; /* light indigo */
      --bg-about: #f0f9ff; /* neutral */
      --bg-work: #f0f9ff; /* mint */
      --bg-services: #f0f9ff /* peach */
      --bg-contact: #f5f3ff; /* lavender */
      --bg-gallery: #f0f9ff; /* sky */
    }
    * { box-sizing: border-box; }
    html, body { height: 100%; }
    body {
      margin: 0; font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
      color: var(--text); background: var(--bg);
    }
    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; display: block; }

    /* Layout */
    .section { padding: 4rem 0; }
    /* Themed section backgrounds */
    .section--home{background:var(--bg-home);} 
    .section--values{background:var(--bg-values);} 
    .section--features{background:var(--bg-features);} 
    .section--about{background:var(--bg-about);} 
    .section--work{background:var(--bg-work);} 
    .section--contact{background:var(--bg-contact);} 
    .section--gallery{background:var(--bg-gallery);}  
    .wrap { width: min(1100px, 92%); margin: 0 auto; }
    .center { text-align: center; }
    .grid { display: grid; gap: 1.25rem; }
    .grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
    @media (max-width: 1024px){ .grid--4{ grid-template-columns: repeat(2,1fr);} }
    @media (max-width: 640px){ .grid--2,.grid--3,.grid--4{ grid-template-columns: 1fr; } .section{ padding: 3rem 0; } }

    /* Type */
    .eyebrow { display:inline-block; padding:.25rem .75rem; border:1px solid var(--border); border-radius:999px; font-size:.75rem; font-weight:600; }
    .h1 { font-size: clamp(2rem, 3vw + 1rem, 3.25rem); line-height: 1.1; margin: .25rem 0 .75rem; font-weight: 800; }
    .h2 { font-size: clamp(1.5rem, 1.6vw + 1rem, 2.25rem); line-height: 1.15; margin: .25rem 0 .5rem; font-weight: 800; }
    .h3 { font-size: 1.125rem; line-height: 1.25; margin: 0 0 .25rem; font-weight: 700; }
    .muted { color: var(--muted); }

    /* Header */
    .header { position: sticky; top: 0; backdrop-filter: saturate(180%) blur(8px); background: rgba(255,255,255,.85); border-bottom:1px solid var(--border); z-index: 50; }
    .nav { display:flex; align-items:center; justify-content:space-between; height: 64px; }
    .nav__links { display:flex; gap:1rem; align-items:center; }
    .nav__cta { border:1px solid var(--border); padding:.4rem .75rem; border-radius: 999px; }
    /* Mobile menu (checkbox hack) */
    .nav__toggle { display:none; }
    .nav__burger { display:none; }
    @media (max-width: 768px){
      .nav__links { display:none; }
      .nav__burger { display:inline-grid; place-items:center; width:40px; height:40px; border:1px solid var(--border); border-radius:12px; }
      .nav__toggle:checked ~ .nav__drawer { display:block; }
      .nav__drawer { display:none; border-top:1px solid var(--border); background:#fff; }
      .nav__drawer a { display:block; padding: .75rem 0; }
    }

    /* Hero */
    .hero__row { display:grid; gap:2rem; grid-template-columns: repeat(2, minmax(0,1fr)); align-items:center; }
    @media (max-width: 900px){ .hero__row{ grid-template-columns:1fr; } }
    .pill { display:inline-flex; align-items:center; gap:.5rem; border:1px solid var(--border); padding:.35rem .75rem; border-radius:999px; font-size:.75rem; font-weight:600; }
    .btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; border-radius:16px; padding:.9rem 1.1rem; font-weight:600; }
    .btn--primary { background: var(--accent); color: var(--accent-contrast); }
    .btn--outline { border:1px solid var(--border); }
    .hero__art { position:relative; aspect-ratio:4/3; border-radius: 24px; background: linear-gradient(135deg, #f3f4f6, #e5e7eb); box-shadow: inset 0 0 0 1px var(--border); }
    .metric { position:absolute; right:-1rem; bottom:-1rem; background:#fff; border:1px solid var(--border); border-radius: 16px; padding: 1rem; box-shadow: 0 8px 30px rgba(0,0,0,.08); width: 240px; display:none; }
    @media (min-width: 900px){ .metric{ display:block; } }

    /* Cards */
    .card { border:1px solid var(--border); border-radius: 24px; padding: 1.25rem; background:#ffffff; }
    .card__icon { display:inline-flex; padding:.75rem; border-radius: 16px; background: var(--surface); color: var(--text); }

    /* About metrics */
    .kpi { background: var(--surface); border-radius: 16px; padding: 1rem; }
    .kpi .big { font-weight: 800; font-size: 2rem; }
    .kpi .label { color: var(--muted); font-size: .9rem; }

    /* CTA band */
    .band { border:1px solid var(--border); border-radius: 24px; padding: 1.25rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
    @media (max-width: 640px){ .band{ flex-direction:column; align-items:flex-start; } }

    
    /* Performance */
    .filters{ display:grid; gap:.75rem; grid-template-columns: repeat(5,1fr); }
    @media (max-width:900px){ .filters{ grid-template-columns: repeat(2,1fr);} }
    @media (max-width:640px){ .filters{ grid-template-columns: 1fr; } }
    .label{ display:block; font-size:.85rem; font-weight:600; margin-bottom:.25rem; }
    .select{ width:100%; border:1px solid var(--border); border-radius:16px; padding:.5rem .75rem; }
    .stats{ display:grid; gap:1rem; grid-template-columns: repeat(2,1fr); }
    @media (max-width:640px){ .stats{ grid-template-columns: 1fr; } }
    .stat{ border:1px solid var(--border); border-radius:24px; padding:1.25rem; background:#ec0808; }
    .stat .value{ font-size:2rem; font-weight:800; line-height:1.1; }
    .delta{ display:inline-flex; align-items:center; gap:.35rem; border-radius:999px; padding:.2rem .5rem; font-weight:600; font-size:.8rem; }
    .delta--up{ background:#16dd80; color:#16a34a; }
    .delta--down{ background:#3f3131; color:#ef4444; }
    .note{ font-size:.8rem; color: var(--muted); }

    /* Performance chart */
    :root{ --series-prev:#125ec9; }
    .chart.card{ padding:1rem; }
    .chart svg{ width:100%; height:auto; display:block; }
    .chart__grid line{ stroke: var(--border); }
    .chart__axis text{ fill: var(--muted); font-size:.75rem; }
    .chart__axis line{ stroke: var(--border); }
    .chart__line--cur{ stroke: var(--accent); stroke-width:2.5; fill:none; }
    .chart__line--prev{ stroke: var(--series-prev); stroke-width:2; fill:none; stroke-dasharray:4 4; }
    .chart__dot{ fill: var(--accent); }
    .legend{ display:flex; gap:1rem; align-items:center; flex-wrap:wrap; font-size:.85rem; color:var(--muted); margin: .25rem 0 .5rem; }
    .legend__item{ display:inline-flex; align-items:center; gap:.4rem; }
    .legend__swatch{ width:14px; height:3px; border-radius:2px; background:var(--accent); display:inline-block; }
    .legend__swatch--prev{ background:var(--series-prev); outline:1px dashed var(--series-prev); outline-offset:2px; height:0; border-top:2px dashed var(--series-prev); width:18px; }
    .chart__controls{ display:flex; gap:.5rem; align-items:center; justify-content:flex-end; margin-top:.5rem; }
    .tooltip{ position:absolute; pointer-events:none; background:#dd1717; color:#fff; font-size:.75rem; padding:.35rem .5rem; border-radius:.5rem; transform:translate(-50%,-120%); white-space:nowrap; box-shadow: 0 6px 20px rgba(0,0,0,.2); }
    .tooltip b{ font-weight:700; }
    .chart{ position:relative; }


    /* Performance */
    .filters{ display:grid; gap:.75rem; grid-template-columns: repeat(4,1fr); }
    @media (max-width:900px){ .filters{ grid-template-columns: repeat(2,1fr);} }
    @media (max-width:640px){ .filters{ grid-template-columns: 1fr; } }
    .label{ display:block; font-size:.85rem; font-weight:600; margin-bottom:.25rem; }
    .select{ width:100%; border:1px solid var(--border); border-radius:16px; padding:.5rem .75rem; }
    .stats{ display:grid; gap:1rem; grid-template-columns: repeat(2,1fr); }
    @media (max-width:640px){ .stats{ grid-template-columns: 1fr; } }
    .stat{ border:1px solid var(--border); border-radius:24px; padding:1.25rem; background:#fff; }
    .stat .value{ font-size:2rem; font-weight:800; line-height:1.1; }
    .delta{ display:inline-flex; align-items:center; gap:.35rem; border-radius:999px; padding:.2rem .5rem; font-weight:600; font-size:.8rem; }
    .delta--up{ background:#ecfdf5; color:#16a34a; }
    .delta--down{ background:#fef2f2; color:#ef4444; }
    .note{ font-size:.8rem; color: var(--muted); }

          /* Patterns */
    .pattern-dots{ background-image: radial-gradient(var(--pattern-color, rgba(19,74,127,.08)) 1px, transparent 1px); background-size: 22px 22px; }
    .pattern-stripes{ background-image: repeating-linear-gradient(135deg, var(--pattern-color, rgba(19,74,127,.08)) 0 2px, transparent 2px 12px); }
    .pattern-grid{ background-image: linear-gradient(var(--pattern-color, rgba(19,74,127,.08)) 1px, transparent 1px), linear-gradient(90deg, var(--pattern-color, rgba(19,74,127,.08)) 1px, transparent 1px); background-size: 24px 24px; }

      /* Quotes */
      .quote{ border:1px dashed var(--line); border-radius: var(--rad); padding:16px; background:#fff; }
      .quote__avatar{ width:48px; height:48px; border-radius:50%; object-fit:cover; margin-bottom:8px; }
      .quote footer{ color:#71717a; font-size:13px; }

      /* FAQ */
      .faq__item{ border:1px solid var(--line); border-radius: 12px; padding: 12px 16px; background:#fff; }
      .faq__item + .faq__item{ margin-top:10px; }
      .faq__item summary{ cursor:pointer; font-weight:600; }

              /* FAQ */
      .faq__item{ border:1px solid var(--line); border-radius: 12px; padding: 12px 16px; background:#fff; }
      .faq__item + .faq__item{ margin-top:10px; }
      .faq__item summary{ cursor:pointer; font-weight:600; }

      /* Forms */
      .field{ display:grid; gap:6px; margin-bottom:12px; }
      .field input, .field textarea{ width:100%; border:1px solid var(--line); border-radius:12px; padding:.6rem .8rem; font: inherit; }
      .field input:focus, .field textarea:focus{ outline:2px solid #d4d4d8; }
      
      /* Quotes */
      .quote{ border:1px dashed var(--line); border-radius: var(--rad); padding:16px; background:#fff; }
      .quote__avatar{ width:48px; height:48px; border-radius:50%; object-fit:cover; margin-bottom:8px; }
      .quote footer{ color:#71717a; font-size:13px; }

      /* Forms */
      .field{ display:grid; gap:6px; margin-bottom:12px; }
      .field input, .field textarea{ width:100%; border:1px solid var(--line); border-radius:12px; padding:.6rem .8rem; font: inherit; }
      .field input:focus, .field textarea:focus{ outline:2px solid #d4d4d8; }
      
    /* Patterns */
    .pattern-dots{ background-image: radial-gradient(var(--pattern-color, rgba(19,74,127,.08)) 1px, transparent 1px); background-size: 22px 22px; }
    .pattern-stripes{ background-image: repeating-linear-gradient(135deg, var(--pattern-color, rgba(19,74,127,.08)) 0 2px, transparent 2px 12px); }
    .pattern-grid{ background-image: linear-gradient(var(--pattern-color, rgba(19,74,127,.08)) 1px, transparent 1px), linear-gradient(90deg, var(--pattern-color, rgba(19,74,127,.08)) 1px, transparent 1px); background-size: 24px 24px; }

    /* Contact */
    .input { width:100%; padding:.7rem .9rem; border:1px solid var(--border); border-radius:16px; }
    .helper { font-size:.8rem; color: var(--muted); }
    
          /* Logos */
      .logos__row{ display:flex; gap:57px; align-items:center; justify-content:center; opacity:.9; flex-wrap:wrap; }


    /* Footer */
    .site-footer{border-top:1px solid var(--border); background:#0b1220; color:#e5e7eb; padding:3rem 0;}
    .site-footer a{color:inherit}
    .footer__grid{display:grid;gap:.5rem;grid-template-columns:2fr 1fr 1.2fr}
    @media (max-width:900px){.footer__grid{grid-template-columns:1fr}}
    .footer__title{font-size:.8rem;letter-spacing:.01em;text-transform:uppercase;color:#9ca3af;margin-bottom:.5rem}
    .footer__brand .muted{color:#cbd5e1}
    .footer__logo{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--accent);color:#fff;font-weight:800;margin-bottom:.5rem}
    .footer__links{display:grid;gap:.15rem}
    .footer__links a{opacity:.9}
    .footer__links a:hover{opacity:1;text-decoration:underline}
    .social{display:flex;gap:.5rem;margin-top:.5rem}
    .social a{display:inline-flex;align-items:center;gap:.4rem;border:1px solid rgba(255,255,255,.15);border-radius:12px;padding:.35rem .6rem;font-size:.85rem}
    .footer__legal{margin-top:1.25rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.15);font-size:.85rem;color:#9ca3af;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
    .to-top{border:1px solid rgba(255,255,255,.15);border-radius:12px;padding:.25rem .5rem}

    /* Floating chat */
    .chat { position:fixed; right:1rem; bottom:1rem; background:#22c55e; color:#fff; border-radius:16px; padding:.75rem 1rem; display:inline-flex; align-items:center; gap:.5rem; box-shadow: 0 8px 24px rgba(0,0,0,.15); }

    /* Utility */
    .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }