/* =========================================================
   NivAk Technologies — Website V2
   Global Layout System
   ========================================================= */


/* =========================================================
   Containers / Sections
   ========================================================= */

.container {
  width: min(
    calc(100% - (var(--container-padding) * 2)),
    var(--container-width)
  );
  margin-inline: auto;
}

.section {
  position: relative;
  padding-block: var(--section-space);
}

.section--small {
  padding-block: var(--section-space-small);
}

.section--soft {
  background: var(--bg-soft);
}

.section--dark {
  background: var(--bg-dark);
  color: var(--text-inverse);
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4,
.section--dark h5,
.section--dark h6 {
  color: var(--text-inverse);
}


/* =========================================================
   Site Header
   ========================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);

  width: 100%;

  border-bottom: 1px solid transparent;

  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  transition:
    background-color var(--transition-normal),
    border-color var(--transition-normal),
    box-shadow var(--transition-normal);
}

[data-theme="dark"] .site-header {
  background: rgba(2, 13, 33, 0.88);
}

.site-header.is-scrolled {
  border-bottom-color: var(--border-light);
  box-shadow: 0 8px 30px rgba(3, 19, 47, 0.06);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);

  min-height: 78px;
}


/* =========================================================
   Brand / Logo
   ========================================================= */

.site-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;

  min-width: max-content;
}

.site-brand__logo {
  width: 44px;
  height: 44px;

  object-fit: contain;
}

.site-brand__text {
  display: flex;
  flex-direction: column;

  line-height: 1;
}

.site-brand__name {
  color: var(--brand-navy-900);

  font-size: 1.05rem;
  font-weight: var(--font-weight-extrabold);
  letter-spacing: -0.02em;
}

[data-theme="dark"] .site-brand__name {
  color: #ffffff;
}

.site-brand__sub {
  margin-top: 5px;

  color: var(--text-muted);

  font-size: 0.63rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.11em;
  text-transform: uppercase;
}


/* =========================================================
   Desktop Navigation
   ========================================================= */

.site-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-link {
  position: relative;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 42px;
  padding: 0 13px;

  border-radius: var(--radius-pill);

  color: var(--text-secondary);

  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);

  transition:
    color var(--transition-fast),
    background-color var(--transition-fast);
}

.nav-link:hover {
  background: var(--bg-soft);
  color: var(--brand-blue);
}

.nav-link.is-active {
  background: rgba(23, 105, 210, 0.08);
  color: var(--brand-blue);
}


/* =========================================================
   Header Actions
   ========================================================= */

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

.theme-toggle,
.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 42px;
  height: 42px;

  border: 1px solid var(--border-light);
  border-radius: 50%;

  background: var(--bg-card);
  color: var(--text-primary);

  cursor: pointer;

  transition:
    transform var(--transition-fast),
    border-color var(--transition-fast),
    background-color var(--transition-fast);
}

.theme-toggle:hover,
.menu-toggle:hover {
  transform: translateY(-1px);
  border-color: var(--brand-blue);
}

.menu-toggle {
  display: none;
}


/* =========================================================
   Hero
   ========================================================= */

.hero {
  position: relative;

  display: flex;
  align-items: center;

  min-height: calc(100vh - 78px);
  padding-block: 88px;

  background: var(--gradient-hero);

  overflow: hidden;
}

.hero::before {
  position: absolute;
  top: 8%;
  right: -10%;

  width: 560px;
  height: 560px;

  border: 1px solid rgba(23, 105, 210, 0.10);
  border-radius: 50%;

  content: "";
  pointer-events: none;
}

.hero::after {
  position: absolute;
  right: 10%;
  bottom: -220px;

  width: 430px;
  height: 430px;

  border: 1px solid rgba(255, 98, 0, 0.11);
  border-radius: 50%;

  content: "";
  pointer-events: none;
}

.hero-grid {
  position: relative;
  z-index: 1;

  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(420px, 0.95fr);
  gap: clamp(48px, 7vw, 100px);
  align-items: center;
}

.hero-content {
  max-width: 720px;
}

.hero-title {
  max-width: 820px;
  margin-bottom: var(--space-6);

  color: var(--brand-navy-950);

  font-size: var(--text-hero);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: -0.055em;
  line-height: var(--line-tight);
}

[data-theme="dark"] .hero-title {
  color: #ffffff;
}

.hero-title__accent {
  color: var(--brand-orange);
}

