/* ============================================================
   raydeck.app — single style source (token plan lives here)
   Concept: dark ocean editorial. Deep-ink page, paper text,
   one crimson CTA per viewport; the family tile grid is the
   color moment. No JS required by any rule below.
   ============================================================ */

:root {
  /* color — family palette pulled from the shipped app icons */
  --ink-950: #081521; /* page background: darkest sea, below raytail tile */
  --ink-900: #0c2432; /* raised surface: raytail tile dark stop */
  --ink-800: #173b50; /* card surface / borders base: raytail tile light stop */
  --paper: #fdfbf7;   /* primary text: family paper white */
  --mist: #9fb6c6;    /* secondary text: ink-tinted gray, AA on ink-950 */
  --azure: #75c8eb;   /* links, focus, glow: family manta azure */
  --crimson: #e2594a; /* the one CTA color: RayPDF tile top stop */
  --crimson-deep: #a72d23; /* CTA gradient bottom stop */
  --amber: #f6b83c;   /* status chips only — scarce by design */
  --line: rgba(117, 200, 235, 0.14); /* hairlines: azure at whisper opacity */

  /* type — system stack: we sell native-feeling desktop tools */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display",
    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple SD Gothic Neo",
    "Malgun Gothic", sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;

  /* spacing — 4px base scale; section rhythm is 96/56 */
  --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --s7: 48px; --s8: 64px; --s9: 96px;
  --container: 1120px;

  --r-card: 14px;
  --r-btn: 10px;
  --shadow-frame: 0 24px 70px rgba(2, 8, 14, 0.55); /* screenshot frames only */
}

/* ---------- Korean typography ----------
   keep-all stops mid-word line breaks; CJK needs gentler negative tracking */
:lang(ko) { word-break: keep-all; overflow-wrap: anywhere; }
/* Japanese: no keep-all (no spaces to break at), and put JP system fonts ahead
   of the Korean ones so kana/kanji don't render through CJK-KR fallbacks */
:lang(ja) {
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN",
    "Yu Gothic UI", "Yu Gothic", Meiryo, "Segoe UI", Roboto, sans-serif;
}
:lang(ko) .display { letter-spacing: -0.012em; }
:lang(ko) .h2 { letter-spacing: -0.008em; }
:lang(ko) .kicker { letter-spacing: 0.14em; }

/* ---------- reset-ish ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background: var(--ink-950);
  color: var(--paper);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--azure); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
::selection { background: rgba(226, 89, 74, 0.4); }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--s5); }

/* ---------- type roles ---------- */
.display {
  font-size: clamp(2.3rem, 5.2vw, 3.7rem);
  font-weight: 800;
  letter-spacing: -0.022em;
  line-height: 1.08;
}
/* stanza headline: short stacked lines keep their <br> breaks at every width,
   so the size must fit the longest line on a 375px screen (8vw floor math);
   the Japanese first line runs 12 glyphs, hence the tighter 7vw scale */
.display.stanza { font-size: clamp(1.85rem, 8vw, 3.7rem); line-height: 1.14; }
.display.stanza:lang(ja) { font-size: clamp(1.65rem, 7vw, 3.7rem); }
.h2 {
  font-size: clamp(1.45rem, 3vw, 2rem);
  font-weight: 750;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.h3 { font-size: 1.06rem; font-weight: 700; letter-spacing: -0.005em; }
.kicker {
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--azure);
}
.lede { font-size: clamp(1.02rem, 1.6vw, 1.18rem); color: var(--mist); max-width: 40em; }
.muted { color: var(--mist); }
.small { font-size: 0.86rem; }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(8, 21, 33, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  display: flex; align-items: center; gap: var(--s5);
  height: 60px;
}
.nav-logo { display: flex; align-items: center; gap: 10px; color: var(--paper); font-weight: 750; letter-spacing: -0.01em; white-space: nowrap; }
.nav-logo:hover { text-decoration: none; }
.nav-logo svg { width: 26px; height: 26px; }
.nav-links { display: flex; gap: var(--s5); margin-left: auto; align-items: center; }
.nav-links > a { color: var(--mist); font-size: 0.94rem; font-weight: 550; }
.nav-links > a:hover { color: var(--paper); text-decoration: none; }
.nav-links > a.active { color: var(--paper); }

/* language combo box: custom details/summary dropdown so the OPEN menu is
   styled too (a native select's popup can't be). Links inside navigate without
   JS; assets/lang-suggest.js adds choice memory, outside-click and Esc close. */
