:root{
      --bg:#0b0c10;
      --bg-soft:#0f1116;
      --card:#413926;
      --card-2:#14182101;
      --text:#eef1f5;
      --muted:#a9afbb;
      --accent:#fcbe0c;
      --accent-2:#ffd54a;
      --ring: rgba(255, 213, 74, .35);
      --shadow: 0 10px 30px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.02);
      --radius: 16px;
      /* logos */
      --visible-items: 4;          /* exactly 4 logos visible */
      --gap: 24px;                 /* space between logos */
      --speed-pps: 30;             /* pixels per second (slow) */
      --edge-fade: 20%;            /* how much to fade at the rims */
      --item-pad: 16px;            /* inner padding around each logo */
      --track-height: 280px;       /* logo band height; adjust as needed */
      --logo-item: #FFF6CD44;      /* logo background color */
      --chip-radius: 14px;
 
    }

    /* plus-jakarta-sans-regular - latin */
    /* Plus Jakarta Sans licensed under SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
   See /fonts/OFL.txt for details */
    @font-face {
      font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
      font-family: 'Plus Jakarta Sans';
      font-style: normal;
      font-weight: 400;
      src: url('../fonts/plus-jakarta-sans-v11-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
           url('../fonts/plus-jakarta-sans-v11-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
    }

    *{box-sizing:border-box}
    body{
      margin:0;
      font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
      color:var(--text);
      background:
        radial-gradient(1200px 500px at 20% -10%, rgba(255, 213, 74, .08), transparent 60%),
        radial-gradient(1000px 600px at 90% -10%, rgba(255, 179, 0, .06), transparent 60%),
      background-color:var(--bg);
      line-height:1.6;
    }

    /* Container */
    .container{
      width:100%;
      max-width:1200px;
      padding:0 24px;
      margin:0 auto;
    }

    /* Header */
    header{
      position:sticky;
      top:0;
      z-index:10;
      backdrop-filter:saturate(140%) blur(10px);
      background:linear-gradient(180deg, rgba(10,11,15,.85), rgba(10,11,15,.55));
      border-bottom:1px solid rgba(255,255,255,.05);
    }
    .nav{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      height:64px;
    }
    .brand{
      display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);
      font-weight:800;font-size:20px;letter-spacing:.2px;
    }
    .brand-badge{
      width:22px;height:22px;border-radius:7px;
      background:linear-gradient(180deg, var(--accent), var(--accent-2));
      box-shadow:0 0 0 4px rgba(255, 213, 74, .12), inset 0 -2px 8px rgba(0,0,0,.25);
      display:grid;place-items:center;
    }
    .brand-badge svg{width:14px;height:14px}
    nav ul{display:flex;gap:28px;list-style:none;margin:0;padding:0}
    nav a{
      color:var(--muted);text-decoration:none;font-weight:500;font-size:14.5px;
      transition:color .2s ease;
    }
    nav a:hover, nav a:focus{color:var(--text)}
    .actions{display:flex;gap:12px;align-items:center}
    .btn{
      --bgc: #1a1f2a;
      appearance:none;
      border:1px solid rgba(255,255,255,.08);
      background:var(--bgc);
      color:var(--text);
      padding:9px 14px;border-radius:12px;font-weight:600;font-size:14px;
      cursor:pointer;text-decoration:none;line-height:1.2;
      transition:transform .06s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
      box-shadow:var(--shadow);
    }
    .btn:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.16)}
    .btn:focus{outline:2px solid var(--ring);outline-offset:2px}
    .btn-primary{
      background:linear-gradient(180deg, #202736, #161b25);
      border-color:#2a3142;
    }
    .btn-accent{
      color:#0c0c0f;background:linear-gradient(180deg, var(--accent), var(--accent-2));
      border:transparent; box-shadow:0 8px 18px rgba(255, 179, 0, .25), inset 0 1px 0 rgba(255,255,255,.35);
    }
    .btn-accent:hover{filter:saturate(1.05) brightness(1.02)}
    .btn-ghost{
      background:transparent;border:1px solid rgba(255,255,255,.12);color:var(--text)
    }
.content-box {
  /* layout */
  max-width: 68ch;          /* comfortable line length */
  margin-inline: auto;      /* center the box */
  padding: 1.25rem 1.5rem;

  /* typography */
  font-size: clamp(1.125rem, 1rem + 0.8vw, 1.5rem); /* scale up on larger screens */
  line-height: 1.6;         /* airy leading for readability */
  letter-spacing: 0.01em;

  /* "Blocksatz" */
  text-align: justify;
  text-align-last: left;    /* keep the last line non-justified */
  text-justify: inter-word; /* legacy/Edge hint */

  /* hyphenation (needs a proper lang=… on the element or ancestor) */
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;

  /* avoid overflow while preserving words when possible */
  overflow-wrap: break-word;
}

.content-box h2{
  text-align: left;
}

.content-box img {
  max-width: 50%;   /* never exceed 90% of the container */
  height: auto;     /* keep the aspect ratio */
  border-radius:var(--radius);
  display: block;   /* removes inline spacing quirks */
  margin: 1rem auto; /* optional: centers the image nicely */
}

/* Progressive enhancement for nicer spacing in supporting browsers */
@supports (text-wrap: pretty) {
  .content-box { text-wrap: pretty; }
}
.header-logo {
    height: 40px;
    width: 40px;
}
   /* Burger icon (hidden by default) */
    .burger {
      display: none;
      flex-direction: column;
      cursor: pointer;
      gap: 5px;
    }

    .burger div {
      width: 25px;
      height: 3px;
      background-color: white;
    }

    /* Responsive styles */
    @media (max-width: 768px) {
      nav ul {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 60px;       /* below the header */
        right: 10px;
        width: 220px;
        padding: 15px;
        
        /* Transparent box */
        background-color: rgba(0, 0, 0, 0.6); /* black, 60% opacity */
        border-radius: 10px;
        
        list-style: none;
        margin: 0;
        gap: 10px;
      }

      nav ul.show {
        display: flex;
      }

      nav ul li a {
        color: #fff;
        text-decoration: none;
        font-size: 1.1rem;
      }
      .logo-name {
        display: none;
      }
      header .actions {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
      }
      .burger {
        display: flex;
      }
    }

@media (max-width: 390px) {
    /* fix iphone small screen */
    header .actions{display:none;}
}

.full-screen {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    text-align: center; 
}

#logo {
    opacity: 0;
    animation: fadeIn 2.5s forwards;
    animation-delay: 1s;
    width: 50%;
    max-width: 500px;
    min-width: 300px;
    height: auto;
}

