:root{
  --paper:#E2E8F0;
  --paper2:#CBD5E1;
  --ink:#0f172a;
  --muted:#475569;
  --stroke:rgba(15,23,42,.08);
}

html{scroll-behavior:smooth}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* premium “soft grain” overlay */
body.grain::before{
    content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

/* subtle “Webflow” gradient blobs */
.blob{
  filter: blur(52px);
  opacity: .85;
  transform: translate3d(0,0,0);
  will-change: transform;
}

/* card highlight */
.card{
  box-shadow: 0 14px 38px rgba(15,23,42,.08);
}

/* reveal */
.reveal{
  opacity:0;
  transform: translateY(14px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.is-visible{
  opacity:1;
  transform: translateY(0);
}

/* glass nav */
.glass{
  background: rgba(255,252,246,.72);
  backdrop-filter: blur(10px);
}

/* focus ring nicer */
:focus-visible{ outline: 3px solid rgba(15,23,42,.18); outline-offset: 4px; border-radius: 10px; }

/* button shine */
.shine{
  position:relative;
  overflow:hidden;
}
.shine::after{
  content:"";
  position:absolute;
  top:-50%;
  left:-30%;
  width:30%;
  height:200%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
  transform: rotate(18deg);
  opacity:.0;
  transition: opacity .35s ease, transform .55s ease;
}
.shine:hover::after{
  opacity:.55;
  transform: translateX(280%) rotate(18deg);
}

/* parallax container lives under everything */
#parallax{
  position:fixed;
  inset:0;
  z-index:-1;
  overflow:hidden;
  pointer-events:none;
}

/* Modal helper */
#videoModal.hidden{ display:none; }

/* Make buttons feel more premium on tap */
@media (max-width: 640px){
  .shine::after{ display:none; }
}

@keyframes caretBlink {
  0%, 49% { border-color: rgba(15,23,42,.65); }
  50%, 100% { border-color: transparent; }
}