:root{
    --bg:#EFEBE0; --surface:#FFFFFF; --surface-2:#FBF9F2;
    --ink:#17251D; --ink-2:#5C6A60; --ink-3:#8A958C;
    --line:#E5DFD1; --line-2:#EEE9DC;
    --green:#1F5D44; --green-dark:#143C2D; --green-soft:#E1EDE4; --green-mid:#2E8061;
    --saffron:#E0A02E; --saffron-soft:#FAEDD3; --saffron-ink:#946312;
    --coral:#D56A4C; --coral-soft:#F7E3DB; --coral-ink:#9C4126;
    --display:"Bricolage Grotesque", system-ui, sans-serif;
    --sans:"Inter", system-ui, sans-serif;
    --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px;
    --shadow:0 1px 2px rgba(20,40,30,.04), 0 8px 24px rgba(20,40,30,.06);
    --shadow-lg:0 4px 12px rgba(20,40,30,.06), 0 24px 60px rgba(20,40,30,.12);
  }
  *{box-sizing:border-box; margin:0; padding:0}
  html{-webkit-text-size-adjust:100%}
  body{font-family:var(--sans); color:var(--ink); background:var(--bg); line-height:1.5;
    -webkit-font-smoothing:antialiased; min-height:100vh;
    background-image:radial-gradient(circle at 12% 8%, rgba(224,160,46,.10), transparent 42%),
                     radial-gradient(circle at 88% 92%, rgba(31,93,68,.10), transparent 45%);
    background-attachment:fixed;}
  h1,h2,h3,h4,h5{font-family:var(--display); font-weight:600; letter-spacing:-.01em; line-height:1.15}
  button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit}
  svg{display:block}
  .num{font-family:var(--display); font-variant-numeric:tabular-nums}

  .top{max-width:1180px; margin:0 auto; padding:28px 24px 8px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
  .brand{display:flex; align-items:center; gap:11px}
  .brand-mark{width:38px; height:38px; border-radius:11px; background:var(--green); display:grid; place-items:center; color:#fff; flex:none}
  .brand-name{font-family:var(--display); font-weight:700; font-size:19px; letter-spacing:-.02em}
  .brand-name span{color:var(--green)}
  .brand-tag{font-size:12px; color:var(--ink-3); margin-top:-2px}
  .switch{display:inline-flex; background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:4px; box-shadow:var(--shadow); gap:2px}
  .switch button{display:flex; align-items:center; gap:8px; padding:9px 16px; border-radius:999px; font-size:13.5px; font-weight:500; color:var(--ink-2); white-space:nowrap; transition:color .2s}
  .switch button .dot{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.4}
  .switch button.on{background:var(--green); color:#fff}
  .switch button.on .dot{opacity:1; background:var(--saffron)}

  .stage{max-width:1180px; margin:0 auto; padding:18px 24px 60px}
  .view{display:none}
  .view.on{display:block; animation:rise .45s cubic-bezier(.2,.7,.3,1)}
  @keyframes rise{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
  .view-head{margin:6px 0 22px; max-width:660px}
  .eyebrow{display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--saffron-ink); background:var(--saffron-soft); padding:5px 11px; border-radius:999px; margin-bottom:12px}
  .view-head h2{font-size:25px; color:var(--ink)}
  .view-head p{color:var(--ink-2); font-size:14.5px; margin-top:6px}