:root{
  --navy:#122536; --navy2:#19384e; --orange:#f47a20; --orange2:#ff9140;
  --ink:#173047; --muted:#687b8d; --line:#e3eaf0; --paper:#fff;
  --soft:#f5f8fb; --green:#2aa66a;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  min-height:100vh;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);background:
  radial-gradient(circle at 10% 10%,rgba(244,122,32,.10),transparent 25%),
  radial-gradient(circle at 90% 85%,rgba(25,56,78,.08),transparent 30%),var(--soft);
}
.page{min-height:100vh;display:flex;flex-direction:column}
header{
  width:min(1120px,calc(100% - 40px));margin:0 auto;padding:30px 0 18px;
  display:flex;align-items:center;justify-content:space-between;gap:24px
}
.logo{height:52px;width:auto;max-width:240px;object-fit:contain}
.badge{display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border:1px solid #d9e9df;
  border-radius:999px;background:#f2fbf6;color:#277c52;font-size:13px;font-weight:700}
.badge i{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(42,166,106,.10)}
main{flex:1;display:grid;place-items:center;padding:22px 20px 54px}
.card{
  width:min(1120px,100%);display:grid;grid-template-columns:minmax(0,1.3fr) minmax(280px,.7fr);
  overflow:hidden;background:var(--paper);border:1px solid var(--line);border-radius:28px;
  box-shadow:0 28px 80px rgba(18,37,54,.12)
}
.content{padding:64px}
.kicker{color:var(--orange);font-weight:800;font-size:13px;letter-spacing:.09em;text-transform:uppercase;margin-bottom:18px}
h1{margin:0 0 20px;font-size:clamp(40px,6vw,68px);line-height:1.03;letter-spacing:-.045em;color:var(--navy)}
h1 .accent{color:var(--orange)}
.lead{max-width:680px;margin:0;color:var(--muted);font-size:18px;line-height:1.7}
.domainbox{margin-top:26px;padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:#f9fbfd;color:var(--muted);font-size:14px}
.domainbox strong{color:var(--navy);overflow-wrap:anywhere}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.btn{min-height:50px;padding:0 21px;display:inline-flex;align-items:center;justify-content:center;border-radius:11px;
  text-decoration:none;font-size:15px;font-weight:750;transition:.15s ease}
.btn:hover{transform:translateY(-1px)}
.primary{background:var(--orange);color:#fff;box-shadow:0 12px 28px rgba(244,122,32,.22)}
.primary:hover{background:var(--orange2)}
.secondary{background:#fff;color:var(--navy);border:1px solid var(--line)}
.secondary:hover{background:#f8fafc}
.side{position:relative;padding:48px 38px;background:linear-gradient(145deg,var(--navy),var(--navy2));color:#fff;display:flex;flex-direction:column;justify-content:flex-end}
.side:before,.side:after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.08)}
.side:before{width:280px;height:280px;right:-120px;top:-100px}
.side:after{width:180px;height:180px;right:-50px;top:-30px}
.code{font-size:88px;line-height:.9;font-weight:850;letter-spacing:-.06em;color:#fff;margin-bottom:20px}
.side h2{margin:0 0 12px;font-size:23px}
.side p{margin:0;color:#c6d4df;line-height:1.6;font-size:14px}
footer{width:min(1120px,calc(100% - 40px));margin:0 auto;padding:0 0 28px;display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;color:#8392a0;font-size:13px}
footer a{color:#697d8e;text-decoration:none} footer a:hover{color:var(--orange)}
@media(max-width:800px){.card{grid-template-columns:1fr}.content{padding:40px 28px}.side{min-height:220px;padding:32px 28px}.code{font-size:64px}header{align-items:flex-start;flex-direction:column}.badge{align-self:flex-start}}
@media(max-width:520px){header{width:calc(100% - 30px)}main{padding:10px 15px 36px}.actions{flex-direction:column}.btn{width:100%}footer{width:calc(100% - 30px)}}