/* =========================================
   BUNDLE BUDDY GH
   COMING SOON PAGE
========================================= */


:root {

  --blue: #0a56c7;
  --blue-bright: #1185ff;
  --blue-dark: #082c69;

  --green: #25bd45;
  --green-dark: #128b32;

  --navy: #071b3d;

  --body-text: #3a506e;
  --muted: #75869c;

  --border: #dce7f2;

  --soft-blue: #eaf4ff;
  --soft-green: #ecfaef;

  --white: #ffffff;

}



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

* {

  margin: 0;
  padding: 0;

  box-sizing: border-box;

}


html {

  min-height: 100%;

}


body {

  min-height: 100vh;

  overflow-x: hidden;

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

  color: var(--navy);

  background:

    radial-gradient(
      circle at 2% 40%,
      rgba(37, 189, 69, 0.08),
      transparent 28rem
    ),

    radial-gradient(
      circle at 94% 10%,
      rgba(17, 133, 255, 0.14),
      transparent 35rem
    ),

    linear-gradient(
      135deg,
      #ffffff 0%,
      #f7fbff 46%,
      #eef6ff 100%
    );

  -webkit-font-smoothing: antialiased;

}


a {

  color: inherit;

}



/* =========================================
   MAIN PAGE
========================================= */

.page {

  width: min(100%, 1500px);

  min-height: 100vh;

  margin: 0 auto;

  padding:

    0
    clamp(16px, 4vw, 62px)
    16px;

  display: grid;

  grid-template-rows:
    auto
    1fr
    auto;

}



/* =========================================
   HEADER
========================================= */

.site-header {

  min-height: 94px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 22px;

  border-bottom:

    1px solid
    rgba(211, 224, 237, 0.8);

}



.brand {

  display: flex;

  align-items: center;

  gap: 13px;

  min-width: 0;

}



.brand-logo-wrap {

  width: 62px;

  height: 62px;

  display: flex;

  align-items: center;

  justify-content: center;

  flex: 0 0 auto;

}



.brand-logo {

  display: block;

  width: 100%;

  height: 100%;

  object-fit: contain;

  filter:

    drop-shadow(
      0 7px 10px
      rgba(10, 86, 199, 0.14)
    );

}



.brand-details {

  min-width: 0;

}



.brand-name {

  font-size:

    clamp(
      1.3rem,
      2vw,
      1.75rem
    );

  font-weight: 950;

  letter-spacing: -0.045em;

  line-height: 1;

  color: var(--blue-dark);

  white-space: nowrap;

}



.brand-name span {

  color: var(--green);

}



.operator {

  margin-top: 7px;

  color: #5f7188;

  font-size: 0.66rem;

  font-weight: 750;

  letter-spacing: 0.015em;

}



.launch-status {

  display: inline-flex;

  align-items: center;

  gap: 9px;

  padding:
    10px
    15px;

  border:

    1px solid
    var(--border);

  border-radius: 999px;

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

  color: #106b2c;

  font-size: 0.72rem;

  font-weight: 900;

  letter-spacing: 0.07em;

  white-space: nowrap;

}



.launch-dot {

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background: var(--green);

  box-shadow:

    0 0 0 5px
    rgba(37, 189, 69, 0.11);

}



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

.hero {

  min-height:

    calc(
      100vh - 158px
    );

  display: grid;

  grid-template-columns:

    minmax(0, 0.92fr)

    minmax(480px, 1.08fr);

  align-items: center;

  gap:

    clamp(
      26px,
      5vw,
      72px
    );

  padding:

    42px 0
    34px;

}



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

.hero-content {

  position: relative;

  z-index: 10;

  max-width: 660px;

}



.eyebrow {

  width: fit-content;

  display: inline-flex;

  align-items: center;

  gap: 9px;

  padding:

    9px
    15px;

  border:

    1px solid
    #ccecd4;

  border-radius: 999px;

  background: var(--soft-green);

  color: #166b31;

  font-size: 0.72rem;

  font-weight: 900;

  letter-spacing: 0.07em;

}



.eyebrow-dot {

  width: 7px;

  height: 7px;

  border-radius: 50%;

  background: var(--green);

  box-shadow:

    0 0 0 5px
    rgba(37, 189, 69, 0.11);

}



