/* ==========================================================================
   GARYO INC. — Design System
   Dark, editorial, engineering-driven visual language.
   ========================================================================== */

/* --- Tokens --------------------------------------------------------------- */
/* Base surfaces started at near-pure black (#04070a, relative luminance ~0.2%),
   which reads as a black hole on a corporate site: sections, cards and the footer
   all collapsed into the same void. The ramp below sits at ~1.0% luminance —
   still unmistakably dark and "cool", but with real tonal separation so the page
   looks engineered rather than merely dim. */
:root {
  --ink: #121a23;
  --ink-1: #18212c;
  --ink-2: #1e2937;
  --ink-3: #263340;
  /* for translucent veils: rgba(var(--ink-rgb), a) */
  --ink-rgb: 18, 26, 35;

  --line: rgba(255, 255, 255, 0.11);
  --line-strong: rgba(255, 255, 255, 0.2);

  --txt: #eef3f8;
  --txt-soft: #b8c4d0;
  --muted: #8b98a8;

  --accent: #00e5a0;
  --accent-dim: #00b37c;
  --accent-glow: rgba(0, 229, 160, 0.28);
  --sky: #4cc9f0;

  --font-jp: "Noto Sans JP", system-ui, -apple-system, "Hiragino Sans", sans-serif;
  --font-en: "Space Grotesk", "Noto Sans JP", sans-serif;

  --wrap: min(1240px, calc(100vw - 48px));
  --radius: 2px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --header-h: 76px;
}

/* --- Reset ---------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--ink);
  color: var(--txt);
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 1.9;
  font-feature-settings: "palt" 1;
  letter-spacing: 0.02em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, figure, dl, dd { margin: 0; }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

::selection { background: var(--accent); color: #04110c; }

/* Film grain / scanline texture */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.035;
  background-image: repeating-linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.7) 0 1px,
    transparent 1px 3px
  );
  mix-blend-mode: overlay;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 10000;
  padding: 12px 20px;
  background: var(--accent);
  color: #04110c;
  font-weight: 700;
}
.skip-link:focus { top: 12px; }

/* --- Layout primitives ---------------------------------------------------- */
.container {
  width: var(--wrap);
  margin-inline: auto;
}

.section {
  position: relative;
  padding: clamp(72px, 11vw, 148px) 0;
}

.section--tight { padding: clamp(56px, 8vw, 104px) 0; }

.section--alt {
  background:
    linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.028) 12%, rgba(255, 255, 255, 0.028) 88%, transparent);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* Faint technical grid used behind sections */
.grid-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 88px 88px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 10%, transparent 78%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 10%, transparent 78%);
  opacity: 0.7;
}

/* --- Type ----------------------------------------------------------------- */
.display {
  font-family: var(--font-en);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.02;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-en);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--accent);
}

.eyebrow::before {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--accent);
  opacity: 0.75;
}

.eyebrow--muted { color: var(--muted); }
.eyebrow--muted::before { background: var(--muted); }

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  margin-bottom: clamp(36px, 5vw, 64px);
}

.section-title {
  font-size: clamp(1.65rem, 3.4vw, 2.85rem);
  font-weight: 700;
  line-height: 1.34;
  letter-spacing: 0.01em;
}

.section-title .en {
  display: block;
  font-family: var(--font-en);
  font-size: 0.42em;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 14px;
}

.lead {
  color: var(--txt-soft);
  font-size: clamp(0.94rem, 1.15vw, 1.03rem);
  line-height: 2.05;
  max-width: 60ch;
}

.accent { color: var(--accent); }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  --btn-bg: var(--accent);
  --btn-fg: #04110c;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 54px;
  padding: 0 30px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  overflow: hidden;
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), background 0.3s ease, color 0.3s ease;
}

.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.5) 50%, transparent 80%);
  transform: translateX(-120%);
  transition: transform 0.8s var(--ease);
}

.btn:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -16px var(--accent-glow); }
.btn:hover::after { transform: translateX(120%); }

.btn .arrow {
  font-family: var(--font-en);
  transition: transform 0.4s var(--ease);
}
.btn:hover .arrow { transform: translateX(4px); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--txt);
  border-color: var(--line-strong);
}
.btn--ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 16px 40px -24px var(--accent-glow);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* --- Header --------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  transition: background 0.4s ease, border-color 0.4s ease, backdrop-filter 0.4s ease;
  border-bottom: 1px solid transparent;
}

.site-header.is-scrolled {
  background: rgba(var(--ink-rgb), 0.86);
  border-bottom-color: var(--line);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}