.lang-menu { position: relative; }
.lang-menu summary {
  list-style: none;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(23, 59, 80, 0.25);
  color: var(--paper);
  font-size: 0.84rem; font-weight: 600;
  cursor: pointer; user-select: none;
  transition: border-color 120ms ease;
}
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary::marker { content: ""; }
.lang-menu summary:hover { border-color: rgba(117, 200, 235, 0.55); }
.lang-menu summary:focus-visible { outline: 2px solid var(--azure); outline-offset: 2px; }
.lang-menu .chev { transition: transform 140ms ease; color: var(--mist); }
.lang-menu[open] .chev { transform: rotate(180deg); }
.lang-menu[open] summary { border-color: rgba(117, 200, 235, 0.55); }
.lang-menu ul {
  position: absolute; right: 0; top: calc(100% + 8px);
  margin: 0; padding: 6px; list-style: none;
  min-width: 168px;
  background: var(--ink-900);
  border: 1px solid rgba(117, 200, 235, 0.25);
  border-radius: 12px;
  box-shadow: 0 16px 44px rgba(2, 8, 14, 0.6);
  z-index: 70;
}
.lang-menu li a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--mist);
  font-size: 0.9rem; font-weight: 550;
}
.lang-menu li a:hover { background: rgba(117, 200, 235, 0.12); color: var(--paper); text-decoration: none; }
.lang-menu li a.active { color: var(--paper); }
.lang-menu li a.active::after {
  content: "";
  width: 14px; height: 14px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.5 6 11l5.5-8' stroke='%2375c8eb' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat center / contain;
}
@media (prefers-reduced-motion: no-preference) {
  .lang-menu[open] ul { animation: menu-in 140ms ease; }
  @keyframes menu-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

/* ---------- buttons: one state grammar, consistent deltas ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 22px;
  border-radius: var(--r-btn);
  font-weight: 650; font-size: 0.98rem;
  border: 1px solid transparent;
  transition: transform 120ms ease, filter 120ms ease, border-color 120ms ease, background 120ms ease;
  cursor: pointer;
  white-space: nowrap; /* a button label must never wrap (KO labels broke the mobile nav) */
}
.btn:hover { text-decoration: none; transform: translateY(-1px); filter: brightness(1.07); }
.btn:active { transform: translateY(0); filter: brightness(0.96); }
.btn:focus-visible { outline: 2px solid var(--azure); outline-offset: 2px; }
.btn-primary {
  background: linear-gradient(180deg, var(--crimson), var(--crimson-deep));
  color: #fff;
  box-shadow: 0 8px 24px rgba(226, 89, 74, 0.28);
}
.btn-ghost {
  border-color: rgba(117, 200, 235, 0.35);
  color: var(--paper);
  background: rgba(23, 59, 80, 0.25);
}
.btn-ghost:hover { border-color: rgba(117, 200, 235, 0.65); }
.btn-small { padding: 9px 16px; font-size: 0.9rem; }

/* App Store badge link: the artwork is the button, so no chrome of ours */
.badge-link { display: inline-flex; border-radius: var(--r-btn); }
.badge-link:hover { filter: brightness(1.1); }
.badge-link svg, .badge-link img { height: 48px; width: auto; }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; padding: var(--s9) 0 var(--s8); }
.hero-grid { position: relative; z-index: 1; display: grid; gap: var(--s6); }
.hero .lede { margin-top: var(--s5); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--s4); margin-top: var(--s6); align-items: center; }
.hero-note { margin-top: var(--s4); font-size: 0.86rem; color: var(--mist); }

/* ocean glow: two soft radials, azure northeast + crimson southwest */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(52% 44% at 82% 6%, rgba(117, 200, 235, 0.16), transparent 70%),
    radial-gradient(40% 38% at 8% 96%, rgba(226, 89, 74, 0.12), transparent 72%);
}
/* faint manta drifting behind hero copy */
.hero-manta {
  position: absolute; right: -40px; top: 44px; width: 460px; opacity: 0.28;
  filter: drop-shadow(0 0 26px rgba(117, 200, 235, 0.25));
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-manta { animation: drift 14s ease-in-out infinite alternate; }
  @keyframes drift {
    from { transform: translate(0, 0) rotate(-3deg); }
    to { transform: translate(-24px, 18px) rotate(2deg); }
  }
}

/* ---------- sections ---------- */
.section { padding: var(--s9) 0; }
.section-tight { padding: var(--s8) 0; }
.section-head { margin-bottom: var(--s7); display: grid; gap: var(--s3); }
.divider { border: 0; border-top: 1px solid var(--line); }
.privacy-policy-link { margin-top: var(--s2); }

