/* ====== Design tokens ====== */
:root{
  --brand-1:#185a9d;
  --brand-2:#43cea2;
  --overlay:rgba(0,48,32,.40);
  --bg:#ffffff;
  --text:#0f172a;
  --muted:#6b7280;

  --radius:18px;
  --shadow-lg:0 8px 32px rgba(24,90,157,.18);
  --shadow-md:0 4px 16px rgba(24,90,157,.12);
  --shadow-sm:0 2px 8px rgba(67,206,162,.10);

  --space:clamp(16px,2.5vw,24px);
  --pad:clamp(22px,3vw,32px);
  --font-lg:clamp(20px,2.8vw,28px);
  --font-md:clamp(15px,2.0vw,18px);
  --font-sm:clamp(12px,1.8vw,14px);

  /* Focal positions (tweak if something crops) */
  --desk-pos: 42% 50%;
  --mob-pos:  50% 35%;
}

/* ====== Base ====== */
*{ box-sizing:border-box; }
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text);
  font-family:'Segoe UI', Arial, sans-serif;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;

  /* Desktop: overlay + photo (paths are relative to THIS CSS file) */
  background:
    linear-gradient(var(--overlay), var(--overlay)),
    url('../photos/bkbanner.jpg?v=4');
  background-repeat: no-repeat, no-repeat;
  background-position: center, var(--desk-pos);
  background-size: auto, cover;      /* cover = no side gaps */
  background-attachment: scroll, scroll; /* fixed can glitch; keep scroll */
  background-color:#0b1720;
}

/* Mobile/tablets: swap image */
@media (max-width: 768px), (hover: none) and (pointer: coarse){
  body{
    background:
      linear-gradient(var(--overlay), var(--overlay)),
      url('../photos/bkmobilebanner.jpg?v=4');
    background-repeat: no-repeat, no-repeat;
    background-position: center, var(--mob-pos);
    background-size: auto, cover;
    background-attachment: scroll, scroll;
  }
}

/* ====== Card ====== */
.container{
  position:relative;
  z-index:1;
  background:color-mix(in srgb, var(--bg) 97%, transparent);
  backdrop-filter:saturate(120%) blur(6px);
  -webkit-backdrop-filter:saturate(120%) blur(6px);
  padding:calc(var(--pad) + 4px) var(--pad);
  border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
  text-align:center;
  width:min(92vw, 420px);
  max-width:100%;
  overflow:hidden;
  animation:float 3s ease-in-out infinite;
}

@media (min-width:1280px){ .container{ width:400px; } }

@keyframes float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-10px) } }
@media (prefers-reduced-motion:reduce){ .container{ animation:none } }

/* ====== Text ====== */
h2{
  margin:0 0 calc(var(--space) * .75);
  color:var(--brand-1);
  letter-spacing:.5px;
  font-weight:800;
  font-size:var(--font-lg);
}

/* ====== Form & Inputs ====== */
form{ width:100%; }

input{
  width:100%;
  max-width:100%;
  min-width:0;
  padding:12px 10px;
  margin:12px 0 6px 0;
  border:1.5px solid var(--brand-2);
  border-radius:10px;
  font-size:var(--font-md);
  transition:border-color .25s, box-shadow .25s, background-color .25s, transform .05s;
  outline:none;
  background:rgba(67,206,162,.07);
  box-shadow:var(--shadow-sm);
}
input:focus-visible{
  border-color:var(--brand-1);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--brand-2) 25%, transparent);
  background:#fff;
}
input:active{ transform:translateY(0.5px); }

.hint{
  display:block;
  font-size:var(--font-sm);
  color:var(--muted);
  margin-bottom:4px;
  margin-top:0;
  letter-spacing:.3px;
}
input:invalid{ border-color:#ef4444; background:#fff0f0; }
input:valid{ border-color:var(--brand-2); }

/* ====== Button ====== */
button{
  width:100%;
  padding:13px;
  background:linear-gradient(90deg, var(--brand-2) 0%, var(--brand-1) 100%);
  color:#fff;
  border:none;
  border-radius:10px;
  font-size:clamp(16px,2.2vw,18px);
  font-weight:700;
  cursor:pointer;
  margin-top:16px;
  box-shadow:var(--shadow-md);
  transition:transform .15s ease, box-shadow .2s ease, filter .2s ease;
  position:relative;
  overflow:hidden;
}
button:hover{ transform:translateY(-1px); box-shadow:0 10px 28px rgba(24,90,157,.22); }
button:active{ transform:translateY(0); }
button:focus-visible{
  outline:0;
  box-shadow:0 0 0 4px color-mix(in srgb, var(--brand-1) 25%, transparent), var(--shadow-md);
}
button::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.18) 25%, transparent 50%);
  transform:translateX(-120%);
  transition:transform .6s ease;
}
button:hover::after{ transform:translateX(120%); }

/* Small phones */
@media (max-width:640px){
  .container{
    width:min(94vw, 360px);
    padding:calc(var(--pad) - 2px) var(--pad);
  }
  input{ padding:11px 10px; font-size:clamp(13px, 4vw, 16px); }
  button{ padding:12px; font-size:clamp(15px, 4.2vw, 17px); }
}

/* Very narrow phones */
@media (max-width:380px){
  .container{ padding:20px; border-radius:14px; }
  h2{ letter-spacing:.3px; }
}