:root{
    --bg:#161616;
    --glass: rgba(255,255,255,0.05);
    --glass-2: rgba(255,255,255,0.02);
    --accent: #00ffff;
    --text: #fff;
  }

  html,body{
    height:100%;
    margin:0;
    background:
      var(--bg);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    color:var(--text);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
  }

  .wrap {
    min-height:85%;
    display:flex;
    flex-direction: column;
    align-items:center;
    justify-content:center;
    padding:48px;
    position:relative;
    overflow:hidden;
    z-index: 2;
  }

  .logo {
    position: absolute;
    top: 0px;
  }

  .logo span {
    font-size: 1.5em;
  }

  .logo-img {
    width: 60px;
    height: 60px;
  }

  .hero {
    position: relative;
    height: 100vh;
    background: 
    linear-gradient(180deg, #131313bf, #161616 93.94%), 
    url('/assets/images/hero-bg.png') bottom/cover no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    backdrop-filter: blur(2px);
}

  /* floating decorative panels (subtle) */
  .float-deco {
    position:absolute;
    width:220px;
    height:80px;
    background:var(--glass);
    backdrop-filter: blur(8px);
    border-radius:12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.45), inset 0 0 10px rgba(255,255,255,0.03);
    transform: rotate(-18deg);
    top:8%;
    left:6%;
    animation: floatA 14s ease-in-out infinite;
    opacity:.9;
    pointer-events:none;
  }
  .float-deco.right{
    left:auto;
    right:6%;
    top:62%;
    transform: rotate(12deg);
    width:180px;
    height:70px;
    animation-duration:18s;
  }
  @keyframes floatA {
    0% { transform: translateY(0) rotate(-18deg); }
    50% { transform: translateY(16px) rotate(-16deg); }
    100% { transform: translateY(0) rotate(-18deg); }
  }

  .card {
    width:100%;
    max-width:980px;
    border-radius: 15px;
    padding: 25px 30px;
    display:grid;
    grid-template-columns: 1fr 320px;
    gap:28px;
    align-items:center;
    background: linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
    backdrop-filter: blur(5px); /* frosted glass effect */
    box-shadow: 0 8px 20px rgba(0,0,0,0.3), inset 0 0 10px rgba(255,255,255,0.05);
  }

  /* Responsive stack */
  @media (max-width:820px){
    .card { grid-template-columns: 1fr; padding:28px; }
  }

  .left {
    padding-right:8px;
  }

  h1 {
    margin:0 0 8px 0;
    font-size:2.25rem;
    letter-spacing:-0.02em;
    color:var(--text);
  }
  p.lead {
    margin:0 0 22px 0;
    color:rgba(238,242,246,0.9);
    line-height:1.45;
  }

  .actions {
    display:flex;
    gap:12px;
    align-items:center;
    flex-wrap:wrap;
  }

  .btn-primary {
    background: linear-gradient(145deg, #00ffff, #00e5e5);
    border: none;
    padding: 15px 40px;
    border-radius: 30px;
    font-weight:600;
    color:#000;
    cursor:pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    gap:10px;
  }
  .btn-primary:hover{
    transform: translateY(-3px);
  }

  .btn-ghost {
    background: linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
    border: none;
    color:var(--text);
    padding: 12px 30px;
    border-radius: 25px;
    cursor:pointer;
    text-decoration:none;
    font-size: 0.9em;
    font-weight: 600;
    backdrop-filter: blur(5px); /* frosted glass effect */
    box-shadow: 0 8px 20px rgba(0,0,0,0.3), inset 0 0 10px rgba(255,255,255,0.05);
    transition: transform 0.3s, box-shadow 0.3s, background 0.3s;
  }

  .btn-ghost:hover {
    transform: translateY(0px); /* subtle lift */
    box-shadow: 0 12px 25px rgba(0,0,0,0.4), inset 0 0 15px rgba(255,255,255,0.08);
    background: linear-gradient(145deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
  }

  /* right column: bug area */
  .bug-panel {
    display:flex;
    align-items:center;
    justify-content:center;
    padding:12px;
  }

  /* SVG sizing */
  .bug {
    width:180px;
    height:auto;
    display:block;
    filter: drop-shadow(0 10px 18px rgba(0,0,0,0.5));
  }

  /* bug animations */
  .bug-wrap {
    display:inline-block;
    transform-origin:center;
    animation: bug-bob 3.6s ease-in-out infinite;
  }
  @keyframes bug-bob {
    0% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(-2deg); }
    100% { transform: translateY(0) rotate(0deg); }
  }

  /* wings flapping inside SVG use SVG animations (SMIL) or CSS on classes */
  .wing {
    transform-origin: 30% 40%;
    animation: flap 0.45s ease-in-out infinite;
  }

  .wing.right {
    transform-origin: -30% 40%;
    animation: flap-reverse 0.45s ease-in-out infinite;
  }

  @keyframes flap {
    0% { transform: rotate(0deg); }
    40% { transform: rotate(-25deg); }
    60% { transform: rotate(10deg); }
    100% { transform: rotate(0deg); }
  }

  @keyframes flap-reverse {
    0% { transform: rotate(0deg); }
    40% { transform: rotate(25deg); }
    60% { transform: rotate(-10deg); }
    100% { transform: rotate(0deg); }
  }

  /* twinkle particles behind */
  .particle-container {
    position:absolute;
    inset:0;
    pointer-events:none;
  }
  .particle {
    position:absolute;
    width:4px; height:4px;
    border-radius:50%;
    background:rgba(0,255,255,0.35);
    box-shadow:0 0 8px rgba(0,255,255,0.25);
    animation: drift 18s linear infinite, twinkle 3.5s ease-in-out infinite;
    opacity:0.6;
  }
  @keyframes drift {
    0% { transform: translate(0,0); }
    50% { transform: translate(24px,-18px); }
    100% { transform: translate(0,0); }
  }
  @keyframes twinkle { 0%,100%{opacity:0.4} 50%{opacity:1} }

  /* small footer note */
  .muted {
    margin-top:10px;
    font-size:0.9rem;
    color:rgba(238,242,246,0.7);
  }