:root {
  --bg: #07090d;
  --bg-soft: #0c1017;
  --panel: #111720;
  --panel-2: #161d28;
  --text: #f3f5f7;
  --muted: #9aa6b2;
  --faint: #66717c;
  --line: rgba(255, 255, 255, .12);
  --line-strong: rgba(255, 255, 255, .22);
  --red: #ff315f;
  --cyan: #43e8d8;
  --violet: #9f7aea;
  --warm: #f6f1e8;
  --ink: #101318;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-move: cubic-bezier(.77, 0, .175, 1);
  --page-progress: 0;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  overflow-x: clip;
  color: var(--text);
  background:
    radial-gradient(circle at 18% 8%, rgba(159,122,234,.10), transparent 30rem),
    radial-gradient(circle at 88% 24%, rgba(67,232,216,.07), transparent 26rem),
    var(--bg);
  font-family: "Yu Gothic UI", "Hiragino Kaku Gothic ProN", "Noto Sans JP", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.72;
}
body::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, black, transparent 70%);
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
h, .sub-title-2 h { display: inline; font: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
.container { width: min(1220px, calc(100% - 64px)); margin-inline: auto; }
.container-fluid { width: 100%; }
.row { display: flex; flex-wrap: wrap; }
.col-12, .col-lg-12, .col-md-12 { width: 100%; }
.text-center { text-align: center; }
.img-fluid { width: 100%; }
.section { position: relative; padding: clamp(100px, 12vw, 180px) 0; }
.bg-one, .section-bg { background: transparent; }
.p-0, .padding-0 { padding: 0; }
.no-gutters { margin: 0; }
.align-items-center { align-items: center; }

/* Global workflow rail: GitHub-like anchor structure + Comfy-like connected states. */
.workflow-rail {
  position: fixed;
  z-index: 26;
  top: 50%;
  left: 18px;
  width: 18px;
  height: min(54vh, 520px);
  transform: translateY(-50%);
  pointer-events: none;
}
.workflow-rail::before,
.workflow-rail::after {
  content: "";
  position: absolute;
  top: 0;
  left: 8px;
  width: 2px;
  height: 100%;
  border-radius: 999px;
}
.workflow-rail::before { background: rgba(255,255,255,.12); }
.workflow-rail::after {
  background: linear-gradient(var(--cyan), var(--violet) 52%, var(--red));
  transform: scaleY(var(--page-progress));
  transform-origin: top;
  transition: transform 80ms linear;
}
.workflow-rail span {
  position: absolute;
  left: 4px;
  width: 10px;
  height: 10px;
  border: 2px solid #26303c;
  border-radius: 50%;
  background: var(--bg);
  box-shadow: 0 0 0 3px rgba(7,9,13,.8);
  transition: border-color 180ms ease, background-color 180ms ease, transform 180ms var(--ease-out);
}
.workflow-rail span:nth-child(1) { top: 0; }
.workflow-rail span:nth-child(2) { top: 33%; }
.workflow-rail span:nth-child(3) { top: 66%; }
.workflow-rail span:nth-child(4) { bottom: 0; }
.workflow-rail span.is-active { border-color: var(--cyan); background: var(--cyan); transform: scale(1.25); }

/* Hero — a staged system, not a background banner. */
.hero-area {
  position: relative;
  isolation: isolate;
  min-height: max(780px, 100svh);
  display: grid;
  place-items: end start;
  overflow: hidden;
  color: var(--text);
  background-size: cover;
  background-position: center;
}
.hero-area::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: -3%;
  background: inherit;
  filter: saturate(.72) contrast(1.08);
  transform: scale(1.045) translate3d(calc(var(--hero-x, 0) * -8px), calc(var(--hero-y, 0) * -6px), 0);
  transition: transform 220ms var(--ease-out);
}
.hero-area::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(7,9,13,.28), rgba(7,9,13,.56) 42%, #07090d 98%),
    linear-gradient(90deg, rgba(7,9,13,.92) 0%, rgba(7,9,13,.55) 56%, rgba(7,9,13,.22));
}
.hero-area > .block {
  position: relative;
  z-index: 3;
  width: min(1220px, calc(100% - 64px));
  margin: 0 auto;
  padding: 180px 0 100px;
}
.hero-area .video-button { margin: 0 0 clamp(32px, 5vw, 64px); }
.hero-area .logo svg { width: clamp(220px, 27vw, 360px); height: auto; }
.hero-area h1 {
  width: min(980px, 100%);
  margin: 0 0 28px;
  padding: 0 !important;
  font-size: clamp(2.65rem, 6.3vw, 6.75rem);
  font-weight: 760;
  line-height: .98;
  letter-spacing: -.065em;
  text-wrap: balance;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.hero-area p { max-width: 790px; margin: 0 0 24px; color: rgba(243,245,247,.74); font-size: clamp(1rem, 1.25vw, 1.18rem); }
.hero-area .sub-title-2 { display: block; max-width: 830px; margin: 0 0 36px; padding: 20px 22px; border: 1px solid rgba(255,255,255,.13); border-radius: 16px; background: rgba(8,11,16,.48); color: rgba(243,245,247,.88); backdrop-filter: blur(16px); }
.hero-area .sub-title-2 br { line-height: 2.05; }
.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  color: var(--cyan);
  font: 700 .72rem/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.hero-kicker::before { content: ""; width: 28px; height: 1px; background: currentColor; }

.hero-network { position: absolute; z-index: 1; inset: 0 0 0 48%; pointer-events: none; opacity: .82; }
.hero-network svg { width: 100%; height: 100%; overflow: visible; }
.hero-network path { fill: none; stroke: url(#flowGradient); stroke-width: .32; stroke-dasharray: 2.2 2.4; opacity: .7; }
.hero-node {
  position: absolute;
  width: 74px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 11px;
  background: rgba(12,16,23,.82);
  box-shadow: 0 18px 60px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.08);
  color: var(--muted);
  font: 700 .68rem/1 ui-monospace, monospace;
  backdrop-filter: blur(12px);
  animation: node-float 5.8s var(--ease-move) infinite alternate;
}
.hero-node::before { content: ""; position: absolute; left: -4px; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 18px var(--cyan); }
.hero-node:nth-of-type(1) { top: 18%; left: 26%; animation-delay: -.8s; }
.hero-node:nth-of-type(2) { top: 39%; right: 13%; animation-delay: -2.1s; }
.hero-node:nth-of-type(3) { top: 61%; left: 31%; animation-delay: -3.2s; }
.hero-node:nth-of-type(4) { top: 76%; right: 20%; animation-delay: -1.4s; }
@keyframes node-float { from { transform: translate3d(0,-5px,0); } to { transform: translate3d(0,7px,0); } }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 13px 24px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: rgba(255,255,255,.05);
  color: var(--text);
  font-weight: 720;
  line-height: 1.35;
  transition: transform 160ms var(--ease-out), border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}
.hero-area .btn { border-color: transparent; background: var(--red) !important; color: white; box-shadow: 0 16px 44px rgba(255,49,95,.25); }

/* Navigation: precise product chrome, not floating decoration. */
.navigation {
  position: sticky;
  z-index: 30;
  top: 0;
  height: 72px;
  display: flex;
  align-items: center;
  border-block: 1px solid rgba(255,255,255,.09);
  background: rgba(7,9,13,.82);
  backdrop-filter: blur(22px) saturate(140%);
}
.navigation .navbar-header, .navigation .navbar { width: 100%; }
.navigation .navbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.navigation .logo svg { display: block; width: min(230px, 34vw); height: auto; }
.navigation .navbar-collapse { display: flex; align-items: center; justify-content: flex-end; }
.navigation .navbar-nav { display: flex; align-items: center; gap: clamp(13px, 1.8vw, 26px); }
.navigation .nav-link { position: relative; display: block; padding: 24px 0 21px; color: rgba(243,245,247,.62); font-size: .82rem; font-weight: 720; }
.navigation .nav-link::after { content: ""; position: absolute; right: 0; bottom: 16px; left: 0; height: 2px; border-radius: 999px; background: var(--cyan); transform: scaleX(0); transform-origin: left; transition: transform 180ms var(--ease-out); }
.navigation .nav-link:hover, .navigation .nav-link.is-active { color: var(--text); }
.navigation .nav-link.is-active::after { transform: scaleX(1); }
.navigation .nav-item:last-child .nav-link, .navigation .nav-item:nth-last-child(2) .nav-link { color: var(--cyan); }
.navbar-toggler { display: none; padding: 9px; border: 0; background: transparent; color: white; }
.navbar-toggler-icon { position: relative; display: block; width: 24px; height: 16px; border-block: 2px solid currentColor; }
.navbar-toggler-icon::after { content: ""; position: absolute; top: 5px; left: 0; width: 100%; height: 2px; background: currentColor; }

/* Section language and scroll reveal. */
.title { position: relative; z-index: 2; margin-bottom: clamp(54px, 8vw, 98px); }
.title::before { content: attr(data-index); display: block; margin-bottom: 18px; color: var(--cyan); font: 700 .72rem/1 ui-monospace, monospace; letter-spacing: .18em; }
.title h2 { max-width: 990px; margin: 0 auto; font-size: clamp(2.35rem, 5.2vw, 5.4rem); font-weight: 760; line-height: 1.02; letter-spacing: -.055em; text-wrap: balance; overflow-wrap: anywhere; }
.title .color { color: var(--red); }
.about .title h2 {
  max-width: 1120px;
  font-size: clamp(2rem, 4.35vw, 4.65rem);
  line-height: 1.08;
  letter-spacing: -.045em;
  overflow-wrap: normal;
  word-break: keep-all;
}
.about .title .company-name {
  display: inline-block;
  white-space: nowrap;
  word-break: keep-all;
}
.title .border { width: 92px; height: 2px; margin: 28px auto 0; background: linear-gradient(90deg, var(--red), var(--violet), var(--cyan)); transform-origin: left; }
.title h5 { max-width: 880px; margin: 24px auto 0; color: var(--muted); font-size: 1rem; font-weight: 520; }
.about.section { padding-bottom: 76px; }

.motion-ready .reveal { opacity: 0; transform: translate3d(0,36px,0); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); transition-delay: var(--delay, 0ms); }
.motion-ready .reveal.is-visible { opacity: 1; transform: translate3d(0,0,0); }
.motion-ready .reveal-clip { clip-path: inset(0 100% 0 0 round 24px); transition: clip-path 900ms var(--ease-move); }
.motion-ready .reveal-clip.is-visible { clip-path: inset(0 0 0 0 round 24px); }

