/* =========================================================
   PAKKAGO WALLET - PREMIUM STYLE
   Brand Colors:
   Navy       #06143D
   Deep Navy  #020A24
   Cyan       #00CFE8
   Turquoise  #35E5C0
   Blue       #0798E8
   White      #FFFFFF
========================================================= */

*{
  box-sizing:border-box;
}

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

body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  background:#f4f8fc;
  color:#263b52;
  line-height:1.7;
}


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

.header{
  position:sticky;
  top:0;
  z-index:9999;
  background:rgba(255,255,255,.97);
  border-bottom:1px solid #dfe8f1;
  box-shadow:0 3px 18px rgba(6,20,61,.07);
  backdrop-filter:blur(12px);
}

.header-inner{
  max-width:1250px;
  margin:auto;
  min-height:76px;
  padding:0 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}


/* Logo */

.logo{
  display:flex;
  align-items:center;
  gap:11px;
  text-decoration:none;
  font-size:24px;
  font-weight:800;
  color:#06143D;
  white-space:nowrap;
}

.logo img{
  width:48px;
  height:48px;
  object-fit:cover;
  border-radius:13px;
  box-shadow:0 4px 12px rgba(6,20,61,.18);
}


/* Navigation */

nav{
  display:flex;
  align-items:center;
  gap:26px;
}

nav a{
  position:relative;
  text-decoration:none;
  color:#344b64;
  font-size:15px;
  font-weight:700;
  padding:8px 0;
  transition:.25s ease;
}

nav a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:0;
  height:2px;
  border-radius:10px;
  background:linear-gradient(
    90deg,
    #35e5c0,
    #00cfe8,
    #0798e8
  );
  transition:.25s ease;
}

nav a:hover{
  color:#0798e8;
}

nav a:hover::after{
  width:100%;
}

nav a.active{
  color:#0798e8;
}

nav a.active::after{
  width:100%;
}


/* Mobile menu button */

.menu-btn{
  display:none;
  width:44px;
  height:44px;
  border:1px solid #d9e4ee;
  border-radius:10px;
  background:#06143D;
  color:#ffffff;
  font-size:25px;
  line-height:1;
  cursor:pointer;
  transition:.25s ease;
}

.menu-btn:hover{
  background:#0798e8;
}


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

.hero{
  position:relative;
  overflow:hidden;
  padding:75px 20px 85px;
  text-align:center;
  color:#ffffff;

  background:
    radial-gradient(
      circle at 50% 20%,
      rgba(0,207,232,.18),
      transparent 30%
    ),
    radial-gradient(
      circle at 20% 80%,
      rgba(53,229,192,.10),
      transparent 28%
    ),
    linear-gradient(
      135deg,
      #02091f 0%,
      #06143d 48%,
      #02091f 100%
    );

  border-bottom:4px solid transparent;

  border-image:
    linear-gradient(
      90deg,
      #35e5c0,
      #00cfe8,
      #0798e8
    ) 1;
}


/* Decorative glow */

.hero::before{
  content:"";
  position:absolute;
  width:420px;
  height:420px;
  border-radius:50%;
  background:rgba(0,207,232,.08);
  filter:blur(70px);
  top:-220px;
  left:50%;
  transform:translateX(-50%);
  pointer-events:none;
}

.hero::after{
  content:"";
  position:absolute;
  width:260px;
  height:260px;
  border-radius:50%;
  background:rgba(53,229,192,.06);
  filter:blur(70px);
  right:-100px;
  bottom:-100px;
  pointer-events:none;
}

.hero-content{
  position:relative;
  z-index:2;
  max-width:950px;
  margin:auto;
}


/* Hero logo */

.hero-logo{
  width:125px;
  height:125px;
  object-fit:cover;
  border-radius:28px;
  margin-bottom:22px;

  box-shadow:
    0 0 0 5px rgba(255,255,255,.05),
    0 15px 45px rgba(0,0,0,.35);

  transition:.3s ease;
}

