:root {
  --bg:#ffffff;
  --ink:#050505;
  --muted:#5c5c63;
  --cyan:#00f0f6;
  --pink:#fa0080;
  --yellow:#ffc952;
  --cyan-ink:#00b4bd;
  --yellow-ink:#e8a417;
}

* { box-sizing:border-box; }
html { background:var(--bg); scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }

.world-shell {
  position:relative;
  min-height:100svh;
  overflow:hidden;
  isolation:isolate;
  display:grid;
  grid-template-rows:auto 1fr auto;
  background:
    radial-gradient(circle at 64% 45%,rgba(0,0,0,.03),transparent 36%),
    #ffffff;
}

.grain {
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:.18;
  background-image:radial-gradient(rgba(0,0,0,.2) .55px,transparent .55px);
  background-size:7px 7px;
  mask-image:linear-gradient(90deg,transparent,black 55%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,black 55%,transparent);
}

.color-glow { position:absolute; width:20rem; aspect-ratio:1; border-radius:50%; filter:blur(110px); opacity:.16; z-index:-1; }
.glow-cyan { background:var(--cyan); right:24%; top:12%; }
.glow-pink { background:var(--pink); right:-8rem; bottom:0; }
.glow-yellow { background:var(--yellow); left:15%; bottom:-16rem; }

.site-header,footer,.hero { width:min(100% - 4rem,1360px); margin-inline:auto; }
footer { border-top:1px solid rgba(0,0,0,.09); }
.site-header { padding:2rem 0; display:flex; align-items:center; justify-content:space-between; z-index:3; }
.brand { display:block; width:clamp(8.6rem,12vw,11rem); }
.brand img { display:block; width:100%; height:auto; filter:invert(1); }
.site-nav a { color:var(--ink); text-decoration:none; font-size:.74rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; padding:.6rem .1rem; border-bottom:2px solid transparent; transition:border-color .2s ease,color .2s ease; }
.site-nav { display:flex; align-items:center; gap:1.4rem; }
.site-nav a:hover,.site-nav a:focus-visible { color:var(--pink); border-bottom-color:var(--pink); }
.sound-toggle { display:grid; place-items:center; padding:.35rem; border:0; background:transparent; color:var(--ink); cursor:pointer; transition:color .2s ease; }
.sound-toggle:hover,.sound-toggle:focus-visible { color:var(--pink); }
.sound-toggle svg { grid-area:1/1; }
.sound-toggle .icon-off,.sound-toggle.is-muted .icon-on { display:none; }
.sound-toggle.is-muted .icon-off { display:block; }

.hero { align-self:center; display:grid; grid-template-columns:minmax(0,1.18fr) minmax(330px,.82fr); align-items:center; gap:2rem; padding:3rem 0 5rem; }
.hero-copy { position:relative; z-index:2; }
h1 { margin:0; max-width:900px; font-size:clamp(3.55rem,7vw,7.25rem); line-height:.9; letter-spacing:-.068em; font-weight:700; }
h1 span { color:transparent; background:linear-gradient(92deg,var(--cyan-ink) 0 30%,var(--pink) 48% 68%,var(--yellow-ink) 85%); background-clip:text; -webkit-background-clip:text; }
.intro { max-width:560px; margin:2.15rem 0 0; color:var(--muted); font-size:clamp(1rem,1.45vw,1.16rem); line-height:1.72; }

.progress-wrap { width:min(480px,100%); margin-top:3rem; }
.progress-heading { display:flex; justify-content:space-between; color:#33333a; font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; }
.progress-heading span:last-child { color:#8a8a92; }
.progress-track { height:3px; margin-top:.85rem; display:flex; gap:4px; background:rgba(0,0,0,.1); }
.progress-track span { display:block; height:100%; animation:breathe 3.8s ease-in-out infinite; }
.progress-track .cyan { width:22%; background:var(--cyan); box-shadow:0 0 13px rgba(0,240,246,.55); }
.progress-track .pink { width:25%; background:var(--pink); box-shadow:0 0 13px rgba(250,0,128,.45); animation-delay:.25s; }
.progress-track .yellow { width:17%; background:var(--yellow); box-shadow:0 0 13px rgba(255,201,82,.4); animation-delay:.5s; }

.mascot-stage { position:relative; min-height:480px; display:grid; place-items:center; }
.mascot-stage::before { content:""; position:absolute; width:72%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgba(0,0,0,.05),transparent 67%); }
.mascot-stage img { position:relative; z-index:2; display:block; width:min(92%,440px); height:auto; filter:drop-shadow(0 28px 36px rgba(0,0,0,.22)); animation:float 6s ease-in-out infinite; }
.shadow { position:absolute; z-index:1; width:52%; height:5%; border-radius:50%; bottom:8%; background:rgba(250,0,128,.2); filter:blur(18px); animation:shadow 6s ease-in-out infinite; }

/* --- Contact ------------------------------------------------------------ */

.contact { border-top:1px solid rgba(0,0,0,.09); scroll-margin-top:1rem; }
.contact-inner { width:min(100% - 4rem,1360px); margin-inline:auto; padding:5.5rem 0 4.5rem; display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(2.5rem,6vw,5rem); align-items:start; }

h2 { margin:0; font-size:clamp(2.4rem,4.4vw,3.6rem); line-height:1; letter-spacing:-.05em; font-weight:700; }
.contact-lead { max-width:38ch; margin:1.4rem 0 0; color:var(--muted); font-size:1.02rem; line-height:1.7; }
.contact-address { margin-top:2.4rem; padding-top:1.8rem; border-top:1px solid rgba(0,0,0,.09); font-style:normal; color:var(--muted); font-size:.92rem; line-height:1.85; }
.contact-address strong { display:block; color:var(--ink); font-size:.74rem; letter-spacing:.15em; text-transform:uppercase; margin-bottom:.35rem; }

.contact-form { display:grid; gap:1.35rem; max-width:640px; }
.botcheck { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.field { display:grid; gap:.55rem; }
.field label { font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#33333a; }
.field input,.field textarea { width:100%; padding:.9rem 1rem; border:1px solid rgba(0,0,0,.16); border-radius:2px; background:#fff; color:var(--ink); font:inherit; font-size:1rem; transition:border-color .18s ease,box-shadow .18s ease; }
.field textarea { resize:vertical; min-height:8rem; line-height:1.6; }
.field input:focus-visible,.field textarea:focus-visible { outline:none; border-color:var(--pink); box-shadow:0 0 0 3px rgba(250,0,128,.16); }
.field input:user-invalid,.field textarea:user-invalid { border-color:var(--pink); }

.submit { justify-self:start; padding:.95rem 2.1rem; border:0; border-radius:2px; background:var(--ink); color:#fff; font:inherit; font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; cursor:pointer; transition:background .2s ease,transform .12s ease; }
.submit:hover:not(:disabled) { background:var(--pink); }
.submit:active:not(:disabled) { transform:translateY(1px); }
.submit:disabled { opacity:.5; cursor:not-allowed; }

.form-status { margin:0; min-height:1.2rem; font-size:.9rem; line-height:1.5; }
.form-status.is-pending { color:var(--muted); }
.form-status.is-ok { color:#0a7d4b; }
.form-status.is-error { color:var(--pink); }

footer { padding:1.5rem 0 2rem; color:#8a8a92; font-size:.7rem; letter-spacing:.13em; text-transform:uppercase; display:flex; align-items:center; justify-content:space-between; }

@keyframes breathe { 50% { opacity:.5; } }
@keyframes float { 50% { transform:translateY(-15px) rotate(-1deg); } }
@keyframes shadow { 50% { transform:scale(.86); opacity:.65; } }

@media (max-width:900px) {
  .site-header,footer,.hero,.contact-inner { width:min(100% - 2.5rem,1360px); }
  .contact-inner { grid-template-columns:1fr; padding:4rem 0 3.5rem; }
  .hero { grid-template-columns:1fr; padding:1rem 0 3.5rem; gap:1.5rem; }
  .hero-copy { padding-top:1.5rem; }
  h1 { font-size:clamp(3.45rem,13vw,6.5rem); }
  .mascot-stage { position:absolute; width:min(48vw,360px); min-height:0; aspect-ratio:1; right:-6vw; top:7.8rem; z-index:0; opacity:.88; }
  .mascot-stage img { width:100%; }
  .shadow { display:none; }
  .intro { max-width:66%; }
  .progress-wrap { margin-top:2.6rem; }
}

@media (max-width:580px) {
  .site-header { padding-top:1.4rem; }
  .brand { width:8rem; }
  .hero { align-self:end; padding-top:9.5rem; }
  .mascot-stage { width:57vw; right:-9vw; top:5.7rem; opacity:.8; }
  h1 { font-size:clamp(3.25rem,15vw,5rem); }
  .intro { max-width:100%; font-size:1rem; }
  .site-nav { gap:1rem; }
  .site-nav a { font-size:.68rem; }
  footer span:last-child { display:none; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; }
}