.site-header__inner {
  width: var(--wrap);
  margin-inline: auto;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* --- Brand lockup ---------------------------------------------------------
   ONE link = ONE image. images/logo-lockup-3d.png is a finished, transparent
   composite supplied by the owner: the 3D-rendered cube followed by the white
   "GARYO INC." lettering, already spaced and already in the right colour.

   Its measurements are why no CSS compositing is needed any more:
     639x202, all four corners rgba(0,0,0,0), 73.8% of the file is transparent
     cube  x=9..161   y=17..186
     text  x=183..633 y=86..166      gap between them: 21px
   The ink is centred vertically in the file (content centre y=101 of 202), so
   `align-items: center` lines it up optically with no manual nudge.

   Earlier revisions assembled this from separate files and had to crop and
   invert them; that machinery is gone. Displaying the supplied composite whole
   cannot drift out of registration, and nothing is recoloured. */
.brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

/* 202/639 of 40px => cube ~34px, lettering ~16px: sits inside the 76px header
   with room on both sides. Width is written out because a percentage width on
   an inline-level image can resolve against a shrink-to-fit parent. */
.brand__lockup,
.footer-brand__lockup {
  display: block;
  flex-shrink: 0;
  height: 40px;
  width: calc(40px * 639 / 202);
  /* opt out of the global `img { max-width: 100%; height: auto; }`, which would
     otherwise clamp the width while the fixed height stayed put and squash it */
  max-width: none;
  max-height: none;
}

.footer-brand__lockup {
  height: 42px;
  width: calc(42px * 639 / 202);
}

@media (max-width: 560px) {
  .brand__lockup {
    height: 34px;
    width: calc(34px * 639 / 202);
  }
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.6vw, 38px);
}

.nav a {
  position: relative;
  font-family: var(--font-en);
  font-size: 0.73rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--txt-soft);
  padding: 6px 0;
  transition: color 0.3s ease;
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease);
}

.nav a:hover,
.nav a[aria-current="page"] { color: var(--txt); }
.nav a:hover::after,
.nav a[aria-current="page"]::after { transform: scaleX(1); }

.header-cta { display: inline-flex; }

.nav-toggle {
  display: none;
  position: relative;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line-strong);
  background: transparent;
  cursor: pointer;
  border-radius: var(--radius);
}

.nav-toggle span {
  position: absolute;
  left: 13px;
  width: 20px;
  height: 1.5px;
  background: var(--txt);
  transition: transform 0.4s var(--ease), opacity 0.3s ease;
}
.nav-toggle span:nth-child(1) { top: 18px; }
.nav-toggle span:nth-child(2) { top: 24px; }
.nav-toggle span:nth-child(3) { top: 30px; }

.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile drawer */
@media (max-width: 900px) {
  .nav-toggle { display: block; }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 24px 28px;
    background: rgba(var(--ink-rgb), 0.98);
    border-bottom: 1px solid var(--line);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, transform 0.35s var(--ease), visibility 0.35s;
  }

  .nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .nav a {
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
    font-size: 0.82rem;
  }
  .nav a::after { display: none; }

  .header-cta { display: none; }
}

/* --- Hero ----------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: calc(var(--header-h) + 7vh) 0 88px;
  overflow: hidden;
  isolation: isolate;
}

/* Hero artwork is a generated 2336x992 (2.35:1) panoramic abstract. It is drawn
   as a bottom band whose height stays well under the source height, so it is only
   ever downscaled and therefore stays sharp. (The previous stock photo was a
   1440x400 strip stretched over the full viewport, which upscaled it ~2x.) */
.hero__media {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(280px, 46vh, 460px);
  z-index: -2;
  overflow: hidden;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  animation: heroDrift 30s ease-in-out infinite alternate;
}

@keyframes heroDrift {
  from { transform: scale(1); }
  to { transform: scale(1.03) translate3d(0, -0.8%, 0); }
}

/* Left side stays dark for text legibility; the lower band lets the photo read
   through instead of flattening it to a silhouette. */
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(96deg, rgba(var(--ink-rgb), 0.97) 0%, rgba(var(--ink-rgb), 0.9) 28%, rgba(var(--ink-rgb), 0.42) 56%, rgba(var(--ink-rgb), 0.34) 100%),
    linear-gradient(180deg, var(--ink) 0%, rgba(var(--ink-rgb), 0.94) 30%, rgba(var(--ink-rgb), 0.22) 66%, rgba(var(--ink-rgb), 0.5) 90%, var(--ink) 100%);
}

/* pointer-reactive accent glow */
.hero__glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    420px circle at var(--mx, 72%) var(--my, 34%),
    rgba(0, 229, 160, 0.16),
    transparent 66%
  );
  transition: background 0.25s linear;
}

