*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --bg:       #F5F3EE;
      --primary:  #1E1E1E;
      --secondary:#E6E8DD;
      --accent:   #15361F;
      --warm:     #D4CFC4;
      --white:    #FFFFFF;

      --u: clamp(6px, 0.5vw, 11px);

      --t-xs:  clamp(10px, 0.75vw, 13px);
      --t-sm:  clamp(13px, 1vw,   17px);
      --t-md:  clamp(15px, 1.2vw, 21px);
      --t-lg:  clamp(18px, 1.6vw, 30px);
      --t-xl:  clamp(30px, 3.8vw, 70px);
      --t-2xl: clamp(46px, 6.2vw,116px);
      --t-3xl: clamp(60px, 9.5vw,172px);

      --margin: clamp(24px, 5.5vw, 108px);
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: 'Raleway', sans-serif;
      font-weight: 300;
      color: var(--primary);
      background: var(--bg);
      overflow-x: hidden;
      cursor: none;
    }

    /* Глобально убираем стандартный курсор на всех кликабельных элементах */
    a, button, select, label, [role="button"] { cursor: none; }

    /* ─── CURSOR ─────────────────────────── */
    .cur {
      position: fixed; top:0; left:0;
      width: 10px; height: 10px;
      background: white;
      border-radius: 50%;
      pointer-events: none;
      z-index: 9999;
      transform: translate(-50%,-50%);
      transition: width .22s cubic-bezier(.16,1,.3,1),
                  height .22s cubic-bezier(.16,1,.3,1),
                  opacity .22s;
      mix-blend-mode: difference;
      opacity: 1;
    }
    .cur.big {
      width: 44px; height: 44px; opacity: .18;
    }

    /* ─── REVEAL ─────────────────────────── */
    .r {
      opacity:0;
      transform: translateY(28px);
      transition: opacity .85s cubic-bezier(.16,1,.3,1), transform .85s cubic-bezier(.16,1,.3,1);
    }
    .r.on { opacity:1; transform:none; }
    .d1 { transition-delay:.1s; }
    .d2 { transition-delay:.22s; }
    .d3 { transition-delay:.34s; }
    .d4 { transition-delay:.46s; }

    /* ─── NAV ────────────────────────────── */
    nav {
      position: fixed; top:0; left:0; right:0;
      z-index: 100;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: calc(var(--u)*3) var(--margin);
      background: rgba(245,243,238,.72);
      backdrop-filter: blur(18px) saturate(1.4);
      -webkit-backdrop-filter: blur(18px) saturate(1.4);
      border-bottom: 1px solid rgba(30,30,30,.07);
      transition: background .35s, box-shadow .35s;
    }
    nav:hover {
      background: rgba(245,243,238,.85);
      box-shadow: 0 2px 32px rgba(30,30,30,.06);
    }

    .nav-logo {
      font-family:'Cormorant Garamond', serif;
      font-weight:300;
      font-size: var(--t-lg);
      letter-spacing:.08em;
      color: var(--primary);
      text-decoration:none;
    }

    .nav-links { display:flex; gap:calc(var(--u)*5); list-style:none; }
    
    .nav-links a {
      font-size: var(--t-xs);
      letter-spacing:.25em;
      text-transform:uppercase;
      color: var(--primary);
      text-decoration:none;
      opacity:.5;
      transition:opacity .2s;
    }
    .nav-links a:hover { opacity:1; 
    cursor:none;
    }

    /* ─── HERO ───────────────────────────── */
    .hero {
      position:relative;
      height:100svh;
      min-height:600px;
      display:grid;
      grid-template-rows: 1fr auto;
      overflow:hidden;
    }

    .hero-bg {
      position:absolute; inset:0;
      background:
        linear-gradient(to bottom, rgba(0,0,0,.38) 0%, rgba(0,0,0,.52) 50%, rgba(0,0,0,.55) 100%),
        url('https://images.unsplash.com/photo-1679797850019-3d0d8659a695')
        center/cover no-repeat;
      transform: scale(1.08);
      transform-origin: center center;
      transition: transform 9s ease-out;
      will-change: transform;
    }
    .hero-bg-img {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      opacity: 0;
      pointer-events: none;
    }
    .hero-bg.loaded { transform: scale(1.04); }

    .hero-content {
      position:relative; z-index:1;
      display:flex; flex-direction:column; justify-content:flex-end;
      padding: 0 var(--margin) calc(var(--u)*6);
    }

    .hero-eyebrow {
      font-size: var(--t-xs);
      letter-spacing:.4em;
      text-transform:uppercase;
      color: var(--secondary);
      opacity:.6;
      margin-bottom:calc(var(--u)*2.5);
    }

    .hero-title {
      font-family:'Cormorant Garamond', serif;
      font-weight:300;
      font-size: var(--t-3xl);
      line-height:.88;
      letter-spacing:-.02em;
      color: var(--white);
      max-width: 78vw;
    }
    .hero-title--md {
      font-size: var(--t-2xl);
      line-height:.92;
    }
    .hero-title em { font-style:italic; color:rgba(230,232,221,.78); }

    .hero-bottom {
      position:relative; z-index:1;
      display:flex;
      justify-content:space-between;
      align-items:flex-end;
      padding: calc(var(--u)*3) var(--margin) calc(var(--u)*4);
      border-top: 1px solid rgba(230,232,221,.18);
    }

    .hero-desc {
      font-size: var(--t-sm);
      line-height:1.78;
      color: var(--secondary);
      opacity:.72;
      max-width: 40ch;
    }

    .hero-cta {
      display:inline-flex;
      align-items:center;
      gap:14px;
      font-size: var(--t-xs);
      letter-spacing:.25em;
      text-transform:uppercase;
      color: var(--secondary);
      text-decoration:none;
      padding: calc(var(--u)*1.5) calc(var(--u)*3.5);
      border: 1px solid rgba(230,232,221,.38);
      transition: background .3s, color .3s;
    }
    .hero-cta:hover { background:var(--secondary); color:var(--primary); }
    .hero-cta svg { width:13px; height:13px; }

    .scroll-mark {
      position:absolute; bottom:0; left:50%;
      transform:translateX(-50%);
      display:flex; flex-direction:column; align-items:center; gap:8px;
      color: var(--secondary); opacity:.38;
      padding-bottom:calc(var(--u)*3);
    }
    .scroll-mark span { font-size:9px; letter-spacing:.4em; text-transform:uppercase; }
    .scroll-mark .bar {
      width:1px; height:clamp(28px,4vh,52px); background:currentColor;
      animation: barA 2s ease-in-out infinite;
    }
    @keyframes barA {
      0%   { transform:scaleY(0); transform-origin:top; }
      45%  { transform:scaleY(1); transform-origin:top; }
      46%  { transform-origin:bottom; }
      100% { transform:scaleY(0); transform-origin:bottom; }
    }

    /* ─── SHARED ─────────────────────────── */
    section { padding: clamp(72px,10vh,148px) 0; }
    .wrap { margin: 0 var(--margin); }

    .lbl {
      display:block;
      font-size: var(--t-xs);
      letter-spacing:.35em;
      text-transform:uppercase;
      color: var(--accent);
      margin-bottom:calc(var(--u)*3);
    }

    .h2 {
      font-family:'Cormorant Garamond', serif;
      font-weight:300;
      font-size: var(--t-2xl);
      line-height:.95;
      letter-spacing:-.015em;
      color: var(--primary);
    }
    .h2 em { font-style:italic; }

    .rule { width:44px; height:1px; background:var(--accent); margin: calc(var(--u)*3.5) 0; }

    .body { font-size: var(--t-md); line-height:1.8; opacity:.7; max-width:58ch; }

    /* ─── ABOUT ──────────────────────────── */
    .about { background: var(--secondary); }

    .about-g {
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(40px,6vw,120px);
      align-items:center;
    }

    .stats {
      display:flex;
      gap: clamp(24px,3.5vw,60px);
      margin-top:calc(var(--u)*7);
      padding-top:calc(var(--u)*5);
      border-top: 1px solid rgba(42,42,42,.12);
    }

    .stat .n {
      font-family:'Cormorant Garamond', serif;
      font-size: var(--t-xl);
      font-weight:300;
      color: var(--accent);
      line-height:1;
      display:block;
    }
    .stat .c {
      font-size: var(--t-xs);
      letter-spacing:.2em;
      text-transform:uppercase;
      opacity:.45;
      margin-top:6px;
      display:block;
    }

    .cards {
      display:flex;
      flex-direction:column;
      gap:3px;
    }

    .card {
      padding: clamp(22px,2.8vw,46px);
      display:flex;
      flex-direction:column;
      gap:calc(var(--u)*1.8);
    }
    .card--light { background: var(--white); }
    .card--dark  { background: var(--accent); }

    .card h3 {
      font-family:'Cormorant Garamond', serif;
      font-size: var(--t-lg);
      font-weight:400;
      line-height:1.25;
    }
    .card--light h3 { color: var(--accent); }
    .card--dark  h3 { color: var(--secondary); }

    .card p { font-size: var(--t-sm); line-height:1.75; }
    .card--light p { opacity:.68; }
    .card--dark  p { color: var(--secondary); opacity:.72; }

    /* ─── CATALOG ────────────────────────── */
    .catalog { background: var(--white); }

    .cat-head {
      display:flex;
      justify-content:space-between;
      align-items:flex-end;
      margin-bottom: clamp(32px,4.5vw,72px);
    }

    .cat-link {
      font-size: var(--t-xs);
      letter-spacing:.25em;
      text-transform:uppercase;
      color: var(--accent);
      text-decoration:none;
      border-bottom: 1px solid var(--accent);
      padding-bottom:3px;
      transition:opacity .2s;
    }
    .cat-link:hover { opacity:.55; }

    .shelf {
      display:grid;
      grid-template-columns: 2fr 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      gap:3px;
    }

    .tile {
      position:relative;
      overflow:hidden;
    }
    .tile--hero { grid-row: span 2; }

    .tile-bg {
      position:absolute; inset:0;
      background-size:cover;
      background-position:center;
      transition: transform .7s cubic-bezier(.16,1,.3,1);
    }
    .tile:hover .tile-bg { transform:scale(1.05); }

    .tile--a .tile-bg { background-image: url('/img/gift-1.jpg'); background-size: cover; background-position: center; }
    .tile--b .tile-bg { background-image: url('/img/gift-2.jpg'); background-size: cover; background-position: center; }
    .tile--c .tile-bg { background-image: url('/img/gift-3.png'); background-size: cover; background-position: center; }
    .tile--d .tile-bg { background-image: url('/img/gift-4.jpg'); background-size: cover; background-position: center; }
    .tile--e .tile-bg { background-image: url('/img/gift-5.jpg'); background-size: cover; background-position: center; }

    .tile-ov {
      position:absolute; inset:0;
      background: linear-gradient(to top, rgba(0,0,0,.52) 0%, transparent 60%);
    }

    .tile-meta {
      position:relative; z-index:1;
      display:flex; flex-direction:column; gap:6px;
      padding: clamp(18px,2.2vw,38px);
      height:100%;
      justify-content:flex-end;
      min-height: clamp(160px,24vw,420px);
    }
    .tile--hero .tile-meta { min-height: clamp(320px,50vw,820px); }

    .tile-tag {
      display:inline-flex; align-items:center; gap:8px;
      font-size:9px; letter-spacing:.3em; text-transform:uppercase;
      color: var(--white); opacity:.65;
    }
    .tile-tag svg { width:11px; height:11px; }

    .tile-title {
      font-family:'Cormorant Garamond', serif;
      font-size: clamp(16px,2vw,34px);
      font-weight:300;
      color: var(--white);
      line-height:1.1;
    }
    .tile--hero .tile-title { font-size: clamp(26px,3.2vw,56px); }

    /* ─── STORIES ────────────────────────── */
    .stories { background: var(--bg); padding: clamp(64px,9vw,144px) 0; }

    .stories-g {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 3px;
    }

    .story-card {
      background: var(--white);
      display: flex;
      flex-direction: column;
    }

    .story-img {
      width: 100%;
      aspect-ratio: 4/3;
      background: var(--warm);
      background-size: cover;
      background-position: center;
      position: relative;
    }
    .story-img::after {
      content: 'фото скоро';
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 9px;
      letter-spacing: .3em;
      text-transform: uppercase;
      opacity: .3;
      color: var(--primary);
    }
    .story-img--a { background-color: #d4cdc0; }
    .story-img--b { background-color: #c8c1b2; }
    .story-img--c { background-color: #cec6b6; }

    .story-body {
      padding: clamp(20px, 2.4vw, 38px);
      display: flex;
      flex-direction: column;
      gap: calc(var(--u)*1.8);
      flex: 1;
    }

    .story-material {
      font-size: 9px;
      letter-spacing: .3em;
      text-transform: uppercase;
      color: var(--accent);
      opacity: .6;
    }

    .story-title {
      font-family: 'Cormorant Garamond', serif;
      font-size: var(--t-lg);
      font-weight: 400;
      color: var(--primary);
      line-height: 1.2;
    }

    .story-text {
      font-size: var(--t-sm);
      line-height: 1.8;
      opacity: .62;
      flex: 1;
    }

    .story-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: calc(var(--u)*1.5);
      padding-top: calc(var(--u)*2);
      border-top: 1px solid rgba(30,30,30,.07);
    }

    .story-meta span {
      font-size: 9px;
      letter-spacing: .2em;
      text-transform: uppercase;
      background: var(--secondary);
      color: var(--primary);
      opacity: .7;
      padding: 4px 10px;
    }

    @media (max-width: 1024px) {
      .stories-g { grid-template-columns: 1fr 1fr; }
      .story-card:last-child { display: none; }
    }
    @media (max-width: 767px) {
      .stories-g { grid-template-columns: 1fr; }
      .story-card:last-child { display: flex; }
      .story-card:nth-child(2) { display: none; }
    }

    /* ─── STEPS ──────────────────────────── */
    .steps { background: var(--bg); }

    .steps-head {
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(32px,5vw,100px);
      align-items:end;
      margin-bottom: clamp(44px,6.5vw,104px);
    }

    .steps-aside {
      font-family:'Cormorant Garamond', serif;
      font-size: var(--t-xl);
      font-weight:300;
      font-style:italic;
      color: var(--accent);
      opacity:.2;
      text-align:right;
      line-height:1;
    }

    .steps-intro p { font-size: var(--t-md); line-height:1.75; opacity:.62; max-width:48ch; margin-top:calc(var(--u)*3); }

    .steps-g {
      display:grid;
      grid-template-columns: repeat(4,1fr);
      gap:2px;
    }

    .step {
      padding: clamp(22px,2.8vw,46px) clamp(18px,2.2vw,38px);
      background: var(--secondary);
      display:flex; flex-direction:column; gap:calc(var(--u)*2.2);
      transition: background .3s;
    }
    .step:hover { background: var(--warm); }

    .step-n {
      font-family:'Cormorant Garamond', serif;
      font-size: clamp(38px,4.8vw,78px);
      font-weight:300;
      color: var(--accent);
      opacity:.22;
      line-height:1;
    }

    .step h3 {
      font-family:'Cormorant Garamond', serif;
      font-size: var(--t-lg);
      font-weight:400;
      color: var(--primary);
      line-height:1.2;
    }

    .step p { font-size: var(--t-sm); line-height:1.75; opacity:.62; }

    .step--cta { background: var(--accent); justify-content:space-between; }
    .step--cta:hover { background: #1b4427; }
    .step--cta .step-n { color:rgba(230,232,221,.18); opacity:1; }
    .step--cta h3 { color: var(--secondary); }
    .step--cta p  { color: var(--secondary); opacity:.62; }

    .step-link {
      display:inline-flex; align-items:center; gap:10px;
      font-size: var(--t-xs);
      letter-spacing:.2em; text-transform:uppercase;
      color: var(--secondary);
      text-decoration:none;
      margin-top:auto;
      padding-top:calc(var(--u)*2);
      border-top: 1px solid rgba(230,232,221,.18);
    }

    /* ─── CONTACT ────────────────────────── */
    .contact { background: var(--accent); }

    .contact-g {
      display:grid;
      grid-template-columns: 5fr 7fr;
      gap: clamp(48px,7vw,136px);
      align-items:start;
    }

    .contact-lbl { color: rgba(230,232,221,.45) !important; }
    .contact-h2  { color: var(--secondary); }

    .contact-info {
      margin-top:calc(var(--u)*6);
      display:flex; flex-direction:column; gap:calc(var(--u)*1.5);
    }
    .contact-info a {
      font-size: var(--t-md);
      color: var(--secondary);
      text-decoration:none;
      opacity:.55;
      transition:opacity .2s;
    }
    .contact-info a:hover { opacity:1; }

    .contact-quote {
      margin-top:calc(var(--u)*8);
      padding-top:calc(var(--u)*4);
      border-top: 1px solid rgba(230,232,221,.13);
      font-family:'Cormorant Garamond', serif;
      font-style:italic;
      font-size: var(--t-lg);
      color: var(--secondary);
      opacity:.38;
      line-height:1.5;
      max-width:36ch;
    }

    /* form */
    .form { display:flex; flex-direction:column; gap:2px; }

    .frow { display:grid; grid-template-columns:1fr 1fr; gap:2px; }

    .ff { display:flex; flex-direction:column; }
    .ff label {
      font-size:9px;
      letter-spacing:.35em;
      text-transform:uppercase;
      color: var(--secondary);
      opacity:.4;
      padding: calc(var(--u)*2) calc(var(--u)*2.5) calc(var(--u)*.5);
      background: rgba(230,232,221,.07);
      cursor:none;
    }

    .ff input,
    .ff textarea,
    .ff select {
      font-family:'Raleway', sans-serif;
      font-weight:300;
      font-size: var(--t-sm);
      color: var(--secondary);
      background: rgba(230,232,221,.07);
      border:none;
      border-bottom: 1px solid transparent;
      outline:none;
      padding: calc(var(--u)*1) calc(var(--u)*2.5) calc(var(--u)*2.5);
      width:100%;
      transition: border-color .3s, background .3s;
      cursor:none;
      -webkit-appearance:none;
    }
    .ff input::placeholder,
    .ff textarea::placeholder { color:rgba(230,232,221,.28); }
    .ff select option { background: var(--accent); color: var(--secondary); }
    .ff input:focus,
    .ff textarea:focus,
    .ff select:focus {
      border-color:rgba(230,232,221,.45);
      background:rgba(230,232,221,.11);
    }
    .ff textarea { resize:none; height:clamp(96px,13vh,168px); }

    .fsub {
      display:flex; align-items:center; justify-content:space-between; gap:24px;
      padding: calc(var(--u)*3) calc(var(--u)*2.5);
      background:rgba(230,232,221,.07);
    }
    .fpol {
      font-size: var(--t-xs);
      color: var(--secondary);
      opacity:.3;
      line-height:1.6;
      max-width:34ch;
    }

    .fbtn {
      flex-shrink:0;
      padding: calc(var(--u)*1.8) calc(var(--u)*4);
      background: var(--secondary);
      border:none;
      font-family:'Raleway', sans-serif;
      font-size: var(--t-xs);
      letter-spacing:.25em;
      text-transform:uppercase;
      color: var(--accent);
      cursor:none;
      transition:opacity .25s;
    }
    .fbtn:hover { opacity:.8; }
    .fbtn.sent { background:rgba(230,232,221,.18); color:var(--secondary); cursor:default; }

    /* ─── FOOTER ─────────────────────────── */
    footer {
      background: var(--primary);
      padding: clamp(44px,7vh,96px) 0 clamp(28px,4.5vh,56px);
    }

    .ft-inner { margin:0 var(--margin); display:flex; flex-direction:column; gap:clamp(36px,5.5vh,72px); }

    .ft-top {
      display:grid;
      grid-template-columns: auto 1fr;
      gap: clamp(40px,8vw,156px);
      align-items:start;
    }

    .ft-logo {
      font-family:'Cormorant Garamond', serif;
      font-size: clamp(30px,4.2vw,76px);
      font-weight:300;
      letter-spacing:.04em;
      color: var(--secondary);
      line-height:1.1;
    }

    .ft-cols {
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap: clamp(22px,3.5vw,60px);
      padding-top:6px;
    }

    .ft-ct { font-size:9px; letter-spacing:.35em; text-transform:uppercase; color:var(--secondary); opacity:.3; display:block; margin-bottom:calc(var(--u)*2.5); }

    .ft-cols a {
      display:block;
      font-size: var(--t-sm);
      color: var(--secondary);
      text-decoration:none;
      opacity:.5;
      transition:opacity .2s;
      margin-bottom:calc(var(--u)*1.2);
    }
    .ft-cols a:hover { opacity:1; }

    .ft-bot {
      display:flex;
      justify-content:space-between;
      align-items:center;
      padding-top: clamp(18px,2.8vh,36px);
      border-top: 1px solid rgba(230,232,221,.08);
    }

    .ft-copy { font-size: var(--t-xs); color:var(--secondary); opacity:.22; }

    .ft-soc { display:flex; gap:calc(var(--u)*3); }
    .ft-soc a {
      font-size: var(--t-xs);
      letter-spacing:.2em;
      text-transform:uppercase;
      color: var(--secondary);
      text-decoration:none;
      opacity:.32;
      transition:opacity .2s;
    }
    .ft-soc a:hover { opacity:1; }

    /* ─── RESPONSIVE ─────────────────────── */

    @media (max-width:1280px) {
      .shelf { grid-template-columns:1.5fr 1fr 1fr; }
    }

    @media (max-width:1024px) {
      nav { background: rgba(245,243,238,.82); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); }
      .nav-logo { color:var(--primary); }
      .nav-links a { color:var(--primary); }

      .about-g { grid-template-columns:1fr; }

      .shelf {
        grid-template-columns:1fr 1fr;
        grid-template-rows:auto auto auto;
      }
      .tile--hero { grid-column:span 2; grid-row:span 1; }
      .tile--hero .tile-meta { min-height:clamp(240px,36vw,460px); }

      .steps-g { grid-template-columns:repeat(2,1fr); }
      .steps-head { grid-template-columns:1fr; }
      .steps-aside { text-align:left; }

      .contact-g { grid-template-columns:1fr; }
      .contact-quote { display:none; }

      .ft-top { grid-template-columns:1fr; }
    }

    @media (max-width:767px) {
      body { cursor:auto; }
      a, button, select, label, [role="button"] { cursor: pointer; }
      .cur { display:none; }

      .nav-links { display:none; }

      .hero-title { max-width:100%; }
      .hero-bottom { flex-direction:column; align-items:flex-start; gap:18px; }

      .shelf { grid-template-columns:1fr; }
      .tile--hero { grid-column:span 1; }
      .tile-meta { min-height:clamp(150px,44vw,280px); }
      .tile--hero .tile-meta { min-height:clamp(240px,56vw,380px); }

      .steps-g { grid-template-columns:1fr; }

      .frow { grid-template-columns:1fr; }
      .fsub { flex-direction:column; align-items:flex-start; }

      .ft-cols { grid-template-columns:1fr 1fr; }
      .ft-bot { flex-direction:column; align-items:flex-start; gap:12px; }
    }

    @media (max-width:480px) {
      .ft-cols { grid-template-columns:1fr; }
      .stats { flex-wrap:wrap; gap:22px; }
    }
    
    .ff input.invalid,
    .ff textarea.invalid,
    .ff select.invalid {
      border-color: rgba(180, 60, 60, .7) !important;
      background: rgba(180, 60, 60, .06) !important;
    }

    .ferr {
      font-size: 9px;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: rgba(230, 80, 80, .85);
      padding: 5px calc(var(--u)*2.5) 0;
      display: none;
    }
    .ferr.show { display: block; }
    /* ─── BURGER ─────────────────────────── */
    .burger {
      display: none;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 5px;
      width: 40px;
      height: 40px;
      background: none;
      border: none;
      cursor: none;
      padding: 4px;
      z-index: 200;
    }
    .burger span {
      display: block;
      width: 22px;
      height: 1px;
      background: var(--primary);
      transition: transform .35s cubic-bezier(.16,1,.3,1), opacity .25s, width .3s;
      transform-origin: center;
    }
    .burger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    .burger.open span:nth-child(2) { opacity: 0; width: 0; }
    .burger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

    @media (max-width: 767px) {
      .burger { display: flex; }
    }

    /* ─── MOBILE MENU ────────────────────── */
    .mob-menu {
      position: fixed;
      inset: 0;
      z-index: 150;
      background: var(--bg);
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: calc(var(--u)*12) var(--margin) calc(var(--u)*8);
      opacity: 0;
      pointer-events: none;
      transform: translateY(-12px);
      transition: opacity .4s cubic-bezier(.16,1,.3,1), transform .4s cubic-bezier(.16,1,.3,1);
    }
    .mob-menu.open {
      opacity: 1;
      pointer-events: all;
      transform: none;
    }
    .mob-nav {
      display: flex;
      flex-direction: column;
      gap: calc(var(--u)*1.5);
    }
    .mob-link {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(36px, 10vw, 60px);
      font-weight: 300;
      letter-spacing: -.01em;
      color: var(--primary);
      text-decoration: none;
      line-height: 1.1;
      opacity: .18;
      transition: opacity .2s;
    }
    .mob-link:hover { opacity: 1; }
    .mob-contacts {
      margin-top: auto;
      display: flex;
      flex-direction: column;
      gap: calc(var(--u)*1.5);
      padding-top: calc(var(--u)*6);
      border-top: 1px solid rgba(30,30,30,.08);
    }
    .mob-contacts a {
      font-size: var(--t-sm);
      color: var(--primary);
      text-decoration: none;
      opacity: .45;
      transition: opacity .2s;
    }
    .mob-contacts a:hover { opacity: 1; }

    /* ─── ACTIVE NAV LINK ────────────────── */
    .nav-links a.nav-active { opacity: 1; }

    /* ─── TILE HINT ──────────────────────── */
    .tile { cursor: none; }
    .tile-hint {
      position: absolute;
      bottom: calc(var(--u)*3);
      right: calc(var(--u)*3);
      font-size: 9px;
      letter-spacing: .3em;
      text-transform: uppercase;
      color: var(--secondary);
      opacity: 0;
      transition: opacity .3s;
      pointer-events: none;
    }
    .tile:hover .tile-hint { opacity: .55; }

    /* ─── FAQ ────────────────────────────── */
    .faq { background: var(--bg); }

    .faq-g {
      display: grid;
      grid-template-columns: 5fr 7fr;
      gap: clamp(48px, 7vw, 136px);
      align-items: start;
    }

    .faq-sub {
      font-size: var(--t-sm);
      line-height: 1.75;
      opacity: .55;
      margin-top: calc(var(--u)*4);
      max-width: 34ch;
    }

    .faq-cta {
      display: inline-block;
      margin-top: calc(var(--u)*4);
      font-size: var(--t-xs);
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--accent);
      text-decoration: none;
      opacity: .7;
      transition: opacity .2s;
    }
    .faq-cta:hover { opacity: 1; }

    .faq-list {
      border-top: 1px solid rgba(30,30,30,.1);
    }

    .faq-item {
      border-bottom: 1px solid rgba(30,30,30,.1);
    }

    .faq-q {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: calc(var(--u)*3.5) 0;
      background: none;
      border: none;
      cursor: none;
      text-align: left;
    }
    .faq-q span {
      font-family: 'Cormorant Garamond', serif;
      font-size: var(--t-md);
      font-weight: 400;
      color: var(--primary);
      line-height: 1.3;
    }
    .faq-arrow {
      flex-shrink: 0;
      width: 16px;
      height: 16px;
      opacity: .4;
      transition: transform .35s cubic-bezier(.16,1,.3,1), opacity .2s;
    }
    .faq-item.open .faq-arrow {
      transform: rotate(180deg);
      opacity: 1;
    }

    .faq-a {
      overflow: hidden;
      max-height: 0;
      transition: max-height .45s cubic-bezier(.16,1,.3,1), padding .35s;
    }
    .faq-item.open .faq-a {
      max-height: 200px;
      padding-bottom: calc(var(--u)*3.5);
    }
    .faq-a p {
      font-size: var(--t-sm);
      line-height: 1.8;
      opacity: .6;
      max-width: 62ch;
    }

    @media (max-width: 1024px) {
      .faq-g { grid-template-columns: 1fr; }
    }

    /* ─── MODAL ──────────────────────────── */
    .modal-wrap {
      position: fixed;
      inset: 0;
      z-index: 400;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: var(--margin);
      opacity: 0;
      pointer-events: none;
      transition: opacity .35s;
    }
    .modal-wrap.open {
      opacity: 1;
      pointer-events: all;
    }

    .modal-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(20,20,20,.62);
      backdrop-filter: blur(6px);
    }

    .modal-box {
      position: relative;
      z-index: 1;
      background: var(--bg);
      display: grid;
      grid-template-columns: 1fr 1.15fr;
      max-width: 860px;
      width: 100%;
      max-height: 90vh;
      overflow: hidden;
      transform: translateY(18px) scale(.98);
      transition: transform .45s cubic-bezier(.16,1,.3,1);
    }
    .modal-wrap.open .modal-box {
      transform: none;
    }

    .modal-img-wrap { overflow: hidden; min-height: 360px; }
    .modal-img {
      width: 100%;
      height: 100%;
      min-height: 360px;
      background: var(--accent);
      transition: transform 8s ease-out;
    }
    .modal-wrap.open .modal-img { transform: scale(1.04); }

    .modal-body {
      padding: calc(var(--u)*6) calc(var(--u)*5.5);
      display: flex;
      flex-direction: column;
      overflow-y: auto;
    }

    .modal-close {
      position: absolute;
      top: calc(var(--u)*2.5);
      right: calc(var(--u)*2.5);
      z-index: 2;
      width: 36px;
      height: 36px;
      background: rgba(245,243,238,.85);
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: none;
      transition: opacity .2s;
    }
    .modal-close svg { width: 14px; height: 14px; }
    .modal-close:hover { opacity: .7; }

    .modal-tag {
      font-size: 9px;
      letter-spacing: .35em;
      text-transform: uppercase;
      color: var(--accent);
      opacity: .7;
    }

    .modal-title {
      font-family: 'Cormorant Garamond', serif;
      font-size: var(--t-lg);
      font-weight: 300;
      line-height: 1.2;
      color: var(--primary);
      margin-top: calc(var(--u)*2);
    }

    .modal-desc {
      font-size: var(--t-sm);
      line-height: 1.8;
      opacity: .65;
      margin-top: calc(var(--u)*3);
    }

    .modal-specs {
      list-style: none;
      margin-top: calc(var(--u)*4);
      padding-top: calc(var(--u)*3);
      border-top: 1px solid rgba(30,30,30,.08);
      display: flex;
      flex-direction: column;
      gap: calc(var(--u)*1.2);
    }
    .modal-specs li {
      font-size: var(--t-xs);
      letter-spacing: .06em;
      opacity: .55;
    }
    .modal-specs li::before {
      content: '— ';
      opacity: .5;
    }

    .modal-footer {
      margin-top: auto;
      padding-top: calc(var(--u)*5);
      display: flex;
      align-items: center;
      gap: calc(var(--u)*3);
      flex-wrap: wrap;
    }

    .modal-cta {
      font-size: var(--t-xs);
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--primary);
      text-decoration: none;
      opacity: .45;
      transition: opacity .2s;
    }
    .modal-cta:hover { opacity: 1; }

    .modal-order {
      font-size: var(--t-xs);
      letter-spacing: .25em;
      text-transform: uppercase;
      color: var(--white);
      background: var(--accent);
      text-decoration: none;
      padding: calc(var(--u)*1.6) calc(var(--u)*3.5);
      transition: opacity .25s;
    }
    .modal-order:hover { opacity: .82; }

    @media (max-width: 767px) {
      .modal-box { grid-template-columns: 1fr; max-height: 88vh; }
      .modal-img-wrap { min-height: 180px; }
      .modal-img { min-height: 180px; }
      .modal-body { padding: calc(var(--u)*4) calc(var(--u)*3.5); }
    }

    /* ─── TELEGRAM WIDGET ────────────────── */
    .tg-widget {
      position: fixed;
      bottom: clamp(24px, 4vh, 40px);
      right: clamp(20px, 3vw, 40px);
      z-index: 300;
      transition: opacity .3s ease;
    }

    .tg-btn {
      display: flex;
      align-items: center;
      gap: 0;
      background: var(--primary);
      border: none;
      overflow: hidden;
      text-decoration: none;
      box-shadow: 0 4px 20px rgba(0,0,0,.18);
      transition: opacity .25s, box-shadow .25s;
    }
    .tg-btn:hover {
      opacity: .88;
      box-shadow: 0 6px 24px rgba(0,0,0,.26);
    }

    .tg-btn-icon {
      width: 44px; height: 44px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      border-right: 1px solid rgba(230,232,221,.15);
      position: relative;
    }
    .tg-btn-icon svg { width: 18px; height: 18px; stroke: var(--secondary); fill: none; }

    .tg-dot {
      position: absolute;
      top: 8px; right: 7px;
      width: 7px; height: 7px;
      background: #5edb7a;
      border-radius: 50%;
      border: 1.5px solid var(--accent);
      animation: pulse 2.4s ease-in-out infinite;
    }
    @keyframes pulse {
      0%, 100% { transform: scale(1); opacity: 1; }
      50%       { transform: scale(1.35); opacity: .7; }
    }

    .tg-btn-label {
      padding: 0 16px 0 14px;
      font-family: 'Raleway', sans-serif;
      font-size: 9px;
      font-weight: 400;
      letter-spacing: .25em;
      text-transform: uppercase;
      color: var(--secondary);
      white-space: nowrap;
      line-height: 44px;
    }

    @media (max-width: 767px) {
      .tg-btn-label { display: none; }
      .tg-btn-icon  { border-right: none; }
      .tg-btn       { width: 44px; height: 44px; }
    }

    /* ─── PHONE VALIDATION ───────────────── */
    .ff--error input,
    .ff--error textarea,
    .ff--error select {
      border-color: rgba(180,60,60,.7) !important;
      background: rgba(180,60,60,.06) !important;
    }
    .ff--error label {
      color: rgba(220,80,80,.9) !important;
      opacity: 1 !important;
    }

    /* ─── CART FAB ───────────────────────────── */
    .cart-fab {
      position: fixed;
      bottom: clamp(24px,4vh,40px);
      left: clamp(20px,3vw,40px);
      z-index: 300;
      width: 52px; height: 52px;
      background: var(--primary);
      border: none; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 4px 20px rgba(30,30,30,.22);
      transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s;
    }
    .cart-fab:hover { transform: scale(1.08); box-shadow: 0 8px 28px rgba(30,30,30,.3); }
    .cart-fab svg { width: 20px; height: 20px; stroke: var(--secondary); }
    .cart-fab-count {
      position: absolute; top: 2px; right: 2px;
      min-width: 18px; height: 18px;
      background: var(--accent); color: var(--secondary);
      border-radius: 9px; border: 2px solid var(--bg);
      font-size: 9px; font-weight: 500; letter-spacing: 0;
      display: flex; align-items: center; justify-content: center;
      padding: 0 3px;
    }

    /* ─── CART DRAWER ────────────────────────── */
    .cart-backdrop {
      position: fixed; inset: 0; z-index: 490;
      background: rgba(20,20,20,.45);
      backdrop-filter: blur(4px);
      opacity: 0; pointer-events: none;
      transition: opacity .35s;
    }
    .cart-backdrop.show { opacity: 1; pointer-events: all; }

    .cart-drawer {
      position: fixed;
      top: 0; right: 0; bottom: 0;
      z-index: 500;
      width: min(480px, 100vw);
      background: var(--bg);
      display: flex; flex-direction: column;
      transform: translateX(100%);
      transition: transform .45s cubic-bezier(.16,1,.3,1);
      overflow: hidden;
    }
    .cart-drawer.open { transform: none; }

    .cart-header {
      display: flex; align-items: flex-start;
      justify-content: space-between; gap: 16px;
      padding: calc(var(--u)*5) calc(var(--u)*4.5) calc(var(--u)*3.5);
      border-bottom: 1px solid rgba(30,30,30,.08);
      flex-shrink: 0;
    }
    .cart-eyebrow {
      font-size: 9px; letter-spacing: .35em;
      text-transform: uppercase; opacity: .35;
      margin-bottom: calc(var(--u)*.8);
    }
    .cart-title {
      font-family: 'Cormorant Garamond', serif;
      font-size: var(--t-lg); font-weight: 300;
      color: var(--primary);
      display: flex; align-items: center; gap: 10px;
    }
    .cart-badge {
      font-family: 'Raleway', sans-serif;
      font-size: var(--t-xs); font-weight: 400;
      background: var(--accent); color: var(--secondary);
      border-radius: 20px; padding: 2px 9px;
      vertical-align: middle;
    }
    .cart-close {
      width: 36px; height: 36px; flex-shrink: 0;
      background: none; border: 1px solid rgba(30,30,30,.12);
      display: flex; align-items: center; justify-content: center;
      margin-top: 2px; transition: border-color .2s;
    }
    .cart-close:hover { border-color: var(--primary); }
    .cart-close svg { width: 14px; height: 14px; }

    .cart-empty {
      flex: 1; display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      gap: calc(var(--u)*1.5); padding: calc(var(--u)*6);
      text-align: center;
    }
    .cart-empty svg { width: 48px; height: 48px; opacity: .15; }
    .cart-empty p { font-family: 'Cormorant Garamond', serif; font-size: var(--t-md); opacity: .5; }
    .cart-empty span { font-size: var(--t-xs); opacity: .3; }

    .cart-list {
      list-style: none; flex: 1;
      overflow-y: auto; padding: calc(var(--u)*2) 0;
    }
    .cart-item {
      display: grid;
      grid-template-columns: 56px 1fr auto;
      gap: calc(var(--u)*2);
      align-items: start;
      padding: calc(var(--u)*2.5) calc(var(--u)*4.5);
      border-bottom: 1px solid rgba(30,30,30,.06);
      animation: slideIn .3s cubic-bezier(.16,1,.3,1);
    }
    @keyframes slideIn {
      from { opacity:0; transform:translateX(12px); }
      to   { opacity:1; transform:none; }
    }
    .cart-item-img {
      width: 56px; height: 56px;
      background: var(--secondary);
      background-size: cover; background-position: center;
      flex-shrink: 0;
    }
    .cart-item-info { min-width: 0; }
    .cart-item-cat {
      font-size: 8px; letter-spacing: .25em; text-transform: uppercase;
      opacity: .35; margin-bottom: 3px;
    }
    .cart-item-name {
      font-family: 'Cormorant Garamond', serif;
      font-size: var(--t-sm); font-weight: 400;
      line-height: 1.2; color: var(--primary);
    }
    .cart-item-vars {
      font-size: 9px; opacity: .45; margin-top: 4px; line-height: 1.5;
    }
    .cart-item-price {
      font-family: 'Cormorant Garamond', serif;
      font-size: var(--t-sm); color: var(--accent);
      white-space: nowrap;
    }
    .cart-item-actions {
      grid-column: 2 / 4;
      display: flex; align-items: center;
      justify-content: space-between; margin-top: calc(var(--u)*1);
    }
    .cart-qty {
      display: flex; align-items: center; gap: 0;
      border: 1px solid rgba(30,30,30,.14);
    }
    .cart-qty-btn {
      width: 28px; height: 28px; background: none; border: none;
      font-size: 16px; line-height: 1; color: var(--primary);
      display: flex; align-items: center; justify-content: center;
      opacity: .5; transition: opacity .2s;
    }
    .cart-qty-btn:hover { opacity: 1; }
    .cart-qty-val {
      width: 32px; text-align: center;
      font-size: var(--t-xs); font-weight: 400;
    }
    .cart-item-remove {
      font-size: 9px; letter-spacing: .2em; text-transform: uppercase;
      color: var(--primary); opacity: .3; background: none; border: none;
      transition: opacity .2s;
    }
    .cart-item-remove:hover { opacity: .8; }

    /* form inside cart */
    .cart-footer {
      border-top: 1px solid rgba(30,30,30,.08);
      flex-shrink: 0; overflow-y: auto;
      max-height: 55vh;
    }
    .cart-form { padding: calc(var(--u)*4) calc(var(--u)*4.5); }
    .cart-form-title {
      font-size: 9px; letter-spacing: .3em; text-transform: uppercase;
      opacity: .35; margin-bottom: calc(var(--u)*3);
    }
    .cart-fields {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 2px; margin-bottom: 2px;
    }
    .cff { display: flex; flex-direction: column; }
    .cff--full { grid-column: span 2; }
    .cff label {
      font-size: 9px; letter-spacing: .3em; text-transform: uppercase;
      opacity: .4; padding: calc(var(--u)*1.5) calc(var(--u)*2) calc(var(--u)*.5);
      background: rgba(30,30,30,.04);
    }
    .cff input, .cff textarea {
      font-family: 'Raleway', sans-serif; font-weight: 300;
      font-size: var(--t-sm); color: var(--primary);
      background: rgba(30,30,30,.04); border: none;
      border-bottom: 1px solid transparent; outline: none;
      padding: calc(var(--u)) calc(var(--u)*2) calc(var(--u)*2);
      width: 100%;
      transition: border-color .3s, background .3s;
    }
    .cff input:focus, .cff textarea:focus {
      border-color: rgba(30,30,30,.3); background: rgba(30,30,30,.07);
    }
    .cff input::placeholder, .cff textarea::placeholder { opacity: .35; }
    .cff textarea { resize: none; height: 72px; }
    .cart-pol {
      font-size: 9px; opacity: .3; line-height: 1.6;
      margin: calc(var(--u)*2.5) 0 calc(var(--u)*3);
    }
    .cart-pol a { color: inherit; }
    .cart-submit {
      width: 100%;
      padding: calc(var(--u)*2) 0;
      background: var(--accent); border: none;
      font-family: 'Raleway', sans-serif;
      font-size: var(--t-xs); letter-spacing: .25em;
      text-transform: uppercase; color: var(--secondary);
      transition: opacity .25s;
    }
    .cart-submit:hover { opacity: .82; }
    .cart-submit:disabled { opacity: .4; }
    .cart-submit.sent { background: rgba(30,30,30,.15); color: var(--primary); }

    /* «В корзину» button on cards */
    .prod-add {
      font-size: 9px; letter-spacing: .22em; text-transform: uppercase;
      color: var(--secondary); background: var(--primary);
      border: none; padding: calc(var(--u)*1.2) calc(var(--u)*2.5);
      transition: opacity .2s; white-space: nowrap;
    }
    .prod-add:hover { opacity: .75; }
    .prod-add.added {
      background: var(--accent);
    }

    @media (max-width: 480px) {
      .cart-fields { grid-template-columns: 1fr; }
      .cff--full { grid-column: span 1; }
    }

    /* ─── BACK TO TOP ────────────────────── */
    .back-top {
      position: fixed;
      bottom: clamp(24px,4vh,40px);
      left: 50%;
      transform: translateX(-50%) translateY(16px);
      z-index: 290;
      width: 40px; height: 40px;
      background: var(--primary);
      border: none;
      display: flex; align-items: center; justify-content: center;
      opacity: 0; pointer-events: none;
      transition: opacity .3s, transform .3s cubic-bezier(.16,1,.3,1);
    }
    .back-top.visible {
      opacity: 1; pointer-events: all;
      transform: translateX(-50%) translateY(0);
    }
    .back-top:hover { opacity: .75; }
    .back-top svg { width: 16px; height: 16px; stroke: var(--secondary); }

    /* ─── FORM SUCCESS ───────────────────── */
    .form-success {
      font-size: var(--t-xs); letter-spacing: .1em;
      color: var(--secondary); opacity: 0;
      padding: calc(var(--u)*2) calc(var(--u)*2.5);
      background: rgba(94,219,122,.18);
      border-left: 2px solid #5edb7a;
      margin-top: 2px;
      max-height: 0; overflow: hidden;
      transition: opacity .4s, max-height .4s cubic-bezier(.16,1,.3,1);
      pointer-events: none;
    }
    .form-success.show {
      opacity: 1; max-height: 60px; pointer-events: auto;
    }

    /* ─── FIELD ERRORS (improved) ────────── */
    .ferr {
      font-size: 9px; letter-spacing: .18em; text-transform: uppercase;
      color: rgba(200,60,60,.9);
      padding: 5px calc(var(--u)*2.5) 0;
      background: rgba(30,30,30,.04);
      display: none; line-height: 1.5;
    }
    .ferr.show { display: block; }

    /* ─── PERFORMANCE ────────────────────── */
    /* Браузер пропускает рендер off-screen секций */
    .about, .catalog, .steps, .faq { content-visibility: auto; contain-intrinsic-size: 0 600px; }