* {
          box-sizing: border-box;
          margin: 0;
          padding: 0;
        }
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overscroll-behavior-x: none;
}
.export-wrapper {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-family-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  display: block;
  width: 100%;
  max-width: 100%;
}
.no-user-select {
  user-select: none;
}
#app {
          position: relative;
          min-height: 100vh;
          overflow-x: hidden;
        }
        .container {
          width: 100%;
          max-width: 1240px;
          margin: 0 auto;
          padding: 0 32px;
        }
        .section {
          padding: 120px 0;
          position: relative;
          z-index: 1;
        }
        .section-sm {
          padding: 64px 0;
          position: relative;
          z-index: 1;
        }
        a {
          text-decoration: none;
          color: inherit;
        }
        img {
          max-width: 100%;
          display: block;
        }
        h1,
        h2,
        h3,
        h4 {
          color: var(--foreground);
          font-weight: 700;
          margin: 0;
        }
        h1 {
          font-size: 64px;
          line-height: 1.1;
          letter-spacing: -0.03em;
        }
        h2 {
          font-size: 44px;
          line-height: 1.15;
          letter-spacing: -0.02em;
        }
        h3 {
          font-size: 24px;
          line-height: 1.3;
        }
        h4 {
          font-size: 20px;
          line-height: 1.4;
        }
        p {
          color: var(--muted-foreground);
          margin: 0;
        }

/* Ambient Backgrounds */
        #ambient-bg {
          position: absolute;
          inset: 0;
          pointer-events: none;
          z-index: 0;
          overflow: hidden;
        }
        #ambient-bg::before {
          content: "";
          position: absolute;
          inset: 0;
          background-image:
            linear-gradient(
              to right,
              rgba(255, 255, 255, 0.03) 1px,
              transparent 1px
            ),
            linear-gradient(
              to bottom,
              rgba(255, 255, 255, 0.03) 1px,
              transparent 1px
            );
          background-size: 64px 64px;
          -webkit-mask-image: radial-gradient(
            ellipse at top,
            black,
            transparent 70%
          );
          mask-image: radial-gradient(ellipse at top, black, transparent 70%);
        }
        .ambient-glow {
          position: absolute;
          top: -200px;
          left: 50%;
          transform: translateX(-50%);
          width: 1000px;
          height: 800px;
          background: radial-gradient(
            ellipse,
            rgba(52, 215, 255, 0.08) 0%,
            transparent 60%
          );
          filter: blur(80px);
          pointer-events: none;
        }

        /* Buttons */
        .btn {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 10px;
          height: 48px;
          padding: 0 24px;
          border-radius: var(--radius-md);
          font-size: 15px;
          font-weight: 600;
          white-space: nowrap;
          transition: all 0.2s ease;
          cursor: pointer;
        }
        .btn-primary {
          background: var(--primary);
          color: var(--primary-foreground);
          box-shadow:
            0 4px 12px rgba(0, 0, 0, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.2);
          border: none;
        }
        .btn-secondary {
          background: rgba(255, 255, 255, 0.05);
          color: var(--foreground);
          border: 1px solid rgba(255, 255, 255, 0.1);
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
        }

        /* Labels */
        .eyebrow {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          padding: 6px 14px;
          border-radius: 999px;
          background: rgba(255, 255, 255, 0.05);
          border: 1px solid rgba(255, 255, 255, 0.08);
          color: var(--foreground);
          font-size: 13px;
          font-weight: 500;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
        .eyebrow-dot {
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background: #34d7ff;
          box-shadow: 0 0 8px #34d7ff;
        }

        /* Glass Cards */
        .glass-card {
          background: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.03) 0%,
            rgba(255, 255, 255, 0.01) 100%
          );
          border: 1px solid rgba(255, 255, 255, 0.06);
          border-radius: var(--radius-lg);
          backdrop-filter: blur(24px);
          -webkit-backdrop-filter: blur(24px);
          box-shadow:
            0 8px 32px rgba(0, 0, 0, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.05);
          position: relative;
          overflow: hidden;
        }
        .glass-card::before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 1px;
          background: linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.15),
            transparent
          );
        }

        /* Icons */
        .icon-wrapper {
          width: 48px;
          height: 48px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: var(--radius-md);
          background: linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.08),
            rgba(255, 255, 255, 0.02)
          );
          border: 1px solid rgba(255, 255, 255, 0.08);
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
          color: var(--foreground);
        }

        /* Layout Utilities */
        .grid-2 {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 32px;
        }
        .grid-3 {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 32px;
        }
        .grid-4 {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 24px;
        }
        .section-head {
          display: flex;
          flex-direction: column;
          align-items: center;
          text-align: center;
          gap: 16px;
          max-width: 760px;
          margin: 0 auto 64px auto;
        }

