/* RDN HR, pagina de prezentare (hr.rdndata.ro), cu aspectul paginii migrare.rdndata.ro. Fonturile sunt găzduite local. */
@font-face { font-family: "Archivo"; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 62% 125%;
  src: url(/fonts/archivo-latin-wdth-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Archivo"; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 62% 125%;
  src: url(/fonts/archivo-latin-ext-wdth-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-display: swap; font-weight: 400; src: url(/fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-display: swap; font-weight: 400; src: url(/fonts/ibm-plex-sans-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-display: swap; font-weight: 500; src: url(/fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-display: swap; font-weight: 500; src: url(/fonts/ibm-plex-sans-latin-ext-500-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-display: swap; font-weight: 600; src: url(/fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-display: swap; font-weight: 600; src: url(/fonts/ibm-plex-sans-latin-ext-600-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-display: swap; font-weight: 700 900; src: url(/fonts/ibm-plex-sans-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-display: swap; font-weight: 700 900; src: url(/fonts/ibm-plex-sans-latin-ext-700-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-display: swap; font-weight: 400; src: url(/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-display: swap; font-weight: 400; src: url(/fonts/ibm-plex-mono-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-display: swap; font-weight: 500; src: url(/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-display: swap; font-weight: 500; src: url(/fonts/ibm-plex-mono-latin-ext-500-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-display: swap; font-weight: 600 700; src: url(/fonts/ibm-plex-mono-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-display: swap; font-weight: 600 700; src: url(/fonts/ibm-plex-mono-latin-ext-600-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* stilurile proprii RDN HR */
/* Layout: stilul paginilor RDN (ca migrare.rdndata.ro): fundal gri-hârtie cu cer roșiatic, carduri albe rotunjite, titluri Archivo late, etichete mono cu punct roșu, o secțiune închisă cu etape. */
:root {
  --paper: #f4f4f5;
  --card: #ffffff;
  --sheet: #ffffff;
  --glass: rgba(255, 255, 255, .85);
  --float: rgba(255, 255, 255, .92);
  --tint: rgba(0, 0, 0, .045);
  --ink: #121012;
  --ink-2: #4a4548;
  --rule: rgba(0, 0, 0, .09);
  --accent: #b80d0d;
  --neon: #ff3b30;
  --head: #121012;
  --solid: #121012;
  --grad: linear-gradient(92deg, #121012 5%, #3a0a0c 45%, #b80d0d 100%);
  --ghost: #ffffff;
  --ghost-ring: rgba(0, 0, 0, .14);
  --hdr: rgba(255, 255, 255, .85);
  --edge-a: rgba(0, 0, 0, .22);
  --grid: rgba(0, 0, 0, .1);
  --sky-1: rgba(0, 0, 0, .06);
  --sky-2: rgba(0, 0, 0, .04);
  --dot: rgba(0, 0, 0, .22);
  --shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 18px 40px -26px rgba(0, 0, 0, .35);
  --shadow-3d: 0 0 0 1px rgba(0, 0, 0, .1), 0 50px 90px -40px rgba(0, 0, 0, .55);
  --hot-bg: linear-gradient(160deg, #1d1416, #0e0b0c 70%);
  --hot-line: #0e0b0c;
  --hot-shadow: 0 40px 70px -40px rgba(0, 0, 0, .7);
  --dark-from: #1d1416;
  --dark-to: #0e0b0c;
  --dark-glow: rgba(184, 13, 13, .22);
  --dark-accent: #ff6b63;
  --ok: #1d7a46;
  --iso-top: #ffffff; --iso-l: #d2cfd2; --iso-r: #e8e6e8; --iso-slot: #a9a4a7; --iso-label: #4a4548;
  --r: 20px;
  --r-sm: 12px;
  --display: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --body: "IBM Plex Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0a0708; --card: #161112; --sheet: #161112; --glass: rgba(255, 255, 255, .045); --float: rgba(20, 12, 13, .82);
    --tint: rgba(255, 255, 255, .06); --ink: #f5eeee; --ink-2: #b9aaac; --rule: rgba(255, 255, 255, .1);
    --accent: #ff6b63; --head: #ffffff; --solid: #ff3b30; --grad: linear-gradient(92deg, #ffffff 10%, #ff6b63 60%, #ff3b30 100%);
    --ghost: rgba(255, 255, 255, .07); --ghost-ring: rgba(255, 255, 255, .1); --hdr: rgba(18, 12, 13, .7); --edge-a: rgba(255, 120, 110, .28);
    --grid: rgba(255, 59, 48, .2); --sky-1: rgba(184, 13, 13, .32); --sky-2: rgba(92, 3, 3, .45); --dot: rgba(255, 255, 255, .5);
    --shadow: 0 20px 50px -34px rgba(0, 0, 0, .9); --shadow-3d: 0 0 0 1px rgba(255, 255, 255, .12), 0 50px 90px -30px #000, 0 0 80px -20px rgba(255, 40, 30, .55);
    --hot-bg: linear-gradient(160deg, rgba(184, 13, 13, .28), rgba(92, 3, 3, .18) 40%, rgba(255, 255, 255, .02)); --hot-line: rgba(255, 90, 80, .45); --hot-shadow: 0 0 80px -30px rgba(255, 40, 30, .7);
    --dark-from: #5c0303; --dark-to: #0a0708; --dark-glow: rgba(255, 90, 82, .25); --ok: #3ddc84;
    --iso-top: #2e2627; --iso-l: #120e0f; --iso-r: #1f191a; --iso-slot: #3f3335; --iso-label: #b9aaac;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0a0708; --card: #161112; --sheet: #161112; --glass: rgba(255, 255, 255, .045); --float: rgba(20, 12, 13, .82);
  --tint: rgba(255, 255, 255, .06); --ink: #f5eeee; --ink-2: #b9aaac; --rule: rgba(255, 255, 255, .1);
  --accent: #ff6b63; --head: #ffffff; --solid: #ff3b30; --grad: linear-gradient(92deg, #ffffff 10%, #ff6b63 60%, #ff3b30 100%);
  --ghost: rgba(255, 255, 255, .07); --ghost-ring: rgba(255, 255, 255, .1); --hdr: rgba(18, 12, 13, .7); --edge-a: rgba(255, 120, 110, .28);
  --grid: rgba(255, 59, 48, .2); --sky-1: rgba(184, 13, 13, .32); --sky-2: rgba(92, 3, 3, .45); --dot: rgba(255, 255, 255, .5);
  --shadow: 0 20px 50px -34px rgba(0, 0, 0, .9); --shadow-3d: 0 0 0 1px rgba(255, 255, 255, .12), 0 50px 90px -30px #000, 0 0 80px -20px rgba(255, 40, 30, .55);
  --hot-bg: linear-gradient(160deg, rgba(184, 13, 13, .28), rgba(92, 3, 3, .18) 40%, rgba(255, 255, 255, .02)); --hot-line: rgba(255, 90, 80, .45); --hot-shadow: 0 0 80px -30px rgba(255, 40, 30, .7);
  --dark-from: #5c0303; --dark-to: #0a0708; --dark-glow: rgba(255, 90, 82, .25); --ok: #3ddc84;
  --iso-top: #2e2627; --iso-l: #120e0f; --iso-r: #1f191a; --iso-slot: #3f3335; --iso-label: #b9aaac;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.6 var(--body); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; }
a { color: var(--accent); }
:focus-visible { outline: 3px solid var(--neon); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--display); color: var(--head); margin: 0; line-height: 1.08; letter-spacing: -.015em; text-wrap: balance; }
h2 { font-size: clamp(1.55rem, 2.9vw, 2.35rem); font-weight: 800; font-stretch: 108%; }
h3 { font-size: 1.12rem; font-weight: 750; font-stretch: 106%; }
.skip { position: absolute; left: -999px; top: 8px; }
.skip:focus { left: 12px; z-index: 60; background: var(--card); padding: 8px 12px; }

/* fundal: cer roșiatic și rețea de puncte */
.sky { position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(1200px 700px at 80% -10%, var(--sky-1), transparent 60%), radial-gradient(900px 600px at -10% 40%, var(--sky-2), transparent 60%), var(--paper); }
.sky::after { content: ""; position: absolute; inset: 0; opacity: .35; background-image: radial-gradient(var(--dot) 1px, transparent 1.4px); background-size: 46px 46px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); mask-image: linear-gradient(180deg, #000, transparent 70%); }

/* butoane, etichete */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; border-radius: 12px; border: 0; font: 650 .95rem/1.1 var(--body); text-decoration: none; color: #fff; cursor: pointer; white-space: nowrap;
  background: linear-gradient(135deg, #e0161e, #8f0606); box-shadow: 0 0 0 1px rgba(255, 90, 80, .45) inset, 0 14px 40px -12px rgba(255, 40, 30, .7); transition: transform .15s ease, box-shadow .2s ease; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255, 120, 110, .7) inset, 0 18px 50px -12px rgba(255, 40, 30, .9); }
.btn.ghost { background: var(--ghost); color: var(--ink); box-shadow: 0 0 0 1px var(--ghost-ring) inset; }
.btn.ghost:hover { box-shadow: 0 0 0 1px var(--edge-a) inset, 0 10px 30px -14px rgba(255, 40, 30, .6); }
.btn.wa { background: linear-gradient(135deg, #25c062, #168a42); box-shadow: 0 0 0 1px rgba(120, 230, 160, .35) inset, 0 12px 30px -12px rgba(26, 154, 75, .8); }
.wa-ico { width: 1.15em; height: 1.15em; flex: none; }
.link-arrow { font-weight: 650; color: var(--accent); text-decoration: none; }
.link-arrow:hover { text-decoration: underline; }
.label { justify-self: start; display: inline-flex; align-items: center; gap: 8px; font: 600 .74rem/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); padding: 7px 11px; border-radius: 999px; border: 1px solid var(--edge-a); background: var(--glass); }
.label::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(255, 59, 48, .18), 0 0 12px #ff3b30; }
.tag { justify-self: start; display: inline-block; font: 600 .7rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); background: var(--tint); border: 1px solid var(--rule); padding: 6px 9px; border-radius: 7px; }
.lead { color: var(--ink-2); font-size: 1.04rem; max-width: 64ch; }
.checks { list-style: none; display: grid; gap: 7px; }
.checks li { position: relative; padding-left: 26px; }
.checks li::before { content: ""; position: absolute; left: 5px; top: .3em; width: 6px; height: 11px; border: solid var(--ok); border-width: 0 2.2px 2.2px 0; transform: rotate(45deg); }

/* antet */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 45; background: var(--paper); }
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40; background: var(--hdr); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--rule); }
.top-in { display: flex; align-items: center; gap: 18px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); flex: none; }
.brand-logo { width: 46px; height: 46px; object-fit: contain; background: #fff; border-radius: 50%; padding: 7px 5px; box-shadow: 0 0 0 1px var(--rule), 0 6px 16px -8px rgba(184, 13, 13, .6); }
.brand-text { display: grid; line-height: 1.1; }
.brand-text b { font: 800 .95rem/1.1 var(--display); font-stretch: 118%; letter-spacing: .04em; }
.brand-text span { font: 500 .7rem/1.3 var(--mono); color: var(--ink-2); }
.nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav a { color: var(--ink-2); text-decoration: none; font: 550 .88rem/1 var(--body); padding: 9px 10px; border-radius: 9px; white-space: nowrap; }
.nav a:hover { color: var(--ink); background: var(--tint); }
.top .btn { padding: 9px 14px; font-size: .88rem; }
.menu-btn { display: none; width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--rule); background: var(--glass); cursor: pointer; position: relative; }
.menu-btn span, .menu-btn span::before, .menu-btn span::after { position: absolute; left: 11px; width: 18px; height: 2px; background: var(--ink); content: ""; border-radius: 2px; }
.menu-btn span { top: 20px; } .menu-btn span::before { top: -6px; left: 0; } .menu-btn span::after { top: 6px; left: 0; }

/* hero */
.hero { position: relative; overflow: hidden; padding-block: clamp(28px, 4vw, 48px) clamp(36px, 5vw, 64px); isolation: isolate; }
.hero-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 24px; align-items: center; }
.hero-copy { display: grid; gap: 18px; justify-items: start; min-width: 0; }
.hero h1 { font-size: clamp(2rem, 3.7vw, 3.1rem); font-weight: 850; font-stretch: 106%; letter-spacing: -.025em; }
.nw { white-space: nowrap; }
.hero h1 em { font-style: normal; display: block; width: fit-content; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cta-row .btn { padding: 14px 22px; font-size: 1rem; border-radius: 14px; }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { position: relative; font-size: .86rem; color: var(--ink-2); background: var(--glass); border: 1px solid var(--rule); padding: 6px 11px 6px 28px; border-radius: 999px; }
.chips li::before { content: ""; position: absolute; left: 12px; top: .62em; width: 5px; height: 10px; border: solid var(--ok); border-width: 0 2.2px 2.2px 0; transform: rotate(45deg); }
.note { font-size: .92rem; color: var(--ink-2); }
.hero-3d { perspective: 1600px; padding: 20px 10px 40px; min-width: 0; }
.scene { position: relative; aspect-ratio: 1.22; transform-style: preserve-3d; transform: rotateY(-20deg) rotateX(9deg) rotateZ(1.5deg); transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.hero-3d:hover .scene { transform: rotateY(-12deg) rotateX(6deg) rotateZ(.5deg); }
.layer { position: absolute; width: 78%; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-3d); border: 1px solid var(--rule); background: var(--sheet); }
.l-back { right: -4%; top: 0; transform: translateZ(-140px); opacity: .9; }
.l-mid { right: 6%; top: 19%; transform: translateZ(-50px); }
.l-front { left: 0; top: 40%; transform: translateZ(70px); }
.float { position: absolute; display: grid; gap: 1px; padding: 10px 13px; border-radius: 13px; background: var(--float); border: 1px solid var(--rule); box-shadow: var(--shadow); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transform: translateZ(150px); animation: bob 5s ease-in-out infinite; }
.float b { font: 800 1.02rem/1.15 var(--display); font-stretch: 110%; color: var(--accent); }
.float span { font: 500 .72rem/1.3 var(--mono); color: var(--ink-2); }
.f1 { left: -3%; top: 6%; } .f2 { right: -6%; top: 44%; animation-delay: -1.6s; } .f3 { left: 18%; bottom: -8%; animation-delay: -3.2s; }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.floor { position: absolute; left: -20%; right: -20%; bottom: -10px; height: 58%; z-index: -1; transform-origin: 50% 100%; transform: perspective(520px) rotateX(64deg); pointer-events: none;
  background: linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 56px 56px, linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 56px 56px;
  -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 85%); mask-image: linear-gradient(to top, #000 10%, transparent 85%); }
.stats { list-style: none; margin-top: 24px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.stats li { display: grid; gap: 2px; padding: 14px; border-radius: var(--r-sm); background: var(--glass); border: 1px solid var(--rule); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.stats b { justify-self: start; font: 850 1.65rem/1.05 var(--display); font-stretch: 115%; background: linear-gradient(92deg, var(--ink), var(--neon)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stats span { font-size: .84rem; color: var(--ink-2); }

/* secțiuni */
.sec { padding-block: clamp(44px, 6vw, 80px); position: relative; }
.sec-head { display: grid; gap: 12px; justify-items: start; margin-bottom: 22px; }
.sec-head.center { justify-items: center; text-align: center; }
.sec-head.center .lead { margin-inline: auto; }
.card { position: relative; border: 1px solid var(--rule); border-radius: var(--r); box-shadow: var(--shadow); background: var(--card); }

/* trei carduri */
.modules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.mod { padding: 22px; display: grid; gap: 12px; align-content: start; transition: transform .3s ease; }
.mod:hover { transform: translateY(-4px); }
.mod p { color: var(--ink-2); }
.mod.hot { --ink: #f5eeee; --ink-2: #b9aaac; --head: #ffffff; --accent: #ff6b63; --tint: rgba(255, 255, 255, .06); --rule: rgba(255, 255, 255, .12); --ghost: rgba(255, 255, 255, .07); --ghost-ring: rgba(255, 255, 255, .14); --ok: #3ddc84;
  color: var(--ink); background: var(--hot-bg); border-color: var(--hot-line); box-shadow: var(--hot-shadow); }
.mod-ico { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: radial-gradient(circle at 30% 25%, #ff6b63, #b80d0d 55%, #5c0303); box-shadow: 0 12px 30px -10px rgba(255, 40, 30, .8), 0 0 0 1px rgba(255, 255, 255, .15) inset; transform: perspective(200px) rotateX(10deg) rotateY(-12deg); }
.mod-ico svg { width: 28px; height: 28px; }
.mod .buy-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.mod .buy-row .btn { padding: 11px 10px; }

/* galerie */
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; perspective: 1800px; align-items: center; padding: 10px clamp(0px, 3vw, 60px); }
.gcard { margin: 0; padding: 30px 10px 12px; border-radius: var(--r); background: var(--card); border: 1px solid var(--rule); box-shadow: var(--shadow); position: relative; display: grid; gap: 10px; transition: transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .3s; }
.gcard::before { content: ""; position: absolute; left: 14px; top: 11px; width: 9px; height: 9px; border-radius: 50%; background: #ff5f57; box-shadow: 15px 0 0 #febc2e, 30px 0 0 #28c840; }
.gcard img { border-radius: 9px; border: 1px solid var(--rule); }
.gcard figcaption { font-size: .88rem; color: var(--ink-2); padding: 0 4px; }
.gcard figcaption b { display: block; color: var(--ink); font: 750 1rem/1.3 var(--display); font-stretch: 106%; }
.gallery > .gcard:nth-child(1) { transform: rotateY(14deg) rotateZ(-1deg); }
.gallery > .gcard:nth-child(2) { transform: translateZ(30px); }
.gallery > .gcard:nth-child(3) { transform: rotateY(-14deg) rotateZ(1deg); }
.gallery > .gcard:hover { transform: translateZ(60px); box-shadow: var(--shadow-3d); z-index: 2; }
.try { margin-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 20px; border-radius: var(--r); border: 1px dashed var(--edge-a); background: var(--glass); }
.try p { color: var(--ink-2); font-size: .95rem; }

/* tabel termene */
.ptable { overflow-x: auto; padding: 8px; }
.ptable table { width: 100%; border-collapse: collapse; min-width: 560px; }
.ptable th, .ptable td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.ptable th { font: 600 .72rem/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.ptable tr:last-child td { border-bottom: 0; }
.ptable td:first-child { font-weight: 600; color: var(--ink); }
.ptable td { color: var(--ink-2); }

/* secțiunea închisă */
.sec.dark { background: radial-gradient(700px 300px at 80% 0%, var(--dark-glow), transparent 70%), linear-gradient(160deg, var(--dark-from), var(--dark-to) 70%); color: #f5eeee; overflow: hidden; }
.sec.dark h2, .sec.dark h3 { color: #fff; }
.sec.dark .label { color: var(--dark-accent); border-color: rgba(255, 107, 99, .45); background: rgba(255, 255, 255, .05); }
.sec.dark .tag { background: rgba(255, 255, 255, .06); border-color: rgba(255, 107, 99, .35); color: var(--dark-accent); }
.sec.dark::after { content: ""; position: absolute; inset: auto -10% -40px; height: 60%; transform: perspective(500px) rotateX(64deg); transform-origin: 50% 100%; pointer-events: none;
  background: linear-gradient(rgba(255, 107, 99, .16) 1px, transparent 1px) 0 0 / 48px 48px, linear-gradient(90deg, rgba(255, 107, 99, .16) 1px, transparent 1px) 0 0 / 48px 48px;
  -webkit-mask-image: linear-gradient(to top, #000, transparent); mask-image: linear-gradient(to top, #000, transparent); }
.route { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; position: relative; z-index: 1; counter-reset: etapa; margin-top: 10px; }
.route::before { content: ""; position: absolute; left: 10%; right: 10%; top: 27px; height: 2px; background: linear-gradient(90deg, transparent, #ff5a52, #ff8a80, #ff5a52, transparent); box-shadow: 0 0 14px #ff3b30; }
.route li { counter-increment: etapa; display: grid; gap: 8px; justify-items: center; align-content: start; text-align: center; padding: 0 6px 16px; }
.route li::before { content: counter(etapa); position: relative; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 16px; font: 850 1.3rem/1 var(--display); color: #fff; background: linear-gradient(145deg, #ff5a52, #c41616 55%, #5c0303); box-shadow: 0 0 0 6px rgba(14, 11, 12, .9), 0 0 0 7px rgba(255, 107, 99, .45), 0 16px 30px -10px rgba(255, 59, 48, .7); transform: perspective(200px) rotateX(12deg); }
.route b { font: 750 1.08rem/1.2 var(--display); font-stretch: 108%; color: #fff; }
.route span { color: #cbbcbe; font-size: .9rem; }
.ser { position: relative; z-index: 1; margin-top: 14px; display: grid; grid-template-columns: .85fr 1.15fr; gap: 24px; align-items: center; padding: 22px; border-radius: var(--r); background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 107, 99, .25); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.ser-copy { display: grid; gap: 10px; justify-items: start; }
.ser-copy h3 { font-size: 1.3rem; }
.ser-copy p { color: #cbbcbe; font-size: .95rem; }
.code-art { border-radius: 16px; background: #0b0809; border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 30px 60px -30px #000, 0 0 60px -30px rgba(255, 59, 48, .6); padding: 14px 16px 16px; font: 500 .82rem/1.75 var(--mono); color: #cbbcbe; transform: perspective(900px) rotateY(-6deg) rotateX(3deg); overflow-x: auto; }
.code-art .bar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: #8d7f81; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; }
.code-art .bar i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; box-shadow: 15px 0 0 #febc2e, 30px 0 0 #28c840; margin-right: 34px; }
.code-art .bar em { margin-left: auto; font-style: normal; color: #ff6b63; }
.code-art div { white-space: nowrap; }
.code-art .ok { color: #3ddc84; } .code-art .bad { color: #ff6b63; } .code-art .warn { color: #febc2e; } .code-art .w { color: #fff; }

/* remindere și siguranță */
.sec-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: center; }
.sec-grid > div { display: grid; gap: 14px; justify-items: start; min-width: 0; }
.phone { justify-self: center; width: min(300px, 80%); border-radius: 30px; padding: 10px; background: #121012; box-shadow: var(--shadow-3d); transform: perspective(1200px) rotateY(-14deg) rotateX(5deg); }
.phone img { border-radius: 22px; }
.traps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; }
.trap { padding: 14px 16px; display: grid; gap: 4px; align-content: start; }
.trap b { font-weight: 600; }
.trap span { font-size: .9rem; color: var(--ink-2); }
.iso { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .22)); }
.iso-label { font: 400 12px var(--mono); fill: var(--iso-label); }

/* licențe */
.plans { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.plan { padding: 18px; display: grid; gap: 6px; align-content: start; transition: transform .3s ease; }
.plan:hover { transform: translateY(-4px); }
.plan b { font: 850 1.25rem/1.1 var(--display); font-stretch: 110%; color: var(--head); }
.plan span { font-size: .9rem; color: var(--ink-2); }
.plan.hot { --ink: #f5eeee; --ink-2: #b9aaac; --head: #ffffff; --accent: #ff6b63; --rule: rgba(255, 255, 255, .12); color: var(--ink); background: var(--hot-bg); border-color: var(--hot-line); box-shadow: var(--hot-shadow); }
.price-foot { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 10px; }

/* întrebări */
.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.qa summary { list-style: none; cursor: pointer; padding: 15px 52px 15px 16px; position: relative; font-weight: 600; }
.qa summary::-webkit-details-marker { display: none; }
.qa { --pl: var(--accent); --pb: var(--tint); transition: border-color .2s, box-shadow .2s; }
.qa[open] { --pl: #fff; --pb: var(--solid); border-color: var(--edge-a); box-shadow: var(--shadow), 0 0 50px -30px rgba(255, 40, 30, .8); }
.qa summary::after { content: ""; position: absolute; right: 16px; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 8px;
  background: linear-gradient(var(--pl), var(--pl)) center / 11px 2px no-repeat, linear-gradient(var(--pl), var(--pl)) center / 2px 11px no-repeat, var(--pb); transition: transform .25s ease; }
.qa[open] summary::after { transform: rotate(45deg); }
.qa p { padding: 0 16px 16px; color: var(--ink-2); }

/* contact */
.contact { --ink: #f5eeee; --ink-2: #b9aaac; --head: #ffffff; --accent: #ff6b63; --rule: rgba(255, 255, 255, .12); --ghost: rgba(255, 255, 255, .07); --ghost-ring: rgba(255, 255, 255, .14);
  color: var(--ink); background: linear-gradient(160deg, #1d1416, #0e0b0c 70%); border-color: #0e0b0c; display: grid; grid-template-columns: 1.1fr .9fr; gap: 24px; padding: clamp(22px, 3vw, 36px); align-items: center; overflow: hidden; }
.contact h2 { color: #fff; }
.contact .lead { color: #b9aaac; }
.contact-box { display: grid; gap: 10px; }
.contact-line { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--r-sm); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); color: #fff; text-decoration: none; font: 700 1.1rem/1.3 var(--display); font-stretch: 106%; }
.contact-line:hover { border-color: rgba(255, 107, 99, .55); }
.contact-line small { font: 600 .7rem/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #b9aaac; }
.contact-line .wa-num { display: inline-flex; align-items: center; gap: 8px; color: #3ddc84; }

/* subsol */

/* telefon, tabletă */
@media (max-width: 1080px) {
  .hero-in, .sec-grid, .ser, .contact { grid-template-columns: minmax(0, 1fr); }
  .hero-3d { max-width: 720px; width: 100%; margin-inline: auto; }
  .modules { grid-template-columns: minmax(0, 1fr); max-width: 680px; margin-inline: auto; }
  .gallery { grid-template-columns: minmax(0, 1fr); max-width: 680px; margin-inline: auto; padding: 0; }
  .gallery > .gcard:nth-child(n) { transform: none; }
  .route { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .route::before { display: none; }
  .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nav { display: none; position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; align-items: stretch; padding: 10px 16px 16px; background: var(--hdr); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--rule); }
  .nav.open { display: flex; }
  .nav a { padding: 12px 10px; font-size: 1rem; }
  .menu-btn { display: block; }
  .top-cta { margin-left: auto; display: flex; gap: 8px; align-items: center; }
}
@media (max-width: 720px) {
  .top-in { height: 58px; gap: 10px; }
  .nav { top: 58px; }
  .top .btn { display: none; }
  .hero h1 { font-size: 2rem; font-stretch: 104%; }
  .cta-row .btn { flex: 1 1 100%; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats b { font-size: 1.35rem; }
  .scene { transform: rotateY(-14deg) rotateX(8deg); }
  .layer { width: 80%; }
  .l-back { right: 0; transform: translateZ(-60px); } .l-mid { right: 8%; } .l-front { left: 2%; transform: translateZ(25px); }
  .float { padding: 7px 9px; transform: translateZ(50px); }
  .float b { font-size: .85rem; } .float span { font-size: .66rem; }
  .f1 { left: 0; top: -2%; } .f2 { right: 0; } .f3 { left: 8%; bottom: -4%; }
  .route { grid-template-columns: minmax(0, 1fr); }
  .route li { grid-template-columns: 56px minmax(0, 1fr); justify-items: start; text-align: left; column-gap: 14px; row-gap: 2px; padding: 0; }
  .route li::before { grid-row: span 2; }
  .traps, .faq { grid-template-columns: minmax(0, 1fr); }
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .try { flex-direction: column; align-items: stretch; text-align: center; }
  .mod .buy-row { grid-template-columns: minmax(0, 1fr); }
  .code-art { transform: none; font-size: .74rem; }
  .phone { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .float { animation: none; }
  .scene, .gcard, .mod, .plan, .btn { transition: none; }
}

.on-dark-link { color: #ff8a80; }
.term-sep { margin-top: 6px; border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 6px; }
.sec-head.flush { margin: 0; }
.sprite { position: absolute; }

/* aspectul comun, ca pe migrare.rdndata.ro */

/* Culorile, ca pe remote.rdndata.ro (fut.css): luminoasă alb-gri neutru, cu roșul doar ca accent, sau întunecată, negru cald cu strălucire roșie.
   Tema urmează browserul. Cardurile „hot” și contactul sunt închise la culoare în ambele teme. */
:root {
  --paper: #f4f4f5;
  --paper-2: #ffffff;
  --sheet: #ffffff;
  --card: #ffffff;
  --blur: none;
  --glass: rgba(255, 255, 255, .85);
  --float: rgba(255, 255, 255, .92);
  --tint: rgba(0, 0, 0, .045);
  --ink: #121012;
  --ink-2: #4a4548;
  --rule: rgba(0, 0, 0, .09);
  --accent: #b80d0d;
  --neon: #ff3b30;
  --btn: #b80d0d;
  --head: #121012;
  --solid: #121012;
  --grad: linear-gradient(92deg, #121012 5%, #3a0a0c 45%, #b80d0d 100%);
  --ghost: #ffffff;
  --ghost-ring: rgba(0, 0, 0, .14);
  --nc-bg: #121012;
  --nc-line: #121012;
  --glow: rgba(0, 0, 0, .035);
  --hdr: rgba(255, 255, 255, .85);
  --edge-a: rgba(0, 0, 0, .22);
  --grid: rgba(0, 0, 0, .1);
  --orb-1: rgba(0, 0, 0, .06);
  --orb-2: rgba(0, 0, 0, .04);
  --sky-1: rgba(0, 0, 0, .06);
  --sky-2: rgba(0, 0, 0, .04);
  --dot: rgba(0, 0, 0, .22);
  --drop: rgba(0, 0, 0, .22);
  --shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 18px 40px -26px rgba(0, 0, 0, .35);
  --shadow-3d: 0 0 0 1px rgba(0, 0, 0, .1), 0 50px 90px -40px rgba(0, 0, 0, .55);
  --hot-bg: linear-gradient(160deg, #1d1416, #0e0b0c 70%);
  --hot-line: #0e0b0c;
  --hot-shadow: 0 40px 70px -40px rgba(0, 0, 0, .7);
  --contact-bg: linear-gradient(160deg, #1d1416, #0e0b0c 70%);
  --contact-line: #0e0b0c;
  --dark-from: #1d1416;
  --dark-to: #0e0b0c;
  --dark-glow: rgba(184, 13, 13, .22);
  --dark-accent: #ff6b63;
  --ok: #1d7a46;
  --iso-top-a: #ffffff; --iso-top-b: #ececee;
  --iso-l-a: #dcdadc; --iso-l-b: #c3c0c3;
  --iso-r-a: #efeef0; --iso-r-b: #d8d6d8;
  --iso-slot: #a9a4a7; --iso-grid: rgba(0, 0, 0, .12); --iso-ring: rgba(255, 255, 255, .85); --iso-label: #4a4548;
  --r: 20px;
  --r-sm: 12px;
  /* spațiile, la fel în toată pagina: --gap între carduri și blocuri (și de la titlu la conținut), --gap-in între plăcuțele
     dintr-un card, --gap-2 între cele două coloane, --sec sus și jos în fiecare secțiune, --pad și --pad-sm în carduri și plăcuțe */
  --gap: 14px;
  --gap-in: 10px;
  --gap-2: 24px;
  --sec: 28px;
  --pad: 20px;
  --pad-sm: 14px;
  --display: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --body: "IBM Plex Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #0a0708;
    --paper-2: #120c0d;
    --sheet: #161112;
    --card: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
    --blur: blur(14px);
    --glass: rgba(255, 255, 255, .045);
    --float: rgba(20, 12, 13, .72);
    --tint: rgba(255, 255, 255, .06);
    --ink: #f5eeee;
    --ink-2: #b9aaac;
    --rule: rgba(255, 255, 255, .1);
    --accent: #ff6b63;
    --head: #ffffff;
    --solid: #ff3b30;
    --grad: linear-gradient(92deg, #ffffff 10%, #ff6b63 60%, #ff3b30 100%);
    --ghost: rgba(255, 255, 255, .07);
    --ghost-ring: rgba(255, 255, 255, .1);
    --nc-bg: transparent;
    --nc-line: rgba(255, 120, 110, .28);
    --glow: rgba(184, 13, 13, .2);
    --hdr: rgba(18, 12, 13, .6);
    --edge-a: rgba(255, 120, 110, .28);
    --grid: rgba(255, 59, 48, .2);
    --orb-1: rgba(255, 59, 48, .22);
    --orb-2: rgba(184, 13, 13, .2);
    --sky-1: rgba(184, 13, 13, .32);
    --sky-2: rgba(92, 3, 3, .45);
    --dot: rgba(255, 255, 255, .5);
    --drop: rgba(255, 30, 20, .3);
    --shadow: 0 20px 50px -34px rgba(0, 0, 0, .9);
    --shadow-3d: 0 0 0 1px rgba(255, 255, 255, .12), 0 50px 90px -30px #000, 0 0 80px -20px rgba(255, 40, 30, .55);
    --hot-bg: linear-gradient(160deg, rgba(184, 13, 13, .28), rgba(92, 3, 3, .18) 40%, rgba(255, 255, 255, .02));
    --hot-line: rgba(255, 90, 80, .45);
    --hot-shadow: 0 0 80px -30px rgba(255, 40, 30, .7);
    --contact-bg: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
    --contact-line: rgba(255, 255, 255, .1);
    --dark-from: #5c0303;
    --dark-to: #0a0708;
    --dark-glow: rgba(255, 90, 82, .25);
    --ok: #3ddc84;
    --iso-top-a: #2e2627; --iso-top-b: #1f191a;
    --iso-l-a: #181314; --iso-l-b: #0f0b0c;
    --iso-r-a: #231c1d; --iso-r-b: #151011;
    --iso-slot: #3f3335; --iso-grid: rgba(255, 59, 48, .2); --iso-ring: rgba(22, 17, 18, .9); --iso-label: #b9aaac;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.6 var(--body); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
/* fundalul, ca .sky pe remote.rdndata.ro: strălucire și puncte, fix în spatele paginii */
body::before, body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; }
body::before { background: radial-gradient(1200px 700px at 80% -10%, var(--sky-1), transparent 60%), radial-gradient(900px 600px at -10% 40%, var(--sky-2), transparent 60%), var(--paper); }
body::after { opacity: .35; background-image: radial-gradient(var(--dot) 1px, transparent 1.4px); background-size: 46px 46px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); mask-image: linear-gradient(180deg, #000, transparent 70%); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); }
h1, h2, h3 { font-family: var(--display); color: var(--ink); margin: 0; line-height: 1.08; letter-spacing: -0.015em; }
h2 { font-size: clamp(1.55rem, 2.9vw, 2.35rem); font-weight: 800; font-stretch: 108%; }
h3 { font-size: 1.12rem; font-weight: 750; font-stretch: 104%; line-height: 1.25; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
.wrap { width: min(1500px, 100% - 2 * clamp(20px, 5vw, 160px)); margin-inline: auto; } /* cel mult 1500px, cu spațiu egal în stânga și în dreapta (5% din ecran pe laptop) */
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 100; background: var(--sheet); padding: 8px 12px; border-radius: 8px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
section[id], #limite, #antivirus { scroll-margin-top: 72px; }

/* butoane */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; border-radius: 12px; border: 0; font: 650 .95rem/1.1 var(--body); text-decoration: none; color: #fff; cursor: pointer; white-space: nowrap;
  background: linear-gradient(135deg, #e0161e, #8f0606); box-shadow: 0 0 0 1px rgba(255, 90, 80, .45) inset, 0 14px 40px -12px rgba(255, 40, 30, .7); transition: transform .15s ease, box-shadow .2s ease; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255, 120, 110, .7) inset, 0 18px 50px -12px rgba(255, 40, 30, .9); }
.btn.ghost { background: var(--ghost); color: var(--ink); box-shadow: 0 0 0 1px var(--ghost-ring) inset; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.btn.ghost:hover { color: var(--ink); box-shadow: 0 0 0 1px var(--edge-a) inset, 0 10px 30px -14px rgba(255, 40, 30, .6); }
.btn.wa { background: linear-gradient(135deg, #25c062, #168a42); box-shadow: 0 0 0 1px rgba(120, 230, 160, .35) inset, 0 12px 30px -12px rgba(26, 154, 75, .8); }
.btn.wa:hover { box-shadow: 0 0 0 1px rgba(120, 230, 160, .6) inset, 0 16px 40px -12px rgba(26, 154, 75, .9); }
.wa-ico { width: 1.15em; height: 1.15em; flex: none; }

/* antet */
.top { position: sticky; top: 0; z-index: 40; background: var(--hdr); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--rule); }
.top-in { display: flex; align-items: center; gap: 18px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); flex: none; }
.brand-logo { width: 46px; height: auto; background: #fff; border-radius: 50%; padding: 7px 5px; box-shadow: 0 0 0 1px var(--rule), 0 6px 16px -8px rgba(184, 13, 13, .6); }
.brand-text { display: grid; line-height: 1.1; }
.brand-text b { font: 800 .95rem/1.1 var(--display); font-stretch: 118%; letter-spacing: .04em; }
.brand-text span { font: 500 .7rem/1.3 var(--mono); color: var(--ink-2); }
.nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav a { color: var(--ink-2); text-decoration: none; font: 550 .88rem/1 var(--body); padding: 9px 10px; border-radius: 9px; white-space: nowrap; }
.nav a:hover { color: var(--ink); background: var(--tint); }
.nav .nav-client { color: #fff; background: var(--nc-bg); border: 1px solid var(--nc-line); margin-left: 6px; }
.nav .nav-client:hover { color: #fff; background: var(--nc-bg); border-color: var(--accent); }
.top-cta { display: flex; align-items: center; gap: 8px; }
.lang { font: 700 .78rem/1 var(--mono); color: var(--ink-2); text-decoration: none; border: 1px solid var(--rule); border-radius: 8px; padding: 8px 9px; }
.lang:hover { color: var(--accent); border-color: var(--accent); }
.top .btn { padding: 9px 14px; font-size: .88rem; }
.top.scrolled { box-shadow: 0 8px 24px -16px rgba(0, 0, 0, .45); }
.menu-btn { display: none; width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--rule); background: var(--sheet); cursor: pointer; position: relative; }
.menu-btn span, .menu-btn span::before, .menu-btn span::after { position: absolute; left: 11px; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; content: ""; transition: transform .25s ease; }
.menu-btn span { top: 20px; }
.menu-btn span::before { left: 0; top: -6px; }
.menu-btn span::after { left: 0; top: 6px; }
.menu-btn[aria-expanded="true"] span { background: transparent; }
.menu-btn[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

/* etichete: „label” e pastila de deasupra titlurilor, „tag” eticheta din carduri */
.label { justify-self: start; display: inline-flex; align-items: center; gap: 8px; font: 600 .74rem/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); padding: 7px 11px; border-radius: 999px; border: 1px solid var(--edge-a); background: var(--glass); }
.label::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(255, 59, 48, .18), 0 0 12px #ff3b30; }
.tag, .trap > .label { justify-self: start; display: inline-block; font: 600 .7rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); background: var(--tint); border: 1px solid var(--rule); padding: 6px 9px; border-radius: 7px; box-shadow: none; }
.trap > .label::before { display: none; }
.lead { color: var(--ink-2); font-size: 1.04rem; max-width: 64ch; }
.note { color: var(--ink-2); font-size: .88rem; margin-top: var(--gap); }

/* bife desenate din CSS (fără imagini, pentru CSP) */
.mod ul, .plan ul, .checks, .chips { list-style: none; }
.mod li, .plan li, .checks li, .chips li { position: relative; padding-left: 26px; }
.mod li::before, .plan li::before, .checks li::before, .chips li::before { content: ""; position: absolute; left: 5px; top: .3em; width: 6px; height: 11px; border: solid var(--ok); border-width: 0 2.2px 2.2px 0; transform: rotate(45deg); }

/* primul ecran */
.hero { position: relative; overflow: hidden; padding: var(--sec) 0; isolation: isolate; }
.hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.orb { position: absolute; border-radius: 50%; filter: blur(60px); }
.o1 { width: 560px; height: 560px; right: -120px; top: -160px; background: radial-gradient(circle, var(--orb-1), transparent 65%); }
.o2 { width: 480px; height: 480px; left: -180px; top: 120px; background: radial-gradient(circle, var(--orb-2), transparent 65%); }
.floor { position: absolute; left: -20%; right: -20%; bottom: -10px; height: 58%; transform-origin: 50% 100%; transform: perspective(520px) rotateX(64deg);
  background: linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 56px 56px, linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 56px 56px;
  -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 85%); mask-image: linear-gradient(to top, #000 10%, transparent 85%); animation: floor 6s linear infinite; }
@keyframes floor { to { background-position: 0 56px, 0 0; } }
.hero-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: var(--gap-2); align-items: center; }
.hero-copy { display: grid; gap: 18px; justify-items: start; }
.hero h1 { font-size: clamp(2rem, 3.7vw, 3.1rem); font-weight: 850; font-stretch: 106%; letter-spacing: -0.025em; }
.hero h1 em { font-style: normal; display: block; width: fit-content; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cta-row .btn { padding: 14px 22px; font-size: 1rem; border-radius: 14px; }
.link-demo { font-weight: 650; text-decoration: none; padding: 8px 4px; }
.link-demo:hover { text-decoration: underline; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { font-size: .86rem; color: var(--ink-2); background: var(--glass); border: 1px solid var(--rule); padding: 6px 11px 6px 28px; border-radius: 999px; }
.chips li::before { left: 12px; top: .62em; height: 10px; width: 5px; }
.hero .note { margin: 0; }

/* scena 3D iese cu ~9% spre dreapta: spațiul e lăsat în padding, ca laturile paginii să rămână egale */
.hero-3d { perspective: 1500px; perspective-origin: 30% 40%; width: 100%; max-width: 980px; justify-self: center; padding-right: 9%; padding-bottom: 8%; } /* jos: eticheta „36,4 MB/s” atârnă sub scenă și nu trebuie să atingă cifrele de dedesubt */
.scene { position: relative; aspect-ratio: 1.22; transform-style: preserve-3d; transform: rotateY(-20deg) rotateX(9deg) rotateZ(1.5deg); transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.layer { position: absolute; width: 78%; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-3d); border: 1px solid var(--rule); background: var(--sheet); }
.layer img { width: 100%; }
.l-back { right: -4%; top: 0; transform: translateZ(-140px); opacity: .9; }
.l-mid { right: 6%; top: 19%; transform: translateZ(-50px); }
.l-front { left: 0; top: 40%; transform: translateZ(70px); }
.float { position: absolute; display: grid; gap: 1px; padding: 10px 13px; border-radius: 13px; background: var(--float); border: 1px solid var(--rule); box-shadow: var(--shadow); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transform: translateZ(150px); animation: bob 5s ease-in-out infinite; }
.float b { font: 800 1.02rem/1.15 var(--display); font-stretch: 110%; color: var(--accent); }
.float span { font: 500 .72rem/1.3 var(--mono); color: var(--ink-2); }
.f1 { left: -3%; top: 8%; }
.f2 { right: -2%; top: 52%; animation-delay: -1.6s; }
.f3 { left: 30%; bottom: -6%; animation-delay: -3.1s; }
@keyframes bob { 50% { translate: 0 -8px; } }

.stats { list-style: none; margin-top: var(--gap-2); display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.stats li { display: grid; gap: 2px; padding: var(--pad-sm); border-radius: var(--r-sm); background: var(--glass); border: 1px solid var(--rule); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.stats b { justify-self: start; font: 850 1.65rem/1.05 var(--display); font-stretch: 115%; background: linear-gradient(92deg, var(--ink), var(--neon)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stats span { font-size: .84rem; color: var(--ink-2); }

/* secțiuni și carduri */
.sec { padding: var(--sec) 0; position: relative; }
.sec-head { display: grid; gap: 12px; justify-items: start; margin-bottom: var(--gap); }
.sec-head.center { justify-items: center; text-align: center; }
.sec-head.center .label { justify-self: center; }
.sec-head.center .lead { margin-inline: auto; }
.mod, .plan, .trap, .price-wrap, .code-info, .specs-box, .limits, .qa, .contact {
  position: relative; border: 1px solid var(--rule); border-radius: var(--r); box-shadow: var(--shadow); background: var(--card); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
/* cardurile evidențiate și contactul: închise la culoare, ca .plan.pro pe remote */
.mod.hot, .plan.hot, .contact { --ink: #f5eeee; --ink-2: #b9aaac; --head: #ffffff; --accent: #ff6b63; --tint: rgba(255, 255, 255, .06); --rule: rgba(255, 255, 255, .12); --glass: rgba(255, 255, 255, .05);
  --ghost: rgba(255, 255, 255, .07); --ghost-ring: rgba(255, 255, 255, .14); --edge-a: rgba(255, 107, 99, .45); --ok: #3ddc84; color: var(--ink); }
.modules, .plans, .traps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }

.mod { padding: var(--pad); display: grid; gap: 12px; align-content: start; transition: transform .3s ease, box-shadow .3s ease; }
.mod:hover, .plan:hover, .trap:hover { transform: translateY(-4px); }
.mod.hot, .plan.hot { background: var(--hot-bg); border-color: var(--hot-line); box-shadow: var(--hot-shadow); }
.mod-ico { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: radial-gradient(circle at 30% 25%, #ff6b63, #b80d0d 55%, #5c0303); box-shadow: 0 12px 30px -10px rgba(255, 40, 30, .8), 0 0 0 1px rgba(255, 255, 255, .15) inset; transform: perspective(200px) rotateX(10deg) rotateY(-12deg); }
.mod-ico svg { width: 30px; height: 30px; }
.mod > p { color: var(--ink-2); font-size: .95rem; }
.mod ul, .plan ul { display: grid; gap: 6px; }
.mod li, .plan li { font-size: .93rem; line-height: 1.45; }
.mod-price { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--tint); border: 1px solid var(--rule); font-size: .78rem; color: var(--ink-2); }
.mod-price b { font: 850 1.7rem/1.1 var(--display); font-stretch: 112%; color: var(--head); }
.mod-price small { font-size: .78rem; }
.buy-row { display: flex; gap: 8px; flex-wrap: wrap; }
.buy-row .btn { flex: 1; }

/* galeria cu capturi din aplicație */
.showcase { background: radial-gradient(900px 380px at 50% 0%, var(--glow), transparent 70%); }
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); perspective: 1800px; align-items: center; padding: 10px clamp(12px, 4.5%, 120px); } /* cardurile rotite nu ies din conținut */
.gcard { margin: 0; padding: 30px 10px 12px; border-radius: var(--r); background: var(--card); border: 1px solid var(--rule); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--shadow); position: relative; display: grid; gap: 10px; transition: transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .3s; }
.gcard::before { content: ""; position: absolute; left: 14px; top: 11px; width: 9px; height: 9px; border-radius: 50%; background: #ff5f57; box-shadow: 15px 0 0 #febc2e, 30px 0 0 #28c840; }
.gcard img { border-radius: 9px; border: 1px solid var(--rule); }
.gcard figcaption { font-size: .88rem; color: var(--ink-2); padding: 0 4px; }
.gcard figcaption b { display: block; color: var(--ink); font: 750 1rem/1.3 var(--display); font-stretch: 106%; }
.g-l { transform: rotateY(16deg) translateZ(-20px); transform-origin: right center; }
.g-c { transform: translateZ(40px); box-shadow: var(--shadow-3d); z-index: 1; }
.g-r { transform: rotateY(-16deg) translateZ(-20px); transform-origin: left center; }
.gallery > .gcard:hover { transform: translateZ(60px); box-shadow: var(--shadow-3d); z-index: 2; }
.try { margin-top: var(--gap); display: flex; align-items: center; justify-content: space-between; gap: var(--gap); padding: var(--pad-sm) var(--pad); border-radius: var(--r); border: 1px dashed var(--edge-a); background: var(--glass); }
.try p { color: var(--ink-2); font-size: .95rem; }

/* prețuri */
.price-wrap { padding: 8px; overflow: hidden; }
.ptable { width: 100%; border-collapse: separate; border-spacing: 0; }
.ptable th, .ptable td { text-align: left; vertical-align: top; padding: 14px 16px; border-bottom: 1px solid var(--rule); }
.ptable thead th { font: 750 1rem/1.25 var(--display); font-stretch: 106%; background: var(--tint); }
.ptable thead th:first-child { border-top-left-radius: 12px; }
.ptable thead th:last-child { border-top-right-radius: 12px; }
.ptable thead small, .ptable td small { display: block; font: 400 .8rem/1.4 var(--body); color: var(--ink-2); margin-top: 3px; }
.ptable tbody th { font: 700 .98rem/1.3 var(--body); width: 30%; }
.ptable td b { font: 850 1.55rem/1.1 var(--display); font-stretch: 112%; color: var(--head); }
.ptable tr.inc td, .ptable tr.inc th { font-size: .9rem; color: var(--ink-2); }
.ptable tr.inc th { color: var(--ink); }
.cell-btn { display: inline-block; margin-top: 8px; font: 650 .82rem/1 var(--body); color: #fff; background: linear-gradient(135deg, #e0161e, #8f0606); padding: 8px 12px; border-radius: 9px; text-decoration: none; }
.cell-btn.ghost { background: transparent; color: var(--accent); border: 1px solid var(--edge-a); }
.cell-btn:hover { filter: brightness(1.1); }
.price-foot { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px 8px 8px; }

/* pe cont propriu */
.plan { padding: var(--pad); display: grid; gap: 12px; align-content: start; transition: transform .3s ease; }
.price { font: 850 2.3rem/1 var(--display); font-stretch: 115%; color: var(--head); display: grid; gap: 4px; }
.price small { font: 400 .82rem/1.3 var(--body); color: var(--ink-2); }
.plan .btn { margin-top: 4px; }
.howto { list-style: none; margin-top: var(--gap); display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); counter-reset: pas; }
.howto li { counter-increment: pas; display: grid; gap: 6px; align-content: start; padding: var(--pad-sm); border-radius: var(--r-sm); background: var(--tint); border: 1px solid var(--rule); }
.howto li::before { content: "0" counter(pas); font: 700 .78rem/1 var(--mono); color: var(--accent); letter-spacing: .1em; }
.howto b { font: 750 1.02rem/1.25 var(--display); font-stretch: 106%; }
.howto span { color: var(--ink-2); font-size: .9rem; }
.code-info { margin-top: var(--gap); padding: var(--pad); display: grid; grid-template-columns: .9fr 1.1fr; gap: var(--gap-2); align-items: center; }
.code-art { perspective: 1200px; max-width: 460px; width: 100%; justify-self: center; }
.code-art img { border-radius: 12px; border: 1px solid var(--rule); box-shadow: var(--shadow-3d); transform: rotateY(14deg) rotateX(4deg); }
.code-body h3 { font-size: 1.35rem; margin-bottom: 12px; }
.code-rules { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-in); }
.code-rules li { display: grid; gap: 3px; padding: var(--pad-sm); border-radius: var(--r-sm); border: 1px solid var(--rule); background: var(--paper); }
.code-rules b { font-size: .95rem; }
.code-rules span { color: var(--ink-2); font-size: .86rem; line-height: 1.45; }
.code-cta { display: flex; align-items: center; gap: 14px; margin-top: 14px; flex-wrap: wrap; }
.code-cta p { font-weight: 600; }

/* „Cum decurge”: secțiunea întunecată, la fel în ambele teme */
.sec.dark { background: radial-gradient(700px 300px at 80% 0%, var(--dark-glow), transparent 70%), linear-gradient(160deg, var(--dark-from), var(--dark-to) 70%); color: #f5eeee; overflow: hidden; }
.sec.dark h2, .sec.dark h3 { color: #fff; }
.sec.dark .label { color: var(--dark-accent); border-color: rgba(255, 107, 99, .45); background: rgba(255, 255, 255, .05); }
.sec.dark .tag { background: rgba(255, 255, 255, .06); border-color: rgba(255, 107, 99, .35); color: var(--dark-accent); }
.sec.dark::after { content: ""; position: absolute; inset: auto -10% -40px; height: 60%; transform: perspective(500px) rotateX(64deg); transform-origin: 50% 100%; pointer-events: none;
  background: linear-gradient(rgba(255, 107, 99, .16) 1px, transparent 1px) 0 0 / 48px 48px, linear-gradient(90deg, rgba(255, 107, 99, .16) 1px, transparent 1px) 0 0 / 48px 48px;
  -webkit-mask-image: linear-gradient(to top, #000, transparent); mask-image: linear-gradient(to top, #000, transparent); }
.route { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--gap); position: relative; z-index: 1; counter-reset: etapa; }
.route::before { content: ""; position: absolute; left: 10%; right: 10%; top: 27px; height: 2px; background: linear-gradient(90deg, transparent, #ff5a52, #ff8a80, #ff5a52, transparent); box-shadow: 0 0 14px #ff3b30; }
.route li { counter-increment: etapa; display: grid; gap: 8px; justify-items: center; text-align: center; padding: 0 6px 16px; }
.route li::before { content: counter(etapa); position: relative; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 16px; font: 850 1.3rem/1 var(--display); color: #fff; background: linear-gradient(145deg, #ff5a52, #c41616 55%, #5c0303); box-shadow: 0 0 0 6px rgba(14, 11, 12, .9), 0 0 0 7px rgba(255, 107, 99, .45), 0 16px 30px -10px rgba(255, 59, 48, .7); transform: perspective(200px) rotateX(12deg); }
.route b { font: 750 1.08rem/1.2 var(--display); font-stretch: 108%; color: #fff; }
.route span { color: #cbbcbe; font-size: .9rem; }

/* exemplul de serializare */
.ser { position: relative; z-index: 1; margin-top: var(--gap); display: grid; grid-template-columns: .85fr 1.15fr; gap: var(--gap-2); align-items: center; padding: var(--pad); border-radius: var(--r); background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 107, 99, .25); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.ser-copy { display: grid; gap: 10px; justify-items: start; }
.ser-copy h3 { font-size: 1.3rem; }
.ser-copy p { color: #cbbcbe; font-size: .95rem; }
.demo { margin: 0 2.5% 0 0; display: grid; gap: 12px; padding: 16px; border-radius: 14px; background: #090707; border: 1px solid #3a2b2e; color: #f1e6e7; font: 400 .9rem/1.55 var(--mono); box-shadow: 0 30px 60px -30px rgba(255, 59, 48, .55), 0 0 0 1px rgba(255, 107, 99, .08); transform: perspective(1200px) rotateY(-8deg) rotateX(4deg); }
.demo-head { display: flex; align-items: center; gap: 12px; color: #a08f92; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; }
.demo-head > span:last-child { margin-left: auto; color: #ff8a80; }
.dots { display: inline-flex; gap: 6px; }
.dots i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.dots i:nth-child(2) { background: #febc2e; }
.dots i:nth-child(3) { background: #28c840; }
.demo-row { display: grid; gap: 4px; }
.demo-row small { color: #a08f92; font-size: .75rem; }
.demo code { display: block; white-space: pre-wrap; overflow-wrap: anywhere; padding: 12px 14px; background: rgba(255, 255, 255, .04); border-radius: 10px; font: inherit; }
.demo code .nb { white-space: nowrap; }
.len, .val { color: #ff8a80; }
.len { font-weight: 600; }
.len.new, .val.new { color: #7fd6a1; }
.demo-foot { border-top: 1px solid #3a2b2e; padding-top: 12px; display: flex; flex-wrap: wrap; gap: 8px 18px; color: #a08f92; font-size: .8rem; }
.demo-foot b { color: #7fd6a1; font-weight: 500; }
.demo-foot b.bad { color: #ff8a80; }
.swap { transition: opacity .35s ease; }
.swap.fade { opacity: .15; }

/* capcane WooCommerce */
.trap { padding: var(--pad); display: grid; gap: 10px; align-content: start; transition: transform .3s ease; }
.trap > div { display: grid; gap: 8px; }
.trap p { color: var(--ink-2); font-size: .92rem; }

/* siguranță */
.sec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-2); align-items: center; }
.checks { display: grid; gap: 8px; }
.checks li { font-size: 1rem; line-height: 1.5; }
.iso { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 30px 40px var(--drop)); }
.iso-label { font: 400 12px var(--mono); fill: var(--iso-label); }
.flow { animation: flow 1.2s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -32; } }
.packets circle { animation: blink 1.6s ease-in-out infinite; }
.packets circle:nth-child(2) { animation-delay: .4s; }
.packets circle:nth-child(3) { animation-delay: .8s; }
@keyframes blink { 50% { opacity: .2; } }
.specs-box { margin-top: var(--gap); padding: var(--pad); }
.specs, .specs tbody { display: block; }
.specs tbody { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-in); }
.specs tr { display: grid; align-content: start; gap: 5px; padding: var(--pad-sm); border-radius: var(--r-sm); background: var(--tint); border: 1px solid var(--rule); }
.specs th { text-align: left; font: 600 .72rem/1.2 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--accent); }
.specs td { font-size: .92rem; font-weight: 550; }
#limite { margin-top: var(--gap); }
.limits { padding: var(--pad); display: grid; gap: 8px; justify-items: start; }
.limits > .label::before { display: none; }
.limits > .label { border-radius: 7px; padding: 6px 9px; font-size: .7rem; letter-spacing: .08em; }
.limits ul { padding-left: 20px; color: var(--ink-2); display: grid; gap: 2px; }
.limits p { color: var(--ink-2); }

/* întrebări */
.faq { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: start; }
.qa summary { list-style: none; cursor: pointer; padding: 15px 46px 15px 16px; position: relative; }
.qa summary::-webkit-details-marker { display: none; }
.qa { --pl: var(--accent); --pb: var(--tint); transition: border-color .2s, box-shadow .2s; }
.qa[open] { --pl: #fff; --pb: var(--solid); border-color: var(--edge-a); box-shadow: var(--shadow), 0 0 50px -30px rgba(255, 40, 30, .8); }
.qa summary::after { content: ""; position: absolute; right: 16px; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 8px;
  background: linear-gradient(var(--pl), var(--pl)) center / 11px 2px no-repeat, linear-gradient(var(--pl), var(--pl)) center / 2px 11px no-repeat, var(--pb); transition: transform .25s ease; }
.qa[open] summary::after { transform: rotate(45deg); }
.qa h3 { font: 600 .98rem/1.35 var(--body); }
.qa p { padding: 0 16px 16px; color: var(--ink-2); font-size: .93rem; }

/* contact */
.contact { padding: var(--pad); display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--gap-2); align-items: center; overflow: hidden; background: var(--contact-bg); border-color: var(--contact-line); }
.contact::before { content: ""; position: absolute; left: -10%; bottom: -60%; width: 60%; height: 120%; background: radial-gradient(circle, rgba(184, 13, 13, .25), transparent 65%); pointer-events: none; }
.contact .sec-head { margin: 0; }
.contact-box { display: grid; gap: var(--gap-in); position: relative; }
.contact-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 14px; text-decoration: none; color: var(--ink); background: var(--glass); border: 1px solid var(--rule); font: 750 1.05rem/1.2 var(--display); font-stretch: 106%; transition: border-color .2s, transform .2s; }
.contact-line:hover { border-color: var(--edge-a); transform: translateX(4px); }
.contact-line .label { border: 0; background: none; padding: 0; color: var(--ink-2); font-size: .72rem; }
.contact-line .label::before { display: none; }
.wa-num { display: inline-flex; align-items: center; gap: 8px; }
.wa-num .wa-ico { color: #1faa55; }

/* butoanele plutitoare: WhatsApp în stânga, sigla „înapoi sus” în dreapta */
.wa-float { position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 50; display: inline-flex; align-items: center; gap: 6px; background: #1faa55; color: #fff; text-decoration: none; font: 700 .8rem/1 var(--body); padding: 9px 13px; border-radius: 999px; box-shadow: 0 6px 16px rgba(0, 0, 0, .22); }
.wa-float .wa-ico { width: 17px; height: 17px; }
.wa-float:hover { filter: brightness(1.08); }
.wa-float { transition: opacity .25s ease, transform .25s ease; }
.to-top { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 50; width: 46px; height: 46px; border-radius: 50%; background: #fff; border: 2px solid var(--btn); display: grid; place-items: center; box-shadow: 0 6px 18px rgba(60, 6, 6, .35); transition: opacity .25s ease, transform .25s ease; }
.to-top img { width: 32px; height: auto; }
.to-top:hover { transform: translateY(-3px); }
.to-top.off { opacity: 0; transform: translateY(12px); pointer-events: none; }
/* cât timp bara de jos a subsolului e pe ecran, butoanele plutitoare se ascund, ca să nu acopere textul (bara nu mai are spațiu gol pentru ele) */
body.at-foot .wa-float, body.at-foot .to-top { opacity: 0; transform: translateY(12px); pointer-events: none; }

/* subsolul, ca pe remote.rdndata.ro (footer.css): culori fixe, la fel în ambele teme; meniul RDN Network Data, sediile și contactul, insignele, apoi bara de jos */
.legal { color-scheme: light; font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: #2b2326; }
.legal a { color: inherit; text-decoration: none; }
.legal a:hover { text-decoration: underline; }
/* antetul și subsolul ocupă toată lățimea ecranului (20px pe margini); cardurile dintre ele rămân în .wrap, la cel mult 1500px */
.top .wrap, .legal .wrap { width: auto; max-width: none; margin: 0; padding-inline: 20px; }
.ft-top { background: #f5f5f6; border-top: 1px solid #e7e3e4; color: #2b2326; padding-bottom: 14px; }
.ft-menu { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 12px 0 10px; border-bottom: 1px solid #e3dfe0; font-size: 15px; }
.ft-menu::after { content: ""; flex: 1 1 auto; } /* ultimul rând, dacă meniul se rupe, rămâne aliniat la stânga */
.ft-info { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 12px 0 14px; }
.ft-contacts { display: flex; flex-wrap: wrap; gap: 10px 28px; flex: 1 1 auto; }
.ft-item { display: flex; gap: 8px; align-items: flex-start; min-width: 0; }
.ft-item svg { width: 13px; height: 13px; flex: none; margin-top: 3px; color: #d32030; }
.ft-item > div { display: grid; }
.ft-label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #6b5f63; line-height: 1.3; }
.ft-value { font-size: 15px; color: #1d0a0d; line-height: 1.35; white-space: nowrap; }
.ft-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.badges { display: flex; gap: 10px; flex-wrap: wrap; }
.lbadge { display: flex; align-items: stretch; width: 205px; min-height: 52px; border-radius: 6px; overflow: hidden; text-decoration: none; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.legal .lbadge:hover { text-decoration: none; box-shadow: 0 2px 8px rgba(0, 0, 0, .15); }
.lb-side { flex: 0 0 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: #1f3c8f; color: #fff; font: 700 10px/1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
.lb-side svg { width: 24px; height: 16px; }
.lb-main { display: flex; flex-direction: column; justify-content: center; text-align: center; padding: 5px 8px; flex: 1; }
.lb-main b { color: #3b2fa8; font: 700 10px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; text-transform: uppercase; }
.ft-fb { display: inline-flex; align-items: center; gap: 8px; padding: 0 20px; height: 38px; border-radius: 999px; background: #b3121f; color: #fff !important; font-weight: 700; font-size: 15px; }
.legal .ft-fb:hover { background: #8f0e19; text-decoration: none; }
.ft-fb svg { width: 16px; height: 16px; }
.disclaimer { padding: 12px 14px; border-left: 3px solid #d32030; background: #fff; border-radius: 0 8px 8px 0; color: #4a3f42; font-size: 13.5px; line-height: 1.55; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.disclaimer b { color: #1d0a0d; }
.ft-bottom { background: #170809; color: #b9aeb0; font-size: 12.5px; padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px)); }
.ft-bottom .clock { margin: 0; text-align: center; padding: 8px 16px; border-bottom: 1px solid #2b1b1d; color: #d9d0d2; font-weight: 600; font-size: 13.5px; }
.ft-legal { display: flex; align-items: center; justify-content: space-between; gap: 10px 20px; padding: 10px 0; }
.ft-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; flex: 1 1 auto; min-width: 0; }
.ft-row .sep { opacity: .45; }
.ft-row b { color: #fff; font-weight: 600; }
.ft-bottom a:hover { color: #fff; }
.ft-tm { flex-basis: 100%; color: #8e8285; font-size: 11.5px; }
.ft-logo { width: 42px; height: 42px; border-radius: 50%; background: #fff; border: 2px solid #c8102e; display: flex; align-items: center; justify-content: center; flex: none; }
.ft-logo img { width: 30px; height: auto; }

/* apariție la derulare: clasa o pune site.js doar pe ce e sub ecran */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* tabletă */
@media (max-width: 1080px) {
  .nav { position: fixed; inset: 64px 0 auto 0; display: none; flex-direction: column; align-items: stretch; gap: 2px; padding: 10px 16px 16px; background: var(--paper-2); border-bottom: 1px solid var(--rule); box-shadow: var(--shadow); max-height: calc(100vh - 64px); overflow: auto; }
  .nav.open { display: flex; }
  .nav a { padding: 13px 12px; font-size: 1rem; }
  .nav .nav-client { margin: 6px 0 0; text-align: center; }
  .menu-btn { display: inline-block; }
  .hero-in { grid-template-columns: 1fr; }
  .hero-3d { max-width: 720px; width: 100%; margin-inline: auto; }
  .modules, .plans, .traps { grid-template-columns: 1fr 1fr; }
  .stats, .howto { grid-template-columns: 1fr 1fr; }
  .route { grid-template-columns: repeat(3, 1fr); }
  .route::before { display: none; }
  .specs tbody { grid-template-columns: 1fr 1fr; }
  .sec-grid, .contact, .code-info, .ser { grid-template-columns: 1fr; }
  .sec-art { max-width: 560px; margin-inline: auto; width: 100%; }
  .gallery { grid-template-columns: 1fr; max-width: 680px; margin-inline: auto; padding: 0; }
  .gallery > .gcard { transform: none; }
  .demo { transform: none; margin: 0; }
}

/* telefon */
@media (max-width: 700px) {
  body { font-size: 15.5px; }
  .wrap { width: calc(100% - 32px); }
  .top-in { height: 58px; gap: 10px; }
  .nav { inset: 58px 0 auto 0; }
  .brand-text span { display: none; }
  .brand-logo { width: 40px; }
  .top .btn { display: none; }
  :root { --sec: 22px; --pad: 16px; --pad-sm: 12px; }
  .hero h1 { font-size: 2rem; font-stretch: 104%; }
  .cta-row .btn { flex: 1 1 100%; }
  .hero-3d { padding: 8px 6px 18px; }
  .scene { transform: rotateY(-14deg) rotateX(8deg); }
  .layer { width: 80%; }
  .l-back { right: 0; transform: translateZ(-60px); }
  .l-mid { right: 8%; }
  .l-front { left: 2%; transform: translateZ(25px); }
  .float { padding: 7px 9px; transform: translateZ(50px); }
  .float b { font-size: .85rem; }
  .float span { font-size: .66rem; }
  .f1 { left: 0; top: -2%; }
  .f2 { right: 0; }
  .f3 { left: 26%; bottom: -4%; }
  .modules, .plans, .traps, .faq, .code-rules { grid-template-columns: 1fr; }
  .stats b { font-size: 1.35rem; }
  .howto { grid-template-columns: 1fr; }
  .route { grid-template-columns: 1fr; }
  .route li { grid-template-columns: 56px 1fr; justify-items: start; text-align: left; column-gap: 14px; row-gap: 2px; padding: 0; }
  .route li::before { grid-row: span 2; }
  .try { flex-direction: column; align-items: stretch; text-align: center; }
  .ptable thead { display: none; }
  .ptable, .ptable tbody, .ptable tr, .ptable th, .ptable td { display: block; width: 100%; }
  .ptable tr { padding: 6px 0; border-bottom: 1px solid var(--rule); }
  .ptable tbody th { width: 100%; border: 0; padding: 12px 12px 4px; font-size: 1.02rem; }
  .ptable td { border: 0; padding: 8px 12px; display: grid; grid-template-columns: 1fr auto; column-gap: 10px; align-items: center; }
  .ptable td::before { content: attr(data-label); grid-column: 1 / -1; font: 600 .7rem/1.2 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--accent); margin-bottom: 2px; }
  .ptable td b { font-size: 1.35rem; }
  .ptable td small { grid-column: 1; }
  .ptable td .cell-btn { grid-column: 2; grid-row: 2 / span 2; margin: 0; }
  .ptable tr.inc td { display: block; }
  .price-foot .btn { flex: 1 1 100%; white-space: normal; text-align: center; }
  .specs tbody { grid-template-columns: 1fr 1fr; }
  .demo { font-size: .8rem; }
  .contact-line { flex-wrap: wrap; font-size: 1rem; }
  .wa-float span { display: none; }
  .wa-float { padding: 11px; }
}

/* subsolul pe ecrane înguste, ca footer.css de pe remote */
@media (max-width: 720px) {
  .top .wrap, .legal .wrap { padding-inline: 16px; }
  .ft-menu { font-size: 14px; gap: 6px 14px; justify-content: flex-start; }
  .ft-value { white-space: normal; }
  .ft-info, .ft-legal { flex-direction: column; align-items: flex-start; }
  .lbadge { width: 100%; max-width: 320px; }
}

/* telefoane mici (320–380px): eticheta de deasupra titlului încape pe un rând */
@media (max-width: 380px) {
  .label { letter-spacing: .06em; font-size: .7rem; }
}

/* ecrane mari (QHD, 4K, 5K): pagina se mărește treptat, ca un 4K să arate ca un monitor de 1920px, doar mai clar.
   Pozele din index.html au în „sizes” aceleași trepte (2240, 2880, 3600, 4800px), ca browserul să aleagă varianta destul de mare.
   Pagina nu folosește unități vh la aceste lățimi, deci mărirea nu le strică. */
@media (min-width: 2240px) { html { zoom: 1.25; } }
@media (min-width: 2880px) { html { zoom: 1.5; } }
@media (min-width: 3600px) { html { zoom: 2; } }
@media (min-width: 4800px) { html { zoom: 2.5; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ajustări pentru conținutul RDN HR */
/* cele patru carduri de la remindere stau 2 câte 2, lângă telefon, compacte */
.traps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.trap { padding: 14px 16px; gap: 4px; }
@media (max-width: 700px) { .traps { grid-template-columns: minmax(0, 1fr); } }