:root{
  --ink:#0b0c10;
  --paper:#f4f3f1;
  --muted: rgba(11,12,16,.62);
  --hair: rgba(11,12,16,.10);

  --rXL: 34px;
  --soft: 0 16px 40px rgba(0,0,0,.12);
  --shadow: 0 28px 80px rgba(0,0,0,.18);

  --ease: cubic-bezier(.16, 1, .3, 1); /* more “Apple” */
  --slow: 820ms;
  --slower: 1200ms;
  --max: 1120px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Display","SF Pro Text",
               "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow:hidden;
}
a{ color:inherit; text-decoration:none; }

/* Pages */
.pages{
  height: 100vh;
  overflow-y: auto;
  scroll-snap-type: y proximity; /* softer; Lenis handles the real smoothness */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.page{
  height: 100vh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  position: relative;
  display:grid;
  place-items:center;
  overflow:hidden;
}

.wrap{ width: min(var(--max), calc(100% - 44px)); margin:0 auto; position:relative; z-index:2; }

.bg{ position:absolute; inset:-20%; z-index:0; transform: translateZ(0); filter: blur(12px) saturate(1.05); opacity:.95; }
.bg.bg-1{
  background:
    radial-gradient(900px 650px at 20% 20%, rgba(111,208,162,.22), transparent 60%),
    radial-gradient(900px 650px at 80% 22%, rgba(139,125,255,.18), transparent 60%),
    radial-gradient(900px 700px at 55% 86%, rgba(102,183,255,.18), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0));
}
.bg.bg-2{
  background:
    radial-gradient(900px 650px at 25% 30%, rgba(255,107,107,.18), transparent 62%),
    radial-gradient(900px 650px at 75% 25%, rgba(102,183,255,.16), transparent 62%),
    radial-gradient(800px 600px at 55% 80%, rgba(111,208,162,.14), transparent 62%),
    linear-gradient(180deg, rgba(245,245,245,.10), rgba(0,0,0,0));
}
.bg.bg-3{
  background:
    radial-gradient(900px 700px at 60% 35%, rgba(139,125,255,.20), transparent 62%),
    radial-gradient(900px 650px at 20% 60%, rgba(111,208,162,.14), transparent 62%),
    linear-gradient(180deg, rgba(10,12,16,.85), rgba(10,12,16,.85));
  filter: blur(0px) saturate(1);
  opacity: 1;
}
.bg.bg-4{
  background:
    radial-gradient(900px 650px at 25% 25%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(900px 650px at 75% 30%, rgba(102,183,255,.16), transparent 62%),
    radial-gradient(900px 650px at 50% 85%, rgba(255,107,107,.12), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0));
}

.noise{
  position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  mix-blend-mode: multiply;
}

.stage{
  border-radius: var(--rXL);
  border: 1px solid rgba(11,12,16,.08);
  background: rgba(255,255,255,.46);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
  overflow:hidden;
}

/* Top */
.top{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding: 16px 18px; }
.brand{ display:flex; align-items:center; gap:10px; font-weight:780; letter-spacing:-.02em; font-size:14px; }
.brandDot{
  width:10px; height:10px; border-radius:999px;
  background: linear-gradient(135deg, rgba(111,208,162,.95), rgba(139,125,255,.95));
  box-shadow: 0 14px 40px rgba(111,208,162,.22);
}
.nav{
  display:flex; gap:12px; align-items:center;
  font-size:13px; letter-spacing:-.01em; color: rgba(11,12,16,.70);
  padding:6px; border-radius:999px;
  border: 1px solid rgba(11,12,16,.08);
  background: rgba(255,255,255,.40);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.nav a{ padding:10px 12px; border-radius:999px; transition: background var(--slow) var(--ease), transform var(--slow) var(--ease); }
.nav a:hover{ background: rgba(11,12,16,.04); transform: translateY(-1px); }
@media (max-width: 900px){ .nav{ display:none; } }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: 12px 14px; border-radius: 999px;
  border: 1px solid rgba(11,12,16,.10);
  background: rgba(255,255,255,.56);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--soft);
  font-weight: 740;
  font-size: 13px;
  letter-spacing: -0.02em;
  transition: transform var(--slow) var(--ease), box-shadow var(--slow) var(--ease), background var(--slow) var(--ease);
  user-select:none;
  cursor:pointer;
}
.btn:hover{ transform: translateY(-2px); box-shadow: 0 20px 55px rgba(0,0,0,.14); background: rgba(255,255,255,.64); }
.btn:active{ transform: translateY(0px) scale(.98); }
.btnDark{
  background: rgba(10,12,16,.92);
  border-color: rgba(10,12,16,.86);
  color: rgba(255,255,255,.92);
  box-shadow: 0 18px 55px rgba(0,0,0,.22);
}
.btnDark:hover{ background: rgba(10,12,16,.96); }

/* Type */
h1{ margin:0; font-size: clamp(42px, 5.2vw, 72px); line-height: 1.01; letter-spacing: -0.06em; font-weight: 840; }
.lead{ margin: 12px 0 0; font-size: 15px; line-height: 1.55; letter-spacing: -0.01em; color: var(--muted); max-width: 62ch; }
h2{ margin:0; font-size: 16px; font-weight: 820; letter-spacing: -0.02em; }
.small{ margin: 6px 0 0; font-size: 13px; line-height: 1.5; letter-spacing: -0.01em; color: var(--muted); }