.hero-description {
  max-width: 640px;
  margin-bottom: var(--space-8);

  color: var(--text-secondary);

  font-size: clamp(1.05rem, 2vw, 1.25rem);
  line-height: 1.7;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);

  margin-top: var(--space-10);
  padding-top: var(--space-6);

  border-top: 1px solid var(--border-light);
}

.hero-meta__item {
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.hero-meta__item strong {
  display: block;

  margin-bottom: 2px;

  color: var(--text-primary);
  font-size: var(--text-base);
}


/* =========================================================
   Hero Visual
   ========================================================= */

.hero-visual {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 520px;
}

.hero-visual__panel {
  position: relative;

  width: min(100%, 500px);
  aspect-ratio: 1 / 1;

  border: 1px solid var(--border-brand);
  border-radius: 36px;

  background:
    radial-gradient(
      circle at 30% 20%,
      rgba(59, 130, 246, 0.25),
      transparent 38%
    ),
    radial-gradient(
      circle at 75% 75%,
      rgba(255, 98, 0, 0.16),
      transparent 32%
    ),
    var(--gradient-brand);

  box-shadow: var(--shadow-lg);

  overflow: hidden;
}

.hero-visual__panel::before {
  position: absolute;
  inset: 9%;

  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 50%;

  content: "";
}

.hero-visual__panel::after {
  position: absolute;
  inset: 20%;

  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 50%;

  content: "";
}

.hero-visual__brand {
  position: absolute;
  inset: 0;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 18%;
}

.hero-visual__brand img {
  width: 100%;
  max-width: 300px;

  filter: drop-shadow(0 18px 35px rgba(0, 0, 0, 0.20));
}


/* =========================================================
   Shared Grids
   ========================================================= */

.grid {
  display: grid;
  gap: var(--space-6);
}

.grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}


/* =========================================================
   Split Layout
   ========================================================= */

.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(48px, 7vw, 96px);
  align-items: center;
}

.split__content {
  max-width: 600px;
}


/* =========================================================
   CTA
   ========================================================= */

.cta-panel {
  position: relative;

  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-10);
  align-items: center;

  padding: clamp(36px, 6vw, 64px);

  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-xl);

  background: var(--gradient-brand);
  box-shadow: var(--shadow-lg);

  overflow: hidden;
}

.cta-panel::after {
  position: absolute;
  top: -120px;
  right: -100px;

  width: 320px;
  height: 320px;

  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 50%;

  content: "";
}

.cta-panel__content {
  position: relative;
  z-index: 1;

  max-width: 720px;
}

.cta-panel__title {
  margin-bottom: var(--space-3);

  color: #ffffff;

  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: -0.035em;
}

.cta-panel__text {
  margin-bottom: 0;

  color: rgba(255, 255, 255, 0.75);
  font-size: var(--text-lg);
}

.cta-panel__actions {
  position: relative;
  z-index: 1;

  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}


/* =========================================================
   Footer
   ========================================================= */

.site-footer {
  background: var(--brand-navy-950);
  color: rgba(255, 255, 255, 0.70);
}

.footer-main {
  padding-block: 72px 52px;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1.6fr) repeat(3, minmax(150px, 1fr));
  gap: clamp(32px, 6vw, 72px);
}

.footer-brand {
  max-width: 350px;
}

.footer-brand .site-brand__name {
  color: #ffffff;
}

.footer-description {
  margin-top: var(--space-5);
  margin-bottom: 0;

  color: rgba(255, 255, 255, 0.60);
  font-size: var(--text-sm);
}

.footer-heading {
  margin-bottom: var(--space-5);

  color: #ffffff;

  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.footer-links {
  display: grid;
  gap: 12px;

  margin: 0;
  padding: 0;

  list-style: none;
}

.footer-link {
  color: rgba(255, 255, 255, 0.62);
  font-size: var(--text-sm);

  transition: color var(--transition-fast);
}

.footer-link:hover {
  color: var(--brand-orange);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);

  padding-block: 24px;

  border-top: 1px solid rgba(255, 255, 255, 0.09);

  font-size: var(--text-xs);
}

.footer-bottom p {
  margin: 0;
}

.footer-contact {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
}

.footer-contact a {
  transition: color var(--transition-fast);
}

.footer-contact a:hover {
  color: var(--brand-orange);
}


/* =========================================================
   Page Hero — Inner Pages
   ========================================================= */

.page-hero {
  position: relative;

  padding-block: 110px 84px;

  background: var(--gradient-hero);

  overflow: hidden;
}

.page-hero__content {
  position: relative;
  z-index: 1;

  max-width: 800px;
}

