@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700&display=swap');

:root{
  --accent:#7b2fff;
  --accent2:#00c8ff;
  --muted:#2e2e2e;
  --text:#e0e0e0;
  --radius:14px;
  --gap:1.25rem;
  font-family:"Baloo 2","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}

body {
  position:relative;
  background:
    linear-gradient(135deg,#00cfff 0%,#009dff 25%,#007bff 50%,#005eff 75%,#0044ff 100%),
     repeating-linear-gradient(0deg,rgba(255,255,255,0.05) 0px,rgba(255,255,255,0.05) 1px,transparent 1px,transparent 20px),
     repeating-linear-gradient(90deg,rgba(255,255,255,0.05) 0px,rgba(255,255,255,0.05) 1px,transparent 1px,transparent 20px);
  background-blend-mode:overlay;
  background-attachment:fixed;
  color:var(--text);
  line-height:1.6;
  padding:2rem;
  font-size:16px;
}

body::before {
  content:"";
  position:fixed;
  top:0; left:0;
  width:100%; height:100%;
  pointer-events:none;
  z-index:0;
  background-image:radial-gradient(rgba(255,255,255,0.6) 1px, transparent 1px);
  background-size:120px 120px;
  opacity:0.15;
  animation:softTwinkle 10s infinite ease-in-out;
  filter:blur(1px);
}

@keyframes softTwinkle {
  0%,100% { opacity:0.15; }
  50% { opacity:0.30; }
}

body::after {
  content:"0101010011010010110100100101010011010100100101010011010010";
  position:fixed;
  top:0; left:0;
  width:100%; height:100%;
  color:rgba(255,255,255,0.05);
  font-family:monospace;
  font-size:14px;
  line-height:20px;
  white-space:pre-wrap;
  pointer-events:none;
  z-index:0;
  animation:scrollBinary 30s linear infinite;
}

@keyframes scrollBinary {
  from { transform:translateY(0); }
  to { transform:translateY(-100%); }
}

header, nav, section, footer {
  width:100%;
  background:rgba(20,20,40,0.65);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,0.15);
  box-shadow:0 6px 28px rgba(0,0,0,0.35);
  padding:1.25rem;
  margin-bottom:var(--gap);
  color:#e0e0e0;
}

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

.logo-link{
  display:flex;
  align-items:center;
}

.site-logo{
  width:140px;
  height:140px;
  border-radius:12px;
  box-shadow:0 4px 18px rgba(0,0,0,0.25);
}

.header-text{
  display:flex;
  flex-direction:column;
  justify-content:center;
}

header h1{
  font-size:1.8rem;
  font-weight:700;
  position:absolute;
  left:-9999px;
}

h1, h2, h3, h4, h5 {
  display:inline-block;
  padding:0.45rem 0.9rem;
  background:linear-gradient(90deg,#7b2fff,#00c8ff);
  border-radius:8px;
  font-weight:700;
  color:#fff;
  box-shadow:0 0 6px rgba(0,0,0,0.3);
  text-shadow:0 0 6px rgba(0,0,0,0.4);
}

/* Navigation */
nav ul{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  list-style:none;
}
nav a{
  display:inline-block;
  padding:0.55rem 1rem;
  background:rgba(40,40,70,0.75);
  border-radius:8px;
  color:#cfcfcf;
  text-decoration:none;
  font-weight:600;
  transition:all .2s ease;
  box-shadow:0 0 6px rgba(0,0,0,0.3);
}
nav a:hover{
  background:linear-gradient(90deg,#7b2fff,#00c8ff);
  color:#fff;
  box-shadow:
    0 0 8px rgba(123,47,255,0.6),
    0 0 14px rgba(0,200,255,0.6),
    0 4px 14px rgba(0,0,0,0.25);
  transform:translateY(-2px);
}

/* Main content */
main{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  margin:0 auto;
  padding:0;
}

/* Section text */
section{
  width:100%;
  max-width:100%;
}

section h2{
  font-size:1.3rem;
  margin-bottom:0.5rem;
}

section p{
  color:#e0e0e0;
  font-size:1rem;
}

/* Hyperlink Color Adjustment */
a {
  color:#9fdcff;
  text-decoration:none;
  transition:color .2s ease;
}

a:hover {
  color:#c7e9ff;
  text-shadow:0 0 6px rgba(159,220,255,0.6);
}

/* Resources list */
section#resources ul{
  list-style:disc;
  margin-left:1.25rem;
  color:#e0e0e0;
}

/* Footer */
footer{
  text-align:center;
  color:#cfcfcf;
  font-size:0.9rem;
  text-shadow:0 0 6px rgba(0,200,255,0.4);
}

/* Buttons */
.btn{
  display:inline-block;
  padding:0.65rem 1.2rem;
  background:linear-gradient(90deg,#7b2fff,#00c8ff);
  color:#fff;
  border:none;
  border-radius:8px;
  font-weight:700;
  cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease;
}
.btn:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(0,0,0,0.25);
}

/* 🌌 Dark Theme Table Styling */
.pricing-table{
  width:100%;
  border-collapse:collapse;
  margin-top:1rem;
  background:rgba(20,20,40,0.65);
  backdrop-filter:blur(22px);
  border-radius:var(--radius);
  overflow:hidden;
  color:#e0e0e0;
}
.pricing-table caption{
  font-weight:700;
  padding:0.75rem;
  background:linear-gradient(90deg,#7b2fff,#00c8ff);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.pricing-table th,
.pricing-table td{
  padding:0.75rem;
  text-align:left;
  border-bottom:1px solid rgba(255,255,255,0.15);
}
.pricing-table th{
  background:rgba(40,40,70,0.75);
  font-weight:700;
  color:#fff;
}
.pricing-table tr:hover{
  background:rgba(123,47,255,0.25);
}

/* Guide Image Styling */
.guide-image{
  width:100%;
  max-width:600px;
  display:block;
  margin:1.25rem auto;
  border-radius:var(--radius);
  box-shadow:0 6px 22px rgba(0,0,0,0.25);
}

/* Guide Box */
.guide-box{
  width:100%;
  max-width:100%;
  margin:2rem auto;
  padding:1.5rem;
  background:rgba(20,20,40,0.65);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,0.15);
  box-shadow:0 6px 28px rgba(0,0,0,0.35);
  line-height:1.6;
}
.guide-box h3{margin-top:1rem;}
.guide-box ul{margin-left:1.25rem;margin-bottom:1rem;}
.guide-box p{margin-bottom:1rem;}

/* Contact Section */
#contact {
  max-width:700px;          
  margin-left:2rem;         
  padding:1.5rem;
  background:rgba(20,20,40,0.65);
  backdrop-filter:blur(22px);
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,0.15);
  box-shadow:0 6px 28px rgba(0,0,0,0.35);
  color:#e0e0e0;
}

#contact form {
  display:flex;
  flex-direction:column;
  gap:1rem;
}

