/* DENTAL LINE · концепт в стилистике drinkstill.nz
   Молоко #efede6 · графит #1a1b1d · cold cyan #63c3e4 · serif-акценты */
:root{
  --milk:#efede6; --ink:#1a1b1d; --mut:#6a6965; --teal:#1e423e;
  --cyan:#63c3e4; --line:rgba(26,27,29,.16); --linem:rgba(239,237,230,.16);
  --fd:"Unbounded","Arial Black",sans-serif; --ft:"Onest",system-ui,sans-serif;
  --fs:"Playfair Display",Georgia,serif; --fm:"JetBrains Mono",ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{font-family:var(--ft);background:var(--milk);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E")}
.mono{font-family:var(--fm)} .serif{font-family:var(--fs);font-style:italic;font-weight:500}
em{font-style:normal;color:var(--teal)}
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
::selection{background:var(--cyan);color:#fff}
.skip{position:fixed;top:-70px;left:16px;z-index:300;background:var(--ink);color:#fff;padding:10px 20px;border-radius:999px;text-decoration:none;font-size:13px}.skip:focus{top:12px}

/* курсор */
.cursor{position:fixed;left:0;top:0;z-index:400;width:34px;height:34px;border:1.5px solid var(--ink);border-radius:50%;pointer-events:none;display:none;transform:translate(-50%,-50%);transition:width .25s,height .25s,background .25s,border-color .25s}
.cursor i{position:absolute;inset:0;margin:auto;width:5px;height:5px;background:var(--cyan);border-radius:50%}
.cursor.is-link{width:56px;height:56px;background:rgba(99,195,228,.14);border-color:var(--cyan)}
@media(hover:hover) and (pointer:fine){.cursor{display:block}}

/* шапка */
.hd{position:fixed;inset:0 0 auto 0;z-index:200;display:flex;align-items:center;gap:clamp(14px,3vw,36px);padding:18px clamp(18px,3.5vw,44px);transition:background .35s,padding .35s,box-shadow .35s}
.hd.solid{background:rgba(239,237,230,.88);backdrop-filter:blur(14px);padding-block:12px;box-shadow:0 1px 0 var(--line)}
.hd__logo{font-family:var(--fd);font-weight:900;font-size:19px;color:var(--ink);text-decoration:none}
.hd__logo span{color:var(--cyan)}
.hd__nav{display:flex;gap:clamp(12px,2vw,28px);margin-left:auto}
.hd__nav a{color:var(--ink);text-decoration:none;font-size:14px;font-weight:500;padding-bottom:2px;background:linear-gradient(var(--teal),var(--teal)) left bottom/0 2px no-repeat;transition:background-size .3s,color .3s}
.hd__nav a:hover{background-size:100% 2px;color:var(--teal)}
.hd__cta{text-decoration:none;color:#fff;background:var(--ink);padding:11px 24px;border-radius:999px;font-size:13.5px;font-weight:600;transition:background .3s,transform .3s}
.hd__cta:hover{background:var(--teal);transform:translateY(-2px)}
.burger{display:none;margin-left:auto;flex-direction:column;gap:5px;background:none;border:1.5px solid var(--ink);border-radius:999px;padding:11px 10px;cursor:pointer}
.burger span{width:20px;height:2px;background:var(--ink)}
.menu{position:fixed;inset:0;z-index:250;background:var(--ink);color:var(--milk);display:flex;flex-direction:column;justify-content:center;padding:10vh clamp(24px,8vw,80px)}
.menu[hidden]{display:none}
.menu a{font-family:var(--fd);font-weight:700;font-size:clamp(26px,7vw,44px);color:var(--milk);text-decoration:none;border-bottom:1px solid var(--linem);padding:12px 0;display:flex;gap:16px;align-items:baseline}
.menu a em{font-family:var(--fm);font-style:normal;font-size:12px;color:var(--cyan)}
.menu a:hover{color:var(--cyan)}
.menu__close{position:absolute;top:22px;right:24px;background:none;border:1.5px solid var(--linem);color:var(--milk);border-radius:999px;padding:10px 22px;font-size:13px;cursor:pointer}
/* hero */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:110px clamp(18px,3.5vw,44px) clamp(20px,3.5vh,40px);overflow:clip}
.hero__index{position:absolute;top:96px;left:clamp(18px,3.5vw,44px);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--mut)}
.hero__word{font-family:var(--fd);font-weight:900;text-transform:uppercase;line-height:.92;letter-spacing:-.015em;font-size:clamp(52px,calc(3rem + 9.6vw),210px);position:relative;z-index:3;margin-top:auto}
.w{display:flex;justify-content:space-between;width:100%}
.w--2{margin-top:-.02em}
.l{display:inline-block;font-weight:inherit;animation:lup 1s cubic-bezier(.16,1,.3,1) both}
.l:nth-child(2){animation-delay:.06s}.l:nth-child(3){animation-delay:.12s}.l:nth-child(4){animation-delay:.18s}
.l:nth-child(5){animation-delay:.24s}.l:nth-child(6){animation-delay:.3s}.l:nth-child(7){animation-delay:.36s}
@keyframes lup{from{transform:translateY(112%) rotate(4deg);opacity:0}to{transform:none;opacity:1}}
.dot{color:var(--cyan);font-style:normal}

/* центральная сцена */
.hero__scene{position:absolute;left:50%;top:45%;translate:-50% -50%;z-index:1;width:min(46vh,520px);aspect-ratio:1;pointer-events:none;animation:reveal 1.3s cubic-bezier(.16,1,.3,1) both .25s}
@keyframes reveal{from{clip-path:circle(0% at 50% 42%)}to{clip-path:circle(75% at 50% 50%)}}
.hero__glow{position:absolute;inset:-12%;border-radius:50%;background:radial-gradient(closest-side,rgba(99,195,228,.4),rgba(99,195,228,.12) 55%,transparent 72%);filter:blur(6px);animation:glowp 7s ease-in-out infinite alternate}
@keyframes glowp{to{opacity:.65;scale:1.06}}
.tooth{position:relative;width:100%;height:100%;animation:float 8s ease-in-out infinite;filter:drop-shadow(0 30px 50px rgba(30,66,62,.18))}
.t-ring{transform-origin:260px 270px;animation:spinr 60s linear infinite}
@keyframes spinr{to{transform:rotate(360deg)}}
@keyframes float{0%,100%{transform:translateY(-10px) rotate(-1.5deg)}50%{transform:translateY(14px) rotate(1.5deg)}}

/* низ hero */
.hero__foot{position:relative;z-index:3;display:grid;grid-template-columns:1.15fr auto auto;gap:clamp(20px,4vw,64px);align-items:end;margin-top:clamp(20px,4vh,48px)}
[data-fade],[data-stagger]>*{opacity:0;animation:fadeup .9s cubic-bezier(.16,1,.3,1) forwards .55s}
[data-stagger]>*:nth-child(2){animation-delay:.7s}[data-stagger]>*:nth-child(3){animation-delay:.85s}
@keyframes fadeup{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.hero__offer h2{font-family:var(--fd);font-weight:700;text-transform:uppercase;font-size:clamp(17px,1.9vw,26px);line-height:1.25}
.hero__offer>p{max-width:52ch;color:var(--mut);margin-top:10px;font-size:clamp(14px,1.2vw,16.5px)}
.hero__ctas{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:20px}
.btn{display:inline-block;cursor:pointer;text-decoration:none;font-weight:600;font-family:var(--ft);font-size:14px;border:1.5px solid transparent;border-radius:999px;padding:15px 30px;transition:transform .35s cubic-bezier(.2,.7,.2,1),background .3s,color .3s,border-color .3s,box-shadow .3s}
.btn--ink{background:var(--ink);color:#fff}
.btn--ink:hover{background:var(--teal);box-shadow:0 14px 34px rgba(30,66,62,.28);transform:translateY(-3px)}
.btn--big{padding:18px 36px;font-size:15px}
.linkline{display:inline-flex;align-items:center;gap:9px;color:var(--ink);text-decoration:none;font-weight:600;font-size:14px;border-bottom:1.5px solid var(--ink);padding-bottom:3px;transition:color .3s,border-color .3s,gap .3s}
.linkline:hover{color:var(--teal);border-color:var(--teal);gap:13px}
.hero__stats{list-style:none;display:flex;gap:clamp(16px,2.4vw,36px)}
.hero__stats b{display:block;font-family:var(--fd);font-weight:900;font-size:clamp(20px,2vw,30px)}
.hero__stats span{display:block;font-size:11.5px;color:var(--mut);max-width:11ch;line-height:1.35}
.hero__scroll{writing-mode:vertical-rl;font-size:11px;letter-spacing:.3em;color:var(--mut);display:flex;align-items:center;gap:10px;text-transform:uppercase}
.hero__scroll i{width:1.5px;height:56px;background:linear-gradient(var(--cyan),transparent);animation:sdrop 2s ease-in-out infinite}
@keyframes sdrop{0%,100%{transform:scaleY(.2)}50%{transform:scaleY(1)}}

.marquee{overflow:clip;border-block:1px solid var(--line);padding:18px 0}
.marquee__t{white-space:nowrap;font-size:13px;letter-spacing:.28em;text-transform:uppercase;color:var(--mut);display:inline-block;animation:mqmove 30s linear infinite}
@keyframes mqmove{to{transform:translateX(-50%)}}

/* секции общие */
.sec{padding:clamp(76px,12vh,150px) clamp(18px,3.5vw,44px)}
.sec__head{display:flex;align-items:end;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:clamp(32px,6vh,72px)}
.idx{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--mut);align-self:start}
.sec__title{font-family:var(--fd);font-weight:900;text-transform:uppercase;font-size:clamp(30px,calc(1rem + 4vw),74px);line-height:1.05}
.sec__title em,.sec__title .serif{color:var(--teal)}
.sec--ink{background:var(--ink);color:var(--milk)}
.sec--ink em,.sec--ink .serif{color:var(--cyan)}
.sec--ink .idx,.sec--soft .idx{color:inherit;opacity:.55}
.sec--soft{background:#e7e4da}
[data-rv]{opacity:0;transform:translateY(36px);transition:opacity .8s ease,transform .8s cubic-bezier(.16,1,.3,1)}
[data-rv].in{opacity:1;transform:none}
.outline{-webkit-text-stroke:1.5px currentColor;color:transparent}
.tag-demo{font-size:10px;border:1px solid var(--line);border-radius:999px;padding:2px 8px;text-transform:uppercase;opacity:.6}
/* 02 услуги */
.svc{position:relative}
.svc__stage{position:relative;min-height:56vh;display:grid;place-items:center;text-align:center}
.svc__bignum{position:absolute;left:50%;top:50%;translate:-50% -54%;font-family:var(--fd);font-weight:900;font-size:clamp(200px,38vw,520px);opacity:.14;pointer-events:none;transition:color .5s}
.svc__bignum.colorize{-webkit-text-stroke:0;color:var(--ac,var(--cyan))}
.svc__slide{display:none;grid-template-columns:minmax(200px,300px) 1fr;gap:clamp(24px,4vw,72px);align-items:center;text-align:left;max-width:940px}
.svc__slide.is-on{display:grid;animation:fadeup .7s cubic-bezier(.16,1,.3,1)}
.svc__pic{width:100%;color:var(--ac,var(--cyan))}
.svc__pic svg{width:100%;height:auto;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.svc__slide:hover .svc__pic svg{transform:scale(1.06) rotate(-3deg)}
.svc__info h3{font-family:var(--fd);font-weight:700;text-transform:uppercase;font-size:clamp(22px,2.6vw,40px);line-height:1.12}
.svc__info p{margin-top:14px;color:var(--mut);max-width:46ch}
.svc__meta{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.svc__meta li{border:1.5px solid var(--line);border-radius:999px;padding:7px 15px;font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.svc__nav{display:flex;justify-content:center;gap:10px;margin-top:clamp(28px,5vh,52px)}
.svc__dot{cursor:pointer;background:none;border:1.5px solid var(--line);border-radius:999px;padding:11px 20px;font-family:var(--ft);font-size:13.5px;font-weight:600;color:var(--ink);transition:background .3s,color .3s,border-color .3s,transform .25s}
.svc__dot .mono{margin-right:8px;font-size:11px}
.svc__dot:hover{transform:translateY(-2px);border-color:var(--ink)}
.svc__dot.is-on{background:var(--ink);color:#fff;border-color:var(--ink)}

/* 03 технологии */
.tech__list{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--linem)}
.tech__list li{background:var(--ink);padding:clamp(22px,2.6vw,36px) clamp(18px,2vw,28px);transition:background .35s;outline-offset:-3px}
.tech__list li:hover,.tech__list li:focus-visible{background:#232528}
.tech__list i{font-style:normal;font-size:12px;color:var(--cyan)}
.tech__list h3{font-family:var(--fd);font-weight:700;text-transform:uppercase;font-size:clamp(15px,1.4vw,19px);margin-top:16px;line-height:1.3;min-height:2.6em}
.tech__list p{margin-top:10px;font-size:13.5px;color:rgba(239,237,230,.65);min-height:5em}
.tech__for{display:block;margin-top:14px;font-size:11.5px;color:var(--cyan);text-transform:uppercase;letter-spacing:.06em}

/* 04 врачи */
.team__note{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.team__row{display:flex;gap:clamp(14px,2vw,26px);overflow-x:auto;padding-bottom:14px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.doc{flex:0 0 min(280px,74vw);scroll-snap-align:start}
.doc__pic{aspect-ratio:5/6;border-radius:20px;display:grid;place-items:end center;padding:12%;transition:border-radius .4s ease,transform .4s ease}
.doc__pic svg{width:62%;height:auto;color:var(--milk);transition:transform .5s ease}
.doc:hover .doc__pic{transform:translateY(-8px)}
.doc:hover .doc__pic svg{transform:scale(1.08)}
.doc__pic--a{background:#c9dbe3}.doc__pic--b{background:#274d47}.doc__pic--c{background:#a8bcc6}.doc__pic--d{background:#39505e}
.doc h3{font-family:var(--fd);font-weight:700;text-transform:uppercase;font-size:17px;margin-top:16px}
.doc p{font-size:12px;color:var(--teal);margin-top:4px}.doc span{font-size:13px;color:var(--mut)}

/* 05 до/после */
.ba{position:relative;max-width:920px;margin-inline:auto;border-radius:24px;overflow:clip;--x:50%;touch-action:none}
.ba__before,.ba__after{aspect-ratio:16/8.4}
.ba__before svg,.ba__after svg{width:100%;height:100%;display:block}
.ba__after{position:absolute;inset:0;clip-path:inset(0 0 0 var(--x))}
.ba__before i,.ba__after i{position:absolute;top:14px;font-style:normal;background:var(--ink);color:#fff;border-radius:999px;padding:5px 14px;font-size:11px;text-transform:uppercase}
.ba__before i{right:14px}.ba__after i{left:14px;background:var(--teal)}
.ba input[type=range]{position:absolute;left:0;bottom:-52px;width:100%}
.ba{padding-bottom:56px}
.ba::after{content:"";position:absolute;top:6%;bottom:calc(6% + 56px);left:var(--x);width:2px;background:#fff;transform:translateX(-50%)}

/* 06 о клинике */
.about__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,80px)}
.about__lead{font-size:clamp(18px,1.8vw,26px);line-height:1.45;max-width:32em}
.about__tl{list-style:none;display:flex;flex-direction:column}
.about__tl li{display:flex;gap:24px;align-items:baseline;border-top:1px solid var(--line);padding:15px 4px;transition:padding-left .3s,color .3s}
.about__tl li:hover{padding-left:18px;color:var(--teal)}
.about__tl b{font-family:var(--fd);font-weight:900;font-size:19px}

/* 07 отзывы */
.rev__row{display:flex;gap:clamp(14px,2vw,26px);overflow-x:auto;padding-bottom:12px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.rev{flex:0 0 min(420px,82vw);scroll-snap-align:start;background:var(--milk2);border-radius:22px;padding:clamp(24px,3vw,40px)}
.rev p{font-size:clamp(17px,1.7vw,23px);line-height:1.42}
.rev footer{margin-top:20px;font-size:12px;color:var(--mut)}

/* 08 контакты */
.contact__grid{display:grid;grid-template-columns:1fr .85fr;gap:clamp(28px,5vw,80px)}
#bookForm label,#bookForm fieldset{display:block;border:0;margin-top:18px}
#bookForm label:first-child{margin-top:0}
#bookForm span,#bookForm legend,.agree{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--mut);display:block;margin-bottom:7px}
#bookForm input[type=text],#bookForm input[type=tel],#bookForm select{width:100%;background:transparent;border:0;border-bottom:1.5px solid var(--line);padding:10px 2px;font-family:var(--ft);font-size:16px;color:var(--ink);transition:border-color .3s}
#bookForm input:focus,#bookForm select:focus{border-color:var(--cyan);outline:none}
#bookForm .err{border-color:var(--teal)!important}
.chips{display:flex;gap:8px}
.chip{cursor:pointer}
.chip input{position:absolute;opacity:0}
.chip span{margin:0!important;font-size:13px!important;color:var(--ink)!important;border:1.5px solid var(--line);border-radius:999px;padding:9px 18px;text-transform:none;letter-spacing:0;transition:background .25s,color .25s,border-color .25s;display:inline-block}
.chip input:checked+span{background:var(--ink);color:#fff!important;border-color:var(--ink)}
.chip input:focus-visible+span{outline:3px solid var(--cyan);outline-offset:2px}
.agree{display:flex;align-items:center;gap:10px;text-transform:none;letter-spacing:0;font-size:13.5px;color:var(--mut)}
.agree input{width:17px;height:17px;accent-color:var(--teal)}
.form__ok{margin-top:16px;color:var(--teal);border:1.5px solid var(--teal);border-radius:14px;padding:14px 18px;font-size:13px}
.contact__info dl{display:grid;grid-template-columns:auto 1fr;gap:14px 28px;align-items:baseline}
.contact__info dt{font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:var(--mut)}
.contact__info dd a{color:var(--ink);text-decoration-color:var(--cyan);text-underline-offset:5px}
.map{margin-top:28px;height:180px;border:1.5px solid var(--line);border-radius:20px;display:grid;place-items:center;font-size:12px;letter-spacing:.2em;color:var(--mut);background:
  linear-gradient(var(--milk) 1.5px,transparent 1.5px) 0 0/28px 28px,
  linear-gradient(90deg,var(--milk) 1.5px,transparent 1.5px) 0 0/28px 28px,#e9e6dc}

/* 09 футер */
.ft{background:var(--ink);color:var(--milk);padding:clamp(60px,9vh,110px) clamp(18px,3.5vw,44px) 34px}
.ft__word{font-family:var(--fd);font-weight:900;text-transform:uppercase;font-size:clamp(46px,calc(2rem + 8vw),170px);line-height:.95;color:transparent;-webkit-text-stroke:1.5px rgba(239,237,230,.4)}
.ft__cols{display:grid;grid-template-columns:1fr auto auto;gap:clamp(24px,4vw,72px);margin-top:clamp(30px,6vh,64px);border-top:1px solid var(--linem);padding-top:26px}
.ft__tag{font-size:clamp(16px,1.6vw,21px);line-height:1.35;color:rgba(239,237,230,.9)}
.ft nav{display:flex;flex-direction:column;gap:9px}
.ft nav a{color:var(--milk);opacity:.75;text-decoration:none;transition:opacity .25s,color .25s}
.ft nav a:hover{opacity:1;color:var(--cyan)}
.ft__meta{display:flex;flex-direction:column;gap:9px;font-size:12.5px;color:rgba(239,237,230,.55)}
.ft__meta a{color:inherit;text-decoration-color:var(--cyan)}

/* адаптив */
@media(max-width:1080px){.tech__list{grid-template-columns:repeat(2,1fr)}}
@media(max-width:960px){
  .hd__nav{display:none}.hd__cta{display:none}.burger{display:flex}
  .hero__foot{grid-template-columns:1fr;gap:22px}
  .hero__scene{top:34%;width:min(70vw,380px);opacity:.95}
  .hero__stats{flex-wrap:wrap}
  .hero__scroll{display:none}
  .about__grid,.contact__grid{grid-template-columns:1fr}
  .svc__slide{grid-template-columns:1fr;text-align:left}
  .svc__pic{max-width:180px}
  .ft__cols{grid-template-columns:1fr;gap:24px}
}
@media(max-width:640px){
  .tech__list{grid-template-columns:1fr}
  .sec__head{flex-direction:column;align-items:flex-start}
  .team__note{align-self:flex-start}
}
/* reduced motion */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  [data-rv]{opacity:1;transform:none}
  [data-fade],[data-stagger]>*{opacity:1;animation:none}
  .l{animation:none;opacity:1;transform:none}
  .cursor{display:none!important}
}