:root {
      --bg: #eef0f2;
      --bg-soft: #f8f9fa;
      --panel: rgba(255, 255, 255, 0.58);
      --panel-strong: rgba(255, 255, 255, 0.78);
      --ink: #17191c;
      --muted: #626870;
      --muted-2: #8a9098;
      --line: rgba(23, 25, 28, 0.1);
      --accent: #79818b;
      --accent-2: #b9c0c8;
      --accent-3: #dfe3e8;
      --shadow: 0 26px 90px rgba(20, 24, 30, 0.13);
      --shadow-soft: 0 18px 60px rgba(20, 24, 30, 0.08);
      --radius: 28px;
      --header-bg: rgba(248, 249, 250, 0.72);
      --header-border: rgba(255, 255, 255, 0.72);
      --grid-color: rgba(23, 25, 28, 0.055);
    }

    body.dark {
      --bg: #0d1014;
      --bg-soft: #141820;
      --panel: rgba(30, 35, 43, 0.54);
      --panel-strong: rgba(38, 44, 54, 0.74);
      --ink: #f1f3f5;
      --muted: #a9b0ba;
      --muted-2: #7b8490;
      --line: rgba(255, 255, 255, 0.12);
      --accent: #c5ccd5;
      --accent-2: #68727f;
      --accent-3: #252b34;
      --shadow: 0 28px 100px rgba(0, 0, 0, 0.42);
      --shadow-soft: 0 18px 60px rgba(0, 0, 0, 0.26);
      --header-bg: rgba(18, 22, 28, 0.72);
      --header-border: rgba(255, 255, 255, 0.12);
      --grid-color: rgba(255, 255, 255, 0.055);
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: "Hiragino Sans", "Yu Gothic", "YuGothic", "Noto Sans JP", Arial, sans-serif;
      color: var(--ink);
      background: var(--bg);
      overflow-x: hidden;
      line-height: 1.8;
      transition: background 0.5s ease, color 0.5s ease;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    .ambient {
      position: fixed;
      inset: 0;
      z-index: -6;
      background:
        radial-gradient(circle at 20% 18%, rgba(255, 255, 255, 0.95), transparent 27%),
        radial-gradient(circle at 80% 12%, rgba(183, 190, 199, 0.54), transparent 29%),
        radial-gradient(circle at 52% 84%, rgba(255, 255, 255, 0.86), transparent 34%),
        linear-gradient(135deg, var(--bg) 0%, var(--bg-soft) 45%, #dfe3e8 100%);
    }

    body.dark .ambient {
      background:
        radial-gradient(circle at 20% 18%, rgba(75, 86, 101, 0.3), transparent 29%),
        radial-gradient(circle at 80% 12%, rgba(188, 200, 216, 0.16), transparent 28%),
        radial-gradient(circle at 55% 86%, rgba(78, 88, 104, 0.2), transparent 34%),
        linear-gradient(135deg, #0d1014 0%, #151a22 46%, #07090d 100%);
    }

    .grain {
      position: fixed;
      inset: 0;
      z-index: -5;
      opacity: 0.25;
      pointer-events: none;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.22'/%3E%3C/svg%3E");
    }

    .mesh-grid {
      position: fixed;
      inset: 0;
      z-index: -4;
      opacity: 0.62;
      pointer-events: none;
      background:
        linear-gradient(90deg, var(--grid-color) 1px, transparent 1px),
        linear-gradient(var(--grid-color) 1px, transparent 1px);
      background-size: 56px 56px;
      mask-image: radial-gradient(circle at center, #000 0%, transparent 72%);
      animation: gridDrift 18s linear infinite;
    }

    @keyframes gridDrift {
      from { background-position: 0 0; }
      to { background-position: 56px 56px; }
    }

    .light-beam {
      position: fixed;
      inset: -30% auto auto 8%;
      width: 42vw;
      height: 160vh;
      z-index: -3;
      pointer-events: none;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.42), transparent);
      transform: rotate(22deg);
      filter: blur(20px);
      opacity: 0.42;
      animation: beamSweep 13s ease-in-out infinite alternate;
    }

    body.dark .light-beam {
      background: linear-gradient(90deg, transparent, rgba(153, 170, 194, 0.12), transparent);
      opacity: 0.55;
    }

    @keyframes beamSweep {
      from { transform: translateX(-12vw) rotate(22deg); }
      to { transform: translateX(54vw) rotate(22deg); }
    }

    .orb {
      position: fixed;
      border-radius: 999px;
      filter: blur(10px);
      opacity: 0.52;
      z-index: -2;
      animation: floatOrb 12s ease-in-out infinite alternate;
      pointer-events: none;
    }

    .orb.one {
      width: 250px;
      height: 250px;
      background: rgba(255, 255, 255, 0.76);
      top: 12%;
      left: -70px;
    }

    .orb.two {
      width: 190px;
      height: 190px;
      background: rgba(185, 192, 200, 0.64);
      top: 52%;
      right: -48px;
      animation-delay: -4s;
    }

    .orb.three {
      width: 130px;
      height: 130px;
      background: rgba(223, 227, 232, 0.92);
      bottom: 8%;
      left: 24%;
      animation-delay: -7s;
    }

    body.dark .orb.one { background: rgba(91, 101, 116, 0.28); }
    body.dark .orb.two { background: rgba(168, 182, 204, 0.18); }
    body.dark .orb.three { background: rgba(78, 86, 101, 0.24); }

    @keyframes floatOrb {
      from { transform: translate3d(0, 0, 0) scale(1); }
      to { transform: translate3d(34px, -44px, 0) scale(1.12); }
    }

    .particle-layer {
      position: fixed;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      overflow: hidden;
    }

    .particle {
      position: absolute;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: rgba(120, 130, 143, 0.38);
      box-shadow: 0 0 18px rgba(255,255,255,0.58);
      animation: particleRise linear infinite;
    }

    body.dark .particle {
      background: rgba(206, 216, 230, 0.52);
      box-shadow: 0 0 18px rgba(174, 194, 224, 0.42);
    }

    @keyframes particleRise {
      from { transform: translate3d(0, 108vh, 0) scale(0.72); opacity: 0; }
      15% { opacity: 0.75; }
      85% { opacity: 0.75; }
      to { transform: translate3d(var(--x-drift), -12vh, 0) scale(1.22); opacity: 0; }
    }

    .site-header {
      position: absolute;
      top: 18px;
      left: 50%;
      transform: translateX(-50%);
      width: min(1120px, calc(100% - 32px));
      z-index: 30;
      border: 1px solid var(--header-border);
      background: var(--header-bg);
      backdrop-filter: blur(22px);
      border-radius: 999px;
      box-shadow: var(--shadow-soft);
    }

    .nav {
      height: 68px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 18px 0 26px;
      gap: 24px;
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 10px;
      letter-spacing: 0.12em;
      font-weight: 800;
      font-size: 18px;
      white-space: nowrap;
    }

    .logo-mark {
      width: 34px;
      height: 34px;
      border-radius: 12px;
      background: linear-gradient(135deg, #1e2228, #8b949f 58%, #e7eaee);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.34), 0 12px 24px rgba(70, 78, 90, 0.22);
      position: relative;
      overflow: hidden;
    }

    .logo-mark::after {
      content: "";
      position: absolute;
      inset: -40% auto auto -80%;
      width: 70%;
      height: 180%;
      background: rgba(255,255,255,0.38);
      transform: rotate(24deg);
      animation: markShine 4.6s ease-in-out infinite;
    }

    @keyframes markShine {
      0%, 45% { left: -90%; }
      70%, 100% { left: 120%; }
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 20px;
      color: var(--muted);
      font-size: 12px;
      letter-spacing: 0.08em;
      font-weight: 700;
    }

    .nav-links a {
      position: relative;
      opacity: 0.82;
      transition: opacity 0.25s ease, color 0.25s ease;
    }

    .nav-links a::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -8px;
      width: 0;
      height: 1px;
      background: var(--accent);
      transition: width 0.25s ease;
    }

    .nav-links a:hover {
      opacity: 1;
      color: var(--ink);
    }

    .nav-links a:hover::after { width: 100%; }

    .nav-right {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .theme-toggle {
      width: 44px;
      height: 44px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: var(--panel-strong);
      color: var(--ink);
      cursor: pointer;
      display: grid;
      place-items: center;
      box-shadow: 0 10px 24px rgba(20, 24, 30, 0.08);
      transition: transform 0.25s ease, background 0.3s ease;
    }

    .theme-toggle:hover { transform: translateY(-2px) rotate(8deg); }

    .theme-icon {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: var(--ink);
      box-shadow: inset -6px -2px 0 var(--panel-strong);
    }

    body.dark .theme-icon {
      background: #f1f3f5;
      box-shadow: 0 0 0 4px rgba(241,243,245,0.12);
    }

    main { width: 100%; }

    .section {
      width: min(1120px, calc(100% - 40px));
      margin: 0 auto;
      padding: 112px 0;
      position: relative;
    }

    .section::before {
      content: "";
      position: absolute;
      top: 48px;
      left: 0;
      width: 100%;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--line), transparent);
      opacity: 0.8;
      transform: scaleX(0);
      transform-origin: center;
      transition: transform 1s ease;
    }

    .section.line-in::before { transform: scaleX(1); }

    .hero {
      min-height: 100vh;
      display: grid;
      grid-template-columns: 1.05fr 0.95fr;
      align-items: center;
      gap: 58px;
      padding-top: 110px;
    }

    .hero::before { display: none; }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: var(--accent);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      margin-bottom: 22px;
    }

    .eyebrow::before {
      content: "";
      width: 38px;
      height: 1px;
      background: currentColor;
      opacity: 0.65;
    }

    h1 {
      font-size: clamp(48px, 7vw, 92px);
      line-height: 0.98;
      letter-spacing: -0.06em;
      font-weight: 800;
      margin-bottom: 28px;
    }

    .hero h1 span {
      display: block;
      background: linear-gradient(90deg, var(--ink) 0%, #7d8792 56%, #e5e8ec 100%);
      -webkit-background-clip: text;
      color: transparent;
      background-size: 220% auto;
      animation: textSheen 5.4s ease-in-out infinite alternate;
    }

    body.dark .hero h1 span {
      background: linear-gradient(90deg, #ffffff 0%, #9aa7b7 56%, #3b4654 100%);
      -webkit-background-clip: text;
      color: transparent;
    }

    @keyframes textSheen {
      from { background-position: 0% center; }
      to { background-position: 100% center; }
    }

    .hero-copy {
      max-width: 540px;
      color: var(--muted);
      font-size: 16px;
      line-height: 2.1;
      margin-bottom: 34px;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      align-items: center;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 52px;
      padding: 0 24px;
      border-radius: 999px;
      font-weight: 800;
      font-size: 13px;
      letter-spacing: 0.08em;
      border: 1px solid var(--line);
      transition: transform 0.25s ease, box-shadow 0.25s ease;
      position: relative;
      overflow: hidden;
    }

    .btn::after {
      content: "";
      position: absolute;
      inset: -80% auto auto -70%;
      width: 60%;
      height: 220%;
      background: rgba(255,255,255,0.28);
      transform: rotate(22deg);
      transition: left 0.55s ease;
    }

    .btn:hover::after { left: 120%; }

    .btn.primary {
      color: #fff;
      background: #1e2228;
      box-shadow: 0 18px 40px rgba(30, 34, 40, 0.18);
    }

    body.dark .btn.primary {
      color: #111418;
      background: #f1f3f5;
    }

    .btn.secondary {
      background: var(--panel);
      backdrop-filter: blur(16px);
    }

    .btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 20px 50px rgba(20, 24, 30, 0.14);
    }

    .action-spacing { margin-top: 30px; }
    .with-margin { margin-top: 18px; }

    .hero-visual {
      position: relative;
      min-height: 560px;
      perspective: 1000px;
    }

    .visual-card {
      position: absolute;
      border-radius: 38px;
      border: 1px solid rgba(255,255,255,0.5);
      background: var(--panel);
      backdrop-filter: blur(22px);
      box-shadow: var(--shadow);
      overflow: hidden;
      animation: floatCard 7s ease-in-out infinite alternate;
    }

    body.dark .visual-card { border-color: rgba(255,255,255,0.12); }

    .visual-card.large {
      width: 78%;
      height: 72%;
      right: 3%;
      top: 9%;
      padding: 26px;
      transform: rotateY(-10deg) rotateX(8deg) rotateZ(-2deg);
    }

    .visual-card.large::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.42) 48%, transparent 72%);
      transform: translateX(-120%);
      animation: panelScan 4.8s ease-in-out infinite;
      pointer-events: none;
      z-index: 4;
    }

    @keyframes panelScan {
      0%, 36% { transform: translateX(-120%); }
      68%, 100% { transform: translateX(120%); }
    }

    .visual-card.small {
      width: 48%;
      height: 30%;
      left: 0;
      bottom: 10%;
      padding: 22px;
      animation-delay: -2.4s;
      transform: rotateY(12deg) rotateX(5deg) rotateZ(4deg);
    }

    .visual-card.tiny {
      width: 34%;
      height: 18%;
      right: 0;
      bottom: 3%;
      padding: 18px;
      animation-delay: -4.2s;
      transform: rotateY(-8deg) rotateX(4deg) rotateZ(-6deg);
    }

    @keyframes floatCard {
      from { translate: 0 0; }
      to { translate: 0 -18px; }
    }

    .no-image-hero {
      position: relative;
    }

    .hero-grid {
      position: absolute;
      inset: 24px;
      border-radius: 28px;
      border: 1px solid var(--line);
      background:
        radial-gradient(circle at 50% 50%, rgba(255,255,255,0.28), transparent 22%),
        linear-gradient(90deg, var(--grid-color) 1px, transparent 1px),
        linear-gradient(var(--grid-color) 1px, transparent 1px);
      background-size: auto, 36px 36px, 36px 36px;
      animation: gridDrift 14s linear infinite;
    }

    .hero-core {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      z-index: 2;
    }

    .core-ring {
      position: absolute;
      border-radius: 50%;
      border: 1px solid var(--line);
      animation: orbitSpin 16s linear infinite;
    }

    .ring-one { width: 250px; height: 250px; }
    .ring-two { width: 330px; height: 330px; animation-duration: 23s; animation-direction: reverse; }
    .ring-three { width: 410px; height: 410px; animation-duration: 31s; }

    .core-text {
      width: 132px;
      height: 132px;
      border-radius: 38px;
      background: var(--panel-strong);
      border: 1px solid rgba(255,255,255,0.45);
      display: grid;
      place-items: center;
      text-align: center;
      box-shadow: var(--shadow-soft), 0 0 0 18px rgba(120,130,143,0.08);
    }

    .core-text strong {
      display: block;
      font-size: 34px;
      line-height: 1;
    }

    .core-text span {
      display: block;
      margin-top: 8px;
      color: var(--muted);
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 0.12em;
    }

    .hero-node {
      position: absolute;
      z-index: 3;
      padding: 10px 14px;
      border-radius: 999px;
      background: var(--panel-strong);
      border: 1px solid rgba(255,255,255,0.38);
      color: var(--muted);
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 0.12em;
    }

    .n1 { top: 22%; left: 12%; }
    .n2 { top: 18%; right: 14%; }
    .n3 { bottom: 22%; left: 14%; }
    .n4 { bottom: 18%; right: 16%; }

    .hero-line {
      position: absolute;
      z-index: 1;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--accent), transparent);
      opacity: 0.45;
      animation: signalLine 3.6s ease-in-out infinite;
    }

    .l1 { left: 15%; right: 15%; top: 50%; }
    .l2 { top: 20%; bottom: 20%; left: 50%; width: 1px; height: auto; background: linear-gradient(180deg, transparent, var(--accent), transparent); }

    .hero-tag {
      position: absolute;
      left: 26px;
      bottom: 24px;
      z-index: 5;
      padding: 10px 14px;
      border-radius: 999px;
      background: rgba(255,255,255,0.72);
      backdrop-filter: blur(10px);
      color: #1f2329;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.12em;
      box-shadow: 0 10px 24px rgba(20, 24, 30, 0.08);
    }

    body.dark .hero-tag {
      background: rgba(20,24,30,0.72);
      color: #f2f4f7;
    }

    @keyframes orbitSpin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    .sparkle {
      position: absolute;
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 0 24px rgba(255,255,255,0.95);
      animation: sparkle 3.6s ease-in-out infinite;
      z-index: 4;
    }

    .sparkle.s1 { top: 18%; left: 18%; }
    .sparkle.s2 { top: 30%; right: 12%; animation-delay: -1.1s; }
    .sparkle.s3 { bottom: 25%; left: 28%; animation-delay: -2s; }

    @keyframes sparkle {
      0%, 100% { transform: scale(0.6); opacity: 0.35; }
      50% { transform: scale(1.3); opacity: 1; }
    }

    .mini-label {
      color: var(--accent);
      font-weight: 900;
      letter-spacing: 0.14em;
      font-size: 12px;
      margin-bottom: 10px;
    }

    .mini-title {
      font-size: 24px;
      font-weight: 900;
      line-height: 1.25;
      letter-spacing: -0.03em;
    }

    .ticker {
      position: relative;
      overflow: hidden;
      height: 26px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.14em;
      white-space: nowrap;
    }

    .ticker span {
      position: absolute;
      display: inline-block;
      animation: tickerMove 7s linear infinite;
    }

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

    .section-head {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 30px;
      margin-bottom: 42px;
    }

    .section-kicker {
      color: var(--accent);
      font-size: 12px;
      font-weight: 900;
      letter-spacing: 0.18em;
      margin-bottom: 10px;
    }

    .section-title {
      font-size: clamp(32px, 4vw, 54px);
      line-height: 1.12;
      letter-spacing: -0.05em;
      font-weight: 900;
    }

    .section-desc {
      max-width: 420px;
      color: var(--muted);
      font-size: 14px;
      line-height: 2;
    }

    .glass {
      border: 1px solid rgba(255,255,255,0.55);
      background: var(--panel);
      backdrop-filter: blur(20px);
      box-shadow: var(--shadow);
    }

    body.dark .glass { border-color: rgba(255,255,255,0.12); }

    .about-panel {
      display: grid;
      grid-template-columns: 0.95fr 1.05fr;
      gap: 28px;
      align-items: stretch;
    }

    .about-copy {
      border-radius: var(--radius);
      padding: 42px;
      min-height: 440px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .about-copy h3 {
      font-size: 30px;
      line-height: 1.35;
      letter-spacing: -0.04em;
      margin-bottom: 18px;
    }

    .about-copy p {
      color: var(--muted);
      font-size: 15px;
      margin-bottom: 22px;
    }

    .about-keywords {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    .keyword-card {
      border-radius: 26px;
      padding: 26px;
      min-height: 210px;
      position: relative;
      overflow: hidden;
      transition: transform 0.3s ease;
    }

    .keyword-card:hover { transform: translateY(-6px); }

    .keyword-card::after {
      content: "";
      position: absolute;
      right: -42px;
      bottom: -42px;
      width: 130px;
      height: 130px;
      border-radius: 50%;
      background: rgba(185,192,200,0.22);
      animation: breathe 4s ease-in-out infinite alternate;
    }

    .keyword-card span {
      color: var(--accent);
      font-size: 12px;
      font-weight: 900;
      letter-spacing: 0.12em;
    }

    .keyword-card h3 {
      margin-top: 36px;
      margin-bottom: 12px;
      font-size: 22px;
    }

    .keyword-card p {
      color: var(--muted);
      font-size: 13px;
    }

    .cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
    }

    .service-card {
      min-height: 310px;
      border-radius: var(--radius);
      padding: 30px;
      position: relative;
      overflow: hidden;
      transition: transform 0.35s ease, box-shadow 0.35s ease;
    }

    .service-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 30px 90px rgba(20, 24, 30, 0.16);
    }

    .service-card::before {
      content: "";
      position: absolute;
      inset: auto -80px -90px auto;
      width: 190px;
      height: 190px;
      border-radius: 50%;
      background: linear-gradient(135deg, rgba(255,255,255,0.38), rgba(185,192,200,0.3));
      transition: transform 0.35s ease;
      animation: breathe 4.4s ease-in-out infinite alternate;
    }

    .service-card:hover::before { transform: scale(1.16); }

    @keyframes breathe {
      from { transform: scale(0.9); opacity: 0.35; }
      to { transform: scale(1.2); opacity: 0.78; }
    }

    .num {
      color: var(--accent);
      font-size: 13px;
      letter-spacing: 0.14em;
      font-weight: 900;
      margin-bottom: 50px;
    }

    .service-card h3 {
      font-size: 24px;
      line-height: 1.35;
      margin-bottom: 16px;
      letter-spacing: -0.04em;
    }

    .service-card p {
      color: var(--muted);
      font-size: 14px;
    }

    .business-flow {
      margin-top: 32px;
      border-radius: 34px;
      padding: 28px;
      display: grid;
      grid-template-columns: 1fr 48px 1fr 48px 1fr 48px 1fr;
      align-items: center;
      gap: 8px;
      overflow: hidden;
      position: relative;
    }

    .business-flow::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, var(--grid-color) 1px, transparent 1px),
        linear-gradient(var(--grid-color) 1px, transparent 1px);
      background-size: 36px 36px;
      opacity: 0.5;
      pointer-events: none;
    }

    .flow-step {
      position: relative;
      z-index: 2;
      min-height: 120px;
      border-radius: 24px;
      background: var(--panel-strong);
      display: grid;
      place-items: center;
      text-align: center;
      padding: 18px;
    }

    .flow-step b {
      font-size: 20px;
      letter-spacing: 0.1em;
    }

    .flow-step span {
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
    }

    .flow-arrow {
      position: relative;
      z-index: 2;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--accent), transparent);
      animation: signalLine 2.8s ease-in-out infinite;
    }

    .tech-wrap {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 22px;
      align-items: stretch;
    }

    .tech-visual {
      min-height: 560px;
      border-radius: 36px;
      position: relative;
      overflow: hidden;
    }

    .tech-grid-inner {
      position: absolute;
      inset: 28px;
      border-radius: 28px;
      border: 1px solid var(--line);
      background:
        radial-gradient(circle at center, rgba(255,255,255,0.18), transparent 28%),
        linear-gradient(90deg, var(--grid-color) 1px, transparent 1px),
        linear-gradient(var(--grid-color) 1px, transparent 1px);
      background-size: auto, 42px 42px, 42px 42px;
      animation: gridMove 12s linear infinite;
    }

    @keyframes gridMove {
      from { background-position: 0 0; }
      to { background-position: 42px 42px; }
    }

    @keyframes signalLine {
      0%, 100% { transform: scaleX(0.4); opacity: 0.2; }
      50% { transform: scaleX(1); opacity: 0.72; }
    }

    .tech-map {
      min-height: 560px;
      position: relative;
      overflow: hidden;
    }

    .map-core {
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: 6;
      width: 154px;
      height: 154px;
      transform: translate(-50%, -50%);
      border-radius: 42px;
      display: grid;
      place-items: center;
      text-align: center;
      background: var(--panel-strong);
      border: 1px solid rgba(255,255,255,0.5);
      box-shadow:
        var(--shadow-soft),
        0 0 0 18px rgba(121,129,139,0.08),
        0 0 80px rgba(121,129,139,0.18);
      animation: coreBreath 4.8s ease-in-out infinite alternate;
    }

    body.dark .map-core {
      border-color: rgba(255,255,255,0.14);
      box-shadow:
        var(--shadow-soft),
        0 0 0 18px rgba(180,198,226,0.05),
        0 0 90px rgba(180,198,226,0.13);
    }

    .map-core strong {
      display: block;
      font-size: 18px;
      line-height: 1;
      letter-spacing: 0.08em;
    }

    .map-core span {
      display: block;
      margin-top: 8px;
      color: var(--muted);
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 0.14em;
    }

    @keyframes coreBreath {
      from { transform: translate(-50%, -50%) scale(0.98); }
      to { transform: translate(-50%, -50%) scale(1.04); }
    }

    .map-node {
      position: absolute;
      z-index: 7;
      width: 124px;
      height: 88px;
      border-radius: 26px;
      display: grid;
      place-items: center;
      text-align: center;
      background: var(--panel-strong);
      border: 1px solid rgba(255,255,255,0.45);
      box-shadow: var(--shadow-soft);
      animation: nodeFloat 5.6s ease-in-out infinite alternate;
    }

    body.dark .map-node {
      border-color: rgba(255,255,255,0.12);
    }

    .map-node b {
      display: block;
      font-size: 15px;
      letter-spacing: 0.08em;
    }

    .map-node span {
      display: block;
      margin-top: 4px;
      color: var(--muted);
      font-size: 9px;
      font-weight: 900;
      letter-spacing: 0.12em;
    }

    .node-ai {
      top: 76px;
      left: 74px;
    }

    .node-data {
      top: 96px;
      right: 72px;
      animation-delay: -1.2s;
    }

    .node-pod {
      left: 50%;
      bottom: 78px;
      transform: translateX(-50%);
      animation-delay: -2.1s;
    }

    .node-ec {
      right: 86px;
      bottom: 172px;
      animation-delay: -3s;
    }

    @keyframes nodeFloat {
      from { translate: 0 0; }
      to { translate: 0 -10px; }
    }

    .connector {
      position: absolute;
      z-index: 3;
      left: 50%;
      top: 50%;
      height: 1px;
      transform-origin: left center;
      background: linear-gradient(90deg, transparent, rgba(121,129,139,0.65), transparent);
      opacity: 0.72;
      animation: connectorPulse 3.6s ease-in-out infinite;
    }

    body.dark .connector {
      background: linear-gradient(90deg, transparent, rgba(197,204,213,0.42), transparent);
    }

    .connector::after {
      content: "";
      position: absolute;
      top: -3px;
      left: 15%;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 18px rgba(121,129,139,0.65);
      animation: signalDot 2.8s linear infinite;
    }

    .connector-ai {
      width: 230px;
      transform: rotate(218deg);
    }

    .connector-data {
      width: 230px;
      transform: rotate(322deg);
      animation-delay: -0.7s;
    }

    .connector-pod {
      width: 190px;
      transform: rotate(90deg);
      animation-delay: -1.4s;
    }

    .connector-ec {
      width: 190px;
      transform: rotate(28deg);
      animation-delay: -2s;
    }

    @keyframes connectorPulse {
      0%, 100% { opacity: 0.28; }
      50% { opacity: 0.78; }
    }

    @keyframes signalDot {
      from { left: 10%; opacity: 0; }
      20% { opacity: 1; }
      80% { opacity: 1; }
      to { left: 88%; opacity: 0; }
    }

    .map-label {
      position: absolute;
      z-index: 4;
      color: var(--muted-2);
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 0.14em;
      opacity: 0.55;
    }

    .label-01 { left: 64px; bottom: 174px; }
    .label-02 { right: 66px; top: 214px; }
    .label-03 { left: 50%; top: 112px; transform: translateX(-50%); }
    .label-04 { right: 72px; bottom: 72px; }

    .status-mini {
      position: absolute;
      left: 58px;
      bottom: 52px;
      z-index: 8;
      width: 190px;
      border-radius: 22px;
      padding: 16px;
      background: rgba(255,255,255,0.36);
      border: 1px solid rgba(255,255,255,0.38);
      backdrop-filter: blur(14px);
      box-shadow: var(--shadow-soft);
    }

    body.dark .status-mini {
      background: rgba(20,24,30,0.44);
      border-color: rgba(255,255,255,0.12);
    }

    .status-title {
      color: var(--accent);
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 0.14em;
      margin-bottom: 10px;
    }

    .status-row {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      padding: 7px 0;
      border-top: 1px solid var(--line);
    }

    .status-row span {
      color: var(--muted);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.08em;
    }

    .status-row b {
      font-size: 10px;
      letter-spacing: 0.08em;
    }

    .tech-map .orbit-a {
      position: absolute;
      inset: 108px;
      border: 1px solid var(--line);
      border-radius: 50%;
      animation: orbitSpin 26s linear infinite;
    }

    .tech-map .orbit-b {
      position: absolute;
      inset: 164px;
      border: 1px solid var(--line);
      border-radius: 50%;
      animation: orbitSpin 18s linear infinite reverse;
    }

    .tech-list {
      display: grid;
      gap: 14px;
    }

    .tech-item {
      border-radius: 22px;
      padding: 22px 24px;
      display: flex;
      gap: 18px;
      align-items: flex-start;
      transition: transform 0.3s ease;
    }

    .tech-item:hover { transform: translateX(8px); }

    .tech-item i {
      width: 11px;
      height: 11px;
      border-radius: 50%;
      background: var(--accent);
      margin-top: 9px;
      box-shadow: 0 0 0 8px rgba(121,129,139,0.13);
      flex: 0 0 auto;
      animation: dotBlink 2.8s ease-in-out infinite;
    }

    @keyframes dotBlink {
      0%, 100% { opacity: 0.45; transform: scale(0.9); }
      50% { opacity: 1; transform: scale(1.15); }
    }

    .tech-item h3 {
      font-size: 17px;
      margin-bottom: 4px;
    }

    .tech-item p {
      color: var(--muted);
      font-size: 13px;
    }

    .system-status {
      border-radius: 26px;
      padding: 24px;
      display: grid;
      gap: 16px;
    }

    .status-line {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 14px;
      border-bottom: 1px solid var(--line);
    }

    .status-line:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }

    .status-line span {
      color: var(--muted);
      font-size: 12px;
      font-weight: 900;
      letter-spacing: 0.12em;
    }

    .status-line b {
      font-size: 12px;
      letter-spacing: 0.12em;
    }

    .custom-band {
      border-radius: 42px;
      padding: 56px;
      display: grid;
      grid-template-columns: 1fr 0.9fr;
      gap: 44px;
      align-items: center;
      position: relative;
      overflow: hidden;
    }

    .custom-band::before {
      content: "";
      position: absolute;
      inset: -1px;
      background: conic-gradient(from 120deg, transparent, rgba(255,255,255,0.42), transparent, rgba(130,140,153,0.2), transparent);
      opacity: 0.52;
      animation: conicMove 7s linear infinite;
      pointer-events: none;
    }

    body.dark .custom-band::before {
      background: conic-gradient(from 120deg, transparent, rgba(164,184,213,0.14), transparent, rgba(255,255,255,0.06), transparent);
    }

    @keyframes conicMove {
      from { transform: rotate(0deg) scale(1.5); }
      to { transform: rotate(360deg) scale(1.5); }
    }

    .custom-band > * {
      position: relative;
      z-index: 2;
    }

    .custom-band::after {
      content: "CUSTOM";
      position: absolute;
      right: -24px;
      bottom: -36px;
      font-size: 128px;
      font-weight: 900;
      letter-spacing: -0.08em;
      color: rgba(30,34,40,0.035);
      line-height: 1;
      z-index: 1;
    }

    body.dark .custom-band::after { color: rgba(255,255,255,0.04); }

    .custom-console {
      margin-top: 26px;
      border-radius: 28px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,0.28);
      background: rgba(255,255,255,0.18);
      box-shadow: var(--shadow-soft);
    }

    .console-head {
      height: 48px;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 0 18px;
      border-bottom: 1px solid var(--line);
    }

    .console-head span {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--accent-2);
    }

    .console-head b {
      margin-left: 10px;
      font-size: 11px;
      letter-spacing: 0.12em;
    }

    .console-body {
      display: grid;
      grid-template-columns: 0.8fr 1fr;
      gap: 20px;
      padding: 24px;
    }

    .console-phone {
      height: 260px;
      border-radius: 32px;
      border: 1px solid var(--line);
      position: relative;
      background:
        linear-gradient(90deg, var(--grid-color) 1px, transparent 1px),
        linear-gradient(var(--grid-color) 1px, transparent 1px);
      background-size: 24px 24px;
    }

    .camera-hole {
      position: absolute;
      top: 22px;
      left: 22px;
      width: 70px;
      height: 70px;
      border-radius: 24px;
      border: 1px solid var(--line);
      background: var(--panel);
    }

    .print-area {
      position: absolute;
      inset: 112px 24px 28px;
      border: 1px dashed var(--accent);
      border-radius: 24px;
      display: grid;
      place-items: center;
      color: var(--muted);
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 0.14em;
    }

    .console-info {
      display: grid;
      gap: 14px;
    }

    .console-info div {
      border-radius: 18px;
      padding: 16px;
      background: var(--panel);
      border: 1px solid rgba(255,255,255,0.18);
    }

    .console-info span {
      display: block;
      color: var(--muted-2);
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 0.12em;
    }

    .console-info b {
      display: block;
      margin-top: 6px;
      font-size: 13px;
    }

    .steps {
      display: grid;
      gap: 14px;
      position: relative;
      z-index: 2;
    }

    .step {
      display: flex;
      gap: 16px;
      align-items: center;
      border-radius: 20px;
      padding: 16px;
      background: var(--panel);
      border: 1px solid rgba(255,255,255,0.42);
      transition: transform 0.3s ease;
    }

    body.dark .step { border-color: rgba(255,255,255,0.1); }

    .step:hover { transform: translateX(-8px); }

    .step b {
      width: 40px;
      height: 40px;
      display: grid;
      place-items: center;
      border-radius: 14px;
      background: #1e2228;
      color: #fff;
      font-size: 12px;
      flex: 0 0 auto;
    }

    body.dark .step b {
      background: #f1f3f5;
      color: #111418;
    }

    .store-dashboard {
      border-radius: 34px;
      padding: 24px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
      margin-bottom: 24px;
    }

    .dash-panel {
      min-height: 150px;
      border-radius: 24px;
      background: var(--panel-strong);
      padding: 24px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .dash-panel span {
      color: var(--muted);
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.12em;
    }

    .dash-panel strong {
      font-size: 42px;
      letter-spacing: -0.05em;
    }

    .store-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      margin-top: 24px;
    }

    .store-card {
      border-radius: 26px;
      min-height: 170px;
      padding: 24px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      transition: transform 0.3s ease;
      position: relative;
      overflow: hidden;
    }

    .store-card::after {
      content: "";
      position: absolute;
      left: 24px;
      bottom: 52px;
      width: 46px;
      height: 2px;
      background: var(--accent);
      transform-origin: left;
      transform: scaleX(0.25);
      transition: transform 0.35s ease;
    }

    .store-card:hover { transform: translateY(-6px); }
    .store-card:hover::after { transform: scaleX(1.3); }

    .store-card h3 {
      font-size: 20px;
      letter-spacing: -0.03em;
    }

    .store-card span {
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.12em;
    }
