/* roulang page: index */
:root {
      --ink: #182126;
      --ink-soft: #536169;
      --muted: #7c888d;
      --paper: #f7f8f5;
      --white: #ffffff;
      --line: #dfe5e4;
      --line-dark: #354247;
      --cyan: #1db7a6;
      --cyan-deep: #087f78;
      --orange: #ed7951;
      --orange-soft: #fff0e9;
      --dark: #172126;
      --dark-2: #202e34;
      --radius-sm: 8px;
      --radius-md: 14px;
      --radius-lg: 22px;
      --shadow-sm: 0 8px 26px rgba(24, 33, 38, .07);
      --shadow-md: 0 18px 48px rgba(24, 33, 38, .12);
      --container: 1220px;
      --header-height: 118px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--ink);
      background: var(--paper);
      font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", Arial, sans-serif;
      font-size: 16px;
      line-height: 1.8;
      -webkit-font-smoothing: antialiased;
    }
    body.menu-open { overflow: hidden; }
    a { color: inherit; text-decoration: none; }
    img { display: block; max-width: 100%; }
    button, input, textarea, select { font: inherit; }
    button { cursor: pointer; }
    p, h1, h2, h3, ul, ol { margin-top: 0; }
    h1, h2, h3 { line-height: 1.25; letter-spacing: 0; }
    h1 { font-size: clamp(2.8rem, 5vw, 5.6rem); }
    h2 { font-size: clamp(2rem, 3.3vw, 3.4rem); }
    h3 { font-size: 1.25rem; }
    :focus-visible {
      outline: 3px solid rgba(237, 121, 81, .72);
      outline-offset: 4px;
    }
    .container {
      width: min(var(--container), calc(100% - 48px));
      margin: 0 auto;
    }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      margin-bottom: 18px;
      color: var(--cyan-deep);
      font-size: .74rem;
      font-weight: 800;
      letter-spacing: .12em;
      text-transform: uppercase;
    }
    .eyebrow::before {
      width: 24px;
      height: 2px;
      content: "";
      background: var(--orange);
    }
    .section-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 28px;
      margin-bottom: 48px;
    }
    .section-head h2 { max-width: 680px; margin-bottom: 0; }
    .section-intro {
      max-width: 510px;
      margin-bottom: 0;
      color: var(--ink-soft);
    }
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 48px;
      padding: 11px 20px;
      border: 1px solid transparent;
      border-radius: var(--radius-sm);
      font-weight: 700;
      line-height: 1.2;
      transition: .25s ease;
    }
    .btn::after { content: "↗"; font-size: 1rem; transition: transform .25s ease; }
    .btn:hover::after { transform: translate(3px, -3px); }
    .btn-primary { color: #fff; background: var(--cyan-deep); box-shadow: 0 8px 18px rgba(8, 127, 120, .18); }
    .btn-primary:hover { background: #075f5a; transform: translateY(-2px); box-shadow: 0 12px 24px rgba(8, 127, 120, .25); }
    .btn-primary:active { transform: translateY(0); }
    .btn-secondary { color: var(--ink); background: rgba(255,255,255,.72); border-color: rgba(24,33,38,.2); }
    .btn-secondary:hover { color: var(--cyan-deep); border-color: var(--cyan); background: #fff; }
    .btn-dark { color: #fff; background: var(--dark-2); }
    .btn-dark:hover { background: var(--cyan-deep); transform: translateY(-2px); }
    .btn:disabled { cursor: not-allowed; opacity: .48; transform: none; }
    .tag, .status {
      display: inline-flex;
      align-items: center;
      min-height: 28px;
      padding: 4px 10px;
      border-radius: 5px;
      color: var(--cyan-deep);
      background: #e5f5f1;
      font-size: .74rem;
      font-weight: 800;
      line-height: 1.2;
    }
    .status { gap: 7px; color: #3a6d53; background: #e8f4ea; }
    .status::before {
      width: 7px;
      height: 7px;
      content: "";
      border-radius: 50%;
      background: #39a566;
    }

    .site-header {
      position: fixed;
      z-index: 50;
      top: 0;
      right: 0;
      left: 0;
      background: rgba(247,248,245,.94);
      border-bottom: 1px solid rgba(24,33,38,.09);
      backdrop-filter: blur(18px);
    }
    .nav-main {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 72px;
      gap: 28px;
    }
    .brand {
      display: inline-flex;
      align-items: center;
      gap: 11px;
      flex-shrink: 0;
      font-size: 1.16rem;
      font-weight: 900;
      letter-spacing: .02em;
    }
    .brand-mark {
      display: grid;
      width: 35px;
      height: 35px;
      place-items: center;
      color: #fff;
      background: var(--dark);
      border-radius: 9px;
      font-size: .9rem;
      font-weight: 900;
    }
    .main-links {
      display: flex;
      align-items: center;
      gap: 5px;
      margin-left: auto;
    }
    .main-links a, .quick-links a {
      position: relative;
      display: inline-flex;
      align-items: center;
      min-height: 44px;
      padding: 8px 13px;
      color: var(--ink-soft);
      font-size: .9rem;
      font-weight: 700;
      transition: color .2s ease;
    }
    .main-links a::after, .quick-links a::after {
      position: absolute;
      right: 13px;
      bottom: 3px;
      left: 13px;
      height: 2px;
      content: "";
      background: var(--orange);
      transform: scaleX(0);
      transition: transform .2s ease;
    }
    .main-links a:hover, .main-links a.active, .quick-links a:hover, .quick-links a.active { color: var(--ink); }
    .main-links a:hover::after, .main-links a.active::after, .quick-links a:hover::after, .quick-links a.active::after { transform: scaleX(1); }
    .nav-cta { white-space: nowrap; }
    .quick-bar {
      border-top: 1px solid rgba(24,33,38,.07);
      background: rgba(255,255,255,.55);
    }
    .quick-links {
      display: flex;
      align-items: center;
      min-height: 45px;
      gap: 5px;
      overflow-x: auto;
      scrollbar-width: none;
    }
    .quick-links::-webkit-scrollbar { display: none; }
    .quick-links a { min-height: 40px; padding: 5px 12px; font-size: .78rem; white-space: nowrap; }
    .quick-links a::after { right: 12px; left: 12px; bottom: 0; }
    .menu-toggle {
      display: none;
      width: 46px;
      height: 46px;
      padding: 0;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--white);
    }
    .menu-toggle span, .menu-toggle::before, .menu-toggle::after {
      display: block;
      width: 20px;
      height: 2px;
      margin: 5px auto;
      content: "";
      background: var(--ink);
      transition: .2s ease;
    }

    main { overflow: hidden; }
    .hero {
      position: relative;
      min-height: 740px;
      padding-top: var(--header-height);
      color: #fff;
      background: var(--dark);
    }
    .hero-slides, .hero-slide { position: absolute; inset: 0; }
    .hero-slide { visibility: hidden; opacity: 0; transition: opacity .7s ease, visibility .7s ease; }
    .hero-slide.is-active { visibility: visible; opacity: 1; }
    .hero-slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: .62;
    }
    .hero-slide::after {
      position: absolute;
      inset: 0;
      content: "";
      background: linear-gradient(90deg, rgba(15,24,28,.91) 0%, rgba(15,24,28,.6) 45%, rgba(15,24,28,.13) 100%);
    }
    .hero-content {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      min-height: 740px;
      padding-top: 38px;
      padding-bottom: 120px;
    }
    .hero-copy { max-width: 725px; }
    .hero-copy .eyebrow { color: #9be2d8; }
    .hero-copy h1 { margin: 0 0 25px; }
    .hero-copy p { max-width: 690px; margin-bottom: 31px; color: rgba(255,255,255,.81); font-size: 1.06rem; line-height: 1.9; }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 13px; }
    .hero .btn-secondary { color: #fff; border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.08); }
    .hero .btn-secondary:hover { color: #fff; border-color: var(--orange); background: rgba(237,121,81,.16); }
    .hero-status {
      display: flex;
      align-items: center;
      gap: 22px;
      margin-top: 42px;
      color: rgba(255,255,255,.68);
      font-size: .82rem;
    }
    .hero-status strong { color: #fff; font-size: 1.35rem; }
    .hero-controls {
      position: absolute;
      z-index: 3;
      right: max(24px, calc((100% - var(--container)) / 2));
      bottom: 50px;
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .hero-arrow {
      width: 44px;
      height: 44px;
      color: #fff;
      border: 1px solid rgba(255,255,255,.35);
      border-radius: 7px;
      background: rgba(255,255,255,.08);
      transition: .2s ease;
    }
    .hero-arrow:hover { background: var(--cyan-deep); border-color: var(--cyan); }
    .hero-dots { display: flex; gap: 7px; margin: 0 5px; }
    .hero-dot {
      width: 32px;
      height: 4px;
      padding: 0;
      border: 0;
      background: rgba(255,255,255,.35);
      transition: .2s ease;
    }
    .hero-dot.is-active { background: var(--orange); }

    section { position: relative; padding: 120px 0; scroll-margin-top: 124px; }
    .intro-section { background: #fff; }
    .intro-grid {
      display: grid;
      grid-template-columns: .85fr 1.15fr;
      gap: 70px;
      align-items: center;
    }
    .intro-title h2 { margin-bottom: 25px; }
    .intro-title p { max-width: 480px; color: var(--ink-soft); }
    .intro-visual { position: relative; min-height: 445px; }
    .intro-visual img {
      width: 82%;
      height: 445px;
      object-fit: cover;
      border-radius: var(--radius-lg);
    }
    .spec-panel {
      position: absolute;
      right: 0;
      bottom: 25px;
      width: 280px;
      padding: 22px;
      color: #fff;
      background: var(--dark);
      border-left: 4px solid var(--orange);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-md);
    }
    .spec-panel small { display: block; margin-bottom: 9px; color: #95aaa9; }
    .spec-panel strong { display: block; margin-bottom: 15px; font-size: 1.13rem; }
    .spec-list { padding: 0; margin: 0; list-style: none; }
    .spec-list li {
      display: flex;
      justify-content: space-between;
      padding: 8px 0;
      color: #b9c8c7;
      border-top: 1px solid var(--line-dark);
      font-size: .78rem;
    }
    .spec-list b { color: #fff; font-weight: 700; }
    .intro-bottom {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 30px;
    }

    .features-section { background: var(--paper); }
    .feature-layout {
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      gap: 18px;
    }
    .feature-card {
      position: relative;
      min-height: 250px;
      padding: 30px;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      background: #fff;
      transition: .25s ease;
    }
    .feature-card:hover { border-color: var(--cyan); box-shadow: var(--shadow-sm); transform: translateY(-4px); }
    .feature-card.primary {
      grid-row: span 2;
      min-height: 518px;
      color: #fff;
      background: var(--dark);
      border-color: var(--dark);
    }
    .feature-card.primary::after {
      position: absolute;
      right: -52px;
      bottom: -70px;
      width: 230px;
      height: 230px;
      content: "";
      border: 1px solid rgba(29,183,166,.4);
      border-radius: 50%;
      box-shadow: 0 0 0 22px rgba(29,183,166,.08), 0 0 0 44px rgba(29,183,166,.05);
    }
    .feature-num { color: var(--orange); font-size: .78rem; font-weight: 900; letter-spacing: .1em; }
    .feature-card h3 { margin: 60px 0 14px; font-size: 1.55rem; }
    .feature-card:not(.primary) h3 { margin-top: 30px; }
    .feature-card p { max-width: 380px; margin-bottom: 0; color: var(--ink-soft); font-size: .92rem; }
    .feature-card.primary p { color: #b9c8c7; }
    .feature-icon {
      display: grid;
      width: 44px;
      height: 44px;
      place-items: center;
      color: var(--cyan-deep);
      background: #e2f6f2;
      border-radius: 9px;
      font-size: 1.25rem;
      font-weight: 900;
    }
    .feature-card.primary .feature-icon { color: #fff; background: var(--cyan-deep); }

    .scenes-section { background: #fff; }
    .scene-track {
      display: grid;
      grid-template-columns: 1.3fr .7fr;
      min-height: 440px;
      overflow: hidden;
      border-radius: var(--radius-lg);
      background: var(--dark);
    }
    .scene-image { position: relative; min-height: 440px; }
    .scene-image img { width: 100%; height: 100%; object-fit: cover; opacity: .72; }
    .scene-caption {
      position: absolute;
      right: 32px;
      bottom: 30px;
      left: 32px;
      color: #fff;
    }
    .scene-caption h3 { margin-bottom: 8px; font-size: 1.8rem; }
    .scene-caption p { max-width: 480px; margin-bottom: 0; color: rgba(255,255,255,.75); }
    .scene-list { padding: 22px; }
    .scene-item {
      width: 100%;
      padding: 21px 17px;
      color: #b8c4c5;
      text-align: left;
      border: 0;
      border-bottom: 1px solid var(--line-dark);
      background: transparent;
      transition: .2s ease;
    }
    .scene-item:last-child { border-bottom: 0; }
    .scene-item:hover, .scene-item.is-active { color: #fff; background: #25383e; }
    .scene-item strong { display: block; margin-bottom: 5px; color: inherit; font-size: 1rem; }
    .scene-item span { display: block; font-size: .79rem; line-height: 1.6; }

    .demo-section { background: var(--paper); }
    .demo-stage {
      display: grid;
      grid-template-columns: .72fr 1.28fr;
      gap: 58px;
      align-items: center;
    }
    .demo-copy h2 { margin-bottom: 22px; }
    .demo-copy > p { color: var(--ink-soft); }
    .demo-steps { margin: 30px 0 0; padding: 0; list-style: none; }
    .demo-steps li {
      display: grid;
      grid-template-columns: 34px 1fr;
      gap: 13px;
      padding: 15px 0;
      border-top: 1px solid var(--line);
    }
    .demo-steps b {
      display: grid;
      width: 28px;
      height: 28px;
      place-items: center;
      color: #fff;
      background: var(--cyan-deep);
      border-radius: 50%;
      font-size: .78rem;
    }
    .demo-steps strong { display: block; margin-bottom: 3px; }
    .demo-steps span { color: var(--ink-soft); font-size: .83rem; }
    .device {
      position: relative;
      min-height: 410px;
      padding: 28px;
      border: 12px solid #303d41;
      border-radius: 26px;
      background: #10191d;
      box-shadow: 0 24px 0 #d8dddd, var(--shadow-md);
    }
    .device-top { display: flex; justify-content: space-between; margin-bottom: 18px; color: #86a19e; font-size: .75rem; }
    .device-screen {
      min-height: 325px;
      padding: 23px;
      color: #e9f5f1;
      background: #203238;
      border: 1px solid #3d575a;
      border-radius: 12px;
    }
    .screen-row { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
    .screen-row h3 { margin: 0; font-size: 1.1rem; }
    .screen-time { color: #a2bbb7; font-size: .75rem; }
    .screen-map {
      position: relative;
      height: 125px;
      margin: 21px 0 16px;
      overflow: hidden;
      border-radius: 8px;
      background: #30484b;
    }
    .screen-map::before, .screen-map::after {
      position: absolute;
      content: "";
      border: 2px solid rgba(155,225,211,.7);
      transform: rotate(27deg);
    }
    .screen-map::before { top: 36px; right: 10%; width: 74%; height: 42px; }
    .screen-map::after { bottom: 18px; left: 9%; width: 54%; height: 25px; border-color: rgba(237,121,81,.8); }
    .map-point { position: absolute; z-index: 2; top: 47%; left: 46%; width: 12px; height: 12px; background: var(--orange); border: 3px solid #fff; border-radius: 50%; }
    .screen-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .screen-card { padding: 11px; color: #b6cdca; background: #2c4448; border-radius: 6px; font-size: .7rem; }
    .screen-card strong { display: block; margin-top: 6px; color: #fff; font-size: .8rem; }

    .products-section { background: #fff; }
    .product-grid { display: grid; grid-template-columns: 1.15fr .85fr .85fr; gap: 18px; align-items: stretch; }
    .product-card {
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      background: var(--white);
      transition: .25s ease;
    }
    .product-card:first-child { border-top: 4px solid var(--cyan); }
    .product-card:nth-child(2) { margin-top: 28px; border-top: 4px solid var(--orange); }
    .product-card:nth-child(3) { margin-top: 56px; border-top: 4px solid var(--dark); }
    .product-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-5px); }
    .product-card img { width: 100%; height: 190px; object-fit: cover; }
    .product-content { display: flex; flex: 1; flex-direction: column; padding: 25px; }
    .product-content h3 { margin: 18px 0 10px; font-size: 1.4rem; }
    .product-content p { color: var(--ink-soft); font-size: .88rem; }
    .product-meta { display: flex; flex-wrap: wrap; gap: 7px; margin: 7px 0 22px; }
    .product-meta span { color: var(--muted); font-size: .73rem; }
    .product-content .btn { align-self: flex-start; margin-top: auto; }

    .case-section { color: #fff; background: var(--dark); }
    .case-section .eyebrow { color: #9be2d8; }
    .case-section .section-intro { color: #b6c6c5; }
    .case-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; align-items: start; }
    .case-title h2 { margin-bottom: 28px; }
    .case-title p { max-width: 440px; color: #b6c6c5; }
    .case-number { margin-top: 62px; padding-top: 20px; border-top: 1px solid var(--line-dark); }
    .case-number strong { display: block; color: var(--orange); font-size: 4rem; line-height: 1; }
    .case-number span { color: #9aacab; font-size: .82rem; }
    .case-process { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
    .case-step {
      min-height: 270px;
      padding: 24px 20px;
      border: 1px solid var(--line-dark);
      background: #1d2b30;
    }
    .case-step:nth-child(2) { margin-top: 32px; background: #22383b; }
    .case-step:nth-child(3) { margin-top: 64px; }
    .case-step b { color: var(--orange); font-size: .8rem; }
    .case-step h3 { margin: 65px 0 13px; font-size: 1.1rem; }
    .case-step p { color: #aec1bf; font-size: .82rem; }

    .stories-section { background: var(--paper); }
    .story-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 20px; }
    .story-feature, .story-small {
      position: relative;
      min-height: 340px;
      overflow: hidden;
      border-radius: var(--radius-md);
      background: var(--dark);
    }
    .story-feature img, .story-small img { width: 100%; height: 100%; object-fit: cover; opacity: .64; }
    .story-overlay {
      position: absolute;
      right: 27px;
      bottom: 25px;
      left: 27px;
      color: #fff;
    }
    .story-overlay blockquote { margin: 15px 0 13px; font-size: 1.35rem; font-weight: 700; line-height: 1.5; }
    .story-overlay p { margin: 0; color: rgba(255,255,255,.72); font-size: .84rem; }
    .story-side { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
    .story-small { min-height: 340px; }
    .story-small .story-overlay blockquote { font-size: 1rem; }
    .story-small:first-child { background: var(--cyan-deep); }
    .story-small:last-child { background: var(--orange); }

    .stats-section { padding: 72px 0; background: #e8efeb; }
    .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
    .stat { padding: 10px 28px; border-right: 1px solid #c9d7d3; }
    .stat:last-child { border-right: 0; }
    .stat strong { display: block; margin-bottom: 7px; color: var(--dark); font-size: 2.4rem; line-height: 1.1; }
    .stat strong span { color: var(--cyan-deep); font-size: 1.3rem; }
    .stat p { margin: 0; color: var(--ink-soft); font-size: .8rem; }

    .reviews-section { background: #fff; }
    .review-wall { display: grid; grid-template-columns: 1.1fr .9fr .85fr; gap: 18px; align-items: start; }
    .review {
      padding: 30px;
      border: 1px solid var(--line);
      background: var(--paper);
      border-radius: var(--radius-md);
    }
    .review.large { min-height: 320px; color: #fff; background: var(--dark); border-color: var(--dark); }
    .review.offset { margin-top: 48px; background: #eef7f4; }
    .review-mark { color: var(--orange); font-size: 2.6rem; line-height: 1; }
    .review blockquote { margin: 20px 0 32px; font-size: 1.1rem; font-weight: 700; line-height: 1.7; }
    .review.large blockquote { font-size: 1.5rem; }
    .review small { color: var(--muted); }
    .review.large small { color: #9eb2b0; }
    .review .tag { margin-top: 25px; }

    .trust-section { background: var(--paper); }
    .trust-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; align-items: center; }
    .trust-layout h2 { margin-bottom: 22px; }
    .trust-layout > div > p { color: var(--ink-soft); }
    .trust-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .trust-item {
      padding: 23px;
      border: 1px solid var(--line);
      background: #fff;
      border-radius: var(--radius-sm);
    }
    .trust-item strong { display: block; margin-bottom: 7px; }
    .trust-item p { margin: 0; color: var(--ink-soft); font-size: .82rem; }
    .trust-process {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 26px;
    }
    .trust-process span {
      padding: 8px 12px;
      color: var(--cyan-deep);
      background: #e2f4f0;
      border-radius: 5px;
      font-size: .78rem;
      font-weight: 700;
    }

    .news-section { background: #fff; }
    .news-list { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; }
    .news-item { padding: 26px 0; border-top: 3px solid var(--dark); }
    .news-item:nth-child(2) { border-color: var(--cyan); }
    .news-item:nth-child(3) { border-color: var(--orange); }
    .news-meta { display: flex; justify-content: space-between; gap: 15px; margin-bottom: 25px; color: var(--muted); font-size: .76rem; }
    .news-item h3 { margin-bottom: 13px; font-size: 1.25rem; }
    .news-item p { margin-bottom: 20px; color: var(--ink-soft); font-size: .86rem; line-height: 1.8; }
    .text-link { display: inline-flex; gap: 8px; color: var(--cyan-deep); font-size: .84rem; font-weight: 800; }
    .text-link::after { content: "→"; transition: transform .2s ease; }
    .text-link:hover::after { transform: translateX(4px); }

    .faq-section { background: var(--paper); }
    .faq-layout { display: grid; grid-template-columns: .75fr 1.25fr; gap: 90px; }
    .faq-layout h2 { margin-bottom: 20px; }
    .faq-layout > div > p { color: var(--ink-soft); }
    .faq-list { border-top: 1px solid var(--line); }
    .faq-item { border-bottom: 1px solid var(--line); }
    .faq-question {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      width: 100%;
      min-height: 68px;
      padding: 16px 0;
      color: var(--ink);
      text-align: left;
      border: 0;
      background: transparent;
      font-weight: 800;
    }
    .faq-question span:last-child {
      display: grid;
      width: 28px;
      height: 28px;
      place-items: center;
      flex: 0 0 auto;
      color: var(--cyan-deep);
      border: 1px solid var(--cyan);
      border-radius: 50%;
      font-size: 1.2rem;
      line-height: 1;
      transition: transform .2s ease;
    }
    .faq-item.is-open .faq-question span:last-child { transform: rotate(45deg); }
    .faq-answer { display: none; padding: 0 48px 22px 0; color: var(--ink-soft); font-size: .88rem; }
    .faq-item.is-open .faq-answer { display: block; }

    .contact-section { color: #fff; background: var(--dark); }
    .contact-layout { display: grid; grid-template-columns: .86fr 1.14fr; gap: 90px; align-items: start; }
    .contact-layout h2 { margin-bottom: 25px; }
    .contact-layout .section-intro { color: #b6c6c5; }
    .contact-details { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 38px; }
    .contact-detail { padding-top: 14px; border-top: 1px solid var(--line-dark); }
    .contact-detail small { display: block; margin-bottom: 5px; color: #88a09d; }
    .contact-detail strong { font-size: .98rem; }
    .contact-form {
      padding: 32px;
      color: var(--ink);
      background: #fff;
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-md);
    }
    .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }
    .field { display: flex; flex-direction: column; gap: 7px; }
    .field.full { grid-column: 1 / -1; }
    .field label { font-size: .8rem; font-weight: 800; }
    .field input, .field textarea, .field select {
      width: 100%;
      padding: 12px 13px;
      color: var(--ink);
      border: 1px solid var(--line);
      border-radius: 6px;
      outline: none;
      background: #fbfcfa;
      transition: .2s ease;
    }
    .field textarea { min-height: 110px; resize: vertical; }
    .field input::placeholder, .field textarea::placeholder { color: #a2adae; }
    .field input:focus, .field textarea:focus, .field select:focus { border-color: var(--cyan); background: #fff; box-shadow: 0 0 0 3px rgba(29,183,166,.12); }
    .field.has-error input, .field.has-error textarea, .field.has-error select { border-color: #dc624d; }
    .error-message { display: none; color: #c45142; font-size: .73rem; }
    .field.has-error .error-message { display: block; }
    .form-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 22px; }
    .form-note { color: var(--muted); font-size: .73rem; }
    .form-result { display: none; margin-top: 14px; padding: 10px 13px; color: #317150; background: #eaf7ec; border-radius: 6px; font-size: .82rem; }
    .form-result.is-visible { display: block; }

    .site-footer { color: #b5c2c1; background: #10191d; }
    .footer-top { display: grid; grid-template-columns: 1.1fr .9fr .9fr 1.2fr; gap: 42px; padding: 68px 0 55px; }
    .footer-brand { color: #fff; margin-bottom: 16px; }
    .footer-top p { max-width: 280px; margin: 0; color: #8ea09f; font-size: .82rem; }
    .footer-col h3 { margin: 0 0 15px; color: #fff; font-size: .88rem; }
    .footer-col a { display: block; width: fit-content; padding: 3px 0; color: #9aaead; font-size: .8rem; }
    .footer-col a:hover { color: #9be2d8; }
    .footer-contact p { margin: 0 0 8px; color: #9aaead; font-size: .8rem; }
    .footer-bottom {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      padding: 19px 0;
      border-top: 1px solid #2a393d;
      color: #758886;
      font-size: .72rem;
    }

    @media (max-width: 1024px) {
      :root { --header-height: 118px; }
      .main-links { gap: 0; }
      .main-links a { padding: 8px 8px; font-size: .82rem; }
      .container { width: min(var(--container), calc(100% - 40px)); }
      .intro-grid, .demo-stage, .case-grid, .trust-layout, .faq-layout, .contact-layout { gap: 42px; }
      .feature-layout { grid-template-columns: 1fr 1fr; }
      .feature-card.primary { grid-row: auto; min-height: 350px; }
      .feature-card { min-height: 250px; }
      .feature-card.primary h3 { margin-top: 30px; }
      .product-grid { grid-template-columns: repeat(3, 1fr); }
      .product-card:nth-child(2), .product-card:nth-child(3) { margin-top: 0; }
      .footer-top { grid-template-columns: 1fr 1fr; }
    }

    @media (max-width: 768px) {
      :root { --header-height: 72px; }
      .site-header { background: rgba(247,248,245,.98); }
      .nav-main { min-height: 72px; }
      .main-links {
        position: fixed;
        top: 72px;
        right: 0;
        left: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        padding: 10px 20px 20px;
        background: var(--paper);
        border-bottom: 1px solid var(--line);
        box-shadow: var(--shadow-md);
      }
      .main-links.is-open { display: flex; }
      .main-links a { justify-content: space-between; min-height: 48px; padding: 8px 4px; }
      .main-links a::after { right: 4px; left: 4px; }
      .nav-cta { display: none; }
      .menu-toggle { display: block; }
      .quick-bar { display: none; }
      section { padding: 82px 0; scroll-margin-top: 78px; }
      .hero { min-height: 680px; padding-top: 72px; }
      .hero-content { min-height: 680px; padding-bottom: 115px; }
      .hero-copy h1 { font-size: clamp(2.55rem, 11vw, 4rem); }
      .hero-copy p { font-size: .95rem; }
      .hero-controls { right: 20px; bottom: 30px; }
      .section-head { display: block; margin-bottom: 33px; }
      .section-intro { margin-top: 19px; }
      .intro-grid, .demo-stage, .case-grid, .trust-layout, .faq-layout, .contact-layout { grid-template-columns: 1fr; }
      .intro-visual { min-height: 365px; }
      .intro-visual img { height: 365px; }
      .feature-layout { grid-template-columns: 1fr; }
      .feature-card, .feature-card.primary { min-height: auto; }
      .feature-card.primary { min-height: 320px; }
      .scene-track { grid-template-columns: 1fr; }
      .scene-image { min-height: 350px; }
      .scene-list { display: grid; grid-template-columns: 1fr 1fr; padding: 12px; }
      .scene-item { padding: 16px 12px; }
      .device { min-height: 350px; }
      .device-screen { min-height: 275px; }
      .product-grid { grid-template-columns: 1fr; }
      .product-card img { height: 210px; }
      .case-process { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
      .case-step { min-height: 240px; padding: 18px 13px; }
      .case-step:nth-child(2), .case-step:nth-child(3) { margin-top: 20px; }
      .case-step h3 { margin-top: 45px; font-size: .95rem; }
      .story-grid { grid-template-columns: 1fr; }
      .story-side { min-height: 260px; }
      .story-small { min-height: 260px; }
      .stats-grid { grid-template-columns: 1fr 1fr; gap: 22px 0; }
      .stat:nth-child(2) { border-right: 0; }
      .stat:nth-child(3), .stat:nth-child(4) { padding-top: 22px; border-top: 1px solid #c9d7d3; }
      .review-wall { grid-template-columns: 1fr 1fr; }
      .review.large { grid-column: 1 / -1; min-height: auto; }
      .review.offset { margin-top: 0; }
      .news-list { grid-template-columns: 1fr; }
      .contact-layout { gap: 40px; }
      .footer-top { gap: 30px; }
    }

    @media (max-width: 520px) {
      .container { width: min(var(--container), calc(100% - 32px)); }
      .hero-copy p { line-height: 1.75; }
      .hero-status { gap: 14px; margin-top: 28px; }
      .hero-status strong { font-size: 1.1rem; }
      .intro-visual { min-height: 300px; }
      .intro-visual img { width: 90%; height: 300px; }
      .spec-panel { right: 0; bottom: 15px; width: 230px; padding: 15px; }
      .spec-panel strong { font-size: .92rem; }
      .scene-list { grid-template-columns: 1fr; }
      .scene-image { min-height: 300px; }
      .demo-stage { gap: 30px; }
      .device { padding: 17px; border-width: 8px; border-radius: 18px; }
      .device-screen { padding: 15px; }
      .screen-cards { grid-template-columns: 1fr; }
      .screen-card { padding: 7px; }
      .screen-card:nth-child(n+2) { display: none; }
      .case-process { grid-template-columns: 1fr; }
      .case-step, .case-step:nth-child(2), .case-step:nth-child(3) { min-height: auto; margin-top: 0; }
      .case-step h3 { margin: 25px 0 8px; }
      .story-side { grid-template-columns: 1fr; }
      .story-small { min-height: 220px; }
      .stats-grid { grid-template-columns: 1fr 1fr; }
      .stat { padding: 8px 14px; }
      .stat strong { font-size: 1.8rem; }
      .review-wall { grid-template-columns: 1fr; }
      .review.large { grid-column: auto; }
      .trust-list { grid-template-columns: 1fr; }
      .form-grid { grid-template-columns: 1fr; }
      .field.full { grid-column: auto; }
      .form-footer { display: block; }
      .form-footer .btn { width: 100%; margin-bottom: 12px; }
      .footer-top { grid-template-columns: 1fr 1fr; }
      .footer-top > :first-child, .footer-contact { grid-column: 1 / -1; }
      .footer-bottom { display: block; }
      .footer-bottom span { display: block; margin-top: 7px; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
    }