:root { --t1: 43.2px; --t2: 32.4px; --t3: 26.46px; --t4: 18.9px; --t5: 16px; --t7: 12px; --t8: 10.8px; }
@media (max-width: 767px) { :root { --t1: 30px; --t2: 26px; --t3: 24.15px; --t4: 21px; --t8: 10px; } }

html body { font-size: var(--t5); line-height: 1.75; font-weight: 400; }


html body :where(.lead, p, li, dd, dt, td, th, .small, .note, .caveat, .note.caveat, .exnote, figcaption, .shot figcaption, .tour figcaption, .dg figcaption, .stale figcaption, .verify figcaption,
  .duo .body > p, .card p, .flow p, .faq .a, .tbl, .pts p, .legal p, .legal li, .rows li span, .relp, .person p, #about .ab-sub, #about .vd, .mv p:last-child,
  .roles p, .states p, .track p, .stages > div, .stages-m dl, .stale .body p, .shift p, .themes2 p, .layers p, .start p, .topics li, .warn, .shin p, .proto, .agree,
  .row .q, .row .ds, .media .tx p, .scope .card ul, .vm .bar, .vm .l small, .vm .r small, .it .d, .card2 p, .mega .foot span, .ftr .brand p, .ftr .addr, .phero .name, .hero .ann,
  .f input, .f select, .f textarea, .f label, .f legend, .legal .date, .others span, .sigils figcaption, .rel .sb, .pane .cap2, .term) {
  font-size: var(--t5) !important; line-height: 1.75 !important; letter-spacing: normal !important; }
html body :where(.lead, .note, .caveat, .exnote, figcaption, .duo .body > p, .card p, .flow p, .faq .a, .tbl td, .pts p, .legal p, .legal li, .rows li span, .relp, .person p, #about .ab-sub, #about .vd, .mv p:last-child,
  .roles p, .states p, .track p, .stages > div, .stages-m dd, .stale .body p, .shift p, .themes2 p, .layers p, .start p, .topics li, .shin p, #about .vx-d, #about .abx-lead, .row .q, .media .tx p, .scope .card ul, .vm .bar, .vm .l small, .vm .r small,
  .it .d, .card2 p, .mega .foot span, .ftr .brand p, .ftr .addr, .phero .name, .others span, .legal .date, .rel .sb, .pane .cap2, .sigils figcaption, .shot figcaption) {
  color: var(--text) !important; font-weight: 400 !important; }
html body :where(.vm .l small, .vm .r small) { display: block; }


html body :where(#about .abx-m, .h1, .h2, .shero .h1, .phero .h1, .phero.compact .h1, .blk .h2, .duo .h2.tt, .closing .big, .closing .wrap.rl .big, .closing2 .big, #about .ab-m, #team .h2) {
  font-size: var(--t1) !important; font-weight: 700 !important; line-height: 1.5 !important; letter-spacing: .05em !important; }


html body :where(.row .nm, .layers .en, .facts b, .rel .nm) {
  font-size: var(--t2) !important; font-weight: 700 !important; line-height: 1.5 !important; letter-spacing: .05em !important; }


html body :where(.h3, .blk .h3, .pane .body .h3, .feature .side .h3, #about .ab-vt, #about .vt, .mv .s, #about .abx-vt, .offer2 .tt, .offer .tt, #rnd .themes .theme b, .theme b, .person .nm, #team .person .nm, .tsub, .solrow .catch, .issues .v) {
  font-size: var(--t3) !important; font-weight: 700 !important; line-height: 1.5 !important; letter-spacing: .05em !important; }


html body :where(.card b, .card h3, .pts b, .pts.big b, .flow b, .flow li, .step b, .faq summary, .shift b, .layers b, .checks li, .quote p, .callout, .nlist .h, .news .h, .princ li, .pains li, .decide li, .roles b, .stages .sh, .stages-m b, .cgrid h2, .mail a, #about .vx-from, #about .vx-to, .legal h2, .themes2 h3, .others b, .after b, .media .tx b, .phase li, .phase5 li, .rows li, .vm .bar b, .shin b, #about .vals-h, .others-h, .vm .l, .vm .r, .exnote > b, .phero .name b, .card2 h4, .chips li, .sol .c) {
  font-size: var(--t4) !important; font-weight: 700 !important; line-height: 1.5 !important; letter-spacing: .05em !important; }


html body :where(.menu, .menu a, .menu .mi, .nav .cta, .lnk, .lnk.primary, .send, .tabs button, .drawer summary, .drawer .plain, .mega .foot a, .card2 a, .toc a, .it b, .ftr h2, .crumb a, .crumb [aria-current]) {
  font-size: var(--t5) !important; font-weight: 700 !important; letter-spacing: .03em !important; }
html body .crumb { font-size: var(--t7) !important; }


html body :where(.stage, .card .tag, .tag, .mega .grp, .drawer .grp, .ftr .grp, .it .rel, .vsteps li, .facts span, .sk, .tno, .solrow .no, .phase5 li span, .stages .sh span, .legend, .vm .vh, .mv .k, .person .r,
  .f .req, .f .opt, .track .who, .hx .hx-steps li, .hx .hx-track span, #about .abx-lbl, #about .vx-n, .toc a span, .phero .name .stg, .news .d, .news .t, .nlist .d, .nlist .t, .step .n, .sol .n, .issues .k, .media .hd, .pane .top, .rel .lb, .stages .rh, .person .nm small, .chip, .status, .f .err, .phase li span, .flow li::before, .vsteps li::before, .facts small) {
  font-size: var(--t7) !important; font-weight: 700 !important; letter-spacing: .2em !important; line-height: 1.5 !important; }
html body :where(.stage:not(.on), .card .tag, .mega .grp, .drawer .grp, .ftr .grp, .it .rel, .facts span, .sk, .solrow .no, .phase5 li span, .stages .sh span, .legend, .vm .vh, .person .r, .toc a span, #about .vx-n, #about .vx-from, .phero .name .stg, .news .d, .news .t, .nlist .d, .nlist .t, .step .n, .sol .n, .issues .k, .media .hd, .person .nm small, .phase li span) {
  color: var(--text) !important; }
html body .chip { letter-spacing: .05em !important; }   
html body .status { letter-spacing: .1em !important; }


html body :where(.ftr li a, .ftr .all, .ftr .ext a) { font-size: var(--t7) !important; font-weight: 700 !important; letter-spacing: .2em !important; color: var(--text) !important; }
html body :where(.ftr li a, .ftr .all, .ftr .ext a):hover { color: var(--text) !important; }
html body :where(.ftr .bar, .ftr .bar a, .ftr .bar span) { font-size: var(--t8) !important; font-weight: 400 !important; letter-spacing: .3em !important; color: var(--text) !important; }


html body .logo { font-size: var(--t4) !important; letter-spacing: .02em !important; }


html body :where(.row .nm, .row:not(.on) .nm, .lnk, .lnk.plain, .vsteps li, .vsteps li.done, .tsub, .f .opt, .proto, .tabs button, .crumb, .crumb a, .crumb [aria-current], .menu a, .menu .mi, .drawer .plain, .drawer summary, .it .d, .it .rel, .stage:not(.on), .ftr .grp, .card2 p, .media .tx p, .note, figcaption, .legend, .vm .vh, .faq summary, .others span, .pane .cap2) { color: var(--text) !important; }
html body .row:not(.on) .nm { opacity: 1 !important; }

html body, html body * { --text-2: var(--text) !important; --text-3: var(--text) !important; }
html body :where(.small, .others-h) { color: var(--text) !important; }
html body .chip.gray { color: var(--text) !important; }


:root { --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; }


html body :where(.stage, .card .tag, .tag, .mega .grp, .drawer .grp, .ftr .grp, .it .rel, .vsteps li, .facts span, .sk, .phase5 li span, .stages .sh span, .legend, .vm .vh, .mv .k, .person .r,
  .f .req, .f .opt, .track .who, .hx .hx-track span, .hx .hx-steps li, .toc a span, .phero .name .stg, .news .t, .nlist .t, .media .hd, .pane .top, .rel .lb, .stages .rh, .phase li span, .status) { letter-spacing: .08em !important; }
