/* Scope box-sizing to the hero so global layout remains untouched */

/* Logo wrapper for better structure */

:root {
    --brand-blue: #2D7AE9;
    --brand-blue-rgb: 45, 122, 233;
    --brand-blue-glow: 120, 190, 255;
    --accent-gold: #D5AD36;
    --accent-gold-rgb: 213, 173, 54;
    --accent-gold-glow: 245, 205, 90;
}

.logo-container,
.logo-container * {
    box-sizing: border-box;
}

.logo-container {
    position: relative;
    padding: 20px 20px 4px;     /* less bottom space below tagline */
    cursor: pointer;
    transition: transform 0.3s ease;
    width: 100%;
    max-width: 560px;              /* matches original */
    margin: 0 auto;
    /* no explicit min-height → let content decide */
}

.schedule-link {
    background-color: var(--brand-blue) !important;
}

/* ───────── LAYOUT / RESTORE DEMO LOOK ───────── */
.hero-wrapper{
  /* inherit whatever bg the rest of the site uses */
  background:inherit;
  display:flex;flex-direction:column;
  align-items:center;
  padding:0 0 0px;            /* tighter bottom spacing */
  overflow:visible;             /* let bubbles float */
}

/* coloured spinning disc */
.blob{
  position:absolute;
  width:160px;height:160px;
  top:70%;left:85%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle at 30% 30%,#ff0066 0%,rgba(255,0,102,0) 70%);
  filter:blur(14px);
  animation:blob 25s linear infinite;
  pointer-events:none;
}
@keyframes blob{
  to{transform:translate(-50%,-50%) rotate(360deg);}
}

