/* ============================================================
   Михаил Эмирсуинов - персональный бренд (emirsuinov.ru)
   Концепция: «Характер» - ценностный спортивный editorial
   Display: Unbounded · Body: Onest · Accent: grass green
   (визуально отличается от trenerkazan.ru)
   ============================================================ */

:root{
  --paper:#F1F4EE;
  --surface:#FAFBF8;
  --card:#FFFFFF;
  --ink:#101613;
  --forest:#0B2A1E;
  --forest-2:#123C2B;
  --grass:#1AA65B;
  --grass-deep:#128049;
  --grass-soft:#E1F3E7;
  --lime:#BEF23C;
  --muted:#57635C;
  --muted-2:#889389;
  --paper-on-dark:#E9F1EB;
  --muted-on-dark:#9BB0A4;
  --line:#DCE1D6;
  --line-strong:#C6CDBE;

  --ff-display:"Unbounded", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ff-body:"Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --wrap:1180px;
  --wrap-narrow:800px;
  --sp:clamp(4.5rem,9vw,8.5rem);
  --r:16px;
  --r-sm:10px;
  --shadow:0 2px 6px rgba(11,42,30,.05),0 24px 48px -28px rgba(11,42,30,.28);
  --shadow-lg:0 40px 90px -40px rgba(11,42,30,.5);
  --ease:cubic-bezier(.2,.75,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--ff-body);color:var(--ink);background:var(--paper);
  line-height:1.62;font-size:clamp(1rem,.95rem + .22vw,1.1rem);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:none}
ul{list-style:none;padding:0}
:focus-visible{outline:3px solid var(--grass);outline-offset:3px;border-radius:3px}

/* layout */
.wrap{width:min(100% - 2.4rem,var(--wrap));margin-inline:auto}
.wrap-narrow{width:min(100% - 2.4rem,var(--wrap-narrow));margin-inline:auto}
.section{padding-block:var(--sp)}
.section--tight{padding-block:clamp(3rem,6vw,5rem)}
.bg-paper{background:var(--paper)}
.bg-surface{background:var(--surface)}
.bg-forest{background:var(--forest);color:var(--paper-on-dark)}
.bg-forest .lead{color:var(--muted-on-dark)}

/* typography */
.display,h1,h2,h3{font-family:var(--ff-display);font-weight:800;line-height:1;letter-spacing:-.03em}
h1{font-size:clamp(2.5rem,1.5rem + 4.4vw,5.2rem)}
h2{font-size:clamp(1.9rem,1.3rem + 2.4vw,3.1rem);font-weight:700}
h3{font-size:clamp(1.15rem,1rem + .8vw,1.5rem);font-weight:700;letter-spacing:-.02em}
h4{font-family:var(--ff-body);font-weight:700;font-size:1.05rem}
p{max-width:66ch}
.lead{font-size:clamp(1.1rem,1rem + .5vw,1.35rem);line-height:1.5;color:var(--muted);font-weight:400}
strong{font-weight:700}
.grass{color:var(--grass)}

/* label (replaces site1 mono eyebrow) */
.label{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--ff-body);font-weight:700;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--grass-deep);
}
.label::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--grass);box-shadow:0 0 0 4px var(--grass-soft)}
.bg-forest .label{color:var(--lime)}
.bg-forest .label::before{background:var(--lime);box-shadow:0 0 0 4px rgba(190,242,60,.15)}

.sec-head{max-width:60ch;margin-bottom:clamp(2rem,4vw,3.4rem);display:flex;flex-direction:column;gap:1rem}

/* buttons: pill */
.btn{
  --bg:var(--grass);--fg:#fff;--bd:var(--grass);
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--ff-body);font-weight:700;font-size:.95rem;letter-spacing:.01em;
  padding:.9em 1.6em;background:var(--bg);color:var(--fg);border:2px solid var(--bd);
  border-radius:100px;transition:transform .25s var(--ease),box-shadow .25s,background .25s;line-height:1;white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px -10px rgba(26,166,91,.6)}
