/* Василиса — сайт-визитка. Светлая тема, минимализм, мобайл-фёрст. */

:root{
  --bg:#FFFCF9;
  --surface:#FFFFFF;
  --ink:#1B1613;
  --ink-soft:#6E635C;
  --line:#EDE4DD;
  --accent:#E8611A;
  --accent-dark:#C64E10;
  --accent-soft:#FDF0E7;
  --radius:18px;
  --shadow:0 1px 2px rgba(27,22,19,.04), 0 8px 24px -12px rgba(27,22,19,.12);
  --shadow-lift:0 2px 4px rgba(27,22,19,.05), 0 18px 40px -18px rgba(232,97,26,.28);
  --wrap:1080px;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
}

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

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:var(--bg);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%;display:block}

a{color:var(--accent-dark);text-decoration:none}
a:hover{text-decoration:underline}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 20px}

/* ---------- шапка ---------- */

.topbar{
  position:sticky;top:0;z-index:20;
  background:rgba(255,252,249,.86);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar__inner{display:flex;align-items:center;gap:12px;min-height:64px}
.logo{width:36px;height:36px;flex:none}
.topbar__text{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.topbar__name{font-weight:650;letter-spacing:-.01em}
.topbar__role{font-size:12.5px;color:var(--ink-soft)}
.topbar__cta{
  margin-inline-start:auto;
  font-size:14px;font-weight:600;
  padding:8px 16px;border-radius:999px;
  color:#fff;background:var(--accent);
  white-space:nowrap;
}
.topbar__cta:hover{background:var(--accent-dark);text-decoration:none}

/* ---------- герой ---------- */

.hero{
  position:relative;
  padding:52px 0 8px;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;z-index:-1;
  top:-220px;right:-160px;
  width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(232,97,26,.16), rgba(232,97,26,0) 68%);
}

.badge{
  display:inline-block;
  font-size:12.5px;font-weight:600;letter-spacing:.02em;
  color:var(--accent-dark);
  background:var(--accent-soft);
  border:1px solid #F6D9C5;
  padding:6px 13px;border-radius:999px;
}

.hero__title{
  margin:20px 0 0;
  font-size:clamp(30px,7.2vw,54px);
  line-height:1.12;
  letter-spacing:-.022em;
  font-weight:700;
  max-width:16ch;
}
.hero__title em{font-style:normal;color:var(--accent)}

.hero__lead{
  margin:18px 0 0;
  max-width:56ch;
  color:var(--ink-soft);
  font-size:clamp(15.5px,3.6vw,18px);
}

.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 0}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:13px 24px;border-radius:999px;
  font-weight:620;font-size:15.5px;
  border:1px solid transparent;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn--primary{background:var(--accent);color:#fff;box-shadow:var(--shadow-lift)}
.btn--primary:hover{background:var(--accent-dark)}
.btn--ghost{background:var(--surface);color:var(--ink);border-color:var(--line);box-shadow:var(--shadow)}
.btn--ghost:hover{border-color:#DCCEC4}

/* ---------- секции ---------- */

.section{padding:56px 0}
.section--soft{
  background:#FFF8F3;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.section__title{
  margin:0;
  font-size:clamp(22px,5vw,32px);
  line-height:1.2;letter-spacing:-.018em;font-weight:680;
}
.section__sub{margin:10px 0 0;color:var(--ink-soft);max-width:54ch}

.grid{list-style:none;margin:28px 0 0;padding:0}

/* сетка "что я делаю" */
.grid--work{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px 20px;
  box-shadow:var(--shadow);
  transition:border-color .15s ease, transform .15s ease;
}
.card:hover{border-color:#E4D5C9;transform:translateY(-2px)}
.card__icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:12px;
  background:var(--accent-soft);color:var(--accent);
  margin-bottom:14px;
}
.card__icon svg{width:22px;height:22px}
.card h3{margin:0 0 6px;font-size:17px;font-weight:640;letter-spacing:-.01em}
.card p{margin:0;color:var(--ink-soft);font-size:15px;line-height:1.55}

/* карточки-акценты */
.grid--accent{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  counter-reset:none;
}
.accent{
  position:relative;
  background:var(--surface);
  border:1px solid var(--line);
  border-inline-start:4px solid var(--accent);
  border-radius:var(--radius);
  padding:24px 22px;
  box-shadow:var(--shadow);
}
.accent__num{
  display:block;
  font-size:13px;font-weight:700;letter-spacing:.14em;
  color:var(--accent);
  margin-bottom:10px;
}
.accent h3{margin:0 0 8px;font-size:18px;font-weight:660;letter-spacing:-.012em;line-height:1.3}
.accent p{margin:0;color:var(--ink-soft);font-size:15px;line-height:1.55}

/* ---------- контакт + QR ---------- */

.contact{
  display:grid;
  grid-template-columns:1fr;
  gap:30px;
  align-items:start;
}
.steps{
  margin:20px 0 0;padding:0;list-style:none;
  counter-reset:step;
}
.steps li{
  position:relative;
  padding-inline-start:42px;
  margin-bottom:12px;
  color:var(--ink);
  font-size:16px;
}
.steps li::before{
  counter-increment:step;
  content:counter(step);
  position:absolute;inset-inline-start:0;top:1px;
  width:28px;height:28px;border-radius:50%;
  background:var(--accent-soft);color:var(--accent-dark);
  font-size:13.5px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.steps b{font-weight:640}

.contact__hint{margin:22px 0 4px;color:var(--ink-soft);font-size:14.5px}
.mailto{margin:0}
.mailto a{
  font-size:clamp(18px,4.6vw,22px);
  font-weight:660;letter-spacing:-.012em;
  border-bottom:2px solid #F3C7A9;
  padding-bottom:2px;
}
.mailto a:hover{border-bottom-color:var(--accent);text-decoration:none}

.contact__qr{justify-self:center;width:100%;max-width:360px}
.qrframe{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:var(--shadow);
}
.qrframe img{width:100%;height:auto}
.qrframe__caption{
  margin:12px 0 0;
  font-size:13.5px;line-height:1.5;color:var(--ink-soft);
  text-align:center;
}

/* ---------- подвал ---------- */

.footer{
  border-top:1px solid var(--line);
  background:#FFF8F3;
  padding:26px 0;
}
.footer__inner{
  display:flex;flex-direction:column;gap:10px;
  color:var(--ink-soft);font-size:14px;
}
.footer__row{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline}
.footer__dot{opacity:.6}
.footer__nav{display:flex;flex-wrap:wrap;gap:6px 18px}
.footer__nav a{font-size:14px}
.footer__note{margin:0;font-size:13px;line-height:1.5;opacity:.9}

/* ---------- согласие у блока заявки ---------- */

.consent{
  margin:16px 0 0;max-width:52ch;
  font-size:13.5px;line-height:1.5;color:var(--ink-soft);
}

/* ---------- плашка о cookie ---------- */

.cookiebar{
  position:fixed;inset-inline:0;bottom:0;z-index:60;
  padding:12px 0;
  background:rgba(255,252,249,.97);
  backdrop-filter:saturate(180%) blur(10px);
  border-top:1px solid var(--line);
  box-shadow:0 -10px 30px -20px rgba(27,22,19,.30);
}
.cookiebar__inner{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.cookiebar__text{
  margin:0;flex:1 1 340px;min-width:0;
  font-size:14px;line-height:1.45;color:var(--ink-soft);
}
.cookiebar__actions{display:flex;align-items:center;gap:16px;margin-inline-start:auto;flex:none}
.cookiebar__more{font-size:14px;white-space:nowrap}
.cookiebar__ok{
  font:inherit;font-size:14px;font-weight:600;line-height:1;
  color:#fff;background:var(--accent);
  border:1px solid transparent;border-radius:999px;
  padding:10px 20px;cursor:pointer;white-space:nowrap;
  transition:background .15s ease;
}
.cookiebar__ok:hover{background:var(--accent-dark)}
.cookiebar__ok:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* без JS плашка остаётся видимой; после «Понятно» — скрыта */
html[data-cookie="ack"] .cookiebar{display:none}
html:not([data-cookie="ack"]) body{padding-bottom:78px}

/* ---------- правовые страницы (политика, cookies, условия) ---------- */

.legal{background:var(--bg)}
.legal__wrap{max-width:820px;padding-top:34px;padding-bottom:64px}
.legal__nav{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;
  font-size:14px;margin-bottom:22px;
}
.legal__nav .legal__spacer{margin-inline-start:auto}
.legal__lang{display:flex;gap:10px;align-items:center}
.legal__lang a[aria-current="true"]{font-weight:700;text-decoration:none;color:var(--ink)}
.legal__title{
  margin:0;font-size:clamp(24px,5vw,34px);line-height:1.2;
  letter-spacing:-.018em;font-weight:700;
}
.legal__meta{margin:10px 0 0;font-size:13.5px;color:var(--ink-soft)}
.legal h2{
  margin:34px 0 10px;font-size:clamp(18px,3.6vw,22px);
  line-height:1.3;letter-spacing:-.012em;font-weight:660;
}
.legal h3{margin:22px 0 8px;font-size:17px;font-weight:640}
.legal p{margin:0 0 12px;color:var(--ink)}
.legal ul{margin:0 0 12px;padding-inline-start:20px}
.legal li{margin-bottom:6px}
.legal .legal__soft{color:var(--ink-soft)}
.legal table{
  width:100%;border-collapse:collapse;margin:6px 0 14px;
  font-size:15px;
}
.legal th,.legal td{
  text-align:start;vertical-align:top;
  padding:9px 10px;border-bottom:1px solid var(--line);
}
.legal th{font-weight:640;background:#FFF8F3}
.legal code{font-size:14px;background:#FFF3EA;padding:1px 5px;border-radius:6px}
.legal__note{
  margin:34px 0 0;padding:14px 16px;
  background:var(--accent-soft);border:1px solid #F6D9C5;border-radius:14px;
  font-size:13.5px;line-height:1.55;color:var(--ink-soft);
}
.legal__back{margin-top:26px;font-size:14px}

@media (max-width:520px){
  .legal table,.legal thead,.legal tbody,.legal th,.legal td,.legal tr{display:block}
  .legal thead{display:none}
  .legal tr{border:1px solid var(--line);border-radius:12px;margin-bottom:10px;padding:6px 4px}
  .legal td{border:0;padding:5px 10px}
  .legal td::before{
    content:attr(data-label);display:block;
    font-size:11.5px;font-weight:640;letter-spacing:.04em;
    text-transform:uppercase;color:var(--ink-soft);margin-bottom:2px;
  }
}

/* ---------- планшет / десктоп ---------- */

@media (min-width:640px){
  .grid--work{grid-template-columns:repeat(2,1fr);gap:16px}
  .card{padding:26px 24px}
  .steps{display:grid;gap:6px}
}

@media (min-width:900px){
  body{font-size:18px}
  .hero{padding:76px 0 20px}
  .section{padding:76px 0}
  .grid--work{grid-template-columns:repeat(3,1fr)}
  .grid--accent{grid-template-columns:repeat(3,1fr);gap:20px}
  .contact{grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
  .contact__qr{justify-self:end;max-width:340px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
}

/* ---------- языковые шрифтовые стеки (CJK / арабица / деванагари) ---------- */

html[lang="zh"]{--font:system-ui,-apple-system,"PingFang SC","Noto Sans SC","Noto Sans CJK SC","Microsoft YaHei","Hiragino Sans GB",sans-serif}
html[lang="ja"]{--font:system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Noto Sans JP","Noto Sans CJK JP","Yu Gothic",Meiryo,"Meiryo UI",sans-serif}
html[lang="ar"]{--font:system-ui,-apple-system,"Segoe UI","Noto Naskh Arabic","Noto Sans Arabic","Geeza Pro",Tahoma,sans-serif}
html[lang="hi"]{--font:system-ui,-apple-system,"Nirmala UI","Noto Sans Devanagari","Noto Sans",sans-serif}

html[lang="zh"] body,html[lang="ja"] body{line-height:1.78}
html[lang="zh"] .hero__title,html[lang="ja"] .hero__title,
html[lang="zh"] .section__title,html[lang="ja"] .section__title,
html[lang="zh"] .accent h3,html[lang="ja"] .accent h3,
html[lang="zh"] .card h3,html[lang="ja"] .card h3{letter-spacing:0}
html[lang="zh"] .hero__lead,html[lang="ja"] .hero__lead{letter-spacing:0}

/* ---------- переключатель языков ---------- */

.lang{position:relative;flex:none;margin-inline-start:auto}
.topbar__cta{margin-inline-start:0}
.lang__btn{
  display:inline-flex;align-items:center;gap:6px;
  font:inherit;font-size:13.5px;font-weight:600;line-height:1;
  color:var(--ink);background:var(--surface);
  border:1px solid var(--line);border-radius:999px;
  padding:8px 11px;cursor:pointer;
  box-shadow:var(--shadow);
  transition:border-color .15s ease,background .15s ease;
}
.lang__btn:hover{border-color:#DCCEC4;background:#FFFDFB}
.lang__btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.lang__globe{width:16px;height:16px;flex:none;color:var(--accent)}
.lang__chev{width:12px;height:12px;flex:none;color:var(--ink-soft);transition:transform .15s ease}
.lang.is-open .lang__chev{transform:rotate(180deg)}
.lang__code{letter-spacing:.04em}

.lang__menu{
  position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:40;
  display:none;
  min-width:190px;max-width:min(78vw,260px);
  max-height:min(70vh,420px);overflow:auto;
  margin:0;padding:6px;list-style:none;
  background:var(--surface);
  border:1px solid var(--line);border-radius:14px;
  box-shadow:0 14px 34px -14px rgba(27,22,19,.30), 0 2px 6px rgba(27,22,19,.05);
}
.lang.is-open .lang__menu{display:block}
.lang__row{margin:0;padding:0}
.lang__item{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:8px 10px;border:0;background:transparent;border-radius:10px;
  font:inherit;font-size:15px;line-height:1.35;color:var(--ink);
  cursor:pointer;text-align:start;
}
.lang__item:hover{background:var(--accent-soft)}
.lang__item:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.lang__item[aria-current="true"]{background:var(--accent-soft);font-weight:650}
.lang__item--rtl .lang__native{text-align:end}
.lang__native{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lang__tag{flex:none;font-size:11.5px;font-weight:600;letter-spacing:.06em;color:var(--ink-soft)}

/* ---------- RTL-доводки (арабский) ---------- */

html[dir="rtl"] .hero::before{right:auto;inset-inline-start:-160px}
html[dir="rtl"] .footer__inner{justify-content:flex-start}
html[dir="rtl"] .lang__chev{transform:none}

/* ---------- узкий мобильный ---------- */

@media (max-width:480px){
  .topbar__role{display:none}
  .lang__menu{min-width:172px}
}