@font-face { font-family: "Hub Serif"; src: url("./assets/title-serif.ttf") format("truetype"); font-style: normal; font-weight: 500; font-display: swap; }

:root {
  color-scheme: light;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  color: #071a2b;
  background: #f7faff;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; display: grid; grid-template-rows: auto minmax(280px, 1fr) auto; overflow-x: clip; }
a { -webkit-tap-highlight-color: transparent; }

.ambient-light {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 6% 5%, #fff 0, #ffffff00 30%),
    radial-gradient(ellipse at 16% 34%, #dff3ffb0 0, #e9f6ff00 43%),
    radial-gradient(ellipse at 37% 0%, #eaf5ff9c 0, #f2f7ff00 33%),
    radial-gradient(ellipse at 59% 43%, #fcfff2a8 0, #fcfff200 38%),
    radial-gradient(ellipse at 96% 36%, #fff9e69c 0, #fff7e600 40%),
    radial-gradient(ellipse at 22% 90%, #fceaf88a 0, #fceaf800 27%),
    radial-gradient(ellipse at 51% 94%, #e4f3ff9e 0, #eef5ff00 37%),
    linear-gradient(123deg, #fafdff, #f5f7fc 54%, #fffcf8);
}

.hero { padding: max(env(safe-area-inset-top), clamp(20px, 3.5svh, 40px)) max(16px, env(safe-area-inset-left)) 8px; text-align: center; position: relative; z-index: 2; }
.hero-eyebrow { margin: 0 0 13px; color: #647f8d; font-family: Georgia, "Times New Roman", serif; font-size: 11px; letter-spacing: .18em; line-height: 1.5; }
.hero-eyebrow span { margin: 0 10px; color: #afc0c9; }
.hero h1 { margin: 0; font-family: "Hub Serif", "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: clamp(28px, 3.5vw + 12px, 52px); font-weight: 500; letter-spacing: .2em; text-indent: .2em; line-height: 1.4; color: #193c4d; }
.hero-description { margin: 12px 0 0; color: #566d7c; font-size: 14px; line-height: 1.85; letter-spacing: .085em; }
.mobile-break { display: none; }
.hero-ornament { display: flex; align-items: center; justify-content: center; gap: 11px; margin: 15px auto 0; width: 190px; height: 12px; }
.hero-ornament span { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, #9ccbd7 42%, #d9b7d5); }
.hero-ornament span:last-child { transform: scaleX(-1); background: linear-gradient(90deg, transparent, #dccc9d 42%, #bbd9cc); }
.hero-ornament i { width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 32% 24%, #fff 10%, #d7f2fb66 34%, #f3d9f666 57%, #ddedc77a 78%); border: 1px solid #bdcfd870; box-shadow: inset 1px 1px 2px #fff, 0 0 10px #fff; }
.bubble-stage { --bubble-size: min(44vw, 40svh, 480px); position: relative; width: 100%; min-height: 280px; isolation: isolate; overflow: clip; }

.bubble {
  --tone-a: #7de4f2;
  --tone-b: #f9b4ed;
  --tone-c: #b9b9f3;
  --tone-d: #cbf9ff;
  --shade-a: #96e5ee65;
  --shade-b: #ffbde743;
  position: absolute;
  top: 0;
  left: 0;
  width: var(--bubble-size);
  height: var(--bubble-size);
  color: inherit;
  text-decoration: none;
  border-radius: 50%;
  outline: none;
  will-change: transform;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-drag: none;
  container-type: inline-size;
}

/* A useful, fully linked layout also exists before JavaScript starts. */
.bubble-lienect { left: 4%; top: 18%; transform: translate(-4%, -18%); }
.bubble-accounting { left: 46%; top: 90%; transform: translate(-46%, -90%); --tone-a: #86e4d2; --tone-b: #d3ed78; --tone-c: #fcf69a; --tone-d: #cbf7be; --shade-a: #bdeea96b; --shade-b: #f6f69973; }
.bubble-tools { left: 96%; top: 4%; transform: translate(-96%, -4%); --tone-a: #f5d97b; --tone-b: #ffed91; --tone-c: #abcce3; --tone-d: #fff7a8; --shade-a: #f7dc8369; --shade-b: #fff8bb8c; }
.is-motion-ready .bubble { left: 0; top: 0; }
.bubble-surface { position: absolute; inset: 0; transform: rotate(var(--squish-angle, 0rad)) scale(var(--squish-x, 1), var(--squish-y, 1)); will-change: transform; }
.bubble-face {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  transform: rotate(calc(-1 * var(--squish-angle, 0rad)));
  border: 1px solid #ffffffc7;
  background:
    radial-gradient(ellipse at 34% 24%, #fff9, #fff0 36%),
    radial-gradient(ellipse at 65% 73%, #ffffff8f, #fff0 51%),
    radial-gradient(ellipse at 25% 69%, var(--shade-a), transparent 55%),
    radial-gradient(ellipse at 84% 34%, var(--shade-b), transparent 49%),
    #ffffff2b;
  box-shadow: inset 3px 3px 14px #fff9, inset -4px -8px 19px var(--shade-a), 0 0 19px #ffffffaa;
}
.bubble-face::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  background: conic-gradient(from -38deg, var(--tone-a), #ecf4ffc2 10%, var(--tone-b) 21%, #fff 27%, var(--tone-c) 34%, var(--tone-a) 44%, #fff 48%, var(--tone-d) 57%, var(--tone-b) 65%, #fff8 72%, var(--tone-a) 84%, #eafffc 91%, var(--tone-a));
  mask-image: radial-gradient(farthest-side, transparent 80%, #0003 88%, #000b 94%, #000 98%, #0002 100%);
  -webkit-mask-image: radial-gradient(farthest-side, transparent 80%, #0003 88%, #000b 94%, #000 98%, #0002 100%);
  opacity: .9;
}
.bubble-face::after { content: ""; position: absolute; inset: 1.5%; border-radius: 50%; border: 1px solid #ffffffda; box-shadow: inset 2px 0 4px #ffffffed, 1px 0 3px var(--tone-a), -1px -1px 3px #fff; pointer-events: none; }
.bubble-film { position: absolute; inset: 3%; border-radius: 50%; background: conic-gradient(from 24deg, #fff0, var(--tone-d), #fff 17%, #fff0 28%, var(--tone-a) 40%, #fff0 56%, var(--tone-b) 72%, #fff 82%, #fff0); mask-image: radial-gradient(farthest-side, transparent 83%, #0006 92%, #000 96%, transparent 100%); -webkit-mask-image: radial-gradient(farthest-side, transparent 83%, #0006 92%, #000 96%, transparent 100%); filter: blur(1px); opacity: .7; }
.bubble-luster { position: absolute; inset: 3.4%; border-radius: 50%; border-top: 3px solid #ffffffd9; border-left: 2px solid #ffffffc7; border-right: 1px solid #ffffff00; border-bottom: 1px solid #ffffff26; transform: rotate(-34deg); box-shadow: inset 5px 6px 9px #fff8; mask-image: linear-gradient(130deg,#000 6%,#0000 61%); }
.glint { position: absolute; z-index: 1; background: #fff; pointer-events: none; box-shadow: 0 0 8px #fffc; }
.glint-one { width: 17%; height: 3.2%; left: 22%; top: 10.5%; border-radius: 50%; transform: rotate(-29deg); opacity: .96; }
.glint-two { width: 14%; height: 5.5%; left: 9.2%; top: 22%; border-radius: 48%; transform: rotate(-48deg); opacity: .88; filter: blur(.3px); }
.glint-three { width: 6%; height: 14%; right: 12%; top: 19%; border-radius: 50%; transform: rotate(-31deg); opacity: .7; }
.glint-four { width: 3%; height: 9%; right: 7%; bottom: 20%; border-radius: 50%; transform: rotate(22deg); opacity: .82; }
.bubble-reflection { position: absolute; z-index: -1; width: 78%; height: 11%; top: 108%; left: 11%; border-radius: 50%; background: radial-gradient(ellipse at 30% 50%, var(--tone-b), transparent 62%), radial-gradient(ellipse at 70% 50%, var(--tone-a), transparent 67%); filter: blur(12px); opacity: .38; pointer-events: none; transform: scaleY(.8); }
.bubble-content { position: absolute; inset: 14% 7% 10%; display: flex; align-items: center; flex-direction: column; text-align: center; }
.logo-wrap { width: 53%; height: 54%; flex: 0 0 54%; position: relative; }
.logo-wrap img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.logo-lienect { width: 51%; }
.logo-accounting { width: 55%; }
.logo-tools { width: 57%; }
.bubble h2 { margin: 3.3% 0 0; font-size: 8.1cqw; font-weight: 900; line-height: 1.23; letter-spacing: -.055em; white-space: nowrap; }
.bubble .company-wordmark { position: relative; width: 64%; aspect-ratio: 1704 / 264; flex-shrink: 0; overflow: hidden; margin-top: 5%; }
/* Trim transparent canvas in layout; the supplied wordmark keeps its own letterforms. */
.company-wordmark img { position: absolute; width: 127.47%; height: auto; max-width: none; left: -14.32%; top: -90.91%; pointer-events: none; }
.brand-name { display: block; font-size: .92em; line-height: 1.15; letter-spacing: -.025em; margin-top: 1%; }
.bubble p { margin: 0; font-size: max(10px, 5cqw); line-height: 1.5; font-weight: 500; color: #405362; letter-spacing: .01em; white-space: nowrap; }
.bubble-divider { width: 17%; height: .7cqw; flex: 0 0 .7cqw; margin: 3% 0; border-radius: 10px; background: linear-gradient(90deg, var(--tone-a), var(--tone-b)); }
.bubble-lienect .bubble-content { top: 13%; }
.bubble-lienect .bubble-divider { margin: 2% 0 2.5%; }
.bubble-lienect h2 { font-size: 7.5cqw; margin-top: 3%; }
.bubble-lienect p { font-size: max(10px, 4.6cqw); }
.open-mark { position: absolute; bottom: 6%; left: 46%; width: 8%; aspect-ratio: 1; display: grid; place-items: center; font: 500 5cqw/1 sans-serif; color: #3e596d; opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .2s; }
.bubble:hover .open-mark, .bubble:focus-visible .open-mark { opacity: .8; transform: translateY(0); }
.bubble:focus-visible .bubble-face { outline: 3px solid #477897; outline-offset: 7px; }
.bubble:hover .bubble-face { box-shadow: inset 3px 3px 14px #fff9, inset -4px -8px 19px var(--shade-a), 0 0 24px #fff; }

/* Only the selected soap film bursts; the destination remains a real link. */
.bubble-burst { position: fixed; inset: 0; z-index: 90; overflow: clip; pointer-events: none; }
.burst-origin { position: absolute; }
.burst-ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from -30deg, var(--tone-a), #fff, var(--tone-b), var(--tone-d), #fff, var(--tone-c), var(--tone-a)); mask-image: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 3px), #0009 calc(100% - 1px), transparent); -webkit-mask-image: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 3px), #0009 calc(100% - 1px), transparent); opacity: 0; animation: burst-ring .64s ease-out both; }
.burst-droplet { position: absolute; left: 50%; top: 50%; width: var(--droplet-size); height: var(--droplet-size); margin: calc(var(--droplet-size) / -2); border-radius: 50%; border: 1px solid #ffffffb3; background: radial-gradient(circle at 30% 24%, #fff 8%, var(--droplet-color) 60%, #ffffff80); box-shadow: 0 0 7px #ffffffb3; opacity: 0; animation: burst-droplet .64s cubic-bezier(.13,.62,.35,1) both; }
.is-bursting .bubble-surface { animation: bubble-pop .44s cubic-bezier(.22,.61,.36,1) both; }
.is-bursting .bubble-reflection { animation: burst-reflection .36s ease-out both; }
.is-bursting .open-mark { visibility: hidden; }
/* Uniform, independent scale preserves the frozen collision transform and face angle. */
@keyframes bubble-pop { 0% { scale: 1; opacity: 1; } 24% { scale: .985; opacity: 1; } 49% { scale: 1.075; opacity: .9; } 72%, 100% { scale: 1.14; opacity: 0; } }
@keyframes burst-ring { 0%, 20% { transform: scale(.98); opacity: 0; } 35% { transform: scale(1.07); opacity: .95; } 100% { transform: scale(1.55); opacity: 0; } }
@keyframes burst-droplet { 0%, 25% { transform: translate(var(--start-x), var(--start-y)) scale(.2); opacity: 0; } 37% { transform: translate(var(--start-x), var(--start-y)) scale(1); opacity: 1; } 65% { opacity: .8; } 100% { transform: translate(var(--end-x), var(--end-y)) scale(.35); opacity: 0; } }
@keyframes burst-reflection { to { opacity: 0; transform: scale(1.25, .35); } }
@keyframes burst-fade { to { opacity: 0; } }

/* Keep small bubbles readable, including a phone held sideways. */
@container (max-width: 220px) {
  .bubble-content { top: 12%; bottom: 8%; }
  .bubble-lienect .bubble-content { top: 11%; }
  .logo-wrap { height: 42%; flex-basis: 42%; }
  .bubble-content .mobile-break { display: block; }
}

.page-footer { position: relative; min-height: 49px; padding: 12px max(16px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)); display: flex; justify-content: center; align-items: center; }
.page-footer p { margin: 0; color: #677986; font-size: 13px; letter-spacing: .075em; }

.page-loader { position: fixed; inset: 0; z-index: 100; display: none; place-content: center; justify-items: center; background: radial-gradient(ellipse at 34% 40%, #ecf8ff, transparent 53%), radial-gradient(ellipse at 72% 65%, #fffbea, transparent 51%), #fbfcff; }
.is-loading .page-loader, .is-loaded .page-loader { display: grid; }
.is-loaded .page-loader { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .6s ease, visibility .6s; }
.loader-scene { position: relative; width: clamp(180px, 53vw, 230px); aspect-ratio: 205 / 176; margin-bottom: 26px; }
.loader-bubble { --loader-rim: #92dfee; --loader-accent: #eab9e982; position: absolute; width: 50.7%; aspect-ratio: 1; border-radius: 50%; border: 1px solid #a8dfea9e; background: radial-gradient(ellipse at 28% 21%, #ffffffeb, transparent 35%), radial-gradient(circle at 56% 63%, #fff6 30%, #abebf736 65%, var(--loader-accent) 92%, var(--loader-rim)); box-shadow: inset 3px 3px 6px #fff, inset -3px -3px 8px #b9ebf966, 0 15px 24px -15px #a7c7dd77; animation: loader-float 2.8s ease-in-out infinite alternate; }
.loader-bubble img { position: absolute; inset: 20%; width: 60%; height: 60%; object-fit: contain; }
.loader-bubble::before { content: ""; position: absolute; width: 28%; height: 7%; left: 17%; top: 13%; border-radius: 50%; background: #fffe; transform: rotate(-36deg); }
.loader-bubble::after { content: ""; position: absolute; inset: 4px; border: 1px solid #ffffffcf; border-radius: 50%; }
.loader-bubble-blue { left: 0; top: 5%; }
.loader-bubble-green { left: 45%; top: 0; width: 46.8%; --loader-rim: #9bdbb3; --loader-accent: #d8ed8e99; animation-delay: -.9s; }
.loader-bubble-gold { left: 27%; top: 44%; width: 44.4%; --loader-rim: #eed77d; --loader-accent: #fff0b6a8; animation-delay: -1.8s; }
.loader-title { margin: 0; font-family: "Hub Serif", "Yu Mincho", serif; font-weight: 500; font-size: 28px; letter-spacing: .2em; text-indent: .2em; color: #193c4d; }
.loader-label { margin: 15px 0 0; color: #738b98; font-size: 12px; letter-spacing: .2em; }
.is-loading .hero, .is-loading .bubble-stage, .is-loading .page-footer { opacity: 0; }
.is-loaded .hero, .is-loaded .bubble-stage, .is-loaded .page-footer { transition: opacity .7s ease; }
@keyframes loader-float { from { transform: translate(0, 4px) scale(.98, 1.02); } to { transform: translate(7px, -8px) scale(1.02, .98); } }

@media (max-width: 600px) {
  .hero-eyebrow { font-size: 9px; letter-spacing: .11em; margin-bottom: 9px; }
  .hero-eyebrow span { margin: 0 5px; }
  .hero-description { font-size: 12px; margin-top: 9px; line-height: 1.8; letter-spacing: .04em; }
  .hero-ornament { margin-top: 9px; width: 145px; }
  .mobile-break { display: block; }
  .bubble-reflection { top: 103%; opacity: .25; filter: blur(8px); }
  .page-footer { min-height: 43px; padding-top: 10px; padding-bottom: max(18px, env(safe-area-inset-bottom)); }
  .page-footer p { font-size: 11px; letter-spacing: .015em; }
}

@media (max-height: 550px) and (min-aspect-ratio: 4/5) {
  .hero { padding-top: 14px; }
  .hero-eyebrow { margin-bottom: 4px; font-size: 9px; }
  .hero h1 { font-size: 29px; }
  .hero-ornament { margin-top: 5px; }
  .hero-description { font-size: 12px; margin-top: 4px; }
  body { grid-template-rows: auto minmax(220px, 1fr) auto; }
  .bubble-stage { min-height: 220px; }
  .page-footer { min-height: 39px; padding-bottom: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .is-bursting .bubble-surface { animation: burst-fade .12s linear both; }
  .is-bursting .bubble-reflection { animation: burst-fade .12s linear both; }
  .burst-ring { animation: none; }
  .open-mark { transition: none; }
  .loader-bubble { animation-duration: 6s; }
  .is-loaded .page-loader { transition-duration: .15s; }
}