#tagline {
    opacity: 0;
    animation: fadeIn 2s forwards;
    animation-delay: 4.0s;
    font-size: 2rem;
    color: #555;
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center; 
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

    /* Hero */
    .hero{
      padding:72px 0 28px;
      text-align:center;
    }
    .eyebrow{
      display:inline-flex;gap:8px;align-items:center;
      font-size:12px;font-weight:700;letter-spacing:.12em;
      text-transform:uppercase;color:#c8cbd3;
      background:rgba(255,255,255,.04);
      padding:6px 10px;border:1px solid rgba(255,255,255,.08);border-radius:999px;
    }
    h1{
      margin:18px auto 10px;
      max-width:980px;
      font-size:clamp(28px, 4.2vw + 12px, 58px);
      line-height:1.08;
      letter-spacing:-.02em;
      font-weight:800;
    }
    .highlight{
      color:transparent;
      background:linear-gradient(180deg, var(--accent), var(--accent-2));
      -webkit-background-clip:text;background-clip:text;
      text-shadow:0 6px 30px rgba(255, 179, 0, .15);
      white-space:nowrap;
    }
    .sub{
      color:var(--muted);
      max-width:920px;margin:10px auto 0;
      font-size:1.5rem;
      text-align:center;
    }

    /* Cards Grid */
    .grid{
      display:grid;gap:22px;margin:40px auto 90px;
      max-width:920px;
      margin-left: auto;
      margin-right: auto;
    }
    .grid-vertical{
      grid-template-columns:repeat(12, 1fr);
    }
    .col-4{grid-column:span 4}
    @media (max-width:1000px){ .col-4{grid-column:span 6} }
    @media (max-width:680px){ .col-4{grid-column:span 12} }

    .col-6{grid-column:span 6}
    @media (max-width:680px){ .col-6{grid-column:span 12} }


    .card{
      height:100%;
      background:linear-gradient(180deg, var(--card), var(--card-2));
      border:1px solid rgba(255,255,255,.06);
      border-radius:var(--radius);
      padding:26px 24px 18px;
      box-shadow: var(--shadow);
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }
    .card:hover{
      transform: translateY(-3px);
      border-color: rgba(255,255,255,.14);
      box-shadow: 0 18px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.03) inset;
    }
    .card-head{
      display:flex;align-items:center;gap:12px;margin-bottom:10px
    }
    .icon-wrap{
      width:40px;height:40px;border-radius:12px;
      display:grid;place-items:center;
      background:linear-gradient(180deg, var(--accent), var(--accent-2));
      color:#0a0a0d; box-shadow:0 6px 18px rgba(255, 179, 0, .28), inset 0 1px 0 rgba(255,255,255,.35);
      flex:0 0 auto;
    }
    .icon-wrap svg{width:22px;height:22px}
    .card h3{margin:0;font-size:20px;letter-spacing:.2px}
    .card p{margin:8px 0 12px;color:var(--muted)}
    .bullets{list-style:none;margin:10px 0 20px;padding:0}
    .bullets li{
      display:flex;gap:10px;align-items:flex-start;margin:8px 0;color:#d9dde6
    }
    .dot{
      width:8px;height:8px;margin-top:8px;border-radius:999px;
      background:linear-gradient(180deg, var(--accent), var(--accent-2));
      box-shadow:0 0 0 3px rgba(255, 213, 74, .18);
      flex:0 0 auto;
    }
    .learn{
      display:inline-flex;align-items:center;gap:8px;
      margin-top:6px;
      width:100%;
      justify-content:center;
      padding:10px 12px;border-radius:12px;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.02);
      color:#e9edf6;text-decoration:none;font-weight:700;
      letter-spacing:.02em; transition: border-color .2s ease, transform .06s ease, background .2s ease;
    }
    .learn:hover{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.04);transform:translateY(-1px)}
    .learn svg{width:16px;height:16px}

    /* Footer (simple spacer) */
    footer{padding:30px 0 60px;color:#8f96a8;text-align:center}
/* make hero overlay-only so text stays readable over gradients */
.hero-top {
  padding: 120px 0 70px;
  text-align: center;
  position: relative;
  color: var(--text);
  background: transparent;
}
.hero-top::before{
  content:"";
  position:absolute; inset:0;
  z-index:0;
}
.hero-top .container{ position:relative; z-index:1; }

.hero-top h1 {
  font-size: clamp(32px, 4vw, 54px);
  font-weight: 800;
  margin-bottom: 18px;
}
.hero-top .highlight {
  color: var(--accent);
}
.hero-top .sub-top {
  max-width: 760px;
  margin: 0 auto 30px;
  font-size: 18px;
  color: var(--muted);
}
.hero-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 50px;
  margin-bottom: 50px;
}
.hero-stats {
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}
.stat-card {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 20px 40px;
  border-radius: 12px;
  min-width: 180px;
}
.stat-card h3 {
  color: var(--accent);
  font-size: 28px;
  font-weight: 800;
  margin: 0 0 6px;
}
.stat-card p {
  margin: 0;
  color: #ddd;
}
.footer-links a {
      color: var(--text);
      text-decoration: none;
      margin: 0 15px;
      font-weight: bold;
    }
