/* ===== NewKeys UI/UX Upgrade Pack (non-destructive) =====
   This file only layers on visual polish—no layout-breaking changes.
   It loads AFTER existing CSS to avoid regressions.
*/

/* Color system tuned for contrast and warmth while staying on-brand */
:root{
  --nk-bg:#0B1220;              /* deep navy */
  --nk-bg-soft:#0F1731;         /* cards on dark */
  --nk-surface:#ffffff;         /* surfaces on light */
  --nk-ink:#0A1022;             /* primary text dark */
  --nk-ink-soft:#334155;        /* secondary text */
  --nk-accent:#4F46E5;          /* indigo 600 base */
  --nk-accent-2:#7C3AED;        /* violet accent */
  --nk-accent-3:#FF6B4A;        /* coral accent */
  --nk-ring: 0 0 0 3px rgba(79,70,229,.35);
}

/* Global typography polish */
html { scroll-behavior: smooth; }
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  letter-spacing: .01em;
}
.font-head { letter-spacing: -.01em; }

/* Smart underline for links inside copy */
.prose a, .richtext a, p a {
  text-decoration-thickness: from-font;
  text-underline-offset: 2px;
  text-decoration-skip-ink: auto;
}

/* Accessible focus styles */
:where(a,button,[role="button"],input,select,textarea):focus-visible{
  outline: none;
  box-shadow: var(--nk-ring);
}

/* Cards: subtle depth + smoother hover */
.card, .nk-card, .feature, .pricing-tier {
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.0));
  border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: saturate(120%);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  will-change: transform;
}
@media (prefers-reduced-motion: no-preference){
  .card:hover, .nk-card:hover, .feature:hover, .pricing-tier:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0,0,0,.15);
    border-color: rgba(255,255,255,.18);
  }
}

/* Buttons: crisper, with subtle gradient + active state */
.btn, .button, .nk-btn, .bg-indigo-600, .bg-violet-600 {
  background-image: linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.04));
}
.btn:active, .button:active, .nk-btn:active, .bg-indigo-600:active, .bg-violet-600:active {
  transform: translateY(1px);
}

/* Sticky header glassiness refinement (kept safe) */ glassiness refinement (already sticky) */
header.sticky {
  border-bottom: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 1px 0 rgba(255,255,255,.03) inset;
}

/* Images: soft corners by default (respect existing) */
img {
  border-radius: 14px;
}

/* Better text contrast on dark tinted text utilities */
.text-white\/70 { color: rgba(255,255,255,.82) !important; }
.text-white\/80 { color: rgba(255,255,255,.9) !important; }

/* Anchors/Hash scrolling offsets for sticky header */
:target { scroll-margin-top: 84px; }

/* Form controls */
input, select, textarea {
  border-radius: 12px !important;
  border: 1px solid rgba(148,163,184,.35);
  padding: .75rem .9rem !important;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--nk-accent);
  box-shadow: 0 0 0 3px rgba(79,70,229,.2);
}

/* Footers: tone down brightness on dark backgrounds for readability */
footer a { opacity: .9; }
footer a:hover { opacity: 1; }

/* Ensure icon SVGs align cleanly with text */
svg { shape-rendering: geometricPrecision; }

/* --- Micro animations: fade and slide up when entering viewport --- */
@media (prefers-reduced-motion: no-preference) {
  .nk-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  }
  .nk-reveal.animate {
    opacity: 1;
    transform: none;
  }
}

/* Industry cards: increase contrast for headings and descriptions on dark backgrounds */
.industries-grid h3 {
  color: var(--nk-text) !important;
}
.industries-grid p {
  color: var(--nk-muted) !important;
}


/* Contrast fixes: ensure readability in mixed-background sections */
#roi .card,
#roi .bg-white\/5,
#roi .bg-white\/10 {
  background-color: rgba(12,19,48,.60) !important;  /* subtle dark glass */
  border-color: rgba(255,255,255,.12) !important;
}

#roi .text-white\/70,
#roi .text-white\/75,
#roi .text-white\/60,
#roi .text-white\/50 { color: rgba(255,255,255,.86) !important; }

