/* Home layout; site-glass.css provides the shared brand and reading theme. */
.home-page-body {
  /* Reference content bounds, excluding the photographed phone/status bar.
     390px screen: gutter 20, tile 55, service 211x295, channel 172x241. */
  --home-unit:min(1vw,4.44px);
  --glass-page:#101111;
  --glass-text:#f4f4f2;
  --glass-muted:#aaaead;
  --glass-line:rgba(255,255,255,.14);
  --glass-panel:rgba(255,255,255,.065);
  background:#080909;
}
html[data-theme] .home-page-body .app-shell { background:var(--glass-page); color:var(--glass-text); }
/* Header sizing and icon proportions are shared by all pages in site-glass.css. */
.home-page-body .current-ganji {
  position:relative; width:calc(var(--home-unit) * 12.5); height:calc(var(--home-unit) * 12.5); min-width:44px; min-height:44px; padding:0; border:1px solid rgba(255,255,255,.25); border-radius:14px;
  background:linear-gradient(140deg,rgba(255,255,255,.15),rgba(255,255,255,.015) 57%,rgba(255,255,255,.13));
  box-shadow:inset 0 1px 2px rgba(255,255,255,.23),inset 0 -1px 4px rgba(255,255,255,.1),0 7px 14px #0003;
  color:var(--glass-text); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
}
.home-page-body .current-ganji-code { font-size:14px; font-weight:600; letter-spacing:-.03em; }
.home-page-body main { padding:var(--site-header-height) 0 120px; }
html[data-theme] .home-page-body .home-glass-index { display:block; margin:0; padding:0; background:transparent; }
.home-page-body .home-profiles { padding-top:20px; }
.home-page-body .home-section-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 5%; margin:0 0 calc(var(--home-unit) * 3.5); }
.home-page-body .home-section-heading h2 { margin:0; color:var(--glass-muted); font-size:15px; line-height:1.5; font-weight:500; letter-spacing:-.04em; }
.home-page-body .home-section-heading .home-heading-keyword { color:var(--glass-text); font:inherit; }
.home-page-body .home-text-link { display:inline-flex; align-items:center; justify-content:center; gap:5px; min-height:32px; padding:0; border:0; background:none; color:var(--glass-muted); font-size:11px; white-space:nowrap; }
.home-page-body .home-text-link span { font-size:14px; }
.home-page-body .home-profile-list {
  display:flex; align-items:flex-start; gap:5.7%; padding:5px 5% 0; overflow-x:auto; overflow-y:hidden;
  overscroll-behavior-y:none;
  scrollbar-width:none; scroll-snap-type:x proximity; scroll-padding-inline:5%;
}
.home-page-body .home-profile-list::-webkit-scrollbar,
.home-page-body .home-service-list::-webkit-scrollbar,
.home-page-body .home-category-list::-webkit-scrollbar { display:none; }
.home-page-body .home-ganji-tile {
  --tile-rgb:148,151,158; position:relative; display:flex; flex:none; flex-direction:column; align-items:center; justify-content:center;
  width:14%; min-width:40px; height:auto; aspect-ratio:1; margin:0 0 27px; padding:2px; border:1px solid rgba(255,255,255,.23); border-radius:15px;
  background:radial-gradient(ellipse at 0 0,rgba(255,255,255,.16),transparent 70%),linear-gradient(135deg,rgba(var(--tile-rgb),.23),rgba(var(--tile-rgb),.06) 55%,rgba(var(--tile-rgb),.26));
  color:var(--glass-text); box-shadow:inset 0 1px 1px rgba(255,255,255,.25),inset 0 -2px 5px rgba(255,255,255,.075),0 8px 14px #0002;
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); scroll-snap-align:start; transition:border-color .18s,background .18s;
}
.home-page-body .home-ganji-tile[data-element="wood"] { --tile-rgb:116,153,113; }
.home-page-body .home-ganji-tile[data-element="fire"] { --tile-rgb:176,119,116; }
.home-page-body .home-ganji-tile[data-element="earth"] { --tile-rgb:167,149,105; }
.home-page-body .home-ganji-tile[data-element="water"] { --tile-rgb:123,143,163; }
.home-page-body .home-ganji-tile.is-selected { border:2px solid #fff0f5; border-color:#ffe0ec #e2ddf3 #d6f3fa #ffe0ec; box-shadow:-3px -3px 10px #ff83b566,3px 4px 12px #8ed9f066,0 0 5px #baa1ed40,inset -1px -1px 4px #8ed9f040,inset 1px 1px 4px #ff83b540; }
.home-page-body .home-ganji-tile::before { content:''; position:absolute; inset:-2px; }
.home-page-body .home-ganji-code { font-size:14px; line-height:1; font-weight:600; letter-spacing:-.035em; }
.home-page-body .home-ganji-name { position:absolute; top:calc(100% + 9px); left:0; right:0; color:var(--glass-muted); font-size:10px; line-height:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:400; }
.home-page-body .home-ganji-status { position:absolute; right:-2px; bottom:-2px; width:8px; height:8px; border:1px solid var(--glass-page); border-radius:50%; }
.home-page-body .home-ganji-status.is-owned { background:linear-gradient(#b1e868,#65c331); box-shadow:0 0 6px #80d13944; }
.home-page-body .home-ganji-status.is-registered { background:linear-gradient(#ff7474,#f13737); box-shadow:0 0 6px #ff454533; }
.home-page-body .home-ganji-add { --tile-rgb:159,159,165; font-size:34px; font-weight:300; }
.home-page-body .home-ganji-add .home-ganji-code { font-size:24px; font-weight:300; }
.home-page-body .home-services { margin-top:calc(var(--home-unit) * 1.5); }
.home-page-body .home-service-list {
  display:flex; gap:2.6%; padding:0 5% 12px; overflow-x:auto; scrollbar-width:none;
  scroll-snap-type:x mandatory; scroll-padding-inline:5%; overscroll-behavior-x:contain;
}
.home-page-body .home-service-list.is-loop-ready { scroll-snap-type:none; scroll-behavior:auto; overflow-anchor:none; touch-action:pan-x pan-y; cursor:grab; }
.home-page-body .home-service-list.is-dragging { cursor:grabbing; user-select:none; }
.home-page-body .home-service-image { pointer-events:none; -webkit-user-drag:none; }
/* Small 26px visual control, with a retained 44px touch target. */
.home-page-body .home-story-motion { position:relative; display:grid; place-items:center; width:44px; height:44px; margin:-12px 0; padding:0; border:0; border-radius:50%; background:transparent; color:var(--glass-muted); }
.home-page-body .home-story-motion::before { content:''; position:absolute; inset:9px; border-radius:50%; background:var(--glass-panel); }
.home-page-body .home-story-motion svg { position:relative; width:13px; height:13px; fill:currentColor; }
.home-page-body .home-story-motion:focus-visible { outline:2px solid var(--glass-text); outline-offset:-5px; }
.home-page-body .home-story-motion[aria-pressed="false"] .motion-play,.home-page-body .home-story-motion[aria-pressed="true"] .motion-pause { display:none; }
.home-page-body .home-service-card {
  /* 60% of the 90%-wide padded track = 54% of the screen. */
  position:relative; display:block; isolation:isolate; container-type:inline-size; flex:0 0 60%; min-width:0; aspect-ratio:1 / 1.4;
  -webkit-user-drag:none;
  padding:0; overflow:hidden; border:0; border-radius:calc(var(--home-unit) * 5.5);
  color:#fff; text-align:left; background:#1c1c1a; scroll-snap-align:start; box-shadow:0 12px 24px #0002;
}
.home-page-body .home-service-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
/* Product, question and action share one bottom panel; its clear edge fades into the artwork. */
.home-page-body .home-service-content { position:absolute; z-index:1; left:0; right:0; bottom:0; display:block; padding:36px 7% 7%; }
.home-page-body .home-service-content::before,
.home-page-body .home-service-content::after { content:''; position:absolute; z-index:-1; inset:0; pointer-events:none; }
/* Two feathered layers reveal progressively softer glass without blurring the text. */
.home-page-body .home-service-content::before {
  background:linear-gradient(180deg,transparent 0%,rgba(34,36,36,.18) 38%,rgba(24,26,26,.5) 100%);
  backdrop-filter:blur(4px) saturate(1.08); -webkit-backdrop-filter:blur(4px) saturate(1.08);
  mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.45) 35%,#000 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.45) 35%,#000 100%);
}
.home-page-body .home-service-content::after {
  background:linear-gradient(180deg,transparent 0%,rgba(15,17,18,.28) 45%,rgba(11,13,14,.62) 100%);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  mask-image:linear-gradient(180deg,transparent 0%,transparent 20%,rgba(0,0,0,.3) 55%,#000 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,transparent 20%,rgba(0,0,0,.3) 55%,#000 100%);
}
.home-page-body .home-service-label { display:block; margin:0 0 6px; color:#ecece8; font-size:10px; line-height:1.4; font-weight:500; letter-spacing:-.015em; text-shadow:0 1px 8px #0008; }
.home-page-body .home-service-content > strong { display:block; margin:0; color:#fff; font-size:clamp(12px,4.2vw,18px); font-size:clamp(12px,8cqw,18px); font-weight:800; line-height:1.3; letter-spacing:-.04em; white-space:nowrap; text-shadow:0 2px 16px #0005; }
.home-page-body .home-service-description { display:block; color:#d9d8d4; font-size:11px; line-height:1.6; letter-spacing:-.03em; word-break:keep-all; }
.home-page-body .home-service-bottom { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:6px; margin-top:12px; }
.home-page-body .home-service-cta { display:inline-flex; flex:0 0 72px; width:72px; height:30px; align-items:center; justify-content:center; padding:0; color:#fff; border-radius:18px; background:linear-gradient(135deg,#ff7a32,#ff5916); box-shadow:inset 0 1px 1px #ffffff40,0 3px 10px #0002; font-size:12px; font-weight:700; white-space:nowrap; }
.home-page-body .home-service-meta { flex:1; min-width:0; color:#e2e1dd; font-size:clamp(8px,4.4cqw,10px); line-height:1.4; letter-spacing:-.03em; white-space:normal; word-break:keep-all; }
.home-page-body .home-channel-categories { margin-top:calc(var(--home-unit) * 3); overflow:hidden; }
.home-page-body .home-channel-categories .home-section-heading { margin-bottom:0; }
.home-page-body .home-category-list {
  position:relative; display:flex; gap:14px; padding:24px 24px 32px;
  overflow-x:auto; scrollbar-width:none; scroll-snap-type:x mandatory;
  scroll-padding-inline:24px; touch-action:pan-y; user-select:none; -webkit-user-select:none;
}
.home-page-body .home-category-card {
  /* Match the service portrait ratio while keeping the smaller category width. */
  position:relative; display:block; flex:0 0 50%; height:auto; aspect-ratio:1 / 1.4; color:#fff; border-radius:22px;
  background:#272722; scroll-snap-align:center; transform-origin:50% 50%;
  box-shadow:0 9px 18px #0004; border:0; -webkit-user-drag:none;
}
.home-page-body .home-category-list.is-orbit-ready {
  display:block; height:auto; min-height:0; padding:0; overflow:hidden; isolation:isolate;
  cursor:grab; scroll-snap-type:none;
}
.home-page-body .home-category-list.is-dragging { cursor:grabbing; }
.home-page-body .is-orbit-ready .home-category-card {
  position:absolute; top:24px; left:50%; width:44%; height:auto; margin:0;
  will-change:transform;
}
.home-page-body .is-orbit-ready .home-category-card[aria-hidden="true"] { pointer-events:none; }
.home-page-body .home-category-list:focus-visible { outline:2px solid #cecece; outline-offset:-3px; }
.home-page-body .home-category-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:24px; pointer-events:none; -webkit-user-drag:none; }
.home-page-body .home-category-card::after { content:''; position:absolute; inset:0; border-radius:24px; background:linear-gradient(transparent 35%,#111d); pointer-events:none; }
.home-page-body .home-category-tag {
  position:absolute; top:-11px; right:10px; z-index:2; padding:7px 13px; border-radius:19px; color:#fff;
  background:linear-gradient(135deg,#666666,#3d3d3d); border:1px solid #bebebe55; box-shadow:0 4px 9px #0004,inset 0 1px 1px #ffffff38;
  font-size:11px; font-weight:600; white-space:nowrap;
}
.home-page-body .home-category-card strong { position:absolute; z-index:1; bottom:19px; left:14px; right:10px; font-size:17px; font-weight:600; line-height:1.4; letter-spacing:-.05em; word-break:keep-all; }
/* Matching is a conversation on the page, not another image/banner card. */
.home-page-body .home-matching {
  --matching-glass:linear-gradient(145deg,#ffffff1c,#ffffff08);
  --matching-mine:linear-gradient(140deg,#e9e7df,#c9c9c4);
  --matching-mine-text:#262828;
  --matching-haze:#bfcac414;
  --matching-shadow:#00000045;
  overflow:hidden;
}
.home-page-body .home-matching [hidden] { display:none !important; }
.home-page-body #home-matching-title { scroll-margin-top:calc(var(--site-header-height) + 20px); }
.home-page-body .home-matching-conversation { margin:0 5%; padding:10px 0 18px; color:var(--glass-text); }
.home-page-body .home-matching-intro h3 { max-width:10em; margin:0; font-size:clamp(30px,8.2vw,36px); font-weight:500; line-height:1.23; letter-spacing:-.05em; word-break:keep-all; text-wrap:balance; }
.home-page-body .home-matching-intro p { margin:13px 0 0; color:var(--glass-muted); font-size:13px; line-height:1.65; letter-spacing:-.02em; }
.home-page-body .home-matching-scene { position:relative; isolation:isolate; margin:16px 0 12px; padding:4px 0; }
.home-page-body .home-matching-haze { position:absolute; z-index:-1; pointer-events:none; width:145%; height:190px; top:58px; left:-23%; border-radius:50%; background:radial-gradient(ellipse,var(--matching-haze),transparent 68%); transform:rotate(-24deg); filter:blur(14px); }
.home-page-body .home-matching-silk { position:absolute; z-index:-1; pointer-events:none; width:125%; height:64px; top:117px; left:-12%; border-radius:50%; border-top:1px solid var(--glass-line); transform:rotate(-30deg); box-shadow:0 -9px 26px var(--matching-haze); }
.home-page-body .home-matching-dialogue { margin:0; padding:0; list-style:none; }
.home-page-body .home-matching-message { position:relative; display:flex; flex-direction:column; align-items:flex-start; min-height:76px; margin:0; padding:0 0 12px; }
.home-page-body .home-matching-message.is-outgoing { align-items:flex-end; }
.home-page-body .home-matching-bubble-group { position:relative; max-width:92%; }
.home-page-body .home-matching-speaker { display:block; margin:0 0 6px 9px; color:var(--glass-muted); font-size:11px; line-height:1.4; }
.home-page-body .is-outgoing .home-matching-speaker { margin-right:9px; text-align:right; }
.home-page-body .home-matching-bubble { margin:0; padding:12px 16px; border:1px solid var(--glass-line); border-radius:24px 24px 24px 7px; background:var(--matching-glass); color:var(--glass-text); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); box-shadow:inset 0 1px 0 #ffffff14,0 9px 26px var(--matching-shadow); font-size:14px; line-height:1.6; font-weight:400; letter-spacing:-.025em; word-break:keep-all; overflow-wrap:anywhere; }
.home-page-body .is-outgoing .home-matching-bubble { border-color:transparent; border-radius:24px 24px 7px 24px; background:var(--matching-mine); color:var(--matching-mine-text); }
.home-page-body .home-matching-typing { position:absolute; top:21px; left:0; display:flex; align-items:center; gap:5px; padding:17px 20px; border:1px solid var(--glass-line); border-radius:22px 22px 22px 7px; background:var(--matching-glass); }
.home-page-body .is-outgoing .home-matching-typing { left:auto; right:0; border-radius:22px 22px 7px 22px; }
.home-page-body .home-matching-typing i { width:5px; height:5px; border-radius:50%; background:var(--glass-muted); animation:home-matching-type 1s ease-in-out infinite; }
.home-page-body .home-matching-typing i:nth-child(2) { animation-delay:.15s; }
.home-page-body .home-matching-typing i:nth-child(3) { animation-delay:.3s; }
/* Keep the full example readable by assistive technology and with JavaScript off. */
.home-page-body .home-matching-message:is([data-message-state="pending"],[data-message-state="typing"]) .home-matching-bubble-group { opacity:0; transform:translateY(12px); }
.home-page-body .home-matching-message[data-message-state="shown"] .home-matching-bubble-group { animation:home-matching-enter .45s cubic-bezier(.2,.8,.2,1) both; }
.home-page-body .home-matching[data-preview-state="complete"] .home-matching-bubble-group { opacity:1; transform:none; animation:none; }
.home-page-body .home-matching[data-preview-suspended="true"] :is(.home-matching-bubble-group,.home-matching-typing i) { animation-play-state:paused; }
.home-page-body .home-matching-cta { display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:54px; padding:15px 19px; border:0; border-radius:15px; background:var(--glass-text); color:var(--glass-page); font-size:14px; font-weight:500; line-height:1.5; letter-spacing:-.02em; text-decoration:none; }
.home-page-body .home-matching-cta svg { width:18px; height:18px; flex:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.home-page-body .home-matching :is(a,button):focus-visible { outline:2px solid var(--glass-text); outline-offset:4px; }
html[data-theme="light"] .home-page-body .home-matching { --matching-glass:linear-gradient(140deg,#ffffffdd,#e9e9e5b3); --matching-mine:linear-gradient(140deg,#373c3a,#252827); --matching-mine-text:#faf8f2; --matching-haze:#667a7214; --matching-shadow:#30353312; }
@keyframes home-matching-enter { from { opacity:0; transform:translateY(12px) scale(.98); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes home-matching-type { 0%,70%,100% { opacity:.35; } 35% { opacity:1; } }
@media (max-width:360px) { .home-page-body .home-matching-bubble { padding:12px 14px; font-size:13px; } }
@media (prefers-reduced-motion:reduce) {
  .home-page-body .home-matching [data-matching-bubble] { opacity:1 !important; transform:none !important; animation:none !important; }
  .home-page-body .home-matching-typing { display:none !important; }
}
html[data-theme] .home-page-body .home-footer { margin:14px 24px 0; padding:28px 0 12px; border-top:1px solid var(--glass-line); background:none; color:var(--glass-muted); }
.home-page-body .home-footer .brand-mark { width:43px; height:42px; }
.home-page-body .home-footer .brand-wordmark { font-size:19px; }
.home-page-body .home-footer .footer-story { font-size:12px; line-height:1.85; color:var(--glass-muted); }
.home-page-body .home-footer .footer-business { font-size:10px; line-height:1.9; }
.home-page-body .home-footer .footer-links { border-color:var(--glass-line); }
.home-page-body .home-footer .footer-links a { color:var(--glass-muted); font-size:12px; }
.home-page-body .home-footer > small,
.home-page-body .home-footer .footer-copyright,
.home-page-body .home-footer .footer-company-line { color:var(--glass-muted); font-size:10px; }
.home-page-body :is(.home-ganji-tile,.current-ganji,.home-service-card,.home-category-card,.home-text-link):focus-visible { outline:2px solid #cecece; outline-offset:2px; }
@media (hover:hover) {
  .home-page-body .home-service-card:hover .home-service-image { transform:scale(1.035); }
  .home-page-body .home-ganji-tile:hover { border-color:#ffffff80; }
}
@media (prefers-reduced-motion:reduce) {
  .home-page-body .home-service-image,.home-page-body .home-ganji-tile { transition:none; }
  .home-page-body :is(.home-profile-list,.home-service-list,.home-category-list) { scroll-behavior:auto; }
}
/* Respect existing explicit light-theme preference; default remains the reference's dark theme. */
html[data-theme="light"] .home-page-body {
  --glass-page:#f3f1ed; --glass-text:#252628; --glass-muted:#646663; --glass-line:#23262920;
  background:#e5e3df;
}
html[data-theme="light"] .home-page-body :is(.home-ganji-tile,.current-ganji) { border-color:#ffffffbb; box-shadow:inset 0 1px 2px #fff,0 6px 14px #3933290d; }
html[data-theme="light"] .home-page-body .home-ganji-tile.is-selected { border-color:#dba3b8 #bbb2d4 #96c6d4 #dba3b8; box-shadow:-3px -3px 10px #ff83b54d,3px 4px 12px #8ed9f066,0 0 5px #baa1ed30,inset 0 0 3px #ffffff80; }
html[data-theme="light"] .home-page-body .home-section-heading h2 { color:#555754; }
html[data-theme="light"] .home-page-body .home-section-heading .home-heading-keyword { color:#171818; }
/* The clipped, overlapping card shadows looked like a grey strip behind the track. */
html[data-theme="light"] .home-page-body .home-service-card { box-shadow:none; }