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

.menu-toggle{

  display:none;

  width:52px;
  height:52px;

  border:none;

  border-radius:16px;

  background:
  rgba(7,12,18,.78);

  border:
  1px solid rgba(255,210,120,.16);

  color:#fff;

  font-size:26px;

  cursor:pointer;

  backdrop-filter:blur(12px);
}

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

@media(max-width:900px){

  .menu-toggle{

    display:flex;

    align-items:center;

    justify-content:center;
  }

  .nav{

    position:absolute;

    top:84px;
    left:20px;
    right:20px;

    display:none;

    flex-direction:column;

    gap:12px;

    padding:20px;

    border-radius:24px;



    border:
    1px solid rgba(255,210,120,.16);

    backdrop-filter:blur(18px);

    box-shadow:
    0 20px 50px rgba(0,0,0,.45);
  }

  .nav.active{

    display:flex;
  }
}

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

@media(max-width:900px){

.menu-toggle{

  position:absolute;

  top:50%;

  right:20px;

  transform:translateY(-50%);

  display:flex;

  align-items:center;

  justify-content:center;

  width:52px;
  height:52px;

  }

  /* NAV */

  .nav{

    position:absolute;

    top:86px;
    left:20px;
    right:20px;

    display:none;

    flex-direction:column;

    gap:14px;

    padding:22px;

    border-radius:28px;

    background:
    rgba(7,12,18,.96);

    border:
    1px solid rgba(255,210,120,.18);

    backdrop-filter:blur(18px);

    box-shadow:
    0 20px 60px rgba(0,0,0,.45);

    z-index:150;
  }

  /* ACTIVE */

  .nav.active{

    display:flex;
  }

  /* LINKS */

  .nav a,
  .nav button{

    width:100%;

    min-height:56px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;
  }

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

  .header-bar{

    display:flex;

    align-items:center;

    justify-content:space-between;

    position:relative;

    width:100%;
  }
/* =========================================================
   HAMBURGER
========================================================= */

.menu-toggle{

  display:none;
}

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

@media(max-width:900px){

  .menu-toggle{

    position:absolute;

    top:50%;

    right:20px;

    transform:translateY(-50%);

    display:flex;

    align-items:center;

    justify-content:center;

    width:52px;
    height:52px;

    border:none;

    border-radius:16px;

    background:
    rgba(7,12,18,.82);

    border:
    1px solid rgba(255,210,120,.16);

    color:#fff;

    font-size:28px;

    cursor:pointer;

    backdrop-filter:blur(12px);

    z-index:200;
  }

  /* NAV */

  .nav{

    position:absolute;

    top:86px;
    left:20px;
    right:20px;

    display:none;

    flex-direction:column;

    gap:14px;

    padding:22px;

    border-radius:28px;

    background:
    rgba(7,12,18,.96);

    border:
    1px solid rgba(255,210,120,.18);

    backdrop-filter:blur(18px);

    box-shadow:
    0 20px 60px rgba(0,0,0,.45);

    z-index:150;
  }

  /* ACTIVE */

  .nav.active{

    display:flex;
  }

  /* LINKS */

  .nav a{

    width:100%;

    min-height:56px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;
  }

}

/* =========================================================
   GLOBAL MOBILE FIX
========================================================= */

@media(max-width:900px){

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

  html,
  body{

    overflow-x:hidden;
  }

  body{

    width:100%;

    min-height:100dvh;
  }

  *{

    max-width:100%;
  }

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

  .container{

    width:calc(100% - 32px);

    margin-inline:auto;
  }

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

  .site-header{

    height:74px;
  }

  .header-bar{

    height:74px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    position:relative;
  }

  /* LOGO */

  .brand{

    gap:10px;

    flex:none;
  }

  .brand img{

    height:48px;
  }

  .brand .name{

    font-size:18px;
  }

  /* =========================
     HAMBURGER
  ========================= */

  .menu-toggle{

    display:flex !important;

    align-items:center;

    justify-content:center;

    position:absolute;

right:0;

    width:48px;
    height:48px;

    border:none;

    border-radius:16px;

    background:
    rgba(255,255,255,.06);

    color:#fff;

    font-size:28px;

    cursor:pointer;

    flex:none;
  }

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

  .nav{

    display:none;

    position:absolute;

    top:82px;
    left:0;

    width:100%;

    padding:18px;

    border-radius:24px;

    background:
    rgba(5,10,15,.96);

    border:
    1px solid rgba(255,255,255,.06);

    backdrop-filter:blur(18px);

    flex-direction:column;

    align-items:stretch;

    gap:12px;

    box-shadow:
    0 20px 60px rgba(0,0,0,.45);
  }

  .nav.active{

    display:flex;
  }

  .nav a{

    width:100%;

    min-height:54px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    background:
    rgba(255,255,255,.04);

    font-size:15px;

    font-weight:800;
  }

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

  .hero{

    min-height:auto;

    padding:
    calc(var(--header-h) + 20px)
    0
    40px;
  }

  .hero-content,
  .index-hero-content,
  .service-hero-content,
  .contact-hero-content,
  .register-hero-content,
  .privacy-hero-content,
  .forgot-hero-content{

    width:100%;

    padding-left:16px !important;

    padding-right:16px !important;

    justify-content:flex-start;
  }

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

  .hero-inner,
  .index-hero-inner,
  .service-hero-inner,
  .contact-hero-inner,
  .register-hero-inner,
  .privacy-hero-inner,
  .forgot-hero-inner{

    width:100%;

    padding:26px 22px;

    border-radius:28px;
  }

  /* =========================
     TITLES
  ========================= */

  .hero h1,
  .index-hero-inner h1,
  .service-hero-inner h1,
  .contact-hero-inner h1,
  .register-hero-inner h1,
  .privacy-hero-inner h1,
  .forgot-hero-inner h1,
  .login-title{

    font-size:
clamp(32px,9vw,50px) !important;

    line-height:1;

    letter-spacing:-2px;
  }

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

  .hero-text,
  .login-subtitle{

    font-size:16px !important;

    line-height:1.7;
  }

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

  .premium-btn,
  .contact-btn,
  .register-btn,
  .forgot-btn,
  .privacy-btn,
  .why-card .btn{

    width:100%;

    min-height:56px;

    border-radius:18px;
  }

  /* =========================
     FORMS
  ========================= */

  .contact-form,
  .register-form,
  .forgot-form,
  .login-modern-form{

    gap:14px;
  }

  .contact-form input,
  .contact-form textarea,
  .register-form input,
  .forgot-form input,
  .login-input-group input{

    font-size:16px;

    min-height:56px;
  }

  /* =========================
     GRID
  ========================= */

  .contact-grid,
  .services-grid,
  .cards-grid,
  .hero-widgets{

    grid-template-columns:1fr !important;
  }

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

  .services-wrapper,
  .contact-section,
  .register-section,
  .privacy-section,
  .forgot-section{

    margin-top:-60px !important;

    padding-left:16px;

    padding-right:16px;
  }

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

  .service-card,
  .contact-card,
  .register-card,
  .privacy-card,
  .forgot-card{

    width:100%;

    padding:24px 20px;

    border-radius:28px;

    min-height:auto;
  }

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

  .feature-card{

    min-height:auto;

    padding:24px 20px;

    border-radius:24px;
  }

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

  .feature-title,
  .service-card h3{

    font-size:24px;

    min-height:auto;
  }

  /* =========================
     MODAL
  ========================= */

  .modal-card{

    width:calc(100% - 24px);

    padding:24px 20px;

    border-radius:28px;
  }

  .modal-card h2{

    font-size:28px;
  }

  /* =========================
     SCAN
  ========================= */

  .scan-wrapper{

    width:100%;

    padding:22px 18px;

    border-radius:28px;
  }

  .scan-title{

    font-size:
    clamp(34px,10vw,52px);
  }

  /* =========================
     FOOTER
  ========================= */
/* =========================================================
   FORGOT PAGE LAYOUT
========================================================= */

html,
body{

  min-height:100%;
}

body{

  min-height:100vh;

  display:flex;

  flex-direction:column;
}

/* MAIN */

main{

  flex:1;

  display:flex;

  flex-direction:column;
}

/* HERO */

.forgot-page .hero,
.hero{

  flex:1;
}

/* FOOTER */

.site-footer{

  margin-top:auto;
}
  .site-footer{

    margin-top:40px;

    padding:28px 0;
  }

}

@media(max-width:900px){

  .contact-section{

    margin-top:-280px !important;
  }

}
@media(max-width:900px){

  .services-grid{

    grid-template-columns:1fr !important;

    gap:22px;
  }

  .service-card{

    width:100%;

    padding:24px 22px;

    border-radius:28px;
  }

}

@media(max-width:900px){

  .services-wrapper{

    position:relative;

    z-index:30;

    margin-top:-20px !important;

    padding-left:16px;

    padding-right:16px;
  }

}
@media(max-width:900px){

  .hero-widgets{

    gap:18px;
  }

  .feature-card{

    min-height:auto !important;

    padding:22px 20px !important;

    border-radius:26px;
  }

  .feature-title{

    margin-bottom:12px;

    font-size:20px;
  }

  .feature-desc{

    font-size:15px;

    line-height:1.7;

    margin:0;
  }

}

/* =========================================================
   PAGE qrcode
========================================================= */

.scan-page{

  min-height:100vh;

  display:flex;

  flex-direction:column;
}

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

.scan-main{

  flex:1;

  display:flex;

  align-items:center;

  justify-content:center;

  padding:
  calc(var(--header-h) + 40px)
  20px
  40px;
}

/* =========================================================
   WRAPPER
========================================================= */

.scan-wrapper{

  position:relative;

  overflow:hidden;

  width:min(100%,620px);

  padding:34px;

  border-radius:34px;

  background:
  rgba(7,12,18,.82);

  border:
  1px solid rgba(255,210,120,.22);

  backdrop-filter:blur(14px);

  box-shadow:
  0 0 0 1px rgba(255,210,120,.05),
  0 20px 50px rgba(0,0,0,.35);
}

/* GOLD GLOW */

.scan-wrapper::before{

  content:"";

  position:absolute;

  top:-140px;
  right:-140px;

  width:260px;
  height:260px;

  background:
  radial-gradient(
    circle,
    rgba(217,155,46,.14),
    transparent 70%
  );

  pointer-events:none;
}

/* GOLD LINE */

.scan-wrapper::after{

  content:"";

  position:absolute;

  top:0;
  left:0;

  width:100%;
  height:1px;

  background:
  linear-gradient(
    90deg,
    transparent,
    rgba(255,210,120,.9),
    transparent
  );
}

/* =========================================================
   TITLE
========================================================= */

.scan-title{

  margin:0 0 24px;

  font-size:
  clamp(42px,6vw,72px);

  line-height:1;

  letter-spacing:-2px;

  font-weight:900;

  color:#fff;
}

.scan-title span{

  display:block;

  color:var(--gold);
}

/* =========================================================
   READER
========================================================= */

#reader{

  overflow:hidden;

  border-radius:24px;

  border:
  1px solid rgba(255,255,255,.08);
}

