@layer reset, base, components, responsive;
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, p, ul, ol { margin: 0; }
  button { font: inherit; color: inherit; cursor: pointer; border: 0; }
  a { color: inherit; text-decoration: none; }
  img, svg, canvas { display: block; max-width: 100%; }
  button, a { -webkit-tap-highlight-color: transparent; }
  [hidden] { display: none !important; }
}

@layer base {
  :root { --blue: #008ae8; --navy: #003c95; --ink: #3c424a; --muted: #66737f; --line: #e3e8ed; --pale: #f7f9fb; --ease: cubic-bezier(.2,.7,.2,1); color-scheme: light; }
  html { scroll-behavior: smooth; scroll-padding-top: 86px; }
  body { font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 15px; line-height: 1.65; color: var(--ink); background: #fff; -webkit-font-smoothing: antialiased; }
  body.modal-open { overflow: hidden; }
  h1, h2, h3 { font-weight: 550; line-height: 1.2; letter-spacing: -.035em; text-wrap: balance; }
  h2 { font-size: clamp(28px, 2.8vw, 36px); }
  p { text-wrap: pretty; }
  ::selection { background: #d9eeff; color: #1c5d8e; }
  :focus-visible { outline: 2px solid var(--blue); outline-offset: 5px; border-radius: 3px; }
  .wrap { width: min(1220px, calc(100% - 96px)); margin-inline: auto; }
  .section { padding-block: 78px; }
  .section-heading { margin-bottom: 31px; }
  .section-heading > p { font-size: 14px; line-height: 1.8; color: var(--muted); margin-top: 15px; }
  .centered { text-align: center; }
  .eyebrow { display: inline-block; font-size: 12px; font-weight: 500; letter-spacing: .1em; color: #4c6378; }
  .skip-link { position: fixed; top: 10px; left: 10px; z-index: 100; padding: 12px 18px; color: #fff; background: var(--navy); transform: translateY(-160%); }
  .skip-link:focus { transform: none; }
}
@layer components {
  .header { position: sticky; top: 0; z-index: 40; background: rgb(255 255 255 / 95%); backdrop-filter: blur(16px); border-bottom: 1px solid #edf0f3; }
  .header-inner { height: 64px; display: flex; align-items: center; gap: 48px; }
  .logo { display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0; }
  .logo img { object-fit: contain; }
  .logo-text { font-weight: 700; font-size: 19px; letter-spacing: -.022em; color: var(--navy); line-height: 1; }
  .logo-text .accent { color: var(--blue); }
  .desktop-nav { display: flex; align-items: center; gap: 29px; }
  .desktop-nav a { color: #40566b; font-size: 15px; padding-block: 10px; transition: color .2s; }
  .desktop-nav a:hover { color: var(--blue); }
  .header-right { display: flex; align-items: center; gap: 23px; margin-left: auto; }
  .header-contact { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; font-size: 14px; font-weight: 500; color: #fff; background: var(--action, #0067b2); padding: 9px 16px; border-radius: 4px; transition: background .2s; }
  .header-contact:hover { background: #0077c9; }
  .menu-toggle { display: none; min-width: 44px; min-height: 44px; background: none; padding: 10px; }
  .menu-toggle > span { display: block; width: 21px; height: 1.5px; background: #5d6d7b; margin-block: 5px; transition: transform .2s; }
  .menu-toggle[aria-expanded=true] > span:first-child { transform: translateY(3.25px) rotate(45deg); }
  .menu-toggle[aria-expanded=true] > span:last-child { transform: translateY(-3.25px) rotate(-45deg); }
  .mobile-menu { padding-bottom: 21px; }
  .mobile-menu a { display: block; padding-block: 12px; border-top: 1px solid var(--line); font-size: 14px; }

  .hero { overflow: visible; padding-top: 43px; }
  .hero-heading { text-align: center; position: relative; z-index: 5; }
  .hero h1 { font-size: clamp(32px, 3.35vw, 46px); font-weight: 550; line-height: 1.2; letter-spacing: -.045em; color: var(--navy); }
  .hero h1 > span { color: inherit; }
  .hero-heading > p { font-size: 14px; color: #6b7681; margin-top: 16px; }
  .pill-tabs { display: flex; justify-content: center; gap: 11px; align-items: center; flex-wrap: wrap; }
  .pill-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: #fff; color: #697782; border: 1px solid #e0e5e9; border-radius: 999px; padding: 7px 16px; min-height: 34px; font-size: 11px; font-weight: 400; line-height: 1.4; transition: border-color .2s, color .2s, background .2s; white-space: nowrap; }
  .pill-tabs button:hover { border-color: #8cc9f3; color: var(--blue); }
  .pill-tabs button[aria-selected=true] { color: var(--blue); border-color: #67b8f0; box-shadow: inset 0 0 0 .3px #67b8f0; background: #fbfdff; }
  .pill-tabs svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
  .scene-tabs { margin-top: 28px; position: relative; z-index: 5; }
  .showcase { width: min(1440px, 100%); margin-inline: auto; height: 610px; position: relative; isolation: isolate; margin-top: 3px; }
  #ecosystem-canvas { position: absolute; inset: -28px 0 0; width: 100%; height: 470px; z-index: -2; pointer-events: none; }
  .scene-horizon { position: absolute; bottom: 28px; left: 5%; right: 5%; height: 200px; background: radial-gradient(ellipse, #d8e7f855 0, #fff0 67%); z-index: -1; }
  .device-window { width: min(1080px, 82%); height: 391px; background: #fff; border: 7px solid #dbe0e6; border-top-color: #e5e9ed; border-bottom-color: #c8cfd7; border-radius: 22px; box-shadow: 0 2px 0 #9ca6b055, 0 24px 60px #344f6e15, 0 0 0 1px #bdc6ce; position: absolute; bottom: 25px; left: 50%; transform: translateX(-50%); z-index: 3; overflow: hidden; }
  .window-chrome { height: 30px; display: flex; align-items: center; justify-content: center; background: #fbfcfd; color: #8b959f; border-bottom: 1px solid #e9edf1; font-size: 8px; position: relative; }
  .window-dots { position: absolute; left: 13px; display: flex; gap: 5px; }
  .window-dots > i { width: 5px; height: 5px; background: #cbd3db; border-radius: 50%; }
  .chrome-layout { position: absolute; right: 12px; font-size: 13px; color: #8a98a5; }
  .workspace { display: flex; height: calc(100% - 30px); }
  .workspace-sidebar { width: 161px; flex-shrink: 0; background: #fafbfd; border-right: 1px solid #e8edf2; padding: 19px 11px; display: flex; flex-direction: column; }
  .sidebar-brand { display: flex; align-items: center; gap: 6px; color: #53708b; font-size: 12px; font-weight: 550; padding-left: 6px; }
  .sidebar-label { display: block; font-size: 6px; letter-spacing: .07em; color: #9aa8b4; margin: 22px 0 12px 7px; }
  .side-item { display: flex; gap: 9px; align-items: center; padding: 9px 8px; font-size: 9px; color: #8693a0; border-radius: 4px; }
  .side-item > i { font-style: normal; font-size: 14px; color: #8e9dad; width: 14px; text-align: center; line-height: 1; }
  .side-item.is-current { color: #2498dd; background: #eaf5ff; }
  .side-item.is-current > i { color: var(--blue); }
  .sidebar-bottom { margin-top: auto; display: flex; gap: 7px; align-items: center; padding: 12px 5px 0; border-top: 1px solid #e9edf2; color: #7e8b97; font-size: 7px; }
  .sidebar-bottom small { display: block; font-size: 6px; margin-top: 2px; color: #9ba6af; }
  .sidebar-circle { display: grid; place-items: center; width: 23px; height: 23px; font-size: 7px; border-radius: 50%; background: #e7eff6; color: #7295b1; }
  .workspace-main { flex: 1; min-width: 0; padding: 24px 26px 0; }
  .app-view { height: 100%; outline-offset: -2px; }
  .app-view.is-entering { animation: scene-enter .65s var(--ease) both; }
  .app-heading { display: flex; align-items: center; gap: 18px; justify-content: space-between; }
  .app-eyebrow { font-size: 6px; letter-spacing: .09em; color: #7c9bb4; }
  .app-heading h2 { font-size: 18px; color: #506273; margin-top: 6px; font-weight: 500; letter-spacing: -.03em; }
  .app-heading p { color: #8b98a4; font-size: 8px; margin-top: 7px; }
  .app-tag { font-size: 7px; color: #77a4c5; background: #f1f8fe; border: 1px solid #e4eff8; border-radius: 4px; padding: 4px 8px; white-space: nowrap; }
  .web-previews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; margin-top: 23px; }
  .preview-card { min-width: 0; }
  .preview-site { height: 150px; border: 1px solid #e4eaf0; border-radius: 5px; overflow: hidden; background: #fff; box-shadow: 0 4px 10px #31577c06; }
  .mini-nav { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-bottom: 1px solid #edf1f5; height: 27px; }
  .mini-nav b { font-size: 9px; font-weight: 600; letter-spacing: -.05em; color: #59718a; margin-right: auto; }
  .mini-nav > span { width: 14px; height: 2px; background: #c8d6e3; }
  .mini-hero { position: relative; height: 96px; overflow: hidden; padding: 14px 12px; background: #f3f8fc; }
  .mini-hero small { display: block; font-size: 3px; color: #92a9bc; letter-spacing: .05em; }
  .mini-hero strong { display: block; font-size: 14px; font-weight: 500; line-height: 1.1; color: #56718c; letter-spacing: -.04em; margin-top: 5px; position: relative; z-index: 2; }
  .mini-cta { display: inline-block; color: #fff; background: #5a9bc7; padding: 3px 5px; font-size: 3px; margin-top: 7px; position: relative; z-index: 2; }
  .soft-object { position: absolute; right: 7px; top: 15px; width: 60px; height: 80px; transform: rotate(-14deg); }
  .soft-object i { position: absolute; width: 36px; height: 54px; background: linear-gradient(130deg, #fff, #d6e6f2); border-radius: 18px; box-shadow: 3px 4px 7px #92b2cc26; border: 1px solid #fff; }
  .soft-object i + i { transform: rotate(40deg); left: 22px; top: 13px; background: linear-gradient(120deg,#fff,#bcd4e8); }
  .mini-lines { display: flex; gap: 6px; padding: 10px 12px; }
  .mini-lines > span { height: 3px; width: 40%; background: #e5edf4; }
  .shop-heading { padding: 13px 10px 0; }
  .shop-heading small { display: block; color: #a0aab3; font-size: 3px; letter-spacing: .05em; }
  .shop-heading strong { display: block; font-size: 11px; color: #7b8b98; font-weight: 500; margin-top: 3px; letter-spacing: -.04em; }
  .mini-products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 9px 10px; }
  .mini-products > div { min-width: 0; }
  .product-shape { height: 46px; background: #f1f4f6; display: block; position: relative; border-radius: 2px; }
  .product-shape::before { content: ''; position: absolute; height: 28px; width: 20px; left: calc(50% - 10px); top: 9px; background: linear-gradient(120deg,#fff,#cfdae2); border-radius: 4px 4px 11px 11px; box-shadow: 3px 4px 4px #bac7d544; }
  .shape-two::before { border-radius: 50%; width: 25px; height: 25px; left: calc(50% - 12px); top: 12px; }
  .shape-three::before { border-radius: 4px; width: 21px; height: 25px; transform: rotate(-10deg); }
  .mini-products i { display: block; width: 75%; height: 2px; background: #cbd8e3; margin-top: 5px; }
  .mini-products b { display: block; width: 35%; height: 2px; background: #e0e7ee; margin-top: 4px; }
  .portal-header { height: 31px; padding: 9px; display: flex; justify-content: space-between; border-bottom: 1px solid #edf1f5; }
  .portal-header b { font-size: 7px; font-weight: 500; color: #647f97; }
  .portal-header i { display: grid; place-items: center; font-size: 4px; font-style: normal; border-radius: 50%; width: 13px; height: 13px; background: #ecf4fa; color: #93aabf; margin-top: -1px; }
  .portal-greeting { font-size: 6px; color: #7a91a7; margin: 10px 10px 7px; }
  .portal-pills { display: flex; gap: 5px; padding-inline: 10px; }
  .portal-pills > span { font-size: 4px; background: #eef6fc; color: #7ba4c6; padding: 3px 6px; border-radius: 3px; }
  .portal-table { padding: 5px 10px; }
  .portal-table > div { display: flex; align-items: center; gap: 6px; height: 13px; border-bottom: 1px solid #eef2f6; }
  .portal-table i { width: 5px; height: 5px; border-radius: 1px; background: #dbeaf5; }
  .portal-table span { width: 45%; height: 2px; background: #d6e0e9; }
  .portal-table b { margin-left: auto; width: 14px; height: 4px; background: #e4f4ef; border-radius: 2px; }
  .preview-label { display: flex; align-items: center; justify-content: space-between; font-size: 8px; color: #7c8e9e; margin-top: 10px; padding-inline: 2px; }
  .preview-label i { font-style: normal; color: #9eb7ca; }
  .app-footer { display: flex; justify-content: space-between; align-items: center; gap: 15px; border-top: 1px solid #edf1f5; padding-top: 13px; margin-top: 20px; font-size: 7px; color: #8c9ca9; }
  .app-footer i { font-style: normal; padding-inline: 4px; color: #acbbc6; }
  .integration-map { display: flex; align-items: center; justify-content: space-between; position: relative; padding: 27px 15px 0; margin-top: 9px; }
  .system { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; width: 20%; }
  .system-icon { display: grid; place-items: center; width: 51px; height: 51px; font-size: 25px; line-height: 1; color: #65aadd; border: 1px solid #cbe4f7; border-radius: 12px; background: linear-gradient(135deg,#fff,#f0f8ff); box-shadow: 0 5px 12px #3e7fac08; }
  .system b { font-size: 9px; font-weight: 500; color: #6b849a; margin-top: 12px; white-space: nowrap; }
  .system small { font-size: 7px; color: #97a6b4; margin-top: 3px; }
  .integration-line { position: absolute; left: 12%; right: 12%; top: 53px; height: 1px; background: #cbe5f9; overflow: visible; }
  .integration-line i { position: absolute; top: -2px; width: 4px; height: 4px; background: #7cbee9; border-radius: 50%; animation: data-travel 6s linear infinite; }
  .integration-line i:nth-child(2) { animation-delay: -2s; }
  .integration-line i:nth-child(3) { animation-delay: -4s; }
  .integration-detail { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 16px 13px; background: #f9fbfd; border: 1px solid #edf2f7; border-radius: 5px; margin-top: 22px; }
  .detail-label { font-size: 5px; letter-spacing: .06em; color: #8da5b8; }
  .integration-detail p { font-size: 8px; color: #7495ae; margin-top: 4px; }
  .integration-detail i { font-style: normal; padding-inline: 3px; color: #b2c3d0; }
  .detail-event { font-size: 6px; color: #85a0b5; display: flex; align-items: center; gap: 5px; }
  .detail-event > span { width: 4px; height: 4px; background: #7ebde1; border-radius: 50%; }
  .topology { height: 208px; position: relative; margin-top: 5px; }
  .topology-lines { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: #cee5f5; stroke-width: 1.2; }
  .topology-lines .topology-pulse { stroke: #84c3ee; stroke-dasharray: 5 70; animation: dash-flow 8s linear infinite; }
  .topology-root { position: absolute; top: 15px; left: 50%; transform: translateX(-50%); background: #f6fbff; border: 1px solid #cfe6f6; color: #79a8ca; border-radius: 6px; padding: 9px 20px; font-size: 9px; white-space: nowrap; }
  .topology-root > span { margin-right: 5px; }
  .topology-children { position: absolute; bottom: 10px; left: 5%; right: 5%; display: flex; align-items: flex-start; justify-content: space-between; }
  .topology-children > div { width: 25%; display: flex; flex-direction: column; align-items: center; border: 1px solid #e0eaf2; border-radius: 5px; padding: 12px 8px; background: #fff; box-shadow: 0 3px 8px #4b6c9005; }
  .topology-children > div > span { font-size: 21px; color: #86b7da; line-height: 1; }
  .topology-children b { font-size: 8px; font-weight: 500; color: #7796ae; margin-top: 7px; }
  .topology-children small { font-size: 6px; color: #9caeba; margin-top: 3px; }
  #scene-infrastructure .app-footer { margin-top: 7px; }

  .hardware-peek { position: absolute; z-index: 2; width: 360px; bottom: 12px; left: 24px; pointer-events: none; filter: saturate(.4) contrast(.7) brightness(1.25); }
  .hardware-peek > img { display: block; width: 100%; height: auto; max-width: none; }
  .phone { width: 174px; height: 339px; position: absolute; right: 3.5%; bottom: 0; z-index: 5; border: 5px solid #f2f4f6; border-radius: 29px; background: #fff; box-shadow: 0 0 0 1px #b4bec8, 0 12px 30px #354e6e1a, inset 0 0 0 1px #dee4ea; overflow: hidden; padding: 11px 10px 15px; }
  .phone-speaker { position: absolute; width: 45px; height: 5px; border-radius: 10px; background: #dae0e6; top: 7px; left: calc(50% - 22px); }
  .phone-top { display: flex; align-items: center; justify-content: space-between; margin-top: 9px; padding: 0 2px 9px; border-bottom: 1px solid #edf2f6; }
  .phone-top > span { font-size: 6px; color: #a6b1bc; }
  .phone-content { padding-top: 17px; }
  .phone-eyebrow { font-size: 4px; color: #88a5bc; letter-spacing: .07em; }
  .phone-content > strong { display: block; font-size: 20px; font-weight: 500; color: #6d889f; line-height: 1.15; letter-spacing: -.04em; margin-top: 8px; }
  .phone-illustration { height: 79px; position: relative; overflow: hidden; }
  .phone-equipment { display: none; width: 100%; height: 100%; object-fit: contain; padding-block: 5px; filter: saturate(.4) contrast(.7) brightness(1.25); }
  .phone-circle { position: absolute; width: 49px; height: 49px; border: 12px solid #d8eaf8; border-top-color: #f3f9ff; border-radius: 50%; right: 17px; top: 14px; box-shadow: 5px 4px 8px #6688a018; transform: rotate(-30deg); }
  .phone-illustration > span { position: absolute; height: 3px; width: 30px; background: #e4edf4; top: 29px; left: 3px; }
  .phone-illustration > span:nth-of-type(2) { top: 39px; width: 40px; }
  .phone-illustration > span:nth-of-type(3) { top: 49px; width: 23px; }
  .phone-row { display: flex; align-items: center; gap: 7px; padding-block: 9px; border-top: 1px solid #edf2f6; }
  .phone-row > i { width: 18px; height: 18px; border-radius: 5px; background: #edf7ff; border: 1px solid #d9edfc; }
  .phone-row b { font-size: 6px; font-weight: 500; display: block; color: #7794ab; }
  .phone-row small { display: block; font-size: 4px; color: #a0b2bf; margin-top: 3px; }
  .phone-row > span { margin-left: auto; font-size: 11px; color: #a6bbca; }
  .phone-bottom { display: flex; justify-content: space-around; color: #b1c1ce; font-size: 10px; margin-top: 4px; }
  .phone-bottom > span:first-child { color: #61aadd; }
  .phone-home { position: absolute; left: 35%; right: 35%; height: 3px; background: #c6d1da; bottom: 6px; border-radius: 9px; }
  [data-view=integrations] .phone-circle { border-radius: 10px; border-width: 1px; background: linear-gradient(135deg,#f4fbff,#d6edfc); transform: rotate(-12deg); }
  [data-view=infrastructure] .phone-circle,
  [data-view=infrastructure] .phone-illustration > span { display: none; }
  [data-view=infrastructure] .phone-equipment { display: block; }
  .showcase-footer { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-top: 23px; padding-bottom: 19px; }
  .showcase-footer p { font-size: 13px; color: #657482; }
  .showcase-footer > div > span { display: block; font-size: 8px; color: #99a5af; margin-top: 5px; }
  .motion-control { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: #607586; min-height: 40px; padding: 5px 0 5px 10px; font-size: 9px; white-space: nowrap; }
  .motion-control > span:first-child { font-size: 10px; border: 1px solid #d9e1e8; border-radius: 50%; width: 25px; height: 25px; display: grid; place-items: center; }
  .motion-control:hover { color: var(--blue); }

  .principles { padding-top: 58px; }
  .principle-tabs { margin-bottom: 39px; }
  .principle-tabs button { font-size: 10px; padding-inline: 16px; }
  .principle-panel { display: grid; grid-template-columns: 330px 1fr; background: #f7f9fa; border-radius: 10px; min-height: 398px; padding: 39px 42px; gap: 35px; overflow: hidden; }
  .principle-copy { position: relative; z-index: 3; align-self: center; }
  .principle-copy h3 { font-size: 27px; line-height: 1.22; letter-spacing: -.035em; max-width: 290px; }
  .principle-copy ul { padding: 0; list-style: none; border-top: 1px solid #e1e7ec; margin-top: 23px; }
  .principle-copy li { position: relative; font-size: 14px; color: #697987; padding: 15px 0 0 25px; line-height: 1.7; }
  .principle-copy li::before { content: '◇'; position: absolute; left: 0; color: #90aabc; font-size: 17px; line-height: 1.2; }
  .text-link { display: inline-flex; align-items: center; gap: 17px; background: transparent; border: 1px solid #a7d7f5; border-radius: 4px; color: #0078c8; font-size: 10px; padding: 8px 11px; margin-top: 25px; min-height: 34px; }
  .text-link:hover { background: #eaf6ff; }
  .text-link > span { font-size: 15px; }
  .principle-visual { position: relative; align-self: stretch; min-width: 0; }
  .principle-art { width: 100%; height: 100%; position: relative; min-height: 320px; }
  .principle-art.is-entering { animation: scene-enter .7s var(--ease) both; }
  .feature-browser { position: absolute; width: 90%; top: 18px; left: 0; background: #fff; border: 1px solid #d1dce5; border-radius: 11px; overflow: hidden; box-shadow: 0 17px 30px #4c738b10; transform: perspective(900px) rotateY(-7deg) rotateX(3deg); }
  .feature-chrome { display: flex; align-items: center; gap: 4px; height: 27px; padding-inline: 11px; background: #fcfdfe; border-bottom: 1px solid #e9eef3; }
  .feature-chrome > i { width: 4px; height: 4px; background: #ced9e3; border-radius: 50%; }
  .feature-chrome > span { font-size: 5px; color: #acb9c4; margin-left: auto; margin-right: auto; }
  .feature-site { padding: 0 17px 12px; }
  .feature-nav { display: flex; align-items: center; gap: 12px; height: 37px; border-bottom: 1px solid #edf2f6; }
  .feature-nav > b { font-size: 14px; letter-spacing: -.05em; font-weight: 500; color: #7191aa; margin-right: auto; }
  .feature-nav > span { font-size: 8px; color: #617c91; white-space: nowrap; }
  .feature-site-body { height: 170px; position: relative; overflow: hidden; padding: 25px 10px 8px; }
  .feature-site-body small { display: block; line-height: 1.4; color: #9db0bf; font-size: 5px; letter-spacing: .08em; position: relative; z-index: 2; }
  .feature-site-body strong { font-size: 28px; font-weight: 450; line-height: 1.08; letter-spacing: -.05em; display: block; color: #718da4; position: relative; z-index: 2; margin-top: 8px; }
  .feature-site-description { position: relative; z-index: 2; width: 56%; max-width: 275px; font-size: 9.5px; line-height: 1.6; color: #607b91; margin-top: 6px; }
  .feature-cta { position: relative; z-index: 2; display: block; width: fit-content; padding: 4px 7px; font-size: 6px; line-height: 1.2; color: white; background: #438fbf; border-radius: 2px; margin-top: 8px; }
  .feature-sculpture { width: 126px; height: 150px; position: absolute; top: 0; right: 22px; z-index: 1; transform: scale(1.12); transform-origin: right center; }
  .feature-sculpture::before { content: ''; position: absolute; inset: -12px -20px; z-index: -1; border-radius: 50%; background: radial-gradient(ellipse, #dcecf8a6, transparent 72%); }
  .feature-sculpture > i { position: absolute; width: 50px; height: 99px; background: linear-gradient(120deg,#fff,#d3e4ef); border: 1px solid #fefefe; border-radius: 26px; transform: rotate(25deg); box-shadow: 5px 7px 9px #8aafc52c; top: 24px; left: 3px; }
  .feature-sculpture > i:nth-child(2) { left: 45px; top: 9px; transform: rotate(-20deg); background: linear-gradient(130deg,#fff,#b5d0e3); }
  .feature-sculpture > i:nth-child(3) { left: 67px; top: 59px; height: 70px; transform: rotate(45deg); }
  .feature-bottom-cards { display: flex; gap: 8px; }
  .feature-mini-card { display: grid; grid-template-columns: 14px 1fr; gap: 6px; align-items: start; flex: 1; min-width: 0; padding: 8px 9px; border: 1px solid #dfebf4; border-radius: 5px; background: #f2f7fb; }
  .feature-mini-card svg { width: 14px; height: 14px; fill: none; stroke: #4b8cba; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
  .feature-mini-card b { display: block; font-size: 9.5px; line-height: 1.3; font-weight: 550; color: #4c6b83; }
  .feature-mini-card small { display: block; font-size: 7.5px; line-height: 1.5; color: #6c8598; margin-top: 3px; }
  .feature-phone { position: absolute; width: 119px; height: 233px; right: -2px; bottom: -12px; border: 5px solid #f2f5f7; border-radius: 21px; box-shadow: 0 0 0 1px #bfccd6, 0 10px 20px #57778f13; background: #fff; padding: 17px 9px 11px; transform: rotate(3deg); overflow: hidden; }
  .feature-phone > div { position: absolute; top: 4px; width: 31px; height: 3px; left: calc(50% - 15px); border-radius: 8px; background: #d2dce3; }
  .feature-phone > b { display: block; color: #7996aa; font-size: 9px; font-weight: 500; }
  .feature-phone > strong { display: block; font-size: 19px; line-height: 1.1; font-weight: 450; letter-spacing: -.04em; color: #7b98af; margin-top: 18px; }
  .feature-phone-shape { display: block; width: 53px; height: 60px; background: linear-gradient(120deg,#fff,#d9e8f2); border: 1px solid #e0edf6; border-radius: 23px; transform: rotate(24deg); margin: 13px auto; box-shadow: 3px 5px 10px #7499b319; }
  .feature-phone-cta { display: flex; justify-content: space-between; align-items: center; padding: 4px 5px; border: 1px solid #dcebf6; border-radius: 4px; background: #edf6fc; color: #477695; font-size: 6px; line-height: 1.4; }
  .feature-phone-caption { display: block; font-size: 5.5px; line-height: 1.4; color: #6c8598; margin-top: 4px; }
  .connection-art { display: grid; place-items: center; background: radial-gradient(ellipse at center, #d9effc59, transparent 57%); }
  .connection-art > .connection-routes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke-width: 1.5; }
  .connection-route { stroke: #bdddee; }
  .connection-packets { stroke: #009ded; stroke-dasharray: 4 68; animation: dash-flow 10s linear infinite; }
  .connection-node { position: absolute; z-index: 1; display: flex; align-items: center; gap: 13px; width: 46%; min-width: 0; height: 90px; padding: 14px; border: 1px solid #cbdfee; border-radius: 15px; background: linear-gradient(135deg, #fff, #fcfdff); box-shadow: 0 4px 12px #46789a06, inset 0 1px 0 #fff; }
  .connection-store { top: 4%; left: 0; }
  .connection-erp { top: 4%; right: 0; }
  .connection-invoice { bottom: 4%; left: 0; }
  .connection-courier { bottom: 4%; right: 0; }
  .connection-icon-tile { display: grid; place-items: center; flex: 0 0 52px; width: 52px; height: 52px; border: 1px solid #dceefa; border-radius: 14px; background: linear-gradient(145deg, #eff8ff, #e7f3fc); }
  .connection-node-icon { width: 42px; height: 42px; stroke: #0085cf; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 2px 1px #0485c81a); }
  .connection-node-label { min-width: 0; }
  .connection-node-label b { display: block; color: #203a53; font-size: 16px; line-height: 1.35; font-weight: 600; letter-spacing: -.025em; white-space: nowrap; }
  .connection-node-label small { display: block; color: #566b7f; font-size: 12px; line-height: 1.4; margin-top: 4px; }
  .connection-hub { position: absolute; z-index: 2; top: 50%; left: 50%; translate: -50% -50%; width: 78px; height: 78px; display: grid; place-items: center; border: 1px solid #bdddF2; border-radius: 23px; background: linear-gradient(140deg, #f5fbff, #e0f2ff); box-shadow: 0 8px 24px #3690c512, inset 0 1px 0 #fff; }
  .connection-hub img { width: 38px; height: 38px; }
  .hardware-art { display: flex; align-items: center; justify-content: center; padding-bottom: 28px; }
  .hardware-art > img { width: 100%; max-width: 100%; height: 100%; object-fit: contain; }
  .hardware-art > span { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; font-size: 11px; line-height: 1.5; color: #627f95; }
  .evolution-art { display: grid; place-items: center; }
  .module-grid { display: grid; grid-template-columns: repeat(3, 108px); gap: 17px; transform: perspective(800px) rotateY(-15deg) rotateX(20deg) rotateZ(-7deg); }
  .module-grid > div { display: flex; align-items: center; flex-direction: column; justify-content: center; height: 100px; border: 1px solid #dce7ef; border-radius: 12px; background: linear-gradient(130deg,#fff,#edf4f8); box-shadow: 4px 6px 0 #dee8f0, 5px 14px 20px #7193b015; }
  .module-grid > div:nth-child(2) { border-color: #acd4ef; box-shadow: 4px 6px 0 #d2e6f5, 5px 14px 20px #7193b015; }
  .module-grid > div > span { color: #85b3d3; font-size: 27px; line-height: 1; }
  .module-grid b { font-size: 9px; font-weight: 500; color: #86a0b4; margin-top: 14px; }
  .evolution-note { position: absolute; bottom: -11px; left: 0; right: 0; text-align: center; color: #98a7b4; font-size: 8px; }

  .services { padding-top: 66px; }
  .service-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 38px; }
  .service-card { text-align: left; padding: 25px 26px 23px; background: #fff; border: 1px solid #e5ebf0; border-radius: 7px; transition: border-color .2s, box-shadow .2s; }
  .service-card:hover { border-color: #b1d7f0; box-shadow: 0 6px 20px #4d7c9e08; }
  .service-symbol { display: block; color: #73b7e4; font-size: 27px; line-height: 1; margin-bottom: 20px; font-weight: 400; }
  .service-card h3 { font-size: 18px; font-weight: 500; letter-spacing: -.025em; }
  .service-card p { font-size: 14px; color: #657381; line-height: 1.85; margin-top: 12px; max-width: 285px; }
  .service-more { display: inline-flex; align-items: center; gap: 13px; font-size: 11px; color: #0078c8; margin-top: 16px; background: transparent; padding: 0; min-height: 36px; }
  .service-more i { font-style: normal; font-size: 14px; }
  .approach { border-top: 1px solid #edf0f3; border-bottom: 1px solid #edf0f3; margin-top: 15px; }
  .process-list { display: grid; grid-template-columns: repeat(4,1fr); gap: 38px; list-style: none; padding: 0; margin-top: 43px; }
  .process-list > li { position: relative; }
  .process-list > li > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #eef7fe; color: #7bb4dd; font-size: 10px; margin-bottom: 19px; }
  .process-list > li:not(:last-child)::after { content: ''; position: absolute; top: 16px; left: 48px; right: -22px; height: 1px; background: #e8eff5; }
  .process-list h3 { font-size: 17px; font-weight: 500; letter-spacing: -.02em; }
  .process-list p { font-size: 13px; line-height: 1.85; color: #6a7783; margin-top: 13px; max-width: 230px; }
  .about { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 100px; }
  .about .eyebrow { margin-bottom: 22px; }
  .about h2 { font-size: 32px; line-height: 1.2; }
  .about p { max-width: 510px; color: #677784; font-size: 13px; line-height: 1.9; margin-top: 23px; }
  .about-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
  .about-facts > span { display: inline-block; font-size: 9px; color: #8b9aa7; border: 1px solid #e4ebf0; border-radius: 5px; padding: 6px 9px; }
  .about-architecture { position: relative; height: 300px; width: 100%; }
  .about-architecture::before { content: ''; position: absolute; inset: 16% 9%; border-radius: 50%; background: radial-gradient(ellipse, #e3f3ff9c, #f6fbff4d 42%, transparent 72%); }
  .about-orbits { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; fill: none; }
  .about-orbit-line { stroke: #c7e1f3; stroke-width: 1; vector-effect: non-scaling-stroke; }
  .about-orbit-inner { stroke: #d0e6f6; stroke-dasharray: 3 5; }
  .about-links { fill: none; stroke: #dceaf4; stroke-width: 1; stroke-dasharray: 3 7; vector-effect: non-scaling-stroke; }
  .about-orbit-motion { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
  .about-orbit-glow { stroke: #62baff; stroke-width: 14; stroke-dasharray: .1 999.9; opacity: .17; }
  .about-orbit-trail { stroke: #63b9f1; stroke-width: 3; stroke-dasharray: 18 982; stroke-dashoffset: 18; opacity: .45; --orbit-start: 18; --orbit-end: -982; }
  .about-orbit-dot { stroke: #008ae8; stroke-width: 5; stroke-dasharray: .1 999.9; }
  .about-core { position: absolute; top: calc(50% - 37px); left: calc(50% - 37px); width: 74px; height: 74px; border: 1px solid #d8e8f4; border-radius: 20px; background: linear-gradient(135deg,#fff,#f4faff); display: grid; place-items: center; box-shadow: 0 10px 30px #356e9b10; }
  .about-node { position: absolute; width: max-content; min-width: 100px; max-width: 180px; height: 54px; padding-inline: 13px; display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 12px; white-space: nowrap; color: #52768f; background: #fff; border: 1px solid #c4d8e7; border-radius: 9px; box-shadow: 0 3px 10px #346a9506; }
  .about-node svg { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: #0a81c7; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .about-node-one { top: 15%; left: 15%; }
  .about-node-two { right: 3%; top: 43%; }
  .about-node-three { bottom: 1%; left: 31%; }
  .contact { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; padding: 39px 43px 32px; background: #f7f9fb; border-radius: 9px; margin-bottom: 52px; }
  .contact h2 { font-size: 28px; }
  .contact p { font-size: 12px; color: #6b7b88; line-height: 1.8; margin-top: 18px; max-width: 340px; }
  .contact-details { padding-top: 3px; }
  .contact-details > span:first-child { font-size: 7px; letter-spacing: .08em; color: #8fa0ae; display: block; margin-bottom: 12px; }
  .contact-details > a { display: inline-flex; align-items: center; gap: 28px; font-size: clamp(20px,2.3vw,29px); line-height: 1.2; color: #0079c8; letter-spacing: -.04em; border-bottom: 1px solid #c6e0f2; padding-bottom: 13px; }
  .contact-details > a:hover { color: #007bc8; }
  .contact-details > a > span { font-size: 25px; }
  .contact-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 20px; margin-top: 14px; font-size: 9px; color: #70818f; }
  .footer { border-top: 1px solid #edf1f4; display: flex; align-items: center; justify-content: space-between; gap: 25px; padding-block: 26px; }
  .footer .logo-text { font-size: 17px; }
  .footer > span { font-size: 9px; color: #95a0aa; }
  .footer > div { display: flex; gap: 27px; font-size: 9px; color: #9ba5ae; }
  .footer > div > a { color: #788b9b; }

  dialog { width: min(650px, calc(100vw - 30px)); max-height: calc(100dvh - 32px); border: 1px solid #e2e8ed; padding: 30px; border-radius: 10px; color: var(--ink); background: #fff; box-shadow: 0 25px 90px #243d5724; }
  dialog::backdrop { background: #354d6866; backdrop-filter: blur(7px); }
  .dialog-top { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 25px; }
  .dialog-top > span { font-size: 8px; color: #7c9ab0; letter-spacing: .08em; }
  .dialog-close { background: #f2f6f9; border-radius: 50%; width: 44px; height: 44px; font-size: 26px; line-height: 1; color: #8b9eae; }
  .dialog-close:hover { background: #eaf3fa; color: #368cc4; }
  dialog h2 { font-size: 32px; margin-bottom: 22px; }
  dialog > p { color: #637584; line-height: 1.9; font-size: 14px; }
  dialog ul { list-style: none; padding: 0; margin-block: 25px; }
  dialog li { border-top: 1px solid #e8eef3; position: relative; padding: 14px 0 14px 23px; font-size: 12px; color: #687d8d; }
  dialog li::before { content: '✓'; position: absolute; left: 0; color: #7eb6db; }
  .dialog-contact { display: inline-flex; align-items: center; gap: 25px; padding: 10px 15px; border: 1px solid #a6d5f3; color: #2e97d6; border-radius: 5px; font-size: 11px; margin-top: 4px; }
  .dialog-contact > span { font-size: 17px; }
  .dialog-contact:hover { background: #f1f9ff; }

  @keyframes scene-enter { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
  @keyframes data-travel { from { left: 0; opacity: .2; } 12% { opacity: .8; } to { left: 100%; opacity: .2; } }
  @keyframes dash-flow { to { stroke-dashoffset: -150; } }
  @media (prefers-reduced-motion: no-preference) {
    .phone { animation: device-float 9s ease-in-out infinite; }
    .feature-phone { animation: feature-float 10s ease-in-out infinite; }
    .connection-node-icon { animation: connection-icon-drift 5.5s ease-in-out infinite; }
    .about-orbit-motion { animation: about-orbit-travel 16s linear infinite; }
    .connection-erp .connection-node-icon { animation-delay: -.8s; }
    .connection-invoice .connection-node-icon { animation-delay: -1.6s; }
    .connection-courier .connection-node-icon { animation-delay: -2.4s; }
    @keyframes device-float { 0%,100% { translate: 0 0; } 50% { translate: 0 -4px; } }
    @keyframes feature-float { 0%,100% { translate: 0 0; } 50% { translate: 0 -5px; } }
    @keyframes connection-icon-drift { 0%,100% { translate: 0 0; } 50% { translate: 0 -1.7px; } }
    @keyframes about-orbit-travel { from { stroke-dashoffset: var(--orbit-start, 0); } to { stroke-dashoffset: var(--orbit-end, -1000); } }
  }
  body.motion-paused .phone, body.motion-paused .feature-phone,
  body.motion-paused .integration-line i, body.motion-paused .topology-pulse,
  body.motion-paused .connection-packets,
  body.motion-paused .connection-node-icon,
  body.motion-paused .about-orbit-motion { animation-play-state: paused !important; }
  body.motion-paused .is-entering { animation: none !important; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
  }
}
@layer responsive {
  @media (min-width: 1650px) { .showcase { height: 650px; } .device-window { height: 410px; width: 1120px; } .workspace-main { padding-top: 28px; } .preview-site { height: 164px; } .mini-hero { height: 106px; } .phone { right: 3%; } }
  @media (max-width: 1100px) {
    .wrap { width: calc(100% - 72px); }
    .hero h1 { font-size: 38px; }
    .showcase { height: 555px; }
    #ecosystem-canvas { height: 420px; }
    .device-window { width: 85%; height: 350px; }
    .workspace-sidebar { width: 137px; padding-inline: 7px; }
    .workspace-main { padding: 20px 20px 0; }
    .app-heading h2 { font-size: 16px; }
    .app-tag { font-size: 6px; padding-inline: 5px; }
    .web-previews { gap: 9px; margin-top: 21px; }
    .preview-site { height: 132px; }
    .mini-hero { height: 81px; padding: 13px 9px; }
    .mini-hero strong { font-size: 12px; }
    .mini-hero small { font-size: 2.5px; }
    .soft-object { right: -7px; top: 13px; transform: rotate(-14deg) scale(.8); }
    .mini-nav { padding-inline: 8px; height: 24px; gap: 7px; }
    .shop-heading { padding-inline: 8px; }
    .shop-heading strong { font-size: 9px; }
    .mini-products { margin-inline: 8px; gap: 4px; }
    .product-shape { height: 37px; }
    .product-shape::before { transform: scale(.8); top: 5px; }
    .portal-table > div { height: 11px; }
    .app-footer { font-size: 6px; margin-top: 16px; }
    .phone { width: 151px; height: 304px; right: 3%; }
    .phone-content { padding-top: 13px; }
    .phone-content > strong { font-size: 18px; }
    .phone-illustration { height: 66px; }
    .phone-row { padding-block: 7px; }
    .hardware-peek { width: 300px; left: 8px; bottom: 14px; }
    .integration-map { padding-top: 23px; }
    .integration-detail { margin-top: 18px; padding-block: 12px; }
    .system-icon { width: 45px; height: 45px; font-size: 22px; }
    .integration-line { top: 46px; }
    .system b { font-size: 8px; margin-top: 9px; }
    .system small { font-size: 6px; }
    .topology { height: 180px; }
    .topology-root { padding-block: 8px; }
    .topology-children > div { padding-block: 9px; }
    .principle-panel { grid-template-columns: 280px 1fr; gap: 28px; padding: 33px; }
    .principle-copy h3 { font-size: 25px; }
    .principle-copy li { font-size: 11px; }
    .feature-site-body { height: 150px; padding-top: 22px; padding-bottom: 5px; }
    .feature-site-description { font-size: 8.5px; }
    .feature-site-body strong { font-size: 23px; }
    .feature-sculpture { transform: scale(.8); transform-origin: right center; right: -1px; }
    .feature-phone { width: 105px; height: 217px; bottom: 3px; }
    .feature-phone > strong { font-size: 17px; }
    .module-grid { grid-template-columns: repeat(3,85px); gap: 14px; }
    .module-grid > div { height: 85px; }
    .about { gap: 60px; }
    .contact { gap: 50px; padding-inline: 34px; }
  }
  @media (max-width: 850px) {
    .header-inner { gap: 30px; }
    .desktop-nav { gap: 22px; }
    .hero h1 { font-size: 34px; }
    .hero-heading > p { font-size: 12px; }
    .showcase { height: 505px; }
    #ecosystem-canvas { height: 370px; }
    .device-window { width: 88%; height: 310px; border-width: 5px; border-radius: 17px; }
    .workspace-sidebar { width: 112px; padding: 16px 6px; }
    .sidebar-brand { font-size: 10px; gap: 4px; }
    .sidebar-brand img { width: 18px; height: 18px; }
    .sidebar-label { font-size: 5px; margin-top: 18px; }
    .side-item { font-size: 7px; padding: 8px 4px; gap: 5px; }
    .side-item > i { font-size: 11px; }
    .sidebar-bottom { display: none; }
    .workspace-main { padding: 17px 16px 0; }
    .app-heading h2 { font-size: 14px; }
    .app-heading p { font-size: 6px; margin-top: 5px; }
    .app-tag { display: none; }
    .app-eyebrow { font-size: 5px; }
    .web-previews { margin-top: 20px; gap: 8px; }
    .preview-site { height: 115px; }
    .mini-hero { height: 67px; padding: 10px 7px; }
    .mini-hero strong { font-size: 10px; }
    .mini-hero small { font-size: 2px; }
    .mini-cta { font-size: 2px; padding: 2px 3px; margin-top: 5px; }
    .mini-nav { height: 23px; gap: 5px; }
    .mini-nav b { font-size: 7px; }
    .mini-nav > span { width: 10px; }
    .soft-object { transform: rotate(-14deg) scale(.6); right: -12px; top: -2px; }
    .mini-lines { padding: 10px 7px; }
    .shop-heading { padding: 8px 6px 0; }
    .shop-heading small { font-size: 2px; }
    .shop-heading strong { font-size: 8px; }
    .mini-products { margin: 8px 6px; gap: 3px; }
    .product-shape { height: 30px; }
    .product-shape::before { transform: scale(.65); top: 1px; }
    .portal-header { padding: 8px 6px; height: 27px; }
    .portal-header b { font-size: 6px; }
    .portal-greeting { font-size: 4px; margin: 9px 7px 6px; }
    .portal-pills { padding-inline: 7px; }
    .portal-pills > span { font-size: 3px; padding: 2px 4px; }
    .portal-table { padding: 6px 7px; }
    .portal-table > div { height: 9px; }
    .preview-label { font-size: 6px; margin-top: 8px; }
    .app-footer { font-size: 5px; margin-top: 14px; padding-top: 10px; }
    .phone { width: 130px; height: 266px; border-width: 4px; border-radius: 24px; padding: 10px 8px 15px; right: 1.8%; }
    .phone-content { padding-top: 10px; }
    .phone-content > strong { font-size: 16px; margin-top: 7px; }
    .phone-eyebrow { font-size: 3px; }
    .phone-top { padding-bottom: 6px; }
    .phone-top img { width: 15px; height: 15px; }
    .phone-illustration { height: 59px; }
    .phone-circle { width: 41px; height: 41px; border-width: 10px; right: 10px; top: 10px; }
    .phone-illustration > span { width: 23px; top: 20px; }
    .phone-illustration > span:nth-of-type(2) { top: 29px; width: 30px; }
    .phone-illustration > span:nth-of-type(3) { top: 38px; width: 17px; }
    .phone-row { gap: 5px; padding-block: 7px; }
    .phone-row b { font-size: 5px; }
    .phone-row small { font-size: 3px; }
    .phone-row > i { width: 15px; height: 15px; }
    .phone-bottom { font-size: 8px; }
    .hardware-peek { width: 250px; left: 8px; bottom: 18px; }
    .integration-map { padding-top: 19px; padding-inline: 2px; margin-top: 8px; }
    .system-icon { width: 37px; height: 37px; font-size: 19px; border-radius: 9px; }
    .system b { font-size: 6px; margin-top: 8px; }
    .system small { font-size: 5px; }
    .integration-line { top: 38px; }
    .integration-detail { margin-top: 18px; padding: 10px; }
    .integration-detail p { font-size: 6px; }
    .detail-label { font-size: 4px; }
    .detail-event { font-size: 4px; }
    .topology { height: 156px; }
    .topology-root { font-size: 7px; padding: 7px 14px; top: 8px; }
    .topology-children { bottom: 5px; }
    .topology-children > div > span { font-size: 18px; }
    .topology-children b { font-size: 7px; }
    .topology-children small { font-size: 4px; }
    .topology-children > div { padding-inline: 4px; width: 27%; }
    .section { padding-block: 62px; }
    .principle-panel { grid-template-columns: 240px 1fr; padding: 28px; gap: 20px; min-height: 360px; }
    .principle-copy h3 { font-size: 23px; }
    .principle-copy li { font-size: 12px; }
    .principle-art { min-height: 290px; }
    .feature-browser { width: 94%; top: 33px; }
    .feature-site { padding-inline: 10px; }
    .feature-site-body { height: 130px; padding-left: 3px; padding-block: 20px 4px; }
    .feature-site-body strong { font-size: 18px; }
    .feature-site-body small { font-size: 4px; }
    .feature-site-description { width: 60%; font-size: 7.5px; }
    .feature-sculpture { transform: scale(.65); right: -7px; top: -9px; }
    .feature-phone { width: 88px; height: 183px; border-width: 4px; bottom: 0; right: -8px; }
    .feature-phone > strong { font-size: 14px; }
    .feature-phone-shape { width: 38px; height: 43px; border-radius: 17px; margin-block: 12px; }
    .feature-phone-cta { font-size: 5px; padding: 3px 4px; }
    .feature-phone-caption { display: none; }
    .feature-mini-card { grid-template-columns: 11px 1fr; gap: 5px; padding: 7px 6px; min-height: 30px; align-items: center; }
    .feature-mini-card svg { width: 11px; height: 11px; }
    .feature-mini-card b { font-size: 7.5px; }
    .feature-mini-card small { display: none; }
    .connection-node { flex-direction: column; gap: 7px; height: 103px; padding: 10px 6px; text-align: center; }
    .connection-icon-tile { flex-basis: 36px; width: 36px; height: 36px; border-radius: 10px; }
    .connection-node-icon { width: 30px; height: 30px; }
    .connection-node-label b { font-size: 12px; }
    .connection-node-label small { font-size: 10px; margin-top: 2px; }
    .connection-hub { width: 60px; height: 60px; border-radius: 18px; }
    .connection-hub img { width: 30px; height: 30px; }
    .module-grid { grid-template-columns: repeat(3,65px); gap: 10px; }
    .module-grid > div { height: 72px; border-radius: 9px; }
    .module-grid > div > span { font-size: 23px; }
    .module-grid b { font-size: 7px; margin-top: 10px; }
    .service-grid { gap: 12px; }
    .service-card { padding: 22px; }
    .service-card h3 { font-size: 15px; }
    .service-card p { font-size: 12px; }
    .process-list { gap: 24px; }
    .process-list h3 { font-size: 15px; }
    .process-list p { font-size: 11px; }
    .about { gap: 40px; }
    .about h2 { font-size: 28px; }
    .about p { font-size: 12px; }
    .about-facts > span { font-size: 8px; }
    .about-architecture { height: 265px; }
    .about-node { min-width: 86px; max-width: 155px; height: 48px; padding-inline: 10px; font-size: 11px; }
    .contact { gap: 35px; padding-inline: 29px; }
    .contact h2 { font-size: 25px; }
    .contact p { font-size: 11px; }
    .contact-details > a { font-size: 22px; gap: 18px; }
  }
  @media (max-width: 650px) {
    html { scroll-padding-top: 82px; }
    .wrap { width: calc(100% - 40px); }
    .header-inner { height: 62px; gap: 20px; }
    .logo { gap: 7px; }
    .logo img { width: 27px; height: 27px; }
    .logo-text { font-size: 18px; }
    .desktop-nav { display: none; }
    .header-right { gap: 18px; }
    .header-contact { font-size: 10px; padding: 7px 11px; }
    .menu-toggle { display: block; }
    .hero { padding-top: 34px; }
    .hero h1 { font-size: clamp(28px,7vw,34px); line-height: 1.2; max-width: 410px; margin-inline: auto; }
    .hero h1 > span { display: block; margin-top: 3px; }
    .hero-heading > p { max-width: 320px; font-size: 12px; line-height: 1.85; margin: 16px auto 0; }
    .scene-tabs { margin-top: 23px; gap: 7px; flex-wrap: nowrap; padding-inline: 12px; }
    .scene-tabs button { gap: 5px; padding: 8px 9px; font-size: 9px; min-height: 36px; }
    .scene-tabs svg { width: 12px; height: 12px; }
    .showcase { height: 415px; margin-top: 6px; }
    #ecosystem-canvas { height: 270px; inset: -5px -10% auto; width: 120%; max-width: none; }
    .device-window { width: calc(100% - 47px); height: 256px; bottom: 24px; left: 46%; border-width: 4px; border-radius: 13px; }
    .window-chrome { height: 24px; font-size: 5px; }
    .window-dots { left: 10px; gap: 3px; }
    .window-dots > i { width: 3px; height: 3px; }
    .chrome-layout { right: 9px; font-size: 10px; }
    .workspace { height: calc(100% - 24px); }
    .workspace-sidebar { display: none; }
    .workspace-main { padding: 14px 13px 0; }
    .app-heading h2 { font-size: 13px; max-width: 250px; line-height: 1.2; }
    .app-heading p { font-size: 6px; }
    .app-eyebrow { font-size: 4px; }
    .web-previews { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
    .web-previews > .preview-card:nth-child(3) { display: none; }
    .preview-site { height: 104px; }
    .mini-hero { height: 58px; padding-block: 8px; }
    .mini-hero strong { font-size: 10px; }
    .mini-hero small { font-size: 2px; }
    .mini-cta { font-size: 2px; margin-top: 4px; }
    .mini-nav { height: 23px; }
    .soft-object { transform: rotate(-14deg) scale(.54); top: -10px; right: -11px; }
    .mini-lines { padding: 8px 7px; }
    .mini-lines > span { height: 2px; }
    .preview-label { font-size: 6px; }
    .shop-heading strong { font-size: 8px; }
    .shop-heading { padding-top: 7px; }
    .mini-products { margin-top: 6px; }
    .product-shape { height: 27px; }
    .product-shape::before { transform: scale(.6); top: -1px; }
    .app-footer { margin-top: 12px; font-size: 5px; padding-top: 10px; }
    .app-footer > span:last-child { display: none; }
    .hardware-peek { display: none; }
    .phone { width: 109px; height: 220px; right: 2%; bottom: 0; border-radius: 21px; padding-inline: 7px; }
    .phone-top { margin-top: 7px; padding-bottom: 6px; }
    .phone-top img { width: 12px; height: 12px; }
    .phone-top > span { font-size: 4px; }
    .phone-speaker { width: 30px; height: 4px; left: calc(50% - 15px); top: 5px; }
    .phone-content { padding-top: 9px; }
    .phone-content > strong { font-size: 13px; margin-top: 6px; }
    .phone-eyebrow { font-size: 3px; }
    .phone-illustration { height: 45px; }
    .phone-circle { width: 31px; height: 31px; border-width: 8px; top: 8px; right: 4px; }
    .phone-illustration > span { top: 15px; height: 2px; width: 21px; }
    .phone-illustration > span:nth-of-type(2) { top: 22px; width: 25px; }
    .phone-illustration > span:nth-of-type(3) { top: 29px; width: 15px; }
    .phone-row { gap: 4px; padding-block: 6px; }
    .phone-row b { font-size: 4px; }
    .phone-row small { font-size: 3px; margin-top: 2px; }
    .phone-row > i { width: 11px; height: 11px; border-radius: 3px; }
    .phone-row > span { font-size: 8px; }
    .phone-bottom { font-size: 7px; margin-top: 3px; }
    .phone-home { height: 2px; bottom: 5px; }
    .integration-map { padding-top: 17px; margin-top: 8px; }
    .system-icon { width: 32px; height: 32px; font-size: 16px; border-radius: 8px; }
    .system b { font-size: 5px; }
    .system small { font-size: 4px; }
    .integration-line { top: 33px; }
    .integration-detail { padding: 9px; margin-top: 15px; }
    .integration-detail p { font-size: 5px; }
    .detail-event { display: none; }
    .detail-label { font-size: 3px; }
    .topology { height: 133px; }
    .topology-root { font-size: 6px; padding: 6px 11px; top: 8px; }
    .topology-children { bottom: 0; left: 3%; right: 3%; }
    .topology-children > div { padding-block: 8px; width: 28%; }
    .topology-children > div > span { font-size: 16px; }
    .topology-children b { font-size: 6px; }
    .topology-children small { font-size: 3px; }
    .showcase-footer { align-items: flex-start; gap: 14px; margin-top: 21px; padding-bottom: 0; }
    .showcase-footer p { font-size: 11px; line-height: 1.8; max-width: 250px; }
    .showcase-footer > div > span { font-size: 7px; }
    .motion-control { font-size: 0; padding-left: 0; min-height: 35px; }
    .motion-control > span:first-child { width: 28px; height: 28px; font-size: 10px; }
    .section { padding-block: 55px; }
    .principles { padding-top: 61px; }
    .section-heading h2 { font-size: 27px; line-height: 1.23; }
    .section-heading > p { font-size: 12px; margin-top: 14px; max-width: 330px; margin-inline: auto; }
    .principle-tabs { flex-wrap: nowrap; gap: 6px; margin-bottom: 27px; }
    .principle-tabs button { font-size: 9px; padding: 8px 11px; min-height: 34px; }
    .principle-panel { grid-template-columns: 1fr; padding: 27px 25px 15px; gap: 24px; min-height: 0; }
    .principle-copy h3 { font-size: 25px; max-width: 300px; }
    .principle-copy li { font-size: 12px; padding-top: 13px; }
    .principle-copy ul { margin-top: 20px; }
    .text-link { font-size: 10px; min-height: 40px; margin-top: 22px; }
    .principle-art { min-height: 280px; }
    .feature-browser { top: 14px; width: 91%; }
    .feature-nav { height: 33px; }
    .feature-nav > b { font-size: 12px; }
    .feature-nav > span { font-size: 6.5px; }
    .feature-site-body { height: 139px; padding-top: 22px; }
    .feature-site-body strong { font-size: 21px; }
    .feature-sculpture { transform: scale(.7); right: -2px; }
    .feature-site-body small { font-size: 4px; }
    .feature-mini-card { grid-template-columns: 10px 1fr; gap: 4px; }
    .feature-mini-card svg { width: 10px; height: 10px; }
    .feature-mini-card b { font-size: 6.5px; }
    .feature-phone { width: 95px; height: 198px; right: -5px; bottom: 0; }
    .feature-phone > strong { font-size: 15px; }
    .feature-phone-shape { height: 47px; width: 41px; }
    .connection-node { flex-direction: row; height: 48px; gap: 6px; padding: 4px 6px; border-radius: 10px; text-align: left; }
    .connection-store, .connection-erp { top: 0; }
    .connection-invoice, .connection-courier { bottom: 0; }
    .connection-icon-tile { flex-basis: 30px; width: 30px; height: 30px; border-radius: 9px; }
    .connection-node-icon { width: 26px; height: 26px; }
    .connection-node-label b { font-size: 11px; line-height: 1.2; white-space: normal; }
    .connection-node-label small { font-size: 9px; margin-top: 2px; }
    .connection-hub { width: 32px; height: 32px; border-radius: 11px; }
    .connection-hub img { width: 20px; height: 20px; }
    .hardware-art { padding-bottom: 23px; }
    .module-grid { grid-template-columns: repeat(3,73px); gap: 13px; }
    .module-grid > div { height: 80px; }
    .evolution-note { font-size: 7px; bottom: 7px; }
    .service-grid { grid-template-columns: 1fr 1fr; gap: 11px; margin-top: 29px; }
    .service-card { padding: 20px 17px 19px; }
    .service-symbol { font-size: 25px; margin-bottom: 17px; }
    .service-card h3 { font-size: 14px; line-height: 1.3; min-height: 36px; }
    .service-card p { font-size: 12px; margin-top: 10px; line-height: 1.8; }
    .service-more { font-size: 9px; margin-top: 18px; }
    .process-list { grid-template-columns: 1fr 1fr; gap: 33px 27px; margin-top: 32px; }
    .process-list > li:nth-child(2)::after { display: none; }
    .process-list > li::after { right: -13px; }
    .process-list > li > span { margin-bottom: 16px; }
    .process-list h3 { font-size: 16px; }
    .process-list p { font-size: 13px; margin-top: 12px; }
    .about { grid-template-columns: 1fr; gap: 10px; }
    .about h2 { font-size: 29px; }
    .about p { font-size: 13px; }
    .about .eyebrow { font-size: 8px; margin-bottom: 20px; }
    .about-facts > span { font-size: 9px; }
    .about-architecture { height: 245px; max-width: 350px; justify-self: center; }
    .about-core { width: 65px; height: 65px; top: calc(50% - 32px); left: calc(50% - 32px); border-radius: 17px; }
    .about-core img { width: 31px; height: 31px; }
    .about-node { font-size: 11px; }
    .contact { grid-template-columns: 1fr; padding: 28px 25px 20px; gap: 28px; margin-bottom: 37px; }
    .contact h2 { font-size: 27px; }
    .contact p { font-size: 12px; margin-top: 17px; }
    .contact-details > a { font-size: 25px; gap: 19px; }
    .contact-details > a > span { font-size: 22px; }
    .contact-details > span:first-child { font-size: 7px; }
    .contact-meta { font-size: 9px; }
    .footer { flex-wrap: wrap; gap: 22px 14px; padding-block: 23px; }
    .footer > span { font-size: 8px; }
    .footer > div { width: 100%; justify-content: space-between; border-top: 1px solid #edf1f4; padding-top: 17px; font-size: 9px; }
    dialog { padding: 23px; }
    dialog h2 { font-size: 28px; }
    dialog > p { font-size: 13px; }
    dialog li { font-size: 12px; }
    .dialog-top > span { font-size: 7px; }
  }
  @media (max-width: 370px) {
    .connection-node { gap: 4px; padding-inline: 4px; }
    .connection-icon-tile { flex-basis: 26px; width: 26px; height: 28px; }
    .connection-node-icon { width: 23px; height: 23px; }
    .connection-node-label b { font-size: 10px; }
    .connection-node-label small { font-size: 8.5px; line-height: 1.3; margin-top: 1px; }
    .wrap { width: calc(100% - 34px); }
    .header-inner { gap: 15px; }
    .header-right { gap: 13px; }
    .hero h1 { font-size: 27px; }
    .hero-heading > p { max-width: 270px; font-size: 11px; }
    .scene-tabs { gap: 5px; padding-inline: 9px; }
    .scene-tabs button { font-size: 8px; padding-inline: 8px; gap: 4px; }
    .scene-tabs svg { width: 11px; height: 11px; }
    .showcase { height: 385px; }
    #ecosystem-canvas { height: 250px; }
    .device-window { width: calc(100% - 38px); height: 242px; }
    .workspace-main { padding-inline: 11px; }
    .app-heading h2 { font-size: 11px; }
    .phone { width: 97px; height: 205px; right: 1.5%; }
    .phone-content > strong { font-size: 12px; }
    .phone-row { padding-block: 5px; }
    .phone-illustration { height: 42px; }
    .phone-circle { right: 1px; }
    .principle-tabs { gap: 5px; }
    .principle-tabs button { font-size: 8px; padding-inline: 9px; }
    .principle-panel { padding-inline: 20px; }
    .principle-copy h3 { font-size: 23px; }
    .principle-copy li { font-size: 11px; }
    .feature-site-body strong { font-size: 18px; }
    .feature-sculpture { transform: scale(.6); right: -12px; }
    .feature-phone { width: 86px; height: 185px; }
    .feature-phone > strong { font-size: 13px; }
    .module-grid { grid-template-columns: repeat(3,60px); gap: 11px; }
    .module-grid > div { height: 68px; }
    .service-card { padding-inline: 14px; }
    .service-grid { grid-template-columns: 1fr; }
    .service-card h3 { font-size: 16px; min-height: 0; }
    .service-card p { font-size: 13px; }
    .contact { padding-inline: 21px; }
    .contact-details > a { font-size: 22px; gap: 13px; }
    .contact-details > a > span { font-size: 20px; }
  }
  @media print {
    .header { position: static; }
    .menu-toggle, .motion-control, .hardware-peek { display: none; }
    .section { padding-block: 35px; }
    .wrap { width: 100%; }
    .showcase { height: 470px; }
    #ecosystem-canvas { display: none; }
    .device-window { bottom: 20px; }
  }
}

/* Scroll-controlled presentations with fitting and native fallback on short screens. */
@layer responsive {
  body { overflow-x: clip; }
  .scene-scroll-track { margin-top: 28px; }
  .sequence-pin { display: flow-root; }
  .scene-sequence .scene-tabs { margin-top: 0; }
  .showcase-viewport { margin-top: 3px; height: var(--sequence-scene-height, auto); overflow: clip; }
  .showcase-viewport .showcase { margin-top: 0; scale: var(--sequence-scene-scale, 1); transform-origin: top center; }
  .sequence-track.is-scroll-sequence { position: relative; height: var(--sequence-track-height, auto); }
  .sequence-track.is-scroll-sequence > .sequence-pin { position: sticky; top: var(--sequence-pin-top, 74px); }
  .principle-sequence .principle-visual { --sequence-art-natural-height: 320px; height: var(--sequence-art-natural-height); min-height: 0; align-self: center; }
  .principle-sequence .principle-art { height: var(--sequence-art-natural-height); min-height: 0; }
  .principle-scroll-track.is-scroll-sequence .principle-copy { min-height: var(--sequence-copy-height, 0px); }
  .principle-scroll-track.is-scroll-sequence .principle-panel { min-height: 0; }
  .principle-scroll-track.is-scroll-sequence .principle-visual { height: var(--sequence-art-height, var(--sequence-art-natural-height)); }
  .principle-scroll-track.is-scroll-sequence .principle-art { scale: var(--sequence-art-scale, 1); transform-origin: top center; }
  .principle-scroll-track.is-scroll-sequence .hardware-art { height: 100%; scale: 1; }
  @media (max-width: 850px) {
    .principle-sequence .principle-visual { --sequence-art-natural-height: 290px; }
  }
  @media (max-width: 650px) {
    .scene-scroll-track { margin-top: 23px; }
    .principle-sequence .principle-visual { --sequence-art-natural-height: 280px; }
  }
  @media print {
    .sequence-track.is-scroll-sequence { height: auto !important; }
    .sequence-track.is-scroll-sequence > .sequence-pin { position: static; }
    .showcase-viewport { height: auto; }
    .showcase-viewport .showcase, .principle-scroll-track.is-scroll-sequence .principle-art { scale: 1; }
    .principle-scroll-track.is-scroll-sequence .principle-visual { height: var(--sequence-art-natural-height); }
  }
}

/* Clearer typography and definition, preserving the white / blue visual direction. */
@layer responsive {
  :root { --ink: #293b4c; --muted: #4c6072; --line: #d5dfe7; --action: #0067b2; }
  body { font-size: 16px; }
  h1, h2, h3 { color: #293b4c; }
  .section-heading h2 { color: var(--navy); }
  .desktop-nav a { font-size: 15px; color: #40566b; }
  .header-contact { font-size: 14px; background: var(--action); }
  .hero h1, .hero h1 > span { color: var(--navy); }
  .hero-heading > p, .section-heading > p { font-size: 16px; color: var(--muted); }
  .eyebrow { font-size: 12px; color: #4c6378; }
  .pill-tabs button { position: relative; font-size: 14px; font-weight: 450; min-height: 44px; color: #40576b; border-color: #cbd7e1; }
  .pill-tabs button[aria-selected=true] { color: var(--action); border-color: #288ed0; background: #f6fbff; box-shadow: inset 0 0 0 .3px #288ed0; }
  .showcase-footer p { font-size: 15px; color: #455d70; }
  .showcase-footer > div > span { font-size: 12px; color: #52697d; }
  .motion-control { font-size: 13px; min-height: 44px; color: #405c72; }
  .principle-panel { background: #f4f7f9; border: 1px solid #e6edf2; }
  .principle-copy h3 { font-size: 29px; max-width: 320px; }
  .principle-copy li { font-size: 16px; color: #4c6274; line-height: 1.65; }
  .principle-copy li::before { color: #6386a1; }
  .text-link { font-size: 14px; min-height: 44px; color: var(--action); border-color: #88bcdf; }
  .service-card { border-color: #d7e1e9; }
  .service-card h3 { font-size: 20px; }
  .service-card p { font-size: 16px; color: #506474; }
  .service-more { font-size: 14px; min-height: 44px; color: var(--action); }
  .service-symbol { color: #328bc9; }
  .process-list h3 { font-size: 19px; }
  .process-list p { font-size: 16px; color: #4c6072; }
  .process-list > li > span { color: #216b9e; font-size: 13px; }
  .about p { font-size: 16px; color: #506474; }
  .about-facts > span { font-size: 12px; color: #4c6378; border-color: #cfdde7; }
  .about-node { color: #46677f; border-color: #c4d8e7; }
  .about .eyebrow { font-size: 12px; }
  .contact p { font-size: 16px; color: #4c6072; }
  .contact-details > span:first-child { font-size: 12px; color: #4c6378; }
  .contact-details > a { color: var(--action); }
  .contact-meta { font-size: 13px; color: #4c6378; }
  .footer > span, .footer > div { font-size: 12px; color: #4c6378; }
  .footer > div > a { color: #405c72; }
  dialog > p { font-size: 16px; color: #4c6375; }
  dialog li { font-size: 16px; color: #4c6375; }
  .dialog-top > span { font-size: 12px; color: #4c6378; }
  .dialog-contact { font-size: 14px; min-height: 44px; color: var(--action); }

  /* Illustration labels stay subordinate, but no longer fade into the background. */
  .window-chrome, .sidebar-label, .sidebar-bottom, .sidebar-bottom small,
  .side-item, .app-heading p, .app-footer, .preview-label, .system small,
  .detail-label, .detail-event, .topology-children small { color: #627b90; }
  .sidebar-brand, .app-heading h2, .mini-hero strong, .shop-heading strong,
  .phone-content > strong, .feature-site-body strong, .feature-phone > strong { color: #3f617d; }
  .side-item.is-current { color: #0875b9; background: #e5f2fd; }
  .app-tag, .system b, .integration-detail p, .topology-root, .topology-children b { color: #466f8d; }
  .phone-row b, .feature-nav > b, .feature-phone > b, .module-grid b { color: #4d718d; }
  .phone-row small, .phone-eyebrow, .feature-site-body small,
  .hardware-art > span, .evolution-note { color: #4c6378; }
  .hardware-art > span, .evolution-note { font-size: 12px; }
  .device-window { border-color: #ccd5df; border-top-color: #dce3e9; }
  .preview-site, .feature-browser, .feature-phone { border-color: #bfcedb; }
  .system-icon { color: #3387c2; border-color: #a6cee9; }
  .app-view.is-entering, .principle-art.is-entering { animation-duration: .38s; }

  @media (min-width: 1101px) {
    .principle-panel { grid-template-columns: 350px 1fr; }
    .side-item { font-size: 10px; }
    .app-heading h2 { font-size: 20px; }
    .app-heading p { font-size: 9px; }
    .preview-label { font-size: 9px; }
  }
  @media (min-width: 651px) and (max-width: 1100px) {
    .principle-copy h3 { font-size: 26px; }
    .principle-copy li { font-size: 16px; }
    .service-card h3 { font-size: 18px; }
    .service-card p { font-size: 16px; }
  }
  @media (max-width: 650px) {
    .header-inner { gap: 12px; }
    .header-right { gap: 8px; }
    .header-contact { font-size: 14px; padding-inline: 14px; }
    .mobile-menu a { font-size: 16px; }
    .hero-heading > p, .section-heading > p { font-size: 16px; line-height: 1.75; }
    .pill-tabs button { font-size: 13px; min-height: 44px; }
    .scene-tabs { flex-wrap: wrap; gap: 8px; padding-inline: 16px; }
    .scene-tabs button { padding-inline: 12px; }
    .scene-tabs svg { width: 15px; height: 15px; }
    .principle-tabs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); width: min(100%,380px); margin-inline: auto; gap: 8px; }
    .principle-tabs button { padding-inline: 12px; }
    .showcase-footer { flex-wrap: wrap; gap: 12px; }
    .showcase-footer > div { flex: 1 1 250px; }
    .showcase-footer p { font-size: 15px; line-height: 1.7; max-width: none; }
    .showcase-footer > div > span { font-size: 12px; }
    .motion-control { font-size: 13px; padding-left: 0; }
    .principle-copy h3 { font-size: 27px; }
    .principle-copy li { font-size: 16px; }
    .text-link { font-size: 14px; }
    .service-card h3 { font-size: 18px; min-height: 43px; }
    .service-card p { font-size: 16px; }
    .service-more { font-size: 14px; }
    .process-list h3 { font-size: 18px; }
    .process-list p, .about p, .contact p { font-size: 16px; }
    .footer > span, .footer > div { font-size: 12px; }
    .about-node { font-size: 12px; max-width: 170px; }
    .connection-node { flex-direction: column; height: 100px; padding: 8px 5px; gap: 5px; text-align: center; }
    .connection-store, .connection-erp { top: 4%; }
    .connection-invoice, .connection-courier { bottom: 4%; }
    .connection-icon-tile { flex-basis: 36px; width: 36px; height: 36px; }
    .connection-node-icon { width: 30px; height: 30px; }
    .connection-node-label b { font-size: 12px; }
    .connection-node-label small { font-size: 11px; line-height: 1.3; margin-top: 2px; }
    .connection-hub { width: 54px; height: 54px; border-radius: 16px; }
    .connection-hub img { width: 28px; height: 28px; }
  }
  @media (max-width: 370px) {
    .scene-tabs svg { display: block; }
    .scene-tabs button { padding-inline: 12px; }
    .principle-tabs button { font-size: 13px; padding-inline: 12px; }
    .principle-copy h3 { font-size: 25px; }
    .service-card h3 { min-height: 0; }
  }
}

@layer components {
  /* Contact: informații + legal (stânga, mai lată), formular (dreapta) */
  .contact { align-items: start; grid-template-columns: 1.14fr 0.86fr; gap: 44px; }
  .contact > * { min-width: 0; }
  .contact-info p { margin-top: 14px; max-width: none; }
  .contact-details { margin-top: 20px; }
  .contact-details > a { font-size: clamp(17px, 1.8vw, 22px); gap: 16px; padding-bottom: 10px; }
  .contact-details > a > span { font-size: 18px; }
  .contact-legal { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); display: grid; gap: 10px; justify-items: start; }
  .contact-legal a { font-size: 12px; letter-spacing: .02em; color: #4c6378; padding-block: 3px; transition: color .2s; }
  .contact-legal a:hover { color: var(--blue); }

  /* Formular de contact */
  .contact-form { display: grid; gap: 14px; align-content: start; }
  .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .contact-form label { display: grid; gap: 6px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #4c6378; }
  .contact-form input, .contact-form textarea { font: inherit; font-size: 14px; color: var(--ink); background: #fff; border: 1px solid #c3cfd9; border-radius: 7px; padding: 10px 12px; width: 100%; min-width: 0; transition: border-color .2s, box-shadow .2s; }
  .contact-form input::placeholder, .contact-form textarea::placeholder { color: #8b99a5; }
  .contact-form input:focus, .contact-form textarea:focus { border-color: #288ed0; box-shadow: 0 0 0 3px rgb(0 138 232 / 25%); }
  .contact-form textarea { resize: vertical; min-height: 92px; }
  .hp-field { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
  .cf-turnstile { min-height: 65px; max-width: 100%; }
  .form-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
  .form-submit { background: var(--action, #0067b2); color: #fff; border-radius: 5px; padding: 10px 21px; font-size: 14px; min-height: 44px; transition: background .2s; }
  .form-submit:hover { background: #0077c9; }
  .form-submit:disabled { opacity: .6; cursor: default; }
}
@layer responsive {
  /* Plasă de siguranță: fără panoramare orizontală pe niciun browser mobil
     (clip pe html acoperă și cazurile în care clip-ul de pe body nu se propagă, ex. iOS). */
  html { overflow-x: clip; }

  /* Aliniere cu pasul final de tipografie al site-ului. Stau în layerul responsive
     fiindcă regula largă `.contact p` de aici ar bate altfel stilurile .form-status. */
  .contact .form-note { font-size: 12px; color: #4c6072; max-width: none; margin: 0; }
  .contact .form-note a { color: #40576b; text-decoration: underline; text-underline-offset: 2px; }
  .contact .form-note a:hover { color: var(--blue); }
  .contact .form-status { font-size: 13px; margin: 0; max-width: none; }
  .contact .form-status.ok { color: #1f7a44; }
  .contact .form-status.err { color: #b3331f; }
  @media (max-width: 850px) {
    .contact { grid-template-columns: 1fr; }
    .contact-form { border-top: 1px solid var(--line); padding-top: 24px; }
    .contact-details > a { font-size: 18px; }
  }
  @media (max-width: 650px) {
    .form-grid { grid-template-columns: 1fr; }
    .contact-legal { margin-top: 22px; }

    /* Ergonomie mobil: taburile (scene hero + Principii) rămân lipite sub header
       cât timp parcurgi conținutul, iar la apăsare conținutul se aliniază sub ele (app.js). */
    .principle-tabs, .scene-tabs {
      position: sticky; top: 61px; z-index: 15;
      width: auto;
      padding: 10px 20px 12px;
      background: rgb(255 255 255 / 97%);
      backdrop-filter: blur(8px);
      box-shadow: 0 10px 14px -12px rgb(17 45 72 / 16%);
    }
    /* Principiile stau într-un container .wrap (margine 20px) → bara iese până în
       marginile ecranului; track-ul hero e deja full-width, nu are nevoie de margini negative. */
    .principle-tabs { margin-inline: -20px; }
    .scene-tabs { margin-inline: 0; }

    /* Indicator cu puncte: pozitia curentă în taburi, vizibil doar cât bara e lipită. */
    .swipe-dots {
      position: fixed; left: 50%; bottom: 14px; z-index: 30;
      display: flex; gap: 7px; align-items: center;
      padding: 9px 13px; border-radius: 999px;
      background: rgb(255 255 255 / 93%);
      backdrop-filter: blur(8px);
      border: 1px solid #e0e8ef;
      box-shadow: 0 6px 18px rgb(17 45 72 / 12%);
      opacity: 0; transform: translate(-50%, 8px);
      transition: opacity .25s, transform .25s;
      pointer-events: none;
    }
    .swipe-dots.is-visible { opacity: 1; transform: translate(-50%, 0); }
    .swipe-dots i { width: 7px; height: 7px; border-radius: 50%; background: #c6d6e3; transition: background .2s, transform .2s; }
    .swipe-dots i.is-active { background: var(--blue); transform: scale(1.3); }
  }
}