:root{
    --bg-1:#0b0b0c;
    --bg-2:#0a0a0b;
    --accent-1:#ef4444; /* red-500 */
    --accent-2:#f43f5e; /* rose-500 */
    --glass:#111115cc;
    --border:#232326;
    --text:#e7e7ea;
    --muted:#9b9ba1;
  }

  /* ===== Base ===== */
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    color:var(--text);
    background:
      radial-gradient(60rem 60rem at 70% 10%, rgba(244,63,94,.22), transparent 60%),
      radial-gradient(60rem 60rem at 20% 90%, rgba(239,68,68,.22), transparent 60%),
      linear-gradient(180deg,var(--bg-2),var(--bg-1));
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
    line-height:1.45;
    overflow-x:hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }
  .page{
    position:relative;
    min-height:100vh;
    overflow:hidden;
  }

  /* Soft aurora ribbons */
  .aurora:before,
  .aurora:after{
    content:"";
    position:absolute;
    inset:auto;
    filter:blur(60px);
    opacity:.4;
    pointer-events:none;
  }
  .aurora:before{
    height:38rem;width:38rem;left:-5rem;top:45%;
    background:radial-gradient(closest-side, rgba(225,29,72,.5), transparent 70%);
    transform:rotate(-12deg);
  }
  .aurora:after{
    height:40rem;width:40rem;left:35%;top:-8rem;
    background:radial-gradient(closest-side, rgba(244,63,94,.5), transparent 70%);
    transform:rotate(12deg);
  }

  /* Tiny grain */
  .grain{
    position:absolute;inset:0;pointer-events:none;mix-blend-mode:overlay;opacity:.18;
    background-image:radial-gradient(#000 1px, transparent 1px);
    background-size:4px 4px;
  }

  .container{
    max-width:1200px;
    margin:0 auto;
    padding:2rem 1rem 1rem;
  }
  
  @media (min-width: 768px) {
    .container {
      padding: 3rem 1.25rem 1.5rem;
    }
  }
  
  @media (min-width: 1024px) {
    .container {
      padding: 5rem 1.25rem 2rem;
    }
  }

  /* Brand */
  .brand{
    display:flex;
    align-items:center;
    gap:12px;
  }
  
  @media (min-width: 768px) {
    .brand {
      gap: 16px;
    }
  }
  
  .brand-logo{
    width:40px;
    height:40px;
    border-radius:12px;
    background:linear-gradient(135deg, var(--accent-2), var(--accent-1));
    display:grid;
    place-items:center;
    box-shadow:0 20px 60px -20px rgba(239,68,68,.6);
    font-weight:900;
    font-size: 14px;
  }
  
  @media (min-width: 768px) {
    .brand-logo {
      width: 48px;
      height: 48px;
      border-radius: 16px;
      font-size: 16px;
    }
  }
  
  .brand-title{
    margin:0;
    font-size:24px;
    font-weight:800;
    letter-spacing:-.02em;
  }
  
  @media (min-width: 768px) {
    .brand-title {
      font-size: 28px;
    }
  }
  
  .brand-sub{
    margin:.1rem 0 0;
    color:var(--muted);
    font-size:12px;
  }
  
  @media (min-width: 768px) {
    .brand-sub {
      font-size: 13px;
    }
  }

  /* Hero */
  .hero{
    display:grid;
    align-items:start;
    gap:2rem;
    grid-template-columns: 1fr;
    margin-top:2rem;
  }
  
  @media (min-width: 768px) {
    .hero {
      gap: 2.5rem;
      margin-top: 2.5rem;
    }
  }
  
  @media (min-width:1024px){
    .hero{
      grid-template-columns: 1.05fr .95fr;
      margin-top: 3rem;
    }
  }
  
  .headline{
    font-size:clamp(28px, 6vw, 52px);
    font-weight:900;
    letter-spacing:-.02em;
    line-height: 1.1;
  }
  
  .subline{
    margin-top:.75rem;
    color:var(--muted);
    font-size:clamp(16px, 2.5vw, 18px);
    font-weight:500;
    line-height: 1.4;
  }

  /* Search (wider) */
  .search-wrap{
    margin-top:1.5rem;
    position:relative;
  }
  
  @media (min-width: 768px) {
    .search-wrap {
      margin-top: 1.75rem;
    }
  }
  
  .search-glow{
    position:absolute;
    inset:-2px;
    border-radius:20px;
    background:linear-gradient(90deg, var(--accent-1), var(--accent-2), #a21caf);
    filter:blur(10px);
    opacity:.7;
    transition:.5s;
  }
  
  @media (min-width: 768px) {
    .search-glow {
      border-radius: 28px;
    }
  }
  
  .search{
    position:relative;
    background:color-mix(in oklab, black 75%, transparent);
    -webkit-backdrop-filter:blur(18px);
    backdrop-filter:blur(18px);
    border:1px solid var(--border);
    border-radius:20px;
    box-shadow:0 24px 80px -24px rgba(0,0,0,.7);
    padding:12px 12px;
  }
  
  @media (min-width: 768px) {
    .search {
      border-radius: 28px;
      padding: 14px 14px;
    }
  }
  
  .search-row{
    display:flex;
    align-items:center;
    gap:10px;
  }
  
  @media (min-width: 768px) {
    .search-row {
      gap: 12px;
    }
  }
  
  .icon{
    width:20px;
    height:20px;
    color:#a1a1aa;
    flex:0 0 auto;
  }
  
  @media (min-width: 768px) {
    .icon {
      width: 22px;
      height: 22px;
    }
  }
  
  .input{
    flex:1 1 auto;
    background:transparent;
    border:0;
    outline:none;
    color:var(--text);
    font-size:clamp(16px, 4vw, 18px);
    padding:8px 6px;
    min-height: 44px; /* Better touch target */
  }
  
  .btn{
    background:linear-gradient(90deg,var(--accent-1),var(--accent-2));
    border:0;
    color:white;
    font-weight:700;
    border-radius:14px;
    padding:10px 16px;
    cursor:pointer;
    transition:.2s box-shadow, .2s transform;
    box-shadow:0 10px 30px -10px rgba(239,68,68,.6);
    min-height: 44px; /* Better touch target */
    min-width: 80px; /* Minimum touch target width */
    font-size: 14px;
  }
  
  @media (min-width: 768px) {
    .btn {
      border-radius: 16px;
      padding: 12px 18px;
      font-size: 16px;
    }
  }
  
  .btn:hover{
    transform:translateY(-1px);
    box-shadow:0 16px 40px -16px rgba(239,68,68,.7)
  }
  
  .btn:active{
    transform:translateY(0)
  }

  /* Make search + CTA wider on large screens */
  .search-wide{max-width:100%}
  
  @media (min-width: 768px) {
    .search-wide {
      max-width: 900px;
    }
  }
  
  .cta-wide{max-width:100%}
  
  @media (min-width: 768px) {
    .cta-wide {
      max-width: 600px;
    }
  }

  /* CTA */
  .cta{margin-top:1.5rem}
  
  @media (min-width: 768px) {
    .cta {
      margin-top: 18px;
    }
  }
  
  .cta-btn{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:8px;
    border-radius:16px;
    padding:12px 18px;
    font-weight:800;
    color:white;
    text-decoration:none;
    min-height: 48px; /* Better touch target */
  }
  
  @media (min-width: 768px) {
    .cta-btn {
      gap: 10px;
      border-radius: 18px;
      padding: 14px 22px;
    }
  }
  
  .cta-btn::before{
    content:"";
    position:absolute;
    inset:-2px;
    border-radius:16px;
    background:linear-gradient(90deg,var(--accent-1),var(--accent-2),#a21caf);
    filter:blur(8px);
    opacity:.9;
  }
  
  @media (min-width: 768px) {
    .cta-btn::before {
      border-radius: 18px;
    }
  }
  
  .cta-btn span{
    position:relative;
    z-index:1;
    border:1px solid #ffffff1a;
    border-radius:12px;
    background:#0a0a0dd9;
    padding:8px 14px;
    font-size: 14px;
  }
  
  @media (min-width: 768px) {
    .cta-btn span {
      border-radius: 14px;
      padding: 10px 18px;
      font-size: 16px;
    }
  }
  
  .arrow{
    width:16px;
    height:16px;
    position:relative;
    z-index:1;
  }
  
  @media (min-width: 768px) {
    .arrow {
      width: 18px;
      height: 18px;
    }
  }

  /* Report Issue Button - Fixed Position */
  .report-issue-fixed {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
  }
  
  @media (min-width: 768px) {
    .report-issue-fixed {
      bottom: 30px;
      right: 30px;
    }
  }
  
  .report-btn-fixed {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    border-radius: 12px;
    padding: 10px 16px;
    font-weight: 600;
    font-size: 14px;
    color: white;
    background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
    backdrop-filter: blur(12px);
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    min-height: 40px;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
  }
  
  @media (min-width: 768px) {
    .report-btn-fixed {
      gap: 10px;
      border-radius: 14px;
      padding: 12px 20px;
      font-size: 15px;
      min-height: 44px;
    }
  }
  
  .report-btn-fixed:hover {
    color: white;
    background: linear-gradient(135deg, #dc2626, #e11d48);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.5);
  }
  
  .report-btn-fixed:active {
    transform: translateY(0);
  }
  
  .bug-icon {
    width: 16px;
    height: 16px;
    opacity: 0.8;
  }
  
  @media (min-width: 768px) {
    .bug-icon {
      width: 18px;
      height: 18px;
    }
  }

  /* Right cluster */
  .cluster{
    position:relative;
    height:24rem;
    display:block;
    margin-top: 2rem;
  }
  
  @media (min-width: 768px) {
    .cluster {
      height: 30rem;
      margin-top: 0;
    }
  }
  
  @media (min-width:1024px){
    .cluster{
      height:36rem;
      display:block;
      margin-top: 0;
    }
  }

  .card{
    position:absolute;
    width:14rem;
    border-radius:16px;
    background:linear-gradient(180deg,#0f0f13cc,#0c0c10cc);
    border:1px solid var(--border);
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
    box-shadow:0 24px 100px -24px rgba(0,0,0,.75);
    padding:12px 14px 14px;
    transform:translate(var(--x),var(--y)) rotate(var(--r));
    animation:float 6s ease-in-out infinite;
  }
  
  @media (min-width: 768px) {
    .card {
      width: 16rem;
      border-radius: 18px;
      padding: 14px 16px 16px;
    }
  }
  
  @media (min-width: 1024px) {
    .card {
      width: 18rem;
      padding: 16px 18px 18px;
    }
  }
  
  @keyframes float{
    0%,100% { transform:translate(var(--x),var(--y)) rotate(calc(var(--r) * 1deg)); }
    50%     { transform:translate(calc(var(--x) + 4px), calc(var(--y) - 8px)) rotate(calc(var(--r) * 1deg + .6deg)); }
  }
  
  .thumb{
    width:60px;
    height:60px;
    border-radius:12px;
    background:linear-gradient(135deg,#737373,#52525b);
    display:grid;
    place-items:center;
    font-weight:900;
    font-size:20px;
    color:#111;
    margin-right:12px;
    flex:0 0 auto;
  }
  
  @media (min-width: 768px) {
    .thumb {
      width: 70px;
      height: 70px;
      border-radius: 14px;
      font-size: 22px;
      margin-right: 14px;
    }
  }
  
  @media (min-width: 1024px) {
    .thumb {
      width: 80px;
      height: 80px;
      font-size: 24px;
    }
  }
  
  .row{
    display:flex;
    align-items:center;
  }
  
  .title{
    font-weight:800;
    margin:0 0 4px 0;
    font-size: 14px;
  }
  
  @media (min-width: 768px) {
    .title {
      font-size: 16px;
    }
  }
  
  .tagline{
    color:var(--muted);
    font-size:12px;
    margin:0;
  }
  
  @media (min-width: 768px) {
    .tagline {
      font-size: 14px;
    }
  }
  
  .badges{
    display:flex;
    gap:6px;
    margin-top:8px;
    flex-wrap: wrap;
  }
  
  @media (min-width: 768px) {
    .badges {
      gap: 8px;
      margin-top: 10px;
    }
  }
  
  .badge{
    font-size:9px;
    border-radius:999px;
    border:1px solid #5b1b20;
    color:#f9c2c6;
    padding:.15rem .35rem;
    background:rgba(239,68,68,.12);
  }
  
  @media (min-width: 768px) {
    .badge {
      font-size: 10px;
      padding: .2rem .45rem;
    }
  }
  
  .badge.subtle{
    border-color:#2b2b30;
    color:#cfcfd6;
    background:#1a1a1fbd
  }

  /* Sparkles */
  .sparkle{
    position:absolute;
    right:1rem;
    top:1rem;
    width:2px;
    height:2px;
    border-radius:999px;
    background:white;
    box-shadow:0 0 12px 4px rgba(255,255,255,.35);
  }
  
  @media (min-width: 768px) {
    .sparkle {
      right: 1.5rem;
      top: 1.5rem;
      width: 3px;
      height: 3px;
      box-shadow: 0 0 16px 6px rgba(255,255,255,.35);
    }
  }
  
  .sparkle.s2{
    right:4rem;
    top:6rem;
    opacity:.8;
  }
  
  @media (min-width: 768px) {
    .sparkle.s2 {
      right: 6rem;
      top: 10rem;
    }
  }
  
  .sparkle.s3{
    right:.5rem;
    bottom:2.5rem;
    opacity:.9;
  }
  
  @media (min-width: 768px) {
    .sparkle.s3 {
      bottom: 3.5rem;
    }
  }

  /* Rotating titles (pure CSS) */
  .rotator{
    position:relative;
    height:1.25em;
    overflow:hidden;
  }
  
  .rotator span{
    position:absolute;
    left:0;
    top:0;
    right:0;
    opacity:0;
    animation:cycle 9s infinite;
  }
  
  .rotator span:nth-child(1){animation-delay:0s}
  .rotator span:nth-child(2){animation-delay:3s}
  .rotator span:nth-child(3){animation-delay:6s}
  
  @keyframes cycle{
    0%{opacity:0;transform:translateY(6px)}
    6%,28%{opacity:1;transform:translateY(0)}
    34%,100%{opacity:0;transform:translateY(-6px)}
  }

  /* Footer note */
  footer{
    color:#8a8a92;
    text-align:center;
    font-size:11px;
    padding:0 1rem 1.5rem;
  }
  
  @media (min-width: 768px) {
    footer {
      font-size: 12px;
      padding: 0 1.25rem 2rem;
    }
  }

  /* Mobile-specific optimizations */
  @media (max-width: 767px) {
    /* Reduce animation complexity on mobile for better performance */
    .card {
      animation: float-mobile 8s ease-in-out infinite;
    }
    
    @keyframes float-mobile {
      0%, 100% { transform: translate(var(--x), var(--y)) rotate(calc(var(--r) * 1deg)); }
      50% { transform: translate(calc(var(--x) + 2px), calc(var(--y) - 4px)) rotate(calc(var(--r) * 1deg + .3deg)); }
    }
    
    /* Adjust card positions for mobile */
    .card[style*="--x: 3rem"] {
      --x: 1rem;
      --y: 1rem;
    }
    
    .card[style*="--x: 16rem"] {
      --x: 8rem;
      --y: 4rem;
    }
    
    .card[style*="--x: 6rem"] {
      --x: 2rem;
      --y: 8rem;
    }
    
    /* Improve touch targets */
    .btn, .cta-btn {
      -webkit-tap-highlight-color: transparent;
    }
    
    /* Prevent zoom on input focus */
    .input {
      font-size: 16px;
    }
  }

  /* High contrast mode support */
  @media (prefers-contrast: high) {
    :root {
      --border: #444;
      --text: #fff;
      --muted: #ccc;
    }
  }

  /* Reduced motion support */
  @media (prefers-reduced-motion: reduce) {
    .card, .aurora:before, .aurora:after {
      animation: none;
    }
    
    .rotator span {
      animation: none;
      opacity: 1;
    }
  }

  /* Button group and Discord button styles */
  .button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.5rem;
  }
  
  @media (min-width: 768px) {
    .button-group {
      margin-top: 1.75rem;
    }
  }
  
  .discord-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 12px;
    background-color: #5865F2; /* Discord blurple */
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 50%; /* Circular button */
    box-shadow: 0 10px 30px -10px rgba(88, 101, 242, 0.6);
    transition: all 0.3s ease;
    text-align: center;
    width: 48px;
    height: 48px;
    box-sizing: border-box;
    flex: 0 0 auto;
    position: relative;
  }
  
  @media (min-width: 768px) {
    .discord-button {
      width: 52px;
      height: 52px;
      padding: 14px;
    }
  }

  .discord-button:hover {
    background-color: #4752c4;
    transform: translateY(-1px);
    box-shadow: 0 16px 40px -16px rgba(88, 101, 242, 0.7);
  }

  .discord-button:active {
    transform: translateY(0);
  }
  
  .discord-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }
  
  @media (min-width: 768px) {
    .discord-icon {
      width: 22px;
      height: 22px;
    }
  }
  
  /* Adjust CTA button to work in button group */
  .button-group .cta-btn {
    flex: 1;
    min-width: 180px;
  }
  
  @media (min-width: 768px) {
    .button-group .cta-btn {
      flex: 0 1 auto;
    }
  }