.store-card p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.75;
  font-weight: 500;
  margin: 16px 0 18px;
}
    .contact-panel {
      border-radius: 42px;
      padding: 56px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 30px;
      position: relative;
      overflow: hidden;
    }

    .contact-panel::before {
      content: "";
      position: absolute;
      width: 260px;
      height: 260px;
      border-radius: 50%;
      right: -90px;
      top: -90px;
      background: rgba(185,192,200,0.26);
      animation: breathe 4.8s ease-in-out infinite alternate;
    }

    .contact-panel > * {
      position: relative;
      z-index: 2;
    }

    .contact-panel h2 {
      font-size: clamp(32px, 4vw, 54px);
      line-height: 1.1;
      letter-spacing: -0.05em;
      margin-bottom: 14px;
    }

    .contact-panel p {
      color: var(--muted);
      max-width: 620px;
    }

    .site-footer {
      width: min(1120px, calc(100% - 40px));
      margin: 0 auto 34px;
      border-radius: 34px;
      padding: 42px;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1.2fr 0.8fr 0.8fr 0.8fr;
      gap: 34px;
    }

    .footer-logo {
      font-size: 22px;
      letter-spacing: 0.14em;
      font-weight: 900;
      margin-bottom: 16px;
    }

    .footer-desc {
      color: var(--muted);
      font-size: 13px;
      max-width: 280px;
    }

    .footer-col h4 {
      font-size: 12px;
      letter-spacing: 0.16em;
      margin-bottom: 16px;
      color: var(--accent);
    }

    .footer-col a {
      display: block;
      color: var(--muted);
      font-size: 13px;
      margin-bottom: 10px;
    }

    .copyright {
      margin-top: 38px;
      padding-top: 24px;
      border-top: 1px solid var(--line);
      color: var(--muted);
      font-size: 12px;
    }

    .reveal {
      opacity: 0;
      transform: translateY(32px) scale(0.98);
      filter: blur(8px);
      transition: opacity 0.85s ease, transform 0.85s ease, filter 0.85s ease;
    }

    .reveal.in-view {
      opacity: 1;
      transform: translateY(0) scale(1);
      filter: blur(0);
    }

    @media (max-width: 920px) {
      .nav-links { display: none; }

      .hero,
      .about-panel,
      .tech-wrap,
      .custom-band {
        grid-template-columns: 1fr;
      }

      .hero { padding-top: 140px; }
      .hero-visual { min-height: 460px; }

      .cards,
      .store-grid,
      .footer-grid,
      .store-dashboard {
        grid-template-columns: 1fr 1fr;
      }

      .business-flow {
        grid-template-columns: 1fr;
      }

      .flow-arrow {
        height: 36px;
        width: 1px;
        justify-self: center;
        background: linear-gradient(180deg, transparent, var(--accent), transparent);
      }

      .contact-panel {
        flex-direction: column;
        align-items: flex-start;
      }

      .tech-map { min-height: 520px; }

      .status-mini {
        left: 38px;
        bottom: 38px;
      }

      .node-ai { left: 48px; }
      .node-data { right: 48px; }
      .node-ec { right: 58px; }
    }

    @media (max-width: 620px) {
      .section {
        width: min(100% - 28px, 1120px);
        padding: 82px 0;
      }

      .nav {
        height: 62px;
        padding: 0 12px 0 18px;
      }

      .logo { font-size: 15px; }

      .theme-toggle {
        width: 40px;
        height: 40px;
      }

      .hero { gap: 28px; }

      .hero-visual {
        min-height: 390px;
        height: 430px;
      }

      .visual-card.large {
        width: 88%;
        right: 0;
      }

      .visual-card.small { width: 64%; }
      .visual-card.tiny { display: none; }

      .section-head { display: block; }
      .section-desc { margin-top: 18px; }

      .cards,
      .store-grid,
      .footer-grid,
      .about-keywords,
      .store-dashboard {
        grid-template-columns: 1fr;
      }

      .about-copy,
      .custom-band,
      .contact-panel,
      .site-footer {
        padding: 30px;
      }

      .console-body {
        grid-template-columns: 1fr;
      }

      .ring-three,
      .ring-two {
        display: none;
      }

      .tech-map {
        min-height: 430px;
      }

      .map-core {
        width: 126px;
        height: 126px;
        border-radius: 34px;
      }

      .map-core strong {
        font-size: 15px;
      }

      .map-node {
        width: 94px;
        height: 70px;
        border-radius: 22px;
      }

      .map-node b {
        font-size: 13px;
      }

      .map-node span {
        font-size: 8px;
      }

      .node-ai {
        top: 56px;
        left: 34px;
      }

      .node-data {
        top: 72px;
        right: 34px;
      }

      .node-pod {
        bottom: 54px;
      }

      .node-ec {
        right: 36px;
        bottom: 136px;
      }

      .status-mini,
      .map-label {
        display: none;
      }

      .connector-ai,
      .connector-data {
        width: 170px;
      }

      .connector-pod,
      .connector-ec {
        width: 140px;
      }
    }


    /* CUSTOM section alignment fix */
    .custom-band {
      align-items: start;
    }

    .custom-band .steps {
      align-self: start;
      padding-top: 148px;
    }

    @media (max-width: 920px) {
      .custom-band .steps {
        padding-top: 0;
      }
    }

  

    /* ===== CUSTOM section full relayout v2 ===== */
    #custom .custom-band {
      grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr) !important;
      align-items: start !important;
      column-gap: 46px !important;
      padding: 56px !important;
    }

    #custom .custom-band > div:first-child {
      display: grid !important;
      grid-template-columns: 1fr !important;
    }

    #custom .custom-console {
      margin-top: 28px !important;
      width: 100% !important;
    }

    #custom .custom-process {
      align-self: start !important;
      margin-top: 202px !important;
      position: relative !important;
      z-index: 3 !important;
      border-radius: 30px !important;
      padding: 20px !important;
      background: rgba(255, 255, 255, 0.22) !important;
      border: 1px solid rgba(255, 255, 255, 0.34) !important;
      box-shadow: var(--shadow-soft) !important;
      backdrop-filter: blur(18px) !important;
    }

    body.dark #custom .custom-process {
      background: rgba(20, 24, 30, 0.34) !important;
      border-color: rgba(255,255,255,0.12) !important;
    }

    #custom .process-head {
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      gap: 12px !important;
      padding: 0 4px 16px !important;
      color: var(--muted-2) !important;
      font-size: 10px !important;
      font-weight: 900 !important;
      letter-spacing: 0.14em !important;
    }

    #custom .process-head b {
      color: var(--ink) !important;
      font-size: 10px !important;
      letter-spacing: 0.12em !important;
    }

    #custom .custom-process .steps {
      display: grid !important;
      gap: 14px !important;
      padding-top: 0 !important;
      margin-top: 0 !important;
    }

    #custom .custom-process .step {
      min-height: 74px !important;
      border-radius: 22px !important;
      padding: 16px 18px !important;
      background: rgba(255, 255, 255, 0.38) !important;
      border: 1px solid rgba(255, 255, 255, 0.42) !important;
      box-shadow: 0 12px 34px rgba(20, 24, 30, 0.045) !important;
    }

    body.dark #custom .custom-process .step {
      background: rgba(30, 35, 43, 0.50) !important;
      border-color: rgba(255,255,255,0.12) !important;
    }

    #custom .custom-process .step b {
      width: 40px !important;
      height: 40px !important;
      border-radius: 14px !important;
      flex: 0 0 40px !important;
    }

    #custom .custom-process .step span {
      line-height: 1.6 !important;
      font-weight: 800 !important;
    }

    @media (max-width: 920px) {
      #custom .custom-band {
        grid-template-columns: 1fr !important;
        padding: 38px !important;
      }

      #custom .custom-process {
        margin-top: 28px !important;
      }
    }

    @media (max-width: 620px) {
      #custom .custom-band {
        padding: 30px !important;
      }

      #custom .custom-process {
        padding: 16px !important;
      }

      #custom .custom-process .step {
        min-height: 66px !important;
      }
    }

  

    /* ===== CONTACT inline form ===== */
    .contact-form-panel {
      display: grid !important;
      grid-template-columns: 0.82fr 1.18fr !important;
      align-items: start !important;
      gap: 42px !important;
      padding: 56px !important;
    }

    .contact-form-panel::before {
      width: 340px !important;
      height: 340px !important;
      right: -110px !important;
      top: -120px !important;
    }

    .contact-copy {
      position: relative !important;
      z-index: 2 !important;
    }

    .contact-note {
      margin-top: 34px !important;
      border-radius: 22px !important;
      padding: 18px 20px !important;
      background: rgba(255,255,255,0.32) !important;
      border: 1px solid rgba(255,255,255,0.38) !important;
      backdrop-filter: blur(14px) !important;
    }

    body.dark .contact-note {
      background: rgba(20,24,30,0.34) !important;
      border-color: rgba(255,255,255,0.12) !important;
    }

    .contact-note span {
      display: block !important;
      color: var(--muted-2) !important;
      font-size: 10px !important;
      font-weight: 900 !important;
      letter-spacing: 0.14em !important;
      margin-bottom: 6px !important;
    }

    .contact-note b {
      color: var(--muted) !important;
      font-size: 13px !important;
      font-weight: 800 !important;
    }

    .contact-form {
      position: relative !important;
      z-index: 2 !important;
      display: grid !important;
      gap: 16px !important;
      padding: 24px !important;
      border-radius: 30px !important;
      background: rgba(255,255,255,0.34) !important;
      border: 1px solid rgba(255,255,255,0.42) !important;
      box-shadow: var(--shadow-soft) !important;
      backdrop-filter: blur(18px) !important;
    }

    body.dark .contact-form {
      background: rgba(20,24,30,0.38) !important;
      border-color: rgba(255,255,255,0.12) !important;
    }

    .form-grid {
      display: grid !important;
      grid-template-columns: 1fr 1fr !important;
      gap: 16px !important;
    }

    .form-field {
      display: grid !important;
      gap: 8px !important;
    }

    .hp-field {
      position: absolute !important;
      left: -9999px !important;
      width: 1px !important;
      height: 1px !important;
      opacity: 0 !important;
      pointer-events: none !important;
    }

    .form-field span {
      color: var(--muted-2) !important;
      font-size: 11px !important;
      font-weight: 900 !important;
      letter-spacing: 0.10em !important;
    }

    .form-field input,
    .form-field select,
    .form-field textarea {
      width: 100% !important;
      border: 1px solid rgba(23,25,28,0.10) !important;
      border-radius: 18px !important;
      background: rgba(255,255,255,0.62) !important;
      color: var(--ink) !important;
      font: inherit !important;
      font-size: 14px !important;
      outline: none !important;
      transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease !important;
    }

    .form-field input,
    .form-field select {
      height: 52px !important;
      padding: 0 16px !important;
    }

    .form-field textarea {
      resize: vertical !important;
      min-height: 142px !important;
      padding: 16px !important;
      line-height: 1.8 !important;
    }

    body.dark .form-field input,
    body.dark .form-field select,
    body.dark .form-field textarea {
      background: rgba(30,35,43,0.68) !important;
      border-color: rgba(255,255,255,0.12) !important;
      color: var(--ink) !important;
    }

    .form-field input:focus,
    .form-field select:focus,
    .form-field textarea:focus {
      border-color: rgba(121,129,139,0.55) !important;
      box-shadow: 0 0 0 4px rgba(121,129,139,0.10) !important;
    }

    .form-field input::placeholder,
    .form-field textarea::placeholder {
      color: var(--muted-2) !important;
    }

    .form-submit {
      justify-self: start !important;
      border: none !important;
      cursor: pointer !important;
      margin-top: 4px !important;
    }

    @media (max-width: 920px) {
      .contact-form-panel {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
        padding: 38px !important;
      }
    }

    @media (max-width: 620px) {
      .contact-form-panel {
        padding: 30px !important;
      }

      .form-grid {
        grid-template-columns: 1fr !important;
      }

      .contact-form {
        padding: 18px !important;
      }
    }

  

    /* Remove floating system status box */
    .status-mini {
      display: none !important;
    }

  

    /* ===== Premium Technology Map v3 ===== */
    .tech-map-premium {
      min-height: 600px !important;
      position: relative !important;
      overflow: hidden !important;
      isolation: isolate !important;
    }

    .tech-map-premium::before {
      content: "" !important;
      position: absolute !important;
      inset: 28px !important;
      border-radius: 30px !important;
      background:
        radial-gradient(circle at 50% 46%, rgba(255,255,255,0.20), transparent 25%),
        radial-gradient(circle at 28% 26%, rgba(255,255,255,0.10), transparent 20%),
        linear-gradient(90deg, var(--grid-color) 1px, transparent 1px),
        linear-gradient(var(--grid-color) 1px, transparent 1px) !important;
      background-size: auto, auto, 44px 44px, 44px 44px !important;
      border: 1px solid var(--line) !important;
      animation: gridDrift 18s linear infinite !important;
      z-index: 0 !important;
    }

    .tech-map-premium .tech-grid-inner {
      display: none !important;
    }

    .premium-core {
      position: absolute !important;
      left: 50% !important;
      top: 50% !important;
      width: 168px !important;
      height: 168px !important;
      transform: translate(-50%, -50%) !important;
      border-radius: 48px !important;
      display: flex !important;
      flex-direction: column !important;
      justify-content: center !important;
      align-items: center !important;
      text-align: center !important;
      z-index: 8 !important;
      background:
        linear-gradient(145deg, rgba(255,255,255,0.60), rgba(255,255,255,0.20)),
        var(--panel-strong) !important;
      border: 1px solid rgba(255,255,255,0.55) !important;
      box-shadow:
        var(--shadow-soft),
        0 0 0 18px rgba(121,129,139,0.07),
        0 0 100px rgba(121,129,139,0.18) !important;
      animation: premiumCore 5s ease-in-out infinite alternate !important;
    }

    body.dark .premium-core {
      background:
        linear-gradient(145deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02)),
        var(--panel-strong) !important;
      border-color: rgba(255,255,255,0.14) !important;
      box-shadow:
        var(--shadow-soft),
        0 0 0 18px rgba(180,198,226,0.045),
        0 0 110px rgba(180,198,226,0.13) !important;
    }

    .premium-core strong {
      position: relative !important;
      z-index: 3 !important;
      font-size: 20px !important;
      letter-spacing: 0.12em !important;
      line-height: 1 !important;
    }

    .premium-core span {
      position: relative !important;
      z-index: 3 !important;
      margin-top: 12px !important;
      color: var(--muted) !important;
      font-size: 10px !important;
      font-weight: 900 !important;
      letter-spacing: 0.16em !important;
    }

    .core-halo {
      position: absolute !important;
      border-radius: 50% !important;
      border: 1px solid var(--line) !important;
      pointer-events: none !important;
    }

    .halo-one {
      width: 270px !important;
      height: 270px !important;
      animation: orbitSpin 26s linear infinite !important;
    }

    .halo-two {
      width: 390px !important;
      height: 390px !important;
      animation: orbitSpin 38s linear infinite reverse !important;
    }

    @keyframes premiumCore {
      from { transform: translate(-50%, -50%) scale(0.98); }
      to { transform: translate(-50%, -50%) scale(1.035); }
    }

    .premium-node {
      position: absolute !important;
      z-index: 9 !important;
      width: 138px !important;
      height: 88px !important;
      border-radius: 28px !important;
      display: flex !important;
      flex-direction: column !important;
      justify-content: center !important;
      align-items: center !important;
      text-align: center !important;
      background:
        linear-gradient(145deg, rgba(255,255,255,0.42), rgba(255,255,255,0.14)),
        var(--panel-strong) !important;
      border: 1px solid rgba(255,255,255,0.45) !important;
      box-shadow: var(--shadow-soft) !important;
      animation: premiumNodeFloat 5.5s ease-in-out infinite alternate !important;
    }

    body.dark .premium-node {
      background:
        linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)),
        var(--panel-strong) !important;
      border-color: rgba(255,255,255,0.12) !important;
    }

    .premium-node b {
      font-size: 16px !important;
      letter-spacing: 0.08em !important;
      line-height: 1 !important;
    }

    .premium-node span {
      margin-top: 10px !important;
      color: var(--muted) !important;
      font-size: 9px !important;
      font-weight: 900 !important;
      letter-spacing: 0.14em !important;
    }

    .node-design {
      top: 72px !important;
      left: 50% !important;
      transform: translateX(-50%) !important;
      animation-delay: -0.3s !important;
    }

    .node-ai {
      top: 176px !important;
      left: 68px !important;
      animation-delay: -1.1s !important;
    }

    .node-data {
      top: 176px !important;
      right: 68px !important;
      animation-delay: -2s !important;
    }

    .node-pod {
      bottom: 92px !important;
      left: 124px !important;
      animation-delay: -2.8s !important;
    }

    .node-ec {
      bottom: 92px !important;
      right: 124px !important;
      animation-delay: -3.6s !important;
    }

    @keyframes premiumNodeFloat {
      from { margin-top: 0; }
      to { margin-top: -10px; }
    }

    .premium-link {
      position: absolute !important;
      z-index: 3 !important;
      left: 50% !important;
      top: 50% !important;
      height: 1px !important;
      transform-origin: left center !important;
      background: linear-gradient(90deg, transparent, rgba(121,129,139,0.58), transparent) !important;
      opacity: 0.62 !important;
      animation: premiumLinkPulse 4s ease-in-out infinite !important;
    }

    body.dark .premium-link {
      background: linear-gradient(90deg, transparent, rgba(197,204,213,0.34), transparent) !important;
    }

    .premium-link::after {
      content: "" !important;
      position: absolute !important;
      top: -3px !important;
      left: 10% !important;
      width: 7px !important;
      height: 7px !important;
      border-radius: 50% !important;
      background: var(--accent) !important;
      box-shadow: 0 0 18px rgba(121,129,139,0.7) !important;
      animation: premiumSignal 3s linear infinite !important;
    }

    .link-design {
      width: 165px !important;
      transform: rotate(270deg) !important;
    }

    .link-ai {
      width: 238px !important;
      transform: rotate(205deg) !important;
      animation-delay: -0.6s !important;
    }

    .link-data {
      width: 238px !important;
      transform: rotate(335deg) !important;
      animation-delay: -1.2s !important;
    }

    .link-pod {
      width: 228px !important;
      transform: rotate(138deg) !important;
      animation-delay: -1.8s !important;
    }

    .link-ec {
      width: 228px !important;
      transform: rotate(42deg) !important;
      animation-delay: -2.4s !important;
    }

    @keyframes premiumLinkPulse {
      0%, 100% { opacity: 0.22; }
      50% { opacity: 0.78; }
    }

    @keyframes premiumSignal {
      from { left: 8%; opacity: 0; }
      20% { opacity: 1; }
      80% { opacity: 1; }
      to { left: 88%; opacity: 0; }
    }

    .premium-ring {
      position: absolute !important;
      left: 50% !important;
      top: 50% !important;
      border-radius: 50% !important;
      border: 1px solid var(--line) !important;
      transform: translate(-50%, -50%) !important;
      pointer-events: none !important;
      z-index: 1 !important;
    }

    .ring-a {
      width: 310px !important;
      height: 310px !important;
      animation: ringPulse 5.8s ease-in-out infinite alternate !important;
    }

    .ring-b {
      width: 450px !important;
      height: 450px !important;
      animation: ringPulse 7.8s ease-in-out infinite alternate-reverse !important;
    }

    .ring-c {
      width: 560px !important;
      height: 560px !important;
      opacity: 0.5 !important;
      animation: orbitSpin 40s linear infinite !important;
    }

    @keyframes ringPulse {
      from { opacity: 0.22; }
      to { opacity: 0.62; }
    }

    .premium-label {
      position: absolute !important;
      z-index: 4 !important;
      color: var(--muted-2) !important;
      font-size: 9px !important;
      font-weight: 900 !important;
      letter-spacing: 0.16em !important;
      opacity: 0.48 !important;
      white-space: nowrap !important;
    }

    .label-design {
      top: 152px !important;
      left: 50% !important;
      transform: translateX(-50%) !important;
    }

    .label-ai {
      top: 300px !important;
      left: 58px !important;
    }

    .label-data {
      top: 300px !important;
      right: 58px !important;
    }

    .label-pod {
      bottom: 58px !important;
      left: 94px !important;
    }

    .label-ec {
      bottom: 58px !important;
      right: 104px !important;
    }

    .premium-corner {
      position: absolute !important;
      z-index: 6 !important;
      display: flex !important;
      gap: 10px !important;
      align-items: center !important;
      padding: 9px 12px !important;
      border-radius: 999px !important;
      background: rgba(255,255,255,0.22) !important;
      border: 1px solid rgba(255,255,255,0.28) !important;
      backdrop-filter: blur(12px) !important;
      color: var(--muted-2) !important;
      font-size: 9px !important;
      font-weight: 900 !important;
      letter-spacing: 0.12em !important;
    }

    body.dark .premium-corner {
      background: rgba(20,24,30,0.34) !important;
      border-color: rgba(255,255,255,0.10) !important;
    }

    .premium-corner b {
      color: var(--ink) !important;
      font-size: 9px !important;
    }

    .corner-left {
      left: 52px !important;
      bottom: 34px !important;
    }

    .corner-right {
      right: 52px !important;
      top: 34px !important;
    }

    /* hide older map parts if any remain */
    .tech-map-premium .map-core,
    .tech-map-premium .map-node,
    .tech-map-premium .connector,
    .tech-map-premium .map-label,
    .tech-map-premium .tech-orbit,
    .tech-map-premium .status-mini {
      display: none !important;
    }

    @media (max-width: 920px) {
      .tech-map-premium {
        min-height: 560px !important;
      }

      .node-ai { left: 48px !important; }
      .node-data { right: 48px !important; }
      .node-pod { left: 82px !important; }
      .node-ec { right: 82px !important; }

      .ring-c {
        width: 500px !important;
        height: 500px !important;
      }
    }

    @media (max-width: 620px) {
      .tech-map-premium {
        min-height: 460px !important;
      }

      .premium-core {
        width: 128px !important;
        height: 128px !important;
        border-radius: 36px !important;
      }

      .premium-core strong {
        font-size: 15px !important;
      }

      .premium-core span {
        font-size: 8px !important;
      }

      .premium-node {
        width: 96px !important;
        height: 68px !important;
        border-radius: 20px !important;
      }

      .premium-node b {
        font-size: 12px !important;
      }

      .premium-node span {
        font-size: 7px !important;
      }

      .node-design {
        top: 54px !important;
      }

      .node-ai {
        top: 144px !important;
        left: 28px !important;
      }

      .node-data {
        top: 144px !important;
        right: 28px !important;
      }

      .node-pod {
        bottom: 58px !important;
        left: 42px !important;
      }

      .node-ec {
        bottom: 58px !important;
        right: 42px !important;
      }

      .premium-label,
      .premium-corner {
        display: none !important;
      }

      .ring-a { width: 240px !important; height: 240px !important; }
      .ring-b { width: 340px !important; height: 340px !important; }
      .ring-c { display: none !important; }

      .link-design { width: 130px !important; }
      .link-ai,
      .link-data,
      .link-pod,
      .link-ec { width: 160px !important; }
    }

  

    /* ===== Hero bottom spacing fix ===== */
    .hero {
      min-height: auto !important;
      padding-top: 150px !important;
      padding-bottom: 88px !important;
    }

    #about {
      padding-top: 88px !important;
    }

    @media (max-width: 920px) {
      .hero {
        padding-top: 130px !important;
        padding-bottom: 78px !important;
      }

      #about {
        padding-top: 78px !important;
      }
    }

    @media (max-width: 620px) {
      .hero {
        padding-top: 120px !important;
        padding-bottom: 64px !important;
      }

      #about {
        padding-top: 64px !important;
      }
    }