.hero__grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 120px 120px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 72%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 30%, #000 72%, transparent);
  opacity: 0.55;
}

.hero__inner {
  width: var(--wrap);
  margin-inline: auto;
  position: relative;
}

.hero__eyebrow {
  margin-bottom: 26px;
}

.hero__title {
  font-size: clamp(2.15rem, 5.6vw, 4.5rem);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: 0.005em;
  max-width: 17ch;
}

.hero__title .line {
  display: block;
  overflow: hidden;
}

.hero__title .line > span {
  display: block;
  transform: translateY(105%);
  animation: lineUp 1.1s var(--ease) forwards;
}
.hero__title .line:nth-child(1) > span { animation-delay: 0.12s; }
.hero__title .line:nth-child(2) > span { animation-delay: 0.24s; }
.hero__title .line:nth-child(3) > span { animation-delay: 0.36s; }

@keyframes lineUp {
  to { transform: translateY(0); }
}

.hero__title em {
  font-style: normal;
  color: var(--accent);
  position: relative;
}

.hero__lead {
  margin-top: 30px;
  max-width: 50ch;
  color: var(--txt-soft);
  font-size: clamp(0.9rem, 1.15vw, 1rem);
  line-height: 2.1;
  opacity: 0;
  animation: fadeUp 1s var(--ease) 0.6s forwards;
}

.hero__actions {
  margin-top: 40px;
  opacity: 0;
  animation: fadeUp 1s var(--ease) 0.78s forwards;
}

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

.hero__meta {
  position: absolute;
  right: 0;
  bottom: -20px;
  display: flex;
  gap: 40px;
  opacity: 0;
  animation: fadeUp 1s var(--ease) 0.95s forwards;
}

.hero__meta div {
  border-left: 1px solid var(--line-strong);
  padding-left: 16px;
}

.hero__meta dt {
  font-family: var(--font-en);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

.hero__meta dd {
  font-family: var(--font-en);
  font-size: 1.32rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--txt);
  line-height: 1.3;
}

.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: var(--font-en);
  font-size: 0.58rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
}

.hero__scroll::after {
  content: "";
  width: 1px;
  height: 52px;
  background: linear-gradient(180deg, var(--accent), transparent);
  animation: scrollPulse 2.4s ease-in-out infinite;
  transform-origin: top;
}

@keyframes scrollPulse {
  0%, 100% { transform: scaleY(0.35); opacity: 0.4; }
  50% { transform: scaleY(1); opacity: 1; }
}

/* --- Hero key visual: the official mark ------------------------------------
   The mark is a 3D cube whose edges are glossy near-black. Everything below
   exists to give those dark edges something to sit against on a #121a23 page:
     - a radial "studio plate" that paints through the PNG's transparent corners,
     - a silhouette drop-shadow (it follows the asset's alpha, not its box),
     - two hairline rings for the site's engineering-blueprint feel.
   The cube is only ever drawn at or below its 512px native width, so it stays
   sharp; nothing here recolours, desaturates or crops the artwork. */
.hero__art {
  position: absolute;
  top: 47%;
  right: 0;
  width: clamp(280px, 31vw, 430px);
  aspect-ratio: 1;
  transform: translateY(-55%);
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 1;
}

/* studio plate — the lighter surface under the cube's dark edges */
.hero__art::before {
  content: "";
  position: absolute;
  inset: 17%;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 44%,
    rgba(238, 243, 248, 0.22),
    rgba(238, 243, 248, 0.07) 58%,
    transparent 78%
  );
  filter: blur(7px);
}

/* emerald bloom, tying the mark to the site accent */
.hero__art::after {
  content: "";
  position: absolute;
  inset: 2%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 56%, rgba(0, 229, 160, 0.2), transparent 64%);
  filter: blur(22px);
}

.hero__art-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 1;
}

.hero__art-ring--inner {
  inset: 12%;
  border-color: rgba(255, 255, 255, 0.055);
}

.hero__art-cube {
  position: relative;
  z-index: 2;
  width: 78%;
  height: auto;
  filter:
    drop-shadow(0 30px 50px rgba(0, 0, 0, 0.6))
    drop-shadow(0 0 24px rgba(238, 243, 248, 0.2));
  animation: cubeFloat 9s ease-in-out infinite alternate;
}

@keyframes cubeFloat {
  from { transform: translate3d(0, 9px, 0) rotate(-0.6deg); }
  to   { transform: translate3d(0, -9px, 0) rotate(0.6deg); }
}

/* The mark is a decorative extra: below ~1100px the headline, lead and the
   absolutely-positioned meta row need the full width, so the key visual steps
   aside. It is still present at every width in the header/footer lockups. */