#roi .font-extrabold { color: #fff !important; }

/* Quote form: inputs remain glassy but text stays legible */
#quote .bg-white\/10,
#quote .bg-white\/5 {
  background-color: rgba(255,255,255,.12) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.22) !important;
}
#quote input::placeholder,
#quote textarea::placeholder { color: rgba(255,255,255,.75) !important; }

/* Packages badge on light chip stays dark for legibility */
#packages .bg-white\/90 { color: var(--nk-ink, #0B141D) !important; }


/* Button text contrast fixes */
.btn.btn-primary, .btn-primary {
  color: #fff !important;
}
.btn.btn-outline, .btn-outline {
  color: #fff !important;
  border-color: rgba(255,255,255,.9) !important;
}
header .btn.btn-primary span,
header .btn-primary span { color: #fff !important; }

/* Kill any accidental inline dark text utility on CTAs when on dark bg */
a.btn.text-\[\#0b141d\] { color: #fff !important; }
#packages a.btn.text-\[\#0b141d\] { color: #fff !important; }
#quote a.btn.text-\[\#0b141d\] { color: #fff !important; }

/* Optional: slightly stronger hover for clarity */
.btn.btn-primary:hover, .btn-primary:hover {
  filter: brightness(1.05);
}
.btn.btn-outline:hover, .btn-outline:hover {
  background: rgba(255,255,255,.08);
}


/* === Requested tweak: smaller postcard toggle buttons === */
#tabFront, #tabBack {
  font-size: 0.72rem !important;      /* down from ~0.875rem */
  padding: 0.4rem 0.9rem !important;   /* tighter pill */
  border-radius: 9999px !important;
}

/* === ROI heading/intro contrast (visible on light surface) === */
#roi .grid > div:first-child > h2,
#roi .grid > div:first-child > p {
  color: #0B141D !important;          /* deep ink for readability */
  text-shadow: none !important;
}


/* ===== NK How-It-Works Flow (scoped) ===== */
#how .nk-how-rail{
  grid-template-columns: repeat(3, minmax(0,1fr));
  align-items: center;
  column-gap: 2rem;
  position: relative;
}
#how .nk-how-rail::before{
  content:"";
  position:absolute;
  top: 50%;
  left: 8.333%;
  right: 8.333%;
  height: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.3), rgba(255,255,255,.08));
  transform: translateY(-50%);
}
#how .nk-how-node{
  width: 56px; height: 56px;
  margin-inline: auto;
  border-radius: 9999px;
  display:flex; align-items:center; justify-content:center;
  font-weight: 800; font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: #fff;
  background: radial-gradient(100% 100% at 50% 0%, rgba(255,255,255,.20), rgba(255,255,255,.05)) , linear-gradient(180deg, rgba(124,58,237,.85), rgba(79,70,229,.85));
  box-shadow: 0 10px 30px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.18);
}
#how .nk-how-node span{ position:relative; z-index:1; }

#how .nk-how-grid .nk-how-card{
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  backdrop-filter: blur(6px) saturate(120%);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
@media (prefers-reduced-motion:no-preference){
  #how .nk-how-grid .nk-how-card:hover{
    transform: translateY(-3px);
    box-shadow: 0 14px 36px rgba(0,0,0,.22);
    border-color: rgba(255,255,255,.20);
  }
}

/* Tighten copy for better read rhythm */
#how .nk-how-card p{ line-height:1.55; }
#how h2 + .nk-how-rail { margin-top: 1.25rem; }
#how .nk-how-rail + .nk-how-grid { margin-top: 1.5rem; }

/* Ensure CTA button stays visible on dark background */
#how a.btn.btn-primary, #how a.btn-primary{ color:#fff !important; }


