:root{
  --bg:#07070a;
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.64);
  --glass:rgba(18,18,24,.28);
  --stroke:rgba(255,255,255,.28);
  --lime:#E7FE55;
  --pink:#FF4FD8;
  --shadow: 0 18px 60px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background:var(--bg);
  color:var(--text);
  overflow:hidden;
}

/* fullpage scroll */
.pages{height:calc(var(--vh, 1vh) * 100);
  overflow-y:auto;
  scroll-snap-type:y mandatory;
  scroll-behavior:smooth;
  scroll-snap-stop:always;
}
.page{min-height:calc(var(--vh, 1vh) * 100); height:calc(var(--vh, 1vh) * 100); scroll-snap-align:start; position:relative;}

/*
  Page 02 should NOT be skipped.
  Keep snap enabled so it lands on page 02 first.
  (Browsers that support it will also avoid “momentum skipping”.)
*/
.page--2{scroll-snap-align:start; scroll-snap-stop:always;}

/* Extra safety for momentum scroll on some mobile browsers */
.page{scroll-snap-stop:always;}

/* background */
.bg{position:fixed; inset:0; z-index:-5; overflow:hidden;}
.bg{transition:opacity 420ms ease}
html.is-page2 .bg{opacity:.14}
html.is-page3 .bg{opacity:0}
.bgv{position:absolute; inset:-2%; width:104%; height:104%; object-fit:cover; filter:saturate(1.1) contrast(1.05) brightness(.9);}
.bgv--a{opacity:1}
.bgv--b{opacity:0}
.bg.is-b .bgv--a{opacity:0}
.bg.is-b .bgv--b{opacity:1}
.bgv{transition:opacity 900ms cubic-bezier(.2,.7,.2,1)}

.grain{
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
  opacity:.25;
  pointer-events:none;
}
.vignette{
  position:absolute; inset:0;
  background: radial-gradient(1200px 700px at 50% 55%, rgba(0,0,0,0) 0%, rgba(0,0,0,.42) 60%, rgba(0,0,0,.72) 100%);
  pointer-events:none;
}

/* nav */
.nav{
  position:fixed; top:0; left:0; right:0;
  display:flex; align-items:center; gap:20px;
  padding:18px 22px;
  z-index:10;
}
.brand{
  font-weight:700;
  letter-spacing:.18em;
  font-size:13px;
  opacity:.9;
}
.nav__links{display:flex; gap:16px; margin-left:6px;}
.nav__links a{
  color:var(--muted);
  text-decoration:none;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:10px 10px;
  border-radius:999px;
  transition: all .25s ease;
}
.nav__links a:hover{color:var(--text); background:rgba(255,255,255,.06)}

.brief{
  margin-left:auto;
  display:flex; align-items:center; gap:10px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.18);
  color:var(--text);
  padding:10px 14px;
  border-radius:999px;
  cursor:pointer;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:12px;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.brief:hover{transform:translateY(-1px); background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.22)}
.arrow{opacity:.85}

.burger{
  display:none;
  width:44px; height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.18);
  cursor:pointer;
}
.burger span{
  display:block;
  width:18px; height:2px;
  margin:0 auto;
  background:rgba(255,255,255,.85);
  border-radius:3px;
}
.burger span + span{margin-top:6px; opacity:.75}

/* hero */
.hero{
  position:relative;
  height:100vh;
  display:grid;
  place-items:center;
  padding:120px 24px 60px;
}
.liqd{
  font-weight:900;
  letter-spacing:-0.06em;
  font-size:clamp(64px, 16vw, 220px);
  line-height:0.9;
  text-transform:uppercase;

  /* transparent negative */
  color:transparent;
  -webkit-text-stroke: 2px rgba(255,255,255,.72);
  text-stroke: 2px rgba(255,255,255,.72);

  /* subtle glass fill via background-clip */
  background: radial-gradient(1200px 500px at 50% 50%, rgba(255,255,255,.42), rgba(255,255,255,.08) 55%, rgba(255,255,255,0) 72%);
  -webkit-background-clip:text;
  background-clip:text;

  filter: drop-shadow(0 20px 70px rgba(0,0,0,.55));
  user-select:none;
}

.sub{position:absolute; bottom:34px; left:0; right:0; display:flex; justify-content:center; gap:14px; flex-wrap:wrap; padding:0 20px;}
.pill{
  padding:10px 14px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color:rgba(255,255,255,.86);
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:11px;
}
.hint{
  padding:10px 14px;
  border-radius:999px;
  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.72);
  font-size:11px;
  letter-spacing:.02em;
}
.kbd{
  display:inline-block;
  padding:2px 8px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  margin:0 4px;
}

/* scroll cue */
.scrollCue{
  position:absolute;
  left:50%;
  bottom:22px;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:10px;
  opacity:.75;
  pointer-events:none;
}
.scrollCue__line{
  width:54px;
  height:1px;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.65), rgba(255,255,255,0));
  animation: cue 1.8s ease-in-out infinite;
}
.scrollCue__txt{
  font-size:10px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(255,255,255,.7);
}
@keyframes cue{0%{transform:translateX(-10px); opacity:.35}50%{transform:translateX(10px); opacity:.9}100%{transform:translateX(-10px); opacity:.35}}

/* PAGE 02 — system style */
.page--2{
  background:#060608;
}

/* PAGE 03 — PROCESS (white, no canvas) */
.page--3{
  background:#f7f7f7;
  color:#0b0b0f;
}

/* Header inversion on light page */
html.is-page3 .brand{color:rgba(0,0,0,.86)}
html.is-page3 .nav__links a{color:rgba(0,0,0,.62)}
html.is-page3 .nav__links a:hover{color:rgba(0,0,0,.9); background:rgba(0,0,0,.06)}
html.is-page3 .brief{
  background:rgba(255,255,255,.78);
  border-color:rgba(0,0,0,.12);
  color:rgba(0,0,0,.88);
}
html.is-page3 .brief:hover{background:rgba(255,255,255,.92); border-color:rgba(0,0,0,.18)}
html.is-page3 .burger{background:rgba(255,255,255,.78); border-color:rgba(0,0,0,.12)}
html.is-page3 .burger span{background:rgba(0,0,0,.75)}

.page2__type{
  position:absolute;
  inset:0;
  padding:110px 24px 80px;
  display:flex;
  flex-direction:column;
  gap:18px;
  justify-content:flex-start;
  pointer-events:none;
}

.page2__typeRow{
  display:flex;
  flex-wrap:wrap;
  gap:18px 26px;
  align-items:baseline;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:-0.02em;
  line-height:0.92;
  font-size:clamp(42px, 7.6vw, 120px);
}
.page2__typeRow span{
  color:rgba(255,255,255,.96);
  -webkit-text-stroke: 1px rgba(255,255,255,.18);
}
.page2__typeRow .dim{
  color:transparent;
  -webkit-text-stroke: 2px rgba(255,255,255,.28);
}

.page2__ghost{
  position:absolute;
  right:34px;
  top:44%;
  transform:translateY(-50%);
  font-weight:900;
  letter-spacing:-0.02em;
  font-size:clamp(46px, 10vw, 160px);
  color:rgba(255,255,255,.06);
  text-transform:uppercase;
}
.page2__ghost--b{top:66%; right:42px; color:rgba(255,255,255,.045)}

/* PAGE 02 extra animated text (same background, no new windows) */
.page2extra{
  position:absolute;
  left:8vw;
  bottom:76px;
  max-width:min(980px, 84vw);
  z-index:3;
  pointer-events:none;
}
.page2extra__kicker{
  font-size:11px;
  letter-spacing:.24em;
  text-transform:uppercase;
  opacity:.72;
}
.page2extra__lines{
  margin-top:14px;
  display:flex;
  flex-wrap:wrap;
  gap:10px 14px;
  align-items:baseline;
  text-transform:uppercase;
  font-weight:900;
  letter-spacing:-0.02em;
  font-size:clamp(18px, 2.2vw, 28px);
}
.page2extra__lines .w{opacity:.94}
.page2extra__lines .lime{color:var(--lime)}
.page2extra__lines .pink{color:var(--pink)}
.page2extra__lines .dot{
  width:6px; height:6px; border-radius:999px;
  background:rgba(255,255,255,.46);
  transform:translateY(-2px);
}
.page2extra__note{
  margin-top:10px;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.66);
}