.circuit-bg {
    position: absolute;
    inset: 0;
    opacity: 0.1;
    background-image: 
        repeating-linear-gradient(0deg, #00ffff 0, #00ffff 1px, transparent 1px, transparent 40px),
        repeating-linear-gradient(90deg, #00ffff 0, #00ffff 1px, transparent 1px, transparent 40px);
    animation: circuit-flow 20s linear infinite;
}

@keyframes circuit-flow {
    0% { transform: translate(0, 0); }
    100% { transform: translate(40px, 40px); }
}

.glitch-container {
    position: relative;
    filter: none;
    text-align: center;
}

/* Main logo wrapper */
.main-logo {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, 'Helvetica Neue', Arial, sans-serif;
    font-weight: 900;
    font-size: 5rem;
    letter-spacing: 0;
    --logo-letter-spacing: 0.012em;
    --logo-plus-gap: 0.006em;
    position: relative;
    display: inline-block;
    line-height: 1;
    margin: 0;
    white-space: nowrap;
    text-align: center;
}

/* IT with animated gradient and stroke */
.logo-it {
    color: var(--brand-blue);
    -webkit-text-fill-color: var(--brand-blue);
    background: none;
    display: inline-block;
    letter-spacing: var(--logo-letter-spacing);
    text-shadow:
        0 1px 0 rgba(0, 0, 0, 0.55),
        0 3px 6px rgba(0, 0, 0, 0.35),
        0 -1px 0 rgba(255, 255, 255, 0.12),
        -0.16px -0.16px 0 rgba(120, 180, 255, 0.3),
         0.16px -0.16px 0 rgba(120, 180, 255, 0.3),
        -0.16px  0.16px 0 rgba(120, 180, 255, 0.3),
         0.16px  0.16px 0 rgba(120, 180, 255, 0.3),
            -0.56px  0 0 rgba(213, 173, 54, 0.98),
             0.56px  0 0 rgba(213, 173, 54, 0.98),
             0 -0.56px 0 rgba(213, 173, 54, 0.98),
             0  0.56px 0 rgba(213, 173, 54, 0.98),
            -0.56px -0.56px 0 rgba(213, 173, 54, 0.98),
             0.56px -0.56px 0 rgba(213, 173, 54, 0.98),
            -0.56px  0.56px 0 rgba(213, 173, 54, 0.98),
             0.56px  0.56px 0 rgba(213, 173, 54, 0.98),
             0 0 1.8px rgba(213, 173, 54, 0.45);
    animation: logo-gleam 6s ease-in-out infinite;
    position: relative;
    left: 0.075em;
    z-index: 2;
}

.logo-it::after {
    content: "IT";
}

/* HELP with animated gradient, NO stroke to avoid P artifacts */
.logo-help {
    color: var(--brand-blue);
    -webkit-text-fill-color: var(--brand-blue);
    background: none;
    display: inline-block;
    letter-spacing: var(--logo-letter-spacing);
    text-shadow:
        0 1px 0 rgba(0, 0, 0, 0.55),
        0 3px 6px rgba(0, 0, 0, 0.35),
        0 -1px 0 rgba(255, 255, 255, 0.12),
        -0.16px -0.16px 0 rgba(120, 180, 255, 0.3),
         0.16px -0.16px 0 rgba(120, 180, 255, 0.3),
        -0.16px  0.16px 0 rgba(120, 180, 255, 0.3),
         0.16px  0.16px 0 rgba(120, 180, 255, 0.3),
        -0.56px  0 0 rgba(213, 173, 54, 0.98),
         0.56px  0 0 rgba(213, 173, 54, 0.98),
         0 -0.56px 0 rgba(213, 173, 54, 0.98),
         0  0.56px 0 rgba(213, 173, 54, 0.98),
        -0.56px -0.56px 0 rgba(213, 173, 54, 0.98),
         0.56px -0.56px 0 rgba(213, 173, 54, 0.98),
        -0.56px  0.56px 0 rgba(213, 173, 54, 0.98),
         0.56px  0.56px 0 rgba(213, 173, 54, 0.98),
         0 0 1.8px rgba(213, 173, 54, 0.45);
    animation: logo-gleam 6s ease-in-out infinite;
    position: relative;
    left: -0.01em;
    z-index: 2;
}

.logo-help::after {
    content: "HELP";
}

.logo-it::before {
    content: "IT";
}

.logo-help::before {
    content: "HELP";
}

.logo-it::before,
.logo-help::before {
    position: absolute;
    inset: 0;
    color: transparent;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.2) 0%,
        rgba(255, 255, 255, 0.08) 30%,
        rgba(255, 255, 255, 0) 60%);
    -webkit-background-clip: text;
    background-clip: text;
    opacity: 0.6;
    pointer-events: none;
    z-index: 3;
    font: inherit;
    letter-spacing: inherit;
    line-height: inherit;
}

.logo-it::after,
.logo-help::after {
    position: absolute;
    inset: 0;
    color: transparent;
    background: linear-gradient(110deg,
        transparent 0%,
        rgba(213, 173, 54, 0.0) 32%,
        rgba(213, 173, 54, 0.95) 50%,
        rgba(213, 173, 54, 0.0) 68%,
        transparent 100%);
    -webkit-background-clip: text;
    background-clip: text;
    opacity: 0;
    transform: translateX(-35%);
    animation: logo-sheen 6.4s ease-in-out infinite;
    pointer-events: none;
    z-index: 4;
    font: inherit;
    letter-spacing: inherit;
    line-height: inherit;
}

/* Red plus sign - very subtle outline */
.logo-plus {
    color: #ff0066;
    display: inline-block;
    margin: 0 var(--logo-plus-gap);
    text-shadow: 
        -0.3px -0.3px 0 #00ffff,  
         0.3px -0.3px 0 #00ffff,
        -0.3px  0.3px 0 #00ffff,
         0.3px  0.3px 0 #00ffff;
    position: relative;
    z-index: 4;
    animation: plus-jitter 3.5s ease-in-out infinite;
}

