/* copyright Razvan Malciu - razvan.malciu@gmail.com */

/* AntennaPilot.com - tema "Night Bridge" */



@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/barlow-condensed-600.woff2") format("woff2"); }

@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/barlow-condensed-700.woff2") format("woff2"); }

@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/ibm-plex-sans.woff2") format("woff2"); }

@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-mono-400.woff2") format("woff2"); }

@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-mono-500.woff2") format("woff2"); }



:root {

    --bg: #0B171C;

    --bg-deep: #081216;

    --band: #0F1F25;

    --surface: #12232A;

    --surface-2: #15282F;

    --line: #1E3640;

    --line-2: #25414B;

    --line-3: #3A5A65;

    --text: #E7EFF1;

    --text-2: #D5E2E5;

    --muted: #A9BEC4;

    --dim: #8FA7AE;

    --faint: #6F8A92;

    --green: #3FE0A0;

    --green-hover: #7CF0C0;

    --green-ink: #06231A;

    --amber: #F4B740;

    --amber-hover: #F8CB6C;

    --amber-ink: #2A1D00;

    --red: #FF5A4E;

    --blue: #4FC3F7;

    --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;

    --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

    --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

    --radius: 14px;

    --radius-sm: 8px;

    --wrap: 1280px;

    --gutter: clamp(20px, 5vw, 80px);

}



*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }

body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }

img, svg { max-width: 100%; height: auto; }

a { color: var(--green); text-decoration: none; }

a:hover { color: var(--green-hover); }

:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; }

button { font: inherit; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: var(--radius-sm); background: var(--green); color: var(--green-ink); font-weight: 600; }

.skip-link:focus { top: 12px; }

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



.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

.narrow { max-width: 820px; }

.stack { display: flex; flex-direction: column; gap: 18px; }

.muted { color: var(--muted); }



/* --- Tipografie --- */

.eyebrow { margin: 0; font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: var(--amber); }

.display { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(48px, 7vw, 94px); line-height: 0.95; letter-spacing: -0.5px; }

.display-md { font-size: clamp(42px, 5.5vw, 72px); }

.h-section { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(36px, 4.4vw, 60px); line-height: 1; }

.h-cta { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.02; }

.h-card { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 1.05; }

.lead { margin: 0; max-width: 720px; font-size: clamp(18px, 1.6vw, 20px); line-height: 1.6; color: var(--muted); }

.lead-sm { margin: 0; font-size: 18px; line-height: 1.7; color: var(--muted); }



/* --- Butoane --- */

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 0 22px; border-radius: var(--radius-sm); border: 1px solid transparent; font-weight: 600; font-size: 16px; line-height: 1; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; }

.btn-lg { min-height: 54px; padding: 0 30px; font-size: 17px; }

.btn-block { width: 100%; }

.btn-primary { background: var(--green); color: var(--green-ink); }

.btn-primary:hover { background: var(--green-hover); color: var(--green-ink); }

.btn-amber { background: var(--amber); color: var(--amber-ink); }

.btn-amber:hover { background: var(--amber-hover); color: var(--amber-ink); }

.btn-ghost { border-color: var(--line-3); color: var(--text); background: transparent; }

.btn-ghost:hover { border-color: var(--green); color: var(--text); }

.btn-link { padding: 0 6px; background: transparent; color: var(--text); font-weight: 500; }

.btn-link:hover { color: var(--green); }

.btn-link-lg { align-self: flex-start; padding: 0; font-size: 17px; color: var(--green); }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

.btn-stack { display: flex; flex-direction: column; gap: 12px; flex-shrink: 0; }



/* --- Header --- */

.site-header { position: sticky; top: 0; z-index: 50; background: rgba(11, 23, 28, 0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }

.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 80px; }

.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--text); }

.brand:hover { color: var(--text); }

.brand img { border-radius: 9px; }

.brand-name { font-family: var(--font-display); font-weight: 700; font-size: 27px; letter-spacing: 0.4px; }

.site-nav { display: flex; align-items: center; gap: 28px; }

.nav-list { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; }

.nav-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--radius-sm); background: none; color: #C9D8DC; font-size: 16px; cursor: pointer; }

.nav-link:hover, .nav-item.is-active > .nav-link, .nav-link.is-active { color: var(--text); }

.nav-link.is-active, .nav-item.is-active > .nav-link { box-shadow: inset 0 -2px 0 var(--green); border-radius: 0; }

.nav-item { position: relative; }

.nav-sub { position: absolute; top: calc(100% + 8px); left: -12px; min-width: 330px; margin: 0; padding: 10px; list-style: none; border-radius: 12px; background: var(--surface); border: 1px solid var(--line-2); box-shadow: 0 20px 40px rgba(0, 0, 0, .35); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s, transform .15s, visibility .15s; }

.nav-item.has-sub:hover .nav-sub, .nav-item.has-sub:focus-within .nav-sub, .nav-item.has-sub.is-open .nav-sub { opacity: 1; visibility: visible; transform: none; }

.nav-sub-toggle .icon { transition: transform .15s; }

.nav-item.is-open .nav-sub-toggle .icon { transform: rotate(180deg); }

.nav-sub-link { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: var(--radius-sm); color: var(--text); }

.nav-sub-link:hover, .nav-sub-link.is-active { background: var(--surface-2); color: var(--text); }

.nav-sub-link strong { display: block; font-weight: 600; }

.nav-sub-link small { display: block; font-size: 13px; color: var(--dim); }

.nav-sub-icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex-shrink: 0; border-radius: 10px; background: var(--bg); color: var(--green); }

.nav-sub-icon-amber { color: var(--amber); }

.nav-toggle { display: none; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: var(--radius-sm); border: 1px solid var(--line-2); background: var(--surface); color: var(--text); cursor: pointer; }

.nav-toggle-close { display: none; }



/* --- Sectiuni --- */

.section { padding: clamp(72px, 9vw, 112px) 0; }

.section-tight { padding-top: 0; }

.section-top-0 { padding-top: 0; }

