:root { --green:#16854a; --green-dark:#0d6335; --mint:#eaf7ef; --ink:#183126; --muted:#5e6e64; --line:#dce7df; --cream:#fbfcf9; --orange:#e9702b; --blue:#2869b2; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:Inter,Arial,sans-serif; color:var(--ink); background:var(--cream); line-height:1.55; }
a { color:inherit; }
img { display:block; max-width:100%; }
.container { width:min(1120px,calc(100% - 2rem)); margin:auto; }
.skip-link { position:absolute; left:-9999px; } .skip-link:focus { left:1rem; top:1rem; z-index:100; padding:.65rem 1rem; background:white; }
.site-header { position:sticky; top:0; z-index:20; background:rgba(255,255,255,.97); border-bottom:1px solid var(--line); }
.header-inner { min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.brand { display:flex; align-items:center; gap:.55rem; text-decoration:none; font-weight:800; font-size:1.35rem; letter-spacing:-.04em; white-space:nowrap; }
.brand img { width:34px; height:42px; object-fit:contain; } .brand .accent { color:var(--green); }
.site-nav { display:flex; align-items:center; gap:1.3rem; } .site-nav a { color:#425148; text-decoration:none; font-size:.93rem; font-weight:650; } .site-nav a:hover,.site-nav a[aria-current=page] { color:var(--green); }
.header-actions { display:flex; align-items:center; gap:.5rem; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:.4rem; border:0; border-radius:.55rem; padding:.75rem 1rem; font:inherit; font-weight:750; text-decoration:none; cursor:pointer; transition:background .2s,transform .2s; }
.button:hover { transform:translateY(-1px); } .button-primary { color:#fff; background:var(--green); } .button-primary:hover { background:var(--green-dark); } .button-light { background:#fff; color:var(--green-dark); } .button-etsy { background:var(--orange); color:#fff; } .button-ebay { background:var(--blue); color:#fff; }
.menu-toggle { display:none; border:0; background:transparent; color:var(--ink); font-size:1.45rem; padding:.35rem; }
.hero { min-height:515px; color:#fff; display:grid; place-items:center; text-align:center; background:linear-gradient(rgba(8,36,20,.60),rgba(8,36,20,.72)),url('images/bamboohero.webp') center/cover; }
.hero-content { max-width:780px; padding:5rem 0; } .eyebrow { margin:0 0:.7rem; font-size:.78rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#b7ebc8; }
h1,h2,h3 { line-height:1.12; letter-spacing:-.035em; } h1 { font-size:clamp(2.45rem,6vw,4.9rem); margin:0; } h2 { font-size:clamp(1.8rem,4vw,2.8rem); margin:0 0:.65rem; } h3 { font-size:1.22rem; margin:.2rem 0 .5rem; }
.lead { font-size:clamp(1.08rem,2vw,1.3rem); max-width:680px; margin:1.2rem auto 1.8rem; } .section { padding:4.6rem 0; } .section-muted { background:var(--mint); } .section-heading { max-width:650px; margin:0 auto 2.4rem; text-align:center; } .section-heading p { color:var(--muted); margin:0; }
.grid { display:grid; gap:1.25rem; } .three { grid-template-columns:repeat(3,1fr); } .two { grid-template-columns:repeat(2,1fr); }
.card { background:#fff; border:1px solid var(--line); border-radius:1rem; overflow:hidden; box-shadow:0 10px 25px rgba(25,62,38,.06); }
.card-body { padding:1.35rem; } .card p,.muted { color:var(--muted); } .icon { width:46px; height:46px; display:grid; place-items:center; border-radius:50%; background:#d8f1e1; color:var(--green); font-size:1.35rem; }
.product-image { width:100%; aspect-ratio:1.6/1; object-fit:cover; background:#e6eee7; } .tag { display:inline-block; padding:.25rem .55rem; border-radius:99px; background:#fdf0e8; color:#a84212; font-size:.76rem; font-weight:800; }
.product-actions { display:grid; grid-template-columns:1fr 1fr; gap:.65rem; margin-top:1rem; } .product-actions .button { font-size:.9rem; padding:.68rem .5rem; }
.facts { display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem; margin:1rem 0; } .fact { padding:.65rem; background:#f7faf7; border-radius:.55rem; } .fact b { display:block; font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; color:var(--green-dark); } .fact span { font-size:.9rem; }
.notice { border-left:4px solid var(--green); padding:1rem 1.1rem; background:var(--mint); border-radius:0 .6rem .6rem 0; color:#31513e; }
.trust-bar { padding:1rem 0; background:#123f27; color:#e9f8ed; text-align:center; font-size:.95rem; } .trust-bar strong { color:#fff; }
.content { max-width:820px; margin:auto; } .content h2 { margin-top:2.5rem; } .content h3 { margin-top:1.65rem; } .content p,.content li { color:#45564c; font-size:1.04rem; } .content li { margin:.5rem 0; } .content a { color:var(--green-dark); font-weight:700; }
.comparison { width:100%; border-collapse:collapse; background:white; border:1px solid var(--line); border-radius:.7rem; overflow:hidden; } .comparison th,.comparison td { padding:.85rem; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); } .comparison th { background:#e6f5eb; } .comparison tr:last-child td { border-bottom:0; }
.site-footer { background:#12251a; color:#dce9e0; padding:3.5rem 0 1.4rem; } .footer-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:2rem; } .site-footer h3 { color:#fff; font-size:1rem; letter-spacing:0; } .site-footer ul { list-style:none; padding:0; margin:0; } .site-footer li { margin:.5rem 0; } .site-footer a { color:#c4d5c9; text-decoration:none; } .site-footer a:hover { color:#fff; } .fineprint { margin-top:2rem; padding-top:1rem; border-top:1px solid #385142; color:#9db5a4; font-size:.86rem; }
@media (max-width:760px) { .header-inner { min-height:65px; } .brand { font-size:1.15rem; } .brand img { width:29px; height:36px; } .menu-toggle { display:block; } .site-nav { display:none; position:absolute; top:65px; left:0; right:0; padding:.8rem 1rem 1rem; flex-direction:column; align-items:stretch; gap:0; background:white; border-bottom:1px solid var(--line); box-shadow:0 8px 18px rgba(0,0,0,.06); } .site-nav[data-open=true] { display:flex; } .site-nav a { padding:.75rem .25rem; } .header-actions .button { font-size:.84rem; padding:.58rem .68rem; } .hero { min-height:510px; } .hero-content { padding:3rem 0; } .three,.two,.footer-grid { grid-template-columns:1fr; } .section { padding:3.4rem 0; } .facts { grid-template-columns:1fr; } .product-actions { grid-template-columns:1fr; } .comparison { display:block; overflow-x:auto; } }