/* ============================================================
   OwnerFlow Main – Toss-Inspired Design System
   ============================================================ */

/* ---- Design Tokens ---- */
:root {
   --ts-bg-dark: #191f28;
   --ts-bg-darker: #17171c;
   --ts-bg-light: #ffffff;
   --ts-bg-gray: #f4f5f7;
   --ts-blue: #3182f6;
   --ts-blue-dark: #1b64da;
   --ts-blue-light: #e8f3ff;
   --ts-green: #10b981;
   --ts-text-primary: #191f28;
   --ts-text-secondary: #6b7280;
   --ts-text-tertiary: #8b95a1;
   --ts-text-white: #ffffff;
   --ts-border: #e5e8eb;
   --ts-radius-sm: 8px;
   --ts-radius-md: 16px;
   --ts-radius-lg: 24px;
   --ts-radius-xl: 32px;
   --ts-transition: cubic-bezier(0.4, 0, 0.2, 1);
   --ts-font: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   --ts-max-width: 1200px;
}

/* ---- Global Reset ---- */
.ts-hero,
.ts-intro,
.ts-maintain,
.ts-features,
.ts-numbers,
.ts-compare,
.ts-process,
.ts-hot,
.ts-clients,
.ts-reviews,
.ts-cta {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: var(--ts-font);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

main {
   overflow-x: hidden;
}

/* ---- Reveal Animation ---- */
.ts-reveal {
   opacity: 0;
   transform: translateY(40px);
   transition:
      opacity 0.8s var(--ts-transition),
      transform 0.8s var(--ts-transition);
}
.ts-reveal.ts-visible {
   opacity: 1;
   transform: translateY(0);
}

/* ============================================================
   SECTION 1: HERO
   ============================================================ */
.ts-hero {
   position: relative;
   min-height: 100vh;
   background: var(--ts-bg-dark);
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
}
.ts-hero::before {
   content: '';
   position: absolute;
   top: -50%;
   left: -25%;
   width: 150%;
   height: 150%;
   background: radial-gradient(ellipse at 30% 50%, rgba(49, 130, 246, 0.08) 0%, transparent 60%), radial-gradient(ellipse at 70% 30%, rgba(99, 102, 241, 0.06) 0%, transparent 50%);
   pointer-events: none;
}
.ts-hero__inner {
   position: relative;
   z-index: 2;
   text-align: center;
   max-width: var(--ts-max-width);
   width: 100%;
   padding: 120px 24px 60px;
}
.ts-hero__title {
   font-size: clamp(34px, 5.5vw, 64px);
   font-weight: 800;
   color: var(--ts-text-white);
   line-height: 1.35;
   letter-spacing: -0.03em;
   margin: 0 0 24px;
}
.ts-hero__highlight {
   background: linear-gradient(135deg, #3182f6 0%, #6366f1 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
}
.ts-hero__sub {
   font-size: clamp(16px, 2.2vw, 20px);
   color: var(--ts-text-tertiary);
   font-weight: 400;
   letter-spacing: -0.01em;
   margin: 0 0 40px;
   line-height: 1.6;
}
.ts-hero__cta {
   margin-bottom: 56px;
   display: flex;
   gap: 16px;
   justify-content: center;
}
.ts-hero__badge-wrap {
   margin-bottom: 24px;
   display: flex;
   justify-content: center;
}
.ts-hero__badge {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 8px 16px;
   background: rgba(49, 130, 246, 0.1);
   border: 1px solid rgba(49, 130, 246, 0.2);
   border-radius: 100px;
   color: #60a5fa;
   font-size: 14px;
   font-weight: 600;
   letter-spacing: -0.01em;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.ts-badge-icon {
   display: inline-flex;
   color: #fbbf24;
}

/* Hero 3D Icons Grid */
.ts-hero__visual {
   max-width: 820px;
   margin: 0 auto;
}
.ts-hero__icons-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 24px 20px;
}
.ts-hero__icon-item {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 12px;
   opacity: 0;
   transform: translateY(24px) scale(0.9);
   animation: tsIconIn 0.6s var(--ts-transition) forwards;
}
.ts-hero__icon-item:nth-child(1) {
   animation-delay: 0.1s;
}
.ts-hero__icon-item:nth-child(2) {
   animation-delay: 0.18s;
}
.ts-hero__icon-item:nth-child(3) {
   animation-delay: 0.26s;
}
.ts-hero__icon-item:nth-child(4) {
   animation-delay: 0.34s;
}
.ts-hero__icon-item:nth-child(5) {
   animation-delay: 0.42s;
}
.ts-hero__icon-item:nth-child(6) {
   animation-delay: 0.5s;
}
.ts-hero__icon-item:nth-child(7) {
   animation-delay: 0.58s;
}
.ts-hero__icon-item:nth-child(8) {
   animation-delay: 0.66s;
}
.ts-hero__icon-item:nth-child(9) {
   animation-delay: 0.74s;
}
.ts-hero__icon-item:nth-child(10) {
   animation-delay: 0.82s;
}
.ts-hero__icon-item:nth-child(11) {
   animation-delay: 0.9s;
}
.ts-hero__icon-item:nth-child(12) {
   animation-delay: 0.98s;
}
.ts-hero__icon-item:nth-child(13) {
   animation-delay: 1.06s;
}
.ts-hero__icon-item:nth-child(14) {
   animation-delay: 1.14s;
}
.ts-hero__icon-item:nth-child(15) {
   animation-delay: 1.22s;
}
.ts-hero__icon-item:nth-child(16) {
   animation-delay: 1.3s;
}

@keyframes tsIconIn {
   to {
      opacity: 1;
      transform: translateY(0) scale(1);
   }
}

.ts-hero__3d-icon {
   width: 72px;
   height: 72px;
   transition: transform 0.35s var(--ts-transition);
   filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.2));
}
.ts-hero__icon-item:hover .ts-hero__3d-icon {
   transform: translateY(-6px) scale(1.08);
}
.ts-hero__icon-label {
   font-size: 13px;
   font-weight: 600;
   color: rgba(255, 255, 255, 0.65);
   letter-spacing: -0.01em;
   transition: color 0.25s ease;
}
.ts-hero__icon-item:hover .ts-hero__icon-label {
   color: rgba(255, 255, 255, 0.95);
}

