html{scrollbar-gutter:stable}
/* Xybern landing v2 — global chrome (nav + footer + tokens + fonts). Loaded on every marketing page. */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:100 700;font-display:swap;src:url('../fonts/ibm-plex-sans-latin-wght-normal.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-latin-400-normal.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-latin-500-normal.woff2') format('woff2')}

  :root{
    --ground:#08070C;
    --ground-2:#0B0A11;
    --surface:#0F0E16;
    --surface-2:#14121D;
    --raised:#17151F;
    --line:#1E1B29;
    --line-2:#26222F;
    --text:#EDEBF2;
    --text-2:#A7A4B8;
    --text-3:#726F84;
    --text-4:#4B4858;
    --violet:#7C6BF0;
    --violet-2:#9A8CF7;
    --violet-dim:#5A4BC4;
    --good:#3DD68C;
    --bad:#F0736F;
    --radius:14px;
    --maxw:1320px;
    --mono:"IBM Plex Mono","SF Mono",ui-monospace,"Menlo",monospace;
    --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  }

/* ============ NAV ============ */
  /* ============ NAV ============ */
  header.nav{
    position:sticky;top:0;z-index:50;
    background:rgba(8,7,12,.92);
    border-bottom:1px solid var(--line);
  }
  .nav-inner{max-width:1320px;margin:0 auto;padding:0 24px;height:60px;display:flex;align-items:center;justify-content:flex-start;gap:0}
  .brand{display:flex;align-items:center;gap:10px;font-weight:650;font-size:18px;letter-spacing:-0.03em}
  .brand-logo{width:26px;height:26px;object-fit:contain;display:block;filter:drop-shadow(0 0 7px rgba(124,107,240,.4))}
  .nav-links{display:flex;align-items:center;gap:2px;margin-left:auto;margin-right:24px}
  .nav-links a{font-size:14px;color:var(--text-2);padding:8px 13px;border-radius:8px;font-weight:500;transition:color .15s,background .15s}
  .nav-links a:hover{color:var(--text);background:rgba(255,255,255,.04)}
  .nav-item{position:relative;display:flex;align-items:center}
  .nav-item:hover>a{color:var(--text);background:rgba(255,255,255,.04)}
  .nav-mega{position:absolute;top:100%;left:0;padding-top:12px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s ease,visibility .16s ease,transform .16s ease;z-index:60}
  .nav-item:hover .nav-mega{opacity:1;visibility:visible;transform:none}
  .mega-card{background:#15151A;border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:10px;box-shadow:0 24px 60px rgba(0,0,0,.55);display:grid;grid-template-columns:1fr 1fr;gap:2px}
  .mega-card.mega-prod{grid-template-columns:1fr;width:340px}
  .mega-card.mega-res{width:520px;gap:10px;padding:12px}
  .mega-group{display:flex;flex-direction:column;gap:2px}
  .mega-gh{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-4);padding:4px 13px 6px}
  .mega-item{display:block;padding:11px 13px;border-radius:10px;transition:background .14s}
  .mega-item:hover{background:rgba(255,255,255,.05)}
  .mega-item .mt{font-size:14px;font-weight:600;color:var(--text);letter-spacing:-.01em;display:flex;align-items:center;gap:8px}
  .mega-item .md{font-size:12px;color:var(--text-3);margin-top:3px;line-height:1.45}
  .mega-free{font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--good);border:1px solid rgba(61,214,140,.35);border-radius:100px;padding:1px 6px}
  .nav-cta{display:flex;align-items:center;gap:12px}
  .nav-div{width:1px;height:18px;background:var(--line-2);flex:none}
  .nav-lang-wrap{position:relative}
  .nav-lang{display:inline-flex;align-items:center;gap:5px;font-size:13.5px;font-weight:500;color:var(--text-2);background:none;border:none;cursor:pointer;font-family:inherit;padding:8px 9px;border-radius:8px;transition:color .15s,background .15s}
  .nav-lang:hover{color:var(--text);background:rgba(255,255,255,.05)}
  .nav-lang .globe{width:16px;height:16px}
  .nav-lang .chev{width:12px;height:12px;color:var(--text-3);transition:transform .18s}
  .nav-lang-wrap:hover .chev{transform:rotate(180deg)}
  .nav-lang-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:176px;background:#15151A;border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:6px;box-shadow:0 20px 44px rgba(0,0,0,.55);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .15s ease,visibility .15s ease,transform .15s ease;z-index:60}
  .nav-lang-wrap:hover .nav-lang-menu{opacity:1;visibility:visible;transform:none}
  .nll-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 11px;border-radius:8px;font-size:13.5px;color:var(--text-2);cursor:pointer;text-decoration:none;transition:background .12s,color .12s}
  .nll-item:hover{background:rgba(255,255,255,.05);color:var(--text)}
  .nll-item.active{color:var(--text)}
  .nll-item .chk{width:14px;height:14px;color:var(--violet-2);flex:none}
  .nav-signin{font-size:14px;color:var(--text-2);font-weight:500;padding:8px 12px;border-radius:8px}
  .nav-signin:hover{color:var(--text)}
  .nav-btn{font-size:13.5px;font-weight:550;padding:8px 17px;border-radius:100px;background:var(--violet);color:#fff;transition:background .15s,transform .15s}
  .nav-btn:hover{background:#8a79f5;transform:translateY(-1px)}
  @media(max-width:820px){.nav-links,.nav-signin,.nav-lang-wrap,.nav-div{display:none}}


/* ============ FOOTER ============ */
  .foot-inner{max-width:1320px;margin:0 auto;padding:0 24px}
  /* ============ FOOTER ============ */
  footer{background:#050409;border-top:1px solid var(--line);padding:56px 0 36px}
  .foot-grid{display:grid;grid-template-columns:1.2fr repeat(5,1fr);gap:40px;align-items:start}
  @media(max-width:900px){.foot-grid{grid-template-columns:repeat(3,1fr)}.foot-brand{grid-column:1 / -1;margin-bottom:6px}}
  @media(max-width:560px){.foot-grid{grid-template-columns:1fr 1fr}}
  .fcol{display:flex;flex-direction:column;gap:11px}
  .fcol .fh{font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text);margin-bottom:3px}
  .fcol a{font-size:12.5px;color:var(--text-3);transition:color .15s}
  .fcol a:hover{color:var(--violet-2)}
  .foot-bottom{margin-top:44px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
  .foot-bottom span{font-size:12px;color:var(--text-4)}
  .foot-bottom a{font-size:12px;color:var(--text-4)}
  .foot-bottom a:hover{color:var(--violet-2)}

  /* reveal */
  .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1)}
  .reveal.in{opacity:1;transform:none}
  @media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---- mobile hamburger (redesign v2) ---- */
.nav-burger{display:none;align-items:center;justify-content:center;background:none;border:none;color:var(--text);padding:8px;margin-left:6px;cursor:pointer}
@media(max-width:820px){.nav-cta{display:none}.nav-burger{display:inline-flex}}

/* ---- sign-in trigger border on the new nav ---- */
.nav-cta .xb-signin-trigger{border:none !important;background:none !important;color:var(--text-2) !important;font-size:14px !important;font-weight:500 !important;padding:8px 13px !important;border-radius:8px !important;cursor:pointer;font-family:inherit;transition:color .15s,background .15s}
.nav-cta .xb-signin-trigger:hover{color:var(--text) !important;background:rgba(255,255,255,.04) !important}

/* ---- prevent white flash on fast scroll: dark root behind transparent reveal sections ---- */
html{background:#08070C}

/* ---- sticky header fix: overflow-x:clip prevents horizontal scroll WITHOUT breaking position:sticky ---- */
html, body { overflow-x: clip !important; }