@font-face{font-family:'Gliker'; src:url('../font/Gliker-SemiBoldSemiExpanded.woff2') format('woff2'); font-weight:600; font-style:normal; font-stretch:112.5%; font-display:swap;}
:root{
  --purple-950:#10041a; --purple-900:#150724; --purple-850:#1b0830; --purple-800:#220a34; --purple-750:#2a0c40; --purple-700:#330e4f; --purple-650:#42106a; --purple-600:#4e1688; --purple-500:#6e26c7; --purple-400:#8a4df0; --purple-300:#b995ff; --white:#ffffff; --silver-1:#e6e7eb; --silver-2:#bfc3c8; --silver-3:#8e949c; --maxw:1200px; --radius:16px; --shadow-soft:0 10px 30px rgba(0,0,0,.25);
  --wordmark:'Gliker', Montserrat, system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans';
  --check-purple:#7B5CFF; /* cool purple for badges */
  /* === Tuning panel === */
  --wordmark-weight: 800;  /* match Gliker SemiBold */
  /* Hero headline size */
  --hero-h1-min: 1.6rem;    /* small screens */
  --hero-h1-pref: 3.2vw;    /* responsive scale */
  --hero-h1-max: 3rem;      /* large screens */
  /* Spacing between lines */
  --hero-until-gap: 32px;   /* breathing room before "Until now." */
  /* Timing */
  --until-delay: 3s;        /* delay before "Until now." animates */
  --ellipsis-duration: .6s; /* speed per dot */
  --ellipsis-1-delay: .8s;  /* when dot 1 appears */
  --ellipsis-2-delay: 1.6s; /* when dot 2 appears */
  --ellipsis-3-delay: 2.4s; /* when dot 3 appears */
  --streak: #b743ec; /* streak accent */
}

:root{
    --font-display: 'Gliker', Montserrat, system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans';
    --font-text: Montserrat, system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans';
    --font-display-weight: 800;  /* Gliker weight */
  }

  