html body :where(#about .abx-lbl, #about .vx-n, .vsteps li::before, .step .n, .sol .n, .tno, .solrow .no, .news .d, .nlist .d, .issues .k, .person .nm small, .flow li::before) { letter-spacing: .16em !important; }


html body .mega .cols { padding: var(--s7) var(--s7) var(--s6); gap: 0 var(--s8); align-content: start; }
html body .mega .grp { margin: 0 0 var(--s3); }
html body .mega .it { gap: var(--s4); padding: var(--s4) var(--s3) var(--s4) var(--s2); margin: 0 calc(-1 * var(--s3)) var(--s3) calc(-1 * var(--s2)); }
html body .mega .it .t { gap: var(--s2); }
html body :where(.it .d) { line-height: 1.65 !important; }
html body .mega .it .stage, html body .mega .it .rel { margin-top: var(--s1); }
html body .mega .foot { padding: var(--s5) var(--s7); align-items: center; }
html body .mega .card2 { padding: var(--s6) var(--s6) var(--s6); gap: var(--s3); }
html body :where(.card2 p) { line-height: 1.65 !important; }
html body .mega .card2 p { margin: 0 0 var(--s3); }
html body .mega .card2 a { padding: 10px var(--s4); }


html body .ftr .cols { padding: var(--s9) 0 var(--s8); gap: var(--s7) var(--s6); }
html body :where(.ftr h2) { font-size: var(--t5) !important; letter-spacing: .04em !important; }
html body .ftr h2 { margin: 0 0 var(--s5); }
html body :where(.ftr li a, .ftr .all, .ftr ul.ext a) { font-size: 14px !important; font-weight: 500 !important; letter-spacing: .04em !important; line-height: 1.6 !important; }
html body .ftr ul { gap: var(--s3); }
html body :where(.ftr .grp) { font-size: var(--t7) !important; letter-spacing: .08em !important; }
html body .ftr .grp { margin: 0 0 var(--s3); }
html body .ftr ul + .grp { margin-top: var(--s6); }
html body .ftr .all { margin-top: var(--s5); }
html body :where(.ftr .brand p, .ftr .addr) { font-size: 14px !important; line-height: 1.8 !important; }
html body .ftr .brand p { margin: var(--s5) 0 0; }
html body .ftr .addr { margin: var(--s4) 0 0; }
html body .ftr ul.ext { margin-top: var(--s6); display: grid; gap: var(--s3); }
html body :where(.ftr .bar, .ftr .bar a, .ftr .bar span) { font-size: var(--t7) !important; letter-spacing: .08em !important; }
html body .ftr .bar { padding-top: var(--s5); align-items: center; }
html body .ftr .bar a { padding: 0; }
@media (max-width: 900px) {
  html body .ftr .cols { padding: var(--s8) 0 var(--s7); gap: var(--s7) var(--s5); }
  html body .ftr ul { gap: 0; }
  html body .ftr li a, html body .ftr a.all { padding: 10px 0; }
}


html body .sols { column-gap: var(--s8); }
html body .sol { padding: var(--s6) 0 var(--s7); margin-top: var(--s6); }
html body .vsteps { gap: var(--s3); padding-top: var(--s4); }
html body .vsteps li { gap: var(--s3); padding: var(--s4) var(--s2) 0 0; }
html body :where(.vsteps li) { font-size: 13px !important; line-height: 1.5 !important; }
@media (min-width: 721px) { html body .vsteps li { white-space: nowrap; } }
html body .sol .h3 { margin: var(--s6) 0 var(--s3); }
html body :where(.sol .c) { font-size: var(--t5) !important; font-weight: 400 !important; letter-spacing: normal !important; line-height: 1.75 !important; }
html body .sol .c { margin: 0; }
html body .sol .sol-go { margin-top: var(--s5); }


:root { --sec-y: clamp(64px, 6.7vw, 96px); }
html body .sec { padding-top: var(--sec-y); padding-bottom: var(--sec-y); }
html body #why, html body #products, html body #solutions { padding-top: var(--sec-y); padding-bottom: var(--sec-y); }
html body .sec.closing { padding-bottom: calc(var(--sec-y) * 1.5); }
html body .phero, html body .shero { padding-bottom: clamp(48px, 5vw, 72px); }
html body .closing2 { padding-top: clamp(72px, 9vw, 128px); }

html body :where(.sec, .blk, .closing2) :where(.h2, .big) + :where(.lead, .catch) { margin-top: var(--s5) !important; }
html body :where(.sec, .blk) .lead + .lead { margin-top: var(--s4) !important; }

html body :where(.sec, .blk) :where(.h2, .lead, .relp) + :where(.sols, .themes, .steps, .pts, .dg, .quote, .tbl, .faq, .shift, .track, .tabs, .people, .news, .phase5, .stale, .hz, .feature, .index, .rows, .cards, .flow, .grid, .layers, .stages, .roles-g, .cgrid) { margin-top: var(--s7) !important; }

html body :where(.sec, .blk, .closing2) :where(.lead, .relp, .c) + :where(.lnk, .acts, .more) { margin-top: var(--s6) !important; }
html body :where(.sec) :where(.themes, .steps, .vx-w) + :where(.note) { margin-top: var(--s4) !important; }
html body :where(.sec) :where(.note) + :where(.more) { margin-top: var(--s5) !important; }
html body :where(.sec, .blk, .closing2) .lead:has(+ .lnk, + .acts, + .more) { margin-bottom: 0 !important; }
html body #products .pwrap { margin-top: var(--s7); }


:root { --line: #2a2b2e; --line-soft: #1b1c1f; --link-line: rgba(242,239,233,.32); }

html body :where(.pts, .faq) { border-top: 1px solid var(--line) !important; }
html body #about .vx { border-top: 1px solid var(--line) !important; }
html body #about .vx li { border-bottom: 1px solid var(--line) !important; }
html body #about .val { border-top: 1px solid var(--line) !important; }
html body .hx .hx-band { border-top: 1px solid var(--line) !important; }
html body .viz { border: 0 !important; background: transparent !important; }
html body .exnote { border-left: 1px solid var(--line) !important; }
html body .card.no { border-style: solid !important; }
html body .flow li::after { border-top-style: solid !important; border-left-style: solid !important; }

html body .lnk { border-bottom: 1px solid var(--link-line) !important; padding-bottom: 8px; }
html body .lnk:hover, html body .lnk:focus-visible { border-bottom-color: var(--text) !important; }
html body .lnk.primary { border-bottom-color: transparent !important; }

html body .quote p { border-left: 1px solid var(--signal) !important; }
html body .row.on { border-left-width: 1px !important; }
html body .vsteps li { border-top: 1px solid var(--line) !important; }
html body .vsteps li.on, html body .vsteps li.done { border-top-color: var(--signal) !important; }

html body .vsteps li::before { width: auto !important; height: auto !important; border: 0 !important; background: none !important; display: block !important; color: var(--text) !important; }
html body .vsteps li.on::before, html body .vsteps li.done::before { color: var(--signal) !important; }

html body :where(a, button, summary, [tabindex]):focus-visible { outline: 1px solid var(--signal) !important; outline-offset: 4px; }
html body .row:focus-visible { outline-offset: -1px; }



html body .lnk:not(.primary) { border-bottom: 0 !important; padding-bottom: 0 !important; gap: 16px; min-height: 32px; }
html body .lnk:not(.primary) .arr {
  width: 32px; height: 10px; vertical-align: middle; color: var(--signal);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 10' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Cpath d='M0 5h78.5M74 1l4.5 4-4.5 4'/%3E%3C/svg%3E") right center / 80px 10px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 10' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Cpath d='M0 5h78.5M74 1l4.5 4-4.5 4'/%3E%3C/svg%3E") right center / 80px 10px no-repeat;
  transition: width .45s cubic-bezier(.2,.8,.2,1), transform .45s cubic-bezier(.2,.8,.2,1) !important; transform: none !important; }
html body .lnk:not(.primary):hover .arr, html body .lnk:not(.primary):focus-visible .arr { width: 48px; }
html body .lnk:not(.primary) .arr.ext { width: 12px; height: 12px; -webkit-mask: none; mask: none; background: none; position: relative; }
html body .lnk:not(.primary) .arr.ext::before { content: ""; position: absolute; inset: 0; background: var(--signal);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M4 12L12 4M5 4h7v7'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M4 12L12 4M5 4h7v7'/%3E%3C/svg%3E") center / contain no-repeat; }
html body .lnk:not(.primary):hover .arr.ext { width: 12px; transform: translate(2px, -2px) !important; }

html body .lnk:not(.primary) { background: linear-gradient(var(--signal), var(--signal)) left bottom / 0 1px no-repeat; transition: background-size .45s cubic-bezier(.2,.8,.2,1); padding-bottom: 6px !important; }
html body .lnk:not(.primary):hover { background-size: 100% 1px; }


html body .lnk.primary { display: inline-flex !important; align-items: center; justify-content: space-between; gap: 28px !important; min-height: 64px; padding: 0 28px 0 32px !important;
  background: var(--signal); color: #fff !important; border: 0 !important; border-radius: 2px; font-weight: 700 !important; letter-spacing: .06em !important;
  box-shadow: 0 0 0 1px rgba(120,175,255,.35) inset, 0 10px 32px -12px rgba(44,122,255,.65);
  transition: background-color .3s, box-shadow .3s, transform .3s cubic-bezier(.2,.8,.2,1); }
html body .lnk.primary::after { display: none !important; }
html body .lnk.primary .arr { position: static !important; margin: 0 !important; width: 16px !important; height: 16px !important; color: #fff !important; }
html body .lnk.primary:hover { background: #3f8bff; box-shadow: 0 0 0 1px rgba(160,200,255,.6) inset, 0 14px 44px -10px rgba(44,122,255,.85); transform: translateY(-1px); }
html body .lnk.primary:hover .arr { color: #fff !important; }
html body .lnk.primary:focus-visible { outline: 1px solid #fff !important; outline-offset: 4px; }

html body .nav .cta { min-height: 44px; padding: 0 18px 0 22px; gap: 14px; align-items: center; background: var(--signal); color: #fff !important; border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(120,175,255,.35) inset, 0 8px 24px -12px rgba(44,122,255,.7); transition: background-color .3s, box-shadow .3s; }
html body .nav .cta .arr { color: #fff !important; }
html body .nav .cta:hover { background: #3f8bff; box-shadow: 0 0 0 1px rgba(160,200,255,.6) inset, 0 10px 32px -10px rgba(44,122,255,.9); }
html body .nav .cta:hover .arr { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { html body .lnk.primary, html body .lnk .arr { transition: none !important; } html body .lnk.primary:hover { transform: none; } }
html body .lnk { word-break: keep-all; overflow-wrap: anywhere; }


html body .lnk:not(.primary) { position: relative; gap: 14px !important; padding: 0 2px 12px 0 !important;
  background: linear-gradient(var(--signal), var(--signal)) left bottom / 0 1px no-repeat, linear-gradient(var(--line), var(--line)) left bottom / 100% 1px no-repeat !important;
  transition: background-size .5s cubic-bezier(.2,.8,.2,1) !important; }
html body .lnk:not(.primary):hover, html body .lnk:not(.primary):focus-visible { background-size: 100% 1px, 100% 1px !important; }
html body .lnk:not(.primary)::before { content: ""; flex: none; width: 6px; height: 6px; background: var(--signal); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
html body .lnk:not(.primary):hover::before { transform: rotate(45deg) scale(1.15); }
html body .lnk:not(.primary) .arr:not(.ext) { display: none !important; }
html body .lnk:not(.primary) .arr.ext { width: 10px !important; height: 10px !important; opacity: .8; }

html body .lnk .roll { display: inline-block; overflow: hidden; height: 1.5em; line-height: 1.5; vertical-align: top; }
html body .lnk .roll-i { display: block; transition: transform .5s cubic-bezier(.65,0,.35,1); }
html body .lnk .roll-i::after { content: attr(data-t); display: block; color: var(--accent-hover); }
html body .lnk:hover .roll-i, html body .lnk:focus-visible .roll-i { transform: translateY(-50%); }
@media (prefers-reduced-motion: reduce) { html body .lnk .roll-i { transition: none; } html body .lnk:hover .roll-i { transform: none; color: var(--accent-hover); } }
html body .lnk .roll { white-space: nowrap; max-width: 100%; }
@media (max-width: 600px) {   
  html body .lnk .roll { white-space: normal; height: auto; overflow: visible; }
  html body .lnk .roll-i::after { display: none; }
  html body .lnk:hover .roll-i { transform: none; }
  html body .lnk.primary { max-width: 100%; }
}


html body .mega .cols { padding: 40px 40px 32px !important; gap: 0 64px !important; }
html body .mega .cols > div { display: flex; flex-direction: column; gap: 24px; }
html body .mega .cols > div > .grp:not(:first-child) { margin-top: 16px !important; }
html body :where(.mega .grp) { font-size: 13px !important; font-weight: 600 !important; letter-spacing: .04em !important; line-height: 1.4 !important; }
html body .mega .grp { margin: 0 0 -4px !important; }
html body .mega .it { grid-template-columns: 32px 1fr !important; gap: 16px !important; align-items: start; padding: 8px 12px !important; margin: 0 -12px !important; border-radius: 6px; }
html body .mega .it .ic { width: 32px; height: 32px; margin-top: 2px; color: var(--text); }
html body .mega .it .t { gap: 2px !important; }
html body :where(.mega .it b) { font-size: 17px !important; font-weight: 600 !important; letter-spacing: .01em !important; line-height: 1.35 !important; }
html body :where(.mega .it .d) { font-size: 15px !important; font-weight: 400 !important; letter-spacing: 0 !important; line-height: 1.5 !important; }
html body :where(.mega .it .stage, .mega .it .rel) { font-size: 12px !important; letter-spacing: .04em !important; line-height: 1.5 !important; }
html body .mega .it .stage, html body .mega .it .rel { margin-top: 6px !important; }

html body .mega .foot { flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 4px !important; padding: 24px 40px 28px !important; }
html body :where(.mega .foot a) { font-size: 16px !important; font-weight: 600 !important; letter-spacing: .01em !important; }
html body :where(.mega .foot span) { font-size: 14px !important; font-weight: 400 !important; letter-spacing: 0 !important; line-height: 1.5 !important; }

html body .mega .side { gap: 0; }
html body .mega .card2 { padding: 32px 32px !important; gap: 6px !important; }
html body :where(.mega .card2 h4) { font-size: 15px !important; font-weight: 600 !important; letter-spacing: .01em !important; line-height: 1.45 !important; }
html body :where(.mega .card2 p) { font-size: 14px !important; font-weight: 400 !important; letter-spacing: 0 !important; line-height: 1.6 !important; }
html body .mega .card2 p { margin: 0 0 10px !important; }
html body :where(.mega .card2 a) { font-size: 14px !important; font-weight: 600 !important; letter-spacing: .04em !important; }
html body .mega .card2 a { align-self: stretch; display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-height: 40px; padding: 0 20px !important;
  border: 1px solid var(--line) !important; border-radius: 999px !important; color: var(--accent-hover) !important; transition: border-color .25s, background-color .25s; }
html body .mega .card2 a:hover { border-color: var(--signal) !important; background: rgba(44,122,255,.08); }
html body .mega .card2 a .arr { width: 10px; height: 10px; }
html body .mega .card2 a.pri { background: var(--signal); border-color: var(--signal) !important; color: #fff !important; }
html body .mega .card2 a.pri:hover { background: #3f8bff; }
html body .mega :where(.card2 p, .it .d) { line-break: strict; text-wrap: pretty; }


:root { --canvas: #0b0c0e; --surface: #15171c; --bg-deep: #08090b; --bg-raise: #111318; }
html body { background: var(--canvas); }


html body #why { background: radial-gradient(60% 70% at 100% 0%, rgba(44,122,255,.07), transparent 70%), var(--bg-raise); }
html body #why .pane { background: var(--canvas); }
html body #about { background: var(--bg-deep); }
html body #products { background: var(--bg-raise); }
html body #products .row.on { background: linear-gradient(90deg, rgba(44,122,255,.12), transparent 70%); }
html body #products .media { background: var(--canvas); }
html body #rnd { background: var(--bg-deep); }
html body #process { background: linear-gradient(180deg, #0a1124 0%, #0b1020 55%, var(--canvas) 100%); }
html body #team { background: var(--bg-raise); }
html body #news { background: var(--bg-deep); }
html body #contact { background: radial-gradient(55% 80% at 70% 50%, rgba(44,122,255,.16), transparent 70%), linear-gradient(180deg, var(--bg-deep), #0a1022); }
html body .ftr { background: var(--bg-deep); }
html body .ftr .wrap { border-top: 0 !important; }


html body .blk { padding-bottom: clamp(72px, 9vw, 128px) !important; }
html body .blk:nth-of-type(even):not(.light) { background: var(--bg-raise); }
html body .blk:not(.light) > .wrap { border-top: 0 !important; padding-top: 0 !important; }
html body .closing2:not(.light) { background: radial-gradient(55% 80% at 70% 50%, rgba(44,122,255,.14), transparent 70%), linear-gradient(180deg, var(--bg-deep), #0a1022); }
html body .phero:not(.light), html body .shero:not(.light) { background: radial-gradient(50% 80% at 85% 0%, rgba(44,122,255,.08), transparent 70%), var(--canvas); }


html body .sec { position: relative; }
html body .sec > .wrap, html body .sec > .pwrap { position: relative; z-index: 2; }
html body :where(#why, #solutions, #products, #team)::after { content: ""; position: absolute; z-index: 0; pointer-events: none; top: 6%; bottom: 0; width: min(62vw, 980px); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 800' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='1' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.085'/%3E%3Cstop offset='.55' stop-color='%23fff' stop-opacity='.035'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23g)' d='M0 600 L560 250 C640 200 720 186 800 206 L1000 262 L1000 540 C920 512 840 506 760 532 L0 800 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
html body :where(#why, #products)::after { right: 0; }
html body :where(#solutions, #team)::after { left: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 800' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.085'/%3E%3Cstop offset='.55' stop-color='%23fff' stop-opacity='.035'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath transform='translate(1000 0) scale(-1 1)' fill='url(%23g)' d='M0 600 L560 250 C640 200 720 186 800 206 L1000 262 L1000 540 C920 512 840 506 760 532 L0 800 Z'/%3E%3C/svg%3E"); }
@media (max-width: 760px) { html body :where(#why, #solutions, #products, #team)::after { width: 100%; top: 40%; opacity: .8; } }




html body :where(#why, #solutions, #products, #team)::after { background-size: contain !important; background-repeat: no-repeat !important; width: min(34vw, 500px) !important; height: min(30vw, 440px) !important; bottom: auto !important; left: auto !important; }

html body :where(#why, #solutions, #products)::after { top: calc(var(--sec-y) - 24px) !important; right: max(24px, calc((100vw - 1440px) / 2 + 48px)) !important; background-position: right top !important; }
html body #why::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='245 304 550 483'%3E%3Cdefs%3E%3ClinearGradient id='t' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.10'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='.05'/%3E%3C/linearGradient%3E%3ClinearGradient id='l' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.055'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='r' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.028'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23t)' fill-opacity='0.55' d='M520.0 451.1L792.8 608.6L520.0 766.1L247.2 608.6Z'/%3E%3Cpath fill='url(%23l)' fill-opacity='0.55' d='M247.2 608.6L520.0 766.1L520.0 785.0L247.2 627.5Z'/%3E%3Cpath fill='url(%23r)' fill-opacity='0.55' d='M792.8 608.6L520.0 766.1L520.0 785.0L792.8 627.5Z'/%3E%3Cpath fill='url(%23t)' fill-opacity='0.7000000000000001' d='M520.0 402.8L792.8 560.3L520.0 717.8L247.2 560.3Z'/%3E%3Cpath fill='url(%23l)' fill-opacity='0.7000000000000001' d='M247.2 560.3L520.0 717.8L520.0 736.7L247.2 579.2Z'/%3E%3Cpath fill='url(%23r)' fill-opacity='0.7000000000000001' d='M792.8 560.3L520.0 717.8L520.0 736.7L792.8 579.2Z'/%3E%3Cpath fill='url(%23t)' fill-opacity='0.8500000000000001' d='M520.0 354.5L792.8 512.0L520.0 669.5L247.2 512.0Z'/%3E%3Cpath fill='url(%23l)' fill-opacity='0.8500000000000001' d='M247.2 512.0L520.0 669.5L520.0 688.4L247.2 530.9Z'/%3E%3Cpath fill='url(%23r)' fill-opacity='0.8500000000000001' d='M792.8 512.0L520.0 669.5L520.0 688.4L792.8 530.9Z'/%3E%3Cpath fill='url(%23t)' fill-opacity='1.0' d='M520.0 306.2L792.8 463.7L520.0 621.2L247.2 463.7Z'/%3E%3Cpath fill='url(%23l)' fill-opacity='1.0' d='M247.2 463.7L520.0 621.2L520.0 640.1L247.2 482.6Z'/%3E%3Cpath fill='url(%23r)' fill-opacity='1.0' d='M792.8 463.7L520.0 621.2L520.0 640.1L792.8 482.6Z'/%3E%3C/svg%3E") !important; }
html body #solutions::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='16 -32 628 724'%3E%3Cdefs%3E%3ClinearGradient id='t' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.10'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='.05'/%3E%3C/linearGradient%3E%3ClinearGradient id='l' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.055'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='r' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.028'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23t)' fill-opacity='1.0' d='M330.0 -30.0L641.8 150.0L330.0 330.0L18.2 150.0Z'/%3E%3Cpath fill='url(%23l)' fill-opacity='1.0' d='M18.2 150.0L330.0 330.0L330.0 690.0L18.2 510.0Z'/%3E%3Cpath fill='url(%23r)' fill-opacity='1.0' d='M641.8 150.0L330.0 330.0L330.0 690.0L641.8 510.0Z'/%3E%3C/svg%3E") !important; width: min(26vw, 380px) !important; }
html body #products::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='233 393 584 504'%3E%3Cdefs%3E%3ClinearGradient id='t' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.10'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='.05'/%3E%3C/linearGradient%3E%3ClinearGradient id='l' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.055'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='r' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.028'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23t)' fill-opacity='0.7' d='M330.0 440.0L425.3 495.0L330.0 550.0L234.7 495.0Z'/%3E%3Cpath fill='url(%23l)' fill-opacity='0.7' d='M234.7 495.0L330.0 550.0L330.0 670.0L234.7 615.0Z'/%3E%3Cpath fill='url(%23r)' fill-opacity='0.7' d='M425.3 495.0L330.0 550.0L330.0 670.0L425.3 615.0Z'/%3E%3Cpath fill='url(%23t)' fill-opacity='0.7999999999999999' d='M459.9 425.0L555.2 480.0L459.9 535.0L364.6 480.0Z'/%3E%3Cpath fill='url(%23l)' fill-opacity='0.7999999999999999' d='M364.6 480.0L459.9 535.0L459.9 745.0L364.6 690.0Z'/%3E%3Cpath fill='url(%23r)' fill-opacity='0.7999999999999999' d='M555.2 480.0L459.9 535.0L459.9 745.0L555.2 690.0Z'/%3E%3Cpath fill='url(%23t)' fill-opacity='0.8999999999999999' d='M589.8 410.0L685.1 465.0L589.8 520.0L494.5 465.0Z'/%3E%3Cpath fill='url(%23l)' fill-opacity='0.8999999999999999' d='M494.5 465.0L589.8 520.0L589.8 820.0L494.5 765.0Z'/%3E%3Cpath fill='url(%23r)' fill-opacity='0.8999999999999999' d='M685.1 465.0L589.8 520.0L589.8 820.0L685.1 765.0Z'/%3E%3Cpath fill='url(%23t)' fill-opacity='1.0' d='M719.7 395.0L815.0 450.0L719.7 505.0L624.4 450.0Z'/%3E%3Cpath fill='url(%23l)' fill-opacity='1.0' d='M624.4 450.0L719.7 505.0L719.7 895.0L624.4 840.0Z'/%3E%3Cpath fill='url(%23r)' fill-opacity='1.0' d='M815.0 450.0L719.7 505.0L719.7 895.0L815.0 840.0Z'/%3E%3C/svg%3E") !important; }
html body #team::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='185 218 350 654'%3E%3Cdefs%3E%3ClinearGradient id='t' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.10'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='.05'/%3E%3C/linearGradient%3E%3ClinearGradient id='l' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.055'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='r' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.028'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23t)' fill-opacity='1.0' d='M360.0 220.0L533.2 320.0L360.0 420.0L186.8 320.0Z'/%3E%3Cpath fill='url(%23l)' fill-opacity='1.0' d='M186.8 320.0L360.0 420.0L360.0 720.0L186.8 620.0Z'/%3E%3Cpath fill='url(%23r)' fill-opacity='1.0' d='M533.2 320.0L360.0 420.0L360.0 720.0L533.2 620.0Z'/%3E%3Cpath fill='url(%23t)' fill-opacity='0.85' d='M360.0 470.0L533.2 570.0L360.0 670.0L186.8 570.0Z'/%3E%3Cpath fill='url(%23l)' fill-opacity='0.85' d='M186.8 570.0L360.0 670.0L360.0 870.0L186.8 770.0Z'/%3E%3Cpath fill='url(%23r)' fill-opacity='0.85' d='M533.2 570.0L360.0 670.0L360.0 870.0L533.2 770.0Z'/%3E%3C/svg%3E") !important; top: auto !important; bottom: 0 !important; left: max(24px, calc((100vw - 1440px) / 2 + 48px)) !important; right: auto !important; width: min(30vw, 440px) !important; height: min(26vw, 380px) !important; background-position: left bottom !important; }
@media (max-width: 900px) { html body :where(#why, #solutions, #products, #team)::after { display: none; } }


html body .ftx { padding: 0 var(--gutter) !important; }
html body .ftx .wrap { border-top: 0 !important; }
html body .ftx .ft-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px 64px; flex-wrap: wrap; padding: 96px 0 48px; border-bottom: 1px solid var(--line); }
html body .ftx .logo { font-size: 20px !important; }
html body .ftx .logo img { height: 40px; width: auto; }
html body .ftx .ft-tag { margin: 20px 0 0; font-size: 15px !important; line-height: 1.7 !important; letter-spacing: .02em !important; color: var(--text) !important; }
html body .ftx .ft-addr { font-style: normal; font-size: 13px !important; line-height: 1.8 !important; letter-spacing: .02em !important; color: var(--text) !important; text-align: right; }
html body .ftx .ft-nav { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 40px 32px; padding: 48px 0 72px; }
html body .ftx .ft-nav h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 20px !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: .08em !important; line-height: 1.5 !important; color: var(--text) !important; }
html body .ftx .ft-nav h2::before { content: ""; width: 5px; height: 5px; background: var(--signal); flex: none; }
html body .ftx .ft-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
html body .ftx .ft-nav li a { display: inline-flex; align-items: center; gap: 8px; padding: 0 !important; font-size: 14px !important; font-weight: 400 !important; letter-spacing: .02em !important; line-height: 1.6 !important; color: var(--text) !important; text-decoration: none; transition: color .2s; }
html body .ftx .ft-nav li a:hover { color: var(--accent-hover) !important; }
html body .ftx .ft-nav .arr.ext { width: 9px; height: 9px; opacity: .7; }
html body .ftx .ft-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 24px 0 32px; border-top: 1px solid var(--line); }
html body .ftx .ft-bar, html body .ftx .ft-bar a, html body .ftx .ft-bar span { font-size: 12px !important; font-weight: 400 !important; letter-spacing: .06em !important; color: var(--text) !important; text-decoration: none; }
html body .ftx .ft-bar a:hover { color: var(--accent-hover) !important; }
@media (max-width: 1000px) { html body .ftx .ft-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  html body .ftx .ft-top { padding: 64px 0 32px; align-items: flex-start; flex-direction: column; }
  html body .ftx .ft-addr { text-align: left; }
  html body .ftx .ft-nav { grid-template-columns: 1fr 1fr; gap: 32px 24px; padding: 40px 0 48px; }
  html body .ftx .ft-nav ul { gap: 0; } html body .ftx .ft-nav li a { padding: 10px 0 !important; }
  html body .ftx .ft-bar { flex-direction: column-reverse; align-items: flex-start; }
}
html body .ftx .ft-nav .arr.ext { display: inline-block !important; margin: 0 !important; }


html body .hl, html body [data-hairline] { --hairline-stroke: 1 !important; --hairline-plate: #14171d !important; --hairline-edge: #d9dce2 !important;
  --hairline-mid: #6b7380 !important; --hairline-lo: #2f353e !important; --hairline-hi: #4d8dff !important; }
html body .sigils svg path { stroke-width: 1px !important; }


html body .fine { padding: 0 var(--gutter) clamp(40px, 5vw, 64px); }
html body .fine .wrap { max-width: var(--maxw); margin: 0 auto; border-top: 1px solid var(--line); padding-top: 20px; }
html body .fine ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-width: 880px; }
html body :where(.fine li, .fine-inline) { font-size: 12px !important; line-height: 1.7 !important; letter-spacing: .02em !important; font-weight: 400 !important; color: var(--text) !important; }
html body .fine li { padding-left: 1.2em; text-indent: -1.2em; }
html body .fine li::before { content: "※ "; }
html body .fine-inline { margin: 16px 0 0 !important; }
html body .light .fine, html body .fine:where(.light *) { background: transparent; }


html body .light .blk { background: transparent !important; }
html body .light .blk:nth-of-type(even) { background: #eceef2 !important; }
html body .light .closing2 { background: var(--canvas) !important; }
html body .blk { padding-top: clamp(64px, 7vw, 104px) !important; padding-bottom: clamp(64px, 7vw, 104px) !important; }


html body #contact .cta2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px 72px; align-items: start; max-width: none; }
html body #contact .cta2-k { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; font-size: 12px !important; font-weight: 700 !important; letter-spacing: .08em !important; }
html body #contact .cta2-k::before { content: ""; width: 6px; height: 6px; background: var(--signal); }
html body #contact .cta2-ok { list-style: none; margin: 28px 0 36px; padding: 0; display: grid; gap: 10px; }
html body :where(#contact .cta2-ok li) { font-size: 15px !important; line-height: 1.6 !important; font-weight: 500 !important; letter-spacing: .02em !important; }
html body #contact .cta2-ok li { display: flex; gap: 12px; align-items: baseline; }
html body #contact .cta2-ok li::before { content: ""; flex: none; width: 12px; height: 7px; border-left: 1.5px solid var(--accent-hover); border-bottom: 1.5px solid var(--accent-hover); transform: translateY(-3px) rotate(-45deg); }
html body #contact .cta2-r { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
html body #contact .pc { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 20px; min-height: 172px; text-decoration: none; color: var(--text);
  background: rgba(13,15,20,.72); border: 1px solid var(--line); border-radius: 4px; backdrop-filter: blur(6px); transition: border-color .25s, background-color .25s, transform .3s cubic-bezier(.2,.8,.2,1); }
html body #contact .pc:hover, html body #contact .pc:focus-visible { border-color: var(--signal); background: rgba(20,32,62,.8); transform: translateY(-2px); }
html body :where(#contact .pc-who) { font-size: 12px !important; font-weight: 700 !important; letter-spacing: .06em !important; line-height: 1.5 !important; color: var(--accent-ink) !important; }
html body :where(#contact .pc-q) { font-size: 16px !important; font-weight: 700 !important; line-height: 1.6 !important; letter-spacing: .02em !important; }
html body :where(#contact .pc-go) { margin-top: auto; font-size: 13px !important; font-weight: 500 !important; letter-spacing: .02em !important; }
html body #contact .pc-go { display: inline-flex; align-items: center; gap: 8px; padding-top: 8px; }
html body #contact .pc-go::after { content: ""; width: 14px; height: 10px; background: var(--signal); transition: transform .3s;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Cpath d='M0 5h14.5M10.5 1l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Cpath d='M0 5h14.5M10.5 1l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat; }
html body #contact .pc:hover .pc-go::after { transform: translateX(4px); }
html body #contact .pc-more { grid-column: 1 / -1; min-height: 0; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; background: transparent; border-style: dashed; }
html body #contact .pc-more { border-style: solid; }
html body #contact .pc-more .pc-go { margin-top: 0; padding-top: 0; }
@media (max-width: 960px) { html body #contact .cta2 { grid-template-columns: 1fr; } }
@media (max-width: 560px) { html body #contact .cta2-r { grid-template-columns: 1fr; } html body #contact .pc { min-height: 0; } }


html body .nlist { border-top: 1px solid var(--line) !important; }
html body .nlist li { padding: 24px 0 !important; grid-template-columns: 120px 128px minmax(0, 1fr) !important; }
html body .nlist li[hidden] { display: none; }
html body :where(.nlist .h) { font-size: 17px !important; font-weight: 600 !important; line-height: 1.6 !important; letter-spacing: .02em !important; }
html body .nlist a.h { color: inherit; text-decoration: none; transition: color .2s; }
/* 下線は文字の部分だけ（リンクはグリッドのセル幅いっぱいに広がるため、内側の span に付ける。折り返した行ごとに引く） */
html body .nlist a.h .h-t { background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat; transition: background-size .4s; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
html body .nlist a.h:hover { color: var(--signal); }
html body .nlist a.h:hover .h-t { background-size: 100% 1px; }
html body .nlist .t, html body .news .t { border: 1px solid var(--line) !important; padding: 2px 10px !important; justify-self: start; white-space: nowrap; }
html body .ncat { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 32px; }
html body .ncat button { all: unset; cursor: pointer; padding: 8px 18px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; font-weight: 600; letter-spacing: .04em; color: var(--text); transition: border-color .2s, background-color .2s, color .2s; }
html body .ncat button:hover { border-color: var(--signal); }
html body .ncat button[aria-selected="true"] { background: var(--signal); border-color: var(--signal); color: #fff; }
html body .ncat button:focus-visible { outline: 1px solid var(--signal); outline-offset: 3px; }
@media (max-width: 720px) { html body .nlist li { grid-template-columns: auto auto !important; } }

html body #news .news .nrow { display: grid; grid-template-columns: 120px 128px minmax(0, 1fr); gap: 8px 24px; align-items: baseline; padding: 20px 0; color: inherit; text-decoration: none; }
html body #news .news li { padding: 0 !important; display: block !important; border-bottom: 1px solid var(--line); }
html body #news .news .nrow:hover .h { color: var(--accent-hover); }
html body #news .more { margin-top: var(--s6) !important; }
@media (max-width: 720px) { html body #news .news .nrow { grid-template-columns: auto auto; } html body #news .news .nrow .h { grid-column: 1 / -1; } }

html body :where(.news .h, .nlist .h) { font-size: 15px !important; font-weight: 500 !important; line-height: 1.6 !important; letter-spacing: .02em !important; }


html body #solutions .solx { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: var(--s7); }
html body #solutions .sx { display: flex; flex-direction: column; gap: 10px; padding: 28px 24px 24px; min-height: 230px; color: var(--text); text-decoration: none;
  background: rgba(13,15,20,.6); border: 1px solid var(--line); border-radius: 4px; transition: border-color .25s, background-color .25s, transform .3s cubic-bezier(.2,.8,.2,1); }
html body #solutions .sx:hover, html body #solutions .sx:focus-visible { border-color: var(--signal); background: rgba(20,32,62,.7); transform: translateY(-2px); }
html body #solutions .sx .ic { width: 36px; height: 36px; color: var(--text); margin-bottom: 10px; }
html body :where(#solutions .sx-t) { font-size: 19px !important; font-weight: 700 !important; letter-spacing: .02em !important; line-height: 1.45 !important; }
html body :where(#solutions .sx-c) { font-size: 15px !important; font-weight: 400 !important; line-height: 1.7 !important; letter-spacing: .02em !important; }
html body :where(#solutions .sx-go) { font-size: 13px !important; font-weight: 500 !important; letter-spacing: .02em !important; }
html body #solutions .sx-go { margin-top: auto; padding-top: 12px; display: inline-flex; align-items: center; gap: 8px; }
html body #solutions .sx-go::after { content: ""; width: 14px; height: 10px; background: var(--signal); transition: transform .3s;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Cpath d='M0 5h14.5M10.5 1l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Cpath d='M0 5h14.5M10.5 1l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat; }
html body #solutions .sx:hover .sx-go::after { transform: translateX(4px); }
html body #solutions .more { margin-top: var(--s6) !important; }
@media (max-width: 1100px) { html body #solutions .solx { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { html body #solutions .solx { grid-template-columns: 1fr; } html body #solutions .sx { min-height: 0; } }

html body #products .pwrap, html body #products .pwrap.off { grid-template-columns: 1fr !important; }

html body .rnd-x { margin-top: 32px; }
html body .rnd-x .rnd-k { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font-size: 12px !important; font-weight: 700 !important; letter-spacing: .08em !important; }
html body .rnd-x .rnd-k::before { content: ""; width: 5px; height: 5px; background: var(--signal); }
html body .rnd-x .themes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 0; }
html body .rnd-x .theme { border-top: 0; padding-top: 0; }
html body .rnd-x .ph { margin: 0 0 12px; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface); }
html body .rnd-x .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
html body :where(.rnd-x .theme b) { font-size: 15px !important; font-weight: 700 !important; line-height: 1.5 !important; letter-spacing: .02em !important; }
@media (max-width: 720px) { html body .rnd-x .themes { grid-template-columns: 1fr; } }


html body #partners { background: var(--bg-deep); }
html body #news { background: var(--canvas); }
html body .kk { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; font-size: 12px !important; font-weight: 700 !important; letter-spacing: .08em !important; line-height: 1.5 !important; }
html body .kk::before { content: ""; width: 6px; height: 6px; background: var(--signal); flex: none; }
html body #why .why-lead { max-width: 760px; }
html body #why .vals { list-style: none; margin: var(--s8) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
html body #why .vals li { display: flex; flex-direction: column; gap: 10px; padding: 28px 32px 8px 0; }
html body #why .vals li + li { padding-left: 32px; border-left: 1px solid var(--line); }
html body :where(#why .vals-n) { font-family: var(--mono); font-size: 12px !important; font-weight: 700 !important; letter-spacing: .16em !important; color: var(--signal) !important; }
html body :where(#why .vals b) { font-size: 21px !important; font-weight: 700 !important; line-height: 1.45 !important; letter-spacing: .02em !important; }
html body :where(#why .vals li > span:last-child) { font-size: 15px !important; line-height: 1.75 !important; }
@media (max-width: 860px) { html body #why .vals { grid-template-columns: 1fr; } html body #why .vals li, html body #why .vals li + li { padding: 24px 0; border-left: 0; border-top: 1px solid var(--line); } html body #why .vals li:first-child { border-top: 0; } }

html body #about .who { margin-top: var(--s9); padding-top: var(--s7); border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px 64px; }
html body #about .who .kk { grid-column: 1 / -1; margin: 0; }
html body #about .facts2 { margin: 0; display: grid; gap: 16px; align-content: start; }
html body #about .facts2 div { display: grid; grid-template-columns: 56px 1fr; gap: 12px; }
html body :where(#about .facts2 dt) { font-size: 12px !important; font-weight: 700 !important; letter-spacing: .08em !important; line-height: 1.9 !important; }
html body :where(#about .facts2 dd) { font-size: 15px !important; line-height: 1.75 !important; margin: 0; }
html body #about .facts2 dd { margin: 0; }
html body #about .tm { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
html body #about .tm li { display: flex; flex-direction: column; gap: 6px; padding: 24px; border: 1px solid var(--line); border-radius: 4px; background: rgba(255,255,255,.015); }
html body :where(#about .tm-r) { font-size: 12px !important; font-weight: 700 !important; letter-spacing: .08em !important; color: var(--accent-ink) !important; }
html body :where(#about .tm b) { font-size: 21px !important; font-weight: 700 !important; letter-spacing: .06em !important; line-height: 1.5 !important; }
html body :where(#about .tm-d) { font-size: 14px !important; line-height: 1.75 !important; }
html body #about .ab-more { margin-top: var(--s6) !important; }
@media (max-width: 900px) { html body #about .who { grid-template-columns: 1fr; } html body #about .tm { grid-template-columns: 1fr; } }

html body #partners .plogo { list-style: none; margin: var(--s7) 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
html body #partners .plogo li { aspect-ratio: 5 / 2; border: 1px solid var(--line); border-radius: 4px; background: rgba(255,255,255,.015); }
html body :where(#partners .plogo-note) { font-size: 12px !important; letter-spacing: .04em !important; }
html body #partners .plogo-note { margin: 12px 0 0 !important; }
html body #partners .acts2 { list-style: none; margin: var(--s8) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
html body #partners .acts2 a { display: flex; flex-direction: column; gap: 6px; padding: 24px 24px 8px 0; color: var(--text); text-decoration: none; height: 100%; }
html body #partners .acts2 li + li a { padding-left: 24px; border-left: 1px solid var(--line); }
html body #partners .acts2 a:hover b { color: var(--accent-hover); }
html body :where(#partners .a2-k) { font-size: 12px !important; font-weight: 700 !important; letter-spacing: .08em !important; color: var(--accent-ink) !important; }
html body :where(#partners .acts2 b) { font-size: 17px !important; font-weight: 700 !important; line-height: 1.5 !important; letter-spacing: .02em !important; }
html body :where(#partners .a2-d) { font-size: 14px !important; line-height: 1.7 !important; }
@media (max-width: 960px) { html body #partners .plogo { grid-template-columns: repeat(3, 1fr); } html body #partners .acts2 { grid-template-columns: 1fr 1fr; } html body #partners .acts2 li a { padding: 20px 16px 12px 0 !important; border-left: 0 !important; } }
@media (max-width: 560px) { html body #partners .plogo { grid-template-columns: repeat(2, 1fr); } html body #partners .acts2 { grid-template-columns: 1fr; } }


html body #contact .cta3 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px 96px; align-items: center; }
html body #contact .cta3-l .lead { margin: var(--s5) 0 var(--s6) !important; }
html body #contact .cta3-r { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
html body #contact .cta3-r a { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 20px 40px 20px 0; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; transition: padding-left .3s cubic-bezier(.2,.8,.2,1); }
html body #contact .cta3-r a::after { content: ""; position: absolute; right: 4px; top: 50%; width: 16px; height: 10px; margin-top: -5px; background: var(--signal); transition: transform .3s;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Cpath d='M0 5h14.5M10.5 1l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Cpath d='M0 5h14.5M10.5 1l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat; }
html body #contact .cta3-r a:hover { padding-left: 8px; } html body #contact .cta3-r a:hover::after { transform: translateX(4px); }
html body :where(#contact .c3-who) { font-size: 12px !important; font-weight: 700 !important; letter-spacing: .06em !important; color: var(--accent-ink) !important; }
html body :where(#contact .c3-q) { font-size: 17px !important; font-weight: 600 !important; letter-spacing: .02em !important; line-height: 1.5 !important; }
@media (max-width: 960px) { html body #contact .cta3 { grid-template-columns: 1fr; } }
html body :where(#about .who2) { font-size: 14px !important; line-height: 1.8 !important; letter-spacing: .04em !important; }
html body #about .who2 { margin: var(--s8) 0 0 !important; padding-top: var(--s5); border-top: 1px solid var(--line); }
html body #about .ab-more { margin-top: var(--s5) !important; }
html body #products .row .stage { display: none; }            
html body #solutions .sx-go { display: none; }                
html body #solutions .sx { min-height: 0; padding-bottom: 28px; }


html body :where(#solutions .sx-w) { font-size: 13px !important; font-weight: 700 !important; line-height: 1.6 !important; letter-spacing: .04em !important; color: var(--accent-ink) !important; }
html body :where(#contact .c3-g) { position: relative; padding-left: 14px; margin-top: 2px; font-size: 14px !important; font-weight: 400 !important; line-height: 1.6 !important; letter-spacing: .02em !important; color: var(--text) !important; }
html body #contact .c3-g::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; background: var(--signal); }
html body #contact .cta3-r a { padding-top: 18px; padding-bottom: 18px; }
html body .hero.hx .head .lead { max-width: 46em !important; }
@media (max-width: 760px) { html body .hero.hx .head .lead br { display: none; } }


html body .hero.hx .hx-kk { margin: 0 0 var(--s4) !important; }
html body .hero.hx .hx-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin: var(--s6) 0 0 !important; }
html body #proof { padding-top: var(--s8); padding-bottom: var(--s8); }
html body #proof .pf { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 32px 72px; align-items: end; margin-top: var(--s5); padding-top: var(--s6); border-top: 1px solid var(--line); }
html body #proof .pf-n { display: flex; flex-direction: column; gap: 8px; }
html body :where(#proof .pf-n b) { font-size: clamp(56px, 7vw, 104px) !important; font-weight: 700 !important; line-height: .95 !important; letter-spacing: -.02em !important; color: var(--text) !important; font-variant-numeric: tabular-nums; }
html body :where(#proof .pf-n b small) { font-size: .3em !important; font-weight: 700 !important; margin-left: .15em; letter-spacing: .04em !important; color: var(--signal) !important; }
html body :where(#proof .pf-n > span) { font-size: 13px !important; font-weight: 700 !important; letter-spacing: .06em !important; color: var(--accent-ink) !important; }
html body :where(#proof .pf-t .h3) { font-size: clamp(20px, 1.8vw, 26px) !important; font-weight: 700 !important; line-height: 1.5 !important; margin: 0 !important; }
html body #proof .pf-t .more { margin-top: var(--s4) !important; }
html body #partners .acts2 { margin-top: var(--s6) !important; }
@media (max-width: 960px) { html body #proof .pf { grid-template-columns: 1fr 1fr; } html body #proof .pf-t { grid-column: 1 / -1; } }
html body #proof .pf-n b { white-space: nowrap; }
@media (max-width: 560px) { html body :where(#proof .pf-n b) { font-size: 52px !important; } html body #proof .pf { gap: 28px 24px; } }
html body .hero.hx .head .lead { max-width: 50em !important; }
@media (max-width: 560px) { html body .hero.hx .h1 { font-size: min(6.2vw, 30px) !important; line-height: 1.45 !important; } }


html body #about .vals { list-style: none; margin: var(--s8) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
html body #about .vals li { display: flex; flex-direction: column; gap: 10px; padding: 28px 32px 8px 0; }
html body #about .vals li + li { padding-left: 32px; border-left: 1px solid var(--line); }
html body :where(#about .vals-n) { font-family: var(--mono); font-size: 12px !important; font-weight: 700 !important; letter-spacing: .16em !important; color: var(--signal) !important; }
html body :where(#about .vals b) { font-size: 21px !important; font-weight: 700 !important; line-height: 1.45 !important; letter-spacing: .02em !important; }
html body :where(#about .vals li > span:last-child) { font-size: 15px !important; line-height: 1.75 !important; }
@media (max-width: 860px) { html body #about .vals { grid-template-columns: 1fr; } html body #about .vals li, html body #about .vals li + li { padding: 24px 0; border-left: 0; border-top: 1px solid var(--line); } html body #about .vals li:first-child { border-top: 0; } }
html body #proof .acts2 { list-style: none; margin: var(--s8) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
html body #proof .acts2 a { display: flex; flex-direction: column; gap: 6px; padding: 24px 24px 8px 0; color: var(--text); text-decoration: none; height: 100%; }
html body #proof .acts2 li + li a { padding-left: 24px; border-left: 1px solid var(--line); }
html body #proof .acts2 a:hover b { color: var(--accent-hover); }
html body :where(#proof .a2-k) { font-size: 12px !important; font-weight: 700 !important; letter-spacing: .08em !important; color: var(--accent-ink) !important; }
html body :where(#proof .acts2 b) { font-size: 17px !important; font-weight: 700 !important; line-height: 1.5 !important; letter-spacing: .02em !important; }
html body :where(#proof .a2-d) { font-size: 14px !important; line-height: 1.7 !important; }
html body #proof .acts2 { margin-top: var(--s6) !important; }
@media (max-width: 960px) { html body #proof .acts2 { grid-template-columns: 1fr 1fr; } html body #proof .acts2 li a { padding: 20px 16px 12px 0 !important; border-left: 0 !important; } }
@media (max-width: 560px) { html body #proof .acts2 { grid-template-columns: 1fr; } }
html body #proof .acts2 { margin-top: var(--s8) !important; }
html body #why .why-to { margin: var(--s8) 0 0 !important; padding-left: 20px; border-left: 2px solid var(--signal); max-width: 760px; }
html body :where(#why .why-to) { font-size: clamp(18px, 1.6vw, 22px) !important; font-weight: 700 !important; line-height: 1.7 !important; color: var(--text) !important; }
html body #about .ab-k { margin: var(--s8) 0 0 !important; }
html body #about .vals { margin-top: var(--s4) !important; }
html body #about .who2 { margin-top: var(--s7) !important; }
html body #solutions .sxp { margin-top: var(--s7); }
html body :where(#solutions .sxp-k) { font-size: 12px !important; font-weight: 700 !important; letter-spacing: .08em !important; color: var(--accent-ink) !important; margin: 0 0 12px !important; }
html body #solutions .sxp ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
html body #solutions .sxp a { display: flex; flex-direction: column; gap: 4px; padding: 18px 16px 18px 0; color: var(--text); text-decoration: none; }
html body #solutions .sxp li + li a { padding-left: 16px; border-left: 1px solid var(--line); }
html body #solutions .sxp a:hover b { color: var(--accent-hover); }
html body :where(#solutions .sxp b) { font-size: 17px !important; font-weight: 700 !important; letter-spacing: .02em !important; }
html body :where(#solutions .sxp a span) { font-size: 12px !important; letter-spacing: .04em !important; color: var(--text) !important; }
@media (max-width: 900px) { html body #solutions .sxp ul { grid-template-columns: 1fr 1fr; } html body #solutions .sxp li + li a { padding-left: 0; border-left: 0; } html body #solutions .sxp li a { border-bottom: 1px solid var(--line); } }


html body .sec.sf { padding-top: var(--sec-y) !important; padding-bottom: var(--sec-y) !important; }
html body .sec.sf::after { display: none !important; }
html body #about.sf, html body #products.sf, html body #company.sf { background: var(--canvas) !important; }
html body #solutions.sf { background: var(--bg-raise) !important; }
html body #technology.sf { background: radial-gradient(50% 80% at 72% 50%, rgba(44,122,255,.28), transparent 70%), radial-gradient(40% 60% at 20% 90%, rgba(44,122,255,.12), transparent 70%), var(--bg-deep) !important; }
html body .sf .sf-g { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px 96px; align-items: center; }
html body .sf .sf-t .h2 { margin: var(--s3) 0 0 !important; }
html body :where(.sf .sf-p) { font-size: 16px !important; line-height: 2 !important; letter-spacing: .03em !important; color: var(--text) !important; }
html body .sf .sf-t .sf-p { margin: var(--s6) 0 0 !important; max-width: 34em; }
html body .sf .sf-t .more, html body .sf .sf-glass .more { margin-top: var(--s6) !important; }

html body #about .sf-v { display: grid; grid-template-columns: auto auto; gap: 24px 64px; justify-content: start; padding: 40px 0 0; border-top: 1px solid var(--line); }
html body #about .sf-v .pf-n { display: flex; flex-direction: column; gap: 8px; }
html body :where(#about .pf-n b) { font-size: clamp(56px, 6.4vw, 96px) !important; font-weight: 700 !important; line-height: .95 !important; letter-spacing: -.02em !important; white-space: nowrap; color: var(--text) !important; }
html body :where(#about .pf-n b small) { font-size: .3em !important; margin-left: .15em; color: var(--signal) !important; }
html body :where(#about .pf-n > span) { font-size: 13px !important; font-weight: 700 !important; letter-spacing: .06em !important; color: var(--accent-ink) !important; }
html body #about .sf-cap, html body #about .sf-v .more { grid-column: 1 / -1; margin: 0 !important; }
html body :where(#about .sf-cap) { font-size: 17px !important; font-weight: 700 !important; line-height: 1.6 !important; }

html body .sf .sf-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
html body .sf .sf-tiles a { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: 160px; padding: 28px; border: 1px solid var(--line); border-radius: 4px; background: var(--canvas); color: var(--text); text-decoration: none; transition: border-color .3s, transform .3s; }
html body .sf .sf-tiles a:hover { border-color: var(--signal); transform: translateY(-2px); }
html body .sf .sf-tiles .ic { width: 32px; height: 32px; }
html body :where(.sf .sf-tiles b) { font-size: 19px !important; font-weight: 700 !important; letter-spacing: .02em !important; }

html body .sf .sf-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
html body .sf .sf-list a { display: grid; grid-template-columns: 180px 1fr; gap: 24px; align-items: baseline; padding: 22px 8px 22px 0; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; transition: padding-left .3s, background .3s; }
html body .sf .sf-list a:hover { padding-left: 12px; background: linear-gradient(90deg, rgba(44,122,255,.12), transparent 70%); }
html body :where(.sf .sf-list b) { font-size: 22px !important; font-weight: 700 !important; letter-spacing: .01em !important; }
html body :where(.sf .sf-list span) { font-size: 15px !important; line-height: 1.7 !important; }

html body .sf .sf-glass { padding: 56px 64px; border: 1px solid rgba(143,184,255,.28); border-radius: 8px; background: rgba(11,20,40,.45); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

html body .sf .sf-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; border-top: 1px solid var(--line); }
html body .sf .sf-links a { position: relative; display: block; padding: 20px 24px 20px 0; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; font-size: 16px; font-weight: 700; letter-spacing: .04em; }
html body .sf .sf-links a::after { content: ""; position: absolute; right: 4px; top: 50%; width: 6px; height: 6px; margin-top: -3px; background: var(--signal); transition: transform .3s; }
html body .sf .sf-links a:hover { color: var(--accent-hover); } html body .sf .sf-links a:hover::after { transform: translateX(4px); }
@media (max-width: 960px) {
  html body .sf .sf-g { grid-template-columns: 1fr; }
  html body .sf .sf-glass { padding: 36px 28px; }
  html body .sf .sf-list a { grid-template-columns: 1fr; gap: 4px; }
}
@media (max-width: 560px) {
  html body .sf .sf-tiles, html body .sf .sf-links { grid-template-columns: 1fr; }
  html body .sf .sf-tiles a { min-height: 0; gap: 20px; padding: 22px; }
  html body :where(#about .pf-n b) { font-size: 52px !important; }
  html body #about .sf-v { gap: 24px 28px; }
}


html body #contact .c3s a { flex-direction: row !important; align-items: baseline; gap: 24px; padding: 18px 32px 18px 0 !important; }
html body #contact .c3s a::after { width: 6px !important; height: 6px !important; margin-top: -3px !important; -webkit-mask: none !important; mask: none !important; background: var(--signal) !important; }
html body :where(#contact .c3s .c3-who) { flex: none; width: 10em; font-size: 13px !important; }
html body :where(#contact .c3s .c3-q) { font-size: 16px !important; font-weight: 600 !important; }
@media (max-width: 560px) { html body #contact .c3s a { flex-direction: column !important; gap: 4px; } html body :where(#contact .c3s .c3-who) { width: auto; } }


:root {
  --canvas: #f6f9ff; --surface: #ffffff; --bg-deep: #e7effd; --bg-raise: #eef4fe;
  --line: #d2ddf0; --line-soft: #e4ecf8;
  --text: #0e1c38; --text-2: #2c3a57; --text-3: #46557a;
  --link-line: rgba(14,28,56,.22);
  --accent-ink: #1f63e0; --accent-hover: #1a55c6;
  --sky: #e2ecfd; --l1: #c4d6f4; --l2: #bdcdea; --l3: #cfdaed;
  --streaks: linear-gradient(118deg, transparent 18%, rgba(255,255,255,.55) 27%, transparent 36%, transparent 58%, rgba(255,255,255,.4) 66%, transparent 74%);
}
html body .ftr, html body #technology.sf, html body .term {
  --canvas: #0c1a33; --surface: #12234a; --bg-deep: #091428; --bg-raise: #102142;
  --line: rgba(214,228,255,.16); --line-soft: rgba(214,228,255,.08);
  --text: #eef3fc; --text-2: #d4deef; --text-3: #b7c5de; --link-line: rgba(238,243,252,.35);
  --accent-ink: #8fb8ff; --accent-hover: #b3d0ff;
  color: var(--text);
}
html body { background: var(--canvas); color: var(--text); }
html body .nav { background: rgba(246,249,255,.88) !important; border-bottom: 1px solid var(--line); }
html body .mega { border-color: var(--line) !important; box-shadow: 0 24px 48px rgba(14,28,56,.08); }
html body .glow { color: var(--signal) !important; text-shadow: 0 0 18px rgba(44,122,255,.22) !important; animation: none !important; }


html body .hero.hx { background: var(--streaks), radial-gradient(60% 80% at 85% 20%, #eef4ff, transparent 70%), linear-gradient(160deg, #eaf1fe 0%, var(--sky) 55%, #dde9fe 100%); }
html body .hero.hx .hx-cv, html body .hero.hx .hx-vig { display: none !important; }
html body .hero.hx .hx-band { background: rgba(255,255,255,.55) !important; border-top: 1px solid var(--line) !important; }
html body :where(.hero.hx .hx-track span) { color: var(--text) !important; }
html body .hx-word { position: absolute; left: 0; right: 0; top: clamp(24px, 7vh, 72px); padding: 0 var(--gutter); pointer-events: none; user-select: none;
  font-family: "Archivo", var(--sans); font-weight: 400; font-size: clamp(56px, 9.6vw, 168px); line-height: 1.02; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; }
html body .hx-word .w { display: block; }
html body .hx-word i { font-style: normal; transition: color 1.2s; }
html body .hx-word i.c1 { color: var(--l1); } html body .hx-word i.c2 { color: var(--l2); } html body .hx-word i.c3 { color: var(--l3); }
@media (max-width: 760px) { html body .hx-word { font-size: 15vw; white-space: normal; } }


html body #about.sf, html body #products.sf, html body #company.sf { background: var(--canvas) !important; }
html body #solutions.sf, html body #news { background: var(--streaks), linear-gradient(160deg, #edf3fe, var(--sky)) !important; }
html body #technology.sf { background: radial-gradient(50% 80% at 72% 50%, rgba(44,122,255,.32), transparent 70%), radial-gradient(40% 60% at 20% 90%, rgba(44,122,255,.14), transparent 70%), var(--bg-deep) !important; }
html body #contact { background: var(--streaks), radial-gradient(55% 80% at 70% 50%, rgba(44,122,255,.10), transparent 70%), linear-gradient(180deg, var(--canvas), var(--sky)) !important; }
html body #contact .dust { display: none !important; }
html body .sf .sf-tiles a { background: #fff !important; }
html body .sf .sf-tiles a:hover { box-shadow: 0 12px 32px rgba(31,99,224,.10); }
html body .ftr { background: var(--canvas) !important; }


html body #process, html body .closing2:not(.light) { background: var(--streaks), linear-gradient(180deg, var(--canvas), var(--sky)) !important; }
html body .phero:not(.light), html body .shero:not(.light) { background: var(--streaks), linear-gradient(160deg, #eaf1fe, var(--sky)) !important; }
html body .hl, html body [data-hairline] { --hairline-plate: #ffffff !important; --hairline-edge: #2a3c5f !important; --hairline-mid: #7d8db0 !important; --hairline-lo: #c3cfe4 !important; }
html body .vsteps li.on::before { color: #fff !important; }
html body :where(.mega, .drawer) { background: var(--canvas); }

html body .light { --canvas: #f6f9ff; --surface: #ffffff; --line: #d2ddf0; --line-soft: #e4ecf8; --text: #0e1c38; --text-2: #2c3a57; --text-3: #46557a; }
html body .light .blk:nth-of-type(even), html body .blk.light:nth-of-type(even) { background: #edf3fe !important; }
html body .hx-word { font-size: clamp(44px, 7.4vw, 132px) !important; }
@media (max-width: 760px) { html body .hx-word { font-size: 9vw !important; } }

html body .kk::before, html body #contact .cta2-k::before, html body .ftx .ft-nav h2::before, html body #about .abx-lbl::before { content: none !important; display: none !important; }
html body .kk { gap: 0 !important; }


:root { --nav-h: 80px; --nav-gap: 20px; }
html body .nav { position: fixed !important; top: var(--nav-gap); left: var(--nav-gap); right: var(--nav-gap); z-index: 30;
  padding: 0 28px !important; border-radius: 8px; border: 1px solid rgba(255,255,255,.55) !important;
  background: rgba(255,255,255,.22) !important; -webkit-backdrop-filter: blur(45px) saturate(1.5); backdrop-filter: blur(45px) saturate(1.5);
  box-shadow: 0 8px 32px rgba(14,28,56,.06); }
html body .nav .wrap { height: var(--nav-h) !important; max-width: none !important; border-bottom: 0 !important; }
html body .nav .cta { border-radius: 999px !important; padding: 0 22px 0 26px !important; }
html body .mega { top: calc(var(--nav-h) + 8px) !important; left: 0 !important; right: 0 !important; border-radius: 8px;
  background: rgba(246,249,255,.82) !important; -webkit-backdrop-filter: blur(40px) saturate(1.4); backdrop-filter: blur(40px) saturate(1.4); border: 1px solid rgba(255,255,255,.6) !important; }
html body .scrim { inset: 0 !important; background: rgba(14,28,56,.12) !important; }
html body main { padding-top: calc(var(--nav-h) + var(--nav-gap) * 2); }
html body main:has(> .hero.hx) { padding-top: 0; }
html body .hero.hx { height: 100svh !important; min-height: 680px !important; }
html body .hero.hx .hx-word { top: calc(var(--nav-h) + var(--nav-gap) + clamp(16px, 4vh, 48px)) !important; }
html body [id] { scroll-margin-top: calc(var(--nav-h) + var(--nav-gap) * 2); }
@media (max-width: 960px) {
  :root { --nav-h: 64px; --nav-gap: 12px; }
  html body .nav { padding: 0 16px !important; }
  html body .drawer { inset: calc(var(--nav-h) + var(--nav-gap) * 2) var(--nav-gap) auto !important; max-height: calc(100svh - var(--nav-h) - var(--nav-gap) * 3); border-radius: 8px;
    background: rgba(246,249,255,.9) !important; -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px); border: 1px solid rgba(255,255,255,.6); }
}

html body .nav { background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html body .nav::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: rgba(255,255,255,.22); -webkit-backdrop-filter: blur(45px) saturate(1.5); backdrop-filter: blur(45px) saturate(1.5); }
html body .nav::before { z-index: 0 !important; }
html body .nav .wrap { position: relative; z-index: 1; }
html body .nav .mega { z-index: 2; }


html body #solutions { background: var(--streaks), linear-gradient(160deg, #edf3fe, var(--sky)) !important; padding-top: var(--sec-y) !important; padding-bottom: var(--sec-y) !important; }
html body #solutions::after { display: none !important; }
html body #solutions .pc-head { text-align: center; max-width: 760px; margin: 0 auto; }
html body #solutions .pc-head .kk { justify-content: center; font-family: "Archivo", var(--sans); font-weight: 500 !important; font-size: 15px !important; letter-spacing: .04em !important; color: var(--accent-ink) !important; }
html body #solutions .pc-head .h2 { margin: var(--s3) 0 0 !important; }
html body :where(#solutions .pc-sub) { font-size: clamp(20px, 2vw, 28px) !important; font-weight: 700 !important; letter-spacing: .04em !important; margin: var(--s3) 0 0 !important; }
html body :where(#solutions .pc-lead) { font-size: 16px !important; line-height: 2 !important; margin: var(--s6) 0 0 !important; }
html body #solutions .pc { list-style: none; margin: var(--s8) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
html body #solutions .pc a { display: flex; flex-direction: column; gap: 20px; color: var(--text); text-decoration: none; }
html body #solutions .pc-card { position: relative; overflow: hidden; display: flex; align-items: flex-end; aspect-ratio: 1 / 1; padding: 28px; border-radius: 8px; isolation: isolate; transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s; }
html body #solutions .pc-card::before { content: ""; position: absolute; inset: 0; z-index: -1; transition: transform .8s cubic-bezier(.2,.8,.2,1);
  background:
    radial-gradient(circle at 30% 34%, rgba(255,255,255,.42) 0 34%, rgba(255,255,255,.12) 34.5% 36%, transparent 36.5%),
    linear-gradient(135deg, transparent 52%, rgba(255,255,255,.28) 52% 64%, transparent 64%),
    linear-gradient(200deg, transparent 58%, rgba(255,255,255,.18) 58% 72%, transparent 72%); }
html body #solutions .pc-card::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .35; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
html body #solutions .pc-card.c1 { background: linear-gradient(160deg, #c9dbf7 0%, #8fb3ea 100%); }
html body #solutions .pc-card.c2 { background: linear-gradient(160deg, #cfe3f2 0%, #86b4d6 100%); }
html body #solutions .pc-card.c3 { background: linear-gradient(160deg, #d3d9f3 0%, #95a3dc 100%); }
html body #solutions .pc-card.c4 { background: linear-gradient(160deg, #c8e0ee 0%, #7fa9cf 100%); }
html body :where(#solutions .pc-card b) { font-size: clamp(18px, 1.6vw, 23px) !important; font-weight: 700 !important; line-height: 1.6 !important; letter-spacing: .04em !important; color: #fff !important; text-shadow: 0 1px 12px rgba(14,28,56,.18); }
html body :where(#solutions .pc-d) { font-size: 15px !important; line-height: 1.7 !important; text-align: center; padding: 0 8px; }
html body #solutions .pc a:hover .pc-card { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(31,99,224,.16); }
html body #solutions .pc a:hover .pc-card::before { transform: scale(1.06) rotate(-2deg); }
html body #solutions .pc-more { text-align: center; margin-top: var(--s7) !important; display: flex; justify-content: center; }
@media (max-width: 1100px) { html body #solutions .pc { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { html body #solutions .pc { grid-template-columns: 1fr; } html body #solutions .pc-card { aspect-ratio: 16 / 10; } }

html body #solutions .pc-card.c1 { background: linear-gradient(165deg, #b9d0f5 0%, #5f8fde 100%); }
html body #solutions .pc-card.c2 { background: linear-gradient(165deg, #bcdcef 0%, #4f8fbf 100%); }
html body #solutions .pc-card.c3 { background: linear-gradient(165deg, #c6cdf1 0%, #6676cc 100%); }
html body #solutions .pc-card.c4 { background: linear-gradient(165deg, #b6d6ea 0%, #4a83b8 100%); }
html body #solutions .pc-card::before { filter: blur(2px); }
html body #solutions .pc-card b { position: relative; }
html body #solutions .pc-card { box-shadow: inset 0 -120px 120px -60px rgba(14,28,56,.22); }
html body :where(#solutions .pc-card b) { text-shadow: 0 1px 16px rgba(14,28,56,.28) !important; }
html body #solutions .pc-lead, html body #solutions .pc-d { text-wrap: balance; }


:root { --accent-ink: var(--signal); --accent-hover: var(--text); --mono: "Archivo", "IBM Plex Sans JP", sans-serif;
  --l1: #c9dcff; --l2: #b9d1fc; --l3: #d6e4fd; }

html body .kk, html body #solutions .pc-head .kk { font-family: "Archivo", var(--sans) !important; font-weight: 600 !important; font-size: 14px !important; letter-spacing: .06em !important; color: var(--signal) !important; }
html body :where(.sf .sf-list b, #about .pf-n b, .news .d, .nlist .d) { font-family: "Archivo", var(--sans) !important; }
html body :where(#about .pf-n b) { font-weight: 700 !important; letter-spacing: 0 !important; }

html body .glow, html body .signal.glow { color: var(--signal) !important; text-shadow: none !important; animation: none !important; }
html body #solutions .pc-card.c1 { background: linear-gradient(165deg, #d4e4ff 0%, #4a8dff 100%) !important; }
html body #solutions .pc-card.c2 { background: linear-gradient(165deg, #e1ecff 0%, #6ea3ff 100%) !important; }
html body #solutions .pc-card.c3 { background: linear-gradient(165deg, #c6dbff 0%, #2c7aff 100%) !important; }
html body #solutions .pc-card.c4 { background: linear-gradient(165deg, #dae7ff 0%, #5a97ff 100%) !important; }

html body .arr { display: none !important; }
html body .lnk.primary { border-radius: 999px !important; justify-content: center !important; gap: 0 !important; padding: 0 40px !important; min-height: 56px; }
html body .nav .cta { border-radius: 999px !important; padding: 0 24px !important; gap: 0 !important; }
html body .mega .card2 a, html body .send, html body .ncat button { border-radius: 999px !important; }
html body :where(.news .t, .nlist .t, .tag, .card .tag) { border-radius: 999px !important; }
html body .sf .sf-glass, html body .pc-card, html body .shot, html body .media { border-radius: 8px; }

html body .lnk:not(.primary)::before, html body .stage::before, html body #contact .c3s a::after, html body #contact .cta3-r a::after,
html body .sf .sf-links a::after, html body .rnd-x .rnd-k::before, html body #contact .pc-go::after, html body #solutions .sx-go::after { content: none !important; display: none !important; }
html body .lnk:not(.primary) { gap: 0 !important; }

html body #technology.sf { --canvas: #f6f9ff; --surface: #fff; --bg-deep: #e7effd; --bg-raise: #eef4fe; --line: #d2ddf0; --line-soft: #e4ecf8;
  --text: #0e1c38; --text-2: #2c3a57; --text-3: #46557a; --link-line: rgba(14,28,56,.22); --accent-ink: var(--signal); --accent-hover: #0e1c38; color: var(--text);
  background: var(--streaks), linear-gradient(160deg, #edf3fe, var(--sky)) !important; }
html body .sf .sf-glass { background: rgba(255,255,255,.55) !important; border: 1px solid rgba(255,255,255,.85) !important; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 20px 50px rgba(44,122,255,.08); }
html body #news { background: var(--streaks), linear-gradient(160deg, #edf3fe, var(--sky)) !important; }
html body #contact { background: var(--canvas) !important; }


html body .hero.hx .wrap { align-items: center; text-align: center; }
html body .hero.hx .head { margin: 0 auto; max-width: 900px !important; }
html body .hero.hx .hx-kk { justify-content: center; }
html body .hero.hx .hx-cta { justify-content: center; }
html body .hero.hx .hx-word { text-align: center; }
html body .sf .sf-g { grid-template-columns: 1fr !important; justify-items: center; text-align: center; gap: var(--s7) !important; }
html body .sf .sf-t { max-width: 760px; }
html body .sf .sf-t .kk { justify-content: center; }
html body .sf .sf-t .sf-p { margin-left: auto !important; margin-right: auto !important; text-wrap: balance; }
html body .sec .more { display: flex; justify-content: center; }
html body .sf .sf-v { width: min(760px, 100%); }
html body #about .sf-v { justify-content: center; justify-items: center; text-align: center; border-top: 0 !important; padding-top: 0 !important; }
html body #about .pf-n { align-items: center; }
html body .sf .sf-list a { text-align: left; }
html body .sf .sf-glass { text-align: center; }
html body #news .wrap > div { max-width: 900px; margin: 0 auto; }
html body #news .h2 { text-align: center; }
html body #contact .cta3 { grid-template-columns: 1fr !important; justify-items: center; text-align: center; gap: var(--s7) !important; }
html body #contact .cta3-l { max-width: 760px; } html body #contact .cta3-l .kk { justify-content: center; }
html body #contact .cta3-r { width: min(760px, 100%); text-align: left; }
@media (max-width: 760px) { html body .hero.hx .wrap { align-items: stretch; } }
html body .ftr .arr, html body .ftr .arr.ext, html body .mega .arr, html body .drawer .arr, html body main .arr { display: none !important; }
html body .ftx .ft-nav .arr.ext, html body .ftx .ft-nav .arr, html body .ftx ul.ext .arr.ext { display: none !important; }


html body .hero.hx .wrap { align-items: stretch !important; text-align: left !important; }
html body .hero.hx .head { margin: 0 !important; max-width: 900px !important; }
html body .hero.hx .hx-kk, html body .hero.hx .hx-cta { justify-content: flex-start !important; }
html body .hero.hx .hx-word { text-align: left !important; }
html body .sf .sf-g { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr) !important; justify-items: stretch !important; text-align: left !important; gap: 48px 96px !important; align-items: center; }
html body .sf .sf-t { max-width: none; }
html body .sf .sf-t .kk { justify-content: flex-start !important; }
html body .sf .sf-t .sf-p { margin-left: 0 !important; margin-right: 0 !important; }
html body .sf .sf-v { width: auto !important; }
html body .sec .more { justify-content: flex-start !important; }
html body #solutions .pc-more { justify-content: center !important; }
html body #about .sf-v { justify-content: start !important; justify-items: start !important; text-align: left !important; padding-top: 40px !important; border-top: 1px solid var(--line) !important; }
html body #about .pf-n { align-items: flex-start !important; }
html body .sf .sf-glass { text-align: left !important; }
html body #news .wrap > div { max-width: none !important; }
html body #news .h2 { text-align: left !important; }
html body #contact .cta3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; justify-items: stretch !important; text-align: left !important; gap: 48px 96px !important; align-items: center; }
html body #contact .cta3-l { max-width: none !important; } html body #contact .cta3-l .kk { justify-content: flex-start !important; }
html body #contact .cta3-r { width: auto !important; }
@media (max-width: 960px) { html body .sf .sf-g, html body #contact .cta3 { grid-template-columns: 1fr !important; } }


html body #about .sf-g { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr) !important; }
html body #about .sf-v { order: -1; }

html body #news .news { list-style: none; margin: var(--s7) 0 0 !important; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; border: 0 !important; }
html body #news .news li { border: 0 !important; }
html body #news .news .nrow { display: flex !important; flex-direction: column; align-items: flex-start; gap: 14px; height: 100%; padding: 24px 24px 28px !important; border: 1px solid var(--line) !important; border-radius: 8px; background: rgba(255,255,255,.7); text-decoration: none; transition: border-color .3s, transform .3s, box-shadow .3s; }
html body #news .news .nrow:hover { border-color: var(--signal) !important; transform: translateY(-2px); box-shadow: 0 16px 32px rgba(44,122,255,.08); }
html body #news .news .nrow .d { order: 0; } html body #news .news .nrow .t { order: 1; }
html body #news .news .nrow .h { order: 2; width: 100%; padding-top: 14px; border-top: 1px solid var(--line); line-height: 1.7 !important; }
html body #news .more { justify-content: flex-end !important; }
@media (max-width: 900px) { html body #news .news { grid-template-columns: 1fr; } }

html body #contact .cta3 { align-items: stretch !important; }
html body #contact .cta3-l { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; padding: 48px 48px 40px; border-radius: 8px; color: #fff;
  background: var(--streaks), linear-gradient(150deg, #6ea3ff 0%, #2c7aff 70%); box-shadow: 0 24px 56px -24px rgba(44,122,255,.55); }
html body #contact .cta3-l .kk, html body #contact .cta3-l .big, html body #contact .cta3-l .lead, html body #contact .cta3-l .glow { color: #fff !important; }
html body #contact .cta3-l .lnk.primary { background: #fff !important; color: var(--signal) !important; box-shadow: 0 10px 28px -12px rgba(14,28,56,.35) !important; }
html body #contact .cta3-l .lnk.primary:hover { background: #eef4ff !important; }
html body #contact .c3-big { margin: auto 0 0 !important; padding-top: 40px; font-family: "Archivo", var(--sans); font-weight: 400; font-size: clamp(48px, 5.6vw, 88px); line-height: 1; letter-spacing: .01em; color: rgba(255,255,255,.92); }
html body #contact .cta3-r { align-self: center; }
html body #contact p.c3-big { font-family: "Archivo", var(--sans) !important; font-weight: 400 !important; font-size: clamp(48px, 5.6vw, 88px) !important; line-height: 1 !important; letter-spacing: .01em !important; color: rgba(255,255,255,.92) !important; }
@media (max-width: 560px) { html body #contact .cta3-l { padding: 32px 24px 28px; } html body :where(#contact .cta3-l .big) { font-size: 26px !important; } html body #contact p.c3-big { font-size: 44px !important; padding-top: 28px; } }



html body #technology.sf-dark { --text: #eef3fc; --text-2: #d4deef; --text-3: #b7c5de; --line: rgba(214,228,255,.22); --link-line: rgba(238,243,252,.4); --accent-hover: #fff; color: var(--text);
  background: linear-gradient(90deg, rgba(6,14,32,.82) 0%, rgba(6,14,32,.45) 45%, rgba(6,14,32,.25) 100%), url("photo/tech-wave.webp") center / cover no-repeat !important;
  padding-top: clamp(96px, 11vw, 160px) !important; padding-bottom: clamp(96px, 11vw, 160px) !important; }
html body #technology.sf-dark .h2, html body #technology.sf-dark .sf-p { color: var(--text) !important; }
html body #technology.sf-dark .kk { color: #8fb8ff !important; }
html body #technology.sf-dark .sf-glass { background: rgba(10,22,48,.38) !important; border: 1px solid rgba(214,228,255,.28) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: none !important; padding: 56px 64px; }
html body #technology.sf-dark .lnk:not(.primary) { color: #fff !important; background: linear-gradient(#fff, #fff) left bottom / 0 1px no-repeat, linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,.35)) left bottom / 100% 1px no-repeat !important; }
html body #technology.sf-dark .lnk:not(.primary):hover { background-size: 100% 1px, 100% 1px !important; }

html body #products .sf-g { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr) !important; align-items: stretch !important; }
html body #products .sf-t { display: flex; flex-direction: column; justify-content: center; }
html body #products .sf-list { margin-top: var(--s7); }
html body .sf .sf-photo { margin: 0; border-radius: 8px; overflow: hidden; min-height: 480px; }
html body .sf .sf-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

html body #contact .c3-photo { margin: 0; border-radius: 8px; overflow: hidden; align-self: stretch !important; min-height: 520px; }
html body #contact .c3-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 30% 40%; }
html body #contact .c3in { list-style: none; width: 100%; margin: var(--s6) 0 var(--s6) !important; padding: 0; border-top: 1px solid rgba(255,255,255,.3) !important; }
html body #contact .c3in a { border-bottom: 1px solid rgba(255,255,255,.3) !important; color: #fff !important; padding: 14px 0 !important; }
html body #contact .c3in a:hover { padding-left: 8px !important; }
html body :where(#contact .c3in .c3-who) { color: rgba(255,255,255,.85) !important; }
html body :where(#contact .c3in .c3-q) { color: #fff !important; font-size: 15px !important; }
html body #contact .cta3-l .lead { margin-bottom: 0 !important; }
html body #contact p.c3-big { padding-top: 32px !important; }
@media (max-width: 960px) { html body .sf .sf-photo { min-height: 320px; max-height: 420px; } html body #contact .c3-photo { min-height: 300px; max-height: 380px; } }
html body #contact .c3in li { list-style: none; }
html body #contact .c3in a { display: flex !important; flex-direction: row !important; align-items: baseline; gap: 20px; text-decoration: none !important; background: none !important; transition: padding-left .3s cubic-bezier(.2,.8,.2,1); }
html body :where(#contact .c3in .c3-who) { flex: none; width: 10.5em; font-size: 12px !important; font-weight: 700 !important; letter-spacing: .04em !important; }
@media (max-width: 560px) { html body #contact .c3in a { flex-direction: column !important; gap: 2px; } }
@media (max-width: 760px) { html body #technology.sf-dark .sf-glass { padding: 28px 24px !important; } }


html body #products .sf-g { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) !important; align-items: center !important; }
html body .sf .sf-shots { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
html body .sf .sf-shots .sh { margin: 0; }
html body .sf .sf-shots .sh.big { grid-column: 1 / -1; }
html body .sf .sf-shots .sh a { display: block; overflow: hidden; border-radius: 8px; border: 1px solid var(--line); background: #fff; color: var(--text); text-decoration: none;
  box-shadow: 0 18px 40px -20px rgba(14,28,56,.22); transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s, border-color .3s; }
html body .sf .sf-shots .sh a:hover { transform: translateY(-3px); border-color: var(--signal); box-shadow: 0 24px 48px -18px rgba(44,122,255,.28); }
html body .sf .sf-shots .sh img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; border-bottom: 1px solid var(--line); }
html body .sf .sf-shots .sh.big img { aspect-ratio: 16 / 8.6; object-position: center top; }
html body :where(.sf .sf-shots figcaption) { display: block; padding: 12px 16px; font-family: "Archivo", var(--sans) !important; font-weight: 700 !important; font-size: 15px !important; letter-spacing: .02em !important; }
html body :where(.sf .sh-note) { grid-column: 1 / -1; margin: 4px 0 0 !important; font-size: 12px !important; line-height: 1.6 !important; }
@media (max-width: 560px) { html body .sf .sf-shots { grid-template-columns: 1fr; } }
html body .sf .sf-shots .sh img { width: 100% !important; max-width: 100% !important; height: auto !important; aspect-ratio: 16 / 10 !important; object-fit: cover !important; } html body .sf .sf-shots .sh.big img { aspect-ratio: 16 / 8.6 !important; }
@media (max-width: 960px) { html body #products .sf-g, html body #about .sf-g, html body #technology .sf-g { grid-template-columns: 1fr !important; } }
@media (max-width: 960px) { html body #about .sf-v { order: 1 !important; } }


html body #products.sf { overflow: hidden; }
html body #products .sf-g { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) !important; align-items: center !important; }
html body #products .pt-wall { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; height: clamp(520px, 52vw, 680px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%); }
html body #products .pt-col { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; animation: ptUp 40s linear infinite; will-change: transform; }
html body #products .pt-col.b { margin-top: 120px; animation-duration: 46s; }
html body #products .pt-wall:hover .pt-col { animation-play-state: paused; }
@keyframes ptUp { from { transform: translateY(0); } to { transform: translateY(calc(-50% - 10px)); } }
@media (prefers-reduced-motion: reduce) { html body #products .pt-col { animation: none; } }
html body #products .pt { display: flex; flex-direction: column; gap: 10px; aspect-ratio: 1 / .86; padding: 28px; border-radius: 8px; background: #fff; border: 1px solid var(--line); color: var(--text); text-decoration: none;
  box-shadow: 0 18px 40px -24px rgba(14,28,56,.22); transition: border-color .3s, box-shadow .3s; }
html body #products .pt:hover { border-color: var(--signal); box-shadow: 0 22px 48px -20px rgba(44,122,255,.3); }
html body #products .pt-ic { width: 56px; height: 56px; color: var(--text); margin-bottom: auto; }
html body :where(#products .pt b) { font-family: "Archivo", var(--sans) !important; font-weight: 700 !important; font-size: clamp(20px, 1.8vw, 26px) !important; letter-spacing: .01em !important; }
html body :where(#products .pt span) { font-size: 14px !important; line-height: 1.7 !important; }
@media (max-width: 960px) { html body #products .pt-wall { height: 520px; } }
@media (max-width: 560px) { html body #products .pt-wall { gap: 12px; height: 460px; } html body #products .pt-col { gap: 12px; } html body #products .pt { padding: 18px; } html body #products .pt-ic { width: 40px; height: 40px; } html body :where(#products .pt span) { font-size: 12px !important; } }
@media (max-width: 960px) { html body #products .sf-g { grid-template-columns: 1fr !important; } }

html body #products .pt.pt-img { padding: 0; overflow: hidden; background: #e7effd; }
html body #products .pt.pt-img img { display: block; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover !important; transform: scale(1.02); transition: transform .8s cubic-bezier(.2,.8,.2,1); }
html body #products .pt.pt-img:hover img { transform: scale(1.06); }
html body :where(#products .pt-note) { margin: var(--s5) 0 0 !important; font-size: 12px !important; line-height: 1.6 !important; }


html body .kk, html body #solutions .pc-head .kk { font-stretch: 112%; font-weight: 700 !important; letter-spacing: .08em !important; text-transform: uppercase; font-size: 12px !important; }
html body .hx-word { font-weight: 800 !important; font-stretch: 125%; letter-spacing: -.01em !important; line-height: .98 !important; font-size: clamp(40px, 6.6vw, 120px) !important; }
html body :where(#about .pf-n b) { font-weight: 800 !important; font-stretch: 112%; letter-spacing: -.02em !important; }
html body :where(#products .pt b, .sf .sf-list b) { font-weight: 800 !important; font-stretch: 112%; letter-spacing: -.005em !important; }
html body #contact p.c3-big { font-weight: 800 !important; font-stretch: 125%; letter-spacing: -.02em !important; font-size: clamp(44px, 5vw, 80px) !important; }
html body :where(.news .d, .nlist .d) { font-weight: 600 !important; font-stretch: 112%; letter-spacing: .04em !important; }
@media (max-width: 760px) { html body .hx-word { font-size: 8.2vw !important; } }


html body .kk, html body #solutions .pc-head .kk { font-weight: 600 !important; font-stretch: 108%; }
html body .hx-word { font-weight: 300 !important; font-stretch: 112%; letter-spacing: .01em !important; }
html body :where(#about .pf-n b) { font-weight: 500 !important; font-stretch: 100%; letter-spacing: -.01em !important; }
html body :where(#products .pt b, .sf .sf-list b) { font-weight: 600 !important; font-stretch: 100%; letter-spacing: 0 !important; }
html body #contact p.c3-big { font-weight: 300 !important; font-stretch: 112%; letter-spacing: 0 !important; }
html body :where(.news .d, .nlist .d) { font-weight: 500 !important; font-stretch: 100%; }
html body .hx-word i.hx-x { font-family: "IBM Plex Sans JP", sans-serif !important; font-weight: 200 !important; font-stretch: 100%; display: inline-block; transform: scale(.8); margin: 0 .05em; }
 html body #about .sf-v { order: 1 !important; } html body #about .sf-g { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) !important; } @media (max-width: 960px) { html body #about .sf-g { grid-template-columns: 1fr !important; } }


html body #about.ab2 { --text: #eef3fc; --line: rgba(214,228,255,.3); color: var(--text); padding-top: clamp(72px, 8vw, 120px) !important; padding-bottom: clamp(88px, 10vw, 144px) !important;
  background: radial-gradient(40% 60% at 72% 30%, rgba(14,22,40,.75), transparent 70%), radial-gradient(30% 50% at 88% 75%, rgba(150,175,215,.35), transparent 70%),
              radial-gradient(45% 70% at 55% 80%, rgba(20,34,62,.55), transparent 70%), linear-gradient(135deg, #6b7c96 0%, #4a5a74 45%, #7a8aa3 100%) !important; }
html body #about.ab2::after { display: none !important; }
html body #about .ab2-h .kk { color: #cfe0ff !important; }
html body :where(#about .ab2-t) { font-size: clamp(26px, 2.6vw, 36px) !important; font-weight: 300 !important; letter-spacing: .06em !important; color: #fff !important; margin: 8px 0 0 !important; }
html body #about .ab2-g { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px 96px; align-items: center; margin-top: var(--s7); }
html body #about .ab2-ph { position: relative; padding: 0 18% 22% 0; }
html body #about .ab2-ph img { display: block; border-radius: 8px; object-fit: cover !important; max-width: none !important; }
html body #about .ab2-ph .p1 { width: 82% !important; aspect-ratio: 1 / 1.04; height: auto !important; object-position: 40% 30%; }
html body #about .ab2-ph .p2 { position: absolute; right: 0; bottom: 0; width: 56% !important; aspect-ratio: 1.18 / 1; height: auto !important; object-position: 0 0; box-shadow: 0 24px 48px -16px rgba(6,14,32,.5); }
html body :where(#about .ab2-m) { font-size: clamp(22px, 2vw, 30px) !important; font-weight: 500 !important; line-height: 1.7 !important; letter-spacing: .04em !important; color: #fff !important; margin: 0 0 var(--s7) !important; }
html body :where(#about .ab2-tx p:not(.more)) { font-size: 16px !important; line-height: 2.05 !important; letter-spacing: .03em !important; color: #eef3fc !important; margin: 0 0 var(--s5) !important; }
html body #about .ab2-tx .more { margin-top: var(--s7) !important; }
html body #about .lnk:not(.primary) { color: #fff !important; background: linear-gradient(#fff,#fff) left bottom / 0 1px no-repeat, linear-gradient(rgba(255,255,255,.45),rgba(255,255,255,.45)) left bottom / 100% 1px no-repeat !important; }
html body #about .lnk:not(.primary):hover { background-size: 100% 1px, 100% 1px !important; }
@media (max-width: 960px) { html body #about .ab2-g { grid-template-columns: 1fr; } html body #about .ab2-ph { max-width: 520px; } }
@media (max-width: 560px) { html body #about .ab2-m br { display: none; } html body :where(#about .ab2-m) { font-size: 20px !important; } }

html body .hx-word i.hx-x { position: relative; display: inline-block; width: .5em; height: .5em; margin: 0 .2em; transform: none !important; vertical-align: .14em; font-size: inherit; }
html body .hx-word i.hx-x::before, html body .hx-word i.hx-x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 130%; height: .055em; background: currentColor; border-radius: 0; transform: translate(-50%, -50%) rotate(45deg); }
html body .hx-word i.hx-x::after { transform: translate(-50%, -50%) rotate(-45deg); }


html body .hero.hx { --hxw: clamp(40px, 6.6vw, 120px); }
html body .hero.hx .hx-word { top: auto !important; bottom: clamp(28px, 5vh, 56px); font-size: var(--hxw) !important; white-space: nowrap !important; }
html body .hero.hx .wrap { justify-content: flex-end !important; padding-bottom: calc(var(--hxw) * 2 + clamp(64px, 9vh, 104px)) !important; }
@media (max-width: 760px) { html body .hero.hx { --hxw: 7.4vw; } html body .hero.hx .hx-word { font-size: var(--hxw) !important; bottom: 32px; } html body .hero.hx .wrap { padding-bottom: calc(var(--hxw) * 2 + 72px) !important; } }


html body #contact .cta3-l { isolation: isolate;
  background: radial-gradient(60% 55% at 18% 12%, rgba(190,214,255,.55), transparent 70%),
              radial-gradient(55% 60% at 92% 88%, rgba(28,86,214,.55), transparent 70%),
              radial-gradient(70% 70% at 70% 30%, rgba(120,170,255,.35), transparent 70%),
              linear-gradient(160deg, #6f9ff5 0%, #3f7cf0 55%, #2f6be0 100%) !important;
  box-shadow: 0 24px 56px -28px rgba(44,122,255,.45) !important; }
html body #contact .cta3-l::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .32; mix-blend-mode: overlay; border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
html body #contact .cta3-l > * { position: relative; z-index: 1; }

html body :where(#contact .c3-vp) { font-size: 15px !important; line-height: 1.95 !important; }
html body #contact .c3vp a { align-items: flex-start !important; padding: 16px 0 !important; }
html body #contact .c3vp .c3-who { padding-top: 3px; }
html body #contact .c3vp .c3-b { display: flex; flex-direction: column; gap: 4px; }
html body :where(#contact .c3vp .c3-q) { font-size: 15px !important; font-weight: 600 !important; line-height: 1.6 !important; color: #fff !important; }
html body :where(#contact .c3vp .c3-g2) { font-size: 13px !important; font-weight: 400 !important; line-height: 1.6 !important; color: rgba(255,255,255,.9) !important; }
html body #contact .c3vp .c3-g2::before { content: "→ "; }
html body #contact .c3-vp { margin-bottom: var(--s6) !important; } html body :where(#contact .c3-vp) { font-size: 17px !important; line-height: 2 !important; } html body #contact p.c3-big { padding-top: 56px !important; }


html body #solutions .pc-card.c1::before { background:
  radial-gradient(circle at 72% 30%, transparent 0 14%, rgba(255,255,255,.38) 14.4% 15.6%, transparent 16% 26%, rgba(255,255,255,.28) 26.4% 27.4%, transparent 27.8% 40%, rgba(255,255,255,.18) 40.4% 41.2%, transparent 41.6%),
  radial-gradient(circle at 72% 30%, rgba(255,255,255,.45) 0 9%, transparent 9.5%) !important; }
html body #solutions .pc-card.c2::before { background:
  linear-gradient(rgba(255,255,255,.34), rgba(255,255,255,.34)) 14% 14% / 24% 24% no-repeat,
  linear-gradient(rgba(255,255,255,.24), rgba(255,255,255,.24)) 40% 34% / 24% 24% no-repeat,
  linear-gradient(rgba(255,255,255,.16), rgba(255,255,255,.16)) 66% 54% / 24% 24% no-repeat,
  linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,.3)) 26% 38% / 2px 22% no-repeat,
  linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,.3)) 52% 58% / 2px 22% no-repeat !important; }
html body #solutions .pc-card.c3::before { background:
  linear-gradient(170deg, transparent 0 16%, rgba(255,255,255,.34) 16% 26%, transparent 26% 32%, rgba(255,255,255,.24) 32% 42%, transparent 42% 48%, rgba(255,255,255,.14) 48% 58%, transparent 58%) !important; }
html body #solutions .pc-card.c4::before { background:
  radial-gradient(circle at 105% 105%, transparent 0 52%, rgba(255,255,255,.32) 52.5% 54%, transparent 54.5% 70%, rgba(255,255,255,.18) 70.5% 71.5%, transparent 72%),
  linear-gradient(135deg, transparent 0 30%, rgba(255,255,255,.3) 30% 31.5%, transparent 31.5%),
  radial-gradient(circle at 34% 30%, rgba(255,255,255,.42) 0 5%, transparent 5.5%) !important; }


html body :where(h1, h2, h3, .h1, .h2, .h3, .big, .ab2-t, .ab2-m, .pc-sub, .pc-card b) { word-break: auto-phrase; line-break: strict; text-wrap: balance; }
html body :where(.lead, .sf-p, .c3-vp, .ab2-tx p, .pc-d, .pc-lead) { word-break: auto-phrase; line-break: strict; text-wrap: pretty; }
html body .nw { display: inline-block; }
html body :where(#contact .cta3-l .big) { font-size: clamp(30px, 3.1vw, 46px) !important; line-height: 1.45 !important; letter-spacing: .02em !important; }
@media (max-width: 560px) { html body :where(#contact .cta3-l .big) { font-size: 26px !important; } }

html body .hero.hx .hx-cta { align-items: center !important; gap: 16px !important; }
html body .hero.hx .hx-cta .lnk:not(.primary) { display: inline-flex !important; align-items: center; justify-content: center; min-height: 56px; padding: 0 36px !important; border-radius: 999px;
  border: 1px solid rgba(44,122,255,.45) !important; background: rgba(255,255,255,.55) !important; color: var(--signal) !important; font-weight: 700 !important; letter-spacing: .06em !important;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background-color .3s, border-color .3s !important; }
html body .hero.hx .hx-cta .lnk:not(.primary):hover { background: #fff !important; border-color: var(--signal) !important; }


html body .lnk.primary, html body .nav .cta, html body .hero.hx .hx-cta .lnk:not(.primary), html body .mega .card2 a, html body .send, html body .ncat button, html body .cs-cta a.btn { border-radius: 0 !important; }
html body .lnk.primary, html body .nav .cta, html body .hero.hx .hx-cta .lnk:not(.primary), html body .cs-cta a.btn { justify-content: center !important; text-align: center; line-height: 1 !important; gap: 0 !important; }
html body .lnk.primary, html body .hero.hx .hx-cta .lnk:not(.primary) { padding: 0 40px !important; min-width: 220px; }
html body .hero.hx .hx-cta .lnk .roll { height: auto !important; line-height: 1 !important; overflow: visible !important; }
html body .hero.hx .hx-cta .lnk .roll-i::after { display: none !important; }
html body .hero.hx .hx-cta .lnk:hover .roll-i { transform: none !important; }

html body .pfig.fr-fig { aspect-ratio: 400 / 320; max-width: 480px; }
html body .pfig.fr-fig svg { display: block; width: 100%; height: 100%; }
@media (prefers-reduced-motion: reduce) { html body .pfig.fr-fig .fr-p { display: none; } }
 html body .vsteps li.on::before { color: var(--signal) !important; border-color: var(--signal) !important; background: transparent !important; } html body .vsteps li.on { color: var(--text) !important; }
 html body .ftx .ft-nav { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } @media (max-width: 1000px) { html body .ftx .ft-nav { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } @media (max-width: 560px) { html body .ftx .ft-nav { grid-template-columns: 1fr 1fr !important; } }



html body .light { padding-bottom: 0 !important; }

html body .shot .frame { background: #fff !important; padding: 12px !important; border: 1px solid var(--line) !important; border-radius: 8px !important; box-shadow: 0 24px 48px -28px rgba(14,28,56,.3) !important; }
html body .shot .frame img { border-radius: 4px; display: block; width: 100%; height: auto; }

html body .cs-cta { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; align-items: center; padding: 48px; border-radius: 8px; color: #fff; margin-top: 56px;
  background: radial-gradient(60% 55% at 18% 12%, rgba(190,214,255,.55), transparent 70%), radial-gradient(55% 60% at 92% 88%, rgba(28,86,214,.55), transparent 70%), linear-gradient(160deg, #6f9ff5 0%, #3f7cf0 55%, #2f6be0 100%); }
html body .cs-cta h2 { font-size: clamp(20px, 1.9vw, 26px) !important; line-height: 1.6 !important; margin: 0 0 12px !important; color: #fff !important; }
html body .cs-cta p { font-size: 15px !important; line-height: 1.9 !important; margin: 0 !important; color: #fff !important; }
html body .cs-cta ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
html body .cs-cta a.btn { display: flex; justify-content: center; align-items: center; min-height: 56px; padding: 0 28px; background: #fff; color: var(--signal) !important; font-weight: 700; text-decoration: none; letter-spacing: .04em; }
html body .cs-cta a.btn.ghost { background: transparent; color: #fff !important; border: 1px solid rgba(255,255,255,.7); }
@media (max-width: 900px) { html body .cs-cta { grid-template-columns: 1fr; padding: 32px 24px; } }

html body .art-hero .art-meta { display: flex; gap: 8px 16px; align-items: center; margin-top: 32px; }
html body .art-meta time { font-family: "Archivo", var(--sans); font-weight: 500; letter-spacing: .04em; }
html body .art-meta span { border: 1px solid var(--line); padding: 2px 12px; font-size: 13px; font-weight: 600; }
html body :where(.art-h1) { font-size: clamp(26px, 3vw, 42px) !important; line-height: 1.55 !important; margin-top: 16px !important; max-width: 30em; word-break: auto-phrase; text-wrap: balance; }
html body :where(.art-lead) { max-width: 46em; margin-top: 24px !important; font-size: 17px !important; line-height: 2 !important; }
html body .art { max-width: 760px; margin: 0 auto; }
html body :where(.art p) { font-size: 16px !important; line-height: 2.05 !important; margin: 0 0 20px !important; }
html body :where(.art h2) { font-size: clamp(22px, 2vw, 28px) !important; line-height: 1.55 !important; margin: 56px 0 20px !important; padding-top: 24px; border-top: 1px solid var(--line); }
html body :where(.art h3) { font-size: 18px !important; line-height: 1.6 !important; margin: 32px 0 12px !important; }
html body .art-past { padding: 20px 24px; background: #eef4fe; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 32px; }
html body .art-past b { display: block; font-size: 13px; margin-bottom: 4px; }
html body :where(.art-past p) { font-size: 14px !important; line-height: 1.8 !important; margin: 0 !important; }
html body .art-ul { margin: 0 0 24px; padding: 0; list-style: none; display: grid; gap: 8px; }
html body .art-ul li { padding: 12px 16px; background: #fff; border: 1px solid var(--line); font-weight: 600; font-size: 15px; }
html body .art-dl { margin: 8px 0 28px; border-top: 1px solid var(--line); }
html body .art-dl div { display: grid; grid-template-columns: 9em 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
html body .art-dl dt { font-weight: 700; font-size: 14px; color: var(--signal); }
html body .art-dl dd { margin: 0; font-size: 15px; line-height: 1.8; }
html body .art-steps { list-style: none; margin: 8px 0 28px; padding: 0; display: grid; gap: 12px; }
html body .art-steps li { padding: 20px 24px; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
html body .art-steps .n { font-family: "Archivo", var(--sans); color: var(--signal); font-weight: 500; margin-right: 12px; }
html body .art-steps b { font-size: 16px; }
html body :where(.art-steps p) { margin: 8px 0 0 !important; font-size: 15px !important; line-height: 1.9 !important; }
html body .art-code { margin: 0 0 20px; padding: 16px 20px; background: #0e1c38; color: #e7effd; border-radius: 8px; font-size: 13px; line-height: 1.9; white-space: pre-wrap; overflow-x: auto; }
html body :where(.art-quote) { font-size: 20px !important; font-weight: 700 !important; padding-left: 20px; border-left: 2px solid var(--signal); }
html body :where(.art-fine) { font-size: 13px !important; color: var(--text-3) !important; }
html body .art-links { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 6px; }
html body .art-links a { color: var(--signal); font-weight: 600; }
html body .art-fig { margin: 32px 0 36px; }
html body .art-fig img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
html body .art-fig figcaption { margin-top: 10px !important; font-size: 13px !important; line-height: 1.8 !important; color: var(--text-3) !important; }
html body .art-refs { margin: 0 0 24px; padding-left: 1.6em; display: grid; gap: 6px; }
html body :where(.art-refs li) { font-size: 14px !important; line-height: 1.8 !important; }
html body .art-refs a { color: var(--signal); }
html body .art-cta { max-width: 960px; margin-left: auto; margin-right: auto; }
html body .art-back { max-width: 960px; margin: 32px auto 0 !important; }
@media (max-width: 600px) { html body .art-dl div { grid-template-columns: 1fr; gap: 4px; } }

html body .phero .ptags { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0 !important; }
html body .phero .ptags span { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border: 1px solid rgba(44,122,255,.4); color: var(--signal); background: rgba(255,255,255,.6); font-size: 12px; font-weight: 700; letter-spacing: .04em; }
html body .phero .ptags .stg2 { border-color: var(--line); color: var(--text-2); }
html body .hk-shotsec { padding: 0 var(--gutter) clamp(48px, 6vw, 80px); background: transparent; }
html body .hk-shotsec .wrap { max-width: var(--maxw); margin: 0 auto; }
html body .hk-shotsec .shot { margin: 0; }


html body .hero.hx .hx-orb { position: absolute; z-index: 0; pointer-events: none; right: max(24px, calc((100vw - 1440px) / 2 + 40px)); top: calc(var(--nav-h) + var(--nav-gap) + 24px);
  width: min(42vw, 620px); aspect-ratio: 1 / 1; }
html body .hero.hx .hx-orb::before { content: ""; position: absolute; inset: 9%; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.35) 18%, rgba(214,228,253,.25) 45%, rgba(44,122,255,.10) 72%, rgba(44,122,255,.22) 100%);
  box-shadow: inset -24px -36px 80px rgba(44,122,255,.16), inset 18px 22px 60px rgba(255,255,255,.7), 0 40px 90px -30px rgba(44,122,255,.35); }
html body .hero.hx .hx-orb::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: -2%; height: 7%; border-radius: 50%; background: radial-gradient(closest-side, rgba(14,28,56,.14), transparent); filter: blur(4px); }
html body .hero.hx .hx-orb canvas { position: relative; display: block; width: 100%; height: 100%; }
html body .hero.hx .wrap, html body .hero.hx .hx-word { z-index: 1; }
html body .hero.hx .hx-word { position: absolute; }
@media (max-width: 960px) { html body .hero.hx .hx-orb { width: min(78vw, 420px); right: 50%; transform: translateX(50%); top: calc(var(--nav-h) + var(--nav-gap) + 8px); opacity: .9; } }

html body .hero.hx .hx-orb::before { content: none !important; display: none !important; }
html body .hero.hx .hx-orb::after { left: 26%; right: 26%; bottom: 4%; }


html body .hero.hx { height: auto !important; min-height: 0 !important; max-height: none !important;
  display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "text orb" "word word";
  align-items: center; column-gap: clamp(24px, 4vw, 72px); row-gap: clamp(24px, 3vw, 48px);
  padding: calc(var(--nav-h) + var(--nav-gap) + clamp(32px, 5vw, 72px)) max(var(--gutter), calc((100vw - 1344px) / 2)) clamp(40px, 5vw, 72px) !important; }
html body .hero.hx > .hx-cv, html body .hero.hx > .hx-vig { display: none !important; }
html body .hero.hx > .wrap { grid-area: text; position: relative !important; height: auto !important; padding: 0 !important; margin: 0 !important; max-width: none !important; display: block !important; }
html body .hero.hx .head { max-width: 640px !important; }
html body .hero.hx > .hx-orb { grid-area: orb; position: relative !important; inset: auto !important; top: auto !important; right: auto !important; transform: none !important;
  width: 100% !important; max-width: 560px; justify-self: end; aspect-ratio: 1 / 1; opacity: 1 !important; }
html body .hero.hx > .hx-word { grid-area: word; position: relative !important; inset: auto !important; top: auto !important; bottom: auto !important; left: auto !important; right: auto !important;
  padding: 0 !important; margin: 0; font-size: clamp(36px, 7.6vw, 128px) !important; white-space: nowrap !important; overflow: visible; }
@media (max-width: 860px) {
  html body .hero.hx { grid-template-columns: 1fr; grid-template-areas: "orb" "text" "word"; row-gap: 28px; }
  html body .hero.hx > .hx-orb { justify-self: center; width: min(78vw, 380px) !important; }
  html body .hero.hx > .hx-word { font-size: 9vw !important; }
}

html body .hero.hx { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
html body .hero.hx > .hx-word { font-size: min(104px, calc((100vw - 2 * max(var(--gutter), (100vw - 1344px) / 2)) / 14.6)) !important; }
html body .hero.hx .h1 > span { white-space: nowrap; }
@media (max-width: 860px) { html body .hero.hx { grid-template-columns: 1fr; } html body .hero.hx .h1 > span { white-space: normal; } }


html body .hero.hx { min-height: min(100svh, 1000px) !important; align-content: center; row-gap: 0 !important; column-gap: clamp(16px, 2vw, 40px) !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  padding-top: calc(var(--nav-h) + var(--nav-gap) + clamp(16px, 2.5vw, 40px)) !important; padding-bottom: clamp(32px, 4vw, 56px) !important; }
html body .hero.hx > .wrap { z-index: 2; align-self: center; }
html body :where(.hero.hx .h1) { font-size: clamp(34px, 4.3vw, 66px) !important; line-height: 1.38 !important; }
html body .hero.hx .hx-kk { font-size: 14px !important; margin-bottom: var(--s5) !important; }
html body .hero.hx .hx-cta { margin-top: clamp(28px, 3vw, 44px) !important; }
html body .hero.hx > .hx-orb { z-index: 1; justify-self: center !important; max-width: 640px !important; width: 108% !important; margin: 0 -4% 0 0; }
html body .hero.hx > .hx-word { z-index: 0; margin-top: calc(-1 * clamp(56px, 7vw, 120px)) !important; }
@media (max-width: 860px) {
  html body .hero.hx { min-height: 0 !important; row-gap: 20px !important; }
  html body .hero.hx > .hx-orb { width: min(80vw, 400px) !important; margin: 0; }
  html body .hero.hx > .hx-word { margin-top: 8px !important; }
}
@media (max-width: 860px) { html body .hero.hx { grid-template-columns: 1fr !important; grid-template-areas: "orb" "text" "word" !important; } html body .hero.hx > .hx-orb { justify-self: center !important; width: min(80vw, 400px) !important; margin: 0 !important; } html body :where(.hero.hx .h1) { font-size: min(7vw, 30px) !important; } }


html body main :is(h1, h2, h3, h4, .h1, .h2, .h3, .big, b, strong, dt, .s, .sx-t) { word-break: auto-phrase; text-wrap: balance; line-break: strict; }
@media (max-width: 760px) {
  :root { --sec-y: 56px; }
  html body .sec, html body .blk { padding-top: 56px !important; padding-bottom: 56px !important; }
  html body .phero, html body .shero { padding-top: calc(var(--nav-h) + var(--nav-gap) * 2 + 8px) !important; padding-bottom: 40px !important; }
  html body main { padding-top: 0; }
  
  html body :where(.phero .h1, .shero .h1) { font-size: 28px !important; line-height: 1.45 !important; letter-spacing: .01em !important; }
  html body :where(main .h2, .closing .big, .closing2 .big) { font-size: 25px !important; line-height: 1.5 !important; }
  html body :where(main .h3, main h3) { font-size: 18px !important; line-height: 1.55 !important; }
  html body :where(main p, main li, main dd, .lead, .sf-p, .art p) { font-size: 15px !important; line-height: 1.85 !important; }
  html body :where(main figcaption, .shot figcaption, .sh-note, .pt-note) { font-size: 12px !important; line-height: 1.7 !important; }
  html body .kk { margin-bottom: 12px !important; }
  html body .crumb { font-size: 12px !important; }
  
  html body .lnk.primary { width: 100%; min-height: 52px !important; padding: 0 20px !important; }
  html body .acts { display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
  html body .acts .lnk:not(.primary) { align-self: center; }
  html body .hero.hx .hx-cta { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px !important; }
  html body .hero.hx .hx-cta .lnk { width: 100%; min-width: 0 !important; min-height: 52px !important; padding: 0 8px !important; font-size: 15px !important; }
  
  html body .hero.hx { padding-top: calc(var(--nav-h) + var(--nav-gap) * 2) !important; padding-bottom: 32px !important; row-gap: 12px !important; }
  html body .hero.hx > .hx-orb { width: min(64vw, 280px) !important; }
  html body .hero.hx .hx-kk { margin-bottom: 12px !important; }
  html body .hero.hx .hx-cta { margin-top: 24px !important; }
  html body .hero.hx > .hx-word { margin-top: 20px !important; }
  
  html body #about.ab2 { padding-top: 56px !important; padding-bottom: 56px !important; }
  html body #about .ab2-g { margin-top: 24px; gap: 28px; }
  html body #about .ab2-ph { padding: 0 14% 16% 0; max-width: 100%; }
  html body :where(#about .ab2-m) { font-size: 19px !important; margin-bottom: 20px !important; }
  html body :where(#about .ab2-tx p:not(.more)) { margin-bottom: 14px !important; }
  html body #about .ab2-tx .more { margin-top: 24px !important; }
  
  html body #solutions .pc-head .pc-lead { margin-top: 16px !important; text-align: left; }
  html body #solutions .pc { grid-template-columns: 1fr 1fr !important; gap: 12px !important; margin-top: 28px !important; }
  html body #solutions .pc a { gap: 8px; }
  html body #solutions .pc-card { aspect-ratio: 1 / 1.08 !important; padding: 14px !important; }
  html body :where(#solutions .pc-card b) { font-size: 14px !important; line-height: 1.55 !important; }
  html body :where(#solutions .pc-d) { font-size: 12px !important; line-height: 1.65 !important; text-align: left; padding: 0 2px; }
  html body #solutions .pc-card b br { display: none; }
  html body #solutions .pc-more { margin-top: 24px !important; }
  
  html body #products .pt-wall { height: auto !important; -webkit-mask-image: none !important; mask-image: none !important; display: flex !important; gap: 12px !important;
    overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter) 12px; scrollbar-width: none; }
  html body #products .pt-wall::-webkit-scrollbar { display: none; }
  html body #products .pt-col { display: contents !important; animation: none !important; }
  html body #products .pt-col.b { margin-top: 0 !important; }
  html body #products .pt-col li { flex: 0 0 68%; scroll-snap-align: start; list-style: none; }
  html body #products .pt-col a[aria-hidden="true"] { display: none !important; }
  html body #products .pt-col li:has(> a[aria-hidden="true"]) { display: none; }
  html body #products .pt { aspect-ratio: 1 / .9 !important; height: 100%; padding: 20px !important; }
  html body #products .pt-ic { width: 36px !important; height: 36px !important; }
  html body :where(#products .pt span) { font-size: 13px !important; }
  html body #products .sf-g { gap: 24px !important; }
  
  html body #technology.sf-dark { padding-top: 64px !important; padding-bottom: 64px !important; }
  html body .sf .sf-links a { padding: 16px 24px 16px 0 !important; font-size: 15px !important; }
  
  html body #news .news .nrow { display: grid !important; grid-template-columns: auto 1fr; align-items: center; gap: 10px 12px; padding: 18px 18px 20px !important; }
  html body #news .news .nrow .h { grid-column: 1 / -1; padding-top: 12px; }
  html body #news .news .nrow .t { justify-self: start; }
  html body #news .more { justify-content: flex-start !important; }
  
  html body #contact .cta3 { gap: 16px !important; }
  html body #contact .c3-photo { order: -1; min-height: 0 !important; max-height: none !important; aspect-ratio: 16 / 9; }
  html body #contact .c3-photo img { object-position: 20% 30%; }
  html body #contact .cta3-l { padding: 28px 22px 24px !important; }
  html body :where(#contact .c3-vp) { font-size: 14px !important; }
  html body #contact p.c3-big { font-size: 40px !important; padding-top: 24px !important; }
  
  html body .phero .name { gap: 8px 10px !important; }
  html body .pfig, html body .vizbox, html body .shero .viz { max-width: 100% !important; }
  html body .shero .viz { height: 220px !important; }
  html body .shot { margin-top: 0; }
  html body .hk-shotsec { padding-bottom: 40px; }
  html body .cs-stats b { font-size: 48px; }
  html body .art-dl div { padding: 12px 0; }
  
  html body .ftx .ft-nav { gap: 28px 20px !important; padding: 32px 0 36px !important; }
}
@media (max-width: 760px) {
  html body #solutions .pc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
  html body #solutions .pc li, html body #solutions .pc a, html body #solutions .pc-card { min-width: 0; }
  html body :where(#solutions .pc-card b, #solutions .pc-d) { word-break: normal !important; overflow-wrap: anywhere; text-wrap: pretty; }
  html body #products .sf-v.pt-wall { max-width: none; }
  html body #products .wrap, html body #products .sf-g { min-width: 0; }
}
@media (max-width: 760px) {
  html body :where(.mv .s, .mv p.s) { font-size: 20px !important; line-height: 1.6 !important; font-weight: 700 !important; }
  html body #products .pt-wall { scroll-padding-left: var(--gutter); scroll-padding-right: var(--gutter); }
  html body #products .pt-col li:first-child { margin-left: 0; }
}


@media (max-width: 760px) {
  html body #products .pt-wall { display: flex !important; flex-direction: column !important; gap: 12px !important; overflow: hidden !important; scroll-snap-type: none !important;
    margin: 0 calc(-1 * var(--gutter)) !important; padding: 4px 0 8px !important;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%) !important; mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%) !important; }
  html body #products .pt-col { display: flex !important; flex-direction: row !important; gap: 12px !important; width: max-content; margin: 0 !important; animation: ptX 36s linear infinite !important; }
  html body #products .pt-col.b { animation: ptXr 42s linear infinite !important; }
  html body #products .pt-wall:active .pt-col, html body #products .pt-wall:hover .pt-col { animation-play-state: paused !important; }
  html body #products .pt-col li, html body #products .pt-col li:has(> a[aria-hidden="true"]) { display: block !important; flex: 0 0 auto !important; width: 62vw; max-width: 260px; scroll-snap-align: none; }
  html body #products .pt-col a[aria-hidden="true"] { display: flex !important; }
  html body #products .pt-col a.pt-img[aria-hidden="true"] { display: block !important; }
  html body #products .pt { aspect-ratio: 1 / .78 !important; }
  @keyframes ptX { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 6px)); } }
  @keyframes ptXr { from { transform: translateX(calc(-50% - 6px)); } to { transform: translateX(0); } }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) { html body #products .pt-wall { overflow-x: auto !important; } html body #products .pt-col { animation: none !important; } }


@media (max-width: 760px) {
  
  html body .phero .shot { margin: 40px 0 0 !important; }
  html body .phero .shot figcaption { margin-top: 10px; }
  html body .phero:has(.shot) { padding-bottom: 48px !important; }
  
  html body :where(.phero .h1, .shero .h1) { font-size: 26px !important; }
  html body .phero .h1 > span, html body .shero .h1 > span { word-break: keep-all; overflow-wrap: anywhere; }
  
  html body .sec .more, html body .blk .more { justify-content: flex-start !important; text-align: left; }
  html body #solutions .pc-more { justify-content: center !important; }
  
  html body .ftx .ft-top { padding: 40px 0 24px !important; }
  html body .ftx .ft-nav { gap: 24px 20px !important; padding: 24px 0 28px !important; }
  html body .ftx .ft-nav ul { gap: 0 !important; }
  html body .ftx .ft-nav li a { padding: 6px 0 !important; display: inline-block; font-size: 13px !important; }
  html body :where(.ftx .ft-nav h2) { font-size: 12px !important; margin-bottom: 6px !important; letter-spacing: .06em !important; opacity: .7; }
  html body .ftx .ft-bar { padding: 20px 0 28px !important; }
  
  html body .cs-cta a.btn { min-height: 48px; }
  html body .cs-cta a.btn.ghost { min-height: 44px; font-size: 14px; }
  
  html body main hr, html body .mv > div { margin: 0; }
}
@media (max-width: 760px) { html body .phero:has(.shot) + .light { margin-top: 0 !important; } }


html body #about.ab2 { --text: #0e1c38; --line: #d2ddf0; color: var(--text);
  background: radial-gradient(45% 60% at 75% 25%, rgba(255,255,255,.75), transparent 70%), radial-gradient(35% 55% at 90% 80%, rgba(170,195,235,.45), transparent 70%),
              radial-gradient(45% 65% at 20% 85%, rgba(190,208,238,.5), transparent 70%), linear-gradient(135deg, #dfe8f6 0%, #cfdbee 50%, #e3ebf7 100%) !important; }
html body #about .ab2-h .kk { color: var(--signal) !important; }
html body :where(#about .ab2-t, #about .ab2-m) { color: #0e1c38 !important; }
html body :where(#about .ab2-tx p:not(.more)) { color: #2c3a57 !important; }
html body #about .lnk:not(.primary) { color: #0e1c38 !important; background: linear-gradient(var(--signal), var(--signal)) left bottom / 0 1px no-repeat, linear-gradient(rgba(14,28,56,.3), rgba(14,28,56,.3)) left bottom / 100% 1px no-repeat !important; }
html body #about .lnk:not(.primary):hover { color: var(--signal) !important; background-size: 100% 1px, 100% 1px !important; }
html body #about .ab2-ph .p1 { box-shadow: 0 24px 48px -24px rgba(14,28,56,.35); }

/* 図の下の手順（.vsteps）：まだの手順は薄く、チェック済み（.done）と進行中（.on）は濃くする
   ソリューション一覧の図（.vizbox）は暗い背景用の文字色の変数を持つため、色はここで直接指定する */
html body .vsteps li { transition: color .3s ease; }
html body .vsteps li:not(.on):not(.done), html body .vsteps li:not(.on):not(.done)::before { color: #94a0b8 !important; }
html body .vsteps li.on, html body .vsteps li.done { color: #0e1c38 !important; }
html body .vizbox .vsteps li:not(.on):not(.done) { border-top-color: #d2ddf0 !important; }