/* =========================================================
   NurokCube Landing — Clean / Pro / Cross-browser
   - Fixed header (always visible)
   - No color-mix dependency
   - Backdrop-filter with fallback
   - Continuous background (no seams)
   - NO horizontal overflow on mobile (no empty right gap)
   - Hero: 2 cols on desktop, stacked on mobile
   - Areas: inv => right-aligned text when logo on right (desktop)
   ========================================================= */

/* ========= Brand tokens (base) ========= */
:root{
  --nc-bg: #061027;
  --nc-bg2:#050C1F;

  --nc-surface: #0C2148;
  --nc-title: #102A5A;
  --nc-brand: #194287;
  --nc-brand2:#1D5AB3;
  --nc-primary:#2787FF;
  --nc-accent:#58B6FF;
  --nc-accent2:#73C6FF;

  --mutedDark:#A9B8D6;
  --textOnDark:#F5F8FF;

  --r: 14px;
  --r2: 22px;

  --wrap: 1160px;
  --pad: 22px;
  --pad: clamp(18px, 3.2vw, 32px);

  --stroke: rgba(115,198,255,.16);
  --stroke2: rgba(255,255,255,.10);

  --glass: rgba(12,33,72,.52);
  --glass2: rgba(6,16,39,.58);

  --shadow: 0 18px 60px rgba(0,0,0,.28);
  --focus: rgba(88,182,255,.55);

  /* Fixed header height reference */
  --topbar-h: 72px;
}

/* ========= Reset / base ========= */
*{ box-sizing:border-box; }
html,body{ height:100%; }
html{
  scroll-behavior:smooth;
  overflow-x: clip;
  background: var(--nc-bg);
}
@supports not (overflow: clip){
  html{ overflow-x: hidden; }
}

body{
  margin:0;
  min-height:100%;
  color: var(--textOnDark);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;

  /* HARD guarantee: no horizontal scroll / no “right empty gap” */
  overflow-x: hidden;

  /* Continuous background */
  background-color: var(--nc-bg);
  background-image:
    radial-gradient(1100px 600px at 50% -10%, rgba(39,135,255,.14), rgba(39,135,255,0) 60%),
    radial-gradient(1000px 560px at 15% 22%, rgba(88,182,255,.10), rgba(88,182,255,0) 60%),
    radial-gradient(1000px 560px at 85% 28%, rgba(115,198,255,.08), rgba(115,198,255,0) 60%),

    radial-gradient(1100px 620px at 50% 112%, rgba(39,135,255,.12), rgba(39,135,255,0) 66%),
    radial-gradient(900px 540px at 12% 110%, rgba(88,182,255,.07), rgba(88,182,255,0) 66%),
    radial-gradient(900px 540px at 88% 110%, rgba(115,198,255,.06), rgba(115,198,255,0) 66%),

    linear-gradient(180deg, var(--nc-bg) 0%, var(--nc-bg2, #050C1F) 55%, var(--nc-bg) 100%);
  background-repeat: no-repeat;
}

/* ========= Continuous overlays (no seams) ========= */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events:none;
  z-index: 0;

  /* grid */
  background-image:
    linear-gradient(to right, rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 84px 84px;
  opacity: .075;

  /* soft mask (optional) */
  -webkit-mask-image: radial-gradient(
    85% 85% at 50% 14%,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,.85) 35%,
    rgba(0,0,0,.55) 62%,
    rgba(0,0,0,.22) 82%,
    rgba(0,0,0,0) 100%
  );
  mask-image: radial-gradient(
    85% 85% at 50% 14%,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,.85) 35%,
    rgba(0,0,0,.55) 62%,
    rgba(0,0,0,.22) 82%,
    rgba(0,0,0,0) 100%
  );
}
body::after{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events:none;
  z-index: 0;

  /* extra continuity glow */
  background:
    radial-gradient(1100px 520px at 50% -8%, rgba(39,135,255,.11), rgba(39,135,255,0) 62%),
    radial-gradient(1100px 520px at 50% 108%, rgba(39,135,255,.10), rgba(39,135,255,0) 68%);
  opacity: .9;
}