@keyframes plus-jitter {
  0%, 70% { transform: translate3d(0, 0, 0); }
  72% { transform: translate3d(0.3px, -0.2px, 0); }
  74% { transform: translate3d(-0.3px, 0.2px, 0); }
  76% { transform: translate3d(0.2px, 0.1px, 0); }
  78% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

@keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    70% { background-position: 0% 50%; }
    90% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes specular-sweep {
    0%, 55% { background-position: 0 0, -160% 50%; }
    70% { background-position: 0 0, 10% 50%; }
    85% { background-position: 0 0, 160% 50%; }
    100% { background-position: 0 0, -160% 50%; }
}

@keyframes logo-gleam {
    0%, 70%, 100% {
        text-shadow:
            0 1px 0 rgba(0, 0, 0, 0.55),
            0 3px 6px rgba(0, 0, 0, 0.35),
            0 -1px 0 rgba(255, 255, 255, 0.12),
            -0.16px -0.16px 0 rgba(120, 180, 255, 0.3),
             0.16px -0.16px 0 rgba(120, 180, 255, 0.3),
            -0.16px  0.16px 0 rgba(120, 180, 255, 0.3),
             0.16px  0.16px 0 rgba(120, 180, 255, 0.3),
        -0.56px  0 0 rgba(213, 173, 54, 0.98),
         0.56px  0 0 rgba(213, 173, 54, 0.98),
         0 -0.56px 0 rgba(213, 173, 54, 0.98),
         0  0.56px 0 rgba(213, 173, 54, 0.98),
        -0.56px -0.56px 0 rgba(213, 173, 54, 0.98),
         0.56px -0.56px 0 rgba(213, 173, 54, 0.98),
        -0.56px  0.56px 0 rgba(213, 173, 54, 0.98),
         0.56px  0.56px 0 rgba(213, 173, 54, 0.98),
         0 0 1.8px rgba(213, 173, 54, 0.45);
    }
    78%, 82% {
        text-shadow:
            0 1px 0 rgba(0, 0, 0, 0.55),
            0 3px 6px rgba(0, 0, 0, 0.35),
            0 -1px 0 rgba(255, 255, 255, 0.12),
            -0.2px -0.2px 0 rgba(120, 180, 255, 0.4),
             0.2px -0.2px 0 rgba(120, 180, 255, 0.4),
            -0.2px  0.2px 0 rgba(120, 180, 255, 0.4),
             0.2px  0.2px 0 rgba(120, 180, 255, 0.4),
            -0.74px  0 0 rgba(213, 173, 54, 0.99),
             0.74px  0 0 rgba(213, 173, 54, 0.99),
             0 -0.74px 0 rgba(213, 173, 54, 0.99),
             0  0.74px 0 rgba(213, 173, 54, 0.99),
            -0.74px -0.74px 0 rgba(213, 173, 54, 0.99),
             0.74px -0.74px 0 rgba(213, 173, 54, 0.99),
            -0.74px  0.74px 0 rgba(213, 173, 54, 0.99),
             0.74px  0.74px 0 rgba(213, 173, 54, 0.99),
             0 0 2.2px rgba(213, 173, 54, 0.52);
    }
}

@keyframes logo-sheen {
    0%, 60% {
        opacity: 0;
        transform: translateX(-35%);
    }
    66% {
        opacity: 0.95;
    }
    80% {
        opacity: 0.95;
        transform: translateX(35%);
    }
    86%, 100% {
        opacity: 0;
        transform: translateX(35%);
    }
}

/* Glitch effect now handled with pseudo-elements */
.main-logo::before,
.main-logo::after {
    content: none;
    animation: none;
    opacity: 0;
}

html.switch .logo-it,
html.switch .logo-help {
    color: var(--brand-blue);
    -webkit-text-fill-color: var(--brand-blue);
    background: none;
    text-shadow:
        0 1px 0 rgba(0, 0, 0, 0.45),
        0 2px 5px rgba(0, 0, 0, 0.28),
        0 -1px 0 rgba(255, 255, 255, 0.1),
        -0.16px -0.16px 0 rgba(120, 180, 255, 0.28),
         0.16px -0.16px 0 rgba(120, 180, 255, 0.28),
        -0.16px  0.16px 0 rgba(120, 180, 255, 0.28),
         0.16px  0.16px 0 rgba(120, 180, 255, 0.28),
        -0.48px  0 0 rgba(213, 173, 54, 0.86),
         0.48px  0 0 rgba(213, 173, 54, 0.86),
         0 -0.48px 0 rgba(213, 173, 54, 0.86),
         0  0.48px 0 rgba(213, 173, 54, 0.86),
        -0.48px -0.48px 0 rgba(213, 173, 54, 0.86),
         0.48px -0.48px 0 rgba(213, 173, 54, 0.86),
        -0.48px  0.48px 0 rgba(213, 173, 54, 0.86),
         0.48px  0.48px 0 rgba(213, 173, 54, 0.86),
         0 0 1.4px rgba(213, 173, 54, 0.4);
    animation: logo-gleam 6s ease-in-out infinite;
}


.location {
    font-size: 2.5rem;
    margin-top: -10px;
    text-transform: lowercase;
    position: relative;
    font-weight: 600;
    color: #b2bac5;
    letter-spacing: 0.08em;
    text-shadow: 0 0 6px rgba(178, 186, 197, 0.35);
}

html.switch .location {
    color: #4b5563;
    text-shadow: 0 0 5px rgba(75, 85, 99, 0.25);
}

@keyframes shine {
    0% { background-position: -100% 0; }
    100% { background-position: 100% 0; }
}

.tagline {
    margin-top: 8px;          /* closer to logo */
    text-align: center;
    font-size: 1.1rem;
    letter-spacing: 0.05em;
    position: relative;
    font-family: ui-monospace, 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', 'Courier New', monospace;
}

.tagline-border {
    display: inline-block; /* pill snaps to content width */
    padding: 2px; /* border thickness */
    border-radius: 30px;
    background: #D5AD36;
    position: relative;
    z-index: 0;
}

.tagline-text {
    display: block;
    white-space: nowrap;
    color: #fff;
    padding: 10px 20px;
    background-color: #0a0a0a;
    border-radius: 28px;
}

/* colour-scheme specific pill styling */
@media (prefers-color-scheme:light){
  .tagline-text{
    color:#000;
    background-color:#ffffff;
  }
}
@media (prefers-color-scheme:dark){
  .tagline-text{
    color:#fff;
    background-color:#000000;
  }
}
html.switch .tagline-text{
  color:#000;
  background-color:#ffffff;
}
html:not(.switch) .tagline-text{
  color:#fff;
  background-color:#000000;
}

.tagline-border::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: #D5AD36;
    border-radius: 30px;
    opacity: 0;
    transition: opacity 0.3s;
    z-index: -1;
    filter: blur(3px);
}

