/*
  NexCore Landingpage CSS
  Version: v63 consolidated
  Hinweis: Diese Datei fasst die bisherigen Layout-, Motion-, Responsive- und Polish-Dateien
  in der gleichen Reihenfolge zusammen, damit das finale v62-Verhalten erhalten bleibt.
*/


/* ============================================================
   SECTION: css/base.css
   ============================================================ */
:root{
  --text:#f5f8ff;
  --muted:#95abc7;
  --cyan:#39dcff;
  --blue:#2390ff;
  --purple:#9653ff;
  --orange:#ff7a1a;
  --max:2360px;
  --nav-h:92px;
}
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 16% 24%, rgba(57,220,255,.13), transparent 24%),
    radial-gradient(circle at 86% 18%, rgba(150,83,255,.10), transparent 18%),
    radial-gradient(circle at 78% 74%, rgba(255,122,26,.07), transparent 18%),
    linear-gradient(180deg, #030914 0%, #04111d 34%, #061325 100%);
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:48px 48px;
  pointer-events:none;
  z-index:0;
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  background:
    linear-gradient(90deg, rgba(57,220,255,.05), transparent 18%, transparent 82%, rgba(255,122,26,.035)),
    radial-gradient(circle at 50% 0%, rgba(57,220,255,.05), transparent 38%);
  pointer-events:none;
  z-index:0;
}
.page{position:relative; z-index:1; min-height:100vh;}
.nav{
  width:min(calc(100% - 72px), var(--max));
  margin:0 auto;
  min-height:var(--nav-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative;
}
.nav::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
}
.brand{
  position:relative;
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
  padding:0 0 0 12px;
  overflow:visible;
}
.brand::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:340px;
  height:92px;
  transform:translateY(-50%);
  border-radius:999px;
  background:
    radial-gradient(circle at 12% 50%, rgba(57,220,255,.18), transparent 18%),
    radial-gradient(circle at 60% 35%, rgba(57,220,255,.06), transparent 24%),
    linear-gradient(90deg, rgba(8,17,31,.20), rgba(7,16,30,.00) 85%);
  filter:blur(10px);
  pointer-events:none;
  z-index:0;
}
.brand::after{
  content:"";
  position:absolute;
  left:18px;
  top:50%;
  width:300px;
  height:64px;
  transform:translateY(-50%);
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size:18px 18px;
  opacity:.18;
  mask-image:linear-gradient(90deg, black 0%, rgba(0,0,0,.65) 46%, rgba(0,0,0,.08) 100%);
  -webkit-mask-image:linear-gradient(90deg, black 0%, rgba(0,0,0,.65) 46%, rgba(0,0,0,.08) 100%);
  pointer-events:none;
  z-index:0;
}
.brand-icon{
  position:relative;
  z-index:1;
  height:66px;
  width:auto;
  display:block;
  filter:drop-shadow(0 0 18px rgba(57,220,255,.30)) drop-shadow(0 0 34px rgba(57,220,255,.10));
}
.brand-title{
  position:relative;
  z-index:1;
  height:88px;
  width:auto;
  display:block;
  margin-left:-2px;
  filter:drop-shadow(0 0 12px rgba(57,220,255,.10)) drop-shadow(0 0 18px rgba(255,255,255,.05));
}
.nav-actions{display:flex; gap:12px; align-items:center; flex-wrap:wrap; justify-content:flex-end;}
.btn{
  min-height:46px; padding:0 20px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px;
  text-decoration:none; border:1px solid rgba(255,255,255,.08); color:var(--text); background:rgba(255,255,255,.03);
  backdrop-filter:blur(12px); font-weight:700; font-size:.96rem; transition:transform .18s ease, border-color .18s ease, opacity .25s ease;
}
.btn:hover{transform:translateY(-1px); border-color:rgba(57,220,255,.26);}
.btn.primary{color:#04121d; border-color:transparent; background:linear-gradient(90deg, var(--cyan), #62b0ff); box-shadow:0 16px 34px rgba(35,144,255,.22);}
.scroll{
  position:absolute; left:50%; bottom:10px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:10px;
  color:var(--muted); font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; opacity:.84; text-decoration:none;
  transition:opacity .25s ease, transform .25s ease;
}
.scroll.is-hidden{opacity:0; transform:translateX(-50%) translateY(8px); pointer-events:none;}
.wheel{
  width:34px; height:58px; border-radius:999px; border:1px solid rgba(255,255,255,.14);
  display:flex; justify-content:center; padding-top:8px; background:rgba(255,255,255,.02);
}
.wheel::before{
  content:""; width:6px; height:12px; border-radius:999px; background:linear-gradient(180deg, var(--cyan), var(--blue));
  box-shadow:0 0 12px rgba(57,220,255,.34); animation:scrollPulse 1.8s infinite;
}
@keyframes scrollPulse{
  0%{transform:translateY(0); opacity:1;}
  60%{transform:translateY(12px); opacity:.3;}
  100%{transform:translateY(0); opacity:1;}
}
@media (max-width:1100px){
  .brand::before{width:270px; height:84px; left:-2px;}
  .brand::after{width:235px; height:58px; left:12px;}
  .brand-title{height:74px;}
  .brand-icon{height:58px;}
}
@media (max-width:880px){
  .nav{width:min(calc(100% - 28px), var(--max)); padding:14px 0; min-height:auto; flex-wrap:wrap; gap:14px;}
  .nav-actions{width:100%; justify-content:flex-start;}
  .brand{gap:4px; padding-left:2px;}
  .brand::before{width:210px; height:68px; left:-8px;}
  .brand::after{width:180px; height:46px; left:6px;}
  .brand-icon{height:46px;}
  .brand-title{height:58px;}
}

/* v32 responsive navigation tuning */
html{scroll-padding-top:24px;}
.nav{gap:18px;}
.nav-actions{min-width:0;}
@media (max-width:1500px){
  :root{--nav-h:82px;}
  .nav{width:min(calc(100% - 44px), var(--max));}
  .brand-icon{height:56px;}
  .brand-title{height:74px;}
  .brand::before{width:285px; height:78px;}
  .brand::after{width:245px; height:54px;}
  .nav-actions{gap:8px;}
  .btn{min-height:42px; padding:0 15px; font-size:.9rem;}
}
@media (max-width:1180px){
  .nav{width:min(calc(100% - 32px), var(--max)); padding:12px 0; min-height:auto; flex-wrap:wrap;}
  .nav-actions{width:100%; justify-content:flex-start; gap:8px;}
}
@media (max-width:620px){
  .nav-actions{display:grid; grid-template-columns:1fr 1fr;}
  .nav-actions .btn{width:100%; padding:0 12px;}
}

/* v33 button animation + language switcher foundation */
.btn{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02), 0 0 0 rgba(57,220,255,0);
  transition:
    transform .22s cubic-bezier(.22,.8,.26,1),
    border-color .22s ease,
    background .22s ease,
    box-shadow .22s ease,
    opacity .25s ease;
}
.btn::before{
  content:"";
  position:absolute;
  inset:-2px;
  z-index:-2;
  opacity:0;
  background:linear-gradient(110deg, transparent 0%, rgba(57,220,255,.22) 22%, rgba(150,83,255,.24) 48%, rgba(255,122,26,.16) 68%, transparent 100%);
  transform:translateX(-78%) skewX(-18deg);
  transition:opacity .22s ease, transform .55s cubic-bezier(.22,.8,.26,1);
}
.btn::after{
  content:"";
  position:absolute;
  inset:1px;
  z-index:-1;
  border-radius:inherit;
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.016));
  opacity:.72;
  pointer-events:none;
}
.btn:hover{
  transform:translateY(-2px);
  border-color:rgba(57,220,255,.38);
  box-shadow:0 0 0 1px rgba(57,220,255,.10), 0 12px 30px rgba(57,220,255,.11), inset 0 0 18px rgba(57,220,255,.04);
}
.btn:hover::before{
  opacity:1;
  transform:translateX(78%) skewX(-18deg);
}
.btn:focus-visible{
  outline:2px solid rgba(57,220,255,.72);
  outline-offset:3px;
}
.btn.primary::after{
  background:linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.06));
}
.btn.primary:hover{
  box-shadow:0 16px 42px rgba(35,144,255,.28), 0 0 32px rgba(57,220,255,.18);
}
.nav-link{letter-spacing:.01em;}
.language-switcher{
  position:relative;
  z-index:80;
}
.language-trigger{
  gap:9px;
  min-width:148px;
  padding-inline:14px 12px;
}
.language-dot{
  --language-color:var(--cyan);
  width:10px;
  height:10px;
  flex:0 0 auto;
  border-radius:999px;
  background:var(--language-color);
  box-shadow:0 0 14px var(--language-color), 0 0 28px color-mix(in srgb, var(--language-color), transparent 60%);
}
.language-current{white-space:nowrap;}
.language-chevron{
  margin-left:auto;
  opacity:.75;
  transition:transform .2s ease;
}
.language-switcher.is-open .language-chevron{transform:rotate(180deg);}
.language-panel{
  position:absolute;
  top:calc(100% + 14px);
  right:0;
  width:min(620px, calc(100vw - 42px));
  padding:18px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:28px;
  background:
    radial-gradient(circle at 14% 0%, rgba(57,220,255,.18), transparent 30%),
    radial-gradient(circle at 92% 14%, rgba(150,83,255,.18), transparent 26%),
    linear-gradient(180deg, rgba(8,18,32,.96), rgba(4,10,20,.94));
  box-shadow:0 28px 90px rgba(0,0,0,.48), 0 0 42px rgba(57,220,255,.08);
  backdrop-filter:blur(22px);
  opacity:0;
  transform:translateY(-8px) scale(.975);
  pointer-events:none;
  transition:opacity .2s ease, transform .2s cubic-bezier(.22,.8,.26,1);
}
.language-switcher.is-open .language-panel{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}
.language-panel::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(135deg, rgba(57,220,255,.28), rgba(150,83,255,.14), rgba(255,122,26,.16));
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
  -webkit-mask-composite:xor;
  pointer-events:none;
}
.language-panel__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}
.language-panel__head strong{
  display:block;
  font-size:1.05rem;
}
.language-panel__head span,
.language-note{
  display:block;
  color:var(--muted);
  font-size:.9rem;
  line-height:1.45;
  margin-top:4px;
}
.language-close{
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  color:var(--text);
  cursor:pointer;
  font-size:1.3rem;
  line-height:1;
}
.language-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}
.language-card{
  position:relative;
  min-height:76px;
  display:grid;
  grid-template-columns:58px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  padding:12px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.10);
  color:var(--text);
  text-align:left;
  background:rgba(255,255,255,.035);
  cursor:pointer;
  overflow:hidden;
  transition:transform .18s ease, border-color .18s ease, background .18s ease, opacity .18s ease;
}
.language-card__glow{
  position:absolute;
  inset:auto auto -38px -38px;
  width:108px;
  height:108px;
  border-radius:999px;
  background:var(--language-color);
  filter:blur(38px);
  opacity:.16;
  pointer-events:none;
}
.language-card__flag{
  width:52px;
  height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:13px;
  padding:4px;
  background:color-mix(in srgb, var(--language-color), transparent 88%);
  border:1px solid color-mix(in srgb, var(--language-color), transparent 58%);
  box-shadow:0 0 22px color-mix(in srgb, var(--language-color), transparent 78%);
  overflow:hidden;
}
.language-card__flag img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  border-radius:9px;
  box-shadow:0 4px 10px rgba(0,0,0,.24);
}
.language-card__main strong,
.language-card__main small{display:block;}
.language-card__main small{margin-top:3px; color:var(--muted); font-size:.78rem;}
.language-card__state{
  padding:5px 8px;
  border-radius:999px;
  font-size:.7rem;
  font-weight:800;
  color:color-mix(in srgb, var(--language-color), white 24%);
  background:color-mix(in srgb, var(--language-color), transparent 88%);
}
.language-card:hover,
.language-card.is-selected{
  transform:translateY(-1px);
  border-color:color-mix(in srgb, var(--language-color), transparent 46%);
  background:color-mix(in srgb, var(--language-color), transparent 92%);
}
.language-card.is-selected{
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--language-color), transparent 64%), 0 0 28px color-mix(in srgb, var(--language-color), transparent 86%);
}
.language-card.is-disabled{
  opacity:.48;
  cursor:not-allowed;
}
@media (max-width:1180px){
  .language-panel{left:0; right:auto; width:min(620px, calc(100vw - 32px));}
}
@media (max-width:620px){
  .language-switcher{grid-column:1 / -1; width:100%;}
  .language-trigger{width:100%;}
  .language-panel{position:fixed; left:14px; right:14px; top:96px; width:auto; max-height:calc(100svh - 118px); overflow:auto;}
  .language-grid{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){
  .btn,.btn::before,.language-panel,.language-card,.language-chevron{transition:none!important;}
}


/* =========================================================
   v34 language trigger + richer nav motion
   ========================================================= */
.language-trigger{
  min-width:184px;
  gap:8px;
}
.language-flag{
  width:30px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:7px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  box-shadow:0 0 12px rgba(57,220,255,.10), 0 5px 12px rgba(0,0,0,.22);
}
.language-flag img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.language-current{
  max-width:120px;
  overflow:hidden;
  text-overflow:ellipsis;
}
.nav-link::after{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  bottom:7px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(57,220,255,0), rgba(57,220,255,.86), rgba(150,83,255,.62), rgba(57,220,255,0));
  opacity:0;
  transform:scaleX(.35);
  transition:opacity .22s ease, transform .28s cubic-bezier(.22,.8,.26,1);
}
.nav-link:hover::after,
.nav-link:focus-visible::after{
  opacity:1;
  transform:scaleX(1);
}
.btn.primary::before{
  background:linear-gradient(110deg, transparent 0%, rgba(255,255,255,.34) 24%, rgba(57,220,255,.30) 50%, rgba(255,255,255,.24) 72%, transparent 100%);
}
@media (max-width:620px){
  .language-current{max-width:none;}
}


/* =========================================================
   v35 local SVG flags — fixes Windows/browser emoji fallback
   ========================================================= */
.language-trigger{min-width:204px;}
.language-card__flag{position:relative; z-index:1;}
.language-card__flag::after,
.language-flag::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(135deg, rgba(255,255,255,.28), transparent 42%, rgba(0,0,0,.12));
  opacity:.55;
}
.language-flag{position:relative; flex:0 0 auto;}
.language-flag-fallback{font-size:.72rem; font-weight:900; color:#fff;}
@media (max-width:1380px){
  .language-trigger{min-width:184px;}
  .language-current{max-width:100px;}
}
@media (max-width:620px){
  .language-trigger{min-width:0;}
}


/* =========================================================
   v36 language carousel + AI translation notice
   ========================================================= */
.language-panel{
  width:min(668px, calc(100vw - 42px));
}
.language-panel__head{margin-bottom:12px;}
.language-carousel{
  position:relative;
  display:grid;
  grid-template-columns:42px minmax(0, 1fr) 42px;
  align-items:center;
  gap:10px;
}
.language-carousel__viewport{
  overflow:hidden;
  border-radius:22px;
}
.language-carousel__track{
  display:flex;
  transition:transform .34s cubic-bezier(.22,.8,.26,1);
  will-change:transform;
}
.language-carousel__slide{
  min-width:100%;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}
.language-carousel__arrow{
  width:42px;
  height:76px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  color:var(--text);
  background:
    radial-gradient(circle at 50% 18%, rgba(57,220,255,.18), transparent 52%),
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
  box-shadow:inset 0 0 16px rgba(57,220,255,.05), 0 14px 36px rgba(0,0,0,.22);
  cursor:pointer;
  font-size:2.05rem;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:transform .2s ease, border-color .2s ease, background .2s ease, opacity .2s ease;
}
.language-carousel__arrow:hover:not(:disabled){
  transform:translateY(-1px) scale(1.025);
  border-color:rgba(57,220,255,.38);
  background:linear-gradient(180deg, rgba(57,220,255,.14), rgba(150,83,255,.065));
}
.language-carousel__arrow:disabled{
  opacity:.32;
  cursor:not-allowed;
}
.language-carousel__dots{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:7px;
  margin-top:12px;
}
.language-carousel__dot{
  width:7px;
  height:7px;
  padding:0;
  border-radius:999px;
  border:0;
  background:rgba(255,255,255,.24);
  cursor:pointer;
  transition:width .2s ease, background .2s ease, box-shadow .2s ease;
}
.language-carousel__dot.is-active{
  width:28px;
  background:linear-gradient(90deg, rgba(57,220,255,.95), rgba(150,83,255,.76));
  box-shadow:0 0 16px rgba(57,220,255,.28);
}
.language-note--warning{
  margin-top:12px;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(255,209,102,.18);
  color:#dce9ff;
  background:linear-gradient(180deg, rgba(255,209,102,.075), rgba(255,255,255,.025));
}
.language-card{
  min-height:74px;
  grid-template-columns:58px minmax(0,1fr) minmax(40px, auto);
}
.language-card__state{
  min-width:36px;
  text-align:center;
}
@media (max-width:1180px){
  .language-panel{width:min(668px, calc(100vw - 32px));}
}
@media (max-width:620px){
  .language-panel{top:96px; max-height:calc(100svh - 116px); overflow:auto;}
  .language-carousel{grid-template-columns:36px minmax(0, 1fr) 36px; gap:8px;}
  .language-carousel__arrow{width:36px; height:62px; border-radius:16px; font-size:1.75rem;}
  .language-carousel__slide{grid-template-columns:1fr;}
  .language-card{min-height:68px; grid-template-columns:52px minmax(0,1fr) auto; padding:10px;}
  .language-card__flag{width:46px; height:34px;}
}
@media (prefers-reduced-motion:reduce){
  .language-carousel__track,.language-carousel__arrow,.language-carousel__dot{transition:none!important;}
}

/* v38 premium language panel + neutral diversity marker */
.language-dot{
  position:relative;
  background:conic-gradient(from 0deg, #39dcff, #9653ff, #ff7a1a, #58e6a9, #ffd166, #39dcff) !important;
  box-shadow:0 0 16px rgba(57,220,255,.55), 0 0 32px rgba(150,83,255,.35), inset 0 0 8px rgba(255,255,255,.35) !important;
  animation:language-orbit 7s linear infinite;
}
.language-dot::after{
  content:"";
  position:absolute;
  inset:3px;
  border-radius:999px;
  background:rgba(6,12,24,.82);
  box-shadow:inset 0 0 8px rgba(255,255,255,.12);
}
@keyframes language-orbit{to{transform:rotate(360deg)}}
.language-panel{
  border-color:rgba(87,214,255,.32);
  background:
    radial-gradient(circle at 12% 0%, rgba(57,220,255,.20), transparent 38%),
    radial-gradient(circle at 92% 18%, rgba(150,83,255,.22), transparent 42%),
    linear-gradient(145deg, rgba(8,20,36,.94), rgba(10,11,30,.96) 58%, rgba(4,9,18,.96));
  box-shadow:0 28px 90px rgba(0,0,0,.58), inset 0 0 0 1px rgba(255,255,255,.05), 0 0 58px rgba(57,220,255,.10);
  backdrop-filter:blur(22px);
}
.language-panel__head{
  align-items:flex-start;
  padding-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.language-panel__head strong{font-size:1.08rem; letter-spacing:.01em;}
.language-panel__meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 14px;
}
.language-panel__meta-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:30px;
  padding:7px 11px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.045);
  color:rgba(226,238,255,.78);
  font-size:.78rem;
  font-weight:800;
}
.language-panel__meta-pill::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:999px;
  background:linear-gradient(135deg, #39dcff, #9653ff);
  box-shadow:0 0 14px rgba(57,220,255,.5);
}
.language-panel__meta-pill.is-primary::before{background:linear-gradient(135deg, #ffffff, #39dcff, #9653ff);}
.language-card{
  border-color:rgba(255,255,255,.08);
  background:linear-gradient(135deg, rgba(255,255,255,.065), rgba(255,255,255,.028));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);
}
.language-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(120deg, transparent 0 35%, rgba(255,255,255,.10), transparent 65% 100%);
  opacity:0;
  transform:translateX(-22%);
  transition:opacity .25s ease, transform .45s ease;
}
.language-card:hover::after,.language-card.is-selected::after{opacity:1; transform:translateX(14%);}
.language-card__state{
  min-width:82px;
  text-align:center;
  white-space:nowrap;
}
.language-card__flag{
  overflow:hidden;
  background:rgba(255,255,255,.06);
}
.language-card__flag img{filter:saturate(1.04) contrast(1.02);}
.language-note--warning{
  border:1px solid rgba(255,209,102,.20);
  background:linear-gradient(135deg, rgba(255,209,102,.10), rgba(255,255,255,.035));
}

/* v38 pricing tabs, currency preview and discount-ready plan cards */
.pricing-mode__pill{
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
}
.pricing-currency-note{
  max-width:860px;
  margin:14px auto 26px;
  color:rgba(204,218,238,.76);
  text-align:center;
  font-size:.9rem;
  line-height:1.65;
}
.billing-card__price{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:7px;
}
.billing-card__price-main{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:8px;
}
.billing-card__price-main strong{
  font-size:clamp(1.72rem, 2.2vw, 2.45rem);
  line-height:1;
  letter-spacing:-.04em;
}
.billing-card__price-main small{margin-bottom:4px; color:var(--muted);}
.billing-card__price-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  color:rgba(202,218,238,.68);
  font-size:.78rem;
  line-height:1.35;
}
.billing-card__old-price{
  text-decoration:line-through;
  color:rgba(255,255,255,.48);
  font-weight:900;
}
.billing-card__discount-ribbon{
  position:absolute;
  right:0;
  top:-10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:27px;
  padding:5px 10px;
  border-radius:999px;
  color:#06101e;
  font-size:.72rem;
  font-weight:950;
  letter-spacing:.02em;
  background:linear-gradient(135deg, #ffd166, #ff7a1a);
  box-shadow:0 0 24px rgba(255,122,26,.34);
}
.billing-card--discounted{
  border-color:rgba(255,209,102,.44) !important;
  box-shadow:0 0 36px rgba(255,209,102,.13), inset 0 0 0 1px rgba(255,255,255,.04);
}
.billing-card--discounted .billing-card__badge{
  border-color:rgba(255,209,102,.46);
  color:#ffd166;
  background:rgba(255,209,102,.10);
}
.hoster-pricing-panel{
  max-width:980px;
  margin:0 auto 24px;
}
.hoster-pricing-card{
  position:relative;
  overflow:hidden;
  padding:28px;
  border-radius:28px;
  border:1px solid rgba(57,220,255,.22);
  background:
    radial-gradient(circle at 10% 20%, rgba(57,220,255,.18), transparent 34%),
    radial-gradient(circle at 88% 0%, rgba(150,83,255,.24), transparent 42%),
    linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.026));
  box-shadow:0 20px 70px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.035);
}
.hoster-pricing-card::before{
  content:"";
  position:absolute;
  inset:auto -20% -45% -20%;
  height:70%;
  background:linear-gradient(90deg, transparent, rgba(57,220,255,.16), rgba(150,83,255,.14), transparent);
  filter:blur(24px);
  opacity:.65;
}
.hoster-pricing-card > *{position:relative; z-index:1;}
.hoster-pricing-card h3{
  margin:10px 0;
  font-size:clamp(1.35rem, 2.4vw, 2rem);
}
.hoster-pricing-card p{
  max-width:760px;
  color:var(--muted);
  line-height:1.65;
}
.hoster-pricing-card__actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:20px;
}
[hidden]{display:none !important;}
@media (max-width:620px){
  .language-panel__meta{gap:6px;}
  .language-panel__meta-pill{font-size:.72rem; padding:6px 9px;}
  .language-card__state{min-width:68px; font-size:.66rem;}
  .pricing-currency-note{text-align:left; margin:12px 0 20px;}
  .billing-card__discount-ribbon{position:static; width:max-content; margin-bottom:4px;}
}
@media (prefers-reduced-motion:reduce){
  .language-dot{animation:none!important;}
  .language-card::after{transition:none!important;}
}

/* =========================================================
   v39 polish: compact language carousel, local AI labels,
   neutral meta dots and non-overlapping discount badges
   ========================================================= */
