/* Spinto - coffee & latte palette */

:root{
  --bean-bg:#171310;
  --bean-bg-2:#1f1915;
  --bean-bg-3:#262019;
  --bean-latte:#d8b48c;
  --bean-sand:#e9ded0;
  --bean-text:#f4ece2;
  --bean-muted:#b9a894;
  --bean-line:#3a3028;
  --bean-radius:14px;
  --bean-shadow:0 10px 30px rgba(0,0,0,.38);
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--bean-bg);
  color:var(--bean-text);
  font-family:"Noto Sans Display","Segoe UI",Arial,sans-serif;
  font-size:17px;
  line-height:1.72;
  -webkit-text-size-adjust:100%;
}

h1,h2,h3,.bean-logo,.bean-kpi__num{
  font-family:"Comfortaa","Trebuchet MS",Arial,sans-serif;
  font-weight:700;
  letter-spacing:.2px;
}

h1{font-size:2.35rem;line-height:1.24;margin:0 0 18px;color:var(--bean-sand)}
h2{font-size:1.72rem;line-height:1.3;margin:0 0 16px;color:var(--bean-latte)}
h3{font-size:1.12rem;line-height:1.35;margin:0 0 10px;color:var(--bean-sand)}
p{margin:0 0 14px}
a{color:var(--bean-latte)}
a:hover{color:var(--bean-sand)}

.bean-wrap{max-width:1180px;margin:0 auto;padding:0 22px}

/* header */
.bean-head{
  position:sticky;top:0;z-index:40;
  background:rgba(23,19,16,.94);
  border-bottom:1px solid var(--bean-line);
  backdrop-filter:blur(9px);
}
.bean-head__in{display:flex;align-items:center;gap:20px;min-height:68px}
.bean-logo{font-size:1.45rem;color:var(--bean-latte);text-decoration:none;white-space:nowrap}
.bean-logo span{color:var(--bean-text)}
.bean-nav{display:flex;gap:18px;flex-wrap:wrap;margin-left:auto}
.bean-nav a{color:var(--bean-muted);text-decoration:none;font-size:.94rem}
.bean-nav a:hover{color:var(--bean-latte)}

/* buttons */
.bean-btn{
  display:inline-block;padding:14px 28px;border-radius:var(--bean-radius);
  text-decoration:none;font-weight:700;font-size:1rem;
  font-family:"Comfortaa","Trebuchet MS",Arial,sans-serif;
  border:1px solid transparent;transition:transform .16s ease,box-shadow .16s ease;
}
.bean-btn:hover{transform:translateY(-2px);box-shadow:var(--bean-shadow)}
.bean-btn--main{background:var(--bean-latte);color:#1a1410}
.bean-btn--main:hover{color:#1a1410}
.bean-btn--ghost{background:transparent;color:var(--bean-sand);border-color:var(--bean-latte)}

/* hero */
.bean-hero{
  padding:64px 0 52px;
  background:
    radial-gradient(720px 340px at 12% 0%,rgba(216,180,140,.16),transparent 62%),
    linear-gradient(180deg,var(--bean-bg-2),var(--bean-bg));
  border-bottom:1px solid var(--bean-line);
}
.bean-hero__lead{max-width:840px;font-size:1.06rem;color:var(--bean-sand)}
.bean-hero__cta{display:flex;gap:14px;flex-wrap:wrap;margin:26px 0 34px}

.bean-kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.bean-kpi__card{
  background:var(--bean-bg-3);border:1px solid var(--bean-line);
  border-radius:var(--bean-radius);padding:18px 20px;
}
.bean-kpi__num{display:block;font-size:1.5rem;color:var(--bean-latte);margin-bottom:4px}
.bean-kpi__cap{font-size:.9rem;color:var(--bean-muted)}

/* sections */
.bean-sec{padding:52px 0;border-bottom:1px solid var(--bean-line)}
.bean-sec--alt{background:var(--bean-bg-2)}
.bean-lede{max-width:880px}

.bean-grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:22px}
.bean-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:22px}
.bean-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:22px}

.bean-card{
  background:var(--bean-bg-3);border:1px solid var(--bean-line);
  border-radius:var(--bean-radius);padding:20px 22px;
}
.bean-card p{margin:0;color:var(--bean-sand);font-size:.97rem}
.bean-card__tag{
  display:inline-block;margin-bottom:8px;padding:3px 10px;border-radius:20px;
  background:rgba(216,180,140,.14);color:var(--bean-latte);font-size:.8rem;
}

.bean-slot{
  background:linear-gradient(160deg,var(--bean-bg-3),var(--bean-bg-2));
  border:1px solid var(--bean-line);border-radius:var(--bean-radius);
  padding:16px 18px;
}
.bean-slot__name{font-family:"Comfortaa",Arial,sans-serif;color:var(--bean-sand);font-size:1.02rem;display:block;margin-bottom:4px}
.bean-slot__meta{font-size:.86rem;color:var(--bean-muted)}

