:root{
    --bg:#ffffff; --fg:#0f172a; --muted:#475569;
    --brand:#0ea5e9;        /* cyan-500 */
    --brand-strong:#0284c7; /* sky-600 */
    --brand-weak:#e0f2fe;   /* sky-100 */
    --border:#e2e8f0; --card:#f8fafc; --header:#0b1220; --header-fg:#e2e8f0;
  }


  *{
    box-sizing:border-box
}

  html{
    font-family:system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    sans-serif
}

  body{
    margin:0;
    color:var(--fg);
    background:var(--bg);
    line-height:1.6
  }

  .container{
    max-width:1100px;
    margin:0 auto;
    padding:0 16px
  }
  
  /* Header / Nav */
  header{
    position:sticky;
    top:0;
    z-index:50;
    background:var(--header);
    color:var(--header-fg);
    border-bottom:1px solid rgba(255,255,255,.08)
  }

  .topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:12px 0
  }
  
  .brand{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:700;
    letter-spacing:.2px
  }

  .brand img{
    height: 40px
  }

  .nav{display:flex;gap:10px;flex-wrap:wrap}
  .nav a{color:var(--header-fg);text-decoration:none;padding:8px 10px;border-radius:8px}
  .nav a:hover{background:rgba(255,255,255,.06)}
  .nav a.active,.nav a[aria-current="page"]{background:rgba(14,165,233,.18);color:#fff}
  .menu-toggle{display:none;background:none;border:0;color:var(--header-fg);font-size:1.05rem}
  
  /* Mobile nav */
  @media (max-width: 760px){
    .nav{display:none;flex-direction:column;padding:10px 0;border-top:1px solid rgba(255,255,255,.08)}
    .nav.open{display:flex}
    .menu-toggle{display:block}
  }
  
  /* Hero */
  .hero{
    position:relative;
    border-radius:16px;
    overflow:hidden;
    margin:24px 0;
    min-height:340px;
    display:grid;
    place-items:center;
    text-align:center;
    color:#fff;
    background:#0b1220;
  }
  .hero::before{
    content:"";position:absolute;inset:0;
    background:url('assets/images/hero.jpg') center/cover no-repeat;
    filter:brightness(.6)
  }
  .hero::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,.01), rgba(0,0,0,.01))
  }
  .hero > .inner{position:relative;z-index:1;padding:48px 18px}
  .hero h1{font-size:clamp(1.6rem,4vw,2.6rem);margin:0 0 10px}
  .hero p{margin:0 auto 18px;max-width:750px;color:#e5f6ff}
  
  /* Buttons */
  .btn{display:inline-block;padding:10px 16px;border-radius:12px;border:1px solid transparent;
    text-decoration:none;font-weight:600}
  .btn-primary{background:var(--brand);color:#fff;border-color:var(--brand)}
  .btn-primary:hover{background:var(--brand-strong);border-color:var(--brand-strong)}
  .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
  .btn-ghost:hover{background:rgba(255,255,255,.12)}
  
  /* Sections / cards */
  main{padding:26px 0}
  .section{margin:32px 0}
  .section h2{margin:0 0 12px}
  .grid{display:grid;gap:16px;grid-template-columns:repeat(3,minmax(0,1fr))}
  @media (max-width: 960px){ .grid{grid-template-columns:repeat(2,1fr)} }
  @media (max-width: 640px){ .grid{grid-template-columns:1fr} }
  .card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:18px}
  .card h3{margin-top:0}
  
  /* Info strip */
  .infostrip{
    background:var(--brand-weak);
    border:1px solid var(--border);
    border-radius:12px;
    padding:16px;
    display:flex;
    gap:16px;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    margin: 0 auto;
    max-width: 960px;
  }
  
  /* Footer */
  footer{border-top:1px solid var(--border);color:var(--muted);padding:18px 0;margin-top:40px}
  footer a{color:inherit}
  
  /* Forms */
  form{display:grid;gap:14px;max-width:560px}
  label span{display:inline-block;margin-bottom:6px;font-weight:600}
  input,textarea,button{font:inherit}
  input,textarea{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:10px}
  textarea{min-height:140px;resize:vertical}
  button{padding:10px 14px;border:1px solid var(--brand);color:#fff;background:var(--brand);border-radius:10px;cursor:pointer}
  button:hover{filter:brightness(.95)}
  .small{font-size:.925rem;color:var(--muted)}
  .visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}