#contact label {
  display:block;
  font-weight:600;
}

#contact input[type="text"],
#contact input[type="email"] {
  width:100%;
  max-width:320px;
  padding:0.6rem;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.25);
  background:rgba(40,40,70,0.75);
  color:#e0e0e0;
}

#contact input[type="radio"] {
  margin-right:0.4rem;
}

#contact .btn {
  width:auto;
  margin-top:0.5rem;
}

body.contact-page main {
  align-items:flex-start;
  margin-left:2rem;
}

.map-container {
    position: relative;
    width: 100%;
    max-width: 1920px;   /* full map width */
    margin: 0 auto;
}

.map-base {
    width: 100%;
    height: 0;
    padding-bottom: 66.67%; /* 1280 / 1920 aspect ratio */
    background-image: url('/awe/assets/mainmap12345.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
}

.region1-overlay {
    position: absolute;
    top: 38.28%;     /* 490 / 1280 */
    left: 43.59%;    /* 837 / 1920 */
    width: 10.94%;   /* 210 / 1920 */
    height: 11.72%;  /* 150 / 1280 */
    cursor: pointer;
    z-index: 10;
    background-image: url('/awe/assets/region1.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.region2-overlay {
    position: absolute;
    top: 59.22%;        /* 758 / 1280 */
    left: 43.75%;       /* 840 / 1920 */
    width: 10.89%;      /* 209 / 1920 */
    height: 11.64%;     /* 149 / 1280 */
    cursor: pointer;
    z-index: 10;
    background-image: url('/awe/assets/region2.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.region1-overlay:hover,
.region2-overlay:hover {
    filter:
        drop-shadow(0 0 12px #00eaff)
        drop-shadow(0 0 22px #00c8ff)
        drop-shadow(0 0 32px #7b2fff)
        brightness(1.4);
    transform: scale(1.08);
    transition: 0.15s ease;
}

.region1-overlay:active,
.region2-overlay:active {
    transform: scale(3);
    opacity: 0.4;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.region2-page {
    background-image: url('/awe/assets/region2-background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* Disable Visual Search and drag behavior for all images */
img {
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
    user-select: none;
}

/* Re‑enable pointer events only for clickable overlays */
.region1-overlay,
.region2-overlay,
.region3-overlay {
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
    user-select: none;
    pointer-events: auto;
}