/* reveal animation */
.p2reveal{
  opacity:0;
  transform:translateY(18px);
  filter:blur(6px);
  transition:
    opacity 900ms cubic-bezier(.2,.7,.2,1),
    transform 900ms cubic-bezier(.2,.7,.2,1),
    filter 900ms cubic-bezier(.2,.7,.2,1);
}
.p2reveal.is-in{
  opacity:1;
  transform:translateY(0);
  filter:blur(0);
}
.p2reveal .w{display:inline-block; transform:translateY(10px); opacity:0; transition:transform 900ms cubic-bezier(.2,.7,.2,1), opacity 900ms cubic-bezier(.2,.7,.2,1)}
.p2reveal.is-in .w{transform:translateY(0); opacity:1}
.p2reveal.is-in .w:nth-child(1){transition-delay: 40ms}
.p2reveal.is-in .w:nth-child(3){transition-delay: 120ms}
.p2reveal.is-in .w:nth-child(5){transition-delay: 200ms}
.p2reveal.is-in .w:nth-child(7){transition-delay: 280ms}
.p2reveal.is-in .w:nth-child(9){transition-delay: 360ms}


/* page2 content (no white canvas) */
.page2info{
  position:absolute;
  left:8vw;
  right:8vw;
  top:54%;
  transform:translateY(-50%);
  max-width:980px;
  padding-top:10px;
  z-index:2;
}
.page2info__kicker{
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  opacity:.72;
}
.page2info__headline{
  margin-top:18px;
  font-weight:800;
  letter-spacing:-0.02em;
  text-transform:uppercase;
  font-size:clamp(18px, 2.2vw, 26px);
  line-height:1.18;
  max-width:720px;
}
.page2info__lead{
  margin-top:10px;
  font-size:13px;
  line-height:1.6;
  color:rgba(255,255,255,.72);
  max-width:720px;
}
.page2info__grid{
  margin-top:26px;
  display:grid;
  grid-template-columns:repeat(2, minmax(220px, 1fr));
  gap:22px 34px;
  max-width:760px;
}
.p2list__t{
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  opacity:.85;
  margin-bottom:10px;
}
.p2list__i{
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity:.66;
  margin:8px 0;
}
.page2info__meta{margin-top:18px; display:flex; gap:10px; flex-wrap:wrap}
.p2tag{
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  padding:8px 11px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(8,8,10,.35);
  backdrop-filter: blur(6px);
}
.p2tag--lime{border-color:rgba(231,254,85,.35); color:rgba(231,254,85,.95)}
.p2tag--pink{border-color:rgba(255,79,216,.35); color:rgba(255,79,216,.92)}

.page2info__cta{
  margin-top:26px;
  width:min(720px, 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 14px;
  background:rgba(10,10,12,.55);
  border:1px solid rgba(255,255,255,.16);
  color:rgba(255,255,255,.92);
  border-radius:12px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  cursor:pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}
.page2info__cta:hover{transform:translateY(-1px); border-color:rgba(255,255,255,.28); background:rgba(10,10,12,.62)}
.page2info__dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--pink);
  box-shadow:0 0 0 6px color-mix(in srgb, var(--pink) 18%, transparent);
}
.page2info__foot{
  margin-top:18px;
  font-size:11px;
  letter-spacing:.24em;
  text-transform:uppercase;
  opacity:.44;
}

@media (max-width: 920px){
  .page2info{top:58%; left:6vw; right:6vw}
  .page2info__grid{grid-template-columns:1fr; max-width:640px}
}
@media (max-width: 520px){
  .page2info{top:60%}
  .page2info__headline{max-width:92vw}
  .page2info__cta{border-radius:14px}
}

/* white canvas (overlay panel) */
.canvas{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -44%);
  width:min(980px, 92vw);
  background:#f7f7f7;
  color:#0b0b0f;
  border-radius:14px;
  box-shadow: 0 30px 120px rgba(0,0,0,.65);
  overflow:hidden;
  border:1px solid rgba(0,0,0,.10);
}

/* Page 03 background (CSS only) */
.p3bg{position:absolute; inset:0; overflow:hidden; pointer-events:none;}
.p3bg__grid{
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 12px 12px, rgba(0,0,0,.12) 1px, transparent 2px) 0 0/72px 72px,
    radial-gradient(circle at 12px 12px, rgba(0,0,0,.06) 1px, transparent 2px) 36px 36px/72px 72px;
  opacity:.24;
  mix-blend-mode:multiply;
}
.p3bg__blob{
  position:absolute;
  width:520px;
  height:520px;
  border-radius:999px;
  filter: blur(18px);
  opacity:.78;
  transform:translate3d(0,0,0);
}
.p3bg__blob--a{
  left:-140px;
  top:-120px;
  background: radial-gradient(circle at 35% 35%, rgba(231,254,85,.95), rgba(231,254,85,0) 62%),
              radial-gradient(circle at 70% 70%, rgba(255,79,216,.55), rgba(255,79,216,0) 58%);
  animation: p3floatA 9.5s ease-in-out infinite;
}
.p3bg__blob--b{
  right:-180px;
  bottom:-160px;
  background: radial-gradient(circle at 40% 40%, rgba(255,79,216,.82), rgba(255,79,216,0) 64%),
              radial-gradient(circle at 70% 70%, rgba(231,254,85,.55), rgba(231,254,85,0) 60%);
  animation: p3floatB 11.5s ease-in-out infinite;
}
@keyframes p3floatA{
  0%{transform:translate(-10px,-8px) scale(1)}
  50%{transform:translate(42px,24px) scale(1.08)}
  100%{transform:translate(-10px,-8px) scale(1)}
}
@keyframes p3floatB{
  0%{transform:translate(12px,10px) scale(1)}
  50%{transform:translate(-36px,-22px) scale(1.1)}
  100%{transform:translate(12px,10px) scale(1)}
}

.p3wrap{
  position:relative;
  height:100%;
  padding:110px 24px 80px;
  max-width:1180px;
  margin:0 auto;
}

/* Page 03 layout: premium split */
.p3grid{
  display:grid;
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
  gap:26px;
  align-items:start;
}
.p3intro{
  position:sticky;
  top:92px;
  padding-right:10px;
}
.p3list{min-width:0;}
.p3kicker{
  font-size:11px;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:rgba(0,0,0,.58);
  font-weight:800;
}
.p3title{
  margin:14px 0 0;
  font-weight:950;
  letter-spacing:-0.06em;
  text-transform:uppercase;
  font-size:clamp(56px, 10vw, 140px);
  line-height:.9;
  color:transparent;
  -webkit-text-stroke: 2px rgba(0,0,0,.78);
  background: radial-gradient(1200px 520px at 50% 55%, rgba(0,0,0,.18), rgba(0,0,0,.04) 52%, rgba(0,0,0,0) 72%);
  -webkit-background-clip:text;
  background-clip:text;
  user-select:none;
}
.p3lead{
  margin:12px 0 0;
  max-width:720px;
  font-size:13px;
  line-height:1.7;
  letter-spacing:.02em;
  color:rgba(0,0,0,.68);
}

