:root{
  --accent:#11B4A6;   /* teal */
  --accent2:#6F3FF5;  /* purple */
  --accent3:#00F0FF;  /* cyan */

  --d1:#0E1422; --d2:#0B1120; --inkD:#EEF5FF; --mutedD:#C7CFDA;
  --l1:#F4F2EC; --l2:#ECE9F3; --inkL:#122238; --mutedL:#57677F;

  --bg:var(--d1); --bg2:var(--d2); --ink:var(--inkD); --muted:var(--mutedD);

  --q1:var(--accent); --q2:var(--accent2);

  --max:1200px; --pad:6vw;
  --shadow-sm:0 2px 8px rgba(18,34,56,.12);
  --shadow-md:0 10px 28px rgba(18,34,56,.22);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg);overflow-x:hidden;scroll-behavior:smooth}
body::before{
  content:"";position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(70vw 70vw at 78% 8%,  color-mix(in oklab,var(--accent) 8%,transparent), transparent 70%),
    radial-gradient(80vw 80vw at 12% 88%, color-mix(in oklab,var(--accent2) 8%,transparent), transparent 70%),
    radial-gradient(110vw 110vw at 50% 50%, color-mix(in oklab,var(--accent3) 6%,transparent), transparent 60%),
    linear-gradient(135deg, color-mix(in oklab,var(--bg) 92%,var(--accent) 8%), var(--bg2));
  transition:background .6s ease;
}
.container{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.section{padding:96px 0;position:relative}
h1,h2,h3{margin:0 0 8px}
h1{font-size:clamp(2.4rem,6vw,4.8rem);line-height:1.06;font-weight:800}
h2{font-size:clamp(1.8rem,3.8vw,3.1rem);font-weight:800}
p{margin:.6rem 0 0;line-height:1.75}
.lead{max-width:820px;color:var(--muted)}
.divider{height:52px;background:linear-gradient(90deg,transparent,color-mix(in oklab,var(--accent) 35%,transparent),transparent);opacity:.7}

/* Header */
.header{
  position:fixed;inset-inline:0;top:0;z-index:1000;height:84px;
  backdrop-filter:blur(14px);
  background:color-mix(in oklab,var(--bg) 84%,transparent);
  border-bottom:1px solid color-mix(in oklab,var(--accent) 28%,transparent);
  transition:background .35s,border-color .35s,box-shadow .35s,height .25s;
}
.header.compact{height:68px;background:color-mix(in oklab,var(--bg) 96%,black 4%);box-shadow:var(--shadow-md)}
.header .wrap{height:100%;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:.7rem;color:inherit;text-decoration:none;font-weight:800}
.brand .mark{width:40px;height:40px;display:grid;place-items:center}
.brand .word{font-size:1.2rem;letter-spacing:.2px;transition:opacity .25s,transform .25s}
.brand-collapsed .word{opacity:0;transform:translateY(-8px);pointer-events:none}
/* logo gradients */
.qgrad stop:nth-child(1){stop-color:var(--q1)} .qgrad stop:nth-child(2){stop-color:var(--q2)}
.qstroke{stroke:url(#qStroke)} .qfill{fill:url(#qFill)}
.nav{display:flex;gap:2rem;transition:opacity .25s}
.nav a{color:inherit;text-decoration:none;font-weight:600;position:relative}
.nav a::after{content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;background:var(--accent);transition:width .25s}
.nav a:hover{color:var(--accent)} .nav a:hover::after{width:100%}
.burger{--s:42px;display:none;width:var(--s);height:var(--s);border-radius:12px;border:1px solid color-mix(in oklab,var(--accent) 28%,transparent);
  background:color-mix(in oklab,var(--bg) 90%,var(--accent) 10%);box-shadow:var(--shadow-sm);align-items:center;justify-content:center;cursor:pointer}
.burger span,.burger::before,.burger::after{content:"";display:block;width:20px;height:2px;background:var(--ink);transition:transform .25s,opacity .2s}
.burger::before{transform:translateY(-6px)} .burger::after{transform:translateY(6px)}
.burger.active span{opacity:0}.burger.active::before{transform:rotate(45deg)}.burger.active::after{transform:rotate(-45deg)}
.menu{position:fixed;inset:0;z-index:999;display:none;backdrop-filter:blur(18px);background:color-mix(in oklab,var(--bg) 82%, black 18%)}
.menu.open{display:grid;place-items:center}
.menu ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1.1rem;text-align:center}
.menu a{color:var(--ink);text-decoration:none;font-size:clamp(1.4rem,3.5vw,2.2rem);font-weight:800}
.menu a:hover{color:var(--accent)}
@media (max-width:900px){ .nav{display:none} .burger{display:flex} }

/* Hero */
.hero{min-height:100svh;display:grid;place-items:center;position:relative;overflow:hidden}
.label{display:inline-block;padding:.4rem .9rem;border-radius:999px;font-size:.85rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);background:color-mix(in oklab,var(--accent) 12%,transparent);border:1px solid color-mix(in oklab,var(--accent) 38%,transparent);box-shadow:var(--shadow-sm);margin-bottom:10px}
.cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:18px}
.btn{display:inline-block;padding:1rem 2rem;border-radius:999px;text-decoration:none;font-weight:800;letter-spacing:.2px;border:1px solid color-mix(in oklab,var(--accent) 40%,transparent);background:linear-gradient(180deg,color-mix(in oklab,var(--bg) 80%,var(--accent) 20%),color-mix(in oklab,var(--bg2) 80%,var(--accent2) 20%));color:var(--ink);box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn.ghost{background:transparent;border:1px dashed color-mix(in oklab,var(--accent) 55%,transparent)}
.reveal{opacity:0;transform:translateY(12px);transition:opacity .6s,transform .6s}
.reveal.in{opacity:1;transform:translateY(0)}

/* Community 4 blocks */
.blocks{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:18px}
.block{padding:24px;border-radius:16px;position:relative;overflow:hidden;background:linear-gradient(180deg,color-mix(in oklab,var(--bg) 92%,var(--accent) 8%),color-mix(in oklab,var(--bg2) 92%,var(--accent2) 8%));border:1px solid color-mix(in oklab,var(--accent) 24%,transparent);box-shadow:var(--shadow-sm)}
.block::before{content:"";position:absolute;inset:-1px;padding:1px;border-radius:inherit;pointer-events:none;opacity:.7;background:conic-gradient(from 180deg,color-mix(in oklab,var(--accent) 12%,transparent) 0 25%,transparent 25% 50%,color-mix(in oklab,var(--accent2) 12%,transparent) 50% 75%,transparent 75% 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.icon{--size:36px;width:var(--size);height:var(--size);margin:2px 0 10px;display:inline-block;color:var(--accent);stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 2px 8px color-mix(in oklab,var(--accent) 30%,transparent))}
.block h3{margin:2px 0 6px}
.block p{color:var(--muted);font-size:.98rem}

/* --- Static Story --- */
.story{position:relative;padding:0;margin:0}
.story .wrap{position:relative;border-top:1px solid color-mix(in oklab,var(--accent) 20%,transparent);border-bottom:1px solid color-mix(in oklab,var(--accent2) 20%,transparent);padding:56px 0}
.story-backdrop{position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(70vw 70vw at 20% 80%,color-mix(in oklab,var(--accent3) 7%,transparent),transparent 70%);opacity:.5}
.story-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.card{padding:28px;border-radius:20px;background:linear-gradient(180deg,color-mix(in oklab,var(--bg) 92%,var(--accent) 8%),color-mix(in oklab,var(--bg2) 92%,var(--accent2) 8%));border:1px solid color-mix(in oklab,var(--accent) 24%,transparent);box-shadow:var(--shadow-sm)}
.card h3{margin:4px 0 6px}
.card p{color:var(--muted)}
.badge-s{display:inline-block;font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);background:color-mix(in oklab,var(--accent) 12%,transparent);border:1px solid color-mix(in oklab,var(--accent) 38%,transparent);border-radius:999px;padding:.35rem .8rem}

/* Services */
.grid6{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:10px}
.service{padding:22px;border-radius:16px;background:linear-gradient(180deg,color-mix(in oklab,var(--bg) 92%,var(--accent) 8%),color-mix(in oklab,var(--bg2) 92%,var(--accent2) 8%));border:1px solid color-mix(in oklab,var(--accent) 24%,transparent);box-shadow:var(--shadow-sm);text-align:left;transition:transform .2s,box-shadow .2s}
.service:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.service .icon{--size:34px}

/* Partners marquee */
.marquee{--gap:22px;display:flex;gap:var(--gap);overflow:hidden;user-select:none;touch-action:pan-y;cursor:grab;mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent)}
.marquee:active{cursor:grabbing}
.track{flex-shrink:0;display:flex;gap:var(--gap);align-items:stretch;padding:0 6px;animation:scroll 32s linear infinite}
@keyframes scroll{to{transform:translateX(calc(-100% - var(--gap)))}}
.partner{min-width:240px;border-radius:16px;position:relative;padding:18px;background:linear-gradient(180deg,color-mix(in oklab,var(--bg) 92%,var(--accent) 8%),color-mix(in oklab,var(--bg2) 92%,var(--accent2) 8%));box-shadow:var(--shadow-sm)}
.partner::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:conic-gradient(from 180deg,color-mix(in oklab,var(--accent) 65%,transparent) 0 25%,transparent 25% 50%,color-mix(in oklab,var(--accent2) 65%,transparent) 50% 75%,transparent 75% 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.9}