@media (max-width: 1100px) {
  .hero__art { display: none; }
}

@media (max-width: 900px) {
  .hero { min-height: auto; padding-top: calc(var(--header-h) + 68px); padding-bottom: 96px; }
  .hero__media { height: clamp(220px, 32vh, 320px); }
  .hero__media img { object-position: 55% 42%; }
  .hero__veil {
    background:
      linear-gradient(180deg, var(--ink) 0%, rgba(var(--ink-rgb), 0.96) 42%, rgba(var(--ink-rgb), 0.55) 74%, var(--ink) 100%);
  }
  .hero__meta {
    position: static;
    margin-top: 48px;
    gap: 24px;
    flex-wrap: wrap;
  }
  .hero__meta dd { font-size: 1.1rem; }
  .hero__scroll { display: none; }
}

/* --- Marquee -------------------------------------------------------------- */
.marquee {
  position: relative;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.015);
  overflow: hidden;
  padding: 18px 0;
}

.marquee__track {
  display: flex;
  width: max-content;
  gap: 0;
  animation: marquee 42s linear infinite;
}

.marquee:hover .marquee__track { animation-play-state: paused; }

.marquee__group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.marquee__group span {
  font-family: var(--font-en);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 26px;
  white-space: nowrap;
}

.marquee__group span::after {
  content: "◆";
  font-size: 0.5rem;
  color: var(--accent);
  margin-left: 52px;
  vertical-align: middle;
  opacity: 0.8;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* --- Service cards -------------------------------------------------------- */
.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.card {
  position: relative;
  padding: clamp(28px, 3vw, 40px) clamp(24px, 2.6vw, 34px) clamp(32px, 3.4vw, 44px);
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.6s var(--ease), border-color 0.4s ease, background 0.4s ease;
}

.card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(340px circle at 20% 0%, rgba(0, 229, 160, 0.13), transparent 62%);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.card:hover {
  transform: translateY(-6px);
  border-color: rgba(0, 229, 160, 0.36);
  background: linear-gradient(170deg, rgba(0, 229, 160, 0.07), rgba(255, 255, 255, 0.015));
}

.card:hover::before { opacity: 1; }

.card__num {
  display: block;
  font-family: var(--font-en);
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  color: var(--accent);
  margin-bottom: 26px;
}

.card__icon {
  width: 44px;
  height: 44px;
  color: var(--txt-soft);
  margin-bottom: 22px;
  transition: color 0.4s ease, transform 0.6s var(--ease);
}
.card:hover .card__icon { color: var(--accent); transform: translateY(-2px); }

.card h3 {
  position: relative;
  font-size: clamp(1.03rem, 1.5vw, 1.2rem);
  font-weight: 700;
  line-height: 1.6;
  margin-bottom: 16px;
}

.card p {
  position: relative;
  font-size: 0.86rem;
  line-height: 1.95;
  color: var(--txt-soft);
}

.card__tags {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}

.card__tags li {
  font-family: var(--font-en);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line-strong);
  padding: 4px 10px;
  border-radius: 100px;
}

@media (max-width: 980px) {
  .cards { grid-template-columns: 1fr; }
}

/* --- Split (statement) ---------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: clamp(32px, 6vw, 84px);
}

.split--reverse .split__media { order: 2; }

/* Shared frame. Both current usages render the text panel variant, so the
   image-specific rules that used to live here were removed with the soft-focus
   asset they served. The frame itself is kept for the border/overlay. */
.split__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--ink-1);
}

.split__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg, rgba(0, 229, 160, 0.08), transparent 52%, rgba(var(--ink-rgb), 0.34));
  pointer-events: none;
}

/* Illustrated panel replacing the soft-focus photo (wide-02.jpg, now deleted).
   That asset was intrinsically out of focus, so no filter could make it
   identifiable. Here the content is real text and CSS shapes, which therefore
   stays perfectly sharp at every viewport size. */
.split__media--panel {
  aspect-ratio: auto;
  min-height: 340px;
  display: flex;
  align-items: stretch;
  background:
    radial-gradient(ellipse 72% 82% at 80% 10%, rgba(0, 229, 160, 0.18), transparent 62%),
    radial-gradient(ellipse 60% 70% at 5% 95%, rgba(76, 201, 240, 0.14), transparent 66%),
    linear-gradient(160deg, var(--ink-2) 0%, var(--ink-1) 62%);
}

.split__media--panel::after {
  background: linear-gradient(180deg, transparent 58%, rgba(var(--ink-rgb), 0.55) 100%);
}

.tech-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.tech-panel__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.025);
}

.tech-panel__bar span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
}