/* ===== Static subpage template ===== */
.subpage-main {
  padding-top: 132px;
}

.subpage-hero {
  min-height: auto !important;
  padding-top: 92px !important;
  padding-bottom: 72px !important;
}

.subpage-hero-inner {
  border-radius: 42px;
  padding: 58px;
  position: relative;
  overflow: hidden;
}

.subpage-hero-inner::before {
  content: "";
  position: absolute;
  width: 320px;
  height: 320px;
  right: -100px;
  top: -120px;
  border-radius: 50%;
  background: rgba(185,192,200,0.22);
  animation: breathe 5s ease-in-out infinite alternate;
}

.subpage-hero-inner > * {
  position: relative;
  z-index: 2;
}

.subpage-title {
  font-size: clamp(42px, 6vw, 78px);
  line-height: 1.08;
  letter-spacing: -0.06em;
  font-weight: 900;
  margin-top: 12px;
}

.subpage-lead {
  max-width: 720px;
  color: var(--muted);
  font-size: 15px;
  line-height: 2.1;
  margin-top: 24px;
}

.subpage-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 28px;
  align-items: start;
}

.subpage-side {
  position: sticky;
  top: 28px;
  border-radius: 30px;
  padding: 26px;
}

.subpage-side h3 {
  color: var(--accent);
  font-size: 12px;
  letter-spacing: 0.16em;
  margin-bottom: 18px;
}

