:root {
  --blue-50:#E6F1FB;--blue-200:#85B7EB;--blue-400:#378ADD;
  --blue-600:#185FA5;--blue-800:#0C447C;--blue-900:#042C53;
  --gray-50:#F1EFE8;--gray-100:#D3D1C7;--gray-200:#B4B2A9;
  --gray-400:#888780;--gray-600:#5F5E5A;--gray-800:#444441;--gray-900:#2C2C2A;
  --white:#ffffff;
  --font-serif:'Playfair Display',Georgia,serif;
  --font-sans:'Source Sans 3',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:var(--font-sans);background:var(--white);color:var(--gray-900);line-height:1.7;font-size:16px;}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;background:rgba(255,255,255,0.97);border-bottom:1px solid var(--gray-100);z-index:100;padding:0 28px;display:flex;align-items:center;justify-content:space-between;height:64px;gap:12px;}
.nav-logo{font-family:var(--font-serif);font-size:16px;font-weight:600;color:var(--blue-800);text-decoration:none;white-space:nowrap;flex-shrink:0;}
.nav-links{display:flex;gap:2px;list-style:none;flex-wrap:wrap;}
.nav-links a{font-size:12px;font-weight:400;color:var(--gray-600);text-decoration:none;padding:5px 9px;border-radius:6px;transition:all 0.2s;}
.nav-links a:hover,.nav-links a.active{background:var(--blue-50);color:var(--blue-800);}

/* LANG SWITCHER */
.lang-switcher{display:flex;gap:4px;align-items:center;flex-shrink:0;}
.lang-btn{font-family:var(--font-sans);font-size:12px;font-weight:500;padding:5px 10px;border-radius:6px;border:1px solid var(--gray-100);background:var(--white);color:var(--gray-600);cursor:pointer;transition:all 0.2s;letter-spacing:0.5px;}
.lang-btn:hover{border-color:var(--blue-200);color:var(--blue-800);}
.lang-btn.active{background:var(--blue-800);color:var(--white);border-color:var(--blue-800);}

/* HERO */
.hero{background:linear-gradient(160deg,var(--blue-900) 0%,var(--blue-800) 50%,var(--blue-600) 100%);padding:110px 40px 80px;text-align:center;position:relative;overflow:hidden;}
.hero::before{content:'';position:absolute;top:-80px;right:-80px;width:400px;height:400px;border-radius:50%;border:1px solid rgba(255,255,255,0.07);}
.hero-tag{display:inline-block;font-size:11px;font-weight:500;letter-spacing:2px;text-transform:uppercase;color:var(--blue-200);background:rgba(255,255,255,0.08);padding:6px 16px;border-radius:20px;margin-bottom:24px;border:1px solid rgba(255,255,255,0.1);}
.hero h1{font-family:var(--font-serif);font-size:48px;font-weight:600;color:var(--white);line-height:1.15;margin-bottom:18px;letter-spacing:-1px;max-width:700px;margin-left:auto;margin-right:auto;}
.hero p{font-size:17px;color:rgba(255,255,255,0.7);max-width:540px;margin:0 auto 36px;font-weight:300;line-height:1.8;}
.hero-cta{display:inline-block;background:var(--white);color:var(--blue-800);font-size:14px;font-weight:500;padding:13px 30px;border-radius:8px;text-decoration:none;border:none;cursor:pointer;transition:all 0.2s;}
.hero-cta:hover{background:var(--blue-50);transform:translateY(-1px);}

/* SECTION */
.section{padding:64px 40px;max-width:960px;margin:0 auto;}
.section-label{font-size:11px;font-weight:500;letter-spacing:2px;text-transform:uppercase;color:var(--blue-400);margin-bottom:10px;}
.section-title{font-family:var(--font-serif);font-size:34px;font-weight:600;color:var(--gray-900);letter-spacing:-0.5px;line-height:1.2;margin-bottom:14px;}
.section-subtitle{font-size:16px;color:var(--gray-600);max-width:580px;margin-bottom:44px;font-weight:300;}
.divider{border:none;border-top:1px solid var(--gray-100);margin:0 40px;}

/* CARDS */
.cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;}
.card{background:var(--white);border:1px solid var(--gray-100);border-radius:12px;padding:26px;cursor:pointer;transition:all 0.25s;position:relative;overflow:hidden;text-decoration:none;display:block;}
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--blue-400);transform:scaleX(0);transition:transform 0.25s;transform-origin:left;}
.card:hover{border-color:var(--blue-200);transform:translateY(-3px);box-shadow:0 12px 32px rgba(55,138,221,0.1);}
.card:hover::before{transform:scaleX(1);}
.card-icon{width:42px;height:42px;background:var(--blue-50);border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;font-size:18px;}
.card h3{font-family:var(--font-serif);font-size:17px;font-weight:600;color:var(--gray-900);margin-bottom:7px;}
.card p{font-size:14px;color:var(--gray-600);line-height:1.6;}
.card-link{display:inline-block;margin-top:14px;font-size:13px;color:var(--blue-600);font-weight:500;}

