:root{
      /* Palette */
      --clr-lime:#A3FF00;          /* Primary */
      --clr-blue:#0066FF;          /* Secondary */
      --clr-text:#1A1A1A;          /* Neutral Dark Gray */
      --clr-ui:#B3B3B3;            /* Neutral Medium Gray */
      --clr-bg:#F5F5F5;            /* Neutral Light Gray */
      --clr-white:#FFFFFF;         /* White */
      --clr-success:#22C55E;       /* Success */
      --clr-warning:#FACC15;       /* Warning */
      --clr-error:#EF4444;         /* Error */
      --clr-border:#E5E5E5;        /* Card border */

      /* Typography */
      --ff-heading:'Inter', 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
      --ff-body:'Roboto', 'Source Sans Pro', system-ui, -apple-system, Segoe UI, sans-serif;
      --ff-mono:'JetBrains Mono','Fira Code', ui-monospace, SFMono-Regular, Menlo, monospace;

      --fs-body:16px; /* default 16–18px; tweak below with clamp */
      --radius-lg: 16px;
      --radius-md: 12px;
      --shadow-soft: 0 8px 24px rgba(0,0,0,.06);
      --container: min(1120px, 92vw);
    }

    html{
        scroll-behavior:smooth
    }
    body{
        margin:0; 
        font-family:var(--ff-body); 
        color:var(--clr-text); 
        background:var(--clr-white); 
        font-size:clamp(16px, 1.4vw, 18px);
    }

    /* Utilities */
    .container{
        width:var(--container); 
        margin-inline:auto
    }
    .btn{
        display:inline-flex; 
        align-items:center; 
        gap:.5rem; 
        padding:.85rem 1.1rem; 
        border-radius:999px; 
        text-decoration:none; 
        font-weight:700; 
        border:1px solid transparent; 
        transition:border-color .2s, transform .06s ease;
    }
    .btn:active{
        transform:translateY(1px)
    }
    .btn-primary{
        background:var(--clr-lime); 
        color:#0b0b0b;
    }
    .btn-primary:hover{
        border-color:#7ed300
    }
    .btn-secondary{
        background:var(--clr-blue); 
        color:#fff
    }
    .btn-secondary:hover{
        border-color:#004fd2
    }
    .btn-ghost{
        background:transparent; 
        color:var(--clr-blue); 
        border-color:var(--clr-blue)
    }

    .tag{display:inline-block; padding:.35rem .6rem; border-radius:999px; font-size:.8rem; font-weight:700}
    .tag.success{background:color-mix(in srgb, var(--clr-success) 18%, transparent); color:#0c5}
    .tag.warn{background:color-mix(in srgb, var(--clr-warning) 25%, transparent); color:#a67c00}
    .tag.error{background:color-mix(in srgb, var(--clr-error) 20%, transparent); color:#b11b1b}

    header.site{
      position:sticky; top:0; z-index:50; backdrop-filter:saturate(1.2) blur(6px);
      background:rgba(255,255,255,.86); border-bottom:1px solid var(--clr-border);
    }
    .nav{display:flex; align-items:center; justify-content:space-between; padding:.8rem 0}

    .brand{
      display:flex; 
      align-items:center; 
      gap:.6rem; 
      font-weight:800; 
      font-family:var(--ff-heading); 
      letter-spacing:.2px
    }
    .brand-mark{
      width:12px; 
      height:12px; 
      border-radius:3px; 
      background:linear-gradient(135deg, var(--clr-lime) 0%, var(--clr-blue) 100%); 
      box-shadow:0 0 0 4px color-mix(in srgb, var(--clr-lime) 35%, transparent)
    }

    .nav-links{display:flex; gap:1.2rem}
    .nav-links a{color:var(--clr-text); text-decoration:none; font-weight:600; position:relative}
    .nav-links a:after{content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--clr-lime); transform:scaleX(0); transform-origin:left; transition:transform .2s ease}
    .nav-links a:hover:after{transform:scaleX(1)}

    /* Hero */
    .hero{padding: 6rem 0 3.5rem; background:linear-gradient(180deg, #fff 0%, #fff 70%, var(--clr-bg) 100%)}
    .hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:2.2rem; align-items:center}
    .eyebrow{display:inline-flex; align-items:center; gap:.5rem; font-weight:700; color:#111; letter-spacing:.3px}
    .eyebrow .dot{width:10px; height:10px; border-radius:50%; background:var(--clr-lime); box-shadow:0 0 0 6px color-mix(in srgb, var(--clr-lime) 25%, transparent)}
    h1{font-family:var(--ff-heading); font-size:clamp(2.2rem, 4.5vw, 3.5rem); line-height:1.05; margin:.5rem 0 1rem}
    .subtitle{max-width:52ch; color:#333}

    .hero-card{background:#fff; border:1px solid var(--clr-border); border-radius:var(--radius-lg); box-shadow:var(--shadow-soft); padding:1.2rem}
    .metrics{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1rem}
    .metric{padding:1rem; border:1px dashed var(--clr-border); border-radius:14px; background:#fff}
    .metric h3{margin:0; font-family:var(--ff-heading); font-size:1.6rem}
    .metric p{margin:.35rem 0 0; color:#333; font-size:.9rem}

    /* Sections */
    section{padding:3.5rem 0}
    .section-title{font-family:var(--ff-heading); font-size:clamp(1.5rem,2.4vw,2rem); margin:0 0 1rem}

    .grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem}
    .card{background:#fff; border:1px solid var(--clr-border); border-radius:var(--radius-md); box-shadow:var(--shadow-soft); padding:1.1rem}
    .card h3{margin:.2rem 0 .25rem; font-family:var(--ff-heading)}
    .card p{margin:0; color:#333}
    .card .mono{font-family:var(--ff-mono); font-size:.9rem; color:#444}

    .chip-row{display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.7rem}
    .chip{border:1px solid var(--clr-ui); color:#111; border-radius:999px; padding:.4rem .65rem; font-size:.8rem}

    /* CTA */
    .cta{background:var(--clr-bg); border-top:1px solid var(--clr-border); border-bottom:1px solid var(--clr-border)}
    .cta-inner{display:flex; flex-wrap:wrap; align-items:center; gap:1rem; justify-content:space-between}

    /* Footer */
    footer{padding:2.4rem 0; color:#333}
    .footer-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:1rem}
    .small{font-size:.9rem}

    /* Responsive */
    @media (max-width: 940px){
      .hero-grid{grid-template-columns:1fr}
      .grid-3{grid-template-columns:1fr}
      .metrics{grid-template-columns:1fr 1fr}
      .footer-grid{grid-template-columns:1fr 1fr}
    }
    @media (max-width: 560px){
      .metrics{grid-template-columns:1fr}
      .footer-grid{grid-template-columns:1fr}
    }

    /* Optional future dark mode scaffold – enable when ready 
    @media (prefers-color-scheme: dark){
      :root{ color-scheme: dark; }
      body{ background:#0A0A0A; color:#EAEAEA; }
      header.site{ background:rgba(16,16,16,.7); border-color:#1C1C1C; }
      .hero{ background:linear-gradient(180deg, #0A0A0A 0%, #0A0A0A 70%, #111 100%); }
      .card,.hero-card{ background:#1C1C1C; border-color:#2a2a2a; }
      .subtitle, .card p{ color:#D8D8D8; }
      .chip{ border-color:#3a3a3a; color:#EAEAEA; }
      .cta{ background:#121212; border-color:#1C1C1C; }
      .nav-links a{ color:#EAEAEA; }
    }
      */