:root {
  --red:#c51f2c;
  --red-dark:#8c1220;
  --red-soft:#fff0f2;
  --blue:#175a9b;
  --blue-dark:#0b315c;
  --blue-soft:#e8f2fc;
  --yellow:#f6c744;
  --ink:#17212b;
  --muted:#667382;
  --line:#dce4ec;
  --paper:#fff;
  --page:#edf3f9;
  --shadow:0 18px 50px rgba(16,55,94,.12);
}

* { box-sizing:border-box; }
html { min-height:100%; background:var(--page); scroll-behavior:smooth; }
body { min-width:280px; min-height:100%; margin:0; background:linear-gradient(180deg,#f8fbfe 0,#edf3f9 100%); color:var(--ink); font-family:Inter,"Segoe UI",Arial,sans-serif; }
a { color:inherit; text-decoration:none; }
button,a { -webkit-tap-highlight-color:transparent; }

.site-header { position:relative; overflow:hidden; display:grid; grid-template-columns:minmax(220px,360px) 1fr; align-items:center; gap:clamp(20px,5vw,72px); padding:max(24px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) 28px max(20px,env(safe-area-inset-left)); background:linear-gradient(125deg,var(--blue-dark),var(--blue) 66%,#1d70bb); color:#fff; box-shadow:0 12px 35px rgba(11,49,92,.2); }
.site-header::after { content:""; position:absolute; right:-100px; top:-190px; width:430px; height:430px; border:70px solid rgba(255,255,255,.06); border-radius:50%; pointer-events:none; }
.brand { position:relative; z-index:1; display:flex; align-items:center; gap:14px; width:max-content; color:#fff; }
.brand-sign { width:66px; height:66px; display:grid; place-items:center; flex:0 0 auto; border:5px solid #fff; border-radius:50%; background:var(--red); box-shadow:0 0 0 5px rgba(255,255,255,.14); font:900 35px/1 Georgia,serif; }
.brand span:last-child { display:grid; line-height:1; }
.brand small { font-size:11px; font-weight:900; letter-spacing:.2em; }
.brand strong { margin-top:5px; font:800 31px/1 Georgia,serif; letter-spacing:.02em; }
.header-copy { position:relative; z-index:1; }
.header-copy p,.form-heading p { margin:0 0 8px; color:var(--yellow); font-size:11px; font-weight:950; letter-spacing:.15em; }
.header-copy h1 { margin:0; font:750 clamp(34px,5vw,58px)/1 Georgia,serif; }
.header-copy span { display:block; max-width:640px; margin-top:11px; color:#dbeafe; font-size:clamp(14px,1.8vw,18px); line-height:1.5; }

main { width:100%; padding:clamp(14px,2.2vw,28px); }
.course-list { width:100%; display:grid; gap:10px; }
.course-list > a { width:100%; min-height:76px; display:grid; grid-template-columns:minmax(205px,32%) 1fr 34px; align-items:center; gap:20px; padding:16px clamp(18px,3vw,34px); border:1px solid #d7e1ea; border-left:8px solid var(--blue); border-radius:16px; background:rgba(255,255,255,.96); box-shadow:0 8px 22px rgba(16,55,94,.07); transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; }
.course-list > a:nth-child(4n+2),.course-list > a:nth-child(4n+3) { border-left-color:var(--red); }
.course-list b { color:var(--blue-dark); font-size:clamp(16px,2vw,22px); letter-spacing:.01em; }
.course-list span { color:var(--muted); font-size:clamp(13px,1.5vw,16px); }
.course-list i { width:32px; height:32px; display:grid; place-items:center; border-radius:50%; background:var(--blue-soft); color:var(--blue); font-size:25px; font-style:normal; font-weight:900; transition:.18s ease; }
.course-list > a:hover,.course-list > a:focus-visible { transform:translateY(-2px); border-color:#9fc0df; box-shadow:0 13px 28px rgba(16,55,94,.13); outline:none; }
.course-list > a:hover i,.course-list > a:focus-visible i { background:var(--red); color:#fff; transform:translateX(3px); }
.course-list > a:active { transform:scale(.995); }

footer { display:flex; justify-content:space-between; gap:18px; padding:20px max(22px,env(safe-area-inset-right)) max(26px,env(safe-area-inset-bottom)) max(22px,env(safe-area-inset-left)); border-top:1px solid var(--line); color:var(--muted); font-size:12px; }
footer strong { color:var(--blue-dark); }

.compact-header { display:flex; align-items:center; gap:16px; min-height:86px; padding:max(14px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) 14px max(18px,env(safe-area-inset-left)); background:linear-gradient(125deg,var(--blue-dark),var(--blue)); }
.back-link { width:48px; height:48px; display:grid; place-items:center; flex:0 0 auto; border:1px solid rgba(255,255,255,.3); border-radius:14px; color:#fff; font-size:25px; font-weight:900; }
.brand.compact { gap:10px; }
.brand.compact .brand-sign { width:43px; height:43px; border-width:3px; font-size:23px; }
.brand.compact small { font-size:8px; }
.brand.compact strong { font-size:21px; }
.form-shell { width:min(980px,100%); margin:0 auto; padding:clamp(18px,4vw,42px); }
.form-heading { padding:4px 0 22px; }
.form-heading p { color:var(--red); }
.form-heading h1 { margin:0; color:var(--blue-dark); font:750 clamp(33px,5vw,52px)/1.05 Georgia,serif; }
.form-heading > span { display:block; margin-top:8px; color:var(--muted); }
.form-placeholder { display:grid; justify-items:center; padding:clamp(28px,6vw,62px); border:1px solid var(--line); border-radius:24px; background:var(--paper); box-shadow:var(--shadow); text-align:center; }
.document-icon { width:72px; height:72px; display:grid; place-items:center; border-radius:22px; background:var(--blue-soft); color:var(--blue); font-size:38px; }
.form-placeholder h2 { margin:20px 0 8px; color:var(--blue-dark); font:750 clamp(24px,4vw,34px)/1.1 Georgia,serif; }
.form-placeholder > p { max-width:650px; margin:0; color:var(--muted); line-height:1.6; }
.ready-list { width:min(560px,100%); display:grid; gap:8px; margin:24px 0; text-align:left; }
.ready-list span { padding:11px 14px; border-radius:11px; background:#f4f8fb; color:#39536c; font-size:13px; font-weight:700; }
.primary-action { min-height:50px; display:inline-grid; place-items:center; padding:0 24px; border-radius:13px; background:linear-gradient(135deg,var(--red),var(--red-dark)); color:#fff; font-weight:900; box-shadow:0 10px 24px rgba(197,31,44,.2); }
.signature-box { width:100%; display:grid; gap:9px; padding:14px; border:1px solid var(--line); border-radius:16px; background:#f8fafc; }
.signature-box canvas { width:100%; height:210px; display:block; border:2px dashed #9eb1c4; border-radius:12px; background:#fff; touch-action:none; cursor:crosshair; }
.signature-box button { justify-self:end; min-height:40px; padding:0 15px; border:1px solid #c9d5e0; border-radius:10px; background:#fff; color:var(--blue-dark); font-weight:850; }

@media(max-width:720px) {
  .site-header { grid-template-columns:1fr; gap:22px; padding-bottom:24px; }
  .brand-sign { width:54px; height:54px; border-width:4px; font-size:29px; }
  .brand strong { font-size:26px; }
  .header-copy h1 { font-size:38px; }
  main { padding:12px; }
  .course-list { gap:8px; }
  .course-list > a { min-height:70px; grid-template-columns:1fr 30px; gap:4px 12px; padding:13px 14px; border-left-width:6px; border-radius:13px; }
  .course-list b { grid-column:1; font-size:17px; }
  .course-list span { grid-column:1; font-size:12px; }
  .course-list i { grid-column:2; grid-row:1/3; width:29px; height:29px; }
  footer { align-items:flex-start; flex-direction:column; }
}

@media(max-height:520px) and (orientation:landscape) {
  .site-header { grid-template-columns:260px 1fr; gap:24px; padding-block:13px; }
  .brand-sign { width:48px; height:48px; border-width:3px; font-size:25px; }
  .brand strong { font-size:23px; }
  .header-copy p { margin-bottom:4px; }
  .header-copy h1 { font-size:31px; }
  .header-copy span { margin-top:5px; font-size:13px; }
  main { padding-block:12px; }
  .course-list > a { min-height:60px; padding-block:10px; }
}

@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .course-list > a,.course-list i { transition:none; }
}