:root {





  --ink: #ffffff;





  --muted: #cbd5e1;





  --line: rgba(255, 255, 255, 0.12);





  --brand: #d4af37;





  --brand2: #f2c94c;





  --surface: #111111;





  --surface2: #141414;





  --radius: 14px;





  --shadow: 0 12px 28px rgba(0, 0, 0, 0.45);





}





* { margin: 0; padding: 0; box-sizing: border-box; }








  body {


  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;





  line-height: 1.7;





  color: var(--ink);





  /* INDEX BACKGROUND — applied to ALL pages */





  background:








    radial-gradient(1200px 600px at 15% 20%, rgba(212,175,55,0.10), transparent 60%),








    radial-gradient(900px 500px at 85% 30%, rgba(242,201,76,0.08), transparent 55%),








    linear-gradient(180deg, #0b0b0b 0%, #0a0a0a 50%, #090909 100%);








}

















a { color: inherit; text-decoration: none; }








.muted { color: var(--muted); }

















.wrap {








  max-width: 1100px;








  margin: 0 auto;








  padding: 0 2rem;








}








/* Inter Regular (400) */


@font-face {


  font-family: 'Inter';


  font-style: normal;


  font-weight: 400;


  font-display: swap;


  src: url('/assets/fonts/inter/inter-v20-latin-regular.woff2') format('woff2'),


       url('/assets/fonts/inter/inter-v20-latin-regular.woff') format('woff');


}





@font-face {


  font-family: 'Inter';


  font-style: normal;


  font-weight: 500;


  font-display: swap;


  src: url('/assets/fonts/inter/inter-v20-latin-500.woff2') format('woff2'),


       url('/assets/fonts/inter/inter-v20-latin-500.woff') format('woff');


}








@font-face {


  font-family: 'Inter';


  font-style: normal;


  font-weight: 600;


  font-display: swap;


  src: url('/assets/fonts/inter/inter-v20-latin-600.woff2') format('woff2'),


       url('/assets/fonts/inter/inter-v20-latin-600.woff') format('woff');


}





@font-face {


  font-family: 'Inter';


  font-style: normal;


  font-weight: 700;


  font-display: swap;


  src: url('/assets/fonts/inter/inter-v20-latin-700.woff2') format('woff2'),


       url('/assets/fonts/inter/inter-v20-latin-700.woff') format('woff');


}





.center { text-align: center; margin-top: 2rem; }





/* Navbar */








.navbar {





  display: flex;





  align-items: center;





  justify-content: space-between;





  position: sticky;





  top: 0;





  z-index: 1000;


  


  min-height: 64px;   /* ADD THIS */





  padding: 1rem 2rem;





  background: rgba(0, 0, 0, 0.80);





  border-bottom: 1px solid var(--line);





  backdrop-filter: blur(8px);





}








.logo {








  font-size: 1.35rem;








  font-weight: 700;








  letter-spacing: 0.3px;








  background: linear-gradient(90deg, var(--brand2), var(--brand));








  -webkit-background-clip: text;








  -webkit-text-fill-color: transparent;








}








.logo {


  display: inline-flex;


  align-items: center;


  gap: 0.35rem;


}





.logo-mark {


  width: 22px;


  height: 22px;


  margin-top: 1px; /* optional but recommended */


}











.nav { display: flex; align-items: center; gap: 1rem; }

















.nav-links {








  list-style: none;








  display: flex;








  gap: 1.2rem;








}

















.nav-links a {








  font-weight: 600;








  color: rgba(255,255,255,0.92);








  padding: 0.35rem 0.45rem;








  border-radius: 10px;








}

















.nav-links a:hover {








  background: rgba(255,255,255,0.04);








  color: #fff;








}

















.nav-links a.active {








  background: rgba(212,175,55,0.10);








  border: 1px solid rgba(212,175,55,0.22);








  color: #fff;








}








/* Burger */





.burger {





  display: none;


  font-size: 1.5rem;


  color: #fff;


  background: none;


  border: none;


  cursor: pointer;





}





/* Hero (transparent so background stays identical everywhere) */





.hero {


 





  padding: 6rem 1.25rem 3rem; /* reduce huge side padding on mobile */


  padding-top: 6rem;


  padding-bottom: 4rem;


  display: flex;


  align-items: center;


  justify-content: center;





  text-align: center;


  background: transparent;


}





.hero--compact { min-height: 44vh; }








.hero-text {


  max-width: 900px;


  min-height: 360px;


}








.hero-text h2 { min-height: 2.6em; }


.hero-text p  { min-height: 2.2em; }











.hero h1 {


  margin-bottom: 1.25rem;


  font-size: clamp(1.9rem, 3vw, 2.4rem);


  line-height: 1.2;


  letter-spacing: -0.3px;


}








.hero h2 {


  min-height: 2.6em;


  font-size: clamp(1.4rem, 2.2vw, 1.8rem);


  line-height: 1.25;


  letter-spacing: -0.2px;


  margin: 0;


}








.hero p {





  min-height: 2.8em;  /* adjusts for 1.1rem and line-height */


  margin-top: 1rem;





  color: var(--muted);





  font-size: 1.1rem;





}





.hero-actions,








.cta-actions {








  margin-top: 1.6rem;








  display: flex;








  gap: 0.8rem;








  justify-content: center;








  flex-wrap: wrap;








}





/* Sections */





.section {


  padding: 4.5rem 0;


  text-align: center;


}





.section h2 {








  font-size: clamp(1.4rem, 2.6vw, 2rem);








  margin-bottom: 1rem;








  letter-spacing: -0.2px;








}

















.section p {








  max-width: 85ch;








  margin: 0.75rem auto 0;








  padding: 0 1rem;








}





/* Grid + cards */





.service-grid {





  display: grid;


  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));


  gap: 1.25rem;


  margin-top: 2.2rem;


}