.language-panel__meta-pill::before,
.language-panel__meta-pill.is-primary::before{
  background:conic-gradient(from 0deg, #39dcff, #9653ff, #ff7a1a, #58e6a9, #ffd166, #39dcff);
  box-shadow:0 0 14px rgba(57,220,255,.32), 0 0 18px rgba(150,83,255,.20);
}
.billing-card__price-ribbon-row{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  min-height:28px;
  margin:0 0 2px;
}
.billing-card__discount-ribbon{
  position:static;
  right:auto;
  top:auto;
  max-width:100%;
  white-space:nowrap;
  transform:none;
}
@media (min-width:621px){
  .language-panel{
    width:min(642px, calc(100vw - 42px));
    padding:14px;
    max-height:calc(100svh - 104px);
    overflow:hidden;
  }
  .language-panel__head{
    margin-bottom:8px;
    padding-bottom:8px;
    gap:12px;
  }
  .language-panel__head strong{font-size:1rem;}
  .language-panel__head span,
  .language-note{font-size:.82rem; line-height:1.35;}
  .language-close{width:32px; height:32px; font-size:1.2rem;}
  .language-panel__meta{gap:6px; margin:0 0 10px;}
  .language-panel__meta-pill{min-height:26px; padding:5px 9px; font-size:.72rem;}
  .language-carousel{grid-template-columns:38px minmax(0,1fr) 38px; gap:8px;}
  .language-carousel__arrow{width:38px; height:58px; border-radius:16px; font-size:1.78rem;}
  .language-carousel__slide{gap:8px;}
  .language-card{
    min-height:58px;
    grid-template-columns:46px minmax(0,1fr) minmax(52px, auto);
    gap:9px;
    padding:8px 10px;
    border-radius:17px;
  }
  .language-card__flag{width:40px; height:30px; border-radius:10px; padding:3px;}
  .language-card__flag img{border-radius:7px;}
  .language-card__main strong{font-size:.91rem; line-height:1.05;}
  .language-card__main small{margin-top:1px; font-size:.68rem; line-height:1.18;}
  .language-card__state{
    min-width:52px;
    max-width:92px;
    padding:4px 7px;
    font-size:.61rem;
    line-height:1.1;
    white-space:normal;
  }
  .language-carousel__dots{margin-top:8px;}
  .language-carousel__dot{width:6px; height:6px;}
  .language-carousel__dot.is-active{width:24px;}
  .language-note--warning{margin-top:9px; padding:8px 10px; font-size:.78rem; line-height:1.34;}
}
@media (min-width:621px) and (max-height:780px){
  .language-panel{top:calc(100% + 8px); padding:12px;}
  .language-panel__head span{display:none;}
  .language-panel__meta{display:none;}
  .language-card{min-height:54px; padding:7px 9px;}
  .language-card__flag{width:38px; height:28px;}
  .language-note--warning{font-size:.74rem; padding:7px 9px;}
}
@media (max-width:620px){
  .billing-card__price-ribbon-row{min-height:auto;}
  .billing-card__discount-ribbon{position:static; width:max-content; margin:0 0 2px;}
}
body.dialog-open{overflow:hidden;}


/* ============================================================
   SECTION: css/landing.css
   ============================================================ */
.hero-wires,.feature-wires{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  opacity:.58;
  pointer-events:none;
}
.hero{
  width:min(calc(100% - 72px), var(--max));
  margin:0 auto;
  min-height:calc(100svh - var(--nav-h));
  display:grid;
  grid-template-columns:1.18fr .78fr 1.18fr;
  gap:12px;
  align-items:stretch;
  padding:8px 0 24px;
  position:relative;
}
.hero::after{
  content:"";
  position:absolute;
  left:-2%;
  right:-2%;
  bottom:-36px;
  height:180px;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 44%, rgba(57,220,255,.10), transparent 24%),
    radial-gradient(circle at 82% 38%, rgba(150,83,255,.08), transparent 20%),
    linear-gradient(180deg, rgba(6,16,30,0), rgba(6,16,30,.12), rgba(6,16,30,.28), rgba(6,16,30,.04), rgba(6,16,30,0));
  opacity:calc(1 - var(--feature-progress, 0) * .92);
  filter:blur(16px);
  z-index:1;
}
.media,.center{min-height:calc(100svh - var(--nav-h) - 32px); position:relative;}
.media{display:flex; align-items:center;}
.media.left{justify-content:flex-start;}
.media.right{justify-content:flex-end;}
.visual{position:relative; width:100%; height:100%; min-height:760px; isolation:isolate;}
.art{
  position:absolute; left:50%; top:50%; z-index:3; width:116%; height:116%; object-fit:contain; display:block;
}
.left .art{animation:leftFloat 8s ease-in-out infinite;}
.right .art{animation:rightFloat 8.8s ease-in-out infinite;}
.right-visual .art-right{width:122%; height:122%;}

.caption{
  position:absolute; z-index:6; display:inline-flex; flex-direction:column; gap:10px; max-width:360px; padding:22px 24px; border-radius:24px;
  background:rgba(5,10,18,.56); border:1px solid rgba(255,255,255,.08); backdrop-filter:blur(14px); box-shadow:0 18px 40px rgba(0,0,0,.24);
}
.caption .eyebrow,.section-kicker,.feature-tag{
  display:inline-flex; align-items:center; gap:10px; color:#e3eeff; font-size:.8rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
}
.caption .eyebrow::before,.section-kicker::before{
  content:""; width:8px; height:8px; border-radius:999px; background:linear-gradient(180deg, var(--cyan), var(--blue)); box-shadow:0 0 14px rgba(57,220,255,.4); flex:0 0 8px;
}
.caption strong{font-size:1.38rem; line-height:1.05; letter-spacing:-.03em;}
.caption span{color:var(--muted); line-height:1.5; font-size:1rem;}
.left .caption{left:12%; bottom:7%;}
.right .caption{right:12%; bottom:7%; text-align:right; align-items:flex-end;}

.particles,.code-rain{
  position:absolute; inset:0; z-index:5; pointer-events:none; overflow:hidden; mix-blend-mode:screen;
}
.particle{
  position:absolute; border-radius:999px; opacity:.65; animation:particleDrift var(--dur) linear infinite; animation-delay:var(--delay); box-shadow:0 0 12px currentColor;
}
.particle.cyan{color:rgba(57,220,255,.95); background:rgba(57,220,255,.95);}
.particle.purple{color:rgba(150,83,255,.9); background:rgba(150,83,255,.9);}
.particle.orange{color:rgba(255,122,26,.88); background:rgba(255,122,26,.88);}

.code-rain{
  opacity:.94;
  mask-image:linear-gradient(90deg, transparent 0, black 4%, black 96%, transparent 100%);
  -webkit-mask-image:linear-gradient(90deg, transparent 0, black 4%, black 96%, transparent 100%);
}
.code-rain::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(57,220,255,.00), rgba(57,220,255,.08) 18%, rgba(57,220,255,.03) 46%, rgba(255,122,26,.05) 74%, rgba(255,122,26,.00)),
    radial-gradient(circle at 30% 46%, rgba(57,220,255,.12), transparent 26%),
    radial-gradient(circle at 16% 68%, rgba(255,122,26,.08), transparent 18%);
  filter:blur(10px);
}
.code-line{
  position:absolute; left:var(--left, -14%); color:rgba(93,211,255,.95);
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size:var(--fs, 14px); font-weight:600; letter-spacing:.01em; white-space:nowrap;
  text-shadow:0 0 10px rgba(57,220,255,.44), 0 0 18px rgba(57,220,255,.18);
  transform:translate3d(0, var(--yjit, 0px), 0) scale(var(--scale, 1));
  animation:codeMove var(--dur) var(--ease, linear) infinite;
  animation-delay:var(--delay);
}
.code-line.alt{color:rgba(255,132,48,.74); text-shadow:0 0 10px rgba(255,132,48,.30), 0 0 18px rgba(255,132,48,.12);}
.code-line.far{opacity:.38; filter:blur(.85px);}
.code-line.mid{opacity:.62; filter:blur(.25px);}
.code-line.near{opacity:.94;}
.scan{
  position:absolute; left:8%; right:10%; height:5px; border-radius:999px; z-index:5; pointer-events:none; filter:blur(.25px); mix-blend-mode:screen;
}
.scan-a{top:34%; background:linear-gradient(90deg, rgba(57,220,255,0), rgba(57,220,255,.84), rgba(57,220,255,0)); box-shadow:0 0 20px rgba(57,220,255,.36); animation:scanMoveA 5.2s ease-in-out infinite;}
.scan-b{top:64%; background:linear-gradient(90deg, rgba(255,122,26,0), rgba(255,122,26,.58), rgba(255,122,26,0)); box-shadow:0 0 18px rgba(255,122,26,.24); animation:scanMoveB 6.1s ease-in-out infinite;}

.center{display:flex; align-items:center; justify-content:center; z-index:3; padding-bottom:36px;}
.center-wrap{width:min(100%, 700px); text-align:center; position:relative;}
.center-wrap::before{
  content:""; position:absolute; left:50%; top:52%; transform:translate(-50%, -50%); width:150%; height:150%; pointer-events:none;
  background:radial-gradient(circle at 50% 50%, rgba(57,220,255,.09), transparent 22%),radial-gradient(circle at 46% 40%, rgba(150,83,255,.08), transparent 20%),radial-gradient(circle at 56% 64%, rgba(255,122,26,.05), transparent 20%);
  filter:blur(34px); z-index:-1;
}
.eyebrow-main{
  display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:0 18px; border-radius:999px; background:rgba(6,12,22,.62);
  border:1px solid rgba(255,255,255,.08); backdrop-filter:blur(12px); color:#e2eeff; font-size:.84rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; margin-bottom:22px;
}
.eyebrow-main::before{content:""; width:8px; height:8px; border-radius:999px; background:linear-gradient(180deg, var(--cyan), var(--blue)); box-shadow:0 0 14px rgba(57,220,255,.4);}
h1{
  margin:0; font-size:clamp(5.4rem, 6.6vw, 8.8rem); line-height:.86; letter-spacing:-.082em; font-weight:900; text-wrap:balance;
}
h1 .accent{background:linear-gradient(90deg, #7ce8ff, #3ebfff 60%, #7792ff); -webkit-background-clip:text; background-clip:text; color:transparent;}
.sub{margin:26px auto 0; max-width:600px; color:var(--muted); font-size:1.18rem; line-height:1.7;}
.cta{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:34px;}
.center-lines{position:absolute; inset:0; z-index:-1; opacity:.62; pointer-events:none;}

.feature-section{
  width:min(calc(100% - 72px), var(--max));
  margin:-210px auto 0;
  padding:290px 0 110px;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:transparent;
}
.section-transition{
  position:absolute;
  left:-10%;
  right:-10%;
  top:0;
  height:520px;
  transform:translateY(calc(-300px + var(--feature-progress, 0) * 140px));
  pointer-events:none;
  z-index:1;
  opacity:calc(.24 + var(--feature-progress, 0) * .95);
  will-change:transform, opacity;
}
.transition-glow{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 18%, rgba(57,220,255,.11), transparent 22%),
    radial-gradient(circle at 82% 18%, rgba(150,83,255,.10), transparent 22%),
    radial-gradient(circle at 50% 22%, rgba(57,220,255,.08), transparent 18%),
    linear-gradient(180deg,
      rgba(7,16,30,0) 0%,
      rgba(7,16,30,.015) 14%,
      rgba(7,16,30,.06) 30%,
      rgba(7,16,30,.14) 44%,
      rgba(7,16,30,.20) 58%,
      rgba(7,16,30,.08) 78%,
      rgba(7,16,30,0) 100%);
  filter:blur(24px);
  mask-image:
    radial-gradient(circle at 50% 32%, black 0%, black 40%, rgba(0,0,0,.64) 60%, rgba(0,0,0,.10) 84%, transparent 100%);
  -webkit-mask-image:
    radial-gradient(circle at 50% 32%, black 0%, black 40%, rgba(0,0,0,.64) 60%, rgba(0,0,0,.10) 84%, transparent 100%);
}
.transition-line{
  position:absolute;
  height:2px;
  opacity:calc(.10 + var(--feature-progress, 0) * .78);
  transform-origin:left center;
  transform:translateY(calc((1 - var(--feature-progress, 0)) * 26px)) scaleX(calc(.08 + var(--feature-progress, 0) * .92));
  will-change:transform, opacity;
}
.transition-line-a{
  left:8%; right:8%; top:126px;
  background:linear-gradient(90deg, rgba(57,220,255,0), rgba(57,220,255,.28), rgba(57,220,255,0));
}
.transition-line-b{
  left:14%; right:14%; top:214px;
  background:linear-gradient(90deg, rgba(150,83,255,0), rgba(57,220,255,.18), rgba(150,83,255,0));
}
.transition-line-c{
  left:21%; right:21%; top:292px;
  background:linear-gradient(90deg, rgba(255,122,26,0), rgba(57,220,255,.12), rgba(255,122,26,0));
}
.section-top{
  position:relative;
  z-index:2;
  max-width:820px;
  margin:0 auto 64px;
  text-align:center;
  opacity:calc(.26 + var(--feature-progress, 0) * .74);
  transform:translateY(calc((1 - var(--feature-progress, 0)) * 54px));
  will-change:transform, opacity;
}
.section-top h2{
  margin:18px 0 12px;
  font-size:clamp(3rem, 4.5vw, 5rem);
  line-height:.94;
  letter-spacing:-.06em;
}
.section-top p{
  margin:0 auto;
  max-width:620px;
  color:var(--muted);
  font-size:1.12rem;
  line-height:1.6;
}

.timeline{
  position:relative;
  z-index:2;
  max-width:1560px;
  margin:0 auto;
  opacity:calc(.18 + var(--feature-progress, 0) * .82);
  transform:translateY(calc((1 - var(--feature-progress, 0)) * 80px));
  will-change:transform, opacity;
}
.timeline-line-base,
.timeline-line-fill{
  position:absolute;
  left:50%;
  top:84px;
  bottom:84px;
  width:2px;
  transform:translateX(-50%);
  border-radius:999px;
}
.timeline-line-base{
  background:linear-gradient(180deg, rgba(57,220,255,.06), rgba(57,220,255,.14), rgba(57,220,255,.06));
}
.timeline-line-fill{
  bottom:auto;
  height:var(--timeline-fill, 0%);
  background:linear-gradient(180deg, rgba(57,220,255,.18), rgba(57,220,255,.90), rgba(57,220,255,.18));
  box-shadow:0 0 18px rgba(57,220,255,.30);
}

.step-row{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0, 1fr) 130px minmax(0, 1fr);
  align-items:center;
  min-height:220px;
}
.step-center{
  position:relative;
  height:100%;
}
.step-dot{
  position:absolute;
  left:50%;
  top:50%;
  width:16px;
  height:16px;
  border-radius:999px;
  transform:translate(-50%, -50%) scale(.25);
  background:linear-gradient(180deg, var(--cyan), var(--blue));
  box-shadow:0 0 18px rgba(57,220,255,.35);
  opacity:0;
  transition:transform .45s ease, opacity .45s ease;
}
.step-side{
  position:relative;
  display:flex;
  align-items:center;
}
.step-side.left{justify-content:flex-end; padding-right:18px;}
.step-side.right{justify-content:flex-start; padding-left:18px;}
.step-side.left::after,
.step-side.right::before{
  content:"";
  position:absolute;
  top:50%;
  height:2px;
  opacity:0;
  transition:opacity .35s ease, transform .55s ease;
}
.step-side.left::after{
  right:-2px;
  width:118px;
  background:linear-gradient(90deg, rgba(57,220,255,0), rgba(57,220,255,.34));
  transform:scaleX(0);
  transform-origin:right center;
}
.step-side.right::before{
  left:-2px;
  width:118px;
  background:linear-gradient(90deg, rgba(57,220,255,.34), rgba(57,220,255,0));
  transform:scaleX(0);
  transform-origin:left center;
}
.step-side:empty::after,
.step-side:empty::before{
  content:none;
}

.step-card{
  position:relative;
  width:min(100%, 640px);
  padding:24px 24px 22px;
  background:
    linear-gradient(180deg, rgba(7,12,22,.82), rgba(7,12,22,.58)),
    radial-gradient(circle at 12% 18%, var(--accent-a, rgba(57,220,255,.09)), transparent 30%),
    radial-gradient(circle at 92% 82%, var(--accent-b, rgba(255,122,26,.08)), transparent 24%);
  border:1px solid rgba(255,255,255,.07);
  border-radius:16px;
  backdrop-filter:blur(12px);
  box-shadow:0 18px 40px rgba(0,0,0,.18);
  overflow:hidden;
  opacity:0;
  transform:translateY(24px) scale(.985);
  transition:opacity .55s ease, transform .55s ease;
}
.step-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(57,220,255,.08), transparent 24%, transparent 76%, rgba(255,122,26,.06)),
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size:auto, 18px 18px, 18px 18px;
  opacity:.22;
  pointer-events:none;
}
.step-card__body{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) 156px;
  gap:18px;
  align-items:center;
}
.step-copy h3{
  margin:14px 0 10px;
  font-size:1.95rem;
  line-height:1.02;
  letter-spacing:-.04em;
}
.step-copy p{
  margin:0;
  color:var(--muted);
  font-size:1.06rem;
  line-height:1.58;
}
.step-card__visual{
  height:112px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  overflow:hidden;
  box-shadow:0 10px 28px rgba(0,0,0,.18);
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center;
  position:relative;
}
.step-card__visual::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(7,12,22,.06), rgba(7,12,22,.10));
}
.server-shot{
  background-image:
    linear-gradient(180deg, rgba(7,12,22,.02), rgba(7,12,22,.02)),
    url('../assets/server-right.webp');
  filter:saturate(1.12) brightness(1.02);
}
.gaming-shot{
  background-image:
    linear-gradient(180deg, rgba(7,12,22,.02), rgba(7,12,22,.02)),
    url('../assets/gaming-left.webp');
  filter:saturate(1.12) brightness(1.02);
}
.shot-a{background-position:22% 16%;}
.shot-b{background-position:36% 50%;}
.shot-c{background-position:28% 60%;}
.shot-d{background-position:46% 72%;}

.agent{--accent-a: rgba(57,220,255,.12); --accent-b: rgba(150,83,255,.10);}
.files{--accent-a: rgba(57,220,255,.10); --accent-b: rgba(255,122,26,.08);}
.logs{--accent-a: rgba(150,83,255,.10); --accent-b: rgba(57,220,255,.08);}
.jobs{--accent-a: rgba(255,122,26,.10); --accent-b: rgba(57,220,255,.08);}

.step-row.is-visible .step-dot{
  opacity:1;
  transform:translate(-50%, -50%) scale(1);
}
.step-row.is-visible .step-side.left::after,
.step-row.is-visible .step-side.right::before{
  opacity:1;
  transform:scaleX(1);
}
.step-row.is-visible .step-card{
  opacity:1;
  transform:translateY(0) scale(1);
}

.pricing-anchor{height:1px;}

.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s ease, transform .7s ease;
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}

@keyframes leftFloat{
  0%,100%{transform:translate(-50%, -50%) rotate(-1deg) scale(1.06);}
  50%{transform:translate(-50%, calc(-50% - 14px)) rotate(.5deg) scale(1.075);}
}
@keyframes rightFloat{
  0%,100%{transform:translate(-50%, -50%) rotate(.25deg) scale(1.04);}
  50%{transform:translate(-50%, calc(-50% - 12px)) rotate(-.15deg) scale(1.06);}
}
@keyframes particleDrift{
  0%{transform:translate3d(0,0,0) scale(.8); opacity:0;}
  8%{opacity:.75;}
  80%{opacity:.7;}
  100%{transform:translate3d(var(--x), calc(-1 * var(--y)), 0) scale(1.2); opacity:0;}
}
@keyframes codeMove{
  0%{transform:translate3d(0, var(--yjit, 0px), 0) scale(var(--scale, 1)); opacity:0;}
  8%{opacity:var(--op, .82);}
  76%{opacity:calc(var(--op, .82) * .9);}
  100%{transform:translate3d(var(--travel, 138%), var(--yend, 0px), 0) scale(var(--scale, 1)); opacity:0;}
}
@keyframes scanMoveA{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(24px);}
}
@keyframes scanMoveB{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-20px);}
}

@media (max-width:1820px){
  .hero{grid-template-columns:1.08fr .76fr 1.08fr;}
  .media,.center{min-height:720px;}
  .visual{min-height:700px;}
  h1{font-size:clamp(4.8rem, 6vw, 7.4rem);}
}
@media (max-width:1180px){
  .hero{grid-template-columns:1fr; gap:18px; padding-top:18px; padding-bottom:84px;}
  .media,.center{min-height:auto;}
  .center{order:1; padding:26px 0 10px;}
  .media.left{order:2; justify-content:center;}
  .media.right{order:3; justify-content:center;}
  .visual{min-height:620px;}
  .art{width:108%; height:108%;}
  .right-visual .art-right{width:110%; height:110%;}
  .feature-section{margin-top:-110px; padding-top:190px;}
}
@media (max-width:1100px){
  .timeline-line-base,.timeline-line-fill{display:none;}
  .timeline{display:grid; gap:18px;}
  .step-row{
    grid-template-columns:1fr;
    min-height:auto;
  }
  .step-center,.step-side.left::after,.step-side.right::before{display:none;}
  .step-side.left,.step-side.right{
    padding:0;
    justify-content:stretch;
  }
}
@media (max-width:880px){
  .hero,.feature-section{width:min(calc(100% - 28px), var(--max));}
  .visual{min-height:500px;}
  .art{width:104%; height:104%;}
  .right-visual .art-right{width:106%; height:106%;}
  h1{font-size:clamp(3.2rem, 12vw, 5.4rem);}
  .sub,.section-top p,.step-copy p{font-size:1rem;}
  .section-top h2{font-size:clamp(2.3rem, 10vw, 3.8rem);}
  .caption{position:relative; left:auto !important; right:auto !important; bottom:auto !important; margin:18px auto 0; text-align:left !important; align-items:flex-start !important;}
  .code-line{font-size:12px;}
  .step-card__body{grid-template-columns:1fr;}
  .step-card__visual{height:140px;}
  .step-copy h3{font-size:1.58rem;}
}


@media (max-width:1100px){
  .section-transition{
    left:-4%;
    right:-4%;
    height:360px;
  }
}

/* v32: laptop and smaller-screen fixes */
@media (max-width:1500px) and (min-width:1181px){
  .hero{
    width:min(calc(100% - 44px), var(--max));
    grid-template-columns:minmax(300px,1.02fr) minmax(360px,.82fr) minmax(300px,1.02fr);
    gap:8px;
    min-height:calc(100svh - var(--nav-h));
    padding:6px 0 58px;
  }
  .media,.center{
    min-height:clamp(520px, calc(100svh - var(--nav-h) - 28px), 660px);
  }
  .visual{min-height:clamp(520px, calc(100svh - var(--nav-h) - 28px), 660px);}
  .art{width:108%; height:108%;}
  .right-visual .art-right{width:112%; height:112%;}
  .caption{max-width:300px; padding:18px 20px; border-radius:20px;}
  .caption strong{font-size:1.12rem;}
  .caption span{font-size:.92rem; line-height:1.45;}
  .left .caption{left:7%; bottom:4%;}
  .right .caption{right:7%; bottom:4%;}
  .eyebrow-main{min-height:40px; padding:0 14px; font-size:.74rem; margin-bottom:16px;}
  h1{font-size:clamp(3.95rem, 5.15vw, 6.2rem); line-height:.88;}
  .sub{font-size:1.02rem; line-height:1.55; margin-top:18px;}
  .cta{margin-top:24px; gap:10px;}
  .scroll{bottom:8px;}
  .feature-section{width:min(calc(100% - 44px), var(--max)); margin:-82px auto 0; padding:168px 0 88px;}
}

