/* Art by Twins — Global Styles
   Version: 20251029c
   Date: 2025-10-29
   Notes: Unified stories layout used on main, course, and works pages
*/
[hidden]{ display:none !important; }
/* === Global stacking context fixes (2025-10-29) === */
/* Keep header and mobile drawer above page content; keep floating buttons clickable */
header{ position:relative; z-index:50 }
#mobile-menu{ z-index:70 }
.floating-contacts, .btn-fixed-ig, .btn-circle.btn-fixed, #site-telegram-btn .btn-circle{ z-index:60 }
/* Ensure any hidden modal is really gone */
.modal[hidden]{ display:none !important }
/* Global styles for Art by Twins. This is a plain CSS file (no <style> tags). */
      html {
        scroll-behavior: smooth;
      }
      .footer-divider {
        border-color: #3f3f46;
      }
      /* Subtle multi-radial site background for a modern, bright feel */
      .site-bg {
        background:
          radial-gradient(1200px 600px at 10% 0%, rgba(16,185,129,0.15), rgba(255,255,255,0) 60%), /* emerald glow */
          radial-gradient(900px 500px at 90% 10%, rgba(56,189,248,0.15), rgba(255,255,255,0) 60%),  /* sky glow */
          radial-gradient(1200px 600px at 50% 100%, rgba(251,191,36,0.12), rgba(255,255,255,0) 60%); /* amber base */
        background-attachment: fixed;
      }
      /* Solid primary button (works even if Tailwind colors are missing) */
      .btn-primary {
        background-color: #10B981; /* emerald-500 */
        color: #ffffff;
      }
      .btn-primary:hover {
        background-color: #059669; /* emerald-600 */
      }
      .btn-primary:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.35);
      }
      .carousel {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 2rem;
        padding-bottom: 1.5rem;
        -webkit-overflow-scrolling: touch;
      }
      .carousel::-webkit-scrollbar {
        display: none;
      }
      .carousel-item {
        scroll-snap-align: center;
        flex: 0 0 auto;
        transition: transform 0.5s;
      }
      .carousel-item:hover {
        transform: scale(1.05);
      }

      /* High-contrast fixed button to avoid white-on-white */
      .btn-fixed-ig {
        background-color: #059669; /* emerald-600 */
        color: #ffffff;
        border: 1px solid rgba(0,0,0,0.08);
      }
      .btn-fixed-ig:hover {
        background-color: #047857; /* emerald-700 */
      }
      /* Animated underline for nav links */
      .nav-link { position: relative; }
      .nav-link::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -6px;
        width: 0;
        height: 2px;
        background: #10B981; /* emerald-500 */
        transition: width .3s ease;
      }
      .nav-link:hover::after { width: 100%; }

      /* Full-bleed container that spans the viewport width */
      .full-bleed {
        position: relative;
        left: 50%;
        right: 50%;
        margin-left: -50vw;
        margin-right: -50vw;
        width: 100vw;
      }
      /* Fancy glassy nav buttons for carousel */
      .carousel-nav-btn {
        backdrop-filter: blur(8px);
        background: rgba(255,255,255,0.9);
        border: 1px solid rgba(16,185,129,0.25); /* emerald */
        box-shadow: 0 10px 20px rgba(2, 6, 23, 0.1);
      }
      .carousel-nav-btn:hover { box-shadow: 0 14px 24px rgba(2, 6, 23, 0.16); }
      /* Equal-height course cards */
      .course-card { min-height: 460px; display: flex; flex-direction: column; }
      .course-card .card-actions { margin-top: auto; }

      /* Pills on cards: always visible over any background */
      .pill-badge {
        padding: 0.25rem 0.6rem;
        line-height: 1;
        border-radius: 9999px;
        font-size: 0.75rem; /* text-xs */
        font-weight: 700;
        color: #ffffff;
        box-shadow: 0 8px 18px rgba(2,6,23,0.12);
        border: 1px solid rgba(255,255,255,0.55);
      }
      /* Featured middle course panel */
      .triptych-featured {
        background: linear-gradient(180deg, rgba(16,185,129,0.06), rgba(255,255,255,1)); /* emerald tint */
        border-color: rgba(16,185,129,0.35) !important;
        box-shadow: 0 16px 40px rgba(16,185,129,0.15), 0 6px 20px rgba(2,6,23,0.08);
      }
      .triptych-featured:hover { transform: translateY(-2px); }
      /* Explicit badge backgrounds (fallback-safe) */
      .pill-emerald { background-color: #10B981; } /* emerald-500 */
      .pill-sky { background-color: #0EA5E9; }     /* sky-500 */
      .pill-amber { background-color: #F59E0B; }   /* amber-500 */

      /* ===== Mobile menu fallback styles (work even if Tailwind JIT misses injected header.html) ===== */
#mobile-menu{position:fixed;inset:0;visibility:hidden;opacity:0;pointer-events:none;transition:opacity .2s ease}
#mobile-menu.is-open{visibility:visible;opacity:1;pointer-events:auto}
#mobile-menu [data-mobile-backdrop]{position:absolute;inset:0;background:rgba(0,0,0,.4)}
#mobile-menu [data-mobile-panel]{position:absolute;right:0;top:0;height:100%;width:20rem;max-width:85vw;background:#fff;border-left:1px solid #d1fae5;box-shadow:0 10px 25px rgba(0,0,0,.15);transform:translateX(100%);transition:transform .2s ease}
#mobile-menu.is-open [data-mobile-panel]{transform:translateX(0)}

/* ===== Shop showcase helpers (standalone, no Tailwind build) ===== */
.chip{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.4rem .75rem;border-radius:9999px;
  font-size:.875rem;font-weight:600;
  background:#fff;border:1px solid #A7F3D0; /* emerald-200 */
  color:#0f172a; /* slate-900 */
  transition:background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.chip:hover{ background:#ecfdf5 } /* emerald-50 */
.chip.is-active{
  background:#10B981;color:#fff;border-color:#10B981;
  box-shadow:0 6px 16px rgba(16,185,129,.25)
}

.card{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid #e5e7eb; /* gray-200 */
  border-radius:1rem;padding:1.25rem;
  box-shadow:0 6px 18px rgba(2,6,23,.06);
  transition:transform .2s ease, box-shadow .2s ease;
  min-height: 240px;
  min-width: 260px;
}
.card:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(2,6,23,.12) }
.card-title{ font-size:1.125rem; font-weight:700; margin-bottom:.25rem; color:#0f172a }
.card-text{ font-size:.95rem; color:#334155; margin-bottom:1rem } /* slate-700 */

.btn-outline{
  display:inline-flex;align-items:center;justify-content:center;
  gap:.5rem;padding:.5rem 1rem;border-radius:.75rem;
  font-weight:700;border:1px solid #059669; /* emerald-600 */
  color:#065f46; /* emerald-800 */
  background:#fff;transition:background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.btn-outline:hover{ background:#ecfdf5 } /* emerald-50 */
.btn-outline:focus{ outline:none; box-shadow:0 0 0 3px rgba(16,185,129,.35) }

/* Helper for subtle glass panel backgrounds if needed */
.panel-glass{
  background:rgba(255,255,255,.7); backdrop-filter: blur(6px);
  border:1px solid rgba(16,185,129,.25);
}

/* Ensure header/footer injected partials never become transparent on mobile drawers */
.drawer-surface{ background:#ffffff }

/* explicit hide for shop filtering (independent of Tailwind) */
.is-hidden{ display:none !important; }

/* Большой просмотр товара под фильтрами */
.product-view{ display:none; }
.product-view.is-open{
  display:block;
  border:1px solid #e2e8f0; /* slate-200 */
  border-radius:16px;
  background:#fff;
  padding:16px;
  box-shadow:0 10px 26px rgba(2,6,23,.07);
  animation:pv-enter .22s ease-out;
}
.pv-header{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  margin-bottom:.5rem;
}
.pv-title{ font-weight:700; font-size:1.25rem; color:#0f172a; }
.pv-back{
  border:1px solid #e2e8f0; border-radius:12px; padding:.5rem .75rem; font-weight:600;
}
.pv-body{ color:#334155; font-size:1rem; line-height:1.55; }
.pv-actions{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }

/* лёгкая анимация появления */
@keyframes pv-enter{ from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:translateY(0)} }
/* Shop: фикс прозрачности кнопки «Назад» */
#product-view #back-to-shop{
  background-color:#059669 !important; /* emerald-600 */
  color:#fff !important;
  border:none;
}
#product-view #back-to-shop:hover{ background-color:#047857 !important; } /* emerald-700 */

/* === Shop: compact product view after clicking "Смотреть" ===
   These rules only affect the in-place product view (#product-view)
   so the regular card grid stays unchanged. */
#product-view{ margin-top:12px; }
#product-view .pv-header{ margin-bottom:8px; }
#product-view .pv-title{ font-size:1.4rem; text-align:center; }

/* Make inner cards tighter and remove forced height */
#product-view .card{ min-height:unset; padding:12px; }
#product-view .card .card-text{ margin-bottom:.5rem; }

/* Utility for tighter grids inside product view */
#product-view .tight-grid{ display:grid; gap:.75rem; }
@media (min-width:768px){
  #product-view .tight-grid{ gap:1rem; }
}

/* Reduce vertical breathing in compact sections */
#product-view .section-compact{ padding-top:.75rem; padding-bottom:.75rem; }

/* Soft badge style used in headings under product view */
#product-view .badge{ padding:.3rem .6rem; font-weight:600; border-radius:9999px; background:#ecfdf5; border:1px solid #A7F3D0; }

/* Limit product view width and center */
#product-view{
  max-width:960px;
  margin-left:auto;
  margin-right:auto;
  margin-bottom:2rem;
}

/* Ensure sections inside product view have spacing */
#product-view section{
  margin-bottom:1.5rem;
}

/* --- BUY BUTTONS (курс) --- */
.btn-buy{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.65rem 1rem;
  border-radius:.7rem;
  background:#111827; /* neutral-900 */
  color:#fff;
  font-weight:600;
  line-height:1.2;
  box-shadow: 0 6px 16px rgba(17,24,39,.15);
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
  text-decoration:none;
}
.btn-buy:hover{ transform: translateY(-1px); box-shadow:0 8px 20px rgba(17,24,39,.18); }
.btn-buy:active{ transform: translateY(0); box-shadow:0 4px 12px rgba(17,24,39,.14); }

/* --- TARIF BUTTONS (shop/course) --- */
.btn-tariff {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.65rem 1rem;
  border-radius:.7rem;
  background:#10B981; /* emerald-500 */
  color:#fff !important;
  font-weight:600;
  line-height:1.2;
  box-shadow: 0 6px 16px rgba(16,185,129,.2);
  transition: transform .12s ease, box-shadow .12s ease;
  text-decoration:none;
}
.btn-tariff:hover {
  background:#059669; /* emerald-600 */
  transform: translateY(-1px);
  box-shadow:0 8px 20px rgba(5,150,105,.25);
}
.btn-tariff:active {
  transform: translateY(0);
  box-shadow:0 4px 12px rgba(5,150,105,.2);
}

/* === Unified round social buttons === */
.btn-circle {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:50%;
  font-size:1.1rem;
  color:#fff;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
  transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.btn-circle i{ line-height:1; pointer-events:none; display:inline-block }
.btn-circle{ -webkit-tap-highlight-color: transparent }
.btn-circle:hover {
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(0,0,0,.22);
  opacity:.95;
}
.btn-circle:active {
  transform:translateY(0);
  box-shadow:0 3px 8px rgba(0,0,0,.18);
}
/* Variants scoped to round buttons only to avoid conflicts with legacy btn-telegram on rectangular buttons */
.btn-circle.btn-telegram { background:#0088cc; }
.btn-circle.btn-whatsapp { background:#25D366; }
.btn-circle.btn-email { background:#f59e0b; }
/* Added brand variants for new floating buttons */
.btn-circle.btn-instagram { background:#E1306C; }
.btn-circle.btn-vk { background:#0077FF; }
/* Accessibility & hover polish */
.btn-circle { cursor:pointer; }
.btn-circle:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(16,185,129,.25), 0 4px 12px rgba(0,0,0,.15) }
.btn-circle:focus { outline:none }
.btn-circle.btn-telegram:hover,
.btn-circle.btn-whatsapp:hover,
.btn-circle.btn-email:hover { filter:brightness(0.95); }
@media (hover: none), (prefers-reduced-motion: reduce){
  .btn-circle:hover{ transform:none; box-shadow:0 4px 12px rgba(0,0,0,.15); opacity:1 }
  .btn-circle.btn-telegram:hover,
  .btn-circle.btn-whatsapp:hover,
  .btn-circle.btn-email:hover{ filter:none }
}

/* Force IG-like stories layout even without external CSS */
  .stories{ display:flex; gap:14px; overflow-x:auto; padding:10px 6px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; justify-content:center }
  .stories::-webkit-scrollbar{ display:none }
  .story-item{ display:flex; flex-direction:column; align-items:center; gap:6px; background:transparent; border:0; cursor:pointer; scroll-snap-align:start }
  .story-bubble{ width:88px; height:88px; border-radius:9999px; object-fit:cover; box-shadow:0 8px 22px rgba(2,6,23,.15); padding:3px; background:
    radial-gradient(120% 120% at 0% 0%, rgba(16,185,129,.25), rgba(255,255,255,0)),
    linear-gradient(120deg, #f59e0b, #10b981, #0ea5e9);
  }
  .story-item:focus .story-bubble, .story-item:hover .story-bubble{ transform:translateY(-2px); transition:transform .15s ease }
  .story-label{ font-size:.75rem; font-weight:600; color:#0f172a }
  @media (min-width:768px){ .story-bubble{ width:96px; height:96px } }
  @media (min-width:1024px){ .story-bubble{ width:110px; height:110px } }
  /* Viewer essentials */
  .story-view{ position:relative; width:100%; max-width:560px; margin:0 auto; aspect-ratio:9/16; background:#000; border-radius:16px; overflow:hidden; box-shadow:0 18px 50px rgba(2,6,23,.35) }

/* Media layer fills the viewer; header floats on top */
.story-media{ position:absolute; inset:0; }
.story-media > img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Compact IG-like header */
.story-header{ position:absolute; top:12px; left:12px; display:flex; align-items:center; gap:8px; color:#fff; z-index:3; text-shadow:0 1px 2px rgba(0,0,0,.4) }
.story-header .avatar{ width:28px; height:28px; border-radius:9999px; object-fit:cover; border:2px solid rgba(255,255,255,.65) }
.story-header .meta .t{ font-weight:700 }
  .story-bars{ position:absolute; top:8px; left:8px; right:8px; display:flex; gap:4px; z-index:2 }
  .story-bar{ height:3px; background:rgba(255,255,255,.35); border-radius:9999px; overflow:hidden; flex:1 }
  .story-bar > span{ display:block; width:0%; height:100%; background:#fff }
  .story-caption{ position:absolute; left:0; right:0; bottom:0; padding:12px 14px; background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.6)); color:#fff; font-size:.9rem }
  .story-caption .t{ font-weight:700; margin-bottom:2px }
  .story-tap-left, .story-tap-right{ position:absolute; top:0; bottom:0; width:50%; z-index:3; }
  .story-tap-left{ left:0 } .story-tap-right{ right:0 }

/* =======================================================
   TYPOGRAPHY & READING EASE UTILITIES (lightweight)
   Helps reduce perceived text overload without rewriting copy
   ======================================================= */

:root{ --measure:96ch; }

/* Constrain long paragraphs to readable line length */
.prose, .max-w-prose{ max-width: var(--measure); }
.max-w-2xl{ max-width:42rem; } /* 672px */

/* Looser line-height for dense text blocks */
.leading-loose{ line-height:1.75; }

/* Robust wrapping without experimental properties to silence linters */
/* Headings: keep words intact but allow wrap when needed */
h1, h2{ overflow-wrap: break-word; word-break: normal; }

/* Paragraphs & lists: safe wrapping + optional hyphenation */
p, li{ overflow-wrap: break-word; word-break: normal; hyphens: auto; }

/* Default spacing for rich text blocks */
.prose p{ margin:.5rem 0 .75rem; }
.prose ul{ margin:.5rem 0 .75rem; padding-left:1.25rem; }
.prose li{ margin:.25rem 0; }

/* Optional two-column text on large screens (use sparingly) */
@media (min-width:1024px){
  .cols-2-lg{ column-count:2; column-gap:2rem; }
}

/* Clamp utilities (CSS-only), pair with JS clamp for wider support */
.clamp-3{ display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; -webkit-line-clamp:3; line-clamp:3; }
.clamp-4{ display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; -webkit-line-clamp:4; line-clamp:4; }

/* Subtle lead paragraph under headings */
.lead{ font-size:1.125rem; color:#334155; }

/* CTA groups: compact, consistent spacing */
.cta-group{ display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; }

/* Disabled states to avoid jittery hovers when blocked */
.btn-primary[disabled], .btn-tariff[disabled], .btn-buy[disabled]{
  opacity:.6; cursor:not-allowed; box-shadow:none; transform:none;
}

/* A11y helper */
.visually-hidden{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .carousel-item:hover, .btn-buy:hover, .btn-tariff:hover{ transform:none; }
  .site-bg{ background-attachment: scroll; }
}
/* Clamp toggle tweaks: compact and baseline-aligned */
.abt-clamp-toggle{
  display:inline-block;
  margin-top:.25rem;
  font-size:.875rem;
  line-height:1.25;
  vertical-align:baseline;
}

/* ===== Legal docs kit (offer / policy / terms / cookies) ===== */
.legal-prose :where(h2){font-size:1.125rem;line-height:1.6;margin-top:1.5rem;font-weight:700}
.legal-prose :where(h3){font-size:1rem;line-height:1.55;margin-top:1.25rem;font-weight:700}
.legal-prose :where(p,ul,ol,table){margin-top:.6rem}
.legal-prose a{color:#10B981;text-decoration:underline}
.legal-card{box-shadow:0 20px 60px rgba(2,6,23,.08)}
.chip-nav{position:sticky;top:68px;z-index:30;background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,0));backdrop-filter:saturate(1.2) blur(6px);padding:.25rem .5rem;border-radius:1rem}
.badge-dot{display:inline-flex;align-items:center;gap:.5rem}
.badge-dot::before{content:"";width:.5rem;height:.5rem;border-radius:9999px;background:#10B981;box-shadow:0 0 0 3px rgba(16,185,129,.18)}
.back-to-top{position:fixed;right:16px;bottom:16px;border:1px solid rgba(2,6,23,.1);background:#0F172A;color:#fff;border-radius:9999px;padding:.6rem .85rem;box-shadow:0 10px 22px rgba(2,6,23,.18);display:none}
.back-to-top.show{display:inline-flex}

/* Print tweaks for legal pages */
@media print{
  .chip-nav,.back-to-top,#site-header,#site-footer{display:none!important}
  a[href]::after{ content:" (" attr(href) ")"; font-size:10px }
  body{ color:#000; background:#fff }
}

/* width helper for main container */
.container{max-width:1200px;margin-left:auto;margin-right:auto}

/* === Portfolio (styles) === */
/* Portfolio hero v3 — clean, premium, modern */
.portfolio-hero{
  position:relative;
  padding:clamp(20px,3vw,28px) clamp(16px,3vw,22px);
  border-radius:20px;
  background:linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.96));
  border:1px solid rgba(2,6,23,.08);
  box-shadow:var(--abt-shadow-lg);
  overflow:hidden;
}
/* soft corner glow + diagonal sheen */
.portfolio-hero::before{
  content:""; position:absolute; inset:-20%;
  background:radial-gradient(600px 260px at 0% 0%, rgba(16,185,129,.10), rgba(255,255,255,0) 60%),
             radial-gradient(700px 280px at 100% 0%, rgba(14,165,233,.10), rgba(255,255,255,0) 62%);
  pointer-events:none; z-index:0;
}
.portfolio-hero::after{
  content:""; position:absolute; left:-20%; top:-30%; width:140%; height:120px; transform:rotate(6deg);
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.48) 40%, rgba(255,255,255,0) 80%);
  filter:blur(18px); opacity:.6; pointer-events:none; z-index:0;
}
.portfolio-hero .ph-title{
  font-size:clamp(28px,3.2vw,36px);
  line-height:1.15;
  font-weight:900;
  margin:2px 0 6px;
  letter-spacing:.01em;
}
.portfolio-hero .ph-sub{
  color:#475569;
  max-width:68ch;
  margin:.2rem 0 0;
  font-size:clamp(.98rem,1.2vw,1.05rem);
}

#style-chips .style-chip{
  border-radius:9999px; padding:.55rem 1rem; font-weight:700; letter-spacing:.01em;
  background:rgba(255,255,255,.85);
  border:1px solid rgba(2,6,23,.08);
  color:#0f172a;
  box-shadow:0 8px 20px rgba(2,6,23,.08);
  backdrop-filter:saturate(1.15) blur(6px);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}
#style-chips .style-chip:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 26px rgba(2,6,23,.12);
  border-color:rgba(2,6,23,.12);
}
#style-chips .style-chip.is-active{
  background:linear-gradient(180deg,#10B981,#0EAE76);
  color:#fff;
  border-color:#0EAE76;
  box-shadow:0 14px 32px rgba(16,185,129,.26);
}
/* space under chips row on the hero slide */
#style-chips{ gap:.5rem }

.style-section{border-radius:18px;padding:1.25rem;background:rgba(255,255,255,.6);backdrop-filter:blur(8px)}
.style-header{display:grid;grid-template-columns:1fr auto;gap:.75rem .75rem;align-items:center;margin-bottom:1rem}
.style-header .style-title{grid-column:1/-1;font-size:1.5rem;font-weight:800;margin:0}
.style-header .style-desc{grid-column:1/-1;margin:0;color:#6b7280}
.style-actions .btn-primary{display:inline-flex;align-items:center;gap:.5rem}

/* ✅ компактная композиция раздела */
.style-body{display:grid;grid-template-columns:340px 1fr;gap:1.25rem;align-items:start}
@media (max-width: 900px){.style-body{grid-template-columns:1fr}}

/* ✅ обложка — 4:5, cover */
.style-cover{border-radius:14px;overflow:hidden}
.style-cover img{display:block;width:100%;height:100%;aspect-ratio:4/5;object-fit:cover}

/* ✅ аккуратная сетка 4:3 */
.style-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;align-items:stretch}
@media (max-width: 1100px){.style-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width: 640px){.style-grid{grid-template-columns:1fr}}
.sg-item{position:relative;border-radius:12px;overflow:hidden;background:#f3f4f6;aspect-ratio:4/3}
.sg-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .25s ease,opacity .25s ease}
.sg-item:hover img{transform:scale(1.03)}

/* Viewer progress */
.story-viewer .sv-progress{display:flex;gap:.25rem;position:absolute;top:.5rem;left:.75rem;right:.75rem}
.story-viewer .sv-bar{flex:1;height:3px;background:rgba(255,255,255,.35);border-radius:2px;overflow:hidden}
.story-viewer .sv-bar.is-active{background:rgba(255,255,255,.9)}

/* === Story Viewer — full-viewport layout & mobile polish (v20251029c) === */
html, body { overflow-x: hidden; }

.modal[data-storyviewer]{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.72); z-index:1000 }
.modal[data-storyviewer][hidden]{ display:none }
.story-viewer{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; width:100vw; height:100vh; border-radius:0; overflow:hidden; background:#000; padding:0; z-index:1001 }
.story-viewer .sv-frame{ position:relative; display:flex; align-items:center; justify-content:center; width:100%; height:100%; background:#000 }
.story-viewer img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; background:#000 }
.sv-close,.sv-prev,.sv-next{ position:absolute; top:50%; transform:translateY(-50%) }
.sv-close{ top:12px; right:12px; transform:none }
.sv-prev{ left:12px }
.sv-next{ right:12px }
.sv-backdrop{ position:fixed; inset:0 }

/* Mobile: блокируем скролл страницы, минимизируем отступы и прячем подписи как в Instagram */
@media (max-width:640px){
  body.modal-open{ overflow:hidden !important; }
  .story-viewer{ padding:0 }
  /* Если есть подпись у сторис — убираем на мобилке */
  #sv-caption{ display:none !important; }
}

/* === Luxe CTA button (fix for "Смотреть серию") === */
 .btn-luxe{
   position:relative;display:inline-flex;align-items:center;gap:.5rem;
   padding:.64rem .95rem;border-radius:9999px;
   font-weight:700;letter-spacing:.01em;line-height:1;
   background:linear-gradient(180deg,#10B981 0%, #0EAE76 100%);
   color:#fff;border:1px solid rgba(16,185,129,.55);
   box-shadow:0 10px 22px rgba(16,185,129,.18);
   transform:translateZ(0);
   transition:box-shadow .16s ease, transform .16s ease, background .16s ease, border-color .16s ease;
 }
 .btn-luxe:hover{
   transform:translateY(-1px);
   box-shadow:0 14px 28px rgba(16,185,129,.22);
   border-color:rgba(16,185,129,.7);
 }
 .btn-luxe:active{ transform:translateY(0); box-shadow:0 8px 18px rgba(16,185,129,.18) }
 .btn-luxe .btn-ico{ display:inline-grid; place-items:center; width:24px; height:24px; border-radius:9999px; background:rgba(255,255,255,.18); box-shadow:inset 0 0 0 1px rgba(255,255,255,.4); transform:translateX(0); transition:transform .16s ease, background .16s ease }
 .btn-luxe:hover .btn-ico{ transform:translateX(2px); background:rgba(255,255,255,.22) }
 .btn-luxe i{ font-size:.85rem; line-height:1 }
/* keep min-height consistent across layouts */
.style-actions .btn-luxe{min-height:44px}
/* Label tweaks + focus ring */
.btn-luxe .btn-label{ font-size:.95rem }
.btn-luxe:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(16,185,129,.45), 0 8px 22px rgba(16,185,129,.22) }

/* Compact on very small screens */
@media (max-width:420px){ .btn-luxe{ padding:.58rem .85rem } .btn-luxe .btn-label{ font-size:.9rem } .btn-luxe .btn-ico{ width:22px; height:22px } }
/* high-contrast mode & reduced motion safety */
@media (prefers-reduced-motion: reduce){ .btn-luxe, .btn-luxe .btn-ico{ transition:none !important } }

/* Ghost variant for calmer look */
.btn-luxe--ghost{
  background:rgba(255,255,255,.8);
  color:#065f46;
  border:1px solid rgba(16,185,129,.35);
  box-shadow:0 8px 20px rgba(2,6,23,.08);
}
.btn-luxe--ghost:hover{ background:#fff; box-shadow:0 10px 24px rgba(2,6,23,.12) }
.btn-luxe--ghost .btn-ico{ background:rgba(16,185,129,.12); box-shadow:inset 0 0 0 1px rgba(16,185,129,.35) }

/* === Inline ghost variant tuned to sit near swatches (calmer, more premium) === */
.btn-luxe--inline{ 
  padding:.56rem .9rem; 
  border-radius:9999px; 
  backdrop-filter:saturate(1.2) blur(6px);
  background:rgba(255,255,255,.85);
  color:#065f46;
  border:1px solid rgba(16,185,129,.35);
  box-shadow:0 6px 16px rgba(2,6,23,.10);
}
.btn-luxe--inline:hover{ background:#fff; box-shadow:0 10px 22px rgba(2,6,23,.14) }
.btn-luxe--inline .btn-ico{ width:22px; height:22px; background:rgba(16,185,129,.10); box-shadow:inset 0 0 0 1px rgba(16,185,129,.28) }

/* Align actions to the right and baseline with swatches */
.style-actions{ display:flex; justify-content:flex-end; align-items:center }

/* Tighter label for inline look */
.btn-luxe--inline .btn-label{ font-weight:700; letter-spacing:.01em; font-size:.92rem }
/* === Luxury polish tokens === */
:root{ --abt-radius:14px; --abt-shadow-sm:0 8px 22px rgba(2,6,23,.08); --abt-shadow-lg:0 16px 40px rgba(2,6,23,.14) }

/* Hero refinements */
/* (merged) Portfolio hero v3 — keep single definition */
.portfolio-hero{
  position:relative;
  padding:clamp(20px,3vw,28px) clamp(16px,3vw,22px);
  border-radius:20px;
  background:linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.96));
  border:1px solid rgba(2,6,23,.08);
  box-shadow:var(--abt-shadow-lg);
  overflow:hidden;
}
.portfolio-hero .ph-badge{
  position:relative;
  display:inline-block;
  font-weight:800;
  font-size:.8rem;
  letter-spacing:.04em;
  text-transform:none;
  color:#065f46;
  background:linear-gradient(180deg,#ffffff,#ecfdf5);
  border:1px solid rgba(16,185,129,.35);
  padding:.4rem .7rem;
  border-radius:999px;
  box-shadow:0 10px 22px rgba(2,6,23,.06), inset 0 0 0 1px rgba(255,255,255,.65);
  z-index:1;
}

/* Premium tiles: clean frame, blur‑up image, subtle overlay */
.sg-item{ position:relative; border-radius:var(--abt-radius); overflow:hidden; background:#fff; border:1px solid #e5e7eb; box-shadow:var(--abt-shadow-sm); aspect-ratio:4/3; transition:transform .18s ease, box-shadow .18s ease }
.sg-item:hover{ transform:translateY(-2px); box-shadow:var(--abt-shadow-lg) }
.sg-item img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:blur(8px); transform:scale(1.02); opacity:.001; transition: opacity .35s ease, filter .35s ease, transform .35s ease }
.sg-item img.is-loaded{ opacity:1; filter:blur(0); transform:scale(1) }
/* overlay */
.sg-item .sg-overlay{ position:absolute; inset:auto .55rem .55rem auto; display:inline-grid; place-items:center; width:34px; height:34px; border-radius:10px; background:rgba(17,24,39,.72); color:#fff; border:1px solid rgba(255,255,255,.2); box-shadow:0 8px 20px rgba(0,0,0,.18); opacity:0; transform:translateY(4px); transition:opacity .2s ease, transform .2s ease }
.sg-item:hover .sg-overlay{ opacity:1; transform:translateY(0) }
.sg-item .sg-overlay i{ font-size:.9rem; line-height:1 }

/* Optional bottom gradient for contrast on hover */
.sg-item::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:64px; background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.16)); opacity:0; transition:opacity .2s ease }
.sg-item:hover::after{ opacity:1 }

/* ✅ аккуратная сетка 4:3 — ровные карточки, без «растяжек» */
.style-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem;align-items:stretch}
@media (max-width: 1100px){.style-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width: 640px){.style-grid{grid-template-columns:1fr}}

/* uniform tiles: no featured enlargement */
@media (min-width: 1101px){ .style-grid .sg-item--featured{ grid-column:auto; grid-row:auto; } }

.style-cover img{display:block;width:100%;height:100%;aspect-ratio:4/5;object-fit:cover;opacity:.001;transition:opacity .28s ease}
.style-cover img.is-loaded{opacity:1}
/* === Stories panel (compact, styled) === */
.stories-panel{background:rgba(255,255,255,.75);backdrop-filter:blur(8px);border:1px solid rgba(2,6,23,.06);border-radius:16px;padding:12px 14px;box-shadow:0 10px 28px rgba(2,6,23,.06)}
.stories-head{display:flex;align-items:baseline;gap:.5rem;padding:2px 6px 6px 6px}
.stories-title{font-size:1rem;font-weight:800;color:#0f172a;margin:0}
.stories-sub{font-size:.8rem;color:#6b7280;margin:0}
.stories-strip{display:flex;gap:.75rem;overflow:auto;padding:.25rem 2px .5rem;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.stories-strip::-webkit-scrollbar{display:none}
.story{display:flex;flex-direction:column;align-items:center;gap:.35rem;background:transparent;border:0;cursor:pointer;scroll-snap-align:start}
.story-thumb{display:inline-grid;place-content:center;width:72px;height:72px;border-radius:9999px;background:#fff;border:1px solid rgba(2,6,23,.08);box-shadow:0 6px 18px rgba(2,6,23,.08);overflow:hidden}
@media (min-width:768px){.story-thumb{width:78px;height:78px}}
.story-thumb img{width:100%;height:100%;object-fit:cover;opacity:.001;transition:opacity .25s ease}
.story-thumb img.is-loaded{opacity:1}
.story-label{font-size:.8rem;line-height:1.1;max-width:9.5rem;color:#374151;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.story:focus-visible .story-thumb{outline:2px solid rgba(59,130,246,.6);outline-offset:3px}

/* section separators */
.style-section{position:relative}
.style-section::before{content:"";position:absolute;left:0;right:0;top:-2rem;height:1px;background:linear-gradient(90deg, rgba(2,6,23,0), rgba(2,6,23,.08), rgba(2,6,23,0))}
/* === Stories compact tuning === */
.stories-panel{padding:10px 12px}
.stories-head{align-items:center;justify-content:space-between}
.stories-hint{margin-left:auto;font-size:.8rem;color:#6b7280;opacity:.8;user-select:none}
.stories-hint.is-hidden{display:none}
.stories-strip{gap:.6rem;padding:.25rem 2px .25rem}
.story-label{font-size:.78rem;color:#3f3f46}

/* compact header rhythm */
.style-header{row-gap:.5rem}
.style-header .style-title{margin-top:.1rem}
.style-header .style-desc{margin-top:.1rem}
/* === Luxe layer — premium accents === */
:root{ --abt-gold:#D4AF37; --abt-gold-soft:rgba(212,175,55,.22) }

/* Hero badge: subtle gold tint */
.portfolio-hero .ph-badge{ border-color:var(--abt-gold-soft) !important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.65), 0 6px 18px rgba(2,6,23,.08) !important; background:linear-gradient(180deg,#ffffff,#ecfdf5) !important }

/* Story thumbs: luxe ring on hover */
.story-thumb{ position:relative }
.story-thumb::before{ content:""; position:absolute; inset:-1px; border-radius:inherit; background:conic-gradient(from 140deg at 50% 50%, rgba(212,175,55,.4), rgba(16,185,129,.32), rgba(14,165,233,.32), rgba(212,175,55,.4)); -webkit-mask:radial-gradient(circle at 50% 50%, transparent 62%, #000 63%); mask:radial-gradient(circle at 50% 50%, transparent 62%, #000 63%); opacity:0; transition:opacity .25s ease }
.story:hover .story-thumb::before{ opacity:.65 }

/* Grid tiles: cursor and ultra-clean border */
.sg-item{ cursor:zoom-in; border-color:rgba(2,6,23,.08) }

/* Viewer controls: glass treatment */
.sv-close,.sv-prev,.sv-next{ background:rgba(17,24,39,.54); border:1px solid rgba(255,255,255,.24); box-shadow:0 8px 20px rgba(0,0,0,.2) }
.sv-close:hover,.sv-prev:hover,.sv-next:hover{ background:rgba(17,24,39,.68) }

/* Viewer image: soft zoom/fade */
#sv-image{ opacity:0; transform:scale(1.02); transition:opacity .32s ease, transform .32s ease }
#sv-image.is-ready{ opacity:1; transform:scale(1) }

/* Progress bars: chic thin look */
.sv-progress{ display:flex; gap:.3rem; position:absolute; top:.75rem; left:.85rem; right:.85rem }
.sv-bar{ flex:1; height:2px; background:rgba(255,255,255,.28); border-radius:2px; box-shadow:0 0 0 1px rgba(0,0,0,.05) inset }
.sv-bar.is-active{ background:linear-gradient(90deg, rgba(255,255,255,.9), rgba(255,255,255,.6)) }

/* Section CTA button polish */
.style-actions .btn-primary{ border:1px solid rgba(16,185,129,.28); box-shadow:0 8px 18px rgba(16,185,129,.16) }

/* Elegant style chips */
#style-chips .style-chip{ border-radius:9999px; padding:.5rem .9rem; font-weight:700; letter-spacing:.2px; background:rgba(255,255,255,.7); border:1px solid rgba(2,6,23,.08); color:#0f172a; box-shadow:0 6px 18px rgba(2,6,23,.06); transition:transform .12s ease, box-shadow .12s ease, background .12s ease }
#style-chips .style-chip:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(2,6,23,.12) }
#style-chips .style-chip.is-active{ background:#10B981; color:#fff; border-color:#10B981; box-shadow:0 12px 26px rgba(16,185,129,.28) }

/* section spacing + separation */
#style-sections{ row-gap:3.5rem }
.style-section{ background:linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.94)); border:1px solid rgba(2,6,23,.06); box-shadow:0 20px 60px rgba(2,6,23,.06) }
/* === Style meta: traits + palette (modern compact) === */
.style-meta{display:grid;grid-template-columns:1fr auto;gap:.6rem 1rem;align-items:center;margin-top:.25rem}
@media (max-width:780px){.style-meta{grid-template-columns:1fr;gap:.5rem}}
.traits{display:flex;flex-wrap:wrap;gap:.35rem;margin:0;padding:0;list-style:none}
.trait{display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .55rem;border-radius:9999px;font-size:.78rem;font-weight:600;color:#0f172a;background:rgba(255,255,255,.8);border:1px solid rgba(2,6,23,.08);box-shadow:0 4px 12px rgba(2,6,23,.06)}
.trait::before{content:"";width:.35rem;height:.35rem;border-radius:9999px;background:#10B981;box-shadow:0 0 0 2px rgba(16,185,129,.18)}
.swatches{display:flex;align-items:center;gap:.35rem}
.swatch{width:20px;height:20px;border-radius:6px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06), 0 6px 12px rgba(2,6,23,.08);background:var(--sw,#E5E7EB)}
/* cover hover polish */
.style-cover{border-radius:14px;overflow:hidden;border:1px solid rgba(2,6,23,.06);box-shadow:0 10px 26px rgba(2,6,23,.06)}
.style-cover img{transition:transform .35s ease,opacity .28s ease}
.style-cover:hover img{transform:scale(1.02)}
/* buttons height unify */
.style-actions .btn-primary{min-height:44px;display:inline-flex;align-items:center}
  /* ===== Motion & focus polish ===== */
  @media (prefers-reduced-motion: reduce){
    *, *::before, *::after{ transition:none !important; animation:none !important }
  }
  :root{ --focus-ring: 0 0 0 3px rgba(16,185,129,.45), 0 0 0 5px rgba(16,185,129,.15) }
  .btn-primary:focus-visible, .style-chip:focus-visible, .story-thumb:focus-visible, .sv-close:focus-visible, .sv-prev:focus-visible, .sv-next:focus-visible { outline:none; box-shadow: var(--focus-ring) }

  /* Refined headings */
  .ph-title{ letter-spacing:.015em }
  .style-title{ font-weight:900; letter-spacing:.01em }

  /* Container max-width for luxe rhythm */
  main.container{ max-width: 1180px }

  /* Screen reader utility when Tailwind not present */
  .sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0 }
  .not-sr-only{ position:static; width:auto; height:auto; overflow:visible; clip:auto; white-space:normal }

  /* Ensure modal lock prevents background scroll jump */
  body.modal-open{ overflow:hidden; padding-right: var(--scrollbar-comp, 0px) }

/* === Story Viewer controls — сделать иконки видимыми поверх изображения === */
.story-viewer{ position:relative; z-index:2 }
#sv-backdrop{ z-index:1 }

/* Кнопки поверх изображения и с белыми иконками */
.sv-close,.sv-prev,.sv-next{ position:relative; z-index:5; color:#fff !important }
.sv-close i,.sv-prev i,.sv-next i{
  display:inline-block;
  font-size:1.15rem;
  line-height:1;
  color:#fff !important;
  opacity:1;
}
@media (max-width:480px){
  .sv-close i,.sv-prev i,.sv-next i{ font-size:1rem }
}

/* На случай, если чей-то reset сбрасывает шрифт Font Awesome */
.sv-close i::before,.sv-prev i::before,.sv-next i::before{
  font-family:"Font Awesome 6 Free";
  font-weight:900;
}

/* Увеличим кликабельную область на мобилках */
@media (max-width:640px){
  .sv-close,.sv-prev,.sv-next{ width:42px; height:42px }
}
/* === Story Viewer controls: robust SVG icons (no FA dependency) === */
.sv-close,.sv-prev,.sv-next{
  position:absolute; display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:9999px;
  background:rgba(17,24,39,.62); color:#fff; border:1px solid rgba(255,255,255,.28);
  box-shadow:0 10px 24px rgba(0,0,0,.28);
  z-index:6;
}
.sv-close:hover,.sv-prev:hover,.sv-next:hover{ background:rgba(17,24,39,.78) }

/* Place buttons */
.sv-close{ top:.75rem; right:.75rem; transform:none }
.sv-prev{ top:50%; left:.5rem; transform:translateY(-50%) }
.sv-next{ top:50%; right:.5rem; transform:translateY(-50%) }

/* SVG icon via ::after so it works even if <i> is empty/hidden */
  .sv-close::after, .sv-prev::after, .sv-next::after{
    content:""; display:block; width:22px; height:22px; background-repeat:no-repeat; background-position:center; background-size:22px 22px; opacity:.95;
  }

/* Close (X) */
.sv-close::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M4 4 L12 12 M12 4 L4 12'/%3E%3C/svg%3E");
}
/* Prev (←) */
.sv-prev::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.5 3.5 L5.5 8 L10.5 12.5'/%3E%3C/svg%3E");
}
/* Next (→) */
.sv-next::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 3.5 L10.5 8 L5.5 12.5'/%3E%3C/svg%3E");
}

/* Mobile hit targets */
@media (max-width:640px){ .sv-close,.sv-prev,.sv-next{ width:42px; height:42px } }

/* =====================
   Portfolio page polish v3
   ===================== */

/* HERO meta + actions */
.portfolio-hero .ph-meta{ display:flex; flex-wrap:wrap; gap:.6rem 1rem; margin:.75rem 0 1rem; padding:0; list-style:none; position:relative; z-index:1 }
.portfolio-hero .ph-meta li{ display:flex; align-items:center; gap:.5rem; font-weight:700; color:#0f172a; background:rgba(255,255,255,.75); border:1px solid rgba(2,6,23,.08); border-radius:9999px; padding:.45rem .8rem; box-shadow:0 6px 18px rgba(2,6,23,.06); backdrop-filter:saturate(1.1) blur(4px) }
.portfolio-hero .ph-meta i{ opacity:.9 }

.portfolio-hero .ph-actions{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.25rem }
.portfolio-hero .ph-actions .btn-primary{ display:inline-flex; align-items:center; gap:.5rem }
.portfolio-hero .ph-actions .btn-outline{ display:inline-flex; align-items:center; gap:.5rem }

/* Stories panel */
.stories-panel{ position:relative; background:linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.96)); border:1px solid rgba(2,6,23,.06); border-radius:16px; padding:14px 14px 18px; box-shadow:var(--abt-shadow-sm) }
.stories-panel .stories-head{ display:flex; align-items:baseline; gap:.6rem; margin:0 0 .5rem; }
.stories-panel .stories-title{ font-weight:900; font-size:clamp(18px,2.2vw,22px); line-height:1.1 }
.stories-panel .stories-sub{ color:#64748b; font-size:.9rem; margin-left:auto }
.stories-panel .stories-hint{ color:#94a3b8; font-size:.85rem }
.stories-panel .stories-hint.is-hidden{ opacity:0; transform:translateY(-2px); transition:.2s ease }

.stories-panel .stories-strip{ display:flex; gap:.8rem; overflow:auto; padding:.25rem .25rem .25rem .1rem; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch }
.stories-panel .story{ scroll-snap-align:start; border:1px solid rgba(2,6,23,.08); background:rgba(255,255,255,.9); border-radius:12px; padding:8px; width:120px; flex:0 0 auto; text-align:center; box-shadow:0 10px 24px rgba(2,6,23,.08); transition:transform .12s ease, box-shadow .12s ease }
.stories-panel .story:hover{ transform:translateY(-2px); box-shadow:0 14px 32px rgba(2,6,23,.12) }
.stories-panel .story-thumb{ display:block; width:100%; aspect-ratio:1/1; border-radius:10px; overflow:hidden; background:#f8fafc }
.stories-panel .story-thumb img{ width:100%; height:100%; object-fit:cover; transform:scale(1.02); opacity:0; transition:opacity .25s ease, transform .25s ease }
.stories-panel .story-thumb img.is-loaded{ opacity:1; transform:scale(1) }
.stories-panel .story-label{ display:block; margin-top:.5rem; font-weight:700; font-size:.85rem; color:#0f172a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

/* Style sections */
.style-section{ border-radius:18px; border:1px solid rgba(2,6,23,.06); background:linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.98)); box-shadow:var(--abt-shadow-sm); padding:18px }
.style-section .style-header{ display:grid; grid-template-columns: 1fr; gap:.6rem; margin-bottom:1rem }
.style-section .sh-badge .pill-outline{ display:inline-block; font-weight:800; letter-spacing:.02em; border-radius:9999px; padding:.3rem .6rem }
.style-section .style-title{ font-size:clamp(22px,2.8vw,28px); line-height:1.15; font-weight:900; margin:0 }
.style-section .style-title:focus{ outline:2px solid rgba(16,185,129,.5); outline-offset:3px; border-radius:6px }
.style-section .style-desc{ color:#475569; max-width:80ch }

.style-section .style-meta{ display:flex; flex-wrap:wrap; gap:.6rem 1rem; align-items:center }
.style-section .traits{ display:flex; gap:.4rem; padding:0; margin:0; list-style:none }
.style-section .trait{ background:#f8fafc; color:#0f172a; border:1px solid rgba(2,6,23,.06); border-radius:9999px; padding:.25rem .55rem; font-weight:600; font-size:.85rem }
.style-section .swatches{ display:flex; gap:.35rem }
.style-section .swatch{ width:18px; height:18px; border-radius:50%; border:1px solid rgba(2,6,23,.12); background:var(--sw,#e5e7eb); box-shadow:inset 0 0 0 1px rgba(255,255,255,.6) }

/* Layout for cover + grid */
.style-section .style-body{ display:grid; grid-template-columns: 1fr; gap:12px }
@media (min-width: 960px){ .style-section .style-body{ grid-template-columns: 340px 1fr; align-items:start } }
.style-section .style-cover{ border-radius:14px; overflow:hidden; background:#f8fafc; border:1px solid rgba(2,6,23,.06) }
.style-section .style-cover img{ display:block; width:100%; height:auto; opacity:0; transform:scale(1.02); transition:opacity .25s ease, transform .25s ease }
.style-section .style-cover img.is-loaded{ opacity:1; transform:scale(1) }

/* Grid of images */
.style-section .style-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px }
@media (min-width: 700px){ .style-section .style-grid{ grid-template-columns: repeat(3, minmax(0,1fr)) } }
.style-section .sg-item{ position:relative; border-radius:12px; overflow:hidden; border:1px solid rgba(2,6,23,.06); background:#f8fafc }
.style-section .sg-item img{ width:100%; height:100%; object-fit:cover; display:block; aspect-ratio: 4/3; opacity:0; transform:scale(1.015); transition:opacity .25s ease, transform .25s ease }
.style-section .sg-item img.is-loaded{ opacity:1; transform:scale(1) }
.style-section .sg-item .sg-overlay{ position:absolute; inset:0; display:grid; place-items:center; background:linear-gradient(180deg, rgba(2,6,23,0), rgba(2,6,23,.22)); opacity:0; transition:opacity .15s ease }
.style-section .sg-item:hover .sg-overlay{ opacity:1 }

/* Chips row breathing */
#style-chips{ margin-top:-.25rem }

/* ===== Portfolio hero layout v4 (grid + right collage) ===== */
.portfolio-hero .ph-grid{ display:grid; grid-template-columns: 1fr; gap:18px; align-items:center; max-width:1100px; margin:0 auto; position:relative; z-index:1 }
@media (min-width: 1024px){ .portfolio-hero .ph-grid{ grid-template-columns: minmax(0,1fr) 420px } }
.portfolio-hero .ph-text{ position:relative; z-index:2 }
.portfolio-hero .ph-media{ position:relative; height:280px }
@media (min-width: 1024px){ .portfolio-hero .ph-media{ height:340px } }
.portfolio-hero .ph-shot{ position:absolute; border-radius:14px; overflow:hidden; box-shadow:0 18px 40px rgba(2,6,23,.16); border:1px solid rgba(2,6,23,.08); background:#fff }
.portfolio-hero .ph-shot img{ width:100%; height:100%; object-fit:cover; display:block }
.portfolio-hero .ph-shot-a{ top:0; left:6%; width:58%; aspect-ratio:4/3; transform:rotate(-3deg) }
.portfolio-hero .ph-shot-b{ bottom:0; right:4%; width:60%; aspect-ratio:4/3; transform:rotate(2deg) }
.portfolio-hero .ph-shot-c{ top:16%; right:24%; width:44%; aspect-ratio:1/1; transform:rotate(-1deg) }

/* === Fix: chips and stories spacing (v4) === */
/* Больше зазора между фильтра-чипсами — перекрываем tailwind gap */
#style-chips{ display:flex; flex-wrap:wrap; gap:12px 14px !important; }
#style-chips .style-chip{ margin:0; line-height:1; }

/* Сторис: ровные карточки и дыхание между ними */
.stories-panel .stories-strip{ gap:1rem !important; padding-bottom:.25rem; }
.stories-panel .story{ flex:0 0 132px; width:132px; }
.stories-panel .story-thumb{ margin:0; }
.stories-panel .story-label{ line-height:1.1; min-height:1.2em; margin-top:.55rem; }

/* === Label wrap fix for stories (no truncation) === */
.stories-panel .story-label{
  display:-webkit-box !important;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:hidden;
  white-space:normal !important;
  text-overflow:unset !important;
}
.stories-panel--center { text-align: center; }
.stories-panel--center .stories-head { justify-content: center; }
.stories-panel--center .stories-title { margin: 0 auto; }
.stories-panel--center .stories-strip {
  justify-content: center;
  margin: 0 auto;
  max-width: 980px; /* premium width on desktop */
}
.stories-panel--center .story { align-items: center; }
.stories-panel--center .story-label { text-align: center; }

/* Subtle hover polish */
.stories-panel--center .story { transition: transform .18s ease, box-shadow .18s ease; }
.stories-panel--center .story:hover { transform: translateY(-2px); }
.stories-panel--center .story-thumb img { transition: transform .25s ease; }
.stories-panel--center .story:hover .story-thumb img { transform: scale(1.03); }

/* === Mobile: turn image grids into IG-like stories (global) — v20251029c === */
@media (max-width:640px){
  /* Any style grid becomes a horizontal stories strip */
  .style-section .style-grid,
  .stories-mobile,
  .course-stories-grid{
    display:flex !important;
    gap:12px;
    overflow-x:auto;
    padding:2px 2px 10px;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
  }
  .style-section .style-grid::-webkit-scrollbar,
  .stories-mobile::-webkit-scrollbar,
  .course-stories-grid::-webkit-scrollbar{ display:none }
  .style-section .style-grid{ scrollbar-width:none; }

  /* Each tile becomes a circular bubble */
  .style-section .style-grid .sg-item,
  .stories-mobile > *,
  .course-stories-grid > *{
    flex:0 0 auto;
    width:96px;
    scroll-snap-align:start;
    border-radius:12px; /* outer safety radius */
    background:transparent;
    border:0;
    box-shadow:none;
  }
  .style-section .style-grid .sg-item img,
  .stories-mobile > * img,
  .course-stories-grid > * img{
    width:96px; height:96px; display:block;
    object-fit:cover; aspect-ratio:1/1;
    border-radius:9999px; /* circle */
    position:static; inset:auto; transform:none; filter:none; opacity:1;
  }
  /* Disable hover overlays in stories mode */
  .style-section .style-grid .sg-item .sg-overlay{ display:none !important }
}

/* === Story Viewer captions (IG-like top/bottom overlays) — v20251029c === */
.sv-cap{ position:absolute; left:12px; right:12px; z-index:2; color:#fff; line-height:1.25; text-wrap:balance; }
.sv-cap-top{ top:12px; font-weight:700; font-size:clamp(14px, 2.8vw, 18px); text-shadow:0 2px 10px rgba(0,0,0,.45); }
.sv-cap-bottom{ bottom:12px; font-weight:500; font-size:clamp(13px, 2.4vw, 16px); text-shadow:0 2px 10px rgba(0,0,0,.55); }

/* Subtle gradient pads for readability */
.sv-cap-top::before, .sv-cap-bottom::before{
  content:""; position:absolute; left:-12px; right:-12px; height:64px; z-index:-1;
}
.sv-cap-top::before{ top:-12px; background:linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,0)); }
.sv-cap-bottom::before{ bottom:-12px; background:linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,0)); }

/* Respect safe areas on iOS */
@supports(padding:max(0px)){
  .sv-cap-top{ padding-top:max(0px, env(safe-area-inset-top)); }
  .sv-cap-bottom{ padding-bottom:max(0px, env(safe-area-inset-bottom)); }
}

@media (max-width:640px){
  .sv-cap{ left:10px; right:10px; }
}

/* === Hero CTA polish (2025-10-29) === */
.no-scrollbar{ -ms-overflow-style:none; scrollbar-width:none }
.no-scrollbar::-webkit-scrollbar{ display:none }

.cta-group{ --cta-radius:14px; --cta-shadow:0 10px 30px rgba(2,6,23,.10); --cta-border:rgba(2,6,23,.06) }
.cta-group > a.cta-btn{
  display:inline-flex; align-items:center; gap:.6rem;
  min-height:52px; padding:.9rem 1.25rem; border-radius:var(--cta-radius);
  background:rgba(255,255,255,.72); backdrop-filter:saturate(1.1) blur(6px);
  border:1px solid var(--cta-border); box-shadow:var(--cta-shadow);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.cta-group > a.cta-btn:hover{ background:#fff; transform:translateY(-1px); box-shadow:0 14px 36px rgba(2,6,23,.16) }
.cta-group > a.cta-btn i{ opacity:.9 }

.cta-group > a.is-primary{ background:#10b981; color:#fff; border-color:#10b981 }
.cta-group > a.is-primary:hover{ box-shadow:0 16px 40px rgba(16,185,129,.35) }
.cta-group > a.is-emerald{ color:#065f46; border-color:#a7f3d0; background:linear-gradient(0deg, rgba(236,253,245,.75), rgba(255,255,255,.7)) }
.cta-group > a.is-sky{ color:#075985; border-color:#bae6fd; background:linear-gradient(0deg, rgba(240,249,255,.75), rgba(255,255,255,.7)) }

.cta-badge{
  margin-left:.5rem; display:inline-flex; align-items:center;
  padding:.15rem .5rem; font-size:10px; border-radius:999px;
  border:1px solid rgba(16,185,129,.35);
  background:rgba(236,253,245,.8); color:#065f46;
}

/* === Dropdown menu for "Курсы" (click-to-open) === */
[data-menu="courses-list"] {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: #fff;
  border-radius: 0.75rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  z-index: 100;
  padding: 0.5rem 0;
}

[data-menu="courses-list"].open {
  display: block;
}

[data-menu="courses-list"] a {
  display: block;
  padding: 0.6rem 1rem;
  font-weight: 600;
  color: #065f46; /* emerald-800 */
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

[data-menu="courses-list"] a:hover {
  background: #ecfdf5; /* emerald-50 */
  color: #047857; /* emerald-700 */
}

/* === Course Hero Video — Luxe styling (v20251105) === */
.video-inner {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  background: #000;
  box-shadow: 0 16px 42px rgba(2,6,23,.22), inset 0 0 0 1px rgba(255,255,255,.04);
  border: none;
}
.video-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(160% 160% at 50% 0%, rgba(255,255,255,.12), transparent 70%);
  opacity: .14;
}
#heroVideoPlay .play-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
  border-radius: 9999px;
  padding: .65rem 1rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: #fff;
  border: 1px solid rgba(255,255,255,.25);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  transition: background .25s ease, box-shadow .25s ease, transform .2s ease;
}
#heroVideoPlay .play-pill:hover {
  background: rgba(0,0,0,.65);
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  transform: translateY(-1px);
}
#heroVideoPlay .play-pill svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  opacity: .95;
}
#heroPoster {
  border-radius: 1rem;
  box-shadow: 0 16px 42px rgba(2,6,23,.18);
}
/* Force clean 16:9 frame and prevent odd stretching */
.video-shell, .video-inner, #heroPoster, #heroVideo{ aspect-ratio:16/9; }
#heroVideo{ width:100%; height:100%; object-fit:cover; object-position:center 62%; background:#000; }
@media (max-width:640px){ .video-inner::after{ opacity:.1; } }
/* === Hero section: horizontal index pills (compact) === */
nav.section-index{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; }
nav.section-index a[data-section-link]{
  display:inline-flex; align-items:center; gap:.5rem;
  font-weight:700; font-size:.9rem; line-height:1;
  padding:.5rem .9rem; border-radius:9999px;
  background:rgba(255,255,255,.9);
  border:1px solid rgba(2,6,23,.10);
  box-shadow:0 2px 6px rgba(2,6,23,.06);
  transition:background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
nav.section-index a[data-section-link]:hover{
  background:#0f172a; color:#fff; border-color:#0f172a; box-shadow:0 6px 14px rgba(2,6,23,.18);
}
nav.section-index a[aria-current="true"]{
  background:#0f172a; color:#fff; border-color:#0f172a; box-shadow:0 6px 14px rgba(2,6,23,.18);
}
/* One-line pills on md+ screens */
@media (min-width:768px){
  nav.section-index{
    flex-wrap: wrap;             /* разрешаем перенос */
    gap: .6rem;                  /* немного больше воздуха */
    justify-content: center;     /* центрируем */
  }
  nav.section-index a[data-section-link]{
    padding: .5rem .9rem;
    white-space: nowrap;         /* сами слова не ломаем */
  }
}
/* === Course Hero: compact + bigger video (v20251105b) === */
/* Reduce vertical breathing on hero and enlarge video column; overrides inline when needed */
@media (max-width: 1023.98px){
  #hero .mx-auto{ padding-top: 2.25rem !important; padding-bottom: 2.5rem !important; }
}
@media (min-width: 1024px){
  #hero .mx-auto{ padding-top: 3.25rem !important; padding-bottom: 3.25rem !important; }
}

/* Make the video column wider and tighten gaps */
@media (min-width: 768px){
  #hero .grid{ grid-template-columns: 0.95fr 1.35fr !important; gap: 2.25rem !important; }
}
@media (min-width: 1280px){
  #hero .grid{ grid-template-columns: 0.85fr 1.6fr !important; gap: 2.5rem !important; }
}

/* Bring the pills row closer to hero content */
nav.section-index{ margin-top: 1.25rem !important; }
@media (min-width:768px){ nav.section-index{ margin-top: 1.5rem !important; } }

/* Soften corner glow so the focus stays on text+video */
#hero .hero-deco{ opacity: .25 !important; filter: blur(72px); }

/* Heading micro‑polish for uppercase line */
#hero h1{ letter-spacing:.02em; margin-top:.1rem; }