/* ====== ШРИФТЫ ====== */
@font-face{
    font-family: "Montserrat";
    src: url("../fonts/Montserrat-VariableFont_wght.ttf") format("truetype");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
  }
  @font-face{
    font-family: "Montserrat";
    src: url("../fonts/Montserrat-Italic-VariableFont_wght.ttf") format("truetype");
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
  }
  @font-face{
    font-family: "Tenor Sans";
    src: url("../fonts/TenorSans-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  
  /* ====== ПЕРЕМЕННЫЕ ФОНОВ ====== */
  :root{
    --hero-bg:        url("../img/hero.jpg");
    --about-top-bg:   url("../img/team-group.jpg");
    --about-mid-bg:   url("../img/world-map.jpg");
    --about-bot-bg:   url("../img/teeth-closeup.jpg");
    --leaders-bg:     url("../img/leaders.jpg");
    --how-hero-bg: url("../img/how-hero-teeth.jpg");
    --how-resto-hero-bg: url("../img/how-resto-teeth.jpg");
    --price-hero-bg: url("../img/price-hero.jpg");
    --bnf-top: url("../img/benefits-top.jpg");   
    --bnf-bot: url("../img/benefits-bottom.jpg");
    --tech-hero-bg: url("/assets/img/tech/hero-grid.jpg");
    --tech-foot-bg: var(--tech-hero-bg);
    --tech-cad-bg:       url("/assets/img/tech/cadcam.jpg");
    --tech-smile-bg:     url("/assets/img/tech/smilecloud.jpg");
    --tech-micron-bg:    url("/assets/img/tech/micron.jpg");
    --tech-optishade-bg: url("/assets/img/tech/optishade.jpg");
    --tech-print-bg:     url("/assets/img/tech/3dprint.jpg");
  }
  
  /* ====== БАЗА ====== */
  *{ box-sizing: border-box }
  html,body{ height:100% }
  html{ scroll-behavior:smooth; scroll-snap-type:y proximity; }
  
  body{
    margin:0;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    font-family:"Montserrat",system-ui,-apple-system,Arial,sans-serif;
    color:#fff;
  }
  
  /* ====== ГЕРО-СЕКЦИЯ ====== */
  .screen_hero{
    --bg: var(--hero-bg);
    min-height:100svh;
    display:grid; place-items:center;
    background:
      linear-gradient(rgba(0,0,0,.38), rgba(0,0,0,.38)),
      var(--bg) center/cover no-repeat fixed;
    position:relative;
    scroll-snap-align:start;
  }
  .overlay{ position:absolute; inset:0; background:rgba(0,0,0,.45); }
  .wrap{
    position:relative; z-index:1; width:100%;
    min-height:100svh;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center;
  }
  .hero_title{
    font-family:"Tenor Sans","Montserrat",system-ui,-apple-system,Arial,sans-serif;
    margin:0; font-weight:400;
    font-size:clamp(42px,10vw,96px);
    line-height:1; letter-spacing:0;
    text-shadow:0 6px 18px rgba(0,0,0,.35);
  }
  .hero_sub{
    font-family:"Montserrat",system-ui,-apple-system,Arial,sans-serif;
    font-weight:300; font-size:clamp(16px,3.6vw,22px); margin:0 0 30px;
  }
  .hero_card{
    width: min(92vw, 420px);
    height: clamp(220px, 44vh, 360px);
    border-radius: 16px;
    overflow: hidden;              
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
    /* если нужен цветной бордер вокруг: */
    /* padding: 4px; background: rgba(141,85,85,.85); */
  }
  
  .hero_gif{
    display:block;
    width:100%;
    height:100%;
    object-fit: cover;             
  }
  .hero_tagline{ font-family:"Montserrat",system-ui,-apple-system,Arial,sans-serif; font-weight:300; font-size:clamp(14px,3.4vw,18px); }
  
  /* ====== 2-Й ЭКРАН (3 ПАНЕЛИ) ====== */
  .screen-about{
    min-height:100svh;
    display:grid;
    grid-template-rows: 1.1fr 0.7fr 0.9fr;
    scroll-snap-align:start;
  }
  .about-row{
    position:relative;
    display:grid;
    align-items:center;
    padding:clamp(16px,4vw,48px);
    color:#fff;
    background:
      linear-gradient(rgba(0,0,0,.28), rgba(0,0,0,.28)),
      var(--bg, none) center/cover no-repeat;
    overflow:hidden;
  }
  .about-row--top{ --bg: var(--about-top-bg); }
  .about-row--mid{ --bg: var(--about-mid-bg); }
  .about-row--bot{ --bg: var(--about-bot-bg); }
  
  /* декоративные полосы сверху/снизу (опционально) */
  .about-row::before,.about-row::after{
    content:""; position:absolute; left:0; right:0; height:6px; background:rgba(0,0,0,.35);
  }
  .about-row::before{ top:0 } .about-row::after{ bottom:0 }
  
  /* заголовки/текст внутри панелей */
  .title-xl{
    font-family:"Tenor Sans","Montserrat",system-ui,-apple-system,Arial,sans-serif;
    font-weight:400; margin:0;
    font-size:clamp(36px,6.2vw,72px);
    line-height:1.05; text-shadow:0 6px 24px rgba(0,0,0,.45);
  }
  .title-l{
    font-family:"Tenor Sans","Montserrat",system-ui,-apple-system,Arial,sans-serif;
    font-weight:400; margin:0;
    font-size:clamp(28px,5.2vw,56px);
    line-height:1.05; text-shadow:0 6px 24px rgba(0,0,0,.45);
  }
  .about-title{ justify-self:center; align-self:start; margin-top:clamp(16px,6vh,40px); }
  .about-text{
    justify-self:start; align-self:center; text-align:left; max-width:18ch;
    font:400 clamp(26px,5.2vw,48px)/1.05 "Tenor Sans","Montserrat",system-ui,-apple-system,Arial,sans-serif;
    margin:0; text-shadow:0 6px 24px rgba(0,0,0,.45);
  }
  .about-kicker.center{ justify-self:center; text-align:center; }
  .about-kicker.right { justify-self:end;    text-align:right;  }
  

  .screen-leaders{
    --bg: var(--leaders-bg);
    min-height: 100svh;
    position: relative;
    display: grid;
    place-items: start center;
    padding: clamp(16px, 4vw, 48px);
    background:
      linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.30)),
      var(--bg) center/cover no-repeat;
    scroll-snap-align: start;
  }
  
  /* лёгкая дымка по бокам (как на рефе) */
  .screen-leaders::before,
  .screen-leaders::after{
    content:"";
    position:absolute; inset:0;
    background:
      radial-gradient(40% 35% at 15% 85%, rgba(255,255,255,.16), transparent 60%),
      radial-gradient(40% 35% at 85% 85%, rgba(255,255,255,.16), transparent 60%);
    pointer-events:none;
  }
  
  .leaders-wrap{
    width:min(1100px, 94vw);
    display:grid;
    row-gap: clamp(16px, 2.8vh, 28px);
    /* сверху — чуть больше воздуха */
    padding-top: clamp(12px, 4vh, 36px);
  }
  
  /* Заголовок сверху */
  .title-xxl{
    font-family:"Tenor Sans","Montserrat",system-ui,-apple-system,Arial,sans-serif;
    font-weight:400; margin:0 0 clamp(8px, 2vh, 16px);
    text-align:center;
    font-size:clamp(36px, 6.8vw, 84px);
    line-height:1.05;
    text-shadow:0 6px 24px rgba(0,0,0,.45);
  }
  
  /* Имена — чуть жирнее и с тенью */
  .leaders-names{
    text-align:center;
    margin:0;
    font-family:"Montserrat",system-ui,-apple-system,Arial,sans-serif;
    font-weight:700;
    font-size:clamp(20px, 4.6vw, 42px);
    line-height:1.1;
    text-shadow:0 6px 18px rgba(0,0,0,.55);
  }
  
  /* Три абзаца */
  .leaders-text{
    margin:0;
    font-family:"Tenor Sans","Montserrat",system-ui,-apple-system,Arial,sans-serif;
    font-weight:400;
    font-size:clamp(18px, 4.8vw, 40px);
    line-height:1.15;
    text-shadow:0 6px 24px rgba(0,0,0,.5);
    max-width: 26ch;                 /* аккуратная ширина строки */
  }
  .leaders-text.left   { text-align:left;   }
  .leaders-text.center { text-align:center; justify-self:center; }
  .leaders-text.right  { text-align:right;  justify-self:end; }
  
  /* Мягкая «подсветка» под текстом */
  .halo{ position:relative; }
  .halo::before{
    content:""; position:absolute; inset:-8px -10px;
    background: radial-gradient(120% 120% at 50% 50%, rgba(255,255,255,.14), transparent 60%);
    filter: blur(10px);
    z-index:-1;
    pointer-events:none;
  }

  /* ===== How it works — For planning ===== */