.btn:active{transform:translateY(0)}
.btn--ghost{--bg:transparent;--fg:var(--ink);--bd:var(--line-strong)}
.btn--ghost:hover{--bd:var(--ink);box-shadow:none}
.bg-forest .btn--ghost,.page-hero2 .btn--ghost,.cta2 .btn--ghost{--fg:var(--paper-on-dark);--bd:rgba(255,255,255,.3)}
.bg-forest .btn--ghost:hover,.page-hero2 .btn--ghost:hover,.cta2 .btn--ghost:hover{--bd:#fff}
.btn--tg{--bg:#229ED9;--bd:#229ED9;--fg:#fff}
.btn--dark{--bg:var(--ink);--bd:var(--ink);--fg:#fff}
.btn svg{width:1.15em;height:1.15em;flex:none}
.btn-row{display:flex;flex-wrap:wrap;gap:.8rem}

/* header */
.site-header{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--paper) 82%,transparent);backdrop-filter:saturate(1.3) blur(12px);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:72px}
.brand{display:flex;align-items:center;gap:.7rem;color:var(--ink)}
.brand__mark{width:44px;height:44px;flex:none;border-radius:50%;object-fit:cover;object-position:center 16%;border:2px solid var(--grass)}
.brand__name{font-family:var(--ff-display);font-weight:800;font-size:1rem;letter-spacing:-.02em;line-height:1.1}
.brand__name small{display:block;font-family:var(--ff-body);font-weight:600;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin-top:3px}
.nav{display:flex;align-items:center;gap:.2rem}
.nav a{font-weight:600;font-size:.92rem;color:var(--muted);padding:.5em .85em;border-radius:100px;transition:color .2s,background .2s;white-space:nowrap}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--grass-deep);background:var(--grass-soft)}
.mnav-cta{display:none}
.header-cta{display:flex;gap:.6rem}
.header-cta .btn{padding:.65em 1.2em;font-size:.86rem}
.nav-toggle{display:none;width:46px;height:46px;border:1px solid var(--line-strong);border-radius:12px;color:var(--ink)}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{content:"";display:block;width:20px;height:2px;background:currentColor;margin-inline:auto;position:relative;transition:transform .3s,opacity .3s}
.nav-toggle span::before{position:absolute;top:-6px}
.nav-toggle span::after{position:absolute;top:6px}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}
@media (max-width:960px){
  .nav-toggle{display:block}
  .nav{position:fixed;inset:72px 0 auto 0;flex-direction:column;align-items:stretch;background:var(--surface);border-bottom:1px solid var(--line);padding:1rem 1.2rem;gap:.3rem;transform:translateY(-140%);transition:transform .35s var(--ease);z-index:55}
  .nav.open{transform:translateY(0)}
  .nav a{padding:.9em .6em;font-size:1rem;border-bottom:1px solid var(--line)}
  .nav a[aria-current="page"]{background:none;color:var(--grass-deep)}
  .mnav-cta{display:flex;gap:.6rem;margin-top:.8rem}
  .mnav-cta .btn{flex:1;justify-content:center}
  .header-cta{display:none}
}

