/* ==================================================================
   NAV.RO — /gazduire-wordpress2 · WP-REDESIGN Faza 1.
   The page is drawn with the /gazduire-web design system (gazduire2.css,
   loaded first); this sheet only carries what the WordPress content needs
   on top of it: three-card decks, the guarantee row that stands in for the
   first-order coupon, the WP-Toolkit window brand, the six toolkit cards
   and the WordPress mark in the hero stack. Same scopes (.wh / .fx5).
   ================================================================== */

/* hero — the WordPress mark is a filled glyph (the stack icons are strokes) */
.wh .layer .lico.lg svg.wpl{width:21px;height:21px;fill:url(#whg);stroke:none}
.wh-hero .sub em{font-style:normal;font-weight:inherit}

/* hero background — the WordPress laptop photo (in place of the hosting video),
   on every viewport; the brand gradient is a touch lighter than over the video
   so the WordPress screen reads through it */
.wh.wp2 .wh-hero .vid.wp2-bg picture,.wh.wp2 .wh-hero .vid.wp2-bg img{display:block;width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.wh.wp2 .wh-hero::before{background:linear-gradient(118deg,rgba(0,113,185,.8) 6%,rgba(0,146,185,.5) 52%,rgba(0,190,188,.34) 100%)}

/* hero visual — a wp-admin dashboard in the glass screen */
.wh .wp2-adm .wp2-abar{display:flex;align-items:center;gap:10px;padding:7px 12px;background:rgba(0,40,70,.55);border-bottom:1px solid rgba(255,255,255,.18);font:700 10.5px/1 var(--sans);color:#fff}
.wh .wp2-adm .wp2-abar-w svg{width:16px;height:16px;display:block;fill:#fff}
.wh .wp2-adm .wp2-abar b{font-weight:700;letter-spacing:.01em;white-space:nowrap}
.wh .wp2-adm .wp2-abar-i{display:inline-flex;align-items:center;gap:4px;color:rgba(255,255,255,.78);font-weight:600;white-space:nowrap}
.wh .wp2-adm .wp2-abar-i svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round}
.wh .wp2-adm .wp2-abar .live{position:static;margin-left:auto;padding:4px 9px;font-size:7.5px}
.wh .wp2-adm .wp2-abody{display:grid;grid-template-columns:132px minmax(0,1fr);min-height:176px}
.wh .wp2-adm .wp2-aside{display:flex;flex-direction:column;gap:1px;padding:8px 0;background:rgba(0,40,70,.4);border-right:1px solid rgba(255,255,255,.14)}
.wh .wp2-adm .wp2-aside span{display:flex;align-items:center;gap:8px;padding:5px 12px;font:600 10.5px/1.1 var(--sans);color:rgba(255,255,255,.84);white-space:nowrap}
.wh .wp2-adm .wp2-aside span.on{background:linear-gradient(90deg,var(--teal),rgba(0,190,188,.35));color:#fff;font-weight:800;box-shadow:inset 3px 0 0 #fff}
.wh .wp2-adm .wp2-aside svg{width:12px;height:12px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wh .wp2-adm .wp2-aside em{margin-left:auto;min-width:16px;padding:2px 5px;border-radius:999px;background:#fff;color:var(--blue);font:800 8px/1 var(--mono);font-style:normal;text-align:center}
.wh .wp2-adm .wp2-amain{display:flex;flex-direction:column;gap:9px;padding:14px 15px 15px;background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.05))}
.wh .wp2-adm .wp2-awel{font:800 16px/1.15 var(--sans);letter-spacing:-.015em;color:#fff}
.wh .wp2-adm .wp2-asub{margin-top:-5px;font:500 10px/1.35 var(--sans);color:rgba(255,255,255,.8)}
.wh .wp2-adm .wp2-ahealth{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28)}
.wh .wp2-adm .wp2-ahealth svg{width:34px;height:34px;flex:none;display:block}
.wh .wp2-adm .wp2-ahealth em{display:block;font:700 7.5px/1 var(--mono);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.wh .wp2-adm .wp2-ahealth b{display:block;margin-top:5px;font:800 14px/1 var(--sans);color:#fff}
.wh .wp2-adm .wp2-astats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.wh .wp2-adm .wp2-astats span{padding:7px 8px;border-radius:9px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);font:600 8.5px/1.2 var(--sans);color:rgba(255,255,255,.82);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wh .wp2-adm .wp2-astats b{display:block;margin-bottom:3px;font:800 14px/1 var(--mono);color:#fff}

/* the WordPress medallion — in place of the /gazduire-web speed ring */
.wh .wp2-medal{position:absolute;left:-138px;top:92px;z-index:6;width:120px;height:120px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(70% 70% at 35% 28%,#ffffff,#e6f4fc);border:2px solid rgba(255,255,255,.95);box-shadow:0 26px 46px -16px rgba(0,20,40,.7),0 0 0 9px rgba(255,255,255,.14),0 0 0 10px rgba(125,238,236,.5)}
.wh .wp2-medal svg{width:84px;height:84px;display:block;fill:url(#whg)}

/* chips: the migration chip leaves the dashboard's side menu free (it sat over
   it at /gazduire-web's top:150px) and floats left of the stack instead —
   anchored by its right edge, so a longer translation grows away from the
   stack, never into it */
.wh.wp2 .wh-chip.h2c{top:auto;bottom:74px;left:auto;right:calc(100% + 6px)}

/* below 1400px the copy column reaches the visual: the medallion moves onto the
   window's top-left corner and the migration chip (also in the lead and the
   trust row) steps out */
@media(max-width:1399px){
	.wh .wp2-medal{left:-58px;top:-64px;width:104px;height:104px}
	.wh .wp2-medal svg{width:72px;height:72px}
	.wh.wp2 .wh-chip.h2c{display:none}
}
@media(max-width:1080px){
	.wh.wp2 .wh-glass{margin-top:44px}
}
@media(max-width:600px){
	.wh .wp2-medal{left:-10px;top:-58px;width:86px;height:86px}
	.wh .wp2-medal svg{width:60px;height:60px}
	.wh .wp2-adm .wp2-abody{grid-template-columns:112px minmax(0,1fr)}
	.wh .wp2-adm .wp2-abar-i{display:none}
}

/* the ranked page's content, restored verbatim (owner, 2026-10-12: "toate
   detaliile de pe legacy"): the hero's "from" price line, the three promises
   under the hero (wp2Promise), the #benefits heading on the band, the l4/l5
   options and the l5 heading's <strong> */
.wh.wp2 .wp2-from{margin:16px 0 0;padding:0;font:600 15px/1.4 var(--sans);color:rgba(255,255,255,.92);text-shadow:0 1px 8px rgba(0,26,48,.35)}
.wh.wp2 .wp2-from b,.wh.wp2 .wp2-from strong{color:#fff;font-weight:800}
/* the three promises (owner, 2026-10-12: "căsuțe mult mai wow, de genul cum
   sunt pe legacy"), at the top of the #avantaje band since 2026-10-13: the
   ranked page's anatomy — square white cards on the brand-gradient band, each on a tray with a lighter sheet peeking out
   behind its top edge, the title in blue behind a teal bar — plus a gradient
   icon tile, a large watermark icon and a lit top edge on hover */
.fx5 .pm-grid{list-style:none;margin:0 auto;padding:40px 16px 0;max-width:1260px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
/* compact (owner, 2026-10-13: "cu 50% mai mici de sus în jos"): the icon
   tile beside the title, the text under both */
.fx5 .pm{--tray:rgba(8,44,78,.09);position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;align-content:start;gap:12px 16px;margin:0;padding:22px 26px 26px;border-radius:0;background:#fff;box-shadow:0 26px 40px -28px rgba(0,40,80,.55),0 0 0 16px var(--tray),0 -8px 0 16px var(--tray);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.fx5 .pm::before{content:"";position:absolute;top:-25px;left:6%;right:6%;height:12px;background:rgba(255,255,255,.5)}
.fx5 .pm::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--grad);transform:scaleX(.18);transform-origin:left;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.fx5 .pm:hover::after,.fx5 .pm:focus-within::after{transform:scaleX(1)}
.fx5 .pm-ic{grid-column:1;grid-row:1;position:relative;width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:var(--grad);box-shadow:0 16px 26px -12px rgba(0,113,185,.7),inset 0 1px 0 rgba(255,255,255,.4);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.fx5 .pm-ic::after{content:"";position:absolute;inset:-5px;border-radius:17px;border:1.5px dashed rgba(0,190,188,.45)}
.fx5 .pm:hover .pm-ic{transform:translateY(-3px) rotate(-4deg)}
.fx5 .pm-ic svg{width:22px;height:22px;display:block;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.fx5 .pm-wm{position:absolute;right:14px;top:12px;width:84px;height:84px;pointer-events:none;opacity:.06}
.fx5 .pm-wm svg{width:100%;height:100%;display:block;fill:none;stroke:#0071b9;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.fx5 .pm h4{grid-column:2;grid-row:1;position:relative;margin:0;padding:1px 0 1px 14px;font:700 17px/1.3 var(--sans);letter-spacing:-.01em;color:var(--blue);text-wrap:balance}
.fx5 .pm h4::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:3px;border-radius:2px;background:linear-gradient(180deg,#00bebc,#0071b9)}
.fx5 .pm p{grid-column:1/-1;grid-row:2;position:relative;margin:0;padding:0;font:500 14px/1.6 var(--sans);color:var(--ink-2)}
/* three narrow columns: the title would wrap to 4–6 lines beside the tile,
   so the tile sits above it */
@media(min-width:901px) and (max-width:1120px){
	.fx5 .pm{grid-template-columns:minmax(0,1fr);gap:12px}
	.fx5 .pm h4{grid-column:1;grid-row:2}
	.fx5 .pm p{grid-column:1;grid-row:3;font-size:13.5px}
	.fx5 .pm-wm{width:68px;height:68px}
}
@media(max-width:900px){
	.fx5 .pm-grid{grid-template-columns:minmax(0,1fr);gap:46px}
}
@media(max-width:600px){
	.fx5 .pm-grid{padding:34px 10px 0}
	.fx5 .pm{padding:22px 20px 24px;box-shadow:0 26px 40px -28px rgba(0,40,80,.55),0 0 0 10px var(--tray),0 -8px 0 10px var(--tray)}
	.fx5 .pm::before{top:-19px;height:10px}
	.fx5 .pm-wm{top:12px;right:12px;width:64px;height:64px}
}
@media(prefers-reduced-motion:reduce){.fx5 .pm,.fx5 .pm::after,.fx5 .pm-ic{transition:none}}
/* #avantaje — the ranked page's ten features (wphost.l3 c1–c10, verbatim and
   in its order) as promise cards under the three promises (owner,
   2026-10-13: "creează conform legacy și secțiunea aceasta"): five per row
   with the tile above the title, four per row (the last two centred) under
   1200px, two per row with the tile beside the title under 900px, then one. */
.fx5 .ft-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:56px 40px;padding-top:56px;padding-bottom:22px}
.fx5 .ft-grid .pm{flex:0 0 calc((100% - 160px) / 5);grid-template-columns:minmax(0,1fr);gap:12px;padding:22px 20px}
.fx5 .ft-grid .pm h4{grid-column:1;grid-row:2;font-size:16px}
.fx5 .ft-grid .pm p{grid-column:1;grid-row:3;font-size:13.5px}
.fx5 .ft-grid .pm-wm{width:68px;height:68px}
@media(max-width:1200px){
	.fx5 .ft-grid .pm{flex-basis:calc((100% - 120px) / 4)}
}
@media(max-width:900px){
	.fx5 .ft-grid{gap:46px 40px;padding-top:46px}
	.fx5 .ft-grid .pm{flex-basis:calc((100% - 40px) / 2);grid-template-columns:auto minmax(0,1fr);gap:12px 16px}
	.fx5 .ft-grid .pm h4{grid-column:2;grid-row:1}
	.fx5 .ft-grid .pm p{grid-column:1/-1;grid-row:2}
}
@media(max-width:640px){
	.fx5 .pm-grid{max-width:480px;padding:34px 10px 0}
	.fx5 .ft-grid{padding:46px 10px 16px}
	.fx5 .ft-grid .pm{flex-basis:100%}
}
.fx5.wp2 .band-h h3 em{font-style:normal;font-weight:900;-webkit-text-fill-color:transparent;color:transparent}
.fx5.wp2 .band-h p{font:600 13px/1.5 var(--sans);letter-spacing:0}

/* #compara pair (WooCommerce / web hosting): the buttons share a baseline
   when one side's text runs a line longer */
.fx5.wp2 .cp-opt>p{margin-bottom:30px}
.fx5.wp2 .cp-opt .cp-obtn{margin-top:auto}

/* #planuri intro (owner, 2026-10-12: the one long sentence "pare aruncat"):
   the lead line, then where the plans run */
.fx5 .head .wp-lead{margin:16px auto 0;max-width:none;font:600 18px/1.45 var(--sans);letter-spacing:-.01em;color:var(--ink-2)}
.fx5 .wp-where{display:block;margin:6px auto 0;padding:0;font:500 14px/1.5 var(--sans);color:var(--muted)}
.fx5 .wp-where b{font-weight:700;color:var(--ink-2)}
.fx5 .wp-where>svg{display:inline-block;width:17px;height:17px;margin-right:6px;vertical-align:-3px;stroke:url(#wrg);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:760px){
	.fx5 .head .wp-lead{font-size:16px}
	.fx5 .wp-where{font-size:13px}
}

/* plan rows (owner, 2026-10-10: "pachetele pe orizontal, cu iconițe specifice
   pentru tot ce este în ele", then "compactează-le, sunt prea mari de sus în
   jos") — one compact row per plan: identity | the eight resources as icon
   cells + free domain and plan extras | price + order. The WordPress tooling
   every plan ships with is said once, in the .wr-all strip above the decks.
   The price keeps the /gazduire-web hooks (.price-hero, .d-note, .d-gift), so
   gazduire2.js still drives the Lunar/Anual switch. */
.fx5 .wr-all{max-width:1260px;margin:34px auto 0;display:flex;flex-direction:column;align-items:center;gap:12px}
.fx5 .wr-all-h{display:inline-flex;align-items:center;gap:9px;font:800 9.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.fx5 .wr-all-h::before,.fx5 .wr-all-h::after{content:"";width:46px;height:1px;background:linear-gradient(90deg,transparent,var(--blue-t3))}
.fx5 .wr-all-h::after{transform:scaleX(-1)}
.fx5 .wr-all-h svg.wr-hwp{width:18px;height:18px;flex:none;fill:url(#wrg)}
.fx5 .wr-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.fx5 .wr-chip{display:inline-flex;align-items:center;gap:7px;margin:0;padding:5px 12px 5px 5px;border-radius:999px;font:700 11px/1 var(--sans);white-space:nowrap}
.fx5 .wr-chip.wp{background:#fff;border:1px solid #c9e6f4;color:var(--ink);box-shadow:0 8px 18px -14px rgba(0,90,150,.55)}
.fx5 .wr-chip i{width:24px;height:24px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--grad);box-shadow:0 5px 10px -5px rgba(0,113,185,.6)}
.fx5 .wr-chip i svg{width:14px;height:14px;display:block;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fx5 .wr-chip i svg.f{width:16px;height:16px;fill:#fff;stroke:none}

.fx5 .deck.wr-deck{grid-template-columns:minmax(0,1fr);gap:76px;margin-top:64px;max-width:1260px;margin-left:auto;margin-right:auto}
/* the ranked page's 3D package (owner, 2026-10-12: "umbre ca pe legacy,
   pachetele pătrate, formă 3D"): a square white card on a tinted tray (box-
   shadow spreads: 20px around, 30px on top) with a darker 92%-wide sheet
   peeking out behind its top edge; the recommended plan sits on the teal tray */
.fx5 .wr{--tray:#f4f8fc;--sheet:rgba(0,60,86,.1);position:relative;display:grid;grid-template-columns:290px minmax(0,1fr) 262px;border-radius:0;background:#fff;border:1px solid #e3edf6;box-shadow:0 16px 26px -20px rgba(0,60,110,.38),0 0 0 20px var(--tray),0 -10px 0 20px var(--tray)}
.fx5 .wr::before{content:"";position:absolute;top:-15px;left:4%;right:4%;height:14px;background:var(--sheet)}
.fx5 .wr:hover,.fx5 .wr:focus-within{z-index:3}
.fx5 .wr.pop{--tray:#ccf2f2;--sheet:#bceeee;border-color:#bfe9ea}
.fx5 .wr-rec{position:absolute;top:-11px;left:24px;z-index:2;display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;background:var(--grad);color:#fff;font:800 8.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;box-shadow:0 10px 20px -8px rgba(0,113,185,.6)}
.fx5 .wr-rec svg{width:10px;height:10px;fill:#fff}

/* identity */
.fx5 .wr-id{padding:20px 22px 18px;border-right:1px solid var(--line-2);display:flex;flex-direction:column;min-width:0}
.fx5 .wr-top{display:flex;align-items:center;gap:11px}
.fx5 .wr-medal{width:42px;height:42px;flex:none;border-radius:13px;display:grid;place-items:center;background:var(--grad);box-shadow:0 12px 20px -10px rgba(0,113,185,.65),inset 0 1px 0 rgba(255,255,255,.35)}
.fx5 .wr-medal svg{width:28px;height:28px;display:block;fill:#fff}
.fx5 .wr-tt{min-width:0}
.fx5 .wr-eb{display:block;font:800 8.5px/1.25 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--teal-d1)}
.fx5 .wr-nl{display:flex;align-items:center;flex-wrap:wrap;gap:4px 9px;margin-top:5px}
.fx5 .wr-name{margin:0;font:900 23px/1 var(--sans);letter-spacing:.01em;color:var(--ink)}
.fx5 .wr-ent{display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;background:linear-gradient(90deg,#0071b9,#00bebc);color:#fff;font:800 7.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.fx5 .wr-ent.prem{background:#eaf5fc;color:var(--blue);border:1px solid var(--blue-t3)}
.fx5 .wr-cat{padding:0;margin:10px 0 12px;font:600 11.5px/1.5 var(--sans);color:var(--muted)}
/* the ranked page's "Recomandat pentru site-uri cu până la … vizitatori într-o
   lună." line, as a tinted card with its tooltip */
.fx5 .wr-vis{display:flex;align-items:flex-start;gap:9px;margin-top:auto;padding:9px 10px;border-radius:12px;background:linear-gradient(180deg,#f7fbfe,#f0f7fc);border:1px solid var(--line-2)}
.fx5 .wr-vis-ic{width:26px;height:26px;flex:none;border-radius:8px;display:grid;place-items:center;background:#fff;border:1px solid #d3eaf6}
.fx5 .wr-vis-ic svg{width:16px;height:16px;display:block;stroke:url(#wrg);fill:none;stroke-width:1.9;stroke-linecap:round}
.fx5 .wr-vis-t{font:600 11px/1.5 var(--sans);color:var(--ink-2)}
.fx5 .wr-vis-t b{font:900 12.5px/1 var(--mono);color:var(--ink);white-space:nowrap}

/* resources: eight icon cells on one panel, then the domain + plan extras */
.fx5 .wr-feat{padding:16px 20px;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:12px}
.fx5 .wr-tiles{list-style:none;margin:0;padding:13px 14px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px 12px;border-radius:14px;background:linear-gradient(180deg,#f7fbfe,#f0f7fc);border:1px solid var(--line-2)}
.fx5 .wr-tile{display:flex;align-items:center;gap:9px;margin:0;padding:0;min-width:0}
.fx5 .wr-ti{width:32px;height:32px;flex:none;border-radius:10px;display:grid;place-items:center;background:#fff;border:1px solid #d3eaf6;box-shadow:0 6px 12px -9px rgba(0,90,150,.55)}
.fx5 .wr-ti svg{width:18px;height:18px;display:block;stroke:url(#wrg);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fx5 .wr-ti svg.f{width:20px;height:20px;fill:url(#wrg);stroke:none}
.fx5 .wr-tv{min-width:0}
.fx5 .wr-tv b{display:block;font:900 14px/1 var(--mono);color:var(--ink);white-space:nowrap}
.fx5 .wr-tv b em{margin-left:2px;font:800 9px/1 var(--mono);font-style:normal;color:var(--teal-d1)}
.fx5 .wr-tv>span{display:block;margin-top:3px;font:700 9.5px/1.2 var(--sans);color:var(--muted);white-space:nowrap}
.fx5 .wr-tile.ip b{font-size:13px}
.fx5 .wr-tile.ip .v6{margin-left:4px;font:800 9.5px/1 var(--mono);font-style:normal;color:var(--teal-d1)}
.fx5 .wr-foot{list-style:none;margin:0;padding:0 4px;display:flex;flex-wrap:wrap;align-items:center;gap:7px 18px}
.fx5 .wr-foot li{display:inline-flex;align-items:center;gap:6px;margin:0;padding:0;font:600 10.5px/1.3 var(--sans);color:var(--muted)}
.fx5 .wr-foot li b{font-weight:800;color:var(--ink-2)}
.fx5 .wr-foot li>svg{width:16px;height:16px;flex:none;stroke:url(#wrg);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.fx5 .wr-foot li span b{color:var(--ink-2)}
.fx5 .wr-ext{display:inline-flex;gap:4px;margin-left:2px}
.fx5 .wr-ext i{flex:none;padding:3px 6px;border-radius:6px;background:var(--grad);color:#fff;font:900 8.5px/1 var(--mono);font-style:normal;letter-spacing:.03em}

/* price + order */
.fx5 .wr-buy{position:relative;padding:16px 20px;border-left:1px solid var(--line-2);border-radius:0;background:linear-gradient(180deg,#f6fbfe,#edf6fc);display:flex;flex-direction:column;justify-content:center;min-width:0}
.fx5 .wr-pr{display:flex;align-items:flex-end;gap:6px}
.fx5 .wr-per{margin-bottom:1px;font:700 10.5px/1 var(--sans);color:var(--muted);white-space:nowrap}
/* the annual-only "1 lună gratis" chip rides the row's top edge over the
   price column, like the "Recomandat" ribbon on the left — no layout space,
   so the price line never has to share its width with it */
.fx5 .wr-buy .d-gift{position:absolute;top:-11px;right:18px;z-index:2;font-size:9.5px;padding:5px 9px;border-radius:999px}
.fx5 .wr-buy .ph-int{font-size:44px}
.fx5 .wr-buy .ph-dec{font-size:21px;margin-top:4px}
.fx5 .wr-buy .ph-cur{font-size:17px;margin-top:4px}
.fx5 .wr-buy .d-note{margin-top:9px}
.fx5 .wr-buy .btn-wrap{order:0;margin-top:14px;padding-top:0;transform:none}
.fx5 .wr-buy .btn{padding:12px 14px}
.fx5 .wr-guar{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:10px;padding:0;font:600 10px/1.2 var(--sans);color:var(--muted)}
.fx5 .wr-guar svg{width:14px;height:14px;flex:none;stroke:var(--teal);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fx5 .wr-promo{margin-top:10px}

/* tooltips (wp2Tip): a "?" after the text; the note opens above its .tipx
   block on hover or focus (tap on phones) — the ranked page's tooltip copy */
.fx5 .tipx{position:relative}
.fx5 .wr-q{appearance:none;-webkit-appearance:none;display:inline-grid;place-items:center;width:15px;height:15px;margin:0 0 0 4px;padding:0;border:0;border-radius:50%;background:none;box-shadow:none;color:var(--teal);cursor:help;vertical-align:-3px;line-height:0}
.fx5 .wr-q svg{width:15px;height:15px;display:block;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.fx5 .wr-q:hover,.fx5 .wr-q:focus-visible{color:var(--blue)}
.fx5 .wr-q:focus-visible{outline:2px solid var(--blue-t3);outline-offset:1px}
.fx5 .wr-tip{position:absolute;bottom:calc(100% + 8px);left:0;z-index:20;width:max-content;max-width:min(340px,calc(100vw - 48px));padding:10px 13px;border-radius:11px;background:#fff;border:1px solid var(--blue-t3);box-shadow:0 20px 36px -18px rgba(0,60,110,.5);font:600 11px/1.55 var(--sans);color:var(--ink-2);text-align:left;white-space:normal;letter-spacing:0;text-transform:none;opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .18s,transform .18s,visibility .18s;pointer-events:none}
.fx5 .wr-tip b{display:inline;font:800 11px/1.55 var(--sans);color:var(--ink);white-space:nowrap}
.fx5 .wr-q:hover+.wr-tip,.fx5 .wr-q:focus+.wr-tip{opacity:1;visibility:visible;transform:none}
.fx5 .wr-guar .wr-tip{left:50%;transform:translate(-50%,4px)}
.fx5 .wr-guar .wr-q:hover+.wr-tip,.fx5 .wr-guar .wr-q:focus+.wr-tip{transform:translate(-50%,0)}

/* reflow: narrower columns, then identity + price side by side over the
   resources, then one column on phones */
@media(max-width:1299px){
	.fx5 .wr-tile.ip .v6{display:block;margin:3px 0 0}
}
@media(max-width:1239px){
	.fx5 .wr{grid-template-columns:250px minmax(0,1fr) 250px}
	.fx5 .wr-tiles{gap:12px 8px;padding:12px}
	.fx5 .wr-ti{width:30px;height:30px}
	.fx5 .wr-tv>span{white-space:normal}
}
@media(max-width:1119px){
	.fx5 .wr{grid-template-columns:minmax(0,1fr) 300px;grid-template-areas:"id buy" "feat feat"}
	.fx5 .wr-id{grid-area:id;border-right:0}
	.fx5 .wr-buy{grid-area:buy}
	.fx5 .wr-feat{grid-area:feat;border-top:1px solid var(--line-2)}
}
@media(max-width:760px){
	.fx5 .wr-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
	.fx5 .wr{grid-template-columns:minmax(0,1fr);grid-template-areas:"id" "feat" "buy"}
	.fx5 .wr-buy{border-left:0;border-top:1px solid var(--line-2)}
	.fx5 .deck.wr-deck{gap:52px;margin-top:48px}
	.fx5 .wr{box-shadow:0 16px 26px -20px rgba(0,60,110,.38),0 0 0 10px var(--tray),0 -10px 0 10px var(--tray)}
	.fx5 .wr::before{top:-11px;height:10px}
	.fx5 .wr-id,.fx5 .wr-buy{padding:18px}
	.fx5 .wr-feat{padding:16px 14px}
	.fx5 .wr-rec{left:18px}
	.fx5 .wr-buy .d-gift{position:static;align-self:center;margin-left:auto}
	.fx5 .wr-all-h::before,.fx5 .wr-all-h::after{width:20px}
	.fx5 .wr-chip{white-space:normal}
}

/* #wordpress — WP-Toolkit window brand + the six toolkit cards */
.fx5 .cp-sec#wordpress .cp-head h2{text-wrap:balance}
.fx5 .wp2-tklogo{gap:8px}
.fx5 .wp2-tklogo .wp2-tkmark{width:24px;height:24px;display:block;fill:url(#gg)}
.fx5 .wp2-tklogo b{font:800 17px/1 var(--sans);letter-spacing:-.02em;background:linear-gradient(100deg,#00bebc,#0071b9);-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap}
.fx5 .wp2-feats{margin-top:46px}
.fx5 .wp2-feats .cl-cardtxt{padding:22px 22px 24px}
.fx5 .wp2-feats .cl-card{height:100%}
.fx5 .cp-sec#wordpress .cp-th{margin-top:72px}
@media(max-width:1100px){.fx5 .wp2-feats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.fx5 .wp2-feats{grid-template-columns:1fr}}

/* #tehnologie diagram (wp2Infra; owner, 2026-10-12: the floating 3D cards
   "mai frumos, mai curat, mai ordonat") — one flat, aligned schema: the
   WordPress site, wired to the three-node NVMe cluster, then the failover pair
   and the NAV server side by side. Same card language as the plan rows. */
.fx5.wp2 .cl-stage.ci{height:auto;overflow:visible;transform:none;display:flex;flex-direction:column;padding:30px 30px 28px;background:radial-gradient(120% 90% at 50% 0%,#f4fbfd,#e2f0f9)}
.fx5.wp2 .cl-stage.ci svg{position:static;inset:auto;display:block;fill:none;stroke-linecap:round;stroke-linejoin:round} /* gazduire2.css stretches every .cl-stage svg over the stage */
.fx5 .ci-site{align-self:center;width:min(100%,380px);border-radius:14px;background:#fff;border:1px solid #d6e8f5;box-shadow:0 22px 40px -26px rgba(0,60,110,.55);overflow:hidden}
.fx5 .ci-bar{display:flex;align-items:center;gap:10px;padding:8px 12px;background:linear-gradient(180deg,#f8fbfe,#eef5fb);border-bottom:1px solid var(--line-2)}
.fx5 .ci-dots{display:inline-flex;gap:5px;flex:none}
.fx5 .ci-dots i{width:8px;height:8px;border-radius:50%;background:#a9d3ee}
.fx5 .ci-dots i:nth-child(2){background:#7deeec}
.fx5 .ci-dots i:nth-child(3){background:#00bebc}
.fx5 .ci-url{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:6px;padding:5px 10px;border-radius:999px;background:#fff;border:1px solid var(--line);font:600 10.5px/1 var(--mono);color:var(--ink-2);white-space:nowrap}
.fx5 .ci-url span{overflow:hidden;text-overflow:ellipsis}
.fx5 .ci-url svg{width:11px;height:11px;flex:none;stroke:var(--teal-d1);stroke-width:2.2}
.fx5 .ci-page{display:flex;align-items:center;gap:14px;padding:16px 18px;background:linear-gradient(120deg,#0071b9,#00a9c2)}
.fx5 .ci-wp{width:42px;height:42px;flex:none;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.4)}
.fx5.wp2 .ci .ci-wp svg{width:28px;height:28px;fill:#fff;stroke:none}
.fx5 .ci-lines{flex:1;display:grid;gap:7px}
.fx5 .ci-lines i{display:block;height:7px;border-radius:4px;background:rgba(255,255,255,.9)}
.fx5 .ci-lines i:nth-child(1){width:64%}
.fx5 .ci-lines i:nth-child(2){width:92%;background:rgba(255,255,255,.45)}
.fx5 .ci-lines i:nth-child(3){width:44%;background:rgba(255,255,255,.45)}
.fx5 .ci-wire{align-self:center;width:2px;height:34px;background:repeating-linear-gradient(180deg,#00bebc 0 5px,transparent 5px 10px);background-size:2px 10px;animation:ciflowv 1s linear infinite}
@keyframes ciflowv{to{background-position:0 10px}}
.fx5 .ci-cluster{padding:14px 16px 16px;border-radius:16px;background:rgba(255,255,255,.55);border:1.5px dashed #a9d3ee}
.fx5 .ci-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 12px;margin-bottom:12px}
.fx5 .ci-h,.fx5 .ci-ch{display:flex;align-items:center;gap:8px;font:800 10px/1.2 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2)}
.fx5 .ci-h{text-transform:none} /* "NVMe CLUSTER" keeps its lowercase e */
.fx5 .ci-h svg,.fx5 .ci-ch svg{width:18px;height:18px;flex:none;stroke:url(#wrg);stroke-width:1.9}
.fx5 .ci-rep{display:inline-flex;align-items:center;gap:6px;padding:5px 11px 5px 9px;border-radius:999px;background:var(--grad);color:#fff;font:800 9.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;box-shadow:0 8px 16px -10px rgba(0,113,185,.7)}
.fx5 .ci-rep svg{width:13px;height:13px;stroke:#fff;stroke-width:2}
.fx5 .ci-nodes{display:flex;align-items:center}
.fx5 .ci-node{flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:12px;background:#fff;border:1px solid #d6e8f5;box-shadow:0 12px 22px -18px rgba(0,60,110,.55)}
.fx5 .ci-ni{width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;background:#eaf5fc;border:1px solid #d3eaf6}
.fx5 .ci-ni svg{width:20px;height:20px;stroke:url(#wrg);stroke-width:1.8}
.fx5 .ci-nt{min-width:0;display:flex;flex-direction:column;gap:5px}
.fx5 .ci-nt b{font:800 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.fx5 .ci-nt em{display:inline-flex;align-items:center;gap:5px;font:700 10px/1 var(--sans);font-style:normal;color:var(--teal-d1)}
.fx5 .ci-led{display:inline-block;width:7px;height:7px;flex:none;border-radius:50%;background:#00bebc;box-shadow:0 0 0 3px rgba(0,190,188,.18);animation:cipulse 2.4s ease-in-out infinite}
@keyframes cipulse{50%{box-shadow:0 0 0 5px rgba(0,190,188,.06)}}
.fx5 .ci-sync{flex:none;width:28px;height:2px;margin:0 7px;background:repeating-linear-gradient(90deg,#00bebc 0 4px,transparent 4px 8px);background-size:8px 2px;animation:ciflowh .8s linear infinite}
@keyframes ciflowh{to{background-position:8px 0}}
.fx5 .ci-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:16px}
.fx5 .ci-card{display:flex;flex-direction:column;gap:12px;padding:14px 16px;border-radius:14px;background:#fff;border:1px solid #d6e8f5;box-shadow:0 14px 26px -20px rgba(0,60,110,.5)}
.fx5 .ci-ft{flex:1;display:flex;align-items:center;gap:10px}
.fx5 .ci-fn{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:7px;padding:11px 8px;border-radius:10px;background:#f3f8fc;border:1px solid var(--line-2);font:800 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.fx5 .ci-swap{width:32px;height:32px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--grad);box-shadow:0 8px 16px -9px rgba(0,113,185,.7)}
.fx5 .ci-swap svg{width:16px;height:16px;stroke:#fff;stroke-width:2}
.fx5 .ci-meters{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.fx5 .ci-meters li{display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:10px;margin:0;padding:0;font:800 9.5px/1 var(--mono);letter-spacing:.08em;color:var(--ink-2)}
.fx5 .ci-meters i{position:relative;display:block;height:7px;border-radius:4px;background:#e3eff8;overflow:hidden}
.fx5 .ci-meters i::after{content:"";position:absolute;top:0;bottom:0;left:0;width:var(--w);border-radius:inherit;background:var(--grad)}
.fx5 .ci-meters .ci-m1{--w:58%}
.fx5 .ci-meters .ci-m2{--w:66%}
.fx5 .ci-meters .ci-m3{--w:44%}
.fx5 .ci-meters .ci-m4{--w:100%}
/* the stage's own width decides (it is 533-850px wide between 600px and
   1100px viewports): nodes stack their icon over the name below 600px of
   stage, the two cards stack below 480px */
.fx5.wp2 .cl-stage.ci{container-type:inline-size}
@container (max-width:600px){
	.fx5 .ci-nodes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
	.fx5 .ci-sync{display:none}
	.fx5 .ci-node{flex-direction:column;gap:8px;padding:10px 6px;text-align:center}
	.fx5 .ci-nt{align-items:center}
	.fx5 .ci-fn{gap:5px;padding:10px 6px;font-size:10px;letter-spacing:.04em}
	.fx5 .ci-ft{gap:8px}
	.fx5 .ci-swap{width:28px;height:28px}
}
@container (max-width:480px){
	.fx5 .ci-cluster{padding:12px}
	.fx5 .ci-pair{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:600px){
	.fx5.wp2 .cl-stage.ci{padding:20px 16px}
}
@media(prefers-reduced-motion:reduce){
	.fx5 .ci-wire,.fx5 .ci-sync,.fx5 .ci-led{animation:none}
}

/* the HA column's title sits on the badge's line (owner, 2026-10-13:
   "textul High-Availability & Fault Tolerance! cade jos, nu este în linie cu
   iconița") */
.fx5.wp2 .cl-hrow{display:flex;align-items:center;gap:16px}
.fx5.wp2 .cl-hrow .cl-badge{flex:none}
.fx5.wp2 .cl-hrow h3{margin:0}

/* narrow screens — two /gazduire-web layout gaps, fixed for this page:
   the cloud section's two-column grid lives on
   .cl-front while the responsive rule targets .cl-hero, so below 900px the
   HA copy column was squeezed to ~100px beside the stage; and the panel
   window kept its 238px side panel over the tool list on phones. */
@media(max-width:900px){
	.fx5.wp2 .cl-front{grid-template-columns:minmax(0,1fr);gap:30px;padding:30px 0}
}
@media(max-width:760px){
	.fx5.wp2 .cp-osbody{flex-wrap:wrap}
	.fx5.wp2 .cp-osmain{grid-template-columns:minmax(0,1fr)}
	.fx5.wp2 .cp-osaside{width:100%;padding:0 15px 15px;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
	.fx5.wp2 .cp-search{display:none}
	.fx5.wp2 .cp-logos{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* every section's content spans the site header's own width (owner,
   2026-10-15: "lățimea … peste tot la fel de mare cum este în header") — the
   header .wrapper: 96% of the viewport, 1400px from 1400px up */
.fx5.wp2 .wrap,.fx5.wp2 .band-inner,.fx5.wp2 .cp-inner,.fx5.wp2 .cl-inner,.fx5.wp2 .faq-inner{width:96%;max-width:none;margin-left:auto;margin-right:auto;padding-left:0;padding-right:0}
@media(min-width:1400px){.fx5.wp2 .wrap,.fx5.wp2 .band-inner,.fx5.wp2 .cp-inner,.fx5.wp2 .cl-inner,.fx5.wp2 .faq-inner{width:1400px}}
/* the inner blocks drop their own caps; the promise grids keep their side
   padding, the width of the cards' tray ring */
.fx5.wp2 .wr-all,.fx5.wp2 .deck.wr-deck,.fx5.wp2 .pm-grid,.fx5.wp2 .cp-hero,.fx5.wp2 .cp-opts,.fx5.wp2 .faqgrid{max-width:none}
/* the plan rows' tray ring (20px, 10px on phones) is their visible edge */
.fx5.wp2 .deck.wr-deck{padding-left:20px;padding-right:20px}
@media(max-width:640px){.fx5.wp2 .deck.wr-deck{padding-left:10px;padding-right:10px}}