/*
 * NTI Clarity — Gamma-inspired visual layer
 * Visual-only override. Existing copy, brand assets, routes and interactions remain intact.
 */

:root {
  --gamma-canvas: #e9eef4;
  --gamma-paper: #fbfcfd;
  --gamma-paper-warm: #f6f3ed;
  --gamma-ink: #0a1b2e;
  --gamma-line: rgba(10, 31, 51, 0.11);
  --gamma-blue: #1764d8;
  --gamma-teal: #0c9fa6;
  --gamma-gold: #c99543;
  --gamma-radius-xl: 32px;
  --gamma-radius-lg: 24px;
  --gamma-radius-md: 16px;
  --gamma-shadow: 0 28px 80px rgba(6, 25, 44, 0.10);
  --gamma-shadow-soft: 0 12px 36px rgba(6, 25, 44, 0.07);
}

html {
  background: var(--gamma-canvas);
}

body {
  color: var(--gamma-ink);
  background:
    radial-gradient(circle at 8% 2%, rgba(23, 100, 216, 0.10), transparent 24rem),
    radial-gradient(circle at 93% 14%, rgba(12, 159, 166, 0.08), transparent 27rem),
    var(--gamma-canvas);
  letter-spacing: -0.005em;
}

.container {
  width: min(1200px, calc(100% - 64px));
}

/* Floating document-style navigation */
.site-header {
  top: 14px;
  width: min(1400px, calc(100% - 32px));
  height: 72px;
  margin: 14px auto 28px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 12px 38px rgba(6, 25, 44, 0.08);
  backdrop-filter: blur(20px) saturate(145%);
  -webkit-backdrop-filter: blur(20px) saturate(145%);
}

.site-header .header-inner,
.site-header .head {
  padding-inline: 24px;
}

.brand img,
.brand-logo-master {
  filter: none;
}

.nav,
.menu {
  gap: 7px;
}

.nav a,
.menu a {
  padding: 8px 11px;
  border-radius: 999px;
  transition: color .2s ease, background .2s ease, transform .2s ease;
}

.nav a:hover,
.menu a:hover,
.nav a.active,
.menu a.active {
  color: var(--gamma-blue);
  background: rgba(23, 100, 216, 0.075);
}

.nav a.active::after,
.menu a.active::after {
  display: none;
}

.header-cta,
.head-cta {
  background: var(--gamma-gold);
  color: #111923;
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(201, 149, 67, 0.24);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.header-cta:hover,
.head-cta:hover {
  background: #ddb162;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(201, 149, 67, 0.30);
}

.page-mobile .product-entry-card .btn {
  background: var(--gamma-gold);
  color: #111923;
  box-shadow: 0 10px 24px rgba(201, 149, 67, 0.22);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.page-mobile .product-entry-card .btn:hover {
  background: #ddb162;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(201, 149, 67, 0.28);
}

/* Each section behaves like a presentation card */
main > section,
body > .hero,
body > .section,
body > .content,
body > .policy {
  position: relative;
  width: min(1400px, calc(100% - 32px));
  margin: 0 auto 18px;
  border: 1px solid rgba(255, 255, 255, 0.52);
  border-radius: var(--gamma-radius-xl);
  overflow: hidden;
  box-shadow: var(--gamma-shadow-soft);
  isolation: isolate;
}

main > section::after,
body > .hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 320px;
  height: 320px;
  right: -155px;
  top: -160px;
  border: 1px solid rgba(23, 100, 216, 0.10);
  border-radius: 50%;
  box-shadow: 0 0 0 54px rgba(23, 100, 216, 0.025), 0 0 0 108px rgba(12, 159, 166, 0.018);
  pointer-events: none;
}

.section {
  padding: 112px 0;
}

.hero {
  min-height: min(790px, calc(100svh - 132px));
  border-radius: 38px;
  background:
    radial-gradient(circle at 82% 22%, rgba(62, 126, 225, 0.28), transparent 29%),
    radial-gradient(circle at 67% 82%, rgba(28, 178, 181, 0.16), transparent 32%),
    linear-gradient(135deg, #061427 0%, #0a2038 57%, #0c2942 100%);
  box-shadow: 0 36px 90px rgba(5, 20, 36, 0.22);
}

.hero-grid {
  min-height: inherit;
  padding-block: 82px;
}

.hero h1,
.section-title,
.statement-big,
.form-title {
  text-wrap: balance;
}

.hero h1 {
  max-width: 820px;
  font-size: clamp(52px, 6.2vw, 86px);
  line-height: 1.02;
  letter-spacing: -0.055em;
}

.hero p,
.section-lead {
  max-width: 760px;
  line-height: 1.78;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 11px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: .16em;
  opacity: .92;
}

.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 15%, transparent);
}

.section-title {
  max-width: 920px;
  font-size: clamp(38px, 5vw, 68px);
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.btn,
.submit {
  min-height: 52px;
  border-radius: 999px;
  padding-inline: 25px;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.btn:hover,
.submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(5, 25, 44, 0.18);
}

/* Editorial metric strip */
.trust {
  background: linear-gradient(130deg, rgba(255,255,255,.94), rgba(246,248,250,.94));
}

.trust-grid,
.band-grid,
.strip-grid {
  gap: 14px;
  padding-block: 22px;
}

.trust-item,
.band-item,
.strip-item {
  border: 1px solid var(--gamma-line) !important;
  border-radius: var(--gamma-radius-lg);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78);
}

.trust-big,
.band-num,
.strip-kicker,
.metric-big {
  letter-spacing: -0.045em;
}

/* Reusable content cards */
.service-grid,
.case-grid,
.cards,
.pain-grid,
.promise-grid,
.role-grid,
.use-grid,
.direction-grid,
.cap-grid,
.method-grid,
.exp-grid,
.principle-grid,
.process-grid,
.route-grid,
.why-grid,
.values-grid,
.remain-grid,
.expertise-grid,
.scenario-grid {
  gap: 18px;
}