.band { padding: clamp(72px, 9vw, 104px) 0; background: var(--band); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; margin-bottom: 48px; }

.section-head-hero { margin-bottom: 56px; }

.section-note { margin: 0; max-width: 380px; color: var(--muted); }

.section-intro { max-width: 900px; margin-bottom: 48px; }

.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 6vw, 80px); align-items: center; }



/* --- Hero --- */

.hero { padding: clamp(56px, 7vw, 96px) 0 clamp(64px, 8vw, 104px); }

.hero-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5vw, 64px); align-items: center; }

.hero-copy { display: flex; flex-direction: column; gap: 28px; }

.tag-row { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 0; padding: 0; list-style: none; font-family: var(--font-mono); font-size: 13px; letter-spacing: .5px; text-transform: uppercase; color: var(--dim); }

.hero-dial { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }

.hero-dial svg { width: 100%; max-width: 540px; }

.hero-dial figcaption { font-family: var(--font-mono); font-size: 12px; color: var(--faint); }

.dial-line { stroke: var(--line); stroke-width: 1; }

.dial-ticks { stroke: #4E6F79; stroke-width: 10; stroke-dasharray: 1.2 12.9; }

.dial-arc { stroke: var(--amber); stroke-width: 1.5; stroke-dasharray: 6 8; }

.dial-beam { transform-origin: 280px 280px; animation: dial-sweep 7s ease-in-out infinite alternate; }

.dial-beam-line { stroke: var(--green); stroke-width: 2.5; }

.dial-beam-fill { fill: var(--green); fill-opacity: .12; }

.dial-sat rect { fill: var(--bg); stroke: var(--green); stroke-width: 1.8; }

.dial-center { fill: var(--green); }

.dial-ring { stroke: var(--green); stroke-opacity: .4; stroke-width: 1.5; }

.dial-label { fill: var(--dim); font-family: var(--font-mono); font-size: 13px; }

.dial-value { fill: var(--text); font-family: var(--font-mono); font-size: 14px; }

.dial-ok { fill: var(--green); }

.dial-card { fill: var(--surface); stroke: var(--line-2); }

@keyframes dial-sweep { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }



.page-hero { padding: clamp(56px, 7vw, 88px) 0 40px; }

.page-hero .display { margin: 16px 0 18px; }

.page-hero-slim { padding-bottom: 48px; }

.page-hero-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }

.page-hero-side { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; flex-shrink: 0; }



/* --- Tab-uri produs --- */

.tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 36px; border-bottom: 1px solid var(--line-2); }

.tab { display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px; color: var(--muted); font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; }

.tab:hover { color: var(--text); }

.tab.is-active { color: var(--text); border-bottom-color: var(--green); }



/* --- Carduri --- */

.card-grid { display: grid; gap: 24px; }

.card-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.product-card { display: flex; flex-direction: column; gap: 18px; padding: 34px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line-2); }

.product-card p { margin: 0; color: var(--muted); }

.product-card-feature { border-color: var(--amber); }

.product-card-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }

.product-icon { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; flex-shrink: 0; border-radius: 12px; background: var(--bg); color: var(--green); }

.product-icon-amber { color: var(--amber); }

.product-icon-lg { width: 84px; height: 84px; border-radius: 18px; border: 1px solid var(--line-2); }

.product-name { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 38px; line-height: 1; }

.product-by { font-size: 20px; font-weight: 600; color: var(--dim); }

.product-kicker { font-weight: 500; font-size: 15px; color: var(--amber) !important; }

.chip { display: inline-flex; align-items: center; padding: 6px 10px; border-radius: 6px; background: var(--bg); color: var(--green); font-family: var(--font-mono); font-size: 12px; letter-spacing: .5px; text-transform: uppercase; }

.chip-amber { background: var(--amber); color: var(--amber-ink); }

.chip-green { background: var(--green); color: var(--green-ink); }

.chip-blue { background: var(--blue); color: var(--bg-deep); }

.chip-red { background: var(--red); color: #fff; }

.chips { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; }

.check-list { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; font-size: 15px; color: var(--text-2); }

.check-list li { display: flex; gap: 10px; align-items: flex-start; }

.check-list .icon { flex-shrink: 0; margin-top: 3px; color: var(--green); }

.check-list-lg { font-size: 17px; gap: 14px; }

.card-actions { margin-top: auto; padding-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.feature-card { display: flex; flex-direction: column; gap: 14px; padding: 32px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line-2); }

.feature-card h3 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 1.05; }

.feature-card p { margin: 0; color: var(--muted); }

.icon-green { color: var(--green); }

.fact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

.fact { display: flex; flex-direction: column; gap: 6px; padding: 28px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line-2); }

.fact strong { font-family: var(--font-display); font-weight: 700; font-size: 40px; line-height: 1; }

.fact span { font-size: 15px; color: var(--muted); }

.cta-band { display: flex; justify-content: space-between; align-items: center; gap: 48px; padding: clamp(32px, 4vw, 56px) clamp(24px, 4vw, 64px); border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line-3); }

.cta-band .stack { max-width: 760px; gap: 14px; }

.cta-band .btn { flex-shrink: 0; }

.info-card { display: flex; gap: 20px; padding: 28px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line-2); }

.info-card p { margin: 8px 0 0; }



/* --- Continut editabil (prose) --- */

.content-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(32px, 5vw, 72px); align-items: start; }

.content-layout-form { grid-template-columns: minmax(0, 1fr) 420px; }

.content-layout-quote { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }

.prose { max-width: 780px; color: var(--text-2); }

.prose > :first-child { margin-top: 0; }

.prose h2 { margin: 56px 0 16px; font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 3.2vw, 42px); line-height: 1.05; color: var(--text); }

.prose h3 { margin: 12px 0 14px; font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.1; color: var(--text); }

.prose h4 { margin: 52px 0 10px; font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: var(--amber); }

.prose p { margin: 0 0 18px; }

.prose ul, .prose ol { margin: 0 0 22px; padding-left: 22px; }

.prose li { margin-bottom: 8px; }

.prose li::marker { color: var(--green); }