/* hero */
.hero2{position:relative;overflow:hidden;background:var(--paper)}
.hero2__inner{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center;padding-block:clamp(2.5rem,6vw,5.5rem)}
.hero2__title{margin:1rem 0 1.4rem;text-transform:uppercase}
.hero2__title .g{color:var(--grass)}
.hero2__sub{max-width:44ch;margin-bottom:1.9rem}
.hero2__media{position:relative}
.hero2__media .ph{position:relative;border-radius:180px 180px var(--r) var(--r);overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:4/5}
.hero2__media img{width:100%;height:100%;object-fit:cover;object-position:center 15%}
.hero2__blob{position:absolute;inset:auto -8% -6% auto;width:60%;height:60%;background:radial-gradient(circle at 30% 30%,var(--lime),transparent 62%);opacity:.5;z-index:-1}
.hero2__tag{position:absolute;left:-16px;top:28px;background:var(--forest);color:#fff;border-radius:100px;padding:.7em 1.1em;font-weight:700;font-size:.82rem;box-shadow:var(--shadow);display:flex;align-items:center;gap:.5em}
.hero2__tag b{color:var(--lime)}
@media (max-width:860px){.hero2__inner{grid-template-columns:1fr}.hero2__media{max-width:420px;order:-1}}

/* stat band */
.statband{border-block:1px solid var(--line);background:var(--surface)}
.statband__grid{display:grid;grid-template-columns:repeat(4,1fr)}
.statband .s{padding:1.5rem 1.2rem;border-right:1px solid var(--line)}
.statband .s:last-child{border-right:none}
.statband .v{font-family:var(--ff-display);font-weight:800;font-size:clamp(1.8rem,1.2rem + 1.8vw,2.7rem);line-height:1;letter-spacing:-.03em}
.statband .v span{color:var(--grass)}
.statband .k{font-weight:600;font-size:.8rem;color:var(--muted);margin-top:.5rem}
@media (max-width:720px){.statband__grid{grid-template-columns:1fr 1fr}.statband .s:nth-child(2n){border-right:none}.statband .s{border-bottom:1px solid var(--line)}}

/* grids */
.grid{display:grid;gap:clamp(1rem,2.5vw,1.8rem)}
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.cols-3{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.cols-2,.cols-3{grid-template-columns:1fr}}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.split--rev .media{order:-1}
@media (max-width:820px){.split{grid-template-columns:1fr}}

/* value cards (principles) */
.vcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:clamp(1.4rem,2.6vw,2.1rem);height:100%;display:flex;flex-direction:column;transition:transform .3s var(--ease),box-shadow .3s}
.vcard:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.vcard__rom{font-family:var(--ff-display);font-weight:800;font-size:1.1rem;color:var(--grass);letter-spacing:.02em;margin-bottom:1rem}
.vcard h3{margin-bottom:.6rem}
.vcard p{color:var(--muted);font-size:.98rem}
.bg-forest .vcard{background:var(--forest-2);border-color:rgba(255,255,255,.08)}
.bg-forest .vcard p{color:var(--muted-on-dark)}
.bg-forest .vcard__rom{color:var(--lime)}

