:root{
  --bg:#070b11;
  --panel:#0e1420;
  --card:#11192a;
  --border:#22324b;
  --text:#eafbff;
  --muted:#a8c4cf;
  --heading:#7cf3ef;
  --accent:#46f0ff;
  --accent2:#27dbc9;
  --shadow:0 14px 36px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html,body{
  margin:0;padding:0;color:var(--text);font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  line-height:1.55;scroll-behavior:smooth;
  background:
    radial-gradient(1200px 400px at 50% -120px,#0a1522,transparent),
    linear-gradient(180deg,#061018 0%, #070b11 60%, #070b11 100%);
}

/* progress bar */
#progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--accent2),var(--accent));z-index:1000;box-shadow:0 0 12px rgba(70,240,255,.5) inset}

/* animated blobs */
.bg-blob{position:fixed;z-index:-1;filter:blur(50px);opacity:.25;pointer-events:none;mix-blend-mode:screen}
.blob-a{width:40vmax;height:40vmax;background:radial-gradient(circle,var(--accent),transparent 60%);top:-10vmax;left:-10vmax;animation:floatA 18s ease-in-out infinite alternate}
.blob-b{width:35vmax;height:35vmax;background:radial-gradient(circle,var(--accent2),transparent 60%);bottom:-8vmax;right:-8vmax;animation:floatB 22s ease-in-out infinite alternate}
@keyframes floatA{from{transform:translate(0,0)}to{transform:translate(8vmax,4vmax)}}
@keyframes floatB{from{transform:translate(0,0)}to{transform:translate(-6vmax,-3vmax)}}

/* layout helpers */
.container{max-width:1100px;margin:0 auto;padding:26px 18px}
.center{text-align:center}
.center-row{justify-content:center}

/* hero */
.hero{
  margin-top:10px;background:linear-gradient(180deg,rgba(39,219,201,.08),transparent 70%);
  border:1px solid var(--border);border-radius:18px;padding:34px 26px;box-shadow:var(--shadow)
}
.title{margin:0 0 14px;font-size:clamp(28px,4.6vw,56px);font-weight:800;letter-spacing:.2px}
.heading-color{color:var(--heading);text-shadow:0 0 22px rgba(124,243,239,.18)}
#cursor{display:inline-block;margin-left:4px;color:var(--heading);animation:blink 1s steps(2,end) infinite}
@keyframes blink{50%{opacity:0}}
.lede{color:var(--muted);margin:14px 0 18px}

/* buttons */
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0 14px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:14px;font-weight:800;cursor:pointer;letter-spacing:.2px;text-decoration:none;transition:transform .15s ease, box-shadow .2s ease}
.btn.neon{color:#02151a;background:var(--accent);box-shadow:0 6px 20px rgba(70,240,255,.35), inset 0 -3px 0 rgba(0,0,0,.15)}
.btn.neon:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(70,240,255,.5)}
.ripple{position:relative;overflow:hidden}
.ripple::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--x,50%) var(--y,50%), rgba(255,255,255,.35), rgba(255,255,255,0) 40%);opacity:0;transition:opacity .25s ease}
.ripple:hover::after{opacity:1}

/* magnetic hover (JS will translate) */
.magnetic{will-change:transform}