.prose strong { color: var(--text); font-weight: 600; }

.prose a { text-decoration: underline; text-underline-offset: 3px; }

.prose table { width: 100%; margin: 8px 0 28px; border-collapse: collapse; font-size: 15px; display: block; overflow-x: auto; }

.prose th, .prose td { padding: 12px 14px; border-bottom: 1px solid var(--line-2); text-align: left; vertical-align: top; }

.prose th { font-family: var(--font-mono); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--amber); font-weight: 500; }

.prose td:first-child { color: var(--text); font-weight: 500; white-space: nowrap; }

.prose-legal { max-width: 820px; }

.prose-legal h2, .prose-legal h4 { margin-top: 40px; }

.side-card { position: sticky; top: 104px; display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line-2); }

.side-card p { margin: 0; color: var(--muted); }



/* --- Formulare --- */

.form-card { padding: clamp(24px, 3vw, 40px); border-radius: 16px; background: var(--surface); border: 1px solid var(--line-2); }

aside.form-card { position: sticky; top: 104px; display: flex; flex-direction: column; gap: 14px; }

.form { display: flex; flex-direction: column; gap: 18px; margin-top: 8px; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 0; }

.field-wide { grid-column: 1 / -1; }

.field { display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: #C9D8DC; }

.field input, .field select, .field textarea { width: 100%; min-height: 48px; padding: 10px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line-3); background: var(--bg); color: var(--text); font: inherit; font-size: 16px; }

.field textarea { resize: vertical; min-height: 120px; }

.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(63, 224, 160, .18); }

.optional { color: var(--faint); font-size: 12px; }

.check { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--muted); }

.check input { width: 20px; height: 20px; margin: 1px 0 0; flex-shrink: 0; accent-color: var(--green); }

.form-actions { display: flex; justify-content: flex-end; }

.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }



/* --- Wakeline demo --- */

.demo { margin: 0; display: flex; flex-direction: column; gap: 14px; }

.demo figcaption { font-family: var(--font-mono); font-size: 13px; color: var(--faint); }

.demo-map { position: relative; aspect-ratio: 1280 / 620; min-height: 520px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line-2); background: #0F2A36; }