.card {








  background: linear-gradient(180deg, var(--surface2), var(--surface));








  border: 1px solid var(--line);








  border-radius: var(--radius);








  padding: 1.6rem 1.5rem;








  box-shadow: 0 10px 24px rgba(0,0,0,0.35);








  text-align: left;








}





.card h3 {


  font-size: 1.1rem;


  margin-bottom: 0.45rem;


  letter-spacing: -0.1px;


}





.card p {


  margin: 0;


  color: var(--muted);


}





.card ul {


  margin-top: .9rem;


  padding-left: 1.1rem;


  color: var(--muted);


  line-height: 1.8;


}





.card li { margin: .35rem 0; }





/* Buttons */








.btn {


  display: inline-flex;


  align-items: center;


  justify-content: center;





  min-height: 48px;


  min-width: 150px;            /* 🧩 Reserve space horizontally */


  padding: 0 1.25rem;





  line-height: 1;


  font-size: 1rem;


  font-weight: 700;


  white-space: nowrap;





  border-radius: 999px;


  border: 1px solid transparent;


  background: linear-gradient(135deg, var(--brand), var(--brand2));


  color: #111;


  box-shadow: var(--shadow);


  transition: transform 0.15s ease, filter 0.15s ease;


}








.btn:hover {








  transform: translateY(-1px);








  filter: brightness(1.03);








}

















.btn.outline {








  background: transparent;








  color: var(--brand2);








  border: 1px solid rgba(212,175,55,0.35);








  box-shadow: none;








}

















.btn.outline:hover { background: rgba(212,175,55,0.08); }

















/* Footer */








.footer {











  border-top: 1px solid var(--line);








  padding: 2rem 1rem;








  text-align: center;








  color: rgba(203, 213, 225, 0.85);








  background: rgba(0,0,0,0.60);








}

















.footer a { color: var(--brand2); }








.footer a:hover { text-decoration: underline; }





.footer p {


  text-align: center;


  margin: 0 auto;


}














/* Mobile nav */





























body {


  font-size: 16px;


}





.hero {


  min-height: 100svh;


}





@supports not (height: 100svh) {


  .hero {


    min-height: 100vh;


  }


}





.nav-links {


  top: 100%;


}





.nav-links a {


  padding: 0.5rem 0.75rem;


}





.footer {


  text-align: center;


}





.btn {


  will-change: transform;


}


































































































@media (max-width: 480px) {





  .burger{


  display: inline-flex;


  width: 44px;


  height: 44px;


  align-items: center;


  justify-content: center;


}








 .logo-mark {


    width: 20px;


    height: 20px;


  }








 .nav-links{


  position: absolute;


  right: 2rem;


  top: 100%;


  width: 220px;





  display: flex;              /* was none */


  flex-direction: column;


  gap: 0.2rem;





  background: rgba(17,17,17,0.96);


  border: 1px solid var(--line);


  border-radius: 14px;


  padding: 0.75rem;


  box-shadow: var(--shadow);





  /* prevent layout shift */


  visibility: hidden;


  opacity: 0;


  pointer-events: none;


  transform: translateY(-6px);


  transition: opacity 160ms ease, transform 160ms ease;


}





.nav-links.active{


  visibility: visible;


  opacity: 1;


  pointer-events: auto;


  transform: translateY(0);


}





  .nav-links.active { display: flex; }





  .nav-links a { padding: 0.65rem 0.6rem; }





}








h1 {


 


  font-size: 2.5rem;


  line-height: 1.15;





}





/* 1. Improve paragraph readability on mobile */


.section p {


  text-align: left;


}





/* 2. Explicit mobile font-size assurance */


@media (max-width: 480px) {


  body {


    font-size: 16px;


  }


}





/* 3. Improve mobile nav tap targets */


@media (max-width: 820px) {


  .nav-links a {


    padding: 0.75rem 0.75rem;


  }


}











/* === POLEIS Shield header logo === */





.nav-inner {


  display: flex;


  align-items: center;


  justify-content: space-between;


}





.site-logo {


  height: 42px;


  width: auto;


  display: block;


}

















/* Legal pages: readable boxed content */


main.legal-page {


  padding: 3rem 1rem;


}





main.legal-page .legal-box {


  max-width: 900px;


  margin: 0 auto;


  padding: 2rem 2.5rem;


  background: #000;


  color: #fff;


  border: 1px solid #222;


  border-radius: 10px;


  box-shadow: 0 8px 24px rgba(0,0,0,.60);


  text-align: left;


  font-size: 16px;


  line-height: 1.6;


}








main.legal-page .legal-box h2,


main.legal-page .legal-box h3 {


  color: #fff;


}





main.legal-page .legal-box a {


  color: #f5c400; /* matches your POLEIS gold */


}








main.legal-page .legal-box p {


  margin: 0 0 1rem 0;


}





main.legal-page .legal-box ul,


main.legal-page .legal-box ol {


  margin: 0 0 1rem 0;


  padding-left: 1.25rem;


}





main.legal-page .legal-box a {


  color: inherit;


  text-decoration: underline;


}