:root{
  --bg-image:url("https://betamina.com/static/26ba5b93-6fd9-4eb7-94af-2a079c5b161b/97cb6138b5a6015ee7119d4aafdee8c6.webp");

  --white:#ffffff;
  --text-main:#f8fafc;
  --text-soft:rgba(248,250,252,0.9);
  --text-muted:rgba(248,250,252,0.68);

  --electric-blue:#7dd3fc;
  --cyan:#22d3ee;
  --blue:#2563eb;
  --deep-blue:#07162f;

  --button-text:#031225;

  --glass-cool:rgba(220,245,255,0.13);
  --glass-edge:rgba(230,248,255,0.48);
  --shadow-deep:rgba(2,8,23,0.5);
}

*,
*::before,
*::after{
  box-sizing:border-box;
}

html{
  min-height:100%;
}

body{
  margin:0;
  min-height:100vh;
  font-family:Arial, Helvetica, sans-serif;
  color:var(--text-main);

  background:
    radial-gradient(circle at 50% 18%, rgba(34,211,238,0.18), transparent 34%),
    linear-gradient(rgba(2,8,23,0.18), rgba(2,8,23,0.58)),
    var(--bg-image);

  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

.hidden-svg{
  position:absolute;
  width:0;
  height:0;
  overflow:hidden;
}

.page{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  text-align:center;
}

.box{
  position:relative;
  isolation:isolate;
  overflow:hidden;

  width:100%;
  max-width:420px;
  padding:34px 26px 28px;
  border-radius:28px;

  background:rgba(220,245,255,0.08);
  border:1px solid var(--glass-edge);

  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);

  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,0.72),
    inset -1px -1px 0 rgba(125,211,252,0.22),
    0 24px 70px var(--shadow-deep),
    0 0 48px rgba(34,211,238,0.18);
}

.glass-filter{
  position:absolute;
  inset:-20px;
  z-index:-3;

  background:var(--glass-cool);

  backdrop-filter:blur(18px) saturate(170%);
  -webkit-backdrop-filter:blur(18px) saturate(170%);

  filter:url(#glass-distortion);
}

.glass-overlay{
  position:absolute;
  inset:0;
  z-index:-2;
  border-radius:inherit;

  background:
    linear-gradient(
      135deg,
      rgba(240,249,255,0.32),
      rgba(125,211,252,0.12) 34%,
      rgba(37,99,235,0.08) 66%,
      rgba(230,248,255,0.12)
    );
}

.glass-specular{
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:inherit;
  pointer-events:none;

  background:
    radial-gradient(
      circle at 16% 8%,
      rgba(255,255,255,0.56),
      rgba(186,230,253,0.18) 18%,
      transparent 34%
    ),
    radial-gradient(
      circle at 86% 92%,
      rgba(34,211,238,0.24),
      transparent 32%
    ),
    linear-gradient(
      180deg,
      rgba(255,255,255,0.08),
      transparent 45%,
      rgba(37,99,235,0.08)
    );

  box-shadow:
    inset 1px 1px 2px rgba(255,255,255,0.86),
    inset -2px -2px 8px rgba(186,230,253,0.24),
    inset 8px 8px 26px rgba(255,255,255,0.08),
    inset -8px -8px 30px rgba(34,211,238,0.12);
}

.content{
  position:relative;
  z-index:2;
}

.brand-logo{
  display:block;
  width:180px;
  height:auto;
  max-height:90px;
  object-fit:contain;
  margin:0 auto 22px;

  filter:
    drop-shadow(0 12px 26px rgba(2,8,23,0.48))
    drop-shadow(0 0 18px rgba(125,211,252,0.26));
}

h1{
  margin:0 0 12px;
  font-size:clamp(28px, 7vw, 34px);
  line-height:1.12;
  color:var(--white);

  text-shadow:
    0 2px 12px rgba(2,8,23,0.68),
    0 0 18px rgba(125,211,252,0.26);
}

p{
  max-width:340px;
  margin:0 auto 24px;
  line-height:1.6;
  color:var(--text-soft);
  font-size:16px;

  text-shadow:0 1px 8px rgba(2,8,23,0.46);
}

.btn{
  position:relative;
  isolation:isolate;
  overflow:hidden;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  min-width:202px;
  padding:16px 34px;
  border:0;
  border-radius:999px;

  background:
    linear-gradient(
      180deg,
      var(--electric-blue) 0%,
      var(--cyan) 52%,
      var(--blue) 100%
    );

  color:var(--button-text);
  font-size:16px;
  font-weight:900;
  letter-spacing:0.7px;
  text-transform:uppercase;
  text-decoration:none;

  cursor:pointer;
  -webkit-tap-highlight-color:transparent;

  box-shadow:
    0 0 0 3px rgba(186,230,253,0.25),
    0 0 24px rgba(34,211,238,0.52),
    0 14px 32px rgba(2,8,23,0.42),
    inset 0 1px 0 rgba(255,255,255,0.78),
    inset 0 -2px 0 rgba(7,22,47,0.28);

  animation:buttonPulse 2.2s ease-in-out infinite;

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease;
}

.btn::before{
  content:"";
  position:absolute;
  inset:-9px;
  z-index:-1;
  border-radius:inherit;

  background:
    radial-gradient(
      circle,
      rgba(125,211,252,0.74),
      rgba(34,211,238,0.44) 38%,
      transparent 72%
    );

  opacity:0.66;
  animation:buttonGlow 2.2s ease-in-out infinite;
}

.btn::after{
  content:"";
  position:absolute;
  top:0;
  left:-85%;
  width:55%;
  height:100%;
  z-index:1;

  background:
    linear-gradient(
      120deg,
      transparent,
      rgba(255,255,255,0.82),
      transparent
    );

  transform:skewX(-22deg);
  animation:buttonShine 3s infinite;
  pointer-events:none;
}

.btn span{
  position:relative;
  z-index:2;
}

.btn:hover{
  transform:translateY(-2px) scale(1.04);
  filter:brightness(1.08);

  box-shadow:
    0 0 0 3px rgba(186,230,253,0.36),
    0 0 36px rgba(125,211,252,0.76),
    0 18px 38px rgba(2,8,23,0.48),
    inset 0 1px 0 rgba(255,255,255,0.86),
    inset 0 -2px 0 rgba(7,22,47,0.32);
}

.btn:active{
  transform:translateY(0) scale(0.99);
}

.btn:focus-visible{
  outline:3px solid rgba(255,255,255,0.9);
  outline-offset:4px;
}

.arrow{
  display:inline-block;
  transition:transform 0.2s ease;
}

.btn:hover .arrow{
  transform:translateX(5px);
}

.note{
  margin-top:16px;
  font-size:13px;
  color:var(--text-muted);
  text-shadow:0 1px 7px rgba(2,8,23,0.46);
}

@keyframes buttonGlow{
  0%,
  100%{
    opacity:0.42;
    transform:scale(0.94);
  }

  50%{
    opacity:0.98;
    transform:scale(1.08);
  }
}

@keyframes buttonPulse{
  0%,
  100%{
    scale:1;
  }

  50%{
    scale:1.035;
  }
}

@keyframes buttonShine{
  0%{
    left:-85%;
  }

  55%{
    left:130%;
  }

  100%{
    left:130%;
  }
}

@media (max-width:420px){
  .box{
    padding:30px 22px 26px;
    border-radius:24px;
  }

  .brand-logo{
    width:165px;
    max-height:82px;
  }

  .btn{
    width:100%;
    max-width:260px;
    padding:16px 24px;
  }
}

@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
    transition-duration:0.001ms !important;
  }
}