/* =========================================
   MAIN HEADLINE
========================================= */

h1 {

  margin-top: 24px;

  max-width: 650px;

  color: var(--navy);

  font-size:

    clamp(
      4rem,
      7.4vw,
      7rem
    );

  line-height: 0.82;

  letter-spacing: -0.075em;

  font-weight: 950;

}



.headline-bottom {

  display: block;

  margin-top: 12px;

}



.blue-text {

  color: var(--blue);

}



.green-text {

  color: var(--green);

}



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

.hero-description {

  max-width: 570px;

  margin-top: 29px;

  color: var(--body-text);

  font-size:

    clamp(
      1rem,
      1.6vw,
      1.2rem
    );

  line-height: 1.7;

}



/* =========================================
   SERVICES
========================================= */

.service-grid {

  display: grid;

  grid-template-columns:

    repeat(
      3,
      minmax(0, 1fr)
    );

  gap: 11px;

  margin-top: 27px;

}



.service-card {

  min-width: 0;

  min-height: 76px;

  display: flex;

  align-items: center;

  gap: 11px;

  padding: 14px;

  border:

    1px solid
    var(--border);

  border-radius: 18px;

  background:

    rgba(
      255,
      255,
      255,
      0.87
    );

  box-shadow:

    0 10px 28px
    rgba(
      17,
      53,
      93,
      0.05
    );

}



.service-icon {

  width: 40px;

  height: 40px;

  flex: 0 0 auto;

  display: grid;

  place-items: center;

  border-radius: 13px;

  background: var(--soft-blue);

  color: var(--blue);

  font-size: 18px;

  font-weight: 950;

}



.service-copy {

  min-width: 0;

}



.service-copy strong {

  display: block;

  color: var(--navy);

  font-size: 0.85rem;

}



.service-copy span {

  display: block;

  margin-top: 4px;

  color: var(--muted);

  font-size: 0.67rem;

  line-height: 1.25;

}



/* =========================================
   CONTACT CARD
========================================= */

.contact-card {

  display: grid;

  grid-template-columns:

    minmax(0, 1fr)

    1px

    minmax(0, 1fr);

  gap: 18px;

  align-items: stretch;

  margin-top: 16px;

  padding:

    17px
    18px;

  border:

    1px solid
    var(--border);

  border-radius: 18px;

  background:

    rgba(
      255,
      255,
      255,
      0.88
    );

  box-shadow:

    0 10px 28px
    rgba(
      17,
      53,
      93,
      0.04
    );

}



.contact-block {

  min-width: 0;

}



.contact-label {

  display: block;

  color: var(--muted);

  font-size: 0.68rem;

  font-weight: 800;

}



.contact-block strong,
.contact-block a {

  display: block;

  margin-top: 5px;

  font-size: 0.87rem;

  font-weight: 900;

  overflow-wrap: anywhere;

}



.contact-block a {

  color: var(--blue);

  text-decoration: none;

}



.contact-block a:hover {

  text-decoration: underline;

}



.contact-separator {

  width: 1px;

  background: var(--border);

}



/* =========================================
   GHANA NOTE
========================================= */

.ghana-note {

  display: flex;

  align-items: center;

  gap: 11px;

  margin-top: 20px;

  color: #4d6481;

  font-size: 0.82rem;

  font-weight: 750;

}



.ghana-note-line {

  width: 43px;

  height: 4px;

  border-radius: 999px;

  background:

    linear-gradient(
      90deg,
      var(--blue),
      var(--green)
    );

}



/* =========================================
   HERO RIGHT SIDE
========================================= */

.hero-visual {

  position: relative;

  min-width: 0;

  height:

    min(
      720px,
      76vh
    );

  min-height: 560px;

}



/* =========================================
   PRESENTER
========================================= */

.presenter {

  position: absolute;

  z-index: 4;

  left: 50%;

  bottom: 0;

  transform:

    translateX(-50%);

  width:

    min(
      96%,
      720px
    );

  height: 100%;

  display: flex;

  justify-content: center;

  align-items: flex-end;

}



.presenter img {

  display: block;

  max-width: 100%;

  max-height: 100%;

  width: auto;

  height: auto;

  object-fit: contain;

  object-position: center bottom;

  filter:

    drop-shadow(
      0 26px 30px
      rgba(
        8,
        43,
        94,
        0.18
      )
    );

}



