:root {
  --paper: #f4f1e9;
  --ink: #1b201f;
  --muted: #5f6865;
  --line: rgba(27, 32, 31, 0.17);
  --accent: #1f6d8b;
  --heading: "Space Grotesk", sans-serif;
  --body: "Inter", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--paper); color: var(--ink); font-family: var(--body); line-height: 1.65; }
img { width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.demo-container { width: min(calc(100% - 48px), 1280px); margin-inline: auto; }

.demo-topbar {
  position: fixed; inset: 0 0 auto; z-index: 20;
  background: rgba(244,241,233,.9); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.demo-nav { min-height: 74px; display: flex; align-items: center; gap: 28px; }
.demo-logo { font-family: var(--heading); font-weight: 700; font-size: 19px; margin-right: auto; }
.demo-nav a { font-size: 13px; font-weight: 600; }
.demo-back { color: var(--accent); }

.demo-hero { min-height: 100vh; display: grid; align-items: end; padding: 130px 0 55px; position: relative; overflow: hidden; }
.demo-hero-image { position: absolute; inset: 0; z-index: -2; }
.demo-hero-image img { height: 100%; object-fit: cover; }
.demo-hero::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(to top,rgba(10,14,14,.78),rgba(10,14,14,.05) 72%); }
.demo-hero-content { max-width: 900px; color: #fff; }
.demo-kicker { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.demo-hero h1 { margin-top: 18px; font-family: var(--heading); font-size: clamp(58px,8vw,112px); font-weight: 500; line-height: .94; letter-spacing: -.065em; }
.demo-hero p { max-width: 650px; margin-top: 24px; font-size: 18px; color: rgba(255,255,255,.84); }

.demo-section { padding: 110px 0; }
.demo-intro { display:grid; grid-template-columns:.7fr 1.3fr; gap:70px; border-top:1px solid var(--line); padding-top:35px; }
.demo-label { color:var(--accent); font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.demo-intro h2, .demo-feature h2 { font-family:var(--heading); font-size:clamp(42px,5vw,72px); line-height:1.02; letter-spacing:-.055em; font-weight:500; }
.demo-copy { max-width:630px; color:var(--muted); font-size:17px; }
.demo-gallery { display:grid; grid-template-columns:1.25fr .75fr; gap:22px; margin-top:70px; }
.demo-gallery img { height:560px; object-fit:cover; }
.demo-gallery .stack { display:grid; gap:22px; }
.demo-gallery .stack img { height:269px; }
.demo-feature { background:#182129; color:#fff; }
.demo-feature-grid { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:80px; }
.demo-feature p { margin-top:24px; color:rgba(255,255,255,.68); font-size:17px; }
.demo-feature img { height:620px; object-fit:cover; }
.demo-list { margin-top:38px; border-top:1px solid rgba(255,255,255,.17); }
.demo-list div { display:flex; justify-content:space-between; gap:25px; padding:18px 0; border-bottom:1px solid rgba(255,255,255,.17); }
.demo-list span { color:rgba(255,255,255,.55); }
.demo-cta { padding:95px 0; background:var(--accent); color:#fff; text-align:center; }
.demo-cta h2 { font-family:var(--heading); font-size:clamp(40px,5vw,68px); line-height:1.04; letter-spacing:-.05em; font-weight:500; }
.demo-cta a { display:inline-flex; margin-top:30px; padding:15px 24px; background:#182129; border-radius:5px; font-weight:700; }

@media(max-width:800px){
  .demo-container{width:min(calc(100% - 32px),1280px)}
  .demo-nav a:not(.demo-back){display:none}
  .demo-intro,.demo-feature-grid,.demo-gallery{grid-template-columns:1fr}
  .demo-gallery img,.demo-gallery .stack img,.demo-feature img{height:420px}
  .demo-section{padding:78px 0}
  .demo-hero h1{font-size:55px}
}