.floating-comic-bubble{
      position:fixed;
      z-index:999;
      font-family:Bangers,cursive;
      font-size:48px;
      color:var(--accent);
      -webkit-text-stroke:3px var(--ink);
      text-shadow:4px 4px 0 var(--primary);
      pointer-events:none;
      animation:floatBubble 4s ease-out forwards;
      opacity:.95;
    }

    @keyframes floatBubble{
      0%{
        transform:translateY(20px) scale(.7) rotate(-8deg);
        opacity:0;
      }

      10%{
        opacity:1;
      }

      100%{
        transform:translateY(-120px) scale(1.2) rotate(8deg);
        opacity:0;
      }
    }

    .comic-card,
    .dashboard-card,
    .character-card,
    .showcase-card{
      transform-style:preserve-3d;
      transition:
      transform .18s ease,
      box-shadow .18s ease,
      background .18s ease;
      will-change:transform;
    }

    .comic-card::before,
    .dashboard-card::before,
    .character-card::before,
    .showcase-card::before{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      background:linear-gradient(120deg, rgba(255,255,255,.24), transparent 35%, transparent 65%, rgba(255,255,255,.18));
      opacity:.55;
      mix-blend-mode:screen;
    }

    .phone{
      animation:phoneFloat 5s ease-in-out infinite;
    }

    @keyframes phoneFloat{
      0%,100%{
        transform:rotate(3deg) translateY(0px);
      }

      50%{
        transform:rotate(1deg) translateY(-14px);
      }
    }

    .premium-cta,
    .premium-banner-2,
    .featured-card{
      overflow:hidden;
    }

    .premium-cta::after,
    .premium-banner-2::after,
    .featured-card::after{
      content:"";
      position:absolute;
      inset:-40%;
      background:linear-gradient(120deg, transparent 35%, rgba(255,255,255,.16), transparent 65%);
      animation:shineSweep 7s linear infinite;
    }

    @keyframes shineSweep{
      from{
        transform:translateX(-100%) rotate(12deg);
      }

      to{
        transform:translateX(100%) rotate(12deg);
      }
    }

    .comic-cover,
    .trend-card,
    .cover-art{
      background-size:200% 200%;
      animation:gradientShift 12s ease infinite;
    }

    @keyframes gradientShift{
      0%{ background-position:0% 50%; }
      50%{ background-position:100% 50%; }
      100%{ background-position:0% 50%; }
    }

    .bottom-nav{
      backdrop-filter:blur(22px);
      background:rgba(255,255,255,.78);
    }

    .bottom-nav a.active{
      box-shadow:0 0 18px rgba(255,209,102,.6);
    }

    body{
      animation:bgPulse 12s ease infinite;
    }

    @keyframes bgPulse{
      0%,100%{
        filter:saturate(1);
      }

      50%{
        filter:saturate(1.08);
      }
    }

    @media(max-width:700px){

      .floating-comic-bubble{
        font-size:32px;
      }

      .phone{
        animation-duration:7s;
      }

    }

  
    /* === FIXED HEADER + FIXED FOOTER / SCROLL CONTENT BETWEEN === */
    html:has(.app-shell),
    body:has(.app-shell) {
      height: 100%;
    }

    body:has(.app-shell) {
      overflow: hidden !important;
    }

    .app-shell {
      height: 100svh;
      overflow-y: auto;
      overflow-x: hidden;
      padding-top: 96px;
      padding-bottom: 140px;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }

    .app-shell::-webkit-scrollbar {
      display: none;
    }

    .topbar {
      position: fixed !important;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: min(1180px, calc(100% - 28px));
      z-index: 1000;
      padding: 14px 18px;
    }

    .topbar::before {
      content: "";
      position: absolute;
      inset: 0 -14px;
      z-index: -1;
      background: rgba(255, 245, 220, .72);
      border-bottom: 4px solid var(--ink);
      backdrop-filter: blur(18px);
      box-shadow: 0 12px 30px rgba(16,19,26,.14);
    }

    footer {
      position: fixed;
      left: 50%;
      bottom: 0;
      transform: translateX(-50%);
      z-index: 1000;
      width: min(1180px, calc(100% - 28px));
      padding: 12px 14px calc(12px + var(--safe-bottom));
      border: 4px solid var(--ink);
      border-bottom: 0;
      border-radius: 22px 22px 0 0;
      background: rgba(255,255,255,.86);
      backdrop-filter: blur(18px);
      box-shadow: 0 -12px 34px rgba(16,19,26,.18);
      color: var(--ink);
    }

    .bottom-nav {
      bottom: calc(62px + var(--safe-bottom));
    }

    @media (max-width: 980px) {
      footer {
        position: static;
        left: auto;
        bottom: auto;
        transform: none;
        z-index: 1;
        width: 100%;
        margin-top: 48px;
        border-bottom: 4px solid var(--ink);
      }

      .bottom-nav {
        bottom: calc(42px + var(--safe-bottom));
      }

      .app-shell {
        padding-bottom: calc(134px + var(--safe-bottom));
      }
    }

    @media (max-width: 700px) {
      .app-shell {
        height: 100svh;
        padding-top: 90px;
        padding-bottom: calc(134px + var(--safe-bottom));
      }

      .topbar {
        width: 100%;
        padding: max(14px, env(safe-area-inset-top, 0px)) 18px 12px;
      }

      .topbar::before {
        inset: 0;
      }

      footer {
        width: 100%;
        font-size: 12px;
        line-height: 1.3;
        padding: 10px 12px 14px;
        border-radius: 18px;
      }
    }

