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

body {
    font-family: 'Inter', sans-serif;
    background: var(--c-bg);
    color: var(--c-text-hi);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    font-size: var(--fs-body);
}

/* Fluid Typography System */
h1 {
  font-size: var(--fs-h1);
  line-height: 1.1;
  margin-bottom: 1rem;
  font-weight: 700;
}

h2 {
  font-size: var(--fs-h2);
  line-height: 1.2;
  margin-bottom: 0.875rem;
  font-weight: 700;
}

h3 {
  font-size: var(--fs-h3);
  line-height: 1.3;
  margin-bottom: 0.75rem;
  font-weight: 600;
}

h4 {
  font-size: var(--fs-h4);
  line-height: 1.4;
  margin-bottom: 0.625rem;
  font-weight: 600;
}

p {
  font-size: var(--fs-body);
  line-height: 1.6;
  margin-bottom: 1rem;
}

/* Improved readability on mobile */
@media (max-width: 767px) {
  p {
    line-height: 1.7; /* More breathing room on mobile */
    font-size: 0.95rem; /* Keep paragraphs consistent and slightly smaller on mobile */
  }
  
  body {
    font-size: clamp(0.95rem, 2vw, 1rem); /* Prevent zoom on iOS */
  }
}

/* Subtle diagonal colour wash behind all content */
body::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-1;
    background:linear-gradient(130deg,#0e1738 0%,#0B0C18 40%,#49144b 100%);
    opacity:.6;
    pointer-events:none;
}
/* Home-only: fade the page gradient at the bottom (no top fade) */
body.home::before{
  -webkit-mask-image: linear-gradient(180deg, black 0%, black calc(100% - 160px), transparent 100%);
  mask-image: linear-gradient(180deg, black 0%, black calc(100% - 160px), transparent 100%);
}

/* additional colour-burst (static) */
body::after{
  content:"";
  position:fixed; inset:0; z-index:-2;      /* sits behind the subtle wash */
  pointer-events:none;
  background:
    radial-gradient(900px at 70% 35%, rgba(255,0,220,.45) 0%, transparent 60%),
    radial-gradient(1000px at 20% 70%, rgba(0,140,255,.35) 0%, transparent 65%);
  mix-blend-mode: screen;
}



html {
    scroll-behavior: smooth
}

img {
    max-width: 100%;
    display: block
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--motion-fast) var(--ease-standard)
}

.focus-visible:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 2px
}

/* Underline animation */
a:hover {
    text-decoration: none
}

a::after {
    content: "";
    display: block;
    width: 0;
    height: 2px;
    margin-top: 2px;
    background: linear-gradient(90deg, var(--c-grad-a), var(--c-grad-b));
    transition: width var(--motion-fast) var(--ease-standard)
}

a:hover::after {
    width: 100%
}

ul {
    list-style: none
}

.container {
    width: 90%;
    max-width: 1400px;
    margin-inline: auto
}

.sr-only {
    position: absolute;
    left: -10000px
}

#qubitab { scroll-margin-top: 90px; }   /* nav height + a little air */

@media (max-width:480px){
  body{font-size:.95rem}
}