/* ═══ SUSTAINABILITY page CSS ═══ */
#hero{position:relative;min-height:min(80vh,720px);display:flex;align-items:center;overflow:hidden;padding:clamp(6rem,12vw,8rem) 0 clamp(3.5rem,8vw,5rem);background:var(--bg)}
#hero::after{display:none}
#threadCanvas{position:absolute;inset:0;width:100%;height:100%}
.hero-glow{position:absolute;inset:0;background:radial-gradient(ellipse 55% 50% at 70% 45%,rgba(111,174,126,.1),transparent 68%);pointer-events:none}
.hero-inner{position:relative;z-index:1;max-width:860px}
.hero-eye{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--verify);margin-bottom:1.6rem;display:flex;align-items:center;gap:.75rem;opacity:0;animation:fup .65s var(--ease) .15s forwards}
.hero-eye::before{content:'';width:28px;height:1px;background:var(--verify);opacity:.45}
h1.hero-h{font-size:clamp(2.2rem,6.3vw,4.2rem);font-weight:800;letter-spacing:-.033em;line-height:1.05;margin-bottom:1.4rem;opacity:0;animation:fup .72s var(--ease) .3s forwards}
h1.hero-h span{color:var(--verify)}
.hero-sub{font-size:clamp(.92rem,2vw,1rem);line-height:1.72;color:var(--text-dim);max-width:600px;margin-bottom:1.8rem;opacity:0;animation:fup .72s var(--ease) .45s forwards}
.honest{max-width:600px;border:1px solid var(--line);border-radius:7px;background:var(--panel);padding:1.2rem 1.4rem;font-size:.83rem;line-height:1.65;color:var(--text-dim);position:relative;overflow:hidden;opacity:0;animation:fup .72s var(--ease) .58s forwards}
.honest::before{content:'';position:absolute;left:0;top:10px;bottom:10px;width:2px;background:repeating-linear-gradient(to bottom,var(--gold) 0,var(--gold) 5px,transparent 5px,transparent 11px)}
.honest strong{color:var(--text)}
.hero-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1.2rem 2rem;max-width:620px;margin-top:2.2rem;opacity:0;animation:fup .72s var(--ease) .7s forwards}
.hmeta{border-left:1px solid var(--line);padding-left:1rem}
.hmeta-v{font-family:var(--mono);font-size:clamp(.95rem,2vw,1.1rem);color:var(--text)}
.hmeta-l{font-size:.72rem;color:var(--text-faint);margin-top:.2rem}
@keyframes fup{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* S02 fibre explorer */
#fibres{background:var(--panel)}
.fib-filters{display:flex;gap:.5rem;flex-wrap:wrap;margin:2rem 0 1.6rem}
.fib-chip{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;padding:.5rem .9rem;border:1px solid var(--line);border-radius:100px;background:transparent;color:var(--text-dim);cursor:pointer;transition:all .2s}
.fib-chip:hover{border-color:var(--text-faint);color:var(--text)}
.fib-chip.act{background:var(--panel-2);border-color:var(--verify);color:var(--verify)}
.fib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:7px;overflow:hidden}
.fib-card{background:var(--bg);padding:1.7rem 1.5rem;position:relative;overflow:hidden;transition:background .25s,opacity .35s,transform .35s}
.fib-card:hover{background:var(--panel-2)}
.fib-card.hide{display:none}
.fib-card::before{content:'';position:absolute;inset:0;background-image:repeating-linear-gradient(0deg,transparent 0,transparent 5px,rgba(111,174,126,.035) 5px,rgba(111,174,126,.035) 6px),repeating-linear-gradient(90deg,transparent 0,transparent 5px,rgba(111,174,126,.035) 5px,rgba(111,174,126,.035) 6px);opacity:0;transition:opacity .4s;pointer-events:none}
.fib-card:hover::before{opacity:1}
.fib-src{font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--verify);margin-bottom:.55rem}
.fib-n{font-size:.98rem;font-weight:700;color:var(--text);margin-bottom:.45rem}
.fib-b{font-size:.79rem;line-height:1.6;color:var(--text-dim)}
.fib-tags{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.9rem}
.fib-tag{font-family:var(--mono);font-size:.56rem;letter-spacing:.05em;text-transform:uppercase;padding:.18rem .5rem;border:1px solid var(--line);border-radius:100px;color:var(--text-faint)}
.fib-count{font-family:var(--mono);font-size:.66rem;color:var(--text-faint);margin-top:1.2rem}

