@font-face {
  font-family: "Shtof Rubik"; src: url("assets/rubik-hebrew.woff2") format("woff2"); font-weight: 400 800; font-display: swap;
  unicode-range: U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;
}
@font-face { font-family: "Shtof Rubik Latin"; src: url("assets/rubik-latin.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }

:root {
  --ink: #07111d; --ink-soft: #0d1d2d; --blue: #0868b2; --blue-strong: #1390ec; --paper: #f7f7f2; --paper-deep: #e8e9e2;
  --line-dark: rgb(224 238 249 / 24%); --line-light: #c9d1d5; --copy-dark: #102336; --copy-muted: #466273; --copy-light: #c0d2df;
  --ease-out: cubic-bezier(.2,.85,.25,1);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; background: var(--ink); scrollbar-gutter: stable; }
body { min-inline-size: 0; margin: 0; overflow-x: hidden; background: var(--ink); color: var(--copy-dark); font-family: "Shtof Rubik","Shtof Rubik Latin",Arial,sans-serif; font-size: 16px; line-height: 1.65; text-align: start; }
button,a { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button,summary { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-underline-offset: .26em; }
img { display: block; max-inline-size: 100%; }
h1,h2,h3,p { margin-block-start: 0; }
h1,h2,h3 { line-height: .98; text-wrap: balance; letter-spacing: -.035em; }
p { text-wrap: pretty; }
svg { inline-size: 20px; block-size: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
::selection { background: var(--blue); color: white; }
:focus-visible { outline: 3px solid var(--blue-strong); outline-offset: 5px; }
section,article[id] { scroll-margin-block-start: 28px; }

.skip-link { position: fixed; z-index: 100; inset-block-start: 1rem; inset-inline-start: 1rem; transform: translateY(-200%); padding: .68rem 1rem; background: white; color: var(--ink); border: 1px solid white; }
.skip-link:focus { transform: translateY(0); }
.brand-word { font-family: "Shtof Rubik Latin",sans-serif; font-style: italic; font-weight: 800; unicode-bidi: isolate; padding-inline: .11em; white-space: nowrap; }
.site-header,.hero,.quick-truth,.how-section,.booking-demo,.washer-section,.faq-section,.beta-section,.info-section,.site-footer { inline-size: min(1280px,calc(100% - 64px)); margin-inline: auto; }

.site-header { display: flex; align-items: center; justify-content: space-between; gap: 28px; min-block-size: 86px; color: white; border-block-end: 1px solid var(--line-dark); }
.brand { display: inline-flex; align-items: center; gap: 10px; flex: none; line-height: 1.02; text-decoration: none; }
.brand img { inline-size: 46px; block-size: 46px; object-fit: contain; }
.brand span { display: grid; gap: 3px; min-inline-size: 90px; }
.brand i { display: block; overflow: visible; padding-inline-end: .18em; font-family: "Shtof Rubik Latin",Arial,sans-serif; font-size: 25px; font-weight: 800; font-style: italic; letter-spacing: -.03em; }
.brand small { color: var(--blue-strong); font-family: "Shtof Rubik Latin",Arial,sans-serif; font-size: 11px; font-weight: 800; letter-spacing: .2em; }
.site-header nav { display: flex; gap: clamp(18px,2.5vw,42px); font-size: 14px; font-weight: 600; }
.site-header nav a,.site-footer > a:not(.brand) { display: inline-flex; align-items: center; min-block-size: 44px; text-decoration: none; }
.header-action,.button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-block-size: 48px; padding: 11px 20px; border: 1px solid transparent; border-radius: 2px; font-weight: 750; text-decoration: none; transition: transform 180ms var(--ease-out),background 180ms ease,color 180ms ease,border-color 180ms ease; }
.header-action { min-block-size: 44px; border-color: rgb(255 255 255 / 55%); color: white; font-size: 13px; }
.button-primary { background: var(--blue); color: white; }
.button-outline { border-color: currentColor; color: inherit; }
.button-light { background: white; color: var(--ink); }
.button:active,.header-action:active { transform: scale(.98); }
.button:focus-visible,.header-action:focus-visible { transform: none; transition: none; }

.hero { display: grid; grid-template-columns: minmax(0,1.03fr) minmax(0,.97fr); grid-template-areas: "copy scene" "actions scene"; column-gap: clamp(36px,6vw,106px); row-gap: 28px; align-content: center; min-block-size: min(770px,calc(100dvh - 86px)); padding-block: 42px 76px; color: white; }
.hero-copy { grid-area: copy; align-self: end; max-inline-size: 690px; }
.hero h1 { margin-block-end: 24px; font-size: clamp(54px,7.25vw,112px); font-weight: 750; }
.hero h1 span { color: var(--blue-strong); }
.hero-lead { max-inline-size: 41ch; margin-block-end: 0; color: var(--copy-light); font-size: clamp(17px,1.4vw,21px); }
.hero-footer { grid-area: actions; align-self: start; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.availability-note { max-inline-size: 52ch; margin-block: 16px 0; color: #9cb1c0; font-size: 14px; }
.wash-scene { grid-area: scene; position: relative; isolation: isolate; display: grid; grid-template-columns: 1fr auto; column-gap: 12px; row-gap: 10px; align-items: center; align-self: center; margin: 0; min-inline-size: 0; }
.wash-scene::before { content: ""; position: absolute; z-index: -1; inset: 7% 0 15% 11%; background: #0c4c81; border-inline-start: 1px solid rgb(255 255 255 / 45%); border-block: 1px solid rgb(255 255 255 / 20%); }
.wash-scene::after { content: ""; position: absolute; z-index: -1; inset-block: 13%; inset-inline-end: 7%; inline-size: 1px; background: rgb(255 255 255 / 45%); }
.wash-scene img { grid-column: 1 / -1; inline-size: 100%; block-size: min(45vw,585px); object-fit: contain; filter: drop-shadow(0 24px 30px rgb(0 0 0 / 28%)); }
.wash-scene figcaption { grid-column: 1; grid-row: 2; color: #a7c1d2; font-size: 13px; line-height: 1.5; }
.motion-toggle { grid-column: 2; grid-row: 2; display: none; align-items: center; gap: 6px; min-block-size: 44px; padding: 8px 10px; border: 1px solid var(--line-dark); border-radius: 2px; background: transparent; color: white; font-size: 13px; font-weight: 600; }
.wash-scene.is-motion-ready .motion-toggle { display: inline-flex; }
.motion-toggle:disabled { cursor: not-allowed; }
.scene-shape { display: none; }
.bubble { position: absolute; z-index: 2; inline-size: 25px; block-size: 25px; border: 1px solid rgb(255 255 255 / 85%); border-radius: 50%; background: rgb(148 211 255 / 28%); pointer-events: none; }
.bubble-one { inset-block-end: 35%; inset-inline-start: 40%; }
.bubble-two { inline-size: 15px; block-size: 15px; inset-block-end: 36%; inset-inline-end: 34%; }
.bubble-three { inline-size: 10px; block-size: 10px; inset-block-end: 41%; inset-inline-start: 51%; }
.hood-glint { position: absolute; z-index: 2; inline-size: 34px; block-size: 34px; inset-block-end: 40%; inset-inline-start: 53%; stroke: white; stroke-width: 1.25; opacity: .58; pointer-events: none; }
.wash-scene.is-motion-ready .bubble { animation: wash-lift 6s var(--ease-out) infinite; }
.wash-scene.is-motion-ready .bubble-two { animation-delay: .35s; }
.wash-scene.is-motion-ready .bubble-three { animation-delay: .7s; }
.wash-scene.is-motion-ready .hood-glint { animation: hood-glint 6s ease-in-out infinite; }
.wash-scene.is-paused .bubble,.wash-scene.is-dormant .bubble,.wash-scene.is-paused .hood-glint,.wash-scene.is-dormant .hood-glint { animation-play-state: paused; }
@keyframes wash-lift { 0%,9% { transform: translate3d(0,0,0) scale(.9); opacity: .18; } 25% { transform: translate3d(2px,-24px,0) scale(1); opacity: .94; } 42%,100% { transform: translate3d(4px,-45px,0) scale(1.1); opacity: 0; } }
@keyframes hood-glint { 0%,14% { transform: scale(.9) rotate(0); opacity: .42; } 25% { transform: scale(1.08) rotate(18deg); opacity: .95; } 37%,100% { transform: scale(1.3) rotate(32deg); opacity: .1; } }

.quick-truth { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0; color: white; border-block: 1px solid var(--line-dark); }
.quick-truth p { margin: 0; min-block-size: 76px; padding: 22px 0 22px 26px; color: #c7d6e1; font-size: 15px; }
.quick-truth p:not(:last-child) { border-inline-end: 1px solid var(--line-dark); }
.quick-truth p::before { content: ""; display: inline-block; inline-size: 7px; block-size: 7px; margin-inline-end: 10px; border-radius: 50%; background: var(--blue-strong); vertical-align: middle; }

.how-section { max-inline-size: none; inline-size: 100%; margin: 0; padding: clamp(82px,12vw,176px) max(32px,calc((100% - 1280px) / 2)); background: var(--paper); color: var(--copy-dark); }
.how-section .section-heading,.how-copy { inline-size: min(1280px,100%); margin-inline: auto; }
.section-heading h2,.demo-intro h2 { margin-block-end: 26px; font-size: clamp(40px,5.3vw,78px); font-weight: 750; }
.how-copy { display: grid; grid-template-columns: minmax(0,.68fr) minmax(0,1fr); gap: clamp(28px,8vw,140px); max-inline-size: 1280px; }
.how-copy p { margin: 0; color: var(--copy-muted); font-size: clamp(17px,1.45vw,21px); }
.how-copy p:first-child { color: var(--copy-dark); font-weight: 560; }

.booking-demo { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1fr); gap: clamp(36px,7vw,124px); align-items: start; inline-size: 100%; margin: 0; padding: clamp(72px,10vw,140px) max(32px,calc((100% - 1280px) / 2)); background: var(--blue); color: white; }
.demo-intro { padding-block-start: 8px; }
.demo-intro h2 { color: white; }
.demo-intro p { max-inline-size: 33ch; color: #d9edff; font-size: 18px; }
.flow-demo { min-inline-size: 0; border-block-start: 1px solid rgb(255 255 255 / 60%); }
.mode-switch { position: relative; isolation: isolate; display: grid; grid-template-columns: 1fr 1fr; padding: 0; border-block-end: 1px solid rgb(255 255 255 / 42%); }
.mode-switch::before { content: ""; position: absolute; z-index: 0; inset-block-end: -1px; inset-inline-start: 0; inline-size: 50%; block-size: 4px; background: white; transition: transform 180ms var(--ease-out); }
.mode-switch[data-selection="later"]::before { transform: translateX(100%); }
.mode-switch[data-selection="later"]:dir(rtl)::before { transform: translateX(-100%); }
.mode-switch.is-instant::before { transition: none; }
.mode-button { position: relative; z-index: 1; min-block-size: 58px; border: 0; background: transparent; color: white; font-weight: 700; }
.mode-button.is-active { color: white; }
.demo-state { margin-block: 24px 16px; }
.demo-kicker { margin-block-end: 12px; color: #e2f1ff; font-weight: 700; }
.price-steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.price-steps li { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 14px; padding-block: 18px; border-block-end: 1px solid rgb(255 255 255 / 32%); }
.price-steps li:last-child { border: 0; }
.price-steps bdi { display: grid; place-items: center; inline-size: 30px; block-size: 30px; border: 1px solid rgb(255 255 255 / 75%); border-radius: 50%; color: white; font-weight: 700; }
.price-steps strong,.price-steps small { display: block; }
.price-steps strong { font-size: 17px; line-height: 1.45; }
.price-steps small,.demo-foot,.demo-alternative { color: #d8edff; font-size: 15px; line-height: 1.6; }
.price-steps small { margin-block-start: 4px; }
.demo-foot { margin-block: 16px 0; }

.washer-section { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.95fr); gap: clamp(36px,7vw,120px); inline-size: 100%; margin: 0; padding: clamp(78px,11vw,160px) max(32px,calc((100% - 1280px) / 2)); background: var(--paper); color: var(--copy-dark); }
.washer-copy h2 { margin-block-end: 28px; font-size: clamp(40px,5vw,76px); font-weight: 750; }
.washer-copy p { max-inline-size: 43ch; color: var(--copy-muted); font-size: 18px; }
.washer-copy .button { margin-block-start: 12px; background: var(--ink); color: white; }
.washer-steps { border-block-start: 1px solid var(--line-light); }
.washer-steps article { padding-block: 25px; border-block-end: 1px solid var(--line-light); }
.washer-steps h3 { margin-block-end: 10px; font-size: clamp(21px,2vw,28px); }
.washer-steps p { margin: 0; color: var(--copy-muted); font-size: 16px; }

.faq-section { display: grid; grid-template-columns: minmax(0,.74fr) minmax(0,1.26fr); gap: clamp(38px,8vw,145px); inline-size: 100%; margin: 0; padding: clamp(82px,11vw,158px) max(32px,calc((100% - 1280px) / 2)); background: var(--ink-soft); color: white; }
.faq-section .section-heading h2 { margin: 0; }
.faq-list { border-block-start: 1px solid var(--line-dark); }
details { border-block-end: 1px solid var(--line-dark); }
summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-block-size: 74px; padding-block: 19px; cursor: pointer; font-weight: 650; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; display: grid; place-items: center; flex: none; inline-size: 28px; block-size: 28px; color: var(--blue-strong); font-size: 28px; font-weight: 400; }
details[open] summary::after { content: "−"; }
details p { margin-block: 0 24px; max-inline-size: 65ch; color: var(--copy-light); }

.beta-section { display: grid; grid-template-columns: minmax(0,.75fr) minmax(0,1.25fr); gap: clamp(36px,8vw,145px); align-items: start; inline-size: 100%; margin: 0; padding: clamp(80px,11vw,154px) max(32px,calc((100% - 1280px) / 2)); background: #082e54; color: white; }
.beta-section h2 { margin: 0; font-size: clamp(40px,5.1vw,76px); font-weight: 750; }
.beta-card { padding-block-start: 7px; border-block-start: 1px solid rgb(255 255 255 / 52%); }
.status-line { color: #8bc8fa; font-weight: 750; }
.status-line span { display: none; }
.beta-card .muted { color: #c2d6e7; font-size: 15px; }
.enquiry-paths { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; margin-block-start: 28px; }
.enquiry-paths article { padding-block-start: 22px; border-block-start: 1px solid rgb(255 255 255 / 28%); }
.enquiry-paths h3 { min-block-size: 48px; margin-block-end: 16px; font-size: 21px; }
.enquiry-paths .button { inline-size: 100%; }
.button:disabled { cursor: not-allowed; border-color: #c2d6e7; background: transparent; color: #c2d6e7; }

.info-section { display: grid; grid-template-columns: minmax(0,.75fr) minmax(0,1.25fr); gap: clamp(36px,8vw,145px); inline-size: 100%; margin: 0; padding: 68px max(32px,calc((100% - 1280px) / 2)); background: var(--paper-deep); color: var(--copy-dark); }
.info-section h2 { margin: 0; font-size: clamp(30px,3.5vw,48px); }
.info-section p { color: var(--copy-muted); font-size: 15px; }
.info-section p:last-child { margin-block-end: 0; }
.info-section strong { color: var(--copy-dark); }
.site-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 22px; padding-block: 30px; color: #b7c8d3; font-size: 14px; }
.site-footer p { margin: 0; }
.brand-footer img { inline-size: 38px; block-size: 38px; }
.brand-footer i { font-size: 21px; }

@media (hover:hover) and (pointer:fine) {
  .button:hover,.header-action:hover { transform: translateY(-2px); }
  .button-primary:hover { background: var(--blue-strong); }
  .button-outline:hover { background: white; color: var(--ink); border-color: white; }
  .header-action:hover { background: white; border-color: white; color: var(--ink); }
  .site-header nav a:hover,.site-footer a:hover { color: var(--blue-strong); }
}
@media (max-width:860px) {
  .site-header nav { display: none; }
  .hero { min-block-size: 0; grid-template-columns: 1fr; grid-template-areas: "copy" "scene" "actions"; gap: 26px; padding-block: 44px 64px; }
  .hero-copy { max-inline-size: none; }
  .hero h1 { font-size: clamp(48px,10vw,74px); }
  .wash-scene { inline-size: min(100%,580px); justify-self: center; }
  .wash-scene img { block-size: min(71vw,430px); }
  .quick-truth { grid-template-columns: 1fr; }
  .quick-truth p { min-block-size: 56px; padding: 15px 0; }
  .quick-truth p:not(:last-child) { border-inline-end: 0; border-block-end: 1px solid var(--line-dark); }
  .how-copy,.booking-demo,.washer-section,.faq-section,.beta-section,.info-section { grid-template-columns: 1fr; gap: 40px; }
  .how-copy { gap: 20px; }
  .enquiry-paths { max-inline-size: 590px; }
}
@media (max-width:540px) {
  .site-header,.hero,.quick-truth,.site-footer { inline-size: calc(100% - 32px); }
  .site-header { min-block-size: 72px; gap: 12px; }
  .brand img { inline-size: 38px; block-size: 38px; }
  .brand span { min-inline-size: 74px; }
  .brand i { font-size: 22px; }
  .header-action { max-inline-size: 51%; padding-inline: 12px; font-size: 12px; text-align: center; line-height: 1.3; }
  .hero { padding-block: 34px 50px; }
  .hero h1 { margin-block-end: 16px; font-size: clamp(43px,12.5vw,62px); }
  .hero-lead { font-size: 17px; }
  .wash-scene img { block-size: min(80vw,330px); }
  .wash-scene::before { inset-inline-start: 4%; }
  .wash-scene figcaption { font-size: 12px; }
  .motion-toggle { padding-inline: 8px; font-size: 12px; }
  .hero-actions { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .button { inline-size: 100%; min-block-size: 52px; }
  .availability-note { font-size: 13px; }
  .how-section,.booking-demo,.washer-section,.faq-section,.beta-section,.info-section { padding-inline: 24px; }
  .how-section { padding-block: 70px 80px; }
  .booking-demo,.washer-section,.faq-section,.beta-section { padding-block: 72px; }
  .info-section { padding-block: 54px; }
  .section-heading h2,.demo-intro h2,.washer-copy h2,.faq-section .section-heading h2,.beta-section h2 { font-size: clamp(38px,11vw,52px); }
  .how-copy p,.demo-intro p,.washer-copy p { font-size: 17px; }
  .enquiry-paths { grid-template-columns: 1fr; gap: 18px; }
  .enquiry-paths h3 { min-block-size: auto; }
  .site-footer p { order: 3; flex-basis: 100%; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { transition-duration: .01ms !important; }
  .bubble,.hood-glint { animation: none !important; }
  .mode-switch::before { transition: none; }
}