.logo-container:hover .tagline-border::before {
    opacity: 0.12;
}

.highlight {
    color: #d5ad36;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(213, 173, 54, 0.5);
}

/* particles cover full logo box */
.tech-particles{
  position:absolute;
  inset:0;
  pointer-events:none;
  animation: particle-orbit 70s linear infinite;
  transform-origin: 50% 50%;
}

.particle {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(var(--size, 2.5px) + 0.4px);
    height: calc(var(--size, 2.5px) + 0.4px);
    --alpha-boosted: clamp(0, calc(var(--alpha, 0.7) + 0.18), 1);
    background: rgba(var(--particle-rgb, var(--brand-blue-rgb)), 1);
    border-radius: 50%;
    opacity: 0;
    box-shadow: 0 0 calc(var(--glow, 8px) + 5px) rgba(var(--particle-glow, var(--brand-blue-glow)), 0.75);
    filter: blur(var(--blur, 0px));
    will-change: transform, opacity;
    animation: particle-drift var(--dur, 6s) cubic-bezier(0.4, 0, 0.2, 1) infinite;
    animation-delay: var(--delay, 0s);
}

@keyframes particle-drift {
    0% {
        opacity: 0;
        transform: translate3d(0, 90px, 0) scale(0.6);
    }
    35% {
        opacity: var(--alpha-boosted, 0.8);
        transform: translate3d(var(--dx1, 10px), var(--dy1, -28px), 0) scale(var(--s1, 1));
    }
    70% {
        opacity: var(--alpha-boosted, 0.8);
        transform: translate3d(var(--dx2, -12px), var(--dy2, -90px), 0) scale(var(--s2, 0.9));
    }
    100% {
        opacity: 0;
        transform: translate3d(var(--dx3, 22px), var(--dy3, -160px), 0) scale(0.5);
    }
}

