:root{
    --bg0:#02012a;
    --bg1:#04044a;
    --bg2:#0b1d93;
    --card: rgba(255,255,255,.05);
    --card2: rgba(255,255,255,.06);
    --stroke: rgba(255,255,255,.12);
    --stroke2: rgba(255,255,255,.18);
    --text: rgba(255,255,255,.92);
    --muted: rgba(255,255,255,.65);
    --muted2: rgba(255,255,255,.45);
    --accent:#3a56ff;
    --accent2:#7a4dff;
  }

  body{
    background: radial-gradient(1200px 900px at 50% 5%, rgba(66, 76, 255, .25) 0%, rgba(122,77,255,.14) 30%, rgba(0,0,0,0) 60%),
                linear-gradient(180deg, var(--bg0) 0%, var(--bg1) 35%, #041179 70%, #0c2bb0 100%);
    color: var(--text);
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    overflow-x:hidden;
  }

  .promo-bar{
    background: linear-gradient(90deg, rgba(122,77,255,1) 0%, rgba(58,86,255,1) 100%);
    color:#fff;
    font-weight:600;
    letter-spacing:.2px;
    font-size: 14px;
    padding: 10px 14px;
    text-align:center;
    position: sticky;
    top: 0;
    z-index: 2000;
  }

  .hero{
    padding: 86px 0 40px;
    position: relative;
    min-height: 680px;
  }
  .site-topbar{
    padding: 18px 0 6px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: rgba(2,1,42,.4);
    backdrop-filter: blur(8px);
  }
  .brand-display{
    font-family: "Playfair Display", "Times New Roman", serif;
    letter-spacing: .4px;
  }
  .brand-lockup{
    display:flex;
    align-items:center;
    gap: 14px;
  }
  .brand-mark{
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight: 900;
    background: linear-gradient(135deg, rgba(74,96,255,1), rgba(122,77,255,1));
    box-shadow: 0 16px 40px rgba(0,0,0,.35);
  }
  .brand-name{
    font-size: 20px;
    font-weight: 900;
  }
  .brand-sub{
    color: var(--muted2);
    font-size: 13px;
    font-weight: 700;
  }
  .hero .globe{
    position:absolute;
    inset: 0;
    display:flex;
    justify-content:center;
    align-items:flex-start;
    pointer-events:none;
    opacity:.55;
    transform: translateY(-12px);
  }
  .hero .globe:before{
    content:"";
    width: 740px;
    height: 740px;
    border-radius: 50%;

    filter: saturate(1.3) contrast(1.05);
    box-shadow: 0 60px 120px rgba(0,0,0,.55);
    mask-image: radial-gradient(circle at 50% 50%, rgba(0,0,0,1) 45%, rgba(0,0,0,0) 70%);
    -webkit-mask-image: radial-gradient(circle at 50% 50%, rgba(0,0,0,1) 45%, rgba(0,0,0,0) 70%);
  }

  .hero h1{
    font-size: clamp(44px, 6.2vw, 96px);
    line-height: 1.02;
    font-weight: 800;
    letter-spacing: -1px;
    text-shadow: 0 18px 50px rgba(0,0,0,.55);
  }
  .hero .sub{
    max-width: 760px;
    margin: 16px auto 0;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.55;
  }

  .btn-pill{
    border-radius: 999px;
    padding: 12px 18px;
    font-weight: 700;
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 18px 40px rgba(0,0,0,.35);
  }
  .btn-primary.btn-pill{
    background: linear-gradient(180deg, rgba(74,96,255,1) 0%, rgba(49,77,255,1) 100%);
    border-color: rgba(255,255,255,.08);
  }
  .btn-outline-light.btn-pill{
    background: rgba(0,0,0,.20);
    border-color: rgba(255,255,255,.28);
  }

  .section-title{
    text-align:center;
    margin: 18px 0 22px;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.3px;
    color: rgba(255,255,255,.9);
  }

  .glass-card{
    background: linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.04) 100%);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 18px;
    box-shadow: 0 25px 70px rgba(0,0,0,.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    min-height: 160px;
  }
  .glass-card .icon{
    color: rgba(90,140,255,.85);
    font-size: 22px;
    margin-bottom: 14px;
  }
  .glass-card .kicker{
    color: rgba(90,140,255,.9);
    font-weight: 800;
    margin-bottom: 2px;
  }
  .glass-card .desc{
    font-weight: 800;
    font-size: 20px;
    line-height: 1.2;
    color: rgba(255,255,255,.92);
  }

  .big-head{
    text-align:center;
    font-size: clamp(34px, 4.4vw, 64px);
    font-weight: 900;
    letter-spacing: -.8px;
    margin-top: 40px;
  }
  .big-sub{
    text-align:center;
    margin: 10px auto 0;
    max-width: 760px;
    color: var(--muted2);
  }

  .pill-row{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    justify-content:center;
    margin-top: 22px;
  }
  .seg{
    display:inline-flex;
    gap:6px;
    padding: 6px;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 18px 40px rgba(0,0,0,.25);
  }
  .seg button{
    border:0;
    background: transparent;
    color: rgba(255,255,255,.75);
    padding: 8px 14px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 14px;
    cursor:pointer;
    transition: .15s ease;
  }
  .seg button.active{
    background: rgba(58,86,255,.55);
    color:#fff;
    box-shadow: 0 14px 28px rgba(0,0,0,.25);
  }
  .badge-new{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(255,80,160,.10);
    border: 1px solid rgba(255,80,160,.25);
    color: rgba(255,255,255,.9);
    box-shadow: 0 18px 40px rgba(0,0,0,.22);
    font-weight: 800;
  }
  .badge-new small{
    color: rgba(255,80,160,.95);
    font-weight: 900;
    letter-spacing: .8px;
  }

  .pricing-wrap{
    margin-top: 22px;
    padding: 26px 0 70px;
    position:relative;
  }
  .pricing-card{
    max-width: 1080px;
    margin: 0 auto;
    padding: 26px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(78,105,255,.55) 0%, rgba(103,68,255,.48) 100%);
    border: 1px solid rgba(255,255,255,.15);
    box-shadow: 0 40px 120px rgba(0,0,0,.40);
  }
  .pricing-card .topline{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:18px;
    align-items:flex-end;
    margin-bottom: 16px;
  }
  .pricing-card .h{
    font-size: 26px;
    font-weight: 900;
    margin:0;
    text-align:center;
  }
  .pricing-card .subh{
    color: rgba(255,255,255,.75);
    font-weight: 800;
    margin-top: 4px;
    text-align:center;
  }
  .reward-row{
    display:flex;
    flex-wrap:wrap;
    gap:18px;
    justify-content:center;
    align-items:center;
    margin: 18px 0 8px;
    color: rgba(255,255,255,.85);
    font-weight: 800;
  }
  .reward-item{
    display:flex;
    align-items:center;
    gap:10px;
    font-size: 14px;
  }
  .reward-item .tick{
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: rgba(0,0,0,.45);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border: 1px solid rgba(255,255,255,.25);
  }
  .pricing-table{
    margin-top: 18px;
    background: rgba(0,0,0,.20);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 18px;
    padding: 18px;
  }
  .pricing-table table{
    margin:0;
    color: rgba(255,255,255,.90);
  }
  .pricing-table th{
    border:0;
    font-weight: 900;
    padding: 10px 12px;
  }
  .pricing-table td{
    border-top: 1px solid rgba(255,255,255,.08);
    padding: 12px 12px;
    font-weight: 700;
  }
  .pricing-bottom{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,.10);
  }
  .price-big{
    font-size: 54px;
    font-weight: 1000;
    letter-spacing: -1px;
  }

  .earnings{
    padding: 70px 0 40px;
  }
  .earnings .panel{
    background: linear-gradient(180deg, rgba(63,95,255,.55) 0%, rgba(40,75,255,.45) 100%);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 22px;
    box-shadow: 0 45px 130px rgba(0,0,0,.45);
    padding: 56px 28px 26px;
    position:relative;
    overflow:hidden;
  }
  .earnings .panel:before{
    content:"";
    position:absolute;
    inset:-60px -60px auto -60px;
    height: 420px;
    background:
      radial-gradient(closest-side at 50% 60%, rgba(255,255,255,.35), rgba(255,255,255,0) 70%),
      url("https://images.unsplash.com/photo-1521295121783-8a321d551ad2?auto=format&fit=crop&w=1400&q=60");
    background-size: cover;
    opacity:.35;
    filter: contrast(1.05) saturate(1.05);
    mask-image: radial-gradient(circle at 50% 55%, rgba(0,0,0,1) 45%, rgba(0,0,0,0) 75%);
    -webkit-mask-image: radial-gradient(circle at 50% 55%, rgba(0,0,0,1) 45%, rgba(0,0,0,0) 75%);
    pointer-events:none;
  }
  .earnings .panel h2{
    font-size: clamp(44px, 5vw, 70px);
    font-weight: 1000;
    text-align:center;
    position:relative;
    z-index:1;
  }
  .earnings .panel p{
    text-align:center;
    color: rgba(255,255,255,.75);
    position:relative;
    z-index:1;
    margin-bottom: 22px;
    font-weight: 800;
  }
