:root {
  --blue: #024ad8;
  --blue-deep: #0e3191;
  --blue-bright: #296ef9;
  --ink: #1a1a1a;
  --charcoal: #3d3d3d;
  --graphite: #636363;
  --canvas: #ffffff;
  --cloud: #f7f7f7;
  --fog: #e8e8e8;
  --steel: #c2c2c2;
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:'Inter',Arial,sans-serif;font-size:16px;line-height:1.38;color:var(--ink);background:var(--canvas);}
a{color:var(--blue);text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%;height:auto;display:block;}

.site-header{background:var(--canvas);border-bottom:1px solid var(--fog);position:sticky;top:0;z-index:100;}
.header-inner{max-width:1366px;margin:0 auto;padding:0 32px;height:64px;display:flex;align-items:center;justify-content:space-between;}
.site-logo{font-size:20px;font-weight:700;color:var(--ink);letter-spacing:-0.5px;}
.site-logo span{color:var(--blue);}
.nav-links{display:flex;gap:8px;list-style:none;margin:0;padding:0;}
.nav-links a{font-size:15px;font-weight:500;color:var(--ink);padding:8px 12px;border-radius:4px;}
.nav-links a:hover,.nav-links a.active{color:var(--blue);text-decoration:none;}
.nav-links a.active{border-bottom:2px solid var(--blue);}
.hamburger{display:none;background:none;border:none;cursor:pointer;padding:8px;}
.hamburger span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0;}

.layout-wrapper{max-width:1366px;margin:0 auto;padding:40px 32px;display:grid;grid-template-columns:260px 1fr;gap:40px;}
.sidebar{position:sticky;top:80px;align-self:start;}
.sidebar-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--graphite);margin:0 0 16px;}
.sidebar-nav{list-style:none;margin:0;padding:0;}
.sidebar-nav li{margin-bottom:2px;}
.sidebar-nav a{display:block;padding:10px 14px;border-radius:8px;font-size:14px;font-weight:500;color:var(--charcoal);}
.sidebar-nav a:hover,.sidebar-nav a.active{background:var(--cloud);color:var(--blue);text-decoration:none;}
.sidebar-nav a.active{border-left:3px solid var(--blue);padding-left:11px;}
.sidebar-section{margin-top:28px;padding-top:20px;border-top:1px solid var(--fog);}
.sidebar-section-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--steel);margin:0 0 10px;}

.main-content{min-width:0;}

.breadcrumb{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--graphite);margin-bottom:28px;flex-wrap:wrap;}
.breadcrumb a{color:var(--graphite);}
.breadcrumb a:hover{color:var(--blue);}
.breadcrumb .sep{color:var(--steel);}

.page-hero{background:var(--cloud);border-radius:16px;padding:48px;margin-bottom:40px;position:relative;overflow:hidden;}
.page-hero-badge{display:inline-block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--blue);background:rgba(2,74,216,0.08);padding:4px 12px;border-radius:8px;margin-bottom:16px;}
.page-hero h1{font-size:44px;font-weight:500;line-height:1.0;color:var(--ink);margin:0 0 16px;}
.page-hero p{font-size:18px;font-weight:400;line-height:1.33;color:var(--charcoal);margin:0;max-width:600px;}
.hero-image{margin-top:32px;border-radius:12px;overflow:hidden;}
.hero-image img{width:100%;height:280px;object-fit:cover;}

.toc-box{background:var(--cloud);border-radius:12px;padding:24px;margin-bottom:36px;}
.toc-box h2{font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--graphite);margin:0 0 14px;}
.toc-list{list-style:none;margin:0;padding:0;}
.toc-list li{margin-bottom:6px;}
.toc-list a{font-size:14px;font-weight:500;color:var(--blue);}

.step-card{background:var(--canvas);border-radius:16px;border:1px solid var(--fog);box-shadow:0 2px 8px rgba(26,26,26,0.08);padding:32px;margin-bottom:24px;scroll-margin-top:90px;}
.step-header{display:flex;align-items:flex-start;gap:16px;margin-bottom:20px;}
.step-number{min-width:48px;height:48px;background:var(--blue);color:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;}
.step-title{font-size:24px;font-weight:500;line-height:1.17;color:var(--ink);margin:0;}
.step-subtitle{font-size:14px;color:var(--graphite);margin:4px 0 0;}
.step-body p{font-size:16px;line-height:1.5;color:var(--charcoal);}
.step-expand-btn{background:none;border:none;font-size:14px;font-weight:600;color:var(--blue);cursor:pointer;padding:0;display:flex;align-items:center;gap:6px;}
.step-expand-btn .chevron{display:inline-block;transition:transform 0.2s;}
.step-expand-btn.open .chevron{transform:rotate(180deg);}
.step-detail{overflow:hidden;transition:max-height 0.3s ease;}
.step-detail.hidden{max-height:0;}
.step-detail.visible{max-height:2000px;}