@media (max-height:820px) and (min-width:1181px){
  .hero{padding-bottom:52px;}
  .media,.center,.visual{min-height:clamp(480px, calc(100svh - var(--nav-h) - 24px), 600px);}
  .caption{padding:15px 18px; max-width:280px; gap:7px;}
  .caption strong{font-size:1.04rem;}
  .caption span{font-size:.86rem;}
  h1{font-size:clamp(3.65rem, 4.85vw, 5.7rem);}
  .sub{font-size:.96rem; max-width:520px;}
  .wheel{width:28px; height:44px;}
  .scroll span{display:none;}
}

/* v32: switch to stacked layout later, not already at 1350px */
@media (max-width:1360px) and (min-width:1181px){
  .hero{grid-template-columns:minmax(280px,1fr) minmax(330px,.9fr) minmax(280px,1fr);}
  .feature-section{margin-top:-72px; padding-top:150px;}
}

@media (max-width:1180px){
  .hero{grid-template-columns:1fr; gap:18px; padding-top:18px; padding-bottom:78px;}
  .media,.center{min-height:auto;}
  .center{order:1; padding:26px 0 10px;}
  .media.left{order:2; justify-content:center;}
  .media.right{order:3; justify-content:center;}
  .visual{min-height:560px;}
  .art{width:106%; height:106%;}
  .right-visual .art-right{width:108%; height:108%;}
  .feature-section{margin-top:-92px; padding-top:170px;}
}

.demo-section,.pricing-section,.access-section{
  position:relative;
  z-index:2;
  max-width:1560px;
  margin:86px auto 0;
}
.demo-shell{
  display:grid;
  grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:24px;
  align-items:stretch;
}
.demo-copy,.demo-board,.access-card,.price-card{
  background:
    linear-gradient(180deg, rgba(7,12,22,.78), rgba(7,12,22,.54)),
    radial-gradient(circle at 12% 18%, rgba(57,220,255,.10), transparent 30%),
    radial-gradient(circle at 92% 82%, rgba(150,83,255,.08), transparent 24%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  box-shadow:0 18px 46px rgba(0,0,0,.20);
  backdrop-filter:blur(14px);
}
.demo-copy{padding:30px;}
.demo-copy h2,.access-card h2{font-size:clamp(2.2rem,3.8vw,4.2rem); line-height:.95; letter-spacing:-.055em; margin:18px 0 16px;}
.demo-copy p,.access-card p{color:var(--muted); line-height:1.65; font-size:1.04rem; margin:0;}
.demo-board{padding:18px; display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.demo-node{position:relative; padding:22px; border-radius:18px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.07); overflow:hidden;}
.demo-node::before{content:""; position:absolute; inset:0; background:linear-gradient(120deg, rgba(57,220,255,.10), transparent 42%, rgba(255,122,26,.06)); opacity:.6; pointer-events:none;}
.demo-node span{position:relative; display:inline-flex; color:#04121d; background:linear-gradient(90deg,var(--cyan),#62b0ff); border-radius:999px; padding:6px 10px; font-weight:900; font-size:.78rem;}
.demo-node strong{position:relative; display:block; margin:18px 0 8px; font-size:1.24rem;}
.demo-node p{position:relative; margin:0; color:var(--muted); line-height:1.5;}
.demo-node.active{border-color:rgba(57,220,255,.22); box-shadow:0 0 30px rgba(57,220,255,.08);}
.section-top.plain{opacity:1; transform:none; margin-bottom:34px;}
.pricing-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px;}
.price-card{padding:24px; display:flex; flex-direction:column; min-height:430px;}
.price-label{color:#e3eeff; text-transform:uppercase; font-weight:900; letter-spacing:.10em; font-size:.78rem;}
.price-card h3{font-size:1.55rem; margin:16px 0 4px; letter-spacing:-.035em;}
.price{font-size:2.2rem; margin:8px 0 18px; font-weight:900; color:#fff;}
.price-card ul{list-style:none; padding:0; margin:0 0 22px; display:grid; gap:10px; color:var(--muted); line-height:1.45;}
.price-card li::before{content:"✓"; color:var(--cyan); font-weight:900; margin-right:9px;}
.price-card .btn{margin-top:auto; width:100%;}
.price-card.featured{border-color:rgba(57,220,255,.25); box-shadow:0 22px 60px rgba(35,144,255,.14); transform:translateY(-8px);}
.price-card.hoster{background:linear-gradient(180deg, rgba(12,10,20,.82), rgba(7,12,22,.56)), radial-gradient(circle at 82% 18%, rgba(255,122,26,.10), transparent 28%);}
.access-card{padding:34px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px; align-items:center;}
.access-actions{display:flex; gap:12px; flex-wrap:wrap; justify-content:flex-end;}
.landing-footer{position:relative; z-index:2; max-width:1560px; margin:76px auto 0; padding:26px 0 0; border-top:1px solid rgba(255,255,255,.08); display:flex; justify-content:space-between; gap:18px; color:var(--muted);}
.landing-footer nav{display:flex; gap:18px; flex-wrap:wrap;}
.landing-footer a{color:var(--muted); text-decoration:none;}
.landing-footer a:hover{color:var(--text);}

@media (max-width:1180px){
  .demo-shell,.access-card{grid-template-columns:1fr;}
  .pricing-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .price-card.featured{transform:none;}
  .access-actions{justify-content:flex-start;}
}
@media (max-width:720px){
  .visual{min-height:470px;}
  .demo-board,.pricing-grid{grid-template-columns:1fr;}
  .demo-copy,.access-card,.price-card{padding:22px;}
  .price-card{min-height:auto;}
  .landing-footer{flex-direction:column;}
}


/* =========================================================
   v34 pricing cards — übernommen aus dem GamePanel-Billing-Stil
   ========================================================= */
.pricing-mode{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  margin:-12px auto 26px;
}
.pricing-mode__pill{
  min-height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 14px;
  border-radius:999px;
  color:#c8d7f2;
  font-size:.82rem;
  font-weight:850;
  letter-spacing:.04em;
  text-transform:uppercase;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.035);
}
.pricing-mode__pill.is-active{
  color:#06111e;
  border-color:transparent;
  background:linear-gradient(135deg, #8df0ff, #58adff);
  box-shadow:0 14px 34px rgba(35,144,255,.20);
}
.billing-plan-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
  align-items:stretch;
}
.pricing-section .billing-card{
  --billing-accent:#58adff;
  --billing-accent-soft:rgba(88,173,255,.14);
  --billing-btn-text:#06111e;
  position:relative;
  min-height:600px;
  padding:24px;
  border-radius:30px;
  border:1px solid rgba(255,255,255,.07);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:18px;
  background:
    linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--billing-accent) 34%, transparent) 52%, transparent 100%) top/100% 1px no-repeat,
    radial-gradient(circle at 88% 14%, var(--billing-accent-soft), transparent 24%),
    radial-gradient(circle at 22% 100%, color-mix(in srgb, var(--billing-accent) 12%, transparent), transparent 28%),
    linear-gradient(180deg, rgba(12,20,35,.98), rgba(8,12,21,.995));
  box-shadow:0 18px 40px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.03);
  transition:transform .24s ease, border-color .24s ease, box-shadow .24s ease, filter .24s ease;
}
.pricing-section .billing-card:hover{
  transform:translateY(-6px);
  border-color:color-mix(in srgb, var(--billing-accent) 36%, rgba(255,255,255,.08));
  box-shadow:0 26px 56px rgba(0,0,0,.34), 0 0 0 1px color-mix(in srgb, var(--billing-accent) 12%, transparent), inset 0 1px 0 rgba(255,255,255,.04);
}
.pricing-section .billing-card.is-active{
  border-color:color-mix(in srgb, var(--billing-accent) 54%, rgba(255,255,255,.10));
  box-shadow:0 22px 52px rgba(0,0,0,.30), 0 0 0 1px color-mix(in srgb, var(--billing-accent) 16%, transparent), inset 0 1px 0 rgba(255,255,255,.05);
}
.pricing-section .billing-card.is-recommended{
  transform:translateY(-8px);
}
.pricing-section .billing-card.is-recommended:hover{
  transform:translateY(-14px);
}
.pricing-section .billing-card__intro{display:grid; grid-template-rows:minmax(42px,auto) minmax(112px,auto); gap:16px;}
.pricing-section .billing-card__top{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; min-height:42px;}
.pricing-section .billing-card__eyebrow,
.pricing-section .billing-card__badge{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:0 12px;
  border-radius:999px;
  font-size:.74rem;
  font-weight:850;
  letter-spacing:.03em;
  white-space:nowrap;
}
.pricing-section .billing-card__eyebrow{color:#d9e7ff; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03);}
.pricing-section .billing-card__badge{color:#deebff; border:1px solid color-mix(in srgb, var(--billing-accent) 36%, rgba(255,255,255,.08)); background:color-mix(in srgb, var(--billing-accent) 9%, rgba(255,255,255,.02)); box-shadow:0 0 18px color-mix(in srgb, var(--billing-accent) 10%, transparent);}
.pricing-section .billing-card__badge.is-hot{color:#ffe0e0; border-color:rgba(255,100,100,.42); background:rgba(255,80,80,.08); box-shadow:0 0 18px rgba(255,80,80,.14);}
.pricing-section .billing-card__badge.is-active{color:#ffffff; border-color:rgba(255,255,255,.22); background:rgba(255,255,255,.05); box-shadow:none;}
.pricing-section .billing-card__head{display:grid; align-content:start; gap:8px; min-height:112px;}
.pricing-section .billing-card__title{margin:0; color:#f6f9ff; font-size:2rem; line-height:1; letter-spacing:-.05em;}
.pricing-section .billing-card__copy{margin:0; color:#b7c7e6; font-size:1rem; line-height:1.45; max-width:32ch;}
.pricing-section .billing-card__price{display:flex; align-items:flex-end; gap:8px; padding:2px 0 0;}
.pricing-section .billing-card__price strong{color:var(--billing-accent); font-size:3.45rem; line-height:.92; letter-spacing:-.07em; text-shadow:0 0 24px color-mix(in srgb, var(--billing-accent) 18%, transparent);}
.pricing-section .billing-card__price strong span{font-size:.58em; margin-left:2px;}
.pricing-section .billing-card__price small{color:#b9c8e5; font-size:1rem; font-weight:850; transform:translateY(-8px);}
.pricing-section .billing-card__features{display:grid; gap:12px;}
.pricing-section .billing-card__feature{position:relative; display:flex; align-items:center; gap:12px; min-height:54px; padding:0 15px; border-radius:18px; border:1px solid rgba(255,255,255,.06); background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)); color:#eef5ff; font-weight:650;}
.pricing-section .billing-card__feature span:last-child{line-height:1.28;}
.pricing-section .billing-card__feature-dot{flex:0 0 auto; width:10px; height:10px; border-radius:50%; background:var(--billing-accent); box-shadow:0 0 14px color-mix(in srgb, var(--billing-accent) 46%, transparent);}
.pricing-section .billing-card__footer{margin-top:auto; display:grid; gap:12px;}
.pricing-section .billing-card__button{min-height:52px; display:inline-flex; align-items:center; justify-content:center; text-decoration:none; border:none; border-radius:18px; cursor:pointer; color:var(--billing-btn-text); font-size:.98rem; font-weight:900; background:linear-gradient(135deg, color-mix(in srgb, var(--billing-accent) 25%, white) 0%, var(--billing-accent) 56%, color-mix(in srgb, var(--billing-accent) 86%, black) 100%); box-shadow:0 14px 30px color-mix(in srgb, var(--billing-accent) 20%, transparent), inset 0 1px 0 rgba(255,255,255,.35); transition:transform .18s ease, box-shadow .18s ease, filter .18s ease, opacity .18s ease;}
.pricing-section .billing-card__button:hover{transform:translateY(-2px); filter:brightness(1.03); box-shadow:0 18px 36px color-mix(in srgb, var(--billing-accent) 24%, transparent), inset 0 1px 0 rgba(255,255,255,.35);}
.pricing-section .billing-card__button.is-disabled{cursor:default; color:#f8fbff; background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)); box-shadow:inset 0 1px 0 rgba(255,255,255,.08);}
.pricing-section .billing-card__button.is-disabled:hover{transform:none; filter:none;}
.pricing-section .billing-card__hint{margin:0; color:#a8b7d4; font-size:.9rem; line-height:1.45;}
.pricing-section .billing-card--free{--billing-accent:#f4f7ff; --billing-accent-soft:rgba(255,255,255,.12); --billing-btn-text:#08111d;}
.pricing-section .billing-card--basic{--billing-accent:#58adff; --billing-accent-soft:rgba(88,173,255,.16); --billing-btn-text:#07111c;}
.pricing-section .billing-card--pro{--billing-accent:#49d9a8; --billing-accent-soft:rgba(73,217,168,.16); --billing-btn-text:#07150f;}
.pricing-section .billing-card--premium{--billing-accent:#c699ff; --billing-accent-soft:rgba(198,153,255,.16); --billing-btn-text:#13081a;}
.hoster-teaser{
  position:relative;
  z-index:2;
  margin:22px auto 0;
  padding:24px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:20px;
  align-items:center;
  border-radius:28px;
  border:1px solid rgba(255,192,122,.15);
  background:
    radial-gradient(circle at 92% 22%, rgba(255,192,122,.13), transparent 30%),
    linear-gradient(180deg, rgba(12,10,20,.78), rgba(7,12,22,.56));
  box-shadow:0 18px 46px rgba(0,0,0,.20);
}
.hoster-teaser__label{display:inline-flex; color:#ffc07a; font-weight:900; letter-spacing:.10em; text-transform:uppercase; font-size:.76rem; margin-bottom:8px;}
.hoster-teaser h3{margin:0 0 8px; font-size:clamp(1.6rem,2.4vw,2.4rem); line-height:1.04; letter-spacing:-.04em;}
.hoster-teaser p{margin:0; color:var(--muted); line-height:1.55; max-width:860px;}
@media (max-width:1500px){
  .pricing-section .billing-card{padding:20px; min-height:570px; border-radius:26px;}
  .pricing-section .billing-card__title{font-size:1.78rem;}
  .pricing-section .billing-card__price strong{font-size:3rem;}
  .pricing-section .billing-card__eyebrow,
  .pricing-section .billing-card__badge{font-size:.68rem; padding:0 9px;}
  .pricing-section .billing-card__feature{padding:0 12px; min-height:50px; font-size:.94rem;}
}
@media (max-width:1180px){
  .billing-plan-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .pricing-section .billing-card.is-recommended,
  .pricing-section .billing-card.is-recommended:hover{transform:none;}
}
@media (max-width:720px){
  .billing-plan-grid{grid-template-columns:1fr;}
  .pricing-section .billing-card{min-height:auto; padding:20px;}
  .pricing-section .billing-card__intro{grid-template-rows:auto auto;}
  .hoster-teaser{grid-template-columns:1fr; padding:22px;}
}

/* =========================================================
   v39 hero headline polish — avoids clipped letters on laptops
   ========================================================= */
.center-wrap{overflow:visible;}
h1{
  line-height:.94;
  letter-spacing:-.066em;
  padding:.035em .025em .115em;
  overflow:visible;
}
h1 .accent{
  display:inline-block;
  padding-inline:.018em;
  padding-bottom:.035em;
}
@media (max-width:1500px) and (min-width:1181px){
  h1{
    font-size:clamp(4.35rem, 5.55vw, 6.9rem);
    line-height:.965;
    letter-spacing:-.058em;
  }
}
@media (max-width:720px){
  h1{line-height:1.02; letter-spacing:-.045em;}
}

/* =========================================================
   v40 pricing/auth/legal polish
   ========================================================= */
button.btn,
.landing-footer button{
  font-family:inherit;
  cursor:pointer;
}
.pricing-control-rail{
  position:relative;
  z-index:2;
  margin:-10px auto 24px;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
}
.pricing-control-rail__item{
  min-height:34px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:0 13px;
  border-radius:999px;
  color:#cfe4ff;
  font-size:.78rem;
  font-weight:850;
  letter-spacing:.025em;
  border:1px solid rgba(57,220,255,.14);
  background:
    radial-gradient(circle at 12% 50%, rgba(57,220,255,.17), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 14px 28px rgba(0,0,0,.16);
}
.pricing-control-rail__item::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--cyan), var(--purple));
  box-shadow:0 0 14px rgba(57,220,255,.38);
}
.pricing-section .billing-card{
  isolation:isolate;
  border-color:rgba(255,255,255,.09);
}
.pricing-section .billing-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.62;
  z-index:-1;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--billing-accent) 20%, transparent), transparent 28%, transparent 72%, color-mix(in srgb, var(--billing-accent) 10%, transparent)),
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size:auto, 18px 18px, 18px 18px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.94), rgba(0,0,0,.32) 58%, rgba(0,0,0,.18));
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.94), rgba(0,0,0,.32) 58%, rgba(0,0,0,.18));
}
.pricing-section .billing-card::after{
  content:attr(data-admin-key);
  position:absolute;
  right:18px;
  bottom:16px;
  max-width:70%;
  color:rgba(195,214,244,.42);
  font-size:.65rem;
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
  pointer-events:none;
}
.pricing-section .billing-card__price{
  align-items:stretch;
  flex-direction:column;
  gap:6px;
  padding:8px 0 4px;
}
.pricing-section .billing-card__price-ribbon-row{
  min-height:28px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
}
.pricing-section .billing-card__discount-ribbon{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  color:#160b02;
  font-size:.72rem;
  font-weight:950;
  letter-spacing:.03em;
  background:linear-gradient(135deg, #ffdc7d, #ff9f43 54%, #ff7a1a);
  box-shadow:0 10px 22px rgba(255,122,26,.18), inset 0 1px 0 rgba(255,255,255,.38);
}
.pricing-section .billing-card__price-main{
  display:flex;
  align-items:flex-end;
  gap:8px;
  min-height:62px;
}
.pricing-section .billing-card__price-main strong{
  color:var(--billing-accent);
  font-size:clamp(2.35rem, 3.25vw, 3.2rem);
  line-height:.92;
  letter-spacing:-.07em;
  text-shadow:0 0 24px color-mix(in srgb, var(--billing-accent) 18%, transparent);
}
.pricing-section .billing-card__price-main small{
  color:#b9c8e5;
  font-size:.96rem;
  font-weight:850;
  transform:translateY(-7px);
}
.pricing-section .billing-card__price > strong,
.pricing-section .billing-card__price > small{display:none;}
.pricing-section .billing-card__price-meta{
  min-height:18px;
  color:#94a8c9;
  font-size:.78rem;
  font-weight:750;
}
.pricing-section .billing-card__old-price{
  margin-right:7px;
  color:#aebbd1;
  text-decoration:line-through;
  text-decoration-thickness:2px;
  text-decoration-color:rgba(255,100,100,.62);
}
.pricing-section .billing-card__button{
  position:relative;
  overflow:hidden;
}
.pricing-section .billing-card__button::after{
  content:"";
  position:absolute;
  inset:-80% -30%;
  background:linear-gradient(110deg, transparent 36%, rgba(255,255,255,.32), transparent 64%);
  transform:translateX(-70%) rotate(10deg);
  transition:transform .65s ease;
}
.pricing-section .billing-card__button:hover::after{transform:translateX(70%) rotate(10deg);}
.access-card--split{
  grid-template-columns:minmax(0,.92fr) minmax(420px,1.08fr);
  padding:34px;
  overflow:hidden;
  position:relative;
}
.access-card--split::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 78% 18%, rgba(57,220,255,.10), transparent 28%),
    radial-gradient(circle at 100% 92%, rgba(150,83,255,.12), transparent 30%);
}
.access-card--split > *{position:relative; z-index:1;}
.auth-preview-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.auth-preview-card{
  min-height:260px;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:22px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at 18% 16%, rgba(57,220,255,.12), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.022));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.auth-preview-card--login{
  background:
    radial-gradient(circle at 18% 16%, rgba(150,83,255,.13), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.022));
}
.auth-preview-card__label{
  color:var(--cyan);
  text-transform:uppercase;
  font-weight:950;
  letter-spacing:.10em;
  font-size:.72rem;
}
.auth-preview-card h3{margin:0; font-size:1.55rem; line-height:1.02; letter-spacing:-.04em;}
.auth-preview-card p{font-size:.96rem; line-height:1.55; color:var(--muted);}
.auth-preview-card .btn{margin-top:auto; width:100%;}
.legal-section{
  position:relative;
  z-index:2;
  max-width:1560px;
  margin:76px auto 0;
}
.legal-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}
.legal-card{
  min-height:162px;
  text-align:left;
  color:var(--text);
  font-family:inherit;
  border:none;
  cursor:pointer;
  padding:22px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at 88% 18%, rgba(57,220,255,.11), transparent 28%),
    linear-gradient(180deg, rgba(7,12,22,.78), rgba(7,12,22,.50));
  box-shadow:0 18px 46px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.legal-card:hover{
  transform:translateY(-4px);
  border-color:rgba(57,220,255,.22);
  box-shadow:0 24px 54px rgba(0,0,0,.25), 0 0 0 1px rgba(57,220,255,.08);
}
.legal-card span{
  display:inline-flex;
  color:#04121d;
  background:linear-gradient(90deg,var(--cyan),#62b0ff);
  border-radius:999px;
  padding:6px 10px;
  font-weight:950;
  font-size:.76rem;
}
.legal-card strong{display:block; margin:18px 0 8px; font-size:1.22rem;}
.legal-card small{display:block; color:var(--muted); line-height:1.45; font-size:.92rem;}
.landing-footer button{
  color:var(--muted);
  text-decoration:none;
  border:0;
  padding:0;
  background:transparent;
  font:inherit;
  cursor:pointer;
}
.landing-footer button:hover{color:var(--text);}
.dialog-layer{
  position:fixed;
  inset:0;
  z-index:100;
  display:grid;
  place-items:center;
  padding:22px;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
}
.dialog-layer.is-open{opacity:1; pointer-events:auto;}
.dialog-backdrop{
  position:absolute;
  inset:0;
  background:rgba(2,7,15,.72);
  backdrop-filter:blur(13px);
}
.dialog-card{
  position:relative;
  width:min(720px, 100%);
  max-height:min(760px, calc(100svh - 44px));
  overflow:auto;
  border-radius:30px;
  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(circle at 16% 10%, rgba(57,220,255,.18), transparent 28%),
    radial-gradient(circle at 94% 92%, rgba(150,83,255,.15), transparent 30%),
    linear-gradient(180deg, rgba(8,15,28,.98), rgba(5,9,18,.98));
  box-shadow:0 34px 90px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
  padding:30px;
  transform:translateY(16px) scale(.985);
  transition:transform .2s ease;
}
.dialog-layer.is-open .dialog-card{transform:translateY(0) scale(1);}
.dialog-close{
  position:absolute;
  right:18px;
  top:18px;
  width:42px;
  height:42px;
  border-radius:50%;
  color:var(--text);
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.045);
  font-size:1.6rem;
  cursor:pointer;
}
.dialog-content{display:none; padding-right:10px;}
.dialog-content.is-active{display:block;}
.dialog-kicker{
  display:inline-flex;
  color:var(--cyan);
  font-weight:950;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-size:.72rem;
  margin-bottom:12px;
}
.dialog-card h2{margin:0 52px 12px 0; font-size:clamp(2rem,4vw,3.2rem); line-height:1; letter-spacing:-.055em;}
.dialog-card p{color:var(--muted); line-height:1.62; margin:0 0 18px;}
.auth-form{display:grid; gap:14px; margin-top:18px;}
.auth-form label{display:grid; gap:8px; color:#dbe8ff; font-weight:800;}
.auth-form input{
  min-height:50px;
  border-radius:16px;
  color:#dbe8ff;
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.045);
  padding:0 14px;
}
.auth-form input:disabled{opacity:.72;}
.auth-form button:disabled{opacity:.72; cursor:not-allowed;}
.dialog-list{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:18px;}
.dialog-list span{
  min-height:44px;
  display:flex;
  align-items:center;
  border-radius:16px;
  padding:0 14px;
  color:#dbe8ff;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.04);
  font-weight:800;
}
.dialog-warning{
  margin-top:18px !important;
  padding:14px 16px;
  border-radius:16px;
  border:1px solid rgba(255,192,122,.18);
  color:#ffd8ad !important;
  background:rgba(255,122,26,.07);
}
@media (max-width:1180px){
  .access-card--split{grid-template-columns:1fr;}
  .legal-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:720px){
  .auth-preview-grid,.legal-grid,.dialog-list{grid-template-columns:1fr;}
  .pricing-control-rail{justify-content:flex-start;}
  .dialog-card{padding:24px 20px; border-radius:24px;}
  .dialog-card h2{margin-right:44px;}
}