/* hashtags */
.pill-container{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin:16px 0 6px}
.pill{
  padding: 8px 20px;border-radius: 25px;border: 1px solid rgba(0, 255, 255, 0.28);
  background: rgba(0, 255, 255, 0.06);color: #aefcff;font-size: 15px;font-weight: 500;
  transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
  opacity:0;transform:translateY(8px);animation:chip-in .45s ease forwards
}
.pill:hover{background: rgba(0, 255, 255, 0.14);transform: translateY(-2px) scale(1.04);box-shadow: 0 0 14px rgba(0, 255, 255, 0.35)}
.pill:nth-child(1){animation-delay:.05s}.pill:nth-child(2){animation-delay:.15s}.pill:nth-child(3){animation-delay:.25s}.pill:nth-child(4){animation-delay:.35s}.pill:nth-child(5){animation-delay:.45s}
@keyframes chip-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* robot */
.robot{display:flex;align-items:center;gap:10px;justify-content:center;margin:10px 0 10px}
.bot{font-size:30px;line-height:1;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));animation:bot-bob 3s ease-in-out infinite}
.bubble{color:var(--heading);background:rgba(124,243,239,.08);border:1px solid var(--border);border-radius:14px;padding:8px 12px;box-shadow:0 10px 30px rgba(0,0,0,.25);opacity:0;transform:translateX(-10px);animation:bubble-in .6s ease .35s forwards}
.greet{animation:greet-slide .6s ease .15s both}
@keyframes bot-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
@keyframes bubble-in{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}
@keyframes greet-slide{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:translateX(0)}}

/* scroll indicator */
.scroll-indicator{margin-top:12px;color:var(--heading);font-weight:800;letter-spacing:.2px;animation:bounce 1.8s infinite}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* sections */
.section{margin:30px 0 14px}
.section-title{font-size:26px;margin:0 0 8px;color:var(--heading);text-shadow:0 0 18px rgba(70,240,255,.2)}
.desc{color:var(--muted);margin:2px 0 16px}

/* turquoise emphasis */
.lede strong,.panel-copy strong,.about-card h3,.section-title{color:var(--heading)}

/* about grid */
.about{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.about-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px 18px;box-shadow:var(--shadow)}
.about-card h3{margin:4px 0 6px;font-size:16px}
.link{color:var(--accent)} .link:hover{text-decoration:underline}

/* panels */
.grid{display:grid;gap:18px;grid-template-columns:1fr}
.panel{background:var(--panel);border:1px solid var(--border);border-radius:18px;overflow:hidden;box-shadow:var(--shadow);padding:12px;transform-style:preserve-3d;transition:transform .2s ease}
.panel-copy h3{margin:4px 0 6px}
.panel-copy p{color:var(--muted);margin:2px 0 8px}
.fig-wrap{padding:8px}
.fig{width:100%;display:block;border-radius:12px;cursor:zoom-in;transition:transform .25s ease, filter .25s ease}
.hover-lift:hover .fig{transform:scale(1.02);filter:saturate(1.06)}
@media (min-width:900px){.grid{grid-template-columns:1fr 1fr}}

/* footer */
.footer{color:var(--muted);padding:30px 0 56px;border-top:1px solid rgba(255,255,255,.06);margin-top:28px}

