@import url("https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,400;0,600;0,700;0,800;1,400&display=swap");

:root {
      --ctc-purple: #7f77dd;
      --ctc-purple-soft: #eeedfe;
      --ctc-dark: #1a1040;
      --ctc-orange: #ff7d4d;
      --ctc-orange-highlight: #ff8a5c;
      --ctc-text: #383842;
      --ctc-text-muted: #797986;
      --ctc-border: #e0dbf0;
      --ctc-white: #ffffff;
      --ctc-max: 1280px;
      --ctc-header-offset: 80px;
      --ctc-font: "Urbanist", sans-serif;
}

*,
*::before,
*::after {
      box-sizing: border-box;
}

body.ctc-page {
      margin: 0;
      padding-top: var(--ctc-header-offset);
      font-family: var(--ctc-font);
      color: var(--ctc-text);
      background: var(--ctc-white);
      -webkit-font-smoothing: antialiased;
}

.ctc-section {
      padding: 48px 16px 64px;
}

.ctc-container {
      width: 100%;
      max-width: var(--ctc-max);
      margin: 0 auto;
}

.ctc-back-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 32px;
      font-size: 14px;
      color: var(--ctc-text-muted);
      text-decoration: none;
      transition: color 0.2s ease;
}

.ctc-back-link:hover {
      color: var(--ctc-text);
}

.ctc-intro {
      margin-bottom: 40px;
}

.ctc-title {
      margin: 0 0 16px;
      font-size: clamp(32px, 5vw, 48px);
      font-weight: 700;
      line-height: 1.15;
      color: var(--ctc-text);
}

.ctc-lead {
      margin: 0;
      max-width: 672px;
      font-size: 18px;
      line-height: 1.55;
      color: var(--ctc-text-muted);
}

.ctc-card {
      display: grid;
      grid-template-columns: 1fr;
      border: 1px solid var(--ctc-border);
      border-radius: 2rem;
      background: var(--ctc-white);
      box-shadow: 0 32px 64px -16px rgba(0, 0, 0, 0.08);
      overflow: hidden;
}

.ctc-inputs {
      padding: 32px 24px;
      display: flex;
      flex-direction: column;
      justify-content: center;
}

.ctc-fields {
      display: flex;
      flex-direction: column;
      gap: 32px;
}

.ctc-field {
      display: flex;
      flex-direction: column;
      gap: 16px;
}

.ctc-field-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
}

.ctc-field-label {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: clamp(16px, 2.5vw, 20px);
      font-weight: 500;
      color: rgba(56, 56, 66, 0.85);
      line-height: 1.35;
}

.ctc-info-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 20px;
      height: 20px;
      padding: 0;
      border: none;
      background: none;
      color: var(--ctc-text-muted);
      cursor: pointer;
      transition: color 0.2s ease;
}

.ctc-info-btn:hover,
.ctc-info-btn:focus-visible {
      color: var(--ctc-text);
      outline: none;
}

.ctc-info-btn svg {
      width: 14px;
      height: 14px;
}

.ctc-tooltip {
      position: relative;
      display: inline-flex;
}

.ctc-tooltip-content {
      position: absolute;
      bottom: calc(100% + 8px);
      left: 50%;
      transform: translateX(-50%);
      z-index: 20;
      width: max-content;
      max-width: 280px;
      padding: 8px 12px;
      border-radius: 8px;
      background: var(--ctc-dark);
      color: var(--ctc-white);
      font-size: 13px;
      line-height: 1.45;
      text-align: center;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 0.2s ease, visibility 0.2s ease;
}

.ctc-tooltip-content::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      border: 6px solid transparent;
      border-top-color: var(--ctc-dark);
}

.ctc-tooltip:hover .ctc-tooltip-content,
.ctc-tooltip:focus-within .ctc-tooltip-content {
      opacity: 1;
      visibility: visible;
}

