@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap");

:root {
      --color-slate: #334155;
      --color-coral: #f87171;
      --color-light: #f8fafc;
      --color-white: #ffffff;
      --color-grey: #e2e8f0;
      --color-dark-grey: #64748b;
      --font-primary: 'Raleway', sans-serif;
      --spacing-xs: 0.5rem;
      --spacing-sm: 1rem;
      --spacing-md: 2rem;
      --spacing-lg: 3rem;
      --spacing-xl: 4rem;
      --spacing-2xl: 6rem;
      --border-hairline: 1px solid #cbd5e1;
      --max-width-narrow: 700px;
      --max-width-wide: 1200px;
    }

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

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: var(--font-primary);
      color: var(--color-slate);
      background-color: var(--color-white);
      line-height: 1.6;
      font-weight: 400;
      font-size: 1rem;
    }

    img {
      max-width: 100%;
      height: auto;
      display: block;
    }

    /* ===== HEADER & NAVIGATION ===== */
    header {
      background-color: var(--color-white);
      border-bottom: var(--border-hairline);
      padding: var(--spacing-md) var(--spacing-sm);
      position: sticky;
      top: 0;
      z-index: 100;
    }

    .header-container {
      max-width: var(--max-width-wide);
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: var(--spacing-lg);
    }

    .header-brand {
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--color-slate);
      text-decoration: none;
      letter-spacing: -0.5px;
    }

    nav {
      display: flex;
      gap: var(--spacing-lg);
      align-items: center;
    }

    nav a {
      text-decoration: none;
      color: var(--color-slate);
      font-weight: 400;
      font-size: 0.95rem;
      padding: var(--spacing-xs) var(--spacing-sm);
      border-radius: 20px;
      transition: all 0.3s ease;
    }

    nav a:hover {
      color: var(--color-coral);
    }

    nav a.active {
      background-color: var(--color-slate);
      color: var(--color-white);
      font-weight: 700;
    }

    /* ===== MAIN CONTENT ===== */
    main {
      min-height: calc(100vh - 200px);
    }

    /* ===== HERO OVERLAY SECTION ===== */
    #hero_overlay {
      position: relative;
      height: 70vh;
      min-height: 500px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      overflow: hidden;
      background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    }

    #hero_overlay::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image: url('img/asset-c95766c499df.jpg');
      background-size: cover;
      background-position: center;
      opacity: 0.7;
      z-index: 0;
    }

    #hero_overlay::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.35);
      z-index: 1;
    }

    .hero-content {
      position: relative;
      z-index: 2;
      padding: var(--spacing-lg);
      max-width: 90%;
    }

    #hero_overlay h1 {
      font-size: clamp(2.5rem, 8vw, 4.5rem);
      font-weight: 700;
      color: var(--color-white);
      letter-spacing: -1px;
      margin-bottom: var(--spacing-md);
      line-height: 1.1;
    }

    #hero_overlay .subheading {
      font-size: clamp(1.1rem, 3vw, 1.5rem);
      font-weight: 400;
      color: #f1f5f9;
      letter-spacing: 0.5px;
    }

    /* ===== CONCEPT INTRO SECTION ===== */
    #concept_intro {
      padding: var(--spacing-2xl) var(--spacing-sm);
      background-color: var(--color-white);
      text-align: center;
    }

    .concept-container {
      max-width: var(--max-width-narrow);
      margin: 0 auto;
    }

    #concept_intro h2 {
      font-size: clamp(1.8rem, 5vw, 2.5rem);
      font-weight: 700;
      color: var(--color-slate);
      margin-bottom: var(--spacing-sm);
      letter-spacing: -0.5px;
    }

    #concept_intro .subheading {
      font-size: 1.1rem;
      color: var(--color-dark-grey);
      margin-bottom: var(--spacing-lg);
      font-weight: 400;
    }

    #concept_intro p {
      font-size: 1rem;
      line-height: 1.8;
      color: var(--color-slate);
      margin-bottom: var(--spacing-md);
    }

    /* ===== EXPERIENCE HIGHLIGHTS SECTION ===== */
    #experience_highlights {
      padding: var(--spacing-2xl) var(--spacing-sm);
      background-color: var(--color-light);
    }

    .highlights-container {
      max-width: var(--max-width-wide);
      margin: 0 auto;
    }

    #experience_highlights h2 {
      font-size: clamp(1.8rem, 5vw, 2.5rem);
      font-weight: 700;
      color: var(--color-slate);
      margin-bottom: var(--spacing-lg);
      text-align: center;
      letter-spacing: -0.5px;
    }

    .highlights-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: var(--spacing-lg);
      margin: 0 auto;
      max-width: 1000px;
    }

    .highlight-card {
      padding: var(--spacing-lg);
      border: var(--border-hairline);
      background-color: var(--color-white);
      text-align: center;
      transition: all 0.3s ease;
    }

    .highlight-card:hover {
      border-color: var(--color-coral);
    }

    .highlight-card.featured {
      border-color: var(--color-coral);
      background-color: #fff5f3;
    }

    .highlight-card h3 {
      font-size: 1.3rem;
      font-weight: 700;
      color: var(--color-slate);
      margin-bottom: var(--spacing-sm);
    }

    .highlight-card p {
      font-size: 0.95rem;
      color: var(--color-dark-grey);
      line-height: 1.6;
    }

    /* ===== PLAY FLOW VISUAL SECTION ===== */
    #play_flow_visual {
      padding: var(--spacing-2xl) var(--spacing-sm);
      background-color: var(--color-white);
    }

    .flow-container {
      max-width: var(--max-width-wide);
      margin: 0 auto;
    }

    #play_flow_visual h2 {
      font-size: clamp(1.8rem, 5vw, 2.5rem);
      font-weight: 700;
      color: var(--color-slate);
      margin-bottom: var(--spacing-sm);
      text-align: center;
      letter-spacing: -0.5px;
    }

    #play_flow_visual .subheading {
      font-size: 1.1rem;
      color: var(--color-dark-grey);
      text-align: center;
      margin-bottom: var(--spacing-2xl);
    }

    .flow-steps {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: var(--spacing-lg);
      max-width: 900px;
      margin: 0 auto;
    }

    .flow-step {
      text-align: center;
      position: relative;
    }

    .flow-step-number {
      font-size: 4rem;
      font-weight: 700;
      color: #cbd5e1;
      margin-bottom: var(--spacing-sm);
      line-height: 1;
    }

    .flow-step h3 {
      font-size: 1.2rem;
      font-weight: 700;
      color: var(--color-slate);
      margin-bottom: var(--spacing-xs);
    }

    .flow-step p {
      font-size: 0.9rem;
      color: var(--color-dark-grey);
      line-height: 1.5;
    }

    /* ===== AUDIENCE CLARITY SECTION ===== */
    #audience_clarity {
      padding: var(--spacing-2xl) var(--spacing-sm);
      background-color: var(--color-light);
    }

    .audience-container {
      max-width: var(--max-width-narrow);
      margin: 0 auto;
      text-align: center;
    }

    #audience_clarity h2 {
      font-size: clamp(1.8rem, 5vw, 2.5rem);
      font-weight: 700;
      color: var(--color-slate);
      margin-bottom: var(--spacing-lg);
      letter-spacing: -0.5px;
    }

    .clarity-content {
      background-color: var(--color-white);
      padding: var(--spacing-lg);
      border: var(--border-hairline);
    }

    .clarity-content p {
      font-size: 1rem;
      line-height: 1.8;
      color: var(--color-slate);
      margin-bottom: var(--spacing-md);
    }

    .clarity-content strong {
      font-weight: 700;
      color: var(--color-coral);
    }

    /* ===== CTA FOOTER HOME SECTION ===== */
    #cta_footer_home {
      padding: var(--spacing-2xl) var(--spacing-sm);
      background: linear-gradient(135deg, var(--color-slate) 0%, #1e293b 100%);
      text-align: center;
      color: var(--color-white);
    }

    .cta-container {
      max-width: var(--max-width-narrow);
      margin: 0 auto;
    }

    #cta_footer_home h2 {
      font-size: clamp(1.8rem, 5vw, 2.5rem);
      font-weight: 700;
      color: var(--color-white);
      margin-bottom: var(--spacing-lg);
      letter-spacing: -0.5px;
    }

    .cta-buttons {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-md);
      justify-content: center;
      align-items: center;
    }

    .btn {
      display: inline-block;
      padding: var(--spacing-sm) var(--spacing-lg);
      border-radius: 4px;
      text-decoration: none;
      font-weight: 700;
      font-size: 1rem;
      transition: all 0.3s ease;
      border: 2px solid transparent;
      cursor: pointer;
    }

    .btn-primary {
      background-color: var(--color-coral);
      color: var(--color-white);
    }

    .btn-primary:hover {
      background-color: #f97070;
      transform: translateY(-2px);
    }

    .btn-secondary {
      background-color: transparent;
      color: var(--color-white);
      border-color: var(--color-white);
    }

    .btn-secondary:hover {
      background-color: rgba(255, 255, 255, 0.1);
    }

    /* ===== FOOTER ===== */
    footer {
      background-color: var(--color-slate);
      color: var(--color-white);
      padding: var(--spacing-2xl) var(--spacing-sm);
      margin-top: var(--spacing-2xl);
    }

    .footer-container {
      max-width: var(--max-width-wide);
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: var(--spacing-lg);
      margin-bottom: var(--spacing-2xl);
    }

    .footer-section h3 {
      font-size: 1.1rem;
      font-weight: 700;
      margin-bottom: var(--spacing-md);
      color: var(--color-white);
    }

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

    .footer-section ul li {
      margin-bottom: var(--spacing-sm);
    }

    .footer-section a {
      color: #cbd5e1;
      text-decoration: none;
      font-size: 0.95rem;
      transition: color 0.3s ease;
    }

    .footer-section a:hover {
      color: var(--color-coral);
    }

    .footer-section p {
      font-size: 0.95rem;
      line-height: 1.6;
      color: #cbd5e1;
      margin-bottom: var(--spacing-sm);
    }

    .footer-bottom {
      border-top: var(--border-hairline);
      padding-top: var(--spacing-lg);
      text-align: center;
      font-size: 0.9rem;
      color: #94a3b8;
    }

    /* ===== RESPONSIVE ===== */
    @media (max-width: 768px) {
      .header-container {
        flex-direction: column;
        gap: var(--spacing-md);
      }

      nav {
        flex-wrap: wrap;
        gap: var(--spacing-md);
        justify-content: center;
      }

      nav a {
        font-size: 0.9rem;
      }

      #hero_overlay {
        height: 50vh;
        min-height: 400px;
      }

      #hero_overlay h1 {
        font-size: 2rem;
      }

      #hero_overlay .subheading {
        font-size: 1rem;
      }

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

      .flow-steps {
        grid-template-columns: 1fr;
      }

      .cta-buttons {
        flex-direction: column;
      }

      .btn {
        width: 100%;
        text-align: center;
      }

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

    @media (max-width: 480px) {
      header {
        padding: var(--spacing-md) var(--spacing-xs);
      }

      .header-brand {
        font-size: 1.2rem;
      }

      nav {
        gap: var(--spacing-sm);
      }

      nav a {
        padding: var(--spacing-xs) var(--spacing-xs);
        font-size: 0.85rem;
      }

      #hero_overlay h1 {
        font-size: 1.5rem;
      }

      #hero_overlay .subheading {
        font-size: 0.9rem;
      }

      section {
        padding: var(--spacing-lg) var(--spacing-xs) !important;
      }

      #concept_intro h2,
      #experience_highlights h2,
      #play_flow_visual h2,
      #audience_clarity h2,
      #cta_footer_home h2 {
        font-size: 1.5rem;
      }

      .flow-step-number {
        font-size: 2.5rem;
      }

      .btn {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: 0.9rem;
      }
    }
/* ── image safety ── */
img { max-width: 100%; height: auto; display: block; }
img[style*='width:'] { max-width: 100%; }