.screen-how{
    --bg: #000;                           /* общий фон секции */
    min-height:100svh;
    background: var(--bg);
    color:#fff;
    scroll-snap-align:start;
    display:flex; flex-direction:column;
    gap: clamp(12px, 2vh, 24px);
    padding: clamp(16px, 4vw, 40px);
    position:relative;
  }
  
  /* Верхняя шапка с зубами */
  .how-hero{
    min-height: clamp(180px, 34svh, 320px);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; margin-bottom: clamp(8px, 2vh, 16px);
    background:
      linear-gradient(to bottom, rgba(0,0,0,.06) 10%, rgba(0,0,0,.55) 95%),
      var(--how-hero-bg) center top / cover no-repeat;
  }
  /* Заголовки в шапке */
  .how-title{
    font-family:"Tenor Sans","Montserrat",system-ui,-apple-system,Arial,sans-serif;
    font-weight:400; margin:0;
    font-size: clamp(32px, 6.6vw, 72px);
    line-height:1.05;
    text-shadow:0 4px 18px rgba(0,0,0,.5);
  }
  .how-sub{
    font-family:"Montserrat",system-ui,-apple-system,Arial,sans-serif;
    font-weight:700; margin:.2em 0 0;
    font-size: clamp(18px, 3.8vw, 28px);
    text-shadow:0 4px 18px rgba(0,0,0,.5);
  }
  
  /* Подписи блоков */
  .how-caption{
    font-family:"Tenor Sans","Montserrat",system-ui,-apple-system,Arial,sans-serif;
    font-weight:400; margin: clamp(6px,1.4vh,10px) 0;
    font-size: clamp(20px, 4.8vw, 32px);
  }
  
  /* Сетка карточек */
  .how-grid{
    display:grid; gap: clamp(10px, 2vw, 20px);
  }
  
  /* верхняя сетка: 4 квадрата */
  .how-grid.how-from{
    grid-template-columns: repeat(4, 1fr);
  }
  @media (max-width: 980px){ .how-grid.how-from{ grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 520px){ .how-grid.how-from{ grid-template-columns: 1fr; } }
  
  /* нижняя сетка: 2 широких */
  .how-grid.how-our{
    grid-template-columns: repeat(2, 1fr);
  }
  @media (max-width: 720px){ .how-grid.how-our{ grid-template-columns: 1fr; } }
  
  /* Карточки */
  .how-item{
    background: radial-gradient(120% 120% at 10% 10%, rgba(255,255,255,.06), transparent 50%),
                rgba(255,255,255,.04);
    border-radius: 10px;
    padding: clamp(8px, 1.2vw, 12px);
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
  }
  .how-item.wide .how-img{ aspect-ratio: 4 / 3; }
  .how-img{
    width:100%; aspect-ratio: 1 / 1; object-fit: cover;
    border-radius: 6px; display:block;
  }
  
  /* Подписи под картинками */
  .how-note{
    margin:.6em 0 0;
    font-family:"Tenor Sans","Montserrat",system-ui,-apple-system,Arial,sans-serif;
    font-weight:400;
    font-size: clamp(14px, 3.6vw, 22px);
    line-height:1.15;
    text-shadow:0 4px 14px rgba(0,0,0,.5);
  }
  
  /* Ссылка How to? */
  .how-link{
    color:#9fd0ff; text-decoration:underline;
    font-family:"Montserrat",system-ui,-apple-system,Arial,sans-serif;
    font-weight:600; white-space:nowrap;
  }
  .how-link:hover{ text-decoration:none; }
  
  /* Бейдж GIF */
  .how-badge{
    position:absolute; top:10px; left:14px;
    padding:.1em .4em; border-radius:6px;
    background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.35);
    font: 700 clamp(10px, 2.8vw, 18px)/1 "Montserrat",system-ui,-apple-system,Arial,sans-serif;
    letter-spacing:.08em;
  }
  
  /* Стрелка вниз */
  .how-arrow{
    margin: clamp(10px, 3vh, 24px) auto 0;
    font-size: clamp(22px, 6vw, 36px);
    opacity:.9;
  }
  

  /* ====== ОБЩИЕ СЕКЦИИ (экраны 3–5) ====== */
  .screen{
    min-height:100svh; display:grid; place-items:center;
    padding:clamp(16px,4vw,48px);
    background:
      linear-gradient(rgba(0,0,0,.28), rgba(0,0,0,.28)),
      var(--bg) center/cover no-repeat;
    scroll-snap-align:start;
  }

