:root{--about-green:#08291f;--about-soft:#123c2d;--about-gold:#f3d27a;--about-cream:#fffaf0;--about-text:#17352b}
*{box-sizing:border-box}
body{margin:0;background:linear-gradient(150deg,#f8f3df,#fff 48%,#e6f1e9);color:var(--about-text);font-family:system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.65}
.about-hero{background:linear-gradient(135deg,#071f16,#124533);color:var(--about-cream);padding:74px 20px 64px;text-align:center;border-bottom:5px solid var(--about-gold)}
.about-hero .eyebrow{color:var(--about-gold);font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.about-hero h1{font-size:clamp(2.2rem,6vw,4.6rem);line-height:1.05;margin:.45rem 0 1rem;color:#fff}
.about-hero p{max-width:850px;margin:auto;font-size:clamp(1.05rem,2.4vw,1.35rem);color:#eee5cd}
.about-main{width:min(1120px,calc(100% - 28px));margin:-28px auto 48px;position:relative}
.about-card{background:#fff;border:1px solid #d8c988;border-radius:24px;padding:clamp(20px,4vw,38px);box-shadow:0 18px 50px rgba(6,38,27,.12);margin-bottom:20px}
.about-card h2{margin-top:0;color:#07533d;font-size:clamp(1.45rem,3vw,2.1rem)}
.about-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.about-feature{background:#eef6f0;border:1px solid #b9d3c1;border-radius:18px;padding:18px}
.about-feature strong{display:block;color:#063e2e;font-size:1.08rem;margin-bottom:6px}
.about-audio{background:linear-gradient(135deg,#0b3829,#0f513b);color:#fff;border-color:#c8a950}
.about-audio h2,.about-audio strong{color:var(--about-gold)}
.about-audio a{color:#ffe8a4;font-weight:900}
.about-note{border-left:5px solid var(--about-gold);padding:12px 16px;background:#fff9df;border-radius:0 12px 12px 0}
.about-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:24px}
.about-actions a{display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;border-radius:999px;background:var(--about-gold);color:#08291f;text-decoration:none;font-weight:900}
.about-actions a.secondary{background:#fff;color:#0b4937;border:2px solid #0b4937}
.about-footer{text-align:center;padding:24px;color:#38594d}
@media(max-width:780px){.about-grid{grid-template-columns:1fr}.about-hero{padding-top:60px}.about-main{margin-top:-20px}}