/* ============================================================
   ШРИФТЫ — лежат в папке fonts/ на твоём сервере (Google не используется: это важно для RGPD и скорости).
   Хочешь сменить шрифт — положи файл .woff2 в fonts/ и поменяй имя в url() ниже.
   ============================================================ */
@font-face{ font-family:"Fraunces"; font-style:normal; font-weight:100 900; font-display:swap; src:url("../fonts/fraunces-normal.woff2") format("woff2"); }
@font-face{ font-family:"Fraunces"; font-style:italic; font-weight:100 900; font-display:swap; src:url("../fonts/fraunces-italic.woff2") format("woff2"); }
@font-face{ font-family:"Inter"; font-style:normal; font-weight:100 900; font-display:swap; src:url("../fonts/inter.woff2") format("woff2"); }
@font-face{ font-family:"JetBrains Mono"; font-style:normal; font-weight:400; font-display:swap; src:url("../fonts/jetbrains-mono-400.woff2") format("woff2"); }
@font-face{ font-family:"JetBrains Mono"; font-style:normal; font-weight:500; font-display:swap; src:url("../fonts/jetbrains-mono-500.woff2") format("woff2"); }

/* ============================================================
   TASKHOU — Design system
   Palette: taïga night + tigre de l'Amour
   Display: Fraunces · Body: Inter · Mono: JetBrains Mono
   ============================================================ */

:root{
  --ink:        #0a0c0b; /* самый тёмный фон */
  --ink-2:      #121412;
  --forest:     #0d1a15; /* тёмно-зелёный фон секций */
  --charcoal:   #1a1815; /* угольный фон секций */
  --charcoal-2: #221e19;
  --ember:      #e35d1f; /* главный оранжевый (кнопки) */
  --ember-2:    #ff8a3d; /* светлый оранжевый (наведение) */
  --ember-dim:  #9a3d16;
  --gold:       #c99a3e; /* золотой акцент */
  --snow:       #f4efe3; /* основной цвет текста */
  --smoke:      #a89f92; /* серый текст */
  --smoke-dim:  #6f6a61;
  --line:       rgba(244,239,227,0.12); /* тонкие линии-разделители */
  --line-strong:rgba(244,239,227,0.22);

  --display: "Fraunces", "Iowan Old Style", Georgia, serif; /* шрифт заголовков */
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* шрифт текста */
  --mono: "JetBrains Mono", "SFMono-Regular", Menlo, monospace; /* моноширинный шрифт подписей */

  --container: 1240px; /* максимальная ширина контента */
  --radius: 2px;
  --ease: cubic-bezier(.22,.7,.24,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;scroll-behavior:auto !important;}
}

body{
  margin:0;
  background:var(--ink);
  color:var(--snow);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;margin:0;letter-spacing:-0.01em;}
p{margin:0;}
ul{margin:0;padding:0;list-style:none;}

:focus-visible{
  outline:2px solid var(--ember-2);
  outline-offset:3px;
  border-radius:1px;
}

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 28px;
}

.eyebrow{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--gold);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:"";
  width:18px;height:1px;
  background:var(--gold);
  display:inline-block;
}

/* ---------- Фон «тигровые полосы» — фирменный мотив ---------- */
.stripes-bg{
  position:absolute;top:0;right:0;bottom:0;left:0;
  pointer-events:none;
  overflow:hidden;
  z-index:0;
}
.stripes-bg::before{
  content:"";
  position:absolute;
  top:-2400px;
  left:-2400px;
  width:6000px;
  height:6000px;
  transform:rotate(-62deg);
  background-image:repeating-linear-gradient(
    180deg,
    rgba(227,93,31,0.34) 0px,
    rgba(227,93,31,0.34) 3px,
    transparent 3px,
    transparent 46px,
    rgba(227,93,31,0.16) 46px,
    rgba(227,93,31,0.16) 50px,
    transparent 50px,
    transparent 132px
  );
  background-repeat: repeat;
  animation: driftStripes 40s linear infinite;
}
@keyframes driftStripes{
  from{ background-position: 0 528px; }
  to{ background-position: 0 0; }
}

.band{
  position:relative;
  overflow:hidden;
  background:linear-gradient(100deg,var(--ember-dim),var(--ember) 45%,var(--gold) 100%);
  color:#180c04;
}
.band .band-track{
  display:flex;
  width:max-content;
  gap:0;                 /* зазор делаем через padding-right у слов — тогда цикл бесшовный */
  padding:14px 0;
  will-change:transform;
  animation:none;   /* анимацию включает js/main.js (класс is-ready), когда лента собрана */
}
/* Лента сдвигается ровно на ширину одной группы слов (--band-shift считает скрипт) — поэтому шов не виден */
@keyframes marquee{
  from{ transform:translate3d(0,0,0); }
  to{ transform:translate3d(calc(-1 * var(--band-shift, 0px)),0,0); }
}
.band .band-track.is-ready{ animation:marquee var(--band-dur,40s) linear infinite; }
.band span{
  padding-right:56px;  /* расстояние между словами в ленте (менять тут) */
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  gap:16px;
}
.band span .dot{
  font-style:normal;
  font-size:9px;
  opacity:0.6;
}

/* ---------- КНОПКИ (.btn-primary — оранжевая, .btn-ghost — контурная) ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:15px 28px;
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  border-radius:var(--radius);
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
  white-space:nowrap;
}
.btn-primary{
  background:var(--ember);
  color:#150900;
  border-color:var(--ember);
}
.btn-primary:hover{ background:var(--ember-2); border-color:var(--ember-2); transform:translateY(-2px); }
.btn-ghost{
  background:transparent;
  color:var(--snow);
  border-color:var(--line-strong);
}
.btn-ghost:hover{ border-color:var(--ember-2); color:var(--ember-2); transform:translateY(-2px); }
.btn-sm{ padding:11px 20px; font-size:11.5px; }
.btn-block{ width:100%; justify-content:center; }
.btn[disabled]{ opacity:0.45; cursor:not-allowed; transform:none !important; }

/* ---------- ШАПКА И МЕНЮ ---------- */
.site-header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:200;
  background:rgba(10,12,11,0.72);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--line);
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:78px;
}
.logo{
  display:flex;
  align-items:center;
  gap:12px;
  font-family:var(--display);
  font-size:21px;
  font-weight:600;
  letter-spacing:0.12em; /* разрядка для логотипа заглавными */
}
.logo-img{
  width:38px;height:38px;
  flex-shrink:0;
  display:block;
}
.logo .mark-sub{
  display:block;
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:0.2em;
  color:var(--smoke);
  text-transform:uppercase;
  font-weight:400;
  margin-top:1px;
}