.screen-how.permanent .how-hero{
  position: relative;
  background: none !important;
  overflow: hidden;
  min-height: clamp(180px, 34svh, 320px);
  display:flex; align-items:center; justify-content:center; text-align:center;
  margin-bottom: clamp(8px, 2vh, 16px);
}
/* сам фон: якорь справа, зеркалим и остаёмся прижатыми к правой кромке */
.screen-how.permanent .how-hero .how-bg{
  position:absolute; inset:0; z-index:0;
  background: var(--how-resto-hero-bg) right center / cover no-repeat;
  transform: scaleX(-1);
  transform-origin: right center;
}
/* затемнение поверх */
.screen-how.permanent .how-hero::after{
  content:""; position:absolute; inset:0; z-index:1;
  background: linear-gradient(to bottom, rgba(0,0,0,.12) 10%, rgba(0,0,0,.62) 95%);
}
/* текст над всем */
.screen-how.permanent .how-hero > .how-title,
.screen-how.permanent .how-hero > .how-sub{ position:relative; z-index:2; }

/* сетка: 3 карточки сверху */
.screen-how.permanent .how-grid.how-from{ grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px){ .screen-how.permanent .how-grid.how-from{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .screen-how.permanent .how-grid.how-from{ grid-template-columns: 1fr; } }
  
  /* буллет-лист */
  .how-bullets{
    margin: clamp(8px, 1.6vh, 14px) 0 clamp(10px, 2vh, 18px) 1.2rem;
    padding-left: 1rem;
    list-style: disc;
  }
  .how-bullets li{
    margin: .35em 0;
    font-family:"Tenor Sans","Montserrat",system-ui,-apple-system,Arial,sans-serif;
    font-weight:400;
    font-size: clamp(14px, 3.4vw, 22px);
    line-height: 1.2;
    text-shadow: 0 4px 14px rgba(0,0,0,.5);
  }
  
  /* сноска внизу */
  .how-footnote{
    margin: clamp(8px, 2vh, 16px) 0 0;
    font-family:"Montserrat",system-ui,-apple-system,Arial,sans-serif;
    font-weight:300;
    font-size: clamp(12px, 3vw, 16px);
    opacity:.9;
    text-align:left;
  }

  /* ===== Prices screen ===== */
.screen-price{
    background:#000;
    color:#fff;
    scroll-snap-align:start;
    display:grid;
    grid-template-rows:auto auto 1fr auto;
    gap:clamp(10px,2vh,18px);
    padding:0 0 clamp(18px,4vw,28px);
    overflow:hidden;                /* ничего не «вылезает» на мобиле */
  }
  
  /* Верхняя шапка с зубами */
  .price-hero{
    position:relative;
    min-height:clamp(180px,40svh,380px);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; isolation:isolate;
  }
  .price-hero::before{
    content:"";
    position:absolute; inset:0;
    background:
      linear-gradient(to bottom, rgba(0,0,0,.05) 20%, rgba(0,0,0,.86) 85%),
      var(--price-hero-bg) center top / cover no-repeat;
    z-index:-1;
  }
  .price-brand{
    font-family:"Tenor Sans","Montserrat",system-ui;
    font-weight:400;
    font-size:clamp(42px,8.8vw,92px);
    line-height:1; margin:0;
    text-shadow:0 8px 26px rgba(0,0,0,.5);
  }
  .price-sub{
    font-family:"Montserrat",system-ui;
    font-weight:300; margin:.2em 0 0;
    font-size:clamp(18px,3.8vw,32px);
    text-shadow:0 6px 20px rgba(0,0,0,.5);
  }
  
  /* Таблица цен */
  .price-table{
    width:min(1100px,92vw);
    margin:0 auto;
    display:grid;
    gap:10px;
  }
  .price-head{
    display:grid; grid-template-columns: 1fr auto;
    align-items:end;
    font:700 clamp(16px,3.6vw,28px)/1.1 "Montserrat",system-ui;
    letter-spacing:.02em;
  }
  .price-head .col-service{ justify-self:start; }
  .price-head .col-price{ justify-self:end; text-align:right; }
  
  /* Заголовки секций */
  .price-section{
    margin:14px 0 4px;
    font:700 clamp(16px,3.8vw,28px)/1.1 "Montserrat",system-ui;
  }
  
  /* Строки с ценами */
  .price-row{
    display:grid; grid-template-columns: 1fr auto;
    gap:12px; align-items:center;
    padding:12px 0;
    border-bottom:1px solid rgba(255,255,255,.12);
  }
  .price-row > :first-child{
    font:400 clamp(15px,3.6vw,24px)/1.2 "Montserrat",system-ui;
  }
  .price-row > :last-child{
    font:700 clamp(16px,3.6vw,26px)/1 "Montserrat",system-ui;
    text-align:right;
  }
  
  /* Подвал с адресом/телефонами */
  .price-footer{
    width:min(1100px,92vw);
    margin: clamp(14px,3vh,24px) auto 0;
    display:flex; flex-wrap:wrap; gap:8px 16px; justify-content:center;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.18);
    border-radius:14px;
    padding:10px 14px;
    backdrop-filter: blur(6px);
    font:300 clamp(12px,3.2vw,16px)/1.3 "Montserrat",system-ui;
  }
  .price-footer .pf-item{ white-space:normal; text-align:center; }
  @media (min-width:760px){
    .price-footer{ justify-content:space-between; }
    .price-footer .pf-item{ text-align:left; }
  }

  /* ===== With us you get ===== */