.tech-panel__bar span:nth-child(1) { background: rgba(255, 106, 106, 0.5); }
.tech-panel__bar span:nth-child(2) { background: rgba(255, 196, 106, 0.45); }
.tech-panel__bar span:nth-child(3) { background: rgba(0, 229, 160, 0.45); }

.tech-panel__bar em {
  margin-left: 8px;
  font-style: normal;
  font-family: var(--font-en);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

.tech-panel__list {
  margin: 0;
  list-style: none;
  padding: clamp(14px, 2.2vw, 22px) clamp(16px, 2.4vw, 24px) clamp(52px, 5vw, 62px);
}

.tech-panel__list li {
  display: grid;
  grid-template-columns: 5.8em minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-size: clamp(0.72rem, 1.05vw, 0.84rem);
  line-height: 1.6;
}

.tech-panel__list li:last-child { border-bottom: 0; }

.tech-panel__list .k {
  font-family: var(--font-en);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.tech-panel__list .v {
  color: var(--txt-soft);
}

.split__badge {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  background: var(--accent);
  color: #04110c;
  font-family: var(--font-en);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 10px 18px;
}

.split__body .section-title { margin: 22px 0 24px; }

.statement {
  font-size: clamp(1.14rem, 1.9vw, 1.42rem);
  line-height: 1.95;
  font-weight: 500;
  color: var(--txt);
  margin-bottom: 24px;
}

.checklist {
  display: grid;
  gap: 14px;
  margin-top: 32px;
}

.checklist li {
  position: relative;
  padding-left: 26px;
  font-size: 0.88rem;
  color: var(--txt-soft);
}

.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 12px;
  height: 1px;
  background: var(--accent);
}

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
}

/* --- Works ---------------------------------------------------------------- */
.filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: clamp(28px, 4vw, 44px);
}

.filter button {
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--txt-soft);
  font-family: var(--font-en);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 10px 18px;
  border-radius: 100px;
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

.filter button:hover { color: var(--txt); border-color: var(--accent); }

.filter button.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #04110c;
  font-weight: 700;
}

.works {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.work {
  position: relative;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.008));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.4s ease, transform 0.6s var(--ease);
}

.work:hover { border-color: rgba(0, 229, 160, 0.34); transform: translateY(-5px); }

.work__media {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.08), transparent 60%),
    var(--ink-1);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px;
  border-bottom: 1px solid var(--line);
}

/* Product logos and screenshots must stay legible: no desaturation, no
   darkening, and never scaled above their natural size. */
.work__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.8s var(--ease);
}

.work:hover .work__media img { transform: scale(1.03); }

.work__media--photo { padding: 0; }
.work__media--photo img { object-fit: cover; }

.work__body {
  padding: 22px 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.work__cat {
  font-family: var(--font-en);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}

.work h3 {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.55;
}

.work p {
  font-size: 0.8rem;
  line-height: 1.85;
  color: var(--muted);
}

.work__year {
  margin-top: auto;
  padding-top: 12px;
  font-family: var(--font-en);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 10px;
}

.work__year::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--line-strong);
}

.work.is-hidden { display: none; }

