:root{
    --frog:#3BAA5C; --spruce:#2D5A4A; --topo:#E0661A; --sage:#9BBEAC;
    --tile: 420px;
  }
  
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    color:var(--spruce);
    background:#fff;
    font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    line-height:1.5; overflow-x:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  }
  
  /* Infinite orange topo lines */
  body::before{
    content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
    background:var(--topo);
    -webkit-mask:url("./topo_lines_ms_small.svg") repeat;
            mask:url("./topo_lines_ms_small.svg") repeat;
    -webkit-mask-size:var(--tile) var(--tile);
            mask-size:var(--tile) var(--tile);
    opacity:1;
  }
  
  /* Center vignette to boost legibility; edges stay crisp */
  body::after{
    content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
    background:
      radial-gradient(120% 140% at 50% 35%,
        rgba(255,255,255,.96) 0%,
        rgba(255,255,255,.92) 28%,
        rgba(255,255,255,.84) 46%,
        rgba(255,255,255,.68) 60%,
        rgba(255,255,255,.00) 78%);
  }
  
  header.site{
    position:sticky; top:0; z-index:10;
    backdrop-filter:saturate(1.2) blur(8px);
    background:color-mix(in oklab, var(--sage) 85%, transparent);
    border-bottom:1px solid color-mix(in oklab, var(--spruce) 15%, transparent);
  }
  .nav{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1rem; max-width:1200px; margin:0 auto; padding:16px 24px}
  .nav ul{justify-self:center; display:flex; gap:1rem; list-style:none; margin:0; padding:0; align-items:center}
  .nav .btn{justify-self:end; margin-right:24px; background:#ffffff; color:var(--spruce); border-color:#ffffff}
  .nav button.btn{border:1px solid #ffffff; cursor:pointer}
  .linkedin-btn{color:var(--spruce) !important; font-weight:600; transition:color .2s ease}
  .linkedin-btn:hover{color:#0077b5 !important}
  .brand{display:flex; align-items:center; gap:.6rem; color:var(--spruce); text-decoration:none; font-weight:700}
  .brand img.brand-logo{width:28px; height:28px; border-radius:999px; object-fit:cover; object-position:center}
  .nav a{color:var(--spruce); text-decoration:none; font-weight:600}
  
  .btn{display:inline-flex; align-items:center; justify-content:center; padding:.65rem 1rem; border-radius:.75rem; border:1px solid #ccd; text-decoration:none; font-weight:600; color:var(--spruce); transition:box-shadow .15s ease, transform .08s ease}
  .btn:hover{box-shadow:0 4px 14px rgba(17,24,39,.12)}
  .btn:active{transform:translateY(1px)}
  .btn.primary{background:var(--frog); color:#fff; border-color:transparent}
  
  /* White fill, GREEN outline for See products */
  .btn.white{background:#ffffff; color:var(--spruce); border-color:#ffffff}
  .btn.white.outline{border:2px solid var(--frog); color:var(--spruce);}
  
  .hero{max-width:1200px; margin:6vh auto 3rem; padding:0 clamp(16px,4vw,40px); text-align:center}
  .hero-content{max-width:800px; margin:0 auto}
  .hero h1{font-family:"Manrope", Inter, system-ui, sans-serif; letter-spacing:-.01em; font-size:clamp(32px,4.4vw,56px); margin:.5rem 0 .25rem; color:var(--spruce)}
  .hero p{font-size:clamp(16px,1.2vw,20px); margin:0 auto 1.5rem; max-width:60ch; color:var(--spruce)}
  .hero .actions{display:flex; gap:.75rem; flex-wrap:wrap; justify-content:center}
  
  .frog-showcase{max-width:1200px; margin:0 auto 4rem; padding:0 clamp(16px,4vw,40px); display:flex; justify-content:center}
  #frogWrap{aspect-ratio:1/1; width:min(420px, 80vw); position:relative; border-radius:18px; background:linear-gradient(180deg, #f8fafc, #eef6f0);
    box-shadow:0 6px 16px rgba(17,24,39,.10), 0 2px 4px rgba(17,24,39,.06); overflow:hidden}
  #frogCanvas{display:block; width:100%; height:100%}
  #ui{position:absolute; inset:auto 10px 10px 10px; display:flex; align-items:center; gap:.5rem; justify-content:center; padding:.35rem .5rem; background:rgba(255,255,255,.75); backdrop-filter:blur(8px); border-radius:12px; border:1px solid rgba(0,0,0,.06)}
  #ui button, #ui input[type="color"]{appearance:none; border:none; border-radius:999px; width:28px; height:28px; cursor:pointer; box-shadow:inset 0 0 0 2px rgba(0,0,0,.08);}
  #ui button[aria-pressed="true"]{box-shadow:inset 0 0 0 3px #0002, 0 0 0 2px #0001}
  #frogError{position:absolute; left:12px; top:12px; font-size:12px; background:#ffeff0; color:#a02222; border:1px solid #e2a5a8; padding:.3rem .5rem; border-radius:8px}
  
  section{max-width:1200px; margin:4rem auto; padding:0 clamp(16px,4vw,40px); color:var(--spruce)}
  section h2{font-family:"Manrope", Inter, system-ui, sans-serif; letter-spacing:-.01em; font-size:clamp(26px,3.2vw,40px); color:var(--spruce); margin:0 0 .75rem}
  .grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:16px}
  .card{background:#fff; border:1px solid #e6e6eb; border-radius:16px; padding:16px; box-shadow:0 2px 6px rgba(17,24,39,.06); color:var(--spruce)}
  .card h3{margin:.25rem 0; font-size:1.1rem; color:var(--spruce)}
  .card p{margin:.25rem 0 0; color:var(--spruce)}
  
  .team{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:18px}
  .person{position:relative; background:#fff; border:1px solid #e6e6eb; border-radius:16px; padding:18px; transition:transform .2s ease, box-shadow .2s ease; color:var(--spruce)}
  .person:hover{transform:translateY(-2px); box-shadow:0 8px 24px rgba(17,24,39,.12)}
  .avatar{width:84px; height:84px; border-radius:999px; background:conic-gradient(from 30deg, var(--frog), #96d0af, #bce4ca, var(--frog)); display:grid; place-items:center; color:#fff; font-weight:800; font-size:28px; box-shadow:inset 0 0 0 3px #fff; border:1px solid #e8ecef}
  img.avatar{width:84px; height:84px; border-radius:999px; object-fit:cover; box-shadow:inset 0 0 0 3px #fff; border:1px solid #e8ecef}
  .person h3{margin:.5rem 0 .25rem}
  .person .more{max-height:0; overflow:hidden; transition:max-height .35s ease}
  .person.expanded .more{max-height:160px}
  .toggle{margin-top:.5rem; font-weight:600; color:var(--frog); cursor:pointer}
  
  .team-photo{max-width:1200px; margin:3rem auto 4rem; border-radius:20px; overflow:hidden; box-shadow:0 12px 32px rgba(17,24,39,.18)}
  .team-photo img{width:100%; height:auto; display:block}
  
  @media (max-width: 960px){
    .hero{margin:4vh auto 2rem}
    #frogWrap{width:min(350px, 85vw)}
  }