/* 3D Icon Animation Utilities */
@keyframes tsFloatY {
   0%,
   100% {
      transform: translateY(0);
   }
   50% {
      transform: translateY(-8px);
   }
}
@keyframes tsSpinSlow {
   100% {
      transform: rotate(360deg);
   }
}
@keyframes tsPulseGlow {
   0%,
   100% {
      opacity: 0.6;
      transform: scale(0.95);
   }
   50% {
      opacity: 1;
      transform: scale(1.1);
   }
}
@keyframes tsToggleAct {
   0%,
   100% {
      transform: translateX(0);
   }
   50% {
      transform: translateX(-20px);
   }
}
@keyframes tsWandWave {
   0%,
   100% {
      transform: rotate(0deg);
   }
   50% {
      transform: rotate(15deg);
   }
}
@keyframes tsScaleY {
   0%,
   100% {
      transform: scaleY(1);
   }
   50% {
      transform: scaleY(0.6);
   }
}

.ts-anim-floatY {
   animation: tsFloatY 3s ease-in-out infinite;
}
.ts-anim-floatY-delay {
   animation: tsFloatY 3s ease-in-out infinite 1.5s;
}
.ts-anim-spin {
   animation: tsSpinSlow 12s linear infinite;
}
.ts-anim-pulse {
   animation: tsPulseGlow 2.5s ease-in-out infinite;
   transform-origin: center;
}
.ts-anim-toggle {
   animation: tsToggleAct 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.ts-anim-wand {
   animation: tsWandWave 3s ease-in-out infinite;
}
.ts-anim-bar {
   transform-origin: center bottom;
   animation: tsScaleY 3s ease-in-out infinite;
}

/* Scroll Hint */
.ts-hero__scroll {
   position: absolute;
   bottom: 32px;
   left: 50%;
   transform: translateX(-50%);
}
.ts-hero__scroll-line {
   width: 2px;
   height: 40px;
   background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4), transparent);
   position: relative;
   overflow: hidden;
   border-radius: 2px;
}
.ts-hero__scroll-line::after {
   content: '';
   position: absolute;
   top: -100%;
   left: 0;
   width: 100%;
   height: 50%;
   background: white;
   animation: tsScrollLine 2s infinite;
   border-radius: 2px;
}
@keyframes tsScrollLine {
   0% {
      top: -50%;
   }
   100% {
      top: 150%;
   }
}

/* ============================================================
   SECTION 2: INTRO
   ============================================================ */
.ts-intro {
   background: var(--ts-bg-light);
   padding: 140px 24px;
}
.ts-intro__inner {
   max-width: 720px;
   margin: 0 auto;
   text-align: center;
}
.ts-intro__eyebrow {
   display: inline-block;
   font-size: 14px;
   font-weight: 700;
   color: var(--ts-blue);
   letter-spacing: 0.1em;
   text-transform: uppercase;
   margin-bottom: 24px;
}
.ts-intro__title {
   font-size: clamp(26px, 4vw, 40px);
   font-weight: 800;
   color: var(--ts-text-primary);
   line-height: 1.45;
   letter-spacing: -0.03em;
   margin: 0 0 24px;
}
.ts-intro__desc {
   font-size: clamp(15px, 2vw, 18px);
   color: var(--ts-text-secondary);
   line-height: 1.7;
   margin: 0;
}

/* ============================================================
   SECTION 3: MAINTAIN — iPhone Frames
   ============================================================ */
.ts-maintain {
   background: var(--ts-bg-gray);
   padding: 120px 24px;
   overflow: hidden;
}
.ts-maintain__inner {
   max-width: var(--ts-max-width);
   margin: 0 auto;
   display: flex; /* Changed from grid to flex for better control */
   flex-direction: column;
   align-items: center;
}

/* Header Text Section for Maintain */
.ts-maintain__header-text {
   text-align: center;
   margin-bottom: 60px;
   max-width: 600px;
}
.ts-maintain__eyebrow {
   display: inline-block;
   font-size: 13px;
   font-weight: 700;
   color: var(--ts-blue);
   letter-spacing: 0.08em;
   text-transform: uppercase;
   background: var(--ts-blue-light);
   padding: 6px 14px;
   border-radius: 20px;
   margin-bottom: 20px;
}
.ts-maintain__title {
   font-size: clamp(26px, 3.5vw, 38px);
   font-weight: 800;
   color: var(--ts-text-primary);
   line-height: 1.35;
   letter-spacing: -0.03em;
   margin: 0 0 16px;
}
.ts-maintain__desc {
   font-size: 16px;
   color: var(--ts-text-secondary);
   line-height: 1.7;
   margin: 0;
}

/* Phone Showcases Wrapper */
.ts-maintain__showcases {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 80px;
   width: 100%;
   max-width: 900px; /* Keep them tightly related */
}

/* Phone Columns (Left & Right) */
.ts-maintain__left,
.ts-maintain__right {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 32px;
}

