:root{--bg:#0d0d0d;--bg2:#1a1a1a;--text:#e0e0e0;--muted:rgba(224,224,224,.78);--line:rgba(224,224,224,.22);--accent-color:#87cefa;--font-main:'Technovier Bold','Arial Black',Arial,sans-serif;--transition:all .25s ease}
    *{box-sizing:border-box;margin:0;padding:0}
    body{font-family:'Technovier Bold','Arial Black',Arial,sans-serif;color:var(--text);background:linear-gradient(135deg,#151515,var(--bg));line-height:1.7}
    body.loaded{opacity:1}
    body.loaded .massive-logo{opacity:1;transform:scale(1)}
    header{position:fixed;top:0;width:100%;z-index:1000;background:rgba(11,15,22,.88);backdrop-filter:blur(18px);border-bottom:1px solid rgba(224,224,224,.1)}
    nav{max-width:1200px;margin:0 auto;padding:1.1rem 1.5rem;display:flex;justify-content:space-between;align-items:center;gap:1rem}
    .logo{display:flex;align-items:center;gap:.8rem;text-decoration:none;color:var(--text)}
    .logo-image{width:52px;height:52px;border-radius:50%;object-fit:cover;border:2px solid rgba(224,224,224,.35)}
    .logo-icon{width:52px;height:52px;border-radius:50%;display:none;align-items:center;justify-content:center;border:2px solid rgba(224,224,224,.35)}
    .nav-links{list-style:none;display:flex;gap:.65rem;flex-wrap:wrap}
    .nav-links a{color:var(--muted);text-decoration:none;text-transform:uppercase;letter-spacing:.06em;font-size:.76rem;padding:.65rem .9rem;border-radius:8px}
    .nav-links a:hover{color:#fff;background:rgba(224,224,224,.1)}
    .hero{min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:8.5rem 2rem 4rem;background:#0B0F16}
    .hero-inner{max-width:1100px;margin:0 auto}
    .massive-logo{display:block;max-width:min(620px,80vw);width:100%;height:auto;margin:0 auto 1.2rem;filter:drop-shadow(0 0 15px rgba(135,206,250,.18));border:none;border-radius:0;box-shadow:none;opacity:0;transform:scale(0.95);transition:opacity 1.2s ease-out .3s,transform 1.2s ease-out .3s}
    @keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
    .animate{opacity:0}.body-loaded .animate{animation:fadeInUp .6s ease-out forwards}
    .scroll-reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease-out,transform .6s ease-out}
    .scroll-reveal.visible{opacity:1;transform:translateY(0)}
    .hero-title{font-size:clamp(2rem,4vw,3rem);margin-bottom:.7rem}
    .hero-copy{color:var(--muted);max-width:820px;margin:0 auto 1.2rem}
    .section{padding:5rem 2rem}.container{max-width:1200px;margin:0 auto}.section-title{text-align:center;font-size:2rem;margin-bottom:.75rem}.section-sub{text-align:center;color:var(--muted);margin-bottom:2.2rem;line-height:1.7}
    .about{background:linear-gradient(135deg,#0f1a2e,#162040);border-top:1px solid rgba(135,206,250,.12);border-bottom:1px solid rgba(135,206,250,.12)}
    .about-wrap{display:grid;grid-template-columns:220px 1fr;gap:1.2rem;align-items:center}
    .about-photo img{width:100%;border-radius:12px;border:2px solid rgba(224,224,224,.2);object-fit:cover}
    .about-wrap p{color:var(--muted)}
    .pricing-table{width:100%;border-collapse:collapse;background:rgba(224,224,224,.05);border:1px solid var(--line);border-radius:12px;overflow:hidden}
    .pricing-table th,.pricing-table td{text-align:left;padding:.9rem .85rem;border-bottom:1px solid var(--line);vertical-align:top}
    .pricing-table th{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
    .price-value{font-weight:700;white-space:nowrap}
    .contact{background:linear-gradient(135deg,#141414,#2a1635);text-align:center}
    .contact-email{display:inline-block;margin-top:.8rem;padding:.9rem 1.2rem;border:1px solid var(--line);border-radius:10px;font-weight:700;background:rgba(224,224,224,.06)}

            /* Footer */
        footer {
            background: linear-gradient(135deg, #141414, #2a1635);
            color: white;
            padding: 4rem 2rem 2rem;
        }

        .footer-content {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 2fr 1fr 1fr;
            gap: 4rem;
        }

        .footer-logo {
            font-size: 2rem;
            font-weight: 800;
            margin-bottom: 1rem;
            color: var(--accent-color);
            display: flex;
            align-items: center;
            gap: 1rem;
            font-family: var(--font-main);
        }

        .footer-logo-icon {
            width: 40px;
            height: 40px;
            border: 2px solid var(--accent-color);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        .footer-logo-icon::before {
            content: '🔒';
            font-size: 1.2rem;
            z-index: 2;
        }

        .footer-logo-icon::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            border: 2px solid var(--accent-color);
            border-radius: 50%;
            opacity: 0.3;
            animation: pulse 3s infinite;
        }

        .footer-desc {
            color: rgba(224, 224, 224, 0.8);
            margin-bottom: 2rem;
            line-height: 1.6;
            max-width: 600px;
            font-family: var(--font-main);
        }

        .footer-links h4 {
            font-size: 1.2rem;
            margin-bottom: 1.5rem;
            color: var(--accent-color);
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-family: var(--font-main);
        }

        .footer-links h4::before {
            content: '🔗';
            font-size: 1rem;
        }

        .footer-links ul {
            list-style: none;
        }

        .footer-links li {
            margin-bottom: 0.5rem;
        }

        .footer-links a {
            color: rgba(224, 224, 224, 0.8);
            text-decoration: none;
            transition: var(--transition);
            font-family: var(--font-main);
        }

        .footer-links a:hover {
            color: var(--accent-color);
        }

        .copyright {
            text-align: center;
            padding-top: 2rem;
            color: rgba(224, 224, 224, 0.8);
            border-top: 1px solid rgba(224, 224, 224, 0.3);
            margin-top: 3rem;
            font-family: var(--font-main);
        }

        /* Mobile responsive */
        @media (max-width: 768px) {
            nav { padding: .8rem 1rem; flex-wrap: wrap; }
            .logo span { font-size: .85rem; }
            .nav-links { gap: .3rem; }
            .nav-links a { font-size: .68rem; padding: .45rem .6rem; }

            .hero { padding: 6rem 1rem 2rem; min-height: 80vh; }
            .massive-logo { max-width: min(320px, 80vw); height: auto; }
            .hero-title { font-size: 1.5rem; }
            .hero-copy { font-size: .9rem; }

            .about-wrap { grid-template-columns: 1fr; text-align: center; }
            .about-photo { max-width: 180px; margin: 0 auto; }

            .pricing-table { font-size: .78rem; display: block; overflow-x: auto; }
            .pricing-table th, .pricing-table td { padding: .6rem .5rem; white-space: normal; }

            .footer-content { grid-template-columns: 1fr; gap: 2rem; text-align: center; }
            .footer-logo { justify-content: center; }
            .footer-links h4 { justify-content: center; }
            .footer-desc { margin: 0 auto 2rem; }
        }

        @media (max-width: 480px) {
            .massive-logo { max-width: min(250px, 75vw); height: auto; }
            .hero-title { font-size: 1.3rem; }
            .section { padding: 2.5rem .8rem; }
            .section-title { font-size: 1.5rem; }
            .pricing-table { font-size: .72rem; }
            .pricing-table th, .pricing-table td { padding: .5rem .4rem; }
            footer { padding: 2.5rem 1rem 1.5rem; }
        }

/* Form select dropdown options — force readable colours.
   Browsers don't always inherit the parent select's dark theme, so
   options can render as dark-on-dark unless we explicitly set them. */
select option {
  background-color: #1a1a1a !important;
  color: #e0e0e0 !important;
}
select option:checked,
select option:hover {
  background-color: #2a2a3a !important;
  color: #fff !important;
}
select {
  color-scheme: dark;
}
/* Textarea / input placeholders — readable but muted */
::placeholder { color: rgba(224,224,224,0.42) !important; opacity: 1; }

/* ─── Mobile fixes ─────────────────────────────────────────────────── */
body { overflow-x: clip; }
img, iframe, table { max-width: 100%; }

@media (max-width: 640px) {
  /* Collapse inline-styled 2-column grids to single column */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* Form sections shouldn't have wide max-width pushing content sideways */
  section[id="enquire"] { padding: 3rem 1rem !important; }
  form { width: 100%; max-width: 100%; }
  /* Hero buttons can stack */
  .tier-hero .hero-actions { gap: .6rem !important; }
  /* Nav on tier pages — more compact, wraps cleanly */
  nav { padding: .7rem .9rem !important; flex-wrap: wrap; }
  .nav-links { gap: .25rem !important; }
  .nav-links a { padding: .4rem .55rem !important; font-size: .65rem !important; }
  .logo span { font-size: .85rem; }
  /* Pricing tables — make scrollable instead of overflowing */
  .pricing-table { display: block; overflow-x: auto; }
  /* Hero title scale */
  .tier-hero h1, h1 { font-size: clamp(1.4rem, 6vw, 2rem) !important; }
}

/* Force form inputs/selects/textareas to honour their container width */
form input, form select, form textarea, form button {
  max-width: 100%;
  box-sizing: border-box;
}

/* ─── Burger menu ─────────────────────────────────────────────────── */
.burger {
  display: none;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text);
  width: 40px; height: 40px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 18px;
  padding: 0;
  align-items: center;
  justify-content: center;
  transition: all .15s;
}
.burger:hover { border-color: var(--accent-color); color: var(--accent-color); }
.menu-overlay {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(8px);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
body.menu-open .menu-overlay { opacity: 1; pointer-events: auto; }

@media (max-width: 720px) {
  .burger { display: inline-flex; }
  .nav-links {
    position: fixed; top: 0; right: 0;
    width: min(280px, 80vw); height: 100vh;
    background: linear-gradient(180deg, var(--bg2), var(--bg));
    border-left: 1px solid var(--line);
    flex-direction: column !important;
    justify-content: flex-start !important;
    padding: 5rem 1.4rem 2rem !important;
    gap: .35rem !important;
    transform: translateX(100%);
    transition: transform .28s ease;
    z-index: 1000;
    overflow-y: auto;
  }
  body.menu-open .nav-links { transform: translateX(0); }
  .nav-links li { width: 100%; }
  .nav-links a {
    display: block !important;
    width: 100%; box-sizing: border-box;
    padding: .85rem 1rem !important;
    font-size: .85rem !important;
    border: 1px solid var(--line);
    border-radius: 8px;
    text-align: left;
  }
  .burger.is-open { color: var(--accent-color); border-color: var(--accent-color); }
}

/* Close button inside the burger drawer */
.menu-close {
  display: none;
  position: absolute;
  top: 14px; right: 14px;
  width: 36px; height: 36px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 8px;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 1001;
  transition: all .15s;
}
.menu-close:hover { border-color: var(--accent-color); color: var(--accent-color); }
@media (max-width: 720px) { body.menu-open .menu-close { display: inline-flex; } }