
:root{
  --ink:#211a17; --coffee:#5a3727; --deep:#2f1e18; --cream:#f6efe5; --milk:#fffaf3;
  --sand:#e8d7c3; --gold:#b58a52; --muted:#756961; --white:#fff; --line:#e7ddd2;
  --shadow:0 18px 48px rgba(47,30,24,.10); --radius:24px; --max:1180px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--milk);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.65}
a{color:inherit;text-decoration:none}img{max-width:100%;height:auto}.container{width:min(calc(100% - 32px),var(--max));margin:auto}.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:16px;background:#fff;padding:10px 14px;z-index:9999;border-radius:8px}
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,250,243,.88);backdrop-filter:blur(14px);border-bottom:1px solid rgba(231,221,210,.8)}.nav{min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;align-items:center;gap:11px;font-weight:900;letter-spacing:.04em}.brand-mark{width:38px;height:38px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#d0a56e 0 13%,#77503c 14% 46%,#2f1e18 47% 100%);box-shadow:inset 0 0 0 4px #f4e7d5}.nav-links{display:flex;gap:24px;align-items:center;font-size:.94rem}.nav-links a:hover{color:var(--coffee)}.nav-cta,.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:12px 18px;font-weight:750;transition:.2s ease;border:1px solid transparent}.nav-cta,.btn-primary{background:var(--deep);color:#fff}.nav-cta:hover,.btn-primary:hover{transform:translateY(-1px);background:#442a20}.btn-light{background:#fff;border-color:var(--line)}.btn-light:hover{border-color:#cdbba9}.menu-btn{display:none;border:0;background:transparent;font-size:1.45rem}
.hero{padding:78px 0 56px;position:relative;overflow:hidden}.hero:before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;right:-210px;top:-230px;background:radial-gradient(circle,#e7c79e 0,rgba(231,199,158,.16) 62%,transparent 70%)}.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:58px;align-items:center}.eyebrow{display:inline-flex;padding:7px 11px;border-radius:999px;background:#efe0cf;color:#644634;font-size:.82rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase}.hero h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(2.8rem,6vw,5.55rem);line-height:.98;letter-spacing:-.055em;margin:18px 0 22px;max-width:780px}.hero p{font-size:1.1rem;color:var(--muted);max-width:680px}.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}.hero-art{min-height:510px;position:relative;border-radius:36px;background:linear-gradient(150deg,#efe2d1 0,#d5b286 45%,#77503c 100%);box-shadow:var(--shadow);overflow:hidden}.hero-art:before{content:"";position:absolute;width:350px;height:350px;border-radius:50%;background:#f8f0e7;left:50%;top:49%;transform:translate(-50%,-50%);box-shadow:0 18px 40px rgba(49,32,26,.17)}.cup{position:absolute;width:230px;height:160px;border-radius:18px 18px 80px 80px;background:linear-gradient(#fffefa,#eee5da);left:50%;top:50%;transform:translate(-55%,-36%);box-shadow:0 22px 40px rgba(42,28,22,.22)}.cup:before{content:"";position:absolute;width:190px;height:52px;background:radial-gradient(ellipse at center,#3a241b 0 55%,#8b6a54 57% 63%,#eee5da 65%);border-radius:50%;left:20px;top:-22px}.cup:after{content:"";position:absolute;width:72px;height:82px;border:18px solid #eee5da;border-left:0;border-radius:0 54px 54px 0;right:-69px;top:30px}.bean{position:absolute;width:54px;height:34px;border-radius:50%;background:#42281e;transform:rotate(25deg);box-shadow:inset -9px -7px 0 rgba(0,0,0,.16)}.bean:after{content:"";position:absolute;width:2px;height:29px;background:#98745b;left:26px;top:2px;transform:rotate(12deg)}.b1{left:11%;top:17%;transform:rotate(-28deg)}.b2{right:14%;top:20%;transform:rotate(40deg) scale(.82)}.b3{right:12%;bottom:13%;transform:rotate(-12deg) scale(1.1)}.b4{left:18%;bottom:10%;transform:rotate(70deg) scale(.7)}.metric-row{display:flex;gap:20px;flex-wrap:wrap;margin-top:34px}.metric{min-width:150px}.metric strong{display:block;font-size:1.15rem}.metric span{font-size:.88rem;color:var(--muted)}
section{padding:76px 0}.section-soft{background:#f2e8dc}.section-dark{background:var(--deep);color:#fff}.section-head{max-width:760px;margin-bottom:34px}.section-head h2{font-family:Georgia,"Times New Roman",serif;font-size:clamp(2rem,4vw,3.35rem);line-height:1.05;letter-spacing:-.035em;margin:10px 0 12px}.section-head p{color:var(--muted)}.section-dark .section-head p{color:#d8c9be}.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:0 8px 28px rgba(49,32,26,.045)}.card h3{margin:12px 0 8px}.card p{margin:0;color:var(--muted)}.icon{width:46px;height:46px;border-radius:14px;background:#efe0cf;display:grid;place-items:center;font-size:1.2rem}.product-card{overflow:hidden;padding:0}.product-visual{height:205px;background:linear-gradient(135deg,#d7b990,#73503d);position:relative}.product-visual:before{content:"";position:absolute;width:104px;height:130px;background:#2f1e18;border-radius:16px 16px 22px 22px;left:50%;top:50%;transform:translate(-50%,-50%);box-shadow:0 14px 24px rgba(0,0,0,.18)}.product-visual:after{content:"BOTAK178";position:absolute;color:#f5e7d6;font-weight:900;font-size:.82rem;left:50%;top:50%;transform:translate(-50%,-50%)}.product-body{padding:24px}.tag{display:inline-flex;font-size:.76rem;font-weight:800;padding:6px 9px;border-radius:999px;background:#f3eadf;color:#6b4a38}.readmore{display:inline-flex;margin-top:14px;font-weight:800;color:#5a3727}.steps{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}.step{padding:20px 15px;border-radius:18px;background:#fff;border:1px solid var(--line);text-align:center}.step-num{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#2f1e18;color:#fff;margin:0 auto 12px;font-weight:800}.step h3{font-size:.98rem;margin:0 0 6px}.step p{font-size:.84rem;color:var(--muted);margin:0}.quote{font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.65rem,3vw,2.7rem);line-height:1.25;max-width:900px}.article-card .meta{font-size:.78rem;color:#8b7a70;margin-bottom:8px}.article-card h3{font-family:Georgia,"Times New Roman",serif;font-size:1.4rem}.article-card a{font-weight:800}.faq{max-width:850px}.faq-item{border-bottom:1px solid var(--line)}.faq-q{width:100%;text-align:left;border:0;background:transparent;padding:20px 0;font:inherit;font-weight:800;display:flex;justify-content:space-between;cursor:pointer}.faq-a{display:none;padding:0 0 20px;color:var(--muted)}.faq-item.open .faq-a{display:block}.cta-box{border-radius:30px;padding:42px;background:linear-gradient(135deg,#2f1e18,#684431);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:28px}.cta-box h2{font-family:Georgia,"Times New Roman",serif;font-size:clamp(2rem,4vw,3rem);margin:0 0 10px}.cta-box p{margin:0;color:#ddcec4;max-width:650px}.cta-box .btn{background:#fff;color:#2f1e18;white-space:nowrap}
.page-hero{padding:62px 0 42px;background:linear-gradient(180deg,#f1e5d8,#fffaf3)}.breadcrumbs{font-size:.83rem;color:var(--muted);margin-bottom:15px}.page-hero h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(2.5rem,5vw,4.7rem);letter-spacing:-.045em;line-height:1.02;margin:0 0 16px;max-width:930px}.page-hero p{max-width:760px;color:var(--muted);font-size:1.08rem}.prose{max-width:820px}.prose h2{font-family:Georgia,"Times New Roman",serif;font-size:2rem;margin-top:42px;line-height:1.15}.prose h3{margin-top:30px}.prose p,.prose li{color:#554a44}.prose ul{padding-left:20px}.note{border-left:4px solid var(--gold);padding:16px 18px;background:#f5ecdf;border-radius:0 14px 14px 0}.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:28px}.field{margin-bottom:15px}.field label{display:block;font-weight:700;margin-bottom:6px}.field input,.field textarea,.field select{width:100%;padding:13px 14px;border:1px solid #d8cabd;border-radius:12px;background:#fff;font:inherit}.field textarea{min-height:140px;resize:vertical}.footer{padding:58px 0 26px;background:#201713;color:#f5eee8}.footer-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:30px}.footer p,.footer a{color:#c9b9ae}.footer h3,.footer h4{margin-top:0}.footer-links{display:grid;gap:9px}.footer-bottom{border-top:1px solid #49372e;margin-top:36px;padding-top:22px;color:#a99589;font-size:.88rem;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
@media (max-width:900px){.nav-links{display:none;position:absolute;left:16px;right:16px;top:70px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:var(--shadow);flex-direction:column;align-items:stretch}.nav-links.open{display:flex}.menu-btn{display:block}.nav-cta{display:none}.hero-grid,.grid-2,.contact-grid{grid-template-columns:1fr}.hero{padding-top:52px}.hero-art{min-height:380px}.grid-3{grid-template-columns:1fr 1fr}.steps{grid-template-columns:repeat(3,1fr)}.footer-grid{grid-template-columns:1fr 1fr}.cta-box{align-items:flex-start;flex-direction:column}}
@media (max-width:620px){.container{width:min(calc(100% - 24px),var(--max))}.grid-3{grid-template-columns:1fr}.steps{grid-template-columns:1fr 1fr}.hero h1{font-size:3rem}.hero-art{min-height:330px}.cup{transform:translate(-57%,-32%) scale(.78)}.footer-grid{grid-template-columns:1fr}.section-head{margin-bottom:26px}section{padding:60px 0}.page-hero{padding-top:46px}}