/* Keep content ABOVE overlays */
header, main, footer{
  position: relative;
  z-index: 1;
}

/* Media safety: prevent images/SVG from causing overflow */
img, video, canvas, svg{
  max-width: 100%;
  height: auto;
  display: block;
}

/* ========= Helpers ========= */
.wrap{
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

.section{
  padding: 36px 0;
}
.section, .hero{
  scroll-margin-top: calc(var(--topbar-h) + 12px);
}

/* Main offset because header is fixed */
main{
  padding-top: calc(var(--topbar-h) + env(safe-area-inset-top, 0px));
}

/* optional sprite */
.svgSprite{ position:absolute; width:0; height:0; overflow:hidden; }

/* ========= Brand Logo sizes ========= */
.ncLogo{ width: 42px; height: 42px; }
.ncLogo.sm{ width: 26px; height: 26px; }
.ncLogo.xl{ width: 150px; height: 150px; filter: drop-shadow(0 18px 38px rgba(0,0,0,.25)); }

/* ========= Topbar (fixed, ALWAYS visible) ========= */
.topbar{
  position: fixed;
  left: 0; right: 0; top: 0;
  z-index: 9999;

  /* stable height target */
  min-height: var(--topbar-h);

  /* fallback */
  background: rgba(6,16,39,.78);
  border-bottom: 1px solid rgba(255,255,255,.06);

  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
@supports ((-webkit-backdrop-filter: blur(12px)) or (backdrop-filter: blur(12px))){
  .topbar{ background: rgba(6,16,39,.62); }
}

.navWrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 14px;
}

.brand{
  display:flex;
  align-items:center;
  gap: 12px;
  text-decoration:none;
  color: var(--textOnDark);
  min-width: 0; /* allow shrink on small screens */
}
.brand .mark{
  width: 42px; height: 42px;
  border-radius: 14px;
  display:grid; place-items:center;
}
.brandTxt{ min-width:0; }
.brandName{
  font-weight: 900;
  letter-spacing: .2px;
  white-space: nowrap;
}
.brandSub{
  display:block;
  font-size: 12px;
  color: var(--mutedDark);
  margin-top:2px;
}

/* If you removed navLinks completely, no problem; these are safe */
.navLinks{
  display:flex;
  gap: 18px;
  align-items:center;
}
.navLinks a{
  text-decoration:none;
  color: rgba(245,248,255,.86);
  font-size: 13px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid transparent;
}
.navLinks a:hover{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
}

.navActions{
  display:flex;
  align-items:center;
  gap: 10px;
}

/* ========= Buttons ========= */
.btn{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  text-decoration:none;
  color: rgba(245,248,255,.92);
  background: rgba(255,255,255,.04);
  font-weight: 650;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
}
.btn svg{ width: 16px; height: 16px; }
.btn:hover{
  border-color: rgba(115,198,255,.28);
  background: rgba(88,182,255,.08);
}
.btn.primary{
  background: linear-gradient(180deg, rgba(39,135,255,.98), rgba(29,90,179,.95));
  border-color: rgba(115,198,255,.25);
  color: #071023;
  box-shadow: 0 18px 40px rgba(39,135,255,.22);
}
.btn.primary:hover{ filter: brightness(1.03); }
.btn.ghost{ background: rgba(255,255,255,.03); }
.w100{ width:100%; justify-content:center; }

/* ========= Burger / Mobile nav ========= */
.burger{ display:none; }
.mobileNav{ display:none; }
.mobileNav.is-open{ display:block; }

/* ========= Language selector ========= */
.langBtn{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(245,248,255,.92);
  cursor:pointer;
  white-space: nowrap;
}
.langBtn .dot{
  width: 8px; height: 8px;
  border-radius: 99px;
  background: var(--nc-accent);
  box-shadow: 0 0 0 6px rgba(88,182,255,.18);
}

/* Optional dropdown version (if you use it) */
.langSelect{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(245,248,255,.92);
  cursor: pointer;
  user-select: none;
}
.langSelect .dot{
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--nc-accent);
  box-shadow: 0 0 0 6px rgba(88,182,255,.18);
}
.langSelect .chev{ width: 16px; height: 16px; opacity: .85; }
.langMenu{
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 90px;
  padding: 8px;
  border-radius: 14px;
  background: rgba(6,16,39,.90);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 50px rgba(0,0,0,.28);
  display: none;
}
.langSelect.is-open .langMenu{ display: grid; gap: 6px; }
.langMenu button{
  width: 100%;
  text-align: left;
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  color: rgba(245,248,255,.92);
  cursor: pointer;
}
.langMenu button:hover{
  border-color: rgba(115,198,255,.22);
  background: rgba(88,182,255,.08);
}