/* Individual Phone Descriptions */
.ts-maintain__phone-text {
   text-align: center;
   max-width: 320px;
}
.ts-maintain__phone-title {
   font-size: 22px;
   font-weight: 700;
   color: var(--ts-text-primary);
   line-height: 1.4;
   letter-spacing: -0.02em;
   margin: 0 0 10px;
}
.ts-maintain__phone-desc {
   font-size: 15px;
   color: var(--ts-text-secondary);
   line-height: 1.6;
   margin: 0;
}

/* iPhone Frame (Toss-style Modern) */
.ts-phone {
   display: flex;
   justify-content: center;
}
.ts-phone__frame {
   width: 300px;
   height: 600px;
   background: #111111;
   border-radius: 46px;
   padding: 12px;
   box-shadow:
      0 32px 64px -12px rgba(0, 0, 0, 0.2),
      inset 0 0 0 2px #444444;
   position: relative;
   border: none;
   display: flex;
   flex-direction: column;
}
.ts-phone__screen {
   background: #ffffff;
   border-radius: 36px;
   width: 100%;
   height: 100%;
   position: relative;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
}
.ts-phone__island {
   position: absolute;
   top: 12px;
   left: 50%;
   transform: translateX(-50%);
   width: 100px;
   height: 30px;
   background: #000000;
   border-radius: 15px;
   z-index: 10;
   box-shadow: inset -2px -2px 6px rgba(255, 255, 255, 0.1);
}
.ts-phone__header {
   padding: 48px 24px 20px;
   background: #ffffff;
   z-index: 5;
}
.ts-phone__header-title {
   font-size: 22px;
   font-weight: 700;
   color: #191f28;
   line-height: 1.3;
   margin-bottom: 4px;
}
.ts-phone__header-desc {
   font-size: 13px;
   color: #8b95a1;
   font-weight: 500;
}
.ts-phone__body {
   flex: 1;
   background: #f2f4f6;
   padding: 24px;
   overflow: hidden;
   position: relative;
   display: flex;
   flex-direction: column;
}

/* Phone 1: 1:1 Care / Manager Chat UI */
.ts-care-profile {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-bottom: 24px;
   padding-bottom: 20px;
   border-bottom: 1px solid rgba(0,0,0,0.05);
}
.ts-care-avatar {
   width: 48px;
   height: 48px;
   border-radius: 50%;
   background: #e8f3ff;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #3182f6;
   flex-shrink: 0;
}
.ts-care-name {
   font-size: 16px;
   font-weight: 700;
   color: #191f28;
   margin-bottom: 4px;
}
.ts-care-status {
   font-size: 13px;
   color: #3182f6;
   font-weight: 600;
}
.ts-care-chat {
   background: #ffffff;
   border-radius: 4px 16px 16px 16px;
   padding: 14px 16px;
   font-size: 14px;
   color: #333d4b;
   line-height: 1.5;
   margin-bottom: 16px;
   box-shadow: 0 4px 12px rgba(0,0,0,0.03);
   position: relative;
   max-width: 90%;
}
.ts-care-chat--user {
   background: #3182f6;
   color: #ffffff;
   border-radius: 16px 4px 16px 16px;
   margin-left: auto;
}
.ts-care-time {
   font-size: 11px;
   color: #8b95a1;
   margin-top: 6px;
   text-align: right;
}
.ts-care-chat--user .ts-care-time {
   color: rgba(255,255,255,0.7);
}
.ts-care-action {
   margin-top: auto;
   background: #ffffff;
   border-radius: 20px;
   display: flex;
   align-items: center;
   padding: 6px 6px 6px 16px;
   box-shadow: 0 4px 12px rgba(0,0,0,0.05);
   position: absolute;
   bottom: 24px;
   left: 24px;
   right: 24px;
}
.ts-care-input {
   flex: 1;
   font-size: 14px;
   color: #8b95a1;
}
.ts-care-send {
   width: 32px;
   height: 32px;
   border-radius: 50%;
   background: #3182f6;
   display: flex;
   align-items: center;
   justify-content: center;
}