/* === How section refinements === */
@media (min-width: 768px){
  #how{ margin-top: -2.5rem; }   /* pull up closer to prior section without touching others */
}
#how .nk-how-rail::before{ height: 1.5px; }
#how .nk-how-node{ width: 48px; height: 48px; }
#how .nk-how-card{ padding: 1.0rem !important; } /* safeguard if utilities change */
#how h2{ margin-bottom: .25rem; }
#how .mt-8{ margin-top: 1.25rem !important; } /* tighten heading→rail gap */
#how .nk-how-rail + .nk-how-grid { margin-top: 1rem; }
#how .nk-how-card p{ margin-top: .5rem; }


/* === How section spacing fixes === */
@media (min-width: 768px){
  #how{ margin-top: -6rem; margin-bottom: -1.5rem; } /* pull up & close bottom gap */
}
#how .nk-how-rail{
  grid-template-columns: repeat(3, minmax(0,1fr));
  column-gap: 2rem;
  align-items:center;
  position:relative;
}
#how .nk-how-rail::before{
  content:"";
  position:absolute; top:50%; left: 8.333%; right: 8.333%;
  height: 1.5px;
  background: linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.3), rgba(255,255,255,.08));
  transform: translateY(-50%);
}
#how .nk-how-node{
  width: 44px; height: 44px;
  margin-inline:auto;
  border-radius: 9999px;
  display:flex; align-items:center; justify-content:center;
  font-weight: 800;
  color:#fff;
  background: linear-gradient(180deg, rgba(124,58,237,.9), rgba(79,70,229,.9));
  box-shadow: 0 10px 30px rgba(0,0,0,.22), inset 0 0 0 1px rgba(255,255,255,.18);
}
#how .nk-how-grid .nk-how-card{
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  backdrop-filter: blur(6px) saturate(120%);
}
#how .nk-how-card p{ line-height: 1.55; }
#how .nk-how-rail + .nk-how-grid{ margin-top: 1rem; }
#how a.btn.btn-primary, #how a.btn-primary{ color:#fff !important; }


/* === How section: remove extra air below and above === */
#how{ margin-bottom: -0.5rem; }              /* slight global tighten */
@media (min-width: 768px){
  #how{ margin-top: -6.5rem; margin-bottom: -3.25rem; } /* pull up & close gap near white section */
}


/* === Front/Back toggle sizing & spacing === */
#tabFront, #tabBack{
  font-size: 0.66rem !important;
  padding: 0.3rem 0.75rem !important;
  border-radius: 9999px !important;
  letter-spacing: .02em !important; /* slightly less wide */
}


/* === Spacing tune: How It Works position === */
#how{ margin-bottom: 0 !important; } /* reset global tighten */
@media (min-width: 768px){
  #how{ margin-top: -5rem !important; margin-bottom: -1.25rem !important; }
}


/* === HOW: nudge down and add more blue beneath === */
@media (min-width: 768px){
  #how{ margin-top: -3.75rem !important; margin-bottom: -0.5rem !important; }
}

/* === ROI: overall smaller + comfortable spacing === */
#roi{ padding-top: 2.25rem !important; padding-bottom: 2.5rem !important; }
#roi .grid{ row-gap: 1.25rem !important; column-gap: 1.25rem !important; }


/* === Section font refinements (HOW + ROI) === */
/* Use Inter everywhere in these sections for consistent look */
#how, #how *,
#roi, #roi *{
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji" !important;
}

/* Headings: tighter tracking to match brand tone */
#how h2, #how h3,
#roi h2, #roi h3{
  letter-spacing: -0.01em !important;
}

/* Numbers: align cleanly */
#roi #roi-cost, #roi #roi-roi,
#roi input, #roi .kpi, #roi .text-3xl, #roi .text-4xl{
  font-variant-numeric: tabular-nums;
}

/* Inputs inherit font (for consistency) */
#roi input, #roi select, #roi textarea, #how input, #how select, #how textarea{
  font-family: inherit !important;
}

/* Slightly firmer paragraph weight on light surface for readability */
#roi p{ font-weight: 500; }








/* === ROI Clean Dark v3 (no gradients, unified tone) === */
#roi .roi-wrap{
  background: #0F1731 !important;                 /* match site dark card */
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 24px rgba(2,6,23,.25) !important;
}
/* neutralize any residual backgrounds */
#roi .bg-white\/5, #roi .bg-white\/10{ background: transparent !important; }
#roi .border-white\/10, #roi .border-white\/15, #roi .border-white\/20{
  border-color: rgba(255,255,255,.10) !important;
}