/* ========= Hero ========= */
.hero{
  /* keep inside viewport feel; dvh/svh support */
  padding-top: clamp(18px, 3vw, 28px);
  padding-bottom: clamp(36px, 6vw, 72px);

  /* clip decorative overflow to avoid right gap */
  overflow-x: clip;
}
@supports not (overflow: clip){
  .hero{ overflow-x: hidden; }
}

/* Hero grid: desktop 2 cols, mobile 1 col */
.heroOne{
  position:relative;
  display:grid;
  grid-template-columns: 1fr;
  gap: 22px;

  /* IMPORTANT: clip absolute deco so it never creates overflow */
  overflow-x: clip;
}
@supports not (overflow: clip){
  .heroOne{ overflow-x: hidden; }
}

@media (min-width: 980px){
  .heroOne{
    grid-template-columns: 1fr 420px;
    align-items: center;
    gap: 34px;
  }
}

.heroLeft{ max-width: 72ch; }

.heroTitle{
  margin: 18px 0 10px;
  font-size: clamp(30px, 4.2vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.9px;
}
.heroTitle .accent{
  color: var(--nc-accent);
  text-shadow: 0 0 26px rgba(88,182,255,.22);
}

.heroSub{
  margin: 0 0 18px;
  color: rgba(245,248,255,.75);
  line-height: 1.62;
  max-width: 62ch;
}

.chipRow{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin: 16px 0 18px;
}
.chip{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(245,248,255,.86);
  font-size: 12.5px;
}
.chip svg{ width: 15px; height: 15px; color: var(--nc-primary); }

.ctaRow{
  display:flex;
  gap: 12px;
  flex-wrap:wrap;
  margin-top: 10px;
}

/* Trust cards */
.trustGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
  margin-top: 22px;
}
.trustCard{
  padding: 14px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
}
.trustCard b{ display:block; font-size: 13px; margin-bottom:4px; }
.trustCard span{ font-size: 12px; color: rgba(245,248,255,.72); }

/* Hero decorative rings (safe: clipped by hero/heroOne) */
.heroDeco{
  position:absolute;
  right: -10px;
  top: -160px;
  width: 720px;
  height: 720px;
  pointer-events:none;
  opacity: .95;
  background:
    radial-gradient(circle at 45% 45%, rgba(39,135,255,.14), transparent 58%),
    radial-gradient(circle at 45% 45%, rgba(88,182,255,.10), transparent 66%);
}
.heroDeco::before,
.heroDeco::after{
  content:"";
  position:absolute;
  inset: 0;
  margin:auto;
  width: 560px; height: 560px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 0 0 1px rgba(115,198,255,.12);
  opacity: .18;
}
.heroDeco::after{
  width: 380px; height: 380px;
  opacity: .14;
}

/* Hero Art (logo cube) */
.heroArt{
  position: relative;
  min-height: 320px;
}
.heroLogoFX{
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: min(360px, 42vw);
  height: min(360px, 42vw);
  pointer-events: none;
  opacity: .92;
  filter: drop-shadow(0 28px 70px rgba(0,0,0,.30));
}
@media (max-width: 979px){
  .trustGrid{ grid-template-columns: 1fr; }
  .heroArt{ min-height: 240px; }
  .heroLogoFX{
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
    width: min(320px, 72vw);
    height: min(320px, 72vw);
    opacity: .88;
  }
  .heroDeco{
    display: none;
  }
}
.heroLogo{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: scale(.985);
  transition: opacity .75s ease, transform .9s ease;
  will-change: opacity, transform;
}
.heroLogo.is-on{
  opacity: 1;
  transform: scale(1);
}
@keyframes heroFloat {
  0%,100%{ transform: translateY(-50%) translateX(0) }
  50%    { transform: translateY(calc(-50% - 10px)) translateX(-6px) }
}
@media (min-width: 980px){
  .heroLogoFX{ animation: heroFloat 6.5s ease-in-out infinite; }
}
@media (prefers-reduced-motion: reduce){
  .heroLogo, .heroLogoFX{ transition: none !important; animation: none !important; }
}