.ctc-field-value {
      flex-shrink: 0;
      padding: 4px 12px;
      border: 1px solid #e2dffb;
      border-radius: 15px;
      background: var(--ctc-purple-soft);
      color: var(--ctc-purple);
      font-size: 14px;
      font-weight: 600;
      white-space: nowrap;
}

.ctc-slider {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: 8px;
      border-radius: 999px;
      background: linear-gradient(
            to right,
            var(--ctc-purple) 0%,
            var(--ctc-purple) var(--ctc-fill, 0%),
            #e8e6f5 var(--ctc-fill, 0%),
            #e8e6f5 100%
      );
      outline: none;
      cursor: pointer;
}

.ctc-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 20px;
      height: 20px;
      border: 2px solid #d4d0e8;
      border-radius: 50%;
      background: var(--ctc-white);
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
      cursor: pointer;
      transition: box-shadow 0.2s ease;
}

.ctc-slider::-webkit-slider-thumb:hover {
      box-shadow: 0 2px 10px rgba(127, 119, 221, 0.35);
}

.ctc-slider::-moz-range-thumb {
      width: 20px;
      height: 20px;
      border: 2px solid #d4d0e8;
      border-radius: 50%;
      background: var(--ctc-white);
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
      cursor: pointer;
}

.ctc-slider::-moz-range-track {
      height: 6px;
      border-radius: 999px;
      background: #e8e6f5;
}

.ctc-disclaimer {
      margin: 48px 0 0;
      font-size: 11px;
      font-style: italic;
      text-align: center;
      color: var(--ctc-text-muted);
}

/* Results panel */
.ctc-results {
      position: relative;
      padding: 32px 24px;
      background: var(--ctc-dark);
      color: var(--ctc-white);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: center;
}

.ctc-results-grid-bg {
      position: absolute;
      inset: 0;
      opacity: 0.07;
      background-image:
            linear-gradient(rgba(255, 255, 255, 0.6) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255, 255, 255, 0.6) 1px, transparent 1px);
      background-size: 40px 40px;
      animation: ctcGridDrift 12s linear infinite;
      mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
      -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
      pointer-events: none;
}

.ctc-results-aura {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 140%;
      height: 140%;
      transform: translate(-50%, -50%);
      background: conic-gradient(
            from 0deg,
            rgba(127, 119, 221, 0) 0%,
            rgba(127, 119, 221, 0.35) 25%,
            rgba(127, 119, 221, 0) 50%,
            rgba(160, 150, 240, 0.35) 75%,
            rgba(127, 119, 221, 0) 100%
      );
      filter: blur(60px);
      opacity: 0.3;
      animation: ctcSpin 22s linear infinite;
      pointer-events: none;
}

.ctc-results-blob {
      position: absolute;
      border-radius: 50%;
      filter: blur(70px);
      pointer-events: none;
}

.ctc-results-blob--a {
      top: -40px;
      right: -40px;
      width: 288px;
      height: 288px;
      background: rgba(127, 119, 221, 0.6);
      animation: ctcFloatA 11s ease-in-out infinite;
}

.ctc-results-blob--b {
      bottom: -40px;
      left: -40px;
      width: 288px;
      height: 288px;
      background: rgba(100, 90, 200, 0.5);
      animation: ctcFloatB 13s ease-in-out infinite;
}

.ctc-results-blob--c {
      top: 50%;
      left: 50%;
      width: 320px;
      height: 320px;
      background: rgba(140, 130, 230, 0.25);
      animation: ctcFloatC 16s ease-in-out infinite;
}

.ctc-results-shimmer {
      position: absolute;
      inset: 0;
      opacity: 0.7;
      background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.14) 50%, transparent 70%);
      background-size: 200% 100%;
      animation: ctcShimmer 7s linear infinite;
      pointer-events: none;
}

.ctc-sparkle {
      position: absolute;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--ctc-white);
      box-shadow: 0 0 10px rgba(255, 255, 255, 0.9);
      animation: ctcSparkle 3s ease-in-out infinite;
      pointer-events: none;
}