@media (max-width: 980px) {
  .works { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .works { grid-template-columns: 1fr; }
}

/* --- News ----------------------------------------------------------------- */
.news {
  border-top: 1px solid var(--line);
}

.news__item {
  display: grid;
  grid-template-columns: 128px 130px minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  padding: 24px 4px;
  border-bottom: 1px solid var(--line);
  transition: background 0.3s ease, padding-left 0.4s var(--ease);
}

.news__item:hover { background: rgba(255, 255, 255, 0.025); padding-left: 14px; }

.news__date {
  font-family: var(--font-en);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.news__cat {
  justify-self: start;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  color: var(--accent);
  border: 1px solid rgba(0, 229, 160, 0.34);
  padding: 3px 10px;
  border-radius: 100px;
}

.news__title {
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.7;
}

@media (max-width: 700px) {
  .news__item {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 20px 0;
  }
  .news__date { font-size: 0.72rem; }
}

/* --- CTA ------------------------------------------------------------------ */
.cta {
  position: relative;
  border: 1px solid var(--line);
  background:
    radial-gradient(ellipse 90% 130% at 50% 120%, rgba(0, 229, 160, 0.16), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  overflow: hidden;
  padding: clamp(44px, 7vw, 86px) clamp(26px, 5vw, 72px);
  text-align: center;
}

.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 60% 80% at 50% 100%, #000, transparent 70%);
  mask-image: radial-gradient(ellipse 60% 80% at 50% 100%, #000, transparent 70%);
  pointer-events: none;
}

.cta > * { position: relative; }

.cta__title {
  font-size: clamp(1.5rem, 3.4vw, 2.5rem);
  font-weight: 700;
  line-height: 1.45;
  margin: 20px auto 18px;
  max-width: 24ch;
}

.cta__lead {
  color: var(--txt-soft);
  font-size: 0.9rem;
  max-width: 52ch;
  margin-inline: auto;
  margin-bottom: 34px;
}

.cta .btn-row { justify-content: center; }

/* --- Page hero (sub pages) ------------------------------------------------ */
.page-hero {
  position: relative;
  padding: calc(var(--header-h) + clamp(64px, 10vw, 128px)) 0 clamp(44px, 6vw, 76px);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.page-hero__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 90% at 85% 0%, rgba(0, 229, 160, 0.14), transparent 60%),
    radial-gradient(ellipse 50% 70% at 5% 100%, rgba(76, 201, 240, 0.08), transparent 65%);
  pointer-events: none;
}

.page-hero h1 {
  position: relative;
  font-size: clamp(2rem, 5vw, 3.6rem);
  font-weight: 700;
  line-height: 1.16;
  margin-top: 20px;
  letter-spacing: -0.005em;
}

.page-hero h1 .en {
  display: block;
  font-family: var(--font-en);
  font-size: clamp(0.72rem, 1.1vw, 0.88rem);
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 18px;
}

.page-hero__lead {
  position: relative;
  margin-top: 24px;
  max-width: 62ch;
  color: var(--txt-soft);
  font-size: 0.92rem;
  line-height: 2.05;
}

.breadcrumb {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 40px;
  font-family: var(--font-en);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.breadcrumb a { transition: color 0.3s ease; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb li + li::before { content: "/"; margin-right: 10px; color: var(--line-strong); }
.breadcrumb li { display: inline-flex; align-items: center; }

/* --- Data table (company profile) ---------------------------------------- */
.profile {
  display: grid;
  grid-template-columns: minmax(140px, 220px) minmax(0, 1fr);
  border-top: 1px solid var(--line);
}

.profile > div {
  padding: 24px 8px;
  border-bottom: 1px solid var(--line);
  font-size: 0.9rem;
  line-height: 1.9;
}

.profile dt {
  color: var(--muted);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
}

.profile dd { color: var(--txt); }
.profile dd a { color: var(--accent); border-bottom: 1px solid rgba(0, 229, 160, 0.3); }

@media (max-width: 640px) {
  .profile { grid-template-columns: 1fr; }
  .profile dt { padding-bottom: 0; border-bottom: 0; }
}

/* --- Business list (company) --------------------------------------------- */
.biz-list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

.biz-list li {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 20px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}

.biz-list .idx {
  font-family: var(--font-en);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--accent);
}

.biz-list .txt { font-size: 0.94rem; line-height: 1.95; }
.biz-list .txt small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.78rem;
}

/* --- Career timeline (CEO) ------------------------------------------------ */
.timeline {
  position: relative;
  padding-left: 34px;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(180deg, var(--accent), rgba(0, 229, 160, 0.05));
}

.timeline li {
  position: relative;
  padding: 0 0 30px;
}

.timeline li::before {
  content: "";
  position: absolute;
  left: -34px;
  top: 0.62em;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  background: var(--ink);
  box-shadow: 0 0 0 4px rgba(0, 229, 160, 0.08);
}

.timeline time {
  display: block;
  font-family: var(--font-en);
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  color: var(--accent);
  margin-bottom: 4px;
}

.timeline p {
  font-size: 0.9rem;
  line-height: 1.85;
  color: var(--txt-soft);
}

.timeline strong { color: var(--txt); font-weight: 700; }

/* --- Project rows (CEO) --------------------------------------------------- */
.projects {
  display: grid;
  gap: 16px;
}

.project {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: clamp(20px, 3vw, 36px);
  align-items: center;
  padding: 18px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.018);
  border-radius: var(--radius);
  transition: border-color 0.4s ease, background 0.4s ease;
}

.project:hover {
  border-color: rgba(0, 229, 160, 0.3);
  background: rgba(255, 255, 255, 0.035);
}

.project__media {
  aspect-ratio: 4 / 3;
  background: var(--ink-2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--line);
}

.project__media img { width: 100%; height: 100%; object-fit: contain; padding: 12px; }
.project__media--photo img { object-fit: cover; padding: 0; }

.project h3 { font-size: 0.98rem; font-weight: 700; line-height: 1.6; margin-bottom: 8px; }
.project p { font-size: 0.82rem; color: var(--muted); line-height: 1.85; }

@media (max-width: 640px) {
  .project { grid-template-columns: 1fr; }
  .project__media { aspect-ratio: 16 / 9; }
}

/* --- Contact -------------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 64px);
  align-items: start;
}

.form { display: grid; gap: 22px; }

.field { display: grid; gap: 10px; }

.field label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--txt-soft);
}

.req {
  font-family: var(--font-en);
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  color: var(--accent);
  border: 1px solid rgba(0, 229, 160, 0.4);
  padding: 2px 6px;
  border-radius: 2px;
}

.field input,
.field textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--txt);
  font-family: inherit;
  font-size: 0.9rem;
  padding: 15px 16px;
  transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

.field textarea { min-height: 168px; resize: vertical; line-height: 1.8; }

.field input::placeholder,
.field textarea::placeholder { color: #4d5a67; }

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(0, 229, 160, 0.04);
  box-shadow: 0 0 0 3px rgba(0, 229, 160, 0.09);
}

.field.has-error input,
.field.has-error textarea { border-color: #ff6b6b; }

.error-msg {
  font-size: 0.72rem;
  color: #ff8a8a;
  min-height: 1em;
}

.check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.8rem;
  color: var(--txt-soft);
  line-height: 1.75;
  cursor: pointer;
}

.check input {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  flex-shrink: 0;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.check input:checked {
  background: var(--accent);
  border-color: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 6.2 4.3 9.5 11 2.8' fill='none' stroke='%23041009' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px;
}

.form-note {
  font-size: 0.74rem;
  color: var(--muted);
  line-height: 1.85;
}

.form-status {
  display: none;
  padding: 18px 20px;
  border: 1px solid rgba(0, 229, 160, 0.4);
  background: rgba(0, 229, 160, 0.07);
  font-size: 0.84rem;
  line-height: 1.85;
  border-radius: var(--radius);
}

.form-status.is-visible { display: block; }

.contact-card {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.008));
  padding: clamp(26px, 3vw, 36px);
}

.contact-card h2 {
  font-size: 1.02rem;
  font-weight: 700;
  margin-bottom: 20px;
}

.contact-card dl { display: grid; gap: 18px; }

.contact-card dt {
  font-family: var(--font-en);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}

.contact-card dd { font-size: 0.88rem; line-height: 1.9; color: var(--txt-soft); }
.contact-card dd a { color: var(--accent); }

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
}

/* --- Footer --------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, var(--ink), var(--ink-1));
  padding: clamp(50px, 7vw, 84px) 0 30px;
}

.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 70px);
  padding-bottom: 46px;
  border-bottom: 1px solid var(--line);
}

/* Footer carries the same single-file lockup as the header. */
.footer-brand__lockup {
  margin-bottom: 22px;
}

.footer-brand p {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.95;
  max-width: 34ch;
}

.footer-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.footer-cols h2 {
  font-family: var(--font-en);
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}

.footer-cols li + li { margin-top: 10px; }

.footer-cols a {
  font-size: 0.82rem;
  color: var(--txt-soft);
  transition: color 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.footer-cols a::before {
  content: "";
  width: 0;
  height: 1px;
  background: var(--accent);
  transition: width 0.35s var(--ease);
}

.footer-cols a:hover { color: var(--accent); }
.footer-cols a:hover::before { width: 12px; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 26px;
}

.footer-bottom p {
  font-family: var(--font-en);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  color: var(--muted);
}

.footer-address {
  font-family: var(--font-en);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.to-top {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-en);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--txt-soft);
  transition: color 0.3s ease;
}

.to-top:hover { color: var(--accent); }

@media (max-width: 760px) {
  .footer-top { grid-template-columns: 1fr; }
}

/* --- Reveal animation -----------------------------------------------------
   Progressive enhancement: the content is ALWAYS visible by default. Only in
   browsers that support scroll-driven animations do we fade elements in as
   they enter the viewport, so nothing can ever be left invisible if JS or a
   particular CSS feature is unavailable.
   ------------------------------------------------------------------------- */
@supports (animation-timeline: view()) {
  [data-reveal] {
    animation: revealUp linear both;
    animation-timeline: view();
    animation-range: entry 4% cover 24%;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .hero__title .line > span { transform: none; }
  .hero__lead, .hero__actions, .hero__meta { opacity: 1; }
}

/* --- Product (app) feature ------------------------------------------------ */
.product {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  align-items: center;
  gap: clamp(34px, 6vw, 76px);
}

.product__icon {
  width: 84px;
  height: 84px;
  border-radius: 20px;
  border: 1px solid var(--line-strong);
  box-shadow: 0 18px 48px -20px rgba(0, 0, 0, 0.9);
  margin-bottom: 26px;
}

.product__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}

.product__meta span {
  font-family: var(--font-en);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--txt-soft);
  border: 1px solid var(--line-strong);
  padding: 4px 10px;
  border-radius: 100px;
}

