:root {
     --bg-main: #f4f7fb;
     --bg-card: #ffffff;
     --bg-soft: #eef4fb;
     --text-main: #15233a;
     --text-body: #42526b;
     --text-muted: #6e7c93;
     --line: #d9e2ee;
     --primary: #0b5ed7;
     --primary-hover: #094fb5;
     --primary-dark: #0d1b2a;
     --success: #0f7b46;
     --shadow-soft: 0 12px 34px rgba(15, 32, 56, 0.08);
     --shadow-card: 0 10px 26px rgba(16, 24, 40, 0.06);
     --radius-xl: 24px;
     --radius-lg: 18px;
     --radius-md: 14px;
     --radius-sm: 12px;
     --container: 1180px;
     --header-height: 78px;
     --sticky-cta-height: 84px;
     --transition: 0.25s ease;
 }

 * {
     box-sizing: border-box;
 }

 html {
     scroll-behaviour: smooth;
     scroll-behavior: smooth;
 }

 body {
     margin: 0;
     font-family: Arial, Helvetica, sans-serif;
     background: var(--bg-main);
     color: var(--text-main);
     line-height: 1.65;
 }

 body.preland-guide-page {
     padding-top: 0;
 }

 img {
     max-width: 100%;
     display: block;
 }

 a {
     color: inherit;
     text-decoration: none;
 }

 button,
 input,
 textarea {
     font: inherit;
 }

 .container {
     width: min(100% - 32px, var(--container));
     margin: 0 auto;
 }

 .site-header {
     position: sticky;
     top: 0;
     z-index: 120;
     height: var(--header-height);
     background: rgba(255, 255, 255, 0.94);
     backdrop-filter: blur(10px);
     border-bottom: 1px solid rgba(217, 226, 238, 0.9);
     transition: box-shadow var(--transition), background var(--transition);
 }

 .site-header.is-scrolled {
     box-shadow: 0 10px 24px rgba(15, 32, 56, 0.08);
 }

 .header-container {
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 18px;
 }

 .site-logo {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     font-weight: 800;
     font-size: 22px;
     color: var(--primary-dark);
     letter-spacing: 0.01em;
 }

