:root {
  color-scheme: dark;
  --bg: #030508;
  --ink: #f0f4fb;
  --muted: #a8b4c8;
  --line: rgba(192, 210, 235, .14);
  --accent: #b3d5ff;
  --pad: clamp(22px, 6vw, 112px);
  --max: 1440px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; min-width: 320px; background: var(--bg); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Noto Sans JP', 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
button { font: inherit; }
img, video { display: block; max-width: 100%; }
.skip-link { position: fixed; z-index: 500; left: 20px; top: -100px; padding: 12px 18px; background: #e3eefb; color: #07111b; }
.skip-link:focus { top: 12px; }
.site-header { position: fixed; z-index: 100; inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px var(--pad); background: linear-gradient(180deg, rgba(3,5,8,.94) 0%, rgba(3,5,8,.74) 55%, transparent 100%); transition: background .4s ease; }
.site-header.scrolled { background: rgba(3,5,8,.85); backdrop-filter: blur(18px); border-bottom: 1px solid rgba(255,255,255,.06); }
.wordmark { font-size: 11px; font-weight: 550; letter-spacing: .25em; white-space: nowrap; }
.main-nav { display: flex; align-items: center; gap: clamp(14px, 2.8vw, 42px); }
.main-nav a { font-size: 12px; letter-spacing: .06em; color: #bcc9d9; transition: color .25s ease; }
.main-nav a:hover { color: #fff; }
.lang-nav { display: inline-flex; align-items: center; border-left: 1px solid #5e6a7a; padding-left: 25px; gap: 11px; font-size: 12px; letter-spacing: .08em; }
.lang-nav .active { color: #fff; }
.lang-nav a:not(.active) { color: #9aabbd; }
.lang-nav span { color: #4b5d70; }
section { position: relative; isolation: isolate; }
.hero { min-height: 100svh; padding: 130px var(--pad) 90px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; overflow: hidden; background: radial-gradient(ellipse 45% 44% at 50% 39%, #13243c 0%, rgba(10,22,39,.65) 43%, transparent 95%), #030508; }
.hero::after { content: ''; position: absolute; z-index: -1; bottom: -30%; left: 20%; width: 60%; height: 45%; background: radial-gradient(ellipse, rgba(35,87,148,.08), transparent 70%); pointer-events: none; }
.hero-logo { width: clamp(220px, 29vw, 410px); height: auto; max-height: 46svh; object-fit: contain; margin-bottom: clamp(22px, 4vh, 48px); filter: drop-shadow(0 0 46px rgba(82,139,221,.10)); animation: logo-in 1.35s var(--ease) both; }
.hero-copy { animation: copy-in 1.3s .3s var(--ease) both; }
.hero h1 { font-size: clamp(26px, 3.65vw, 55px); font-weight: 460; letter-spacing: -.065em; line-height: 1.45; margin: 0 0 13px; }
.hero-sub { font-size: clamp(13px, 1.2vw, 18px); color: #c0ccda; letter-spacing: .06em; line-height: 1.8; margin: 0; }
.scroll-cue { position: absolute; bottom: 27px; left: 50%; transform: translateX(-50%); color: #8f9db0; font-size: 9px; font-weight: 500; letter-spacing: .28em; white-space: nowrap; }
.scroll-cue::after { content: ''; display: block; margin: 12px auto 0; width: 1px; height: 30px; background: linear-gradient(#9eafc7, transparent); }
.film { min-height: 95svh; display: grid; place-content: center; padding: 80px var(--pad) 110px; background: #050911; }
.film-inner { width: min(100%, 1250px); margin: auto; }
.film-frame { position: relative; overflow: hidden; width: 100%; aspect-ratio: 16/9; border: 1px solid rgba(154,184,225,.12); border-radius: 4px; box-shadow: 0 30px 85px #0009; background: #050b16; }
.film-frame video { width: 100%; height: 100%; object-fit: contain; }
.film-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding-top: 26px; }
.film-foot h2 { font-size: clamp(22px, 2.1vw, 34px); font-weight: 400; letter-spacing: -.04em; margin: 0; }
.eyebrow { display: block; color: #94a9c5; letter-spacing: .27em; text-transform: uppercase; font-size: 10px; font-weight: 600; margin-bottom: 22px; }
.film-controls { display: inline-flex; gap: 8px; align-items: center; }
.motion-button { background: transparent; border: 1px solid #526076; color: #d5e0ed; font-size: 11px; letter-spacing: .06em; padding: 9px 14px; border-radius: 99px; cursor: pointer; white-space: nowrap; }
.motion-button:hover { border-color: #b3c8dd; }
.intro { min-height: 100svh; padding: 96px var(--pad); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(260px, .75fr); gap: clamp(40px, 8vw, 150px); align-items: center; background: radial-gradient(ellipse at 70% 49%, #14233b 0%, transparent 52%), #060b13; }
.intro-copy { max-width: 700px; margin-left: auto; }
.intro h2 { font-size: clamp(38px, 5vw, 76px); font-weight: 430; letter-spacing: -.07em; line-height: 1.22; margin: 0 0 30px; }
.intro p { max-width: 480px; color: #adbdd1; font-size: clamp(15px, 1.3vw, 18px); line-height: 2; margin: 0; }
.ambient-wrap { position: relative; height: min(74svh, 760px); min-height: 400px; max-width: 400px; width: 100%; margin-inline: auto; overflow: hidden; border-radius: 160px 160px 10px 10px; border: 1px solid rgba(150,187,234,.15); box-shadow: 0 40px 95px #0007; background: #07101b; }
.ambient-wrap::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(3,7,13,.54), transparent 28%, transparent 70%, rgba(3,7,13,.4)); pointer-events: none; }
.ambient-wrap video { width: 100%; height: 100%; object-fit: cover; opacity: .82; }
.ambient-wrap .motion-button { position: absolute; z-index: 5; right: 18px; bottom: 18px; background: #06101abf; }
.product { min-height: 86svh; padding: 120px var(--pad); display: flex; flex-direction: column; justify-content: center; border-top: 1px solid rgba(255,255,255,.04); overflow: hidden; }
.product-inner { position: relative; width: min(100%, var(--max)); margin: auto; z-index: 2; }
.product h2 { font-size: clamp(51px, 8vw, 118px); font-weight: 440; letter-spacing: -.075em; line-height: .97; margin: 0 0 32px; }
.product h2 span { display: block; }
.product h3 { font-size: clamp(25px, 3.2vw, 49px); font-weight: 410; letter-spacing: -.06em; line-height: 1.35; margin: 0 0 25px; }
.product .description { color: #afc0d3; font-size: clamp(15px, 1.35vw, 19px); line-height: 2.05; max-width: 520px; margin: 0 0 30px; }
.status { font-size: 10px; color: #a2b6d0; letter-spacing: .2em; text-transform: uppercase; }
.product-decoration { position: absolute; z-index: -1; right: -14%; top: 15%; width: min(72vw, 900px); aspect-ratio: 1; border-radius: 50%; opacity: .42; filter: blur(1px); pointer-events: none; }
.neuro { background: radial-gradient(ellipse 46% 62% at 85% 44%, rgba(27,68,114,.28), transparent 80%), #060c14; }
.neuro .product-decoration { background: radial-gradient(circle, rgba(89,165,237,.22) 0%, rgba(70,118,189,.10) 22%, transparent 65%), repeating-radial-gradient(circle at 50% 50%, transparent 0 95px, rgba(153,207,255,.14) 96px 97px); }
.therapeutic { background: radial-gradient(ellipse 42% 60% at 85% 48%, rgba(32,75,92,.25), transparent 85%), #050a11; }
.therapeutic .product-decoration { background: radial-gradient(circle, rgba(69,170,155,.15) 0%, transparent 61%), repeating-radial-gradient(circle at 50% 50%, transparent 0 75px, rgba(120,191,192,.12) 76px 77px); }
.learning { background: radial-gradient(ellipse 46% 62% at 85% 47%, rgba(65,51,111,.22), transparent 82%), #060911; }
.learning .product-decoration { background: radial-gradient(circle, rgba(144,112,217,.15) 0%, transparent 60%), repeating-radial-gradient(circle at 50% 50%, transparent 0 90px, rgba(187,161,246,.12) 91px 92px); }
.divider-section { min-height: 62svh; padding: 100px var(--pad); display: flex; align-items: center; border-top: 1px solid rgba(255,255,255,.04); background: #04080f; }
.divider-inner { width: min(100%, var(--max)); margin: auto; }
.divider-inner h2 { font-size: clamp(40px, 6.4vw, 92px); font-weight: 450; line-height: 1.15; letter-spacing: -.065em; max-width: 900px; margin: 0 0 20px; }
.divider-inner p { font-size: clamp(15px, 1.25vw, 19px); color: #b1bfd2; max-width: 620px; line-height: 1.95; margin: 0 0 30px; }
.text-link { display: inline-flex; align-items: center; gap: 15px; padding: 11px 0; border-bottom: 1px solid #6e87a6; font-size: 14px; color: #dce7f6; transition: gap .25s; }
.text-link:hover { gap: 22px; }
footer { border-top: 1px solid var(--line); padding: 42px var(--pad) 36px; color: #91a3bc; background: #020408; font-size: 12px; }
.footer-inner { width: min(100%, var(--max)); margin: auto; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.footer-brand { letter-spacing: .22em; color: #d8e2f0; white-space: nowrap; }
.footer-links { display: flex; flex-wrap: wrap; gap: 22px; }
.reveal { opacity: 0; transform: translate3d(0,28px,0); transition: opacity 1.05s var(--ease), transform 1.05s var(--ease); }
.reveal.visible { opacity: 1; transform: none; }
@keyframes logo-in { from { opacity: 0; filter: blur(9px) drop-shadow(0 0 24px rgba(82,139,221,.05)); transform: translateY(14px) scale(.96); } to { opacity: 1; filter: blur(0) drop-shadow(0 0 46px rgba(82,139,221,.10)); transform: none; } }
@keyframes copy-in { from { opacity: 0; transform: translateY(13px); } to { opacity: 1; transform: none; } }
@media (max-width: 820px) {
  .main-nav { gap: 18px; }
  .nav-research { display: none; }
  .intro { grid-template-columns: 1fr; gap: 58px; padding-top: 110px; padding-bottom: 100px; }
  .intro-copy { margin-left: 0; }
  .ambient-wrap { height: 480px; width: min(78%, 290px); }
  .film { min-height: auto; }
  .film-foot { align-items: center; }
  .product-decoration { width: 85vw; right: -44%; top: 13%; opacity: .25; }
}
@media (max-width: 540px) {
  .site-header { padding: 18px 20px; }
  .wordmark { letter-spacing: .15em; font-size: 10px; }
  .main-nav { gap: 11px; }
  .main-nav a { font-size: 11px; }
  .lang-nav { padding-left: 12px; gap: 6px; }
  .nav-products { display: none; }
  .hero { padding-top: 100px; padding-bottom: 90px; }
  .hero-logo { width: min(74vw, 340px); max-height: 47svh; margin-bottom: 23px; }
  .hero h1 { letter-spacing: -.055em; }
  .hero-sub { max-width: 270px; margin: auto; }
  .film { padding: 80px 0 90px; }
  .film-inner { width: 100%; }
  .film-frame { border-radius: 0; border-left: 0; border-right: 0; }
  .film-foot { display: grid; gap: 22px; padding: 22px var(--pad) 0; }
  .film-foot h2 { font-size: 24px; }
  .intro { padding-top: 90px; }
  .intro h2 { font-size: 38px; }
  .ambient-wrap { height: 420px; }
  .product { min-height: 75svh; padding-top: 100px; padding-bottom: 100px; }
  .product h2 { font-size: clamp(49px, 13vw, 80px); }
  .product h3 { font-size: 30px; }
  .divider-section { padding-block: 85px; min-height: 55svh; }
  .divider-inner h2 { font-size: 42px; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-logo, .hero-copy { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .text-link, .button { transition: none; }
}

/* Abstract brand-video stills, never combined with the hero logo. */
.product-art { position: absolute; pointer-events: none; z-index: -1; top: -6%; bottom: -6%; right: -4%; width: 57%; background-size: cover; background-position: center; opacity: .21; filter: saturate(.82); -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%, #000 100%); mask-image: linear-gradient(90deg, transparent, #000 35%, #000 100%); }
.neuro .product-art { background-image: url('assets/neuro-abstract.webp'); }
.therapeutic .product-art { background-image: url('assets/therapeutic-abstract.webp'); }
.learning .product-art { background-image: url('assets/learning-abstract.webp'); }
@media (max-width: 820px) { .product-art { right: -22%; width: 92%; opacity: .12; } }

/* NeuroAffect: portrait concept film, balanced alongside lighter typography. */
.neuro .product-decoration { opacity: .16; }
.neuro .product-art { display: none; }
.neuro .product-layout { position: relative; z-index: 2; width: min(100%, var(--max)); margin: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(270px, 32%); gap: clamp(30px, 4.5vw, 80px); align-items: center; }
.neuro .product-inner { width: 100%; margin: 0; }
.neuro h2 { font-size: clamp(47px, 6.45vw, 106px); font-weight: 410; letter-spacing: -.065em; }
.product-film { width: 100%; max-width: 402px; justify-self: center; margin: 0; }
.product-film-frame { position: relative; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 150px 150px 9px 9px; background: #0c1c2c; border: 1px solid rgba(172,214,255,.18); box-shadow: 0 35px 100px rgba(0,0,0,.36), 0 0 70px rgba(62,135,219,.09); }
.product-film-frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-film-vignette { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(2,7,14,.08), transparent 28%, transparent 68%, rgba(2,7,14,.34)); }
.product-film .motion-button { position: absolute; bottom: 16px; right: 16px; z-index: 2; background: rgba(3,10,18,.76); backdrop-filter: blur(8px); }
.product-film figcaption { padding: 13px 0 0; text-align: center; font-size: 9px; letter-spacing: .21em; color: #91a8c3; line-height: 1.8; }
.product-film figcaption span { padding: 0 5px; }
@media (max-width: 1000px) {
  .neuro .product-layout { grid-template-columns: minmax(0, 1fr) minmax(230px, 34%); gap: 25px; }
  .neuro h2 { font-size: clamp(45px, 6.3vw, 76px); }
}
@media (max-width: 720px) {
  .neuro .product-layout { grid-template-columns: 1fr; gap: 48px; }
  .neuro h2 { font-size: clamp(48px, 12.5vw, 76px); }
  .product-film { width: min(70vw, 330px); }
  .neuro { padding-bottom: 100px; }
}
@media (prefers-reduced-motion: reduce) {
  .product-film-frame:not(.is-user-playing) video { visibility: hidden; }
  .product-film-frame { background: #0a1726 url('assets/neuroaffect-poster.jpg') center/cover no-repeat; }
  .product-film-frame .motion-button { display: block; }
}

/* v4: all three Architect sections share one balanced film layout. */
.product .product-layout { position: relative; z-index: 2; width: min(100%, var(--max)); margin: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(270px, 32%); gap: clamp(30px, 4.5vw, 80px); align-items: center; }
.product .product-layout .product-inner { width: 100%; margin: 0; }
.product .product-layout h2 { font-size: clamp(47px, 6.45vw, 106px); font-weight: 410; letter-spacing: -.065em; overflow-wrap: normal; }
.therapeutic .product-decoration, .learning .product-decoration { opacity: .12; }
.therapeutic .product-film-frame { background: #061923; border-color: rgba(116,201,192,.24); box-shadow: 0 35px 100px rgba(0,0,0,.36), 0 0 70px rgba(69,170,155,.1); }
.learning .product-film-frame { background: #101022; border-color: rgba(183,153,241,.2); box-shadow: 0 35px 100px rgba(0,0,0,.36), 0 0 70px rgba(144,112,217,.1); }
@media (max-width: 1000px) { .product .product-layout { grid-template-columns: minmax(0, 1fr) minmax(230px, 34%); gap: 25px; } .product .product-layout h2 { font-size: clamp(45px, 6.3vw, 76px); } }
@media (max-width: 720px) { .product .product-layout { grid-template-columns: 1fr; gap: 48px; } .product .product-layout h2 { font-size: clamp(48px, 12.5vw, 76px); } }
@media (prefers-reduced-motion: reduce) { .therapeutic .product-film-frame { background: #061923 url('assets/therapeutic-poster.jpg') center/cover no-repeat; } .learning .product-film-frame { background: #101022 url('assets/learning-poster.jpg') center/cover no-repeat; } }

/* v5: quiet research film and a product-oriented CTA film. */
.divider-section { min-height: 90svh; padding-block: 100px; }
.divider-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 33%); gap: clamp(36px, 6vw, 104px); align-items: center; }
.divider-copy { min-width: 0; }
.divider-copy h2 { font-weight: 410; font-size: clamp(40px, 5.6vw, 82px); max-width: 790px; }
.divider-film { width: 100%; max-width: 382px; justify-self: center; margin: 0; }
.divider-film-frame { position: relative; width: 100%; aspect-ratio: 9/16; overflow: hidden; border-radius: 145px 145px 10px 10px; background: #071421; border: 1px solid rgba(157,201,243,.19); box-shadow: 0 35px 95px rgba(0,0,0,.32), 0 0 62px rgba(51,117,174,.08); }
.divider-film-frame video { width: 100%; height: 100%; display: block; object-fit: cover; }
.research-film .divider-film-frame video { opacity: .84; }
.cta-film .divider-film-frame video { opacity: .97; }
.divider-film-vignette { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg,rgba(2,6,13,.08),transparent 30%,transparent 70%,rgba(2,6,13,.32)); }
.divider-film .motion-button { position: absolute; z-index: 2; right: 16px; bottom: 16px; background: rgba(3,10,18,.77); backdrop-filter: blur(8px); }
.divider-film figcaption { padding-top: 14px; text-align: center; color: #91a8c3; font-size: 9px; letter-spacing: .17em; line-height: 1.8; }
.divider-film figcaption span { padding-inline: 4px; }
.research-divider { background: radial-gradient(ellipse 44% 55% at 84% 52%, rgba(31,80,122,.13), transparent 90%), #04080f; }
.contact-divider { background: radial-gradient(ellipse 44% 56% at 84% 50%, rgba(113,97,72,.10), transparent 88%), #05080d; }
.divider-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 32px; }
.divider-actions .secondary-link { color: #acbcd1; border-color: rgba(172,188,209,.5); }
.divider-copy .availability-note { margin: 22px 0 0; font-size: 12px; color: #90a4be; max-width: 560px; line-height: 1.7; }
@media(max-width: 1000px) { .divider-inner { grid-template-columns: minmax(0,1fr) minmax(220px,36%); gap: 32px; } }
@media(max-width: 720px) { .divider-section { padding-block: 90px; } .divider-inner { display: grid; grid-template-columns: 1fr; gap: 44px; } .divider-film { width: min(70vw,330px); } .divider-copy h2 { font-size: clamp(40px, 11.5vw, 58px); } }
@media(prefers-reduced-motion: reduce) { .divider-film-frame:not(.is-user-playing) video { visibility: hidden; } .research-film .divider-film-frame { background: #071421 url('assets/research-poster.jpg') center/cover no-repeat; } .cta-film .divider-film-frame { background: #111820 url('assets/cta-poster.jpg') center/cover no-repeat; } }

/* v6: quiet entry to the first full product film. */
.product-primary-actions { display:flex;flex-direction:column;align-items:flex-start;gap:10px; margin:20px 0 10px; }
.feature-link { display:inline-flex;align-items:center;gap:13px;padding:14px 21px;color:#0d1c29;font-size:14px;font-weight:610;letter-spacing:.015em;background:linear-gradient(110deg,#d7e9f7,#a8d8e7);border:1px solid #def6ff73;border-radius:4px;transition:filter .2s, transform .2s; }
.feature-link:hover { filter:brightness(1.07);transform:translateY(-2px); }
.feature-link:focus-visible { outline-offset:5px; }
@media(max-width:540px) {.feature-link {padding:12px 16px;font-size:12px;} }

/* v6.2 iOS Safari: render the hero wordmark as a stable, unfiltered image.
   Animated blur/drop-shadow on a transparent WebP can produce a blank
   composited rectangle on some mobile Safari sessions. Keep film animations
   unchanged; do not alter global image rendering. */
.hero-logo {
  animation: none;
  -webkit-animation: none;
  filter: none;
  -webkit-filter: none;
  transform: none;
  opacity: 1;
}


/* Unified brand gateway: keeps the original LP while making site architecture explicit. */
.gateway-strip {
  padding: 0 var(--pad) 110px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  background: #060b13;
}
.gateway-card {
  min-height: 270px;
  padding: clamp(28px, 4vw, 52px);
  border: 1px solid rgba(182,205,236,.16);
  background: linear-gradient(145deg, rgba(18,34,54,.72), rgba(6,12,20,.86));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform .35s var(--ease), border-color .35s ease, background .35s ease;
}
.gateway-card:hover {
  transform: translateY(-4px);
  border-color: rgba(179,213,255,.42);
  background: linear-gradient(145deg, rgba(24,45,71,.84), rgba(7,14,23,.94));
}
.gateway-card .gateway-label {
  color: #94a9c5;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 600;
}
.gateway-card strong {
  display: block;
  margin: 28px 0 12px;
  font-size: clamp(34px, 4.4vw, 66px);
  line-height: 1;
  letter-spacing: -.055em;
  font-weight: 430;
}
.gateway-card p {
  margin: 0;
  max-width: 560px;
  color: #aebdd0;
  font-size: 15px;
  line-height: 1.85;
}
.gateway-card .gateway-go {
  margin-top: 30px;
  color: #dbe8f7;
  font-size: 13px;
  letter-spacing: .04em;
}
.gateway-card.products-gateway {
  background: linear-gradient(145deg, rgba(21,42,67,.9), rgba(7,14,24,.94));
}
@media (max-width: 760px) {
  .gateway-strip { grid-template-columns: 1fr; padding-bottom: 90px; }
  .gateway-card { min-height: 230px; }
}