:root{
      --bg0:#0b0b10;
      --bg1:#0f0f15;
      --card: rgba(18,18,24,.72);
      --card2: rgba(18,18,24,.55);
      --stroke: rgba(255,255,255,.08);
      --stroke2: rgba(245,59,106,.22);

      --pink:#F53B6A;
      --pink2:#ff5c88;

      --text:#ffffff;
      --muted: rgba(255,255,255,.72);
      --muted2: rgba(255,255,255,.55);

      --shadowPink: 0 0 18px rgba(245,59,106,.35), 0 0 42px rgba(245,59,106,.18);
      --shadowCard: 0 18px 60px rgba(0,0,0,.55);
      --radius: 18px;
    }

    *{ box-sizing:border-box; }
    html,body{ height:100%; }
    body{
      margin:0;
      color:var(--text);
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
      overflow-x:hidden;
    }

    /* subtle pattern */
    body:before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
      background-size: 22px 22px;
      opacity:.14;

      /* мягче и больше, чтобы край не был виден */
      mask-image: radial-gradient(2400px 1800px at 50% 10%, black 96%, transparent 100%);
    }

    /* top glow bar like "loading indicator" vibe */
    .top-accent{
      position:fixed;
      left:0; top:0;
      height:3px; width:100%;
      background: linear-gradient(90deg, transparent, rgba(245,59,106,.9), transparent);
      filter: blur(.2px);
      opacity:.75;
      z-index:50;
    }

    .wrap{
      min-height:100%;
      display:flex;
      flex-direction:column;
    }

    header{
      position:sticky;
      top:0;
      z-index:40;
      backdrop-filter: blur(10px);
      background: linear-gradient(180deg, rgba(10,10,14,.75), rgba(10,10,14,.35));
      border-bottom:1px solid rgba(255,255,255,.06);
    }

    .nav{
      max-width: 1100px;
      margin:0 auto;
      padding:14px 18px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
    }

    .brand{
      display:flex;
      align-items:center;
      gap:12px;
      text-decoration:none;
      color:var(--text);
      user-select:none;
    }
    .logo{
      width:38px;
      height:38px;
      border-radius:10px;

      /* показываем реальную картинку */
      background-image: url("/favicon.png");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;

      /* на случай, если файла нет/не грузится */
      background-color: rgba(245,59,106,.2);

      box-shadow: var(--shadowPink);
      border:1px solid rgba(255,255,255,.10);
    }
    .brand-title{
      display:flex;
      flex-direction:column;
      line-height:1.05;
    }
    .brand-title b{
      letter-spacing:.2px;
      font-size:14px;
    }
    .brand-title span{
      font-size:12px;
      color:var(--muted2);
    }

    .navlinks{
      display:flex;
      gap:10px;
      flex-wrap:nowrap;           /* без переносов */
      justify-content:flex-end;
      overflow-x:auto;            /* если вдруг не влезло */
      -webkit-overflow-scrolling: touch;
    }
    .navlinks a{
      color:var(--muted);
      text-decoration:none;
      font-weight:600;
      font-size:13px;
      padding:9px 12px;
      border-radius:999px;
      border:1px solid transparent;
      transition:.18s;
    }
    .navlinks a:hover{
      color:var(--text);
      border-color:rgba(255,255,255,.10);
      background: rgba(255,255,255,.04);
    }

    main{
      max-width:1100px;
      margin:0 auto;
      padding: 40px 18px 34px;
      flex:1;
      display:grid;
      grid-template-columns: 1fr; /* ОДНА колонка везде */
      gap:22px;
      align-items:start;
    }

    .hero{
      border-radius: var(--radius);
      border:1px solid rgba(255,255,255,.08);
      background:
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
        radial-gradient(900px 420px at 10% 0%, rgba(245,59,106,.20), transparent 55%),
        radial-gradient(900px 420px at 90% 20%, rgba(153,71,255,.14), transparent 55%),
        rgba(15,15,20,.65);
      box-shadow: var(--shadowCard);
      overflow:hidden;
      position:relative;

      /* ВАЖНО: убрали насильное растягивание */
      min-height: unset;
      display:block;
    }

    /* overlay like your example */
    .hero:before{
      content:"";
      position:absolute;
      inset:0;
      background: linear-gradient(0deg, rgba(15,15,15,.92) 0%, rgba(15,15,15,.55) 100%);
      opacity:.55;
      pointer-events:none;
    }
    .hero:after{
      content:"";
      position:absolute;
      inset:-2px;
      background: radial-gradient(420px 240px at 15% 20%, rgba(245,59,106,.22), transparent 65%);
      filter: blur(2px);
      pointer-events:none;
    }

    .hero-inner{
      position:relative;
      padding: 36px 26px 26px;
      width: 100%;
      display: flex;
      flex-direction: column;
    }
    /*Надпись ShizCraft в центре посередине */
    .title{
      margin:0;
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(64px, 8vw, 85px);
      letter-spacing: 4px;
      line-height:.9;

      transform: skewX(-8deg);
      display:inline-block;
    }

    .shiz{
      background: linear-gradient(90deg, #ff9ac1, #F53B6A 60%, #b91f55);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;

      text-shadow:
        0 0 1px rgba(245,59,106,.5),
        0 0 4px rgba(245,59,106,.3);
    }

    .craft{
      background: linear-gradient(90deg, #ffffff, #dcdcdc);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;

      text-shadow:
        0 0 1px rgba(255,255,255,.4),
        0 0 4px rgba(255,255,255,.15);
    }

    .logo-text{
      padding: 10px 20px;
      background: rgba(0,0,0,.4);
      border-radius: 6px;
      display: inline-block;
    }

    .title .pink{
      color:var(--pink);
      text-shadow: var(--shadowPink);
    }

    .subtitle{
      margin:12px 0 0;
      color: var(--muted);
      font-size: clamp(16px, 2.1vw, 20px);
      max-width: 48ch;
    }

    .chips{
      margin-top:18px;
      display:flex;
      flex-wrap:wrap;
      gap:10px;
    }
    .chip{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:10px 12px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.08);
      background: rgba(0,0,0,.18);
      color: var(--muted);
      font-size:13px;
    }
    .dot{
      width:8px; height:8px;
      border-radius:99px;
      background: var(--pink);
      box-shadow: var(--shadowPink);
      opacity:.95;
    }

    .cards{
      margin-top:18px;
      display:grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap:12px;
    }

    .subtitle{ max-width: 52ch; }

    .card{
      border-radius: 16px;
      border:1px solid var(--stroke);
      background: var(--card);
      box-shadow: 0 12px 40px rgba(0,0,0,.35);
      padding:14px;
      position:relative;
      overflow:hidden;
      transition:.18s transform, .18s border-color;
    }
    .card:hover{
      transform: translateY(-2px);
      border-color: rgba(245,59,106,.25);
    }
    .card h3{
      margin:0 0 6px;
      font-size:14px;
      letter-spacing:.2px;
    }
    .card p{
      margin:0;
      color: var(--muted2);
      font-size:13px;
      line-height:1.35;
    }
    .cta{
      display:grid;
      grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 в ряд */
      gap:12px;
      margin-top:20px;
    }

    .btn{
      appearance:none;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.04);
      color: var(--text);
      text-decoration:none;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      padding: 13px 16px;
      border-radius: 14px;
      font-weight:800;
      letter-spacing:.2px;
      cursor:pointer;
      transition:.18s transform, .18s background, .18s border-color, .18s box-shadow;
      user-select:none;
      min-width: 170px;
    }

    .cta .btn{
      width: 100%;
      min-width: 0; /* важно для grid */
      justify-content: center;
    }

    @media (max-width: 420px){
      .cta{ grid-template-columns: 1fr; }
    }

    .btn:hover{
      transform: translateY(-1px);
      border-color: rgba(255,255,255,.18);
      background: rgba(255,255,255,.06);
    }
    .btn-primary{
      background: linear-gradient(135deg, rgba(245,59,106,.95), rgba(245,59,106,.65));
      border-color: rgba(245,59,106,.55);
      box-shadow: var(--shadowPink);
    }
    .btn-primary:hover{
      background: linear-gradient(135deg, rgba(255,92,136,.98), rgba(245,59,106,.72));
      border-color: rgba(245,59,106,.75);
      box-shadow: 0 0 22px rgba(245,59,106,.45), 0 0 60px rgba(245,59,106,.22);
    }

    .btn .arrow{
      margin-left:auto;
      opacity:.9;
      font-weight:900;
    }

    /* Right column */
    .side{
      display:flex;
      flex-direction:column;
      gap:12px;
      position: relative;
      top: auto;
    }

    .panel{
      border-radius: var(--radius);
      border:1px solid var(--stroke);
      background: var(--card2);
      backdrop-filter: blur(8px);
      box-shadow: var(--shadowCard);
      padding:16px;
    }

    .panel h2{
      margin:0 0 10px;
      font-size:16px;
      letter-spacing:.2px;
    }

    .conn{
      display:grid;
      gap:10px;
      margin-top:6px;
    }
    .conn-row{
      border:1px dashed rgba(255,255,255,.14);
      background: rgba(0,0,0,.18);
      border-radius: 14px;
      padding:12px;
    }
    .conn-label{
      font-size:12px;
      color: var(--muted2);
      margin-bottom:6px;
    }
    .conn-value{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
    }
    .conn-note{
      border-style: solid;
      border-color: rgba(255,255,255,.08);
      background: rgba(255,255,255,.03);
    }
    .muted{
      color: var(--muted);
      font-weight: 700;
    }
    .ip{
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      font-weight:800;
      letter-spacing:.3px;
      color: var(--text);
      font-size:14px;
    }
    .copy{
      border:1px solid rgba(245,59,106,.35);
      background: rgba(245,59,106,.16);
      color: var(--text);
      padding:10px 12px;
      border-radius: 12px;
      cursor:pointer;
      font-weight:800;
      transition:.18s;
      white-space:nowrap;
    }
    .copy:hover{
      background: rgba(245,59,106,.22);
      border-color: rgba(245,59,106,.55);
      box-shadow: var(--shadowPink);
    }

    .steps{
      display:grid;
      gap:10px;
      margin-top:10px;
    }
    .step{
      border:1px solid rgba(255,255,255,.08);
      background: rgba(0,0,0,.16);
      border-radius: 14px;
      padding:12px;
    }
    .step b{
      color: var(--pink);
      text-shadow: 0 0 14px rgba(245,59,106,.25);
    }
    .step div{
      margin-top:6px;
      color: var(--muted2);
      font-size:13px;
      line-height:1.35;
    }

    footer{
      max-width:1100px;
      margin:0 auto;
      padding: 18px 18px 34px;
      color: var(--muted2);
    }
    .footerline{
      border-top: 3px dashed rgba(255,255,255,.10);
      padding-top:16px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
    }
    .social{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
    }
    .social a{
      width:40px; height:40px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border-radius: 12px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.03);
      color: var(--text);
      text-decoration:none;
      transition:.18s;
      font-weight:900;
    }
    .social a:hover{
      border-color: rgba(245,59,106,.35);
      background: rgba(245,59,106,.10);
      box-shadow: var(--shadowPink);
      transform: translateY(-1px);
    }

    /* Мобильная сетка кнопок: 2 в ряд */
    @media (max-width: 560px){
      .cta{ gap:10px; }
      .btn{
        padding: 11px 12px;
        font-size: 14px;
        min-height: 44px;
      }
      .btn .arrow{ display:none; }
    }

    /* Совсем узкие экраны: по одной в ряд */
    @media (max-width: 360px){
      .btn{ flex: 1 1 100%; }
    }

    .text-link{
      color: var(--pink);
      text-decoration: none;
      font-weight: 800;
    }
    .text-link:hover{
      text-decoration: underline;
    }

    .mini-title{
      font-size: 12px;
      color: var(--muted2);
      font-weight: 800;
      letter-spacing: .2px;
    }

    .mini-list{
      margin: 8px 0 0;
      padding-left: 18px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.35;
    }

    .code-inline{
      display:inline-block;
      margin-top:6px;
      padding:6px 10px;
      border-radius: 10px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(0,0,0,.18);
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      font-weight: 900;
      color: #fff;
    }

    @media (min-width: 900px){
      body:before{ opacity: .08; }
    }

    /* BOT PANEL */
    .bot-panel{ padding: 18px; }

    .bot-head{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:14px;
      margin-bottom:14px;
    }

    .bot-sub{
      margin-top:6px;
      color: var(--muted2);
      font-size: 13px;
      line-height: 1.35;
    }

    .bot-cta{
      white-space: nowrap;
      text-decoration:none;
      font-weight: 900;
      color: #111;
      background: linear-gradient(135deg, #ff7aa2, var(--pink));
      padding: 10px 12px;
      border-radius: 12px;
      box-shadow: var(--shadowPink);
      border: 1px solid rgba(255,255,255,.18);
    }
    .bot-cta:hover{ filter: brightness(1.05); }

    .bot-grid{
      display:grid;
      grid-template-columns: 1fr;
      gap:12px;
    }

    /* На компе делаем 2 колонки внутри блока — сразу “солиднее” */
    @media (min-width: 1100px){
      .bot-grid{ grid-template-columns: 1fr 1fr; }
    }

    .bot-card{
      border: 1px solid rgba(255,255,255,.08);
      background: rgba(0,0,0,.16);
      border-radius: 16px;
      padding: 14px;
    }

    .bot-title{
      font-weight: 900;
      color: #fff;
      margin-bottom: 8px;
    }
    .bot-text{
      color: var(--muted);
      font-size: 13px;
      line-height: 1.35;
    }

    .bot-list, .bot-ol{
      margin: 10px 0 0;
      padding-left: 18px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.35;
    }
    .bot-list li, .bot-ol li{ margin: 4px 0; }

    .bot-mini{
      margin-top: 12px;
      color: var(--muted2);
      font-size: 12px;
    }

    .bot-code{
      display:inline-block;
      padding: 5px 10px;
      border-radius: 10px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(0,0,0,.18);
      color:#fff;
      font-weight: 900;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    }

    .bot-rewards{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:10px;
      margin-top: 10px;
    }
    .reward{
      border:1px solid rgba(255,255,255,.08);
      background: rgba(255,255,255,.03);
      border-radius: 14px;
      padding: 10px 12px;
    }
    .reward-k{
      color: var(--muted2);
      font-size: 12px;
      font-weight: 800;
    }
    .reward-v{
      margin-top: 4px;
      font-weight: 900;
      color: var(--pink);
    }

    /* Мобилка: кнопка вниз, всё в одну колонку */
    @media (max-width: 520px){
      .bot-head{ flex-direction: column; align-items: stretch; }
      .bot-cta{ width: 100%; text-align: center; }
      .bot-rewards{ grid-template-columns: 1fr; }
    }

    /* BOT full width section under both columns */
    .bot-full{
      grid-column: 1 / -1;
    }

    /* чтобы не выглядело "прилипшим" к колонкам */
    .bot-full{
      margin-top: 2px;
    }

    /* на широких экранах внутри бота: левый блок чуть шире */
    @media (min-width: 1100px){
      .bot-grid{ grid-template-columns: 1.15fr .85fr; }
    }

    @media (max-height: 820px){
      .side{ position: relative; top: auto; }
    }

    .live{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      margin-top:6px;
    }

    .pill{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 10px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(0,0,0,.14);
      font-size:12.5px;
      color: var(--muted);
    }

    .dot-live{
      width:9px; height:9px;
      border-radius:999px;
      background: rgba(255,255,255,.25);
      box-shadow: 0 0 10px rgba(255,255,255,.18);
    }

    .live-meta{
      display:flex;
      justify-content:space-between;
      gap:12px;
      margin-top:10px;
      font-size:13px;
      color: var(--muted2);

      flex-wrap: nowrap;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
    .live-meta > div{ white-space: nowrap; }
    .live-meta b{ color:#fff; }

    .live-sub{
      margin-top:10px;
      font-size:12.5px;
      color: var(--muted2);
      line-height:1.35;
    }

    /* состояния */
    .pill.online{
      border-color: rgba(90,255,165,.22);
      background: rgba(90,255,165,.08);
    }
    .pill.online .dot-live{
      background: rgba(90,255,165,.95);
      box-shadow: 0 0 14px rgba(90,255,165,.35);
    }

    .pill.offline{
      border-color: rgba(255,90,120,.25);
      background: rgba(255,90,120,.08);
    }
    .pill.offline .dot-live{
      background: rgba(255,90,120,.95);
      box-shadow: 0 0 14px rgba(255,90,120,.35);
    }

    .record-pill{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:6px 10px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(0,0,0,.14);
      color: var(--muted2);
      font-size: 12.5px;
      white-space: nowrap;
    }
    .record-pill b{ color:#fff; }

    .record-pill.hot{
      border-color: rgba(90,255,165,.22);
      background: rgba(90,255,165,.08);
      color: rgba(90,255,165,.95);
    }
    .record-pill.hot b{
      color: rgba(90,255,165,.95);
    }


    body::after{
      content:"";
      position:fixed;
      inset:0;
      z-index:-1;

      background:
        radial-gradient(1200px 800px at 15% 10%, rgba(245,59,106,.18), transparent 55%),
        radial-gradient(900px 700px at 80% 30%, rgba(153,71,255,.16), transparent 55%),
        radial-gradient(900px 900px at 35% 100%, rgba(245,59,106,.10), transparent 60%),
        linear-gradient(180deg, var(--bg0), var(--bg1));
    }

    /* ---- Servers status block v2 ---- */
    .overall{
      display:flex;
      gap:12px;
      flex-wrap:wrap;
      margin-top:10px;
    }
    .overall-item{
      flex: 1 1 220px;
      border:1px solid rgba(255,255,255,.08);
      background: rgba(0,0,0,.14);
      border-radius: 14px;
      padding:10px 12px;
      color: var(--muted2);
      font-size: 12.5px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
    }
    .overall-item b{ color:#fff; font-size: 14px; }

    .server-grid{
      margin-top:12px;
      display:grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap:10px;
    }
    @media (max-width: 620px){
      .server-grid{ grid-template-columns: 1fr; }
    }

    .server-card{
      border:1px solid rgba(255,255,255,.08);
      background: rgba(0,0,0,.12);
      border-radius: 16px;
      padding: 10px;
    }
    .server-head{ display:flex; justify-content:space-between; align-items:center; gap:10px; }

    .server-meta{
      margin-top:10px;
      display:flex;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
      color: var(--muted2);
      font-size: 13px;
    }
    .server-meta > div{ white-space: nowrap; }