:root {
     --bg: #071127;
     --muted: #9fb7d6;
     --accent: #06b6d4;
     --accent-2: #2dd4bf;
     --radius: 14px;
     --fw-bold: 700;
     --max-width: 980px
 }

 * {
     box-sizing: border-box
 }

 html,
 body {
     height: 100%
 }

 body {
     margin: 0;
     font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
     background: var(--bg);
     color: #e6eef8;
     display: flex;
     align-items: center;
     justify-content: center;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     text-rendering: optimizeLegibility
 }

 .wrap {
     width: 100%;
     min-height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 24px;
     position: relative;
     z-index: 2
 }

 .card {
     width: min(var(--max-width), 96%);
     background: linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(255, 255, 255, .01));
     border: 1px solid rgba(255, 255, 255, .04);
     border-radius: var(--radius);
     padding: 32px;
     box-shadow: 0 12px 40px rgba(2, 6, 23, .7);
     backdrop-filter: blur(6px);
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
     gap: 14px
 }

 .logo {
     display: flex;
     align-items: center;
     gap: 12px;
     justify-content: center
 }

 .logo .mark {
     width: 64px;
     height: 64px;
     border-radius: 12px;
     background: linear-gradient(135deg, var(--accent), #4dd2ff);
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: var(--fw-bold);
     color: #021126;
     box-shadow: 0 10px 36px rgba(6, 182, 212, .12);
     flex: 0 0 64px
 }

 .brand {
     font-weight: var(--fw-bold);
     color: var(--accent);
     font-size: 16px
 }

 .hero-tag {
     font-size: 34px;
     color: var(--accent-2);
     font-weight: 700;
     letter-spacing: .6px;
     text-transform: uppercase;
     display: inline-block;
     padding: 6px 14px;
     border-radius: 8px;
     position: relative;
     text-shadow: 0 0 6px rgba(6, 182, 212, .18), 0 0 18px rgba(6, 182, 212, .07);
     will-change: filter, text-shadow, transform, opacity;
     animation: neonPulse 1.9s ease-in-out infinite, neonFlicker 3.8s linear infinite
 }

 @keyframes neonPulse {
     0% {
         text-shadow: 0 0 4px rgba(6, 182, 212, .18), 0 0 12px rgba(6, 182, 212, .06);
         transform: translateY(0) scale(1);
         opacity: .96
     }

     50% {
         text-shadow: 0 0 18px rgba(6, 182, 212, .95), 0 0 34px rgba(6, 182, 212, .25);
         transform: translateY(-2px) scale(1.02);
         opacity: 1
     }

     100% {
         text-shadow: 0 0 4px rgba(6, 182, 212, .18), 0 0 12px rgba(6, 182, 212, .06);
         transform: translateY(0) scale(1);
         opacity: .96
     }
 }

 @keyframes neonFlicker {
     0% {
         opacity: 1
     }

     5% {
         opacity: .92
     }

     7% {
         opacity: 1
     }

     15% {
         opacity: .95
     }

     25% {
         opacity: 1
     }

     30% {
         opacity: .9
     }

     33% {
         opacity: 1
     }

     45% {
         opacity: .98
     }

     55% {
         opacity: 1
     }

     70% {
         opacity: .96
     }

     85% {
         opacity: 1
     }

     100% {
         opacity: 1
     }
 }

 .hero-underline {
     width: 64px;
     height: 2px;
     border-radius: 2px;
     margin-top: 6px;
     background: linear-gradient(90deg, var(--accent), var(--accent-2));
     box-shadow: 0 6px 18px rgba(6, 182, 212, .08)
 }

 h1 {
     font-size: 26px;
     margin: 6px 0
 }

 p.lead {
     color: var(--muted);
     margin: 0 0 6px 0;
     font-size: 15px;
     max-width: 720px
 }

 .meta {
     display: flex;
     gap: 12px;
     align-items: center;
     justify-content: center;
     flex-wrap: wrap;
     width: 100%
 }

 .actions {
     display: flex;
     gap: 8px;
     align-items: center;
     justify-content: center;
     flex-wrap: wrap
 }

 .ghost {
     background: transparent;
     border: 1px solid rgba(255, 255, 255, .06);
     padding: 10px 14px;
     border-radius: 10px;
     color: var(--muted);
     cursor: pointer
 }

 .btn-primary {
     padding: 12px 16px;
     border-radius: 10px;
     border: none;
     background: linear-gradient(90deg, var(--accent), var(--accent-2));
     color: #021126;
     font-weight: 700;
     cursor: pointer;
     box-shadow: 0 8px 24px rgba(6, 182, 212, .09)
 }

 /* modal styles (matches script.js selectors) */
 .modal.hidden {
     display: none
 }

 .modal {
     position: fixed;
     inset: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 3000;
     padding: 20px
 }

 .modal .overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(180deg, rgba(2, 6, 23, .65), rgba(2, 6, 23, .85));
     backdrop-filter: blur(6px) saturate(1.05)
 }

 .panel {
     position: relative;
     z-index: 2;
     width: min(920px, 94%);
     max-height: 86vh;
     overflow: auto;
     background: linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(255, 255, 255, .01));
     border-radius: 14px;
     padding: 18px;
     border: 1px solid rgba(255, 255, 255, .05);
     box-shadow: 0 30px 80px rgba(2, 6, 23, .7)
 }

 .panel .close {
     position: absolute;
     right: 12px;
     top: 12px;
     background: transparent;
     border: none;
     color: var(--muted);
     cursor: pointer;
     font-size: 18px;
     padding: 8px;
     border-radius: 8px
 }

 #bg-canvas {
     position: fixed;
     inset: 0;
     z-index: 1;
     width: 100%;
     height: 100%;
     pointer-events: none;
     display: block
 }

 @media(max-width:900px) {
     .card {
         padding: 24px
     }

     .logo .mark {
         width: 56px;
         height: 56px
     }

     h1 {
         font-size: 22px
     }

     .hero-tag {
         font-size: 24px;
         padding: 6px 10px
     }

     p.lead {
         font-size: 15px
     }
 }

 @media(max-width:640px) {
     body {
         padding: 8px
     }

     .card {
         padding: 18px;
         border-radius: 12px
     }

     .logo .mark {
         width: 48px;
         height: 48px
     }

     .hero-tag {
         font-size: 20px;
         padding: 6px 8px
     }

     h1 {
         font-size: 20px
     }

     .meta {
         flex-direction: column;
         gap: 10px
     }

     .ghost,
     .btn-primary {
         width: 100%;
         padding: 12px 14px
     }

     .brand {
         font-size: 14px
     }
 }

 @media (prefers-reduced-motion: reduce) {
     * {
         animation-duration: .001ms !important;
         animation-iteration-count: 1 !important;
         transition-duration: .001ms !important
     }
 }