/* S03 material journey */
#journey-m{background:var(--bg)}
.mj-track{display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem;position:relative;margin-top:2.6rem}
.mj-track::before{content:'';position:absolute;top:24px;left:9%;right:9%;height:1px;background:repeating-linear-gradient(90deg,var(--verify) 0,var(--verify) 5px,transparent 5px,transparent 12px);opacity:.35}
.mj-step{text-align:center;padding:0 .3rem;cursor:default}
.mj-node{width:48px;height:48px;margin:0 auto 1rem;border-radius:50%;border:1px solid var(--line);background:var(--panel);position:relative;z-index:1;display:flex;align-items:center;justify-content:center;color:var(--text-faint);transition:all .3s}
.mj-node svg{width:20px;height:20px}
.mj-step:hover .mj-node{border-color:var(--verify);color:var(--verify);box-shadow:0 0 16px rgba(111,174,126,.15)}
.mj-t{font-size:.82rem;font-weight:700;color:var(--text);margin-bottom:.3rem}
.mj-b{font-size:.68rem;line-height:1.5;color:var(--text-faint);max-width:170px;margin:0 auto;transition:color .3s}
.mj-step:hover .mj-b{color:var(--text-dim)}
@media(max-width:720px){.mj-track{grid-template-columns:repeat(2,1fr);row-gap:2rem}.mj-track::before{display:none}}
@media(max-width:400px){.mj-track{grid-template-columns:1fr}}

/* S04 why it matters */
#why{background:var(--panel)}
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:7px;overflow:hidden}
.why-card{background:var(--bg);padding:1.9rem 1.7rem;transition:background .2s;position:relative;overflow:hidden}
.why-card:hover{background:var(--panel-2)}
.why-card::before{content:'';position:absolute;left:0;top:10px;bottom:10px;width:2px;background:repeating-linear-gradient(to bottom,var(--verify) 0,var(--verify) 5px,transparent 5px,transparent 11px);opacity:0;transform:scaleY(0);transform-origin:top;transition:opacity .2s,transform .5s var(--ease)}
.why-card:hover::before{opacity:1;transform:scaleY(1)}
.why-t{font-size:.95rem;font-weight:700;color:var(--text);margin-bottom:.5rem}
.why-b{font-size:.8rem;line-height:1.62;color:var(--text-dim)}

/* S05 Kaelir */
#kaelir{background:var(--bg)}
.kae-layout{display:grid;grid-template-columns:1.15fr 1fr;gap:3.5rem;align-items:center}
.kae-quote{border-left:2px solid var(--verify);padding-left:1.2rem;font-size:.95rem;font-style:italic;color:var(--text);line-height:1.65;margin:1.4rem 0}
.kae-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:1.2rem;margin-top:1.4rem}
.kstat-v{font-family:var(--mono);font-size:1.05rem;color:var(--verify)}
.kstat-l{font-size:.72rem;color:var(--text-faint);margin-top:.2rem}
.kae-visual{border:1px solid var(--line);border-radius:7px;background:var(--panel);padding:2rem;position:relative;overflow:hidden;min-height:280px;display:flex;flex-direction:column;justify-content:center;gap:1rem}
.kae-visual::before{content:'';position:absolute;inset:0;background-image:repeating-linear-gradient(0deg,transparent 0,transparent 6px,rgba(111,174,126,.04) 6px,rgba(111,174,126,.04) 7px),repeating-linear-gradient(90deg,transparent 0,transparent 6px,rgba(111,174,126,.04) 6px,rgba(111,174,126,.04) 7px)}
.kae-row{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;color:var(--text-dim);border-bottom:1px dashed var(--line);padding-bottom:.8rem;position:relative}
.kae-row:last-child{border-bottom:none;padding-bottom:0}
.kae-row strong{color:var(--text);font-weight:600}
.kae-mono{font-family:var(--mono);font-size:.72rem;color:var(--verify)}
@media(max-width:860px){.kae-layout{grid-template-columns:1fr;gap:2.2rem}}