/* ---------- legal documents ---------- */
.legal-hero { padding: var(--s9) 0 var(--s6); }
.legal-shell { max-width: 820px; }
.legal-hero .legal-shell { display: grid; gap: var(--s3); }
.legal-document {
  display: grid;
  gap: var(--s5);
  padding: clamp(var(--s5), 5vw, var(--s8));
  border: 1px solid var(--line);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(23, 59, 80, 0.28), rgba(12, 36, 50, 0.48));
}
.legal-document section {
  display: grid;
  gap: var(--s3);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
}
.legal-document h2 {
  font-size: 1.16rem;
  line-height: 1.35;
  color: var(--paper);
}
.legal-document p { color: var(--mist); }
.legal-date { color: var(--azure); font-size: 0.9rem; font-weight: 650; }
.legal-note {
  padding: var(--s4) var(--s5);
  border-left: 3px solid var(--azure);
  border-radius: 0 var(--r-card) var(--r-card) 0;
  background: rgba(117, 200, 235, 0.08);
  color: var(--mist);
}
.legal-note + .legal-document { margin-top: var(--s5); }
.legal-back { display: inline-flex; margin-top: var(--s5); font-weight: 650; }

/* ---------- flagship band (index) ---------- */
.flagship {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(23, 59, 80, 0.35), rgba(12, 36, 50, 0.55));
  padding: var(--s7);
  display: grid; gap: var(--s7);
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
}
.flagship-copy { display: grid; gap: var(--s4); justify-items: start; }
.flagship-icon { width: 84px; height: 84px; border-radius: 20px; box-shadow: 0 10px 30px rgba(167, 45, 35, 0.4); }
.flagship-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); margin-top: var(--s2); }

/* window-framed screenshot */
.frame {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(117, 200, 235, 0.22);
  box-shadow: var(--shadow-frame);
  background: #0b0b0c;
}
.frame img { width: 100%; }

/* ---------- family grid ---------- */
.family-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--s4);
}
.product-card {
  display: grid; grid-template-columns: 56px 1fr; gap: var(--s4);
  align-items: start;
  padding: var(--s5);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: rgba(12, 36, 50, 0.45);
  color: var(--paper);
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
}
a.product-card:hover {
  text-decoration: none;
  transform: translateY(-2px);
  border-color: rgba(117, 200, 235, 0.4);
  background: rgba(23, 59, 80, 0.5);
}
.product-card .icon { width: 56px; height: 56px; border-radius: 14px; }
.product-card h3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.product-card p { color: var(--mist); font-size: 0.92rem; line-height: 1.5; margin-top: 4px; }

.chip {
  display: inline-block;
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
  white-space: nowrap;
}
.chip-live { color: #082015; background: rgba(148, 184, 107, 0.9); }
.chip-soon { color: var(--ink-950); background: var(--amber); }
.chip-dev { color: var(--mist); border: 1px solid var(--line); }

/* ---------- principles ---------- */
.principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
.principle {
  padding: var(--s5);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: rgba(12, 36, 50, 0.3);
  display: grid; gap: var(--s2); align-content: start;
}
.principle .glyph { width: 34px; height: 34px; color: var(--azure); }
.principle p { color: var(--mist); font-size: 0.92rem; }

/* ---------- feature grid (product page) ---------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
}
.feature {
  padding: var(--s5);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: rgba(12, 36, 50, 0.3);
  display: grid; gap: var(--s2); align-content: start;
}
.feature .glyph { width: 30px; height: 30px; color: var(--azure); }
.feature p { color: var(--mist); font-size: 0.92rem; }

/* product hero */
.product-hero { display: grid; gap: var(--s6); justify-items: center; text-align: center; padding-top: var(--s8); }
.product-hero .app-icon { width: 108px; height: 108px; border-radius: 26px; box-shadow: 0 14px 40px rgba(167, 45, 35, 0.45); }
.product-hero .lede { margin: 0 auto; }
.product-hero .hero-ctas { justify-content: center; margin-top: var(--s2); }
.raygit-hero .app-icon { box-shadow: 0 14px 40px rgba(64, 139, 211, 0.4); }

/* RayGit product promise: a real information hierarchy, not a fake app mockup */
.promise-band {
  width: 100%;
  margin-top: var(--s6);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(23, 59, 80, 0.35), rgba(12, 36, 50, 0.55));
}
.promise-band > div { padding: var(--s5); display: grid; gap: var(--s2); }
.promise-band > div + div { border-left: 1px solid var(--line); }
.promise-band strong { font-size: 1.08rem; }
.promise-band p { color: var(--mist); font-size: 0.92rem; }
.promise-number {
  color: var(--azure);
  font: 650 0.76rem/1 var(--font-mono);
  letter-spacing: 0.08em;
}

.clarity-section {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(12, 36, 50, 0.28);
}
.clarity-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  gap: var(--s7);
  align-items: start;
}
.clarity-grid > div { display: grid; gap: var(--s3); }
.plain-list {
  display: grid;
  gap: var(--s2);
  margin-top: var(--s4);
  padding-left: 1.2em;
  color: var(--mist);
}
.plain-list li::marker { color: var(--azure); }