/* Phone 2: Task & Dev UI */
.ts-task-card {
   background: var(--ts-bg-light);
   border-radius: 12px;
   padding: 14px;
   margin-bottom: 12px;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 12px;
   box-shadow: 0 4px 16px rgba(0,0,0,0.03);
   position: relative;
   overflow: hidden;
}
.ts-task-icon {
   width: 36px;
   height: 36px;
   border-radius: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
}
.ts-bg-blue { background: #e8f3ff; }
.ts-bg-green { background: #e5f9f1; }
.ts-task-info {
   flex-grow: 1;
   width: calc(100% - 48px);
}
.ts-task-title {
   font-size: 14px;
   font-weight: 700;
   color: var(--ts-text-primary);
   margin-bottom: 4px;
}
.ts-task-status {
   font-size: 12px;
   font-weight: 600;
}
.ts-task-progress {
   width: 100%;
   height: 4px;
   background: #f2f4f6;
   border-radius: 2px;
   margin-top: 8px;
   overflow: hidden;
}
.ts-task-progress-fill {
   height: 100%;
   background: #3182f6;
   border-radius: 2px;
   transition: width 1s ease-out;
}

/* Code Snippet Card */
.ts-code-card {
   background: #1e1e1e;
   border-radius: 12px;
   margin-top: 8px;
   margin-bottom: 12px;
   overflow: hidden;
   box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.ts-code-header {
   background: #2d2d2d;
   padding: 8px 12px;
   display: flex;
   align-items: center;
   gap: 6px;
}
.ts-code-dot {
   width: 10px;
   height: 10px;
   border-radius: 50%;
}
.ts-code-title {
   color: #9ca3af;
   font-size: 11px;
   margin-left: 6px;
   font-family: monospace;
}
.ts-code-body {
   padding: 12px;
   font-family: monospace;
   font-size: 12px;
   line-height: 1.6;
   color: #e5e7eb;
}
.ts-code-line {
   white-space: pre;
}
.ts-code-keyword { color: #ff7b72; }
.ts-code-var { color: #79c0ff; }
.ts-code-func { color: #d2a8ff; }
.ts-code-string { color: #a5d6ff; }

/* ============================================================
   SECTION 4: FEATURES — Dark Section
   ============================================================ */
.ts-features {
   background: var(--ts-bg-dark);
   padding: 120px 24px;
}
.ts-features__inner {
   max-width: var(--ts-max-width);
   margin: 0 auto;
   text-align: center;
}
.ts-features__eyebrow {
   display: inline-block;
   font-size: 13px;
   font-weight: 700;
   color: var(--ts-blue);
   letter-spacing: 0.12em;
   text-transform: uppercase;
   margin-bottom: 20px;
}
.ts-features__title {
   font-size: clamp(28px, 4vw, 42px);
   font-weight: 800;
   color: var(--ts-text-white);
   line-height: 1.35;
   letter-spacing: -0.03em;
   margin: 0 0 60px;
}
.ts-features__accent {
   color: var(--ts-blue);
}
.ts-features__grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px;
}

/* Feature Card */
.ts-feature-card {
   background: rgba(255, 255, 255, 0.04);
   border: 1px solid rgba(255, 255, 255, 0.06);
   border-radius: var(--ts-radius-lg);
   padding: 36px 28px;
   text-align: left;
   cursor: pointer;
   position: relative;
   transition: all 0.35s var(--ts-transition);
}
.ts-feature-card:hover {
   background: rgba(255, 255, 255, 0.08);
   border-color: rgba(49, 130, 246, 0.3);
   transform: translateY(-4px);
}
.ts-feature-card__icon {
   width: 56px;
   height: 56px;
   border-radius: var(--ts-radius-md);
   background: rgba(49, 130, 246, 0.1);
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--ts-blue);
   margin-bottom: 20px;
}
.ts-feature-card__title {
   font-size: 19px;
   font-weight: 700;
   color: var(--ts-text-white);
   margin: 0 0 10px;
   letter-spacing: -0.02em;
}
.ts-feature-card__desc {
   font-size: 14px;
   color: var(--ts-text-tertiary);
   line-height: 1.65;
   margin: 0;
}
.ts-feature-card__arrow {
   position: absolute;
   top: 36px;
   right: 28px;
   font-size: 20px;
   color: rgba(255, 255, 255, 0.2);
   transition: all 0.3s var(--ts-transition);
}
.ts-feature-card:hover .ts-feature-card__arrow {
   color: var(--ts-blue);
   transform: translateX(4px);
}

/* ============================================================
   SECTION 5: NUMBERS
   ============================================================ */
.ts-numbers {
   background: var(--ts-bg-light);
   padding: 120px 24px;
}
.ts-numbers__inner {
   max-width: var(--ts-max-width);
   margin: 0 auto;
   text-align: center;
}
.ts-numbers__eyebrow {
   display: inline-block;
   font-size: 13px;
   font-weight: 700;
   color: var(--ts-blue);
   letter-spacing: 0.12em;
   text-transform: uppercase;
   margin-bottom: 16px;
}
.ts-numbers__title {
   font-size: clamp(28px, 4vw, 40px);
   font-weight: 800;
   color: var(--ts-text-primary);
   letter-spacing: -0.03em;
   margin: 0 0 56px;
}
.ts-numbers__grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 24px;
}
.ts-number-card {
   padding: 40px 20px;
   border-radius: var(--ts-radius-lg);
   background: var(--ts-bg-gray);
   transition: all 0.3s var(--ts-transition);
}
.ts-number-card:hover {
   transform: translateY(-4px);
   box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
}
.ts-number-card__value {
   font-size: clamp(36px, 5vw, 52px);
   font-weight: 900;
   color: var(--ts-text-primary);
   display: inline;
   letter-spacing: -0.03em;
}
.ts-number-card__unit {
   font-size: clamp(20px, 3vw, 28px);
   font-weight: 800;
   color: var(--ts-blue);
   display: inline;
   margin-left: 2px;
}
.ts-number-card__label {
   font-size: 15px;
   color: var(--ts-text-secondary);
   margin-top: 8px;
   font-weight: 500;
}

/* ============================================================
   SECTION 6: COMPARE — Before/After
   ============================================================ */
.ts-compare {
   background: var(--ts-bg-light);
   padding: 120px 24px;
   position: relative;
   overflow: hidden;
}

.ts-compare::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: radial-gradient(circle at 100% 0%, rgba(49, 130, 246, 0.04) 0%, transparent 40%),
               radial-gradient(circle at 0% 100%, rgba(49, 130, 246, 0.04) 0%, transparent 40%);
   pointer-events: none;
}

.ts-compare__inner {
   max-width: 1000px;
   margin: 0 auto;
   text-align: center;
   position: relative;
   z-index: 1;
}
.ts-compare__eyebrow {
   display: inline-block;
   font-size: 13px;
   font-weight: 700;
   color: var(--ts-blue);
   letter-spacing: 0.12em;
   text-transform: uppercase;
   margin-bottom: 16px;
}
.ts-compare__title {
   font-size: clamp(26px, 4vw, 42px);
   font-weight: 800;
   color: var(--ts-text-primary);
   line-height: 1.35;
   letter-spacing: -0.03em;
   margin: 0 0 64px;
}
.ts-compare__accent {
   color: var(--ts-blue);
}

/* Compare Grid */
.ts-compare__grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 0;
   background: #ffffff;
   border-radius: 24px;
   box-shadow: 0 12px 40px rgba(0,0,0,0.06);
   overflow: hidden;
   position: relative;
}

/* VS divider */
.ts-compare__grid::after {
   content: 'VS';
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   background: #ffffff;
   color: #9ca3af;
   width: 48px;
   height: 48px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 800;
   font-size: 14px;
   box-shadow: 0 4px 12px rgba(0,0,0,0.1);
   z-index: 10;
   letter-spacing: -0.02em;
}

/* Compare Cards */
.ts-compare__card {
   text-align: left;
   padding: 48px 40px;
   display: flex;
   flex-direction: column;
   height: 100%;
}
.ts-compare__card--before {
   background: #f8fafc;
}
.ts-compare__card--after {
   background: var(--ts-blue);
   position: relative;
}
.ts-compare__card--after::before {
   content: '';
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 100%);
   pointer-events: none;
}

/* Badge area */
.ts-compare__header {
   margin-bottom: 32px;
   display: flex;
   align-items: center;
   gap: 12px;
   border-bottom: 2px solid;
   padding-bottom: 24px;
}
.ts-compare__card--before .ts-compare__header {
   border-color: rgba(0,0,0,0.05);
}
.ts-compare__card--after .ts-compare__header {
   border-color: rgba(255,255,255,0.15);
}

.ts-compare__badge {
   font-size: 12px;
   font-weight: 800;
   letter-spacing: 0.1em;
   padding: 6px 14px;
   border-radius: 20px;
}
.ts-compare__badge--before {
   background: #ef4444;
   color: #ffffff;
}
.ts-compare__badge--after {
   background: #ffffff;
   color: var(--ts-blue);
}

/* Items List */
.ts-compare__list {
   display: flex;
   flex-direction: column;
   gap: 20px;
   position: relative;
   z-index: 1;
}

.ts-compare__item {
   display: flex;
   align-items: center;
   gap: 14px;
   font-size: 16px;
   line-height: 1.5;
   font-weight: 500;
}
.ts-compare__card--before .ts-compare__item {
   color: #4b5563;
}
.ts-compare__card--after .ts-compare__item {
   color: #ffffff;
}

/* Icons styling */
.ts-compare__icon-wrap {
   width: 28px;
   height: 28px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
}

.ts-compare__card--before .ts-compare__icon-wrap {
   background: rgba(239, 68, 68, 0.1);
   color: #ef4444;
}

.ts-compare__card--after .ts-compare__icon-wrap {
   background: rgba(255, 255, 255, 0.2);
   color: #ffffff;
}

/* ============================================================
   SECTION 7: PROCESS — How It Works
   ============================================================ */
.ts-process {
   background: var(--ts-bg-light);
   padding: 120px 24px;
}
.ts-process__inner {
   max-width: var(--ts-max-width);
   margin: 0 auto;
   text-align: center;
}
.ts-process__eyebrow {
   display: inline-block;
   font-size: 13px;
   font-weight: 700;
   color: var(--ts-blue);
   letter-spacing: 0.12em;
   text-transform: uppercase;
   margin-bottom: 16px;
}
.ts-process__title {
   font-size: clamp(26px, 4vw, 38px);
   font-weight: 800;
   color: var(--ts-text-primary);
   line-height: 1.35;
   letter-spacing: -0.03em;
   margin: 0 0 60px;
}

.ts-process__steps-grid {
   position: relative;
   max-width: 1100px;
   margin: 0 auto;
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 20px;
   z-index: 1;
}

/* Track Line for Desktop behind cards */
.ts-process__steps-grid::before {
   content: '';
   position: absolute;
   top: 48px; /* aligns with icon center */
   left: 10%;
   right: 10%;
   height: 2px;
   background: linear-gradient(90deg, rgba(49, 130, 246, 0.1) 0%, rgba(49, 130, 246, 0.6) 50%, rgba(49, 130, 246, 0.1) 100%);
   z-index: -1;
}

/* Step Card */
.ts-process__step-card {
   background: #ffffff;
   border-radius: 20px;
   padding: 32px 24px;
   box-shadow: 0 4px 24px rgba(0,0,0,0.03);
   border: 1px solid rgba(0,0,0,0.04);
   transition: transform 0.3s ease, box-shadow 0.3s ease;
   position: relative;
   overflow: hidden;
   text-align: left;
   display: flex;
   flex-direction: column;
}

.ts-process__step-card:hover {
   transform: translateY(-6px);
   box-shadow: 0 16px 40px rgba(49, 130, 246, 0.1);
   border-color: rgba(49, 130, 246, 0.2);
}

/* Background Number */
.ts-process__step-num {
   position: absolute;
   right: 12px;
   top: -10px;
   font-size: 100px;
   font-weight: 900;
   color: rgba(49, 130, 246, 0.04);
   line-height: 1;
   pointer-events: none;
   user-select: none;
   letter-spacing: -0.05em;
   transition: color 0.3s ease;
}
.ts-process__step-card:hover .ts-process__step-num {
   color: rgba(49, 130, 246, 0.08);
}

/* Icon */
.ts-process__step-icon {
   width: 56px;
   height: 56px;
   background: #e8f3ff;
   border-radius: 14px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 24px;
   color: #3182f6;
   box-shadow: 0 4px 12px rgba(49, 130, 246, 0.15);
   transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}
.ts-process__step-card:hover .ts-process__step-icon {
   transform: scale(1.05);
   background: #3182f6;
   color: #ffffff;
}

/* Title */
.ts-process__step-title {
   font-size: 18px;
   font-weight: 800;
   color: var(--ts-text-primary);
   margin-bottom: 12px;
   letter-spacing: -0.02em;
}

/* Desc */
.ts-process__step-desc {
   font-size: 14px;
   color: var(--ts-text-secondary);
   line-height: 1.6;
   margin-bottom: 24px;
   flex-grow: 1;
}

/* Bullets Details */
.ts-process__step-bullets {
   list-style: none;
   padding: 0;
   margin: 0;
   border-top: 1px dashed var(--ts-border);
   padding-top: 16px;
}

.ts-process__step-bullets li {
   font-size: 13px;
   color: #6b7684;
   margin-bottom: 8px;
   display: flex;
   align-items: flex-start;
   gap: 8px;
   line-height: 1.4;
   font-weight: 500;
}
.ts-process__step-bullets li:last-child {
   margin-bottom: 0;
}

.ts-process__step-bullets li::before {
   content: '✓';
   color: #3182f6;
   font-weight: 900;
   font-size: 12px;
   margin-top: 1px;
}

/* ============================================================
   SECTION 8: HOT FEATURES — Swiper
   ============================================================ */
.ts-hot {
   background: var(--ts-bg-dark);
   padding: 120px 24px;
}
.ts-hot__inner {
   max-width: var(--ts-max-width);
   margin: 0 auto;
   text-align: center;
}
.ts-hot__eyebrow {
   display: inline-block;
   font-size: 13px;
   font-weight: 700;
   color: var(--ts-blue);
   letter-spacing: 0.12em;
   text-transform: uppercase;
   margin-bottom: 16px;
}
.ts-hot__title {
   font-size: clamp(26px, 4vw, 38px);
   font-weight: 800;
   color: var(--ts-text-white);
   letter-spacing: -0.03em;
   margin: 0 0 48px;
}

/* Swiper Cards */
.ts-hot__swiper {
   padding-bottom: 20px;
}
.ts-hot__card {
   display: block;
   background: rgba(255, 255, 255, 0.04);
   border: 1px solid rgba(255, 255, 255, 0.06);
   border-radius: var(--ts-radius-lg);
   overflow: hidden;
   text-decoration: none;
   transition: all 0.3s var(--ts-transition);
}
.ts-hot__card:hover {
   background: rgba(255, 255, 255, 0.08);
   border-color: rgba(49, 130, 246, 0.3);
   transform: translateY(-4px);
   text-decoration: none;
}
.ts-hot__img-wrap {
   position: relative;
   overflow: hidden;
   height: 200px;
}
.ts-hot__img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.4s var(--ts-transition);
}
.ts-hot__card:hover .ts-hot__img {
   transform: scale(1.05);
}
.ts-hot__badge {
   position: absolute;
   top: 12px;
   left: 12px;
   padding: 4px 10px;
   border-radius: 8px;
   font-size: 11px;
   font-weight: 700;
   background: rgba(0, 0, 0, 0.6);
   color: white;
   backdrop-filter: blur(8px);
}
.ts-hot__badge--best {
   background: rgba(49, 130, 246, 0.85);
}
.ts-hot__badge--hot {
   background: rgba(239, 68, 68, 0.85);
}
.ts-hot__badge--custom {
   background: rgba(99, 102, 241, 0.85);
}