.page-hero__title {
  margin-bottom: var(--space-5);

  font-size: clamp(2.8rem, 6vw, 5rem);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: -0.05em;
  line-height: var(--line-tight);
}

.page-hero__description {
  max-width: 680px;
  margin-bottom: 0;

  color: var(--text-secondary);
  font-size: var(--text-xl);
}


/* =========================================================
   Utility Layout
   ========================================================= */

.stack {
  display: grid;
  gap: var(--space-6);
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.center {
  text-align: center;
}

.visually-hidden {
  position: absolute;

  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;

  overflow: hidden;
  clip: rect(0, 0, 0, 0);

  white-space: nowrap;

  border: 0;
}

/* =========================================================
   V2 Hero Proportion Refinement
   ========================================================= */

.hero {
  min-height: auto;
  padding-block: clamp(72px, 8vw, 118px);
}

.hero-grid {
  min-height: 560px;
}

.hero-visual {
  min-height: 460px;
}

.hero-visual__panel {
  width: min(100%, 440px);
}


/* =========================================================
   V2 Hero Brand Gradient
   ========================================================= */

.hero {
  background:
    radial-gradient(
      circle at 12% 28%,
      rgba(23, 105, 210, 0.14),
      transparent 34%
    ),
    radial-gradient(
      circle at 88% 38%,
      rgba(255, 98, 0, 0.12),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #f5f9ff 0%,
      #ffffff 48%,
      #fff7f1 100%
    );
}

.hero-title {
  background:
    linear-gradient(
      105deg,
      #061b46 0%,
      #0b3f88 32%,
      #1769d2 57%,
      #ff6200 82%,
      #ff7a18 100%
    );

  -webkit-background-clip: text;
  background-clip: text;

  -webkit-text-fill-color: transparent;
  color: transparent;
}

[data-theme="dark"] .hero {
  background:
    radial-gradient(
      circle at 12% 28%,
      rgba(23, 105, 210, 0.25),
      transparent 36%
    ),
    radial-gradient(
      circle at 88% 38%,
      rgba(255, 98, 0, 0.13),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #020d21 0%,
      #06152f 55%,
      #10101c 100%
    );
}

[data-theme="dark"] .hero-title {
  background:
    linear-gradient(
      105deg,
      #ffffff 0%,
      #d9e9ff 25%,
      #69a7ff 55%,
      #ff8a32 82%,
      #ff6200 100%
    );

  -webkit-background-clip: text;
  background-clip: text;

  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* =========================================================
   HOME V2 — Continuous Brand Atmosphere
   ========================================================= */

/*
 * ONE background belongs to main.
 * Normal homepage sections are transparent.
 * This prevents horizontal colour blocks.
 */

main {
  position: relative;

  background:
    radial-gradient(
      ellipse 85% 38% at -15% 12%,
      rgba(23, 105, 210, 0.18) 0%,
      rgba(23, 105, 210, 0.08) 42%,
      transparent 72%
    ),

    radial-gradient(
      ellipse 80% 36% at 115% 27%,
      rgba(255, 98, 0, 0.13) 0%,
      rgba(255, 98, 0, 0.055) 42%,
      transparent 72%
    ),

    radial-gradient(
      ellipse 90% 40% at -20% 58%,
      rgba(23, 105, 210, 0.13) 0%,
      rgba(23, 105, 210, 0.045) 45%,
      transparent 74%
    ),

    radial-gradient(
      ellipse 85% 38% at 115% 78%,
      rgba(255, 98, 0, 0.10) 0%,
      rgba(255, 98, 0, 0.035) 45%,
      transparent 74%
    ),

    linear-gradient(
      135deg,
      #f5f9ff 0%,
      #ffffff 32%,
      #f9fbff 55%,
      #fffaf6 78%,
      #ffffff 100%
    );

  background-attachment: scroll;
}


/*
 * IMPORTANT:
 * No individual light section receives its own background.
 */

main > section:not(.section--brand-dark) {
  background: transparent !important;
}


/* Remove visual separators between normal sections */

main > section:not(.section--brand-dark) {
  border-top: 0;
  border-bottom: 0;
}


/*
 * The dark brand section is intentionally the
 * only major visual interruption.
 */

main > .section--brand-dark {
  position: relative;

  margin-block: 28px;

  background:
    radial-gradient(
      ellipse 55% 120% at 0% 50%,
      rgba(23, 105, 210, 0.30),
      transparent 70%
    ),

    radial-gradient(
      ellipse 45% 100% at 100% 50%,
      rgba(255, 98, 0, 0.10),
      transparent 70%
    ),

    linear-gradient(
      110deg,
      #031735 0%,
      #062354 48%,
      #1c294c 100%
    ) !important;

  color: rgba(255, 255, 255, 0.76);

  overflow: hidden;
}


.section--brand-dark .eyebrow {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.07);
  color: #9ac6ff;
}


.section--brand-dark .section-title,
.section--brand-dark h2,
.section--brand-dark h3,
.section--brand-dark .feature-item__title {
  color: #ffffff;
}


.section--brand-dark .section-description,
.section--brand-dark .feature-item__text {
  color: rgba(255, 255, 255, 0.70);
}


.section--brand-dark .feature-item {
  padding: 20px;

  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-md);

  background: rgba(255, 255, 255, 0.05);
}