/* CONTENT PAGES */
.page-wrapper{padding-top:64px;min-height:100vh;}
.content-hero{background:var(--blue-50);border-bottom:1px solid var(--blue-200);padding:56px 40px 44px;}
.breadcrumb{font-size:13px;color:var(--gray-400);margin-bottom:14px;}
.breadcrumb a{color:var(--blue-600);text-decoration:none;}
.breadcrumb a:hover{text-decoration:underline;}
.content-hero h1{font-family:var(--font-serif);font-size:40px;font-weight:600;color:var(--blue-900);letter-spacing:-0.8px;line-height:1.2;max-width:700px;}
.content-hero .tagline{font-size:16px;color:var(--blue-600);margin-top:10px;font-weight:300;}
.content-body{max-width:800px;margin:0 auto;padding:52px 40px;}
.content-body h2{font-family:var(--font-serif);font-size:24px;font-weight:600;color:var(--gray-900);margin:44px 0 14px;letter-spacing:-0.3px;}
.content-body h2:first-child{margin-top:0;}
.content-body p{font-size:16px;color:var(--gray-800);line-height:1.85;margin-bottom:18px;font-weight:300;}
.content-body ul{margin:0 0 18px;padding-left:0;list-style:none;}
.content-body ul li{font-size:15px;color:var(--gray-800);line-height:1.7;padding:7px 0 7px 20px;border-bottom:1px solid var(--gray-50);position:relative;font-weight:300;}
.content-body ul li::before{content:'—';position:absolute;left:0;color:var(--blue-400);}
.info-box{background:var(--blue-50);border-left:3px solid var(--blue-400);padding:18px 22px;border-radius:0 8px 8px 0;margin:28px 0;}
.info-box p{margin:0;color:var(--blue-800);font-size:15px;}
.pillars-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin:20px 0 28px;}
.pillar{background:var(--gray-50);border-radius:10px;padding:18px;border:1px solid var(--gray-100);}
.pillar h4{font-family:var(--font-serif);font-size:14px;font-weight:600;color:var(--blue-800);margin-bottom:5px;}
.pillar p{font-size:13px;color:var(--gray-600);margin:0;line-height:1.5;}

/* QUIZ */
.quiz-container{max-width:660px;margin:0 auto;padding:52px 40px;}
.quiz-progress{display:flex;gap:5px;margin-bottom:32px;}
.bar{flex:1;height:3px;background:var(--gray-100);border-radius:2px;transition:background 0.3s;}
.bar.done{background:var(--blue-400);}
.bar.active{background:var(--blue-200);}
.q-meta{font-size:11px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;color:var(--blue-400);margin-bottom:10px;}
.q-text{font-family:var(--font-serif);font-size:22px;font-weight:600;color:var(--gray-900);line-height:1.35;margin-bottom:28px;}
.options{display:flex;flex-direction:column;gap:10px;margin-bottom:22px;}
.opt{padding:13px 17px;border:1px solid var(--gray-100);border-radius:10px;cursor:pointer;font-size:14px;color:var(--gray-800);transition:all 0.2s;background:var(--white);text-align:left;font-family:var(--font-sans);font-weight:300;line-height:1.5;}
.opt:hover{border-color:var(--blue-200);background:var(--blue-50);color:var(--blue-800);}
.opt.correct{border-color:#3B6D11;background:#EAF3DE;color:#27500A;pointer-events:none;}
.opt.wrong{border-color:#A32D2D;background:#FCEBEB;color:#791F1F;pointer-events:none;}
.opt.disabled{pointer-events:none;color:var(--gray-400);}
.feedback{padding:13px 17px;border-radius:10px;font-size:14px;line-height:1.6;margin-bottom:22px;font-weight:300;display:none;}
.feedback.correct{background:#EAF3DE;color:#27500A;border:1px solid #C0DD97;display:block;}
.feedback.wrong{background:#FCEBEB;color:#791F1F;border:1px solid #F7C1C1;display:block;}
.next-btn{background:var(--blue-800);color:var(--white);border:none;padding:12px 26px;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;font-family:var(--font-sans);transition:background 0.2s;display:none;}
.next-btn:hover{background:var(--blue-900);}
.result{text-align:center;padding:48px 20px;display:none;}
.result-score{font-family:var(--font-serif);font-size:76px;font-weight:600;color:var(--blue-800);line-height:1;margin-bottom:4px;}
.result-total{font-size:13px;color:var(--gray-400);letter-spacing:1px;text-transform:uppercase;margin-bottom:18px;}
.result-emoji{font-size:44px;margin-bottom:14px;}
.result-msg{font-size:16px;color:var(--gray-600);margin-bottom:28px;font-weight:300;line-height:1.6;max-width:380px;margin-left:auto;margin-right:auto;}
.restart-btn{background:var(--blue-800);color:var(--white);border:none;padding:12px 26px;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;font-family:var(--font-sans);transition:background 0.2s;}
.restart-btn:hover{background:var(--blue-900);}

/* REFS */
.ref-item{padding:18px 0;border-bottom:1px solid var(--gray-100);}
.ref-item:last-child{border-bottom:none;}
.ref-type{font-size:11px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;color:var(--blue-400);margin-bottom:5px;}
.ref-item h4{font-family:var(--font-serif);font-size:15px;font-weight:600;color:var(--gray-900);margin-bottom:3px;}
.ref-item p{font-size:14px;color:var(--gray-600);font-weight:300;margin:0;}
.ref-item a{color:var(--blue-600);text-decoration:none;font-weight:400;}
.ref-item a:hover{text-decoration:underline;color:var(--blue-800);}

/* FOOTER */
footer{background:var(--gray-900);color:var(--gray-400);text-align:center;padding:36px 40px;font-size:13px;font-weight:300;}
footer strong{color:var(--gray-200);font-weight:400;}

/* RESPONSIVE */
@media(max-width:768px){
  nav{padding:0 14px;}
  .nav-links{display:none;}
  .hero{padding:80px 18px 50px;}
  .hero h1{font-size:30px;}
  .section{padding:40px 18px;}
  .content-hero{padding:36px 18px 28px;}
  .content-hero h1{font-size:28px;}
  .content-body{padding:36px 18px;}
  .quiz-container{padding:36px 18px;}
}