/*
 * BackHost — versiune HTML + CSS
 * Fișier independent, fără framework sau proces de build.
 */
:root {
  --bg: #050911;
  --bg-soft: #08111d;
  --panel: #0c1522;
  --panel-2: #0f1c2a;
  --line: rgba(153, 179, 205, 0.14);
  --text: #f4f8fb;
  --muted: #8e9dad;
  --cyan: #63e6ff;
  --mint: #56f2c3;
  --blue: #4386ff;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }
svg { display: block; }
[id] { scroll-margin-top: 100px; }
a:focus-visible,button:focus-visible,summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; border-radius: 6px; }
.section-shell { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }

.nav-shell {
  position: sticky; top: 0; z-index: 50;
  width: min(1240px, calc(100% - 32px)); height: 72px; margin: 16px auto 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 18px 0 22px; border: 1px solid var(--line); border-radius: 16px;
  background: rgba(6, 12, 21, .78); backdrop-filter: blur(18px); box-shadow: 0 20px 60px rgba(0,0,0,.18);
}
.brand { display: flex; align-items: center; gap: 11px; font-size: 19px; font-weight: 760; letter-spacing: -.04em; }
.brand > span:last-child > span { color: var(--mint); }
.brand-mark { width: 29px; height: 29px; position: relative; display: inline-block; transform: rotate(-10deg); }
.brand-mark i { position: absolute; width: 8px; border-radius: 2px; background: linear-gradient(180deg,var(--cyan),var(--blue)); bottom: 4px; }
.brand-mark i:nth-child(1) { left: 2px; height: 13px; }
.brand-mark i:nth-child(2) { left: 11px; height: 21px; }
.brand-mark i:nth-child(3) { left: 20px; height: 17px; background: linear-gradient(180deg,var(--mint),var(--cyan)); }
.nav-links { display: flex; gap: 30px; color: #a9b5c1; font-size: 13px; font-weight: 550; }
.nav-links a { transition: color .2s ease; }
.nav-links a:hover { color: white; }

.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 10px; font-size: 14px; font-weight: 700; transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-small { height: 39px; padding: 0 17px; }
.button-outline { border: 1px solid rgba(99,230,255,.28); background: rgba(99,230,255,.06); color: #ddfaff; }
.button-primary { height: 50px; padding: 0 22px; background: linear-gradient(135deg,#70efff,#4bb9ff 55%,#5f7cff); color: #04111d; box-shadow: 0 10px 30px rgba(66,171,255,.2); }
.button-primary span { font-size: 18px; }
.button-ghost { height: 50px; padding: 0 19px; border: 1px solid var(--line); background: rgba(255,255,255,.03); color: #d8e2eb; }
.play-icon { width: 23px; height: 23px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; display: grid; place-items: center; font-size: 8px; padding-left: 1px; }

.hero { min-height: 780px; padding: 120px 0 90px; display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 54px; position: relative; }
.hero-glow { position: absolute; width: 680px; height: 680px; right: -180px; top: -40px; background: radial-gradient(circle,rgba(41,125,224,.13),transparent 64%); filter: blur(8px); pointer-events: none; }
.hero-copy { position: relative; z-index: 2; }
.eyebrow,.section-kicker { color: var(--cyan); font-size: 11px; font-weight: 760; letter-spacing: .18em; text-transform: uppercase; }
.eyebrow { display: inline-flex; gap: 9px; align-items: center; padding: 8px 11px; background: rgba(99,230,255,.055); border: 1px solid rgba(99,230,255,.14); border-radius: 99px; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 13px var(--mint); }
.hero h1 { margin: 24px 0 21px; max-width: 640px; font-size: clamp(48px,5vw,76px); line-height: .99; letter-spacing: -.055em; font-weight: 720; }
.hero h1 span,.section-heading h2 span { color: transparent; background: linear-gradient(105deg,#fff 5%,#8cdfff 50%,#67f1c6); background-clip: text; -webkit-background-clip: text; }
.hero-copy > p { max-width: 580px; color: #9eacba; font-size: 17px; line-height: 1.75; }
.hero-actions { display: flex; gap: 12px; margin-top: 32px; }
.hero-assurance { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 24px; color: #6f8091; font-size: 11px; }
.hero-assurance span::first-letter { color: var(--mint); }

.hero-visual { position: relative; z-index: 1; perspective: 1400px; }
.dashboard-window { border: 1px solid rgba(135,166,194,.19); border-radius: 17px; overflow: hidden; background: #09111b; box-shadow: -20px 40px 90px rgba(0,0,0,.38), 0 0 80px rgba(49,123,225,.08); transform: rotateY(-5deg) rotateX(1deg); }
.window-bar { height: 42px; border-bottom: 1px solid var(--line); background: #0b1420; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; color: #617182; font-size: 9px; }
.window-dots { display: flex; gap: 5px; }.window-dots i { width: 6px; height: 6px; border-radius: 50%; background: #34404d; }
.window-title { letter-spacing: .03em; }
.live-pill { color: var(--mint); font-weight: 700; display: flex; gap: 5px; align-items: center; }.live-pill span { width: 5px; height: 5px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 8px var(--mint); }
.dashboard-body { display: flex; min-height: 410px; }
.mini-sidebar { width: 51px; flex: 0 0 51px; border-right: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 19px; padding-top: 17px; }
.mini-logo { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: linear-gradient(145deg,var(--cyan),var(--blue)); color: #06101b; font-size: 10px; font-weight: 900; margin-bottom: 9px; }
.mini-sidebar i { width: 14px; height: 14px; border: 1px solid #354454; border-radius: 4px; }.mini-sidebar i.active { background: rgba(86,242,195,.12); border-color: var(--mint); box-shadow: 0 0 12px rgba(86,242,195,.12); }
.dashboard-main { width: calc(100% - 51px); padding: 20px; }
.dash-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.dash-heading div { display: flex; flex-direction: column; gap: 4px; }.dash-heading small { color: #526273; font-size: 7px; letter-spacing: .15em; }.dash-heading strong { font-size: 15px; letter-spacing: -.02em; }
.dash-heading button { height: 29px; padding: 0 10px; border: 0; border-radius: 6px; background: #58dff2; color: #07131e; font-size: 8px; font-weight: 800; }
.metric-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.metric-card,.chart-card,.server-row { border: 1px solid var(--line); background: rgba(255,255,255,.017); border-radius: 9px; }
.metric-card { padding: 11px 12px; display: flex; flex-direction: column; }.metric-card span { color: #6b7b8b; font-size: 8px; }.metric-card strong { font-size: 19px; margin: 5px 0 3px; }.metric-card em { color: var(--mint); font-size: 7px; font-style: normal; }
.chart-card { margin-top: 8px; padding: 11px 12px 5px; }.chart-head { display: flex; justify-content: space-between; font-size: 9px; }.chart-head small { color: #596979; font-size: 7px; }.chart-card svg { width: 100%; height: 135px; margin-top: 4px; overflow: visible; }.gridline { stroke: rgba(154,177,199,.08); stroke-width: 1; }.chart-area { fill: url(#area); }.chart-line { fill: none; stroke: var(--mint); stroke-width: 2; filter: drop-shadow(0 0 4px rgba(86,242,195,.5)); }
.server-row { margin-top: 8px; min-height: 57px; padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; }
.server-row > div { display: flex; align-items: center; gap: 9px; }.server-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; background: rgba(67,134,255,.11); color: #7bb0ff; font-size: 8px; }.server-row p { margin: 0; display: flex; flex-direction: column; gap: 2px; }.server-row p strong { font-size: 8px; }.server-row p small { color: #5f7080; font-size: 6px; }.server-metrics span { color: #67798b; font-size: 7px; }.server-metrics b { color: #b6c4d1; }.server-metrics em { color: var(--mint); font-size: 7px; font-style: normal; background: rgba(86,242,195,.07); padding: 5px 7px; border-radius: 99px; }
.floating-card { position: absolute; z-index: 3; display: flex; gap: 9px; align-items: center; min-width: 170px; padding: 11px; border: 1px solid rgba(145,173,199,.18); border-radius: 10px; background: rgba(11,22,34,.9); backdrop-filter: blur(12px); box-shadow: 0 18px 40px rgba(0,0,0,.3); }
.floating-card div { display: flex; flex-direction: column; gap: 3px; }.floating-card small { color: #6f8191; font-size: 8px; }.floating-card strong { font-size: 9px; }.float-icon { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 7px; color: #05120e; background: var(--mint); font-size: 11px; font-weight: 900; }.shield-small { background: #5e83ff; color: white; }.floating-backup { right: -22px; top: 74px; }.floating-security { left: -35px; bottom: 47px; }

.signal-strip { min-height: 82px; padding: 20px 32px; border-block: 1px solid var(--line); background: rgba(255,255,255,.012); display: flex; align-items: center; justify-content: center; gap: 25px; color: #6d7b89; font-size: 11px; }
.signal-strip > span { color: #465667; font-size: 9px; letter-spacing: .17em; }.signal-strip strong { color: #9daab7; font-weight: 550; }.signal-strip i { width: 3px; height: 3px; border-radius: 50%; background: #314252; }
.section { padding-block: 130px; }.section-kicker { margin-bottom: 20px; }
.split-heading { display: grid; grid-template-columns: 1.1fr .7fr; gap: 80px; align-items: end; }
.section-heading h2 { margin: 0; font-size: clamp(38px,4vw,58px); line-height: 1.08; letter-spacing: -.045em; font-weight: 680; }.section-heading p { color: #8292a2; line-height: 1.75; font-size: 15px; margin: 0 0 4px; }
.benefit-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-top: 55px; }
.benefit-card { min-height: 274px; padding: 25px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(145deg,rgba(255,255,255,.025),rgba(255,255,255,.007)); position: relative; overflow: hidden; transition: transform .25s ease,border-color .25s ease; }
.benefit-card:hover { transform: translateY(-5px); border-color: rgba(99,230,255,.28); }.benefit-card::after { content:""; position:absolute; width:160px; height:160px; right:-100px; bottom:-100px; background:radial-gradient(circle,rgba(77,188,255,.12),transparent 70%); }
.icon-box { width: 42px; height: 42px; border: 1px solid rgba(99,230,255,.15); border-radius: 10px; background: rgba(99,230,255,.05); display: grid; place-items: center; color: var(--cyan); }.icon-box svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.card-number { position: absolute; top: 30px; right: 24px; color: #354656; font: 700 10px ui-monospace,monospace; }.benefit-card h3 { font-size: 17px; margin: 42px 0 12px; letter-spacing: -.02em; }.benefit-card p { color: #758698; font-size: 13px; line-height: 1.7; margin: 0; }
.platform-teaser { margin-bottom: 100px; padding: 36px 40px; border: 1px solid var(--line); border-radius: 16px; display: flex; align-items: center; justify-content: space-between; background: linear-gradient(100deg,rgba(67,134,255,.06),rgba(86,242,195,.025)); }.platform-teaser span { color: var(--mint); font-size: 9px; letter-spacing: .16em; }.platform-teaser h2 { margin: 8px 0 0; font-size: 25px; letter-spacing: -.03em; }.platform-teaser a { color: var(--cyan); font-size: 13px; font-weight: 700; }

.feature-section { position: relative; border-top: 1px solid var(--line); background: linear-gradient(180deg,#07101b 0%,#050911 100%); overflow: hidden; }
.feature-section::before { content: ""; position: absolute; inset: 0; opacity: .15; pointer-events: none; background-image: linear-gradient(rgba(110,145,176,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(110,145,176,.08) 1px,transparent 1px); background-size: 55px 55px; mask-image: linear-gradient(to bottom,black,transparent 72%); }
.centered-heading { text-align: center; position: relative; }
.centered-heading .section-kicker { margin-bottom: 20px; }
.centered-heading h2 { max-width: 850px; margin-inline: auto; }
.centered-heading p { max-width: 590px; margin: 21px auto 0; }
.feature-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 60px; position: relative; }
.feature-card { min-height: 315px; padding: 28px; border: 1px solid var(--line); border-radius: 14px; background: rgba(8,18,29,.75); box-shadow: inset 0 1px rgba(255,255,255,.015); display: flex; flex-direction: column; transition: transform .25s ease,border-color .25s ease,background .25s ease; }
.feature-card:hover { transform: translateY(-5px); border-color: rgba(99,230,255,.26); background: rgba(10,23,37,.9); }
.feature-top { display: flex; align-items: center; justify-content: space-between; }
.feature-icon { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(99,230,255,.17); border-radius: 11px; background: linear-gradient(145deg,rgba(99,230,255,.09),rgba(67,134,255,.04)); color: var(--cyan); font: 700 16px ui-monospace,monospace; }
.feature-tag { color: #334556; font: 700 10px ui-monospace,monospace; }
.feature-card h3 { margin: 40px 0 13px; font-size: 19px; letter-spacing: -.025em; }
.feature-card p { color: #7f8fa0; font-size: 13px; line-height: 1.75; margin: 0; }
.feature-meta { margin-top: auto; padding-top: 22px; border-top: 1px solid rgba(147,171,193,.09); color: #536779; font-size: 9px; letter-spacing: .07em; text-transform: uppercase; }

.dashboard-section { position: relative; border-top: 1px solid var(--line); background: radial-gradient(circle at 50% 42%,rgba(42,116,199,.1),transparent 45%),#040810; overflow: hidden; }
.dashboard-intro { display: grid; grid-template-columns: 1.1fr .65fr; gap: 80px; align-items: end; margin-bottom: 55px; }
.dashboard-intro h2,.integration-copy h2,.security-copy h2,.faq-intro h2 { margin: 18px 0 0; font-size: clamp(39px,4.2vw,59px); line-height: 1.07; letter-spacing: -.047em; font-weight: 680; }
.dashboard-intro h2 span,.integration-copy h2 span,.security-copy h2 span,.faq-intro h2 span,.final-cta h2 span { color: transparent; background: linear-gradient(100deg,#fff,#8bdfff 58%,#58efc1); background-clip: text; -webkit-background-clip: text; }
.dashboard-intro > p { color: #8292a2; font-size: 14px; line-height: 1.8; margin: 0 0 4px; }
.preview-frame { border: 1px solid rgba(145,176,205,.2); border-radius: 17px; background: #08111b; overflow: hidden; box-shadow: 0 40px 100px rgba(0,0,0,.42),0 0 100px rgba(39,115,205,.075); }
.preview-topbar { height: 59px; display: grid; grid-template-columns: 205px 1fr 120px; align-items: center; border-bottom: 1px solid var(--line); background: #0a1420; }
.preview-brand { display: flex; align-items: center; gap: 9px; padding-left: 19px; font-size: 12px; }
.preview-brand .mini-logo { margin: 0; width: 25px; height: 25px; }
.preview-search { justify-self: center; width: min(390px,80%); padding: 9px 13px; border: 1px solid rgba(142,169,195,.1); border-radius: 7px; background: rgba(0,0,0,.13); color: #546677; font-size: 9px; }
.preview-user { display: flex; align-items: center; justify-content: flex-end; gap: 14px; padding-right: 18px; color: #506173; }.preview-user > span { font-size: 8px; }.preview-user i { width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid #294155; border-radius: 50%; background: #101f2d; color: #a7c3d8; font-size: 8px; font-style: normal; font-weight: 800; }
.preview-body { display: grid; grid-template-columns: 205px 1fr; min-height: 700px; }
.preview-sidebar { padding: 24px 13px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 5px; background: rgba(7,15,24,.9); }
.preview-sidebar > small { margin: 10px 9px 5px; color: #3f5365; font-size: 7px; letter-spacing: .16em; }
.preview-sidebar > span { min-height: 35px; padding: 0 10px; border-radius: 6px; color: #6e7f90; display: flex; align-items: center; font-size: 9px; }.preview-sidebar > span b { margin-left: auto; color: #475c6f; font-size: 8px; }
.preview-sidebar > span.selected { color: #c9f7ff; background: linear-gradient(90deg,rgba(80,206,240,.12),rgba(80,206,240,.025)); border-left: 2px solid var(--cyan); }
.agent-status { margin-top: auto; padding: 13px 11px; border: 1px solid rgba(86,242,195,.1); background: rgba(86,242,195,.025); border-radius: 7px; display: flex; align-items: center; gap: 9px; }.agent-status > i { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 9px var(--mint); }.agent-status div { display: flex; flex-direction: column; gap: 2px; }.agent-status strong { color: #9ccbbd; font-size: 8px; }.agent-status small { color: #46665e; font-size: 7px; }
.preview-content { padding: 28px; min-width: 0; }
.preview-title { display: flex; align-items: center; justify-content: space-between; }.preview-title small { color: #435667; font-size: 7px; letter-spacing: .16em; }.preview-title h3 { margin: 5px 0 0; font-size: 21px; letter-spacing: -.03em; }.preview-title button { height: 33px; padding: 0 12px; border: 0; border-radius: 6px; background: linear-gradient(135deg,#62e9fa,#4eb2ef); color: #06121c; font-size: 8px; font-weight: 800; }
.preview-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-top: 23px; }
.preview-stats > div { min-height: 104px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.014); display: flex; flex-direction: column; }
.preview-stats span { color: #4f6172; font-size: 7px; letter-spacing: .1em; }.preview-stats strong { margin: 9px 0 5px; font-size: 22px; }.preview-stats strong small { color: #4c5e70; font-size: 8px; font-weight: 500; }.preview-stats em { color: #607182; font-size: 7px; font-style: normal; }.preview-stats em.ok { color: var(--mint); }
.preview-middle { display: grid; grid-template-columns: 1fr 225px; gap: 8px; margin-top: 8px; }
.performance-card,.health-card,.sites-table { border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.014); }
.performance-card { height: 287px; padding: 15px 16px 10px; position: relative; overflow: hidden; }
.card-heading { display: flex; align-items: flex-start; justify-content: space-between; }.card-heading > div { display: flex; flex-direction: column; gap: 3px; }.card-heading strong { font-size: 10px; }.card-heading small { color: #506172; font-size: 7px; }.card-heading > span { padding: 6px 8px; border: 1px solid var(--line); border-radius: 5px; color: #607181; font-size: 7px; }
.performance-card > svg { position: absolute; left: 42px; right: 12px; bottom: 24px; width: calc(100% - 54px); height: 210px; }.big-grid { stroke: rgba(150,175,198,.08); stroke-width: 1; }.big-area { fill: url(#bigArea); }.big-line { fill: none; stroke: var(--cyan); stroke-width: 2; filter: drop-shadow(0 0 5px rgba(99,230,255,.4)); }
.chart-labels { position: absolute; left: 14px; top: 64px; bottom: 35px; display: flex; flex-direction: column; justify-content: space-between; color: #3f5263; font-size: 6px; }.chart-times { position: absolute; left: 44px; right: 16px; bottom: 10px; display: flex; justify-content: space-between; color: #3f5263; font-size: 6px; }
.health-card { height: 287px; padding: 15px; }
.health-ring { width: 125px; height: 125px; margin: 22px auto 18px; border-radius: 50%; display: grid; place-items: center; position: relative; background: conic-gradient(var(--mint) 0 70%,var(--cyan) 70% 88%,#172635 88%); box-shadow: 0 0 40px rgba(86,242,195,.06); }.health-ring::after { content:""; position:absolute; inset:8px; border-radius:50%; background:#0a141f; }.health-ring span { z-index:1; font-size:27px; font-weight:700; }.health-ring small { color:#536474;font-size:8px; }
.health-legend { display: flex; flex-direction: column; gap: 8px; }.health-legend span { display: flex; align-items: center; gap: 6px; color: #697a89; font-size: 7px; }.health-legend i { width: 5px; height: 5px; border-radius: 50%; }.health-legend i.mint { background:var(--mint); }.health-legend i.cyan { background:var(--cyan); }.health-legend i.blue { background:#5a7eff; }.health-legend b { margin-left:auto;color:#93a4b2; }
.sites-table { margin-top: 8px; padding: 0 15px 4px; overflow: hidden; }
.table-head { height: 44px; display: flex; align-items: center; justify-content: space-between; }.table-head strong { font-size: 10px; }.table-head span { color: var(--cyan); font-size: 7px; }
.site-row { display: grid; grid-template-columns: 1.8fr .7fr .55fr .8fr .55fr; gap: 10px; min-height: 44px; align-items: center; border-top: 1px solid rgba(145,169,193,.08); color: #728393; font-size: 7px; }.site-row > span:first-child { display:flex; align-items:center; gap:8px; }.site-row b { color:#a5b4c2; font-size:8px; }.site-favicon { width: 21px; height:21px; display:grid; place-items:center; border-radius:5px; background:#305f99; color:white; font-size:8px;font-style:normal;font-weight:800; }.site-favicon.second { background:#3b796a; }.site-row .status-text { color:var(--mint); }.table-labels { color:#3e5162; font-size:6px; min-height:29px; }
.preview-caption { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 20px; }.preview-caption > span { padding: 20px 22px; border: 1px solid rgba(145,170,194,.09); border-radius: 9px; background: rgba(255,255,255,.012); color: #385061; font: 700 8px ui-monospace,monospace; display:grid; grid-template-columns:28px 1fr; }.preview-caption strong { color:#a2b3c1;font:700 10px Inter,sans-serif; }.preview-caption small { grid-column:2;color:#5b6c7c;font:400 8px Inter,sans-serif;margin-top:4px; }

.wordpress-section { background: linear-gradient(180deg,#050911,#07101a); border-top:1px solid var(--line); }
.integration-grid { display: grid; grid-template-columns: 1fr .85fr; gap: 100px; align-items: center; }
.integration-visual { min-height: 530px; border: 1px solid var(--line); border-radius: 17px; background: rgba(9,19,30,.78); position: relative; display: flex; justify-content: center; align-items: flex-start; padding-top: 80px; overflow: hidden; }
.integration-glow { position:absolute; width:380px;height:260px;top:0;left:50%;transform:translateX(-50%);background:radial-gradient(circle,rgba(65,143,240,.13),transparent 68%); }
.integration-node { width: 150px; min-height: 145px; padding: 24px 15px 18px; position:relative; z-index:2; border:1px solid rgba(137,169,199,.15);border-radius:13px;background:#0c1724;display:flex;flex-direction:column;align-items:center;box-shadow:0 20px 50px rgba(0,0,0,.24); }
.integration-node > span { width:47px;height:47px;display:grid;place-items:center;border-radius:11px;margin-bottom:15px;font-size:22px;font-weight:800; }.wp-node > span { background:#f0f5f7;color:#173749;font-family:Georgia,serif;border-radius:50%; }.bh-node > span { background:linear-gradient(145deg,var(--cyan),var(--blue));color:#05111b; }.integration-node strong { font-size:11px; }.integration-node small { color:#526475;font-size:7px;margin-top:5px; }
.connection-line { width: 130px; height: 1px; margin-top:72px; position:relative; background:linear-gradient(90deg,rgba(99,230,255,.15),var(--cyan),rgba(86,242,195,.15)); }.connection-line::before,.connection-line::after { content:"";position:absolute;top:-2px;width:5px;height:5px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan); }.connection-line::before{left:0}.connection-line::after{right:0;background:var(--mint);}.connection-line i { position:absolute;width:4px;height:4px;border-radius:50%;top:-1px;background:white;animation:flow 2.5s linear infinite; }.connection-line i:nth-child(2){animation-delay:-.8s}.connection-line i:nth-child(3){animation-delay:-1.6s}@keyframes flow{from{left:8%}to{left:90%}}
.integration-events { position:absolute;left:34px;right:34px;bottom:32px;border:1px solid var(--line);border-radius:10px;background:rgba(6,14,23,.74);padding:5px 14px; }
.integration-events > div { min-height:53px;border-bottom:1px solid rgba(144,168,191,.08);display:flex;align-items:center;gap:10px; }.integration-events > div:last-child{border-bottom:0}.event-icon{width:25px;height:25px;border-radius:6px;display:grid;place-items:center;background:rgba(99,230,255,.07);color:var(--cyan);font-size:9px}.event-icon.ok{background:rgba(86,242,195,.08);color:var(--mint)}.event-icon.secure{color:#7f96ff}.integration-events p{margin:0;display:flex;flex-direction:column;gap:3px}.integration-events strong{font-size:8px}.integration-events small{color:#536474;font-size:7px}.integration-events em{margin-left:auto;color:#415364;font-size:6px;font-style:normal}
.integration-copy h2 { margin-bottom: 23px; }.integration-copy > p,.security-copy > p,.faq-intro > p { color:#7e8f9f;font-size:14px;line-height:1.8;margin:0; }
.integration-copy ul { list-style:none;padding:0;margin:32px 0;display:flex;flex-direction:column;gap:19px; }.integration-copy li { display:flex;gap:13px;align-items:flex-start; }.integration-copy li > span { width:22px;height:22px;flex:0 0 22px;border-radius:50%;display:grid;place-items:center;background:rgba(86,242,195,.08);color:var(--mint);font-size:9px; }.integration-copy li div{display:flex;flex-direction:column;gap:4px}.integration-copy li strong{font-size:12px}.integration-copy li small{color:#667889;font-size:10px;line-height:1.5}.text-link{color:var(--cyan);font-size:12px;font-weight:700}.text-link span{font-size:16px;margin-left:7px}

.security-section { border-top:1px solid var(--line);background:#040810;overflow:hidden; }
.security-grid { display:grid;grid-template-columns:.82fr 1fr;gap:100px;align-items:center; }
.security-copy h2{margin-bottom:23px}.security-list{margin-top:35px;display:grid;grid-template-columns:1fr 1fr;gap:10px}.security-list>div{min-height:112px;padding:16px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.012);display:flex;gap:12px}.security-list>div>span{color:#3e5365;font:700 8px ui-monospace,monospace;padding-top:2px}.security-list p{margin:0;display:flex;flex-direction:column;gap:7px}.security-list strong{font-size:11px}.security-list small{color:#617384;font-size:9px;line-height:1.55}
.security-visual{height:560px;position:relative;display:grid;place-items:center}.radar-grid{position:absolute;width:520px;height:520px;border-radius:50%;opacity:.34;background:repeating-radial-gradient(circle,transparent 0 56px,rgba(88,172,239,.12) 57px 58px),conic-gradient(from 0deg,transparent,rgba(65,155,241,.12),transparent 24%);border:1px solid rgba(99,230,255,.12)}.radar-grid::before,.radar-grid::after{content:"";position:absolute;background:rgba(99,230,255,.08)}.radar-grid::before{width:1px;height:100%;left:50%}.radar-grid::after{height:1px;width:100%;top:50%}.shield-orbit{position:absolute;border:1px solid rgba(99,230,255,.16);border-radius:50%}.orbit-one{width:320px;height:320px}.orbit-two{width:430px;height:430px;border-style:dashed;animation:spin 30s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.central-shield{width:190px;height:220px;position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;clip-path:polygon(50% 0,92% 18%,86% 72%,50% 100%,14% 72%,8% 18%);background:linear-gradient(145deg,rgba(44,121,190,.25),rgba(11,26,40,.95));filter:drop-shadow(0 0 35px rgba(61,178,234,.12))}.central-shield::before{content:"";position:absolute;inset:2px;clip-path:inherit;background:#091522;z-index:-1}.central-shield>span{font-size:52px;color:var(--cyan);filter:drop-shadow(0 0 12px rgba(99,230,255,.5));transform:rotate(45deg)}.central-shield strong{margin-top:13px;color:var(--mint);font:700 10px ui-monospace,monospace;letter-spacing:.13em}.central-shield small{color:#486172;font-size:7px;margin-top:6px}.radar-label{position:absolute;min-width:145px;padding:10px 12px;border:1px solid rgba(133,166,195,.13);border-radius:7px;background:rgba(8,18,28,.88);color:#607585;font:700 7px ui-monospace,monospace;box-shadow:0 15px 35px rgba(0,0,0,.23)}.radar-label i{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--mint);box-shadow:0 0 7px var(--mint);margin-right:7px}.radar-label b{float:right;color:#739f8f;font-size:6px}.label-a{left:0;top:90px}.label-b{right:-5px;top:135px}.label-c{left:25px;bottom:85px}.label-d{right:10px;bottom:80px}

.trust-section{border-top:1px solid var(--line);background:linear-gradient(180deg,#07101a,#050911)}.compact-heading h2{font-size:clamp(36px,3.8vw,53px)}.trust-badges{display:grid;grid-template-columns:repeat(4,1fr);margin-top:50px;border:1px solid var(--line);border-radius:12px;overflow:hidden}.trust-badges>span{min-height:108px;padding:22px;border-right:1px solid var(--line);display:grid;grid-template-columns:34px 1fr;align-content:center;background:rgba(255,255,255,.012)}.trust-badges>span:last-child{border:0}.trust-badges i{grid-row:1/3;width:25px;height:25px;display:grid;place-items:center;border-radius:6px;background:rgba(99,230,255,.06);color:var(--cyan);font-style:normal;font-size:10px}.trust-badges strong{font-size:10px}.trust-badges small{color:#5d6f7f;font-size:8px;margin-top:4px}.testimonial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:34px}.testimonial-card{min-height:310px;padding:27px;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.015);display:flex;flex-direction:column}.quote-mark{color:var(--cyan);font:500 40px Georgia,serif;line-height:1}.testimonial-card blockquote{color:#adb9c5;font-size:13px;line-height:1.8;margin:18px 0 30px}.testimonial-author{margin-top:auto;padding-top:18px;border-top:1px solid rgba(145,169,193,.09);display:flex;gap:11px;align-items:center}.testimonial-author>span{width:35px;height:35px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#183c53,#18263c);border:1px solid rgba(99,230,255,.14);color:#9eddec;font-size:8px;font-weight:800}.testimonial-author p{margin:0;display:flex;flex-direction:column;gap:3px}.testimonial-author strong{font-size:9px}.testimonial-author small{color:#536576;font-size:7px}.testimonial-note{text-align:center;color:#3f5263;font-size:8px;margin:18px 0 0}

.faq-section{border-top:1px solid var(--line);background:#050911}.faq-grid{display:grid;grid-template-columns:.62fr 1fr;gap:110px;align-items:start}.faq-intro{position:sticky;top:120px}.faq-intro h2{margin-bottom:22px}.faq-intro .button{width:max-content;margin-top:30px}.faq-list{border-top:1px solid var(--line)}.faq-list details{border-bottom:1px solid var(--line)}.faq-list summary{list-style:none;cursor:pointer;min-height:82px;display:grid;grid-template-columns:33px 1fr 24px;align-items:center;gap:12px;font-size:13px;font-weight:650}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary>span{color:#3e5364;font:700 8px ui-monospace,monospace}.faq-list summary i{width:24px;height:24px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;color:#6d7f8f;font-style:normal;font-size:12px;transition:transform .2s ease}.faq-list details[open] summary i{transform:rotate(45deg);color:var(--cyan);border-color:rgba(99,230,255,.25)}.faq-list details>p{max-width:680px;color:#738595;font-size:12px;line-height:1.75;padding:0 50px 27px 45px;margin:-7px 0 0}

.final-cta{min-height:500px;margin-bottom:110px;padding:90px 30px;border:1px solid rgba(109,183,229,.18);border-radius:20px;background:linear-gradient(145deg,rgba(17,47,71,.74),rgba(8,20,33,.9));position:relative;overflow:hidden;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}.cta-grid{position:absolute;inset:0;opacity:.25;background-image:linear-gradient(rgba(103,190,234,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(103,190,234,.08) 1px,transparent 1px);background-size:45px 45px;mask-image:radial-gradient(circle,black,transparent 78%)}.cta-orb{position:absolute;width:650px;height:400px;left:50%;top:-190px;transform:translateX(-50%);background:radial-gradient(circle,rgba(79,178,237,.18),transparent 68%)}.final-cta>*:not(.cta-grid,.cta-orb){position:relative}.final-cta h2{margin:18px 0;font-size:clamp(38px,4.6vw,61px);line-height:1.06;letter-spacing:-.05em}.final-cta>p{color:#8294a3;font-size:14px}.cta-actions{display:flex;gap:12px;margin-top:25px}.cta-notes{display:flex;gap:22px;margin-top:25px;color:#577080;font-size:9px}.cta-notes span::first-letter{color:var(--mint)}

footer{border-top:1px solid var(--line);background:#03070d}.footer-top{padding:75px 0 65px;display:grid;grid-template-columns:.8fr 1.5fr;gap:100px}.footer-brand p{max-width:260px;color:#617282;font-size:11px;line-height:1.7;margin:20px 0}.footer-brand>a:last-child{color:var(--cyan);font-size:10px}.footer-links{display:grid;grid-template-columns:repeat(4,1fr);gap:35px}.footer-links>div{display:flex;flex-direction:column;gap:13px}.footer-links strong{font-size:10px;margin-bottom:7px}.footer-links a{color:#5f7181;font-size:9px;transition:color .2s ease}.footer-links a:hover{color:#c9e8f4}.footer-bottom{min-height:70px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;color:#3c4f60;font-size:8px}.footer-bottom>div{display:flex;gap:8px}.footer-bottom>div a{width:26px;height:26px;border:1px solid var(--line);border-radius:6px;display:grid;place-items:center;color:#6e8191;font-size:9px}.footer-status{justify-self:end}.footer-status i{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--mint);box-shadow:0 0 7px var(--mint);margin-right:7px}

@media (max-width: 980px) {
  .nav-links { display: none; }
  .hero { grid-template-columns: 1fr; padding-top: 90px; gap: 70px; }
  .hero-copy { text-align: center; }.hero-copy > p { margin-inline: auto; }.eyebrow { margin-inline: auto; }.hero-actions,.hero-assurance { justify-content: center; }
  .hero-visual { max-width: 680px; margin-inline: auto; width: 100%; }.dashboard-window { transform: none; }
  .split-heading { grid-template-columns: 1fr; gap: 24px; }.section-heading p { max-width: 600px; }
  .benefit-grid { grid-template-columns: repeat(2,1fr); }
  .feature-grid { grid-template-columns: repeat(2,1fr); }
  .dashboard-intro { grid-template-columns:1fr;gap:24px; }.dashboard-intro>p{max-width:650px}
  .preview-topbar { grid-template-columns:160px 1fr 90px }.preview-body{grid-template-columns:160px 1fr}.preview-stats{grid-template-columns:repeat(2,1fr)}.preview-middle{grid-template-columns:1fr}.health-card{display:grid;grid-template-columns:1fr 150px 1fr;align-items:center;height:170px}.health-card .card-heading{grid-column:1}.health-ring{grid-column:2;grid-row:1;margin:auto;width:110px;height:110px}.health-legend{grid-column:3;grid-row:1}.sites-table{overflow-x:auto}.site-row{min-width:620px}
  .integration-grid,.security-grid { grid-template-columns:1fr;gap:70px }.integration-copy{max-width:700px;order:-1}.integration-visual{max-width:700px;width:100%;margin:auto}.security-copy{max-width:720px}.security-visual{max-width:650px;width:100%;margin:auto}
  .trust-badges{grid-template-columns:repeat(2,1fr)}.trust-badges>span:nth-child(2){border-right:0}.trust-badges>span:nth-child(-n+2){border-bottom:1px solid var(--line)}.testimonial-grid{grid-template-columns:1fr 1fr}.testimonial-card:last-child{grid-column:1/-1;min-height:260px}
  .faq-grid{grid-template-columns:1fr;gap:60px}.faq-intro{position:static;max-width:700px}
  .footer-top{grid-template-columns:1fr;gap:55px}.footer-brand p{max-width:380px}
}

@media (max-width: 640px) {
  .section-shell { width: min(100% - 28px,1180px); }.nav-shell { width: calc(100% - 20px); margin-top: 10px; height: 62px; }.nav-shell .button { display: none; }
  .hero { min-height: auto; padding: 75px 0 90px; }.hero h1 { font-size: clamp(43px,13vw,60px); }.hero-copy > p { font-size: 15px; }.hero-actions { flex-direction: column; }.button { width: 100%; }
  .hero-assurance { gap: 10px 16px; }.dashboard-main { padding: 12px; }.metric-row { grid-template-columns: 1fr 1fr; }.metric-card:last-child { display:none; }.server-metrics span { display:none; }.floating-card { display:none; }
  .signal-strip { flex-wrap: wrap; gap: 12px 17px; padding-block: 25px; }.signal-strip > span { width:100%; text-align:center; }.signal-strip i { display:none; }
  .section { padding-block: 90px; }.benefit-grid { grid-template-columns: 1fr; margin-top: 38px; }.benefit-card { min-height: 230px; }.benefit-card h3 { margin-top: 30px; }
  .platform-teaser { margin-bottom: 70px; padding: 28px; align-items:flex-start; flex-direction:column; gap:22px; }.platform-teaser h2 { font-size:22px; }
  .feature-grid{grid-template-columns:1fr;margin-top:38px}.feature-card{min-height:285px}.centered-heading{text-align:left}.centered-heading p{margin-left:0}
  .dashboard-intro{margin-bottom:35px}.dashboard-intro h2,.integration-copy h2,.security-copy h2,.faq-intro h2{font-size:40px}.preview-topbar{grid-template-columns:1fr auto;height:52px}.preview-search{display:none}.preview-user{padding-right:12px}.preview-body{display:block;min-height:auto}.preview-sidebar{display:none}.preview-content{padding:15px}.preview-title button{display:none}.preview-title h3{font-size:17px}.preview-stats{gap:6px;margin-top:15px}.preview-stats>div{min-height:90px;padding:11px}.preview-stats strong{font-size:18px}.preview-middle{grid-template-columns:1fr}.performance-card{height:225px}.performance-card>svg{height:160px}.health-card{display:none}.sites-table{padding:0 10px}.site-row{min-width:0;grid-template-columns:1.7fr .8fr .6fr}.site-row>span:nth-child(4),.site-row>span:nth-child(5){display:none}.preview-caption{grid-template-columns:1fr}
  .integration-grid,.security-grid{gap:45px}.integration-visual{min-height:500px;padding-top:60px}.integration-node{width:116px;min-height:124px;padding:17px 10px}.integration-node>span{width:40px;height:40px;margin-bottom:12px}.connection-line{width:55px;margin-top:62px}.integration-events{left:14px;right:14px;bottom:18px}.integration-events>div{min-height:56px}.integration-copy ul{margin-block:26px}
  .security-list{grid-template-columns:1fr}.security-visual{height:420px;transform:scale(.82);margin-block:-30px}.radar-grid{width:430px;height:430px}.orbit-two{width:360px;height:360px}.orbit-one{width:270px;height:270px}.central-shield{width:155px;height:185px}.radar-label{min-width:125px}.label-a{left:-25px}.label-b{right:-25px}.label-c{left:-10px}.label-d{right:-10px}
  .trust-badges{grid-template-columns:1fr}.trust-badges>span{border-right:0;border-bottom:1px solid var(--line)!important}.trust-badges>span:last-child{border-bottom:0!important}.testimonial-grid{grid-template-columns:1fr}.testimonial-card,.testimonial-card:last-child{grid-column:auto;min-height:285px}
  .faq-list summary{min-height:76px;grid-template-columns:26px 1fr 24px;font-size:12px}.faq-list details>p{padding-left:38px;padding-right:10px}.faq-intro .button{width:100%}
  .final-cta{width:calc(100% - 28px);min-height:530px;margin-bottom:80px;padding:65px 20px}.final-cta h2{font-size:39px}.cta-actions{flex-direction:column;width:100%;max-width:330px}.cta-notes{flex-wrap:wrap;justify-content:center;gap:10px 16px}
  .footer-top{padding:60px 0 50px}.footer-links{grid-template-columns:1fr 1fr;gap:45px 25px}.footer-bottom{padding:25px 0;grid-template-columns:1fr;gap:18px;text-align:center;justify-items:center}.footer-status{justify-self:center}
}

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