:root{
  --blue:#1e448b; --blue-d:#132d5e; --blue-dd:#0b1d40;
  --orange:#ff6600; --orange-d:#e05500;
  --ink:#16213a; --muted:#5d6880; --line:#d9dfea; --bg:#eef2f8; --card:#fff;
  --ok:#128a4a; --err:#c62828;
  --r:14px;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-size:16px;line-height:1.45}
[hidden]{display:none!important}

/* ---------- banner ---------- */
.banner{position:relative;background:var(--blue-dd);color:#fff;overflow:hidden}
.banner-img{display:block;width:100%;height:auto;max-height:420px;object-fit:cover}
.banner-inner{
  position:relative;max-width:640px;margin:0 auto;padding:22px 20px 34px;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(255,102,0,.28) 0, transparent 55%),
    radial-gradient(90% 80% at 0% 100%, rgba(30,68,139,.9) 0, transparent 70%);
}
.banner.css::before{content:"";position:absolute;inset:0;
  background:linear-gradient(160deg,var(--blue) 0%,var(--blue-d) 45%,var(--blue-dd) 100%)}
.banner.css::after{content:"";position:absolute;inset:0;opacity:.07;
  background-image:repeating-linear-gradient(90deg,#fff 0 1px,transparent 1px 28px),repeating-linear-gradient(0deg,#fff 0 1px,transparent 1px 28px)}
.banner-inner>*{position:relative;z-index:1}
.brand{display:flex;align-items:baseline;gap:10px;margin-bottom:18px}
.logo{height:40px;width:auto;background:#fff;padding:4px 8px;border-radius:8px}
.wordmark{font-weight:900;font-size:28px;letter-spacing:.04em;line-height:1;
  background:#fff;color:var(--blue);padding:4px 9px 3px;border-radius:6px}
.wordmark-sub{font-size:13px;font-weight:600;opacity:.85;letter-spacing:.02em}
.eyebrow{margin:0;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:#ffb37d}
.banner h1{margin:4px 0 6px;font-size:clamp(44px,13vw,68px);line-height:.95;font-weight:900;letter-spacing:-.02em;
  text-transform:uppercase}
.headline{margin:0;font-size:18px;font-weight:500;max-width:22em}
.headline strong{display:inline-block;color:#fff;background:var(--orange);padding:0 8px;border-radius:6px;font-weight:900;font-size:1.25em;
  transform:rotate(-1.5deg);margin-left:2px}
.sub{margin:10px 0 0;font-size:14px;opacity:.8}
.banner-stripe{position:relative;z-index:1;height:10px;
  background:repeating-linear-gradient(-45deg,var(--orange) 0 14px,#111a2e 14px 28px)}

/* ---------- layout ---------- */
.wrap{max-width:640px;margin:0 auto;padding:16px 14px 40px}
.card{background:var(--card);border-radius:var(--r);box-shadow:0 1px 2px rgba(16,30,60,.06),0 6px 20px rgba(16,30,60,.06);
  padding:18px;margin-bottom:14px}
.center{text-align:center}
h2{margin:0 0 6px;font-size:22px}

/* ---------- prizes / terms (details) ---------- */
details.card{padding:0}
details summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;
  padding:15px 18px;font-weight:700;color:var(--blue)}
details summary::-webkit-details-marker{display:none}
.chev{width:10px;height:10px;border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:rotate(45deg);transition:transform .2s;margin-top:-4px}
details[open] .chev{transform:rotate(-135deg);margin-top:4px}
.prize-list{list-style:none;margin:0;padding:0 18px;display:grid;gap:6px}
.prize-list li{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:10px;background:#f5f7fb;font-weight:600}
.prize-list li:first-child{background:linear-gradient(90deg,#fff1e6,#fff);border:1px solid #ffd2b3}
.rank{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--blue);color:#fff;font-size:14px;font-weight:800}
.prize-list li:first-child .rank{background:var(--orange)}
.fine{font-size:12.5px;color:var(--muted);margin:10px 18px 16px}
.codecard .fine{margin:14px 0 6px}
.tc{margin:0;padding:0 18px 16px 38px;font-size:14px;color:#333c52}
.tc li{margin-bottom:7px}

/* ---------- steps ---------- */
.steps{list-style:none;counter-reset:s;margin:0 0 18px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.steps li{counter-increment:s;font-size:12.5px;line-height:1.3;color:var(--muted);text-align:center}
.steps li::before{content:counter(s);display:grid;place-items:center;width:28px;height:28px;margin:0 auto 6px;border-radius:50%;
  background:#e7edf8;color:var(--blue);font-weight:800;font-size:14px}
.steps b{color:var(--ink)}

/* ---------- form ---------- */
.field{margin-bottom:14px}
label{display:block;font-weight:650;font-size:14.5px;margin-bottom:6px}
label i{color:var(--orange);font-style:normal}
.opt{font-weight:400;color:var(--muted);font-size:12.5px;margin-left:4px}
input[type=text],input[type=tel],input[type=email],select{
  width:100%;font:inherit;font-size:16px;color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:10px;
  padding:12px 13px;min-height:48px;outline:none;transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none}
select{background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 19px) 21px,calc(100% - 14px) 21px;background-size:5px 5px;background-repeat:no-repeat;padding-right:36px}
input:focus,select:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(30,68,139,.15)}
.field.bad input{border-color:var(--err)}
.prefix{display:flex;align-items:stretch}
.prefix span{display:grid;place-items:center;padding:0 12px;background:#f1f4f9;border:1.5px solid var(--line);border-right:0;border-radius:10px 0 0 10px;color:var(--muted);font-weight:600}
.prefix input{border-radius:0 10px 10px 0}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hint{display:block;color:var(--muted);font-size:12.5px;margin-top:6px}
.err{display:block;color:var(--err);font-size:13px;font-weight:600;min-height:0}
.err:empty{display:none}
.field .err{margin-top:5px}
.trap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.check{display:flex;gap:10px;align-items:flex-start;font-weight:500;font-size:14px;margin:6px 0 8px;cursor:pointer}
.check input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--blue);flex:none}
.check a{color:var(--blue)}
.form-error{background:#fdecec;color:var(--err);border-radius:10px;padding:10px 12px;font-size:14px;font-weight:600}

/* autocomplete */
.ac{position:relative}
.ac-list{position:absolute;z-index:20;left:0;right:0;top:calc(100% + 4px);margin:0;padding:6px;list-style:none;background:#fff;border:1.5px solid var(--line);
  border-radius:12px;box-shadow:0 12px 30px rgba(16,30,60,.16)}
.ac-list li{padding:11px 12px;border-radius:8px;cursor:pointer;font-weight:600}
.ac-list li small{display:block;font-weight:400;color:var(--muted);font-size:12px}
.ac-list li[aria-selected=true],.ac-list li:hover{background:#eef3fc;color:var(--blue)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-weight:750;font-size:16px;
  min-height:50px;padding:12px 18px;border-radius:12px;border:1.5px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;text-decoration:none}
.btn.primary{width:100%;background:var(--orange);border-color:var(--orange);color:#fff;font-size:17px;margin-top:6px;
  box-shadow:0 6px 16px rgba(255,102,0,.3)}
.btn.primary:active{background:var(--orange-d)}
.btn[disabled]{opacity:.6;pointer-events:none}
.btn.wa{background:#1fa855;border-color:#1fa855;color:#fff}
.link{display:block;margin:14px auto 0;background:none;border:0;color:var(--blue);font:inherit;font-weight:650;font-size:14.5px;text-decoration:underline;cursor:pointer;padding:6px}
.lookup{margin-top:10px;padding-top:14px;border-top:1px dashed var(--line)}
.lk-row{display:flex;gap:8px}
.lk-row .prefix{flex:1}

/* ---------- code card ---------- */
.codecard{text-align:center;padding:26px 18px 18px;border-top:6px solid var(--orange)}
.cc-label{margin:0;font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.cc-code{font-family:ui-monospace,"SF Mono","Roboto Mono",Menlo,Consolas,monospace;font-weight:900;font-size:clamp(64px,22vw,96px);
  letter-spacing:.12em;line-height:1;color:var(--blue);margin:10px 0 8px;padding-left:.12em}
.cc-company{margin:0;font-size:19px;font-weight:800}
.cc-name{margin:2px 0 0;color:var(--muted)}
.cc-note{margin:14px 0 0;background:#eef3fc;color:var(--blue);border-radius:10px;padding:10px 12px;font-size:14px;font-weight:600}
.cc-step{display:flex;gap:12px;align-items:center;text-align:left;margin:18px 0 16px;padding:14px;border-radius:12px;background:#fff4ec;border:1.5px dashed #ffb37d}
.cc-step p{margin:0;font-size:15px}
.pen{flex:none;width:38px;height:38px;border-radius:50%;background:var(--orange);color:#fff;display:grid;place-items:center;font-size:20px}
.cc-actions{display:grid;gap:10px}
.cc-actions .btn.primary{margin:0}
.pop{animation:pop .55s cubic-bezier(.2,1.4,.4,1)}
@keyframes pop{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}

.foot{text-align:center;font-size:13px;color:var(--muted);margin-top:24px}

@media (max-width:360px){ .row2{grid-template-columns:1fr} .banner h1{font-size:40px} }
@media (prefers-reduced-motion:reduce){ .pop{animation:none} .chev{transition:none} }