/* NIVO IT: its own brand (Alin, 2026-10-19, direction C "poster bands").
   Colours come from the IT character itself: its magenta and its near-black
   headphones, with an electric lime as the one call-to-action colour. Every IT page
   loads this; the four working pages also load styles.css, recoloured below.
   Motion: only the band panels and their sign (design/it-brand-2026-10-19/MOTION-SPEC.md). */

@font-face{font-family:Alexandria;src:url(/fonts/alexandria-lat.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0000-024F,U+2000-206F,U+20AC,U+2190-21FF}
@font-face{font-family:Alexandria;src:url(/fonts/alexandria-ar.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}

:root{
  --it-bg:#ffffff; --it-ink:#121014; --it-muted:#56505c; --it-line:#e4e0e8; --it-soft:#f5f1f7;
  --it-accent:#9c0aa5; --it-focus:#121014;
  --it-magenta:#c80fd2; --it-magenta-2:#a00bab;
  --it-graphite:#121014; --it-graphite-2:#1f1a25;
  --it-lime:#e9ff5c; --it-lime-2:#f3ffad;
  --it-ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:light;
}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){
  --it-bg:#0f0d12; --it-ink:#f4eff6; --it-muted:#b8afc1; --it-line:#2b2531; --it-soft:#1a161e;
  --it-accent:#f07cf4; --it-focus:#f07cf4; --it-graphite:#1b171f; --it-graphite-2:#241f2a; color-scheme:dark}}
:root[data-theme=dark]{
  --it-bg:#0f0d12; --it-ink:#f4eff6; --it-muted:#b8afc1; --it-line:#2b2531; --it-soft:#1a161e;
  --it-accent:#f07cf4; --it-focus:#f07cf4; --it-graphite:#1b171f; --it-graphite-2:#241f2a; color-scheme:dark}

/* The working pages reuse styles.css; these are its tokens in NIVO IT colours. */
body.it-site{--bg:var(--it-bg);--surface:var(--it-bg);--ink:var(--it-ink);--muted:var(--it-muted);--line:var(--it-line);--soft:var(--it-soft);--wash:var(--it-soft);
  --accent:var(--it-magenta);--accent-text:var(--it-accent);--button:var(--it-ink);--button-ink:var(--it-bg)}

*{box-sizing:border-box}
body.it-site{margin:0;background:var(--it-bg);color:var(--it-ink);font:400 16px/1.65 Alexandria,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
[lang=ar] body.it-site{line-height:1.85}
:where(.it-site) :where(h1,h2,h3,p){margin:0}
.it-site img{display:block;max-width:100%;height:auto}
.it-site :focus-visible{outline:3px solid var(--it-focus);outline-offset:3px}
.it-wrap{width:min(1180px,100% - 32px);margin-inline:auto}
.it-arrow{font-family:Arial,sans-serif;display:inline-block}
[dir=ltr] .it-arrow{transform:scaleX(-1)}
.it-skip{position:absolute;inset-inline-start:12px;top:-60px;z-index:40;padding:10px 14px;background:var(--it-ink);color:var(--it-bg)}
.it-skip:focus{top:10px}

/* ---- header ---- */
.it-top{position:sticky;top:0;z-index:30;background:var(--it-bg);border-bottom:1px solid var(--it-line)}
.it-top__in{display:flex;align-items:center;gap:20px;min-height:68px}
.it-logo{display:flex;align-items:center;gap:10px;color:var(--it-ink);text-decoration:none;font-weight:800;letter-spacing:.06em;direction:ltr;min-height:44px}
.it-logo img{width:38px}
.it-logo b{color:var(--it-accent)}
.it-top__nav{display:flex;gap:2px;margin-inline-start:8px}
.it-top__nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;font-size:14px;color:var(--it-muted);text-decoration:none;border-radius:8px}
.it-top__nav a:hover{color:var(--it-ink)}
.it-top__end{margin-inline-start:auto;display:flex;align-items:center;gap:8px}
.it-top__lang{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;font-size:14px;color:var(--it-ink);text-decoration:none}
.it-top__theme{display:inline-grid;place-items:center;width:44px;height:44px;border:1px solid var(--it-line);border-radius:50%;background:none;color:var(--it-ink);cursor:pointer}
.it-top__theme svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7}

/* ---- buttons and links ---- */
.it-btn{display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:0 24px;background:var(--it-ink);color:var(--it-bg);font-weight:700;text-decoration:none;border:0}
.it-btn--sm{min-height:44px;padding:0 16px;font-size:14px}
.it-btn--lime{background:var(--it-lime);color:#121014}
.it-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600;color:inherit;text-decoration:underline;text-underline-offset:5px}

/* ---- intro ---- */
.it-intro{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;gap:20px 48px;padding-block:44px 40px}
.it-eyebrow{font:600 13px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--it-accent);margin-bottom:14px}
[lang=ar] .it-eyebrow{font-family:Alexandria,sans-serif;letter-spacing:0;text-transform:none}
.it-intro h1{text-wrap:balance;font-size:clamp(34px,4.6vw,64px);line-height:1.06;letter-spacing:-.035em;font-weight:800;max-width:15ch}
.it-intro h1 span{display:block;margin-top:14px;font-size:.46em;font-weight:500;letter-spacing:-.01em;color:var(--it-muted);max-width:32ch}
[lang=ar] .it-intro h1{letter-spacing:0;line-height:1.35}
.it-lead{margin-top:18px;max-width:56ch;font-size:18px;color:var(--it-muted)}

/* ---- the bands ---- */
.it-band{--band:var(--it-magenta);--band-2:var(--it-magenta-2);--band-ink:#fff;--band-line:#ffffff40;scroll-margin-top:68px}
.it-band--systems{--band:var(--it-graphite);--band-2:var(--it-graphite-2);--band-ink:#f4eff6;--band-line:#ffffff26}
/* LC tools (2026-10-19): the lime band, the one NIVO IT colour reserved for what to act on. */
.it-band--lc{--band:var(--it-lime);--band-2:var(--it-lime-2);--band-ink:#121014;--band-line:#12101433;--tile:#ffffff99}
.it-band__head{position:relative;background:var(--band);color:var(--band-ink)}
:root[data-theme=dark] .it-band--systems .it-band__head{box-shadow:inset 0 1px 0 #ffffff1f,inset 0 -1px 0 #ffffff1f}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .it-band--systems .it-band__head{box-shadow:inset 0 1px 0 #ffffff1f,inset 0 -1px 0 #ffffff1f}}
.it-band__grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;align-items:center;gap:24px 40px;padding-block:40px}
.it-band__copy{display:flex;flex-direction:column;align-items:flex-start}
.it-state{display:inline-flex;align-items:center;min-height:26px;padding:0 10px;border:1px solid currentColor;border-radius:13px;font-size:12.5px;font-weight:600}
.it-band__title{margin-top:14px;font-size:clamp(36px,6.4vw,80px);line-height:1.02;letter-spacing:-.04em;font-weight:800}
[lang=ar] .it-band__title{letter-spacing:0;line-height:1.3}
.it-band__hook{margin-top:10px;font-size:19px;font-weight:600}
.it-band__text{margin-top:6px;max-width:44ch;font-size:15.5px}
.it-band__show{display:none}

/* The band's name becomes its button (it.js). Its ::after covers the whole band, so a
   tap anywhere on the band opens it; the visible sign says open or closed. */
.it-band__toggle{all:unset;display:inline-flex;align-items:center;gap:18px;cursor:pointer;font:inherit;color:inherit}
.it-band__toggle::after{content:"";position:absolute;inset:0;z-index:2}
.it-band__toggle:focus-visible{outline:none}
.it-band__head:has(.it-band__toggle:focus-visible){outline:3px solid var(--it-focus);outline-offset:-6px}
.it-band__sign{position:relative;flex:none;width:44px;height:44px;border:2px solid currentColor;border-radius:50%;transition:transform 200ms var(--it-ease)}
.it-band__sign::before,.it-band__sign::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:2px;margin:-1px 0 0 -8px;background:currentColor}
.it-band__sign::after{transform:rotate(90deg)}
[aria-expanded=true] .it-band__sign{transform:rotate(45deg)}
.it-js .it-band__show{display:inline-flex;margin-top:18px;font-weight:700;text-decoration:underline;text-underline-offset:6px}
.it-band__head:hover .it-band__title{text-decoration:underline;text-decoration-thickness:4px;text-underline-offset:10px}

/* The panel beneath: open without JS; with it.js, it slides (0fr -> 1fr). */
.it-band__panel{display:grid;grid-template-rows:1fr;background:var(--band-2);color:var(--band-ink)}
.it-band__inner{min-height:0;overflow:hidden}
.it-js .it-band__panel{transition:grid-template-rows 360ms var(--it-ease)}
.it-js .it-band__panel[data-open=false]{grid-template-rows:0fr;transition-duration:240ms}
.it-js .it-band__panel[data-open=false] .it-band__inner{visibility:hidden;transition:visibility 0s 240ms}
.it-band__body{padding-block:8px 36px}
/* Product tiles: each with its preview picture; the whole tile is the link. */
.it-tiles{list-style:none;margin:0;padding:8px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:16px}
.it-tile{position:relative;display:flex;flex-direction:column;gap:12px;padding:12px 12px 16px;background:var(--tile);border-radius:12px}
.it-tile :is(img,.it-art){display:block;width:100%;height:auto;border-radius:8px}
.it-tile__body{display:flex;flex-direction:column;gap:4px;flex:1;padding-inline:4px}
.it-tile h3{font-size:17px;line-height:1.35}
.it-tile p{font-size:14.5px}
.it-tile__price{font-weight:600;margin-top:4px}
.it-tile__go{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding-inline:4px;font-weight:700;color:inherit;text-decoration:underline;text-underline-offset:5px}
.it-tile__go::after{content:"";position:absolute;inset:0;border-radius:12px}
.it-tile:hover{box-shadow:inset 0 0 0 2px currentColor}
.it-tile:has(.it-tile__go:focus-visible){outline:3px solid var(--it-focus);outline-offset:3px}
.it-tile__go:focus-visible{outline:none}
.it-band{--tile:#ffffff1f}
.it-band--systems{--tile:#ffffff12}
.it-band__actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:24px}
.it-band__actions .it-btn{background:var(--band-ink);color:var(--band-2)}
.it-band__note{font-size:14px;max-width:60ch}

/* ---- drawn product pictures (decorative) ---- */
.it-mock{position:relative;justify-self:center}
/* Band header scenes (isometric, transparent): they fill the picture column. */
.it-mock--iso{display:block;width:100%;max-width:340px;height:auto;overflow:visible}

/* ---- why, how, proof, start ---- */
.it-why{padding-block:72px 40px}
.it-why h2,.it-how h2{font-size:clamp(28px,3.4vw,40px);letter-spacing:-.02em;margin-bottom:26px}
[lang=ar] .it-why h2,[lang=ar] .it-how h2{letter-spacing:0}
.it-why__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.it-why__list li{padding:22px 24px 26px 0;border-top:4px solid var(--it-ink)}
[dir=rtl] .it-why__list li{padding:22px 0 26px 24px}
.it-why__list h3{font-size:18px;line-height:1.35;margin-bottom:8px}
.it-why__list p{font-size:15px;color:var(--it-muted)}
.it-how{padding-block:40px 24px}
.it-how__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.it-how__list li{display:flex;flex-direction:column;gap:10px;padding-top:14px;border-top:2px solid var(--it-line);font-size:15px;font-weight:600}
.it-how__list li span{font:700 13px ui-monospace,Consolas,monospace;color:var(--it-accent)}
.it-how__list li:last-child{border-top-color:var(--it-magenta)}
/* "Ready to use", at the end of the Systems panel: the systems NIVO has built, each with
   a picture, what it does and a demo request (Alin, 2026-10-19). */
.it-ready{padding-top:16px}
/* "Built to order", after the ready-made systems: a heading for the tiles below. */
.it-made{margin-top:40px;padding-top:28px;border-top:1px solid var(--band-line)}
.it-made h3{font-size:clamp(22px,2.4vw,28px);letter-spacing:-.02em;line-height:1.2}
[lang=ar] .it-made h3{letter-spacing:0;line-height:1.4}
.it-made>p{margin:6px 0 8px}
.it-ready h3{font-size:clamp(26px,3vw,36px);letter-spacing:-.02em;line-height:1.15}
[lang=ar] .it-ready h3{letter-spacing:0;line-height:1.4}
.it-ready>p{margin:6px 0 20px}
.it-ready__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,460px),1fr));gap:20px}
.it-ready__item{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr;gap:18px;align-items:start;padding:16px 16px 20px;background:var(--tile);border-radius:14px}
.it-ready__item :is(img,.it-art){display:block;width:100%;height:auto;border-radius:10px}
.it-ready__shot{margin:0;display:flex;flex-direction:column;gap:6px}
.it-ready__shot :is(img,.it-art){box-shadow:0 14px 30px #0006}
.it-ready__shot figcaption{font-size:12.5px;opacity:.85}
.it-ready__body{display:flex;flex-direction:column;gap:8px;height:100%}
/* Cards in a row share a height: titles line up under the pictures, demo links on the bottom edge. */
.it-ready__go{margin-top:auto!important;align-self:flex-start}
.it-ready__body h4{font-size:20px;line-height:1.3}
.it-ready__body>p{font-size:14.5px}
.it-ready__facts{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:14px}
.it-ready__facts li{display:flex;gap:10px;align-items:baseline}
.it-ready__facts li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--it-lime);transform:translateY(-1px)}
.it-ready__go{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:4px;font-weight:700;color:inherit;text-decoration:underline;text-underline-offset:5px}
.it-ready__go::after{content:"";position:absolute;inset:0;border-radius:14px}
.it-ready__item:hover{box-shadow:inset 0 0 0 2px currentColor}
.it-ready__item:has(.it-ready__go:focus-visible){outline:3px solid var(--it-focus);outline-offset:3px}
.it-ready__go:focus-visible{outline:none}