/* Cards sit above the continuous background */

main .card {
  border-color: rgba(6, 27, 70, 0.10);

  box-shadow:
    0 10px 28px rgba(6, 27, 70, 0.06);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}


/* Dark mode */

[data-theme="dark"] main {
  background:
    radial-gradient(
      ellipse 85% 38% at -15% 15%,
      rgba(23, 105, 210, 0.20),
      transparent 72%
    ),

    radial-gradient(
      ellipse 80% 38% at 115% 45%,
      rgba(255, 98, 0, 0.08),
      transparent 72%
    ),

    linear-gradient(
      135deg,
      #03132f 0%,
      #071a36 50%,
      #04152f 100%
    );
}


[data-theme="dark"] main > section:not(.section--brand-dark) {
  background: transparent !important;
}
/* =========================================================
   HOME V2 — Stronger Continuous Brand Gradient
   ========================================================= */

main {
  background:

    /* Blue wash — top left */
    radial-gradient(
      ellipse 100% 45% at -15% 8%,
      rgba(23, 105, 210, 0.44) 0%,
      rgba(23, 105, 210, 0.24) 34%,
      rgba(23, 105, 210, 0.09) 58%,
      transparent 78%
    ),

    /* Orange wash — upper right */
    radial-gradient(
      ellipse 92% 42% at 115% 22%,
      rgba(255, 98, 0, 0.32) 0%,
      rgba(255, 98, 0, 0.17) 35%,
      rgba(255, 98, 0, 0.06) 60%,
      transparent 80%
    ),

    /* Blue continuation — middle/lower left */
    radial-gradient(
      ellipse 105% 46% at -18% 58%,
      rgba(23, 105, 210, 0.34) 0%,
      rgba(23, 105, 210, 0.17) 38%,
      rgba(23, 105, 210, 0.055) 63%,
      transparent 82%
    ),

    /* Orange continuation — lower right */
    radial-gradient(
      ellipse 98% 44% at 118% 78%,
      rgba(255, 98, 0, 0.27) 0%,
      rgba(255, 98, 0, 0.13) 38%,
      rgba(255, 98, 0, 0.045) 64%,
      transparent 82%
    ),

    /* Gentle blue return near bottom */
    radial-gradient(
      ellipse 85% 34% at -10% 96%,
      rgba(23, 105, 210, 0.20),
      transparent 72%
    ),

    /* Coloured base instead of white */
    linear-gradient(
      135deg,
      #dcecff 0%,
      #edf5ff 20%,
      #f7f8fa 45%,
      #fff0e5 72%,
      #f4f7fb 100%
    );
}


/* =========================================================
   WHY NIVAK — Floating Premium Panel
   ========================================================= */

/* Section itself stays part of continuous page gradient */

main > .section--brand-dark {
  margin-block: 20px;

  background: transparent !important;

  color: var(--text-primary);

  overflow: visible;
}


/* Inner container becomes the premium panel */

main > .section--brand-dark > .container {
  position: relative;

  padding:
    clamp(42px, 5vw, 68px)
    clamp(32px, 5vw, 72px);

  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 28px;

  background:
    radial-gradient(
      circle at 8% 20%,
      rgba(23, 105, 210, 0.34),
      transparent 38%
    ),
    radial-gradient(
      circle at 92% 80%,
      rgba(255, 98, 0, 0.13),
      transparent 32%
    ),
    linear-gradient(
      125deg,
      #031a3e 0%,
      #06275b 52%,
      #17264a 100%
    );

  box-shadow:
    0 28px 70px rgba(3, 19, 47, 0.20),
    0 8px 22px rgba(3, 19, 47, 0.10);

  overflow: hidden;
}


/* Very subtle decorative glow */

main > .section--brand-dark > .container::before {
  content: "";

  position: absolute;

  width: 280px;
  height: 280px;

  top: -170px;
  right: -90px;

  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;

  pointer-events: none;
}