/* check list */
ul.check{display:grid;gap:.75rem}
ul.check li{position:relative;padding-left:2.1rem;color:var(--muted)}
.bg-forest ul.check li{color:var(--muted-on-dark)}
ul.check li::before{content:"";position:absolute;left:0;top:.1rem;width:1.3rem;height:1.3rem;border-radius:50%;background:var(--grass-soft);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23128049' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");background-size:.85rem;background-repeat:no-repeat;background-position:center}
.bg-forest ul.check li::before{background-color:rgba(190,242,60,.16);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BEF23C' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}

/* service cards with media */
.svc{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:transform .3s var(--ease),box-shadow .3s}
.svc:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.svc__media{aspect-ratio:16/11;overflow:hidden;background:var(--forest)}
.svc__media img,.svc__media video{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .5s var(--ease)}
.svc__media--top img,.svc__media--top video{object-position:center 12%}
.svc:hover .svc__media img{transform:scale(1.05)}
.svc__body{padding:clamp(1.2rem,2.4vw,1.7rem);display:flex;flex-direction:column;flex:1}
.tag{align-self:flex-start;font-weight:700;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--grass-deep);background:var(--grass-soft);border-radius:100px;padding:.4em .9em;margin-bottom:.9rem}
.svc h3{margin-bottom:.5rem}
.svc p{color:var(--muted);font-size:.97rem}
.svc__link{margin-top:auto;padding-top:1rem;font-weight:700;color:var(--grass-deep);display:inline-flex;align-items:center;gap:.4em}
.svc__link::after{content:"→";transition:transform .25s}
.svc:hover .svc__link::after{transform:translateX(4px)}

/* frame */
.frame{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.frame img{width:100%;display:block}
.frame__cap{position:absolute;left:0;right:0;bottom:0;padding:1.4rem 1.1rem .9rem;color:#fff;font-size:.82rem;font-weight:600;background:linear-gradient(transparent,rgba(11,42,30,.85))}

/* big pull quote / manifesto */
.manifesto{font-family:var(--ff-display);font-weight:700;letter-spacing:-.03em;line-height:1.08;font-size:clamp(1.6rem,1.1rem + 2.4vw,3rem)}
.manifesto .g{color:var(--grass)}
.bg-forest .manifesto .g{color:var(--lime)}
cite{font-style:normal}

/* reels */
.reels{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(180px,1fr);gap:1rem;overflow-x:auto;padding-bottom:.8rem;scroll-snap-type:x mandatory}
.reels::-webkit-scrollbar{height:8px}.reels::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:100px}
.reel{position:relative;aspect-ratio:9/16;border-radius:var(--r);overflow:hidden;background:var(--forest);scroll-snap-align:start;box-shadow:var(--shadow)}
.reel video{width:100%;height:100%;object-fit:cover}
.reel figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.6rem .8rem .7rem;color:#fff;font-size:.72rem;font-weight:600;background:linear-gradient(transparent,rgba(11,42,30,.82));line-height:1.3}
@media (max-width:600px){.reels{grid-auto-columns:minmax(150px,72%)}}

/* gallery */
.gallery{columns:3;column-gap:1rem}
@media (max-width:900px){.gallery{columns:2}}@media (max-width:560px){.gallery{columns:1}}
.gallery figure{break-inside:avoid;margin-bottom:1rem;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);background:var(--card);cursor:zoom-in}
.gallery img{width:100%;transition:transform .5s var(--ease)}
.gallery figure:hover img{transform:scale(1.04)}
.gallery figcaption{padding:.75rem .95rem;font-size:.82rem;font-weight:600;color:var(--muted);line-height:1.35}
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(8,26,18,.94);display:none;align-items:center;justify-content:center;padding:1.5rem}
.lightbox.open{display:flex}
.lightbox img{max-width:92vw;max-height:86vh;border-radius:8px;box-shadow:var(--shadow-lg)}
.lightbox__close{position:absolute;top:1rem;right:1.2rem;width:48px;height:48px;border:1px solid rgba(255,255,255,.3);border-radius:50%;color:#fff;font-size:1.6rem}
.lightbox__cap{position:absolute;left:0;right:0;bottom:1.2rem;text-align:center;color:#cfe3d6;font-size:.82rem;padding-inline:1rem}

/* crumbs */
.crumbs{font-weight:600;font-size:.82rem;color:var(--muted);padding-block:1rem;display:flex;gap:.5em;flex-wrap:wrap}
.crumbs a:hover{color:var(--grass-deep)}
.crumbs span[aria-current]{color:var(--ink)}

/* faq */
.faq details{border-top:1px solid var(--line);padding:1.1rem 0}
.faq details[open] summary{color:var(--grass-deep)}
.faq summary{font-family:var(--ff-display);font-weight:700;font-size:1.02rem;letter-spacing:-.02em;list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:1rem;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--grass);font-size:1.5rem;font-family:var(--ff-body);transition:transform .3s;flex:none}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{margin-top:.8rem;color:var(--muted)}

/* page hero (interior) */
.page-hero2{background:var(--forest);color:var(--paper-on-dark);position:relative;overflow:hidden}
.page-hero2::after{content:"";position:absolute;right:-10%;top:-30%;width:50%;height:120%;background:radial-gradient(circle,rgba(190,242,60,.14),transparent 60%)}
.page-hero2__inner{position:relative;padding-block:.4rem clamp(3rem,6vw,5rem)}
.page-hero2 .crumbs{color:var(--muted-on-dark)}
.page-hero2 .crumbs a:hover{color:var(--lime)}
.page-hero2 .crumbs span[aria-current]{color:#fff}
.page-hero2 h1{margin:1rem 0;max-width:22ch}
.page-hero2 .lead{max-width:58ch;color:var(--muted-on-dark)}
.page-hero2__split{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.page-hero2__split .frame img{aspect-ratio:4/5;object-fit:cover;object-position:center 16%}
@media (max-width:820px){.page-hero2__split{grid-template-columns:1fr}.page-hero2__split .media{max-width:400px}}

/* timeline */
.timeline{margin-top:1rem}
.timeline__item{display:grid;grid-template-columns:140px 1fr;gap:1.6rem;padding:1.5rem 0;border-top:1px solid var(--line)}
.timeline__year{font-family:var(--ff-display);font-weight:700;color:var(--grass-deep);font-size:.95rem;letter-spacing:-.02em}
.timeline__item h3{margin-bottom:.4rem}
.timeline__item p{color:var(--muted)}
@media (max-width:640px){.timeline__item{grid-template-columns:1fr;gap:.4rem}}

/* chips */
.chip-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.2rem}
.chip{font-weight:600;font-size:.85rem;background:var(--card);border:1px solid var(--line);border-radius:100px;padding:.5em 1em;color:var(--muted)}
.bg-forest .chip{background:var(--forest-2);border-color:rgba(255,255,255,.1);color:var(--paper-on-dark)}
.note{display:inline-flex;align-items:center;gap:.5em;font-weight:600;font-size:.85rem;color:var(--grass-deep);background:var(--grass-soft);padding:.55em 1.1em;border-radius:100px}

/* CTA band */
.cta2{position:relative;overflow:hidden;background:var(--forest);color:#fff}
.cta2::after{content:"";position:absolute;left:-6%;bottom:-40%;width:44%;height:130%;background:radial-gradient(circle,rgba(190,242,60,.16),transparent 62%)}
.cta2 .inner{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.6rem}
.cta2 h2{color:#fff;max-width:20ch}
.cta2 .btn:not(.btn--ghost){--bg:var(--lime);--bd:var(--lime);--fg:var(--forest)}
.cta2 .btn:not(.btn--ghost):hover{box-shadow:0 12px 26px -10px rgba(190,242,60,.5)}

/* footer */
.site-footer{background:var(--ink);color:var(--muted-on-dark);padding-block:clamp(3rem,6vw,4.5rem) 2rem;font-size:.92rem}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem}
@media (max-width:760px){.footer-grid{grid-template-columns:1fr;gap:1.6rem}}
.site-footer h4{color:#fff;margin-bottom:1rem;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase}
.site-footer a:hover{color:var(--lime)}
.footer-links{display:grid;gap:.55rem}
.footer-brand{display:flex;align-items:center;gap:.7rem;margin-bottom:1rem}
.footer-brand .brand__name{color:#fff}
.footer-bottom{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.1);display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;font-size:.8rem}
.footer-social{display:flex;gap:.7rem;margin-top:1rem}
.footer-social a{width:40px;height:40px;border:1px solid rgba(255,255,255,.15);border-radius:50%;display:grid;place-items:center;color:#fff;transition:background .2s,border-color .2s}
.footer-social a:hover{background:var(--grass);border-color:var(--grass)}
.footer-social svg{width:18px;height:18px}

/* reveal */
.reveal.in{opacity:1;transform:none}
@media (scripting: enabled){.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* utils */
.mt-1{margin-top:1rem}.mt-2{margin-top:2rem}.mt-3{margin-top:3rem}
.center{text-align:center}.mx-auto{margin-inline:auto}
.skip{position:absolute;left:-999px;top:0;background:var(--grass);color:#fff;padding:.7em 1.2em;z-index:200;font-weight:700;border-radius:0 0 8px 0}
.skip:focus{left:0;top:0}
.prose p+p{margin-top:1rem}.prose h3{margin:2rem 0 .8rem}