/* grid.min.css */
:root,[data-bs-theme=light]{--bs-blue:#0d6efd;--bs-indigo:#6610f2;--bs-purple:#6f42c1;--bs-pink:#d63384;--bs-red:#dc3545;--bs-orange:#fd7e14;--bs-yellow:#ffc107;--bs-green:#198754;--bs-teal:#20c997;--bs-cyan:#0dcaf0;--bs-black:#000;--bs-white:#fff;--bs-gray:#6c757d;--bs-gray-dark:#343a40;--bs-gray-100:#f8f9fa;--bs-gray-200:#e9ecef;--bs-gray-300:#dee2e6;--bs-gray-400:#ced4da;--bs-gray-500:#adb5bd;--bs-gray-600:#6c757d;--bs-gray-700:#495057;--bs-gray-800:#343a40;--bs-gray-900:#212529;--bs-primary:#0d6efd;--bs-secondary:#6c757d;--bs-success:#198754;--bs-info:#0dcaf0;--bs-warning:#ffc107;--bs-danger:#dc3545;--bs-light:#f8f9fa;--bs-dark:#212529;--bs-primary-rgb:13,110,253;--bs-secondary-rgb:108,117,125;--bs-success-rgb:25,135,84;--bs-info-rgb:13,202,240;--bs-warning-rgb:255,193,7;--bs-danger-rgb:220,53,69;--bs-light-rgb:248,249,250;--bs-dark-rgb:33,37,41;--bs-primary-text-emphasis:#052c65;--bs-secondary-text-emphasis:#2b2f32;--bs-success-text-emphasis:#0a3622;--bs-info-text-emphasis:#055160;--bs-warning-text-emphasis:#664d03;--bs-danger-text-emphasis:#58151c;--bs-light-text-emphasis:#495057;--bs-dark-text-emphasis:#495057;--bs-primary-bg-subtle:#cfe2ff;--bs-secondary-bg-subtle:#e2e3e5;--bs-success-bg-subtle:#d1e7dd;--bs-info-bg-subtle:#cff4fc;--bs-warning-bg-subtle:#fff3cd;--bs-danger-bg-subtle:#f8d7da;--bs-light-bg-subtle:#fcfcfd;--bs-dark-bg-subtle:#ced4da;--bs-primary-border-subtle:#9ec5fe;--bs-secondary-border-subtle:#c4c8cb;--bs-success-border-subtle:#a3cfbb;--bs-info-border-subtle:#9eeaf9;--bs-warning-border-subtle:#ffe69c;--bs-danger-border-subtle:#f1aeb5;--bs-light-border-subtle:#e9ecef;--bs-dark-border-subtle:#adb5bd;--bs-white-rgb:255,255,255;--bs-black-rgb:0,0,0;--bs-font-sans-serif:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--bs-font-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--bs-gradient:linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));--bs-body-font-family:var(--bs-font-sans-serif);--bs-body-font-size:1rem;--bs-body-font-weight:400;--bs-body-line-height:1.5;--bs-body-color:#212529;--bs-body-color-rgb:33,37,41;--bs-body-bg:#fff;--bs-body-bg-rgb:255,255,255;--bs-emphasis-color:#000;--bs-emphasis-color-rgb:0,0,0;--bs-secondary-color:rgba(33, 37, 41, 0.75);--bs-secondary-color-rgb:33,37,41;--bs-secondary-bg:#e9ecef;--bs-secondary-bg-rgb:233,236,239;--bs-tertiary-color:rgba(33, 37, 41, 0.5);--bs-tertiary-color-rgb:33,37,41;--bs-tertiary-bg:#f8f9fa;--bs-tertiary-bg-rgb:248,249,250;--bs-heading-color:inherit;--bs-link-color:#0d6efd;--bs-link-color-rgb:13,110,253;--bs-link-decoration:underline;--bs-link-hover-color:#0a58ca;--bs-link-hover-color-rgb:10,88,202;--bs-code-color:#d63384;--bs-highlight-color:#212529;--bs-highlight-bg:#fff3cd;--bs-border-width:1px;--bs-border-style:solid;--bs-border-color:#dee2e6;--bs-border-color-translucent:rgba(0, 0, 0, 0.175);--bs-border-radius:0.375rem;--bs-border-radius-sm:0.25rem;--bs-border-radius-lg:0.5rem;--bs-border-radius-xl:1rem;--bs-border-radius-xxl:2rem;--bs-border-radius-2xl:var(--bs-border-radius-xxl);--bs-border-radius-pill:50rem;--bs-box-shadow:0 0.5rem 1rem rgba(0, 0, 0, 0.15);--bs-box-shadow-sm:0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);--bs-box-shadow-lg:0 1rem 3rem rgba(0, 0, 0, 0.175);--bs-box-shadow-inset:inset 0 1px 2px rgba(0, 0, 0, 0.075);--bs-focus-ring-width:0.25rem;--bs-focus-ring-opacity:0.25;--bs-focus-ring-color:rgba(13, 110, 253, 0.25);--bs-form-valid-color:#198754;--bs-form-valid-border-color:#198754;--bs-form-invalid-color:#dc3545;--bs-form-invalid-border-color:#dc3545}[data-bs-theme=dark]{color-scheme:dark;--bs-body-color:#dee2e6;--bs-body-color-rgb:222,226,230;--bs-body-bg:#212529;--bs-body-bg-rgb:33,37,41;--bs-emphasis-color:#fff;--bs-emphasis-color-rgb:255,255,255;--bs-secondary-color:rgba(222, 226, 230, 0.75);--bs-secondary-color-rgb:222,226,230;--bs-secondary-bg:#343a40;--bs-secondary-bg-rgb:52,58,64;--bs-tertiary-color:rgba(222, 226, 230, 0.5);--bs-tertiary-color-rgb:222,226,230;--bs-tertiary-bg:#2b3035;--bs-tertiary-bg-rgb:43,48,53;--bs-primary-text-emphasis:#6ea8fe;--bs-secondary-text-emphasis:#a7acb1;--bs-success-text-emphasis:#75b798;--bs-info-text-emphasis:#6edff6;--bs-warning-text-emphasis:#ffda6a;--bs-danger-text-emphasis:#ea868f;--bs-light-text-emphasis:#f8f9fa;--bs-dark-text-emphasis:#dee2e6;--bs-primary-bg-subtle:#031633;--bs-secondary-bg-subtle:#161719;--bs-success-bg-subtle:#051b11;--bs-info-bg-subtle:#032830;--bs-warning-bg-subtle:#332701;--bs-danger-bg-subtle:#2c0b0e;--bs-light-bg-subtle:#343a40;--bs-dark-bg-subtle:#1a1d20;--bs-primary-border-subtle:#084298;--bs-secondary-border-subtle:#41464b;--bs-success-border-subtle:#0f5132;--bs-info-border-subtle:#087990;--bs-warning-border-subtle:#997404;--bs-danger-border-subtle:#842029;--bs-light-border-subtle:#495057;--bs-dark-border-subtle:#343a40;--bs-heading-color:inherit;--bs-link-color:#6ea8fe;--bs-link-hover-color:#8bb9fe;--bs-link-color-rgb:110,168,254;--bs-link-hover-color-rgb:139,185,254;--bs-code-color:#e685b5;--bs-highlight-color:#dee2e6;--bs-highlight-bg:#664d03;--bs-border-color:#495057;--bs-border-color-translucent:rgba(255, 255, 255, 0.15);--bs-form-valid-color:#75b798;--bs-form-valid-border-color:#75b798;--bs-form-invalid-color:#ea868f;--bs-form-invalid-border-color:#ea868f}*,::after,::before{box-sizing:border-box}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}body{margin:0;font-family:var(--bs-body-font-family);font-size:var(--bs-body-font-size);font-weight:var(--bs-body-font-weight);line-height:var(--bs-body-line-height);color:var(--bs-body-color);text-align:var(--bs-body-text-align);background-color:var(--bs-body-bg);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}hr{margin:1rem 0;color:inherit;border:0;border-top:var(--bs-border-width) solid;opacity:.25}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem;font-weight:500;line-height:1.2;color:var(--bs-heading-color)}h1{font-size:calc(1.375rem + 1.5vw)}@media (min-width:1200px){h1{font-size:2.5rem}}h2{font-size:calc(1.325rem + .9vw)}@media (min-width:1200px){h2{font-size:2rem}}h3{font-size:calc(1.3rem + .6vw)}@media (min-width:1200px){h3{font-size:1.75rem}}h4{font-size:calc(1.275rem + .3vw)}@media (min-width:1200px){h4{font-size:1.5rem}}h5{font-size:1.25rem}h6{font-size:1rem}p{margin-top:0;margin-bottom:1rem}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}address{margin-bottom:1rem;font-style:normal;line-height:inherit}ol,ul{padding-left:2rem}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}small{font-size:.875em}mark{padding:.1875em;color:var(--bs-highlight-color);background-color:var(--bs-highlight-bg)}sub,sup{position:relative;font-size:.75em;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:rgba(var(--bs-link-color-rgb),var(--bs-link-opacity,1));text-decoration:underline}a:hover{--bs-link-color-rgb:var(--bs-link-hover-color-rgb)}a:not([href]):not([class]),a:not([href]):not([class]):hover{color:inherit;text-decoration:none}code,kbd,pre,samp{font-family:var(--bs-font-monospace);font-size:1em}pre{display:block;margin-top:0;margin-bottom:1rem;overflow:auto;font-size:.875em}pre code{font-size:inherit;color:inherit;word-break:normal}code{font-size:.875em;color:var(--bs-code-color);word-wrap:break-word}a>code{color:inherit}kbd{padding:.1875rem .375rem;font-size:.875em;color:var(--bs-body-bg);background-color:var(--bs-body-color);border-radius:.25rem}kbd kbd{padding:0;font-size:1em}figure{margin:0 0 1rem}img,svg{vertical-align:middle}table{caption-side:bottom;border-collapse:collapse}caption{padding-top:.5rem;padding-bottom:.5rem;color:var(--bs-secondary-color);text-align:left}th{text-align:inherit;text-align:-webkit-match-parent}tbody,td,tfoot,th,thead,tr{border-color:inherit;border-style:solid;border-width:0}label{display:inline-block}button{border-radius:0}button:focus:not(:focus-visible){outline:0}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,select{text-transform:none}[role=button]{cursor:pointer}select{word-wrap:normal}select:disabled{opacity:1}[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator{display:none!important}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}::-moz-focus-inner{padding:0;border-style:none}textarea{resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{float:left;width:100%;padding:0;margin-bottom:.5rem;font-size:calc(1.275rem + .3vw);line-height:inherit}@media (min-width:1200px){legend{font-size:1.5rem}}legend+*{clear:left}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-fields-wrapper,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-text,::-webkit-datetime-edit-year-field{padding:0}::-webkit-inner-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-color-swatch-wrapper{padding:0}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}::file-selector-button{font:inherit;-webkit-appearance:button}output{display:inline-block}iframe{border:0}summary{display:list-item;cursor:pointer}progress{vertical-align:baseline}[hidden]{display:none!important}.lead{font-size:1.25rem;font-weight:300}.card{--bs-card-spacer-y:1rem;--bs-card-spacer-x:1rem;--bs-card-title-spacer-y:0.5rem;--bs-card-title-color: ;--bs-card-subtitle-color: ;--bs-card-border-width:var(--bs-border-width);--bs-card-border-color:var(--bs-border-color-translucent);--bs-card-border-radius:var(--bs-border-radius);--bs-card-box-shadow: ;--bs-card-inner-border-radius:calc(var(--bs-border-radius) - (var(--bs-border-width)));--bs-card-cap-padding-y:0.5rem;--bs-card-cap-padding-x:1rem;--bs-card-cap-bg:rgba(var(--bs-body-color-rgb), 0.03);--bs-card-cap-color: ;--bs-card-height: ;--bs-card-color: ;--bs-card-bg:var(--bs-body-bg);--bs-card-img-overlay-padding:1rem;--bs-card-group-margin:0.75rem;position:relative;display:flex;flex-direction:column;min-width:0;height:var(--bs-card-height);color:var(--bs-body-color);word-wrap:break-word;background-color:var(--bs-card-bg);background-clip:border-box;border:var(--bs-card-border-width) solid var(--bs-card-border-color);border-radius:var(--bs-card-border-radius)}:root{--bs-gutter-x:1.5rem;--bs-gutter-y:0}*,::after,::before{box-sizing:border-box}.container,.container-fluid{width:100%;padding-right:calc(var(--bs-gutter-x)*.5);padding-left:calc(var(--bs-gutter-x)*.5);margin-right:auto;margin-left:auto}@media(min-width:576px){.container{max-width:540px}}@media(min-width:768px){.container{max-width:720px}}@media(min-width:992px){.container{max-width:960px}}@media(min-width:1200px){.container{max-width:1140px}}@media(min-width:1400px){.container{max-width:1320px}}.row{--bs-gutter-x:1.5rem;--bs-gutter-y:0;display:flex;flex-wrap:wrap;margin-top:calc(-1*var(--bs-gutter-y));margin-right:calc(-.5*var(--bs-gutter-x));margin-left:calc(-.5*var(--bs-gutter-x))}.row>*{flex-shrink:0;width:100%;max-width:100%;padding-right:calc(var(--bs-gutter-x)*.5);padding-left:calc(var(--bs-gutter-x)*.5);margin-top:var(--bs-gutter-y)}.col{flex:1 0 0%}.col-auto{flex:0 0 auto;width:auto}.col-1{flex:0 0 auto;width:8.3333333%}.col-2{flex:0 0 auto;width:16.666667%}.col-3{flex:0 0 auto;width:25%}.col-4{flex:0 0 auto;width:33.333333%}.col-5{flex:0 0 auto;width:41.666667%}.col-6{flex:0 0 auto;width:50%}.col-7{flex:0 0 auto;width:58.333333%}.col-8{flex:0 0 auto;width:66.666667%}.col-9{flex:0 0 auto;width:75%}.col-10{flex:0 0 auto;width:83.333333%}.col-11{flex:0 0 auto;width:91.666667%}.col-12{flex:0 0 auto;width:100%}@media(min-width:576px){.col-sm{flex:1 0 0%}.col-sm-auto{flex:0 0 auto;width:auto}.col-sm-1{flex:0 0 auto;width:8.3333333%}.col-sm-2{flex:0 0 auto;width:16.666667%}.col-sm-3{flex:0 0 auto;width:25%}.col-sm-4{flex:0 0 auto;width:33.333333%}.col-sm-5{flex:0 0 auto;width:41.666667%}.col-sm-6{flex:0 0 auto;width:50%}.col-sm-7{flex:0 0 auto;width:58.333333%}.col-sm-8{flex:0 0 auto;width:66.666667%}.col-sm-9{flex:0 0 auto;width:75%}.col-sm-10{flex:0 0 auto;width:83.333333%}.col-sm-11{flex:0 0 auto;width:91.666667%}.col-sm-12{flex:0 0 auto;width:100%}}@media(min-width:768px){.col-md{flex:1 0 0%}.col-md-auto{flex:0 0 auto;width:auto}.col-md-1{flex:0 0 auto;width:8.3333333%}.col-md-2{flex:0 0 auto;width:16.666667%}.col-md-3{flex:0 0 auto;width:25%}.col-md-4{flex:0 0 auto;width:33.333333%}.col-md-5{flex:0 0 auto;width:41.666667%}.col-md-6{flex:0 0 auto;width:50%}.col-md-7{flex:0 0 auto;width:58.333333%}.col-md-8{flex:0 0 auto;width:66.666667%}.col-md-9{flex:0 0 auto;width:75%}.col-md-10{flex:0 0 auto;width:83.333333%}.col-md-11{flex:0 0 auto;width:91.666667%}.col-md-12{flex:0 0 auto;width:100%}}@media(min-width:992px){.col-lg{flex:1 0 0%}.col-lg-auto{flex:0 0 auto;width:auto}.col-lg-1{flex:0 0 auto;width:8.3333333%}.col-lg-2{flex:0 0 auto;width:16.666667%}.col-lg-3{flex:0 0 auto;width:25%}.col-lg-4{flex:0 0 auto;width:33.333333%}.col-lg-5{flex:0 0 auto;width:41.666667%}.col-lg-6{flex:0 0 auto;width:50%}.col-lg-7{flex:0 0 auto;width:58.333333%}.col-lg-8{flex:0 0 auto;width:66.666667%}.col-lg-9{flex:0 0 auto;width:75%}.col-lg-10{flex:0 0 auto;width:83.333333%}.col-lg-11{flex:0 0 auto;width:91.666667%}.col-lg-12{flex:0 0 auto;width:100%}}@media(min-width:1200px){.col-xl{flex:1 0 0%}.col-xl-auto{flex:0 0 auto;width:auto}.col-xl-1{flex:0 0 auto;width:8.3333333%}.col-xl-2{flex:0 0 auto;width:16.666667%}.col-xl-3{flex:0 0 auto;width:25%}.col-xl-4{flex:0 0 auto;width:33.333333%}.col-xl-5{flex:0 0 auto;width:41.666667%}.col-xl-6{flex:0 0 auto;width:50%}.col-xl-7{flex:0 0 auto;width:58.333333%}.col-xl-8{flex:0 0 auto;width:66.666667%}.col-xl-9{flex:0 0 auto;width:75%}.col-xl-10{flex:0 0 auto;width:83.333333%}.col-xl-11{flex:0 0 auto;width:91.666667%}.col-xl-12{flex:0 0 auto;width:100%}}@media(min-width:1400px){.col-xxl{flex:1 0 0%}.col-xxl-auto{flex:0 0 auto;width:auto}.col-xxl-1{flex:0 0 auto;width:8.3333333%}.col-xxl-2{flex:0 0 auto;width:16.666667%}.col-xxl-3{flex:0 0 auto;width:25%}.col-xxl-4{flex:0 0 auto;width:33.333333%}.col-xxl-5{flex:0 0 auto;width:41.666667%}.col-xxl-6{flex:0 0 auto;width:50%}.col-xxl-7{flex:0 0 auto;width:58.333333%}.col-xxl-8{flex:0 0 auto;width:66.666667%}.col-xxl-9{flex:0 0 auto;width:75%}.col-xxl-10{flex:0 0 auto;width:83.333333%}.col-xxl-11{flex:0 0 auto;width:91.666667%}.col-xxl-12{flex:0 0 auto;width:100%}}.g-0,.gx-0{--bs-gutter-x:0}.g-0,.gy-0{--bs-gutter-y:0}.g-1,.gx-1{--bs-gutter-x:.25rem}.g-1,.gy-1{--bs-gutter-y:.25rem}.g-2,.gx-2{--bs-gutter-x:.5rem}.g-2,.gy-2{--bs-gutter-y:.5rem}.g-3,.gx-3{--bs-gutter-x:1rem}.g-3,.gy-3{--bs-gutter-y:1rem}.g-4,.gx-4{--bs-gutter-x:1.5rem}.g-4,.gy-4{--bs-gutter-y:1.5rem}.g-5,.gx-5{--bs-gutter-x:3rem}.g-5,.gy-5{--bs-gutter-y:3rem}.d-none{display:none!important}.d-block{display:block!important}.d-inline-block{display:inline-block!important}.d-flex{display:flex!important}.d-grid{display:grid!important}.flex-row{flex-direction:row!important}.flex-column{flex-direction:column!important}.flex-wrap{flex-wrap:wrap!important}.justify-content-start{justify-content:flex-start!important}.justify-content-center{justify-content:center!important}.justify-content-end{justify-content:flex-end!important}.justify-content-between{justify-content:space-between!important}.align-items-start{align-items:flex-start!important}.align-items-center{align-items:center!important}.align-items-end{align-items:flex-end!important}.text-start{text-align:left!important}.text-center{text-align:center!important}.text-end{text-align:right!important}.mx-auto{margin-right:auto!important;margin-left:auto!important}.ms-auto{margin-left:auto!important}.me-auto{margin-right:auto!important}.w-100{width:100%!important}.h-100{height:100%!important}@media(min-width:992px){.flex-lg-row-reverse{flex-direction:row-reverse!important}.justify-content-lg-start{justify-content:flex-start!important}.justify-content-lg-center{justify-content:center!important}.justify-content-lg-end{justify-content:flex-end!important}.d-lg-none{display:none!important}.d-lg-block{display:block!important}.d-lg-flex{display:flex!important}}@media(min-width:768px){.d-md-none{display:none!important}.d-md-block{display:block!important}.d-md-flex{display:flex!important}.text-md-start{text-align:left!important}}
/* colors_and_type.css */
@font-face {
  font-family: 'Instrument Sans Fallback';
  src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Arimo');
  size-adjust: 102.61%;
  ascent-override: 94.53%;
  descent-override: 24.36%;
  line-gap-override: 0%;
}
:root {
  --white: #fff; --bg: #fff; --bg-subtle: #FFFFFF; --bg-muted: #EDF1FA; --surface: #fff; --paper: #FAFBFD;
  --ink: #0A1633; --ink-800: #122048; --ink-700: #1A2B5E;
  --slate-900: #0A0F1E; --slate-800: #1A2138; --slate-700: #2D3550; --slate-600: #49516B; --slate-500: #656D85; --slate-400: #8E96AB; --slate-300: #BEC4D3; --slate-200: #DDE2EC; --slate-150: #E7EBF2; --slate-100: #F0F3F8; --slate-50: #F7F8FB;
  --fg1: #0A0F1E; --fg2: #49516B; --fg3: #656D85; --fg-ondark: #F2F5FF; --fg-ondark-2: #AEB8D6;
  --ks-blue: #0A5BF0; --primary: #0A5BF0; --ks-blue-700: #0033EE; --ks-blue-deep: #0226B8; --ks-blue-500: #0A5BF0; --ks-blue-bright: #0A84FF; --ks-blue-300: #8DB8FF; --ks-blue-200: #BBD4FF; --ks-blue-100: #DCE8FF; --ks-blue-50: #EEF4FF; --violet: #7C3AED; --violet-300: #C4B5FD; --violet-50: #F5F3FF; --peach: #FF9A76; --peach-deep: #C2521F; --peach-100: #FFE6DB; --glow-blue: rgba(10,132,255,.35);
  --gold: #FF9A76; --gold-600: #F0754C; --gold-deep: #B44A1C; --gold-300: #FFC4AE; --gold-100: #FFE6DB; --gold-50: #FFF4EF;
  --border: #E3E7EF; --border-strong: #C9D0DE; --border-ondark: rgba(255,255,255,.16); --rule: #E7EBF2; --rule-ondark: rgba(255,255,255,.14); --ring: rgba(10,91,240,.28);
  --success: #12795A; --success-bg: #EAF6F1; --danger: #C0392B; --danger-bg: #FDEEEC; --warning: #A97210; --warning-bg: #FDF6E9;
  --ks-grad: linear-gradient(120deg, #0033EE 0%, #0A5BF0 55%, #0A84FF 100%); --gold-grad: linear-gradient(96deg, #F0754C, #FF9A76); --flow-grad: linear-gradient(90deg, #0033EE 0%, #0A84FF 38%, #7C3AED 72%, #FF9A76 100%);
  --font-display: "Instrument Sans", "Instrument Sans Fallback", ui-sans-serif, system-ui, sans-serif; --font-sans: "Instrument Sans", "Instrument Sans Fallback", ui-sans-serif, system-ui, sans-serif; --font-mono: "Instrument Sans", "Instrument Sans Fallback", ui-sans-serif, system-ui, sans-serif;
  --fs-display: clamp(2.9rem, 1.6rem + 4.4vw, 5.8rem); --fs-h1: clamp(2.3rem, 1.5rem + 2.8vw, 4rem); --fs-h2: clamp(1.9rem, 1.3rem + 2vw, 3.1rem); --fs-h3: clamp(1.3rem, 1.1rem + .7vw, 1.7rem); --fs-h4: 1.12rem; --fs-lead: clamp(1.07rem, 1rem + .35vw, 1.3rem); --fs-body: 1rem; --fs-sm: .9rem; --fs-eyebrow: 11.5px;
  --lh-tight: 1; --lh-snug: 1.06; --lh-head: 1.1; --lh-body: 1.62; --fw-reg: 400; --fw-med: 500; --fw-semi: 600; --fw-bold: 700;
  --tracking-display: -.036em; --tracking-head: -.026em; --tracking-eyebrow: .02em;
  --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-2xl: 28px; --r-pill: 999px;
  --sh-xs: 0 1px 2px rgba(10,15,30,.05); --sh-sm: 0 4px 12px -6px rgba(10,15,30,.1); --sh-md: 0 14px 34px -18px rgba(10,15,30,.16); --sh-lg: 0 30px 70px -30px rgba(10,15,30,.2); --sh-xl: 0 50px 110px -40px rgba(10,15,30,.26); --sh-blue: 0 18px 40px -18px rgba(11,79,230,.45); --sh-ion: var(--sh-blue); --sh-gold: 0 18px 40px -18px rgba(245,179,50,.45);
  --dur-fast: .16s; --dur: .28s; --dur-slow: .55s; --dur-cine: 1.1s; --ease-out: cubic-bezier(.16,1,.3,1); --ease-in-out: cubic-bezier(.65,0,.35,1); --ease-flow: cubic-bezier(.4,0,.2,1);
  --container: 1160px; --container-wide: 1320px; --gutter: clamp(20px, 4vw, 56px); --sp-1: 8px; --sp-2: 12px; --sp-3: 18px; --sp-4: 26px; --sp-5: 40px; --sp-6: 64px; --sp-7: 96px;
}
* { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg1); font: var(--fw-reg) var(--fs-body)/var(--lh-body) var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--font-display); font-weight: var(--fw-semi); color: var(--fg1); }
p { margin: 0; } img, svg { max-width: 100%; }
a { color: var(--ks-blue); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); } a:hover { color: var(--ks-blue-700); }
:focus-visible { outline: 2px solid var(--ks-blue-bright); outline-offset: 2px; border-radius: 4px; } ::selection { background: var(--ks-blue-100); color: var(--ink); }
.ks-display { font-family: var(--font-display); font-weight: var(--fw-semi); font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--tracking-display); }
.ks-h1 { font-family: var(--font-display); font-weight: var(--fw-semi); font-size: var(--fs-h1); line-height: var(--lh-snug); letter-spacing: var(--tracking-head); }
.ks-h2 { font-family: var(--font-display); font-weight: var(--fw-semi); font-size: var(--fs-h2); line-height: var(--lh-head); letter-spacing: var(--tracking-head); }
.ks-h3 { font-family: var(--font-display); font-weight: var(--fw-semi); font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -.018em; }
.ks-h4 { font-family: var(--font-display); font-weight: var(--fw-semi); font-size: var(--fs-h4); line-height: 1.3; letter-spacing: -.012em; }
.ks-lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--fg2); text-wrap: pretty; } .ks-body { font-size: var(--fs-body); color: var(--fg2); text-wrap: pretty; } .ks-sm { font-size: var(--fs-sm); color: var(--fg3); }
.ks-mono { font-family: var(--font-sans); font-size: 13px; letter-spacing: 0; font-weight: 500; }
/* keystone.css */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
::selection { background: var(--ks-blue-200); color: var(--ink); }
a { color: var(--ks-blue); text-decoration: none; transition: color var(--dur) var(--ease-out); }
a:hover { color: var(--ks-blue-700); }
img { max-width: 100%; }
h1,h2,h3,h4,h5,h6 { margin: 0; }
p { margin: 0; }
:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); border-radius: var(--r-xs); }
.ks-container { width: 100%; max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter); }
.ks-container-wide { width: 100%; max-width: var(--container-wide); margin: 0 auto; padding-inline: var(--gutter); }
.ks-section { padding-block: clamp(64px, 8vw, 128px); }
.ks-section-sm { padding-block: clamp(48px, 6vw, 88px); }
.ks-bg-subtle { background: var(--bg-subtle); }
.ks-bg-muted { background: var(--bg-muted); }
.ks-divider { height: 1px; background: var(--border); border: 0; margin: 0; }
.ks-eyebrow {
  font: var(--fw-semi) var(--fs-eyebrow)/1 var(--font-sans);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: none;
  color: var(--primary);
}
.ks-display { font: var(--fw-bold) var(--fs-display)/var(--lh-tight) var(--font-sans); letter-spacing: var(--tracking-display); color: var(--fg1); text-wrap: balance; }
.ks-h1 { font: var(--fw-bold) var(--fs-h1)/var(--lh-snug) var(--font-sans); letter-spacing: var(--tracking-head); color: var(--fg1); text-wrap: balance; }
.ks-h2 { font: var(--fw-bold) var(--fs-h2)/var(--lh-snug) var(--font-sans); letter-spacing: var(--tracking-head); color: var(--fg1); text-wrap: balance; }
.ks-h3 { font: var(--fw-semi) var(--fs-h3)/1.25 var(--font-sans); letter-spacing: -0.012em; color: var(--fg1); }
.ks-h4 { font: var(--fw-semi) var(--fs-h4)/1.3 var(--font-sans); color: var(--fg1); }
.ks-lead { font: var(--fw-reg) var(--fs-lead)/1.55 var(--font-sans); color: var(--fg2); text-wrap: pretty; }
.ks-body { font: var(--fw-reg) var(--fs-body)/var(--lh-body) var(--font-sans); color: var(--fg2); text-wrap: pretty; }
.ks-sm { font: var(--fw-reg) var(--fs-sm)/1.55 var(--font-sans); color: var(--fg2); }
.ks-mono { font: var(--fw-med) var(--fs-sm)/1.5 var(--font-mono); letter-spacing: 0; }
.ks-grad-text { background: linear-gradient(120deg,#6aa8ff,#0a84ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.ks-gold-text { color: var(--gold); }
.ks-measure { max-width: 60ch; }
.ks-measure-sm { max-width: 46ch; }
.ks-wedge {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; gap: 9px;
  font: var(--fw-semi) 12px/1 var(--font-sans);
  letter-spacing: 0; text-transform: none;
  padding: 9px 16px 9px 14px; color: var(--ks-blue);
  width: fit-content; max-width: 100%; white-space: normal; text-wrap: balance;
}
.ks-wedge::before {
  content: ""; width: 8px; height: 8px; flex: none; align-self: center;
  background: currentColor; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.ks-wedge::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--ks-blue-50); border-left: 2px solid var(--ks-blue);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
}
.ks-wedge--gold { color: var(--gold-deep); }
.ks-wedge--gold::after { background: var(--gold-50); border-left-color: var(--gold); }
.ks-wedge--ondark { color: var(--gold); }
.ks-wedge--ondark::after { background: rgba(245,179,50,.13); border-left-color: var(--gold); }
.ks-wedge--ondark-blue { color: var(--ks-blue-bright); }
.ks-wedge--ondark-blue::after { background: rgba(10,132,255,.16); border-left-color: var(--ks-blue-bright); }
.ks-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font: var(--fw-semi) 15px/1 var(--font-sans); letter-spacing: -.005em;
  border-radius: var(--r-md); border: 1px solid transparent; cursor: pointer;
  padding: 13px 22px; transition: all var(--dur) var(--ease-out); white-space: nowrap;
  text-decoration: none;
}
.ks-btn:active { transform: scale(.98); }
.ks-btn svg { width: 18px; height: 18px; flex: none; }
.ks-btn--lg { font-size: 16px; padding: 16px 28px; }
.ks-btn--sm { font-size: 13.5px; padding: 9px 16px; }
.ks-btn--sm svg { width: 16px; height: 16px; }
.ks-btn--primary { background: var(--ks-blue); color: #fff; box-shadow: var(--sh-blue); }
.ks-btn--primary:hover { background: var(--ks-blue-700); color:#fff; transform: translateY(-1px); }
.ks-btn--gold { background: var(--gold); color: #3a2602; box-shadow: var(--sh-gold); }
.ks-btn--gold:hover { background: var(--gold-600); color: #fff; transform: translateY(-1px); }
.ks-btn--secondary { background: #fff; color: var(--ks-blue); border-color: var(--border-strong); }
.ks-btn--secondary:hover { border-color: var(--ks-blue); background: var(--ks-blue-50); transform: translateY(-1px); }
.ks-btn--ghost { background: transparent; color: var(--fg1); }
.ks-btn--ghost:hover { background: var(--slate-100); }
.ks-btn--ondark { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.22); backdrop-filter: blur(6px); }
.ks-btn--ondark:hover { background: rgba(255,255,255,.16); color:#fff; transform: translateY(-1px); }
.ks-btn--link { background: transparent; color: var(--ks-blue); padding: 6px 0; }
.ks-btn--link:hover { color: var(--ks-blue-700); gap: 12px; }
.ks-ink { position: relative; background: var(--ink); color: var(--fg-ondark); overflow: hidden; }
.ks-ink > .ks-container, .ks-ink > .ks-container-wide, .ks-ink > .ks-container > *, .ks-ink > .ks-container-wide > * { position: relative; }
.ks-ink > .ks-container, .ks-ink > .ks-container-wide { z-index: 1; }
.ks-ink h1,.ks-ink h2,.ks-ink h3,.ks-ink h4 { color: #fff; }
.ks-ink .ks-lead,.ks-ink .ks-body { color: var(--fg-ondark-2); }
.ks-ink .ks-eyebrow { color: var(--gold); }
.ks-ashlar::before {
  content: ""; position: absolute; inset: 0; opacity: .09; pointer-events: none; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='112'%20height='128'%20viewBox='0%200%20112%20128'%3E%3Cg%20fill='none'%20stroke='%23ffffff'%20stroke-opacity='0.7'%3E%3Cpath%20d='M56%2030L88%2048L88%2082L56%20100L24%2082L24%2048Z'/%3E%3Cpath%20d='M56%2030L56%2065'/%3E%3Cpath%20d='M56%2065L88%2082'/%3E%3Cpath%20d='M56%2065L24%2082'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 128px;
  -webkit-mask-image: radial-gradient(80% 75% at 90% 4%, #000, transparent 62%);
  mask-image: radial-gradient(80% 75% at 90% 4%, #000, transparent 62%);
}
.ks-glow { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(6px); z-index: 0;
  background: radial-gradient(circle, rgba(10,132,255,.42), transparent 62%); }
.ks-glow--gold { background: radial-gradient(circle, rgba(245,179,50,.30), transparent 64%); }
.ks-cubepat { position: relative; }
.ks-cubepat > * { position: relative; z-index: 1; }
.ks-cubepat::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='58'%20height='66'%20viewBox='0%200%2058%2066'%3E%3Cg%20fill='none'%20stroke='%230A1F3A'%20stroke-opacity='0.55'%3E%3Cpath%20d='M29%2015L45%2024L45%2042L29%2051L13%2042L13%2024Z'/%3E%3Cpath%20d='M29%2015L29%2033'/%3E%3Cpath%20d='M29%2033L45%2042'/%3E%3Cpath%20d='M29%2033L13%2042'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 58px 66px; opacity: .45;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent);
  mask-image: linear-gradient(180deg, #000, transparent);
}
.ks-cubepat--ondark::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='58'%20height='66'%20viewBox='0%200%2058%2066'%3E%3Cg%20fill='none'%20stroke='%23ffffff'%20stroke-opacity='0.6'%3E%3Cpath%20d='M29%2015L45%2024L45%2042L29%2051L13%2042L13%2024Z'/%3E%3Cpath%20d='M29%2015L29%2033'/%3E%3Cpath%20d='M29%2033L45%2042'/%3E%3Cpath%20d='M29%2033L13%2042'/%3E%3C/g%3E%3C/svg%3E");
  opacity: .4;
}
.ks-cube-auto {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='58'%20height='66'%20viewBox='0%200%2058%2066'%3E%3Cg%20fill='none'%20stroke='%230A1F3A'%20stroke-opacity='0.5'%3E%3Cpath%20d='M29%2015L45%2024L45%2042L29%2051L13%2042L13%2024Z'/%3E%3Cpath%20d='M29%2015L29%2033'/%3E%3Cpath%20d='M29%2033L45%2042'/%3E%3Cpath%20d='M29%2033L13%2042'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 58px 66px; opacity: .4;
  -webkit-mask-image: radial-gradient(125% 100% at 50% 0%, #000 28%, transparent 76%);
  mask-image: radial-gradient(125% 100% at 50% 0%, #000 28%, transparent 76%);
}
.ks-cube-auto.is-dark {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='58'%20height='66'%20viewBox='0%200%2058%2066'%3E%3Cg%20fill='none'%20stroke='%23ffffff'%20stroke-opacity='0.6'%3E%3Cpath%20d='M29%2015L45%2024L45%2042L29%2051L13%2042L13%2024Z'/%3E%3Cpath%20d='M29%2015L29%2033'/%3E%3Cpath%20d='M29%2033L45%2042'/%3E%3Cpath%20d='M29%2033L13%2042'/%3E%3C/g%3E%3C/svg%3E");
  opacity: .3;
}
@keyframes ksCubeIn { 0% { opacity: 0; transform: translateY(14px) scale(.92); } 100% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .ks-cube-in { opacity: 0; }
  .ks-cube-in.is-in { animation: ksCubeIn .7s var(--ease-out) both; }
}
@media (prefers-reduced-motion: reduce) { .ks-cube-in { opacity: 1; } }
.kc-art { display: block; width: 100%; }
.kc-hero-art { width: 100%; max-width: 430px; margin-inline: auto; }
@media (max-width: 991px){ .kc-hero-art { max-width: 300px; margin-top: 4px; } }
.hero-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.hero-split > .kc-hero-art { max-width: 410px; }
@media (max-width: 991px){ .hero-split { grid-template-columns: 1fr; gap: 26px; } .hero-split > .kc-hero-art { display: none; } }
.stage-stack { display: grid; gap: 12px; width: 100%; max-width: 432px; margin-inline: auto; }
.stage-stack--grid { grid-template-columns: 1fr 1fr; }
.stage { position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 15px 17px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--sh-xs); transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); }
.stage:hover { box-shadow: var(--sh-md); border-color: var(--slate-300); transform: translateY(-2px); }
.stage .ks-icon-tile { width: 42px; height: 42px; flex: none; } .stage .ks-icon-tile svg { width: 20px; height: 20px; }
.stage-body { flex: 1; min-width: 0; }
.stage-n { font: var(--fw-bold) 11px/1 var(--font-mono); color: var(--gold-deep); letter-spacing: 0; text-transform: none; }
.stage-t { font: var(--fw-semi) 15px/1.2 var(--font-sans); color: var(--fg1); margin-top: 4px; }
.stage-s { font: var(--fw-reg) 12.5px/1.4 var(--font-sans); color: var(--fg3); margin-top: 3px; text-wrap: pretty; }
.stage--gold { border-color: var(--gold-300); }
.stage--gold .ks-icon-tile { background: var(--gold-50); color: var(--gold-deep); }
.stage--ondark { background: var(--ink-800); border-color: var(--border-ondark); box-shadow: none; }
.stage--ondark:hover { border-color: rgba(255,255,255,.22); }
.stage--ondark .stage-t { color: #fff; }
.stage--ondark .stage-s { color: var(--fg-ondark-2); }
.stage--ondark .ks-icon-tile { background: rgba(255,255,255,.07); color: var(--ks-blue-bright); }
.stage--ondark.stage--gold { border-color: rgba(245,179,50,.5); }
.stage--ondark.stage--gold .ks-icon-tile { background: rgba(245,179,50,.16); color: var(--gold); }
.stage-stack--stair .stage:nth-child(2) { margin-left: 14px; }
.stage-stack--stair .stage:nth-child(3) { margin-left: 28px; }
.stage-stack--stair .stage:nth-child(4) { margin-left: 42px; }
@media (max-width: 991px){ .stage-stack--stair .stage { margin-left: 0 !important; } }
.stage-prog { height: 6px; border-radius: var(--r-pill); background: var(--slate-150); overflow: hidden; margin-top: 9px; }
.stage--ondark .stage-prog { background: rgba(255,255,255,.12); }
.stage-prog i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--ks-grad); transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease-out); }
.stage-prog i.go { background: var(--gold-grad); }
.ks-reveal.is-in .stage-prog i { transform: scaleX(1); }
.ks-reveal.rv-right:not(.is-in) { transform: translateX(28px); }
.ks-reveal.rv-up:not(.is-in) { transform: translateY(30px); }
.ks-reveal.rv-zoom:not(.is-in) { transform: scale(.9); }
.kc-art svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 34px 50px rgba(6,16,34,.34)); }
.kc-art .kc-piece { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .kc-art.is-in .kc-piece { animation: kcIn .7s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 95ms); }
  .kc-art.is-in .kc-float { animation: kcIn .7s var(--ease-out) both, kcFloat 7s var(--ease-in-out) infinite; animation-delay: calc(var(--i, 0) * 95ms), calc(760ms + var(--i, 0) * 240ms); }
}
@keyframes kcIn { from { opacity: 0; transform: translateY(20px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes kcFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: no-preference) {
  .kc-art.kc-anim-lock.is-in .kc-piece { animation: kcLock .62s var(--ease-out) both; animation-delay: calc(var(--i,0) * 90ms); }
  .kc-art.kc-anim-stack.is-in .kc-piece { animation: kcStack .58s var(--ease-out) both; animation-delay: calc(var(--i,0) * 120ms); }
  .kc-art.kc-anim-separate.is-in .kc-piece { animation: kcSep .72s var(--ease-out) both; animation-delay: calc(var(--i,0) * 75ms); }
  .kc-art.kc-anim-grow.is-in .kc-piece { animation: kcGrow .66s var(--ease-out) both; animation-delay: calc(var(--i,0) * 95ms); }
  .kc-art.kc-anim-rotate.is-in { animation: kcRot .9s var(--ease-out) both; transform-origin: 50% 70%; }
  .kc-art.kc-anim-rotate.is-in .kc-piece { animation: kcFade .7s var(--ease-out) both; animation-delay: calc(var(--i,0) * 55ms); }
}
@keyframes kcLock { 0% { opacity: 0; transform: translateY(-32px) scale(1.03); } 72% { opacity: 1; transform: translateY(3px) scale(1); } 100% { transform: none; } }
@keyframes kcStack { from { opacity: 0; transform: translateY(38px) scale(.95); } to { opacity: 1; transform: none; } }
@keyframes kcSep { from { opacity: 0; transform: scale(1.5); } to { opacity: 1; transform: none; } }
@keyframes kcGrow { from { opacity: 0; transform: translateY(24px) scaleY(.62); } to { opacity: 1; transform: none; } }
@keyframes kcRot { from { transform: rotate(-11deg) scale(.86); } to { transform: none; } }
@keyframes kcFade { from { opacity: 0; } to { opacity: 1; } }
.ks-media { position: relative; isolation: isolate; border-radius: var(--r-lg); overflow: hidden; clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%); box-shadow: var(--sh-lg); background: var(--ink-800); }
.ks-media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .7s var(--ease-out); }
.ks-media--wide img { aspect-ratio: 16 / 10; }
.ks-media--tall img { aspect-ratio: 4 / 5; }
.ks-media--square img { aspect-ratio: 1 / 1; }
.ks-media::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(135deg, rgba(10,22,38,.52), rgba(10,91,240,.14) 55%, rgba(10,22,38,.26)); mix-blend-mode: multiply; pointer-events: none; }
.ks-media::after { content: ""; position: absolute; z-index: 2; left: 16px; bottom: 15px; width: 24px; height: 24px; background: var(--gold-grad); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); opacity: .92; box-shadow: 0 4px 12px rgba(8,20,40,.4); pointer-events: none; }
.ks-media--blue::after { background: var(--ks-grad); }
.ks-media:hover img { transform: scale(1.04); }
.ks-media-cap { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 30px 20px 16px; display: flex; align-items: center; gap: 9px; font: var(--fw-semi) 13px/1.3 var(--font-sans); color: #fff; background: linear-gradient(transparent, rgba(8,18,34,.78)); }
.ks-media-cap svg { width: 16px; height: 16px; color: var(--gold); flex: none; }
.ks-media-frame { position: relative; }
.ks-media-frame::before { content: ""; position: absolute; right: -14px; top: -14px; width: 64px; height: 64px; z-index: -1; background: var(--ks-blue-50); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.ks-ink .ks-media-frame::before, .lp-hero--ink .ks-media-frame::before { background: rgba(10,132,255,.16); }
.hero-bg-cube { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.hero-bg-cube .kc-bg { position: absolute; width: 600px; max-width: none; }
.hero-bg-cube .kc-bg svg { filter: none; }
.hero-bg-cube--wire { opacity: .5; }
.hero-bg-cube--glass { opacity: .85; }
.hero-bg-cube--ghost { opacity: .17; }
.hero-bg-cube--right .kc-bg { right: -110px; top: 50%; transform: translateY(-52%); }
.hero-bg-cube--left .kc-bg { left: -140px; top: 50%; transform: translateY(-52%); }
.hero-bg-cube--tr .kc-bg { right: -120px; top: -130px; }
.hero-bg-cube--br .kc-bg { right: -120px; bottom: -150px; }
.hero-bg-cube--bl .kc-bg { left: -130px; bottom: -150px; }
.hero-bg-cube--tl .kc-bg { left: -130px; top: -130px; }
@media (prefers-reduced-motion: no-preference) {
  .kc-art.kc-anim-drift svg { animation: kcDrift 17s var(--ease-in-out) infinite alternate; }
}
@keyframes kcDrift { from { transform: translateY(0) rotate(-1.2deg); } to { transform: translateY(-14px) rotate(1.2deg); } }
@media (max-width: 991px){ .hero-bg-cube { opacity: .5; } .hero-bg-cube--glass { opacity: .55; } .hero-bg-cube .kc-bg { width: 460px; } }
@media (max-width: 640px){ .hero-bg-cube--wire, .hero-bg-cube--ghost { opacity: .32; } }
.hero-viz { position: relative; width: 100%; max-width: 540px; margin-inline: auto; }
.hero-viz-cube { position: absolute; z-index: 5; width: 124px; pointer-events: none; }
.hero-viz-cube .kc-art svg { filter: drop-shadow(0 16px 22px rgba(6,16,34,.42)); }
.viz { position: relative; background: #fff; border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: 0 36px 74px -28px rgba(6,16,34,.52), 0 6px 20px rgba(6,16,34,.08); overflow: hidden; }
.viz--ink { background: var(--ink-800); border-color: var(--border-ondark); color: var(--fg-ondark); }
.viz-bar { display: flex; align-items: center; gap: 7px; padding: 13px 16px; border-bottom: 1px solid var(--border); background: var(--slate-50); }
.viz--ink .viz-bar { border-color: var(--border-ondark); background: rgba(255,255,255,.03); }
.viz-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--slate-300); flex: none; }
.viz--ink .viz-dot { background: rgba(255,255,255,.22); }
.viz-tt { margin-left: 8px; font: var(--fw-med) 12px/1 var(--font-mono); color: var(--slate-500); }
.viz--ink .viz-tt { color: var(--fg-ondark-2); }
.viz-body { padding: 18px; }
.viz-row { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border: 1px solid var(--border); border-radius: var(--r-md); margin-bottom: 10px; background: #fff; }
.viz-row:last-child { margin-bottom: 0; }
.viz--ink .viz-row { border-color: var(--border-ondark); background: rgba(255,255,255,.02); }
.viz-ico { width: 34px; height: 34px; border-radius: var(--r-sm); display: grid; place-items: center; flex: none; background: var(--ks-blue-50); color: var(--ks-blue); }
.viz-ico svg { width: 18px; height: 18px; }
.viz--ink .viz-ico { background: rgba(255,255,255,.07); color: var(--ks-blue-bright); }
.viz-ico--gold { background: var(--gold-50); color: var(--gold-deep); }
.viz-t { font: var(--fw-semi) 14px/1.2 var(--font-sans); color: var(--slate-900); }
.viz--ink .viz-t { color: #fff; }
.viz-s { font: var(--fw-med) 12px/1.3 var(--font-sans); color: var(--slate-500); margin-top: 3px; }
.viz--ink .viz-s { color: var(--fg-ondark-2); }
.viz-prog { height: 6px; border-radius: var(--r-pill); background: var(--slate-150); overflow: hidden; flex: 1; }
.viz--ink .viz-prog { background: rgba(255,255,255,.1); }
.viz-prog i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--ks-grad); }
.viz-kpis { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 14px; }
.viz-kpi { border: 1px solid var(--border); border-radius: var(--r-md); padding: 13px; }
.viz--ink .viz-kpi { border-color: var(--border-ondark); }
.viz-kpi-n { font: var(--fw-bold) 22px/1 var(--font-sans); letter-spacing: -.03em; color: var(--ks-blue); }
.viz--ink .viz-kpi-n { color: #fff; }
.viz-kpi-n.gold { color: var(--gold-deep); }
.viz--ink .viz-kpi-n.gold { color: var(--gold); }
.viz-kpi-l { font: var(--fw-med) 10.5px/1.2 var(--font-sans); color: var(--slate-500); margin-top: 6px; }
.viz--ink .viz-kpi-l { color: var(--fg-ondark-2); }
.viz-bars { display: flex; gap: 7px; align-items: flex-end; height: 76px; }
.viz-bars i { flex: 1; border-radius: 4px 4px 0 0; background: var(--ks-blue-200); }
.viz-bars i.hi { background: var(--ks-blue); } .viz-bars i.go { background: var(--gold); }
.viz-pill { font: var(--fw-semi) 11px/1 var(--font-sans); padding: 5px 10px; border-radius: var(--r-pill); background: var(--ks-blue-50); color: var(--ks-blue-700); margin-left: auto; flex: none; }
.viz-pill--gold { background: var(--gold-50); color: var(--gold-deep); }
.viz-pill--ok { background: var(--success-bg); color: var(--success); }
@media (max-width: 991px){ .hero-viz { max-width: 460px; } }
@media (prefers-reduced-motion: reduce) { }
.ks-card {
  position: relative; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 28px; box-shadow: var(--sh-sm);
  transition: box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
  height: 100%;
}
.ks-card--hover:hover { box-shadow: var(--sh-lg); transform: translateY(-3px); border-color: var(--slate-300); }
.ks-card--faceted { clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%); }
.ks-card--pad-lg { padding: 36px; }
.ks-card--ink { background: var(--ink-800); border-color: var(--border-ondark); color: var(--fg-ondark); box-shadow: none; }
.ks-card--ink:hover { border-color: rgba(255,255,255,.2); }
.ks-card--ink h3,.ks-card--ink h4 { color: #fff; }
.ks-card--ink p { color: var(--fg-ondark-2); }
.ks-card--gold-edge { border-top: 3px solid var(--gold); }
.ks-card--blue-edge { border-top: 3px solid var(--ks-blue); }
.ks-icon-tile {
  display: inline-grid; place-items: center; width: 52px; height: 52px;
  border-radius: var(--r-md); background: var(--ks-blue-50); color: var(--ks-blue); flex: none;
}
.ks-icon-tile svg { width: 24px; height: 24px; }
.ks-icon-tile--gold { background: var(--gold-50); color: var(--gold-deep); }
.ks-icon-tile--ink { background: rgba(255,255,255,.07); color: var(--ks-blue-bright); }
.ks-icon-tile--lg { width: 64px; height: 64px; }
.ks-icon-tile--lg svg { width: 30px; height: 30px; }
.ks-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px;
  border-radius: var(--r-pill); font: var(--fw-med) 13.5px/1 var(--font-sans);
  background: var(--slate-100); color: var(--slate-700); border: 1px solid var(--border);
}
.ks-chip svg { width: 15px; height: 15px; }
.ks-chip--blue { background: var(--ks-blue-50); color: var(--ks-blue-700); border-color: var(--ks-blue-100); }
.ks-chip--gold { background: var(--gold-50); color: var(--gold-deep); border-color: var(--gold-100); }
.ks-chip--ondark { background: rgba(255,255,255,.07); color: var(--fg-ondark); border-color: var(--border-ondark); }
.ks-stat-num { font: var(--fw-bold) clamp(2.25rem, 1.4rem + 2.6vw, 3.25rem)/1 var(--font-sans); letter-spacing: -.03em; color: var(--ks-blue); }
.ks-ink .ks-stat-num { color: #fff; }
.ks-stat-num--gold { color: var(--gold); }
.ks-stat-label { font: var(--fw-med) var(--fs-sm)/1.4 var(--font-sans); color: var(--fg3); margin-top: 8px; }
.ks-ink .ks-stat-label { color: var(--fg-ondark-2); }
.ks-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ks-list li { position: relative; padding-left: 30px; color: var(--fg2); font-size: var(--fs-body); line-height: 1.5; }
.ks-list li::before {
  content: ""; position: absolute; left: 0; top: .42em; width: 13px; height: 13px;
  background: var(--ks-grad); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.ks-list--gold li::before { background: var(--gold-grad); }
.ks-ink .ks-list li { color: var(--fg-ondark-2); }
.ks-cube { display:inline-block; }
.ks-head { display: grid; gap: 16px; }
.ks-head--center { justify-items: center; text-align: center; }
.ks-head--center .ks-lead { max-width: 62ch; }
.ks-nav { position: sticky; top: 0; z-index: 1000; transition: background var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); border-bottom: 1px solid transparent; }
.ks-nav--light { background: rgba(255,255,255,.82); backdrop-filter: blur(14px); }
.ks-nav--ink { background: rgba(13,27,48,.30); backdrop-filter: blur(14px) saturate(135%); -webkit-backdrop-filter: blur(14px) saturate(135%); }
.ks-nav.is-scrolled.ks-nav--light { background: rgba(255,255,255,.92); border-bottom-color: var(--border); box-shadow: var(--sh-xs); }
.ks-nav.is-scrolled.ks-nav--ink { background: rgba(13,27,48,.42); backdrop-filter: blur(14px) saturate(135%); -webkit-backdrop-filter: blur(14px) saturate(135%); border-bottom-color: var(--border-ondark); }
.ks-nav-inner { display: flex; align-items: center; gap: 28px; height: 74px; }
.ks-nav-logo { display: flex; align-items: center; }
.ks-nav-logo-img { height: 30px; width: auto; display: block; }
.ks-logo { display: inline-flex; align-items: center; gap: 11px; }
.ks-logo-mark { height: 34px; width: auto; display: block; }
.ks-logo-word { display: inline-flex; flex-direction: column; line-height: 1; font: var(--fw-bold) 23px/1 var(--font-sans); letter-spacing: -.03em; }
.ks-logo-sub { font: var(--fw-med) 9.5px/1 var(--font-sans); letter-spacing: 0; text-transform: none; margin-top: 4px; opacity: .65; }
.ks-logo--light .ks-logo-word { color: var(--slate-900); }
.ks-logo--light .ks-logo-sub { color: var(--slate-500); opacity: 1; }
.ks-logo--dark .ks-logo-word { color: #fff; }
.ks-logo--dark .ks-logo-sub { color: var(--fg-ondark-2); opacity: 1; }
.ks-foot-brand .ks-logo-mark { height: 36px; }
.ks-foot-logo { display: inline-block; }
.ks-foot-logo img { height: 38px; width: auto; display: block; }
.ks-mobile-head .ks-logo-mark { height: 30px; }
.ks-mobile-head .ks-logo-word { font-size: 20px; }
.ks-nav-links { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
.ks-nav-link {
  display: inline-flex; align-items: center; gap: 5px; padding: 9px 14px; border-radius: var(--r-sm);
  font: var(--fw-med) 15px/1 var(--font-sans); color: var(--slate-700); cursor: pointer; background: none; border: 0;
  transition: color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.ks-nav-link svg { width: 15px; height: 15px; opacity: .7; transition: transform var(--dur) var(--ease-out); }
.ks-nav-link:hover { color: var(--ks-blue); background: var(--ks-blue-50); }
.ks-nav-link.is-active { color: var(--ks-blue); }
.ks-nav--ink .ks-nav-link { color: var(--fg-ondark); }
.ks-nav--ink .ks-nav-link:hover { color: #fff; background: rgba(255,255,255,.08); }
.ks-nav--ink .ks-nav-link.is-active { color: var(--ks-blue-bright); }
.ks-nav--ink.is-scrolled .ks-nav-link.is-active { color: var(--ks-blue-bright); }
.ks-nav-cta { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.ks-nav-item { position: relative; }
.ks-nav-item:hover .ks-nav-link svg { transform: rotate(180deg); }
.ks-mega {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(-6px);
  background: #fff; border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--sh-xl);
  padding: 18px; opacity: 0; visibility: hidden; transition: all var(--dur) var(--ease-out); z-index: 1100;
}
.ks-nav-item:hover .ks-mega { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.ks-mega-grid { display: grid; gap: 8px; }
.ks-mega--2 { width: 740px; }
.ks-mega--2 .ks-mega-grid { grid-template-columns: 1fr 1fr; column-gap: 18px; }
.ks-mega--1 { width: 400px; }
.ks-mega-link { display: flex; gap: 16px; align-items: flex-start; padding: 16px 18px; border-radius: var(--r-md); transition: background var(--dur) var(--ease-out); }
.ks-mega-link:hover { background: var(--slate-50); }
.ks-mega-link .ks-icon-tile { width: 44px; height: 44px; display: grid; place-items: center; }
.ks-mega-link .ks-icon-tile svg { width: 21px; height: 21px; display: block; }
.ks-mega-link > span { display: flex; flex-direction: column; min-width: 0; }
.ks-mega-title { display: block; font: var(--fw-semi) 15px/1.3 var(--font-sans); color: var(--fg1); margin-bottom: 5px; }
.ks-mega-desc { display: block; font: var(--fw-reg) 13px/1.5 var(--font-sans); color: var(--fg3); text-wrap: pretty; }
.ks-mega-foot { margin-top: 12px; padding: 16px 18px; border-radius: var(--r-md); background: var(--slate-50); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ks-burger { display: none; margin-left: auto; background: none; border: 0; cursor: pointer; padding: 8px; color: var(--slate-900); }
.ks-nav--ink .ks-burger { color: #fff; }
.ks-burger svg { width: 26px; height: 26px; }
.ks-mobile { position: fixed; inset: 0; z-index: 1200; background: var(--ink); color: #fff; padding: 24px var(--gutter); overflow-y: auto; transform: translateX(100%); transition: transform var(--dur-slow) var(--ease-out); }
.ks-mobile.is-open { transform: none; }
.ks-mobile-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.ks-mobile-head img { height: 28px; }
.ks-mobile-close { background: none; border: 0; color: #fff; cursor: pointer; padding: 6px; }
.ks-mobile-group { border-bottom: 1px solid var(--border-ondark); padding: 14px 0; }
.ks-mobile-group > span { display: block; font: var(--fw-semi) 13px/1 var(--font-sans); letter-spacing: 0; text-transform: none; color: var(--gold); margin-bottom: 12px; }
.ks-mobile-link { display: block; padding: 9px 0; color: var(--fg-ondark); font-size: 16px; }
.ks-mobile-link:hover { color: #fff; }
.ks-mobile-group.is-active > span { color: var(--ks-blue-bright); }
.ks-mobile-link.is-active { color: #fff; font-weight: 600; }
@media (max-width: 1080px) {
  .ks-nav-links { display: none; }
  .ks-burger { display: inline-flex; }
  .ks-nav-cta .ks-btn--secondary { display: none; }
}
.ks-foot { position: relative; background: var(--ink); color: var(--fg-ondark-2); overflow: hidden; }
.ks-foot > * { position: relative; z-index: 1; }
.ks-foot::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='112'%20height='128'%20viewBox='0%200%20112%20128'%3E%3Cg%20fill='none'%20stroke='%23ffffff'%20stroke-opacity='0.8'%3E%3Cpath%20d='M56%2030L88%2048L88%2082L56%20100L24%2082L24%2048Z'/%3E%3Cpath%20d='M56%2030L56%2065'/%3E%3Cpath%20d='M56%2065L88%2082'/%3E%3Cpath%20d='M56%2065L24%2082'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 112px 128px;
  -webkit-mask-image: radial-gradient(70% 90% at 92% 100%, #000, transparent 64%);
  mask-image: radial-gradient(70% 90% at 92% 100%, #000, transparent 64%);
}
.ks-foot-cube { position: absolute; right: -10px; bottom: -18px; width: 210px; opacity: .9; pointer-events: none; z-index: 0; }
.ks-foot-cube svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 22px 30px rgba(4,12,28,.45)); }
.ks-foot-top { padding-block: clamp(56px, 7vw, 88px); position: relative; }
.ks-foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; }
.ks-foot-brand img { height: 30px; margin-bottom: 20px; }
.ks-foot h5 { font: var(--fw-semi) 13px/1 var(--font-sans); letter-spacing: 0; text-transform: none; color: #fff; margin-bottom: 18px; }
.ks-foot-links { display: grid; gap: 11px; }
.ks-foot-links a { color: var(--fg-ondark-2); font-size: 14.5px; }
.ks-foot-links a:hover { color: #fff; }
.ks-foot-seo { position: relative; z-index: 1; border-top: 1px solid var(--border-ondark); padding-block: 40px 12px; }
.ks-foot-seo h4 { font: var(--fw-semi) 13px/1 var(--font-sans); letter-spacing: 0; text-transform: none; color: var(--gold); margin-bottom: 8px; }
.ks-foot-seo .lead { font: var(--fw-reg) 14.5px/1.55 var(--font-sans); color: var(--fg-ondark-2); margin-bottom: 28px; max-width: 64ch; }
.ks-foot-seo-grid { display: flex; flex-direction: column; gap: 22px; }
.ks-foot-seo-col { display: grid; gap: 12px; }
.ks-foot-seo-col h5 { display: flex; align-items: center; gap: 10px; font: var(--fw-semi) 13px/1 var(--font-sans); letter-spacing: 0; text-transform: none; color: #fff; margin: 0; }
.ks-foot-seo-col h5::before { content: ""; width: 12px; height: 12px; flex: none; background: var(--gold-grad); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); box-shadow: 0 0 0 4px rgba(245,179,50,.1); }
.ks-foot-seo-links { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; }
.ks-foot-seo-links a { position: relative; color: var(--fg-ondark-2); font: var(--fw-reg) 14.5px/1.4 var(--font-sans); padding: 5px 22px 5px 0; transition: color var(--dur) var(--ease-out); }
.ks-foot-seo-links a:not(:last-child)::after { content: ""; position: absolute; right: 9px; top: 50%; width: 6px; height: 6px; transform: translateY(-50%) rotate(45deg); background: var(--ks-blue-bright); opacity: .42; border-radius: 1px; transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
.ks-foot-seo-links a:hover { color: #fff; }
.ks-foot-seo-links a:hover::after { opacity: .9; transform: translateY(-50%) rotate(45deg) scale(1.25); }
@media (max-width: 600px){ .ks-foot-seo-links a { padding-right: 20px; } }
.ks-foot-offices { position: relative; z-index: 1; border-top: 1px solid var(--border-ondark); padding-block: 34px; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.ks-office { position: relative; overflow: hidden; padding: 26px 28px; border: 1px solid var(--border-ondark); border-radius: var(--r-lg); background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)); transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); }
.ks-office:hover { border-color: rgba(255,255,255,.22); background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); transform: translateY(-3px); }
.ks-office::after { content: ""; position: absolute; top: 0; right: 0; width: 22px; height: 22px; background: var(--ks-blue-bright); opacity: .25; clip-path: polygon(100% 0, 100% 100%, 0 0); transition: opacity var(--dur) var(--ease-out); }
.ks-office--head::after { background: var(--gold); }
.ks-office:hover::after { opacity: .6; }
.ks-office-mark { display: grid; place-items: center; width: 46px; height: 46px; border-radius: var(--r-md); flex: none; margin-bottom: 18px; }
.ks-office-mark svg { width: 23px; height: 23px; }
.ks-office--head .ks-office-mark { background: rgba(245,179,50,.14); color: var(--gold); box-shadow: inset 0 0 0 1px rgba(245,179,50,.25); }
.ks-office--branch .ks-office-mark { background: rgba(10,132,255,.16); color: var(--ks-blue-bright); box-shadow: inset 0 0 0 1px rgba(10,132,255,.28); }
.ks-office-tag { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ks-office-label { font: var(--fw-semi) 11.5px/1.3 var(--font-sans); letter-spacing: 0; text-transform: none; }
.ks-office--head .ks-office-label { color: var(--gold); }
.ks-office--branch .ks-office-label { color: var(--ks-blue-bright); }
.ks-office-flag { margin-left: auto; font: var(--fw-semi) 10.5px/1 var(--font-sans); letter-spacing: 0; text-transform: none; color: var(--fg-ondark-2); border: 1px solid var(--border-ondark); border-radius: var(--r-pill); padding: 5px 11px; flex: none; }
.ks-office-name { font: var(--fw-bold) 18px/1.25 var(--font-sans); letter-spacing: -.012em; color: #fff; margin-bottom: 12px; }
.ks-office-addr { font: var(--fw-reg) 14px/1.7 var(--font-sans); font-style: normal; color: var(--fg-ondark-2); margin: 0; padding-top: 12px; border-top: 1px solid var(--border-ondark); }
@media (max-width: 720px){ .ks-foot-offices { grid-template-columns: 1fr; gap: 16px; padding-block: 26px; } }
.ks-foot-bottom { border-top: 1px solid var(--border-ondark); padding-block: 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ks-foot-bottom span { font-size: 13.5px; color: var(--fg-ondark-2); }
.ks-foot-legal { display: flex; align-items: center; gap: 12px; }
.ks-foot-legal a { font: var(--fw-med) 13.5px/1 var(--font-sans); color: var(--fg-ondark-2); transition: color var(--dur) var(--ease-out); }
.ks-foot-legal a:hover { color: #fff; }
.ks-foot-legal-sep { color: var(--slate-600); }
.ks-foot-social { display: flex; gap: 10px; }
.ks-foot-social a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--r-sm); background: rgba(255,255,255,.06); color: var(--fg-ondark); }
.ks-foot-social a:hover { background: rgba(255,255,255,.14); color: #fff; }
.ks-foot-social svg { width: 18px; height: 18px; }
@media (max-width: 860px) { .ks-foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 520px) { .ks-foot-grid { grid-template-columns: 1fr; } }
.ks-reveal { opacity: 0; transform: translateY(16px); }
.ks-reveal.is-in { opacity: 1; transform: none; transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
  .ks-reveal { opacity: 1 !important; transform: none !important; }
  html { scroll-behavior: auto; }
}
100% { transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .ks-lock { animation: ksLock 1s var(--ease-out) both; }
}
.ks-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); z-index: 2200; background: var(--ink); color: #fff; padding: 14px 22px; border-radius: var(--r-pill); box-shadow: var(--sh-xl); font: var(--fw-med) 14px/1 var(--font-sans); opacity: 0; transition: all var(--dur) var(--ease-out); display: flex; align-items: center; gap: 10px; }
.ks-toast svg { width: 17px; height: 17px; color: var(--gold); }
.ks-toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }
.ks-grid { display: grid; gap: 24px; }
.ks-grid-2 { grid-template-columns: repeat(2, 1fr); }
.ks-grid-3 { grid-template-columns: repeat(3, 1fr); }
.ks-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .ks-grid-4 { grid-template-columns: repeat(2, 1fr); } .ks-grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .ks-grid-2, .ks-grid-3, .ks-grid-4 { grid-template-columns: 1fr; } }
.ks-flow > * + * { margin-top: var(--sp-5); }
.ks-cluster { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.ks-art-shadow { filter: drop-shadow(0 40px 60px rgba(8,20,40,.35)); }
.ks-ink .ks-art-shadow { filter: drop-shadow(0 40px 60px rgba(8,20,40,.55)); }
body:has(:is(#lp-root, #art-root, #cs-root, #of-root):empty) > .ks-foot,
body:has(:is(#lp-root, #art-root, #cs-root, #of-root):empty) .ks-foot-lift ~ .ks-foot { visibility: hidden; }
/* flow.css */
@keyframes ifFlow { from { background-position: -40% 0; } to { background-position: 140% 0; } }
@keyframes knUp { from { transform: translate3d(0,0,0); } to { transform: translate3d(0,-50%,0); } }
@keyframes knDown { from { transform: translate3d(0,-50%,0); } to { transform: translate3d(0,0,0); } }
@keyframes knLeft { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@keyframes knRight { from { transform: translate3d(-50%,0,0); } to { transform: translate3d(0,0,0); } }
.ks-section + .ks-section::before, .ks-section + .ks-section-sm::before, .ks-section-sm + .ks-section::before, .ks-section + .ks-section::after, .ks-section + .ks-section-sm::after, .ks-section-sm + .ks-section::after { content: none !important; display: none !important; }
.kn-host { position: relative; isolation: isolate; }
.kn-field { position: absolute; inset: -14% -6%; z-index: 0; display: flex; gap: clamp(10px, 1.1vw, 16px); justify-content: center; pointer-events: none; transform: rotate(-5deg) scale(1.06); transform-origin: 50% 50%; }
.kn-col { flex: 1 1 0; min-width: 0; max-width: 300px; overflow: hidden; contain: paint; }
.kn-track { display: flex; flex-direction: column; gap: clamp(10px, 1.1vw, 16px); will-change: transform; animation: knUp var(--kn-dur, 56s) linear infinite; }
.kn-col:nth-child(even) .kn-track { animation-name: knDown; }
.kn-tile { position: relative; flex: none; border-radius: var(--r-lg); overflow: hidden; background: var(--kn-bg, linear-gradient(135deg, #E0E7FF, #F5F3FF)); contain: paint; }
.kn-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.kn-tile--photo { aspect-ratio: 4 / 3; } .kn-tile--tall { aspect-ratio: 3 / 4; } .kn-tile--ui { aspect-ratio: 4 / 3; background: #fff; border: 1px solid var(--border); }
.kn-tile--ui .bar { display: flex; gap: 5px; padding: 9px 11px; border-bottom: 1px solid var(--slate-150); } .kn-tile--ui .bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--slate-200); }
.kn-tile--ui .body { padding: 10px 11px; display: grid; gap: 7px; } .kn-tile--ui .ln { height: 7px; border-radius: 4px; background: var(--slate-150); } .kn-tile--ui .ln.w1 { width: 62%; } .kn-tile--ui .ln.w2 { width: 84%; } .kn-tile--ui .ln.hi { background: var(--ks-grad); width: 42%; }
.kn-tile--ui .chart { display: flex; align-items: flex-end; gap: 4px; height: 38%; padding: 0 11px 11px; position: absolute; left: 0; right: 0; bottom: 0; } .kn-tile--ui .chart i { flex: 1; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, #0A84FF, #0033EE); opacity: .85; } .kn-tile--ui .chart i:nth-child(3n) { background: linear-gradient(180deg, #FF9A76, #F0754C); }
.kn-tile--ui .tag { display: none !important; }
.kn-tile--word { aspect-ratio: 4 / 3; background: var(--kn-bg, var(--ks-grad)); }
.kn-tile--word small, .kn-tile--word b { display: none !important; } .kn-tile--word b { display: block; margin-top: 4px; font-family: var(--font-display); font-weight: 600; font-size: clamp(13px, 1.1vw, 17px); letter-spacing: -.02em; line-height: 1.15; }
.kn-veil { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.kn-hero { position: relative; overflow: hidden; background: #fff !important; background-image: none !important; isolation: isolate; }
.kn-hero > .ks-container-wide, .kn-hero > .ks-container, .kn-hero > .row, .kn-hero > .container { position: relative; z-index: 2; }
.kn-hero .kn-veil { background: linear-gradient(90deg, #fff 0%, #fff 26%, rgba(255,255,255,.9) 42%, rgba(255,255,255,.52) 62%, rgba(255,255,255,.46) 100%), linear-gradient(180deg, #fff 0%, rgba(255,255,255,0) 16%, rgba(255,255,255,0) 70%, #fff 100%), radial-gradient(60% 70% at 84% 30%, rgba(124,58,237,.12), transparent 70%), radial-gradient(40% 50% at 58% 100%, rgba(255,154,118,.14), transparent 70%); }
@media (max-width: 991px) { .kn-hero .kn-veil { background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,.94) 48%, rgba(255,255,255,.62) 78%, rgba(255,255,255,.5) 100%), linear-gradient(180deg, #fff 0%, rgba(255,255,255,0) 14%, rgba(255,255,255,0) 84%, #fff 100%); } .kn-field { transform: rotate(-4deg) scale(1.1); } }
.kn-hero h1, .kn-hero .ks-display, .kn-hero .ks-h1, .kn-hero h2, .kn-hero .ks-h2 { color: var(--ink) !important; } .kn-hero .ks-lead, .kn-hero .ks-body, .kn-hero p { color: var(--fg2); }
.kn-marquee { position: relative; z-index: 2; margin-top: clamp(40px, 5vw, 72px); padding: 22px 0 24px; border-top: 1px solid var(--rule); background: rgba(255,255,255,.82); }
.kn-marquee-viewport { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.kn-marquee-label { position: absolute; left: var(--gutter); top: -9px; padding: 0 8px; background: #fff; font-family: var(--font-sans); font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--slate-400); }
.kn-marquee-track { display: flex; align-items: center; gap: clamp(40px, 5vw, 84px); width: max-content; animation: knLeft 90s linear infinite; will-change: transform; }
.kn-marquee:hover .kn-marquee-track { animation-play-state: paused; }
.kn-logo { display: inline-flex; align-items: center; gap: 11px; white-space: nowrap; color: var(--slate-600); opacity: .9; filter: saturate(.35); transition: filter var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out), color var(--dur) var(--ease-out); }
.kn-logo:hover { color: var(--ink); opacity: 1; filter: none; }
.kn-logo svg { width: 28px; height: 28px; flex: none; }
.kn-logo .m1 { fill: #0A5BF0; } .kn-logo .m2 { fill: #7C3AED; } .kn-logo .m3 { fill: #FF9A76; } .kn-logo .s1 { stroke: #0A5BF0; } .kn-logo .s3 { stroke: #FF9A76; }
.kn-logo span { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -.028em; line-height: 1; }
.kn-logo--serif span { font-family: Georgia, "Times New Roman", serif; font-weight: 700; letter-spacing: -.005em; font-size: 18px; }
.kn-logo--caps span { font-weight: 800; font-size: 13px; letter-spacing: 0; text-transform: none; }
.kn-logo--light span { font-weight: 500; font-size: 18px; letter-spacing: -.02em; }
.kn-logo--mono span { font-family: var(--font-sans); font-weight: 500; font-size: 14.5px; letter-spacing: 0; }
.kn-logo--tile svg { width: 30px; height: 30px; }
.kn-hero--horizon .kn-field { inset: auto -4% -6% -4%; height: 46%; flex-direction: column; transform: rotate(-2.5deg); gap: 12px; justify-content: flex-end; }
.kn-hero--horizon .kn-col { max-width: none; flex: none; height: 50%; }
.kn-hero--horizon .kn-track { flex-direction: row; height: 100%; width: max-content; animation-name: knRight; }
.kn-hero--horizon .kn-col:nth-child(even) .kn-track { animation-name: knLeft; }
.kn-hero--horizon .kn-tile { height: 100%; width: auto; aspect-ratio: 16 / 10; }
.kn-hero--horizon .kn-veil { background: linear-gradient(180deg, #fff 0%, #fff 34%, rgba(255,255,255,.8) 56%, rgba(255,255,255,.45) 78%, #fff 100%), linear-gradient(90deg, rgba(255,255,255,.9), rgba(255,255,255,0) 40%), radial-gradient(50% 60% at 82% 0%, rgba(10,91,240,.12), transparent 70%); }
.kn-hero--beam .kn-veil { background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,.6) 55%, rgba(255,255,255,.3) 100%), linear-gradient(180deg, rgba(255,255,255,0) 70%, #fff 100%); }
.kn-hero--beam .kn-beam i { width: 26%; filter: blur(34px); animation-duration: 22s; }
.kn-hero--beam .kn-current i { opacity: .8; }
.kn-hero--column .kn-field { inset: -10% -2% -10% auto; width: clamp(200px, 22vw, 320px); transform: rotate(0); justify-content: flex-end; }
.kn-hero--column .kn-col { max-width: none; }
.kn-hero--column .kn-veil { background: linear-gradient(90deg, #fff 0%, #fff 62%, rgba(255,255,255,.7) 76%, rgba(255,255,255,.45) 100%), linear-gradient(180deg, #fff 0%, rgba(255,255,255,0) 18%, rgba(255,255,255,0) 82%, #fff 100%); }
@media (max-width: 991px) { .kn-hero--column .kn-field { width: 44vw; } .kn-hero--column .kn-veil { background: linear-gradient(90deg, #fff 0%, #fff 40%, rgba(255,255,255,.75) 62%, rgba(255,255,255,.5) 100%), linear-gradient(180deg, #fff 0%, rgba(255,255,255,0) 18%, rgba(255,255,255,0) 82%, #fff 100%); } }
.kn-hero--wash .kn-current i { opacity: .9; filter: blur(90px); }
.kn-hero--wash .kn-veil { background: linear-gradient(180deg, rgba(255,255,255,0) 60%, #fff 100%); }
.kn-hero .crumb, .kn-hero .crumb a, .kn-hero .crumb span, .kn-hero .ks-crumb, .kn-hero .ks-crumb a { color: var(--fg2) !important; } .kn-hero .crumb .cur, .kn-hero .crumb a:hover, .kn-hero .ks-crumb .cur { color: var(--ink) !important; }
.kn-hero .ks-wedge, .kn-hero .ks-wedge--ondark, .kn-hero .ks-eyebrow { color: var(--violet) !important; }
.kn-hero .ks-btn--ondark, .kn-hero .ks-btn--secondary, .kn-hero .ks-btn--ghost { background: #fff !important; border-color: var(--border-strong) !important; color: var(--ink) !important; box-shadow: none !important; }
.kn-hero .ks-btn--ondark:hover, .kn-hero .ks-btn--secondary:hover, .kn-hero .ks-btn--ghost:hover { border-color: var(--ink) !important; color: var(--ink) !important; }
.kn-hero .ks-mono, .kn-hero small, .kn-hero .ks-sm { color: var(--fg3) !important; }
.kn-hero .ks-list li, .kn-hero .ks-list li span, .kn-hero li { color: var(--fg2) !important; }
.kn-hero .ks-icon-tile { background: var(--ks-blue-50) !important; border-color: var(--ks-blue-100) !important; color: var(--ks-blue) !important; }
.ks-ink { position: relative; overflow: hidden; color: var(--fg1) !important; background: #F6F6FE !important; background-image: none !important; isolation: isolate; }
@keyframes knDriftA { 0% { transform: translate3d(-6%, -4%, 0) scale(1); } 50% { transform: translate3d(8%, 6%, 0) scale(1.08); } 100% { transform: translate3d(-6%, -4%, 0) scale(1); } }
@keyframes knDriftB { 0% { transform: translate3d(6%, 8%, 0) scale(1.05); } 50% { transform: translate3d(-8%, -6%, 0) scale(.95); } 100% { transform: translate3d(6%, 8%, 0) scale(1.05); } }
@keyframes knDriftC { 0% { transform: translate3d(0, 10%, 0); } 50% { transform: translate3d(-4%, -8%, 0); } 100% { transform: translate3d(0, 10%, 0); } }
.kn-current { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.kn-current i { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .55; will-change: transform; }
.kn-current i:nth-child(1) { width: 62vw; height: 42vw; left: -10%; top: -30%; background: radial-gradient(ellipse at center, rgba(10,91,240,.22), rgba(10,91,240,0) 70%); animation: knDriftA 26s ease-in-out infinite; }
.kn-current i:nth-child(2) { width: 46vw; height: 46vw; right: -12%; top: 0; background: radial-gradient(circle, rgba(124,58,237,.16), rgba(124,58,237,0) 70%); animation: knDriftB 32s ease-in-out infinite; }
.kn-current i:nth-child(3) { width: 40vw; height: 34vw; left: 30%; bottom: -36%; background: radial-gradient(ellipse, rgba(255,154,118,.2), rgba(255,154,118,0) 70%); animation: knDriftC 28s ease-in-out infinite; }
.ks-ink .kn-veil { background: linear-gradient(180deg, #F6F6FE 0%, rgba(246,246,254,0) 22%, rgba(246,246,254,0) 78%, #F6F6FE 100%); }
.ks-ink > .ks-container-wide, .ks-ink > .ks-container { position: relative; z-index: 2; }
.ks-ink h1, .ks-ink .ks-h1, .ks-ink .ks-h2, .ks-ink .ks-h3, .ks-ink .ks-display, .ks-ink h2, .ks-ink h3, .ks-ink h4, .ks-ink b, .ks-ink .ks-stat-num { color: var(--ink) !important; } .ks-ink .ks-lead, .ks-ink .ks-body, .ks-ink p, .ks-ink .ks-sm, .ks-ink li, .ks-ink span { color: var(--fg2) !important; }
.ks-ink .ks-wedge, .ks-wedge--ondark { color: var(--violet) !important; } .ks-ink .ks-mono { color: var(--slate-400) !important; }
.ks-ink .ks-card, .ks-card--ink { background: rgba(255,255,255,.92) !important; border-color: var(--border) !important; color: var(--fg1) !important; } .ks-ink .ks-card:hover, .ks-card--ink:hover { border-color: var(--ks-blue-200) !important; box-shadow: var(--sh-md) !important; }
.ks-ink .ks-card p, .ks-card--ink p { color: var(--fg2) !important; } .ks-ink .ks-card b, .ks-ink .ks-card h3, .ks-card--ink b, .ks-card--ink h3 { color: var(--ink) !important; }
.ks-ink .ks-icon-tile { background: #fff !important; border-color: var(--ks-blue-100) !important; color: var(--ks-blue) !important; }
.ks-ink .ks-btn--secondary, .ks-ink .ks-btn--ghost, .ks-ink .ks-btn--ondark { background: #fff !important; border-color: var(--border-strong) !important; color: var(--ink) !important; } .ks-ink .ks-btn--secondary:hover, .ks-ink .ks-btn--ghost:hover, .ks-ink .ks-btn--ondark:hover { border-color: var(--ink) !important; color: var(--ink) !important; }
.ks-ink .ks-list li::before { background: var(--violet) !important; } .ks-ink .ks-grad-text { background: var(--flow-grad) !important; background-size: 200% 100% !important; }
@keyframes knBeam { 0% { transform: translateX(-30%) skewX(-18deg); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateX(130%) skewX(-18deg); opacity: 0; } }
.ks-ink.cta, .kn-cta { background: #fff !important; }
.ks-ink.cta .kn-veil, .kn-cta .kn-veil { background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,0) 20%, rgba(255,255,255,0) 80%, #fff 100%); }
.kn-beam { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.kn-beam i { position: absolute; top: -20%; bottom: -20%; width: 22%; left: 0; background: linear-gradient(90deg, rgba(10,91,240,0), rgba(10,91,240,.16) 30%, rgba(124,58,237,.18) 50%, rgba(255,154,118,.16) 70%, rgba(255,154,118,0)); filter: blur(28px); animation: knBeam 16s var(--ease-in-out) infinite; }
.kn-beam i:nth-child(2) { width: 10%; animation-duration: 21s; animation-delay: -9s; opacity: .7; }
.ks-ink.cta .kn-current i, .kn-cta .kn-current i { opacity: .8; }
.ks-ink.cta .ks-btn--ondark, .kn-cta .ks-btn--ondark { background: var(--ks-grad) !important; background-size: 160% 100% !important; border-color: transparent !important; color: #fff !important; transition: background-position .6s var(--ease-out), transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out) !important; }
.ks-ink.cta .ks-btn--ondark:hover, .kn-cta .ks-btn--ondark:hover { background-position: 100% 0 !important; box-shadow: 0 14px 30px -14px rgba(10,91,240,.55) !important; transform: translateY(-1px); color: #fff !important; }
.ks-ashlar, .ks-ashlar::before, .ks-ashlar::after { background-image: none !important; } .ks-glow, .kc-art, .hero-bg-cube, .ks-prism, .ks-refract, .ks-beam, .if-hero-bg, .if-ink-photo, .rs-lines { display: none !important; }
.kn-band { position: relative; height: 150px; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.kn-band::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, var(--bg-subtle), rgba(247,247,253,.35) 40%, rgba(247,247,253,.35) 60%, var(--bg-subtle)); }
.kn-row { display: flex; gap: 12px; width: max-content; animation: knLeft 70s linear infinite; padding: 0 0 12px; } .kn-row:nth-child(2) { animation-name: knRight; animation-duration: 84s; }
.kn-row .kn-tile { width: 128px; aspect-ratio: 16 / 10; border-radius: var(--r-md); box-shadow: none; } .kn-row .kn-tile--word b { font-size: 11px; } .kn-row .kn-tile--word small { font-size: 7.5px; }
@media (max-width: 760px) { .kn-band { height: 118px; } .kn-row .kn-tile { width: 104px; } }
@media (prefers-reduced-motion: reduce) { .kn-track, .kn-marquee-track, .kn-row, .kn-field { animation: none !important; } }
.ks-display, .ks-h1, .ks-h2, .ks-h3, .ks-h4, h1, h2, h3, h4, .lp-hero h1, .lp-sec h2, .ar-hero h1, .ar-body h2, .ar-body h3 { font-family: var(--font-display) !important; }
.ks-display { font-weight: 600 !important; letter-spacing: var(--tracking-display) !important; line-height: var(--lh-tight) !important; }
.ks-h1, .ks-h2 { font-weight: 600 !important; letter-spacing: var(--tracking-head) !important; } .ks-h3, .ks-h4 { font-weight: 600 !important; letter-spacing: -.018em !important; }
body, p, li, input, button, select, textarea, .ks-body, .ks-lead, .ks-sm { font-family: var(--font-sans); }
@keyframes rsPulse { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.35); opacity: .35; } }
@keyframes rsLight { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
@keyframes rsSheen { from { transform: translateX(-130%) skewX(-18deg); } to { transform: translateX(230%) skewX(-18deg); } }
.ks-wedge, .ks-eyebrow, .lp-eyebrow { display: inline-flex !important; align-items: center; gap: 0; background: none !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; clip-path: none !important; font-family: var(--font-sans) !important; font-weight: 600 !important; font-size: 13px !important; letter-spacing: .02em !important; text-transform: none !important; color: var(--ks-blue) !important; line-height: 1.3; }
.ks-wedge::before, .ks-eyebrow::before, .ks-wedge::after, .ks-eyebrow::after { content: none !important; display: none !important; }
.ks-wedge--gold { color: var(--gold-deep) !important; } .ks-wedge--ondark, .ks-ink .ks-wedge { color: var(--violet) !important; }
.ks-nav, .ks-nav.ks-nav--ink, .ks-nav.is-scrolled, .ks-nav.is-scrolled.ks-nav--ink { background: rgba(255,255,255,.86) !important; border-bottom: 1px solid transparent !important; box-shadow: none !important; backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); transition: border-color var(--dur) var(--ease-out); }
.ks-nav.is-scrolled { border-bottom-color: var(--rule) !important; }
.ks-nav-inner { min-height: 72px; }
.ks-nav-logo { display: flex; align-items: center; } .ks-nav-logo::before, .ks-nav-logo::after { content: none !important; display: none !important; }
.ks-nav-logo-img { display: block !important; height: 30px; width: auto; filter: none !important; }
.ks-nav-link, .ks-nav--ink .ks-nav-link { color: var(--slate-700) !important; font-weight: 500; font-size: 14.5px; position: relative; padding: 8px 10px; border-radius: var(--r-sm); transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out); }
.ks-nav-link:hover, .ks-nav-link.is-active { color: var(--ink) !important; background: var(--slate-100); }
.ks-nav-link.is-active::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--flow-grad); }
.ks-burger, .ks-nav--ink .ks-burger { color: var(--ink) !important; border-color: var(--border) !important; background: transparent !important; }
.ks-mega, .ks-mega-panel { background: rgba(255,255,255,.97) !important; border: 1px solid var(--border) !important; border-radius: var(--r-lg) !important; box-shadow: var(--sh-lg) !important; }
.ks-mega-item, .ks-mega-link { color: var(--slate-700) !important; border-radius: var(--r-sm) !important; transition: background var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
.ks-mega-item:hover, .ks-mega-link:hover { background: var(--ks-blue-50) !important; color: var(--ink) !important; transform: translateX(3px); }
.ks-mega-item h5, .ks-mega-title { color: var(--ink) !important; } .ks-mega-label { font-family: var(--font-sans) !important; letter-spacing: 0; color: var(--slate-400) !important; font-size: 13px !important; }
.if-nav-flow { display: none !important; }
.ks-mobile { background: #fff !important; } .ks-mobile-head { border-bottom: 1px solid var(--rule); }
.ks-mobile-head .ks-logo { position: relative; display: block; width: 136px; height: 26px; overflow: hidden; } .ks-mobile-head .ks-logo-mark, .ks-mobile-head .ks-logo-word { display: none !important; }
.ks-mobile-head .ks-logo::after { content: ""; position: absolute; inset: 0; background: url("../logos/keystone-logo-onlight.webp") left center / auto 26px no-repeat; filter: none; }
.ks-mobile-close { color: var(--ink) !important; background: transparent !important; }
.ks-mobile-label, .ks-mobile-group > span { color: var(--slate-400) !important; font-family: var(--font-sans) !important; font-size: 13px !important; letter-spacing: 0; text-transform: none; }
.ks-mobile-link { color: var(--ink) !important; font-weight: 500; } .ks-mobile-link.is-active, .ks-mobile-link:hover { color: var(--ks-blue) !important; }
.ks-mobile .ks-btn--gold, .ks-mobile .ks-btn--primary, .ks-mobile [data-ks-book] { background: var(--ks-grad) !important; border-color: transparent !important; color: #fff !important; }
.ks-btn { position: relative; overflow: hidden; border-radius: var(--r-pill) !important; font-weight: 600 !important; letter-spacing: -.005em; border-width: 1px !important; box-shadow: none !important; transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out) !important; }
.ks-btn svg { transition: none; }
.ks-btn::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 34%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); transform: translateX(-130%) skewX(-18deg); pointer-events: none; }
.ks-btn:hover::after { animation: rsSheen .9s var(--ease-flow) forwards; }
.ks-btn--primary { background: var(--ks-grad) !important; background-size: 160% 100% !important; border-color: transparent !important; color: #fff !important; transition: background-position .6s var(--ease-out), transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out) !important; } .ks-btn--primary:hover { background-position: 100% 0 !important; box-shadow: 0 14px 30px -14px rgba(10,91,240,.55) !important; transform: translateY(-1px); }
.ks-btn--secondary, .ks-btn--ghost { background: #fff !important; border-color: var(--border-strong) !important; color: var(--ink) !important; } .ks-btn--secondary:hover, .ks-btn--ghost:hover { border-color: var(--ink) !important; color: var(--ink) !important; background: #fff !important; }
.ks-btn--gold { background: var(--gold) !important; border-color: var(--gold) !important; color: var(--ink) !important; } .ks-btn--gold:hover { background: var(--gold-600) !important; border-color: var(--gold-600) !important; }
.ks-btn--ondark { background: #fff !important; border-color: #fff !important; color: var(--ink) !important; } .ks-btn--ondark:hover { background: var(--ks-blue-50) !important; }
.ks-card, .ks-slot, .lp-card, .lp-tile, .ar-card, .ew-card, .ct-channel, .if-card { position: relative; overflow: hidden; background: #fff !important; --kn-x: 0; border: 1px solid var(--border) !important; border-radius: var(--r-xl) !important; clip-path: none !important; box-shadow: none !important; transition: border-color var(--dur) var(--ease-out), transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out); }
.ks-card::after, .ks-slot::after, .lp-card::after, .lp-tile::after, .ar-card::after, .if-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity var(--dur-slow) var(--ease-out); z-index: 0; background: radial-gradient(240px 240px at var(--mx, 50%) var(--my, 0%), rgba(10,132,255,.12), transparent 70%); }
.ks-card:hover::after, .ks-slot:hover::after, .lp-card:hover::after, .lp-tile:hover::after, .ar-card:hover::after, .if-card:hover::after { opacity: 1; }
.ks-card:hover, .ks-slot:hover, .lp-card:hover, .lp-tile:hover, .ar-card:hover, .if-card:hover { border-color: var(--ks-blue-200) !important; transform: translateY(-3px); box-shadow: var(--sh-md) !important; }
.ks-card > *, .if-card > * { position: relative; z-index: 1; }
.ks-card--faceted, .ks-card--pad-lg { clip-path: none !important; }
.ks-icon-tile { background: var(--ks-blue-50) !important; color: var(--ks-blue) !important; border: 1px solid var(--ks-blue-100) !important; border-radius: var(--r-md) !important; box-shadow: none !important; clip-path: none !important; }
.ks-icon-tile--gold { color: var(--gold-deep) !important; border-color: var(--gold-300) !important; }
.ks-stat-num { font-family: var(--font-display) !important; font-weight: 600 !important; letter-spacing: -.03em; color: var(--ink) !important; } .ks-stat-num--gold { color: var(--gold-deep) !important; }
.ks-list li::before { background: var(--ks-blue) !important; background-image: none !important; width: 14px !important; height: 2px !important; border-radius: 0 !important; clip-path: none !important; margin-top: .72em; } .ks-list--gold li::before { background: var(--gold) !important; }
.ks-media, .ks-media--tall, .ks-media-frame, .ks-media-frame > figure, .lp-media, .ar-media, .if-photo, .if-window { clip-path: none !important; border-radius: var(--r-xl) !important; overflow: hidden; border: 1px solid var(--border) !important; box-shadow: none !important; filter: none !important; position: relative; background: var(--slate-100); }
.ks-media::before, .ks-media::after, .ks-media--tall::before, .ks-media--tall::after, .ks-media-frame::before, .ks-media-frame::after, .lp-media::before, .lp-media::after { content: none !important; display: none !important; }
.ks-media img, .lp-media img, .ar-media img, .if-photo img { filter: none !important; display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.ks-media:hover img, .lp-media:hover img, .if-photo:hover img { transform: scale(1.03); }
.if-photo > [data-depth], .if-window > .win-scene { position: absolute; inset: -14% 0; } .if-photo > [data-depth] img, .if-window > .win-scene img { position: absolute; inset: 0; height: 100%; }
.if-photo .cap, .if-window .cap { display: none !important; }
.ks-media-cap, .ks-media figcaption, figure figcaption.ks-media-cap { display: none !important; }
.ks-media::after, .ks-media-wrap::after { content: none !important; }
.if-photo .cap::before, .if-window .cap::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.ks-grad-text { background: linear-gradient(90deg, #0033EE 0%, #0A84FF 38%, #7C3AED 72%, #FF9A76 100%) !important; background-size: 200% 100% !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent; color: transparent; animation: rsLight 7s linear infinite; }
.ks-bg-subtle { background: var(--bg-subtle) !important; } .ks-divider, .ks-rule { background: var(--rule) !important; height: 1px !important; border: 0 !important; }
.ks-chip, .sol-spine a, .lp-chip { border-radius: var(--r-sm) !important; background: #fff !important; border: 1px solid var(--border) !important; color: var(--slate-700) !important; font-family: var(--font-sans) !important; font-size: 12px !important; letter-spacing: 0; transition: all var(--dur) var(--ease-out); }
.ks-chip:hover, .sol-spine a:hover, .lp-chip:hover { border-color: var(--ink) !important; color: var(--ink) !important; }
.viz, .lp-stage, .ew-client, .browser { background: #fff !important; border: 1px solid var(--border) !important; border-radius: var(--r-xl) !important; box-shadow: var(--sh-md) !important; clip-path: none !important; }
.ks-section, .ks-section-sm { position: relative; }
.ks-foot { position: relative; z-index: 0; background: #071033 !important; color: rgba(236,241,255,.72) !important; border-top: 0 !important; overflow: hidden; margin: 0 10px 10px; border-radius: 10px; }
.ks-foot.is-pinned { margin-bottom: 0; }
.ks-foot::before { content: none !important; display: none !important; }
.ks-foot::after { content: none !important; display: none !important; }
.ks-foot-inner { position: relative; z-index: 1; }
.ks-foot > .ks-glow, .ks-foot .ks-foot-cube, .ks-foot .kc-art { display: none !important; }
body > *:not(.ks-foot):not(.ks-nav):not(.ksa):not(.ksa-scrim):not(.ksa-launcher):not(script):not(style):not(.ks-mobile):not(.ew-sticky):not(.ew-sticky-m) { position: relative; z-index: 1; }
.ks-foot.is-pinned { position: sticky; bottom: 0; }
.ks-foot-lift { position: relative; z-index: 1; background: #fff; box-shadow: 0 30px 60px -20px rgba(7,16,51,.35); }
.ks-foot-lift::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--rule); }
.ks-foot-cta { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; padding: clamp(40px, 5vw, 60px) 0 clamp(28px, 3.5vw, 40px); border-bottom: 1px solid rgba(255,255,255,.1); }
.ks-foot-eyebrow { display: inline-flex; align-items: center; font-family: var(--font-sans); font-weight: 600; font-size: 13px; letter-spacing: .02em; color: var(--ks-blue-300); }
.ks-foot-eyebrow::before { content: none; }
.ks-foot-title { margin: 12px 0 0; max-width: 16ch; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.8rem, 1.2rem + 2vw, 2.9rem); line-height: 1.02; letter-spacing: -.034em; color: #fff !important; text-wrap: balance; }
.ks-foot-cta-actions { display: flex; flex-wrap: wrap; gap: 10px; flex: none; }
.ks-foot .ks-btn--primary { background: #fff !important; border-color: #fff !important; color: var(--ink) !important; box-shadow: none !important; } .ks-foot .ks-btn--primary:hover { background: var(--ks-blue-50) !important; }
.ks-foot .ks-btn--secondary { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.22) !important; color: #fff !important; } .ks-foot .ks-btn--secondary:hover { background: rgba(255,255,255,.12) !important; border-color: rgba(255,255,255,.5) !important; }
.ks-foot-grid { display: grid; grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3.5vw, 56px); padding: clamp(28px, 3.5vw, 44px) 0; }
.ks-foot-brand p { margin: 14px 0 18px; max-width: 34ch; font-size: 14px; line-height: 1.55; color: rgba(236,241,255,.68) !important; }
.ks-foot-logo img, .ks-foot img[src*="keystone-logo"] { display: block; height: 34px !important; width: auto !important; filter: none !important; }
.ks-foot-social { display: flex; gap: 8px; }
.ks-foot-social a { width: 38px; height: 38px; display: grid; place-items: center; border-radius: var(--r-md); border: 1px solid rgba(255,255,255,.14); color: rgba(236,241,255,.8) !important; background: rgba(255,255,255,.04); transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.ks-foot-social a:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.35); color: #fff !important; } .ks-foot-social svg { width: 17px; height: 17px; }
.ks-foot h5 { margin: 0 0 12px !important; font-family: var(--font-sans) !important; font-size: 13px !important; letter-spacing: 0; !important; text-transform: none; color: rgba(236,241,255,.55) !important; } .ks-foot h5::before { content: none !important; }
.ks-foot-links { display: grid; gap: 8px; }
.ks-foot-links a { position: relative; width: fit-content; font-size: 14px; line-height: 1.3; color: rgba(236,241,255,.82) !important; transition: color var(--dur-fast) var(--ease-out); }
.ks-foot-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--flow-grad); transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease-out); }
.ks-foot-links a:hover { color: #fff !important; } .ks-foot-links a:hover::after { transform: scaleX(1); }
.ks-foot-offices { display: block !important; grid-template-columns: none !important; gap: 0 !important; padding: 0 !important; border-top: 1px solid rgba(255,255,255,.1) !important; border-bottom: 1px solid rgba(255,255,255,.1); }
.ks-foot-office { display: grid; grid-template-columns: 220px minmax(0, 1fr) auto; gap: 24px; align-items: baseline; padding: 14px 0; }
.ks-foot-office + .ks-foot-office { border-top: 1px solid rgba(255,255,255,.08); }
.ks-foot-office-k { font-family: var(--font-sans); font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--ks-blue-300); }
.ks-foot-office-v b { display: block; font-weight: 600; font-size: 15px; color: #fff; letter-spacing: -.01em; }
.ks-foot-office-v span { display: block; margin-top: 3px; font-size: 14px; color: rgba(236,241,255,.62); }
.ks-foot-office-a { font-family: var(--font-sans); font-size: 12.5px; color: rgba(236,241,255,.78) !important; white-space: nowrap; } .ks-foot-office-a:hover { color: #fff !important; }
.ks-foot-res { border-bottom: 1px solid rgba(255,255,255,.1); }
.ks-foot-res summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 14px 0; cursor: pointer; font-family: var(--font-sans); font-size: 13px; letter-spacing: 0; text-transform: none; color: rgba(236,241,255,.7); }
.ks-foot-res summary::-webkit-details-marker { display: none; } .ks-foot-res summary small { font: inherit; color: rgba(236,241,255,.4); letter-spacing: 0; } .ks-foot-res summary svg { width: 16px; height: 16px; margin-left: auto; transition: transform var(--dur) var(--ease-out); } .ks-foot-res[open] summary svg { transform: rotate(180deg); }
.ks-foot-res summary:hover { color: #fff; }
.ks-foot-res-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 28px; padding: 6px 0 30px; }
.ks-foot-res-links a { font-size: 13.5px; color: rgba(236,241,255,.62) !important; } .ks-foot-res-links a:hover { color: #fff !important; }
.ks-foot-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px 0 20px; border-top: 0 !important; font-size: 13px; color: rgba(236,241,255,.5) !important; }
.ks-foot-legal { display: flex; gap: 18px; } .ks-foot-legal a { color: rgba(236,241,255,.62) !important; font-size: 13px; } .ks-foot-legal a:hover { color: #fff !important; } .ks-foot-legal-sep { display: none; }
.ks-foot-tag { font-family: var(--font-sans); font-size: 13px; letter-spacing: 0; text-transform: none; color: rgba(236,241,255,.4); }
@media (max-width: 991px){ .ks-foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ks-foot-brand { grid-column: 1 / -1; } .ks-foot-res-links { grid-template-columns: 1fr 1fr; } .ks-foot-office { grid-template-columns: 1fr; gap: 8px; } }
@media (max-width: 720px){ .ks-foot { position: relative; } .ks-foot-cta { flex-direction: column; align-items: flex-start; } .ks-foot-title { max-width: none; } .ks-foot-grid { grid-template-columns: 1fr; gap: 28px; } .ks-foot-res-links { grid-template-columns: 1fr; } .ks-foot-bottom { flex-direction: column; align-items: flex-start; gap: 10px; } }
@media (prefers-reduced-motion: reduce){ .ks-foot { position: relative; } }
.ksa-launcher, .ksa-launcher:hover { left: auto !important; right: 22px !important; transform: none !important; background: #fff !important; background-image: none !important; color: var(--ink) !important; border: 1px solid var(--border) !important; border-radius: var(--r-pill) !important; box-shadow: var(--sh-lg) !important; }
.ksa-launcher:hover { transform: translateY(-2px) !important; } .ksa-launcher::before, .ksa-launcher::after { content: none !important; display: none !important; }
.ksa-launcher-hint { color: var(--fg3) !important; border-left-color: var(--border) !important; }
.ksa-tile { background: var(--ks-grad) !important; background-size: 100% 100% !important; border-radius: var(--r-sm) !important; } .ksa-tile::after { display: none !important; } .ksa-tile .ksa-glyph svg { color: #fff !important; stroke: #fff !important; }
[data-depth] { will-change: transform; }
[data-tilt] { transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ease-out); transform-style: preserve-3d; } [data-tilt].is-tilt { transition: transform .12s linear; }
.ks-section > .ks-container-wide, .ks-section > .ks-container, .ks-section-sm > .ks-container-wide { transform: translate3d(0, calc((.5 - var(--vp, .5)) * -30px), 0); will-change: transform; }
.if-scene { position: relative; } .if-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.if-r { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); } .if-r.is-in { opacity: 1; transform: none; } .ks-reveal { transition-duration: .6s !important; } 
.if-veil { position: fixed; inset: 0; z-index: 4000; background: #fff; pointer-events: none; opacity: 0; transition: opacity .32s var(--ease-out); }
.if-veil .if-veil-line { position: absolute; left: 50%; top: 50%; width: 120px; height: 2px; border-radius: 2px; transform: translate(-50%, -50%); background: linear-gradient(90deg, transparent, #0A5BF0 30%, #7C3AED 55%, #FF9A76 80%, transparent); background-size: 200% 100%; opacity: 0; }
.if-veil.is-on { opacity: 1; pointer-events: auto; }
.if-veil.is-on .if-veil-line { opacity: 1; animation: ifVeilLine 1.1s var(--ease-in-out) infinite; }
.if-veil.is-out { opacity: 0; transition: opacity .42s var(--ease-out); }
@keyframes ifVeilLine { 0% { background-position: 100% 0; transform: translate(-50%, -50%) scaleX(.6); } 50% { transform: translate(-50%, -50%) scaleX(1); } 100% { background-position: -100% 0; transform: translate(-50%, -50%) scaleX(.6); } }
@media (prefers-reduced-motion: reduce) { .if-veil { display: none !important; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .if-r, .ks-reveal { opacity: 1 !important; transform: none !important; } }
.ks-mono, .ks-eyebrow, .stage-n, .viz-tt, .ks-logo-sub, .ks-mobile-group > span, .ks-mobile-label, .ks-mega-label, .ks-office-label, .ks-office-flag, .ks-foot h5, .ks-foot-seo h4, .ks-foot-seo-col h5, .kn-marquee-label, .method b, .pillar-n, .pillar-go, .ledger-n, .ledger-row .sol a, .quote small, .prow-copy dt, .hero-hint, .ks-foot-eyebrow, .ks-foot-office-k, .ks-foot-office-a, .ks-foot-res summary, .ks-foot-tag, .lp-eyebrow, .lp-label, .ar-label, .ar-meta, .ar-kicker, .lp-kicker, .sol-n, .sol-k, .ks-card b:first-child, [class*="-eyebrow"], [class*="-kicker"], [class*="-label"], [class*="-meta"], [data-chapter]::before, .ew-wiz-kicker, .ew-wiz-count, .ew-rv span, .ew-issue, .ew-sec-l, .ew-card-meta, .ew-mail-meta, .ew-list-h span, .ew-read-top .t, .ew-done-next small, .ct-how small, .ksa-row span {
  font-family: var(--font-sans) !important; letter-spacing: 0 !important; text-transform: none !important; }
.ks-card b:first-child, .method b, .stage-n, .pillar-n, .ledger-n { font-weight: 600 !important; font-size: 13px !important; }
.quote small, .prow-copy dt, .ks-foot-office-k, .ks-foot-res summary, .ks-foot-tag, .ks-foot h5, .ks-mega-label, .ks-mobile-group > span, .ks-mobile-label { font-weight: 600 !important; font-size: 13px !important; }
.ks-nav { background: rgba(255,255,255,.7) !important; border-bottom: 1px solid transparent !important; backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); transition: background .35s var(--ease-out), border-color .35s var(--ease-out), padding .35s var(--ease-out) !important; }
.ks-nav > .ks-container-wide { transition: max-width .45s var(--ease-out), padding .45s var(--ease-out), margin .45s var(--ease-out), border-radius .45s var(--ease-out), box-shadow .45s var(--ease-out), background .45s var(--ease-out); }
.ks-nav.is-scrolled { background: transparent !important; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 10px 0; }
.ks-nav.is-scrolled > .ks-container-wide { max-width: 1240px; padding-inline: 14px 12px; border-radius: 999px; background: rgba(255,255,255,.86); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); box-shadow: 0 18px 50px -24px rgba(7,16,51,.35), 0 1px 0 rgba(7,16,51,.06) inset; border: 1px solid rgba(7,16,51,.06); }
.ks-nav.is-scrolled .ks-nav-inner { min-height: 60px; }
.ks-nav-link { position: relative; transition: color .3s var(--ease-out); }
.ks-nav-link::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #0A84FF, #7C3AED); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease-out); }
.ks-nav-link:hover::after, .ks-nav-link.is-active::after { transform: scaleX(1); }
@media (max-width: 991px){ .ks-nav.is-scrolled { padding: 0; } .ks-nav.is-scrolled > .ks-container-wide { max-width: none; border-radius: 0; box-shadow: none; border: 0; padding-inline: var(--gutter); } }
.kn-hero--as { position: relative; overflow: hidden; }
.kn-hero--as > .ks-container-wide, .kn-hero--as > .ks-container { position: relative; z-index: 2; }
.kn-hero--as .row > [class*="col-"]:first-child { max-width: 58%; flex: 0 0 58%; }
.as { position: absolute; z-index: 1; right: var(--gutter); top: 50%; transform: translateY(-50%); width: min(38vw, 560px); height: min(66%, 520px); pointer-events: none; }
.as-p { position: absolute; border-radius: 10px; overflow: hidden; background: var(--slate-100); box-shadow: 0 34px 70px -30px rgba(7,16,51,.4); animation: asIn 1.1s var(--ease-out) both; }
.as-p img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.as-p1 { left: 0; top: 10%; width: 60%; height: 64%; } .as-p2 { right: 0; top: 0; width: 44%; height: 42%; animation-delay: .12s; } .as-p3 { right: 8%; bottom: 0; width: 50%; height: 40%; animation-delay: .24s; }
@keyframes asIn { from { opacity: 0; transform: translateY(28px) scale(.97); } to { opacity: 1; transform: none; } }
@media (max-width: 991px){ .as { display: none; } .kn-hero--as .row > [class*="col-"]:first-child { max-width: none; flex: 0 0 100%; } }
.kn-field, .kn-veil, .kn-current, .kn-beam, .kn-band, .ks-glow { display: none !important; }
.kn-hero:not(.dark) { background: #fff !important; }
.ks-nav, .ks-nav.is-scrolled { background: transparent !important; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 12px 0 !important; border-bottom: 0 !important; }
.ks-nav > .ks-container-wide, .ks-nav.is-scrolled > .ks-container-wide { max-width: 1240px; padding-inline: 14px 12px; border-radius: 999px; background: rgba(255,255,255,.84); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); box-shadow: 0 18px 50px -28px rgba(7,16,51,.35); border: 1px solid rgba(7,16,51,.06); transition: background .4s var(--ease-out), border-color .4s var(--ease-out), box-shadow .4s var(--ease-out); }
.ks-nav .ks-nav-inner { min-height: 60px; }
.ks-nav.nav-dark > .ks-container-wide { background: rgba(10,16,40,.55); border-color: rgba(255,255,255,.08); box-shadow: 0 18px 50px -28px rgba(0,0,0,.6); }
.ks-nav.nav-dark .ks-nav-link { color: rgba(230,238,255,.82) !important; } .ks-nav.nav-dark .ks-nav-link:hover, .ks-nav.nav-dark .ks-nav-link.is-active { color: #fff !important; }
.ks-nav.nav-dark .ks-nav-link::after { background: linear-gradient(90deg, #8DB8FF, #A78BFA); }
.ks-nav.nav-dark .ks-btn--secondary { background: transparent !important; border-color: rgba(255,255,255,.22) !important; color: #E6EEFF !important; } .ks-nav.nav-dark .ks-btn--secondary:hover { border-color: #fff !important; color: #fff !important; }
.ks-nav.nav-dark .ks-btn--primary { background: #DCEBFF !important; border-color: #DCEBFF !important; color: #071033 !important; box-shadow: none !important; } .ks-nav.nav-dark .ks-btn--primary:hover { background: #fff !important; }
.ks-nav.nav-dark .ks-burger { color: #fff !important; border-color: rgba(255,255,255,.25) !important; }
@media (max-width: 991px){ .ks-nav, .ks-nav.is-scrolled { padding: 8px 0 !important; } .ks-nav > .ks-container-wide, .ks-nav.is-scrolled > .ks-container-wide { max-width: none; width: auto; margin-inline: 10px; padding-inline: 12px; } } 
body { padding-top: 0; }
.dark.hero, .dark.hero * { --kn-guard: 1; }
.hero.dark h1, .hero.dark .ks-display { color: #E6EEFF !important; }
@media (max-height: 600px){ .mosaic { min-height: clamp(200px, 36vh, 520px) !important; } }
.ks-nav { position: fixed !important; left: 0; right: 0; top: 0; }
body { padding-top: 0 !important; }
.kn-hero { padding-top: clamp(132px, 14vw, 172px) !important; }
.ks-foot-lift > *:first-child:not(.hero):not(.kn-hero):not(section) { padding-top: 96px; }
.ks-foot-lift > main#main:first-child { padding-top: 0; }
main > section:first-child:not(.kn-hero):not(.hero), body > .ks-foot-lift > section:first-child:not(.kn-hero):not(.hero) { padding-top: 120px; }
.ks-card, .viz, .lp-stage, .ew-client, .browser, .ks-media, .if-photo, .if-window, .ks-icon-tile, .ks-mega, .lp-card, .lp-tile, .ar-card { border-radius: 10px !important; }
@media (max-width: 720px){ .ks-foot { margin: 0 6px 6px; } }
.amb, .stage-dark > .amb, .dark > .amb, .ks-foot > .amb, .hero-stage > .amb { position: absolute !important; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: hidden; }
.amb path { fill: none; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; opacity: 0; stroke-dasharray: 0 calc(var(--L) * 1px); }
.amb path.is-hot { animation: ambForm 2.2s linear 1 forwards; }
@keyframes ambForm {
  0%   { opacity: .34; stroke-dasharray: calc(var(--L) * .06px) calc(var(--L) * 1px); stroke-dashoffset: 0; }
  55%  { opacity: .36; stroke-dasharray: calc(var(--L) * .5px) calc(var(--L) * 1px);  stroke-dashoffset: calc(var(--L) * -.55px); }
  80%  { opacity: .26; stroke-dasharray: calc(var(--L) * .5px) calc(var(--L) * 1px);  stroke-dashoffset: calc(var(--L) * -.8px); }
  100% { opacity: 0;   stroke-dasharray: calc(var(--L) * .5px) calc(var(--L) * 1px);  stroke-dashoffset: calc(var(--L) * -1.05px); }
}
}
.stage-dark > .amb + *, .ks-foot > .amb ~ * { position: relative; }
@media (prefers-reduced-motion: reduce){ .amb { display: none; } }
.ks-nav, .ks-nav.is-scrolled { padding: 14px 0 !important; }
.ks-nav > .ks-container-wide, .ks-nav.is-scrolled > .ks-container-wide { max-width: var(--container-wide, 1320px); padding-inline: var(--gutter); background: transparent !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-radius: 0; }
.ks-nav .ks-nav-inner { display: flex; align-items: center; gap: 22px; height: auto; min-height: 0; }
.ks-nav-logo { flex: none; } .ks-nav-logo-img { height: 28px !important; }
.ks-nav-pill { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 58px; padding: 0 10px 0 22px; border-radius: 999px; background: rgba(255,255,255,.66); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border: 1px solid rgba(7,16,51,.06); box-shadow: 0 10px 30px -22px rgba(7,16,51,.25); transition: background .18s linear, border-color .18s linear; }
.ks-nav .ks-nav-links { display: flex; align-items: center; gap: 4px; }
.ks-nav .ks-nav-link { font-weight: 400 !important; font-size: 15.5px !important; letter-spacing: -.005em; padding: 8px 12px !important; border-radius: 999px; color: var(--ink) !important; background: transparent !important; transition: color .18s linear, background .18s linear; }
.ks-nav .ks-nav-link:hover { background: rgba(7,16,51,.05) !important; }
.ks-nav .ks-nav-link::after { content: none !important; }
.ks-nav .ks-nav-link.is-active { padding-left: 24px !important; position: relative; }
.ks-nav .ks-nav-link.is-active::before { content: ""; position: absolute; left: 12px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: currentColor; }
.ks-nav .ks-nav-cta { display: flex; align-items: center; gap: 6px; }
.ks-nav .ks-nav-cta .ks-btn--secondary { background: transparent !important; border-color: transparent !important; color: var(--ink) !important; font-weight: 400 !important; font-size: 15.5px !important; box-shadow: none !important; }
.ks-nav .ks-nav-cta .ks-btn--secondary:hover { background: rgba(7,16,51,.05) !important; }
.ks-nav .ks-nav-cta .ks-btn--primary { background: #0B1220 !important; border-color: #0B1220 !important; color: #fff !important; font-weight: 500 !important; font-size: 15px !important; padding: 10px 20px !important; border-radius: 999px !important; box-shadow: none !important; transition: background .18s linear, color .18s linear; }
.ks-nav .ks-nav-cta .ks-btn--primary:hover { background: var(--ks-blue) !important; border-color: var(--ks-blue) !important; }
.ks-nav.nav-dark .ks-nav-pill { background: rgba(10,16,40,.5); border-color: rgba(255,255,255,.08); box-shadow: 0 10px 30px -22px rgba(0,0,0,.6); }
.ks-nav.nav-dark .ks-nav-link, .ks-nav.nav-dark .ks-nav-cta .ks-btn--secondary { color: #E6EEFF !important; }
.ks-nav.nav-dark .ks-nav-link:hover, .ks-nav.nav-dark .ks-nav-cta .ks-btn--secondary:hover { background: rgba(255,255,255,.08) !important; }
.ks-nav.nav-dark .ks-nav-cta .ks-btn--primary { background: #DCEBFF !important; border-color: #DCEBFF !important; color: #071033 !important; }
.ks-nav.nav-dark .ks-nav-cta .ks-btn--primary:hover { background: #fff !important; border-color: #fff !important; }
.ks-nav.nav-dark .ks-burger { color: #fff !important; }
@media (max-width: 991px){ .ks-nav, .ks-nav.is-scrolled { padding: 10px 0 !important; } .ks-nav-pill { height: 52px; padding: 0 6px 0 12px; } }
.ks-nav, .ks-nav.is-scrolled, .ks-nav.nav-dark, .ks-nav--light, .ks-nav--ink { background: transparent !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; pointer-events: none; }
.ks-nav .ks-nav-pill, .ks-nav .ks-mobile-toggle, .ks-nav .ks-burger, .ks-nav .ks-mega { pointer-events: auto; }
.ks-nav .ks-nav-inner { gap: 0; }
.ks-nav-pill { padding: 0 8px 0 20px; gap: 18px; }
.ks-nav-pill .ks-nav-logo { display: flex; align-items: center; margin-right: 6px; } .ks-nav-pill .ks-nav-logo-img { height: 24px !important; width: auto !important; }
.ks-nav .ks-nav-links { margin-inline: auto; }
@media (max-width: 991px){ .ks-nav-pill { padding: 0 6px 0 16px; } .ks-nav-pill .ks-nav-logo-img { height: 22px !important; } }
.ks-nav-pill .ks-burger { flex: none; margin-left: auto; border: 0 !important; background: transparent !important; color: var(--ink) !important; width: 40px; height: 40px; border-radius: 999px; }
@media (min-width: 992px){ .ks-nav-pill .ks-burger { display: none !important; } }
.ks-nav-pill { min-width: 0; overflow: hidden; }
.ks-nav .cta-s { display: none; }
@media (max-width: 1240px){ .ks-nav .cta-l { display: none; } .ks-nav .cta-s { display: inline; } .ks-nav .ks-nav-link { padding: 8px 10px !important; font-size: 15px !important; } .ks-nav .ks-nav-cta .ks-btn--secondary { display: none !important; } }
@media (max-width: 991px){ .ks-nav .ks-nav-links, .ks-nav .ks-nav-cta { display: none !important; } .ks-nav-pill .ks-burger { display: grid !important; place-items: center; } }
body section.hero.dark, body .ks-foot-lift > section.hero.dark { background: #060B1F !important; }
body section.hero.dark > .hero-stage { background: radial-gradient(90% 70% at 20% 100%, rgba(10,91,240,.28), transparent 60%), radial-gradient(60% 50% at 95% 0%, rgba(124,58,237,.16), transparent 60%), #060B1F !important; }
html body .ks-nav, html body .ks-nav.ks-nav--ink, html body .ks-nav.ks-nav--light, html body .ks-nav.is-scrolled, html body .ks-nav.nav-dark, html body .ks-nav.is-scrolled.ks-nav--ink, html body .ks-nav.is-scrolled.ks-nav--light, html body .ks-nav.ks-nav--ink.nav-dark.is-scrolled, html body .ks-nav.if-over-dark {
  background: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html body .ks-nav-pill { position: relative; overflow: visible !important; }
html body .ks-nav .ks-nav-item { position: static !important; }
html body .ks-nav .ks-mega, html body .ks-nav .ks-mega--1, html body .ks-nav .ks-mega--2 {
  position: absolute !important; left: 0 !important; right: 0 !important; top: calc(100% + 10px) !important; width: auto !important; max-width: none !important;
  transform: translateY(-8px) !important; opacity: 0; visibility: hidden; pointer-events: none;
  padding: 18px !important; border-radius: 22px !important; background: rgba(255,255,255,.97) !important; border: 1px solid rgba(7,16,51,.07) !important;
  box-shadow: 0 30px 70px -30px rgba(7,16,51,.35), 0 2px 8px rgba(7,16,51,.04) !important; backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%);
  transition: opacity .28s cubic-bezier(.2, .7, .2, 1) .12s, transform .34s cubic-bezier(.2, .7, .2, 1) .12s, visibility 0s linear .46s !important; z-index: 1200; }
html body .ks-nav .ks-mega::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
html body .ks-nav .ks-nav-item:hover > .ks-mega, html body .ks-nav .ks-nav-item:focus-within > .ks-mega {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) !important; transition: opacity .3s cubic-bezier(.2, .7, .2, 1), transform .4s cubic-bezier(.2, .7, .2, 1), visibility 0s !important; }
html body .ks-nav .ks-nav-item:hover > .ks-nav-link { background: rgba(7,16,51,.05) !important; }
html body .ks-nav.nav-dark .ks-nav-item:hover > .ks-nav-link { background: rgba(255,255,255,.08) !important; }
html body .ks-nav .ks-nav-link svg { transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
html body .ks-nav .ks-mega-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important; gap: 4px 8px !important; }
html body .ks-nav .ks-mega-link { padding: 14px 16px !important; border-radius: 14px !important; gap: 14px !important; align-items: flex-start; transition: background .22s ease, transform .22s ease !important; }
html body .ks-nav .ks-mega-link:hover { background: #F3F6FF !important; transform: none !important; }
html body .ks-nav .ks-mega-link .ks-icon-tile { width: 40px !important; height: 40px !important; border-radius: 12px !important; background: transparent !important; color: var(--ks-blue) !important; border: 0 !important; transition: background .22s ease, color .22s ease; }
html body .ks-nav .ks-mega-title { font-size: 15px !important; font-weight: 600 !important; color: var(--ink) !important; margin-bottom: 3px !important; }
html body .ks-nav .ks-mega-desc { font-size: 13.5px !important; color: var(--fg2) !important; }
html body .ks-nav .ks-mega-foot { margin-top: 10px !important; border-radius: 14px !important; background: linear-gradient(90deg, #F3F6FF, #F6F2FF) !important; }
html body .ks-nav .ks-mega-link { opacity: 0; transform: translateY(6px); }
html body .ks-nav .ks-nav-item:hover > .ks-mega .ks-mega-link, html body .ks-nav .ks-nav-item:focus-within > .ks-mega .ks-mega-link { opacity: 1; transform: none; transition: opacity .35s ease calc(var(--i, 0) * 30ms + 60ms), transform .4s cubic-bezier(.2, .7, .2, 1) calc(var(--i, 0) * 30ms + 60ms), background .22s ease !important; }
@media (prefers-reduced-motion: reduce){ html body .ks-nav .ks-mega, html body .ks-nav .ks-mega-link { transition: none !important; transform: none !important; } }
@keyframes icNudge { 0% { transform: translate(0,0); } 40% { transform: translate(0,-2px); } 70% { transform: translate(0,.5px); } 100% { transform: translate(0,0); } }
@keyframes icTilt { 0% { transform: rotate(0); } 35% { transform: rotate(-9deg); } 70% { transform: rotate(4deg); } 100% { transform: rotate(0); } }
@keyframes icDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes icArrow { 0% { transform: translateX(0); } 45% { transform: translateX(4px); } 55% { transform: translateX(4px); opacity: 1; } 56% { transform: translateX(-6px); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } }
html body .ks-icon-tile, html body .ks-mega-link .ks-icon-tile { transition: background .25s ease, border-color .25s ease, color .25s ease !important; }
html body a:hover .ks-icon-tile, html body button:hover .ks-icon-tile, html body .ks-card:hover .ks-icon-tile, html body .ks-mega-link:hover .ks-icon-tile, html body [class*="card"]:hover .ks-icon-tile { background: transparent !important; color: var(--ks-blue) !important; border-color: rgba(10,91,240,.18) !important; }
html body .ks-icon-tile svg, html body .ks-mega-link .ks-icon-tile svg { fill: none !important; stroke: currentColor; stroke-width: 1.75; overflow: visible; transform-origin: 50% 60%; }
html body a:hover .ks-icon-tile svg, html body button:hover .ks-icon-tile svg, html body .ks-card:hover .ks-icon-tile svg, html body .ks-mega-link:hover .ks-icon-tile svg, html body [class*="card"]:hover .ks-icon-tile svg, html body .ks-icon-tile:hover svg { animation: icNudge .55s cubic-bezier(.3,.7,.3,1) 1; }
html body a:hover .ks-icon-tile svg *, html body button:hover .ks-icon-tile svg *, html body .ks-card:hover .ks-icon-tile svg *, html body .ks-mega-link:hover .ks-icon-tile svg *, html body [class*="card"]:hover .ks-icon-tile svg *, html body .ks-icon-tile:hover svg * { stroke-dasharray: 1; stroke-dashoffset: 0; animation: icDraw .7s cubic-bezier(.4,0,.2,1) 1; }
html body .ks-mega-link:nth-child(even):hover .ks-icon-tile svg, html body [class*="card"]:nth-child(even):hover .ks-icon-tile svg { animation-name: icTilt; }
html body a:hover svg.i-arrow-right, html body button:hover svg.i-arrow-right, html body a:hover svg.i-arrow-up-right, html body .go:hover svg.i-arrow-right { animation: icArrow .6s cubic-bezier(.4,0,.2,1) 1; }
html body .ks-foot-social a:hover svg { animation: icNudge .5s cubic-bezier(.3,.7,.3,1) 1; }
@media (prefers-reduced-motion: reduce){ html body .ks-icon-tile svg, html body .ks-icon-tile svg *, html body a svg, html body button svg { animation: none !important; } }
html body .ks-nav .ks-mega, html body .ks-nav.nav-dark .ks-mega, html body .ks-nav.if-over-dark .ks-mega, html body .ks-nav.ks-nav--ink .ks-mega {
  background: #FFFFFF !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; isolation: isolate; color: var(--ink) !important; }
html body .ks-nav .ks-mega-foot, html body .ks-nav.nav-dark .ks-mega-foot { position: relative; z-index: 1; opacity: 1 !important; background: linear-gradient(90deg, #F2F5FF, #F5F1FF) !important; }
html body .ks-nav .ks-mega-foot b, html body .ks-nav .ks-mega-foot strong, html body .ks-nav .ks-mega-foot h5, html body .ks-nav .ks-mega-foot .ks-mega-title { color: var(--ink) !important; }
html body .ks-nav .ks-mega-foot p, html body .ks-nav .ks-mega-foot span:not(.ks-btn *), html body .ks-nav .ks-mega-foot small { color: var(--fg2) !important; }
html body .ks-nav .ks-mega .ks-btn, html body .ks-nav.nav-dark .ks-mega .ks-btn, html body .ks-nav.if-over-dark .ks-mega .ks-btn, html body .ks-nav .ks-mega .ks-btn--secondary, html body .ks-nav.nav-dark .ks-mega .ks-btn--secondary, html body .ks-nav.if-over-dark .ks-mega .ks-btn--secondary {
  opacity: 1 !important; background: #FFFFFF !important; border: 1px solid rgba(7,16,51,.14) !important; color: var(--ink) !important; box-shadow: 0 1px 2px rgba(7,16,51,.05) !important; font-weight: 500 !important; }
html body .ks-nav .ks-mega .ks-btn:hover, html body .ks-nav.nav-dark .ks-mega .ks-btn:hover { background: var(--ink) !important; border-color: var(--ink) !important; color: #fff !important; }
html body .ks-nav .ks-mega .ks-btn svg { opacity: 1 !important; color: currentColor !important; }
html body .ks-nav .ks-mega-title, html body .ks-nav.nav-dark .ks-mega-title { color: var(--ink) !important; } html body .ks-nav .ks-mega-desc, html body .ks-nav.nav-dark .ks-mega-desc { color: var(--fg2) !important; }
html body .ks-btn, html body .ks-nav .ks-nav-cta .ks-btn--primary, html body .ks-nav .ks-nav-cta .ks-btn--secondary, html body .ks-foot .ks-btn, html body .ks-mega .ks-btn, html body .ew-wiz .ks-btn, html body .ksa .ks-btn { border-radius: 10px !important; }
html body .ks-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; isolation: isolate; transition: color .3s ease, border-color .3s ease, background-color .3s ease, box-shadow .3s ease, transform .3s cubic-bezier(.2,.7,.2,1) !important; }
html body .ks-btn:hover { transform: translateY(-1px); }
html body .ks-btn:active { transform: translateY(0); transition-duration: .1s !important; }
html body .ks-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(90deg, rgba(10,91,240,.08), rgba(124,58,237,.08)); transform: scaleX(0); transform-origin: left center; transition: transform .45s cubic-bezier(.65,0,.25,1); }
html body .ks-btn:hover::before { transform: scaleX(1); }
html body .ks-btn--primary::before { background: linear-gradient(90deg, rgba(255,255,255,.14), rgba(255,255,255,0)); }
html body .ks-btn .ks-btn-arrow { width: 16px; height: 16px; flex: none; margin-right: -2px; }
html body .ks-btn:hover svg.i-arrow-right, html body .ks-btn:focus-visible svg.i-arrow-right { animation: icArrow .6s cubic-bezier(.4,0,.2,1) 1; }
@media (prefers-reduced-motion: reduce){ html body .ks-btn, html body .ks-btn::before { transition: none !important; transform: none !important; } }
html body .ks-nav .ks-nav-item > .ks-mega, html body .ks-nav .ks-nav-item > .ks-mega * { pointer-events: none !important; }
html body .ks-nav .ks-nav-item:hover > .ks-mega, html body .ks-nav .ks-nav-item:hover > .ks-mega *, html body .ks-nav .ks-nav-item:focus-within > .ks-mega, html body .ks-nav .ks-nav-item:focus-within > .ks-mega *, html body .ks-nav .ks-nav-item.is-open > .ks-mega, html body .ks-nav .ks-nav-item.is-open > .ks-mega * { pointer-events: auto !important; }
html body .ks-nav .ks-nav-item:not(:hover):not(:focus-within):not(.is-open) > .ks-mega { visibility: hidden !important; }
html body .ks-nav .ks-mega::before { pointer-events: none !important; }
html body .ks-nav .ks-nav-item:hover > .ks-mega::before { pointer-events: auto !important; }
html body .ks-nav, html body .ks-nav > .ks-container-wide, html body .ks-nav .ks-nav-inner { pointer-events: none !important; }
html body .ks-nav .ks-nav-pill, html body .ks-nav .ks-nav-pill > *:not(.ks-nav-links), html body .ks-nav .ks-nav-links > *, html body .ks-nav .ks-nav-link { pointer-events: auto; }
@media (hover: hover) and (min-width: 992px){
  html body .ks-nav .ks-nav-item:hover:not(.is-open):not(:focus-within) > .ks-mega { opacity: 0 !important; visibility: hidden !important; transform: translateY(-8px) !important; pointer-events: none !important; }
  html body .ks-nav .ks-nav-item:hover:not(.is-open):not(:focus-within) > .ks-mega * { pointer-events: none !important; }
  html body .ks-nav .ks-nav-item.is-open > .ks-mega { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; pointer-events: auto !important; transition: opacity .3s cubic-bezier(.2,.7,.2,1), transform .4s cubic-bezier(.2,.7,.2,1), visibility 0s !important; }
  html body .ks-nav .ks-nav-item.is-open > .ks-mega .ks-mega-link { opacity: 1; transform: none; transition: opacity .35s ease calc(var(--i, 0) * 30ms + 60ms), transform .4s cubic-bezier(.2,.7,.2,1) calc(var(--i, 0) * 30ms + 60ms), background .22s ease !important; }
  html body .ks-nav .ks-nav-item.is-open > .ks-nav-link { background: rgba(7,16,51,.05) !important; } html body .ks-nav.nav-dark .ks-nav-item.is-open > .ks-nav-link { background: rgba(255,255,255,.08) !important; }
  html body .ks-nav .ks-nav-item.is-open > .ks-nav-link svg { transform: rotate(180deg); }
  html body .ks-nav .ks-nav-item:hover:not(.is-open) > .ks-nav-link svg { transform: none; }
}
html body .ksa-launcher, html body .ksa-launcher:hover { position: fixed !important; left: 50% !important; right: auto !important; bottom: 20px !important; transform: translateX(-50%) !important;
  display: inline-flex !important; align-items: center; gap: 10px; height: 42px !important; padding: 0 6px 0 12px !important; border-radius: 10px !important;
  background: rgba(255,255,255,.72) !important; background-image: none !important; color: var(--ink) !important; border: 1px solid rgba(7,16,51,.1) !important;
  box-shadow: 0 10px 30px -18px rgba(7,16,51,.35) !important; backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%);
  font: 500 14px/1 var(--font-sans) !important; letter-spacing: -.005em; overflow: visible !important; animation: none !important;
  transition: background .18s linear, color .18s linear, border-color .18s linear, box-shadow .25s ease, opacity .3s ease, visibility .3s !important; }
html body .ksa-launcher::before, html body .ksa-launcher::after { content: none !important; display: none !important; }
html body .ksa-launcher .ksa-tile, html body .ksa-launcher .ksa-launcher-hint, html body .ksa-launcher .ksa-launcher-badge { display: none !important; }
html body .ksa-launcher .ksa-lt { display: grid; place-items: center; width: 18px; height: 18px; color: var(--ks-blue); transition: color .18s linear; }
html body .ksa-launcher .ksa-lic { width: 16px; height: 16px; fill: none !important; overflow: visible; transform-origin: 50% 50%; }
html body .ksa-launcher .ksa-lic path { stroke-dasharray: 1; stroke-dashoffset: 0; }
html body .ksa-launcher .ksa-ll { white-space: nowrap; }
html body .ksa-launcher .ksa-lk { display: inline-grid; place-items: center; height: 30px; padding: 0 12px; border-radius: 7px; background: var(--ink); color: #fff; font-weight: 500; font-size: 13px; transition: background .18s linear, color .18s linear; }
html body .ksa-launcher:hover { box-shadow: 0 14px 34px -18px rgba(7,16,51,.45) !important; border-color: rgba(7,16,51,.18) !important; }
html body .ksa-launcher:hover .ksa-lic { animation: icTilt .6s cubic-bezier(.3,.7,.3,1) 1; }
html body .ksa-launcher:hover .ksa-lic path { animation: icDraw .7s cubic-bezier(.4,0,.2,1) 1; }
html body .ksa-launcher:hover .ksa-lk { background: var(--ks-blue); }
html body .ksa-launcher:focus-visible { outline: 2px solid var(--ks-blue) !important; outline-offset: 3px; }
html body .ksa-launcher.is-hidden { opacity: 0 !important; visibility: hidden !important; pointer-events: none; transform: translateX(-50%) translateY(10px) !important; }
html body .ksa-launcher.on-dark { background: rgba(10,16,40,.55) !important; color: #E6EEFF !important; border-color: rgba(255,255,255,.12) !important; box-shadow: 0 10px 30px -18px rgba(0,0,0,.6) !important; }
html body .ksa-launcher.on-dark .ksa-lt { color: #9DBBFF; }
html body .ksa-launcher.on-dark .ksa-lk { background: #DCEBFF; color: #071033; }
html body .ksa-launcher.on-dark:hover .ksa-lk { background: #fff; }
@media (max-width: 720px){ html body .ksa-launcher, html body .ksa-launcher:hover { bottom: 14px !important; height: 40px !important; } }
html body.ew-cta-on .ksa-launcher { bottom: 84px !important; }
html body .ksa-launcher, html body .ksa-launcher:hover { transition: box-shadow .25s ease, opacity .3s ease, visibility .3s !important; }
html body .ksa-launcher .ksa-lt, html body .ksa-launcher .ksa-lk { transition: none !important; }
html body .ks-nav .ks-nav-pill { transition: none !important; }
html body .ks-nav .ks-nav-link, html body .ks-nav .ks-nav-cta .ks-btn, html body .ks-nav .ks-burger, html body .ks-nav .ks-nav-logo-img { transition: none !important; }
html body .ksa-scrim { background: rgba(7,16,51,.28) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html body .ksa { width: min(720px, calc(100vw - 32px)) !important; height: min(620px, calc(100vh - 48px)) !important; border-radius: 12px !important;
  background: #FFFFFF !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 1px solid rgba(7,16,51,.1) !important; outline: 0 !important;
  box-shadow: 0 40px 90px -40px rgba(7,16,51,.45), 0 2px 8px rgba(7,16,51,.05) !important; font-family: var(--font-sans); }
html body .ksa::before, html body .ksa::after { content: none !important; display: none !important; }
html body .ksa-head { padding: 14px 14px 14px 18px !important; gap: 12px !important; border-bottom: 1px solid var(--rule) !important; background: #fff !important; }
html body .ksa-head .ksa-tile { width: 32px !important; height: 32px !important; border-radius: 8px !important; background: #EEF3FF !important; box-shadow: none !important; border: 1px solid rgba(10,91,240,.14); }
html body .ksa-head .ksa-tile::after { content: none !important; }
html body .ksa-head .ksa-tile svg, html body .ksa-head .ksa-glyph svg { width: 16px !important; height: 16px !important; color: var(--ks-blue) !important; fill: none !important; filter: none !important; animation: none !important; }
html body .ksa-title { font: 600 15px/1.2 var(--font-sans) !important; color: var(--ink) !important; letter-spacing: -.01em; }
html body .ksa-status { margin-top: 3px !important; font: 400 12.5px/1 var(--font-sans) !important; color: var(--fg3) !important; gap: 6px !important; }
html body .ksa-dot { width: 6px !important; height: 6px !important; box-shadow: none !important; animation: none !important; background: #22A06B !important; }
html body .ksa-status.is-gold .ksa-dot { background: var(--gold) !important; } html body .ksa-status.is-success .ksa-dot { background: #22A06B !important; }
html body .ksa-ibtn { width: 32px !important; height: 32px !important; border-radius: 8px !important; color: var(--fg2) !important; }
html body .ksa-ibtn:hover { background: var(--slate-100) !important; color: var(--ink) !important; }
html body .ksa-ibtn svg { width: 16px !important; height: 16px !important; }
html body .ksa-ibtn:hover svg { animation: icNudge .5s cubic-bezier(.3,.7,.3,1) 1; }
html body .ksa-body { padding: 20px 20px 8px !important; gap: 14px !important; background: #fff; }
html body .ksa-avatar { width: 26px !important; height: 26px !important; border-radius: 7px !important; background: #EEF3FF !important; border: 1px solid rgba(10,91,240,.12); }
html body .ksa-avatar svg { width: 13px !important; height: 13px !important; color: var(--ks-blue) !important; }
html body .ksa-bubble { padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; font: 400 15px/1.6 var(--font-sans) !important; color: var(--ink) !important; }
html body .ksa-msg--user .ksa-bubble { padding: 10px 14px !important; background: var(--ink) !important; color: #fff !important; border-radius: 10px !important; box-shadow: none !important; }
html body .ksa-msg--error .ksa-bubble, html body .ksa-msg--note .ksa-bubble { padding: 10px 14px !important; border-radius: 10px !important; border: 1px solid !important; }
html body .ksa-msg--error .ksa-bubble { background: #FEF3F2 !important; border-color: #F4C7C2 !important; color: #7A271A !important; }
html body .ksa-msg--note .ksa-bubble { background: #FFF8EB !important; border-color: #F6DDA6 !important; }
html body .ksa-typing { padding: 6px 0 !important; }
html body .ksa-trust { margin-left: 36px !important; gap: 4px 14px !important; }
html body .ksa-trust span { padding: 0 !important; background: none !important; border: 0 !important; border-radius: 0 !important; font: 400 12.5px/1.4 var(--font-sans) !important; color: var(--fg3) !important; }
html body .ksa-trust svg { width: 13px !important; height: 13px !important; color: var(--fg3) !important; }
html body .ksa-card { margin-left: 36px !important; border-radius: 10px !important; box-shadow: none !important; border: 1px solid var(--rule) !important; }
html body .ksa-card-head { background: #F1FAF5 !important; border-bottom: 1px solid var(--rule) !important; padding: 12px 14px !important; }
html body .ksa-card-head .ks-icon-tile { width: 28px !important; height: 28px !important; border-radius: 7px !important; }
html body .ksa-foot { padding: 12px 18px 12px !important; border-top: 1px solid var(--rule) !important; background: #fff !important; }
html body .ksa-chips { gap: 6px !important; margin-bottom: 10px !important; }
html body .ksa-chip { padding: 7px 11px !important; border-radius: 8px !important; border: 1px solid rgba(7,16,51,.12) !important; background: #fff !important; color: var(--ink) !important; font: 500 13px/1.2 var(--font-sans) !important; box-shadow: none !important; transform: none !important; transition: border-color .2s ease, background .2s ease, color .2s ease !important; }
html body .ksa-chip:hover { border-color: rgba(10,91,240,.35) !important; background: #F5F8FF !important; color: var(--ks-blue) !important; }
html body .ksa-chip svg { width: 13px !important; height: 13px !important; }
html body .ksa-chip:hover svg.i-arrow-right, html body .ksa-chip:hover svg.i-arrow-up-right { animation: icArrow .6s cubic-bezier(.4,0,.2,1) 1; }
html body .ksa-chip--primary { background: var(--ink) !important; border-color: var(--ink) !important; color: #fff !important; }
html body .ksa-chip--primary:hover { background: var(--ks-blue) !important; border-color: var(--ks-blue) !important; color: #fff !important; }
html body .ksa-chip--gold { background: #FFF8EB !important; border-color: #F6DDA6 !important; color: #8A5A00 !important; }
html body .ksa-chip--ghost { border-color: transparent !important; color: var(--fg2) !important; }
html body .ksa-composer { border-radius: 10px !important; border: 1px solid rgba(7,16,51,.14) !important; padding: 4px 4px 4px 14px !important; background: #fff !important; box-shadow: none !important; }
html body .ksa-composer:focus-within { border-color: var(--ks-blue) !important; box-shadow: 0 0 0 3px rgba(10,91,240,.12) !important; }
html body .ksa-input { font: 400 15px/1.4 var(--font-sans) !important; padding: 9px 0 !important; }
html body .ksa-input:focus, html body .ksa-input:focus-visible { outline: none !important; box-shadow: none !important; }
html body .ksa-send { width: 36px !important; height: 36px !important; border-radius: 8px !important; background: var(--ink) !important; box-shadow: none !important; transform: none !important; }
html body .ksa-send:hover:not([disabled]) { background: var(--ks-blue) !important; }
html body .ksa-send:hover:not([disabled]) svg { animation: icArrow .6s cubic-bezier(.4,0,.2,1) 1; }
html body .ksa-send[disabled] { background: var(--slate-200) !important; opacity: 1 !important; }
html body .ksa-send svg { width: 16px !important; height: 16px !important; }
html body .ksa-legal { margin-top: 8px !important; font: 400 12px/1.4 var(--font-sans) !important; color: var(--fg3) !important; }
html body .ksa-legal a { color: var(--fg2) !important; text-decoration: none !important; } html body .ksa-legal a:hover { color: var(--ks-blue) !important; }
@media (max-width: 720px){ html body .ksa { width: 100vw !important; height: 100dvh !important; border-radius: 0 !important; border: 0 !important; } }
@property --ksi-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes ksiSpin { to { --ksi-a: 360deg; } }
@keyframes ksiFlow { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
@keyframes ksiBreath { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.08) rotate(8deg); } }
@keyframes ksiDot { 0%, 80%, 100% { transform: translateY(0); opacity: .35; } 40% { transform: translateY(-3px); opacity: 1; } }
html body .ksa-status { display: none !important; }
html body .ksa-title { font: 600 16px/1.2 var(--font-sans) !important; letter-spacing: -.012em;
  background: linear-gradient(90deg, #0A5BF0 0%, #7C3AED 35%, #FF9A76 55%, #7C3AED 75%, #0A5BF0 100%); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent !important; animation: ksiFlow 8s linear infinite; }
html body .ksa-head .ksa-tile { position: relative; width: 34px !important; height: 34px !important; border-radius: 9px !important; background: #F5F7FF !important; border: 0 !important; isolation: isolate; overflow: visible !important; }
html body .ksa-head .ksa-tile::before { content: "" !important; display: block !important; position: absolute; inset: -1px; border-radius: 10px; padding: 1px; z-index: -1;
  background: conic-gradient(from var(--ksi-a), #0A5BF0, #7C3AED, #FF9A76, #0A5BF0); animation: ksiSpin 6s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
html body .ksa-head .ksa-tile::after { content: "" !important; display: block !important; position: absolute; inset: 4px; border-radius: 50%; z-index: -2; background: radial-gradient(circle, rgba(124,58,237,.18), transparent 70%); filter: blur(6px); }
html body .ksa-head .ksa-tile svg, html body .ksa-head .ksa-glyph svg, html body .ksa-head .ksa-tile .ksa-glyph svg { width: 17px !important; height: 17px !important; color: #3B5BFF !important; stroke: #3B5BFF !important; fill: none !important; opacity: 1 !important; filter: none !important; animation: ksiBreath 4.5s ease-in-out infinite !important; }
html body .ksa-avatar svg, html body .ksa-avatar .ksa-glyph svg { color: #3B5BFF !important; stroke: #3B5BFF !important; fill: none !important; opacity: 1 !important; }
html body .ksa::after { content: "" !important; display: block !important; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 3;
  background: conic-gradient(from var(--ksi-a), transparent 0deg, rgba(10,91,240,.55) 50deg, rgba(124,58,237,.5) 100deg, rgba(255,154,118,.45) 140deg, transparent 190deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  opacity: 0; animation: ksiSpin 12s linear infinite; transition: opacity .8s ease .2s; }
html body .ksa.is-open::after, html body .ksa--inline::after { opacity: .7; }
html body .ksa-typing i { width: 6px !important; height: 6px !important; background: linear-gradient(135deg, #0A5BF0, #7C3AED) !important; animation: ksiDot 1.2s ease-in-out infinite !important; }
html body .ksa-typing i:nth-child(2) { animation-delay: .15s !important; background: linear-gradient(135deg, #7C3AED, #B06AE6) !important; } html body .ksa-typing i:nth-child(3) { animation-delay: .3s !important; background: linear-gradient(135deg, #B06AE6, #FF9A76) !important; }
html body .ksa-msg { animation: ksaIn .4s cubic-bezier(.2,.7,.2,1) both !important; }
html body .ksa-composer { position: relative; }
html body .ksa-composer:focus-within { border-color: transparent !important; box-shadow: 0 0 0 3px rgba(124,58,237,.08) !important;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, #0A5BF0, #7C3AED, #FF9A76) border-box !important; border: 1px solid transparent !important; }
html body .ksa-send:not([disabled]) { background: linear-gradient(135deg, #0A5BF0, #7C3AED) !important; }
html body .ksa-send:hover:not([disabled]) { background: linear-gradient(135deg, #0A5BF0, #9B5CF0) !important; }
@media (prefers-reduced-motion: reduce){ html body .ksa-title, html body .ksa-head .ksa-tile::before, html body .ksa::after, html body .ksa-head .ksa-tile svg { animation: none !important; } }
.ks-ink.amb-host, .amb-host-l { overflow: hidden; isolation: isolate; }
.ks-ink.amb-host > :not(.amb):not(.ks-glow):not(.mo-hv), .amb-host-l > :not(.amb):not(.as):not(.ks-glow):not(.mo-hv) { position: relative; z-index: 1; }
.amb-host-l > .as { z-index: 1; }
.amb-host-l > .ks-container-wide, .amb-host-l > .ks-container { z-index: 2; }
@keyframes ambFormL {
  0%   { opacity: .2;  stroke-dasharray: calc(var(--L) * .06px) calc(var(--L) * 1px); stroke-dashoffset: 0; }
  55%  { opacity: .22; stroke-dasharray: calc(var(--L) * .5px) calc(var(--L) * 1px);  stroke-dashoffset: calc(var(--L) * -.55px); }
  80%  { opacity: .14; stroke-dasharray: calc(var(--L) * .5px) calc(var(--L) * 1px);  stroke-dashoffset: calc(var(--L) * -.8px); }
  100% { opacity: 0;   stroke-dasharray: calc(var(--L) * .5px) calc(var(--L) * 1px);  stroke-dashoffset: calc(var(--L) * -1.05px); }
}
.amb.amb--light path.is-hot { animation-name: ambFormL !important; }
.amb.amb--light path { stroke-width: 1.1; }
.amb path { stroke-width: 1.6 !important; opacity: 0; }
.amb.amb--light path { stroke-width: 1.3 !important; }
.amb path.is-hot { animation: none !important; }
.amb path.amb-ly { opacity: 0; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.stage-dark::before, .ks-ink::before, .if-ink-photo, .ks-glow { background-image: none !important; background: none !important; }
:root { --r-ui: 10px; --bg: #FFFFFF; --bg-subtle: #FFFFFF; --bg-tint: #ECF1FA; --surface: #FFFFFF; --rule: rgba(12,24,60,.08); --deep: #060B1F; }
html, body { background: var(--bg) !important; }
html body section[class*="-hero"]:not(.if-dark-hero):not(.dark):not(.mo-h-night):not(.mo-h-cinema), html body section.hero:not(.if-dark-hero):not(.dark), html body .kn-hero:not(.mo-h-night):not(.mo-h-cinema) { background: var(--bg) !important; }
html body .ks-bg-subtle { background: var(--bg-subtle) !important; }
html body .ks-section:not(.ks-bg-subtle):not(.ks-ink):not(.dark):not(.stage-dark) { background-color: transparent; }
html body .ks-card, html body .pillar, html body .tile, html body .ew-wiz { background-color: var(--surface); }
html body .ks-bg-subtle .ks-card { box-shadow: 0 1px 0 rgba(12,24,60,.03); }
html body .ks-foot { background: var(--deep) !important; }
html body .ks-ink:not(.ks-foot) { background-color: var(--deep) !important; }
html body .ks-nav-pill { border-radius: var(--r-ui) !important; }
html body .ks-nav .ks-nav-link, html body .ks-nav-pill .ks-burger { border-radius: calc(var(--r-ui) - 3px) !important; }
html body .ks-nav .ks-mega { border-radius: var(--r-ui) !important; }
html body .ks-foot-lift { background: var(--bg) !important; }
html body .ks-media-frame { background: transparent !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important; overflow: visible !important; }
html body .ks-media-frame > .fx-tilt > figure, html body .ks-media-frame > figure { border-radius: var(--r-xl) !important; overflow: hidden !important; }
html { overflow-x: clip !important; }
html body { overflow-x: clip !important; overflow-y: visible !important; }
.ks-mcta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 950; display: none; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--border); box-shadow: 0 -12px 30px -20px rgba(7,16,51,.35); transform: translateY(110%); transition: transform .4s var(--ease-out); }
.ks-mcta b { display: block; font-size: 14px; color: var(--fg1); } .ks-mcta small { display: block; font-size: 12.5px; color: var(--fg3); }
.ks-mcta.is-on { transform: none; }
@media (max-width: 720px) { .ks-mcta { display: flex; } body.ks-mcta-on .ksa-launcher { bottom: 84px !important; } }
.ks-foot-grid { grid-template-columns: 1.4fr repeat(5, minmax(0, 1fr)) !important; }
.ks-nav-links > .ks-nav-link { white-space: nowrap; }
@media (max-width: 1100px) { .ks-foot-grid { grid-template-columns: 1fr 1fr !important; } .ks-foot-brand { grid-column: 1 / -1; } }
@media (max-width: 720px) { .ks-foot-grid { grid-template-columns: 1fr !important; } }
.ks-mega--offers .ks-mega-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ks-foot-res { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2.2fr); gap: clamp(28px, 4vw, 64px); padding: clamp(36px, 4vw, 56px) 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.ks-foot-res-intro h5 { margin: 0 0 10px !important; } .ks-foot-res-intro p { margin: 0; max-width: 34ch; font-size: 14.5px; line-height: 1.6; color: rgba(236,241,255,.62) !important; }
.ks-foot-res-groups { display: grid; gap: 22px; }
.ks-foot-rg { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 18px; align-items: baseline; padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,.07); }
.ks-foot-rg:last-child { border-bottom: 0; padding-bottom: 0; }
.ks-foot-rg h6 { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin: 0; font-size: 14px; font-weight: 600; color: #fff; }
.ks-foot-rg h6 svg { width: 16px; height: 16px; color: #8DB8FF; fill: none; flex: none; }
.ks-foot-rg h6 em { flex-basis: 100%; margin-left: 25px; font-style: normal; font-weight: 400; font-size: 12.5px; color: rgba(236,241,255,.5); }
.ks-foot-rl { display: flex; flex-wrap: wrap; gap: 8px 0; }
.ks-foot-rl a { position: relative; display: inline-flex; align-items: center; font-size: 14px; line-height: 1.5; color: rgba(236,241,255,.7) !important; padding-right: 14px; margin-right: 12px; transition: color .25s var(--ease-out); }
.ks-foot-rl a::after { content: ""; position: absolute; right: 0; top: 50%; width: 4px; height: 4px; border-radius: 50%; background: rgba(141,184,255,.45); transform: translateY(-50%); }
.ks-foot-rl a:last-child::after { display: none; } .ks-foot-rl a:last-child { padding-right: 0; margin-right: 0; }
.ks-foot-rl a:hover { color: #fff !important; }
.ks-foot-rg--free { margin-top: 4px; padding: 18px 20px; border: 1px solid rgba(141,184,255,.22); border-radius: 10px; background: rgba(10,132,255,.06); }
.ks-foot-rg--free .ks-foot-rl a { color: rgba(236,241,255,.85) !important; }
@media (max-width: 991px) { .ks-foot-res { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .ks-foot-rg { grid-template-columns: 1fr; gap: 10px; } .ks-foot-rg h6 em { margin-left: 25px; } }
html body:not([data-page="home"]) :is(.ks-foot-lift, main, .ks-foot-lift > main) > section { margin-left: 10px !important; margin-right: 10px !important; border-radius: 10px !important; overflow: clip !important; }
html body:not([data-page="home"]) :is(.ks-foot-lift, main, .ks-foot-lift > main) > section + section { margin-top: 10px !important; }
html body:not([data-page="home"]) :is(.ks-foot-lift, main, .ks-foot-lift > main) > section:first-of-type { margin-top: 0 !important; border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; }
html body:not([data-page="home"]) :is(.ks-foot-lift, main, .ks-foot-lift > main) > section > .amb, html body:not([data-page="home"]) :is(.ks-foot-lift, main, .ks-foot-lift > main) > section > .mo-hv, html body:not([data-page="home"]) :is(.ks-foot-lift, main, .ks-foot-lift > main) > section > .fx-aurora, html body:not([data-page="home"]) :is(.ks-foot-lift, main, .ks-foot-lift > main) > section > .fx-sphere, html body:not([data-page="home"]) :is(.ks-foot-lift, main, .ks-foot-lift > main) > section > canvas { border-radius: inherit; }
html body:not([data-page="home"]) .ks-foot-lift { background: var(--bg); }
@media (max-width: 760px) {
  html body:not([data-page="home"]) :is(.ks-foot-lift, main, .ks-foot-lift > main) > section { margin-left: 6px !important; margin-right: 6px !important; }
  html body:not([data-page="home"]) :is(.ks-foot-lift, main, .ks-foot-lift > main) > section + section { margin-top: 6px !important; }
}
.ks-foot-res { display: block !important; grid-template-columns: none !important; padding: clamp(36px, 4vw, 56px) 0 !important; }
.ks-foot-res-intro { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 28px; }
.ks-foot-res-intro h5 { margin: 0 !important; } .ks-foot-res-intro p { max-width: none !important; font-size: 14px !important; }
.ks-foot-res-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 2fr); gap: 32px clamp(20px, 2.4vw, 36px); }
.ks-foot-rc h6 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.1); font-size: 14px; font-weight: 600; color: #fff; }
.ks-foot-rc h6 span { font-weight: 400; font-size: 12px; color: rgba(236,241,255,.4); }
.ks-foot-rc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.ks-foot-rc--wide ul { grid-template-columns: 1fr 1fr; column-gap: clamp(16px, 2vw, 28px); }
.ks-foot-rc a { position: relative; display: inline-block; font-size: 13.5px; line-height: 1.4; color: rgba(236,241,255,.68) !important; transition: color .25s var(--ease-out), transform .3s var(--ease-out); }
.ks-foot-rc a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: rgba(141,184,255,.7); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease-out); }
.ks-foot-rc a:hover { color: #fff !important; } .ks-foot-rc a:hover::after { transform: scaleX(1); }
@media (max-width: 1200px) { .ks-foot-res-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ks-foot-rc--wide { grid-column: span 2; } }
@media (max-width: 760px) { .ks-foot-res-grid { grid-template-columns: 1fr 1fr; } .ks-foot-rc--wide { grid-column: 1 / -1; } }
@media (max-width: 480px) { .ks-foot-res-grid { grid-template-columns: 1fr; } .ks-foot-rc--wide ul { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .ks-foot-grid { grid-template-columns: 1fr 1fr !important; gap: 28px 20px; } .ks-foot-brand { grid-column: 1 / -1; } }
@media (max-width: 480px) { .ks-foot-res-grid { grid-template-columns: 1fr 1fr; gap: 26px 18px; } .ks-foot-rc--wide { grid-column: 1 / -1; } .ks-foot-rc--wide ul { grid-template-columns: 1fr 1fr; } }
.ks-foot-word { position: relative; overflow: hidden; margin-top: -8px; line-height: .8; pointer-events: none; user-select: none; }
.ks-foot-word span { display: block; text-align: center; font-family: var(--font-display); font-weight: 700; font-size: 20.5vw; letter-spacing: -.045em; white-space: nowrap;
  background: linear-gradient(180deg, rgba(141,184,255,.11) 0%, rgba(141,184,255,.035) 55%, rgba(141,184,255,0) 92%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  transform: translateY(calc(34% * (1 - var(--fr, 1)))); margin-bottom: -4.2vw; }
.ks-foot-inner > .ks-container-wide { transform: translateY(calc(40px * (1 - var(--fr, 1)))); opacity: calc(.35 + .65 * var(--fr, 1)); will-change: transform, opacity; }
.ks-foot::before { opacity: calc(.4 + .6 * var(--fr, 1)); }
.ks-foot-lift { border-bottom-left-radius: calc(18px * var(--fr, 0)); border-bottom-right-radius: calc(18px * var(--fr, 0)); }
@media (prefers-reduced-motion: reduce) { .ks-foot-inner > .ks-container-wide, .ks-foot-word span { transform: none !important; opacity: 1 !important; } }
.ks-foot-word { margin-top: 8px; line-height: 0; }
.ks-foot-word span { display: none; }
.ks-foot-word svg { display: block; width: 100%; height: auto; margin-bottom: -2.4%; overflow: visible; transform: translateY(calc(30% * (1 - var(--fr, 1)))); }
.ks-foot-word text { font-family: var(--font-display); font-weight: 700; font-size: 186px; }
@media (prefers-reduced-motion: reduce) { .ks-foot-word svg { transform: none !important; } }
.ks-foot-word text { font-family: "Poppins", var(--font-display) !important; font-weight: 600 !important; letter-spacing: 0; }
.ks-foot-word text { font-family: "Poppins", var(--font-display) !important; font-weight: 600 !important; font-size: 200px !important; letter-spacing: -.02em !important; }
html body .ks-foot-lift { box-shadow: none !important; border-radius: 0 !important; background: var(--bg) !important; }
html body .ks-foot-lift::after { content: none !important; display: none !important; }
html body .ks-foot-lift > section:last-of-type, html body .ks-foot-lift > main > section:last-of-type, html body .ks-foot-lift > main:last-child > section:last-child { margin-bottom: 0 !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; }
html body .ks-foot { margin-top: 0 !important; border-top: 0 !important; border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; }
html body .ks-foot::after { display: none !important; }
html body .ks-foot { margin-left: 10px !important; margin-right: 10px !important; margin-bottom: 10px !important; border-radius: 10px !important; overflow: clip !important; }
html body .ks-foot-lift > section:last-of-type, html body .ks-foot-lift > main > section:last-of-type, html body .ks-foot-lift > main:last-child > section:last-child { margin-bottom: 10px !important; border-bottom-left-radius: 10px !important; border-bottom-right-radius: 10px !important; }
@media (max-width: 760px) { html body .ks-foot { margin-left: 6px !important; margin-right: 6px !important; margin-bottom: 6px !important; } html body .ks-foot-lift > section:last-of-type { margin-bottom: 6px !important; } }
html body.ks-foot-layered .ks-foot, html body.ks-foot-layered .ks-foot.is-pinned { position: fixed !important; top: 0 !important; bottom: auto !important; left: 0; right: 0; z-index: 0 !important; margin: 0 10px !important; will-change: transform; }
html body.ks-foot-layered .ks-foot-lift { position: relative; z-index: 1; background: var(--bg) !important; }
.ks-foot-spacer { position: relative; z-index: 0; pointer-events: none; }
@media (max-width: 760px) { html body.ks-foot-layered .ks-foot { margin: 0 6px !important; } }
html body .ks-foot-cta { padding-top: clamp(120px, 12vw, 150px) !important; }
@media (max-width: 991px) { html body .ks-foot-cta { padding-top: 104px !important; } }
.ks-hov, .cons a, .of-persona, .of-out, .of-more-card, .of-probs li, .pillar, .ks-card--hover, .ks-card.ks-card--faceted, .ins-row, .ind-row, .ks-mega-link, .ew-card, .ew-b, .lp-caps .ks-card, .lp-related a, .lp-prob, .stage, .ks-foot-office { position: relative; transition: translate .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s cubic-bezier(.2,.7,.2,1), border-color .35s ease, background-color .35s ease, opacity .9s var(--ease-out), transform .9s var(--ease-out) !important; }
.ks-hov::after, .cons a::after, .of-persona::after, .of-out::after, .of-more-card::after, .of-probs li::after, .pillar::after, .ks-card--hover::after, .ks-card.ks-card--faceted::after, .ew-card::after, .ew-b::after, .lp-caps .ks-card::after, .lp-related a::after, .lp-prob::after, .stage::after {
  content: "" !important; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 2;
  background: linear-gradient(135deg, #0A5BF0, #7C3AED 55%, #FF9A76); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  opacity: 0; transform: none !important; transition: opacity .4s ease !important; display: block !important; width: auto !important; height: auto !important; }
@media (hover: hover) {
  .ks-hov:hover, .cons a:hover, .of-persona:hover, .of-out:hover, .of-more-card:hover, .of-probs li:hover, .pillar:hover, .ks-card--hover:hover, .ks-card.ks-card--faceted:hover, .ew-card:hover, .ew-b:hover, .lp-caps .ks-card:hover, .lp-related a:hover, .lp-prob:hover, .stage:hover { translate: 0 -4px; border-color: transparent !important; box-shadow: 0 22px 44px -26px rgba(10,91,240,.38) !important; }
  .ks-hov:hover::after, .cons a:hover::after, .of-persona:hover::after, .of-out:hover::after, .of-more-card:hover::after, .of-probs li:hover::after, .pillar:hover::after, .ks-card--hover:hover::after, .ks-card.ks-card--faceted:hover::after, .ew-card:hover::after, .ew-b:hover::after, .lp-caps .ks-card:hover::after, .lp-related a:hover::after, .lp-prob:hover::after, .stage:hover::after { opacity: 1; }
  .ins-row:hover, .ind-row:hover, .ks-mega-link:hover { background: var(--slate-50); border-radius: 10px; }
}
.dark .ks-hov::after, .ks-ink .ks-hov::after, .cons a.is-lead::after { background: linear-gradient(135deg, #6EA8FF, #A78BFA 55%, #FFB597); }
.cons a.is-lead:hover { box-shadow: 0 22px 44px -26px rgba(10,91,240,.6) !important; }
.ks-hov.is-in:hover, .cons a.is-in:hover, .of-persona.is-in:hover, .of-out.is-in:hover, .of-more-card.is-in:hover, .of-probs li.is-in:hover, .pillar.is-in:hover, .ew-card.is-in:hover, .ew-b.is-in:hover, .lp-prob.is-in:hover, .stage.is-in:hover { transform: none !important; }
.kn-hero--as .as { position: absolute; z-index: 1; right: var(--gutter); top: 50%; transform: translateY(-50%); width: min(38vw, 560px); height: min(72%, 520px); max-height: calc(100% - 140px); pointer-events: none; }
@media (max-width: 1200px) { .kn-hero--as .as { width: min(36vw, 480px); } .kn-hero--as .row > [class*="col-"]:first-child { max-width: 60%; flex: 0 0 60%; } }
.ks-card--ink li, .ks-card--ink .ks-list li, .shift-new li, .shift-new .ks-list li, .agent-mock li, .agent-mock p, .agent-mock small, [class*="-new"] .ks-list li { color: rgba(236,241,255,.86) !important; }
.shift-new .ks-chip, .ks-card--ink .ks-chip { color: #8DB8FF !important; }
.ks-list li { display: grid !important; grid-template-columns: 14px minmax(0, 1fr); column-gap: 12px; align-items: start; padding-left: 0 !important; }
.ks-list li::before { position: static !important; margin-top: .5em !important; align-self: start; }
@media (min-width: 992px) {
  html.mo-on .mo-h-diptych .mo-hv, html.mo-on .mo-h-stair .mo-hv, html.mo-on .mo-h-frame .mo-hv { top: 50% !important; bottom: auto !important; height: min(62vh, 560px) !important; min-height: 380px; transform: translateY(calc(-50% + 40px)) !important; }
  html.mo-on .mo-h-diptych, html.mo-on .mo-h-stair, html.mo-on .mo-h-frame { min-height: max(min(94vh, 920px), 720px) !important; }
}
@media (max-width: 991px) { html.mo-on .mo-h .mo-hv { transform: none !important; min-height: 0 !important; } }
html.mo-on .mo-h .mo-hv-f1 { transform: translateY(calc(var(--p, 0) * -18px)) !important; }
html.mo-on .mo-h .mo-hv-f2 { transform: translateY(calc(var(--p, 0) * 18px)) !important; }
html.mo-on .mo-h .mo-hv-f3 { transform: translateY(calc(var(--p, 0) * -10px)) !important; }
@media (max-width: 991px) {
  html.mo-on .mo-h-diptych .mo-hv, html.mo-on .mo-h-stair .mo-hv, html.mo-on .mo-h-frame .mo-hv, html.mo-on .mo-h-horizon .mo-hv { position: relative !important; top: auto !important; bottom: auto !important; right: auto !important; left: auto !important; width: 100% !important; height: 52vw !important; max-height: 420px; margin: 28px 0 0; }
  html.mo-on .mo-h .mo-hv-f1, html.mo-on .mo-h .mo-hv-f2, html.mo-on .mo-h .mo-hv-f3 { transform: none !important; }
}
html body .shift-new .ks-chip, html body .shift-new .ks-chip--ondark, html body .ks-card--ink .ks-chip, html body .dark .ks-chip, html body .stage-dark .ks-chip { color: #8DB8FF !important; border-color: rgba(141,184,255,.45) !important; background: rgba(141,184,255,.08) !important; }
html.mo-on .mo-h .mo-hv-f img, html.mo-on .mo-h.is-in .mo-hv-f img { transform: scale(1.12) !important; }
html.mo-on .mo-h .mo-hv-f { background: transparent !important; }
html body .sx-hero { background: #fff !important; color: var(--fg1) !important; }
html body .sx-hero .ks-display, html body .sx-hero h1 { color: var(--ink) !important; }
html body .sx-hero > .amb, html body .sx-hero > .mo-hv, html body .sx-hero > .as, html body .sx-hero > .kt-orbit { display: none !important; }
html.mo-on body:not([data-page="home"]) .shift-new .ks-chip, html.mo-on body:not([data-page="home"]) .shift-new .ks-chip--ondark, html.mo-on body:not([data-page="home"]) .ks-card--ink .ks-chip, html.mo-on body:not([data-page="home"]) .dark .ks-chip { color: #8DB8FF !important; border-color: rgba(141,184,255,.45) !important; background: rgba(141,184,255,.08) !important; }
.cta .cta-in { display: flex !important; flex-direction: column; align-items: center; text-align: center; max-width: 820px; grid-template-columns: none !important; }
.cta .cta-in > .if-r { display: flex; flex-direction: column; align-items: center; }
.cta .cta-in h2 { max-width: 16ch; margin-left: auto; margin-right: auto; text-wrap: balance; }
.cta .cta-in .ks-lead { margin-left: auto !important; margin-right: auto !important; }
.cta .cta-in .hero-cta { justify-content: center; margin-top: 32px; }
.cta .cta-in .panel { display: none !important; }
html body .eyebrow i, html body .eyebrow::before, html body .of-eyebrow::before, html body .sx-eyebrow::before, html body .ks-wedge::before, html body .ks-wedge::after, html body .ks-eyebrow::before, html body .ofs-k::before, html body .ofs-k--sol::before, html body .of-cta .eyebrow i, html body .pb-k::before, html body .mo-eyebrow::before, html body .lp-eyebrow::before { display: none !important; content: none !important; }
html body .eyebrow, html body .of-eyebrow, html body .sx-eyebrow, html body .ks-wedge, html body .ks-eyebrow, html body .ofs-k { gap: 0 !important; padding-left: 0 !important; }
html body .ks-icon-tile, html body .ks-icon-tile--gold, html body .ks-icon-tile--ink, html body .ks-ink .ks-icon-tile, html body .stage .ks-icon-tile, html body .ks-mega-link .ks-icon-tile, html body .of-ico, html body .ofo-ico, html body .oc-ico, html body .of-done-ico, html body .ofm-ico, html body .kv-ico, html body .kv-ico--ok, html body .ofb-tile, html body .ofi-fi, html body .pb-road span, html body .pb-signal span, html body .ksa-tile, html body .ksa-launcher .ksa-tile, html body .ksa-head .ksa-tile, html body .ksa-avatar, html body .ks-foot-social a, html body .ofp-photo figcaption .of-ico, html body .ksa-card-head .ks-icon-tile { background: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; }
html body .ksa-head .ksa-tile::before, html body .ksa-head .ksa-tile::after, html body .ksa-tile::after, html body .ofo-ico i { display: none !important; content: none !important; }
html body .ks-icon-tile svg, html body .of-ico svg, html body .ofo-ico svg, html body .oc-ico svg, html body .ofm-ico svg, html body .kv-ico svg, html body .ofi-fi svg, html body .pb-road span svg, html body .pb-signal span svg { color: var(--ks-blue); }
html body .ks-ink .ks-icon-tile svg, html body .dark .ks-icon-tile svg, html body .stage-dark .ks-icon-tile svg, html body .ks-card--ink .ks-icon-tile svg, html body .stage--ondark .ks-icon-tile svg { color: #8DB8FF; }
html body .ks-icon-tile--gold svg, html body .stage--gold .ks-icon-tile svg { color: var(--gold-deep); }
html body .of-done-ico svg { color: var(--success); }
html body .pb-signal span svg { color: #C2410C; }
html body .ks-foot-social a { color: rgba(236,241,255,.8) !important; }
html body .ks-mega-link .ks-icon-tile { width: 24px !important; height: 24px !important; }
html.mo-on body .ks-icon-tile, html.mo-on body .ks-ink .ks-icon-tile, html.mo-on body .ks-icon-tile--gold, html body .ks-nav .ks-mega-link .ks-icon-tile, html body a:hover .ks-icon-tile, html body button:hover .ks-icon-tile, html body .ks-card:hover .ks-icon-tile, html body .stage:hover .ks-icon-tile { background: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; }
html body .ks-nav .ks-nav-link.is-active::before { display: none !important; content: none !important; }
html body .ks-nav .ks-nav-link.is-active { padding-left: 10px !important; }
html body .ofr-app, html body .ofr-card-ico, html body .ofm-ico, html body .kv-ico { background: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; color: var(--ks-blue) !important; }
html body .ofr-app svg, html body .ofr-card-ico svg { color: var(--ks-blue) !important; stroke: currentColor; }
html body .ofr-app { width: auto !important; height: auto !important; padding: 0 !important; }
html body .ofr-app svg { width: 40px !important; height: 40px !important; }
html body .ofr-app { display: none !important; }
html body .ofr-title { margin-top: 14px !important; }
html body .ks-bg-subtle, html.mo-on body .ks-bg-subtle, html body section.ks-section.ofr-sec, html body section.ks-section.ofo-sec, html body section.ks-section.ofp-sec, html body .of-top, html body body[data-page="offer"] .of-top, html body .ofs-stage, html body .of-problem, html body .ofh-sec, html body .of-faqsec { background: #fff !important; background-image: none !important; }
.ks-nav-item.is-open .ks-mega { opacity: 1 !important; visibility: visible !important; transform: none !important; pointer-events: auto !important; }
.ks-nav-item.is-open > .ks-nav-link svg { transform: rotate(180deg); }
.ks-mega-foot { display: none !important; }
.ks-mobile-group-h { display: block; padding: 12px 0 6px; font-weight: 600; font-size: 13px; color: var(--fg3); }
html body .ks-icon-tile svg, html body .ks-icon-tile--gold svg, html body .ks-icon-tile--ink svg, html body .stage--gold .ks-icon-tile svg, html body .of-ico svg, html body .ofo-ico svg, html body .oc-ico svg, html body .ofm-ico svg, html body .kv-ico svg, html body .ofi-fi svg, html body .pb-road span svg, html body .pb-signal span svg, html body .val .ks-icon-tile svg, html body .ps-ic svg, html body .ps-side a svg, html body .sx-eyebrow svg, html body .of-eyebrow svg, html body .ew-fine svg, html body .ew-trust-row svg, html body .cs-outcomes svg, html body .ih-card em svg, html body .cs-go svg, html body .pb-k svg, html body .ps-chip svg, html body .of-fc-ic svg, html body .ps-kpi svg, html body .ofo-ico i { color: var(--ks-blue) !important; stroke: var(--ks-blue) !important; }
html body :is(.ks-ink, .dark, .stage-dark, .ks-card--ink, .mo-h-night, .mo-h-cinema, .ks-foot, .of-dark) .ks-icon-tile svg, html body :is(.ks-ink, .dark, .stage-dark, .ks-card--ink, .mo-h-night, .mo-h-cinema, .ks-foot, .of-dark) :is(.of-ico, .ofo-ico, .ps-ic) svg, html body .ks-foot-rg h6 svg, html body .jn-dur svg, html body .ks-foot-social a svg { color: #8DB8FF !important; stroke: #8DB8FF !important; }
html body .of-done-ico svg, html body .ofi-ok svg, html body .ofi-a i svg, html body .ofi-file em svg, html body .of-ok svg, html body .ew-ok svg { color: var(--success) !important; stroke: var(--success) !important; }
html body .pb-k[style*="color"], html body .sx-eyebrow[style*="color"], html body .of-eyebrow[style*="color"] { color: var(--ks-blue) !important; }
html body :is(div, article, figure, li, section, span, p, img, video, figure)[class]:not(a):not(button):not([role="button"]):not([data-ks-book]):not([data-ks-ask]):not([data-ps]):not(.ps-chip):not(.ew-chip):not(.ew-tile):not(.ew-radio):not(.ofb-pill):not(.ks-nav-item):not(.ks-mega-link):not(.jn-card):not(.acc-p):not(.sx-cap):not(.ind-row):not(.caps-item):not(.ih-filters *):not(summary):not(.of-faq details):not(.ks-chip):not(.ofi-chip):not(.kt-ring):not(.wall-tile):not(.ksa *):not(.ks-foot *):not(.ks-nav *):hover { translate: 0 0; }
html body :is(.ks-card, .ew-b, .ew-card, .ew-role, .ew-topic, .of-persona, .of-out, .of-probs li, .ofo, .ofp-card, .sx-rung, .sx-station, .ps-kpi, .ps-card, .cs-results div, .cs-steps li, .val, .ks-stat, .sx-lens-vis .sx-chip, .pb-ui, .pb-float, .pb-msg, .ofr-pt, .of-cred > div, .ew-priv > div, .ofo-art, .kv-card, .stage, .lp-prob, .mo-ed, .ks-media, .sx-photo, .ew-client, .cs-quote, .of-report):not(a):not([data-ks-book]):not([data-ks-ask]):hover { translate: 0 0 !important; transform: none !important; box-shadow: none !important; border-color: var(--border) !important; background-color: inherit; }
html body :is(.ks-card, .ew-b, .ew-card, .of-persona, .of-out, .of-probs li, .ofp-card, .sx-rung, .ps-kpi, .ps-card, .val, .kv-card, .stage, .lp-prob, .of-cred > div, .ew-priv > div):not(a):not([data-ks-book]):not([data-ks-ask])::before { opacity: 0 !important; }
html body :is(.ks-card, .ew-b, .ew-card, .of-persona, .of-out, .of-probs li, .ofp-card, .sx-rung, .ps-kpi, .ps-card, .val, .kv-card, .stage, .lp-prob):not(a):not([data-ks-book]):not([data-ks-ask]):hover img, html body :is(.sx-photo, .ks-media, .mo-ed, .ofo-art):hover img { transform: none !important; }
html body :is(.ks-card, .ew-b, .ew-card, .of-persona, .of-out, .of-probs li, .ofp-card, .sx-rung, .ps-kpi, .ps-card, .val, .kv-card, .stage, .lp-prob, .of-cred > div, .ew-priv > div, .sx-photo, .ks-media, .mo-ed):not(a):not([data-ks-book]):not([data-ks-ask]) { cursor: default; }
html body :is(.ks-ink, .dark, .stage-dark, .of-dark) :is(.ks-card, .ofp-card, .sx-rung, .of-out):not(a):hover { border-color: rgba(255,255,255,.1) !important; }
html body .ofp-card.is-tint:hover { background-color: var(--ks-blue-50) !important; }
html body .sx-flow::before, html body .sx-flow::after, html body .sx-station::before,
html body .sx-ladder::before, html body .sx-ladder::after, html body .sx-rung::before,
html body .steps::before, html body .steps::after, html body .step::before,
html body .of-steps::before, html body .of-steps::after,
html body .ofh-line, html body .ofh-fill,
html body .jn::before, html body .jn::after,
html body .pb-arc, html body .ps-line .dot,
html body .ew-rail, html body .cs-side a::after,
html body .tl::before, html body .tl-item::before,
html body .kv-road-l, html body .kv-road-f,
html body .ind-list::before, html body .caps-item { border-left-color: transparent !important; }
html body .sx-flow::before, html body .sx-flow::after, html body .sx-station::before,
html body .sx-ladder::before, html body .sx-ladder::after, html body .sx-rung::before,
html body .steps::before, html body .steps::after, html body .step::before,
html body .of-steps::before, html body .of-steps::after,
html body .ofh-line, html body .ofh-fill,
html body .jn::before, html body .jn::after,
html body .pb-arc, html body .tl::before, html body .tl-item::before,
html body .kv-road-l, html body .kv-road-f, html body .ofw-stages::before { content: none !important; display: none !important; }
html body .sx-flow, html body .sx-ladder, html body .steps, html body .of-steps { padding-top: 0 !important; }
html body .sx-station, html body .step { padding-top: 0 !important; }
html body .sx-rung { min-height: 0 !important; }
html body .ofh-step .ofh-n { box-shadow: none !important; }
html body .sx-steps3::before, html body .sx-steps3::after, html body .sx-steps3 > *::before { content: none !important; display: none !important; }
html body .sx-steps3 { padding-top: 0 !important; } html body .sx-steps3 > * { padding-top: 0 !important; }
html body .sx-chip, html body .sx-photo-cap, html body .sx-stat, html body .sx-caps-tag, html body .sx-caps-idx, html body .caps-frame .tag, html body .caps-idx, html body .ps-floats, html body .ps-float, html body .pb-float, html body .pb-msg, html body .ofp-photo figcaption, html body .ew-prev-note, html body .of-top-tag, html body .mw-tile span, html body .ofs-th span, html body .kn-tile span, html body .mo-hv-cap, html body .sx-band-pts + .sx-band-chip, html body .cs-hero-img .cs-chip, html body .lw-hero-img .lw-chip, html body .ofh-card { display: none !important; }
html body .sx-lens-steps > div { grid-template-columns: 36px minmax(0, 1fr) !important; }
html body .sx-lens-steps > div > div { display: block !important; }
html body .sx-lens-steps b { display: block !important; margin-bottom: 4px; }
html body .sx-lens-steps p { display: block !important; margin: 0 !important; }
html body .ps-card .pb-msg { display: block !important; position: static !important; transform: none !important; }
html body .pb-tile:hover { translate: 0 0 !important; transform: none !important; box-shadow: none !important; background: #fff !important; color: inherit !important; }
html body .pb-tile:hover .pb-ui, html body .pb-tile:hover .pb-float, html body .pb-tile:hover .pb-msg, html body .pb-tile:hover .pb-arc, html body .pb-tile:hover .pb-road div, html body .pb-tile:hover img, html body .pb-tile:hover .pb-kpis div, html body .pb-tile:hover .pb-q, html body .pb-tile:hover .pb-next { transform: none !important; translate: 0 0 !important; filter: none !important; }
html body .pb-tile { transition: border-color .35s ease !important; }
html body .pb-tile::before { transition: opacity .4s ease !important; }
html body :is(.of-persona, .of-out, .of-probs li, .ofo, .lp-prob, .stage, .ew-b, .sx-rung, .oc-card, .ofr-card, .ofo-card, .of-deliv li, .ofp-card, .commit > div, .ind-row:not(a), .step, .acc-p, .kv-card, .ks-card:not(a):not([data-ks-book]):not([data-ks-ask]), .ks-hov:not(a):not(button)):hover,
html body :is(.of-persona, .of-out, .of-probs li, .ofo, .lp-prob, .stage, .ew-b, .sx-rung, .oc-card, .ofr-card, .ofo-card, .of-deliv li, .ofp-card, .commit > div, .step, .acc-p, .kv-card, .ks-card:not(a):not([data-ks-book]):not([data-ks-ask]), .ks-hov:not(a):not(button)):hover * { translate: 0 0 !important; transform: none !important; box-shadow: none !important; border-color: var(--border) !important; background-color: inherit; filter: none !important; }
html body :is(.of-persona, .of-out, .of-probs li, .ofo, .lp-prob, .stage, .ew-b, .sx-rung, .oc-card, .ofr-card, .ofo-card, .of-deliv li, .ofp-card, .ks-card:not(a):not([data-ks-book]):not([data-ks-ask]), .ks-hov:not(a):not(button)):hover::before,
html body :is(.of-persona, .of-out, .of-probs li, .ofo, .lp-prob, .stage, .ew-b, .sx-rung, .oc-card, .ofr-card, .ofo-card, .of-deliv li, .ofp-card, .ks-card:not(a):not([data-ks-book]):not([data-ks-ask]), .ks-hov:not(a):not(button)):hover::after { opacity: 0 !important; }
html body :is(.of-persona, .of-out, .of-probs li, .ofo, .lp-prob, .stage, .ew-b, .sx-rung, .oc-card, .ofr-card, .ofo-card, .of-deliv li, .ofp-card, .ks-card:not(a), .ks-hov:not(a):not(button)) { cursor: default; }
html body :is(.ks-ink, .dark, .stage-dark, .ks-card--ink) :is(.of-persona, .of-out, .of-probs li, .ofo, .oc-card, .ks-card:not(a), .ks-hov:not(a):not(button)):hover { border-color: rgba(255,255,255,.12) !important; }
html body .pb-tile:hover { background: #fff !important; }
html body .pb-tile:hover .pb-ui, html body .pb-tile:hover .pb-float, html body .pb-tile:hover .pb-msg, html body .pb-tile:hover .pb-road div, html body .pb-tile:hover .pb-signal, html body .pb-tile:hover .pb-kpis div, html body .pb-tile:hover .pb-next { background-color: #fff !important; opacity: 1 !important; }
html body .pb-tile:hover .pb-ui-bar { background-color: var(--slate-50) !important; }
html body .pb-tile:hover .pb-signal { background-color: var(--slate-50) !important; }
html body .pb-t2:hover .pb-msg { background-color: #F3EEFF !important; }
html body .pb-tile:hover .pb-ui, html body .pb-tile:hover .pb-float, html body .pb-tile:hover .pb-road div, html body .pb-tile:hover .pb-signal { border-color: rgba(7,16,51,.08) !important; }
html body .pb-t2:hover .pb-msg { border-color: rgb(220,232,255) !important; }
.ks-mega--offers .ks-mega-inner { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 0; align-items: start; }
.ks-mega--offers .ks-mega-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.ks-foot-res-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
.ks-foot-rc--wide { grid-column: 1 / -1 !important; margin-top: 8px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.1); }
.ks-foot-rc--wide h6 { max-width: none; }
.ks-foot-rc--wide ul { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; column-gap: clamp(20px, 2.4vw, 36px) !important; row-gap: 10px !important; }
.ks-foot-rc--wide a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
@media (max-width: 1200px) { .ks-foot-res-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } .ks-foot-rc--wide ul { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 760px) { .ks-foot-res-grid { grid-template-columns: 1fr 1fr !important; } .ks-foot-rc--wide ul { grid-template-columns: 1fr 1fr !important; } .ks-foot-rc--wide a { white-space: normal; } }
@media (max-width: 480px) { .ks-foot-res-grid, .ks-foot-rc--wide ul { grid-template-columns: 1fr !important; } }
.ks-mega--offers .ks-mega-side { grid-column: 1 / -1; margin: 18px 0 0 !important; padding: 20px 0 2px !important; border: 0 !important; border-top: 1px solid var(--border) !important; background: transparent !important; display: block !important; }
.ks-mega--offers .ks-mega-side h6 { margin: 0 0 10px 18px !important; font: var(--fw-semi) 13px/1.3 var(--font-sans) !important; color: var(--fg1) !important; letter-spacing: 0 !important; text-transform: none !important; }
.ks-mega--offers .ks-mega-side h6::after { content: "Engineering engagements around your LMS"; margin-left: 12px; font-weight: 400; color: var(--fg3); }
.ks-mega--offers .ks-mega-side > .ks-mega-link { display: inline-flex !important; vertical-align: top; width: calc(25% - 6px); gap: 16px !important; align-items: flex-start !important; padding: 14px 18px !important; margin: 0 !important; border-radius: var(--r-md) !important; background: transparent !important; border: 0 !important; box-sizing: border-box; }
.ks-mega--offers .ks-mega-side > .ks-mega-link:hover { background: var(--slate-50) !important; }
.ks-mega--offers .ks-mega-side .ks-icon-tile { width: 44px !important; height: 44px !important; flex: none; }
.ks-mega--offers .ks-mega-side .ks-icon-tile svg { width: 21px !important; height: 21px !important; color: var(--ks-blue); }
.ks-mega--offers .ks-mega-side .ks-mega-link > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.ks-mega--offers .ks-mega-side .ks-mega-t { display: block; font: var(--fw-semi) 15px/1.3 var(--font-sans) !important; color: var(--fg1) !important; margin-bottom: 5px; letter-spacing: 0 !important; }
.ks-mega--offers .ks-mega-side .ks-mega-d { display: block; font: var(--fw-reg) 13px/1.5 var(--font-sans) !important; color: var(--fg3) !important; text-wrap: pretty; letter-spacing: 0 !important; }
@media (max-width: 1200px) { .ks-mega--offers .ks-mega-side > .ks-mega-link { width: calc(50% - 4px); } }
/* flat.css */
*, *::before, *::after { box-shadow: none !important; text-shadow: none !important; }
html body *, html body *::before, html body *::after,
html body [class][class][class][class], html body [class][class][class][class]::before, html body [class][class][class][class]::after,
html body [id][id][id][id],
html body :is(.ks-mega, .ks-btn, .ks-btn:hover, .ks-btn:focus-visible, .ksa-launcher, .ksa-launcher:hover, .ksa-launcher.on-dark, .ksa, .ks-nav, .ks-nav > *, .ks-nav-inner, .ks-card, .panel, .of-report, .ofr-photo, .ofp-photo, .ofp-card, .ofh-card, .ofr-card, .ks-mcta, .of-mbar) { box-shadow: none !important; text-shadow: none !important; }
html body :is(img, svg, canvas, picture, video, .ksa-launcher, .ksa, .ks-btn, .ks-card, .panel, .card, .of-report, .ofr-photo, .ofm, .ofo-art img, .ofh-art img, .ofs-person2 img, .sx-photo, .ks-media, .mo-hv-f, .kc-art svg, .ksa-tile .ksa-glyph svg)[class][class][class],
html body :is(img, svg, canvas, picture, video, .ksa-launcher, .ksa, .ks-btn, .ks-card, .panel, .card, .of-report, .ofr-photo, .ofm, .ofo-art img, .ofh-art img, .ofs-person2 img, .sx-photo, .ks-media, .mo-hv-f) { filter: none !important; -webkit-filter: none !important; }
html body :focus-visible { outline: 2px solid var(--ks-blue, #0A5BF0) !important; outline-offset: 2px; }
html body [class][class][class][class][class][class][class][class], html body [class][class][class][class][class][class][class][class]::before, html body [class][class][class][class][class][class][class][class]::after,
html.mo-on body:not([data-page="home"]) .ks-card:not(.mo-index .ks-card):hover { box-shadow: none !important; text-shadow: none !important; }
html body .ofs-person2 img, html body [class][class][class][class][class][class][class][class].ofs-person2 img { filter: grayscale(calc(.82 * (1 - var(--sw, 0)))) brightness(calc(.9 + .1 * var(--sw, 0))) !important; -webkit-filter: grayscale(calc(.82 * (1 - var(--sw, 0)))) brightness(calc(.9 + .1 * var(--sw, 0))) !important; }
/* sections.css */
.sx-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 13px; color: var(--ks-blue); }
.sx-eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, #0A84FF, #7C3AED); }
.sx-eyebrow--dark { color: #8DB8FF; }
.sx-photo { position: relative; overflow: hidden; border-radius: 10px; background: var(--slate-100); }
.sx-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.06); transition: transform 1.6s var(--ease-out); }
.sx-photo.is-in img, .is-in .sx-photo img { transform: scale(1); }
.sx-photo-cap { position: absolute; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border-radius: 10px; background: rgba(255,255,255,.92); color: var(--ink); font-weight: 600; font-size: 13px; box-shadow: 0 10px 30px -14px rgba(7,16,51,.4); }
.sx-photo-cap svg { width: 15px; height: 15px; color: var(--ks-blue); }
.sx-hero { position: relative; background: #fff; padding: clamp(112px, 12vw, 150px) 0 clamp(56px, 7vw, 96px); overflow: hidden; }
.sx-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.sx-hero .crumb, .sx-hero .crumb a { color: var(--fg3); } .sx-hero .crumb .cur, .sx-hero .crumb span { color: var(--fg1); }
.sx-hero h1 { color: var(--ink) !important; font-size: clamp(2.4rem, 1.4rem + 3.2vw, 4.3rem); line-height: 1.02; letter-spacing: -.035em; margin-top: 18px; text-wrap: balance; }
.sx-hero .ks-lead { color: var(--fg2) !important; margin-top: 20px; max-width: 54ch; }
.sx-hero-vis { position: relative; aspect-ratio: 1 / 1; max-height: 620px; }
.sx-hero-vis .sx-photo { position: absolute; box-shadow: 0 40px 80px -36px rgba(7,16,51,.45); opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease-out), transform 1.1s var(--ease-out); }
.sx-hero-vis .p1 { left: 0; top: 6%; width: 62%; height: 70%; }
.sx-hero-vis .p2 { right: 0; bottom: 0; width: 52%; height: 56%; transition-delay: .18s; border: 6px solid #fff; }
.sx-hero-vis .p3 { right: 4%; top: 0; width: 34%; height: 30%; transition-delay: .32s; border: 6px solid #fff; }
.is-in .sx-hero-vis .sx-photo, .sx-hero.is-in .sx-hero-vis .sx-photo { opacity: 1; transform: none; }
.sx-hero-vis .sx-stat { position: absolute; left: 4%; bottom: 4%; z-index: 2; max-width: 210px; padding: 12px 14px; border-radius: 10px; background: var(--ink); color: #fff; box-shadow: 0 20px 50px -20px rgba(7,16,51,.6); opacity: 0; transform: translateY(14px); transition: opacity .8s var(--ease-out) .5s, transform .9s var(--ease-out) .5s; }
.is-in .sx-hero-vis .sx-stat, .sx-hero.is-in .sx-hero-vis .sx-stat { opacity: 1; transform: none; }
.sx-stat b { display: block; font-size: 22px; letter-spacing: -.02em; line-height: 1; } .sx-stat small { display: block; margin-top: 4px; font-size: 12px; line-height: 1.35; color: rgba(220,233,255,.7); }
.sx-hero-strip { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--border); font-size: 13.5px; color: var(--fg2); }
.sx-hero-strip span { display: inline-flex; align-items: center; gap: 7px; } .sx-hero-strip svg { width: 15px; height: 15px; color: var(--ks-blue); }
@media (max-width: 991px) { .sx-hero-grid { grid-template-columns: 1fr; } .sx-hero-vis { max-height: none; aspect-ratio: 5 / 4; } }
.sx-outcomes { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: stretch; }
.sx-outcomes .sx-photo { min-height: 520px; }
.sx-ledger { display: grid; align-content: center; }
.sx-ledger-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) 120px; gap: 20px; align-items: center; padding: 26px 0; border-top: 1px solid var(--border); }
.sx-ledger-row:last-child { border-bottom: 1px solid var(--border); }
.sx-ledger-n { font-size: 13px; font-weight: 600; color: var(--ks-blue); }
.sx-ledger-row h3 { margin: 0; font-size: clamp(1.25rem, 1rem + .9vw, 1.7rem); letter-spacing: -.024em; color: var(--ink); }
.sx-ledger-row p { margin: 6px 0 0; font-size: 15px; line-height: 1.55; color: var(--fg2); }
.sx-ledger-k { text-align: right; } .sx-ledger-k b { display: block; font-size: 26px; letter-spacing: -.03em; color: var(--ink); } .sx-ledger-k small { display: block; font-size: 12.5px; color: var(--fg3); margin-top: 2px; }
.sx-ledger-row .sx-bar { grid-column: 2 / -1; height: 3px; border-radius: 2px; background: var(--slate-150); overflow: hidden; margin-top: -8px; }
.sx-ledger-row .sx-bar i { display: block; height: 100%; width: var(--w, 60%); background: linear-gradient(90deg, #0A5BF0, #7C3AED 70%, #FF9A76); transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease-out) .2s; }
.sx-ledger-row.is-in .sx-bar i { transform: scaleX(1); }
@media (max-width: 991px) { .sx-outcomes { grid-template-columns: 1fr; } .sx-outcomes .sx-photo { min-height: 320px; aspect-ratio: 16 / 10; } .sx-ledger-row { grid-template-columns: 48px minmax(0, 1fr); } .sx-ledger-k { grid-column: 2; text-align: left; margin-top: 8px; } }
.sx-caps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.sx-caps-list { display: grid; }
.sx-cap { display: grid; grid-template-columns: 44px minmax(0, 1fr) 24px; gap: 16px; align-items: start; padding: 22px 12px 22px 0; border-top: 1px solid var(--border); cursor: pointer; transition: padding .35s var(--ease-out), background .35s var(--ease-out); border-radius: 0 10px 10px 0; }
.sx-cap:last-child { border-bottom: 1px solid var(--border); }
.sx-cap small { font-size: 13px; font-weight: 600; color: var(--slate-400); padding-top: 4px; transition: color .3s; }
.sx-cap h3 { margin: 0; font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); letter-spacing: -.02em; color: var(--ink); }
.sx-cap p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--fg2); max-height: 0; opacity: 0; overflow: hidden; transition: max-height .5s var(--ease-out), opacity .4s var(--ease-out), margin .4s var(--ease-out); }
.sx-cap svg { width: 18px; height: 18px; color: var(--slate-400); margin-top: 4px; transition: transform .35s var(--ease-out), color .3s; }
.sx-cap.is-on { padding-left: 14px; background: linear-gradient(90deg, var(--slate-50), transparent); }
.sx-cap.is-on small { color: var(--ks-blue); } .sx-cap.is-on p { max-height: 120px; opacity: 1; } .sx-cap.is-on svg { transform: translateX(4px); color: var(--ks-blue); }
.sx-caps-vis { position: sticky; top: 110px; }
.sx-caps-frame { position: relative; aspect-ratio: 5 / 4; border-radius: 10px; overflow: hidden; background: var(--slate-100); box-shadow: 0 40px 80px -36px rgba(7,16,51,.4); }
.sx-caps-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity .7s var(--ease-out), transform 1.4s var(--ease-out); }
.sx-caps-frame img.is-on { opacity: 1; transform: scale(1); }
.sx-caps-tag { position: absolute; left: 18px; bottom: 18px; display: inline-flex; gap: 8px; align-items: center; padding: 9px 14px; border-radius: 10px; background: rgba(255,255,255,.92); color: var(--ink); font-weight: 600; font-size: 13px; box-shadow: 0 8px 24px -12px rgba(7,16,51,.35); }
.sx-caps-tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--ks-blue); }
.sx-caps-idx { position: absolute; right: 18px; top: 18px; display: flex; gap: 6px; } .sx-caps-idx i { width: 18px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.5); transition: background .3s, width .3s; } .sx-caps-idx i.is-on { background: #fff; width: 30px; }
@media (max-width: 991px) { .sx-caps { grid-template-columns: 1fr; } .sx-caps-vis { position: static; order: -1; } .sx-cap p { max-height: none; opacity: 1; } .sx-caps-frame { aspect-ratio: 16 / 10; } }
.sx-band { position: relative; min-height: min(78vh, 720px); display: flex; align-items: flex-end; color: #fff; overflow: hidden; border-radius: inherit; }
.sx-band img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; transform: translateY(calc(var(--vp, .5) * -40px + 20px)) scale(1.08); will-change: transform; }
.sx-band::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(6,11,31,.35) 0%, rgba(6,11,31,.62) 50%, rgba(6,11,31,.92) 100%); }
.sx-band-in { position: relative; z-index: 2; width: 100%; padding-block: clamp(40px, 6vw, 72px); padding-inline: var(--gutter); }
.sx-band h2 { color: #fff !important; font-size: clamp(2rem, 1.3rem + 2.4vw, 3.4rem); letter-spacing: -.03em; max-width: 20ch; margin: 14px 0 0; text-wrap: balance; }
.sx-band p { color: rgba(236,241,255,.8) !important; max-width: 56ch; margin: 16px 0 0; font-size: 17px; line-height: 1.55; }
.sx-band-pts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 34px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.18); }
.sx-band-pts div b { display: block; font-size: 15.5px; color: #fff; } .sx-band-pts div span { display: block; margin-top: 4px; font-size: 14px; line-height: 1.5; color: rgba(236,241,255,.72); }
@media (max-width: 760px) { .sx-band-pts { grid-template-columns: 1fr; } }
.sx-ladder { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.sx-ladder::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 2px; background: var(--slate-150); }
.sx-ladder::after { content: ""; position: absolute; left: 0; top: 10px; height: 2px; width: calc(100% * clamp(0, calc((var(--vp, 0) - .2) / .55), 1)); background: linear-gradient(90deg, #0033EE, #0A84FF 60%, #7C3AED); }
.sx-rung { position: relative; display: flex; flex-direction: column; justify-content: flex-start; padding: 20px 18px 22px; border-radius: 10px; background: #fff; border: 1px solid var(--border); min-height: 180px; transition: border-color .35s, box-shadow .45s var(--ease-out), translate .45s var(--ease-out); cursor: default; }
.sx-rung::before { content: ""; position: absolute; left: 18px; top: -26px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--ks-blue); }
.sx-rung small { font-size: 13px; font-weight: 600; color: var(--ks-blue); } .sx-rung h3 { margin: 8px 0 6px; font-size: 17px; letter-spacing: -.015em; color: var(--ink); } .sx-rung p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--fg2); }
.sx-rung.is-top { background: var(--ink); border-color: var(--ink); } .sx-rung.is-top h3 { color: #fff; } .sx-rung.is-top p { color: rgba(220,233,255,.75); } .sx-rung.is-top small { color: #8DB8FF; }
@media (max-width: 991px) { .sx-ladder { grid-template-columns: 1fr; padding-top: 0; } .sx-ladder::before, .sx-ladder::after { display: none; } .sx-rung { min-height: 0; } .sx-rung::before { display: none; } }
.sx-flow { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; padding-top: 34px; }
.sx-flow::before { content: ""; position: absolute; left: 6%; right: 6%; top: 14px; height: 2px; background: var(--slate-150); }
.sx-flow::after { content: ""; position: absolute; left: 6%; top: 13px; height: 4px; width: 14%; border-radius: 2px; background: linear-gradient(90deg, transparent, #0A84FF 40%, #7C3AED 75%, transparent); animation: sxPulse 3.6s var(--ease-in-out) infinite; }
@keyframes sxPulse { 0% { left: 6%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: 80%; opacity: 0; } }
.sx-station { position: relative; padding: 0 0 4px; }
.sx-station::before { content: ""; position: absolute; left: 50%; top: -26px; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid var(--ks-blue); transform: translateX(-50%); }
.sx-station .sx-photo { aspect-ratio: 4 / 3; }
.sx-station small { display: block; margin-top: 16px; font-size: 13px; font-weight: 600; color: var(--ks-blue); } .sx-station h3 { margin: 6px 0 6px; font-size: 18px; letter-spacing: -.015em; color: var(--ink); } .sx-station p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--fg2); }
@media (max-width: 991px) { .sx-flow { grid-template-columns: 1fr 1fr; } .sx-flow::before, .sx-flow::after { display: none; } .sx-station::before { display: none; } }
@media (max-width: 560px) { .sx-flow { grid-template-columns: 1fr; } }
.sx-lens { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.sx-lens-vis { position: relative; aspect-ratio: 16 / 11; }
.sx-lens-vis .sx-photo { position: absolute; inset: 0; }
.sx-chip { position: absolute; padding: 12px 14px; border-radius: 10px; background: rgba(255,255,255,.96); border: 1px solid var(--border); box-shadow: 0 20px 50px -22px rgba(7,16,51,.45); min-width: 150px; opacity: 0; transform: translateY(14px); transition: opacity .8s var(--ease-out), transform .9s var(--ease-out); }
.is-in .sx-chip { opacity: 1; transform: translateY(calc(var(--vp, .5) * -14px + 7px)); }
.sx-chip small { display: block; font-size: 12px; color: var(--fg3); } .sx-chip b { display: block; font-size: 20px; letter-spacing: -.02em; color: var(--ink); margin-top: 2px; } .sx-chip em { display: block; font-style: normal; font-size: 12.5px; color: var(--success); margin-top: 2px; }
.sx-chip .sx-mini { display: flex; gap: 3px; align-items: flex-end; height: 26px; margin-top: 8px; } .sx-chip .sx-mini i { flex: 1; border-radius: 2px 2px 0 0; background: var(--ks-blue-100); } .sx-chip .sx-mini i.hi { background: var(--ks-blue); }
.sx-c1 { left: -6%; top: 10%; transition-delay: .1s; } .sx-c2 { right: -4%; top: 34%; transition-delay: .25s; } .sx-c3 { left: 14%; bottom: -8%; transition-delay: .4s; }
.sx-lens-steps { display: grid; gap: 14px; margin-top: 26px; }
.sx-lens-steps > div { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; align-items: start; }
  .sx-lens-steps > div > div { display: block; min-width: 0; }
.sx-lens-steps span { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--ks-blue-50); border: 1px solid var(--ks-blue-100); color: var(--ks-blue); font-weight: 600; font-size: 13px; }
.sx-lens-steps b { display: block; font-size: 16px; color: var(--ink); letter-spacing: -.01em; } .sx-lens-steps p { display: block; margin: 4px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--fg2); }
@media (max-width: 991px) { .sx-lens { grid-template-columns: 1fr; } .sx-lens-vis { margin-top: 28px; } .sx-c1 { left: 4%; } .sx-c2 { right: 4%; } .sx-c3 { left: 8%; bottom: 4%; } }
@media (prefers-reduced-motion: reduce) { .sx-flow::after { animation: none; } .sx-band img { transform: none; } }
.sx-hero-photo { position: relative; aspect-ratio: 4 / 5; max-height: 640px; border-radius: 10px; overflow: hidden; background: var(--slate-100); box-shadow: 0 40px 80px -36px rgba(7,16,51,.45); }
.sx-hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.8s var(--ease-out); }
.is-in .sx-hero-photo img { transform: none; }
.sx-hero-photo .sx-rail { position: absolute; right: 16px; top: 16px; bottom: 16px; width: 150px; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; }
.sx-rail div { padding: 12px 14px; border-radius: 10px; background: rgba(255,255,255,.94); box-shadow: 0 12px 30px -16px rgba(7,16,51,.45); opacity: 0; transform: translateX(16px); transition: opacity .7s var(--ease-out), transform .8s var(--ease-out); }
.is-in .sx-rail div { opacity: 1; transform: none; } .is-in .sx-rail div:nth-child(2) { transition-delay: .15s; } .is-in .sx-rail div:nth-child(3) { transition-delay: .3s; }
.sx-rail b { display: block; font-size: 22px; letter-spacing: -.02em; color: var(--ink); line-height: 1; } .sx-rail small { display: block; margin-top: 4px; font-size: 12px; line-height: 1.3; color: var(--fg2); }
@media (max-width: 991px) { .sx-hero-photo { aspect-ratio: 16 / 11; max-height: none; } }
.sx-frictions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sx-friction { position: relative; aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; color: #fff; display: flex; align-items: flex-end; }
.sx-friction img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.6); transform: scale(1.06); transition: transform 1.4s var(--ease-out), filter .8s; }
.sx-friction::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,11,31,.05), rgba(6,11,31,.45) 50%, rgba(6,11,31,.92)); }
.sx-friction > div { position: relative; padding: 22px; }
.sx-friction small { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: #FFB597; } .sx-friction small::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #FF9A76; }
.sx-friction h3 { margin: 10px 0 6px; font-size: clamp(1.2rem, 1rem + .7vw, 1.5rem); letter-spacing: -.02em; color: #fff; } .sx-friction p { margin: 0; font-size: 14px; line-height: 1.5; color: rgba(236,241,255,.78); }
@media (hover: hover) {  }
@media (max-width: 860px) { .sx-frictions { grid-template-columns: 1fr; } .sx-friction { aspect-ratio: 16 / 9; } }
.sx-map { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.sx-map .sx-photo { aspect-ratio: 4 / 5; max-height: 600px; }
.sx-map-rows { display: grid; }
.sx-map-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 22px; gap: 16px; align-items: center; padding: 22px 0; border-top: 1px solid var(--border); color: inherit; transition: padding .35s var(--ease-out); }
.sx-map-row:last-child { border-bottom: 1px solid var(--border); }
.sx-map-row small { font-size: 13px; font-weight: 600; color: var(--slate-400); } .sx-map-row h3 { margin: 0; font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem); letter-spacing: -.02em; color: var(--ink); } .sx-map-row p { margin: 4px 0 0; font-size: 14.5px; color: var(--fg2); }
.sx-map-row svg { width: 18px; height: 18px; color: var(--slate-400); transition: transform .35s var(--ease-out), color .3s; }
.sx-map-row:hover { color: inherit; padding-left: 12px; } .sx-map-row:hover svg { transform: translate(3px, -3px); color: var(--ks-blue); } .sx-map-row:hover small { color: var(--ks-blue); }
@media (max-width: 991px) { .sx-map { grid-template-columns: 1fr; } .sx-map .sx-photo { aspect-ratio: 16 / 10; max-height: none; } }
.sx-story { position: relative; border-radius: 10px; overflow: hidden; background: var(--ink); color: #fff; }
.sx-story img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; opacity: .28; filter: saturate(.7); transform: translateY(calc(var(--vp, .5) * -30px + 15px)) scale(1.06); }
.sx-story-in { position: relative; z-index: 1; padding: clamp(36px, 5vw, 64px) clamp(24px, 4vw, 56px); }
.sx-story-in .ks-h2 { color: #fff !important; max-width: 22ch; margin-top: 14px; }
.sx-steps3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 34px; position: relative; }
.sx-steps3::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 2px; background: rgba(255,255,255,.14); }
.sx-steps3::after { content: ""; position: absolute; left: 0; top: 8px; height: 2px; width: calc(100% * clamp(0, calc((var(--vp, 0) - .25) / .5), 1)); background: linear-gradient(90deg, #FF9A76, #0A84FF 50%, #34D399); }
.sx-steps3 > div { position: relative; padding: 30px 26px 0 0; }
.sx-steps3 > div::before { content: ""; position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); border: 2px solid currentColor; }
.sx-steps3 small { display: block; font-size: 13px; font-weight: 600; } .sx-steps3 h3 { margin: 8px 0 8px; font-size: 20px; letter-spacing: -.02em; color: #fff; } .sx-steps3 p { margin: 0; font-size: 15px; line-height: 1.55; color: rgba(236,241,255,.78); }
.sx-steps3 .c1 { color: #FFB597; } .sx-steps3 .c2 { color: #8DB8FF; } .sx-steps3 .c3 { color: #6EE7B7; }
@media (max-width: 860px) { .sx-steps3 { grid-template-columns: 1fr; gap: 22px; } .sx-steps3::before, .sx-steps3::after { display: none; } .sx-steps3 > div { padding: 0 0 0 30px; } .sx-steps3 > div::before { top: 2px; } }
.sx-loop { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px) minmax(0, 1fr); gap: 22px; align-items: center; }
.sx-loop-photo { aspect-ratio: 1; border-radius: 50%; overflow: hidden; position: relative; box-shadow: 0 40px 80px -36px rgba(7,16,51,.45); }
.sx-loop-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sx-loop-photo::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 2px dashed rgba(10,91,240,.35); animation: sxSpin 40s linear infinite; }
@keyframes sxSpin { to { transform: rotate(360deg); } }
.sx-loop-col { display: grid; gap: 14px; }
.sx-loop-step { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; padding: 18px; border-radius: 10px; background: #fff; border: 1px solid var(--border); }
.sx-loop-step span { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--ks-blue-50); border: 1px solid var(--ks-blue-100); color: var(--ks-blue); font-weight: 600; font-size: 13px; }
.sx-loop-step b { display: block; font-size: 16.5px; letter-spacing: -.015em; color: var(--ink); } .sx-loop-step p { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--fg2); }
.sx-loop-col--r .sx-loop-step { grid-template-columns: minmax(0, 1fr) 40px; text-align: right; } .sx-loop-col--r .sx-loop-step span { order: 2; }
@media (max-width: 991px) { .sx-loop { grid-template-columns: 1fr; } .sx-loop-photo { max-width: 320px; margin: 0 auto; } .sx-loop-col--r .sx-loop-step { grid-template-columns: 40px minmax(0, 1fr); text-align: left; } .sx-loop-col--r .sx-loop-step span { order: 0; } }
.sx-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sx-pillar { position: relative; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; color: #fff; display: flex; align-items: flex-end; }
.sx-pillar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.2s var(--ease-out); }
.sx-pillar::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,11,31,.1), rgba(6,11,31,.9)); transition: background .5s; }
.sx-pillar > div { position: relative; padding: 20px; width: 100%; }
.sx-pillar small { font-size: 12.5px; font-weight: 600; color: #8DB8FF; } .sx-pillar h3 { margin: 6px 0 0; font-size: 19px; letter-spacing: -.02em; color: #fff; }
.sx-pillar p { margin: 0; font-size: 14px; line-height: 1.5; color: rgba(236,241,255,.8); max-height: 0; opacity: 0; overflow: hidden; transition: max-height .5s var(--ease-out), opacity .4s var(--ease-out), margin .4s; }
@media (hover: hover) { .sx-pillar:hover img { transform: scale(1.1); } .sx-pillar:hover p { max-height: 90px; opacity: 1; margin-top: 8px; } }
@media (max-width: 991px) { .sx-pillars { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .sx-pillars { grid-template-columns: 1fr; } .sx-pillar p { max-height: none; opacity: 1; margin-top: 8px; } }
.sx-reasons { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.sx-reason { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; padding: 24px 0; border-top: 1px solid var(--border); }
.sx-reason:last-child { border-bottom: 1px solid var(--border); }
.sx-reason b.n { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); font-weight: 600; letter-spacing: -.03em; line-height: 1; background: linear-gradient(135deg, #0A5BF0, #7C3AED); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sx-reason h3 { margin: 0; font-size: 19px; letter-spacing: -.02em; color: var(--ink); } .sx-reason p { margin: 6px 0 0; font-size: 15px; line-height: 1.55; color: var(--fg2); }
.sx-reasons .sx-photo { aspect-ratio: 4 / 5; }
@media (max-width: 991px) { .sx-reasons { grid-template-columns: 1fr; } .sx-reasons .sx-photo { aspect-ratio: 16 / 10; order: -1; } }
.sx-seq { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 1fr); gap: 14px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.sx-seq::-webkit-scrollbar { display: none; }
.sx-phase { scroll-snap-align: start; display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; background: #fff; border: 1px solid var(--border); }
.sx-phase .sx-photo { aspect-ratio: 16 / 9; border-radius: 0; }
.sx-phase > div { padding: 20px 22px 22px; } .sx-phase small { font-size: 13px; font-weight: 600; color: var(--ks-blue); } .sx-phase h3 { margin: 8px 0 6px; font-size: 18px; letter-spacing: -.015em; color: var(--ink); } .sx-phase p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--fg2); }
.sx-phase ul { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; } .sx-phase li { display: flex; gap: 8px; align-items: center; font-size: 13.5px; color: var(--fg1); } .sx-phase li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: linear-gradient(135deg, #0A84FF, #7C3AED); flex: none; }
.sx-hero .crumb { margin-bottom: 28px !important; }
@media (hover: none) { .sx-pillar p { max-height: none; opacity: 1; margin-top: 8px; } }
.sx-seq { scrollbar-width: thin; scrollbar-color: var(--slate-300) transparent; padding-bottom: 14px; -webkit-mask: linear-gradient(90deg, #000 0, #000 calc(100% - 56px), transparent); mask: linear-gradient(90deg, #000 0, #000 calc(100% - 56px), transparent); }
.sx-seq::-webkit-scrollbar { display: block; height: 4px; } .sx-seq::-webkit-scrollbar-thumb { background: var(--slate-300); border-radius: 2px; }
.pb-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 32px; margin-bottom: 36px; }
.pb-head .ks-h2 { margin-top: 14px; max-width: 22ch; text-wrap: balance; }
.pb-head p { margin: 0; max-width: 46ch; font-size: 15.5px; line-height: 1.55; color: var(--fg2); }
.pb { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: minmax(300px, auto); gap: 16px; }
.pb-tile { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 16px; border: 1px solid var(--border); background: #fff; color: inherit; text-decoration: none; isolation: isolate; transition: translate .5s cubic-bezier(.2,.7,.2,1), border-color .35s ease; }
.pb-tile::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, #0A84FF, #7C3AED 55%, #FF9A76); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .4s ease; pointer-events: none; z-index: 5; }
.pb-tile:hover::before { opacity: 1; }
.pb-copy { position: relative; z-index: 3; padding: 28px 28px 0; }
.pb-copy .pb-k { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ks-blue); } .pb-copy .pb-k svg { width: 15px; height: 15px; }
.pb-copy h3 { margin: 12px 0 0; font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem); line-height: 1.15; letter-spacing: -.028em; color: var(--ink); max-width: 16ch; text-wrap: balance; }
.pb-copy p { margin: 12px 0 0; font-size: 15px; line-height: 1.55; color: var(--fg2); max-width: 42ch; }
.pb-go { position: absolute; z-index: 4; right: 18px; top: 18px; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--ks-blue-50); color: var(--ks-blue); transition: background .3s, color .3s, transform .4s var(--ease-out); }
.pb-go svg { width: 16px; height: 16px; }
.pb-vis { position: relative; flex: 1; min-height: 240px; margin-top: 22px; overflow: hidden; }
.pb-wash { position: absolute; inset: 0; z-index: 0; }
.pb-ui { position: absolute; z-index: 2; background: #fff; border-radius: 14px; border: 1px solid rgba(7,16,51,.08); overflow: hidden; transition: transform .7s var(--ease-out); will-change: transform; }
.pb-ui-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--slate-150); background: var(--slate-50); }
.pb-ui-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--slate-200); } .pb-ui-bar span { margin-left: 8px; font-size: 12px; font-weight: 600; color: var(--fg2); }
.pb-ui-bar em { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: var(--success-bg); color: var(--success); }
.pb-t1 { grid-column: 1 / 9; grid-row: 1; }
.pb-t1 .pb-wash { background: radial-gradient(80% 90% at 10% 100%, rgba(10,132,255,.55), rgba(10,132,255,0) 60%), radial-gradient(70% 80% at 85% 100%, rgba(255,154,118,.5), rgba(255,154,118,0) 62%), linear-gradient(180deg, rgba(124,58,237,0) 0%, rgba(124,58,237,.22) 70%, rgba(10,91,240,.3) 100%); }
.pb-t1 .pb-vis { min-height: 400px; }
.pb-t1 .pb-ui { left: 28px; right: 28px; top: 34px; bottom: auto; display: grid; grid-template-rows: auto auto; }
.pb-t1 .pb-ui-body { padding-bottom: 20px; }
.pb-t1 .pb-ui-body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 18px; padding: 16px 16px 20px; }
.pb-list { display: grid; gap: 8px; align-content: start; }
.pb-list-h { font-size: 11px; font-weight: 600; color: var(--fg3); margin-bottom: 2px; }
.pb-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) 46px; gap: 10px; align-items: center; }
.pb-av { width: 26px; height: 26px; border-radius: 50%; background: var(--av, #0A84FF); color: #fff; display: grid; place-items: center; font-size: 10px; font-weight: 700; }
.pb-row b { display: block; font-size: 12px; color: var(--ink); } .pb-row i { display: block; height: 4px; border-radius: 2px; background: var(--slate-150); margin-top: 4px; overflow: hidden; }
.pb-row i::after { content: ""; display: block; height: 100%; width: var(--w, 50%); background: linear-gradient(90deg, #0A5BF0, #7C3AED); transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease-out); }
.ks-reveal.is-in .pb-row i::after { transform: scaleX(1); }
.pb-row small { font-size: 11px; font-weight: 600; color: var(--fg2); text-align: right; }
.pb-chart { display: grid; grid-template-rows: auto 1fr; }
.pb-chart-h { display: flex; justify-content: space-between; font-size: 11px; font-weight: 600; color: var(--fg3); }
.pb-chart-h b { color: var(--ink); font-size: 13px; }
.pb-bars { display: flex; align-items: flex-end; gap: 5px; height: 110px; margin-top: 10px; }
.pb-bars i { flex: 1; border-radius: 3px 3px 0 0; background: rgba(10,91,240,.22); height: var(--h); transform: scaleY(0); transform-origin: bottom; transition: transform .9s var(--ease-out); transition-delay: calc(var(--n, 0) * 50ms); }
.pb-bars i.hi { background: linear-gradient(180deg, #7C3AED, #0A5BF0); }
.ks-reveal.is-in .pb-bars i { transform: scaleY(1); }
.pb-float { position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: #fff; border: 1px solid rgba(7,16,51,.08); transition: transform .8s var(--ease-out); }
.pb-float b { display: block; font-size: 16px; letter-spacing: -.02em; color: var(--ink); } .pb-float small { display: block; font-size: 11px; color: var(--fg3); }
.pb-float .pb-ring { width: 34px; height: 34px; border-radius: 50%; background: conic-gradient(#0A5BF0 var(--p, 86%), var(--slate-150) 0); display: grid; place-items: center; } .pb-float .pb-ring::after { content: ""; width: 24px; height: 24px; border-radius: 50%; background: #fff; }
.pb-t1 .pb-float { right: 48px; bottom: 22px; }
.pb-t2 { grid-column: 9 / 13; grid-row: 1 / 3; }
.pb-t2 .pb-wash { background: radial-gradient(90% 60% at 50% 100%, rgba(124,58,237,.62), rgba(124,58,237,0) 70%), radial-gradient(70% 50% at 100% 70%, rgba(255,154,118,.55), rgba(255,154,118,0) 65%), linear-gradient(180deg, rgba(255,154,118,0) 0%, rgba(255,154,118,.16) 45%, rgba(124,58,237,.2) 100%); }
.pb-t2 .pb-vis { min-height: 420px; }
.pb-t2 .pb-ui { left: 22px; right: 22px; top: 30px; padding: 16px; display: grid; gap: 14px; }
.pb-meter small { display: block; font-size: 11px; font-weight: 600; color: var(--fg3); } .pb-meter b { display: block; font-size: 22px; letter-spacing: -.02em; color: var(--ink); margin-top: 2px; }
.pb-meter i { display: block; height: 8px; border-radius: 4px; margin-top: 10px; background: linear-gradient(90deg, #0A5BF0 0%, #7C3AED 55%, #FF9A76 100%); -webkit-mask: linear-gradient(#000 0 0) left / var(--m, 68%) 100% no-repeat, linear-gradient(rgba(0,0,0,.18) 0 0); mask: linear-gradient(#000 0 0) left / var(--m, 68%) 100% no-repeat, linear-gradient(rgba(0,0,0,.18) 0 0); }
.pb-signal { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--slate-50); border: 1px solid var(--border); }
.pb-signal span { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: #FFF1EA; color: #C2410C; } .pb-signal span svg { width: 16px; height: 16px; }
.pb-signal b { display: block; font-size: 12.5px; color: var(--ink); } .pb-signal small { display: block; font-size: 11px; color: var(--fg3); margin-top: 1px; }
.pb-t2 .pb-bars { height: 90px; } .pb-t2 .pb-bars i { background: rgba(124,58,237,.22); } .pb-t2 .pb-bars i.hi { background: linear-gradient(180deg, #FF9A76, #7C3AED); }
.pb-msg { position: absolute; z-index: 3; left: 22px; right: 22px; bottom: 26px; padding: 12px 14px; border-radius: 12px 12px 12px 4px; background: #fff; border: 1px solid rgba(7,16,51,.08); font-size: 12.5px; line-height: 1.45; color: var(--ink); transition: transform .8s var(--ease-out); }
.pb-msg small { display: block; font-size: 11px; font-weight: 600; color: #7C3AED; margin-bottom: 4px; }
.pb-t3 { grid-column: 1 / 9; grid-row: 2; }
.pb-t3 .pb-vis { min-height: 220px; }
.pb-t3 .pb-wash { background: radial-gradient(60% 80% at 100% 100%, rgba(255,154,118,.22), transparent 70%), radial-gradient(50% 70% at 70% 100%, rgba(124,58,237,.16), transparent 70%); }
.pb-arc { position: absolute; z-index: 1; right: -14%; bottom: -46%; width: 48%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(124,58,237,.9) 1px, transparent 1.6px) 0 0 / 9px 9px, radial-gradient(circle, rgba(255,154,118,.9) 1px, transparent 1.6px) 4px 5px / 13px 13px; -webkit-mask: radial-gradient(circle at 50% 50%, transparent 58%, #000 60%, #000 78%, transparent 80%), radial-gradient(circle at 50% 50%, #000 0, #000 100%); -webkit-mask-composite: source-in; mask: radial-gradient(circle at 50% 50%, transparent 58%, #000 60%, #000 78%, transparent 80%); opacity: .9; transform: rotate(0deg); transition: transform 1.6s var(--ease-out); }
.pb-arc::after { content: ""; position: absolute; inset: 17%; border-radius: 50%; border: 1.5px solid rgba(124,58,237,.45); -webkit-mask: linear-gradient(90deg, transparent 10%, #000 40%, #000 60%, transparent 90%); mask: linear-gradient(90deg, transparent 10%, #000 40%, #000 60%, transparent 90%); }
.pb-road { position: absolute; z-index: 2; left: 28px; bottom: 26px; display: grid; gap: 8px; }
.pb-road div { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 12px 9px 9px; border-radius: 10px; background: #fff; border: 1px solid rgba(7,16,51,.08); min-width: 300px; transform: translateX(-12px); opacity: 0; transition: transform .7s var(--ease-out), opacity .6s var(--ease-out); transition-delay: calc(var(--n, 0) * 110ms + .15s); }
.ks-reveal.is-in .pb-road div { transform: none; opacity: 1; }
.pb-road span { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--ks-blue-50); color: var(--ks-blue); } .pb-road span svg { width: 15px; height: 15px; }
.pb-road b { font-size: 12.5px; color: var(--ink); } .pb-road em { font-style: normal; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: #F3EEFF; color: #6D28D9; }
.pb-road div:nth-child(1) em { background: var(--success-bg); color: var(--success); }
@media (max-width: 1100px) { .pb-t1 .pb-ui-body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; } .pb-t1 .pb-chart { display: grid; } .pb-t1 .pb-bars { height: auto; min-height: 90px; align-self: stretch; } .pb-t1 .pb-vis { min-height: 440px; } }
@media (max-width: 991px) { .pb { grid-template-columns: 1fr; grid-auto-rows: auto; } .pb-t1, .pb-t2, .pb-t3 { grid-column: 1; grid-row: auto; } .pb-t2 .pb-vis { min-height: 380px; } .pb-t1 .pb-vis { min-height: 440px; } .pb-t1 .pb-ui-body { padding-bottom: 20px; } .pb-t3 .pb-vis { min-height: 260px; } .pb-arc { right: -18%; bottom: -40%; width: 60%; } .pb-road div { min-width: 0; } }
@media (max-width: 560px) { .pb-copy { padding: 22px 20px 0; } .pb-t1 .pb-ui, .pb-t2 .pb-ui, .pb-msg { left: 16px; right: 16px; } .pb-t1 .pb-float { right: 24px; } .pb-road { left: 20px; right: 20px; } }
@media (prefers-reduced-motion: reduce) { .pb-row i::after, .pb-bars i, .pb-road div { transform: none !important; opacity: 1 !important; transition: none; } }
.pb-wash::before, .pb-wash::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.pb-t1 .pb-wash { background: #071033; }
.pb-t1 .pb-wash::before { background: radial-gradient(ellipse at 18% 90%, rgba(10,132,255,.62), rgba(0,51,238,.26) 42%, rgba(0,51,238,0) 70%), radial-gradient(circle at 88% 70%, rgba(124,58,237,.5), rgba(124,58,237,0) 58%), radial-gradient(circle at 60% 110%, rgba(255,154,118,.26), rgba(255,154,118,0) 55%); filter: blur(28px); mix-blend-mode: screen; animation: ifOrbA 26s var(--ease-in-out) infinite alternate; }
.pb-t1 .pb-wash::after { background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'><g fill='none' stroke='%23FFFFFF' stroke-width='1'><path d='M28 .5 55.5 16.2v32.3L28 64.7.5 48.5V16.2z'/><path d='M56 48.7 83.5 64.4v32.3L56 112.8 28.5 97V64.4z' transform='translate(-28 0)'/><path d='M0 48.7 27.5 64.4v32.3L0 112.8-27.5 97V64.4z' transform='translate(28 0)'/></g></svg>") 0 0 / 56px 97px, url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>") 0 0 / 160px 160px; opacity: .14; mix-blend-mode: overlay; -webkit-mask: linear-gradient(180deg, transparent 0, #000 40%); mask: linear-gradient(180deg, transparent 0, #000 40%); }
.pb-t1 .pb-vis::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 72px; z-index: 1; background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,0) 100%); pointer-events: none; }
.pb-t1 .pb-vis::after { content: ""; position: absolute; left: 10%; right: 10%; top: 0; height: 1px; z-index: 1; background: linear-gradient(90deg, transparent, #0033EE 35%, #0A84FF 50%, #FF9A76 64%, transparent) no-repeat; background-size: 30% 100%; animation: ifFlow 7s var(--ease-flow) infinite; opacity: .9; }
.pb-t1 .pb-ui { border-color: rgba(255,255,255,.18); }
.pb-t2 .pb-wash { background: linear-gradient(180deg, #fff 0%, #F4F7FF 55%, #F6F1FF 100%); }
.pb-t2 .pb-wash::before { background: repeating-linear-gradient(-14deg, transparent 0 46px, rgba(10,91,240,.10) 46px 47px); -webkit-mask: linear-gradient(180deg, transparent 0, #000 35%, #000 80%, rgba(0,0,0,.4)); mask: linear-gradient(180deg, transparent 0, #000 35%, #000 80%, rgba(0,0,0,.4)); }
.pb-t2 .pb-wash::after { inset: auto -10% 22% -10%; height: 1px; transform: rotate(-14deg); background: linear-gradient(90deg, transparent, rgba(10,132,255,.9) 45%, rgba(124,58,237,.9) 55%, rgba(255,154,118,.9) 64%, transparent) no-repeat; background-size: 36% 100%; animation: ifFlow 9s var(--ease-flow) infinite; }
.pb-t2 .pb-vis { background: radial-gradient(60% 40% at 100% 100%, rgba(255,154,118,.18), transparent 70%), radial-gradient(50% 40% at 0% 100%, rgba(124,58,237,.14), transparent 70%); }
.pb-t3 .pb-wash { background: #fff; }
.pb-t3 .pb-wash::before { background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'><g fill='none' stroke='%230A5BF0' stroke-width='1'><path d='M28 .5 55.5 16.2v32.3L28 64.7.5 48.5V16.2z'/><path d='M56 48.7 83.5 64.4v32.3L56 112.8 28.5 97V64.4z' transform='translate(-28 0)'/><path d='M0 48.7 27.5 64.4v32.3L0 112.8-27.5 97V64.4z' transform='translate(28 0)'/></g></svg>") 0 0 / 56px 97px; opacity: .09; -webkit-mask: radial-gradient(80% 100% at 85% 100%, #000 0, #000 35%, transparent 75%); mask: radial-gradient(80% 100% at 85% 100%, #000 0, #000 35%, transparent 75%); }
.pb-t3 .pb-wash::after { background: radial-gradient(55% 70% at 100% 100%, rgba(255,154,118,.2), transparent 70%), radial-gradient(45% 60% at 72% 110%, rgba(124,58,237,.14), transparent 70%); }
.pb-t3 .pb-vis::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; z-index: 1; background: linear-gradient(90deg, transparent, #0033EE 35%, #0A84FF 50%, #FF9A76 64%, transparent) no-repeat; background-size: 30% 100%; animation: ifFlow 8s var(--ease-flow) infinite; opacity: .8; }
@media (prefers-reduced-motion: reduce) { .pb-t1 .pb-wash::before, .pb-t1 .pb-vis::after, .pb-t2 .pb-wash::after, .pb-t3 .pb-vis::after { animation: none; } }
@keyframes ifOrbA { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(8%, -6%, 0) scale(1.12); } }
.pb-t1 .pb-vis { min-height: 360px; }
.pb-go, .pb-float { display: none !important; }
.pb-t1 .pb-wash { background: linear-gradient(180deg, #fff 0%, #F4F7FF 40%, #EEF2FF 100%) !important; }
.pb-t1 .pb-wash::before { background: radial-gradient(60% 55% at 12% 100%, rgba(10,132,255,.22), transparent 70%), radial-gradient(50% 50% at 92% 100%, rgba(255,154,118,.2), transparent 70%), radial-gradient(45% 45% at 55% 110%, rgba(124,58,237,.16), transparent 70%); filter: none; mix-blend-mode: normal; animation: ifOrbA 26s var(--ease-in-out) infinite alternate; }
.pb-t1 .pb-wash::after { background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'><g fill='none' stroke='%230A5BF0' stroke-width='1'><path d='M28 .5 55.5 16.2v32.3L28 64.7.5 48.5V16.2z'/><path d='M56 48.7 83.5 64.4v32.3L56 112.8 28.5 97V64.4z' transform='translate(-28 0)'/><path d='M0 48.7 27.5 64.4v32.3L0 112.8-27.5 97V64.4z' transform='translate(28 0)'/></g></svg>") 0 0 / 56px 97px; opacity: .07; mix-blend-mode: normal; -webkit-mask: linear-gradient(180deg, transparent 0, #000 45%); mask: linear-gradient(180deg, transparent 0, #000 45%); }
.pb-t1 .pb-vis::before { display: none; }
.pb-t1 .pb-ui { border-color: rgba(7,16,51,.08); }
.pb-t1 .pb-ui { top: 34px; bottom: -14px !important; display: grid; grid-template-rows: auto 1fr; }
.pb-t1 .pb-ui-body { padding-bottom: 20px !important; align-content: start; }
.pb-t1 .pb-vis { min-height: 380px !important; }
.pb-t2 .pb-ui { top: 30px; bottom: -14px; display: grid; grid-template-rows: auto auto 1fr; gap: 14px; }
.pb-t2 .pb-chart { grid-template-rows: auto 1fr; } .pb-t2 .pb-bars { height: auto; min-height: 90px; align-self: stretch; }
.pb-t2 .pb-msg { bottom: 22px; left: 36px; right: 36px; z-index: 4; }
.pb-t2 .pb-vis { min-height: 480px; }
@media (min-width: 992px) { .pb-t2 .pb-vis { min-height: 0; } }
@media (max-width: 991px) { .pb-t1 .pb-vis { min-height: 380px !important; } .pb-t2 .pb-vis { min-height: 460px; } }
.pb-arc { right: -30% !important; bottom: -60% !important; width: 68% !important; }
@media (max-width: 991px) { .pb-arc { right: -26% !important; bottom: -56% !important; width: 72% !important; } }
.pb-t2 .pb-ui { padding-bottom: 104px !important; }
.pb-t2 .pb-bars { max-height: 120px; }
.pb-t1 .pb-ui-body { grid-template-rows: auto auto; align-content: stretch !important; }
.pb-foot { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 12px; align-self: end; padding-top: 14px; border-top: 1px solid var(--slate-150); }
.pb-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pb-kpis div { padding: 10px 12px; border-radius: 10px; background: var(--slate-50); border: 1px solid var(--border); min-width: 0; }
.pb-kpis small { display: block; font-size: 10.5px; font-weight: 600; color: var(--fg3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pb-kpis b { display: block; font-size: 15px; letter-spacing: -.015em; color: var(--ink); margin-top: 3px; white-space: nowrap; }
.pb-next { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 10px; background: linear-gradient(90deg, var(--ks-blue-50), #fff); border: 1px solid var(--ks-blue-100); }
.pb-next-k { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--ks-blue); white-space: nowrap; } .pb-next-k svg { width: 13px; height: 13px; }
.pb-next > div b { display: block; font-size: 12.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pb-next > div small { display: block; font-size: 11px; color: var(--fg3); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-avs { display: flex; align-items: center; } .pb-avs i { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; margin-left: -8px; background: var(--av); color: #fff; font-size: 9px; font-weight: 700; display: grid; place-items: center; font-style: normal; } .pb-avs i:first-child { margin-left: 0; } .pb-avs em { margin-left: 6px; font-style: normal; font-size: 11px; font-weight: 600; color: var(--fg2); }
.pb-t2 .pb-ui { grid-template-rows: auto auto auto 1fr !important; padding-bottom: 104px !important; }
.pb-t2 .pb-bars { max-height: 96px; min-height: 72px; }
.pb-queue { display: grid; gap: 6px; align-content: start; padding-top: 12px; border-top: 1px solid var(--slate-150); }
.pb-q { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 10px; border-radius: 10px; background: var(--slate-50); border: 1px solid var(--border); }
.pb-q b { display: block; font-size: 12px; color: var(--ink); } .pb-q small { display: block; font-size: 10.5px; color: var(--fg3); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-q em { font-style: normal; font-size: 10.5px; font-weight: 600; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.pb-q em.is-sent { background: var(--success-bg); color: var(--success); } .pb-q em.is-booked { background: var(--ks-blue-50); color: var(--ks-blue); } .pb-q em.is-esc { background: #FFF1EA; color: #C2410C; }
@media (max-width: 1100px) { .pb-t1 .pb-ui-body { grid-template-rows: auto auto auto; } .pb-foot { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .pb-kpis { grid-template-columns: 1fr 1fr; } .pb-kpis div:last-child { grid-column: 1 / -1; } .pb-next { grid-template-columns: minmax(0, 1fr); } .pb-avs { display: none; } }
.pb-t1 .pb-vis, .pb-t2 .pb-vis { display: flex; flex-direction: column; min-height: 0 !important; }
.pb-t1 .pb-ui, .pb-t2 .pb-ui { position: relative !important; inset: auto !important; top: auto !important; bottom: auto !important; left: auto !important; right: auto !important; width: auto; flex: 1; }
.pb-t1 .pb-ui { margin: 34px 28px -14px; padding-bottom: 0 !important; }
.pb-t1 .pb-ui-body { grid-template-rows: auto auto !important; }
.pb-t2 .pb-ui { margin: 30px 22px -14px; padding: 16px 16px 30px !important; grid-template-rows: auto auto auto auto auto !important; gap: 14px; }
.pb-t2 .pb-bars { max-height: 96px; min-height: 80px; }
.pb-t2 .pb-msg { position: relative !important; inset: auto !important; left: auto !important; right: auto !important; bottom: auto !important; margin-top: 2px; border-radius: 12px 12px 12px 4px; background: var(--ks-blue-50); border-color: var(--ks-blue-100); }
@media (max-width: 1100px) { .pb-t1 .pb-ui-body { grid-template-rows: auto auto auto !important; } }
@media (max-width: 560px) { .pb-t1 .pb-ui { margin: 26px 16px -14px; } .pb-t2 .pb-ui { margin: 24px 16px -14px; } }
.pb-kpis b { overflow: hidden; text-overflow: ellipsis; }
.pb-kpi-u { font-size: 11.5px; font-weight: 500; color: var(--fg2); letter-spacing: 0; }
.oc-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; margin-bottom: 34px; }
.oc-head .ks-h2 { margin-top: 14px; max-width: 20ch; text-wrap: balance; } .oc-head p { margin: 0; max-width: 44ch; font-size: 15.5px; line-height: 1.55; color: var(--fg2); }
.oc { display: flex; gap: 14px; align-items: stretch; min-height: 520px; padding: 12px 0; }
.oc-card { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; border-radius: 16px; background: #fff; border: 1px solid var(--border); overflow: hidden; isolation: isolate; cursor: default;
  transition: flex-grow .7s cubic-bezier(.22,.8,.2,1), transform .7s cubic-bezier(.22,.8,.2,1), opacity .5s ease, border-color .4s ease; }
.oc-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, #0A84FF, #7C3AED 55%, #FF9A76); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .5s ease; pointer-events: none; z-index: 6; }
.oc-n { position: absolute; left: 24px; top: 20px; z-index: 2; font-size: clamp(2.6rem, 2rem + 2vw, 4rem); line-height: 1; letter-spacing: -.04em; font-weight: 600; color: var(--slate-150); transition: color .5s ease, opacity .5s ease, transform .6s var(--ease-out); }
.oc-vis { position: relative; height: 0; margin: 14px 14px 0; border-radius: 12px; overflow: hidden; opacity: 0; transition: height .7s cubic-bezier(.22,.8,.2,1), opacity .5s ease .1s; background: linear-gradient(180deg, #F4F7FF, #fff); }
.oc-vis::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 70% at 15% 100%, var(--c1, rgba(10,132,255,.5)), transparent 65%), radial-gradient(60% 60% at 95% 90%, var(--c2, rgba(124,58,237,.42)), transparent 65%); filter: blur(10px); animation: ifOrbA 22s var(--ease-in-out) infinite alternate; }
.oc-vis::after { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'><g fill='none' stroke='%230A5BF0' stroke-width='1'><path d='M28 .5 55.5 16.2v32.3L28 64.7.5 48.5V16.2z'/><path d='M56 48.7 83.5 64.4v32.3L56 112.8 28.5 97V64.4z' transform='translate(-28 0)'/><path d='M0 48.7 27.5 64.4v32.3L0 112.8-27.5 97V64.4z' transform='translate(28 0)'/></g></svg>") 0 0 / 56px 97px; opacity: .1; -webkit-mask: linear-gradient(180deg, transparent, #000 60%); mask: linear-gradient(180deg, transparent, #000 60%); }
.oc-line { position: absolute; left: 8%; right: 8%; bottom: 0; height: 1px; z-index: 1; background: linear-gradient(90deg, transparent, #0033EE 35%, #0A84FF 50%, #FF9A76 64%, transparent) no-repeat; background-size: 30% 100%; animation: ifFlow 7s var(--ease-flow) infinite; }
.oc-stat { position: absolute; left: 18px; bottom: 16px; z-index: 2; padding: 10px 14px; border-radius: 10px; background: rgba(255,255,255,.92); border: 1px solid rgba(7,16,51,.08); }
.oc-stat b { display: block; font-size: 22px; letter-spacing: -.025em; color: var(--ink); } .oc-stat small { display: block; font-size: 11.5px; color: var(--fg3); margin-top: 1px; white-space: nowrap; }
.oc-body { position: relative; z-index: 2; margin-top: auto; padding: 22px 24px 24px; }
.oc-ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--ks-blue-50); color: var(--ks-blue); } .oc-ico svg { width: 17px; height: 17px; }
.oc-body h3 { margin: 14px 0 0; font-size: 17px; line-height: 1.25; letter-spacing: -.02em; color: var(--ink); max-width: 12ch; transition: font-size .6s cubic-bezier(.22,.8,.2,1), max-width .6s cubic-bezier(.22,.8,.2,1); text-wrap: balance; }
.oc-body p { margin: 0; max-height: 0; opacity: 0; overflow: hidden; font-size: 15px; line-height: 1.55; color: var(--fg2); max-width: 40ch; transition: max-height .7s cubic-bezier(.22,.8,.2,1), opacity .5s ease, margin .6s cubic-bezier(.22,.8,.2,1); }
.oc:not(:has(.oc-card:hover)) .oc-card:first-child, .oc .oc-card:hover { flex-grow: 2.4; transform: translateY(-10px) scale(1.015); z-index: 3; border-color: transparent; }
.oc:not(:has(.oc-card:hover)) .oc-card:first-child::before, .oc .oc-card:hover::before { opacity: 1; }
.oc:not(:has(.oc-card:hover)) .oc-card:first-child .oc-vis, .oc .oc-card:hover .oc-vis { height: 200px; opacity: 1; }
.oc:not(:has(.oc-card:hover)) .oc-card:first-child .oc-n, .oc .oc-card:hover .oc-n { opacity: 0; transform: translateY(-10px); }
.oc:not(:has(.oc-card:hover)) .oc-card:first-child h3, .oc .oc-card:hover h3 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); max-width: 16ch; }
.oc:not(:has(.oc-card:hover)) .oc-card:first-child p, .oc .oc-card:hover p { max-height: 160px; opacity: 1; margin-top: 12px; }
.oc:has(.oc-card:hover) .oc-card:not(:hover) { opacity: .82; }
.oc-card:not(:hover) .oc-body { padding-top: 0; }
@media (max-width: 991px) { .oc { flex-direction: column; min-height: 0; } .oc-card { flex: none !important; transform: none !important; opacity: 1 !important; } .oc-n { position: static; font-size: 1.4rem; color: var(--ks-blue); opacity: 1 !important; transform: none !important; padding: 20px 24px 0; } .oc-vis { height: 160px; opacity: 1; } .oc-body h3 { font-size: 1.35rem; max-width: 20ch; } .oc-body p { max-height: none; opacity: 1; margin-top: 10px; } .oc-card::before { opacity: 0 !important; } }
@media (prefers-reduced-motion: reduce) { .oc-card, .oc-vis, .oc-n, .oc-body h3, .oc-body p { transition: none !important; } .oc-vis::before, .oc-line { animation: none; } }
.ps-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: end; margin-bottom: 36px; }
.ps-head h2 { margin-top: 14px; max-width: 18ch; text-wrap: balance; }
.ps-head p { margin: 14px 0 0; max-width: 56ch; color: var(--fg2); }
.ps-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.ps-chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--border); background: #fff; font-size: 13px; font-weight: 600; color: var(--fg1); cursor: pointer; transition: border-color .3s, color .3s, background .3s; }
.ps-chip.is-on { border-color: var(--ks-blue); color: var(--ks-blue); background: var(--ks-blue-50); }
@media (max-width: 900px) { .ps-head { grid-template-columns: 1fr; } .ps-chips { justify-content: flex-start; } }
.ps-stage { position: relative; border-radius: 22px; overflow: hidden; border: 1px solid var(--border); background: #fff; padding: clamp(22px, 3.5vw, 56px); }
.ps-wash { position: absolute; inset: 0; z-index: 0; background: radial-gradient(70% 80% at 0% 100%, rgba(10,132,255,.18), transparent 60%), radial-gradient(60% 70% at 100% 100%, rgba(255,154,118,.16), transparent 60%), radial-gradient(50% 50% at 60% 0%, rgba(124,58,237,.1), transparent 60%); }
.ps-wash::after { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='84' height='48' viewBox='0 0 84 48'><path d='M21 0l21 12 21-12M0 12l21 12v24M42 12v24l21-12M84 12L63 24M21 24l21 12 21-12' fill='none' stroke='%230A5BF0' stroke-opacity='.06'/></svg>"); -webkit-mask: linear-gradient(180deg, transparent, #000 40%); mask: linear-gradient(180deg, transparent, #000 40%); }
.ps-win { position: relative; z-index: 1; margin: 0 auto; max-width: 1180px; border-radius: 16px; background: #fff; border: 1px solid rgba(7,16,51,.1); overflow: hidden; transform: translateY(28px) scale(.985); opacity: 0; transition: transform 1s var(--ease-out), opacity .8s var(--ease-out); }
.ks-reveal.is-in .ps-win, .ps-sec.is-in .ps-win { transform: none; opacity: 1; }
.ps-win .pb-ui-bar { padding: 12px 18px; }
.ps-body { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 520px; }
.ps-side { border-right: 1px solid var(--slate-150); padding: 18px 14px; background: var(--slate-50); display: grid; align-content: start; gap: 4px; }
.ps-side a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--fg2); } .ps-side a svg { width: 16px; height: 16px; } .ps-side a.is-on { background: #fff; color: var(--ink); border: 1px solid var(--border); }
.ps-side .ps-side-h { padding: 14px 12px 6px; font-size: 11px; font-weight: 600; color: var(--fg3); }
.ps-main { padding: 22px 24px 26px; display: grid; gap: 18px; align-content: start; }
.ps-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.ps-top h3 { margin: 0; font-size: 20px; letter-spacing: -.02em; color: var(--ink); } .ps-top small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--fg3); }
.ps-top .pb-btn { padding: 8px 12px; border-radius: 10px; background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 600; }
.ps-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ps-kpi { padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border); background: #fff; }
.ps-kpi small { display: block; font-size: 12px; color: var(--fg3); } .ps-kpi b { display: block; margin-top: 4px; font-size: 22px; letter-spacing: -.02em; color: var(--ink); } .ps-kpi em { display: inline-flex; margin-top: 6px; font-style: normal; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--success-bg); color: var(--success); } .ps-kpi em.warn { background: #FFF1EA; color: #C2410C; }
.ps-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 18px; }
.ps-card { padding: 16px 18px; border-radius: 12px; border: 1px solid var(--border); background: #fff; }
.ps-card-h { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; font-weight: 600; color: var(--fg3); margin-bottom: 12px; } .ps-card-h b { font-size: 14px; color: var(--ink); }
.ps-win .pb-bars { height: 150px; }
.ps-line { position: relative; height: 150px; }
.ps-line svg { width: 100%; height: 100%; overflow: visible; }
.ps-line path.l { fill: none; stroke: url(#psg); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1200; stroke-dashoffset: 1200; transition: stroke-dashoffset 2.2s var(--ease-out) .3s; }
.ps-line path.a { fill: url(#psa); opacity: 0; transition: opacity 1.2s var(--ease-out) 1s; }
.ks-reveal.is-in .ps-line path.l { stroke-dashoffset: 0; } .ks-reveal.is-in .ps-line path.a { opacity: 1; }
.ps-line .dot { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #7C3AED; border: 2px solid #fff; opacity: 0; transform: scale(.5); transition: opacity .4s var(--ease-out) 2.2s, transform .5s var(--ease-out) 2.2s; } .ks-reveal.is-in .ps-line .dot { opacity: 1; transform: none; }
.ps-feed { display: grid; gap: 8px; }
.ps-feed > div { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--slate-50); border: 1px solid var(--border); opacity: 0; transform: translateX(10px); transition: opacity .5s var(--ease-out), transform .6s var(--ease-out); transition-delay: calc(var(--n, 0) * 140ms + .5s); }
.ks-reveal.is-in .ps-feed > div { opacity: 1; transform: none; }
.ps-feed b { display: block; font-size: 12.5px; color: var(--ink); } .ps-feed small { display: block; font-size: 11px; color: var(--fg3); }
.ps-feed em { font-style: normal; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: var(--ks-blue-50); color: var(--ks-blue); } .ps-feed em.ok { background: var(--success-bg); color: var(--success); } .ps-feed em.warn { background: #FFF1EA; color: #C2410C; } .ps-feed em.soon { background: #F3EEFF; color: #6D28D9; }
.ps-feed .ps-ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: #fff; border: 1px solid var(--border); color: var(--ks-blue); } .ps-feed .ps-ic svg { width: 15px; height: 15px; }
.ps-cursor { position: absolute; z-index: 3; width: 18px; height: 18px; pointer-events: none; opacity: 0; transition: left 1.1s cubic-bezier(.4,0,.2,1), top 1.1s cubic-bezier(.4,0,.2,1), opacity .4s; }
.ps-cursor svg { width: 18px; height: 18px; filter: drop-shadow(0 2px 4px rgba(7,16,51,.3)); }
.ks-reveal.is-in .ps-cursor { opacity: 1; }
.ps-floats { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.ps-float { position: absolute; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: #fff; border: 1px solid rgba(7,16,51,.1); opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease-out), transform .9s var(--ease-out); transition-delay: var(--d, .8s); }
.ks-reveal.is-in .ps-float { opacity: 1; transform: translateY(calc(var(--vp, .5) * -16px + 8px)); }
.ps-float b { display: block; font-size: 15px; letter-spacing: -.015em; color: var(--ink); } .ps-float small { display: block; font-size: 11.5px; color: var(--fg3); }
.ps-float .pb-av { width: 30px; height: 30px; font-size: 11px; }
.ps-f1 { left: 2%; top: 22%; } .ps-f2 { right: 1%; top: 40%; --d: 1.1s; } .ps-f3 { left: 6%; bottom: 10%; --d: 1.4s; }
.ps-panel { display: none; } .ps-panel.is-on { display: contents; }
.ps-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ps-col { padding: 12px; border-radius: 12px; background: var(--slate-50); border: 1px solid var(--border); display: grid; gap: 10px; align-content: start; }
.ps-col-h { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; color: var(--fg2); padding: 2px 4px; } .ps-col-h span { color: var(--fg3); }
.ps-item { padding: 12px 14px; border-radius: 10px; background: #fff; border: 1px solid var(--border); opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease-out), transform .6s var(--ease-out); transition-delay: calc(var(--n, 0) * 120ms + .4s); }
.ks-reveal.is-in .ps-item { opacity: 1; transform: none; }
.ps-item b { display: block; font-size: 13px; color: var(--ink); } .ps-item small { display: block; margin-top: 3px; font-size: 11.5px; color: var(--fg3); }
.ps-item i { display: block; height: 4px; border-radius: 2px; background: var(--slate-150); margin-top: 10px; overflow: hidden; } .ps-item i::after { content: ""; display: block; height: 100%; width: var(--w, 40%); background: linear-gradient(90deg, #0A5BF0, #7C3AED); transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease-out) .6s; } .ks-reveal.is-in .ps-item i::after { transform: scaleX(1); }
.ps-item .tags { display: flex; gap: 6px; margin-top: 8px; } .ps-item .tags span { font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 999px; background: var(--ks-blue-50); color: var(--ks-blue); } .ps-item .tags span.v { background: #F3EEFF; color: #6D28D9; } .ps-item .tags span.p { background: #FFF1EA; color: #C2410C; }
@media (max-width: 991px) { .ps-body { grid-template-columns: 1fr; } .ps-side { display: none; } .ps-kpis { grid-template-columns: 1fr 1fr; } .ps-grid { grid-template-columns: 1fr; } .ps-board { grid-template-columns: 1fr; } .ps-floats { display: none; } .ps-cursor { display: none; } }
@media (prefers-reduced-motion: reduce) { .ps-win, .ps-feed > div, .ps-item, .ps-float, .ps-line path.l, .ps-line path.a, .ps-line .dot { transition: none !important; opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; } .ps-cursor { display: none; } }
.sx-friction img, .sx-friction:hover img { transform: none !important; }
/* motion.css */
:root { --mo-ease: cubic-bezier(.2, .7, .2, 1); --mo-ease2: cubic-bezier(.65, 0, .25, 1); }
.mo-on .mo-split .mo-w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
.mo-on .mo-split .mo-wi { display: inline-block; transform: translateY(105%); transition: transform .9s var(--mo-ease) calc(var(--i, 0) * 45ms); will-change: transform; }
.mo-on .mo-split.is-in .mo-wi { transform: none; }
.mo-on .mo-cascade { perspective: 1400px; }
.mo-on .mo-cascade > * { opacity: 0; transform: translateY(40px) rotateX(14deg); transform-origin: 50% 0; transition: opacity .8s var(--mo-ease) calc(var(--i) * 90ms), transform 1s var(--mo-ease) calc(var(--i) * 90ms); }
.mo-on .mo-cascade.is-in > * { opacity: 1; transform: none; }
.mo-on .mo-stack { display: block !important; max-width: 920px; margin-inline: auto !important; }
.mo-on .mo-stack > * { position: sticky; top: calc(110px + var(--i) * 18px); width: 100% !important; max-width: none !important; flex: none !important; margin-bottom: 26vh; padding: 0 !important; }
.mo-on .mo-stack > *:last-child { margin-bottom: 0; }
.mo-on .mo-stack > * > .ks-card { transform: scale(calc(1 - var(--c, 0) * .06)); filter: brightness(calc(1 - var(--c, 0) * .06)); transform-origin: 50% 0; transition: none; box-shadow: 0 30px 70px -40px rgba(7,16,51,.45) !important; min-height: 240px; }
.mo-on .mo-focus { display: grid !important; grid-template-columns: minmax(0, 1fr); gap: 18px; max-width: 900px; margin-inline: auto !important; }
.mo-on .mo-focus > * { width: 100% !important; max-width: none !important; flex: none !important; padding: 0 !important; }
.mo-on .mo-focus > * > .ks-card { opacity: .38; transform: scale(.965); filter: saturate(.5); transition: opacity .6s var(--mo-ease), transform .7s var(--mo-ease), filter .6s var(--mo-ease), box-shadow .6s var(--mo-ease), border-color .5s ease; }
.mo-on .mo-focus > .is-focus > .ks-card { opacity: 1; transform: none; filter: none; box-shadow: 0 30px 70px -44px rgba(10,91,240,.45) !important; border-color: rgba(10,91,240,.25) !important; }
.mo-reel-wrap { position: relative; }
.mo-on .mo-reel { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: 0 !important; padding-bottom: 6px; cursor: grab; }
.mo-on .mo-reel::-webkit-scrollbar { display: none; }
.mo-on .mo-reel.is-drag { cursor: grabbing; scroll-snap-type: none; }
.mo-on .mo-reel > * { flex: 0 0 min(420px, 82vw) !important; max-width: none !important; scroll-snap-align: start; }
.mo-on .mo-reel-wrap > .mo-reel > * { opacity: 0; transform: translateX(60px); transition: opacity .8s var(--mo-ease) calc(var(--i) * 80ms), transform 1s var(--mo-ease) calc(var(--i) * 80ms); }
.mo-on .mo-reel-wrap.is-in > .mo-reel > * { opacity: 1; transform: none; }
.mo-reel-ui { display: flex; align-items: center; gap: 18px; margin-top: 22px; }
.mo-reel-bar { flex: 1; height: 2px; background: var(--slate-150); border-radius: 2px; overflow: hidden; }
.mo-reel-bar i { display: block; height: 100%; background: linear-gradient(90deg, #0A5BF0, #7C3AED, #FF9A76); transform-origin: left; transition: transform .2s linear; }
.mo-reel-btns { display: flex; gap: 8px; }
.mo-reel-btns button { width: 40px; height: 40px; border-radius: 10px; border: 1px solid rgba(7,16,51,.12); background: #fff; color: var(--ink); cursor: pointer; font-size: 16px; transition: background .2s ease, border-color .2s ease, color .2s ease; }
.mo-reel-btns button:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.ks-ink .mo-reel-btns button { background: transparent; color: #fff; border-color: rgba(255,255,255,.2); }
.mo-on .mo-media:not(.mo-simple) .mo-fig img { transform: scale(calc(1.16 - .16 * var(--q, 1))); transition: none !important; }
.mo-on .mo-wipe:not(.mo-simple) .mo-fig { clip-path: inset(0 calc((1 - var(--q, 1)) * 100%) 0 0 round 16px) !important; }
.mo-on .mo-wipe:not(.mo-simple):nth-of-type(even) .mo-fig { clip-path: inset(0 0 0 calc((1 - var(--q, 1)) * 100%) round 16px) !important; }
.mo-on .mo-iris:not(.mo-simple) .mo-fig { clip-path: circle(calc(14% + var(--q, 1) * 80%) at 50% 50%) !important; }
.mo-on .mo-drift:not(.mo-simple) .mo-fig { clip-path: inset(calc((1 - var(--q, 1)) * 14%) calc((1 - var(--q, 1)) * 10%) round 16px) !important; transform: translateY(calc((.5 - var(--p, .5)) * 50px)); }
.mo-on .mo-media:not(.mo-simple) .mo-text { transform: translateY(calc((1 - var(--q, 1)) * 40px)); opacity: var(--q, 1); }
.mo-on .mo-simple .mo-fig, .mo-on .mo-simple .mo-text { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--mo-ease), transform .9s var(--mo-ease); }
.mo-on .mo-simple .mo-text { transition-delay: .12s; }
.mo-on .mo-simple.is-in .mo-fig, .mo-on .mo-simple.is-in .mo-text { opacity: 1; transform: none; }
.mo-on .mo-curtain { --q: clamp(0, calc((var(--p, 0) - .02) / .28), 1); clip-path: inset(0 calc((1 - var(--q)) * 4%) round calc((1 - var(--q)) * 28px)); }
.mo-on .mo-list > li { opacity: 0; transform: translateX(-14px); transition: opacity .6s var(--mo-ease) calc(var(--i) * 70ms), transform .7s var(--mo-ease) calc(var(--i) * 70ms); }
.mo-on .mo-list.is-in > li { opacity: 1; transform: none; }
.mo-on .mo-hero > .ks-container-wide, .mo-on .mo-hero > .ks-container { --q: clamp(0, calc((var(--p, 0) - .5) / .5), 1); transform: translateY(calc(var(--q) * -60px)); opacity: calc(1 - var(--q) * .6); }
.mo-on .mo-hero .as { transform: translateY(calc(-50% + var(--q, 0) * 40px)); }
@media (max-width: 991px){ .mo-on .mo-curtain { clip-path: none; } }
.mo-rm .mo-split .mo-wi, .mo-rm .mo-cards > *, .mo-rm .mo-list > li { transform: none !important; opacity: 1 !important; }
.mo-on .mo-h { position: relative; overflow: hidden; isolation: isolate; }
.mo-on .mo-h .mo-h-hide, .mo-on .mo-h .as, .mo-on .mo-h .hero-bg-cube { display: none !important; }
.mo-on .mo-h > :not(.mo-hv):not(.amb) { position: relative; z-index: 2; }
.mo-hv { position: absolute; z-index: 1; pointer-events: none; }
.mo-hv-f { position: absolute; margin: 0; overflow: hidden; background: #0B1330; }
.mo-hv-f img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.mo-on .mo-h h1 { max-width: 16ch; }
.mo-on .mo-h .mo-hv-f { clip-path: inset(100% 0 0 0 round 18px); transition: clip-path 1.4s cubic-bezier(.65,0,.25,1); }
.mo-on .mo-h.is-in .mo-hv-f { clip-path: inset(0 0 0 0 round 18px); }
.mo-on .mo-h .mo-hv-f img { transform: scale(calc(1.14 - .06 * var(--k, 0))) translateY(calc(var(--p, 0) * 40px)); transition: transform 2.4s cubic-bezier(.2,.7,.2,1); }
.mo-on .mo-h.is-in .mo-hv-f img { --k: 1; }
.mo-on .mo-h .mo-h-copy, .mo-on .mo-h h1 { transition: opacity .9s var(--mo-ease), transform 1s var(--mo-ease); }
.mo-on .mo-h-frame { min-height: min(92vh, 900px); display: flex; align-items: center; }
.mo-on .mo-h-frame .mo-h-copy { flex: 0 0 52% !important; max-width: 52% !important; }
.mo-on .mo-h-frame .mo-hv { top: 104px; bottom: 36px; right: 0; width: 44vw; }
.mo-on .mo-h-frame .mo-hv-f { inset: 0; border-radius: 22px 0 0 22px; }
.mo-on .mo-h-frame.is-in .mo-hv-f { clip-path: inset(0 0 0 0 round 22px 0 0 22px); }
.mo-on .mo-h-horizon { padding-bottom: calc(min(58vh, 560px) + 40px) !important; }
.mo-on .mo-h-horizon .mo-h-copy { flex: 0 0 72% !important; max-width: 72% !important; }
.mo-on .mo-h-horizon .mo-hv { left: var(--gutter); right: var(--gutter); bottom: 32px; height: min(58vh, 560px); }
.mo-on .mo-h-horizon .mo-hv-f { inset: 0; --o: clamp(0, calc(var(--p, 0) * 2.4), 1); }
.mo-on .mo-h-horizon.is-in .mo-hv-f { clip-path: inset(0 calc((1 - var(--o)) * 22%) round 22px); transition: clip-path .1s linear; }
.mo-on .mo-h-diptych { min-height: min(94vh, 920px); display: flex; align-items: center; }
.mo-on .mo-h-diptych .mo-h-copy { flex: 0 0 50% !important; max-width: 50% !important; }
.mo-on .mo-h-diptych .mo-hv { top: 96px; bottom: 30px; right: var(--gutter); width: 42vw; }
.mo-on .mo-h-diptych .mo-hv-f1 { left: 0; top: 4%; width: 56%; height: 78%; transform: translateY(calc(var(--p, 0) * -70px)); }
.mo-on .mo-h-diptych .mo-hv-f2 { right: 0; bottom: 0; width: 50%; height: 64%; transform: translateY(calc(var(--p, 0) * 60px)); transition-delay: .18s; }
.mo-on .mo-h-diptych.is-in .mo-hv-f2 { transition-delay: .18s; }
.mo-on .mo-h-stair { min-height: min(92vh, 900px); display: flex; align-items: center; }
.mo-on .mo-h-stair .mo-h-copy { flex: 0 0 48% !important; max-width: 48% !important; }
.mo-on .mo-h-stair .mo-hv { top: 100px; bottom: 30px; right: var(--gutter); width: 44vw; }
.mo-on .mo-h-stair .mo-hv-f1 { left: 0; top: 0; width: 46%; height: 46%; }
.mo-on .mo-h-stair .mo-hv-f2 { left: 28%; top: 24%; width: 46%; height: 50%; transition-delay: .14s; }
.mo-on .mo-h-stair .mo-hv-f3 { right: 0; bottom: 0; width: 44%; height: 46%; transition-delay: .28s; }
.mo-on .mo-h-stair .mo-hv-f1 { clip-path: inset(0 100% 0 0 round 18px); } .mo-on .mo-h-stair .mo-hv-f3 { clip-path: inset(0 0 0 100% round 18px); }
.mo-on .mo-h-stair.is-in .mo-hv-f { clip-path: inset(0 round 18px); }
.mo-on .mo-h-stair .mo-hv-f2 { box-shadow: 0 40px 80px -40px rgba(7,16,51,.5); z-index: 2; }
.mo-on .mo-h-cinema { min-height: min(94vh, 940px); display: flex; align-items: flex-end; padding-bottom: clamp(56px, 8vh, 96px) !important; background: #060B1F !important; color: #fff; }
.mo-on .mo-h-cinema .mo-h-copy { flex: 0 0 66% !important; max-width: 66% !important; }
.mo-on .mo-h-cinema .mo-hv { inset: 0; }
.mo-on .mo-h-cinema .mo-hv-f { inset: 0; border-radius: 0; clip-path: none !important; }
.mo-on .mo-h-cinema .mo-hv-f img { opacity: .62; filter: saturate(.8); transform: scale(calc(1.18 - .1 * var(--k, 0) + var(--p, 0) * .06)); }
.mo-on .mo-h-cinema .mo-hv::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,11,31,.94) 0%, rgba(6,11,31,.72) 45%, rgba(6,11,31,.25) 100%), linear-gradient(0deg, rgba(6,11,31,.85), transparent 45%); }
.mo-on .mo-h-cinema h1, .mo-on .mo-h-cinema h2, .mo-on .mo-h-cinema .ks-display { color: #fff !important; }
.mo-on .mo-h-cinema p, .mo-on .mo-h-cinema .ks-lead, .mo-on .mo-h-cinema li { color: rgba(226,234,255,.8) !important; }
.mo-on .mo-h-cinema .ks-wedge, .mo-on .mo-h-cinema .eyebrow { color: #9DBBFF !important; }
.mo-on .mo-h-cinema .ks-btn--secondary { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.26) !important; color: #fff !important; }
.mo-on .mo-h .mo-h-copy { transform: translateY(calc(max(0, var(--p, 0) - .5) * -90px)); opacity: calc(1 - max(0, var(--p, 0) - .5) * 1.2); }
@media (max-width: 991px){
  .mo-on .mo-h { min-height: 0 !important; display: block !important; padding-bottom: 0 !important; }
  .mo-on .mo-h .mo-h-copy { flex: 0 0 100% !important; max-width: 100% !important; transform: none; opacity: 1; }
  .mo-on .mo-h .mo-hv { position: relative; inset: auto !important; width: auto !important; height: 62vw; margin: 28px var(--gutter) 0; top: auto; bottom: auto; right: auto; left: auto; }
  .mo-on .mo-h-cinema .mo-hv { position: absolute; inset: 0 !important; height: auto; margin: 0; }
  .mo-on .mo-h-cinema { padding-top: 140px !important; padding-bottom: 56px !important; }
  .mo-on .mo-h-diptych .mo-hv-f1, .mo-on .mo-h-diptych .mo-hv-f2 { transform: none; }
  .mo-on .mo-h-frame .mo-hv-f, .mo-on .mo-h-frame.is-in .mo-hv-f { border-radius: 18px; clip-path: inset(0 round 18px); }
  .mo-on .mo-h-horizon .mo-hv { left: auto; right: auto; }
}
.mo-on .mo-index { display: block !important; margin: 0 !important; border-top: 1px solid rgba(7,16,51,.1); }
.ks-ink .mo-on .mo-index, .mo-on .ks-ink .mo-index { border-top-color: rgba(255,255,255,.12); }
.mo-on .mo-index > * { width: 100% !important; max-width: none !important; flex: none !important; padding: 0 !important; }
.mo-on .mo-index > * > .ks-card { display: grid !important; grid-template-columns: 56px minmax(0, .9fr) minmax(0, 1.1fr); column-gap: clamp(20px, 3vw, 48px); align-items: start;
  background: transparent !important; border: 0 !important; border-bottom: 1px solid rgba(7,16,51,.1) !important; border-radius: 0 !important; box-shadow: none !important; padding: clamp(24px, 3vw, 36px) 0 !important; transform: none !important; position: relative; }
.mo-on .ks-ink .mo-index > * > .ks-card { border-bottom-color: rgba(255,255,255,.12) !important; }
.mo-on .mo-index .ks-card > * { grid-column: 3; margin-top: 0; }
.mo-on .mo-index .ks-card > .ks-icon-tile, .mo-on .mo-index .ks-card > .num, .mo-on .mo-index .ks-card > .step-n { grid-column: 1; grid-row: 1 / span 4; }
.mo-on .mo-index .ks-card > h3, .mo-on .mo-index .ks-card > h4, .mo-on .mo-index .ks-card > .ks-h3, .mo-on .mo-index .ks-card > .ks-h4 { grid-column: 2; grid-row: 1 / span 4; font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem) !important; letter-spacing: -.022em; margin: 0 !important; transition: transform .5s var(--mo-ease), color .3s ease; }
.mo-on .mo-index .ks-card > .num { position: static !important; font-size: 13px; color: var(--slate-400); padding-top: 8px; }
.mo-on .mo-index .ks-card::after { content: "" !important; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, #0A5BF0, #7C3AED, #FF9A76); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--mo-ease2); display: block !important; }
.mo-on .mo-index .ks-card:hover::after { transform: scaleX(1); }
.mo-on .mo-index .ks-card:hover > h3, .mo-on .mo-index .ks-card:hover > h4, .mo-on .mo-index .ks-card:hover > .ks-h3, .mo-on .mo-index .ks-card:hover > .ks-h4 { transform: translateX(6px); color: var(--ks-blue); }
.mo-on .ks-ink .mo-index .ks-card:hover > h3, .mo-on .ks-ink .mo-index .ks-card:hover > h4 { color: #9DBBFF; }
.mo-on .mo-index > * { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--mo-ease) calc(var(--i) * 70ms), transform .8s var(--mo-ease) calc(var(--i) * 70ms); }
.mo-on .mo-index.is-in > * { opacity: 1; transform: none; }
@media (max-width: 760px){ .mo-on .mo-index > * > .ks-card { grid-template-columns: 40px minmax(0, 1fr); } .mo-on .mo-index .ks-card > * { grid-column: 2; } .mo-on .mo-index .ks-card > h3, .mo-on .mo-index .ks-card > h4, .mo-on .mo-index .ks-card > .ks-h3, .mo-on .mo-index .ks-card > .ks-h4 { grid-column: 2; grid-row: auto; margin-bottom: 8px !important; } .mo-on .mo-index .ks-card > .ks-icon-tile, .mo-on .mo-index .ks-card > .num { grid-row: 1 / span 3; } }
.mo-ed { margin: 0; border-radius: 18px !important; clip-path: none !important; }
.mo-ed img { aspect-ratio: 4 / 3; }
@media (max-width: 991px){
  .mo-on .mo-h:not(.mo-h-cinema) { display: flex !important; flex-direction: column; }
  .mo-on .mo-h:not(.mo-h-cinema) > :not(.mo-hv):not(.amb) { order: 1; }
  .mo-on .mo-h:not(.mo-h-cinema) > .mo-hv { order: 2; height: min(56vw, 420px) !important; margin: 28px var(--gutter) 40px !important; }
}
html body .mo-on .mo-h > .mo-hv, html .mo-on body .mo-h > .mo-hv, .mo-on .mo-h > .mo-hv { position: absolute !important; z-index: 1 !important; }
@media (max-width: 991px){ .mo-on .mo-h:not(.mo-h-cinema) > .mo-hv { position: relative !important; } }
html.mo-on body:not([data-page="home"]) :is(h1, h2, .ks-display, .ks-h1, .ks-h2) { font-weight: 400 !important; letter-spacing: -.032em !important; line-height: 1.05 !important; text-wrap: balance; }
html.mo-on body:not([data-page="home"]) :is(h3, .ks-h3) { font-weight: 500 !important; letter-spacing: -.02em !important; }
html.mo-on body:not([data-page="home"]) :is(h1, .ks-display) { font-size: clamp(2.3rem, 1.1rem + 3.4vw, 4.4rem) !important; }
html.mo-on body:not([data-page="home"]) :is(h2, .ks-h2) { font-size: clamp(1.8rem, 1rem + 2.1vw, 3.1rem) !important; }
html.mo-on body:not([data-page="home"]) .ks-lead { font-weight: 400; color: var(--fg2); line-height: 1.5; }
html.mo-on body:not([data-page="home"]) .ks-grad-text { background: linear-gradient(90deg, #0033EE 0%, #0A84FF 42%, #7C3AED 78%, #FF9A76 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; }
html.mo-on body:not([data-page="home"]) :is(.ks-ink, .dark, .mo-h-cinema, .stage-dark) .ks-grad-text { background: linear-gradient(90deg, #4F7DFF 0%, #0A84FF 50%, #9B7BFF 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; }
html.mo-on body:not([data-page="home"]) :is(.ks-wedge, .ks-chip, .ks-eyebrow):not(.ks-foot *):not(.ksa *):not(.shift-new *):not(.ks-card--ink *):not(.dark *):not(.stage-dark *) { display: inline-flex !important; align-items: center; gap: 10px; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; border-radius: 0 !important; font-weight: 600 !important; font-size: 13px !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--ks-blue) !important; }
html.mo-on body:not([data-page="home"]) :is(.ks-wedge, .ks-chip, .ks-eyebrow):not(.ks-foot *):not(.ksa *):not(.shift-new *):not(.ks-card--ink *):not(.dark *):not(.stage-dark *)::before { content: "" !important; width: 8px !important; height: 8px !important; border-radius: 50% !important; clip-path: none !important; background: linear-gradient(135deg, #0A84FF, #7C3AED) !important; transform: none !important; animation: none !important; flex: none; }
html.mo-on body:not([data-page="home"]) :is(.ks-wedge, .ks-chip):not(.ks-foot *) svg { display: none !important; }
html.mo-on body:not([data-page="home"]) :is(.ks-ink, .dark, .mo-h-cinema, .stage-dark) :is(.ks-wedge, .ks-chip) { color: #9DBBFF !important; }
html.mo-on body:not([data-page="home"]) :is(.kc-art, [data-cube], .hero-viz-cube, .hero-bg-cube, .ks-glow, .ks-media-frame::before) { display: none !important; }
html.mo-on body:not([data-page="home"]) .ks-ashlar { background-image: none !important; }
html.mo-on body:not([data-page="home"]) .ks-media { clip-path: none !important; border-radius: 18px !important; box-shadow: 0 30px 60px -34px rgba(7,16,51,.4) !important; }
html.mo-on body:not([data-page="home"]) .ks-media::after { display: none !important; }
html.mo-on body:not([data-page="home"]) .ks-media-cap { display: none !important; }
html.mo-on body:not([data-page="home"]) .ks-card:not(.mo-index .ks-card) { border-radius: 16px !important; border: 1px solid rgba(7,16,51,.08) !important; box-shadow: none !important; background: #fff; }
html.mo-on body:not([data-page="home"]) .ks-card--faceted { clip-path: none !important; }
html.mo-on body:not([data-page="home"]) .ks-card:not(.mo-index .ks-card):hover { border-color: rgba(10,91,240,.22) !important; box-shadow: 0 24px 50px -36px rgba(7,16,51,.35) !important; }
html.mo-on body:not([data-page="home"]) .ks-icon-tile { border-radius: 12px !important; background: transparent !important; color: var(--ks-blue) !important; border: 0 !important; box-shadow: none !important; }
html.mo-on body:not([data-page="home"]) .ks-ink .ks-icon-tile { background: transparent !important; color: #9DBBFF !important; }
html.mo-on body:not([data-page="home"]) .ks-section { padding-block: clamp(80px, 9vw, 140px); }
html.mo-on body:not([data-page="home"]) .ks-bg-subtle { background: var(--bg-subtle) !important; }
html.mo-on body:not([data-page="home"]) .crumb { padding-top: 12px !important; padding-bottom: 0 !important; font-size: 13px; }
html.mo-on body:not([data-page="home"]) .crumb:not(:last-child) { margin-bottom: clamp(20px, 2.4vw, 32px) !important; }
html.mo-on body:not([data-page="home"]) :is(.mo-crumb .crumb, .crumb.mo-crumb-in) { margin-bottom: 0 !important; }
html.mo-on body:not([data-page="home"]) .crumb + section, html.mo-on body:not([data-page="home"]) .ks-container-wide:has(> .crumb) + section { padding-top: 24px !important; }
.mo-on .mo-h .mo-h-host { display: block !important; margin: 0 !important; }
.mo-on .mo-h .mo-h-copy { padding-left: 0 !important; padding-right: 0 !important; }
@media (min-width: 992px){ .mo-on .mo-h:is(.mo-h-frame, .mo-h-diptych, .mo-h-stair) .mo-h-copy { max-width: min(52%, 700px) !important; } .mo-on .mo-h-horizon .mo-h-copy { max-width: 900px !important; } .mo-on .mo-h-cinema .mo-h-copy { max-width: 820px !important; } }
.mo-on .mo-h-horizon { padding-bottom: clamp(56px, 7vw, 96px) !important; }
.mo-on .mo-h-horizon .mo-hv, html body .mo-on .mo-h-horizon .mo-hv { position: relative !important; inset: auto !important; left: auto; right: auto; bottom: auto; width: 100% !important; height: clamp(300px, 46vh, 520px) !important; margin: clamp(48px, 5vw, 72px) 0 0 !important; order: 2; }
.mo-on .mo-h-horizon .mo-hv-f { inset: 0; border-radius: 22px; }
.mo-on .mo-h-horizon.is-in .mo-hv-f { clip-path: inset(0 calc((1 - var(--o)) * 8%) round 22px); }
.mo-on .mo-h-horizon .mo-h-copy { max-width: 880px !important; }
@media (max-width: 991px){ .mo-on .mo-h-horizon .mo-hv { height: min(56vw, 420px) !important; margin-top: 36px !important; } .mo-on .mo-h-horizon.is-in .mo-hv-f { clip-path: inset(0 round 18px); } }
.mo-on .mo-h-night { background: #060B1F !important; color: #fff; }
.mo-on :is(.mo-h-night, .mo-h-cinema) :is(h1, h2, .ks-display) { color: #fff !important; }
.mo-on :is(.mo-h-night, .mo-h-cinema) :is(p, .ks-lead, li) { color: rgba(226,234,255,.78) !important; }
.mo-on :is(.mo-h-night, .mo-h-cinema) :is(.ks-wedge, .ks-chip, .eyebrow) { color: #9DBBFF !important; }
.mo-on :is(.mo-h-night, .mo-h-cinema) .ks-grad-text { background: linear-gradient(90deg, #6E9BFF 0%, #0A84FF 45%, #A58BFF 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; }
.mo-on :is(.mo-h-night, .mo-h-cinema) .ks-btn--primary { background: #fff !important; border-color: #fff !important; color: #060B1F !important; }
.mo-on :is(.mo-h-night, .mo-h-cinema) .ks-btn--primary:hover { background: #DCE9FF !important; border-color: #DCE9FF !important; }
.mo-on :is(.mo-h-night, .mo-h-cinema) .ks-btn--secondary { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.24) !important; color: #fff !important; }
.mo-on :is(.mo-h-night, .mo-h-cinema) .ks-btn--secondary:hover { background: rgba(255,255,255,.12) !important; border-color: rgba(255,255,255,.5) !important; }
.mo-on .mo-h-night .mo-hv-f { background: #0B1330; box-shadow: 0 40px 90px -40px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.07); }
.mo-on .mo-h-night .mo-hv-f img { filter: saturate(.9) brightness(.92); }
.mo-on :is(.mo-h-night, .mo-h-cinema) [class*="spine"] a, .mo-on :is(.mo-h-night, .mo-h-cinema) .ks-chip { color: rgba(226,234,255,.8) !important; border-color: rgba(255,255,255,.16) !important; background: rgba(255,255,255,.04) !important; }
.mo-on .mo-crumb { padding: 0 !important; margin-bottom: clamp(20px, 3vw, 36px); position: relative; z-index: 2; }
.mo-on .mo-crumb .crumb { padding-top: 0 !important; color: rgba(226,234,255,.6) !important; }
.mo-on .mo-crumb .crumb a { color: rgba(226,234,255,.75) !important; } .mo-on .mo-crumb .crumb a:hover { color: #fff !important; } .mo-on .mo-crumb .crumb span { color: #fff !important; }
.mo-on .mo-h-night, .mo-on .mo-h-cinema { padding-top: clamp(120px, 14vh, 150px) !important; }
@media (max-width: 991px){ .mo-on .mo-h-night { padding-bottom: 40px !important; } }
@media (max-width: 991px){
  .mo-on .mo-h:not(.mo-h-cinema) { align-items: stretch !important; }
  .mo-on .mo-h:not(.mo-h-cinema) > .mo-hv { align-self: stretch !important; width: auto !important; }
}
html.mo-on body:not([data-page="home"]) :is(.mo-h-night, .mo-h-cinema) :is(.ks-wedge, .ks-chip, .ks-eyebrow, .eyebrow) { color: #9DBBFF !important; }
html.mo-on body:not([data-page="home"]) :is(.mo-h-night, .mo-h-cinema) :is(.ks-wedge, .ks-chip, .ks-eyebrow)::before { background: linear-gradient(135deg, #6EA8FF, #A78BFA) !important; }
html.mo-on body:not([data-page="home"]) :is(.mo-h-night, .mo-h-cinema) :is(h1, h2, .ks-display, .ks-h1) { color: #fff !important; }
html.mo-on body:not([data-page="home"]) :is(.mo-h-night, .mo-h-cinema) :is(p, .ks-lead, li) { color: rgba(226,234,255,.8) !important; }
html.mo-on body:not([data-page="home"]) :is(.mo-h-night, .mo-h-cinema) .ks-grad-text { background: linear-gradient(90deg, #6E9BFF 0%, #0A84FF 45%, #A58BFF 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; }
html.mo-on body:not([data-page="home"]) :is(.mo-h-night, .mo-h-cinema) .crumb, html.mo-on body:not([data-page="home"]) :is(.mo-h-night, .mo-h-cinema) .crumb a, html.mo-on body:not([data-page="home"]) :is(.mo-h-night, .mo-h-cinema) .crumb svg { color: rgba(226,234,255,.72) !important; }
html.mo-on body:not([data-page="home"]) :is(.mo-h-night, .mo-h-cinema) .crumb a:hover { color: #fff !important; }
html.mo-on body:not([data-page="home"]) :is(.mo-h-night, .mo-h-cinema) .crumb :is(.cur, span:last-child, span[style]) { color: #fff !important; }
.mo-on .mo-h-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
html.mo-on body:not([data-page="home"]) :is(.mo-h-night, .mo-h-cinema, .ks-ink, .dark, .stage-dark) :is(.ks-wedge, .ks-chip, .ks-eyebrow, .eyebrow):not(.ks-foot *):not(.ksa *) { color: #9DBBFF !important; }
html.mo-on body:not([data-page="home"]) :is(.mo-h-night, .mo-h-cinema, .ks-ink, .dark, .stage-dark) :is(.ks-wedge, .ks-chip, .ks-eyebrow):not(.ks-foot *):not(.ksa *):not(.shift-new *):not(.ks-card--ink *):not(.dark *):not(.stage-dark *)::before { background: linear-gradient(135deg, #6EA8FF, #A78BFA) !important; }
html.mo-on body:not([data-page="home"]) .ks-list li::before { clip-path: none !important; border-radius: 50% !important; width: 8px !important; height: 8px !important; top: .62em !important; background: linear-gradient(135deg, #0A84FF, #7C3AED) !important; }
html.mo-on body:not([data-page="home"]) .ks-media::after, html.mo-on body:not([data-page="home"]) .ks-media-frame::before { display: none !important; }
html.mo-on body:not([data-page="home"]) .ks-btn--gold { background: var(--ks-blue) !important; border-color: var(--ks-blue) !important; color: #fff !important; box-shadow: none !important; }
html.mo-on body:not([data-page="home"]) .ks-btn--gold:hover { background: #0A4BD0 !important; border-color: #0A4BD0 !important; }
html.mo-on body:not([data-page="home"]) :is(.ks-ink, .dark, .mo-h-night, .mo-h-cinema) .ks-btn--gold { background: #fff !important; border-color: #fff !important; color: #060B1F !important; }
html.mo-on body:not([data-page="home"]) .ks-stat-num--gold { color: #7C3AED !important; }
html.mo-on body:not([data-page="home"]) .ks-icon-tile--gold { background: transparent !important; color: var(--ks-blue) !important; }
html.mo-on body:not([data-page="home"]) .tl-item::before, html.mo-on body:not([data-page="home"]) .tl-item:last-child::before { width: 12px !important; height: 12px !important; left: 1px !important; top: 6px !important; border-radius: 50% !important; box-shadow: 0 0 0 5px var(--mo-surface, #F6F6FE) !important; animation: none !important; background: linear-gradient(135deg, #0A84FF, #7C3AED) !important; }
html.mo-on body:not([data-page="home"]) :is(.mo-h-night, .mo-h-cinema, .stage-dark) .tl-item::before { box-shadow: 0 0 0 5px #060B1F !important; }
html.mo-on body:not([data-page="home"]) .ks-bg-subtle { --mo-surface: #F1F4F9; }
html.mo-on body:not([data-page="home"]) .ks-section:not(.ks-bg-subtle) { --mo-surface: #FAFBFD; }
html.mo-on body:not([data-page="home"]) :is(.ks-ink, .dark, .stage-dark, .mo-h-night, .mo-h-cinema) :is(h1, h2, h3, h4, h5, h6, .ks-display, .ks-h1, .ks-h2, .ks-h3, .ks-h4):not(.ew-wiz *):not(.ksa *):not(.ks-foot *) { color: #F4F7FF !important; }
html.mo-on body:not([data-page="home"]) :is(.ks-ink, .dark, .stage-dark, .mo-h-night, .mo-h-cinema) :is(h3, h4, .ks-h3, .ks-h4):not(.ew-wiz *):not(.ksa *):not(.ks-foot *) { color: #FFFFFF !important; }
html.mo-on body:not([data-page="home"]) :is(.ks-ink, .dark, .stage-dark, .mo-h-night, .mo-h-cinema) :is(p, li, .ks-lead, .ks-body, .ks-sm, dd, figcaption, blockquote):not(.ew-wiz *):not(.ksa *):not(.ks-foot *) { color: rgba(226,234,255,.8) !important; }
html.mo-on body:not([data-page="home"]) :is(.ks-ink, .dark, .stage-dark, .mo-h-night, .mo-h-cinema) :is(.step-n, .tl-yr, .num, .ks-stat-label, small, dt, [class*="-kicker"], [class*="-label"]):not(.ew-wiz *):not(.ksa *):not(.ks-foot *) { color: #9DBBFF !important; }
html.mo-on body:not([data-page="home"]) :is(.ks-ink, .dark, .stage-dark, .mo-h-night, .mo-h-cinema) .ks-stat-num:not(.ew-wiz *):not(.ksa *):not(.ks-foot *) { color: #FFFFFF !important; }
html.mo-on body:not([data-page="home"]) :is(.ks-ink, .dark, .stage-dark, .mo-h-night, .mo-h-cinema) a:not(.ks-btn):not(.ew-wiz *):not(.ksa *):not(.ks-foot *) { color: #BFD2FF; } html.mo-on body:not([data-page="home"]) :is(.ks-ink, .dark, .stage-dark, .mo-h-night, .mo-h-cinema) a:not(.ks-btn):hover:not(.ew-wiz *):not(.ksa *):not(.ks-foot *) { color: #fff; }
html.mo-on body:not([data-page="home"]) :is(.ks-ink, .dark, .stage-dark, .mo-h-night, .mo-h-cinema) .ks-icon-tile:not(.ew-wiz *):not(.ksa *):not(.ks-foot *) { background: linear-gradient(160deg, rgba(110,155,255,.24), rgba(124,58,237,.18)) !important; border: 1px solid rgba(157,187,255,.34) !important; color: #E6EEFF !important; box-shadow: 0 10px 24px -14px rgba(10,132,255,.55) !important; }
html.mo-on body:not([data-page="home"]) :is(.ks-ink, .dark, .stage-dark, .mo-h-night, .mo-h-cinema) .ks-card:not(.ew-wiz *):not(.ksa *):not(.ks-foot *) { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.1) !important; }
html.mo-on body:not([data-page="home"]) :is(.ks-ink, .dark, .stage-dark, .mo-h-night, .mo-h-cinema) .ks-card:hover:not(.ew-wiz *):not(.ksa *):not(.ks-foot *) { border-color: rgba(157,187,255,.3) !important; }
html.mo-on body:not([data-page="home"]) :is(.ks-ink, .dark, .stage-dark, .mo-h-night, .mo-h-cinema) :is(.ks-media, .mo-fig, figure):not(.ew-wiz *):not(.ksa *):not(.ks-foot *) { background: transparent !important; }
html.mo-on body:not([data-page="home"]) :is(.ks-ink, .dark, .stage-dark, .mo-h-night, .mo-h-cinema) .ks-list li::before:not(.ew-wiz *):not(.ksa *):not(.ks-foot *) { background: linear-gradient(135deg, #6EA8FF, #A78BFA) !important; }
html.mo-on body :is(h1, h2, h3, h4, .ks-display, .ks-h1, .ks-h2, .ks-h3) :is(.mo-w, .mo-wi):not(.ks-grad-text) { color: inherit !important; }
html.mo-on body:not([data-page="home"]) .mo-split .ks-grad-text { background: linear-gradient(90deg, #0033EE 0%, #0A84FF 45%, #7C3AED 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; }
html.mo-on body:not([data-page="home"]) :is(.ks-ink, .dark, .stage-dark, .mo-h-night, .mo-h-cinema) .ks-grad-text { background: linear-gradient(90deg, #7AA6FF 0%, #4DA3FF 45%, #B09BFF 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; }
html.mo-on body:not([data-page="home"]) :is(.ks-ink, .dark, .stage-dark, .mo-h-night, .mo-h-cinema) .ks-icon-tile:not(.ks-foot *) { background: linear-gradient(160deg, rgba(110,155,255,.24), rgba(124,58,237,.18)) !important; border: 1px solid rgba(157,187,255,.34) !important; color: #E6EEFF !important; box-shadow: 0 10px 24px -14px rgba(10,132,255,.55) !important; }
html.mo-on body:not([data-page="home"]) :is(.ks-ink, .dark, .stage-dark, .mo-h-night, .mo-h-cinema) .ks-icon-tile svg { color: #E6EEFF !important; stroke: currentColor !important; opacity: 1 !important; }
html.mo-on body:not([data-page="home"]) :is(.ks-media, .mo-fig, .mo-ed) { background: #0B1330 !important; overflow: hidden !important; }
html.mo-on body:not([data-page="home"]) .ks-bg-subtle :is(.ks-media, .mo-fig, .mo-ed), html.mo-on body:not([data-page="home"]) .ks-section:not(.ks-ink):not(.dark) :is(.ks-media, .mo-fig, .mo-ed) { background: #E9EEF7 !important; }
html.mo-on body:not([data-page="home"]) :is(.ks-media, .mo-fig, .mo-ed) > img, html.mo-on body:not([data-page="home"]) :is(.ks-media, .mo-fig, .mo-ed) img:only-child { display: block !important; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover !important; margin: 0 !important; }
html.mo-on body:not([data-page="home"]) .ks-media--tall { aspect-ratio: 4 / 5; } html.mo-on body:not([data-page="home"]) .ks-media--tall > img { aspect-ratio: auto !important; }
html.mo-on body:not([data-page="home"]) .ks-media { padding: 0 !important; border: 0 !important; }
html.mo-on body:not([data-page="home"]) .mo-split .ks-grad-text, html.mo-on body:not([data-page="home"]) .ks-grad-text { background: linear-gradient(90deg, #0033EE 0%, #0A84FF 45%, #7C3AED 80%, #FF9A76 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; }
html.mo-on body:not([data-page="home"]) :is(.ks-ink, .dark, .stage-dark, .mo-h-night, .mo-h-cinema) .ks-grad-text, html.mo-on body:not([data-page="home"]) :is(.ks-ink, .dark, .stage-dark, .mo-h-night, .mo-h-cinema) .mo-split .ks-grad-text { background: linear-gradient(90deg, #5B8CFF 0%, #0A84FF 45%, #A78BFA 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; }
html body .ks-grad-text, html body .grad, html.mo-on body:not([data-page="home"]) .ks-grad-text { background-image: linear-gradient(90deg, #0033EE 0%, #0A84FF 45%, #7C3AED 80%, #FF9A76 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; -webkit-box-decoration-break: slice; box-decoration-break: slice; animation: none !important; }
html body :is(.ks-ink, .dark, .stage-dark, .mo-h-night, .mo-h-cinema, .ks-foot) .ks-grad-text, html body :is(.ks-ink, .dark, .stage-dark, .mo-h-night, .mo-h-cinema, .ks-foot) .grad, html.mo-on body:not([data-page="home"]) :is(.ks-ink, .dark, .stage-dark, .mo-h-night, .mo-h-cinema, .ks-foot) .ks-grad-text { background-image: linear-gradient(90deg, #5B8CFF 0%, #0A84FF 45%, #A78BFA 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; }
html body .ks-grad-text .mo-w, html body .ks-grad-text .mo-w > span, html body .grad .mo-w, html body .grad .mo-w > span { background: none !important; -webkit-text-fill-color: transparent !important; color: transparent !important; }
html body .ks-grad-text.mo-in .mo-w, html body .ks-grad-text .mo-w.is-in, html body .mo-split.is-in .ks-grad-text .mo-w > span { transform: none !important; }
body:not([data-page="home"]):not([data-page="offer"]) :is(:is(body > section, .ks-foot-lift > section, main > section):first-of-type, :is(body > section, .ks-foot-lift > section, main > section):first-of-type ~ section) { transition: opacity .3s var(--ease-out); }
html.ks-js:not(.mo-on):not(.mo-rm):not(.ks-mo-late) body:not([data-page="home"]):not([data-page="offer"]) :is(:is(body > section, .ks-foot-lift > section, main > section):first-of-type, :is(body > section, .ks-foot-lift > section, main > section):first-of-type ~ section) { opacity: 0; visibility: hidden; }
/* offer.css */
.of-root { display: block; }
.of-ico { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--ks-blue-100); background: var(--ks-blue-50); color: var(--ks-blue); }
.of-ico svg { width: 19px; height: 19px; }
.of-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 13px; color: var(--ks-blue); }
.of-eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, #0A84FF, #7C3AED); }
.of-eyebrow--dark { color: #8DB8FF; }
.of-head { max-width: 720px; margin-bottom: clamp(28px, 4vw, 48px); }
.of-head .ks-h2 { margin-top: 14px; text-wrap: balance; }
.of-head .ks-lead { margin-top: 14px; color: var(--fg2); }
.of-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; color: #8DB8FF; }
.of-link svg { width: 16px; height: 16px; transition: transform .35s var(--ease-out); } .of-link:hover svg { transform: translateX(4px); }
.of-top { position: relative; padding: clamp(118px, 13vw, 164px) 0 clamp(56px, 7vw, 96px);  overflow: hidden;  background: #fff !important; background-image: none !important; }
.of-top::before { content: ""; position: absolute; right: -12%; top: -30%; width: 60vw; height: 60vw; background: radial-gradient(closest-side, rgba(10,132,255,.12), rgba(124,58,237,.06) 55%, transparent 72%); pointer-events: none; }
.of-top-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.of-crumb { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; color: var(--fg3); margin-bottom: 22px; }
.of-crumb a { color: var(--fg2); } .of-crumb a:hover { color: var(--ks-blue); } .of-crumb b { font-weight: 600; color: var(--fg1); }
.of-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 10px; background: #fff; border: 1px solid var(--ks-blue-100); color: var(--ks-blue); font-weight: 600; font-size: 13px; box-shadow: 0 6px 18px -12px rgba(10,51,238,.35); }
.of-pill svg { width: 15px; height: 15px; } .of-pill--sm { font-size: 12.5px; padding: 6px 10px; }
.of-h1 { margin-top: 18px; font-size: clamp(2.3rem, 1.4rem + 3vw, 4.1rem); line-height: 1.02; letter-spacing: -.035em; max-width: 16ch; text-wrap: balance; }
.of-sub { margin-top: 20px; max-width: 56ch; font-size: clamp(1.02rem, .96rem + .3vw, 1.18rem); line-height: 1.6; color: var(--fg2); }
.of-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.of-micro { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 16px; font-size: 13.5px; color: var(--fg2); }
.of-micro svg { width: 15px; height: 15px; color: var(--ks-blue); margin-right: -8px; }
.of-cred { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--border); }
.of-cred > div { display: flex; gap: 11px; align-items: flex-start; }
.of-cred .of-ico { width: 34px; height: 34px; } .of-cred .of-ico svg { width: 16px; height: 16px; }
.of-cred b { display: block; font-size: 14px; font-weight: 600; color: var(--fg1); } .of-cred small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--fg3); }
.of-top-vis { position: relative; }
.of-top-tag { position: absolute; left: -14px; bottom: 26px; display: inline-flex; gap: 8px; align-items: center; padding: 10px 14px; border-radius: 10px; background: var(--ink); color: #fff; font-weight: 600; font-size: 13px; box-shadow: 0 18px 40px -18px rgba(7,16,51,.6); }
.of-top-tag svg { width: 15px; height: 15px; color: #8DB8FF; }
.of-report { position: relative; border-radius: 12px; background: #fff; border: 1px solid var(--border); box-shadow: 0 40px 80px -36px rgba(7,16,51,.35), 0 2px 8px rgba(7,16,51,.05); overflow: hidden; transform: rotate(-1.2deg); transition: transform .8s var(--ease-out); }
.of-top-vis:hover .of-report { transform: rotate(0deg) translateY(-4px); }
.of-report-bar { display: flex; align-items: center; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--slate-150); background: var(--slate-50); }
.of-report-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--slate-200); }
.of-report-bar span { margin-left: 10px; font-size: 12.5px; font-weight: 600; color: var(--fg2); }
.of-report-body { padding: 22px 22px 20px; }
.of-report-body small { font-size: 12px; font-weight: 600; color: var(--ks-blue); }
.of-report-body > b { display: block; margin: 6px 0 16px; font-size: 19px; letter-spacing: -.02em; color: var(--fg1); }
.of-rrow { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--slate-150); margin-top: 8px; font-size: 14px; opacity: 0; transform: translateY(8px); animation: ofRow .6s var(--ease-out) forwards; animation-delay: calc(.35s + var(--i) * .12s); }
.of-rrow span { font-weight: 600; color: var(--fg2); font-size: 13px; } .of-rrow em { font-style: normal; color: var(--fg1); }
.of-rrow.is-hi { border-color: var(--ks-blue-100); background: linear-gradient(90deg, var(--ks-blue-50), #fff); } .of-rrow.is-hi span { color: var(--ks-blue); }
.of-report-foot { display: flex; gap: 8px; margin-top: 16px; } .of-report-foot span { height: 8px; border-radius: 4px; background: var(--slate-150); flex: 1; } .of-report-foot span:first-child { flex: 2.4; background: linear-gradient(90deg, #0A84FF, #7C3AED); }
@keyframes ofRow { to { opacity: 1; transform: none; } }
.of-report--big { transform: none; }
.of-dark .of-report { border-color: rgba(255,255,255,.12); }
.of-split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.of-split .of-head { position: sticky; top: 120px; margin-bottom: 0; }
.of-probs { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.of-probs li { display: flex; gap: 16px; align-items: flex-start; padding: 20px 22px; border-radius: 10px; border: 1px solid var(--border); background: #fff; transition: border-color .35s var(--ease-out), transform .35s var(--ease-out), box-shadow .35s var(--ease-out); }
.of-probs li:hover { border-color: var(--ks-blue-100); transform: translateX(4px); box-shadow: 0 16px 36px -26px rgba(7,16,51,.35); }
.of-probs h3 { margin: 2px 0 6px; font-size: 17.5px; letter-spacing: -.015em; } .of-probs p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--fg2); }
.of-dark { position: relative; }
.of-dark .ks-h2, .of-dark h3 { color: #fff !important; }
.of-dark .ks-lead, .of-dark p, .of-dark dd, .of-dark li span { color: rgba(220,233,255,.78) !important; }
.of-recv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.of-deliv { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255,255,255,.12); }
.of-deliv li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; padding: 20px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.of-n { font-weight: 600; font-size: 14px; color: #8DB8FF !important; padding-top: 3px; }
.of-deliv h3 { margin: 0 0 6px; font-size: 18px; letter-spacing: -.015em; } .of-deliv p { margin: 0; font-size: 15px; line-height: 1.55; }
.of-recv-vis { position: sticky; top: 120px; }
.of-note { margin: 14px 0 0; font-size: 13px; color: rgba(220,233,255,.55) !important; }
.of-who { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.of-persona { padding: 26px 24px; border-radius: 10px; border: 1px solid var(--border); background: #fff; }
.of-persona h3 { margin: 18px 0 8px; font-size: 18px; letter-spacing: -.015em; } .of-persona p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--fg2); }
.of-uses { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 22px; }
.of-uses > span { font-weight: 600; font-size: 14px; color: var(--fg1); margin-right: 6px; }
.of-uses em { font-style: normal; display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 10px; background: var(--slate-50); border: 1px solid var(--border); font-size: 14px; color: var(--fg1); }
.of-uses em svg { width: 14px; height: 14px; color: var(--ks-blue); }
.of-fit { display: flex; gap: 10px; align-items: flex-start; margin: 18px 0 0; font-size: 14px; color: var(--fg2); } .of-fit svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--fg3); }
.of-outs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.of-out { padding: 24px 22px 26px; border-radius: 10px; background: #fff; border: 1px solid var(--border); }
.of-out h3 { margin: 18px 0 6px; font-size: 17px; letter-spacing: -.015em; } .of-out p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--fg2); }
.of-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-top: 26px; padding: 22px 24px; border-radius: 10px; background: var(--ink); color: #fff; }
.of-band b { display: block; font-size: 18px; letter-spacing: -.015em; } .of-band span { display: block; margin-top: 4px; font-size: 14.5px; color: rgba(220,233,255,.75); }
.of-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; position: relative; }
.of-steps::before { content: ""; position: absolute; left: 18px; right: 18px; top: 17px; height: 2px; background: var(--slate-150); }
.of-steps::after { content: ""; position: absolute; left: 18px; top: 17px; height: 2px; width: 0; background: linear-gradient(90deg, #0033EE, #0A84FF 60%, #7C3AED); transition: width 1.6s var(--ease-out) .2s; }
.of-steps.is-in::after { width: calc(100% - 36px); }
.of-steps li { position: relative; }
.of-dot { position: relative; z-index: 1; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: #fff; border: 2px solid var(--ks-blue); color: var(--ks-blue); font-weight: 700; font-size: 14px; }
.of-steps small { display: block; margin-top: 18px; font-weight: 600; font-size: 13px; color: var(--ks-blue); }
.of-steps h3 { margin: 6px 0 6px; font-size: 18px; letter-spacing: -.015em; } .of-steps p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--fg2); }
.of-proof { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.of-proof-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.of-proof-list li { padding-left: 18px; border-left: 2px solid rgba(141,184,255,.35); }
.of-proof-list b { display: block; font-size: 16.5px; color: #fff; } .of-proof-list span { display: block; margin-top: 4px; font-size: 15px; line-height: 1.55; }
.of-case { margin: 0; padding: 28px 28px 26px; border-radius: 10px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); }
.of-case-ctx { margin: 14px 0 18px !important; font-size: 19px !important; line-height: 1.35; color: #fff !important; letter-spacing: -.015em; }
.of-case dl { margin: 0 0 20px; display: grid; gap: 14px; } .of-case dt { font-weight: 600; font-size: 13px; color: #8DB8FF; } .of-case dd { margin: 4px 0 0; font-size: 15px; line-height: 1.55; }
.of-book { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.of-faq details { border-bottom: 1px solid var(--border); }
.of-faq details:first-child { border-top: 1px solid var(--border); }
.of-faq summary { list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 18px 0; cursor: pointer; font-weight: 600; font-size: 16.5px; color: var(--fg1); }
.of-faq summary::-webkit-details-marker { display: none; }
.of-pl { position: relative; width: 14px; height: 14px; flex: none; } .of-pl::before, .of-pl::after { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; border-radius: 2px; background: var(--ks-blue); transition: transform .3s var(--ease-out); } .of-pl::after { transform: rotate(90deg); } details[open] .of-pl::after { transform: rotate(0); }
.of-faq p { margin: 0 0 18px; font-size: 15px; line-height: 1.6; color: var(--fg2); max-width: 60ch; }
.of-formcard { position: sticky; top: 104px; padding: 28px; border-radius: 12px; background: #fff; border: 1px solid var(--border); box-shadow: 0 40px 80px -40px rgba(7,16,51,.35); }
.of-form-head h3 { margin: 14px 0 6px; font-size: 22px; letter-spacing: -.02em; } .of-form-head p { margin: 0 0 20px; font-size: 14.5px; color: var(--fg2); }
.of-f { display: grid; gap: 6px; margin-bottom: 14px; }
.of-f label { font-weight: 600; font-size: 13.5px; color: var(--fg1); } .of-f label em { font-style: normal; font-weight: 400; color: var(--fg3); }
.of-inwrap { position: relative; }
.of-f input, .of-f select, .of-f textarea { width: 100%; min-height: 48px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border-strong); background: #fff; font: inherit; font-size: 16px; color: var(--fg1); transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out); appearance: none; -webkit-appearance: none; }
.of-f textarea { resize: vertical; min-height: 88px; }
.of-f input::placeholder, .of-f textarea::placeholder { color: var(--slate-400); }
.of-f input:hover, .of-f select:hover, .of-f textarea:hover { border-color: var(--slate-400); }
.of-f input:focus, .of-f select:focus, .of-f textarea:focus { outline: none; border-color: var(--ks-blue); box-shadow: 0 0 0 3px var(--ring); }
.of-f input:disabled { background: var(--slate-50); color: var(--fg3); cursor: not-allowed; }
.of-ok { position: absolute; right: 12px; top: 50%; transform: translateY(-50%) scale(.6); opacity: 0; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--success-bg); color: var(--success); transition: all .25s var(--ease-out); pointer-events: none; }
.of-ok svg { width: 13px; height: 13px; }
.of-f.is-ok .of-ok { opacity: 1; transform: translateY(-50%); } .of-f.is-ok input { border-color: rgba(19,138,91,.5); padding-right: 42px; }
.of-err { display: none; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--danger); } .of-err svg { width: 14px; height: 14px; flex: none; }
.of-f.is-bad .of-err { display: flex; } .of-f.is-bad input { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(212,72,59,.12); }
.of-sel { position: relative; } .of-sel svg { position: absolute; right: 14px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); pointer-events: none; color: var(--fg3); } .of-sel select { padding-right: 40px; }
.of-submit { width: 100%; margin-top: 6px; justify-content: center; }
.of-submit.is-busy { pointer-events: none; opacity: .8; }
.of-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; animation: ofSpin .8s linear infinite; margin-right: 8px; display: inline-block; vertical-align: -3px; }
@keyframes ofSpin { to { transform: rotate(360deg); } }
.of-fail { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: var(--danger-bg); border: 1px solid rgba(212,72,59,.3); font-size: 14px; color: var(--fg1); }
.of-fail[hidden] { display: none; } .of-fail svg { width: 16px; height: 16px; flex: none; color: var(--danger); margin-top: 2px; }
.of-fail b { color: var(--danger); } .of-fail button { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--ks-blue); text-decoration: underline; cursor: pointer; } .of-fail a { color: var(--ks-blue); }
.of-fine { display: flex; gap: 8px; align-items: flex-start; margin: 14px 0 0; font-size: 12.5px; color: var(--fg3); } .of-fine svg { width: 14px; height: 14px; flex: none; margin-top: 1px; } .of-fine a { color: var(--fg2); text-decoration: underline; }
.of-form.is-shake { animation: ofShake .35s var(--ease-out); }
@keyframes ofShake { 0%, 100% { transform: none; } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.of-done { outline: none; animation: ofIn .5s var(--ease-out) both; } .of-done[hidden] { display: none; }
@keyframes ofIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.of-done-ico { width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; background: var(--success-bg); color: var(--success); } .of-done-ico svg { width: 26px; height: 26px; }
.of-done h3 { margin: 18px 0 8px; font-size: 24px; letter-spacing: -.02em; } .of-done > p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--fg2); } .of-done > p b { color: var(--fg1); font-weight: 600; }
.of-next { list-style: none; margin: 20px 0 0; padding: 0; border-top: 1px solid var(--border); }
.of-next li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 14px; } .of-next b { color: var(--ks-blue); font-weight: 600; } .of-next span { color: var(--fg1); }
.of-done-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.of-more { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.of-more-card { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 10px; background: #fff; border: 1px solid var(--border); color: inherit; transition: border-color .3s var(--ease-out), transform .35s var(--ease-out), box-shadow .35s var(--ease-out); }
.of-more-card:hover { color: inherit; border-color: var(--ks-blue-100); transform: translateY(-3px); box-shadow: 0 22px 44px -30px rgba(7,16,51,.35); }
.of-more-card small { font-weight: 600; font-size: 13px; color: var(--ks-blue); } .of-more-card h3 { margin: 0; font-size: 19px; letter-spacing: -.02em; } .of-more-card span { font-size: 14.5px; line-height: 1.55; color: var(--fg2); flex: 1; }
.of-more-card em { font-style: normal; display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 14px; color: var(--ks-blue); } .of-more-card em svg { width: 15px; height: 15px; transition: transform .35s var(--ease-out); } .of-more-card:hover em svg { transform: translateX(4px); }
.of-mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 950; display: none; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--border); box-shadow: 0 -12px 30px -20px rgba(7,16,51,.35); transform: translateY(110%); transition: transform .4s var(--ease-out); }
.of-mbar b { display: block; font-size: 14px; color: var(--fg1); } .of-mbar small { display: block; font-size: 12.5px; color: var(--fg3); }
.of-mbar.is-on { transform: none; }
@media (max-width: 1100px) { .of-outs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 991px) {
  .of-top-grid, .of-split, .of-recv, .of-proof, .of-book { grid-template-columns: 1fr; }
  .of-split .of-head, .of-recv-vis, .of-formcard { position: static; }
  .of-top-vis { max-width: 560px; }
  .of-who, .of-more { grid-template-columns: 1fr 1fr; }
  .of-steps { grid-template-columns: 1fr 1fr; row-gap: 32px; } .of-steps::before, .of-steps::after { display: none; }
  .of-book .of-form-col { order: -1; }
}
@media (max-width: 720px) {
  .of-top { padding-top: 104px;  background: #fff !important; background-image: none !important; }
  .of-h1 { font-size: clamp(2rem, 1.3rem + 4vw, 2.7rem); }
  .of-ctas .ks-btn { width: 100%; justify-content: center; }
  .of-cred { grid-template-columns: 1fr; gap: 12px; }
  .of-top-tag { left: 10px; bottom: 14px; }
  .of-who, .of-more, .of-outs, .of-steps { grid-template-columns: 1fr; }
  .of-rrow { grid-template-columns: 96px minmax(0, 1fr); font-size: 13.5px; }
  .of-formcard { padding: 22px 18px; }
  .of-next li { grid-template-columns: 1fr; gap: 2px; }
  .of-band { flex-direction: column; align-items: stretch; } .of-band .ks-btn { justify-content: center; }
  .of-mbar { display: flex; }
  body.of-mbar-on .ksa-launcher { bottom: 84px !important; }
}
@media (prefers-reduced-motion: reduce) { .of-rrow { animation: none; opacity: 1; transform: none; } .of-report, .of-probs li { transition: none; } }
main.of-root, body[data-page="offer"] main.of-root { padding-top: 0 !important; }
body[data-page="offer"] .of-top {  color: var(--fg1) !important;     background: #fff !important; background-image: none !important; }
body[data-page="offer"] .of-top > .mo-hv, body[data-page="offer"] .of-top > .amb, body[data-page="offer"] .of-top > .kn-field, body[data-page="offer"] .of-top > .as { display: none !important; }
body[data-page="offer"] .of-top-vis { display: block !important; }
body[data-page="offer"] .of-top .ks-display, body[data-page="offer"] .of-top h1 { color: var(--ink) !important; }
html body .ks-ink.of-dark b, html body .ks-ink.of-dark strong, html body .ks-ink.of-dark h2, html body .ks-ink.of-dark h3, html body .ks-ink.of-dark .of-case-ctx { color: #fff !important; -webkit-text-fill-color: #fff; }
html body .ks-ink.of-dark .of-n, html body .ks-ink.of-dark dt { color: #8DB8FF !important; -webkit-text-fill-color: #8DB8FF; }
html body .ks-ink.of-dark .ks-grad-text { -webkit-text-fill-color: transparent; }
.of-ai { position: sticky; top: 104px; padding: 26px; border-radius: 12px; background: #fff; border: 1px solid var(--border); box-shadow: 0 40px 80px -40px rgba(7,16,51,.35); overflow: hidden; }
.of-ai::before { content: ""; position: absolute; left: -20%; right: -20%; top: -120px; height: 220px; background: radial-gradient(closest-side, rgba(10,132,255,.14), rgba(124,58,237,.08) 55%, transparent 75%); pointer-events: none; }
.of-ai > * { position: relative; }
.of-ai-head { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.of-ai-mark { width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; color: var(--ks-blue); border: 1px solid var(--ks-blue-100); background: var(--ks-blue-50); }
.of-ai-mark svg { width: 20px; height: 20px; fill: none; animation: ofMark 4.8s ease-in-out infinite; }
@keyframes ofMark { 0%, 100% { transform: rotate(0) scale(1); } 50% { transform: rotate(12deg) scale(1.06); } }
.of-ai-head b { display: block; font-size: 16px; letter-spacing: -.01em; color: var(--fg1); }
.of-ai-head small { display: flex; align-items: center; gap: 7px; margin-top: 3px; font-size: 13px; color: var(--fg3); }
.of-ai-head small i { width: 7px; height: 7px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 3px rgba(34,197,94,.18); }
.of-ai-chat { display: grid; gap: 10px; padding: 18px 0 6px; }
.of-ai-msg { max-width: 88%; opacity: 0; transform: translateY(8px); }
.of-ai-msg p { margin: 0; padding: 11px 14px; border-radius: 10px 10px 10px 4px; background: var(--slate-50); border: 1px solid var(--border); font-size: 14.5px; line-height: 1.5; color: var(--fg1); }
.of-ai-msg--me { justify-self: end; } .of-ai-msg--me p { border-radius: 10px 10px 4px 10px; background: var(--ks-blue); border-color: var(--ks-blue); color: #fff; }
.of-ai-typing { display: inline-flex; gap: 5px; padding: 12px 14px; width: fit-content; border-radius: 10px; background: var(--slate-50); border: 1px solid var(--border); opacity: 0; }
.of-ai-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--slate-400); animation: ofDot 1.2s ease-in-out infinite; } .of-ai-typing i:nth-child(2) { animation-delay: .15s; } .of-ai-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes ofDot { 0%, 80%, 100% { transform: none; opacity: .5; } 40% { transform: translateY(-3px); opacity: 1; } }
.of-form-col.is-in .of-ai-msg, .of-form-col.is-in .of-ai-typing { animation: ofMsg .5s var(--ease-out) forwards; animation-delay: calc(.25s + var(--i) * .55s); }
@keyframes ofMsg { to { opacity: 1; transform: none; } }
.of-ai-start { margin: 14px 0 16px; }
.of-ai-start > span { display: block; font-weight: 600; font-size: 13.5px; color: var(--fg1); margin-bottom: 10px; }
.of-ai-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.of-ai-chips button { padding: 9px 12px; border-radius: 10px; border: 1px solid var(--border-strong); background: #fff; font: inherit; font-size: 14px; color: var(--fg1); cursor: pointer; transition: border-color .25s var(--ease-out), background .25s var(--ease-out), color .25s var(--ease-out), transform .25s var(--ease-out); }
.of-ai-chips button:hover { border-color: var(--ks-blue); background: var(--ks-blue-50); color: var(--ks-blue); transform: translateY(-1px); }
.of-ai-chips button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
.of-ai-ask { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 10px; padding: 10px; border: 0; background: none; font: inherit; font-weight: 600; font-size: 14px; color: var(--ks-blue); cursor: pointer; border-radius: 10px; }
.of-ai-ask:hover { background: var(--ks-blue-50); } .of-ai-ask svg { width: 16px; height: 16px; fill: none; }
.of-ai .of-next { margin-top: 16px; }
@media (max-width: 991px) { .of-ai { position: static; } }
@media (max-width: 720px) { .of-ai { padding: 20px 16px; } }
@media (prefers-reduced-motion: reduce) { .of-ai-msg, .of-ai-typing { opacity: 1; transform: none; animation: none !important; } .of-ai-mark svg { animation: none; } }
.of-top-vis { padding-bottom: 58px; }
.of-top-tag { left: 18px; bottom: 0; }
@media (max-width: 720px) { .of-top-tag { left: 10px; bottom: 0; } }
.of-top--scene { position: relative; height: 380vh; padding: 0 !important; background: transparent !important; --p: 0; }
#of-root:empty { display: block; min-height: 100vh; background: radial-gradient(70% 60% at 20% 10%, rgba(10,132,255,.35), transparent 60%), radial-gradient(50% 50% at 90% 90%, rgba(124,58,237,.28), transparent 60%), #071033; }
.of-top--scene::before { display: none; }
.ofs-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; 
  --e1: clamp(0, calc((var(--p) - .04) / .46), 1); --e2: clamp(0, calc((var(--p) - .30) / .22), 1); --e3: clamp(0, calc((var(--p) - .40) / .18), 1);
  --t0: clamp(0, calc(var(--p) / .18), 1);
  --w1: clamp(0, calc((var(--p) - .46) / .14), 1); --w1o: clamp(0, calc((var(--p) - .76) / .08), 1);
  --a1: clamp(0, calc((var(--p) - .56) / .10), 1); --a2: clamp(0, calc((var(--p) - .62) / .10), 1); --ao: clamp(0, calc((var(--p) - .78) / .08), 1);
  --w2: clamp(0, calc((var(--p) - .84) / .12), 1); --sw: clamp(0, calc((var(--p) - .78) / .12), 1); --b1: clamp(0, calc((var(--p) - .90) / .07), 1); --b2: clamp(0, calc((var(--p) - .94) / .06), 1);
  --c: clamp(0, calc((var(--p) - .50) / .12), 1);  background: #fff !important; background-image: none !important; }
.ofs-panel { position: absolute; inset: 0; z-index: 1; overflow: hidden; background: radial-gradient(70% 60% at 20% 10%, rgba(10,132,255,.35), transparent 60%), radial-gradient(50% 50% at 90% 90%, rgba(124,58,237,.28), transparent 60%), #071033;
  border-radius: calc(10px + 520px * var(--e1)); transform-origin: 50% 32%; transform: translateY(calc(-4vh * var(--e1))) scale(calc(1 - .66 * var(--e1)), calc(1 - .82 * var(--e1))); filter: blur(calc(26px * var(--e2))); opacity: calc(1 - var(--e3)); will-change: transform, filter, opacity; }
.ofs-panel.is-gone { visibility: hidden; pointer-events: none; }
.ofs-panel > .amb { border-radius: inherit; }
.ofs-copy { position: absolute; left: 0; right: 0; top: clamp(92px, 11vh, 140px); z-index: 4; text-align: center; display: flex; flex-direction: column; align-items: center; opacity: calc(1 - var(--t0)); transform: translateY(calc(-36px * var(--t0))); will-change: opacity, transform; }
.ofs-copy .of-crumb { justify-content: center; color: rgba(220,233,255,.6); } .ofs-copy .of-crumb a { color: rgba(220,233,255,.75); } .ofs-copy .of-crumb b { color: #fff; } .ofs-copy .of-crumb span { color: rgba(220,233,255,.45); }
.ofs-copy .of-pill { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); color: #DCE9FF; box-shadow: none; }
html.mo-on body .ofs-copy .of-h1, html body .ofs-copy .of-h1, html body:not([data-page="home"]) .ofs-copy .ks-display { color: #fff !important; -webkit-text-fill-color: #fff; max-width: 22ch; margin-left: auto; margin-right: auto; font-size: clamp(2.1rem, 1.3rem + 2.8vw, 3.9rem); }
html.mo-on body .ofs-copy .of-h1 .ks-grad-text, html body .ofs-copy .of-h1 .ks-grad-text, html body .ofs-copy .ks-grad-text .mo-w > span { background-image: linear-gradient(90deg, #8DB8FF 0%, #ffffff 50%, #C4B5FD 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; }
.ofs-copy .of-sub { color: rgba(220,233,255,.82); margin: 14px auto 0; max-width: 52ch; font-size: clamp(1rem, .95rem + .3vw, 1.15rem); }
.ofs-copy .of-ctas { justify-content: center; margin-top: 22px; } .ofs-copy .of-micro { justify-content: center; color: rgba(220,233,255,.72); } .ofs-copy .of-micro svg { color: #8DB8FF; }
.of-top--scene.is-past .ofs-copy { pointer-events: none; }
.of-btn-white { background: #fff !important; border-color: #fff !important; color: var(--ink) !important; box-shadow: 0 18px 40px -18px rgba(7,16,51,.5) !important; } .of-btn-white:hover { color: var(--ks-blue) !important; }
.of-btn-ghost { background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.28) !important; color: #fff !important; } .of-btn-ghost:hover { background: rgba(255,255,255,.16) !important; border-color: #fff !important; color: #fff !important; }
.ofs-person2 { position: absolute; left: 50%; bottom: 0; top: calc(var(--copyB, 42vh) * (1 - var(--t0)) + var(--wordsB, 34vh) * var(--t0) + 10px); z-index: 4; width: min(520px, 84vw); transform: translateX(-50%); display: flex; align-items: flex-end; justify-content: center; pointer-events: none;
  opacity: 1; will-change: top; }
.ofs-person2 img { position: relative; z-index: 1; width: 100%; max-height: 100%; object-fit: contain; object-position: 50% 100%; display: block;
  filter: grayscale(calc(.82 * (1 - var(--sw)))) brightness(calc(.9 + .1 * var(--sw))) drop-shadow(0 18px 28px rgba(7,16,51,.22));
  transform: translateY(calc(22px * (1 - var(--sw)))) scale(calc(.96 + .04 * var(--sw))); transform-origin: 50% 100%; will-change: transform, filter; }
.ofs-ground { position: absolute; left: 50%; bottom: -6px; width: 120%; height: 60px; transform: translateX(-50%) scaleX(calc(.8 + .2 * var(--sw))); border-radius: 50%; background: radial-gradient(50% 50% at 50% 50%, rgba(10,91,240,.18), rgba(10,91,240,0) 70%); filter: blur(10px); }
.ofs-words { position: absolute; left: 0; right: 0; top: clamp(96px, 13vh, 160px); z-index: 4; padding: 0 var(--gutter); text-align: center; pointer-events: none; }
.ofs-words .ks-h2 { max-width: 24ch; margin: 0 auto; font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.4rem); letter-spacing: -.03em; color: var(--ink) !important; text-wrap: balance; }
.ofs-words p { max-width: 58ch; margin: 16px auto 0; font-size: clamp(1rem, .95rem + .3vw, 1.15rem); line-height: 1.55; color: var(--fg2); }
.ofs-w1 { opacity: calc(var(--w1) * (1 - var(--w1o))); transform: translateY(calc(24px * (1 - var(--w1)) - 20px * var(--w1o))); }
.ofs-w2 { opacity: var(--w2); transform: translateY(calc(24px * (1 - var(--w2)))); }
.ofs-th { position: absolute; z-index: 2; width: clamp(140px, 15vw, 230px); aspect-ratio: 3 / 4; border-radius: 18px; overflow: hidden; box-shadow: 0 34px 70px -30px rgba(7,16,51,.45); will-change: transform, opacity; }
.ofs-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ofs-a1 { left: 7%; top: 24%; --in: var(--a1); --out: var(--ao); --r: -7deg; --dx: -1; }
.ofs-a2 { right: 7%; top: 28%; --in: var(--a2); --out: var(--ao); --r: 6deg; --dx: 1; }
.ofs-b1 { left: 8%; top: 40%; z-index: 2; --in: var(--b1); --out: 0; --r: 5deg; --dx: -1; --slide: 90px; }
.ofs-b2 { right: 8%; top: 34%; z-index: 2; --in: var(--b2); --out: 0; --r: -6deg; --dx: 1; --slide: 90px; }
.ofs-th { --slide: 40px; opacity: calc(var(--in) * (1 - var(--out))); transform: translate(calc(var(--dx) * (-1 * var(--slide) * (1 - var(--in)) + 70px * var(--out))), calc(30px * (1 - var(--in)))) rotate(var(--r)) scale(calc(.82 + .18 * var(--in))); }
.ofs-cta { position: absolute; right: 24px; bottom: 24px; z-index: 5; width: 250px; display: none; padding: 16px 16px 14px; border-radius: 12px; background: rgba(255,255,255,.94); border: 1px solid var(--border); box-shadow: 0 30px 60px -30px rgba(7,16,51,.45); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  opacity: var(--c); transform: translateY(calc(20px * (1 - var(--c)))); pointer-events: none; }
.of-top--scene.is-past .ofs-cta { pointer-events: auto; }
.ofs-cta small { display: block; font-size: 12.5px; font-weight: 600; color: var(--ks-blue); } .ofs-cta b { display: block; margin: 4px 0 12px; font-size: 15px; letter-spacing: -.01em; color: var(--ink); } .ofs-cta .ks-btn { width: 100%; justify-content: center; }
@media (min-width: 1100px) { .ofs-cta { display: block; } }
@media (max-width: 991px) { .ofs-th { width: clamp(110px, 18vw, 170px); } .ofs-a1, .ofs-b1 { left: 4%; } .ofs-a2, .ofs-b2 { right: 4%; } .ofs-person2 { width: clamp(260px, 44vw, 420px); } }
@media (max-width: 720px) {
  .of-top--scene { height: 300vh; }
  .ofs-copy { top: 92px; padding: 0 16px; } .ofs-copy .of-crumb { display: none; } .ofs-copy .of-ctas .ks-btn { width: 100%; justify-content: center; }
  .ofs-th { width: 34vw; } .ofs-a1, .ofs-b1 { left: 3%; top: 38%; } .ofs-a2, .ofs-b2 { right: 3%; top: 42%; }
  .ofs-words { top: 88px; padding: 0 16px; }
  .ofs-cta { display: block; left: 14px; right: 14px; bottom: 14px; width: auto; }
}
@media (prefers-reduced-motion: reduce) { .ofs-panel { transition: none; } }
.ofs-k { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 13px; font-weight: 600; color: #B4552E; }
.ofs-k::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #FF9A76; }
.ofs-k--sol { color: var(--ks-blue); } .ofs-k--sol::before { background: linear-gradient(135deg, #0A84FF, #7C3AED); }
.ofs-th span { position: absolute; left: 10px; right: 10px; bottom: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(7,16,51,.72); color: #fff; font-size: 12px; font-weight: 600; line-height: 1.3; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.ofs-th:not(.is-sol) img { filter: saturate(.55) contrast(1.05); }
.ofs-th:not(.is-sol) span { background: rgba(60,20,10,.7); }
.ofs-th.is-sol span { background: rgba(10,91,240,.82); }
@media (max-width: 1180px) {
  .ofs-a1, .ofs-a2 { top: calc(var(--wordsB, 34vh) + 18px); } .ofs-b1, .ofs-b2 { top: calc(var(--wordsB, 34vh) + 72px); }
  .ofs-a1, .ofs-b1 { left: 3%; } .ofs-a2, .ofs-b2 { right: 3%; }
  .ofs-th { width: clamp(120px, 17vw, 190px); }
}
@media (max-width: 720px) { .ofs-a1, .ofs-a2 { top: calc(var(--wordsB, 40vh) + 12px); } .ofs-b1, .ofs-b2 { top: calc(var(--wordsB, 40vh) + 48px); } .ofs-th { width: 30vw; } }
@media (max-width: 720px) { .ofs-person2 { width: min(340px, 84vw); top: calc(var(--copyB, 50vh) * (1 - var(--t0)) + var(--wordsB, 40vh) * var(--t0) + 6px); } }
@media (prefers-reduced-motion: reduce) { .ofs-person2, .ofs-person2 img { transition: none; } }
.ofs-stage .ofs-th > span { display: none !important; }
.ofs-stage .ofs-cta { display: none !important; }
html body .ofs-stage .ofs-words h2, html body .of-top .of-h1 { background-image: none !important; -webkit-text-fill-color: var(--ink) !important; color: var(--ink) !important; }
html body .ofs-stage .ofs-copy h1, html body .ofs-copy .of-h1 { background-image: none !important; -webkit-text-fill-color: #fff !important; color: #fff !important; }
html body .ofs-stage .ofs-words h2 .ks-grad-text, html body .of-top .of-h1 .ks-grad-text, html body .ofs-words .ks-grad-text .mo-w > span { background-image: linear-gradient(90deg, #0033EE 0%, #0A84FF 45%, #7C3AED 80%, #FF9A76 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; }
html body .ofs-stage .ofs-copy h1 .ks-grad-text, html.mo-on body .ofs-copy .of-h1 .ks-grad-text, html body .ofs-copy .of-h1 .ks-grad-text, html body .ofs-copy .ks-grad-text, html body .ofs-copy .ks-grad-text .mo-w > span { background-image: linear-gradient(90deg, #5B8CFF 0%, #0A84FF 45%, #A78BFA 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; }
html body section.ks-section.ofr-sec {   background: #fff !important; background-image: none !important; }
.ofr { position: relative; background: #fff; border: 1px solid rgba(10,91,240,.08); border-radius: 22px; padding: clamp(28px, 4vw, 56px) clamp(22px, 4vw, 56px) clamp(32px, 4vw, 52px); box-shadow: 0 40px 90px -60px rgba(7,16,51,.28), 0 1px 0 rgba(255,255,255,.8) inset; overflow: hidden; }
.ofr::before { content: ""; position: absolute; left: -10%; top: -30%; width: 55%; height: 70%; background: radial-gradient(closest-side, rgba(10,132,255,.10), rgba(124,58,237,.04) 60%, transparent 75%); pointer-events: none; }
.ofr-top { position: relative; display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.38fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.ofr-copy { padding-top: 6px; }
.ofr-copy .of-eyebrow { display: inline-flex; margin-bottom: 22px; }
.ofr-app { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 16px; background: linear-gradient(135deg, #0A5BF0 0%, #3D6BFF 55%, #7C3AED 100%); color: #fff; box-shadow: 0 16px 34px -16px rgba(10,91,240,.65), 0 1px 0 rgba(255,255,255,.25) inset; }
.ofr-app svg { width: 30px; height: 30px; }
.ofr-title { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 22px; }
.ofr-title h2 { margin: 0; font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.5rem); line-height: 1.1; letter-spacing: -.03em; color: var(--ink); text-wrap: balance; }
.ofr-badge { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 10px; border: 1px solid var(--ks-blue-100); background: var(--ks-blue-50); color: var(--ks-blue); font-weight: 600; font-size: 13px; white-space: nowrap; }
.ofr-badge svg { width: 14px; height: 14px; }
.ofr-desc { margin: 16px 0 0; max-width: 42ch; font-size: clamp(1rem, .95rem + .25vw, 1.12rem); line-height: 1.6; color: var(--fg2); }
.ofr-also-l { display: block; margin-top: 22px; font-size: 12.5px; font-weight: 600; color: var(--fg3); }
.ofr-also { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 9px; }
.ofr-also li { display: flex; gap: 9px; align-items: flex-start; font-size: 14.5px; line-height: 1.5; color: var(--fg2); }
.ofr-also li b { color: var(--fg1); font-weight: 600; }
.ofr-also svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--ks-blue); }
.ofr-cta { margin-top: 26px; }
.ofr-shot { position: relative; margin-top: clamp(48px, 6vw, 96px); align-self: start; }
.ofr-pts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px clamp(24px, 3vw, 48px); margin-top: clamp(44px, 5vw, 72px); position: relative; }
.ofr-pts h3 { margin: 0 0 8px; font-size: 18px; letter-spacing: -.015em; color: var(--ink); }
.ofr-pts p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--fg2); }
.ofm { display: grid; grid-template-columns: 196px minmax(0, 1fr); background: #fff; border: 1px solid var(--border); border-right: 0; border-radius: 14px 0 0 14px; box-shadow: 0 34px 80px -44px rgba(7,16,51,.38), 0 2px 8px -4px rgba(7,16,51,.08); overflow: hidden; font-size: 12.5px; color: var(--fg1); text-align: left; }
.ofm b { font-weight: 600; } .ofm small { display: block; font-size: 11px; color: var(--fg3); line-height: 1.35; } .ofm svg { width: 14px; height: 14px; flex: none; }
.ofm-side { display: flex; flex-direction: column; background: #F7F9FE; border-right: 1px solid var(--border); padding: 14px 12px 12px; }
.ofm-brand { display: flex; align-items: center; gap: 9px; padding: 4px 6px 14px; }
.ofm-brand img { width: 24px; height: 24px; object-fit: contain; }
.ofm-brand b { display: block; font-size: 13px; line-height: 1.1; color: var(--ink); } .ofm-brand small { font-size: 10.5px; margin-top: 2px; }
.ofm-nav { display: grid; gap: 2px; } .ofm-nav small { padding: 8px 8px 6px; font-size: 10.5px; font-weight: 600; letter-spacing: 0; }
.ofm-nav a { display: flex; align-items: center; gap: 9px; padding: 8px 9px; border-radius: 8px; font-size: 12.5px; color: var(--fg2); }
.ofm-nav a svg { color: var(--fg3); } .ofm-nav a.is-on { background: #fff; color: var(--ks-blue); font-weight: 600; box-shadow: 0 1px 2px rgba(7,16,51,.06); border: 1px solid var(--border); } .ofm-nav a.is-on svg { color: var(--ks-blue); }
.ofm-user { display: flex; align-items: center; gap: 9px; margin-top: auto; padding: 10px 6px 0; border-top: 1px solid var(--border); }
.ofm-user i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: 10.5px; color: #fff; background: linear-gradient(135deg, #0A84FF, #7C3AED); }
.ofm-user b { font-size: 12px; } .ofm-user small { font-size: 10.5px; }
.ofm-main { min-width: 0; display: flex; flex-direction: column; }
.ofm-top { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.ofm-ico { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: linear-gradient(135deg, #0A5BF0, #7C3AED); color: #fff; }
.ofm-top > div b { font-size: 13px; color: var(--ink); } .ofm-top > div small { font-size: 11.5px; margin-top: 1px; }
.ofm-meta { margin-left: auto; display: flex; align-items: center; gap: 16px; font-size: 11.5px; color: var(--fg3); white-space: nowrap; }
.ofm-meta span { display: inline-flex; align-items: center; gap: 6px; } .ofm-meta i { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px rgba(19,138,91,.15); }
.ofm-bar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--border); }
.ofm-search { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: #fff; color: var(--fg3); font-size: 12px; white-space: nowrap; overflow: hidden; }
.ofm-btn { height: 32px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 8px; background: var(--ks-blue); color: #fff; font-weight: 600; font-size: 12px; white-space: nowrap; }
.ofm-body { padding: 14px 16px 18px; flex: 1; }
.ofm-body [style*="--i"] { opacity: 0; }
.ofr-shot.is-in .ofm-body [style*="--i"] { animation: ofRow .6s var(--ease-out) forwards; animation-delay: calc(.3s + var(--i) * .07s); }
.ofm-chip { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 6px; font-size: 10.5px; font-weight: 600; white-space: nowrap; line-height: 1.3; }
.ofm-chip--ok { background: var(--success-bg); color: var(--success); } .ofm-chip--warn { background: #FFF4E5; color: #A15C00; } .ofm-chip--bad { background: var(--danger-bg); color: var(--danger); }
.ofm-chip--info { background: var(--ks-blue-50); color: var(--ks-blue); } .ofm-chip--muted { background: var(--slate-100); color: var(--fg3); } .ofm-chip--ai { background: #F1EBFF; color: #6D28D9; }
.ofm-av { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; font-weight: 700; font-size: 11px; color: #fff; }
.ofm-av--0 { background: linear-gradient(135deg, #0A84FF, #0A5BF0); } .ofm-av--1 { background: linear-gradient(135deg, #A78BFA, #7C3AED); } .ofm-av--2 { background: linear-gradient(135deg, #FFB694, #FF8A5B); } .ofm-av--3 { background: linear-gradient(135deg, #5EEAD4, #0D9488); }
.ofm-table { display: grid; }
.ofm-tr { display: grid; grid-template-columns: var(--g, 1.6fr 1fr 1fr 1fr); gap: 12px; align-items: center; padding: 10px 12px; border-top: 1px solid var(--slate-100); }
.ofm-th { border-top: 0; padding: 4px 12px 8px; font-size: 11px; font-weight: 600; color: var(--fg3); }
.ofm-name { display: flex; align-items: center; gap: 10px; min-width: 0; } .ofm-name b { display: block; } .ofm-name small { font-size: 10.5px; }
.ofm-prog { display: block; position: relative; height: 6px; border-radius: 3px; background: var(--slate-100); } .ofm-prog i { position: absolute; left: 0; top: 0; height: 100%; width: var(--w); border-radius: 3px; background: linear-gradient(90deg, #0A84FF, #0A5BF0); } .ofm-prog em { position: absolute; left: 0; top: 9px; font-style: normal; font-size: 10.5px; color: var(--fg3); }
.ofm-tr .ofm-prog { margin-bottom: 12px; }
.ofm-rk { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--slate-100); border-radius: 10px; margin-top: 8px; }
.ofm-rk:first-child { margin-top: 0; } .ofm-rk.is-hi { border-color: var(--ks-blue-100); background: linear-gradient(90deg, var(--ks-blue-50), #fff 60%); }
.ofm-pos { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--slate-100); color: var(--fg2); font-size: 12px; } .ofm-rk.is-hi .ofm-pos { background: var(--ks-blue); color: #fff; }
.ofm-sbar { display: block; height: 4px; border-radius: 2px; background: var(--slate-100); margin-top: 8px; overflow: hidden; } .ofm-sbar em { display: block; height: 100%; width: var(--w); border-radius: 2px; background: linear-gradient(90deg, #0A5BF0, #7C3AED); }
.ofm-rkr { display: grid; justify-items: end; gap: 6px; } .ofm-score { font-weight: 700; font-size: 16px; color: var(--ink); letter-spacing: -.02em; }
.ofm-fn { display: grid; grid-template-columns: 150px minmax(0, 1fr) 130px; gap: 12px; align-items: center; padding: 7px 0; }
.ofm-fn i { display: block; height: 22px; width: var(--w); border-radius: 6px; background: linear-gradient(90deg, #0A5BF0, #4C8DFF); } .ofm-fn.is-hot i { background: linear-gradient(90deg, #7C3AED, #FF9A76); }
.ofm-fn small { font-size: 11px; text-align: right; } .ofm-fn.is-hot small { color: #6D28D9; font-weight: 600; }
.ofm-mx { display: grid; grid-template-columns: 1.3fr repeat(3, minmax(0, 1fr)); gap: 10px; align-items: center; padding: 10px 12px; border-top: 1px solid var(--slate-100); }
.ofm-mxh { border-top: 0; padding-top: 2px; font-weight: 600; font-size: 11.5px; color: var(--fg2); } .ofm-mxh span { display: grid; gap: 6px; justify-items: start; } .ofm-mxh .is-pick { color: var(--ks-blue); }
.ofm-dots i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--slate-150); margin-right: 4px; } .ofm-dots i.on { background: var(--ks-blue); } .ofm-dots.is-pick i.on { background: #7C3AED; }
.ofm-graph { display: grid; grid-template-columns: minmax(0, 1fr) 118px minmax(0, 1fr); gap: 10px 22px; align-items: center; padding-top: 4px; }
.ofm-hub { grid-column: 2; grid-row: 1 / span 3; display: grid; place-items: center; height: 100%; }
.ofm-hub b { display: grid; place-items: center; gap: 6px; width: 100%; padding: 16px 10px; border-radius: 12px; background: var(--ink); color: #fff; text-align: center; font-size: 12.5px; box-shadow: 0 16px 34px -18px rgba(7,16,51,.6); } .ofm-hub svg { width: 18px; height: 18px; color: #8DB8FF; }
.ofm-sp { position: relative; display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 9px; align-items: center; padding: 9px 10px; border: 1px solid var(--slate-100); border-radius: 9px; background: #fff; }
.ofm-sp.l { grid-column: 1; } .ofm-sp.r { grid-column: 3; }
.ofm-sp::after { content: ""; position: absolute; top: 50%; width: 22px; height: 1px; background: var(--slate-200); } .ofm-sp.l::after { right: -22px; } .ofm-sp.r::after { left: -22px; }
.ofm-sp i { width: 8px; height: 8px; border-radius: 50%; } .ofm-sp.is-ok i { background: var(--success); } .ofm-sp.is-warn i { background: #F5A623; } .ofm-sp.is-bad i { background: var(--danger); box-shadow: 0 0 0 3px rgba(212,72,59,.15); }
.ofm-sp b { display: block; font-size: 12px; } .ofm-sp small { font-size: 10.5px; }
.ofm-flow { display: flex; align-items: stretch; gap: 4px; }
.ofm-st { flex: 1; min-width: 0; padding: 10px; border: 1px solid var(--slate-100); border-radius: 9px; display: flex; flex-direction: column; gap: 3px; }
.ofm-st.is-human { background: #FFF9F4; border-color: #FFDDC7; } .ofm-st b { font-size: 12px; line-height: 1.25; } .ofm-st .ofm-chip { align-self: flex-start; margin-top: auto; padding-top: 3px; }
.ofm-arrow { display: grid; place-items: center; color: var(--slate-300); flex: none; } .ofm-arrow svg { width: 12px; height: 12px; }
.ofm-foot { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--ks-blue-50); color: var(--ks-blue); font-weight: 600; font-size: 12px; } .ofm-foot svg { color: var(--ks-blue); }
.ofm-gr { display: grid; grid-template-columns: 172px minmax(0, 1fr); gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--slate-100); font-size: 12px; }
.ofm-gh { border-top: 0; padding-top: 0; } .ofm-gh .ofm-track { display: grid; grid-template-columns: repeat(4, 1fr); height: auto; background: none; } .ofm-gh em { font-style: normal; font-size: 10.5px; color: var(--fg3); font-weight: 600; }
.ofm-track { position: relative; height: 18px; border-radius: 5px; background: repeating-linear-gradient(90deg, var(--slate-50) 0 calc(25% - 1px), var(--slate-150) calc(25% - 1px) 25%); }
.ofm-track i { position: absolute; top: 3px; height: 12px; border-radius: 4px; background: linear-gradient(90deg, #4C8DFF, #0A5BF0); } .ofm-track .ofm-bar-hi { background: linear-gradient(90deg, #0A5BF0, #7C3AED); box-shadow: 0 6px 14px -8px rgba(124,58,237,.7); } .ofm-track .ofm-bar-muted { background: var(--slate-200); }
.ofm-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ofm-col { background: var(--slate-50); border-radius: 10px; padding: 10px; }
.ofm-col h6 { display: flex; justify-content: space-between; align-items: center; margin: 0 0 6px; padding: 0 2px; font-size: 12px; font-weight: 600; color: var(--fg1); } .ofm-col h6 span { font-size: 11px; color: var(--fg3); font-weight: 600; }
.ofm-card { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--slate-100); border-radius: 8px; padding: 9px 10px; margin-top: 8px; font-size: 12px; box-shadow: 0 1px 2px rgba(7,16,51,.05); }
.ofm-pipe { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.ofm-stage { padding: 12px 10px; border: 1px solid var(--slate-100); border-radius: 10px; display: grid; gap: 4px; align-content: start; }
.ofm-stage small { font-size: 11px; } .ofm-stage b { font-size: 20px; letter-spacing: -.02em; color: var(--ink); } .ofm-stage em { font-style: normal; font-size: 10.5px; color: var(--fg3); }
.ofm-stage.is-hot { background: #FFF6EF; border-color: #FFD3B8; } .ofm-stage.is-hot b { color: #B4451D; } .ofm-stage .ofm-chip { justify-self: start; margin-top: 4px; }
.ofm-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ofm-kpi { padding: 12px; border: 1px solid var(--slate-100); border-radius: 10px; } .ofm-kpi small { font-size: 11px; } .ofm-kpi b { display: block; margin-top: 4px; font-size: 20px; letter-spacing: -.02em; color: var(--ink); } .ofm-kpi em { display: block; margin-top: 3px; font-style: normal; font-size: 11px; color: var(--success); }
.ofm-chart { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; height: 130px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--slate-100); }
.ofm-chart > div { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; height: 100%; } .ofm-chart i { width: 100%; height: var(--h); border-radius: 6px 6px 0 0; background: linear-gradient(180deg, #4C8DFF, #0A5BF0); } .ofm-chart small { font-size: 10.5px; white-space: nowrap; }
.ofm-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ofm-fc { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 12px; border: 1px solid var(--slate-100); border-radius: 10px; }
.ofm-fci { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--ks-blue-50); color: var(--ks-blue); } .ofm-fc b { font-size: 12.5px; } .ofm-fc small { margin-top: 2px; font-size: 11px; }
.ofm-tg { position: relative; width: 30px; height: 18px; border-radius: 9px; background: var(--slate-200); margin-top: 2px; } .ofm-tg::after { content: ""; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); } .ofm-tg.on { background: var(--ks-blue); } .ofm-tg.on::after { left: 14px; }
.ofm-mod { border: 1px solid var(--slate-100); border-radius: 10px; overflow: hidden; margin-top: 8px; } .ofm-mod:first-child { margin-top: 0; }
.ofm-mod h6 { margin: 0; padding: 9px 12px; background: var(--slate-50); font-size: 12.5px; font-weight: 600; color: var(--fg1); }
.ofm-mod > div { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--slate-100); font-size: 12px; }
.ofm-jr { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; padding-top: 24px; }
.ofm-jr::before { content: ""; position: absolute; left: 6%; right: 6%; top: 9px; height: 2px; background: var(--slate-150); }
.ofm-jn { position: relative; display: grid; gap: 3px; align-content: start; padding: 10px; border: 1px solid var(--slate-100); border-radius: 10px; }
.ofm-jn::before { content: ""; position: absolute; left: 50%; top: -21px; width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid var(--ks-blue); transform: translateX(-50%); } .ofm-jn.human::before { border-color: #FF9A76; }
.ofm-jn small { font-size: 10.5px; font-weight: 600; color: var(--ks-blue); } .ofm-jn.human small { color: #C2410C; } .ofm-jn b { font-size: 12px; line-height: 1.25; } .ofm-jn em { font-style: normal; font-size: 11px; color: var(--fg3); } .ofm-jn .ofm-chip { justify-self: start; margin-top: 4px; }
.ofm-ld { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: end; }
.ofm-lv { display: flex; flex-direction: column; gap: 3px; min-height: calc(112px + var(--l) * 30px); padding: 12px; border: 1px solid var(--slate-100); border-radius: 10px; }
.ofm-lv span { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; margin-bottom: auto; background: linear-gradient(135deg, #0A5BF0, #7C3AED); color: #fff; }
.ofm-lv small { font-size: 10.5px; font-weight: 600; color: var(--ks-blue); margin-top: 10px; } .ofm-lv b { font-size: 12.5px; line-height: 1.25; } .ofm-lv em { font-style: normal; font-size: 11px; color: var(--fg3); }
.ofm-lv.lv-3 { background: var(--ink); border-color: var(--ink); } .ofm-lv.lv-3 b { color: #fff; } .ofm-lv.lv-3 em { color: rgba(220,233,255,.72); } .ofm-lv.lv-3 small { color: #8DB8FF; }
.ofm-ai { display: grid; grid-template-columns: 44px 20px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border-top: 1px solid var(--slate-100); border-radius: 8px; }
.ofm-ai:first-child { border-top: 0; } .ofm-ai small { font-size: 11px; font-weight: 600; } .ofm-ai b { font-size: 12.5px; }
.ofm-ck { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--slate-200); display: grid; place-items: center; color: #fff; } .ofm-ck svg { width: 11px; height: 11px; }
.ofm-ai.done .ofm-ck { background: var(--success); border-color: var(--success); } .ofm-ai.now { background: var(--ks-blue-50); } .ofm-ai.now .ofm-ck { border-color: var(--ks-blue); box-shadow: 0 0 0 3px var(--ring); }
@media (max-width: 1180px) { .ofm { grid-template-columns: minmax(0, 1fr); } .ofm-side { display: none; } .ofm-meta { display: none; } }
@media (max-width: 991px) { .ofr-top { grid-template-columns: 1fr; } .ofr-shot { margin-top: 8px; } .ofr-pts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) {
  .ofr { border-radius: 16px; } .ofr-pts { grid-template-columns: 1fr; } .ofm { min-height: 0; font-size: 12px; }
  .ofm-fn { grid-template-columns: 110px minmax(0, 1fr) 90px; } .ofm-pipe, .ofm-jr, .ofm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ofm-jr::before, .ofm-jn::before { display: none; } .ofm-jr { padding-top: 0; }
  .ofm-ld, .ofm-cards { grid-template-columns: 1fr 1fr; } .ofm-graph { grid-template-columns: 1fr; } .ofm-hub { grid-column: 1; grid-row: auto; } .ofm-sp.l, .ofm-sp.r { grid-column: 1; grid-row: auto !important; } .ofm-sp::after { display: none; }
  .ofm-gr { grid-template-columns: 110px minmax(0, 1fr); } .ofm-board { grid-template-columns: 1fr; } .ofm-chart small { font-size: 9.5px; } .ofm-tr { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) { .ofm-body [style*="--i"] { opacity: 1; animation: none !important; } }
.ofm-status { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--slate-100); font-size: 11.5px; color: var(--fg3); }
.ofm-status span { display: inline-flex; align-items: center; gap: 6px; } .ofm-status svg { width: 13px; height: 13px; color: var(--ks-blue); } .ofm-status b { color: var(--fg1); font-weight: 600; }
.ofm-body { display: flex; flex-direction: column; } .ofm-body .ofm-status { margin-top: auto; padding-top: 14px; }
.ofr-photo { position: relative; margin: 0; aspect-ratio: 5 / 4; border-radius: 16px; overflow: hidden; background: var(--slate-100); box-shadow: 0 40px 80px -44px rgba(7,16,51,.4); }
.ofr-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.06); transition: transform 1.6s var(--ease-out); }
.ofr-shot.is-in .ofr-photo img { transform: scale(1); }
.ofr-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,11,31,0) 50%, rgba(6,11,31,.35) 100%); pointer-events: none; }
.ofr-card { position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 1; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 6px 12px; align-items: center; padding: 14px 16px; border-radius: 12px; background: rgba(255,255,255,.96); border: 1px solid rgba(255,255,255,.8); box-shadow: 0 20px 50px -24px rgba(7,16,51,.5); opacity: 0; transform: translateY(14px); transition: opacity .8s var(--ease-out) .35s, transform .9s var(--ease-out) .35s; }
.ofr-shot.is-in .ofr-card { opacity: 1; transform: none; }
.ofr-card-ico { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(135deg, #0A5BF0, #7C3AED); color: #fff; } .ofr-card-ico svg { width: 19px; height: 19px; }
.ofr-card small { display: block; font-size: 11.5px; font-weight: 600; color: var(--ks-blue); } .ofr-card > div > b { display: block; font-size: 15px; letter-spacing: -.015em; color: var(--ink); margin-top: 1px; }
.ofr-card-st { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 16px; padding-top: 10px; border-top: 1px solid var(--slate-100); font-size: 12.5px; color: var(--fg3); }
.ofr-card-st span { display: inline-flex; align-items: center; gap: 6px; } .ofr-card-st svg { width: 14px; height: 14px; color: var(--ks-blue); } .ofr-card-st b { color: var(--fg1); font-weight: 600; margin-right: 3px; }
@media (max-width: 720px) { .ofr-photo { aspect-ratio: 4 / 3; } .ofr-card { left: 12px; right: 12px; bottom: 12px; padding: 12px; } .ofr-card-st { display: none; } }
html body section.ks-section.ofo-sec {   background: #fff !important; background-image: none !important; }
.ofo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(40px, 5vw, 72px) clamp(28px, 4vw, 64px); margin-bottom: clamp(40px, 5vw, 64px); }
.ofo { display: flex; flex-direction: column; min-width: 0; }
.ofo h3 { display: flex; align-items: center; gap: 12px; margin: 0; font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); letter-spacing: -.02em; color: var(--ink); }
.ofo-ico { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 9px; background: var(--ks-blue-50); color: var(--ks-blue); }
.ofo-ico svg { width: 17px; height: 17px; }
.ofo p { margin: 14px 0 0; font-size: 16px; line-height: 1.6; color: var(--fg2); max-width: 44ch; }
.ofo-art { position: relative; margin-top: 26px; height: clamp(240px, 22vw, 330px); display: flex; align-items: flex-end; justify-content: center; }
.ofo-art i { position: absolute; left: 50%; bottom: 8%; width: 78%; height: 78%; transform: translateX(-50%); border-radius: 36px; background: radial-gradient(70% 70% at 50% 45%, rgba(10,132,255,.16), rgba(124,58,237,.06) 60%, transparent 78%); filter: blur(4px); }
.ofo-art::after { content: ""; position: absolute; left: 50%; bottom: 3%; width: 46%; height: 10px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(7,16,51,.22), transparent); }
.ofo-art img { position: relative; z-index: 1; height: 100%; width: auto; max-width: 92%; object-fit: contain; object-position: bottom center; filter: drop-shadow(0 22px 30px rgba(7,16,51,.18)); transform: translateY(12px); opacity: 0; transition: transform .9s var(--ease-out), opacity .8s var(--ease-out); }
.ofo.is-in .ofo-art img { transform: none; opacity: 1; }
.ofo-sec .of-band { margin-top: 0; }
@media (max-width: 991px) { .ofo-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .ofo-grid { grid-template-columns: 1fr; gap: 40px; } .ofo-art { height: 240px; } }
html body section.ks-section.ofh-sec { background: #fff !important; }
.ofh { position: relative; --p: 0; display: grid; gap: clamp(28px, 4vw, 56px); padding: 12px 0 8px; }
.ofh-line, .ofh-fill { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); border-radius: 2px; }
.ofh-line { background: var(--slate-150); }
.ofh-fill { background: linear-gradient(180deg, #0A5BF0 0%, #0A84FF 55%, #7C3AED 100%); transform-origin: top; transform: translateX(-50%) scaleY(var(--p)); }
.ofh-step { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr); gap: clamp(20px, 3vw, 48px); align-items: center; }
.ofh-n { position: relative; z-index: 2; width: 44px; height: 44px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid var(--slate-200); color: var(--fg3); font-size: 14px; font-weight: 600; transition: border-color .5s var(--ease-out), color .5s var(--ease-out), background .5s var(--ease-out), box-shadow .6s var(--ease-out); }
.ofh-step.is-on .ofh-n { border-color: var(--ks-blue); background: var(--ks-blue); color: #fff; box-shadow: 0 0 0 8px rgba(10,91,240,.10), 0 10px 24px -12px rgba(10,91,240,.6); }
.ofh-txt { max-width: 46ch; opacity: 0; transform: translateX(var(--dx, 24px)); transition: opacity .8s var(--ease-out), transform .9s var(--ease-out); }
.ofh-step[data-side="l"] .ofh-txt { --dx: -24px; justify-self: end; }
.ofh-step.is-on .ofh-txt { opacity: 1; transform: none; }
.ofh-txt small { display: block; font-size: 13.5px; font-weight: 600; color: var(--ks-blue); }
.ofh-txt h3 { margin: 8px 0 10px; font-size: clamp(1.25rem, 1.05rem + .7vw, 1.6rem); letter-spacing: -.022em; color: var(--ink); }
.ofh-txt p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--fg2); }
.ofh-art { position: relative; height: clamp(240px, 22vw, 320px); display: flex; align-items: flex-end; justify-content: flex-end; padding-right: 4%; opacity: 0; transform: translateX(var(--ax, -24px)); transition: opacity .9s var(--ease-out) .1s, transform 1s var(--ease-out) .1s; }
.ofh-step[data-side="l"] .ofh-art { --ax: 24px; justify-content: flex-start; padding-right: 0; padding-left: 4%; }
.ofh-step.is-on .ofh-art { opacity: 1; transform: none; }
.ofh-glow { position: absolute; left: 72%; bottom: 6%; width: 60%; height: 80%; transform: translateX(-50%); border-radius: 40px; background: radial-gradient(70% 70% at 50% 50%, rgba(10,132,255,.14), rgba(124,58,237,.05) 60%, transparent 78%); filter: blur(4px); }
.ofh-art::after { content: ""; position: absolute; left: 72%; bottom: 2%; width: 36%; height: 10px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(7,16,51,.2), transparent); }
.ofh-step[data-side="l"] .ofh-glow, .ofh-step[data-side="l"] .ofh-art::after { left: 28%; }
.ofh-art img { position: relative; z-index: 1; height: 100%; width: auto; max-width: 48%; object-fit: contain; object-position: bottom center; filter: drop-shadow(0 22px 30px rgba(7,16,51,.18)); animation: ofhBob 6.5s ease-in-out infinite; }
.ofh-step:nth-child(odd) .ofh-art img { animation-delay: -2.4s; }
@keyframes ofhBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.ofh-card { position: absolute; z-index: 2; top: auto; bottom: 16%; left: 0; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 6px 10px; align-items: center; width: min(240px, 44%); padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.97); border: 1px solid var(--border); box-shadow: 0 22px 50px -24px rgba(7,16,51,.45); opacity: 0; transform: translateY(12px) scale(.96); transition: opacity .7s var(--ease-out) .45s, transform .8s var(--ease-out) .45s; }
.ofh-step[data-side="l"] .ofh-card { left: auto; right: 0; }
.ofh-step.is-on .ofh-card { opacity: 1; transform: none; }
.ofh-ci { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: linear-gradient(135deg, #0A5BF0, #7C3AED); color: #fff; } .ofh-ci svg { width: 16px; height: 16px; }
.ofh-card small { display: block; font-size: 11px; font-weight: 600; color: var(--ks-blue); } .ofh-card > div > b { display: block; margin-top: 1px; font-size: 13.5px; letter-spacing: -.01em; color: var(--ink); line-height: 1.25; }
.ofh-ok { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 4px 9px; border-radius: 7px; background: var(--success-bg); color: var(--success); font-style: normal; font-size: 11.5px; font-weight: 600; } .ofh-ok svg { width: 12px; height: 12px; }
.ofh-card ul { grid-column: 1 / -1; list-style: none; margin: 2px 0 0; padding: 8px 0 0; border-top: 1px solid var(--slate-100); display: grid; gap: 5px; } .ofh-card li { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--fg2); } .ofh-card li svg { width: 12px; height: 12px; color: var(--success); }
.ofh-wave { grid-column: 1 / -1; display: flex; align-items: flex-end; gap: 4px; height: 26px; padding-top: 8px; border-top: 1px solid var(--slate-100); box-sizing: content-box; } .ofh-wave b { flex: 1; border-radius: 2px; background: linear-gradient(180deg, #4C8DFF, #0A5BF0); animation: ofhWave 1.6s ease-in-out infinite; }
.ofh-wave b:nth-child(1) { height: 40%; } .ofh-wave b:nth-child(2) { height: 75%; animation-delay: .15s; } .ofh-wave b:nth-child(3) { height: 55%; animation-delay: .3s; } .ofh-wave b:nth-child(4) { height: 95%; animation-delay: .45s; } .ofh-wave b:nth-child(5) { height: 60%; animation-delay: .6s; } .ofh-wave b:nth-child(6) { height: 80%; animation-delay: .75s; } .ofh-wave b:nth-child(7) { height: 45%; animation-delay: .9s; }
@keyframes ofhWave { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.45); } }
.ofh-lines { grid-column: 1 / -1; display: grid; gap: 6px; padding-top: 8px; border-top: 1px solid var(--slate-100); } .ofh-lines b { display: block; height: 6px; border-radius: 3px; background: var(--slate-150); } .ofh-lines b:nth-child(1) { width: 90%; background: linear-gradient(90deg, #0A5BF0, #7C3AED); } .ofh-lines b:nth-child(2) { width: 70%; } .ofh-lines b:nth-child(3) { width: 82%; }
@media (max-width: 860px) {
  .ofh { gap: 36px; padding-left: 0; }
  .ofh-line, .ofh-fill { left: 22px; transform-origin: top; } .ofh-fill { transform: translateX(-50%) scaleY(var(--p)); }
  .ofh-step { grid-template-columns: 44px minmax(0, 1fr); gap: 16px 18px; align-items: start; }
  .ofh-n { grid-column: 1; grid-row: 1; margin: 0; } .ofh-txt { grid-column: 2; grid-row: 1; justify-self: start !important; --dx: 16px !important; }
  .ofh-art { grid-column: 2; grid-row: 2; height: 230px; justify-content: flex-start !important; padding: 0 !important; --ax: 0 !important; } .ofh-art img { max-width: 46%; } .ofh-glow, .ofh-art::after { left: 24% !important; }
  .ofh-card { right: 0; left: auto !important; bottom: 12%; width: min(220px, 50%); }
}
@media (prefers-reduced-motion: reduce) { .ofh-art img, .ofh-wave b { animation: none; } .ofh-txt, .ofh-art, .ofh-card { opacity: 1; transform: none; transition: none; } }
html body section.ks-section.ofp-sec {   background: #fff !important; background-image: none !important; }
.ofp-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 32px; align-items: end; margin-bottom: clamp(28px, 3.5vw, 44px); }
.ofp-head .ks-h2 { margin-top: 14px; max-width: 18ch; text-wrap: balance; }
.ofp-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; justify-self: end; width: 100%; max-width: 640px; }
.ofp-stats b { display: block; font-size: clamp(1.7rem, 1.3rem + 1.2vw, 2.4rem); line-height: 1; letter-spacing: -.03em; color: var(--ks-blue); }
.ofp-stats small { display: block; margin-top: 8px; font-size: 13.5px; line-height: 1.4; color: var(--fg3); }
.ofp-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 18px; align-items: stretch; }
.ofp-photo { position: relative; margin: 0; min-height: 420px; border-radius: 20px; overflow: hidden; background: var(--slate-100); box-shadow: 0 40px 80px -46px rgba(7,16,51,.4); }
.ofp-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.06); transition: transform 1.6s var(--ease-out); }
.ofp-photo.is-in img { transform: scale(1); }
.ofp-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,11,31,0) 55%, rgba(6,11,31,.55) 100%); pointer-events: none; }
.ofp-photo figcaption { position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 1; display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.94); box-shadow: 0 18px 40px -22px rgba(7,16,51,.5); }
.ofp-photo figcaption svg { width: 18px; height: 18px; flex: none; color: var(--ks-blue); } .ofp-photo figcaption b { display: block; font-size: 14px; color: var(--ink); } .ofp-photo figcaption span { font-size: 12.5px; color: var(--fg2); line-height: 1.4; }
.ofp-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ofp-card { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 26px 26px 24px; border-radius: 20px; background: #F5F7FB; border: 1px solid rgba(7,16,51,.04); transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.ofp-card:hover { transform: translateY(-3px); box-shadow: 0 24px 50px -34px rgba(7,16,51,.3); }
.ofp-card.is-tint { background: linear-gradient(160deg, #E3EDFF 0%, #EAF1FF 100%); }
.ofp-card.is-wide { grid-column: 1 / -1; }
.ofp-card h3 { margin: 0; font-size: 19px; letter-spacing: -.02em; color: var(--ink); }
.ofp-card p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--fg2); }
.ofp-card .ks-btn { margin-top: auto; }
.ofp-card .of-eyebrow { font-size: 12.5px; }
.ofp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; width: 100%; } .ofp-cols small { display: block; font-size: 13px; font-weight: 600; color: var(--ks-blue); margin-bottom: 4px; }
.ofp-globe { position: relative; margin-top: clamp(56px, 7vw, 96px); }
.ofp-globe-cap { margin: 0 auto 18px; max-width: 60ch; text-align: center; font-size: 15px; line-height: 1.55; color: var(--fg2); position: relative; z-index: 2; }
.ofp-sphere { position: relative; aspect-ratio: 2 / 1; overflow: hidden; -webkit-mask: linear-gradient(180deg, #000 84%, transparent 100%); mask: linear-gradient(180deg, #000 84%, transparent 100%); }
.ofp-sphere::before { content: ""; position: absolute; left: 50%; top: 40px; width: min(1120px, 130%); aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle at 50% 30%, #DCE9FF 0%, #C3D8FF 55%, #B4CEFF 100%); box-shadow: inset 0 0 0 1px rgba(10,91,240,.14), 0 -20px 60px -30px rgba(10,91,240,.35); }
.ofp-sphere::after { content: ""; position: absolute; left: 50%; top: 40px; width: min(1120px, 130%); aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background-image: radial-gradient(rgba(10,91,240,.22) 1.2px, transparent 1.6px); background-size: 14px 14px; opacity: .55; -webkit-mask: radial-gradient(circle at 50% 30%, #000 40%, transparent 78%); mask: radial-gradient(circle at 50% 30%, #000 40%, transparent 78%); }
.ofp-sphere svg { position: absolute; left: 50%; top: 40px; width: min(1120px, 130%); height: min(560px, 65%); transform: translateX(-50%); overflow: visible; }
.ofp-arc { stroke-dashoffset: 0; animation: ofpDash 14s linear infinite; }
@keyframes ofpDash { to { stroke-dashoffset: -320; } }
.ofp-pin { position: absolute; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 8px; z-index: 2; opacity: 0; transition: opacity .8s var(--ease-out) .3s, transform .9s var(--ease-out) .3s; }
.ofp-globe.is-in .ofp-pin { opacity: 1; }
.ofp-pin i { width: 14px; height: 14px; border-radius: 50%; background: var(--ks-blue); border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(10,91,240,.14), 0 6px 16px -6px rgba(10,91,240,.7); animation: ofpPulse 2.6s ease-in-out infinite; }
@keyframes ofpPulse { 0%, 100% { box-shadow: 0 0 0 6px rgba(10,91,240,.14), 0 6px 16px -6px rgba(10,91,240,.7); } 50% { box-shadow: 0 0 0 12px rgba(10,91,240,.06), 0 6px 16px -6px rgba(10,91,240,.7); } }
.ofp-pin span { padding: 8px 12px; border-radius: 10px; background: rgba(255,255,255,.96); border: 1px solid rgba(10,91,240,.12); box-shadow: 0 14px 30px -18px rgba(7,16,51,.45); font-size: 12.5px; color: var(--fg2); white-space: nowrap; text-align: center; }
.ofp-pin span b { display: block; font-size: 13px; color: var(--ks-blue); }
.ofp-pin--mid span { background: var(--ink); border-color: var(--ink); color: rgba(220,233,255,.8); } .ofp-pin--mid span b { color: #fff; }
@media (max-width: 991px) { .ofp-head { grid-template-columns: 1fr; align-items: start; } .ofp-stats { justify-self: start; } .ofp-grid { grid-template-columns: 1fr; } .ofp-photo { min-height: 320px; aspect-ratio: 16 / 10; } }
@media (max-width: 640px) { .ofp-cards, .ofp-cols { grid-template-columns: 1fr; } .ofp-stats { gap: 14px; } .ofp-stats small { font-size: 12.5px; } .ofp-pin span { white-space: normal; max-width: 150px; font-size: 11.5px; } .ofp-pin--mid { display: none; } }
@media (prefers-reduced-motion: reduce) { .ofp-arc, .ofp-pin i { animation: none; } .ofp-pin { opacity: 1; transition: none; } }
.ofp-sphere.is-map::before, .ofp-sphere.is-map::after { display: none; }
.ofp-map { position: absolute; inset: 0; width: 100%; height: 100%; display: block; filter: drop-shadow(0 -10px 40px rgba(10,91,240,.12)); }
.ofp-map .ofp-arc { animation: ofpDash 14s linear infinite; }
@media (max-width: 640px) { .ofp-stats { grid-template-columns: 1fr 1fr; } .ofp-pin span { font-size: 11px; padding: 6px 8px; } .ofp-pin span b { font-size: 11.5px; } }
@media (max-width: 1100px) { .ofp-head { grid-template-columns: 1fr; align-items: start; } .ofp-stats { justify-self: start; max-width: none; } }
.ofp-sphere svg.ofp-map { position: absolute; inset: 0; left: 0; top: 0; width: 100%; height: 100%; transform: none; display: block; filter: drop-shadow(0 -14px 44px rgba(10,91,240,.16)); }
.ofp-sphere .ofp-pin { transform: translate(-50%, calc(-100% + 8px)); display: grid; justify-items: center; gap: 8px; transition: opacity .5s var(--ease-out); will-change: left, top; }
.ofp-sphere .ofp-pin i { order: 2; width: 16px; height: 16px; border: 3px solid #fff; }
.ofp-sphere.is-map .ofp-pin { animation: none; }
.ofp-globe.is-in .ofp-sphere.is-map .ofp-pin { opacity: inherit; }
.ofp-pin span { font-size: 13.5px; padding: 9px 13px; border-radius: 10px; border-color: rgba(10,91,240,.16); box-shadow: 0 16px 34px -18px rgba(7,16,51,.45); }
.ofp-pin span b { font-size: 14px; }
.ofp-sphere .ofp-spot { position: absolute; z-index: 1; transform: translate(-50%, calc(-100% + 5px)); display: grid; justify-items: center; gap: 5px; opacity: 0; transition: opacity .5s var(--ease-out); pointer-events: none; will-change: left, top; }
.ofp-spot span { display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 9px; border-radius: 8px; background: rgba(255,255,255,.94); border: 1px solid rgba(10,91,240,.12); box-shadow: 0 10px 24px -14px rgba(7,16,51,.4); font-size: 11.5px; color: var(--fg2); white-space: nowrap; }
.ofp-spot span b { font-size: 11.5px; font-weight: 600; color: var(--ks-blue); }
.ofp-spot i { width: 10px; height: 10px; border-radius: 50%; background: var(--ks-blue); border: 2px solid #fff; box-shadow: 0 0 0 4px rgba(10,91,240,.12); }
@media (max-width: 640px) { .ofp-spot { display: none; } }
.ofp-sphere .ofp-spot.is-below { transform: translate(-50%, -5px); } .ofp-spot.is-below i { order: -1; }
html body section.ks-section.ofp-sec {   background: #fff !important; background-image: none !important; }
.ofp-sphere { -webkit-mask: none !important; mask: none !important; }
.ofp-sphere svg.ofp-map { filter: none; }
.ofp-sphere::before, .ofp-sphere::after { display: none; }
.ofp-sphere canvas.ofp-map { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ofp-sphere.is-map::after { content: ""; display: block !important; position: absolute; left: 0; right: 0; bottom: 0; height: 42%; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.85) 70%, #fff 100%); }
.ofp-sphere .ofp-pin, .ofp-sphere .ofp-spot { z-index: 2; }
html body section.ks-section.ofp-sec {    background: #fff !important; background-image: none !important; }
.ofp-sec > .amb, .ofp-sec > .fx-field, .ofp-sec > .fx-wash, .ofp-sec > .mo-field, .ofp-sec > .kn-field, .ofp-sec > .ks-glow, .ofp-sec > canvas:not(.ofp-map), .ofp-sec .ofp-globe::before, .ofp-sec .ofp-globe::after { display: none !important; }
.ofp-globe, .ofp-sphere { background: transparent !important; box-shadow: none !important; }
.ofp-sphere.is-map::before { display: none !important; }
.ofp-sphere.is-map::after { height: 46%; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.7) 55%, #fff 100%); }
.ofp-sphere canvas.ofp-map, .ofp-sphere .ofp-map { filter: none !important; box-shadow: none !important; }
.ofp-sphere.is-map::after, .ofp-sphere.is-map::before { display: none !important; }
.ofp-sphere .ofp-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 58%; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 45%, rgba(255,255,255,.92) 78%, #fff 100%); }
.of-faq-wrap { max-width: 860px; margin: 0 auto; }
.of-faq-wrap .of-head { text-align: center; margin: 0 auto clamp(28px, 4vw, 44px); }
.of-faq-wrap .of-head .of-eyebrow { justify-content: center; }
.of-faq-wrap .of-faq p { max-width: none; }
.of-cta .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 13px; color: var(--ks-blue); }
.of-cta .eyebrow i { width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, #0A84FF, #7C3AED); }
.of-cta .grad { background: linear-gradient(90deg, #0033EE 0%, #0A84FF 45%, #7C3AED 80%, #FF9A76 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.of-cta .panel { position: relative; overflow: hidden; border-radius: 22px; background: var(--slate-100); box-shadow: 0 30px 60px -28px rgba(7,16,51,.35), 0 2px 6px rgba(7,16,51,.06); }
.of-cta .panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.of-cta.cta { position: relative; padding: clamp(72px, 9vw, 130px) 0 clamp(80px, 10vw, 140px); }
.of-cta .cta-in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.of-cta h2 { font-size: clamp(2.2rem, 1.3rem + 3.2vw, 4.4rem); letter-spacing: -.038em; line-height: 1; max-width: 14ch; margin-top: 16px; }
.of-cta .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.of-cta .panel { aspect-ratio: 4 / 3; transform: translateY(calc(60px * (1 - clamp(0, calc((var(--vp, 0) - .15) / .5), 1)))) rotate(calc(-3deg * (1 - clamp(0, calc((var(--vp, 0) - .15) / .5), 1)))); }
@media (max-width: 900px) { .of-cta .cta-in { grid-template-columns: 1fr; } }
.ofr::before { display: none !important; }
html body section.ks-section.ofr-sec {    background: #fff !important; background-image: none !important; }
html body [class][class][class][class][class][class][class][class] .ofs-person2 img, html body .ofs-person2 img { filter: grayscale(calc(.82 * (1 - var(--sw, 0)))) brightness(calc(.9 + .1 * var(--sw, 0))) !important; -webkit-filter: grayscale(calc(.82 * (1 - var(--sw, 0)))) brightness(calc(.9 + .1 * var(--sw, 0))) !important; }
.ofo-art { display: block !important; height: auto !important; min-height: clamp(230px, 20vw, 300px); margin-top: 24px; }
.ofo-art .kv { height: auto; min-height: clamp(230px, 20vw, 300px); }
.ofo-art > i, .ofo-art::after { display: none !important; }
.ofh-art { display: block !important; padding: 0 !important; height: auto !important; min-height: clamp(240px, 22vw, 320px); }
.ofh-art .kv { height: auto; min-height: clamp(240px, 22vw, 320px); }
.ofh-glow, .ofh-art::after, .ofh-art img, .ofh-card { display: none !important; }
.ofh-step[data-side="r"] .ofh-art .kv { margin-left: auto; } .ofh-step[data-side="l"] .ofh-art .kv { margin-right: auto; }
.kv { position: relative; height: 100%; width: 100%; max-width: 460px; border-radius: 14px; background: linear-gradient(160deg, #F7FAFF 0%, #EEF3FF 100%); border: 1px solid rgba(10,91,240,.10); overflow: hidden; padding: 18px; display: flex; flex-direction: column; justify-content: center; gap: 10px; font-size: 12.5px; line-height: 1.35; color: var(--fg1); }
.kv::before { content: ""; position: absolute; right: -18%; bottom: -40%; width: 70%; height: 80%; border-radius: 50%; background: radial-gradient(closest-side, rgba(124,58,237,.10), transparent); pointer-events: none; }
.kv > * { position: relative; }
.kv-card { background: #fff; border: 1px solid var(--border); border-radius: 10px; }
.kv-h { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 12px; color: var(--ks-blue); }
.kv-h i { width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, #0A84FF, #7C3AED); }
.kv-f { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.kv-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 7px; font-size: 11px; font-weight: 600; background: var(--ks-blue-50); color: var(--ks-blue); white-space: nowrap; }
.kv-chip--ok { background: var(--success-bg); color: var(--success); } .kv-chip svg { width: 11px; height: 11px; }
.kv-ico { width: 32px; height: 32px; flex: none; border-radius: 9px; display: grid; place-items: center; background: linear-gradient(135deg, #0A5BF0, #7C3AED); color: #fff; } .kv-ico svg { width: 15px; height: 15px; }
.kv-ico--ok { background: var(--success); }
.kv [style*="--i"] { opacity: 0; transform: translateY(8px); transition: opacity .6s var(--ease-out), transform .7s var(--ease-out); transition-delay: calc(.1s + var(--i) * .11s); }
.kv.is-live [style*="--i"] { opacity: 1; transform: none; }
.kv-rank { display: grid; gap: 7px; }
.kv-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 12px; }
.kv-row b { font-size: 11px; font-weight: 600; color: var(--fg3); white-space: nowrap; } .kv-row span { font-size: 12.5px; color: var(--fg1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kv-row.is-hi { border-color: rgba(10,91,240,.35); background: linear-gradient(90deg, #EEF3FF, #fff); } .kv-row.is-hi b { color: var(--ks-blue); }
.kv.is-live .kv-row:not(.is-hi) { opacity: .7; }
.kv-graph { width: 100%; height: auto; max-height: 100%; }
.kv-graph path { fill: none; stroke: #B9CBF2; stroke-width: 1.6; stroke-dasharray: 320; stroke-dashoffset: 320; transition: stroke-dashoffset 1.3s var(--ease-out) .15s; } .kv.is-live .kv-graph path { stroke-dashoffset: 0; }
.kv-node circle { fill: #fff; stroke: #0A5BF0; stroke-width: 1.6; } .kv-node text { font: 600 10.5px var(--font-sans); fill: var(--fg2); }
.kv-node.is-hub circle { fill: #0A5BF0; } .kv-node.is-warn circle { stroke: #F59E0B; stroke-width: 2.2; fill: #FFF7E8; }
.kv-tag rect { fill: #0B1230; } .kv-tag text { font: 600 10px var(--font-sans); fill: #fff; }
.kv-tag { opacity: 0; transition: opacity .6s var(--ease-out) 1s; } .kv.is-live .kv-tag { opacity: 1; }
.kv-bars { display: grid; gap: 10px; }
.kv-bar { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 12px; }
.kv-bar span { color: var(--fg3); font-weight: 600; } .kv-bar em { font-style: normal; color: var(--fg1); white-space: nowrap; }
.kv-bar i { display: block; height: 10px; border-radius: 5px; background: #DFE8FA; overflow: hidden; }
.kv-bar b { display: block; height: 100%; width: calc(var(--w) * 100%); border-radius: 5px; background: linear-gradient(90deg, #0A5BF0, #7C3AED); transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease-out) calc(.25s + var(--i) * .15s); }
.kv.is-live .kv-bar b { transform: none; }
.kv-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.kv-opt { padding: 12px 10px; display: flex; flex-direction: column; gap: 4px; min-height: 96px; } .kv-opt b { font-size: 13px; color: var(--fg1); } .kv-opt span { font-size: 11px; line-height: 1.35; color: var(--fg3); }
.kv-opt.is-hi { border-color: rgba(10,91,240,.4); background: linear-gradient(180deg, #F3F7FF, #fff); } .kv-opt .kv-chip { align-self: flex-start; margin-bottom: 2px; }
.kv.is-live .kv-opt:not(.is-hi) { opacity: .7; }
.kv-doc { padding: 12px 14px; display: grid; gap: 7px; }
.kv-doc-h { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--slate-100); }
.kv-doc-h > i { width: 22px; height: 22px; border-radius: 6px; background: linear-gradient(135deg, #0A5BF0, #7C3AED); flex: none; }
.kv-doc-h b { display: block; font-size: 12.5px; color: var(--fg1); } .kv-doc-h small { display: block; font-size: 11px; color: var(--fg3); } .kv-doc-h .kv-chip { margin-left: auto; }
.kv-doc-r { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 8px; align-items: baseline; font-size: 11.5px; padding: 3px 0; } .kv-doc-r b { color: var(--fg3); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kv-doc-r span { color: var(--fg1); }
.kv-doc-r.is-hi b { color: var(--ks-blue); } .kv-doc-r.is-hi span { font-weight: 600; }
.kv-doc-f { display: flex; align-items: center; gap: 6px; padding-top: 8px; border-top: 1px solid var(--slate-100); font-size: 11px; color: var(--fg3); } .kv-doc-f svg { width: 12px; height: 12px; }
.kv-nda { padding: 14px; display: grid; gap: 8px; }
.kv-nda-h { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--slate-100); } .kv-nda-h b { display: block; font-size: 13px; } .kv-nda-h small { display: block; font-size: 11px; color: var(--fg3); }
.kv-tog { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; } .kv-tog em { font-style: normal; font-size: 10.5px; color: var(--fg3); }
.kv-tog i { position: relative; width: 30px; height: 18px; border-radius: 9px; background: #D9E2F2; flex: none; margin-left: auto; } .kv-tog i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: left .45s var(--ease-out) .5s; }
.kv-tog i.on { background: var(--ks-blue); } .kv.is-live .kv-tog i.on::after { left: 14px; }
.kv-signal { width: 100%; height: auto; }
.kv-line { fill: none; stroke: #0A5BF0; stroke-width: 2.2; stroke-dasharray: 420; stroke-dashoffset: 420; transition: stroke-dashoffset 1.6s var(--ease-out) .2s; } .kv.is-live .kv-line { stroke-dashoffset: 0; }
.kv-area { opacity: 0; transition: opacity 1s var(--ease-out) .9s; } .kv.is-live .kv-area { opacity: 1; }
.kv-thresh { fill: none; stroke: #F59E0B; stroke-width: 1.2; stroke-dasharray: 4 4; }
.kv-dot { fill: #fff; stroke: #F59E0B; stroke-width: 2.5; opacity: 0; transition: opacity .4s .9s; } .kv.is-live .kv-dot { opacity: 1; }
.kv-ax { font: 600 9.5px var(--font-sans); fill: var(--fg3); }
.kv-flow { display: flex; align-items: center; gap: 6px; }
.kv-flow span { flex: none; padding: 7px 10px; border-radius: 8px; background: #fff; border: 1px solid var(--border); font-size: 11.5px; font-weight: 600; color: var(--fg1); }
.kv-flow i { flex: 1; height: 2px; background: #D9E2F2; position: relative; overflow: hidden; border-radius: 1px; }
.kv-flow i::after { content: ""; position: absolute; top: -1px; left: -40%; width: 40%; height: 4px; border-radius: 2px; background: linear-gradient(90deg, transparent, #0A84FF, #7C3AED, transparent); animation: kvPulse 2.4s linear infinite; }
@keyframes kvPulse { to { left: 100%; } }
.kv-week { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; align-items: end; }
.kv-day > div { display: flex; align-items: flex-end; justify-content: center; gap: 3px; height: 92px; } .kv-day span { display: block; text-align: center; margin-top: 5px; font-size: 10.5px; font-weight: 600; color: var(--fg3); }
.kv-day i { display: block; width: 12px; border-radius: 3px 3px 0 0; } .kv-day i.b { height: calc(var(--b) * 100%); background: #DFE8FA; } .kv-day i.a { height: calc(var(--a) * 100%); background: linear-gradient(180deg, #0A84FF, #0A5BF0); transform: scaleY(0); transform-origin: bottom; transition: transform .9s var(--ease-out) calc(.3s + var(--i) * .1s); }
.kv.is-live .kv-day i.a { transform: none; }
.kv-legend { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--fg3); } .kv-legend i { width: 10px; height: 10px; border-radius: 3px; background: #DFE8FA; } .kv-legend i.a { background: #0A5BF0; margin-left: 6px; }
.kv-data { display: grid; grid-template-columns: auto 60px minmax(0, 1fr); gap: 8px; align-items: center; }
.kv-src { display: grid; gap: 8px; } .kv-src span { padding: 8px 12px; font-size: 12px; font-weight: 600; text-align: center; color: var(--fg1); }
.kv-links { width: 100%; height: 130px; } .kv-links path { fill: none; stroke: #B9CBF2; stroke-width: 1.6; stroke-dasharray: 160; stroke-dashoffset: 160; transition: stroke-dashoffset 1.2s var(--ease-out) .4s; } .kv.is-live .kv-links path { stroke-dashoffset: 0; }
.kv-model { padding: 12px; display: grid; gap: 4px; border-color: rgba(10,91,240,.35); } .kv-model b { font-size: 13px; } .kv-model small { font-size: 11px; color: var(--fg3); } .kv-model .kv-chip { justify-self: start; margin-top: 4px; }
.kv-road { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding-top: 22px; }
.kv-road-l, .kv-road-f { position: absolute; left: 12px; right: 12px; top: 8px; height: 2px; background: #D9E2F2; border-radius: 1px; }
.kv-road-f { right: auto; width: 0; background: linear-gradient(90deg, #0A5BF0, #7C3AED); transition: width 1.2s var(--ease-out) .3s; } .kv.is-live .kv-road-f { width: 34%; }
.kv-ms { position: relative; padding: 10px; border-radius: 10px; background: #fff; border: 1px solid var(--border); }
.kv-ms > i { position: absolute; left: 12px; top: -22px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid #C5D3EE; } .kv-ms.is-hi > i { border-color: #0A5BF0; background: #0A5BF0; }
.kv-ms b { display: block; font-size: 12.5px; } .kv-ms span { display: block; font-size: 11px; color: var(--fg3); margin-top: 2px; }
.kv-ms.is-hi { border-color: rgba(10,91,240,.4); background: linear-gradient(180deg, #F3F7FF, #fff); }
.kv-people { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; align-items: center; }
.kv-ring { width: 120px; height: 120px; } .kv-ring .t { fill: none; stroke: #DFE8FA; stroke-width: 9; } .kv-ring .v { fill: none; stroke: #0A5BF0; stroke-width: 9; stroke-linecap: round; stroke-dasharray: 314; stroke-dashoffset: 314; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset 1.4s var(--ease-out) .2s; } .kv.is-live .kv-ring .v { stroke-dashoffset: 50; }
.kv-ring .big { font: 700 22px var(--font-sans); fill: var(--fg1); letter-spacing: -.02em; } .kv-ring .sm { font: 600 8.5px var(--font-sans); fill: var(--fg3); }
.kv-people-t { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; } .kv-people-t b { font-size: 13px; line-height: 1.3; margin-bottom: 4px; }
.kv-mobile { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 16px; align-items: center; }
.kv-phone { position: relative; height: 210px; border: 5px solid #0B1230; border-radius: 22px; background: #fff; padding: 22px 8px 8px; display: flex; flex-direction: column; gap: 8px; }
.kv-notch { position: absolute; top: 6px; left: 50%; width: 36px; height: 5px; border-radius: 3px; background: #0B1230; transform: translateX(-50%); }
.kv-ph-card { padding: 8px; } .kv-ph-card small { display: block; font-size: 9px; color: var(--fg3); font-weight: 600; } .kv-ph-card b { display: block; font-size: 10.5px; margin: 2px 0 6px; } .kv-ph-card span { display: block; height: 5px; border-radius: 3px; background: #DFE8FA; overflow: hidden; } .kv-ph-card em { display: block; height: 100%; width: calc(var(--w) * 100%); background: linear-gradient(90deg, #0A5BF0, #7C3AED); border-radius: 3px; }
.kv-ph-btn { padding: 8px; border-radius: 8px; background: #0A5BF0; color: #fff; font-size: 10.5px; font-weight: 600; text-align: center; }
.kv-ph-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .kv-ph-row i { height: 34px; border-radius: 8px; background: #EEF3FF; }
.kv-mobile-t { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.kv-shield { padding: 14px; display: grid; gap: 8px; }
.kv-shield-h { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--slate-100); } .kv-shield-h b { display: block; font-size: 13px; } .kv-shield-h small { display: block; font-size: 11px; color: var(--fg3); }
.kv-check { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fg1); } .kv-check svg { width: 14px; height: 14px; color: var(--success); flex: none; }
.kv-ai { padding: 12px; display: grid; gap: 8px; }
.kv-ai-q { display: flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 600; color: var(--fg1); }
.kv-ai-a { padding: 10px 12px; border-radius: 10px; background: #F3F7FF; display: grid; gap: 8px; justify-items: start; } .kv-ai-a p { margin: 0; font-size: 12px; line-height: 1.45; color: var(--fg1); }
.kv-chat { padding: 12px; display: grid; gap: 8px; }
.kv-chat-h { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--slate-100); } .kv-chat-h b { display: block; font-size: 12.5px; } .kv-chat-h small { display: block; font-size: 11px; color: var(--fg3); }
.kv-msg { max-width: 82%; padding: 8px 11px; border-radius: 10px; font-size: 12px; line-height: 1.4; } .kv-msg.a { background: #F3F7FF; color: var(--fg1); border-bottom-left-radius: 4px; } .kv-msg.u { background: #0A5BF0; color: #fff; justify-self: end; border-bottom-right-radius: 4px; }
.kv-chat-ok { justify-self: start; }
.kv-form { padding: 12px; display: grid; gap: 10px; }
.kv-form-h { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--slate-100); } .kv-form-h b { font-size: 12.5px; } .kv-form-h small { font-size: 11px; color: var(--fg3); }
.kv-prog { margin-left: auto; width: 70px; height: 6px; border-radius: 3px; background: #DFE8FA; overflow: hidden; } .kv-prog i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #0A5BF0, #7C3AED); transition: width 1.2s var(--ease-out) .4s; } .kv.is-live .kv-prog i { width: 100%; }
.kv-fld label { display: block; font-size: 10.5px; font-weight: 600; color: var(--fg3); margin-bottom: 5px; } .kv-fld label em { font-style: normal; font-weight: 400; }
.kv-chips { display: flex; flex-wrap: wrap; gap: 5px; } .kv-chips span { padding: 4px 8px; border-radius: 6px; background: var(--ks-blue-50); color: var(--ks-blue); font-size: 10.5px; font-weight: 600; }
.kv-txt { display: grid; gap: 5px; padding: 8px; border: 1px solid var(--border); border-radius: 7px; } .kv-txt i { display: block; height: 6px; width: calc(var(--w) * 100%); border-radius: 3px; background: #DFE8FA; }
.kv-file { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1px dashed #B9CBF2; border-radius: 7px; font-size: 11px; color: var(--fg2); } .kv-file svg { width: 12px; height: 12px; color: var(--ks-blue); }
.kv-win { padding: 0; overflow: hidden; display: grid; }
.kv-win-h { display: flex; align-items: center; gap: 5px; padding: 8px 10px; border-bottom: 1px solid var(--slate-100); background: #F7FAFF; } .kv-win-h i { width: 7px; height: 7px; border-radius: 50%; background: #D9E2F2; } .kv-win-h span { margin-left: 6px; font-size: 11px; font-weight: 600; color: var(--fg2); } .kv-win-h em { margin-left: auto; font-style: normal; }
.kv-win .kv-graph { padding: 6px 10px 0; }
.kv-win-f { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-top: 1px solid var(--slate-100); } .kv-win-f small { font-size: 10.5px; color: var(--fg3); }
.kv-wave { display: flex; align-items: flex-end; gap: 3px; height: 16px; } .kv-wave b { width: 3px; height: 40%; border-radius: 2px; background: linear-gradient(180deg, #0A84FF, #7C3AED); animation: kvWave 1.1s ease-in-out infinite; }
.kv-wave b:nth-child(2) { height: 75%; animation-delay: .12s; } .kv-wave b:nth-child(3) { height: 55%; animation-delay: .24s; } .kv-wave b:nth-child(4) { height: 90%; animation-delay: .36s; } .kv-wave b:nth-child(5) { height: 60%; animation-delay: .48s; } .kv-wave b:nth-child(6) { height: 80%; animation-delay: .6s; } .kv-wave b:nth-child(7) { height: 45%; animation-delay: .72s; } .kv-wave b:nth-child(8) { height: 70%; animation-delay: .84s; }
@keyframes kvWave { 0%, 100% { transform: scaleY(.5); } 50% { transform: scaleY(1); } }
.kv-doc--big .kv-doc-r { grid-template-columns: 92px minmax(0, 1fr); font-size: 12px; }
@media (max-width: 991px) { .ofh-art .kv { margin: 0 !important; max-width: 100%; } }
@media (max-width: 620px) { .ofo-art { height: 240px; } .kv { padding: 14px; } .kv-opts { grid-template-columns: 1fr; } .kv-opt { min-height: 0; } .kv-people, .kv-mobile { grid-template-columns: 1fr; justify-items: center; } .kv-mobile-t, .kv-people-t { align-items: center; } }
@media (prefers-reduced-motion: reduce) { .kv [style*="--i"], .kv-graph path, .kv-line, .kv-area, .kv-dot, .kv-tag, .kv-bar b, .kv-day i.a, .kv-road-f, .kv-ring .v, .kv-prog i, .kv-links path { opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; transition: none !important; } .kv-flow i::after, .kv-wave b { animation: none; } }
.ofo-art--img { position: relative; border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid var(--border); aspect-ratio: 2 / 1; min-height: 0 !important; height: auto !important; }
.ofo-art--img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; opacity: 0; transform: scale(1.03); transition: opacity .8s var(--ease-out), transform 1.2s var(--ease-out); }
.ofo.is-in .ofo-art--img img { opacity: 1; transform: none; }
.ofo-art--img::before, .ofo-art--img::after, .ofo-art--img > i { display: none !important; content: none !important; }
html body section.ks-section.ofo-sec:has(.ofo--img) { background: #fff !important; background-image: none !important; }
.ofo--img { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.ofo--img h3 { min-height: 2.6em; align-items: flex-start; } .ofo--img h3 .ofo-ico { margin-top: 1px; }
.ofo--img p { min-height: 3.2em; }
.ofo--img .ofo-art--img { align-self: end; width: 100%; aspect-ratio: 2 / 1; margin-top: 26px; }
.ofo--img .ofo-art--img img { object-fit: cover; object-position: center; }
@media (max-width: 620px) { .ofo--img h3, .ofo--img p { min-height: 0; } }
html body .ofo .ofo-art.ofo-art--img img, html body .ofo-art--img img { position: absolute !important; inset: 0 !important; width: 100% !important; max-width: none !important; height: 100% !important; object-fit: cover !important; object-position: center !important; margin: 0 !important; filter: none !important; }
html body .ofo .ofo-art.ofo-art--img { aspect-ratio: 2 / 1 !important; width: 100% !important; display: block !important; }
html body section.ks-section.ofo-sec:has(.ofo--img) { background: #fff !important; }
html body .ofo--img .ofo-art { background: #fff !important; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
html body .ofo--img .ofo-art i, html body .ofo--img .ofo-art::after, html body .ofo--img .ofo-art::before { display: none !important; }
.ofh-art--demo { display: flex !important; align-items: center; min-height: clamp(280px, 26vw, 360px) !important; }
.ofh-step[data-side="r"] .ofh-art--demo .ofb { margin-left: auto; }
.ofb { position: relative; width: 100%; max-width: 440px; min-height: clamp(280px, 26vw, 360px); display: flex; align-items: center; justify-content: center; }
.ofb-pill { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 12px; padding: 8px 8px 8px 18px; border-radius: 999px; background: #fff; border: 1px solid var(--border-strong); cursor: pointer; font: inherit; color: var(--ink); white-space: nowrap; transition: transform .45s var(--ease-out), border-color .3s var(--ease-out), opacity .35s var(--ease-out); }
.ofb-pill:hover, .ofb-pill.is-hover { transform: translate(-50%, calc(-50% - 3px)); border-color: var(--slate-400); }
.ofb-pill:hover .ofb-ask, .ofb-pill.is-hover .ofb-ask { background: var(--ks-blue); }
.ofb-pill:focus-visible { outline: 2px solid var(--ks-blue); outline-offset: 3px; }
.ofb-pi { display: grid; place-items: center; color: var(--ks-blue); } .ofb-pi svg { width: 20px; height: 20px; }
.ofb-pl { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.ofb-ask { padding: 10px 18px; border-radius: 12px; background: var(--ink); color: #fff; font-size: 15px; font-weight: 600; transition: background .3s var(--ease-out); }
.ofb.is-open .ofb-pill { opacity: 0; transform: translate(-50%, -50%) scale(.86); pointer-events: none; }
.ofb-panel { position: relative; width: 100%; max-width: 420px; background: #fff; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; opacity: 0; transform: translateY(24px) scale(.84); clip-path: inset(40% 16% 40% 16% round 999px); pointer-events: none; transition: opacity .45s var(--ease-out), transform .8s cubic-bezier(.2, .8, .2, 1), clip-path .8s cubic-bezier(.2, .8, .2, 1); }
.ofb.is-open .ofb-panel { opacity: 1; transform: none; clip-path: inset(0 round 14px); pointer-events: auto; }
.ofb-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.ofb-tile { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(135deg, #0A5BF0, #7C3AED); color: #fff; } .ofb-tile svg { width: 17px; height: 17px; }
.ofb-head b { display: block; font-size: 14px; letter-spacing: -.01em; color: var(--ink); } .ofb-head small { display: block; font-size: 12px; color: var(--fg3); margin-top: 1px; }
.ofb-dot { margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: var(--success); }
.ofb-body { height: clamp(200px, 18vw, 244px); overflow: hidden; padding: 14px; display: flex; flex-direction: column; gap: 10px; scroll-behavior: smooth; }
.ofb-msg { display: flex; gap: 8px; align-items: flex-end; max-width: 90%; opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ease-out), transform .45s var(--ease-out); }
.ofb-msg.is-in { opacity: 1; transform: none; }
.ofb-msg--u { align-self: flex-end; justify-content: flex-end; }
.ofb-av { width: 24px; height: 24px; flex: none; border-radius: 7px; display: grid; place-items: center; background: var(--ks-blue-50); color: var(--ks-blue); } .ofb-av svg { width: 13px; height: 13px; }
.ofb-bub { padding: 9px 12px; border-radius: 12px; background: var(--slate-50); border: 1px solid var(--border); font-size: 13px; line-height: 1.45; color: var(--ink); }
.ofb-msg--u .ofb-bub { background: var(--ks-blue); border-color: var(--ks-blue); color: #fff; }
.ofb-typing .ofb-bub { display: inline-flex; gap: 4px; align-items: center; padding: 11px 12px; } .ofb-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--slate-400); animation: ofbDot 1.1s ease-in-out infinite; } .ofb-typing i:nth-child(2) { animation-delay: .15s; } .ofb-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes ofbDot { 0%, 80%, 100% { transform: translateY(0); opacity: .45; } 40% { transform: translateY(-3px); opacity: 1; } }
.ofb-chips { display: flex; flex-wrap: wrap; gap: 6px; padding-left: 32px; opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ease-out), transform .45s var(--ease-out); } .ofb-chips.is-in { opacity: 1; transform: none; }
.ofb-chip { padding: 7px 11px; border-radius: 999px; border: 1px solid var(--border-strong); font-size: 12.5px; font-weight: 600; color: var(--ink); background: #fff; transition: transform .2s var(--ease-out), background .2s, border-color .2s; }
.ofb-chip.is-primary { background: var(--ks-blue); border-color: var(--ks-blue); color: #fff; }
.ofb-chip.is-hit { transform: scale(.94); background: var(--ks-blue-700); border-color: var(--ks-blue-700); }
.ofb-card { padding: 12px; border-radius: 12px; border: 1px solid var(--border); background: #fff; min-width: 230px; }
.ofb-card-h { display: flex; gap: 10px; align-items: center; } .ofb-ok { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--success-bg); color: var(--success); } .ofb-ok svg { width: 14px; height: 14px; }
.ofb-card b { display: block; font-size: 13px; color: var(--ink); } .ofb-card small { display: block; font-size: 11.5px; color: var(--fg3); margin-top: 1px; }
.ofb-steps { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 11px; font-weight: 600; color: var(--fg2); white-space: nowrap; } .ofb-steps i { flex: 1; height: 1px; min-width: 8px; background: var(--slate-200); }
.ofb-comp { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border); }
.ofb-in { flex: 1; min-width: 0; display: flex; align-items: center; height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--border); font-size: 13px; color: var(--ink); overflow: hidden; white-space: nowrap; transition: border-color .3s; }
.ofb-in.is-typing { border-color: var(--ks-blue); }
.ofb-in i { font-style: normal; } .ofb-in i:empty::before { content: "Message KeyStone Intelligence…"; color: var(--slate-400); }
.ofb-caret { width: 1.5px; height: 16px; margin-left: 2px; background: var(--ks-blue); opacity: 0; } .ofb-in.is-typing .ofb-caret { opacity: 1; animation: ofbCaret 1s steps(1) infinite; }
@keyframes ofbCaret { 50% { opacity: 0; } }
.ofb-send { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--ink); color: #fff; } .ofb-send svg { width: 15px; height: 15px; transform: rotate(-90deg); }
.ofb-cur { position: absolute; z-index: 5; width: 22px; height: 22px; left: 88%; top: 92%; opacity: 0; pointer-events: none; transition: left 1.25s cubic-bezier(.3, .7, .2, 1), top 1.25s cubic-bezier(.3, .7, .2, 1), opacity .3s var(--ease-out); }
.ofb-cur.is-show { opacity: 1; } .ofb-cur svg { width: 22px; height: 22px; display: block; transition: transform .15s var(--ease-out); }
.ofb-cur i { position: absolute; left: 1px; top: 1px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--ks-blue); opacity: 0; transform: scale(.4); }
.ofb-cur.is-click i { animation: ofbRipple .5s var(--ease-out) forwards; } .ofb-cur.is-click svg { transform: scale(.88); }
@keyframes ofbRipple { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(2.2); } }
.ofb-replay { position: absolute; right: 0; bottom: -36px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border); background: #fff; font: 600 12px var(--font-sans); color: var(--fg2); cursor: pointer; transition: color .2s, border-color .2s; }
.ofb-replay[hidden] { display: none; } .ofb-replay svg { width: 13px; height: 13px; } .ofb-replay:hover { color: var(--ink); border-color: var(--slate-400); }
@media (max-width: 991px) { .ofh-step[data-side="r"] .ofh-art--demo .ofb { margin-left: 0; } .ofh-art--demo { margin-bottom: 40px; } }
@media (max-width: 480px) { .ofb-pl { font-size: 15px; } .ofb-ask { padding: 9px 14px; font-size: 14px; } }
@media (prefers-reduced-motion: reduce) { .ofb-panel, .ofb-pill, .ofb-msg, .ofb-chips { transition: none; } .ofb-cur { display: none; } .ofb-typing i, .ofb-caret { animation: none; } }
.ofh-step[data-side="l"] .ofh-art--demo .ofi { margin-right: auto; }
.ofi { position: relative; width: 100%; max-width: 440px; min-height: clamp(280px, 26vw, 360px); display: flex; align-items: center; }
.ofi-panel { position: relative; width: 100%; background: #fff; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; }
.ofi-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.ofi-head b { font-size: 14px; letter-spacing: -.01em; color: var(--ink); } .ofi-head small { margin-left: 8px; font-size: 12px; color: var(--fg3); }
.ofi-prog { display: flex; align-items: center; gap: 10px; } .ofi-prog span { font-size: 11.5px; font-weight: 600; color: var(--fg3); white-space: nowrap; }
.ofi-prog i { display: block; width: 96px; height: 5px; border-radius: 3px; background: var(--slate-150); overflow: hidden; } .ofi-prog i b { display: block; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, #0A5BF0, #7C3AED); transition: width .7s var(--ease-out); }
.ofi-body { height: clamp(200px, 18vw, 244px); overflow: hidden; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; scroll-behavior: smooth; }
.ofi-blk { opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ease-out), transform .45s var(--ease-out); }
.ofi-blk.is-in { opacity: 1; transform: none; }
.ofi-q { max-height: 220px; overflow: hidden; transition: max-height .45s var(--ease-out), opacity .3s var(--ease-out); }
.ofi-q label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink); margin-bottom: 8px; } .ofi-q label em { font-style: normal; font-weight: 400; color: var(--fg3); }
.ofi-blk.is-done .ofi-q { max-height: 0; opacity: 0; }
.ofi-a { display: flex; align-items: center; gap: 8px; max-height: 0; overflow: hidden; opacity: 0; padding: 0 12px; border-radius: 10px; background: var(--slate-50); border: 1px solid var(--border); font-size: 12.5px; transition: max-height .45s var(--ease-out), opacity .35s var(--ease-out) .1s; }
.ofi-blk.is-done .ofi-a { max-height: 40px; opacity: 1; padding: 9px 12px; }
.ofi-a span { color: var(--fg3); font-weight: 600; white-space: nowrap; } .ofi-a b { color: var(--ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.ofi-a i { width: 18px; height: 18px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--success-bg); color: var(--success); } .ofi-a i svg { width: 10px; height: 10px; }
.ofi-sel { position: relative; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 1px solid var(--border); border-radius: 10px; font-size: 13px; color: var(--slate-400); transition: border-color .3s; }
.ofi-sel > svg { width: 14px; height: 14px; margin-left: auto; color: var(--fg3); transition: transform .3s var(--ease-out); }
.ofi-sel.is-open { border-color: var(--ks-blue); } .ofi-sel.is-open > svg { transform: rotate(180deg); }
.ofi-sel.is-set { color: var(--ink); border-color: var(--border-strong); }
.ofi-dd { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 3; background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 4px; opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .3s var(--ease-out), transform .35s var(--ease-out); }
.ofi-sel.is-open .ofi-dd { opacity: 1; transform: none; }
.ofi-dd span { display: block; padding: 8px 10px; border-radius: 7px; font-size: 12.5px; color: var(--ink); transition: background .25s; } .ofi-dd span.is-hl { background: var(--ks-blue-50); color: var(--ks-blue); }
.ofi-blk:has(.ofi-sel.is-open) { position: relative; z-index: 2; } .ofi-blk:has(.ofi-sel.is-open) .ofi-q { overflow: visible; }
.ofi-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ofi-chip { padding: 7px 11px; border-radius: 999px; border: 1px solid var(--border-strong); font-size: 12.5px; font-weight: 600; color: var(--ink); background: #fff; transition: background .3s, border-color .3s, color .3s, transform .25s var(--ease-out); }
.ofi-chip.is-on { background: var(--ks-blue); border-color: var(--ks-blue); color: #fff; animation: ofiPop .35s var(--ease-out); }
@keyframes ofiPop { 0% { transform: scale(.94); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } }
.ofi-radios { display: grid; gap: 6px; }
.ofi-radio { display: flex; align-items: center; gap: 9px; height: 34px; padding: 0 11px; border: 1px solid var(--border); border-radius: 10px; font-size: 12.5px; color: var(--ink); transition: border-color .3s, background .3s; }
.ofi-radio i { width: 16px; height: 16px; flex: none; border-radius: 50%; border: 1.5px solid var(--border-strong); position: relative; transition: border-color .3s; }
.ofi-radio i::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--ks-blue); transform: scale(0); transition: transform .3s var(--ease-out); }
.ofi-radio.is-on { border-color: var(--ks-blue); background: var(--ks-blue-50); } .ofi-radio.is-on i { border-color: var(--ks-blue); } .ofi-radio.is-on i::after { transform: scale(1); }
.ofi-drop { position: relative; }
.ofi-drop-z { display: flex; align-items: center; justify-content: center; gap: 8px; height: 52px; border: 1.5px dashed var(--border-strong); border-radius: 10px; font-size: 12.5px; color: var(--fg2); transition: opacity .3s, max-height .4s var(--ease-out); max-height: 52px; overflow: hidden; }
.ofi-drop-z svg { width: 15px; height: 15px; color: var(--ks-blue); } .ofi-drop-z u { color: var(--ks-blue); text-decoration: underline; }
.ofi-drop.is-file .ofi-drop-z { opacity: 0; max-height: 0; border-width: 0; }
.ofi-file { display: grid; grid-template-columns: 34px minmax(0, 1fr) 20px; gap: 10px; align-items: center; padding: 9px 11px; border: 1px solid var(--border); border-radius: 10px; opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ease-out), transform .45s var(--ease-out); }
.ofi-drop.is-file .ofi-file { opacity: 1; transform: none; }
.ofi-fi { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--ks-blue-50); color: var(--ks-blue); } .ofi-fi svg { width: 16px; height: 16px; }
.ofi-file b { display: block; font-size: 12.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ofi-file small { display: block; font-size: 11px; color: var(--fg3); margin-top: 1px; }
.ofi-file > div > i { display: block; height: 3px; margin-top: 6px; border-radius: 2px; background: var(--slate-150); overflow: hidden; } .ofi-file > div > i b { display: block; height: 100%; width: 0; background: var(--ks-blue); transition: width .12s linear; }
.ofi-file em { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--success-bg); color: var(--success); opacity: 0; transform: scale(.6); transition: opacity .3s, transform .35s var(--ease-out); } .ofi-file em svg { width: 11px; height: 11px; }
.ofi-drop.is-up .ofi-file em { opacity: 1; transform: none; } .ofi-drop.is-up .ofi-file > div > i { opacity: 0; }
.ofi-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--border); }
.ofi-hint { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--fg3); } .ofi-hint svg { width: 12px; height: 12px; color: var(--success); }
.ofi-btn { padding: 8px 14px; border-radius: 10px; background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 600; transition: opacity .3s; } .ofi-btn.is-busy { opacity: .7; }
.ofi-done { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; background: #fff; opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .5s var(--ease-out), transform .55s var(--ease-out); }
.ofi.is-complete .ofi-done { opacity: 1; transform: none; }
.ofi-ok { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--success-bg); color: var(--success); margin-bottom: 14px; } .ofi-ok svg { width: 22px; height: 22px; }
.ofi.is-complete .ofi-ok { animation: ofiPop .5s var(--ease-out); }
.ofi-done b { font-size: 17px; letter-spacing: -.015em; color: var(--ink); } .ofi-done small { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.5; color: var(--fg2); max-width: 30ch; }
.ofi-done em { display: inline-flex; margin-top: 14px; padding: 6px 10px; border-radius: 999px; background: var(--slate-50); border: 1px solid var(--border); font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--fg2); }
.ofi .ofb-replay { bottom: -36px; }
@media (max-width: 991px) { .ofh-step[data-side="l"] .ofh-art--demo .ofi { margin-right: 0; } }
@media (prefers-reduced-motion: reduce) { .ofi-blk, .ofi-q, .ofi-a, .ofi-dd, .ofi-file, .ofi-done, .ofi-prog i b { transition: none; } .ofi-chip.is-on, .ofi.is-complete .ofi-ok { animation: none; } }
.ofh-step[data-side="l"] .ofh-art--demo .ofw { margin-right: auto; }
.ofw { position: relative; width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 12px; }
.ofw-stages { display: flex; gap: 6px; flex-wrap: wrap; }
.ofw-stages span { position: relative; padding: 5px 10px 5px 20px; border-radius: 999px; border: 1px solid var(--border); font-size: 11.5px; font-weight: 600; color: var(--fg3); background: #fff; transition: color .6s var(--ease-out), border-color .6s var(--ease-out), background .6s var(--ease-out); }
.ofw-stages span::before { content: ""; position: absolute; left: 8px; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--slate-200); transform: translateY(-50%); transition: background .6s var(--ease-out); }
.ofw-stages span.is-on { color: var(--fg2); } .ofw-stages span.is-on::before { background: var(--ks-blue); }
.ofw-stages span.is-cur { color: var(--ks-blue); border-color: var(--ks-blue-100); background: var(--ks-blue-50); }
.ofw-page { position: relative; height: clamp(250px, 23vw, 310px); background: #fff; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.ofw-inner { padding: 18px 20px 24px; transition: transform 1.4s cubic-bezier(.4, 0, .2, 1); }
.ofw-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-bottom: 8px; margin-bottom: 10px; border-bottom: 1px solid var(--border); }
.ofw-h b { font-size: 13.5px; letter-spacing: -.01em; color: var(--ink); } .ofw-h small { font-size: 11px; color: var(--fg3); white-space: nowrap; }
.ofw-sec + .ofw-sec { margin-top: 18px; }
.ofw-s0 { opacity: 0; transition: opacity .8s var(--ease-out); } .ofw.s0 .ofw-s0 { opacity: 1; }
.ofw-line { display: flex; align-items: center; gap: 9px; padding: 5px 0; font-size: 12.5px; color: var(--fg1); opacity: 0; transition: opacity .5s var(--ease-out); transition-delay: calc(.3s + var(--i) * 1.15s); }
.ofw.s0 .ofw-line { opacity: 1; }
.ofw-line i { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--ks-blue); }
.ofw-line span { display: inline-block; white-space: nowrap; overflow: hidden; max-width: 0; transition: max-width 1.1s linear; transition-delay: calc(.35s + var(--i) * 1.15s); }
.ofw.s0 .ofw-line span { max-width: 100%; }
.ofw-s1 { opacity: 0; transform: translateY(10px); transition: opacity .8s var(--ease-out), transform .9s var(--ease-out); } .ofw.s1 .ofw-s1 { opacity: 1; transform: none; }
.ofw-find { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 6px; margin: 0 -6px; border-radius: 8px; border-bottom: 1px dashed var(--border); opacity: 0; transform: translateY(8px); transition: opacity .7s var(--ease-out), transform .8s var(--ease-out), background .8s var(--ease-out); transition-delay: calc(.4s + var(--i) * .6s); }
.ofw.s1 .ofw-find { opacity: 1; transform: none; }
.ofw-find:last-child { border-bottom: 0; }
.ofw-find em { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; background: var(--slate-50); border: 1px solid var(--border); font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--fg2); }
.ofw-find b { display: block; font-size: 12.5px; color: var(--ink); } .ofw-find span { display: block; font-size: 11.5px; color: var(--fg2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ofw-tag { text-decoration: none; font-size: 10.5px; font-weight: 600; padding: 4px 8px; border-radius: 999px; background: var(--slate-50); border: 1px solid var(--border); color: var(--fg2); white-space: nowrap; opacity: 0; transform: translateX(10px); transition: opacity .6s var(--ease-out), transform .7s var(--ease-out); transition-delay: calc(.2s + var(--i) * .55s); }
.ofw.s2 .ofw-tag { opacity: 1; transform: none; }
.ofw-tag.is-p1 { background: var(--ks-blue); border-color: var(--ks-blue); color: #fff; }
.ofw.s2 .ofw-find:has(.is-p1) { background: var(--ks-blue-50); transition-delay: .2s; }
.ofw-s3 { opacity: 0; transform: translateY(10px); transition: opacity .8s var(--ease-out), transform .9s var(--ease-out); } .ofw.s3 .ofw-s3 { opacity: 1; transform: none; }
.ofw-step { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 12.5px; color: var(--fg3); transition: color .6s var(--ease-out); transition-delay: calc(.5s + var(--i) * .8s); }
.ofw.s3 .ofw-step { color: var(--ink); }
.ofw-step i { width: 18px; height: 18px; flex: none; border-radius: 5px; border: 1.5px solid var(--border-strong); display: grid; place-items: center; color: #fff; background: #fff; transition: background .5s var(--ease-out), border-color .5s var(--ease-out); transition-delay: calc(.5s + var(--i) * .8s); }
.ofw-step i svg { width: 10px; height: 10px; opacity: 0; transform: scale(.5); transition: opacity .4s var(--ease-out), transform .45s var(--ease-out); transition-delay: calc(.6s + var(--i) * .8s); }
.ofw.s3 .ofw-step i { background: var(--ks-blue); border-color: var(--ks-blue); } .ofw.s3 .ofw-step i svg { opacity: 1; transform: none; }
.ofw-cover { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 26px 26px 30px; background: #fff; transform: translateY(102%); transition: transform 1.3s cubic-bezier(.4, 0, .2, 1); pointer-events: none; }
.ofw.s4 .ofw-cover { transform: none; }
.ofw-cover-top { display: flex; align-items: center; gap: 8px; margin-bottom: auto; } .ofw-cover-top small { font-size: 11px; font-weight: 600; color: var(--fg3); }
.ofw-mark { width: 14px; height: 14px; border-radius: 4px; background: linear-gradient(135deg, #0A5BF0, #7C3AED); }
.ofw-cover b { font-size: 17px; letter-spacing: -.02em; line-height: 1.25; color: var(--ink); } .ofw-cover span { display: block; margin-top: 6px; font-size: 12.5px; color: var(--fg2); }
.ofw-cover em { display: inline-flex; align-items: center; gap: 6px; width: fit-content; margin-top: 18px; padding: 6px 10px; border-radius: 999px; background: var(--success-bg); color: var(--success); font-style: normal; font-size: 11.5px; font-weight: 600; opacity: 0; transform: translateY(6px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); } .ofw-cover em svg { width: 12px; height: 12px; }
.ofw.is-sent .ofw-cover em { opacity: 1; transform: none; }
.ofw-cur { position: absolute; z-index: 6; width: 20px; height: 20px; left: 60%; top: 40%; opacity: 0; pointer-events: none; transition: left .8s cubic-bezier(.3, .7, .2, 1), top .8s cubic-bezier(.3, .7, .2, 1), opacity .4s var(--ease-out); } .ofw-cur.is-show { opacity: 1; }
.ofw-cur svg { width: 20px; height: 20px; display: block; transition: transform .15s var(--ease-out); } .ofw-cur.is-click svg { transform: scale(.86); }
.ofw-foot { display: flex; align-items: center; }
.ofw-send { display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 600; color: var(--fg2); transition: color .6s; }
.ofw-send i { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--slate-100); color: var(--fg2); transition: background .6s var(--ease-out), color .6s var(--ease-out), transform .3s var(--ease-out); } .ofw-send i svg { width: 14px; height: 14px; }
.ofw.s4 .ofw-send i { background: var(--ink); color: #fff; } .ofw.s4 .ofw-send { color: var(--ink); } .ofw.is-sent .ofw-send i { background: var(--success); }
.ofw .ofb-replay { bottom: -36px; }
@media (max-width: 991px) { .ofh-step[data-side="l"] .ofh-art--demo .ofw { margin-right: 0; } }
.ofw.no-anim, .ofw.no-anim *, .ofw.no-anim .ofw-cover, .ofw.no-anim .ofw-inner { transition: none !important; }
@media (prefers-reduced-motion: reduce) { .ofw *, .ofw-cover, .ofw-inner { transition: none !important; } .ofw-cur { display: none; } }
.ofh-art--video { display: flex; align-items: center; justify-content: center; height: auto !important; min-height: 0 !important; padding: 0 !important; }
.ofh-art--video::before, .ofh-art--video::after { display: none !important; }
.ofh-video { display: block; width: 100%; max-width: 520px; height: auto; border-radius: 12px; background: transparent; }
html body section.ks-section.ofo-sec {   background: #fff !important; background-image: none !important; }
.ofo-wrap { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.65fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.ofo-lead { position: sticky; top: 110px; }
.ofo-lead .ks-h2 { margin-top: 14px; max-width: 14ch; text-wrap: balance; }
.ofo-lead p { margin: 16px 0 24px; max-width: 36ch; font-size: 15.5px; line-height: 1.6; color: var(--fg2); }
.ofo-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 32px; }
.ofo { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 18px; align-items: start; padding: 22px 0 0; border-top: 1px solid var(--border); margin: 0 !important; min-height: 0 !important; height: auto !important; flex: none !important; }
.ofo-art, .ofo .ofo-art { display: none !important; }
.ofo-ico { position: relative; width: 64px; height: 64px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(160deg, #EEF3FF 0%, #F4EFFF 60%, #FFF1EA 100%); border: 1px solid var(--ks-blue-100); color: var(--ks-blue); overflow: hidden; transition: transform .45s var(--ease-out); }
.ofo-ico i { position: absolute; inset: 0; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='48' viewBox='0 0 28 48'><g fill='none' stroke='%230A5BF0' stroke-width='.8'><path d='M14 .5 27.5 8.2v16.1L14 32 .5 24.3V8.2z'/></g></svg>") 0 0 / 28px 48px; opacity: .14; }
.ofo-ico svg { position: relative; width: 26px; height: 26px; stroke-width: 1.8; }
.ofo h3 { margin: 4px 0 0 !important; font-size: 17.5px !important; line-height: 1.3; letter-spacing: -.02em; color: var(--ink); display: block !important; gap: 0 !important; }
.ofo p { margin: 8px 0 0 !important; font-size: 14.5px !important; line-height: 1.55; color: var(--fg2); max-width: 34ch; }
@media (max-width: 991px) { .ofo-wrap { grid-template-columns: 1fr; } .ofo-lead { position: static; } }
@media (max-width: 640px) { .ofo-list { grid-template-columns: 1fr; gap: 18px; } .ofo { grid-template-columns: 52px minmax(0, 1fr); gap: 14px; } .ofo-ico { width: 52px; height: 52px; } .ofo-ico svg { width: 22px; height: 22px; } }
.ofo-ico { background: var(--ks-blue-50) !important; border: 1px solid var(--ks-blue-100) !important; }
.ofo-ico i { display: none !important; }
.ofp-stats b { font-weight: 500 !important; letter-spacing: -.025em !important; color: #2F6BE8 !important; font-family: var(--font-display); }
.ofp-photo video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ofp-photo--video::after { display: none; }
.ofh-line, .ofh-fill { width: 1px !important; }
.ofh-line { background: var(--slate-150) !important; }
.ofh-fill { background: linear-gradient(180deg, rgba(10,91,240,.42) 0%, rgba(10,132,255,.38) 60%, rgba(124,58,237,.3) 100%) !important; }
.ofh-fill { background: linear-gradient(180deg, rgba(10,91,240,.2) 0%, rgba(10,132,255,.18) 60%, rgba(124,58,237,.14) 100%) !important; }
.ofh-line { background: var(--slate-100) !important; }
.ofh-step.is-on .ofh-n { background: var(--ks-blue-50) !important; border-color: var(--ks-blue-100) !important; color: var(--ks-blue) !important; box-shadow: none !important; }
.ofh-n { background: #fff !important; border-color: var(--slate-150) !important; color: var(--fg3) !important; }
.ofh-step.is-on .ofh-n { background: var(--ks-blue-50) !important; border-color: var(--ks-blue-100) !important; color: var(--ks-blue) !important; }
html body section.ks-section.ofr-sec, html body section.ks-section.ofo-sec, html body section.ks-section.ofp-sec, html body .of-top, html body .ofs-stage, html body .ks-bg-subtle, html body .ofh-sec, html body .of-faqsec, html body .of-problem { background: #fff !important; background-image: none !important; }
.ofo:hover .ofo-ico, .ofo:hover .ofo-ico svg { transform: none !important; }
.ofh::before, .ofh::after { content: none !important; display: none !important; }
.ofh-line, .ofh-fill { display: none !important; }
/* kl.css */
.kl-eyebrow { display: inline-flex; align-items: center; font-weight: 600; font-size: 13px; color: var(--ks-blue); }
.kl-note { font-size: 13px; color: var(--fg3); }
.kl-top .sx-hero-grid { align-items: center; }
.kl-top-vis { min-width: 0; }
.kl-top .crumb { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--fg3); margin-bottom: 14px; }
.kl-top .crumb a { color: var(--fg3); } .kl-top .crumb a:hover { color: var(--ks-blue); } .kl-top .crumb .cur { color: var(--ink); } .kl-top .crumb svg { width: 14px; height: 14px; }
.kl-top .sx-hero-strip.kl-buyers { align-items: center; gap: 8px 10px; }
.kl-buyers-l { font-weight: 600; color: var(--fg2); margin-right: 4px; }
.kl-buyers span:not(.kl-buyers-l) { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); color: var(--fg2); font-size: 13.5px; }
.kl-buyers span:not(.kl-buyers-l) svg { display: none; }
@media (max-width: 991px) { .kl-top .sx-hero-grid { grid-template-columns: 1fr; } }
.kl-diagram { position: relative; padding: 26px; border-radius: 14px; border: 1px solid var(--border); background: #fff; }
.kl-dg-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; font-size: 12.5px; font-weight: 600; color: var(--fg3); }
.kl-node { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border); background: #fff; font-size: 14px; font-weight: 600; color: var(--ink); min-width: 0; }
.kl-node svg { width: 18px; height: 18px; color: var(--ks-blue); flex: none; }
.kl-node small { display: block; font-size: 12px; font-weight: 400; color: var(--fg3); margin-top: 2px; }
.kl-node--hub { background: var(--ks-blue); border-color: var(--ks-blue); color: #fff; } .kl-node--hub svg { color: #fff; } .kl-node--hub small { color: rgba(255,255,255,.75); }
.kl-link { display: flex; align-items: center; justify-content: center; gap: 8px; height: 34px; font-size: 12px; font-weight: 600; color: var(--fg3); }
.kl-link svg { width: 14px; height: 14px; color: var(--ks-blue); }
.kl-link i { width: 2px; height: 14px; background: var(--ks-blue-100); border-radius: 2px; }
.kl-col { display: grid; gap: 0; }
.kl-row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.kl-row4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.kl-row4 .kl-node, .kl-row3 .kl-node { justify-content: center; text-align: center; font-size: 13px; padding: 10px 8px; }
.kl-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.kl-tags span { font-size: 12px; font-weight: 600; color: var(--ks-blue); background: var(--ks-blue-50); border-radius: 999px; padding: 5px 10px; }
.kl-dg-foot { margin-top: 16px; font-size: 12.5px; color: var(--fg3); display: flex; gap: 8px; align-items: flex-start; } .kl-dg-foot svg { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--ks-blue); }
.kl-ba { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; }
.kl-ba-col { display: grid; gap: 6px; } .kl-ba-col h4 { margin: 0 0 6px; font-size: 12px; font-weight: 600; color: var(--fg3); }
.kl-chip { font-size: 12.5px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); color: var(--fg2); background: #fff; }
.kl-chip--bad { color: #9A3412; border-color: #FED7AA; background: #FFF7ED; }
.kl-chip--good { color: var(--ink); border-color: var(--ks-blue-100); background: var(--ks-blue-50); font-weight: 600; }
.kl-ba-arrow { display: grid; place-items: center; color: var(--ks-blue); } .kl-ba-arrow svg { width: 22px; height: 22px; }
@media (max-width: 991px) { .kl-top-grid { grid-template-columns: 1fr; } .kl-top h1 { max-width: none; } }
@media (max-width: 560px) { .kl-row4 { grid-template-columns: 1fr 1fr; } .kl-ba { grid-template-columns: 1fr; } .kl-ba-arrow svg { transform: rotate(90deg); } }
.kl-caps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 4vw, 48px) clamp(28px, 4vw, 64px); }
.kl-cap { display: flex; flex-direction: column; min-width: 0; }
.kl-cap h3 { display: flex; align-items: center; gap: 12px; margin: 0; font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); letter-spacing: -.02em; color: var(--ink); }
.kl-cap h3 svg { width: 22px; height: 22px; flex: none; color: var(--ks-blue); }
.kl-cap p { margin: 14px 0 0; font-size: 16px; line-height: 1.6; color: var(--fg2); max-width: 44ch; }
@media (max-width: 991px) { .kl-caps { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .kl-caps { grid-template-columns: 1fr; } }
.kl-diff .kl-eyebrow { color: #8DB8FF; } .kl-diff .ks-h2 { color: #fff !important; } .kl-diff .ks-lead { color: rgba(220,233,255,.78) !important; }
.kl-diff-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 28px; margin-bottom: 28px; }
.kl-diff-head .kl-head { margin-bottom: 0; }
.kl-replay { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,.22); background: transparent; color: #fff; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.kl-replay svg { width: 15px; height: 15px; } .kl-replay:hover { border-color: #fff; }
.kl-panes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.kl-pane { position: relative; display: flex; flex-direction: column; border-radius: 14px; padding: 22px 22px 20px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); overflow: hidden; }
.kl-pane--ks { background: rgba(10,91,240,.1); border-color: rgba(141,184,255,.3); }
.kl-pane-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.kl-pane-h b { font-size: 15px; color: #fff; } .kl-pane-h span { font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 999px; background: rgba(255,255,255,.1); color: rgba(236,241,255,.8); }
.kl-pane--ks .kl-pane-h span { background: #fff; color: var(--ks-blue); }
.kl-stage { position: relative; height: 340px; margin: 18px 0 14px; }
.kl-pane p.kl-sum { margin: auto 0 0; font-size: 14px; line-height: 1.5; color: rgba(220,233,255,.78); }
.kl-pane--ks p.kl-sum { color: #fff; }
.kl-prog { height: 3px; border-radius: 2px; background: rgba(255,255,255,.12); overflow: hidden; margin-top: 14px; }
.kl-prog i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #0A84FF, #7C3AED); }
.is-on .kl-prog i { animation: klProg 10s linear infinite; }
@keyframes klProg { from { width: 0; } to { width: 100%; } }
.kl-diff:hover .kl-stage *, .kl-diff:hover .kl-prog i { animation-play-state: paused; }
.kl-takeaway { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.kl-takeaway div { padding: 16px 18px; border-radius: 10px; border: 1px solid rgba(255,255,255,.12); font-size: 14px; line-height: 1.5; color: rgba(220,233,255,.8); }
.kl-takeaway div b { display: block; color: #fff; margin-bottom: 4px; font-size: 14.5px; }
@media (max-width: 991px) { .kl-panes, .kl-takeaway { grid-template-columns: 1fr; } .kl-stage { height: 320px; } }
@media (prefers-reduced-motion: reduce) { .kl-stage *, .kl-prog i { animation: none !important; } }
.sb { position: absolute; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; font-size: 12.5px; font-weight: 600; color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); white-space: nowrap; }
.sb svg { width: 15px; height: 15px; flex: none; }
.sb--hub { background: var(--ks-blue); border-color: var(--ks-blue); }
.sb--muted { color: rgba(220,233,255,.55); border-style: dashed; }
.sb--ok { background: rgba(19,138,91,.22); border-color: rgba(60,200,140,.6); }
.sb--bad { background: rgba(212,72,59,.18); border-color: rgba(255,140,130,.6); }
.sb--warn { background: rgba(245,179,50,.16); border-color: rgba(245,179,50,.6); color: #FFE2A8; }
.sbar { position: absolute; left: 0; right: 0; height: 8px; border-radius: 4px; background: rgba(255,255,255,.1); overflow: hidden; }
.sbar i { display: block; height: 100%; width: 0; border-radius: 4px; background: rgba(255,255,255,.45); }
.scap { position: absolute; font-size: 12px; color: rgba(220,233,255,.7); white-space: nowrap; }
.sline { position: absolute; width: 2px; background: rgba(141,184,255,.35); border-radius: 2px; transform-origin: top center; }
.sdot { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #8DB8FF; }
.sc-canvas .t-blk { left: 50%; transform: translateX(-50%); width: 170px; justify-content: center; }
.sc-canvas .t-b1 { top: 0; } .sc-canvas .t-b2 { top: 46px; } .sc-canvas .t-b3 { top: 92px; } .sc-canvas .t-b4 { top: 138px; } .sc-canvas .t-b5 { top: 184px; }
.is-on .sc-canvas .t-blk { animation: cvDrop 10s ease-in-out infinite; }
.is-on .sc-canvas .t-b2 { animation-delay: .25s; } .is-on .sc-canvas .t-b3 { animation-delay: .5s; } .is-on .sc-canvas .t-b4 { animation-delay: .75s; } .is-on .sc-canvas .t-b5 { animation-delay: 1s; }
@keyframes cvDrop { 0%, 14% { opacity: 1; transform: translateX(-50%) translateY(0); border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.08); } 22% { border-color: rgba(255,140,130,.7); background: rgba(212,72,59,.2); } 34% { opacity: 0; transform: translateX(-50%) translateY(70px) rotate(4deg); } 74% { opacity: 0; transform: translateX(-50%) translateY(-24px); } 86%, 100% { opacity: .55; transform: translateX(-50%) translateY(0); border-color: rgba(255,255,255,.14); border-style: dashed; background: rgba(255,255,255,.03); } }
.sc-canvas .t-bar { top: 262px; } .is-on .sc-canvas .t-bar i { animation: cvBar 10s linear infinite; }
@keyframes cvBar { 0%, 34% { width: 0; } 78%, 100% { width: 100%; } }
.sc-canvas .t-cap { top: 278px; left: 0; } .sc-canvas .t-cap2 { top: 278px; right: 0; }
.sc-canvas .t-risk { top: 232px; right: 0; opacity: 0; } .is-on .sc-canvas .t-risk { animation: cvRisk 10s linear infinite; }
@keyframes cvRisk { 0%, 40% { opacity: 0; } 46%, 92% { opacity: 1; } 100% { opacity: 0; } }
.sc-canvas .t-retrain { top: 232px; left: 0; opacity: 0; } .is-on .sc-canvas .t-retrain { animation: cvRetrain 10s linear infinite; }
@keyframes cvRetrain { 0%, 80% { opacity: 0; } 86%, 100% { opacity: 1; } }
.sc-canvas .k-hub { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 150px; justify-content: center; }
.sc-canvas .k-mod { opacity: 0; }
.sc-canvas .k-m1 { left: 50%; top: 10px; transform: translateX(-50%) translateY(-30px); }
.sc-canvas .k-m2 { right: 0; top: 50%; transform: translateY(-50%) translateX(30px); }
.sc-canvas .k-m3 { left: 50%; bottom: 44px; transform: translateX(-50%) translateY(30px); }
.sc-canvas .k-m4 { left: 0; top: 50%; transform: translateY(-50%) translateX(-30px); }
.is-on .sc-canvas .k-m1 { animation: cvDock1 10s ease-out infinite; } .is-on .sc-canvas .k-m2 { animation: cvDock2 10s ease-out infinite; } .is-on .sc-canvas .k-m3 { animation: cvDock3 10s ease-out infinite; } .is-on .sc-canvas .k-m4 { animation: cvDock4 10s ease-out infinite; }
@keyframes cvDock1 { 0%, 12% { opacity: 0; transform: translateX(-50%) translateY(-30px); } 20%, 100% { opacity: 1; transform: translateX(-50%) translateY(0); } }
@keyframes cvDock2 { 0%, 28% { opacity: 0; transform: translateY(-50%) translateX(30px); } 36%, 100% { opacity: 1; transform: translateY(-50%) translateX(0); } }
@keyframes cvDock3 { 0%, 44% { opacity: 0; transform: translateX(-50%) translateY(30px); } 52%, 100% { opacity: 1; transform: translateX(-50%) translateY(0); } }
@keyframes cvDock4 { 0%, 60% { opacity: 0; transform: translateY(-50%) translateX(-30px); } 68%, 100% { opacity: 1; transform: translateY(-50%) translateX(0); } }
.sc-canvas .k-count { left: 0; bottom: 0; } .sc-canvas .k-count em { font-style: normal; color: #8DB8FF; }
.sc-canvas .k-c1, .sc-canvas .k-c2, .sc-canvas .k-c3, .sc-canvas .k-c4 { position: absolute; left: 0; bottom: 0; opacity: 0; }
.is-on .sc-canvas .k-c0 { animation: cvC0 10s linear infinite; } .is-on .sc-canvas .k-c1 { animation: cvC1 10s linear infinite; } .is-on .sc-canvas .k-c2 { animation: cvC2 10s linear infinite; } .is-on .sc-canvas .k-c3 { animation: cvC3 10s linear infinite; } .is-on .sc-canvas .k-c4 { animation: cvC4 10s linear infinite; }
@keyframes cvC0 { 0%, 19% { opacity: 1; } 20%, 100% { opacity: 0; } }
@keyframes cvC1 { 0%, 19% { opacity: 0; } 20%, 35% { opacity: 1; } 36%, 100% { opacity: 0; } }
@keyframes cvC2 { 0%, 35% { opacity: 0; } 36%, 51% { opacity: 1; } 52%, 100% { opacity: 0; } }
@keyframes cvC3 { 0%, 51% { opacity: 0; } 52%, 67% { opacity: 1; } 68%, 100% { opacity: 0; } }
@keyframes cvC4 { 0%, 67% { opacity: 0; } 68%, 100% { opacity: 1; } }
.sc-canvas .k-an { right: 0; bottom: 0; opacity: 0; } .is-on .sc-canvas .k-an { animation: cvAn 10s linear infinite; }
@keyframes cvAn { 0%, 78% { opacity: 0; transform: translateY(8px); } 86%, 100% { opacity: 1; transform: none; } }
.sc-lti .app { left: 50%; top: 0; transform: translateX(-50%); width: 160px; justify-content: center; }
.sc-lti .lms { bottom: 56px; width: 23%; justify-content: center; font-size: 11.5px; padding: 9px 6px; }
.sc-lti .l1 { left: 0; } .sc-lti .l2 { left: 25.6%; } .sc-lti .l3 { left: 51.3%; } .sc-lti .l4 { right: 0; }
.sc-lti .t-con { top: 42px; left: 50%; height: 240px; }
.sc-lti .t-c1 { transform: rotate(32deg); } .sc-lti .t-c2 { transform: rotate(11deg); } .sc-lti .t-c3 { transform: rotate(-11deg); } .sc-lti .t-c4 { transform: rotate(-32deg); }
.is-on .sc-lti .t-c1 { animation: ltBreak1 10s linear infinite; } .is-on .sc-lti .t-c3 { animation: ltBreak3 10s linear infinite; } .is-on .sc-lti .t-c4 { animation: ltBreak4 10s linear infinite; }
@keyframes ltBreak1 { 0%, 18% { background: rgba(141,184,255,.35); } 22%, 48% { background: rgba(255,140,130,.85); } 52%, 100% { background: rgba(245,179,50,.7); } }
@keyframes ltBreak3 { 0%, 40% { background: rgba(141,184,255,.35); } 44%, 70% { background: rgba(255,140,130,.85); } 74%, 100% { background: rgba(245,179,50,.7); } }
@keyframes ltBreak4 { 0%, 62% { background: rgba(141,184,255,.35); } 66%, 88% { background: rgba(255,140,130,.85); } 92%, 100% { background: rgba(245,179,50,.7); } }
.sc-lti .t-badge { opacity: 0; font-size: 11.5px; padding: 6px 9px; } .sc-lti .t-bd1 { left: 4%; top: 120px; } .sc-lti .t-bd3 { left: 50%; top: 150px; transform: translateX(-50%); } .sc-lti .t-bd4 { right: 2%; top: 120px; }
.is-on .sc-lti .t-bd1 { animation: ltBd1 10s linear infinite; } .is-on .sc-lti .t-bd3 { animation: ltBd3 10s linear infinite; } .is-on .sc-lti .t-bd4 { animation: ltBd4 10s linear infinite; }
@keyframes ltBd1 { 0%, 20% { opacity: 0; } 24%, 50% { opacity: 1; } 54%, 100% { opacity: 0; } }
@keyframes ltBd3 { 0%, 42% { opacity: 0; } 46%, 72% { opacity: 1; } 76%, 100% { opacity: 0; } }
@keyframes ltBd4 { 0%, 64% { opacity: 0; } 68%, 90% { opacity: 1; } 94%, 100% { opacity: 0; } }
.sc-lti .t-meter { left: 0; bottom: 0; } .sc-lti .t-meter em { font-style: normal; color: #FFB4A8; }
.sc-lti .t-n { position: absolute; left: 0; bottom: 0; opacity: 0; }
.is-on .sc-lti .t-n0 { animation: ltN0 10s linear infinite; } .is-on .sc-lti .t-n1 { animation: ltN1 10s linear infinite; } .is-on .sc-lti .t-n2 { animation: ltN2 10s linear infinite; } .is-on .sc-lti .t-n3 { animation: ltN3 10s linear infinite; }
@keyframes ltN0 { 0%, 21% { opacity: 1; } 22%, 100% { opacity: 0; } } @keyframes ltN1 { 0%, 21% { opacity: 0; } 22%, 43% { opacity: 1; } 44%, 100% { opacity: 0; } } @keyframes ltN2 { 0%, 43% { opacity: 0; } 44%, 65% { opacity: 1; } 66%, 100% { opacity: 0; } } @keyframes ltN3 { 0%, 65% { opacity: 0; } 66%, 100% { opacity: 1; } }
.sc-lti .k-hub { left: 50%; top: 96px; transform: translateX(-50%); width: 150px; justify-content: center; }
.sc-lti .k-chain { position: absolute; left: 0; right: 0; top: 150px; display: flex; justify-content: center; gap: 6px; }
.sc-lti .k-chain span { font-size: 11px; font-weight: 600; padding: 5px 8px; border-radius: 999px; border: 1px solid rgba(141,184,255,.35); color: rgba(220,233,255,.6); opacity: .5; }
.is-on .sc-lti .k-chain span { animation: ltStep 10s linear infinite; }
.is-on .sc-lti .k-chain span:nth-child(2) { animation-delay: .7s; } .is-on .sc-lti .k-chain span:nth-child(3) { animation-delay: 1.4s; } .is-on .sc-lti .k-chain span:nth-child(4) { animation-delay: 2.1s; } .is-on .sc-lti .k-chain span:nth-child(5) { animation-delay: 2.8s; }
@keyframes ltStep { 0%, 10% { opacity: .5; background: transparent; color: rgba(220,233,255,.6); } 16%, 100% { opacity: 1; background: #fff; color: var(--ks-blue); border-color: #fff; } }
.sc-lti .k-con { top: 42px; left: 50%; height: 54px; } .sc-lti .k-fan { top: 138px; left: 50%; height: 150px; opacity: .35; }
.sc-lti .k-f1 { transform: rotate(48deg); } .sc-lti .k-f2 { transform: rotate(18deg); } .sc-lti .k-f3 { transform: rotate(-18deg); } .sc-lti .k-f4 { transform: rotate(-48deg); }
.is-on .sc-lti .k-fan { animation: ltFan 10s linear infinite; } @keyframes ltFan { 0%, 52% { background: rgba(141,184,255,.35); } 58%, 100% { background: rgba(60,200,140,.9); } }
.sc-lti .k-lms { transition: none; } .is-on .sc-lti .k-lms { animation: ltOk 10s linear infinite; }
@keyframes ltOk { 0%, 54% { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); } 60%, 100% { background: rgba(19,138,91,.25); border-color: rgba(60,200,140,.7); } }
.sc-lti .k-pulse { left: 50%; top: 42px; transform: translateX(-50%); opacity: 0; } .is-on .sc-lti .k-pulse { animation: ltPulse 10s linear infinite; }
@keyframes ltPulse { 0%, 4% { top: 42px; opacity: 0; } 8% { opacity: 1; } 12% { top: 92px; } 50% { top: 150px; opacity: 1; } 56% { top: 280px; opacity: 0; } 100% { opacity: 0; } }
.sc-lti .k-done { left: 50%; bottom: 0; transform: translateX(-50%); opacity: 0; } .is-on .sc-lti .k-done { animation: ltDone 10s linear infinite; }
@keyframes ltDone { 0%, 60% { opacity: 0; } 68%, 100% { opacity: 1; } }
.sc-modern .t-old { left: 0; top: 0; width: 46%; justify-content: center; } .is-on .sc-modern .t-old { animation: mdOld 10s linear infinite; }
@keyframes mdOld { 0%, 12% { opacity: 1; text-decoration: none; } 18%, 100% { opacity: .45; text-decoration: line-through; border-style: dashed; } }
.sc-modern .t-new { right: 0; top: 0; width: 46%; justify-content: center; opacity: 0; } .is-on .sc-modern .t-new { animation: mdNew 10s ease-out infinite; }
@keyframes mdNew { 0%, 22% { opacity: 0; transform: translateX(30px); } 32%, 100% { opacity: 1; transform: none; } }
.sc-modern .t-bar { top: 86px; } .is-on .sc-modern .t-bar i { animation: mdBar 10s linear infinite; background: rgba(255,140,130,.7); }
@keyframes mdBar { 0%, 34% { width: 0; } 92%, 100% { width: 100%; } }
.sc-modern .t-cap { top: 104px; left: 0; } .sc-modern .t-cap2 { top: 104px; right: 0; }
.sc-modern .t-w { top: 136px; opacity: 0; font-size: 11.5px; padding: 6px 9px; } .sc-modern .t-w1 { left: 0; } .sc-modern .t-w2 { left: 36%; } .sc-modern .t-w3 { right: 0; }
.is-on .sc-modern .t-w1 { animation: mdW1 10s linear infinite; } .is-on .sc-modern .t-w2 { animation: mdW2 10s linear infinite; } .is-on .sc-modern .t-w3 { animation: mdW3 10s linear infinite; }
@keyframes mdW1 { 0%, 42% { opacity: 0; } 48%, 100% { opacity: 1; } } @keyframes mdW2 { 0%, 60% { opacity: 0; } 66%, 100% { opacity: 1; } } @keyframes mdW3 { 0%, 78% { opacity: 0; } 84%, 100% { opacity: 1; } }
.sc-modern .t-down { left: 0; right: 0; top: 190px; justify-content: center; opacity: 0; } .is-on .sc-modern .t-down { animation: mdDown 10s linear infinite; }
@keyframes mdDown { 0%, 54% { opacity: 0; } 58%, 62% { opacity: 1; } 64% { opacity: .4; } 66%, 100% { opacity: 1; } }
.sc-modern .t-users { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 10px; align-items: center; font-size: 12.5px; color: rgba(220,233,255,.7); }
.sc-modern .t-users svg { width: 16px; height: 16px; color: rgba(220,233,255,.5); } .sc-modern .t-users em { font-style: normal; color: #FFB4A8; opacity: 0; } .is-on .sc-modern .t-users em { animation: mdW3 10s linear infinite; }
.sc-modern .k-base { left: 0; right: 0; bottom: 0; justify-content: center; }
.sc-modern .k-frame { position: absolute; left: 50%; top: 20px; transform: translateX(-50%); width: 74%; height: 220px; border-radius: 12px; border: 1px solid rgba(141,184,255,.45); background: rgba(7,16,51,.35); opacity: 0; }
.is-on .sc-modern .k-frame { animation: mdFrame 10s ease-out infinite; } @keyframes mdFrame { 0%, 8% { opacity: 0; } 16%, 100% { opacity: 1; } }
.sc-modern .k-nav { position: absolute; left: 13%; right: 13%; top: 20px; height: 34px; border-radius: 12px 12px 0 0; background: rgba(255,255,255,.08); display: flex; align-items: center; gap: 10px; padding: 0 12px; font-size: 11.5px; font-weight: 600; color: #fff; opacity: 0; }
.sc-modern .k-nav span { opacity: .75; } .is-on .sc-modern .k-nav { animation: mdNav 10s linear infinite; } @keyframes mdNav { 0%, 50% { opacity: 0; } 58%, 100% { opacity: 1; } }
.sc-modern .k-id { position: absolute; right: 14%; top: 26px; font-size: 11px; font-weight: 600; padding: 4px 8px; border-radius: 999px; background: #fff; color: var(--ks-blue); opacity: 0; display: flex; gap: 6px; align-items: center; } .sc-modern .k-id svg { width: 12px; height: 12px; }
.is-on .sc-modern .k-id { animation: mdNav 10s linear infinite; }
.sc-modern .k-win { width: 92px; justify-content: center; font-size: 11.5px; padding: 8px 6px; } .sc-modern .k-win svg { width: 12px; height: 12px; color: rgba(220,233,255,.6); }
.is-on .sc-modern .k-win svg { animation: mdLock 10s linear infinite; } @keyframes mdLock { 0%, 50% { opacity: 1; width: 12px; } 56%, 100% { opacity: 0; width: 0; } }
.sc-modern .k-w1 { left: 0; top: 0; } .sc-modern .k-w2 { right: 0; top: 10px; } .sc-modern .k-w3 { left: 6%; top: 130px; } .sc-modern .k-w4 { right: 4%; top: 150px; } .sc-modern .k-w5 { left: 40%; top: 230px; } .sc-modern .k-w6 { left: 2%; top: 250px; }
.is-on .sc-modern .k-w1 { animation: mdW_1 10s ease-in-out infinite; } .is-on .sc-modern .k-w2 { animation: mdW_2 10s ease-in-out infinite; } .is-on .sc-modern .k-w3 { animation: mdW_3 10s ease-in-out infinite; } .is-on .sc-modern .k-w4 { animation: mdW_4 10s ease-in-out infinite; } .is-on .sc-modern .k-w5 { animation: mdW_5 10s ease-in-out infinite; } .is-on .sc-modern .k-w6 { animation: mdW_6 10s ease-in-out infinite; }
@keyframes mdW_1 { 0%, 14% { left: 0; top: 0; } 44%, 100% { left: 15%; top: 70px; } }
@keyframes mdW_2 { 0%, 16% { right: 0; top: 10px; } 46%, 100% { right: 15%; top: 70px; } }
@keyframes mdW_3 { 0%, 18% { left: 6%; top: 130px; } 48%, 100% { left: 15%; top: 122px; } }
@keyframes mdW_4 { 0%, 20% { right: 4%; top: 150px; } 50%, 100% { right: 15%; top: 122px; } }
@keyframes mdW_5 { 0%, 22% { left: 40%; top: 230px; } 52%, 100% { left: 15%; top: 174px; } }
@keyframes mdW_6 { 0%, 24% { left: 2%; top: 250px; } 54%, 100% { left: 50%; top: 174px; } }
.sc-modern .k-mob { position: absolute; right: 0; bottom: 56px; width: 54px; height: 100px; border-radius: 10px; border: 1px solid rgba(141,184,255,.5); background: rgba(255,255,255,.06); opacity: 0; }
.sc-modern .k-mob::before { content: ""; position: absolute; left: 8px; right: 8px; top: 12px; height: 6px; border-radius: 3px; background: #fff; opacity: .8; } .sc-modern .k-mob::after { content: ""; position: absolute; left: 8px; right: 8px; top: 26px; bottom: 12px; border-radius: 4px; background: rgba(141,184,255,.2); }
.is-on .sc-modern .k-mob { animation: mdMob 10s ease-out infinite; } @keyframes mdMob { 0%, 68% { opacity: 0; transform: translateX(16px); } 78%, 100% { opacity: 1; transform: none; } }
.sc-ai .t-src { width: 30%; justify-content: center; font-size: 11.5px; padding: 8px 6px; }
.sc-ai .t-s1 { left: 0; top: 0; } .sc-ai .t-s2 { left: 35%; top: 0; } .sc-ai .t-s3 { right: 0; top: 0; } .sc-ai .t-s4 { left: 17%; top: 44px; } .sc-ai .t-s5 { right: 17%; top: 44px; }
.sc-ai .t-feed { top: 84px; left: 50%; height: 40px; opacity: .6; } .sc-ai .t-fd1 { transform: rotate(50deg); } .sc-ai .t-fd2 { transform: rotate(22deg); } .sc-ai .t-fd3 { transform: rotate(-22deg); } .sc-ai .t-fd4 { transform: rotate(-50deg); }
.sc-ai .t-box { left: 50%; top: 128px; transform: translateX(-50%); width: 190px; justify-content: center; background: #05081c; border-color: rgba(255,255,255,.3); }
.sc-ai .t-bar { top: 196px; } .is-on .sc-ai .t-bar i { animation: aiStuck 10s linear infinite; background: rgba(255,255,255,.45); }
@keyframes aiStuck { 0%, 10% { width: 0; } 50%, 100% { width: 68%; } }
.sc-ai .t-cap { top: 214px; left: 0; } .sc-ai .t-cap2 { top: 214px; right: 0; color: rgba(220,233,255,.4); }
.sc-ai .t-wait { left: 50%; top: 240px; transform: translateX(-50%); opacity: 0; font-size: 11.5px; padding: 6px 9px; } .is-on .sc-ai .t-wait { animation: aiWait 10s linear infinite; } @keyframes aiWait { 0%, 52% { opacity: 0; } 58%, 100% { opacity: 1; } }
.sc-ai .t-meter { left: 0; bottom: 0; } .sc-ai .t-meter em { font-style: normal; color: #FFB4A8; }
.sc-ai .t-n { position: absolute; left: 0; bottom: 0; opacity: 0; }
.is-on .sc-ai .t-n0 { animation: ltN0 10s linear infinite; } .is-on .sc-ai .t-n1 { animation: ltN1 10s linear infinite; } .is-on .sc-ai .t-n2 { animation: ltN2 10s linear infinite; } .is-on .sc-ai .t-n3 { animation: ltN3 10s linear infinite; }
.sc-ai .k-q { left: 0; top: 0; max-width: 78%; white-space: normal; font-weight: 500; background: rgba(255,255,255,.1); border-radius: 12px 12px 12px 4px; opacity: 0; } .is-on .sc-ai .k-q { animation: aiQ 10s ease-out infinite; }
@keyframes aiQ { 0%, 4% { opacity: 0; transform: translateY(8px); } 10%, 100% { opacity: 1; transform: none; } }
.sc-ai .k-gate { position: absolute; left: 0; right: 0; top: 70px; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(141,184,255,.45); background: rgba(7,16,51,.4); font-size: 12px; font-weight: 600; color: #fff; }
.sc-ai .k-gate svg { width: 14px; height: 14px; color: #8DB8FF; }
.sc-ai .k-gate span { margin-left: auto; display: flex; gap: 6px; } .sc-ai .k-gate span i { font-style: normal; font-size: 11px; padding: 3px 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,.25); color: rgba(220,233,255,.55); }
.is-on .sc-ai .k-gate span i:first-child { animation: aiRole 10s linear infinite; } @keyframes aiRole { 0%, 14% { background: transparent; color: rgba(220,233,255,.55); } 20%, 100% { background: #fff; color: var(--ks-blue); border-color: #fff; } }
.sc-ai .k-src { top: 134px; width: 23%; justify-content: center; font-size: 11px; padding: 8px 4px; opacity: .55; } .sc-ai .k-src svg { width: 12px; height: 12px; }
.sc-ai .k-sr1 { left: 0; } .sc-ai .k-sr2 { left: 25.6%; } .sc-ai .k-sr3 { left: 51.3%; } .sc-ai .k-sr4 { right: 0; }
.is-on .sc-ai .k-sr1, .is-on .sc-ai .k-sr2 { animation: aiSrcOk 10s linear infinite; } .is-on .sc-ai .k-sr3, .is-on .sc-ai .k-sr4 { animation: aiSrcLock 10s linear infinite; }
@keyframes aiSrcOk { 0%, 24% { opacity: .55; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); } 32%, 100% { opacity: 1; background: rgba(19,138,91,.25); border-color: rgba(60,200,140,.7); } }
@keyframes aiSrcLock { 0%, 24% { opacity: .55; } 32%, 100% { opacity: .45; border-style: dashed; } }
.sc-ai .k-a { right: 0; top: 190px; max-width: 84%; white-space: normal; font-weight: 500; background: var(--ks-blue); border-color: var(--ks-blue); border-radius: 12px 12px 4px 12px; opacity: 0; line-height: 1.4; }
.sc-ai .k-a small { display: block; font-weight: 400; color: rgba(255,255,255,.75); margin-top: 4px; font-size: 11px; }
.is-on .sc-ai .k-a { animation: aiA 10s ease-out infinite; } @keyframes aiA { 0%, 44% { opacity: 0; transform: translateY(8px); } 52%, 100% { opacity: 1; transform: none; } }
.sc-ai .k-live { left: 0; bottom: 0; opacity: 0; } .is-on .sc-ai .k-live { animation: aiLive 10s linear infinite; } @keyframes aiLive { 0%, 66% { opacity: 0; } 72%, 100% { opacity: 1; } }
.sc-ai .k-next { right: 0; bottom: 0; opacity: 0; } .is-on .sc-ai .k-next { animation: aiNext 10s linear infinite; } @keyframes aiNext { 0%, 82% { opacity: 0; } 88%, 100% { opacity: 1; } }
.kl-work { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(28px, 4vw, 40px) clamp(24px, 3vw, 40px); }
.kl-wk { display: flex; flex-direction: column; min-width: 0; }
.kl-wk svg { width: 22px; height: 22px; color: var(--ks-blue); } .kl-wk b { display: block; margin-top: 14px; font-size: 17px; letter-spacing: -.015em; color: var(--ink); } .kl-wk span { display: block; margin-top: 6px; font-size: 15px; line-height: 1.55; color: var(--fg2); }
.kl-proof-note { display: flex; gap: 10px; align-items: flex-start; margin-top: 18px; font-size: 13.5px; color: var(--fg3); } .kl-proof-note svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--ks-blue); }
@media (max-width: 991px) { .kl-work { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .kl-work { grid-template-columns: 1fr; } }
.kl-cta { text-align: center; }
.kl-cta .kl-head { margin: 0 auto 10px; max-width: 820px; }
.kl-cta .ks-h2 { max-width: 18ch; margin-left: auto; margin-right: auto; }
.kl-qual { margin: 26px auto 0; max-width: 760px; }
.kl-qual p { margin: 0 0 12px; font-size: 14px; font-weight: 600; color: var(--fg1); }
.kl-qual-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.kl-qual-chips button { font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink); background: #fff; border: 1px solid var(--border-strong); border-radius: 10px; padding: 10px 14px; cursor: pointer; transition: border-color .25s, color .25s; }
.kl-qual-chips button:hover { border-color: var(--ks-blue); color: var(--ks-blue); }
.kl-cta .kl-ctas { justify-content: center; margin-top: 26px; }
.kl-cta .kl-note { margin-top: 14px; }
html body .kl-diff .kl-eyebrow { color: #8DB8FF !important; }
html body .kl-diff .ks-h2, html body .kl-diff .kl-pane-h b, html body .kl-diff .kl-takeaway b, html body .kl-diff .sb, html body .kl-diff .sb span, html body .kl-diff .k-gate, html body .kl-diff .k-nav, html body .kl-diff .k-nav span, html body .kl-diff .kl-replay { color: #fff !important; }
html body .kl-diff .ks-lead, html body .kl-diff .kl-pane p.kl-sum, html body .kl-diff .scap, html body .kl-diff .kl-takeaway div, html body .kl-diff .t-users, html body .kl-diff .k-chain span { color: rgba(220,233,255,.8) !important; }
html body .kl-diff .kl-pane--ks p.kl-sum { color: #fff !important; }
html body .kl-diff .kl-pane-h span { color: rgba(236,241,255,.85) !important; } html body .kl-diff .kl-pane--ks .kl-pane-h span, html body .kl-diff .k-id, html body .kl-diff .k-id svg { color: var(--ks-blue) !important; }
html body .kl-diff .sb--muted { color: rgba(220,233,255,.55) !important; } html body .kl-diff .sb--warn, html body .kl-diff .sb--warn span { color: #FFE2A8 !important; }
html body .kl-diff .k-count em, html body .kl-diff .scap em { color: #8DB8FF !important; } html body .kl-diff .t-meter em, html body .kl-diff .t-users em { color: #FFB4A8 !important; }
html body .kl-diff .k-a small { color: rgba(255,255,255,.75) !important; } html body .kl-diff .k-gate span i { color: rgba(220,233,255,.55) !important; }
html body .kl-diff .is-on .k-chain span, html body .kl-diff.is-on .k-chain span { animation-name: ltStepC; }
@keyframes ltStepC { 0%, 10% { opacity: .5; background: transparent; color: rgba(220,233,255,.6); border-color: rgba(141,184,255,.35); } 16%, 100% { opacity: 1; background: #fff; color: #0A5BF0; border-color: #fff; } }
html body .kl-diff.is-on .k-gate span i:first-child { animation-name: aiRoleC; }
@keyframes aiRoleC { 0%, 14% { background: transparent; color: rgba(220,233,255,.55); } 20%, 100% { background: #fff; color: #0A5BF0; border-color: #fff; } }
.kl-diagram { border-radius: 12px; }
.kl-faq-wrap { max-width: 820px; margin: 0 auto; }
html body .kl-top .ks-grad-text, html body .kl-head .ks-grad-text, html body .kl-cta .ks-grad-text, html body .ofp-sec .ks-grad-text, html body .of-head .ks-grad-text, html body .ofp-head .ks-grad-text { background: linear-gradient(90deg, #0033EE 0%, #0A84FF 45%, #7C3AED 80%, #FF9A76 100%) !important; background-size: 100% 100% !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; animation: none !important; }
html body .kl-diff .ks-grad-text { background: linear-gradient(90deg, #5B8CFF 0%, #0A84FF 45%, #A78BFA 100%) !important; background-size: 100% 100% !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; }
html body .kl-top .ks-h1 { max-width: none; }
html body .kl-top .ks-wedge, html body .kl-head .ks-wedge, html body .kl-diff .ks-wedge { margin-bottom: 0; }
html body .kl-head { margin-bottom: clamp(28px, 4vw, 44px); } html body .kl-head .ks-h2 { margin-top: 16px; } html body .kl-head .ks-lead { margin-top: 16px; }
html body .kl-cap h3 { font-size: var(--fs-h4, 1.12rem); letter-spacing: -.012em; }
html body .kl-cap p, html body .kl-wk span, html body .kl-pane p.kl-sum, html body .kl-takeaway div { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-reg); }
html body .kl-wk b { font-size: 1.05rem; font-weight: 500; } html body .kl-wk span { font-size: var(--fs-sm); }
html body .kl-pane-h b, html body .kl-takeaway b { font-weight: 500; }
html body .kl-buyers span, html body .kl-tags span, html body .kl-chip, html body .kl-link, html body .kl-dg-title, html body .kl-dg-foot, html body .kl-note, html body .kl-qual p { font-weight: var(--fw-reg); }
html body .kl-diff .sb { font-weight: var(--fw-reg); } html body .kl-diff .sb--hub { font-weight: 500; }
.hv { position: relative; min-height: 460px; border-radius: 18px; overflow: hidden; isolation: isolate; display: flex; align-items: center; padding: clamp(18px, 3vw, 34px); }
.hv-wash { position: absolute; inset: 0; z-index: 0; background: radial-gradient(90% 80% at 0% 100%, rgba(10,91,240,.42), rgba(10,91,240,0) 60%), radial-gradient(70% 70% at 100% 0%, rgba(124,58,237,.40), rgba(124,58,237,0) 60%), radial-gradient(60% 55% at 100% 100%, rgba(255,154,118,.40), rgba(255,154,118,0) 62%), linear-gradient(135deg, #EEF3FF 0%, #F4F0FF 50%, #FFF2EC 100%); }
.hv-wash::before, .hv-wash::after { content: ""; position: absolute; inset: -40%; filter: blur(40px); mix-blend-mode: multiply; }
.hv-wash::before { background: radial-gradient(40% 36% at 30% 40%, rgba(10,132,255,.5), transparent 70%), radial-gradient(34% 30% at 72% 60%, rgba(124,58,237,.44), transparent 70%); animation: hvDriftA 16s ease-in-out infinite alternate; }
.hv-wash::after { background: radial-gradient(36% 32% at 70% 30%, rgba(255,154,118,.5), transparent 70%), radial-gradient(30% 28% at 28% 72%, rgba(10,91,240,.36), transparent 70%); animation: hvDriftB 20s ease-in-out infinite alternate; }
@keyframes hvDriftA { 0% { transform: translate(-6%, -4%) scale(1); } 50% { transform: translate(5%, 6%) scale(1.08); } 100% { transform: translate(8%, -6%) scale(1); } }
@keyframes hvDriftB { 0% { transform: translate(6%, 5%) scale(1.05); } 50% { transform: translate(-5%, -4%) scale(1); } 100% { transform: translate(-8%, 6%) scale(1.1); } }
.hv-hex { position: absolute; inset: 0; z-index: 0; opacity: .9; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='74' viewBox='0 0 64 74'><path d='M32 2 L62 19 L62 55 L32 72 L2 55 L2 19 Z' fill='none' stroke='%230A5BF0' stroke-opacity='.26' stroke-width='1'/></svg>"); background-size: 64px 74px; -webkit-mask: radial-gradient(90% 80% at 50% 50%, #000 40%, transparent 90%); mask: radial-gradient(90% 80% at 50% 50%, #000 40%, transparent 90%); }
.hv-orbit { display: none; }
.hv-mock { position: relative; z-index: 2; width: 100%; background: #fff; border: 1px solid rgba(7,16,51,.08); border-radius: 14px; overflow: hidden; }
.hv-bar-top { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--slate-150); background: var(--slate-50); }
.hv-bar-top i { width: 8px; height: 8px; border-radius: 50%; background: var(--slate-200); } .hv-bar-top span { margin-left: 8px; font-size: 12px; font-weight: 500; color: var(--fg2); } .hv-bar-top .hv-pill { margin-left: auto; }
.hv-body { padding: 14px 16px 6px; } .hv-body--2 { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 18px; }
.hv small { display: block; font-size: 11px; font-weight: 500; color: var(--fg3); margin-bottom: 8px; }
.hv-l { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; margin-bottom: 9px; }
.hv-l b { display: block; font-size: 12px; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hv-l em { font-style: normal; font-size: 11px; font-weight: 500; color: var(--fg2); }
.hv-av { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--av, #0A84FF); color: #fff; font-size: 10px; font-weight: 600; }
.hv-bar { display: block; height: 4px; border-radius: 2px; background: var(--slate-150); margin-top: 5px; overflow: hidden; }
.hv-bar i { display: block; height: 100%; width: var(--w); background: linear-gradient(90deg, #0A5BF0, #7C3AED); transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease-out) .3s; }
.hv-bar.grad i { background: linear-gradient(90deg, #0A5BF0, #7C3AED 60%, #FF9A76); }
.ks-reveal.is-in .hv-bar i { transform: scaleX(1); }
.hv-bars { display: flex; align-items: flex-end; gap: 5px; height: 82px; }
.hv-bars i { flex: 1; border-radius: 3px 3px 0 0; background: rgba(10,91,240,.18); height: var(--h); transform: scaleY(0); transform-origin: bottom; transition: transform .9s var(--ease-out); transition-delay: calc(.2s + var(--n, 0) * 55ms); }
.hv-bars i.hi { background: linear-gradient(180deg, #7C3AED, #0A5BF0); } .hv--ai .hv-bars i { background: rgba(124,58,237,.16); } .hv--ai .hv-bars i.hi { background: linear-gradient(180deg, #FF9A76, #7C3AED); }
.ks-reveal.is-in .hv-bars i { transform: scaleY(1); }
.hv-pill { display: inline-flex; align-items: center; font-size: 11px; font-weight: 500; padding: 4px 9px; border-radius: 999px; background: var(--slate-100); color: var(--fg2); }
.hv-pill.ok { background: #E8F7EF; color: #13A05B; }
.hv-foot { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 12px 16px 16px; border-top: 1px solid var(--slate-150); margin-top: 10px; }
.hv-foot > div { padding: 8px 10px; border-radius: 10px; border: 1px solid var(--slate-150); min-width: 0; } .hv-foot small { margin-bottom: 2px; } .hv-foot b { display: block; font-size: 14px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; overflow-wrap: anywhere; }
.hv-foot .hv-code { grid-column: span 1; }
.hv-code { font-size: 11px; color: var(--ink); padding: 8px 10px !important; border-radius: 10px; background: var(--slate-50) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hv-code span { color: var(--ks-blue); font-weight: 600; margin-right: 6px; } .hv-code em { font-style: normal; color: #13A05B; margin-left: 6px; }
.hv-sync { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.hv-node { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 500; color: var(--ink); padding: 5px 8px; border-radius: 8px; border: 1px solid var(--slate-150); background: #fff; } .hv-node svg { width: 12px; height: 12px; color: var(--ks-blue); }
.hv-wire { position: relative; flex: 1; height: 2px; background: var(--slate-150); border-radius: 2px; overflow: hidden; } .hv-wire i { position: absolute; top: 0; bottom: 0; width: 40%; background: linear-gradient(90deg, transparent, #0A84FF, #7C3AED, transparent); animation: hvFlow 2.4s ease-in-out infinite; } .hv-wire--2 i { animation-delay: 1.2s; }
@keyframes hvFlow { from { left: -40%; } to { left: 100%; } }
.hv-chain { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hv-chain span { font-size: 11px; font-weight: 500; padding: 5px 9px; border-radius: 999px; border: 1px solid var(--slate-200); color: var(--fg3); background: #fff; animation: hvStep 7s ease-in-out infinite; animation-delay: calc(var(--n) * .55s); }
.hv-chain i { flex: 1; min-width: 10px; height: 1px; background: var(--slate-200); }
@keyframes hvStep { 0%, 6% { background: #fff; color: var(--fg3); border-color: var(--slate-200); } 12%, 78% { background: var(--ks-blue); color: #fff; border-color: var(--ks-blue); } 86%, 100% { background: #fff; color: var(--fg3); border-color: var(--slate-200); } }
.hv-lms { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.hv-lms span { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 500; color: var(--ink); padding: 8px 10px; border-radius: 10px; border: 1px solid var(--slate-150); background: #fff; animation: hvOn 7s ease-in-out infinite; animation-delay: calc(3.2s + var(--n) * .18s); } .hv-lms span svg { width: 13px; height: 13px; color: var(--ks-blue); }
@keyframes hvOn { 0%, 44% { background: #fff; border-color: var(--slate-150); } 50%, 80% { background: #E8F7EF; border-color: #A7E3C3; } 88%, 100% { background: #fff; border-color: var(--slate-150); } }
.hv-merge { position: relative; height: 128px; }
.hv-merge span { position: absolute; font-size: 11px; font-weight: 500; color: var(--fg2); padding: 5px 9px; border-radius: 8px; border: 1px solid var(--slate-200); background: #fff; animation: hvMerge 7s ease-in-out infinite; animation-delay: calc(var(--n) * .12s); }
.hv-merge span:nth-child(1) { left: 0; top: 0; } .hv-merge span:nth-child(2) { left: 38%; top: 6px; } .hv-merge span:nth-child(3) { right: 0; top: 0; } .hv-merge span:nth-child(4) { left: 4%; top: 46px; } .hv-merge span:nth-child(5) { right: 6%; top: 44px; } .hv-merge span:nth-child(6) { left: 40%; top: 50px; }
@keyframes hvMerge { 0%, 20% { transform: translate(0, 0) scale(1); opacity: 1; } 55%, 80% { transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(.6); opacity: 0; } 100% { transform: translate(0, 0) scale(1); opacity: 1; } }
.hv-merge span:nth-child(1) { --tx: 90px; --ty: 100px; } .hv-merge span:nth-child(2) { --tx: 10px; --ty: 96px; } .hv-merge span:nth-child(3) { --tx: -80px; --ty: 100px; } .hv-merge span:nth-child(4) { --tx: 80px; --ty: 56px; } .hv-merge span:nth-child(5) { --tx: -70px; --ty: 56px; } .hv-merge span:nth-child(6) { --tx: 0; --ty: 50px; }
.hv-merge b { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #fff; padding: 8px 14px; border-radius: 10px; background: linear-gradient(90deg, #0A5BF0, #7C3AED); opacity: 0; animation: hvAppear 7s ease-in-out infinite; } .hv-merge b svg { width: 13px; height: 13px; }
@keyframes hvAppear { 0%, 48% { opacity: 0; transform: translateX(-50%) translateY(6px); } 60%, 88% { opacity: 1; transform: translateX(-50%) translateY(0); } 100% { opacity: 0; } }
.hv-chat { display: grid; gap: 10px; align-content: start; }
.hv-q { justify-self: start; max-width: 86%; padding: 9px 12px; border-radius: 12px 12px 12px 4px; background: var(--slate-50); border: 1px solid var(--slate-150); font-size: 12.5px; color: var(--ink); }
.hv-gate { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--ks-blue-100); background: var(--ks-blue-50); font-size: 11.5px; font-weight: 500; color: var(--ink); } .hv-gate svg { width: 14px; height: 14px; color: var(--ks-blue); }
.hv-gate { flex-wrap: wrap; } .hv-gate span { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; } .hv-gate span i { font-style: normal; font-size: 10.5px; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--slate-200); color: var(--fg3); background: #fff; } .hv-gate span i.on { background: var(--ks-blue); border-color: var(--ks-blue); color: #fff; }
.hv-a { justify-self: end; max-width: 90%; padding: 10px 12px; border-radius: 12px 12px 4px 12px; background: linear-gradient(135deg, #0A5BF0, #7C3AED); color: #fff; font-size: 12.5px; line-height: 1.45; } .hv-a small { margin: 4px 0 0; color: rgba(255,255,255,.78); font-weight: 400; }
.hv-type { display: block; max-width: 100%; overflow-wrap: anywhere; animation: hvFade 7s var(--ease-out) infinite; }
@keyframes hvFade { 0%, 14% { opacity: 0; transform: translateY(4px); } 26%, 100% { opacity: 1; transform: none; } }
.hv-src { display: grid; gap: 6px; }
.hv-src span { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 500; color: var(--ink); padding: 7px 10px; border-radius: 10px; border: 1px solid var(--slate-150); background: #fff; } .hv-src span svg { width: 13px; height: 13px; color: var(--ks-blue); }
.hv-src span.ok { animation: hvOn 7s ease-in-out infinite; animation-delay: calc(1.2s + var(--n) * .3s); } .hv-src span.lock { color: var(--fg3); border-style: dashed; } .hv-src span.lock svg { color: var(--fg3); }
.hv-nav { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--slate-150); font-size: 12px; color: var(--fg3); } .hv-nav b { font-weight: 600; color: var(--ink); } .hv-nav span.on { color: var(--ks-blue); font-weight: 500; } .hv-nav em { margin-left: auto; font-style: normal; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 500; color: var(--ks-blue); background: var(--ks-blue-50); padding: 3px 8px; border-radius: 999px; } .hv-nav em svg { width: 11px; height: 11px; }
@media (max-width: 991px) { .hv { min-height: 0; } }
@media (max-width: 640px) { .hv-body--2 { grid-template-columns: 1fr; } .hv-foot { grid-template-columns: 1fr 1fr; } .hv-nav span:not(.on) { display: none; } }
@media (prefers-reduced-motion: reduce) { .hv-wash::before, .hv-wash::after, .hv-wire i, .hv-chain span, .hv-lms span, .hv-merge span, .hv-merge b, .hv-type, .hv-src span.ok { animation: none !important; } .hv-merge b { opacity: 1; } .hv-type { max-width: 100%; } .hv-bar i, .hv-bars i { transform: none !important; } }
.hv-body--2 > div { min-width: 0; } .hv-q, .hv-a { overflow-wrap: anywhere; }
@media (max-width: 1500px) { .hv-foot { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1200px) { .hv-body--2 { grid-template-columns: 1fr; } }
.hv--ai .hv-mock { container-type: inline-size; }
.hv--ai .hv-aic-body { padding: 14px 16px 14px; gap: 16px; align-items: start; }
.hv--ai .hv-aic-course { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hv--ai .hv-aic-item { display: grid; grid-template-columns: 13px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 7px 9px; border-radius: 9px; border: 1px solid var(--slate-150); background: #fff; font-size: 12px; color: var(--ink); }
.hv--ai .hv-aic-item > svg { width: 13px; height: 13px; color: var(--fg3); }
.hv--ai .hv-aic-item span { font-weight: 600; overflow-wrap: anywhere; }
.hv--ai .hv-aic-item em { font-style: normal; font-size: 10.5px; color: var(--fg3); white-space: nowrap; }
.hv--ai .hv-aic-item.is-done > svg, .hv--ai .hv-aic-item.is-done em { color: var(--success); }
.hv--ai .hv-aic-item.is-now { background: var(--ks-blue-50); border-color: var(--ks-blue-100); } .hv--ai .hv-aic-item.is-now > svg, .hv--ai .hv-aic-item.is-now em { color: var(--ks-blue); }
.hv--ai .hv-aic-prog { margin-top: 6px; height: 4px; border-radius: 2px; background: var(--slate-150); overflow: hidden; }
.hv--ai .hv-aic-prog i { display: block; height: 100%; width: var(--p); background: linear-gradient(90deg, #0A5BF0, #7C3AED); transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease-out) .3s; } .is-in .hv--ai .hv-aic-prog i { transform: scaleX(1); }
.hv--ai .hv-aic-progl { margin: 0; font-size: 10.5px; }
.hv--ai .hv-aic-ai { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.hv--ai .hv-aic-ai > small { display: flex; align-items: center; gap: 6px; } .hv--ai .hv-aic-ai > small svg { width: 12px; height: 12px; color: var(--ks-blue); }
.hv--ai .hv-aic-q { align-self: flex-end; max-width: 92%; padding: 8px 11px; border-radius: 11px 11px 4px 11px; background: var(--slate-100); font-size: 12px; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; }
.hv--ai .hv-aic-a { position: relative; align-self: flex-start; max-width: 100%; padding: 10px 12px 10px 15px; border-radius: 11px 11px 11px 4px; background: linear-gradient(135deg, #EEF3FF, #F6F1FF); border: 1px solid var(--ks-blue-100); font-size: 12px; line-height: 1.45; color: var(--ink); opacity: 0; transform: translateY(6px); transition: opacity .7s var(--ease-out) .5s, transform .8s var(--ease-out) .5s; }
.hv--ai .hv-aic-a::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: linear-gradient(180deg, #0A5BF0, #7C3AED); }
.is-in .hv--ai .hv-aic-a { opacity: 1; transform: none; }
.hv--ai .hv-aic-a p { margin: 0; } .hv--ai .hv-aic-a b { font-weight: 600; color: #0A5BF0; }
.hv--ai .hv-aic-a > span { display: flex; align-items: center; gap: 6px; margin-top: 7px; font-size: 10.5px; color: var(--fg3); } .hv--ai .hv-aic-a > span svg { width: 12px; height: 12px; color: var(--ks-blue); }
.hv--ai .hv-aic-foot { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 10px 16px 12px; border-top: 1px solid var(--slate-150); font-size: 10.5px; color: var(--fg2); }
.hv--ai .hv-aic-foot span { display: inline-flex; align-items: center; gap: 5px; } .hv--ai .hv-aic-foot svg { width: 12px; height: 12px; color: var(--ks-blue); }
@container (max-width: 420px) { .hv--ai .hv-aic-body { grid-template-columns: 1fr; } }
/* kl-modern.css */
.mx-diff { background: #fff !important; color: var(--fg1); }
html body .mx-diff .kl-eyebrow { color: var(--ks-blue) !important; } html body .mx-diff .ks-h2, html body .mx-diff .ks-h2 .mo-wi { color: var(--ink) !important; } html body .mx-diff .ks-lead { color: var(--fg2) !important; max-width: 66ch; }
.mx-diff .kl-diff-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 28px; } .mx-diff .kl-head { max-width: 820px; } .mx-diff .kl-head .ks-h2 { margin-top: 14px; } .mx-diff .kl-head .ks-lead { margin-top: 14px; }
html body .mx-diff .kl-replay { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--border-strong) !important; background: #fff !important; color: var(--ink) !important; font-size: 13.5px; font-weight: 600; cursor: pointer; } html body .mx-diff .kl-replay svg { width: 15px; height: 15px; }
html body .mx-diff .kl-takeaway { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 28px; } html body .mx-diff .kl-takeaway div { padding: 20px 22px; border-radius: 12px; border: 1px solid var(--border) !important; color: var(--fg2) !important; background: var(--slate-50) !important; font-size: 15px; line-height: 1.55; } html body .mx-diff .kl-takeaway div b { display: block; margin-bottom: 6px; color: var(--ink) !important; font-size: 15.5px; }
@media (max-width: 760px) { html body .mx-diff .kl-takeaway { grid-template-columns: 1fr; } }
.mx-stage { position: relative; }
.mx-chapters { position: relative; display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; padding-bottom: 14px; margin-bottom: 14px; }
.mx-ch { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 8px; border-radius: 10px; border: 1px solid var(--border); font-size: 13px; font-weight: 600; color: var(--fg3); transition: color .4s, border-color .4s, background .4s; }
.mx-ch i { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; font-size: 11px; font-style: normal; background: var(--slate-100); color: var(--fg3); transition: background .4s, color .4s; }
.mx-ch.is-on { color: var(--ink); border-color: var(--ks-blue-100); background: var(--ks-blue-50); } .mx-ch.is-on i { background: var(--ks-blue); color: #fff; } .mx-ch.is-done { color: var(--fg2); } .mx-ch.is-done i { background: var(--success-bg); color: var(--success); }
.mx-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--slate-150); overflow: hidden; } .mx-prog b { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #0A5BF0, #7C3AED 70%, #FF9A76); }
.mx-frame { position: relative; width: 100%; height: calc(780px * var(--s, 1)); border-radius: 16px; overflow: hidden; border: 1px solid var(--border); background: #fff; }
.mx-frame.is-narrow { height: calc(1180px * var(--s, 1)); }
.mx-screen { position: absolute; left: 0; top: 0; width: 1200px; height: 780px; transform-origin: 0 0; transform: scale(var(--s, 1)); font-family: var(--font-sans); }
.is-narrow .mx-screen { width: 760px; height: 1180px; }
.mx-bg { position: absolute; inset: 0; background: #fff; transition: background 1.2s var(--ease-out); }
.mx-bg::after { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s var(--ease-out); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'><path d='M28 1 L54 16 L54 48 L28 63 L2 48 L2 16 Z M28 49 L54 64 L54 96 L28 111 L2 96 L2 64 Z' fill='none' stroke='%230A5BF0' stroke-opacity='.22' stroke-width='1'/></svg>"); background-size: 56px 97px; -webkit-mask: radial-gradient(80% 80% at 50% 45%, #000 30%, transparent 100%); mask: radial-gradient(80% 80% at 50% 45%, #000 30%, transparent 100%); }
.mx-stage.is-build .mx-bg { background: linear-gradient(135deg, #EEF4FF 0%, #F6F2FF 48%, #FFF3EC 100%); } .mx-stage.is-build .mx-bg::after { opacity: .55; }
.mx-lms { position: absolute; left: 90px; top: 60px; width: 1020px; height: 600px; border-radius: 12px; overflow: hidden; background: #fff; border: 1px solid var(--border); color: #2d3b45; transition: left 1.3s cubic-bezier(.65,0,.35,1), top 1.3s cubic-bezier(.65,0,.35,1), width 1.3s cubic-bezier(.65,0,.35,1), height 1.3s cubic-bezier(.65,0,.35,1), box-shadow .8s; z-index: 3; }
.mx-lms-chrome { display: flex; align-items: center; gap: 12px; height: 54px; padding: 0 16px; background: #394B58; color: #fff; }
.mx-lms-logo { width: 32px; height: 32px; border-radius: 8px; background: #fff; display: grid; place-items: center; color: #394B58; } .mx-lms-logo svg { width: 18px; height: 18px; }
.mx-lms-crumb { font-size: 14px; color: #e6e9ee; } .mx-lms-tag { margin-left: auto; font-style: normal; font-size: 11.5px; font-weight: 700; padding: 4px 9px; border-radius: 6px; background: rgba(255,255,255,.14); color: #fff; transition: background .4s; }
.mx-stage.is-build .mx-lms-tag { background: var(--success); }
.mx-lms-body { position: absolute; left: 0; right: 0; top: 54px; bottom: 0; display: grid; grid-template-columns: 180px minmax(0, 1fr); }
.mx-lms-nav { margin: 0; padding: 16px 0 0 22px; list-style: none; border-right: 1px solid #e3e6ea; } .mx-lms-nav li { padding: 9px 0; font-size: 15px; color: #4b5563; } .mx-lms-nav li.is-cur { color: #2d3b45; font-weight: 600; }
.mx-lms-main { padding: 22px 26px; display: grid; gap: 14px; align-content: start; }
.mx-lms-mod { border: 1px solid #d7dbe0; border-radius: 4px; } .mx-lms-mod b { display: block; padding: 12px 16px; background: #f5f6f7; font-size: 15px; color: #2d3b45; border-bottom: 1px solid #d7dbe0; } .mx-lms-mod div { padding: 11px 16px; font-size: 14px; color: #4b5563; border-bottom: 1px solid #e3e6ea; } .mx-lms-mod div:last-child { border-bottom: 0; }
.mx-lms-rooms { position: absolute; left: 26px; right: 26px; bottom: 22px; display: flex; flex-wrap: wrap; gap: 8px; opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease-out), transform .55s var(--ease-out); }
.mx-lms-rooms span { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 999px; background: #FFF4F2; border: 1px solid #F4C7C0; color: #9A3B3B; font-size: 12.5px; font-weight: 600; } .mx-lms-rooms svg { width: 13px; height: 13px; }
.mx-stage.is-rooms .mx-lms-rooms { opacity: 1; transform: none; } .mx-stage.is-build .mx-lms-rooms { opacity: 0; }
.mx-stage.is-build .mx-lms { left: 40px; top: 580px; width: 300px; height: 160px; box-shadow: 0 24px 60px -30px rgba(7,16,51,.35); }
.mx-stage.is-build .mx-lms-main { display: none; } .mx-stage.is-build .mx-lms-body { grid-template-columns: 1fr; align-content: start; } .mx-stage.is-build .mx-lms-nav { display: flex; gap: 8px; flex-wrap: wrap; padding: 10px 12px 0; border: 0; }
.mx-lms-feed { display: none; padding: 8px 12px 10px; font-size: 11px; color: var(--fg2); } .mx-lms-feed span { display: inline-flex; align-items: center; gap: 6px; } .mx-lms-feed i { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px rgba(19,138,91,.18); animation: mxPulse 1.6s ease-in-out infinite; }
.mx-stage.is-build .mx-lms-feed { display: block; } @keyframes mxPulse { 50% { box-shadow: 0 0 0 6px rgba(19,138,91,.06); } }
.mx-stage.is-build .mx-lms { height: 150px; top: 590px; }
.mx-stage.is-build .mx-lms-nav li { font-size: 11px; padding: 4px 0; } .mx-stage.is-build .mx-lms-crumb { font-size: 11px; } .mx-stage.is-build .mx-lms-chrome { height: 40px; padding: 0 10px; } .mx-stage.is-build .mx-lms-logo { width: 24px; height: 24px; } .mx-stage.is-build .mx-lms-logo svg { width: 13px; height: 13px; } .mx-stage.is-build .mx-lms-body { top: 40px; }
.mx-stage.is-portal .mx-lms { left: 40px; top: 590px; width: 300px; height: 150px; }
.mx-link { position: absolute; left: 340px; top: 664px; width: 40px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, rgba(19,138,91,.5), rgba(10,91,240,.5)); opacity: 0; transition: opacity .6s var(--ease-out); z-index: 2; } .mx-stage.is-build .mx-link { opacity: 1; }
.mx-build { position: absolute; left: 40px; top: 40px; width: 300px; padding: 16px; border-radius: 16px; background: #fff; border: 1px solid var(--border); box-shadow: 0 30px 70px -34px rgba(10,91,240,.4); opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease-out), transform .7s var(--ease-out), top 1s cubic-bezier(.65,0,.35,1), height 1s; z-index: 4; }
.mx-build::before { content: ""; position: absolute; inset: -1px; border-radius: 17px; padding: 1.5px; background: linear-gradient(135deg, #0A84FF, #7C3AED 55%, #FF9A76); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.mx-stage.is-build .mx-build { opacity: 1; transform: none; }
.mx-build-k { display: block; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: linear-gradient(90deg, #0A5BF0, #7C3AED); -webkit-background-clip: text; background-clip: text; color: transparent; } .mx-build-h b { display: block; margin-top: 4px; font-size: 15.5px; font-weight: 500; letter-spacing: -.015em; color: var(--ink); }
.mx-build-steps { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 2px; }
.mx-build-steps li { display: grid; grid-template-columns: 30px minmax(0, 1fr) 18px; gap: 10px; align-items: center; padding: 6px 6px; border-radius: 9px; transition: background .35s; } .mx-build-steps li > div { min-width: 0; }
.mx-build-steps i { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--ks-blue-50); color: var(--ks-blue); transition: background .35s, color .35s; } .mx-build-steps i svg { width: 14px; height: 14px; }
.mx-build-steps b { display: block; font-size: 12.5px; color: var(--ink); } .mx-build-steps small { display: block; font-size: 10.5px; color: var(--fg3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-build-steps em { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--border-strong); position: relative; transition: all .3s; } .mx-build-steps em::after { content: ""; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform .3s var(--ease-out); }
.mx-build-steps li.is-on { background: var(--ks-blue-50); } .mx-build-steps li.is-on i { background: var(--ks-blue-100); color: var(--ks-blue); } .mx-build-steps li.is-on em { border-color: var(--ks-blue); }
.mx-build-steps li.is-done i { background: var(--success-bg); color: var(--success); } .mx-build-steps li.is-done em { background: var(--success); border-color: var(--success); } .mx-build-steps li.is-done em::after { transform: rotate(45deg) scale(1); }
.mx-build-foot { display: flex; align-items: center; gap: 7px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 11px; color: var(--fg3); } .mx-build-foot svg { width: 13px; height: 13px; }
.mx-portal { position: absolute; left: 380px; top: 40px; width: 780px; height: 700px; border-radius: 16px; overflow: hidden; background: #F7F9FF; border: 1px solid var(--border); box-shadow: 0 30px 70px -36px rgba(7,16,51,.35); opacity: 0; transform: translateY(18px) scale(.985); transition: opacity .7s var(--ease-out), transform .8s var(--ease-out); z-index: 4; }
.mx-stage.is-build .mx-portal { opacity: 1; transform: none; }
.mx-p-top { position: absolute; left: 0; right: 0; top: 0; height: 60px; display: flex; align-items: center; gap: 20px; padding: 0 20px; background: #fff; border-bottom: 1px solid var(--border); }
.mx-p-brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; color: var(--ink); white-space: nowrap; } .mx-p-brand i { width: 22px; height: 22px; border-radius: 6px; background: var(--ks-blue-100); }
.mx-p-nav { display: flex; gap: 4px; opacity: 0; transform: translateY(-6px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); } .mx-stage.is-s0 .mx-p-nav { opacity: 1; transform: none; }
.mx-p-nav a { padding: 7px 11px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--fg2); white-space: nowrap; } .mx-p-nav a.is-cur { background: var(--ks-blue-50); color: var(--ks-blue); }
.mx-p-id { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: var(--success-bg); color: var(--success); font-size: 11.5px; font-weight: 700; white-space: nowrap; opacity: 0; transform: scale(.9); transition: opacity .4s, transform .45s var(--ease-out); } .mx-p-id svg { width: 13px; height: 13px; } .mx-stage.is-s1 .mx-p-id { opacity: 1; transform: none; }
.mx-p-user { width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 700; }
.mx-p-grid { position: absolute; left: 20px; right: 230px; top: 80px; bottom: 60px; display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 14px; }
.mx-p-w { overflow: hidden; min-height: 0; }
.mx-p-w { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; opacity: 0; transform: translateY(14px); transition: opacity .55s var(--ease-out), transform .6s var(--ease-out); }
.mx-p-w.is-on { opacity: 1; transform: none; }
.mx-p-courses { grid-column: 1; grid-row: 1; } .mx-p-crm { grid-column: 2; grid-row: 1; } .mx-p-support { grid-column: 1; grid-row: 2; } .mx-p-cert { grid-column: 1 / -1; grid-row: 3; } .mx-p-admin { grid-column: 2; grid-row: 2; }
.mx-p-wh { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; } .mx-p-wh b { font-size: 13.5px; color: var(--ink); } .mx-p-wh span { font-size: 11px; color: var(--fg3); }
.mx-p-course { display: grid; grid-template-columns: 10px minmax(0, 1fr) 36px; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--slate-100); } .mx-p-course:first-of-type { border-top: 0; }
.mx-p-ci { width: 10px; height: 10px; border-radius: 50%; background: var(--c); } .mx-p-course b { display: block; font-size: 12.5px; color: var(--ink); } .mx-p-course i { display: block; height: 5px; border-radius: 3px; background: var(--slate-150); margin-top: 6px; overflow: hidden; } .mx-p-course em { display: block; height: 100%; width: var(--w); background: linear-gradient(90deg, #0A5BF0, #7C3AED); transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease-out) .2s; } .mx-p-w.is-on .mx-p-course em { transform: scaleX(1); } .mx-p-course small { font-size: 11px; font-weight: 600; color: var(--fg2); text-align: right; }
.mx-p-kv { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid var(--slate-100); font-size: 12px; } .mx-p-kv span { color: var(--fg3); } .mx-p-kv b { color: var(--ink); font-weight: 600; } .mx-p-kv b.is-ok { color: var(--success); }
.mx-p-sync { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 11px; color: var(--fg3); } .mx-p-sync i { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px rgba(19,138,91,.18); }
.mx-p-row { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 7px 0; border-top: 1px solid var(--slate-100); font-size: 12px; } .mx-p-row svg { width: 14px; height: 14px; color: var(--ks-blue); } .mx-p-row b { color: var(--ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mx-p-row em { font-style: normal; font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: var(--ks-blue-50); color: var(--ks-blue); }
.mx-p-certcard { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 10px; background: linear-gradient(135deg, #EEF4FF, #FFF3EC); border: 1px solid var(--border); } .mx-p-certico { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--ks-blue-50); color: var(--ks-blue); } .mx-p-certico svg { width: 18px; height: 18px; } .mx-p-certcard b { display: block; font-size: 12.5px; color: var(--ink); } .mx-p-certcard small { display: block; font-size: 10.5px; color: var(--fg3); } .mx-p-certcard em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--fg3); transition: color .3s; } .mx-p-certcard em.is-ok { color: var(--success); }
.mx-p-tog { display: flex; align-items: center; gap: 9px; padding: 6px 0; border-top: 1px solid var(--slate-100); font-size: 12px; color: var(--ink); } .mx-p-tog i { width: 28px; height: 16px; border-radius: 8px; background: var(--slate-200); position: relative; transition: background .4s; } .mx-p-tog i::after { content: ""; position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: left .4s var(--ease-out); } .mx-p-w.is-on .mx-p-tog i { background: var(--ks-blue); } .mx-p-w.is-on .mx-p-tog i::after { left: 14px; } .mx-p-tog em { margin-left: auto; font-style: normal; font-size: 11px; color: var(--fg3); }
.mx-phone { position: absolute; right: 22px; top: 80px; width: 186px; height: 400px; border-radius: 26px; background: var(--ink); padding: 9px; box-shadow: 0 30px 60px -28px rgba(7,16,51,.5), inset 0 0 0 1px rgba(255,255,255,.08); opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease-out), transform .9s var(--ease-out); }
.mx-phone::before { content: ""; position: absolute; left: 50%; top: 9px; width: 60px; height: 14px; transform: translateX(-50%); border-radius: 0 0 10px 10px; background: var(--ink); z-index: 2; }
.mx-stage.is-s5 .mx-phone { opacity: 1; transform: none; }
.mx-phone-in { position: absolute; inset: 9px; border-radius: 18px; background: #F7F9FF; overflow: hidden; padding: 22px 9px 42px; display: grid; gap: 6px; align-content: start; }
.mx-ph-av { margin-left: auto; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 8px; display: grid; place-items: center; }
.mx-ph-hi { font-size: 11.5px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.mx-ph-k { display: block; font-size: 8.5px; font-weight: 700; color: var(--ks-blue); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 3px; }
.mx-ph-cta { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; } .mx-ph-cta span { font-size: 9.5px; font-weight: 700; color: var(--fg2); } .mx-ph-cta em { font-style: normal; font-size: 9.5px; font-weight: 700; padding: 4px 8px; border-radius: 6px; background: var(--ks-blue); color: #fff; }
.mx-ph-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px; } .mx-ph-stats div { padding: 7px 6px; border-radius: 8px; background: #fff; border: 1px solid var(--border); text-align: center; } .mx-ph-stats b { display: block; font-size: 13px; letter-spacing: -.02em; background: linear-gradient(90deg, #0A5BF0, #7C3AED); -webkit-background-clip: text; background-clip: text; color: transparent; } .mx-ph-stats small { display: block; font-size: 8px; color: var(--fg3); }
.mx-ph-tabs { position: absolute; left: 0; right: 0; bottom: 0; height: 40px; display: grid; grid-template-columns: repeat(4, 1fr); background: #fff; border-top: 1px solid var(--border); } .mx-ph-tabs a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 7.5px; font-weight: 600; color: var(--fg3); } .mx-ph-tabs a svg { width: 12px; height: 12px; } .mx-ph-tabs a.is-cur { color: var(--ks-blue); }
.mx-phone-cap { position: absolute; right: 22px; top: 490px; width: 186px; text-align: center; font-size: 11px; font-weight: 600; color: var(--fg3); opacity: 0; transition: opacity .6s var(--ease-out) .3s; } .mx-stage.is-s5 .mx-phone-cap { opacity: 1; }
.mx-ph-top { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--ink); padding-bottom: 8px; border-bottom: 1px solid var(--border); } .mx-ph-top i { width: 14px; height: 14px; border-radius: 4px; background: var(--ks-blue-100); }
.mx-ph-card { padding: 8px 9px; border-radius: 10px; background: #fff; border: 1px solid var(--border); } .mx-ph-card b { display: block; font-size: 10.5px; line-height: 1.3; color: var(--ink); } .mx-ph-card i { display: block; height: 4px; border-radius: 2px; background: var(--slate-150); margin-top: 6px; overflow: hidden; } .mx-ph-card em { display: block; height: 100%; width: var(--w); background: linear-gradient(90deg, #0A5BF0, #7C3AED); } 
.mx-ph-row { display: grid; grid-template-columns: 11px minmax(0, 1fr) auto; align-items: center; gap: 6px; padding: 7px 9px; border-radius: 8px; background: #fff; border: 1px solid var(--border); font-size: 9.5px; color: var(--ink); } .mx-ph-row span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mx-ph-row em { font-style: normal; font-size: 8px; font-weight: 700; color: var(--success); } .mx-ph-row svg { width: 11px; height: 11px; color: var(--ks-blue); }
.mx-engine { position: absolute; left: 20px; bottom: 14px; z-index: 3; max-width: calc(100% - 40px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; border-radius: 999px; background: #fff; border: 1px solid rgba(19,138,91,.4); font-size: 12px; color: var(--fg2); opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease-out), transform .55s var(--ease-out); } .mx-engine svg { width: 13px; height: 13px; color: var(--success); } .mx-engine b { color: var(--ink); }
.mx-stage.is-fin .mx-engine { opacity: 1; transform: none; }
.mx-pin { position: absolute; z-index: 6; display: inline-flex; align-items: center; gap: 8px; max-width: 380px; padding: 9px 13px 9px 9px; border-radius: 10px; background: #1f2937; color: #fff; font-size: 13px; font-weight: 600; line-height: 1.3; opacity: 0; transform: translateY(8px); transition: opacity .45s var(--ease-out), transform .5s var(--ease-out); }
.mx-pin i { width: 22px; height: 22px; flex: none; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11px; background: #fff; color: #1f2937; } .mx-pin.is-on { opacity: 1; transform: none; }
.mx-pin--a { left: 320px; top: 118px; } .mx-pin--b { left: 560px; top: 420px; }
.mx-cursor { position: absolute; z-index: 20; left: 600px; top: 400px; width: 22px; height: 22px; opacity: 0; transition: left .9s cubic-bezier(.65,0,.35,1), top .9s cubic-bezier(.65,0,.35,1), opacity .3s, transform .15s; pointer-events: none; } .mx-cursor.is-show { opacity: 1; } .mx-cursor.is-click { transform: scale(.82); }
.mx-caption { margin: 14px 0 0; font-size: 15.5px; line-height: 1.5; color: var(--fg2); min-height: 24px; transition: opacity .3s; } .mx-caption.is-swap { opacity: 0; }
.mx-stage.no-anim, .mx-stage.no-anim *, .mx-stage.no-anim *::after, .mx-stage.no-anim *::before { transition: none !important; animation: none !important; }
.is-narrow .mx-lms { left: 20px; top: 20px; width: 720px; height: 520px; }
.is-narrow .mx-lms-rooms { left: 16px; right: 16px; bottom: 14px; }
.is-narrow .mx-pin--a { left: 60px; top: 90px; max-width: 320px; } .is-narrow .mx-pin--b { left: 60px; top: 330px; max-width: 320px; }
.mx-stage.is-build .is-narrow .mx-lms, .mx-stage.is-portal .is-narrow .mx-lms { left: 20px; top: 20px; width: 340px; height: 150px; }
.is-narrow .mx-build { left: 380px; top: 20px; width: 360px; } .is-narrow .mx-build-steps { gap: 0; } .is-narrow .mx-build-steps li { padding: 4px 6px; }
.is-narrow .mx-portal { left: 20px; top: 430px; width: 720px; height: 730px; }
.is-narrow .mx-p-grid { right: 20px; grid-template-columns: 1fr 1fr; } .is-narrow .mx-p-courses { grid-row: 1; grid-column: 1 / -1; } .is-narrow .mx-p-crm { grid-column: 1; grid-row: 2; } .is-narrow .mx-p-support { grid-column: 2; grid-row: 2; } .is-narrow .mx-p-cert { grid-column: 1; grid-row: 3; } .is-narrow .mx-p-admin { grid-column: 2; grid-row: 3; } .is-narrow .mx-phone-cap, .is-narrow .mx-link { display: none; }
.is-narrow .mx-phone { display: none; } .is-narrow .mx-p-nav { display: none; }
@media (prefers-reduced-motion: reduce) { .mx-stage *, .mx-stage *::after { transition: none !important; animation: none !important; } }