.subpage-side a {
  display: block;
  color: var(--muted);
  font-size: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.subpage-side a:last-child {
  border-bottom: none;
}

.content-stack {
  display: grid;
  gap: 22px;
}

.content-card {
  border-radius: 34px;
  padding: 42px;
  position: relative;
  overflow: hidden;
}

.content-card::after {
  content: "";
  position: absolute;
  right: -70px;
  bottom: -70px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(185,192,200,0.16);
  pointer-events: none;
}

.content-card h2 {
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.22;
  letter-spacing: -0.05em;
  margin-bottom: 18px;
}

.content-card h3 {
  font-size: 22px;
  margin-bottom: 14px;
}

.content-card p {
  color: var(--muted);
  font-size: 15px;
  line-height: 2.05;
  margin-bottom: 14px;
}

.placeholder-note {
  margin-top: 18px;
  border-radius: 22px;
  padding: 18px 20px;
  background: rgba(255,255,255,0.28);
  border: 1px dashed rgba(121,129,139,0.32);
  color: var(--muted-2);
  font-size: 13px;
  line-height: 1.9;
}

body.dark .placeholder-note {
  background: rgba(20,24,30,0.28);
  border-color: rgba(255,255,255,0.14);
}

.value-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.value-item {
  border-radius: 24px;
  padding: 24px;
  background: var(--panel);
  border: 1px solid rgba(255,255,255,0.36);
}

body.dark .value-item {
  border-color: rgba(255,255,255,0.10);
}

.value-item span {
  display: block;
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.14em;
  margin-bottom: 18px;
}

.value-item h3 {
  font-size: 20px;
  margin-bottom: 8px;
}

.value-item p {
  font-size: 13px;
  margin-bottom: 0;
}

@media (max-width: 920px) {
  .subpage-main {
    padding-top: 110px;
  }

  .subpage-layout {
    grid-template-columns: 1fr;
  }

  .subpage-side {
    position: static;
  }

  .subpage-hero-inner {
    padding: 42px;
  }
}

@media (max-width: 620px) {
  .subpage-main {
    padding-top: 96px;
  }

  .subpage-hero-inner,
  .content-card {
    padding: 30px;
  }

  .value-grid {
    grid-template-columns: 1fr;
  }
}


/* ===== About page: remove side contents and center content ===== */
.subpage-layout-single {
  display: block !important;
  max-width: 920px;
  margin: 0 auto;
}

.subpage-layout-single .content-stack {
  width: 100%;
}

.subpage-layout-single .content-card {
  width: 100%;
}


/* ===== Text content pages from uploaded txt ===== */
.text-page-stack {
  display: grid;
  gap: 22px;
  max-width: 980px;
  margin: 0 auto;
}

.text-page-card {
  border-radius: 34px;
  padding: 42px;
  position: relative;
  overflow: hidden;
}

.text-page-card::after {
  content: "";
  position: absolute;
  right: -70px;
  bottom: -70px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(185,192,200,0.14);
  pointer-events: none;
}

.text-page-card h2 {
  position: relative;
  z-index: 2;
  font-size: clamp(26px, 3.1vw, 40px);
  line-height: 1.3;
  letter-spacing: -0.04em;
  margin-bottom: 22px;
}

.text-page-card h3 {
  position: relative;
  z-index: 2;
  font-size: 22px;
  line-height: 1.45;
  margin: 28px 0 14px;
}

.text-page-card p,
.text-page-card li {
  position: relative;
  z-index: 2;
  color: var(--muted);
  font-size: 15px;
  line-height: 2.05;
}

.text-page-card p {
  margin-bottom: 14px;
}

.text-page-card ul {
  position: relative;
  z-index: 2;
  list-style: none;
  display: grid;
  gap: 8px;
  margin: 12px 0 18px;
  padding: 0;
}

.text-page-card li {
  padding-left: 1.4em;
  position: relative;
}

.text-page-card li::before {
  content: "・";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 900;
}

.legal-meta {
  color: var(--muted-2);
  font-size: 13px;
  letter-spacing: 0.08em;
  margin-top: 28px;
}

.info-table {
  position: relative;
  z-index: 2;
  display: grid;
  border: 1px solid var(--line);
  border-radius: 24px;
  overflow: hidden;
  margin: 18px 0;
}

.info-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  border-bottom: 1px solid var(--line);
}

