/* ==== Base / Theme ==== */
  :root{
    --bg:#071312;           /* near-black */
    --text:#e9f1ee;         /* light text */
    --muted:#b9c5c1;
    --accent:#ffd700;       /* yellow headings */
    --brand:#3bd783;        /* CTA green */
    --panel:#111a19;        /* dropdown bg */
    --line:#2a3a37;         /* divider */
  }
  html,body{margin:0}
  body{
    background:var(--bg);
    color:var(--text);
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    line-height:1.6;
  }
  *{box-sizing:border-box}
  img{max-width:100%;height:auto;display:block}

  .container{max-width:1200px;margin-inline:auto;padding-inline:20px}

  /* ==== Header (logo left, nav right) ==== */
  .site-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    padding:40px 20px;
  }
  .brand{
    display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--text);
  }
  .logo{width:120px;height:auto;border-radius:50%}

  /* ===== Menu using details/summary (click to open) ===== */
  nav[aria-label="Primary"]{flex:1}
  .menu{
    list-style:none;margin:0;padding:0;
    display:flex;justify-content:flex-end;align-items:center;gap:34px;
  }
  /* remove default marker on summary */
  summary{list-style:none}
  summary::-webkit-details-marker{display:none}

  /* top-level triggers */
  .menu details{
    position:relative;
  }
  .menu summary,
  .menu > li > a{
    color:#e7eee9;
    text-decoration:none;
    font-weight:700;
    letter-spacing:.01em;
    font-size:1.05rem;
    padding:.35rem .25rem;
    border-radius:8px;
    cursor:pointer;
    display:inline-flex;align-items:center;gap:.45ch;
  }
  .menu summary::after{content:"▾";opacity:.8;transform:translateY(-1px)}
  .menu summary:focus,
  .menu > li > a:focus{outline:2px solid #fff;outline-offset:3px}

  /* submenu panel */
  .submenu{
    position:absolute; top:calc(100% + .6rem); left:0;
    background:var(--panel);
    border:1px solid #23312e;
    border-radius:10px;
    box-shadow:0 10px 28px rgba(0,0,0,.35);
    min-width:240px;
    padding:.5rem 0;
    margin:0; list-style:none;
    opacity:0; visibility:hidden; transform:translateY(6px);
    transition:opacity .16s ease, transform .16s ease, visibility .16s linear;
    z-index:10;
  }
  /* open on click (no JS) */
  details[open] > .submenu{
    opacity:1; visibility:visible; transform:translateY(0);
  }
  .submenu a{
    display:block; padding:.55rem 1rem;
    text-decoration:none; color:#fff; font-weight:600;
  }
  .submenu a:hover, .submenu a:focus{background:#3bd783}

  /* keep last items inside viewport */
  .menu > li:last-child details .submenu,
  .menu > li:nth-last-child(2) details .submenu{ right:0; left:auto; }

  /* ==== Hero ==== */
  .hero{
    display:grid; grid-template-columns: 1.15fr 1fr;
    gap:2.2rem; align-items:center; margin-top:2.6rem;
  }
  .hero h1{
    color:var(--accent); font-size:3.1rem; line-height:1.15; margin:.2rem 0 1.1rem;
  }
  .hero p{color:var(--muted); font-size:1.05rem; max-width:58ch}
 /*
  .cta{
    display:inline-block; margin-top:1.2rem;
    background:var(--brand); color:#0b120f; text-decoration:none;
    font-weight:800; padding:.9rem 1.3rem; border-radius:9999px;
    box-shadow:0 6px 20px rgba(59,215,131,.25);
  }
  .cta:hover{filter:brightness(1.05)}
  .hero-card{background:#0e1716;border-radius:10px;padding:10px}
  */
  .cta { text-decoration:none; display:inline-block; background:#cc0000; color:#fff; padding:.9rem 1.4rem; border-radius:9999px; font-weight:700; }
  .cta:hover { background:#3bd783; }

  /* ==== Footer line ==== */
  .page-line{border:0;border-top:1px solid var(--line); margin:2.5rem 0 1rem}
  .copyright{color:#9fb1ac;text-align:center;font-size:.95rem;margin:0 0 2rem}

  /* ==== Responsive tweaks ==== */
  @media (max-width: 960px){
    .hero{grid-template-columns: 1fr; gap:1.4rem}
    .menu{gap:22px}
  }