/* =========================================================
   ELEPAY0.COM — PREMIUM RESPONSIVE CSS
   Theme: Black + Electric Blue
   ========================================================= */

*{
  box-sizing:border-box;
}

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

body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  background:#f4f7fb;
  color:#24384d;
  line-height:1.7;
  -webkit-text-size-adjust:100%;
}

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

a{
  color:inherit;
}

button,
a{
  -webkit-tap-highlight-color:transparent;
}

button{
  font-family:inherit;
}


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

.header{
  position:sticky;
  top:0;
  z-index:9999;
  background:#ffffff;
  border-bottom:1px solid #dfe7ef;
  box-shadow:0 2px 12px rgba(5,20,35,.06);
}

.header-inner{
  width:min(1250px,94%);
  height:75px;
  margin:auto;
  padding:0 10px;

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


/* =========================================================
   LOGO
   ========================================================= */

.logo{
  display:flex;
  align-items:center;
  gap:12px;

  text-decoration:none;

  font-size:25px;
  font-weight:800;
  letter-spacing:-.4px;

  color:#07111d;
}

.logo img{
  width:48px;
  height:48px;

  object-fit:cover;

  border-radius:12px;

  box-shadow:
    0 4px 12px rgba(0,0,0,.15),
    0 0 0 1px rgba(0,0,0,.05);
}

.logo span{
  background:linear-gradient(
    90deg,
    #07111d,
    #087fe5
  );

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


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

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

nav a{
  position:relative;

  text-decoration:none;

  color:#3c5268;

  font-size:15px;
  font-weight:700;

  padding:8px 0;

  transition:
    color .2s ease,
    transform .2s ease;
}

nav a::after{
  content:"";

  position:absolute;
  left:0;
  bottom:1px;

  width:0;
  height:2px;

  background:#078cff;

  transition:width .2s ease;
}

nav a:hover{
  color:#078cff;
}

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


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

.menu-btn{
  display:none;

  width:44px;
  height:44px;

  border:1px solid #d9e3ec;
  border-radius:10px;

  background:#ffffff;

  color:#07111d;

  font-size:25px;
  line-height:1;

  cursor:pointer;

  transition:
    background .2s ease,
    color .2s ease,
    border-color .2s ease;
}

.menu-btn:hover{
  background:#078cff;
  color:#ffffff;
  border-color:#078cff;
}


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

.hero{
  position:relative;

  padding:72px 20px 80px;

  text-align:center;

  color:#ffffff;

  overflow:hidden;

  background:
    radial-gradient(
      circle at 50% 15%,
      rgba(12,145,255,.28),
      transparent 32%
    ),
    radial-gradient(
      circle at 80% 90%,
      rgba(0,92,180,.18),
      transparent 35%
    ),
    linear-gradient(
      145deg,
      #020509 0%,
      #07111d 50%,
      #02060a 100%
    );

  border-bottom:4px solid #078cff;
}


/* subtle blue glow */

.hero::before{
  content:"";

  position:absolute;

  width:320px;
  height:320px;

  left:50%;
  top:25px;

  transform:translateX(-50%);

  background:rgba(0,140,255,.10);

  filter:blur(80px);

  border-radius:50%;

  pointer-events:none;
}

.hero-content{
  position:relative;
  z-index:1;

  width:min(950px,100%);
  margin:auto;
}


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

.hero-logo{
  width:115px;
  height:115px;

  margin:0 auto 22px;

  object-fit:cover;

  border-radius:27px;

  background:#000000;

  box-shadow:
    0 15px 40px rgba(0,0,0,.45),
    0 0 0 1px rgba(255,255,255,.08),
    0 0 35px rgba(0,140,255,.16);
}


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

.hero h1{
  margin:10px auto 20px;

  max-width:900px;

  font-size:48px;
  line-height:1.18;

  letter-spacing:-1.2px;

  font-weight:800;

  background:
    linear-gradient(
      90deg,
      #ffffff 0%,
      #ffffff 35%,
      #54c5ff 100%
    );

  -webkit-background-clip:text;
  background-clip:text;

  color:transparent;
}


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

.hero p{
  max-width:820px;

  margin:0 auto 32px;

  font-size:18px;
  line-height:1.8;

  color:#d5e6f4;
}

.hero p strong{
  color:#ffffff;
}


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

.hero-buttons{
  display:flex;

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

  gap:13px;

  flex-wrap:wrap;
}

.primary-btn,
.secondary-btn,
.telegram-btn{
  display:inline-flex;

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

  min-height:50px;

  padding:14px 24px;

  border-radius:10px;

  text-decoration:none;

  font-size:15px;
  font-weight:800;

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

.primary-btn{
  color:#ffffff;

  background:
    linear-gradient(
      135deg,
      #006fe6,
      #08a9ff
    );

  box-shadow:
    0 8px 22px rgba(0,132,240,.25);
}

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

  box-shadow:
    0 12px 28px rgba(0,132,240,.35);
}

.secondary-btn{
  color:#ffffff;

  background:#0b1827;

  border:1px solid #218fd8;
}

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

  background:#102338;
}

.telegram-btn{
  color:#ffffff;

  background:#168dcc;

  border:1px solid #37aee8;
}

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

  background:#0d7db8;
}


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