.ts-hot__content {
   padding: 20px;
   text-align: left;
}
.ts-hot__category {
   font-size: 12px;
   font-weight: 600;
   color: var(--ts-blue);
   margin-bottom: 6px;
}
.ts-hot__card-title {
   font-size: 17px;
   font-weight: 700;
   color: var(--ts-text-white);
   margin: 0 0 8px;
   letter-spacing: -0.02em;
   line-height: 1.3;
}
.ts-hot__desc {
   font-size: 13px;
   color: var(--ts-text-tertiary);
   line-height: 1.55;
   margin: 0;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
}

/* Swiper Nav */
.ts-hot__nav.swiper-button-next,
.ts-hot__nav.swiper-button-prev {
   color: white;
   background: rgba(255, 255, 255, 0.1);
   width: 44px;
   height: 44px;
   border-radius: 50%;
   transition: background 0.2s;
}
.ts-hot__nav.swiper-button-next:hover,
.ts-hot__nav.swiper-button-prev:hover {
   background: rgba(255, 255, 255, 0.2);
}
.ts-hot__nav.swiper-button-next::after,
.ts-hot__nav.swiper-button-prev::after {
   font-size: 18px;
}

.ts-hot__footer {
   margin-top: 40px;
}

/* ============================================================
   SECTION 9: CLIENTS
   ============================================================ */