/* Text */

.section--brand-dark .eyebrow {
  border-color: rgba(105, 167, 255, 0.28);
  background: rgba(23, 105, 210, 0.13);
  color: #9dc8ff;
}


.section--brand-dark .section-title,
.section--brand-dark h2,
.section--brand-dark h3,
.section--brand-dark .feature-item__title {
  color: #ffffff;
}


.section--brand-dark .section-description,
.section--brand-dark .feature-item__text {
  color: rgba(255, 255, 255, 0.70);
}


/* Quality items */

.section--brand-dark .feature-item {
  border: 1px solid rgba(255, 255, 255, 0.11);

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.075),
      rgba(255, 255, 255, 0.035)
    );

  box-shadow: none;
}


/* Mobile */

@media (max-width: 640px) {

  main > .section--brand-dark > .container {
    padding: 32px 22px;
    border-radius: 22px;
  }

}


/* =========================================================
   NIVAK SIGNATURE PANELS — Blue → Orange
   ========================================================= */

/* Why NivAk */

main > .section--brand-dark > .container {
  background:
    radial-gradient(
      circle at 100% 20%,
      rgba(255, 122, 24, 0.48),
      transparent 38%
    ),
    radial-gradient(
      circle at 0% 80%,
      rgba(23, 105, 210, 0.42),
      transparent 42%
    ),
    linear-gradient(
      115deg,
      #075fc4 0%,
      #0a4fa7 24%,
      #082f70 52%,
      #18335e 70%,
      #a94718 100%
    );

  border-color: rgba(255, 255, 255, 0.18);

  box-shadow:
    0 28px 65px rgba(6, 27, 70, 0.20),
    0 10px 26px rgba(255, 98, 0, 0.08);
}


/* Bottom project CTA */

.cta {
  background:
    radial-gradient(
      circle at 100% 30%,
      rgba(255, 122, 24, 0.50),
      transparent 38%
    ),
    radial-gradient(
      circle at 0% 80%,
      rgba(23, 105, 210, 0.48),
      transparent 42%
    ),
    linear-gradient(
      115deg,
      #0869d5 0%,
      #0755b4 28%,
      #073477 55%,
      #25365c 72%,
      #b64b17 100%
    );

  border: 1px solid rgba(255, 255, 255, 0.17);

  box-shadow:
    0 24px 60px rgba(6, 27, 70, 0.18),
    0 8px 24px rgba(255, 98, 0, 0.08);
}


/* Keep CTA content readable */

.cta h2,
.cta h3,
.cta .section-title {
  color: #ffffff;
}

.cta p {
  color: rgba(255, 255, 255, 0.78);
}


/* =========================================================
   NIVAK SIGNATURE PANELS — Final Unified Design
   ========================================================= */

/*
 * Shared premium gradient:
 * Royal blue → deep navy → NivAk orange
 */

main > .section--brand-dark > .container,
.cta {
  border: 1px solid rgba(255, 255, 255, 0.18);

  background:
    radial-gradient(
      circle at 94% 25%,
      rgba(255, 98, 0, 0.38) 0%,
      rgba(255, 98, 0, 0.18) 24%,
      transparent 48%
    ),

    radial-gradient(
      circle at 4% 85%,
      rgba(36, 132, 255, 0.30) 0%,
      transparent 42%
    ),

    linear-gradient(
      112deg,
      #126bd0 0%,
      #0a55ad 24%,
      #073b83 47%,
      #102e62 66%,
      #733a2b 84%,
      #d85b18 100%
    );

  box-shadow:
    0 24px 55px rgba(6, 27, 70, 0.17),
    0 8px 22px rgba(255, 98, 0, 0.07);
}


/* Why NivAk — larger flagship panel */

main > .section--brand-dark > .container {
  border-radius: 26px;
}


/* Bottom CTA — same family, more compact */

.cta {
  border-radius: 24px;
}


/* Inner feature cards */

.section--brand-dark .feature-item {
  border: 1px solid rgba(255, 255, 255, 0.14);

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.105),
      rgba(255, 255, 255, 0.055)
    );

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
}


/* Improve feature icon contrast */

.section--brand-dark .feature-item__icon {
  border: 1px solid rgba(255, 122, 24, 0.24);

  background: rgba(255, 98, 0, 0.14);

  color: #ff8a32;
}


/* Keep text crisp */

.section--brand-dark .section-title,
.section--brand-dark h2,
.section--brand-dark h3,
.cta h2,
.cta h3 {
  color: #ffffff;
}