/* Cards inside ROI (including KPI tiles) */
#roi .card{
  background: rgba(255,255,255,.035) !important;   /* flat, no gradient */
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

/* Typography */
#roi, #roi *{ font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji" !important; }
#roi h2{ color: rgba(255,255,255,.96) !important; font-weight: 700 !important; letter-spacing: -0.01em !important; line-height: 1.15 !important; }
#roi p, #roi label, #roi .text-sm, #roi .text-xs{ color: rgba(255,255,255,.78) !important; font-weight: 400 !important; }
#roi .hint, #roi .muted, #roi .text-white\/50{ color: rgba(255,255,255,.58) !important; font-weight: 400 !important; }

/* KPI values */
#roi .text-4xl, #roi .text-3xl, #roi #roi-cost, #roi #roi-roi{
  color: rgba(255,255,255,.98) !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
}

/* Inputs */
#roi input[type="number"]{
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  height: 42px !important; padding: 0 .75rem !important; border-radius: 10px !important;
}
#roi input::placeholder{ color: rgba(255,255,255,.45) !important; }

/* Sliders: single site accent (indigo) */
#roi input[type="range"]{ accent-color: var(--nk-accent) !important; }

/* CTA: site accent */
#roi a.btn, #roi a.btn-primary{
  background: var(--nk-accent) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 8px 20px rgba(79,70,229,.25) !important;
}

/* Compact sizing */
#roi{ padding-top: 1.1rem !important; padding-bottom: 1.4rem !important; }
#roi .grid{ row-gap: .7rem !important; column-gap: .7rem !important; }
#roi .card{ padding: .7rem !important; }
#roi h2{ font-size: 1.35rem !important; }
@media (min-width: 768px){ #roi h2{ font-size: 1.5rem !important; } }
#roi .mt-7{ margin-top: .9rem !important; }
#roi .mt-5{ margin-top: .7rem !important; }


/* === ROI Prime Redesign === */
#roi .roi-wrap{
  background: #0F1731; /* deep navy to match site */
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
}

#roi .nk-h2{ color:#fff; font-weight:700; letter-spacing:-.01em; line-height:1.15; font-size:1.35rem; }
@media (min-width:768px){ #roi .nk-h2{ font-size:1.5rem; } }
#roi .nk-sub, #roi .nk-sub2{ color:rgba(255,255,255,.78); font-weight:400; }
#roi .nk-sub2{ margin-top:.25rem; }

#roi .roi-card{
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  padding: .9rem;
}
#roi .label{ color:#fff; font-size:.9rem; font-weight:500; }
#roi .hint{ color:rgba(255,255,255,.58); font-size:.8rem; }

#roi .roi-input{
  height: 42px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  color: #fff;
  padding: 0 .75rem;
}
#roi .roi-input::placeholder{ color: rgba(255,255,255,.45); }

#roi .roi-range{ accent-color: var(--nk-accent); }

#roi .roi-tile, #roi .roi-panel{
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  padding: .9rem;
}
#roi .tile-label{ color:rgba(255,255,255,.78); font-size:.9rem; font-weight:500; }
#roi .tile-value{ color:#fff; font-size:1.35rem; font-weight:700; line-height:1.7rem; font-variant-numeric: tabular-nums; }
#roi .tile-value.xl{ font-size:1.6rem; line-height:1.9rem; }

#roi a.btn, #roi a.btn-primary{
  background: var(--nk-accent);
  color:#fff;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 8px 20px rgba(79,70,229,.25);
}

#roi{ padding-top: 1.1rem; padding-bottom: 1.4rem; }
#roi .grid{ row-gap:.75rem; column-gap:.75rem; }


/* === ROI Section refinements — v6 (scoped, non-destructive) === */
/* Tighter overall footprint */
#roi{ padding-top: 1.1rem !important; padding-bottom: 1.3rem !important; }