.p3rows{
  margin-top:30px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.p3row{
  position:relative;
  border-radius:0px; /* strict rectangle */
  padding:18px 20px;
  background:#ffffff;
  border:1px solid rgba(0,0,0,.14);
  box-shadow: 0 18px 60px rgba(0,0,0,.08);
  overflow:hidden;
  display:grid;
  grid-template-columns: 78px minmax(0, 1fr) auto;
  align-items:center;
  gap:18px;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.p3row::before,
.p3row::after{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  opacity:1;
  transform:translate3d(0,0,0);
}

.p3row::before{
  /* lightweight animated row background (no blur / no backdrop-filter) */
  background:
    linear-gradient(135deg, rgba(231,254,85,var(--diagL,.08)) 0%, rgba(255,79,216,var(--diagP,.06)) 45%, rgba(0,0,0,0) 70%),
    linear-gradient(90deg, rgba(231,254,85,var(--limeA,.14)) 0%, rgba(231,254,85,0) 48%),
    linear-gradient(270deg, rgba(255,79,216,var(--pinkA,.12)) 0%, rgba(255,79,216,0) 52%),
    repeating-linear-gradient(90deg, rgba(0,0,0,.06) 0 1px, transparent 1px 22px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 420px 100%;
  background-position: 0 0, 0 0, 0 0, 0 0;
  animation: p3RowScan 10s linear infinite;
}

.p3row::after{
  /* subtle top sheen */
  background: linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,0));
  opacity:.55;
}

@keyframes p3RowScan{
  0%{background-position: 0 0, 0 0, 0 0, 0 0}
  100%{background-position: 0 0, 0 0, 0 0, 420px 0}
}

.p3row:hover{
  transform:translateY(-2px);
  border-color:rgba(0,0,0,.18);
  box-shadow: 0 24px 84px rgba(0,0,0,.12);
}

.p3row__n{
  font-weight:950;
  font-size:28px;
  letter-spacing:-0.06em;
  color:transparent;
  -webkit-text-stroke: 1.8px rgba(0,0,0,.78);
  text-align:left;
}

.p3row__t{
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:-0.02em;
  font-size:16px;
  color:rgba(0,0,0,.92);
}

.p3row__d{
  margin-top:6px;
  font-size:12px;
  line-height:1.65;
  color:rgba(0,0,0,.62);
}

/* Row variants: each row gets its own “mini background” */
.p3row--a{--limeA:.22; --pinkA:.10; --diagL:.10; --diagP:.04;}
.p3row--b{--limeA:.12; --pinkA:.22; --diagL:.06; --diagP:.08;}
.p3row--c{--limeA:.18; --pinkA:.14; --diagL:.08; --diagP:.06;}
.p3row--d{--limeA:.10; --pinkA:.24; --diagL:.05; --diagP:.09;}
.p3row--e{--limeA:.20; --pinkA:.12; --diagL:.09; --diagP:.05;}
.p3chips{margin-top:12px; display:flex; gap:8px; flex-wrap:wrap; position:relative;}
.p3chips span{
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  padding:7px 9px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  background:rgba(255,255,255,.72);
  color:rgba(0,0,0,.72);
}
.p3chips .lime{border-color:rgba(231,254,85,.55); background:rgba(231,254,85,.22);}
.p3chips .pink{border-color:rgba(255,79,216,.45); background:rgba(255,79,216,.14);}

.p3cta{
  margin-top:20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.p3cta__btn{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 16px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.14);
  background:rgba(255,255,255,.82);
  cursor:pointer;
  font-weight:950;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-size:12px;
  color:rgba(0,0,0,.9);
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}
.p3cta__btn:hover{transform:translateY(-1px); background:rgba(255,255,255,.94); border-color:rgba(0,0,0,.20)}
.p3cta__arr{opacity:.8}
.p3meta{
  font-size:10px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(0,0,0,.45);
}



/* PAGE 03 — minimalist circles */
.p3wrap--mini{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:18px;
}
.p3head{max-width:980px; margin:0 auto;}
.p3title--mini{font-size:clamp(56px, 9vw, 120px);}
.p3lead--mini{max-width:760px;}

.p3circles{
  width:100%;
  max-width:980px;
  margin:18px auto 0;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap:16px;
  justify-items:center;
  align-content:center;
  flex:1;
  min-height:0;
}
.p3circle{
  width:100%;
  max-width:190px;
  aspect-ratio:1/1;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.14);
  background:rgba(255,255,255,.86);
  box-shadow: 0 18px 60px rgba(0,0,0,.08);
  padding:18px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:8px;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  opacity:0;
  transform:translateY(14px) scale(.96);
  filter:blur(6px);
  transition:
    opacity 420ms ease,
    transform 520ms ease,
    filter 520ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}

/* Reveal on entering page 3 */
.page--3.is-in .p3circle{
  opacity:1;
  transform:none;
  filter:blur(0);
}
.page--3.is-in .p3circle:nth-child(1){transition-delay:40ms}
.page--3.is-in .p3circle:nth-child(2){transition-delay:90ms}
.page--3.is-in .p3circle:nth-child(3){transition-delay:140ms}
.page--3.is-in .p3circle:nth-child(4){transition-delay:190ms}
.page--3.is-in .p3circle:nth-child(5){transition-delay:240ms}
.page--3.is-in .p3circle:nth-child(6){transition-delay:290ms}
.p3circle::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(circle at 30% 25%, rgba(231,254,85,.26), rgba(231,254,85,0) 60%),
    radial-gradient(circle at 70% 78%, rgba(255,79,216,.18), rgba(255,79,216,0) 58%),
    linear-gradient(135deg, rgba(0,0,0,.06), rgba(0,0,0,0));
  opacity:1;
  pointer-events:none;
}
.p3circle:hover{
  transform:translateY(-2px);
  border-color:rgba(0,0,0,.18);
  box-shadow: 0 24px 84px rgba(0,0,0,.12);
  background:rgba(255,255,255,.94);
}
.p3circle__t{
  position:relative;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:12px;
  color:rgba(0,0,0,.92);
  text-align:center;
}
.p3circle__s{
  position:relative;
  font-size:11px;
  letter-spacing:.02em;
  color:rgba(0,0,0,.60);
  text-align:center;
}

/* Page 3 reveal */
.page--3.is-in .p3circle{
  opacity:1;
  transform:none;
  filter:blur(0);
}
.page--3.is-in .p3circle:nth-child(1){transition-delay:60ms;}
.page--3.is-in .p3circle:nth-child(2){transition-delay:120ms;}
.page--3.is-in .p3circle:nth-child(3){transition-delay:180ms;}
.page--3.is-in .p3circle:nth-child(4){transition-delay:240ms;}
.page--3.is-in .p3circle:nth-child(5){transition-delay:300ms;}
.page--3.is-in .p3circle:nth-child(6){transition-delay:360ms;}
.p3foot{
  max-width:980px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
@media (max-width: 980px){
  .p3circles{grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap:14px;}
  .p3circle{max-width:180px; padding:16px;}
  .p3grid{grid-template-columns:1fr; gap:18px;}
  .p3intro{position:relative; top:auto; padding-right:0;}
  .p3row{grid-template-columns: 70px minmax(0, 1fr); grid-auto-flow:row;}
  .p3chips{justify-content:flex-start}
}
@media (max-width: 560px){
  .p3circles{grid-template-columns: repeat(auto-fit, minmax(116px, 1fr)); gap:12px; margin-top:14px;}
  .p3circle{max-width:160px; padding:14px;}
  .p3title--mini{font-size:clamp(52px, 13vw, 92px);}
  .p3wrap{padding:96px 18px 70px}
  .p3row{grid-template-columns: 62px minmax(0, 1fr);}
  .p3row{padding:14px 14px; gap:12px}
  .p3row__n{font-size:24px}
}

.canvas::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 12px 12px, rgba(0,0,0,.14) 1px, transparent 2px) 0 0/64px 64px,
    radial-gradient(circle at 12px 12px, rgba(0,0,0,.08) 1px, transparent 2px) 32px 32px/64px 64px;
  opacity:.35;
  pointer-events:none;
  mix-blend-mode:multiply;
}

.canvas__top{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:18px 18px 12px;
  border-bottom:1px solid rgba(0,0,0,.12);
}
.canvas__mark{
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:800;
}
.canvas__meta{display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end}
.tag{
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.18);
  background:rgba(255,255,255,.72);
}
.tag--lime{border-color:rgba(0,0,0,.18); background:color-mix(in srgb, var(--lime) 70%, white);}
.tag--pink{border-color:rgba(0,0,0,.18); background:color-mix(in srgb, var(--pink) 45%, white);}

.canvas__grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  grid-template-rows: auto auto;
  gap:18px;
  padding:18px;
}

.block{border:1px solid rgba(0,0,0,.12); background:rgba(255,255,255,.72); border-radius:12px; overflow:hidden;}