.section--brand-dark .section-description,
.section--brand-dark .feature-item__text,
.cta p {
  color: rgba(255, 255, 255, 0.80);
}


/* CTA primary button belongs to the orange end */

.cta .button--accent,
.cta .button--primary {
  box-shadow:
    0 8px 22px rgba(255, 98, 0, 0.24);
}


/* Decorative rings stay very subtle */

main > .section--brand-dark > .container::before {
  border-color: rgba(255, 255, 255, 0.09);
}


/* =========================================================
   NIVAK SIGNATURE PANELS — Correct Selectors
   ========================================================= */

/*
 * Shared signature:
 * blue → navy → orange
 */

main > .section--brand-dark > .container,
.cta-panel {
  border: 1px solid rgba(255, 255, 255, 0.18);

  background:
    radial-gradient(
      ellipse 55% 130% at 100% 50%,
      rgba(255, 98, 0, 0.62) 0%,
      rgba(255, 98, 0, 0.34) 34%,
      transparent 72%
    ),

    radial-gradient(
      ellipse 50% 120% at 0% 50%,
      rgba(25, 126, 240, 0.38) 0%,
      transparent 68%
    ),

    linear-gradient(
      105deg,
      #1476dd 0%,
      #0b5aba 24%,
      #073c82 48%,
      #172e59 68%,
      #854025 86%,
      #e45e16 100%
    );

  box-shadow:
    0 24px 60px rgba(6, 27, 70, 0.18),
    0 8px 22px rgba(255, 98, 0, 0.08);
}


/* Why NivAk */

main > .section--brand-dark > .container {
  border-radius: 26px;
}


/* Bottom project CTA */

.cta-panel {
  border-radius: 24px;
}


/* CTA typography */

.cta-panel__title {
  color: #ffffff;
}

.cta-panel__text {
  color: rgba(255, 255, 255, 0.82);
}


/*
 * Existing decorative CTA circle:
 * make it subtle instead of dominant.
 */

.cta-panel::after {
  border-color: rgba(255, 255, 255, 0.10);
}


/* Inner Why NivAk cards */

.section--brand-dark .feature-item {
  border: 1px solid rgba(255, 255, 255, 0.15);

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.11),
      rgba(255, 255, 255, 0.055)
    );

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}


/* =========================================================
   V2 — Remove Decorative Rings
   ========================================================= */

/* Hero / logo decorative circles */
.hero-visual::before,
.hero-visual::after,
.hero-visual__panel::before,
.hero-visual__panel::after {
  display: none !important;
  content: none !important;
}

/* Why NivAk decorative circle */
main > .section--brand-dark > .container::before,
main > .section--brand-dark > .container::after {
  display: none !important;
  content: none !important;
}

/* Bottom CTA decorative circle */
.cta-panel::before,
.cta-panel::after {
  display: none !important;
  content: none !important;
}


/* =========================================================
   V2 — Remove Remaining Hero Background Rings
   ========================================================= */

.hero::before,
.hero::after {
  display: none !important;
  content: none !important;
}



/* =========================================================
   NIVAK FEATURE PANELS — Navy with Orange Accent
   ========================================================= */

main > .section--brand-dark > .container,
.cta-panel {
  background:
    radial-gradient(
      ellipse 42% 120% at 105% 50%,
      rgba(255, 98, 0, 0.32) 0%,
      rgba(255, 98, 0, 0.12) 38%,
      transparent 70%
    ),

    radial-gradient(
      ellipse 55% 130% at -5% 30%,
      rgba(32, 128, 240, 0.28) 0%,
      transparent 68%
    ),

    linear-gradient(
      110deg,
      #0b67ca 0%,
      #0753aa 24%,
      #063d83 48%,
      #052d64 72%,
      #08244c 100%
    );

  border: 1px solid rgba(23, 105, 210, 0.26);

  box-shadow:
    0 22px 55px rgba(6, 27, 70, 0.18);
}


/* Keep orange as the accent */

.cta-panel .button--accent,
.cta-panel .button--primary {
  background: #ff6200;
}


/* Why NivAk internal cards */

.section--brand-dark .feature-item {
  background: rgba(255, 255, 255, 0.075);

  border: 1px solid rgba(255, 255, 255, 0.15);
}


/* =========================================================
   NIVAK FEATURE PANELS — Blue / Navy Only
   ========================================================= */