html,body{height:100%;}
body{margin:0; font-family:Montserrat, system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans'; color:var(--white); background:var(--purple-850);}    
.container{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:24px;}
.wordmark{font-family:'Gliker', Montserrat, system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans'; font-weight:var(--wordmark-weight,600); letter-spacing:.08em; font-stretch:112.5%;}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* accessibility */
.skip-link{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;}
.skip-link:focus{left:16px; top:16px; width:auto; height:auto; padding:.5rem .75rem; background:var(--white); color:var(--purple-700); border-radius:8px; z-index:1000;}

/* HEADER */
header{position:sticky; top:0; backdrop-filter:saturate(160%) blur(8px); background:linear-gradient( to bottom, rgba(21,7,36,.92), rgba(21,7,36,.66)); border-bottom:1px solid rgba(255,255,255,.08); z-index:50; transition:transform .3s ease;}
header.hide{transform:translateY(-100%);} /* smart hide */
.nav{display:flex; align-items:center; justify-content:space-between; gap:16px; height:76px;}
/* Center the wordmark in the purple pill */
.brand{
    display:inline-flex;
    align-items:center;
    justify-content:center;   
    gap:0;                   
    background:var(--purple-600);
    border-radius:10px;
    padding:10px 16px;
    box-shadow:0 2px 0 rgba(0,0,0,.25) inset;
  }
  
 
  .brand .brand-tag:empty{ display:none; }
  
  
  .wordmark{ line-height:1; text-align:center; }
  
nav ul{display:flex; list-style:none; gap:40px; padding:0; margin:0;} /* increased spacing */
.nav-link{position:relative; color:var(--white); text-decoration:none; font-weight:600; letter-spacing:.04em; padding:8px 2px;}
.nav-link::after{content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:linear-gradient(90deg, transparent, var(--purple-300), transparent); transform:scaleX(0); transform-origin:center; transition:transform .24s ease; filter:blur(.1px);} 
.nav-link:hover::after,.nav-link:focus::after{transform:scaleX(1);}    
.nav-link:hover{ text-shadow:0 0 14px rgba(185,149,255,.35);} 

/* Early Access CTA — gradient + shine */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-weight:800; text-decoration:none; border-radius:999px; padding:12px 20px;}
.btn-early{color:#251446; background:linear-gradient(135deg, #ffffff 0%, #efe8ff 22%, #bba8ff 60%, #8e73ff 100%); border:none; box-shadow:inset 0 0 0 1px rgba(25, 12, 48, .28), 0 6px 18px rgba(123,92,255,.35); position:relative; overflow:hidden;}
.btn-early::after{content:""; position:absolute; inset:-120% -40% auto -40%; height:300%; background:linear-gradient(75deg, transparent, rgba(255,255,255,.7), transparent); transform:translateX(-100%);} 
.btn-early:hover::after{animation:shine 900ms ease forwards;} 
@keyframes shine{to{transform:translateX(120%);}}
.btn-early:focus{outline:2px solid #fff; outline-offset:2px;}










footer{background:var(--purple-900); padding-block:40px;}
  .footer-grid{display:grid; grid-template-columns: 1fr auto; gap:24px; align-items:center;}
  .links{display:flex; flex-direction:column; gap:8px; margin-top:12px;}
  .links a{color:#e9defa; text-decoration:none;}
  .links a:hover,.links a:focus{text-decoration:underline;}
  .footer-right{text-align:right}
  .socials{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
  .sbtn{display:inline-flex; width:40px; height:40px; border:1.5px solid rgba(255,255,255,.5); border-radius:12px; align-items:center; justify-content:center; transition:transform .12s ease;}
  .sbtn:hover{transform:translateY(-1px);}    
  .socials svg{width:22px; height:22px; fill:currentColor; color:#fff;}
  .copy{opacity:.8; font-size:.95rem; margin-top:12px;}
  .contact-link{color:#fff; text-decoration:none; background:linear-gradient(90deg, transparent, #fff, transparent); background-repeat:no-repeat; background-size:0 2px; background-position:0 100%; transition:background-size .25s ease; padding-bottom:2px}
  .contact-link:hover{background-size:100% 2px}
  

/* ===== Watchlists layout polish ===== */
.watchlists { padding-block: 40px 80px; }
.watchlists .section-title { 
  font-size: clamp(1.6rem, 2.2vw, 2.4rem); 
  margin: 0 0 8px; 
}
.watchlists .lead { 
  opacity: .9; 
  max-width: 68ch; 
  margin: 0 0 20px; 
}

/* Sticky toolbar keeps the CTA visible on scroll (desktop/tablet) */
.wl-toolbar {
  position: sticky;
  top: 76px;               /* matches your header height */
  z-index: 10;
  background: linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.0));
  backdrop-filter: saturate(140%) blur(0px);
  padding-block: 12px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.wl-toolbar .toolbar-row {
  display: flex; 
  align-items: center; 
  gap: 16px; 
  justify-content: space-between;
}
.wl-toolbar .toolbar-actions { display: flex; gap: 10px; }
.wl-toolbar .suggest-btn {
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  font-weight: 700;
}

/* Responsive grid for cards */
.wl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

/* Card look-and-feel */
.wl-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;      /* text | button */
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 6px;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.wl-card:hover { 
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
}

/* Title + meta */
.wl-title {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.25;
}
.wl-title__where { 
  display: inline-block; 
  font-weight: 700; 
  opacity: .9; 
}
.wl-copy, .wl-meta {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  opacity: .9;
  font-size: .95rem;
}

/* Button lives to the right, vertically centered */
.wl-btn {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  padding: 10px 16px;
  min-width: 8.5rem;
  border-radius: 999px;
  font-weight: 800;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 6px 18px rgba(123,92,255,.24);
}

/* Hot badge (kept minimal) */
.wl-card.popular::after {
  content: "🔥";
  position: absolute;
  top: 10px; 
  right: 10px;
  font-size: 1rem;
  line-height: 1;
}

/* Bottom “suggest” row keeps existing layout, but hide it on small screens (we'll float a button) */
.wl-suggest { margin-top: 18px; display: flex; justify-content: center; }
.wl-suggest .suggest-btn { 
  padding: 10px 14px; 
  border-radius: 999px; 
  border: 1px solid rgba(255,255,255,.16); 
  background: rgba(255,255,255,.06); 
  font-weight: 700; 
}

/* Mobile floating Suggest FAB */
@media (max-width: 720px) {
  .wl-toolbar { 
    position: static; 
    border-bottom: none; 
    padding-block: 0;
  }
  .wl-suggest { display: none; } /* we use the floating button instead */
  .suggest-fab {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 20;
    padding: 12px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.18);
    background: linear-gradient(135deg, rgba(255,255,255,.85), rgba(185,149,255,.85));
    color: #251446;
    font-weight: 800;
    box-shadow: 0 10px 24px rgba(0,0,0,.35);
  }
}

/* Footnote spacing */
.wl-footnote { 
  margin-top: 20px; 
  opacity: .75; 
  font-size: .9rem; 
  text-align: center; 
}

.wl-toolbar { 
    position: sticky; 
    top: 76px;           /* matches your header height */
    z-index: 10;
    padding-block: 12px 6px;
    background: linear-gradient(180deg, rgba(34,10,52,.85), rgba(34,10,52,0));
    border-bottom: 1px solid rgba(255,255,255,.06);
  }
  
  .wl-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); 
    gap: 16px; 
    margin-top: 12px;    /* <-- key spacing from toolbar */
  }
  

/* --- Toolbar spacing + readability --- */
.wl-toolbar {
    position: sticky;
    top: 76px;                 /* your header height */
    z-index: 10;
    padding: 14px 0 16px;      /* more bottom padding */
    margin-bottom: 10px;       /* <-- pushes the grid down */
    background: linear-gradient(180deg, rgba(34,10,52,.92), rgba(34,10,52,.65)); /* not fully transparent */
    border-bottom: 1px solid rgba(255,255,255,.08);
    backdrop-filter: saturate(140%) blur(6px);
  }

  /* --- Grid: wide pills --- */
.wl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(520px, 1fr)); /* wider columns */
    gap: 18px;
  }
  
  /* --- Card: long pill aesthetic --- */
  .wl-card {
    display: grid;
    grid-template-columns: 1fr auto;    /* text | button */
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 18px;
    row-gap: 4px;
    padding: 18px 22px;                 /* a touch roomier */
    border-radius: 22px;                /* rounder “pill” */
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 10px 26px rgba(0,0,0,.18);
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  }
  .wl-card:hover {
    transform: translateY(-1px);
    border-color: rgba(255,255,255,.18);
    box-shadow: 0 14px 32px rgba(0,0,0,.22);
  }
  
  .wl-title {
    grid-column: 1;
    grid-row: 1;
    margin: 0 0 2px;
    font-size: 1.05rem;       /* keep compact */
    font-weight: 800;
    line-height: 1.25;
  }
  
  .wl-copy, .wl-meta {
    grid-column: 1;
    grid-row: 2;
    margin: 0;
    opacity: .92;
    font-size: .95rem;
  }
  
  /* Right-aligned button, vertically centered */
  .wl-btn {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    justify-self: end;
    padding: 12px 18px;
    min-width: 9.5rem;
    border-radius: 999px;
    font-weight: 800;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 8px 20px rgba(123,92,255,.28);
  }
  
  /* Subtle hot badge */
  .wl-card.popular::after {
    content: "🔥";
    position: absolute;
    top: 10px; right: 12px;
    font-size: 0.95rem;
    opacity: .9;
  }
  
  /* Mobile: narrower pills, stack nicely */
  @media (max-width: 640px) {
    .wl-grid {
      grid-template-columns: 1fr;
    }
    .wl-card {
      grid-template-columns: 1fr;
      grid-template-rows: auto auto auto;
      row-gap: 8px;
      padding: 16px 18px;
    }
    .wl-btn {
      grid-column: 1;
      grid-row: 3;
      justify-self: start;
    }
  }

/* Mobile floating Suggest FAB */
@media (max-width: 720px) {
    .suggest-fab {
      position: fixed;
      right: 16px;
      bottom: 16px;
      z-index: 20;
      padding: 12px 16px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.18);
      background: linear-gradient(135deg, #ffffff, rgba(185,149,255,.95));
      color: #251446;
      font-weight: 800;
      box-shadow: 0 10px 24px rgba(0,0,0,.35);
    }
  }

  .watchlists .section-title { text-align:center; margin: 40px 0 8px; }
  .watchlists .lead { text-align:center; max-width: 72ch; margin: 0 auto 32px; }
  
  /* Header spacing like your second screenshot */
.section-title.wordmark { text-align:center; margin: 40px 0 8px; }
.lead-intro { 
  text-align:center; 
  max-width: 72ch; 
  margin: 0 auto 32px;   /* creates the space before the cards */
  opacity: .95;
}

/* Ensure the grid isn't forced back up */
.wl-grid { margin-top: 0; }     /* normal flow; don't use !important here */



  /* same scale/feel as the “We are Tixster” hero */
.section-title.wordmark{
    font-size: clamp(1.9rem, 2.4vw, 3rem);
    line-height: 1.08;
    margin: 0 0 12px;
    text-shadow: 0 1px 0 rgba(0,0,0,.25), 0 12px 32px rgba(185,149,255,.25);
  }
  
  .lead, .lead-intro{
    font-family: var(--font-text);
    font-size: clamp(1.05rem, 1.2vw, 1.25rem);
    line-height: 1.8;
    max-width: 980px;
    margin: 14px auto 26px;
    text-align: center;
    opacity: .95;
  }