:root{
    --bg:#0a3428;
    --paper:#f3f5ea;
    --ink:#0f3a2c;
    --leaf:#137a3d;
    --accent:#e57a00;

    --mega-w: 620px;          /* white card width */
    --mega-x: 0px;            /* JS sets this; left of card */
    --radius: 22px;
    --t-fast: 160ms;
    --t-slow: 320ms;
    --easing: cubic-bezier(.22,.8,.28,1);
  }

  /* Page scaffold */
  *{box-sizing:border-box}
  body{margin:0;background:#000;color:#fff;font:16px/1.4 Inter,system-ui,Segoe UI,Roboto,Arial}
  header.site-header{position:sticky;top:0;z-index:50;background:var(--bg)}
  .container{max-width:1200px;margin:0 auto;padding:16px 20px;position:relative}

  /* Top nav */
  .nav{display:flex;gap:40px;align-items:center;margin:0;padding:0;list-style:none}
  .nav>li{position:relative}
  .nav>li>a{
    display:block;padding:10px 2px;color:#cfe6da;text-decoration:none;font-weight:700;letter-spacing:.2px
  }
  .nav>li>a:hover{color:#fff}
  .nav>li>a::after{
    content:"";display:block;height:3px;border-radius:2px;background:transparent;
    transform-origin:left;transform:scaleX(.25);
    transition:transform var(--t-fast) ease, background var(--t-fast) ease
  }
  .nav>li.is-hot>a::after{background:var(--accent);transform:scaleX(1)}

  /* ===================== HOVER ZONE (no gap) ===================== */
  .hover-zone{
    position:absolute;left:0;right:0;top:100%;
    height:440px;                   /* large enough to include green panel */
    pointer-events:none;            /* only “on” when mega is open (JS toggles) */
  }
  .hover-zone.is-open{pointer-events:auto}

  /* Card + subpanel live inside the hover zone */
  .mega{
    position:absolute;
    /* the ZONE touches the bar; card sits lower for a visual gap */
    top:0;left:0;right:0;height:100%;
  }

  /* White card that slides under the hot item */
  .card{
    position:absolute;top:18px;            /* visual gap created here */
    left:var(--mega-x);
    width:var(--mega-w);
    background:var(--paper); color:var(--ink);
    border-radius:var(--radius);
    box-shadow:0 10px 28px rgba(0,0,0,.35);
    transform:translateX(-14px); opacity:0;
    transition:
      left var(--t-slow) var(--easing),
      transform var(--t-slow) var(--easing),
      opacity var(--t-slow) ease;
    overflow:visible;
  }
  .hover-zone.is-open .card{transform:none;opacity:1}

  .card-inner{padding:0 !important}
  .section{
    position:absolute; inset:0; padding:0; padding-right:0x; /* inner padding for layout */
    opacity:0; transform:translateY(6px);
    transition:opacity var(--t-slow) ease, transform var(--t-slow) var(--easing);
    pointer-events:none;
  }
  .section.is-active{opacity:1; transform:none; pointer-events:auto}

  .section h3{margin:0 0 10px 0;font-size:28px}
  .links{list-style:none;margin:12px 0 0 0;padding:0}
  .links li{margin:8px 0}
  .links a{
    display:block;text-decoration:none;color:#123e2e;
    font-size:26px;font-weight:800;letter-spacing:.2px;
    transition:opacity var(--t-slow) ease, transform var(--t-slow) var(--easing);
    opacity:.0; transform:translateX(-6px);
  }
  .section.is-active .links a{opacity:1; transform:none}
  .links a:hover{color:#081f18}

  /* Green subpanel – positioned INSIDE the hover-zone so no gap */
  .submenu{
    position:absolute;top:18px;left:calc(var(--mega-w) - 14px);  /* overlaps behind card edge */
    width:520px;min-height:calc(100% - 36px);
    background:var(--leaf); color:#e7f4ec; border-radius:var(--radius);
    padding:26px 26px 22px 26px;
    box-shadow:-10px 0 24px rgba(0,0,0,.25) inset;
    opacity:0; transform:translateX(-20px);
    transition:opacity var(--t-slow) ease, transform var(--t-slow) var(--easing);
    pointer-events:none;
  }
  .submenu.is-open{opacity:1; transform:none; pointer-events:auto}
  .submenu ul{list-style:none;margin:6px 0 0 0;padding:0;max-height:340px;overflow:auto}
  .submenu li{margin:8px 0}
  .submenu a{
    color:#eaf7ef;text-decoration:none;font-weight:700;font-size:22px;
    display:block;padding:10px 6px;border-radius:10px;
    transition:background var(--t-fast) ease, transform var(--t-fast) ease;
  }
  .submenu a:hover{background:rgba(255,255,255,.08);transform:translateX(2px)}

  /* Close area visual (page) */
  main{height:70vh;background:#000}