.demo-svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.demo-sea { fill: #0F2A36; transition: fill .25s; }

.demo-map.is-topo .demo-sea { fill: #123C4C; }

.demo-grid { stroke: #FFFFFF; stroke-opacity: .05; }

.demo-land path { fill: #24343A; transition: fill .25s; }

.demo-map.is-topo .demo-land path { fill: #3A4A36; }

.demo-layer { transition: opacity .2s; }

.demo-layer.is-off { opacity: 0; }

.demo-buoy-amber { fill: var(--amber); }

.demo-buoy-green { fill: var(--green); }

.demo-buoy-red { fill: var(--red); }

.demo-wind-lo path, .demo-wind-mid path, .demo-wind-hi path { stroke-linecap: round; }

.demo-wind-lo path { stroke: var(--blue); stroke-width: 2.5; }

.demo-wind-mid path { stroke: var(--amber); stroke-width: 3; }

.demo-wind-hi path { stroke: #FF8A5C; stroke-width: 3.5; }

.demo-navw { fill: var(--amber); stroke: var(--amber-ink); stroke-width: 1.5; }

.demo-navw-mark { stroke: var(--amber-ink); stroke-width: 2; }

.demo-wake { stroke: var(--red); stroke-width: 3; stroke-linecap: round; }

.demo-cog { stroke: var(--amber); stroke-width: 2.5; stroke-dasharray: 10 6; }

.demo-measure { stroke: var(--text); stroke-width: 2; stroke-dasharray: 3 5; }

.demo-measure-pt { fill: var(--text); }

.demo-ring { stroke: var(--text); stroke-opacity: .22; stroke-dasharray: 4 6; }

.demo-text { fill: #C9D8DC; fill-opacity: .8; font-family: var(--font-mono); font-size: 12px; }

.demo-ship { fill: var(--green); stroke: var(--green-ink); stroke-width: 1.5; }

.demo-nav { position: absolute; left: 20px; top: 20px; width: 270px; padding: 16px 18px; border-radius: 12px; background: rgba(11, 23, 28, .9); border: 1px solid var(--line-2); font-family: var(--font-mono); font-size: 13.5px; }

.demo-nav-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; color: var(--amber); letter-spacing: 1.5px; font-weight: 500; }

.demo-badge { padding: 3px 6px; border-radius: 4px; background: var(--line); color: var(--muted); font-size: 11px; letter-spacing: .5px; }

.demo-nav dl { margin: 0; display: flex; flex-direction: column; gap: 7px; }

.demo-nav dl div { display: flex; justify-content: space-between; gap: 12px; }

.demo-nav dt { color: var(--dim); }

.demo-nav dd { margin: 0; color: var(--text); }

.demo-nav dd.ok { color: var(--green); }

.demo-buttons { position: absolute; right: 16px; top: 16px; display: flex; flex-direction: column; gap: 8px; }

.demo-btn { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 112px; min-height: 44px; padding: 0 12px; border-radius: var(--radius-sm); border: 1px solid var(--line-2); background: rgba(11, 23, 28, .9); color: var(--text); font-family: var(--font-mono); font-size: 13px; cursor: pointer; }

.demo-btn:hover { border-color: var(--line-3); }

.demo-btn .led { width: 10px; height: 10px; border-radius: 50%; background: #35505A; transition: background-color .15s, box-shadow .15s; }

.demo-btn[aria-pressed="true"] .led { background: var(--green); box-shadow: 0 0 8px rgba(63, 224, 160, .7); }

.demo-timebar { position: absolute; left: 20px; right: 150px; bottom: 16px; display: flex; align-items: center; gap: 14px; min-height: 50px; padding: 0 14px; border-radius: 10px; background: rgba(11, 23, 28, .9); border: 1px solid var(--line-2); font-family: var(--font-mono); font-size: 13px; color: var(--muted); }

.demo-chip { padding: 8px 12px; border-radius: 6px; border: 1px solid var(--line-3); color: var(--text); }

.demo-chip-on { border-color: var(--green); color: var(--green); }

.demo-track { position: relative; flex-grow: 1; height: 4px; border-radius: 2px; background: var(--line-2); }

.demo-track-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 18%; border-radius: 2px; background: var(--blue); }



.notice-band { display: flex; gap: 20px; align-items: flex-start; padding: 24px 28px; border-radius: 12px; background: #2A2208; border: 1px solid var(--amber); color: #E5D6B0; }

.notice-band .icon { flex-shrink: 0; color: var(--amber); }

.notice-band p { margin: 0; }

.notice-title { margin-bottom: 6px !important; font-weight: 600; font-size: 17px; color: var(--amber); }



.flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.15fr); gap: 40px; margin: 0; padding: 0; list-style: none; counter-reset: none; }

.flow-step { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 26px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line-2); }

.flow-step:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -32px; width: 24px; height: 2px; background: var(--green); }

.flow-step:not(:last-child)::before { content: ""; position: absolute; top: calc(50% - 5px); right: -33px; width: 8px; height: 8px; border-top: 2px solid var(--green); border-right: 2px solid var(--green); transform: rotate(45deg); }

.flow-step h3 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 1.05; }

.flow-step p { margin: 0; font-size: 15px; color: var(--muted); }

.flow-step-key { border-color: var(--green); }

.flow-step-out { padding: 0; background: none; border: 0; justify-content: center; }

.flow-num { font-family: var(--font-mono); font-size: 12px; color: var(--dim); text-transform: uppercase; }

.flow-chip { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line-2); font-size: 15px; }

.flow-chip .icon { flex-shrink: 0; color: var(--green); }



/* --- Footer --- */

.site-footer { margin-top: 40px; background: var(--bg-deep); border-top: 1px solid var(--line); }

.footer-grid { display: grid; grid-template-columns: 1.3fr repeat(3, minmax(0, 1fr)); gap: 48px; padding-top: 64px; padding-bottom: 40px; }

.footer-brand p { margin: 14px 0 0; max-width: 300px; font-size: 15px; color: var(--dim); }

.footer-title { margin: 0 0 14px; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; color: var(--amber); }

.footer-links { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: 15px; }

.footer-links a { color: #C9D8DC; }

.footer-links a:hover { color: var(--green); }

.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 22px; padding-bottom: 32px; border-top: 1px solid var(--line); font-size: 14px; color: var(--faint); }



/* --- Responsive --- */

@media (max-width: 1100px) {

    .card-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .flow-step::after, .flow-step::before { display: none; }

    .content-layout, .content-layout-form, .content-layout-quote { grid-template-columns: minmax(0, 1fr); }

    .side-card, aside.form-card { position: static; }

    .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

}



@media (max-width: 960px) {

    .nav-toggle { display: inline-flex; }

    .site-nav { position: fixed; inset: 80px 0 auto 0; max-height: calc(100vh - 80px); overflow-y: auto; flex-direction: column; align-items: stretch; gap: 16px; padding: 16px var(--gutter) 28px; background: var(--bg); border-bottom: 1px solid var(--line-2); display: none; }

    .site-header.nav-open .site-nav { display: flex; }

    .site-header.nav-open .nav-toggle-open { display: none; }

    .site-header.nav-open .nav-toggle-close { display: inline; }

    .nav-list { flex-direction: column; align-items: stretch; gap: 2px; }

    .nav-link { width: 100%; justify-content: space-between; min-height: 52px; font-size: 18px; }

    .nav-link.is-active, .nav-item.is-active > .nav-link { box-shadow: none; color: var(--green); }

    .nav-sub { position: static; min-width: 0; margin: 0 0 8px; padding: 4px; opacity: 1; visibility: visible; transform: none; display: none; box-shadow: none; }

    .nav-item.has-sub:hover .nav-sub { display: none; }

    .nav-item.has-sub.is-open .nav-sub { display: block; }

    .nav-cta { width: 100%; }

    .hero-grid, .split { grid-template-columns: minmax(0, 1fr); }

    .hero-dial { order: -1; }

    .hero-dial svg { max-width: 360px; }

    .section-head, .page-hero-row { flex-direction: column; align-items: flex-start; }

    .page-hero-side { flex-direction: row; align-items: center; }

    .cta-band { flex-direction: column; align-items: flex-start; }

}



@media (max-width: 720px) {

    body { font-size: 16px; }

    .card-grid-3, .fact-grid, .flow, .form-grid { grid-template-columns: minmax(0, 1fr); }

    .product-card { padding: 26px; }

    .btn-stack { width: 100%; }

    .btn-row .btn { flex: 1 1 auto; }

    .demo-map { aspect-ratio: auto; min-height: 640px; }

    .demo-svg { height: 100%; }

    .demo-nav { left: 12px; top: auto; bottom: 12px; width: auto; right: 12px; font-size: 12.5px; }

    .demo-nav dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; }

    .demo-buttons { right: 12px; top: 12px; left: 12px; flex-direction: row; flex-wrap: wrap; }

    .demo-btn { width: auto; flex: 1 1 22%; min-height: 40px; font-size: 12px; }

    .demo-timebar { display: none; }

    .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }

    .info-card { flex-direction: column; }

}



/* --- Bara de administrare (vizibila doar cand esti autentificat) --- */

.admin-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding: 8px var(--gutter); background: var(--amber); color: var(--amber-ink); font-size: 14px; font-weight: 500; }

.admin-bar a { color: var(--amber-ink); text-decoration: underline; text-underline-offset: 3px; }

.admin-bar a:hover { color: #000; }



/* --- Mesaje formulare --- */

.form-alert { padding: 12px 14px; border-radius: var(--radius-sm); background: #3A1512; border: 1px solid #6A2A24; color: #FFB4AB; font-size: 15px; }

.field-error { font-size: 13px; color: #FF9A90; }

.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #FF6A5C; }



/* --- Banner cookies --- */

.cookie-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 80; max-width: 1100px; margin: 0 auto; padding: 20px 24px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line-3); box-shadow: 0 24px 60px rgba(0, 0, 0, .45); }

.cookie-inner { display: flex; align-items: center; gap: 24px; }

.cookie-text { flex: 1; font-size: 15px; color: var(--muted); }

.cookie-text p { margin: 0; }

.cookie-title { margin-bottom: 4px !important; font-weight: 600; color: var(--text); }

.cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }

