@charset "utf-8";
/* CSS Document */

	:root{
	  	--bg:#0b1220; 
		--bg-2:#102c4e; 
		--card:#101a2c; 
		--ink:#071425; 
		--ink-dim:#c9d2e3;
	  	--brand:#ffbf2e; 
		--brand-ink:#0a2342; 
		--accent:#ffcc33; 
		--text:#e8f2ff;
	  	--accent-dark:#e0ae00; 
		--muted:#b9eeff; 
		--radius:16px; 
		--shadow:0 10px 30px rgba(0,0,0,.25);
	}

    *{box-sizing:border-box}
	html,body{height:100%;margin:0;}
	body{font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, sans-serif; 
		color:var(--text); 
		background: radial-gradient(circle, #3f3119, #31241a);
      	line-height:1.6;
	}
	img{max-width:100%; height:auto; display:block}
    a{color:var(--accent); text-decoration: none}
    a:hover{ text-decoration: underline }
	.container{max-width:1100px; margin-inline:auto; padding:clamp(12px,2vw,24px)}

    /* Top bar */
	.site-header{
      position: sticky; top:0; z-index:1000;
      background: linear-gradient(#7b6e5ee3, #a39987e3); /*linear-gradient(180deg, var(--bg-2), rgba(16,44,78,.8));*/
      backdrop-filter: blur(6px);
      border-bottom: 1px solid rgba(255,255,255,.06);
	}
    .nav{
      max-width:1100px; margin:auto; padding:.75rem 1rem;
      display:flex; align-items:center; justify-content:space-between;
      gap:1rem;
    }
    .brand{
      display:flex; align-items:center; gap:.75rem; color:var(--text);
      font-weight:700; letter-spacing:.3px;
    }
    .brand img{width:90px; height:90px; object-fit:contain}
    .nav-links{
      display:flex; align-items:center; gap:1rem;
    }
    .nav-links a{
      color:var(--muted); padding:.4rem .7rem; border-radius:8px;
    }
    .nav-links a[aria-current="page"], .nav-links a:hover{
      color:var(--ink); background:var(--accent);
    }
    .burger{display:none; background:none; border:0; color:var(--text); font-size:1.4rem}
	.site-footer{border-top:1px solid rgba(255,255,255,.08); margin-top:48px; background: linear-gradient(#6b5c4be3, #615242e3);}
	.footer-nav a{margin-right:14px}
	.container{max-width:1100px; margin-inline:auto; padding:clamp(12px,2vw,24px)}
hr { border-top: 1px solid rgb(255 255 255 / 20%); }

/*popup*/
#popup { height : 250px; }
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}
/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}
.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}
/* mobile */

    @media (max-width: 820px){
      .burger{display:block}
      .nav-links{
        position:fixed; inset:64px 0 auto 0; background:var(--bg-2);
        border-bottom:1px solid rgba(255,255,255,.06);
        padding:1rem; display:none; flex-direction:column; gap:.5rem;
      }
      .nav-links.open{display:flex}
	  .modal-content {
		width: 100%;
	  }
    }

@media screen and (min-width: 600px) {
	#logosm{display: inline;}
	#logolg{display: none;}
	#herotitle{transform: translate(0, 150%); margin: 40px auto;}
	#herotitle h1{font-size: 40px; line-height: 54px;}
	#herotext{transform: translate(0, 25%); margin: 40px; width: 66%;}
}
/* tablet */
@media screen and (min-width: 768px) {
	#logosm{display: inline;}
	#logolg{display: none;}
	#herotitle{transform: translate(0, 100%); margin: 20px auto;}
	#herotitle h1{font-size: 70px; line-height: 85px;}
	#herotext{transform: translate(0, 50%); margin: 80px; width: 66%;}
}
/* desktop */
@media screen and (min-width: 1024px) {
	#logosm{display: none;}
	#logolg{display: inline;}
	#herotitle{transform: translate(0, 75%); margin: 0 auto;}
	#herotitle h1{font-size: 90px; line-height: 108px;}
	#herotext{transform: translate(0, 75%); margin: 100px; width: 66%;}
}