.block--visual{min-height:260px;}
.visual{
  height:100%;
  position:relative;
  background:
    linear-gradient(135deg, rgba(0,0,0,.08), rgba(0,0,0,0) 60%),
    radial-gradient(600px 260px at 40% 30%, rgba(0,0,0,.14), rgba(0,0,0,0) 70%),
    repeating-linear-gradient(90deg, rgba(0,0,0,.08) 0 1px, transparent 1px 18px),
    repeating-linear-gradient(180deg, rgba(0,0,0,.06) 0 1px, transparent 1px 18px);
}
.visual::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(380px 200px at 65% 60%, rgba(231,254,85,.35), rgba(255,79,216,.20) 40%, rgba(0,0,0,0) 70%);
  mix-blend-mode:multiply;
  opacity:.55;
}
.visual__label{
  position:absolute;
  left:14px;
  top:14px;
  font-size:10px;
  letter-spacing:.20em;
  text-transform:uppercase;
  font-weight:800;
  opacity:.88;
}

.block--copy{padding:16px 16px 14px;}
.copy__kicker{font-weight:900; letter-spacing:-.02em; font-size:18px; margin-bottom:10px;}
.copy__text{font-size:13px; line-height:1.7; color:rgba(0,0,0,.78);}
.copy__cols{display:grid; grid-template-columns: 1fr 1fr; gap:14px; margin-top:14px;}
.list__title{font-size:11px; letter-spacing:.18em; text-transform:uppercase; font-weight:900; margin-bottom:8px;}
.list__item{font-size:12px; line-height:1.55; color:rgba(0,0,0,.76)}

.block--tasks{
  grid-column:1 / -1;
  padding:16px;
  background:rgba(255,255,255,.86);
}
.tasks__head{display:flex; justify-content:space-between; align-items:baseline; border-bottom:1px solid rgba(0,0,0,.12); padding-bottom:10px; margin-bottom:12px;}
.tasks__title{font-weight:900; letter-spacing:.22em; text-transform:uppercase; font-size:12px;}
.tasks__count{font-weight:900; letter-spacing:.06em; font-size:12px; opacity:.7}
.tasks__grid{display:grid; grid-template-columns: 1fr 1fr; gap:10px 14px;}
.task{display:flex; gap:10px;}
.task__n{font-weight:900; font-size:11px; opacity:.6; width:24px}
.task__t{font-size:12px; line-height:1.5; color:rgba(0,0,0,.78)}

