/* Homepage hero and brand strip — built to the owner's design (dizayn.png, 1578 × 790).

   One photographed showroom runs under everything, header included: near-black on the
   left where the copy sits, a window and a marble panel in the middle, a round podium
   and a concrete wall on the right. The SANKOSHA stands on the podium. Type is white on
   graphite with a single champagne line; the engraved captions are a light serif.

   Measurements below are taken from the design at 1578px and expressed against the
   viewport, so the composition holds from a laptop to a wide display. */

.hero { --hx: clamp(20px, 3.36vw, 56px);           /* 53px at 1578 */
  --strip-h: clamp(64px, 5.2vw, 84px);        /* the brand strip: 82px at 1578 */
  position: relative; isolation: isolate; overflow: clip; color: #fff; font-family: var(--ui);
  background: #141a1c; margin-top: calc(-1 * var(--header-h)); }

/* The scene: always anchored to its floor, so the podium stays under the machine whatever
   the viewport's shape; the left edge falls off to black under the copy. */
.hero-scene { position: absolute; inset: 0; z-index: -1; display: block; }
.hero-scene img { width: 100%; height: 100%; object-fit: cover; object-position: 66% 100%; display: block; filter: brightness(1.36) contrast(.95) saturate(1.04); }
/* Veils over the photograph, kept as light as the type allows: the left one carries the copy,
   the top one the header, the right one only takes the glare off the cove light. */
.hero-scene::after { content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(20, 26, 28, .84) 0%, rgba(20, 26, 28, .76) 22%, rgba(20, 26, 28, .64) 33%, rgba(20, 26, 28, .18) 41%, rgba(20, 26, 28, 0) 48%),
    linear-gradient(180deg, rgba(11, 17, 19, .38) 0, rgba(11, 17, 19, .06) 13%, rgba(11, 17, 19, 0) 24%); }

.hero-grid { position: relative; display: grid; grid-template-columns: minmax(360px, 35.5%) minmax(0, 1fr); align-items: stretch;
  min-height: calc(min(100svh, 56.2vw + 40px) - var(--strip-h)); padding: calc(var(--header-h) + min(2.6vw, 4.6vh)) var(--hx) min(1.6vw, 2.4vh); }

