:root {
     --bg-primary: #0a0a0f;
     --bg-secondary: #101016;
     --bg-card: #14141c;
     --bg-card-hover: #0d1a18;
     /* --accent: #00d4aa;
      --accent-purple: #a855f7;
      --accent-blue: #00a8ff;
      --accent-yellow: #c8e944;
      --accent-glow: rgba(0, 212, 170, 0.15);
      --accent-soft: rgba(0, 212, 170, 0.08);
      --problem-red: #c8e944;
      --problem-red-soft: rgba(0, 212, 170, 0.15);
      --problem-red-border: rgba(222, 255, 77, 0.2);
      --problem-bg: rgb(200, 232, 70, 0.06); */

     /* IDP Accent - Blue */
     --accent: #3b82f6;
     --accent-glow: rgba(59, 130, 246, 0.15);
     --accent-soft: rgba(59, 130, 246, 0.08);
     --accent-border: rgba(59, 130, 246, 0.25);

     /* Problem colors */
     --problem-red: #ff4d6a;
     --problem-red-soft: rgba(255, 77, 106, 0.1);
     --problem-red-border: rgba(255, 77, 106, 0.2);
     --problem-bg: #160f11;


     --solution-green-border: rgba(0, 212, 170, 0.25);
     --text-primary: #f0f0f5;
     --text-secondary: #8a8a9a;
     --text-muted: #5a5a6a;
     --border: rgba(255, 255, 255, 0.06);
     --gradient-1: linear-gradient(135deg, #00d4aa 0%, #00a8ff 100%);
     --gradient-hero: linear-gradient(90deg, #00a8ff 0%, #00d4aa 40%, #c8e944 100%);
     --gradient-2: linear-gradient(180deg, rgba(0, 212, 170, 0.12) 0%, transparent 60%);

     /* Gradients */
     --gradient-cta: linear-gradient(135deg, #a855f7 0%, #6366f1 50%, #00a8ff 100%);
     --gradient-cta-hover: linear-gradient(135deg, #c084fc 0%, #818cf8 50%, #38bdf8 100%);

   }

   * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
   }

   html {
     scroll-behavior: smooth;
   }

   body {
     background: var(--bg-primary);
     color: var(--text-primary);
     line-height: 1.6;
     overflow-x: hidden;
   }

   /* Noise texture overlay */
   body::before {
     content: '';
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
     opacity: 0.03;
     pointer-events: none;
     z-index: 1000;
   }

   .container {
     max-width: 1320px;
     margin: 0 auto;
   }

   /* Navigation */
   nav {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     z-index: 100;
     padding: 1.25rem 0;
   }

   nav .container {
     display: flex;
     justify-content: space-between;
     align-items: center;
   }

   .logo {
     font-size: 1.5rem;
     font-weight: 800;
     letter-spacing: -0.02em;
     background: linear-gradient(135deg, #a855f7 0%, #6366f1 50%, #00a8ff 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
   }

   .nav-links {
     display: flex;
     gap: 2.5rem;
     align-items: center;
   }

   .nav-links a {
     font-size: 0.875rem;
     color: var(--text-secondary);
     transition: color 0.3s ease;
     position: relative;
   }

   .nav-links a:hover {
     color: var(--text-primary);
   }

   .nav-links a::after {
     content: '';
     position: absolute;
     bottom: -4px;
     left: 0;
     width: 0;
     height: 1px;
     background: var(--accent);
     transition: width 0.3s ease;
   }

   .nav-links a:hover::after {
     width: 100%;
   }

   .btn {
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
     padding: 0.75rem 1.5rem;
     font-size: 0.875rem;
     font-weight: 500;
     border-radius: 6px;
     cursor: pointer;
     transition: all 0.3s ease;
     border: none;
   }

   .btn-primary {
     background: linear-gradient(135deg, #a855f7 0%, #6366f1 50%, #00a8ff 100%);
     color: #ffffff;
   }

   .btn-primary:hover {
     background: linear-gradient(135deg, #c084fc 0%, #818cf8 50%, #38bdf8 100%);
     transform: translateY(-2px);
     box-shadow: 0 8px 30px rgba(99, 102, 241, 0.4);
   }

   .btn-secondary {
     background: transparent;
     color: var(--text-primary);
     border: 1px solid var(--border);
   }

   .btn-secondary:hover {
     border-color: var(--accent);
     background: var(--accent-soft);
   }

   /* Hero Section */
   .hero {
     min-height: 100vh;
     display: flex;
     align-items: center;
     padding: 8rem 0 0;
     position: relative;
     overflow: hidden;
   }


   .hero-grid {
     position: absolute;
     top: 0;
     right: 0;
     width: 50%;
     height: 100%;
     background-image:
       linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
       linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
     background-size: 60px 60px;
     mask-image: linear-gradient(to left, black 0%, transparent 80%);
     -webkit-mask-image: linear-gradient(to left, black 0%, transparent 80%);
   }

   .hero .container {
     position: relative;
     z-index: 1;
     text-align: left;
   }

   .hero-badge {
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
     padding: 0.5rem 1rem;
     background: rgba(224, 82, 111, 0.06);
  border: 1px solid #E0526F;
     border-radius: 100px;
     font-size: 0.8125rem;
     color: #E0526F;
     margin-bottom: 2rem;
     animation: fadeInUp 0.8s ease forwards;
   }

   .hero-badge::before {
     content: '';
     width: 6px;
     height: 6px;
     background: #E0526F;
     border-radius: 50%;
     animation: pulse 2s infinite;
   }

   @keyframes pulse {

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

     50% {
       opacity: 0.5;
       transform: scale(1.2);
     }
   }

   .hero h1 {
     font-family: 'gotham_htfbold' !important;
     font-size: clamp(3rem, 8vw, 5.5rem);
     letter-spacing: -0.03em;
     margin-bottom: 1.5rem;
     animation: fadeInUp 0.8s ease 0.1s forwards;
     opacity: 0;
     max-width: 1100px;
     line-height: 1.05;
   }

   .hero h1 .gradient-text {
     background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 50%, #93c5fd 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
   }

   .hero-subtitle {
     font-size: 1.25rem;
     color: var(--text-secondary);
     max-width: 550px;
     margin-bottom: 2.5rem;
     animation: fadeInUp 0.8s ease 0.2s forwards;
     opacity: 0;
     line-height: 1.6;
   }

   .hero-cta {
     display: flex;
     gap: 1.5rem;
     align-items: center;
     animation: fadeInUp 0.8s ease 0.3s forwards;
     opacity: 0;
   }

   @keyframes fadeInUp {
     from {
       opacity: 0;
       transform: translateY(20px);
     }

     to {
       opacity: 1;
       transform: translateY(0);
     }
   }

   /* .btn-white {
      background: var(--white);
      color: var(--black);
      padding: 14px 32px;
      font-weight: 600;
      font-size: 18px;
      border-radius: 50px;
    }

    .btn-white:hover {
      background: linear-gradient(135deg, #c084fc 0%, #818cf8 50%, #38bdf8 100%);
      transform: translateY(-2px);
      box-shadow: 0 8px 30px rgba(99, 102, 241, 0.4);
    }

    .btn-ghost {
      background: transparent;
      color: var(--text-primary);
      padding: 1rem 0;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      font-weight: 600;
      font-size: 18px;
    }

    .btn-ghost:hover {
      color: var(--accent);
    }

    .btn-ghost svg {
      transition: transform 0.3s ease;
    }

    .btn-ghost:hover svg {
      transform: translateX(4px);
    } */

   .btn-white {
     background: var(--gradient-cta);
     color: #ffffff;
     padding: 1rem 2rem;
     font-weight: 600;
     border-radius: 50px;
   }

   .btn-white:hover {
     background: var(--gradient-cta-hover);
     transform: translateY(-2px);
     box-shadow: 0 8px 30px rgba(99, 102, 241, 0.4);
   }

   .btn-ghost {
     background: transparent;
     color: var(--text-primary);
     padding: 1rem 0;
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
     font-weight: 500;
   }

   .btn-ghost:hover {
     color: var(--accent);
   }

   .btn-ghost svg {
     transition: transform 0.3s ease;
   }

   .btn-ghost:hover svg {
     transform: translateX(4px);
   }

   /* Section Label */
   .section-label {
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
     font-size: 0.75rem;
     text-transform: uppercase;
     letter-spacing: 0.1em;
     color: var(--accent);
     margin-bottom: 1rem;
   }

   body .section-label::before,
   body .section-label::after {
     content: '';
     width: 20px;
     height: 1px;
     background: var(--accent) !important;
   }

   /* Problem/Solution Tiles Section */
   .ps-section {
     padding: 6rem 0;
     background: var(--bg-primary);
     position: relative;
   }

   .ps-section::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 1px;
     background: linear-gradient(90deg, transparent, var(--border), transparent);
   }

   .ps-section .section-header {
     text-align: center;
     margin-bottom: 4rem;
   }

   .ps-section .section-header h2 {
     font-family: 'gotham_htfbold' !important;
     font-size: clamp(1.75rem, 4vw, 2.3rem);
     letter-spacing: -0.02em;
   }

   .ps-tiles {
     display: flex;
     flex-direction: column;
     gap: 1.5rem;
     max-width: 1100px;
     margin: 0 auto;
   }

   .ps-tile {
     position: relative;
     border-radius: 20px;
     overflow: hidden;
     cursor: pointer;
     height: 350px;
   }

   .tile-problem {
     position: absolute;
     inset: 0;
     background: var(--problem-bg);
     border: 1px solid var(--problem-red-border);
     border-radius: 20px;
     padding: 2.5rem;
     display: flex;
     flex-direction: column;
     transition: opacity 0.4s ease, transform 0.4s ease;
     z-index: 2;
   }

   .tile-problem::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 4px;
     height: 100%;
     background: var(--problem-red);
     border-radius: 20px 0 0 20px;
   }

   .tile-solution {
     position: absolute;
     inset: 0;
     background: var(--bg-card-hover);
     border: 1px solid var(--solution-green-border);
     border-radius: 20px;
     padding: 2.5rem;
     display: flex;
     flex-direction: column;
     opacity: 0;
     transform: scale(0.98);
     transition: opacity 0.4s ease, transform 0.4s ease;
     z-index: 1;
   }

   .tile-solution::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 4px;
     height: 100%;
     background: var(--accent);
     border-radius: 20px 0 0 20px;
   }

   .tile-solution::after {
     content: '';
     position: absolute;
     top: -50%;
     right: -20%;
     width: 60%;
     height: 200%;
     background: radial-gradient(ellipse at center, var(--accent-glow) 0%, transparent 70%);
     opacity: 0.5;
     pointer-events: none;
   }

   .ps-tile:hover .tile-problem {
     opacity: 0;
     transform: scale(0.98);
   }

   .ps-tile:hover .tile-solution {
     opacity: 1;
     transform: scale(1);
     z-index: 3;
   }

   .tile-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 1rem;
   }

   .tile-label {
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
     font-size: 0.6875rem;
     text-transform: uppercase;
     letter-spacing: 0.12em;
     font-weight: 600;
     padding: 0.375rem 0.875rem;
     border-radius: 100px;
   }

   .tile-problem .tile-label {
     background: rgb(255, 238, 77, 0.15);
     color: var(--problem-red);
   }

   .tile-solution .tile-label {
     background: rgba(0, 212, 170, 0.15);
     color: var(--accent);
   }

   .tile-label svg {
     width: 12px;
     height: 12px;
   }

   .hover-hint {
     font-size: 0.75rem;
     color: var(--text-muted);
     display: flex;
     align-items: center;
     gap: 0.375rem;
   }

   .hover-hint svg {
     width: 14px;
     height: 14px;
   }

   .tile-title {
     font-size: 1.5rem;
     font-weight: 700;
     margin-bottom: 0.5rem;
     letter-spacing: -0.01em;
   }

   .tile-problem .tile-title {
     color: var(--problem-red);
   }

   .tile-solution .tile-title {
     color: var(--accent);
   }

   .tile-desc {
     font-size: 1rem;
     color: var(--text-secondary);
     margin-bottom: 1.5rem;
     max-width: 600px;
   }

   .tile-stats {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 1rem;
     margin-top: auto;
   }

   .stat-item {
     background: rgba(0, 0, 0, 0.3);
     border-radius: 12px;
     padding: 1rem 1.25rem;
     border: 1px solid var(--border);
     transition: border-color 0.3s ease, transform 0.3s ease;
   }

   .tile-problem .stat-item {
     border-color: rgba(255, 77, 106, 0.15);
   }

   .tile-solution .stat-item {
     border-color: rgba(0, 212, 170, 0.15);
   }

   .ps-tile:hover .tile-solution .stat-item:hover {
     border-color: var(--accent);
     transform: translateY(-2px);
   }

   .stat-value {
     font-size: 1.5rem;
     font-weight: 700;
     margin-bottom: 0.25rem;
     line-height: 1;
   }

   .tile-problem .stat-value {
     color: var(--problem-red);
   }

   .tile-solution .stat-value {
     color: var(--accent);
   }

   .stat-label {
     font-size: 0.75rem;
     color: var(--text-muted);
     line-height: 1.3;
   }

   .tap-hint {
     display: none;
   }

   /* Features Section */
   .features {
     padding: 4rem 0;
     /* background: var(--bg-secondary); */
     position: relative;
   }

   .features::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 1px;
     background: linear-gradient(90deg, transparent, var(--border), transparent);
   }

   .features .container {
     text-align: center;
   }

   .features h2 {
     font-family: 'gotham_htfbold' !important;
     font-size: clamp(2rem, 4vw, 3rem);
     margin-bottom: 1rem;
   }

   .features-subtitle {
     color: var(--text-secondary);
     max-width: 600px;
     margin: 0 auto 4rem;
   }

   .features-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 1.5rem;
     text-align: left;
   }

   .feature-card {
     background: var(--bg-card);
     border: 1px solid var(--border);
     border-radius: 16px;
     padding: 2rem;
     transition: all 0.4s ease;
     position: relative;
     overflow: hidden;
   }

   .feature-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 2px;
     background: var(--gradient-1);
     opacity: 0;
     transition: opacity 0.4s ease;
   }

   .feature-card:hover {
     border-color: rgba(0, 212, 170, 0.3);
     transform: translateY(-4px);
   }

   .feature-card:hover::before {
     opacity: 1;
   }

   .feature-icon {
     width: 48px;
     height: 48px;
     background: var(--accent-soft);
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--accent);
     margin-bottom: 1.25rem;
   }

   .feature-card h3 {
     font-size: 1.125rem;
     margin-bottom: 0.75rem;
   }

   .feature-card p {
     color: var(--text-secondary);
     font-size: 0.875rem;
   }

   /* Metrics Section */
   .metrics {
     padding: 4rem 0;
     position: relative;
   }

   .metrics-header {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     margin-bottom: 4rem;
     text-align: center;
   }

   .metrics-header h2 {
     font-family: 'gotham_htfbold' !important;
     font-size: clamp(2rem, 4vw, 3rem);
     max-width: 500px;
   }

   .metrics-header p {
     color: var(--text-secondary);
     max-width: 400px;
     text-align: center !important;
   }

   .metrics-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 1.5rem;
   }

   .metric-item {
     background: var(--bg-card);
     border: 1px solid var(--border);
     border-radius: 16px;
     padding: 2rem;
     text-align: center;
     position: relative;
     overflow: hidden;
     transition: all 0.4s ease;
   }

   .metric-item:hover {
     border-color: rgba(0, 212, 170, 0.3);
   }

   .metric-item::before {
     content: '';
     position: absolute;
     top: -50%;
     left: 50%;
     transform: translateX(-50%);
     width: 200%;
     height: 100%;
     background: radial-gradient(ellipse at center, var(--accent-glow) 0%, transparent 70%);
     opacity: 0;
     transition: opacity 0.4s ease;
   }

   .metric-item:hover::before {
     opacity: 1;
   }

   .metric-number {
     font-size: 3rem;
     font-weight: 700;
     background: var(--gradient-1);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     margin-bottom: 0.5rem;
     position: relative;
   }

   .metric-item h4 {
     font-size: 1rem;
     margin-bottom: 0.5rem;
     position: relative;
   }

   .metric-item p {
     font-size: 0.8125rem;
     color: var(--text-muted);
     position: relative;
   }

   /* Evaluation Metrics */
   .evaluation {
     padding: 4rem 0;
     /* background: var(--bg-secondary); */
   }

   .evaluation-grid {
     display: grid;
     grid-template-columns: 1fr 1.2fr;
     gap: 4rem;
     align-items: center;
   }

   .evaluation-content h2 {
     font-family: 'gotham_htfbold' !important;
     font-size: clamp(2rem, 4vw, 2.3rem);
     margin-bottom: 1.5rem;
   }

   .evaluation-content>p {
     color: var(--text-secondary);
     margin-bottom: 2rem;
   }

   .eval-list {
     display: flex;
     flex-direction: column;
     gap: 1.25rem;
   }

   .eval-item {
     display: flex;
     gap: 1rem;
     padding: 1.25rem;
     background: var(--bg-card);
     border: 1px solid var(--border);
     border-radius: 12px;
     transition: all 0.3s ease;
   }

   .eval-item:hover {
     border-color: rgba(0, 212, 170, 0.3);
   }

   .eval-icon {
     width: 40px;
     height: 40px;
     background: var(--accent-soft);
     border-radius: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--accent);
     flex-shrink: 0;
   }

   .eval-item h4 {
     font-size: 1rem;
     margin-bottom: 0.25rem;
   }

   .eval-item p {
     font-size: 0.8125rem;
     color: var(--text-muted);
   }

   .evaluation-visual {
     position: relative;
   }

   .eval-chart {
     background: var(--bg-card);
     border: 1px solid var(--border);
     border-radius: 20px;
     padding: 2rem;
     position: relative;
   }

   .chart-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 2rem;
   }

   .chart-title {
     font-size: 1rem;
     font-weight: 600;
   }

   .chart-badge {
     font-size: 0.75rem;
     padding: 0.25rem 0.75rem;
     background: var(--accent-soft);
     border-radius: 100px;
     color: var(--accent);
   }

   .chart-bars {
     display: flex;
     flex-direction: column;
     gap: 1.25rem;
   }

   .chart-bar {
     display: flex;
     align-items: center;
     gap: 1rem;
   }

   .bar-label {
     font-size: 0.8125rem;
     color: var(--text-secondary);
     width: 120px;
     flex-shrink: 0;
   }

   .bar-track {
     flex: 1;
     height: 8px;
     background: var(--bg-primary);
     border-radius: 4px;
     overflow: hidden;
   }

   .bar-fill {
     height: 100%;
     border-radius: 4px;
     transition: width 1s ease;
   }

   .bar-fill.relevance {
     background: #00d4aa;
     width: 92%;
   }

   .bar-fill.articulation {
     background: #00a8ff;
     width: 88%;
   }

   .bar-fill.completeness {
     background: #a855f7;
     width: 85%;
   }

   .bar-fill.accuracy {
     background: #f59e0b;
     width: 94%;
   }

   .bar-value {
     font-size: 0.875rem;
     font-weight: 600;
     width: 40px;
     text-align: right;
   }

   /* Integrations Section */
   .integrations {
     padding: 4rem 0;
     /* background: var(--bg-primary); */
     /* background: var(--bg-secondary); */
     position: relative;
   }

   .integrations::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 1px;
     background: linear-gradient(90deg, transparent, var(--border), transparent);
   }

   .integrations-header {
     text-align: center;
     margin-bottom: 4rem;
   }

   .integrations-header h2 {
     font-family: 'gotham_htfbold' !important;
     font-size: clamp(2rem, 4vw, 2.75rem);
     font-weight: 700;
     letter-spacing: -0.02em;
   }

   .integrations-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 1.5rem;
   }

   .integration-card {
     background: var(--bg-card);
     border: 1px solid var(--border);
     border-radius: 16px;
     padding: 2rem;
     transition: all 0.4s ease;
     position: relative;
     overflow: hidden;
   }

   .integration-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 3px;
     height: 100%;
     background: var(--accent);
     opacity: 0;
     transition: opacity 0.4s ease;
   }

   .integration-card:hover {
     border-color: rgba(0, 212, 170, 0.3);
     transform: translateY(-4px);
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
   }

   .integration-card:hover::before {
     opacity: 1;
   }

   .integration-icon {
     width: 48px;
     height: 48px;
     background: var(--accent-soft);
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--accent);
     margin-bottom: 1.25rem;
   }

   .integration-card h3 {
     font-size: 1.125rem;
     margin-bottom: 0.75rem;
     color: var(--accent);
   }

   .integration-card p {
     color: var(--text-secondary);
     font-size: 0.9375rem;
     line-height: 1.6;
   }

   /* Use Cases */
   .use-cases {
     padding: 4rem 0;
   }

   .use-cases .container {
     text-align: center;
   }

   .use-cases h2 {
     font-family: 'gotham_htfbold' !important;
     font-size: clamp(2rem, 4vw, 3rem);
     margin-bottom: 1rem;
   }

   .use-cases-subtitle {
     color: var(--text-secondary);
     max-width: 600px;
     margin: 0 auto 4rem;
   }

   .use-cases-grid {
     display: grid;
     grid-template-columns: repeat(5, 1fr);
     gap: 1rem;
   }

   .use-case-item {
     background: var(--bg-card);
     border: 1px solid var(--border);
     border-radius: 12px;
     padding: 1.5rem 1rem;
     transition: all 0.3s ease;
   }

   .use-case-item:hover {
     border-color: rgba(0, 212, 170, 0.3);
     transform: translateY(-4px);
   }

   .use-case-item svg {
     width: 32px;
     height: 32px;
     color: var(--accent);
     margin-bottom: 1rem;
   }

   .use-case-item h4 {
     font-size: 0.9375rem;
   }

   /* Pricing */
   .pricing {
     padding: 4rem 0;
     /* background: var(--bg-secondary); */
   }

   .pricing .container {
     text-align: center;
   }

   .pricing h2 {
     font-family: 'gotham_htfbold' !important;
     font-size: clamp(2rem, 4vw, 3rem);
     margin-bottom: 1rem;
   }

   .pricing-subtitle {
     color: var(--text-secondary);
     max-width: 500px;
     margin: 0 auto 4rem;
   }

   .pricing-cards {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 1.5rem;
     max-width: 1000px;
     margin: 0 auto;
   }

   .pricing-card {
     background: var(--bg-card);
     border: 1px solid var(--border);
     border-radius: 20px;
     padding: 2.5rem 2rem;
     text-align: left;
     transition: all 0.4s ease;
     position: relative;
   }

   .pricing-card.featured {
     border-color: var(--accent);
     transform: scale(1.05);
   }

   .pricing-card.featured::before {
     content: 'Most Popular';
     position: absolute;
     top: -12px;
     left: 50%;
     transform: translateX(-50%);
     background: var(--accent);
     color: var(--bg-primary);
     font-size: 0.75rem;
     font-weight: 500;
     padding: 0.25rem 1rem;
     border-radius: 100px;
   }

   .pricing-card:hover {
     border-color: rgba(0, 212, 170, 0.5);
   }

   .pricing-card h3 {
     font-size: 1.25rem;
     margin-bottom: 0.5rem;
   }

   .pricing-card .price {
     font-size: 2.3rem;
     font-weight: 700;
     margin-bottom: 1.5rem;
   }

   .pricing-card .price span {
     font-size: 1rem;
     font-weight: 400;
     color: var(--text-muted);
   }

   .pricing-features {
     list-style: none;
     margin-bottom: 2rem;
   }

   .pricing-features li {
     display: flex;
     align-items: center;
     gap: 0.75rem;
     padding: 0.5rem 0;
     font-size: 0.875rem;
     color: var(--text-secondary);
   }

   .pricing-features li svg {
     width: 16px;
     height: 16px;
     color: var(--accent);
   }

   .pricing-card .btn {
     width: 100%;
     justify-content: center;
   }

   /* Security Section */
   .security-section {
     padding: 6rem 0;
     /* background: var(--bg-primary); */
     /* background: var(--bg-secondary); */
     position: relative;
   }

   .security-section::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 1px;
     background: linear-gradient(90deg, transparent, var(--border), transparent);
   }

   .security-content {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 4rem;
     align-items: center;
   }

   .security-text h2 {
     font-size: clamp(1.75rem, 4vw, 2.2rem);
     font-weight: 700;
     letter-spacing: -0.02em;
     margin-bottom: 1rem;
   }

   .security-text>p {
     font-size: 1rem;
     color: var(--text-secondary);
     margin-bottom: 2rem;
     line-height: 1.6;
   }

   .security-list {
     display: flex;
     flex-direction: column;
     gap: 1.25rem;
   }

   .security-item {
     display: flex;
     gap: 1rem;
     align-items: flex-start;
   }

   .security-item svg {
     width: 24px;
     height: 24px;
     color: var(--accent);
     flex-shrink: 0;
     margin-top: 2px;
   }

   .security-item h4 {
     font-size: 1rem;
     font-weight: 600;
     margin-bottom: 0.25rem;
     color: var(--text-primary);
   }

   .security-item p {
     font-size: 0.875rem;
     color: var(--text-secondary);
   }

   .security-badges {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 1.5rem;
   }

   .security-badge {
     background: var(--bg-card);
     border: 1px solid var(--border);
     border-radius: 16px;
     padding: 2rem;
     text-align: center;
     transition: all 0.3s ease;
   }

   .security-badge:hover {
     border-color: var(--accent);
   }

   .security-badge h4 {
     font-size: 1.5rem;
     font-weight: 700;
     color: var(--accent);
     margin-bottom: 0.25rem;
   }

   .security-badge p {
     font-size: 0.875rem;
     color: var(--text-secondary);
   }

   /* CTA Section */
   .cta {
     padding: 4rem 0;
     /* background: var(--bg-secondary); */
     position: relative;
     overflow: hidden;
   }

   .cta::before {
     content: '';
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 150%;
     height: 150%;
     background: radial-gradient(ellipse at center, rgba(0, 212, 170, 0.08) 0%, transparent 50%);
   }

   .cta .container {
     position: relative;
     text-align: center;
   }

   .cta h2 {
     font-family: 'gotham_htfbold' !important;
     font-size: clamp(2rem, 5vw, 3.5rem);
     margin-bottom: 1.5rem;
   }

   .cta p {
     color: var(--text-secondary);
     max-width: 600px;
     margin: 0 auto 2.5rem;
     font-size: 1.125rem;
   }

   .cta-buttons {
     display: flex;
     gap: 1rem;
     justify-content: center;
   }

   /* Footer */
   footer {
     padding: 4rem 0 2rem;
     border-top: 1px solid var(--border);
   }

   .footer-grid {
     display: grid;
     grid-template-columns: 2fr repeat(3, 1fr);
     gap: 4rem;
     margin-bottom: 4rem;
   }

   .footer-brand .logo {
     margin-bottom: 1rem;
   }

   .footer-brand p {
     color: var(--text-muted);
     font-size: 0.875rem;
     max-width: 280px;
   }

   .footer-col h4 {
     font-size: 0.875rem;
     margin-bottom: 1.25rem;
   }

   .footer-col ul {
     list-style: none;
   }

   .footer-col ul li {
     margin-bottom: 0.75rem;
   }

   .footer-col ul li a {
     color: var(--text-muted);
     font-size: 0.875rem;
     transition: color 0.3s ease;
   }

   .footer-col ul li a:hover {
     color: var(--accent);
   }

   .footer-bottom {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding-top: 2rem;
     border-top: 1px solid var(--border);
   }

   .footer-bottom p {
     color: var(--text-muted);
     font-size: 0.8125rem;
   }

   .social-links {
     display: flex;
     gap: 1rem;
   }

   .social-links a {
     width: 36px;
     height: 36px;
     background: var(--bg-card);
     border: 1px solid var(--border);
     border-radius: 8px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--text-muted);
     transition: all 0.3s ease;
   }

   .social-links a:hover {
     border-color: var(--accent);
     color: var(--accent);
   }


   /* Responsive */
   @media (max-width: 1024px) {

     .evaluation-grid,
     .security-grid,
     .security-content {
       grid-template-columns: 1fr !important;
     }     

     .features-grid {
       grid-template-columns: repeat(2, 1fr);
     }

     .metrics-grid {
       grid-template-columns: repeat(2, 1fr);
     }

     .integrations-grid {
       grid-template-columns: repeat(2, 1fr);
     }

     .pricing-cards {
       grid-template-columns: 1fr;
       max-width: 400px;
     }

     .pricing-card.featured {
       transform: none;
     }

     .use-cases-grid {
       grid-template-columns: repeat(3, 1fr);
     }

     .footer-grid {
       grid-template-columns: repeat(2, 1fr);
       gap: 2rem;
     }

     .tile-stats {
       grid-template-columns: repeat(2, 1fr);
     }

     .ps-tile {
       height: 320px;
     }
   }

   @media (max-width: 768px) {
     .nav-links {
       display: none;
     }

     .features-grid,
     .metrics-grid {
       grid-template-columns: 1fr;
     }

     .integrations-grid {
       grid-template-columns: 1fr;
     }

     .metrics-header {
       flex-direction: column;
       align-items: flex-start;
       gap: 1rem;
     }

     .metrics-header p {
       text-align: left;
     }

     .use-cases-grid {
       grid-template-columns: repeat(2, 1fr);
     }

     .security-list {
       grid-template-columns: 1fr;
     }

     .hero-cta {
       flex-direction: column;
       align-items: flex-start;
     }

     .cta-buttons {
       flex-direction: column;
       align-items: center;
     }

     .footer-grid {
       grid-template-columns: 1fr;
     }

     .footer-bottom {
       flex-direction: column;
       gap: 1rem;
       text-align: center;
     }

     .ps-tile {
       height: auto;
       min-height: 340px;
     }

     .tile-problem,
     .tile-solution {
       padding: 1.75rem;
       position: relative;
     }

     .tile-solution {
       display: none;
     }

     .ps-tile.active .tile-problem {
       display: none;
     }

     .ps-tile.active .tile-solution {
       display: flex;
       opacity: 1;
       transform: none;
       position: relative;
     }

     .hover-hint {
       display: none;
     }

     .tap-hint {
       display: flex;
       font-size: 0.75rem;
       color: var(--text-muted);
       align-items: center;
       gap: 0.375rem;
       margin-top: 1rem;
     }

     .tap-hint svg {
       width: 14px;
       height: 14px;
     }

     .tile-title {
       font-size: 1.25rem;
     }

     .tile-desc {
       font-size: 0.9375rem;
     }

     .stat-value {
       font-size: 1.25rem;
     }

     .stat-label {
       font-size: 0.6875rem;
     }
   }


   /* Extra Things */

   body a.btn br,
   body button.btn br,
   span.tile-label br,
   section br {
     display: none !important;
   }

   .hero.koiosFloat::before {
     content: '';
     position: absolute;
     top: 0;
     right: -9%;
     width: 560px;
     height: 80%;
     pointer-events: none;
     z-index: 0;
     background-repeat: no-repeat;
     background-position: left top;
     background-image: url('/wp-content/uploads/2025/12/KOIOS-1.svg');
     opacity: 0.3;
     -webkit-filter: brightness(1) grayscale(1);
     filter: brightness(1) grayscale(1);
     -webkit-transform: rotate(-45deg);
     transform: rotate(-45deg);
   }

   .hero.tdLogo::before {
     content: '';
     position: absolute;
     top: 0;
     right: -2%;
     width: 250px;
     height: 520px;
     pointer-events: none;
     z-index: 0;
     background-repeat: no-repeat;
     background-position: left top;
     background-size: cover;
     background-image: url('/wp-content/themes/hello-elementor-child/images/tdWebRightFloat.png');
     opacity: 0.2;
   }

   @media all and (min-width: 1200px) {

     .hero.koiosFloat .d-md-flex .ps-5,
     .hero.tdLogo .d-md-flex .ps-5 {
       padding-left: 19rem !important;
     }
   }

   @media all and (min-width: 1400px) {

     .hero.koiosFloat .d-md-flex .ps-5,
     .hero.tdLogo .d-md-flex .ps-5 {
       padding-left: 29rem !important;
     }
   }

   body .cta-banner {
     margin-bottom: 5rem;
   }