/* Browser compatibility detection and fallbacks */
@supports not (backdrop-filter: blur(1px)) {
  /* For browsers that don't support backdrop-filter, enhance background opacity */
  [style*="backdrop-filter"] {
    background: rgba(255, 255, 255, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
  }
  
  /* Specific fallbacks for colored glass effects */
  [style*="rgba(37,99,235"] {
    background: rgba(37, 99, 235, 0.25) !important;
  }
  
  [style*="rgba(5,150,105"] {
    background: rgba(5, 150, 105, 0.25) !important;
  }
  
  [style*="rgba(234,88,12"] {
    background: rgba(234, 88, 12, 0.25) !important;
  }
}

/* Core Reset & Typography */
* { box-sizing: border-box; }
html { font-size: 18px; }
/* Disable smooth scrolling so anchor jumps land immediately (requested behavior) */
html { scroll-behavior:auto; }
body { margin:0; font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; color:#111827; background:#ffffff; -webkit-font-smoothing: antialiased; min-height:100vh; display:flex; flex-direction:column; }
body.dark-app { background:#0f172a; color:#fff; }
body.dark-app .footer { background:#0f172a; }
body.dark-app main { background:#0f172a; }
body.dark-app .site-header { background:#ffffff; }
main.app-shell-main { flex:1 0 auto; display:flex; flex-direction:column; }
main { flex:1 0 auto; }
/* Ensure footer sticks to bottom on short pages */
.footer { margin-top:auto; }
img { max-width:100%; display:block; }
a { text-decoration:none; color:inherit; }

:root {
  --blue-50:#eff6ff; --blue-100:#dbeafe; --blue-600:#005397; --blue-700:#00467f; --blue-900:#00355e;
  --green-50:#ecfdf5; --green-100:#d1fae5; --green-600:#059669; --green-700:#047857; --green-800:#065f46; --green-900:#064e3b;
  --orange-50:#fff7ed; --orange-100:#ffedd5; --orange-600:#ea580c; --orange-900:#7c2d12;
  --gray-50:#f9fafb; --gray-100:#f3f4f6; --gray-200:#e5e7eb; --gray-300:#d1d5db; --gray-400:#9ca3af; --gray-500:#6b7280; --gray-600:#4b5563; --gray-700:#374151; --gray-800:#1f2937; --gray-900:#111827;
  --radius-sm:4px; --radius:12px; --shadow-sm:0 1px 2px rgba(0,0,0,.05); --shadow:0 4px 12px -2px rgba(0,0,0,.08),0 2px 4px -2px rgba(0,0,0,.06);
}

/* Layout */
.wrapper { 
  width:72rem;
  max-width:calc(92vw - 4rem);
  margin:0 auto; 
  padding:0 2rem;
  box-sizing:border-box;
}

@media (max-width:1200px){ 
  .wrapper { max-width:calc(94vw - 4rem); }
}
@media (max-width:900px){ 
  .wrapper { max-width:calc(96vw - 4rem); }
}
@media (max-width:768px){ 
  .wrapper { max-width:calc(100vw - 4rem); }
}
.grid { display:grid; gap:3rem; }
.flex { display:flex; }
.inline-flex { display:inline-flex; }
.items-center { align-items:center; }
.justify-between { justify-content:space-between; }
.justify-center { justify-content:center; }
.space-x-8 > * + * { margin-left:2rem; }
.gap-4 { gap:1rem; }
.gap-6 { gap:1.5rem; }
.gap-8 { gap:2rem; }
.gap-12 { gap:3rem; }
.gap-16 { gap:4rem; }

/* Components */
header.site-header { 
  position:fixed; 
  top:1rem; 
  left:50%;
  transform:translateX(-50%);
  z-index:100; 
  background:linear-gradient(180deg,#ffffff, #f3f4f6);
  border:1px solid rgba(15,23,42,0.16);
  border-radius:1rem;
  padding:0.5rem 1.5rem;
  box-shadow:0 10px 24px -10px rgba(15,23,42,0.28);
  width:72rem;
  max-width:calc(92vw - 4rem);
  transition:background 0.3s ease, backdrop-filter 0.3s ease, box-shadow .3s ease;
}
header.site-header.scrolled {
  background:rgba(255,255,255,0.82);
  border-color:rgba(15,23,42,0.18);
  box-shadow:0 14px 30px -14px rgba(15,23,42,0.35);
  backdrop-filter:blur(10px);
}
@media (max-width:1200px){ 
  header.site-header { max-width:calc(94vw - 4rem); }
  .nav { gap:1.25rem; }
}
@media (max-width:900px){ 
  header.site-header { max-width:calc(96vw - 4rem); padding:0.5rem 1rem; }
  .nav { gap:1rem; }
  .nav a { font-size:0.95rem; }
  .site-header .button { padding:0.45rem 0.75rem !important; font-size:0.8rem !important; }
}
@media (max-width:768px){ 
  header.site-header { max-width:calc(100vw - 4rem); padding:0.5rem 0.75rem; }
  .nav { gap:0.75rem; }
  .nav a { font-size:0.9rem; }
  .site-header .button { padding:0.4rem 0.65rem !important; font-size:0.75rem !important; }
  .logo-img { height:36px; }
}
.site-header .wrapper {
  height:auto;
  min-height:auto;
  align-items:center;
  justify-content:space-between;
  gap:0.5rem;
  padding:0;
  max-width:none;
  width:100%;
}
.logo-img { height:44px; width:auto; }
.site-header a[href="index.html"] { margin-right:auto; }
.site-header .button { margin-left:auto; }
.nav { 
  display:flex;
  align-items:center;
  gap:1.5rem;
  flex:1;
  justify-content:center;
  min-width:0;
}
.nav a { 
  font-size:1rem; 
  font-weight:600; 
  color:var(--gray-800); 
  transition:color .2s ease, opacity .2s ease; 
  position:relative;
}
.nav a.active, .nav a:hover { 
  color:#F47C04 !important; 
}

.nav a::after { content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:currentColor; transform:scaleX(0); transform-origin:left center; transition:transform .2s ease; opacity:.9; }
.nav a:hover::after, .nav a.active::after, .nav a:focus-visible::after { transform:scaleX(1); }
.nav a:focus-visible { outline:none; }
.site-header .button {
  white-space:nowrap;
  flex-shrink:0;
  margin-left:0.25rem;
  padding:0.5rem 0.85rem !important;
  font-size:0.85rem !important;
}
.button { cursor:pointer; border:none; font:inherit; font-weight:600; line-height:1.2; display:inline-flex; align-items:center; justify-content:center; border-radius:0.375rem; transition:background .25s, transform .25s, box-shadow .25s; }
.button-lg { padding:1.25rem 2rem; font-size:1.125rem; }
.button-md { padding:0.6rem 1rem; font-size:0.9rem; }
.button-green { background:var(--green-600); color:#fff; }
.button-green:hover { background:var(--green-700); }
.button-blue { background:var(--blue-600); color:#fff; }
.button-blue:hover { background:var(--blue-700); }
.button:focus { outline:2px solid var(--blue-600); outline-offset:2px; }
.shadow { box-shadow:var(--shadow); }
.shadow-sm { box-shadow:var(--shadow-sm); }
.rounded-xl { border-radius:0.5rem; }
.rounded-2xl { border-radius:0.75rem; }
.badge { display:inline-block; padding:0.625rem 1.25rem; background:var(--green-100); color:var(--green-800); font-weight:600; font-size:0.9rem; border-radius:999px; }
.card { background:#fff; border:1px solid var(--gray-200); border-radius:1rem; padding:1.5rem; box-shadow:var(--shadow-sm); transition:box-shadow .25s, transform .25s; }
.card:hover { box-shadow:var(--shadow); transform:translateY(-2px); }
.icon-circle { width:3rem; height:3rem; border-radius:999px; display:flex; align-items:center; justify-content:center; }

/* Sections */
.hero { min-height:100vh; display:flex; align-items:center; background:linear-gradient(to bottom right,var(--blue-50),#ffffff); background:linear-gradient(to bottom right,#eff6ff,#ffffff); padding:6rem 0 2rem; }
.hero.hero-visual { position:relative; overflow:hidden; background:#0f172a; display:block; min-height:100vh; }
.hero.hero-visual.stretch-short { min-height:calc(100vh - 240px); padding-bottom:4rem; }

body:has(main > .hero.hero-visual:last-child) .hero.hero-visual { margin-bottom:0; }
body.dark-app .hero.hero-visual:last-child { margin-bottom:0; }

@media (max-width:900px){
  /* Width now driven by --swoop-width variable; just adjust radius */
  .hero-swoop { border-radius:0 0 0 60px; }
  .hero { min-height:100vh; padding:5rem 0 1.5rem; }
  .hero-content { max-width:95%; }
  .hero .wrapper { padding-right:1.5rem; }

  .platform-features-grid { 
    grid-template-columns:repeat(3,1fr) !important; 
    gap:0.75rem !important; 
  }
  .platform-features-grid > div:nth-child(4) { 
    grid-column:1; 
  }
  .platform-features-grid > div:nth-child(5) { 
    grid-column:2; 
  }
}

.hero { min-height:100vh; position:relative; }
.hero-landing { min-height:auto; }
.hero-inquire { min-height:auto; }
.hero.hero-visual.light { min-height:auto; }
.hero-swoop {
  position:absolute;
  top:0;
  right:0;
  width:92%;
  height:100%;

  background:
    radial-gradient(125% 125% at 92% 92%, rgba(2,6,23,0.36), rgba(2,6,23,0) 46%),
    radial-gradient(circle at 68% 24%, rgba(5,150,105,0.06), rgba(5,150,105,0) 60%),
    radial-gradient(circle at 18% 66%, rgba(56,116,222,0.08), rgba(56,116,222,0) 62%),
    linear-gradient(120deg, rgba(5,150,105,0.12), rgba(5,150,105,0.04) 55%, rgba(5,150,105,0) 75%),
    linear-gradient(315deg,
      #cbd5e1 0%,
      #b4c2ce 16%,
      #8795a3 33%,
      #65737f 52%,
      #475661 73%,
      #2d3945 88%,
      #1e293b 100%);
  border-radius:0 0 0 120px;
  z-index:1;
  box-shadow:-8px 0 22px -6px rgba(15,23,42,.42), inset 0 0 120px rgba(255,255,255,.07);
  overflow:hidden;
}

.hero-swoop:before, .hero-swoop:after { content:""; position:absolute; inset:0; pointer-events:none; }
.hero-swoop:before {
  background:linear-gradient(115deg, rgba(255,255,255,0) 5%, rgba(5,150,105,0.12) 48%, rgba(255,255,255,0) 78%);
  mix-blend-mode:overlay;
  opacity:0.25;
  animation:swoopSheen 11s linear infinite;
}
.hero-swoop:after {
  background:
    repeating-linear-gradient(135deg, rgba(5,150,105,0.02) 0 7px, rgba(5,150,105,0) 7px 14px),
    radial-gradient(circle at 32% 74%, rgba(5,150,105,0.045), rgba(5,150,105,0) 62%);
  mix-blend-mode:soft-light;
  opacity:0.22;
}
@keyframes swoopSheen {
  0% { transform:translateX(-40%) skewX(-14deg); opacity:0; }
  20% { opacity:0.45; }
  55% { transform:translateX(18%) skewX(-14deg); opacity:0.22; }
  85% { opacity:0.38; }
  100% { transform:translateX(60%) skewX(-14deg); opacity:0; }
}
@media (prefers-reduced-motion:reduce){
  .hero-swoop:before { animation:none; opacity:.3; }
}

.hero-swoop::marker { display:none; }
.hero-swoop:focus { outline:none; }
.hero-swoop:after { box-shadow:inset 0 0 120px -60px rgba(2,6,23,.22); }
.hero-content { 
  position:relative; 
  z-index:3; 
  margin-left:auto; 
  margin-right:auto; 
  width:72rem;
  max-width:calc(92vw - 4rem);
  padding-left:2rem; 
  padding-right:2rem;
  padding-top:0;
  box-sizing:border-box;
}

.hero-visual.light .hero-content,
.hero-visual.light .platform-section {
  margin-left:auto;
  margin-right:auto;
}
.platform-showcase {
  position:relative;
  z-index:3;
  margin-top:3.5rem;
  padding-bottom:3rem;
  text-align:center;
}
.platform-showcase h2 {
  color:#0f172a;
  text-shadow:none;
}
.platform-showcase .sub {
  color:#334155;
  font-size:1.05rem;
  font-weight:500;
  margin:0.35rem 0 1.5rem;
  text-shadow:none;
}

.platform-showcase .modules-shell {
  position:relative;
  padding:2.25rem 2.25rem 2.5rem;
  margin:0 auto;
  max-width:1240px;
  border:1.5px solid rgba(15,23,42,0.18);
  border-radius:1.75rem;
  background:linear-gradient(150deg, rgba(255,255,255,0.84), rgba(247,249,252,0.9) 48%, rgba(238,242,247,0.96));
  box-shadow:
    0 14px 48px -16px rgba(15,23,42,0.40),
    0 6px 22px -8px rgba(15,23,42,0.22),
    0 2px 6px -1px rgba(15,23,42,0.12),
    inset 0 0 0 1.25px rgba(255,255,255,0.55),
    inset 0 0 0 6px rgba(255,255,255,0.35),
    inset 0 0 22px -4px rgba(0,83,151,0.12);
  backdrop-filter:blur(12px) saturate(1.3);
}

.platform-showcase .modules-shell:before,
.platform-showcase .modules-shell:after {
  content:"";
  position:absolute;
  left:12%;
  width:76%;
  height:14px;
  pointer-events:none;
  background:radial-gradient(60% 120% at 50% 0%, rgba(0,83,151,0.35), rgba(0,83,151,0) 70%);
  filter:blur(6px);
  opacity:.55;
}
.platform-showcase .modules-shell:before { top:-6px; }
.platform-showcase .modules-shell:after {
  top:auto;
  bottom:-6px;
  background:radial-gradient(60% 120% at 50% 100%, rgba(0,83,151,0.30), rgba(0,83,151,0) 72%);
}
@media (max-width:900px){
  .platform-showcase .modules-shell { padding:1.75rem 1.25rem 2rem; border-radius:1.25rem; }
}
@media (prefers-reduced-transparency: reduce){
  .platform-showcase .modules-shell { backdrop-filter:none; }
}
.page-intro { 
  --intro-gap:2.5rem;
  margin:0 auto var(--intro-gap);
  text-align:center; 
}
.page-intro h1, .page-intro h2 { margin-top:0; }
.page-intro p { margin:0; }
.platform-showcase .features-row {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:1rem;
  max-width:1000px;
  margin:0 auto;
}
.platform-showcase .feature {
  color:#fff;
  padding:1rem 1rem;
  border-radius:0.5rem;
  min-width:160px;
  text-align:center;
  box-shadow:0 6px 20px -6px rgba(0,0,0,0.4);
  border:1px solid rgba(255,255,255,0.18);
  text-decoration:none;
  transform:translateY(0) scale(1);
  transition:transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s;
  display:block;
  position:relative;
}
.platform-showcase .feature:hover,
.platform-showcase .feature:focus {
  transform:translateY(-4px) scale(1.02);
  box-shadow:0 12px 32px -8px rgba(0,0,0,0.5);
}
.platform-showcase .feature .t { font-weight:800; font-size:1rem; margin-bottom:0.35rem; }
.platform-showcase .feature .s { font-size:0.8rem; opacity:0.95; line-height:1.3; }
.platform-showcase .feature.blue { background:linear-gradient(135deg, #2563eb, #1e40af); border-color:rgba(147,197,253,0.35); box-shadow:0 6px 20px -6px rgba(37,99,235,0.4); }
.platform-showcase .feature.green { background:linear-gradient(135deg, #059669, #047857); border-color:rgba(134,239,172,0.35); box-shadow:0 6px 20px -6px rgba(5,150,105,0.4); }
.platform-showcase .feature.orange { background:linear-gradient(135deg, #ea580c, #c2410c); border-color:rgba(253,186,116,0.35); box-shadow:0 6px 20px -6px rgba(234,88,12,0.4); }
/* Custom module colors */
.platform-showcase .feature.crewspec { 
  /* Goldenrod (#DAA520) with a darker edge for depth */
  background:linear-gradient(135deg, #DAA520, #B8860B);
  color:#ffffff; /* white text as requested */
  border-color:rgba(218,165,32,0.55);
  box-shadow:0 6px 20px -6px rgba(139,117,12,0.5);
}
.platform-showcase .feature.crewspec .t,
.platform-showcase .feature.crewspec .s { color:#ffffff; text-shadow:0 1px 2px rgba(0,0,0,0.25); }

.platform-showcase .feature.gatepass {
  /* Royal purple gradient */
  background:linear-gradient(135deg, #6B21A8, #4C1D95);
  border-color:rgba(216,180,254,0.35);
  box-shadow:0 6px 20px -6px rgba(107,33,168,0.5);
}

@media (max-width:768px){
  .platform-showcase { margin-top:2.25rem; padding-bottom:2rem; }
  .platform-showcase .sub { font-size:0.95rem; }
  .platform-showcase .feature { min-width:140px; }
}

@media (min-width:900px){
  .platform-showcase .features-row{
    display:grid;
    grid-template-columns:repeat(5, minmax(0, 1fr));
    --tile-gap: 3rem;
    gap:var(--tile-gap, 0.85rem);
    max-width:1200px;
  }
  .platform-showcase .feature .t { font-size:1.2rem; }
  .platform-showcase .feature .s { font-size:0.95rem; }
  .platform-showcase .feature{ min-width:0; }
  .platform-showcase .feature:not(:last-child)::after{
    content:"";
    position:absolute;
    right:calc(var(--tile-gap, 0.85rem) * -1);
    top:50%;
    transform:translateY(-50%);
    width:var(--tile-gap, 0.85rem);
    height:0;
    border-top:2px dotted #475569;
    opacity:0.9;
    pointer-events:none;
  }
}
.hero.hero-visual.light { background:#0f172a !important; }
.hero-visual.light .hero-swoop {
  background:
    linear-gradient(to right, rgba(30,41,59,0.20) 0px, rgba(30,41,59,0.0) 78px),
    radial-gradient(115% 120% at 92% 88%, rgba(255,255,255,0.60), rgba(255,255,255,0) 58%),
    radial-gradient(60% 50% at 28% 30%, rgba(226,232,240,0.22), rgba(226,232,240,0) 62%),
    linear-gradient(120deg, rgba(255,255,255,0.55), rgba(255,255,255,0.18) 55%, rgba(255,255,255,0) 75%),
    linear-gradient(315deg, #ffffff 0%, #f7f8fb 36%, #eef1f5 70%, #e7ebf0 100%);
  box-shadow:-14px 0 28px -10px rgba(15,23,42,.26), inset 0 0 90px rgba(255,255,255,.18);
}
.hero-visual.light .hero-swoop:before {
  background:linear-gradient(115deg, rgba(255,255,255,0) 5%, rgba(255,255,255,0.22) 48%, rgba(255,255,255,0) 78%);
  opacity:0.14;
}
.hero-visual.light .hero-swoop:after {
  background:
    linear-gradient(to right, rgba(15,23,42,0.22) 0px, rgba(15,23,42,0.0) 60px),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.035) 0 7px, rgba(255,255,255,0) 7px 14px),
    radial-gradient(circle at 32% 74%, rgba(0,0,0,0.04), rgba(0,0,0,0) 62%);
  box-shadow:inset 0 0 140px -64px rgba(255,255,255,.20);
  opacity:0.16;
}

@media (max-width:1200px){ 
  .hero-swoop { width:94%; } 
  .hero-content { max-width:calc(94vw - 4rem); }
}
@media (max-width:900px){ 
  .hero-swoop { width:96%; border-radius:0 0 0 80px; } 
  .hero-content { max-width:calc(96vw - 4rem); }
}
@media (max-width:768px){ 
  .hero-swoop { width:100%; border-radius:0; } 
  .hero-content { max-width:calc(100vw - 4rem); }
}

.platform-section {
  position:relative;
  z-index:3;
  width:72rem;
  max-width:calc(92vw - 4rem);
  margin:3.5rem auto 0;
  padding:0 2rem 3rem;
  box-sizing:border-box;
}
@media (min-width: 900px){
  .hero-visual.light .platform-section{
    margin-left:4vw;
    margin-right:auto;
  }
}
@media (max-width:1200px){ 
  .platform-section { max-width:calc(94vw - 4rem); }
}
@media (max-width:900px){ 
  .platform-section { max-width:calc(96vw - 4rem); margin-right:auto; }
}
@media (max-width:768px){ 
  .platform-section { max-width:calc(100vw - 4rem); margin-top:2.5rem; }
}

.hero h1 { font-size:3rem; line-height:1.1; font-weight:700; margin:0 0 1.25rem; }
.hero h1 span { color:var(--green-600); }
.hero p.lead { font-size:1.4rem; line-height:1.4; color:var(--gray-700); margin:0 0 2rem; max-width:52ch; }

/* Landing hero mini module cards */
.modemo-cards-grid .modemo-card { 
  position:relative; 
  padding:1.75rem 1.5rem; 
  border-radius:1.25rem; 
  text-align:center; 
  overflow:hidden; 
  /* Change to rectangular for better text space */
  aspect-ratio:4 / 3; 
  display:flex; 
  flex-direction:column; 
  align-items:center; 
  justify-content:center; 
  gap:0.75rem; 
  transition:transform .3s ease, box-shadow .3s ease;
}
.modemo-card .title { font-size:1.4rem; font-weight:800; letter-spacing:-.01em; margin:0 0 0.5rem; padding:0; color:#ffffff; }
.modemo-card .subtitle { font-size:1rem; font-weight:600; letter-spacing:0; text-transform:none; line-height:1.3; margin:0; padding:0; color:#f8fafc; opacity:0.95; }
.modemo-card:before { content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,0)); opacity:.6; pointer-events:none; }
.modemo-card:after { content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:0 8px 24px -8px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.1) inset; pointer-events:none; }
.modemo-card.blue { background:linear-gradient(135deg, #2563eb, #1d4ed8); border:2px solid #60a5fa; }
.modemo-card.green { background:linear-gradient(135deg, #059669, #047857); border:2px solid #34d399; }
.modemo-card.orange { background:linear-gradient(135deg, #ea580c, #c2410c); border:2px solid #fb923c; }
.modemo-card:hover { transform:translateY(-4px) scale(1.02); box-shadow:0 12px 32px -8px rgba(0,0,0,.5); }
@media (prefers-reduced-motion:no-preference){ .modemo-card { transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s; } }
@media (max-width:640px){ .modemo-card .title { font-size:0.9rem; } }
.small { font-size:0.85rem; color:var(--gray-500); }


.glass-card { 
  background:rgba(255,255,255,.20) !important; 
  border:1px solid rgba(255,255,255,.28) !important; 
  backdrop-filter:blur(10px); 
  -webkit-backdrop-filter:blur(10px);
  padding:1.25rem 1.5rem; 
  border-radius:1rem; 
  position:relative;
  box-shadow:0 8px 32px -12px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.04) inset;
}

.glass-card::before {
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:radial-gradient(120% 120% at 85% 85%, rgba(15,23,42,.18), rgba(15,23,42,0) 55%);
}


.glass-strong { 
  background:rgba(255,255,255,.26) !important; 
  border:1px solid rgba(255,255,255,.36) !important; 
}


[style*="background:rgba(255,255,255,.08"][style*="backdrop-filter"],
[style*="background: rgba(255,255,255,.08"][style*="backdrop-filter"],
[style*="background:rgba(255, 255, 255, .08"][style*="backdrop-filter"],
[style*="background: rgba(255, 255, 255, .08"][style*="backdrop-filter"],
[style*="background:rgba(255,255,255,.10"][style*="backdrop-filter"],
[style*="background: rgba(255,255,255,.10"][style*="backdrop-filter"],
[style*="background:rgba(255, 255, 255, .10"][style*="backdrop-filter"],
[style*="background: rgba(255, 255, 255, .10"][style*="backdrop-filter"],
[style*="background:rgba(255,255,255,.12"][style*="backdrop-filter"],
[style*="background: rgba(255,255,255,.12"][style*="backdrop-filter"],
[style*="background:rgba(255, 255, 255, .12"][style*="backdrop-filter"],
[style*="background: rgba(255, 255, 255, .12"][style*="backdrop-filter"],
[style*="background:rgba(255,255,255,.14"][style*="backdrop-filter"],
[style*="background: rgba(255,255,255,.14"][style*="backdrop-filter"],
[style*="background:rgba(255, 255, 255, .14"][style*="backdrop-filter"],
[style*="background: rgba(255, 255, 255, .14"][style*="backdrop-filter"] {
  background: rgba(255,255,255,.20) !important;
}

[style*="border:1px solid rgba(255,255,255,.10"],
[style*="border: 1px solid rgba(255,255,255,.10"],
[style*="border:1px solid rgba(255, 255, 255, .10"],
[style*="border: 1px solid rgba(255, 255, 255, .10"],
[style*="border:1px solid rgba(255,255,255,.12"],
[style*="border: 1px solid rgba(255,255,255,.12"],
[style*="border:1px solid rgba(255, 255, 255, .12"],
[style*="border: 1px solid rgba(255, 255, 255, .12"],
[style*="border:1px solid rgba(255,255,255,.15"],
[style*="border: 1px solid rgba(255,255,255,.15"],
[style*="border:1px solid rgba(255, 255, 255, .15"],
[style*="border: 1px solid rgba(255, 255, 255, .15"] {
  border-color: rgba(255,255,255,.28) !important;
}


.glass-strong { 
  background:rgba(255,255,255,.26) !important; 
  border:1px solid rgba(255,255,255,.36) !important; 
}
.kpi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1rem; margin:1.75rem 0 2rem; }
.kpi-card { padding:1rem 1.25rem; border-radius:0.85rem; }
.kpi-value { color:#fff; font-size:1.5rem; font-weight:800; line-height:1; text-shadow:0 2px 8px rgba(0,0,0,.35); }
.kpi-label { color:#e2e8f0; font-size:0.8rem; font-weight:600; letter-spacing:.04em; margin-top:0.4rem; display:block; text-shadow:0 1px 2px rgba(0,0,0,.35); }
.chip { display:inline-flex; align-items:center; gap:0.35rem; padding:0.35rem 0.65rem; border-radius:999px; font-size:0.7rem; font-weight:700; letter-spacing:.06em; color:#fff; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.08); }
.chip.green { background:linear-gradient(135deg,#059669,#047857); border:none; }
.chip.blue { background:linear-gradient(135deg,#2563eb,#1d4ed8); border:none; }

.chip.blue { background:linear-gradient(135deg,#005397,#00467f); }
.chip.orange { background:linear-gradient(135deg,#ea580c,#c2410c); border:none; }
.avatar { width:56px; height:56px; border-radius:999px; background:linear-gradient(135deg,#64748b,#334155); display:inline-flex; align-items:center; justify-content:center; color:#fff; font-weight:800; box-shadow:0 4px 16px -6px rgba(0,0,0,.5), 0 0 0 2px rgba(255,255,255,.12) inset; }
.meta { color:#e2e8f0; font-size:0.9rem; text-shadow:0 1px 2px rgba(0,0,0,.35); }
.list { list-style:none; margin:0; padding:0; display:grid; gap:0.75rem; }
.list li { color:#f1f5f9; font-size:0.95rem; display:flex; align-items:flex-start; gap:0.6rem; text-shadow:0 1px 2px rgba(0,0,0,.35); }
.list li small { color:#cbd5e1; font-size:0.8rem; display:block; text-shadow:0 1px 2px rgba(0,0,0,.35); }

.triple { grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); }
.form-panel { 
  background:linear-gradient(180deg,#ffffff,#fbfdff); 
  border:1px solid rgba(15,23,42,.18); 
  border-radius:1.5rem; 
  padding:2rem; 
  box-shadow:0 16px 36px -12px rgba(15,23,42,.38), 0 0 0 1px rgba(255,255,255,.65) inset; 
  position:relative;
}
.form-panel::before{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:calc(1.5rem + 10px);
  background:radial-gradient(80% 60% at 50% 0%, rgba(255,255,255,0.45), rgba(255,255,255,0));
  filter:blur(14px);
  z-index:-1;
}
.form-panel h3 { margin:0 0 .25rem; font-size:1.4rem; }
.form-panel p { margin:0 0 1.5rem; color:var(--gray-600); }
.input { width:100%; border:1px solid var(--gray-300); border-radius:0.5rem; padding:0.75rem 0.9rem; font-size:1rem; font-family:inherit; }
.input:focus { outline:2px solid var(--blue-600); border-color:var(--blue-600); }

.footer { background:#0f172a; color:#fff; padding:3rem 0; }
.footer h3 { margin:0 0 1rem; font-size:1.05rem; font-weight:700; }
.footer a { color:var(--gray-300); font-size:0.9rem; display:inline-block; margin:.25rem 0; transition:color .2s; }
.footer a:hover { color:#fff; }
.footer p { margin:0 0 1rem; color:var(--gray-300); font-size:0.9rem; line-height:1.4; }
.footer-bottom { border-top:1px solid var(--gray-700); margin-top:2rem; padding-top:2rem; display:flex; flex-direction:column; gap:1rem; font-size:0.75rem; color:var(--gray-400); }
@media (min-width:768px){ .footer-bottom { flex-direction:row; justify-content:space-between; align-items:center; } }

@media (max-width:640px){
  .footer { padding:2.25rem 0 2.75rem; }
  .footer .grid { display:grid !important; grid-template-columns:1fr 1fr; gap:1.75rem !important; }
  .footer .grid > div:first-child { grid-column:1 / -1; }
  .footer h3 { font-size:0.95rem; margin-bottom:0.75rem; }
  .footer a { font-size:0.85rem; margin:0.15rem 0; line-height:1.2; }
  .footer p { font-size:0.8rem; margin-bottom:0.75rem; }
  .footer-bottom { font-size:0.7rem; gap:0.75rem; }
  .footer-bottom .flex { gap:0.85rem !important; }
  .footer-bottom a { font-size:0.75rem; }
}
@media (max-width:420px){
  .footer .grid { grid-template-columns:1fr; }
  .footer .grid > div { padding-right:0.25rem; }
  .footer a { padding:0.15rem 0; }
  .footer-bottom { align-items:flex-start; }
}

.section-band { padding:6rem 0; }
.section-light { background:var(--gray-50); border-top:1px solid var(--gray-200); border-bottom:1px solid var(--gray-200); }


.comparison-wrap { 
  width:72rem; 
  max-width:calc(92vw - 4rem);
  margin:0 auto; 
  padding-left:2rem;
  padding-right:2rem;
  box-sizing:border-box;
}
@media (max-width:1200px){ 
  .comparison-wrap { max-width:calc(94vw - 4rem); }
}
@media (max-width:900px){ 
  .comparison-wrap { max-width:calc(96vw - 4rem); }
}
@media (max-width:768px){ 
  .comparison-wrap { max-width:calc(100vw - 4rem); }
}
.comparison-header { display:flex; flex-direction:column; align-items:center; text-align:center; margin-bottom:3.5rem; }
.comparison-badge { display:inline-block; padding:0.5rem 1rem; background:var(--green-100); color:var(--green-700); font-size:0.75rem; font-weight:600; letter-spacing:.05em; border-radius:999px; text-transform:uppercase; }
.comparison-title { font-size:2.5rem; line-height:1.1; font-weight:800; margin:1rem 0 0.5rem; }
.comparison-sub { font-size:1.05rem; color:var(--gray-600); }
.comparison-stats { display:flex; flex-wrap:wrap; gap:1rem; margin-top:1.75rem; }
.comparison-stat { flex:1 1 260px; background:#fff; border:1px solid var(--gray-200); padding:1rem 1.25rem; border-radius:0.85rem; display:flex; align-items:center; gap:0.75rem; box-shadow:var(--shadow-sm); }
.comparison-stat strong { font-size:1.15rem; }
.comparison-grid { display:grid; gap:4rem; padding-top:0.5rem; }
@media (min-width:900px){ .comparison-grid { grid-template-columns:1fr 1fr; gap:5rem; padding-top:1.5rem; } }

.timeline { position:relative; padding-left:4.15rem; }
.timeline:before { content:""; position:absolute; left:0.55rem; top:0; bottom:0; width:3px; background:var(--gray-200); border-radius:4px; }
.timeline.modemo:before { background:var(--green-200, #bbf7d0); }
.timeline-step { position:relative; margin-bottom:3rem; }
.timeline-step:last-child { margin-bottom:0; }
.timeline-marker { position:absolute; left:-0.05rem; top:0.55rem; width:0.85rem; height:0.85rem; border-radius:50%; background:#fff; border:3px solid var(--gray-300); box-shadow:0 0 0 2px #fff; pointer-events:none; }
.timeline.modemo .timeline-marker { border-color:var(--green-600); }
.timeline.modemo .timeline-marker { border-color:var(--green-600); }
.timeline-marker { display:none !important; }
.timeline-step h4 { margin:0 0 0.55rem; font-size:1.02rem; font-weight:700; display:flex; align-items:center; flex-wrap:wrap; gap:.55rem; line-height:1.28; padding-right:.65rem; position:relative; z-index:2; }
.timeline-step small { font-size:0.7rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; padding:0.25rem 0.6rem; border-radius:999px; background:var(--gray-100); color:var(--gray-600); }
.timeline.modemo .timeline-step small { background:var(--green-100); color:var(--green-700); }
.timeline-step p { margin:0; font-size:0.95rem; line-height:1.45; color:var(--gray-600); }

.vs-label { display:inline-block; font-size:0.65rem; font-weight:700; letter-spacing:.12em; color:var(--gray-600); background:#fff; border:1px solid var(--gray-200); padding:0.35rem 0.75rem; border-radius:999px; margin-bottom:1.25rem; position:relative; z-index:1; }


.timeline-callout { margin-top:2.5rem; background:linear-gradient(135deg,var(--green-600),var(--blue-600)); color:#fff; padding:1.5rem 1.75rem; border-radius:1rem; display:flex; flex-direction:column; gap:0.5rem; box-shadow:var(--shadow); }
.timeline-callout h5 { margin:0; font-size:1.05rem; font-weight:700; letter-spacing:.03em; }
.timeline-callout p { margin:0; font-size:0.85rem; opacity:.9; }

.legend { display:flex; gap:1.25rem; flex-wrap:wrap; margin-top:2.25rem; }
.legend-item { display:flex; align-items:center; gap:0.5rem; font-size:0.75rem; font-weight:500; color:var(--gray-600); }
.legend-swatch { width:14px; height:14px; border-radius:3px; background:var(--gray-300); }
.legend-swatch.modemo { background:var(--green-600); }


.mini-hero { padding:3.5rem 0 3.25rem; background:linear-gradient(to bottom right,var(--gray-50),#fff); border-bottom:1px solid var(--gray-200); }
.mini-hero h1, .mini-hero h2 { margin:0 0 .75rem; font-size:2.35rem; line-height:1.15; font-weight:700; }
.mini-hero p.lead { margin:0; font-size:1.05rem; line-height:1.4; color:var(--gray-600); }
@media (min-width:900px){
  .mini-hero { padding:4.25rem 0 4rem; }
  .mini-hero h1, .mini-hero h2 { font-size:2.65rem; }
  .mini-hero p.lead { font-size:1.15rem; }
}


.benefits-timeline { 
  display:flex; 
  flex-direction:column; 
  gap:2.5rem; 
  width:72rem;
  max-width:calc(92vw - 4rem);
  margin:0 auto 4rem; 
  padding:0 2rem;
  box-sizing:border-box;
}
@media (max-width:1200px){ 
  .benefits-timeline { max-width:calc(94vw - 4rem); }
}
@media (max-width:900px){ 
  .benefits-timeline { max-width:calc(96vw - 4rem); }
}
@media (max-width:768px){ 
  .benefits-timeline { max-width:calc(100vw - 4rem); }
}
.benefit-step { display:flex; align-items:flex-start; gap:2rem; opacity:0; transform:translateY(40px) scale(0.95); transition:all 0.8s cubic-bezier(0.16, 1, 0.3, 1); position:relative; }

.benefit-step { scroll-margin-top:var(--anchor-offset, 180px); }
.benefits-timeline:not(.single-focus) .benefit-step:first-child { opacity:1; transform:translateY(0) scale(1); }
.benefit-step.animate-in { opacity:1; transform:translateY(0) scale(1); }
.benefit-step.animate-pop { transform:translateY(-8px) scale(1.02); }
.benefit-node { width:4rem; height:4rem; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1.5rem; color:#ffffff; flex-shrink:0; position:relative; z-index:2; transition:all 0.4s ease; }
.benefit-step[data-color="blue"] .benefit-node { background:linear-gradient(135deg, var(--blue-600), var(--blue-700)); }
.benefit-step[data-color="green"] .benefit-node { background:linear-gradient(135deg, var(--green-600), var(--green-700)); }
.benefit-step[data-color="orange"] .benefit-node { background:linear-gradient(135deg, #ea580c, #c2410c); }
.benefit-step[data-color="yellow"] .benefit-node { background:linear-gradient(135deg, #DAA520, #B8860B); }
.benefit-step[data-color="purple"] .benefit-node { background:linear-gradient(135deg, #6B21A8, #4C1D95); }
.benefit-content { flex:1; }
.benefit-tag { background:linear-gradient(135deg,var(--blue-600),var(--blue-700)); color:#fff; font-weight:800; font-size:1rem; padding:0.65rem 1.35rem; border-radius:1rem; display:inline-block; margin-bottom:1.25rem; border:1px solid var(--blue-700); letter-spacing:0.04em; text-transform:uppercase; text-shadow:0 2px 6px rgba(0,0,0,.25); box-shadow:0 4px 12px -4px rgba(0,83,151,.5); }
.benefit-step[data-color="green"] .benefit-tag { background:linear-gradient(135deg,var(--green-600),var(--green-700)); border-color:var(--green-700); box-shadow:0 4px 12px -4px rgba(5,150,105,.5); }
.benefit-step[data-color="orange"] .benefit-tag { background:linear-gradient(135deg,#ea580c,#c2410c); border-color:#c2410c; box-shadow:0 4px 12px -4px rgba(234,88,12,.5); }
.benefit-step[data-color="yellow"] .benefit-tag { background:linear-gradient(135deg,#DAA520,#B8860B); border-color:#B8860B; box-shadow:0 4px 12px -4px rgba(218,165,32,.45); }
.benefit-step[data-color="purple"] .benefit-tag { background:linear-gradient(135deg,#6B21A8,#4C1D95); border-color:#4C1D95; box-shadow:0 4px 12px -4px rgba(107,33,168,.5); }


#startline .benefit-node { background:linear-gradient(135deg, #2563eb, #1d4ed8) !important; }
#startline .benefit-tag { background:linear-gradient(135deg, #2563eb, #1d4ed8) !important; border-color:#1d4ed8 !important; box-shadow:0 4px 12px -4px rgba(37,99,235,.5) !important; }
.benefit-content h3 { font-size:1.5rem; font-weight:700; margin:0 0 1rem; color:#ffffff; text-shadow:0 2px 8px rgba(0,0,0,.3); }
.benefit-content p { margin:0 0 1rem; line-height:1.6; color:#ffffff; opacity:0.9; text-shadow:0 1px 3px rgba(0,0,0,.2); }
.benefit-highlight { 
  font-weight:600; 
  color:#ffffff; 
  background:rgba(255,255,255,.1); 
  background:rgba(255,255,255,.25); 
  padding:0.75rem 1rem; 
  border-radius:0.5rem; 
  backdrop-filter:blur(8px); 
  border:1px solid rgba(255,255,255,.2); 
  text-shadow:none; 
  display:inline-block;
  max-width:fit-content;
}
@supports not (backdrop-filter: blur(8px)) {
  .benefit-highlight { background:rgba(255,255,255,.35); }
}
.benefit-step:not(:last-child)::after { content:""; position:absolute; left:2rem; top:4rem; width:2px; height:4rem; background:linear-gradient(to bottom, rgba(148,163,184,.4), transparent); z-index:1; }
@media (min-width:800px){
  .benefits-timeline { gap:3rem; }
  .benefit-content h3 { font-size:1.75rem; }
}
@media (max-width:540px){
  .benefit-step { flex-direction:column; align-items:center; text-align:center; gap:1.5rem; }
  .benefit-step:not(:last-child)::after { display:none; }
  .benefit-content h3 { font-size:1.35rem; }
}

@media (prefers-reduced-motion:no-preference){
  .timeline-marker { transition:background .3s ease, box-shadow .3s ease; }
  .timeline-step:hover .timeline-marker { background:var(--blue-50); box-shadow:0 0 0 4px #fff,0 0 0 6px var(--blue-100); }
  .timeline.modemo .timeline-step:hover .timeline-marker { background:var(--green-100); box-shadow:0 0 0 4px #fff,0 0 0 6px var(--green-100); }
}


@media (max-width:480px){
  .timeline { padding-left:4rem; }
  .timeline-step { margin-bottom:2.4rem; }
  .comparison-stats { gap:0.75rem; }
}


.comparison-stats.grouped { display:grid; gap:1.25rem; margin-top:1.75rem; width:100%; }
@media (min-width:900px){ .comparison-stats.grouped { grid-template-columns:1fr 1fr; } }
.stats-group { background:#fff; border:1px solid var(--gray-200); border-radius:1rem; padding:1.25rem 1.5rem; box-shadow:var(--shadow-sm); position:relative; }
.stats-group.traditional { border-left:4px solid var(--gray-300); }
.stats-group.modemo { border-left:4px solid var(--green-600); }
.stats-heading { font-size:0.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gray-500); margin:0 0 .75rem; }
.metric { display:flex; align-items:baseline; gap:.5rem; margin:0 0 .45rem; line-height:1.1; }
.metric:last-child { margin-bottom:0; }
.metric strong { font-size:1.05rem; font-weight:700; color:var(--gray-900); }
.metric span { font-size:0.65rem; letter-spacing:.1em; font-weight:600; text-transform:uppercase; color:var(--gray-500); }
.metrics-inline { display:flex; flex-wrap:wrap; gap:0.85rem 1.25rem; }

.traditional-path-card {
  background: linear-gradient(135deg, #c86565, #9a3a3a) !important;
  color:#ffffff !important;
  text-align: center;
  border:1px solid #7f2a2a !important;
  box-shadow:0 16px 36px -12px rgba(15,23,42,.35);
  border-radius:0.5rem !important;
}
.traditional-path-card h3,
.traditional-path-card p,
.traditional-path-card div,
.traditional-path-card span { color:#ffffff !important; text-shadow:none !important; }

.modemo-path-card {
  background: linear-gradient(135deg, #3f8d77, #2f6f59) !important;
  position: relative;
  color:#ffffff !important;
  text-align: center;
  border:1px solid #275e4c !important;
  box-shadow:0 16px 36px -12px rgba(15,23,42,.35);
  border-radius:0.5rem !important;
}
.modemo-path-card h3,
.modemo-path-card p,
.modemo-path-card div,
.modemo-path-card span { color:#ffffff !important; text-shadow:none !important; }


.rtw-sub-card {
  background:#007db7 !important;
  position:relative;
  color:#ffffff !important;
  border:1px solid #007db7 !important;
  box-shadow:0 14px 30px -12px rgba(15,23,42,.32);
  border-radius:0.5rem !important;
}
.rtw-sub-card h3,
.rtw-sub-card p,
.rtw-sub-card span { color:#ffffff !important; text-shadow:none !important; }
.rtw-sub-card::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:rgba(255,255,255,0.12); }
.rtw-icon { 
  width:44px; 
  height:44px; 
  display:inline-flex; 
  align-items:center; 
  justify-content:center; 
  border-radius:50%; 
  background:rgba(255,255,255,0.15); 
  box-shadow:0 2px 6px -2px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(255,255,255,0.25); 
  margin:0; 
}
.rtw-icon svg { width:24px; height:24px; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; fill:none; }
.rtw-sub-card.blue { background:#005397 !important; border-color:#005397 !important; }
.rtw-sub-card.navy { background:#0B2747 !important; border-color:#0B2747 !important; }


.problem-chip {
  background: #005397;
  color:#ffffff;
  border:1px solid #005397;
  padding:0.5rem 1rem;
  border-radius:1.5rem;
  font-size:0.85rem;
  font-weight:700;
}


.white-heading {
  color: #ffffff;
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(0,0,0,.2);
  margin: 0;
}

.white-text {
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0,0,0,.25);
}

.white-stat {
  color: #ffffff;
  font-weight: 700;
  font-size: 0.9rem;
}

/* Utility */
.mt-0{margin-top:0;} .mb-0{margin-bottom:0;} .mb-1{margin-bottom:0.25rem;} .mb-2{margin-bottom:0.5rem;} .mb-3{margin-bottom:0.75rem;} .mb-4{margin-bottom:1rem;} .mb-6{margin-bottom:1.5rem;} .mb-8{margin-bottom:2rem;} .mb-12{margin-bottom:3rem;} .mb-16{margin-bottom:4rem;} .mt-6{margin-top:1.5rem;} .mt-8{margin-top:2rem;} .mt-10{margin-top:2.5rem;} .mt-12{margin-top:3rem;} .mt-16{margin-top:4rem;}
.text-center{text-align:center;} .text-right{text-align:right;}
.text-sm{font-size:.85rem;} .text-base{font-size:1rem;} .text-lg{font-size:1.125rem;} .text-xl{font-size:1.25rem;} .text-2xl{font-size:1.5rem;} .text-3xl{font-size:1.875rem;} .text-4xl{font-size:2.25rem;} .text-5xl{font-size:3rem;} .text-6xl{font-size:3.75rem;} .text-7xl{font-size:4.5rem;}
.font-bold{font-weight:700;} .font-semibold{font-weight:600;} .leading-tight{line-height:1.1;} .leading-relaxed{line-height:1.45;}
.text-gray-500{color:var(--gray-500);} .text-gray-600{color:var(--gray-600);} .text-gray-700{color:var(--gray-700);} .text-gray-900{color:var(--gray-900);} .text-green-600{color:var(--green-600);} .text-blue-600{color:var(--blue-600);} .text-green-900{color:var(--green-900);} .text-blue-900{color:var(--blue-900);} .text-orange-600{color:var(--orange-600);} .text-orange-900{color:var(--orange-900);} .text-green-800{color:var(--green-800);} .text-white{color:#fff;}
.bg-white{background:#fff;} .bg-blue-50{background:var(--blue-50);} .bg-green-100{background:var(--green-100);} .bg-blue-100{background:var(--blue-100);} .bg-orange-100{background:var(--orange-100);} .bg-gray-100{background:var(--gray-100);} .bg-gray-50{background:var(--gray-50);} .bg-green-50{background:var(--green-50);} .bg-green-600{background:var(--green-600);} .bg-blue-600{background:var(--blue-600);} .bg-orange-600{background:var(--orange-600);} .bg-gray-900{background:var(--gray-900);} 
.border { border:1px solid var(--gray-200); } .border-t{border-top:1px solid var(--gray-200);} .border-b{border-bottom:1px solid var(--gray-200);} .border-gray-200{border-color:var(--gray-200);} .border-gray-300{border-color:var(--gray-300);} .border-green-300{border-color:#6ee7b7;} .border-l-4{border-left:4px solid var(--gray-200);} .border-gray-700{border-color:var(--gray-700);} .border-green-200{border-color:var(--green-200);} .border-blue-200{border-color:var(--blue-200);} 
.rounded-full{border-radius:999px;} .rounded-lg{border-radius:0.375rem;} .rounded-xl{border-radius:0.5rem;} .rounded-2xl{border-radius:0.75rem;}
.shadow-xl{box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04);} 
.transition { transition:all .25s; }


/* Simple mobile adjustments */
@media (min-width:1024px){
  .lg\:grid-cols-2 { grid-template-columns:repeat(2,1fr); }
  .lg\:text-6xl { font-size:3.75rem; }
  .lg\:text-7xl { font-size:4.5rem; }
  .lg\:px-8 { padding-left:2rem; padding-right:2rem; }
}
@media (min-width:768px){
  .md\:grid-cols-2 { grid-template-columns:repeat(2,1fr); }
  .md\:grid-cols-3 { grid-template-columns:repeat(3,1fr); }
}
@media (min-width:640px){
  .sm\:px-6 { padding-left:1.5rem; padding-right:1.5rem; }
}

/* Container + spacing utilities mirroring Tailwind used layout */
.max-w-5xl{max-width:64rem;} .max-w-6xl{max-width:72rem;} .max-w-7xl{max-width:80rem;}
.mx-auto{margin-left:auto; margin-right:auto;}
.px-4{padding-left:1rem; padding-right:1rem;}
.py-12{padding-top:3rem; padding-bottom:3rem;} .py-16{padding-top:4rem; padding-bottom:4rem;} .py-20{padding-top:5rem; padding-bottom:5rem;} .py-24{padding-top:6rem; padding-bottom:6rem;}
.pt-8{padding-top:2rem;} .mt-8{margin-top:2rem;} .pt-12{padding-top:3rem;} .pb-12{padding-bottom:3rem;}


@media (max-width:768px){

  .platform-features-grid { 
    grid-template-columns:1fr !important; 
    gap:0.75rem !important; 
    max-width:300px !important; 
    margin:0 auto !important; 
  }

  .hero h1 { font-size:2.5rem !important; }
  .hero p.lead { font-size:1.1rem !important; }
  .hero-swoop { width:100% !important; border-radius:0 0 0 40px !important; }
  .hero-content { padding-right:2rem !important; max-width:none !important; margin-left:1rem !important; margin-right:1rem !important; }
  .hero .wrapper { padding-left:1rem !important; padding-right:1rem !important; }

  .nav { gap:1.5rem !important; }
  .nav a { font-size:0.95rem !important; }

  .benefits-timeline { gap:2rem !important; }
  .benefit-step { gap:1.5rem !important; }

  .form-panel { padding:1.5rem !important; }
  .button { padding:0.75rem 1.25rem !important; font-size:0.9rem !important; }
}


.solution-cards { align-items:stretch; }
.solution-card { position:relative; background:rgba(255,255,255,.20); border:1px solid rgba(255,255,255,.28); border-radius:1.5rem; padding:2.5rem 2.25rem 2.75rem; backdrop-filter:blur(10px); display:flex; flex-direction:column; gap:1.75rem; box-shadow:0 8px 32px -12px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.08) inset; }
.solution-card:before { content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(140deg, rgba(255,255,255,.06), transparent 60%); pointer-events:none; }
.solution-card.owner { background:linear-gradient(135deg, rgba(37,99,235,.30), rgba(37,99,235,.16)); }
.solution-card.contractor { background:linear-gradient(135deg, rgba(5,150,105,.30), rgba(5,150,105,.16)); }
.solution-label { display:inline-block; font-size:1rem; letter-spacing:.14em; font-weight:800; text-transform:uppercase; padding:0.7rem 1.4rem; border-radius:999px; background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.3); backdrop-filter:blur(6px); box-shadow:0 8px 18px -8px rgba(0,0,0,.4), 0 0 0 1px rgba(15,23,42,.06); }
.solution-label.owner { background:linear-gradient(135deg,#2563eb,#1d4ed8); border:none; }
.solution-label.contractor { background:linear-gradient(135deg,#059669,#047857); border:none; }
.solution-head { margin:0; font-size:1.9rem; font-weight:800; line-height:1.1; color:#fff; text-shadow:0 3px 10px rgba(0,0,0,.35); letter-spacing:-0.01em; }
.solution-features { list-style:none; margin:0; padding:0; display:grid; gap:0.95rem; }
.solution-features li { position:relative; padding-left:2.1rem; line-height:1.5; }
.solution-features li:before { content:""; position:absolute; left:0; top:0.15rem; width:1.35rem; height:1.35rem; border-radius:50%; background:conic-gradient(from 210deg at 50% 50%, #06d6a0, #059669 40%, #047857 75%, #06d6a0); box-shadow:0 0 0 2px rgba(255,255,255,.25), 0 4px 8px -2px rgba(0,0,0,.55); outline:2px solid rgba(255,255,255,.15); outline-offset:1px; }
.solution-card.owner .solution-features li:before { background:conic-gradient(from 210deg at 50% 50%, #60a5fa, #2563eb 40%, #1d4ed8 75%, #60a5fa); box-shadow:0 0 0 2px rgba(255,255,255,.25), 0 4px 8px -2px rgba(0,0,0,.55); }
.solution-features li:after { content:""; position:absolute; left:0.4rem; top:0.55rem; width:0.55rem; height:0.55rem; background:#ffffff; border-radius:50%; box-shadow:0 0 0 2px rgba(255,255,255,.15); }
.solution-features li strong { display:block; font-size:1.05rem; font-weight:700; letter-spacing:.01em; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.35); }
.solution-features li span { display:block; font-size:0.95rem; color:#e2e8f0; opacity:.98; margin-top:0.2rem; line-height:1.55; }
.solution-card a.button { align-self:flex-start; margin-top:0.5rem; }
@media (max-width:900px){
  .solution-head { font-size:1.65rem; }
  .solution-card { padding:2.25rem 1.75rem 2.5rem; }
}
@media (max-width:640px){
  .solution-cards { gap:2.75rem !important; }
  .solution-card { padding:2rem 1.5rem 2.25rem; }
  .solution-head { font-size:1.55rem; }
  .solution-features li { padding-left:1.85rem; }
  .solution-features li:before { width:1.15rem; height:1.15rem; top:0.25rem; }
}

@media (min-width:1024px){
  .solution-card .solution-head{ min-height:4.4rem; }
}


.hero-visual.light .solution-card {
  background:#ffffff !important;
  border:1px solid var(--gray-200) !important;
  box-shadow:var(--shadow);
  backdrop-filter:none;
}
.hero-visual.light .solution-card:before { display:none; }
.hero-visual.light .solution-head { color:#0f172a; text-shadow:none; }
.hero-visual.light .solution-features li strong { color:#0f172a; text-shadow:none; font-size:0.92rem; }
.hero-visual.light .solution-features li span { color:#1f2937; font-size:0.88rem; line-height:1.5; }

/* Global light-hero: ensure definition and readable text on light swoop */
.hero-visual.light .glass-card,
.hero-visual.light .glass-strong {
  background:#ffffff !important;
  border:1px solid var(--gray-200) !important;
  box-shadow:var(--shadow);
  backdrop-filter:none;
}
.hero-visual.light .glass-strong::before { display:none; }
.hero-visual.light .white-heading { color:#0f172a !important; text-shadow:none !important; }
.hero-visual.light .white-text { color:#334155 !important; text-shadow:none !important; }
.hero-visual.light .white-stat { color:#0f172a !important; text-shadow:none !important; }

/* White panels in light hero: ensure definition */
.hero-visual.light .form-panel {
  border-color: var(--gray-200) !important;
  box-shadow: var(--shadow);
}

/* Stronger definition for white cards across pages: black outline + deeper shadow */
.form-panel,
.card,
.comparison-stat,
.stats-group,
.hero-visual.light .solution-card,
.hero-visual.light .glass-card,
.hero-visual.light .glass-strong,
.hero-visual.light .form-panel,
.hero-visual.light .comparison-stat,
.hero-visual.light .stats-group {
  border-color:#000 !important;
  /* Outer depth + inner crisp outline */
  box-shadow: 0 24px 48px -16px rgba(0,0,0,.45), 0 8px 16px -8px rgba(0,0,0,.35), 0 0 0 1px #000 inset !important;
}

/* How It Works: timeline/readability on light swoop */
.hero-visual.light .benefit-content h3 { color:#0f172a; text-shadow:none; }
.hero-visual.light .benefit-content p { color:#334155; text-shadow:none; }
.hero-visual.light .benefit-highlight {
  /* Stronger definition for the highlight pill on light backgrounds */
  color:#0f172a;
  background:#ffffff;
  border:1px solid #94a3b8; /* slightly darker outline for visibility */
  box-shadow:0 8px 20px -12px rgba(15,23,42,.24), 0 2px 6px -3px rgba(15,23,42,.08), 0 0 0 1px rgba(255,255,255,.8) inset;
  border-radius:0.65rem;
  font-weight:700;
  display:block; /* ensure it appears below the preceding text */
  width:max-content; /* keep pill sized to content */
  max-width:100%; /* prevent overflow on small screens */
}
/* Improve readability for the descriptive sentence under each step on light hero */
.hero-visual.light .benefit-content p:not(.benefit-highlight){
  color:#0f172a; /* darker text for contrast */
  font-size:1rem;
  line-height:1.6;
  background:#ffffff;
  border:1px solid #e2e8f0; /* light slate border */
  border-radius:0.5rem;
  padding:0.5rem 0.75rem;
  display:inline-block; /* wrap to content like a pill */
  box-shadow:0 8px 18px -14px rgba(15,23,42,.28), 0 2px 4px -2px rgba(15,23,42,.06);
}

.hero-visual.light .traditional-path-card h3,
.hero-visual.light .modemo-path-card h3 { color:#0f172a !important; text-shadow:none !important; }
.hero-visual.light .traditional-path-card p,
.hero-visual.light .modemo-path-card p { color:#334155 !important; text-shadow:none !important; }


.hero-visual.light .traditional-path-card h3,
.hero-visual.light .modemo-path-card h3 {
  color:#ffffff !important;

  text-shadow:
    0 1px 0 rgba(0,0,0,.45),
    0 -1px 0 rgba(0,0,0,.45),
    1px 0 0 rgba(0,0,0,.45),
    -1px 0 0 rgba(0,0,0,.45),
    0 2px 6px rgba(0,0,0,.35) !important;
  -webkit-text-stroke: 0.4px rgba(0,0,0,.35);
}



@media (max-width:480px){

  .platform-overview-hero { 
    padding:2rem 0 0 !important; 
  }
  .platform-overview-hero h2 { 
    font-size:1.4rem !important; 
  }
  .platform-overview-hero p { 
    font-size:0.95rem !important; 
  }
  .feature-item span:first-child { 
    font-size:1rem !important; 
  }

  .hero h1 { font-size:2rem !important; }
  .hero p.lead { font-size:1rem !important; }
  .hero-swoop { border-radius:0 0 0 30px !important; }
  .hero-content { padding-right:1.5rem !important; max-width:none !important; margin-left:0.75rem !important; margin-right:0.75rem !important; }
  .hero .wrapper { padding-left:0.75rem !important; padding-right:0.75rem !important; }

  .logo-img { height:36px !important; }


  .nav { gap:1rem !important; }
  .nav a { font-size:0.85rem !important; }

  .benefits-timeline { gap:1.5rem !important; margin-bottom:2rem !important; }
  .benefit-node { width:3rem !important; height:3rem !important; font-size:1.25rem !important; }

  .wrapper { padding:0 0.75rem !important; }
}