/* v41: dialogs, cookie banner and legal/auth polish */
body.dialog-open{overflow:hidden;}
.dialog-layer{z-index:5000;}
.dialog-backdrop{
  background:
    radial-gradient(circle at 50% 18%, rgba(57,220,255,.08), transparent 28%),
    linear-gradient(180deg, rgba(1,5,12,.94), rgba(1,6,14,.92));
  backdrop-filter:blur(20px) saturate(112%);
}
.dialog-card{
  background:
    radial-gradient(circle at 16% 10%, rgba(57,220,255,.16), transparent 28%),
    radial-gradient(circle at 94% 92%, rgba(150,83,255,.13), transparent 30%),
    linear-gradient(180deg, #08111f 0%, #050a13 100%);
  box-shadow:0 38px 120px rgba(0,0,0,.72), 0 0 0 1px rgba(57,220,255,.06), inset 0 1px 0 rgba(255,255,255,.08);
}
.dialog-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.014) 1px, transparent 1px);
  background-size:22px 22px;
  opacity:.42;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.92), rgba(0,0,0,.18));
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.92), rgba(0,0,0,.18));
}
.dialog-content{position:relative; z-index:1;}
.form-grid{display:grid; gap:14px;}
.form-grid--two{grid-template-columns:repeat(2,minmax(0,1fr));}
.auth-form select{
  min-height:50px;
  border-radius:16px;
  color:#dbe8ff;
  border:1px solid rgba(255,255,255,.09);
  background:#10192a;
  padding:0 14px;
  font:inherit;
  font-weight:750;
}
.form-check{
  display:flex !important;
  grid-template-columns:none !important;
  align-items:flex-start;
  gap:10px !important;
  color:#c9d8ee !important;
  font-size:.94rem;
  line-height:1.45;
  font-weight:650 !important;
}
.form-check input{width:18px; height:18px; min-height:auto; margin-top:2px; accent-color:var(--cyan);}
.form-check--small{font-size:.88rem; margin:0;}
.form-row{display:flex; gap:14px; align-items:center; flex-wrap:wrap;}
.form-row--between{justify-content:space-between;}
.link-button{
  color:var(--cyan);
  border:0;
  padding:0;
  background:transparent;
  font:inherit;
  font-weight:800;
  cursor:pointer;
}
.link-button:hover{text-decoration:underline;}
.form-feedback{display:none; padding:12px 14px; border-radius:16px; font-weight:800; line-height:1.4;}
.form-feedback.is-error{display:block; color:#ffd6d6; border:1px solid rgba(255,110,110,.20); background:rgba(255,76,76,.08);}
.form-feedback.is-success{display:block; color:#cfffe8; border:1px solid rgba(73,217,168,.24); background:rgba(73,217,168,.09);}
.form-note{color:#8fa3c2; line-height:1.45;}
.legal-copy__body{display:grid; gap:8px;}
.legal-copy__body h3{margin:16px 0 0; color:#ecf5ff; font-size:1.05rem; letter-spacing:-.02em;}
.legal-copy__body p{margin:0 0 6px;}
.dialog-actions{display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; margin-top:18px;}
.cookie-settings-form{display:grid; gap:12px; margin-top:16px;}
.cookie-choice{
  display:flex;
  gap:12px;
  align-items:flex-start;
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
}
.cookie-choice input{width:20px; height:20px; accent-color:var(--cyan); margin-top:2px;}
.cookie-choice strong{display:block; color:#ecf5ff; margin-bottom:3px;}
.cookie-choice small{display:block; color:#9eb0cf; line-height:1.35;}
.cookie-choice.is-locked{opacity:.84;}
.cookie-banner{
  position:fixed;
  left:50%;
  bottom:24px;
  z-index:4500;
  width:min(1040px, calc(100% - 32px));
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:18px;
  align-items:center;
  padding:18px;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(circle at 8% 50%, rgba(57,220,255,.20), transparent 28%),
    radial-gradient(circle at 100% 50%, rgba(150,83,255,.15), transparent 32%),
    linear-gradient(180deg, rgba(8,15,28,.96), rgba(5,9,18,.96));
  box-shadow:0 28px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08);
  transform:translateX(-50%) translateY(18px);
  opacity:0;
  transition:opacity .25s ease, transform .25s ease;
}
.cookie-banner[hidden]{display:none;}
.cookie-banner.is-visible{opacity:1; transform:translateX(-50%) translateY(0);}
.cookie-banner__orb{
  width:46px;
  height:46px;
  border-radius:50%;
  background:conic-gradient(from 120deg, #39dcff, #9653ff, #ff7a1a, #49d9a8, #39dcff);
  box-shadow:0 0 24px rgba(57,220,255,.24);
}
.cookie-banner__copy strong{display:block; color:#f4f8ff; font-size:1.05rem; margin-bottom:4px;}
.cookie-banner__copy p{margin:0; color:#afc0dc; line-height:1.45;}
.cookie-banner__actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:flex-end;}
.cookie-banner__actions .btn{min-height:42px; padding:0 15px;}
@media (max-width:820px){
  .cookie-banner{grid-template-columns:1fr; align-items:start;}
  .cookie-banner__orb{display:none;}
  .cookie-banner__actions{justify-content:flex-start;}
  .form-grid--two{grid-template-columns:1fr;}
}
@media (max-width:520px){
  .cookie-banner{bottom:14px; border-radius:22px;}
  .cookie-banner__actions .btn{width:100%;}
  .dialog-actions .btn{width:100%;}
}

/* =========================================================
   v42 modal stacking, cookie layering and long legal texts
   ========================================================= */
body > .dialog-layer{
  z-index:100000;
  position:fixed;
  inset:0;
  isolation:isolate;
}
body > .dialog-layer .dialog-backdrop{z-index:0;}
body > .dialog-layer .dialog-card{
  z-index:1;
  background:
    radial-gradient(circle at 14% 8%, rgba(57,220,255,.14), transparent 28%),
    radial-gradient(circle at 94% 96%, rgba(150,83,255,.13), transparent 30%),
    linear-gradient(180deg, rgb(8,17,31) 0%, rgb(4,9,18) 100%);
  background-color:#06101d;
  opacity:1;
}
body > .dialog-layer .dialog-card::before{opacity:.24;}
body > .dialog-layer[data-active-dialog="register"] .dialog-card,
body > .dialog-layer[data-active-dialog="login"] .dialog-card{width:min(760px, 100%);}
body > .dialog-layer[data-active-dialog="imprint"] .dialog-card,
body > .dialog-layer[data-active-dialog="privacy"] .dialog-card,
body > .dialog-layer[data-active-dialog="terms"] .dialog-card,
body > .dialog-layer[data-active-dialog="withdrawal"] .dialog-card{width:min(980px, 100%);}
body > .cookie-banner{z-index:90000;}
.cookie-banner__actions .btn{white-space:nowrap;}
@media (max-width:1120px){
  .cookie-banner{grid-template-columns:auto 1fr;}
  .cookie-banner__actions{grid-column:1 / -1; justify-content:flex-start;}
}
.legal-longcopy{
  gap:10px;
  font-size:.96rem;
}
.legal-longcopy .legal-status{
  margin:4px 0 12px;
  padding:14px 16px;
  border-radius:18px;
  border:1px solid rgba(57,220,255,.18);
  background:linear-gradient(135deg, rgba(57,220,255,.08), rgba(150,83,255,.055));
  color:#dbeaff;
}
.legal-longcopy h3{
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.07);
}
.legal-longcopy p{
  color:#aebfda;
  line-height:1.68;
}
.legal-longcopy strong{color:#f4f8ff;}
@media (max-width:720px){
  body > .dialog-layer[data-active-dialog="imprint"] .dialog-card,
  body > .dialog-layer[data-active-dialog="privacy"] .dialog-card,
  body > .dialog-layer[data-active-dialog="terms"] .dialog-card,
  body > .dialog-layer[data-active-dialog="withdrawal"] .dialog-card,
  body > .dialog-layer[data-active-dialog="register"] .dialog-card,
  body > .dialog-layer[data-active-dialog="login"] .dialog-card{width:100%;}
  .legal-longcopy{font-size:.9rem;}
}


/* v43: unified account notice in registration */
.account-unified-note{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  border:1px solid rgba(57,220,255,.18);
  background:
    radial-gradient(circle at 8% 20%, rgba(57,220,255,.14), transparent 28%),
    linear-gradient(135deg, rgba(57,220,255,.075), rgba(150,83,255,.055));
  padding:14px 16px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.account-unified-note::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:linear-gradient(180deg, rgba(57,220,255,.95), rgba(150,83,255,.75), rgba(82,255,188,.75));
}
.account-unified-note strong{
  display:block;
  color:#ecf7ff;
  font-size:.96rem;
  letter-spacing:-.01em;
  margin-bottom:4px;
}
.account-unified-note p{
  margin:0 !important;
  color:#aebfda !important;
  font-size:.92rem;
  line-height:1.55 !important;
}

/* =========================================================
   v44 final landing cleanup: stable modals, cookie banner,
   pricing, language carousel and laptop/mobile polish
   ========================================================= */
:root{--dialog-safe:clamp(14px,2.4vw,28px);}

/* Keep global CTA/buttons above normal art, but below overlays. */
.nav,.btn,.language-switcher{position:relative;}
.nav{z-index:70;}
.language-panel{z-index:120;}

/* Hero typography: prevent visual clipping on compact laptop heights. */
.center-wrap h1,
.center h1{
  line-height:.92;
  padding:.05em 0 .10em;
  margin-block:.12em .18em;
  overflow:visible;
  text-wrap:balance;
}
.center-wrap .sub{max-width:54ch; margin-inline:auto;}
@media (max-height:760px) and (min-width:980px){
  .center-wrap h1,.center h1{font-size:clamp(3.8rem,8.4vw,7.2rem); line-height:.93;}
  .center-wrap .sub{font-size:.98rem; line-height:1.45;}
  .center-wrap .cta{margin-top:14px;}
  .visual{min-height:600px;}
}
@media (max-width:1500px){
  .center-wrap h1,.center h1{letter-spacing:-.075em;}
}
@media (max-width:720px){
  .center-wrap h1,.center h1{letter-spacing:-.06em; line-height:.98;}
}

/* Language panel: compact, premium, same visible size with internal carousel. */
.language-panel{
  width:min(760px, calc(100vw - 28px));
  max-height:min(680px, calc(100svh - 110px));
  overflow:hidden;
  border-color:rgba(57,220,255,.18);
  box-shadow:0 36px 110px rgba(0,0,0,.56), 0 0 0 1px rgba(255,255,255,.035), inset 0 1px 0 rgba(255,255,255,.08);
}
.language-panel::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(135deg, rgba(255,255,255,.055), transparent 28%, rgba(57,220,255,.035) 72%, transparent);
  opacity:.7;
}
.language-panel__head,.language-panel__meta,.language-carousel,.language-carousel__dots,.language-note{position:relative; z-index:1;}
.language-panel__meta{gap:8px; flex-wrap:wrap;}
.language-panel__meta-pill{min-height:30px; padding:0 11px; font-size:.78rem;}
.language-carousel{display:grid; grid-template-columns:42px minmax(0,1fr) 42px; gap:10px; align-items:center;}
.language-carousel__arrow{width:42px; min-height:78px; border-radius:18px;}
.language-carousel__viewport{overflow:hidden;}
.language-card{
  min-height:104px;
  padding:14px;
  gap:12px;
  border-radius:20px;
}
.language-card__flag{width:50px; height:38px; border-radius:12px;}
.language-card__name{font-size:.96rem;}
.language-card__meta{font-size:.78rem; line-height:1.25;}
.language-card__badge{font-size:.7rem; min-height:24px; padding:0 8px; white-space:nowrap;}
.language-note{margin-top:12px; max-height:72px; overflow:auto;}
@media (max-width:860px){
  .language-panel{left:50%; right:auto; transform:translateX(-50%) translateY(8px); top:calc(100% + 12px); width:min(680px, calc(100vw - 22px)); max-height:calc(100svh - 92px);}
  .language-panel.is-open,.language-switcher.is-open .language-panel{transform:translateX(-50%) translateY(0);}
}
@media (max-width:560px){
  .language-panel{position:fixed; top:10px; left:11px; right:11px; width:auto; transform:none; max-height:calc(100svh - 20px); overflow:auto;}
  .language-panel.is-open,.language-switcher.is-open .language-panel{transform:none;}
  .language-carousel{grid-template-columns:34px minmax(0,1fr) 34px; gap:6px;}
  .language-carousel__arrow{width:34px; min-height:64px;}
  .language-card{min-height:96px; padding:12px;}
}

/* Pricing: match panel-like cards, keep price/ribbon stable at 1350px. */
.pricing-section .section-top{max-width:1020px;}
.pricing-control-rail{
  position:relative;
  margin:0 auto 24px;
  padding:8px;
  border-radius:24px;
  width:max-content;
  max-width:100%;
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 18px 42px rgba(0,0,0,.18);
}
.pricing-grid{align-items:stretch;}
.pricing-section .billing-card{
  min-height:620px;
  display:flex;
  flex-direction:column;
  isolation:isolate;
}
.pricing-section .billing-card__top{align-items:center; min-height:40px;}
.pricing-section .billing-card__title{font-size:clamp(1.55rem,1.9vw,2rem);}
.pricing-section .billing-card__copy{font-size:.94rem; min-height:62px;}
.pricing-section .billing-card__price{display:block; min-height:112px; padding-top:8px;}
.pricing-section .billing-card__price-ribbon-row{position:relative; display:flex; justify-content:flex-start; min-height:28px; margin-bottom:4px;}
.pricing-section .billing-card__discount-ribbon{
  position:static;
  transform:none;
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 11px;
  border-radius:999px;
  font-size:.75rem;
  line-height:1;
  white-space:nowrap;
}
.pricing-section .billing-card__price-main{display:flex; align-items:flex-end; gap:8px; min-width:0;}
.pricing-section .billing-card__price-main strong{font-size:clamp(2.55rem,3.6vw,3.45rem); line-height:.9; white-space:nowrap;}
.pricing-section .billing-card__price-main small{transform:translateY(-6px); white-space:nowrap;}
.pricing-section .billing-card__price-meta{font-size:.83rem; min-height:32px;}
.pricing-section .billing-card__features{margin-top:2px;}
.pricing-section .billing-card__feature{font-size:.92rem; min-height:50px;}
.pricing-section .billing-card__footer{padding-top:4px;}
@media (max-width:1440px){
  .pricing-grid{grid-template-columns:repeat(2,minmax(0,1fr)); max-width:980px; margin-inline:auto;}
  .pricing-section .billing-card{min-height:560px;}
}
@media (max-width:700px){
  .pricing-grid{grid-template-columns:1fr;}
  .pricing-section .billing-card{min-height:auto;}
  .pricing-control-rail{width:100%; justify-content:flex-start; overflow:auto; scrollbar-width:thin;}
}

/* Dialog layer: fully isolate modals from the hero, no text bleeding. */
body.dialog-open .page{filter:blur(3px) saturate(.75); pointer-events:none; user-select:none;}
body.dialog-open .cookie-banner{pointer-events:none; opacity:.24;}
body > .dialog-layer{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--dialog-safe);
}
body > .dialog-layer .dialog-backdrop{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 10%, rgba(57,220,255,.12), transparent 30%),
    radial-gradient(circle at 80% 92%, rgba(150,83,255,.10), transparent 28%),
    rgba(1,5,12,.88);
}
body > .dialog-layer .dialog-card{
  position:relative;
  margin:0;
  max-height:calc(100svh - (var(--dialog-safe) * 2));
  overflow:auto;
  overscroll-behavior:contain;
  border-radius:clamp(22px,2.2vw,34px);
  padding:clamp(24px,3vw,42px);
  scrollbar-width:thin;
  border-color:rgba(57,220,255,.17);
}
body > .dialog-layer[data-active-dialog="login"] .dialog-card,
body > .dialog-layer[data-active-dialog="register"] .dialog-card,
body > .dialog-layer[data-active-dialog="hoster"] .dialog-card,
body > .dialog-layer[data-active-dialog="cookie-settings"] .dialog-card{width:min(760px, calc(100vw - (var(--dialog-safe) * 2)));}
body > .dialog-layer[data-active-dialog="imprint"] .dialog-card,
body > .dialog-layer[data-active-dialog="privacy"] .dialog-card,
body > .dialog-layer[data-active-dialog="terms"] .dialog-card,
body > .dialog-layer[data-active-dialog="withdrawal"] .dialog-card{width:min(1040px, calc(100vw - (var(--dialog-safe) * 2)));}
.dialog-card h2{font-size:clamp(2rem,4vw,3.25rem); line-height:.98; padding-bottom:.08em; overflow:visible;}
.dialog-close{position:sticky; top:0; margin-left:auto; z-index:4;}
.dialog-content.is-active{display:block;}
.auth-form input,.auth-form select{background:rgba(10,19,34,.98); border-color:rgba(255,255,255,.12); box-shadow:inset 0 1px 0 rgba(255,255,255,.04);}
.auth-form input:focus,.auth-form select:focus{outline:none; border-color:rgba(57,220,255,.42); box-shadow:0 0 0 4px rgba(57,220,255,.10), inset 0 1px 0 rgba(255,255,255,.04);}
.form-note{font-size:.88rem;}
.account-unified-note{margin:2px 0 4px;}
.legal-longcopy{padding-right:4px;}
.legal-longcopy h3{scroll-margin-top:20px;}
@media (max-width:760px){
  :root{--dialog-safe:10px;}
  body > .dialog-layer{align-items:stretch;}
  body > .dialog-layer .dialog-card{max-height:calc(100svh - 20px); width:100% !important;}
  .dialog-card h2{font-size:clamp(1.9rem,10vw,2.65rem);}
  .form-grid--two{grid-template-columns:1fr;}
}

/* Cookie banner: less intrusive and never under hero buttons. */
body > .cookie-banner{
  width:min(1080px, calc(100% - 28px));
  bottom:18px;
  padding:14px;
  border-radius:24px;
  grid-template-columns:42px minmax(0,1fr) auto;
  gap:14px;
  z-index:95000;
}
.cookie-banner__orb{width:42px; height:42px;}
.cookie-banner__copy strong{font-size:1rem;}
.cookie-banner__copy p{font-size:.92rem; max-width:70ch;}
.cookie-banner__actions{gap:8px;}
.cookie-banner__actions .btn{min-height:40px; padding:0 14px; font-size:.86rem;}
@media (max-width:980px){
  body > .cookie-banner{grid-template-columns:1fr;}
  .cookie-banner__orb{display:none;}
  .cookie-banner__actions{justify-content:flex-start;}
}
@media (max-width:540px){
  body > .cookie-banner{bottom:10px; width:calc(100% - 20px); max-height:calc(100svh - 20px); overflow:auto;}
}

/* Better footer/legal touch targets. */
.footer a,.legal-link{min-height:34px; display:inline-flex; align-items:center;}

/* Motion safety. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.001ms !important;}
}


/* ============================================================
   SECTION: css/v45-polish.css
   ============================================================ */
/* NexCore Landing v45 polish layer
   Purpose: keep the big landing.css stable and collect the final laptop/dialog/copy fixes here. */

/* Legal lives in footer dialogs now, not as a full marketing section. */
.legal-section{display:none !important;}

/* Make the hero more robust around common laptop widths like 1350px. */
@media (max-width:1360px) and (min-width:1181px){
  .nav{padding:14px 18px; gap:12px;}
  .brand{min-width:190px;}
  .brand-title{max-width:145px;}
  .nav-actions{gap:8px;}
  .nav-actions .btn{min-height:40px; padding:0 14px; font-size:.83rem;}
  .language-trigger{max-width:230px; padding-inline:12px;}
  .language-current{max-width:132px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

  .hero{
    grid-template-columns:minmax(250px,.86fr) minmax(450px,1fr) minmax(250px,.86fr);
    gap:clamp(10px,1.1vw,20px);
    min-height:calc(100svh - 68px);
    padding-inline:10px;
  }
  .center{padding-inline:6px;}
  .center-wrap{max-width:600px;}
  .center h1{font-size:clamp(4.4rem,6.15vw,6.9rem); line-height:.86; letter-spacing:-.066em; padding-block:.08em .12em;}
  .sub{font-size:clamp(.95rem,1.16vw,1.06rem); max-width:48ch;}
  .caption{max-width:300px; font-size:.9rem;}
  .caption strong{font-size:1rem;}
}

@media (max-height:780px) and (min-width:1181px){
  .hero{min-height:720px;}
  .center h1{font-size:clamp(4rem,5.72vw,6.2rem);}
  .center-wrap{gap:16px;}
  .visual{min-height:620px;}
  .scroll{bottom:18px;}
}

/* Pricing: two-by-two at laptop widths, without oversized cards. */
@media (max-width:1440px) and (min-width:921px){
  .billing-plan-grid{grid-template-columns:repeat(2,minmax(0,1fr)); max-width:980px; margin-inline:auto;}
  .pricing-section .billing-card{min-height:520px;}
}
@media (max-width:720px){
  .billing-plan-grid{grid-template-columns:1fr;}
}

/* Make legal/auth dialogs feel like product windows, not overlays on the hero. */
body > .dialog-layer{z-index:95000; background:rgba(2,7,15,.56); backdrop-filter:blur(18px) saturate(1.08);}
body > .dialog-layer .dialog-card{background:linear-gradient(180deg, rgba(8,14,26,.99), rgba(5,9,18,.995)); box-shadow:0 38px 120px rgba(0,0,0,.74), inset 0 1px 0 rgba(255,255,255,.07);}
body > .dialog-layer .dialog-backdrop{background:rgba(1,5,12,.72);}
.dialog-content:not(.is-active){display:none !important;}
.dialog-content.is-active{display:block;}
.legal-copy__body{max-height:min(62vh,650px); overflow:auto; padding-right:10px; scrollbar-width:thin;}
.legal-status{border:1px solid rgba(78,206,255,.18); background:rgba(78,206,255,.055); color:#d9edff;}

/* Cookie banner: compact, readable, no collision with CTA buttons. */
body > .cookie-banner{z-index:94000; width:min(1000px, calc(100% - 28px)); padding:14px 16px; gap:14px;}
.cookie-banner__actions{flex-shrink:0;}
.cookie-banner__copy p{max-width:62ch;}
@media (max-width:960px){
  body > .cookie-banner{grid-template-columns:1fr;}
  .cookie-banner__actions{justify-content:flex-start;}
}

/* Language panel keeps its carousel feel but uses less vertical space on laptops. */
.language-panel{max-height:min(78svh,720px); overflow:hidden;}
.language-carousel__viewport{min-height:0;}
.language-card{min-height:86px;}
@media (max-height:760px) and (min-width:900px){
  .language-panel{max-height:calc(100svh - 86px);}
  .language-card{min-height:76px; padding:12px;}
  .language-card__flag{width:44px; height:34px;}
  .language-card__main strong{font-size:.9rem;}
  .language-card__main small{font-size:.76rem; line-height:1.12;}
  .language-note{font-size:.83rem; line-height:1.35;}
}

/* Prevent long translated labels from breaking cards and nav. */
.btn,.billing-card__button,.pricing-mode__pill{white-space:nowrap;}
.billing-card__copy,.billing-card__hint,.hoster-teaser p,.hoster-pricing-card p{hyphens:auto;}
.form-note{color:#a9bad8;}


/* ============================================================
   SECTION: css/v46-final.css
   ============================================================ */
/* NexCore Landing v46 final polish layer
   Focus: 1366x768 laptop fit, cleaner copy presentation, compact pricing, fixed dialogs. */

:root{
  --v46-card-radius:26px;
}

/* Header/language: neutral diversity marker, no political-looking country color dot. */
.language-dot,
#language-dot{
  width:10px !important;
  height:10px !important;
  flex:0 0 auto;
  border-radius:999px;
  background:conic-gradient(from 12deg,#ff4d6d,#ffb84d,#ffe76a,#5ee487,#4edbff,#8a68ff,#ff4dcb,#ff4d6d) !important;
  box-shadow:0 0 16px rgba(78,219,255,.32), 0 0 0 3px rgba(255,255,255,.035) !important;
}
.language-card__main small{
  color:#aebfda;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.language-card__state{max-width:150px; overflow:hidden; text-overflow:ellipsis;}

/* Laptop layout recovery around the user's 1366x768 screen. */
@media (max-width:1370px) and (min-width:1000px){
  .nav{height:64px; padding:10px 16px;}
  .brand{min-width:174px; gap:9px;}
  .brand-icon{width:50px; height:50px;}
  .brand-title{max-width:128px;}
  .nav-actions{gap:7px;}
  .nav-actions .btn{min-height:38px; padding:0 12px; font-size:.8rem;}
  .language-trigger{max-width:210px; min-width:0; padding:0 11px;}
  .language-current{max-width:112px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

  .hero{
    min-height:680px;
    grid-template-columns:minmax(245px,.82fr) minmax(410px,.98fr) minmax(245px,.82fr);
    gap:8px;
    padding-inline:6px;
  }
  .center-wrap{max-width:560px; gap:14px;}
  .center h1,.center-wrap h1{
    font-size:clamp(4.1rem,5.75vw,5.9rem) !important;
    line-height:.91 !important;
    letter-spacing:-.064em !important;
    padding:.06em .01em .14em !important;
    margin:.02em 0 .04em !important;
  }
  .center-wrap .sub{font-size:.96rem; line-height:1.45; max-width:47ch;}
  .eyebrow-main{font-size:.78rem; padding:10px 18px;}
  .center-wrap .cta{margin-top:10px;}
  .visual{min-height:560px;}
  .caption{max-width:292px; padding:16px; bottom:20px;}
  .caption strong{font-size:.98rem;}
}

@media (max-height:780px) and (min-width:1000px){
  .feature-section{padding-top:72px;}
  .section-top{margin-bottom:34px;}
  .section-top h2{font-size:clamp(2.25rem,4vw,4.05rem); line-height:1.02;}
  .demo-section,.pricing-section,.access-section{margin-top:58px;}
  .demo-shell{padding:26px;}
  .pricing-section{padding-top:10px;}
}

/* Pricing: remove internal admin keys from the public cards and make cards fit laptops. */
.pricing-section .billing-card::after{content:none !important; display:none !important;}
.pricing-control-rail__item{font-size:.76rem;}
.pricing-section .billing-card__copy{min-height:auto;}
.pricing-section .billing-card__price{min-height:92px !important;}
.pricing-section .billing-card__price-main strong{font-size:clamp(2.2rem,3vw,3rem) !important; letter-spacing:-.055em;}
.pricing-section .billing-card__price-main small{font-size:.88rem; transform:translateY(-4px);}
.pricing-section .billing-card__price-meta{min-height:24px; font-size:.77rem;}
.pricing-section .billing-card__feature{min-height:43px !important; font-size:.88rem;}
.pricing-section .billing-card__footer{margin-top:auto;}
.billing-card__button{min-height:48px !important;}
@media (max-width:1440px) and (min-width:921px){
  .billing-plan-grid{grid-template-columns:repeat(2,minmax(0,1fr)); max-width:900px !important; gap:16px;}
  .pricing-section .billing-card{min-height:455px !important; padding:20px !important; border-radius:24px;}
  .pricing-section .billing-card__top{min-height:30px;}
  .pricing-section .billing-card__title{font-size:1.42rem;}
  .pricing-section .billing-card__copy{font-size:.9rem; line-height:1.45;}
  .pricing-section .billing-card__features{gap:9px;}
  .pricing-section .billing-card__hint{font-size:.78rem; margin-top:10px;}
}
@media (max-width:1120px) and (min-width:921px){
  .billing-plan-grid{max-width:820px !important;}
  .pricing-section .billing-card{min-height:440px !important;}
}
@media (max-width:920px){
  .billing-plan-grid{grid-template-columns:1fr; max-width:560px; margin-inline:auto;}
}

/* Dialogs: close button fixed to the top-right; title no longer collides with it. */
body > .dialog-layer .dialog-card{
  position:relative;
  padding-top:clamp(30px,3vw,42px) !important;
}
.dialog-close,
body > .dialog-layer .dialog-close{
  position:absolute !important;
  top:18px !important;
  right:18px !important;
  left:auto !important;
  margin:0 !important;
  width:42px !important;
  height:42px !important;
  min-height:42px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:999px;
  z-index:10 !important;
  line-height:1 !important;
}
.dialog-card h2{
  margin-right:64px !important;
  font-size:clamp(2rem,3.25vw,3.45rem) !important;
  line-height:1.02 !important;
  letter-spacing:-.05em !important;
}
.dialog-kicker{padding-right:64px;}
.legal-copy__body{max-height:min(58vh,620px);}
.legal-status{padding:16px 18px; border-radius:18px;}
.dialog-warning{font-size:.88rem; line-height:1.45;}
@media (max-width:640px){
  .dialog-card h2{margin-right:48px !important; font-size:clamp(1.85rem,9vw,2.45rem) !important;}
  .dialog-close{top:12px !important; right:12px !important; width:38px !important; height:38px !important; min-height:38px !important;}
  .dialog-kicker{padding-right:46px;}
}

/* Access and footer feel less demo-like and more like a product start. */
.access-card--split{border-color:rgba(57,220,255,.15);}
.auth-preview-card{min-height:235px;}
.auth-preview-card h3{font-size:1.42rem;}
.form-note{color:#b3c7e6;}
.account-unified-note{border:1px solid rgba(57,220,255,.13); background:rgba(57,220,255,.045); border-radius:18px; padding:14px 16px;}
.account-unified-note strong{display:block; margin-bottom:3px; color:#edf7ff;}

/* Cookie banner: compact on laptop, readable, no collision with hero. */
body > .cookie-banner{border-color:rgba(57,220,255,.15);}
@media (max-width:1370px) and (min-width:900px){
  body > .cookie-banner{width:min(930px, calc(100% - 28px)); padding:12px 14px; grid-template-columns:36px minmax(0,1fr) auto;}
  .cookie-banner__orb{width:36px; height:36px;}
  .cookie-banner__copy strong{font-size:.96rem;}
  .cookie-banner__copy p{font-size:.86rem; line-height:1.38; max-width:58ch;}
  .cookie-banner__actions .btn{min-height:36px; padding:0 12px; font-size:.8rem;}
}

/* Mobile and small-height safeguards. */
@media (max-width:760px){
  .pricing-control-rail{width:100%; overflow:auto; justify-content:flex-start;}
  .pricing-control-rail__item{flex:0 0 auto;}
  .auth-preview-grid{grid-template-columns:1fr;}
  .access-card--split{grid-template-columns:1fr; padding:22px;}
}


/* ============================================================
   SECTION: css/v48-size-recovery.css
   ============================================================ */
/* NexCore Landing v48 size recovery
   Goal: keep the v46 visual/text polish, but restore the stable v43 sizing
   for common laptop screens like 1366x768 / 1350px width. */

/* v46 look stays. This file only wins back the v43 proportions. */
@media (max-width:1500px) and (min-width:1181px){
  :root{--nav-h:82px;}
  .nav{
    width:min(calc(100% - 44px), var(--max)) !important;
    min-height:var(--nav-h) !important;
    height:auto !important;
    padding:0 !important;
    gap:18px !important;
  }
  .brand{min-width:0 !important; gap:6px !important; padding-left:12px !important;}
  .brand-icon{height:56px !important; width:auto !important;}
  .brand-title{height:74px !important; max-width:none !important;}
  .brand::before{width:285px !important; height:78px !important;}
  .brand::after{width:245px !important; height:54px !important;}
  .nav-actions{gap:8px !important;}
  .nav-actions .btn,
  .btn{min-height:42px !important; padding:0 15px !important; font-size:.9rem !important;}
  .language-trigger{min-width:184px !important; max-width:none !important; padding-inline:15px !important;}
  .language-current{max-width:120px !important; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

  .hero{
    width:min(calc(100% - 44px), var(--max)) !important;
    grid-template-columns:minmax(300px,1.02fr) minmax(360px,.82fr) minmax(300px,1.02fr) !important;
    gap:8px !important;
    min-height:calc(100svh - var(--nav-h)) !important;
    padding:6px 0 58px !important;
  }
  .media,
  .center{
    min-height:clamp(520px, calc(100svh - var(--nav-h) - 28px), 660px) !important;
  }
  .visual{min-height:clamp(520px, calc(100svh - var(--nav-h) - 28px), 660px) !important;}
  .art{width:108% !important; height:108% !important;}
  .right-visual .art-right{width:112% !important; height:112% !important;}
  .center{padding-inline:0 !important; padding-bottom:36px !important;}
  .center-wrap{width:min(100%,700px) !important; max-width:700px !important; gap:initial !important;}
  .eyebrow-main{min-height:40px !important; padding:0 14px !important; font-size:.74rem !important; margin-bottom:16px !important;}
  h1,
  .center h1,
  .center-wrap h1{
    font-size:clamp(4.35rem, 5.55vw, 6.9rem) !important;
    line-height:.965 !important;
    letter-spacing:-.058em !important;
    padding:.035em .025em .115em !important;
    margin:0 !important;
    overflow:visible !important;
  }
  h1 .accent{display:inline-block; padding-inline:.018em; padding-bottom:.035em;}
  .sub,
  .center-wrap .sub{font-size:1.02rem !important; line-height:1.55 !important; margin-top:18px !important; max-width:600px !important;}
  .cta,
  .center-wrap .cta{margin-top:24px !important; gap:10px !important;}
  .caption{max-width:300px !important; padding:18px 20px !important; border-radius:20px !important;}
  .caption strong{font-size:1.12rem !important;}
  .caption span{font-size:.92rem !important; line-height:1.45 !important;}
  .left .caption{left:7% !important; bottom:4% !important;}
  .right .caption{right:7% !important; bottom:4% !important;}
  .scroll{bottom:8px !important;}
  .feature-section{width:min(calc(100% - 44px), var(--max)) !important; margin:-82px auto 0 !important; padding:168px 0 88px !important;}
}

@media (max-height:820px) and (min-width:1181px){
  .hero{padding-bottom:52px !important; min-height:calc(100svh - var(--nav-h)) !important;}
  .media,
  .center,
  .visual{min-height:clamp(480px, calc(100svh - var(--nav-h) - 24px), 600px) !important;}
  .caption{padding:15px 18px !important; max-width:280px !important; gap:7px !important;}
  .caption strong{font-size:1.04rem !important;}
  .caption span{font-size:.86rem !important;}
  h1,
  .center h1,
  .center-wrap h1{font-size:clamp(3.65rem, 4.85vw, 5.7rem) !important;}
  .sub,
  .center-wrap .sub{font-size:.96rem !important; max-width:520px !important;}
  .wheel{width:28px !important; height:44px !important;}
  .scroll span{display:none !important;}
}

@media (max-width:1360px) and (min-width:1181px){
  .hero{grid-template-columns:minmax(280px,1fr) minmax(330px,.9fr) minmax(280px,1fr) !important;}
  .feature-section{margin-top:-72px !important; padding-top:150px !important;}
}

/* Pricing back to v43 proportions: at 1350px it stays one row, not forced 2x2. */
@media (min-width:1181px){
  .billing-plan-grid,
  .billing-plan-grid--private,
  .pricing-grid{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    max-width:none !important;
    margin-inline:0 !important;
    gap:18px !important;
  }
  .pricing-section .billing-card{
    min-height:570px !important;
    padding:20px !important;
    border-radius:26px !important;
  }
  .pricing-section .billing-card__intro{grid-template-rows:minmax(42px,auto) minmax(112px,auto) !important; gap:16px !important;}
  .pricing-section .billing-card__top{min-height:42px !important; align-items:flex-start !important;}
  .pricing-section .billing-card__title{font-size:1.78rem !important;}
  .pricing-section .billing-card__copy{font-size:1rem !important; line-height:1.45 !important; min-height:0 !important;}
  .pricing-section .billing-card__price{min-height:auto !important; padding:2px 0 0 !important;}
  .pricing-section .billing-card__price-main strong{font-size:3rem !important; line-height:.92 !important; letter-spacing:-.07em !important;}
  .pricing-section .billing-card__price-main small{font-size:1rem !important; transform:translateY(-8px) !important;}
  .pricing-section .billing-card__price-meta{font-size:.83rem !important; min-height:24px !important;}
  .pricing-section .billing-card__eyebrow,
  .pricing-section .billing-card__badge{font-size:.68rem !important; padding:0 9px !important; min-height:34px !important;}
  .pricing-section .billing-card__features{gap:12px !important;}
  .pricing-section .billing-card__feature{padding:0 12px !important; min-height:50px !important; font-size:.94rem !important;}
  .pricing-section .billing-card__button{min-height:52px !important;}
  .pricing-section .billing-card__hint{font-size:.9rem !important; margin-top:0 !important;}
}
@media (max-width:1180px){
  .billing-plan-grid,
  .billing-plan-grid--private,
  .pricing-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important; max-width:none !important;}
  .pricing-section .billing-card.is-recommended,
  .pricing-section .billing-card.is-recommended:hover{transform:none !important;}
}
@media (max-width:720px){
  .billing-plan-grid,
  .billing-plan-grid--private,
  .pricing-grid{grid-template-columns:1fr !important;}
  .pricing-section .billing-card{min-height:auto !important; padding:20px !important;}
  .pricing-section .billing-card__intro{grid-template-rows:auto auto !important;}
}

/* Language popup: keep v46 content, but use the v43 compact laptop footprint. */
@media (max-height:760px) and (min-width:900px){
  .language-panel{max-height:calc(100svh - 86px) !important; width:min(668px, calc(100vw - 32px)) !important;}
  .language-card{min-height:76px !important; padding:12px !important;}
  .language-card__flag{width:44px !important; height:34px !important;}
  .language-card__main strong{font-size:.9rem !important;}
  .language-card__main small{font-size:.76rem !important; line-height:1.12 !important; -webkit-line-clamp:2 !important;}
  .language-card__state{font-size:.66rem !important; min-width:68px !important; max-width:128px !important;}
  .language-note{font-size:.83rem !important; line-height:1.35 !important;}
}

/* Keep v46 close button fix, only prevent it from looking oversized on compact windows. */
@media (max-height:820px) and (min-width:900px){
  .dialog-close,
  body > .dialog-layer .dialog-close{
    width:38px !important;
    height:38px !important;
    min-height:38px !important;
    top:14px !important;
    right:14px !important;
    font-size:1.35rem !important;
  }
  .dialog-card h2{margin-right:58px !important;}
}


/* ============================================================
   SECTION: css/v49-pricing-language-polish.css
   ============================================================ */
/* NexCore Landing v49
   Pricing + language panel polish.
   Keeps the v46/v48 visual direction, but makes laptop pricing more compact
   and removes repeated language text in the language carousel. */

/* ------------------------------------------------------------
   Pricing cards: smaller on laptop, stronger GamePanel hover
   ------------------------------------------------------------ */
.pricing-section .billing-card{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    background .22s ease;
}
.pricing-section .billing-card::after{
  content:"" !important;
  display:block !important;
  position:absolute;
  inset:-2px;
  pointer-events:none;
  opacity:0;
  z-index:0;
  background:
    radial-gradient(circle at var(--mx, 50%) var(--my, 18%), color-mix(in srgb, var(--billing-accent) 22%, transparent) 0 0, transparent 38%),
    linear-gradient(135deg, transparent 12%, color-mix(in srgb, var(--billing-accent) 10%, transparent) 48%, transparent 78%);
  transform:translateY(10px) scale(.98);
  transition:opacity .22s ease, transform .22s ease;
}
.pricing-section .billing-card:hover{
  transform:translateY(-7px);
  border-color:color-mix(in srgb, var(--billing-accent) 40%, rgba(255,255,255,.12));
  box-shadow:
    0 28px 70px color-mix(in srgb, var(--billing-accent) 14%, transparent),
    0 0 0 1px color-mix(in srgb, var(--billing-accent) 24%, transparent),
    inset 0 1px 0 rgba(255,255,255,.10);
}
.pricing-section .billing-card:hover::after{
  opacity:1;
  transform:translateY(0) scale(1);
}
.pricing-section .billing-card > *{position:relative; z-index:1;}
.pricing-section .billing-card.is-recommended:hover{transform:translateY(-9px) scale(1.01);}

/* Slightly smaller pricing at typical laptop desktop widths. */
@media (max-width:1500px) and (min-width:1181px){
  .pricing-section .billing-card{
    min-height:520px !important;
    padding:17px !important;
    border-radius:24px !important;
  }
  .pricing-section .billing-card__intro{
    grid-template-rows:minmax(34px,auto) minmax(92px,auto) !important;
    gap:12px !important;
  }
  .pricing-section .billing-card__top{min-height:34px !important; gap:8px !important;}
  .pricing-section .billing-card__title{font-size:1.55rem !important; line-height:1 !important;}
  .pricing-section .billing-card__copy{font-size:.91rem !important; line-height:1.38 !important;}
  .pricing-section .billing-card__price-main strong{font-size:2.55rem !important; line-height:.9 !important; letter-spacing:-.065em !important;}
  .pricing-section .billing-card__price-main small{font-size:.86rem !important; transform:translateY(-6px) !important;}
  .pricing-section .billing-card__price-meta{font-size:.76rem !important; min-height:22px !important;}
  .pricing-section .billing-card__eyebrow,
  .pricing-section .billing-card__badge{font-size:.62rem !important; padding:0 8px !important; min-height:30px !important; border-radius:999px !important;}
  .pricing-section .billing-card__features{gap:9px !important;}
  .pricing-section .billing-card__feature{min-height:44px !important; padding:0 11px !important; font-size:.86rem !important; border-radius:16px !important;}
  .pricing-section .billing-card__feature-dot{width:8px !important; height:8px !important;}
  .pricing-section .billing-card__button{min-height:47px !important; border-radius:16px !important; font-size:.88rem !important;}
  .pricing-section .billing-card__hint{font-size:.8rem !important; line-height:1.35 !important;}
}
@media (max-height:820px) and (min-width:1181px){
  .pricing-section .billing-card{min-height:500px !important;}
  .pricing-section .billing-card__feature{min-height:41px !important;}
  .pricing-section .billing-card__price-main strong{font-size:2.38rem !important;}
}

@media (prefers-reduced-motion:reduce){
  .pricing-section .billing-card,
  .pricing-section .billing-card::after{transition:none !important;}
  .pricing-section .billing-card:hover,
  .pricing-section .billing-card.is-recommended:hover{transform:none !important;}
}

/* ------------------------------------------------------------
   Language carousel: one clear language name + local quality label
   ------------------------------------------------------------ */
.language-card--v49{
  grid-template-columns:56px minmax(0,1fr) !important;
  align-items:center;
  min-height:78px;
}
.language-card--v49 .language-card__main{
  min-width:0;
  display:grid;
  gap:4px;
  align-content:center;
}
.language-card--v49 .language-card__main strong{
  font-size:1rem;
  line-height:1.08;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.language-card--v49 .language-card__main small{
  width:max-content;
  max-width:100%;
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:0 10px;
  border-radius:999px;
  font-size:.72rem;
  font-weight:900;
  line-height:1;
  color:color-mix(in srgb, var(--language-color), white 24%);
  background:color-mix(in srgb, var(--language-color), transparent 88%);
  border:1px solid color-mix(in srgb, var(--language-color), transparent 70%);
  box-shadow:0 0 16px color-mix(in srgb, var(--language-color), transparent 86%);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.language-card--v49 .language-card__state{display:none !important;}
.language-card--v49.is-selected .language-card__main small{
  background:color-mix(in srgb, var(--language-color), transparent 78%);
  border-color:color-mix(in srgb, var(--language-color), transparent 52%);
}
@media (max-height:760px) and (min-width:900px){
  .language-card--v49{min-height:70px !important; grid-template-columns:50px minmax(0,1fr) !important; padding:10px !important;}
  .language-card--v49 .language-card__flag{width:42px !important; height:32px !important;}
  .language-card--v49 .language-card__main strong{font-size:.92rem !important;}
  .language-card--v49 .language-card__main small{min-height:23px; padding:0 8px; font-size:.66rem !important;}
}


/* ============================================================
   SECTION: css/v50-pricing-language-fix.css
   ============================================================ */
/* NexCore Landing v50
   Fixes after v49 feedback:
   - Pricing hover effect is now subtle and closer to the overall NexCore glass/glow design.
   - Laptop pricing cards are a bit more compact without changing the v43/v48 page scale.
   - Language cards no longer use awkward labels like "Kernsprache" and look cleaner. */

/* ------------------------------------------------------------
   Pricing hover: subtle neon frame instead of large color wash
   ------------------------------------------------------------ */
.pricing-section .billing-card{
  overflow:hidden;
  transition:
    transform .2s ease,
    border-color .2s ease,
    box-shadow .2s ease,
    filter .2s ease;
}

/* Reduce the large permanent card color wash from earlier versions. */
.pricing-section .billing-card::before{
  opacity:.28 !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--billing-accent) 11%, transparent), transparent 34%, transparent 72%, color-mix(in srgb, var(--billing-accent) 7%, transparent)),
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.014) 1px, transparent 1px) !important;
  background-size:auto, 18px 18px, 18px 18px !important;
}

/* Disable v49's broad hover overlay. */
.pricing-section .billing-card::after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  opacity:0 !important;
  z-index:0 !important;
  background:
    linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--billing-accent) 34%, transparent) 50%, transparent 100%) top/100% 1px no-repeat,
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--billing-accent) 12%, transparent), transparent 42%) !important;
  transform:none !important;
  transition:opacity .2s ease !important;
}

.pricing-section .billing-card:hover{
  transform:translateY(-4px) !important;
  border-color:color-mix(in srgb, var(--billing-accent) 34%, rgba(255,255,255,.10)) !important;
  box-shadow:
    0 22px 54px rgba(0,0,0,.36),
    0 0 0 1px color-mix(in srgb, var(--billing-accent) 18%, transparent),
    0 0 34px -16px color-mix(in srgb, var(--billing-accent) 44%, transparent),
    inset 0 1px 0 rgba(255,255,255,.07) !important;
  filter:brightness(1.015);
}
.pricing-section .billing-card:hover::before{opacity:.36 !important;}
.pricing-section .billing-card:hover::after{opacity:1 !important;}
.pricing-section .billing-card.is-recommended:hover{transform:translateY(-6px) !important;}
.pricing-section .billing-card > *{position:relative; z-index:1;}

.pricing-section .billing-card:hover .billing-card__feature{
  border-color:color-mix(in srgb, var(--billing-accent) 16%, rgba(255,255,255,.08));
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.018));
}
.pricing-section .billing-card:hover .billing-card__button{
  box-shadow:
    0 16px 34px color-mix(in srgb, var(--billing-accent) 18%, transparent),
    inset 0 1px 0 rgba(255,255,255,.34);
}