.ctc-sparkle--1 { top: 18%; left: 20%; animation-delay: 0s; }
.ctc-sparkle--2 { top: 28%; left: 82%; animation-delay: 1.2s; }
.ctc-sparkle--3 { top: 62%; left: 15%; animation-delay: 2.4s; }
.ctc-sparkle--4 { top: 78%; left: 85%; animation-delay: 0.6s; }
.ctc-sparkle--5 { top: 45%; left: 92%; animation-delay: 1.8s; }

.ctc-results-inner {
      position: relative;
      z-index: 1;
      width: 100%;
}

.ctc-results-heading {
      margin: 0 0 40px;
      font-size: 20px;
      font-weight: 600;
      letter-spacing: -0.01em;
      opacity: 0.9;
}

.ctc-metric {
      margin-bottom: 40px;
}

.ctc-metric:last-of-type {
      margin-bottom: 0;
}

.ctc-metric-value {
      margin-bottom: 4px;
      font-size: 36px;
      font-weight: 700;
      line-height: 1.1;
      color: var(--ctc-white);
}

.ctc-metric-value--md {
      font-size: 30px;
}

.ctc-metric-value--highlight {
      font-size: 36px;
      font-weight: 800;
      color: var(--ctc-orange-highlight);
      text-shadow: 0 0 24px rgba(255, 138, 92, 0.35);
}

.ctc-metric-label {
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.5);
}

.ctc-metric-label--bold {
      font-weight: 700;
      color: var(--ctc-white);
}

.ctc-divider {
      width: 48px;
      height: 1px;
      margin: 0 auto 40px;
      background: rgba(255, 255, 255, 0.1);
}

.ctc-highlight-box {
      margin-bottom: 48px;
      padding: 20px;
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
}

.ctc-results-footer {
      display: flex;
      flex-direction: column;
      gap: 24px;
}

.ctc-results-note {
      margin: 0;
      font-size: 12px;
      line-height: 1.6;
      color: rgba(255, 255, 255, 0.6);
}

.ctc-demo-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      padding: 16px;
      border-radius: 12px;
      background: var(--ctc-orange);
      color: var(--ctc-white);
      font-size: 16px;
      font-weight: 700;
      text-decoration: none;
      box-shadow: 0 12px 24px -8px rgba(255, 125, 77, 0.4);
      transition: transform 0.2s ease;
}

.ctc-demo-btn:hover {
      transform: scale(1.02);
}

.ctc-results-fineprint {
      margin: 0;
      font-size: 10px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.4);
}

@keyframes ctcFloatA {
      0%, 100% { transform: translate(0, 0) scale(1); }
      33% { transform: translate(25px, -20px) scale(1.15); }
      66% { transform: translate(-15px, 15px) scale(0.95); }
}

@keyframes ctcFloatB {
      0%, 100% { transform: translate(0, 0) scale(1); }
      33% { transform: translate(-25px, 20px) scale(1.2); }
      66% { transform: translate(20px, -10px) scale(0.9); }
}

@keyframes ctcFloatC {
      0%, 100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
      50% { transform: translate(-45%, -55%) scale(1.15) rotate(180deg); }
}

@keyframes ctcShimmer {
      0% { background-position: -100% 0; }
      100% { background-position: 200% 0; }
}

@keyframes ctcSpin {
      0% { transform: translate(-50%, -50%) rotate(0deg); }
      100% { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes ctcGridDrift {
      0% { background-position: 0 0; }
      100% { background-position: 40px 40px; }
}

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

@media (min-width: 1024px) {
      .ctc-section {
            padding: 64px 32px 64px;
      }

      .ctc-inputs {
            padding: 56px 51px;
      }

      .ctc-card {
            grid-template-columns: 1fr 420px;
      }

      .ctc-results {
            padding: 48px 32px;
      }
}

@media (prefers-reduced-motion: reduce) {
      .ctc-results-grid-bg,
      .ctc-results-aura,
      .ctc-results-blob,
      .ctc-results-shimmer,
      .ctc-sparkle {
            animation: none !important;
      }
}