img {
  width: 100%;
  max-width: 900px;
  height: auto;
  display: block; /* optional, avoids extra space below inline images */
}

/* ===== Animated fixed gradient stage ===== */
.gradient-bg{
  position: fixed;
  inset: -10% -10% -10% -10%;
  z-index: -1;                /* stay behind content */
  pointer-events: none;
  filter: saturate(115%) contrast(105%);
}

/* shared bubble styles */
.gradient-bg .g{
  position:absolute;
  left:50%; top:50%;
  transform: translate(-50%,-50%);
  width: 140vmax; height: 140vmax;
  border-radius: 50%;
  mix-blend-mode: screen;    /* luminous blend */
  opacity:.75;
  filter: blur(32px);
}

/* three layers with different motions */
.gradient-bg .g1{
  background:
    radial-gradient(40% 40% at 50% 50%, rgba(255,213,74,.65), rgba(255,179,0,.25) 45%, transparent 65%),
    radial-gradient(30% 30% at 70% 30%, rgba(255,230,140,.45), transparent 70%);
  animation: drift1 24s linear infinite alternate, swell1 18s ease-in-out infinite alternate;
}
.gradient-bg .g2{
  background:
    radial-gradient(38% 38% at 30% 60%, rgba(255,179,0,.55), rgba(255,140,0,.20) 55%, transparent 70%),
    radial-gradient(26% 26% at 60% 20%, rgba(255,230,160,.35), transparent 80%);
  animation: drift2 60s linear infinite reverse, swell2 30s ease-in-out infinite alternate;
  opacity:.6;
}
.gradient-bg .g3{
  background:
    radial-gradient(28% 28% at 70% 70%, rgba(255,220,120,.35), rgba(255,170,0,.18) 55%, transparent 75%),
    radial-gradient(22% 22% at 35% 25%, rgba(255,255,200,.25), transparent 80%);
  animation: drift3 36s linear infinite, swell3 22s ease-in-out infinite alternate;
  opacity:.5;
}

