/* ==========================================================================
   Sections - homepage, modeled on noom.co.il architecture (Live content)
   ========================================================================== */

/* ---------- Announcement marquee (rounded block, not full-bleed) ---------- */
.announce { max-width: calc(100% - 2 * var(--gutter)); background: var(--red); color: #fff; overflow: hidden; overflow: clip; contain: inline-size; border-radius: 12px; margin: 10px var(--gutter) 14px; }
.announce__track { display: flex; gap: 4rem; white-space: nowrap; padding: 9px 0; animation: marquee 14s linear infinite; }
.announce__track span { font-weight: 600; font-size: .9rem; letter-spacing: .01em; }
.announce:hover .announce__track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce){ .announce__track{ animation: none; justify-content:center; } }

/* ---------- Header (sticky, transparent over hero → solid on scroll) ---------- */
.header {
  position: sticky; top: 0; z-index: 100;
  background: transparent; border-bottom: 1px solid transparent;
  transition: background .35s var(--ease), border-color .35s var(--ease);
}
.header__in { display: flex; align-items: center; justify-content: space-between; gap: var(--s5); min-height: var(--header-h); }
.header__logo img { height: 30px; width: auto; filter: brightness(0) invert(1); transition: filter .35s var(--ease); }
/* default = over the hero → white marks */
.header .nav a { color: #fff; }
.header .icon-btn svg { stroke: #fff; }
.header .icon-btn:hover { background: rgba(255,255,255,.16); }
.header .burger span, .header .burger span::before, .header .burger span::after { background: #fff; }
/* solid = scrolled past hero → cream bg, dark marks */
.header.is-solid { background: var(--white); border-bottom-color: var(--line); }
.header.is-solid .header__logo img { filter: brightness(0); }
.header.is-solid .nav a { color: var(--ink); }
.header.is-solid .icon-btn svg { stroke: var(--ink); }
.header.is-solid .icon-btn:hover { background: var(--panel); }
.header.is-solid .burger span, .header.is-solid .burger span::before, .header.is-solid .burger span::after { background: var(--ink); }
.header__actions .btn--red { white-space: nowrap; }
.nav > ul { display: flex; align-items: center; gap: clamp(.6rem, 1.6vw, 1.7rem); }
.nav a { font-weight: 500; font-size: .98rem; color: var(--ink); position: relative; padding: .3rem 0; }
.nav a::after { content:""; position:absolute; inset-inline:0; bottom:-2px; height:2px; background:var(--red); transform:scaleX(0); transform-origin:right; transition:transform var(--dur) var(--ease); }
.nav a:hover::after, .nav .active a::after { transform: scaleX(1); }
.nav a.en { font-family: var(--font-display); font-weight: 700; }
.header__actions { display: flex; align-items: center; gap: var(--s4); }
.icon-btn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; transition: background var(--dur) var(--ease); }
.icon-btn:hover { background: var(--panel); }
.icon-btn svg { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 1.6; }
.burger { display: none; width: 42px; height: 42px; position: relative; }
.burger span,.burger span::before,.burger span::after { content:""; position:absolute; left:50%; transform:translateX(-50%); width:22px; height:2px; background:var(--ink); transition:.3s var(--ease); }
.burger span { top:50%; margin-top:-1px; } .burger span::before{top:-7px;} .burger span::after{top:7px;}
.burger.open span{background:transparent;} .burger.open span::before{top:0;transform:translateX(-50%) rotate(45deg);} .burger.open span::after{top:0;transform:translateX(-50%) rotate(-45deg);}
@media(max-width:980px){
  .burger{display:block;}
  .header__in{ gap: var(--s3); }
  .header__actions{ gap: var(--s2); }
  .header__actions .btn--red{ padding: 8px 14px; font-size: .82rem; line-height:1; }
  .header__actions .icon-btn{ width:36px; height:36px; }
  .nav{position:absolute;inset-block-start:100%;inset-inline:0;background:var(--white);border-bottom:1px solid var(--line);transform:translateY(-120%);visibility:hidden;transition:transform var(--dur) var(--ease), visibility var(--dur);max-height:80dvh;overflow-y:auto;z-index:-1;}
  .nav.open{transform:none;visibility:visible;}
  .nav>ul{flex-direction:column;align-items:stretch;gap:0;padding:var(--s3) var(--gutter);}
  .nav>ul>li{border-bottom:1px solid var(--line);}
  .nav a{padding:1rem .2rem;font-size:1.1rem;} .nav a::after{display:none;}
  .header .nav a{ color: var(--ink); }   /* dropdown is cream → dark links */
}

/* ---------- Hero ---------- */
.hero { position: relative; margin-top: calc(-1 * var(--header-h)); }  /* pull image up behind the transparent header */
.hero__media { position: relative; height: 88vh; min-height: 600px; border-radius: 0 0 var(--radius-lg) var(--radius-lg); overflow: hidden; }
.hero__media img, .hero__media video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero__bg--m { display: none; }   /* mobile video hidden on desktop; toggled in the ≤640px query */
/* top gradient darkens the header zone (white marks) + start-side gradient for the hero text */
.hero__scrim { position:absolute; inset:0; background:
  linear-gradient(180deg, rgba(18,15,13,.5) 0%, rgba(18,15,13,0) 18%),
  linear-gradient(90deg, rgba(24,20,18,.72) 0%, rgba(24,20,18,.34) 40%, transparent 66%); }
.hero__content { position:absolute; z-index:2; inset-block-end: clamp(28px,5vw,64px); inset-inline-end: clamp(20px,5vw,64px); max-width: 34rem; color:#fff; }
.hero__title { font-family: var(--font-display); font-weight: 300; font-size: var(--fs-hero); line-height: .98; color:#fff; letter-spacing:-.01em; }
.hero__title b { font-weight: 800; }
.hero__sub { margin-top: var(--s4); font-size: var(--fs-lead); color: rgba(255,255,255,.9); max-width: 40ch; }
.hero__cta { margin-top: var(--s5); display:flex; gap:var(--s3); flex-wrap:wrap; }
@media(max-width:640px){
  .hero{ padding: 0 var(--s3); }
  .hero__bg--d{ display:none; }  .hero__bg--m{ display:block; }   /* swap to the 9:16 video on mobile */
  .hero__media{ height:82vh; min-height:520px; border-radius: var(--radius); }
  .hero__scrim{ background:
    linear-gradient(180deg, rgba(18,15,13,.46) 0%, rgba(18,15,13,0) 22%),
    linear-gradient(0deg, rgba(20,18,18,.74), rgba(20,18,18,.12) 62%); }
  .hero__content{ inset-inline: var(--s5); inset-block-end: var(--s6); max-width:none; }
  .hero__title{ font-size: clamp(2.3rem,10vw,3.3rem); }
  .hero__sub{ max-width:none; font-size:1rem; }
}

/* ---------- Ticker (bold running band under hero) - animation driven by JS (WAAPI) ---------- */
.ticker { width: 100%; max-width: 100%; overflow: hidden; overflow: clip; contain: inline-size; background: var(--white); border-block: 1px solid var(--line); padding: clamp(10px,1.6vw,20px) 0; direction: ltr; }
.ticker__track { display: flex; flex-wrap: nowrap; width: max-content; direction: ltr; }
.ticker__group { flex: 0 0 auto; display: inline-flex; align-items: center; white-space: nowrap; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.5rem,4.6vw,2.9rem); line-height: 1; letter-spacing: -.01em; color: var(--ink); }
.ticker__star { font-style: normal; color: var(--red); margin-inline: clamp(.5em,2.4vw,1.15em); }

/* ---------- Intro panel (centered statement) ---------- */
.statement { }
.statement__panel { background: var(--panel); border-radius: var(--radius-lg); padding: clamp(40px,7vw,96px) var(--gutter); text-align: center; }
.statement__title { font-size: var(--fs-display); margin-bottom: var(--s4); }
.statement__title .he { display:block; font-family: var(--font-body); font-weight:700; text-transform:none; color:var(--ink); margin-top:.2em; font-size:.62em; }
.statement__body { color: var(--red-deep); max-width: 54ch; margin: 0 auto var(--s6); font-size: var(--fs-lead); font-weight:500; }

/* ---------- Products ---------- */
.promo-bar { background: var(--red); color:#fff; border-radius: var(--pill); text-align:center; padding: 12px 22px; font-weight:600; margin-bottom: var(--s6); }
.prod-scroller { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 1fr); gap: var(--s5); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--s3); scrollbar-width: thin; }
.prod-scroller::-webkit-scrollbar { height: 6px; } .prod-scroller::-webkit-scrollbar-thumb { background: var(--panel-2); border-radius: 3px; }
@media(min-width:1100px){ .prod-scroller{ grid-template-columns: repeat(4,1fr); grid-auto-flow: row; overflow: visible; } }
.pcard { scroll-snap-align: start; background: var(--white); border-radius: var(--radius); overflow: hidden; display:flex; flex-direction:column; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.pcard:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.pcard__media { position: relative; aspect-ratio: 1/1; background: var(--panel); display:grid; place-items:center; padding: 8%; }
.pcard__media img { max-height: 92%; width:auto; object-fit:contain; transition: transform var(--dur) var(--ease); }
.pcard:hover .pcard__media img { transform: scale(1.05); }
.pcard__tags { position:absolute; top:12px; inset-inline-start:12px; display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
.pcard__body { padding: var(--s4) var(--s5) var(--s5); display:flex; flex-direction:column; gap:6px; flex:1; }
.pcard__name { font-weight:700; font-size:1.1rem; }
.pcard__en { font-family:var(--font-display); font-weight:700; font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); }
.pcard__desc { color: var(--muted); font-size:.92rem; flex:1; }
.pcard__foot { display:flex; align-items:center; justify-content:space-between; margin-top: var(--s3); }
.pcard__price { font-weight:700; }
.prod-actions { text-align:center; margin-top: var(--s7); }

/* ---------- Equipment - horizontal cinematic gallery ---------- */
.collection { overflow: hidden; }
.coll-head { display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s5); margin-bottom:var(--s6); flex-wrap:wrap; }
.coll-nav { display:flex; gap:var(--s2); }
.coll-arrow { width:50px; height:50px; border-radius:50%; border:1.5px solid var(--ink); font-size:1.5rem; line-height:1; display:grid; place-items:center; color:var(--ink); transition:background var(--dur) var(--ease), color var(--dur) var(--ease); }
.coll-arrow:hover { background:var(--ink); color:var(--cream); }
.coll-track {
  display:flex; gap:var(--s4); overflow-x:auto; scroll-snap-type:x mandatory;
  padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
  padding-block: var(--s2) var(--s4);
  scrollbar-width:none; cursor:grab; scroll-behavior:smooth;
}
.coll-track::-webkit-scrollbar { display:none; }
.coll-track.drag { cursor:grabbing; scroll-behavior:auto; }
.coll-track.drag .coll-item { pointer-events:none; }
.coll-item {
  position:relative; flex:0 0 auto; width:min(66vw, 440px); aspect-ratio:4/5;
  border-radius:var(--radius); overflow:hidden; scroll-snap-align:start; display:block;
  background:var(--panel);
}
.coll-item img { width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.coll-item:hover img { transform:scale(1.06); }
.coll-item__grad { position:absolute; inset:0; background:linear-gradient(0deg, rgba(18,15,13,.8) 0%, rgba(18,15,13,.12) 44%, transparent 72%); }
.coll-item__num { position:absolute; top:16px; inset-inline-start:18px; z-index:2; font-family:var(--font-mono); color:#fff; font-size:.82rem; letter-spacing:.05em; opacity:.9; direction:ltr; }
.coll-item__cap { position:absolute; inset-block-end:0; inset-inline:0; z-index:2; padding:var(--s5); color:#fff; }
.coll-item__name { font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:clamp(1.5rem,2.6vw,2.2rem); line-height:1; color:#fff; }
.coll-item__desc { color:rgba(255,255,255,.86); margin-top:8px; font-size:.98rem; }
.coll-item__link { display:inline-block; margin-top:var(--s4); font-family:var(--font-mono); font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:#fff; padding-bottom:3px; border-bottom:1px solid rgba(255,255,255,.5); transition:border-color var(--dur) var(--ease); }
.coll-item:hover .coll-item__link { border-color:#fff; }
@media(max-width:640px){ .coll-item{ width:80vw; } .coll-nav{ display:none; } }

/* ---------- Atmosphere / The Feeling ---------- */
.atmo-head { text-align:center; margin-bottom: var(--s7); }
.atmo-head .display { direction:ltr; }
.atmo-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding-inline:10px; }   /* near full-bleed, tiny breathing room */
.atmo-tile { position:relative; overflow:hidden; aspect-ratio: 1/1; margin:0; border-radius:8px; }
.atmo-tile img { width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.atmo-tile:hover img { transform:scale(1.05); }
@media(max-width:720px){ .atmo-grid{ grid-template-columns:1fr; } .atmo-tile{ aspect-ratio:4/5; } }

/* ---------- Process - How it works (centered, self-drawing animated icons) ---------- */
.steps { position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap: var(--s6) var(--s5); list-style:none; padding:0; margin:0; }
/* dotted "process path" connecting the icon nodes (desktop) */
.steps::before { content:""; position:absolute; top:36px; inset-inline:12.5%; height:2px; z-index:0;
  background: repeating-linear-gradient(90deg, var(--line) 0 7px, transparent 7px 15px); }
.step { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; text-align:center; }
/* white circle floating slightly above the page (soft shadow, no border) */
.step__icon { position:relative; width:72px; height:72px; display:grid; place-items:center; margin-bottom: var(--s4);
  background: var(--white); border-radius:50%; box-shadow: 0 6px 18px rgba(31,31,31,.12); }
.step__icon svg { width:50px; height:50px; overflow:visible; }
.step__icon svg path { fill:none; stroke: var(--red); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:1; stroke-dashoffset:1; opacity:0; animation: step-draw 3.6s var(--ease) infinite; }
.step__badge { position:absolute; top:-4px; inset-inline-end:-4px; width:28px; height:28px; border-radius:50%;
  background: var(--red); color:#fff; display:grid; place-items:center; z-index:2;
  font-family: var(--font-display); font-weight:800; font-size:.82rem; direction:ltr; box-shadow: var(--shadow-sm); }
.step__title { font-size: var(--fs-h3); font-weight:700; color: var(--ink); }
.step__desc { margin-top: var(--s2); max-width: 26ch; color: var(--muted); font-size: .96rem; line-height: var(--lh-base); }
.steps-cta { text-align:center; margin-top: var(--s7); }

/* the icon "builds itself", holds, dissolves, and rebuilds - looping */
@keyframes step-draw {
  0%   { stroke-dashoffset:1; opacity:0; }
  8%   { opacity:1; }
  48%  { stroke-dashoffset:0; opacity:1; }
  76%  { stroke-dashoffset:0; opacity:1; }
  90%  { stroke-dashoffset:0; opacity:0; }
  100% { stroke-dashoffset:1; opacity:0; }
}
/* stagger the four icons so the row builds like a wave */
.step:nth-child(2) .step__icon path { animation-delay:.35s; }
.step:nth-child(3) .step__icon path { animation-delay:.70s; }
.step:nth-child(4) .step__icon path { animation-delay:1.05s; }

@media(max-width:860px){ .steps{ grid-template-columns:1fr 1fr; } .steps::before{ display:none; } }
@media(max-width:520px){ .steps{ grid-template-columns:1fr; gap: var(--s6); } }
@media (prefers-reduced-motion: reduce){
  .step__icon svg path { animation:none; stroke-dashoffset:0; opacity:1; }
}

/* ---------- Promo banner ---------- */
.banner { position: relative; border-radius: var(--radius-lg); overflow:hidden; min-height: clamp(320px, 40vw, 520px); display:grid; place-items:center; text-align:center; color:#fff; }
.banner img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.banner__scrim { position:absolute; inset:0; background: rgba(20,18,18,.35); }
.banner__in { position:relative; z-index:2; padding: var(--gutter); }
.banner__title { font-family: var(--font-display); font-weight:800; text-transform:uppercase; font-size: clamp(2.4rem,7vw,6rem); line-height:.95; color:#fff; }
.banner__title .star { color: var(--yellow); }
.banner__sub { margin: var(--s3) auto var(--s5); max-width: 44ch; color: rgba(255,255,255,.9); font-size: var(--fs-lead); }

/* banner variant: text sits in the image's empty (light) area, dark text */
.banner--start .banner__scrim { background: linear-gradient(90deg, rgba(247,246,243,.94) 0%, rgba(247,246,243,.6) 32%, rgba(247,246,243,0) 58%); }
.banner--start .banner__in { position:absolute; left: clamp(20px,5vw,72px); right:auto; top:50%; transform:translateY(-50%); text-align:center; max-width:min(46%,30rem); }
.banner--start .banner__title { color: var(--ink); }
.banner--start .banner__title .star { color: var(--red); }
.banner--start .banner__sub { color: var(--ink-soft); }
@media(max-width:640px){
  .banner { min-height: 64vh; }
  .banner--start .banner__in { position:static; transform:none; max-width:100%; align-self:end; padding-bottom: var(--s7); }
  .banner--start .banner__scrim { background: linear-gradient(0deg, rgba(20,18,18,.7) 0%, rgba(20,18,18,.22) 46%, rgba(20,18,18,.04) 100%); }
  .banner--start .banner__title { color:#fff; }
  .banner--start .banner__sub { color: rgba(255,255,255,.92); }
}

/* ---------- Reviews (light-gray band - white cards pop) ---------- */
#reviews { background: var(--cream); }
.rev-head { display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s5); margin-bottom: var(--s6); flex-wrap:wrap; }
/* masonry (mixed text + media cards, varying heights) */
.rev-masonry { columns: 3; column-gap: var(--s4); }
@media(max-width:760px){ .rev-masonry{ columns:2; column-gap: var(--s3); } }
@media(max-width:360px){ .rev-masonry{ columns:1; } }
.rev-masonry .rcard { break-inside: avoid; margin-bottom: var(--s4); width:100%; }
@media(max-width:760px){
  .rev-masonry .rcard{ margin-bottom: var(--s3); }
  .rcard{ padding: var(--s4); gap: var(--s2); }
  .rcard__q{ font-size:.88rem; line-height:1.45; }
  .rcard__date{ font-size:.72rem; }
  .stars{ font-size:.82rem; letter-spacing:1px; }
  .rcard__avatar{ width:30px; height:30px; font-size:.82rem; }
  .rcard__who{ font-size:.82rem; }
  .rcard__role{ font-size:.72rem; }
  .rcard__name{ font-size:.75rem; padding:4px 10px; }
  .rcard__play{ width:44px; height:44px; }
}

/* text card */
.rcard { background: var(--panel); border-radius: var(--radius); padding: var(--s5); display:flex; flex-direction:column; gap:var(--s3); }
.rcard__top { display:flex; align-items:center; justify-content:space-between; gap:var(--s3); }
.rcard__date { color: var(--muted); font-size: var(--fs-small); white-space:nowrap; }
.stars { color: var(--red); letter-spacing:2px; font-size:.95rem; }
.rcard__q { font-size:1rem; line-height:1.5; color: var(--ink); }
.rcard__by { display:flex; align-items:center; gap:.6rem; margin-top: var(--s1); }
.rcard__avatar { width:38px; height:38px; border-radius:50%; background: var(--red); color:#fff; display:grid; place-items:center; font-weight:700; font-family:var(--font-display); font-size:1rem; flex:none; }
.rcard__who { font-weight:700; font-size:.95rem; }
.rcard__role { color: var(--muted); font-size:var(--fs-small); }

/* media card (customer story) */
.rcard--media { padding:0; overflow:hidden; position:relative; aspect-ratio:3/4; display:block; background:var(--panel-2); }
.rcard--media img { width:100%; height:100%; object-fit:cover; }
.rcard--media::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(20,18,18,.55), rgba(20,18,18,0) 42%); }
.rcard__play { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2; width:54px; height:54px; border-radius:50%; background:rgba(255,255,255,.88); display:grid; place-items:center; transition:transform var(--dur) var(--ease); }
.rcard--media:hover .rcard__play { transform:translate(-50%,-50%) scale(1.08); }
.rcard__play::before { content:""; width:0; height:0; border-style:solid; border-width:9px 0 9px 14px; border-color:transparent transparent transparent var(--ink); margin-inline-start:3px; }
.rcard__name { position:absolute; bottom:12px; inset-inline-start:12px; z-index:2; background:var(--red); color:#fff; font-weight:600; font-size:.85rem; padding:5px 13px; border-radius:var(--pill); }

/* ---------- Voice tiles ---------- */
.voice { display:grid; grid-template-columns: repeat(3,1fr); gap: var(--s4); }
@media(max-width:720px){ .voice{grid-template-columns:1fr;} }
.vtile { aspect-ratio: 16/10; border-radius: var(--radius); display:grid; place-items:center; }
.vtile span { font-family: var(--font-display); font-weight:800; text-transform:uppercase; font-size: clamp(2.4rem,5vw,4rem); letter-spacing:-.01em; direction:ltr; unicode-bidi:isolate; }
.vtile--gray { background: var(--panel-2); color: var(--ink); }
.vtile--red { background: var(--red); color:#fff; }
.vtile--yellow { background: var(--yellow); color: var(--ink); }
.vtile .star { color: var(--red); }

/* ---------- Footer ---------- */
.footer { background: var(--ink); color: #d9d7d2; margin-top: var(--section-y); }
.footer__in { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--s6); padding-block: var(--s8) var(--s6); }
.footer__brand img { height: 34px; filter: brightness(0) invert(1); margin-bottom: var(--s4); }
.footer__brand p { color:#a8a6a1; max-width:30ch; }
.footer__social { display:flex; gap:.6rem; margin-top: var(--s4); }
.footer__social a { width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:var(--red); transition:transform var(--dur) var(--ease); }
.footer__social a:hover{ transform:translateY(-2px); }
.footer__social svg { width:17px; height:17px; fill:#fff; }
.footer h4 { color:#fff; font-family:var(--font-display); text-transform:uppercase; font-size:.95rem; letter-spacing:.05em; margin-bottom: var(--s4); }
.footer ul { display:grid; gap:.5rem; } .footer li a{ color:#a8a6a1; } .footer li a:hover{ color:#fff; }
.footer__bottom { border-top:1px solid rgba(255,255,255,.12); padding-block: var(--s4); display:flex; justify-content:space-between; gap:var(--s4); flex-wrap:wrap; color:#8f8d88; font-size:var(--fs-small); }
@media(max-width:820px){ .footer__in{grid-template-columns:1fr 1fr;} .footer__brand{grid-column:1/-1;} }
@media(max-width:520px){ .footer__in{grid-template-columns:1fr;} }

/* ---------- Why Live (differentiators) + Stats ---------- */
.why-grid { display:grid; grid-template-columns:repeat(3,1fr); gap: var(--s5); }
.why-item { padding: var(--s5); border:1px solid var(--line); border-radius: var(--radius); background: var(--white); transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
.why-item:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.why-item__icon { width:48px; height:48px; display:grid; place-items:center; border-radius:12px; background: rgba(231,97,0,.10); margin-bottom: var(--s4); }
.why-item__icon svg { width:26px; height:26px; fill:none; stroke: var(--red); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.why-item h3 { font-size: var(--fs-h3); font-weight:700; color: var(--ink); margin-bottom: 6px; }
.why-item p { color: var(--muted); font-size: .96rem; line-height: var(--lh-base); }
@media(max-width:900px){ .why-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .why-grid{ grid-template-columns:1fr; } }

.stats { display:grid; grid-template-columns:repeat(3,1fr); gap: var(--s4); margin-top: var(--s2); text-align:center; }
.stat__num { display:block; font-family: var(--font-display); font-weight:800; font-size: clamp(2.4rem,5vw,3.6rem); line-height:1; color: var(--red); letter-spacing:-.02em; direction:ltr; }
.stat__label { display:block; margin-top:8px; color: var(--muted); font-size:.92rem; }
@media(max-width:560px){ .stats{ gap: var(--s5) var(--s2); } .stat__label{ font-size:.8rem; } }

/* ---------- About teaser (owners) ---------- */
.about-split { display:grid; grid-template-columns:1fr 1fr; gap: clamp(32px,5vw,72px); align-items:center; }
.about-split__media { margin:0; }
.about-split__media img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.about-split__cap { margin-top: var(--s3); font-family: var(--font-mono); font-size: var(--fs-small); color: var(--muted); letter-spacing:.02em; }
.about-split__title { font-size: var(--fs-display); line-height:1; margin: var(--s2) 0 var(--s4); }
.about-split__lead { font-size: var(--fs-lead); color: var(--ink); font-weight:600; margin-bottom: var(--s4); }
.about-split__text { color: var(--muted); margin-bottom: var(--s6); max-width: 46ch; }
@media(max-width:820px){ .about-split{ grid-template-columns:1fr; gap: var(--s5); } }

/* ---------- About page ---------- */
.hero--page .hero__media { height: 62vh; min-height: 440px; }
@media(max-width:640px){ .hero--page .hero__media { height: 56vh; min-height: 400px; } }
.section--panel { background: var(--cream); }

/* timeline */
.timeline { display:grid; grid-template-columns:repeat(5,1fr); gap: var(--s5); }
.tl { border-top:2px solid var(--line); padding-top: var(--s4); position:relative; }
.tl::before { content:""; position:absolute; top:-7px; inset-inline-start:0; width:12px; height:12px; border-radius:50%; background:var(--red); box-shadow:0 0 0 4px var(--bg); }
.tl__year { font-family:var(--font-display); font-weight:800; font-size:1.6rem; color:var(--red); direction:ltr; display:block; margin-bottom:6px; }
.tl__t { color:var(--muted); font-size:.9rem; line-height:1.4; }
@media(max-width:760px){ .timeline{ grid-template-columns:1fr 1fr; gap: var(--s5) var(--s4); } }
@media(max-width:420px){ .timeline{ grid-template-columns:1fr; } }

/* values */
.values { display:grid; grid-template-columns:repeat(3,1fr); gap: var(--s6); }
.value__num { font-family:var(--font-display); font-weight:800; font-size:1.8rem; color:var(--red); direction:ltr; display:block; letter-spacing:-.02em; }
.value h3 { font-size: var(--fs-h3); font-weight:700; margin: var(--s2) 0; color:var(--ink); }
.value p { color: var(--muted); }
@media(max-width:760px){ .values{ grid-template-columns:1fr; gap: var(--s5); } }

/* about CTA band */
.about-cta { background: var(--ink); color:#fff; border-radius: var(--radius-lg); padding: clamp(48px,7vw,96px) var(--gutter); text-align:center; }
.about-cta h2 { color:#fff; font-size: var(--fs-display); }
.about-cta p { color: rgba(255,255,255,.82); margin: var(--s3) auto var(--s6); max-width: 46ch; }

/* ---------- Product page ---------- */
.breadcrumb-bar { padding-top: var(--s6); font-size: var(--fs-small); color: var(--muted); }
.breadcrumb-bar a:hover { color: var(--red); }
.breadcrumb-bar b { color: var(--ink); }
.breadcrumb-bar span { margin-inline:.4rem; opacity:.5; }

.specs { display:flex; flex-wrap:wrap; gap: var(--s4); }
.spec { flex:1; min-width:110px; text-align:center; padding: var(--s2) 0; }
.spec__k { display:block; font-family:var(--font-mono); font-size:var(--fs-small); color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
.spec__v { display:block; font-family:var(--font-display); font-weight:800; font-size:clamp(1.4rem,2.4vw,2rem); color:var(--ink); margin-top:6px; direction:ltr; }

.prod-gallery { display:grid; grid-template-columns:repeat(3,1fr); gap: var(--s3); }
.prod-gallery a { border-radius: var(--radius); overflow:hidden; aspect-ratio:4/3; display:block; background:var(--panel); }
.prod-gallery img { width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.prod-gallery a:hover img { transform:scale(1.06); }
@media(max-width:760px){ .prod-gallery{ grid-template-columns:1fr 1fr; } }

.related { display:grid; grid-template-columns:repeat(4,1fr); gap: var(--s4); }
.related__item { text-align:center; }
.related__item img { width:100%; aspect-ratio:1/1; object-fit:cover; border-radius: var(--radius); background:var(--panel); transition:transform var(--dur) var(--ease); }
.related__item:hover img { transform:translateY(-4px); }
.related__item span { display:block; margin-top:var(--s2); font-family:var(--font-display); font-weight:700; text-transform:uppercase; font-size:.85rem; letter-spacing:.03em; color:var(--ink); }
@media(max-width:760px){ .related{ grid-template-columns:1fr 1fr; } }

/* refined feature grid (editorial, numbered — no boxes) */
.feat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap: var(--s7) var(--s6); }
.feat { padding-top: var(--s5); border-top: 2px solid var(--line); transition: border-color .35s var(--ease); }
.feat:hover { border-color: var(--red); }
.feat__top { display:flex; align-items:center; justify-content:space-between; }
.feat__num { font-family: var(--font-display); font-weight:800; font-size:1.1rem; color: var(--red); direction:ltr; letter-spacing:.06em; }
.feat__icon svg { width:26px; height:26px; fill:none; stroke: var(--red); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.feat h3 { margin: var(--s4) 0 var(--s2); font-size:1.25rem; font-weight:700; color: var(--ink); }
.feat p { color: var(--muted); font-size:.96rem; line-height:1.5; }
@media(max-width:860px){ .feat-grid{ grid-template-columns:1fr 1fr; gap: var(--s6) var(--s5); } }
@media(max-width:520px){ .feat-grid{ grid-template-columns:1fr; gap: var(--s5); } }

/* product movement video */
.prod-video { border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow); background:#000; }
.prod-video video { width:100%; display:block; aspect-ratio:16/9; object-fit:cover; }

/* use-cases */
.usecases { display:grid; grid-template-columns:repeat(4,1fr); gap: var(--s3); }
.uc { background: var(--white); border:1px solid var(--line); border-radius: var(--radius); padding: var(--s5) var(--s4); text-align:center; font-weight:700; color:var(--ink); transition: border-color .3s var(--ease), transform .3s var(--ease); }
.uc:hover { border-color: var(--red); transform: translateY(-3px); }
@media(max-width:640px){ .usecases{ grid-template-columns:1fr 1fr; } }

/* ---------- FAQ (native accordion) ---------- */
.faq__wrap { max-width: 860px; }
.faq-list { display:grid; gap: var(--s3); }
.faq-item { border:1px solid var(--line); border-radius: var(--radius-sm); background: var(--white); overflow:hidden; }
.faq-item summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap: var(--s4); padding: var(--s4) var(--s5); font-weight:600; color: var(--ink); font-size:1.02rem; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:"+"; font-family: var(--font-display); font-size:1.4rem; line-height:1; color: var(--red); transition: transform var(--dur) var(--ease); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item__a { padding: 0 var(--s5) var(--s5); color: var(--muted); line-height: var(--lh-base); }
.faq-item__a p { max-width: 68ch; }

/* ---------- Contact / Consultation (conversion climax — dark card) ---------- */
.contact-card { background: var(--ink); color:#fff; border-radius: var(--radius-lg); padding: clamp(28px,4vw,56px); display:grid; grid-template-columns:1fr 1fr; gap: clamp(28px,4vw,56px); align-items:center; }
.contact-card__intro .mono-label { color: var(--red-soft); }
.contact-card__title { color:#fff; font-family: var(--font-display); font-weight:800; font-size: clamp(2rem,4vw,3.2rem); line-height:1.05; letter-spacing:-.01em; margin:.3em 0 .45em; }
.contact-card__lead { color: rgba(255,255,255,.78); max-width: 42ch; font-size: var(--fs-lead); }
.contact-card__meta { margin-top: var(--s5); display:grid; gap:.5rem; }
.contact-card__meta li { color: rgba(255,255,255,.85); }
.contact-card__meta a { color:#fff; border-bottom:1px solid rgba(255,255,255,.3); }
.contact-form { display:grid; gap: var(--s4); }
/* Spam honeypot: kept in the DOM (bots fill it) but hidden from humans & AT. */
.hp-field { position:absolute !important; left:-9999px !important; top:auto; width:1px; height:1px; overflow:hidden; }
.field { display:grid; gap:6px; }
.field label { font-size:.85rem; color: rgba(255,255,255,.7); }
.field input, .field select, .field textarea { width:100%; padding:12px 14px; border-radius: var(--radius-sm); border:1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); color:#fff; font-family:inherit; font-size:1rem; }
.field textarea { resize:vertical; }
.field input::placeholder, .field textarea::placeholder { color: rgba(255,255,255,.4); }
.field select option { color: var(--ink); }
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color: var(--red); background: rgba(255,255,255,.10); }
.contact-form__actions { display:flex; gap: var(--s3); flex-wrap:wrap; margin-top: var(--s2); }
.contact-form__actions .btn { flex:1 1 auto; justify-content:center; }
@media(max-width:820px){ .contact-card{ grid-template-columns:1fr; } }