/* More compact price cards on 1366x768 / small laptop desktop sizes. */
@media (max-width:1500px) and (min-width:1181px){
  .billing-plan-grid{gap:12px !important;}
  .pricing-section .billing-card{
    min-height:468px !important;
    padding:15px !important;
    border-radius:23px !important;
    gap:12px !important;
  }
  .pricing-section .billing-card__intro{
    grid-template-rows:minmax(30px,auto) minmax(78px,auto) !important;
    gap:10px !important;
  }
  .pricing-section .billing-card__top{min-height:30px !important; gap:7px !important;}
  .pricing-section .billing-card__head{min-height:78px !important; gap:6px !important;}
  .pricing-section .billing-card__title{font-size:1.34rem !important; line-height:1 !important;}
  .pricing-section .billing-card__copy{font-size:.84rem !important; line-height:1.36 !important; max-width:30ch !important;}
  .pricing-section .billing-card__price{min-height:86px !important; padding-top:0 !important;}
  .pricing-section .billing-card__price-ribbon-row{min-height:27px !important; margin-bottom:2px !important;}
  .pricing-section .billing-card__discount-ribbon{font-size:.68rem !important; padding:0 10px !important; min-height:28px !important;}
  .pricing-section .billing-card__price-main strong{font-size:2.16rem !important; line-height:.9 !important; letter-spacing:-.055em !important;}
  .pricing-section .billing-card__price-main small{font-size:.78rem !important; transform:translateY(-4px) !important;}
  .pricing-section .billing-card__price-meta{font-size:.70rem !important; min-height:20px !important; line-height:1.15 !important;}
  .pricing-section .billing-card__eyebrow,
  .pricing-section .billing-card__badge{font-size:.58rem !important; padding:0 7px !important; min-height:27px !important;}
  .pricing-section .billing-card__features{gap:8px !important;}
  .pricing-section .billing-card__feature{min-height:38px !important; padding:0 10px !important; font-size:.80rem !important; border-radius:15px !important; gap:9px !important;}
  .pricing-section .billing-card__feature-dot{width:7px !important; height:7px !important;}
  .pricing-section .billing-card__footer{gap:9px !important; padding-top:0 !important;}
  .pricing-section .billing-card__button{min-height:42px !important; border-radius:15px !important; font-size:.82rem !important;}
  .pricing-section .billing-card__hint{font-size:.72rem !important; line-height:1.3 !important;}
}
@media (max-height:800px) and (min-width:1181px){
  .pricing-section .billing-card{min-height:446px !important;}
  .pricing-section .billing-card__head{min-height:72px !important;}
  .pricing-section .billing-card__price{min-height:78px !important;}
  .pricing-section .billing-card__feature{min-height:36px !important;}
}

