:root {
      /* Base neutrals */
      --bg-rgb: 12, 10, 22;
      --surface-rgb: 26, 24, 44;
      --text-rgb: 246, 244, 255;
      --sub-rgb: 188, 184, 220;

      /* Brand colors from your logo */
      --brand-green-rgb: 114, 191, 70;
      --brand-teal-rgb: 34, 145, 125;
      --brand-pink-rgb: 220, 40, 120;
      --brand-blue-rgb: 30, 90, 170;

      /* Aliases for existing code paths */
      --primary-rgb: var(--brand-green-rgb);
      --accent-rgb: var(--brand-pink-rgb);

      --radius: 14px;
      --shadow: 0 10px 30px rgba(0, 0, 0, .38);
      --ring: 0 0 0 3px rgba(var(--primary-rgb), .55);
      --header-height: 61px;
    }

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

    body {
      margin: 0;
      padding-top: var(--header-height);
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Ubuntu, Arial, sans-serif;
      color: rgb(var(--text-rgb));
      background:
        radial-gradient(1100px 520px at 12% -12%, rgba(var(--brand-green-rgb), .16), transparent 55%),
        radial-gradient(900px 500px at 88% -18%, rgba(var(--brand-pink-rgb), .16), transparent 55%),
        rgb(var(--bg-rgb));
      background-attachment: fixed;
    }

    a { color: inherit; text-decoration: none }
    img { max-width: 100%; display: block }

    @keyframes grow-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

    .progress {
      position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 9999;
      background: linear-gradient(
        90deg,
        rgb(var(--brand-green-rgb)),
        rgb(var(--brand-teal-rgb)),
        rgb(var(--brand-blue-rgb)),
        rgb(var(--brand-pink-rgb))
      );
      transform-origin: left center;
      animation: grow-progress auto linear;
      animation-timeline: scroll(root block);
    }

    header {
      position: fixed; top: 0; left: 0; width: 100%; z-index: 50;
      backdrop-filter: saturate(140%) blur(10px);
      background: rgba(12, 10, 22, .6);
      border-bottom: 1px solid rgba(255, 255, 255, .06);
    }

    .nav {
      max-width: 1200px; margin: 0 auto; padding: 12px 20px;
      height: var(--header-height); display: flex; align-items: center; gap: 16px; justify-content: space-between;
    }

    .brand { display: flex; align-items: center; gap: 10px; z-index: 1; }

    .brand-logo { display: block; height: 36px; width: auto; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0,0,0,.35)); }
    @media (max-width: 480px) { .brand-logo { height: 30px; } }

    .menu { display: flex; gap: 16px; align-items: center; flex-wrap: wrap }
    .menu a { position: relative; padding: 8px 10px; color: rgb(var(--sub-rgb)); }
    .menu a::after {
      content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px;
      background: linear-gradient(
        90deg,
        rgb(var(--brand-green-rgb)),
        rgb(var(--brand-teal-rgb)),
        rgb(var(--brand-blue-rgb)),
        rgb(var(--brand-pink-rgb))
      );
      transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
    }
    .menu a:hover, .menu a:focus { color: rgb(var(--text-rgb)); }
    .menu a:hover::after, .menu a:focus::after { transform: scaleX(1); }

    .menu-toggle { display: none; }

    @media (max-width: 768px) {
      .nav { justify-content: space-between; }
      .brand { order: 1; }

      .menu {
        display: none; position: fixed; inset: var(--header-height) 0 0 0;
        background: rgba(12, 10, 22, .95); backdrop-filter: blur(10px);
        height: calc(100vh - var(--header-height));
        flex-direction: column; align-items: center; padding-top: 40px; gap: 24px; order: 3;
      }
      .menu.is-active { display: flex; }

      .menu-toggle {
        display: flex; order: 2; flex-direction: column; justify-content: space-around;
        width: 28px; height: 28px; background: transparent; border: none; cursor: pointer; padding: 0; z-index: 60;
      }
      .menu-toggle span {
        width: 100%; height: 3px; background: rgb(var(--brand-green-rgb)); border-radius: 3px;
        transition: all .3s cubic-bezier(0.68, -0.55, 0.27, 1.55); position: relative; transform-origin: center;
      }
      .menu-toggle.is-active span:nth-child(1) { transform: rotate(45deg) translate(6px, 6px); }
      .menu-toggle.is-active span:nth-child(2) { opacity: 0; transform: translateX(-20px); }
      .menu-toggle.is-active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
    }

    .hero {
      max-width: 1200px; margin: 0 auto; padding: 80px 20px 40px;
      display: grid; grid-template-columns: 1.2fr .8fr; gap: 32px; align-items: center;
    }
    @media (max-width:900px) { .hero { grid-template-columns: 1fr } }

    .kicker {
      display: inline-flex; gap: 8px; align-items: center; padding: 6px 10px; border-radius: 999px; font-size: 13px;
      background: rgba(var(--brand-green-rgb), .12);
      color: rgb(var(--brand-green-rgb));
      border: 1px solid rgba(var(--brand-green-rgb), .28);
    }

    .title { font-size: clamp(28px, 4.5vw, 56px); line-height: 1.05; margin: 12px 0 10px; letter-spacing: .2px; }
    .title .accent {
      background: linear-gradient(
        90deg,
        rgb(var(--brand-green-rgb)),
        rgb(var(--brand-teal-rgb)),
        rgb(var(--brand-blue-rgb)),
        rgb(var(--brand-pink-rgb))
      );
      -webkit-background-clip: text; background-clip: text; color: transparent;
    }

    .lead { color: rgb(var(--sub-rgb)); max-width: 60ch }

    .cta { display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap }

    .btn {
      position: relative; isolation: isolate; padding: 12px 18px; border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, .10);
      background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
      color: rgb(var(--text-rgb));
      display: inline-flex; gap: 10px; align-items: center;
      transition: transform .15s ease, box-shadow .2s ease;
      box-shadow: var(--shadow); will-change: transform;
    }
    .btn:hover { transform: translateY(-2px) }
    .btn:active { transform: translateY(0) }

    .btn-primary {
      background: linear-gradient(
        90deg,
        rgb(var(--brand-green-rgb)),
        rgb(var(--brand-teal-rgb)),
        rgb(var(--brand-blue-rgb)),
        rgb(var(--brand-pink-rgb))
      );
      border-color: transparent; color: #071018;
    }

    .btn .ripple { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none }
    .btn .ripple span {
      position: absolute; width: 12px; height: 12px; border-radius: 999px;
      background: rgba(255, 255, 255, .35);
      transform: translate(-50%, -50%) scale(1);
      animation: ripple .6s ease-out forwards;
    }
    @keyframes ripple { to { transform: translate(-50%, -50%) scale(14); opacity: 0; } }

    .hero-visual {
      position: relative; aspect-ratio: 4/3; border-radius: var(--radius); overflow: hidden;
      background: linear-gradient(140deg, rgb(var(--surface-rgb)), rgb(var(--bg-rgb)));
      border: 1px solid rgba(255, 255, 255, .08);
      box-shadow: var(--shadow);
    }

    .grid {
      position: absolute; inset: -20% -20% -20% -20%;
      background-image:
        radial-gradient(1px 1px at 20px 20px, rgba(var(--brand-blue-rgb), .45) 60%, transparent 61%),
        radial-gradient(1px 1px at 60px 60px, rgba(var(--brand-pink-rgb), .35) 60%, transparent 61%);
      background-size: 80px 80px; opacity: .25; transform: translateZ(0);
    }

    .panel {
      position: absolute; inset: 12px; border-radius: 12px;
      background:
        linear-gradient(180deg, rgba(var(--brand-green-rgb), .10), transparent 40%),
        linear-gradient(0deg, rgba(var(--brand-pink-rgb), .10), transparent 40%);
      border: 1px solid rgba(255, 255, 255, .06);
    }

    section { max-width: 1200px; margin: 0 auto; padding: 60px 20px }

    .section-title {
      font-size: 28px; margin: 0 0 16px;
      background: linear-gradient(
        90deg,
        rgb(var(--brand-green-rgb)),
        rgb(var(--brand-teal-rgb)),
        rgb(var(--brand-blue-rgb)),
        rgb(var(--brand-pink-rgb))
      );
      -webkit-background-clip: text; background-clip: text; color: transparent;
    }
    .section-sub { color: rgb(var(--sub-rgb)); margin: 0 0 24px }

    .cards { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px }
    .card {
      grid-column: span 4; min-height: 180px; border-radius: 14px; overflow: hidden;
      background: rgb(var(--surface-rgb));
      border: 1px solid rgba(255, 255, 255, .08);
      padding: 18px; position: relative; transform: translateY(10px); opacity: 0;
      transition: opacity .5s ease, transform .5s ease; will-change: transform, opacity;
    }
    @media (max-width:900px) { .card { grid-column: span 6 } }
    @media (max-width:600px) { .card { grid-column: span 12 } }
    .card.in-view { opacity: 1; transform: translateY(0) }
    .card:hover { outline: 1px solid rgba(var(--brand-green-rgb), .28) }
    .card h3 { margin: 4px 0 8px; font-size: 18px; color: rgb(var(--text-rgb)); }
    .card p { margin: 0; color: rgb(var(--sub-rgb)); }

    .chip {
      display: inline-flex; gap: 8px; align-items: center;
      background: rgba(var(--brand-green-rgb), .12);
      color: rgb(var(--brand-green-rgb));
      border: 1px solid rgba(var(--brand-green-rgb), .28);
      border-radius: 999px; padding: 6px 10px; font-size: 12px;
    }
    .chip.is-teal {
      background: rgba(var(--brand-teal-rgb), .12);
      color: rgb(var(--brand-teal-rgb));
      border: 1px solid rgba(var(--brand-teal-rgb), .28);
    }
    .chip.is-pink {
      background: rgba(var(--brand-pink-rgb), .12);
      color: rgb(var(--brand-pink-rgb));
      border: 1px solid rgba(var(--brand-pink-rgb), .28);
    }
    .chip.is-blue {
      background: rgba(var(--brand-blue-rgb), .12);
      color: rgb(var(--brand-blue-rgb));
      border: 1px solid rgba(var(--brand-blue-rgb), .28);
    }

    .portfolio { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px }
    .tile {
      grid-column: span 6; aspect-ratio: 16/10; border-radius: 14px; overflow: hidden; position: relative;
      background: linear-gradient(135deg, rgb(var(--surface-rgb)), rgb(var(--bg-rgb)));
      border: 1px solid rgba(255, 255, 255, .06);
      box-shadow: var(--shadow);
      transform: translateY(12px); opacity: 0;
      transition: opacity .5s ease, transform .5s ease; will-change: transform, opacity;
    }
    .tile.in-view { opacity: 1; transform: translateY(0) }
    @media (max-width:800px) { .tile { grid-column: span 12 } }

    .tile .meta {
      position: absolute; left: 12px; bottom: 12px; right: 12px;
      display: flex; justify-content: space-between; align-items: center;
      background: rgba(0, 0, 0, .35); backdrop-filter: blur(6px);
      padding: 10px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .08);
    }

    .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px }
    @media (max-width:800px) { .stats { grid-template-columns: repeat(2, 1fr) } }

    .stat {
      padding: 18px; border-radius: 12px;
      background: rgb(var(--surface-rgb));
      border: 1px solid rgba(255, 255, 255, .08);
      text-align: center;
    }
    .stat .num {
      font-size: 36px; letter-spacing: .5px;
      background: linear-gradient(
        90deg,
        rgb(var(--brand-green-rgb)),
        rgb(var(--brand-teal-rgb)),
        rgb(var(--brand-blue-rgb)),
        rgb(var(--brand-pink-rgb))
      );
      -webkit-background-clip: text; background-clip: text; color: transparent;
    }
    .stat .lbl { color: rgb(var(--sub-rgb)); }

    .testimonials { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px }
    .quote {
      grid-column: span 6; border-radius: 14px; padding: 18px;
      border: 1px solid rgba(255, 255, 255, .08);
      background: rgb(var(--surface-rgb));
      transform: translateY(10px); opacity: 0;
      transition: opacity .5s ease, transform .5s ease; will-change: transform, opacity;
    }
    .quote.in-view { opacity: 1; transform: translateY(0) }
    @media (max-width:900px) { .quote { grid-column: span 12 } }

    .contact {
      display: flex; gap: 16px; flex-wrap: wrap; align-items: center; justify-content: space-between;
      background: linear-gradient(135deg, rgba(var(--brand-teal-rgb), .14), rgba(var(--brand-blue-rgb), .14));
      border: 1px solid rgba(255, 255, 255, .08);
      padding: 20px; border-radius: 14px;
    }

    footer {
      color: rgb(var(--sub-rgb));
      border-top: 1px solid rgba(255, 255, 255, .06);
      background: rgba(0, 0, 0, .25);
    }

    .foot {
      max-width: 1200px; margin: 0 auto; padding: 20px;
      display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px;
    }

    :focus-visible { outline: none; box-shadow: var(--ring) }

    @media (prefers-reduced-motion: reduce) {
      * {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .001ms !important;
      }
    }

    .whatsapp-float {
      position: fixed; right: 18px; bottom: 18px; width: 56px; height: 56px; border-radius: 999px;
      display: inline-flex; align-items: center; justify-content: center;
      color: #072b1a; background: #25D366;
      box-shadow: 0 12px 30px rgba(0, 0, 0, .28);
      border: 1px solid rgba(255, 255, 255, .12);
      z-index: 10000;
      transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
    }
    .whatsapp-float:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(0, 0, 0, .34); background: #22c95f; }
    .whatsapp-float:active { transform: translateY(0); }
    @media (prefers-reduced-motion: reduce) { .whatsapp-float { transition-duration: .001ms !important; } }