//* =========================================================
   NOXEN VPN — FINAL CLEAN GLOBAL CSS FOR TILDA
   Вставлять в пользовательские CSS без 
   ========================================================= */

:root{
  --nx-bg:#030712;
  --nx-bg2:#050912;
  --nx-white:#f7faff;
  --nx-text:rgba(226,234,248,.72);
  --nx-muted:rgba(226,234,248,.50);
  --nx-line:rgba(255,255,255,.09);
  --nx-glass:rgba(255,255,255,.060);
  --nx-glass-soft:rgba(255,255,255,.028);
  --nx-blue:#8ebeff;
  --nx-cyan:#8ee7ff;
  --nx-violet:#a892ff;
  --nx-green:#8df7b7;
}

/* BASE */

html,
body{
  width:100%!important;
  max-width:100%!important;
  overflow-x:hidden!important;
  background:var(--nx-bg)!important;
  color:#fff!important;
  font-family:'Inter',Arial,sans-serif!important;
  -webkit-font-smoothing:antialiased!important;
  -moz-osx-font-smoothing:grayscale!important;
  text-rendering:geometricPrecision!important;
}

*{
  box-sizing:border-box!important;
  -webkit-tap-highlight-color:transparent!important;
}

img,
video,
canvas,
svg{
  max-width:100%!important;
}

a{
  text-decoration:none!important;
}

/* TILDA RESET */

#allrecords,
.t-records,
.t-rec,
.t396,
.t396__artboard,
.t396__carrier,
.t396__filter{
  width:100%!important;
  max-width:100%!important;
  overflow-x:hidden!important;
  border:none!important;
  box-shadow:none!important;
}

/* ЕДИНЫЙ ФОН САЙТА */

body,
#allrecords{
  position:relative!important;
  background:
    radial-gradient(circle at 16% 8%, rgba(76,153,255,.13) 0%, transparent 34%),
    radial-gradient(circle at 86% 10%, rgba(143,108,255,.12) 0%, transparent 36%),
    radial-gradient(circle at 50% 45%, rgba(70,150,255,.055) 0%, transparent 46%),
    linear-gradient(180deg,#030712 0%,#050912 42%,#030712 100%)!important;
}

.t-records,
.t-rec,
.t396,
.t396__artboard,
.t396__carrier,
.t396__filter{
  background:transparent!important;
}

/* ОБЩИЙ GRID/GLOW НА ВЕСЬ САЙТ */

#allrecords::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.014) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.014) 1px,transparent 1px);
  background-size:44px 44px;
  opacity:.16;
  mask-image:radial-gradient(circle at center,rgba(0,0,0,.9) 0%,rgba(0,0,0,.45) 72%,transparent 100%);
  -webkit-mask-image:radial-gradient(circle at center,rgba(0,0,0,.9) 0%,rgba(0,0,0,.45) 72%,transparent 100%);
}

#allrecords::after{
  content:"";
  position:fixed;
  left:-260px;
  top:12%;
  width:680px;
  height:680px;
  border-radius:50%;
  z-index:0;
  pointer-events:none;
  background:radial-gradient(circle,rgba(76,146,255,.18) 0%,rgba(76,146,255,.07) 36%,transparent 72%);
  filter:blur(54px);
  opacity:.85;
}

/* ВСЕ NOXEN-БЛОКИ — ПРОЗРАЧНЫЕ, БЕЗ СОБСТВЕННОГО ФОНА */

.nx-hero,
.nox2-section,
.nox3-access,
.nxaccess,
.nxf-premium,
.nxf-footer{
  position:relative!important;
  z-index:2!important;
  width:100%!important;
  max-width:100%!important;
  overflow:hidden!important;
  margin-top:-1px!important;
  background:transparent!important;
  background-image:none!important;
  border:none!important;
  box-shadow:none!important;
}

/* отключаем старые фоновые псевдо-слои блоков, которые дают полосы */
.nx-hero::before,
.nx-hero::after,
.nox2-section::before,
.nox2-section::after,
.nox3-access::before,
.nox3-access::after,
.nxaccess::before,
.nxaccess::after,
.nxf-premium::before,
.nxf-premium::after,
.nxf-footer::before,
.nxf-footer::after{
  pointer-events:none!important;
}

/* WRAPS */

