/* ===== Arabica — Light (hero visual stays dark) ===== */
:root{
  /* Light palette */
  --bg:#f7f5f2;         /* page background */
  --surface:#ffffff;    /* cards, header, footer surfaces */
  --elev:#fbfaf8;       /* slightly elevated blocks */
  --line:#e6e0d9;       /* borders/dividers */
  --ink:#1e1814;        /* main text */
  --muted:#6f6459;      /* secondary text */
  --accent:#d7a866;     /* brand accent */
  --radius:18px;
  --shadow:0 14px 36px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, 'Noto Sans';
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 15% -10%, #fff 0, rgba(255,255,255,0) 70%),
    radial-gradient(800px 400px at 120% 10%, #fff 0, rgba(255,255,255,0) 65%),
    var(--bg);
}
img{max-width:100%;display:block}
.container{width:min(1200px, calc(100% - 32px)); margin-inline:auto}

/* ===== Header ===== */
.header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(1.2) blur(10px);
  background:linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.72));
  border-bottom:1px solid var(--line);
}
.header__row{display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:16px; padding:12px 0;}
.brand{display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; font-weight:700}
.brand__icon{font-size:22px; filter:drop-shadow(0 2px 6px rgba(0,0,0,.12))}
.brand__name{letter-spacing:.2px}

.header__phone{
  color:var(--ink); text-decoration:none; font-weight:600; letter-spacing:.2px;
  padding:6px 10px; border-radius:999px; background:rgba(215,168,102,.12);
  border:1px solid color-mix(in oklab, var(--accent) 30%, transparent);
}
.header__phone:hover{background:rgba(215,168,102,.18)}

