/* ============================================================
   index.html only — linked after host.css from the home page.
   Why each block exists: docs/design-review/index.md.
   1. Product card with two prices (.prod-price.duo)
   2. Hero: three prices under the buttons (.hprice); the floating
      e-mail card kept clear of the rack caption on phones
   3. Products: lead, the maintenance line, the price note
   4. How it works: steps readable while dimmed
   5. NBT X on a white sheet: list, smoked number card, the
      self-drawing "four services → one number" diagram (.nbtx-flow)
   6. Included rail: a CSS specimen in each card (.srv-vis > .sv-*)
   7. Reduced motion
   Everything else on the page comes from style.css + host.css.
   ============================================================ */

/* ---------- 1. "Îți facem noi site-ul": two starting prices, numbers in one column
   de la | 200 € | site de prezentare
   de la | 300 € | magazin online ---------- */
.prod-price.duo{display:grid;grid-template-columns:auto auto 1fr;align-items:baseline;gap:10px 8px}
.prod-price.duo>span{display:contents}

/* ---------- 2. HERO ---------- */
/* the headline says "Site, domeniu, găzduire" — the row under the buttons prices
   the three, in that order, each a link to its page */
.hprice{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;
  margin-top:30px;padding-top:22px;border-top:1px solid var(--w05)}
.hprice a{display:grid;align-content:start;gap:9px;padding:2px clamp(18px,2.2vw,34px);
  border-left:1px solid var(--w08);transition:transform var(--t2) var(--e)}
.hprice a:first-child{padding-left:0;border-left:0}
.hprice .l{font-family:var(--fd);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--w56);transition:color var(--t1) var(--e)}
.hprice .v{display:flex;align-items:baseline;gap:6px;white-space:nowrap}
.hprice b{font-family:var(--fd);font-weight:400;font-size:clamp(1.45rem,2vw,1.85rem);line-height:1;
  letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums}
.hprice small{font-size:12px;color:var(--w56)}
/* the hosting price keeps its condition right under it (docs/preturi-multi-an.md: "de la 3,75 €"
   always stands by "la plata pe 36 de luni") */