.info-row:last-child {
  border-bottom: none;
}

.info-row b,
.info-row span {
  padding: 16px 18px;
  font-size: 14px;
  line-height: 1.8;
}

.info-row b {
  background: rgba(255,255,255,0.28);
  color: var(--ink);
}

.info-row span {
  color: var(--muted);
}

body.dark .info-row b {
  background: rgba(255,255,255,0.05);
}

@media (max-width: 620px) {
  .text-page-card {
    padding: 30px;
  }

  .info-row {
    grid-template-columns: 1fr;
  }

  .info-row b {
    padding-bottom: 6px;
  }

  .info-row span {
    padding-top: 6px;
  }
}


/* ===== Simple single-card subpages ===== */
.simple-page-main {
  padding-top: 128px;
}

.simple-page {
  min-height: auto !important;
  padding-top: 64px !important;
  padding-bottom: 112px !important;
}

.simple-page-card {
  border-radius: 42px;
  padding: 64px 72px;
  position: relative;
  overflow: hidden;
  max-width: 1120px;
  margin: 0 auto;
}

.simple-page-card::before {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  right: -120px;
  top: -130px;
  border-radius: 50%;
  background: rgba(185,192,200,0.22);
  animation: breathe 5s ease-in-out infinite alternate;
  pointer-events: none;
}