.country-row{
  display: flex;
  gap: 14px;
  overflow-x: auto;          /* REQUIRED */
  overflow-y: hidden;
  padding: 8px 6px 16px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;

  scrollbar-width: none;     /* Firefox */
}
.country-row::-webkit-scrollbar{
  display:none;              /* Chrome/Safari */
}


  .country-card{
    min-width: 260px;
    scroll-snap-align: start;
    background: rgba(0,0,0,.16);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 14px;
    padding: 18px 18px 16px;
    box-shadow: 0 18px 50px rgba(0,0,0,.25);
  }
  .country-card .c{
    display:flex;
    align-items:center;
    gap:10px;
    color: rgba(255,255,255,.86);
    font-weight: 900;
    margin-bottom: 10px;
  }
  .country-card .amt{
    font-size: 34px;
    font-weight: 1000;
    letter-spacing: -.4px;
  }
  .slider-dots{
    display:flex;
    justify-content:center;
    gap:10px;
    margin-top: 14px;
    position:relative;
    z-index:1;
  }
  .nav-bubble{
    width: 36px; height: 36px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(0,0,0,.16);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    user-select:none;
  }

  .platforms{
    padding: 40px 0 70px;
  }
  .platforms .icon-grid{
    display:grid;
    grid-template-columns: repeat(10, minmax(0,1fr));
    gap: 16px;
    opacity:.85;
    margin: 10px auto 34px;
    max-width: 980px;
  }
  .platforms .icon-box{
    aspect-ratio: 1/1;
    border-radius: 16px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight: 1000;
    font-size: 20px;
    color: rgba(255,255,255,.85);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
  }
  @media (max-width: 992px){
    .platforms .icon-grid{ grid-template-columns: repeat(6, minmax(0,1fr)); }
  }
  @media (max-width: 576px){
    .platforms .icon-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
  }

  .testimonials{
    padding: 40px 0 70px;
  }
  .testimonials .big-left{
    font-size: clamp(40px, 5vw, 82px);
    font-weight: 1000;
    letter-spacing: -1px;
    line-height: 1.02;
  }
  .testimonials .big-left .soft{
    color: rgba(255,255,255,.45);
    font-weight: 1000;
  }
  .t-card{
    border-radius: 22px;
    overflow:hidden;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.06);
    box-shadow: 0 30px 90px rgba(0,0,0,.35);
  }
  .t-card img{
    width:100%;
    height: 240px;
    object-fit: cover;
    filter: contrast(1.05) saturate(1.05);
  }
  .t-card .pad{
    padding: 14px 16px 16px;
    color: rgba(255,255,255,.86);
    font-weight: 900;
  }

  .community{
    padding: 50px 0 80px;
    background: linear-gradient(180deg, rgba(255,255,255,.02) 0%, rgba(0,0,0,0) 100%);
  }
  .info-card{
    border-radius: 20px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 30px 100px rgba(0,0,0,.35);
    padding: 20px;
    min-height: 220px;
  }
  .info-card .top{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom: 18px;
  }
  .info-card .top .ic{
    width: 44px; height: 44px;
    border-radius: 14px;
    background: rgba(0,0,0,.20);
    border: 1px solid rgba(255,255,255,.10);
    display:flex;
    align-items:center;
    justify-content:center;
    color: rgba(255,255,255,.85);
    font-size: 20px;
  }
  .info-card h5{
    margin:0;
    font-weight: 1000;
    color: rgba(255,255,255,.92);
  }
  .info-card p{
    margin: 10px 0 0;
    color: rgba(255,255,255,.60);
    font-weight: 700;
    line-height: 1.5;
  }
  .input-glass{
    background: rgba(0,0,0,.14);
    border: 1px solid rgba(255,255,255,.16);
    color: rgba(255,255,255,.85);
    border-radius: 14px;
    padding: 12px 14px;
    outline:none;
    width: 100%;
  }

  .site-footer{
    padding: 40px 0 70px;
    border-top: 1px solid rgba(255,255,255,.08);
    background: rgba(0,0,0,.08);
  }
  .foot-link{
    color: rgba(255,255,255,.75);
    text-decoration:none;
    font-weight: 800;
    display:inline-block;
    margin: 8px 0;
  }
  .foot-link:hover{ color:#fff; text-decoration:underline; }
  .iso-row{
    display:grid;
    grid-template-columns: repeat(1, minmax(0,1fr));
    gap: 14px;
    justify-items:end;
  }
  .iso-badge{
    display:flex;
    gap: 12px;
    align-items:center;
    color: rgba(255,255,255,.80);
    font-weight: 800;
  }
  .iso-badge .iso{
    width: 52px; height: 52px;
    border-radius: 14px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight: 1000;
    letter-spacing:.5px;
  }

  .chat-stack{
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 3000;
    display:flex;
    flex-direction:column;
    gap: 10px;
    align-items:flex-end;
  }
  .chat-pill{
    display:flex;
    align-items:center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.92);
    color: #111;
    font-weight: 900;
    box-shadow: 0 20px 60px rgba(0,0,0,.40);
  }
  .chat-pill .x{
    width: 34px; height: 34px;
    border-radius: 999px;
    background: rgba(0,0,0,.06);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
  }
  .chat-bubble{
    width: 56px; height: 56px;
    border-radius: 999px;
    background: rgba(58,86,255,1);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    box-shadow: 0 20px 60px rgba(0,0,0,.40);
    cursor:pointer;
    border: 1px solid rgba(255,255,255,.15);
  }


  /* ===== Mobile gutters / spacing fixes ===== */
  :root{
  --page-gutter: 18px; /* default mobile side padding */
  }

  /* Give every Bootstrap container a stronger mobile padding */
  @media (max-width: 576px){
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl{
      padding-left: var(--page-gutter) !important;
      padding-right: var(--page-gutter) !important;
  }

  /* Sections that feel tight on mobile */
  .hero{ padding: 64px 0 26px; min-height: auto; }
  .pricing-wrap{ padding: 18px 0 52px; }

  /* Cards: reduce inner padding but keep comfortable edge spacing */
  .glass-card{ border-radius: 16px; }
  .glass-card.p-4{ padding: 18px !important; }

  .pricing-card{ padding: 16px !important; border-radius: 16px; }
  .pricing-table{ padding: 14px !important; border-radius: 16px; }

  .earnings .panel{ padding: 34px 16px 16px !important; border-radius: 18px; }

  /* Big headings scale a bit more nicely */
  .section-title{ margin: 14px 0 14px; font-size: 22px; }
  .big-sub{ padding: 0 4px; }
  }

  /* Small phones (extra narrow) */
  @media (max-width: 380px){
  :root{ --page-gutter: 14px; }
  .glass-card.p-4{ padding: 16px !important; }
  }
  @media (max-width: 576px){
  .chat-stack{ right: 12px; bottom: 12px; }
  .chat-pill{
      max-width: calc(100vw - 24px);
      padding: 10px 12px;
      font-size: 14px;
  }
  }

  /* ===== Hero title (2-line like reference) ===== */
  .hero-title{
  font-size: clamp(44px, 6.2vw, 96px);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -1px;
  text-shadow: 0 18px 50px rgba(0,0,0,.55);
  }
  .hero-title > div{
  display:block;
  }
  .hero-arrow{
  display:inline-block;
  transform: translateY(-2px);
  margin-right: 10px;
  }

  /* Mobile: slightly tighter + prevent edge crowding */
  @media (max-width: 576px){
  .hero-title{
      font-size: 54px;     /* nicer balance on mobile */
      line-height: 1.45;
      margin: 100px 18px 50px 18px;
  }
  .hero-arrow{
      margin-right: 8px;
  }
  }
  @media (max-width: 390px){
  .hero-title{ font-size: 35px; }
  }


  /* ===== HERO video background ===== */
