:root { --bg: #000; --fg: #e9e9e9; --muted: #9a9a9a; --line: #1a1a1a; --soft: rgba(255,255,255,0.06); }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: "Noto Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; line-height: 1.6; }

#bg { position: fixed; inset: 0; width: 100%; height: 100%; display: block; background: #000; }

.wrap { position: relative; min-height: 100dvh; display: block; padding: 10dvh 6vw calc(10vh + env(safe-area-inset-bottom)); }

.hero { position: relative; z-index: 1; }
.title { font-size: clamp(2rem, 7vw, 3.25rem); font-weight: 800; letter-spacing: -0.02em; margin: 0 0 0.25em; }
.subtitle { margin: 0; color: var(--muted); font-weight: 400; font-size: clamp(1rem, 3.5vw, 1.125rem); }

.hero::before { content: ""; position: absolute; inset: -20% -10%; background: radial-gradient(60% 60% at 50% 40%, rgba(255,255,255,0.08), rgba(255,255,255,0) 60%); filter: blur(22px); opacity: .6; animation: breathe 8s ease-in-out infinite; pointer-events: none; }

@keyframes breathe { 0%,100% { transform: translateY(0); opacity: .55; } 50% { transform: translateY(6px); opacity: .8; } }

.cta { display: grid; gap: 10px; align-content: start; z-index: 1; }
.ghost { appearance: none; border: 1px solid var(--line); background: var(--soft); color: var(--fg); padding: 12px 16px; border-radius: 12px; font-weight: 600; font-size: 0.95rem; backdrop-filter: blur(6px); transition: transform .15s ease, border-color .2s ease, background-color .2s ease; }
.ghost:active { transform: scale(0.98); }
.ghost:focus-visible { outline: 2px solid #888; outline-offset: 3px; }

.hint { color: var(--muted); font-size: 0.9rem; margin: 0; }

.foot { border-top: 1px solid var(--line); padding-top: 14px; color: #bdbdbd; font-size: 0.85rem; }

.center-rotator{position:fixed;inset:0;display:grid;place-items:center;pointer-events:none;z-index:2}
.center-rotator #phrase{font-weight:800;letter-spacing:-0.02em;text-align:center;font-size:clamp(2rem,10vw,4.6rem);color:var(--fg);text-shadow:0 0 12px rgba(255,255,255,0.04); user-select:none; -webkit-user-select:none; }

@media (hover:hover) and (pointer:fine) {
  .ghost:hover { border-color: #2c2c2c; background: rgba(255,255,255,0.08); }
}

@media (min-width: 920px) {
  .wrap { padding: 18vh 8vw 8vh; }
}

.micro-foot{position:fixed;left:0;right:0;bottom:calc(10px + env(safe-area-inset-bottom));text-align:center;font-size:.8rem;color:#bdbdbd;opacity:.7;pointer-events:none}