@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root { --ink: #10284a; --blue: #2151d1; --google-blue: #4285f4; --google-red: #ea4335; --google-yellow: #fbbc05; --google-green: #34a853; --yellow: #ffe55e; --paper: #fffefa; --line: #dce2ea; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: 'DM Sans', sans-serif; }
.section-wrap { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.site-header { display: flex; align-items: center; justify-content: space-between; width: min(1280px, calc(100% - 48px)); margin: 0 auto; padding: 28px 0; }
.wordmark { position: relative; color: var(--ink); font: 700 1.6rem 'Space Grotesk', sans-serif; text-decoration: none; letter-spacing: -.08em; }
.wordmark::after { content: ''; display: block; width: 38px; height: 3px; margin-top: 5px; border-radius: 99px; background: linear-gradient(90deg, var(--google-blue) 0 25%, var(--google-red) 25% 50%, var(--google-yellow) 50% 75%, var(--google-green) 75%); }
.wordmark span { color: var(--google-blue); }
.google-dots { display: flex; gap: 5px; margin-left: auto; margin-right: 28px; }
.google-dots i { display: block; width: 7px; height: 7px; border-radius: 50%; }
.google-dots i:nth-child(1) { background: var(--google-blue); }
.google-dots i:nth-child(2) { background: var(--google-red); }
.google-dots i:nth-child(3) { background: var(--google-yellow); }
.google-dots i:nth-child(4) { background: var(--google-green); }
.header-link { color: var(--ink); font-size: .72rem; font-weight: 700; letter-spacing: .11em; text-decoration: none; text-transform: uppercase; }
.header-nav { display: flex; align-items: center; gap: 22px; }
.header-nav .header-link:first-child { color: var(--google-blue); }
.hero { min-height: 720px; display: grid; grid-template-columns: .95fr 1.05fr; align-items: center; gap: 30px; padding: 72px 0 130px; }
.eyebrow, .section-kicker { margin: 0 0 20px; color: #6b7990; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
h1, h2 { margin: 0; font-family: 'Space Grotesk', sans-serif; font-weight: 600; letter-spacing: -.065em; line-height: .95; }
h1 { font-size: clamp(3.7rem, 7.2vw, 6.5rem); }
h1 em, h2 em { color: var(--blue); font-style: normal; }
.hero-note { margin: 30px 0; font-size: 1.05rem; line-height: 1.5; }
.hero-tagline { margin: 24px 0 -16px; color: var(--blue); font: 600 clamp(1.1rem, 2vw, 1.5rem) 'Space Grotesk', sans-serif; letter-spacing: -.04em; }
.fun-controls { margin-top: 28px; }
.fun-button { margin: 0 8px 8px 0; padding: 9px 13px; border: 1px solid var(--google-blue); border-radius: 999px; color: var(--google-blue); background: transparent; font: 700 .68rem 'DM Sans', sans-serif; letter-spacing: .05em; text-transform: uppercase; cursor: pointer; transition: color .2s, background .2s, transform .2s; }
.fun-button:hover { color: white; background: var(--google-blue); transform: translateY(-2px); }
.fun-output { min-height: 22px; margin: 2px 0 0; color: var(--google-green); font-size: .82rem; font-weight: 700; }
.pill { display: inline-flex; gap: 24px; align-items: center; border: 1px solid var(--ink); border-radius: 999px; padding: 14px 20px; color: var(--ink); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; transition: transform .2s, background .2s, color .2s; }
.pill:hover { color: white; background: var(--google-blue); border-color: var(--google-blue); transform: translateY(-3px); }
.hero-art { position: relative; display: grid; place-items: center; min-height: 520px; }
.hero-art img { position: relative; z-index: 2; width: min(86%, 460px); filter: drop-shadow(0 22px 0 rgba(16,40,74,.06)); animation: float 4s ease-in-out infinite; }
.cursor-gogi { position: fixed; z-index: 20; top: 0; left: 0; width: 46px; opacity: 0; pointer-events: none; filter: drop-shadow(0 6px 0 rgba(16,40,74,.08)); transition: opacity .25s; }
.cursor-gogi.is-visible { opacity: 1; }
.cursor-gogi img { display: block; width: 100%; }
.orbit { position: absolute; border: 1px solid #dfe5ee; border-radius: 50%; transform: rotate(-18deg); }
.orbit-one { width: 86%; height: 64%; }
.orbit-two { width: 70%; height: 48%; transform: rotate(35deg); }
.lore { padding: 110px 0 150px; border-top: 1px solid var(--line); }
.lore-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12%; align-items: end; }
h2 { font-size: clamp(3rem, 6vw, 6rem); }
h2 span { color: #94a0b3; }
.lore-copy { max-width: 390px; font-size: 1.05rem; line-height: 1.65; }
.lore-signoff { color: var(--google-green); font-weight: 700; }
.moods { padding: 0 0 150px; }
.moods-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 60px; }
.moods-heading h2 { text-align: right; }
.moods-heading h2 span { color: #7e91b0; }
.mood-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; align-items: start; }
.mood { margin: 0; border-top: 5px solid var(--google-blue); transform: rotate(-1.5deg); }
.mood:nth-child(2) { border-color: var(--google-red); }
.mood:nth-child(3) { border-color: var(--google-yellow); }
.mood:nth-child(4) { border-color: var(--google-green); }
.mood:nth-child(5) { border-color: var(--google-blue); }
.mood:nth-child(6) { border-color: var(--google-red); }
.mood:nth-child(even) { transform: rotate(1.5deg); }
.mood-offset { margin-top: 90px; }
.mood img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; background: #f2f5f9; border-radius: 28px; }
.mood figcaption { padding: 13px 5px; color: #6b7990; font-size: .78rem; }
.mood-wide { grid-column: span 2; }
.coming-soon { padding-bottom: 120px; }
.coming-card { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 75px 9%; overflow: hidden; border-radius: 38px; border-top: 7px solid var(--google-yellow); background: linear-gradient(135deg, #fff4c2 0%, #fff4c2 68%, #e8f0fe 100%); }
.coming-card h2 { font-size: clamp(4rem, 9vw, 8rem); }
.coming-note { margin: 26px 0; font-weight: 700; }
.coming-card img { width: min(36%, 330px); animation: float 3.4s ease-in-out infinite reverse; }
.pill-dark { color: var(--paper); background: var(--ink); border-color: var(--ink); cursor: not-allowed; }
.pill-dark:hover { color: var(--paper); background: var(--ink); border-color: var(--ink); transform: none; }
.site-footer { display: flex; justify-content: space-between; padding: 26px 0 34px; border-top: 1px solid var(--line); color: #6b7990; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.footer-right { display: flex; gap: 24px; align-items: center; }
.footer-link { color: var(--google-blue); font-weight: 700; text-decoration: none; }
.footer-link:hover { color: var(--google-red); }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-13px) rotate(2deg); } }
body.gogi-party .wordmark { animation: party-spin .7s ease-in-out 2; }
@keyframes party-spin { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-8deg) scale(1.08); color: var(--google-red); } }
@media (max-width: 720px) { .section-wrap, .site-header { width: min(100% - 32px, 560px); } .site-header { align-items: flex-start; } .google-dots { display: none; } .header-nav { gap: 10px; flex-wrap: wrap; justify-content: flex-end; } .header-link { font-size: .62rem; } .hero { grid-template-columns: 1fr; min-height: auto; padding: 80px 0 100px; } .hero-art { min-height: 350px; order: -1; } .hero-art img { width: 70%; } .lore-grid { grid-template-columns: 1fr; gap: 40px; } .moods-heading { display: block; } .moods-heading h2 { text-align: left; } .mood-grid { grid-template-columns: 1fr; gap: 18px; } .mood-wide { grid-column: auto; } .mood-offset { margin-top: 0; } .fun-button { width: 100%; margin-right: 0; } .coming-card { padding: 44px 28px; display: block; } .coming-card img { display: block; width: 64%; margin: 40px auto 0; } .site-footer { display: block; line-height: 2; } .footer-right { flex-wrap: wrap; gap: 4px 18px; } }
@media (max-width: 720px) { .cursor-gogi { display: none; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .cursor-gogi { display: none; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }