/* Huyuka landing page. Self-contained by necessity: the site's CSP is
   default-src 'none' with style-src/img-src 'self' only — no inline styles,
   no external fonts, no CDNs. System font stack, self-hosted images. */

:root {
  --navy: #1b2a5e;
  --navy-deep: #14204a;
  --red: #d62b2b;
  --ink: #16203f;
  --muted: #5b6b8a;
  --bg: #ffffff;
  --bg-soft: #f4f7fc;
  --line: #e4ebf6;
  --shadow: 0 18px 40px -24px rgba(20, 32, 74, 0.45);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", "Noto Sans JP", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(1200px 620px at 50% -8%, #eaf0fb 0%, rgba(234, 240, 251, 0) 62%),
    linear-gradient(180deg, #ffffff 0%, var(--bg-soft) 100%);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.page {
  max-width: 1060px;
  margin: 0 auto;
  padding: clamp(28px, 6vw, 72px) 22px 40px;
}

/* --- Hero: full-bleed wallpaper + brand card --- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: clamp(24px, 5vh, 52px) clamp(20px, 5vw, 60px);
  background: #bfe0f5 url("/wallpaper.jpg?v=1") center / cover no-repeat;
  overflow: hidden;
}

/* Gentle scrim: adds depth top/bottom and lifts the card off a bright,
   busy photo without hiding the scene. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(11, 18, 40, 0.24) 0%,
    rgba(11, 18, 40, 0.06) 42%,
    rgba(11, 18, 40, 0.4) 100%
  );
}

.card {
  position: relative;
  z-index: 1;
  width: min(336px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(22px, 3.4vw, 30px) clamp(20px, 3vw, 26px);
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(9px) saturate(1.15);
  backdrop-filter: blur(9px) saturate(1.15);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 22px;
  box-shadow: 0 28px 60px -28px rgba(11, 18, 40, 0.62);
}

/* The card sits on the bright wallpaper in EVERY OS theme, so its text and
   button use fixed colors, not the theme tokens (which flip light in dark
   mode and would vanish on the white card). */
.card .tagline { color: #1b2a5e; }
.card .subtag { color: #55658a; }
.card .cta { background: #1b2a5e; color: #fff; }
.card .cta:hover { background: #14204a; }
.card .cta-note { color: #55658a; }

.brandmark {
  width: clamp(72px, 17vw, 90px);
  height: auto;
  filter: drop-shadow(0 8px 18px rgba(20, 32, 74, 0.16));
}

.wordmark {
  width: min(80%, 224px);
  height: auto;
  margin-top: 10px;
}

.tagline {
  margin: clamp(15px, 2.6vw, 20px) 0 0;
  font-size: clamp(1.22rem, 3vw, 1.55rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--navy);
  text-wrap: balance;
}

.subtag {
  margin: 11px 0 0;
  font-size: clamp(0.88rem, 1.9vw, 0.98rem);
  color: var(--muted);
  max-width: 32ch;
}

.cta {
  display: inline-block;
  margin-top: clamp(18px, 3vw, 24px);
  padding: 13px 28px;
  background: var(--navy);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  border-radius: 999px;
  box-shadow: var(--shadow);
  transition: transform 0.15s ease, background-color 0.15s ease,
    box-shadow 0.15s ease;
}

.cta:hover {
  background: var(--navy-deep);
  transform: translateY(-2px);
  box-shadow: 0 22px 46px -22px rgba(20, 32, 74, 0.6);
}

.cta:active { transform: translateY(0); }

.cta:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
}

.cta-note {
  margin: 12px 0 0;
  font-size: 0.86rem;
  color: var(--muted);
}

/* --- Features --- */
.features {
  margin-top: clamp(48px, 8vw, 84px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.feature {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 26px 24px;
  box-shadow: 0 10px 30px -26px rgba(20, 32, 74, 0.5);
}

.icon {
  width: 40px;
  height: 40px;
  fill: none;
  stroke: var(--navy);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.feature h2 {
  margin: 16px 0 8px;
  font-size: 1.16rem;
  font-weight: 700;
  color: var(--navy);
}

.feature p {
  margin: 0;
  color: var(--muted);
  font-size: 0.98rem;
}

/* --- Footer --- */
.foot {
  margin-top: clamp(46px, 8vw, 76px);
  padding-top: 26px;
  border-top: 1px solid var(--line);
  text-align: center;
}

.foot-brand {
  margin: 0;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: 0.04em;
}

.foot-fine {
  margin: 6px 0 0;
  font-size: 0.9rem;
  color: var(--red);
  font-weight: 600;
}

/* --- Entrance motion --- */
@media (prefers-reduced-motion: no-preference) {
  .hero > *, .feature, .foot {
    animation: rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  .brandmark { animation-delay: 0.02s; }
  .wordmark { animation-delay: 0.08s; }
  .tagline { animation-delay: 0.14s; }
  .subtag { animation-delay: 0.2s; }
  .cta { animation-delay: 0.26s; }
  .cta-note { animation-delay: 0.32s; }
  .feature:nth-child(1) { animation-delay: 0.34s; }
  .feature:nth-child(2) { animation-delay: 0.42s; }
  .feature:nth-child(3) { animation-delay: 0.5s; }

  @keyframes rise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

/* --- Responsive --- */
@media (max-width: 720px) {
  .hero { justify-content: center; padding-top: clamp(30px, 9vh, 60px); }
  .card { width: min(380px, 100%); }
  .features { grid-template-columns: 1fr; gap: 14px; }
  .feature { padding: 22px 20px; }
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #eaf0fb;
    --muted: #9fb0d0;
    --bg: #172142;
    --bg-soft: #0f1732;
    --line: #26315a;
    --navy: #a9bdf0;
    --navy-deep: #8ea6e8;
  }
  body {
    background:
      radial-gradient(1200px 620px at 50% -8%, #1a244a 0%, rgba(26, 36, 74, 0) 62%),
      linear-gradient(180deg, #0f1732 0%, #0b1228 100%);
  }
  .cta { color: #0f1732; }
}