/* Partner logo container (drop-in replacement) */
.logo-box{
  height:92px;                 /* box height */
  padding:12px;                /* inner breathing room */
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg,
    color-mix(in oklab,var(--accent) 10%,transparent),
    color-mix(in oklab,var(--accent2) 10%,transparent));
  border:1px solid color-mix(in oklab,var(--accent) 35%,transparent);
  position:relative;
  overflow:hidden;
}

/* One rule that works for BOTH <img> (png/jpg/svg) and inline <svg> */
.logo-box > img,
.logo-box > svg{
  display:block;
  max-width:100%;
  max-height:100%;
  width:auto;                   /* keep aspect ratio */
  height:auto;                  /* keep aspect ratio */
  margin:0 auto;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.12));
}


/* If any inline SVGs come with hardcoded width/height, neutralize them */
.logo-box > svg[width],
.logo-box > svg[height]{
  width:100% !important;
  height:100% !important;
}

/* Shimmer overlay (unchanged) */
.logo-box::after{
  content:"";
  position:absolute;
  inset:-1px;
  background:linear-gradient(110deg,transparent 0%,rgba(255,255,255,.25) 18%,transparent 36%);
  transform:translateX(-120%);
  animation:shimmer 5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes shimmer{to{transform:translateX(120%)}}

.partner .name{text-align:center;margin-top:10px;font-weight:700}

/* Team */
/* Team */
.team-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:22px;
  margin-top:18px;
}