.hero-logo:hover{
  transform:translateY(-4px);
}


/* Hero heading */

.hero h1{
  font-size:48px;
  line-height:1.18;
  margin:8px 0 20px;
  font-weight:800;

  background:
    linear-gradient(
      90deg,
      #ffffff 0%,
      #ffffff 35%,
      #7ffff0 68%,
      #00cfe8 100%
    );

  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.hero p{
  max-width:820px;
  margin:0 auto 32px;
  font-size:18px;
  color:#d6e8f5;
  line-height:1.8;
}

.hero strong{
  color:#57e9d0;
}


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

.hero-buttons{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:15px;
  flex-wrap:wrap;
}

.primary-btn,
.secondary-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:14px 27px;
  border-radius:11px;
  text-decoration:none;
  font-weight:800;
  transition:.25s ease;
}

.primary-btn{
  color:#ffffff;

  background:
    linear-gradient(
      100deg,
      #0798e8,
      #00cfe8,
      #35e5c0
    );

  box-shadow:
    0 9px 25px rgba(0,180,230,.25);
}

.primary-btn:hover{
  transform:translateY(-3px);
  box-shadow:
    0 13px 30px rgba(0,180,230,.35);
}

.secondary-btn{
  color:#ffffff;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(53,229,192,.65);
}

.secondary-btn:hover{
  background:rgba(0,207,232,.12);
  border-color:#00cfe8;
  transform:translateY(-3px);
}


/* =========================================================
   MAIN CONTAINER
========================================================= */

.container{
  max-width:1250px;
  margin:auto;
  padding:38px 18px;
}


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

