/* === Variables & base === */
:root{
  --bg:#070707;
  --panel:#111;
  --muted:#9aa0a6;
  --accent:#eee;
  --glass: rgba(255,255,255,0.04);
  --transition: 400ms cubic-bezier(.2,.9,.25,1);
  --max-width:1200px;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;color:var(--accent);background:linear-gradient(180deg,#0b0b0b 0%, #050505 100%);-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}

/* subtle vignette */
.app::before{
  content:""; position:fixed; inset:0; z-index:0;
  background:
    radial-gradient(1200px 400px at 50% 10%, rgba(255,255,255,0.02), transparent 8%),
    radial-gradient(900px 600px at 50% 90%, rgba(0,0,0,0.7), rgba(0,0,0,0.95));
  pointer-events:none;
}

/* =======================
   Topbar (sticky)
   ======================= */
.topbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  padding:18px 28px;
  backdrop-filter: blur(8px);
  background: linear-gradient(180deg, rgba(10,10,10,0.55), rgba(5,5,5,0.25));
  border-bottom: 1px solid rgba(255,255,255,0.02);
  box-shadow: 0 6px 20px rgba(0,0,0,0.45);
}

/* shrink topbar on scroll (js adds .scrolled) */
.topbar.scrolled{ padding:12px 20px; transform:translateZ(0); }

/* left */
.topbar__left{ display:flex; flex-direction:column; gap:3px; min-width:160px; }
.name{ font-weight:700; font-size:16px; color:var(--accent); }
.role{font-size:12px; color:var(--muted);}

/* center tabs */
.tabs{ display:flex; align-items:center; gap:8px; margin:0 auto; }
.tabs__btn{
  background:transparent; border:0; color:var(--muted); padding:8px 18px; border-radius:20px; font-weight:700; cursor:pointer;
  transition: all 220ms ease; font-size:13px;
}
.tabs__btn:hover{ color:var(--accent); transform:translateY(-1px); }
.tabs__btn.active{ background:var(--glass); color:var(--accent); box-shadow: 0 6px 18px rgba(0,0,0,0.6); }

/* right */
.topbar__right{ display:flex; gap:18px; font-size:13px; }
.link{ color:var(--muted); text-decoration:none; }
.link:hover{ color:var(--accent); text-decoration:underline; }

/* ============ Stage / Browser =========== */
.stage{ display:flex; justify-content:center; align-items:flex-start; padding:28px 20px 80px; min-height:calc(100vh - 80px); position:relative; z-index:10; }

.browser{
  width:min(var(--max-width),96%);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.03);
  box-shadow: 0 60px 120px rgba(0,0,0,0.8);
  overflow:hidden;
  display:flex; flex-direction:column;
}