/* ========= Section head ========= */
.secHead{
  display:flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 22px;
}
.secHead h2{
  margin:0;
  font-size: clamp(22px, 2.5vw, 30px);
  letter-spacing: 0.3px;
}
.secHead p{
  margin:0;
  max-width: 70ch;
  color: rgba(245,248,255,.70);
  line-height: 1.6;
    letter-spacing: 0.8px;
}

/* ========= Areas ========= */
.areaList{ display:flex; flex-direction:column; gap: 14px; }

.areaRow{
  --area: var(--nc-accent);

  display:grid;
  grid-template-columns: 150px 1fr; /* match areaLogo size */
  gap: 22px;
  align-items:center;

  padding: 22px;
  border-radius: 24px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.09);

  position: relative;
  overflow:hidden;
}
.areaRow::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(700px 260px at 20% 30%, rgba(255,255,255,.06), transparent 62%),
    radial-gradient(500px 240px at 90% 70%, rgba(255,255,255,.03), transparent 60%);
  opacity: .9;
}
.areaLogo{
  width: 150px; height: 150px;
  display:grid;
  place-items:center;
}
.areaBody{ position:relative; padding: 0 18px; min-width:0; }
.areaTop{
  display:flex;
  align-items:center;
  gap: 12px;
  margin-bottom: 8px;
}
.badge{
  display:inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(245,248,255,.92);
  /*font-weight: 800;*/
  font-size: 12px;
  letter-spacing: 0.8px;
}
.areaLine{
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, rgba(255,255,255,.16), transparent);
  opacity: .7;
}
.areaBody h3{ margin: 0 0 6px; letter-spacing:-.2px; 
    letter-spacing: 0.8px;}
.areaBody p{
  margin: 0 0 12px;
  color: rgba(245,248,255,.74);
  line-height: 1.55;
    letter-spacing: 0.8px;
}
.tagRow{ display:flex; flex-wrap:wrap; gap: 10px; }
.tag{
  display:inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(245,248,255,.84);
  font-size: 12px;
}

/* Inverted row: logo right => text right (desktop only) */
.areaRow.inv{
  grid-template-columns: 1fr 150px;
}
.areaRow.inv .areaLogo{ order: 2; justify-self:end; }
.areaRow.inv .areaBody{ order: 1; text-align:right; }
.areaRow.inv .areaTop{ justify-content:flex-end; }
.areaRow.inv .tagRow{ justify-content:flex-end; }
.areaRow.inv .areaLine{
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.16));
}

.areaRow .ncLogo.xl{
  filter: drop-shadow(0 18px 38px rgba(0,0,0,.30));
}

/* ========= Cards / Services ========= */
.card{
  padding: 18px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(12,33,72,.58), rgba(6,16,39,.52));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 50px rgba(0,0,0,.22);
}
.cardTop{ display:flex; gap: 14px; align-items:flex-start; min-width:0; }
.cardTop .ico{
  width: 44px; height: 44px;
  border-radius: 16px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--nc-accent);
  overflow:hidden;
  line-height:0;
  flex: 0 0 auto;
}
.cardTop .ico svg{ width: 22px; height: 22px; }
.card h3{ margin: 0 0 6px; 
    letter-spacing: 0.8px;}
.card p{ margin: 0; color: rgba(245,248,255,.72); line-height: 1.55; 
    letter-spacing: 0.8px;}

/* Pills inside cards */
.pillRow{ display:flex; flex-wrap:wrap; gap: 10px; margin-top: 12px; }
.pillRow .pill{
  display:inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(245,248,255,.82);
  font-size: 12px;
}

.svcGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}