.nav-desktop{
  display:flex;
  align-items:center;
  gap:38px;
}
.nav-links{ display:flex; gap:32px; }
.nav-links a{
  font-size:14px;
  color:var(--smoke);
  position:relative;
  padding:6px 0;
  transition:color .25s var(--ease);
}
.nav-links a:hover, .nav-links a.active{ color:var(--snow); }
.nav-links a::after{
  content:"";
  position:absolute;left:0;right:100%;bottom:0;
  height:1px;background:var(--ember-2);
  transition:right .3s var(--ease);
}
.nav-links a:hover::after{ right:0; }

.lang-switch{
  display:flex;
  align-items:center;
  gap:2px;
  font-family:var(--mono);
  font-size:11.5px;
  border:1px solid var(--line);
  border-radius:20px;
  padding:3px;
}
.lang-switch a{
  background:none;border:none;color:var(--smoke-dim);
  padding:5px 10px;border-radius:16px;cursor:pointer;
  letter-spacing:0.04em;
  transition:background .25s, color .25s;
  text-decoration:none;
  display:inline-block;
}
.lang-switch a.is-active{ background:var(--ember); color:#150900; }
.lang-switch a:hover:not(.is-active){ color:var(--snow); }

.nav-cta{ display:flex; align-items:center; gap:16px; }

.burger{
  display:none;
  width:44px;height:44px;
  border:1px solid var(--line);
  background:none;
  border-radius:50%;
  cursor:pointer;
  position:relative;
}
.burger span, .burger span::before, .burger span::after{
  content:"";
  position:absolute;left:13px;right:13px;height:1px;background:var(--snow);
  transition:transform .3s var(--ease), opacity .2s;
}
.burger span{ top:50%; transform:translateY(-50%); }
.burger span::before{ top:-7px; }
.burger span::after{ top:7px; }
.burger.is-open span{ background:transparent; }
.burger.is-open span::before{ transform:rotate(45deg) translateY(0); top:0; }
.burger.is-open span::after{ transform:rotate(-45deg) translateY(0); top:0; }

.mobile-nav{
  position:fixed; top:78px; right:0; bottom:0; left:0;
  background:var(--ink);
  z-index:190;
  padding:36px 28px;
  display:none;
  flex-direction:column;
  gap:34px;
  overflow-y:auto;
}
.mobile-nav.is-open{ display:flex; }
.mobile-nav a{
  font-family:var(--display);
  font-size:30px;
  color:var(--snow);
}
.mobile-nav .lang-switch{ align-self:flex-start; }
.mobile-nav .nav-cta{ flex-direction:column; align-items:stretch; gap:14px; }

/* ---------- ГЛАВНЫЙ ЭКРАН ---------- */
.hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  align-items:center;
  padding:150px 0 90px;
  background:
    radial-gradient(ellipse at 82% 12%, rgba(227,93,31,0.20), transparent 55%),
    radial-gradient(ellipse at 8% 92%, rgba(201,154,62,0.13), transparent 50%),
    linear-gradient(180deg, var(--ink) 0%, var(--forest) 130%);
}
.hero-inner{ position:relative; z-index:2; }
.hero .eyebrow{ margin-bottom:26px; }
.hero h1{
  font-size:clamp(40px, 6.6vw, 92px);
  line-height:0.98;
  max-width:19ch;
}
.hero h1 em{
  font-style:italic;
  color:var(--ember-2);
}
.hero-sub{
  margin-top:28px;
  max-width:52ch;
  font-size:clamp(16px,1.6vw,19px);
  color:var(--smoke);
}
.hero-actions{
  margin-top:44px;
  display:flex;
  flex-wrap:wrap;
  gap:16px;
}
/* Три цифры на главном экране (числа анимирует js/main.js) */
.hero-stats{
  margin-top:86px;
  display:grid;
  grid-template-columns:repeat(3,auto);
  gap:52px;
}
.hero-stats div b{
  display:block;
  font-family:var(--display);
  font-size:32px;
  color:var(--snow);
}
.hero-stats div span{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--smoke-dim);
}
.hero-mark{
  position:absolute;
  right:2%;
  top:50%;
  transform:translateY(-50%);
  width:min(32vw,440px);
  height:min(32vw,440px);
  z-index:1;
}
#iris-svg{ width:100%; height:100%; display:block; overflow:visible; }
#iris-blades{
  transform-origin:250px 250px;
  animation:irisRotate 90s linear infinite;
  transition:transform .4s cubic-bezier(.22,.7,.24,1);
}
#iris-core{
  transition:r .4s cubic-bezier(.22,.7,.24,1);
}
@keyframes irisRotate{
  from{ transform:rotate(0deg) scale(1); }
  to{ transform:rotate(360deg) scale(1); }
}
@media (max-width:980px){ .hero-mark{ display:none; } }

/* ---------- ОБЩАЯ ОБОЛОЧКА СЕКЦИЙ: отступы и заголовки ---------- */
.section{ padding:120px 0; position:relative; }
.section-tight{ padding:80px 0; }
.section-head{ max-width:680px; margin-bottom:64px; }
.section-head h2{ font-size:clamp(32px,4vw,52px); margin-top:20px; line-height:1.05; }
.section-head p{ margin-top:20px; color:var(--smoke); font-size:17px; max-width:56ch; }
.on-charcoal{ background:var(--charcoal); }
.on-forest{ background:linear-gradient(180deg,var(--forest),var(--ink)); }

/* ---------- УСЛУГИ ---------- */
.services-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.service-card{
  background:var(--ink);
  padding:44px 40px;
  transition:background .35s var(--ease);
  position:relative;
}
.service-card:hover{ background:var(--ink-2); }
.service-num{
  font-family:var(--mono);
  font-size:12px;
  color:var(--ember-2);
  letter-spacing:0.1em;
}
.service-tag{
  font-family:var(--mono);
  font-size:11px;
  color:var(--smoke-dim);
  letter-spacing:0.14em;
  text-transform:uppercase;
  margin-top:14px;
}
.service-card h3{
  font-size:26px;
  margin-top:14px;
}
.service-price{
  font-family:var(--mono);
  font-size:13px;
  color:var(--gold);
  margin-top:12px;
  display:block;
}
.service-card p{
  margin-top:16px;
  color:var(--smoke);
  font-size:15px;
  line-height:1.65;
}
.service-card .btn{ margin-top:24px; }