/* S06 certification explorer */
#certx{background:var(--panel)}
.cx-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:7px;overflow:hidden}
.cx-item{background:var(--bg);transition:background .2s}
.cx-item[open]{background:var(--panel-2)}
.cx-item summary{list-style:none;cursor:pointer;padding:1.4rem 1.7rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.cx-item summary::-webkit-details-marker{display:none}
.cx-n{font-family:var(--mono);font-size:.9rem;color:var(--text)}
.cx-d{font-size:.72rem;color:var(--text-faint);margin-top:.2rem}
.cx-plus{font-family:var(--mono);color:var(--text-faint);transition:transform .3s,color .3s;flex-shrink:0}
.cx-item[open] .cx-plus{transform:rotate(45deg);color:var(--verify)}
.cx-body{padding:0 1.7rem 1.5rem;font-size:.8rem;line-height:1.65;color:var(--text-dim)}
.cx-body strong{color:var(--text)}

/* S07 DPP demo */
#dpp{background:var(--bg)}
.dpp-layout{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center}
.dpp-card{border:1px solid var(--line);border-radius:10px;background:var(--panel);padding:1.8rem;position:relative;overflow:hidden;max-width:420px;margin:0 auto;width:100%}
.dpp-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:repeating-linear-gradient(90deg,var(--verify) 0,var(--verify) 5px,transparent 5px,transparent 12px);opacity:.7}
.dpp-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.3rem}
.dpp-title{font-size:.9rem;font-weight:700;color:var(--text)}
.dpp-badge{font-family:var(--mono);font-size:.58rem;letter-spacing:.08em;color:var(--verify);border:1px solid rgba(111,174,126,.4);border-radius:100px;padding:.22rem .6rem}
.dpp-scan{height:3px;background:var(--line-soft);border-radius:2px;overflow:hidden;margin-bottom:1.3rem;position:relative}
.dpp-scan span{position:absolute;left:0;top:0;bottom:0;width:0;background:repeating-linear-gradient(90deg,var(--verify) 0,var(--verify) 5px,transparent 5px,transparent 10px);transition:width 1.4s var(--ease)}
.dpp-rows{display:flex;flex-direction:column;gap:.85rem}
.dpp-row{display:flex;justify-content:space-between;gap:1rem;font-size:.78rem;border-bottom:1px dashed var(--line);padding-bottom:.8rem;opacity:.25;transform:translateY(4px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.dpp-row:last-child{border-bottom:none;padding-bottom:0}
.dpp-card.scanned .dpp-row{opacity:1;transform:none}
.dpp-row .k{color:var(--text-faint)}
.dpp-row .v{color:var(--text);font-weight:600;text-align:right}
.dpp-btn{margin-top:1.4rem;width:100%}
@media(max-width:860px){.dpp-layout{grid-template-columns:1fr;gap:2.2rem}}

/* CTA (shared look) */
#cta{background:var(--bg);text-align:center;padding:clamp(5rem,10vw,7.5rem) 0;position:relative;overflow:hidden}
#cta::after{display:none}
.cta-glow{position:absolute;inset:0;background:radial-gradient(ellipse 60% 55% at 50% 60%,rgba(111,174,126,.09),transparent 70%);pointer-events:none}
.cta-eye{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--verify);margin-bottom:1.5rem}
.cta-h{font-size:clamp(1.8rem,4.5vw,3rem);font-weight:800;letter-spacing:-.028em;line-height:1.14;max-width:760px;margin:0 auto 1.3rem}
.cta-h em{font-style:normal;color:var(--verify)}
.cta-sub{font-size:.95rem;line-height:1.75;color:var(--text-dim);max-width:540px;margin:0 auto 2.4rem}
.cta-note{margin-top:1.5rem;font-size:.76rem;color:var(--text-faint)}
.cta-note strong{color:var(--text-dim)}
#cta .cta-row{justify-content:center}

.fib-filters{margin:var(--sp-2) 0 var(--sp-2)}