.product__meta span.is-new {
  color: #04110c;
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 700;
}

.product__lead {
  margin-top: 20px;
  color: var(--txt-soft);
  font-size: 0.92rem;
  line-height: 2.05;
}

.product__body .btn-row { margin-top: 30px; }

/* Official App Store badge — reproduced as markup so it stays crisp and
   independent of Apple's hotlinked assets. */
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 0 22px 0 18px;
  background: #fff;
  color: #000;
  border-radius: 8px;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.store-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px -18px rgba(255, 255, 255, 0.4);
}

.store-badge svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.store-badge__txt {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  text-align: left;
}

.store-badge__txt small {
  font-size: 0.56rem;
  letter-spacing: 0.06em;
}

.store-badge__txt strong {
  font-family: var(--font-en);
  font-size: 1.06rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* Phone screenshot strip — 2×2 grid keeps each shot large enough to read */
.shots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.8vw, 20px);
  align-items: start;
}

.shots img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  box-shadow: 0 26px 60px -34px rgba(0, 0, 0, 0.95);
  transition: transform 0.6s var(--ease);
}

.shots img:hover { transform: translateY(-6px) scale(1.015); }

/* Feature list with numbered rows */
.features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.features > article {
  background: var(--ink);
  padding: clamp(26px, 3vw, 38px) clamp(20px, 2.4vw, 30px);
}