.card{
  background:#ffffff;
  border:1px solid #dce6ef;
  border-radius:18px;
  padding:32px;
  margin-bottom:28px;

  box-shadow:
    0 4px 16px rgba(6,20,61,.055);

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.card:hover{
  box-shadow:
    0 8px 25px rgba(6,20,61,.08);
}


/* Card headings */

.card h2{
  font-size:30px;
  color:#06143D;
  margin:0 0 22px;
  padding-bottom:14px;
  border-bottom:2px solid #edf2f6;
  position:relative;
}

.card h2::after{
  content:"";
  display:block;
  width:65px;
  height:3px;
  border-radius:10px;
  margin-top:11px;

  background:
    linear-gradient(
      90deg,
      #35e5c0,
      #00cfe8,
      #0798e8
    );
}

.card h3{
  color:#06143D;
}

.card p,
.card li{
  font-size:17px;
  color:#405a73;
}

.card strong{
  color:#06143D;
}


/* =========================================================
   TABLE OF CONTENTS
========================================================= */

.toc{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4px 25px;
}

.toc a{
  position:relative;
  text-decoration:none;
  color:#315776;
  font-size:16px;
  font-weight:600;
  padding:9px 0 9px 18px;
  border-bottom:1px solid #edf2f6;
  transition:.2s ease;
}

.toc a::before{
  content:"";
  position:absolute;
  left:0;
  top:18px;
  width:7px;
  height:7px;
  border-radius:50%;

  background:
    linear-gradient(
      135deg,
      #35e5c0,
      #00cfe8
    );
}

.toc a:hover{
  color:#0798e8;
  padding-left:23px;
}


/* =========================================================
   REFER / INVITE CODE
========================================================= */

.invite-box{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;

  padding:22px 25px;

  border:1px dashed #00bdda;
  border-radius:15px;

  background:
    linear-gradient(
      135deg,
      #f0fffc,
      #f1fbff
    );

  box-shadow:
    inset 0 0 20px rgba(0,207,232,.04);
}

.invite-box span{
  display:block;
  font-size:12px;
  color:#67819b;
  font-weight:800;
  letter-spacing:.7px;
}

.invite-box strong{
  display:block;
  margin-top:3px;
  font-size:28px;
  letter-spacing:3px;

  background:
    linear-gradient(
      90deg,
      #00aebf,
      #0798e8
    );

  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.invite-box button{
  border:0;
  background:
    linear-gradient(
      100deg,
      #06143D,
      #0798e8
    );

  color:#ffffff;

  padding:13px 24px;
  border-radius:10px;

  font-weight:800;
  cursor:pointer;

  transition:.25s ease;
}

.invite-box button:hover{
  transform:translateY(-2px);

  box-shadow:
    0 7px 18px rgba(7,152,232,.25);
}

.small-note{
  font-size:14px!important;
  color:#70859a!important;
}


/* =========================================================
   DOWNLOAD BUTTON
========================================================= */

.download-btn{
  display:block;
  max-width:400px;
  margin:28px auto;

  padding:16px;

  text-align:center;
  text-decoration:none;

  color:#ffffff;
  font-weight:800;
  font-size:18px;

  border-radius:12px;

  background:
    linear-gradient(
      100deg,
      #06143D,
      #0768d9,
      #00cfe8
    );

  box-shadow:
    0 9px 24px rgba(0,130,240,.20);

  transition:.25s ease;
}

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

  box-shadow:
    0 13px 30px rgba(0,130,240,.30);
}


/* =========================================================
   APP INFORMATION
========================================================= */

.app-info{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:15px;
  margin-top:25px;
}

.app-info div{
  padding:19px 14px;

  background:
    linear-gradient(
      145deg,
      #f7fafc,
      #f1f8fb
    );

  border:1px solid #e0e8ef;
  border-radius:13px;

  text-align:center;
}

.app-info div:hover{
  border-color:#9bdde8;
}

.app-info span{
  display:block;
  font-size:11px;
  color:#73879b;
  font-weight:700;
  letter-spacing:.5px;
}

.app-info strong{
  display:block;
  margin-top:4px;
  font-size:16px;
  color:#172e49;
}


/* =========================================================
   FEATURES
========================================================= */

.features{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}

.feature{
  padding:25px;

  border:1px solid #dce5ee;
  border-radius:15px;

  background:#ffffff;

  transition:.25s ease;
}

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

  border-color:#7ddde3;

  box-shadow:
    0 10px 25px rgba(6,20,61,.08);
}

.feature-icon{
  width:52px;
  height:52px;

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

  border-radius:13px;

  font-size:27px;

  background:
    linear-gradient(
      135deg,
      #e5fff9,
      #e4f9ff
    );
}

.feature h3{
  color:#0798e8;
  margin:10px 0 7px;
}

.feature p{
  margin-bottom:0;
}


/* =========================================================
   NEW FEATURE GRID SUPPORT
========================================================= */

.feature-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
}

.feature-box{
  padding:24px;

  border:1px solid #dce5ee;
  border-radius:15px;

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

  transition:.25s ease;
}

.feature-box:hover{
  transform:translateY(-4px);
  border-color:#79dce3;

  box-shadow:
    0 10px 25px rgba(6,20,61,.07);
}

.feature-box h3{
  color:#0798e8;
  margin-top:0;
}


/* =========================================================
   TABLE
========================================================= */

table{
  width:100%;
  border-collapse:collapse;
  overflow:hidden;
  border-radius:10px;
}

th,
td{
  border:1px solid #dce5ee;
  padding:15px;
  text-align:left;
}

th{
  background:
    linear-gradient(
      100deg,
      #eef9fb,
      #f3f8fc
    );

  color:#06143D;
  font-weight:800;
}


/* =========================================================
   SCREENSHOTS
========================================================= */

.screenshots,
.screenshot-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}

.screenshots div,
.screenshot-box{
  border:1px solid #dce5ee;
  border-radius:14px;
  overflow:hidden;
  text-align:center;
  background:#06143D;
}