.screen-benefits{
    position:relative;
    min-height:100svh;
    background:#000;
    color:#fff;
    scroll-snap-align:start;
    overflow:hidden;
  }
  
  /* картинка зубов сверху */
  .screen-benefits::before{
    content:"";
    position:absolute; left:0; right:0; top:0;
    height:min(42vh, 360px);                 /* сколько «занимают» сверху */
    background: var(--bnf-top) center top / cover no-repeat;
    z-index:0;
  }
  
  /* картинка зубов снизу */
  .screen-benefits::after{
    content:"";
    position:absolute; left:0; right:0; bottom:0;
    height:min(42vh, 380px);                 /* сколько «занимают» снизу */
    background: var(--bnf-bot) center bottom / cover no-repeat;
    z-index:0;
  }
  
  /* мягкая дымка/виниьетка — чтобы текст читался на любом фоне */
  .bnf-fog{
    position:absolute; inset:0; z-index:1; pointer-events:none;
    background:
      radial-gradient(45% 50% at 18% 35%, rgba(0,0,0,.55), transparent 60%),
      radial-gradient(45% 50% at 78% 72%, rgba(0,0,0,.55), transparent 60%),
      linear-gradient(to bottom, rgba(0,0,0,.60) 0 18%, rgba(0,0,0,.25) 40%,
                                   rgba(0,0,0,.25) 60%, rgba(0,0,0,.70) 100%);
  }
  
  /* контент */
  .bnf-wrap{
    position:relative; z-index:2;
    width:min(1100px, 92vw);
    margin:0 auto;
    display:flex; flex-direction:column; gap:clamp(18px,4vh,36px);
    /* отступы от верхней/нижней картинки */
    padding-top: clamp(40px, 18vh, 180px);
    padding-bottom: clamp(40px, 18vh, 180px);
  }
  
  .bnf-title{
    font-family:"Tenor Sans","Montserrat",system-ui;
    font-weight:400; margin:0;
    font-size:clamp(38px, 10.5vw, 110px);
    line-height:1.02;
    text-shadow:0 8px 24px rgba(0,0,0,.45);
  }
  
  .bnf-block{ max-width: 60ch; }
  
  .bnf-sub{
    margin:.4em 0 .2em;
    font:800 clamp(22px, 5.2vw, 44px)/1.08 "Montserrat",system-ui;
  }
  
  .bnf-text{
    margin:0;
    font:400 clamp(14px, 3.8vw, 22px)/1.3 "Montserrat",system-ui;
    opacity:.98;
  }
  

  /* ===== Contacts screen ===== */