.hero{
position: relative;
overflow: hidden;
}

/* Full-bleed video */
.hero-bg-video{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;     /* cover like a background image */
object-position: center;
z-index: 0;
filter: saturate(1.05) contrast(1.05);
transform: scale(1.02); /* avoids edge gaps on some devices */
}

/* Dark overlay + gradient like your screenshots */
.hero-bg-overlay{
position: absolute;
inset: 0;
z-index: 1;
background:
  radial-gradient(900px 520px at 50% 35%, rgba(0,0,0,.10) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.75) 100%),
  linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.65) 65%, rgba(0,0,0,.75) 100%);
}

/* Make sure your content stays above video */
.hero .globe{ z-index: 2; }
.hero .container{ z-index: 3; }

/* On mobile: slightly stronger overlay for readability */
@media (max-width: 576px){
.hero-bg-overlay{
  background:
    radial-gradient(900px 520px at 50% 30%, rgba(0,0,0,.18) 0%, rgba(0,0,0,.62) 55%, rgba(0,0,0,.80) 100%),
    linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.72) 70%, rgba(0,0,0,.82) 100%);
}
}

.hero-bg-video{ opacity: .0; transition: opacity .6s ease; }
.hero.loaded .hero-bg-video{ opacity: 1; }

.hero-bg-video{
object-fit: cover;
object-position: center;
}