@keyframes particle-orbit {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Staggered particles for a richer field */
.tech-particles .particle:nth-child(1)  { left: 8%;  top: 78%; --size: 2.1px; --alpha: 0.65; --glow: 7px;  --blur: 0px;   --dur: 5.4s; --delay: 0s;   --hue: 190; --s1: 1;   --s2: 0.9; --dx1: -18px; --dy1: -18px; --dx2: -26px; --dy2: -95px;  --dx3: -34px; --dy3: -150px; }
.tech-particles .particle:nth-child(2)  { left: 16%; top: 62%; --size: 2.2px; --alpha: 0.8;  --glow: 11px; --blur: 0px;   --dur: 6.3s; --delay: 1.1s; --particle-rgb: var(--accent-gold-rgb); --particle-glow: var(--accent-gold-glow); --hue: 195; --s1: 1.1; --s2: 1;   --dx1: 20px;  --dy1: -28px; --dx2: 10px;  --dy2: -120px; --dx3: 28px;  --dy3: -175px; }
.tech-particles .particle:nth-child(3)  { left: 24%; top: 72%; --size: 2.1px; --alpha: 0.6;  --glow: 6px;  --blur: 0.4px; --dur: 5.9s; --delay: 2.2s; --hue: 200; --s1: 0.9; --s2: 0.85;--dx1: -22px; --dy1: -22px; --dx2: -8px;  --dy2: -100px; --dx3: -30px; --dy3: -155px; }
.tech-particles .particle:nth-child(4)  { left: 32%; top: 56%; --size: 2.2px; --alpha: 0.85; --glow: 12px; --blur: 0px;   --dur: 6.8s; --delay: 0.6s; --hue: 185; --s1: 1.2; --s2: 1;   --dx1: 24px;  --dy1: -32px; --dx2: 6px;   --dy2: -115px; --dx3: 34px;  --dy3: -185px; }
.tech-particles .particle:nth-child(5)  { left: 40%; top: 68%; --size: 2.2px; --alpha: 0.62; --glow: 6px;  --blur: 0.5px; --dur: 5.6s; --delay: 2.6s; --hue: 205; --s1: 0.95;--s2: 0.85;--dx1: -16px; --dy1: -20px; --dx2: -2px;  --dy2: -90px;  --dx3: -24px; --dy3: -145px; }
.tech-particles .particle:nth-child(6)  { left: 48%; top: 52%; --size: 2.2px; --alpha: 0.75; --glow: 9px;  --blur: 0.2px; --dur: 6.4s; --delay: 1.5s; --particle-rgb: var(--accent-gold-rgb); --particle-glow: var(--accent-gold-glow); --hue: 195; --s1: 1;   --s2: 0.95;--dx1: 18px;  --dy1: -26px; --dx2: -10px; --dy2: -110px; --dx3: 22px;  --dy3: -170px; }
.tech-particles .particle:nth-child(7)  { left: 56%; top: 74%; --size: 2.2px; --alpha: 0.82; --glow: 10px; --blur: 0px;   --dur: 5.8s; --delay: 3s;   --hue: 188; --s1: 1.05;--s2: 0.95;--dx1: -26px; --dy1: -30px; --dx2: -6px;  --dy2: -118px; --dx3: -32px; --dy3: -175px; }
.tech-particles .particle:nth-child(8)  { left: 64%; top: 58%; --size: 2.1px; --alpha: 0.7;  --glow: 8px;  --blur: 0.3px; --dur: 6.9s; --delay: 0.3s; --particle-rgb: var(--accent-gold-rgb); --particle-glow: var(--accent-gold-glow); --hue: 210; --s1: 1;   --s2: 0.9; --dx1: 26px;  --dy1: -34px; --dx2: 12px;  --dy2: -130px; --dx3: 36px;  --dy3: -195px; }
.tech-particles .particle:nth-child(9)  { left: 72%; top: 66%; --size: 2.1px; --alpha: 0.6;  --glow: 6px;  --blur: 0.6px; --dur: 5.7s; --delay: 1.9s; --hue: 190; --s1: 0.9; --s2: 0.85;--dx1: -14px; --dy1: -20px; --dx2: 4px;   --dy2: -95px;  --dx3: -20px; --dy3: -150px; }
.tech-particles .particle:nth-child(10) { left: 80%; top: 54%; --size: 2.2px; --alpha: 0.85; --glow: 12px; --blur: 0px;   --dur: 6.6s; --delay: 0.8s; --hue: 200; --s1: 1.2; --s2: 1;   --dx1: 20px;  --dy1: -30px; --dx2: -8px;  --dy2: -125px; --dx3: 30px;  --dy3: -185px; }
.tech-particles .particle:nth-child(11) { left: 88%; top: 76%; --size: 2.2px; --alpha: 0.65; --glow: 7px;  --blur: 0.5px; --dur: 6.1s; --delay: 2.5s; --particle-rgb: var(--accent-gold-rgb); --particle-glow: var(--accent-gold-glow); --hue: 215; --s1: 0.95;--s2: 0.85;--dx1: -22px; --dy1: -26px; --dx2: -4px;  --dy2: -110px; --dx3: -28px; --dy3: -165px; }
.tech-particles .particle:nth-child(12) { left: 94%; top: 60%; --size: 2.2px; --alpha: 0.7;  --glow: 8px;  --blur: 0.2px; --dur: 6.5s; --delay: 1.3s; --hue: 195; --s1: 1;   --s2: 0.9; --dx1: 18px;  --dy1: -24px; --dx2: 6px;   --dy2: -118px; --dx3: 26px;  --dy3: -175px; }
.tech-particles .particle:nth-child(13) { left: 12%; top: 46%; --size: 2px;  --alpha: 0.55; --glow: 5px;  --blur: 0.7px; --dur: 7.4s; --delay: 3.3s; --hue: 205; --s1: 0.85;--s2: 0.8; --dx1: -12px; --dy1: -14px; --dx2: 6px;   --dy2: -85px;  --dx3: -18px; --dy3: -135px; }
.tech-particles .particle:nth-child(14) { left: 28%; top: 42%; --size: 2.1px; --alpha: 0.6;  --glow: 7px;  --blur: 0.3px; --dur: 6.7s; --delay: 1.7s; --hue: 190; --s1: 0.95;--s2: 0.9; --dx1: 22px;  --dy1: -20px; --dx2: 4px;   --dy2: -105px; --dx3: 28px;  --dy3: -160px; }
.tech-particles .particle:nth-child(15) { left: 60%; top: 44%; --size: 2.1px; --alpha: 0.58; --glow: 6px;  --blur: 0.6px; --dur: 6s;   --delay: 3.5s; --particle-rgb: var(--accent-gold-rgb); --particle-glow: var(--accent-gold-glow); --hue: 210; --s1: 0.9; --s2: 0.85;--dx1: -10px; --dy1: -16px; --dx2: 8px;   --dy2: -95px;  --dx3: -16px; --dy3: -145px; }
.tech-particles .particle:nth-child(16) { left: 84%; top: 40%; --size: 2.2px; --alpha: 0.7;  --glow: 8px;  --blur: 0.2px; --dur: 6.9s; --delay: 2.1s; --hue: 195; --s1: 1;   --s2: 0.9; --dx1: 16px;  --dy1: -22px; --dx2: -6px;  --dy2: -110px; --dx3: 22px;  --dy3: -165px; }

@media (max-width: 640px) {
  .particle {
    width: calc(var(--size, 2.5px) + 0.6px);
    height: calc(var(--size, 2.5px) + 0.6px);
    box-shadow: 0 0 8px rgba(var(--brand-blue-glow), 0.75);
    animation-duration: 5.8s;
  }
  .tech-particles .particle:nth-child(n+13) {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tech-particles {
    animation: none;
  }
  .particle {
    animation: none;
    opacity: 0.15;
  }
  .logo-it::after,
  .logo-help::after {
    animation: none;
    opacity: 0;
  }
}

.logo-container:hover .logo-it,
.logo-container:hover .logo-help {
    animation-duration: 4s;
}

.logo-container:hover .glitch-container {
    filter: drop-shadow(0 0 10px rgba(213, 173, 54, 0.18));
}

.hex-decoration {
    position: absolute;
    width: 60px;
    height: 60px;
    opacity: 0.3;
    animation: rotate 10s linear infinite;
}

.hex-decoration:nth-child(1) {
    top: 20px;
    left: 20px;
    animation-duration: 15s;
}

.hex-decoration:nth-child(2) {
    bottom: 20px;
    right: 20px;
    animation-duration: 20s;
    animation-direction: reverse;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.hex {
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #00ffff, #ff0066);
    -webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}

/* Special handling for Apple devices */
@supports (font: -apple-system-body) {
    .main-logo, .logo-it, .logo-help, .logo-plus {
        font-weight: 800;
    }
    .main-logo {
        letter-spacing: -0.03em;
    }
}

/* ↓ responsive font-sizes stop word-wrap on mobile */
@media(max-width:640px){
  .hero-wrapper{padding:0 0 0px;}       /* flush to top, even tighter bottom */

  /* bigger, bolder */
  .main-logo {font-size:20vw;}
  .location  {font-size:7vw;}
  .tagline   {font-size:4.6vw;}

  /* compensate for smaller container padding */
  .tagline-text{padding:8px 16px;}
}
/* ---- force gold on any .gold-link, incl. inside headings -------- */
html:not(.switch) h1 a.gold-link,
html:not(.switch) h1 a.gold-link:link,
html:not(.switch) h1 a.gold-link:visited,
html:not(.switch) h1 a.gold-link:hover,
html:not(.switch) h1 a.gold-link:focus,
html:not(.switch) h1 a.gold-link:active,
html:not(.switch) h2 a.gold-link,
html:not(.switch) h2 a.gold-link:link,
html:not(.switch) h2 a.gold-link:visited,
html:not(.switch) h2 a.gold-link:hover,
html:not(.switch) h2 a.gold-link:focus,
html:not(.switch) h2 a.gold-link:active,
html:not(.switch) h3 a.gold-link,
html:not(.switch) h3 a.gold-link:link,
html:not(.switch) h3 a.gold-link:visited,
html:not(.switch) h3 a.gold-link:hover,
html:not(.switch) h3 a.gold-link:focus,
html:not(.switch) h3 a.gold-link:active,
a.gold-link,
a.gold-link:link,
a.gold-link:visited,
a.gold-link:hover,
a.gold-link:focus,
a.gold-link:active {
    color: #d4af37 !important;
    text-decoration: none;          /* default: no line */
}

/* --- gold underline on interactive states ----------------------- */
a.gold-link:hover,
a.gold-link:focus,
a.gold-link:active,
html:not(.switch) h1 a.gold-link:hover,
html:not(.switch) h2 a.gold-link:hover,
html:not(.switch) h3 a.gold-link:hover,
html:not(.switch) h1 a.gold-link:focus,
html:not(.switch) h2 a.gold-link:focus,
html:not(.switch) h3 a.gold-link:focus,
html:not(.switch) h1 a.gold-link:active,
html:not(.switch) h2 a.gold-link:active,
html:not(.switch) h3 a.gold-link:active {
    text-decoration: underline;     /* one-pixel underline */
    text-decoration-color: #d4af37; /* same gold */
    text-decoration-thickness: 1px; /* optional: tweak as you like */
    text-underline-offset: 2px;     /* lowers the line a bit (nice on Retina) */
}