.container{
  width:min(1250px,94%);

  margin:auto;

  padding:38px 0;
}


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

.card{
  background:#ffffff;

  border:1px solid #dce6ef;

  border-radius:18px;

  padding:32px;

  margin-bottom:28px;

  box-shadow:
    0 4px 18px rgba(18,43,68,.055);
}

.card h2{
  margin:0 0 21px;

  padding-bottom:13px;

  border-bottom:2px solid #edf2f6;

  color:#0b2038;

  font-size:30px;
  line-height:1.3;

  letter-spacing:-.3px;
}

.card h3{
  color:#087fdf;
}

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

.card li{
  margin-bottom:8px;
}

.card strong{
  color:#17344f;
}


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

.toc{
  display:grid;

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

  gap:5px 30px;
}

.toc a{
  display:block;

  padding:7px 0;

  text-decoration:none;

  color:#315775;

  font-size:16px;
  font-weight:600;

  border-bottom:1px solid #f0f3f6;

  transition:
    color .2s ease,
    padding-left .2s ease;
}

.toc a:hover{
  color:#078cff;
  padding-left:5px;
}


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

.invite-box{
  display:flex;

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

  gap:20px;

  padding:20px 24px;

  border:1px dashed #078cff;

  border-radius:14px;

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

  box-shadow:
    0 5px 18px rgba(0,130,240,.05);
}

.invite-box span{
  display:block;

  margin-bottom:3px;

  font-size:12px;

  color:#67819b;

  font-weight:800;

  letter-spacing:.5px;
}

.invite-box strong{
  display:block;

  font-size:28px;

  letter-spacing:3px;

  color:#078cff;
}