/* ========= Stack (vertical full width) ========= */
.stackGrid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.stackCard{
  padding: 18px;
  border-radius: 22px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.09);
}
.stackTitle{ font-weight: 900; margin-bottom: 10px; letter-spacing: .1px; }
.tagCloud{ display:flex; flex-wrap:wrap; gap: 10px; }

/* ========= Cases ========= */
.caseGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}
.caseCard{
  padding: 18px;
  border-radius: 22px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.09);
}
.caseHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.caseBadge{
  font-size: 12px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(245,248,255,.80);
}
.caseCard p{ margin:0; color: rgba(245,248,255,.74); line-height: 1.55; }

/* ========= Contact Form ========= */
.contactForm{ margin-top: 14px; }
.formGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}
.formGrid label{
  display:flex;
  flex-direction:column;
  gap: 8px;
  font-size: 12.5px;
  color: rgba(245,248,255,.82);
}
.formGrid .span2{ grid-column: 1 / -1; }

.contactForm input,
.contactForm textarea{
  width:100%;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(245,248,255,.92);
  padding: 12px 12px;
  font-size: 14px;
  outline: none;
}
.contactForm textarea{ resize: vertical; min-height: 120px; }
.contactForm input::placeholder,
.contactForm textarea::placeholder{ color: rgba(245,248,255,.45); }
.contactForm input:focus,
.contactForm textarea:focus{
  border-color: rgba(88,182,255,.32);
  box-shadow: 0 0 0 3px rgba(88,182,255,.18);
}

.softCTA{
  background: linear-gradient(180deg, rgba(39,135,255,.14), rgba(6,16,39,.62));
  border-color: rgba(115,198,255,.18);
}
.softCTA .note{
  margin-top: 12px;
  color: rgba(245,248,255,.68);
  font-size: 12.5px;
  line-height: 1.55;
}

/* ========= Footer ========= */
.footer{
  padding: 26px 0 38px;
  border-top: 1px solid rgba(255,255,255,.06);
  background: rgba(6,16,39,.35);
}
.footWrap{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 14px;
}
.footBrand{ display:flex; align-items:center; gap: 12px; min-width:0; }
.muted{ color: rgba(245,248,255,.62); font-size: 12.5px; }

/* ========= Responsive ========= */
@media (max-width: 980px){
  /* if you still have nav links / burger, keep these safe */
  .navLinks{ display:none; }
  .burger{ display:inline-block; }

  .svcGrid{ grid-template-columns: 1fr; }
  .caseGrid{ grid-template-columns: 1fr; }
  .formGrid{ grid-template-columns: 1fr; }

  .areaRow, .areaRow.inv{ grid-template-columns: 1fr; }
  .areaRow.inv .areaBody{ text-align:left; }
  .areaRow.inv .areaTop{ justify-content:flex-start; }
  .areaRow.inv .tagRow{ justify-content:flex-start; }

  .areaLogo{ justify-self:start; width: 104px; height: 104px; }
  .areaRow.inv .areaLogo{ order: 0; justify-self:start; }

  .heroTitle{ margin-top: 10px; }
}

@media (max-width: 520px){
  .brandName{ font-size: 14px; }
  .btn{ padding: 10px 12px; }
}

/* =========================================================
   AREA PALETTES for SVG (c0..c22)
   ========================================================= */

/* 1) NurokCube Data — Emerald Premium */
.is-data{
  --area:#22F2A6;

  --c21:#05110D; --c7:#07130F; --c22:#071915; --c6:#0F231B; --c18:#0B2119; --c8:#0E2A20; --c4:#133226;
  --c13:#1E5A45; --c17:#1B4C3B; --c0:#214F3D; --c2:#2C6D55; --c14:#246B52; --c12:#2A7A5D; --c15:#2F8A69; --c19:#35A57B;
  --c5:#CFFFEF; --c1:#7CFFCF; --c16:#4CFFC0; --c20:#22F2A6; --c3:#18D98D; --c9:#0FCB7B; --c11:#00BA6B;
}

