/* =========================
   MateGolf — CLEAN styles.css
   ========================= */

/* Theme */
:root{
  --bg:#08130E; --bg-2:#0A1B12; --fg:#F2FFF5; --muted:#A9D0B9;
  --brand:#7CFF6B; --brand-2:#22C55E;
  --line:#153826; --card:#0B1F15;
  --shadow:0 12px 40px rgba(0,0,0,.5);
  --max:1200px; --radius:20px;
  --fs-hero:clamp(2.4rem,4.8vw,4.8rem); --fs-sub:clamp(1rem,1.6vw,1.35rem);
  --header-h:72px;
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Pretendard,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--fg);
  background:radial-gradient(1200px 700px at 65% -10%, var(--bg-2) 0%, var(--bg) 60%);
  line-height:1.45;
  scroll-behavior:smooth;
  padding-top:var(--header-h);
}
img,video{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
.container{max-width:var(--max); margin-inline:auto; padding:clamp(14px,1.8vw,24px)}
.small{font-size:.92rem}
.center{display:grid; place-items:center}
.lead{font-size:clamp(1rem, 1.6vw, 1.25rem)}
.muted{color:var(--muted)}
:focus-visible{outline:2px solid var(--brand); outline-offset:2px}

/* Header */
.header{
  position:fixed; inset:0 0 auto 0; z-index:1000;
  backdrop-filter:saturate(180%) blur(10px);
  background:rgba(9,22,16,.55);
  border-bottom:1px solid var(--line);
  transition:background .25s ease, box-shadow .25s ease;
}
.header.scrolled{background:rgba(9,22,16,.8); box-shadow:0 6px 20px rgba(0,0,0,.25)}
.header__inner{display:flex; align-items:center; justify-content:space-between; gap:16px}

/* Brand */
.brand{display:flex; align-items:center; gap:.6rem; font-weight:800; letter-spacing:.2px}
.brand__logo{width:48px; height:48px; object-fit:contain; filter:drop-shadow(0 1px 3px rgba(0,0,0,.25))}
@media (max-width:900px){.brand__logo{width:42px; height:42px}}
.header .brand .en{
  font-size:clamp(22px, 2.6vw, 32px);
  line-height:1; font-weight:800; letter-spacing:.02em; text-transform:uppercase;
  display:inline-block; transform:translateY(1px);
}

/* Nav */
.nav__list{display:flex; gap:clamp(.6rem,1.5vw,1rem); list-style:none; margin:0; padding:0; align-items:center}
.nav__link{
  position:relative; z-index:0; padding:.45rem .70rem; border-radius:12px; cursor:pointer;
  transition:color .2s ease;
}
/* одно «кольцо» вокруг текста */
.nav__link::before{
  content:""; position:absolute; inset:-4px; border-radius:inherit; z-index:-1;
  background:
    linear-gradient(transparent,transparent) padding-box,
    conic-gradient(from 0turn, var(--brand), var(--brand-2), var(--brand)) border-box;
  border:1.8px solid transparent; opacity:0; transform:scale(.92);
  transition:opacity .25s ease, transform .25s ease; pointer-events:none;
}
.nav__link:hover::before,.nav__link.active::before{opacity:1; transform:scale(1)}
.nav__link::after{content:none !important}
.nav__link.active{color:#C9FFD1}

/* Burger */
.burger{display:none; position:relative; width:48px; height:48px; border-radius:14px; border:1px solid var(--line); background:rgba(13,31,22,.7); box-shadow:var(--shadow); cursor:pointer}
.burger span{position:absolute; left:10px; right:10px; height:2.5px; background:#D9FFDE; border-radius:2px; transition:transform .35s ease, opacity .25s ease, top .35s ease}
.burger span:nth-child(1){top:14px}
.burger span:nth-child(2){top:22px}
.burger span:nth-child(3){top:30px}
.burger.active span:nth-child(1){top:22px; transform:rotate(45deg)}
.burger.active span:nth-child(2){opacity:0}
.burger.active span:nth-child(3){top:22px; transform:rotate(-45deg)}
@media (max-width:900px){
  .burger{display:inline-block}
  .nav__list{
    position:absolute; right:16px; top:64px; display:none; flex-direction:column;
    background:#0A2016; border:1px solid var(--line); border-radius:16px; padding:12px;
    width:min(90vw,300px); box-shadow:var(--shadow)
  }
  .nav__list.show{display:flex}
}

/* Buttons */
.btn{
  display:inline-block; padding:.9rem 1.1rem; border-radius:14px;
  border:1px solid var(--brand);
  background:linear-gradient(180deg,var(--brand),var(--brand-2));
  color:#04130A; font-weight:800; white-space:nowrap;
  box-shadow:0 4px 14px rgba(34,197,94,.25);
  transition:transform .15s ease, box-shadow .2s ease; cursor:pointer;
}
.btn:hover{transform:translateY(-1px); box-shadow:0 8px 20px rgba(34,197,94,.35)}
.btn--ghost{background:transparent; color:var(--fg); border-color:#2b5a43}
.btn--sm{padding:.6rem .8rem}

/* Layout helpers */
.section{position:relative}
.section--pad{padding:clamp(56px,7vw,96px) 0}
.section__title{font-size:clamp(1.4rem,2.8vw,2rem); font-weight:800; margin:0 0 .8rem; text-align:center}
.grid{display:grid; gap:clamp(16px,2vw,24px); align-items:start}
.grid--2{grid-template-columns:1.2fr .8fr}
@media (max-width:900px){.grid--2{grid-template-columns:1fr}}
.row{display:flex; gap:.8rem; flex-wrap:wrap}
.row--center{justify-content:center; align-items:center; gap:clamp(.6rem,1.6vw,1rem); text-align:center}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(14px,1.6vw,20px); box-shadow:var(--shadow)}

/* Hero */
.hero{min-height:clamp(70vh,88vh,94vh); display:grid; align-items:center; overflow:hidden}
.hero__inner{position:relative; z-index:2; text-align:center}
.hero__title{font-size:var(--fs-hero); margin:0 0 .3em; letter-spacing:.3px}
.hero__subtitle{font-size:var(--fs-sub); color:var(--muted); margin:0 0 1.2rem}
.hero__cta{display:flex; gap:.8rem; justify-content:center; margin-bottom:12px}
.chips{display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap}
.chips .chip{border:1px solid var(--line); background:rgba(9,26,17,.6); border-radius:999px; padding:.45rem .7rem; font-size:.85rem}
.tagline--hero{margin-top:clamp(16px,2.6vw,28px); display:inline-block; background:rgba(9,26,17,.48); border:1px solid #1E6F3E; border-radius:14px; padding:.55rem 1rem; box-shadow:var(--shadow)}

/* Parallax shared */
.parallax__wrap{position:absolute; inset:0; overflow:hidden}
.parallax__img,.parallax__video{position:absolute; inset:0; width:100%; height:120%; object-fit:cover; transform:translateY(0) scale(1.05); will-change:transform}
.parallax__overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(5,18,12,.25), rgba(5,18,12,.72))}

/* Pricing */
.pricing{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap:clamp(12px,1.6vw,18px)}
.price-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(16px,1.8vw,22px); box-shadow:var(--shadow)}
.price{font-size:clamp(1.4rem,2.4vw,2rem); font-weight:900; margin:.4rem 0}
.note{color:var(--muted); margin-top:.6rem}

/* Gallery (3 columns desktop, 1 column mobile) */
.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(8px,1vw,12px)}
@media (max-width:900px){.gallery{grid-template-columns:1fr}}
.gallery img{width:100%; height:auto; border-radius:16px; border:1px solid var(--line)}