/* Reveal */
.reveal{ opacity: 0; transform: translateY(14px); transition: opacity var(--slower) var(--ease), transform var(--slower) var(--ease); }
.reveal.on{ opacity: 1; transform: translateY(0); }

/* Layouts */
.hero{
  padding: 6px 18px 20px;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px;
  align-items: stretch;
}
@media (max-width: 900px){ .hero{ grid-template-columns: 1fr; } }

.heroText{
  padding: 22px;
  border-radius: var(--rXL);
  border: 1px solid rgba(11,12,16,.08);
  background: rgba(255,255,255,.46);
}

.actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 16px; }

.heroVisual{
  position: relative;
  border-radius: var(--rXL);
  border: 1px solid rgba(11,12,16,.08);
  background: rgba(255,255,255,.36);
  overflow:hidden;
  min-height: 330px;
}
.fadeImg{
  position:absolute; inset:0; width:100%; height:100%; object-fit: cover;
  opacity:0; transform: scale(1.03);
  transition: opacity var(--slower) var(--ease), transform 1400ms var(--ease);
}
.fadeImg.loaded{ opacity:1; transform: scale(1); }

.object{
  position:absolute;
  left: 50%; top: 52%;
  transform: translate(-50%,-50%);
  width: min(520px, 92%);
  aspect-ratio: 16/11;
  border-radius: 34px;
  background:
    radial-gradient(120% 100% at 20% 20%, rgba(255,255,255,.70), rgba(255,255,255,.12) 55%, transparent 70%),
    linear-gradient(135deg, rgba(11,12,16,.18), rgba(11,12,16,.05)),
    radial-gradient(100% 120% at 60% 60%, rgba(111,208,162,.26), transparent 55%),
    radial-gradient(100% 120% at 35% 70%, rgba(139,125,255,.22), transparent 55%),
    radial-gradient(100% 120% at 70% 30%, rgba(102,183,255,.22), transparent 55%);
  box-shadow: 0 40px 90px rgba(0,0,0,.18);
  filter: saturate(1.05);
}

/* Tiles */
.tile{
  position:absolute; width:170px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.30);
  background: linear-gradient(180deg, rgba(255,255,255,.66), rgba(255,255,255,.40));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 22px 65px rgba(0,0,0,.14);
  padding: 14px;
  opacity:0; transform: translateY(12px);
  transition: opacity var(--slower) var(--ease), transform var(--slower) var(--ease);
}
.tile.on{ opacity:1; transform: translateY(0); }
.tile small{ display:block; color: rgba(11,12,16,.58); font-size:12px; margin-bottom:8px; }
.tile .tTitle{ font-weight: 820; letter-spacing: -0.02em; font-size: 13px; margin-bottom:4px; }
.tile .tDesc{ color: rgba(11,12,16,.62); font-size: 12px; line-height: 1.35; }
.t1{ left: 8%; top: 16%; }
.t2{ left: 58%; top: 12%; }
.t3{ left: 66%; top: 62%; }

.content{ padding: 0 18px 18px; }
.panel{
  padding: 18px;
  border-radius: var(--rXL);
  border: 1px solid rgba(11,12,16,.08);
  background: rgba(255,255,255,.46);
  margin: 0 0 14px;
}
.list{ border-top: 1px solid var(--hair); }
.row{
  display:grid;
  grid-template-columns: 1.05fr .95fr auto;
  gap: 12px;
  padding: 16px 2px;
  border-bottom: 1px solid var(--hair);
  align-items:center;
}
@media (max-width: 760px){ .row{ grid-template-columns: 1fr; } }
.title{ font-weight: 840; letter-spacing:-.02em; font-size:14px; }
.desc{ color: var(--muted); font-size:13px; line-height:1.4; letter-spacing:-.01em; }
.tags{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
@media (max-width: 760px){ .tags{ justify-content:flex-start; } }
.tag{
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(11,12,16,.10);
  background: rgba(255,255,255,.48);
  color: rgba(11,12,16,.72);
}

.foot{
  padding: 14px 18px 18px;
  border-top: 1px solid rgba(11,12,16,.10);
  color: rgba(11,12,16,.62);
  font-size: 12px;
  letter-spacing: -0.01em;
  display:flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* Dark page */
.dark{ color: rgba(255,255,255,.92); }
.dark .stage{ background: rgba(10,12,16,.72); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 30px 90px rgba(0,0,0,.35); }
.dark .muted{ color: rgba(255,255,255,.62); }
.dark .heroText{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.10); }
.dark .btn{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: rgba(255,255,255,.88); }
.dark .btnDark{ background: rgba(255,255,255,.92); color: rgba(10,12,16,.92); border-color: rgba(255,255,255,.85); }
.dark .foot{ border-top: 1px solid rgba(255,255,255,.10); color: rgba(255,255,255,.55); }
.bigWord{ font-size: clamp(54px, 9vw, 120px); letter-spacing: -0.08em; font-weight: 900; line-height: .88; margin: 0; opacity: .95; }

/* Dots */
.dots{
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  display:flex;
  flex-direction: column;
  gap: 10px;
  z-index: 50;
  padding: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.35);
  border: 1px solid rgba(11,12,16,.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.dotBtn{
  width: 10px; height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(11,12,16,.20);
  background: rgba(11,12,16,.14);
  cursor:pointer;
  transition: transform var(--slow) var(--ease), background var(--slow) var(--ease);
}
.dotBtn.active{ background: rgba(11,12,16,.65); transform: scale(1.25); }
@media (max-width: 720px){ .dots{ right: 10px; } }