.checklist{list-style:none;margin:16px 0 0;padding:0;}
.checklist li{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-bottom:1px solid var(--fog);font-size:14px;color:var(--charcoal);}
.checklist li:last-child{border-bottom:none;}
.check-icon{width:20px;height:20px;min-width:20px;border-radius:50%;border:2px solid var(--steel);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s;}
.check-icon.checked{background:var(--blue);border-color:var(--blue);color:#fff;}

.related-content{background:var(--cloud);border-radius:16px;padding:32px;margin-top:48px;}
.related-content h2{font-size:20px;font-weight:500;margin:0 0 20px;}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.related-card{background:var(--canvas);border-radius:12px;padding:20px;box-shadow:0 2px 8px rgba(26,26,26,0.06);}
.related-card h3{font-size:15px;font-weight:500;margin:0 0 8px;color:var(--ink);}
.related-card p{font-size:13px;color:var(--graphite);margin:0 0 12px;}
.related-card a{font-size:13px;font-weight:500;color:var(--blue);}

.section-band{padding:80px 0;}
.section-band.cloud{background:var(--cloud);}
.band-inner{max-width:1366px;margin:0 auto;padding:0 32px;}
.section-title{font-size:32px;font-weight:500;line-height:1.0;margin:0 0 12px;}
.section-lead{font-size:18px;color:var(--charcoal);margin:0 0 40px;}

.disclaimer-box{background:var(--cloud);border-radius:8px;border-left:4px solid var(--steel);padding:16px 20px;margin:24px 0;font-size:13px;color:var(--graphite);line-height:1.5;}
.disclaimer-box strong{color:var(--charcoal);}

.contact-form{max-width:560px;}
.form-group{margin-bottom:20px;}
.form-group label{display:block;font-size:14px;font-weight:500;color:var(--charcoal);margin-bottom:6px;}
.form-group input,.form-group textarea{width:100%;padding:12px 16px;border:1px solid var(--steel);border-radius:4px;font-size:16px;font-family:inherit;background:var(--canvas);color:var(--ink);transition:border-color 0.2s;}
.form-group input:focus,.form-group textarea:focus{outline:none;border-color:var(--ink);}
.form-group textarea{resize:vertical;min-height:120px;}
.btn-primary{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 24px;background:var(--blue);color:#fff;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:0.7px;border-radius:4px;border:none;cursor:pointer;transition:background 0.2s;}
.btn-primary:hover,.btn-primary:active{background:var(--blue-deep);}
.btn-primary:disabled{background:var(--steel);cursor:not-allowed;}
.form-loader{display:none;align-items:center;gap:10px;font-size:14px;color:var(--graphite);margin-top:12px;}
.form-loader.visible{display:flex;}
.spinner{width:20px;height:20px;border:2px solid var(--fog);border-top-color:var(--blue);border-radius:50%;animation:spin 0.7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.form-success{display:none;background:#f0f7ff;border:1px solid var(--blue);border-radius:8px;padding:16px 20px;font-size:15px;color:var(--ink);margin-top:16px;}
.form-success.visible{display:block;}

.cookie-banner{position:fixed;bottom:0;left:0;right:0;background:var(--ink);color:#fff;padding:20px 32px;z-index:9999;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.cookie-text{font-size:14px;line-height:1.5;max-width:700px;}
.cookie-text a{color:var(--blue-bright);}
.cookie-buttons{display:flex;gap:10px;flex-shrink:0;}
.btn-cookie-accept{height:40px;padding:0 20px;background:var(--blue);color:#fff;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;border-radius:4px;border:none;cursor:pointer;}
.btn-cookie-reject{height:40px;padding:0 20px;background:transparent;color:#fff;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;border-radius:4px;border:1px solid rgba(255,255,255,0.3);cursor:pointer;}

.site-footer{background:var(--ink);color:#fff;padding:64px 32px 32px;}
.footer-inner{max-width:1366px;margin:0 auto;}
.footer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;margin-bottom:48px;}
.footer-col h4{font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:0.7px;color:#fff;margin:0 0 16px;}
.footer-col ul{list-style:none;margin:0;padding:0;}
.footer-col li{margin-bottom:8px;}
.footer-col a{font-size:14px;color:var(--steel);text-decoration:none;}
.footer-col a:hover{color:#fff;}
.footer-col p{font-size:13px;color:var(--steel);line-height:1.5;margin:0 0 8px;}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.1);padding-top:24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;}
.footer-copy{font-size:12px;color:var(--graphite);}
.footer-legal-links{display:flex;gap:16px;flex-wrap:wrap;}
.footer-legal-links a{font-size:12px;color:var(--graphite);}
.footer-legal-links a:hover{color:var(--steel);}

.prose h2{font-size:28px;font-weight:500;color:var(--ink);margin:48px 0 16px;scroll-margin-top:90px;}
.prose h3{font-size:20px;font-weight:500;color:var(--ink);margin:32px 0 12px;scroll-margin-top:90px;}
.prose p{font-size:16px;line-height:1.5;color:var(--charcoal);margin:0 0 16px;}
.prose ul,.prose ol{padding-left:24px;margin:0 0 16px;}
.prose li{font-size:16px;line-height:1.5;color:var(--charcoal);margin-bottom:6px;}

@media(max-width:1024px){
  .layout-wrapper{grid-template-columns:1fr;padding:24px 16px;}
  .sidebar{position:static;}
  .related-grid{grid-template-columns:1fr 1fr;}
  .footer-grid{grid-template-columns:repeat(2,1fr);}
  .page-hero h1{font-size:32px;}
}
@media(max-width:767px){
  .header-inner{padding:0 16px;}
  .nav-links{display:none;}
  .hamburger{display:block;}
  .page-hero{padding:28px 20px;}
  .page-hero h1{font-size:28px;}
  .related-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .cookie-banner{flex-direction:column;align-items:flex-start;}
}
