/* ==========================================================================
   Витрина портфолио — кинематографичный герой на видео, liquid-glass,
   Instrument Serif. Тема одна, тёмно-синяя: белый текст поверх видео
   требует тёмной подложки, поэтому автопереключения на светлую нет.
   Токены в HSL по образцу shadcn — hsl(var(--x)) даёт прозрачности «/.6».
   ========================================================================== */

:root{
  --background:       201 100% 13%;   /* глубокий navy */
  --foreground:       0 0% 100%;
  --muted-foreground: 240 4% 66%;
  --primary:          0 0% 100%;
  --primary-foreground: 0 0% 4%;
  --secondary:        0 0% 10%;
  --muted:            0 0% 10%;
  --accent:           0 0% 10%;
  --border:           0 0% 18%;
  --input:            0 0% 18%;

  --font-display: 'Instrument Serif', Georgia, serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --wrap: 80rem;          /* max-w-7xl */
  --gutter: 1.5rem;       /* px-6 */
  --radius: 1rem;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:hsl(var(--background));
  color:hsl(var(--foreground));
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

h1,h2,h3,.display{
  font-family:var(--font-display);
  font-weight:400;
  letter-spacing:-.02em;
  line-height:1.05;
}

:focus-visible{outline:2px solid hsl(var(--foreground));outline-offset:3px;border-radius:6px}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.muted{color:hsl(var(--muted-foreground))}

.skip{
  position:absolute;left:1rem;top:-100px;z-index:100;
  padding:.75rem 1rem;border-radius:.5rem;
  background:hsl(var(--foreground));color:hsl(var(--primary-foreground));
  transition:top .18s ease;
}
.skip:focus{top:1rem}

/* ============================ LIQUID GLASS ============================ */
.liquid-glass{
  background:rgba(255,255,255,.01);
  background-blend-mode:luminosity;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  border:none;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.1);
  position:relative;
  overflow:hidden;
}
.liquid-glass::before{
  content:'';
  position:absolute;inset:0;
  border-radius:inherit;
  padding:1.4px;
  background:linear-gradient(180deg,
    rgba(255,255,255,.45) 0%, rgba(255,255,255,.15) 20%,
    rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
    rgba(255,255,255,.15) 80%, rgba(255,255,255,.45) 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  pointer-events:none;
}

/* ============================ АНИМАЦИИ ============================ */
@keyframes fade-rise{
  from{opacity:0;transform:translateY(24px)}
  to{opacity:1;transform:translateY(0)}
}
.animate-fade-rise{animation:fade-rise .8s ease-out both}
.animate-fade-rise-delay{animation:fade-rise .8s ease-out .2s both}
.animate-fade-rise-delay-2{animation:fade-rise .8s ease-out .4s both}

.reveal{opacity:0;transform:translateY(16px)}
.reveal.is-in{opacity:1;transform:none;transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}

/* ============================ КНОПКИ ============================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  border-radius:999px;
  font-size:.875rem;font-weight:500;line-height:1;
  white-space:nowrap;
  transition:transform .2s ease,background-color .2s ease,color .2s ease;
}
.btn:hover{transform:scale(1.03)}
.btn--glass{padding:.625rem 1.5rem;color:hsl(var(--foreground))}          /* px-6 py-2.5 */
.btn--glass-lg{padding:1.25rem 3.5rem;font-size:1rem;color:hsl(var(--foreground))} /* px-14 py-5 */
.btn--primary{padding:.875rem 1.5rem;background:hsl(var(--primary));color:hsl(var(--primary-foreground))}
.btn--ghost{padding:.875rem 1.5rem;color:hsl(var(--foreground))}

/* ============================ СЦЕНА: ВИДЕО + ШАПКА + ГЕРОЙ ============================ */
.stage{
  position:relative;
  min-height:100svh;
  display:flex;flex-direction:column;
  overflow:hidden;
  background:hsl(var(--background));   /* пока видео не загрузилось */
}
.stage__video{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;
  object-fit:cover;
}

.header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  transition:background-color .3s ease,border-color .3s ease,backdrop-filter .3s ease;
  border-bottom:1px solid transparent;
}
.header.is-scrolled{
  background:hsl(var(--background) / .72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom-color:hsl(var(--border) / .6);
}
.header__in{
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
  max-width:var(--wrap);margin-inline:auto;
  padding:1.5rem 2rem;                     /* px-8 py-6 */
}
.brand{
  font-family:var(--font-display);
  font-size:1.875rem;                      /* text-3xl */
  letter-spacing:-.025em;
  line-height:1;
  color:hsl(var(--foreground));
}
.brand sup{font-size:.75rem;vertical-align:top;margin-left:.1em}
.nav{display:none;align-items:center;gap:2rem}
.nav a{font-size:.875rem;color:hsl(var(--muted-foreground));transition:color .2s ease}
.nav a:hover,.nav a.is-active{color:hsl(var(--foreground))}
@media (min-width:768px){ .nav{display:flex} }

.hero{
  position:relative;z-index:10;
  flex:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  padding:8rem 1.5rem 10rem;               /* pt-32 px-6 pb-40 */
}
.hero h1{
  max-width:var(--wrap);
  font-size:3rem;                          /* text-5xl */
  line-height:.95;
  letter-spacing:-.026em;                  /* tracking-[-2.46px] при 96px */
  text-wrap:balance;
}
.hero h1 em{font-style:normal;color:hsl(var(--muted-foreground))}
.hero__sub{
  margin-top:2rem;
  max-width:42rem;                         /* max-w-2xl */
  color:hsl(var(--muted-foreground));
  font-size:1rem;
  line-height:1.625;
}
.hero__cta{margin-top:3rem}
@media (min-width:640px){
  .hero h1{font-size:4.5rem}               /* sm:text-7xl */
  .hero__sub{font-size:1.125rem}
}
@media (min-width:768px){
  .hero h1{font-size:6rem}                 /* md:text-8xl */
}

/* ============================ ЦИФРЫ ============================ */
.stats{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem 1.5rem;
  padding:2.5rem 0;
  border-top:1px solid hsl(var(--border));
  border-bottom:1px solid hsl(var(--border));
}
.stats dt{font-family:var(--font-display);font-size:2.5rem;line-height:1;letter-spacing:-.02em}
.stats dd{margin-top:.5rem;color:hsl(var(--muted-foreground));font-size:.875rem;line-height:1.45}
@media (min-width:768px){ .stats{grid-template-columns:repeat(4,minmax(0,1fr))} }

/* ============================ СЕКЦИИ ============================ */
.section{padding:6rem 0}
.section--tight{padding:4.5rem 0}
.section__head{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:1rem 2rem;
  padding-bottom:1.5rem;margin-bottom:3.5rem;
  border-bottom:1px solid hsl(var(--border));
}
.section__head h2{font-size:clamp(2.25rem,1.5rem + 3vw,3.5rem)}
.section__head p{margin-left:auto;max-width:40ch;color:hsl(var(--muted-foreground));font-size:.9375rem}

/* ============================ РАБОТЫ ============================ */
.works{display:grid;gap:5rem}
.work{display:grid;gap:2rem;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:start}
@media (max-width:900px){ .work{grid-template-columns:1fr} }

.work__shot{
  border-radius:var(--radius);overflow:hidden;
  border:1px solid hsl(var(--border));
  background:hsl(var(--secondary));
  aspect-ratio:16/10;
  transition:transform .35s cubic-bezier(.2,.7,.3,1);
}
.work__shot img{width:100%;height:100%;object-fit:cover;object-position:top center}
.work:hover .work__shot{transform:translateY(-4px)}

.work__tag{
  display:block;margin-bottom:.75rem;
  font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;
  color:hsl(var(--muted-foreground));
}
.work__title{font-size:2rem;line-height:1.1}
.work__title a{transition:color .2s ease}
.work__title a:hover{color:hsl(var(--muted-foreground))}
.work__desc{margin-top:.75rem;color:hsl(var(--muted-foreground));line-height:1.6}
.work__list{margin-top:1.25rem;display:grid;gap:.5rem}
.work__list li{position:relative;padding-left:1.25rem;font-size:.9375rem;line-height:1.5}
.work__list li::before{
  content:'';position:absolute;left:0;top:.6em;
  width:6px;height:6px;border-radius:2px;
  background:var(--work-a,hsl(var(--foreground)));
}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.25rem}
.chip{
  padding:.25rem .75rem;border-radius:999px;
  border:1px solid hsl(var(--border));
  font-size:.75rem;color:hsl(var(--muted-foreground));
}
.work__links{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}
.work__note{margin-top:1rem;font-size:.875rem;color:hsl(var(--muted-foreground))}