/* =========================================================
   RESULT
========================================================= */

#result{

  margin-top:22px;

  padding:18px;

  border-radius:20px;

  background:
  rgba(255,255,255,.04);

  border:
  1px solid rgba(255,255,255,.06);

  color:#d7e0ea;

  text-align:center;

  line-height:1.7;

  word-break:break-word;
}

/* SUCCESS */

.scan-success{

  color:var(--gold2);

  font-size:20px;

  font-weight:900;
}

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

@media(max-width:900px){

  .scan-main{

    padding:
    calc(var(--header-h) + 20px)
    16px
    30px;
  }

  .scan-wrapper{

    width:100%;

    padding:26px 22px;

    border-radius:28px;
  }

  .scan-title{

    font-size:
    clamp(38px,10vw,58px);
  }

}
/* =========================================================
   MOBILE DROPDOWN MENU
========================================================= */

@media(max-width:900px){

  .nav{

    position:absolute;

    top:72px;

    right:0 !important;

    left:auto !important;

    width:260px !important;

    padding:14px !important;

    border-radius:26px !important;

    background:
    rgba(5,10,15,.96);

    border:
    1px solid rgba(255,255,255,.06);

    backdrop-filter:blur(18px);

    box-shadow:
    0 20px 60px rgba(0,0,0,.45);

    z-index:9999;
  }

  .nav a{

    min-height:50px;

    border-radius:16px;

    font-size:15px;
  }

}