:root{
      --font: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      --bg-0: #070a12;
      --bg-1: #0b1020;
      --card: rgba(255,255,255,.06);
      --card-2: rgba(255,255,255,.08);
      --stroke: rgba(255,255,255,.12);

      --txt: rgba(255,255,255,.92);
      --muted: rgba(255,255,255,.65);

      --accent: #27d6ff;
      --accent-2: #2a7cff;
      --hot: #ff3d6e;
      --good: #34d399;

      --radius: 18px;
      --radius-sm: 14px;

      --shadow: 0 18px 50px rgba(0,0,0,.45);
      --shadow-soft: 0 10px 25px rgba(0,0,0,.28);
    }

    *{ font-family: var(--font); }
    html{ scroll-behavior: smooth; }
    body{
      background: radial-gradient(1200px 600px at 70% 0%, rgba(39,214,255,.15), transparent 60%),
                  radial-gradient(900px 500px at 10% 30%, rgba(42,124,255,.14), transparent 55%),
                  linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 60%, #070912 100%);
      color: var(--txt);
	  font-family: Roboto !important;
    }

    .nav-blur{
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      background: rgba(7,10,18,.55);
      border-bottom: 1px solid rgba(255,255,255,.08);
    }
    .brand-mark{
      width: 38px; height: 38px;
      border-radius: 12px;
      position: relative;
      background:
        radial-gradient(10px 10px at 30% 35%, rgba(255,255,255,.85), rgba(255,255,255,0) 55%),
        linear-gradient(135deg, rgba(39,214,255,.9), rgba(42,124,255,.9));
      box-shadow: 0 10px 22px rgba(39,214,255,.18);
      overflow: hidden;
    }
    .brand-mark:after{
      content:"";
      position:absolute; inset:-60% -60%;
      background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.35), transparent 65%);
      transform: rotate(20deg);
      animation: shine 4.6s linear infinite;
    }
    @keyframes shine{
      0%{ transform: translateX(-30%) rotate(20deg); opacity:.0; }
      10%{ opacity:.9; }
      50%{ opacity:.0; }
      100%{ transform: translateX(30%) rotate(20deg); opacity:.0; }
    }
    .brand-name{
      letter-spacing: .2px;
      font-weight: 800;
      line-height: 1.05;
    }
    .brand-sub{
      font-size: .78rem;
      color: var(--muted);
      margin-top: -2px;
    }

    .btn-icon{
      display:inline-flex; align-items:center; gap:.5rem;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.06);
      color: var(--txt);
      padding: .55rem .8rem;
      border-radius: 999px;
    }
    .btn-icon:hover{ border-color: rgba(39,214,255,.45); background: rgba(39,214,255,.10); }
    .btn-cta{
      border: 1px solid rgba(255,61,110,.28);
      background: linear-gradient(135deg, rgba(255,61,110,.92), rgba(255,61,110,.62));
      color: #fff;
      box-shadow: 0 14px 28px rgba(255,61,110,.14);
    }
    .btn-cta:hover{ filter: brightness(1.05); }

    .nav-link{
      color: rgba(255,255,255,.78) !important;
      border-radius: 999px;
      padding: .5rem .85rem !important;
    }
    .nav-link:hover{
      color: #fff !important;
      background: rgba(255,255,255,.06);
    }
    .nav-link.active{
      color: #fff !important;
      background: rgba(39,214,255,.10);
      border: 1px solid rgba(39,214,255,.18);
    }

    .hero{
      position: relative;
      min-height: 78vh;
      display: flex;
      align-items: center;
      overflow: hidden;
      border-bottom: 1px solid rgba(255,255,255,.08);
    }
    .hero-bg{
      position:absolute; inset:0;
      background:
        linear-gradient(90deg, rgba(7,10,18,.92) 0%, rgba(7,10,18,.70) 45%, rgba(7,10,18,.35) 75%, rgba(7,10,18,.20) 100%),
        radial-gradient(1200px 700px at 70% 10%, rgba(39,214,255,.22), transparent 60%),
        url("../images/hero-car.jpg") center/cover no-repeat; 
      filter: saturate(1.05);
      transform: scale(1.02);
    }
    .hero:before{
      content:"";
      position:absolute; inset:0;
      background:
        radial-gradient(700px 420px at 20% 50%, rgba(42,124,255,.16), transparent 60%),
        radial-gradient(900px 520px at 70% 30%, rgba(39,214,255,.10), transparent 60%);
      pointer-events:none;
    }
    .hero-grid{
      position:absolute; inset:0;
      background-image:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
      background-size: 52px 52px;
      mask-image: radial-gradient(closest-side at 55% 30%, rgba(0,0,0,.9), transparent 70%);
      opacity:.35;
      pointer-events:none;
    }
    .hero-content{
      position:relative;
      z-index: 2;
      padding-top: 92px;
      padding-bottom: 54px;
    }
    .hero-kicker{
      display:inline-flex; align-items:center; gap:.55rem;
      padding: .4rem .75rem;
      border: 1px solid rgba(39,214,255,.22);
      background: rgba(39,214,255,.08);
      color: rgba(255,255,255,.90);
      border-radius: 999px;
      font-weight: 600;
      font-size: .9rem;
    }
    .hero-title{
      font-weight: 900;
      letter-spacing: -0.02em;
      font-size: clamp(2rem, 4.2vw, 3.55rem);
      line-height: 1.05;
      margin: 14px 0 12px;
    }
    .hero-title .glow{
      background: linear-gradient(90deg, #ffffff, rgba(39,214,255,.95));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      text-shadow: 0 0 18px rgba(39,214,255,.10);
    }
    .hero-lead{
      color: var(--muted);
      font-size: 1.05rem;
      max-width: 58ch;
    }
    .stat-card{
      border-radius: var(--radius);
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.06);
      box-shadow: 0 18px 40px rgba(0,0,0,.22);
      overflow:hidden;
      position:relative;
    }
    .stat-card:before{
      content:"";
      position:absolute; inset:0;
      background: radial-gradient(900px 300px at 30% -10%, rgba(39,214,255,.18), transparent 60%),
                  radial-gradient(700px 260px at 85% 0%, rgba(255,61,110,.12), transparent 55%);
      pointer-events:none;
    }
    .stat-value{
      font-weight: 900;
      font-size: 1.6rem;
      letter-spacing: -0.02em;
    }
    .stat-label{ color: var(--muted); font-size: .92rem; }

    section{ padding: 84px 0; }
    .section-title{
      font-weight: 900;
      letter-spacing: -0.02em;
      font-size: clamp(1.6rem, 2.6vw, 2.2rem);
      margin-bottom: 10px;
    }
    .section-sub{
      color: var(--muted);
      max-width: 70ch;
      margin-bottom: 26px;
    }
    .soft-card{
      border-radius: var(--radius);
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.06);
      box-shadow: var(--shadow-soft);
    }
    .soft-card:hover{
      border-color: rgba(39,214,255,.22);
      transform: translateY(-2px);
      transition: transform .2s ease, border-color .2s ease, background .2s ease;
      background: rgba(255,255,255,.07);
    }
    .service-icon{
      width: 44px; height: 44px;
      border-radius: 14px;
      display:grid; place-items:center;
      background: rgba(39,214,255,.12);
      border: 1px solid rgba(39,214,255,.22);
      color: rgba(255,255,255,.95);
      box-shadow: 0 12px 22px rgba(39,214,255,.10);
      flex: 0 0 auto;
    }
    .badge-price{
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.06);
      color: rgba(255,255,255,.86);
      border-radius: 999px;
      padding: .3rem .65rem;
      font-weight: 600;
      font-size: .82rem;
	  width: 22%;
    }

    .about-media{
      border-radius: var(--radius);
      border: 1px solid rgba(255,255,255,.10);
      overflow:hidden;
      background:
        radial-gradient(700px 380px at 30% 20%, rgba(39,214,255,.22), transparent 60%),
        rgba(255,255,255,.04);
      box-shadow: var(--shadow);
      position:relative;
      min-height: 320px;
    }
    .about-media img{
      width:100%;
      height:100%;
      object-fit: cover;
      opacity:.92;
    }
    .about-media .overlay{
      position:absolute; inset:0;
      background: linear-gradient(180deg, rgba(7,10,18,.10), rgba(7,10,18,.58));
    }
    .tick{
      display:flex; gap:.6rem; align-items:flex-start;
      margin: .55rem 0;
      color: rgba(255,255,255,.85);
    }
    .tick i{ color: var(--good); margin-top:.1rem; }


    .rating-pill{
      display:inline-flex; align-items:center; gap:.55rem;
      padding: .42rem .75rem;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.06);
      color: rgba(255,255,255,.90);
      font-weight: 600;
    }
    .stars i{ color: #ffd166; }
    .avatar{
      width: 44px; height: 44px;
      border-radius: 14px;
      display:grid; place-items:center;
      background: linear-gradient(135deg, rgba(39,214,255,.22), rgba(42,124,255,.20));
      border: 1px solid rgba(255,255,255,.10);
      font-weight: 800;
      color: rgba(255,255,255,.92);
    }


    .accordion-button{
      background: rgba(255,255,255,.06) !important;
      color: rgba(255,255,255,.92) !important;
      border-radius: 16px !important;
    }
    .accordion-item{
      background: transparent;
      border: 0;
      margin-bottom: 12px;
    }
    .accordion-collapse{
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.10);
      border-top: 0;
      border-radius: 0 0 16px 16px;
      overflow:hidden;
    }
    .accordion-button:not(.collapsed){
      border: 1px solid rgba(39,214,255,.22);
      box-shadow: 0 14px 26px rgba(39,214,255,.08);
    }

    .contact-card{
      border-radius: var(--radius);
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.06);
      box-shadow: var(--shadow);
      overflow:hidden;
      position:relative;
    }
    .contact-card:before{
      content:"";
      position:absolute; inset:0;
      background: radial-gradient(700px 320px at 20% 20%, rgba(39,214,255,.18), transparent 60%),
                  radial-gradient(800px 360px at 80% 10%, rgba(255,61,110,.12), transparent 60%);
      pointer-events:none;
    }
    .map-wrap{
      border-radius: var(--radius);
      overflow:hidden;
      border: 1px solid rgba(255,255,255,.10);
      box-shadow: var(--shadow);
      min-height: 560px;
      background: rgba(255,255,255,.04);
	  height: 560px;
    }
    .map-wrap iframe{ width:100%; height:100%; border:0; filter: saturate(1.05) contrast(1.05); }

    .story-card{
      border-radius: var(--radius);
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.06);
      overflow:hidden;
      box-shadow: var(--shadow-soft);
      height:100%;
    }
    .story-thumb{
      position:relative;
      height: 190px;
      background:
        linear-gradient(135deg, rgba(39,214,255,.22), rgba(42,124,255,.16)),
        rgba(255,255,255,.03);
      border-bottom: 1px solid rgba(255,255,255,.10);
      overflow:hidden;
    }
    .story-thumb img{
      width:100%; height:100%; object-fit: cover;
      opacity:.92;
    }
    .story-thumb .caption{
      position:absolute; inset:auto 14px 14px 14px;
      padding: .55rem .75rem;
      border-radius: 14px;
      background: rgba(7,10,18,.55);
      border: 1px solid rgba(255,255,255,.12);
      backdrop-filter: blur(10px);
    }
    .story-meta{
      display:flex; align-items:center; justify-content:space-between;
      color: var(--muted);
      font-size: .9rem;
    }

    footer{
      border-top: 1px solid rgba(255,255,255,.08);
      padding: 34px 0;
      color: rgba(255,255,255,.70);
    }

    .to-top{
      position: fixed;
      right: 18px;
      bottom: 18px;
      z-index: 1050;
      width: 44px; height: 44px;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.06);
      color: rgba(255,255,255,.90);
      display:none;
      place-items:center;
      backdrop-filter: blur(12px);
      box-shadow: 0 16px 34px rgba(0,0,0,.38);
    }
    .to-top:hover{ border-color: rgba(39,214,255,.35); background: rgba(39,214,255,.10); }

    .pulse{
      animation: pulseGlow 1.2s ease-in-out 1;
    }
    @keyframes pulseGlow{
      0%{ box-shadow: 0 0 0 rgba(39,214,255,0); }
      40%{ box-shadow: 0 0 0 10px rgba(39,214,255,.08); }
      70%{ box-shadow: 0 0 0 18px rgba(39,214,255,.05); }
      100%{ box-shadow: 0 0 0 rgba(39,214,255,0); }
    }

    .divider{
      height:1px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
      margin: 22px 0;
    }
    .link-muted{ color: rgba(255,255,255,.70); text-decoration:none; }
    .link-muted:hover{ color:#fff; }
	
/* Main content */
    main{
      flex: 1;
      padding-top: 90px;
      padding-bottom: 60px;
    }

    /* Article header */
    .article-header{
      position: relative;
      padding: 60px 0 40px;
      margin-bottom: 40px;
    }
    .article-header:before{
      content:"";
      position:absolute; inset:0;
      background:
        radial-gradient(900px 400px at 70% 0%, rgba(39,214,255,.08), transparent 60%),
        radial-gradient(700px 300px at 20% 30%, rgba(42,124,255,.06), transparent 55%);
      pointer-events:none;
    }
    .back-link{
      display:inline-flex; align-items:center; gap:.5rem;
      color: var(--accent);
      text-decoration:none;
      font-weight: 500;
      margin-bottom: 20px;
    }
    .back-link:hover{
      color: #fff;
    }
    .article-title{
      font-weight: 900;
      letter-spacing: -0.02em;
      font-size: clamp(1.8rem, 3.5vw, 2.8rem);
      line-height: 1.1;
      margin-bottom: 16px;
    }
    .article-meta{
      display:flex; flex-wrap:wrap; gap: 20px;
      color: var(--muted);
      font-size: .95rem;
      margin-bottom: 20px;
    }
    .article-badge{
      display:inline-block;
      padding: .3rem .75rem;
      border-radius: 999px;
      font-size: .85rem;
      font-weight: 600;
    }
    .badge-tech{ background: rgba(39,214,255,.15); border: 1px solid rgba(39,214,255,.25); color: #a6e9ff; }
    
    /* Article content */
    .article-hero{
      border-radius: var(--radius);
      overflow:hidden;
      margin-bottom: 40px;
      border: 1px solid rgba(255,255,255,.1);
      box-shadow: var(--shadow);
    }
    .article-hero img{
      width:100%; height:auto;
      display:block;
    }
    
    .article-content{
      max-width: 800px;
      margin: 0 auto 60px;
    }
    .article-content p{
      font-size: 1.05rem;
      line-height: 1.7;
      margin-bottom: 1.5rem;
      color: rgba(255,255,255,.85);
    }
    .article-content h2{
      font-weight: 800;
      font-size: 1.8rem;
      margin: 2.5rem 0 1rem;
      color: #fff;
    }
    .article-content h3{
      font-weight: 700;
      font-size: 1.4rem;
      margin: 2rem 0 1rem;
      color: #fff;
    }
    .article-content ul, .article-content ol{
      margin-bottom: 1.5rem;
      padding-left: 1.5rem;
    }
    .article-content li{
      margin-bottom: .5rem;
      color: rgba(255,255,255,.85);
    }
    .article-content blockquote{
      border-left: 3px solid var(--accent);
      padding-left: 1.5rem;
      margin: 2rem 0;
      font-style: italic;
      color: rgba(255,255,255,.75);
    }
    .article-content img{
      border-radius: var(--radius-sm);
      margin: 2rem 0;
      border: 1px solid rgba(255,255,255,.1);
      max-width: 100%;
      height: auto;
    }
    
    /* Info box */
    .info-box{
      border-radius: var(--radius);
      border: 1px solid rgba(39,214,255,.25);
      background: rgba(39,214,255,.08);
      padding: 24px;
      margin: 2rem 0;
    }
    .info-box-title{
      display:flex; align-items:center; gap:.5rem;
      font-weight: 700;
      font-size: 1.1rem;
      margin-bottom: 12px;
      color: #a6e9ff;
    }
    
    /* Author card */
    .author-card{
      border-radius: var(--radius);
      border: 1px solid rgba(255,255,255,.1);
      background: rgba(255,255,255,.06);
      padding: 24px;
      display:flex; gap: 20px;
      align-items:center;
      margin: 3rem 0;
    }
    .author-avatar-large{
      width: 80px; height: 80px;
      border-radius: 16px;
      display:grid; place-items:center;
      background: linear-gradient(135deg, rgba(39,214,255,.22), rgba(42,124,255,.20));
      border: 1px solid rgba(255,255,255,.10);
      font-weight: 800;
      font-size: 1.5rem;
      color: rgba(255,255,255,.92);
      flex-shrink:0;
    }
    .author-info h4{
      font-weight: 700;
      font-size: 1.2rem;
      margin-bottom: 5px;
    }
    .author-info p{
      color: var(--muted);
      font-size: .95rem;
      margin-bottom: 0;
    }
    
    /* Share buttons */
    .share-section{
      margin: 3rem 0;
      padding-top: 2rem;
      border-top: 1px solid rgba(255,255,255,.1);
    }
    .share-title{
      font-weight: 600;
      margin-bottom: 15px;
    }
    .share-buttons{
      display:flex; gap: 10px;
      flex-wrap:wrap;
    }
    .share-btn{
      display:inline-flex; align-items:center; gap:.5rem;
      padding: .5rem 1rem;
      border-radius: 999px;
      text-decoration:none;
      font-weight: 500;
      font-size: .9rem;
    }
    .share-fb{ background: rgba(59,89,152,.15); border: 1px solid rgba(59,89,152,.3); color: #8ba3d9; }
    .share-tw{ background: rgba(29,161,242,.15); border: 1px solid rgba(29,161,242,.3); color: #85d4ff; }
    .share-tg{ background: rgba(0,136,204,.15); border: 1px solid rgba(0,136,204,.3); color: #80d4ff; }
    .share-vk{ background: rgba(76,117,163,.15); border: 1px solid rgba(76,117,163,.3); color: #9bbde3; }
    .share-btn:hover{
      filter: brightness(1.2);
      color: #fff;
    }
    
    /* Related articles */
    .related-section{
      margin-top: 60px;
    }
    .section-title{
      font-weight: 900;
      letter-spacing: -0.02em;
      font-size: clamp(1.6rem, 2.6vw, 2.2rem);
      margin-bottom: 10px;
    }
    .section-sub{
      color: var(--muted);
      max-width: 70ch;
      margin-bottom: 26px;
    }
    .news-card{
      border-radius: var(--radius);
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.06);
      overflow:hidden;
      box-shadow: var(--shadow-soft);
      height:100%;
      transition: transform .3s ease, border-color .3s ease;
    }
    .news-card:hover{
      border-color: rgba(39,214,255,.22);
      transform: translateY(-5px);
    }
    .news-thumb{
      position:relative;
      height: 180px;
      background:
        linear-gradient(135deg, rgba(39,214,255,.22), rgba(42,124,255,.16)),
        rgba(255,255,255,.03);
      border-bottom: 1px solid rgba(255,255,255,.10);
      overflow:hidden;
    }
    .news-thumb img{
      width:100%; height:100%; object-fit: cover;
      transition: transform .5s ease;
    }
    .news-card:hover .news-thumb img{
      transform: scale(1.05);
    }
    .news-content{
      padding: 20px;
    }
    .news-title{
      font-weight: 700;
      font-size: 1.1rem;
      line-height: 1.3;
      margin-bottom: 10px;
    }
    .news-date{
      font-size: .85rem;
      color: var(--muted);
    }
    
    /* Footer */
    footer{
      border-top: 1px solid rgba(255,255,255,.08);
      padding: 34px 0;
      color: rgba(255,255,255,.70);
    }
    
    /* Floating button */
    .to-top{
      position: fixed;
      right: 18px;
      bottom: 18px;
      z-index: 1050;
      width: 44px; height: 44px;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.06);
      color: rgba(255,255,255,.90);
      display:none;
      place-items:center;
      backdrop-filter: blur(12px);
      box-shadow: 0 16px 34px rgba(0,0,0,.38);
    }
    .to-top:hover{ border-color: rgba(39,214,255,.35); background: rgba(39,214,255,.10); }
    
    /* Divider */
    .divider{
      height:1px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
      margin: 22px 0;
    }
    .link-muted{ color: rgba(255,255,255,.70); text-decoration:none; }
    .link-muted:hover{ color:#fff; }
	
	/* Main content */
    main{
      flex: 1;
      padding-top: 90px;
      padding-bottom: 60px;
    }

    .page-header{
      position: relative;
      padding: 80px 0 40px;
      border-bottom: 1px solid rgba(255,255,255,.08);
      margin-bottom: 40px;
    }
    .page-header:before{
      content:"";
      position:absolute; inset:0;
      background:
        radial-gradient(900px 400px at 70% 0%, rgba(39,214,255,.12), transparent 60%),
        radial-gradient(700px 300px at 20% 30%, rgba(42,124,255,.10), transparent 55%);
      pointer-events:none;
    }
    .page-title{
      font-weight: 900;
      letter-spacing: -0.02em;
      font-size: clamp(2rem, 4vw, 3.2rem);
      line-height: 1.05;
      margin-bottom: 12px;
    }
    .page-title .glow{
      background: linear-gradient(90deg, #ffffff, rgba(39,214,255,.95));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      text-shadow: 0 0 18px rgba(39,214,255,.10);
    }
    .page-subtitle{
      color: var(--muted);
      font-size: 1.05rem;
      max-width: 70ch;
    }

    /* News grid */
    .news-card{
      border-radius: var(--radius);
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.06);
      overflow:hidden;
      box-shadow: var(--shadow-soft);
      height:100%;
      transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
    }
    .news-card:hover{
      border-color: rgba(39,214,255,.22);
      transform: translateY(-5px);
      box-shadow: 0 25px 50px rgba(0,0,0,.35);
    }
    .news-thumb{
      position:relative;
      height: 220px;
      background:
        linear-gradient(135deg, rgba(39,214,255,.22), rgba(42,124,255,.16)),
        rgba(255,255,255,.03);
      border-bottom: 1px solid rgba(255,255,255,.10);
      overflow:hidden;
    }
    .news-thumb img{
      width:100%; height:100%; object-fit: cover;
      transition: transform .5s ease;
      opacity:.92;
    }
    .news-card:hover .news-thumb img{
      transform: scale(1.05);
    }
    .news-badge{
      position:absolute; top: 16px; left: 16px;
      padding: .3rem .75rem;
      border-radius: 999px;
      font-size: .8rem;
      font-weight: 600;
      backdrop-filter: blur(10px);
      z-index: 2;
    }
    .badge-tips{ background: rgba(39,214,255,.15); border: 1px solid rgba(39,214,255,.25); color: #a6e9ff; }
    .badge-update{ background: rgba(255,61,110,.15); border: 1px solid rgba(255,61,110,.25); color: #ffb8c9; }
    .badge-tech{ background: rgba(52,211,153,.15); border: 1px solid rgba(52,211,153,.25); color: #a7f3d0; }
    .badge-service{ background: rgba(255,209,102,.15); border: 1px solid rgba(255,209,102,.25); color: #fff4d6; }

    .news-content{
      padding: 24px;
    }
    .news-title{
      font-weight: 800;
      font-size: 1.3rem;
      line-height: 1.3;
      margin-bottom: 10px;
    }
    .news-excerpt{
      color: var(--muted);
      font-size: .95rem;
      line-height: 1.5;
      margin-bottom: 20px;
    }
    .news-meta{
      display:flex; align-items:center; justify-content:space-between;
      color: var(--muted);
      font-size: .85rem;
      padding-top: 16px;
      border-top: 1px solid rgba(255,255,255,.08);
    }
    .news-author{
      display:flex; align-items:center; gap:.5rem;
    }
    .author-avatar{
      width: 32px; height: 32px;
      border-radius: 10px;
      display:grid; place-items:center;
      background: linear-gradient(135deg, rgba(39,214,255,.22), rgba(42,124,255,.20));
      border: 1px solid rgba(255,255,255,.10);
      font-weight: 700;
      font-size: .9rem;
      color: rgba(255,255,255,.92);
    }
    .news-date{
      display:flex; align-items:center; gap:.3rem;
    }

    /* Pagination */
    .pagination-custom .page-link{
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.12);
      color: var(--txt);
      margin: 0 4px;
      border-radius: 12px !important;
      min-width: 44px;
      text-align: center;
    }
    .pagination-custom .page-link:hover{
      background: rgba(39,214,255,.10);
      border-color: rgba(39,214,255,.25);
    }
    .pagination-custom .page-item.active .page-link{
      background: rgba(39,214,255,.15);
      border-color: rgba(39,214,255,.3);
      color: #fff;
      font-weight: 600;
    }
    .pagination-custom .page-item.disabled .page-link{
      background: rgba(255,255,255,.03);
      border-color: rgba(255,255,255,.06);
      color: var(--muted);
    }

    /* Sidebar */
    .sidebar-card{
      border-radius: var(--radius);
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.06);
      padding: 24px;
      margin-bottom: 24px;
    }
    .sidebar-title{
      font-weight: 700;
      font-size: 1.1rem;
      margin-bottom: 18px;
      padding-bottom: 12px;
      border-bottom: 1px solid rgba(255,255,255,.1);
    }
    .tag-cloud{
      display:flex; flex-wrap:wrap; gap: 8px;
    }
    .tag{
      padding: .35rem .75rem;
      border-radius: 999px;
      font-size: .85rem;
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.12);
      color: var(--muted);
      text-decoration: none;
      transition: all .2s ease;
    }
    .tag:hover{
      background: rgba(39,214,255,.10);
      border-color: rgba(39,214,255,.25);
      color: #fff;
    }
    .recent-post{
      display:flex; gap: 12px;
      padding: 12px 0;
      border-bottom: 1px solid rgba(255,255,255,.08);
    }
    .recent-post:last-child{
      border-bottom: none;
    }
    .recent-post-thumb{
      width: 70px; height: 70px;
      border-radius: 10px;
      overflow:hidden;
      flex-shrink:0;
    }
    .recent-post-thumb img{
      width:100%; height:100%; object-fit:cover;
    }
    .recent-post-title{
      font-weight: 600;
      font-size: .9rem;
      line-height: 1.3;
      margin-bottom: 4px;
    }
    .recent-post-date{
      font-size: .8rem;
      color: var(--muted);
    }

    /* Newsletter */
    .newsletter-card{
      border-radius: var(--radius);
      border: 1px solid rgba(39,214,255,.25);
      background: rgba(39,214,255,.08);
      padding: 28px;
      text-align: center;
    }
    .newsletter-icon{
      width: 60px; height: 60px;
      border-radius: 16px;
      display:grid; place-items:center;
      background: rgba(39,214,255,.15);
      border: 1px solid rgba(39,214,255,.3);
      color: rgba(255,255,255,.95);
      box-shadow: 0 12px 22px rgba(39,214,255,.10);
      margin: 0 auto 20px;
    }
    .newsletter-title{
      font-weight: 700;
      font-size: 1.2rem;
      margin-bottom: 10px;
    }
    .newsletter-text{
      color: var(--muted);
      font-size: .95rem;
      margin-bottom: 20px;
    }

    /* Footer */
    footer{
      border-top: 1px solid rgba(255,255,255,.08);
      padding: 34px 0;
      color: rgba(255,255,255,.70);
    }

    /* Floating button */
    .to-top{
      position: fixed;
      right: 18px;
      bottom: 18px;
      z-index: 1050;
      width: 44px; height: 44px;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.06);
      color: rgba(255,255,255,.90);
      display:none;
      place-items:center;
      backdrop-filter: blur(12px);
      box-shadow: 0 16px 34px rgba(0,0,0,.38);
    }
    .to-top:hover{ border-color: rgba(39,214,255,.35); background: rgba(39,214,255,.10); }

    /* Divider */
    .divider{
      height:1px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
      margin: 22px 0;
    }
    .link-muted{ color: rgba(255,255,255,.70); text-decoration:none; }
    .link-muted:hover{ color:#fff; }
    
    /* Back button */
    .back-link{
      display:inline-flex; align-items:center; gap:.5rem;
      color: var(--accent);
      text-decoration:none;
      font-weight: 500;
      margin-bottom: 20px;
    }
    .back-link:hover{
      color: #fff;
    }
    
    /* Empty state */
    .empty-state{
      text-align: center;
      padding: 60px 20px;
    }
    .empty-icon{
      width: 100px; height: 100px;
      border-radius: 24px;
      display:grid; place-items:center;
      background: rgba(39,214,255,.08);
      border: 1px solid rgba(39,214,255,.2);
      color: var(--accent);
      margin: 0 auto 24px;
      font-size: 2.5rem;
    }