/* ---------- О ФУНДАТОРЕ ---------- */
.about-grid{
  display:grid;
  grid-template-columns:0.8fr 1.2fr;
  gap:80px;
  align-items:start;
}
.about-portrait{
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
  border:1px solid var(--line-strong);
  background:var(--charcoal);
}
.about-portrait img{ width:100%;height:100%;object-fit:cover; filter:grayscale(0.15) contrast(1.05); }
.about-portrait .frame-tag{
  position:absolute; left:0; bottom:0; right:0;
  padding:14px 18px;
  background:linear-gradient(0deg,rgba(0,0,0,0.75),transparent);
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.1em;
  color:var(--smoke);
  text-transform:uppercase;
}
.about-copy h2{ font-size:clamp(30px,3.6vw,44px); line-height:1.08; }
.about-copy .lede{ margin-top:22px; font-size:19px; color:var(--snow); font-family:var(--display); font-style:italic; font-weight:400; line-height:1.5; }
.about-copy p{ margin-top:20px; color:var(--smoke); font-size:16px; line-height:1.75; }
.about-values{
  margin-top:36px;
  display:flex;
  gap:36px;
  flex-wrap:wrap;
}
.about-values div{ font-family:var(--mono); font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--gold); padding-left:16px; border-left:1px solid var(--line-strong); }

/* ---------- БЛОКИ АУДИТОРИЙ (3 колонки) ---------- */
.sectors{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.sector-card{ background:var(--ink); padding:40px 34px; }
.sector-card .eyebrow{ margin-bottom:18px; }
.sector-card h3{ font-size:20px; margin-bottom:14px; }
.sector-card p{ color:var(--smoke); font-size:14.5px; line-height:1.7; }

/* ---------- ПРОЕКТЫ ---------- */
.projects{ display:flex; flex-direction:column; }
.project-row{
  display:grid;
  grid-template-columns:120px 1fr auto;
  gap:36px;
  align-items:center;
  padding:38px 0;
  border-top:1px solid var(--line);
  transition:padding-left .35s var(--ease), background .35s var(--ease);
}
.project-row:last-child{ border-bottom:1px solid var(--line); }
.project-row:hover{ background:rgba(227,93,31,0.05); padding-left:16px; }
.project-idx{ font-family:var(--mono); color:var(--smoke-dim); font-size:14px; }
.project-tag{ font-size:11px; }
.project-row h3{ font-size:26px; margin-top:8px; }
.project-row p{ color:var(--smoke); font-size:14.5px; margin-top:10px; max-width:56ch; }
.project-link{
  font-family:var(--mono); font-size:12px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--ember-2); white-space:nowrap; display:inline-flex; align-items:center; gap:8px;
}
.project-link svg{ width:14px;height:14px; transition:transform .3s var(--ease); }
.project-row:hover .project-link svg{ transform:translate(3px,-3px); }

/* ---------- КАРТОЧКИ ШАБЛОНОВ ---------- */
.templates-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:32px;
}
.template-card{
  border:1px solid var(--line);
  background:var(--ink-2);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.template-card:hover{ border-color:var(--line-strong); transform:translateY(-4px); }
.template-shot{
  aspect-ratio:16/11;
  background:linear-gradient(135deg,var(--charcoal),var(--charcoal-2));
  overflow:hidden;
  position:relative;
}
.template-shot img{ width:100%;height:100%;object-fit:cover; object-position:top; transition:transform .5s var(--ease); }
.template-card:hover .template-shot img{ transform:scale(1.04); }
.template-body{ padding:28px 26px 30px; display:flex; flex-direction:column; gap:14px; flex:1; }
.template-body .eyebrow{ font-size:11px; }
.template-body h3, .template-body h2{ font-size:22px; }
.template-body p{ color:var(--smoke); font-size:14.5px; line-height:1.65; flex:1; }
.template-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:6px; }
.template-price{ font-family:var(--mono); font-size:13px; color:var(--gold); }

/* ---------- КОНТАКТЫ ---------- */
.contact-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:70px; }
.contact-card{ border:1px solid var(--line); padding:36px; }
.contact-card + .contact-card{ margin-top:1px; border-top:none; }
.contact-card .eyebrow{ margin-bottom:14px; }
.contact-card a, .contact-card p{ font-size:17px; }
.contact-card a:hover{ color:var(--ember-2); }
.socials{ display:flex; gap:14px; margin-top:22px; }
.socials a{
  width:42px;height:42px;border:1px solid var(--line-strong);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:border-color .25s, color .25s;
}
.socials a:hover{ border-color:var(--ember-2); color:var(--ember-2); }
.socials svg{ width:18px;height:18px; }

.form-field{ margin-bottom:20px; }
.form-field label{
  display:block; font-family:var(--mono); font-size:11.5px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--smoke); margin-bottom:9px;
}
.form-field input, .form-field textarea{
  width:100%;
  background:var(--ink-2);
  border:1px solid var(--line);
  color:var(--snow);
  padding:14px 16px;
  font-family:var(--body);
  font-size:15px;
  border-radius:var(--radius);
  transition:border-color .25s;
}
.form-field input:focus, .form-field textarea:focus{ border-color:var(--ember-2); outline:none; }
.form-field textarea{ resize:vertical; min-height:130px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.form-note{ font-size:12.5px; color:var(--smoke-dim); margin-top:6px; line-height:1.6; }
.form-hp{ position:absolute; left:-9999px; opacity:0; }
#form-status{ margin-top:18px; font-family:var(--mono); font-size:13px; display:none; }
#form-status.ok{ display:block; color:#8fd19e; }
#form-status.err{ display:block; color:#e28080; }

/* ---------- ПОДВАЛ ---------- */
.site-footer{ border-top:1px solid var(--line); padding:80px 0 34px; background:var(--ink); }
.footer-top{ display:grid; grid-template-columns:1.4fr 0.8fr 0.8fr 0.8fr; gap:50px; margin-bottom:70px; }
.footer-brand .logo{ margin-bottom:18px; }
.footer-brand p{ color:var(--smoke); font-size:14.5px; max-width:34ch; line-height:1.7; }
.footer-col h4, .footer-col .footer-title{ font-family:var(--mono); font-size:11.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--smoke-dim); margin-bottom:20px; }
.footer-col ul{ display:flex; flex-direction:column; gap:13px; }
.footer-col a{ font-size:14.5px; color:var(--smoke); transition:color .2s; }
.footer-col a:hover{ color:var(--ember-2); }
.footer-bottom{
  border-top:1px solid var(--line);
  padding-top:28px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:16px;
  font-family:var(--mono);
  font-size:12px;
  color:var(--smoke-dim);
}
.footer-bottom a{ color:var(--smoke-dim); }
.footer-bottom a:hover{ color:var(--ember-2); }
.footer-legal{ display:flex; gap:22px; flex-wrap:wrap; }