/* "Our work", at the end of the Websites panel: a screenshot of each client site and a
   link to it (only sites whose client agreed). Colours follow the panel. */
.it-ourwork{margin-top:40px;padding-top:28px;border-top:1px solid var(--band-line)}
.it-ourwork h3{font-size:clamp(26px,3vw,36px);letter-spacing:-.02em;line-height:1.15}
[lang=ar] .it-ourwork h3{letter-spacing:0;line-height:1.4}
.it-ourwork>p{margin:6px 0 20px}
.it-ourwork .it-work img{border:0;border-radius:8px;box-shadow:0 14px 30px #0003}
.it-ourwork .it-work__go{color:inherit}
.it-ourwork .it-work a:hover .it-work__name{text-decoration:underline;text-underline-offset:5px}
.it-work{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:20px}
.it-work a{display:flex;flex-direction:column;gap:8px;color:inherit;text-decoration:none}
.it-work img{width:100%;height:auto;border:1px solid var(--it-line)}
.it-work__name{font-weight:700;font-size:17px}
.it-work__go{color:var(--it-accent);font-weight:600;text-decoration:underline;text-underline-offset:5px}
.it-start{padding-block:56px;background:var(--it-graphite);color:#f4eff6}
.it-start__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px}
.it-start h2{font-size:clamp(28px,3.4vw,40px)}
.it-start p{margin-top:8px;max-width:48ch}
.it-start__act{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}
.it-start .it-link{color:#f4eff6}
.it-start :focus-visible{outline-color:var(--it-lime)}

/* ---- footer ---- */
.it-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;padding-block:22px 36px;font-size:13px;color:var(--it-muted)}
.it-foot a{display:inline-flex;align-items:center;min-height:44px;color:inherit}
.it-foot span a{display:inline;text-decoration:underline;text-underline-offset:4px}
.it-builtby{gap:8px}
.it-builtby img{width:28px;height:28px;border-radius:50%;background:var(--it-soft);padding:2px}

/* ---- working pages (order, quote, orders, admin) in the NIVO IT style (2026-10-19) ----
   The forms come from styles.css; here they take the catalogue's look: a graphite page
   head, soft tiles instead of bordered boxes, square ink buttons, magenta for a choice. */
.it-site .it-app{gap:0}
.it-pagehead{background:var(--it-graphite);color:#f4eff6;padding-block:44px 40px}
.it-pagehead .it-eyebrow{color:var(--it-lime);margin-bottom:10px}
.it-pagehead h1{font-size:clamp(34px,5vw,56px);line-height:1.08;letter-spacing:-.03em;font-weight:800;margin:0}
[lang=ar] .it-pagehead h1{letter-spacing:0;line-height:1.35}
.it-site .it-app__body{width:min(1180px,100% - 32px);max-width:none;margin-inline:auto;padding-block:36px 64px;min-height:calc(100vh - 360px);display:flex;flex-direction:column;gap:28px}
.it-site .it-app [data-it-root]{gap:32px}
/* styles.css's dark theme sets card backgrounds with a stronger selector; these must win. */
.it-site .account-card{border:0;border-radius:14px;background:var(--it-soft)!important;animation:none}
.it-site .it-step>h2{font-size:22px;font-weight:800;letter-spacing:-.01em;color:var(--it-ink);text-transform:none}
[lang=ar] .it-site .it-step>h2{letter-spacing:0}
.it-site .it-group legend,.it-site .it-label{font-weight:700;color:var(--it-ink)}
.it-site .it-choice{border:0;border-radius:12px;background:var(--it-soft);box-shadow:inset 0 0 0 1px var(--it-line);padding:16px 18px}
.it-site .it-choice:hover{box-shadow:inset 0 0 0 1px var(--it-ink)}
.it-site .it-choice:has(input:checked){box-shadow:inset 0 0 0 2px var(--it-magenta);background:color-mix(in srgb,var(--it-magenta) 7%,var(--it-soft))}
.it-site .it-choice input{accent-color:var(--it-magenta)}
.it-site .it-app input[type=text],.it-site .it-app input[type=number],.it-site .it-app select,.it-site .it-app textarea{min-height:48px;border-radius:10px;border:1px solid var(--it-line);background:var(--it-bg);color:var(--it-ink)}
.it-site .it-app :is(input,select,textarea):focus-visible{outline:3px solid var(--it-magenta);outline-offset:1px}
.it-site .button.primary{border-radius:0;background:var(--it-ink);color:var(--it-bg);min-height:52px;font-weight:700}
.it-site .account-secondary{border-radius:0;border:2px solid var(--it-ink);font-weight:700;min-height:48px;padding-inline:18px}
.it-site .it-summary{border:0;border-radius:14px;background:var(--it-soft)!important}
.it-site .it-warning-card{background:var(--it-lime-2)!important;color:#121014!important;border:0;border-inline-start:6px solid #121014;border-radius:0}
.it-site .it-languages li{border-radius:0;border-color:var(--it-ink)}
.it-site .it-order-head .status{display:inline-flex;align-items:center;min-height:26px;padding:0 10px;border:1px solid currentColor;border-radius:13px;font-size:12.5px;font-weight:600}
.it-site .account-actions a{font-weight:600}

/* Phones: "Request a quote" stays in reach at the bottom of the screen (the header's button
   is hidden under 600px). Static: no motion. */
.it-sticky{display:none}
@media(max-width:600px){
  .it-sticky{display:flex;align-items:center;justify-content:space-between;gap:12px;position:fixed;inset-inline:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:25;min-height:52px;padding-inline:20px;background:var(--it-lime);color:#121014;font-weight:800;text-decoration:none;box-shadow:0 10px 30px #0005}
  body.it-site:has(.it-sticky){padding-bottom:84px}
}

/* Ready systems: drawing or screenshot, the same frame and caption, so cards line up. */
.it-ready__shot--drawn .it-art{aspect-ratio:16/10}

/* ---- narrow screens ---- */
@media(max-width:900px){
  .it-top__nav{display:none}
  .it-why__list{grid-template-columns:1fr 1fr}
  .it-how__list{grid-template-columns:1fr}
  .it-how__list li{flex-direction:row;align-items:baseline}
}
@media(max-width:760px){
  .it-band__grid{grid-template-columns:1fr;padding-block:32px}
  .it-mock{justify-self:start}
}
@media(max-width:600px){
  .it-top__end .it-btn--sm{display:none}
  .it-intro{padding-top:36px}
  .it-why__list{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .it-band__sign,.it-js .it-band__panel,.it-js .it-band__panel[data-open=false] .it-band__inner{transition:none!important}
}
/* Set up without motion: it.js closes the panels under .it-still, so nothing slides on load. */
.it-still .it-band__panel,.it-still .it-band__inner,.it-still .it-band__sign{transition:none!important}
/* "Show products" only while the band is closed; the sign says the rest. */
.it-band:has(.it-band__toggle[aria-expanded=true]) .it-band__show{display:none}

/* ==== Motion that does a job (Alin, 2026-10-20: "go all out"; research, strategy and every
   spec in design/it-brand-2026-10-19/UX-MOTION-STRATEGY-2026-10-20.md). Transforms and
   opacity only. Every moving part rests in its final state, so with reduced motion, an old
   browser or no script, the page is complete and still. it.js decides when anything plays. */
:root{--it-ease-in:cubic-bezier(.4,0,1,1)}

/* M3: each product picture acts out its work. A part plays from a start state into the
   still picture (fill: backwards); --d is its delay, --t its duration (it-previews.py). */
.it-art .k{transform-box:fill-box;transform-origin:50% 50%}
.it-art .k-wipe{transform-origin:0 50%}
.it-art .k-wipe-r{transform-origin:100% 50%}
.it-art .k-grow{transform-origin:50% 100%}
.it-art .k-draw{stroke-dasharray:1}
.it-art.is-playing .k{animation:k-fade var(--t,280ms) var(--it-ease) var(--d,0ms) backwards}
.it-art.is-playing .k-rise{animation-name:k-rise}
.it-art.is-playing .k-move{animation-name:k-move}
.it-art.is-playing :is(.k-wipe,.k-wipe-r){animation-name:k-wipe}
.it-art.is-playing .k-grow{animation-name:k-grow}
.it-art.is-playing .k-draw{animation-name:k-draw}
.it-art.is-playing .k-lift{animation-name:k-lift}
.it-art.is-playing .k-press{animation-name:k-press}
/* Things that land use a spring (stiffness 500, damping 30: 6% overshoot, settled in 434 ms),
   sampled into linear(); browsers without linear() keep the ease above. */
.it-art.is-playing :is(.k-pop,.k-stamp,.k-turn){animation-duration:var(--t,440ms)}
.it-art.is-playing .k-pop{animation-name:k-pop}
.it-art.is-playing .k-stamp{animation-name:k-stamp}
.it-art.is-playing .k-turn{animation-name:k-turn}
.it-art.is-playing :is(.k-pop,.k-stamp,.k-turn){animation-timing-function:linear(0, 0.026, 0.094, 0.188, 0.297, 0.41, 0.522, 0.626, 0.72, 0.802, 0.871, 0.928, 0.972, 1.005, 1.029, 1.045, 1.054, 1.058, 1.058, 1.055, 1.05, 1.044, 1.037, 1.031, 1.025, 1.019, 1.014, 1.009, 1.006, 1.003, 1.001, 0.999, 0.998, 0.997, 0.997, 0.997, 0.997, 0.997, 0.997, 0.998, 1)}
@keyframes k-fade{from{opacity:0}}
@keyframes k-rise{from{opacity:0;transform:translateY(10px)}}
@keyframes k-move{from{opacity:0;transform:translate(var(--x,0px),var(--y,0px))}}
@keyframes k-wipe{from{transform:scaleX(0)}}
@keyframes k-grow{from{transform:scaleY(0)}}
@keyframes k-draw{from{stroke-dashoffset:1}}
@keyframes k-lift{0%,100%{transform:none}45%{transform:translateY(-8px)}}
@keyframes k-press{0%,100%{transform:none}45%{transform:scale(.84)}}
@keyframes k-pop{from{opacity:0;transform:scale(.4)}}
@keyframes k-stamp{from{opacity:0;transform:scale(1.8) rotate(-14deg)}}
@keyframes k-turn{from{transform:rotate(-45deg)}}

/* M4: when a band opens, its products arrive in reading order (inside the panel's slide). */
.it-band__panel.it-arrive :is(.it-tiles,.it-ready__list)>li{animation:k-rise 240ms var(--it-ease) calc(60ms + 40ms * min(var(--i,0), 5)) backwards}

/* M5: "See the options" says the band opens downward: on a closed band its arrow dips on
   hover or keyboard focus. (While a band is open the link is hidden; the × sign says so.) */
.it-band__down{display:inline-block;margin-inline-start:8px;transition:transform 120ms var(--it-ease-in)}
.it-band:not(:has([aria-expanded=true])) .it-band__head:is(:hover,:has(.it-band__toggle:focus-visible)) .it-band__down{transform:translateY(3px);transition:transform 160ms var(--it-ease)}

/* M8: on phones the quote bar waits until the customer has shown interest (it.js), then
   rises once. Without the script it is simply there. */
@media(max-width:600px){
  .it-sticky{transition:transform 280ms var(--it-ease),visibility 0s}
  .it-sticky.it-sticky--wait{transform:translateY(calc(100% + 24px));visibility:hidden;transition:transform 280ms var(--it-ease),visibility 0s 280ms}
}

@media(prefers-reduced-motion:reduce){
  .it-art .k,.it-band__panel.it-arrive li{animation:none!important}
  .it-band__down,.it-sticky{transition:none!important}
  .it-band:not(:has([aria-expanded=true])) .it-band__head:is(:hover,:has(.it-band__toggle:focus-visible)) .it-band__down{transform:none}
}

/* M6: Scan repair before/after. Before on the left, after on the right of the line; --pos is
   where the line is. The images and the line never animate except the one-time hint. */
@property --pos{syntax:'<percentage>';inherits:true;initial-value:50%}
.it-compare{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);align-items:center;gap:16px 32px;margin-top:28px;padding:20px;border-radius:14px;background:var(--tile)}
.it-compare h3{font-size:22px;line-height:1.3;font-weight:800}
.it-compare__text p{margin-top:8px;font-size:15px}
.it-compare__frame{--pos:50%;position:relative;aspect-ratio:1200/750;border-radius:10px;overflow:hidden;box-shadow:0 14px 30px #0003;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.it-compare__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;pointer-events:none}
.it-compare__after{clip-path:inset(0 0 0 var(--pos))}
.it-compare__line{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px #0003}
.it-compare__line::after{content:"↔";position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;display:grid;place-items:center;border-radius:50%;background:#fff;color:#121014;font-weight:800;box-shadow:0 4px 14px #0004}
.it-compare__tag{position:absolute;top:10px;padding:3px 10px;border-radius:12px;background:#121014d9;color:#fff;font-size:12.5px;font-weight:700}
.it-compare__tag--before{left:10px}.it-compare__tag--after{right:10px}
/* The range input is the slider for the keyboard and screen readers; pointer dragging is on
   the frame (it.js), so a phone can still scroll the page across the picture. */
.it-compare__range{position:absolute;left:0;bottom:0;width:100%;height:1px;margin:0;opacity:0;pointer-events:none;display:none}
.it-js .it-compare__range{display:block}
.it-js .it-compare__frame{cursor:ew-resize}
.it-compare__frame:has(.it-compare__range:focus-visible){outline:3px solid var(--it-focus);outline-offset:3px}
.it-compare__note{grid-column:1/-1;font-size:13px}
@media(max-width:820px){.it-compare{grid-template-columns:minmax(0,1fr)}}

/* M7: the quote request takes shape beside the form (it-app.js). On wide screens it stays in
   view beside the form; on phones it sits just above the send button. */
:root{--it-ok:#12733f}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--it-ok:#4ade80}}
:root[data-theme=dark]{--it-ok:#4ade80}
.it-quote{display:grid;grid-template-columns:minmax(0,1fr);gap:28px 40px;align-items:start}
@media(min-width:900px){
  .it-quote{grid-template-columns:minmax(0,1fr) minmax(260px,340px)}
  .it-quote>*{grid-column:1}
  .it-quote>.it-request{grid-column:2;grid-row:1 / span 7;position:sticky;top:96px}
}
.it-site .account-card.it-request{display:flex;flex-direction:column;gap:12px;border-inline-start:4px solid var(--it-magenta);border-radius:0 14px 14px 0}
[dir=rtl] .it-site .account-card.it-request,.it-site[dir=rtl] .account-card.it-request{border-radius:14px 0 0 14px}
.it-site .it-request h2{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:18px;font-weight:800;color:var(--it-ink)}
.it-quote>.button{justify-self:start}
.it-request__chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.it-request__chips:empty{display:none}
.it-request__chip{padding:6px 12px;border-radius:999px;background:var(--it-ink);color:var(--it-bg);font-size:13.5px;font-weight:600}
.it-request__chip.is-new{animation:k-chip 440ms var(--it-ease) backwards;animation-timing-function:linear(0, 0.026, 0.094, 0.188, 0.297, 0.41, 0.522, 0.626, 0.72, 0.802, 0.871, 0.928, 0.972, 1.005, 1.029, 1.045, 1.054, 1.058, 1.058, 1.055, 1.05, 1.044, 1.037, 1.031, 1.025, 1.019, 1.014, 1.009, 1.006, 1.003, 1.001, 0.999, 0.998, 0.997, 0.997, 0.997, 0.997, 0.997, 0.997, 0.998, 1)}
@keyframes k-chip{from{opacity:0;transform:scale(.8)}}
.it-request__text{font-size:14.5px;white-space:pre-line;overflow-wrap:anywhere}
.it-request__text.is-empty{color:var(--it-muted)}
.it-request__free{font-size:13px}
.it-site .account-card.it-request.is-sent{border-inline-start-color:var(--it-ok)}
.it-request__sent{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:var(--it-ok)}
.it-request__sent svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.it-request__sent path{stroke-dasharray:1;animation:k-draw 320ms var(--it-ease) 120ms backwards}
.it-quote--sent .it-request{opacity:.95}
@media(prefers-reduced-motion:reduce){.it-request__chip.is-new,.it-request__sent path{animation:none}}

/* Product pictures, style "Clear flat" (2026-10-20): their palette, as variables
   (tools/write-it.py turns each picture's colours into these). Change the palette here. */
.it-art{--art-m:var(--it-magenta);--art-m2:#f3d9f6;--art-g:#121014;--art-g2:#2b2531;--art-ink:#5b5462;--art-l:#e9ff5c;--art-w:#fff;--art-s:#efe9f3;--art-d:#d6cde0;--art-xl:#1f7a45;--art-faint:#c4bccb;--art-sr:#ddd5e4;--art-sl:#c7bcd1;--art-gl:#1b171f;--art-mr:#a00bab;--art-ml:#82098b;--art-m2r:#e3c2e8;--art-m2l:#d2a8d8}
.it-art-defs{position:absolute;width:0;height:0;overflow:hidden}
/* A reminder bell rings once, from its top. */
.it-art .k-ring{transform-origin:50% 0}
.it-art.is-playing .k-ring{animation-name:k-ring;animation-duration:var(--t,520ms)}
@keyframes k-ring{0%,100%{transform:none}20%{transform:rotate(14deg)}45%{transform:rotate(-11deg)}65%{transform:rotate(6deg)}85%{transform:rotate(-3deg)}}
/* The real screen behind a ready system's picture: above the card's own link. */
/* The caption is translucent, which makes it its own layer: lift the whole caption above the card link. */
.it-ready__shot figcaption{position:relative;z-index:1}
.it-ready__real{margin-inline-start:6px;color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ---- The introduction (Alin, 2026-10-20: "update the header") ----
   Words on one side, one desk with everything NIVO IT makes on the other (isometric scene;
   plays when the pointer reaches it, never on load). Under the words: the three categories
   as chips in their band colours, the main action, and three real policies. */
.it-intro__copy{min-width:0}
.it-intro__art{min-width:0}
.it-hero-art{display:block;width:100%;max-width:560px;height:auto;margin-inline:auto;overflow:visible}
.it-jump{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.it-jump a{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px 0 14px;border-radius:999px;background:var(--it-soft);color:var(--it-ink);font-size:15px;font-weight:700;text-decoration:none;box-shadow:inset 0 0 0 1px var(--it-line)}
.it-jump a:hover{box-shadow:inset 0 0 0 2px var(--it-ink)}
.it-dot{flex:none;width:12px;height:12px;border-radius:50%;background:var(--dot);box-shadow:0 0 0 1.5px var(--it-line)}
.it-cat-websites{--dot:var(--it-magenta)}.it-cat-systems{--dot:var(--it-graphite)}.it-cat-lc{--dot:var(--it-lime)}
:root[data-theme=dark] .it-cat-systems{--dot:#f4eff6}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .it-cat-systems{--dot:#f4eff6}}
.it-intro__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.it-trust{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px;font-size:14px;color:var(--it-muted)}
.it-trust li{display:inline-flex;align-items:center;gap:8px}
.it-trust svg{flex:none;color:var(--it-ink)}
/* The top bar's links carry the same dot. */
.it-top__nav a::before{content:"";flex:none;width:8px;height:8px;margin-inline-end:8px;border-radius:50%;background:var(--dot);box-shadow:0 0 0 1px var(--it-line)}
@media(max-width:900px){
  .it-intro{grid-template-columns:minmax(0,1fr)}
  .it-hero-art{max-width:440px}
}
@media(max-width:600px){
  .it-intro__actions .it-btn{width:100%;justify-content:space-between}
}