:root{
  --bg1: #2D1B3D;
  --bg2: #3D2653;
  --bg3: #4A1F5C;
  --accent: #00A896;
  --accent-dark: #008B8B;
  --muted: #B8A5C8;
  --card-bg: #F5F1ED;
  --card-text: #2D1B3D;
  --red: #E74C3C;
  --blue: #3498DB;
  --mint: #5DDBB4;
  --yellow: #F1C40F;
  --purple: #9B59B6;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;min-height:100vh}
body{
  margin:0; font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background: linear-gradient(135deg, var(--bg1) 0%, var(--bg2) 50%, var(--bg3) 100%);
  background-attachment: fixed;
  color:#fff; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  padding:2rem 1rem;
  position:relative;
  overflow-x:hidden;
}
body::before{
  content:'';
  position:absolute;
  top:-10%;
  right:-5%;
  width:600px;
  height:600px;
  background:radial-gradient(circle, rgba(0,168,150,0.08), transparent 70%);
  border-radius:50%;
  pointer-events:none;
}
body::after{
  content:'';
  position:absolute;
  bottom:-15%;
  left:-8%;
  width:700px;
  height:700px;
  background:radial-gradient(circle, rgba(93,219,180,0.06), transparent 70%);
  border-radius:50%;
  pointer-events:none;
}
.page{max-width:1000px;margin:0 auto;position:relative;z-index:1}
.hero{
  padding:2rem;
  border-radius:20px;
  background:rgba(255,255,255,0.95);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3), 0 2px 8px rgba(0,0,0,0.1);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:1.5rem;
  position:relative;
  overflow:hidden;
}
.hero::before{
  content:'🎯';
  position:absolute;
  font-size:120px;
  opacity:0.04;
  right:20px;
  top:50%;
  transform:translateY(-50%) rotate(-15deg);
  pointer-events:none;
}
.hero-inner{width:100%;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2}
.title-wrap h1{
  font-family:Poppins, Inter, sans-serif;
  font-size:2.8rem;
  margin:0;
  letter-spacing: -0.02em;
  background:linear-gradient(135deg, var(--bg1), var(--accent-dark));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  font-weight:800;
}
.title-wrap p{margin:0.3rem 0 0 0;color:var(--accent);font-weight:700;font-size:1.1rem}
.lang{display:flex;gap:.6rem}
.lang-btn{
  background:#fff;
  border:2px solid var(--muted);
  color:var(--card-text);
  padding:.5rem 1rem;
  border-radius:12px;
  cursor:pointer;
  font-weight:700;
  font-size:0.95rem;
  transition:all 0.25s ease;
  box-shadow:0 2px 8px rgba(0,0,0,0.05);
}
.lang-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(0,0,0,0.15);
}
.lang-btn.active{
  background:linear-gradient(135deg,var(--accent),var(--mint));
  color:#fff;
  border-color:var(--accent);
  box-shadow:0 4px 16px rgba(0,168,150,0.3);
}

.content.card{
  padding:2rem;
  border-radius:20px;
  background:rgba(255,255,255,0.95);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3), 0 2px 8px rgba(0,0,0,0.1);
}
.content-grid{display:grid;grid-template-columns:1fr 340px;gap:1.5rem;align-items:start}
article h2{
  font-size:1.8rem;
  margin:0 0 1rem 0;
  color:var(--card-text);
  font-weight:800;
  position:relative;
  padding-left:1rem;
}
article h2::before{
  content:'';
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:4px;
  height:70%;
  background:linear-gradient(180deg, var(--accent), var(--mint));
  border-radius:4px;
}
article h3{
  color:var(--accent-dark);
  font-weight:700;
  margin:1.5rem 0 0.7rem 0;
  font-size:1.1rem;
}
article p, article li{line-height:1.7;color:var(--card-text);opacity:0.85;font-size:0.98rem}
article ul{margin:0.5rem 0;padding-left:1.5rem}
article li{margin:0.4rem 0}
article a{color:var(--accent);text-decoration:none;font-weight:600;transition:color 0.2s}
article a:hover{color:var(--mint)}

.sidebar{
  padding:1.5rem;
  background:linear-gradient(135deg, rgba(0,168,150,0.08), rgba(93,219,180,0.08));
  border-radius:16px;
  border:2px solid rgba(0,168,150,0.15);
  position:relative;
}
.sidebar h3{
  margin:0 0 0.8rem 0;
  color:var(--accent-dark);
  font-weight:700;
  font-size:1.05rem;
}
.sidebar p{
  color:var(--card-text);
  opacity:0.85;
  line-height:1.6;
  font-size:0.95rem;
  margin:0 0 1.2rem 0;
}
.cta{margin-top:1.5rem}
.cta a{
  display:inline-block;
  padding:.8rem 1.3rem;
  border-radius:12px;
  background:linear-gradient(135deg,var(--accent),var(--mint));
  color:#fff;
  font-weight:700;
  text-decoration:none;
  box-shadow:0 4px 16px rgba(0,168,150,0.25);
  transition:all 0.25s ease;
  font-size:0.95rem;
}
.cta a:hover{
  transform:translateY(-3px);
  box-shadow:0 6px 24px rgba(0,168,150,0.4);
}

.foot{
  margin-top:2rem;
  text-align:center;
  color:rgba(255,255,255,0.6);
  font-size:0.9rem;
  padding:1rem;
}

@media (max-width:900px){
  body{padding:1rem;}
  .content-grid{grid-template-columns:1fr;}
  .hero-inner{flex-direction:column;align-items:flex-start;gap:1rem}
  .title-wrap h1{font-size:2.2rem;}
  .lang{width:100%;justify-content:flex-end;}
}

@media (max-width:500px){
  .title-wrap h1{font-size:1.8rem;}
  .hero{padding:1.5rem;}
  .content.card{padding:1.5rem;}
}

/* Animations */
.lang-btn{transition:all .25s cubic-bezier(0.4, 0, 0.2, 1)}
.cta a{transition:all .25s cubic-bezier(0.4, 0, 0.2, 1)}

@keyframes fadeIn{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}
}

.hero,.content.card{
  animation:fadeIn 0.6s ease-out;
}
.content.card{animation-delay:0.15s}