/* =========================================
   VISUAL BACKGROUND
========================================= */

.visual-glow {

  position: absolute;

  z-index: 1;

  width: 500px;

  height: 500px;

  top: 50%;

  left: 52%;

  transform:

    translate(
      -50%,
      -50%
    );

  border-radius: 50%;

  background:

    radial-gradient(

      circle,

      rgba(
        17,
        133,
        255,
        0.29
      ),

      rgba(
        10,
        86,
        199,
        0.09
      )
      48%,

      transparent
      70%

    );

}



.visual-glow-green {

  position: absolute;

  z-index: 1;

  width: 250px;

  height: 250px;

  right: 0;

  bottom: 20px;

  border-radius: 50%;

  background:

    radial-gradient(

      circle,

      rgba(
        37,
        189,
        69,
        0.17
      ),

      transparent 68%

    );

}



/* =========================================
   ORBITS
========================================= */

.orbit {

  position: absolute;

  z-index: 2;

  top: 50%;

  left: 52%;

  transform:

    translate(
      -50%,
      -50%
    );

  border-radius: 50%;

  pointer-events: none;

}



.orbit-one {

  width: 470px;

  height: 470px;

  border:

    2px solid
    rgba(
      17,
      133,
      255,
      0.24
    );

}



.orbit-two {

  width: 560px;

  height: 560px;

  border:

    2px solid
    rgba(
      37,
      189,
      69,
      0.16
    );

}



.orbit-three {

  width: 340px;

  height: 340px;

  border:

    1px solid
    rgba(
      17,
      133,
      255,
      0.18
    );

}



/* =========================================
   FLOATING CARDS
========================================= */

.floating-card {

  position: absolute;

  z-index: 7;

  display: flex;

  align-items: center;

  gap: 11px;

  width:

    min(
      260px,
      48%
    );

  padding:

    13px
    14px;

  border:

    1px solid
    rgba(
      213,
      225,
      237,
      0.95
    );

  border-radius: 18px;

  background:

    rgba(
      255,
      255,
      255,
      0.94
    );

  box-shadow:

    0 15px 38px
    rgba(
      19,
      49,
      87,
      0.13
    );

  backdrop-filter:

    blur(
      12px
    );

}



.floating-top {

  top: 5%;

  right: 0;

}



.floating-bottom {

  left: 0;

  bottom: 10%;

}



.floating-logo {

  width: 42px;

  height: 42px;

  flex: 0 0 auto;

  object-fit: contain;

}



.check-icon {

  width: 40px;

  height: 40px;

  flex: 0 0 auto;

  display: grid;

  place-items: center;

  border-radius: 13px;

  background: var(--soft-green);

  color: var(--green-dark);

  font-weight: 950;

  font-size: 1rem;

}



.floating-card strong {

  display: block;

  color: var(--navy);

  font-size: 0.77rem;

}



.floating-card span {

  display: block;

  margin-top: 4px;

  color: var(--muted);

  font-size: 0.65rem;

  line-height: 1.25;

}



/* =========================================
   HANDWRITTEN MESSAGE
========================================= */

.visual-message {

  position: absolute;

  z-index: 7;

  top: 23%;

  right: 1%;

  color: var(--blue-dark);

  font-family:

    "Segoe Script",
    "Comic Sans MS",
    cursive;

  font-size:

    clamp(
      1rem,
      2vw,
      1.5rem
    );

  font-weight: 800;

  line-height: 1.2;

  transform:

    rotate(
      -5deg
    );

}



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

.site-footer {

  min-height: 55px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  padding:

    12px 0;

  border-top:

    1px solid
    rgba(
      211,
      224,
      237,
      0.8
    );

  color: #7a899d;

  font-size: 0.71rem;

  line-height: 1.5;

}



.site-footer p {

  margin: 0;

}



.footer-country {

  white-space: nowrap;

}



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