/* 360° Panorama */
.panorama{position:relative; width:100%; margin:24px 0 0}
.panorama__title{font-size:clamp(1.2rem,2.2vw,1.6rem); font-weight:800; text-align:center; margin:18px 0 10px}
.panorama-item{margin:18px 0 28px}
.panorama-item__h{font-size:clamp(1rem,1.6vw,1.2rem); font-weight:600; text-align:center; margin:0 0 10px}
.panorama-container{
  display:block; min-height:360px; height:clamp(360px,62vh,720px);
  background:#000; border-radius:16px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow)
}
.panorama-loading{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; background:linear-gradient(135deg,#0b1f15,#132a1d); color:#fff; z-index:10; transition:opacity .5s ease}
.panorama-loading .spinner{width:54px; height:54px; border:5px solid rgba(255,255,255,.15); border-top-color:#fff; border-radius:50%; animation:spin 1s linear infinite; margin-bottom:14px}
@keyframes spin{to{transform:rotate(360deg)}}
.custom-panorama-controls{position:absolute; bottom:16px; right:16px; display:flex; gap:10px; z-index:20}
.pano-btn{width:44px; height:44px; background:rgba(0,0,0,.75); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.1); border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:transform .2s ease, background .2s ease; border-color:#2b5a43}
.pano-btn:hover{transform:translateY(-2px); background:rgba(0,0,0,.9)}
.panorama-hint{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:10px; padding:14px 18px; background:rgba(0,0,0,.6); backdrop-filter:blur(10px); border-radius:40px; color:#fff; font-size:14px; z-index:15; transition:opacity .5s ease; pointer-events:none}
.pnlm-controls,.pnlm-load-box,.pnlm-about-msg,.pnlm-title-box,.pnlm-author-box,.pnlm-compass{display:none!important}
.pnlm-render-container{cursor:grab}
.pnlm-render-container:active{cursor:grabbing}

/* Location */
.map{min-height:min(68vh,720px); border-radius:16px; overflow:hidden; border:1px solid var(--line); background:#0a1e14; position:relative}
.location__info{display:flex; align-items:flex-start; justify-content:space-between; gap:clamp(12px,2vw,24px); flex-wrap:wrap}
.location__info .row{align-self:flex-end}
.map__overlay{position:absolute; inset:0; display:grid; place-items:center; text-align:center; background:linear-gradient(180deg, rgba(8,19,14,.88), rgba(8,19,14,.92)); padding:16px; gap:12px}

/* Footer */
.footer{border-top:1px solid var(--line); padding:28px 0; color:var(--muted)}
.to-top{position:fixed; right:clamp(12px,2vw,18px); bottom:clamp(12px,2vw,18px); width:46px; height:46px; border-radius:999px; border:1px solid var(--line); background:#0a1e14; color:var(--fg); display:grid; place-items:center; box-shadow:var(--shadow)}

/* Reveal */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease}
.reveal.up{transform:translateY(24px)}
.reveal.inview{opacity:1; transform:none}

/* Divider (CSS-only) — фон с «зелёными пятнами» + перелив контейнера */
.divider.divider--css{
  position:relative; min-height:clamp(240px,38vh,460px);
  display:grid; place-items:center; overflow:hidden;
  background:linear-gradient(180deg, rgba(8,19,14,.90) 0%, rgba(8,19,14,.96) 100%);
  --par:0;
}
.divider.divider--css::before,
.divider.divider--css::after{
  content:""; position:absolute; inset:-20%; border-radius:50%; filter:blur(18px);
  opacity:.75; pointer-events:none; will-change:transform,opacity;
}
.divider.divider--css::before{
  background:radial-gradient(55% 55% at 22% 112%, rgba(46,204,113,.18) 0%, rgba(46,204,113,0) 60%);
  transform:translateY(calc(var(--par) * 80px));
  animation:dividerDriftA 16s ease-in-out infinite alternate;
}
.divider.divider--css::after{
  background:radial-gradient(65% 60% at 84% -8%, rgba(124,255,107,.16) 0%, rgba(124,255,107,0) 62%);
  transform:translateY(calc(var(--par) * -60px));
  animation:dividerDriftB 18s ease-in-out infinite alternate;
}
@keyframes dividerDriftA{
  0%{transform:translateY(calc(var(--par) * 80px)) translateX(0); opacity:.66}
  50%{transform:translateY(calc(var(--par) * 80px)) translateX(-2%); opacity:.78}
  100%{transform:translateY(calc(var(--par) * 80px)) translateX(2%); opacity:.70}
}
@keyframes dividerDriftB{
  0%{transform:translateY(calc(var(--par) * -60px)) translateX(0); opacity:.70}
  50%{transform:translateY(calc(var(--par) * -60px)) translateX(1.5%); opacity:.82}
  100%{transform:translateY(calc(var(--par) * -60px)) translateX(-1%); opacity:.72}
}
/* текст-бейдж */
.divider.divider--css .tagline{
  margin:0; font-weight:800; font-size:clamp(1.06rem,2.4vw,1.6rem); letter-spacing:.2px;
  background:linear-gradient(90deg,#EFFFF4 0%, #BFFFD3 35%, #7CFF6B 55%, #CFFFE0 80%, #EFFFF4 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  background-size:200% 100%; animation:textSweep 5.5s ease-in-out infinite;
  padding:.72rem 1.2rem; border-radius:14px; border:1px solid #1E6F3E;
  background-color:rgba(9,26,17,.50); backdrop-filter:blur(7px);
  text-shadow:0 1px 0 rgba(0,0,0,.35); box-shadow:0 14px 36px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05);
}
@keyframes textSweep{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
/* анимация контейнера */
.divider.divider--css .container.center{position:relative; isolation:isolate}
.divider.divider--css .container.center::before{
  content:""; position:absolute; inset:-14% -18%; z-index:-1; filter:blur(16px); opacity:.65; pointer-events:none;
  background:
    radial-gradient(60% 120% at 28% 50%, rgba(46,204,113,.16) 0%, rgba(46,204,113,0) 62%),
    radial-gradient(60% 120% at 72% 52%, rgba(124,255,107,.14) 0%, rgba(124,255,107,0) 62%);
  transform:translateY(calc(var(--par) * 40px));
  animation:dividerContainerFloat 14s ease-in-out infinite alternate;
}
.divider.divider--css .container.center::after{
  content:""; position:absolute; top:-40%; bottom:-40%; left:-70%; width:45%; z-index:-1;
  background:linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.08) 50%, rgba(255,255,255,0) 100%);
  transform:skewX(-20deg) translateX(-120%); mix-blend-mode:screen; opacity:0;
  animation:dividerContainerSheen 9s ease-in-out infinite;
}
@keyframes dividerContainerFloat{
  0%{transform:translateY(calc(var(--par) * 40px)) translateX(-2%); opacity:.55}
  50%{transform:translateY(calc(var(--par) * 40px)) translateX(1%); opacity:.78}
  100%{transform:translateY(calc(var(--par) * 40px)) translateX(2%); opacity:.66}
}
@keyframes dividerContainerSheen{
  0%,12%{transform:skewX(-20deg) translateX(-120%); opacity:0}
  20%{opacity:.35}
  40%{transform:skewX(-20deg) translateX(120%); opacity:0}
  100%{transform:skewX(-20deg) translateX(120%); opacity:0}
}

/* EN font */
.en,.bebas-neue-regular{font-family:"Bebas Neue",sans-serif; font-weight:400; font-style:normal; letter-spacing:.02em}

/* iOS: скрыть fullscreen и нудж */
@supports (-webkit-touch-callout: none) {.custom-panorama-controls .pano-fullscreen{display:none !important}}
@keyframes panoNudge{0%{transform:translateY(0) scale(1)}20%{transform:translateY(-2px) scale(1.01)}50%{transform:translateY(0) scale(1)}70%{transform:translateY(2px) scale(.995)}100%{transform:translateY(0) scale(1)}}
.pano-attn{animation:panoNudge .8s ease}

/* ===== Ecosystem (3/2/1, gradient sweep, big logos, mobile left-logo) ===== */

/* grid */
.ecosys{display:grid; gap:clamp(12px,1.6vw,18px); margin-top:clamp(14px,2vw,18px)}
@media (min-width:1024px){.ecosys{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:600px) and (max-width:1023.98px){.ecosys{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:599.98px){.ecosys{grid-template-columns:1fr}}

/* card */
.eco-card{
  position:relative; isolation:isolate;
  display:flex; flex-direction:column; gap:12px;
  min-height:178px; padding:clamp(18px,2vw,24px);
  border-radius:16px; background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow);
  color:var(--fg); text-decoration:none; overflow:hidden;
  transition:box-shadow .25s ease, transform .18s ease, border-color .25s ease;
}
/* head */
.eco-head{display:flex; align-items:center; gap:14px}
.eco-logo{
  width:clamp(42px,5vw,60px); height:clamp(42px,5vw,60px);
  object-fit:contain; flex:0 0 auto; filter:drop-shadow(0 2px 6px rgba(0,0,0,.35)); opacity:.98;
}
/* text */
.eco-title{
  font-weight:900; font-size:clamp(1.28rem,2.2vw,1.72rem);
  line-height:1.12; white-space:normal; word-break:keep-all;
}
.eco-tagline{margin:2px 0 12px; color:var(--muted)}
.eco-link{margin-top:auto; font-weight:700; opacity:.97}
/* badge */
.eco-badge{
  position:absolute; top:10px; right:10px;
  font-size:.72rem; letter-spacing:.3px; padding:.22rem .46rem; border-radius:999px;
  border:1px solid #2b5a43; color:#bfffd3; background:rgba(9,26,17,.55); backdrop-filter:blur(6px);
}
.eco-card--main{border-color:#1b4c34}

/* idle gradient sweep */
.eco-card::before{
  content:""; position:absolute; inset:-32%; z-index:-1; pointer-events:none; border-radius:inherit;
  background:linear-gradient(120deg, rgba(52,180,106,0) 0%, rgba(52,180,106,.06) 18%, rgba(52,180,106,.14) 40%, rgba(52,180,106,.08) 62%, rgba(52,180,106,0) 100%);
  background-size:220% 220%; filter:blur(.2px); opacity:.85; animation:ecoSweep 18s ease-in-out infinite alternate;
}
.eco-card::after{
  content:""; position:absolute; inset:-40%; z-index:-1; pointer-events:none; border-radius:inherit;
  background:linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.05) 35%, rgba(255,255,255,0) 70%);
  background-size:200% 200%; opacity:.25; filter:blur(.3px); animation:ecoSheen 22s ease-in-out infinite alternate;
}
@keyframes ecoSweep{0%{background-position:0% 0%; transform:translate3d(-2%,0,0)}50%{background-position:60% 80%; transform:translate3d(1%,0,0)}100%{background-position:100% 100%; transform:translate3d(3%,0,0)}}
@keyframes ecoSheen{0%{background-position:100% 0%; opacity:.20}50%{background-position:40% 60%; opacity:.28}100%{background-position:0% 100%; opacity:.22}}
.eco-card:hover{box-shadow:0 16px 40px rgba(0,0,0,.52); border-color:#265f42}
.eco-card:active{transform:scale(.985); box-shadow:0 8px 28px rgba(0,0,0,.55)}

/* mobile layout: left logo column, text right */
@media (max-width:599.98px){
  .eco-card{
    --logo-col:clamp(100px,24vw,126px);
    display:grid; grid-template-columns:var(--logo-col) 1fr;
    column-gap:clamp(12px,3.2vw,16px);
    padding:clamp(12px,3.2vw,16px) clamp(14px,3.5vw,18px);
    min-height:150px; align-items:center;
  }
  .eco-head{display:contents}
  .eco-logo{
    grid-column:1; grid-row:1/span 3; justify-self:center; align-self:center;
    width:100%; max-width:calc(var(--logo-col) - clamp(18px,4vw,24px));
    height:auto; max-height:120px; object-fit:contain;
  }
  .eco-title{grid-column:2; margin-top:0; font-size:clamp(1.34rem,5.2vw,1.68rem)}
  .eco-tagline{grid-column:2; margin-top:6px}
  .eco-link{grid-column:2}
}

html{
  /* у тебя var(--header-h)=72px — даём небольшой запас */
  scroll-padding-top: calc(var(--header-h) + 12px);
}

/* 2) Подстраховка для случаев, когда браузер игнорит scroll-padding (iOS/старые Safari) */
.section{
  scroll-margin-top: calc(var(--header-h) + 12px);
}

:root{
  --header-offset: calc(var(--header-h, 72px) + env(safe-area-inset-top, 0px) + 12px);
}
html{ scroll-padding-top: var(--header-offset); }
.section{ scroll-margin-top: var(--header-offset); }

/* 2) На iOS отключаем нативный smooth (делаем руками в JS) */
html.no-smooth{ scroll-behavior: auto; }

/* 3) На время якорной прокрутки убираем transform у секций c reveal,
      чтобы translateY не влиял на расчёт позиции (только для <section>) */
html.reveal-freeze section.reveal{
  transform: none !important;
  /* прозрачность оставим, чтобы визуально не мигало */
}

/* === HERO: Matehill button (ширина как у одной верхней кнопки) === */
.hero__mate{
  display:flex;
  justify-content:center;
  margin-top:.9rem;      /* отступ от верхних CTA */
  margin-bottom:.65rem;  /* перед расписанием */
}

/* ширина = ширине первой кнопки в .hero__cta; JS заполнит --cta-single-w */
.btn--mate{
  position:relative;
  display:block;
  width: min(100%, var(--cta-single-w, 260px));
  max-width: clamp(220px, 42vw, 360px);
  text-align:center;

  /* те же пропорции что у .btn */
  padding:.9rem 1.1rem;
  border-radius:14px;
  border:1px solid #1f8e53;

  /* более насыщенный, «живой» зелёный */
  background: linear-gradient(180deg, #34D399 0%, #22C55E 100%);
  color:#04130A; font-weight:800;

  box-shadow:
    0 10px 26px rgba(34,197,94,.32),
    inset 0 1px 0 rgba(255,255,255,.10);
  transition: transform .15s ease, box-shadow .22s ease, filter .22s ease;
}

/* лёгкая подсветка по краям */
.btn--mate::after{
  content:""; position:absolute; inset:-2px; border-radius:inherit; pointer-events:none;
  box-shadow:0 0 0 1px rgba(124,255,107,.18), 0 0 28px rgba(124,255,107,.20) inset;
}

/* деликатный shine — только при hover (без постоянного мерцания) */
.btn--mate::before{
  content:"";
  position:absolute; inset:-2px; border-radius:inherit; pointer-events:none;
  background: linear-gradient(100deg,
    rgba(255,255,255,0) 20%,
    rgba(255,255,255,.42) 50%,
    rgba(255,255,255,0) 80%);
  mix-blend-mode:screen; opacity:0; transform:translateX(-140%);
}
.btn--mate:hover::before{ animation:mateShine 1.8s ease forwards; }
@keyframes mateShine{
  0%   { opacity:0;   transform:translateX(-140%); }
  20%  { opacity:.8;  transform:translateX(-30%);  }
  60%  { opacity:.0;  transform:translateX(120%);  }
  100% { opacity:.0;  transform:translateX(120%);  }
}

.btn--mate:hover{
  transform: translateY(-1px);
  box-shadow:
    0 14px 34px rgba(34,197,94,.40),
    inset 0 1px 0 rgba(255,255,255,.12);
  filter: saturate(1.05);
}
.btn--mate:active{ transform: scale(.985); }

/* Шрифт для “MATEHILL” внутри кнопки — Bebas Neue */
.btn--mate .en{
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  letter-spacing: .04em;
  margin-right: .55ch;
}

  .hero__mate{
    display:flex; justify-content:center;
    margin-top:.9rem; margin-bottom:.65rem;
  }

  /* чуть уже, чем было; адаптивно и без JS */
  .btn--mate{
    position:relative;
    display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
    width: clamp(220px, 32vw, 300px);          /* уже прежнего */
    padding:.9rem 1.1rem;
    border-radius:14px; border:1px solid #1f8e53;
    background: linear-gradient(180deg, #34D399 0%, #22C55E 100%);
    color:#04130A; font-weight:800; text-align:center;
    box-shadow: 0 10px 26px rgba(34,197,94,.32), inset 0 1px 0 rgba(255,255,255,.10);
    transition: transform .15s ease, box-shadow .22s ease, filter .22s ease;
  }
  .btn--mate::after{
    content:""; position:absolute; inset:-2px; border-radius:inherit; pointer-events:none;
    box-shadow:0 0 0 1px rgba(124,255,107,.18), 0 0 28px rgba(124,255,107,.20) inset;
  }
  .btn--mate::before{
    content:""; position:absolute; inset:-2px; border-radius:inherit; pointer-events:none;
    background: linear-gradient(100deg, rgba(255,255,255,0) 20%, rgba(255,255,255,.42) 50%, rgba(255,255,255,0) 80%);
    mix-blend-mode:screen; opacity:0; transform:translateX(-140%);
  }
  .btn--mate:hover::before{ animation:mateShine 1.8s ease forwards; }
  @keyframes mateShine{
    0% { opacity:0; transform:translateX(-140%); }
    25%{ opacity:.85; transform:translateX(-30%); }
    70%{ opacity:0;  transform:translateX(120%); }
    100%{ opacity:0;  transform:translateX(120%); }
  }
  .btn--mate:hover{
    transform:translateY(-1px);
    box-shadow:0 14px 34px rgba(34,197,94,.40), inset 0 1px 0 rgba(255,255,255,.12);
    filter:saturate(1.05);
  }
  .btn--mate:active{ transform:scale(.985); }

  /* типографика: MATEHILL крупнее, корейский — меньше */
  .btn--mate .en{
    font-family:"Bebas Neue", sans-serif; font-weight:400;
    letter-spacing:.06em; line-height:1;
    font-size:clamp(1.1rem, 2.3vw, 1.5rem);    /* больше */
  }
  .btn--mate .ko{
    font-size:clamp(.92rem, 1.6vw, 1.08rem);   /* меньше */
    line-height:1; opacity:.95;
  }

/* фиксированная ширина для MATEHILL на всех экранах */
:root{ --mate-btn-w: 220px; }

.hero__mate .btn--mate{
  width: var(--mate-btn-w) !important;
  min-width: var(--mate-btn-w);
  max-width: var(--mate-btn-w);
  /* чтобы текст не переносился и всё смотрелось ровно */
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* =========================
   styles.css — ДОБАВИТЬ В КОНЕЦ
   ========================= */

/* 1) Корректный докрут якорей на всех устройствах */
:root{ --header-h: 72px; } /* JS обновит фактическую высоту */
section[id]{ scroll-margin-top: calc(var(--header-h) + 12px); }

/* 2) Тост для показа номера телефона на ПК */
.toast{
  position:fixed;
  left:50%; bottom:24px; transform:translateX(-50%);
  min-width:260px; max-width:92vw;
  padding:12px 14px;
  border:1px solid #2b5a43; border-radius:14px;
  background:rgba(8,25,18,.92); backdrop-filter:blur(6px);
  color:#dff6ea; box-shadow:0 16px 40px rgba(0,0,0,.45);
  z-index:9999; display:none;
}
.toast.show{ display:block; }
.toast a{ color:#98f4c7; text-decoration:none; font-weight:700; }