:root {
      --ai-primary: #40bad8;
      --ai-primary-dark: #1598b8;
      --ai-dark: #07131b;
      --ai-dark-2: #1f2428;
      --ai-gray: #f4f4f5;
      --ai-gray-2: #eeeeef;
      --ai-text-muted: #a9adb3;
      --ai-white: #ffffff;
      --ai-radius-lg: 34px;
      --ai-radius-md: 18px;
      --ai-radius-sm: 12px;
    }
  .ai-page {
      overflow: hidden;
    }

    /* Common */
    .accent {
      color: var(--ai-primary);
    }

    .section-title {
      font-size: clamp(44px, 6vw, 72px);
      font-weight: 900;
      line-height: .9;
      letter-spacing: -2.8px;
      margin-bottom: 24px;
    }

    .section-title .accent {
      display: block;
    }

    .section-lead {
      font-size: 18px;
      line-height: 1.55;
      font-weight: 500;
      color: #454a50;
      max-width: 720px;
    }

    .btn-ai {
      min-height: 48px;
      padding: 12px 24px;
      border: 0;
      border-radius: 5px;
      background: var(--ai-primary);
      color: #fff;
      font-size: 14px;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      text-decoration: none;
      transition: .2s ease;
      box-shadow: 0 12px 24px rgba(64, 186, 216, .24);
    }

    .btn-ai:hover {
      background: var(--ai-primary-dark);
      color: #fff;
      transform: translateY(-1px);
    }

    .btn-ai-outline {
      min-height: 48px;
      padding: 12px 24px;
      border-radius: 5px;
      border: 1px solid rgba(255,255,255,.28);
      background: transparent;
      color: #fff;
      font-size: 14px;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      text-decoration: none;
      transition: .2s ease;
    }

    .btn-ai-outline:hover {
      border-color: var(--ai-primary);
      color: var(--ai-primary);
    }

    .ai-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 13px;
      border-radius: 999px;
      background: rgba(64, 186, 216, .12);
      color: var(--ai-primary);
      font-size: 13px;
      font-weight: 800;
      margin-bottom: 18px;
    }

    .ai-badge.dark {
      background: rgba(255,255,255,.08);
      color: #fff;
    }

    .ai-badge.dark .material-symbols-rounded {
      color: var(--ai-primary);
    }

    /* Hero */
    .ai-hero {
     
    }

    .ai-hero-card {
      background:
        radial-gradient(circle at 72% 20%, rgba(64, 186, 216, .24), transparent 30%),
        linear-gradient(135deg, #1f2428 0%, #171d21 100%);
      border-radius: var(--ai-radius-lg);
      min-height: 360px;
      padding: 56px 40px 40px;
      position: relative;
      overflow: hidden;
    }

    .ai-hero-title {
      color: #fff;
      font-size: clamp(48px, 6vw, 78px);
      font-weight: 900;
      line-height: .88;
      letter-spacing: -3.5px;
      margin-bottom: 22px;
      max-width: 620px;
    }

    .ai-hero-title .accent {
      display: block;
    }

    .ai-hero-text {
      color: #fff;
      font-size: 18px;
      line-height: 1.5;
      font-weight: 500;
      max-width: 600px;
      margin-bottom: 26px;
      opacity: .96;
    }

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

    .hero-mini-list {
      display: flex;
      gap: 18px;
      flex-wrap: wrap;
      margin-top: 28px;
      color: #fff;
      font-size: 13px;
      font-weight: 700;
    }

    .hero-mini-list span {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      opacity: .9;
    }

    .hero-mini-list .material-symbols-rounded {
      font-size: 19px;
      color: var(--ai-primary);
    }

    .hero-visual {
      position: absolute;
      right: 20px;
      bottom: -8px;
      width: 43%;
      max-width: 500px;
      min-width: 360px;
      pointer-events: none;
    }

    .hero-orbit {
      position: absolute;
      width: 480px;
      height: 480px;
      right: -120px;
      bottom: -180px;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,.08);
    }

    .hero-orbit::before,
    .hero-orbit::after {
      content: "";
      position: absolute;
      border-radius: 50%;
      border: 1px solid rgba(64, 186, 216, .18);
    }

    .hero-orbit::before {
      inset: 55px;
    }

    .hero-orbit::after {
      inset: 115px;
    }

    /* Feature top cards */
    .quick-features {
      padding: 22px 0 58px;
    }

    .quick-card {
      height: 100%;
      background: var(--ai-gray);
      border-radius: var(--ai-radius-md);
      padding: 22px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 150px;
      transition: .2s ease;
      border: 1px solid transparent;
    }

    .quick-card:hover {
      transform: translateY(-4px);
      border-color: rgba(64, 186, 216, .28);
      box-shadow: 0 18px 38px rgba(7, 19, 27, .08);
    }

    .quick-card .material-symbols-rounded {
      font-size: 40px;
      color: var(--ai-primary);
      margin-bottom: 16px;
    }

    .quick-card h3 {
      font-size: 27px;
      font-weight: 900;
      letter-spacing: -1.2px;
      line-height: .95;
      margin-bottom: 6px;
    }

    .quick-card p {
      margin: 0;
      font-size: 14px;
      color: #555b61;
      font-weight: 500;
    }

    /* Intro */
    .ai-intro {
      padding: 20px 0 64px;
    }

    .intro-note {
      background: #fff;
      border-radius: var(--ai-radius-md);
      border: 1px solid rgba(7, 19, 27, .08);
      box-shadow: 0 18px 55px rgba(7, 19, 27, .06);
      padding: 28px;
      height: 100%;
    }

    .intro-note-title {
      display: flex;
      align-items: center;
      gap: 14px;
      font-size: 22px;
      font-weight: 900;
      letter-spacing: -.8px;
      margin-bottom: 12px;
    }

    .intro-note-title .icon-round {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      background: var(--ai-dark);
      color: var(--ai-primary);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: none;
    }

    .intro-note p {
      font-size: 15px;
      line-height: 1.65;
      color: #555b61;
      font-weight: 500;
      margin-bottom: 0;
    }

    /* Detailed feature sections */
    .ai-tools {
      padding: 20px 0 70px;
    }

    .tool-card {
      border-radius: 30px;
      background: var(--ai-gray);
      padding: 34px;
      margin-bottom: 24px;
      position: relative;
      overflow: hidden;
    }

    .tool-card.dark {
      background:
        radial-gradient(circle at 90% 10%, rgba(64, 186, 216, .22), transparent 28%),
        var(--ai-dark-2);
      color: #fff;
    }

    .tool-card.dark p,
    .tool-card.dark li {
      color: rgba(255,255,255,.78);
    }

    .tool-card::after {
      content: "";
      position: absolute;
      right: -60px;
      top: -60px;
      width: 180px;
      height: 180px;
      border-radius: 50%;
      background: rgba(64, 186, 216, .12);
    }

    .tool-number {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      color: var(--ai-primary);
      font-size: 13px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .7px;
      margin-bottom: 15px;
      position: relative;
      z-index: 1;
    }

    .tool-title {
      font-size: clamp(30px, 4vw, 46px);
      font-weight: 900;
      line-height: .95;
      letter-spacing: -1.8px;
      margin-bottom: 16px;
      position: relative;
      z-index: 1;
    }

    .tool-text {
      font-size: 16px;
      line-height: 1.65;
      color: #52585f;
      font-weight: 500;
      max-width: 680px;
      margin-bottom: 22px;
      position: relative;
      z-index: 1;
    }

    .tool-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: grid;
      gap: 12px;
      position: relative;
      z-index: 1;
    }

    .tool-list li {
      display: flex;
      gap: 11px;
      align-items: flex-start;
      font-size: 15px;
      line-height: 1.45;
      color: #3d444b;
      font-weight: 600;
    }

    .tool-list .material-symbols-rounded {
      color: var(--ai-primary);
      font-size: 22px;
      margin-top: 1px;
      flex: none;
    }

    .tool-visual-box {
      background: #fff;
      border-radius: 24px;
      padding: 18px;
      height: 100%;
      min-height: 290px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 1;
      box-shadow: 0 20px 50px rgba(7, 19, 27, .08);
    }

    .tool-card.dark .tool-visual-box {
      background: rgba(255,255,255,.08);
      box-shadow: none;
      border: 1px solid rgba(255,255,255,.08);
    }

    .mock-phone {
      width: 241px;
      height: 330px;
      background: #101820;
      border-radius: 34px;
      padding: 12px;
      box-shadow: 0 24px 45px rgba(0,0,0,.25);
      position: relative;
    }

    .mock-screen {
      width: 100%;
      height: 100%;
      background: #fff;
      border-radius: 24px;
      overflow: hidden;
      padding: 14px;
    }

    .mock-search {
      height: 34px;
      background: #f0f2f4;
      border-radius: 999px;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 0 11px;
      color: #a5abb1;
      font-size: 10px;
      font-weight: 700;
      margin-bottom: 12px;
    }

    .mock-search .material-symbols-rounded {
      font-size: 17px;
      color: var(--ai-primary);
    }

    .mock-photo-area {
      height: 90px;
      border-radius: 18px;
      background:
        linear-gradient(135deg, rgba(64,186,216,.25), rgba(64,186,216,.06)),
        #eef8fb;
      border: 2px dashed rgba(64, 186, 216, .8);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--ai-primary);
      margin-bottom: 12px;
    }

    .mock-photo-area .material-symbols-rounded {
      font-size: 40px;
    }

    .mock-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 9px;
    }

    .mock-product {
      background: #f4f5f6;
      border-radius: 14px;
      padding: 9px;
      min-height: 76px;
    }

    .mock-product-img {
      height: 34px;
      border-radius: 9px;
      background: linear-gradient(135deg, var(--ai-primary), #dff7fc);
      margin-bottom: 7px;
    }

    .mock-line {
      height: 5px;
      border-radius: 99px;
      background: #d3d7da;
      margin-bottom: 5px;
    }

    .mock-line.short {
      width: 60%;
      background: var(--ai-primary);
    }

    .recommendation-demo {
      width: 100%;
      max-width: 390px;
    }

    .rec-card {
      background: #fff;
      border-radius: 20px;
      padding: 14px;
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 14px;
      box-shadow: 0 12px 30px rgba(7,19,27,.07);
    }

    .tool-card.dark .rec-card {
      background: rgba(255,255,255,.09);
      color: #fff;
    }

    .rec-img {
      width: 64px;
      height: 64px;
      border-radius: 16px;
      background: linear-gradient(135deg, var(--ai-primary), #e9fbff);
      flex: none;
    }

    .rec-info {
      flex: 1;
    }

    .rec-line {
      height: 8px;
      border-radius: 99px;
      background: #d7dbde;
      margin-bottom: 8px;
    }

    .tool-card.dark .rec-line {
      background: rgba(255,255,255,.22);
    }

    .rec-line.w70 { width: 70%; }
    .rec-line.w45 { width: 45%; background: var(--ai-primary); }

    .rec-percent {
      min-width: 56px;
      height: 34px;
      border-radius: 999px;
      background: rgba(64, 186, 216, .14);
      color: var(--ai-primary);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 900;
    }

    /* Benefits grid */
    .benefits {
      padding: 10px 0 72px;
    }

    .benefit-item {
      display: flex;
      gap: 17px;
      align-items: flex-start;
      margin-bottom: 34px;
    }

    .benefit-icon {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: var(--ai-dark);
      color: var(--ai-primary);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: none;
    }

    .benefit-icon .material-symbols-rounded {
      font-size: 30px;
    }

    .benefit-item h3 {
      font-size: 25px;
      font-weight: 900;
      line-height: 1;
      letter-spacing: -1px;
      margin-bottom: 7px;
    }

    .benefit-item p {
      font-size: 15px;
      color: #b0b3b8;
      font-weight: 500;
      line-height: 1.45;
      margin: 0;
    }

    /* Process */
    .process {
      padding: 10px 0 76px;
    }

    .process-card {
      background: var(--ai-gray);
      border-radius: 24px;
      padding: 26px;
      height: 100%;
      position: relative;
      overflow: hidden;
    }

    .process-card::before {
      content: attr(data-step);
      position: absolute;
      right: 16px;
      top: 4px;
      font-size: 82px;
      line-height: 1;
      font-weight: 900;
      color: rgba(64, 186, 216, .14);
      letter-spacing: -4px;
    }

    .process-card .material-symbols-rounded {
      width: 54px;
      height: 54px;
      border-radius: 50%;
      background: var(--ai-dark);
      color: var(--ai-primary);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 30px;
      margin-bottom: 18px;
      position: relative;
      z-index: 1;
    }

    .process-card h3 {
      font-size: 24px;
      font-weight: 900;
      letter-spacing: -1px;
      margin-bottom: 9px;
      position: relative;
      z-index: 1;
    }

    .process-card p {
      font-size: 14px;
      line-height: 1.55;
      color: #555b61;
      font-weight: 500;
      margin: 0;
      position: relative;
      z-index: 1;
    }

    /* CTA */
    .ai-cta {
      padding: 10px 0 16px;
    }

    .cta-card {
      background:
        radial-gradient(circle at 82% 20%, rgba(64, 186, 216, .24), transparent 28%),
        var(--ai-dark-2);
      border-radius: var(--ai-radius-lg);
      padding: 48px 42px;
      color: #fff;
      position: relative;
      overflow: hidden;
    }

    .cta-card::after {
      content: "";
      position: absolute;
      width: 260px;
      height: 260px;
      border-radius: 50%;
      right: -80px;
      bottom: -120px;
      border: 1px solid rgba(255,255,255,.09);
      box-shadow: 0 0 0 55px rgba(255,255,255,.025);
    }

    .cta-title {
      font-size: clamp(40px, 5vw, 62px);
      font-weight: 900;
      line-height: .92;
      letter-spacing: -2.5px;
      margin-bottom: 18px;
      max-width: 720px;
      position: relative;
      z-index: 1;
    }

    .cta-text {
      font-size: 17px;
      line-height: 1.55;
      color: rgba(255,255,255,.78);
      font-weight: 500;
      max-width: 680px;
      margin-bottom: 26px;
      position: relative;
      z-index: 1;
    }

    .cta-form {
      display: flex;
      gap: 12px;
      max-width: 610px;
      position: relative;
      z-index: 1;
    }

    .cta-form input {
      min-height: 48px;
      border-radius: 5px;
      border: 1px solid rgba(255,255,255,.16);
      background: rgba(255,255,255,.08);
      color: #fff;
      padding: 0 16px;
      outline: none;
      flex: 1;
      font-size: 14px;
      font-weight: 600;
    }

    .cta-form input::placeholder {
      color: rgba(255,255,255,.5);
    }

    .cta-form input:focus {
      border-color: var(--ai-primary);
    }

    /* SVG */
    .hero-svg {
      width: 100%;
      height: auto;
      display: block;
      filter: drop-shadow(0 30px 35px rgba(0,0,0,.25));
    }

    /* Responsive */
    @media (max-width: 991px) {
      .site-nav {
        display: none;
      }

      .ai-hero-card {
        padding: 42px 28px 45px;
      }

      .hero-visual {
        width: 520px;
        max-width: 92%;
        min-width: 0;
        right: 50%;
        transform: translateX(50%);
        bottom: -42px;
      }

      .section-title {
        letter-spacing: -2px;
      }

      .tool-card {
        padding: 28px;
      }

      .tool-visual-box {
        margin-top: 24px;
      }
    }

    @media (max-width: 767px) {


      .ai-hero {
        padding-top: 24px;
      }

      .ai-hero-card {
        border-radius: 26px;
        padding: 34px 22px 40px;
      }

      .ai-hero-title {
        letter-spacing: -2.2px;
      }

      .ai-hero-text {
        font-size: 15px;
      }

      .hero-actions {
        align-items: stretch;
      }

      .btn-ai,
      .btn-ai-outline {
        width: 100%;
      }

      .section-title {
        font-size: 44px;
        letter-spacing: -1.8px;
      }

      .quick-card h3 {
        font-size: 24px;
      }

      .benefit-item h3 {
        font-size: 22px;
      }

      .cta-card {
        padding: 36px 24px;
        border-radius: 26px;
      }

      .cta-form {
        flex-direction: column;
      }

      .hero-mini-list {
        gap: 12px;
      }
    }

    .hero-svg {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 30px 35px rgba(0,0,0,.25));
  }

  .hero-svg * {
    transform-box: fill-box;
    transform-origin: center;
  }

  .ai-phone {
    animation: aiPhoneFloat 3s ease-in-out infinite;
  }

  .ai-search-dot {
    animation: aiSearchDot 3s ease-in-out infinite;
  }

  .ai-photo-zone {
    animation: aiPhotoGlow 3s ease-in-out infinite;
  }

  .ai-scan-line {
    opacity: 0;
    animation: aiScanLine 3s ease-in-out infinite;
  }

  .ai-lens-ring {
    animation: aiLensPulse 3s ease-in-out infinite;
  }

  .ai-lens-handle {
    animation: aiLensHandle 3s ease-in-out infinite;
  }

  .ai-check {
    stroke-dasharray: 120;
    stroke-dashoffset: 120;
    animation: aiCheckDraw 3s ease-in-out infinite;
  }

  .ai-product-card {
    animation: aiProductCard 3s ease-in-out infinite;
  }

  .ai-product-card-1 {
    animation-delay: .35s;
  }

  .ai-product-card-2 {
    animation-delay: .55s;
  }

  .ai-product-img {
    animation: aiProductImage 3s ease-in-out infinite;
  }

  .ai-product-card-1 .ai-product-img {
    animation-delay: .35s;
  }

  .ai-product-card-2 .ai-product-img {
    animation-delay: .55s;
  }

  .ai-photo-search-card {
    animation: aiSideCardFloat 3s ease-in-out infinite;
  }

  .ai-star-card {
    animation: aiSideCardFloat 3s ease-in-out infinite;
    animation-delay: .25s;
  }

  .ai-star-icon {
    animation: aiStarPulse 3s ease-in-out infinite;
  }

  .ai-rec-card {
    animation: aiRecommendationFloat 3s ease-in-out infinite;
    animation-delay: .45s;
  }

  .ai-orbit-line {
    animation: aiOrbitMove 3s linear infinite;
  }

  .ai-dot {
    animation: aiDotPulse 3s ease-in-out infinite;
  }

  .ai-dot-1 {
    animation-delay: 0s;
  }

  .ai-dot-2 {
    animation-delay: .35s;
  }

  .ai-dot-3 {
    animation-delay: .7s;
  }

  .ai-dot-4 {
    animation-delay: 1.05s;
  }

  @keyframes aiPhoneFloat {
    0%, 100% {
      transform: translateY(0) rotate(-.4deg);
    }

    50% {
      transform: translateY(-8px) rotate(.4deg);
    }
  }

  @keyframes aiSearchDot {
    0%, 100% {
      transform: scale(1);
      opacity: 1;
    }

    35% {
      transform: scale(1.35);
      opacity: .75;
    }

    60% {
      transform: scale(1);
      opacity: 1;
    }
  }

  @keyframes aiPhotoGlow {
    0%, 100% {
      filter: drop-shadow(0 0 0 rgba(64, 186, 216, 0));
    }

    35% {
      filter: drop-shadow(0 0 16px rgba(64, 186, 216, .6));
    }

    65% {
      filter: drop-shadow(0 0 6px rgba(64, 186, 216, .25));
    }
  }

  @keyframes aiScanLine {
    0% {
      opacity: 0;
      transform: translateY(-48px);
    }

    15% {
      opacity: 1;
    }

    48% {
      opacity: 1;
      transform: translateY(48px);
    }

    62%, 100% {
      opacity: 0;
      transform: translateY(48px);
    }
  }

  @keyframes aiLensPulse {
    0%, 100% {
      transform: scale(1);
      filter: drop-shadow(0 0 0 rgba(64, 186, 216, 0));
    }

    32% {
      transform: scale(1.09);
      filter: drop-shadow(0 0 12px rgba(64, 186, 216, .65));
    }

    55% {
      transform: scale(.98);
    }
  }

  @keyframes aiLensHandle {
    0%, 100% {
      transform: rotate(0deg) scale(1);
    }

    32% {
      transform: rotate(3deg) scale(1.04);
    }

    55% {
      transform: rotate(0deg) scale(1);
    }
  }

  @keyframes aiCheckDraw {
    0%, 18% {
      opacity: 0;
      stroke-dashoffset: 120;
    }

    38% {
      opacity: 1;
      stroke-dashoffset: 0;
    }

    78%, 100% {
      opacity: 1;
      stroke-dashoffset: 0;
    }
  }

  @keyframes aiProductCard {
    0%, 100% {
      transform: translateY(0) scale(1);
    }

    42% {
      transform: translateY(-5px) scale(1.035);
    }

    65% {
      transform: translateY(0) scale(1);
    }
  }

  @keyframes aiProductImage {
    0%, 100% {
      opacity: .9;
      filter: drop-shadow(0 0 0 rgba(64, 186, 216, 0));
    }

    42% {
      opacity: 1;
      filter: drop-shadow(0 0 12px rgba(64, 186, 216, .45));
    }
  }

  @keyframes aiSideCardFloat {
    0%, 100% {
      transform: translateY(0);
    }

    50% {
      transform: translateY(-7px);
    }
  }

  @keyframes aiStarPulse {
    0%, 100% {
      transform: scale(1) rotate(0deg);
      filter: drop-shadow(0 0 0 rgba(64, 186, 216, 0));
    }

    42% {
      transform: scale(1.13) rotate(8deg);
      filter: drop-shadow(0 0 12px rgba(64, 186, 216, .7));
    }
  }

  @keyframes aiRecommendationFloat {
    0%, 100% {
      transform: translateY(0) scale(1);
    }

    45% {
      transform: translateY(-6px) scale(1.03);
    }
  }

  @keyframes aiOrbitMove {
    from {
      stroke-dashoffset: 0;
    }

    to {
      stroke-dashoffset: -48;
    }
  }

  @keyframes aiDotPulse {
    0%, 100% {
      transform: scale(1);
      opacity: .9;
    }

    45% {
      transform: scale(1.35);
      opacity: 1;
      filter: drop-shadow(0 0 10px rgba(64, 186, 216, .8));
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .hero-svg *,
    .ai-phone,
    .ai-search-dot,
    .ai-photo-zone,
    .ai-scan-line,
    .ai-lens-ring,
    .ai-lens-handle,
    .ai-check,
    .ai-product-card,
    .ai-product-img,
    .ai-photo-search-card,
    .ai-star-card,
    .ai-star-icon,
    .ai-rec-card,
    .ai-orbit-line,
    .ai-dot {
      animation: none !important;
    }
  }