@media
(max-width: 1050px) {


  .hero {

    grid-template-columns:

      minmax(0, 1fr)

      minmax(420px, 0.95fr);

    gap: 28px;

  }


  h1 {

    font-size:

      clamp(
        3.6rem,
        8vw,
        5.4rem
      );

  }


  .service-grid {

    grid-template-columns: 1fr;

  }


  .service-card {

    min-height: 64px;

  }


  .hero-visual {

    height: 610px;

    min-height: 540px;

  }


}



/* =========================================
   MOBILE / TABLET PORTRAIT
========================================= */

@media
(max-width: 820px) {


  .page {

    padding:

      0
      17px
      14px;

  }



  .site-header {

    min-height: 80px;

  }



  .brand-logo-wrap {

    width: 50px;

    height: 50px;

  }



  .brand-name {

    font-size: 1.18rem;

  }



  .operator {

    font-size: 0.58rem;

  }



  .launch-status {

    display: none;

  }



  .hero {

    min-height: auto;

    grid-template-columns: 1fr;

    padding:

      32px 0
      25px;

  }



  .hero-content {

    max-width: none;

  }



  h1 {

    font-size:

      clamp(
        3.7rem,
        14vw,
        5.3rem
      );

  }



  .service-grid {

    grid-template-columns:

      repeat(
        3,
        minmax(0, 1fr)
      );

  }



  .hero-visual {

    height: 640px;

    min-height: 0;

    margin-top: 10px;

  }


}



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

@media
(max-width: 620px) {


  .page {

    padding:

      0
      14px
      12px;

  }



  .site-header {

    padding:

      8px 0;

  }



  .brand {

    gap: 9px;

  }



  .brand-logo-wrap {

    width: 45px;

    height: 45px;

  }



  .brand-name {

    font-size: 1rem;

  }



  .operator {

    max-width: 210px;

    font-size: 0.54rem;

    line-height: 1.2;

  }



  .hero {

    padding-top: 25px;

  }



  .eyebrow {

    font-size: 0.64rem;

  }



  h1 {

    margin-top: 19px;

    font-size:

      clamp(
        3.25rem,
        17vw,
        4.5rem
      );

  }



  .hero-description {

    margin-top: 21px;

    font-size: 1rem;

  }



  .service-grid {

    grid-template-columns: 1fr;

  }



  .service-card {

    min-height: 66px;

  }



  .contact-card {

    grid-template-columns: 1fr;

    gap: 12px;

  }



  .contact-separator {

    width: 100%;

    height: 1px;

  }



  .ghana-note {

    font-size: 0.76rem;

  }



  .hero-visual {

    height: 540px;

  }



  .presenter {

    width: 100%;

  }



  .floating-card {

    width:

      min(
        235px,
        70%
      );

  }



  .floating-top {

    top: 1%;

    right: 0;

  }



  .floating-bottom {

    left: 0;

    bottom: 3%;

  }



  .visual-message {

    display: none;

  }



  .orbit-one {

    width: 370px;

    height: 370px;

  }



  .orbit-two {

    width: 450px;

    height: 450px;

  }



  .orbit-three {

    width: 280px;

    height: 280px;

  }



  .visual-glow {

    width: 400px;

    height: 400px;

  }



  .site-footer {

    display: block;

    text-align: center;

  }



  .footer-country {

    margin-top: 7px;

  }


}



/* =========================================
   VERY SMALL PHONES
========================================= */

@media
(max-width: 430px) {


  .page {

    padding-inline: 11px;

  }



  .brand-logo-wrap {

    width: 42px;

    height: 42px;

  }



  .brand-name {

    font-size: 0.93rem;

  }



  .operator {

    max-width: 190px;

    font-size: 0.5rem;

  }



  h1 {

    font-size:

      clamp(
        3rem,
        17vw,
        4rem
      );

  }



  .hero-visual {

    height: 490px;

  }



  .floating-card {

    padding:

      11px
      12px;

  }



  .floating-logo,
  .check-icon {

    width: 36px;

    height: 36px;

  }



  .floating-card strong {

    font-size: 0.7rem;

  }



  .floating-card span {

    font-size: 0.59rem;

  }



  .orbit-one {

    width: 320px;

    height: 320px;

  }



  .orbit-two {

    width: 395px;

    height: 395px;

  }



  .orbit-three {

    width: 240px;

    height: 240px;

  }


}



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

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


  * {

    scroll-behavior: auto !important;

  }


}