/* ---------- БАННЕР COOKIE ---------- */
.cookie-bar{
  position:fixed; left:20px; right:20px; bottom:20px;
  max-width:560px;
  background:var(--charcoal);
  border:1px solid var(--line-strong);
  padding:22px 24px;
  z-index:300;
  display:none;
  gap:16px;
  flex-direction:column;
  box-shadow:0 20px 50px rgba(0,0,0,0.5);
}
.cookie-bar.is-visible{ display:flex; }
.cookie-bar p{ font-size:13.5px; color:var(--smoke); line-height:1.6; }
.cookie-bar a{ color:var(--ember-2); }
.cookie-actions{ display:flex; gap:12px; }

/* ---------- ЮРИДИЧЕСКИЕ СТРАНИЦЫ ---------- */
.legal-page{ padding:170px 0 120px; }
.legal-page h1{ font-size:clamp(32px,4.4vw,50px); max-width:16ch; }
.legal-page .updated{ font-family:var(--mono); font-size:12px; color:var(--smoke-dim); margin-top:16px; }
.legal-body{ margin-top:60px; max-width:760px; }
.legal-body h2{ font-size:22px; margin-top:48px; margin-bottom:16px; color:var(--ember-2); }
.legal-body h2:first-child{ margin-top:0; }
.legal-body p{ color:var(--smoke); font-size:15.5px; line-height:1.85; margin-bottom:16px; }
.legal-body ul{ margin-bottom:16px; }
.legal-body li{ color:var(--smoke); font-size:15.5px; line-height:1.85; padding-left:20px; position:relative; margin-bottom:8px; }
.legal-body li::before{ content:"—"; position:absolute; left:0; color:var(--ember-2); }
.legal-body strong{ color:var(--snow); font-weight:600; }
.legal-body a{ color:var(--ember-2); text-decoration:underline; text-underline-offset:3px; }
.legal-toc{ display:flex; flex-direction:column; gap:10px; margin-top:44px; padding:26px; border:1px solid var(--line); }
.legal-toc a{ font-family:var(--mono); font-size:13px; color:var(--smoke); }
.legal-toc a:hover{ color:var(--ember-2); }

/* ---------- ШАПКА СТРАНИЦЫ ШАБЛОНОВ ---------- */
.page-hero{ padding:170px 0 70px; }
.page-hero h1{ font-size:clamp(38px,5.5vw,70px); max-width:18ch; }
.page-hero p{ margin-top:24px; max-width:60ch; color:var(--smoke); font-size:18px; }

.site-header.is-scrolled{ background:rgba(10,12,11,0.92); }
[id]{ scroll-margin-top:92px; }

[data-media]{ position:relative; }
[data-media].img-missing img{ opacity:0; }
[data-media].img-missing::after{
  content:attr(data-fallback-label);
  position:absolute; top:0; right:0; bottom:0; left:0;
  display:flex; align-items:center; justify-content:center;
  text-align:center; padding:20px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--smoke-dim);
  background:repeating-linear-gradient(115deg, var(--charcoal) 0px, var(--charcoal) 3px, var(--charcoal-2) 3px, var(--charcoal-2) 46px);
}

