/* =========================================================
       VARIABLES
    ========================================================= */

    :root {
      --green-950: #06251b;
      --green-900: #083b2b;
      --green-800: #0b4f39;
      --green-700: #116448;
      --green-500: #2f9d68;
      --green-300: #8fd6ae;
      --green-100: #eaf7ef;

      --white: #ffffff;
      --ink: #10231b;
      --muted: #5d7067;

      --line: rgba(8, 59, 43, 0.13);
      --soft: #f5faf7;

      --max: 1180px;
      --radius: 26px;

      --shadow:
        0 24px 70px rgba(8, 59, 43, 0.12);
    }


    /* =========================================================
       RESET
    ========================================================= */

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

    html {
      scroll-behavior: smooth;
      scroll-padding-top: 90px;
    }

    body {
      font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

      color: var(--ink);
      background: var(--white);
      line-height: 1.65;

      overflow-x: hidden;
    }

    body::before {
      content: "";

      position: fixed;
      inset: 0;

      pointer-events: none;

      opacity: 0.025;

      background-image:
        radial-gradient(
          #0b3d2e 0.7px,
          transparent 0.7px
        );

      background-size: 18px 18px;

      z-index: -1;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

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

    button,
    input {
      font: inherit;
    }

    button {
      cursor: pointer;
    }

    .container {
      width: min(
        var(--max),
        calc(100% - 40px)
      );

      margin: 0 auto;
    }


    /* =========================================================
       ACCESSIBILITY
    ========================================================= */

    .skip {
      position: fixed;

      left: 16px;
      top: -100px;

      background: var(--green-900);
      color: white;

      padding: 10px 14px;

      border-radius: 10px;

      z-index: 100;
    }

    .skip:focus {
      top: 16px;
    }


    /* =========================================================
       NAVIGATION
    ========================================================= */

    .nav {
      position: fixed;

      top: 0;
      left: 0;
      right: 0;

      z-index: 50;

      background:
        rgba(255, 255, 255, 0.88);

      backdrop-filter: blur(18px);

      border-bottom:
        1px solid rgba(8, 59, 43, 0.08);

      transition: 0.3s ease;
    }

    .nav.scrolled {
      box-shadow:
        0 8px 30px rgba(8, 59, 43, 0.08);
    }

    .nav-inner {
      height: 76px;

      display: flex;
      align-items: center;
      justify-content: space-between;

      gap: 20px;
    }

    .logo {
      font-weight: 950;

      letter-spacing: 0.11em;

      font-size: 0.9rem;

      color: var(--green-900);

      white-space: nowrap;
    }

    .logo span {
      color: var(--green-500);
    }

    .nav-links {
      display: flex;

      align-items: center;

      gap: 24px;

      font-size: 0.88rem;

      font-weight: 700;

      color: #385248;
    }

    .nav-links > a:not(.nav-cta) {
      position: relative;
      padding: 8px 0;
    }

    .nav-links > a:not(.nav-cta)::after {
      content: "";

      position: absolute;

      left: 0;
      right: 100%;

      bottom: 2px;

      height: 2px;

      background: var(--green-500);

      transition: 0.25s ease;
    }

    .nav-links > a:not(.nav-cta):hover::after {
      right: 0;
    }

    .nav-links > a:hover {
      color: var(--green-900);
    }

    .nav-cta {
      min-height: 46px;

      padding: 14px 26px;

      display: inline-flex;

      align-items: center;
      justify-content: center;

      border-radius: 999px;

      background: var(--green-900);

      color: white !important;

      font-size: 0.9rem;

      font-weight: 850;

      letter-spacing: 0.01em;

      box-shadow:
        0 8px 22px rgba(8, 59, 43, 0.18);

      transition: 0.25s ease;
    }

    .nav-cta:hover {
      background: var(--green-800);

      transform: translateY(-2px);

      box-shadow:
        0 12px 28px rgba(8, 59, 43, 0.22);
    }

    .menu {
      display: none;

      border: 0;

      background: transparent;

      color: var(--green-900);

      font-size: 27px;
    }


    /* =========================================================
       HERO
    ========================================================= */

    .hero {
      min-height: 100svh;

      position: relative;

      display: flex;

      align-items: center;

      justify-content: center;

      overflow: hidden;

      text-align: center;

      background:
        linear-gradient(
          135deg,
          #f5fbf7 0%,
          #ffffff 58%,
          #eaf7ef 100%
        );
    }

    .hero-backdrop {
      position: absolute;

      inset: 0;

      background-image:
        linear-gradient(
          180deg,
          rgba(245, 251, 247, 0.84),
          rgba(255, 255, 255, 0.95)
        ),
        url("assets/images/tiger-01.png");

      background-size: cover;

      background-position:
        center 35%;

      filter: saturate(0.7);

      transform: scale(1.03);

      z-index: -2;
    }

    .hero-backdrop::after {
      content: "";

      position: absolute;

      inset: 0;

      background:
        radial-gradient(
          circle at 50% 45%,
          rgba(255, 255, 255, 0.15),
          rgba(255, 255, 255, 0.72) 70%,
          rgba(255, 255, 255, 0.94)
        );
    }

    .hero-glow {
      position: absolute;

      width: 620px;
      height: 620px;

      border-radius: 50%;

      right: -220px;
      top: -190px;

      background:
        rgba(47, 157, 104, 0.13);

      filter: blur(8px);

      animation:
        float 8s ease-in-out infinite;

      z-index: -1;
    }

    .hero-content {
      position: relative;

      z-index: 2;

      width: 100%;

      max-width: 900px;

      padding:
        145px
        0
        80px;

      margin: 0 auto;

      display: flex;

      flex-direction: column;

      align-items: center;
    }

    .kicker {
      display: inline-flex;

      align-items: center;

      gap: 9px;

      padding: 8px 13px;

      border:
        1px solid rgba(17, 100, 72, 0.2);

      background:
        rgba(47, 157, 104, 0.08);

      border-radius: 999px;

      color: var(--green-800);

      font-size: 0.72rem;

      font-weight: 900;

      letter-spacing: 0.12em;

      text-transform: uppercase;
    }

    .kicker::before {
      content: "";

      width: 7px;
      height: 7px;

      border-radius: 50%;

      background:
        var(--green-500);

      box-shadow:
        0 0 0 5px rgba(47, 157, 104, 0.12);
    }

    .hero h1 {
      font-size:
        clamp(
          3.1rem,
          7.4vw,
          7rem
        );

      line-height: 0.91;

      margin:
        25px
        0
        22px;

      letter-spacing:
        -0.065em;

      color:
        var(--green-950);
    }

    .hero h1 em {
      font-style: normal;

      color:
        var(--green-500);
    }

    .hero p {
      max-width: 760px;

      color:
        #52675d;

      font-size: 1.08rem;
    }

    .actions {
      display: flex;

      flex-wrap: wrap;

      justify-content: center;

      gap: 12px;

      margin-top: 30px;
    }

    .btn {
      min-height: 46px;

      display: inline-flex;

      align-items: center;
      justify-content: center;

      padding:
        13px 20px;

      border-radius: 999px;

      border:
        1px solid var(--line);

      font-weight: 850;

      transition:
        transform 0.28s ease,
        box-shadow 0.28s ease,
        background 0.28s ease;
    }

    .btn:hover {
      transform:
        translateY(-3px);

      box-shadow:
        0 12px 28px rgba(8, 59, 43, 0.12);
    }

    .btn-primary {
      background:
        var(--green-900);

      color: white;

      border-color:
        var(--green-900);
    }

    .btn-primary:hover {
      background:
        var(--green-800);
    }

    .btn-secondary {
      background:
        white;

      color:
        var(--green-900);
    }

    .launch-badge {
      margin-top: 27px;

      display: flex;

      justify-content: center;

      align-items: center;

      gap: 18px;

      color: #486056;
    }

    .launch-badge strong {
      color: var(--green-900);
    }

    .launch-date {
      font-weight: 950;

      color:
        var(--green-900);
    }

    .countdown {
      display: flex;

      gap: 7px;

      margin-top: 9px;
    }

    .time {
      min-width: 62px;

      padding: 8px 9px;

      border:
        1px solid var(--line);

      border-radius: 12px;

      background:
        rgba(255, 255, 255, 0.78);

      text-align: center;
    }

    .time b {
      display: block;

      font-size: 1.15rem;

      color:
        var(--green-900);
    }

    .time small {
      font-size: 0.62rem;

      color:
        var(--muted);

      text-transform:
        uppercase;
    }


    /* =========================================================
       GENERAL SECTIONS
    ========================================================= */

    section {
      padding:
        110px 0;
    }

    section:nth-of-type(even) {
      background:
        var(--soft);
    }

    .section-head {
      max-width: 780px;

      margin-bottom: 44px;
    }

    .section-head.centered {
      text-align: center;

      margin-left: auto;

      margin-right: auto;
    }

    .eyebrow {
      color:
        var(--green-700);

      font-size: 0.7rem;

      font-weight: 950;

      letter-spacing:
        0.17em;

      text-transform:
        uppercase;
    }

    h2 {
      font-size:
        clamp(
          2.25rem,
          4.8vw,
          4.5rem
        );

      line-height: 1.02;

      margin:
        9px
        0
        18px;

      letter-spacing:
        -0.045em;

      color:
        var(--green-950);
    }

    .lead {
      color:
        var(--muted);

      font-size:
        1.04rem;
    }


    /* =========================================================
       STORY
    ========================================================= */

    .story-intro {
      max-width: 880px;

      margin:
        0
        auto
        38px;

      text-align:
        center;

      color:
        #53665e;

      font-size:
        1.07rem;
    }

    .story-intro p {
      margin-bottom:
        17px;
    }

    .story-intro strong {
      color:
        var(--green-900);
    }

    .inspiration-showcase {
      max-width:
        980px;

      margin:
        0 auto;
    }

    .inspiration-main {
      position: relative;

      aspect-ratio:
        16 / 8.5;

      min-height:
        390px;

      border-radius:
        30px;

      overflow:
        hidden;

      background:
        var(--green-950);

      box-shadow:
        var(--shadow);
    }

    .inspiration-slide {
      position:
        absolute;

      inset:
        0;

      opacity:
        0;

      transform:
        scale(1.035);

      transition:
        opacity 0.65s ease,
        transform 1.1s ease;

      pointer-events:
        none;
    }

    .inspiration-slide.active {
      opacity:
        1;

      transform:
        scale(1);

      pointer-events:
        auto;
    }

    .inspiration-slide img {
      width:
        100%;

      height:
        100%;

      object-fit:
        cover;
    }

    .inspiration-slide::after {
      content:
        "";

      position:
        absolute;

      inset:
        0;

      background:
        linear-gradient(
          0deg,
          rgba(3, 25, 18, 0.82),
          rgba(3, 25, 18, 0)
          58%
        );
    }

    .inspiration-caption {
      position:
        absolute;

      z-index:
        2;

      left:
        30px;

      right:
        30px;

      bottom:
        27px;

      color:
        white;

      display:
        flex;

      flex-direction:
        column;

      gap:
        3px;

      text-align:
        left;
    }

    .inspiration-caption b {
      font-size:
        1.15rem;
    }

    .inspiration-caption span {
      font-size:
        0.9rem;

      color:
        rgba(255,255,255,0.82);
    }

    .inspiration-dots {
      display:
        flex;

      justify-content:
        center;

      gap:
        8px;

      padding-top:
        15px;
    }

    .inspiration-dots button {
      width:
        8px;

      height:
        8px;

      padding:
        0;

      border:
        0;

      border-radius:
        50%;

      background:
        #c5d6cc;

      transition:
        0.25s ease;
    }

    .inspiration-dots button.active {
      width:
        25px;

      border-radius:
        99px;

      background:
        var(--green-700);
    }

    .feature-card {
      border:
        1px solid var(--line);

      background:
        white;

      border-radius:
        var(--radius);

      padding:
        30px;

      box-shadow:
        var(--shadow);
    }

    .story-stats {
      max-width:
        980px;

      margin:
        30px auto 0;
    }

    .stat-grid {
      display:
        grid;

      grid-template-columns:
        repeat(2, 1fr);

      gap:
        13px;
    }

    .stat {
      padding:
        23px;

      border:
        1px solid var(--line);

      border-radius:
        18px;

      background:
        var(--soft);
    }

    .stat strong {
      display:
        block;

      font-size:
        2rem;

      color:
        var(--green-700);

      line-height:
        1.05;
    }

    .stat span {
      color:
        var(--muted);

      font-size:
        0.87rem;
    }


    /* =========================================================
       UNIVERSE
    ========================================================= */

    .universe-overview {
      display:
        grid;

      grid-template-columns:
        repeat(3, 1fr);

      gap:
        18px;

      max-width:
        1000px;

      margin:
        0 auto;
    }

    .universe-card {
      position:
        relative;

      min-height:
        230px;

      padding:
        27px;

      border:
        1px solid var(--line);

      border-radius:
        22px;

      background:
        white;

      box-shadow:
        0 12px 35px rgba(8, 59, 43, 0.06);

      transition:
        0.3s ease;

      overflow:
        hidden;
    }

    .universe-card::before {
      content:
        "";

      position:
        absolute;

      width:
        140px;

      height:
        140px;

      right:
        -45px;

      bottom:
        -45px;

      border-radius:
        50%;

      background:
        rgba(47,157,104,0.08);
    }

    .universe-card:hover {
      transform:
        translateY(-7px);

      box-shadow:
        var(--shadow);

      border-color:
        rgba(47,157,104,0.35);
    }

    .universe-card .tag {
      display:
        inline-block;

      padding:
        5px 9px;

      border-radius:
        999px;

      background:
        var(--green-100);

      color:
        var(--green-700);

      font-size:
        0.65rem;

      font-weight:
        900;

      letter-spacing:
        0.08em;

      text-transform:
        uppercase;
    }

    .universe-card h3 {
      font-size:
        1.45rem;

      margin:
        15px 0 7px;

      color:
        var(--green-950);
    }

    .universe-card p {
      font-size:
        0.86rem;

      color:
        var(--muted);
    }


    /* =========================================================
       TIGER GALLERY
    ========================================================= */

    .gallery-wrap {
      max-width:
        980px;

      margin:
        0 auto;
    }

    .gallery-stage {
      position:
        relative;

      width:
        100%;

      aspect-ratio:
        1 / 1;

      max-width:
        820px;

      margin:
        0 auto;

      overflow:
        hidden;

      border-radius:
        30px;

      background:
        var(--green-950);

      box-shadow:
        var(--shadow);

      border:
        1px solid var(--line);
    }

    .gallery-slide {
      position:
        absolute;

      inset:
        0;

      opacity:
        0;

      transform:
        scale(1.025);

      transition:
        opacity 0.7s ease,
        transform 1.05s ease;

      pointer-events:
        none;
    }

    .gallery-slide.active {
      opacity:
        1;

      transform:
        scale(1);

      pointer-events:
        auto;
    }

    .gallery-slide img {
      width:
        100%;

      height:
        100%;

      display:
        block;

      object-fit:
        cover;
    }

    .gallery-slide::after {
      content:
        "";

      position:
        absolute;

      inset:
        0;

      pointer-events:
        none;

      background:
        linear-gradient(
          180deg,
          rgba(3,25,18,0),
          rgba(3,25,18,0.14)
        );
    }

    .gallery-controls {
      display:
        flex;

      align-items:
        center;

      justify-content:
        center;

      gap:
        12px;

      margin:
        16px auto 0;
    }

    .gallery-controls button {
      width:
        42px;

      height:
        42px;

      border:
        1px solid var(--line);

      border-radius:
        50%;

      background:
        white;

      color:
        var(--green-900);

      display:
        grid;

      place-items:
        center;

      transition:
        0.22s ease;
    }

    .gallery-controls button:hover {
      background:
        var(--green-900);

      color:
        white;

      transform:
        translateY(-2px);
    }

    .gallery-dots {
      display:
        flex;

      align-items:
        center;

      justify-content:
        center;

      gap:
        6px;

      max-width:
        160px;

      overflow:
        hidden;
    }

    .gallery-dots button {
      width:
        7px;

      height:
        7px;

      flex:
        0 0 auto;

      padding:
        0;

      border:
        0;

      background:
        #c5d6cc;
    }

    .gallery-dots button.active {
      width:
        25px;

      border-radius:
        99px;

      background:
        var(--green-700);
    }


    /* =========================================================
       UPCOMING UNIVERSES
    ========================================================= */

    .upcoming-universe-section {
      background:
        linear-gradient(
          180deg,
          #f4faf6,
          #ffffff
        );
    }

    .upcoming-card {
      max-width:
        850px;

      margin:
        0 auto;

      padding:
        50px;

      text-align:
        center;

      border:
        1px solid var(--line);

      border-radius:
        30px;

      background:
        white;

      box-shadow:
        var(--shadow);
    }

    .coming-soon {
      display:
        inline-block;

      margin-top:
        15px;

      padding:
        7px 12px;

      border-radius:
        999px;

      background:
        var(--green-100);

      color:
        var(--green-700);

      font-size:
        0.7rem;

      font-weight:
        900;

      letter-spacing:
        0.08em;
    }


    /* =========================================================
       MISSION
    ========================================================= */

    .mission-grid {
      display:
        grid;

      grid-template-columns:
        1.08fr
        0.92fr;

      gap:
        48px;

      align-items:
        center;
    }

    .mission-copy p {
      color:
        #53665e;

      margin-bottom:
        18px;
    }

    .mission-card {
      padding:
        32px;

      border:
        1px solid rgba(47,157,104,0.2);

      border-radius:
        var(--radius);

      background:
        linear-gradient(
          145deg,
          #f1faf5,
          #ffffff
        );

      box-shadow:
        var(--shadow);
    }

    .big-number {
      font-size:
        clamp(
          4.5rem,
          10vw,
          8rem
        );

      font-weight:
        950;

      line-height:
        0.85;

      color:
        var(--green-500);

      letter-spacing:
        -0.07em;
    }

    .donation-note {
      font-size:
        0.82rem;

      color:
        #74857e;

      margin-top:
        16px;
    }


    /* =========================================================
       ROADMAP
    ========================================================= */

    .roadmap {
      display:
        grid;

      grid-template-columns:
        repeat(2, 1fr);

      gap:
        18px;
    }

    .phase {
      padding:
        27px;

      border:
        1px solid var(--line);

      border-radius:
        22px;

      background:
        white;

      position:
        relative;

      overflow:
        hidden;

      box-shadow:
        0 10px 35px rgba(8,59,43,0.05);

      transition:
        0.3s ease;
    }

    .phase:hover {
      transform:
        translateY(-5px);

      box-shadow:
        var(--shadow);
    }

    .phase::before {
      content:
        "";

      position:
        absolute;

      left:
        0;

      top:
        0;

      width:
        4px;

      height:
        100%;

      background:
        linear-gradient(
          var(--green-500),
          var(--green-800)
        );
    }

    .phase .num {
      color:
        var(--green-700);

      font-size:
        0.7rem;

      font-weight:
        950;

      letter-spacing:
        0.15em;

      text-transform:
        uppercase;
    }

    .phase h3 {
      font-size:
        1.5rem;

      margin:
        6px 0 9px;

      color:
        var(--green-950);
    }

    .phase p {
      color:
        var(--muted);
    }


    /* =========================================================
       COLLECTION
    ========================================================= */

    .traits {
      display:
        grid;

      grid-template-columns:
        repeat(4, 1fr);

      gap:
        14px;
    }

    .trait {
      padding:
        22px;

      border:
        1px solid var(--line);

      border-radius:
        18px;

      background:
        white;

      transition:
        0.3s ease;
    }

    .trait:hover {
      transform:
        translateY(-4px);

      border-color:
        rgba(47,157,104,0.35);

      box-shadow:
        0 15px 35px rgba(8,59,43,0.08);
    }

    .trait b {
      display:
        block;

      margin-bottom:
        4px;

      color:
        var(--green-900);
    }

    .trait span {
      color:
        var(--muted);

      font-size:
        0.86rem;
    }
/* =========================================================
       LAUNCH
    ========================================================= */

    .mint-box {
      border:
        1px solid rgba(47,157,104,0.2);

      background:
        linear-gradient(
          135deg,
          #f0faf4,
          #ffffff
        );

      border-radius:
        30px;

      padding:
        50px;

      max-width:
        1000px;

      margin:
        0 auto;

      text-align:
        center;

      box-shadow:
        var(--shadow);
    }

    .mint-box .actions {
      justify-content:
        center;
    }

    .disclaimer {
      color:
        #77877f;

      font-size:
        0.76rem;

      margin-top:
        13px;
    }


    /* =========================================================
       COMMUNITY
    ========================================================= */

    .community {
      display:
        grid;

      grid-template-columns:
        repeat(3, 1fr);

      gap:
        15px;
    }

    .social {
      padding:
        26px;

      border:
        1px solid var(--line);

      border-radius:
        20px;

      background:
        white;

      transition:
        0.3s ease;
    }

    .social:hover {
      transform:
        translateY(-4px);

      border-color:
        rgba(47,157,104,0.35);

      box-shadow:
        var(--shadow);
    }

    .social b {
      display:
        block;

      font-size:
        1.1rem;

      color:
        var(--green-900);
    }

    .social span {
      color:
        var(--muted);

      font-size:
        0.84rem;
    }


    /* =========================================================
       FAQ
    ========================================================= */

    .faq {
      display:
        grid;

      gap:
        10px;

      max-width:
        900px;

      margin:
        0 auto;
    }

    details {
      border:
        1px solid var(--line);

      border-radius:
        15px;

      background:
        white;

      padding:
        17px 19px;

      transition:
        0.25s ease;
    }

    details[open] {
      box-shadow:
        0 12px 30px rgba(8,59,43,0.07);

      border-color:
        rgba(47,157,104,0.3);
    }

    summary {
      cursor:
        pointer;

      font-weight:
        800;

      color:
        var(--green-900);
    }

    details p {
      color:
        var(--muted);

      padding-top:
        12px;
    }


    /* =========================================================
       FOOTER
    ========================================================= */

    footer {
      border-top:
        1px solid var(--line);

      padding:
        42px 0 65px;

      color:
        #718078;

      background:
        white;
    }

    .footer-grid {
      display:
        flex;

      justify-content:
        space-between;

      gap:
        30px;

      align-items:
        flex-start;
    }

    .footer-links {
      display:
        flex;

      gap:
        18px;

      flex-wrap:
        wrap;
    }

    .footer-links a:hover {
      color:
        var(--green-700);
    }


    /* =========================================================
       REVEAL ANIMATION
    ========================================================= */

    .reveal {
      opacity:
        0;

      transform:
        translateY(26px);

      transition:
        opacity 0.7s ease,
        transform 0.7s cubic-bezier(.2,.7,.2,1);
    }

    .reveal.show {
      opacity:
        1;

      transform:
        none;
    }

    .reveal-delay-1 {
      transition-delay:
        0.08s;
    }

    .reveal-delay-2 {
      transition-delay:
        0.16s;
    }

    .reveal-delay-3 {
      transition-delay:
        0.24s;
    }


    /* =========================================================
       ANIMATIONS
    ========================================================= */

    @keyframes float {
      50% {
        transform:
          translate3d(-25px,25px,0)
          scale(1.05);
      }
    }


    /* =========================================================
       TABLET
    ========================================================= */

    @media (max-width: 900px) {

      .nav-links {
        display:
          none;
      }

      .menu {
        display:
          block;
      }

      .nav.open .nav-links {
        position:
          absolute;

        top:
          76px;

        left:
          20px;

        right:
          20px;

        display:
          grid;

        gap:
          4px;

        padding:
          14px;

        background:
          white;

        border:
          1px solid var(--line);

        border-radius:
          18px;

        box-shadow:
          var(--shadow);
      }

      .nav.open .nav-links > a {
        padding:
          12px;
      }

      .nav.open .nav-cta {
        text-align:
          center;
      }

      .hero-content {
        padding-top:
          140px;
      }

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

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

      .universe-overview {
        grid-template-columns:
          1fr;
      }

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

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

      .gallery-stage {
        max-width:
          680px;
      }

      .inspiration-main {
        aspect-ratio:
          4 / 3;
      }
    }


    /* =========================================================
       MOBILE
    ========================================================= */

    @media (max-width: 620px) {

      .container {
        width:
          min(
            var(--max),
            calc(100% - 28px)
          );
      }

      .nav-inner {
        height:
          68px;
      }

      .nav.open .nav-links {
        top:
          68px;

        left:
          14px;

        right:
          14px;
      }

      section {
        padding:
          76px 0;
      }

      .hero-content {
        padding:
          115px
          0
          55px;
      }

      .hero h1 {
        font-size:
          clamp(
            3rem,
            15vw,
            4.4rem
          );
      }

      .hero p {
        font-size:
          1rem;
      }

      .actions {
        width:
          100%;

        flex-direction:
          column;
      }

      .actions .btn {
        width:
          100%;
      }

      .launch-badge {
        align-items:
          flex-start;

        flex-direction:
          column;

        gap:
          12px;
      }

      .countdown {
        width:
          100%;

        flex-wrap:
          wrap;
      }

      .time {
        flex:
          1;

        min-width:
          60px;
      }

      .inspiration-main {
        aspect-ratio:
          4 / 4.8;

        min-height:
          0;

        border-radius:
          22px;
      }

      .inspiration-caption {
        left:
          18px;

        right:
          18px;

        bottom:
          18px;
      }

      .inspiration-caption b {
        font-size:
          1rem;
      }

      .inspiration-caption span {
        font-size:
          0.78rem;
      }

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

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

      .gallery-stage {
        width:
          100%;

        border-radius:
          20px;
      }

      .gallery-controls {
        margin-top:
          12px;
      }

      .gallery-controls button {
        width:
          38px;

        height:
          38px;
      }

      .mint-box {
        padding:
          30px 22px;

        border-radius:
          24px;
      }

      .footer-grid {
        flex-direction:
          column;
      }
    }


    /* =========================================================
       REDUCED MOTION
    ========================================================= */

    @media (prefers-reduced-motion: reduce) {

      html {
        scroll-behavior:
          auto;
      }

      *,
      *::before,
      *::after {
        animation-duration:
          0.01ms !important;

        animation-iteration-count:
          1 !important;

        transition-duration:
          0.01ms !important;
      }

      .reveal {
        opacity:
          1;

        transform:
          none;
      }
    }


/* =========================================================
   MOVED FROM INDEX.HTML INLINE STYLES
========================================================= */

.mission-card-title {
  font-size: 1.45rem;
  margin-top: 16px;
  color: var(--green-950);
}

.mission-card-copy {
  color: #53665e;
  margin-top: 8px;
}

.wwf-link {
  margin-top: 17px;
}

.launch-title {
  margin-top: 10px;
}

.footer-tagline {
  margin-top: 8px;
}


/* =======================================================
   MERCHANDISE / COMING SOON PAGE
======================================================== */

.merch-cta {
  text-decoration: none;
}

.coming-soon-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.coming-soon-main {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 8rem 1.25rem 5rem;
}

.coming-soon-card {
  width: min(760px, 100%);
  text-align: center;
  padding: clamp(2rem, 6vw, 5rem);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 28px;
  background: rgba(255,255,255,.04);
  box-shadow: 0 24px 80px rgba(0,0,0,.18);
}

.coming-soon-eyebrow {
  margin-bottom: 1rem;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 800;
}

.coming-soon-title {
  margin: 0;
  font-size: clamp(2.5rem, 8vw, 6rem);
  line-height: .95;
}

.coming-soon-copy {
  max-width: 560px;
  margin: 1.5rem auto 0;
  font-size: 1.1rem;
  line-height: 1.7;
  opacity: .78;
}

.coming-soon-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2rem;
  padding: .9rem 1.25rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 800;
  border: 1px solid currentColor;
}

#faq ol,
#faq ul {
  margin: 1rem 0 1.25rem;
  padding-left: 1.6rem;
}

#faq li {
  margin: .55rem 0;
  padding-left: .15rem;
}