@charset "utf-8";
/* CSS Document */
 
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
	  user-select: none;
    }

    html,
    body {
      width: 100%;
      min-height: 100%;
    }

    body {
      font-family: Arial, Helvetica, sans-serif;
      background: #ffffff;
      color: #073b5c;
      overflow-x: hidden;
    }

    .coming-soon-page {
      position: relative;
      min-height: 100vh;
      min-height: 100svh;

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

      padding:
        max(40px, env(safe-area-inset-top))
        24px
        max(40px, env(safe-area-inset-bottom));

      background:
        radial-gradient(
          circle at 50% 45%,
          rgba(22, 174, 184, 0.025),
          transparent 42%
        ),
        #ffffff;
    }

    .content {
      width: 100%;
      max-width: 900px;
      text-align: center;
      margin: 0 auto;
    }

    .logo {
      display: block;
      width: min(440px, 68vw);
      height: auto;
      margin: 0 auto 64px;
    }

    .coming-soon-title {
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(48px, 7vw, 92px);
      line-height: 1;
      font-weight: 400;
      color: #075176;
      letter-spacing: -0.025em;
      margin-bottom: 30px;
    }

    .divider {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 16px;
      margin-bottom: 32px;
    }

    .divider-line {
      width: 130px;
      max-width: 18vw;
      height: 1px;
      background: linear-gradient(
        90deg,
        transparent,
        #efb078
      );
    }

    .divider-line.right {
      background: linear-gradient(
        90deg,
        #efb078,
        transparent
      );
    }

    .heart {
      width: 16px;
      height: 16px;
      position: relative;
      transform: rotate(-45deg);
      background: #efb078;
      border-radius: 2px 0 2px 2px;
      opacity: 0.85;
    }

    .heart::before,
    .heart::after {
      content: "";
      position: absolute;
      width: 16px;
      height: 16px;
      background: #efb078;
      border-radius: 50%;
    }

    .heart::before {
      top: -8px;
      left: 0;
    }

    .heart::after {
      top: 0;
      left: 8px;
    }

    .tagline {
      color: #587083;
      font-size: clamp(18px, 2.2vw, 29px);
      line-height: 1.6;
      font-weight: 300;
      letter-spacing: 0.01em;
    }

    /* Tablet */
    @media (max-width: 768px) {
      .coming-soon-page {
        padding-left: 22px;
        padding-right: 22px;
      }

      .logo {
        width: min(360px, 76vw);
        margin-bottom: 50px;
      }

      .coming-soon-title {
        margin-bottom: 26px;
      }

      .divider {
        margin-bottom: 27px;
      }

      .tagline {
        max-width: 560px;
        margin: 0 auto;
      }
    }

    /* Phones */
    @media (max-width: 480px) {
      .coming-soon-page {
        padding-left: 20px;
        padding-right: 20px;
      }

      .logo {
        width: min(310px, 82vw);
        margin-bottom: 45px;
      }

      .coming-soon-title {
        font-size: clamp(44px, 14vw, 64px);
        line-height: 1.05;
      }

      .divider-line {
        width: 80px;
        max-width: 23vw;
      }

      .heart,
      .heart::before,
      .heart::after {
        width: 13px;
        height: 13px;
      }

      .heart::before {
        top: -6.5px;
      }

      .heart::after {
        left: 6.5px;
      }

      .tagline {
        font-size: 18px;
        line-height: 1.55;
        max-width: 340px;
        margin: 0 auto;
      }
    }

    /* Very small phones */
    @media (max-width: 340px) {
      .logo {
        width: 88vw;
      }

      .coming-soon-title {
        font-size: 42px;
      }

      .tagline {
        font-size: 16px;
      }
    }