.cta{
  margin-top:14px;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.18);
  background:linear-gradient(180deg, rgba(0,0,0,.92), rgba(0,0,0,.86));
  color:#fff;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:11px;
  cursor:pointer;
}
.cta:hover{filter:brightness(1.06)}
.cta__dot{width:8px; height:8px; border-radius:999px; background: radial-gradient(circle at 30% 30%, #fff, rgba(255,255,255,0) 65%), linear-gradient(90deg, var(--lime), var(--pink));}

.canvas__footer{position:relative; z-index:2; padding:0 18px 16px;}
.footer__quote{font-size:10px; letter-spacing:.24em; text-transform:uppercase; font-weight:900; color:rgba(0,0,0,.55);}
.footer__line{height:2px; background:linear-gradient(90deg, rgba(0,0,0,.16), rgba(0,0,0,.02)); margin-top:10px; border-radius:4px;}

/* panel */
.panel{position:fixed; inset:0; display:grid; place-items:center; padding:24px; opacity:0; pointer-events:none; transition:opacity .22s ease; z-index:30;}
.panel.is-open{opacity:1; pointer-events:auto;}
.panel::before{content:""; position:absolute; inset:0; background:rgba(0,0,0,.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);}
.panel__card{
  position:relative;
  width:min(720px, 92vw);
  border-radius:24px;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  box-shadow:var(--shadow);
  overflow:hidden;
}
.panel__top{display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid rgba(255,255,255,.12)}
.panel__title{font-weight:700; letter-spacing:.12em; text-transform:uppercase; font-size:12px; color:rgba(255,255,255,.9)}
.panel__close{border:0; background:transparent; color:rgba(255,255,255,.85); font-size:18px; cursor:pointer; padding:6px 10px; border-radius:12px;}
.panel__close:hover{background:rgba(255,255,255,.06)}
.panel__body{padding:18px; color:rgba(255,255,255,.78); font-size:14px; line-height:1.6}
.panel__body .mini{opacity:.9}
.panel__body .chip{display:inline-flex; gap:8px; align-items:center; padding:8px 12px; border:1px solid rgba(255,255,255,.14); border-radius:999px; background:rgba(0,0,0,.18); margin:6px 6px 0 0; font-size:12px; letter-spacing:.02em;}

/* responsive */
@media (max-width: 860px){
  .pages{scroll-snap-type:y mandatory}
  .nav__links{display:none}
  .burger{display:inline-grid; place-items:center}
  .brief{display:none}
  .canvas{top:54%; transform:translate(-50%, -50%)}
  .canvas__grid{grid-template-columns:1fr; grid-template-rows:auto auto auto}
  .copy__cols{grid-template-columns:1fr}
  .tasks__grid{grid-template-columns:1fr}
}

@media (prefers-reduced-motion: reduce){
  .bgv{transition:none}
  .brief{transition:none}
  .p3circle{transition:none; opacity:1; transform:none; filter:none}
}


/* =========================================================
   PAGE 03 — Yellow/Black minimal (editorial)
   ========================================================= */
.page--3.page--3yb{
  background:#ffd400;
  color:#000;

  overflow:hidden;
}

/* Header on yellow page */
html.is-page3 .brand{color:rgba(0,0,0,.92)}
html.is-page3 .nav__links a{color:rgba(0,0,0,.72)}
html.is-page3 .nav__links a:hover{color:rgba(0,0,0,.95); background:rgba(0,0,0,.08)}
html.is-page3 .brief{
  background:rgba(0,0,0,.90);
  border-color:rgba(0,0,0,.70);
  color:rgba(255,212,0,.98);
}
html.is-page3 .brief:hover{background:rgba(0,0,0,.96)}
html.is-page3 .burger{background:rgba(0,0,0,.90); border-color:rgba(0,0,0,.70)}
html.is-page3 .burger span{background:rgba(255,212,0,.95)}

/* page 4 (white) nav theme */
html.is-page4 .brand{color:rgba(0,0,0,.92)}
html.is-page4 .nav__links a{color:rgba(0,0,0,.70)}
html.is-page4 .nav__links a:hover{color:rgba(0,0,0,.92); background:rgba(0,0,0,.06)}
html.is-page4 .brief{
  border-color:rgba(0,0,0,.16);
  background:rgba(255,255,255,.78);
  color:rgba(0,0,0,.92);
}
html.is-page4 .brief:hover{background:rgba(0,0,0,.06); border-color:rgba(0,0,0,.22)}
html.is-page4 .burger{background:rgba(255,255,255,.84); border-color:rgba(0,0,0,.14)}
html.is-page4 .burger span{background:rgba(0,0,0,.92)}

.ybwrap{
  height:100%;
  width:100%;
  max-width:1100px;
  margin:0 auto;
  padding:110px 24px 72px;
  display:flex;
  flex-direction:column;
  gap:24px;

  box-sizing:border-box;
}

.yb{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.yb__ghost{
  position:absolute;
  left:18px;
  bottom:44px;
  font-weight:950;
  letter-spacing:-0.04em;
  font-size:clamp(92px, 18vw, 260px);
  color:rgba(0,0,0,.06);
  text-transform:uppercase;
  line-height:0.85;
}

.ybkicker{
  font-size:11px;
  font-weight:950;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:rgba(0,0,0,.78);
}

.ybhero{display:flex; flex-direction:column; gap:10px;}
.ybtitle{
  display:flex;
  flex-direction:column;
  gap:2px;
  font-weight:950;
  letter-spacing:-0.04em;
  text-transform:uppercase;
  line-height:0.88;
  font-size:clamp(62px, 10vw, 132px);
  margin:0;
}
.ybtitle span{display:block;}
.ybsub{
  max-width:720px;
  font-size:13px;
  letter-spacing:.04em;
  color:rgba(0,0,0,.70);
}

.ybitems{
  margin-top:10px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:14px 18px;
  align-content:start;
  flex:1;
}

.ybitem{
  display:grid;
  grid-template-columns: 58px minmax(0, 1fr);
  grid-template-rows:auto auto;
  column-gap:14px;
  row-gap:2px;
  align-items:center;
  padding:10px 10px;
  background:transparent;
  border:0;
  text-align:left;
  cursor:pointer;
  opacity:0;
  transform:translateY(14px);
  filter:blur(6px);
  transition:
    opacity 420ms ease,
    transform 520ms ease,
    filter 520ms ease;
}

/* reveal on entering page 3 */
.page--3.is-in .ybitem{opacity:1; transform:none; filter:blur(0)}
.page--3.is-in .ybitem:nth-child(1){transition-delay:60ms}
.page--3.is-in .ybitem:nth-child(2){transition-delay:130ms}
.page--3.is-in .ybitem:nth-child(3){transition-delay:200ms}
.page--3.is-in .ybitem:nth-child(4){transition-delay:270ms}
.page--3.is-in .ybitem:nth-child(5){transition-delay:340ms}
.page--3.is-in .ybitem:nth-child(6){transition-delay:410ms}

.ybnum{
  grid-row:1 / span 2;
  width:52px;
  height:52px;
  border-radius:999px;
  display:grid;
  place-items:center;
  font-weight:950;
  letter-spacing:.1em;
  background:#000;
  color:#ffd400;
  border:1px solid rgba(0,0,0,.9);
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

.ybname{
  font-weight:950;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:12px;
  color:rgba(0,0,0,.92);
}

.ybdesc{
  font-size:11px;
  letter-spacing:.02em;
  color:rgba(0,0,0,.66);
}

.ybitem:hover .ybnum{
  background:transparent;
  color:#000;
  transform:translateY(-1px);
}

.ybitem:hover .ybname{color:rgba(0,0,0,.98)}

.ybfoot{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap:14px;
  padding-top:10px;
}
.ybmeta{
  font-size:10px;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:rgba(0,0,0,.62);
}
.ybfoot .ybmeta:last-child{text-align:right}

.ybcta{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 16px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.9);
  background:#000;
  cursor:pointer;
  font-weight:950;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-size:12px;
  color:#ffd400;
  transition: transform 160ms ease, background 160ms ease;
}
.ybcta:hover{transform:translateY(-1px); background:rgba(0,0,0,.96)}
.ybcta__arr{opacity:.9}

@media (max-width: 860px){
  .ybitems{grid-template-columns:1fr}
  .yb__ghost{left:10px; bottom:34px}
  .ybfoot{grid-template-columns: 1fr auto 1fr}
}
@media (max-width: 560px){
  .ybwrap{padding:96px 18px 62px}
  .ybitems{gap:12px}
  .ybitem{grid-template-columns:54px minmax(0,1fr)}
  .ybnum{width:48px; height:48px}
}

@media (prefers-reduced-motion: reduce){
  .ybitem{transition:none; opacity:1; transform:none; filter:none}
  .ybnum{transition:none}
  .ybcta{transition:none}
}


/* PAGE 04 — Process / Control (white minimal) */
.page--4pc{
  background:#fff;
  color:#000;
}
.page--4pc .p4{
  height:100%;
  padding:40px;
  box-sizing:border-box;
  position:relative;
  overflow:hidden;
}

.page--4pc .p4bg{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  font-size:min(18vw,220px);
  font-weight:700;
  opacity:0;
  letter-spacing:10px;
  white-space:nowrap;
  pointer-events:none;
  transition:opacity 900ms cubic-bezier(.2,.9,.2,1);
}
.page--4pc.is-in .p4bg{opacity:0.04;}

.page--4pc .p4word--strong{
  font-weight:700;
  letter-spacing:1px;
}

.page--4pc .p4cta{
  position:absolute;
  bottom:24px;
  right:40px;
  background:transparent;
  border:none;
  color:rgba(0,0,0,.92);
  font-size:12px;
  letter-spacing:1px;
  text-transform:uppercase;
  cursor:pointer;
  padding:10px 0;
  opacity:.9;
  transition:opacity .25s ease;
}
.page--4pc .p4cta:hover{opacity:.65;}

.page--4pc .p4top{
  display:flex;
  justify-content:space-between;
  gap:18px;
  font-size:12px;
  letter-spacing:1.1px;
  text-transform:uppercase;
}
.page--4pc .p4center{
  position:relative;
  height:100%;
  margin-top:0px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.page--4pc .p4line{
  position:absolute;
  width:1px;
  height:0%;
  background:#000;
  transform:translateZ(0);
  transition:height 900ms cubic-bezier(.2,.9,.2,1);
}
.page--4pc .p4left{
  position:absolute;
  left:18%;
  display:flex;
  flex-direction:column;
  gap:22px;
  font-size:18px;
  letter-spacing:0.4px;
}
.page--4pc .p4right{
  position:absolute;
  right:14%;
  width:240px;
  font-size:12px;
  line-height:1.7;
  opacity:.0;
  transform:translateY(10px);
  transition:opacity 700ms ease, transform 700ms ease;
  transition-delay:520ms;
}
.page--4pc .p4word{
  opacity:0;
  transform:translateY(10px);
  transition:opacity 650ms ease, transform 650ms ease;
}
.page--4pc.is-in .p4line{height:100%;}
.page--4pc.is-in .p4right{opacity:1; transform:translateY(0);}

.page--4pc.is-in .p4word{opacity:1; transform:translateY(0);}
.page--4pc.is-in .p4word:nth-child(1){transition-delay:140ms;}
.page--4pc.is-in .p4word:nth-child(2){transition-delay:240ms;}
.page--4pc.is-in .p4word:nth-child(3){transition-delay:340ms;}
.page--4pc.is-in .p4word:nth-child(4){transition-delay:440ms;}
.page--4pc.is-in .p4word:nth-child(5){transition-delay:540ms;}
.page--4pc.is-in .p4word:nth-child(6){transition-delay:640ms;}

@media (max-width: 820px){
  .page--4pc .p4{padding:28px 18px;}
  .page--4pc .p4top{font-size:11px; letter-spacing:1px;}
  .page--4pc .p4center{margin-top:28px;}
  .page--4pc .p4left{left:10%; font-size:16px; gap:18px;}
  .page--4pc .p4right{right:8%; width:200px;}
}
@media (max-width: 520px){
  .page--4pc .p4top{flex-direction:column; align-items:flex-start; gap:8px;}
  .page--4pc .p4line{left:50%; transform:translateX(-50%);}
  .page--4pc .p4left{
    left:0;
    right:0;
    top:20px;
    position:relative;
    padding-left:18px;
    gap:14px;
  }
  .page--4pc .p4right{
    position:relative;
    right:auto;
    width:auto;
    margin-top:18px;
    padding-left:18px;
  }
  .page--4pc .p4center{
    align-items:flex-start;
    justify-content:flex-start;
    flex-direction:column;
    height:auto;
  }
  .page--4pc .p4line{
    position:absolute;
    top:0;
    height:0%;
  }
}


/* PAGE 05 / SYSTEM (ARCHITECTURAL GRID) */
.page--5sys{
  background:#f7f7f7;
  color:#0b0b0f;
}
.page--5sys .p5a{
  height:100%;
  padding:108px 40px 64px; /* keep distance from fixed nav */
  box-sizing:border-box;
  max-width:1080px;
  margin:0 auto;
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.page--5sys .p5aHead{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:18px;
  margin-bottom:56px;
}
.page--5sys .p5aKicker{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  opacity:0.75;
}
.page--5sys .p5aMeta{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  opacity:0.55;
  text-align:right;
}

.page--5sys .p5aCanvas{
  position:relative;
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  column-gap:72px;
  row-gap:40px;
  align-items:start;
}
.page--5sys .p5aAxis{
  position:absolute;
  top:0;
  bottom:0;
  left:calc(52.5% - 36px);
  width:1px;
  background:rgba(11,11,15,0.10);
}

.page--5sys .p5aLeft{
  position:relative;
  padding-right:8px;
}
.page--5sys .p5aGhost{
  position:absolute;
  top:-20px;
  left:-4px;
  font-size:92px;
  line-height:0.9;
  letter-spacing:-0.02em;
  font-weight:500;
  opacity:0.08;
  pointer-events:none;
  user-select:none;
}
.page--5sys .p5aTitle{
  font-size:28px;
  letter-spacing:-0.02em;
  font-weight:600;
  margin-top:52px;
}
.page--5sys .p5aNote{
  margin-top:14px;
  font-size:14px;
  line-height:1.55;
  opacity:0.78;
  max-width:42ch;
}

.page--5sys .p5aMini{
  margin-top:26px;
  border-top:1px solid rgba(11,11,15,0.10);
  padding-top:18px;
  max-width:420px;
}
.page--5sys .p5aMiniRow{
  display:flex;
  justify-content:space-between;
  gap:18px;
  padding:10px 0;
  border-bottom:1px solid rgba(11,11,15,0.08);
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  opacity:0.8;
}
.page--5sys .p5aMiniRow:last-child{
  border-bottom:0;
  padding-bottom:0;
}

.page--5sys .p5aRight{
  padding-left:8px;
}
.page--5sys .p5aList{
  border-top:1px solid rgba(11,11,15,0.10);
}
.page--5sys .p5aItem{
  display:grid;
  grid-template-columns: 44px 1fr 26px;
  gap:16px;
  align-items:center;
  padding:18px 0;
  border-bottom:1px solid rgba(11,11,15,0.08);
}
.page--5sys .p5aNum{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.12em;
  opacity:0.55;
}
.page--5sys .p5aName{
  font-size:16px;
  letter-spacing:0.02em;
  font-weight:600;
}
.page--5sys .p5aMark{
  font-size:14px;
  opacity:0.8;
  text-align:right;
}

.page--5sys .p5aFoot{
  margin-top:26px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.page--5sys .p5aStatus{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  opacity:0.65;
}
.page--5sys .p5aCta{
  appearance:none;
  border:1px solid rgba(11,11,15,0.20);
  background:transparent;
  color:#0b0b0f;
  padding:12px 14px;
  border-radius:14px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  display:inline-flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  transition:transform .2s ease, background .2s ease, border-color .2s ease;
}
@media (hover:hover){
  .page--5sys .p5aCta:hover{
    transform:translateY(-1px);
    background:rgba(11,11,15,0.04);
    border-color:rgba(11,11,15,0.28);
  }
}

@media (max-width: 980px){
  .page--5sys .p5a{
    padding:96px 28px 56px;
  }
  .page--5sys .p5aAxis{
    left:50%;
  }
  .page--5sys .p5aGhost{
    font-size:72px;
  }
}

@media (max-width: 760px){
  .page--5sys .p5a{
    padding:92px 18px 44px;
  }
  .page--5sys .p5aHead{
    flex-direction:column;
    align-items:flex-start;
    margin-bottom:28px;
  }
  .page--5sys .p5aMeta{
    text-align:left;
  }
  .page--5sys .p5aCanvas{
    grid-template-columns: 1fr;
    column-gap:0;
  }
  .page--5sys .p5aAxis{
    display:none;
  }
  .page--5sys .p5aRight{
    padding-left:0;
    margin-top:12px;
  }
  .page--5sys .p5aGhost{
    position:relative;
    top:auto;
    left:auto;
    margin-bottom:10px;
    font-size:54px;
  }
  .page--5sys .p5aTitle{
    margin-top:6px;
    font-size:22px;
  }
  .page--5sys .p5aItem{
    grid-template-columns: 40px 1fr 22px;
    gap:12px;
  }
  .page--5sys .p5aFoot{
    flex-direction:column;
    align-items:flex-start;
  }
  .page--5sys .p5aCta{
    width:100%;
    justify-content:space-between;
  }
}



/* PAGE 06 (footer) — rebuilt base styles (no image, denser layout) */
.page--6end{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:flex-start;          /* reduce bottom “empty space” */
  padding-top:84px;                /* clearance for sticky/fixed nav */
}
.page--6end::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.90));
  pointer-events:none;
  z-index:0;
}
.page--6end .endbg{
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 520px at 16% 18%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(820px 520px at 82% 44%, rgba(255,255,255,.04), transparent 62%);
  z-index:0;
  pointer-events:none;
}
.page--6end .endwrap{
  position:relative;
  z-index:1;
  width:100%;
  padding:52px 8vw 38px;           /* reduced padding */
  display:grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  gap:56px;
  align-content:start;
}
.page--6end .endblock{ min-width:0; }

.page--6end .endtitle{
  font-size:52px;
  letter-spacing:0.02em;
  margin:0 0 10px;
}
.page--6end .endmeta{
  font-size:12px;
  letter-spacing:0.18em;
  opacity:.65;
  text-transform:uppercase;
  margin:0 0 22px;
}

.page--6end .endkpi{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding-top:10px;
}
.page--6end .endkpi__row{
  display:flex;
  justify-content:space-between;
  gap:14px;
  border-bottom:1px solid rgba(255,255,255,.08);
  padding:10px 0;
  font-size:14px;
}
.page--6end .endkpi__label{
  opacity:.6;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:11px;
}
.page--6end .endkpi__val{
  opacity:.9;
  letter-spacing:.04em;
}

.page--6end .endsub{
  font-size:11px;
  letter-spacing:0.18em;
  opacity:.6;
  text-transform:uppercase;
  margin:0 0 14px;
}
.page--6end .endsocial{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.page--6end .endsocial a{
  color:#fff;
  text-decoration:none;
  font-size:16px;
  opacity:.85;
}
.page--6end .endsocial a:hover{ opacity:1; }

.page--6end .endlinks{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-bottom:16px;
}
.page--6end .endlink{
  color:#fff;
  text-decoration:none;
  font-size:16px;
  opacity:.85;
}
.page--6end .endlink:hover{ opacity:1; }

.page--6end .enddivider{
  height:1px;
  background: rgba(255,255,255,.08);
  margin:18px 0 18px;
}

.page--6end .endmail{
  color:#fff;
  text-decoration:none;
  font-size:16px;
  opacity:.85;
}
.page--6end .endmail:hover{ opacity:1; }

.page--6end .endfineprint{
  grid-column: 1 / -1;
  width:100%;
  display:flex;
  justify-content:space-between;
  gap:18px;
  font-size:12px;
  letter-spacing:0.08em;
  opacity:.55;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.08);
}

/* Tablet / Mobile */
@media (max-width: 860px){
  .page--6end{ padding-top:74px; }
  .page--6end .endwrap{
    grid-template-columns:1fr;
    gap:34px;
    padding:34px 18px 24px !important;
  }
  .page--6end .endtitle{ font-size:40px !important; }
  .page--6end .endsocial a,
  .page--6end .endlink,
  .page--6end .endmail{ font-size:14px !important; }
  .page--6end .endfineprint{
    flex-direction:column !important;
    gap:8px !important;
    align-items:flex-start !important;
  }
}


/* PAGE 06 (footer): text always on place, safe padding */
@media (max-width: 860px){
  .page--6end .endbg{
    background-position: center 35% !important;
    transform: scale(1.12) !important;
  }
  .page--6end .endwrap{
    padding:34px 18px 82px !important;
    gap:22px !important;
  }
  .page--6end .endtitle{
    font-size:38px !important;
  }
  .page--6end .endsocial a{
    font-size:14px !important;
  }
  .page--6end .endfineprint{
    flex-direction:column !important;
    gap:8px !important;
    align-items:flex-start !important;
    padding:0 18px !important;
  }
}

/* Reduce heavy blur on mobile for smoothness */
@media (max-width: 860px){
  .page--6end::before{
    background: linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,.82)) !important;
  }
}



/* =========================
   CORE MOBILE VIEWPORT FIX
   ========================= */
:root{ --vh: 1vh; }

/* Mobile: disable scroll snap (prevents “skipping” + layout jitter) */
@media (max-width: 860px){
  html{ scroll-snap-type: none !important; }
  .page{ scroll-snap-align: none !important; scroll-snap-stop: normal !important; }
}

/* Mobile: make nav sticky (reduces iOS fixed jitter) */
@media (max-width: 860px){
  .nav{
    position:sticky !important;
    top:0 !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}

/* Mobile: lighten background effects to avoid freezes */
@media (max-width: 860px){
  .bg{ position:absolute !important; }
  .grain{ opacity:.14 !important; }
  .vignette{ opacity:.55 !important; }
  .bgv{ filter:saturate(1.05) contrast(1.03) brightness(.95) !important; }
}



/* PAGE 03 — Mobile layout (ensure full page, no clipping) */
@media (max-width: 560px){
  .page--3.page--3yb{ overflow:hidden; }
  .ybwrap{
    padding:76px 16px 54px; /* tuned for sticky nav */
    gap:18px;
  }
  .ybtitle{
    font-size: clamp(44px, 9.2vw, 72px);
    line-height: .92;
  }
  .ybsub{ font-size:12px; }
  .ybitems{
    gap:10px 12px;
    margin-top:6px;
  }
  .ybitem{ padding:8px 6px; }
  .ybname{ font-size:11px; }
  .ybdesc{ font-size:11px; line-height:1.35; }
  .ybfoot{ padding-top:6px; }
  .ybcta{ padding:12px 14px; font-size:11px; }
}



/* PAGE 06 — Mobile readability on photo background */
@media (max-width: 560px){
  .page--6end .endwrap{
    padding:30px 16px 90px !important;
  }
  .page--6end .endcol--right{
    background: rgba(0,0,0,.38);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 16px;
    padding: 16px 14px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}



/* =========================
   MOBILE SNAP + NAV OFFSET
   ========================= */
@media (max-width: 860px){
  :root{ --navH: 74px; } /* approx mobile nav height */
  .pages{
    scroll-padding-top: var(--navH);
    -webkit-overflow-scrolling: touch;
  }
  .page{
    scroll-margin-top: var(--navH);
  }
  /* prevent sticky nav covering first content lines */
  .page > .nav + *{ padding-top: 0; }
}


@media (max-width: 860px){ .nav{ background: rgba(0,0,0,.55) !important; } }



/* =========================
   MOBILE: PAGE 03 + PAGE 04 HARD FIX
   Goal: each page fully visible, no “half page” seams
   ========================= */

/* Make each page a self-contained flex column on phones */
@media (max-width: 560px){
  .page{
    height: calc(var(--vh, 1vh) * 100) !important;
    min-height: calc(var(--vh, 1vh) * 100) !important;
  }
}

/* PAGE 03 (yellow circles) — fit all content into one screen */
@media (max-width: 560px){
  .page--3.page--3yb{ overflow:hidden; }
  .ybwrap{
    height:100%;
    min-height:100%;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:64px 14px 18px; /* tighter */
    gap:12px;
  }
  .ybhead{ margin:0; }
  .ybtitle{
    font-size: clamp(38px, 9vw, 56px);
    line-height:.90;
    letter-spacing:-.02em;
  }
  .ybsub{
    font-size:11px;
    letter-spacing:.18em;
    margin-top:6px;
  }
  .ybitems{
    flex: 1 1 auto;
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:10px 12px;
    margin:10px 0 8px;
    align-content:center;
  }
  .ybitem{
    display:grid;
    grid-template-columns: 64px 1fr;
    gap:10px;
    align-items:center;
  }
  .ybcircle{
    width:64px !important;
    height:64px !important;
  }
  .ybnum{ font-size:14px !important; }
  .ybname{
    font-size:12px;
    letter-spacing:.14em;
    margin-bottom:2px;
  }
  .ybdesc{ font-size:11px; line-height:1.25; opacity:.72; }
  /* watermark less intrusive */
  .ybwater{
    opacity:.06 !important;
    font-size: clamp(110px, 34vw, 160px) !important;
    bottom:8% !important;
  }
  .ybfoot{
    margin:0;
    padding-top:6px;
  }
  .ybcta{
    width:100%;
    justify-content:center;
    padding:12px 14px;
    font-size:11px;
  }
}

/* PAGE 04 (control) — mobile layout redesign: stacked, clean, not “korjava” */
@media (max-width: 560px){
  .page--4control{
    overflow:hidden;
  }
  .p4{
    position:relative;
    height:100%;
    padding:72px 16px 22px; /* nav-safe */
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:18px;
  }
  .p4axis{
    position:absolute;
    left:16px;
    right:16px;
    top:52%;
    height:1px;
    width:auto;
    transform:none;
    opacity:.9;
  }
  /* turn list into 2 columns */
  .p4left{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    transform:none !important;
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:12px 18px;
    font-size:16px;
    letter-spacing:.02em;
  }
  .p4left .strong{ letter-spacing:.08em; }
  .p4right{
    position:relative !important;
    right:auto !important;
    top:auto !important;
    transform:none !important;
    width:100% !important;
    max-width:360px;
    font-size:12px;
    opacity:.85;
  }
  .p4cta{
    position:relative !important;
    right:auto !important;
    bottom:auto !important;
    margin-top:8px;
    font-size:12px;
  }
  /* background word: hide on very small to keep clean */
  .p4bg{ display:none !important; }
}

/* iOS snap seam fix: ensure snap uses nav offset */
@media (max-width: 860px){
  .pages{
    scroll-padding-top: var(--navH, 0px) !important;
  }
  .page{
    scroll-margin-top: var(--navH, 0px) !important;
  }
}



/* =========================
   MOBILE: DISABLE VIDEO ON PAGE 01
   ========================= */
.bgstatic{
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 620px at 22% 30%, rgba(255,79,216,.22), transparent 60%),
    radial-gradient(980px 680px at 78% 68%, rgba(231,254,85,.14), transparent 62%),
    linear-gradient(180deg, rgba(10,10,14,.92), rgba(0,0,0,.98));
  opacity:0;
  transform: scale(1.02);
  filter: saturate(1.1) contrast(1.05);
  pointer-events:none;
}
@media (max-width: 860px){
  /* hide heavy videos */
  .page--1 .bgv{ display:none !important; }
  .page--1 .bgstatic{ opacity:1; }
  /* keep grain/vignette but lighter */
  .page--1 .grain{ opacity:.14 !important; }
  .page--1 .vignette{ opacity:.55 !important; }
}



/* =========================
   MOBILE: HARD DISABLE BACKGROUND VIDEO
   (videos are global, not inside page sections)
   ========================= */
@media (max-width: 860px){
  video.bgv, .bgv{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
  }
  .bgstatic{ opacity:1 !important; }
}



/* =========================
   MOBILE FULLSCREEN NAV
   ========================= */
.mnav{
  pointer-events:auto;
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
  background: rgba(140,140,140,.18);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}
.mnav::before{
  pointer-events:none;
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(900px 520px at 20% 15%, rgba(255,255,255,.22), transparent 60%),
              radial-gradient(900px 520px at 80% 85%, rgba(0,0,0,.22), transparent 60%),
              linear-gradient(180deg, rgba(210,210,210,.55), rgba(120,120,120,.55));
  opacity:.85;
}
.mnav__close{
  position:absolute;
  top:16px;
  left:16px;
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.35);
  background: rgba(0,0,0,.15);
  color:#fff;
  font-size:18px;
  display:grid;
  place-items:center;
  z-index:2;
}
.mnav__wrap{
  position:relative;
  z-index:2;
  height:100%;
  padding:86px 26px 34px;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.mnav__link{
  font-size:54px;
  line-height:1.0;
  letter-spacing:-.02em;
  font-weight:700;
  color: rgba(255,255,255,.92);
  text-decoration:none;
}
.mnav__link:active{opacity:.7;}

.mnav__social{
  display:flex;
  gap:22px;
  align-items:center;
  justify-content:center;
  padding-top:18px;
}
.mnav__social a{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.34);
  color: rgba(255,255,255,.92);
  text-decoration:none;
  font-weight:700;
  letter-spacing:.02em;
  background: rgba(0,0,0,.12);
}
.mnav__social a:active{opacity:.7;}

/* toggle */
body.is-mnav-open{ overflow:hidden; }
body.is-mnav-open .mnav{
  pointer-events:auto; display:block; }

/* Only on mobile */
@media (min-width: 861px){
  .mnav{
  pointer-events:auto; display:none !important; }
}

/* =========================
   MOBILE HERO LIQD TWEAK
   ========================= */
@media (max-width: 560px){
  .page--1 .hero{ padding: 0 18px; }
  .page--1 .liqd{
    font-size: clamp(64px, 22vw, 132px);
    letter-spacing:-0.04em;
    -webkit-text-stroke: 1px rgba(255,255,255,.74);
    text-stroke: 1px rgba(255,255,255,.74);
    filter: drop-shadow(0 18px 50px rgba(0,0,0,.55));
  }
  .page--1 .sub{ bottom:24px; gap:10px; padding:0 16px; }
  .page--1 .pill{ padding:9px 12px; font-size:12px; }
  .page--1 .hint{ font-size:11px; opacity:.75; }
}

/* Branded icon buttons */
.mnav__icon{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.34);
  background: rgba(0,0,0,.12);
  text-decoration:none;
}
.mnav__icon svg{
  width:22px;
  height:22px;
  fill: rgba(255,255,255,.92);
}
.mnav__icon:active{opacity:.7;}