/* 2) NurokCube Apps — Neon Cyan */
.is-apps{
  --area:#20DCFF;

  --c21:#04121A; --c7:#071723; --c22:#071B28; --c6:#0D2232; --c18:#0A2230; --c8:#0E2B3C; --c4:#123347;
  --c13:#1A4B64; --c17:#183F58; --c0:#1E4D6A; --c2:#25607F; --c14:#255F86; --c12:#2A6FA0; --c15:#2E7FB4; --c19:#2EA2D2;
  --c5:#D7FBFF; --c1:#7FF2FF; --c16:#4CE9FF; --c20:#20DCFF; --c3:#12C7FF; --c9:#00B2FF; --c11:#00A4FF;
}

/* 3) NurokCube Performance — Violet/Indigo */
.is-perf{
  --area:#8F7BFF;

  --c21:#0B0A16; --c7:#0E0C1B; --c22:#141038; --c6:#17134A; --c18:#161243; --c8:#1B1660; --c4:#211B6E;
  --c13:#2B247E; --c17:#2A2369; --c0:#2E2B7F; --c2:#3A35A3; --c14:#3B36B0; --c12:#4A40C8; --c15:#5A4AE4; --c19:#6B63FF;
  --c5:#EEE9FF; --c1:#CFC4FF; --c16:#AFA0FF; --c20:#8F7BFF; --c3:#7A5CFF; --c9:#6C4CFF; --c11:#5B3CFF;
}

/* 4) NurokCube Industrial — Amber/Gold */
.is-ind{
  --area:#FF9A2A;

  --c21:#140C02; --c7:#1A0F03; --c22:#231404; --c6:#2C1805; --c18:#2A1705; --c8:#3A2007; --c4:#452608;
  --c13:#5A330B; --c17:#4B2A0A; --c0:#5B330E; --c2:#6B3C10; --c14:#7A4513; --c12:#8A4F16; --c15:#A65F1B; --c19:#C77721;
  --c5:#FFF2D6; --c1:#FFD08A; --c16:#FFB455; --c20:#FF9A2A; --c3:#FF8A18; --c9:#FF7610; --c11:#FF6500;
}

/* 5) NurokCube FieldOps — Coral */
.is-field{
  --area:#FF3B7A;

  --c0:#B81C52; --c1:#FF3B7A; --c2:#E32666; --c3:#FF2D6E; --c4:#3B0B1D; --c5:#FFD1DF;
  --c6:#2A0613; --c7:#140309; --c8:#240611; --c9:#FF5C91; --c11:#FF1F66; --c12:#C81E55;
  --c13:#7B1234; --c14:#9C1743; --c15:#E23A79; --c16:#FF7AAA; --c17:#5B0E28; --c18:#4B0B20;
  --c19:#FF4F87; --c20:#FF6FA2; --c21:#0D0206; --c22:#120208;
}

/* Mobile: areaTop => primero line, luego badge */
@media (max-width: 980px){
  .areaTop{
    display: flex;
    align-items: center;
  }

  /* la línea ocupa el espacio y se va primero */
  .areaTop .areaLine{
    order: 1;
    flex: 1;
    min-width: 28px;
  }

  /* el badge queda al final */
  .areaTop .badge{
    order: 2;
    flex: 0 0 auto;
  }
}

/*------------------------------------*/
/*------------------------------------*/
/*------------------------------------*/
body{
  min-height: 100dvh;
  background-color: var(--nc-bg);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* evita que el contenido quede debajo de la zona inferior (iPhone home bar / toolbars) */
main{
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* reduce “bounce” que puede revelar zonas raras */
html, body{
  overscroll-behavior-y: none;
}

/* ===== Fix flicker en fixed + backdrop-filter ===== */
.topbar{
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
}


/*-----------------*/
.contactStatus{
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.4;
  padding: 10px 12px;
  border-radius: 12px;
  display: none;
}
.contactStatus.is-ok{
  display:block;
  background: rgba(16,185,129,.12);
  border: 1px solid rgba(16,185,129,.35);
}
.contactStatus.is-err{
  display:block;
  background: rgba(239,68,68,.10);
  border: 1px solid rgba(239,68,68,.35);
}
.contactForm.is-loading button[type="submit"]{
  opacity:.75;
  pointer-events:none;
}