.lang{display:flex; gap:8px}
.lang__btn{
  appearance:none; border:1px solid var(--line); background:var(--surface);
  color:var(--ink); padding:6px 10px; border-radius:999px; cursor:pointer; font-weight:600;
}
.lang__btn[aria-pressed="true"]{border-color:var(--accent); color:#7a541f; background:color-mix(in oklab, var(--surface) 85%, var(--accent))}
.lang__btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* ===== Hero ===== */
.hero{
  position:relative;
  padding:48px 0 32px;
  /* светлый фон секции */
  background:
    radial-gradient(1600px 800px at 0% 0%, #fff 0, rgba(255,255,255,0) 65%),
    radial-gradient(1000px 500px at 100% 10%, #faf7f3 0, rgba(250,247,243,0) 60%);
}
.hero__grid{display:grid; grid-template-columns: 1.05fr .95fr; align-items:center; gap:28px;}

.hero__eyebrow{color:#7a541f; font-weight:700; letter-spacing:.4px; text-transform:uppercase; font-size:.85rem; opacity:.95}
.hero__title{margin:8px 0 8px; font-size: clamp(28px, 6vw, 56px); line-height:1.05; letter-spacing:.2px}
.hero__subtitle{color:var(--muted); margin:0 0 18px; font-size: clamp(14px, 2.8vw, 18px)}

.hero__stats{display:flex; flex-wrap:wrap; gap:10px; margin:0 0 18px; padding:0; list-style:none}
.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px;
  background:linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,.01));
  border:1px solid var(--line); color:var(--ink); font-weight:600; font-size:.9rem;
}

.hero__cta{display:flex; flex-wrap:wrap; gap:10px; margin:8px 0 10px}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 16px; border-radius:12px; text-decoration:none; font-weight:700; letter-spacing:.2px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
  transition:transform .15s ease, background .2s ease, border-color .2s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn--accent{
  background:linear-gradient(180deg, color-mix(in oklab, var(--accent) 85%, #fff 10%), var(--accent));
  border-color:color-mix(in oklab, var(--accent) 70%, #000 10%); color:#2b1f12;
  box-shadow: 0 10px 24px rgba(215,168,102,.18);
}
.btn--ghost{
  background:transparent; color:var(--ink);
  border-color:color-mix(in oklab, var(--accent) 35%, var(--line));
}
.btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

.hero__note{margin-top:6px; color:var(--muted); font-size:.95rem}

/* ----- Hero Visual (KEEP DARK) ----- */
.hero__visual{position:relative; display:grid; place-items:center}
.hero__ring{
  position:absolute; inset:auto; width:min(58vmin, 560px); aspect-ratio:1/1; border-radius:50%;
  background:
    radial-gradient(closest-side, rgba(215,168,102,.25), rgba(215,168,102,0) 60%),
    radial-gradient(closest-side, rgba(0,0,0,.08), rgba(0,0,0,0) 70%);
  filter: blur(6px);
}
/* тёмная карта с анимацией */
.hero__card{
  position:relative; z-index:1;
  width:min(520px, 92%); aspect-ratio:1.2/1; border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(26,22,19,.9), rgba(18,15,13,.9));
  border:1px solid #2a2420;
  box-shadow: var(--shadow);
  display:grid; place-items:center; overflow:hidden;
}
.hero__img{
  position:relative; width:78%; aspect-ratio:1/1; border-radius:50%;
  background:
    radial-gradient(circle at 30% 30%, #2a221c 0, #1d1915 50%, #15120f 100%);
  border:1px solid color-mix(in oklab, #2a2420 85%, #fff 5%);
  display:grid; place-items:center;
  animation: float 6s ease-in-out infinite;
}
@keyframes float{
  0% { transform: translateY(0) }
  50%{ transform: translateY(-8px) }
  100%{ transform: translateY(0) }
}
.cup{font-size: clamp(48px, 9vw, 96px); filter: drop-shadow(0 12px 24px rgba(0,0,0,.5))}
.steam{position:absolute; inset:0; display:grid; place-items:center; pointer-events:none}
.steam span{
  position:absolute; width:6px; height:22%; border-radius:999px;
  background: linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,0));
  filter: blur(2px); opacity:.6; animation: rise 4s ease-in-out infinite;
}
.steam span:nth-child(1){left:42%; animation-delay:0s}
.steam span:nth-child(2){left:50%; height:26%; animation-delay:.6s}
.steam span:nth-child(3){left:58%; height:22%; animation-delay:1.2s}
@keyframes rise{
  0%{ transform: translateY(20%); opacity:.0 }
  15%{ opacity:.6 }
  50%{ transform: translateY(-10%); opacity:.35 }
  100%{ transform: translateY(-30%); opacity:0 }
}
.hero__price-tag{
  position:absolute; bottom:14px; right:14px; font-weight:800; font-size:.95rem;
  padding:8px 10px; border-radius:10px;
  background: color-mix(in oklab, var(--accent) 30%, #2b1f12 70%);
  color: #ffe9c4; border:1px solid color-mix(in oklab, var(--accent) 60%, #000 20%);
}

/* подсказка скролла */
.scroll-hint{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:8px; display:inline-flex; align-items:center; gap:8px;
  color:var(--muted); text-decoration:none; font-weight:600; opacity:.9
}
.scroll-hint:hover{color:var(--ink)}

/* ===== Controls (chips) ===== */
.controls{
  position:sticky; top:64px; z-index:40; padding:12px 0 8px;
  background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.7));
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.chips{display:flex; gap:10px; overflow:auto; padding:6px 0 8px; -webkit-overflow-scrolling:touch; scrollbar-width:thin}
.chips::-webkit-scrollbar{height:8px}
.chips::-webkit-scrollbar-thumb{background:var(--line); border-radius:999px}

/* ===== Grid & Card ===== */
.grid{
  display:grid; gap:16px; padding:18px 0 48px;
  grid-template-columns: repeat(12, 1fr);
}
.card{
  grid-column: span 4; /* = 3 в ряд на десктопе */
  display:grid; grid-template-rows:auto 1fr; border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,.98));
  border:1px solid var(--line); overflow:hidden; box-shadow: var(--shadow);
}
.card__media{aspect-ratio:16/10; background:#f0ede9}
.card__img{width:100%; height:100%; object-fit:cover}
.card__body{padding:14px 14px 16px}
.card__title{margin:0 0 6px; font-size:1.05rem; letter-spacing:.2px}
.card__desc{margin:0 0 10px; color:var(--muted); font-size:.95rem; line-height:1.45}
.card__meta{display:flex; align-items:center; justify-content:space-between; gap:8px; font-weight:700}
.card__price{color:#7a541f}
.card__cat{color:var(--muted); font-weight:600; font-size:.9rem}
.card__tags{margin-top:10px; display:flex; gap:8px; flex-wrap:wrap}

/* ===== Footer ===== */
.footer{
  border-top:1px solid var(--line);
  background:var(--surface);
  color:var(--ink);
  margin-top:8px;
}
.footer__grid{
  display:grid;
  gap:14px;
  padding:16px 0;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto;
  align-items:start;
}
.footer__item{display:flex; gap:10px; align-items:flex-start; min-width:0}
.footer__label{color:var(--muted); font-weight:600; white-space:nowrap; flex:0 0 auto}
.footer__value{
  font-weight:600; color:var(--ink); font-style:normal;
  min-width:0; overflow-wrap:anywhere; word-break:normal; hyphens:auto; text-wrap:pretty;
}
.footer__map{display:inline-block; margin-left:.5ch; color:#7a541f; text-decoration:none}
.footer__map:hover{ text-decoration:underline }

/* ===== Responsive ===== */
@media (max-width: 1100px){
  .hero__grid{grid-template-columns:1fr; gap:18px}
  .hero__visual{order:-1}
  .controls{top:60px}
}
@media (max-width: 900px){
  .grid{grid-template-columns: repeat(8, 1fr)}
  .card{grid-column: span 4} /* 2 в ряд */
  .footer__grid{grid-template-columns:1fr}
}
@media (max-width: 640px){
  .header__row{grid-template-columns:auto 1fr auto}
  .header__phone{justify-self:center; font-weight:700}
  .hero{padding:28px 0 36px}
  .hero__title{font-size:clamp(26px, 8vw, 40px)}
  .grid{grid-template-columns: repeat(4, 1fr)}
  .card{grid-column: span 4} /* 1 в ряд */
  .btn{padding:11px 14px}
}