/* ------------------------------------------------------------
   Language cards: cleaner status text, no awkward wording
   ------------------------------------------------------------ */
.language-card--v50{
  grid-template-columns:54px minmax(0,1fr) !important;
  min-height:74px !important;
}
.language-card--v50 .language-card__main{
  gap:5px !important;
}
.language-card--v50 .language-card__main strong{
  font-size:1rem !important;
  line-height:1.05 !important;
}
.language-card--v50 .language-card__main small{
  display:block !important;
  width:auto !important;
  max-width:100% !important;
  min-height:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:rgba(207,223,246,.68) !important;
  font-size:.76rem !important;
  font-weight:800 !important;
  letter-spacing:.01em !important;
  line-height:1.2 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
.language-card--v50.is-selected .language-card__main small{
  color:color-mix(in srgb, var(--language-color), white 28%) !important;
}
.language-card--v50:hover .language-card__main small{
  color:rgba(235,244,255,.86) !important;
}
@media (max-height:760px) and (min-width:900px){
  .language-card--v50{min-height:66px !important; grid-template-columns:48px minmax(0,1fr) !important; padding:10px !important;}
  .language-card--v50 .language-card__flag{width:40px !important; height:30px !important;}
  .language-card--v50 .language-card__main strong{font-size:.92rem !important;}
  .language-card--v50 .language-card__main small{font-size:.68rem !important;}
}

@media (prefers-reduced-motion:reduce){
  .pricing-section .billing-card,
  .pricing-section .billing-card::after{transition:none !important;}
  .pricing-section .billing-card:hover,
  .pricing-section .billing-card.is-recommended:hover{transform:none !important;}
}


/* ============================================================
   SECTION: css/v51-hover-language-cleanup.css
   ============================================================ */
/* NexCore Landing v51
   Targeted cleanup after v50 feedback:
   - Removes the small dot in front of the current language flag.
   - Replaces the pricing-card hover glow with a cleaner button-like sweep effect.
   - Keeps the v46/v48 visual direction and the v43/v48 laptop sizing intact. */

/* ------------------------------------------------------------
   Language trigger: flag + country only, no extra dot/orb
   ------------------------------------------------------------ */
.language-dot,
#language-dot{
  display:none !important;
}
.language-trigger{
  gap:8px !important;
  min-width:142px;
}
.language-trigger .language-flag{
  margin-left:0 !important;
}
.language-current{
  letter-spacing:.01em;
}
@media (max-width:760px){
  .language-trigger{min-width:auto !important;}
}

/* ------------------------------------------------------------
   Pricing hover: button-like polish instead of a large glow
   ------------------------------------------------------------ */
.pricing-section .billing-card{
  position:relative !important;
  isolation:isolate !important;
  overflow:hidden !important;
  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease !important;
}

/* Keep the card texture, but do not intensify it on hover. */
.pricing-section .billing-card::before{
  opacity:.24 !important;
  transition:opacity .18s ease !important;
}

/* Replace previous radial/glow overlay with a thin moving glass-sheen. */
.pricing-section .billing-card::after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  pointer-events:none !important;
  z-index:2 !important;
  inset:-45% -85% !important;
  opacity:0 !important;
  background:linear-gradient(110deg,
    transparent 40%,
    rgba(255,255,255,.045) 47%,
    rgba(255,255,255,.14) 50%,
    rgba(255,255,255,.045) 53%,
    transparent 60%) !important;
  transform:translateX(-32%) skewX(-16deg) !important;
  transition:
    transform .62s cubic-bezier(.22,.8,.26,1),
    opacity .18s ease !important;
}

.pricing-section .billing-card:hover,
.pricing-section .billing-card.is-recommended:hover{
  transform:translateY(-3px) !important;
  border-color:rgba(174,221,255,.30) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.014)),
    var(--billing-card-bg, rgba(6,14,26,.72)) !important;
  box-shadow:
    0 18px 38px rgba(0,0,0,.34),
    0 0 0 1px rgba(255,255,255,.045),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
  filter:none !important;
}
.pricing-section .billing-card:hover::before{
  opacity:.24 !important;
}
.pricing-section .billing-card:hover::after{
  opacity:1 !important;
  transform:translateX(32%) skewX(-16deg) !important;
}

/* Small interactive details like the top buttons, but without a color cloud. */
.pricing-section .billing-card__feature{
  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease !important;
}
.pricing-section .billing-card:hover .billing-card__feature{
  transform:translateX(2px);
  border-color:rgba(255,255,255,.13) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)) !important;
}
.pricing-section .billing-card:hover .billing-card__feature-dot{
  box-shadow:0 0 0 4px color-mix(in srgb, var(--billing-accent) 10%, transparent) !important;
}
.pricing-section .billing-card:hover .billing-card__button{
  transform:translateY(-1px) !important;
  box-shadow:
    0 13px 28px rgba(0,0,0,.23),
    inset 0 1px 0 rgba(255,255,255,.34) !important;
}

/* Recommended cards should not jump more than others. */
.pricing-section .billing-card.is-recommended{
  will-change:transform;
}

@media (prefers-reduced-motion:reduce){
  .pricing-section .billing-card,
  .pricing-section .billing-card::after,
  .pricing-section .billing-card__feature{
    transition:none !important;
  }
  .pricing-section .billing-card:hover,
  .pricing-section .billing-card.is-recommended:hover,
  .pricing-section .billing-card:hover .billing-card__feature{
    transform:none !important;
  }
}


/* ============================================================
   SECTION: css/v53-copy-free-start.css
   ============================================================ */
/* =========================================================
   v53: final copy pass + Free-first landing section
   ========================================================= */

/* Top nav: "Free starten" can be a little wider. */
.nav-actions .nav-link{white-space:nowrap;}

/* Language panel: make the copy calmer and less "package-like". */
.language-panel__meta{gap:8px; flex-wrap:wrap;}
.language-panel__meta-pill{
  font-size:.74rem;
  letter-spacing:.01em;
  text-transform:none;
  opacity:.92;
}
.language-card__main small{
  text-transform:none;
  letter-spacing:.01em;
  font-weight:750;
  opacity:.86;
}

/* Free-first pricing section: only show Free publicly. */
.pricing-mode,
.pricing-control-rail,
.hoster-pricing-panel{display:none !important;}

.pricing-section .section-top{
  max-width:940px;
}

.pricing-section .section-top p{
  max-width:780px;
  margin-inline:auto;
}

.pricing-currency-note{
  max-width:760px;
  margin:0 auto 24px;
  color:#b9c8e5;
  text-align:center;
  line-height:1.55;
}

.billing-plan-grid.billing-plan-grid--private{
  grid-template-columns:minmax(300px, 440px) minmax(0, 1fr);
  max-width:1120px;
  margin-inline:auto;
  align-items:stretch;
  gap:22px;
}

.billing-plan-grid--private .billing-card{
  min-height:auto;
}

.pricing-section .billing-card--free{
  --billing-accent:#63d7ff;
  --billing-accent-soft:rgba(99,215,255,.14);
  --billing-btn-text:#06111e;
}

.pricing-section .billing-card--free .billing-card__head,
.pricing-section .billing-card--free .billing-card__copy{
  min-height:auto;
}

.pricing-section .billing-card--free .billing-card__price{
  min-height:88px;
}

.pricing-section .billing-card--free .billing-card__button{
  background:linear-gradient(135deg, #93efff 0%, #52c8ff 46%, #5d91ff 100%);
  box-shadow:0 16px 36px rgba(65,190,255,.20), inset 0 1px 0 rgba(255,255,255,.45);
}

.free-next-steps{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  min-width:0;
}

.free-next-card{
  position:relative;
  overflow:hidden;
  min-height:0;
  padding:24px;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at 88% 12%, rgba(57,220,255,.12), transparent 32%),
    linear-gradient(180deg, rgba(13,22,38,.92), rgba(8,13,24,.82));
  box-shadow:0 20px 50px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.04);
}

.free-next-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(115deg, transparent 0%, rgba(255,255,255,.045) 45%, transparent 72%);
  opacity:.75;
}

.free-next-card span{
  position:relative;
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 11px;
  margin-bottom:14px;
  border-radius:999px;
  color:#9eeaff;
  font-size:.74rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  border:1px solid rgba(57,220,255,.22);
  background:rgba(57,220,255,.07);
}

.free-next-card h3{
  position:relative;
  margin:0 0 10px;
  color:#f5f9ff;
  font-size:clamp(1.45rem,2.3vw,2.15rem);
  line-height:1.05;
  letter-spacing:-.045em;
}

.free-next-card p{
  position:relative;
  margin:0;
  color:#b8c9e8;
  line-height:1.62;
  max-width:62ch;
}

.free-next-card .btn{
  position:relative;
  margin-top:18px;
}

.free-next-card--hoster{
  border-color:rgba(255,192,122,.15);
  background:
    radial-gradient(circle at 88% 12%, rgba(255,192,122,.14), transparent 32%),
    linear-gradient(180deg, rgba(20,15,28,.90), rgba(8,13,24,.82));
}

.free-next-card--hoster span{
  color:#ffd3a1;
  border-color:rgba(255,192,122,.24);
  background:rgba(255,192,122,.08);
}

/* Keep the Free-first area compact on 1366x768 laptops. */
@media (max-width:1500px){
  .billing-plan-grid.billing-plan-grid--private{
    max-width:1040px;
    grid-template-columns:minmax(300px, 390px) minmax(0, 1fr);
    gap:18px;
  }
  .pricing-section .billing-card--free{padding:20px;}
  .free-next-card{padding:20px; border-radius:24px;}
  .free-next-card h3{font-size:clamp(1.3rem,2.1vw,1.9rem);}
  .free-next-card p{font-size:.96rem; line-height:1.55;}
}

@media (max-width:980px){
  .billing-plan-grid.billing-plan-grid--private{
    grid-template-columns:1fr;
    max-width:680px;
  }
}

@media (max-width:620px){
  .pricing-section .section-top{text-align:left;}
  .pricing-section .section-top p,
  .pricing-currency-note{text-align:left;}
  .free-next-card{padding:18px;}
}


/* ============================================================
   SECTION: css/v54-copy-pricing-polish.css
   ============================================================ */
/* NexCore Landing v54
   Copy + Free-first pricing polish.
   Keeps the v51/v53 sizing stable and only reshapes the public Free section. */

/* ------------------------------------------------------------
   Copy sections: more comfortable reading width
   ------------------------------------------------------------ */
.section-top p,
.demo-copy p,
.access-card p{
  max-width:760px;
}

/* ------------------------------------------------------------
   Pricing: free-first showcase instead of a scattered price grid
   ------------------------------------------------------------ */
.pricing-section .pricing-top-v54{
  max-width:920px;
  margin-inline:auto;
}
.pricing-section .pricing-top-v54 h2{
  max-width:760px;
  margin-inline:auto;
}
.pricing-section .pricing-top-v54 p{
  max-width:820px;
  margin-inline:auto;
}

.free-showcase{
  position:relative;
  display:grid;
  grid-template-columns:minmax(290px, 395px) minmax(0, 1fr);
  gap:22px;
  max-width:1080px;
  margin:34px auto 0;
  padding:20px;
  border-radius:34px;
  border:1px solid rgba(93,210,255,.16);
  background:
    radial-gradient(circle at 18% 18%, rgba(57,220,255,.15), transparent 34%),
    radial-gradient(circle at 86% 20%, rgba(150,83,255,.12), transparent 34%),
    linear-gradient(180deg, rgba(8,18,33,.72), rgba(4,9,18,.62));
  box-shadow:0 24px 70px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.055);
  overflow:hidden;
}
.free-showcase::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(57,220,255,.09), transparent 34%, rgba(150,83,255,.06)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 86px);
  opacity:.46;
}
.free-showcase > *{position:relative; z-index:1;}

.free-showcase .billing-card--free{
  min-height:0 !important;
  padding:22px !important;
  border-radius:26px !important;
  background:
    linear-gradient(180deg, rgba(9,22,39,.96), rgba(5,11,22,.91)) !important;
  border-color:rgba(107,215,255,.34) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 14px 34px rgba(0,0,0,.20) !important;
}
.free-showcase .billing-card--free:hover{
  transform:translateY(-2px) !important;
  border-color:rgba(136,226,255,.48) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09), 0 18px 42px rgba(0,0,0,.24) !important;
}
.free-showcase .billing-card__price{
  min-height:72px !important;
  margin:18px 0 18px !important;
}
.free-showcase .billing-card__features{
  gap:10px !important;
}
.free-showcase .billing-card__feature{
  min-height:38px !important;
  border-radius:15px !important;
}
.free-showcase .billing-card__footer{
  margin-top:18px !important;
}
.free-showcase .billing-card__button{
  min-height:48px !important;
  border-radius:16px !important;
}

.free-explain-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  min-width:0;
}
.free-explain-grid .free-next-card{
  min-height:0;
  padding:20px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at 88% 12%, rgba(57,220,255,.10), transparent 35%),
    linear-gradient(180deg, rgba(13,22,38,.84), rgba(7,12,22,.72));
}
.free-explain-grid .free-next-card--panel{
  grid-column:1 / -1;
  min-height:170px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.free-explain-grid .free-next-card--simple{
  border-color:rgba(90,225,176,.15);
  background:
    radial-gradient(circle at 85% 10%, rgba(90,225,176,.12), transparent 35%),
    linear-gradient(180deg, rgba(11,28,29,.78), rgba(7,12,22,.72));
}
.free-explain-grid .free-next-card--simple span{
  color:#a8ffd7;
  border-color:rgba(90,225,176,.24);
  background:rgba(90,225,176,.075);
}
.free-explain-grid .free-next-card--hoster{
  border-color:rgba(255,192,122,.16);
}
.free-explain-grid .free-next-card h3{
  font-size:clamp(1.25rem, 2.15vw, 2rem);
  line-height:1.08;
  letter-spacing:-.04em;
}
.free-explain-grid .free-next-card p{
  line-height:1.58;
}
.free-explain-grid .free-next-card--panel p{
  max-width:68ch;
}
.free-explain-grid .free-next-card .btn{
  min-height:44px;
  margin-top:16px;
}

/* The old v53 grid class is no longer used for the public Free section,
   but keep it harmless if older cached markup appears. */
.billing-plan-grid.billing-plan-grid--private:not(.free-showcase){
  max-width:1080px;
}

@media (max-width:1500px){
  .free-showcase{
    max-width:1030px;
    grid-template-columns:minmax(285px, 365px) minmax(0, 1fr);
    gap:18px;
    padding:18px;
    margin-top:28px;
  }
  .free-showcase .billing-card--free{padding:19px !important;}
  .free-showcase .billing-card__price{min-height:64px !important;}
  .free-explain-grid{gap:14px;}
  .free-explain-grid .free-next-card{padding:18px; border-radius:22px;}
  .free-explain-grid .free-next-card--panel{min-height:150px;}
  .free-explain-grid .free-next-card p{font-size:.94rem; line-height:1.52;}
  .free-explain-grid .free-next-card h3{font-size:clamp(1.18rem, 1.85vw, 1.72rem);}
}

@media (max-width:980px){
  .free-showcase{
    grid-template-columns:1fr;
    max-width:700px;
  }
  .free-explain-grid{grid-template-columns:1fr;}
  .free-explain-grid .free-next-card--panel{min-height:0;}
}

@media (max-width:620px){
  .free-showcase{
    margin-top:24px;
    padding:12px;
    border-radius:26px;
  }
  .free-explain-grid .free-next-card{padding:16px;}
}


/* ============================================================
   SECTION: css/v55-final-copy.css
   ============================================================ */
/* NexCore Landing v55 - final copy integration
   Keeps the v54/v51 layout stable and only improves final-copy presentation. */

.hero .cta .btn.primary{
  min-width:178px;
}

/* Free section: make the final text feel like a prepared product start, not a price table. */
.free-showcase{
  align-items:stretch;
}
.free-explain-grid .free-next-card p{
  text-wrap:pretty;
}
.free-explain-grid .free-next-card h3,
.section-top h2,
.demo-copy h2,
.access-card h2{
  text-wrap:balance;
}

/* With the new copy, the Free card should stay compact on laptops. */
@media (max-width:1500px){
  .free-showcase{
    max-width:1010px;
    grid-template-columns:minmax(280px, 350px) minmax(0, 1fr);
  }
  .free-showcase .billing-card--free{
    padding:18px !important;
  }
  .free-showcase .billing-card__price{
    min-height:58px !important;
    margin:14px 0 14px !important;
  }
  .free-showcase .billing-card__feature{
    min-height:35px !important;
  }
  .free-explain-grid .free-next-card{
    padding:16px;
  }
  .free-explain-grid .free-next-card--panel{
    min-height:132px;
  }
}

@media (max-height:790px) and (min-width:1000px){
  .pricing-section{
    padding-top:72px;
  }
  .free-showcase{
    margin-top:22px;
  }
}


/* ============================================================
   SECTION: css/v56-timeline-i18n-fix.css
   ============================================================ */
/* v56: i18n + timeline polish. Keeps the v55/v51 layout and only cleans the feature connector lines. */
.step-side.left::after,
.step-side.right::before{
  display:none !important;
}
.timeline-line-base,
.timeline-line-fill{
  width:1px;
  opacity:.85;
}
.step-dot{
  width:18px;
  height:18px;
  border:1px solid rgba(255,255,255,.24);
  box-shadow:0 0 0 7px rgba(57,220,255,.045), 0 0 22px rgba(57,220,255,.36);
}
.step-dot::after{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:inherit;
  background:rgba(255,255,255,.22);
  opacity:.45;
}
.step-card{
  box-shadow:0 18px 60px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.04);
}
.step-row.is-visible .step-card{
  transform:translateY(0) scale(1);
}
@media (min-width: 901px){
  .step-row{ grid-template-columns:minmax(0, 1fr) 96px minmax(0, 1fr); }
  .step-side.left{ padding-right:12px; }
  .step-side.right{ padding-left:12px; }
}


/* ============================================================
   SECTION: css/v58-feature-motion.css
   ============================================================ */
/* v58: Feature-Timeline Motion Polish
   Ziel: v57 Layout behalten, aber die Feature-Tafeln beim Scrollen hochwertiger wirken lassen.
   Keine Text-/i18n-Änderungen, keine Größenänderungen außerhalb der Feature-Timeline. */

@media (min-width: 901px){
  .timeline{
    --motion-cyan: rgba(57,220,255,.92);
    --motion-cyan-soft: rgba(57,220,255,.16);
    --motion-white-soft: rgba(255,255,255,.12);
    overflow:visible;
  }

  .timeline-line-base{
    width:1px;
    background:
      linear-gradient(180deg,
        rgba(57,220,255,0),
        rgba(57,220,255,.16) 12%,
        rgba(57,220,255,.20) 50%,
        rgba(57,220,255,.16) 88%,
        rgba(57,220,255,0));
  }

  .timeline-line-fill{
    width:2px;
    background:
      linear-gradient(180deg,
        rgba(57,220,255,0),
        rgba(57,220,255,.92) 18%,
        rgba(118,151,255,.94) 58%,
        rgba(57,220,255,.32));
    box-shadow:
      0 0 12px rgba(57,220,255,.35),
      0 0 34px rgba(57,220,255,.16);
    transition:height .12s linear;
  }

  .step-row{
    perspective:1100px;
  }

  .step-dot{
    width:18px;
    height:18px;
    opacity:.34;
    transform:translate(-50%, -50%) scale(.82);
    border:1px solid rgba(255,255,255,.18);
    background:
      radial-gradient(circle at 35% 28%, rgba(255,255,255,.95), rgba(255,255,255,.16) 26%, transparent 28%),
      linear-gradient(180deg, var(--cyan), var(--blue));
    box-shadow:
      0 0 0 6px rgba(57,220,255,.035),
      0 0 18px rgba(57,220,255,.26);
    transition:
      opacity .45s ease,
      transform .55s cubic-bezier(.2,.8,.2,1),
      box-shadow .55s ease,
      filter .55s ease;
  }

  .step-dot::before{
    content:"";
    position:absolute;
    inset:-13px;
    border-radius:inherit;
    border:1px solid rgba(57,220,255,.0);
    transform:scale(.72);
    opacity:0;
    transition:opacity .55s ease, transform .65s cubic-bezier(.2,.8,.2,1), border-color .55s ease;
  }

  .step-dot::after{
    inset:-6px;
    background:radial-gradient(circle, rgba(57,220,255,.24), transparent 68%);
    opacity:0;
    transform:scale(.75);
    transition:opacity .55s ease, transform .65s cubic-bezier(.2,.8,.2,1);
  }

  .step-row.is-visible .step-dot{
    opacity:1;
    transform:translate(-50%, -50%) scale(1);
    filter:saturate(1.16);
    box-shadow:
      0 0 0 7px rgba(57,220,255,.06),
      0 0 24px rgba(57,220,255,.58),
      0 0 54px rgba(57,220,255,.18);
    animation:nexcoreDotPulse 2.8s ease-in-out infinite;
  }

  .step-row.is-visible .step-dot::before{
    opacity:1;
    transform:scale(1);
    border-color:rgba(57,220,255,.20);
  }

  .step-row.is-visible .step-dot::after{
    opacity:1;
    transform:scale(1);
  }

  /* Dezente Brücke vom Punkt zur Tafel. Kürzer und weicher als die alte harte Linie. */
  .step-side.left::after,
  .step-side.right::before{
    display:block !important;
    content:"";
    position:absolute;
    top:50%;
    width:64px;
    height:1px;
    pointer-events:none;
    opacity:0;
    transform:scaleX(0);
    filter:drop-shadow(0 0 8px rgba(57,220,255,.22));
    transition:
      opacity .45s ease .12s,
      transform .58s cubic-bezier(.2,.8,.2,1) .12s;
  }

  .step-side.left::after{
    right:-10px;
    transform-origin:right center;
    background:linear-gradient(90deg, rgba(57,220,255,0), rgba(57,220,255,.28), rgba(57,220,255,.58));
  }

  .step-side.right::before{
    left:-10px;
    transform-origin:left center;
    background:linear-gradient(90deg, rgba(57,220,255,.58), rgba(57,220,255,.28), rgba(57,220,255,0));
  }

  .step-side:empty::after,
  .step-side:empty::before{
    content:none !important;
    display:none !important;
  }

  .step-row.is-visible .step-side.left::after,
  .step-row.is-visible .step-side.right::before{
    opacity:1;
    transform:scaleX(1);
  }

  .step-card{
    overflow:hidden;
    opacity:0;
    transform:translateY(26px) rotateX(5deg) scale(.975);
    clip-path:inset(0 0 100% 0 round 16px);
    border-color:rgba(255,255,255,.055);
    box-shadow:0 20px 58px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.035);
    transition:
      opacity .22s ease,
      clip-path .72s cubic-bezier(.2,.8,.2,1),
      transform .72s cubic-bezier(.2,.8,.2,1),
      border-color .55s ease,
      box-shadow .55s ease;
  }

  .step-card::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    padding:1px;
    background:
      linear-gradient(110deg,
        rgba(57,220,255,.0),
        rgba(57,220,255,.42),
        rgba(118,151,255,.18),
        rgba(255,122,26,.16),
        rgba(57,220,255,.0));
    background-size:220% 100%;
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    opacity:0;
    pointer-events:none;
    transform:translateX(-18%);
    transition:opacity .45s ease .18s, transform .95s cubic-bezier(.2,.8,.2,1) .18s;
  }

  .step-card .feature-tag,
  .step-card .step-copy,
  .step-card .step-card__visual{
    opacity:0;
    transform:translateY(12px);
    transition:opacity .55s ease, transform .62s cubic-bezier(.2,.8,.2,1);
  }

  .step-card .step-card__visual{
    transform:translateY(12px) scale(.965);
  }

  .step-row.is-visible .step-card{
    opacity:1;
    transform:translateY(0) rotateX(0) scale(1);
    clip-path:inset(0 0 0 0 round 16px);
    border-color:rgba(57,220,255,.18);
    box-shadow:
      0 24px 70px rgba(0,0,0,.28),
      0 0 0 1px rgba(57,220,255,.045),
      inset 0 1px 0 rgba(255,255,255,.055);
  }

  .step-row.is-visible .step-card::after{
    opacity:.88;
    transform:translateX(18%);
  }

  .step-row.is-visible .step-card .feature-tag{
    opacity:1;
    transform:translateY(0);
    transition-delay:.24s;
  }

  .step-row.is-visible .step-card .step-copy{
    opacity:1;
    transform:translateY(0);
    transition-delay:.34s;
  }

  .step-row.is-visible .step-card .step-card__visual{
    opacity:1;
    transform:translateY(0) scale(1);
    transition-delay:.44s;
  }

  .step-row.is-visible .step-card__visual::after{
    background:
      linear-gradient(180deg, rgba(7,12,22,.02), rgba(7,12,22,.08)),
      radial-gradient(circle at 20% 14%, rgba(57,220,255,.16), transparent 36%);
  }
}

