:root{
  --bg:#ffffff;
  --panel:#ffffff;
  --panel2: rgba(15,23,42,.04);
  --text:#0f172a;
  --muted: rgba(15,23,42,.66);
  --border: rgba(15,23,42,.12);
  --shadow: 0 22px 55px rgba(15,23,42,.10);
  --shadow2: 0 10px 26px rgba(15,23,42,.08);
  --r-xl: 26px;
  --r-lg: 20px;
  --r-md: 14px;
  --tap: 48px;
  --max: 1160px;
  --g1: .75rem;
  --g2: 1.05rem;
  --g3: 1.5rem;
  --accent1:#2563eb;
  --accent2:#06b6d4;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#070b14;
    --panel: rgba(255,255,255,.06);
    --panel2: rgba(255,255,255,.09);
    --text:#e8eefc;
    --muted: rgba(232,238,252,.72);
    --border: rgba(255,255,255,.12);
    --shadow: 0 20px 55px rgba(0,0,0,.45);
    --shadow2: 0 10px 26px rgba(0,0,0,.35);
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,"Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:
    radial-gradient(900px 520px at 12% -10%, color-mix(in oklab, var(--accent2), transparent 82%), transparent 55%),
    radial-gradient(900px 520px at 90% -10%, color-mix(in oklab, var(--accent1), transparent 84%), transparent 55%),
    var(--bg);
  line-height:1.6;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:var(--max);margin-inline:auto;padding-inline:clamp(1rem,4vw,1.8rem)}
header{
  position:sticky;top:0;z-index:50;
  backdrop-filter: blur(12px) saturate(160%);
  background: color-mix(in oklab, var(--bg), transparent 16%);
  border-bottom: 1px solid color-mix(in oklab, var(--border), transparent 10%);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 0;position:relative}
.brand{display:flex;align-items:center;gap:.75rem;min-width:0}
.brand-badge{
  width:44px;height:44px;border-radius: 16px;
  border:1px solid var(--border);
  background: color-mix(in oklab, var(--panel), transparent 0%);
  box-shadow: var(--shadow2);
  overflow:hidden;
}
.brand-badge img{width:100%;height:100%;object-fit:contain;padding:6px}
.brand-text{min-width:0}
.brand-name{font-weight:950;letter-spacing:.09em;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-tag{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.links{display:flex;align-items:center;gap:.15rem}
.links a{
  padding:.52rem .78rem;border-radius:999px;border:1px solid transparent;
  font-weight:750;font-size:.92rem;color:var(--muted)
}
.links a:hover{
  color:var(--text);
  border-color: color-mix(in oklab, var(--border), transparent 35%);
  background: color-mix(in oklab, var(--panel2), transparent 0%);
}
.menu-btn{
  width:var(--tap);height:var(--tap);
  display:grid;place-items:center;
  border-radius:999px;border:1px solid var(--border);
  background: color-mix(in oklab, var(--panel), transparent 0%);
  box-shadow: var(--shadow2);
  cursor:pointer;
}
.menu-btn svg{width:22px;height:22px}
@media (min-width: 920px){.menu-btn{display:none}}
@media (max-width: 919px){
  .links{
    position:absolute;left:0;right:0;top:calc(100% + 10px);
    display:grid;gap:.25rem;
    background: var(--bg);
    border:1px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--shadow);
    padding:.45rem;
    max-height:0;overflow:hidden;opacity:0;
    transition:max-height .22s ease, opacity .2s ease;
  }
  .links.open{max-height: 520px; opacity: 1;}
  .links a{padding:.9rem .95rem}
  .brand-tag{display:none}
}
.pill{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.28rem .75rem;border-radius:999px;
  border:1px solid color-mix(in oklab, var(--border), transparent 10%);
  background: color-mix(in oklab, var(--panel2), transparent 0%);
  color: color-mix(in oklab, var(--text), transparent 35%);
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:900;white-space:nowrap;
}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:var(--tap);
  padding:.88rem 1.15rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--panel), transparent 0%);
  box-shadow: var(--shadow2);
  font-weight:900;font-size:.95rem;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
  white-space:nowrap;
}
.btn:hover{transform: translateY(-1px); box-shadow: var(--shadow); opacity:.98}
.btn-primary{border-color:transparent;background:linear-gradient(135deg,var(--accent1),var(--accent2));color:#ffffff}
.btn-ghost{background: transparent}
section{padding-block: clamp(2.4rem, 5.2vw, 4.3rem); scroll-margin-top: 96px;}
.hero{padding-top: clamp(2.1rem, 5vw, 3.2rem);}
.hero-grid{display:grid;gap:clamp(1.6rem, 4vw, 2.8rem);grid-template-columns:minmax(0,1fr);align-items:center}
@media (min-width: 980px){.hero-grid{grid-template-columns:minmax(0,1.18fr) minmax(0,.92fr)}}
h1{margin:.65rem 0 .65rem;font-size:clamp(2.15rem,4.4vw,3.35rem);line-height:1.03;letter-spacing:-.025em}
.grad{background:linear-gradient(135deg,var(--accent1),var(--accent2));-webkit-background-clip:text;color:transparent}
.lead{max-width:44rem;color:var(--muted);font-size:1.03rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.15rem;align-items:stretch}
.mini{margin-top:.7rem;color:var(--muted);font-size:.9rem}
.profile{
  border-radius:var(--r-xl);border:1px solid var(--border);
  background:
    radial-gradient(600px 420px at 25% 0%, color-mix(in oklab, var(--accent2), transparent 78%), transparent 55%),
    color-mix(in oklab, var(--panel2), transparent 0%);
  box-shadow:var(--shadow);
  padding:.95rem;
  max-width:440px;margin-inline:auto;
}
.profile-media{border-radius:20px;overflow:hidden;border:1px solid color-mix(in oklab,var(--border), transparent 15%);background:color-mix(in oklab,var(--panel), transparent 0%)}
.profile-media img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center}
.profile-foot{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.85rem .2rem .2rem;color:var(--muted);font-size:.9rem}
.profile-foot strong{color:var(--text)}
.page-head{padding-top:1.6rem}
.section-head{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.35rem}
h2{margin:0;font-size:1.55rem;letter-spacing:-.015em}
.sub{margin:0;color:var(--muted);max-width:46rem;font-size:1rem}
.grid{
  display:grid;
  gap: var(--g2);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  align-items:stretch;
  grid-auto-rows: 1fr;
}
.card{
  border-radius:var(--r-xl);
  border:1px solid var(--border);
  background: color-mix(in oklab, var(--panel), transparent 0%);
  box-shadow:var(--shadow2);
  padding:1.1rem;
  display:flex;flex-direction:column;gap:.6rem;
  height:100%;
}
.card h3{margin:0;font-size:1.08rem;line-height:1.2;min-height:2.6rem}
.card p{margin:0;color:var(--muted);font-size:.94rem;flex:1}
.tagrow{display:flex;flex-wrap:wrap;gap:.42rem;margin-top:auto}
.tag{
  display:inline-flex;align-items:center;
  padding:.24rem .58rem;border-radius:999px;
  border:1px solid color-mix(in oklab,var(--border), transparent 18%);
  background: color-mix(in oklab,var(--panel2), transparent 0%);
  color: color-mix(in oklab, var(--text), transparent 38%);
  font-weight:900;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
}
.banner{
  border-radius:var(--r-xl);
  border:1px solid var(--border);
  background: color-mix(in oklab, var(--panel), transparent 0%);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.banner img{width:100%;height:auto;aspect-ratio:16/7;object-fit:cover;object-position:center}
.banner .banner-inner{padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.25rem}
.banner .banner-inner p{margin:.15rem 0 0;color:var(--muted)}
.contact{
  border-radius:var(--r-xl);
  border:1px solid var(--border);
  background: linear-gradient(135deg, color-mix(in oklab, var(--accent2), transparent 90%), color-mix(in oklab, var(--accent1), transparent 92%));
  box-shadow:var(--shadow);
  padding:1.2rem;
}
.contact-grid{display:grid;gap:1rem;grid-template-columns:1fr;align-items:stretch}
@media (min-width: 980px){.contact-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}}
.contact-item{
  display:flex;flex-direction:column;gap:.25rem;
  border-radius:var(--r-lg);
  border:1px solid var(--border);
  background: color-mix(in oklab, var(--panel), transparent 0%);
  padding:.95rem 1rem;
  box-shadow:var(--shadow2);
  height:100%;
}
.contact-item span:first-child{font-weight:950}
.contact-item span:last-child{color:var(--muted);font-size:.95rem}
iframe{display:block}
footer{padding:1.35rem 0 1.6rem;color:var(--muted);font-size:.9rem}
.foot{display:flex;flex-direction:column;gap:.65rem;align-items:center;text-align:center}
.social{display:flex;flex-wrap:wrap;gap:.85rem;justify-content:center}
.social a{opacity:.92}
.social a:hover{opacity:1;color:var(--text)}
@media (max-width: 640px){
  .hero-actions .btn{width:100%}
  h2{font-size:1.38rem}
}
@media (prefers-reduced-motion: reduce){
  *{transition-duration:.001ms!important;animation-duration:.001ms!important}
  html{scroll-behavior:auto}
}


