:root{
    --bg:#000000;
    --ink:#FFFFFF;
    --black:#000000;
    --white:#FFFFFF;
    --muted:#a7a7b3;
    --lime:#FFBA1F;
    --lime-2:#FFBA1F;
    --pink:#F4561E;
    --blue:#5B17F0;
    --orange:#F4561E;
    --purple:#5B17F0;
    --yellow:#FFBA1F;
    --paper:#FFFFFF;
  }
  .mkga-landing,
  .mkga-landing *{box-sizing:border-box}
  html{scroll-behavior:smooth;background:var(--bg)}
  body{
    margin:0;min-width:0;
    background:var(--bg);color:var(--ink);
    font-family:'Inter',sans-serif;
    overflow-x:clip;
  }
  .mkga-landing{
    --mkga-header-height:73px;
    min-width:0;
    width:100%;
    background:var(--bg);
    color:var(--ink);
    font-family:'Inter',sans-serif;
    overflow-x:clip;
    position:relative;
    isolation:isolate;
    padding-top:var(--mkga-header-height);
  }
  .mkga-landing header.sticky{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:50;
    width:100%;
  }
  .font-display{font-family:'Anton',sans-serif;letter-spacing:-.01em;line-height:.92}
  .font-mono{font-family:'JetBrains Mono',monospace}
  .font-hand{font-family:'Caveat',cursive}

  /* Grain */
  .grain{position:fixed;inset:0;pointer-events:none;z-index:9998;opacity:.06;mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}

  /* Scroll progress bar */
  .progress-bar{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,var(--lime),var(--pink));z-index:9999;width:0%;transition:width .1s}

  /* Marquee */
  .marquee{display:flex;overflow:hidden;gap:48px;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
  .marquee-track{display:flex;gap:48px;animation:scroll 30s linear infinite;flex-shrink:0;align-items:center}
  @keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

  /* Reveal on scroll */
  .reveal{opacity:0;transform:translateY(40px);transition:all .9s cubic-bezier(.2,.7,.2,1)}
  .reveal.in{opacity:1;transform:none}

  /* Sticker tag */
  .mkga-landing .sticker{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700}

  /* Big number style */
  .mkga-landing .mega{font-family:'Anton',sans-serif;font-size:clamp(120px,16vw,240px);line-height:.85;letter-spacing:-.02em}

  /* Tilted card */
  .tilt{transform:rotate(-2deg);transition:transform .4s}
  .tilt:hover{transform:rotate(0) scale(1.02)}
  .tilt-r{transform:rotate(2deg)}
  .tilt-r:hover{transform:rotate(0) scale(1.02)}

  /* Noise paper card */
  .paper-card{background:var(--paper);color:#000000;position:relative;overflow:hidden}
  .paper-card::after{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.15'/></svg>");pointer-events:none;mix-blend-mode:multiply}

  /* Glow */
  .glow-lime{box-shadow:0 0 0 1px rgba(255,186,31,.4),0 10px 60px rgba(255,186,31,.25)}
  .glow-pink{box-shadow:0 0 0 1px rgba(244,86,30,.4),0 10px 60px rgba(244,86,30,.25)}

  /* Underline scribble */
  .scribble{position:relative;display:inline-block}
  .scribble::after{content:"";position:absolute;left:-4%;bottom:-8px;width:108%;height:14px;
    background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14'><path d='M2 8 Q 80 -2 150 7 T 298 6' stroke='%23FFBA1F' stroke-width='4' fill='none' stroke-linecap='round'/></svg>") no-repeat center/100% 100%}

  /* Section divider stripe */
  .stripe{height:54px;background:repeating-linear-gradient(45deg,var(--lime),var(--lime) 28px,#000000 28px,#000000 56px);position:relative;overflow:hidden}
  .stripe-content{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Anton',sans-serif;font-size:28px;color:#000000;letter-spacing:.05em}

  /* Hero blob */
  .blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.55;pointer-events:none;z-index:0}

  /* Highlight pill in heading */
  .hl-lime{background:var(--lime);color:#000000;padding:0 14px;border-radius:8px;display:inline-block;transform:rotate(-2deg)}
  .hl-pink{background:var(--pink);color:#fff;padding:0 14px;border-radius:8px;display:inline-block;transform:rotate(1deg)}

  /* Card hover lift */
  .lift{transition:transform .35s, box-shadow .35s}
  .lift:hover{transform:translateY(-6px)}

  /* Ticker arrow */
  .arrow{display:inline-block;transition:transform .25s}
  .group:hover .arrow{transform:translateX(6px)}

  /* Marker highlight */
  .mkga-landing mark{background:linear-gradient(transparent 60%,var(--lime) 60%);color:inherit;padding:0 4px}

  /* Step number circle */
  .step-num{font-family:'Anton',sans-serif;font-size:96px;line-height:1;background:linear-gradient(180deg,var(--lime),transparent);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:1.5px var(--lime)}

  /* Vertical text */
  .vtxt{writing-mode:vertical-rl;transform:rotate(180deg);font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}

  /* Asymmetric grid lines */
  .grid-lines{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(to right,rgba(255,255,255,.04) 1px,transparent 1px);background-size:80px 100%}

  /* Faq item open */
  .mkga-landing details summary{list-style:none;cursor:pointer}
  .mkga-landing details summary::-webkit-details-marker{display:none}
  .mkga-landing details[open] .faq-plus{transform:rotate(45deg)}
  .faq-plus{transition:transform .3s}

  /* Live dot */
  .live-dot{width:8px;height:8px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 4px rgba(255,186,31,.25);animation:pulse 1.6s infinite}
  @keyframes pulse{50%{box-shadow:0 0 0 10px rgba(255,186,31,0)}}

  /* Chart bars */
  .bar-grow{transform-origin:bottom;animation:grow 1.4s cubic-bezier(.2,.7,.2,1) forwards}
  @keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}

  /* Preview flag */
  .preview-flag{position:fixed;bottom:18px;right:18px;padding:8px 14px;background:#000;border:1px solid var(--lime);border-radius:999px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--lime);z-index:9998}

  /* Responsive + WordPress embed guardrails */
  .mkga-landing img,
  .mkga-landing svg,
  .mkga-landing video,
  .mkga-landing canvas{max-width:100%;height:auto}
  .mkga-landing a,
  .mkga-landing button{word-break:normal}

  @media (max-width:1024px){
    body{width:100%;overflow-x:hidden}
    .mkga-landing{width:100%;overflow-x:clip}
    .mkga-landing .preview-flag{display:none}
    .mkga-landing .grain{position:absolute}

    .mkga-landing header .max-w-\[1280px\]{
      gap:16px;
      padding-left:18px;
      padding-right:18px;
    }
    .mkga-landing header nav{
      gap:10px;
      flex-shrink:0;
    }
    .mkga-landing header nav a:not(:last-child){display:none}
    .mkga-landing header nav a:last-child{
      padding:10px 14px;
      font-size:13px;
      white-space:nowrap;
    }

    .mkga-landing section{padding-top:80px!important;padding-bottom:80px!important}
    .mkga-landing .max-w-\[1280px\]{
      width:100%;
      max-width:100%!important;
      padding-left:20px!important;
      padding-right:20px!important;
    }

    .mkga-landing .grid-cols-12,
    .mkga-landing .grid-cols-7,
    .mkga-landing .grid-cols-5,
    .mkga-landing .grid-cols-4,
    .mkga-landing .grid-cols-3,
    .mkga-landing .grid-cols-2{
      grid-template-columns:minmax(0,1fr)!important;
    }
    .mkga-landing [class*="col-span-"],
    .mkga-landing [class*="row-span-"]{
      grid-column:auto!important;
      grid-row:auto!important;
    }
    .mkga-landing .grid-rows-2{grid-template-rows:auto!important}
    .mkga-landing .h-\[640px\]{height:auto!important}
    .mkga-landing .sticky:not(header){position:relative!important;top:auto!important}
    .mkga-landing header.sticky{position:fixed!important;top:0!important;left:0!important;right:0!important}

    .mkga-landing .vtxt{writing-mode:horizontal-tb;transform:none;margin-bottom:18px}
    .mkga-landing .blob{filter:blur(56px);opacity:.28!important}
    .mkga-landing .text-\[400px\]{font-size:clamp(120px,22vw,240px)!important}

    .mkga-landing h1.font-display,
    .mkga-landing h2.font-display,
    .mkga-landing .font-display[style*="font-size"]{
      font-size:clamp(46px,10vw,88px)!important;
      line-height:.95!important;
      letter-spacing:0!important;
    }
    .mkga-landing .font-hand[style*="font-size"]{
      font-size:clamp(54px,12vw,96px)!important;
      line-height:.9!important;
    }
    .mkga-landing .mega{
      font-size:clamp(70px,15vw,132px)!important;
      line-height:.88!important;
    }
    .mkga-landing .step-num{font-size:72px}

    .mkga-landing .text-9xl{font-size:5rem!important}
    .mkga-landing .text-7xl{font-size:4rem!important}
    .mkga-landing .text-6xl{font-size:3.5rem!important}

    .mkga-landing .p-12,
    .mkga-landing .p-10{padding:28px!important}
    .mkga-landing .p-8{padding:24px!important}
    .mkga-landing .rounded-3xl{border-radius:22px!important}

    .mkga-landing .flex.items-center.gap-4,
    .mkga-landing .flex.items-center.gap-6,
    .mkga-landing .mt-10.flex,
    .mkga-landing .mt-12.flex{
      flex-wrap:wrap;
    }

    .mkga-landing a.inline-flex,
    .mkga-landing a.group.inline-flex{
      max-width:100%;
      justify-content:center;
      text-align:center;
      white-space:normal;
    }

    .mkga-landing .absolute.-top-8,
    .mkga-landing .absolute.-bottom-6,
    .mkga-landing .absolute.-right-4,
    .mkga-landing .absolute.-left-6{
      position:relative!important;
      inset:auto!important;
      margin-bottom:14px;
      transform:none!important;
      display:inline-flex;
    }
    .mkga-landing #cta .absolute.top-0.right-0{
      display:none;
    }
  }

  @media (max-width:640px){
    .mkga-landing{--mkga-header-height:69px}
    .mkga-landing header .max-w-\[1280px\]{padding-top:12px!important;padding-bottom:12px!important}
    .mkga-landing header .font-display.text-2xl{font-size:20px!important}
    .mkga-landing header .w-10{width:36px!important;height:36px!important}
    .mkga-landing header nav a:last-child{
      width:44px;
      height:44px;
      padding:0!important;
      border-radius:999px;
      font-size:0!important;
    }
    .mkga-landing header nav a:last-child::before{
      content:"Chat";
      font-size:12px;
      line-height:1;
    }
    .mkga-landing header nav a:last-child .arrow{display:none}

    .mkga-landing section{padding-top:64px!important;padding-bottom:64px!important}
    .mkga-landing .max-w-\[1280px\]{padding-left:16px!important;padding-right:16px!important}

    .mkga-landing .sticker{
      max-width:100%;
      flex-wrap:wrap;
      border-radius:14px;
      line-height:1.35;
    }
    .mkga-landing .text-xl{font-size:1.05rem!important}
    .mkga-landing .text-2xl{font-size:1.25rem!important}
    .mkga-landing .text-3xl{font-size:1.5rem!important}
    .mkga-landing .text-4xl{font-size:1.9rem!important}
    .mkga-landing .text-5xl{font-size:2.4rem!important}

    .mkga-landing h1.font-display,
    .mkga-landing h2.font-display,
    .mkga-landing .font-display[style*="font-size"]{
      font-size:clamp(38px,14vw,58px)!important;
      line-height:1!important;
    }
    .mkga-landing .font-hand[style*="font-size"]{
      font-size:clamp(48px,16vw,70px)!important;
    }
    .mkga-landing .mega{font-size:clamp(52px,18vw,86px)!important}

    .mkga-landing .mt-10.flex,
    .mkga-landing .mt-12.flex,
    .mkga-landing .mt-6.flex{
      align-items:stretch!important;
    }
    .mkga-landing .mt-10.flex > a,
    .mkga-landing .mt-12.flex > a,
    .mkga-landing .mt-6.flex > a,
    .mkga-landing #cta a,
    .mkga-landing section.bg-\[var\(--lime\)\] a{
      width:100%;
      padding:16px 18px!important;
      font-size:16px!important;
    }

    .mkga-landing .grid-cols-4,
    .mkga-landing .grid-cols-3{
      grid-template-columns:repeat(2,minmax(0,1fr))!important;
    }
    .mkga-landing .grid.grid-cols-12,
    .mkga-landing .grid.grid-cols-2{
      grid-template-columns:minmax(0,1fr)!important;
    }
    .mkga-landing .gap-12{gap:28px!important}
    .mkga-landing .gap-8{gap:24px!important}
    .mkga-landing .gap-6{gap:18px!important}

    .mkga-landing .p-10,
    .mkga-landing .p-8,
    .mkga-landing .p-6{padding:20px!important}
    .mkga-landing .rounded-2xl,
    .mkga-landing .rounded-3xl{border-radius:18px!important}
    .mkga-landing .tilt,
    .mkga-landing .tilt-r{transform:none!important}

    .mkga-landing footer .max-w-\[1280px\]{
      flex-direction:column;
      align-items:flex-start;
      gap:18px;
    }
  }

  @media (max-width:420px){
    .mkga-landing .grid-cols-4,
    .mkga-landing .grid-cols-3{grid-template-columns:minmax(0,1fr)!important}
    .mkga-landing .px-10,
    .mkga-landing .px-12{padding-left:16px!important;padding-right:16px!important}
    .mkga-landing .py-6,
    .mkga-landing .py-7{padding-top:14px!important;padding-bottom:14px!important}
  }