/* ============================ УСЛУГИ ============================ */
.grid-3{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{border-radius:1.25rem;padding:2rem}
.card__num{display:block;margin-bottom:1rem;font-size:.75rem;letter-spacing:.12em;color:hsl(var(--muted-foreground))}
.card h3{font-size:1.5rem;margin-bottom:.75rem}
.card p{color:hsl(var(--muted-foreground));font-size:.9375rem;line-height:1.55}

/* ============================ ПРОЦЕСС ============================ */
.steps{counter-reset:s;border-top:1px solid hsl(var(--border))}
.steps li{
  counter-increment:s;
  display:grid;grid-template-columns:3.5rem minmax(0,1fr) minmax(0,1.2fr);gap:1.5rem;align-items:baseline;
  padding:1.5rem 0;border-bottom:1px solid hsl(var(--border));
}
.steps li::before{content:'0' counter(s);font-size:.8125rem;color:hsl(var(--muted-foreground))}
.steps b{font-family:var(--font-display);font-weight:400;font-size:1.375rem;letter-spacing:-.01em}
.steps span{color:hsl(var(--muted-foreground));font-size:.9375rem;line-height:1.5}
@media (max-width:720px){
  .steps li{grid-template-columns:3rem minmax(0,1fr)}
  .steps span{grid-column:2}
}

/* ============================ КОНТАКТЫ ============================ */
.contact{border-radius:1.5rem;padding:4rem 2rem;text-align:center}
.contact h2{font-size:clamp(2.25rem,1.5rem + 3vw,3.5rem);text-wrap:balance}
.contact p{margin:1rem auto 0;max-width:52ch;color:hsl(var(--muted-foreground))}
.contact__links{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;margin-top:2rem}

.footer{border-top:1px solid hsl(var(--border));padding:2rem 0;margin-top:2rem}
.footer__in{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between}
.footer p{color:hsl(var(--muted-foreground));font-size:.875rem}

/* ============================ ДВИЖЕНИЕ ОТКЛЮЧЕНО ============================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .reveal,.animate-fade-rise,.animate-fade-rise-delay,.animate-fade-rise-delay-2{opacity:1;transform:none}
  .btn:hover,.work:hover .work__shot{transform:none}
}