.service,
.case,
.card,
.pain,
.promise,
.role,
.use,
.cap,
.method,
.exp,
.principle,
.step,
.route,
.why-item,
.value-card,
.remain-card,
.skill,
.scenario,
.fit-item,
.pov-card,
.direct-card,
.expect,
.detail,
.case-card {
  border-radius: var(--gamma-radius-lg) !important;
  border-color: var(--gamma-line) !important;
  box-shadow: 0 14px 36px rgba(6, 25, 44, 0.055);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.service:hover,
.case:hover,
.card:hover,
.pain:hover,
.promise:hover,
.role:hover,
.use:hover,
.cap:hover,
.method:hover,
.exp:hover,
.principle:hover,
.route:hover,
.why-item:hover,
.value-card:hover,
.remain-card:hover,
.skill:hover,
.scenario:hover,
.fit-item:hover,
.detail:hover,
.case-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--gamma-shadow);
}

.service-visual,
.hero-visual,
.consult-visual,
.legacy-visual,
.network,
.browser-stage,
.phone-stage,
.diagram,
.award-card,
.archive-figure,
.award-figure {
  border-radius: var(--gamma-radius-lg) !important;
}

.callout,
.form-card,
.side-card,
.form-side,
.partner-box,
.cta-box,
.result-box,
.not-fit,
.boundary-note,
.matrix-note,
.transition-quote,
.notice,
.toc,
.policy {
  border-radius: var(--gamma-radius-lg) !important;
  border-color: var(--gamma-line) !important;
  box-shadow: var(--gamma-shadow-soft);
}

/* Alternating slide rhythm */
main > section:nth-of-type(3n + 2):not(.hero):not(.dark):not(.final):not(.pov):not(.heritage-proof) {
  background:
    linear-gradient(145deg, rgba(255,255,255,.96), rgba(242,246,250,.96));
}

main > section:nth-of-type(3n):not(.hero):not(.dark):not(.final):not(.pov):not(.heritage-proof) {
  background:
    radial-gradient(circle at 95% 10%, rgba(201,149,67,.09), transparent 30rem),
    var(--gamma-paper-warm);
}

.dark,
.pov,
.heritage-proof,
.final,
.cta {
  background:
    radial-gradient(circle at 88% 14%, rgba(39, 108, 211, 0.23), transparent 27rem),
    radial-gradient(circle at 62% 95%, rgba(12, 159, 166, 0.13), transparent 30rem),
    linear-gradient(135deg, #061427, #0a223b) !important;
}

.award-card,
.case,
.pov-word,
.panel {
  backdrop-filter: blur(10px);
}

/* Form controls remain functional, with presentation-style polish */
input,
select,
textarea {
  border-radius: 14px !important;
  border-color: rgba(10, 31, 51, 0.14) !important;
  background: rgba(255,255,255,.88) !important;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--gamma-blue) !important;
  box-shadow: 0 0 0 4px rgba(23, 100, 216, 0.10) !important;
  background: #fff !important;
}

/* Subtle entrance gives a deck-like scene transition without changing markup */
@media (prefers-reduced-motion: no-preference) {
  main > section,
  body > .hero,
  body > .content,
  body > .policy {
    animation: gamma-section-in .62s cubic-bezier(.2,.7,.2,1) both;
  }

  main > section:nth-of-type(2) { animation-delay: .05s; }
  main > section:nth-of-type(3) { animation-delay: .10s; }

  @keyframes gamma-section-in {
    from { opacity: 0; transform: translateY(18px) scale(.993); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
}

footer {
  width: min(1400px, calc(100% - 32px));
  margin: 0 auto 16px;
  border-radius: var(--gamma-radius-xl);
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 15%, rgba(23,100,216,.18), transparent 25rem),
    #041321;
}

@media (max-width: 1100px) {
  .nav,
  .menu {
    gap: 2px;
  }

  .nav a,
  .menu a {
    padding-inline: 8px;
  }
}

@media (max-width: 980px) {
  .site-header {
    top: 8px;
    width: calc(100% - 20px);
    margin: 8px auto 16px;
    border-radius: 17px;
  }

  .site-header .header-inner,
  .site-header .head {
    padding-inline: 15px;
  }

  header .nav.nti-mobile-nav-open,
  header .menu.nti-mobile-nav-open {
    margin-top: 8px;
    padding: 10px;
    border: 1px solid var(--gamma-line);
    border-radius: 16px;
    background: rgba(255,255,255,.96);
  }

  main > section,
  body > .hero,
  body > .section,
  body > .content,
  body > .policy,
  footer {
    width: calc(100% - 20px);
    border-radius: 25px;
  }

  .hero {
    min-height: auto;
  }

  .hero-grid {
    padding-block: 72px;
  }

  .section {
    padding: 88px 0;
  }
}

@media (max-width: 620px) {
  .container {
    width: min(100% - 36px, 1200px);
  }

  .site-header {
    width: calc(100% - 12px);
  }

  main > section,
  body > .hero,
  body > .section,
  body > .content,
  body > .policy,
  footer {
    width: calc(100% - 12px);
    margin-bottom: 9px;
    border-radius: 20px;
  }

  .hero-grid {
    padding-block: 58px;
  }

  .hero h1 {
    font-size: clamp(42px, 13vw, 58px);
  }

  .section {
    padding: 68px 0;
  }

  .section-title {
    font-size: clamp(34px, 10vw, 46px);
  }

  .trust-grid,
  .band-grid,
  .strip-grid {
    padding: 12px;
  }

  .btn,
  .submit {
    width: 100%;
  }
}