:root{
    --paper:#FDF3EF;
    --paper2:#F7E0DF;
    --forest:#B8860B;
    --forest-deep:#7A2E45;
    --leaf:#E8A0BF;
    --bio-teal:#C9932E;
    --soil:#B76E79;
    --ink:#3B222B;
    --ink-dim:#8B6B74;
    --line: rgba(122,46,69,0.16);
    --card:#FFFFFF;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{margin:0; background:var(--paper); color:var(--ink); font-family:'Manrope',sans-serif; -webkit-font-smoothing:antialiased;}
  @media (prefers-reduced-motion: reduce){*{animation:none !important; transition:none !important;}}
  a{color:inherit;}
  .wrap{max-width:1180px; margin:0 auto; padding:0 24px;}

  section{position:relative; z-index:1;}

  /* nav */
  .tabs{position:sticky; top:0; z-index:50; display:flex; overflow-x:auto; background:rgba(245,246,238,0.92); backdrop-filter:blur(6px);
    border-bottom:1px solid var(--line); padding:0 24px; scrollbar-width:none;}
  .tabs::-webkit-scrollbar{display:none;}
  .tabs a{flex:0 0 auto; font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:0.07em; text-transform:uppercase;
    text-decoration:none; color:var(--ink-dim); padding:14px 15px; border-right:1px solid var(--line); white-space:nowrap;}
  .tabs a:hover{color:var(--forest);}

  /* cover */
  .cover{min-height:94vh; display:flex; flex-direction:column; justify-content:space-between; padding:52px 24px 40px;
    background:
      radial-gradient(ellipse 900px 560px at 92% -6%, rgba(111,168,61,0.24), transparent 60%),
      radial-gradient(ellipse 800px 560px at 0% 106%, rgba(18,137,127,0.16), transparent 60%),
      var(--paper);
    border-bottom:2px solid var(--forest-deep);
    overflow:hidden;}
  .cover-top{display:flex; justify-content:space-between; align-items:flex-start; font-family:'JetBrains Mono',monospace;
    font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-dim);}
  .brandmark{display:flex; align-items:center; gap:10px; color:var(--forest-deep); font-weight:700;}
  .brandmark img{height:34px; width:auto; border-radius:6px; display:block;}
  .cell-mark{width:12px; height:12px; border-radius:50%; background:var(--forest); transform:rotate(20deg);}
  .status-chip{font-size:10px; padding:5px 10px; border:1px solid var(--forest); color:var(--forest-deep); border-radius:20px; letter-spacing:0.1em; background:#fff;}
  .cover-mid{max-width:1020px; margin:56px auto 0;}
  .eyebrow{font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--bio-teal);
    margin:0 0 18px; display:flex; align-items:center; gap:10px;}
  .eyebrow::before{content:''; width:26px; height:2px; background:var(--bio-teal); display:inline-block;}
  h1.title{font-family:'Archivo',sans-serif; font-weight:800; font-size:clamp(44px,8.4vw,100px); line-height:0.96;
    letter-spacing:-0.02em; margin:0 0 20px; color:var(--forest-deep);}
  h1.title span{color:var(--leaf);}
  .cover-sub{font-size:clamp(15px,1.6vw,18px); line-height:1.6; max-width:620px; color:var(--ink-dim);}
  .cover-bottom{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:52px; border-top:1px solid var(--line); padding-top:20px;}
  .stat .n{font-family:'Archivo',sans-serif; font-size:clamp(22px,2.8vw,32px); font-weight:700; color:var(--forest);}
  .stat .l{font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.04em; color:var(--ink-dim); text-transform:uppercase; margin-top:4px;}

  .disclaimer{font-size:11.5px; color:var(--ink-dim); max-width:720px; line-height:1.6; margin-top:26px; padding:12px 14px;
    border:1px dashed var(--line); border-radius:4px; background:rgba(255,255,255,0.55);}
  .disclaimer b{color:var(--soil);}

  /* section head */
  .section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; padding:60px 0 26px;
    border-bottom:2px solid var(--forest-deep); flex-wrap:wrap;}
  .section-head .num{font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--soil); letter-spacing:0.08em;}
  .section-head h2{font-family:'Archivo',sans-serif; font-weight:700; font-size:clamp(26px,3.6vw,42px); margin:6px 0 0; letter-spacing:-0.01em; color:var(--forest-deep);}
  .section-head p{max-width:420px; font-size:13.5px; line-height:1.6; color:var(--ink-dim); margin:0;}

  /* process rail (fermentation) */
  .rail{display:grid; grid-template-columns:repeat(6,1fr); gap:2px; margin:30px 0 10px; border:1px solid var(--line); border-radius:6px; overflow:hidden; background:var(--line);}
  @media (max-width:900px){.rail{grid-template-columns:repeat(2,1fr);}}
  .rail-step{background:var(--card); padding:20px 16px; min-height:190px; display:flex; flex-direction:column; justify-content:space-between;}
  .rail-step .idx{font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--bio-teal);}
  .rail-step h4{font-family:'Archivo',sans-serif; font-size:15px; margin:10px 0 8px; font-weight:600; line-height:1.25; color:var(--forest-deep);}
  .rail-step p{font-size:11.5px; line-height:1.5; color:var(--ink-dim); margin:0;}
  .rail-step .dot{width:8px; height:8px; border-radius:50%; background:var(--leaf); margin-top:12px;}

  .process-photo{width:100%; height:280px; object-fit:cover; border-radius:6px; border:1px solid var(--line); display:block; filter:saturate(0.92) sepia(4%);}
  .photo-cap{font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--ink-dim); margin-top:8px; letter-spacing:0.03em;}

  .two-col{display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:start; padding:30px 0;}
  @media (max-width:840px){.two-col{grid-template-columns:1fr;}}

  #fermentation{overflow:hidden;}
  #fermentation::before{content:""; position:absolute; inset:0; background:radial-gradient(circle at 85% 15%, rgba(18,137,127,0.10), transparent 55%); opacity:0.10; filter:saturate(0.55) sepia(0.25); z-index:0; pointer-events:none;}
  #fermentation .wrap{position:relative; z-index:1;}

  /* biodegradation timeline */
  .env-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:26px 0;}
  @media (max-width:900px){.env-grid{grid-template-columns:repeat(2,1fr);}}
  .env-card{background:var(--card); border:1px solid var(--line); border-radius:6px; padding:18px; border-top:3px solid var(--chip,var(--forest));}
  .env-card .env-name{font-family:'Archivo',sans-serif; font-weight:700; font-size:15px; margin-bottom:6px; color:var(--forest-deep);}
  .env-card .env-time{font-family:'JetBrains Mono',monospace; font-size:20px; color:var(--chip,var(--forest)); margin-bottom:8px;}
  .env-card p{font-size:12px; line-height:1.55; color:var(--ink-dim); margin:0;}

  .img-strip{display:grid; grid-template-columns:repeat(5,1fr); gap:2px; margin:22px 0; border-radius:6px; overflow:hidden; border:1px solid var(--line);}
  .img-strip figure{margin:0; position:relative;}
  .img-strip img{width:100%; height:150px; object-fit:cover; display:block; filter:saturate(0.9);}
  .img-strip figcaption{position:absolute; bottom:0; left:0; right:0; font-family:'JetBrains Mono',monospace; font-size:9px;
    color:#fff; background:linear-gradient(transparent, rgba(21,52,32,0.82)); padding:14px 6px 5px; text-align:center;}
  @media (max-width:760px){.img-strip{grid-template-columns:repeat(3,1fr);} .img-strip figure:nth-child(n+4){display:none;}}

  /* grade cards */
  .grade-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px; margin-top:24px;}
  .grade-card{background:var(--card); border:1px solid var(--line); border-radius:6px; padding:18px 18px 16px; position:relative; overflow:hidden; box-shadow:0 1px 2px rgba(21,52,32,0.05);}
  .grade-card:before{content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--chip,var(--forest));}
  .grade-code{font-family:'JetBrains Mono',monospace; font-size:12.5px; font-weight:600; color:var(--chip,var(--forest)); margin-bottom:8px;}
  .grade-name{font-family:'Archivo',sans-serif; font-size:15px; font-weight:700; margin:0 0 8px; line-height:1.3; color:var(--forest-deep);}
  .grade-desc{font-size:12px; line-height:1.55; color:var(--ink-dim); margin:0 0 12px;}
  .grade-specs{font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--ink-dim); border-top:1px dashed var(--line); padding-top:10px; line-height:1.9;}
  .grade-specs b{color:var(--ink);}
  .bench{display:inline-block; margin-top:10px; font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:0.04em;
    color:var(--soil); border:1px solid rgba(138,90,52,0.4); padding:2px 7px; border-radius:20px;}

  /* certifications */
  .cert-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; margin-top:24px;}
  .cert-card{background:var(--card); border:1px solid var(--line); border-radius:6px; padding:18px; box-shadow:0 1px 2px rgba(21,52,32,0.05);}
  .cert-status{font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:0.06em; text-transform:uppercase; padding:3px 9px; border-radius:20px; display:inline-block; margin-bottom:10px;}
  .cert-status.target{background:rgba(138,90,52,0.10); color:var(--soil); border:1px solid rgba(138,90,52,0.35);}
  .cert-status.progress{background:rgba(18,137,127,0.10); color:var(--bio-teal); border:1px solid rgba(18,137,127,0.35);}
  .cert-name{font-family:'Archivo',sans-serif; font-size:14.5px; font-weight:700; margin-bottom:6px; color:var(--forest-deep);}
  .cert-card p{font-size:11.5px; line-height:1.5; color:var(--ink-dim); margin:0;}

  /* impact */
  .impact-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:22px;}
  @media (max-width:900px){.impact-grid{grid-template-columns:repeat(2,1fr);}}
  .impact-card{background:var(--card); border:1px solid var(--line); border-radius:6px; padding:22px 18px; box-shadow:0 1px 2px rgba(21,52,32,0.05);}
  .impact-card .n{font-family:'Archivo',sans-serif; font-weight:800; font-size:30px; color:var(--forest);}
  .impact-card .l{font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--ink-dim); margin-top:6px; line-height:1.5;}

  /* roadmap */
  .roadmap{margin-top:26px;}
  .phase{display:grid; grid-template-columns:130px 1fr; gap:20px; padding:22px 0; border-bottom:1px solid var(--line); position:relative; padding-left:24px; border-left:2px solid var(--line); margin-left:2px;}
  .phase:before{content:''; position:absolute; left:-7px; top:28px; width:12px; height:12px; border-radius:50%; background:var(--paper); border:2px solid var(--bio-teal);}
  .phase.active:before{background:var(--bio-teal);}
  .phase .ph{font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--bio-teal);}
  .phase .pdate{font-size:10.5px; color:var(--ink-dim); margin-top:4px;}
  .phase h4{font-family:'Archivo',sans-serif; font-size:17px; margin:0 0 8px; font-weight:700; color:var(--forest-deep);}
  .phase p{font-size:12.5px; line-height:1.6; color:var(--ink-dim); margin:0;}

  /* cosmetics gallery */
  .cosmetic-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:24px;}
  @media (max-width:900px){.cosmetic-grid{grid-template-columns:repeat(2,1fr);}}
  .cosmetic-card{background:var(--card); border:1px solid var(--line); border-radius:8px; overflow:hidden; box-shadow:0 1px 3px rgba(21,52,32,0.08);}
  .cosmetic-card img{width:100%; height:210px; object-fit:cover; display:block;}
  .mockup-stage{width:100%; height:210px; display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg, #F7E0DF 0%, #F0CFCB 100%); position:relative;}
  .mockup-stage img{height:82%; width:auto; object-fit:contain; display:block;}
  .concept-flag{position:absolute; top:8px; left:8px; font-family:'JetBrains Mono',monospace; font-size:8px; letter-spacing:0.05em; text-transform:uppercase;
    background:var(--forest-deep); color:#fff; padding:3px 7px; border-radius:3px;}
  .cosmetic-meta{padding:12px 14px 14px;}
  .cosmetic-meta .brand{font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:0.05em; text-transform:uppercase; color:var(--soil);}
  .cosmetic-meta .item{font-family:'Archivo',sans-serif; font-size:13px; font-weight:700; margin:4px 0 4px; color:var(--forest-deep);}
  .cosmetic-meta .note{font-size:10.5px; color:var(--ink-dim); line-height:1.5;}

  /* comparative table */
  .vs-table{width:100%; border-collapse:collapse; margin-top:22px; font-size:13px; background:var(--card); border:1px solid var(--line); border-radius:6px; overflow:hidden;}
  .vs-table th, .vs-table td{padding:13px 16px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top;}
  .vs-table th{font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:0.05em; text-transform:uppercase; background:var(--paper2); color:var(--forest-deep);}
  .vs-table td{font-size:12.5px; line-height:1.55; color:var(--ink-dim);}
  .vs-table tr:last-child td{border-bottom:none;}
  .vs-table td.edha-col{color:var(--forest-deep); font-weight:600; background:rgba(111,168,61,0.07);}
  .vs-table td.syn-col{color:#8C5A3C;}
  .vs-table .param{font-weight:700; color:var(--ink); font-family:'JetBrains Mono',monospace; font-size:11.5px;}
  @media (max-width:760px){.vs-table{display:block; overflow-x:auto; white-space:nowrap;}}

  .caveat{font-size:11px; color:var(--ink-dim); line-height:1.6; margin-top:14px; padding:12px 14px; border-left:3px solid var(--soil); background:rgba(138,90,52,0.06); border-radius:0 4px 4px 0;}
  .caveat b{color:var(--soil);}

  /* performance engineering */
  .perf-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; margin-top:24px;}
  .perf-card{background:var(--card); border:1px solid var(--line); border-radius:6px; padding:18px; box-shadow:0 1px 2px rgba(21,52,32,0.05);}
  .perf-card .tag{font-family:'JetBrains Mono',monospace; font-size:9.5px; color:var(--bio-teal); letter-spacing:0.06em; text-transform:uppercase;}
  .perf-card h4{font-family:'Archivo',sans-serif; font-size:14.5px; font-weight:700; margin:6px 0 8px; color:var(--forest-deep);}
  .perf-card p{font-size:11.5px; line-height:1.55; color:var(--ink-dim); margin:0;}

  footer{margin-top:60px; padding:40px 24px 36px; background:var(--forest-deep); color:var(--paper); border-top:2px solid var(--forest-deep);}
  footer .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px;}
  footer h5{font-family:'Archivo',sans-serif; font-size:20px; margin:0 0 8px; font-weight:700;}
  footer p{font-size:12px; color:#EBD0D6; max-width:420px; line-height:1.6; margin:0;}
  footer .meta{font-family:'JetBrains Mono',monospace; font-size:10.5px; color:#D9AFC0; line-height:2;}