/* ---------- copy ---------- */
.hero-copy { display: flex; flex-direction: column; justify-content: center; min-width: 0; container-type: inline-size; padding-bottom: min(1.2vw, 1.8vh); }
.hero-eyebrow { display: flex; align-items: center; gap: 18px; margin: 0 0 min(2.2vw, 4.2vh);
  font: 500 clamp(9.5px, min(.76vw, 1.55vh), 12.5px)/1 var(--ui); letter-spacing: .34em; text-transform: uppercase; color: #c8cac9; white-space: nowrap; }
.hero-eyebrow::after { content: ""; flex: 0 0 42px; height: 1px; background: rgba(255, 255, 255, .34); }
.hero-title { margin: 0; text-shadow: 0 1px 18px rgba(11, 17, 19, .55); font: 500 clamp(1.7rem, min(10.6cqi, 6.95vh), 3.9rem)/.93 var(--ui); letter-spacing: -.012em; color: #fff; }
.hero-title .ln { display: block; overflow: hidden; padding-bottom: .16em; margin-bottom: -.16em; }
.hero-title .ln > span { display: inline-block; }
.hero-title .ac { font-style: normal; color: var(--champagne); }
/* 28.2em: wide enough for the second line (27.6em), too narrow for "NovaSoft" to stay on the
   first (29.3em) — so the paragraph breaks where the design breaks it and stays on the dark wall. */
.hero-lead { margin: min(1.1vw, 2vh) 0 0; max-width: 28.2em; font: 400 clamp(.8rem, min(1.04vw, 2.08vh), 1.1rem)/1.36 var(--ui); color: #e7eaeb; text-shadow: 0 1px 12px rgba(11, 17, 19, .7); }
.hero-cta { display: flex; flex-wrap: wrap; gap: clamp(8px, .8vw, 12px); margin-top: min(1.8vw, 3.6vh); }
.hbtn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: clamp(40px, min(3.2vw, 6.3vh), 54px); padding: 0 clamp(14px, 1.3vw, 22px);
  border-radius: 8px; font: 600 clamp(.8rem, min(1vw, 2vh), 1.05rem)/1 var(--ui); text-decoration: none; white-space: nowrap;
  transition: background .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease-out); }
.hbtn .i { width: 17px; height: 17px; transition: transform .2s var(--ease-out); }
.hbtn.solid { background: #fff; color: #14181a; }
.hbtn.solid:hover { background: #ecebe8; }
.hbtn.solid:hover .i { transform: translateX(3px); }
.hbtn.ghost { border: 1px solid rgba(255, 255, 255, .42); color: #fff; font-weight: 500; background: rgba(11, 17, 19, .2); }
.hbtn.ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }
/* «Biznesini qur»: smoked glass with a champagne-copper metal rim. The rim is a conic gradient that turns slowly, a soft sheen sweeps across every few seconds. */
@property --brew-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.hbtn.brew { position: relative; isolation: isolate; overflow: hidden; gap: 7px; padding-inline: clamp(9px, .9vw, 13px) clamp(12px, 1.2vw, 18px); border: 1px solid transparent; color: #f1e4d2; letter-spacing: .01em;
  background: linear-gradient(180deg, rgba(38, 32, 27, .78), rgba(14, 12, 11, .82)) padding-box,
              conic-gradient(from var(--brew-a), #6f4a2c, #e9d3b3 12%, #b8865a 28%, #f6e8d0 42%, #7a5232 58%, #d9b98f 74%, #6f4a2c) border-box;
  box-shadow: 0 10px 28px -14px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(255, 240, 220, .18);
  backdrop-filter: blur(6px) saturate(1.2); -webkit-backdrop-filter: blur(6px) saturate(1.2);
  animation: brew-rim 9s linear infinite; transition: color .25s var(--ease), box-shadow .3s var(--ease), transform .18s var(--ease-out); }
.hbtn.brew::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; transform: translateX(-130%) skewX(-18deg); width: 42%;
  background: linear-gradient(90deg, transparent, rgba(246, 232, 208, .34), transparent); animation: brew-sheen 5.5s ease-in-out 1.2s infinite; }
.hbtn.brew:hover { color: #fff8ec; box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .8), 0 0 0 3px rgba(199, 180, 158, .16), inset 0 1px 0 rgba(255, 240, 220, .3); animation-duration: 3.5s; }
.hbtn.brew:hover::before { animation-duration: 2.2s; }
.hbtn.brew .brew-ico { width: 1.7em; height: 1.7em; flex: none; fill: none; stroke: var(--champagne); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.hbtn.brew:hover .brew-ico { stroke: #f6e8d0; }
@keyframes brew-rim { to { --brew-a: 360deg; } }
@keyframes brew-sheen { 0%, 55% { transform: translateX(-130%) skewX(-18deg); } 100% { transform: translateX(330%) skewX(-18deg); } }
@media (prefers-reduced-motion: reduce) { .hbtn.brew, .hbtn.brew::before { animation: none; } .hbtn.brew::before { display: none; } }
.hbtn:active { transform: translateY(1px); }
.hbtn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.hero-feats { list-style: none; display: flex; margin: min(2.7vw, 5.2vh) 0 0; padding: 0; }
.hero-feats li { display: grid; gap: min(.9vw, 1.6vh); align-content: start; padding-inline: clamp(10px, 1.35vw, 24px);
  font: 400 clamp(.72rem, min(.92vw, 1.85vh), 1rem)/1.35 var(--ui); color: #f0f1f1; }
.hero-feats li:first-child { padding-inline-start: 0; }
.hero-feats li + li { border-inline-start: 1px solid rgba(255, 255, 255, .13); }
.hero-feats .i { width: clamp(22px, min(2.1vw, 4vh), 34px); height: clamp(22px, min(2.1vw, 4vh), 34px); stroke-width: 1.15; color: var(--champagne); }   /* the same champagne as the headline's accent line */
/* the labels carry their own line breaks (home.json), as drawn */
.hero-feats span { white-space: pre-line; }
.hero-feats li:last-child { padding-inline-end: 0; }

/* ---------- machine + engraved captions ---------- */
.hero-machine { position: relative; margin: calc(-1 * clamp(8px, 1.2vw, 20px)) 0 0; min-width: 0; display: grid; }
.hero-frame { position: relative; display: grid; align-items: end; padding: 0 clamp(100px, 12.2vw, 204px) clamp(16px, 2.2vw, 38px) clamp(24px, 5.6vw, 96px); }
/* Placed by home.mjs from the scene's geometry, so the feet land on the painted podium. */
.hero-frame.is-placed { position: absolute; padding: 0; display: block; }
.hero-stage { position: relative; width: 100%; height: 100%; min-height: 320px; }
/* a contact shadow, so the machine stands on the podium instead of hovering over it */
.hero-stage::before { content: ""; position: absolute; inset: auto 22% -2.5% 22%; height: 8%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .62), rgba(0, 0, 0, 0)); filter: blur(6px); }
.hero-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
.hero-live { position: absolute; inset: 0; opacity: 0; }
.hero-stage.is-live .hero-live { opacity: 1; }
.hero-stage.is-live .hero-fallback { opacity: 0; }
.hero .sx-stage { background: transparent; border-radius: 0; cursor: default; }
.hero .sx-hero[data-state=loading] .sx-stage::after { display: none; }
.hero-live .sx-hero { height: 100%; }
.hero-live .sx-stage { flex: 1; height: 100%; aspect-ratio: auto; }

/* Gold letters cut from sheet metal and pinned to the marble panel: a brushed-gold ramp
   clipped to the glyphs, a lit top edge and a short hard shadow onto the stone. home.mjs
   places the block on the panel in the photograph and sizes it with the photograph. */
.hero-engrave { position: absolute; z-index: 1; margin: 0; inset-inline-start: clamp(20px, 7vw, 120px); top: clamp(16px, 4.5vw, 78px); pointer-events: none;
  font: 600 clamp(.72rem, .98vw, 1.05rem)/1.5 var(--serif); letter-spacing: .22em; text-transform: uppercase; white-space: nowrap;
  color: #d9b96a;
  background: linear-gradient(178deg, #fbf0c8 0%, #e6c878 18%, #c49a45 40%, #f3dc9a 55%, #b8893a 74%, #8a6526 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 -.5px 0 rgba(255, 246, 214, .55)) drop-shadow(1px 2px 1.5px rgba(0, 0, 0, .75)) drop-shadow(0 6px 10px rgba(0, 0, 0, .35)); }
.hero-engrave::after { content: ""; display: block; width: 2.4em; height: 1px; margin-top: 1em; background: linear-gradient(90deg, #e6c878, #8a6526); }

/* The product plate, as on the previous hero: brand and origin, the model, one line of what it is. */
.hero-plate { position: absolute; z-index: 3; inset-inline-start: clamp(8px, 2.4vw, 40px); bottom: clamp(8px, 1.5vw, 24px); margin: 0;
  padding: 10px 16px 11px; border: 1px solid rgba(255, 255, 255, .16); border-inline-start: 2px solid var(--champagne); border-radius: 6px;
  background: rgba(11, 17, 19, .62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.plate-id { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 2px 14px; text-decoration: none; color: inherit; }
.plate-brand { grid-column: 1 / -1; display: flex; gap: 8px; font: 600 11px/1.3 var(--ui); letter-spacing: .14em; color: #aeb4b6; }
.plate-origin { font-weight: 400; letter-spacing: .04em; }
.plate-origin::before { content: "·"; margin-inline-end: 8px; }
.plate-model { font: 600 clamp(1.1rem, 1.5vw, 1.45rem)/1.2 var(--ui); letter-spacing: .01em; color: #fff; }
.plate-sub { font: 400 clamp(.78rem, .92vw, .92rem)/1.3 var(--ui); color: #c9ced0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plate-id:hover .plate-model { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.plate-id:focus-visible { outline: 2px solid #fff; outline-offset: 6px; border-radius: 4px; }



/* ---------- pinned scroll-scrub (desktop) ---------- */
.hero.is-scrub { height: calc(100svh + 110vh); }
.hero.is-scrub > .hero-scene { position: sticky; top: 0; height: 100svh; margin-bottom: -100svh; }
.hero.is-scrub > .hero-grid { position: sticky; top: 0; height: calc(100svh - var(--strip-h)); min-height: 0;
  margin-bottom: var(--strip-h);   /* the sticky box ends above the strip, so at the end of the scrub the machine plate is never pushed under it */ }
/* The scroll distance is its own element: a margin on the strip would count as part of its
   sticky box and stop it from rising to the foot of the viewport. */
.hero-travel { display: none; }
.hero.is-scrub > .hero-travel { display: block; height: calc(110vh - var(--strip-h)); }
.hero.is-scrub > .brands { position: sticky; bottom: 0; }

/* ---------- entrance ---------- */
.home:not(.is-in) .hero-title .ln > span { transform: translateY(108%); }
.home:not(.is-in) :is(.hero-eyebrow, .hero-lead, .hero-cta, .hero-feats, .hero-engrave, .hero-plate) { opacity: 0; }
.home:not(.is-in) .hero-frame { opacity: 0; }
.home.is-in .hero-eyebrow { animation: fade-in .8s var(--ease-out) both; }
.home.is-in .hero-title .ln > span { animation: ln-rise .95s var(--ease-out) both; }
.home.is-in .hero-title .ln:nth-child(2) > span { animation-delay: .08s; }
.home.is-in .hero-title .ln:nth-child(3) > span { animation-delay: .16s; }
.home.is-in .hero-title .ln:nth-child(4) > span { animation-delay: .24s; }
.home.is-in .hero-lead { animation: fade-in .8s var(--ease-out) .34s both; }
.home.is-in .hero-cta { animation: fade-in .8s var(--ease-out) .44s both; }
.home.is-in .hero-feats { animation: fade-in .8s var(--ease-out) .56s both; }
.home.is-in .hero-frame { animation: fade-only .9s var(--ease-out) .1s both; }
.home.is-in :is(.hero-engrave, .hero-plate) { animation: fade-in 1s var(--ease-out) .7s both; }
@keyframes ln-rise { from { transform: translateY(108%); } to { transform: none; } }
@keyframes fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fade-only { from { opacity: 0; } to { opacity: 1; } }

/* On the homepage the header is glass over the photograph until the page moves. */
.home .site-header:not(.scrolled):not(.panel-open) { background: linear-gradient(90deg, rgba(10,15,17,.96) 0%, rgba(12,17,19,.95) 13%, rgba(17,22,23,.93) 25%, rgba(33,37,38,.88) 38%, rgba(40,42,41,.86) 51%, rgba(58,57,56,.82) 59%, rgba(62,61,60,.8) 63%, rgba(53,52,50,.82) 72%, rgba(49,49,47,.84) 82%, rgba(45,46,44,.86) 100%); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); }
.home .site-header { transition: background .25s var(--ease); }

/* ---------- 2 · Brand strip: frosted light band, one row of mono marks ---------- */
.brands { position: relative; z-index: 2; font-family: var(--ui);
  background: linear-gradient(90deg, rgba(212, 214, 218, .93), rgba(236, 236, 236, .95) 38%, rgba(234, 234, 234, .95));
  -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1); border-top: 1px solid rgba(255, 255, 255, .55); }
.brands-row { display: flex; align-items: center; gap: clamp(20px, 3.4vw, 56px); min-height: var(--strip-h); padding-inline: clamp(20px, 3.36vw, 56px); }
.brands-label { flex: none; margin: 0; white-space: pre-line; font: 500 clamp(9.5px, .72vw, 11.5px)/1.75 var(--ui); letter-spacing: .3em; text-transform: uppercase; color: #4a4d52; }
.brands-rail { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: flex-start; gap: clamp(26px, 3vw, 52px); list-style: none; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.brands-rail::-webkit-scrollbar { display: none; }
.brands-rail li { flex: none; scroll-snap-align: start; }
.brands-rail a { display: grid; place-items: center; height: 44px; text-decoration: none; }
/* An explicit height: most of these are SVGs with a viewBox and no size of their own, and
   with only max-* to go on they resolve to zero width. */
.brands-rail .brand-logo { height: clamp(18px, 1.75vw, 28px); max-height: none; max-width: clamp(96px, 10vw, 164px); width: auto; object-fit: contain; filter: grayscale(1) brightness(.2) contrast(1.4); opacity: .92; transition: opacity .2s, transform .3s var(--ease-out); }
.brands-rail .brand-word { font: 800 clamp(.95rem, 1.3vw, 1.3rem)/1 var(--ui); letter-spacing: -.01em; color: #2a2a2b; white-space: nowrap; }
.brands-rail a:hover .brand-logo { opacity: 1; transform: scale(1.05); }
.brands-rail a:focus-visible { outline: 2px solid #14181a; outline-offset: 4px; border-radius: 4px; }
.brands-next { flex: none; display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brands-next-line { width: clamp(16px, 2vw, 32px); height: 1px; background: #a9acb1; }
.brands-next-btn { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 8px 0 16px; border-radius: 999px; background: var(--olive-soft, #e4f6ee); color: var(--olive-ink, #0b6244); font: 600 clamp(11px, .78vw, 13px)/1 var(--ui); white-space: nowrap; transition: background .2s, transform .25s var(--ease-out); }
.brands-next-btn .i { width: 16px; height: 16px; flex: none; }
.brands-next:hover .brands-next-btn { background: #d5f0e3; transform: translateX(3px); }
.brands-next:focus-visible { outline: 2px solid #14181a; outline-offset: 4px; border-radius: 20px; }

/* ---------- smaller screens ---------- */
@media (max-width: 1140px) {
  .hero-grid { grid-template-columns: minmax(320px, 46%) minmax(0, 1fr); }
  .hero-frame { padding: 0 110px clamp(24px, 5vw, 60px) 0; }
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; min-height: 0; padding: calc(var(--header-h) + 30px) var(--hx) 28px; }
  /* the desktop rhythm is tied to the viewport's width and height; stacked, it gets fixed steps */
  .hero-eyebrow { margin-bottom: 20px; font-size: 10.5px; }
  .hero-title { font-size: clamp(2.1rem, 9.4vw, 3.2rem); line-height: .98; }
  .hero-lead { margin-top: 16px; font-size: 1rem; line-height: 1.5; max-width: 46ch; }
  .hero-cta { margin-top: 24px; }
  .hbtn { min-height: 48px; font-size: 1rem; }
  .hero-feats { margin-top: 30px; }
  .hero-feats li { gap: 10px; font-size: .9rem; }
  .hero-feats .i { width: 28px; height: 28px; }
  .hero-scene img { object-position: 72% 100%; }
  .hero-scene::after { background: linear-gradient(180deg, rgba(11, 17, 19, .94) 0%, rgba(11, 17, 19, .82) 46%, rgba(11, 17, 19, .2) 74%, rgba(11, 17, 19, 0) 100%); }
  .hero-copy { padding-bottom: 0; }
  /* Stacked: the machine is the point of this screen, so it follows the buttons directly and the four
     features come after it (they used to push the machine below the first screen). The copy block is
     dissolved so its children can be ordered together with the machine. */
  .hero-copy { display: contents; }
  .hero-eyebrow { order: 1; } .hero-title { order: 2; } .hero-lead { order: 3; } .hero-cta { order: 4; }
  .hero-machine { order: 5; } .hero-feats { order: 6; margin-top: 8px; }
  .hero-engrave { display: none; }   /* stacked: the panel is no longer beside the machine */
  .hero-eyebrow { white-space: normal; letter-spacing: .26em; line-height: 1.6; }
  .hero-machine { margin-top: 26px; }
  .hero-frame { padding: 0 0 8px; }
  .hero-stage { aspect-ratio: 1 / .92; height: auto; min-height: 0; }
  .hero-plate { position: static; margin-top: 14px; }
  .plate-sub { white-space: normal; }
    .brands-rail { justify-content: flex-start;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent); }
}
@media (max-width: 560px) {
  .hero-feats { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 0; }
  .hero-feats li:nth-child(odd) { padding-inline-start: 0; border-inline-start: 0; }
  .hero-cta .hbtn { flex: 1 1 100%; }
  .brands-label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .home .hero-title .ln > span, .home :is(.hero-eyebrow, .hero-lead, .hero-cta, .hero-feats, .hero-engrave, .hero-plate, .hero-frame) { transform: none !important; opacity: 1 !important; animation: none !important; }
}