/* Clear, legible heading + subheads */
#roi .nk-h2{ color:#fff !important; font-weight:800; }
#roi .nk-sub{ color: rgba(255,255,255,.86) !important; }
#roi .nk-sub2{ color: rgba(255,255,255,.78) !important; }

/* Outer container breathing room + clearer border */
#roi .roi-wrap{
  padding: 1rem !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 18px !important;
}
@media (min-width:640px){
  #roi .roi-wrap{ padding: 1.25rem !important; }
}
@media (min-width:1024px){
  #roi .roi-wrap{ padding: 1.5rem !important; }
}

/* Give inner cards a little more air without changing layout */
#roi .roi-card, #roi .roi-tile, #roi .roi-panel{ padding: 1rem !important; }

/* Ensure all text inside cards stays light on dark */
#roi .label, #roi .tile-label{ color: rgba(255,255,255,.88) !important; }
#roi .tile-value, #roi .tile-value.xl{ color:#fff !important; }

/* Button sizing normalization in this block only */
#roi a.btn, #roi a.btn-primary{
  min-height: 44px;
  border-radius: 10px;
}


/* === ROI text visibility harden — v7 === */
#roi h2.nk-h2, #roi .nk-h2{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  opacity:1 !important;
}
#roi p.nk-sub, #roi .nk-sub{
  color:rgba(255,255,255,.92) !important;
  -webkit-text-fill-color:rgba(255,255,255,.92) !important;
  opacity:1 !important;
}
#roi p.nk-sub2, #roi .nk-sub2{
  color:rgba(255,255,255,.85) !important;
  -webkit-text-fill-color:rgba(255,255,255,.85) !important;
  opacity:1 !important;
}


/* === ROI compact + spacing pass — v8 === */
/* More separation from surrounding sections */
#roi{
  margin-top: 2.25rem !important;    /* add space above */
  margin-bottom: 2.75rem !important; /* add space below */
  padding-top: 0.75rem !important;   /* shrink internal padding */
  padding-bottom: 0.9rem !important;
}

/* Slightly smaller heading on md+ to keep section compact */
@media (min-width:768px){
  #roi .nk-h2{ font-size: 1.4rem !important; }
}

/* Tighter cards/tiles and inputs */
#roi .roi-card, #roi .roi-tile, #roi .roi-panel{ padding: .85rem !important; }
#roi .roi-input{ height: 38px !important; }
#roi .tile-value{ font-size: 1.2rem !important; line-height: 1.5rem !important; }
#roi .tile-value.xl{ font-size: 1.4rem !important; line-height: 1.7rem !important; }

/* Reduce gutter inside the ROI two-column grid a touch */
#roi .grid{ row-gap: .6rem !important; column-gap: .8rem !important; }


/* === ROI compact + color polish — v9 === */

/* Shrink overall footprint further */
#roi{
  margin-top: 2.4rem !important;
  margin-bottom: 2.6rem !important;
  padding-top: 0.5rem !important;
  padding-bottom: 0.7rem !important;
}
/* Make the section narrower than site max for a lighter feel */
#roi .max-w-6xl{ max-width: 62rem !important; } /* was 72rem */

/* Softer gradient card to avoid flat 3‑color look */
#roi .roi-wrap{
  background:
    radial-gradient(700px 60% at 10% -10%, rgba(79,70,229,.18), transparent 60%),
    radial-gradient(600px 50% at 92% 10%, rgba(124,58,237,.14), transparent 60%),
    linear-gradient(180deg, rgba(16,23,49,.92), rgba(13,20,44,.88)) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 18px !important;
  padding: 1rem !important;
}
@media(min-width:1024px){
  #roi .roi-wrap{ padding: 1.25rem !important; }
}

/* Alternate KPI tile backgrounds subtly for visual rhythm */
#roi .roi-tile:nth-child(odd){ background: rgba(255,255,255,.045) !important; }
#roi .roi-tile:nth-child(even){ background: rgba(255,255,255,.03) !important; }