.site-logo__mark,
.footer-logo__mark {
    width: 42px;
    height: 42px;
    object-fit: contain;
    display: block;
    flex: 0 0 42px;
}

 .site-nav {
     display: flex;
     align-items: center;
     gap: 24px;
 }

 .site-nav a {
     font-size: 15px;
     font-weight: 700;
     color: var(--text-body);
     transition: color var(--transition);
 }

 .site-nav a:hover {
     color: var(--primary);
 }

 .burger {
     display: none;
     width: 46px;
     height: 46px;
     border: 1px solid var(--line);
     border-radius: 12px;
     background: #fff;
     padding: 0;
     cursor: pointer;
 }

 .burger span {
     display: block;
     width: 20px;
     height: 2px;
     margin: 5px auto;
     background: var(--primary-dark);
     border-radius: 2px;
 }

 .guide-hero {
     padding: 44px 0 28px;
 }

 .guide-hero__grid {
     display: grid;
     grid-template-columns: 1.1fr 0.9fr;
     gap: 34px;
     align-items: center;
 }

 .hero-label {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 8px 14px;
     border-radius: 999px;
     background: rgba(11, 94, 215, 0.08);
     color: var(--primary);
     font-size: 12px;
     font-weight: 800;
     letter-spacing: 0.08em;
     text-transform: uppercase;
 }

 .hero-title {
     margin: 18px 0 16px;
     font-size: clamp(34px, 4.8vw, 58px);
     line-height: 1.04;
     letter-spacing: -0.03em;
     color: var(--primary-dark);
 }

 .hero-text {
     margin: 0 0 22px;
     font-size: 18px;
     color: var(--text-body);
     max-width: 720px;
 }

 .hero-points {
     display: flex;
     flex-wrap: wrap;
     gap: 12px;
 }

 .hero-points span {
     display: inline-flex;
     align-items: center;
     padding: 10px 14px;
     background: #fff;
     border: 1px solid var(--line);
     border-radius: 999px;
     box-shadow: var(--shadow-card);
     color: var(--text-main);
     font-size: 14px;
     font-weight: 700;
 }

 .hero-media {
     background: var(--bg-card);
     border-radius: var(--radius-xl);
     overflow: hidden;
     box-shadow: var(--shadow-soft);
     position: relative;
     min-height: 420px;
 }

 .hero-media img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     min-height: 420px;
 }

 .hero-media__badge {
     position: absolute;
     left: 18px;
     bottom: 18px;
     background: rgba(13, 27, 42, 0.9);
     color: #fff;
     font-weight: 700;
     padding: 12px 16px;
     border-radius: 12px;
     font-size: 14px;
     max-width: 280px;
 }

 .guide-main {
     padding: 10px 0 56px;
 }

 .guide-layout {
     display: grid;
     grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.72fr);
     gap: 28px;
     align-items: start;
 }

 .guide-article {
     background: var(--bg-card);
     border-radius: var(--radius-xl);
     box-shadow: var(--shadow-soft);
     padding: 34px;
     min-width: 0;
 }

 .article-meta {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
     margin-bottom: 18px;
     color: var(--text-muted);
     font-size: 14px;
     font-weight: 600;
 }

 .intro-box {
     padding: 22px 24px;
     background: linear-gradient(180deg, #f7fbff 0%, #edf5ff 100%);
     border: 1px solid #dce9fb;
     border-radius: var(--radius-lg);
     margin-bottom: 30px;
 }

 .intro-box p {
     margin: 0;
     color: var(--text-body);
     font-size: 17px;
 }

 .guide-article h2 {
     margin: 34px 0 14px;
     font-size: clamp(28px, 3.4vw, 40px);
     line-height: 1.15;
     letter-spacing: -0.02em;
     color: var(--primary-dark);
 }

 .guide-article h3 {
     margin: 28px 0 12px;
     font-size: clamp(21px, 2.5vw, 28px);
     line-height: 1.2;
     color: var(--primary-dark);
 }

 .guide-article p {
     margin: 0 0 16px;
     color: var(--text-body);
     font-size: 16px;
 }

 .guide-article strong {
     color: var(--text-main);
 }

 .guide-divider {
     height: 1px;
     background: linear-gradient(90deg, transparent 0%, var(--line) 12%, var(--line) 88%, transparent 100%);
     margin: 30px 0;
     border: 0;
 }

 .feature-list,
 .benefit-list,
 .brand-list,
 .simple-list {
     margin: 0;
     padding: 0;
     list-style: none;
     display: grid;
     gap: 14px;
 }

 .feature-list li,
 .benefit-list li,
 .brand-list li,
 .simple-list li {
     display: flex;
     gap: 14px;
     align-items: flex-start;
     padding: 16px 18px;
     border: 1px solid var(--line);
     background: #fff;
     border-radius: var(--radius-md);
     box-shadow: var(--shadow-card);
 }

 .list-icon {
     width: 34px;
     height: 34px;
     border-radius: 50%;
     background: #edf4ff;
     color: var(--primary);
     font-size: 16px;
     font-weight: 800;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     flex: 0 0 34px;
     margin-top: 2px;
 }

 .list-content strong {
     display: block;
     margin-bottom: 4px;
     font-size: 16px;
     line-height: 1.35;
     color: var(--text-main);
 }

 .list-content span,
 .list-content p {
     margin: 0;
     color: var(--text-body);
     font-size: 15px;
     line-height: 1.6;
 }

 .two-col-cards {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 16px;
     margin-top: 18px;
 }

 .mini-card {
     background: #fff;
     border: 1px solid var(--line);
     border-radius: var(--radius-md);
     padding: 18px;
     box-shadow: var(--shadow-card);
 }

 .mini-card__title {
     margin: 0 0 8px;
     font-size: 17px;
     font-weight: 800;
     color: var(--text-main);
 }

 .mini-card p {
     margin: 0;
     font-size: 15px;
     color: var(--text-body);
 }

 .article-note {
     margin-top: 18px;
     padding: 18px 20px;
     border-radius: var(--radius-md);
     background: #f8fbff;
     border-left: 4px solid var(--primary);
     color: var(--text-body);
     font-size: 15px;
 }

 .article-photo {
     margin: 24px 0 8px;
     background: var(--bg-card);
     border-radius: var(--radius-lg);
     overflow: hidden;
     box-shadow: var(--shadow-card);
 }

 .article-photo img {
     width: 100%;
     min-height: 320px;
     object-fit: cover;
 }

 .guide-aside {
     position: sticky;
     top: calc(var(--header-height) + 18px);
     display: grid;
     gap: 18px;
 }

 .aside-card {
     background: var(--bg-card);
     border-radius: var(--radius-xl);
     box-shadow: var(--shadow-soft);
     padding: 24px;
 }

 .aside-card h3 {
     margin: 0 0 14px;
     font-size: 22px;
     line-height: 1.2;
     color: var(--primary-dark);
 }

 .aside-card p {
     margin: 0 0 14px;
     color: var(--text-body);
     font-size: 15px;
 }

 .aside-compact-list {
     display: grid;
     gap: 12px;
 }

 .aside-compact-item {
     display: flex;
     gap: 12px;
     align-items: flex-start;
     padding: 14px;
     border: 1px solid var(--line);
     border-radius: 14px;
     background: #fbfdff;
 }

 .aside-compact-item__num {
     width: 30px;
     height: 30px;
     border-radius: 50%;
     background: #edf4ff;
     color: var(--primary);
     font-weight: 800;
     font-size: 14px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     flex: 0 0 30px;
     margin-top: 1px;
 }

 .aside-compact-item strong {
     display: block;
     margin-bottom: 4px;
     color: var(--text-main);
     font-size: 15px;
 }

 .aside-compact-item span {
     display: block;
     color: var(--text-body);
     font-size: 14px;
     line-height: 1.55;
 }

 .cta-section {
     margin-top: 18px;
     padding: 28px;
     background: linear-gradient(180deg, #0f2238 0%, #132c47 100%);
     color: #fff;
     border-radius: var(--radius-xl);
     box-shadow: 0 16px 34px rgba(13, 27, 42, 0.18);
 }

 .cta-section h3 {
     margin: 0 0 10px;
     font-size: 28px;
     line-height: 1.1;
     color: #fff;
 }

 .cta-section p {
     margin: 0 0 18px;
     color: rgba(255, 255, 255, 0.82);
     font-size: 16px;
 }

 .cta-button {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     min-height: 58px;
     padding: 14px 28px;
     border-radius: 14px;
     background: var(--primary);
     color: #fff;
     font-size: 16px;
     font-weight: 800;
     letter-spacing: 0.01em;
     transition: transform var(--transition), background var(--transition);
     box-shadow: 0 12px 26px rgba(11, 94, 215, 0.28);
 }

 .cta-button:hover {
     background: var(--primary-hover);
     transform: translateY(-2px);
 }

 .cta-caption {
     margin-top: 12px;
     font-size: 13px;
     color: rgba(255, 255, 255, 0.7);
 }
.site-footer {
    background: #111824;
    color: #d3deeb;
    margin-top: 0;
}

.footer-main {
    padding: 42px 0 28px;
}

.footer-brand-block {
    margin-bottom: 26px;
}

.footer-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 14px;
}

.footer-logo__mark {
    width: 38px;
    height: 38px;
    object-fit: contain;
    display: block;
    flex: 0 0 38px;
}

.footer-company-line {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #b8c6d6;
}

.footer-company-line strong {
    color: #ffffff;
    font-weight: 700;
}

.footer-company-line a {
    color: #f4ae3d;
    text-decoration: none;
}

.footer-disclosure {
    padding: 18px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-disclosure:first-of-type {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-disclosure h4 {
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #ffffff;
}

.footer-disclosure p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #b8c6d6;
    max-width: 1100px;
}

.footer-legal-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 22px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-legal-links a {
    position: relative;
    color: #f4ae3d;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.footer-legal-links a:hover {
    opacity: 0.8;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-bottom__wrap {
    padding: 18px 0;
    color: #97a8bb;
    font-size: 14px;
}

@media (max-width: 768px) {
    .footer-main {
        padding: 32px 0 22px;
    }

    .footer-logo {
        font-size: 19px;
    }

    .footer-logo__mark {
        width: 34px;
        height: 34px;
        flex: 0 0 34px;
    }

    .footer-company-line,
    .footer-disclosure p,
    .footer-legal-links a,
    .footer-bottom__wrap {
        font-size: 13px;
    }

    .footer-disclosure {
        padding: 16px 0;
    }

    .footer-legal-links {
        gap: 10px 16px;
        flex-direction: column;
        align-items: flex-start;
    }
}
.mobile-sticky-cta {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 130;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  /* background: rgba(255, 255, 255, 0.58);
  -webkit-backdrop-filter: blur(14px); */
  backdrop-filter: blur(4px);
  /* border-top: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 -8px 24px rgba(16, 24, 40, 0.10); */
}

 .mobile-sticky-cta .cta-button {
     width: 100%;
     min-height: 54px;
     font-size: 15px;
     padding: 14px 18px;
 }

 @media (max-width: 1100px) {

     .guide-hero__grid,
     .guide-layout,
     .footer-grid {
         grid-template-columns: 1fr;
     }

     .guide-aside {
         position: static;
     }

     .hero-media {
         min-height: 360px;
     }

     .hero-media img {
         min-height: 360px;
     }
 }

 @media (max-width: 860px) {
     :root {
         --header-height: 72px;
     }

     .burger {
         display: inline-block;
     }

     .site-nav {
         display: none;
         position: absolute;
         top: calc(100% + 10px);
         left: 16px;
         right: 16px;
         flex-direction: column;
         align-items: stretch;
         gap: 0;
         background: #fff;
         border: 1px solid var(--line);
         border-radius: 18px;
         box-shadow: var(--shadow-soft);
         overflow: hidden;
     }

     .site-nav.is-open {
         display: flex;
     }

     .site-nav a {
         padding: 15px 18px;
         border-bottom: 1px solid #edf2f8;
     }

     .site-nav a:last-child {
         border-bottom: 0;
     }

     .guide-hero {
         padding: 30px 0 18px;
     }

     .guide-main {
         padding-bottom: calc(28px + var(--sticky-cta-height));
     }

     .guide-article {
         padding: 24px 20px;
     }

     .aside-card,
     .cta-section {
         padding: 20px;
     }

     .two-col-cards {
         grid-template-columns: 1fr;
     }

     .mobile-sticky-cta {
         display: block;
     }
     .cta-button {
     font-size: 14px;

 }
 }

 @media (max-width: 640px) {
     .container {
         width: min(100% - 24px, var(--container));
     }

     .hero-title {
         font-size: 34px;
     }

     .hero-text {
         font-size: 16px;
     }

     .guide-article h2 {
         font-size: 28px;
     }

     .guide-article h3 {
         font-size: 22px;
     }

     .hero-media,
     .hero-media img {
         min-height: 280px;
     }
 }