.features h3 {
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.6;
  margin-bottom: 12px;
}

.features p {
  font-size: 0.82rem;
  line-height: 1.9;
  color: var(--txt-soft);
}

.features .num {
  display: block;
  font-family: var(--font-en);
  font-size: 0.64rem;
  letter-spacing: 0.22em;
  color: var(--accent);
  margin-bottom: 16px;
}

/* Specification table */
.spec {
  display: grid;
  grid-template-columns: minmax(120px, 200px) minmax(0, 1fr);
  border-top: 1px solid var(--line);
}

.spec > div {
  padding: 18px 8px;
  border-bottom: 1px solid var(--line);
  font-size: 0.86rem;
  line-height: 1.85;
}

.spec dt {
  color: var(--muted);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
}

.spec dd { color: var(--txt); }

@media (max-width: 900px) {
  .product { grid-template-columns: 1fr; }
  .features { grid-template-columns: 1fr; }
  .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .spec { grid-template-columns: 1fr; }
  .spec dt { padding-bottom: 0; border-bottom: 0; }
  .product__icon { width: 72px; height: 72px; border-radius: 17px; }
}

/* --- Legal / privacy document -------------------------------------------- */
.legal {
  max-width: 78ch;
  font-size: 0.9rem;
  line-height: 2;
  color: var(--txt-soft);
}

.legal > p { margin-bottom: 14px; }

.legal h2 {
  font-size: 1.06rem;
  font-weight: 700;
  color: var(--txt);
  margin: 44px 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.legal h3 {
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--txt);
  margin: 24px 0 10px;
}

.legal strong { color: var(--txt); font-weight: 700; }

.legal ul { margin: 0 0 16px; padding-left: 1.15em; }

.legal li {
  margin-bottom: 8px;
  list-style: disc;
  list-style-position: outside;
}

.legal a {
  color: var(--accent);
  border-bottom: 1px solid rgba(0, 229, 160, 0.3);
  word-break: break-all;
}

.legal a:hover { border-bottom-color: var(--accent); }

.legal-table {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0 22px;
  font-size: 0.82rem;
  line-height: 1.85;
}

.legal-table th,
.legal-table td {
  border: 1px solid var(--line-strong);
  padding: 11px 13px;
  text-align: left;
  vertical-align: top;
}

.legal-table th {
  background: rgba(255, 255, 255, 0.055);
  color: var(--txt);
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.legal-note {
  background: rgba(0, 229, 160, 0.06);
  border-left: 3px solid var(--accent);
  border-radius: 0 4px 4px 0;
  padding: 14px 16px;
  margin: 18px 0;
  font-size: 0.84rem;
  line-height: 1.9;
}

.legal-meta {
  font-family: var(--font-en);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 30px;
}

@media (max-width: 640px) {
  .legal-table { font-size: 0.76rem; }
  .legal-table th,
  .legal-table td { padding: 9px 10px; }
  .legal-table th { white-space: normal; }
}

/* --- Print ---------------------------------------------------------------- */
@media print {
  body { background: #fff; color: #000; }
  .site-header, .hero__glow, .marquee, .to-top, .nav-toggle, .shots { display: none; }
  .hero { min-height: auto; }
}