*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:Arial,Helvetica,sans-serif;margin:0;background:#f5f7fb;color:#0a1f44;line-height:1.6}

a{color:#0047AB}

header{
position:sticky;
top:0;
z-index:1000;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 40px;
background:#fff;
border-bottom:1px solid #e5e5e5;
height:82px;
width:100%;
box-shadow:0 4px 14px rgba(0,0,0,.06);
}

.logo-link{height:100%;display:flex;align-items:stretch;flex:0 0 auto}
.logo-link img{height:100%;width:auto;display:block;object-fit:contain}

.back-link{
display:inline-flex;
align-items:center;
justify-content:center;
height:44px;
padding:0 18px;
border-radius:999px;
background:transparent;
color:#0047AB;
text-decoration:none;
font-weight:700;
line-height:1;
border:2px solid #0047AB;
white-space:nowrap;
}
.back-link:hover,.back-link:focus{background:#f2f6ff;outline:none}
.back-link-short{display:none}

.hero{
padding:56px 20px 48px;
text-align:center;
background:linear-gradient(135deg,#0A1F44,#0047AB);
color:#fff;
}
.hero h1{font-size:34px;margin:0 0 18px;line-height:1.25}
.hero p{max-width:720px;margin:0 auto;font-size:18px}

.section{padding:40px 20px;max-width:900px;margin:auto}
.section h2{color:#0047AB;font-size:26px;margin-top:0}
.section-alt{background:#fff}

#part-a,#part-b{scroll-margin-top:100px}

.jump-section{padding-top:8px;padding-bottom:8px}
.jump-row{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.jump-btn{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:48px;
padding:0 24px;
border-radius:999px;
text-decoration:none;
font-weight:700;
line-height:1.3;
text-align:center;
border:2px solid #0047AB;
}
.jump-btn-primary{background:#0047AB;color:#fff}
.jump-btn-primary:hover,.jump-btn-primary:focus{opacity:.9}
.jump-btn-secondary{background:transparent;color:#0047AB}
.jump-btn-secondary:hover,.jump-btn-secondary:focus{background:#f2f6ff}

.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:12px;font-weight:700;color:#0047AB;margin:0 0 10px}

/* Video slot */
.video-wrap{
position:relative;
width:100%;
max-width:900px;
aspect-ratio:16/9;
background:#0A1F44;
border-radius:14px;
margin:0 auto;
display:flex;
align-items:center;
justify-content:center;
color:#fff;
box-shadow:0 2px 10px rgba(0,0,0,.12);
text-align:center;
padding:20px;
}
.video-wrap p{margin:0;font-size:18px;font-weight:600}

/* Requirements list */
.req-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.req-list li{background:#fff;border-radius:10px;padding:16px 18px;box-shadow:0 2px 10px rgba(0,0,0,.08);display:flex;gap:12px;align-items:flex-start}
.req-list .req-icon{flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:#0047AB;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px}

.copy-box{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
flex-wrap:wrap;
background:#fff;
border:2px solid #0047AB;
border-radius:10px;
padding:14px 18px;
margin-top:16px;
}
.copy-box code{font-size:16px;font-weight:700;color:#0a1f44;word-break:break-all}
.copy-btn{
flex:0 0 auto;
background:#0047AB;
color:#fff;
border:none;
padding:10px 18px;
border-radius:6px;
font-weight:700;
cursor:pointer;
font-size:14px;
}
.copy-btn:hover,.copy-btn:focus{opacity:.9}
.copy-btn[data-copied="true"]{background:#1a7f37}

/* Step list */
.steps{counter-reset:step;list-style:none;margin:0;padding:0;display:grid;gap:24px}
.steps li{
background:#fff;
border-radius:12px;
padding:22px 22px 22px 64px;
box-shadow:0 2px 10px rgba(0,0,0,.08);
position:relative;
}
.steps li::before{
counter-increment:step;
content:counter(step);
position:absolute;
left:18px;
top:22px;
width:32px;
height:32px;
border-radius:50%;
background:#0047AB;
color:#fff;
font-weight:700;
display:flex;
align-items:center;
justify-content:center;
}
.steps h3{margin:0 0 8px;font-size:18px}
.steps p{margin:0}
.note{
background:#f8f9fa;
border-left:4px solid #0047AB;
padding:14px 18px;
margin-top:14px;
font-size:15px;
}

/* Screenshot figure */
figure.shot{margin:16px 0 0}
.shot-frame{
position:relative;
aspect-ratio:16/10;
width:100%;
max-width:520px;
border:2px dashed #cdd6e3;
border-radius:10px;
background:#f2f5fa;
overflow:hidden;
}
.shot-frame img{width:100%;height:100%;object-fit:cover;display:block}
.shot-fallback{
display:none;
position:absolute;
inset:0;
align-items:center;
justify-content:center;
color:#5b6b85;
font-weight:700;
font-size:15px;
text-align:center;
padding:12px;
}
figure.shot figcaption{font-size:14px;color:#5b6b85;margin-top:8px;max-width:520px}

/* FAQ */
.faq-item{background:#fff;border-radius:10px;padding:18px 20px;box-shadow:0 2px 10px rgba(0,0,0,.08);margin-bottom:14px}
.faq-item h3{margin:0 0 8px;font-size:17px}
.faq-item p{margin:0}

.next-panel{
background:linear-gradient(135deg,#0A1F44,#0047AB);
color:#fff;
padding:30px;
border-radius:14px;
text-align:center;
}
.next-panel h2{color:#fff;margin-top:0}
.next-panel p{max-width:720px;margin:0 auto}

footer{
background:#0A1F44;
color:#fff;
margin-top:20px;
}
.footer-inner{
max-width:1200px;
margin:0 auto;
padding:28px 24px;
display:grid;
grid-template-columns:1fr 1fr 1fr;
gap:24px;
}
.footer-col.center{text-align:center}
.footer-col.right{text-align:right}
.footer-link{color:#fff;text-decoration:none}
.footer-link:hover,.footer-link:focus{text-decoration:underline}

@media (max-width:640px){
  #part-a,#part-b{scroll-margin-top:80px}
  .jump-btn{padding:0 18px;font-size:15px;width:100%}
  .hero h1{font-size:26px}
  .hero p{font-size:16px}
  header{padding:0 14px;height:64px}
  .back-link{padding:0 14px;height:38px;font-size:14px}
  .back-link-full{display:none}
  .back-link-short{display:inline}
  .footer-inner{grid-template-columns:1fr;text-align:left}
  .footer-col.center,.footer-col.right{text-align:left}
  .steps li{padding:20px 18px 20px 58px}
  .steps li::before{left:14px;top:18px;width:28px;height:28px;font-size:14px}
}