.nx-wrap,
.nox2-wrap,
.nox3-wrap,
.nxaccess-wrap,
.nxf-wrap{
  position:relative!important;
  z-index:3!important;
  width:100%!important;
  max-width:1380px!important;
  min-width:0!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* FONT FIX */

.nx-hero,
.nx-hero *,
.nox2-section,
.nox2-section *,
.nox3-access,
.nox3-access *,
.nxaccess,
.nxaccess *,
.nxf-premium,
.nxf-premium *,
.nxf-footer,
.nxf-footer *,
.nox2-mobile-cta,
.nox2-mobile-cta *,
[class*="nx"],
[class*="nx"] *,
[class*="nox"],
[class*="nox"] *,
[class*="nxf"],
[class*="nxf"] *{
  font-family:'Inter',Arial,sans-serif!important;
}

/* TEXT */

.nx-title,
.nox2-title,
.nox3-title,
.nxaccess-title,
.nxf-title,
h1,h2,h3,h4,h5,h6{
  color:var(--nx-white)!important;
  font-family:'Inter',Arial,sans-serif!important;
  font-weight:900!important;
}

.nx-subtitle,
.nox2-text,
.nox3-text,
.nxaccess-text,
.nxf-text,
p{
  color:var(--nx-text)!important;
}

/* GLASS */

.nx-panel,
.nx-benefit,
.nox2-card,
.nox2-panel,
.nox2-compare-card,
.nox3-step,
.nox3-device,
.nox3-phone,
.nox3-note,
.nxaccess-card,
.nxaccess-panel,
.nxaccess-strip-item,
.nxf-cta,
.nxf-panel,
.nxf-footer-shell,
.nxf-contact-card,
.nxf-status,
.nox2-mobile-cta{
  background:
    linear-gradient(180deg,var(--nx-glass),var(--nx-glass-soft))!important;
  border:1px solid var(--nx-line)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    0 18px 56px rgba(0,0,0,.24)!important;
  backdrop-filter:blur(20px) saturate(135%)!important;
  -webkit-backdrop-filter:blur(20px) saturate(135%)!important;
}

/* BUTTONS — БЕЗ ОРАНЖЕВОГО */

.nx-btn,
.nx-floating-btn,
.nox3-btn,
.nxaccess-cta,
.nxf-btn,
.nox2-mobile-cta a,
button,
.t-btn,
.t-submit,
a[class*="btn"],
a[class*="Btn"],
a[href*="cdn.noxen"],
a[href*="t.me/noxenvpn_bot"]{
  font-family:'Inter',Arial,sans-serif!important;
  text-decoration:none!important;
  outline:none!important;
  text-shadow:none!important;
  text-transform:none!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease,background .28s ease!important;
}

.nx-btn-primary,
.nx-floating-btn-primary,
.nox3-btn-primary,
.nxaccess-cta,
.nxf-btn-primary,
.nox2-mobile-cta a,
a[href*="cdn.noxen"]{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  background:
    linear-gradient(135deg,rgba(99,162,255,.42),rgba(137,104,255,.36)),
    linear-gradient(135deg,#111b2d,#0d1320)!important;
  border:1px solid rgba(143,185,255,.36)!important;
  box-shadow:
    0 22px 56px rgba(69,121,255,.28),
    inset 0 1px 0 rgba(255,255,255,.18)!important;
}

.nx-btn-secondary,
.nx-floating-btn-secondary,
.nox3-btn-secondary,
.nxf-btn-secondary,
a[href*="t.me/noxenvpn_bot"]{
  color:rgba(255,255,255,.94)!important;
  -webkit-text-fill-color:rgba(255,255,255,.94)!important;
  background:rgba(255,255,255,.04)!important;
  border:1px solid rgba(255,255,255,.10)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 14px 34px rgba(0,0,0,.20)!important;
}

.nxaccess-cta *,
.nxf-btn *,
.nox2-mobile-cta a *,
.t-btn *,
.t-submit *,
button *{
  color:inherit!important;
  -webkit-text-fill-color:inherit!important;
}

/* STICKY CTA */

.nox2-mobile-cta{
  font-family:'Inter',Arial,sans-serif!important;
  color:#fff!important;
  border-radius:26px!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.060),rgba(255,255,255,.026))!important;
  border:1px solid rgba(255,255,255,.12)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 24px 70px rgba(0,0,0,.34)!important;
  backdrop-filter:blur(20px) saturate(135%)!important;
  -webkit-backdrop-filter:blur(20px) saturate(135%)!important;
}

.nox2-mobile-cta a{
  font-family:'Inter',Arial,sans-serif!important;
  font-weight:850!important;
  letter-spacing:-.01em!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  text-align:center!important;
  border-radius:20px!important;
}

/* DESKTOP HOVER */

@media (hover:hover){
  .nx-btn:hover,
  .nx-floating-btn:hover,
  .nox3-btn:hover,
  .nxaccess-cta:hover,
  .nxf-btn:hover,
  .nox2-mobile-cta a:hover{
    transform:translateY(-3px)!important;
  }

  .nox2-card:hover,
  .nox3-step:hover,
  .nxaccess-card:hover{
    transform:translateY(-5px)!important;
    border-color:rgba(142,231,255,.18)!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.12),
      0 30px 90px rgba(0,0,0,.32),
      0 0 28px rgba(142,190,255,.08)!important;
  }
}

