:root{
  --bg:#0f1220; --card:#15193a; --card-2:#101431;
  --text:#e7e8ff; --muted:#a9acd6; --accent:#7ef0b6;
  --pink:#ff8ad6; --sky:#7bd7ff; --yellow:#ffd36a;
  --ring:#232857; --shadow:0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{
  height:auto;min-height:100%;overflow-x:hidden;color:var(--text);
  font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:
    radial-gradient(1200px 800px at 10% 0%, #1a1f4d 0%, rgba(26,31,77,0) 60%),
    radial-gradient(900px 700px at 90% 10%, #1b2f46 0%, rgba(27,47,70,0) 55%),
    var(--bg);
}
.container{max-width:1200px;margin-inline:auto;padding:clamp(16px,3vw,28px)}
main{display:block}
section:last-child,.container:last-child{margin-bottom:0!important;padding-bottom:32px}

/* Header */
.site-header{display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px}
.logo-bubble{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--sky),var(--pink));box-shadow:0 8px 20px rgba(123,215,255,.35)}
.brand-name{font-weight:800;letter-spacing:.5px;font-size:22px}

/* Hero */
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:36px;align-items:center}
.hero h1{font-size:clamp(34px,5vw,56px);line-height:1.05;margin:0 0 12px}
.hero .lead{font-size:clamp(16px,2.15vw,20px);color:var(--muted);max-width:56ch}
.accent{background:linear-gradient(90deg,var(--accent),var(--sky));-webkit-background-clip:text;background-clip:text;color:transparent}
.subtle{color:#8f93c7;font-size:13px;margin-top:8px}

/* Logo image beside brand name */
.brand-logo{
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 4px 12px rgba(123,215,255,.4);
}

/* Hero banner image */
.hero-banner{
  position:absolute;
  inset:0;
  width:80%;
  height:auto;
  object-fit:cover;
  border-radius:24px;
  opacity:0.25;
  z-index:0;
}
.hero-visual{ position:relative; overflow:hidden; }
.bubbles{ position:relative; z-index:1; }


/* —— Hero right visual: colorful bubbles (single transform animation) —— */
.hero-visual{
  --h: 420px;                     /* animation height */
  position: relative;
  min-height: var(--h);
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid #28306a;
  box-shadow: var(--shadow);
  background:
    radial-gradient(120% 160% at 70% 30%, rgba(123,215,255,.10), transparent 60%),
    radial-gradient(120% 160% at 30% 70%, rgba(255,138,214,.08), transparent 60%),
    linear-gradient(180deg, var(--card), var(--card-2));
}
.bubbles{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }

/* Each bubble: one animation that handles X drift + full Y rise */
.bubble{
  position:absolute;
  bottom:-60px;                   /* start just below frame */
  left:var(--x);
  width:var(--s); height:var(--s);
  border-radius:50%;
  opacity:.88;
  background: radial-gradient(circle at 35% 30%, var(--c1), var(--c2) 60%);
  will-change: transform;
  animation: float-up var(--t) linear infinite;
  transform: translate3d(0,0,0) scale(1);
}

/* Travel the full panel height (+80px) while gently swaying */
@keyframes float-up{
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(calc(var(--dx)/2),
                               calc(-1 * (var(--h)/2 + 40px)), 0) scale(1.04); }
  100% { transform: translate3d(0,
                               calc(-1 * (var(--h) + 80px)), 0) scale(1); }
}

