/* AI SOFT Phase 1. Existing identity: see DESIGN.md. Static content is the default. */
:root { --flow-border:#dce6f0; --flow-ink:#0c447c; --flow-soft:#eef5ff; --flow-radius:20px; }
.hero { padding-bottom:10px; }
.hero .system-showcase { margin:36px auto 0; text-align:left; }
.system-showcase { background:#fff; border:1px solid var(--flow-border); border-radius:var(--flow-radius); padding:24px; box-shadow:var(--shadow); }
.system-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:24px; }
.visual-eyebrow { display:block; color:var(--flow-ink); font-size:.69rem; font-weight:700; letter-spacing:.09em; line-height:1.5; }
.system-heading h2 { font-size:1.12rem; line-height:1.4; margin-top:5px; color:#111; }
.motion-toggle { flex-shrink:0; min-width:110px; min-height:44px; padding:8px 12px; border:1px solid var(--flow-border); border-radius:999px; background:#fff; color:var(--flow-ink); font-size:.75rem; font-weight:600; line-height:1.4; font-family:inherit; cursor:pointer; }
.motion-toggle[hidden], .resume-label { display:none; }
.is-paused .pause-label { display:none; }
.is-paused .resume-label { display:inline; }
.system-flow { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:20px; list-style:none; }
.system-node { position:relative; border:1px solid var(--flow-border); border-radius:12px; padding:16px 10px 14px; background:#f8faff; min-width:0; }
.system-node::before { content:""; position:absolute; inset:-1px; border:1px solid #81a9d4; border-radius:inherit; pointer-events:none; }
.system-node:not(:last-child)::after { content:""; position:absolute; width:20px; height:2px; top:39px; left:calc(100% + 1px); background:var(--primary); transform-origin:left; }
.node-icon { display:flex; align-items:center; justify-content:center; width:42px; height:42px; margin-bottom:15px; border:1px solid #c7d9ec; border-radius:10px; background:white; color:var(--primary); }
.node-icon svg { width:24px; height:24px; }
.system-node strong { display:block; font-size:.83rem; line-height:1.5; color:var(--flow-ink); }
.node-caption { display:block; color:var(--muted); font-size:.71rem; line-height:1.6; margin-top:4px; }
.node-check { position:absolute; right:10px; top:18px; color:var(--primary); font-size:.78rem; }
.system-output { margin-top:20px; border-top:1px solid #e8eef5; padding-top:16px; display:flex; align-items:center; gap:16px; }
.output-label { display:flex; align-items:center; gap:8px; color:#555; font-size:.79rem; line-height:1.5; }
.output-label svg, .app-brand svg, .app-footer svg, .automation-bridge svg { width:18px; height:18px; flex-shrink:0; color:var(--primary); }
.demo-label { color:#666; font-size:.66rem; white-space:nowrap; }
.system-output > .demo-label { margin-left:auto; }
.output-preview { height:28px; display:flex; align-items:flex-end; gap:4px; flex-shrink:0; }
.output-preview span { width:9px; height:35%; background:#b5cff0; border-radius:3px 3px 0 0; transform-origin:bottom; }
.output-preview span:nth-child(2) { height:55%; }.output-preview span:nth-child(3) { height:45%; }.output-preview span:nth-child(4) { height:75%; }.output-preview span:nth-child(5) { height:100%; background:var(--primary); }
.section-intro { color:var(--muted); font-size:1rem; line-height:1.7; margin:-12px 0 25px; }
.built-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.built-card { display:flex; flex-direction:column; min-width:0; padding:28px; background:#fff; border:1px solid #e6e9ee; border-radius:20px; box-shadow:var(--shadow); transition:transform .25s ease,box-shadow .25s ease; }
.built-copy h3 { font-size:1.5rem; line-height:1.3; color:#111; margin:10px 0 12px; }
.built-copy p { color:var(--muted); font-size:.94rem; line-height:1.7; min-height:4.8em; }
.concept-ui { margin:22px 0; border:1px solid var(--flow-border); border-radius:12px; overflow:hidden; background:#f8faff; }
.app-toolbar { display:flex; justify-content:space-between; gap:8px; align-items:center; padding:12px 14px; background:#fff; border-bottom:1px solid var(--flow-border); }
.app-brand { display:flex; align-items:center; gap:6px; font-size:.68rem; font-weight:800; white-space:nowrap; }
.app-brand > span { font-weight:400; color:#666; }
.app-body { padding:16px; min-height:296px; }
.app-overview { display:flex; align-items:center; gap:10px; justify-content:space-between; margin-bottom:16px; }
.app-overview .visual-eyebrow { font-size:.6rem; letter-spacing:.05em; }
.app-overview strong { display:block; font-size:.8rem; line-height:1.5; margin-top:4px; }
.status-pill { border:1px solid #bfdcce; border-radius:999px; background:#eefbf3; color:#226346; padding:5px 7px; font-size:.6rem; white-space:nowrap; }
.summary-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin-bottom:16px; }
.summary-grid > div { border:1px solid #e1e8f0; background:#fff; border-radius:8px; padding:10px 8px; }
.summary-grid span { display:block; color:#666; font-size:.65rem; margin-bottom:5px; }
.summary-grid strong { font-size:.76rem; color:var(--flow-ink); }
.concept-table { width:100%; border-collapse:collapse; text-align:left; font-size:.68rem; background:#fff; }
.concept-table th { color:#555; font-weight:600; background:#edf2f7; }
.concept-table td, .concept-table th { padding:10px 7px; border-bottom:1px solid #e6ecf3; line-height:1.5; }
.table-state { display:inline-block; color:#226346; background:#eefbf3; border-radius:4px; padding:2px 5px; white-space:nowrap; font-size:.61rem; }
.table-state.review { color:#80581f; background:#fff4df; }
.app-footer { display:flex; align-items:center; gap:7px; color:#555; font-size:.65rem; line-height:1.5; margin-top:16px; }
.sheet-title { display:flex; justify-content:space-between; gap:8px; margin-bottom:14px; font-size:.8rem; }
.sheet-file { color:#555; font-size:.65rem; }
.sheet-table td, .sheet-table th { padding-top:8px; padding-bottom:8px; border:1px solid #e1e8f0; }
.sheet-table th { background:#edf7f0; color:#286143; }.cell-ok { color:#286143; }
.automation-bridge { display:flex; justify-content:space-between; gap:6px; align-items:center; margin:18px 0; color:var(--flow-ink); font-size:.67rem; }
.automation-bridge > span { display:flex; align-items:center; gap:5px; }.automation-bridge i { font-style:normal; color:#56748f; }
.report-ready { display:flex; align-items:center; gap:10px; background:#fff; border:1px solid #c9dcef; border-radius:9px; padding:12px; }
.report-ready-icon { color:var(--primary); width:28px; height:28px; flex-shrink:0; }.report-ready strong { display:block; font-size:.76rem; }.report-ready div > span { display:block; font-size:.63rem; color:#555; margin-top:4px; line-height:1.5; }.report-ready > span:last-child { margin-left:auto; color:#286143; }
.showcase-steps { display:flex; flex-wrap:wrap; list-style:none; gap:6px 0; margin:0 0 20px; }
.showcase-steps li { color:#555; font-size:.69rem; line-height:1.6; }.showcase-steps li:not(:last-child)::after { content:"→"; padding:0 6px; color:var(--primary); }
.showcase-link { display:inline-flex; align-items:center; gap:8px; min-height:44px; align-self:flex-start; color:var(--primary); text-decoration:underline; text-underline-offset:4px; font-size:.84rem; font-weight:600; margin-top:auto; }
.process-flow .card:not(:last-child)::after { content:""; position:absolute; height:2px; width:25px; left:100%; top:50%; background:var(--primary); transform-origin:left; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
/* Restore readable content when scripts or observer support are unavailable. */
.reveal, .reveal-group .card, .reveal-group .highlight, .reveal-group .srv-card { opacity:1; transform:none; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline:3px solid var(--primary); outline-offset:4px; }
.wa-btn { color:#073819; }
footer, footer p, .info-text p[style] { color:#666 !important; }
.text-gradient { background-image:linear-gradient(135deg,#0056b3 0%,#007c9e 100%); }
.hero h1 > span[style] { color:#767676 !important; }
.card-num { color:#767676; }.card h3 { padding-right:24px; }
@media(hover:hover) and (pointer:fine) { .built-card:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(0,0,0,.09); }.built-card:hover .report-ready, .built-card:hover .summary-grid > div { border-color:#93b7df; } }
@media(max-width:1024px) { .system-flow { gap:14px; }.system-node:not(:last-child)::after { width:14px; }.built-card { padding:22px; }.app-body { padding:12px; } }
@media(min-width:769px) and (max-width:900px) { .built-grid { gap:16px; }.built-card { padding:16px; }.app-brand > span { display:none; }.app-overview { align-items:flex-start; }.status-pill { display:none; }.concept-table { font-size:.62rem; }.concept-table td, .concept-table th { padding-left:4px; padding-right:4px; } }
@media(max-width:768px) {
  .hero { padding-top:28px; }.hero .system-showcase { margin-top:28px; }.system-showcase { padding:20px; }.system-heading { margin-bottom:18px; flex-direction:column; align-items:flex-start; gap:12px; }.system-heading h2 { font-size:1rem; }.motion-toggle { min-width:110px; min-height:44px; }
  /* Reserve the control before JS: showing it must not push the workflow down. */
  .motion-toggle[hidden] { display:block; visibility:hidden; }
  .system-flow { grid-template-columns:1fr; gap:12px; }.system-node { display:flex; align-items:center; gap:12px; padding:10px 12px; min-height:64px; }.node-icon { width:36px; height:36px; margin:0; flex-shrink:0; }.node-icon svg { width:21px; height:21px; }.system-node strong { font-size:.83rem; }.node-caption { margin-top:0; font-size:.7rem; }.node-check { position:static; margin-left:auto; }.system-node:not(:last-child)::after { width:2px; height:12px; top:calc(100% + 1px); left:29px; transform-origin:top; }
  .system-output { flex-wrap:wrap; gap:10px; }.output-label { font-size:.74rem; }.system-output > .demo-label { margin-left:0; }.output-preview { display:none; }
  .built-grid { grid-template-columns:1fr; gap:20px; }.built-card { padding:22px; }.built-copy p { min-height:0; }.built-copy h3 { font-size:1.35rem; }.app-body { padding:14px; min-height:0; }.app-brand { font-size:.65rem; }.app-brand > span { display:none; }.app-overview { align-items:flex-start; }.app-overview strong { font-size:.74rem; }.concept-table { font-size:.64rem; }.concept-table th, .concept-table td { padding:8px 5px; }.summary-grid strong { font-size:.68rem; }.summary-grid > div { padding:9px 6px; }.showcase-steps { margin-bottom:14px; }

  .process-grid { grid-template-columns:1fr; }.process-flow .card:not(:last-child)::after { width:2px; height:25px; top:100%; left:50%; transform-origin:top; }
  .contact-info, .map-placeholder { min-width:0; width:100%; }.float-wa { width:48px; height:48px; right:12px; bottom:14px; }.form-full:last-child { padding-right:26px; }
  body.hero-in-view .float-wa { opacity:0; visibility:hidden; pointer-events:none; }
  body.attendance-dashboard-in-view .float-wa { opacity:0; visibility:hidden; pointer-events:none; }
}
@media(max-width:390px) { .built-card { padding:18px; }.app-body { padding:10px; }.status-pill { font-size:.56rem; padding:4px 6px; }.app-overview { gap:6px; }.automation-bridge { gap:4px; font-size:.63rem; }.automation-bridge svg { width:15px; }.app-toolbar { padding:10px; }.system-showcase { padding:16px; } }
@media(min-width:769px) and (max-width:900px) {
  .process-grid { grid-template-columns:1fr; }
  .process-flow .card:not(:last-child)::after { width:2px; height:25px; top:100%; left:50%; transform-origin:top; }
}
/* One 10s cycle: sequential activation, completed state from 6.8–9s, soft reset. */
@media(prefers-reduced-motion:no-preference) and (min-width:769px) {
  .flow-running .system-node::before { animation:flow-node 10s ease-in-out infinite; }
  .flow-running .system-node:nth-child(2)::before { animation-name:flow-node-2; }
  .flow-running .system-node:nth-child(3)::before { animation-name:flow-node-3; }
  .flow-running .system-node:nth-child(4)::before { animation-name:flow-node-4; }
  .flow-running .system-node:nth-child(5)::before { animation-name:flow-node-5; }
  .flow-running .system-node::after { animation:flow-line 10s ease-in-out infinite; }
  .flow-running .system-node:nth-child(2)::after { animation-name:flow-line-2; }
  .flow-running .system-node:nth-child(3)::after { animation-name:flow-line-3; }
  .flow-running .system-node:nth-child(4)::after { animation-name:flow-line-4; }
  .flow-running .output-preview { animation:flow-report 10s ease-in-out infinite; transform-origin:bottom; }
}
@keyframes flow-node { 0%,100% { opacity:0; } 8%,90% { opacity:1; } }
@keyframes flow-node-2 { 0%,15%,100% { opacity:0; } 23%,90% { opacity:1; } }
@keyframes flow-node-3 { 0%,30%,100% { opacity:0; } 38%,90% { opacity:1; } }
@keyframes flow-node-4 { 0%,45%,100% { opacity:0; } 53%,90% { opacity:1; } }
@keyframes flow-node-5 { 0%,60%,100% { opacity:0; } 68%,90% { opacity:1; } }
@keyframes flow-line { 0%,8%,100% { transform:scaleX(0); opacity:0; } 20%,90% { transform:scaleX(1); opacity:1; } }
@keyframes flow-line-2 { 0%,23%,100% { transform:scaleX(0); opacity:0; } 35%,90% { transform:scaleX(1); opacity:1; } }
@keyframes flow-line-3 { 0%,38%,100% { transform:scaleX(0); opacity:0; } 50%,90% { transform:scaleX(1); opacity:1; } }
@keyframes flow-line-4 { 0%,53%,100% { transform:scaleX(0); opacity:0; } 65%,90% { transform:scaleX(1); opacity:1; } }
@keyframes flow-report { 0%,53%,100% { opacity:.35; transform:scaleY(.4); } 68%,90% { opacity:1; transform:scaleY(1); } }
@media(prefers-reduced-motion:no-preference) {
  .motion-ready .reveal:not(.visible), .motion-ready .reveal-group:not(.visible) .card, .motion-ready .reveal-group:not(.visible) .highlight, .motion-ready .reveal-group:not(.visible) .srv-card { opacity:0; transform:translateY(14px); }
  .motion-ready .process-flow .card::after { transition:transform .55s ease; transition-delay:calc(var(--step,0)*.16s + .15s); }
  .motion-ready .process-flow:not(.visible) .card::after { transform:scaleX(0); }
  .process-flow .card:nth-child(2) { --step:1; }.process-flow .card:nth-child(3) { --step:2; }
}

@media(prefers-reduced-motion:no-preference) and (max-width:900px) {
  .motion-ready .process-flow:not(.visible) .card::after { transform:scaleY(0); }
}
/* Mobile: vertical progression, 0.5s activations, 0.4s connectors,
   completed hold 6.5–8.5s, soft reset 8.5–9.3s. Text never moves or disappears. */
@media(prefers-reduced-motion:no-preference) and (max-width:768px) {
  .flow-running[data-motion-mode="mobile"] .system-node::before { background:rgba(0,86,179,.06); border-color:var(--primary); }
  .flow-running[data-motion-mode="mobile"] .system-node::before,
  .flow-running[data-motion-mode="mobile"] .system-node .node-icon,
  .flow-running[data-motion-mode="mobile"] .system-node .node-check { animation:mobile-node-1 10s ease-in-out infinite; }
  .flow-running[data-motion-mode="mobile"] .node-icon { --mobile-rest:.6; --mobile-rise:0px; }
  .flow-running[data-motion-mode="mobile"] .node-check { --mobile-rest:.3; --mobile-rise:0px; }
  .flow-running[data-motion-mode="mobile"] .system-node:not(:last-child)::after { animation:mobile-line-1 10s ease-in-out infinite; }
  .flow-running[data-motion-mode="mobile"] .system-node:nth-child(2)::before,
  .flow-running[data-motion-mode="mobile"] .system-node:nth-child(2) .node-icon,
  .flow-running[data-motion-mode="mobile"] .system-node:nth-child(2) .node-check { animation-name:mobile-node-2; }
  .flow-running[data-motion-mode="mobile"] .system-node:nth-child(3)::before,
  .flow-running[data-motion-mode="mobile"] .system-node:nth-child(3) .node-icon,
  .flow-running[data-motion-mode="mobile"] .system-node:nth-child(3) .node-check { animation-name:mobile-node-3; }
  .flow-running[data-motion-mode="mobile"] .system-node:nth-child(4)::before,
  .flow-running[data-motion-mode="mobile"] .system-node:nth-child(4) .node-icon,
  .flow-running[data-motion-mode="mobile"] .system-node:nth-child(4) .node-check { animation-name:mobile-node-4; }
  .flow-running[data-motion-mode="mobile"] .system-node:nth-child(5)::before,
  .flow-running[data-motion-mode="mobile"] .system-node:nth-child(5) .node-icon,
  .flow-running[data-motion-mode="mobile"] .system-node:nth-child(5) .node-check { animation-name:mobile-node-5; }
  .flow-running[data-motion-mode="mobile"] .system-node:nth-child(2)::after { animation-name:mobile-line-2; }
  .flow-running[data-motion-mode="mobile"] .system-node:nth-child(3)::after { animation-name:mobile-line-3; }
  .flow-running[data-motion-mode="mobile"] .system-node:nth-child(4)::after { animation-name:mobile-line-4; }
}
@keyframes mobile-node-1 { 0%,93%,100% { opacity:var(--mobile-rest,0); transform:translateY(var(--mobile-rise,6px)); } 5%,85% { opacity:1; transform:translateY(0); } }
@keyframes mobile-node-2 { 0%,15%,93%,100% { opacity:var(--mobile-rest,0); transform:translateY(var(--mobile-rise,6px)); } 20%,85% { opacity:1; transform:translateY(0); } }
@keyframes mobile-node-3 { 0%,30%,93%,100% { opacity:var(--mobile-rest,0); transform:translateY(var(--mobile-rise,6px)); } 35%,85% { opacity:1; transform:translateY(0); } }
@keyframes mobile-node-4 { 0%,45%,93%,100% { opacity:var(--mobile-rest,0); transform:translateY(var(--mobile-rise,6px)); } 50%,85% { opacity:1; transform:translateY(0); } }
@keyframes mobile-node-5 { 0%,60%,93%,100% { opacity:var(--mobile-rest,0); transform:translateY(var(--mobile-rise,6px)); } 65%,85% { opacity:1; transform:translateY(0); } }
@keyframes mobile-line-1 { 0%,6%,93%,100% { opacity:.3; transform:scaleY(0); } 10%,85% { opacity:1; transform:scaleY(1); } }
@keyframes mobile-line-2 { 0%,21%,93%,100% { opacity:.3; transform:scaleY(0); } 25%,85% { opacity:1; transform:scaleY(1); } }
@keyframes mobile-line-3 { 0%,36%,93%,100% { opacity:.3; transform:scaleY(0); } 40%,85% { opacity:1; transform:scaleY(1); } }
@keyframes mobile-line-4 { 0%,51%,93%,100% { opacity:.3; transform:scaleY(0); } 55%,85% { opacity:1; transform:scaleY(1); } }

@media(prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .reveal, .reveal-group .card, .reveal-group .highlight, .reveal-group .srv-card, .system-node { opacity:1 !important; transform:none !important; }
  .motion-toggle { display:none !important; }
  .card:hover, .srv-card:hover, .built-card:hover, .btn-hero:hover, .wa-btn:hover, .float-wa:hover, .map-link:hover, .btn-submit:hover { transform:none; }
}
/* Interior display rules must never override the established language switch. */
body:not(.zh-mode) .zh { display:none; }


/* Phase 1.2: clearer capability, project, offering and contact hierarchy. */
.built-section, .projects-section { scroll-margin-top:20px; }
.built-card { height:100%; }
.built-copy p { min-height:4.9em; }
.built-card .concept-ui { margin:18px 0; }
.built-card .app-body { min-height:218px; }
.compact-flow { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:center; gap:8px; margin-top:18px; }
.compact-flow span { height:42px; border:1px solid #d7e3ef; border-radius:8px; background:#fff; }
.compact-flow span::after { content:""; display:block; width:56%; height:5px; margin:18px auto 0; border-radius:99px; background:#bfd3ea; }
.compact-flow i { color:var(--primary); font-style:normal; }
.capability-points { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; list-style:none; margin:0 0 18px; }
.capability-points li { position:relative; min-width:0; padding:10px 8px 10px 26px; border:1px solid #e3ebf3; border-radius:9px; background:#f8faff; color:#364b5f; font-size:.72rem; line-height:1.45; }
.capability-points li::before { content:"✓"; position:absolute; left:9px; top:9px; color:var(--primary); font-weight:800; }
.projects-section { margin-top:38px; padding:26px 0 2px; border-top:1px solid #e5eaf0; }
.projects-section > .section-title { margin:6px 0 12px; padding-top:0; border-top:0; }
.projects-section > .section-intro { margin:0 0 20px; }
.project-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.project-card { display:flex; flex-direction:column; min-width:0; padding:18px; border:1px solid #e3e8ee; border-radius:16px; background:#fff; box-shadow:0 4px 18px rgba(0,0,0,.055); transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease; }
.project-card h3 { min-height:2.7em; margin:16px 0 8px; color:#111; font-size:1.05rem; line-height:1.35; }
.project-card > p { flex:1; color:var(--muted); font-size:.82rem; line-height:1.65; }
.project-visual { position:relative; height:112px; overflow:hidden; border:1px solid #dce7f2; border-radius:11px; background:#f5f9fe; color:var(--flow-ink); }
.project-visual-bar { display:flex; align-items:center; justify-content:space-between; height:25px; padding:0 9px; border-bottom:1px solid #dce7f2; background:#fff; }
.project-visual-bar span { width:54px; height:5px; border-radius:99px; background:#b8cee6; }
.project-visual-bar i { width:8px; height:8px; border-radius:50%; background:#5a91ca; }
.attendance-layout { display:grid; grid-template-columns:.75fr 1.25fr .6fr; gap:8px; align-items:center; height:86px; padding:10px; }
.branch-stack, .status-stack, .mobile-card { display:flex; flex-direction:column; gap:5px; }
.branch-stack span { height:8px; border-radius:99px; background:#c8d9ea; }
.branch-stack span:first-child { width:78%; background:#6b9bce; }
.status-stack span { padding:4px 5px; border-radius:5px; background:#fff; color:#326394; font-size:.45rem; font-weight:800; text-align:center; }
.mobile-card { height:61px; padding:9px 6px; border:2px solid #7ea5cd; border-radius:9px; background:#fff; }
.mobile-card i { display:block; height:5px; border-radius:99px; background:#c7d8e9; }
.mobile-card i:last-child { margin-top:auto; background:#5f95cb; }
.loan-flow { display:flex; align-items:center; justify-content:center; gap:6px; height:55px; padding:8px 10px 2px; }
.loan-flow > span { width:42px; padding:7px; border:1px solid #d5e1ed; border-radius:7px; background:#fff; }
.loan-flow i, .loan-flow b { display:block; height:5px; border-radius:99px; background:#7ca4cc; }
.loan-flow b { width:72%; margin-top:6px; background:#c6d7e8; }
.loan-flow em { color:#5886b3; font-size:.7rem; font-style:normal; }
.loan-status { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; padding:5px 10px 10px; }
.loan-status span { height:14px; border-radius:5px; background:#e4edf7; }
.loan-status span:nth-child(2) { background:#dcefe5; }
.data-visual { display:flex; align-items:center; justify-content:center; gap:9px; padding:14px; }
.data-visual > b { color:#638eb8; font-size:.8rem; }
.data-node { width:65px; padding:10px 8px; border:1px solid #cdddeb; border-radius:8px; background:#fff; }
.data-node span { display:block; margin-bottom:8px; color:#315f8d; font-size:.62rem; font-weight:800; text-align:center; }
.data-node i { display:block; height:5px; margin-top:5px; border-radius:99px; background:#bfd2e5; }
.excel-node { border-color:#c8dfd0; }
.excel-node span { color:#286143; }
.excel-node i { background:#c5ddcd; }
.data-process { display:flex; gap:3px; align-items:flex-end; width:32px; height:42px; padding:6px; border-radius:7px; background:#e5eff9; }
.data-process i { width:6px; height:42%; border-radius:3px 3px 0 0; background:#86acd2; }
.data-process i:nth-child(2) { height:72%; }.data-process i:nth-child(3) { height:100%; background:#3979b7; }
.project-tags { display:flex; flex-wrap:wrap; gap:6px; list-style:none; margin-top:15px; }
.project-tags li { padding:5px 8px; border-radius:999px; background:#eef5ff; color:#0c447c; font-size:.64rem; font-weight:700; }
.attendance-live-panel { display:grid; grid-template-columns:minmax(250px,.78fr) minmax(0,1.22fr); gap:24px; align-items:center; margin-top:20px; padding:22px; border:1px solid #d9e5f0; border-radius:20px; background:linear-gradient(135deg,#f8fbff 0%,#eef5ff 100%); box-shadow:0 8px 28px rgba(5,56,101,.08); }
.attendance-live-copy { min-width:0; }
.attendance-live-copy h3 { margin:8px 0 11px; color:#102b45; font-size:1.42rem; line-height:1.25; }
.attendance-live-copy > p { max-width:340px; color:#52677b; font-size:.92rem; line-height:1.7; }
.attendance-live-ui { min-width:0; overflow:hidden; border:1px solid #cbdbe9; border-radius:16px; background:#f5f9fd; box-shadow:0 12px 30px rgba(5,53,93,.12); color:#18344e; }
.attendance-live-topbar { display:flex; align-items:center; justify-content:space-between; min-height:43px; padding:9px 13px; border-bottom:1px solid #dbe6f0; background:#fff; }
.attendance-live-topbar > div { display:flex; align-items:center; gap:8px; min-width:0; }
.attendance-live-topbar strong { font-size:.78rem; }
.attendance-live-mark { width:9px; height:9px; border:2px solid #8fb4d6; border-radius:50%; box-shadow:inset 0 0 0 2px #fff; background:#176eb5; }
.attendance-live-today { padding:4px 8px; border:1px solid #d5e4f1; border-radius:99px; background:#f5f9fd; color:#3e678b; font-size:.63rem; font-weight:750; }
.attendance-live-progress { height:3px; background:#e8f0f7; }
.attendance-live-progress span { display:block; width:100%; height:100%; transform-origin:left; background:linear-gradient(90deg,#2879bf,#2f9d78); }
.attendance-live-body { padding:12px; }
.attendance-live-toolbar { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:10px; }
.attendance-ui-label { display:block; margin-bottom:5px; color:#647b90; font-size:.6rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
.attendance-branches { display:flex; flex-wrap:wrap; gap:5px; }
.attendance-branch { padding:5px 7px; border:1px solid #d6e2ed; border-radius:7px; background:#fff; color:#47637d; font-size:.61rem; font-weight:750; white-space:nowrap; }
.attendance-branch.is-selected { border-color:#4d8fc7; background:#eaf4fe; color:#0e568f; }
.attendance-live-toolbar > p { max-width:150px; color:#315f84; font-size:.64rem; font-weight:750; line-height:1.4; text-align:right; }
.attendance-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; margin-bottom:9px; }
.attendance-summary-card { position:relative; display:flex; align-items:center; justify-content:space-between; gap:5px; min-width:0; padding:8px; overflow:hidden; border:1px solid #dce7f0; border-radius:8px; background:#fff; }
.attendance-summary-card::before { content:""; position:absolute; inset:0 auto 0 0; width:3px; background:#438bc5; }
.attendance-summary-card.is-late::before { background:#d89435; }.attendance-summary-card.is-not-in::before { background:#a8b4c0; }.attendance-summary-card.is-leave::before { background:#746fb4; }
.attendance-summary-card span { min-width:0; color:#657789; font-size:.6rem; font-weight:700; line-height:1.25; }
.attendance-summary-card strong { color:#173b5c; font-size:.87rem; }
.attendance-live-content { display:grid; grid-template-columns:minmax(0,1.42fr) minmax(158px,.78fr); gap:8px; align-items:stretch; }
.attendance-roster { width:100%; overflow:hidden; border-collapse:separate; border-spacing:0; border:1px solid #dce6ef; border-radius:9px; background:#fff; font-size:.64rem; }
.attendance-roster caption { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.attendance-roster th { padding:7px 6px; border-bottom:1px solid #e2eaf1; background:#f2f7fb; color:#61778c; font-size:.58rem; letter-spacing:.03em; text-align:left; text-transform:uppercase; }
.attendance-roster td { padding:7px 6px; border-bottom:1px solid #edf2f6; color:#496177; white-space:nowrap; }
.attendance-roster tbody tr:last-child td { border-bottom:0; }
.attendance-roster td:first-child { color:#1c3f5f; font-weight:750; }
.attendance-status { display:inline-flex; align-items:center; justify-content:center; min-width:36px; padding:3px 5px; border-radius:99px; font-size:.57rem; font-weight:850; letter-spacing:.03em; }
.attendance-status.is-in { background:#e4f4ed; color:#1d7658; }.attendance-status.is-late { background:#fff0dc; color:#9a5b12; }.attendance-status.is-out { background:#edf1f5; color:#5c6c7a; }
.attendance-detail { min-width:0; padding:9px; border:1px solid #d8e4ee; border-radius:9px; background:#fff; }
.attendance-detail-head, .attendance-detail-head > div { display:flex; align-items:center; justify-content:space-between; gap:7px; }
.attendance-detail-head > div > span:last-child { display:flex; flex-direction:column; min-width:0; }
.attendance-detail-head small { color:#788b9c; font-size:.58rem; }.attendance-detail-head strong { color:#173b5c; font-size:.7rem; }
.attendance-avatar { display:grid; place-items:center; width:26px; height:26px; border-radius:8px; background:#e7f2fc; color:#1765a4; font-size:.58rem; font-weight:850; }
.attendance-detail dl { display:grid; gap:5px; margin-top:8px; }
.attendance-detail-field { padding:6px 7px; border:1px solid #e0e9f1; border-radius:7px; background:#f9fbfd; }
.attendance-detail-field dt { color:#718495; font-size:.58rem; font-weight:700; }.attendance-detail-field dd { margin-top:2px; color:#244966; font-size:.65rem; font-weight:800; }
.attendance-detail-field.is-gps dd { color:#247757; }
.attendance-live-ui.motion-ready:not(.is-running):not(.is-complete) .attendance-branch,
.attendance-live-ui.motion-ready:not(.is-running):not(.is-complete) .attendance-record,
.attendance-live-ui.motion-ready:not(.is-running):not(.is-complete) .attendance-detail-field,
.attendance-live-ui.motion-ready:not(.is-running):not(.is-complete) .attendance-summary-card { opacity:.28; transform:translateY(5px); }
.attendance-live-ui.motion-ready:not(.is-running):not(.is-complete) .attendance-live-progress span { transform:scaleX(0); }
.attendance-live-ui.is-running .attendance-branch { animation:attendance-live-activate .5s ease both; }
.attendance-live-ui.is-running .attendance-branch:nth-child(1) { animation-delay:.2s; }.attendance-live-ui.is-running .attendance-branch:nth-child(2) { animation-delay:.65s; }.attendance-live-ui.is-running .attendance-branch:nth-child(3) { animation-delay:1.1s; }.attendance-live-ui.is-running .attendance-branch:nth-child(4) { animation-delay:1.55s; }
.attendance-live-ui.is-running .attendance-record { animation:attendance-live-reveal .52s ease both; }
.attendance-live-ui.is-running .attendance-record:nth-child(1) { animation-delay:2.15s; }.attendance-live-ui.is-running .attendance-record:nth-child(2) { animation-delay:2.8s; }.attendance-live-ui.is-running .attendance-record:nth-child(3) { animation-delay:3.45s; }.attendance-live-ui.is-running .attendance-record:nth-child(4) { animation-delay:4.1s; }
.attendance-live-ui.is-running .attendance-detail-field { animation:attendance-live-focus .65s ease both; }
.attendance-live-ui.is-running .attendance-detail-field:nth-child(1) { animation-delay:5s; }.attendance-live-ui.is-running .attendance-detail-field:nth-child(2) { animation-delay:5.75s; }.attendance-live-ui.is-running .attendance-detail-field:nth-child(3) { animation-delay:6.5s; }
.attendance-live-ui.is-running .attendance-summary-card { animation:attendance-live-reveal .5s ease both; }
.attendance-live-ui.is-running .attendance-summary-card:nth-child(1) { animation-delay:7.5s; }.attendance-live-ui.is-running .attendance-summary-card:nth-child(2) { animation-delay:7.95s; }.attendance-live-ui.is-running .attendance-summary-card:nth-child(3) { animation-delay:8.4s; }.attendance-live-ui.is-running .attendance-summary-card:nth-child(4) { animation-delay:8.85s; }
.attendance-live-ui.is-running .attendance-live-progress span { animation:attendance-live-progress 10.6s linear both; }
.attendance-live-ui.is-paused * { animation-play-state:paused !important; }
.attendance-live-ui.is-complete .attendance-branch, .attendance-live-ui.is-complete .attendance-record, .attendance-live-ui.is-complete .attendance-detail-field, .attendance-live-ui.is-complete .attendance-summary-card { opacity:1; transform:none; }
.attendance-live-ui.is-complete .attendance-live-progress span { transform:scaleX(1); }
@keyframes attendance-live-activate { 0% { opacity:.28; transform:translateY(5px); } 65% { opacity:1; transform:none; border-color:#4d8fc7; box-shadow:0 0 0 2px rgba(77,143,199,.12); } 100% { opacity:1; transform:none; } }
@keyframes attendance-live-reveal { from { opacity:.28; transform:translateY(6px); } to { opacity:1; transform:none; } }
@keyframes attendance-live-focus { 0% { opacity:.28; transform:translateY(5px); } 65% { opacity:1; transform:none; border-color:#77a8d0; background:#edf6fd; } 100% { opacity:1; transform:none; } }
@keyframes attendance-live-progress { from { transform:scaleX(0); } to { transform:scaleX(1); } }
.product-suite-section { margin-top:42px; padding:32px 0 2px; border-top:1px solid #e2e8ef; scroll-margin-top:20px; }
.product-suite-section > .section-title { margin:6px 0 12px; padding-top:0; border-top:0; }
.product-suite-section > .section-intro { margin:0 0 20px; }
.product-suite-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.product-suite-card { display:flex; flex-direction:column; min-width:0; overflow:hidden; border:1px solid #dce5ee; border-radius:18px; background:#fff; box-shadow:0 5px 22px rgba(7,46,80,.065); transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease; }
.product-suite-logo-frame { position:relative; height:205px; padding:0; overflow:hidden; border-bottom:1px solid #e1e9f1; background:linear-gradient(145deg,#f8fbfe,#f1f6fb); }
.product-suite-logo-frame img { position:absolute; inset:24px 28px; display:block; width:calc(100% - 56px); height:calc(100% - 48px); object-fit:contain; }
.product-suite-card-body { display:flex; flex:1; flex-direction:column; padding:21px 22px 20px; }
.product-suite-card h3 { margin:0; color:#102b45; font-size:1.38rem; line-height:1.25; }
.product-suite-subtitle { margin:6px 0 12px; color:#1d67a6; font-size:.76rem; font-weight:800; letter-spacing:.035em; line-height:1.5; }
.product-suite-description { flex:1; min-height:3.4em; color:#53687b; font-size:.86rem; line-height:1.7; }
.product-suite-tags { display:flex; flex-wrap:wrap; gap:7px; list-style:none; margin-top:17px; }
.product-suite-tags li { padding:6px 9px; border:1px solid #c9deef; border-radius:999px; background:#edf6ff; color:#0f568f; font-size:.67rem; font-weight:750; line-height:1.25; }
.product-suite-motion-ready:not(.product-suite-motion-complete) > .visual-eyebrow,
.product-suite-motion-ready:not(.product-suite-motion-complete) > .section-title,
.product-suite-motion-ready:not(.product-suite-motion-complete) > .section-intro { opacity:0; transform:translateY(8px); }
.product-suite-motion-running > .visual-eyebrow { animation:product-suite-copy-reveal .3s ease-out both; }
.product-suite-motion-running > .section-title { animation:product-suite-copy-reveal .33s .12s ease-out both; }
.product-suite-motion-running > .section-intro { animation:product-suite-copy-reveal .33s .22s ease-out both; }
.product-suite-motion-ready .product-suite-card:not(.product-card-motion-running):not(.product-card-motion-complete) { opacity:0; transform:translateY(10px); }
.product-suite-motion-ready .product-suite-card:not(.product-card-motion-running):not(.product-card-motion-complete) .product-suite-logo-frame img { opacity:0; transform:translateY(5px); }
.product-suite-motion-ready .product-suite-card:not(.product-card-motion-running):not(.product-card-motion-complete) .product-suite-tags li { opacity:.72; transform:translateY(2px); border-color:#dce8f3; background:#f4f8fc; color:#47708f; }
.product-card-motion-running { animation:product-suite-card-reveal .4s var(--product-card-delay,.35s) ease-out both; }
.product-card-motion-running .product-suite-logo-frame img { animation:product-suite-logo-reveal .35s calc(var(--product-card-delay,.35s) + .1s) ease-out both; }
.product-suite-card[data-product-card="hrgo"] { --product-card-delay:.35s; --product-tag-1:.95s; --product-tag-2:1.25s; --product-tag-3:1.55s; }
.product-suite-card[data-product-card="hpgo"] { --product-card-delay:.48s; --product-tag-1:1.15s; --product-tag-2:1.45s; --product-tag-3:1.75s; }
.product-card-motion-running .product-suite-tags li { animation:product-suite-tag-activate .3s var(--product-tag-1) ease-out both; }
.product-card-motion-running .product-suite-tags li:nth-child(2) { animation-delay:var(--product-tag-2); }
.product-card-motion-running .product-suite-tags li:nth-child(3) { animation-delay:var(--product-tag-3); }
.product-suite-motion-paused,
.product-suite-motion-paused * { animation-play-state:paused !important; }
@keyframes product-suite-copy-reveal { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@keyframes product-suite-card-reveal { from { opacity:0; transform:translateY(10px); border-color:#e5ebf1; box-shadow:0 2px 10px rgba(7,46,80,.035); } to { opacity:1; transform:none; border-color:#dce5ee; box-shadow:0 5px 22px rgba(7,46,80,.065); } }
@keyframes product-suite-logo-reveal { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:none; } }
@keyframes product-suite-tag-activate { from { opacity:.72; transform:translateY(2px); border-color:#dce8f3; background:#f4f8fc; color:#47708f; } to { opacity:1; transform:none; border-color:#c9deef; background:#edf6ff; color:#0f568f; } }
.projects-section + #about-title, .product-suite-section + #about-title { margin-top:42px; }
.about-box { border-top:3px solid var(--primary); }
.about-box > h2 { max-width:760px; }
.about-box > p { max-width:900px; font-size:1.03rem; }
.seo-copy { max-width:940px; margin:20px auto; padding:22px 26px; background:#f7f9fb; border-color:#e6ebf0; box-shadow:none; }
.seo-copy h3 { color:#273746; font-size:1.02rem; }
.seo-copy p { color:#65717c; font-size:.88rem; line-height:1.7; }
.seo-kicker { margin-bottom:8px !important; color:#315f8d !important; font-size:.68rem !important; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
.offering-group { margin:0 0 22px; padding:22px; border:1px solid #e4e9ef; border-radius:18px; }
.product-group { background:#f8faff; border-top:3px solid #8ab0d7; }
.service-group { background:#f8fbf9; border-top:3px solid #8dbba1; }
.offering-kicker { margin:0 0 5px; color:#617080; font-size:.65rem; font-weight:800; letter-spacing:.08em; }
.offering-title { margin:0 0 17px; color:#111; font-size:1.18rem; }
.product-group .offering-title { color:#0c447c; }
.service-group .offering-title { color:#286143; }
.contact-prompt { max-width:760px; margin-top:50px; padding-top:20px; border-top:2px solid #eee; }
.contact-prompt .section-title { margin:5px 0 10px; padding-top:0; border-top:0; font-size:1.65rem; }
.contact-prompt > p:last-child { color:var(--muted); font-size:.94rem; line-height:1.7; }
.contact-kicker { color:var(--primary); font-size:.68rem; font-weight:800; letter-spacing:.08em; }
@media(hover:hover) and (pointer:fine) {
  .project-card:hover { transform:translateY(-2px); border-color:#b9cee3; box-shadow:0 7px 24px rgba(0,0,0,.075); }
  .product-suite-card:hover { transform:translateY(-2px); border-color:#b6cee3; box-shadow:0 9px 28px rgba(7,46,80,.1); }
}
@media(min-width:769px) and (max-width:900px) {
  .project-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .project-card:last-child { grid-column:1/-1; max-width:540px; }
  .attendance-live-panel { grid-template-columns:1fr; }
  .attendance-live-copy > p { max-width:620px; }
  .product-suite-logo-frame { height:165px; }
  .product-suite-logo-frame img { inset:20px; width:calc(100% - 40px); height:calc(100% - 40px); }
  .product-suite-card-body { padding:18px; }
}
@media(max-width:768px) {
  .built-card .app-body { min-height:0; }
  .capability-points { gap:6px; }
  .project-grid { grid-template-columns:1fr; gap:14px; }
  .project-card:last-child { grid-column:auto; max-width:none; }
  .projects-section { margin-top:30px; padding-top:22px; }
  .attendance-live-panel { grid-template-columns:1fr; gap:16px; margin-top:16px; padding:16px; }
  .attendance-live-copy h3 { font-size:1.2rem; }
  .attendance-live-copy > p { max-width:none; }
  .attendance-live-ui { border-radius:13px; }
  .attendance-live-body { padding:11px; }
  .attendance-live-toolbar { display:block; }
  .attendance-live-toolbar > p { max-width:none; margin-top:7px; text-align:left; }
  .attendance-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .attendance-summary-card { padding:8px 10px; }.attendance-summary-card span { font-size:.62rem; }.attendance-summary-card strong { font-size:.92rem; }
  .attendance-live-content { grid-template-columns:1fr; }
  .attendance-roster thead { display:none; }
  .attendance-roster, .attendance-roster tbody { display:block; border:0; background:transparent; }
  .attendance-roster tbody { display:grid; gap:6px; }
  .attendance-roster tr { display:grid; grid-template-columns:1fr auto; gap:3px 10px; padding:8px 9px; border:1px solid #dde7ef; border-radius:8px; background:#fff; }
  .attendance-roster td { padding:0; border:0 !important; white-space:normal; }
  .attendance-roster td:nth-child(1) { grid-column:1; grid-row:1; font-size:.73rem; }.attendance-roster td:nth-child(2) { grid-column:1; grid-row:2; font-size:.64rem; }.attendance-roster td:nth-child(3) { grid-column:2; grid-row:2; color:#61778c; font-size:.64rem; text-align:right; }.attendance-roster td:nth-child(4) { grid-column:2; grid-row:1; text-align:right; }
  .attendance-record-extra { display:none !important; }
  .attendance-detail { padding:10px; }
  .attendance-detail dl { grid-template-columns:1fr 1fr; }
  .attendance-detail-field { padding:7px 8px; }.attendance-detail-field dt { font-size:.59rem; }.attendance-detail-field dd { font-size:.69rem; }
  .attendance-detail-field.is-gps { grid-column:1/-1; }
  .attendance-live-ui.is-running .attendance-summary-card:nth-child(1) { animation-delay:.25s; }.attendance-live-ui.is-running .attendance-summary-card:nth-child(2) { animation-delay:.6s; }.attendance-live-ui.is-running .attendance-summary-card:nth-child(3) { animation-delay:.95s; }.attendance-live-ui.is-running .attendance-summary-card:nth-child(4) { animation-delay:1.3s; }
  .attendance-live-ui.is-running .attendance-branch:nth-child(1) { animation-delay:1.55s; }.attendance-live-ui.is-running .attendance-branch:nth-child(2) { animation-delay:1.85s; }.attendance-live-ui.is-running .attendance-branch:nth-child(3) { animation-delay:2.15s; }.attendance-live-ui.is-running .attendance-branch:nth-child(4) { animation-delay:2.45s; }
  .attendance-live-ui.is-running .attendance-record:nth-child(1) { animation-delay:2.8s; }.attendance-live-ui.is-running .attendance-record:nth-child(2) { animation-delay:3.35s; }.attendance-live-ui.is-running .attendance-record:nth-child(3) { animation-delay:3.9s; }
  .attendance-live-ui.is-running .attendance-detail-field:nth-child(1) { animation-delay:4.65s; }.attendance-live-ui.is-running .attendance-detail-field:nth-child(2) { animation-delay:5.3s; }.attendance-live-ui.is-running .attendance-detail-field:nth-child(3) { animation-delay:5.95s; }
  .attendance-live-ui.is-running .attendance-live-progress span { animation-duration:8.8s; }
  .product-suite-section { margin-top:34px; padding-top:26px; }
  .product-suite-grid { grid-template-columns:1fr; gap:14px; }
  .product-suite-logo-frame { height:178px; }
  .product-suite-logo-frame img { inset:20px 24px; width:calc(100% - 48px); height:calc(100% - 40px); }
  .product-suite-card-body { padding:18px; }
  .product-suite-description { min-height:5.1em; }
  .product-suite-card[data-product-card="hrgo"] { --product-card-delay:.25s; --product-tag-1:.62s; --product-tag-2:.9s; --product-tag-3:1.18s; }
  .product-suite-card[data-product-card="hpgo"] { --product-card-delay:.08s; --product-tag-1:.42s; --product-tag-2:.7s; --product-tag-3:.98s; }
  .projects-section + #about-title, .product-suite-section + #about-title { margin-top:42px; }
  .offering-group { padding:16px; }
  .contact-prompt { margin-top:42px; }
  footer { padding-bottom:84px; }
}
@media(max-width:390px) {
  .project-card { padding:15px; }
  .project-visual { height:104px; }
  .built-copy p { min-height:0; }
  .offering-group { margin-left:-4px; margin-right:-4px; padding:13px; }
  .attendance-live-panel { padding:13px; }
  .attendance-live-topbar { padding:8px 10px; }
  .attendance-live-body { padding:9px; }
  .attendance-branch { padding:5px 6px; font-size:.58rem; }
  .product-suite-logo-frame { height:150px; }
  .product-suite-logo-frame img { inset:16px 18px; width:calc(100% - 36px); height:calc(100% - 32px); }
  .product-suite-card-body { padding:16px; }
  .product-suite-card h3 { font-size:1.24rem; }
  .product-suite-subtitle { font-size:.7rem; }
}
@media(prefers-reduced-motion:reduce) {
  .attendance-live-ui.motion-ready .attendance-branch,
  .attendance-live-ui.motion-ready .attendance-record,
  .attendance-live-ui.motion-ready .attendance-detail-field,
  .attendance-live-ui.motion-ready .attendance-summary-card { opacity:1 !important; transform:none !important; }
  .attendance-live-ui.motion-ready .attendance-live-progress span { transform:scaleX(1) !important; }
  .product-suite-section, .product-suite-section *, .product-suite-card, .product-suite-logo-frame img, .product-suite-tags li { opacity:1 !important; transform:none !important; animation:none !important; }
}