.bean-step{
  background:var(--bean-bg-3);border:1px solid var(--bean-line);
  border-radius:var(--bean-radius);padding:20px;position:relative;
}
.bean-step__n{
  font-family:"Comfortaa",Arial,sans-serif;font-size:1.9rem;color:var(--bean-latte);
  display:block;line-height:1;margin-bottom:8px;
}

/* tables */
.bean-tablebox{
  width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--bean-line);border-radius:var(--bean-radius);
  margin-top:22px;background:var(--bean-bg-3);
}
.bean-table{width:100%;border-collapse:collapse;min-width:720px;font-size:.95rem}
.bean-table caption{
  text-align:left;padding:14px 18px;color:var(--bean-muted);font-size:.9rem;
  border-bottom:1px solid var(--bean-line);
}
.bean-table th,.bean-table td{padding:13px 18px;text-align:left;border-bottom:1px solid var(--bean-line)}
.bean-table th{color:var(--bean-latte);font-weight:700;white-space:nowrap}
.bean-table tr:last-child td{border-bottom:none}
.bean-table tbody tr:hover{background:rgba(216,180,140,.06)}

/* reviews */
.bean-rev{
  background:var(--bean-bg-3);border:1px solid var(--bean-line);
  border-left:3px solid var(--bean-latte);
  border-radius:var(--bean-radius);padding:20px 22px;
}
.bean-rev__who{display:block;margin-top:12px;color:var(--bean-latte);font-size:.9rem}

/* faq */
.bean-faq{margin-top:22px}
.bean-faq details{
  background:var(--bean-bg-3);border:1px solid var(--bean-line);
  border-radius:var(--bean-radius);margin-bottom:12px;
}
.bean-faq summary{
  cursor:pointer;padding:16px 20px;color:var(--bean-sand);
  font-family:"Comfortaa",Arial,sans-serif;font-size:1.02rem;list-style:none;
}
.bean-faq summary::-webkit-details-marker{display:none}
.bean-faq summary::after{content:"+";float:right;color:var(--bean-latte)}
.bean-faq details[open] summary::after{content:"-"}
.bean-faq details[open] summary{color:var(--bean-latte)}
.bean-faq p{padding:0 20px 16px;margin:0;color:var(--bean-sand);font-size:.96rem}

/* cta strip */
.bean-strip{
  padding:46px 0;text-align:center;
  background:linear-gradient(120deg,rgba(216,180,140,.2),rgba(233,222,208,.07));
  border-bottom:1px solid var(--bean-line);
}
.bean-strip h2{margin-bottom:10px}
.bean-strip p{max-width:720px;margin:0 auto 22px;color:var(--bean-sand)}

/* editorial */
.bean-ed{
  background:var(--bean-bg-2);border:1px solid var(--bean-line);
  border-radius:var(--bean-radius);padding:24px;margin-top:22px;
}
.bean-ed dl{margin:0;display:grid;grid-template-columns:230px 1fr;gap:10px 18px}
.bean-ed dt{color:var(--bean-latte);font-size:.93rem}
.bean-ed dd{margin:0;color:var(--bean-sand);font-size:.95rem}

/* footer */
.bean-foot{background:#120f0c;padding:40px 0 46px;font-size:.9rem;color:var(--bean-muted)}
.bean-foot p{margin:0 0 12px}
.bean-foot a{color:var(--bean-latte)}
.bean-age{
  display:inline-block;border:1px solid var(--bean-latte);color:var(--bean-latte);
  border-radius:50%;width:44px;height:44px;line-height:42px;text-align:center;
  font-family:"Comfortaa",Arial,sans-serif;margin-bottom:16px;
}
.bean-foot__urls{word-break:break-all;font-size:.82rem;line-height:1.9}

@media (max-width:1000px){
  body{font-size:16px}
  h1{font-size:1.95rem}
  h2{font-size:1.48rem}
  .bean-hero{padding:46px 0 40px}
  .bean-sec{padding:40px 0}
  .bean-kpi{grid-template-columns:repeat(2,1fr)}
  .bean-grid3,.bean-grid4{grid-template-columns:repeat(2,1fr)}
  .bean-ed dl{grid-template-columns:180px 1fr}
  .bean-nav{gap:14px}
  .bean-nav a{font-size:.88rem}
}

@media (max-width:600px){
  .bean-wrap{padding:0 15px}
  h1{font-size:1.62rem}
  h2{font-size:1.3rem}
  .bean-head__in{min-height:58px;gap:12px}
  .bean-nav{display:none}
  .bean-kpi,.bean-grid2,.bean-grid3,.bean-grid4{grid-template-columns:1fr}
  .bean-hero__cta{flex-direction:column;align-items:stretch}
  .bean-btn{text-align:center;padding:13px 20px}
  .bean-ed dl{grid-template-columns:1fr;gap:2px 0}
  .bean-ed dt{margin-top:10px}
  .bean-table{min-width:600px;font-size:.9rem}
  .bean-table th,.bean-table td{padding:11px 13px}
}

/* мобильный скролл широких таблиц */
@media (max-width: 600px) {
  table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch }
}