:root{
      --accent:#0066cc;
      --muted:#6b7280;
      --bg:#f6f8fb;
      --card:#ffffff;
      --glass: rgba(255,255,255,0.6);
      --radius:12px;
      --max-width:1200px;
      --shadow: 0 6px 18px rgba(16,24,40,0.08);
      --nav-height:64px;
      --sidebar-width:56px;
    }
    *{box-sizing:border-box}
    body{font-family:Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; margin:0; background:var(--bg); color:#0f172a;}

    /* NAVBAR */
    header.nav{position:fixed; top:0; left:0; right:0; height:var(--nav-height); background:linear-gradient(90deg, rgba(255,255,255,0.8), rgba(255,255,255,0.6)); display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow); z-index:60; backdrop-filter: blur(6px);}
    .nav-inner{width:100%; max-width:var(--max-width); display:flex; align-items:center; gap:18px; padding:0 18px;}
    .brand{font-weight:700; font-size:1.05rem; color:var(--accent)}
    nav ul{display:flex; gap:12px; list-style:none; margin:0; padding:0; align-items:center}
    nav li a{padding:8px 12px; border-radius:8px; text-decoration:none; color:inherit; font-weight:600}
    nav li a.active{background:var(--accent); color:white}

    /* Search */
    .search-wrap{margin-left:auto; display:flex; gap:8px; align-items:center}
    .search-wrap input{padding:8px 12px; border-radius:8px; border:1px solid #e6edf3; min-width:220px}
    .search-wrap button{padding:8px 12px; border-radius:8px; border:none; background:var(--accent); color:white; font-weight:600; cursor:pointer}
    .search-wrap .reset{background:transparent; border:1px solid #e6edf3; color:var(--muted)}

    /* LAYOUT */
    .page{display:flex; gap:16px; max-width:var(--max-width); margin:calc(var(--nav-height) + 16px) auto 48px; padding:0 18px;}

    /* SOCIAL SIDEBAR (left) */
    .social-sidebar{position:fixed; left:14px; top:calc(var(--nav-height) + 80px); width:var(--sidebar-width); display:flex; flex-direction:column; gap:12px; z-index:50}
    .social-icon{width:44px; height:44px; border-radius:10px; background:var(--card); display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow); cursor:pointer}
    .social-icon svg{width:20px; height:20px}

    /* HERO (left column) */
    .left-col{width:48%; min-width:320px; position:sticky; top:calc(var(--nav-height) + 24px); height:calc(100vh - var(--nav-height) - 48px); align-self:flex-start; display:flex; align-items:center}
    .hero-card{background:linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.7)); border-radius:var(--radius); padding:36px; box-shadow:var(--shadow); width:100%;}
    .hero-eyebrow{font-weight:700; color:var(--accent); font-size:0.92rem}
    h1.hero{font-size:2.1rem; margin:8px 0 12px}
    p.lead{color:var(--muted); line-height:1.5}
    .hero-actions{margin-top:20px; display:flex; gap:12px}
    .btn{padding:10px 14px; border-radius:10px; border:none; cursor:pointer; font-weight:700}
    .btn.primary{background:var(--accent); color:white}
    .btn.ghost{background:transparent; border:1px solid #e6edf3}

    /* RIGHT (scrollable list of cards) */
    .right-col{flex:1; min-width:320px; max-height:calc(100vh - var(--nav-height) - 48px); overflow:auto; padding:6px 0}
    .cards{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:16px;}
    .card{background:var(--card); border-radius:12px; box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column}
    .card img{width:100%; height:150px; object-fit:cover}
    .card-body{padding:14px; display:flex; flex-direction:column; gap:8px}
    .card h3{margin:0; font-size:1.05rem}
    .card p{margin:0; color:var(--muted); font-size:0.94rem}
    .card .card-row{display:flex; justify-content:space-between; align-items:center; margin-top:10px}
    .visit-btn{padding:8px 12px; border-radius:8px; border:none; background:var(--accent); color:white; cursor:pointer}

    /* ABOUT / CONTACT views */
    .panel{background:var(--card); border-radius:12px; padding:20px; box-shadow:var(--shadow);}
    .team-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:12px; margin-top:12px}
    .member{padding:12px; border-radius:10px; background:linear-gradient(180deg, #fff, #fbfdff); text-align:center}

    /* CONTACT FORM */
    .form-row{display:flex; gap:12px}
    .form-row .col{flex:1}
    input[type=text], input[type=email], textarea{width:100%; padding:10px; border-radius:8px; border:1px solid #e6edf3}
    textarea{min-height:120px; resize:vertical}

    /* small screens */
    @media (max-width:900px){
      .page{flex-direction:column}
      .left-col{position:relative; width:100%; height:auto}
      .right-col{max-height:none}
      .social-sidebar{display:none}
      .search-wrap input{min-width:120px}
    }