@media (max-width: 576px){
.hero-bg-video{

  background: #000;
  transform: translateY(-0.1%) scale(1.06);  /* push up + zoom slightly */
}
}

.iso-row{
    display:flex;
    flex-direction:column;
    gap: 14px;
  }
  
  .iso-badge{
    display:flex;
    align-items:center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  }
  
  .iso{
    width: 60px;              /* fixed so all text aligns */
    height: 48px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius: 14px;
    font-weight: 1000;
    letter-spacing: .08em;
    color: rgba(255,255,255,.92);
    background: rgba(0,0,0,.22);
    border: 1px solid rgba(255,255,255,.10);
  }
  
  .iso-text{ line-height: 1.15; }
  
  .iso-title{
    font-weight: 1000;
    font-size: 18px;
  }
  
  .iso-sub{
    margin-top: 4px;
    font-weight: 900;
    opacity: .72;
    font-size: 14px;
  }
  
  /* Mobile: tighter + less tall */
  @media (max-width: 576px){
    .iso-badge{ padding: 12px 14px; border-radius: 14px; }
    .iso{ width: 54px; height: 44px; border-radius: 12px; }
    .iso-title{ font-size: 16px; }
    .iso-sub{ font-size: 13px; }
  }
  
/* Register page */
.auth-page{
  min-height: 100vh;
}
.auth-hero{
  padding: 50px 0 90px;
  position: relative;
}
.auth-topbar{
  padding: 18px 0 6px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(2,1,42,.4);
  backdrop-filter: blur(8px);
}
.brand-display{
  font-family: "Playfair Display", "Times New Roman", serif;
  letter-spacing: .4px;
}
.auth-hero:before{
  content:"";
  position:absolute;
  inset: 120px 10% auto 10%;
  height: 380px;
  background: radial-gradient(450px 250px at 15% 20%, rgba(122,77,255,.25) 0%, rgba(122,77,255,0) 70%),
              radial-gradient(520px 320px at 85% 30%, rgba(58,86,255,.25) 0%, rgba(58,86,255,0) 75%);
  pointer-events:none;
  z-index: 0;
}
.auth-hero .container{
  position: relative;
  z-index: 1;
}
.brand-lockup{
  display:flex;
  align-items:center;
  gap: 14px;
}
.brand-mark{
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  background: linear-gradient(135deg, rgba(74,96,255,1), rgba(122,77,255,1));
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
}
.brand-name{
  font-size: 20px;
  font-weight: 900;
}
.brand-sub{
  color: var(--muted2);
  font-size: 13px;
  font-weight: 700;
}
.auth-card{
  margin-top: 40px;
  padding: 34px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.04) 100%);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 30px 70px rgba(0,0,0,.4);
  backdrop-filter: blur(16px);
}
.auth-title{
  font-size: 28px;
  font-weight: 900;
}
.auth-sub{
  color: var(--muted);
  margin-top: 6px;
}
.auth-card .form-label{
  font-weight: 700;
  color: rgba(255,255,255,.85);
}
.auth-card .form-control,
.auth-card .form-select{
  background: rgba(5,9,38,.55);
  border: 1px solid rgba(255,255,255,.12);
  color: #fff;
  border-radius: 12px;
  padding: 12px 14px;
}
.auth-card .form-control::placeholder{
  color: rgba(255,255,255,.45);
}
.auth-card .form-check-input{
  background-color: rgba(5,9,38,.55);
  border-color: rgba(255,255,255,.25);
}
.auth-card a{
  color: rgba(120,200,255,.95);
  font-weight: 700;
}
.auth-footer{
  margin-top: 18px;
  text-align:center;
  color: var(--muted2);
  font-weight: 700;
}
.auth-note{
  text-align:center;
  margin-top: 26px;
  color: rgba(255,255,255,.65);
  font-weight: 700;
}

@media (max-width: 767px){
  .auth-card{
    padding: 26px;
  }
}
.brand-display{
  font-family: "Sora", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 20px; /* adjust if you want */
  line-height: 1;
}

.brand-display{
  text-transform: none;
}

.site-topbar .btn-pill{
  border-radius: 12px !important;
}

.auth-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

/* Mobile: keep right, reduce padding + radius */
@media (max-width: 576px){
  .auth-actions .btn{
    padding: 8px 12px;
    border-radius: 12px !important;
    font-weight: 900;
  }
}


.brand-logo-link {
    display: inline-block;
    text-decoration: none;
}

.brand-logo {
    height: 40px;        /* Adjust size here */
    width: auto;
    object-fit: contain;
}

@media (max-width: 768px) {
    .brand-logo {
        height: 32px;    /* Slightly smaller on mobile */
    }
}

.choice.disabled{
  opacity:.5;
  cursor:not-allowed;
}