.cookie-options { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }

.cookie-option { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; }

.cookie-option input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--green); flex-shrink: 0; }

.cookie-option strong { color: var(--text); margin-right: 6px; }

.cookie-actions .btn-link { color: var(--muted); }

.cookie-actions .btn-link:hover { color: var(--text); }

.footer-cookie { padding: 0; border: 0; background: none; color: var(--faint); font: inherit; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.footer-cookie:hover { color: var(--green); }

@media (max-width: 820px) {

    .cookie-inner { flex-direction: column; align-items: stretch; }

    .cookie-actions { justify-content: stretch; }

    .cookie-actions .btn { flex: 1 1 auto; }

}



/* --- Imagini, locuri pentru poze si video in continut --- */

.prose figure { margin: 36px 0; }

.prose figure img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface); }

.prose figcaption { margin-top: 10px; font-size: 14px; color: var(--dim); }

.prose figure:not(:has(img)) { padding: 44px 24px; border: 2px dashed var(--amber); border-radius: 12px; background: rgba(244, 183, 64, .05); text-align: center; }

.prose figure:not(:has(img)) figcaption { margin: 0; font-family: var(--font-mono); font-size: 13px; line-height: 1.6; color: var(--amber); }

.prose .figure-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 36px 0; }

.prose .figure-pair figure { margin: 0; }

.video { margin: 36px 0; }

.video-play { position: relative; display: block; width: 100%; padding: 0; border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; background: #000; cursor: pointer; aspect-ratio: 16 / 9; }

.video-play img { width: 100%; height: 100%; object-fit: cover; border: 0 !important; border-radius: 0 !important; opacity: .85; transition: opacity .2s; }

.video-play:hover img { opacity: 1; }

.video-icon { position: absolute; left: 50%; top: 50%; display: flex; align-items: center; justify-content: center; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; background: var(--green); color: var(--green-ink); box-shadow: 0 10px 30px rgba(0, 0, 0, .4); }

.video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 12px; }

.video-note { color: var(--faint); }

@media (max-width: 720px) { .prose .figure-pair { grid-template-columns: minmax(0, 1fr); } }

.prose .callout { margin: 32px 0; padding: 20px 24px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line-2); }

.prose .callout > :last-child { margin-bottom: 0; }

.prose .callout strong:first-child { color: var(--amber); }

.prose p.note { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; color: var(--dim); }

.prose .figure-pair figure img { max-height: 520px; width: auto; max-width: 100%; margin: 0 auto; }



/* --- Scena animata din prima pagina --- */

.hero-scene { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }

.hero-scene svg { width: 100%; max-width: 640px; overflow: visible; }

.hero-scene figcaption { font-family: var(--font-mono); font-size: 12px; color: var(--faint); }