.person{
  position:relative;
  border-radius:20px;
  overflow:hidden;
  background:linear-gradient(180deg,
    color-mix(in oklab,var(--bg) 92%,var(--accent) 8%),
    color-mix(in oklab,var(--bg2) 92%,var(--accent2) 8%));
  border:1px solid color-mix(in oklab,var(--accent) 24%,transparent);
  box-shadow:var(--shadow-sm);
  padding:28px;

  /* keep content tidy with avatar+text */
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.person::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:conic-gradient(from 210deg,
    color-mix(in oklab,var(--accent) 12%,transparent) 0 40%,
    transparent 40% 60%,
    color-mix(in oklab,var(--accent2) 12%,transparent) 60% 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  padding:1px;
  border-radius:inherit;
  pointer-events:none;
  opacity:.7;
}

/* REPLACEMENT FOR BADGE → AVATAR */
.person .avatar{
  width:96px;
  height:96px;
  border-radius:20px;              /* set to 999px if you want circles */
  overflow:hidden;
  margin-bottom:12px;
  box-shadow:var(--shadow-sm);
  border:1px solid color-mix(in oklab,var(--accent) 24%, transparent);
  background:linear-gradient(180deg,
    color-mix(in oklab,var(--bg) 92%,var(--accent) 8%),
    color-mix(in oklab,var(--bg2) 92%,var(--accent2) 8%));
  flex:0 0 auto;
}

.person .avatar img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;                 /* crops nicely inside the box */
  object-position:50% 50%;
}

/* Text */
.person h3{ margin:2px 0 2px; }
.person .role{ opacity:.9; margin-bottom:.4rem; font-weight:600; }
.person .bio{ color:var(--muted); }

/* Optional per-card size tweaks (use on <article class="person ...">) */
.person.avatar-sm .avatar{ width:84px;  height:84px; }
.person.avatar-lg .avatar{ width:112px; height:112px; }

/* Light wrapper */
.section.light{background:linear-gradient(180deg,color-mix(in oklab,var(--l1) 94%,var(--accent) 6%),color-mix(in oklab,var(--l2) 94%,var(--accent2) 6%));color:var(--inkL)}
.section.light .lead{color:var(--mutedL)}
.section.light .person{background:linear-gradient(180deg,color-mix(in oklab,#FFFFFF 92%,var(--accent) 8%),color-mix(in oklab,#FFFFFF 94%,var(--accent2) 6%));border-color:color-mix(in oklab,var(--inkL) 18%,transparent);box-shadow:0 2px 8px rgba(14,26,43,.1)}
.section.light .partner .name{color:var(--inkL)}

/* Page lock helper (menu only) */
html.locked, body.locked{overflow:hidden}

/* Services fade-in */
#services{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease}
#services.in{opacity:1;transform:translateY(0)}