/* ==========================================================================
   Folio — Design tokens
   ========================================================================== */
:root{
  --bg: #f6f6f6;
  --surface: #ffffff;
  --surface-2: #eeeeee;
  --ink: #24262b;
  --muted: #9a9a9a;
  --dark: #17181a;
  --dark-2: #1d1d1e;
  --accent-pink: #eb2e9f;
  --accent-blue: #4f7dff;
  --accent-yellow: #fec901;
  --accent-green: #22c57a;

  --radius-xl: 32px;
  --radius-lg: 24px;
  --radius-md: 20px;
  --radius-sm: 12px;
  --radius-pill: 999px;

  --gap: 8px;
  --pad: 32px;

  --sidebar-w: 398px;
  --fab-size: 64px;
  --side-margin: 48px;
  --sidebar-gap: 8px;

  --content-max: 1418px;

  --ff-display: 'Inter', system-ui, sans-serif;
  --ff-body: 'Inter', system-ui, sans-serif;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
html, body{ max-width:100%; overflow-x:hidden; }
body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--ff-body);
  font-weight: 500;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
}
/* Modifier: page-wide dark theme (design-system.html) */
body.ds-page{
  background:#0c0c0e;
  color:#fff;
}
body.ds-page .card:not(.plain){ background: var(--dark); }
body.ds-page .teaser-card{ background: var(--dark-2); }
body.ds-page .teaser-card__inner{ background: var(--dark); }
body.ds-page .teaser-card .pill, body.ds-page .teaser-card .pill-icon{ background:var(--dark-2); color:#fff; }
body.ds-page .teaser-card:hover .pill, body.ds-page .teaser-card:hover .pill-icon{ background:#fff; color:var(--ink); }
body.ds-page .case-modal__close{ background:var(--dark-2); color:#fff; }

/* Fixed top bar + burger menu + case-modal — dark theme on design-system.html */
body.ds-page .subnav .nav-btn{ background: var(--dark); color:#fff; }
body.ds-page .subnav .toc a:hover, body.ds-page .subnav .toc a.is-active{ color:#fff; }
body.ds-page .case-header{ background: rgba(12,12,14,.82); color:#fff; }
body.ds-page .case-header__subtitle{ color:#9a9a9a; }
body.ds-page .menu-fab{ background: var(--dark); }
body.ds-page .menu-fab span, body.ds-page .menu-fab span::before, body.ds-page .menu-fab span::after{ background:#fff; }
body.ds-page .case-modal__panel{ background: var(--dark); color:#fff; }
body.ds-page .case-modal__subtitle{ color:#9a9a9a; }
body.ds-page .case-modal__lang button{ color:#9a9a9a; }
body.ds-page .case-modal__lang button.active{ color:#fff; }
body.ds-page .case-modal__toc a{ background: var(--dark-2); color:#9a9a9a; }
body.ds-page .case-modal__toc a:hover, body.ds-page .case-modal__toc a.is-active{ color:#fff; }
body.ds-page .case-modal__profile .profile-card__role{ color:#9a9a9a; }
body.ds-page .case-modal__profile .exp-row{ background: var(--dark-2); color:#fff; }
body.ds-page .case-modal__profile .exp-row__period{ color:#9a9a9a; }
body.ds-page .case-modal__profile .sidebar-links a{ background: var(--dark-2); color:#fff; }
body.ds-page .case-modal__profile .sidebar-links a:hover{ background:#fff; color:var(--ink); }
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }

::selection{ background: var(--accent-pink); color:#fff; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* ==========================================================================
   Layout — sidebar (left, fixed) + main content + menu fab (right, fixed)
   ========================================================================== */
.layout{
  position: relative;
  min-height: 100vh;
  padding: var(--side-margin);
  display: block;
}

.sidebar{
  position: fixed;
  top: var(--side-margin);
  left: var(--side-margin);
  width: var(--sidebar-w);
  max-height: calc(100vh - (var(--side-margin) * 2));
  overflow-y: auto;
  z-index: 40;
  scrollbar-width: thin;
}
.sidebar::-webkit-scrollbar{ width:4px; }
.sidebar::-webkit-scrollbar-thumb{ background: #ddd; border-radius: 4px; }

.profile-burger{
  display:none;
}

.profile-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.4);
  z-index:75; opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.profile-overlay.is-open{ opacity:1; pointer-events:auto; }

.profile-modal{
  position:fixed; left:50%; top:50%;
  transform: translate(-50%,-48%) scale(.97);
  width:min(440px, calc(100vw - 24px));
  z-index:80;
  display:flex; flex-direction:column; align-items:flex-end; gap:8px;
  opacity:0; pointer-events:none;
  transition: opacity .3s ease, transform .3s ease;
}
.profile-modal.is-open{
  opacity:1; pointer-events:auto;
  transform: translate(-50%,-50%) scale(1);
}
.profile-modal__close{
  width:48px; height:48px; border-radius:50%; flex-shrink:0;
  background:#fff; border:none; cursor:pointer;
  font-size:18px; color:var(--ink);
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  display:flex; align-items:center; justify-content:center;
}
.profile-modal__panel{
  width:100%;
  max-height: calc(100vh - 110px); overflow-y:auto;
  background:var(--bg); padding:16px; border-radius:24px;
  box-shadow: 0 24px 80px rgba(0,0,0,.25);
  display:flex; flex-direction:column; gap:8px;
}
.profile-modal .sidebar-list,
.profile-modal .sidebar-links{ display:flex !important; }
.profile-modal .profile-card{
  display:grid !important;
  grid-template-columns: 56px 1fr auto;
  column-gap:14px;
  row-gap:0;
  align-items:center;
  justify-content:start;
  text-align:left !important;
  padding:4px 0;
}
.profile-modal .profile-card__avatar{ width:56px; height:56px; border-radius:14px; grid-row:1 / span 2; margin-bottom:0; }
.profile-modal .profile-card__name{ grid-column:2; grid-row:1; align-self:end; font-size:16px; }
.profile-modal .profile-card__role{ grid-column:2; grid-row:2; align-self:start; font-size:13px; }
.profile-modal .profile-card__lang{
  display:flex !important; position:static; margin:0;
  grid-column:3; grid-row:1 / span 2; align-self:center;
}

/* 7. Smooth language switch */
body{ transition: opacity .2s ease; }
body.lang-switching{ opacity:0; }

.profile-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  padding: 16px 0 12px;
  text-align:center;
}
.profile-card__avatar{ margin-bottom:10px; }
.profile-card__avatar{
  width:80px; height:80px;
  border-radius: 18px;
  background: transparent;
  position:relative;
  overflow:hidden;
  flex-shrink:0;
}
.profile-card__avatar img{ width:100%; height:100%; object-fit:cover; }
.profile-card__lang{
  position:absolute; top:24px; left:0;
  display:flex; gap:8px; font-size:10px; font-weight:500;
}
.profile-card__lang button{
  border:none; background:none; padding:0; cursor:pointer;
  color: var(--muted); font: inherit; font-size: 10px;
}
.profile-card__lang button.active{ color: var(--ink); }
.profile-card__role{ color:var(--muted); font-size:14px; }
.profile-card__name{ font-weight:600; font-size:16px; letter-spacing:-.02em; }

.sidebar-list{
  display:flex; flex-direction:column; gap:8px;
}
.exp-row{
  background: var(--surface);
  border-radius: var(--radius-md);
  padding:16px;
  height:72px;
  display:flex; gap:12px; align-items:center;
}
.exp-row__icon{
  width:40px; height:40px; border-radius:10px;
  background: transparent;
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:16px;
  overflow:hidden;
}
.exp-row__icon img{ width:40px; height:40px; object-fit:cover; border-radius:10px; }
.exp-row__meta{ min-width:0; }
.exp-row__period{ color:var(--muted); font-size:14px; line-height:19px; }
.exp-row__title{ font-weight:600; font-size:16px; line-height:16px; letter-spacing:-.02em; margin-top:4px; }

.sidebar-links{
  display:flex; gap:10px; margin-top:2px;
}
.sidebar-links.single a{ flex:none; width:100%; }
.sidebar-links a{
  flex:1;
  background: var(--surface);
  border-radius: var(--radius-md);
  height:64px;
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-weight:600; font-size:16px; letter-spacing:-.02em;
  transition: background .15s ease;
}
.sidebar-links a{ transition: background .25s ease, color .25s ease; }
.sidebar-links a:hover{ background: var(--dark); color:#fff; box-shadow:none; }

.icon-arrow{
  width:16px; height:16px; flex-shrink:0;
}

/* ==========================================================================
   Right fixed control — menu FAB
   ========================================================================== */
.menu-fab{
  position: fixed;
  top: var(--side-margin);
  right: var(--side-margin);
  width: var(--fab-size); height: var(--fab-size);
  border-radius: var(--radius-md);
  background: var(--surface);
  border:none; cursor:pointer;
  z-index: 60;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  transition: transform .15s ease;
}
.menu-fab:hover{ transform: translateY(-2px); }
.menu-fab span{ display:block; width:16px; height:2px; background: var(--ink); border-radius:2px; position:relative; }
.menu-fab span::before, .menu-fab span::after{
  content:""; position:absolute; left:0; width:16px; height:2px; background:var(--ink); border-radius:2px;
}
.menu-fab span::before{ top:-5px; }
.menu-fab span::after{ top:5px; }

.nav-drawer{
  position: fixed;
  top:0; right:0; bottom:0;
  width: min(360px, 100vw);
  background: var(--dark-2);
  color:#fff;
  z-index: 70;
  padding: 24px;
  transform: translateX(100%);
  transition: transform .3s ease;
  display:flex; flex-direction:column;
}
.nav-drawer.is-open{ transform: translateX(0); }
.nav-drawer__close{
  align-self:flex-end;
  width:40px; height:40px; border-radius:12px;
  background: rgba(255,255,255,.08);
  border:none; color:#fff; font-size:18px; cursor:pointer;
  margin-bottom:32px;
}
.nav-drawer__eyebrow{ color:#9a9a9a; font-size:14px; margin-bottom:16px; }
.nav-drawer nav{ display:flex; flex-direction:column; gap:4px; }
.nav-drawer nav a{
  padding:14px 16px; border-radius:16px;
  font-weight:800; font-size:22px; letter-spacing:-.02em;
  transition: background .15s ease;
}
.nav-drawer nav a:hover, .nav-drawer nav a.is-active{ background: rgba(255,255,255,.08); }
.nav-drawer nav a.is-active{ color: var(--accent-yellow); }
.nav-drawer__footer{ margin-top:auto; color:#666; font-size:13px; }

.scrim{
  position:fixed; inset:0; background:rgba(0,0,0,.35);
  z-index:65; opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.scrim.is-open{ opacity:1; pointer-events:auto; }

/* ==========================================================================
   Main content column
   ========================================================================== */
.content{
  max-width: var(--content-max);
  margin: 0 auto;
  margin-left: calc(var(--sidebar-w) + var(--side-margin) + var(--sidebar-gap));
  display:flex; flex-direction:column; gap:8px;
}
.content.subpage{
  margin-left: calc(var(--side-margin) + 160px + 40px);
}
@media (max-width:1024px){
  .content.subpage{ margin-left:0; }
}

/* ==========================================================================
   Hero (dark)
   ========================================================================== */
.hero{
  position:relative;
  overflow:hidden;
  background: #1d1d1d;
  border-radius: var(--radius-lg);
  padding: 8px;
  color:#fff;
  min-height: 639px;
  display:flex; flex-direction:column;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(75% 90% at 12% 0%, rgba(150,45,230,.9), transparent 62%),
    radial-gradient(45% 55% at 52% 0%, rgba(190,50,255,.4), transparent 70%),
    radial-gradient(35% 40% at 0% 55%, rgba(235,46,159,.25), transparent 70%);
  pointer-events:none;
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background: url("assets/Bg_main_noise.png") top left / cover no-repeat;
  mix-blend-mode: soft-light;
  opacity:.18;
  pointer-events:none;
}
/* Modifier: green noise variant (used on monetization.html hero instead of the default violet glow) */
.hero.green::before{
  background: url("assets/Green_noise.png") left center / cover no-repeat;
}
.hero.green{ min-height:535px; justify-content:center; }
.hero.case-hero.green .hero__text{ padding-top:96px; gap:24px; }
.hero.green .case-hero__logo{ top:-4px; width:140px; height:140px; }
@media (max-width:1024px){
  .hero.green{ min-height:508px; }
  .hero.case-hero.green .hero__text{ padding-top:66px; }
  .hero.green .case-hero__logo{ top:6px; width:140px; height:140px; }
}
@media (max-width:720px){
  .hero.green{ min-height:481px; }
  .hero.case-hero.green .hero__text{ padding-top:40px; }
  .hero.green .case-hero__logo{ top:-32px; width:140px; height:140px; }
}
/* Modifier: push hero__text lower (used on video.html, without the green color swap) */
.hero.case-hero.video{ min-height:535px; justify-content:center; }
.hero.case-hero.video .hero__text{ padding-top:160px; }
.hero.video .case-hero__logo{ top:88px; width:140px; height:140px; }
@media (max-width:1024px){
  .hero.case-hero.video{ min-height:508px; }
  .hero.case-hero.video .hero__text{ padding-top:130px; }
  .hero.video .case-hero__logo{ top:56px; width:140px; height:140px; }
}
@media (max-width:720px){
  .hero.case-hero.video{ min-height:481px; }
  .hero.case-hero.video .hero__text{ padding-top:104px; }
  .hero.video .case-hero__logo{ top:16px; width:140px; height:140px; }
}
.hero__text{ position:relative; z-index:1; padding: 24px 24px 0; display:flex; flex-direction:column; gap:16px; }
.hero h1{
  font-weight:900; font-size: clamp(28px, 3.2vw, 48px);
  letter-spacing:-.03em; line-height:1.05; margin:0; max-width: 840px;
}
.hero .sub{ font-size:18px; margin:0; }
.hero .feature-grid{
  position:relative; z-index:1;
  margin-top:auto;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:8px;
}
.feature-card{
  background: rgba(12,12,14,.78);
  backdrop-filter: blur(8px);
  border-radius: var(--radius-lg);
  padding:24px;
  min-height: 382px;
  display:flex; flex-direction:column; justify-content:space-between;
  position:relative; z-index:1;
}
.feature-card__icon{ font-size:32px; }
.feature-card__icon img{ width:auto; height:64px; max-width:100%; object-fit:contain; object-position:left top; }
.feature-card p{
  font-weight:900; font-size:24px; letter-spacing:-.02em; line-height:1.05; margin:0;
}

/* ==========================================================================
   Cards / case studies
   ========================================================================== */
.showcase-img{ position:static; width:100%; height:auto; object-fit:cover; border-radius: var(--radius-md); display:block; }
.showcase-img.contain{ width:min(980px, 88%); margin: 0 auto; height:auto; object-fit:contain; border-radius:0; }
.showcase.fill{ height:500px; padding:0; display:block; }
.showcase.fill .showcase-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius: var(--radius-lg); }
.showcase.fill .showcase-img.bottom{
  top:auto; bottom:0; left:50%; transform:translateX(-50%);
  height:436px; width:auto; max-width:none; object-fit:contain;
  border-radius:0;
}
@media (max-width:1024px){ .showcase.fill{ height:360px; } .showcase.fill .showcase-img.bottom{ height:320px; } }
@media (max-width:720px){ .showcase.fill{ height:240px; } .showcase.fill .showcase-img.bottom{ height:220px; } }
.project-card__thumb, .teaser-card__media{ overflow:hidden; }
.icon-chip__icon img{ width:24px; height:24px; object-fit:contain; }

.card{
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 8px;
}
.card__text{
  padding: 24px 24px 0;
  display:flex; flex-direction:column;
}
.card h2{
  font-weight:900; font-size: clamp(24px, 2.6vw, 48px);
  letter-spacing:-.03em; line-height:1.08; margin:0 0 16px;
}
.card .lede{
  color:var(--muted); font-size:18px; line-height:1.5; max-width:700px; margin:0 0 24px;
}
.lede-list{ color:var(--muted); font-size:18px; line-height:1.5; padding-left:22px; max-width:700px; }
@media (max-width:720px){ .lede-list{ font-size:16px; } }

.stat-row{
  display:flex; flex-wrap:wrap; gap:48px;
}
.stat{ display:flex; flex-direction:column; gap:8px; }
/* Modifier: each metric on its own tile (used in case-page "Результаты" blocks) */
.stat-row.tiles{ gap:8px; flex-wrap:nowrap; width:100%; }
.stat-row.tiles .stat{
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  flex:1 1 0;
}
.shot-card.metrics{ background: var(--bg); padding:0; }
.stat b{ font-weight:900; font-size:32px; letter-spacing:-.03em; display:flex; align-items:center; gap:6px; }
.mini-arrow{ font-size:0.5em; font-weight:600; color: var(--muted); display:inline-block; }
.mini-arrow-img{ width:20px; height:20px; object-fit:contain; display:inline-block; flex-shrink:0; }
.stat span{ color:var(--muted); font-size:18px; }

.showcase{
  background: var(--bg);
  border-radius: var(--radius-lg);
  padding: 16px;
  position:relative;
  min-height: 0;
  overflow:hidden;
  margin-top: 40px;
  display:flex; flex-direction:column; justify-content:center;
}
.showcase .pill-row{
  position:absolute; left:16px; bottom:16px; z-index:2;
  display:flex; gap:6px;
}
.showcase .eyebrow-row{
  position:absolute; left:16px; top:16px; z-index:2;
  display:flex; gap:12px; font-size:14px; color:#9a9a9a; font-weight:500;
  mix-blend-mode: difference;
}
.pill{
  background:#fff; border-radius: var(--radius-pill);
  padding:8px 12px; font-weight:600; font-size:16px; letter-spacing:-.02em;
  display:inline-flex; align-items:center; gap:6px;
  transition: background .25s ease, color .25s ease;
}
.pill-icon{
  width:38px; height:38px; border-radius:50%;
  background:#fff; display:flex; align-items:center; justify-content:center;
  transition: background .25s ease, color .25s ease;
}

/* ==========================================================================
   Hover: инверсия кнопок + тень под картинкой при наведении на блок
   ========================================================================== */
.showcase-img, .teaser-card__media, .teaser-card__inner, .project-card__thumb img{
  transition: box-shadow .3s ease, transform .3s ease;
}
.showcase:hover .pill, .showcase:hover .pill-icon,
.teaser-card:hover .pill, .teaser-card:hover .pill-icon{
  background: var(--dark);
  color:#fff;
}
.teaser-card:hover .teaser-card__inner{
  box-shadow: 0 48px 96px -32px rgba(0,0,0,.18), 0 20px 48px -20px rgba(0,0,0,.1);
}

/* ==========================================================================
   Compare panels — "было / стало" pair (design-system case page)
   ========================================================================== */
.compare-panels{ display:flex; gap:8px; }
.compare-panels.card-slider{ gap:8px; }
.compare-panels .panel{
  flex:1; position:relative; overflow:hidden;
  background: var(--dark);
  border-radius: var(--radius-lg);
  padding:32px;
  height:750px;
  display:flex; flex-direction:column;
  color:#fff;
}
.compare-panels .panel.violet{ background: var(--dark) url("assets/Bg.png") center / cover no-repeat; }
.compare-panels .panel.tv{ background: var(--dark) url("assets/Bg_Tv.png") center / cover no-repeat; }
.compare-panels .panel h3{ font-weight:900; font-size:36px; margin:0 0 8px; letter-spacing:-.02em; position:relative; z-index:2; }
.compare-panels .panel p{ margin:0; font-size:15px; color:#d8d8db; line-height:1.5; max-width:380px; position:relative; z-index:2; }
.compare-panels .panel img{
  position:absolute; left:0; right:0; bottom:0;
  width:100%; height:auto; max-height:78%;
  object-fit:contain; object-position:bottom center;
  pointer-events:none; z-index:1; margin:0;
  transform: scale(1.3);
  transform-origin: 50% 100%;
}
@media (max-width:1024px){
  .compare-panels.card-slider .panel{ flex:0 0 88%; height:550px; padding:24px; }
  .compare-panels:not(.card-slider) .panel{ height:550px; padding:24px; }
}
@media (max-width:720px){
  .compare-panels.card-slider .panel{ flex:0 0 88%; height:420px; padding:20px; }
  .compare-panels:not(.card-slider) .panel{ height:420px; padding:20px; }
  .compare-panels .panel h3{ font-size:26px; }
}

/* Modifier: dark variant of the metric tiles (used on design-system.html "Результаты") */
.stat-row.tiles.dark .stat{ background:var(--dark); color:#fff; }
.stat-row.tiles.dark .stat span{ color:#9a9a9a; }

/* ==========================================================================
   Case link cards (project grid on home)
   ========================================================================== */
.project-grid{
  display:flex; flex-direction:column; gap:8px;
}
.project-row{ display:flex; gap:8px; }
.project-card{
  flex:1;
  background: var(--bg);
  border-radius: var(--radius-lg);
  padding:16px;
  min-height: 800px;
  display:flex; flex-direction:column;
}
.project-card__meta{ display:flex; gap:12px; color:#9a9a9a; font-size:14px; font-weight:500; position:relative; z-index:2; mix-blend-mode:difference; }
.project-card__thumb{
  flex:1; border-radius: 0;
  margin: 8px 0 0;
  background: transparent;
  border: none;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.project-card__thumb img{
  width:auto; height:auto;
  max-width: 92%; max-height: 92%;
  object-fit: contain;
  border-radius: 24px;
  display:block;
}
.project-card__thumb.phone img{
  max-width: min(300px, 78%);
  border-radius: 44px;
  border: 8px solid #ECECEC;
  background:#fff;
}
.project-card__thumb.wide img{
  max-width: 96%;
  border-radius: 24px;
  border: 1px solid rgba(0,0,0,.08);
}

/* ==========================================================================
   Sub-case cards (two teaser cards inside a case study)
   ========================================================================== */
.teaser-row{ display:flex; gap:8px; }
.teaser-row:not(:first-child){ margin-top:8px; }
.teaser-card{
  flex:1;
  background: var(--bg);
  border-radius: var(--radius-lg);
  padding:16px;
  position:relative;
  min-height: 684px;
}
.teaser-card__meta{ display:flex; gap:12px; color:#9a9a9a; font-size:14px; font-weight:500; position:relative; z-index:2; mix-blend-mode:difference; }
.teaser-card__inner{
  position:absolute; left:50%; top:50%;
  transform: translate(-50%,-50%);
  width: min(467px, calc(100% - 32px));
  background:#fff;
  border-radius: var(--radius-lg);
  padding: 8px 8px 24px;
  display:flex; flex-direction:column; gap:24px;
}
.teaser-card__inner.plain{ background:transparent; padding:0; width:min(530px, calc(100% - 32px)); }
.teaser-card__media{
  background: #0c0c0e;
  border:none;
  border-radius: var(--radius-lg);
  height:252px;
  width: 100%;
  min-width: 0;
  margin: 0;
  position:relative;
  overflow:hidden;
}
.teaser-card__media img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:0; }
.teaser-card h4{ font-weight:900; font-size:24px; letter-spacing:-.02em; margin:0; padding:0 16px; }
.teaser-card .desc{ color:var(--muted); font-size:18px; margin:0; padding:0 16px; }
.teaser-card__cta{
  position:absolute; left:16px; bottom:16px;
}


.btn-pill{
  display:inline-flex; align-items:center; gap:0;
}
.btn-pill .pill{ margin-right:-6px; position:relative; z-index:1; }

/* ==========================================================================
   Footer nav — links to the other 4 pages
   ========================================================================== */
.footer-nav{
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 24px 8px;
  display:grid; grid-template-columns: repeat(4, 1fr);
}
.footer-nav a{
  padding: 8px 24px;
  border-left: 1px solid #ececec;
  display:flex; flex-direction:column; gap:8px;
}
.footer-nav a:first-child{ border-left:none; }
.footer-nav .fn-top{ display:flex; align-items:center; gap:8px; font-weight:800; font-size:24px; letter-spacing:-.02em; }
.footer-nav .fn-top .icon-arrow{ width:20px; height:20px; }
.footer-nav .fn-sub{ color:var(--muted); font-size:16px; }

/* ==========================================================================
   SUBPAGE LEFT NAV — Назад/Главная + TOC (used on case-study pages, NOT home)
   ========================================================================== */
.subnav{
  position: fixed;
  top: var(--side-margin);
  left: var(--side-margin);
  width: 160px;
  z-index: 40;
  display:flex; flex-direction:column; gap:8px;
}
.subnav .nav-btn{
  height:64px;
  background:#fff;
  border-radius: var(--radius-md);
  display:flex; align-items:center; gap:8px;
  padding: 0 20px;
  font-weight:600; font-size:16px; letter-spacing:-.02em;
  white-space:nowrap;
}
.subnav .toc{
  margin-top:16px;
  display:flex; flex-direction:column; gap:16px;
  padding-left:4px;
}
.subnav .toc a{ color:var(--muted); font-size:16px; font-weight:500; transition:color .15s ease; }
.subnav .toc a:hover, .subnav .toc a.is-active{ color:var(--ink); }

@media (max-width:1024px){
  .subnav{ position:static; width:100%; flex-direction:row; margin-bottom:16px; }
  .subnav .nav-btn{ flex:1; justify-content:center; }
  .subnav .toc{ display:none; }
}

/* ==========================================================================
   INFO ROW — Роль / Аудитория / Что было сделано
   ========================================================================== */
.info-row{
  display:flex; flex-wrap:nowrap; justify-content:space-between; gap:48px; overflow-x:auto;
  margin-top:24px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 24px 32px;
  scrollbar-width:none;
  --fade-max: 48px;
  --fade: var(--fade-max);
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--fade)), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - var(--fade)), transparent 100%);
}
.info-row::-webkit-scrollbar{ display:none; }
.info-row.plain{ background:transparent; padding:0 8px; }
.hero-gap{ margin-top:40px; }
@media (max-width:1024px){ .hero-gap{ margin-top:32px; } }
@media (max-width:720px){ .hero-gap{ margin-top:24px; } }
.info-row .info-col{ display:flex; flex-direction:column; gap:8px; min-width:140px; flex:0 0 auto; }
.info-row .info-col span{ color:var(--muted); font-size:16px; }
.info-row .info-col b{ font-weight:500; font-size:16px; }
.info-row .info-col .tags{ display:flex; gap:24px; flex-wrap:nowrap; font-weight:500; font-size:16px; }

/* ==========================================================================
   ICON PANEL — dark card with icon chips (Опыт зрителей / Опыт авторов)
   ========================================================================== */
.icon-panel{
  background:#0c0c0e;
  border-radius: var(--radius-lg);
  padding:24px;
  min-height: 420px;
  display:flex; flex-wrap:wrap; align-content:flex-start; gap:16px;
  position:relative;
}
.icon-panel.single-img{ align-content:center; justify-content:center; align-items:center; padding:0; overflow:hidden; }
.icon-panel__label{
  position:absolute; left:16px; bottom:16px;
  color:#fff; font-size:16px; font-weight:500;
  display:flex; align-items:center; gap:10px;
}
.icon-chip{
  background: rgba(219,226,240,.06);
  border-radius: var(--radius-xl);
  padding:20px;
  flex:1 1 140px;
  min-width:140px;
  display:flex; flex-direction:column; align-items:center; gap:12px; justify-content:center;
  text-align:center;
}
.icon-chip.violet{ background: rgba(190,50,255,.5); }
.icon-chip__icon{ width:48px; height:48px; border-radius:50%; background:rgba(219,226,240,.08); display:flex; align-items:center; justify-content:center; font-size:22px; }
.icon-chip b{ color:#fff; font-size:18px; font-weight:800; letter-spacing:-.02em; }

/* ==========================================================================
   FLOW DIAGRAM — sequential stages (dark), e.g. Автор → Условия → Заявка → Партнёр
   ========================================================================== */
.flow-diagram{
  background:#0c0c0e;
  border-radius: var(--radius-lg);
  padding:24px;
  min-height: 420px;
  position:relative;
  display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap;
}
.flow-diagram__label{ position:absolute; left:16px; top:16px; color:#9a9a9a; font-size:14px; }
.flow-step{
  width:180px; height:180px;
  border-radius: var(--radius-xl);
  background: rgba(219,226,240,.05);
  display:flex; align-items:center; justify-content:center; text-align:center;
  color:#fff; font-weight:800; font-size:20px; letter-spacing:-.02em;
  padding:16px;
}
.flow-step.violet{ background: rgba(190,50,255,.64); }
.flow-arrow{ color:#555; font-size:24px; }

/* ==========================================================================
   BAR CHART — simple comparison bars (dark bg)
   ========================================================================== */
.bar-chart{
  background:#0c0c0e;
  border-radius: var(--radius-lg);
  padding:24px;
  min-height:420px;
  position:relative;
  display:flex; align-items:flex-end; justify-content:center; gap:24px;
}
.bar-chart__label{ position:absolute; left:16px; top:16px; color:#9a9a9a; font-size:14px; }
.bar-col{ display:flex; flex-direction:column; align-items:center; gap:12px; flex:1; max-width:220px; }
.bar-col__value{ color:#be32ff; font-weight:900; font-size:32px; letter-spacing:-.03em; }
.bar-col__bar{ width:100%; border-radius: var(--radius-lg); background: rgba(219,226,240,.08); }
.bar-col.violet .bar-col__value{ color:#be32ff; }
.bar-col.violet .bar-col__bar{ background: rgba(190,50,255,.64); }
.bar-col__label{ color:#fff; font-size:14px; }

/* ==========================================================================
   FUNNEL — step values with connecting baseline
   ========================================================================== */
.funnel{
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding:24px 16px 32px;
  position:relative;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.funnel::-webkit-scrollbar{ display:none; }
.funnel__label{ color:var(--muted); font-size:14px; margin:0 0 16px; position:sticky; left:16px; width:max-content; }
.funnel-row{ display:flex; justify-content:space-between; }
.funnel-step{ display:flex; flex-direction:column; gap:8px; flex:0 0 180px; scroll-snap-align:start; }
.funnel-step b{ font-weight:900; font-size:40px; letter-spacing:-.03em; }
.funnel-step span{ color:var(--muted); font-size:15px; }
.funnel-step__line{ height:3px; background:rgba(0,0,0,.15); border-radius:2px; margin-top:8px; }
.funnel-step.callout{ position:relative; }
.funnel-step .callout-label{ color:#be32ff; font-weight:800; font-size:16px; margin-top:12px; }
.funnel__shape{ display:block; width:auto; height:800px; max-width:none; margin:0 auto; pointer-events:none; }
@media (max-width:1024px){ .funnel__shape{ height:500px; } }
@media (max-width:720px){ .funnel__shape{ height:416px; } }

/* ==========================================================================
   IDEA CARD ICON — check/x badge (used inside .flow-card, see below)
   ========================================================================== */
.idea-card__icon{ font-size:20px; opacity:.6; }
.idea-card__icon img{ width:64px; height:64px; display:block; }

/* ==========================================================================
   COMPARE ROW (dark screenshot comparisons)
   ========================================================================== */
/* ==========================================================================
   CASE MODAL — icon+title header, in-page TOC, profile card + links
   (used on Studio / Monetization / etc. case pages instead of the plain drawer)
   ========================================================================== */
.case-modal-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.4);
  z-index:75; opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.case-modal-overlay.is-open{ opacity:1; pointer-events:auto; }

.case-modal{
  position:fixed; left:50%; top:50%;
  transform: translate(-50%,-48%) scale(.97);
  width:min(440px, calc(100vw - 24px));
  z-index:80;
  display:flex; flex-direction:column; align-items:flex-end; gap:8px;
  opacity:0; pointer-events:none;
  transition: opacity .3s ease, transform .3s ease;
}
.case-modal.is-open{
  opacity:1; pointer-events:auto;
  transform: translate(-50%,-50%) scale(1);
}
.case-modal__close{
  width:48px; height:48px; border-radius:50%; flex-shrink:0;
  background:#fff; border:none; cursor:pointer;
  font-size:18px; color:var(--ink);
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  display:flex; align-items:center; justify-content:center;
}
.case-modal__panel{
  width:100%;
  max-height: calc(100vh - 110px); overflow-y:auto;
  background:var(--bg); padding:16px; border-radius:24px;
  box-shadow: 0 24px 80px rgba(0,0,0,.25);
  display:flex; flex-direction:column; gap:16px;
}
.case-modal__header{
  display:grid; grid-template-columns: 48px 1fr auto;
  column-gap:14px; align-items:center;
}
.case-modal__icon{ width:48px; height:48px; border-radius:14px; overflow:hidden; }
.case-modal__icon img{ width:100%; height:100%; object-fit:cover; display:block; }
.case-modal__title{ font-weight:600; font-size:16px; letter-spacing:-.02em; }
.case-modal__subtitle{ color:var(--muted); font-size:14px; }
.case-modal__lang{ display:flex; gap:8px; font-size:10px; font-weight:500; }
.case-modal__lang button{ border:none; background:none; padding:0; cursor:pointer; color:var(--muted); font:inherit; font-size:10px; }
.case-modal__lang button.active{ color:var(--ink); }

.case-modal__toc{
  display:flex; flex-direction:column; gap:8px;
}
.case-modal__toc a{
  background:#fff;
  height:64px; padding:0 20px; border-radius: var(--radius-md);
  display:flex; align-items:center;
  font-weight:600; font-size:16px; letter-spacing:-.02em;
  color: var(--muted);
  transition: color .15s ease;
}
.case-modal__toc a:hover, .case-modal__toc a.is-active{ color: var(--ink); }

.case-modal__profile{
  display:flex; flex-direction:column; gap:8px;
}
.case-modal__profile .sidebar-list{ display:flex !important; }

/* ==========================================================================
   PHONE SCROLL — horizontally scrollable rows of phone screenshots
   ========================================================================== */
.phone-item{
  display:flex; flex-direction:column; align-items:center; gap:40px; flex-shrink:0;
}
.phone-item img{ height:420px; width:auto; border-radius:32px; display:block; }
.phone-item span{ color:var(--muted); font-size:14px; text-align:center; max-width:220px; }
.phone-scroll{
  display:flex; gap:16px; align-items:flex-start; justify-content:center;
  flex-wrap:nowrap; overflow-x:auto;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.phone-scroll::-webkit-scrollbar{ display:none; }
.phone-scroll .phone-item{ scroll-snap-align:start; }
@media (max-width:1024px){
  .phone-item{ gap:24px; }
  .phone-item img{ height:340px; }
  .phone-scroll{ justify-content:flex-start; }
}
@media (max-width:720px){
  .phone-item{ gap:16px; }
  .phone-item img{ height:280px; }
  .phone-scroll .phone-item:first-child{ margin-left:12px; }
  .phone-scroll .phone-item:last-child{ margin-right:12px; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1300px){
  :root{ --sidebar-w: 240px; }
  .hero .feature-grid{ grid-template-columns: repeat(2, 1fr); }
  .feature-card{ min-height: 280px; }
  .hero{ min-height: 0; }
  .project-card{ min-height: 560px; }
  .teaser-card{ min-height: 560px; }
}

@media (max-width: 1024px){
  .layout{ padding: 16px; }
  .sidebar{
    position: fixed; top:0; left:0; right:0; width:auto; z-index:50;
    max-height:none;
    padding: 16px;
    background: rgba(246,246,246,.82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    display:flex; align-items:center; justify-content:space-between; gap:12px;
  }
  .layout{ padding-top: 88px; }
  .profile-card{
    flex:1;
    display:grid;
    grid-template-columns: 56px 1fr;
    column-gap:14px;
    row-gap:0;
    align-items:center;
    justify-content:start;
    text-align:left;
    padding:4px 0;
  }
  .profile-card__avatar{ width:56px; height:56px; border-radius:14px; grid-row:1 / span 2; margin-bottom:0; }
  .profile-card__name{ grid-column:2; grid-row:1; align-self:end; font-size:16px; }
  .profile-card__role{ grid-column:2; grid-row:2; align-self:start; font-size:13px; }
  .profile-card__lang{ display:none; }
  .profile-burger{
    display:flex; align-items:center; justify-content:center;
    width:56px; height:56px; border-radius:16px; flex-shrink:0;
    background:var(--surface); border:none; cursor:pointer;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
  }
  /* proportional screenshot rounding */
  .project-card__thumb.phone img{ border-radius:32px; border-width:6px; }
  .project-card__thumb.wide img{ border-radius:20px; }
  .profile-burger span{ display:block; width:16px; height:2px; background:var(--ink); border-radius:2px; position:relative; }
  .profile-burger span::before, .profile-burger span::after{
    content:""; position:absolute; left:0; width:16px; height:2px; background:var(--ink); border-radius:2px;
  }
  .profile-burger span::before{ top:-5px; }
  .profile-burger span::after{ top:5px; }
  .sidebar > .sidebar-list{ display:none; }
  .sidebar .sidebar-links{ display:none; }
  .content{ margin-left:0; }
  .menu-fab{ top:16px; right:16px; }
  .footer-nav{ grid-template-columns: repeat(2, 1fr); }
  .footer-nav a:nth-child(3){ border-left:none; }
  .info-row{ gap:24px; }

  /* 5. Hero: stop tiles/text from overlapping, breathing room */
  .hero{ min-height:0; padding-bottom:8px; }
  .hero__text{ padding: 24px 24px 24px; }
  .hero .feature-grid{ margin-top:16px; position:relative; }
  .feature-card{ min-height:220px; }

  /* 6. Fix hierarchy: headline must stay bigger than metric numbers */
  .card h2{ font-size:32px !important; }
  .stat b{ font-size:24px; }
}

@media (max-width: 720px){
  :root{ --pad: 20px; }

  /* 2. Fixed header on scroll: translucent blurred bar keeps text reliably readable */
  .layout{ padding-top: 80px; }
  .sidebar{
    position: fixed; top:0; left:0; right:0; width:auto; z-index:50;
    padding: 12px 16px; margin-bottom:0;
    background: rgba(246,246,246,.82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  .profile-card__avatar{ width:48px; height:48px; border-radius:12px; }
  .profile-card{ grid-template-columns: 48px 1fr; }

  .profile-burger{ width:48px; height:48px; }
  .project-card__thumb.phone img{ border-radius:24px; border-width:5px; }
  .project-card__thumb.wide img{ border-radius:14px; }
  .hero{ min-height:0; padding:8px; }
  .hero__text{ padding: 12px 12px 0; gap:10px; }
  .hero h1{ font-size:32px; }
  .hero .sub{ font-size:15px; }

  /* 4+7. Hero tiles: horizontal scroll/snap, aligned to same left line as text */
  .hero .feature-grid{
    display:flex; grid-template-columns:none;
    align-items:flex-start;
    overflow-x:auto;
    gap:10px; margin-top:20px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  /* feature-grid sits at hero's own 8px padding edge; +12px card margin = 20px total,
     matching hero__text's 8+12 inset used for the heading above */
  .hero .feature-grid .feature-card:first-child{ margin-left:12px; }
  .hero .feature-grid .feature-card:last-child{ margin-right:12px; }
  .hero .feature-grid::-webkit-scrollbar{ display:none; }
  .feature-card{
    min-height: 260px; padding:16px; gap:16px;
    flex:0 0 62%; scroll-snap-align:start;
    justify-content:flex-start;
  }
  .feature-card p{ margin-top:auto; }
  .feature-card__icon img{ height:44px !important; width:auto !important; max-width:40%; }
  .feature-card p{ font-size:16px; }

  /* 7. Uniform 20px side padding for all card sections */
  .card{ padding:8px; }
  .card__text{ padding:12px 12px 0; }
  .card .lede{ max-width:none; }
  .teaser-row{ margin-left:0; margin-right:0; }

  .card h2{ font-size:26px; }
  .card .lede{ font-size:16px; }

  /* 7. Metrics: single row, horizontally scrollable */
  .stat-scroll{
    position:relative;
  }
  .stat-scroll::after{
    content:"";
    position:absolute; top:0; right:-12px; bottom:2px; width:56px;
    background: linear-gradient(to right, rgba(255,255,255,0), var(--surface) 75%);
    pointer-events:none;
  }
  .stat-row{
    display:flex; flex-wrap:nowrap; overflow-x:auto;
    gap:20px;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
    padding-bottom:2px; padding-right:32px;
  }
  .stat-row::-webkit-scrollbar{ display:none; }
  .stat{ flex:0 0 auto; min-width: max-content; scroll-snap-align:start; }
  .stat b{ font-size:22px; }
  .stat span{ font-size:14px; white-space:nowrap; }

  /* Metric tiles (Результаты): stretch full screen width, no side inset */
  .stat-row.tiles{ flex-wrap:wrap; overflow-x:visible; padding-right:0; width:100%; margin-left:0; margin-right:0; }
  .stat-row.tiles .stat{ flex:1 1 calc(50% - 4px); min-width:0; }
  .stat-row.tiles .stat span{ white-space:normal; }
  .stat-scroll:has(.stat-row.tiles)::after{ content:none; }

  .teaser-row{ flex-direction:column; }
  .hide-mobile{ display:none; }
  .teaser-card{ min-height:0; padding-bottom:76px; }
  .teaser-card__inner{ position:static; transform:none; width:100%; margin-top:12px; }
  .teaser-card h4{ font-size:19px; }
  .teaser-card__media{ height:200px; border-radius:16px; }
  .project-row{ flex-direction:column; }
  .project-row .project-card{ flex:1 1 auto !important; }
  .project-card{ min-height: 420px; }
  .footer-nav{ grid-template-columns: 1fr; }
  .footer-nav a{ border-left:none !important; border-top:1px solid #ececec; }
  .footer-nav a:first-child{ border-top:none; }
  .content{ gap:8px; }
  .icon-panel{ flex-direction:column; }
  .icon-chip{ flex:1 1 auto; width:100%; }
  .flow-diagram{ flex-direction:column; }
  .flow-arrow{ transform:rotate(90deg); }
  .bar-chart{ flex-direction:row; }
}

/* ==========================================================================
   CASE PAGE (Studio) — plain sections, dark hero, media duos, MVP shot cards,
   purple flow cards with horizontal scroll
   ========================================================================== */
.card.plain{ background:transparent; padding:0; }
.card.plain .card__text{ padding:0; }
.card.plain .lede{ max-width:800px; }
.block-gap{ margin-top:196px; }
@media (max-width:1024px){ .block-gap{ margin-top:96px; } }
@media (max-width:720px){ .block-gap{ margin-top:64px; } }
.card h2 .dim{ color:#b9b9b9; }

.case-hero{
  text-align:center;
  min-height:0;
}
.case-hero .hero__text{
  align-items:center;
  padding-top:56px;
  position:relative;
}
.case-hero__logo{
  position:absolute; top:40px; left:50%; transform:translateX(-50%);
  width:140px; height:140px; object-fit:contain; z-index:2;
  pointer-events:none;
}
@media (max-width:1024px){ .case-hero__logo{ width:100px; height:100px; top:32px; } }
@media (max-width:720px){ .case-hero__logo{ width:72px; height:72px; top:24px; } }
.case-hero h1{ max-width:900px; }
.case-hero__preview{
  display:block;
  width:min(980px, 92%);
  height:auto;
  margin: 48px auto -70px;
  position:relative; z-index:1;
}

/* Modifier: bigger preview image (+64px), same positioning otherwise — studio.html hero */
.hero.case-hero.lg .case-hero__preview{ width:min(1044px, 92%); }

/* Modifier: design-system.html hero — fixed 800px height, preview pinned
   to the bottom via absolute position instead of adding to the box height,
   narrower heading/subtitle */
.hero.case-hero.ds{ min-height:800px; overflow:hidden; }
.hero.case-hero.ds .hero__text{ position:relative; z-index:2; margin-top:64px; }
.hero.case-hero.ds h1{ max-width:672px; }
.hero.case-hero.ds .sub{ max-width:560px; }
.hero.ds .case-hero__logo{ top:-16px; }
.hero.case-hero.ds .case-hero__preview{
  position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:min(980px, 88%); margin:0; z-index:1;
}
@media (max-width:1024px){
  .hero.case-hero.ds{ min-height:620px; }
  .hero.ds .case-hero__logo{ top:-24px; width:140px; height:140px; }
  .hero.case-hero.ds .case-hero__preview{ width:680px; }
}
@media (max-width:720px){
  .hero.case-hero.ds{ min-height:533px; }
  .hero.ds .case-hero__logo{ top:-32px; width:140px; height:140px; }
  .hero.case-hero.ds .case-hero__preview{ width:min(980px, 88%); }
}

.media-duo{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:24px; }
.media-duo img{ width:100%; height:auto; border-radius:24px; display:block; }

.shot-card{
  background:var(--surface);
  border-radius:24px;
  padding:24px 16px 40px;
}
.shot-card__label{ color:var(--muted); font-size:14px; padding-left:8px; margin:0 0 32px; }
.shot-card .phone-item{ gap:16px; }
.shot-card .phone-item img{ height:500px; border-radius:12px; }
@media (max-width:1024px){ .shot-card .phone-item{ gap:12px; } .shot-card .phone-item img{ height:360px; border-radius:12px; } }
@media (max-width:720px){ .shot-card .phone-item{ gap:8px; } .shot-card .phone-item img{ height:300px; border-radius:8px; } }

/* Shared horizontal-scroll container for any "heading + slider of cards" block:
   apply alongside a content class, e.g. class="process card-slider" */
.card-slider{
  display:flex; gap:16px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding-bottom:4px;
  --fade-max: 64px;
  --fade: var(--fade-max);
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--fade)), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - var(--fade)), transparent 100%);
}
.card-slider::-webkit-scrollbar{ display:none; }
.card-slider > *:last-child{ margin-right:24px; }
.shot-card:has(.phone-scroll), .funnel{
  position:relative;
  --fade-max: 160px;
  --fade: var(--fade-max);
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--fade)), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - var(--fade)), transparent 100%);
}
/* White cushion layer: sits UNDER the gray mask fade above, so the transition
   goes photo -> white -> page gray instead of jumping straight from photo to gray.
   Only for shot-card photo galleries — .funnel's content already sits directly
   on the page background, so this extra white overlay just reads as a big
   white smear there; it relies on the mask-image fade alone, same as
   card-slider/phone-scroll. */
.shot-card:has(.phone-scroll)::after{
  content:"";
  position:absolute; top:0; right:0; bottom:0; width:160px;
  background: linear-gradient(to right, rgba(255,255,255,0), var(--surface) 80%);
  pointer-events:none;
  border-radius:0 24px 24px 0;
  transition: opacity .2s ease;
}
.shot-card.at-end::after{ opacity:0; }
@media (max-width:720px){
  .shot-card:has(.phone-scroll), .funnel{ --fade-max:150px; }
  .shot-card:has(.phone-scroll)::after{ width:150px; }
}
.flow-cards{ gap:8px; }
.flow-card{
  flex:0 0 546px;
  min-height:450px;
  border-radius:24px;
  padding:24px 24px 108px;
  color:#fff;
  position:relative;
  overflow:hidden;
  scroll-snap-align:start;
  background:
    radial-gradient(130% 120% at 25% 0%, #53228a 0%, #2a1240 45%, #150a20 100%);
}
/* Bottom padding reserves room for the badge/icon anchored at bottom:24px so
   text never overlaps it — if content needs more space than min-height, the
   card grows instead (108px = 24px badge inset + 52px badge height + 32px gap) */
.flow-card:has(.idea-card__icon){ padding-bottom:120px; } /* 64px check/x icon */
.flow-card::after{
  content:"";
  position:absolute; inset:0;
  background: url("assets/Bg_Points.png") center / cover no-repeat;
  mix-blend-mode: soft-light;
  opacity:.6;
  pointer-events:none;
}
.flow-card h3{ font-weight:900; font-size:28px; margin:0 0 12px; letter-spacing:-.02em; position:relative; z-index:1; }
.flow-card p{ margin:0; font-size:15px; color:#d8d8db; line-height:1.55; position:relative; z-index:1; max-width:400px; }
.flow-card__num{
  position:absolute; left:24px; bottom:24px; z-index:1;
  height:52px; width:auto;
}
.flow-card .idea-card__icon{ position:absolute; left:24px; bottom:24px; z-index:1; align-self:auto; }
@media (max-width:1024px){
  .flow-card{ flex:0 0 364px; min-height:375px; }
}
@media (max-width:720px){
  .flow-card{ flex:0 0 66%; min-height:317px; }
  .flow-card h3{ font-size:22px; }
}

.case-header{ display:none; }
@media (max-width:1024px){
  .menu-fab{ width:56px; height:56px; }
  .case-header{
    display:flex; align-items:center; gap:12px;
    position:fixed; top:0; left:0; right:0; z-index:50;
    padding:16px;
    background: rgba(246,246,246,.82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  .case-header__icon{ width:48px; height:48px; border-radius:14px; overflow:hidden; flex-shrink:0; }
  .case-header__icon img{ width:100%; height:100%; object-fit:cover; display:block; }
  .case-header__title{ font-weight:600; font-size:16px; letter-spacing:-.02em; }
  .case-header__subtitle{ color:var(--muted); font-size:13px; }
  .subnav{ display:none; }
  .layout{ padding-top: 80px; }
  .content.subpage{ margin-left:0; }
  html{ scroll-padding-top: 96px; }
}

.case-modal__profile .exp-row{ display:none; }
.case-modal__profile .profile-card{
  display:grid; grid-template-columns: 56px 1fr;
  column-gap:14px; row-gap:0;
  align-items:center; justify-content:start; text-align:left;
  padding:4px 0;
}
.case-modal__profile .profile-card__avatar{ width:56px; height:56px; border-radius:14px; grid-row:1 / span 2; margin-bottom:0; }
.case-modal__profile .profile-card__name{ grid-column:2; grid-row:1; align-self:end; font-size:16px; }
.case-modal__profile .profile-card__role{ grid-column:2; grid-row:2; align-self:start; font-size:13px; }
.case-modal__profile{ margin-top:16px; }

@media (max-width:720px){
  .menu-fab{ width:48px; height:48px; top:16px; right:16px; }
}

/* ==========================================================================
   LIGHTBOX — enlarged, swipeable view for phone screen galleries
   ========================================================================== */
.lightbox-overlay{
  position:fixed; inset:0; z-index:100;
  background:rgba(0,0,0,.92);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.lightbox-overlay.is-open{ opacity:1; pointer-events:auto; }
.lightbox__stage{ max-width:90vw; max-height:85vh; display:flex; align-items:center; justify-content:center; }
.lightbox__img{ max-width:90vw; max-height:85vh; width:auto; height:auto; border-radius:24px; box-shadow:0 24px 80px rgba(0,0,0,.5); }
.lightbox__close, .lightbox__nav{
  position:absolute;
  border-radius:50%;
  background:rgba(255,255,255,.12); border:none; color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s ease;
}
.lightbox__close:hover, .lightbox__nav:hover{ background:rgba(255,255,255,.24); }
.lightbox__close{ top:24px; right:24px; width:48px; height:48px; font-size:18px; }
.lightbox__nav{ top:50%; transform:translateY(-50%); width:56px; height:56px; font-size:28px; }
.lightbox__prev{ left:24px; }
.lightbox__next{ right:24px; }
.lightbox__counter{
  position:absolute; bottom:24px; left:50%; transform:translateX(-50%);
  color:#fff; font-size:14px; opacity:.7;
}
@media (max-width:720px){
  .lightbox__nav{ width:44px; height:44px; font-size:22px; }
  .lightbox__prev{ left:8px; }
  .lightbox__next{ right:8px; }
  .lightbox__close{ width:40px; height:40px; top:12px; right:12px; }
}