:root {
      --bg: #06080d;
      --bg-soft: #090d15;
      --panel: rgba(15, 20, 31, .82);
      --panel-solid: #0f141f;
      --panel-2: #141b29;
      --line: rgba(255,255,255,.09);
      --line-strong: rgba(255,255,255,.16);
      --text: #f6f7fb;
      --muted: #a7afc0;
      --muted-2: #768096;
      --lime: #c9ff63;
      --lime-2: #a9e942;
      --cyan: #54ddff;
      --violet: #9c8cff;
      --orange: #ffad66;
      --danger: #ff758b;
      --success: #77e6aa;
      --radius: 28px;
      --radius-sm: 18px;
      --max: 1220px;
      --shadow: 0 30px 90px rgba(0,0,0,.4);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      min-width: 320px;
      color: var(--text);
      background:
        radial-gradient(circle at 16% -8%, rgba(156,140,255,.18), transparent 33%),
        radial-gradient(circle at 84% 8%, rgba(84,221,255,.12), transparent 30%),
        radial-gradient(circle at 50% 92%, rgba(201,255,99,.07), transparent 30%),
        var(--bg);
      font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      line-height: 1.55;
      overflow-x: hidden;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      opacity: .21;
      background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
      background-size: 48px 48px;
      mask-image: linear-gradient(to bottom, black, transparent 78%);
      z-index: -2;
    }

    ::selection { background: var(--lime); color: #10140a; }
    a { color: inherit; }
    button, input, textarea, select { font: inherit; }
    button { color: inherit; }

    .skip {
      position: absolute;
      left: -9999px;
      top: 12px;
      z-index: 999;
      padding: 10px 14px;
      border-radius: 10px;
      background: var(--lime);
      color: #10140a;
      font-weight: 800;
    }
    .skip:focus { left: 12px; }

    .container {
      width: min(var(--max), calc(100% - 40px));
      margin: 0 auto;
    }

    .nav-wrap {
      position: sticky;
      top: 0;
      z-index: 60;
      padding: 14px 0;
      background: linear-gradient(to bottom, rgba(6,8,13,.92), rgba(6,8,13,.68), transparent);
      backdrop-filter: blur(18px);
    }

    .nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 66px;
      padding: 10px 12px 10px 16px;
      border: 1px solid var(--line);
      border-radius: 22px;
      background: rgba(12,16,25,.72);
      box-shadow: 0 18px 70px rgba(0,0,0,.25);
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      text-decoration: none;
      min-width: 188px;
    }

    .brand-mark {
      position: relative;
      width: 42px;
      height: 42px;
      flex: 0 0 42px;
      border-radius: 13px;
      border: 1px solid rgba(201,255,99,.38);
      background:
        linear-gradient(145deg, rgba(201,255,99,.18), rgba(84,221,255,.03)),
        #0d131c;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 0 42px rgba(201,255,99,.08);
      overflow: hidden;
    }

    .brand-mark::before {
      content: "";
      position: absolute;
      left: 11px;
      top: 9px;
      width: 9px;
      height: 24px;
      border-radius: 3px;
      background: var(--lime);
      transform: skewY(-12deg);
    }

    .brand-mark::after {
      content: "";
      position: absolute;
      left: 15px;
      bottom: 9px;
      width: 18px;
      height: 8px;
      border-radius: 3px;
      background: linear-gradient(90deg, var(--lime), var(--cyan));
      transform: skewX(-24deg);
    }

    .brand-word {
      display: flex;
      flex-direction: column;
      line-height: 1;
    }
    .brand-word strong {
      font-size: 15px;
      letter-spacing: .18em;
      font-weight: 900;
    }
    .brand-word small {
      margin-top: 6px;
      font-size: 9px;
      color: var(--muted-2);
      letter-spacing: .22em;
      font-weight: 800;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .nav-links a {
      padding: 11px 13px;
      border-radius: 12px;
      color: var(--muted);
      text-decoration: none;
      font-size: 14px;
      font-weight: 700;
      transition: .2s ease;
    }
    .nav-links a:hover, .nav-links a:focus-visible {
      color: var(--text);
      background: rgba(255,255,255,.055);
      outline: none;
    }

    .nav-actions {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .lang {
      display: inline-grid;
      grid-template-columns: 1fr 1fr;
      padding: 4px;
      border-radius: 12px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.025);
    }

    .lang button {
      border: 0;
      min-width: 35px;
      padding: 7px 8px;
      border-radius: 8px;
      background: transparent;
      color: var(--muted-2);
      font-size: 11px;
      font-weight: 900;
      cursor: pointer;
    }
    .lang button.active {
      color: #10140a;
      background: var(--lime);
    }

    .menu-button {
      display: none;
      width: 42px;
      height: 42px;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: rgba(255,255,255,.035);
      cursor: pointer;
    }

    .menu-button span,
    .menu-button span::before,
    .menu-button span::after {
      display: block;
      width: 18px;
      height: 2px;
      border-radius: 2px;
      background: var(--text);
      transition: .2s ease;
    }
    .menu-button span { position: relative; }
    .menu-button span::before,
    .menu-button span::after {
      content: "";
      position: absolute;
      left: 0;
    }
    .menu-button span::before { top: -6px; }
    .menu-button span::after { top: 6px; }

    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      min-height: 46px;
      padding: 12px 18px;
      border: 1px solid var(--line-strong);
      border-radius: 14px;
      background: rgba(255,255,255,.035);
      color: var(--text);
      text-decoration: none;
      font-size: 14px;
      font-weight: 850;
      letter-spacing: -.01em;
      cursor: pointer;
      transition: transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
    }
    .button:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.28); }
    .button.primary {
      border-color: var(--lime);
      color: #10140a;
      background: var(--lime);
      box-shadow: 0 14px 38px rgba(201,255,99,.15);
    }
    .button.primary:hover { background: #dcff99; }
    .button.ghost { background: transparent; }
    .button.small { min-height: 40px; padding: 9px 14px; font-size: 13px; }

    .arrow {
      font-size: 18px;
      line-height: 1;
      transform: translateY(-1px);
    }

    .hero {
      position: relative;
      padding: 86px 0 76px;
    }

    .hero::after {
      content: "";
      position: absolute;
      width: 520px;
      height: 520px;
      right: -280px;
      top: 120px;
      border-radius: 50%;
      border: 1px solid rgba(84,221,255,.1);
      box-shadow:
        0 0 0 80px rgba(84,221,255,.018),
        0 0 0 170px rgba(156,140,255,.012);
      pointer-events: none;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1.08fr .92fr;
      gap: 68px;
      align-items: center;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      margin-bottom: 22px;
      color: var(--lime);
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .16em;
      text-transform: uppercase;
    }
    .eyebrow::before {
      content: "";
      width: 28px;
      height: 1px;
      background: var(--lime);
      box-shadow: 0 0 16px rgba(201,255,99,.5);
    }

    h1, h2, h3, p { margin-top: 0; }
    h1 {
      max-width: 800px;
      margin-bottom: 24px;
      font-size: clamp(50px, 6.7vw, 92px);
      line-height: .96;
      letter-spacing: -.064em;
      font-weight: 900;
    }

    .gradient-text {
      color: transparent;
      background: linear-gradient(100deg, var(--text) 4%, var(--lime) 42%, var(--cyan) 76%, #d9d2ff);
      -webkit-background-clip: text;
      background-clip: text;
    }

    .hero-copy {
      max-width: 690px;
      margin-bottom: 30px;
      color: var(--muted);
      font-size: clamp(18px, 2vw, 22px);
      line-height: 1.55;
      letter-spacing: -.018em;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-bottom: 34px;
    }

    .hero-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .hero-tags span {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 8px 10px;
      border: 1px solid var(--line);
      border-radius: 999px;
      color: var(--muted-2);
      background: rgba(255,255,255,.025);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .05em;
      text-transform: uppercase;
    }
    .hero-tags span::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--lime);
      box-shadow: 0 0 12px rgba(201,255,99,.5);
    }

    .hero-visual {
      position: relative;
      min-height: 590px;
      perspective: 1200px;
    }

    .command-card {
      position: absolute;
      inset: 24px 0 24px 24px;
      border: 1px solid var(--line-strong);
      border-radius: 34px;
      background:
        linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.012) 42%),
        rgba(10,14,22,.93);
      box-shadow: var(--shadow);
      overflow: hidden;
      transform: rotateY(-4deg) rotateX(2deg);
    }

    .command-card::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 84% 14%, rgba(84,221,255,.16), transparent 24%),
        radial-gradient(circle at 12% 88%, rgba(201,255,99,.10), transparent 28%);
      pointer-events: none;
    }

    .command-top {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 19px 20px;
      border-bottom: 1px solid var(--line);
    }

    .window-dots { display: flex; gap: 6px; }
    .window-dots i {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: rgba(255,255,255,.16);
    }
    .window-dots i:nth-child(1) { background: var(--danger); }
    .window-dots i:nth-child(2) { background: var(--orange); }
    .window-dots i:nth-child(3) { background: var(--success); }

    .command-title {
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .14em;
      text-transform: uppercase;
    }

    .live-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--lime);
      box-shadow: 0 0 0 5px rgba(201,255,99,.09), 0 0 18px rgba(201,255,99,.35);
    }

    .command-body {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: 152px 1fr;
      min-height: calc(100% - 66px);
    }

    .command-side {
      padding: 18px 13px;
      border-right: 1px solid var(--line);
    }
    .side-label {
      margin: 8px 8px 10px;
      color: var(--muted-2);
      font-size: 9px;
      font-weight: 900;
      letter-spacing: .14em;
      text-transform: uppercase;
    }
    .side-item {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 10px;
      margin-bottom: 5px;
      border-radius: 11px;
      color: var(--muted-2);
      font-size: 10px;
      font-weight: 800;
    }
    .side-item.active {
      color: var(--text);
      background: rgba(201,255,99,.08);
      border: 1px solid rgba(201,255,99,.13);
    }
    .side-icon {
      width: 8px; height: 8px; border-radius: 3px;
      background: currentColor; opacity: .72;
    }

    .command-main { padding: 19px; }
    .command-headline {
      display: flex;
      justify-content: space-between;
      align-items: end;
      gap: 16px;
      margin-bottom: 16px;
    }
    .command-headline strong { font-size: 17px; letter-spacing: -.02em; }
    .command-headline span { color: var(--muted-2); font-size: 9px; font-weight: 800; }

    .mini-kpis {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 9px;
      margin-bottom: 10px;
    }
    .mini-kpi {
      padding: 13px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: rgba(255,255,255,.025);
    }
    .mini-kpi small {
      display: block;
      color: var(--muted-2);
      font-size: 8px;
      font-weight: 900;
      letter-spacing: .07em;
      text-transform: uppercase;
    }
    .mini-kpi strong {
      display: block;
      margin-top: 7px;
      font-size: 18px;
      letter-spacing: -.03em;
    }
    .mini-kpi em {
      display: block;
      margin-top: 5px;
      color: var(--success);
      font-size: 8px;
      font-style: normal;
      font-weight: 900;
    }

    .chart-card {
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: rgba(255,255,255,.018);
    }
    .chart-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: var(--muted);
      font-size: 9px;
      font-weight: 800;
    }
    .chart {
      display: flex;
      align-items: end;
      gap: 7px;
      height: 96px;
      padding-top: 14px;
      border-bottom: 1px solid var(--line);
    }
    .bar {
      flex: 1;
      min-width: 8px;
      height: var(--h);
      border-radius: 5px 5px 1px 1px;
      background: linear-gradient(to top, rgba(84,221,255,.20), var(--cyan));
      opacity: .88;
      animation: grow 1.1s both;
      transform-origin: bottom;
    }
    .bar:nth-child(2n) { background: linear-gradient(to top, rgba(201,255,99,.14), var(--lime)); }
    @keyframes grow { from { transform: scaleY(.08); opacity: .15; } }

    .portfolio-flow {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 9px;
      margin-top: 10px;
    }
    .flow-item {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 10px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: rgba(255,255,255,.018);
    }
    .flow-badge {
      display: grid;
      place-items: center;
      width: 28px;
      height: 28px;
      flex: 0 0 28px;
      border-radius: 9px;
      background: rgba(156,140,255,.14);
      color: #d4ccff;
      font-size: 9px;
      font-weight: 900;
    }
    .flow-item:nth-child(2) .flow-badge { background: rgba(84,221,255,.12); color: var(--cyan); }
    .flow-item:nth-child(3) .flow-badge { background: rgba(201,255,99,.11); color: var(--lime); }
    .flow-item:nth-child(4) .flow-badge { background: rgba(255,173,102,.11); color: var(--orange); }
    .flow-item strong { display: block; font-size: 9px; }
    .flow-item small { display: block; color: var(--muted-2); font-size: 7px; margin-top: 2px; }

    .floating-label {
      position: absolute;
      z-index: 4;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 14px;
      border: 1px solid var(--line-strong);
      border-radius: 15px;
      background: rgba(14,19,29,.92);
      box-shadow: 0 18px 44px rgba(0,0,0,.34);
      backdrop-filter: blur(14px);
      font-size: 10px;
      font-weight: 900;
    }
    .floating-label::before {
      content: "";
      width: 9px; height: 9px; border-radius: 50%;
      background: var(--lime);
      box-shadow: 0 0 16px rgba(201,255,99,.55);
    }
    .float-a { top: 2px; right: -14px; animation: float 5s ease-in-out infinite; }
    .float-b { bottom: 4px; left: -6px; animation: float 6s ease-in-out infinite reverse; }
    .float-b::before { background: var(--violet); box-shadow: 0 0 16px rgba(156,140,255,.55); }
    @keyframes float { 50% { transform: translateY(-9px); } }

    .trust-strip {
      display: grid;
      grid-template-columns: 1.25fr repeat(4, 1fr);
      gap: 10px;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 24px;
      background: rgba(255,255,255,.02);
    }
    .trust-intro, .trust-item {
      min-height: 92px;
      padding: 17px;
      border-radius: 16px;
    }
    .trust-intro {
      display: flex;
      flex-direction: column;
      justify-content: center;
      background: rgba(201,255,99,.075);
      border: 1px solid rgba(201,255,99,.11);
    }
    .trust-intro strong { font-size: 16px; }
    .trust-intro span { color: var(--muted); font-size: 12px; margin-top: 4px; }
    .trust-item {
      border: 1px solid var(--line);
      background: rgba(255,255,255,.018);
    }
    .trust-item strong {
      display: block;
      font-size: 13px;
      margin-bottom: 7px;
    }
    .trust-item span {
      display: block;
      color: var(--muted-2);
      font-size: 11px;
      line-height: 1.45;
    }

    section { padding: 108px 0; }
    .section-head {
      display: grid;
      grid-template-columns: .86fr 1.14fr;
      gap: 50px;
      align-items: end;
      margin-bottom: 46px;
    }
    .section-kicker {
      color: var(--lime);
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .16em;
      text-transform: uppercase;
    }
    .section-head h2 {
      max-width: 820px;
      margin: 0;
      font-size: clamp(38px, 5.3vw, 70px);
      line-height: 1.01;
      letter-spacing: -.052em;
    }
    .section-head p {
      max-width: 580px;
      margin: 0;
      color: var(--muted);
      font-size: 17px;
      line-height: 1.65;
    }

    .ecosystem {
      position: relative;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 34px;
      background:
        radial-gradient(circle at 10% 10%, rgba(156,140,255,.12), transparent 28%),
        radial-gradient(circle at 90% 70%, rgba(84,221,255,.08), transparent 26%),
        rgba(10,14,22,.76);
      box-shadow: var(--shadow);
    }
    .ecosystem-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
    }
    .eco-card {
      position: relative;
      min-height: 330px;
      padding: 30px 26px;
      border-right: 1px solid var(--line);
      overflow: hidden;
    }
    .eco-card:last-child { border-right: 0; }
    .eco-num {
      display: inline-grid;
      place-items: center;
      width: 36px;
      height: 36px;
      border-radius: 12px;
      background: rgba(255,255,255,.05);
      color: var(--muted);
      font-size: 11px;
      font-weight: 900;
    }
    .eco-card h3 {
      margin: 68px 0 12px;
      font-size: 26px;
      line-height: 1.05;
      letter-spacing: -.035em;
    }
    .eco-card p {
      color: var(--muted);
      font-size: 14px;
      line-height: 1.65;
    }
    .eco-products {
      position: absolute;
      left: 26px;
      right: 26px;
      bottom: 24px;
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .eco-products span {
      padding: 6px 8px;
      border: 1px solid var(--line);
      border-radius: 999px;
      color: var(--muted-2);
      background: rgba(255,255,255,.025);
      font-size: 9px;
      font-weight: 850;
    }
    .eco-card::after {
      content: "";
      position: absolute;
      width: 160px;
      height: 160px;
      right: -80px;
      top: -90px;
      border-radius: 50%;
      background: var(--accent, var(--lime));
      filter: blur(80px);
      opacity: .13;
    }

    .featured-grid {
      display: grid;
      grid-template-columns: 1.25fr .75fr;
      gap: 14px;
      margin-bottom: 14px;
    }

    .product-feature {
      position: relative;
      min-height: 480px;
      padding: 36px;
      border: 1px solid var(--line);
      border-radius: 30px;
      overflow: hidden;
      background:
        linear-gradient(145deg, rgba(201,255,99,.08), transparent 34%),
        var(--panel);
      box-shadow: 0 28px 70px rgba(0,0,0,.24);
    }
    .product-feature.secondary {
      background:
        linear-gradient(145deg, rgba(84,221,255,.07), transparent 34%),
        var(--panel);
    }
    .product-feature::after {
      content: "";
      position: absolute;
      width: 360px;
      height: 360px;
      border-radius: 50%;
      right: -180px;
      bottom: -230px;
      border: 1px solid rgba(255,255,255,.09);
      box-shadow: 0 0 0 60px rgba(255,255,255,.012), 0 0 0 120px rgba(255,255,255,.008);
    }
    .product-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 72px;
    }
    .product-code {
      color: var(--muted-2);
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .12em;
    }
    .status {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 7px 9px;
      border-radius: 999px;
      border: 1px solid var(--line);
      color: var(--muted);
      background: rgba(255,255,255,.025);
      font-size: 9px;
      font-weight: 900;
      letter-spacing: .04em;
      text-transform: uppercase;
    }
    .status::before {
      content: "";
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--status, var(--success));
      box-shadow: 0 0 13px color-mix(in srgb, var(--status, var(--success)) 55%, transparent);
    }
    .product-feature h3 {
      max-width: 720px;
      margin-bottom: 14px;
      font-size: clamp(38px, 5vw, 68px);
      line-height: .98;
      letter-spacing: -.055em;
    }
    .product-feature.secondary h3 { font-size: clamp(34px, 4vw, 52px); }
    .product-feature p {
      max-width: 620px;
      color: var(--muted);
      font-size: 16px;
      line-height: 1.7;
    }
    .feature-list {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      margin: 24px 0 30px;
    }
    .feature-list span {
      padding: 7px 9px;
      border-radius: 9px;
      border: 1px solid var(--line);
      color: var(--muted);
      background: rgba(255,255,255,.022);
      font-size: 10px;
      font-weight: 800;
    }

    .product-trio {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
    }
    .product-mini {
      position: relative;
      min-height: 300px;
      padding: 26px;
      border: 1px solid var(--line);
      border-radius: 25px;
      background: rgba(14,19,29,.72);
      overflow: hidden;
      cursor: pointer;
      transition: .25s ease;
    }
    .product-mini:hover {
      transform: translateY(-5px);
      border-color: rgba(255,255,255,.2);
      background: rgba(18,24,36,.9);
    }
    .product-mini::after {
      content: "";
      position: absolute;
      width: 130px;
      height: 130px;
      right: -65px;
      bottom: -65px;
      border-radius: 50%;
      background: var(--glow, var(--violet));
      filter: blur(60px);
      opacity: .14;
    }
    .product-mini h3 {
      margin: 52px 0 11px;
      font-size: 27px;
      line-height: 1.02;
      letter-spacing: -.04em;
    }
    .product-mini p { color: var(--muted); font-size: 13px; line-height: 1.62; }
    .link-line {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-top: 17px;
      color: var(--text);
      font-size: 11px;
      font-weight: 900;
      text-decoration: none;
    }

    .portfolio-toolbar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 22px;
    }

    .filters {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
    }
    .filter {
      padding: 9px 12px;
      border: 1px solid var(--line);
      border-radius: 999px;
      color: var(--muted);
      background: rgba(255,255,255,.02);
      font-size: 11px;
      font-weight: 850;
      cursor: pointer;
      transition: .2s ease;
    }
    .filter:hover, .filter.active {
      color: #10140a;
      border-color: var(--lime);
      background: var(--lime);
    }
    .portfolio-count { color: var(--muted-2); font-size: 11px; font-weight: 800; }

    .portfolio-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
    }
    .portfolio-card {
      position: relative;
      display: flex;
      flex-direction: column;
      min-height: 290px;
      padding: 22px;
      border: 1px solid var(--line);
      border-radius: 22px;
      background: rgba(14,19,29,.66);
      overflow: hidden;
      transition: transform .22s ease, border-color .22s ease, opacity .2s ease;
    }
    .portfolio-card:hover {
      transform: translateY(-4px);
      border-color: rgba(255,255,255,.19);
    }
    .portfolio-card[hidden] { display: none; }
    .portfolio-card::after {
      content: "";
      position: absolute;
      width: 120px; height: 120px;
      right: -72px; top: -65px;
      border-radius: 50%;
      background: var(--card-accent, var(--violet));
      filter: blur(60px);
      opacity: .18;
    }
    .card-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
    }
    .category-mark {
      display: grid;
      place-items: center;
      width: 38px;
      height: 38px;
      border-radius: 12px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.035);
      color: var(--card-accent, var(--violet));
      font-size: 11px;
      font-weight: 950;
    }
    .portfolio-card h3 {
      margin: 52px 0 10px;
      font-size: 23px;
      line-height: 1.02;
      letter-spacing: -.035em;
    }
    .portfolio-card p {
      margin-bottom: 18px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.6;
    }
    .card-foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-top: auto;
      padding-top: 14px;
      border-top: 1px solid var(--line);
    }
    .card-foot span {
      color: var(--muted-2);
      font-size: 9px;
      font-weight: 850;
      text-transform: uppercase;
      letter-spacing: .06em;
    }
    .card-open {
      width: 34px;
      height: 34px;
      border: 1px solid var(--line);
      border-radius: 11px;
      background: rgba(255,255,255,.025);
      cursor: pointer;
      transition: .2s ease;
    }
    .card-open:hover { background: var(--lime); color: #10140a; border-color: var(--lime); }

    .value-grid {
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 14px;
    }
    .value-story {
      position: relative;
      min-height: 570px;
      padding: 42px;
      border: 1px solid var(--line);
      border-radius: 32px;
      background:
        radial-gradient(circle at 90% 10%, rgba(201,255,99,.12), transparent 28%),
        rgba(11,15,23,.84);
      overflow: hidden;
    }
    .value-story h2 {
      max-width: 700px;
      margin-bottom: 20px;
      font-size: clamp(42px, 5.3vw, 72px);
      line-height: .99;
      letter-spacing: -.055em;
    }
    .value-story p {
      max-width: 620px;
      color: var(--muted);
      font-size: 17px;
      line-height: 1.72;
    }
    .value-quote {
      position: absolute;
      left: 42px;
      right: 42px;
      bottom: 38px;
      padding-top: 24px;
      border-top: 1px solid var(--line);
      color: var(--text);
      font-size: 20px;
      line-height: 1.5;
      letter-spacing: -.02em;
    }

    .value-stack { display: grid; gap: 14px; }
    .value-card {
      min-height: 128px;
      padding: 24px;
      border: 1px solid var(--line);
      border-radius: 22px;
      background: rgba(14,19,29,.66);
    }
    .value-card strong {
      display: block;
      margin-bottom: 8px;
      font-size: 18px;
      letter-spacing: -.02em;
    }
    .value-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.58; }
    .value-index {
      float: right;
      color: var(--muted-2);
      font-size: 10px;
      font-weight: 900;
    }

    .models-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
    }
    .model-card {
      padding: 27px;
      border: 1px solid var(--line);
      border-radius: 24px;
      background: rgba(14,19,29,.65);
    }
    .model-card .category-mark { margin-bottom: 54px; }
    .model-card h3 { font-size: 22px; letter-spacing: -.03em; }
    .model-card p { color: var(--muted); font-size: 13px; line-height: 1.65; }
    .model-card ul {
      margin: 18px 0 0;
      padding: 0;
      list-style: none;
    }
    .model-card li {
      position: relative;
      padding: 8px 0 8px 18px;
      border-top: 1px solid var(--line);
      color: var(--muted);
      font-size: 11px;
    }
    .model-card li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 14px;
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--lime);
    }

    .security-band {
      padding: 38px;
      border: 1px solid rgba(84,221,255,.13);
      border-radius: 30px;
      background:
        linear-gradient(120deg, rgba(84,221,255,.07), rgba(156,140,255,.045)),
        rgba(10,14,22,.76);
    }
    .security-grid {
      display: grid;
      grid-template-columns: 1.2fr repeat(3, 1fr);
      gap: 20px;
      align-items: center;
    }
    .security-intro h3 {
      margin-bottom: 9px;
      font-size: 29px;
      letter-spacing: -.035em;
    }
    .security-intro p { margin: 0; color: var(--muted); font-size: 13px; }
    .security-point {
      padding-left: 20px;
      border-left: 1px solid var(--line);
    }
    .security-point strong { display: block; font-size: 13px; margin-bottom: 7px; }
    .security-point span { display: block; color: var(--muted-2); font-size: 11px; line-height: 1.5; }

    .contact-shell {
      position: relative;
      display: grid;
      grid-template-columns: .88fr 1.12fr;
      gap: 54px;
      padding: 46px;
      border: 1px solid var(--line);
      border-radius: 34px;
      background:
        radial-gradient(circle at 0% 100%, rgba(201,255,99,.11), transparent 28%),
        radial-gradient(circle at 100% 0%, rgba(156,140,255,.12), transparent 28%),
        rgba(10,14,22,.9);
      box-shadow: var(--shadow);
      overflow: hidden;
    }
    .contact-copy h2 {
      margin-bottom: 18px;
      font-size: clamp(42px, 5.4vw, 72px);
      line-height: .98;
      letter-spacing: -.055em;
    }
    .contact-copy p {
      max-width: 520px;
      color: var(--muted);
      font-size: 16px;
      line-height: 1.7;
    }
    .contact-options {
      display: grid;
      gap: 9px;
      margin-top: 32px;
    }
    .contact-option {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 0;
      border-top: 1px solid var(--line);
      color: var(--muted);
      font-size: 13px;
      font-weight: 750;
    }
    .contact-option b {
      display: grid;
      place-items: center;
      width: 28px; height: 28px;
      border-radius: 9px;
      background: rgba(201,255,99,.09);
      color: var(--lime);
      font-size: 10px;
    }

    .contact-form {
      display: grid;
      gap: 12px;
      padding: 24px;
      border: 1px solid var(--line);
      border-radius: 24px;
      background: rgba(255,255,255,.025);
    }
    .form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }
    label {
      display: grid;
      gap: 7px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 850;
    }
    input, textarea, select {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 13px;
      outline: none;
      background: rgba(5,8,13,.62);
      color: var(--text);
      padding: 13px 14px;
      transition: border-color .2s ease, box-shadow .2s ease;
    }
    input:focus, textarea:focus, select:focus {
      border-color: rgba(201,255,99,.55);
      box-shadow: 0 0 0 4px rgba(201,255,99,.07);
    }
    textarea { min-height: 132px; resize: vertical; }
    .form-note { color: var(--muted-2); font-size: 9px; line-height: 1.5; }
    .form-result {
      min-height: 18px;
      color: var(--success);
      font-size: 11px;
      font-weight: 800;
    }

    footer {
      padding: 40px 0 34px;
      border-top: 1px solid var(--line);
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 24px;
      align-items: end;
    }
    .footer-copy { max-width: 720px; color: var(--muted-2); font-size: 11px; line-height: 1.6; }
    .footer-links { display: flex; gap: 18px; flex-wrap: wrap; justify-content: end; }
    .footer-links a { color: var(--muted); font-size: 11px; text-decoration: none; font-weight: 800; }
    .footer-links a:hover { color: var(--text); }

    .drawer {
      position: fixed;
      inset: 0;
      z-index: 100;
      display: none;
    }
    .drawer.open { display: block; }
    .drawer-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(1,3,6,.78);
      backdrop-filter: blur(10px);
      animation: fade .18s both;
    }
    .drawer-panel {
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      width: min(620px, 100%);
      padding: 28px;
      border-left: 1px solid var(--line);
      background:
        radial-gradient(circle at 100% 0%, rgba(156,140,255,.12), transparent 28%),
        #0a0e16;
      overflow-y: auto;
      animation: slide .24s ease both;
      box-shadow: -30px 0 80px rgba(0,0,0,.42);
    }
    @keyframes fade { from { opacity: 0; } }
    @keyframes slide { from { transform: translateX(40px); opacity: 0; } }
    .drawer-close {
      display: grid;
      place-items: center;
      width: 42px; height: 42px;
      margin-left: auto;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: rgba(255,255,255,.03);
      cursor: pointer;
    }
    .drawer-label { margin-top: 60px; color: var(--lime); font-size: 10px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
    .drawer h2 { margin: 14px 0 16px; font-size: clamp(40px, 8vw, 68px); line-height: .98; letter-spacing: -.055em; }
    .drawer-lead { color: var(--muted); font-size: 17px; line-height: 1.68; }
    .drawer-cols {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin: 30px 0;
    }
    .drawer-box {
      padding: 19px;
      border: 1px solid var(--line);
      border-radius: 17px;
      background: rgba(255,255,255,.025);
    }
    .drawer-box small { color: var(--muted-2); font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
    .drawer-box strong { display: block; margin-top: 8px; font-size: 14px; line-height: 1.4; }
    .drawer-list { margin: 0 0 34px; padding: 0; list-style: none; }
    .drawer-list li {
      position: relative;
      padding: 12px 0 12px 22px;
      border-top: 1px solid var(--line);
      color: var(--muted);
      font-size: 13px;
    }
    .drawer-list li::before {
      content: "↗";
      position: absolute;
      left: 0;
      color: var(--lime);
      font-weight: 900;
    }

    .reveal {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity .7s ease, transform .7s ease;
    }
    .reveal.visible { opacity: 1; transform: none; }

    @media (max-width: 1080px) {
      .nav-links { display: none; }
      .menu-button { display: inline-flex; }
      .nav.open .nav-links {
        position: absolute;
        display: grid;
        left: 20px;
        right: 20px;
        top: 90px;
        padding: 12px;
        border: 1px solid var(--line);
        border-radius: 18px;
        background: rgba(10,14,22,.97);
        box-shadow: var(--shadow);
      }
      .hero-grid { grid-template-columns: 1fr; gap: 44px; }
      .hero-visual { min-height: 540px; max-width: 680px; width: 100%; margin: 0 auto; }
      .trust-strip { grid-template-columns: repeat(2, 1fr); }
      .trust-intro { grid-column: 1 / -1; }
      .ecosystem-grid { grid-template-columns: repeat(2, 1fr); }
      .eco-card { border-bottom: 1px solid var(--line); }
      .eco-card:nth-child(2n) { border-right: 0; }
      .eco-card:nth-child(n+3) { border-bottom: 0; }
      .portfolio-grid { grid-template-columns: repeat(3, 1fr); }
      .models-grid { grid-template-columns: repeat(2, 1fr); }
      .security-grid { grid-template-columns: 1fr 1fr; }
      .security-intro { grid-column: 1 / -1; }
      .security-point:nth-child(2) { padding-left: 0; border-left: 0; }
    }

    @media (max-width: 820px) {
      .container { width: min(var(--max), calc(100% - 26px)); }
      .nav-wrap { padding-top: 8px; }
      .nav { min-height: 60px; }
      .brand { min-width: 0; }
      .brand-word small { display: none; }
      .nav-actions .button { display: none; }
      .hero { padding: 62px 0 48px; }
      h1 { font-size: clamp(47px, 14vw, 74px); }
      .hero-copy { font-size: 17px; }
      .hero-visual { min-height: 490px; }
      .command-card { inset: 12px 0 20px 0; transform: none; }
      .command-body { grid-template-columns: 116px 1fr; }
      .command-side { padding: 13px 9px; }
      .side-item { padding: 8px; font-size: 8px; }
      .command-main { padding: 14px; }
      .mini-kpis { grid-template-columns: 1fr 1fr; }
      .mini-kpi:nth-child(3) { display: none; }
      .float-a { right: 2px; }
      section { padding: 82px 0; }
      .section-head { grid-template-columns: 1fr; gap: 16px; margin-bottom: 32px; }
      .featured-grid { grid-template-columns: 1fr; }
      .product-feature { min-height: 420px; }
      .product-trio { grid-template-columns: 1fr; }
      .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
      .value-grid { grid-template-columns: 1fr; }
      .value-story { min-height: 540px; }
      .contact-shell { grid-template-columns: 1fr; gap: 30px; padding: 30px; }
      .footer-grid { grid-template-columns: 1fr; }
      .footer-links { justify-content: start; }
    }

    @media (max-width: 560px) {
      .brand-word strong { font-size: 13px; }
      .lang { display: none; }
      .hero { padding-top: 42px; }
      .hero-actions { display: grid; grid-template-columns: 1fr; }
      .hero-actions .button { width: 100%; }
      .hero-tags span { font-size: 9px; }
      .hero-visual { min-height: 430px; }
      .command-card { border-radius: 24px; }
      .command-body { grid-template-columns: 1fr; }
      .command-side { display: none; }
      .command-main { padding: 13px; }
      .command-headline { margin-bottom: 10px; }
      .chart { height: 82px; }
      .floating-label { display: none; }
      .trust-strip { grid-template-columns: 1fr; }
      .trust-intro { grid-column: auto; }
      .ecosystem-grid { grid-template-columns: 1fr; }
      .eco-card {
        min-height: 300px;
        border-right: 0;
        border-bottom: 1px solid var(--line) !important;
      }
      .eco-card:last-child { border-bottom: 0 !important; }
      .product-feature { padding: 26px; min-height: 460px; }
      .product-top { margin-bottom: 50px; }
      .product-feature h3 { font-size: 43px; }
      .portfolio-grid { grid-template-columns: 1fr; }
      .portfolio-card { min-height: 250px; }
      .models-grid { grid-template-columns: 1fr; }
      .security-grid { grid-template-columns: 1fr; }
      .security-point { padding: 18px 0 0; border-left: 0; border-top: 1px solid var(--line); }
      .value-story { padding: 28px; min-height: 600px; }
      .value-quote { left: 28px; right: 28px; bottom: 28px; font-size: 17px; }
      .form-grid { grid-template-columns: 1fr; }
      .contact-shell { padding: 24px; border-radius: 26px; }
      .contact-form { padding: 17px; }
      .drawer-panel { padding: 20px; }
      .drawer-cols { grid-template-columns: 1fr; }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
      }
      .reveal { opacity: 1; transform: none; }
    }

.nav-links{display:flex}.site-panel{padding:40px;border:1px solid var(--line);border-radius:28px;background:var(--panel)}.hero-grid{grid-template-columns:1fr 1fr}.hero-visual{min-height:460px}.quiet-visual{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:24px;position:relative;border:1px solid var(--line);background:radial-gradient(circle at 50% 45%,#233444,transparent 65%),#0c121b;border-radius:32px;overflow:hidden}.quiet-visual .orb{width:240px;height:240px;border:2px solid #c9ff63;border-radius:50%;box-shadow:0 0 90px #c9ff6335,inset 0 0 80px #54ddff20;display:grid;place-items:center;color:#c9ff63;font-size:70px;font-weight:900;letter-spacing:-12px}.quiet-visual .orb:after{content:"";position:absolute;width:330px;height:330px;border:1px solid #54ddff50;border-radius:50%}.quiet-visual small{color:var(--muted);letter-spacing:.25em}.form-result.error{color:#ffad66}.form-result.success{color:#77e6aa}.nav-actions .button{display:inline-flex}@media(max-width:820px){.hero-grid{grid-template-columns:1fr}.hero-visual{min-height:340px}.site-panel{padding:25px}.nav-links{display:none}}@media(max-width:560px){.hero-visual{min-height:280px}.quiet-visual .orb{width:170px;height:170px;font-size:55px}.quiet-visual .orb:after{width:240px;height:240px}}
.section-copy{color:var(--muted);max-width:740px;font-size:16px;line-height:1.75}.content-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.info-tile{border:1px solid var(--line);border-radius:24px;background:var(--panel);padding:30px}.info-tile h3{font-size:22px;letter-spacing:-.03em}.info-tile p{color:var(--muted);font-size:14px;line-height:1.7}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.steps article{padding:25px;border:1px solid var(--line);border-radius:20px;background:var(--panel)}.steps small{color:var(--lime);font-weight:900;letter-spacing:.12em}.steps h3{margin-top:20px;font-size:19px}.steps p{color:var(--muted);font-size:13px}.faq details{border-bottom:1px solid var(--line);padding:20px 0}.faq summary{font-size:18px;font-weight:750;cursor:pointer}.faq p{color:var(--muted);padding-top:12px;max-width:800px}@media(max-width:900px){.content-grid,.steps{grid-template-columns:repeat(2,1fr)}}@media(max-width:570px){.content-grid,.steps{grid-template-columns:1fr}}

.article-hero{padding:65px 0 40px}.article-hero h1{font-size:clamp(36px,6vw,72px);max-width:980px;line-height:1.08}.reading{max-width:820px;margin:auto}.reading section{padding:20px 0}.reading h2{font-size:clamp(25px,4vw,36px);line-height:1.2;letter-spacing:-.025em}.reading p,.reading li{color:var(--muted);font-size:17px;line-height:1.8}.reading a,.related a{color:var(--lime)}.reading ul{padding-left:24px}.breadcrumbs{font-size:13px;color:var(--muted);margin-bottom:28px}.related{padding:30px;margin-top:35px;border:1px solid var(--line);border-radius:24px;background:var(--panel)}.topic-links{display:flex;flex-wrap:wrap;gap:18px}.mobile-toggle{display:none}.contact-fallback{border:1px solid var(--line);border-radius:20px;padding:26px;background:var(--panel)}[hidden]{display:none!important}.privacy-choice{position:fixed;bottom:16px;left:16px;right:16px;z-index:90;padding:22px;max-width:700px;margin:auto;border:1px solid var(--line);border-radius:20px;background:#111925;box-shadow:0 15px 45px #0008}.privacy-choice p{color:var(--muted);margin-bottom:14px}.privacy-choice .button{margin:4px}.privacy-settings{background:none;border:0;color:var(--muted);font-size:11px;cursor:pointer}.nav-links a[aria-current=page]{color:var(--lime)}:focus-visible{outline:2px solid var(--lime);outline-offset:4px}.subtle-note{color:var(--muted);font-size:13px;line-height:1.6}@media(max-width:1080px){.mobile-toggle{display:inline-flex}.nav-links{display:none}.nav.open .nav-links{display:flex;flex-direction:column;align-items:flex-start;top:80px;left:14px;right:14px}}@media(max-width:560px){.brand-word strong{letter-spacing:.1em}.nav-actions .button{font-size:11px;padding:9px}.reading p,.reading li{font-size:16px}.article-hero{padding-top:35px}.contact-shell{padding:20px}.topic-links{flex-direction:column}}