<style>
  *{
    margin:0;
    padding:0;
    box-sizing:border-box;
  }

  html{
    scroll-behavior:smooth;
  }

  body{
    font-family:Arial, Helvetica, sans-serif;
    background:
      radial-gradient(circle at top left, rgba(124,58,237,.18), transparent 32%),
      radial-gradient(circle at top right, rgba(236,72,153,.16), transparent 30%),
      radial-gradient(circle at bottom center, rgba(14,165,233,.12), transparent 35%),
      #070b16;
    color:#e5e7eb;
    line-height:1.75;
    overflow-x:hidden;
  }

  body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:-1;
    background-image:
      radial-gradient(circle, rgba(255,255,255,.18) 1px, transparent 1px),
      radial-gradient(circle, rgba(168,85,247,.18) 1px, transparent 1px);
    background-size:42px 42px, 90px 90px;
    background-position:0 0, 18px 24px;
    opacity:.22;
  }

  a{
    color:inherit;
    text-decoration:none;
  }

  img{
    display:block;
    max-width:100%;
  }

  article img{
  display:block;
  max-width:800px;
  width:100%;
  height:auto;
  margin:30px auto;
  }

  .container{
    width:100%;
    max-width:1050px;
    margin:0 auto;
    padding:0 20px;
  }

  header{
    background:rgba(7,11,22,.82);
    border-bottom:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(14px);
  }

  .nav{
    min-height:100px;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .logo{
    display:flex;
    align-items:center;
    justify-content:center;
    filter:drop-shadow(0 0 18px rgba(168,85,247,.45));
  }

  .logo img{
    width:150px;
    max-width:100%;
    height:auto;
    border-radius:0;
  }

  .hero{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    background:
      linear-gradient(rgba(7,11,22,.62), rgba(7,11,22,.94)),
      url("../images/cover.jpg") center/cover no-repeat;
    overflow:hidden;
  }

  .hero::before{
    content:"";
    position:absolute;
    inset:-30%;
    background:
      radial-gradient(circle at 30% 35%, rgba(139,92,246,.35), transparent 28%),
      radial-gradient(circle at 72% 42%, rgba(236,72,153,.25), transparent 30%),
      radial-gradient(circle at 50% 75%, rgba(14,165,233,.22), transparent 28%);
    filter:blur(20px);
    animation:glowMove 8s ease-in-out infinite alternate;
    pointer-events:none;
  }

  .hero::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:170px;
    background:linear-gradient(to bottom, transparent, #070b16);
    pointer-events:none;
  }

  @keyframes glowMove{
    from{
      transform:translateY(-10px) scale(1);
      opacity:.75;
    }
    to{
      transform:translateY(18px) scale(1.05);
      opacity:1;
    }
  }

  .hero-content{
    position:relative;
    z-index:2;
    max-width:920px;
    padding:90px 20px;
  }

  h1{
    font-size:54px;
    line-height:1.12;
    margin-bottom:22px;
    color:#fff;
    letter-spacing:-1.2px;
    text-shadow:
      0 0 18px rgba(124,58,237,.45),
      0 0 38px rgba(236,72,153,.22);
  }

  h2{
    font-size:34px;
    line-height:1.3;
    margin:54px 0 18px;
    color:#fff;
    letter-spacing:-.4px;
    position:relative;
    padding-left:18px;
  }

  h2::before{
    content:"";
    position:absolute;
    left:0;
    top:.25em;
    width:5px;
    height:1.25em;
    border-radius:99px;
    background:linear-gradient(180deg,#a855f7,#ec4899,#38bdf8);
    box-shadow:0 0 18px rgba(168,85,247,.75);
  }

  h3{
    font-size:22px;
    line-height:1.35;
    margin:30px 0 14px;
    color:#f8fafc;
  }

  p{
    margin-bottom:18px;
    color:#cbd5e1;
  }

  .hero p{
    max-width:760px;
    margin:0 auto 30px;
    color:#e0f2fe;
    font-size:18px;
    text-shadow:0 0 14px rgba(14,165,233,.18);
  }

  .btn-group{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    margin-top:30px;
  }

  .btn-group.center{
    justify-content:center;
  }

  .btn{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:15px 30px;
    border-radius:999px;
    background: linear-gradient(135deg, #3a58ed, #486bec, #0ea5e9);
    color:#fff;
    font-weight:800;
    letter-spacing:.2px;
    border:1px solid rgba(255,255,255,.18);
    cursor:pointer;
    overflow:hidden;
    transition:.28s ease;
    box-shadow:
      0 0 18px rgba(124,58,237,.45),
      0 0 34px rgba(236,72,153,.18),
      inset 0 1px 0 rgba(255,255,255,.24);
  }

  .btn::before{
    content:"";
    position:absolute;
    top:0;
    left:-120%;
    width:80%;
    height:100%;
    background:linear-gradient(
      110deg,
      transparent,
      rgba(255,255,255,.55),
      transparent
    );
    transform:skewX(-22deg);
    transition:.65s ease;
  }

  .btn::after{
    content:"✦";
    position:absolute;
    right:14px;
    top:8px;
    font-size:12px;
    color:#fff;
    opacity:.8;
    text-shadow:0 0 12px rgba(255,255,255,.85);
  }

  .btn:hover{
    transform:translateY(-3px) scale(1.02);
    box-shadow:
      0 0 24px rgba(124,58,237,.7),
      0 0 48px rgba(236,72,153,.35),
      0 0 70px rgba(14,165,233,.2);
  }

  .btn:hover::before{
    left:140%;
  }

  main{
    padding:42px 0 76px;
  }

  article{
    background:
      linear-gradient(180deg, rgba(17,24,39,.94), rgba(7,11,22,.96));
    padding:10px 44px;
    border-radius:28px;
    border:1px solid rgba(255,255,255,.09);
    box-shadow:
      0 24px 80px rgba(0,0,0,.35),
      0 0 0 1px rgba(168,85,247,.06),
      inset 0 1px 0 rgba(255,255,255,.05);
    position:relative;
    overflow:hidden;
  }

  article::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
      radial-gradient(circle at top left, rgba(124,58,237,.14), transparent 28%),
      radial-gradient(circle at bottom right, rgba(14,165,233,.1), transparent 30%);
  }

  article > *{
    position:relative;
    z-index:1;
  }

  .article-image{
    width:800px;
    max-width:100%;
    margin:0 auto 36px;
  }

  .article-image img{
    width:100%;
    height:auto;
    border-radius:24px;
    border:1px solid rgba(255,255,255,.12);
    box-shadow:
      0 20px 55px rgba(0,0,0,.38),
      0 0 32px rgba(124,58,237,.18);
    object-fit:cover;
  }

  blockquote{
    margin:30px 0;
    padding:26px;
    border-left:4px solid #a855f7;
    background:
      linear-gradient(135deg, rgba(124,58,237,.16), rgba(14,165,233,.08));
    border-radius:18px;
    color:#f1f5f9;
    font-size:18px;
    box-shadow:
      0 0 22px rgba(124,58,237,.12),
      inset 0 1px 0 rgba(255,255,255,.08);
  }

  ul{
    padding-left:22px;
    margin:0 0 24px;
  }

  li{
    margin-bottom:10px;
    color:#cbd5e1;
  }

  li::marker{
    color:#a855f7;
  }

  table{
    width:100%;
    border-collapse:collapse;
    margin:28px 0;
    overflow:hidden;
    border-radius:18px;
    background:rgba(11,18,32,.82);
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 0 28px rgba(14,165,233,.08);
  }

  th{
    background:
      linear-gradient(135deg, rgba(124,58,237,.32), rgba(14,165,233,.18));
    color:#fff;
    text-align:left;
    padding:16px;
    font-size:15px;
  }

  td{
    padding:16px;
    border-top:1px solid rgba(255,255,255,.07);
    color:#cbd5e1;
    vertical-align:top;
  }

  tr:hover td{
    background:rgba(255,255,255,.035);
  }

  footer{
    padding:36px 0;
    border-top:1px solid rgba(255,255,255,.08);
    text-align:center;
    color:#94a3b8;
    font-size:14px;
    background:
      radial-gradient(circle at top center, rgba(124,58,237,.18), transparent 35%),
      #060914;
  }

  @media(max-width:900px){
    h1{
      font-size:40px;
    }

    h2{
      font-size:29px;
    }

    article{
      padding:32px;
    }

    .hero{
      min-height:540px;
    }
  }

  @media(max-width:600px){
    .nav{
      min-height:72px;
    }

    .logo img{
      width:130px;
    }

    .hero{
      min-height:510px;
    }

    .hero-content{
      padding:72px 18px;
    }

    h1{
      font-size:32px;
      letter-spacing:-.6px;
    }

    h2{
      font-size:25px;
    }

    h3{
      font-size:20px;
    }

    .hero p{
      font-size:16px;
    }

    article{
      padding:24px;
      border-radius:20px;
    }

    table{
      display:block;
      overflow-x:auto;
      white-space:nowrap;
    }
  }