main > .section--brand-dark > .container,
.cta-panel {
  background:
    radial-gradient(
      ellipse 65% 140% at 0% 35%,
      rgba(37, 137, 255, 0.34) 0%,
      transparent 68%
    ),

    linear-gradient(
      110deg,
      #126ed1 0%,
      #0a59b5 26%,
      #07458f 50%,
      #06346f 73%,
      #052653 100%
    );

  border: 1px solid rgba(72, 151, 240, 0.30);

  box-shadow:
    0 22px 55px rgba(6, 27, 70, 0.18);
}


/* Why NivAk inner cards */

.section--brand-dark .feature-item {
  background: rgba(255, 255, 255, 0.075);

  border: 1px solid rgba(255, 255, 255, 0.15);
}



/* Apps & Games page spacing */

.apps-page .page-hero {
  padding-top: 72px;
  padding-bottom: 48px;
}

.apps-page .page-hero__content {
  max-width: 760px;
}

.apps-page .page-hero + .section {
  padding-top: 42px;
}

.apps-page .section-heading--split {
  margin-bottom: 24px;
}


/* =========================================================
   APPS PAGE — SECTION SPACING POLISH
   ========================================================= */

/* Product catalog -> Our Approach */
.apps-page .products-catalog-grid {
  margin-bottom: 0;
}

.apps-page .section:has(.products-catalog-grid) {
  padding-bottom: 54px;
}

/* Our Approach section */
.apps-page .section--brand-dark {
  padding-top: 0;
  padding-bottom: 54px;
}

/* Our Approach panel itself */
.apps-page .section--brand-dark > .container {
  margin-top: 0;
}

/* CTA section */
.apps-page .section--brand-dark + .section {
  padding-top: 0;
  padding-bottom: 54px;
}

/* Footer should follow CTA naturally */
.apps-page .cta-panel {
  margin-bottom: 0;
}


/* =========================================================
   HOME — VERTICAL RHYTHM
   Spacing only. Do not alter locked visual design.
   ========================================================= */

.home-page .hero {
  padding-bottom: 58px;
}

.home-page main > .section {
  padding-top: 58px;
  padding-bottom: 58px;
}

/* First section immediately after hero */
.home-page .hero + .section {
  padding-top: 42px;
}

/* Keep headings close to their content */
.home-page .section-heading {
  margin-bottom: 28px;
}

/* Dark quality panel */
.home-page main > .section--brand-dark {
  padding-top: 58px;
  padding-bottom: 58px;
}

/* Avoid extra space around CTA/panel containers */
.home-page .section--brand-dark > .container,
.home-page .cta-panel {
  margin-top: 0;
  margin-bottom: 0;
}