/* Header */
        #header {
          position: sticky;
          top: 0;
          z-index: 100;
          height: 72px;
          display: flex;
          align-items: center;
          background: rgba(10, 16, 23, 0.7);
          backdrop-filter: blur(24px);
          -webkit-backdrop-filter: blur(24px);
          border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        }
        .header-inner {
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
        .brand {
          display: flex;
          align-items: center;
          gap: 10px;
          font-size: 20px;
          font-weight: 700;
          color: var(--foreground);
        }
        .nav-links {
          display: flex;
          gap: 32px;
        }
        .nav-link {
          font-size: 14px;
          font-weight: 500;
          color: var(--muted-foreground);
        }
        .btn-header {
          display: none;
        }

        /* Hero */
        #hero {
          padding: 100px 0 120px;
        }
        .hero-grid {
          display: grid;
          grid-template-columns: 1.1fr 0.9fr;
          gap: 48px;
          align-items: center;
        }
        .hero-content {
          display: flex;
          flex-direction: column;
          gap: 32px;
          align-items: flex-start;
        }
        .hero-stats {
          display: flex;
          align-items: center;
          gap: 32px;
          margin-top: 16px;
          padding-top: 32px;
          border-top: 1px solid rgba(255, 255, 255, 0.08);
          width: 100%;
        }
        .stat-item {
          display: flex;
          flex-direction: column;
          gap: 4px;
        }
        .stat-val {
          font-size: 32px;
          font-weight: 700;
          color: var(--foreground);
          line-height: 1;
        }
        .stat-label {
          font-size: 14px;
          color: var(--muted-foreground);
        }
        .stat-divider {
          width: 1px;
          height: 40px;
          background: rgba(255, 255, 255, 0.08);
        }
        .hero-visual {
          padding: 16px;
          display: flex;
          flex-direction: column;
          gap: 16px;
        }
        .hero-image-wrap {
          position: relative;
          border-radius: var(--radius-md);
          overflow: hidden;
          height: 420px;
          background: rgba(0, 0, 0, 0.2);
        }
        .hero-overlay-bar {
          position: absolute;
          bottom: 16px;
          left: 16px;
          right: 16px;
          padding: 16px 20px;
          background: rgba(10, 16, 23, 0.6);
          backdrop-filter: blur(16px);
          -webkit-backdrop-filter: blur(16px);
          border-radius: var(--radius-md);
          border: 1px solid rgba(255, 255, 255, 0.1);
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        .hero-mini-panels {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 16px;
        }
        .mini-panel {
          padding: 16px;
          display: flex;
          gap: 12px;
          align-items: flex-start;
          background: rgba(255, 255, 255, 0.03);
          border-radius: var(--radius-md);
          border: 1px solid rgba(255, 255, 255, 0.06);
        }

        /* Trust Bar */
        #trust-bar {
          background: rgba(255, 255, 255, 0.01);
          border-top: 1px solid rgba(255, 255, 255, 0.04);
          border-bottom: 1px solid rgba(255, 255, 255, 0.04);
        }
        .trust-item {
          display: flex;
          align-items: center;
          gap: 12px;
        }

        /* Services */
        .service-card {
          padding: 40px 32px;
          display: flex;
          flex-direction: column;
          gap: 16px;
        }

        /* Advantages */
        .adv-card {
          padding: 32px 24px;
          display: flex;
          flex-direction: column;
          gap: 16px;
          background: transparent;
          border: 1px solid rgba(255, 255, 255, 0.06);
          border-radius: var(--radius-lg);
        }

        /* Portfolio */
        .portfolio-card {
          display: flex;
          flex-direction: column;
          cursor: pointer;
          transition:
            transform 0.25s ease,
            border-color 0.25s ease,
            box-shadow 0.25s ease;
        }
        .portfolio-card:hover,
        .portfolio-card:focus-visible {
          transform: translateY(-8px);
          border-color: rgba(52, 215, 255, 0.18);
          box-shadow:
            0 18px 52px rgba(0, 0, 0, 0.28),
            inset 0 1px 0 rgba(255, 255, 255, 0.08);
          outline: none;
        }
        .portfolio-image-wrap {
          width: 100%;
          height: 260px;
        }
        .portfolio-image {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
        .portfolio-content {
          padding: 24px 32px 32px;
          display: flex;
          flex-direction: column;
          gap: 12px;
          flex: 1;
        }
        .tags {
          display: flex;
          gap: 8px;
          margin-bottom: 4px;
        }
        .tag {
          padding: 4px 12px;
          border-radius: 999px;
          background: rgba(255, 255, 255, 0.05);
          border: 1px solid rgba(255, 255, 255, 0.08);
          font-size: 12px;
          font-weight: 500;
          color: var(--muted-foreground);
        }

        /* Process */
        .process-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 32px;
          position: relative;
        }
        .process-grid::before {
          content: "";
          position: absolute;
          top: 32px;
          left: 32px;
          width: calc(100% - 64px);
          height: 1px;
          background: rgba(255, 255, 255, 0.08);
          z-index: 0;
        }
        .process-step {
          position: relative;
          z-index: 1;
          display: flex;
          flex-direction: column;
          gap: 20px;
        }
        .step-number {
          width: 64px;
          height: 64px;
          border-radius: 50%;
          background: #0a1017;
          border: 1px solid rgba(255, 255, 255, 0.1);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 20px;
          font-weight: 700;
          color: var(--foreground);
        }

        /* Pricing */
        .pricing-card {
          padding: 48px 32px;
          display: flex;
          flex-direction: column;
          gap: 24px;
          transition:
            transform 0.25s ease,
            background 0.25s ease,
            border-color 0.25s ease,
            box-shadow 0.25s ease;
        }
        .pricing-card .btn {
          transition:
            background 0.25s ease,
            color 0.25s ease,
            border-color 0.25s ease,
            box-shadow 0.25s ease;
        }
        .pricing-card.accent,
        .pricing-card.is-active {
          background: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.05) 0%,
            rgba(255, 255, 255, 0.01) 100%
          );
          border: 1px solid rgba(255, 255, 255, 0.15);
          box-shadow:
            0 16px 48px rgba(0, 0, 0, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.1);
          transform: translateY(-8px);
        }
        .price-wrap {
          display: flex;
          align-items: baseline;
          gap: 8px;
        }
        .price {
          font-size: 48px;
          font-weight: 700;
          letter-spacing: -0.03em;
          line-height: 1;
        }
        .feature-list {
          display: flex;
          flex-direction: column;
          gap: 16px;
          margin: 8px 0 16px;
        }
        .feature-item {
          display: flex;
          align-items: center;
          gap: 12px;
          font-size: 15px;
        }

        /* Reviews */
        .review-card {
          padding: 40px 32px;
          display: flex;
          flex-direction: column;
          gap: 24px;
        }
        .review-author {
          display: flex;
          align-items: center;
          gap: 16px;
        }
        .avatar {
          width: 56px;
          height: 56px;
          border-radius: 50%;
          object-fit: cover;
        }
        .stars {
          display: flex;
          gap: 4px;
          color: #fbbf24;
        }

        /* Contact Form */
        .contact-wrap {
          display: grid;
          grid-template-columns: 1fr 1fr;
          border-radius: var(--radius-lg);
          overflow: hidden;
          background: linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.03),
            rgba(255, 255, 255, 0.01)
          );
          border: 1px solid rgba(255, 255, 255, 0.08);
        }
        .contact-form {
          padding: 64px 48px;
          display: flex;
          flex-direction: column;
          gap: 24px;
        }
        .input-group {
          display: flex;
          flex-direction: column;
          gap: 8px;
        }
        .input-label {
          font-size: 14px;
          font-weight: 500;
          color: var(--muted-foreground);
        }
        .input-field {
          height: 48px;
          padding: 0 16px;
          background: rgba(0, 0, 0, 0.2);
          border: 1px solid rgba(255, 255, 255, 0.1);
          border-radius: var(--radius-md);
          color: var(--foreground);
          font-size: 15px;
          display: flex;
          align-items: center;
          width: 100%;
          font-family: inherit;
          outline: none;
          appearance: none;
        }
        .input-textarea {
          height: 100px;
          padding: 12px 16px;
          background: rgba(0, 0, 0, 0.2);
          border: 1px solid rgba(255, 255, 255, 0.1);
          border-radius: var(--radius-md);
          color: var(--foreground);
          font-size: 15px;
          display: flex;
          align-items: flex-start;
          width: 100%;
          font-family: inherit;
          outline: none;
          resize: vertical;
          appearance: none;
        }
        .input-field::placeholder,
        .input-textarea::placeholder {
          color: rgba(230, 247, 251, 0.45);
        }
        .input-field:focus,
        .input-textarea:focus {
          border-color: rgba(52, 215, 255, 0.45);
          box-shadow: 0 0 0 4px rgba(52, 215, 255, 0.08);
          background: rgba(0, 0, 0, 0.28);
        }
        .contact-form button {
          border: none;
          font-family: inherit;
        }
        .contact-map {
          position: relative;
          min-height: 100%;
        }
        .contact-map img {
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
        .pricing-modal {
          position: fixed;
          inset: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 24px;
          opacity: 0;
          visibility: hidden;
          pointer-events: none;
          transition:
            opacity 0.25s ease,
            visibility 0.25s ease;
          z-index: 300;
        }
        .pricing-modal.is-open {
          opacity: 1;
          visibility: visible;
          pointer-events: auto;
        }
        .pricing-modal__backdrop {
          position: absolute;
          inset: 0;
          background:
            radial-gradient(circle at top, rgba(52, 215, 255, 0.12), transparent 45%),
            rgba(4, 10, 16, 0.78);
          backdrop-filter: blur(10px);
          -webkit-backdrop-filter: blur(10px);
        }
        .pricing-modal__dialog {
          position: relative;
          width: 100%;
          max-width: 560px;
          padding: 40px 36px 36px;
          display: flex;
          flex-direction: column;
          gap: 28px;
          z-index: 1;
          border: 1px solid rgba(255, 255, 255, 0.1);
          box-shadow:
            0 24px 80px rgba(0, 0, 0, 0.45),
            inset 0 1px 0 rgba(255, 255, 255, 0.08);
        }
        .pricing-modal__close {
          position: absolute;
          top: 39px;
          right: 36px;
          width: 36px;
          height: 36px;
          border: 1px solid rgba(255, 255, 255, 0.08);
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.04);
          color: var(--foreground);
          display: inline-flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          transition:
            background 0.2s ease,
            border-color 0.2s ease,
            transform 0.2s ease;
        }
        .pricing-modal__close:hover {
          background: rgba(255, 255, 255, 0.08);
          border-color: rgba(255, 255, 255, 0.14);
          transform: rotate(90deg);
        }
        .pricing-modal__header {
          display: flex;
          flex-direction: column;
          gap: 14px;
        }
        .pricing-modal__text {
          font-size: 15px;
        }
        .pricing-modal__form {
          display: grid;
          gap: 18px;
        }
        .pricing-modal__input,
        .pricing-modal__textarea {
          width: 100%;
          border: 1px solid rgba(255, 255, 255, 0.1);
          border-radius: var(--radius-md);
          background: rgba(0, 0, 0, 0.24);
          color: var(--foreground);
          font-size: 15px;
          font-family: inherit;
          outline: none;
          transition:
            border-color 0.2s ease,
            box-shadow 0.2s ease,
            background 0.2s ease;
        }
        .pricing-modal__input {
          height: 52px;
          padding: 0 16px;
        }
        .pricing-modal__textarea {
          min-height: 120px;
          padding: 14px 16px;
          resize: vertical;
        }
        .pricing-modal__input:focus,
        .pricing-modal__textarea:focus {
          border-color: rgba(52, 215, 255, 0.45);
          box-shadow: 0 0 0 4px rgba(52, 215, 255, 0.08);
          background: rgba(0, 0, 0, 0.3);
        }
        .pricing-modal__input[readonly] {
          color: var(--foreground);
          background: rgba(52, 215, 255, 0.08);
          border-color: rgba(52, 215, 255, 0.18);
        }
        .pricing-modal__input::placeholder,
        .pricing-modal__textarea::placeholder {
          color: rgba(230, 247, 251, 0.45);
        }
        .pricing-modal__submit {
          width: 100%;
          margin-top: 4px;
        }
        body.modal-open {
          overflow: hidden;
        }
        .project-modal {
          position: fixed;
          inset: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 24px;
          opacity: 0;
          visibility: hidden;
          pointer-events: none;
          transition:
            opacity 0.25s ease,
            visibility 0.25s ease;
          z-index: 320;
        }
        .project-modal.is-open {
          opacity: 1;
          visibility: visible;
          pointer-events: auto;
        }
        .project-modal__backdrop {
          position: absolute;
          inset: 0;
          background:
            radial-gradient(circle at top, rgba(104, 255, 200, 0.1), transparent 42%),
            rgba(4, 10, 16, 0.84);
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
        }
        .project-modal__dialog {
          position: relative;
          width: 100%;
          max-width: 920px;
          padding: 36px;
          display: grid;
          gap: 24px;
          z-index: 1;
          border: 1px solid rgba(255, 255, 255, 0.1);
          box-shadow:
            0 24px 80px rgba(0, 0, 0, 0.48),
            inset 0 1px 0 rgba(255, 255, 255, 0.08);
        }
        .project-modal__close {
          position: absolute;
          top: 18px;
          right: 18px;
          width: 40px;
          height: 40px;
          border: 1px solid rgba(255, 255, 255, 0.08);
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.04);
          color: var(--foreground);
          display: inline-flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          transition:
            background 0.2s ease,
            transform 0.2s ease,
            border-color 0.2s ease;
        }
        .project-modal__close:hover {
          background: rgba(255, 255, 255, 0.08);
          border-color: rgba(255, 255, 255, 0.14);
          transform: rotate(90deg);
        }
        .project-modal__header {
          display: flex;
          flex-direction: column;
          gap: 12px;
          max-width: 640px;
        }
        .project-modal__subtitle {
          font-size: 15px;
          color: var(--muted-foreground);
        }
        .project-modal__stage {
          width: 100%;
          aspect-ratio: 16 / 10;
          overflow: hidden;
          border-radius: var(--radius-lg);
          border: 1px solid rgba(255, 255, 255, 0.08);
          background: rgba(255, 255, 255, 0.02);
          position: relative;
        }
        .project-modal__slides {
          width: 100%;
          height: 100%;
          position: relative;
        }
        .project-modal__image {
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: center center;
          display: block;
          position: absolute;
          inset: 0;
          opacity: 0;
          pointer-events: none;
          transition: opacity 0.25s ease;
        }
        .project-modal__image.is-active {
          opacity: 1;
          pointer-events: auto;
        }
        .project-modal__nav {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          width: 48px;
          height: 48px;
          border: 1px solid rgba(255, 255, 255, 0.12);
          border-radius: 50%;
          background: rgba(7, 16, 24, 0.72);
          color: var(--foreground);
          display: inline-flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          z-index: 2;
          backdrop-filter: blur(14px);
          -webkit-backdrop-filter: blur(14px);
          transition:
            background 0.2s ease,
            border-color 0.2s ease,
            transform 0.2s ease;
        }
        .project-modal__nav:hover {
          background: rgba(52, 215, 255, 0.16);
          border-color: rgba(52, 215, 255, 0.3);
        }
        .project-modal__nav--prev {
          left: 18px;
        }
        .project-modal__nav--next {
          right: 18px;
        }
        .project-modal__footer {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 16px;
        }
        .project-modal__counter {
          font-size: 14px;
          font-weight: 600;
          color: var(--muted-foreground);
        }
        .project-modal__dots {
          display: flex;
          align-items: center;
          gap: 8px;
        }
        .project-modal__dot {
          width: 10px;
          height: 10px;
          border: none;
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.18);
          cursor: pointer;
          transition:
            transform 0.2s ease,
            background 0.2s ease,
            box-shadow 0.2s ease;
        }
        .project-modal__dot.is-active {
          background: var(--primary);
          transform: scale(1.15);
          box-shadow: 0 0 14px rgba(52, 215, 255, 0.35);
        }

        /* Footer */
        #footer {
          padding: 80px 0 40px;
          border-top: 1px solid rgba(255, 255, 255, 0.06);
          background: rgba(10, 16, 23, 0.4);
        }
        .footer-grid {
          display: grid;
          grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
          gap: 48px;
          margin-bottom: 64px;
        }
        .footer-col {
          display: flex;
          flex-direction: column;
          gap: 16px;
        }
        .footer-title {
          font-size: 16px;
          font-weight: 600;
          margin-bottom: 8px;
          color: var(--foreground);
        }
        .footer-link {
          font-size: 15px;
          color: var(--muted-foreground);
        }
        .footer-bottom {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding-top: 32px;
          border-top: 1px solid rgba(255, 255, 255, 0.06);
          font-size: 14px;
          color: var(--muted-foreground);
        }
        .footer-bottom-links {
          display: flex;
          gap: 24px;
        }
        #bottom-nav {
          display: none;
        }

        @media (max-width: 1024px) {
          .container {
            padding: 0 24px;
          }
          .section {
            padding: 96px 0;
          }
          .section-sm {
            padding: 48px 0;
          }
          h1 {
            font-size: 52px;
          }
          h2 {
            font-size: 38px;
          }
          .hero-grid {
            grid-template-columns: 1fr;
            gap: 32px;
          }
          .grid-4 {
            grid-template-columns: repeat(2, 1fr);
          }
          .grid-3 {
            grid-template-columns: repeat(2, 1fr);
          }
          .process-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 28px;
          }
          .process-grid::before {
            display: none;
          }
          .pricing-card.accent {
            transform: none;
          }
          .contact-wrap {
            grid-template-columns: 1fr;
          }
          .contact-map {
            min-height: 320px;
          }
          .footer-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 32px;
            margin-bottom: 40px;
          }
          .footer-bottom {
            flex-direction: column;
            align-items: flex-start;
            gap: 16px;
          }
        }

        @media (max-width: 767px) {
          .export-wrapper {
            font-size: 15px;
            line-height: 1.5;
            width: 100%;
            max-width: 100%;
            overflow-x: hidden;
          }
          #app {
            width: 100%;
            max-width: 100%;
            padding-bottom: 60px;
            overflow-x: hidden;
          }
          .container {
            width: 100%;
            max-width: 100%;
            padding: 0 16px;
          }
          .section {
            padding: 72px 0;
          }
          .section-sm {
            padding: 36px 0;
          }
          h1 {
            font-size: 38px;
            line-height: 1.15;
          }
          h2 {
            font-size: 30px;
          }
          h3 {
            font-size: 22px;
          }
          .section-head {
            margin-bottom: 40px;
          }
          #header {
            height: 60px;
          }
          .header-inner .btn {
            display: none;
          }
          .btn-header {
            display: inline-flex !important;
            height: 36px;
            padding: 0 16px;
            font-size: 13px;
          }
          .nav-links {
            display: none;
          }
          .nav-link {
            font-size: 13px;
          }
          .brand {
            font-size: 18px;
          }
          #hero {
            padding: 72px 0 84px;
          }
          .hero-content {
            gap: 24px;
          }
          .hero-buttons {
            display: flex;
            flex-direction: column;
            gap: 12px;
            width: 100%;
          }
          .hero-buttons .btn {
            width: 100%;
          }
          .hero-stats {
            flex-wrap: wrap;
            gap: 20px;
            padding-top: 24px;
          }
          .hero-stats .stat-item {
            flex: 1 1 calc(50% - 10px);
          }
          .hero-stats .stat-divider {
            display: none;
          }
          .hero-visual {
            margin-top: 24px;
            padding: 12px;
            gap: 12px;
          }
          .hero-image-wrap {
            height: 280px;
          }
          .hero-overlay-bar {
            flex-direction: column;
            align-items: flex-start;
            gap: 12px;
          }
          .hero-mini-panels {
            grid-template-columns: 1fr;
          }
          .grid-2,
          .grid-3,
          .grid-4,
          .process-grid {
            grid-template-columns: 1fr;
            gap: 16px;
          }
          .mobile-scroll-row {
            display: flex !important;
            overflow-x: auto !important;
            width: 100%;
            max-width: 100%;
            gap: 14px;
            margin: 0;
            padding: 0 0 8px;
            scroll-snap-type: x mandatory;
            touch-action: pan-x;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            overscroll-behavior-x: contain;
          }
          .mobile-scroll-row::-webkit-scrollbar {
            display: none;
          }
          .mobile-scroll-row > * {
            flex: 0 0 88%;
            min-width: 88%;
            max-width: 88%;
            scroll-snap-align: start;
          }

          .drag-carousel {
            cursor: grab;
          }
          .drag-carousel.is-dragging {
            cursor: grabbing;
          }
          .trust-item {
            padding: 16px;
            flex-direction: column;
            align-items: flex-start;
            gap: 12px;
          }
          .process-grid {
            display: flex;
            flex-direction: column;
            gap: 24px;
            position: relative;
          }
          .process-grid::before {
            content: "";
            position: absolute;
            top: 24px;
            left: 20px;
            width: 1px;
            height: calc(100% - 48px);
            background: rgba(255, 255, 255, 0.08);
            z-index: 0;
            display: block;
          }
          .process-step {
            display: flex;
            align-items: flex-start;
            gap: 16px;
          }
          .step-number {
            width: 40px;
            height: 40px;
            font-size: 16px;
            flex-shrink: 0;
          }
          .process-step h4,
          .process-step p {
            margin: 0;
          }
          .service-card,
          .pricing-card,
          .review-card {
            padding: 28px 20px;
          }
          .portfolio-content {
            padding: 18px 20px 24px;
          }
          .contact-form {
            padding: 32px 20px;
          }
          .contact-map {
            min-height: 260px;
          }
          .pricing-modal {
            padding: 16px;
          }
          .pricing-modal__dialog {
            padding: 28px 20px 24px;
            gap: 24px;
          }
          .pricing-modal__close {
            top: 14px;
            right: 14px;
            width: 36px;
            height: 36px;
          }
          .project-modal {
            padding: 16px;
          }
          .project-modal__dialog {
            padding: 28px 20px 24px;
          }
          .project-modal__close {
            top: 14px;
            right: 14px;
            width: 36px;
            height: 36px;
          }
          .project-modal__stage {
            aspect-ratio: 4 / 3;
          }
          .project-modal__nav {
            width: 42px;
            height: 42px;
          }
          .project-modal__nav--prev {
            left: 12px;
          }
          .project-modal__nav--next {
            right: 12px;
          }
          .project-modal__footer {
            flex-direction: column;
            align-items: flex-start;
          }
          .footer-grid {
            grid-template-columns: 1fr;
            gap: 24px;
          }
          .footer-bottom {
            gap: 12px;
            font-size: 13px;
          }
          .footer-bottom-links {
            flex-direction: column;
            gap: 8px;
          }
          #bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 60px;
            background: rgba(10, 16, 23, 0.95);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            border-top: 1px solid rgba(255, 255, 255, 0.06);
            display: flex;
            justify-content: space-around;
            align-items: center;
            z-index: 100;
          }
          .tab-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            font-size: 10px;
            color: var(--muted-foreground);
            width: 25%;
          }
          .tab-item.active {
            color: var(--primary);
          }
        }