.screenshots img,
.screenshot-box img{
  width:100%;
  height:400px;
  object-fit:contain;
  background:#06143D;
  display:block;
}

.screenshots p{
  font-weight:bold;
  font-size:15px;
}


/* =========================================================
   NOTICE / WARNING
========================================================= */

.notice,
.warning{
  padding:20px;
  border-radius:12px;
  background:#f1fbff;
  border-left:5px solid #0798e8;
}

.notice strong,
.warning strong{
  color:#06143D;
}

.warning{
  background:#fff8ed;
  border-left-color:#f09a28;
}


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

details{
  border:1px solid #dce5ee;
  border-radius:12px;
  margin:12px 0;
  padding:0 18px;
  background:#ffffff;
  transition:.2s ease;
}

details:hover{
  border-color:#8ddde4;
}

summary{
  cursor:pointer;
  font-weight:800;
  color:#06143D;
  padding:17px 0;
}

details p{
  padding-bottom:12px;
}


/* FAQ item from index.html */

.faq-item{
  border:1px solid #dce5ee;
  border-radius:13px;
  margin:12px 0;
  padding:18px 20px;
  background:#ffffff;
  transition:.2s ease;
}

.faq-item:hover{
  border-color:#8ddde4;
  box-shadow:0 5px 18px rgba(6,20,61,.05);
}

.faq-item h3{
  margin:0 0 8px;
  color:#06143D;
}

.faq-item p{
  margin-bottom:0;
}


/* =========================================================
   FINAL CTA
========================================================= */

.final-cta{
  text-align:center;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(0,207,232,.12),
      transparent 45%
    ),
    linear-gradient(
      135deg,
      #06143D,
      #02091f
    );

  border:1px solid #102a62;
}

.final-cta h2{
  color:#ffffff;
  border-bottom-color:rgba(255,255,255,.12);
}

.final-cta h2::after{
  margin-left:auto;
  margin-right:auto;
}

.final-cta p{
  color:#c9deed;
}


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

footer{
  background:
    linear-gradient(
      135deg,
      #020817,
      #06143D
    );

  color:#9bb9d1;

  padding:55px 20px 25px;

  border-top:3px solid transparent;

  border-image:
    linear-gradient(
      90deg,
      #35e5c0,
      #00cfe8,
      #0798e8
    ) 1;
}

.footer-inner{
  max-width:1100px;
  margin:auto;

  display:grid;
  grid-template-columns:1.3fr 1fr 1fr;
  gap:50px;
}

footer .logo{
  color:#ffffff;
  margin-bottom:15px;
}

footer .logo img{
  border-radius:11px;
}

footer h3{
  color:#ffffff;
  margin-top:0;
  margin-bottom:15px;
}

footer p{
  color:#9bb9d1;
}

footer a{
  display:block;
  color:#9bb9d1;
  text-decoration:none;
  margin:7px 0;
  transition:.2s ease;
}

footer a:hover{
  color:#35e5c0;
  padding-left:4px;
}


/* Footer bottom */

.footer-bottom,
.copyright{
  max-width:1100px;
  margin:35px auto 0;
  padding-top:22px;

  border-top:1px solid rgba(255,255,255,.12);

  text-align:center;
}

.footer-bottom p,
.copyright p{
  margin:0;
  color:#7f9bb2;
  font-size:14px;
}


/* =========================================================
   SELECTION
========================================================= */

::selection{
  background:#00cfe8;
  color:#06143D;
}


/* =========================================================
   SCROLLBAR
========================================================= */

::-webkit-scrollbar{
  width:9px;
}

::-webkit-scrollbar-track{
  background:#eef3f7;
}

::-webkit-scrollbar-thumb{
  background:
    linear-gradient(
      #35e5c0,
      #00cfe8,
      #0798e8
    );

  border-radius:10px;
}

::-webkit-scrollbar-thumb:hover{
  background:#0798e8;
}


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

