:root{
    --primary:#ff5500;
    --primary-light:#ff8c00;
    --heading:#1a202c;
    --text:#4a5568;
    --border:#e2e8f0;
    --bg-soft:#f7fafc;
    --bg-card:#fff;
    --radius:12px;
    --container:1100px;
    --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*,:before,:after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--text);background:#fff;font:400 16px/1.65 var(--font)}
h1,h2,h3{margin:0 0 .6em;color:var(--heading);line-height:1.25}
p{margin:0 0 1rem}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}
.container{max-width:var(--container);margin:auto;padding:0 20px}
.skip-link{position:absolute;left:-9999px;top:0;padding:12px 20px;background:#fff;color:var(--primary);z-index:100}.skip-link:focus{left:6px;top:6px}

/* ================= Header ================= */
.site-header{background:linear-gradient(115deg,var(--primary-light),var(--primary));box-shadow:0 4px 12px #0002;position:relative;z-index:2}
.site-header .container{max-width:1400px}
.header-inner{min-height:80px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.site-title,.site-nav a{color:#fff;font-weight:600}.site-title{font-size:1.625rem;text-shadow:1px 1px 3px #0003}
.nav-lang-group{display:flex;align-items:center;gap:20px;margin-left:auto}
.site-nav ul{display:flex;gap:4px;list-style:none;margin:0;padding:0}.site-nav a{display:block;padding:8px 14px;border-radius:6px}.site-nav a:hover{color:#fff;opacity:.85;text-decoration:none}.site-nav a.active{background: #fff;color: #ff7500;}
.nav-toggle{display:none;width:44px;height:44px;border:0;border-radius:8px;background:#fff2;color:#fff}.nav-toggle svg,#to-top svg{width:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}.icon-close{display:none}.nav-toggle[aria-expanded=true] .icon-open{display:none}.nav-toggle[aria-expanded=true] .icon-close{display:block}

main{padding:32px 0 8px}.page-hero{padding:8px 0 10px;text-align:center}.eyebrow{margin-bottom:8px;color:var(--primary);font-size:.75rem;font-weight:800;letter-spacing:.12em}.page-title{text-align:center;color:var(--primary);font-size:clamp(1.35rem,3vw,2rem);margin:0}.page-subtitle{max-width:850px;margin:12px auto 0;text-align:center;font-size:1.05rem}.page-meta{text-align:center;color:#718096;font-size:.92rem}.static-page{max-width:900px}.page-card,.sc-form,.blog-card{padding:24px;border:1px solid #eee;border-radius:var(--radius);background:var(--bg-card);box-shadow:0 4px 15px #00000010}.page-card{margin-top:24px}.rich-content h2,.rich-content h3{margin-top:1.5rem}.rich-content ul,.rich-content ol{padding-left:1.2rem}.rich-content code{padding:.12rem .35rem;border-radius:6px;background:#f4f6f8}.rich-content blockquote{margin:1rem 0;padding-left:1rem;border-left:4px solid var(--primary);color:#2d3748;background:#fff7f2}
.sc-downloader{max-width:800px;margin:24px auto}.sc-input-group{display:flex;gap:10px}.sc-input{min-width:0;flex:1;height:55px;padding:0 20px;border:2px solid #e0e0e0;border-radius:8px;font-size:16px}.sc-input:focus{border-color:var(--primary);outline:0}.input-error{border-color:#c53030}.sc-btn{min-width:150px;height:55px;padding:0 28px;display:flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:8px;background:linear-gradient(45deg,#ff5500,#ff7700);color:#fff;font-weight:600;cursor:pointer}.sc-btn:hover{box-shadow:0 4px 10px #ff55004d;text-decoration:none;color:#fff}.inline-btn{display:inline-flex}.sc-btn svg{width:18px;fill:none;stroke:currentColor;stroke-width:2}.sc-btn:disabled{background:#ccc}.sc-spinner{display:none;width:18px;height:18px;border:2px solid #fff7;border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}.is-loading svg{display:none}.is-loading .sc-spinner{display:block}@keyframes spin{to{transform:rotate(360deg)}}.form-message{margin:12px 0 0}.form-message.error{color:#c53030}.form-message.success{color:#276749}.sc-loading{display:none;margin-top:20px;text-align:center}.sc-loading.is-visible{display:block}.sc-loading-text{font-size:14px;font-weight:500}.sc-progress{height:8px;overflow:hidden;border-radius:20px;background:#f0f0f0}.sc-progress span{display:block;height:100%;background:linear-gradient(90deg,#ff5500,#ff9900);animation:load 2.5s infinite ease-in-out}@keyframes load{0%{width:0}50%{width:70%}100%{width:100%;margin-left:100%}}
.section{padding:40px 0;border-bottom:1px solid var(--border)}.section-title{text-align:center;font-size:clamp(1.6rem,4vw,2.25rem)}.section-title:after{content:"";display:block;width:60px;height:4px;margin:15px auto;background:var(--primary);border-radius:2px}.section-subtitle{max-width:800px;margin:0 auto 30px;text-align:center;font-size:1.1rem}.section-media img{margin:auto;border-radius:10px}.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:30px;margin-top:40px}.feature{padding:30px;text-align:center;border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 4px 6px #0000000d}.feature-icon{margin-bottom:16px;color:var(--primary);font-size:40px;line-height:1}.steps{max-width:800px;margin:40px auto 0;padding:0;list-style:none;counter-reset:step}.steps li{counter-increment:step;position:relative;margin-bottom:20px;padding:20px 20px 20px 70px;border:1px solid var(--border);border-radius:8px}.steps li:before{content:counter(step);position:absolute;left:18px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:35px;height:35px;border-radius:50%;background:var(--primary);color:#fff;font-weight:bold}.steps h3{margin:0}.toolkit-item{margin-bottom:20px;padding:25px;border-left:4px solid var(--primary);border-radius:8px;background:var(--bg-soft)}.faq{max-width:800px;margin:40px auto 0}.faq-item{border-bottom:1px solid var(--border)}.faq-q{width:100%;padding:20px 0;display:flex;justify-content:space-between;gap:20px;border:0;background:none;text-align:left;font-size:1.1rem;font-weight:600;color:var(--heading);cursor:pointer}.faq-q:after{content:"+";color:var(--primary);font-size:1.8rem;font-weight:300}.faq-q[aria-expanded=true]:after{transform:rotate(45deg)}.faq-a{max-height:0;overflow:hidden;transition:max-height .35s}.faq-a p{padding-bottom:20px}
.blog-grid{display:grid;gap:22px;margin-top:24px}.blog-card h2{margin-bottom:.35rem}.read-more{font-weight:700}.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.center{text-align:center}.prose{max-width:800px;margin:auto}.prose h3{margin-top:1.5rem}#to-top{display:none;position:fixed;right:24px;bottom:24px;width:42px;height:42px;border:0;border-radius:6px;background:var(--primary);color:#fff;box-shadow:0 4px 10px #0003}#to-top.is-visible{display:grid;place-items:center}

@media(max-width:600px){.sc-input-group,.footer-inner{flex-direction:column}.sc-btn{width:100%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.sc-spinner,.sc-progress span{animation:none}}

/* ================= Language Dropdown ================= */
.lang-dropdown {
    position: relative;
    user-select: none;
    z-index: 50;
}

.lang-details {
    position: relative;
}

.lang-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 14px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    list-style: none;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.lang-trigger::-webkit-details-marker {
    display: none;
}

.lang-trigger:hover,
.lang-details[open] .lang-trigger {
    background: rgba(255, 255, 255, 0.3);
}

.lang-trigger:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.lang-icon {
    flex-shrink: 0;
}

.lang-chevron {
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.lang-details[open] .lang-chevron {
    transform: rotate(180deg);
}

.lang-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 160px;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    gap: 2px;
    animation: langFadeIn 0.15s ease-out;
}

@keyframes langFadeIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.lang-item {
    display: block;
    padding: 8px 12px;
    border-radius: 6px;
    color: var(--heading);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.lang-item:hover {
    background: var(--bg-soft);
    color: var(--primary);
    text-decoration: none;
}

.lang-item.active {
    background: #fff7f2;
    color: var(--primary);
    font-weight: 700;
}

/* ================= Header Mobile Breakpoint ================= */
@media(max-width:768px){
    .header-inner{padding:14px 16px 16px;min-height:auto}
    .nav-toggle{display:flex;align-items:center;justify-content:center;width:40px;height:40px}
    .nav-lang-group{order:3;width:100%;flex-direction:column;align-items:stretch;gap:10px;margin-left:0;margin-top:14px}
    .site-nav{display:none;width:100%}
    .site-nav.is-open{display:block}
    .site-nav ul{flex-direction:column;gap:0}
    .site-nav a{padding:12px 4px;border-top:1px solid #fff4;border-radius:0}
    .lang-dropdown{align-self:stretch}
    .lang-trigger{width:100%;justify-content:center;height:44px;background:rgba(255,255,255,.18);border-radius:10px}
    .lang-menu{left:0;right:0;width:auto}
}

/* ================= Footer ================= */
.site-footer {
    position: relative;
    margin-top: 48px;
    padding: 0;
    background: linear-gradient(180deg, #1a202c, #131722);
    color: #a0aec0;
    text-align: left;
    overflow: hidden;
}

.footer-glow {
    position: absolute;
    inset: auto auto 0 50%;
    width: 640px;
    height: 640px;
    transform: translate(-50%, 45%);
    background: radial-gradient(closest-side, #ff550022, transparent);
    pointer-events: none;
}

.footer-top { position: relative; padding: 56px 20px 32px; }

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 40px;
}

.footer-brand { padding-right: 20px; }

.footer-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-size: 1.3rem;
    font-weight: 800;
}
.footer-logo:hover { text-decoration: none; color: #fff; }

.footer-logo-icon {
    width: 26px; height: 26px;
    stroke: var(--primary-light);
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.footer-tagline {
    margin: 14px 0;
    font-size: .92rem;
    line-height: 1.7;
    color: #a0aec0;
    max-width: 320px;
}

.footer-disclaimer {
    font-size: .8rem;
    line-height: 1.6;
    color: #718096;
    max-width: 340px;
}

.footer-social { display: flex; gap: 10px; margin-top: 18px; }
.footer-social a {
    display: grid;
    place-items: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: #ffffff10;
    color: #e2e8f0;
}
.footer-social a:hover { background: var(--primary); color: #fff; }
.footer-social svg {
    width: 16px; height: 16px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.footer-heading {
    margin: 0 0 18px;
    color: #fff;
    font-size: .92rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.footer-links {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.footer-links a { color: #a0aec0; font-size: .92rem; }
.footer-links a:hover { color: var(--primary-light); text-decoration: none; }

.footer-bottom {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 22px 20px;
    border-top: 1px solid #ffffff14;
}
.footer-copy { margin: 0; font-size: .85rem; color: #a0aec0; }
.footer-note { margin: 0; font-size: .8rem; color: #718096; }

.footer-links a:focus-visible,
.footer-logo:focus-visible,
.footer-social a:focus-visible {
    outline: 2px solid var(--primary-light);
    outline-offset: 2px;
}

@media (max-width: 900px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-brand { grid-column: 1 / -1; padding-right: 0; margin-bottom: 8px; }
}
@media (max-width: 560px) {
    .footer-grid { grid-template-columns: 1fr; gap: 32px; }
    .footer-bottom { flex-direction: column; align-items: flex-start; text-align: left; }
}