/* MNV CLOSE CLICKABILITY */
.mnav{ pointer-events:auto; }
.mnav::before{ pointer-events:none !important; }
.mnav__wrap{ pointer-events:auto; }
.mnav__close{ z-index:10002 !important; pointer-events:auto !important; }



/* =========================
   PAGE 04 CONTROL — MOBILE FIX (clean + centered)
   ========================= */
@media (max-width: 560px){
  .page--4control{
    background:#fff;
    overflow:hidden;
  }

  .page--4control .p4{
    height:100%;
    min-height:100%;
    padding:72px 18px 28px; /* under sticky nav */
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:18px;
  }

  /* Remove vertical axis & big bg word on mobile (keeps clean) */
  .page--4control .p4axis{ display:none !important; }
  .page--4control .p4bg{ display:none !important; }

  /* Steps list: single column for readability */
  .page--4control .p4left{
    position:relative !important;
    left:auto !important;
    top:auto !important;
    transform:none !important;

    display:flex;
    flex-direction:column;
    gap:12px;
    font-size:18px;
    line-height:1.05;
    letter-spacing:.04em;
  }

  .page--4control .p4left span{
    display:flex;
    align-items:baseline;
    gap:10px;
  }
  .page--4control .p4left span::before{
    content:"";
    width:10px;
    height:10px;
    border-radius:999px;
    border:1px solid rgba(0,0,0,.35);
    display:inline-block;
    transform: translateY(-1px);
  }
  .page--4control .p4left .strong{ font-weight:800; letter-spacing:.08em; }

  /* Copy block: keep under list, not overlapping */
  .page--4control .p4right{
    position:relative !important;
    right:auto !important;
    top:auto !important;
    transform:none !important;

    width:100% !important;
    max-width:420px;
    font-size:13px;
    line-height:1.55;
    opacity:.86;
    margin-top:6px;
  }

  /* CTA centered and always visible */
  .page--4control .p4cta{
    position:relative !important;
    right:auto !important;
    bottom:auto !important;
    margin-top:16px;
    width:100%;
    display:flex;
    justify-content:center;
  }
  .page--4control .p4cta a{
    width:100%;
    max-width:360px;
    justify-content:center;
  }
}



