:root{
  --ink:#13201c; --muted:#66736e; --paper:#f6f8f5; --white:#fff;
  --forest:#12372f; --forest-2:#0b2822; --forest-3:#1e5144;
  --mint:#e8f2ec; --sage:#d8e7df; --gold:#d3a35c; --line:#d7e0da;
  --coffee:#3b251b; --tea:#2d624d; --cream:#f4ead9; --max:1220px;
  --radius:22px; --shadow:0 24px 70px rgba(13,39,31,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:18px;line-height:1.68;-webkit-font-smoothing:antialiased;
}
a{color:#1e6b59;text-underline-offset:3px}
img,svg{max-width:100%}
.wrap{width:min(var(--max),calc(100% - 40px));margin:auto}
.eyebrow{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;font-weight:900;color:#72b6a3}
h1,h2,h3{letter-spacing:-.035em}
h1{font-size:clamp(3rem,7vw,6.4rem);line-height:.92;margin:.14em 0 .34em;max-width:11ch}
h2{font-size:clamp(2rem,4vw,3.5rem);line-height:1.04;margin:.15em 0 .45em}
h3{font-size:1.25rem;line-height:1.25;margin:.2em 0 .55em}
p{max-width:76ch}
.top{
  position:sticky;top:0;z-index:50;background:rgba(9,34,29,.92);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.08)
}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:13px 0}
.brand{color:#fff;text-decoration:none;font-weight:950;letter-spacing:-.03em}
.nav{display:flex;gap:17px;flex-wrap:wrap}
.nav a{color:#dce9e4;text-decoration:none;font-size:.92rem}
.nav a:hover{color:#fff}
.hero{
  min-height:760px;color:#fff;overflow:hidden;
  background:
   radial-gradient(circle at 75% 25%,rgba(75,169,139,.24),transparent 30%),
   radial-gradient(circle at 15% 90%,rgba(211,163,92,.13),transparent 30%),
   linear-gradient(135deg,#071f1a,#123c32 58%,#1b5142);
  display:grid;align-items:center;padding:64px 0 76px
}
.hero-grid{display:grid;grid-template-columns:1.03fr .97fr;align-items:center;gap:56px}
.hero .lead{font-size:1.24rem;color:#edf7f3}
.hero-copy{position:relative;z-index:2}
.actions{display:flex;flex-wrap:wrap;gap:11px;margin-top:28px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 18px;border-radius:12px;font-weight:900;text-decoration:none;border:1px solid transparent}
.btn.primary{background:#e8f6f0;color:#0e352c}
.btn.secondary{border-color:#6da390;color:#fff;background:rgba(255,255,255,.04)}
.hero-proof{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px;color:#cfe1da;font-size:.9rem}
.hero-proof span{padding:6px 10px;border:1px solid rgba(255,255,255,.13);border-radius:999px}

.visual-stage{position:relative;min-height:590px;perspective:1200px}
.glass{
 position:absolute;inset:26px 0 20px 45px;border:1px solid rgba(255,255,255,.15);border-radius:34px;
 background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.025));
 box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 40px 90px rgba(0,0,0,.26);backdrop-filter:blur(10px)
}
.orbit{position:absolute;inset:50px 14px 24px 62px;transform-style:preserve-3d;animation:floatScene 9s ease-in-out infinite}
.cup{
 position:absolute;left:12%;bottom:12%;width:250px;height:180px;
 background:linear-gradient(160deg,#f6efe6,#d7c9b6);border-radius:26px 26px 78px 78px;
 box-shadow:0 35px 55px rgba(0,0,0,.34),inset 0 -12px 24px rgba(80,55,35,.12);
 transform:rotateX(8deg) rotateY(-12deg)
}
.cup:before{
 content:"";position:absolute;left:22px;right:22px;top:18px;height:38px;border-radius:50%;
 background:radial-gradient(ellipse at 45% 35%,#d6a47c 0 7%,#5b3424 30%,#23130d 72%);
 box-shadow:inset 0 7px 14px rgba(255,255,255,.1)
}
.cup:after{
 content:"";position:absolute;right:-64px;top:40px;width:82px;height:94px;border:18px solid #e7dccd;border-left-width:14px;border-radius:50%
}
.tea-cup{left:auto;right:7%;bottom:17%;width:210px;height:150px;background:linear-gradient(160deg,#eef4ee,#c8d8cd)}
.tea-cup:before{background:radial-gradient(ellipse at 40% 35%,#d8c775 0 7%,#5c804d 30%,#2a4b35 75%)}
.tea-cup:after{border-color:#dbe7de}
.capsule{
 position:absolute;width:115px;height:86px;border-radius:55% 55% 40% 40%/58% 58% 35% 35%;
 background:linear-gradient(145deg,#d7b06c,#6f4823 45%,#3b2418 78%);
 box-shadow:0 24px 38px rgba(0,0,0,.33),inset 0 4px 8px rgba(255,255,255,.24);
 transform:rotateZ(-18deg) rotateY(24deg)
}
.capsule:after{content:"";position:absolute;left:-7px;right:-7px;bottom:-8px;height:17px;border-radius:50%;background:#d7b06c;box-shadow:inset 0 -3px 5px rgba(40,20,8,.35)}
.c1{left:7%;top:8%;animation:capFloat 6s ease-in-out infinite}
.c2{right:5%;top:18%;background:linear-gradient(145deg,#95bc91,#3f6e52 48%,#244534 80%);animation:capFloat 7s ease-in-out infinite reverse}
.c3{right:28%;top:3%;width:92px;height:70px;background:linear-gradient(145deg,#d9c297,#76502e 52%,#3a2417 80%);animation:capFloat 8s ease-in-out infinite 1s}
.steam{position:absolute;width:4px;height:120px;border-radius:50%;border-left:3px solid rgba(255,255,255,.24);filter:blur(.4px);animation:steam 4s ease-in-out infinite}
.s1{left:28%;bottom:43%}.s2{left:34%;bottom:46%;animation-delay:1.1s}.s3{right:28%;bottom:47%;animation-delay:.6s}
.visual-label{position:absolute;right:22px;bottom:20px;max-width:285px;background:rgba(5,25,20,.74);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:16px;color:#eaf5f1;font-size:.88rem}

@keyframes floatScene{0%,100%{transform:translateY(0) rotateY(0)}50%{transform:translateY(-12px) rotateY(2deg)}}
@keyframes capFloat{0%,100%{transform:translateY(0) rotateZ(-18deg) rotateY(24deg)}50%{transform:translateY(-22px) rotateZ(-11deg) rotateY(32deg)}}
@keyframes steam{0%{opacity:0;transform:translateY(20px) scaleX(.7)}40%{opacity:.5}100%{opacity:0;transform:translateY(-60px) translateX(16px) scaleX(1.4)}}

section{padding:78px 0}
.soft{background:#edf3ef}
.dark{background:var(--forest-2);color:#fff}
.dark p,.dark li{color:#d6e4de}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:0 8px 25px rgba(16,50,40,.045)}
.dark .card{background:#13352d;border-color:#295247;color:#fff;box-shadow:none}
.dark .card p{color:#d9e6e1}
.num{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#dfece5;color:#164a3e;font-weight:950;margin-bottom:14px}
.statement{font-size:clamp(1.45rem,2.5vw,2.15rem);font-weight:850;line-height:1.25;max-width:34ch;color:#1a4d40}
.strip{padding:18px 0;background:#f2e7d5;border-block:1px solid #dec9a4;color:#322619}
.strip .wrap{display:flex;gap:18px;justify-content:space-between;align-items:center}
.strip strong{font-weight:950}
.strip a{color:#604317;font-weight:850}
.method-card{position:relative;padding-top:58px}
.method-card .rank{position:absolute;top:18px;left:22px;font-size:.78rem;font-weight:950;letter-spacing:.08em;color:#276452}
.evidence-card{border-left:5px solid #3f806e}
.tag{display:inline-block;background:#e8f2ed;color:#1e5d4e;border-radius:999px;padding:5px 10px;font-size:.76rem;font-weight:900}
.limit{background:#fff7e3;border:1px solid #ecd5a5;border-radius:17px;padding:19px 21px;color:#332a19}
.product-matrix{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.product-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px;position:relative;overflow:hidden}
.product-card:before{content:"";position:absolute;width:130px;height:130px;border-radius:50%;right:-48px;top:-48px;background:radial-gradient(circle,#d7e9e1,transparent 72%)}
.product-card small{color:var(--muted)}
.product-card a{font-weight:900}
.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.route-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:24px;box-shadow:0 8px 25px rgba(16,50,40,.045)}
.route-card h3{color:#174b3e}.route-card p{margin:0 0 14px}.route-card .tag{margin-bottom:12px}
.portfolio-note{border-radius:20px;padding:22px 24px;background:#f7f1e5;border:1px solid #dfcaa4;color:#332a19}
.contact-card{border-radius:24px;padding:30px;background:linear-gradient(135deg,#12372f,#1e5144);color:#fff;box-shadow:var(--shadow)}
.contact-card p{color:#e0eee8}.contact-card .btn.primary{background:#fff;color:#143d32}
.coffee-motion-frame{position:relative;isolation:isolate;border-radius:28px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.32);background:#102d27}
.coffee-motion-frame:before{content:"";position:absolute;z-index:0;inset:-30%;background:conic-gradient(from 50deg,transparent 0deg,rgba(230,187,102,.26) 34deg,transparent 78deg,rgba(102,194,163,.18) 132deg,transparent 172deg);animation:coffeeGlow 16s linear infinite}
.coffee-motion-frame:after{content:"";position:absolute;z-index:2;inset:0;pointer-events:none;background:linear-gradient(112deg,transparent 37%,rgba(255,255,255,.18) 48%,transparent 59%);transform:translateX(-140%);animation:coffeeSweep 11s ease-in-out infinite}
.coffee-hero-image{position:relative;z-index:1;width:100%;height:auto;display:block;border-radius:28px;border:1px solid rgba(255,255,255,.16);box-shadow:none}
.motion-toggle{position:absolute;z-index:3;right:14px;bottom:14px;border:1px solid rgba(255,255,255,.36);border-radius:999px;padding:7px 10px;background:rgba(7,31,26,.78);color:#fff;font:800 .78rem/1 Inter,ui-sans-serif,system-ui,sans-serif;cursor:pointer;backdrop-filter:blur(8px)}
.motion-toggle:hover,.motion-toggle:focus-visible{background:#fff;color:#12372f;outline:2px solid #fff;outline-offset:2px}
.motion-paused:before,.motion-paused:after{animation-play-state:paused}
@keyframes coffeeGlow{to{transform:rotate(360deg)}}
@keyframes coffeeSweep{0%,15%{transform:translateX(-140%)}45%,100%{transform:translateX(140%)}}
.sorten-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden}
.sorten-table th,.sorten-table td{text-align:left;padding:15px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.sorten-table th{background:#12372f;color:#fff;font-size:.92rem}.sorten-table tr:last-child td{border-bottom:0}
.coffee-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:32px;align-items:center}
.coffee-panel{background:linear-gradient(135deg,#24160f,#4a2d20);color:#fff;border-radius:30px;padding:30px;min-height:360px;position:relative;overflow:hidden}
.coffee-panel:after{content:"";position:absolute;width:360px;height:360px;border:1px solid rgba(255,255,255,.11);border-radius:50%;right:-120px;bottom:-180px}
.coffee-panel p{color:#efe5dd}
.tea-panel{background:linear-gradient(135deg,#12372b,#2c644e)}
.feature-list{display:grid;gap:12px}
.feature{display:flex;gap:13px;align-items:flex-start;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.dot{width:10px;height:10px;border-radius:50%;background:var(--gold);margin-top:8px;flex:none}
.press-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:22px}
.press-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px}
.press-card time{font-size:.84rem;color:var(--muted)}
.press-quote{font-size:1.2rem;font-weight:800;line-height:1.4;color:#213c34}
.faq details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:17px 18px;margin:10px 0}
.faq summary{font-weight:850;cursor:pointer}
.disclosure{background:#f7f1e5;border:1px solid #dfcaa4;border-radius:18px;padding:20px}
.footer{background:#071f1a;color:#cadbd5;padding:46px 0}
.footer a{color:#e6f1ed}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:30px}
.small{font-size:.9rem;color:var(--muted)}
.dark .small{color:#b9cbc4}
[data-reveal]{opacity:0;transform:translateY(18px);transition:.7s ease}
[data-reveal].show{opacity:1;transform:none}
@media(max-width:980px){
 .hero-grid,.coffee-grid,.press-grid,.footer-grid,.product-matrix,.portfolio-grid,.grid4,.grid3,.grid2{grid-template-columns:1fr 1fr}
 .visual-stage{min-height:520px}
 .sorten-table{font-size:.94rem}
}
@media(max-width:720px){
 body{font-size:17px}.wrap{width:min(100% - 28px,var(--max))}.top .wrap{align-items:flex-start}.nav{display:none}
 .hero{min-height:auto;padding:48px 0}.hero-grid,.coffee-grid,.press-grid,.footer-grid,.product-matrix,.portfolio-grid,.grid4,.grid3,.grid2{grid-template-columns:1fr}
 h1{font-size:clamp(2.8rem,14vw,4.6rem);max-width:10ch}.visual-stage{min-height:410px}
 .glass{inset:15px}.orbit{inset:25px}.cup{width:180px;height:132px}.tea-cup{width:150px;height:112px}.capsule{width:78px;height:60px}.visual-label{font-size:.78rem;max-width:210px}
 .strip .wrap{display:block}.strip a{display:inline-block;margin-top:8px}
 section{padding:58px 0}
 .sorten-table{display:block;overflow-x:auto;white-space:nowrap}
}
@media(prefers-reduced-motion:reduce){
 *{scroll-behavior:auto!important;animation:none!important;transition:none!important}
 [data-reveal]{opacity:1;transform:none}
}