.screen-contacts{
    position: relative;
    min-height: 100svh;
    padding: clamp(20px, 6vw, 56px);
    background: #000;
    color: #fff;
    scroll-snap-align: start;
    display: grid;
    place-items: start center;
  }
  
  .screen-contacts .cnt-fog{
    position: absolute; inset: 0; pointer-events: none;
    background:
      radial-gradient(60% 40% at 50% 10%, rgba(255,255,255,.14), transparent 60%),
      radial-gradient(70% 50% at 20% 70%, rgba(255,255,255,.10), transparent 60%),
      radial-gradient(70% 50% at 80% 90%, rgba(255,255,255,.10), transparent 60%);
    filter: blur(2px);
    opacity: .9;
  }
  
  .cnt-wrap{ width:min(1200px, 94vw); position: relative; z-index: 1; }
  
  .cnt-title{
    font-family:"Tenor Sans","Montserrat",system-ui,-apple-system,Arial,sans-serif;
    font-weight:400; margin: 0 0 clamp(24px, 6vh, 48px);
    line-height: 1.05; letter-spacing:.02em;
    font-size: clamp(40px, 8vw, 88px);
    text-align: center;
  }
  
  .cnt-list{ list-style:none; margin:0; padding:0; display:grid; gap: clamp(18px, 3vh, 28px); }
  
  .cnt-link{
    display:flex; align-items:center; gap: clamp(14px, 2vw, 22px);
    text-decoration:none; color:#fff;
    padding: clamp(6px, 1vw, 10px) clamp(6px, 1vw, 10px);
    border-radius: 14px;
    transition: background .2s ease;
  }
  .cnt-link:hover{ background: rgba(255,255,255,.06); }
  
  .cnt-ico{
    width: clamp(48px, 8vw, 64px); height: clamp(48px, 8vw, 64px);
    display:grid; place-items:center;
    border-radius: 12px;
    background: rgba(255,255,255,.10);
    box-shadow: 0 6px 18px rgba(0,0,0,.35) inset;
  }
  .cnt-ico img{
    width: 70%; height: 70%; object-fit: contain; display:block;
    /* если иконки тёмные, можно подсветлить так: filter: invert(1) brightness(1.2); */
  }
  
  .cnt-text{
    font-family:"Montserrat",system-ui,-apple-system,Arial,sans-serif;
    font-weight: 500;
    font-size: clamp(18px, 3.6vw, 28px);
    line-height: 1.2;
    letter-spacing:.01em;
  }
  .cnt-text.underline{ text-decoration: underline; text-underline-offset: .18em; }
  
  /* чуть плотнее на узких экранах */
  @media (max-width: 520px){
    .cnt-title{ text-align:left; }
    .cnt-link{ padding: 6px 8px; }
  }
  
  
  
  .screen.left  { text-align:left;  place-items:center start; }
  .screen.right { text-align:right; place-items:center end;   }
  .screen.center{ text-align:center; place-items:center center; }
  
  html { scroll-behavior:smooth; }