.ts-clients {
   background: var(--ts-bg-light);
   padding: 120px 24px;
}
.ts-clients__inner {
   max-width: var(--ts-max-width);
   margin: 0 auto;
   text-align: center;
}
.ts-clients__eyebrow {
   display: inline-block;
   font-size: 13px;
   font-weight: 700;
   color: var(--ts-blue);
   letter-spacing: 0.12em;
   text-transform: uppercase;
   margin-bottom: 16px;
}
.ts-clients__title {
   font-size: clamp(26px, 4vw, 38px);
   font-weight: 800;
   color: var(--ts-text-primary);
   line-height: 1.4;
   letter-spacing: -0.03em;
   margin: 0 0 48px;
}

/* ============================================================
   SECTION 10: REVIEWS
   ============================================================ */
.ts-reviews {
   background: var(--ts-bg-gray);
   padding: 120px 24px;
}
.ts-reviews__inner {
   max-width: var(--ts-max-width);
   margin: 0 auto;
   text-align: center;
}
.ts-reviews__eyebrow {
   display: inline-block;
   font-size: 13px;
   font-weight: 700;
   color: var(--ts-blue);
   letter-spacing: 0.12em;
   text-transform: uppercase;
   margin-bottom: 16px;
}
.ts-reviews__title {
   font-size: clamp(26px, 4vw, 38px);
   font-weight: 800;
   color: var(--ts-text-primary);
   letter-spacing: -0.03em;
   margin: 0 0 48px;
}
.review-list {
   text-align: left;
}

