/* Legacy Search Capital — production CSS */
:root{
  --bg:#000;
  --fg:#eee;
  --muted:#a0a0a0;
  --brand:#f3f3f3;
  --card:#0a0a0a;
  --accent:#ffffff;
  --radius:20px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", sans-serif;
  background:var(--bg);
  color:var(--fg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.bg-noise{
  position:fixed; inset:0;
  background:
    radial-gradient(1200px 1200px at 80% -10%, #191919 0%, transparent 60%),
    radial-gradient(1000px 800px at -10% 10%, #121212 0%, transparent 70%),
    #000;
  pointer-events:none;
  z-index:-1;
}
.site-header{
  display:flex; align-items:center; justify-content:center;
  padding:24px 20px;
  position:sticky; top:0; z-index:10;
  background:linear-gradient(to bottom, rgba(0,0,0,.75), rgba(0,0,0,0));
  backdrop-filter:saturate(120%) blur(8px);
}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--fg);}
.brand-logo{width:42px; height:42px; object-fit:contain; filter:drop-shadow(0 1px 6px rgba(255,255,255,.05)); border-radius:8px;}
.brand-text{font-weight:800; letter-spacing:.18em; font-size:14px; text-transform:uppercase; opacity:.9}

.main{display:block;}

.hero{
  min-height:calc(100svh - 80px);
  display:grid;
  place-items:center;
  padding:40px 20px 80px;
  position:relative;
  overflow:hidden;
}
.hero-content{max-width:1100px; margin:0 auto; text-align:center;}
.hero-logo{
  width:clamp(260px, 32vw, 440px);  /* bigger, scales on large screens */
  max-width:92vw;
  opacity:1;
  margin:0 auto 24px;
  filter:none;
  image-rendering:-webkit-optimize-contrast;
  transform: scale(0.92);
  animation: logo-zoom 1.2s cubic-bezier(.22,1,.36,1) forwards;
}

@keyframes logo-zoom {
  to {
    transform: scale(1);
  }
}

.hero-title{
  font-family:"Playfair Display", serif;
  letter-spacing:.28em;
  font-weight:600;
  font-size:clamp(18px, 2vw + 12px, 22px);
  color:var(--brand);
  text-transform:uppercase;
  margin:0 0 10px;
}
.hero-sub{
  color:var(--muted);
  font-size:clamp(16px, 1.2vw + 10px, 18px);
  margin:0 auto 28px;
  max-width:820px;
}

.cta-grid{
  display:grid; gap:14px;
  grid-template-columns:repeat(3, minmax(0, 1fr));
}
@media (max-width:900px){
  .cta-grid{grid-template-columns:1fr}
}

.btn{
  --outline: rgba(255,255,255,.2);
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 18px;
  border-radius:var(--radius);
  text-decoration:none; color:var(--fg); font-weight:600;
  border:1px solid var(--outline);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  backdrop-filter: blur(6px);
  position:relative; overflow:hidden;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
  outline-offset:4px;
}
.btn:hover{ transform: translateY(-2px); border-color: rgba(255,255,255,.35); }
.btn:active{ transform: translateY(0); }

.btn.cta{
  font-size:16px; letter-spacing:.02em;
}
.btn.primary{ border-color:#fff; background:linear-gradient(180deg, #fff, #ddd); color:#000; }
.btn.secondary{ background:transparent; }

.card{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.16);
  border-radius:calc(var(--radius) + 6px);
  padding:26px;
  margin:36px auto 0;
  max-width:900px;
}
.interns h2{margin:0 0 8px; font-size:clamp(18px, 1.6vw + 12px, 24px);}
.interns p{margin:0 0 16px; color:var(--muted);}
.intern-actions{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.interns {
  text-align: center;
}
.intern-actions {
  display: flex;
  align-items: center;
  justify-content: center; /* centers the two buttons */
  gap: 12px;
  flex-wrap: wrap;
}


.ticker {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  opacity: .5;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  overflow: hidden;
  height: 32px;
}

.marquee {
  display: flex;
  gap: 40px;
  white-space: nowrap;
  animation: marquee-loop 30s linear infinite;
  font-size: 14px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: #bdbdbd;
}

.marquee span {
  opacity: .8;
  /* Duplicate the ticker items for seamless looping */
}

/* Keyframes for smooth infinite loop */
@keyframes marquee-loop {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
.about{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px;
  padding:64px 20px 120px; max-width:1100px; margin:0 auto;
}
.about-card{background:#0a0a0a; border:1px solid rgba(255,255,255,.1); border-radius:22px; padding:28px;}
.about-card h3{margin:0 0 8px; font-family:"Playfair Display", serif; font-weight:600; letter-spacing:.06em; text-transform:uppercase}
.about-card p{margin:0 0 10px; color:#cfcfcf}
.pill-list{display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:10px 0 0; list-style:none}
.pill-list li{padding:8px 12px; border:1px solid rgba(255,255,255,.12); border-radius:999px; font-size:14px; color:#ddd}
.small{font-size:14px; color:#a8a8a8}

@media (max-width:900px){
  .about{grid-template-columns:1fr; padding-bottom:80px}
}

.site-footer{
  border-top:1px solid rgba(255,255,255,.1);
  text-align:center; padding:28px 16px; color:#9f9f9f; font-size:14px;
}

/* Reveal on scroll */
.reveal{opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease;}
.reveal.is-visible{opacity:1; transform:none}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  .marquee{animation:none}
  .btn{transition:none}
  .reveal{transition:none}
}

/* Button ripple effect */
.btn .ripple{
  position:absolute; border-radius:50%; pointer-events:none;
  transform:scale(0); animation:ripple .6s ease-out;
  background:rgba(255,255,255,.25);
  mix-blend-mode:screen;
}
@keyframes ripple{
  to{ transform:scale(2.6); opacity:0; }
}
