:root{
  --brand:#38bdf8;
  --brand-deep:#1274a8;
  --brand-soft:#dff5ff;
  --ink:#0f172a;
  --ink-soft:#334155;
  --mist:#e2e8f0;
  --panel:#ffffff;
}

/* Global texture and subtle metallic separators */
.brand-gradient{background-image:linear-gradient(135deg,rgba(56,189,248,.96),rgba(18,116,168,.96))}
.aspect-16-9{aspect-ratio:16/9}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(circle at 0% 0%, rgba(56,189,248,.08), transparent 22%),
    radial-gradient(circle at 100% 0%, rgba(167,139,250,.05), transparent 18%);
}

.site-noise{
  position:relative;
}
.site-noise::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:linear-gradient(135deg, rgba(148,163,184,.03) 25%, transparent 25%, transparent 50%, rgba(148,163,184,.03) 50%, rgba(148,163,184,.03) 75%, transparent 75%, transparent);
  background-size:24px 24px;
  opacity:.45;
}

.section-divider{
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(148,163,184,.42), transparent);
}

.section-shell{
  position:relative;
}
.section-shell::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:120px;
  height:1px;
  background:linear-gradient(90deg, rgba(56,189,248,.55), rgba(148,163,184,0));
}

.hero-panel{
  background:
    linear-gradient(135deg, rgba(15,23,42,.98), rgba(22,32,51,.92)),
    linear-gradient(210deg, rgba(56,189,248,.06), rgba(167,139,250,.04));
  border:1px solid rgba(148,163,184,.18);
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset, 0 24px 80px rgba(15,23,42,.28);
}

.carousel-overlay{
  position:static;
  padding:.85rem 1rem;
  z-index:1;
  color:#e2e8f0;
  border:1px solid rgba(148,163,184,.12);
  border-radius:14px;
  backdrop-filter:blur(10px);
  background:linear-gradient(135deg, rgba(15,23,42,.84), rgba(30,41,59,.72));
}
.carousel-overlay .title{font-weight:700;letter-spacing:-.01em}
.carousel-overlay .caption{font-size:.875rem;color:#cbd5e1}

/* Keep gradients restrained and low-saturation */
.gradient-1{background-image:linear-gradient(135deg, rgba(15,23,42,.96), rgba(18,116,168,.92))}
.gradient-2{background-image:linear-gradient(135deg, rgba(30,41,59,.96), rgba(56,189,248,.88))}
.gradient-3{background-image:linear-gradient(135deg, rgba(15,23,42,.98), rgba(51,65,85,.94))}
.gradient-4{background-image:linear-gradient(210deg, rgba(56,189,248,.16), rgba(167,139,250,.10))}
.gradient-5{background-image:linear-gradient(210deg, rgba(226,232,240,.96), rgba(255,255,255,.92))}

.about-timeline-tight > .card{margin-top:.6rem;margin-bottom:.6rem;padding:1rem}
.form-table{border-collapse:separate;border-spacing:0;width:100%}
.form-table td{border-top:1px solid #e5e7eb}
.nav-link{color:var(--ink);position:relative}
.nav-link:hover{color:var(--brand-deep)}

/* Shared component refinements */
.btn-primary,
.btn-secondary,
.input,
.card,
.badge{
  transition:all .2s ease;
}

.btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background-image:linear-gradient(135deg, rgba(29,158,216,.96), rgba(18,116,168,.96));
  color:#fff;
  border-radius:.5rem;
  padding:.75rem 1.15rem;
  font-weight:500;
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 16px 30px rgba(15,23,42,.14);
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 18px 36px rgba(15,23,42,.16);
}

.btn-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background-color:rgba(255,255,255,.88);
  color:var(--ink);
  border:1px solid rgba(148,163,184,.32);
  border-radius:.5rem;
  padding:.75rem 1.15rem;
  box-shadow:0 1px 0 rgba(255,255,255,.85) inset, 0 12px 24px rgba(15,23,42,.05);
}
.btn-secondary:hover{
  transform:translateY(-2px);
  border-color:rgba(56,189,248,.28);
}

.input{
  width:100%;
  border:1px solid rgba(203,213,225,.95);
  border-radius:.5rem;
  padding:.75rem .9rem;
  background:rgba(255,255,255,.92);
  box-shadow:0 1px 0 rgba(255,255,255,.88) inset, 0 8px 18px rgba(15,23,42,.04);
}

.section{padding-top:2rem;padding-bottom:2rem}
.hero{background-image:radial-gradient(circle at top left, rgba(56,189,248,.12), transparent 20%),radial-gradient(circle at bottom right, rgba(167,139,250,.08), transparent 24%)}

.card{
  border:1px solid rgba(226,232,240,.92);
  border-radius:1rem;
  background-color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.82) inset, 0 18px 40px rgba(15,23,42,.08), 0 4px 12px rgba(15,23,42,.04);
}
.card.p-6{padding:1.5rem}
.badge{
  display:inline-flex;
  align-items:center;
  border-radius:4px;
  padding:.18rem .55rem;
  font-size:.7rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  background-color:var(--brand-soft);
  color:var(--brand-deep);
}
.muted{color:#475569}

@media (max-width: 768px){
  .carousel-overlay{
    padding:.7rem .8rem;
    border-radius:12px;
  }
  .section{
    padding-top:1.25rem;
    padding-bottom:1.25rem;
  }
}