:root{
  --bg: #030303;
  --glass:#060606;
  --accent:#ff9900;
  --violet:#8a2be2;
  --muted:#bfbfbf;
}
/* Regular (400) */
@font-face {
  font-family: 'Montserrat Alternates';
  src: local('Montserrat Alternates Regular'), local('MontserratAlternates-Regular'),
       url('fonts/montserrat-alternates-v17-latin-regular.woff2') format('woff2'),
       url('fonts/montserrat-alternates-v17-latin-regular.woff') format('woff'),
       url('fonts/MontserratAlternates-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Bold (700) - fallback to TTF if no woff2 available */
@font-face {
  font-family: 'Montserrat Alternates';
  src: local('Montserrat Alternates Bold'), local('MontserratAlternates-Bold'),
       url('fonts/MontserratAlternates-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ExtraBold (800) - used for the large brand headline */
@font-face {
  font-family: 'Montserrat Alternates';
  src: local('Montserrat Alternates ExtraBold'), local('MontserratAlternates-ExtraBold'),
       url('fonts/MontserratAlternates-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
*{box-sizing:border-box}
html,body{min-height:100%}
html{background-color:var(--bg)}
body{
  margin:0; font-family:'Montserrat Alternates', Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background-color: var(--bg);
  /* decorative background image with dark fallback
     and a logo placed behind the main PNG (logo sits underneath the main image) */
  background-image: url('background.png');
  background-repeat: no-repeat, no-repeat;
  background-position: center center, right 28px bottom 28px;
  background-size: cover, 640px auto;
  color:var(--muted);
  display:flex; align-items:flex-start; justify-content:center;
  min-height:100vh; /* allow content to exceed viewport and scroll */
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-y:auto;
}

/* Use the PNG alpha as a mask to reveal a colored overlay. */
@supports (mask-image: url('assets/background.png')) or (-webkit-mask-image: url('assets/background.png')){
  body::before{
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0; /* sits beneath .page (which is z-index:1) */

     /* colored layer visible through the PNG's alpha channel (more transparent)
       angle and position are driven by CSS variables updated from JS */
     background: linear-gradient(var(--overlay-angle, 180deg), rgb(255, 255, 255), rgba(137, 43, 226, 0.656));
     background-position: var(--overlay-pos, center center);

    /* use the PNG alpha as mask (include webkit prefix for Safari) */
    -webkit-mask-image: url('background.png');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: var(--mask-pos, center center);
    -webkit-mask-size: cover;

    mask-image: url('background.png');
    mask-repeat: no-repeat;
    mask-position: var(--mask-pos, center center);
    mask-size: cover;
  }
}
@supports not (mask-image: url('assets/background.png')){
  /* Fallback for browsers without mask support: blend the PNG with a gradient */
  body::before{
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;

      background-image: linear-gradient(var(--overlay-angle, 180deg), rgb(255, 255, 255), rgba(138,43,226,0.25)), url('background.png');
    background-repeat: no-repeat;
    background-position: var(--overlay-pos, center center);
    background-size: cover;
    background-blend-mode: overlay;
    opacity: 0.75;
  }
}

/* Skip link for keyboard users */
.skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus,.skip-link:active{position:static;left:auto;width:auto;height:auto;padding:8px 12px;background:#fff;color:#000;border-radius:4px;z-index:1000}

/* Accessibility toggle button: small interactive button fully in-view; decorative quarter-circle behind */
.a11y-toggle{position:fixed;top:1px;right:1px;width:44px;height:44px;border-radius:6px;display:flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;color:var(--muted);cursor:pointer;z-index:1200;box-shadow:0 6px 18px rgba(0,0,0,0.5);backdrop-filter: blur(4px);overflow:visible}
.a11y-toggle:hover{transform:translateY(2px)}
.a11y-toggle[aria-pressed="true"]{background:var(--accent);color:#000}
.sr-only{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.a11y-toggle svg.a11y-icon{width:20px;height:20px;color:currentColor;display:block}

/* Hint shown when hovering or focusing the a11y toggle */
.a11y-hint{
  position:fixed;
  top:54px; /* anchor near the toggle, then slide above when visible */
  right:6px;
  background: rgba(0,0,0,0.8);
  color: #fff;
  padding:8px 10px;
  border-radius:8px;
  font-size:13px;
  line-height:1.2;
  box-shadow:0 6px 18px rgba(0,0,0,0.6);
  opacity:0;
  transform:translateY(18px); /* start slightly below the anchor */
  transition:opacity .18s ease,transform .18s ease;
  pointer-events:none; /* don't block pointer to the button */
  z-index:1250;
}
.a11y-toggle:hover + .a11y-hint, .a11y-toggle:focus-visible + .a11y-hint{
  opacity:1;
  transform:translateY(-110%); /* slide the hint above the toggle */
}

/* small banner when a11y is auto-enabled */
.a11y-banner{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:18px;
  background: rgba(0,0,0,0.86);
  color:#fff;
  padding:10px 14px;
  border-radius:8px;
  box-shadow:0 10px 30px rgba(0,0,0,0.6);
  z-index:1400;
  display:flex;
  gap:12px;
  align-items:center;
  font-size:13px;
}
.a11y-banner button{
  background:var(--accent);
  color:#000;
  border:none;
  padding:6px 8px;
  border-radius:6px;
  cursor:pointer;
}

/* Focus styles — visible and consistent */
:focus{outline: none}
.panel:focus-visible, .a11y .panel:focus{outline:3px solid var(--accent);outline-offset:6px}
.panel:focus-visible .icon{filter:drop-shadow(0 6px 18px rgba(0,0,0,0.6))}

/* a11y mode tweaks (applied when user enables accessibility mode) */
.a11y .panel{font-size:1.03rem}
.a11y .brand{letter-spacing:2px}

/* Disable heavy animations in accessibility mode and respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .glare rect{animation:none !important;transition:none !important}
}
.a11y .glare rect{animation:none !important;transition:none !important}

/* In accessibility mode hide the glare entirely for reduced distraction */
.a11y .glare, .a11y .glare rect{display:none !important}

.page{position:relative; z-index:1; width:100%; padding:6vh 4vw}
.center-wrap{max-width:920px;min-width:320px;margin:0 auto;padding:0 4vw}
.chrome-panel{
  position:relative; z-index:2; overflow:visible; border-radius:16px; padding:36px 36px 48px; text-align:center;
  max-width: 640px; /* keep panel compact and visually square with inner grid */
  width: 100%;
  margin: 0 auto;
  /* glossy, thick black-glass look */
  background-color: rgba(8,8,10,0.62);
  background-image: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.02) 8%, rgba(0,0,0,0.45) 30%, rgba(0,0,0,0.72) 100%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.04);
  box-shadow:
    0 18px 50px rgba(0,0,0,0.75), /* deep outer shadow for thickness */
    0 4px 18px rgba(0,0,0,0.6),
    inset 0 8px 30px rgba(255,255,255,0.02), /* soft inner lift */
    inset 0 -18px 40px rgba(0,0,0,0.6); /* deep inner bottom shading */
}
.chrome-panel .glare{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen;z-index:0}

/* glossy rim and top highlight */
.chrome-panel::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(var(--rim-angle, 180deg), rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 10%, rgba(255,255,255,0) 18%);
  mix-blend-mode: overlay;
}
.chrome-panel::after{
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  top: 10px;
  height: 34px;
  border-radius: 12px;
  background: linear-gradient(var(--rim-angle, 180deg), rgba(255,255,255,0.14), rgba(255,255,255,0.02));
  filter: blur(3px);
  opacity: 0.6;
  pointer-events: none;
}
/* slower, smoother glide so pointer interaction doesn't need to pause it */
.chrome-panel .glare rect{animation:glide 14s linear infinite;transform:translateX(-40%);} 
/* movement finishes quickly (first ~14% ~= 2s) then holds to create a pause between flares */
@keyframes glide{
  0%{transform:translateX(-40%)}
  14%{transform:translateX(200%)}
  100%{transform:translateX(200%)}
}

/* pause glare animation when page is hidden or accessibility mode is active */
body.glare-paused .chrome-panel .glare rect,
.a11y .chrome-panel .glare rect{
  animation-play-state: paused !important;
  opacity: 0.9 !important;
}
.brand{color:var(--accent);margin:0 0 14px;font-size:5rem;letter-spacing:3px;text-shadow:0 2px 18px rgb(138 43 226 / 12%);font-weight:800;position:relative;z-index:0;
  /* outline for legibility: preferred -webkit stroke with multi-shadow fallback */
  -webkit-text-stroke: 1.8px #000;
  text-shadow:
    1px 1px 0 #000,
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    0 1px 0 #000,
    0 -1px 0 #000,
    1px 0 0 #000,
    -1px 0 0 #000;
  /* prevent text selection and cursor in Firefox */
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

/* Brand row: logo left of the title */
.brand-row{display:flex;align-items:center;justify-content:center;gap:12px;margin:0 0 8px;position:relative;width:100%}
/* left logo sits absolute at left, main brand is centered, klex sits absolute at right */
.brand-logo{width:150px;height:150px;display:none;position:absolute;left:0;top:0;flex:0 0 auto;z-index:-20}
.brand-klex{width:300px;height:300px;display:none;position:absolute;right:0;top:0;flex:0 0 auto;z-index:-20}

@media (max-width:600px){
  .brand-logo{width:48px;height:48px}
  .brand-klex{width:48px;height:48px}
}
@media (max-width:520px){
  .brand-logo{width:40px;height:40px}
  .brand-klex{width:40px;height:40px}
  .brand{font-size:3.2rem}
}
/* Brand sizing in rem for consistency across breakpoints */
@media (max-width:600px){.brand{font-size:4rem}}
@media (max-width:520px){.brand{font-size:3rem}}
.grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:10px;align-items:stretch;width:100%;max-width:360px;aspect-ratio:1/1;margin:0 auto}
.panel{
  display:flex;flex-direction:column;align-items:center;justify-content:center;padding:14px;
  background-color: var(--glass); /* opaque tiles */
  /* per-tile glow color (use an rgba value). Default matches --accent (#f90 -> 255,153,0) */
  --glow: rgba(255,153,0,0.08);
  border-radius:10px;color:#fff;text-decoration:none;border:1px solid rgb(255 255 255 / 6%);min-height:72px;transition:transform .18s ease,box-shadow .18s ease;
}
.panel .icon{width:44px;height:44px;fill:none;stroke:var(--icon-color, var(--accent));stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:0.98;transition:stroke .3s ease,fill .3s ease}
.panel span{margin-top:8px;font-size:14px;color:var(--muted)}
.panel:hover{
  transform:translateY(-8px) scale(1.02);
  box-shadow: 0 14px 40px var(--glow), 0 6px 20px rgba(0,0,0,0.6);
}
.panel.reserved .icon{stroke:var(--violet)}
.panel.reserved{--glow: rgba(138,43,226,0.08)}
.panel.info .icon{stroke:#ffffff;fill:#ffffff}
.panel.info{--glow: rgba(255,255,255,0.12)}
.meta{margin-top:18px;font-size:12px;color:#9a9aa0}

/* Footer anchors: keep visual appearance identical to surrounding text
   but remain keyboard-focusable (visible outline on focus-visible). */
.meta a, .meta a:link, .meta a:visited {
  color: inherit;
  text-decoration: none;
}
.meta a:hover, .meta a:active {
  color: inherit;
  text-decoration: none;
}
.meta a:focus-visible{
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}

/* small screens */
@media (max-width:600px){
  .center-wrap{padding:0 6vw}
  .grid{grid-template-columns:repeat(2,1fr);aspect-ratio:auto;max-width:720px;grid-auto-rows:minmax(72px,auto)}
}
@media (max-width:520px){
  .grid{grid-template-columns:1fr;aspect-ratio:auto;max-width:100%}
  .chrome-panel{padding:20px}
}

/* Note: Powered badge will render with intrinsic size (no ID-based styles) */
@media (max-width:520px){
  .meta{display:flex;flex-direction:column;align-items:center;gap:8px}
}

/* previous inline corner-logo removed — logo is now a background layer (see body background-image) */
/* responsive sizing for background-layered logo */
@media (max-width:520px){
  /* smaller logo for small screens: adjust background-size second layer */
  body{background-size: cover, 96px auto}
}

/* Flip card styles for main section backside */
#backInclude{
  max-height: 360px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 153, 0, 0.4) rgba(255, 153, 0, 0.1);
  /* ensure scrolling works over all child content */
  position: relative;
  z-index: 1;
}
#backInclude *{
  /* allow scrolling to work over text and other content */
  pointer-events: auto;
}
#backInclude::-webkit-scrollbar{
  width: 8px;
}
#backInclude::-webkit-scrollbar-track{
  background: rgba(255, 153, 0, 0.1);
  border-radius: 4px;
}
#backInclude::-webkit-scrollbar-thumb{
  background: rgba(255, 153, 0, 0.4);
  border-radius: 4px;
  border: 2px solid rgba(6, 6, 6, 0.8);
}
#backInclude::-webkit-scrollbar-thumb:hover{
  background: rgba(255, 153, 0, 0.6);
}

.brand{cursor:pointer}
.flip-card{position:relative;width:100%;height:100%;perspective:1200px;z-index:2}
.flip-card-inner{position:relative;width:100%;height:100%;transition:transform 700ms cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d}
.flip-card.flipped .flip-card-inner, .flip-card.flipped .flip-card-inner{transform:rotateY(180deg)}
.flip-card-front,.flip-card-back{position:relative;width:100%;height:100%;backface-visibility:hidden;transform-style:preserve-3d}
.flip-card-front{z-index:2}
.flip-card-back{position:absolute;inset:0;transform:rotateY(180deg);display:flex;align-items:center;justify-content:center;padding:18px}

/* when flipped, make the back fully opaque and above the glare */
.flip-card.flipped .flip-card-back{
  z-index:4; /* sit above glare */
  background: rgba(6,6,6,0.96);
}

/* ensure the back-inner content remains visible and scrollable */
.flip-card.flipped .flip-card-back .back-inner{
  background: transparent; /* back has been made opaque above */
}
.flip-card-back .back-inner{
  max-width:360px; /* match inner grid width to avoid wider back than inner box */
  width:100%;
  box-sizing:border-box;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius:12px;
  padding:22px;
  border:1px solid rgba(255,255,255,0.04);
  color:var(--muted);
  text-align:center;
  margin:0 auto;
}
.flip-card-back h2{margin:0 0 8px;color:var(--accent);font-size:1.4rem}
.back-logos{display:flex;gap:14px;align-items:center;justify-content:center;margin:12px 0}
.back-logos img{width:84px;height:auto;filter:drop-shadow(0 8px 20px rgba(0,0,0,0.6))}
.back-caption{margin-top:8px;font-weight:700;color:#fff}

/* ensure the inner .grid keeps its grid layout when moved into .flip-card-front */
.flip-card-front .grid{width:100%;max-width:360px;margin:0 auto}

/* reduced motion: make flip instant */
@media (prefers-reduced-motion: reduce){
  .flip-card-inner{transition:none}
}