*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{font-family:"Helvetica Neue",Arial,"Hiragino Sans",Meiryo,sans-serif;background:#fff}

/* ---- nav bar (mirrors tear-curl-test/index.html for a fair side-by-side comparison) ---- */
.navbar{
  position:fixed;top:0;left:0;right:0;z-index:30;
  height:76px;display:flex;align-items:center;justify-content:space-between;
  padding:0 3vw;background:#fff;box-shadow:0 1px 0 rgba(20,20,30,.07);
}
.nav-logo{display:flex;align-items:center;gap:.55rem;font-weight:700;font-size:1.2rem;color:#181a20}
.nav-links{display:flex;gap:2.1rem;list-style:none;font-size:.88rem;color:#3d414a}
.nav-links a{color:inherit;text-decoration:none}
.nav-cta{
  background:#6a3df0;color:#fff;border:none;border-radius:7px;
  padding:.72em 1.5em;font-size:.78rem;font-weight:700;letter-spacing:.04em;
  cursor:pointer;
}

/* ---- scroll-driven hero (spec section 4) ---- */
.hero-tear-section{
  position:relative;
  height:220vh;height:220svh;
}
@media (max-width:720px){
  .hero-tear-section{height:200vh;height:200svh}
}

.hero-tear-stage{
  position:sticky;top:0;
  width:100%;
  height:100vh;height:100svh;
  overflow:hidden;
  background:#0b0b0c;
}

#heroTearCanvas{
  position:absolute;inset:0;z-index:1;
  width:100%;height:100%;
  pointer-events:none;
  /* shows through the canvas's transparent pixels until the first WebGL
     frame is drawn, so the page reads as "closed/gray" immediately instead
     of flashing any unintended state while textures load */
  background:url('../assets/images/hero-gray.jpg') center/cover no-repeat;
}

.hero-text{
  position:absolute;z-index:15;left:5.5vw;top:76px;bottom:0;right:52vw;
  display:flex;flex-direction:column;justify-content:center;
  pointer-events:none;
}
.hero-text h1{
  font-size:clamp(1.7rem,2.5vw,2.5rem);
  font-weight:400;color:#fff;line-height:1.28;margin:0 0 1.3rem;
  letter-spacing:-.01em;text-shadow:0 2px 12px rgba(0,0,0,.5);
}
.hero-text h1 b{color:#a893ff;font-weight:700;display:block}
.hero-divider{width:2px;height:34px;background:#a893ff;margin-bottom:1.15rem}
.hero-text p{color:#e4e4e8;font-size:.98rem;line-height:1.75;max-width:27ch;font-weight:400;text-shadow:0 1px 8px rgba(0,0,0,.5)}

.hud{
  position:absolute;left:1.2rem;bottom:1.2rem;z-index:20;
  color:rgba(255,255,255,.85);text-shadow:0 1px 6px rgba(0,0,0,.7);
  font-size:.75rem;letter-spacing:.05em;
  display:flex;flex-direction:column;gap:.35rem;align-items:flex-start;
}

/* ---- filler so the runway created by .hero-tear-section is easy to scroll past ---- */
.next-section{
  min-height:60vh;
  display:flex;align-items:center;justify-content:center;
  color:#28417c;font-size:1.1rem;background:#fdfdfc;
}