/* ---------- ПЛАВАЮЩИЕ КНОПКИ: WhatsApp и «наверх» ---------- */
.float-stack{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:250;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}
.float-whatsapp{
  width:60px;height:60px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#25D366;
  box-shadow:0 10px 28px rgba(37,211,102,0.38), 0 0 0 2px rgba(227,93,31,0.55);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
  position:relative;
}
.float-whatsapp::before{
  content:"";
  position:absolute; top:-6px; right:-6px; bottom:-6px; left:-6px;
  border-radius:50%;
  border:1px solid rgba(227,93,31,0.55);
  opacity:0.7;
}
.float-whatsapp svg{ width:30px;height:30px; fill:#ffffff; }
.float-whatsapp:hover{ transform:translateY(-3px) scale(1.05); box-shadow:0 14px 34px rgba(37,211,102,0.48), 0 0 0 2px var(--ember-2); }
.float-whatsapp .wa-ping{
  position:absolute; top:-4px; right:-4px;
  width:16px;height:16px; border-radius:50%;
  background:var(--ember-2);
  border:2px solid var(--ink);
}

.back-to-top{
  width:46px;height:46px;
  border-radius:50%;
  border:1px solid var(--line-strong);
  background:rgba(18,20,18,0.9);
  backdrop-filter:blur(6px);
  color:var(--snow);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  opacity:0;
  transform:translateY(12px);
  pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}
.back-to-top svg{ width:18px;height:18px; }
.back-to-top.is-visible{ opacity:1; transform:translateY(0); pointer-events:auto; }
.back-to-top:hover{ background:var(--ember); border-color:var(--ember); color:#150900; transform:translateY(-3px); }

@media (max-width:640px){
  .float-stack{ right:16px; bottom:16px; gap:12px; }
  .float-whatsapp{ width:54px;height:54px; }
  .float-whatsapp svg{ width:26px;height:26px; }
  .back-to-top{ width:42px;height:42px; }
}

/* ---------- КНОПКА WHATSAPP в карточке контактов ---------- */
.btn-whatsapp{
  background:#25D366;
  color:#0a1f10;
  border-color:#25D366;
}
.btn-whatsapp:hover{ background:#2fe077; border-color:#2fe077; transform:translateY(-2px); }
.btn-whatsapp svg{ width:16px;height:16px; fill:currentColor; }

/* ---------- ПЛАВНОЕ ПОЯВЛЕНИЕ при прокрутке (.reveal) ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .nav-desktop{ display:none; }
  .burger{ display:block; }
  .hero{ padding:130px 0 70px; }
  .hero-stats{ grid-template-columns:1fr; gap:24px; }
  .about-grid{ grid-template-columns:1fr; gap:48px; }
  .about-portrait{ max-width:340px; }
  .services-grid{ grid-template-columns:1fr; }
  .sectors{ grid-template-columns:1fr; }
  .project-row{ grid-template-columns:1fr; gap:12px; }
  .project-link{ margin-top:6px; }
  .contact-grid{ grid-template-columns:1fr; gap:48px; }
  .footer-top{ grid-template-columns:1fr 1fr; gap:40px; }
}
@media (max-width:640px){
  .container{ padding:0 20px; }
  .section{ padding:80px 0; }
  .section-tight{ padding:56px 0; }
  .form-row{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr; gap:36px; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
  .hero-actions .btn{ width:100%; justify-content:center; }
  .cookie-bar{ left:12px; right:12px; bottom:12px; padding:18px; }
  .legal-page{ padding:130px 0 80px; }
  .page-hero{ padding:130px 0 50px; }
}


/* ============================================================
   НОВОЕ В ЭТОЙ ВЕРСИИ (всё ниже добавлено позже, правь свободно)
   ============================================================ */

/* Ссылка «перейти к содержимому» — видна только при навигации с клавиатуры (доступность) */
.skip-link{ position:absolute; left:-9999px; top:8px; z-index:200; background:var(--ember); color:#150900; padding:10px 16px; font-family:var(--mono); font-size:12px; }
.skip-link:focus{ left:8px; }

/* ЭТАПЫ РАБОТЫ: 4 колонки (планшет — 2, телефон — 1) */
.steps{ list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:28px; }
.step{ border-top:1px solid var(--line-strong); padding-top:22px; transition:border-color .3s var(--ease); }
.step:hover{ border-color:var(--ember-2); }
.step-num{ font-family:var(--mono); font-size:13px; color:var(--ember-2); letter-spacing:.1em; }
.step h3{ font-size:24px; margin:12px 0 10px; }
.step p{ color:var(--smoke); font-size:14.5px; line-height:1.7; }

/* FAQ: раскрывающиеся вопросы (тег <details>, JS не нужен) */
.faq{ max-width:860px; }
.faq-item{ border-top:1px solid var(--line); padding:4px 0; }
.faq-item:last-child{ border-bottom:1px solid var(--line); }
.faq-item summary{ cursor:pointer; list-style:none; padding:22px 40px 22px 0; font-family:var(--display); font-size:21px; color:var(--snow); position:relative; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%); font-family:var(--mono); font-size:22px; color:var(--ember-2); transition:transform .3s var(--ease); }
.faq-item[open] summary::after{ transform:translateY(-50%) rotate(45deg); }
.faq-item p{ color:var(--smoke); font-size:15.5px; line-height:1.75; padding:0 40px 24px 0; max-width:70ch; }

/* ПРОЕКТЫ: добавлена колонка со скриншотом (images/project-*.jpg) */
.project-row{ grid-template-columns:50px 260px 1fr auto; }
.project-shot{ aspect-ratio:8/5; overflow:hidden; border:1px solid var(--line); background:var(--charcoal-2); }
.project-shot img{ width:100%; height:100%; object-fit:cover; object-position:top; transition:transform .5s var(--ease); }
.project-row:hover .project-shot img{ transform:scale(1.05); }


@media (max-width:1000px){
  .steps{ grid-template-columns:repeat(2,1fr); }
  .project-row{ grid-template-columns:1fr; gap:18px; }
  .project-shot{ max-width:420px; }
}
@media (max-width:560px){ .steps{ grid-template-columns:1fr; } .faq-item summary{ font-size:18px; } }

/* Галочка согласия под формой (RGPD) */
.form-consent{ display:flex; gap:12px; align-items:flex-start; font-size:13px; color:var(--smoke); line-height:1.6; margin:4px 0 20px; cursor:pointer; }
.form-consent input{ width:18px; height:18px; margin-top:3px; accent-color:var(--ember); flex:none; }
.form-consent a{ color:var(--ember-2); }


/* ============================================================
   ПРАВКИ: кнопки в контактах и плавное наведение в «Проектах»
   ============================================================ */

/* Кнопка «Envoyer un e-mail»: при наведении текст остаётся тёмным и читаемым
   (раньше общее правило .contact-card a:hover красило его в цвет кнопки) */
.contact-card a.btn-primary:hover{ color:#150900; }

/* Кнопка WhatsApp: при наведении буквы белые */
.contact-card a.btn-whatsapp:hover{ color:#ffffff; }

/* ПРОЕКТЫ — плавное наведение БЕЗ «прыжков».
   Причина мигания была в том, что класс .reveal перебивал плавность строки.
   Теперь: ничего не двигается, только плавно меняется цвет (длительность — .5s). */
.project-row.reveal{ transition:opacity .8s var(--ease), transform .8s var(--ease), border-color .5s ease; }
.project-row:hover{ background:transparent; padding-left:0; border-top-color:var(--ember-2); }
.project-row h3{ transition:color .5s ease; }
.project-row:hover h3{ color:var(--ember-2); }
.project-link{ transition:color .5s ease; }
.project-row:hover .project-link{ color:var(--snow); }
.project-row:hover .project-link svg{ transform:none; }
.project-shot img{ transition:filter .5s ease; filter:saturate(.85) brightness(.92); }
.project-row:hover .project-shot img{ transform:none; filter:saturate(1) brightness(1); }

/* МОБИЛЬНАЯ ВЕРСИЯ: форма не должна быть шире экрана (иначе появляется боковой скролл) */
.contact-grid > *{ min-width:0; }
.form-field input, .form-field textarea{ width:100%; min-width:0; }
@media (max-width:980px){ .contact-grid{ grid-template-columns:minmax(0,1fr); gap:40px; } }
@media (max-width:640px){ .form-row{ grid-template-columns:minmax(0,1fr); gap:0; } }


/* ============================================================
   НОВЫЕ СТРАНИЦЫ (Landes / artisan / association) и блок «Clé en main»
   ============================================================ */

/* Хлебные крошки над заголовком страницы */
.breadcrumb{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--smoke-dim); margin-bottom:26px; }
.breadcrumb a{ color:var(--smoke); transition:color .3s; }
.breadcrumb a:hover{ color:var(--ember-2); }

/* Текстовый блок (абзацы с комфортной шириной строки) */
.prose{ max-width:820px; }
.prose h2{ font-size:clamp(28px,3.4vw,42px); line-height:1.1; margin-bottom:22px; }
.prose p{ color:var(--smoke); font-size:17px; line-height:1.8; margin-top:16px; }
.prose a{ color:var(--ember-2); }

/* КЛЮЧ В РУКИ: 4 карточки (на планшете 2, на телефоне 1) */
.cle-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.cle-card{ background:var(--ink-2); padding:34px 28px; transition:background .4s ease; }
.cle-card:hover{ background:var(--charcoal-2); }
.cle-num{ font-family:var(--mono); font-size:13px; color:var(--ember-2); letter-spacing:.1em; }
.cle-card h3{ font-size:22px; margin:14px 0 10px; }
.cle-card p{ color:var(--smoke); font-size:14.5px; line-height:1.7; }

/* Карточки городов / пунктов (2 колонки) */
.city-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.city-card{ border:1px solid var(--line); padding:32px; transition:border-color .4s ease; }
.city-card:hover{ border-color:var(--ember-2); }
.city-card h3{ font-size:26px; margin-bottom:12px; }
.city-card p{ color:var(--smoke); font-size:15px; line-height:1.75; }
.city-more{ margin-top:36px; color:var(--smoke); font-size:16px; line-height:1.8; max-width:860px; }
.city-more strong{ color:var(--snow); font-weight:500; }

/* Карточки-ссылки на другие страницы (перелинковка) */
.link-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.link-card{ display:block; border:1px solid var(--line); padding:32px; transition:border-color .4s ease, background-color .4s ease; }
.link-card:hover{ border-color:var(--ember-2); background:rgba(227,93,31,0.05); }
.link-card h3{ font-size:24px; margin:12px 0 10px; transition:color .4s ease; }
.link-card:hover h3{ color:var(--ember-2); }
.link-card p{ color:var(--smoke); font-size:14.5px; line-height:1.7; }
.link-arrow{ display:inline-block; margin-top:18px; font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ember-2); }

/* Чипы-города на главной */
.chips{ display:flex; flex-wrap:wrap; gap:12px; margin-top:40px; }
.chips a{ font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; padding:11px 18px; border:1px solid var(--line-strong); color:var(--snow); transition:border-color .4s ease, color .4s ease; }
.chips a:hover{ border-color:var(--ember-2); color:var(--ember-2); }

/* Блок с призывом к действию внизу страниц */
.cta-band{ border:1px solid var(--line-strong); padding:56px 48px; text-align:center; }
.cta-band h2{ font-size:clamp(28px,3.6vw,46px); }
.cta-band p{ color:var(--smoke); max-width:56ch; margin:18px auto 30px; font-size:17px; }
.cta-band .hero-actions{ justify-content:center; }

@media (max-width:1000px){ .cle-grid{ grid-template-columns:repeat(2,1fr); } .link-cards{ grid-template-columns:1fr; } }
@media (max-width:700px){ .cle-grid, .city-grid{ grid-template-columns:minmax(0,1fr); } .cta-band{ padding:40px 22px; } .page-hero{ padding-top:130px; } }

/* ПРАВКИ ВЁРСТКИ НОВЫХ СТРАНИЦ */
/* Заголовок H1 на внутренних страницах: плотный межстрочный интервал и больше ширины под длинные заголовки */
.page-hero h1{ line-height:1.06; max-width:22ch; }
/* Текстовый блок выровнен по левому краю контейнера, ширина строк ограничена для удобного чтения */
.container.prose{ max-width:var(--container); }
.prose h2, .prose p{ max-width:820px; }


/* Главная: 4 карточки зон в сетке 2×2 (Landes, Lot-et-Garonne, artisans, associations) */
.link-cards--4{ grid-template-columns:repeat(2,1fr); }
@media (max-width:1000px){ .link-cards--4{ grid-template-columns:1fr; } }


/* ============================================================
   ПРАВКИ v6
   ============================================================ */
/* Главная, блок зон: 6 карточек (3 колонки; планшет — 2; телефон — 1) */
.link-cards--6{ grid-template-columns:repeat(3,1fr); }
@media (max-width:1000px){ .link-cards--6{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .link-cards--6{ grid-template-columns:1fr; } }

/* Главный экран: иконка ключа вместо цифры (цвет и размер — тут) */
.hero-stats b.stat-icon{ display:flex; align-items:center; color:var(--ember-2); height:1.15em; }
.hero-stats b.stat-icon svg{ width:44px; height:44px; }

/* «Visiter le site» в проектах: при наведении светло-зелёный (раньше был белый). Цвет — в строке ниже */
.project-row:hover .project-link{ color:#7bd9a0; }

/* Подписи под цифрами в главном экране: ограничиваем ширину, чтобы длинный текст переносился на 2 строки */
.hero-stats div span{ display:block; max-width:26ch; line-height:1.6; }


/* ============================================================
   v7: тарифы, поддержка, баннеры, движение, чипы городов
   ============================================================ */

/* Иконка ключа — белая, как цифры рядом */
.hero-stats b.stat-icon{ color:var(--snow); }

/* Чипы городов на главной: сетка 5×2 на компьютере, 2 колонки на телефоне — ни один город не остаётся один на строке */
.chips{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.chips a{ text-align:center; padding:12px 10px; }
@media (max-width:1000px){ .chips{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:420px){ .chips a{ font-size:11px; letter-spacing:.04em; padding:12px 6px; } }

/* ТАРИФЫ: 3 карточки; средняя («Recommandé») выделена */
.packs{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch; }
.pack{ position:relative; display:flex; flex-direction:column; border:1px solid var(--line); padding:40px 32px 34px; transition:border-color .4s ease; }
.pack:hover{ border-color:var(--ember-2); }
.pack.is-featured{ border-color:var(--ember-2); background:linear-gradient(180deg,rgba(227,93,31,.09),transparent 65%); }
.pack-badge{ position:absolute; top:-13px; left:32px; background:var(--ember); color:#150900; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; padding:6px 12px; }
.pack h3{ font-size:30px; }
.pack-desc{ color:var(--smoke); font-size:15px; margin-top:6px; }
.pack-price{ font-family:var(--display); font-size:44px; line-height:1; margin:22px 0 4px; color:var(--snow); white-space:nowrap; }
.pack ul{ list-style:none; display:grid; gap:12px; margin:24px 0 32px; }
.pack li{ position:relative; padding-left:28px; color:var(--smoke); font-size:15px; line-height:1.6; }
.pack li::before{ content:""; position:absolute; left:2px; top:.5em; width:11px; height:6px; border-left:2px solid var(--ember-2); border-bottom:2px solid var(--ember-2); transform:rotate(-45deg); }
.pack .btn{ margin-top:auto; justify-content:center; }
.packs-note{ margin-top:30px; max-width:820px; color:var(--smoke); font-size:14px; line-height:1.7; }
.packs-note a{ color:var(--ember-2); }

/* ПОДДЕРЖКА 35 €/мес */
.support{ display:grid; grid-template-columns:1fr 1.35fr; gap:64px; align-items:start; }
.support h2{ font-size:clamp(30px,3.6vw,46px); line-height:1.1; margin:14px 0 18px; }
.support-lead{ color:var(--smoke); font-size:17px; line-height:1.75; }
.support-price{ font-family:var(--display); font-size:64px; line-height:1; margin:30px 0 8px; color:var(--snow); }
.support-price small{ font-family:var(--mono); font-size:15px; color:var(--smoke); }
.support-fine{ color:var(--smoke-dim); font-size:13px; margin-bottom:26px; }
.support-cols{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.support-box{ border:1px solid var(--line); padding:30px 26px; }
.support-box h3{ font-size:22px; margin-bottom:18px; }
.support-box ul{ list-style:none; display:grid; gap:12px; }
.support-box li{ position:relative; padding-left:26px; color:var(--smoke); font-size:14.5px; line-height:1.65; }
.support-box li::before{ content:""; position:absolute; left:2px; top:.5em; width:11px; height:6px; border-left:2px solid var(--ember-2); border-bottom:2px solid var(--ember-2); transform:rotate(-45deg); }
.support-box ul.is-extra li::before{ width:10px; height:0; border-left:0; border-bottom:2px solid var(--smoke-dim); transform:none; top:.8em; }

/* БАННЕР СТРАНИЦЫ (images/zone-*.jpg). Нет файла — блок скрыт целиком */
.page-banner{ aspect-ratio:5/2; overflow:hidden; border:1px solid var(--line); background:var(--charcoal-2); }
.page-banner img{ width:100%; height:100%; object-fit:cover; animation:kenburns 24s ease-in-out infinite alternate; }
.banner-wrap:has(.page-banner.img-missing){ display:none; }
@keyframes kenburns{ from{ transform:scale(1); } to{ transform:scale(1.07); } }

/* Полоска прогресса прокрутки сверху */
.scroll-progress{ position:fixed; top:0; left:0; width:100%; height:3px; transform-origin:0 50%; transform:scaleX(0); background:linear-gradient(90deg,var(--ember),var(--gold)); z-index:300; pointer-events:none; }

/* Свечение карточек за курсором (координаты --mx/--my ставит main.js) */
.spot{ position:relative; overflow:hidden; }
.spot::before{ content:""; position:absolute; inset:0; background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%), rgba(227,93,31,.16), transparent 62%); opacity:0; transition:opacity .45s ease; pointer-events:none; }
.spot:hover::before{ opacity:1; }
.spot > *{ position:relative; z-index:1; }
.pack-badge{ z-index:2; }

@media (max-width:1000px){ .packs{ grid-template-columns:1fr; max-width:560px; } .support{ grid-template-columns:1fr; gap:40px; } }
@media (max-width:640px){ .support-cols{ grid-template-columns:1fr; } .pack{ padding:36px 24px 30px; } .support-price{ font-size:52px; } .page-banner{ aspect-ratio:16/10; } }

/* Пользователям с отключёнными анимациями — без движения */
@media (prefers-reduced-motion:reduce){
  .band .band-track, .band .band-track.is-ready{ animation:none; }
  .scroll-progress{ display:none; }
}

/* Бейдж «Recommandé» должен оставаться поверх карточки (правило .spot > * его сбивало) */
.spot > .pack-badge, .pack-badge{ position:absolute; }
.pack.spot{ overflow:visible; }  /* чтобы бейдж «Recommandé» не обрезался сверху */


/* ============================================================
   v8: фон шапки страниц-регионов (картинка images/zone-*.jpg), без движения
   ============================================================ */
.page-hero{ position:relative; overflow:hidden; isolation:isolate; }
.page-hero > .container{ position:relative; z-index:1; }
/* Слой с картинкой лежит под текстом */
.hero-bg{ position:absolute; inset:0; z-index:-1; }
.hero-bg img{ width:100%; height:100%; object-fit:cover;
  filter:blur(2px) brightness(.5) saturate(1.05);   /* размытие и затемнение картинки: меняй blur(…) и brightness(…) */
  transform:scale(1.04); }                           /* лёгкое увеличение, чтобы края не просвечивали после размытия */
/* Тёмный градиент: слева темнее (там текст), внизу плавно переходит в фон страницы */
.hero-bg::after{ content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(10,12,11,.88) 0%, rgba(10,12,11,.55) 55%, rgba(10,12,11,.30) 100%),
    linear-gradient(180deg, rgba(10,12,11,.55) 0%, transparent 28%, transparent 62%, var(--ink) 100%); }
/* Нет файла картинки — слой скрывается, шапка остаётся как раньше */
.hero-bg.img-missing{ display:none; }
.page-hero:has(.hero-bg:not(.img-missing)) p{ color:#e2dccf; }

/* Блок «Méthode»: убираем стандартный отступ списка, чтобы этапы начинались на одной линии с заголовком */
.steps{ padding:0; margin:0; }


/* ЗАГОЛОВОК ГЛАВНОГО ЭКРАНА: ограничиваем ширину, чтобы длинный текст не заходил на эмблему справа (13.2ch ≈ 650px на компьютере) */
.hero h1{ max-width:13.2ch; }
@media (max-width:900px){ .hero h1{ max-width:100%; } }

/* HERO-INNER НА ВСЮ ШИРИНУ: текст главного экрана выравнивается по левому краю сайта (как логотип), а не «плавает» по центру */
.hero-inner{ width:100%; }


/* ============================================================
   v11 (обе темы): стабильное наведение и зелёные кнопки «Visiter le site»
   ============================================================ */
/* Кнопки больше не «подпрыгивают» при наведении — иначе у нижней границы они мигали. Эффект теперь — тень */
.btn:hover, .btn-primary:hover, .btn-ghost:hover{ transform:none; }
.btn-primary:hover{ box-shadow:0 10px 26px -10px rgba(227,93,31,.7); }
.float-whatsapp:hover{ transform:scale(1.05); }
/* «Visiter le site» в проектах: при наведении яркая зелёная плашка. Цвета меняй здесь: */
:root{ --link-hover-bg:#2fd47a; --link-hover-text:#06210f; }
.project-link{ padding:9px 14px; margin:-9px 0 -9px -14px; border-radius:2px; transition:background .35s ease, color .35s ease; }
.project-row:hover .project-link{ background:var(--link-hover-bg); color:var(--link-hover-text); }


/* ============================================================
   v12 (обе темы): удобство на телефоне
   ============================================================ */
@media (max-width:900px){
  /* Текст в полях формы 16px: иначе iPhone приближает страницу при вводе */
  .form-field input, .form-field textarea, .form-field select{ font-size:16px; }
  /* Ссылки в подвале: область нажатия не меньше ~40px (раньше была 17px) */
  .site-footer li > a, .site-footer .footer-col a{ display:inline-block; padding:10px 0; }
  .footer-bottom a{ display:inline-block; padding:12px 8px; }   /* ссылки внизу (Mentions légales, CGV...) тоже удобно нажимать пальцем */
}

/* Заголовки подвала — это абзацы с классом .footer-title (не h4): так порядок заголовков на странице правильный для SEO.
   Во всех страницах-списках заголовок карточки модели — h2. Вид остался прежним. */
.footer-col .footer-title{ font-family:var(--mono); font-weight:500; }
.footer-col .footer-title{ margin-top:0; }


/* ============================================================
   v13: плавность, мобильное меню, кнопка WhatsApp, часовые шестерёнки
   ============================================================ */

/* --- ПОЛОСЫ ТИГРА на главном экране: плавное движение без нагрузки.
       Раньше полосы рисовались огромным вращающимся слоем, из-за чего на телефонах было ~5 кадров/с.
       Теперь это готовая наклонная картинка images/tiger-stripes.svg, которая просто плавно сдвигается на видеокарте
       (сдвиг ровно на один период рисунка — цикл бесшовный). Скорость — длительность 10s (больше = медленнее). --- */
.stripes-bg::before{ top:0; left:0; right:auto; bottom:auto; width:2200px; height:1300px; margin:0; transform:none;
  background:url("../images/tiger-stripes.svg") no-repeat 0 0 / 2200px 1300px;
  will-change:transform; animation:stripesDrift 10s steps(120) infinite; }
@keyframes stripesDrift{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-116.55px,-61.97px,0); } }
@media (max-width:900px){
  .site-header, .site-header.is-scrolled{ -webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(10,12,11,.96); }  /* на телефоне шапка без размытия — быстрее */
  .back-to-top{ -webkit-backdrop-filter:none; backdrop-filter:none; }
}

/* --- БУРГЕР: привычные три полоски (раньше верхняя и нижняя «схлопывались» из-за неверных отступов) --- */
.burger span, .burger span::before, .burger span::after{ height:2px; border-radius:2px; }
.burger span{ left:12px; right:12px; }
.burger span::before, .burger span::after{ left:0; right:0; }
.burger span::before{ top:-7px; }
.burger span::after{ top:7px; }

/* --- МОБИЛЬНОЕ МЕНЮ: оранжевая кнопка внизу — обычный размер текста (раньше наследовала 30px от ссылок меню) --- */
.mobile-nav .nav-cta{ width:100%; }
.mobile-nav .btn{ font-family:var(--mono); font-size:13px; letter-spacing:.08em; padding:18px 16px; width:100%; box-sizing:border-box; justify-content:center; text-align:center; white-space:normal; }

/* --- КНОПКА WHATSAPP в блоке контактов: не выходит за рамки карточки --- */
.contact-card .btn{ max-width:100%; box-sizing:border-box; justify-content:center; text-align:center; white-space:normal; }
@media (max-width:640px){ .contact-card{ padding:26px 20px; } }

/* --- ЧАСОВЫЕ ШЕСТЕРЁНКИ в блоке «Support technique» (тонкие контурные, как механизм часов) ---
   Две сцепленные шестерёнки вращаются в разные стороны. Большая обрезана краем экрана. Файлы: images/gear-watch-big.svg, gear-watch-small.svg.
   Цвет и толщина линий — внутри SVG-файлов (stroke, stroke-opacity, stroke-width). Скрыты на телефонах. */
#support{ position:relative; overflow:hidden; }
#support > .container{ position:relative; z-index:1; }
#support::before, #support::after{ content:""; position:absolute; z-index:0; pointer-events:none; background-repeat:no-repeat; background-size:100% 100%; will-change:transform; }
#support::before{ width:540px; height:540px; right:-320px; top:-120px; background-image:url("../images/gear-watch-big.svg"); animation:gearWatchA 240s linear infinite; }
#support::after{ width:297px; height:297px; right:10px; top:300px; background-image:url("../images/gear-watch-small.svg"); animation:gearWatchB 120s linear infinite; }
@keyframes gearWatchA{ from{ transform:rotate(125deg); }   to{ transform:rotate(485deg); } }
@keyframes gearWatchB{ from{ transform:rotate(12.5deg); }  to{ transform:rotate(-347.5deg); } }
.support-box{ background:rgba(10,12,11,.78); }   /* карточки слегка затемнены, чтобы линии шестерёнок не мешали тексту */
@media (max-width:900px){ #support::before, #support::after{ display:none; } }
@media (prefers-reduced-motion:reduce){ .stripes-bg::before, #support::before, #support::after{ animation:none; } }