/* =========================
   PAGE 04 (PROCESS/CONTROL) — MOBILE LAYOUT FIX
   ========================= */
@media (max-width: 860px){
  #page4.page--4pc .p4{
    padding: 72px 18px 26px !important;
    overflow:hidden !important;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }

  /* Disable absolute layout & desktop reveal animation on mobile */
  #page4.page--4pc .p4bg{ display:none !important; }
  #page4.page--4pc .p4center{
    position:relative !important;
    height:auto !important;
    width:100%;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:center !important;
    gap:18px !important;
  }
  #page4.page--4pc .p4line{
    position:relative !important;
    width:100% !important;
    height:1px !important;
    background:rgba(0,0,0,.22) !important;
    margin: 4px 0 10px !important;
  }

  #page4.page--4pc .p4left,
  #page4.page--4pc .p4right{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    transform:none !important;
    opacity:1 !important;
  }

  #page4.page--4pc .p4left{
    width:100%;
    gap:12px !important;
    font-size:18px !important;
    letter-spacing:.06em !important;
  }
  #page4.page--4pc .p4word{
    opacity:1 !important;
    transform:none !important;
  }
  #page4.page--4pc .p4word--strong{
    font-weight:800 !important;
  }

  #page4.page--4pc .p4right{
    width:100% !important;
    max-width: 520px;
    font-size:13px !important;
    line-height:1.55 !important;
    opacity:.88 !important;
  }

  #page4.page--4pc .p4cta{
    position:relative !important;
    bottom:auto !important;
    right:auto !important;
    margin-top:18px !important;
    align-self:center !important;
    width:min(360px, 100%) !important;
    border:1px solid rgba(0,0,0,.18) !important;
    border-radius: 999px !important;
    padding:14px 18px !important;
    background:rgba(0,0,0,.03) !important;
  }
}