:root {
      --ink: #10131a;
      --ink-soft: #1b2230;
      --paper: #fff5dc;
      --paper-2: #fffaf2;

      /* Harmonized Premium Palette */
      --primary: #ff6b35;
      --primary-dark: #ff4d2e;
      --secondary: #5b8cff;
      --secondary-dark: #3d63ff;
      --accent: #ffd166;
      --accent-soft: #ffe29a;
      --teal: #4ecdc4;
      --purple: #7c5cff;
      --rose: #ff8fab;

      --yellow: var(--accent);
      --red: var(--primary);
      --blue: var(--secondary);
      --cyan: var(--teal);
      --green: #57d68d;

      --white: #ffffff;
      --muted: #6e7687;

      --shadow-color: rgba(16,19,26,.92);
      --shadow: 8px 8px 0 var(--shadow-color);
      --big-shadow: 14px 14px 0 var(--shadow-color);

      --radius-sm: 18px;
      --radius: 28px;
      --radius-lg: 38px;

      --gradient-main: linear-gradient(135deg, var(--primary), var(--accent));
      --gradient-cool: linear-gradient(135deg, var(--secondary), var(--teal));
      --gradient-premium: linear-gradient(135deg, #161a25, #262d44, #3a2d6a);
      --gradient-card: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.82));

      --safe-bottom: env(safe-area-inset-bottom, 0px);
    }

    * {
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      min-height: 100vh;
      font-family: Inter, system-ui, sans-serif;
      color: var(--ink);
      background:
        radial-gradient(circle at 18% 10%, rgba(255, 49, 80, .35), transparent 28%),
        radial-gradient(circle at 90% 18%, rgba(29, 109, 255, .35), transparent 28%),
        linear-gradient(180deg, #fff2b0 0%, #ffd85a 35%, #ffb02e 100%);
      overflow-x: hidden;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background:
        radial-gradient(circle at 1px 1px, rgba(11,11,16,.18) 1.4px, transparent 0) 0 0 / 13px 13px,
        linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,0));
      mix-blend-mode: multiply;
    }

    body::after {
      content: "";
      position: fixed;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background: radial-gradient(circle at center, transparent 45%, rgba(11,11,16,.22));
    }

    #pixi-bg {
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    .app-shell {
      position: relative;
      z-index: 2;
      width: min(1180px, calc(100% - 28px));
      margin: 0 auto;
      padding-bottom: calc(140px + var(--safe-bottom));
    }

    .topbar {
      position: sticky;
      top: 0;
      z-index: 30;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 16px 18px 12px;
      backdrop-filter: blur(14px);
    }

    .topbar-end {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-left: auto;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-left: 2px;
      transform: rotate(-1deg);
    }

    .brand-icon {
      width: 48px;
      height: 48px;
      display: grid;
      place-items: center;
      border: 4px solid var(--ink);
      border-radius: 15px;
      background: linear-gradient(135deg, var(--red), #ff7b2c);
      box-shadow: 4px 4px 0 var(--ink);
      color: var(--white);
      font-family: Bangers, cursive;
      font-size: 32px;
      text-shadow: 2px 2px 0 var(--ink);
    }

    .brand-name {
      display: block;
      width: auto;
      max-width: min(320px, 52vw);
      height: clamp(52px, 9vw, 72px);
      object-fit: contain;
    }

    .nav-desktop {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .nav-desktop a,
    .pill-btn {
      border: 3px solid var(--ink);
      background: var(--gradient-card);
      padding: 11px 15px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 900;
      text-transform: uppercase;
      box-shadow: 4px 4px 0 var(--ink);
      transition: .18s ease;
    }

    .nav-desktop a:hover,
    .pill-btn:hover {
      transform: translate(-2px, -2px);
      box-shadow: 7px 7px 0 var(--ink);
      background: var(--yellow);
    }

    .hero {
      min-height: calc(100svh - 78px);
      display: grid;
      grid-template-columns: 1.02fr .98fr;
      align-items: center;
      gap: 42px;
      padding: 36px 0 72px;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(255,255,255,.88);
      border: 3px solid var(--ink);
      border-radius: 999px;
      padding: 9px 13px;
      box-shadow: 4px 4px 0 var(--ink);
      font-weight: 900;
      text-transform: uppercase;
      font-size: 12px;
      margin-bottom: 18px;
    }

    .eyebrow::before {
      content: "";
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--green);
      border: 2px solid var(--ink);
    }

    h1 {
      margin: 0 0 20px;
      font-family: Bangers, cursive;
      font-size: clamp(66px, 11vw, 142px);
      line-height: .82;
      letter-spacing: 1px;
      color: var(--white);
      text-shadow: 5px 5px 0 var(--ink), 10px 10px 0 var(--red);
    }

    .lead {
      max-width: 620px;
      margin: 0 0 28px;
      font-size: clamp(17px, 2vw, 22px);
      line-height: 1.55;
      font-weight: 800;
      color: #181818;
    }

    .hero-actions {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      margin-bottom: 24px;
    }

    .cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 54px;
      border: 4px solid var(--ink);
      border-radius: 18px;
      padding: 14px 20px;
      font-weight: 900;
      text-transform: uppercase;
      box-shadow: 6px 6px 0 var(--ink);
      transition: .18s ease;
    }

    .cta:hover {
      transform: translate(-3px, -3px) rotate(-1deg);
      box-shadow: 10px 10px 0 var(--ink);
    }

    .cta.primary {
      background: var(--yellow);
    }

    .cta.secondary {
      background: var(--ink);
      color: var(--white);
    }

    .stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      max-width: 620px;
    }

    .stat {
      border: 3px solid var(--ink);
      border-radius: 18px;
      background: rgba(255,255,255,.82);
      padding: 14px;
      box-shadow: 4px 4px 0 var(--ink);
      backdrop-filter: blur(12px);
    }

    .stat strong {
      display: block;
      font-family: Bangers, cursive;
      font-size: 34px;
      line-height: 1;
    }

    .stat span {
      display: block;
      margin-top: 4px;
      font-size: 12px;
      font-weight: 900;
      text-transform: uppercase;
      color: #303039;
    }

    .phone-stage {
      position: relative;
      min-height: 650px;
      display: grid;
      place-items: center;
      perspective: 1100px;
    }

    .phone {
      position: relative;
      width: min(360px, 86vw);
      height: 680px;
      border: 7px solid var(--ink);
      border-radius: 46px;
      background: var(--ink);
      box-shadow: 18px 18px 0 rgba(11,11,16,.98), 0 28px 70px rgba(11,11,16,.32);
      padding: 14px;
      transform: rotate(3deg);
      overflow: hidden;
    }

    .phone::before {
      content: "";
      position: absolute;
      top: 11px;
      left: 50%;
      transform: translateX(-50%);
      width: 108px;
      height: 25px;
      background: var(--ink);
      border-radius: 999px;
      z-index: 10;
    }

    .phone-screen {
      position: relative;
      width: 100%;
      height: 100%;
      border-radius: 33px;
      overflow: hidden;
      background:
        radial-gradient(circle at 75% 10%, rgba(255,255,255,.55), transparent 18%),
        linear-gradient(160deg, #ff3150 0%, #ff8c2a 42%, #ffd21f 100%);
      border: 4px solid #2b2b33;
    }

    .phone-screen::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 2px 2px, rgba(11,11,16,.25) 2px, transparent 0) 0 0 / 13px 13px;
      opacity: .7;
    }

    .app-preview-top {
      position: relative;
      z-index: 2;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 42px 18px 12px;
      color: var(--white);
      text-shadow: 2px 2px 0 var(--ink);
      font-weight: 900;
    }

    .mini-logo {
      font-family: Bangers, cursive;
      font-size: 30px;
    }

    .avatar {
      width: 34px;
      height: 34px;
      border: 3px solid var(--ink);
      border-radius: 50%;
      background: var(--cyan);
      box-shadow: 3px 3px 0 var(--ink);
    }

    .cover-art {
      position: relative;
      z-index: 2;
      margin: 8px 18px;
      height: 360px;
      border: 5px solid var(--ink);
      border-radius: 26px;
      background:
        linear-gradient(135deg, rgba(255,255,255,.25), transparent 40%),
        radial-gradient(circle at 50% 26%, var(--yellow) 0 20%, transparent 20.5%),
        linear-gradient(145deg, var(--blue) 0 38%, var(--ink) 38% 42%, #fff 42% 68%, var(--red) 68%);
      box-shadow: 8px 8px 0 var(--ink);
      overflow: hidden;
    }

    .cover-art--book {
      display: grid;
      place-items: center;
      animation: none;
      background-size: auto;
      background:
        radial-gradient(circle at 2px 2px, rgba(11,11,16,.18) 2px, transparent 0) 0 0 / 13px 13px,
        radial-gradient(circle at 50% 88%, rgba(16,19,26,.18), transparent 42%),
        linear-gradient(160deg, #ff3150 0%, #ff8c2a 42%, #ffd21f 100%);
    }

    .cover-art--book::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 50% 18%, rgba(255,255,255,.42), transparent 34%);
      pointer-events: none;
    }

    .cover-art-stack {
      position: relative;
      z-index: 2;
      width: min(74%, 220px);
      height: 90%;
      transform: perspective(900px) rotateY(-11deg) rotateZ(-1.5deg);
      transform-style: preserve-3d;
      filter:
        drop-shadow(0 18px 18px rgba(16,19,26,.34))
        drop-shadow(0 6px 8px rgba(16,19,26,.22));
      animation: coverArtFloat 5.2s ease-in-out infinite;
    }

    .cover-art-stack::before {
      content: "";
      position: absolute;
      top: 5%;
      bottom: 5%;
      left: -11px;
      width: 12px;
      border: 3px solid var(--ink);
      border-right: 0;
      border-radius: 8px 0 0 8px;
      background: linear-gradient(180deg, #1a2f66, #0f1a3a);
      transform: translateZ(-10px);
    }

    .cover-art-stack::after {
      content: "";
      position: absolute;
      left: 8%;
      right: 8%;
      bottom: -10px;
      height: 18px;
      border-radius: 50%;
      background: radial-gradient(ellipse, rgba(16,19,26,.34), transparent 72%);
      transform: rotateX(72deg);
    }

    .cover-art-image {
      position: relative;
      z-index: 2;
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
      border: 4px solid var(--ink);
      border-radius: 12px 16px 16px 12px;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
    }

    @keyframes coverArtFloat {
      0%, 100% {
        transform: perspective(900px) rotateY(-11deg) rotateZ(-1.5deg) translateY(0);
      }

      50% {
        transform: perspective(900px) rotateY(-9deg) rotateZ(-1deg) translateY(-10px);
      }
    }

    .cover-art-title {
      position: absolute;
      left: 16px;
      bottom: 18px;
      font-family: Bangers, cursive;
      font-size: 62px;
      line-height: .8;
      color: var(--white);
      text-shadow: 4px 4px 0 var(--ink), 7px 7px 0 var(--red);
      transform: rotate(-4deg);
    }

    .sound-pop {
      position: absolute;
      top: 18px;
      right: 14px;
      font-family: Bangers, cursive;
      font-size: 42px;
      color: var(--yellow);
      -webkit-text-stroke: 3px var(--ink);
      text-shadow: 4px 4px 0 var(--red);
      animation: pop 1.4s ease-in-out infinite;
    }

    .phone-info {
      position: relative;
      z-index: 2;
      margin: 16px 18px 0;
      border: 4px solid var(--ink);
      border-radius: 22px;
      background: var(--gradient-card);
      padding: 16px;
      box-shadow: 6px 6px 0 var(--ink);
      backdrop-filter: blur(10px);
    }

    .phone-info h3 {
      margin: 0 0 6px;
      font-family: Bangers, cursive;
      font-size: 36px;
      line-height: 1;
    }

    .phone-info p {
      margin: 0 0 12px;
      font-weight: 800;
      font-size: 13px;
      line-height: 1.35;
    }

    .progress {
      height: 12px;
      border: 3px solid var(--ink);
      border-radius: 999px;
      overflow: hidden;
      background: var(--white);
    }

    .progress span {
      display: block;
      width: 68%;
      height: 100%;
      background: linear-gradient(90deg, var(--red), var(--yellow));
    }

    .floating-word {
      position: absolute;
      z-index: 5;
      font-family: Bangers, cursive;
      color: var(--yellow);
      -webkit-text-stroke: 3px var(--ink);
      text-shadow: 5px 5px 0 var(--red);
      filter: drop-shadow(0 14px 20px rgba(11,11,16,.25));
      animation: floaty 3.4s ease-in-out infinite;
    }

    .floating-word.one {
      left: 0;
      top: 72px;
      font-size: 62px;
      transform: rotate(-12deg);
    }

    .floating-word.two {
      right: -2px;
      bottom: 120px;
      font-size: 54px;
      transform: rotate(10deg);
      animation-delay: .4s;
    }

    .section-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 18px;
      margin-bottom: 24px;
    }

    .section-title {
      margin: 0;
      font-family: Bangers, cursive;
      font-size: clamp(46px, 8vw, 82px);
      line-height: .9;
      color: var(--white);
      text-shadow: 4px 4px 0 var(--ink), 8px 8px 0 var(--blue);
    }

    .section-note {
      max-width: 360px;
      margin: 0;
      font-weight: 900;
      line-height: 1.45;
      color: #1f1f27;
    }

    .comic-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
    }

    .comic-card {
      position: relative;
      border: 5px solid var(--ink);
      border-radius: var(--radius);
      background: var(--gradient-card);
      box-shadow: var(--shadow);
      overflow: hidden;
      transition: .2s ease;
    }

    .comic-card:hover {
      transform: translate(-5px, -8px) rotate(-1deg);
      box-shadow: var(--big-shadow);
    }

    .comic-cover {
      position: relative;
      min-height: 320px;
      border-bottom: 5px solid var(--ink);
      overflow: hidden;
      background:
        radial-gradient(circle at 2px 2px, rgba(11,11,16,.22) 2px, transparent 0) 0 0 / 13px 13px,
        linear-gradient(135deg, #ff6b35, #ffd166);
    }

    .comic-card:nth-child(2) .comic-cover {
      background:
        radial-gradient(circle at 2px 2px, rgba(11,11,16,.22) 2px, transparent 0) 0 0 / 13px 13px,
        linear-gradient(135deg, #7c5cff, #ff8fab);
    }

    .comic-card:nth-child(3) .comic-cover {
      background:
        radial-gradient(circle at 2px 2px, rgba(11,11,16,.22) 2px, transparent 0) 0 0 / 13px 13px,
        linear-gradient(135deg, #ff3150, #ffb02e);
    }

    .comic-card:nth-child(4) .comic-cover {
      background:
        radial-gradient(circle at 2px 2px, rgba(11,11,16,.22) 2px, transparent 0) 0 0 / 13px 13px,
        linear-gradient(135deg, #ff4d2e, #ffd166);
    }

    .comic-card:nth-child(5) .comic-cover {
      background:
        radial-gradient(circle at 2px 2px, rgba(11,11,16,.22) 2px, transparent 0) 0 0 / 13px 13px,
        linear-gradient(135deg, #ff8fab, #7c5cff);
    }

    .comic-card:nth-child(6) .comic-cover {
      background:
        radial-gradient(circle at 2px 2px, rgba(11,11,16,.22) 2px, transparent 0) 0 0 / 13px 13px,
        linear-gradient(135deg, #ff6b35, #ff3150);
    }

    .comic-cover--scene {
      display: grid;
      place-items: end center;
      min-height: 320px;
      padding: 6px 8px 4px;
    }

    .comic-cover--scene img {
      position: relative;
      z-index: 2;
      display: block;
      width: 108%;
      max-width: 108%;
      height: auto;
      min-height: 285px;
      max-height: 310px;
      object-fit: contain;
      object-position: center bottom;
      pointer-events: none;
    }

    .comic-cover--scene .issue {
      z-index: 3;
    }

    .comic-cover--scene::after {
      opacity: 0.4;
      z-index: 1;
    }

    .comic-cover::after {
      content: "";
      position: absolute;
      width: 210px;
      height: 210px;
      right: -45px;
      bottom: -60px;
      border: 5px solid var(--ink);
      border-radius: 50%;
      background: var(--gradient-card);
    }

    .issue {
      position: absolute;
      top: 14px;
      left: 14px;
      z-index: 2;
      border: 3px solid var(--ink);
      border-radius: 999px;
      background: var(--yellow);
      padding: 8px 11px;
      box-shadow: 4px 4px 0 var(--ink);
      font-weight: 900;
      font-size: 12px;
    }

    .cover-word {
      position: absolute;
      left: 20px;
      bottom: 24px;
      z-index: 2;
      font-family: Bangers, cursive;
      font-size: 62px;
      color: var(--white);
      -webkit-text-stroke: 3px var(--ink);
      text-shadow: 5px 5px 0 var(--red);
      transform: rotate(-6deg);
    }

    .comic-body {
      padding: 20px;
    }

    .comic-body h3 {
      margin: 0 0 8px;
      font-family: Bangers, cursive;
      font-size: 38px;
      line-height: .95;
    }

    .comic-body p {
      margin: 0 0 16px;
      font-weight: 800;
      line-height: 1.45;
      color: #31313a;
    }

    .chips {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .chip {
      border: 3px solid var(--ink);
      border-radius: 999px;
      background: var(--paper-2);
      padding: 6px 9px;
      font-size: 12px;
      font-weight: 900;
    }

    .featured-series {
      margin: 70px 0;
    }

    .featured-series-wrap {
      display: grid;
      grid-template-columns: minmax(220px, .9fr) 1.1fr;
      gap: 24px;
      align-items: center;
      border: 6px solid var(--ink);
      border-radius: 32px;
      background: var(--gradient-card);
      box-shadow: var(--big-shadow);
      padding: clamp(20px, 4vw, 32px);
      backdrop-filter: blur(12px);
    }

    .featured-series-cover {
      border: 5px solid var(--ink);
      border-radius: 24px;
      overflow: hidden;
      box-shadow: 8px 8px 0 var(--ink);
      transform: rotate(-1.5deg);
      background:
        radial-gradient(circle at 2px 2px, rgba(11,11,16,.18) 2px, transparent 0) 0 0 / 13px 13px,
        linear-gradient(135deg, var(--purple), var(--blue));
    }

    .featured-series-cover img {
      display: block;
      width: 100%;
      height: auto;
      object-fit: cover;
    }

    .featured-series-label {
      display: inline-block;
      margin-bottom: 12px;
      border: 3px solid var(--ink);
      border-radius: 999px;
      background: var(--yellow);
      padding: 7px 12px;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: .35px;
    }

    .featured-series-title {
      margin: 0 0 12px;
      font-family: Bangers, cursive;
      font-size: clamp(44px, 8vw, 72px);
      line-height: .9;
      color: var(--ink);
      text-shadow: 3px 3px 0 var(--accent);
    }

    .featured-series-copy p {
      margin: 0 0 16px;
      font-weight: 800;
      line-height: 1.55;
      color: #31313a;
    }

    .featured-series-meta {
      list-style: none;
      margin: 0 0 20px;
      padding: 0;
      display: grid;
      gap: 8px;
    }

    .featured-series-meta li {
      border: 3px solid var(--ink);
      border-radius: 14px;
      background: rgba(255,255,255,.86);
      padding: 10px 12px;
      font-weight: 800;
      font-size: 14px;
      box-shadow: 3px 3px 0 var(--ink);
    }

    .featured-series-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }

    .reader {
      margin-top: 76px;
    }

    .reader-wrap {
      display: grid;
      grid-template-columns: 1fr .9fr;
      gap: 22px;
      align-items: stretch;
    }

    .reader-main {
      border: 6px solid var(--ink);
      border-radius: 32px;
      background: var(--paper-2);
      box-shadow: var(--big-shadow);
      padding: 18px;
      transform: rotate(-.5deg);
    }

    .panels {
      display: grid;
      grid-template-columns: 1.2fr .8fr;
      gap: 14px;
    }

    .panel {
      position: relative;
      min-height: 190px;
      border: 5px solid var(--ink);
      border-radius: 20px;
      background: var(--white);
      padding: 18px;
      overflow: hidden;
    }

    .panel.big {
      min-height: 330px;
      grid-row: span 2;
      background:
        radial-gradient(circle at 2px 2px, rgba(11,11,16,.18) 2px, transparent 0) 0 0 / 14px 14px,
        linear-gradient(135deg, #ffffff, #bff6ff);
    }

    .panel.dark {
      background: var(--ink);
      color: var(--white);
    }

    .panel--image {
      padding: 10px;
      background:
        radial-gradient(circle at 2px 2px, rgba(11,11,16,.18) 2px, transparent 0) 0 0 / 13px 13px,
        linear-gradient(135deg, #ff6b35, #ffd166);
    }

    .panel--image img {
      display: block;
      width: 100%;
      height: 100%;
      min-height: 100%;
      object-fit: contain;
      object-position: center center;
    }

    .panel.big.panel--image {
      background:
        radial-gradient(circle at 2px 2px, rgba(11,11,16,.18) 2px, transparent 0) 0 0 / 13px 13px,
        linear-gradient(135deg, var(--blue), var(--cyan));
    }

    .panel h3 {
      position: relative;
      z-index: 2;
      margin: 0 0 6px;
      font-family: Bangers, cursive;
      font-size: 38px;
      line-height: 1;
    }

    .panel p {
      position: relative;
      z-index: 2;
      margin: 0;
      font-weight: 800;
      line-height: 1.45;
    }

    .panel::after {
      content: "";
      position: absolute;
      right: -46px;
      bottom: -46px;
      width: 145px;
      height: 145px;
      border: 5px solid var(--ink);
      border-radius: 50%;
      background: var(--yellow);
    }

    .reader-side {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .feature-card {
      border: 5px solid var(--ink);
      border-radius: 26px;
      background: var(--gradient-card);
      box-shadow: var(--shadow);
      padding: 20px;
      backdrop-filter: blur(12px);
    }

    .feature-card h3 {
      margin: 0 0 8px;
      font-family: Bangers, cursive;
      font-size: 38px;
      line-height: .95;
    }

    .feature-card p {
      margin: 0;
      font-weight: 800;
      line-height: 1.45;
    }

    .continue-reading-banner {
      margin: 1.25rem auto 0;
      max-width: 520px;
      padding: 1.25rem 1.5rem;
      border: 5px solid var(--ink);
      border-radius: 26px;
      background: linear-gradient(135deg, var(--yellow), #ffe566);
      box-shadow: var(--shadow);
      text-align: center;
    }

    .continue-reading-banner[hidden] {
      display: none !important;
    }

    .continue-reading-label {
      margin: 0;
      font-family: Bangers, cursive;
      font-size: 1.5rem;
      letter-spacing: 0.04em;
    }

    .continue-reading-title {
      margin: 0.35rem 0 0;
      font-weight: 900;
      font-size: 1.1rem;
    }

    .continue-reading-meta {
      margin: 0.25rem 0 1rem;
      font-weight: 700;
      color: var(--muted, #444);
    }

    .premium-cta {
      margin: 78px 0 38px;
      position: relative;
      border: 6px solid var(--ink);
      border-radius: 34px;
      background: linear-gradient(135deg, var(--ink), #242438);
      color: var(--white);
      box-shadow: var(--big-shadow);
      padding: clamp(28px, 6vw, 58px);
      overflow: hidden;
      text-align: center;
    }

    .premium-cta::before {
      content: "";
      position: absolute;
      inset: -80px;
      background: repeating-conic-gradient(from 0deg, rgba(255,210,31,.24) 0 10deg, transparent 10deg 22deg);
      animation: spin 22s linear infinite;
    }

    .premium-cta > * {
      position: relative;
      z-index: 2;
    }

    .premium-cta h2 {
      margin: 0 0 12px;
      font-family: Bangers, cursive;
      font-size: clamp(48px, 9vw, 92px);
      line-height: .88;
      text-shadow: 5px 5px 0 var(--red);
    }

    .premium-cta p {
      max-width: 760px;
      margin: 0 auto 26px;
      font-size: clamp(16px, 2vw, 21px);
      line-height: 1.5;
      font-weight: 800;
    }

    footer {
      padding: 22px 0 32px;
      text-align: center;
      font-weight: 900;
      color: #24242c;
    }

    .bottom-nav {
      position: fixed;
      left: 50%;
      bottom: calc(42px + var(--safe-bottom));
      transform: translateX(-50%);
      z-index: 60;
      width: min(520px, calc(100% - 24px));
      display: none;
      grid-template-columns: repeat(5, 1fr);
      gap: 6px;
      border: 4px solid var(--ink);
      border-radius: 24px;
      background: var(--gradient-card);
      box-shadow: 8px 8px 0 var(--ink), 0 18px 50px rgba(11,11,16,.24);
      padding: 9px 7px;
      backdrop-filter: blur(16px);
      width: min(560px, calc(100% - 20px));
    }

    .bottom-nav a {
      display: grid;
      place-items: center;
      gap: 3px;
      min-height: 50px;
      border-radius: 16px;
      font-size: 10px;
      font-weight: 900;
      text-transform: uppercase;
    }

    .bottom-nav a strong {
      font-size: 19px;
      line-height: 1;
    }

    .bottom-nav a.active {
      background: var(--yellow);
      border: 3px solid var(--ink);
    }

    @keyframes pop {
      0%, 100% { transform: rotate(-8deg) scale(1); }
      50% { transform: rotate(-5deg) scale(1.08); }
    }

    @keyframes floaty {
      0%, 100% { translate: 0 0; }
      50% { translate: 0 -14px; }
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    @media (max-width: 980px) {
      .nav-desktop {
        display: none;
      }

      .bottom-nav {
        display: grid;
      }

      .hero {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 18px 0 62px;
      }

      .hero-copy {
        text-align: left;
      }

      .hero-actions .cta {
        flex: 1 1 180px;
      }

      .phone-stage {
        min-height: 590px;
      }

      .phone {
        height: 620px;
        transform: rotate(1.5deg);
      }

      .comic-row {
        display: flex;
        overflow-x: auto;
        gap: 16px;
        padding: 4px 4px 20px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
      }

      .comic-row::-webkit-scrollbar {
        display: none;
      }

      .comic-card {
        flex: 0 0 min(82vw, 360px);
        scroll-snap-align: start;
      }

      .reader-wrap {
        grid-template-columns: 1fr;
      }

      .section-head {
        align-items: flex-start;
        flex-direction: column;
      }
    }

    @media (max-width: 560px) {
      body {
        background:
          radial-gradient(circle at 20% 8%, rgba(255, 49, 80, .32), transparent 32%),
          radial-gradient(circle at 100% 20%, rgba(29, 109, 255, .32), transparent 28%),
          linear-gradient(180deg, #fff0a8 0%, #ffd21f 45%, #ffab2e 100%);
      }

      .app-shell {
        width: min(100% - 20px, 1180px);
      }

      .topbar {
        padding-top: 14px;
        padding-left: 18px;
        padding-right: 18px;
      }

      .brand-icon {
        width: 44px;
        height: 44px;
      }

      .brand-name {
        max-width: min(260px, 70vw);
        height: clamp(46px, 12vw, 58px);
      }

      .pill-btn {
        padding: 10px 12px;
        font-size: 12px;
      }

      h1 {
        font-size: clamp(64px, 19vw, 98px);
        text-shadow: 4px 4px 0 var(--ink), 8px 8px 0 var(--red);
      }

      .lead {
        font-size: 16.5px;
        margin-bottom: 22px;
      }

      .hero-actions {
        gap: 10px;
      }

      .cta {
        width: 100%;
        min-height: 56px;
        padding: 14px 16px;
        border-radius: 17px;
      }

      .stats {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 8px;
      }

      .stat {
        padding: 10px 8px;
        border-width: 3px;
      }

      .stat strong {
        font-size: 28px;
      }

      .stat span {
        font-size: 9.5px;
      }

      .phone-stage {
        min-height: 560px;
        margin-top: -8px;
      }

      .phone {
        width: min(336px, 92vw);
        height: 590px;
        border-radius: 42px;
        padding: 12px;
        box-shadow: 10px 10px 0 var(--ink), 0 24px 55px rgba(11,11,16,.3);
      }

      .phone-screen {
        border-radius: 30px;
      }

      .cover-art {
        height: 322px;
        margin: 8px 14px;
      }

      .cover-art-stack {
        width: min(78%, 210px);
      }

      .cover-art-title {
        font-size: 54px;
      }

      .sound-pop {
        font-size: 36px;
      }

      .phone-info {
        margin: 14px 14px 0;
        padding: 14px;
      }

      .phone-info h3 {
        font-size: 32px;
      }

      .floating-word.one {
        left: -2px;
        top: 66px;
        font-size: 48px;
      }

      .floating-word.two {
        right: -6px;
        bottom: 98px;
        font-size: 44px;
      }

      .section-title {
        font-size: 52px;
        text-shadow: 3px 3px 0 var(--ink), 6px 6px 0 var(--blue);
      }

      .section-note {
        font-size: 14px;
      }

      .comic-cover {
        min-height: 285px;
      }

      .comic-cover--scene {
        min-height: 285px;
        padding: 4px 6px 2px;
      }

      .comic-cover--scene img {
        width: 106%;
        max-width: 106%;
        min-height: 255px;
        max-height: 275px;
      }

      .reader {
        margin-top: 46px;
      }

      .reader-main {
        border-width: 5px;
        border-radius: 26px;
        padding: 12px;
        box-shadow: 9px 9px 0 var(--ink);
      }

      .panels {
        grid-template-columns: 1fr;
      }

      .panel.big {
        min-height: 250px;
      }

      .panel {
        min-height: 160px;
      }

      .feature-card {
        padding: 17px;
      }

      .premium-cta {
        margin-top: 54px;
        border-radius: 28px;
        box-shadow: 9px 9px 0 var(--ink);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
      }
    }
  
    /* === MOBILE FIT / NO HORIZONTAL OVERFLOW FIX === */
    html,
    body {
      width: 100%;
      max-width: 100%;
      overflow-x: hidden !important;
    }

    body {
      position: relative;
    }

    #pixi-bg,
    #pixi-bg canvas {
      width: 100vw !important;
      max-width: 100vw !important;
      overflow: hidden !important;
    }

    .section-optional[hidden] {
      display: none !important;
    }

    .maintenance-banner {
      min-height: 100vh;
      display: grid;
      place-items: center;
      padding: 2rem;
      text-align: center;
      background: #0b0b10;
      color: #eee;
    }

    .maintenance-inner h1 {
      font-family: Bangers, system-ui, sans-serif;
      font-size: 2.5rem;
      letter-spacing: 0.04em;
    }
    .maintenance-inner p {
      color: #9a9ab0;
      max-width: 28rem;
      margin: 1rem auto 0;
    }

    .reader-wrap,
    .trending-slider,
    .cinematic-grid,
    .dashboard-grid,
    .news-grid,
    .character-grid,
    .floating-cards-showcase,
    .premium-banner-2,
    .premium-cta,
    .creator-section,
    .creator-poster,
    .creator-card,
    .featured-series,
    .featured-series-wrap {
      max-width: 100%;
    }

    img,
    video,
    canvas,
    svg {
      max-width: 100%;
    }

    @media (max-width: 700px) {
      .app-shell {
        width: 100% !important;
        max-width: 100vw !important;
        padding-left: 10px;
        padding-right: 10px;
        margin: 0;
      }

      .topbar {
        width: 100%;
      }

      .hero {
        width: 100%;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 24px;
      }

      .hero-copy,
      .phone-stage,
      .reader-main,
      .reader-side,
      .feature-card,
      .premium-banner-2,
      .premium-cta,
      .trend-card,
      .dashboard-card,
      .character-card,
      .news-card {
        width: 100% !important;
        max-width: 100% !important;
      }

      .phone-stage {
        overflow: hidden;
        transform: none !important;
      }

      .phone {
        width: min(100%, 340px) !important;
        margin: 0 auto;
      }

      .comic-row {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: visible;
      }

      .comic-card {
        flex: 0 0 86vw;
        max-width: 86vw;
      }

      .floating-word.one {
        left: 4px !important;
      }

      .floating-word.two {
        right: 4px !important;
      }

      .banner-content h2,
      .premium-cta h2,
      .featured-content h3,
      .trend-content h3,
      .section-title,
      h1 {
        max-width: 100%;
        overflow-wrap: break-word;
      }

      .floating-cards-showcase {
        width: 100%;
        overflow: hidden;
      }

      .showcase-card,
      .big-showcase {
        max-width: calc(100vw - 20px) !important;
      }
    }

.trending-zone{
    margin-top:70px;
  }

  .trending-slider{
    display:grid;
    grid-template-columns:1.4fr .6fr;
    gap:20px;
  }

  .trend-card{
    position:relative;
    min-height:320px;
    border:6px solid var(--ink);
    border-radius:34px;
    overflow:hidden;
    box-shadow:var(--big-shadow);
    background:
    radial-gradient(circle at 2px 2px, rgba(11,11,16,.2) 2px, transparent 0) 0 0/14px 14px,
    linear-gradient(135deg,#6b00ff,#1d6dff,#00d4ff);
  }

  .trend-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(to top, rgba(0,0,0,.72), transparent 55%);
  }

  .trend-badge{
    position:absolute;
    top:18px;
    left:18px;
    z-index:2;
    background:var(--yellow);
    border:4px solid var(--ink);
    border-radius:999px;
    padding:9px 14px;
    font-weight:900;
    box-shadow:4px 4px 0 var(--ink);
  }

  .trend-content{
    position:absolute;
    left:24px;
    bottom:24px;
    z-index:2;
    color:white;
  }

  .trend-content h3{
    margin:0 0 8px;
    font-family:Bangers,cursive;
    font-size:64px;
    line-height:.85;
    text-shadow:4px 4px 0 var(--ink);
  }

  .trend-content p{
    margin:0;
    font-weight:800;
    max-width:420px;
  }

  .mini-stack{
    display:grid;
    gap:18px;
  }

  .mini-card{
    border:5px solid var(--ink);
    border-radius:28px;
    min-height:150px;
    display:grid;
    place-items:center;
    box-shadow:var(--shadow);
  }

  .mini-card span{
    font-family:Bangers,cursive;
    font-size:62px;
    color:white;
    text-shadow:4px 4px 0 var(--ink);
  }

  .mini-card.red{
    background:var(--gradient-main);
  }

  .mini-card.blue{
    background:var(--gradient-cool);
  }

  .character-section{
    margin-top:80px;
  }

  .character-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
  }

  .character-card{
    border:5px solid var(--ink);
    border-radius:30px;
    background:var(--gradient-card);
    backdrop-filter:blur(12px);
    padding:24px;
    box-shadow:var(--shadow);
    text-align:center;
  }

  .character-avatar{
    width:120px;
    height:120px;
    border-radius:50%;
    border:5px solid var(--ink);
    margin:0 auto 18px;
    box-shadow:0 0 0 6px rgba(255,255,255,.5);
  }

  .red-glow{
    background:linear-gradient(135deg,var(--red),orange);
  }

  .blue-glow{
    background:var(--gradient-cool);
  }

  .yellow-glow{
    background:linear-gradient(135deg,var(--yellow),#fff08a);
  }

  .character-card h3{
    margin:0 0 8px;
    font-family:Bangers,cursive;
    font-size:42px;
  }

  .character-card p{
    margin:0 0 16px;
    font-weight:800;
  }

  .power-bar{
    height:16px;
    border:4px solid var(--ink);
    border-radius:999px;
    overflow:hidden;
    background:white;
  }

  .power-bar span{
    display:block;
    height:100%;
    background:linear-gradient(90deg,var(--red),var(--yellow));
  }

  .quote-banner{
    margin:80px 0;
    display:grid;
    place-items:center;
  }

  .quote-bubble{
    max-width:760px;
    border:6px solid var(--ink);
    border-radius:80px;
    background:white;
    padding:34px;
    text-align:center;
    font-family:Bangers,cursive;
    font-size:54px;
    line-height:.95;
    box-shadow:var(--big-shadow);
    transform:rotate(-1deg);
  }

  .creator-section{
    margin:80px 0 90px;
  }

  .creator-poster{
    position:relative;
    border:6px solid var(--ink);
    border-radius:36px;
    background:
      radial-gradient(circle at 2px 2px, rgba(11,11,16,.2) 2px, transparent 0) 0 0 / 13px 13px,
      linear-gradient(145deg, #6b0f2a 0%, #9e1a3d 38%, #3a0d1c 100%);
    box-shadow:var(--big-shadow);
    padding:clamp(20px,4vw,34px);
    overflow:hidden;
    color:var(--white);
  }

  .creator-poster-glow{
    position:absolute;
    width:420px;
    height:420px;
    top:-120px;
    right:-80px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(255,209,102,.42), transparent 68%);
    pointer-events:none;
  }

  .creator-card{
    position:relative;
    z-index:1;
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
    gap:16px 20px;
    border:5px solid var(--ink);
    border-radius:28px;
    background:rgba(255,255,255,.96);
    color:var(--ink);
    padding:clamp(18px,3vw,28px);
    box-shadow:8px 8px 0 var(--ink);
    overflow:visible;
  }

  .creator-title{
    flex:1 1 100%;
    margin:0;
    font-family:Bangers,cursive;
    font-size:clamp(42px,7vw,64px);
    line-height:.9;
    color:var(--ink);
    text-shadow:3px 3px 0 var(--accent);
  }

  .creator-portrait-frame{
    position:relative;
    flex:0 0 128px;
    width:128px;
    max-width:128px;
    margin:0;
    border:3px solid var(--ink);
    border-radius:16px;
    background:var(--ink);
    box-shadow:4px 4px 0 rgba(11,11,16,.4);
    transform:rotate(-1.5deg);
    overflow:hidden;
  }

  .creator-portrait{
    display:block;
    width:100%;
    height:auto;
    max-height:148px;
    aspect-ratio:5 / 6;
    object-fit:cover;
    object-position:center top;
  }

  .creator-portrait-badge{
    position:absolute;
    left:6px;
    right:6px;
    bottom:6px;
    z-index:2;
    border:2px solid var(--ink);
    border-radius:999px;
    background:var(--yellow);
    color:var(--ink);
    padding:3px 6px;
    text-align:center;
    font-size:7px;
    font-weight:900;
    letter-spacing:.25px;
    box-shadow:2px 2px 0 var(--ink);
  }

  .creator-sfx{
    position:absolute;
    z-index:3;
    font-family:Bangers,cursive;
    line-height:1;
    pointer-events:none;
    filter:drop-shadow(2px 2px 0 var(--ink));
  }

  .creator-sfx--boom{
    top:4px;
    left:2px;
    font-size:18px;
    color:var(--white);
    -webkit-text-stroke:1.5px var(--ink);
    transform:rotate(-10deg);
  }

  .creator-sfx--klik{
    right:2px;
    top:36%;
    font-size:15px;
    color:var(--yellow);
    -webkit-text-stroke:1.5px var(--ink);
    transform:rotate(8deg);
  }

  .creator-text{
    flex:1 1 280px;
    min-width:min(100%, 280px);
    color:var(--ink);
  }

  .creator-text p{
    margin:0 0 14px;
    font-weight:800;
    line-height:1.65;
    font-size:clamp(14px,1.8vw,17px);
  }

  .creator-text p:last-child{
    margin-bottom:0;
  }

  .news-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
  }

  .news-card{
    overflow:hidden;
    border:5px solid var(--ink);
    border-radius:28px;
    background:white;
    box-shadow:var(--shadow);
  }

  .news-top{
    height:220px;
    background:
    radial-gradient(circle at 2px 2px, rgba(11,11,16,.2) 2px, transparent 0) 0 0/13px 13px,
    linear-gradient(135deg,var(--purple),var(--blue));
  }

  .news-body{
    padding:24px;
  }

  .news-label{
    display:inline-block;
    margin-bottom:12px;
    border:3px solid var(--ink);
    border-radius:999px;
    background:var(--yellow);
    padding:7px 11px;
    font-size:12px;
    font-weight:900;
  }

  .news-body h3{
    margin:0 0 10px;
    font-family:Bangers,cursive;
    font-size:44px;
    line-height:.9;
  }

  .news-body p{
    margin:0;
    font-weight:800;
  }

  .dark-news{
    background:linear-gradient(135deg,var(--ink),#232336);
    color:white;
  }

  @media(max-width:980px){

    .trending-slider,
    .character-grid,
    .news-grid,
    .featured-series-wrap,
    .reader-wrap{
      grid-template-columns:1fr;
    }

    .featured-series-cover{
      max-width:280px;
      margin:0 auto;
      transform:none;
    }

    .featured-series-actions .cta{
      flex:1 1 180px;
    }

    .creator-card{
      flex-direction:column;
      align-items:center;
    }

    .creator-portrait-frame{
      flex:0 0 auto;
      width:min(120px, 42%);
      max-width:120px;
      transform:none;
    }

    .creator-text{
      flex:1 1 auto;
      min-width:0;
      width:100%;
    }

    .creator-portrait{
      max-height:132px;
    }

    .quote-bubble{
      font-size:40px;
      border-radius:50px;
    }

  }

  @media(max-width:560px){

    .trend-card{
      min-height:260px;
    }

    .trend-content h3{
      font-size:52px;
    }

    .mini-card span{
      font-size:52px;
    }

    .character-card h3{
      font-size:36px;
    }

    .quote-bubble{
      font-size:30px;
      padding:24px;
      box-shadow:9px 9px 0 var(--ink);
    }

    .creator-title{
      font-size:40px;
      text-align:center;
    }

    .creator-card{
      padding:16px;
    }

    .creator-portrait-frame{
      width:108px;
      max-width:108px;
    }

    .creator-portrait{
      max-height:118px;
    }

    .creator-sfx--boom{
      font-size:16px;
    }

    .creator-sfx--klik{
      font-size:14px;
    }

    .bottom-nav a{
      font-size:9px;
      min-height:46px;
    }

    .bottom-nav a strong{
      font-size:17px;
    }

    .news-body h3{
      font-size:36px;
    }

  }

.cinematic-section{
    margin-top:90px;
  }

  .cinematic-grid{
    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:22px;
    align-items:stretch;
  }

  .featured-card{
    position:relative;
    min-height:360px;
    overflow:hidden;
    border:6px solid var(--ink);
    border-radius:36px;
    background:
    radial-gradient(circle at 2px 2px, rgba(255,255,255,.12) 2px, transparent 0) 0 0/16px 16px,
    linear-gradient(135deg,#050510,#111122,#3c005c);
    box-shadow:var(--big-shadow);
  }

  .featured-card::before{
    content:"";
    position:absolute;
    inset:-40px;
    background:radial-gradient(circle, rgba(255,49,80,.3), transparent 40%);
    animation:spin 18s linear infinite;
  }

  .featured-noise{
    position:absolute;
    inset:0;
    background:linear-gradient(135deg, rgba(255,255,255,.08), transparent 40%);
  }

  .featured-content{
    position:relative;
    z-index:2;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:36px;
    color:white;
  }

  .featured-tag,
  .premium-chip{
    display:inline-flex;
    align-items:center;
    gap:8px;
    width:max-content;
    border:3px solid white;
    border-radius:999px;
    padding:8px 12px;
    font-size:11px;
    font-weight:900;
    letter-spacing:.5px;
    text-transform:uppercase;
    backdrop-filter:blur(10px);
    background:rgba(255,255,255,.08);
  }

  .featured-content h3{
    margin:18px 0 10px;
    font-family:Bangers,cursive;
    font-size:86px;
    line-height:.82;
    text-shadow:4px 4px 0 black;
  }

  .featured-content p{
    margin:0 0 24px;
    max-width:520px;
    font-weight:800;
    font-size:17px;
    line-height:1.5;
  }

  .featured-actions{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
  }

  .mini-premium-btn{
    min-height:50px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:18px;
    padding:12px 18px;
    border:3px solid var(--ink);
    font-weight:900;
    box-shadow:5px 5px 0 var(--ink);
  }

  .yellow-btn{
    background:var(--yellow);
    color:black;
  }

  .dark-btn{
    background:white;
    color:black;
  }

  .floating-panels{
    display:grid;
    gap:18px;
  }

  .floating-panel{
    min-height:106px;
    border:5px solid var(--ink);
    border-radius:30px;
    display:grid;
    place-items:center;
    font-family:Bangers,cursive;
    font-size:58px;
    color:white;
    text-shadow:4px 4px 0 var(--ink);
    box-shadow:var(--shadow);
    backdrop-filter:blur(14px);
  }

  .red-panel{
    background:linear-gradient(135deg,var(--red),#ff9330);
  }

  .blue-panel{
    background:var(--gradient-cool);
  }

  .yellow-panel{
    background:linear-gradient(135deg,var(--yellow),#fff0a0);
    color:black;
  }

  .dashboard-section{
    margin-top:90px;
  }

  .dashboard-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
  }

  .dashboard-card{
    position:relative;
    overflow:hidden;
    border:5px solid var(--ink);
    border-radius:32px;
    background:rgba(255,255,255,.92);
    padding:26px;
    box-shadow:var(--shadow);
    backdrop-filter:blur(14px);
  }

  .dashboard-card h3{
    margin:0 0 18px;
    font-family:Bangers,cursive;
    font-size:42px;
  }

  .dashboard-glow{
    position:absolute;
    width:220px;
    height:220px;
    border-radius:50%;
    background:radial-gradient(circle,var(--yellow),transparent 70%);
    top:-90px;
    right:-90px;
    opacity:.6;
  }

  .energy-ring{
    width:180px;
    height:180px;
    margin:auto;
    border-radius:50%;
    border:12px solid rgba(0,0,0,.1);
    border-top-color:var(--red);
    border-right-color:var(--yellow);
    display:grid;
    place-items:center;
    animation:spin 8s linear infinite;
  }

  .ring-inner{
    width:120px;
    height:120px;
    border-radius:50%;
    background:var(--ink);
    color:white;
    display:grid;
    place-items:center;
    font-family:Bangers,cursive;
    font-size:48px;
  }

  .stats-card p{
    margin-top:18px;
    text-align:center;
    font-weight:800;
  }

  .timeline-item{
    display:flex;
    gap:14px;
    align-items:flex-start;
    margin-bottom:18px;
  }

  .timeline-item span{
    width:18px;
    height:18px;
    border-radius:50%;
    background:var(--yellow);
    border:3px solid var(--ink);
    margin-top:3px;
  }

  .timeline-item strong{
    display:block;
    margin-bottom:4px;
  }

  .timeline-item small{
    font-weight:800;
    color:#555;
  }

  .comic-ui-top{
    display:flex;
    gap:8px;
    margin-bottom:18px;
  }

  .comic-ui-top span{
    width:16px;
    height:16px;
    border-radius:50%;
    border:2px solid var(--ink);
  }

  .comic-ui-top span:nth-child(1){background:var(--red)}
  .comic-ui-top span:nth-child(2){background:var(--yellow)}
  .comic-ui-top span:nth-child(3){background:var(--green)}

  .comic-ui-preview{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
  }

  .comic-ui-box{
    min-height:110px;
    border-radius:18px;
    border:4px solid var(--ink);
    background:var(--gradient-cool);
  }

  .comic-ui-box.big{
    grid-column:span 2;
    min-height:160px;
  }

  .comic-ui-card p{
    margin-top:18px;
    font-weight:800;
  }

  .premium-banner-2{
    position:relative;
    overflow:hidden;
    margin:100px 0;
    border:6px solid var(--ink);
    border-radius:40px;
    background:
    var(--gradient-premium);
    box-shadow:var(--big-shadow);
  }

  .banner-noise{
    position:absolute;
    inset:0;
    background:
    radial-gradient(circle at 2px 2px, rgba(255,255,255,.08) 2px, transparent 0) 0 0/15px 15px;
  }

  .banner-content{
    position:relative;
    z-index:2;
    padding:70px 40px;
    color:white;
    text-align:center;
  }

  .banner-content h2{
    margin:22px auto 16px;
    max-width:920px;
    font-family:Bangers,cursive;
    font-size:92px;
    line-height:.85;
    text-shadow:5px 5px 0 black;
  }

  .banner-content p{
    max-width:720px;
    margin:0 auto 28px;
    font-weight:800;
    font-size:18px;
    line-height:1.6;
  }

  .banner-buttons{
    display:flex;
    justify-content:center;
    gap:16px;
    flex-wrap:wrap;
  }

  .mega-btn{
    min-height:58px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:15px 24px;
    border-radius:20px;
    background:var(--yellow);
    border:4px solid var(--ink);
    color:black;
    font-weight:900;
    box-shadow:6px 6px 0 black;
  }

  .outline-btn{
    background:white;
  }

  .floating-cards-showcase{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:24px;
    margin-bottom:90px;
    flex-wrap:wrap;
  }

  .showcase-card{
    width:260px;
    min-height:320px;
    border:5px solid var(--ink);
    border-radius:32px;
    padding:22px;
    background:
    radial-gradient(circle at 2px 2px, rgba(11,11,16,.16) 2px, transparent 0) 0 0/13px 13px,
    linear-gradient(135deg,var(--red),#ff8f2f);
    box-shadow:var(--shadow);
    color:white;
  }

  .big-showcase{
    width:320px;
    min-height:380px;
    background:
    radial-gradient(circle at 2px 2px, rgba(11,11,16,.16) 2px, transparent 0) 0 0/13px 13px,
    linear-gradient(135deg,var(--blue),var(--purple));
  }

  .showcase-label{
    display:inline-block;
    border:3px solid var(--ink);
    border-radius:999px;
    background:var(--yellow);
    color:black;
    padding:7px 10px;
    font-size:11px;
    font-weight:900;
    margin-bottom:18px;
  }

  .showcase-card h3{
    margin:0;
    font-family:Bangers,cursive;
    font-size:62px;
    line-height:.85;
    text-shadow:4px 4px 0 black;
  }

  .rotate-left{
    transform:rotate(-4deg);
  }

  .rotate-right{
    transform:rotate(4deg);
  }

  @media(max-width:980px){

    .cinematic-grid,
    .dashboard-grid{
      grid-template-columns:1fr;
    }

    .banner-content h2{
      font-size:70px;
    }

  }

  @media(max-width:560px){

    .featured-content{
      padding:24px;
    }

    .featured-content h3{
      font-size:64px;
    }

    .floating-panel{
      min-height:90px;
      font-size:44px;
    }

    .dashboard-card h3{
      font-size:36px;
    }

    .energy-ring{
      width:150px;
      height:150px;
    }

    .ring-inner{
      width:100px;
      height:100px;
      font-size:40px;
    }

    .banner-content{
      padding:50px 24px;
    }

    .banner-content h2{
      font-size:56px;
    }

    .showcase-card,
    .big-showcase{
      width:100%;
      min-height:260px;
    }

    .showcase-card h3{
      font-size:52px;
    }

  }