/* שי החשמלאי · "הנורה הכתומה": חושך, ואז אור. design.md הוא המקור. */
:root {
  --bg: #FFFFFF;
  --surface: #FFF5F1;
  --ink: #2F3030;
  --muted: #565757;
  --primary: #F05C38;
  --primary-ink: #1F2020;
  --brand-text: #C2401C;
  --soft: #F5D3C6;
  --accent: #EC552C;
  --line: #E6E1DE;
  --focus: #2F3030;
  --dark: #2B2C2C;
  --radius: 12px;
  --k-btn-radius: 10px;
  --font-head: "Secular One", system-ui, sans-serif;
  --font-body: "Arimo Variable", Arial, sans-serif;
  --gutter: 16px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 17px; line-height: 1.65; overflow-x: clip; }
main { overflow-x: clip; }
img, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--font-head); font-weight: 400; }
h1 { font-size: 40px; line-height: 1.1; }
h2 { font-size: 30px; line-height: 1.2; margin-bottom: 24px; }
h3 { font-size: 20px; line-height: 1.3; }
a { color: var(--brand-text); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.dark { background: var(--dark); color: #F2F2F2; }
.dark :focus-visible, .top :focus-visible, .dock :focus-visible { outline-color: var(--primary); }
.dark a:not(.k-btn) { color: #F2F2F2; }
.dark .k-btn--outline { --k-outline-ink: #F2F2F2; --k-outline-fill: rgb(255 255 255 / .1); --primary: #F2F2F2; }
.skip-link { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 100; background: var(--primary); color: var(--primary-ink); padding: 10px 16px; border-radius: 10px; }
.skip-link:focus { top: 12px; }
.demo-banner { min-height: 40px; display: flex; align-items: center; justify-content: center; padding: 8px var(--gutter); background: #1F2020; color: #F2F2F2; font-size: 14px; line-height: 1.4; text-align: center; }
.wrap { max-width: 1180px; margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Header ---------- */
.top { position: sticky; top: 0; z-index: 50; background: var(--dark); border-bottom: 1px solid #3A3B3B; }
.top__inner { max-width: 1180px; margin-inline: auto; padding: 6px var(--gutter); display: flex; align-items: center; gap: 16px; min-height: 64px; }
.brand { font-family: var(--font-head); font-size: 22px; color: #fff; text-decoration: none; min-height: 44px; display: flex; align-items: center; }
.top__nav { display: none; }
.top__call { margin-inline-start: auto; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: var(--primary-ink); }
.top__call svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Hero: the bulb ---------- */
.hero { min-height: 88svh; display: flex; align-items: center; padding-block: 24px 56px; }
.hero__grid { display: grid; gap: 8px; width: 100%; }
.hero__bulb { position: relative; justify-self: end; width: 150px; }
.glow {
  position: absolute; left: 50%; top: 45%; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgb(240 92 56 / .55), rgb(240 92 56 / .18) 45%, transparent 70%);
}
.bulb { position: relative; width: 100%; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.bulb__base { stroke: #8A8B8B; stroke-width: 12; }
.bulb__off { stroke: #6B6C6C; stroke-width: 14; }
.bulb__on { stroke: var(--primary); stroke-width: 14; }
.bulb__on circle { fill: var(--soft); fill-opacity: .35; stroke: none; }
.bulb__off path:last-child, .bulb__on path:last-child { stroke-width: 8; }
.hero__text { position: relative; z-index: 1; }
.eyebrow { font-size: 14px; font-weight: 700; color: #B9BABA; margin-bottom: 10px; }
.hero h1 { color: #F2F2F2; }
.hero__lead { margin-top: 14px; }
.hero__actions { display: flex; flex-direction: column; gap: 12px; margin-top: 26px; }
.hero__actions .k-btn { width: 100%; }
.wa-btn { --k-btn-face: #F05C38; --k-border-ink: #1F2020; --k-btn-bg: #F05C38; --k-btn-accent: #FFE3D8; }
.rating { margin-top: 14px; font-size: 15px; color: #B9BABA; }
.rating strong { color: #F2F2F2; }

/* ---------- Three domains: the logo line as tabs ---------- */
section:not(.hero) { padding-block: 56px; }
.tabs__list { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: 20px; }
.tab {
  position: relative; font: inherit; font-family: var(--font-head); font-size: 22px; line-height: 1.2; color: var(--muted);
  background: none; border: 0; padding: 8px 2px 10px; min-height: 44px; cursor: pointer;
}
.tab[aria-selected="true"] { color: var(--ink); }
.tab::after { content: ""; position: absolute; inset-inline: 0; bottom: 2px; height: 4px; border-radius: 2px; background: var(--primary); transform: scaleX(0); transform-origin: right; }
.tab[aria-selected="true"]::after { transform: none; }
.tabs__dot { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.tabs__dot::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; background: radial-gradient(closest-side, rgb(240 92 56 / .45), transparent); opacity: 0; }
.tabs__dot.is-lit { transform: scale(1.5); }
.tabs__dot.is-lit::after { opacity: 1; }
.panel { margin-bottom: 20px; }
.panel h3 { margin-bottom: 8px; }
.is-tabs .panel h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.panel ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; }
.panel li { padding: 12px 0; border-bottom: 1px solid var(--line); padding-inline-start: 22px; position: relative; }
.panel li::before { content: ""; position: absolute; right: 0; top: 21px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

/* ---------- Case files ---------- */
.cases { background: var(--surface); }
.cases__grid { display: grid; gap: 34px; }
.case { position: relative; background: var(--bg); border-radius: 0 var(--radius) var(--radius) var(--radius); padding: 24px 20px 20px; margin-top: 22px; box-shadow: 0 14px 30px -24px rgb(47 48 48 / .5); }
.case__tab { position: absolute; top: -22px; right: 0; width: 96px; height: 22px; border-radius: 8px 8px 0 0; background: var(--primary); color: var(--primary-ink); font-size: 14px; font-weight: 700; line-height: 22px; text-align: center; }
.case h3 { margin-bottom: 12px; }
.case blockquote { margin: 0; }
.case mark { background: var(--soft); color: var(--ink); font-weight: 700; padding: 0 2px; border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
blockquote footer { font-size: 15px; color: var(--muted); margin-top: 10px; }

/* ---------- Certified ---------- */
.certified__grid { display: grid; gap: 28px; align-items: center; }
.magnet { max-width: 340px; }
.magnet picture { display: block; transform: rotate(-2deg); background: #fff; padding: 10px; border-radius: 10px; box-shadow: 0 18px 36px -20px rgb(0 0 0 / .45); }

/* ---------- More ---------- */
.big-quote { margin: 0; padding: 26px 22px; background: var(--surface); border-radius: var(--radius); border-inline-start: 6px solid var(--primary); }
.big-quote p { font-size: 20px; line-height: 1.55; }
.small-quote { margin: 22px 0 0; padding-inline-start: 16px; border-inline-start: 2px solid var(--line); }
.more__rating { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; }
.k-link { min-height: 44px; display: inline-flex; align-items: center; }

/* ---------- End ---------- */
.end__inner { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.end__glow { position: absolute; top: -60px; right: -100px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(closest-side, rgb(240 92 56 / .45), transparent 70%); pointer-events: none; }
.end__bulb { position: relative; width: 64px; }
.end h2 { position: relative; margin: 0; color: #F2F2F2; }
.end__actions { position: relative; display: flex; flex-direction: column; gap: 12px; width: 100%; }

.foot { padding: 28px 0 24px; font-size: 15px; line-height: 1.5; border-top: 1px solid #3A3B3B; }
.foot__inner { display: grid; gap: 4px; }
.foot a { display: inline-block; min-height: 44px; padding-block: 11px; }
.dock { position: fixed; inset-inline: 0; bottom: 0; z-index: 60; display: flex; gap: 10px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--dark); transition: transform 300ms var(--k-ease), opacity 300ms var(--k-ease); }
.dock > * { flex: 1 1 0; }
.dock .k-btn--outline { --k-outline-ink: #F2F2F2; --primary: #F2F2F2; --k-outline-fill: rgb(255 255 255 / .1); }
.dock.is-hidden { transform: translateY(110%); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .dock { transition: none; } }
body { padding-bottom: 76px; }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* Exactly two flickers on a small area, under WCAG 2.3.1's three per second. */
  html.intro .bulb__on { animation: flicker 800ms linear 600ms both; }
  html.intro .glow { animation: glow-up 750ms var(--k-ease-out) 1150ms both; }
  .tab::after { transition: transform 240ms var(--k-ease); }
  .tabs__dot, .tabs__dot::after { transition: transform 240ms var(--k-ease), opacity 240ms var(--k-ease); }
  .panel.is-shown { animation: panel-in 240ms var(--k-ease) both; }
}
@keyframes flicker {
  0% { opacity: 0; }
  7.5% { opacity: 1; }
  18.75% { opacity: 0; }
  37.5% { opacity: 0; }
  45% { opacity: 1; }
  55% { opacity: .4; }
  68.75% { opacity: .4; }
  100% { opacity: 1; }
}
@keyframes glow-up { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes panel-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Subpages ---------- */
.subpage__main { max-width: 720px; margin-inline: auto; padding: 48px var(--gutter) 64px; }
.subpage__main h1 { margin-bottom: 18px; }
.subpage__main h2 { font-size: 24px; margin: 28px 0 10px; }
.subpage__main p, .subpage__main li { margin-bottom: 8px; }
.subpage__eyebrow { color: var(--brand-text); font-weight: 700; }
.subpage__back { display: inline-block; min-height: 44px; padding-block: 10px; font-weight: 700; }
body.subpage { padding-bottom: 0; }

/* ================= Desktop ================= */
@media (min-width: 1000px) {
  :root { --gutter: 24px; }
  body { font-size: 18px; }
  h1 { font-size: 64px; }
  h2 { font-size: 42px; margin-bottom: 32px; }
  h3 { font-size: 23px; }
  .top__inner { min-height: 72px; }
  .top__nav { display: flex; gap: 6px; margin-inline-start: auto; }
  .top__nav a { color: #F2F2F2; text-decoration: none; padding: 10px 14px; border-radius: 10px; }
  .top__nav a:hover { background: #3A3B3B; }
  .top__call { margin-inline-start: 8px; }
  .hero__grid { grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: center; }
  .hero__text { grid-column: 1 / span 6; grid-row: 1; }
  .hero__bulb { grid-column: 8 / span 5; grid-row: 1; justify-self: center; width: 340px; }
  .glow { width: 900px; height: 900px; margin: -450px 0 0 -450px; }
  .hero__actions { flex-direction: row; }
  .hero__actions .k-btn { width: auto; }
  section:not(.hero) { padding-block: 88px; }
  .tab { font-size: 44px; }
  .tabs__list { gap: 8px 20px; margin-bottom: 28px; }
  .panel ul { grid-template-columns: 1fr 1fr; column-gap: 40px; }
  .cases__grid { grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; }
  .certified__grid { grid-template-columns: 420px 1fr; gap: 56px; }
  .magnet { max-width: 420px; }
  .big-quote { padding: 36px; }
  .big-quote p { font-size: 26px; }
  .end__inner { align-items: flex-start; }
  .end__actions { flex-direction: row; width: auto; }
  .foot__inner { grid-template-columns: repeat(3, auto); justify-content: space-between; }
  .dock { display: none; }
  body { padding-bottom: 0; }
}