:root{
  
  --bg:#F5F3EE;
  --bg-grad: radial-gradient(1100px 560px at 50% -12%, rgba(31,59,99,0.06), transparent 60%);
  --panel:#FFFFFF;
  --panel-2:#EEEAE0;
  --line:#DED8C8;
  --ink:#16233A;
  --primary:#1F3B63;
  --primary-dim:#B7C3D4;
  --accent:#A9772F;
  --text:#1B1B1E;
  --muted:#5B5A52;
  --shadow: 0 8px 24px rgba(22, 35, 58, 0.07);
  --radius: 14px;
  --radius-sm: 9px;
}

[data-theme="dark"]{
  --bg:#0F1622;
  --bg-grad: radial-gradient(1100px 560px at 50% -12%, rgba(169,119,47,0.08), transparent 60%);
  --panel:#161F2E;
  --panel-2:#1D2739;
  --line:#2C3A50;
  --ink:#EDEAE1;
  --primary:#7C9BC9;
  --primary-dim:#33455F;
  --accent:#D6A75B;
  --text:#EDEAE1;
  --muted:#9BA3B4;
  --shadow: 0 8px 24px rgba(0,0,0,0.35);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background-color:var(--bg);
  background-image:var(--bg-grad);
  background-attachment:fixed;
  color:var(--text);
  font-family:'Plus Jakarta Sans',sans-serif;
  line-height:1.6;
  transition:background-color .25s, color .25s;
}
h1,h2,h3,h4{font-family:'Space Grotesk',sans-serif; letter-spacing:-0.01em; color:var(--ink); font-weight:600;}
a{color:inherit;}
img{max-width:100%; display:block;}

nav{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:1120px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 32px; gap:20px;
}

.brand-lockup{display:flex; align-items:center; gap:14px; flex-shrink:0;}
.logo-slot{display:flex; align-items:center;}
.logo-slot img{display:block; width:auto; object-fit:contain;}
.logo-cdm{height:38px;}
.logo-cdm img{height:100%;}
.logo-udg{height:26px; opacity:0.9;}
.logo-udg img{height:100%;}
.brand-divider{width:1px; height:26px; background:var(--line);}

.navlinks{display:flex; gap:4px; flex-wrap:wrap; justify-content:center; flex:1;}
.navlinks > .navitem{position:relative;}
.tab-btn{
  background:none; border:1px solid transparent; cursor:pointer; color:var(--muted);
  font-size:0.9rem; padding:9px 15px; border-radius:8px; font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:500; transition:.15s;
}
.tab-btn:hover{color:var(--ink); background:var(--panel-2);}
.tab-btn.active{color:#fff; background:var(--primary);}

.dropdown{
  display:none; position:absolute; top:calc(100% + 10px); left:0; min-width:240px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-sm); padding:8px;
  box-shadow:var(--shadow); z-index:70;
}
.navitem:hover .dropdown, .navitem.open .dropdown{display:block;}
.dropdown button{
  display:flex; flex-direction:column; align-items:flex-start; gap:2px; width:100%;
  background:none; border:none; color:var(--text); text-align:left; padding:10px 12px;
  border-radius:8px; cursor:pointer; font-family:'Plus Jakarta Sans',sans-serif; font-size:0.86rem;
}
.dropdown button:hover{background:var(--panel-2);}
.dropdown button .d-sub{color:var(--muted); font-size:0.76rem;}

.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:4px;
  width:38px; height:38px; border-radius:8px; border:1px solid var(--line);
  background:var(--panel); cursor:pointer; flex-shrink:0;
}
.nav-toggle span{display:block; width:16px; height:2px; background:var(--ink); margin:0 auto;}

.nav-right{position:relative; flex-shrink:0;}
#settings-toggle{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line);
  background:var(--panel); color:var(--text); cursor:pointer; font-size:1rem;
}
#settings-panel{
  display:none; position:absolute; right:0; top:calc(100% + 10px); width:290px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:18px;
  box-shadow:var(--shadow); z-index:80;
}
#settings-panel.open{display:block;}
#settings-panel h4{margin:0 0 12px; font-size:0.92rem; font-family:'Plus Jakarta Sans',sans-serif; font-weight:600; color:var(--text);}
.pref-row{display:flex; align-items:center; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--line);}
.pref-row:last-child{border-bottom:none;}
.pref-row .label{font-size:0.85rem; font-weight:500;}
.pref-row .sub{color:var(--muted); font-size:0.74rem; margin-top:2px;}
.seg{display:flex; border:1px solid var(--line); border-radius:999px; overflow:hidden;}
.seg button{border:none; background:var(--panel-2); color:var(--muted); padding:6px 12px; font-size:0.76rem; cursor:pointer; font-family:'Plus Jakarta Sans',sans-serif;}
.seg button.active{background:var(--primary); color:#fff;}
.switch{width:40px; height:22px; border-radius:11px; background:var(--panel-2); border:1px solid var(--line); position:relative; cursor:pointer; flex-shrink:0;}
.switch .dot{position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:var(--muted); transition:.2s;}
.switch.on{background:var(--primary-dim);}
.switch.on .dot{left:20px; background:var(--primary);}
#settings-panel select{width:100%; padding:8px 10px; border-radius:8px; border:1px solid var(--line); background:var(--bg); color:var(--text); font-size:0.82rem;}

main{max-width:1120px; margin:0 auto; padding:0 32px;}
.view{display:none; padding:48px 0 90px;}
.view.active{display:block;}

.section-head{max-width:600px; margin:0 auto 36px; text-align:center;}
.eyebrow{
  color:var(--accent); font-size:0.78rem; margin:0 0 8px; font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:600;
}
.section-head h2{font-size:clamp(1.5rem,2.6vw,2rem); margin:0 0 10px;}
.section-head p{color:var(--muted); margin:0;}

footer{padding:44px 0; text-align:center; color:var(--muted); font-size:0.85rem; border-top:1px solid var(--line);}

@media (max-width:900px){
  .navlinks{
    display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column;
    background:var(--panel); border-bottom:1px solid var(--line); padding:10px 20px; gap:2px;
    box-shadow:var(--shadow);
  }
  .navlinks.open{display:flex;}
  .navitem{width:100%;}
  .tab-btn{display:block; width:100%; text-align:left; border-radius:6px;}
  .dropdown{position:static; box-shadow:none; border:none; padding:0 0 0 12px; display:none;}
  .navitem.open .dropdown{display:block;}
  .nav-toggle{display:flex;}
}

@media (max-width:520px){
  .nav-inner{padding:10px 18px;}
  main{padding:0 18px;}
  .logo-cdm{height:30px;}
  .logo-udg{height:20px;}
}