/* screenshot tabs (dark/light) */
.shot-stack { display: grid; gap: var(--s3); justify-items: center; margin-top: var(--s7); }
.shot-note { font-size: 0.86rem; color: var(--mist); }
.raygit-shot { width: 100%; }
.raygit-shot .frame { width: 100%; max-width: var(--container); }
.raygit-shot .shot-note { max-width: 72em; text-align: center; }

/* platform cards */
.platforms { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.platform {
  padding: var(--s6);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: rgba(12, 36, 50, 0.4);
  display: grid; gap: var(--s3); justify-items: start; align-content: start;
}
.platform .h3 { display: flex; gap: 10px; align-items: center; }
.platform p { color: var(--mist); font-size: 0.93rem; }
.release-platforms { grid-template-columns: repeat(3, 1fr); }
.release-platforms .platform { position: relative; }
.release-platforms .chip { justify-self: start; }
.platform-first {
  border-color: rgba(117, 200, 235, 0.48);
  background:
    radial-gradient(90% 80% at 100% 0, rgba(117, 200, 235, 0.12), transparent 70%),
    rgba(12, 36, 50, 0.5);
}
.availability {
  margin-top: auto;
  padding-top: var(--s3);
  color: var(--paper);
  font-size: 0.88rem;
  font-weight: 650;
}

/* ---------- language suggestion banner (injected by assets/lang-suggest.js) ---------- */
.lang-banner {
  /* left+right insets, not left:50%+translate: shrink-to-fit against a 50%-wide
     containing block collapses CJK text to one glyph per line on phones */
  position: fixed; left: 16px; right: 16px; bottom: 20px;
  margin: 0 auto; width: fit-content; max-width: 560px;
  z-index: 60;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: var(--s2) var(--s4);
  padding: 12px 18px;
  background: var(--ink-800);
  border: 1px solid rgba(117, 200, 235, 0.35);
  border-radius: var(--r-card);
  box-shadow: 0 12px 40px rgba(2, 8, 14, 0.55);
  font-size: 0.9rem;
}
.lang-banner span { color: var(--paper); }
.lang-banner-go { font-weight: 650; white-space: nowrap; }
.lang-banner-close {
  background: none; border: 0; padding: 4px 6px;
  color: var(--mist); cursor: pointer;
  font: inherit; font-size: 0.84rem; white-space: nowrap;
}
.lang-banner-close:hover { color: var(--paper); }
@media (prefers-reduced-motion: no-preference) {
  .lang-banner { animation: banner-in 240ms ease; }
  @keyframes banner-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--line); padding: var(--s7) 0; margin-top: var(--s8); }
.footer-inner { display: flex; flex-wrap: wrap; gap: var(--s5); align-items: center; }
.footer .nav-logo svg { width: 22px; height: 22px; }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--s5); margin-left: auto; }
.footer-links a, .footer .muted { font-size: 0.88rem; }
.footer-links a { color: var(--mist); }
.footer-links a:hover { color: var(--paper); }

/* ---------- responsive ----------
   breakpoints: 900 collapses two-col bands, 640 tightens rhythm */
@media (max-width: 900px) {
  .flagship { grid-template-columns: 1fr; padding: var(--s6); }
  .feature-grid, .principles { grid-template-columns: 1fr 1fr; }
  .platforms, .release-platforms { grid-template-columns: 1fr; }
  .clarity-grid { grid-template-columns: 1fr; }
  .hero-manta { width: 320px; right: -70px; opacity: 0.18; }
}
@media (max-width: 640px) {
  .section { padding: var(--s8) 0; }
  .hero { padding: var(--s8) 0 var(--s7); }
  .legal-hero { padding: var(--s8) 0 var(--s5); }
  .legal-document { padding: var(--s5); }
  .display:not(.stanza) br { display: none; } /* long one-sentence headlines wrap naturally on narrow screens */
  .feature-grid, .principles { grid-template-columns: 1fr; }
  .promise-band { grid-template-columns: 1fr; }
  .promise-band > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .nav-links > a:not(.btn) { display: none; } /* mobile nav = logo + CTA + language pill */
  .nav-links { gap: var(--s3); }
  .nav-inner { gap: var(--s3); }
  .btn-small { padding: 8px 12px; font-size: 0.86rem; }
  .lang-menu summary { padding: 6px 9px; font-size: 0.8rem; gap: 6px; }
  .lang-menu summary > span { display: none; } /* phone nav: globe + chevron only */
  .footer-inner, .footer-links { justify-content: center; }
  .footer-links { margin-left: 0; }
}