:root {
  color-scheme: light;
  --ink: #172c29;
  --muted: #697a74;
  --green: #1c6659;
  --mint: #a7d5c4;
  --paper: #f7f8f5;
  --second: #75614d;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: var(--paper); color: var(--ink); font-family: "DM Sans", sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
.landing { position: relative; isolation: isolate; width: 100%; height: 100svh; min-height: 500px; overflow: hidden; background: radial-gradient(ellipse at 50% 43%, #fff 0%, #f7f8f5 43%, #f1f5f1 100%); }
.grain { position: absolute; z-index: 2; inset: -50%; pointer-events: none; opacity: .13; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.38'/%3E%3C/svg%3E"); background-size: 180px 180px; animation: grain-drift .42s steps(3) infinite; }
@keyframes grain-drift { 0% { transform: translate(0, 0); } 33% { transform: translate(1%, -1%); } 66% { transform: translate(-1%, 1%); } 100% { transform: translate(1%, 1%); } }
.brand-logo { position: absolute; z-index: 6; top: 50%; left: 50%; width: min(80vw, 605px); height: auto; transform: translate(-50%, -50%); transition: top 1.25s cubic-bezier(.2,.75,.25,1), width 1.25s cubic-bezier(.2,.75,.25,1), transform 1.25s cubic-bezier(.2,.75,.25,1); }
.brand-logo svg { display: block; width: 100%; height: auto; overflow: visible; }
.brand-logo .logo-emblem { opacity: 0; transform-box: fill-box; transform-origin: center; }
.brand-logo .logo-letter { opacity: 0; transform: translateY(26px); filter: blur(4px); transform-box: fill-box; transform-origin: center; }
.landing.logo-play .logo-emblem { animation: emblem-arrive .95s .1s cubic-bezier(.16,1,.3,1) forwards; }
.landing.logo-play .logo-letter { animation: letter-rise .72s cubic-bezier(.16,1,.3,1) forwards; animation-delay: calc(.24s + var(--letter-order) * .105s); }
@keyframes emblem-arrive { 0% { opacity: 0; transform: translateY(18px) scale(.82) rotate(-7deg); filter: blur(5px); } 70% { opacity: 1; } 100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); filter: blur(0); } }
@keyframes letter-rise { 0% { opacity: 0; transform: translateY(26px); filter: blur(4px); } 100% { opacity: 1; transform: translateY(0); filter: blur(0); } }
.landing.logo-settled .brand-logo { top: 40px; width: min(40vw, 250px); transform: translate(-50%, 0) scale(1); }
.contact-link:hover { color: #3f3124; }
.hero { position: absolute; z-index: 3; top: 46%; left: 50%; width: min(90%, 620px); transform: translate(-50%, calc(-50% + 16px)); text-align: center; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .85s ease, transform .85s cubic-bezier(.2,.75,.25,1), visibility .85s; }
.hero.hero-visible { opacity: 1; visibility: visible; transform: translate(-50%, -50%); }
.hero a { pointer-events: auto; }
h1 { margin: 0; color: var(--ink); font-family: Manrope, sans-serif; font-size: clamp(46px, 6.3vw, 76px); font-weight: 500; letter-spacing: -.065em; line-height: 1.04; }
.period { color: var(--second); }
.message-glass { width: fit-content; max-width: 100%; margin: 22px auto 0; padding: 15px 24px 16px; border: 1px solid #ffffffa8; border-radius: 16px; background: #e8efeb99; box-shadow: 0 10px 34px #244b3d0a, inset 0 1px #ffffffa8; backdrop-filter: blur(2px) saturate(1.12); -webkit-backdrop-filter: blur(2px) saturate(1.12); }
.intro { margin: 0 0 11px; color: #536860; font-size: 15px; line-height: 1.75; }
.contact-link { display: inline-flex; align-items: center; gap: 8px; color: var(--second); font-size: 14px; font-weight: 700; transition: color .2s; }
.contact-link span { font-size: 16px; }
.tooth-stage { position: absolute; z-index: 1; inset: 0; pointer-events: none; }
#tooth-canvas { width: 100%; height: 100%; display: block; }
.stage-glow { position: absolute; z-index: -1; left: 50%; top: 47%; width: min(50vw, 680px); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, #d5eee3aa 0%, #e8f2ec50 33%, transparent 70%); filter: blur(18px); }
.tap-reminder { position: absolute; z-index: 5; bottom: 65px; left: 50%; display: grid; width: 44px; height: 44px; padding: 3px; place-items: center; border: 0; background: transparent; color: var(--green); opacity: 0; visibility: hidden; transform: translate(-50%, -50%); cursor: pointer; }
.tap-icon { display: block; width: 38px; height: 38px; overflow: visible; }
.tap-reminder.visible { visibility: visible; animation: reminder-appear .45s ease-out both, reminder-float 1.8s ease-in-out .45s infinite; }
.tap-reminder.dismissed { opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; }
@keyframes reminder-appear { from { opacity: 0; } to { opacity: 1; } }
@keyframes reminder-float { 0%, 100% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, calc(-50% - 6px)); } }
.copyright { position: absolute; z-index: 5; bottom: 22px; left: 50%; transform: translateX(-50%); color: #87968f; font-size: 10px; letter-spacing: .02em; white-space: nowrap; }

@media (max-width: 640px) {
  .landing { min-height: 440px; }
  .brand-logo { width: min(82vw, 420px); }
  .landing.logo-settled .brand-logo { top: 32px; width: min(50vw, 190px); }
  .hero { top: 47%; width: calc(100% - 34px); }
  h1 { font-size: clamp(44px, 12vw, 62px); }
  .message-glass { margin-top: 18px; padding: 13px 17px 14px; border-radius: 14px; }
  .intro { margin-bottom: 9px; font-size: 13px; line-height: 1.65; }
  .desktop-break { display: none; }
  .contact-link { font-size: 13px; }
  .stage-glow { width: 100vw; top: 46%; }
  .tap-reminder { bottom: 58px; }
  .copyright { bottom: 18px; font-size: 9px; }
}
@media (max-height: 620px) and (min-width: 641px) {
  .hero { top: 47%; transform: translate(-50%, -48%) scale(.88); }
  .hero.hero-visible { transform: translate(-50%, -50%) scale(.88); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .grain { animation: none !important; }
}