/* Нав-точки */
.dots{
  position:fixed; right:12px; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:10px;
  z-index:1000; pointer-events:auto;
}
.dots a{
  width:10px; height:10px; border-radius:50%;
  background:rgba(255,255,255,.35);
  border:1px solid rgba(255,255,255,.55);
  display:block; opacity:.7;
  transition:transform .2s, opacity .2s, background .2s;
}
.dots a:hover{ transform:scale(1.2); opacity:1; }
.dots a.is-active{
  background:#fff; opacity:1;
  box-shadow:0 0 0 3px rgba(255,255,255,.15);
}
@media (max-width:720px){
  .dots{ right:6px; gap:8px; }
  .dots a{ width:8px; height:8px; }
}
/* ===== Technologies ===== */
.screen-tech{
    min-height:100svh;
    display:grid;
    grid-template-rows:
      minmax(140px, 28svh)         /* hero */
      repeat(5, minmax(160px, 24svh))
      minmax(80px, 18svh);         /* bottom band */
    scroll-snap-align:start;
    background:#000;
  }
  
  .tech-band{
    position:relative;
    display:flex;
    align-items:center;
    padding: clamp(12px, 4vw, 40px);
    color:#fff;
    overflow:hidden;
    /* общий лёгкий оверлей */
    background:
      linear-gradient(rgba(0,0,0,.18), rgba(0,0,0,.24)),
      var(--bg, none) center/cover no-repeat;
  }
  
  /* 1 и 7 — одинаковый фон */
  .tech-hero{ --bg: var(--tech-hero-bg); justify-content:center; }
  .tech-foot{ --bg: var(--tech-foot-bg);  opacity:.9; }
  
  /* полосы 2–6 */
  .tech-row--cad{        --bg: var(--tech-cad-bg); }
  .tech-row--smile{      --bg: var(--tech-smile-bg); }
  .tech-row--micron{     --bg: var(--tech-micron-bg); }
  .tech-row--optishade{  --bg: var(--tech-optishade-bg); }
  .tech-row--print{      --bg: var(--tech-print-bg); }
  
  /* контент в полосе */
  .tech-content{
    width:min(1200px, 96%);
    margin-inline:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: clamp(14px, 4vw, 40px);
  }
  .tech-content.rev{ flex-direction: row-reverse; }
  
  .tech-title{
    font-family:"Tenor Sans","Montserrat",system-ui,-apple-system,Arial,sans-serif;
    font-weight:400; margin:0;
    font-size: clamp(32px, 8vw, 92px);
    line-height:1; text-align:center;
    text-shadow: 0 10px 30px rgba(0,0,0,.45);
  }
  
  .tech-label{
    font: 700 clamp(14px, 3.6vw, 28px) / 1.1 "Montserrat", system-ui, -apple-system, Arial, sans-serif;
    margin: 0 0 .4em;
    text-shadow: 0 8px 24px rgba(0,0,0,.55);
  }
  .tech-text{
    font: 400 clamp(14px, 3.8vw, 26px) / 1.2 "Tenor Sans","Montserrat",system-ui,-apple-system,Arial,sans-serif;
    margin:0;
    text-shadow: 0 8px 24px rgba(0,0,0,.6);
    max-width: 36ch;
  }
  
  .tech-badge{
    flex: 0 0 auto;
    width: clamp(72px, 30vw, 140px); 
    height: auto;
    display: grid;
    place-items: center;
    background: none;       
    border-radius: 0;
    box-shadow: none;
  }
  
  .tech-badge img{
    width: 100%;            
    height: auto;
    object-fit: contain;
    filter: none;           
  }
  
  @media (max-width: 720px){
    .tech-content{ gap:20px; }
    .tech-text{ max-width: 100%; }
    .tech-badge{ width: clamp(64px, 30vw, 120px); }
  }