/* --- Page 4 (CONTROL) polish: minimal, no neon, no WebGL --- */
.page--4pc .p4top{
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0,0,0,.10);
  color: rgba(0,0,0,.78);
}

.page--4pc .p4left{
  font-size: 18px;
}

.page--4pc .p4word{
  display:flex;
  align-items:baseline;
  gap:12px;
}

.page--4pc .p4num{
  font-size: 11px;
  letter-spacing: .14em;
  color: rgba(0,0,0,.45);
  width: 28px;
  flex: 0 0 28px;
}

.page--4pc .p4label{
  position:relative;
  padding-bottom: 2px;
}

.page--4pc .p4word--strong .p4label:after{
  content:"";
  position:absolute;
  left:0;
  right:auto;
  bottom:0;
  height:1px;
  width: 28px;
  background: rgba(0,0,0,.22);
}

.page--4pc .p4quote{
  margin:0;
  padding: 12px 14px;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 14px;
  background: rgba(0,0,0,.02);
  color: rgba(0,0,0,.78);
}

/* hover micro-interaction (desktop only) */
@media (hover:hover){
  .page--4pc .p4word:hover .p4label{opacity:.78;}
}

/* mobile tweaks */
@media (max-width: 820px){
  .page--4pc .p4top{
    margin-bottom: 14px;
  }
  .page--4pc .p4num{
    width: 26px;
    flex-basis: 26px;
  }
  .page--4pc .p4quote{
    border-radius: 16px;
  }
}


/* PAGE 06 — compact footer layout */
.page--6end{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}
.page--6end .endwrap--compact{
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap:48px;
  padding:56px 8vw 32px;
}
.page--6end .endblock{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.page--6end .endfineprint--compact{
  padding:0 8vw 24px;
  font-size:12px;
  opacity:.55;
}
@media (max-width: 860px){
  .page--6end .endwrap--compact{
    grid-template-columns:1fr;
    gap:28px;
    padding:36px 24px 24px;
  }
  .page--6end .endfineprint--compact{
    padding:0 24px 20px;
  }
}



/* =========================
   MOBILE FULL ADAPTATION (FIXED)
   Goal: smooth scroll, no snap-skips, no clipping, pages fully visible
   ========================= */
@media (max-width: 860px){
  /* Keep body locked (prevents double scrolling); main container scrolls */
  html, body{
    height:100%;
    overflow:hidden !important;
    overscroll-behavior-y: none;
  }

  /* Main scroller */
  .pages{
    height:100svh !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type:none !important;
    scroll-behavior:auto !important;
  }

  /* Each page becomes content-height with safe top padding for nav */
  .page{
    height:auto !important;
    min-height:100svh !important;
    scroll-snap-align:none !important;
    scroll-snap-stop:normal !important;
    overflow:visible !important;
    padding-top: calc(var(--navH, 72px) + 16px) !important;
    padding-bottom: 28px !important;
  }

  /* Prevent clipping from any page-specific overflow rules */
  .page--1, .page--2, .page--3, .page--4, .page--5, .page--6end{
    overflow:visible !important;
  }

  /* Vanta layer stays behind */
  #vanta-footer{ position:absolute !important; inset:0; z-index:0 !important; }
  .page--6end .endwrap, .page--6end .endfineprint{ position:relative; z-index:1; }

  /* Reduce heavy effects for iOS stability */
  .bg{ position:fixed !important; }
}

/* FIXES */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}
header {
    margin: 0;
    padding: 24px 48px;
}
.page {
    margin: 0;
    padding: 0;
}

/* === HARD RESET / FULL BLEED FIX === */
* { box-sizing: border-box; }
html, body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100vw;
    height: 100%;
    overflow-x: hidden;
}

body {
    background: #000;
}

header, nav {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    left: 0;
    right: 0;
}

.container, .wrapper, .layout {
    max-width: none !important;
    width: 100vw !important;
    margin: 0 !important;
    padding-left: 48px;
    padding-right: 48px;
}

main, .page, .start-project, .split {
    width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* remove any accidental top gaps */
body > *:first-child {
    margin-top: 0 !important;
}