@media (max-width: 900px) {
  .home-page .hero {
    padding-bottom: 48px;
  }

  .home-page main > .section,
  .home-page main > .section--brand-dark {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .home-page .hero + .section {
    padding-top: 36px;
  }
}

@media (max-width: 640px) {
  .home-page .hero {
    padding-bottom: 40px;
  }

  .home-page main > .section,
  .home-page main > .section--brand-dark {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}


/* =========================================================
   SECONDARY PAGE HERO TITLE
   ========================================================= */

.page-hero h1 {
  margin-bottom: var(--space-5);

  font-size: clamp(3rem, 5vw, 4rem);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: -0.05em;
  line-height: var(--line-tight);

  background: linear-gradient(
    105deg,
    #061b46 0%,
    #0b3f88 25%,
    #1769d2 42%,
    #ff6200 72%,
    #ff7a18 100%
  );

  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

[data-theme="dark"] .page-hero h1 {
  background: linear-gradient(
    105deg,
    #ffffff 0%,
    #d9e9ff 25%,
    #69a7ff 55%,
    #ff8a32 82%,
    #ff6200 100%
  );

  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* =========================================================
   MOBILE MENU ICON
   ========================================================= */

.menu-icon {
  position: relative;
  display: block;

  width: 19px;
  height: 14px;

  border-top: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}

.menu-icon::before {
  content: "";

  position: absolute;
  left: 0;
  top: 5px;

  width: 19px;

  border-top: 2px solid currentColor;
}


/* =========================================================
   MOBILE FIXES — APPS & GAMES
   ========================================================= */

@media (max-width: 700px) {

  /* Force app portfolio into one clean column */
  .apps-grid,
  .products-grid,
  .app-grid {
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }

  .app-card,
  .product-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    overflow: hidden;
  }

  .app-card__header,
  .app-card-header,
  .product-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 12px;

    width: 100%;
  }

  .app-card h2,
  .app-card h3,
  .product-card h2,
  .product-card h3 {
    word-break: normal !important;
    overflow-wrap: normal !important;
    white-space: normal;

    line-height: 1.25;
  }

  .app-card p,
  .product-card p {
    word-break: normal !important;
    overflow-wrap: break-word;

    line-height: 1.6;
  }

  .app-card img,
  .product-card img {
    flex-shrink: 0;
  }
}


/* =========================================================
   DARK MODE — APPS CAPSULE / BADGE CONTRAST
   ========================================================= */

html[data-theme="dark"] .status-badge,
html[data-theme="dark"] .pill,
html[data-theme="dark"] .badge,
html[data-theme="dark"] .stat-pill,
html[data-theme="dark"] .product-status {
  background: #11284d;
  border-color: rgba(91, 150, 240, 0.42);
  color: #f4f8ff;
}

html[data-theme="dark"] .status-badge strong,
html[data-theme="dark"] .pill strong,
html[data-theme="dark"] .badge strong,
html[data-theme="dark"] .stat-pill strong {
  color: #ffffff;
}

html[data-theme="dark"] .status-badge span,
html[data-theme="dark"] .pill span,
html[data-theme="dark"] .badge span,
html[data-theme="dark"] .stat-pill span {
  color: #c8d6ed;
}


/* Production */
html[data-theme="dark"] .status-production,
html[data-theme="dark"] .status-badge--production {
  background: rgba(34, 197, 94, 0.17);
  border-color: rgba(34, 197, 94, 0.35);
  color: #74e59a;
}


/* Development */
html[data-theme="dark"] .status-development,
html[data-theme="dark"] .status-badge--development {
  background: rgba(75, 142, 240, 0.18);
  border-color: rgba(75, 142, 240, 0.38);
  color: #9bc3ff;
}


/* Coming / Nearly Complete */
html[data-theme="dark"] .status-coming,
html[data-theme="dark"] .status-badge--coming {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.17);
  color: #e4ebf7;
}


/* =========================================================
   APPS & GAMES — FINAL MOBILE FIX
   ========================================================= */

@media (max-width: 640px) {

  .apps-page .products-catalog-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px;
    width: 100%;
  }

  .apps-page .products-catalog-grid > * {
    grid-column: auto !important;
    width: 100%;
    min-width: 0;
  }

  .apps-page .catalog-product-card {
    width: 100%;
    min-width: 0;
    min-height: 0;
    padding: 20px;
  }

  .apps-page .catalog-product-card__top {
    width: 100%;
    gap: 12px;
  }

  .apps-page .catalog-product-card__icon {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    border-radius: 16px;
  }

  .apps-page .catalog-product-card__content {
    min-width: 0;
  }

  .apps-page .catalog-product-card__content h3 {
    font-size: 1.18rem;
    line-height: 1.3;

    word-break: normal;
    overflow-wrap: break-word;
  }

  .apps-page .catalog-product-card__content p {
    font-size: .9rem;
    line-height: 1.6;

    word-break: normal;
    overflow-wrap: break-word;
  }

  .apps-page .catalog-product-card .badge {
    flex: 0 0 auto;
    max-width: 52%;

    white-space: normal;
    text-align: center;
    line-height: 1.2;
  }

  .apps-hero-stats {
    gap: 8px;
  }

  .apps-hero-stats span {
    min-height: 36px;
    padding: 7px 12px;

    font-size: .78rem;
  }
}


/* =========================================================
   APPS & GAMES — DARK MODE CONTRAST
   ========================================================= */

[data-theme="dark"] .apps-hero-stats span {
  background: #10284f;
  border-color: rgba(105, 167, 255, .40);
  color: #dce8fa;

  box-shadow:
    0 6px 16px rgba(0, 0, 0, .16);
}

[data-theme="dark"] .apps-hero-stats strong {
  color: #ffffff;
}


/* Production */
[data-theme="dark"] .apps-page .badge--production {
  background: rgba(54, 190, 110, .16);
  border-color: rgba(84, 220, 139, .36);
  color: #7ce2a4;
}


/* In Development */
[data-theme="dark"] .apps-page .badge--development {
  background: rgba(255, 122, 36, .15);
  border-color: rgba(255, 145, 70, .36);
  color: #ffad75;
}


/* Nearly Complete */
[data-theme="dark"] .apps-page .badge--nearly {
  background: rgba(255, 173, 51, .15);
  border-color: rgba(255, 193, 92, .38);
  color: #ffd084;
}


/* Unreleased availability capsule */
[data-theme="dark"] .apps-page .catalog-product-card__availability {
  background: #10284f;
  border-color: rgba(105, 167, 255, .34);
  color: #a8ccff;
}