:root {
      --background: #071018;
      --foreground: #e6f7fb;
      --border: #00000014;
      --input: #071823;
      --primary: #34d7ff;
      --primary-foreground: #031e27;
      --secondary: #06121a;
      --secondary-foreground: #c8f4ff;
      --muted: #061018;
      --muted-foreground: #8faeb8;
      --success: #16d98a;
      --success-foreground: #042516;
      --accent: #68ffc8;
      --accent-foreground: #06261d;
      --destructive: #ff6464;
      --destructive-foreground: #2b0000;
      --warning: #ffc078;
      --warning-foreground: #3a2200;
      --card: #071422;
      --card-foreground: #eaf7fb;
      --sidebar: #041018;
      --sidebar-foreground: #b8e5f0;
      --sidebar-primary: #08232b;
      --sidebar-primary-foreground: #34d7ff;
      --radius-sm: 4px;
      --radius-md: 6px;
      --radius-lg: 8px;
      --radius-xl: 12px;
      --font-family-body: Inter;
    }

.inline-style-001 {
  width: 100%;
  min-height: 100vh;
  position: relative;
  font-family: var(--font-family-body);
  background-color: var(--background);
}

.inline-style-002 {
  width: 36px;
  height: 36px;
}

.inline-style-003 {
  font-size: 20px;
}

