:root{
  --background: 213 45% 67%;
  --foreground: 0 0% 100%;
  --primary: 0 0% 100%;
  --primary-foreground: 213 45% 67%;
  --border: 0 0% 100% / 0.2;
  --radius: 9999px;
  --font-heading: 'Instrument Serif', serif;
  --font-body: 'Barlow', sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  background:#000;
  color:hsl(var(--foreground));
  font-family:var(--font-body);
  overflow-x:hidden;
}
.font-heading{font-family:var(--font-heading)}
/* liquid glass */
.liquid-glass{
  background: rgba(255,255,255,0.01);
  background-blend-mode: luminosity;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: none;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.1);
  position: relative;
  overflow: hidden;
}
.liquid-glass::before{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1.4px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%,
    rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
    rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
}
.liquid-glass-strong{
  background: rgba(255,255,255,0.01);
  background-blend-mode: luminosity;
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px);
  border: none;
  box-shadow: 4px 4px 4px rgba(0,0,0,0.05), inset 0 1px 1px rgba(255,255,255,0.15);
  position: relative;
  overflow: hidden;
}
.liquid-glass-strong::before{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1.4px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.2) 20%,
    rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
    rgba(255,255,255,0.2) 80%, rgba(255,255,255,0.5) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
}
/* buttons */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  border:none;cursor:pointer;
  border-radius:9999px;
  font-family:var(--font-body);
}
.btn-solid{background:#fff;color:#000;padding:12px 22px;font-weight:500;font-size:14px}
.btn-glass{padding:14px 26px;color:#fff;font-size:14px;font-weight:400}
.btn-text{background:none;border:none;cursor:pointer;color:#fff;font-family:var(--font-body);font-size:14px;display:inline-flex;align-items:center;gap:8px}
/* badge */
.badge{
  display:inline-block;
  border-radius:9999px;
  padding:0.35rem 0.875rem;
  font-size:0.75rem;
  font-weight:500;
  color:#fff;
  font-family:var(--font-body);
  margin-bottom:1rem;
}
/* headings */
.heading{
  font-family:var(--font-heading);
  font-style:italic;
  color:#fff;
  letter-spacing:-0.025em;
  line-height:0.9;
  font-weight:400;
}
/* navbar */
.navbar{
  position:fixed;top:1rem;left:0;width:100%;z-index:50;
  display:flex;justify-content:center;padding:0 1rem;
}
.nav-pill{
  display:flex;align-items:center;gap:1.5rem;
  padding:8px 12px;
  border-radius:9999px;
}
.nav-logo{width:48px;height:48px;display:flex;align-items:center;justify-content:center;font-family:var(--font-heading);font-style:italic;font-size:20px;border:1px solid rgba(255,255,255,0.2);border-radius:12px}
.nav-links{display:flex;gap:1.25rem;align-items:center}
.nav-link{color:rgba(255,255,255,0.9);font-size:0.875rem;font-weight:500;cursor:pointer;text-decoration:none;font-family:var(--font-body)}
.nav-cta{background:#fff;color:#000;border-radius:9999px;padding:8px 18px;font-size:0.875rem;font-weight:500;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-family:var(--font-body)}
/* hero */
.hero{position:relative;height:1000px;background:#000;overflow:visible}
.hero-video{position:absolute;top:20%;width:100%;height:auto;object-fit:contain;z-index:0}
.hero-overlay{position:absolute;inset:0;background:rgba(0,0,0,0.05);z-index:0}
.hero-bottom{position:absolute;bottom:0;left:0;right:0;height:300px;z-index:1;background:linear-gradient(to bottom, transparent, #000)}
.hero-content{position:relative;z-index:10;display:flex;flex-direction:column;align-items:center;padding-top:150px;text-align:center}
.hero-badge{display:inline-flex;align-items:center;gap:10px;border-radius:9999px;padding:6px 16px 6px 6px}
.badge-new{background:#fff;color:#000;border-radius:9999px;padding:4px 12px;font-size:0.75rem;font-weight:500;font-family:var(--font-body)}
.hero-heading{font-size:clamp(3.75rem,7vw,5.5rem);margin-top:1.5rem}
.hero-sub{color:rgba(255,255,255,0.6);font-family:var(--font-body);font-weight:300;font-size:0.875rem;max-width:520px;margin-top:1.5rem;line-height:1.6}
.hero-ctas{display:flex;align-items:center;gap:1.5rem;margin-top:2rem}
/* blur word */
.blur-word{display:inline-block;opacity:0;filter:blur(10px);transform:translateY(50px);animation:blurWord 1.05s cubic-bezier(0.25,0.1,0.25,1) forwards}
@keyframes blurWord{
  0%{opacity:0;filter:blur(10px);transform:translateY(50px)}
  33%{opacity:0.5;filter:blur(5px);transform:translateY(-5px)}
  100%{opacity:1;filter:blur(0px);transform:translateY(0)}
}
.blur-in{opacity:0;filter:blur(8px);animation:blurIn 0.9s cubic-bezier(0.25,0.1,0.25,1) forwards}
@keyframes blurIn{from{opacity:0;filter:blur(8px)}to{opacity:1;filter:blur(0)}}
/* partners */
.partners{display:flex;flex-direction:column;align-items:center;padding:4rem 1rem 3rem}
.partner-names{display:flex;gap:3rem;margin-top:1.5rem;flex-wrap:wrap;justify-content:center}
.partner-names span{font-family:var(--font-heading);font-style:italic;font-size:clamp(1.5rem,3vw,1.875rem);color:#fff}
/* sections general */
.section{position:relative}
.video-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.fade-top,.fade-bottom{position:absolute;left:0;right:0;height:200px;z-index:1;pointer-events:none}
.fade-top{top:0;background:linear-gradient(to bottom, #000, transparent)}
.fade-bottom{bottom:0;background:linear-gradient(to top, #000, transparent)}
.section-content{position:relative;z-index:10}
/* start section */
.start{min-height:700px;padding:8rem 1.5rem;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
.start-inner{min-height:500px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.start h2{font-size:clamp(2.25rem,5vw,3.75rem)}
.start p{color:rgba(255,255,255,0.6);font-weight:300;font-size:0.875rem;max-width:560px;margin-top:1.25rem;line-height:1.6}
.start .btn{margin-top:2rem}
/* features chess */
.chess{padding:6rem 1.5rem;max-width:1200px;margin:0 auto}
.chess-header{text-align:center;margin-bottom:4rem}
.chess-header h2{font-size:clamp(2.25rem,5vw,3.75rem);margin-top:0.5rem}
.chess-row{display:flex;gap:3rem;align-items:center;margin-bottom:5rem}
.chess-row.reverse{flex-direction:row-reverse}
.chess-text{flex:1}
.chess-text h3{font-family:var(--font-heading);font-style:italic;color:#fff;font-size:clamp(1.5rem,3vw,2.25rem);line-height:1.1;font-weight:400}
.chess-text p{color:rgba(255,255,255,0.6);font-weight:300;font-size:0.875rem;margin-top:1rem;line-height:1.6}
.chess-text .btn{margin-top:1.5rem}
.chess-image{flex:1}
.chess-image .gif-box{border-radius:1rem;overflow:hidden;min-height:260px;display:flex;align-items:center;justify-content:center}
.gif-placeholder{width:100%;height:260px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1a2a3a 0%, #2a1a3a 100%)}
.gif-placeholder span{font-family:var(--font-heading);font-style:italic;font-size:2rem;color:rgba(255,255,255,0.5)}
/* grid */
.grid-sec{max-width:1200px;margin:0 auto;padding:6rem 1.5rem}
.grid-sec .badge{display:block;text-align:center}
.grid-header{text-align:center;margin-bottom:3rem}
.grid-header h2{font-size:clamp(2.25rem,5vw,3.75rem);margin-top:0.5rem}
.grid{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media(min-width:768px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.grid{grid-template-columns:repeat(4,1fr)}}
.card{border-radius:1rem;padding:1.5rem}
.card-icon{width:2.5rem;height:2.5rem;border-radius:9999px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;margin-bottom:1rem}
.card h3{font-family:var(--font-heading);font-style:italic;font-size:1.125rem;color:#fff;font-weight:400}
.card p{color:rgba(255,255,255,0.6);font-weight:300;font-size:0.875rem;margin-top:0.5rem;line-height:1.5}
/* stats */
.stats{position:relative;padding:4rem 1.5rem}
.stats-panel{border-radius:1.5rem;padding:3rem;display:grid;grid-template-columns:repeat(2,1fr);gap:2rem;text-align:center}
@media(min-width:1024px){.stats-panel{grid-template-columns:repeat(4,1fr)}}
.stat-value{font-family:var(--font-heading);font-style:italic;font-size:clamp(2.25rem,6vw,3.75rem);color:#fff}
.stat-label{color:rgba(255,255,255,0.6);font-weight:300;font-size:0.875rem;margin-top:0.25rem}
/* testimonials */
.testi{max-width:1200px;margin:0 auto;padding:6rem 1.5rem}
.testi-header{text-align:center;margin-bottom:3rem}
.testi-header h2{font-size:clamp(2.25rem,5vw,3.75rem);margin-top:0.5rem}
.testi-grid{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media(min-width:768px){.testi-grid{grid-template-columns:repeat(3,1fr)}}
.testi-card{border-radius:1rem;padding:2rem}
.testi-card blockquote{color:rgba(255,255,255,0.8);font-weight:300;font-size:0.875rem;font-style:italic;line-height:1.6}
.testi-name{color:#fff;font-weight:500;font-size:0.875rem;margin-top:1rem}
.testi-role{color:rgba(255,255,255,0.5);font-weight:300;font-size:0.75rem;margin-top:0.25rem}
/* cta */
.cta-sec{position:relative;padding:6rem 1.5rem;text-align:center}
.cta-sec h2{font-size:clamp(3rem,7vw,4.5rem);max-width:800px;margin:0 auto}
.cta-sec p{color:rgba(255,255,255,0.6);font-weight:300;font-size:0.875rem;margin-top:1.25rem}
.cta-btns{display:flex;gap:1rem;justify-content:center;margin-top:2rem}
.footer{margin-top:8rem;padding-top:2rem;border-top:1px solid rgba(255,255,255,0.1)}
.footer-copy{color:rgba(255,255,255,0.4);font-size:0.75rem;margin-top:1rem}
.footer-links{display:flex;gap:1.5rem;justify-content:center;margin-top:1rem}
.footer-links a{color:rgba(255,255,255,0.4);font-size:0.75rem;text-decoration:none}
@media(max-width:768px){
  .nav-links{display:none}
  .chess-row,.chess-row.reverse{flex-direction:column}
}

/* ui note */
.grid-sec .card{
  background:
    linear-gradient(180deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.62) 55%, rgba(0,0,0,.72) 100%);
  backdrop-filter: blur(22px) saturate(130%);
  -webkit-backdrop-filter: blur(22px) saturate(130%);
  box-shadow:
    0 30px 80px rgba(0,0,0,.85),
    0 10px 30px rgba(0,0,0,.6),
    inset 0 1px 1px rgba(255,255,255,.10);
  text-shadow: 0 1px 3px rgba(0,0,0,.85);
}
.grid-sec .card h3,
.grid-sec .card p,
.grid-sec .card b{ text-shadow: 0 1px 4px rgba(0,0,0,.9); }
.grid-sec .card p{ color: rgba(255,255,255,.86) }
.grid-sec .card p[style*="opacity"]{ opacity:1 !important }


/* TOLAB-MOBILE-FIX — 2026-10-30 */
@media(max-width:768px){
  .hero{height:auto;min-height:88svh;padding-bottom:3rem}
  .hero-video{position:absolute;top:0;height:100%;width:100%;object-fit:cover;opacity:.55}
  .hero-content{padding:96px 1.15rem 0}
  .hero-content h1{font-size:clamp(1.9rem,7.6vw,2.6rem);line-height:1.14;letter-spacing:-.02em}
  .hero-sub{font-size:1rem;line-height:1.6;max-width:32ch;margin-inline:auto}
  #tolab-services{grid-template-columns:1fr !important;gap:1.25rem !important;margin-top:1.5rem !important}
  .platform-grid{grid-template-columns:1fr !important}
  .feature-grid{grid-template-columns:1fr !important}
  .start{min-height:auto;padding:3.5rem 1.15rem}
  .start-inner{min-height:auto}
  .mission-section,.solution-section{padding:3rem 1.15rem}
  .stats-panel{grid-template-columns:repeat(2,1fr) !important}
  .footer{margin-top:3rem}
}
@media(min-width:769px){
  .hero-video{top:18%}
}


/* TOLAB-HERO-FIX — 2026-10-30 (desktop readability + no giant gap) */
.hero{height:auto !important;min-height:100svh}
#tolab-services{max-width:900px !important;width:100%;gap:14px !important}
#tolab-services > div{
  background:rgba(8,12,18,.55) !important;
  -webkit-backdrop-filter:blur(12px) saturate(120%);
  backdrop-filter:blur(12px) saturate(120%);
  border:1px solid rgba(255,255,255,.14) !important;
  border-radius:14px !important;
  padding:16px 18px !important;
  text-align:left;
}
#tolab-services > div > div:first-child{font-size:1rem;letter-spacing:.01em}
#tolab-services > div > div:last-child{font-size:.88rem;line-height:1.5;opacity:.82}
@media(min-width:980px){#tolab-services{grid-template-columns:repeat(3,minmax(0,1fr)) !important}}
.tl-sub{max-width:60ch;margin-inline:auto}