/* ============================================================
   SECTION 11: FINAL CTA
   ============================================================ */
.ts-cta {
   background: var(--ts-bg-dark);
   padding: 140px 24px;
   position: relative;
   overflow: hidden;
}
.ts-cta::before {
   content: '';
   position: absolute;
   top: -200px;
   left: 50%;
   transform: translateX(-50%);
   width: 800px;
   height: 800px;
   background: radial-gradient(circle, rgba(49, 130, 246, 0.15) 0%, rgba(49, 130, 246, 0.05) 30%, transparent 60%);
   pointer-events: none;
}
.ts-cta::after {
   content: '';
   position: absolute;
   bottom: -100px;
   right: -100px;
   width: 400px;
   height: 400px;
   background: radial-gradient(circle, rgba(99, 102, 241, 0.08) 0%, transparent 60%);
   pointer-events: none;
}
.ts-cta__inner {
   position: relative;
   z-index: 2;
   max-width: 720px;
   margin: 0 auto;
   text-align: center;
}
.ts-cta__badge {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: rgba(49, 130, 246, 0.12);
   border: 1px solid rgba(49, 130, 246, 0.2);
   color: var(--ts-blue);
   font-size: 13px;
   font-weight: 700;
   letter-spacing: 0.05em;
   padding: 8px 20px;
   border-radius: 100px;
   margin-bottom: 32px;
}
.ts-cta__badge svg {
   flex-shrink: 0;
}
.ts-cta__title {
   font-size: clamp(32px, 5vw, 48px);
   font-weight: 800;
   color: white;
   line-height: 1.3;
   letter-spacing: -0.03em;
   margin: 0 0 20px;
}
.ts-cta__desc {
   font-size: clamp(15px, 2vw, 18px);
   color: rgba(255, 255, 255, 0.55);
   line-height: 1.7;
   margin: 0 0 44px;
}
.ts-cta__buttons {
   display: flex;
   gap: 14px;
   justify-content: center;
   flex-wrap: wrap;
   margin-bottom: 48px;
}
.ts-cta__btn-primary {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   background: var(--ts-blue);
   color: white;
   padding: 18px 40px;
   border-radius: 16px;
   font-size: 17px;
   font-weight: 700;
   font-family: var(--ts-font);
   border: none;
   cursor: pointer;
   transition: all 0.25s var(--ts-transition);
   letter-spacing: -0.01em;
}
.ts-cta__btn-primary:hover {
   background: var(--ts-blue-dark);
   transform: translateY(-2px);
   box-shadow: 0 8px 32px rgba(49, 130, 246, 0.35);
}
.ts-cta__btn-secondary {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   background: rgba(255, 255, 255, 0.06);
   color: rgba(255, 255, 255, 0.8);
   padding: 18px 36px;
   border-radius: 16px;
   font-size: 17px;
   font-weight: 600;
   font-family: var(--ts-font);
   border: 1px solid rgba(255, 255, 255, 0.1);
   cursor: pointer;
   transition: all 0.25s var(--ts-transition);
   backdrop-filter: blur(10px);
   letter-spacing: -0.01em;
}
.ts-cta__btn-secondary:hover {
   background: rgba(255, 255, 255, 0.1);
   border-color: rgba(255, 255, 255, 0.25);
   color: white;
   transform: translateY(-2px);
}
.ts-cta__divider {
   width: 48px;
   height: 1px;
   background: rgba(255, 255, 255, 0.1);
   margin: 0 auto 36px;
}
.ts-cta__features {
   display: flex;
   gap: 32px;
   justify-content: center;
   flex-wrap: wrap;
}
.ts-cta__features span {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-size: 14px;
   font-weight: 600;
   color: rgba(255, 255, 255, 0.45);
}
.ts-cta__features span::before {
   content: '';
   display: inline-block;
   width: 18px;
   height: 18px;
   background: rgba(49, 130, 246, 0.15);
   border-radius: 50%;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%233182f6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: center;
   background-size: 10px;
   flex-shrink: 0;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.ts-btn {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-family: var(--ts-font);
   font-weight: 700;
   border: none;
   cursor: pointer;
   transition: all 0.25s var(--ts-transition);
   text-decoration: none;
   letter-spacing: -0.01em;
}
.ts-btn--primary {
   background: var(--ts-blue);
   color: white;
   padding: 14px 28px;
   border-radius: 14px;
   font-size: 16px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
}
.ts-btn--primary:hover {
   background: var(--ts-blue-dark);
   transform: translateY(-2px);
   box-shadow: 0 8px 24px rgba(49, 130, 246, 0.3);
   color: white;
   text-decoration: none;
}
.ts-btn--secondary {
   background: rgba(255, 255, 255, 0.05);
   color: var(--ts-text-white);
   padding: 14px 28px;
   border-radius: 14px;
   font-size: 16px;
   border: 1px solid rgba(255, 255, 255, 0.1);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   backdrop-filter: blur(10px);
}
.ts-btn--secondary:hover {
   background: rgba(255, 255, 255, 0.1);
   transform: translateY(-2px);
   color: white;
   text-decoration: none;
   border-color: rgba(255, 255, 255, 0.2);
}
.ts-btn--lg {
   padding: 16px 36px;
   font-size: 18px;
   font-weight: 600;
}
   font-size: 17px;
   border-radius: 16px;
}
.ts-btn--white {
   background: white;
   color: var(--ts-blue);
   padding: 16px 36px;
   border-radius: 16px;
   font-size: 17px;
}
.ts-btn--white:hover {
   background: #f0f4ff;
   transform: translateY(-2px);
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
   color: var(--ts-blue);
   text-decoration: none;
}
.ts-btn--ghost-w {
   background: transparent;
   border: 1px solid rgba(255, 255, 255, 0.3);
   color: white;
   padding: 14px 28px;
   border-radius: 14px;
   font-size: 16px;
}
.ts-btn--ghost-w:hover {
   background: rgba(255, 255, 255, 0.1);
   border-color: rgba(255, 255, 255, 0.5);
   color: white;
   text-decoration: none;
}
.ts-btn--outline {
   background: transparent;
   border: 1px solid rgba(255, 255, 255, 0.2);
   color: rgba(255, 255, 255, 0.8);
   padding: 12px 24px;
   border-radius: 12px;
   font-size: 15px;
}
.ts-btn--outline:hover {
   background: rgba(255, 255, 255, 0.08);
   border-color: rgba(255, 255, 255, 0.4);
   color: white;
   text-decoration: none;
}