@keyframes nexcoreDotPulse{
  0%, 100%{
    box-shadow:
      0 0 0 7px rgba(57,220,255,.055),
      0 0 24px rgba(57,220,255,.48),
      0 0 54px rgba(57,220,255,.16);
  }
  50%{
    box-shadow:
      0 0 0 11px rgba(57,220,255,.035),
      0 0 34px rgba(57,220,255,.70),
      0 0 76px rgba(57,220,255,.22);
  }
}

@media (hover:hover) and (pointer:fine) and (min-width:901px){
  .step-row.is-visible .step-card:hover{
    transform:translateY(-4px) scale(1.004);
    border-color:rgba(57,220,255,.30);
    box-shadow:
      0 30px 88px rgba(0,0,0,.34),
      0 0 0 1px rgba(57,220,255,.075),
      inset 0 1px 0 rgba(255,255,255,.075);
  }
}

@media (max-width: 900px){
  .step-card{
    clip-path:none !important;
  }
}

@media (prefers-reduced-motion: reduce){
  .step-dot,
  .step-dot::before,
  .step-dot::after,
  .step-card,
  .step-card::after,
  .step-card .feature-tag,
  .step-card .step-copy,
  .step-card .step-card__visual,
  .step-side.left::after,
  .step-side.right::before{
    animation:none !important;
    transition:none !important;
  }

  .step-card,
  .step-card .feature-tag,
  .step-card .step-copy,
  .step-card .step-card__visual{
    opacity:1 !important;
    transform:none !important;
    clip-path:none !important;
  }
}


/* ============================================================
   SECTION: css/v59-lower-motion-footer.css
   ============================================================ */
/* =========================================================
   NexCore Landing v59
   Lower-section polish + footer upgrade
   Ziel: Nach der Feature-Timeline bleiben Demo, Free-Start,
   Login/Konto und Footer lebendig, ohne das v58 Grundlayout
   oder die 1366x768 Skalierung wieder zu verändern.
   ========================================================= */

.demo-section,
.pricing-section,
.access-section,
.landing-footer--v59{
  isolation:isolate;
}

/* ---------- Section ambience: softer transitions after the timeline ---------- */
.demo-section::before,
.pricing-section::before,
.access-section::before{
  content:"";
  position:absolute;
  inset:-70px max(-6vw, -80px) -70px;
  z-index:-2;
  pointer-events:none;
  opacity:.78;
  background:
    radial-gradient(circle at 18% 20%, rgba(57,220,255,.10), transparent 34%),
    radial-gradient(circle at 82% 74%, rgba(118,151,255,.10), transparent 36%),
    linear-gradient(180deg, rgba(3,10,18,0), rgba(6,15,28,.20), rgba(3,10,18,0));
}

.demo-section::after,
.pricing-section::after,
.access-section::after{
  content:"";
  position:absolute;
  left:50%;
  top:-30px;
  width:min(980px, 84vw);
  height:1px;
  z-index:-1;
  transform:translateX(-50%) scaleX(.72);
  opacity:.22;
  pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(57,220,255,.72), rgba(118,151,255,.34), transparent);
  filter:drop-shadow(0 0 16px rgba(57,220,255,.24));
  transition:opacity .7s ease, transform .85s cubic-bezier(.2,.8,.2,1);
}

.demo-section.is-visible::after,
.pricing-section.is-visible::after,
.access-section.is-visible::after{
  opacity:.62;
  transform:translateX(-50%) scaleX(1);
}

/* ---------- Demo / flow board ---------- */
.demo-shell{
  position:relative;
}

.demo-shell::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:30px;
  z-index:-1;
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(circle at 18% 20%, rgba(57,220,255,.16), transparent 30%),
    radial-gradient(circle at 86% 80%, rgba(118,151,255,.12), transparent 36%);
  filter:blur(10px);
  transition:opacity .8s ease .12s;
}

.demo-section.is-visible .demo-shell::before{opacity:.55;}

.demo-copy,
.demo-board,
.free-showcase,
.access-card{
  transform:translateY(18px);
  opacity:0;
  transition:opacity .65s ease, transform .75s cubic-bezier(.2,.8,.2,1), border-color .55s ease, box-shadow .55s ease;
}

.demo-section.is-visible .demo-copy,
.demo-section.is-visible .demo-board,
.pricing-section.is-visible .free-showcase,
.access-section.is-visible .access-card{
  opacity:1;
  transform:translateY(0);
}

.demo-section.is-visible .demo-board{transition-delay:.10s;}
.pricing-section.is-visible .free-showcase{transition-delay:.08s;}
.access-section.is-visible .access-card{transition-delay:.08s;}

.demo-copy{
  position:relative;
  overflow:hidden;
}

.demo-copy::before,
.access-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.0;
  background:linear-gradient(110deg, transparent 0%, rgba(255,255,255,.055) 45%, transparent 72%);
  transform:translateX(-70%);
  transition:opacity .55s ease, transform 1.15s cubic-bezier(.2,.8,.2,1);
}

.demo-section.is-visible .demo-copy::before,
.access-section.is-visible .access-card::before{
  opacity:.7;
  transform:translateX(70%);
}

.demo-board{
  position:relative;
  overflow:hidden;
  border-color:rgba(57,220,255,.12);
}

.demo-board::before{
  content:"";
  position:absolute;
  left:50%;
  top:26px;
  bottom:26px;
  width:1px;
  opacity:.36;
  background:linear-gradient(180deg, transparent, rgba(57,220,255,.52), rgba(118,151,255,.30), transparent);
  box-shadow:0 0 20px rgba(57,220,255,.18);
}

.demo-board::after{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  top:50%;
  height:1px;
  opacity:.28;
  background:linear-gradient(90deg, transparent, rgba(57,220,255,.46), rgba(118,151,255,.26), transparent);
}

.demo-node{
  transform:translateY(18px) scale(.98);
  opacity:0;
  border-color:rgba(255,255,255,.065);
  transition:
    opacity .55s ease,
    transform .68s cubic-bezier(.2,.8,.2,1),
    border-color .45s ease,
    box-shadow .45s ease,
    background .45s ease;
}

.demo-section.is-visible .demo-node{
  opacity:1;
  transform:translateY(0) scale(1);
}

.demo-section.is-visible .demo-node:nth-child(1){transition-delay:.15s;}
.demo-section.is-visible .demo-node:nth-child(2){transition-delay:.24s;}
.demo-section.is-visible .demo-node:nth-child(3){transition-delay:.33s;}
.demo-section.is-visible .demo-node:nth-child(4){transition-delay:.42s;}

.demo-node span{
  box-shadow:0 0 0 0 rgba(57,220,255,0), 0 0 18px rgba(57,220,255,.20);
  transition:transform .38s ease, box-shadow .38s ease;
}

.demo-node:hover{
  transform:translateY(-4px) scale(1.01);
  border-color:rgba(57,220,255,.22);
  box-shadow:0 22px 58px rgba(0,0,0,.26), 0 0 0 1px rgba(57,220,255,.055);
}

.demo-node:hover span{
  transform:translateY(-1px);
  box-shadow:0 0 0 7px rgba(57,220,255,.06), 0 0 24px rgba(57,220,255,.34);
}

/* ---------- Free / public start area ---------- */
.free-showcase{
  position:relative;
  overflow:hidden;
}

.free-showcase::before{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:inherit;
  pointer-events:none;
  opacity:.62;
  background:
    radial-gradient(circle at 22% 18%, rgba(57,220,255,.14), transparent 28%),
    radial-gradient(circle at 88% 74%, rgba(90,225,176,.10), transparent 34%);
}

.free-showcase::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  background:linear-gradient(112deg, transparent 0%, rgba(255,255,255,.06) 42%, transparent 66%);
  transform:translateX(-80%);
  transition:opacity .5s ease, transform 1.1s cubic-bezier(.2,.8,.2,1);
}

.pricing-section.is-visible .free-showcase::after{
  opacity:.64;
  transform:translateX(78%);
}

.free-showcase > *{position:relative; z-index:1;}

.free-showcase .billing-card--free,
.free-explain-grid .free-next-card{
  transition:transform .42s cubic-bezier(.2,.8,.2,1), border-color .42s ease, box-shadow .42s ease, background .42s ease;
}

@media (hover:hover) and (pointer:fine){
  .free-showcase .billing-card--free:hover,
  .free-explain-grid .free-next-card:hover,
  .auth-preview-card:hover{
    transform:translateY(-4px);
    border-color:rgba(57,220,255,.22);
    box-shadow:0 28px 76px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.07);
  }

  .free-explain-grid .free-next-card--simple:hover{border-color:rgba(90,225,176,.24);}
  .free-explain-grid .free-next-card--hoster:hover{border-color:rgba(255,192,122,.28);}
}

.free-explain-grid .free-next-card{
  opacity:0;
  transform:translateY(18px);
  transition:
    opacity .55s ease,
    transform .65s cubic-bezier(.2,.8,.2,1),
    border-color .42s ease,
    box-shadow .42s ease;
}

.pricing-section.is-visible .free-explain-grid .free-next-card{
  opacity:1;
  transform:translateY(0);
}

.pricing-section.is-visible .free-explain-grid .free-next-card:nth-child(1){transition-delay:.22s;}
.pricing-section.is-visible .free-explain-grid .free-next-card:nth-child(2){transition-delay:.31s;}
.pricing-section.is-visible .free-explain-grid .free-next-card:nth-child(3){transition-delay:.40s;}

.billing-card__feature-dot{
  box-shadow:0 0 16px rgba(57,220,255,.30);
}

/* ---------- Login / account section ---------- */
.access-card--split{
  position:relative;
  overflow:hidden;
  border-color:rgba(57,220,255,.11);
}

.access-card--split::after{
  content:"";
  position:absolute;
  inset:auto 28px 26px 28px;
  height:1px;
  pointer-events:none;
  opacity:.38;
  background:linear-gradient(90deg, rgba(57,220,255,.0), rgba(57,220,255,.62), rgba(118,151,255,.28), rgba(57,220,255,.0));
  filter:drop-shadow(0 0 14px rgba(57,220,255,.20));
}

.auth-preview-card{
  position:relative;
  overflow:hidden;
  opacity:0;
  transform:translateY(20px) scale(.985);
  transition:
    opacity .58s ease,
    transform .68s cubic-bezier(.2,.8,.2,1),
    border-color .42s ease,
    box-shadow .42s ease;
}

.access-section.is-visible .auth-preview-card{
  opacity:1;
  transform:translateY(0) scale(1);
}

.access-section.is-visible .auth-preview-card:nth-child(1){transition-delay:.20s;}
.access-section.is-visible .auth-preview-card:nth-child(2){transition-delay:.32s;}

.auth-preview-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.0;
  background:radial-gradient(circle at 84% 16%, rgba(57,220,255,.14), transparent 34%);
  transition:opacity .42s ease;
}

.auth-preview-card:hover::after{opacity:.78;}
.auth-preview-card > *{position:relative; z-index:1;}

/* ---------- Footer: closer to the NexCore design language ---------- */
.landing-footer--v59{
  max-width:1560px;
  margin:88px auto 0;
  padding:24px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:28px 28px 0 0;
  background:
    radial-gradient(circle at 5% 20%, rgba(57,220,255,.12), transparent 28%),
    radial-gradient(circle at 92% 80%, rgba(118,151,255,.11), transparent 32%),
    linear-gradient(180deg, rgba(9,18,32,.76), rgba(5,10,18,.88));
  box-shadow:0 -22px 70px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.05);
  display:grid;
  grid-template-columns:minmax(220px, .75fr) minmax(0, 1.25fr);
  align-items:center;
  gap:18px;
  overflow:hidden;
}

.landing-footer--v59::before{
  content:"";
  position:absolute;
  left:24px;
  right:24px;
  top:0;
  height:1px;
  opacity:.86;
  background:linear-gradient(90deg, transparent, rgba(57,220,255,.70), rgba(118,151,255,.28), transparent);
}

.landing-footer--v59::after{
  content:"";
  position:absolute;
  top:-40%;
  bottom:-40%;
  width:34%;
  left:-42%;
  opacity:.34;
  pointer-events:none;
  background:linear-gradient(110deg, transparent, rgba(255,255,255,.065), transparent);
  transform:skewX(-16deg);
  transition:left 1.35s cubic-bezier(.2,.8,.2,1);
}

.landing-footer--v59.is-visible::after{left:112%;}

.footer-brandline{
  position:relative;
  z-index:1;
  display:grid;
  gap:10px;
  color:#b8c9e8;
}

.footer-brand-mini{
  display:flex;
  align-items:center;
  gap:10px;
  color:#f5f9ff;
}

.footer-brand-mini img{
  width:34px;
  height:34px;
  object-fit:contain;
  filter:drop-shadow(0 0 12px rgba(57,220,255,.28));
}

.footer-brand-mini strong{
  font-size:1.02rem;
  letter-spacing:.01em;
}

.landing-footer--v59 nav{
  position:relative;
  z-index:1;
  display:flex;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}

.landing-footer--v59 a,
.landing-footer--v59 button{
  appearance:none;
  border:1px solid rgba(255,255,255,.075);
  background:rgba(255,255,255,.035);
  color:#b8c9e8;
  min-height:38px;
  padding:0 13px;
  border-radius:999px;
  font:inherit;
  font-size:.88rem;
  text-decoration:none;
  cursor:pointer;
  transition:color .25s ease, border-color .25s ease, background .25s ease, transform .25s ease, box-shadow .25s ease;
}

.landing-footer--v59 a:hover,
.landing-footer--v59 button:hover{
  color:#f5f9ff;
  border-color:rgba(57,220,255,.22);
  background:rgba(57,220,255,.07);
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(0,0,0,.18);
}

.landing-footer--v59{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .68s ease, transform .78s cubic-bezier(.2,.8,.2,1);
}

.landing-footer--v59.is-visible{
  opacity:1;
  transform:translateY(0);
}

@media (max-width:1180px){
  .demo-board::before,
  .demo-board::after{display:none;}
  .landing-footer--v59{
    grid-template-columns:1fr;
    align-items:flex-start;
  }
  .landing-footer--v59 nav{justify-content:flex-start;}
}

@media (max-width:720px){
  .demo-section::before,
  .pricing-section::before,
  .access-section::before{inset:-44px -18px;}
  .demo-copy,
  .demo-board,
  .free-showcase,
  .access-card{transform:none;}
  .demo-node,
  .free-explain-grid .free-next-card,
  .auth-preview-card{opacity:1; transform:none;}
  .landing-footer--v59{padding:18px; border-radius:24px 24px 0 0;}
  .landing-footer--v59 a,
  .landing-footer--v59 button{font-size:.84rem; padding:0 11px;}
}

@media (prefers-reduced-motion: reduce){
  .demo-copy,
  .demo-board,
  .free-showcase,
  .access-card,
  .demo-node,
  .free-explain-grid .free-next-card,
  .auth-preview-card,
  .landing-footer--v59,
  .demo-section::after,
  .pricing-section::after,
  .access-section::after,
  .free-showcase::after,
  .landing-footer--v59::after{
    transition:none !important;
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
}


/* ============================================================
   SECTION: css/v60-section-bridges-footer.css
   ============================================================ */
/* =========================================================
   NexCore Landing v60
   Finale Übergänge + Footer-Dock
   Ziel: v59 Look behalten, aber die unteren Bereiche sauber
   miteinander verbinden. Keine Text-/i18n-Änderungen.
   ========================================================= */

/* Die v59-Flächen waren unten stellenweise zu groß und wirkten wie ein
   aufgesetzter Glow. v60 reduziert sie zu feinen Lichtkanten. */
.demo-section::before,
.pricing-section::before,
.access-section::before{
  inset:-44px 0 -44px !important;
  opacity:.34 !important;
  background:
    linear-gradient(180deg, rgba(3,10,18,0), rgba(57,220,255,.035) 42%, rgba(118,151,255,.025) 62%, rgba(3,10,18,0)) !important;
  filter:none !important;
}

.demo-section::after,
.pricing-section::after,
.access-section::after{
  top:-18px !important;
  width:min(760px, 70vw) !important;
  opacity:.20 !important;
  filter:drop-shadow(0 0 8px rgba(57,220,255,.16)) !important;
}

.demo-section.is-visible::after,
.pricing-section.is-visible::after,
.access-section.is-visible::after{
  opacity:.46 !important;
}

.demo-shell::before,
.free-showcase::before,
.access-card::before{
  opacity:.34 !important;
  filter:blur(4px) !important;
}

.free-showcase::after,
.demo-copy::before,
.access-card::before{
  opacity:.36 !important;
}

/* ---------- Section bridges: kleine Datenleitung zwischen den Blöcken ---------- */
.section-bridge{
  --bridge-cyan: rgba(57,220,255,.82);
  --bridge-blue: rgba(118,151,255,.50);
  position:relative;
  z-index:3;
  width:min(1180px, calc(100% - 48px));
  height:92px;
  margin:4px auto -4px;
  display:grid;
  place-items:center;
  pointer-events:none;
  opacity:0;
  transform:translateY(10px);
  transition:opacity .55s ease, transform .7s cubic-bezier(.2,.8,.2,1);
}

.section-bridge::before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  width:1px;
  height:0;
  transform:translateX(-50%);
  background:linear-gradient(180deg, transparent, var(--bridge-cyan), var(--bridge-blue), transparent);
  box-shadow:0 0 16px rgba(57,220,255,.22);
  transition:height .85s cubic-bezier(.2,.8,.2,1) .08s;
}

.section-bridge::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  height:1px;
  width:0;
  transform:translate(-50%, -50%);
  background:linear-gradient(90deg, transparent, rgba(57,220,255,.20), rgba(118,151,255,.16), transparent);
  opacity:.0;
  transition:width .75s cubic-bezier(.2,.8,.2,1) .22s, opacity .55s ease .18s;
}