/* MOBILE */

@media (max-width:767px){

  html,
  body,
  #allrecords,
  .t-records,
  .t-rec,
  .t396,
  .t396__artboard,
  .t396__carrier{
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
  }

  #allrecords{
    background:
      radial-gradient(circle at 20% 8%, rgba(76,153,255,.12) 0%, transparent 32%),
      radial-gradient(circle at 82% 7%, rgba(143,108,255,.10) 0%, transparent 28%),
      linear-gradient(180deg,#030712 0%,#050912 48%,#030712 100%)!important;
  }

  #allrecords::before{
    background-size:30px 30px!important;
    opacity:.10!important;
  }

  #allrecords::after{
    width:420px!important;
    height:420px!important;
    left:-190px!important;
    top:7%!important;
    opacity:.65!important;
  }

  .nx-hero,
  .nox2-section,
  .nox3-access,
  .nxaccess,
  .nxf-premium,
  .nxf-footer{
    padding-left:16px!important;
    padding-right:16px!important;
    background:transparent!important;
    background-image:none!important;
    overflow:hidden!important;
  }

  .nx-title,
  .nox2-title,
  .nox3-title,
  .nxaccess-title,
  .nxf-title{
    font-size:38px!important;
    line-height:1.02!important;
    letter-spacing:-.052em!important;
    max-width:100%!important;
  }

  .nx-subtitle,
  .nox2-text,
  .nox3-text,
  .nxaccess-text,
  .nxf-text{
    font-size:16px!important;
    line-height:1.55!important;
    max-width:100%!important;
  }

  .nx-main,
  .nox2-layout,
  .nox3-layout,
  .nxaccess-layout,
  .nxf-cta-grid,
  .nxf-footer-top{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:18px!important;
    min-width:0!important;
  }

  .nx-hero{
    min-height:auto!important;
    padding-top:18px!important;
    padding-bottom:70px!important;
  }

  .nx-left{
    max-width:100%!important;
    min-width:0!important;
  }

  .nx-actions{
    flex-direction:column!important;
    align-items:stretch!important;
  }

  .nx-btn{
    width:100%!important;
    min-height:56px!important;
    border-radius:18px!important;
    font-size:14px!important;
  }

  .nx-benefits{
    flex-direction:column!important;
    align-items:stretch!important;
  }

  .nx-right{
    min-height:420px!important;
    position:relative!important;
    overflow:hidden!important;
  }

  .nx-visual{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    transform:none!important;
    width:100%!important;
    max-width:100%!important;
    height:420px!important;
    overflow:hidden!important;
  }

  .nx-orbit{
    width:360px!important;
    height:360px!important;
  }

  .nx-core{
    width:140px!important;
    height:140px!important;
  }

  .nx-panel{
    max-width:calc(100vw - 44px)!important;
    transform:none!important;
  }

  .nx-floating-menu{
    display:none!important;
  }

  .nox2-grid,
  .nox3-steps,
  .nxaccess-steps{
    display:flex!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    gap:14px!important;
    padding:0 0 12px 0!important;
    scroll-snap-type:x mandatory!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:none!important;
  }

  .nox2-grid::-webkit-scrollbar,
  .nox3-steps::-webkit-scrollbar,
  .nxaccess-steps::-webkit-scrollbar{
    display:none!important;
  }

  .nox2-card,
  .nox2-card-large,
  .nox2-card-small,
  .nox2-card-dominant,
  .nox3-step,
  .nox3-step-main,
  .nxaccess-card,
  .nxaccess-card-main{
    flex:0 0 82%!important;
    width:82%!important;
    min-width:82%!important;
    max-width:82%!important;
    min-height:330px!important;
    padding:22px!important;
    border-radius:24px!important;
    scroll-snap-align:start!important;
    transform:none!important;
  }

  .nxaccess-card,
  .nxaccess-card-main,
  .nox3-step,
  .nox3-step-main{
    padding-bottom:112px!important;
  }

  .nox2-card h3,
  .nox2-card-title,
  .nox2-card-title-small,
  .nox3-step h3,
  .nox3-step-main h3,
  .nxaccess-card h3,
  .nxaccess-card-main h3{
    font-size:24px!important;
    line-height:1.08!important;
    max-width:100%!important;
  }

  .nox2-card p,
  .nox2-card-text,
  .nox3-step p,
  .nxaccess-card p{
    font-size:14px!important;
    line-height:1.55!important;
  }

  .nxaccess-bottom,
  .nox3-step-footer{
    left:22px!important;
    right:22px!important;
    bottom:22px!important;
  }

  .nxaccess-tag,
  .nox3-chip,
  .nox2-chip{
    white-space:nowrap!important;
    font-size:11px!important;
  }

  .nxaccess,
  .nxaccess *{
    max-width:100%!important;
  }

  .nxaccess{
    padding-left:14px!important;
    padding-right:14px!important;
    overflow:hidden!important;
  }

  .nxaccess-wrap,
  .nxaccess-layout,
  .nxaccess-layout > *,
  .nxaccess-panel{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin-left:0!important;
    margin-right:0!important;
    transform:none!important;
    left:auto!important;
    right:auto!important;
  }

  .nxaccess-panel,
  .nox3-device,
  .nox3-phone,
  .nxf-panel{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-height:auto!important;
    padding:20px!important;
    border-radius:26px!important;
    margin-top:4px!important;
    overflow:hidden!important;
  }

  .nxaccess-panel h3,
  .nox3-app-title{
    font-size:34px!important;
    line-height:1!important;
  }

  .nxaccess-panel p{
    width:100%!important;
    max-width:100%!important;
    white-space:normal!important;
    overflow:hidden!important;
    text-overflow:clip!important;
  }

  .nxaccess-core{
    width:140px!important;
    height:140px!important;
    margin:18px auto!important;
  }

  .nxaccess-ring.r1{width:72px!important;height:72px!important;}
  .nxaccess-ring.r2{width:106px!important;height:106px!important;}
  .nxaccess-ring.r3{width:140px!important;height:140px!important;}

  .nxaccess-orb{
    width:76px!important;
    height:76px!important;
  }

  .nxaccess-stats{
    display:grid!important;
    grid-template-columns:1fr!important;
    width:100%!important;
    max-width:100%!important;
    gap:10px!important;
  }

  .nxf-status-grid{
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
  }

  .nxaccess-stat,
  .nxf-status{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    padding:14px!important;
  }

  .nxaccess-stat strong,
  .nxf-status strong{
    font-size:18px!important;
    white-space:nowrap!important;
  }

  .nxaccess-cta{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    min-height:56px!important;
    border-radius:18px!important;
    font-size:13px!important;
    text-align:center!important;
    color:#fff!important;
    -webkit-text-fill-color:#fff!important;
    box-sizing:border-box!important;
  }

  .nxaccess-strip,
  .nox3-strip-grid,
  .nox3-note-grid{
    grid-template-columns:1fr!important;
    gap:10px!important;
  }

  .nxf-premium{
    padding-top:72px!important;
    padding-bottom:28px!important;
  }

  .nxf-cta{
    padding:24px!important;
    border-radius:26px!important;
    margin-bottom:20px!important;
  }

  .nxf-actions{
    flex-direction:column!important;
    align-items:stretch!important;
  }

  .nxf-btn{
    width:100%!important;
    min-height:56px!important;
    border-radius:18px!important;
    font-size:14px!important;
  }

  .nxf-footer-shell{
    padding:22px 18px 18px!important;
    border-radius:24px!important;
  }

  .nxf-bottom{
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:12px!important;
  }

  .nxf-mini-nav{
    justify-content:flex-start!important;
    gap:12px 16px!important;
  }

  .nox2-mobile-cta{
    display:none!important;
  }

  .nox2-card *,
  .nox3-step *,
  .nxaccess-card *,
  .nxaccess-panel *,
  .nxf-premium *{
    word-break:normal!important;
    overflow-wrap:break-word!important;
  }
}