/* Typography + control scale down */
#roi .nk-h2{ font-size: 1.25rem !important; line-height: 1.2 !important; }
@media(min-width:768px){
  #roi .nk-h2{ font-size: 1.35rem !important; }
}
#roi .nk-sub{ font-size: .98rem !important; }
#roi .nk-sub2{ font-size: .95rem !important; }

#roi .roi-card, #roi .roi-tile, #roi .roi-panel{ padding: .75rem .8rem !important; }
#roi .roi-input{ height: 36px !important; }
#roi .tile-value{ font-size: 1.1rem !important; line-height: 1.4rem !important; }
#roi .tile-value.xl{ font-size: 1.28rem !important; line-height: 1.6rem !important; }
#roi a.btn, #roi a.btn-primary{ min-height: 40px !important; }

/* Slightly tighter gutters */
#roi .grid{ row-gap: .55rem !important; column-gap: .7rem !important; }


/* === ROI KPI spacing tune — v10 === */
#roi .grid{ row-gap: 1.05rem !important; column-gap: .9rem !important; }
#roi .roi-tile{ padding: 1rem 1.1rem !important; }
#roi .roi-panel{ padding: 1rem 1.1rem !important; }
/* Slight label/value separation */
#roi .tile-label{ margin-bottom: .2rem !important; }
/* Prevent tiles from visually touching parent border */
#roi .roi-wrap{ padding: 1.1rem !important; }


/* === ROI KPI edge breathing + rounded corners — v11 === */
#roi .roi-wrap{
  padding: 1.35rem !important;
}
@media(min-width:1024px){
  #roi .roi-wrap{ padding: 1.6rem !important; }
}
#roi .roi-tile{
  padding: 1.15rem 1.3rem !important;   /* more space from edges */
  border-radius: 14px !important;       /* emphasize rounded corners */
  overflow: hidden !important;          /* ensure radius clips any inner effects */
  box-shadow: none !important;          /* remove any inset divider lines */
}
#roi .tile-label{ margin-bottom: .35rem !important; }



/* === Light Header + Light Hero Overrides (safe, non-destructive) === */

/* Sticky header: switch to light glass, darker text, subtle divider */
header.sticky.top-0 {
  background: rgba(255,255,255,.92) !important;
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid rgba(2, 6, 23, .06);
  color: var(--nk-ink) !important;
}
header.sticky.top-0 a,
header.sticky.top-0 nav a {
  color: #0b1220 !important;
}
header.sticky.top-0 nav a:hover {
  background: rgba(2, 6, 23, .04) !important;
}
header.sticky.top-0 .btn.btn-primary {
  background: #0b1220 !important;
  color: #fff !important;
  border-color: #0b1220 !important;
}
header.sticky.top-0 .btn.btn-outline {
  border-color: rgba(2,6,23,.25) !important;
  color: #0b1220 !important;
}
header.sticky.top-0 img {
  box-shadow: none !important;
  ring: 0 !important;
}

/* First section (hero) to a light surface with dark text */
section.hero-glow {
  background: linear-gradient(180deg, #ffffff 0%, #f7fafc 60%, #ffffff 100%) !important;
  position: relative;
}
section.hero-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(600px 200px at 20% 10%, rgba(79,70,229,.07), transparent 60%),
    radial-gradient(800px 240px at 90% -10%, rgba(124,58,237,.06), transparent 60%);
}
section.hero-glow h1,
section.hero-glow h2,
section.hero-glow p,
section.hero-glow .badge,
section.hero-glow .stat,
section.hero-glow .subtext,
section.hero-glow .kicker,
section.hero-glow .lead {
  color: var(--nk-ink) !important;
}

/* Ensure "white" utility text in hero becomes dark for readability */
section.hero-glow .text-white,
section.hero-glow .text-white\/80,
section.hero-glow .text-white\/70 {
  color: var(--nk-ink) !important;
  opacity: 0.92 !important;
}

/* Badges soften on light */
section.hero-glow .badge {
  background: rgba(15, 23, 42, .06) !important;
  border: 1px solid rgba(2,6,23,.08) !important;
}

