:root{
  --bg:#0b0b0c;
  --fg:#fafafa;
  --muted:#b6b6b6;
  --accent:#e10600;
  --card:#121214;
  --border:#1e1e20;
}
html,body{height:100%;scroll-behavior:smooth;}
body{
  background: var(--bg);
  color: var(--fg);
  font-family: 'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial;
  line-height:1.6;
}
/* Subtle grid background */
.bg-grid{
  background-image: linear-gradient(transparent 95%, rgba(255,255,255,.06) 95%),
    linear-gradient(90deg, transparent 95%, rgba(255,255,255,.06) 95%);
  background-size: 24px 24px;
}
.navbar{
  transition: background .3s, box-shadow .3s;
}
.navbar.scrolled{
  background: rgba(10,10,10,.75);
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.hero{
  position:relative;
  padding-top: 5rem;
  padding-bottom: 5rem;
  overflow:hidden;
}
.hero .orb{
  position:absolute; inset:auto -10% -20% auto;
  width:50vmax; height:50vmax; border-radius:50%;
  background: radial-gradient(closest-side, rgba(255,255,255,.06), transparent 65%);
  filter: blur(30px);
  pointer-events:none;
}
h1,h2,h3,h4,h5,h6{
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.1;
}
.lead-hero{color:var(--muted)}

/* Button styles */
.btn-accent{
  background: var(--accent);
  border-color: var(--accent);
}
.btn-accent:hover{filter:brightness(1.1)}
.btn-outline-accent{
  border-color: var(--accent); color:var(--fg);
}
.btn-outline-accent:hover{background:var(--accent);}

/* Sticky stack scrollytelling */

/* Feature cards */
.card-modern{
  background: linear-gradient(180deg, var(--card), #0d0d0f);
  border:1px solid var(--border);
  border-radius: 18px;
  padding: 1.25rem;
  transition: transform .25s ease, box-shadow .25s ease;
}
.card-modern:hover{ transform: translateY(-4px); box-shadow:0 20px 40px rgba(0,0,0,.4) }
.badge{
  background: #151517; color:#eee; border:1px solid var(--border);
}

/* Timeline */
.timeline{ position:relative; }
.timeline::before{
  content:""; position:absolute; left:18px; top:0; bottom:0; width:4px; background:var(--accent);
}
.timeline .step{
  margin-left:60px; margin-bottom:28px; position:relative;
}
.timeline .step::before{
  content:""; position:absolute; left:-48px; top:2px; width:16px; height:16px;
  background: var(--accent); border-radius:50%; box-shadow:0 0 0 6px rgba(225,6,0,.15);
}

/* Showcase slider (no library) */
.showcase{
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr);
  gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:6px;
}
.showcase .tile{
  scroll-snap-align: start;
  border:1px solid var(--border); border-radius:18px; overflow:hidden; background:#0f0f12;
}
.tile .preview{ aspect-ratio:16/10; background:linear-gradient(135deg,#16161a,#0e0e11); display:flex; align-items:center; justify-content:center; font-weight:700; color:#999; letter-spacing:.1em;}
.tile .meta{ padding:14px; }
.tile .meta .title{ font-weight:600; }
a.link{ color:var(--fg); text-decoration: none; border-bottom:1px dashed var(--accent); }
a.link:hover{ color:var(--accent); }

/* Fade-in on view */
.reveal{ opacity:0; transform: translateY(18px); transition: .6s ease all; }
.reveal.in{ opacity:1; transform: none; }

footer{ border-top:1px solid var(--border) }

.small{ font-size:.9rem; color:var(--muted) }

/* Utility */
.maxw-3xl{ max-width:72rem; }

body.spotlight-active > *:not(.sticky-stack-wrapper) {
    opacity: 0.05;
    transition: opacity 0.5s ease-in-out;
}

.logo-scroller {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}

.logo-scroller-inner {
  display: inline-block;
  animation: scroll-left 20s linear infinite;
}

.logo-scroller img {
  height: 50px; /* Adjust as needed */
  margin: 0 20px;
  vertical-align: middle;
}

@keyframes scroll-left {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}
.timeline-col {
  padding-top: 80px; /* Adjust this value as needed */
}
.contact-details-col {
  padding-top: 60px; /* Adjust this value as needed */
}
.timeline .step::before {
  transition: transform 0.2s ease-in-out;
}

.timeline .step:hover::before {
  transform: scale(1.2);
}
.timeline .step h5,
.timeline .step p {
  margin-left: -15px; /* Adjust this value to align with the vertical line */
}
.timeline::after {
  content: "";
  position: absolute;
  left: 12px; /* Same as ::before */
  bottom: -8px; /* Adjust to position it at the end of the line */
  width: 16px;
  height: 16px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 0 6px rgba(225,6,0,.15);
}