/* motion keyframes */
@keyframes drift1{ from{transform:translate(-52%,-48%) rotate(0deg)} to{transform:translate(-48%,-52%) rotate(360deg)} }
@keyframes drift2{ from{transform:translate(-50%,-50%) rotate(0deg)} to{transform:translate(-46%,-54%) rotate(360deg)} }
@keyframes drift3{ from{transform:translate(-51%,-49%) rotate(0deg)} to{transform:translate(-55%,-45%) rotate(-360deg)} }

@keyframes swell1{ from{scale:1} to{scale:1.3} }
@keyframes swell2{ from{scale:1.} to{scale:1.3} }
@keyframes swell3{ from{scale:0.98} to{scale:1.06} }

/* (optional) body base color for when gradients are offscreen on mobile overscroll */
body{ background-color:#0b0c10; }

/* logos */
/* Responsive styles */
@media (max-width: 768px) {
  :root {
    --track-height: 130px;        /* logo band height; adjust as needed */
    --visible-items: 3;          /* exactly 3 logos visible */
  }
}

.wrap {
  width: min(1000px, 92vw);
}

.video-mask{
    border-radius:var(--radius);
    overflow: hidden;
}

.logo-carousel {
  position: relative;
  overflow: hidden;
  height: calc(var(--track-height) + var(--item-pad) * 2);
  /* Fade out at the rims using mask (with WebKit prefix for Safari) */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    black var(--edge-fade),
    black calc(100% - var(--edge-fade)),
    transparent
  );
          mask-image: linear-gradient(
    to right,
    transparent,
    black var(--edge-fade),
    black calc(100% - var(--edge-fade)),
    transparent
  );
}

.track {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: var(--gap);
  will-change: transform;
}

.item {
  flex: 0 0 calc((100% - (var(--gap) * (var(--visible-items) - 1))) / var(--visible-items));
  height: calc(var(--track-height));
  display: grid;
  place-items: center;
  padding: var(--item-pad);
  background-color: var(--logo-item);
  border-radius: var(--chip-radius);
  box-shadow: none;
}

.item img {
  display: block;
  max-width: 100%;
  height: calc(0.9 * var(--track-height));
  object-fit: contain;
  filter: saturate(0) contrast(1.05) brightness(0.9); /* tasteful, neutral look */
}
a {
  color: var(--muted);
}