:root{
  --bg:#0A0118; --card:#130428; --text:#F5F0FF; --muted:#B8A8D4;
  --primary:#A855F7; --primary-dark:#7C3AED; --gold:#FDB71A; 
  --accent:#C084FC; --border:rgba(168,85,247,0.15);
  --gold-shadow:0 0 20px rgba(253,183,26,0.4), 0 4px 12px rgba(168,85,247,0.3);
  --radius:16px; --shadow:0 10px 30px rgba(0,0,0,0.6);
  --ring:0 0 0 3px rgba(168,85,247,0.45);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow-x:hidden}
body{
  background:var(--bg); color:var(--text);
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.6; font-size:clamp(15px,4vw,18px);
}
body::before{
  content:""; position:fixed; inset:0; z-index:-3;
  background:
    radial-gradient(800px 600px at 10% 10%, rgba(168,85,247,0.25), transparent 60%),
    radial-gradient(900px 500px at 90% 80%, rgba(124,58,237,0.20), transparent 60%),
    linear-gradient(135deg, #0A0118 0%, #1E0B3D 50%, #0A0118 100%);
}
body::after{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    linear-gradient(90deg, transparent 0%, rgba(253,183,26,0.08) 50%, transparent 100%),
    linear-gradient(0deg, transparent 0%, rgba(253,183,26,0.08) 50%, transparent 100%);
  opacity:0.4;
}
#particles{position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.6}
h1{font-size:clamp(28px,7vw,50px);line-height:1.15;margin:0 0 .6em;background:linear-gradient(135deg,var(--primary),var(--gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
h2{font-size:clamp(22px,6vw,38px);line-height:1.2;margin:0 0 .6em}
.muted{color:var(--muted)}
.section{padding:clamp(40px,10vw,120px) 16px}
.container{max-width:1080px;margin:0 auto}
.grid-2{display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:720px){.grid-2{grid-template-columns:1fr 1fr}}
.card{
  background:linear-gradient(145deg, rgba(168,85,247,0.05), rgba(0,0,0,0.2)), var(--card);
  border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow),inset 0 1px 0 rgba(253,183,26,0.1);
  padding:clamp(18px,5vw,32px); position:relative; overflow:hidden;
}
.card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity:0.5;
}
.notice{
  margin-top:12px; padding:14px 16px; border-radius:12px;
  background:rgba(168,85,247,0.12);
  border:1px dashed rgba(253,183,26,0.3);
  color:var(--text);
}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 22px;border-radius:14px;border:1px solid var(--border);
  color:var(--text);text-decoration:none;cursor:pointer;
  transition:all .2s ease;
  background:rgba(168,85,247,0.08);
  font-weight:600;
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--gold-shadow)}
.btn:active{transform:translateY(0)}
.btn-primary{
  background:linear-gradient(135deg, var(--primary), var(--primary-dark));
  border:2px solid var(--gold);
  box-shadow:var(--gold-shadow);
  color:#FFF;
}
.btn-primary:hover{box-shadow:0 0 30px rgba(253,183,26,0.6), 0 6px 16px rgba(168,85,247,0.4)}
.btn-ghost{background:transparent;border:1px solid var(--border)}
.cta-row{display:flex;gap:14px;flex-wrap:wrap}
.form-grid{display:grid;grid-template-columns:1fr;gap:14px}
.form-grid .full{grid-column:1/-1}
@media(min-width:720px){.form-grid{grid-template-columns:1fr 1fr}}
label span{display:block;margin-bottom:8px;color:var(--muted);font-weight:600}
input,textarea{
  width:100%;padding:14px 16px;border-radius:12px;border:1px solid var(--border);
  background:rgba(168,85,247,0.05);color:var(--text);outline:none;
  transition:all .2s;
}
input:focus,textarea:focus{
  box-shadow:0 0 0 3px rgba(168,85,247,0.45);border-color:var(--gold);
  background:rgba(168,85,247,0.08);
}
.helper{display:flex;align-items:center;gap:12px;margin:12px 0}
.fallback{margin-top:12px}
/* ==== QR Section with Flowing RGB Border ==== */
.final-image {
  text-align: center;
  margin-top: 60px;
  padding: 60px 16px;
  background: linear-gradient(145deg, rgba(0,0,0,0.6), rgba(25,0,50,0.8));
  border-top: 1px solid rgba(255,255,255,0.1);
  position: relative;
  overflow: hidden;
}

.final-image h2 {
  font-size: clamp(22px, 5vw, 32px);
  color: #fff;
  margin-bottom: 25px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* Container maintains 1:1 shape */
.image-wrapper {
  position: relative;
  width: 280px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 22px;
  background: linear-gradient(
    90deg,
    red,
    orange,
    yellow,
    lime,
    cyan,
    blue,
    magenta,
    red
  );
  background-size: 400% 100%;
  animation: rgbFlow 5s linear infinite;
  padding: 5px; /* ring thickness */
  box-shadow: 0 0 25px rgba(255,255,255,0.2),
              0 0 45px rgba(0,255,255,0.2),
              0 0 65px rgba(255,0,255,0.3);
}

/* Actual QR Image inside the border */
.image-wrapper img {
  width: 100%;
  height: 100%;
  border-radius: 16px;
  object-fit: cover;
  display: block;
  background: #000;
}

/* RGB Animation */
@keyframes rgbFlow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 400% 50%;
  }
}