@media (max-width:390px){
  .nx-title,
  .nox2-title,
  .nox3-title,
  .nxaccess-title,
  .nxf-title{
    font-size:34px!important;
  }

  .nox2-card,
  .nox3-step,
  .nxaccess-card{
    flex-basis:86%!important;
    min-width:86%!important;
    max-width:86%!important;
  }
}

::selection{
  background:var(--nx-cyan);
  color:#050912;
}
/* NOXEN — MOBILE HERO VISUAL NOT CUT FIX */

@media (max-width:767px){

  .nx-right{
    min-height:auto!important;
    height:auto!important;
    overflow:visible!important;
    padding-bottom:24px!important;
  }

  .nx-visual{
    height:auto!important;
    min-height:auto!important;
    overflow:visible!important;
    display:flex!important;
    flex-direction:column!important;
    gap:14px!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
  }

  .nx-orbit,
  .nx-route,
  .nx-connection-line{
    display:none!important;
  }

  .nx-core{
    position:relative!important;
    left:auto!important;
    top:auto!important;
    transform:none!important;
    width:180px!important;
    height:180px!important;
    margin:22px auto 18px!important;
    flex:0 0 auto!important;
  }

  .nx-panel{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:20px!important;
    transform:none!important;
    overflow:visible!important;
  }

  .nx-panel-top,
  .nx-panel-left,
  .nx-panel-bottom{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    width:100%!important;
    max-width:100%!important;
  }

  .nx-panel-left{
    order:3!important;
  }

  .nx-panel-top{
    order:2!important;
  }

  .nx-panel-bottom{
    order:4!important;
  }

  .nx-mini-row{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
  }
}