.simple-page-card > * {
  position: relative;
  z-index: 2;
}

.simple-page-title {
  font-size: clamp(34px, 4.8vw, 62px);
  line-height: 1.08;
  letter-spacing: -0.07em;
  font-weight: 900;
  margin: 18px 0 34px;
}

.simple-page-text {
  max-width: 850px;
  color: var(--muted);
  font-size: 16px;
  line-height: 2.25;
  letter-spacing: 0.02em;
}

.simple-page-text p {
  margin-bottom: 26px;
}

.simple-page-text p:last-child {
  margin-bottom: 0;
}

.simple-page-text h2 {
  color: var(--ink);
  font-size: 26px;
  line-height: 1.45;
  letter-spacing: -0.04em;
  margin: 40px 0 16px;
}

.simple-page-text h2:first-child {
  margin-top: 0;
}

.simple-page-text ul {
  list-style: none;
  display: grid;
  gap: 8px;
  margin: 14px 0 26px;
  padding: 0;
}

.simple-page-text li {
  position: relative;
  padding-left: 1.4em;
}

.simple-page-text li::before {
  content: "・";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 900;
}

.simple-page-text .info-line {
  display: block;
}

@media (max-width: 920px) {
  .simple-page-main {
    padding-top: 108px;
  }

  .simple-page-card {
    padding: 48px;
  }
}

