/* QuiSoft Limited - site styles.
   The look follows the dark "space" theme at localhost/wordpress: light-streak background,
   drifting sparkles, black menu tabs down the left, a big centred headline and round boxes. */

@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 300 800; font-display: swap; src: url(../fonts/opensans.woff2) format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: italic; font-weight: 300 800; font-display: swap; src: url(../fonts/opensans-italic.woff2) format("woff2"); }
@font-face { font-family: "Exo 2"; font-style: normal; font-weight: 300 700; font-display: swap; src: url(../fonts/exo2.woff2) format("woff2"); }
@font-face { font-family: "Exo 2"; font-style: italic; font-weight: 300 700; font-display: swap; src: url(../fonts/exo2-italic.woff2) format("woff2"); }
@font-face { font-family: "Audiowide"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/audiowide.woff2) format("woff2"); }
@font-face { font-family: "Lexend"; font-style: normal; font-weight: 300; font-display: swap; src: url(../fonts/lexend.woff2) format("woff2"); }
@font-face { font-family: "Orbitron"; font-style: normal; font-weight: 500 800; font-display: swap; src: url(../fonts/orbitron.woff2) format("woff2"); }

:root {
  --bg: #000;
  --panel: rgba(18, 16, 22, 0.9);
  --tab: rgba(0, 0, 0, 0.86);
  --tab-hover: rgba(20, 20, 26, 0.95);
  --circle: rgba(44, 42, 43, 0.92);
  --text: #d6d6dc;
  --muted: #a3a3ad;
  --white: #fff;
  --line: rgba(255, 255, 255, 0.12);
  --cyan: #18d2ff;
  --violet: #b44dff;
  --pink: #ff3d8b;
  --amber: #ffab2e;
  --lime: #8be04e;
  --rainbow: linear-gradient(90deg, #18d2ff, #b44dff 45%, #ff3d8b 75%, #ffab2e);
  --head: "Exo 2", "Open Sans", Arial, sans-serif;
  --menu-top: 160px;
  --footer-h: 60px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--text);
  font: 400 15px/1.65 "Open Sans", Arial, sans-serif;
  padding-bottom: calc(var(--footer-h) + 20px);
}
a { color: var(--cyan); text-decoration: none; }
a:hover, a:focus-visible { color: #7fe8ff; text-decoration: underline; }
img, svg { max-width: 100%; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.skip { position: absolute; left: -999px; top: 0; z-index: 100; background: #000; color: #fff; padding: 8px 14px; }
.skip:focus { left: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Background and sparkles ---------- */
#background { position: fixed; inset: 0; z-index: -2; background: #05030a url(../img/space.jpg) center / cover no-repeat; }
#background::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,.55)); }
body.inner #background::after { background: rgba(0, 0, 0, 0.35); }
#sparkles { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
#sparkles img { position: absolute; transition-property: transform; transition-timing-function: linear; will-change: transform; }

/* ---------- Header: logo and left menu tabs ---------- */
#header { position: fixed; top: 40px; left: 0; z-index: 10; }
#logo { display: block; width: 280px; padding: 14px 16px 10px; background: var(--tab); }
#logo svg { display: block; width: 100%; height: auto; }
#logo:hover, #logo:focus-visible { text-decoration: none; background: var(--tab-hover); }
#menu { margin-top: 50px; }
#menu ul {
  /* every tab is as wide as the longest item; the text is left justified */
  list-style: none; margin: 0; padding: 0; display: grid; width: max-content;
}
#menu li { margin: 0 0 5px; }
#menu a {
  display: block; position: relative; padding: 8px 22px 8px 20px; background: var(--tab); color: var(--white);
  font: 400 13px/1.3 "Open Sans", Arial, sans-serif; letter-spacing: .04em; text-transform: uppercase; text-align: left;
  transition: padding .12s ease-out, background .12s;
}
#menu a::after { /* the theme's small corner notch */
  content: ""; position: absolute; right: 0; bottom: 0; border: 3px solid transparent; border-right-color: #fff; border-bottom-color: #fff; opacity: .7;
}
#menu a:hover, #menu a:focus-visible { padding-left: 26px; background: var(--tab-hover); text-decoration: none; }
#menu a[aria-current="page"] { background: #000; box-shadow: inset 4px 0 0 0 var(--pink); }
#menu a[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(var(--cyan), var(--violet), var(--pink), var(--amber)); }
#menu-toggle { display: none; }

/* ---------- Footer bar ---------- */
#footer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9; min-height: var(--footer-h);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 30px 8px 40px;
  background: rgba(0, 0, 0, 0.88); border-top: 1px solid #1e1e1e; font-size: 11.5px; color: #9a9aa4;
}
#footer p { margin: 0; line-height: 1.5; }
#footer strong { color: #fff; font-weight: 600; }
#footer nav { display: flex; align-items: center; gap: 4px 18px; flex-wrap: wrap; justify-content: flex-end; }
#footer nav a { color: #cfcfd6; text-transform: uppercase; letter-spacing: .05em; font-size: 11px; }
#footer nav a.touch { color: #fff; padding-left: 18px; border-left: 1px solid #333; display: inline-flex; align-items: center; gap: 8px; }
#footer nav a.touch svg { width: 13px; height: 13px; color: var(--pink); }