.inline-style-004 {
  font-size: 18px;
}

.inline-style-005 {
  display: flex;
  gap: 16px;
}

.inline-style-006 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.inline-style-007 {
  display: flex;
  align-items: center;
  gap: 12px;
}

.inline-style-008 {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 12px #22c55e;
}

.inline-style-009 {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  line-height: 1.2;
}

.inline-style-010 {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}

.inline-style-011 {
  display: flex;
  gap: 24px;
}

.inline-style-012 {
  text-align: right;
}

.inline-style-013 {
  color: var(--primary);
}

.inline-style-014 {
  font-size: 24px;
}

.inline-style-015 {
  font-size: 14px;
  font-weight: 600;
}

.inline-style-016 {
  font-size: 12px;
  color: var(--muted-foreground);
  margin-top: 2px;
}

.inline-style-017 {
  width: 40px;
  height: 40px;
}

.inline-style-018 {
  display: block;
  font-size: 15px;
  line-height: 1.2;
}

.inline-style-019 {
  font-size: 13px;
  color: var(--muted-foreground);
}

.inline-style-020 {
  border-radius: 50%;
}

.inline-style-021 {
  margin-top: 8px;
}

.inline-style-022 {
  color: var(--muted-foreground);
  font-size: 18px;
}

.inline-style-023 {
  margin-top: auto;
}

.inline-style-024 {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(52, 215, 255, 0.1);
  color: #34d7ff;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 12px;
}

.inline-style-025 {
  fill: currentColor;
}

.inline-style-026 {
  font-size: 16px;
}

.inline-style-027 {
  display: block;
  font-size: 16px;
  color: var(--foreground);
}

.inline-style-028 {
  font-size: 14px;
  color: var(--muted-foreground);
}

.inline-style-029 {
  margin-bottom: 12px;
}

.inline-style-030 {
  display: grid;
  gap: 24px;
  margin-top: 16px;
}

.inline-style-031 {
  width: 100%;
}

.inline-style-032 {
  margin-bottom: 8px;
}

.inline-style-033 {
  width: 32px;
  height: 32px;
}

.inline-style-034 {
  font-size: 14px;
}

.inline-style-035 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.inline-style-036 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.inline-style-037 {
  font-size: 16px;
  margin-top: 4px;
}