@media (max-width: 620px) {
  .simple-page-main {
    padding-top: 92px;
  }

  .simple-page {
    padding-top: 44px !important;
    padding-bottom: 72px !important;
  }

  .simple-page-card {
    padding: 34px 28px;
    border-radius: 34px;
  }

  .simple-page-title {
    font-size: clamp(28px, 9vw, 42px);
  }

  .simple-page-text {
    font-size: 14px;
    line-height: 2.05;
  }
}


/* ===== Site logo image replacement ===== */
.site-logo-img {
  height: 42px;
  width: auto;
  display: block;
  object-fit: contain;
}

.logo {
  min-width: 0;
}

.logo .site-logo-img {
  flex: 0 0 auto;
}

@media (max-width: 620px) {
  .site-logo-img {
    height: 34px;
  }
}
.logo-dark {
  display: none;
}

body.dark .logo-light {
  display: none;
}

body.dark .logo-dark {
  display: block;
}


/* ===== Footer logo image ===== */
.footer-logo-image {
  margin-bottom: 18px;
  line-height: 1;
}

.footer-logo-img {
  height: 130px;
  width: auto;
  display: block;
  object-fit: contain;
}

.footer-logo-dark {
  display: none;
}

body.dark .footer-logo-light {
  display: none;
}

body.dark .footer-logo-dark {
  display: block;
}

@media (max-width: 620px) {
  .footer-logo-img {
    height: 40px;
  }
}
/* Footer logo area center */
.footer-grid > div:first-child {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.footer-logo-image {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-bottom: 24px;
}

.footer-desc {
  text-align: center;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}

.contact-complete {
  padding: 36px;
  border-radius: 28px;
  background: rgba(255,255,255,0.36);
  border: 1px solid rgba(255,255,255,0.42);
  color: var(--ink);
}

body.dark .contact-complete {
  background: rgba(20,24,30,0.38);
  border-color: rgba(255,255,255,0.12);
}

.contact-complete h3 {
  font-size: 26px;
  margin: 0 0 14px;
  letter-spacing: -0.04em;
}

.contact-complete p {
  color: var(--muted);
  line-height: 2;
}
.nav-links a {
  position: relative;
}
.nav-links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 92px;
  height: 24px;
  overflow: hidden;
}

.nav-links a .nav-en,
.nav-links a .nav-ja {
  display: block;
  transition: transform 0.24s ease, opacity 0.24s ease;
  white-space: nowrap;
}

.nav-links a .nav-ja {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, 70%);
  opacity: 0;
  font-size: 12px;
  letter-spacing: 0.04em;
}

.nav-links a:hover .nav-en {
  transform: translateY(-70%);
  opacity: 0;
}

.nav-links a:hover .nav-ja {
  transform: translate(-50%, -50%);
  opacity: 1;
}
/* ===== Coming Soon Page ===== */
.coming-main {
  padding-top: 128px;
}

.coming-section {
  min-height: auto !important;
  padding-top: 64px !important;
  padding-bottom: 96px !important;
}

.coming-card {
  position: relative;
  overflow: hidden;
  border-radius: 42px;
  padding: clamp(34px, 6vw, 72px);
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
  min-height: 620px;
}

.coming-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    transparent 0%,
    rgba(255, 255, 255, 0.18) 42%,
    transparent 58%
  );
  transform: translateX(-120%);
  animation: comingScanLight 5.2s ease-in-out infinite;
  pointer-events: none;
}

body.dark .coming-card::before {
  background: linear-gradient(
    110deg,
    transparent 0%,
    rgba(255, 255, 255, 0.08) 42%,
    transparent 58%
  );
}

.coming-card::after {
  content: "DEVELOPING";
  position: absolute;
  right: -30px;
  bottom: -54px;
  font-size: clamp(70px, 12vw, 176px);
  font-weight: 900;
  letter-spacing: -0.08em;
  color: rgba(121, 129, 139, 0.08);
  pointer-events: none;
  z-index: 1;
}