/* ---------- Home: headline and round boxes ---------- */
#front { margin-left: 300px; margin-right: 60px; min-height: calc(100vh - var(--footer-h)); display: flex; flex-direction: column; justify-content: flex-end; padding: 40px 0 26px; }
.big_text {
  margin: 0 auto 6vh; text-align: center; color: #fff; font: 300 clamp(30px, 3.6vw, 58px)/1.25 "Open Sans", Arial, sans-serif;
  text-shadow: 0 2px 18px rgba(0,0,0,.55);
}
.big_text strong { font-weight: 600; }
.big_text .sub { display: block; margin-top: 14px; font: 300 italic clamp(15px, 1.3vw, 20px)/1.4 var(--head); color: #e8e8f2; letter-spacing: .02em; }

.carousel { position: relative; max-width: 1040px; margin: 0 auto; width: 100%; }
.viewport { overflow: hidden; padding: 10px 0; }
.track { display: flex; list-style: none; margin: 0; padding: 0; transition: transform .7s cubic-bezier(.5,0,.2,1); }
.track > li { flex: 0 0 calc(100% / var(--per, 4)); display: flex; justify-content: center; padding: 0 8px; }
.circle {
  --c: var(--cyan); --c2: var(--violet);
  width: 214px; height: 214px; border-radius: 50%; background: var(--circle); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 22px 22px 18px;
  position: relative; transition: transform .25s, box-shadow .25s; text-decoration: none;
}
.circle::before { /* glowing coloured ring on hover */
  content: ""; position: absolute; inset: -3px; border-radius: 50%; padding: 3px;
  background: conic-gradient(from 210deg, var(--c), var(--c2), var(--c)); opacity: 0; transition: opacity .25s;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
a.circle:hover, a.circle:focus-visible { transform: translateY(-4px); text-decoration: none; color: #fff; box-shadow: 0 10px 30px -8px var(--c); }
a.circle:hover::before, a.circle:focus-visible::before { opacity: 1; }
.circle .ico { width: 46px; height: 46px; margin-bottom: 8px; flex: none; }
.circle h2 { margin: 0 0 5px; font: 500 15.5px/1.2 "Open Sans", Arial, sans-serif; color: #fff; }
.circle p { margin: 0; font-size: 11.5px; line-height: 1.45; color: #d3d3d8; font-weight: 600; }
.dots { display: flex; justify-content: center; gap: 10px; margin-top: 14px; }
.dots button { width: 10px; height: 10px; border-radius: 50%; border: 0; padding: 0; background: rgba(255,255,255,.45); cursor: pointer; }
.dots button[aria-current="true"] { background: #fff; transform: scale(1.15); }
.carousel .nav { position: absolute; top: 50%; transform: translateY(-80%); width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; font-size: 18px; cursor: pointer; }
.carousel .nav.prev { left: -40px; } .carousel .nav.next { right: -40px; }
.carousel .nav:hover { background: #000; }
.scroll-hint { text-align: center; margin-top: 12px; font: 400 11px/1 "Open Sans", sans-serif; letter-spacing: .25em; text-transform: uppercase; color: #ddd; }
.scroll-hint a { color: #fff; }


/* ---------- Content panels (inner pages and the home page's lower section) ---------- */
#main { margin-left: 300px; margin-right: 40px; padding: 40px 0 30px; }
.panel { max-width: 1000px; margin: 0 auto 30px; background: var(--panel); padding: 22px 34px 34px; }
.crumbs { margin: 0 0 6px; padding-bottom: 12px; border-bottom: 1px solid var(--line); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.crumbs a { color: #fff; }
.panel h1 { margin: 22px 0 6px; font: 600 34px/1.15 "Open Sans", Arial, sans-serif; color: #fff; text-transform: uppercase; }
.tagline { margin: 0 0 22px; font: 400 italic 18px/1.4 var(--head); background: var(--rainbow); -webkit-background-clip: text; background-clip: text; color: transparent; }
.panel h2 { margin: 34px 0 12px; font: 500 24px/1.25 var(--head); color: #fff; }
.panel h2::after { content: ""; display: block; width: 70px; height: 3px; margin-top: 8px; background: var(--rainbow); border-radius: 2px; }
.panel h3 { margin: 22px 0 6px; font: 600 16px/1.3 "Open Sans", Arial, sans-serif; color: #fff; }
.panel p, .panel li { color: var(--text); }
.panel .lead { font-size: 17px; line-height: 1.6; color: #eee; font-weight: 600; }
.panel ul { padding-left: 1.2em; }
.panel ul.ticks { list-style: none; padding: 0; }
.panel ul.ticks li { position: relative; padding-left: 26px; margin: 6px 0; }
.panel ul.ticks li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 12px; height: 7px; border-left: 2.5px solid var(--lime); border-bottom: 2.5px solid var(--lime); transform: rotate(-45deg); }
.panel hr { border: 0; border-top: 1px solid var(--line); margin: 30px 0; }
.small { font-size: 13px; color: var(--muted); }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin: 18px 0; }
.card { --c: var(--cyan); --c2: var(--violet); background: rgba(255,255,255,.04); border: 1px solid var(--line); border-top: 3px solid var(--c); padding: 18px 18px 14px; transition: transform .2s, box-shadow .2s; }
.card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px -12px var(--c); }
.card .ico { width: 38px; height: 38px; display: block; margin-bottom: 6px; }
.card h3 { margin: 4px 0 6px; }
.card p { margin: 0 0 6px; font-size: 14px; }
.card .price { font: 600 22px/1.2 var(--head); color: #fff; margin: 4px 0 8px; }
.card .price small { font-size: 13px; color: var(--muted); font-weight: 400; }

.callout { margin: 26px 0; padding: 18px 22px; border-left: 4px solid var(--amber); background: linear-gradient(90deg, rgba(255,171,46,.14), rgba(255,61,139,.06)); }
.callout p { margin: 0; color: #fff; }
.callout strong { color: var(--amber); }

.band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin: 30px 0 0; padding: 24px 26px; background: linear-gradient(110deg, rgba(24,210,255,.18), rgba(180,77,255,.18) 50%, rgba(255,61,139,.16)); border: 1px solid rgba(255,255,255,.14); }
.band h2 { margin: 0 0 4px; } .band h2::after { display: none; }
.band p { margin: 0; }

.btn { display: inline-block; padding: 10px 20px; border-radius: 3px; border: 0; cursor: pointer; font: 600 13px/1.2 "Open Sans", Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: linear-gradient(90deg, #ff3d8b, #ffab2e); }
.btn:hover, .btn:focus-visible { color: #fff; text-decoration: none; filter: brightness(1.12); }
.btn.alt { background: linear-gradient(90deg, #18d2ff, #b44dff); }
.btn.ghost { background: transparent; border: 1px solid rgba(255,255,255,.5); }
.ext::after { content: " \2197"; }

.timeline { list-style: none; margin: 18px 0; padding: 0 0 0 26px; border-left: 2px solid rgba(255,255,255,.18); }
.timeline li { position: relative; margin: 0 0 18px; }
.timeline li::before { content: ""; position: absolute; left: -33px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--c, var(--cyan)); box-shadow: 0 0 10px var(--c, var(--cyan)); }
.timeline .when { display: block; font: 600 13px/1.3 var(--head); color: var(--c, var(--cyan)); letter-spacing: .06em; text-transform: uppercase; }

.people { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.person { display: flex; gap: 16px; align-items: flex-start; padding: 16px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.avatar { flex: none; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font: 700 28px/1 var(--head); color: #fff; background: linear-gradient(135deg, var(--cyan), var(--violet)); }
.avatar.b { background: linear-gradient(135deg, var(--pink), var(--amber)); }
.person h3 { margin: 0 0 2px; }
.person .role { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; margin: 0 0 6px; }
.person p { margin: 0; font-size: 14px; }

/* FAQ */
.faq details { border-bottom: 1px solid var(--line); padding: 4px 0; }
.faq summary { cursor: pointer; list-style: none; padding: 10px 30px 10px 0; position: relative; font-weight: 600; color: #fff; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 6px; font: 400 22px/1 var(--head); color: var(--cyan); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); color: var(--pink); }
.faq details > div { padding: 0 0 12px; }
.faq details > div p { margin: 0 0 8px; }
.faq h2 { margin-top: 30px; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 30px; }
form .row { margin: 0 0 14px; }
form label { display: block; margin: 0 0 4px; font-size: 13px; font-weight: 600; color: #fff; }
form input, form select, form textarea {
  width: 100%; padding: 10px 12px; border: 1px solid #3a3a44; border-radius: 3px; background: rgba(0,0,0,.55); color: #fff; font: inherit;
}
form input:focus, form select:focus, form textarea:focus { border-color: var(--cyan); outline: none; box-shadow: 0 0 0 2px rgba(24,210,255,.25); }
form textarea { min-height: 150px; resize: vertical; }
.hp { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }
.notice { padding: 12px 16px; margin: 0 0 18px; border-left: 4px solid var(--lime); background: rgba(139,224,78,.12); color: #fff; }
.notice.err { border-color: var(--pink); background: rgba(255,61,139,.12); }
.notice[hidden] { display: none; }
.info-list { list-style: none; padding: 0; margin: 0; }
.info-list li { display: flex; gap: 12px; margin: 0 0 16px; }
.info-list .ico { width: 26px; height: 26px; flex: none; margin-top: 2px; }
.hours { width: 100%; border-collapse: collapse; font-size: 14px; }
.hours td { padding: 4px 16px 4px 0; white-space: nowrap; border-bottom: 1px solid var(--line); }
.hours td:last-child { text-align: right; color: #fff; padding-right: 0; }

/* Policies */
.policy h2 { font-size: 20px; }
.policy table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 10px 0 18px; }
.policy th, .policy td { text-align: left; vertical-align: top; padding: 8px 10px; border: 1px solid var(--line); }
.policy th { background: rgba(255,255,255,.06); color: #fff; }
.placeholder { background: rgba(255,171,46,.18); color: var(--amber); padding: 0 4px; border-radius: 2px; }

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
  #front, #main { margin-left: 260px; margin-right: 24px; }
  #logo { width: 240px; }
  .carousel .nav.prev { left: -6px; } .carousel .nav.next { right: -6px; }
}
@media (max-width: 960px), (max-height: 560px) {
  body { padding-bottom: 0; }
  #header { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 16px; background: rgba(0,0,0,.88); }
  #logo { width: 210px; padding: 6px 0; background: transparent; }
  #menu-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: #111; color: #fff; border: 1px solid #333; font: 600 12px/1 "Open Sans", sans-serif; letter-spacing: .1em; cursor: pointer; }
  #menu { position: absolute; left: 0; right: 0; top: 100%; margin: 0; padding: 8px 16px 12px; background: rgba(0,0,0,.95); display: none; }
  #menu.open { display: block; }
  #menu ul { width: 100%; }
  #front, #main { margin: 0; padding-left: 16px; padding-right: 16px; }
  #front { min-height: auto; padding-top: 70px; }
  .big_text { margin-bottom: 40px; }
  .panel { padding: 18px 18px 26px; }
  .panel h1 { font-size: 26px; }
  #footer { position: static; flex-direction: column; align-items: flex-start; padding: 16px; }
  #footer nav { justify-content: flex-start; }
  #footer nav a.touch { border-left: 0; padding-left: 0; }
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .circle { width: 200px; height: 200px; }
  .carousel .nav { display: none; }
  .band { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation: none !important; }
  #sparkles { display: none; }
}

/* Colour pairs for icons, rings and card edges. Kept last so they win over the defaults above. */
.c-cyan   { --c: #18d2ff; --c2: #4f7dff; }
.c-violet { --c: #b44dff; --c2: #ff3d8b; }
.c-pink   { --c: #ff3d8b; --c2: #ffab2e; }
.c-amber  { --c: #ffab2e; --c2: #ffe14d; }
.c-lime   { --c: #8be04e; --c2: #18d2ff; }
.c-teal   { --c: #1fe0b5; --c2: #8be04e; }
.c-red    { --c: #ff5a4f; --c2: #ffab2e; }
.c-blue   { --c: #4f7dff; --c2: #b44dff; }
.ico { color: var(--c); }
.ico .f2 { fill: var(--c2); }
.ico .s2 { stroke: var(--c2); }