/* ===== Menu redesign ===== */
.nav{gap: .85rem;}
.links a[aria-current="page"]{
  color: var(--text) !important;
  background: color-mix(in oklab, var(--panel2), transparent 0%) !important;
  border-color: color-mix(in oklab, var(--border), transparent 30%) !important;
}
.more{position:relative}
.more summary{
  list-style:none;
  padding:.52rem .78rem;
  border-radius:999px;
  border:1px solid transparent;
  font-weight:750;
  font-size:.92rem;
  color:var(--muted);
  cursor:pointer;
  user-select:none;
}
.more summary::-webkit-details-marker{display:none}
.more[open] summary{
  color: var(--text);
  border-color: color-mix(in oklab, var(--border), transparent 35%);
  background: color-mix(in oklab, var(--panel2), transparent 0%);
}
.more-menu{
  position:absolute;
  right:0;
  top: calc(100% + 10px);
  min-width: 210px;
  border-radius: 16px;
  border:1px solid var(--border);
  background: var(--bg);
  box-shadow: var(--shadow);
  padding: .35rem;
  display:grid;
  gap:.15rem;
  z-index: 60;
}
.more-menu a{
  padding:.75rem .85rem;
  border-radius: 12px;
  border: 1px solid transparent;
  color: var(--muted);
  font-weight: 750;
}
.more-menu a:hover{
  color: var(--text);
  border-color: color-mix(in oklab, var(--border), transparent 35%);
  background: color-mix(in oklab, var(--panel2), transparent 0%);
}

/* Mobile: show dropdown items as regular links (no absolute menu) */
@media (max-width: 919px){
  .more-menu{
    position:static;
    min-width:auto;
    border:none;
    box-shadow:none;
    padding:0;
    background:transparent;
  }
  .more summary{
    padding:.9rem .95rem;
    border-radius: 14px;
  }
  .more[open] summary{
    border-color: color-mix(in oklab, var(--border), transparent 30%);
  }
  .more-menu a{
    padding:.8rem .95rem;
    border-radius: 14px;
  }
}
/* ===== End menu redesign ===== */