/* Buttons remain high-contrast on light hero */
section.hero-glow .btn.btn-primary {
  background: #0b1220 !important;
  border-color: #0b1220 !important;
  color: #fff !important;
}
section.hero-glow .btn.btn-outline {
  border-color: rgba(2,6,23,.25) !important;
  color: #0b1220 !important;
}

/* Font improvements for clarity on light */
html, body {
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji" !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3 {
  letter-spacing: -0.01em;
}
p, li {
  line-height: 1.6;
}

/* Mobile spacing polish for hero */
@media (max-width: 768px) {
  section.hero-glow .max-w-7xl { padding-top: 3.5rem !important; }
}




/* === How It Works — light harmonization (scoped to #how) === */
section#how.how-light {
  background: linear-gradient(180deg, #fff 0%, #f8fafc 60%, #fff 100%) !important;
}

section#how.how-light h2 {
  color: var(--nk-ink);
  letter-spacing: -0.01em;
}

section#how.how-light .nk-how-rail .nk-how-node span {
  background: #0b1220;
  color: #fff;
  border: 1px solid rgba(2,6,23,.08);
  box-shadow: 0 6px 18px rgba(2,6,23,.08);
}

section#how.how-light .nk-how-card.card--light {
  background: #ffffff !important;
  border: 1px solid rgba(2,6,23,.08) !important;
  box-shadow: 0 8px 28px rgba(2,6,23,.06) !important;
  border-radius: 16px !important;
}

section#how.how-light .nk-how-card.card--light h3 {
  color: var(--nk-ink);
}

section#how.how-light .nk-how-card.card--light p {
  color: rgba(2,6,23,.78) !important;
}

section#how.how-light .nk-how-card.card--light svg [stroke] {
  stroke: #0b1220 !important;
  stroke-opacity: .9 !important;
}

section#how.how-light .nk-how-card.card--light .btn,
section#how.how-light .nk-how-card.card--light .link {
  color: #0b1220 !important;
  border-color: rgba(2,6,23,.22) !important;
}

section#how.how-light .grid, section#how.how-light .nk-how-grid {
  gap: 16px !important;
}

@media (min-width: 768px) {
  section#how.how-light .nk-how-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 767px) {
  section#how.how-light .nk-how-grid,
  section#how.how-light .grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
}

/* Optional: step lines softened */
section#how.how-light .nk-how-rail::before,
section#how.how-light .nk-how-rail::after {
  background: rgba(2,6,23,.06) !important;
}




/* === How It Works alignment + clean numbers === */
section#how.how-light .nk-how-rail {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  justify-items: center !important;
  align-items: center !important;
  margin-bottom: 2rem;
  position: relative;
}
section#how.how-light .nk-how-rail .nk-how-node {
  display: flex;
  justify-content: center;
  align-items: center;
}
section#how.how-light .nk-how-rail .nk-how-node span {
  background: var(--nk-accent);
  color: #fff !important;
  font-weight: 700;
  font-size: 1rem;
  padding: 0.5rem 0.9rem;
  border-radius: 9999px;
  box-shadow: 0 4px 12px rgba(79,70,229,.25);
}

/* Align cards under numbers */
section#how.how-light .nk-how-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 20px !important;
  justify-items: center !important;
}
section#how.how-light .nk-how-card.card--light {
  width: 100%;
  max-width: 340px;
  text-align: left;
}




/* === How It Works: vertical guide lines from number to card === */
section#how.how-light .nk-how-rail .nk-how-node {
  position: relative;
}
section#how.how-light .nk-how-rail .nk-how-node span {
  position: relative;
  z-index: 2;
}

/* Draw a soft line under each number pointing to its card */
section#how.how-light .nk-how-rail .nk-how-node::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(100% + 2px);
  width: 2px;
  height: 28px; /* desktop guide length */
  background: rgba(2,6,23,.12);
  border-radius: 2px;
}

/* On mobile, shorten the line a bit */
@media (max-width: 767px) {
  section#how.how-light .nk-how-rail .nk-how-node::after {
    height: 16px;
  }
}