:root{
  --bg:#F7F3EC;
  --ink:#0f1a1c;
  --muted:#5f6b72;
  --sand:#E8D8BE;
  --teal:#15878C;
  --sea:#0E6B70;
  --white:#fff;
  --card:#ffffff;
  --shadow: 0 6px 28px rgba(0,0,0,.12);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;color:var(--ink);background:linear-gradient(180deg,#F7F3EC 0%, #F3EFE8 100%);}
a{color:var(--sea);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1080px;margin:0 auto;padding:20px}
header.site-top{position:sticky;top:0;background:rgba(247,243,236,.9);backdrop-filter:saturate(180%) blur(6px);border-bottom:1px solid rgba(0,0,0,.06);z-index:50}
.nav{margin-left:auto;display:flex;gap:18px;align-items:center}
.nav a{font-weight:600}
.brand span{font-weight:800;letter-spacing:.2px}
.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:start;margin-top:22px}
.card{background:var(--card);border:1px solid rgba(0,0,0,.08);border-radius:16px;box-shadow:var(--shadow);padding:18px}
.badge{display:inline-flex;gap:8px;align-items:center;background:#e8faf9;border:1px solid #c9efee;color:#0e6b70;font-weight:600;border-radius:999px;padding:6px 12px;font-size:12px}
h1{font-size:clamp(26px,3.6vw,44px);line-height:1.06;margin:10px 0 8px}
.sub{color:#365155;font-weight:600;margin-bottom:10px}
.video{position:relative;width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;border:1px solid rgba(0,0,0,.08)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:12px;padding:12px 16px;font-weight:700;border:1px solid transparent;cursor:pointer}
.btn.primary{background:var(--teal);color:#fff}
.btn.secondary{background:#fff;border-color:#cfd8dc;color:#0e6b70}
.btn.ghost{background:transparent;border-color:#cfd8dc;color:#0e6b70}
.grid{display:grid;gap:16px}
.grid.two{grid-template-columns:repeat(2,1fr)}
.grid.three{grid-template-columns:repeat(3,1fr)}
footer{margin-top:48px;padding:24px 0;color:#54656a;border-top:1px solid rgba(0,0,0,.08)}
footer a{color:#54656a}
.form{display:grid;gap:10px}
.form label{font-weight:600}
.form input:not([type=checkbox]):not([type=radio]), .form textarea, .form select{width:100%;padding:12px 14px;border-radius:12px;border:1px solid #cfd8dc;background:#fff}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form .checks{display:grid;gap:8px}
.form .checkline{display:flex;gap:10px;align-items:flex-start;justify-content:flex-start;text-align:left}
.form .checkline input{margin:3px 0 0 0;flex:0 0 auto}
.notice{font-size:13px;color:#55676d}
.small{font-size:12px;color:#6b7c85}
.flag{display:flex;gap:12px;align-items:flex-start;background:#f8fffc;border:1px solid #dff2ea;border-radius:16px;padding:14px}
.flag .icon{flex:0 0 auto;width:28px;height:28px;border-radius:10px;background:#15878C;display:grid;place-items:center;color:#fff}
.flag p{margin:0}
.lang-toggle{margin-left:12px;border:1px solid #cfd8dc;border-radius:999px;overflow:hidden}
.lang-toggle button{padding:6px 10px;border:none;background:#fff;color:#0e6b70;font-weight:700;cursor:pointer}
.lang-toggle button.active{background:#15878C;color:#fff}
@media (max-width: 980px){
  .hero{grid-template-columns:1fr;gap:16px}
  .nav{display:none}
}
main{padding-top:14px}
.section{margin-top:18px}
.list{margin:0;padding-left:18px}
.prose{display:grid;gap:16px}
.prose .card{padding:18px}
.textarea-modern{background:#fbfefc;border:1px solid #dff2ea;border-radius:12px;padding:12px 14px;width:100%;box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);transition: box-shadow .15s ease, border-color .15s ease}
.textarea-modern:focus{outline:none;border-color:#15878C;box-shadow:0 0 0 3px rgba(21,135,140,.18), inset 0 1px 0 rgba(255,255,255,0.6)}