.sc-stars circle { fill: #C9D8DC; animation: sc-twinkle 4s ease-in-out infinite; }

.sc-stars circle:nth-child(3n) { animation-delay: 1.3s; }

.sc-stars circle:nth-child(3n+1) { animation-delay: 2.6s; }

.sc-sat { animation: sc-bob 6s ease-in-out infinite; }

.sc-sat-body { fill: #12232A; stroke: var(--green); stroke-width: 2; }

.sc-sat-panel { fill: #15282F; stroke: var(--green); stroke-width: 1.5; }

.sc-sat-dish { stroke: var(--green); stroke-width: 2; stroke-linecap: round; }

.sc-sat-led { fill: var(--amber); animation: sc-blink 1.6s steps(2, start) infinite; }

.sc-beam { stroke: var(--green); stroke-width: 1.5; stroke-opacity: .25; }

.sc-beam-flow { stroke: var(--green); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 4 18; animation: sc-flow 1.2s linear infinite; }

.sc-ring { stroke: var(--green); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: sc-ring 3s ease-out infinite; opacity: 0; }

.sc-ring-2 { animation-delay: 1s; }

.sc-ring-3 { animation-delay: 2s; }

.sc-horizon { stroke: var(--line-2); stroke-width: 1; }

.sc-route { stroke: var(--amber); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 2 10; animation: sc-flow 1.6s linear infinite reverse; }

.sc-wp { fill: var(--amber); }

.sc-wp-pulse { fill: none; stroke: var(--amber); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: sc-ring 2.4s ease-out infinite; }

.sc-ship { transform-box: fill-box; transform-origin: 50% 90%; animation: sc-pitch 7s ease-in-out infinite; }

.sc-hull { fill: #13303D; stroke: #3A5A65; stroke-width: 1.5; }

.sc-boot { stroke: var(--red); stroke-width: 3; stroke-opacity: .8; }

.sc-ports circle { fill: #F4B740; fill-opacity: .55; }

.sc-deck { fill: #C9D8DC; stroke: #8FA7AE; stroke-width: 1; }

.sc-bridge { fill: #E7EFF1; stroke: #8FA7AE; stroke-width: 1; }

.sc-bridge-glass { stroke: #0B171C; stroke-width: 6; stroke-linecap: round; }

.sc-funnel { fill: #13303D; stroke: #3A5A65; stroke-width: 1.2; }

.sc-funnel-band { stroke: var(--green); stroke-width: 4; }

.sc-radome-2 { opacity: .85; }

.sc-boats rect { fill: #F28C38; }

.sc-moon { fill: #E7EFF1; opacity: .92; }

.sc-moon-crater { fill: #C9D8DC; opacity: .6; }

.sc-glitter path { stroke: #E7EFF1; stroke-width: 2; stroke-linecap: round; animation: sc-twinkle 3s ease-in-out infinite; }

.sc-glitter path:nth-child(2n) { animation-delay: 1.1s; }

.sc-glitter path:nth-child(3n) { animation-delay: 2.1s; }

.sc-foam { stroke: #E7EFF1 !important; stroke-opacity: .5; stroke-width: 1.5; }

.sc-mast { stroke: #8FA7AE; stroke-width: 2; stroke-linecap: round; }

.sc-radome { fill: var(--text); }

.sc-masthead { fill: var(--text); animation: sc-blink 2s steps(2, start) infinite; }

.sc-windows rect { fill: #0E2A36; }

.sc-windows rect:nth-child(3n) { fill: var(--amber); fill-opacity: .9; }

.sc-windows rect:nth-child(5n) { fill: var(--amber); fill-opacity: .6; }

.sc-windows rect:nth-child(7n) { animation: sc-window 9s steps(2, start) infinite; }

.sc-nav-green { fill: var(--green); }

.sc-wake path { stroke: var(--red); stroke-linecap: round; fill: none; stroke-dasharray: 26 14; animation: sc-flow 2.2s linear infinite; }

.sc-wake-1 { stroke-width: 3; }

.sc-wake-2 { stroke-width: 2; stroke-opacity: .55; }

.sc-wake-3 { stroke-width: 1.5; stroke-opacity: .4; }

.sc-wave { stroke: #4FC3F7; stroke-linecap: round; fill: none; animation: sc-wave 8s linear infinite; }

.sc-wave-1 { stroke-opacity: .35; stroke-width: 1.5; }

.sc-wave-2 { stroke-opacity: .25; stroke-width: 1.5; animation-duration: 11s; }

.sc-wave-3 { stroke-opacity: .18; stroke-width: 1.2; animation-duration: 14s; }

.sc-wave-4 { stroke-opacity: .12; stroke-width: 1.2; animation-duration: 17s; }

.sc-tag rect { fill: rgba(18, 35, 42, .92); stroke: var(--line-3); stroke-width: 1; }

.sc-tag-k { fill: var(--amber); font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.5px; }

.sc-tag-v { fill: var(--text); font-family: var(--font-mono); font-size: 11px; }

@keyframes sc-twinkle { 0%, 100% { opacity: .9; } 50% { opacity: .25; } }

@keyframes sc-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

@keyframes sc-blink { 0% { opacity: 1; } 100% { opacity: .2; } }

@keyframes sc-flow { to { stroke-dashoffset: -44; } }

@keyframes sc-ring { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(5); opacity: 0; } }

@keyframes sc-pitch { 0%, 100% { transform: rotate(-.8deg) translateY(0); } 50% { transform: rotate(.8deg) translateY(2px); } }

@keyframes sc-window { 0% { fill-opacity: .85; } 100% { fill-opacity: .2; } }

@keyframes sc-wave { from { transform: translateX(0); } to { transform: translateX(-120px); } }



/* --- Iconite animate de produs --- */

.pi { display: block; overflow: visible; }

.pi-bg { fill: #0B171C; }

.pi-g { stroke: var(--green); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.pi-a { stroke: var(--amber); fill: none; stroke-width: 2; stroke-linecap: round; }

.pi-r { stroke: var(--red); fill: none; stroke-width: 2.4; stroke-linecap: round; }

.pi-fill-g { fill: var(--green); }

.pi-fill-a { fill: var(--amber); }

.pi-fill-t { fill: var(--text); }

.pi-wave { transform-box: view-box; transform-origin: 20px 44px; animation: pi-wave 2.4s ease-out infinite; opacity: 0; }

.pi-wave-2 { animation-delay: .8s; }

.pi-wave-3 { animation-delay: 1.6s; }

.pi-sat { animation: sc-bob 4s ease-in-out infinite; }

.pi-sat-led { animation: sc-blink 1.4s steps(2, start) infinite; }

.pi-dash { stroke-dasharray: 3 7; animation: sc-flow 1.4s linear infinite; }

.pi-wp-pulse { transform-box: fill-box; transform-origin: center; animation: sc-ring 2.4s ease-out infinite; }

.pi-wake { stroke-dasharray: 10 6; animation: sc-flow 1.6s linear infinite; }

.pi-screen { fill: #12232A; stroke: var(--line-3); stroke-width: 1.5; }

.pi-live { animation: sc-blink 1.2s steps(2, start) infinite; }

.product-icon .pi, .product-icon-lg .pi { width: 100%; height: 100%; }

.product-icon-lg { padding: 6px; }

@keyframes pi-wave { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }



/* --- Wakeline: scena cu televizorul din cabina --- */

.tvscene { margin: 0; display: flex; flex-direction: column; gap: 14px; }

.tvscene figcaption { font-family: var(--font-mono); font-size: 13px; color: var(--faint); }

.tv-room { position: relative; aspect-ratio: 16 / 8; min-height: 420px; border-radius: 18px; overflow: hidden; border: 1px solid var(--line-2); background-color: #10232B; background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 120px); }

.tv-room::after { content: ""; position: absolute; z-index: 0; left: 0; right: 0; bottom: 0; height: 18%; background: #0C1A20; border-top: 1px solid var(--line-2); }

.tv-porthole { position: absolute; left: 5%; top: 16%; width: 19%; height: auto; }

.ph-ring { fill: #2B4450; stroke: #4E6F79; stroke-width: 3; }

.ph-inner { fill: #0A1418; stroke: #1B3440; stroke-width: 6; }

.ph-sky { fill: #0D2230; }

.ph-moon { fill: #E7EFF1; opacity: .9; }

.ph-star { fill: #C9D8DC; animation: sc-twinkle 3s ease-in-out infinite; }

.ph-sea { fill: #0F2F3E; }

.ph-wave { stroke: #4FC3F7; stroke-opacity: .45; stroke-width: 2; fill: none; animation: ph-wave 5s linear infinite; }

.ph-wave-2 { stroke-opacity: .3; animation-duration: 7s; }

.ph-wave-3 { stroke-opacity: .2; animation-duration: 9s; }

.ph-ship { fill: #C9D8DC; opacity: .7; animation: ph-ship 30s linear infinite; }

.ph-bolts circle { fill: #8FA7AE; }

@keyframes ph-wave { from { transform: translateX(0); } to { transform: translateX(-40px); } }

@keyframes ph-ship { from { transform: translateX(-40px); } to { transform: translateX(-160px); } }

.tv { position: absolute; z-index: 1; left: 30%; top: 9%; width: 58%; padding: 1.1%; border-radius: 14px; background: #05090B; border: 1px solid #25414B; box-shadow: 0 30px 80px rgba(79, 195, 247, .12), 0 20px 40px rgba(0, 0, 0, .5); }

.tv-screen { position: relative; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: #000; }

.tv-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: tv-slides 18s infinite; }

.tv-slide-1 { animation-delay: 0s; }

.tv-slide-2 { animation-delay: 6s; }

.tv-slide-3 { animation-delay: 12s; }

@keyframes tv-slides { 0% { opacity: 0; } 4% { opacity: 1; } 33% { opacity: 1; } 37% { opacity: 0; } 100% { opacity: 0; } }

.tv-osd { position: absolute; left: 2.5%; bottom: 4%; padding: 4px 8px; border-radius: 4px; background: rgba(0, 0, 0, .6); color: #E7EFF1; font-family: var(--font-mono); font-size: clamp(9px, 1vw, 12px); letter-spacing: 1px; }

.tv-brand { display: block; width: 18px; height: 3px; margin: 6px auto 0; border-radius: 2px; background: #3A5A65; }

.tv-console { position: absolute; z-index: 1; left: 34%; right: 8%; bottom: 18%; height: 3.5%; border-radius: 4px 4px 0 0; background: #1B3440; border: 1px solid #25414B; }

.tv-phone { position: absolute; z-index: 2; right: 5%; bottom: 7%; width: 12%; padding: .6%; border-radius: 18px; background: #05090B; border: 1px solid #3A5A65; transform: rotate(-6deg); box-shadow: 0 20px 40px rgba(0, 0, 0, .55); }

.tv-phone img { display: block; width: 100%; height: auto; border-radius: 13px; }

@media (max-width: 720px) {

    .tv-room { aspect-ratio: auto; min-height: 300px; height: 62vw; }

    .tv-porthole { display: none; }

    .tv { left: 4%; width: 78%; top: 8%; }

    .tv-phone { width: 24%; right: 3%; }

    .tv-console { left: 6%; }

}

.section-demo { padding-top: 0; }



/* --- About: poza aliniata sus cu textul --- */

.prose .figure-pair { align-items: start; }

.prose .figure-pair > div > :first-child { margin-top: 0; }



/* --- Radom TVRO (iconita AntennaPilot) si receptie --- */

.pi-radome { fill: rgba(231, 239, 241, .08); stroke: var(--text); stroke-width: 1.8; }

.pi-seam { stroke: var(--text); stroke-opacity: .25; stroke-width: 1; fill: none; }

.pi-strut { stroke: #C9D8DC; stroke-width: 1.2; stroke-linecap: round; }

.pi-in { opacity: 0; animation: pi-in 1.8s linear infinite; }

.pi-in-2 { animation-delay: .6s; }

.pi-in-3 { animation-delay: 1.2s; }

@keyframes pi-in { 0% { opacity: 0; } 20% { opacity: 1; } 70% { opacity: .7; } 100% { opacity: 0; } }

.sc-radome-ball { fill: #E7EFF1; }

.sc-radome-seam { stroke: #8FA7AE; stroke-width: 1; fill: none; }

.sc-pedestal { fill: #8FA7AE; }

.sc-ring-in { stroke: var(--green); stroke-width: 1.5; fill: none; transform-box: fill-box; transform-origin: center; opacity: 0; animation: sc-ring-in 2.4s ease-in infinite; }

.sc-ring-in-2 { animation-delay: .8s; }

.sc-ring-in-3 { animation-delay: 1.6s; }

@keyframes sc-ring-in { 0% { transform: scale(3.2); opacity: 0; } 30% { opacity: .8; } 100% { transform: scale(1); opacity: 0; } }

.sc-beam-in { stroke: var(--green); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 4 18; animation: sc-flow 1.2s linear infinite; }

.pi-mount { stroke: #8FA7AE; stroke-width: 2.2; stroke-linecap: round; fill: none; }

.pi-dish-back { fill: #C9D8DC; }

.pi-dish-face { fill: var(--text); stroke: #8FA7AE; stroke-width: .6; }

.pi-boresight { stroke: var(--amber); stroke-width: .6; stroke-dasharray: 1 1.6; fill: none; }



/* --- Prima pagina: globul (model live) --- */

.hero-globe { position: relative; margin: 0; }

.hero-globe canvas { display: block; width: 100%; aspect-ratio: 1 / 0.92; }

.hero-globe figcaption { margin-top: 6px; font-family: var(--font-mono); font-size: 12px; color: var(--faint); text-align: center; }

.hud { position: absolute; display: flex; flex-direction: column; gap: 3px; padding: 9px 12px; border-radius: 8px; background: rgba(12, 29, 36, .88); border: 1px solid var(--line-3); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); font-family: var(--font-mono); pointer-events: none; }

.hud-k { display: flex; align-items: center; gap: 7px; font-size: 10.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--amber); }

.hud-v { font-size: 12.5px; color: var(--text); white-space: nowrap; }

.hud-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); animation: sc-blink 1.4s steps(2, start) infinite; }

.hud-ap { right: 0; top: 4%; }

.hud-rp { right: 0; bottom: 20%; }

.hud-wl { left: 0; bottom: 12%; }

@media (max-width: 960px) {

    .hero-globe { order: -1; max-width: 520px; width: 100%; margin: 0 auto; }

}

@media (max-width: 560px) {

    .hud { padding: 6px 8px; }

    .hud-v { font-size: 10.5px; }

    .hud-k { font-size: 9px; }

}



/* --- Wakeline: demo cu ecranele reale --- */

.rdemo { margin: 0; display: flex; flex-direction: column; gap: 12px; }

.rdemo figcaption { font-family: var(--font-mono); font-size: 13px; color: var(--faint); }

.rd-stage { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; border: 1px solid var(--line-2); background: #06121a; }

.rd-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s ease; }

.rd-img.is-on { opacity: 1; }

.rd-hot { position: absolute; z-index: 2; padding: 0; border: 2px solid transparent; border-radius: 10px; background: transparent; cursor: pointer; transition: border-color .15s, background .15s; }

.rd-hot:hover, .rd-hot:focus-visible { border-color: var(--amber); background: rgba(244, 183, 64, .12); outline: none; }

.rd-hot:disabled { cursor: default; pointer-events: none; }

.rd-hint { position: absolute; z-index: 3; right: 10.5%; top: 28%; padding: 8px 12px; border-radius: 8px; background: var(--amber); color: #1d1405; font: 600 13px var(--font-body); pointer-events: none; animation: rd-hint 1.6s ease-in-out infinite; transition: opacity .3s; }

.rd-hint::after { content: ""; position: absolute; right: -6px; top: 50%; margin-top: -6px; border: 6px solid transparent; border-right: 0; border-left-color: var(--amber); }

.rd-hint.is-gone { opacity: 0; }

@keyframes rd-hint { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-6px); } }

@media (max-width: 720px) { .rd-hint { display: none; } }

.nav-sub-icon .pi { width: 34px; height: 34px; }

.prose table:has(thead) { display: table; }

.prose table:has(thead) td:first-child { white-space: normal; min-width: 150px; }

@media (max-width: 720px) { .prose table:has(thead) { display: block; } }

/* --- Alegerea platformei in formularul de download (Windows / Android) --- */

.platform-pick { margin: 0; padding: 0; border: 0; min-width: 0; }

.platform-pick legend { padding: 0; margin-bottom: 8px; font-size: 14px; color: #C9D8DC; }

.platform-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.platform-option { position: relative; display: block; cursor: pointer; }

.platform-option input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; padding: 0; margin: 0; border: 0; }

.platform-option span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; padding: 8px 10px; border-radius: var(--radius-sm); border: 1px solid var(--line-3); background: var(--bg); color: var(--text); font-size: 16px; font-weight: 600; text-align: center; transition: border-color .15s, background-color .15s; }

.platform-option span small { font-size: 12px; font-weight: 400; color: #8FA7AE; }

.platform-option:hover span { border-color: var(--green); }

.platform-option input:checked + span { border-color: var(--green); background: rgba(63, 224, 160, .12); box-shadow: inset 0 0 0 1px var(--green); }

.platform-option input:focus-visible + span { box-shadow: 0 0 0 3px rgba(63, 224, 160, .25); }



/* Nota de marca inregistrata (Admin > Products > Trademark notice): card, pagina produsului, pagina de download */

p.legal-note,

.product-card p.legal-note,

.side-card p.legal-note { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--dim); }

.product-card p.legal-note { padding-top: 14px; border-top: 1px solid var(--line); }

.side-card p.legal-note { padding-top: 12px; border-top: 1px solid var(--line); }

.form-card p.legal-note { margin-top: 18px; }



/* --- Prima pagina: cardurile de produs 2 pe rand, mai mari, butoanele aliniate jos --- */

#products .product-card > .card-actions { order: 99; }

#products .product-card > p.legal-note { order: 98; margin-top: auto; }

#products .product-card:has(> p.legal-note) > .card-actions { margin-top: 0; }

@media (min-width: 721px) {

    #products .card-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }

    #products .product-card { padding: 40px 44px; }

}



/* --- Prima pagina: 3 carduri pe rand, toate la fel; doar cand sunt exact 5 carduri, ultimele 2 se lungesc cat randul --- */

@media (min-width: 1101px) {

    #products .card-grid-3 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 28px; }

    #products .card-grid-3 > .product-card { grid-column: span 2; padding: 34px 36px; }

    #products .card-grid-3 > .product-card:nth-child(4):nth-last-child(2),

    #products .card-grid-3 > .product-card:nth-child(5):nth-last-child(1) { grid-column: span 3; padding: 40px 44px; }

}



/* --- BackupPilot: tabelul de comparatie (5 coloane) cu derulare orizontala pe ecrane inguste --- */

.prose .table-scroll { overflow-x: auto; margin: 8px 0 12px; -webkit-overflow-scrolling: touch; }

.prose .table-scroll table { display: table; min-width: 960px; margin: 0; font-size: 14px; }

.prose .table-scroll th:last-child, .prose .table-scroll td:last-child { background: rgba(244, 183, 64, .07); }

.prose .table-scroll td:last-child { color: var(--text); font-weight: 500; }

.prose .table-scroll td:first-child { min-width: 220px; }

.prose p.fine { margin: 6px 0 32px; font-size: 13px; color: var(--dim); }



/* --- Butoane de share pe paginile de produs (linkuri simple, fara scripturi sau cookie-uri de la retelele sociale) --- */

.share { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }

.share-label { margin: 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--dim); }

.share-row { display: flex; flex-wrap: wrap; gap: 8px; }

.share-btn { --brand: var(--green); display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border-radius: 10px; border: 1px solid var(--line-2); background: transparent; color: var(--muted); cursor: pointer; transition: color .15s, border-color .15s, background-color .15s; }

.share-btn[hidden] { display: none; }

.share-btn svg { width: 20px; height: 20px; }

.share-btn:hover, .share-btn:focus-visible { color: var(--brand); border-color: var(--brand); background-color: color-mix(in srgb, var(--brand) 14%, transparent); }

.share-linkedin { --brand: #3B8FD9; }

.share-facebook { --brand: #4B93F5; }

.share-whatsapp { --brand: #25D366; }

.share-teams { --brand: #8B8CE0; }

.share-x { --brand: var(--text); }

.share-telegram { --brand: #2AABEE; }

.share-status { margin: 0; min-height: 1.2em; font-size: 12.5px; color: var(--green); }

.share-wide { margin-top: 28px; padding-top: 18px; }

.side-card .share-status:empty { min-height: 0; }