/* ============================================
   POMENCHUK — Swiss International Style
   ============================================ */

:root{
  --bg:#F2F2F0;
  --ink:#111111;
  --red:#E1140A;
  --grey:#8A8A85;
  --line:rgba(17,17,17,.1);
  --dark:#111111;
  --unit:clamp(16px,2.2vw,28px);
  --ease:cubic-bezier(.22,1,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth;background:var(--dark)}
body{
  background:var(--bg);color:var(--ink);
  font-family:"Helvetica Neue",Helvetica,Inter,Arial,sans-serif;
  font-size:16px;line-height:1.45;overflow-x:clip;
}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}

/* ---------- GRID OVERLAY ---------- */
.grid-overlay{
  position:fixed;inset:0;pointer-events:none;z-index:1;
  display:grid;grid-template-columns:repeat(6,1fr);
  padding:0 var(--unit);
}
.grid-overlay span{border-left:1px solid var(--line)}
.grid-overlay span:last-child{border-right:1px solid var(--line)}
@media(max-width:900px){
  .grid-overlay{grid-template-columns:repeat(2,1fr)}
  .grid-overlay span:nth-child(n+3){display:none}
}

/* ---------- LAYOUT ---------- */
.wrap{position:relative;z-index:2;padding:0 var(--unit)}
.row{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--unit)}
@media(max-width:900px){.row{grid-template-columns:repeat(4,1fr)}} 

/* ---------- TYPE SCALE ---------- */
.display{
  font-size:clamp(56px,13vw,190px);
  line-height:.86;letter-spacing:-.045em;font-weight:700;
  text-transform:uppercase;
}
h2.section-title{
  font-size:clamp(32px,5.5vw,76px);
  line-height:.94;letter-spacing:-.035em;font-weight:700;text-transform:uppercase;
}
h3{font-size:clamp(20px,2.2vw,30px);line-height:1.05;letter-spacing:-.02em;font-weight:700}
.lead{font-size:clamp(17px,1.6vw,22px);line-height:1.35;max-width:52ch}
.meta{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:500;color:var(--grey);
}
.meta-ink{color:var(--ink)}
.red{color:var(--red)}

/* ---------- HEADER ---------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  padding:calc(var(--unit)*.55) var(--unit);
  display:flex;justify-content:space-between;align-items:center;
  color:var(--ink);
  background:rgba(242,242,240,0);
  backdrop-filter:blur(0px);
  transition:background .5s var(--ease),backdrop-filter .5s var(--ease),
             padding .5s var(--ease),box-shadow .5s var(--ease);
}
header.scrolled{
  background:rgba(242,242,240,.82);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  padding:calc(var(--unit)*.42) var(--unit);
  box-shadow:0 1px 0 rgba(17,17,17,.1);
}
.burger{display:none}
header .logo{font-size:17px;letter-spacing:.24em;font-weight:700;text-transform:uppercase;
  transition:font-size .5s var(--ease)}
header.scrolled .logo{font-size:15px}
header nav{display:flex;gap:1.6rem}
header nav a{font-size:11px;letter-spacing:.14em;text-transform:uppercase;position:relative}
header nav a::after{
  content:"";position:absolute;left:0;bottom:-4px;width:0;height:1px;background:currentColor;
  transition:width .5s var(--ease);
}
header nav a:hover::after,header nav a.active::after{width:100%}
@media(max-width:700px){
    header{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  header.scrolled{background:rgba(242,242,240,.95)}
  header.open{background:var(--bg)}
  header .logo{position:relative;z-index:60}
  .burger{display:flex;flex-direction:column;gap:5px;
    background:none;border:0;cursor:pointer;padding:4px;z-index:60;position:relative}
  .burger span{display:block;width:22px;height:1.5px;background:currentColor;
    transition:transform .35s var(--ease),opacity .35s var(--ease)}
  header.open .burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  header.open .burger span:nth-child(2){opacity:0}
  header.open .burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
  header nav{
    position:fixed;inset:0;background:var(--bg);
    flex-direction:column;align-items:center;justify-content:center;
    gap:2rem;font-size:13px;letter-spacing:.14em;
    opacity:0;pointer-events:none;transition:opacity .35s var(--ease);
    z-index:55
  }
  header.open nav{opacity:1;pointer-events:auto}
  .lang{position:absolute;bottom:2.4rem;left:50%;transform:translateX(-50%)}
}
@media(max-width:380px){
  .burger span{width:20px}
}
@media(max-width:380px){
  header nav a{font-size:9px;letter-spacing:.04em}
  header .logo{font-size:12px}
  .lang{margin-left:.5rem}
  .lang button,.lang span{font-size:9px}
}

/* ---------- HERO ---------- */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding-bottom:calc(var(--unit)*3);padding-top:calc(var(--unit)*5)}
.hero .display{overflow:hidden}
.hero .display .line{display:block;overflow:hidden}
.hero .display .line > span{
  display:block;transform:translateY(105%);
  animation:riseUp 1.5s var(--ease) forwards;
}
.hero .display .line:nth-child(2) > span{animation-delay:.14s}
@keyframes riseUp{to{transform:translateY(0)}}

