/* ===== Reset & Base ===== */
*{margin:0;padding:0;box-sizing:border-box}
#root{display:none!important}
:root{
  --navy:#1a365d;--navy-l:#2c5282;--blue:#3182ce;--blue-l:#ebf8ff;
  --green:#38a169;--green-l:#f0fff4;--gold:#d69e2e;--gold-l:#fffbeb;
  --g50:#f7fafc;--g100:#edf2f7;--g200:#e2e8f0;--g300:#cbd5e0;
  --g500:#718096;--g700:#2d3748;--g900:#1a202c;--w:#fff;
  --mw:860px;--r:12px;
}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;line-height:1.7;color:var(--g900);background:var(--w)}
img{max-width:100%;height:auto}
a{color:var(--blue)}

/* ===== Layout ===== */
.container{max-width:var(--mw);margin:0 auto;padding:0 20px}

/* ===== Header ===== */
.site-header{background:var(--navy);color:var(--w);padding:14px 0;position:sticky;top:0;z-index:100;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.site-header .container{display:flex;justify-content:space-between;align-items:center}
.site-logo{font-size:1.4rem;font-weight:800;color:var(--w);text-decoration:none;letter-spacing:-.5px}
.site-logo span{color:#63b3ed}
.nav-links{display:flex;gap:22px;list-style:none}
.nav-links a{color:#cbd5e0;text-decoration:none;font-size:.88rem;font-weight:500;transition:color .2s}
.nav-links a:hover{color:var(--w)}

/* ===== Hero ===== */
.hero{background:linear-gradient(135deg,var(--navy),var(--navy-l));color:var(--w);padding:56px 0 36px;text-align:center}
.hero h1{font-size:2.1rem;font-weight:800;line-height:1.2;margin-bottom:14px;letter-spacing:-.5px}
.hero p{font-size:1.05rem;color:#cbd5e0;max-width:600px;margin:0 auto}
.hero img{width:100%;max-width:800px;border-radius:var(--r);margin:28px auto 0;display:block;box-shadow:0 8px 32px rgba(0,0,0,.2)}

/* ===== Quick Answer ===== */
.quick-answer{background:var(--blue-l);border-left:4px solid var(--blue);padding:20px 24px;border-radius:0 var(--r) var(--r) 0;margin:32px 0}
.quick-answer h2{font-size:1.05rem;color:var(--navy);margin-bottom:10px}
.quick-answer ul{list-style:none;padding:0}
.quick-answer li{padding:5px 0 5px 24px;position:relative;font-size:.95rem}
.quick-answer li::before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:bold}

/* ===== Article ===== */
article{padding:36px 0}
article h2{font-size:1.45rem;font-weight:700;color:var(--navy);margin:36px 0 14px;padding-top:18px;border-top:1px solid var(--g200)}
article h2:first-of-type{border-top:none;padding-top:0}
article h3{font-size:1.12rem;font-weight:600;color:var(--g700);margin:22px 0 10px}
article p{margin-bottom:14px;font-size:1rem;color:var(--g700)}
article ul,article ol{margin:10px 0 18px 22px}
article li{margin-bottom:6px;font-size:.95rem;color:var(--g700)}
article img{border-radius:var(--r);margin:20px 0}

/* ===== Service Card ===== */
.service-card{background:var(--w);border:1px solid var(--g200);border-radius:var(--r);padding:24px;margin:24px 0;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.service-card.best{border:2px solid var(--gold);background:linear-gradient(180deg,var(--gold-l),var(--w))}
.service-rank{font-size:1.8rem;margin-bottom:4px}
.service-card h3{font-size:1.25rem;color:var(--navy)}
.service-card h3 a{color:var(--blue);text-decoration:none}
.service-card h3 a:hover{text-decoration:underline}
.service-card .service-desc{font-size:.92rem;color:var(--g500);margin:6px 0 14px}
.service-card .for-who{font-size:.92rem;color:var(--g700);margin-bottom:12px;font-style:italic}
.service-card ul{list-style:none;padding:0;margin:0}
.service-card ul li{padding-left:22px;position:relative;margin-bottom:5px}
.service-card ul li::before{content:"+";position:absolute;left:0;color:var(--green);font-weight:bold}

/* ===== CTA Block ===== */
.cta-block{background:linear-gradient(135deg,var(--navy),var(--blue));border-radius:var(--r);padding:26px 30px;margin:30px 0;text-align:center;color:var(--w)}
.cta-block p{color:#e2e8f0;margin-bottom:14px;font-size:.98rem}
.cta-button{display:inline-block;background:var(--w);color:var(--navy);padding:11px 30px;border-radius:8px;text-decoration:none;font-weight:700;font-size:.98rem;transition:transform .2s,box-shadow .2s}
.cta-button:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.2)}

/* ===== Table ===== */
.table-wrap{overflow-x:auto;margin:24px 0}
.comparison-table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:500px}
.comparison-table th{background:var(--navy);color:var(--w);padding:12px 14px;text-align:left;font-weight:600}
.comparison-table td{padding:11px 14px;border-bottom:1px solid var(--g200)}
.comparison-table tr:nth-child(even) td{background:var(--g50)}
.comparison-table a{color:var(--blue);text-decoration:none;font-weight:600}
.comparison-table a:hover{text-decoration:underline}

/* ===== Checklist ===== */
.checklist{background:var(--g50);border-radius:var(--r);padding:22px;margin:24px 0}
.checklist ul{list-style:none;padding:0;margin:0}
.checklist li{padding-left:26px;position:relative;margin-bottom:7px;font-size:.95rem}
.checklist li::before{content:"☐";position:absolute;left:0;font-size:1.1rem}

/* ===== Tips ===== */
.tips-list{counter-reset:tip;list-style:none;padding:0}
.tips-list li{counter-increment:tip;padding:11px 0 11px 46px;position:relative;border-bottom:1px solid var(--g100);font-size:.95rem}
.tips-list li::before{content:counter(tip);position:absolute;left:0;top:11px;background:var(--navy);color:var(--w);width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.82rem}

/* ===== Stats Block ===== */
.stats-block{background:var(--navy);color:var(--w);border-radius:var(--r);padding:26px 30px;margin:30px 0}
.stats-block h3{color:#63b3ed;margin-bottom:12px;font-size:1.1rem}
.stats-block p{color:#e2e8f0;font-size:.95rem;margin-bottom:10px}

/* ===== Insight Box ===== */
.insight-box{background:var(--green-l);border-left:4px solid var(--green);padding:20px 24px;border-radius:0 var(--r) var(--r) 0;margin:24px 0}
.insight-box ul{list-style:none;padding:0;margin:0}
.insight-box li{padding:9px 0;border-bottom:1px solid rgba(56,161,105,.15);font-size:.95rem}
.insight-box li:last-child{border-bottom:none}
.insight-box strong{color:#22543d}

/* ===== FAQ ===== */
.faq-section{margin:36px 0}
.faq-item{border-bottom:1px solid var(--g200);padding:14px 0}
.faq-item h3{font-size:1.02rem;color:var(--navy);margin-bottom:6px}
.faq-item p{font-size:.94rem;color:var(--g500)}

/* ===== Questions Box ===== */
.questions-box{background:var(--g50);border-radius:var(--r);padding:22px;margin:24px 0}
.questions-box ul{list-style:none;padding:0;margin:0}
.questions-box li{padding:7px 0 7px 24px;position:relative;font-size:.95rem}
.questions-box li::before{content:"?";position:absolute;left:0;color:var(--blue);font-weight:bold}

/* ===== Situation ===== */
.situation{background:var(--w);border:1px solid var(--g200);border-radius:var(--r);padding:18px;margin:14px 0}
.situation p:first-child{font-weight:600;color:var(--g700)}
.situation p:last-child{color:var(--blue);margin-top:6px}

/* ===== Lang Nav ===== */
.lang-nav{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;padding:22px 0;background:var(--g50)}
.lang-nav a{color:var(--navy);text-decoration:none;font-size:.88rem;font-weight:500;padding:6px 14px;border:1px solid var(--g300);border-radius:20px;transition:all .2s}
.lang-nav a:hover,.lang-nav a.active{background:var(--navy);color:var(--w);border-color:var(--navy)}

/* ===== Footer ===== */
.site-footer{background:var(--navy);color:#a0aec0;padding:36px 0 20px;margin-top:36px}
.site-footer .container{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px}
.footer-links{display:flex;gap:22px;list-style:none;flex-wrap:wrap}
.footer-links a{color:#a0aec0;text-decoration:none;font-size:.88rem}
.footer-links a:hover{color:var(--w)}
.footer-copy{text-align:center;font-size:.82rem;color:#718096;margin-top:20px;padding-top:14px;border-top:1px solid rgba(255,255,255,.1);width:100%}

/* ===== Breadcrumb ===== */
.breadcrumb{font-size:.85rem;color:var(--g500);padding:14px 0}
.breadcrumb a{color:var(--blue);text-decoration:none}
.breadcrumb span{margin:0 6px}

/* ===== Responsive ===== */
@media(max-width:768px){
  .hero h1{font-size:1.5rem}
  .hero p{font-size:.95rem}
  article h2{font-size:1.2rem}
  .nav-links{display:none}
  .site-footer .container{flex-direction:column}
  .comparison-table{font-size:.82rem}
  .cta-block{padding:18px}
  .cta-button{padding:9px 22px;font-size:.9rem}
}

/* ===== RTL ===== */
[dir="rtl"]{text-align:right}
[dir="rtl"] .quick-answer,[dir="rtl"] .insight-box{border-left:none;border-right:4px solid var(--blue);border-radius:var(--r) 0 0 var(--r)}
[dir="rtl"] .quick-answer li::before,[dir="rtl"] .checklist li::before{left:auto;right:0}
[dir="rtl"] .quick-answer li,[dir="rtl"] .checklist li{padding-left:0;padding-right:26px}
[dir="rtl"] .service-card ul li::before{left:auto;right:0}
[dir="rtl"] .service-card ul li{padding-left:0;padding-right:22px}
[dir="rtl"] .tips-list li{padding-left:0;padding-right:46px}
[dir="rtl"] .tips-list li::before{left:auto;right:0}
[dir="rtl"] .questions-box li{padding-left:0;padding-right:24px}
[dir="rtl"] .questions-box li::before{left:auto;right:0}