/* chrome top */
.browser__chrome{ display:flex; align-items:center; gap:12px; padding:12px 16px; height:56px; background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.02)); border-bottom:1px solid rgba(255,255,255,0.02); }
.browser__dots{ display:flex; gap:8px; }
.dot{ width:12px; height:12px; border-radius:50%; box-shadow: 0 4px 8px rgba(0,0,0,0.6); }
.dot.close{ background:#ff6b6b; }
.dot.min{ background:#f7d154; }
.dot.max{ background:#4cd964; }
.browser__address{ flex:1; height:14px; border-radius:6px; background:rgba(255,255,255,0.02); }
.browser__plus{ width:32px; text-align:center; color:rgba(255,255,255,0.08); font-weight:700}

/* content */
.browser__content{ display:block; position:relative; padding:36px 48px 56px; min-height:420px; }

/* hero inner horizontally groups headline + meta and grid */
.hero__inner{ display:flex; gap:24px; align-items:flex-start; justify-content:space-between; position:relative; margin-bottom:28px; }

/* headline */
.headline{ max-width:780px; position:relative; z-index:2; }
.headline h1{ margin:0; font-size:84px; line-height:0.95; font-weight:800; letter-spacing:-1px; color:#fff; text-shadow: 0 12px 36px rgba(0,0,0,0.8); }
.headline__ghost{ position:absolute; left:8px; top:10px; font-size:86px; color:rgba(255,255,255,0.06); transform:skewX(-6deg); filter: blur(6px); pointer-events:none; }

.stories{ font-family:"Playfair Display", serif; font-style:italic; font-weight:700; background: linear-gradient(90deg,#fff,#dcdcdc); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

/* meta */
.meta{ min-width:240px; max-width:320px; text-align:right; color:var(--muted); align-self:flex-end; margin-top:28px; }
.meta__primary{ color:var(--accent); font-weight:600; margin-bottom:6px; }
.meta__secondary{ color:rgba(255,255,255,0.4); font-size:13px; }

/* Fix overlap: ensure hero has enough vertical space and grid pushed below on small viewports */
.grid-wrap{ margin-top:12px; position:relative; z-index:1; }

/* grid */
.grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; align-items:start; }
.card{
  background: linear-gradient(180deg, rgba(255,255,255,0.015), rgba(0,0,0,0.06));
  border-radius:12px; padding:14px; overflow:hidden; min-height:150px; display:flex; flex-direction:column;
  transition: transform 260ms ease, box-shadow 260ms ease, opacity 320ms ease;
  cursor:pointer; border:1px solid rgba(255,255,255,0.03);
}
.card:hover{ transform: translateY(-8px); box-shadow: 0 18px 40px rgba(0,0,0,0.6); }
.card__img{ width:100%; height:140px; border-radius:8px; background-size:cover; background-position:center; margin-bottom:10px; flex-shrink:0; }
.card__title{ font-weight:700; margin:0 0 6px 0; font-size:16px; color:var(--accent); }
.card__desc{ font-size:13px; color:var(--muted); margin:0; flex:1; }

/* reveal animation helpers */
.reveal{ opacity:0; transform:translateY(18px); transition: opacity 520ms var(--transition), transform 520ms var(--transition); }
.reveal.in{ opacity:1; transform:none; }

/* detail overlay */
.detail-overlay{
  position:fixed; inset:0; background:rgba(3,3,3,0.72); display:flex; align-items:center; justify-content:center; z-index:60; opacity:0; pointer-events:none; transition: opacity 360ms ease;
}
.detail-overlay.open{ opacity:1; pointer-events:auto; }
.detail-card{ width:min(920px,94%); background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.06)); border-radius:14px; padding:18px; display:flex; gap:18px; align-items:flex-start; transform:translateY(18px); transition: transform 360ms cubic-bezier(.2,.9,.25,1); }
.detail-overlay.open .detail-card{ transform:none; }

/* close */
.detail-close{ position:absolute; right:28px; top:26px; background:transparent; border:0; color:var(--accent); font-size:20px; cursor:pointer; }

/* detail media */
.detail-media{ width:48%; min-height:260px; background-size:cover; background-position:center; border-radius:10px; flex-shrink:0; }
.detail-body{ padding:6px 12px; width:52%; }
.detail-body h2{ margin:0 0 12px 0; font-size:22px; }
.detail-body p{ color:var(--muted); line-height:1.45; }

.detail-links{
  margin-top:12px;
  padding-left:16px;
}
.detail-links li{
  margin-bottom:6px;
  font-size:14px;
}
.detail-links a{
  color: var(--accent);
  text-decoration:underline;
}
.detail-links a:hover{
  color:#fff;
}

/* down arrow */
.down-arrow{ text-align:center; font-size:20px; color:rgba(255,255,255,0.14); margin-top:18px; }

/* ========== Responsive ========== */
@media (max-width:1100px){
  .grid{ grid-template-columns: repeat(2,1fr); }
  .headline h1{ font-size:60px; }
  .headline__ghost{ font-size:62px; left:6px; top:6px; }
  .meta{ display:block; position:relative; text-align:left; margin-top:14px; }
  .hero__inner{ flex-direction:column; align-items:flex-start; gap:12px; }
  .detail-card{ flex-direction:column; align-items:stretch; }
  .detail-media{ width:100%; height:220px; }
  .detail-body{ width:100%; }
}

@media (max-width:640px){
  .topbar{ padding:12px 14px; }
  .tabs{ gap:6px; }
  .tabs__btn{ padding:8px 12px; font-size:12px; }
  .headline h1{ font-size:34px; line-height:1.02; }
  .headline__ghost{ display:none; }
  .grid{ grid-template-columns:1fr; gap:14px; }
  .browser__content{ padding:20px; }
  .card__img{ height:160px; }
  .meta{ display:block; }
}

/* small additional polish */
body, button, a { -webkit-tap-highlight-color: transparent; }