.about-page{background:#F7F3ED;color:#111}
.about-page .navbar{opacity:1!important;visibility:visible!important}
.about-page .eyebrow{color:#DDAA00}
.about-page main{overflow:hidden}
.about-hero{position:relative;min-height:100vh;padding:230px 0 96px;display:grid;align-items:center;background:radial-gradient(circle at 78% 22%,rgba(245,196,0,.24),transparent 30%),linear-gradient(135deg,#fffaf2 0%,#F7F3ED 55%,#f0e4d6 100%);overflow:hidden}
.about-hero-watermark{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);font-size:clamp(9rem,25vw,24rem);font-weight:1000;line-height:1;color:rgba(17,17,17,.035);pointer-events:none;z-index:0}
.about-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:.78fr 1.22fr;align-items:center;gap:72px}
.about-hero-copy{position:relative;z-index:2}
.about-hero h1{font-size:clamp(3.45rem,7vw,8.25rem);line-height:.86;font-weight:1000;letter-spacing:0;max-width:700px}
.about-hero p{max-width:590px;margin-top:32px;font-size:clamp(1.05rem,1.35vw,1.32rem);color:#3b342c}
.about-cta{margin-top:34px;display:inline-flex;align-items:center;gap:12px;min-height:58px;padding:0 26px;border-radius:999px;background:#F5C400;color:#111;font-weight:950;box-shadow:0 18px 42px rgba(245,196,0,.25);transition:transform .28s ease,box-shadow .28s ease,background .28s ease}
.about-cta:hover{transform:translateY(-3px);background:#FFE27A;box-shadow:0 24px 54px rgba(245,196,0,.32)}
.about-hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:42px;max-width:650px}
.about-hero-stats div{padding:18px 16px;border-radius:22px;background:rgba(255,255,255,.56);border:1px solid rgba(255,255,255,.76);box-shadow:0 18px 50px rgba(61,45,24,.08);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.about-hero-stats strong{display:block;font-size:clamp(1.55rem,2.6vw,2.6rem);line-height:1;font-weight:1000;color:#111}
.about-hero-stats span{display:block;margin-top:6px;font-size:.83rem;font-weight:900;color:#5b5148;text-transform:uppercase;letter-spacing:.08em}
.about-hero-visual{position:relative;min-height:720px;display:grid;place-items:center}
.about-glow,.ingredient-glow{position:absolute;inset:15% 7%;border-radius:50%;background:radial-gradient(circle,rgba(190,112,255,.34),rgba(245,196,0,.2) 42%,transparent 68%);filter:blur(8px)}
.about-ring{position:absolute;border:1px solid rgba(17,17,17,.08);border-radius:50%;pointer-events:none}
.about-ring-one{width:78%;aspect-ratio:1;top:6%;right:6%}
.about-ring-two{width:48%;aspect-ratio:1;bottom:9%;left:10%}
.about-hero-can{position:relative;z-index:2;width:min(88%,650px);max-height:850px;object-fit:contain;filter:drop-shadow(0 42px 52px rgba(40,28,18,.22));will-change:transform}
.about-particle{position:absolute;z-index:1;display:block;border-radius:50%;background:#F5C400;box-shadow:0 18px 38px rgba(245,196,0,.24);will-change:transform}
.particle-one{width:34px;height:34px;left:11%;top:23%;background:radial-gradient(circle at 30% 28%,#fff 0 10%,#b975ff 11% 100%)}
.particle-two{width:18px;height:18px;right:18%;top:16%}
.particle-three{width:54px;height:28px;left:16%;bottom:20%;border-radius:40px;background:linear-gradient(135deg,#80c84a 0 24%,#F5C400 25% 100%)}
.particle-four{width:26px;height:26px;right:12%;bottom:27%;background:#111}
.particle-five{width:44px;height:44px;right:29%;bottom:9%;background:radial-gradient(circle at 32% 28%,#fff 0 8%,#7d47d8 9% 100%)}

.about-split{display:grid;grid-template-columns:1fr .84fr;gap:72px;align-items:start}
.about-problem{background:#F7F3ED}
.about-problem h2,.about-section-head h2,.philosophy-wrap h2,.ingredients-copy h2,.community-copy h2,.final-cta-inner h2{letter-spacing:0}
.problem-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:40px}
.about-stat{background:#fff;border:1px solid rgba(232,223,201,.9);border-radius:28px;padding:26px;box-shadow:0 22px 70px rgba(61,45,24,.08)}
.about-stat strong{display:block;font-size:clamp(2.25rem,5vw,4.1rem);line-height:1;font-weight:1000;color:#111}
.about-stat p{margin-top:10px;line-height:1.35;color:#555;font-weight:750}
.about-editorial{padding:46px;border-radius:34px;background:#111;color:#fff;position:sticky;top:140px;box-shadow:0 34px 88px rgba(17,17,17,.16)}
.about-editorial p{font-size:clamp(1.15rem,2.2vw,1.75rem);line-height:1.45;color:rgba(255,255,255,.82)}
.about-editorial p+p{margin-top:28px}

.about-section-head{margin-bottom:54px}
.about-timeline-section{background:#fffaf2}
.about-timeline{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:18px;padding-top:42px}
.timeline-line{position:absolute;top:0;left:20px;right:20px;height:3px;background:rgba(17,17,17,.12);overflow:hidden;border-radius:999px}
.timeline-progress{display:block;width:100%;height:100%;background:#F5C400;transform:scaleX(0);transform-origin:left center}
.timeline-step{background:#fff;border:1px solid #E8DFC9;border-radius:30px;padding:18px;min-height:360px;display:flex;flex-direction:column;box-shadow:0 24px 70px rgba(61,45,24,.08);transition:transform .28s ease,box-shadow .28s ease}
.timeline-step:hover{transform:translateY(-8px);box-shadow:0 34px 84px rgba(61,45,24,.12)}
.timeline-step img{height:160px;width:100%;object-fit:contain;margin-bottom:18px}
.timeline-step span{color:#DDAA00;font-weight:950;font-size:.85rem}
.timeline-step h3{font-size:1.8rem;margin:8px 0 10px;font-weight:950}
.timeline-step p{line-height:1.5;color:#555}

.about-philosophy{background:#F7F3ED;text-align:center}
.philosophy-wrap>h2{margin-inline:auto}
.philosophy-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px;text-align:left}
.philosophy-grid article{background:#fff;border:1px solid #E8DFC9;border-radius:34px;padding:34px;box-shadow:0 24px 70px rgba(61,45,24,.08);transition:transform .28s ease,box-shadow .28s ease}
.philosophy-grid article:hover{transform:translateY(-8px);box-shadow:0 34px 80px rgba(245,196,0,.18)}
.philosophy-grid i{width:58px;height:58px;border-radius:19px;display:grid;place-items:center;background:#F5C400;color:#111;font-size:1.5rem;margin-bottom:24px}
.philosophy-grid h3{font-size:1.65rem;font-weight:950;margin-bottom:10px}

.about-ingredients{background:linear-gradient(180deg,#fffaf2 0%,#F7F3ED 100%);position:relative}
.ingredients-layout{display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:72px;min-height:760px}
.ingredients-copy h2{font-size:clamp(3.4rem,6.9vw,7.8rem);line-height:.86}
.ingredients-copy>p{margin-top:24px;max-width:440px;font-size:1.15rem;color:#3e372f}
.ingredient-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:36px}
.ingredient-card{display:flex;align-items:flex-start;gap:16px;min-height:138px;padding:20px;border:1px solid rgba(255,255,255,.72);border-radius:26px;background:rgba(255,255,255,.62);box-shadow:0 24px 70px rgba(61,45,24,.09);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}
.ingredient-card:hover{transform:translateY(-5px);border-color:rgba(245,196,0,.7);box-shadow:0 30px 80px rgba(61,45,24,.12)}
.ingredient-card i{width:46px;height:46px;flex:0 0 46px;border-radius:16px;display:grid;place-items:center;background:#111;color:#F5C400;font-size:1.15rem}
.ingredient-card h3{font-size:1.08rem;font-weight:950;margin-bottom:5px}
.ingredient-card p{font-size:.94rem;line-height:1.45;color:#5a5148}
.ingredients-visual{position:relative;min-height:760px;display:grid;place-items:center;isolation:isolate}
.ingredient-glow{inset:11% 8%;z-index:0;background:radial-gradient(circle,rgba(180,95,255,.34),rgba(245,196,0,.18) 44%,transparent 70%);filter:blur(10px)}
.ingredient-can-stage{position:relative;z-index:2;display:grid;place-items:center;width:min(66%,450px);will-change:transform}
.ingredient-can{width:100%;max-height:720px;object-fit:contain;filter:drop-shadow(0 42px 48px rgba(34,24,18,.2));will-change:transform}
.ingredient-hotspot{position:absolute;z-index:4;display:flex;align-items:center;gap:12px;color:#111;font-weight:950;white-space:nowrap}
.ingredient-hotspot strong{display:inline-flex;align-items:center;min-height:42px;padding:0 16px;border-radius:999px;background:rgba(255,255,255,.78);border:1px solid rgba(232,223,201,.9);box-shadow:0 18px 46px rgba(61,45,24,.12);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.hotspot-line{display:block;width:132px;height:2px;background:linear-gradient(90deg,rgba(17,17,17,.15),rgba(17,17,17,.9));transform:scaleX(0);transform-origin:left center}
.hotspot-dot{width:10px;height:10px;border-radius:50%;background:#F5C400;box-shadow:0 0 0 6px rgba(245,196,0,.2)}
.hotspot-one{left:0;top:22%}
.hotspot-two{left:8%;bottom:24%}
.hotspot-three{right:0;top:29%;flex-direction:row-reverse}
.hotspot-four{right:4%;bottom:20%;flex-direction:row-reverse}
.hotspot-three .hotspot-line,.hotspot-four .hotspot-line{transform-origin:right center;background:linear-gradient(270deg,rgba(17,17,17,.15),rgba(17,17,17,.9))}
.fruit-orbit{position:absolute;z-index:1;border-radius:50%;box-shadow:inset -8px -8px 16px rgba(0,0,0,.08),0 22px 42px rgba(61,45,24,.12);will-change:transform}
.fruit-one{width:68px;height:68px;left:18%;top:13%;background:radial-gradient(circle at 30% 28%,#fff 0 5%,#c83a9d 6% 15%,#7b2bbd 16% 100%)}
.fruit-two{width:46px;height:46px;right:20%;top:14%;background:radial-gradient(circle at 32% 28%,#fff 0 8%,#f04d73 9% 100%)}
.fruit-three{width:82px;height:42px;left:10%;bottom:15%;border-radius:42px 42px 8px 8px;background:linear-gradient(135deg,#a7e25f 0 18%,#f5c400 19% 100%)}
.fruit-four{width:56px;height:56px;right:16%;bottom:12%;background:radial-gradient(circle at 30% 28%,#fff 0 7%,#304d94 8% 100%)}

.about-values{background:#111;color:#fff}
.values-head .eyebrow{color:#F5C400}
.values-head h2{color:#fff}
.values-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.12)}
.values-grid article{background:#111;padding:34px;min-height:330px;display:flex;flex-direction:column;justify-content:space-between;transition:background .28s ease,box-shadow .28s ease,transform .28s ease}
.values-grid article:hover{background:#151515;box-shadow:inset 0 0 0 1px rgba(245,196,0,.75),0 28px 70px rgba(245,196,0,.14);transform:translateY(-4px)}
.values-grid span{color:#F5C400;font-weight:950}
.values-grid h3{font-size:clamp(1.8rem,3vw,3.15rem);font-weight:1000}
.values-grid p{color:rgba(255,255,255,.68);line-height:1.55}

.about-community{background:#F7F3ED}
.community-grid{display:grid;grid-template-columns:.82fr 1fr;gap:64px;align-items:center}
.avatar-row{display:flex;margin-top:30px}
.avatar-row span{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:#111;color:#fff;border:3px solid #F7F3ED;font-weight:950;margin-left:-12px}
.avatar-row span:first-child{margin-left:0;background:#F5C400;color:#111}
.community-cards{display:grid;gap:18px}
.community-cards .review-card{background:#fff;border:1px solid #E8DFC9;border-radius:32px;padding:34px;box-shadow:0 26px 72px rgba(61,45,24,.09)}
.community-cards .review-card p{font-size:clamp(1.25rem,2vw,1.75rem);line-height:1.35;color:#222}
.community-cards .review-card strong{display:block;margin-top:20px}
.community-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.community-stats article{background:#F5C400;border-radius:30px;padding:28px}
.community-stats strong{display:block;font-size:clamp(2.8rem,5vw,5rem);line-height:1;font-weight:1000}
.community-stats span{font-weight:900;color:#111}

.about-final-cta{position:relative;overflow:hidden;background:#fffaf2;text-align:center}
.cta-watermark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:clamp(8rem,24vw,23rem);font-weight:1000;color:rgba(17,17,17,.035);line-height:1;pointer-events:none}
.final-cta-inner{position:relative;z-index:1}
.final-cta-inner h2{margin-inline:auto;font-size:clamp(3.7rem,9vw,9.4rem)}
.final-actions{display:flex;justify-content:center;gap:14px;margin-top:34px;flex-wrap:wrap}
.final-actions .btn.primary{background:#F5C400;color:#111}
.final-actions .btn.primary:hover{background:#FFE27A}

@media (max-width: 1100px){
  .about-hero-grid,.about-split,.ingredients-layout,.community-grid{grid-template-columns:1fr;gap:46px}
  .about-hero{padding-top:160px}
  .about-hero-visual{min-height:620px}
  .about-hero-can{width:min(78%,560px)}
  .about-editorial{position:relative;top:auto}
  .about-timeline{grid-template-columns:repeat(5,minmax(230px,1fr));overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px}
  .about-timeline::-webkit-scrollbar{display:none}
  .timeline-step{scroll-snap-align:start}
  .ingredients-layout{min-height:auto}
  .ingredients-visual{min-height:660px}
  .ingredient-can-stage{width:min(64%,420px)}
  .values-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width: 768px){
  .about-hero{min-height:auto;padding:155px 0 54px}
  .about-hero h1{font-size:clamp(3rem,14vw,4.9rem)}
  .about-hero p{font-size:1rem;margin-top:22px}
  .about-cta{width:100%;justify-content:center}
  .about-hero-stats{grid-template-columns:1fr;gap:10px;margin-top:28px}
  .about-hero-stats div{padding:15px 16px}
  .about-hero-visual{min-height:480px}
  .about-hero-can{width:min(86%,390px)}
  .about-hero-watermark{font-size:clamp(7rem,32vw,12rem);top:30%}
  .particle-one{left:5%;top:17%}.particle-two{right:10%;top:12%}.particle-three{left:4%;bottom:15%}.particle-four{right:7%;bottom:24%}.particle-five{right:22%;bottom:5%}
  .problem-stats,.philosophy-grid,.community-stats{grid-template-columns:1fr}
  .about-editorial{padding:28px;border-radius:26px}
  .about-section-head{margin-bottom:34px}
  .timeline-line{left:14px;right:14px}
  .timeline-step{min-height:330px}
  .ingredients-copy h2{font-size:clamp(3.2rem,15vw,5.1rem)}
  .ingredient-cards{grid-template-columns:1fr;margin-top:28px}
  .ingredient-card{min-height:0;padding:18px;border-radius:22px}
  .ingredients-visual{min-height:570px}
  .ingredient-can-stage{width:min(74%,320px)}
  .ingredient-hotspot{font-size:.72rem;gap:7px}
  .ingredient-hotspot strong{min-height:34px;padding:0 10px}
  .hotspot-line{width:52px}
  .hotspot-dot{width:8px;height:8px;box-shadow:0 0 0 4px rgba(245,196,0,.2)}
  .hotspot-one{left:0;top:17%}
  .hotspot-two{left:0;bottom:18%}
  .hotspot-three{right:0;top:24%}
  .hotspot-four{right:0;bottom:15%}
  .fruit-one{width:44px;height:44px;left:11%;top:9%}
  .fruit-two{width:34px;height:34px;right:12%;top:11%}
  .fruit-three{width:58px;height:30px;left:5%;bottom:11%}
  .fruit-four{width:40px;height:40px;right:10%;bottom:8%}
  .values-grid{grid-template-columns:1fr}
  .values-grid article{min-height:240px;padding:28px}
  .final-actions{display:grid}
  .final-actions .btn{width:100%}
}