/* ============================================================
   RESPONSIVE — Tablet
   ============================================================ */
@media (max-width: 1024px) {
   .ts-hero__icons-grid {
      grid-template-columns: repeat(4, 1fr);
      gap: 20px 16px;
   }
   .ts-hero__3d-icon {
      width: 64px;
      height: 64px;
   }
   .ts-maintain__showcases {
      grid-template-columns: 1fr;
      gap: 60px;
   }
   .ts-features__grid {
      grid-template-columns: repeat(2, 1fr);
   }
   .ts-numbers__grid {
      grid-template-columns: repeat(2, 1fr);
   }
   .ts-process__steps-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 24px;
   }
   .ts-process__steps-grid::before {
      display: none;
   }
}

/* ============================================================
   RESPONSIVE — Mobile
   ============================================================ */
@media (max-width: 640px) {
   .ts-hero__cta {
      flex-direction: column;
      gap: 12px;
      padding: 0 16px;
   }
   .ts-btn--lg {
      width: 100%;
   }
   .ts-hero__icons-grid {
      grid-template-columns: repeat(4, 1fr);
      gap: 16px 12px;
   }
   .ts-hero__3d-icon {
      width: 52px;
      height: 52px;
   }
   .ts-hero__icon-label {
      font-size: 11px;
   }
   .ts-hero {
      min-height: auto;
      padding: 0;
   }
   .ts-hero__inner {
      padding: 100px 20px 48px;
   }
   .ts-hero__visual {
      max-width: 100%;
   }

   .ts-intro {
      padding: 80px 20px;
   }

   .ts-maintain {
      padding: 80px 20px;
   }
   .ts-phone__frame {
      width: 240px;
   }
   .ts-phone__screen {
      min-height: 320px;
   }

   .ts-features {
      padding: 80px 20px;
   }
   .ts-features__grid {
      grid-template-columns: 1fr;
   }
   .ts-feature-card {
      padding: 28px 24px;
   }

   .ts-numbers {
      padding: 80px 20px;
   }
   .ts-numbers__grid {
      grid-template-columns: 1fr 1fr;
      gap: 16px;
   }
   .ts-number-card {
      padding: 28px 16px;
   }

   .ts-compare {
      padding: 80px 20px;
   }
   .ts-compare__grid {
      grid-template-columns: 1fr;
   }

   .ts-process {
      padding: 80px 20px;
   }
   .ts-process__steps-grid {
      grid-template-columns: 1fr;
      gap: 20px;
   }

   .ts-hot {
      padding: 80px 20px;
   }
   .ts-hot__img-wrap {
      height: 180px;
   }

   .ts-clients {
      padding: 80px 20px;
   }
   .ts-reviews {
      padding: 80px 20px;
   }
   .ts-cta {
      padding: 100px 20px;
   }

   .ts-cta__buttons {
      flex-direction: column;
      align-items: center;
   }
   .ts-cta__btn-primary,
   .ts-cta__btn-secondary {
      width: 100%;
      max-width: 320px;
   }
   .ts-cta__features {
      flex-direction: column;
      gap: 12px;
   }
}

/* ============================================================
   UTILITY — Spinner
   ============================================================ */
.loading-spinner {
   text-align: center;
   padding: 40px;
}
.spinner {
   width: 36px;
   height: 36px;
   border: 3px solid var(--ts-border);
   border-top-color: var(--ts-blue);
   border-radius: 50%;
   animation: tsSpinner 0.7s linear infinite;
   margin: 0 auto;
}
@keyframes tsSpinner {
   to {
      transform: rotate(360deg);
   }
}

/* ============================================================
   PORTFOLIO OVERRIDE (Existing components)
   ============================================================ */
.portfolio-container {
   max-width: var(--ts-max-width);
   margin: 0 auto;
}