.section-bridge .bridge-dot{
  width:12px;
  height:12px;
  border-radius:999px;
  z-index:2;
  opacity:0;
  transform:scale(.62);
  background:linear-gradient(180deg, #55e6ff, #4b91ff);
  box-shadow:0 0 0 0 rgba(57,220,255,0), 0 0 18px rgba(57,220,255,.18);
  transition:opacity .38s ease .32s, transform .48s cubic-bezier(.2,.8,.2,1) .32s, box-shadow .48s ease .32s;
}

.section-bridge .bridge-line{
  position:absolute;
  left:50%;
  top:50%;
  width:min(220px, 22vw);
  height:1px;
  opacity:0;
  transform:translateY(-50%) scaleX(.25);
  background:linear-gradient(90deg, rgba(57,220,255,.50), rgba(57,220,255,.12), transparent);
  filter:drop-shadow(0 0 10px rgba(57,220,255,.22));
  transition:opacity .48s ease .40s, transform .65s cubic-bezier(.2,.8,.2,1) .40s;
}

.section-bridge:nth-of-type(even) .bridge-line{
  left:auto;
  right:50%;
  background:linear-gradient(90deg, transparent, rgba(57,220,255,.12), rgba(57,220,255,.50));
  transform-origin:right center;
}

.section-bridge.is-visible{
  opacity:1;
  transform:translateY(0);
}

.section-bridge.is-visible::before{height:100%;}
.section-bridge.is-visible::after{width:min(520px, 46vw); opacity:.68;}
.section-bridge.is-visible .bridge-dot{
  opacity:1;
  transform:scale(1);
  box-shadow:0 0 0 7px rgba(57,220,255,.055), 0 0 28px rgba(57,220,255,.48);
  animation:v60BridgePulse 2.9s ease-in-out infinite;
}
.section-bridge.is-visible .bridge-line{
  opacity:1;
  transform:translateY(-50%) scaleX(1);
}

.section-bridge--after-timeline{margin-top:-18px;}
.section-bridge--to-footer{height:78px; margin-bottom:-18px;}
.section-bridge--to-footer::after{opacity:.52;}

@keyframes v60BridgePulse{
  0%,100%{filter:saturate(1); box-shadow:0 0 0 6px rgba(57,220,255,.045), 0 0 22px rgba(57,220,255,.38);}
  50%{filter:saturate(1.24); box-shadow:0 0 0 10px rgba(57,220,255,.075), 0 0 36px rgba(57,220,255,.56);}
}

/* Die unteren Cards bekommen einen ruhigen Eintritt, der zur Brücke passt. */
.demo-section.is-visible .demo-shell,
.pricing-section.is-visible .free-showcase,
.access-section.is-visible .access-card{
  box-shadow:
    0 28px 80px rgba(0,0,0,.28),
    0 0 0 1px rgba(57,220,255,.045),
    inset 0 1px 0 rgba(255,255,255,.055);
}

/* ---------- Footer v60: weniger Kasten, mehr NexCore-Dock ---------- */
.landing-footer--v60{
  max-width:1560px !important;
  margin:28px auto 0 !important;
  padding:30px 28px 34px !important;
  border:0 !important;
  border-radius:0 !important;
  background:
    linear-gradient(180deg, rgba(6,15,28,.58), rgba(4,9,17,.76) 64%, rgba(2,5,10,.92)) !important;
  box-shadow:none !important;
  display:grid !important;
  grid-template-columns:minmax(240px, .75fr) minmax(0, 1.25fr) !important;
  align-items:center !important;
  gap:22px !important;
}

.landing-footer--v60::before{
  left:0 !important;
  right:0 !important;
  top:0 !important;
  height:1px !important;
  opacity:.85 !important;
  background:linear-gradient(90deg, transparent, rgba(57,220,255,.36), rgba(118,151,255,.24), transparent) !important;
}

.landing-footer--v60::after{
  content:"" !important;
  position:absolute !important;
  left:8% !important;
  right:8% !important;
  top:0 !important;
  height:84px !important;
  width:auto !important;
  bottom:auto !important;
  opacity:.54 !important;
  transform:none !important;
  pointer-events:none !important;
  background:radial-gradient(ellipse at 50% 0%, rgba(57,220,255,.13), transparent 68%) !important;
  transition:opacity .6s ease !important;
}

.footer-brandline{
  gap:8px !important;
}

.footer-brand-mini img{
  width:40px !important;
  height:40px !important;
}

.footer-brand-mini strong{
  font-size:1.08rem !important;
}

.landing-footer--v60 nav{
  justify-content:flex-end !important;
  gap:8px !important;
}

.landing-footer--v60 a,
.landing-footer--v60 button{
  min-height:36px !important;
  padding:0 12px !important;
  border-color:rgba(255,255,255,.065) !important;
  background:rgba(255,255,255,.026) !important;
  color:#b9c9e5 !important;
}

.landing-footer--v60 a:hover,
.landing-footer--v60 button:hover{
  color:#f5f9ff !important;
  border-color:rgba(57,220,255,.24) !important;
  background:rgba(57,220,255,.065) !important;
  box-shadow:0 12px 30px rgba(0,0,0,.18), 0 0 18px rgba(57,220,255,.08) !important;
}

@media (max-width:1180px){
  .section-bridge{height:74px; width:min(960px, calc(100% - 34px));}
  .section-bridge .bridge-line{width:min(170px, 20vw);}
  .section-bridge.is-visible::after{width:min(400px, 44vw);}
  .landing-footer--v60{
    grid-template-columns:1fr !important;
    align-items:flex-start !important;
    padding:26px 22px 30px !important;
  }
  .landing-footer--v60 nav{justify-content:flex-start !important;}
}

@media (max-width:720px){
  .section-bridge{height:56px; margin:0 auto -4px;}
  .section-bridge::after,
  .section-bridge .bridge-line{display:none;}
  .section-bridge .bridge-dot{width:10px; height:10px;}
  .landing-footer--v60{padding:22px 18px 26px !important;}
  .landing-footer--v60 nav{gap:7px !important;}
}

@media (prefers-reduced-motion: reduce){
  .section-bridge,
  .section-bridge::before,
  .section-bridge::after,
  .section-bridge .bridge-dot,
  .section-bridge .bridge-line{
    transition:none !important;
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
  .section-bridge::before{height:100% !important;}
  .section-bridge::after{width:min(420px, 44vw) !important;}
}


/* ============================================================
   SECTION: css/v61-responsive-final.css
   ============================================================ */
/* =========================================================
   NexCore Landing v61
   Responsive final pass: 4K/ultrawide -> desktop -> laptop -> tablet -> mobile.
   This file is intentionally loaded last and only overrides layout behavior.
   ========================================================= */

:root{
  --nc-gutter:clamp(18px, 3.2vw, 72px);
  --nc-max-wide:2380px;
  --nc-max-content:1560px;
}

html,body{max-width:100%; overflow-x:hidden;}
img,svg,video{max-width:100%;}

.nav,
.hero,
.feature-section{
  width:min(calc(100% - (var(--nc-gutter) * 2)), var(--nc-max-wide));
}
.demo-section,
.pricing-section,
.access-section,
.landing-footer{
  width:min(calc(100% - (var(--nc-gutter) * 2)), var(--nc-max-content));
}

/* ---------------------------------------------------------
   Mobile menu button
   --------------------------------------------------------- */
.mobile-menu-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:42px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  color:#edf6ff;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 14px 36px rgba(0,0,0,.18);
  font:inherit;
  font-size:.9rem;
  font-weight:850;
  letter-spacing:.02em;
  cursor:pointer;
  position:relative;
  z-index:91;
}
.mobile-menu-toggle__lines,
.mobile-menu-toggle__lines::before,
.mobile-menu-toggle__lines::after{
  width:18px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg, var(--cyan), #72a7ff);
  display:block;
  transition:transform .22s ease, opacity .22s ease;
  box-shadow:0 0 12px rgba(57,220,255,.24);
}
.mobile-menu-toggle__lines{position:relative;}
.mobile-menu-toggle__lines::before,
.mobile-menu-toggle__lines::after{content:""; position:absolute; left:0;}
.mobile-menu-toggle__lines::before{top:-6px;}
.mobile-menu-toggle__lines::after{top:6px;}
.nav.is-menu-open .mobile-menu-toggle__lines{background:transparent; box-shadow:none;}
.nav.is-menu-open .mobile-menu-toggle__lines::before{transform:translateY(6px) rotate(45deg);}
.nav.is-menu-open .mobile-menu-toggle__lines::after{transform:translateY(-6px) rotate(-45deg);}

/* ---------------------------------------------------------
   Large screens / 4K / ultrawide
   --------------------------------------------------------- */
@media (min-width:2400px){
  :root{--nc-gutter:clamp(84px, 5vw, 150px);}
  .hero{grid-template-columns:1.12fr .82fr 1.12fr; gap:20px;}
  .center-wrap{width:min(100%, 760px);}
  .center-wrap h1{font-size:clamp(6.2rem, 5.6vw, 9.2rem);}
  .sub{font-size:1.22rem; max-width:650px;}
  .caption{max-width:390px;}
  .feature-section{margin-top:-230px;}
}

/* ---------------------------------------------------------
   Standard desktop and high desktop widths
   --------------------------------------------------------- */
@media (max-width:1920px){
  :root{--nc-gutter:clamp(28px, 2.8vw, 72px);}
}

@media (max-width:1680px){
  :root{--nc-gutter:clamp(24px, 2.4vw, 52px);}
  .brand-icon{height:54px;}
  .brand-title{height:70px;}
  .nav-actions{gap:8px;}
  .btn{min-height:42px; padding-inline:15px; font-size:.9rem;}
  .language-trigger{min-width:190px;}
  .hero{grid-template-columns:minmax(300px,1.05fr) minmax(355px,.84fr) minmax(300px,1.05fr);}
  .center-wrap h1{font-size:clamp(4.35rem, 5.45vw, 6.9rem);}
}

/* ---------------------------------------------------------
   Laptop: 1600 -> 1366/1350. Keep v60 look, just make it breathe.
   --------------------------------------------------------- */
@media (max-width:1500px) and (min-width:1181px){
  :root{--nc-gutter:22px; --nav-h:78px;}
  .brand-icon{height:52px;}
  .brand-title{height:68px;}
  .nav{gap:12px;}
  .nav-actions{gap:7px;}
  .btn{min-height:40px; padding-inline:13px; font-size:.86rem;}
  .language-trigger{min-width:172px; max-width:210px;}
  .language-current{max-width:124px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .hero{grid-template-columns:minmax(278px,1fr) minmax(324px,.88fr) minmax(278px,1fr); gap:6px; padding-bottom:54px;}
  .media,.center,.visual{min-height:clamp(500px, calc(100svh - var(--nav-h) - 18px), 640px);}
  .center-wrap h1{font-size:clamp(3.82rem, 5.05vw, 5.9rem); line-height:.9;}
  .eyebrow-main{font-size:.72rem; min-height:38px; padding-inline:13px; margin-bottom:12px;}
  .sub{font-size:.96rem; line-height:1.52; max-width:520px; margin-top:12px;}
  .cta{margin-top:20px; gap:9px;}
  .caption{max-width:292px; padding:16px 18px;}
  .caption strong{font-size:1.05rem;}
  .caption span{font-size:.86rem; line-height:1.42;}
  .left .caption{left:6%; bottom:4%;}
  .right .caption{right:6%; bottom:4%;}
  .feature-section{margin-top:-82px; padding-top:160px; padding-bottom:86px;}
  .section-top{margin-bottom:48px;}
}

@media (max-height:790px) and (min-width:1181px){
  .nav{min-height:72px;}
  .brand-icon{height:48px;}
  .brand-title{height:62px;}
  .btn{min-height:38px; padding-inline:12px; font-size:.84rem;}
  .media,.center,.visual{min-height:clamp(470px, calc(100svh - var(--nav-h) - 16px), 570px);}
  .center-wrap h1{font-size:clamp(3.55rem, 4.7vw, 5.35rem);}
  .sub{font-size:.92rem; line-height:1.45; max-width:500px;}
  .caption{padding:14px 16px; max-width:276px;}
  .caption span{font-size:.82rem;}
  .scroll{display:none;}
}

/* ---------------------------------------------------------
   Tablet / small notebook: navigation becomes a clean dropdown.
   --------------------------------------------------------- */
@media (max-width:1080px){
  :root{--nc-gutter:clamp(16px, 3.2vw, 32px); --nav-h:auto;}
  .nav{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:12px;
    align-items:center;
    min-height:auto;
    padding:12px 0;
  }
  .brand{min-width:0;}
  .brand-icon{height:50px;}
  .brand-title{height:62px; max-width:min(210px, 48vw); object-fit:contain; object-position:left center;}
  .mobile-menu-toggle{display:inline-flex;}
  .nav-actions{
    grid-column:1 / -1;
    width:100%;
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:8px;
    max-height:0;
    overflow:hidden;
    opacity:0;
    transform:translateY(-6px);
    pointer-events:none;
    padding:0;
    border:0 solid rgba(255,255,255,0);
    transition:max-height .28s ease, opacity .22s ease, transform .22s ease, padding .22s ease, border-color .22s ease;
  }
  .nav.is-menu-open .nav-actions{
    max-height:720px;
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
    padding:12px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:24px;
    background:linear-gradient(180deg, rgba(8,16,30,.92), rgba(5,10,18,.86));
    box-shadow:0 22px 70px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.06);
  }
  .nav-actions .btn,
  .nav-actions .language-switcher,
  .nav-actions .language-trigger{width:100%; min-width:0;}
  .language-trigger{justify-content:space-between;}
  .language-current{max-width:calc(100% - 72px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .language-panel{
    position:fixed !important;
    top:86px !important;
    left:50% !important;
    right:auto !important;
    width:min(760px, calc(100vw - 28px)) !important;
    max-height:calc(100svh - 106px) !important;
    transform:translateX(-50%) translateY(8px) !important;
    z-index:9500 !important;
  }
  .language-panel.is-open,
  .language-switcher.is-open .language-panel{transform:translateX(-50%) translateY(0) !important;}
  .hero{grid-template-columns:1fr; gap:18px; min-height:auto; padding:18px 0 78px;}
  .center{order:1; min-height:auto; padding:26px 0 8px;}
  .media.left{order:2;}
  .media.right{order:3;}
  .media,.visual{min-height:450px;}
  .art{width:104%; height:104%;}
  .right-visual .art-right{width:108%; height:108%;}
  .caption{max-width:min(520px, calc(100% - 24px));}
  .left .caption,.right .caption{left:auto !important; right:auto !important; bottom:auto !important; margin:18px auto 0; text-align:left !important; align-items:flex-start !important;}
  .feature-section{margin-top:-70px; padding-top:145px;}
  .section-transition{height:320px;}
}

/* ---------------------------------------------------------
   Mobile landscape / big phones / small tablets
   --------------------------------------------------------- */
@media (max-width:820px){
  :root{--nc-gutter:14px;}
  html{scroll-padding-top:10px;}
  .nav-actions{grid-template-columns:repeat(2, minmax(0,1fr));}
  .nav-actions .language-switcher{grid-column:1 / -1;}
  .nav-actions .language-trigger{min-height:44px;}
  .hero{padding-top:6px; padding-bottom:52px;}
  .center-wrap{width:min(100%, 620px);}
  .eyebrow-main{min-height:36px; padding-inline:13px; font-size:.68rem; letter-spacing:.06em; margin-bottom:12px;}
  .center-wrap h1{font-size:clamp(3.15rem, 14vw, 5.6rem); line-height:.94; letter-spacing:-.065em;}
  .sub{font-size:1rem; line-height:1.55; max-width:560px; margin-top:14px;}
  .cta{display:grid; grid-template-columns:1fr 1fr; gap:10px; width:min(100%, 460px); margin:22px auto 0;}
  .cta .btn{width:100%;}
  .media,.visual{min-height:360px;}
  .visual{display:flex; flex-direction:column; justify-content:center;}
  .caption{padding:17px 18px; border-radius:20px;}
  .caption strong{font-size:1.12rem;}
  .caption span{font-size:.94rem;}
  .feature-section{margin-top:0; padding:76px 0 64px;}
  .section-transition{display:none;}
  .section-top{margin-bottom:30px; opacity:1 !important; transform:none !important;}
  .section-top h2{font-size:clamp(2.25rem, 9vw, 3.45rem); line-height:1;}
  .timeline{opacity:1 !important; transform:none !important;}
  .step-card{padding:22px; border-radius:24px;}
  .step-card__body{grid-template-columns:1fr; gap:16px;}
  .step-card__visual{min-height:150px; height:150px;}
  .demo-section,.pricing-section,.access-section{margin-top:58px;}
  .demo-shell{grid-template-columns:1fr !important; gap:18px;}
  .demo-copy,.demo-board,.access-card{padding:22px !important; border-radius:26px;}
  .demo-copy h2,.access-card h2{font-size:clamp(2rem, 9vw, 3rem); line-height:1.02;}
  .demo-board{grid-template-columns:1fr !important;}
  .free-showcase{grid-template-columns:1fr !important; padding:14px; border-radius:28px;}
  .free-explain-grid{grid-template-columns:1fr !important;}
  .access-card--split{grid-template-columns:1fr !important;}
  .auth-preview-grid{grid-template-columns:1fr !important;}
  .section-bridge{height:56px;}
  .scroll{display:none;}
}

/* ---------------------------------------------------------
   Phone portrait
   --------------------------------------------------------- */
@media (max-width:560px){
  :root{--nc-gutter:10px;}
  body::before{background-size:34px 34px;}
  .nav{padding:10px 0; gap:8px;}
  .brand-icon{height:42px;}
  .brand-title{height:50px; max-width:150px;}
  .mobile-menu-toggle{min-height:38px; padding:0 12px;}
  .mobile-menu-toggle__text{font-size:.82rem;}
  .nav-actions{grid-template-columns:1fr;}
  .nav.is-menu-open .nav-actions{padding:10px; border-radius:20px;}
  .nav-actions .btn{min-height:42px; font-size:.88rem;}
  .language-panel{
    top:8px !important;
    left:8px !important;
    right:8px !important;
    width:auto !important;
    max-height:calc(100svh - 16px) !important;
    transform:none !important;
    overflow:auto !important;
  }
  .language-switcher.is-open .language-panel{transform:none !important;}
  .language-panel__head{align-items:flex-start; gap:10px;}
  .language-carousel{grid-template-columns:32px minmax(0,1fr) 32px; gap:6px;}
  .language-card{min-height:86px; padding:11px; gap:10px;}
  .language-card__flag{width:42px; height:32px; border-radius:10px;}
  .language-card__name{font-size:.9rem;}
  .language-card__meta{font-size:.72rem;}
  .hero{padding-top:2px; padding-bottom:38px;}
  .center{padding-top:16px;}
  .eyebrow-main{font-size:.62rem; line-height:1.25; white-space:normal; max-width:100%; padding:8px 12px;}
  .center-wrap h1{font-size:clamp(2.74rem, 16vw, 4.45rem); letter-spacing:-.055em;}
  .sub{font-size:.94rem; line-height:1.5; margin-top:10px;}
  .cta{grid-template-columns:1fr; width:100%; max-width:340px; margin-top:18px;}
  .media,.visual{min-height:310px;}
  .art{width:112%; height:112%;}
  .caption{width:100%; margin-top:10px; padding:15px;}
  .caption .eyebrow,.section-kicker,.feature-tag{font-size:.72rem;}
  .caption span{font-size:.88rem; line-height:1.42;}
  .feature-section{padding-top:56px; padding-bottom:48px;}
  .section-top{text-align:left;}
  .section-top p{font-size:.95rem;}
  .step-card{padding:18px; border-radius:22px;}
  .step-copy h3{font-size:1.55rem;}
  .step-copy p{font-size:.94rem;}
  .step-card__visual{height:128px; min-height:128px;}
  .demo-copy,.demo-board,.access-card{padding:18px !important; border-radius:22px;}
  .demo-node{padding:15px;}
  .pricing-section .section-top{text-align:left;}
  .free-showcase{padding:10px; border-radius:24px;}
  .free-showcase .billing-card--free{padding:17px !important; border-radius:22px !important;}
  .billing-card__price strong{font-size:2.75rem;}
  .free-explain-grid .free-next-card{padding:16px; border-radius:20px;}
  .auth-preview-card{padding:17px !important; border-radius:20px;}
  .cookie-banner__actions{display:grid; grid-template-columns:1fr;}
  .cookie-banner__actions .btn{width:100%;}
  .landing-footer--v60{padding:18px 14px 22px !important; border-radius:22px 22px 0 0 !important;}
  .landing-footer--v60 nav{display:grid !important; grid-template-columns:1fr 1fr; gap:8px !important; width:100%;}
  .landing-footer--v60 a,
  .landing-footer--v60 button{justify-content:center; width:100%; min-height:38px; font-size:.82rem !important;}
  .footer-brandline{width:100%; align-items:flex-start;}
  .footer-brand-mini img{width:30px; height:30px;}
}

@media (max-width:380px){
  .brand-title{display:none;}
  .center-wrap h1{font-size:clamp(2.45rem, 18vw, 3.65rem);}
  .btn{padding-inline:11px;}
  .landing-footer--v60 nav{grid-template-columns:1fr;}
}


/* ============================================================
   SECTION: css/v62-mobile-tablet-polish.css
   ============================================================ */
/* =========================================================
   NexCore Landing v62
   Mobile footer + tablet feature timeline polish.
   Ziel: v61 Responsive-Final behalten, aber zwei Bruchstellen glätten:
   1) Footer auf Handy als echtes Mobile-Dock
   2) Feature-Timeline im Tablet-Bereich nicht mehr zerquetschen
   ========================================================= */

/* ---------------------------------------------------------
   Tablet / small notebook: Feature-Timeline wird zur seitlichen Rail.
   Damit die Karten nicht zwischen Mittellinie und Seitenrand gequetscht werden.
   Desktop ab ca. 1281px bleibt unverändert.
   --------------------------------------------------------- */
@media (max-width:1280px) and (min-width:821px){
  .feature-section{
    padding-bottom:74px;
  }

  .timeline{
    position:relative;
    max-width:980px;
    display:grid;
    gap:18px;
    padding-left:0;
    opacity:1 !important;
    transform:none !important;
  }

  .timeline::before{
    content:"";
    position:absolute;
    left:21px;
    top:30px;
    bottom:30px;
    width:1px;
    border-radius:999px;
    background:linear-gradient(180deg,
      rgba(57,220,255,0),
      rgba(57,220,255,.22) 12%,
      rgba(57,220,255,.42) 50%,
      rgba(57,220,255,.22) 88%,
      rgba(57,220,255,0));
    box-shadow:0 0 22px rgba(57,220,255,.10);
    pointer-events:none;
  }

  .timeline-line-base,
  .timeline-line-fill{
    display:none !important;
  }

  .step-row{
    display:grid !important;
    grid-template-columns:42px minmax(0, 1fr) !important;
    gap:14px;
    align-items:start;
    min-height:auto !important;
    perspective:none !important;
  }

  .step-center{
    display:flex !important;
    grid-column:1;
    grid-row:1;
    align-items:flex-start;
    justify-content:center;
    height:auto;
    min-height:100%;
    padding-top:30px;
    position:relative;
  }

  .step-dot{
    position:relative !important;
    left:auto !important;
    top:auto !important;
    width:16px;
    height:16px;
    transform:scale(.92) !important;
    opacity:.95 !important;
    z-index:2;
  }

  .step-dot::before{
    inset:-11px;
  }

  .step-side.left,
  .step-side.right{
    grid-column:2;
    grid-row:1;
    justify-content:stretch !important;
    padding:0 !important;
    min-width:0;
  }

  .step-side:empty{
    display:none !important;
  }

  .step-side.left::after,
  .step-side.right::before{
    display:none !important;
    content:none !important;
  }

  .step-card{
    width:100% !important;
    max-width:none !important;
    padding:22px !important;
    border-radius:24px !important;
    transform:translateY(18px) scale(.985);
    clip-path:inset(0 0 100% 0 round 24px);
  }

  .step-row.is-visible .step-card{
    transform:translateY(0) scale(1) !important;
    clip-path:inset(0 0 0 0 round 24px) !important;
  }

  .step-card__body{
    grid-template-columns:minmax(0, 1fr) minmax(130px, 172px) !important;
    gap:18px !important;
  }

  .step-copy h3{
    font-size:clamp(1.62rem, 3.1vw, 2.1rem);
  }

  .step-copy p{
    font-size:1rem;
    line-height:1.55;
  }

  .step-card__visual{
    height:132px !important;
    min-height:132px !important;
  }
}

/* Zwischen Tablet und Mobile: Bild in den Feature-Karten unter den Text setzen,
   bevor es zu eng wird. */
@media (max-width:940px) and (min-width:821px){
  .timeline{
    max-width:760px;
  }

  .step-card__body{
    grid-template-columns:1fr !important;
  }

  .step-card__visual{
    width:100%;
    height:150px !important;
    min-height:150px !important;
  }
}

/* Mobile: keine Rail erzwingen. Hier bleiben die Feature-Karten vollbreit. */
@media (max-width:820px){
  .timeline::before{
    display:none !important;
  }

  .step-row{
    grid-template-columns:1fr !important;
    gap:0 !important;
  }

  .step-center{
    display:none !important;
  }

  .step-side.left,
  .step-side.right{
    grid-column:1 !important;
    grid-row:auto !important;
    padding:0 !important;
    justify-content:stretch !important;
  }

  .step-side:empty{
    display:none !important;
  }

  .step-card{
    width:100% !important;
    max-width:none !important;
  }
}

/* ---------------------------------------------------------
   Mobile Footer: aus dem Desktop-Dock wird ein echtes Handy-Dock.
   --------------------------------------------------------- */
@media (max-width:720px){
  .section-bridge--to-footer{
    height:46px !important;
    margin-bottom:0 !important;
  }

  .landing-footer.landing-footer--v60{
    width:calc(100% - 20px) !important;
    max-width:none !important;
    margin:10px auto 0 !important;
    padding:20px 14px calc(22px + env(safe-area-inset-bottom, 0px)) !important;
    border-radius:28px 28px 0 0 !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:18px !important;
    align-items:center !important;
    background:
      linear-gradient(180deg, rgba(8,18,32,.82), rgba(4,9,17,.96)),
      radial-gradient(circle at 20% 0%, rgba(57,220,255,.12), transparent 38%),
      radial-gradient(circle at 80% 12%, rgba(118,151,255,.10), transparent 34%) !important;
    box-shadow:
      0 -14px 44px rgba(0,0,0,.28),
      inset 0 1px 0 rgba(255,255,255,.07) !important;
    overflow:hidden;
  }

  .landing-footer.landing-footer--v60::before{
    height:1px !important;
    opacity:.9 !important;
    background:linear-gradient(90deg, transparent, rgba(57,220,255,.42), rgba(118,151,255,.30), transparent) !important;
  }

  .landing-footer.landing-footer--v60::after{
    display:none !important;
  }

  .footer-brandline{
    width:100% !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    gap:8px !important;
  }

  .footer-brand-mini{
    justify-content:center !important;
  }

  .footer-brand-mini img{
    width:34px !important;
    height:34px !important;
  }

  .footer-brand-mini strong{
    font-size:1rem !important;
  }

  .footer-brandline span{
    font-size:.86rem !important;
    line-height:1.45 !important;
    color:rgba(206,222,246,.78) !important;
  }

  .landing-footer.landing-footer--v60 nav{
    width:100% !important;
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:8px !important;
    justify-content:stretch !important;
  }

  .landing-footer.landing-footer--v60 a,
  .landing-footer.landing-footer--v60 button{
    width:100% !important;
    min-height:42px !important;
    padding:0 10px !important;
    justify-content:center !important;
    text-align:center !important;
    border-radius:999px !important;
    font-size:.82rem !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    background:rgba(255,255,255,.035) !important;
    border-color:rgba(255,255,255,.075) !important;
  }
}

@media (max-width:420px){
  .landing-footer.landing-footer--v60{
    width:calc(100% - 14px) !important;
    padding-inline:10px !important;
  }

  .landing-footer.landing-footer--v60 nav{
    grid-template-columns:1fr !important;
  }

  .landing-footer.landing-footer--v60 a,
  .landing-footer.landing-footer--v60 button{
    min-height:40px !important;
  }
}