/* Colorful variants + timings (18 bubbles) */
.bubble:nth-child(1){  --s:60px; --x:10%; --t:26s; --dx:24px; --c1:#ff8ad6; --c2:#d67fff; animation-delay:-3s;}
.bubble:nth-child(2){  --s:30px; --x:18%; --t:18s; --dx:-18px; --c1:#7ef0b6; --c2:#91ffe2; animation-delay:-6s;}
.bubble:nth-child(3){  --s:44px; --x:28%; --t:22s; --dx:20px; --c1:#7bd7ff; --c2:#9de4ff; animation-delay:-10s;}
.bubble:nth-child(4){  --s:28px; --x:36%; --t:16s; --dx:-12px; --c1:#ffd36a; --c2:#ffe9a2; animation-delay:-2s;}
.bubble:nth-child(5){  --s:38px; --x:45%; --t:24s; --dx:14px; --c1:#9aa1ff; --c2:#d3d5ff; animation-delay:-8s;}
.bubble:nth-child(6){  --s:70px; --x:55%; --t:28s; --dx:16px; --c1:#7ef0b6; --c2:#9affdc; animation-delay:-12s;}
.bubble:nth-child(7){  --s:22px; --x:64%; --t:15s; --dx:-10px; --c1:#ff8ad6; --c2:#ffc3f1; animation-delay:-4s;}
.bubble:nth-child(8){  --s:32px; --x:72%; --t:20s; --dx:10px; --c1:#7bd7ff; --c2:#ace4ff; animation-delay:-9s;}
.bubble:nth-child(9){  --s:46px; --x:80%; --t:25s; --dx:-15px; --c1:#ffd36a; --c2:#fff1b5; animation-delay:-7s;}
.bubble:nth-child(10){ --s:20px; --x:88%; --t:14s; --dx:8px;  --c1:#9aa1ff; --c2:#c9ccff; animation-delay:-1s;}
.bubble:nth-child(11){ --s:40px; --x:15%; --t:19s; --dx:12px; --c1:#7ef0b6; --c2:#afffe4; animation-delay:-11s;}
.bubble:nth-child(12){ --s:24px; --x:25%; --t:17s; --dx:-10px; --c1:#7bd7ff; --c2:#b6eaff; animation-delay:-5s;}
.bubble:nth-child(13){ --s:50px; --x:37%; --t:23s; --dx:16px; --c1:#ff8ad6; --c2:#ffd2f3; animation-delay:-13s;}
.bubble:nth-child(14){ --s:36px; --x:49%; --t:21s; --dx:-12px; --c1:#ffd36a; --c2:#ffe8b1; animation-delay:-3s;}
.bubble:nth-child(15){ --s:26px; --x:60%; --t:18s; --dx:10px; --c1:#9aa1ff; --c2:#d0d3ff; animation-delay:-6s;}
.bubble:nth-child(16){ --s:52px; --x:70%; --t:24s; --dx:-14px; --c1:#7ef0b6; --c2:#b9ffe8; animation-delay:-9s;}
.bubble:nth-child(17){ --s:34px; --x:83%; --t:19s; --dx:9px;  --c1:#7bd7ff; --c2:#b0e9ff; animation-delay:-8s;}
.bubble:nth-child(18){ --s:28px; --x:91%; --t:16s; --dx:-8px; --c1:#ff8ad6; --c2:#ffc0ef; animation-delay:-2s;}

@media (prefers-reduced-motion: reduce){
  .bubble{ animation:none }
}

/* How */
.how h2{font-size:clamp(26px,3.5vw,40px);margin:0 0 10px}
.steps{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:16px;align-items:center}
.step-card{background:linear-gradient(180deg,var(--card),var(--card-2));border:1px solid #28306a;border-radius:20px;padding:20px;box-shadow:var(--shadow)}
.step-card h3{margin:6px 0 6px;font-size:20px}
.step-card p{margin:0;color:var(--muted)}
.step-badge{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--yellow),var(--pink));font-weight:800;color:#2a2a2a}
.arrow{font-size:36px;color:var(--sky);opacity:.9}

/* Tokenomics */
.tokenomics{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center;margin-top:14px}
.tokenomics h2{font-size:clamp(26px,3.5vw,40px)}
.tokenomics .sub{color:var(--muted);margin:8px 0 12px}
.legend{list-style:none;display:grid;gap:12px}
.legend li{display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:start;padding:6px 0;border-bottom:1px dashed #28306a30}
.legend li:last-child{border-bottom:0}
.legend .swatch{width:14px;height:14px;border-radius:4px;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.legend .name{font-weight:800}
.legend .desc{color:var(--muted);font-size:13px}

/* PIE */
.pie-svg{width:min(380px,80vw);height:auto;display:block;margin-inline:auto;border-radius:50%;border:1px solid #28306a;background:linear-gradient(180deg,var(--card),var(--card-2));filter:drop-shadow(0 10px 24px rgba(0,0,0,.35))}
.pie-slice{stroke:#0b0e22;stroke-width:.5;opacity:.9;transition:opacity .12s ease, transform .12s ease;transform-origin:100px 100px}
.pie-slice:hover,.pie-slice.focus{opacity:1;transform:scale(1.015)}
.pie-slice {
  outline: none;
}
.pie-slice:focus {
  outline: none;
  box-shadow: none;
}

.pie-label{font-size:11px;fill:#fff;font-weight:800;text-anchor:middle;dominant-baseline:middle;paint-order:stroke;stroke:#0b0e22;stroke-width:2}

/* Tooltip */
.tooltip{position:absolute;pointer-events:none;z-index:10;background:#0b0e22;border:1px solid #2b3168;border-radius:10px;padding:10px 12px;min-width:200px;box-shadow:var(--shadow);color:var(--text);font-size:13px;opacity:0;transform:translateY(4px);transition:opacity .12s ease,transform .12s ease}
.tooltip.show{opacity:1;transform:translateY(0)}

/* Socials */
.socials{margin-top:24px;text-align:center;padding:56px 28px 60px;border-radius:24px;background:
  radial-gradient(60% 120% at 50% 0%, rgba(123,215,255,.08), transparent 60%),
  radial-gradient(120% 120% at 50% 120%, rgba(255,138,214,.06), transparent 60%),
  linear-gradient(180deg, var(--card), var(--card-2));border:1px solid #28306a;box-shadow:var(--shadow)}
.socials h2{font-size:clamp(26px,3.5vw,40px);margin-bottom:12px}
.icons{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.icon{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(180deg,var(--card),var(--card-2));border:1px solid #28306a;padding:10px 14px;border-radius:14px;text-decoration:none;color:var(--text)}
.icon:hover{outline:2px solid var(--accent)}
.foot{color:var(--muted);font-size:12px;margin-top:12px}

/* Responsive */
@media (max-width:960px){
  .hero{grid-template-columns:1fr}
  .hero-visual{ --h:300px; min-height:var(--h); }
  .steps{grid-template-columns:1fr;gap:14px}
  .arrow{display:none}
  .tokenomics{grid-template-columns:1fr}
  .tok-left{order:2}
  .tok-right{order:1;display:grid;place-items:center}
}

/* Legend layout fix: keep 2 columns (dot + text), stack name/desc as 2 rows */
.legend li{
  display:grid;
  grid-template-columns:18px 1fr;
  grid-template-rows:auto auto;
  align-items:start;
  gap:6px 10px;
}

/* highlight matching legend row when a pie slice is hovered */
.legend li.active{
  background: linear-gradient(180deg, rgba(123,215,255,.12), rgba(255,138,214,.10));
  border-radius: 12px;
  outline: 2px solid var(--sky);
  outline-offset: 2px;
}

.legend .swatch{ grid-column:1/2; grid-row:1/3; align-self:start; margin-top:2px; }
.legend .name{ grid-column:2/3; grid-row:1; font-weight:800; }
.legend .desc{
  grid-column:2/3; grid-row:2; color:var(--muted);
  font-size:13px; line-height:1.35; word-break:normal; overflow-wrap:break-word;
}

/* ——— Nav Bar ——— */
html { scroll-behavior: smooth; }

.site-header{
  position: sticky; top: 0; z-index: 50;
  padding-block: 14px;
  background:
    linear-gradient(180deg, rgba(16,20,49,.85), rgba(16,20,49,.65) 60%, rgba(16,20,49,0));
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #28306a55;
}

.nav-links{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.nav-links a{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:12px; text-decoration:none;
  color:var(--text); font-weight:600; font-size:14px; letter-spacing:.2px;
  border:1px solid #28306a; background:linear-gradient(180deg,var(--card),var(--card-2));
  transition:transform .12s ease, outline-color .12s ease, background .12s ease;
}
.nav-links a:hover{
  outline:2px solid var(--accent); outline-offset:2px; transform:translateY(-1px);
}
.nav-links a:focus{outline:2px solid var(--sky); outline-offset:2px}
.nav-links a:active{transform:translateY(0)}

/* Compact header on small screens */
@media (max-width: 720px){
  .site-header{gap:10px}
  .brand-name{font-size:20px}
  .nav-links{gap:8px}
  .nav-links a{padding:8px 12px; font-size:13px; border-radius:10px}
}

/* ——— Audit Section ——— */
.audit{
  display:grid; grid-template-columns: 1.1fr .9fr; gap:28px; align-items:center;
  margin-top:24px; padding:28px; border-radius:24px;
  background:
    radial-gradient(60% 120% at 30% 0%, rgba(123,215,255,.08), transparent 60%),
    radial-gradient(120% 140% at 90% 120%, rgba(255,138,214,.06), transparent 60%),
    linear-gradient(180deg, var(--card), var(--card-2));
  border:1px solid #28306a; box-shadow: var(--shadow);
}
.audit h2{font-size:clamp(26px,3.5vw,40px); margin-bottom:10px}
.audit p{
  color: var(--muted); line-height:1.6; margin:10px 0;
  max-width: 62ch;
}
.audit a{
  color: var(--text); text-decoration: underline;
  text-underline-offset: 3px; font-weight:700;
  background: linear-gradient(90deg,var(--accent),var(--sky));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.audit a:hover{opacity:.9}

.assure-logo{
  width:100%; max-width:320px; height:auto; object-fit:contain;
  display:block; margin-inline:auto;
  background:#0e1130; border-radius:16px; padding:16px;
  border:1px solid #28306a; box-shadow: var(--shadow);
}

/* Stack on mobile + center image */
@media (max-width: 960px){
  .audit{grid-template-columns:1fr; text-align:left}
  .audit .audit-right{order: -1; display:grid; place-items:center; margin-bottom:8px}
}

/* Optional: gentle divider spacing so Audit doesn't stick to sections above/below */
.audit.container{margin-top:28px}

/* ——— Back to Top (Lighter Variant) ——— */
.back-to-top{
  position: fixed; right: 24px; bottom: 24px; z-index: 60;
  width: 48px; height: 48px; border-radius: 12px; cursor: pointer;
  display: grid; place-items: center;
  color: var(--bg);
  background: linear-gradient(135deg, var(--sky), var(--accent));
  border: none;
  box-shadow: 0 6px 16px rgba(123,215,255,.4);
  opacity: 0; pointer-events: none; transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.back-to-top svg path { fill: var(--bg); }
.back-to-top:hover{
  background: linear-gradient(135deg, var(--accent), var(--sky));
  box-shadow: 0 10px 24px rgba(123,215,255,.55);
  transform: translateY(-2px);
}
.back-to-top:focus-visible{ outline:2px solid var(--sky); outline-offset:3px; }
.back-to-top.show{ opacity: 1; pointer-events: auto; transform: translateY(0); }

@media (max-width: 520px){
  .back-to-top{ right: 16px; bottom: 16px; width:44px; height:44px; border-radius: 10px; }
}

/* ===== Mobile Burger Nav (CSS-only) ===== */
@media (max-width: 720px){
  /* Turn the row of links into a collapsible panel */
  .nav-links{
    position: relative;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 48px 12px 10px;     /* top space for burger */
    max-height: 48px;            /* collapsed */
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid #28306a;
    background: linear-gradient(180deg,var(--card),var(--card-2));
    transition: max-height .2s ease;
  }

  /* Show burger button (drawn with CSS bars) */
  .nav-links::before,
  .nav-links::after{
    content: "";
    position: absolute;
    right: 10px;
    top: 10px;
    width: 28px;
    height: 20px;
    border-radius: 10px;
    pointer-events: none;        /* click goes to container */
  }
  /* 3 bars */
  .nav-links::before{
    background:
      linear-gradient(#e7e8ff,#e7e8ff) left 0 top 0 / 100% 2px no-repeat,
      linear-gradient(#e7e8ff,#e7e8ff) left 0 center / 100% 2px no-repeat,
      linear-gradient(#e7e8ff,#e7e8ff) left 0 bottom / 100% 2px no-repeat;
    opacity: .9;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
  }

  /* Expand on tap/hover/focus-within */
  .nav-links:hover,
  .nav-links:focus-within{
    max-height: 320px; /* enough for all links */
  }

  /* Make each link full-width and stacked */
  .nav-links a{
    display: block;
    width: 100%;
    text-align: left;
    padding: 12px 12px;
    margin: 4px 0;
    border-radius: 10px;
  }
}