/* lightbox */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.86);display:none;align-items:center;justify-content:center;z-index:100}
.lightbox img{max-width:92vw;max-height:92vh;border-radius:12px;box-shadow:0 18px 42px rgba(0,0,0,.65);animation:pop .15s ease}
@keyframes pop{from{transform:scale(.98);opacity:0}to{transform:scale(1);opacity:1}}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease, transform .6s ease}
.reveal.visible{opacity:1;transform:translateY(0)}
/* stagger children */
.reveal.visible .about-card,
.reveal.visible .panel{animation:fadeUp .5s ease both}
.reveal.visible .about-card:nth-child(2),
.reveal.visible .panel:nth-child(2){animation-delay:.06s}
.reveal.visible .about-card:nth-child(3),
.reveal.visible .panel:nth-child(3){animation-delay:.12s}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* back to top */
.to-top{position:fixed;right:18px;bottom:18px;background:linear-gradient(90deg,var(--accent2),var(--accent));color:#001015;border:none;border-radius:12px;padding:10px 12px;font-weight:800;cursor:pointer;opacity:0;transform:translateY(6px);transition:opacity .25s ease, transform .25s ease;z-index:999}
.to-top.show{opacity:1;transform:translateY(0)}

/* custom cursor */
.cursor-dot,.cursor-ring{position:fixed;left:0;top:0;pointer-events:none;z-index:2000;mix-blend-mode:screen}
.cursor-dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.cursor-ring{width:28px;height:28px;border:2px solid rgba(70,240,255,.5);border-radius:50%;transform:translate(-11px,-11px);transition:width .15s ease, height .15s ease, border-color .2s ease, transform .03s ease}
.cursor-ring.active{width:40px;height:40px;border-color:rgba(70,240,255,.9)}

/* Force About + Analysis sections to center properly */
.section,
.about {
  text-align: center;       /* centers text inside */
  margin-left: auto;
  margin-right: auto;       /* centers the block itself */
}

/* Fix the grid of cards so it stays centered */
.about {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
  justify-content: center;  /* ensure grid items align to center */
  max-width: 1000px;        /* cap width so it doesn't sprawl */
}

/* Ensure section titles and description are centered */
.section-title,
.section .desc {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 900px;         /* keeps paragraph nice and readable */
}
/* Glowing hover effect for the main title */
.title {
  margin: 0 0 8px;
  font-size: clamp(28px,4.6vw,56px);
  font-weight: 800;
  letter-spacing: .2px;
  color: var(--heading);
  text-shadow: 0 0 22px rgba(124,243,239,.18);
  transition: text-shadow 0.3s ease, color 0.3s ease;
  cursor: pointer;
}

.title:hover {
  color: #7cf3ef;
  text-shadow: 
    0 0 10px #46f0ff,
    0 0 20px #46f0ff,
    0 0 40px #27dbc9,
    0 0 60px #27dbc9;
}

.about-desc {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px;
  box-shadow: var(--shadow);
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
  max-width: 900px;
  margin: 0 auto; /* centers it */
}

.about-desc strong {
  color: var(--heading);
}

.about-desc ul {
  margin: 12px 0;
  padding-left: 20px;
}

.about-desc li {
  margin-bottom: 8px;
  color: var(--heading);
  font-weight: 600;
}
/* ============================
   ABOUT (3-card highlight row)
   ============================ */

/* wrapper */
.dataset-highlights{
  max-width: 1100px;        /* same as .container */
  margin: 36px auto 12px;   /* center the whole section */
  padding: 0 18px;
  text-align: center;
}

/* title */
.dataset-highlights h2{
  color: var(--heading);
  text-shadow: 0 0 18px rgba(124,243,239,.18);
  margin: 0 0 18px;
  font-size: clamp(22px, 3.4vw, 36px);
  font-weight: 800;
}

/* the 3-card row, centered, responsive */
.highlight-boxes{
  display: grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: 18px;
  justify-items: center;    /* center each card in its cell */
  align-items: stretch;
  max-width: 1000px;        /* cap the row width so it doesn’t sprawl */
  margin: 0 auto;           /* center the grid block */
}

/* individual card */
.box{
  width: 100%;
  background: var(--card);                 /* dark card to match theme */
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: var(--shadow);
  color: var(--muted);                     /* readable on dark bg */
  text-align: left;                        /* nicer for paragraphs */
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  position: relative;
  overflow: hidden;
}

/* subtle gradient sheen on hover */
.box::after{
  content: "";
  position: absolute; inset: -2px;
  background: radial-gradient(120px 40px at var(--mx,50%) -20px,
              rgba(124,243,239,.18), transparent 65%);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
.box:hover::after{ opacity: 1; }

.box:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 42px rgba(0,0,0,.45);
  border-color: rgba(124,243,239,.35);
}

/* card title */
.box h3{
  margin: 0 0 8px;
  color: var(--heading);
  font-size: 18px;
  font-weight: 800;
}

/* card text */
.box p{
  margin: 0;
  line-height: 1.55;
}

/* responsive: 2 columns then 1 column */
@media (max-width: 1100px){
  .highlight-boxes{
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    max-width: 820px;
  }
}
@media (max-width: 700px){
  .highlight-boxes{
    grid-template-columns: 1fr;
    max-width: 560px;
  }
}

/* small helper to center the “Analysis” heading/desc right below */
.section.center{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.section.center .desc{
  max-width: 900px;
  text-align: center;
  margin: 6px auto 16px;
}