/* About: dual-pane system inspection. */
.about-2 { border-block: 1px solid var(--line); background: var(--bg-soft); }
.about-2 .row { min-height: 790px; }
.about-2 .col-lg-6 { width: 50%; }
.about-2 .col-lg-6:first-child { align-self: stretch; position: relative; overflow: hidden; }
.about-2 .col-lg-6:first-child::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 58%, var(--bg-soft)), linear-gradient(0deg, var(--bg-soft), transparent 28%); }
.about-2 .col-lg-6:first-child img { height: 100%; object-fit: cover; filter: saturate(.72) contrast(1.08); }
.about-2 .content-block { position: relative; padding: clamp(64px, 7vw, 118px); }
.about-2 .content-block::before { content: ""; position: absolute; left: 0; top: 12%; bottom: 12%; width: 1px; background: linear-gradient(transparent, var(--violet), var(--cyan), transparent); }
.about-2 h2 { display: block; margin: 0 0 14px; font-size: clamp(1.7rem, 2.5vw, 2.8rem); line-height: 1.14; letter-spacing: -.035em; }
.about-2 p, .about-2 .sub-title-2 { color: var(--muted); }
.about-2 .sub-title-2 { display: block; padding: 22px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.025); }

/* Services: one connected route, four complete modules. */
#services { background: linear-gradient(180deg, var(--bg), #0b0e14); }
#services .row { gap: 30px; counter-reset: service; }
#services .col-lg-12 { width: 100%; }
#services article { position: relative; width: 100%; padding-left: 56px; counter-increment: service; }
#services article::before { content: "0" counter(service); position: absolute; z-index: 3; left: 0; top: 40px; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--cyan); border-radius: 50%; background: var(--bg); color: var(--cyan); font: 700 .68rem/1 ui-monospace, monospace; box-shadow: 0 0 0 7px var(--bg), 0 0 30px rgba(67,232,216,.16); }
#services article::after { content: ""; position: absolute; left: 16px; top: 78px; bottom: -48px; width: 2px; background: linear-gradient(var(--cyan), rgba(159,122,234,.26)); transform: scaleY(var(--route, 0)); transform-origin: top; transition: transform 900ms var(--ease-move); }
#services article.is-visible::after { --route: 1; }
#services article:last-child::after { display: none; }
.service-block { min-height: 510px; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); grid-template-rows: auto 1fr auto; column-gap: clamp(34px, 6vw, 86px); overflow: hidden; padding: clamp(34px, 5vw, 68px); border: 1px solid var(--line); border-radius: 24px; background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.018)); box-shadow: 0 28px 80px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.06); }
.service-icon { display: none; }
.service-block h3 { grid-column: 2; margin: 0 0 24px; font-size: clamp(1.65rem, 2.8vw, 3rem); line-height: 1.1; letter-spacing: -.04em; }
.service-block .sub-title-2 { grid-column: 2; display: block; color: var(--muted); }
.service-block img { grid-column: 1; grid-row: 1 / 4; width: 100%; height: 100%; min-height: 380px; border-radius: 16px; object-fit: cover; filter: saturate(.78) contrast(1.03); }
.service-block .btn { grid-column: 2; align-self: end; justify-self: start; margin-top: 30px; }
#services article:nth-of-type(even) .service-block { grid-template-columns: minmax(0, .98fr) minmax(0, 1.02fr); }
#services article:nth-of-type(even) .service-block img { grid-column: 2; }
#services article:nth-of-type(even) .service-block h3,
#services article:nth-of-type(even) .service-block .sub-title-2,
#services article:nth-of-type(even) .service-block .btn { grid-column: 1; }