.hprice .c{margin-top:-2px;font-size:11.5px;line-height:1.3;color:var(--w56);white-space:nowrap}
.hprice a:hover{transform:translateY(-2px)}
.hprice a:hover .l{color:#fff}
@media (max-width:560px){
  /* a phone reads them as a short price list; the condition wraps under the price, flush right */
  .hprice{grid-template-columns:1fr;margin-top:26px;padding-top:4px}
  .hprice a{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 16px;
    padding:14px 0;border-left:0;border-bottom:1px solid var(--w05)}
  .hprice a:last-child{border-bottom:0}
  .hprice .c{flex-basis:100%;margin-top:0;text-align:right}
}
/* phones: the "@ Email pe domeniu" card hung over the rack caption (text on text) */
@media (max-width:760px){.hero .stcard.b{bottom:-84px}}
/* one column (<=980px): a grid item's min-width:auto let the rack's nowrap rows widen the
   hero's column to 313px at a 320px screen, and .hero's overflow:clip cut the right edge
   of the lead and of the prices. Same fix host.css §12a gives .phero. */
@media (max-width:980px){
  .hero,.hero-grid{grid-template-columns:minmax(0,1fr)}
  .hero-grid>*{min-width:0}
}

/* ---------- 3. PRODUCTS ---------- */
.prods .shead .lead{max-width:54ch}
/* the outlined half of the heading gets its own line, so "la o" never hangs at the end of the first */
.prods .shead h2 em.o{display:block}
.prod-more>span{max-width:60ch}
.prod-note a{color:var(--w72);text-decoration:underline;text-underline-offset:3px;
  transition:color var(--t1) var(--e)}
.prod-note a:hover{color:var(--ink)}
@media (max-width:560px){.prod-more{flex-direction:column;gap:14px}}
/* one price line per grid row: every price block reserves the "la plata pe 36 de luni" line, so the grey
   rule above the price sits at the same height across a row, also next to a card without that line
   (Bulk, Domenii) or with a text price (Email). 43px = 20px padding + 1px rule + 4px gap + the 18px line;
   the clamp is the size of .prod-price b (host.css). Only with several columns: a phone stacks the cards */
@media (min-width:641px){#produse .prod:not(.wide) .prod-price{min-height:calc(43px + clamp(1.8rem,2.6vw,2.4rem))}}

/* ---------- 4. HOW IT WORKS ----------
   style.css dims the steps you are not reading to --w30 (2.5:1). Dimmed stays
   readable (--w56, 4.5:1+); the step you read goes up a level, with its rule
   and icon, so the highlight still reads. */
.plat .pfeat p{color:var(--w56)}
.plat .pfeat.on p{color:var(--w72)}
.plat-cap{margin-top:14px;text-align:center}

/* ---------- 5. NBT X — a white sheet between the two black scroll scenes ---------- */
.why.inv .why-item p{color:var(--w56)}
.why.inv .why-item:hover::before{background:var(--ink)}
/* the smoked card on the sheet: white LEDs need their glow back (.inv sets --glow:none) */
.why.inv .nbtx-card{--glow:0 0 0 1px rgb(255 255 255/.18),0 0 14px 2px rgb(255 255 255/.35)}
.nbtx-card .nbtx-tel{margin-top:6px}
.nbtx-card .nbtx-acts{margin-top:26px}
/* .why has no .shead, so its eyebrow, title and lead sat on top of each other */
.why .eyebrow{margin-bottom:24px}
.why h2{margin-bottom:24px}
/* the outlined half starts its own line. It used to read "Îl ținem tot noi.": with the 1.03 leading the
   circumflex of its Î met the comma of the "Ț" right above it (1440, 1100, 375 px), so it now opens with a
   letter without a mark ("Rămâne tot la noi."). Keep the second line's first letter free of Î / Â / Ș / Ț */
.why h2 em.o{display:block}

/* four services → one number: the lines draw in when the card arrives */
.nbtx-flow{margin:26px 0 4px}
.nbtx-flow ul{display:grid;grid-template-columns:repeat(4,1fr)}
.nbtx-flow li{position:relative;display:grid;justify-items:center;gap:9px;padding-bottom:20px;
  font-size:12px;letter-spacing:.01em;color:var(--w72)}
.nbtx-flow li i{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  border:1px solid var(--w12);background:rgb(255 255 255/.04);color:#fff;
  box-shadow:inset 0 1px 0 rgb(255 255 255/.12),0 10px 22px -14px #000}
.nbtx-flow li svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round}
.nbtx-flow li::after{content:"";position:absolute;left:50%;bottom:0;width:1px;height:12px;
  background:var(--w30);transform:scaleY(0);transform-origin:top;
  transition:transform .45s var(--e) calc(.45s + var(--k,0) * .07s)}
.nbtx-flow li:nth-child(2){--k:1}
.nbtx-flow li:nth-child(3){--k:2}
.nbtx-flow li:nth-child(4){--k:3}
.nf-bus{position:relative;height:34px}
.nf-bus::before{content:"";position:absolute;left:12.5%;right:12.5%;top:0;height:1px;background:var(--w30);
  transform:scaleX(0);transition:transform .7s var(--e) .8s}
.nf-bus::after{content:"";position:absolute;left:50%;top:0;width:1px;height:22px;background:var(--w30);
  transform:scaleY(0);transform-origin:top;transition:transform .45s var(--e) 1.35s}
.nf-bus .led{position:absolute;left:50%;top:24px;margin-left:-3.5px;opacity:0;
  transition:opacity .5s var(--e) 1.7s}
.nbtx-card.in .nbtx-flow li::after,.nbtx-card.in .nf-bus::before,.nbtx-card.in .nf-bus::after{transform:none}
.nbtx-card.in .nf-bus .led{opacity:1}
@media (max-width:420px){
  .nbtx-flow li{font-size:11px}
  .nbtx-flow li i{width:40px;height:40px;border-radius:12px}
}

/* ---------- 6. INCLUDED RAIL — what each card is, drawn in its empty top ----------
   The pinned rail's cards are tall and kept their text at the bottom, leaving a
   flat black pane above it. .srv-vis takes that space (flex:1) and centres a small
   monochrome specimen. Decorative (aria-hidden). Animations run only once the card
   has revealed, and stop under reduced motion (§7). */
.svc .srv-top{margin-bottom:0}
.srv-vis{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;padding:24px 0 6px;overflow:hidden;pointer-events:none}
.svc .srv-vis+h3{margin-top:clamp(14px,1.6vw,24px)}
.svc .srv-cta .acts{margin-top:2px}
.srv li a{color:var(--w72);text-decoration:underline;text-underline-offset:3px;transition:color var(--t1) var(--e)}
.srv li a:hover{color:#fff}
/* contact: the side note's text at --w56 (style.css gives it --w42, 4:1 on the black ground); its link
   is its point, so it is underlined like the answers' links */
.ct-side-note{color:var(--w56)}
.ct-side-note a{text-decoration:underline;text-underline-offset:3px}

/* 01 cPanel — a panel of tools, one lit at a time */
.sv-cp{width:min(236px,100%);border-radius:16px;border:1px solid var(--w12);
  background:linear-gradient(180deg,rgb(255 255 255/.06),rgb(255 255 255/.012));
  box-shadow:inset 0 1px 0 rgb(255 255 255/.1),0 22px 40px -26px #000}
.sv-cp-bar{display:flex;gap:5px;padding:10px 12px;border-bottom:1px solid var(--w08)}
.sv-cp-bar i{width:6px;height:6px;border-radius:50%;background:var(--w18)}
.sv-cp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:12px}
.sv-cp-grid b{position:relative;height:40px;border-radius:10px;border:1px solid var(--w08);
  background:rgb(255 255 255/.025);animation:sv-tile 7.2s var(--e-soft) infinite}
.sv-cp-grid b::before{content:"";position:absolute;left:9px;top:9px;width:11px;height:11px;border-radius:4px;
  border:1px solid var(--w30)}
.sv-cp-grid b::after{content:"";position:absolute;left:9px;right:14px;bottom:9px;height:2px;border-radius:2px;
  background:var(--w12)}
.sv-cp-grid b:nth-child(2){animation-delay:1.2s}
.sv-cp-grid b:nth-child(3){animation-delay:2.4s}
.sv-cp-grid b:nth-child(4){animation-delay:3.6s}
.sv-cp-grid b:nth-child(5){animation-delay:4.8s}
.sv-cp-grid b:nth-child(6){animation-delay:6s}
@keyframes sv-tile{0%,12%{border-color:rgb(255 255 255/.42);background:rgb(255 255 255/.085)}
  24%,100%{border-color:var(--w08);background:rgb(255 255 255/.025)}}

/* 02 SSL — the address bar with the lock, a light passing over it */
.sv-url{position:relative;display:flex;align-items:center;gap:10px;width:min(246px,100%);padding:13px 18px;
  border-radius:var(--r-pill);border:1px solid var(--w12);background:rgb(255 255 255/.045);
  box-shadow:inset 0 1px 0 rgb(255 255 255/.1),0 22px 40px -26px #000;
  font-family:var(--fm);font-size:12.5px;color:#fff;white-space:nowrap;overflow:hidden}
.sv-url svg{width:15px;height:15px;flex:none;fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sv-url em{font-style:normal;color:var(--w56)}
.sv-url::after{content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 35%,rgb(255 255 255/.16) 50%,transparent 65%);
  transform:translateX(-100%);animation:sv-sweep 4.8s var(--e-soft) infinite}
@keyframes sv-sweep{0%{transform:translateX(-100%)}45%,100%{transform:translateX(100%)}}
.sv-ok{display:inline-flex;align-items:center;gap:9px;font-family:var(--fd);font-size:9.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--w72)}
.sv-ok .led{width:6px;height:6px}
.sv-ok .led::after{display:none}

/* 03 E-mail — an envelope and the address on it */
.sv-mail{width:112px;height:78px;animation:sv-float 6s var(--e-soft) infinite alternate}
.sv-mail svg{display:block;width:100%;height:100%;fill:rgb(255 255 255/.035);stroke:var(--w56);stroke-width:1.2;
  stroke-linejoin:round;stroke-linecap:round}
.sv-mail svg *{vector-effect:non-scaling-stroke}
@keyframes sv-float{from{transform:translate3d(0,4px,0)}to{transform:translate3d(0,-5px,0)}}
.sv-to{padding:7px 14px;border-radius:var(--r-pill);border:1px solid var(--w18);background:rgb(255 255 255/.06);
  font-family:var(--fm);font-size:11.5px;color:#fff;white-space:nowrap}

/* 04 PHP — the version switch, the same recessed track as Lunar / Anual */
.sv-php{position:relative;display:grid;grid-template-columns:1fr 1fr;width:min(224px,100%);padding:5px;
  border-radius:var(--r-pill);border:1px solid var(--w08);background:rgb(255 255 255/.04);
  box-shadow:inset 0 1px 3px rgb(0 0 0/.45),inset 0 -1px 0 rgb(255 255 255/.06)}
.sv-php span{position:relative;z-index:2;padding:11px 0;text-align:center;font-family:var(--fd);font-size:10.5px;
  letter-spacing:.16em;color:var(--w72);animation:sv-php-a 6s var(--e) infinite}
.sv-php span+span{animation-name:sv-php-b}
.sv-php i{position:absolute;z-index:1;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);border-radius:var(--r-pill);
  background:#fff;box-shadow:inset 0 1px 0 rgb(255 255 255/.9),inset 0 -2px 5px rgb(0 0 0/.14),0 6px 16px -8px rgb(0 0 0/.6);
  animation:sv-php-t 6s var(--e) infinite}
@keyframes sv-php-t{0%,42%{transform:translateX(0)}50%,92%{transform:translateX(100%)}100%{transform:translateX(0)}}
@keyframes sv-php-a{0%,42%{color:#000}50%,92%{color:rgb(255 255 255/.72)}100%{color:#000}}
@keyframes sv-php-b{0%,42%{color:rgb(255 255 255/.72)}50%,92%{color:#000}100%{color:rgb(255 255 255/.72)}}

/* 05 Backup — seven days of copies, today's being written */
.sv-bk{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;width:min(232px,100%)}
.sv-bk span{display:grid;justify-items:center;gap:9px;font-family:var(--fd);font-size:9.5px;letter-spacing:.08em;color:var(--w56)}
.sv-bk b{position:relative;width:100%;height:48px;border-radius:8px;border:1px solid var(--w12);
  background:rgb(255 255 255/var(--a,.04));overflow:hidden}
.sv-bk span:nth-child(1) b{--a:.03}
.sv-bk span:nth-child(2) b{--a:.045}
.sv-bk span:nth-child(3) b{--a:.06}
.sv-bk span:nth-child(4) b{--a:.075}
.sv-bk span:nth-child(5) b{--a:.09}
.sv-bk span:nth-child(6) b{--a:.11}
.sv-bk span:last-child{color:#fff}
.sv-bk span:last-child b{border-color:rgb(255 255 255/.5);box-shadow:0 0 18px -4px rgb(255 255 255/.35)}
.sv-bk span:last-child b::after{content:"";position:absolute;inset:0;transform-origin:bottom;
  background:linear-gradient(0deg,rgb(255 255 255/.55),rgb(255 255 255/.1));animation:sv-fill 3.8s var(--e) infinite}
@keyframes sv-fill{0%{transform:scaleY(0);opacity:1}58%{transform:scaleY(1);opacity:1}86%{opacity:1}100%{transform:scaleY(1);opacity:0}}

/* 06 Servers in the EU — the ring of twelve stars, in white */
.sv-eu{position:relative;width:124px;height:124px;display:grid;place-items:center}
.sv-eu i{position:absolute;left:50%;top:50%;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;background:#fff;
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  transform:rotate(var(--r,0deg)) translateY(-52px) rotate(calc(var(--r,0deg) * -1));
  opacity:.4;animation:sv-star 4.8s var(--e-soft) infinite}
.sv-eu i:nth-child(2){--r:30deg;animation-delay:.4s}
.sv-eu i:nth-child(3){--r:60deg;animation-delay:.8s}
.sv-eu i:nth-child(4){--r:90deg;animation-delay:1.2s}
.sv-eu i:nth-child(5){--r:120deg;animation-delay:1.6s}
.sv-eu i:nth-child(6){--r:150deg;animation-delay:2s}
.sv-eu i:nth-child(7){--r:180deg;animation-delay:2.4s}
.sv-eu i:nth-child(8){--r:210deg;animation-delay:2.8s}
.sv-eu i:nth-child(9){--r:240deg;animation-delay:3.2s}
.sv-eu i:nth-child(10){--r:270deg;animation-delay:3.6s}
.sv-eu i:nth-child(11){--r:300deg;animation-delay:4s}
.sv-eu i:nth-child(12){--r:330deg;animation-delay:4.4s}
@keyframes sv-star{0%,100%{opacity:.4}30%{opacity:1}}
.sv-eu b{font-family:var(--fd);font-weight:400;font-size:15px;letter-spacing:.22em;color:var(--w72);padding-left:.22em}

/* 07 Free in every plan — an outlined zero with light running through it */
.sv-zero{font-family:var(--fd);font-size:clamp(4rem,6.2vw,6rem);line-height:.9;letter-spacing:-.03em;white-space:nowrap;
  color:transparent;-webkit-text-stroke:1px rgb(255 255 255/.5);
  background:linear-gradient(100deg,transparent 30%,rgb(255 255 255/.85) 46%,transparent 62%) 0 0/280% 100% no-repeat;
  -webkit-background-clip:text;background-clip:text;animation:shim 7s linear infinite}

/* 08 People — a voice, not a ticket queue */
.sv-voice{display:flex;align-items:center;gap:5px;height:58px}
.sv-voice i{width:3px;height:100%;border-radius:3px;
  background:linear-gradient(180deg,rgb(255 255 255/.2),#fff 50%,rgb(255 255 255/.2));
  transform:scaleY(.2);animation:sv-talk var(--du,1.5s) var(--e-soft) infinite alternate}
.sv-voice i:nth-child(1){--s:.3;--du:1.3s}
.sv-voice i:nth-child(2){--s:.55;--du:1.7s;animation-delay:-.3s}
.sv-voice i:nth-child(3){--s:.8;--du:1.2s;animation-delay:-.7s}
.sv-voice i:nth-child(4){--s:.5;--du:1.9s;animation-delay:-.2s}
.sv-voice i:nth-child(5){--s:1;--du:1.4s;animation-delay:-.9s}
.sv-voice i:nth-child(6){--s:.7;--du:1.6s;animation-delay:-.5s}
.sv-voice i:nth-child(7){--s:.92;--du:1.25s;animation-delay:-1.1s}
.sv-voice i:nth-child(8){--s:.45;--du:1.8s;animation-delay:-.4s}
.sv-voice i:nth-child(9){--s:.75;--du:1.35s;animation-delay:-.8s}
.sv-voice i:nth-child(10){--s:.4;--du:1.65s;animation-delay:-.1s}
.sv-voice i:nth-child(11){--s:.28;--du:1.45s;animation-delay:-.6s}
@keyframes sv-talk{from{transform:scaleY(.16)}to{transform:scaleY(var(--s,.6))}}

/* the specimens wait for their card; listed last so they beat each shorthand above */
.svc .srv .srv-vis *,.svc .srv .srv-vis *::after{animation-play-state:paused}
.svc .srv.in .srv-vis *,.svc .srv.in .srv-vis *::after{animation-play-state:running}

/* phones and short windows (.svc.flat: the stacked deck) — smaller specimens */
.svc.flat .srv-vis{padding:18px 0 2px;gap:12px}
.svc.flat .sv-cp-grid b{height:30px}
.svc.flat .sv-bk b{height:36px}
.svc.flat .sv-eu{width:104px;height:104px}
.svc.flat .sv-eu i{transform:rotate(var(--r,0deg)) translateY(-43px) rotate(calc(var(--r,0deg) * -1))}
.svc.flat .sv-mail{width:96px;height:66px}
.svc.flat .sv-zero{font-size:3.8rem}
.svc.flat .sv-voice{height:46px}

/* ---------- 7. REDUCED MOTION — the pictures stay, the movement goes ---------- */
@media (prefers-reduced-motion:reduce){
  .srv-vis *,.srv-vis *::after{animation:none!important}
  .sv-bk span:last-child b::after{transform:none;opacity:.6}
  .sv-voice i{transform:scaleY(var(--s,.6))}
  .sv-php span:first-child{color:#000}
  .nbtx-flow li::after,.nf-bus::before,.nf-bus::after{transform:none!important;transition:none!important}
  .nf-bus .led{opacity:1!important;transition:none!important}
  .hprice a:hover{transform:none}
}