@media(max-width:992px){

  .header-inner{
    min-height:70px;
  }

  nav{
    gap:16px;
  }

  nav a{
    font-size:14px;
  }

  .hero h1{
    font-size:42px;
  }

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

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

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

}


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

@media(max-width:760px){

  .header{
    z-index:9999;
  }

  .header-inner{
    height:65px;
    min-height:65px;
    padding:0 15px;
  }

  .logo{
    font-size:20px;
    gap:9px;
  }

  .logo img{
    width:40px;
    height:40px;
    border-radius:10px;
  }

  .menu-btn{
    display:flex;
    align-items:center;
    justify-content:center;
  }


  /* Mobile navigation */

  nav{
    display:none;

    position:absolute;

    left:12px;
    right:12px;
    top:73px;

    padding:8px 17px;

    flex-direction:column;
    align-items:stretch;

    gap:0;

    background:#ffffff;

    border:1px solid #dce5ee;
    border-radius:14px;

    box-shadow:
      0 15px 35px rgba(6,20,61,.16);

    animation:menuDown .2s ease;
  }

  nav.active{
    display:flex;
  }

  nav a{
    padding:13px 5px;
    border-bottom:1px solid #edf2f6;
  }

  nav a:last-child{
    border-bottom:0;
  }

  nav a::after{
    display:none;
  }


  @keyframes menuDown{

    from{
      opacity:0;
      transform:translateY(-8px);
    }

    to{
      opacity:1;
      transform:translateY(0);
    }

  }


  /* Hero */

  .hero{
    padding:48px 16px 58px;
  }

  .hero-logo{
    width:95px;
    height:95px;
    border-radius:22px;
    margin-bottom:18px;
  }

  .hero h1{
    font-size:34px;
    line-height:1.2;
    margin-top:8px;
  }

  .hero p{
    font-size:16px;
    line-height:1.7;
  }


  /* Buttons */

  .hero-buttons{
    flex-direction:column;
    width:100%;
    max-width:430px;
    margin:auto;
  }

  .primary-btn,
  .secondary-btn{
    width:100%;
  }


  /* Main */

  .container{
    padding:25px 12px;
  }

  .card{
    padding:23px 17px;
    border-radius:15px;
    margin-bottom:20px;
  }

  .card h2{
    font-size:25px;
  }

  .card p,
  .card li{
    font-size:16px;
  }


  /* TOC */

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


  /* Invite box */

  .invite-box{
    flex-direction:column;
    align-items:stretch;
    gap:15px;
    padding:20px;
  }

  .invite-box strong{
    font-size:23px;
    word-break:break-word;
  }

  .invite-box button{
    width:100%;
  }


  /* App information */

  .app-info{
    grid-template-columns:1fr;
  }


  /* Features */

  .features,
  .feature-grid{
    grid-template-columns:1fr;
  }


  /* Screenshots */

  .screenshots,
  .screenshot-grid{
    grid-template-columns:1fr;
  }

  .screenshots img,
  .screenshot-box img{
    height:450px;
  }


  /* Tables */

  table{
    display:block;
    overflow-x:auto;
    white-space:nowrap;
  }


  /* Footer */

  .footer-inner{
    grid-template-columns:1fr;
    gap:28px;
  }

  footer{
    padding:42px 18px 22px;
  }

}


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

@media(max-width:420px){

  .logo{
    font-size:18px;
  }

  .logo img{
    width:38px;
    height:38px;
  }

  .menu-btn{
    width:42px;
    height:42px;
  }

  .hero h1{
    font-size:30px;
  }

  .hero-logo{
    width:85px;
    height:85px;
  }

  .card{
    padding:20px 15px;
  }

  .card h2{
    font-size:23px;
  }

  .invite-box strong{
    font-size:20px;
    letter-spacing:2px;
  }

  .screenshots img,
  .screenshot-box img{
    height:400px;
  }

}