/****************************
  Kyron Colasimone Landing
*****************************/

:root {
  --bg-start: #0f172a;      /* slate-900 */
  --bg-end:   #1e293b;      /* slate-800 */
  --card:     rgba(30,41,59,.8); /* glassy */
  --border:   rgba(148,163,184,.15);
  --text:     #f1f5f9;      /* slate-100 */
  --subtext:  #94a3b8;      /* slate-400 */
  --accent1:  #2563eb;      /* blue-600 */
  --accent2:  #06b6d4;      /* cyan-500 */
  --dot-left: #d97706;      /* amber-600 */
  --dot-right:#dc2626;      /* red-600 */
}

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

body{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Inter',sans-serif;
  background:radial-gradient(circle at 50% 50%,var(--bg-end) 0%,var(--bg-start) 100%);
  color:var(--text);
  padding:1rem;
}

/* Card */
.card{
  position:relative;
  width:100%;
  max-width:460px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:1.25rem;
  padding:3.5rem 2.5rem 2.75rem;
  backdrop-filter:blur(14px);
  box-shadow:0 25px 45px -10px rgba(0,0,0,.55);
  text-align:center;
}

/* decorative dots */
.card::before,.card::after{
  content:\"\";position:absolute;top:.65rem;width:.8rem;height:.8rem;border-radius:50%;
}
.card::before{left:.65rem;background:var(--dot-left);}
.card::after{right:.65rem;background:var(--dot-right);}

/* icon */
.icon-box{
  width:72px;height:72px;margin:0 auto 2rem;
  display:flex;align-items:center;justify-content:center;
  background:rgba(100,116,139,.12);border-radius:1rem;
}
.icon-box svg{width:40px;height:40px;stroke:var(--text);stroke-width:1.5;}

/* text */
h1{font-size:2.2rem;font-weight:700;margin-bottom:1.25rem;}
p.desc{font-size:1.05rem;line-height:1.6;color:var(--subtext);margin-bottom:2.5rem;}

/* form */
form{display:flex;flex-direction:column;gap:1rem;}
.field{position:relative;display:flex;align-items:center;}
input[type=email]{
  flex:1;width:100%;background:#0f172a;border:2px solid transparent;
  border-radius:.75rem;padding:1rem 3rem 1rem 1.15rem;font-size:1rem;color:var(--text);
  transition:border .25s,box-shadow .25s;
}
input[type=email]::placeholder{color:#64748b;}
input[type=email]:focus{outline:none;border-color:var(--accent1);box-shadow:0 0 0 3px rgba(37,99,235,.35);}

/* small envelope icon */
.field svg{position:absolute;right:1.1rem;width:22px;height:22px;stroke:#64748b;pointer-events:none;}

/* button */
button{
  cursor:pointer;border:none;border-radius:.75rem;padding:1rem 1.25rem;
  font-size:1rem;font-weight:600;line-height:1;color:#fff;
  background:linear-gradient(90deg,var(--accent1) 0%,var(--accent2) 100%);
  transition:filter .25s,transform .25s;
  display:flex;align-items:center;justify-content:center;gap:.55rem;
}
button svg{width:20px;height:20px;stroke:#fff;}
button:hover{filter:brightness(1.12);}
button:active{transform:scale(.97);}

/* footer text */
.small{margin-top:2.25rem;font-size:.78rem;color:var(--subtext);line-height:1.4;}

/* mobile tweaks */
@media(max-width:480px){
  .card{padding:2.75rem 1.5rem 2.25rem;}
  h1{font-size:1.8rem;}
}