:root {
  --ink: #152421;
  --forest: #17382f;
  --forest-2: #17382f;
  --lime: #d8ef67;
  --paper: #f3f4ef;
  --white: #fff;
  --line: #d7ddd5;
  --muted: #68736c;
  --orange: #c28a6b;
  --radius: 2px;
  --wrap: 1200px;
  --font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; background: var(--paper); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.9; }
body::before { position: fixed; z-index: 100; top: 0; left: 0; width: 100%; height: 2px; background: #a7b996; content: ""; transform: scaleX(var(--scroll-progress, 0)); transform-origin: left center; pointer-events: none; }
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
img, video { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--forest); outline-offset: 3px; }
.wrap { width: min(calc(100% - 80px), var(--wrap)); margin-inline: auto; }
.skip-link { position: fixed; z-index: 100; top: 0; left: 16px; padding: 8px 14px; background: var(--lime); color: var(--forest); transform: translateY(-120%); transition: transform .24s ease; }
.skip-link:focus { transform: translateY(0); }
.site-header { position: sticky; z-index: 50; top: 0; height: 76px; border-bottom: 1px solid transparent; background: rgba(255,255,255,.94); backdrop-filter: blur(14px); }
.site-header.scrolled { border-color: var(--line); }
.header-inner { display: flex; height: 100%; align-items: center; gap: 36px; }
.brand { display: inline-flex; flex: none; align-items: center; gap: 10px; }
.brand-mark { display: inline-flex; align-items: end; gap: 3px; height: 30px; width: 29px; }
.brand-mark span { display: block; width: 6px; background: var(--forest); }
.brand-mark span:nth-child(1) { height: 18px; }
.brand-mark span:nth-child(2) { height: 27px; background: #4b8973; }
.brand-mark span:nth-child(3) { height: 12px; background: var(--orange); }
.brand-type strong, .brand-type small { display: block; line-height: 1.1; }
.brand-type strong { font-size: 16px; letter-spacing: .02em; }
.brand-type small { margin-top: 4px; color: var(--muted); font-size: 8px; letter-spacing: .12em; }
.desktop-nav { display: flex; align-items: center; gap: 24px; margin-left: auto; }
.desktop-nav > a, .nav-dropdown > summary { padding: 25px 0; color: #334a42; font-size: 13px; font-weight: 600; }
.desktop-nav a:hover, .nav-dropdown summary:hover { color: var(--forest-2); }
.nav-dropdown { position: relative; }
.nav-dropdown summary { list-style: none; cursor: pointer; }
.nav-dropdown summary::-webkit-details-marker { display: none; }
.nav-dropdown summary::after { content: "⌄"; margin-left: 5px; color: var(--muted); font-size: 11px; }
.nav-dropdown[open] .nav-menu { display: grid; }
.nav-menu { position: absolute; top: 68px; left: -18px; display: none; width: 250px; gap: 2px; padding: 8px; border: 1px solid var(--line); background: var(--white); box-shadow: 0 18px 34px rgba(20,43,34,.11); }
.nav-menu a { padding: 8px 10px; font-size: 12px; line-height: 1.45; }
.nav-menu a:hover { background: var(--paper); }
.header-cta { display: inline-flex; align-items: center; gap: 7px; margin-left: 6px; padding: 9px 15px; background: var(--forest); color: var(--white); font-size: 12px; font-weight: 700; }
.header-cta:hover { background: var(--forest-2); transform: translateY(-2px); }
.icon-button, .menu-toggle { display: none; border: 0; background: transparent; color: var(--forest); }
.mobile-nav { display: none; }
.button { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; gap: 9px; padding: 10px 18px; border: 1px solid transparent; border-radius: var(--radius); font-size: 13px; font-weight: 700; transition: transform .28s ease, background .28s ease, color .28s ease, border-color .28s ease; }
.button:hover { transform: translateY(-2px); }
.button.magnetic-button, .header-cta.magnetic-button { transition: background .28s ease, color .28s ease, border-color .28s ease; }
.button.magnetic-button:hover, .header-cta.magnetic-button:hover { transform: none; }
.button-dark { background: var(--forest); color: var(--white); }
.button-dark:hover { background: var(--forest-2); }
.button-lime { background: var(--lime); color: var(--forest); }
.button-lime:hover { background: #e5f58c; }
.button-outline { border-color: var(--forest); color: var(--forest); }
.button-outline:hover { background: var(--forest); color: var(--white); }
.button-outline-light { border-color: rgba(255,255,255,.5); color: var(--white); }
.button-outline-light:hover { border-color: var(--lime); color: var(--lime); }
.button-small { min-height: 38px; padding: 7px 13px; font-size: 12px; }
.eyebrow { margin: 0 0 15px; color: #477063; font-size: 11px; font-weight: 700; letter-spacing: 2px; line-height: 1.4; text-transform: uppercase; }
.eyebrow.light { color: var(--lime); }
h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3 { line-height: 1.24; letter-spacing: 0; text-wrap: balance; }
h1 { margin-bottom: 0; font-size: clamp(39px, 5.4vw, 62px); font-weight: 650; }
h2 { margin-bottom: 0; font-size: clamp(30px, 3.7vw, 46px); font-weight: 650; }
h3 { margin-bottom: 10px; font-size: 21px; font-weight: 650; }
.section { padding: 104px 0; }
.section-paper { background: var(--paper); }
.section-white { background: var(--white); }
.section-dark { background: var(--forest); color: var(--white); }
.section-dark .eyebrow { color: var(--lime); }
.section-dark .muted { color: #bed0c5; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 50px; margin-bottom: 52px; }
.section-heading > div { max-width: 730px; }
.heading-aside { max-width: 380px; margin-bottom: 5px; color: var(--muted); font-size: 15px; line-height: 1.85; }
.section-dark .heading-aside { color: #bed0c5; }
.breadcrumbs { padding-top: 30px; color: var(--muted); font-size: 12px; }
.breadcrumbs a:hover { color: var(--forest); }
.breadcrumbs span { margin-inline: 6px; color: #9ba8a1; }
.page-hero { padding: 74px 0 88px; background: linear-gradient(90deg, rgba(23,56,47,.99) 0%, rgba(23,56,47,.94) 43%, rgba(23,56,47,.65) 100%), url('../studio-hero.png') 63% 53% / cover no-repeat; color: var(--white); }
.page-hero h1 { max-width: 800px; margin-top: 19px; }
.page-hero .lead { max-width: 690px; margin: 25px 0 0; color: #ccddd1; font-size: 18px; line-height: 1.8; }
.page-hero .hero-actions { margin-top: 32px; }
.hero { position: relative; min-height: 680px; overflow: hidden; background: var(--forest); color: var(--white); isolation: isolate; }
.hero-photo, .hero-video, .hero-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-photo, .hero-video { object-fit: cover; }
.hero-photo { z-index: -3; }
.hero-video { z-index: -2; opacity: .16; mix-blend-mode: screen; filter: saturate(.65) contrast(.9); }
.hero-shade { z-index: -1; background: linear-gradient(90deg, rgba(8,31,24,.92), rgba(8,31,24,.62) 42%, rgba(8,31,24,.18)), linear-gradient(0deg, rgba(8,31,24,.55), transparent 45%); }
.hero-content { display: flex; min-height: 680px; flex-direction: column; justify-content: space-between; padding-top: 150px; padding-bottom: 34px; }
.hero-copy { max-width: 700px; }
.hero h1 { color: #f4f6ef; }
.hero-lead { margin: 14px 0 0; color: #f4f6ef; font-size: clamp(26px, 3.4vw, 39px); font-weight: 600; line-height: 1.35; }
.hero-description { max-width: 510px; margin: 21px 0 0; color: rgba(255,255,255,.78); font-size: 16px; line-height: 1.95; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.hero-caption { display: flex; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.3); padding-top: 13px; color: rgba(255,255,255,.72); font-size: 12px; }
.hero-motion-toggle { position: absolute; right: 30px; top: 106px; z-index: 3; display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid rgba(255,255,255,.45); color: var(--white); }
.hero-motion-toggle:hover { border-color: var(--lime); color: var(--lime); }
.hero-motion-toggle svg { width: 17px; height: 17px; }
.intro-band { background: var(--forest); color: var(--white); }
.intro-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); align-items: stretch; }
.intro-statement { padding: 29px 28px 29px 0; font-size: 20px; line-height: 1.35; }
.intro-statement strong { color: #e0e6d0; }
.intro-item { display: grid; grid-template-columns: 22px 1fr; gap: 4px 12px; padding: 29px 20px; border-left: 1px solid rgba(255,255,255,.16); }
.intro-item svg { grid-row: span 2; width: 19px; color: var(--lime); }
.intro-item span { color: #9fc0ad; font-size: 11px; }
.intro-item strong { font-size: 13px; font-weight: 600; line-height: 1.55; }
.service-list { border-top: 1px solid var(--line); }
.service-row { display: grid; grid-template-columns: 40px 44px minmax(0,1fr) 42px; align-items: start; gap: 20px; padding: 29px 0; border-bottom: 1px solid var(--line); }
.service-no { color: #4b8067; font-size: 12px; font-weight: 700; letter-spacing: 1px; }
.service-icon { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid #b9ccc0; color: var(--forest-2); }
.service-icon svg { width: 18px; }
.service-main p { max-width: 720px; margin-bottom: 13px; color: var(--muted); font-size: 14px; line-height: 1.75; }
.service-tags, .tag-list, .client-tags { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.service-tags span, .tag-list span, .client-tags span { padding: 3px 8px; background: #e7eee8; color: #517263; font-size: 11px; line-height: 1.45; }
.service-link { display: grid; width: 37px; height: 37px; place-items: center; border: 1px solid var(--line); color: var(--forest); }
.service-link:hover { background: var(--forest); color: var(--lime); }
.service-link svg { width: 17px; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 14px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat { min-height: 150px; padding: 24px 22px 21px 0; }
.stat + .stat { border-left: 1px solid var(--line); padding-left: 22px; }
.stat b { display: block; color: var(--forest); font-size: clamp(42px, 5vw, 62px); font-weight: 600; letter-spacing: -.07em; line-height: 1; }
.stat b em { margin-left: 5px; font-size: 16px; font-style: normal; letter-spacing: 0; }
.stat span { display: block; margin-top: 16px; color: var(--muted); font-size: 12px; }
.data-note { margin: 0; color: var(--muted); font-size: 11px; }
.strength-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 66px; margin-top: 50px; }
.strength-panel { padding-top: 24px; border-top: 1px solid var(--line); }
.strength-panel h3 { font-size: 18px; }
.cred-list { margin: 0; padding-left: 18px; color: var(--muted); font-size: 14px; line-height: 2; }
.license-card { display: grid; grid-template-columns: 135px 1fr; align-items: center; gap: 20px; margin-top: 26px; padding: 15px; border: 1px solid var(--line); background: var(--white); }
.license-card img { width: 135px; height: 92px; object-fit: cover; }
.license-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.client-groups { display: grid; gap: 20px; }
.client-groups h4 { margin: 0 0 7px; color: #355c4c; font-size: 13px; }
.client-tags span { background: var(--white); border: 1px solid #dfe6df; }
.client-note { margin: 21px 0 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
.product-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.filter-button { min-height: 38px; padding: 7px 13px; border: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 12px; }
.filter-button:hover, .filter-button.active { border-color: var(--forest); background: var(--forest); color: var(--white); }
.product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.product-card { display: flex; min-height: 100%; flex-direction: column; border: 1px solid var(--line); background: var(--white); }
.case-card.case-tilt-card { display: block; overflow: visible; border: 0; background: transparent; }
.case-tilt-card > .atropos-scale, .case-tilt-card .atropos-rotate, .case-tilt-card .atropos-inner { height: 100%; }
.case-tilt-card .atropos-inner { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); background: var(--white); }
.product-visual { min-height: 230px; padding: 18px; background: #e7eee8; }
.product-body { display: flex; flex: 1; flex-direction: column; padding: 22px; }
.product-meta { display: flex; justify-content: space-between; color: #52816d; font-size: 10px; letter-spacing: .8px; text-transform: uppercase; }
.product-body h3 { margin-top: 18px; }
.product-body p { min-height: 54px; margin: 0 0 16px; color: var(--muted); font-size: 13px; line-height: 1.75; }
.text-action { display: inline-flex; align-items: center; gap: 7px; width: fit-content; margin-top: auto; border: 0; background: transparent; color: var(--forest); font-size: 12px; font-weight: 700; }
.text-action:hover { color: #5e7f43; }
.text-action svg { width: 15px; }
.mini-browser, .mini-dashboard, .mini-kanban, .mini-ai { height: 194px; overflow: hidden; border: 1px solid #d0dbd1; background: var(--white); }
.mini-browser-top { display: flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-bottom: 1px solid #e2e9e3; color: #8da092; font-size: 8px; }
.mini-browser-top span { width: 5px; height: 5px; border-radius: 50%; background: #b8c7bb; }
.mini-browser-top b { margin-left: auto; font-size: 8px; font-weight: 500; }
.mini-site-body { padding: 13px; }
.mini-site-nav { display: flex; gap: 9px; align-items: center; }
.mini-site-nav b { color: var(--forest); font-size: 14px; }
.mini-site-nav i { width: 32px; height: 3px; background: #dbe5dc; }
.mini-site-hero { margin-top: 33px; }
.mini-site-hero small { color: #6a8c75; font-size: 7px; letter-spacing: 1px; }
.mini-site-hero strong { display: block; margin-top: 6px; color: var(--forest); font-size: 26px; line-height: 1; }
.mini-site-hero span { display: block; width: 59px; height: 5px; margin-top: 12px; background: var(--lime); }
.mini-site-lines { display: flex; gap: 5px; margin-top: 22px; }
.mini-site-lines i { width: 20%; height: 4px; background: #e1e9e1; }
.mini-dashboard { display: flex; background: #f7faf7; }
.mini-dashboard aside { display: flex; width: 32px; flex-direction: column; align-items: center; gap: 18px; padding-top: 12px; border-right: 1px solid #e0e8e0; color: #6e9580; }
.mini-dashboard aside b { color: var(--forest); font-size: 12px; }
.mini-dashboard aside i { width: 10px; height: 10px; border: 1px solid #b6caba; }
.mini-dashboard-main { flex: 1; padding: 16px; }
.mini-dash-head { display: flex; justify-content: space-between; color: #617d69; font-size: 9px; }
.mini-dash-head small { color: #5e8b62; font-size: 7px; }
.mini-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 14px; }
.mini-kpis div { padding: 7px; border: 1px solid #e4ece4; background: #fff; }
.mini-kpis small { display: block; color: #8c9d91; font-size: 6px; }
.mini-kpis b { display: block; margin-top: 6px; color: var(--forest); font-size: 16px; }
.mini-chart { display: flex; align-items: end; gap: 5px; height: 67px; margin-top: 18px; padding: 8px; border: 1px solid #e4ece4; background: #fff; }
.mini-chart i { flex: 1; background: #9abf8e; }
.mini-table { display: flex; gap: 5px; margin-top: 12px; }
.mini-table span { flex: 1; height: 6px; background: #dfe8df; }
.mini-kanban { padding: 14px; background: #f7faf7; }
.mini-kanban-head { display: flex; justify-content: space-between; color: var(--forest); font-size: 10px; }
.mini-kanban-head span { color: #849a8b; font-size: 8px; }
.mini-kanban-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 15px; }
.mini-kanban-cols > div { min-height: 130px; padding: 8px; background: #ecf1ec; }
.mini-kanban-cols small { color: #799082; font-size: 7px; }
.mini-kanban-cols span { display: block; min-height: 31px; margin-top: 8px; padding: 6px; border: 1px solid #e0e9e0; background: #fff; }
.mini-kanban-cols i { display: block; width: 70%; height: 3px; margin-top: 4px; background: #bccfbd; }
.mini-ai { padding: 16px; background: #f6faf6; }
.mini-ai-head { display: flex; align-items: center; gap: 7px; color: var(--forest); font-size: 10px; }
.mini-ai-symbol { display: grid; width: 19px; height: 19px; place-items: center; background: var(--forest); color: var(--lime); font-size: 11px; }
.mini-ai-head small { margin-left: auto; color: #809488; font-size: 7px; }
.mini-ai-prompt { width: fit-content; margin: 24px 0 13px auto; padding: 8px 10px; background: #e2eee3; color: #466351; font-size: 8px; }
.mini-ai-answer { display: flex; gap: 8px; align-items: flex-start; }
.mini-ai-answer > div { flex: 1; padding: 10px; border: 1px solid #e1e9e1; background: #fff; }
.mini-ai-answer i { display: block; width: 90%; height: 4px; margin-bottom: 6px; background: #c8d8c9; }
.mini-ai-answer i:nth-child(2) { width: 72%; }.mini-ai-answer i:nth-child(3) { width: 48%; }
.mini-ai-sources { display: flex; gap: 5px; margin-top: 20px; }.mini-ai-sources span { padding: 4px 6px; background: #e8f0e8; color: #598069; font-size: 7px; }
.showcase-layout { display: grid; grid-template-columns: .72fr 1.28fr; align-items: center; gap: 70px; }
.showcase-copy > p:not(.eyebrow) { max-width: 420px; margin: 22px 0 0; color: #c6d5cc; font-size: 14px; line-height: 1.85; }
.showcase-controls { display: grid; gap: 2px; margin-top: 32px; }
.showcase-tab { display: flex; align-items: center; gap: 12px; padding: 13px 0; border: 0; border-bottom: 1px solid rgba(255,255,255,.16); background: transparent; color: rgba(255,255,255,.5); text-align: left; font-size: 13px; }
.showcase-tab span { width: 23px; color: #7da28d; font-size: 10px; }.showcase-tab svg { margin-left: auto; width: 15px; opacity: 0; }.showcase-tab:hover, .showcase-tab.active { color: var(--white); }.showcase-tab.active span { color: var(--lime); }.showcase-tab.active svg { opacity: 1; color: var(--lime); }
.showcase-window { overflow: hidden; border: 1px solid rgba(255,255,255,.2); background: #f3f7f3; color: var(--ink); box-shadow: 0 25px 70px rgba(0,0,0,.24); }
.window-top { display: flex; height: 42px; align-items: center; justify-content: space-between; padding: 0 17px; border-bottom: 1px solid #e0e7e1; color: #87958c; font-size: 9px; }.window-dots { display: flex; gap: 5px; }.window-dots i { width: 6px; height: 6px; border-radius: 50%; background: #bfcbc1; }.window-status { color: #648d6e; }.window-status i { display: inline-block; width: 5px; height: 5px; margin-right: 4px; border-radius: 50%; background: #76aa7c; }
.window-body { display: flex; min-height: 430px; }.window-sidebar { display: flex; width: 48px; flex-direction: column; align-items: center; gap: 21px; padding: 17px 0; border-right: 1px solid #e0e7e1; color: #77a088; }.window-sidebar svg { width: 16px; }.sidebar-logo { color: var(--forest); font-size: 17px; font-weight: 800; }.sidebar-bottom { margin-top: auto; }
.demo-main { flex: 1; padding: 28px clamp(18px, 4vw, 43px); }.demo-head { display: flex; align-items: start; justify-content: space-between; }.demo-crumb, .demo-date { color: #85958a; font-size: 9px; }.demo-head h3 { margin: 5px 0 0; font-size: 24px; }.demo-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 30px; }.demo-stats > div { padding: 14px; border: 1px solid #e0e7e1; background: #fff; }.demo-stats span, .demo-stats small { display: block; color: #88968d; font-size: 9px; }.demo-stats strong { display: block; margin: 7px 0 4px; color: var(--forest); font-size: 28px; line-height: 1; }.demo-table-head { display: flex; justify-content: space-between; align-items: center; margin: 27px 0 8px; }.demo-table-head strong { font-size: 11px; }.demo-table-head span { color: #91a096; font-size: 8px; }.demo-table > div { display: grid; grid-template-columns: minmax(0,1fr) 72px 58px; align-items: center; gap: 6px; padding: 9px 5px; border-bottom: 1px solid #edf1ed; font-size: 9px; }.demo-table .demo-table-label { background: #f6f8f6; color: #849087; padding: 5px; }.demo-table b, .demo-table small { display: block; }.demo-table b { font-size: 9px; }.demo-table small { color: #89978a; font-size: 7px; }.demo-table em { justify-self: start; padding: 2px 5px; font-size: 8px; font-style: normal; }.status.blue { background: #e5eef6; color: #3474a4; }.status.green { background: #e7f2df; color: #4d8550; }.status.amber { background: #fff2e0; color: #a8772c; }
.demo-project-intro { margin-bottom: 13px; padding: 13px 15px; background: #eff5ef; }.demo-project-intro strong, .demo-project-intro span { display: block; }.demo-project-intro strong { font-size: 12px; }.demo-project-intro span { margin-top: 2px; color: #728474; font-size: 9px; }.demo-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }.demo-board > div { min-height: 208px; padding: 9px; background: #f5f7f5; }.demo-board h4 { display: flex; justify-content: space-between; margin: 0 0 9px; font-size: 9px; }.demo-board h4 span { color: #8da092; }.demo-board article { min-height: 75px; margin-bottom: 7px; padding: 8px; border: 1px solid #e6eae6; background: var(--white); }.demo-board b, .demo-board small, .demo-board article span { display: block; }.demo-board b { font-size: 9px; }.demo-board small { color: #849086; font-size: 7px; }.demo-board article span { margin-top: 10px; color: #488267; font-size: 7px; }
.demo-chat { min-height: 220px; padding: 17px; background: #f5f8f5; }.demo-chat-prompt { width: max-content; max-width: 100%; margin: 0 0 17px auto; padding: 10px 12px; background: #e7efea; font-size: 10px; }.demo-chat-reply { display: flex; max-width: 90%; gap: 10px; }.reply-icon { display: grid; flex: none; width: 24px; height: 24px; place-items: center; background: var(--forest); color: var(--lime); }.demo-chat-reply > div { padding: 13px; border: 1px solid #e4eae5; background: var(--white); }.demo-chat-reply strong { font-size: 9px; }.demo-chat-reply p { margin: 5px 0 9px; font-size: 10px; line-height: 1.7; }.demo-chat-reply small { color: #70917d; font-size: 8px; }.demo-chat-footer { display: flex; gap: 7px; margin-top: 11px; }.demo-chat-footer span { padding: 5px 8px; background: #eef3ee; color: #56816a; font-size: 8px; }
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.process-step { min-height: 238px; padding: 28px 22px 20px 0; }.process-step + .process-step { border-left: 1px solid var(--line); padding-left: 22px; }.process-step > span { color: #4b8067; font-size: 10px; font-weight: 700; letter-spacing: 1px; }.process-step > svg { display: block; width: 31px; height: 31px; margin: 27px 0 17px; color: #417c63; stroke-width: 1.5; }.process-step h3 { margin-bottom: 8px; font-size: 19px; }.process-step p { max-width: 220px; margin: 0; color: #637269; font-size: 12px; line-height: 1.8; }
.about-band { background: var(--forest); color: var(--white); }.about-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }.about-layout h2 { font-size: clamp(31px, 3.5vw, 47px); }.about-copy p { max-width: 570px; margin-bottom: 19px; color: #ccddd1; font-size: 14px; line-height: 2; }.about-copy .button { margin-top: 9px; }
.faq-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; }.faq-list { border-top: 1px solid var(--line); }.faq-list details { border-bottom: 1px solid var(--line); }.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 21px 2px; list-style: none; cursor: pointer; font-size: 15px; font-weight: 600; }.faq-list summary::-webkit-details-marker { display: none; }.faq-list summary svg { transition: transform .2s; }.faq-list details[open] summary svg { transform: rotate(45deg); }.faq-list p { margin: 0 25px 20px 2px; color: #66766b; font-size: 13px; line-height: 1.9; }
.contact-section { background: linear-gradient(90deg, rgba(243,244,239,.98), rgba(243,244,239,.91) 52%, rgba(243,244,239,.78)), url('../studio-hero.png') center 61% / cover no-repeat; }
.contact-layout { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 80px; }.contact-copy > p:not(.eyebrow) { max-width: 460px; margin: 21px 0 25px; color: #586c5e; font-size: 15px; line-height: 1.9; }.contact-points { display: flex; flex-direction: column; gap: 11px; }.contact-points span { display: flex; align-items: center; gap: 9px; color: #3d6350; font-size: 12px; font-weight: 600; }.contact-points svg { width: 16px; }.contact-card { padding: 27px; border: 1px solid #d1ddd0; background: var(--white); box-shadow: 0 18px 35px rgba(49,83,59,.05); }.contact-card-top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 20px; border-bottom: 1px solid #e8ede7; }.contact-card-top span { color: #56906f; font-size: 10px; font-weight: 700; letter-spacing: 1px; }.contact-card-top h3 { margin: 4px 0 0; font-size: 23px; }.contact-card-top > svg { width: 27px; color: #427d62; }.qr-area { display: flex; align-items: center; gap: 22px; padding: 24px 0; }.qr-crop { position: relative; flex: none; width: 190px; height: 190px; overflow: hidden; border: 1px solid #e8ebe8; background: var(--white); }.qr-crop img { position: absolute; width: 694px; height: 1500px; max-width: none; top: -862px; left: -445px; }.qr-info strong, .qr-info span { display: block; }.qr-info strong { font-size: 18px; }.qr-info span { margin: 3px 0 13px; color: #54725e; font-size: 12px; }.qr-info p { margin: 0 0 13px; color: #718077; font-size: 11px; line-height: 1.8; }.contact-card-bottom { display: flex; align-items: center; gap: 7px; padding-top: 15px; border-top: 1px solid #e8ede7; color: #849489; font-size: 10px; }.contact-card-bottom svg { width: 14px; }
.qr-crop { padding: 14px; }
.qr-crop img { position: static; display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.form-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-card button[disabled] { opacity: .65; cursor: wait; }
.qr-info a { display: inline-block; color: var(--forest-2); font-size: 12px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.qr-info a:hover, .qr-info a:focus-visible { color: #68942a; }
.form-card { padding: 28px; border: 1px solid var(--line); background: var(--white); }.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 17px; }.field { display: grid; gap: 6px; }.field-full { grid-column: 1 / -1; }.field label { color: var(--ink); font-size: 12px; font-weight: 700; }.field input, .field select, .field textarea { width: 100%; border: 1px solid #cbd8ce; border-radius: 0; background: var(--white); color: var(--ink); padding: 10px 12px; font-size: 13px; }.field textarea { min-height: 110px; resize: vertical; }.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--forest); outline: 2px solid rgba(16,41,35,.13); outline-offset: 1px; }.form-hint, .form-status { color: var(--muted); font-size: 11px; line-height: 1.6; }.form-status { min-height: 21px; margin: 11px 0 0; }.form-status.success { color: #3e7b51; }.form-status.error { color: #ae513d; }
.detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }.detail-card { padding: 25px; border: 1px solid var(--line); background: var(--white); }.detail-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.85; }.detail-card h3 { margin-top: 14px; }.detail-card ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: 13px; line-height: 2; }.detail-card .eyebrow { margin-bottom: 0; }.split-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.pricing-wrap { overflow-x: auto; border: 1px solid var(--line); background: var(--white); }.pricing-table { width: 100%; min-width: 650px; border-collapse: collapse; font-size: 13px; }.pricing-table th, .pricing-table td { padding: 16px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); text-align: left; vertical-align: top; }.pricing-table th { background: #e9f0e9; color: var(--forest); font-size: 12px; }.pricing-table tr:last-child td { border-bottom: 0; }.pricing-table th:last-child, .pricing-table td:last-child { border-right: 0; }.pricing-note { margin-top: 13px; color: var(--muted); font-size: 11px; }
.timeline { border-top: 1px solid var(--line); }.timeline-item { display: grid; grid-template-columns: 150px 1fr; gap: 22px; padding: 20px 0; border-bottom: 1px solid var(--line); }.timeline-item strong { color: #477063; font-size: 13px; }.timeline-item p { margin: 0; color: var(--muted); font-size: 14px; }
.legal-copy { max-width: 860px; }.legal-copy h2 { margin-top: 43px; font-size: 27px; }.legal-copy p, .legal-copy li { color: var(--muted); font-size: 14px; line-height: 2; }.legal-copy ul { padding-left: 20px; }.notice { margin-bottom: 28px; padding: 13px 16px; border-left: 3px solid var(--orange); background: #fff0ea; color: #805340; font-size: 12px; }
.not-found { min-height: calc(100vh - 76px); display: grid; place-items: center; text-align: center; }.not-found h1 { color: var(--forest); }.not-found p { color: var(--muted); }
.site-footer { padding: 56px 0 20px; background: var(--forest); color: #d9e7dc; }.footer-top { display: flex; justify-content: space-between; gap: 50px; padding-bottom: 50px; }.footer-brand .brand-mark span:nth-child(1) { background: var(--lime); }.footer-brand .brand-mark span:nth-child(2) { background: #7da994; }.footer-brand .brand-mark span:nth-child(3) { background: var(--orange); }.footer-brand .brand-type small { color: #86aa95; }.footer-top > div > p { margin: 22px 0 0; color: #8eaf9c; font-size: 12px; }.footer-links { display: flex; gap: 80px; padding-right: 70px; }.footer-links > div { display: flex; flex-direction: column; gap: 7px; }.footer-links strong { margin-bottom: 8px; color: #d4eeab; font-size: 11px; }.footer-links a { color: #a4bcae; font-size: 12px; }.footer-links a:hover { color: var(--white); }.footer-bottom { display: flex; justify-content: space-between; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.15); color: #86a294; font-size: 10px; }
.mobile-only { display: none; }
.service-row { transition: background-color .24s ease, padding-inline .24s ease; }
.service-row:hover, .service-row:focus-within { background: rgba(23,56,47,.035); padding-inline: 12px; }
.service-link { transition: background-color .24s ease, color .24s ease, transform .24s ease; }
.service-row:hover .service-link, .service-row:focus-within .service-link { transform: translate(2px,-2px); }
.demo-panel-enter { animation: demo-panel-in .28s ease both; }
@keyframes demo-panel-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
.has-reveal [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity .42s ease var(--reveal-delay, 0ms), transform .42s ease var(--reveal-delay, 0ms); }
.has-reveal [data-reveal].is-visible { opacity: 1; transform: translateY(0); }
.scroll-top-button { position: fixed; z-index: 40; right: 22px; bottom: 22px; display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(23,56,47,.22); background: rgba(255,255,255,.92); color: var(--forest); opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .22s ease, transform .22s ease, background .22s ease; }
.scroll-top-button.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.scroll-top-button:hover { background: var(--forest); color: var(--white); }
.scroll-top-button svg { width: 17px; }
@media (max-width: 1100px) { .wrap { width: min(calc(100% - 48px), var(--wrap)); }.header-inner { gap: 20px; }.desktop-nav { gap: 17px; }.desktop-nav > a, .nav-dropdown > summary { font-size: 12px; }.intro-grid { grid-template-columns: 1.2fr repeat(3, 1fr); }.intro-statement { font-size: 18px; }.intro-item { padding: 22px 12px; }.showcase-layout { gap: 32px; }.contact-layout { gap: 35px; }.qr-area { gap: 12px; }.qr-crop { width: 170px; height: 170px; padding: 10px; } }
@media (max-width: 780px) { .wrap { width: calc(100% - 36px); }.site-header { height: 64px; }.desktop-nav, .header-cta { display: none; }.menu-toggle { display: grid; width: 36px; height: 36px; margin-left: auto; place-items: center; }.menu-toggle svg { width: 20px; }.mobile-nav { position: absolute; top: 64px; left: 0; right: 0; display: flex; flex-direction: column; padding: 6px 18px 18px; border-bottom: 1px solid var(--line); background: var(--white); box-shadow: 0 15px 25px rgba(22,43,27,.11); }.mobile-nav[hidden] { display: none; }.mobile-nav a { padding: 12px 5px; border-bottom: 1px solid #e5ebe4; font-size: 14px; }.mobile-nav details { border-bottom: 1px solid #e5ebe4; }.mobile-nav summary { padding: 12px 5px; list-style: none; cursor: pointer; font-size: 14px; font-weight: 600; }.mobile-nav summary::-webkit-details-marker { display: none; }.mobile-subnav { display: grid; gap: 6px; padding: 0 5px 12px 20px; }.mobile-subnav a { border: 0; padding: 5px; font-size: 12px; }.section { padding: 78px 0; }.section-heading { display: block; margin-bottom: 35px; }.heading-aside { max-width: 600px; margin-top: 19px; }.hero, .hero-content { min-height: 620px; }.hero-content { padding-top: 125px; }.hero-photo { object-position: 60% center; }.hero-shade { background: rgba(5,22,18,.6); }.hero-caption { display: none; }.intro-grid { grid-template-columns: repeat(3, 1fr); }.intro-statement { grid-column: 1 / -1; padding: 24px 0 11px; }.intro-item { padding: 13px 8px 20px; }.intro-item + .intro-item { padding-left: 15px; }.service-row { grid-template-columns: 34px 1fr 36px; gap: 14px; }.service-icon { display: none; }.product-grid, .detail-grid, .split-cards { grid-template-columns: repeat(2, 1fr); }.showcase-layout, .about-layout, .faq-layout, .contact-layout { grid-template-columns: 1fr; gap: 35px; }.showcase-copy > p:not(.eyebrow) { max-width: 640px; }.showcase-window { max-width: 700px; }.process-grid { grid-template-columns: repeat(2, 1fr); }.process-step:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; }.process-step:nth-child(4) { border-top: 1px solid var(--line); }.footer-links { padding-right: 0; }.page-hero { padding: 57px 0 70px; }.timeline-item { grid-template-columns: 100px 1fr; }.form-grid { grid-template-columns: 1fr; }.field-full { grid-column: auto; } }
@media (max-width: 520px) { body { font-size: 14px; }.wrap { width: calc(100% - 32px); }.brand-type strong { font-size: 15px; }.brand-type small { font-size: 7px; }.hero, .hero-content { min-height: 560px; }.hero-content { padding-top: 104px; }.hero h1 { font-size: 53px; }.hero-lead { font-size: 26px; }.hero-description { font-size: 13px; }.hero-actions .button { min-height: 43px; padding: 9px 12px; font-size: 11px; }.hero-motion-toggle { right: 17px; top: 84px; }.intro-grid { grid-template-columns: 1fr; }.intro-statement { font-size: 22px; }.intro-item, .intro-item + .intro-item { display: flex; align-items: center; gap: 13px; padding: 12px 0; border-top: 1px solid rgba(255,255,255,.15); }.intro-item svg { width: 18px; }.service-row { padding: 23px 0; }.service-main h3 { font-size: 18px; }.service-main p { font-size: 12px; }.service-tags { gap: 5px 7px; }.service-tags span { font-size: 10px; }.stats-grid { grid-template-columns: repeat(2, 1fr); }.stat { min-height: 130px; padding: 20px 14px 18px 0; }.stat + .stat { padding-left: 14px; }.stat:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }.stat:nth-child(4) { border-top: 1px solid var(--line); }.stat b { font-size: 43px; }.strength-grid { grid-template-columns: 1fr; gap: 35px; }.license-card { grid-template-columns: 110px 1fr; }.license-card img { width: 110px; height: 76px; }.product-grid, .detail-grid, .split-cards { grid-template-columns: 1fr; }.product-visual { min-height: 208px; }.product-body h3 { font-size: 19px; }.showcase-copy h2 { font-size: 36px; }.window-body { min-height: 350px; }.window-sidebar { width: 33px; gap: 16px; }.window-sidebar svg { width: 13px; }.demo-main { padding: 17px 12px; }.demo-stats { gap: 4px; }.demo-stats > div { padding: 7px; }.demo-stats strong { font-size: 19px; }.demo-stats span, .demo-stats small { font-size: 7px; }.demo-table > div { grid-template-columns: minmax(0, 1fr) 48px 40px; gap: 3px; font-size: 7px; }.demo-table b { font-size: 8px; }.demo-table small { font-size: 6px; }.demo-table em { font-size: 6px; }.demo-board { gap: 4px; }.demo-board > div { padding: 5px; }.demo-board article { padding: 5px; }.demo-board b { font-size: 7px; }.demo-board small, .demo-board article span { font-size: 6px; }.demo-chat-reply { max-width: 100%; }.process-grid { grid-template-columns: 1fr; }.process-step, .process-step + .process-step, .process-step:nth-child(3), .process-step:nth-child(4) { min-height: 0; padding: 20px 0; border-left: 0; border-top: 1px solid var(--line); }.process-step:first-child { border-top: 0; }.process-step > svg { margin: 15px 0; }.process-step p { max-width: none; }.about-layout { gap: 24px; }.about-copy p { font-size: 12px; }.faq-list summary { font-size: 13px; }.contact-section { padding: 70px 0; }.contact-card, .form-card { padding: 19px; }.contact-card-top h3 { font-size: 20px; }.qr-area { gap: 13px; }.qr-crop { transform: scale(.72); transform-origin: left center; margin-right: -53px; }.qr-info strong { font-size: 15px; }.qr-info span { font-size: 11px; }.qr-info p { font-size: 10px; }.footer-top { display: block; padding-bottom: 35px; }.footer-links { gap: 45px; margin-top: 38px; }.footer-bottom { display: block; font-size: 9px; }.footer-bottom span + span { display: block; margin-top: 7px; }.page-hero .lead { font-size: 15px; }.timeline-item { grid-template-columns: 1fr; gap: 3px; }.pricing-table { min-width: 610px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; }.has-reveal [data-reveal] { opacity: 1; transform: none; } }

/* Page-specific photography keeps the visual system consistent without repeating one image everywhere. */
body[data-page="index"] .hero-photo { content: url('../images/hero-ai-studio.jpg'); }
body[data-section="services"] .page-hero { background-image: linear-gradient(90deg, rgba(23,56,47,.98) 0%, rgba(23,56,47,.88) 46%, rgba(23,56,47,.56) 100%), url('../images/services-ai-workflow.jpg'); background-position: 68% center; }
body[data-page="cases"] .page-hero { background-image: linear-gradient(90deg, rgba(23,56,47,.98) 0%, rgba(23,56,47,.88) 46%, rgba(23,56,47,.5) 100%), url('../images/cases-ai-production.jpg'); background-position: 68% center; }
body[data-page="about"] .page-hero { background-image: linear-gradient(90deg, rgba(23,56,47,.95) 0%, rgba(23,56,47,.78) 46%, rgba(23,56,47,.38) 100%), url('../images/services-ai-workflow.jpg'); background-position: 65% center; }
body[data-page="contact"] .page-hero { background-image: linear-gradient(90deg, rgba(23,56,47,.95) 0%, rgba(23,56,47,.78) 46%, rgba(23,56,47,.38) 100%), url('../images/services-ai-workflow.jpg'); background-position: 65% center; }
body[data-page="index"] .about-band { background-image: linear-gradient(90deg, rgba(23,56,47,.98), rgba(23,56,47,.78)), url('../images/services-ai-workflow.jpg'); background-position: center; background-size: cover; }
body[data-page="contact"] .contact-section, body[data-page="index"] .contact-section { background-image: linear-gradient(90deg, rgba(243,244,239,.97), rgba(243,244,239,.87) 52%, rgba(243,244,239,.68)), url('../images/services-ai-workflow.jpg'); background-position: center; background-size: cover; }

/* ===== cases.html ===== */
.case-hero-stats{display:flex;flex-wrap:wrap;gap:38px;margin-top:36px}
.case-hero-stats div{font-size:11px;letter-spacing:.06em;color:#a9c4b5}
.case-hero-stats b{display:block;font-size:30px;color:#fff;letter-spacing:-.03em;margin-bottom:4px}

.case-feature{display:grid;grid-template-columns:1.05fr .95fr;border:1px solid var(--line);background:var(--white)}
.case-feature.reverse{grid-template-columns:.95fr 1.05fr}
.case-visual{min-height:430px;padding:32px;display:grid;place-items:center;background:#e7eee8}
.case-body{padding:42px 44px;display:flex;flex-direction:column}
.case-body h3{font-size:26px;line-height:1.25;margin:0 0 12px}
.case-tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.case-tags span{padding:4px 9px;border:1px solid var(--line);color:#477063;font-size:11px;letter-spacing:.04em}
.case-lede{margin:0 0 20px;color:#3f4a45;font-size:14.5px;line-height:1.85}
.case-facts{display:grid;gap:13px;margin:0 0 18px;padding-top:18px;border-top:1px solid var(--line)}
.case-facts>div{display:grid;grid-template-columns:44px 1fr;gap:14px}
.case-facts dt{padding-top:3px;color:#8a9891;font-size:11px;letter-spacing:.12em}
.case-facts dd{margin:0;color:#33373d;font-size:13.5px;line-height:1.8}
.case-result{margin:0 0 20px;padding-left:12px;border-left:2px solid var(--lime);color:#477063;font-size:12.5px}
.case-result b{color:var(--forest);font-size:18px;letter-spacing:-.02em}
.case-body .text-action{margin-top:auto;align-self:flex-start}

.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.case-card{display:flex;flex-direction:column;border:1px solid var(--line);background:var(--white)}
.case-card-visual{height:186px;padding:18px;display:grid;place-items:center;background:#e7eee8;overflow:hidden}
.case-card-body{display:flex;flex:1;flex-direction:column;padding:20px 22px 22px}
.case-meta{display:flex;justify-content:space-between;color:#8a9891;font-size:10px;letter-spacing:.08em}
.case-card h3{margin:10px 0 8px;font-size:18px}
.case-card p{margin:0 0 12px;color:var(--muted);font-size:12.5px;line-height:1.75}
.case-chips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:14px}
.case-chips span{padding:3px 8px;background:#f1f5f1;color:#477063;font-size:10.5px}
.case-foot{display:flex;justify-content:space-between;gap:10px;margin-top:auto;padding-top:11px;border-top:1px solid var(--line);color:#8a9891;font-size:10.5px}

.case-clients{display:grid;grid-template-columns:1fr 1fr;margin-top:34px;border-top:1px solid rgba(255,255,255,.16)}
.case-clients>div{padding:22px 26px 22px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.case-clients h4{margin:0 0 8px;color:#9ec0ae;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.case-clients p{margin:0;color:#dbe7df;font-size:13.5px;line-height:1.8}
.case-creds{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.case-creds span{padding:5px 10px;border:1px solid rgba(255,255,255,.22);color:#dbe7df;font-size:12px}
.section-dark .stat b{color:#fff}
.section-dark .stat span{color:#9ec0ae}
.section-dark .stats-grid{border-color:rgba(255,255,255,.18)}
.section-dark .stat+.stat{border-color:rgba(255,255,255,.18)}

/* mockups */
.mock-dashboard{display:grid;grid-template-columns:52px 1fr;width:100%;max-width:560px;height:340px;overflow:hidden;border:1px solid #d0dbd1;background:#fff}
.mock-side{display:flex;flex-direction:column;align-items:center;gap:10px;padding:14px 0;background:var(--forest)}
.mock-side b{color:var(--lime);font-size:13px}
.mock-side i{width:18px;height:18px;border-radius:3px;background:rgba(255,255,255,.18)}
.mock-side i:first-of-type{background:var(--lime)}
.mock-dash-main{display:flex;flex-direction:column;gap:12px;padding:14px 16px}
.mock-dash-head{display:flex;justify-content:space-between;align-items:center;color:#8da092;font-size:9px}
.mock-dash-head span{color:var(--ink);font-size:12px;font-weight:600}
.mock-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mock-kpis div{padding:8px 10px;background:#f4f7f4}
.mock-kpis small{display:block;color:#8da092;font-size:9px}
.mock-kpis b{color:var(--forest);font-size:18px}
.mock-chart{display:flex;align-items:flex-end;gap:5px;height:92px;padding:8px;border:1px solid #eef2ee;background:#fbfcfb}
.mock-chart i{flex:1;background:#cfe0d2}
.mock-chart i:nth-child(6){background:var(--lime)}
.mock-rows{display:grid;gap:6px;margin-top:auto}
.mock-rows span{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;border:1px solid #eef2ee;background:#fbfcfb;color:#5c6a64;font-size:9px}
.mock-rows em{font-style:normal;padding:2px 6px;background:#e5eef6;color:#3474a4;font-size:8px}

.mock-board{display:grid;gap:10px;width:100%;max-width:520px;padding:14px;border:1px solid #d0dbd1;background:#fff}
.mock-board-top,.mock-board-foot{display:flex;justify-content:space-between;color:#8da092;font-size:9px}
.mock-frames{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mock-frame{position:relative;aspect-ratio:16/9;border:1px solid #d0dbd1;background:linear-gradient(135deg,#e4ede4,#c9dccd);display:grid;place-items:center}
.mock-frame span{padding:1px 5px;background:#fff;color:#6f8576;font-size:9px}
.mock-frame::after{content:"";position:absolute;left:8px;right:8px;bottom:7px;height:2px;background:#a8c3ad}
.mock-timeline{position:relative;height:12px;border:1px solid #e2e9e3;background:#f4f7f4}
.mock-timeline i{position:absolute;left:6%;top:3px;width:38%;height:4px;background:var(--lime)}
.mock-board-foot span{padding:3px 6px;border:1px solid #d0dbd1;font-size:8px}

.mock-browser{width:100%;max-width:330px;overflow:hidden;border:1px solid #d0dbd1;background:#fff}
.mock-browser-bar{display:flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-bottom:1px solid #e2e9e3;color:#8da092;font-size:7px}
.mock-browser-bar i{width:4px;height:4px;border-radius:50%;background:#b8c7bb}
.mock-browser-bar b{margin-left:auto;font-weight:500}
.mock-browser-body{padding:8px}
.mock-site-nav{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.mock-site-nav b{color:var(--forest);font-size:8px}
.mock-site-nav i{width:12px;height:2px;background:#dbe4dd}
.mock-site-hero{display:grid;gap:4px;padding:12px 10px;background:#e7eee8}
.mock-site-hero small{color:#6f8576;font-size:5px;letter-spacing:1px}
.mock-site-hero strong{color:var(--forest);font-size:11px;line-height:1.2}
.mock-site-hero span{display:block;width:36px;height:6px;margin-top:4px;background:var(--lime)}
.mock-site-lines{display:grid;gap:4px;margin-top:8px}
.mock-site-lines i{height:3px;background:#eef2ee}

.mock-phone{width:112px;height:196px;padding:6px;border-radius:16px;background:var(--forest);box-shadow:0 12px 26px rgba(16,41,35,.18)}
.mock-phone-screen{display:flex;flex-direction:column;height:100%;overflow:hidden;border-radius:11px;background:#fff}
.mock-phone-bar{display:flex;align-items:center;justify-content:center;height:22px;background:var(--forest);color:var(--lime);font-size:6px}
.mock-phone-body{display:grid;gap:6px;padding:7px}
.mock-phone-row{display:grid;grid-template-columns:18px 1fr;gap:5px;align-items:center}
.mock-phone-row i{width:18px;height:18px;border-radius:3px;background:#e7eee8}
.mock-phone-row b{display:block;width:70%;height:4px;background:#dbe4dd;border-radius:2px}
.mock-phone-row s{display:block;width:45%;height:3px;margin-top:3px;background:#eef2ee;border-radius:2px}
.mock-phone-cta{display:grid;place-items:center;height:20px;margin:auto 7px 7px;border-radius:4px;background:var(--lime);color:var(--forest);font-size:6px;font-weight:700}

.mock-kanban{width:100%;max-width:300px;padding:10px;border:1px solid #d0dbd1;background:#fff}
.mock-kanban-head{display:flex;justify-content:space-between;margin-bottom:8px;color:#8da092;font-size:8px}
.mock-kanban-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.mock-kanban-cols small{display:block;margin-bottom:4px;color:#8da092;font-size:6px}
.mock-kanban-cols span{display:block;height:22px;margin-bottom:4px;border-radius:2px;background:#f1f5f1}
.mock-kanban-cols i{display:block;height:2px;margin:5px 4px 0;background:#dbe4dd}

.mock-storyboard{display:grid;gap:7px;width:100%;max-width:300px;padding:10px;border:1px solid #d0dbd1;background:#fff}
.mock-sb-top{color:#8da092;font-size:7px}
.mock-sb-frames{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.mock-sb-frames i{aspect-ratio:16/10;border:1px solid #d0dbd1;background:linear-gradient(135deg,#e4ede4,#c9dccd)}
.mock-sb-track{position:relative;height:8px;border:1px solid #e2e9e3;background:#f4f7f4}
.mock-sb-track i{position:absolute;left:4%;top:2px;width:46%;height:2px;background:var(--lime)}
.mock-sb-tags{display:flex;gap:4px}
.mock-sb-tags span{padding:2px 4px;border:1px solid #d0dbd1;color:#6f8576;font-size:6px}

.mock-ads{width:100%;max-width:300px;padding:10px;border:1px solid #d0dbd1;background:#fff}
.mock-ads-head{display:flex;justify-content:space-between;margin-bottom:7px;color:#8da092;font-size:7px}
.mock-ads-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-bottom:7px}
.mock-ads-kpis div{padding:5px;background:#f4f7f4}
.mock-ads-kpis small{display:block;color:#8da092;font-size:6px}
.mock-ads-kpis b{color:var(--forest);font-size:11px}
.mock-bars{display:flex;align-items:flex-end;gap:4px;height:56px}
.mock-bars i{flex:1;background:#cfe0d2}
.mock-bars i.hi{background:var(--lime)}

.mock-cal{width:100%;max-width:260px;padding:10px;border:1px solid #d0dbd1;background:#fff}
.mock-cal-head{display:flex;justify-content:space-between;margin-bottom:6px;color:#8da092;font-size:7px}
.mock-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.mock-cal-grid i{aspect-ratio:1;border-radius:2px;background:#f1f5f1}
.mock-cal-grid i.on{background:var(--lime)}
.mock-cal-grid i.book{background:var(--forest)}

@media (max-width:980px){
  .case-feature,.case-feature.reverse{grid-template-columns:1fr}
  .case-visual{min-height:300px;order:2;padding:24px}
  .case-body{order:1;padding:28px 26px}
  .case-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  .case-grid{grid-template-columns:1fr}
  .case-clients{grid-template-columns:1fr}
  .case-hero-stats{gap:22px}
  .case-hero-stats b{font-size:24px}
  .case-body h3{font-size:21px}
  .case-card-visual{height:200px}
}

/* ===== industries + capability matrix ===== */
.solution-chips{display:flex;flex-wrap:wrap;gap:10px;padding-top:26px;border-top:1px solid var(--line)}
.solution-chips a{padding:10px 16px;border:1px solid var(--line);background:var(--white);color:var(--forest);font-size:13.5px;transition:background .2s,color .2s,border-color .2s}
.solution-chips a:hover{background:var(--forest);border-color:var(--forest);color:#fff}
.solution-chips .solution-all{margin-left:auto;border-color:transparent;background:transparent;color:#477063}
.solution-chips .solution-all:hover{background:transparent;color:var(--forest);text-decoration:underline}

.matrix-wrap{overflow-x:auto}
.matrix-table{width:100%;min-width:560px;border-collapse:collapse;border:1px solid var(--line);background:var(--white);font-size:13.5px}
.matrix-table th,.matrix-table td{padding:13px 14px;border-bottom:1px solid var(--line);text-align:left}
.matrix-table th{background:#f7f9f7;color:#477063;font-size:11px;font-weight:600;letter-spacing:.08em}
.matrix-table td:first-child{font-weight:600;color:var(--ink)}
.matrix-table td.dot{text-align:center;color:var(--forest);font-size:15px}
.matrix-table td.dot.muted{color:#c3cfc7}
.matrix-table tr:last-child td{border-bottom:0}

@media (max-width:680px){
  .solution-chips .solution-all{margin-left:0}
  .matrix-table{font-size:12px}
  .matrix-table th,.matrix-table td{padding:10px 8px}
}

/* three-column card grid */
.mode-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:980px){.mode-grid{grid-template-columns:1fr}}

/* ===== team page ===== */
.org-chart{display:grid;gap:12px;margin-top:26px}
.org-top{padding:22px 24px;background:var(--forest);color:#fff}
.org-top b{display:block;margin-bottom:4px;font-size:16px}
.org-top span{color:#bed0c5;font-size:12.5px}
.org-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.org-box{padding:18px 20px;border:1px solid var(--line);background:var(--white)}
.org-box b{display:block;margin-bottom:6px;color:var(--forest);font-size:15px}
.org-box span{color:var(--muted);font-size:12.5px;line-height:1.75}
@media (max-width:820px){.org-row{grid-template-columns:1fr}}

.case-card h3 a:hover{text-decoration:underline;text-underline-offset:3px}

/* Product screens use the real module structure with clearly marked sample data. */
.showcase-window .window-body.product-demo-stage{display:block;height:500px;min-height:500px;overflow:hidden}
.product-demo-panel{width:100%;height:100%;min-height:0}
.product-demo-panel[hidden]{display:none}
.product-demo-embed{display:block;width:100%;height:100%;min-height:0;border:0;background:#f5f7f5}
.case-visual>.product-demo-embed{width:100%;height:386px;min-height:0;max-width:none;border:0;background:#f5f7f5}
.case-card-visual>.product-demo-embed{width:100%;height:100%;min-height:0;border:0;background:#f5f7f5}
.case-card.case-system-card .case-card-visual{height:230px;padding:10px}
.system-demo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.system-demo-figure{min-width:0;margin:0}
.system-demo-shot{height:410px;overflow:hidden;border:1px solid var(--line);background:#f5f7f5}
.system-demo-shot iframe{display:block;width:100%;height:100%;border:0;background:#f5f7f5}
.system-demo-figure figcaption{display:flex;justify-content:space-between;gap:12px;padding:11px 1px;color:var(--muted);font-size:11px}
.system-demo-figure figcaption b{color:var(--ink);font-size:12px;font-weight:600}
.case-card-visual{position:relative}
@media(max-width:780px){.showcase-window .window-body.product-demo-stage{height:500px;min-height:500px}.showcase-controls{grid-template-columns:repeat(2,minmax(0,1fr))}.case-visual>.product-demo-embed{height:340px}.system-demo-grid{grid-template-columns:1fr}.system-demo-shot{height:400px}}
@media(max-width:520px){.showcase-window .window-body.product-demo-stage{height:390px;min-height:390px}.case-visual>.product-demo-embed{height:310px}.case-card.case-system-card .case-card-visual{height:220px}.system-demo-shot{height:370px}}

/* Pointer-reactive light fields for the homepage's existing content blocks. */
.hero::after{position:absolute;z-index:0;inset:0;content:"";pointer-events:none;opacity:0;background:radial-gradient(360px circle at var(--pointer-x,50%) var(--pointer-y,50%),rgba(216,239,103,.2),rgba(83,181,151,.08) 35%,transparent 72%);transition:opacity .35s ease}
.hero[data-pointer-active="true"]::after{opacity:1}
.hero-content{position:relative;z-index:1}
.service-row,.stat{position:relative;isolation:isolate}
.service-row::before,.stat::before{position:absolute;z-index:0;inset:0;content:"";pointer-events:none;opacity:0;background:radial-gradient(260px circle at var(--pointer-x,50%) var(--pointer-y,50%),rgba(112,173,134,.17),transparent 72%);transition:opacity .24s ease}
.service-row > *, .stat > *{position:relative;z-index:1}
.service-row[data-pointer-active="true"]::before,.stat[data-pointer-active="true"]::before{opacity:1}
.showcase-window{position:relative;isolation:isolate}
.showcase-window::after{position:absolute;z-index:4;inset:0;content:"";pointer-events:none;opacity:0;background:radial-gradient(300px circle at var(--pointer-x,50%) var(--pointer-y,50%),rgba(216,239,103,.16),transparent 72%);mix-blend-mode:soft-light;transition:opacity .28s ease}
.showcase-window[data-pointer-active="true"]::after{opacity:1}
@media(max-width:780px),(prefers-reduced-motion:reduce){.hero::after,.service-row::before,.stat::before,.showcase-window::after{display:none}}

.hero{isolation:isolate}
.hero .hero-copy{max-width:min(54%,650px)}
.hero-particles{position:absolute;z-index:0;inset:0;width:100%;height:100%;pointer-events:none;opacity:.7}
.hero-orbit{position:absolute;z-index:1;top:50%;right:1%;width:min(43vw,500px);height:390px;transform:translateY(-48%) perspective(900px) rotateX(var(--orbit-rotate-x,0deg)) rotateY(var(--orbit-rotate-y,0deg));transform-style:preserve-3d;transition:transform .2s ease-out;pointer-events:none}
.hero-orbit::before{position:absolute;inset:8%;content:"";background:radial-gradient(ellipse at var(--orbit-focus-x,50%) var(--orbit-focus-y,50%),rgba(216,239,103,.16),rgba(90,163,133,.08) 28%,transparent 68%);opacity:.35;transition:opacity .25s ease}
.hero-orbit.is-pointed::before{opacity:1}
.orbit-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;opacity:.62}
.orbit-lines path,.orbit-lines circle{fill:none;stroke:rgba(196,225,196,.42);stroke-width:1;stroke-dasharray:3 7}
.orbit-lines circle:first-of-type{stroke:rgba(216,239,103,.34);stroke-dasharray:1 0}
.orbit-core{position:absolute;left:50%;top:50%;display:grid;width:102px;aspect-ratio:1;place-content:center;transform:translate(-50%,-50%);border:1px solid rgba(216,239,103,.7);border-radius:50%;background:rgba(16,41,35,.88);box-shadow:0 0 0 10px rgba(216,239,103,.045),0 0 48px rgba(216,239,103,.16);text-align:center;cursor:grab;touch-action:none;pointer-events:auto}
.hero-orbit.is-dragging .orbit-core{cursor:grabbing}
.orbit-core b{color:var(--lime);font-size:22px}.orbit-core small{color:#c0d1c5;font-size:9px;letter-spacing:1px}
.orbit-node{position:absolute;display:flex;align-items:center;gap:8px;min-width:112px;padding:10px 12px;border:1px solid rgba(215,233,219,.34);background:rgba(15,39,33,.74);color:#eef3ed;font-size:12px;pointer-events:auto;transition:color .2s,border-color .2s,background .2s,transform .2s}
.orbit-node i{width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 12px rgba(216,239,103,.8)}
.orbit-node:hover,.orbit-node:focus-visible{transform:translateY(-2px);border-color:var(--lime);background:rgba(21,57,46,.96);color:var(--lime)}
.orbit-node-a{top:9%;left:4%}.orbit-node-b{top:9%;right:1%}.orbit-node-c{bottom:13%;left:3%}.orbit-node-d{right:0;bottom:13%}
.orbit-caption{position:absolute;left:50%;bottom:1%;transform:translateX(-50%);color:rgba(235,243,233,.48);font-size:8px;letter-spacing:1.5px;white-space:nowrap}
.service-flow{margin-top:28px;padding:23px 26px;border:1px solid #dce5dc;background:#f1f5f0}
.service-flow-heading{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:18px}.service-flow-heading span{color:#698477;font-size:9px;font-weight:700;letter-spacing:1.5px}.service-flow-heading strong{color:#2f5744;font-size:13px;font-weight:600}
.service-flow-track{display:grid;grid-template-columns:1fr 32px 1fr 32px 1fr 32px 1fr;align-items:center}
.service-flow-track button{display:grid;grid-template-columns:28px 1fr;align-items:center;gap:1px 9px;padding:11px 12px;border:1px solid transparent;background:transparent;text-align:left;color:var(--ink);transition:background .22s,border-color .22s,transform .22s}
.service-flow-track button i{grid-row:span 2;color:#729580;font-size:9px;font-style:normal}.service-flow-track button b{font-size:13px}.service-flow-track button small{color:#77857d;font-size:9px}
.service-flow-track button:hover,.service-flow-track button.is-active{transform:translateY(-2px);border-color:#b6ccb8;background:#fff}.service-flow-track button.is-active i{color:#88a932}
.flow-link{height:1px;background:linear-gradient(90deg,#a8c29d,#d2e5a8);position:relative}.flow-link::after{position:absolute;right:0;top:-2px;width:5px;height:5px;border-radius:50%;content:"";background:#b2cf59;box-shadow:0 0 9px #b2cf59}
.service-row.is-linked{background:rgba(170,208,133,.1)}.service-row.is-linked .service-no{color:#739826}.service-row.is-linked .service-icon{border-color:#91ae5c;color:#587b21}
.scroll-journey{padding:72px 0;background:#102923;color:#fff;overflow:hidden}
.journey-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:10%;align-items:center}
.journey-intro h2{font-size:clamp(31px,4vw,48px);line-height:1.25}.journey-intro>p:not(.eyebrow){max-width:350px;margin:17px 0 0;color:#bbcec2;font-size:13px}
.journey-progress{height:2px;margin-top:30px;background:rgba(255,255,255,.14)}.journey-progress span{display:block;width:var(--journey-progress,0%);height:100%;background:var(--lime);box-shadow:0 0 14px rgba(216,239,103,.55);transition:width .55s ease}
.journey-steps{position:relative;display:grid;gap:0}.journey-steps::before{position:absolute;top:22px;bottom:22px;left:21px;width:1px;content:"";background:rgba(255,255,255,.18)}
.journey-step{position:relative;display:grid;grid-template-columns:44px 1fr;align-items:center;gap:17px;min-height:94px;opacity:.48;transition:opacity .3s,transform .3s}.journey-step.is-active{opacity:1;transform:translateX(5px)}
.journey-step>i{z-index:1;display:grid;width:43px;aspect-ratio:1;place-items:center;border:1px solid rgba(255,255,255,.24);border-radius:50%;background:#102923;color:#a4bbae;font-size:10px;font-style:normal;transition:border-color .25s,color .25s,box-shadow .25s}.journey-step.is-active>i{border-color:var(--lime);color:var(--lime);box-shadow:0 0 0 6px rgba(216,239,103,.08)}
.journey-step b,.journey-step span{display:block}.journey-step b{font-size:18px}.journey-step span{margin-top:5px;color:#b8cbc0;font-size:12px}
.ai-experience{background:#eef3ef}.ai-experience-layout{display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:10%}.ai-experience h2{font-size:clamp(31px,4vw,48px)}.ai-experience-copy{max-width:420px;margin:18px 0 22px;color:#65766b;font-size:13px;line-height:1.85}
.ai-task-list{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 23px}.ai-task-list button{padding:8px 12px;border:1px solid #c8d7cb;background:#f8faf8;color:#43624f;font-size:11px;transition:background .2s,color .2s,border-color .2s}.ai-task-list button:hover,.ai-task-list button.is-active{border-color:#234a38;background:#234a38;color:#fff}
.ai-result{position:relative;overflow:hidden;min-height:288px;border:1px solid #2e5642;background:#112f25;color:#eff4ed;box-shadow:0 16px 45px rgba(21,61,43,.12)}
.ai-result::before{position:absolute;inset:0;content:"";pointer-events:none;background:radial-gradient(360px circle at var(--pointer-x,80%) var(--pointer-y,30%),rgba(216,239,103,.12),transparent 68%)}
.ai-result-top,.ai-result-foot{position:relative;display:flex;align-items:center;gap:9px;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.12);color:#c0d2c4;font-size:10px}.ai-result-top small{margin-left:auto;color:#90a99a;font-size:9px}.ai-pulse{width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 12px var(--lime)}
.ai-result-content{position:relative;padding:25px 25px 20px}.ai-result-label{color:var(--lime);font-size:10px;letter-spacing:1px}.ai-result-content h3{margin:9px 0 16px;font-size:19px}.ai-result-content ol{display:grid;gap:9px;margin:0;padding:0;list-style:none;counter-reset:task;color:#cfddd3;font-size:11px}.ai-result-content li{counter-increment:task;display:grid;grid-template-columns:19px 1fr;align-items:center;gap:9px}.ai-result-content li::before{content:counter(task,decimal-leading-zero);color:#a9c45c;font-size:9px}.ai-result-foot{justify-content:space-between;border-top:1px solid rgba(255,255,255,.12);border-bottom:0;color:#a8beb0;font-size:9px}.ai-result-foot b{color:#a6c155;font-size:8px;letter-spacing:1px}
.template-hero{padding:78px 0 72px}.template-hero h1{max-width:660px;margin:0;color:#fff;font-size:clamp(42px,6vw,70px)}.template-hero .lead{max-width:570px}.template-browser-section{padding:50px 0 60px;background:#f5f7f4}.template-browser-top{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:20px}.template-browser-top h2{font-size:32px}.template-browser-top .eyebrow{margin-bottom:9px}.template-source{color:#6a7b70;font-size:11px}.template-redirect{display:flex;align-items:center;gap:18px;min-height:190px;padding:28px;border:1px solid #d8e1d9;background:#fff}.template-redirect-mark{display:grid;flex:none;width:56px;aspect-ratio:1;place-items:center;background:#102923;color:#d8ef67;font-size:25px}.template-redirect>div{flex:1}.template-redirect strong{color:#173a31;font-size:16px}.template-redirect p{margin:7px 0 0;color:#68786d;font-size:12px}.template-redirect .button{white-space:nowrap}
@media(max-width:900px){.hero-orbit{right:-2%;width:40vw;opacity:.9}.hero .hero-copy{max-width:58%}.journey-layout,.ai-experience-layout{gap:6%}}
@media(max-width:780px){.hero-orbit{top:auto;right:0;bottom:9px;width:300px;height:235px;transform:scale(.86);transform-origin:right bottom;opacity:.82}.hero .hero-copy{max-width:60%}.orbit-caption{display:none}.service-flow{padding:18px 14px}.service-flow-track{grid-template-columns:1fr 17px 1fr 17px 1fr 17px 1fr}.service-flow-track button{grid-template-columns:1fr;padding:9px 5px}.service-flow-track button i{grid-row:auto}.service-flow-track button b{font-size:11px}.service-flow-track button small{font-size:8px}.journey-layout,.ai-experience-layout{grid-template-columns:1fr;gap:32px}.journey-intro h2 br{display:none}.journey-progress{max-width:260px}.ai-result{max-width:650px}.template-browser-frame{width:calc(100% - 32px);min-height:480px;height:74vh}}
@media(max-width:520px){.hero-orbit{position:absolute;left:0;right:0;bottom:16px;top:auto;display:flex;width:100%;height:42px;margin:auto;gap:4px;transform:none;opacity:.88}.hero .hero-copy{max-width:100%}.orbit-lines,.orbit-core,.orbit-caption{display:none}.orbit-node{position:static;flex:1;justify-content:center;gap:4px;min-width:0;padding:6px 3px;font-size:8px;white-space:nowrap}.orbit-node i{width:5px;height:5px}.service-flow{margin-top:19px}.service-flow-heading{align-items:flex-start;flex-direction:column;gap:5px}.service-flow-track{grid-template-columns:1fr 8px 1fr 8px 1fr 8px 1fr}.service-flow-track button{gap:0 3px;padding:7px 3px}.service-flow-track button small{font-size:7px}.flow-link::after{width:4px;height:4px}.scroll-journey{padding:58px 0}.journey-step{min-height:82px}.journey-step b{font-size:16px}.journey-step span{max-width:270px;font-size:10px}.ai-result{min-height:270px}.ai-result-content{padding:21px 18px}.ai-result-content h3{font-size:17px}.template-hero{padding:58px 0}.template-hero h1{font-size:42px}.template-browser-top{align-items:flex-start;flex-direction:column}.template-browser-top h2{font-size:27px}.template-browser-frame{min-height:420px;height:68vh}.template-fallback{align-items:flex-start;flex-direction:column}}
@media(max-width:520px){.hero-orbit{position:absolute;left:0;right:0;bottom:16px;top:auto;display:flex;width:100%;height:42px;margin:auto;gap:4px;transform:none;opacity:.88}.hero .hero-copy{max-width:100%}.orbit-lines,.orbit-core,.orbit-caption{display:none}.orbit-node{position:static;flex:1;justify-content:center;gap:4px;min-width:0;padding:6px 3px;font-size:8px;white-space:nowrap}.orbit-node i{width:5px;height:5px}.service-flow{margin-top:19px}.service-flow-heading{align-items:flex-start;flex-direction:column;gap:5px}.service-flow-track{grid-template-columns:1fr 8px 1fr 8px 1fr 8px 1fr}.service-flow-track button{gap:0 3px;padding:7px 3px}.service-flow-track button small{font-size:7px}.flow-link::after{width:4px;height:4px}.scroll-journey{padding:58px 0}.journey-step{min-height:82px}.journey-step b{font-size:16px}.journey-step span{max-width:270px;font-size:10px}.ai-result{min-height:270px}.ai-result-content{padding:21px 18px}.ai-result-content h3{font-size:17px}.template-hero{padding:58px 0}.template-hero h1{font-size:42px}.template-browser-top{align-items:flex-start;flex-direction:column}.template-browser-top h2{font-size:27px}.template-redirect{padding:19px;gap:13px}.template-redirect-mark{width:44px}.template-redirect>div{min-width:calc(100% - 57px)}.template-redirect .button{margin-left:57px}}
@media(max-width:780px){.template-redirect{align-items:flex-start;flex-wrap:wrap}.template-redirect>div{min-width:calc(100% - 80px)}.template-redirect .button{margin-left:74px}}
@media(prefers-reduced-motion:reduce){.hero-orbit,.orbit-node,.journey-progress span,.journey-step,.service-flow-track button{transition:none!important}}

/* ===== software product line ===== */
.sw-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.sw-card{display:flex;flex-direction:column;padding:20px 22px;border:1px solid var(--line);background:var(--white)}
.sw-no{font-size:10px;letter-spacing:.14em;color:#8a9891}
.sw-card h3{margin:8px 0 8px;font-size:16.5px;line-height:1.35}
.sw-card p{margin:0 0 14px;color:var(--muted);font-size:12.5px;line-height:1.75}
.sw-card .case-chips{margin-top:auto;margin-bottom:0}
@media (max-width:980px){.sw-grid{grid-template-columns:1fr 1fr}}
@media (max-width:680px){.sw-grid{grid-template-columns:1fr}}

/* ===== software copyright list ===== */
.cr-list{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;border-top:1px solid var(--line)}
.cr-list span{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.cr-list i{flex:none;font-style:normal;color:#8a9891;font-size:12px;font-variant-numeric:tabular-nums}
@media (max-width:760px){.cr-list{grid-template-columns:1fr}}
@media (max-width:520px){.qr-crop{width:150px;height:150px;padding:8px;transform:none;margin-right:0}.qr-area{gap:10px}.qr-info{min-width:0}}
.qr-crop { width: 244px; height: 244px; padding: 8px; }
.qr-area { gap: 16px; }
.footer-bottom a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.footer-bottom a:hover, .footer-bottom a:focus-visible { color: var(--white); }
@media (max-width: 520px) {
  .qr-area { flex-direction: column; align-items: stretch; gap: 14px; }
  .qr-crop { width: min(244px, 100%); height: auto; aspect-ratio: 1; align-self: center; }
}

.cursor-signal{position:fixed;z-index:90;top:0;left:0;width:18px;height:18px;border:1px solid #7eaa60;border-radius:2px;color:#7eaa60;opacity:0;pointer-events:none;will-change:transform;transition:opacity .16s ease,width .16s ease,height .16s ease,border-color .16s ease}
.cursor-signal::before,.cursor-signal::after{position:absolute;content:"";background:currentColor}
.cursor-signal::before{top:50%;left:4px;right:4px;height:1px;transform:translateY(-50%)}
.cursor-signal::after{left:50%;top:4px;bottom:4px;width:1px;transform:translateX(-50%)}
.cursor-signal.is-visible:not(.is-hidden){opacity:.72}
.cursor-signal.is-actionable{width:27px;height:27px;border-color:#b4d273;color:#b4d273}
.cursor-signal.is-actionable::before{left:7px;right:7px}
.cursor-signal.is-actionable::after{top:7px;bottom:7px}
@media(max-width:780px),(prefers-reduced-motion:reduce){.cursor-signal{display:none}}