.invite-box button{
  border:0;

  background:
    linear-gradient(
      135deg,
      #006fe6,
      #08a9ff
    );

  color:#ffffff;

  padding:12px 22px;

  border-radius:9px;

  font-weight:800;

  cursor:pointer;

  box-shadow:
    0 6px 16px rgba(0,130,240,.18);

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

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

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

.small-note{
  font-size:14px!important;

  color:#70859a!important;
}


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

.download-btn{
  display:block;

  width:min(400px,100%);

  margin:26px auto;

  padding:16px 20px;

  text-align:center;

  text-decoration:none;

  color:#ffffff;

  font-size:18px;
  font-weight:800;

  border-radius:12px;

  background:
    linear-gradient(
      100deg,
      #0068d7,
      #08a9ff
    );

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

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

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

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


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

.app-info{
  display:grid;

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

  gap:15px;

  margin-top:25px;
}

.app-info div{
  min-width:0;

  padding:18px;

  background:#f6f9fc;

  border:1px solid #e0e8ef;

  border-radius:12px;

  text-align:center;
}

.app-info span{
  display:block;

  margin-bottom:4px;

  font-size:11px;

  color:#73879b;

  font-weight:800;

  letter-spacing:.5px;
}

.app-info strong{
  display:block;

  font-size:15px;

  color:#172e49;
}


/* =========================================================
   FEATURES
   Supports both .features/.feature and .feature-grid
   ========================================================= */

.features,
.feature-grid{
  display:grid;

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

  gap:20px;
}

.feature,
.feature-grid > div{
  padding:24px;

  border:1px solid #dce5ee;

  border-radius:15px;

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

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease;
}

.feature:hover,
.feature-grid > div:hover{
  transform:translateY(-3px);

  border-color:#b9ddf5;

  box-shadow:
    0 9px 24px rgba(18,67,105,.08);
}

.feature-icon{
  font-size:30px;
}

.feature h3,
.feature-grid h3{
  margin:8px 0;

  color:#078cff;

  font-size:20px;
}


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

table{
  width:100%;

  border-collapse:collapse;

  overflow:hidden;

  border-radius:10px;
}

th,
td{
  border:1px solid #dce5ee;

  padding:15px;

  text-align:left;

  color:#405a72;
}

th{
  background:#f2f7fb;

  color:#17344f;

  font-weight:800;
}


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

.screenshots{
  display:grid;

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

  gap:20px;
}

.screenshots > div{
  overflow:hidden;

  border:1px solid #dce5ee;

  border-radius:14px;

  background:#07101a;

  text-align:center;
}

.screenshots img{
  width:100%;
  height:400px;

  object-fit:contain;

  background:#050b12;
}

.screenshots p{
  margin:0;

  padding:12px 8px;

  background:#ffffff;

  color:#24415b!important;

  font-weight:800;

  font-size:15px!important;
}


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

.notice,
.warning{
  margin:20px 0;

  padding:19px 20px;

  border-radius:12px;

  background:#f2f8ff;

  border-left:5px solid #078cff;
}

.notice strong,
.warning strong{
  color:#123653;
}

.notice p,
.warning p{
  margin-bottom:0;
}

.warning{
  background:#fff8ed;

  border-left-color:#f09a28;
}


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

details{
  margin:12px 0;

  padding:0 18px;

  border:1px solid #dce5ee;

  border-radius:12px;

  background:#ffffff;
}

summary{
  cursor:pointer;

  padding:17px 0;

  color:#17344f;

  font-weight:800;
}

details p{
  padding-bottom:12px;
}


/* FAQ sections made with .faq-item */

.faq-item{
  margin-bottom:13px;

  padding:19px 20px;

  border:1px solid #dce5ee;

  border-radius:12px;

  background:#ffffff;
}

.faq-item h3{
  margin:0 0 8px;

  color:#087fdf;

  font-size:19px;
}

.faq-item p{
  margin:0;
}


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

footer{
  background:
    linear-gradient(
      145deg,
      #020508,
      #06101b
    );

  color:#9bb9d1;

  padding:52px 20px 25px;

  border-top:4px solid #078cff;
}

.footer-inner{
  width:min(1100px,100%);

  margin:auto;

  display:grid;

  grid-template-columns:
    1.3fr 1fr 1fr;

  gap:50px;
}

.footer-brand h2{
  margin:0 0 10px;

  color:#ffffff;

  font-size:27px;
}

.footer-brand p{
  max-width:500px;

  margin:0;

  color:#9bb9d1;

  line-height:1.8;
}

footer h3{
  margin-top:0;

  color:#ffffff;

  font-size:17px;
}

footer a{
  display:block;

  width:max-content;

  max-width:100%;

  margin:7px 0;

  color:#9bb9d1;

  text-decoration:none;

  transition:
    color .2s ease,
    padding-left .2s ease;
}

footer a:hover{
  color:#42baff;

  padding-left:4px;
}

.footer-bottom,
.copyright{
  width:min(1100px,100%);

  margin:35px auto 0;

  padding-top:22px;

  border-top:1px solid #26333e;

  text-align:center;

  color:#7895ad;

  font-size:14px;
}


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

::selection{
  background:#078cff;
  color:#ffffff;
}


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

a:focus-visible,
button:focus-visible,
summary:focus-visible{
  outline:3px solid rgba(8,140,255,.35);

  outline-offset:3px;
}


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

@media(max-width:1000px){

  nav{
    gap:17px;
  }

  nav a{
    font-size:14px;
  }

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

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

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

}


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

@media(max-width:760px){

  html{
    scroll-padding-top:70px;
  }


  /* HEADER */

  .header-inner{
    width:100%;

    height:65px;

    padding:0 14px;
  }

  .logo{
    font-size:21px;

    gap:9px;
  }

  .logo img{
    width:40px;
    height:40px;

    border-radius:10px;
  }

  .menu-btn{
    display:flex;

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


  /* MOBILE NAV */

  nav{
    display:none;

    position:absolute;

    left:0;
    right:0;
    top:65px;

    width:100%;

    padding:9px 18px 14px;

    flex-direction:column;

    gap:0;

    background:#ffffff;

    border-bottom:1px solid #dce5ee;

    box-shadow:
      0 10px 25px rgba(0,0,0,.09);
  }

  nav.active{
    display:flex;
  }

  nav a{
    width:100%;

    padding:12px 3px;

    border-bottom:1px solid #edf1f5;

    font-size:15px;
  }

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

  nav a::after{
    display:none;
  }


  /* HERO */

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

  .hero-logo{
    width:90px;
    height:90px;

    border-radius:21px;

    margin-bottom:18px;
  }

  .hero h1{
    font-size:34px;

    line-height:1.22;

    letter-spacing:-.7px;

    margin:8px auto 17px;
  }

  .hero p{
    font-size:16px;

    line-height:1.75;

    margin-bottom:25px;
  }

  .hero-buttons{
    flex-direction:column;

    width:100%;

    gap:10px;
  }

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

    min-height:50px;
  }


  /* MAIN */

  .container{
    width:100%;

    padding:25px 13px;
  }

  .card{
    padding:23px 17px;

    margin-bottom:20px;

    border-radius:15px;
  }

  .card h2{
    font-size:25px;

    line-height:1.3;
  }

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


  /* TOC */

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

    gap:0;
  }

  .toc a{
    font-size:15px;

    padding:8px 0;
  }


  /* REFER */

  .invite-box{
    align-items:stretch;

    flex-direction:column;

    gap:15px;

    padding:18px;
  }

  .invite-box strong{
    font-size:25px;

    word-break:break-all;
  }

  .invite-box button{
    width:100%;

    min-height:46px;
  }


  /* APP INFO */

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

    gap:10px;
  }

  .app-info div{
    padding:14px 8px;
  }

  .app-info strong{
    font-size:14px;
  }


  /* FEATURES */

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

    gap:14px;
  }

  .feature,
  .feature-grid > div{
    padding:20px;
  }


  /* SCREENSHOTS */

  .screenshots{
    grid-template-columns:1fr;

    gap:15px;
  }

  .screenshots img{
    height:450px;
  }


  /* TABLE */

  table{
    display:block;

    overflow-x:auto;

    white-space:nowrap;
  }


  /* FOOTER */

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

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

    gap:28px;
  }

  footer a{
    font-size:15px;
  }

}


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

@media(max-width:420px){

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

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

  .card{
    padding:20px 15px;
  }

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

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

  .screenshots img{
    height:420px;
  }

}


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

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

  html{
    scroll-behavior:auto;
  }

  *,
  *::before,
  *::after{
    transition:none!important;
    animation:none!important;
  }

}