/* Partners: case files emerge from a dark continuous stage. */
#blog { background: #0a0d12; border-top: 1px solid var(--line); }
#blog .row { gap: 28px; }
#blog article { width: 100%; }
.post-block { display: grid; grid-template-columns: minmax(280px, .72fr) minmax(0, 1.45fr); overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: var(--panel); box-shadow: 0 20px 70px rgba(0,0,0,.2); }
.post-block .media-wrapper { min-height: 100%; background: var(--bg); overflow: hidden; }
.post-block .media-wrapper .item { height: 50%; }
.post-block .media-wrapper img { height: 100%; min-height: 390px; object-fit: cover; filter: saturate(.82) contrast(1.05); transition: transform 220ms var(--ease-out); }
.post-block .content { padding: clamp(36px, 5vw, 68px); }
.post-block .content > h3 { margin: 0 0 30px; font-size: clamp(1.6rem, 2.8vw, 2.8rem); line-height: 1.12; letter-spacing: -.038em; }
.post-block .sub-title-2 { color: var(--muted); }
#blog article:nth-of-type(even) .post-block { grid-template-columns: minmax(0, 1.45fr) minmax(280px, .72fr); }
#blog article:nth-of-type(even) .media-wrapper { order: 2; }

/* Contact: endpoint node. */
.contact-us { position: relative; overflow: hidden; padding: clamp(100px, 12vw, 180px) 0; background: var(--warm); color: var(--ink); }
.contact-us::before { content: ""; position: absolute; width: 820px; aspect-ratio: 1; right: -360px; top: -330px; border: 1px solid rgba(16,19,24,.16); border-radius: 50%; box-shadow: 0 0 0 90px rgba(159,122,234,.05), 0 0 0 180px rgba(67,232,216,.035); }
.contact-us .row { gap: 38px; }
.contact-us .col-12 { width: 100%; }
.contact-us .contact-info, .contact-us .contact-form { position: relative; width: calc(50% - 19px); }
.contact-us .title h2 { max-width: 980px; }
.contact-us .title::before { color: #6b4fc5; }
.contact-us .title .border { background: linear-gradient(90deg, var(--red), #6b4fc5, #0fa99a); }
.contact-info > p { color: #4f5962; }
.contact-details { margin-top: 36px; padding: 28px; border: 1px solid rgba(16,19,24,.14); border-radius: 18px; background: rgba(255,255,255,.54); box-shadow: 0 22px 60px rgba(30,25,18,.08); }
.con-info { padding: 14px 0; border-bottom: 1px solid rgba(16,19,24,.1); }
.con-info:last-child { border-bottom: 0; }
.con-info h3 { margin: 0; }
.con-info span, .con-info p { color: #535c64; }
.contact-form img { width: 100%; height: 210px; min-height: 0; object-fit: cover; border-radius: 22px 22px 0 0; filter: saturate(.76) contrast(1.03); box-shadow: 0 24px 70px rgba(30,25,18,.15); }
.contact-us .contact-form {
  align-self: stretch;
  overflow: hidden;
  border: 1px solid rgba(15,31,28,.1);
  border-radius: 22px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 24px 70px rgba(30,25,18,.15);
}
.market-contact-form { padding: clamp(22px,3vw,34px); }
.market-contact-form h3 { margin: 0 0 22px; color: #101714; font-size: clamp(1.12rem,1.7vw,1.42rem); }
.market-contact-form label { display: block; margin: 0 0 14px; color: rgba(16,23,20,.72); font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.market-contact-form label > span { display: block; margin: 0 0 7px; }
.market-contact-form input,
.market-contact-form textarea {
  display: block;
  width: 100%;
  border: 1px solid rgba(13,31,26,.14);
  border-radius: 10px;
  outline: 0;
  padding: 11px 13px;
  background: rgba(247,249,248,.96);
  color: #101714;
  font: inherit;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.market-contact-form textarea { min-height: 112px; resize: vertical; }
.market-contact-form input:focus,
.market-contact-form textarea:focus { border-color: rgba(0,139,126,.68); background: #fff; box-shadow: 0 0 0 3px rgba(0,139,126,.11); }
.contact-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.contact-trap { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.contact-form-actions { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.contact-form-actions .btn {
  flex: 0 0 auto;
  min-width: 150px;
  border: 1px solid #07584f !important;
  background: #08796d !important;
  color: #fff !important;
  box-shadow: 0 12px 28px rgba(8,121,109,.24);
  cursor: pointer;
}
.contact-form-actions .btn:hover,
.contact-form-actions .btn:focus-visible {
  border-color: #06483f !important;
  background: #065f56 !important;
  color: #fff !important;
  box-shadow: 0 14px 34px rgba(8,121,109,.32);
}
.contact-form-actions .btn[data-state="sending"] {
  border-color: #4b5563 !important;
  background: #4b5563 !important;
  box-shadow: none;
}
.contact-form-actions .btn[data-state="error"] {
  border-color: #8f1d35 !important;
  background: #b52442 !important;
  box-shadow: 0 12px 28px rgba(181,36,66,.22);
}
.contact-form-actions .btn[data-state="success"] {
  border-color: #07584f !important;
  background: #08796d !important;
}
.contact-form-actions .btn:disabled { cursor: wait; opacity: .82; }
.contact-form-status { margin: 0; color: rgba(16,23,20,.64); font-size: 12px; line-height: 1.45; }
.contact-form-status[data-state="success"] { color: #08796d; }
.contact-form-status[data-state="error"] { color: #b52442; }

#footer { padding: 40px 0; border-top: 1px solid var(--line); background: #05070a; color: rgba(243,245,247,.5); text-align: center; }
#footer .row, #footer .col-lg-12 { width: 100%; }
.social-icon { display: none; }
.copyright p { margin: 8px 0; }
.copyright a { color: var(--text); }
#scrollUp { display: none !important; }

@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translate3d(0,-3px,0); border-color: var(--cyan); background: rgba(67,232,216,.08); box-shadow: 0 14px 34px rgba(0,0,0,.22); }
  .hero-area .btn:hover { box-shadow: 0 20px 55px rgba(255,49,95,.34); }
  .service-block:hover { border-color: rgba(67,232,216,.38); }
  .post-block:hover .media-wrapper img { transform: scale(1.025); }
}

@media (max-width: 980px) {
  .container, .hero-area > .block { width: min(100% - 40px, 760px); }
  .workflow-rail { display: none; }
  .hero-network { left: 38%; opacity: .52; }
  .about-2 .row { min-height: 0; }
  .about-2 .col-lg-6 { width: 100%; }
  .about-2 .col-lg-6:first-child { height: min(72vw, 620px); }
  .about-2 .col-lg-6:first-child::after { background: linear-gradient(0deg, var(--bg-soft), transparent 35%); }
  .about-2 .content-block { padding: 64px 28px 84px; }
  .about-2 .content-block::before { display: none; }
  #services article { padding-left: 0; padding-top: 52px; }
  #services article::before { top: 0; left: 4px; }
  #services article::after { left: 20px; top: 38px; bottom: auto; height: 26px; }
  .service-block, #services article:nth-of-type(even) .service-block { display: flex; flex-direction: column; min-height: 0; }
  .service-block img, #services article:nth-of-type(even) .service-block img { order: -1; height: min(60vw, 460px); min-height: 330px; margin-bottom: 34px; }
  .service-block .btn { align-self: flex-start; }
  .post-block, #blog article:nth-of-type(even) .post-block { grid-template-columns: 1fr; }
  #blog article:nth-of-type(even) .media-wrapper { order: 0; }
  .post-block .media-wrapper { height: min(68vw, 520px); }
  .post-block .media-wrapper .item { height: 50%; }
  .post-block .media-wrapper:has(.item:only-child) .item { height: 100%; }
  .contact-us .contact-info, .contact-us .contact-form { width: 100%; }
}

@media (max-width: 780px) {
  body { font-size: 15px; }
  .section { padding: 86px 0; }
  .hero-area { min-height: 820px; }
  .hero-area > .block { padding: 136px 0 58px; }
  .hero-area > .block h1 {
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(2rem, 9vw, 3.45rem) !important;
    line-height: 1.04 !important;
    letter-spacing: -.04em !important;
    text-wrap: wrap;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-all !important;
  }
  .hero-area > .block p,
  .hero-area > .block .sub-title-2,
  .hero-area > .block .sub-title-2 h {
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-all !important;
  }
  .hero-area .logo svg { width: 220px; }
  .hero-network { display: none; }
  .navigation { height: 68px; }
  .navigation .logo svg { width: 190px; }
  .navbar-toggler { display: block; }
  .navigation .navbar-collapse { display: none; position: absolute; top: 68px; right: 0; left: 0; padding: 12px 24px 24px; background: rgba(7,9,13,.98); border-bottom: 1px solid var(--line); }
  .navigation .navbar-collapse.is-open { display: block; }
  .navigation .navbar-nav { align-items: stretch; flex-direction: column; gap: 0; }
  .navigation .nav-link { padding: 12px 0; }
  .navigation .nav-link::after { bottom: 7px; }
  .title h2 { font-size: clamp(2.2rem, 10vw, 3.75rem); }
  .about .title h2 { font-size: clamp(1.9rem, 8vw, 3.15rem); line-height: 1.12; letter-spacing: -.035em; }
  .service-block { padding: 24px; }
  .service-block img { min-height: 260px; height: 58vw; }
  .post-block .content { padding: 30px 23px; }
  .contact-form img { height: 240px; min-height: 0; }
}

@media (max-width: 480px) {
  .container, .hero-area > .block { width: calc(100% - 30px); }
  .hero-area > .block h1,
  .hero-area > .block p,
  .hero-area > .block .sub-title-2 { width: calc(100% - 34px) !important; }
  .hero-area > .block h1 { font-size: clamp(1.85rem, 8.2vw, 2.35rem) !important; }
  .hero-area .sub-title-2 { padding: 16px; }
  .btn { width: 100%; }
  .service-block .btn { width: 100%; }
  .contact-details { padding: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0ms !important; }
  .hero-area::before, .hero-node, .btn, .post-block .media-wrapper img { transform: none !important; }
  .motion-ready .reveal { opacity: 1; transform: none; }
  .motion-ready .reveal-clip { clip-path: none; }
  .workflow-rail::after { transition: none; }
}

/* One stable, in-window language selector shared by all three source pages. */
.language-switcher {
  position: fixed;
  z-index: 120;
  top: 18px;
  right: clamp(14px, 2.2vw, 34px);
  display: flex;
  align-items: center;
  gap: 3px;
  flex: 0 0 auto;
  margin: 0;
  padding: 4px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  background: rgba(8,10,18,.72);
  box-shadow: inset 0 1px rgba(255,255,255,.06), 0 12px 34px rgba(0,0,0,.22);
  backdrop-filter: blur(15px);
}
.language-switcher .language-choice {
  display: grid;
  place-items: center;
  min-height: 32px;
  padding: 0 11px;
  border-radius: 999px;
  color: rgba(255,255,255,.62);
  font: 680 11px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .04em;
  text-decoration: none;
  white-space: nowrap;
  transition: color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}
.language-switcher .language-choice:hover { color: #fff; }
.language-switcher .language-choice.is-current {
  color: #06110f;
  background: var(--cyan);
  box-shadow: 0 0 24px rgba(67,232,216,.34);
}
.intro-replay {
  position: fixed;
  z-index: 119;
  right: clamp(14px, 2.2vw, 34px);
  bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 999px;
  background: rgba(8,10,18,.76);
  color: rgba(255,255,255,.78);
  box-shadow: 0 10px 30px rgba(0,0,0,.24);
  backdrop-filter: blur(14px);
  font: 680 10px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .06em;
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, transform 160ms ease, background 160ms ease;
}
.intro-replay span { color: var(--cyan); font-size: 16px; line-height: 1; }
.intro-replay:hover { color: #fff; border-color: rgba(67,232,216,.52); background: rgba(8,15,20,.9); transform: translateY(-1px); }
.intro-replay:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
#home, #about, #services, #blog, #contact-us { scroll-margin-top: 88px; }

@media (max-width: 980px) {
  .language-switcher {
    width: max-content;
    top: 12px;
    right: 12px;
  }
  .language-switcher .language-choice { min-height: 29px; padding: 0 8px; font-size: 10px; }
  .intro-replay { right: 12px; bottom: 12px; min-height: 36px; }
}

/* Motion rebuild — a kinetic Japan-market operating system. */
.motion-curtain {
  position: fixed;
  z-index: 1200;
  inset: 0;
  overflow: hidden;
  cursor: pointer;
  perspective: 1400px;
  /* The panels provide the cover. The stage must stay transparent so the page is
     visibly revealed between them instead of remaining behind a black sheet. */
  background: transparent;
  transition: opacity 180ms ease;
}
.motion-curtain.is-finished { opacity: 0; pointer-events: none; }
.curtain-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50.08%;
  overflow: hidden;
  background:
    linear-gradient(90deg, transparent, rgba(67,232,216,.035) 48%, rgba(255,255,255,.08)),
    radial-gradient(circle at 50% 44%, rgba(159,122,234,.12), transparent 42%),
    #05070a;
  box-shadow: inset 0 0 120px rgba(0,0,0,.8);
  backface-visibility: hidden;
  will-change: transform;
}
.curtain-left { left: 0; transform-origin: left center; animation: curtain-left-open 1380ms cubic-bezier(.76,0,.16,1) 280ms both; }
.curtain-right { right: 0; transform-origin: right center; animation: curtain-right-open 1380ms cubic-bezier(.76,0,.16,1) 280ms both; }
.curtain-beam {
  position: absolute;
  top: -12%;
  left: 50%;
  width: 2px;
  height: 124%;
  background: linear-gradient(180deg, transparent, var(--cyan) 28%, #fff 50%, var(--red) 72%, transparent);
  box-shadow: 0 0 18px var(--cyan), 0 0 70px rgba(255,49,95,.5), 0 0 150px rgba(159,122,234,.5);
  transform: translateX(-50%) scaleY(0);
  animation: curtain-beam 1160ms cubic-bezier(.16,1,.3,1) 110ms both;
}
.curtain-word {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  color: rgba(255,255,255,.92);
  font: 700 clamp(.72rem,1.1vw,.96rem)/1 var(--font-sans, Arial, sans-serif);
  letter-spacing: .32em;
  white-space: nowrap;
  transform: translate(-50%,-50%);
  animation: curtain-word 1480ms cubic-bezier(.16,1,.3,1) both;
}
.curtain-word b { color: var(--cyan); padding: 0 .8em; }
.curtain-skip {
  position: absolute;
  z-index: 3;
  right: 24px;
  bottom: 20px;
  color: rgba(255,255,255,.5);
  font: 600 10px/1 Arial,sans-serif;
  letter-spacing: .22em;
}
@keyframes curtain-left-open { 0% { transform: translateX(0) rotateY(0); } 55% { transform: translateX(-4%) rotateY(2deg); } 100% { transform: translateX(-104%) rotateY(12deg); } }
@keyframes curtain-right-open { 0% { transform: translateX(0) rotateY(0); } 55% { transform: translateX(4%) rotateY(-2deg); } 100% { transform: translateX(104%) rotateY(-12deg); } }
@keyframes curtain-beam { 0% { opacity: 0; transform: translateX(-50%) scaleY(0); } 28% { opacity: 1; transform: translateX(-50%) scaleY(1); } 68% { opacity: .9; } 100% { opacity: 0; transform: translateX(-50%) scaleY(1.1); } }
@keyframes curtain-word { 0% { opacity: 0; filter: blur(12px); transform: translate(-50%,-35%) scale(.88); } 25%,60% { opacity: 1; filter: blur(0); transform: translate(-50%,-50%) scale(1); } 100% { opacity: 0; filter: blur(8px); transform: translate(-50%,-70%) scale(1.06); } }

.hero-area.intro-live::before { animation: hero-intro-light 1760ms cubic-bezier(.16,1,.3,1) both; }
.hero-area.intro-live::after { animation: hero-intro-wash 1760ms cubic-bezier(.16,1,.3,1) both; }
@keyframes hero-intro-light {
  0% { opacity: .12; filter: saturate(.65) brightness(.62); transform: scale(1.08); }
  48% { opacity: 1; filter: saturate(1.35) brightness(1.28); }
  100% { opacity: 1; filter: saturate(1) brightness(1); transform: scale(1); }
}
@keyframes hero-intro-wash {
  0% { opacity: 0; background-position: 10% 50%; }
  42% { opacity: .92; }
  100% { opacity: 1; background-position: 50% 50%; }
}

.hero-particle-canvas {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .82;
  mix-blend-mode: screen;
  mask-image: linear-gradient(90deg, transparent 0 26%, #000 58% 100%);
}
.hero-area > .block { z-index: 5; }
.hero-area .hero-kicker,
.hero-area h1,
.hero-area p,
.hero-area .sub-title-2,
.hero-area .btn { will-change: transform, opacity; }
.hero-area h1 {
  position: relative;
  text-shadow: 0 0 60px rgba(255,255,255,.08);
}
.hero-area h1::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -.22em;
  width: min(32vw, 390px);
  height: 3px;
  background: linear-gradient(90deg, var(--cyan), var(--violet) 48%, var(--red), transparent);
  transform: scaleX(0);
  transform-origin: left;
  box-shadow: 0 0 24px rgba(67,232,216,.45);
  animation: hero-line 1100ms var(--ease-out) 980ms both;
}
@keyframes hero-line { to { transform: scaleX(1); } }
.hero-network { z-index: 4; filter: drop-shadow(0 0 18px rgba(67,232,216,.24)); }
.hero-network svg path { stroke-dasharray: 4 8; animation: route-drift 2.4s linear infinite; }
.hero-node {
  overflow: hidden;
  backdrop-filter: blur(12px);
  box-shadow: 0 0 0 1px rgba(67,232,216,.14), 0 0 34px rgba(67,232,216,.16), inset 0 0 24px rgba(159,122,234,.08);
}
.hero-node::after {
  content: "";
  position: absolute;
  inset: -50%;
  background: linear-gradient(90deg, transparent 35%, rgba(255,255,255,.34), transparent 65%);
  transform: translate3d(-60%,0,0) rotate(18deg);
  animation: node-scan 3.8s var(--ease-in-out) infinite;
}
@keyframes route-drift { to { stroke-dashoffset: -48; } }
@keyframes node-scan { 55%,100% { transform: translate3d(60%,0,0) rotate(18deg); } }

.page-conduit {
  position: fixed;
  z-index: 23;
  top: 7vh;
  right: clamp(12px, 2.6vw, 42px);
  width: clamp(70px, 8vw, 128px);
  height: 86vh;
  pointer-events: none;
  opacity: .72;
  mix-blend-mode: screen;
}
.page-conduit .conduit-base { fill: none; stroke: rgba(255,255,255,.09); stroke-width: 1.2; }
.page-conduit .conduit-flow { fill: none; stroke: url(#conduitGradient); stroke-width: 2.2; stroke-linecap: round; filter: drop-shadow(0 0 7px rgba(67,232,216,.52)); }
.page-conduit circle { fill: var(--cyan); filter: drop-shadow(0 0 8px var(--cyan)); }

#services { perspective: 1300px; overflow: clip; }
#services::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 72% 18%, rgba(67,232,216,.09), transparent 27rem), radial-gradient(circle at 18% 62%, rgba(159,122,234,.10), transparent 31rem);
}
@media (min-width: 981px) {
  #services article { min-height: 108vh; transform-style: preserve-3d; }
  #services .service-block {
    position: sticky;
    top: 108px;
    transform-origin: 50% 12%;
    will-change: transform, opacity;
    box-shadow: 0 42px 120px rgba(0,0,0,.48), inset 0 1px rgba(255,255,255,.08);
  }
  #services article:not(:last-child) .service-block::before {
    content: "";
    position: absolute;
    z-index: 5;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(112deg, transparent 34%, rgba(67,232,216,.12) 47%, rgba(255,255,255,.2) 50%, rgba(159,122,234,.1) 53%, transparent 66%);
    transform: translate3d(-115%,0,0);
    opacity: 0;
  }
  #services article.is-current .service-block::before { animation: service-scan 1100ms var(--ease-out) both; }
  @keyframes service-scan { 22% { opacity: .9; } 100% { transform: translate3d(115%,0,0); opacity: 0; } }
}
.service-block img,
.post-block .media-wrapper { transform-origin: center; will-change: transform; }
.service-block img { transition: transform 220ms var(--ease-out); }
.service-block::after,
.post-block::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  border: 1px solid transparent;
  background: linear-gradient(120deg, rgba(67,232,216,.44), transparent 22%, transparent 70%, rgba(255,49,95,.35)) border-box;
  mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: var(--edge-glow, .18);
  transition: opacity 180ms ease;
}
.btn { position: relative; isolation: isolate; overflow: hidden; will-change: transform; }
.btn::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -2px;
  background: radial-gradient(circle at var(--btn-x,50%) var(--btn-y,50%), rgba(255,255,255,.44), transparent 38%);
  opacity: 0;
  transition: opacity 160ms ease;
}

.motion-beacon {
  position: fixed;
  z-index: 24;
  left: 50%;
  bottom: 22px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 24px var(--cyan);
  pointer-events: none;
  opacity: calc(1 - var(--page-progress));
}
.motion-beacon::after {
  content: "";
  position: absolute;
  inset: -6px;
  border: 1px solid rgba(67,232,216,.5);
  border-radius: 50%;
  animation: beacon 1.8s var(--ease-out) infinite;
}
@keyframes beacon { from { transform: scale(.55); opacity: .9; } to { transform: scale(2.8); opacity: 0; } }

@media (hover: hover) and (pointer: fine) {
  .service-block:hover,
  .post-block:hover { --edge-glow: .78; }
  .btn:hover::before { opacity: 1; }
}

@media (max-width: 980px) {
  .page-conduit { right: 4px; width: 52px; opacity: .38; }
  .hero-particle-canvas { opacity: .55; mask-image: linear-gradient(180deg, transparent, #000 25% 78%, transparent); }
  #services .service-block { transform: none !important; opacity: 1 !important; }
}

@media (max-width: 520px) {
  .page-conduit { display: none; }
  .motion-beacon { bottom: 14px; }
  .hero-particle-canvas { opacity: .42; }
  .contact-field-grid { grid-template-columns: 1fr; gap: 0; }
  .contact-form-actions { align-items: flex-start; flex-direction: column; }
  .contact-us .contact-form { border-radius: 16px; }
  .contact-form img { height: 170px; border-radius: 16px 16px 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .motion-curtain:not(.force-motion) { display: none; }
  .motion-curtain.force-motion .curtain-left { animation: curtain-left-open 1380ms cubic-bezier(.76,0,.16,1) 280ms both !important; }
  .motion-curtain.force-motion .curtain-right { animation: curtain-right-open 1380ms cubic-bezier(.76,0,.16,1) 280ms both !important; }
  .motion-curtain.force-motion .curtain-beam { animation: curtain-beam 1160ms cubic-bezier(.16,1,.3,1) 110ms both !important; }
  .motion-curtain.force-motion .curtain-word { animation: curtain-word 1480ms cubic-bezier(.16,1,.3,1) both !important; }
  .hero-area.intro-live::before,
  .hero-area.intro-live::after { animation: none !important; }
  .hero-particle-canvas { opacity: .28; }
  .hero-network svg path,
  .hero-node::after,
  .motion-beacon::after,
  .hero-area h1::after { animation: none !important; }
  .hero-area h1::after { transform: scaleX(1); }
  .page-conduit .conduit-flow { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  #services .service-block { transform: none !important; opacity: 1 !important; }
  #services article.is-current .service-block::before { animation: none !important; }
}

/* Pointer stage — three independent spatial depths, deliberately obvious. */
.pointer-ambient,
.pointer-aura,
.pointer-orbit {
  position: fixed;
  pointer-events: none;
  opacity: 0;
  transition: opacity 220ms ease;
  will-change: transform, opacity;
}
.pointer-ambient {
  z-index: 20;
  left: -30vw;
  top: -45vh;
  width: 160vw;
  height: 190vh;
  background:
    radial-gradient(circle at 50% 50%, rgba(67,232,216,.16), transparent 18%),
    conic-gradient(from 30deg at 50% 50%, transparent, rgba(159,122,234,.09), transparent 28%, rgba(255,49,95,.08), transparent 62%);
  mix-blend-mode: screen;
  filter: blur(28px);
}
.pointer-aura {
  z-index: 24;
  left: 0;
  top: 0;
  width: clamp(420px, 46vw, 720px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255,255,255,.17) 0 1%, rgba(67,232,216,.15) 8%, rgba(159,122,234,.10) 25%, rgba(255,49,95,.06) 43%, transparent 68%);
  mix-blend-mode: screen;
  filter: blur(9px);
}
.pointer-orbit {
  z-index: 25;
  left: 0;
  top: 0;
  width: 170px;
  height: 170px;
  border: 1px solid rgba(67,232,216,.38);
  border-radius: 50%;
  box-shadow: inset 0 0 42px rgba(67,232,216,.07), 0 0 40px rgba(159,122,234,.1);
  mix-blend-mode: screen;
}
.pointer-orbit::before,
.pointer-orbit::after {
  content: "";
  position: absolute;
  inset: 20px;
  border: 1px dashed rgba(255,49,95,.45);
  border-radius: 50%;
}
.pointer-orbit::after {
  inset: 50% auto auto 50%;
  width: 7px;
  height: 7px;
  border: 0;
  background: var(--cyan);
  box-shadow: 0 0 18px var(--cyan);
  transform: translate(-50%,-50%);
}
.pointer-engaged .pointer-ambient { opacity: .95; }
.pointer-engaged .pointer-aura { opacity: .9; }
.pointer-engaged .pointer-orbit { opacity: .72; }

.hero-area::before {
  transform: scale(1.09) translate3d(calc(var(--hero-x, 0) * -34px), calc(var(--hero-y, 0) * -26px), 0);
  transition: none;
}
.hero-area > .block,
.hero-network,
.hero-particle-canvas { will-change: transform; }
.hero-area.pointer-live h1 {
  text-shadow:
    calc(var(--hero-x, 0) * 9px) calc(var(--hero-y, 0) * 5px) 0 rgba(255,49,95,.2),
    calc(var(--hero-x, 0) * -9px) calc(var(--hero-y, 0) * -5px) 0 rgba(67,232,216,.18),
    0 0 62px rgba(255,255,255,.09);
}

.service-stage-hud {
  position: fixed;
  z-index: 22;
  right: clamp(34px, 6vw, 100px);
  top: 16vh;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(30px,0,0);
  transition: opacity 220ms ease, transform 220ms var(--ease-out), color 220ms ease;
  color: var(--cyan);
  font: 760 clamp(7rem, 15vw, 15rem)/.72 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: -.12em;
  mix-blend-mode: screen;
  text-shadow: 0 0 54px currentColor;
}
.service-stage-hud small {
  display: block;
  margin: 24px 0 0 16px;
  font-size: .72rem;
  line-height: 1;
  letter-spacing: .28em;
}
body.service-stage-active .service-stage-hud { opacity: .16; transform: translate3d(0,0,0); }
body.service-step-1 .service-stage-hud { color: var(--violet); }
body.service-step-2 .service-stage-hud { color: var(--red); }
body.service-step-3 .service-stage-hud { color: #f7c66b; }
.card-spotlight {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(480px circle at var(--card-x,50%) var(--card-y,50%), rgba(67,232,216,.14), rgba(159,122,234,.06) 34%, transparent 66%);
  opacity: 0;
  transition: opacity 180ms ease;
}
.service-block > *:not(.card-spotlight) { position: relative; z-index: 1; }

@media (hover: hover) and (pointer: fine) {
  .service-block:hover .card-spotlight { opacity: 1; }
  .post-block:hover { transform: translate3d(0,-6px,0); box-shadow: 0 34px 110px rgba(0,0,0,.34); }
  .post-block { transition: transform 220ms var(--ease-out), box-shadow 220ms ease; }
}

@media (max-width: 980px), (hover: none), (pointer: coarse) {
  .pointer-ambient,
  .pointer-aura,
  .pointer-orbit,
  .service-stage-hud { display: none; }
  .hero-area > .block,
  .hero-network,
  .hero-particle-canvas { transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .pointer-ambient,
  .pointer-aura,
  .pointer-orbit,
  .service-stage-hud { display: none; }
  .hero-area > .block,
  .hero-network,
  .hero-particle-canvas,
  .service-block img { transform: none !important; }
}