body.dark .coming-card::after {
  color: rgba(255, 255, 255, 0.045);
}

@keyframes comingScanLight {
  0%, 45% {
    transform: translateX(-120%);
  }

  70%, 100% {
    transform: translateX(120%);
  }
}

.coming-content {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: clamp(40px, 7vw, 80px);
  align-items: center;
}

.coming-title {
  margin: 0;
  font-size: clamp(42px, 6.8vw, 82px);
  line-height: 1.08;
  letter-spacing: -0.07em;
  font-weight: 900;
  color: var(--ink);
}

.coming-title span {
  display: block;
  color: var(--muted);
}

.coming-lead {
  max-width: 680px;
  margin: 30px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 2.15;
  letter-spacing: 0.03em;
}

.coming-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 38px;
}

.coming-visual {
  position: relative;
  width: min(420px, 100%);
  aspect-ratio: 1 / 1;
  margin-left: auto;
  border-radius: 38px;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at center, rgba(255,255,255,0.46), transparent 34%),
    rgba(255,255,255,0.22);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.12),
    var(--shadow-soft);
  overflow: hidden;
  backdrop-filter: blur(14px);
}

body.dark .coming-visual {
  background:
    radial-gradient(circle at center, rgba(255,255,255,0.08), transparent 34%),
    rgba(255,255,255,0.035);
}

.coming-grid {
  position: absolute;
  inset: 24px;
  border-radius: 28px;
  background:
    linear-gradient(90deg, var(--grid-color) 1px, transparent 1px),
    linear-gradient(var(--grid-color) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(circle at center, #000 0%, transparent 74%);
  opacity: 0.85;
}

.gear-wrap {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.gear {
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(121, 129, 139, 0.28);
  box-shadow:
    0 0 42px rgba(121, 129, 139, 0.13),
    inset 0 0 32px rgba(255,255,255,0.14);
}

body.dark .gear {
  border-color: rgba(255,255,255,0.22);
  box-shadow:
    0 0 42px rgba(255,255,255,0.08),
    inset 0 0 32px rgba(255,255,255,0.05);
}

.gear::before,
.gear::after {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 10px dashed rgba(121, 129, 139, 0.38);
}

body.dark .gear::before,
body.dark .gear::after {
  border-color: rgba(255,255,255,0.24);
}

.gear::after {
  inset: 34%;
  border: 2px solid rgba(121, 129, 139, 0.42);
  background: rgba(255,255,255,0.16);
}

body.dark .gear::after {
  border-color: rgba(255,255,255,0.34);
  background: rgba(255,255,255,0.06);
}

.gear-main {
  width: 178px;
  height: 178px;
  animation: comingRotate 12s linear infinite;
}

.gear-sub {
  width: 92px;
  height: 92px;
  right: 70px;
  top: 92px;
  animation: comingRotateReverse 8s linear infinite;
  opacity: 0.8;
}

.gear-small {
  width: 68px;
  height: 68px;
  left: 74px;
  bottom: 86px;
  animation: comingRotate 6.4s linear infinite;
  opacity: 0.7;
}

@keyframes comingRotate {
  to {
    transform: rotate(360deg);
  }
}

@keyframes comingRotateReverse {
  to {
    transform: rotate(-360deg);
  }
}

.code-window {
  position: absolute;
  left: 34px;
  right: 34px;
  bottom: 34px;
  height: 138px;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.42);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(16px);
}

body.dark .code-window {
  background: rgba(6, 8, 12, 0.72);
}

.code-head {
  height: 34px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
}

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted-2);
}

.dot:nth-child(1) {
  background: var(--accent);
}

.dot:nth-child(2) {
  background: var(--muted);
}

.dot:nth-child(3) {
  background: var(--ink);
}

.code-lines {
  padding: 14px 16px;
  display: grid;
  gap: 8px;
  animation: comingCodeScroll 4.8s linear infinite;
}

.code-line {
  height: 8px;
  border-radius: 999px;
  background: rgba(121, 129, 139, 0.18);
  overflow: hidden;
  position: relative;
}

body.dark .code-line {
  background: rgba(255,255,255,0.14);
}

.code-line::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 42%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.88),
    transparent
  );
  animation: comingLinePulse 1.8s ease-in-out infinite;
}

body.dark .code-line::after {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(197, 204, 213, 0.8),
    transparent
  );
}

.code-line:nth-child(1) { width: 78%; }
.code-line:nth-child(2) { width: 55%; }
.code-line:nth-child(3) { width: 88%; }
.code-line:nth-child(4) { width: 66%; }
.code-line:nth-child(5) { width: 72%; }
.code-line:nth-child(6) { width: 46%; }
.code-line:nth-child(7) { width: 82%; }
.code-line:nth-child(8) { width: 58%; }

@keyframes comingCodeScroll {
  0%, 18% {
    transform: translateY(0);
  }

  52%, 100% {
    transform: translateY(-32px);
  }
}

@keyframes comingLinePulse {
  0% {
    transform: translateX(-120%);
  }

  100% {
    transform: translateX(260%);
  }
}

.status-card {
  position: absolute;
  top: 34px;
  left: 34px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.36);
  backdrop-filter: blur(14px);
}

body.dark .status-card {
  background: rgba(255,255,255,0.06);
}

.status-card span {
  display: block;
  color: var(--muted-2);
  font-size: 10px;
  letter-spacing: 0.16em;
  font-weight: 900;
  margin-bottom: 6px;
}

.status-card b {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: 12px;
  letter-spacing: 0.08em;
}

.status-card b::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 18px rgba(121, 129, 139, 0.48);
  animation: comingBlink 1.2s ease-in-out infinite alternate;
}

body.dark .status-card b::before {
  background: #f1f3f5;
  box-shadow: 0 0 18px rgba(241, 243, 245, 0.42);
}

@keyframes comingBlink {
  from {
    opacity: 0.35;
    transform: scale(0.84);
  }

  to {
    opacity: 1;
    transform: scale(1.12);
  }
}

.floating-chip {
  position: absolute;
  right: 26px;
  top: 230px;
  transform: rotate(-6deg);
  padding: 15px 18px;
  border-radius: 22px;
  background: var(--panel-strong);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  animation: comingFloatChip 3.4s ease-in-out infinite alternate;
}

.floating-chip span {
  display: block;
  color: var(--muted-2);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.14em;
  margin-bottom: 4px;
}

.floating-chip b {
  display: block;
  font-size: 18px;
  letter-spacing: -0.04em;
}

@keyframes comingFloatChip {
  from {
    transform: translateY(0) rotate(-6deg);
  }

  to {
    transform: translateY(-12px) rotate(-2deg);
  }
}

@media (max-width: 920px) {
  .coming-content {
    grid-template-columns: 1fr;
  }

  .coming-visual {
    margin: 0;
  }
}

@media (max-width: 620px) {
  .coming-main {
    padding-top: 100px;
  }

  .coming-section {
    padding-top: 44px !important;
    padding-bottom: 72px !important;
  }

  .coming-card {
    width: min(100% - 28px, 1120px);
    border-radius: 34px;
    padding: 30px;
  }

  .coming-actions {
    flex-direction: column;
  }

  .coming-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .coming-visual {
    aspect-ratio: 1 / 1.15;
  }

  .gear-main {
    width: 142px;
    height: 142px;
  }

  .gear-sub {
    right: 42px;
    top: 74px;
  }

  .code-window {
    left: 20px;
    right: 20px;
    bottom: 20px;
  }

  .floating-chip {
    right: 18px;
    top: 210px;
  }
}
.form-field span em {
  margin-left: 4px;
  color: #d84b4b;
  font-size: 14px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
}

body.dark .form-field span em {
  color: #ff8a8a;
}


/* ===== HERO CARD POSITION FIX ONLY ===== */
/* 只修复首页首屏右侧原版方块位置，不影响其他模块 */
.hero-visual {
  position: relative !important;
  min-height: 560px !important;
  perspective: 1000px !important;
  display: block !important;
  overflow: visible !important;
}

.hero-visual .visual-card {
  position: absolute !important;
  display: block !important;
}

.hero-visual .visual-card.large {
  width: 78% !important;
  height: 72% !important;
  right: 3% !important;
  top: 9% !important;
  left: auto !important;
  bottom: auto !important;
  padding: 26px !important;
  transform: rotateY(-10deg) rotateX(8deg) rotateZ(-2deg) !important;
}

.hero-visual .visual-card.small {
  width: 48% !important;
  height: 30% !important;
  left: 0 !important;
  bottom: 10% !important;
  right: auto !important;
  top: auto !important;
  padding: 22px !important;
  transform: rotateY(12deg) rotateX(5deg) rotateZ(4deg) !important;
}

.hero-visual .visual-card.tiny {
  width: 34% !important;
  height: 18% !important;
  right: 0 !important;
  bottom: 3% !important;
  left: auto !important;
  top: auto !important;
  padding: 18px !important;
  transform: rotateY(-8deg) rotateX(4deg) rotateZ(-6deg) !important;
}

/* 防止之前新方案元素残留影响显示 */
.hero-system-visual,
.system-grid,
.system-orbit,
.system-core,
.system-node,
.flow-card,
.live-card,
.signal-dot {
  display: none !important;
}

@media (max-width: 980px) {
  .hero-visual {
    min-height: 520px !important;
  }

  .hero-visual .visual-card.large {
    width: 82% !important;
    right: 8% !important;
  }

  .hero-visual .visual-card.small {
    left: 6% !important;
  }

  .hero-visual .visual-card.tiny {
    right: 6% !important;
  }
}

@media (max-width: 640px) {
  .hero-visual {
    min-height: 460px !important;
  }

  .hero-visual .visual-card.large {
    width: 88% !important;
    height: 70% !important;
    right: 6% !important;
    top: 8% !important;
  }

  .hero-visual .visual-card.small {
    width: 56% !important;
    height: 28% !important;
    left: 4% !important;
    bottom: 10% !important;
  }

  .hero-visual .visual-card.tiny {
    width: 42% !important;
    right: 3% !important;
    bottom: 3% !important;
  }
}