/*
Theme Name: Philo
Author: Ajmal
Version: 1.0
*/
 .philo-landing {
      --philo-bg: #f4ebd8;
      --philo-parchment: #fff6e4;
      --philo-parchment-deep: #e8d3a9;
      --philo-ink: #201713;
      --philo-muted: #746452;
      --philo-night: #121a2d;
      --philo-lapis: #253c72;
      --philo-gold: #c9a24d;
      --philo-old-gold: #9e7a32;
      --philo-wine: #7a2f42;
      --philo-sea: #27636b;
      --philo-olive: #596e4b;
      --philo-dawn: #e29a55;
      --philo-border: #cdb88f;
      --philo-radius: 18px;
      margin: 0;
      color: var(--philo-ink);
      background: var(--philo-bg);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      line-height: 1.5;
      overflow: hidden;
    }

    .philo-landing * {
      box-sizing: border-box;
    }

    .philo-landing a {
      color: inherit;
      text-decoration: none;
    }

    .philo-shell {
      width: min(1160px, calc(100% - 40px));
      margin: 0 auto;
    }

    .philo-hero {
      position: relative;
      min-height: 92vh;
      display: flex;
      align-items: center;
      color: #fff6e4;
      background-image:
        linear-gradient(90deg, rgba(18, 26, 45, 0.92) 0%, rgba(18, 26, 45, 0.72) 48%, rgba(18, 26, 45, 0.2) 100%), 		   
        url("../assets/backgrounds/sanctuary-greece.png");
      background-size: cover;
      background-position: center;
      isolation: isolate;
    }

    .philo-hero::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      opacity: 0.38;
      background-image:
        radial-gradient(circle at 18% 22%, rgba(201, 162, 77, 0.24) 0 1px, transparent 2px),
        radial-gradient(circle at 70% 45%, rgba(255, 246, 228, 0.16) 0 1px, transparent 2px);
      background-size: 90px 90px, 140px 140px;
      animation: philoDust 18s linear infinite;
    }

    .philo-nav {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      padding: 24px 0;
      z-index: 2;
    }

    .philo-nav-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
    }

    .philo-brand {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      font-weight: 800;
      letter-spacing: 0;
    }

    .philo-brand-mark {
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(201, 162, 77, 0.7);
      border-radius: 999px;
      color: var(--philo-gold);
      background: rgba(18, 26, 45, 0.5);
    }

    .philo-nav-links {
      display: flex;
      align-items: center;
      gap: 22px;
      color: rgba(255, 246, 228, 0.84);
      font-size: 0.94rem;
    }

    .philo-hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.02fr) minmax(300px, 0.78fr);
      gap: clamp(32px, 6vw, 76px);
      align-items: center;
      padding: 132px 0 72px;
    }

    .philo-kicker {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 22px;
      color: #e8d3a9;
      font-weight: 700;
      font-size: 0.82rem;
      text-transform: uppercase;
      letter-spacing: 0.12em;
    }

    .philo-kicker::before {
      content: "";
      width: 36px;
      height: 1px;
      background: var(--philo-gold);
    }

    .philo-hero h1 {
      max-width: 760px;
      margin: 0;
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(3.1rem, 8vw, 7rem);
      line-height: 0.92;
      letter-spacing: 0;
    }

    .philo-hero-copy {
      max-width: 620px;
      margin: 26px 0 0;
      color: rgba(255, 246, 228, 0.86);
      font-size: clamp(1.06rem, 2vw, 1.26rem);
    }

    .philo-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-top: 34px;
    }

    .philo-button {
      display: inline-flex;
      min-height: 48px;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 13px 20px;
      border-radius: 999px;
      font-weight: 800;
      transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease;
    }

    .philo-button:hover {
      transform: translateY(-2px);
    }

    .philo-button-primary {
      background: var(--philo-gold);
      color: #201713;
      box-shadow: 0 16px 34px rgba(0, 0, 0, 0.24);
    }

    .philo-button-secondary {
      border: 1px solid rgba(255, 246, 228, 0.38);
      color: #fff6e4;
      background: rgba(18, 26, 45, 0.34);
    }

    .philo-phone {
      position: relative;
      width: min(360px, 100%);
      margin-left: auto;
      padding: 12px;
      border-radius: 38px;
      border: 1px solid rgba(255, 246, 228, 0.22);
      background: rgba(255, 246, 228, 0.12);
      box-shadow: 0 34px 100px rgba(0, 0, 0, 0.44);
      backdrop-filter: blur(12px);
    }

    .philo-phone-screen {
      min-height: 640px;
      overflow: hidden;
      border-radius: 28px;
      border: 1px solid rgba(201, 162, 77, 0.42);
      background:
        linear-gradient(180deg, rgba(18, 26, 45, 0.2), rgba(18, 26, 45, 0.84)),
        url("%%ASSET_BASE_URL%%/result-scenes/academy/academy-2.png");
      background-size: cover;
      background-position: center;
    }

    .philo-phone-content {
      min-height: 640px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 28px 24px;
    }

    .philo-streak {
      align-self: flex-start;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(255, 246, 228, 0.86);
      color: var(--philo-ink);
      font-size: 0.82rem;
      font-weight: 800;
    }

    .philo-quote-preview {
      padding: 24px;
      border-radius: 20px;
      background: rgba(255, 246, 228, 0.9);
      color: var(--philo-ink);
      box-shadow: 0 18px 60px rgba(0, 0, 0, 0.25);
    }

    .philo-quote-preview img {
      width: 74px;
      height: 74px;
      object-fit: cover;
      border: 3px solid var(--philo-gold);
      border-radius: 999px;
    }

    .philo-quote-preview blockquote {
      margin: 18px 0 12px;
      font-family: Georgia, "Times New Roman", serif;
      font-size: 1.42rem;
      line-height: 1.25;
    }

    .philo-quote-preview cite {
      color: var(--philo-muted);
      font-style: normal;
      font-weight: 800;
    }

    .philo-section {
      padding: clamp(70px, 9vw, 118px) 0;
    }

    .philo-section-dark {
      color: #fff6e4;
      background: var(--philo-night);
    }

    .philo-section-title {
      max-width: 790px;
      margin-bottom: 42px;
    }

    .philo-eyebrow {
      margin: 0 0 12px;
      color: var(--philo-old-gold);
      font-size: 0.8rem;
      font-weight: 900;
      letter-spacing: 0.13em;
      text-transform: uppercase;
    }

    .philo-section-dark .philo-eyebrow {
      color: var(--philo-gold);
    }

    .philo-section h2 {
      margin: 0;
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(2.1rem, 4.6vw, 4.4rem);
      line-height: 1;
      letter-spacing: 0;
    }

    .philo-section-title p {
      max-width: 700px;
      margin: 18px 0 0;
      color: var(--philo-muted);
      font-size: 1.08rem;
    }

    .philo-section-dark .philo-section-title p {
      color: rgba(255, 246, 228, 0.74);
    }

    .philo-features {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 18px;
    }

    .philo-feature {
      min-height: 230px;
      padding: 24px;
      border: 1px solid rgba(205, 184, 143, 0.56);
      border-radius: var(--philo-radius);
      background: rgba(255, 246, 228, 0.72);
    }

    .philo-feature-icon {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      margin-bottom: 22px;
      border-radius: 999px;
      background: var(--philo-night);
      color: var(--philo-gold);
      font-size: 1.2rem;
    }

    .philo-feature h3,
    .philo-theme h3,
    .philo-philosopher h3 {
      margin: 0 0 8px;
      font-family: Georgia, "Times New Roman", serif;
      font-size: 1.36rem;
      line-height: 1.1;
    }

    .philo-feature p,
    .philo-theme p,
    .philo-philosopher p {
      margin: 0;
      color: var(--philo-muted);
    }

    .philo-themes {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
    }

    .philo-theme {
      position: relative;
      min-height: 280px;
      display: flex;
      align-items: flex-end;
      overflow: hidden;
      padding: 22px;
      border-radius: var(--philo-radius);
      background-size: cover;
      background-position: center;
      box-shadow: 0 18px 48px rgba(18, 26, 45, 0.18);
    }

    .philo-theme::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(18, 26, 45, 0.05), rgba(18, 26, 45, 0.84));
    }

    .philo-theme-body {
      position: relative;
      z-index: 1;
      color: #fff6e4;
    }

    .philo-theme p {
      color: rgba(255, 246, 228, 0.78);
    }

    .philo-theme-stress {
      background-image: url("%%ASSET_BASE_URL%%/themes/stress/stress-2.png");
    }

    .philo-theme-confidence {
      background-image: url("%%ASSET_BASE_URL%%/themes/confiance/confiance-3.png");
    }

    .philo-theme-meaning {
      background-image: url("%%ASSET_BASE_URL%%/themes/sens/sens-4.png");
    }

    .philo-theme-solitude {
      background-image: url("%%ASSET_BASE_URL%%/themes/solitude/solitude-1.png");
    }

    .philo-theme-relations {
      background-image: url("%%ASSET_BASE_URL%%/themes/relations/relations-5.png");
    }

    .philo-theme-motivation {
      background-image: url("%%ASSET_BASE_URL%%/themes/motivation/motivation-2.png");
    }

    .philo-flow {
      display: grid;
      grid-template-columns: 0.82fr 1fr;
      gap: clamp(28px, 5vw, 70px);
      align-items: center;
    }

    .philo-flow-image {
      min-height: 560px;
      border-radius: 28px;
      background:
        linear-gradient(180deg, rgba(18, 26, 45, 0), rgba(18, 26, 45, 0.56)),
        url("%%ASSET_BASE_URL%%/result-scenes/library/library-1.png");
      background-size: cover;
      background-position: center;
      box-shadow: 0 26px 80px rgba(0, 0, 0, 0.26);
    }

    .philo-steps {
      display: grid;
      gap: 16px;
    }

    .philo-step {
      display: grid;
      grid-template-columns: 42px 1fr;
      gap: 16px;
      align-items: start;
      padding-bottom: 18px;
      border-bottom: 1px solid rgba(205, 184, 143, 0.52);
    }

    .philo-step-number {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border-radius: 999px;
      background: var(--philo-gold);
      color: var(--philo-night);
      font-weight: 900;
    }

    .philo-step h3 {
      margin: 0 0 4px;
      font-size: 1.14rem;
    }

    .philo-step p {
      margin: 0;
      color: var(--philo-muted);
    }

    .philo-gallery {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 16px;
    }

    .philo-philosopher {
      overflow: hidden;
      border: 1px solid rgba(255, 246, 228, 0.16);
      border-radius: var(--philo-radius);
      background: rgba(255, 246, 228, 0.07);
    }

    .philo-philosopher img {
      width: 100%;
      aspect-ratio: 1 / 1;
      display: block;
      object-fit: cover;
      filter: sepia(0.14) contrast(1.04);
    }

    .philo-philosopher-body {
      padding: 16px;
    }

    .philo-philosopher p {
      color: rgba(255, 246, 228, 0.68);
      font-size: 0.94rem;
    }

    .philo-quest {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 12px;
      margin-top: 20px;
    }

    .philo-level {
      padding: 18px 14px;
      border: 1px solid rgba(205, 184, 143, 0.56);
      border-radius: 14px;
      background: rgba(255, 246, 228, 0.7);
      text-align: center;
      font-weight: 900;
    }

    .philo-level span {
      display: block;
      margin-top: 4px;
      color: var(--philo-muted);
      font-size: 0.8rem;
      font-weight: 700;
    }

    .philo-final {
      position: relative;
      color: #fff6e4;
      background:
        linear-gradient(90deg, rgba(18, 26, 45, 0.93), rgba(18, 26, 45, 0.62)),
        url("%%ASSET_BASE_URL%%/result-scenes/mediterranean/mediterranean-1.png");
      background-size: cover;
      background-position: center;
    }

    .philo-final-inner {
      min-height: 540px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      max-width: 760px;
    }

    .philo-final h2 {
      margin: 0;
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(2.4rem, 5.8vw, 5.4rem);
      line-height: 0.98;
      letter-spacing: 0;
    }

    .philo-final p {
      max-width: 620px;
      margin: 22px 0 0;
      color: rgba(255, 246, 228, 0.78);
      font-size: 1.12rem;
    }

    .philo-footer-note {
      margin-top: 18px;
      color: rgba(255, 246, 228, 0.62);
      font-size: 0.92rem;
    }

    @keyframes philoDust {
      from {
        transform: translate3d(0, 0, 0);
      }
      to {
        transform: translate3d(24px, -18px, 0);
      }
    }

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

      .philo-hero-grid,
      .philo-flow {
        grid-template-columns: 1fr;
      }

      .philo-phone {
        margin: 0;
      }

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

      .philo-gallery,
      .philo-quest {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 620px) {
      .philo-shell {
        width: min(100% - 28px, 1160px);
      }

      .philo-hero {
        min-height: auto;
      }

      .philo-hero-grid {
        padding: 112px 0 52px;
      }

      .philo-actions {
        flex-direction: column;
      }

      .philo-button {
        width: 100%;
      }

      .philo-phone-screen,
      .philo-phone-content {
        min-height: 520px;
      }

      .philo-features,
      .philo-themes,
      .philo-gallery,
      .philo-quest {
        grid-template-columns: 1fr;
      }

      .philo-flow-image {
        min-height: 380px;
      }
    }