.websil-liquid {
      --ws-navy: #061729;
      --ws-navy-soft: #0b2945;
      --ws-blue: #4b8dff;
      --ws-blue-strong: #1769ff;
      --ws-cyan: #4ed8dd;
      --ws-green: #58d68d;
      --ws-yellow: #ffd166;
      --ws-red: #ff7b7b;
      --ws-white: #ffffff;
      --ws-text: #15263a;
      --ws-muted: #65758a;
      --ws-light: #f4f8fc;
      --ws-border: rgba(255, 255, 255, 0.42);
      --ws-glass: rgba(255, 255, 255, 0.64);
      --ws-glass-dark: rgba(7, 28, 50, 0.58);

      font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

      color: var(--ws-text);
      background: #f7faff;
      overflow: hidden;
    }

    .websil-liquid * {
      box-sizing: border-box;
    }

    .websil-liquid a {
      text-decoration: none;
    }

    .ws-container {
      width: min(1180px, calc(100% - 40px));
      margin: 0 auto;
      position: relative;
      z-index: 2;
    }

    .ws-kicker {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      margin: 0 0 16px;
      color: var(--ws-blue);
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.11em;
      text-transform: uppercase;
    }

    .ws-kicker::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: currentColor;
      box-shadow: 0 0 18px currentColor;
    }

    .ws-hero {
      position: relative;
      min-height: 780px;
      padding: 105px 0 90px;
      display: flex;
      align-items: center;
      color: var(--ws-white);
      background:
        radial-gradient(
          circle at 78% 16%,
          rgba(78, 216, 221, 0.22),
          transparent 30%
        ),
        radial-gradient(
          circle at 18% 78%,
          rgba(75, 141, 255, 0.28),
          transparent 34%
        ),
        linear-gradient(
          145deg,
          #04111f 0%,
          #08223c 48%,
          #0b3550 100%
        );
    }

    .ws-hero::before,
    .ws-hero::after {
      content: "";
      position: absolute;
      border-radius: 50%;
      filter: blur(8px);
      opacity: 0.75;
      pointer-events: none;
    }

    .ws-hero::before {
      width: 440px;
      height: 440px;
      top: -180px;
      right: -100px;
      background:
        radial-gradient(
          circle,
          rgba(81, 168, 255, 0.34),
          transparent 66%
        );
    }

    .ws-hero::after {
      width: 380px;
      height: 380px;
      left: -120px;
      bottom: -150px;
      background:
        radial-gradient(
          circle,
          rgba(78, 216, 221, 0.2),
          transparent 66%
        );
    }

    .ws-hero-grid {
      display: grid;
      grid-template-columns: 1.02fr 0.98fr;
      gap: 62px;
      align-items: center;
    }

    .ws-hero-copy {
      max-width: 650px;
    }

    .ws-hero .ws-kicker {
      color: #6ee7ec;
    }

    .ws-hero h1 {
      margin: 0;
      max-width: 760px;
      color: var(--ws-white);
      font-size: clamp(50px, 6.5vw, 84px);
      line-height: 0.98;
      letter-spacing: -0.055em;
      font-weight: 760;
    }

    .ws-hero h1 span {
      background:
        linear-gradient(
          100deg,
          #ffffff 0%,
          #8dc3ff 46%,
          #74e0e4 100%
        );
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .ws-hero-lead {
      max-width: 680px;
      margin: 28px 0 0;
      color: rgba(255, 255, 255, 0.76);
      font-size: 20px;
      line-height: 1.65;
    }

    .ws-hero-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 14px;
      margin-top: 34px;
    }

    .ws-btn-primary,
    .ws-btn-secondary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 56px;
      padding: 0 25px;
      border-radius: 16px;
      font-size: 15px;
      font-weight: 800;
      transition:
        transform 0.24s ease,
        box-shadow 0.24s ease,
        background 0.24s ease,
        border 0.24s ease;
    }

    .ws-btn-primary {
      color: #ffffff;
      background:
        linear-gradient(
          135deg,
          #1769ff 0%,
          #4b8dff 52%,
          #4ed8dd 100%
        );
      box-shadow:
        0 16px 42px rgba(37, 111, 255, 0.36),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
    }

    .ws-btn-primary:hover {
      transform: translateY(-3px);
      box-shadow:
        0 22px 50px rgba(37, 111, 255, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    }

    .ws-btn-secondary {
      color: #ffffff;
      border: 1px solid rgba(255, 255, 255, 0.3);
      background: rgba(255, 255, 255, 0.08);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }

    .ws-btn-secondary:hover {
      transform: translateY(-3px);
      background: rgba(255, 255, 255, 0.13);
      border-color: rgba(255, 255, 255, 0.5);
    }

    .ws-hero-note {
      margin-top: 18px;
      color: rgba(255, 255, 255, 0.55);
      font-size: 13px;
    }

    .ws-hero-visual {
      position: relative;
      min-width: 0;
    }

    .ws-hero-glow {
      position: absolute;
      inset: 8% 5% -8%;
      border-radius: 40px;
      background:
        radial-gradient(
          circle at 50% 40%,
          rgba(78, 216, 221, 0.32),
          transparent 58%
        );
      filter: blur(34px);
    }

    .ws-glass-frame {
      position: relative;
      padding: 14px;
      border-radius: 30px;
      border: 1px solid rgba(255, 255, 255, 0.2);
      background:
        linear-gradient(
          135deg,
          rgba(255, 255, 255, 0.18),
          rgba(255, 255, 255, 0.05)
        );
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      box-shadow:
        0 38px 95px rgba(0, 0, 0, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.26);
      transform: perspective(1200px) rotateY(-4deg) rotateX(2deg);
      transition:
        transform 0.38s ease,
        box-shadow 0.38s ease;
    }

    .ws-glass-frame:hover {
      transform:
        perspective(1200px)
        rotateY(0deg)
        rotateX(0deg)
        translateY(-8px);

      box-shadow:
        0 48px 110px rgba(0, 0, 0, 0.46),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }

    .ws-glass-frame img {
      width: 100%;
      display: block;
      border-radius: 21px;
    }

    .ws-floating-card {
      position: absolute;
      z-index: 4;
      min-width: 190px;
      padding: 15px 17px;
      border-radius: 18px;
      color: #ffffff;
      background: rgba(13, 42, 70, 0.66);
      border: 1px solid rgba(255, 255, 255, 0.22);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28);
    }

    .ws-floating-card strong {
      display: block;
      margin-bottom: 5px;
      font-size: 14px;
    }

    .ws-floating-card span {
      color: rgba(255, 255, 255, 0.68);
      font-size: 12px;
    }

    .ws-floating-one {
      left: -34px;
      bottom: 46px;
    }

    .ws-floating-two {
      right: -28px;
      top: 44px;
    }

    .ws-proof-bar {
      position: relative;
      z-index: 4;
      margin-top: -38px;
    }

    .ws-proof-inner {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1px;
      overflow: hidden;
      border-radius: 24px;
      border: 1px solid rgba(255, 255, 255, 0.64);
      background: rgba(255, 255, 255, 0.56);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      box-shadow:
        0 24px 70px rgba(20, 60, 100, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.76);
    }

    .ws-proof-item {
      padding: 25px 24px;
      background: rgba(255, 255, 255, 0.5);
    }

    .ws-proof-item strong {
      display: block;
      margin-bottom: 5px;
      color: var(--ws-navy);
      font-size: 17px;
    }

    .ws-proof-item span {
      color: var(--ws-muted);
      font-size: 13px;
      line-height: 1.45;
    }

    .ws-section {
      position: relative;
      padding: 105px 0;
    }

    .ws-section-light {
      background:
        radial-gradient(
          circle at 10% 20%,
          rgba(75, 141, 255, 0.08),
          transparent 28%
        ),
        linear-gradient(
          180deg,
          #f5f9fe 0%,
          #eef5fb 100%
        );
    }

    .ws-section-white {
      background: #ffffff;
    }

    .ws-section-heading {
      max-width: 820px;
      margin-bottom: 48px;
    }

    .ws-section-heading.ws-center {
      margin-left: auto;
      margin-right: auto;
      text-align: center;
    }

    .ws-section-heading h2,
    .ws-copy h2,
    .ws-difference h2,
    .ws-final h2 {
      margin: 0;
      color: var(--ws-navy);
      font-size: clamp(38px, 4.4vw, 58px);
      line-height: 1.06;
      letter-spacing: -0.045em;
      font-weight: 750;
    }

    .ws-section-heading p,
    .ws-copy > p {
      margin: 20px 0 0;
      color: var(--ws-muted);
      font-size: 18px;
      line-height: 1.68;
    }

    .ws-grid-4,
    .ws-grid-3 {
      display: grid;
      gap: 20px;
    }

    .ws-grid-4 {
      grid-template-columns: repeat(4, 1fr);
    }

    .ws-grid-3 {
      grid-template-columns: repeat(3, 1fr);
    }

    .ws-glass-card {
      position: relative;
      overflow: hidden;
      min-height: 235px;
      padding: 27px;
      border-radius: 24px;
      border: 1px solid rgba(255, 255, 255, 0.7);
      background:
        linear-gradient(
          145deg,
          rgba(255, 255, 255, 0.86),
          rgba(255, 255, 255, 0.56)
        );
      backdrop-filter: blur(22px);
      -webkit-backdrop-filter: blur(22px);
      box-shadow:
        0 18px 46px rgba(23, 60, 100, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
      transition:
        transform 0.28s ease,
        box-shadow 0.28s ease,
        border-color 0.28s ease;
    }

    .ws-glass-card::after {
      content: "";
      position: absolute;
      width: 160px;
      height: 160px;
      right: -78px;
      top: -86px;
      border-radius: 50%;
      background: var(--card-glow, rgba(75, 141, 255, 0.12));
      filter: blur(2px);
    }

    .ws-glass-card:hover {
      transform: translateY(-7px);
      border-color: rgba(75, 141, 255, 0.22);
      box-shadow:
        0 26px 62px rgba(23, 60, 100, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    }

    .ws-icon {
      position: relative;
      z-index: 2;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 46px;
      height: 46px;
      margin-bottom: 22px;
      border-radius: 14px;
      color: var(--icon-color, var(--ws-blue));
      background:
        linear-gradient(
          145deg,
          rgba(255, 255, 255, 0.98),
          rgba(255, 255, 255, 0.62)
        );
      border: 1px solid rgba(255, 255, 255, 0.9);
      box-shadow:
        0 12px 26px rgba(30, 70, 110, 0.11),
        inset 0 1px 0 #ffffff;
      font-size: 14px;
      font-weight: 800;
    }

    .ws-glass-card h3 {
      position: relative;
      z-index: 2;
      margin: 0 0 10px;
      color: var(--ws-navy);
      font-size: 21px;
      letter-spacing: -0.02em;
    }

    .ws-glass-card p {
      position: relative;
      z-index: 2;
      margin: 0;
      color: var(--ws-muted);
      font-size: 15px;
      line-height: 1.58;
    }

    .ws-blue-card {
      --icon-color: #1769ff;
      --card-glow: rgba(75, 141, 255, 0.16);
    }

    .ws-cyan-card {
      --icon-color: #12aeb5;
      --card-glow: rgba(78, 216, 221, 0.16);
    }

    .ws-green-card {
      --icon-color: #2da968;
      --card-glow: rgba(88, 214, 141, 0.15);
    }

    .ws-yellow-card {
      --icon-color: #d99a16;
      --card-glow: rgba(255, 209, 102, 0.18);
    }

    .ws-red-card {
      --icon-color: #e25555;
      --card-glow: rgba(255, 123, 123, 0.14);
    }

    .ws-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 70px;
      align-items: center;
    }

    .ws-copy {
      min-width: 0;
    }

    .ws-copy .ws-kicker {
      margin-bottom: 15px;
    }

    .ws-product-frame {
      position: relative;
      padding: 14px;
      border-radius: 28px;
      background:
        linear-gradient(
          145deg,
          rgba(255, 255, 255, 0.94),
          rgba(231, 241, 251, 0.68)
        );
      border: 1px solid rgba(255, 255, 255, 0.96);
      box-shadow:
        0 26px 72px rgba(27, 65, 104, 0.18),
        inset 0 1px 0 #ffffff;
      transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
    }

    .ws-product-frame:hover {
      transform: translateY(-8px) scale(1.01);
      box-shadow:
        0 38px 90px rgba(27, 65, 104, 0.24),
        inset 0 1px 0 #ffffff;
    }

    .ws-product-frame img {
      width: 100%;
      display: block;
      border-radius: 20px;
    }

    .ws-feature-list {
      display: grid;
      gap: 12px;
      margin-top: 28px;
    }

    .ws-feature-item {
      display: flex;
      gap: 13px;
      align-items: flex-start;
      padding: 15px 17px;
      border-radius: 16px;
      color: var(--ws-muted);
      background:
        linear-gradient(
          145deg,
          rgba(255, 255, 255, 0.88),
          rgba(255, 255, 255, 0.58)
        );
      border: 1px solid rgba(255, 255, 255, 0.92);
      box-shadow: 0 10px 26px rgba(25, 61, 99, 0.07);
    }

    .ws-feature-check {
      flex: 0 0 23px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 23px;
      height: 23px;
      border-radius: 8px;
      color: #ffffff;
      background:
        linear-gradient(
          135deg,
          var(--ws-blue-strong),
          var(--ws-cyan)
        );
      font-size: 12px;
      font-weight: 900;
      box-shadow: 0 8px 18px rgba(23, 105, 255, 0.2);
    }

    .ws-feature-item strong {
      color: var(--ws-navy);
    }

    .ws-steps {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
    }

    .ws-step {
      position: relative;
      padding: 27px;
      border-radius: 24px;
      background:
        linear-gradient(
          145deg,
          rgba(255, 255, 255, 0.95),
          rgba(255, 255, 255, 0.62)
        );
      border: 1px solid rgba(255, 255, 255, 0.92);
      box-shadow:
        0 17px 45px rgba(27, 65, 104, 0.09),
        inset 0 1px 0 #ffffff;
    }

    .ws-step-number {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 42px;
      height: 42px;
      margin-bottom: 22px;
      border-radius: 50%;
      color: #ffffff;
      background:
        linear-gradient(
          135deg,
          #1769ff,
          #4ed8dd
        );
      font-size: 14px;
      font-weight: 800;
      box-shadow: 0 12px 26px rgba(23, 105, 255, 0.26);
    }

    .ws-step h3 {
      margin: 0 0 10px;
      color: var(--ws-navy);
      font-size: 20px;
    }

    .ws-step p {
      margin: 0;
      color: var(--ws-muted);
      font-size: 15px;
      line-height: 1.58;
    }

    .ws-difference {
      position: relative;
      overflow: hidden;
      display: grid;
      grid-template-columns: 1fr 0.9fr;
      gap: 50px;
      align-items: center;
      padding: 52px;
      border-radius: 34px;
      color: #ffffff;
      background:
        radial-gradient(
          circle at 84% 18%,
          rgba(78, 216, 221, 0.2),
          transparent 34%
        ),
        linear-gradient(
          145deg,
          #061729,
          #0b2d4a
        );
      border: 1px solid rgba(255, 255, 255, 0.14);
      box-shadow: 0 34px 90px rgba(6, 23, 41, 0.28);
    }

    .ws-difference .ws-kicker {
      color: #74e0e4;
    }

    .ws-difference h2 {
      color: #ffffff;
    }

    .ws-difference p {
      margin: 20px 0 0;
      color: rgba(255, 255, 255, 0.72);
      font-size: 18px;
      line-height: 1.65;
    }

    .ws-difference-points {
      display: grid;
      gap: 13px;
    }

    .ws-difference-point {
      padding: 16px 18px;
      border-radius: 17px;
      color: rgba(255, 255, 255, 0.9);
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.16);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      font-size: 15px;
      line-height: 1.5;
    }

    .ws-final {
      position: relative;
      overflow: hidden;
      padding: 100px 0;
      text-align: center;
      color: #ffffff;
      background:
        radial-gradient(
          circle at 50% -20%,
          rgba(78, 216, 221, 0.25),
          transparent 38%
        ),
        linear-gradient(
          145deg,
          #04111f,
          #082640 62%,
          #0b3550
        );
    }

    .ws-final h2 {
      max-width: 860px;
      margin-left: auto;
      margin-right: auto;
      color: #ffffff;
    }

    .ws-final p {
      max-width: 760px;
      margin: 22px auto 0;
      color: rgba(255, 255, 255, 0.72);
      font-size: 18px;
      line-height: 1.66;
    }

    .ws-final .ws-hero-actions {
      justify-content: center;
    }

    @media (max-width: 1050px) {
      .ws-hero-grid,
      .ws-row,
      .ws-difference {
        grid-template-columns: 1fr;
      }

      .ws-hero-copy {
        max-width: 760px;
      }

      .ws-hero-visual {
        max-width: 760px;
      }

      .ws-grid-4,
      .ws-steps {
        grid-template-columns: repeat(2, 1fr);
      }

      .ws-proof-inner {
        grid-template-columns: repeat(2, 1fr);
      }

      .ws-floating-one {
        left: 12px;
      }

      .ws-floating-two {
        right: 12px;
      }
    }

    @media (max-width: 720px) {
      .ws-container {
        width: min(100% - 28px, 1180px);
      }

      .ws-hero {
        min-height: auto;
        padding: 78px 0 84px;
      }

      .ws-hero-grid {
        gap: 44px;
      }

      .ws-hero h1 {
        font-size: clamp(42px, 13vw, 60px);
      }

      .ws-hero-lead {
        font-size: 17px;
      }

      .ws-hero-actions {
        align-items: stretch;
        flex-direction: column;
      }

      .ws-btn-primary,
      .ws-btn-secondary {
        width: 100%;
      }

      .ws-glass-frame {
        transform: none;
      }

      .ws-floating-card {
        position: static;
        margin-top: 12px;
      }

      .ws-proof-bar {
        margin-top: -24px;
      }

      .ws-proof-inner,
      .ws-grid-4,
      .ws-grid-3,
      .ws-steps {
        grid-template-columns: 1fr;
      }

      .ws-section {
        padding: 76px 0;
      }

      .ws-section-heading {
        margin-bottom: 34px;
      }

      .ws-difference {
        padding: 30px;
        border-radius: 26px;
      }

      .ws-final {
        padding: 82px 0;
      }
    }