@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: 600;  /* 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 */
}
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;}

.faq-page{
    /* on-brand layered background like your CTA/Hero */
    background:
      radial-gradient(900px 520px at 14% 10%, rgba(185,149,255,.18), transparent 60%),
      radial-gradient(1000px 600px at 86% 0%, rgba(110,38,199,.16), transparent 62%),
      linear-gradient(180deg, var(--purple-700), var(--purple-850) 65%);
    min-height:100dvh;
  }
  
  .faq-hero{
    text-align:center;
    padding:80px 20px 36px;
    position:relative;
  }
  .faq-hero::after{
    content:""; position:absolute; inset:auto 0 0 0; height:120px;
    background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.12));
    pointer-events:none;
  }
  .faq-hero .wordmark{font-size:clamp(2rem,3.2vw,3rem); font-weight:800; text-shadow:0 12px 32px rgba(185,149,255,.25);}
  .faq-hero .lead{margin-top:10px; opacity:.95}
  
  .faq-wrap{max-width:980px; margin:0 auto 80px; padding:0 20px;}
  .faq-group-title{
    margin:28px 0 16px; text-align:center; font-weight:800; font-size:clamp(1.25rem,2vw,1.6rem);
    color:#fff; text-shadow:0 10px 28px rgba(110,38,199,.28);
  }
  
  /* Accordion (native details) */
  .faq-item{
    border-radius:16px;
    background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
    border:1px solid rgba(255,255,255,.14);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 10px 24px rgba(0,0,0,.25);
    overflow:hidden;
    margin:12px 0;
  }
  
  /* Remove default marker */
  .faq-item summary{
    list-style:none;
    cursor:pointer;
    position:relative;
    padding:18px 56px 18px 20px;
    display:flex; align-items:center; gap:10px;
    font-weight:700;
  }
  .faq-item summary::-webkit-details-marker{display:none}
  
  /* Chevron not really happy with it*/
  .faq-item summary::after{
    content:""; position:absolute; right:18px; top:50%; width:18px; height:18px;
    transform:translateY(-50%) rotate(0deg);
    border-right:2px solid rgba(255,255,255,.8);
    border-bottom:2px solid rgba(255,255,255,.8);
    border-radius:2px;
    transition:transform .25s ease;
    /* draw a chevron from borders */
    transform-origin:50% 50%;
  }
  .faq-item[open] summary::after{ transform:translateY(-50%) rotate(225deg); }
  
  /* Panel with smooth height */
  .faq-panel{
    overflow:hidden;
    max-height:0;
    opacity:.0;
    padding:0 20px;
    transition:max-height .35s ease, opacity .25s ease, padding .35s ease;
  }
  .faq-item[open] .faq-panel{
    max-height:600px;           /* enough for long answers */
    opacity:1;
    padding:0 20px 18px;
  }
  
  .faq-panel p{line-height:1.7; opacity:.95; margin:12px 0 0;}
  
  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}
  

/* FAQ background — same solid color as site */
body.faq-page,
.faq-page {
  min-height: 100dvh;
  background: var(--purple-850) !important;
}



.faq-group-title {
  text-shadow: 0 10px 28px rgba(110,38,199,.28);
  opacity: .98;
}