/* Css for , Version=1791017563 */
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@600;700;800&family=Poppins:wght@500;600;700&display=swap');:root{--primary:#2265f0;--primary-strong:#145bcc;--brand:#635bff;--primary-rgb:34, 101, 240;--brand-rgb:99, 91, 255;--primary-soft:#eef5ff;--primary-soft-2:#f7fbff;--primary-soft-3:#eef3f9;--primary-border:#dce7f4;--primary-border-soft:#e1ebf7;--primary-line:#e6edf6;--primary-chip:#7fb4f1;--primary-fill-soft:#d9e6f4;--primary-fill-soft-2:#d8e8fb;--primary-fill-soft-3:#d8e6f6;--primary-fill-soft-4:#c6dcf6;--primary-fill-soft-5:#a7cfff;--primary-fill-soft-6:#8ac1ff;--primary-fill-soft-7:#86bfff;--primary-fill-soft-8:#58a3ff;--primary-fill-soft-9:#d2e6ff;--primary-fill-muted:#f4f7fb;--primary-fill-muted-2:#f2f6fb;--primary-fill-muted-3:#f0f5fb;--primary-fill-muted-4:#eaf2fb;--assist:#ebf2f9;--title:#0c2243;--text:#39485d;--text-soft:#5a6d88;--text-subtle:#79818d;--line:#ddd;--line-soft:#e5e5e5;--bg:#f8fafd;--bg-section:#f1f1f1;--bg-soft:#f7f7f7;--panel:#fff;--panel-blue:#f1f1f1;--dark:#0c2243;--dark-2:#39485d;--dark-3:#5a6d88;--white:#fff;--shadow-xs:0 1px 1px rgba(0,0,0,0.05);--shadow-sm:0 4px 12px rgba(15,23,42,0.08);--shadow-md:0 18px 44px rgba(21,41,84,0.1);--shadow-lg:0 6px 12px rgba(0,0,0,0.175);--radius-sm:6px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px;--container:1170px;--font-sans:"Inter", "Segoe UI", Arial, sans-serif;--font-heading:"Poppins", "Inter", "Segoe UI", Arial, sans-serif;--font-display:"Plus Jakarta Sans", "Poppins", "Inter", "Segoe UI", Arial, sans-serif;}*{box-sizing:border-box;}html{scroll-behavior:smooth;}body{margin:0;font-family:var(--font-sans);color:var(--text);background:var(--bg);line-height:1.57;}a{color:inherit;text-decoration:none;}a:hover{text-decoration:none;}img{display:block;max-width:100%;}.flex{display:flex;}.row{margin:0;}.row > [class*='col-'],.row > .col{padding:0;}.container,.width-wrapper{width:min(var(--container),100%);margin:0 auto;max-width:unset;}.page-container{overflow:unset;}.page-wrapper{padding-top:0;}.page-content{max-width:unset;padding:0;}#siteLogo > a{min-height:unset;}.header-wrapper{position:sticky;top:0;z-index:40;backdrop-filter:blur(16px);background:rgba(248,249,253,0.88);}#headTitle{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:64px;}.logo{height:36px;width:auto;}#navbar{background:transparent;}.nav{display:flex;align-items:center;gap:24px;font-size:16px;font-weight:400;color:var(--text);}.nav a{display:inline-flex;align-items:center;min-height:40px;padding:0 20px;border-radius:9999px !important;transition:color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;}.nav .dropdown-menu a{border-radius:0 !important;}.nav a:hover,.nav a:focus,.nav a:focus-visible{outline:none;color:var(--primary) !important;background:rgba(34,101,240,0.08) !important;}.nav a.is-active{color:var(--primary);background:rgba(34,101,240,0.1);box-shadow:inset 0 0 0 1px rgba(34,101,240,0.16);font-weight:600;}.nav-actions{display:flex;align-items:center;gap:12px;}.lang{margin-left:12px;}.lang a{display:inline-flex;align-items:center;justify-content:center;min-height:24px;padding:0;color:var(--text-soft);font-size:13px;font-weight:500;transition:color 0.2s ease;}.lang a:hover{color:var(--primary);}.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 24px;border-radius:9999px;border:1px solid transparent;font-size:16px;transition:transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;cursor:pointer;white-space:nowrap;}.button:hover{transform:translateY(-1px);}.button:focus-visible,.nav a:focus-visible,.lang-switch a:focus-visible,.field input:focus-visible,.field select:focus-visible,.footer-links a:focus-visible{outline:0;box-shadow:0 0 0 3px rgba(34,101,240,0.18);}.button-primary{color:var(--white);background:linear-gradient(135deg,var(--primary) 0%,var(--brand) 100%);box-shadow:none;}.button-primary:visited{color:var(--white);}.button-primary:hover{box-shadow:var(--shadow-sm);color:var(--white);}.button-secondary{color:var(--primary);background:rgba(255,255,255,0.88);border-color:rgba(34,101,240,0.16);}.button-secondary:hover{background:#fff;}.nav-actions .button{height:40px;padding:0 16px;border-radius:9999px;font-size:14px;font-weight:400;}#rightDocker{display:none;}#footer{color:var(--text-soft);background:transparent;border-top:1px solid var(--line);}#footer > .wrapper{padding:20px 0;max-width:min(var(--container),100%);display:flex;justify-content:space-between;}.site-footer{padding-top:28px;border-top:1px solid var(--line);}.footer-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:80px;padding:40px 0 28px;}.footer-grid:before,.footer-grid:after{display:none;}.footer-brand img{height:34px;width:auto;}.footer-brand p,.footer-col p{margin:16px 0 0;color:var(--text);font-size:14px;line-height:1.78;}.footer-col h4{margin:0;color:var(--title);font-size:15px;line-height:1.5;font-weight:600;}.footer-links{display:grid;gap:10px;margin-top:14px;font-size:14px;color:var(--text);}.footer-links a:hover{color:var(--primary);}.footer-col.is-center{justify-self:center;text-align:left;}@media (max-width: 1110px){.hero-grid,.cta-content,.footer-grid,.capability-row,.capability-row:nth-child(even){grid-template-columns:1fr;}.footer-col.is-center{justify-self:stretch;text-align:left;}}@media (max-width: 860px){.nav-shell{flex-wrap:wrap;justify-content:center;gap:12px;padding:14px 0;}.brand{width:100%;display:flex;justify-content:center;}.nav{width:100%;justify-content:center;flex-wrap:wrap;gap:10px;}.nav a{min-height:38px;padding:0 16px;border:1px solid var(--line-soft);background:rgba(255,255,255,0.82);box-shadow:var(--shadow-xs);}.nav-actions{width:100%;justify-content:center;}}@media (max-width: 640px){.container{width:min(var(--container),100%);padding-left:16px;padding-right:16px;}.nav{gap:8px;}#navbar .nav > li > a{min-height:36px;padding:0 14px;font-size:13px;box-shadow:none;padding:10px 20px;}#navbar .nav > li{width:100%;}#headTitle img{height:auto;width:120px;min-width:unset;}#navbar .navbar-header{position:static;}#headTitle.with-navbar #navbar .navbar-collapse{position:absolute;background:#fff;}.custom-middle-right{padding-right:12px;margin-left:-12px;}.custom-middle-right .button{padding:0 12px;}}.m-index-index .focus-top{margin-bottom:0;}.m-index-index .all-bottom{width:100%;}#block4{}#block4 .panel-heading{}
                    .ui-title{font:600 16px "Source Han Sans SC","Noto Sans SC","Microsoft YaHei",sans-serif; fill:#2F3747}
                    .ui-small{font:500 14px "Source Han Sans SC","Noto Sans SC","Microsoft YaHei",sans-serif; fill:#7E8FA8}
                    .ui-value{font:500 16px "Source Han Sans SC","Noto Sans SC","Microsoft YaHei",sans-serif; fill:#2F3747}
                    .ui-light{font:600 16px "Source Han Sans SC","Noto Sans SC","Microsoft YaHei",sans-serif; fill:#FFFFFF}
                    .ui-accent{font:600 16px "Source Han Sans SC","Noto Sans SC","Microsoft YaHei",sans-serif; fill:var(--primary)}
                  
                    .ui-title{font:400 16px "Source Han Sans SC","Noto Sans SC","Microsoft YaHei",sans-serif; fill:#2F3747}
                    .ui-small{font:500 16px "Source Han Sans SC","Noto Sans SC","Microsoft YaHei",sans-serif; fill:#2F3747}
                    .ui-value{font:500 16px "Source Han Sans SC","Noto Sans SC","Microsoft YaHei",sans-serif; fill:#2F3747}
                    .ui-light{font:500 16px "Source Han Sans SC","Noto Sans SC","Microsoft YaHei",sans-serif; fill:#FFFFFF}
                    .ui-accent{font:500 16px "Source Han Sans SC","Noto Sans SC","Microsoft YaHei",sans-serif; fill:var(--primary)}
                  
                    .ui-title{font:400 16px "Source Han Sans SC","Noto Sans SC","Microsoft YaHei",sans-serif; fill:#2F3747}
                    .ui-small{font:400 16px "Source Han Sans SC","Noto Sans SC","Microsoft YaHei",sans-serif; fill:#2F3747}
                    .ui-value{font:400 16px "Source Han Sans SC","Noto Sans SC","Microsoft YaHei",sans-serif; fill:#2F3747}
                    .ui-light{font:400 16px "Source Han Sans SC","Noto Sans SC","Microsoft YaHei",sans-serif; fill:#FFFFFF}
                    .ui-accent{font:400 16px "Source Han Sans SC","Noto Sans SC","Microsoft YaHei",sans-serif; fill:var(--primary)}
                    .ui-muted{font:400 14px "Source Han Sans SC","Noto Sans SC","Microsoft YaHei",sans-serif; fill:#7E8FA8}
                  
                    .ui-title{font:400 16px "Source Han Sans SC","Noto Sans SC","Microsoft YaHei",sans-serif; fill:#2F3747}
                    .ui-small{font:400 14px "Source Han Sans SC","Noto Sans SC","Microsoft YaHei",sans-serif; fill:#7E8FA8}
                    .ui-value{font:400 16px "Source Han Sans SC","Noto Sans SC","Microsoft YaHei",sans-serif; fill:#2F3747}
                    .ui-light{font:400 16px "Source Han Sans SC","Noto Sans SC","Microsoft YaHei",sans-serif; fill:#FFFFFF}
                    .ui-accent{font:400 16px "Source Han Sans SC","Noto Sans SC","Microsoft YaHei",sans-serif; fill:var(--primary)}
                    .ui-muted{font:400 14px "Source Han Sans SC","Noto Sans SC","Microsoft YaHei",sans-serif; fill:#9AAAC0}
                  
                    .ui-title{font:400 16px "Source Han Sans SC","Noto Sans SC","Microsoft YaHei",sans-serif; fill:#2F3747}
                    .ui-small{font:400 14px "Source Han Sans SC","Noto Sans SC","Microsoft YaHei",sans-serif; fill:#7E8FA8}
                    .ui-value{font:400 16px "Source Han Sans SC","Noto Sans SC","Microsoft YaHei",sans-serif; fill:#2F3747}
                    .ui-light{font:400 16px "Source Han Sans SC","Noto Sans SC","Microsoft YaHei",sans-serif; fill:#FFFFFF}
                    .ui-accent{font:400 16px "Source Han Sans SC","Noto Sans SC","Microsoft YaHei",sans-serif; fill:var(--primary)}
                    .ui-muted{font:400 14px "Source Han Sans SC","Noto Sans SC","Microsoft YaHei",sans-serif; fill:#9AAAC0}
                  #block1{}#block1 .panel-heading{}.hero {
      position: relative;
      padding: 96px 0 104px;
      overflow: hidden;
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: 0 0 auto;
      height: min(88vh, 1060px);
      background:
        radial-gradient(circle at 50% 14%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0) 36%),
        radial-gradient(circle at 58% 18%, rgba(34, 101, 240, 0.16), rgba(34, 101, 240, 0) 28%),
        radial-gradient(circle at 17% 12%, rgba(255, 192, 92, 0.18), rgba(255, 192, 92, 0) 24%),
        radial-gradient(circle at 84% 10%, rgba(34, 101, 240, 0.18), rgba(34, 101, 240, 0) 26%),
        linear-gradient(135deg, rgba(34, 101, 240, 0.10) 0%, rgba(99, 91, 255, 0.08) 42%, rgba(247, 248, 252, 0) 100%),
        linear-gradient(180deg, rgba(232, 242, 255, 0.86) 0%, rgba(247, 248, 252, 0) 100%);
      pointer-events: none;
    }

    .hero::after {
      content: "";
      position: absolute;
      inset: auto -80px 12% auto;
      width: 300px;
      height: 300px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(34, 101, 240, 0.14), rgba(34, 101, 240, 0) 68%);
      filter: blur(4px);
      pointer-events: none;
    }

    .hero-grid {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 0;
      justify-items: center;
    }

    .hero-copy-block {
      display: grid;
      justify-items: center;
      text-align: center;
      width: 100%;
      max-width: 1200px;
      video {
        width: 880px;
        border-radius: 6px;
        margin-top: 40px;
      }
    }

    .hero-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 18px;
      padding: 8px 14px;
      border-radius: 999px;
      border: 1px solid rgba(209, 222, 236, 0.92);
      background: rgba(255, 255, 255, 0.86);
      color: var(--primary);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      box-shadow: var(--shadow-xs);
    }

    .hero-kicker::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--primary) 0%, var(--brand) 100%);
      box-shadow: 0 0 0 5px rgba(99, 91, 255, 0.12);
    }

    .hero h1 {
      margin: 0;
      max-width: 1200px;
      color: var(--title);
      font-family: var(--font-display);
      font-size: 46px;
      line-height: 60px;
      font-weight: 700;
      letter-spacing: -0.02em;
    }

    .hero-copy {
      max-width: 1200px;
      margin: 20px 0 0;
      font-size: 20px;
      line-height: 1.5;
      font-weight: 500;
      color: var(--text);
    }

    .hero-actions {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 28px;
    }

    .hero-actions .button {
      height: 52px;
      min-width: 184px;
      padding: 0 24px;
      font-weight: 400;
    }

    .hero-actions .button-primary {
      height: 52px;
    }

    .hero-actions .button-secondary {
      border-radius: 9999px;
    }

    .hero-footnote {
      max-width: 640px;
      margin-top: 20px;
      color: var(--text-soft);
      font-size: 14px;
      line-height: 1.6;
      text-align: center;
    }

    .hero-preview {
      width: min(1080px, 100%);
    }

    .hero-side {
      width: min(1080px, 100%);
    }

    .hero-panel {
      position: relative;
      display: grid;
      align-content: start;
      gap: 18px;
      min-height: 420px;
      padding: 20px;
      border-radius: 16px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.99)),
        var(--panel);
      border: 1px solid rgba(225, 235, 246, 0.95);
      box-shadow: var(--shadow-md);
      overflow: hidden;
    }

    .hero-panel::before {
      content: "";
      position: absolute;
      inset: auto -50px -64px auto;
      width: 230px;
      height: 230px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(0, 122, 255, 0.16), rgba(99, 91, 255, 0));
      pointer-events: none;
    }

    .hero-preview-shell {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: minmax(220px, 0.78fr) minmax(0, 1.8fr) minmax(220px, 0.92fr);
      gap: 0;
      min-height: 380px;
      border-radius: 16px;
      overflow: hidden;
      background: linear-gradient(180deg, #f8fbff, #f1f6fd);
      border: 1px solid var(--line-soft);
    }

    .hero-panel-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }

    .hero-sidebar {
      padding: 18px 16px;
      background: linear-gradient(180deg, #20304c, #243755);
      color: rgba(255, 255, 255, 0.82);
      border-right: 1px solid rgba(255, 255, 255, 0.08);
    }

    .hero-sidebar-brand {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 18px;
      font-size: 13px;
      font-weight: 700;
      color: var(--white);
    }

    .hero-sidebar-brand::before {
      content: "";
      width: 12px;
      height: 12px;
      border-radius: 4px;
      background: linear-gradient(135deg, #60a9ff, #2f7fff);
      box-shadow: 0 0 0 4px rgba(96, 169, 255, 0.14);
    }

    .hero-sidebar nav {
      display: grid;
      gap: 8px;
    }

    .hero-sidebar a {
      display: flex;
      align-items: center;
      padding: 10px 12px;
      border-radius: 12px;
      font-size: 13px;
      font-weight: 600;
      color: inherit;
      background: rgba(255, 255, 255, 0.02);
    }

    .hero-sidebar a:first-child {
      background: linear-gradient(135deg, #267bff, #418cff);
      color: var(--white);
    }

    .hero-dashboard {
      padding: 18px 18px 16px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.96)),
        linear-gradient(180deg, #f8fbff, #eef5fd);
    }

    .hero-dashboard-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 14px;
    }

    .hero-dashboard-top strong {
      color: var(--title);
      font-family: var(--font-heading);
      font-size: 18px;
      font-weight: 600;
    }

    .hero-dashboard-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .hero-dashboard-tabs span {
      padding: 6px 10px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 700;
      color: #6a7d97;
      background: rgba(255, 255, 255, 0.72);
      border: 1px solid rgba(209, 222, 236, 0.85);
    }

    .hero-dashboard-body {
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(220px, 0.85fr);
      gap: 14px;
      height: calc(100% - 50px);
    }

    .hero-mainboard {
      display: grid;
      gap: 14px;
      align-content: start;
    }

    .hero-overview-card {
      display: grid;
      grid-template-columns: 170px minmax(0, 1fr);
      gap: 14px;
    }

    .hero-user-card,
    .hero-summary,
    .hero-task-card,
    .hero-sidecard {
      border-radius: 18px;
      background: rgba(255, 255, 255, 0.92);
      border: 1px solid rgba(225, 235, 246, 0.96);
      box-shadow: var(--shadow-xs);
    }

    .hero-user-card {
      padding: 16px;
      background: linear-gradient(180deg, #1f73ff, #185ed4);
      color: var(--white);
    }

    .hero-user-card small,
    .hero-sidecard small {
      display: block;
      margin-bottom: 8px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      opacity: 0.8;
    }

    .hero-user-card strong {
      display: block;
      font-family: var(--font-sans);
      font-size: 20px;
      line-height: 1.3;
      font-weight: 600;
    }

    .hero-user-card p {
      margin: 10px 0 0;
      font-size: 12px;
      line-height: 1.7;
      opacity: 0.86;
    }

    .hero-summary {
      padding: 16px;
    }

    .hero-summary-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
      margin-top: 14px;
    }

    .hero-summary-grid div {
      padding: 12px;
      border-radius: 14px;
      background: #f7faff;
    }

    .hero-summary-grid strong {
      display: block;
      color: var(--title);
      font-family: var(--font-heading);
      font-size: 24px;
      line-height: 1.1;
      font-weight: 600;
    }

    .hero-summary-grid span {
      display: block;
      margin-top: 6px;
      font-size: 12px;
      color: var(--text-soft);
    }

    .hero-task-card {
      padding: 14px;
    }

    .hero-task-row {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }

    .hero-chip {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      width: fit-content;
      padding: 8px 12px;
      border-radius: 999px;
      background: #eff6ff;
      border: 1px solid #dbe8f7;
      color: var(--primary);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      justify-self: start;
    }

    .hero-panel h3 {
      margin: 0;
      color: var(--title);
      font-family: var(--font-sans);
      font-size: 20px;
      line-height: 1.4;
      font-weight: 600;
    }

    .hero-panel p {
      margin: 10px 0 0;
      max-width: 100%;
      font-size: 14px;
      line-height: 1.75;
    }

    .mini-card {
      min-height: 116px;
      padding: 16px;
      border-radius: 16px;
      background: linear-gradient(180deg, #ffffff, #f7fbff);
      border: 1px solid var(--line);
    }

    .mini-card strong {
      display: block;
      margin-bottom: 8px;
      color: var(--title);
      font-family: var(--font-sans);
      font-size: 18px;
      line-height: 1.4;
      font-weight: 600;
    }

    .mini-card span {
      display: block;
      font-size: 14px;
      line-height: 1.7;
      color: var(--text);
    }

    .hero-insights {
      display: grid;
      gap: 14px;
      padding: 18px 16px;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(247, 251, 255, 0.92));
      border-left: 1px solid rgba(225, 235, 246, 0.9);
    }

    .hero-sidecard {
      padding: 16px;
    }

    .hero-sidecard ul {
      margin: 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 10px;
    }

    .hero-sidecard li {
      display: grid;
      gap: 4px;
      padding-bottom: 10px;
      border-bottom: 1px solid #eef4fb;
    }

    .hero-sidecard li:last-child {
      padding-bottom: 0;
      border-bottom: 0;
    }

    .hero-sidecard strong {
      color: var(--title);
      font-size: 13px;
      line-height: 1.5;
    }

    .hero-sidecard span {
      font-size: 12px;
      line-height: 1.6;
      color: var(--text-soft);
    }

    .hero-metric-list {
      display: grid;
      gap: 10px;
    }

    .hero-metric {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 12px 14px;
      border-radius: 14px;
      background: rgba(245, 249, 255, 0.96);
      border: 1px solid rgba(225, 235, 246, 0.96);
    }

    .hero-metric strong {
      color: var(--title);
      font-size: 13px;
      line-height: 1.5;
    }

    .hero-metric span {
      color: var(--text-soft);
      font-size: 12px;
      white-space: nowrap;
    }

    .section {
      padding: 96px 0;
    }

    .section-header {
      max-width: 900px;
      margin: 0 auto 48px;
      text-align: center;
    }

    .section-label {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 14px;
      color: var(--primary);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .section-label::before {
      content: "";
      width: 18px;
      height: 1px;
      background: rgba(34, 101, 240, 0.4);
    }

    .section-header h2 {
      margin: 0;
      color: var(--title);
      font-family: var(--font-heading);
      font-size: 30px;
      line-height: 1.33;
      font-weight: 700;
      letter-spacing: 0;
    }

    .section-header p {
      margin: 12px auto 0;
      font-size: 18px;
      line-height: 1.5;
      font-weight: 400;
      max-width: 1200px;
      color: var(--text);
    }

    #why-kodeflex {
      position: relative;
      overflow: hidden;
      background: #ffffff;
      padding: 0 0 64px;
    }

    #why-kodeflex::before {
      content: "";
      position: absolute;
      inset: 80px auto auto -120px;
      width: 260px;
      height: 260px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(34, 101, 240, 0.10), rgba(34, 101, 240, 0));
      pointer-events: none;
    }

    .comparison-block {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 24px;
      margin-top: 36px;
      padding: 40px 0 0;
    }

    .comparison-block h3 {
      margin: 0 0 32px;
      color: var(--title);
      font-family: var(--font-heading);
      font-size: 30px;
      line-height: 42px;
      font-weight: 700;
      text-align: center;
    }

    .comparison-title {
      padding: 0 4px;
    }

    .comparison-block + .comparison-block .comparison-title {
      margin-top: 40px;
    }

    .comparison-board {
      position: relative;
      display: grid;
      gap: 0;
      border-radius: 16px;
      overflow: visible;
      background: rgba(255, 255, 255, 0.94);
      border: 1px solid #e5e6eb;
      box-shadow: var(--shadow-xs);
    }

    .comparison-kodeflex-column {
      position: absolute;
      top: -24px;
      bottom: -24px;
      left: 33.3333%;
      width: 33.3333%;
      border-radius: 22px;
      background: linear-gradient(180deg, rgba(247, 251, 255, 0.98), rgba(238, 245, 255, 0.98));
      border: 1px solid rgba(34, 101, 240, 0.10);
      box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16);
      pointer-events: none;
      z-index: 0;
    }

    .comparison-header,
    .comparison-row {
      position: relative;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0;
      align-items: stretch;
      z-index: 1;
    }

    .comparison-header {
      border-bottom: 1px solid #dcdde0;
      border-radius: 22px 22px 0 0;
      overflow: hidden;
    }

    .comparison-header .comparison-col {
      min-height: 48px;
      padding: 16px 20px;
      font-size: 14px;
      line-height: 20px;
      font-weight: 700;
      letter-spacing: 0.02em;
    }

    .comparison-header .comparison-col-label {
      color: var(--title);
      display: flex;
      align-items: center;
      justify-content: flex-start;
      font-size: 14px;
      line-height: 20px;
      background: linear-gradient(180deg, #f9fbff 0%, #eef5ff 100%);
    }

    .comparison-header .comparison-col-kodeflex {
      color: #246bff;
      font-size: 22px;
      line-height: 1;
      background: transparent;
      border-left: 0;
      border-right: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      transform: translateY(-8px);
    }

    .comparison-header .comparison-col-rival {
      color: var(--title);
      background: linear-gradient(180deg, #f9fbff 0%, #eef5ff 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
    }

    .comparison-row {
      background: transparent;
      border-bottom: 1px solid #e5e6eb;
    }

    .comparison-row:last-child {
      border-bottom: 0;
      border-radius: 0 0 22px 22px;
      overflow: hidden;
    }

    .comparison-axis {
      display: flex;
      flex-direction: column;
      gap: 8px;
      justify-content: center;
      padding: 22px 24px;
      background: #fcfcff;
    }

    .comparison-axis strong {
      color: var(--title);
      font-size: 16px;
      line-height: 24px;
      font-weight: 700;
    }

    .comparison-axis span {
      color: var(--text-soft);
      font-size: 14px;
      line-height: 21px;
    }

    .comparison-cell {
      position: relative;
      min-height: 100%;
      padding: 22px 24px;
      font-size: 16px;
      line-height: 24px;
      color: var(--text);
    }

    .comparison-cell-kodeflex {
      background: transparent;
      border-left: 0;
      border-right: 0;
    }

    .comparison-cell-rival {
      background: #ffffff;
    }
#features {
      background:
        radial-gradient(circle at 12% 0%, rgba(255, 192, 92, 0.12), rgba(255, 192, 92, 0) 26%),
        radial-gradient(circle at 88% 18%, rgba(99, 91, 255, 0.10), rgba(99, 91, 255, 0) 24%),
        linear-gradient(180deg, #f6f7fd 0%, #eef3fb 100%);
    }

    .capability-stack {
      display: grid;
      gap: 40px;
    }

    .capability-row {
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
      gap: 48px;
      align-items: stretch;
      padding: 8px 0;
    }

    .capability-row:nth-child(even) {
      grid-template-columns: minmax(360px, 0.95fr) minmax(0, 1.05fr);
    }

    .capability-row:nth-child(even) .capability-visual {
      order: 1;
    }

    .capability-row:nth-child(even) .capability-copy {
      order: 2;
    }

    .capability-copy {
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: 300px;
      padding: 8px 0;
    }

    .tag {
      display: inline-flex;
      align-items: center;
      padding: 8px 12px;
      border-radius: 999px;
      border: 1px solid var(--line-soft);
      background: #f5f9ff;
      color: var(--primary);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .capability-copy h3 {
      margin: 12px 0;
      max-width: 960px;
      color: var(--title);
      font-family: var(--font-heading);
      font-size: 24px;
      line-height: 1.42;
      font-weight: 600;
    }

    .capability-copy p {
      margin: 0;
      max-width: 640px;
      font-size: 16px;
      line-height: 1.62;
      color: var(--text);
    }

    .capability-visual {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 300px;
      padding: 16px;
      border-radius: 16px;
      border: 1px solid var(--line-soft);
      background:
        radial-gradient(circle at top right, rgba(99, 91, 255, 0.08), transparent 26%),
        linear-gradient(180deg, #ffffff, #f5f8fc);
      box-shadow: var(--shadow-xs);
    }

    .capability-copy.deep h3 {
      color: var(--title);
    }

    .capability-visual.deep {
      background:
        radial-gradient(circle at top right, rgba(99, 91, 255, 0.10), transparent 26%),
        linear-gradient(180deg, #f9fcff, #f2f7fd);
      border-color: var(--line-soft);
    }

    .capability-diagram {
      width: 100%;
      max-width: 420px;
      height: auto;
    }

    .capability-screen-frame {
      width: 100%;
      border-radius: 16px;
      overflow: hidden;
      background: #ffffff;
      border: 1px solid var(--line-soft);
      box-shadow: var(--shadow-sm);
    }

    .capability-screen-frame svg {
      display: block;
      width: 100%;
      height: auto;
    }

    .cta-section {
      padding: 64px 0;
      background:
        radial-gradient(circle at 18% 50%, rgba(255, 192, 92, 0.10), rgba(255, 192, 92, 0) 24%),
        linear-gradient(180deg, #f3f7fc 0%, #f8faff 100%);
    }

    .cta-band {
      position: relative;
      overflow: hidden;
      width: min(1170px, calc(100% - 48px));
      margin: 0 auto;
      padding: 72px 48px;
      border-radius: 24px;
      background: linear-gradient(135deg, #ffffff 0%, #fbfcff 52%, #f4f8ff 100%);
      border: 1px solid var(--line-soft);
      box-shadow: var(--shadow-md);
    }

    .cta-band::before {
      content: "";
      position: absolute;
      inset: auto auto -120px -90px;
      width: 300px;
      height: 300px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(34, 101, 240, 0.12), rgba(34, 101, 240, 0));
      pointer-events: none;
    }

    .cta-band::after {
      content: "";
      position: absolute;
      inset: -140px -100px auto auto;
      width: 320px;
      height: 320px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(99, 91, 255, 0.18), rgba(99, 91, 255, 0));
      pointer-events: none;
    }

    .cta-content {
      position: relative;
      z-index: 1;
      display: grid;
      justify-items: center;
      text-align: center;
      gap: 24px;
    }

    .cta-copy {
      display: grid;
      justify-items: center;
    }

    .cta-copy > h2:not(.cta-title),
    .cta-copy > p:not(.cta-description) {
      display: none;
    }

    .cta-copy h2 {
      margin: 0;
      max-width: none;
      color: var(--title);
      font-family: var(--font-display);
      font-size: clamp(32px, 3.4vw, 40px);
      line-height: 1.2;
      font-weight: 700;
      letter-spacing: -0.02em;
      white-space: normal;
    }

    .cta-copy p {
      margin: 16px 0 0;
      max-width: 720px;
      color: var(--text);
      font-size: 18px;
      line-height: 1.56;
    }

    .cta-title {
      margin: 0;
      max-width: none;
      color: var(--title);
      font-family: var(--font-display);
      font-size: clamp(32px, 3.4vw, 40px);
      line-height: 1.2;
      font-weight: 700;
      letter-spacing: -0.02em;
      white-space: normal;
    }

    .cta-description {
      margin: 16px 0 0;
      max-width: 720px;
      color: var(--text);
      font-size: 18px;
      line-height: 1.56;
    }

    .cta-buttons {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      justify-content: center;
    }

    .cta-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      justify-content: center;
    }

    .cta-buttons .button {
      min-width: 176px;
      height: 48px;
      padding: 0 24px;
      border-radius: 999px;
      font-size: 16px;
      font-weight: 400;
    }

    .cta-buttons .button-primary {
      background: var(--primary);
      color: var(--white);
      box-shadow: none;
    }

    .cta-buttons .button-secondary {
      background: #ffffff;
      border-color: var(--line);
      color: var(--title);
    }
    @media (max-width: 1100px) {
      .hero-grid,
      .cta-content,
      .footer-grid,
      .capability-row,
      .capability-row:nth-child(even) {
        grid-template-columns: 1fr;
      }

      .footer-col.is-center {
        justify-self: stretch;
        text-align: left;
      }

      .comparison-row {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 20px;
      }

      .comparison-header {
        display: none;
      }

      .comparison-board {
        gap: 0;
        overflow: hidden;
      }

      .comparison-kodeflex-column {
        display: none;
      }

      .comparison-axis,
      .comparison-cell {
        padding: 0;
        background: transparent;
        border: 0;
      }

      .comparison-axis {
        padding-bottom: 4px;
      }

      .comparison-cell::before {
        display: block;
        margin-bottom: 8px;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .comparison-cell-kodeflex::before {
        content: "KodeFlex";
        color: var(--primary);
      }

      .comparison-cell-rival::before {
        content: attr(data-label);
        color: var(--text-soft);
      }

      .capability-row:nth-child(even) .capability-visual,
      .capability-row:nth-child(even) .capability-copy {
        order: initial;
      }

      .section {
        padding: 88px 0;
      }

      .hero-preview-shell,
      .hero-dashboard-body,
      .hero-overview-card {
        grid-template-columns: 1fr;
      }

      .hero-sidebar,
      .hero-insights {
        display: none;
      }

      .hero-panel {
        min-height: auto;
      }
    }

    @media (max-width: 860px) {
      .hero {
        padding: 72px 0 88px;
      }

      .hero h1 {
        font-size: 32px;
        line-height: 40px;
      }

      .hero-copy {
        font-size: 18px;
        line-height: 1.67;
      }

      .section {
        padding: 80px 0;
      }

      .section-header h2 {
        font-size: 24px;
        line-height: 1.5;
      }

      .cta-copy h2 {
        font-size: 32px;
        white-space: normal;
      }

      .cta-title {
        font-size: 32px;
        white-space: normal;
      }

      .capability-row {
        gap: 24px;
      }
    }

    @media (max-width: 640px) {

      .hero-actions .button {
        width: 100%;
        min-width: 0;
      }

      .hero h1 {
        font-size: 32px;
        line-height: 40px;
      }

      .hero-copy {
        font-size: 16px;
        line-height: 1.62;
      }

      .hero-panel,
      .comparison-row,
      .capability-copy,
      .capability-visual {
        padding: 20px;
      }

      .hero-panel-grid,
      .hero-summary-grid,
      .hero-task-row {
        grid-template-columns: 1fr;
      }

      .comparison-block h3 {
        font-size: 24px;
        line-height: 34px;
      }

      .comparison-axis strong {
        font-size: 17px;
        line-height: 26px;
      }

      .comparison-block {
        gap: 16px;
      }

      .comparison-board {
        border-radius: 16px;
      }

      .comparison-row {
        padding: 16px;
      }

      .comparison-cell {
        font-size: 14px;
        line-height: 22px;
      }

      .hero-dashboard {
        padding: 0;
        background: transparent;
      }

      .hero-preview-shell {
        border: 0;
        background: transparent;
      }

      .section-header h2,
      .cta-copy h2 {
        font-size: 28px;
        line-height: 1.43;
      }

      .cta-title {
        font-size: 28px;
        line-height: 1.43;
        white-space: normal;
      }
javascript:;
      .cta-band {
        width: min(1200px, calc(100% - 32px));
        padding: 48px 24px;
      }

      .section-header p,
      .cta-description {
        font-size: 16px;
        line-height: 1.62;
      }
    }#block7{}#block7 .panel-heading{}#block7
{
  /*.panel-heading {}*/
  /*.panel-body    {}*/
}