.hero-bottom{margin-top:calc(var(--unit)*1.6);align-items:end}
.hero-bottom .lead{grid-column:1/span 5}
.hero-bottom .hero-cta{grid-column:9/span 4;display:flex;flex-direction:column;gap:.6rem;align-items:flex-start}
@media(max-width:900px){
  .hero-bottom .lead{grid-column:1/span 4}
  .hero-bottom .hero-cta{grid-column:1/span 4;margin-top:1.6rem}
}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
  border-bottom:1px solid var(--ink);padding-bottom:3px;
  transition:color .4s var(--ease),border-color .4s var(--ease),gap .4s var(--ease);
}
.btn:hover{color:var(--red);border-color:var(--red);gap:1.1rem}
.btn.on-dark{border-color:rgba(255,255,255,.5);color:#fff}
.btn.on-dark:hover{color:var(--red);border-color:var(--red)}

.btn-solid{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  background:var(--red);color:#fff;border:0;cursor:pointer;
  padding:1.05rem 2.2rem;font-family:inherit;width:100%;
  transition:background .4s var(--ease),gap .4s var(--ease);
}
.btn-solid:hover{background:#B50F07;gap:1.2rem}
.btn-solid:disabled,.btn-solid.sent{background:#2E7D32;cursor:default;gap:.6rem}

/* ---------- MARQUEE ---------- */
.marquee{
  border-top:1px solid rgba(17,17,17,.16);border-bottom:1px solid rgba(17,17,17,.16);
  padding:.8rem 0;overflow:hidden;white-space:nowrap;position:relative;z-index:2;
  background:var(--bg);
}
.marquee-track{display:inline-flex;gap:3rem;animation:slide 40s linear infinite;padding-right:3rem}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.marquee-track span{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:500}

/* ---------- SECTION ---------- */
section{padding:calc(var(--unit)*3.2) 0;position:relative;z-index:2}
.section-head{border-top:1px solid rgba(17,17,17,.16);padding-top:.7rem;margin-bottom:calc(var(--unit)*2)}
.section-head .row{align-items:start}
.section-head .idx{grid-column:1/span 2}
.section-head h2{grid-column:3/span 8}
@media(max-width:900px){
  .section-head .idx{grid-column:1/span 4;margin-bottom:.8rem}
  .section-head h2{grid-column:1/span 4}
}

/* ---------- REVEAL (slower, softer) ---------- */
.reveal{opacity:0;transform:translateY(30px);
  transition:opacity 1.35s var(--ease),transform 1.35s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal-d1{transition-delay:.14s}
.reveal-d2{transition-delay:.28s}
.reveal-d3{transition-delay:.42s}

.split .line{display:block;overflow:clip;overflow-clip-margin:.25em;padding-bottom:.06em;margin-bottom:-.06em}
.split .line > span{display:block;transform:translateY(105%);
  transition:transform 1.4s var(--ease)}
.split.in .line > span{transform:translateY(0)}
.split.in .line:nth-child(2) > span{transition-delay:.12s}
.split.in .line:nth-child(3) > span{transition-delay:.24s}

/* ---------- HORIZONTAL SCROLL ---------- */
.h-scroll{position:relative}
.h-sticky{position:sticky;top:0;height:100svh;display:flex;align-items:center;
  overflow:hidden;background:var(--bg);padding-top:calc(var(--unit)*3)}
.h-track{display:flex;gap:var(--unit);padding:0 var(--unit);will-change:transform;
  position:relative;z-index:2}
.h-card{flex:0 0 clamp(260px,30vw,440px)}
.h-card .thumb{aspect-ratio:1/1;max-height:58vh;background:#DEDEDA;overflow:hidden;position:relative}
.h-card .thumb img,.h-card .thumb video{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.4s var(--ease);
}
.h-card:hover .thumb img,.h-card:hover .thumb video{transform:scale(1.045)}
.h-card .cap{display:flex;justify-content:space-between;padding-top:.7rem;
  border-top:1px solid rgba(17,17,17,.16);margin-top:.7rem}
.h-progress{position:absolute;left:var(--unit);right:var(--unit);
  bottom:calc(var(--unit)*1.2);height:1px;background:rgba(17,17,17,.14)}
.h-progress i{display:block;height:1px;background:var(--red);width:0}
.h-hint{position:absolute;left:var(--unit);right:var(--unit);top:calc(var(--unit)*3.6);
  display:flex;justify-content:space-between;z-index:1;background:var(--bg);
  padding-bottom:.5rem}
.h-hint .meta:last-child{animation:hintPulse 3s ease-in-out infinite}
@keyframes hintPulse{0%,100%{opacity:.4}50%{opacity:1}}

@media(max-width:900px){
  .h-scroll{height:auto!important}
  .h-sticky{position:static;height:auto;display:block;padding:0}
  .h-track{
    flex-direction:row;transform:none!important;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding:0 var(--unit);gap:.9rem;
    scrollbar-width:none;
  }
  .h-track::-webkit-scrollbar{display:none}
  .h-card{flex:0 0 78%;scroll-snap-align:start;margin-bottom:0}
  .h-card .thumb{max-height:none}
  .h-progress{display:none}
  .h-hint{position:static;padding:0 var(--unit) .8rem}
}

/* ---------- SERVICES ---------- */
.svc{border-top:1px solid rgba(17,17,17,.16);padding:1.2rem 0;display:grid;
  grid-template-columns:repeat(12,1fr);gap:var(--unit);align-items:start}
.svc:last-of-type{border-bottom:1px solid rgba(17,17,17,.16)}
.svc .n{grid-column:1/span 1}
.svc h3{grid-column:2/span 4}
.svc p{grid-column:7/span 5;font-size:15px;line-height:1.45;color:#3a3a38}
@media(max-width:900px){
  .svc{grid-template-columns:repeat(4,1fr)}
  .svc .n{grid-column:1/span 4}
  .svc h3{grid-column:1/span 4;margin:.3rem 0 .5rem}
  .svc p{grid-column:1/span 4}
}

/* ---------- PROCESS ---------- */
.proc{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--unit)}
.proc .step{border-top:2px solid var(--ink);padding-top:.8rem}
.proc .step .n{font-size:12px;letter-spacing:.14em;color:var(--red);font-weight:600}
.proc .step h3{margin:.4rem 0 .5rem;text-transform:uppercase}
.proc .step p{font-size:14px;line-height:1.45;color:#3a3a38}
@media(max-width:900px){.proc{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.proc{grid-template-columns:1fr}}

/* ---------- STATS ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--unit)}
.stats .stat{border-top:2px solid var(--ink);padding-top:.9rem}
.stats .stat .v{font-size:clamp(40px,6vw,92px);line-height:.86;letter-spacing:-.045em;
  font-weight:700;font-variant-numeric:tabular-nums}
.stats .stat .k{margin-top:.7rem;max-width:22ch}
@media(max-width:900px){.stats{grid-template-columns:1fr 1fr;gap:calc(var(--unit)*1.6) var(--unit)}}

/* ---------- WORK GRID ---------- */
.work-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:calc(var(--unit)*1.6) var(--unit)}
.work-item{grid-column:span 6}
.work-item .thumb{aspect-ratio:4/3;background:#DEDEDA;overflow:hidden}
.work-item.tall .thumb{aspect-ratio:3/4}
.work-item .thumb img,.work-item .thumb video{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.4s var(--ease)}
.work-item:hover .thumb img,.work-item:hover .thumb video{transform:scale(1.04)}
.work-item .cap{display:flex;justify-content:space-between;
  border-top:1px solid rgba(17,17,17,.16);margin-top:.7rem;padding-top:.7rem}
@media(max-width:900px){
  .work-grid{grid-template-columns:repeat(4,1fr)}
  .work-item,.work-item.tall{grid-column:span 4}
}

.chips{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:calc(var(--unit)*1.6)}
.chip{font-size:11px;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--ink);
  padding:.45rem .9rem;border-radius:99px;cursor:pointer;transition:.4s var(--ease)}
.chip:hover,.chip.active{background:var(--ink);color:var(--bg)}

/* ---------- CASE PAGE ---------- */
.case-hero{padding-top:calc(var(--unit)*7)}
.case-meta{border-top:1px solid rgba(17,17,17,.16);border-bottom:1px solid rgba(17,17,17,.16);
  padding:.8rem 0;margin-top:calc(var(--unit)*1.6);display:grid;
  grid-template-columns:repeat(12,1fr);gap:var(--unit)}
.case-meta div{grid-column:span 3}
@media(max-width:900px){
  .case-meta{grid-template-columns:repeat(2,1fr)}
  .case-meta div{grid-column:span 1;padding:.4rem 0}
}
.case-block{margin:calc(var(--unit)*2.4) 0}
.case-block .label{grid-column:1/span 2}
.case-block .body{grid-column:4/span 7}
.case-block .body p{font-size:clamp(16px,1.5vw,20px);line-height:1.5;margin-bottom:1rem;max-width:60ch}
@media(max-width:900px){
  .case-block .label{grid-column:1/span 4;margin-bottom:.7rem}
  .case-block .body{grid-column:1/span 4}
}
/* ---- MEDIA BLOCKS ---- */
.media-full{width:100%;aspect-ratio:16/9;background:#DEDEDA;overflow:hidden;margin:calc(var(--unit)*2) 0}
.media-full.vert{aspect-ratio:3/4;max-width:640px}
.media-full.sq{aspect-ratio:1/1;max-width:760px}
.media-full.tall{aspect-ratio:9/16;max-width:420px}
.media-full.center{margin-left:auto;margin-right:auto}

.media-duo{display:grid;grid-template-columns:1fr 1fr;gap:var(--unit);margin:calc(var(--unit)*2) 0}
.media-duo > div{aspect-ratio:4/5;background:#DEDEDA;overflow:hidden}
@media(max-width:700px){.media-duo{grid-template-columns:1fr}}

/* flexible grid — any number of items */
.media-grid{display:grid;gap:var(--unit);margin:calc(var(--unit)*2) 0}
.media-grid.g2{grid-template-columns:repeat(2,1fr)}
.media-grid.g3{grid-template-columns:repeat(3,1fr)}
.media-grid.g4{grid-template-columns:repeat(4,1fr)}
.media-grid > div{background:#DEDEDA;overflow:hidden;aspect-ratio:3/4}
.media-grid.wide > div{aspect-ratio:16/9}
.media-grid.sq > div{aspect-ratio:1/1}
@media(max-width:900px){
  .media-grid.g3,.media-grid.g4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .media-grid.g2,.media-grid.g3,.media-grid.g4{grid-template-columns:1fr}
}

/* every image/video inside a media block fills it */
.media-full img,.media-full video,
.media-duo img,.media-duo video,
.media-grid img,.media-grid video{
  width:100%;height:100%;object-fit:cover;display:block;
}

/* caption under a media block */
.media-cap{margin-top:-.9rem;margin-bottom:calc(var(--unit)*2)}
.case-nav{border-top:1px solid rgba(17,17,17,.16);padding-top:1rem;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

/* ---------- ABOUT ---------- */
.about-portrait{grid-column:1/span 5;aspect-ratio:3/4;background:#DEDEDA;overflow:hidden}
.about-portrait img{width:100%;height:100%;object-fit:cover}
.about-text{grid-column:7/span 6}
.about-text p:first-child{margin-top:0}
.about-hero{padding-top:calc(var(--unit)*6);padding-bottom:0}
.about-body{padding-top:calc(var(--unit)*1.2)}
.about-text p{font-size:clamp(16px,1.6vw,21px);line-height:1.5;margin-bottom:1.1rem;max-width:56ch}
@media(max-width:900px){
  .about-portrait{grid-column:1/span 4}
  .about-text{grid-column:1/span 4;margin-top:2rem}
}
/* long links / emails must never overflow on phones */
a,p,h1,h2,h3,.lead{overflow-wrap:anywhere}
@media(max-width:700px){
  .contact .direct a{font-size:12px;letter-spacing:.02em;line-height:1.4}
  h3{font-size:clamp(18px,5.2vw,26px);letter-spacing:-.015em}
}

/* ---------- CONTACT (full dark) ---------- */
.contact{
  background:var(--dark);color:#fff;
  padding:calc(var(--unit)*4) var(--unit) calc(var(--unit)*3.4);
  position:relative;z-index:3;margin-top:calc(var(--unit)*2);
}
.contact::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  margin:0 var(--unit);
  background-image:repeating-linear-gradient(to right,
    rgba(255,255,255,.055) 0 1px, transparent 1px calc(100%/6));
}
@media(max-width:900px){
  .contact::before{
    background-image:repeating-linear-gradient(to right,
      rgba(255,255,255,.055) 0 1px, transparent 1px 50%);
  }
}
.contact .row{align-items:start;position:relative;z-index:2}
.contact h2{grid-column:1/span 6;font-size:clamp(26px,4vw,62px);line-height:.92;
  letter-spacing:-.035em;text-transform:uppercase;font-weight:700}
.contact .form-col{grid-column:8/span 5}
@media(max-width:900px){
  .contact h2{grid-column:1/span 4}
  .contact .form-col{grid-column:1/span 4;margin-top:2.4rem}
}
.contact .meta{color:rgba(255,255,255,.45)}
@media(max-width:900px){
  .contact{padding:calc(var(--unit)*3) var(--unit) calc(var(--unit)*2.6)}
  .contact h2{font-size:clamp(30px,9vw,54px)}
}
.contact input,.contact select,.contact textarea{
  width:100%;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.22);
  color:#fff;padding:.9rem 0;font-family:inherit;font-size:14px;margin-bottom:1.1rem;
  transition:border-color .45s var(--ease);
}
.contact input:focus,.contact select:focus,.contact textarea:focus{outline:none;border-color:var(--red)}
.contact input::placeholder,.contact textarea::placeholder{color:rgba(255,255,255,.4)}
.contact select{
  color:rgba(255,255,255,.9);
  -webkit-appearance:none;appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,rgba(255,255,255,.5) 50%),
                   linear-gradient(135deg,rgba(255,255,255,.5) 50%,transparent 50%);
  background-position:calc(100% - 12px) center, calc(100% - 7px) center;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  padding-right:2rem;
}
.contact select:invalid,.contact select.placeholder{color:rgba(255,255,255,.4)}
.contact select option{background:#111;color:#fff;padding:.5rem}
.contact select option:first-child{color:rgba(255,255,255,.5)}
.contact .direct{margin-top:2.2rem;display:flex;flex-direction:column;gap:.5rem}
.contact .direct a{font-size:13px;letter-spacing:.06em;
  border-bottom:1px solid rgba(255,255,255,.22);padding-bottom:2px;width:fit-content;
  transition:.4s var(--ease)}
.contact .direct a:hover{color:var(--red);border-color:var(--red)}

/* ---------- FOOTER ---------- */
footer{background:var(--dark);color:rgba(255,255,255,.4);
  padding:1.4rem var(--unit) 1.6rem;
  display:flex;justify-content:space-between;align-items:center;
  font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;position:relative;z-index:3;flex-wrap:wrap;gap:.5rem;
  border-top:1px solid rgba(255,255,255,.08)}
@media(max-width:700px){
  footer{flex-direction:column;align-items:flex-start;gap:.35rem;
    font-size:10px;letter-spacing:.1em;padding:1.2rem var(--unit) 1.4rem}
}

/* ---------- MISC ---------- */
.big-stat{font-size:clamp(48px,9vw,150px);line-height:.85;letter-spacing:-.04em;font-weight:700}
::selection{background:var(--red);color:#fff}
.scroll-bar{position:fixed;top:0;left:0;height:2px;background:var(--red);
  z-index:99;width:0;opacity:.85;transition:width .1s linear}

.cursor-label{
  position:fixed;top:0;left:0;z-index:80;pointer-events:none;
  background:var(--red);color:#fff;border-radius:99px;
  padding:.7rem 1.3rem;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:700;
  opacity:0;scale:.6;
  transition:opacity .35s var(--ease),scale .4s var(--ease);
}
.cursor-label.on{opacity:1;scale:1}
@media(hover:none){.cursor-label{display:none}}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  .split .line > span,.hero .display .line > span{transform:none}
}


/* ============================================
   FULL DARK PAGE (contact.html)
   ============================================ */
body.dark-page{background:var(--dark);color:#fff}
body.dark-page .grid-overlay span{border-color:rgba(255,255,255,.07)}
body.dark-page header{color:#fff}
body.dark-page header.scrolled{
  background:rgba(17,17,17,.8);box-shadow:0 1px 0 rgba(255,255,255,.1)}
body.dark-page .meta{color:rgba(255,255,255,.45)}
body.dark-page .meta-ink{color:#fff}
body.dark-page .btn{border-color:rgba(255,255,255,.5);color:#fff}
body.dark-page .btn:hover{color:var(--red);border-color:var(--red)}
body.dark-page .display,body.dark-page h2,body.dark-page h3{color:#fff}
body.dark-page .lead{color:rgba(255,255,255,.8)}
body.dark-page .dark-sep{border-top:1px solid rgba(255,255,255,.16)}
body.dark-page .contact{margin-top:0;border-top:1px solid rgba(255,255,255,.1)}
body.dark-page footer{border-top:1px solid rgba(255,255,255,.08)}
body.dark-page ::selection{background:var(--red);color:#fff}


/* ============================================
   PRICING
   ============================================ */
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--unit)}
.tier{border-top:2px solid var(--ink);padding-top:1rem;display:flex;flex-direction:column}
.tier.featured{border-top-color:var(--red)}
.tier .badge{color:var(--red);font-weight:700}
.tier h3{margin:.5rem 0 .3rem;text-transform:uppercase}
.tier .price{font-size:clamp(30px,3.6vw,52px);line-height:1;letter-spacing:-.04em;
  font-weight:700;font-variant-numeric:tabular-nums;margin:.7rem 0 .2rem}
.tier .price small{font-size:.42em;font-weight:500;letter-spacing:.06em;color:var(--grey)}
.tier .turn{margin-bottom:1rem}
.tier ul{list-style:none;margin:0 0 1.4rem;padding:0;border-top:1px solid rgba(17,17,17,.14)}
.tier ul li{font-size:14px;line-height:1.4;padding:.6rem 0;
  border-bottom:1px solid rgba(17,17,17,.14);color:#3a3a38}
.tier .cta{margin-top:auto}
@media(max-width:900px){.pricing{grid-template-columns:1fr;gap:calc(var(--unit)*1.8)}}

.price-note{margin-top:calc(var(--unit)*1.6);border-top:1px solid rgba(17,17,17,.16);
  padding-top:.9rem;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--unit)}
.price-note p{font-size:13px;line-height:1.45;color:#3a3a38;max-width:34ch}
@media(max-width:900px){.price-note{grid-template-columns:1fr;gap:.9rem}}

/* ============================================
   TESTIMONIALS
   ============================================ */
.quotes{display:grid;grid-template-columns:repeat(2,1fr);gap:calc(var(--unit)*1.6) var(--unit)}
.quote{border-top:2px solid var(--ink);padding-top:1rem}
.quote blockquote{font-size:clamp(19px,2.1vw,28px);line-height:1.28;letter-spacing:-.02em;
  font-weight:500;margin-bottom:1.1rem}
.quote blockquote::before{content:"“";color:var(--red);margin-right:.05em}
.quote .who{display:flex;flex-direction:column;gap:.15rem}
@media(max-width:900px){.quotes{grid-template-columns:1fr}}

/* ============================================
   LANGUAGE TOGGLE
   ============================================ */
.lang{display:flex;gap:.35rem;align-items:center;margin-left:1.4rem;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.lang button{background:none;border:0;cursor:pointer;font:inherit;color:inherit;
  opacity:.45;padding:0;transition:opacity .3s var(--ease),color .3s var(--ease)}
.lang button.on{opacity:1;color:var(--red);font-weight:700}
.lang span{opacity:.3}
@media(max-width:700px){.lang{margin-left:.8rem;font-size:10px}}

/* ============================================
   PAGE LOADER
   ============================================ */
#loader{position:fixed;inset:0;z-index:200;background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .7s var(--ease),visibility .7s}
#loader.done{opacity:0;visibility:hidden}
#loader .l-inner{text-align:center}
#loader .l-mark{font-size:clamp(30px,6vw,64px);font-weight:700;letter-spacing:-.03em;
  text-transform:uppercase;line-height:1;overflow:hidden}
#loader .l-mark span{display:inline-block;transform:translateY(105%);
  animation:lRise .8s var(--ease) forwards}
@keyframes lRise{to{transform:translateY(0)}}
#loader .l-bar{width:min(220px,50vw);height:2px;background:rgba(17,17,17,.12);
  margin:1.4rem auto 0;overflow:hidden}
#loader .l-bar i{display:block;height:100%;width:0;background:var(--red);
  animation:lFill 1.1s var(--ease) forwards}
@keyframes lFill{to{width:100%}}
#loader .l-cap{margin-top:.9rem;opacity:0;animation:lFade .5s .3s var(--ease) forwards}
@keyframes lFade{to{opacity:1}}

/* ============================================
   404
   ============================================ */
.err{min-height:100svh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;gap:1.2rem}
.err .code{font-size:clamp(90px,26vw,320px);line-height:.82;font-weight:700;
  letter-spacing:-.055em;color:var(--red)}
.err .msg{font-size:clamp(17px,2vw,24px);max-width:34ch;line-height:1.35}


/* ============================================
   DUAL PRICING (EN $ / RU ₽)
   ============================================ */
.price-rub{display:none}
.price-usd{display:inline}
html[lang=ru] .price-rub{display:inline}
html[lang=ru] .price-usd{display:none}

/* видео без обрезки — высота от самого файла */
.v-free{margin:calc(var(--unit)*2) 0}
.v-free video{width:100%;height:auto;display:block;background:#DEDEDA}

/* два видео рядом, разные пропорции */
.v-pair{display:grid;grid-template-columns:1fr .75fr;gap:var(--unit);
  align-items:start;margin:calc(var(--unit)*2) 0}
.v-pair video{width:100%;height:auto;display:block;background:#DEDEDA}
@media(max-width:700px){.v-pair{grid-template-columns:1fr}}

/* ---------- SPLIT LINES FIX ---------- */
.split .line,
.display .line,
[data-split] .line{
  display:block !important;
  overflow:clip;
  overflow-clip-margin:.25em;
}
.split .line > span,
.display .line > span{display:block}

@media(max-width:700px){
  .display{font-size:clamp(52px,13.5vw,96px)}
  .contact h2{font-size:clamp(34px,10vw,56px)}
}
  .hero{padding-top:calc(var(--unit)*3);padding-bottom:calc(var(--unit)*2)}

/* ---------- MOBILE MENU POLISH ---------- */
@media(max-width:700px){
  .burger{gap:7px;padding:6px}
  .burger span{width:28px;height:2px}
  header.open .burger span:nth-child(1){transform:translateY(9px) rotate(45deg)}
  header.open .burger span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}

  .lang{bottom:6rem}

  body.dark-page header{color:#fff}
  body.dark-page header nav{background:var(--dark);color:#fff}
  body.dark-page header.scrolled{background:rgba(17,17,17,.95)}
  body.dark-page header.open{background:var(--dark)}
}

@media(max-width:900px){
  .h-card{transition:transform .5s var(--ease)}
  .h-card .thumb img{transition:transform .8s var(--ease)}
  .h-progress{display:block !important;position:static;margin:1rem var(--unit) 0}
}

/* ---------- DARK PAGE MENU ---------- */
body.dark-page .burger span{background:#fff !important}
body.dark-page header .logo{color:#fff}

@media(max-width:700px){
  body.dark-page header nav,
  body.dark-page header.open{background:#111 !important}
  body.dark-page header nav a{color:#fff}
  body.dark-page header.open .burger span{background:#fff !important}
}

@media(max-width:700px){
  .lang{
    position:static !important;
    transform:none !important;
    bottom:auto;left:auto;
    margin-top:1.4rem;
  }
  .lang button,.lang span{font-size:13px;letter-spacing:.14em}
}