:root{
  --bg:#081018;
  --card:#071018aa;
  --muted:#9aa3ad;
  --accent:#ffffff;
  --accent-2:#f2f2f2;
  --outline: rgba(255,255,255,0.08);
  --radius:18px;
  --btn-height:56px;
  --gap:12px;
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  /* Single unified background for both desktop and mobile */
  background: #071018; /* solid base, keeps contrast consistent across devices */
  color:var(--accent);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  /* Prevent the document from scrolling so the card handles internal scrolling only */
  overflow:hidden;
}

/* Card / glass */
.card{
  /* Fill the entire viewport so the card occupies the full screen */
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  /* translucent surface that lets the single page background show through */
  background: rgba(255,255,255,0.02);
  backdrop-filter: blur(6px) saturate(110%);
  /* full-bleed on small devices looks cleaner */
  border-radius: 0;
  padding:18px;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:12px;
  /* push brand, title and links toward the bottom of the viewport */
  justify-content: flex-end;
  box-shadow: 0 12px 36px rgba(2,8,20,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
  border: none;
  /* Keep internal scrolling for the links area only */
  overflow: hidden;
}

/* Brand area */
.brand{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:6px 8px;
  gap:8px;
  text-align:center;
  position:relative; /* needed for top-right subscribe button */
  /* move brand content a bit lower so logo + title sit lower on the screen */
  padding-top:18px;
  padding-bottom:28px;
  /* add vertical offset so logo, title and buttons appear slightly higher on the viewport */
  margin-top:14vh;
  /* make brand elements enter nicely */
  overflow:visible;
}

/* Ensure the circular logo wrap is centered and compact on mobile */
.brand-logo-wrap{
  display:inline-block;
  border-radius:999px;
  padding:6px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  box-shadow: 0 10px 36px rgba(2,8,20,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.05);
  /* entrance animation */
  transform: translateY(6px) scale(0.99);
  animation: slideUpFade 520ms cubic-bezier(.2,.9,.25,1) 1 both;
  animation-delay: 90ms;
}

/* Subscribe bell button (top-right) — smaller and fixed to viewport so content can sit lower */
.subscribe{
  position:fixed;
  right:14px;
  top:56px; /* moved further down for improved spacing */
  display:inline-flex;
  gap:8px;
  align-items:center;
  justify-content:center;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
  color:#fff;
  border:1px solid rgba(255,255,255,0.06);
  padding:6px 8px;
  border-radius:12px;
  font-weight:800;
  font-size:13px;
  line-height:1;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 6px 18px rgba(2,8,20,0.5), inset 0 1px 0 rgba(255,255,255,0.03);
  transition:transform .12s cubic-bezier(.2,.9,.25,1), box-shadow .14s ease, background .14s ease;
  min-height:36px;
  z-index:120;
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
}

/* refined icon sizing and a polished drop-shadow */
.subscribe svg{
  display:block;
  color: #ff5f6d;
  flex:0 0 20px;
  width:20px;
  height:20px;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.45));
}

/* label tuned for clarity and hierarchy */
.subscribe-label{
  display:inline-block;
  transform-origin:center;
  font-weight:800;
  font-size:13px;
  color: #ffffff;
  text-shadow: 0 6px 18px rgba(2,8,20,0.45);
  padding-left:6px;
  letter-spacing:0.6px;
}

/* small confirmation badge that appears when subscribed */
.subscribe .badge{
  position:absolute;
  top:-6px;
  right:-6px;
  background:#ff4a4a;
  color:#fff;
  font-size:11px;
  font-weight:800;
  padding:4px 6px;
  border-radius:999px;
  box-shadow: 0 6px 16px rgba(255,74,74,0.16);
  transform: scale(0);
  transform-origin:center;
  transition: transform .18s cubic-bezier(.2,.9,.2,1);
}

/* pressed state: stronger color, subtle lift */
.subscribe:active{ transform:translateY(1px) scale(.995); }
.subscribe:hover{ transform:translateY(-2px) scale(1.01); box-shadow: 0 18px 34px rgba(2,8,20,0.7); }

/* when subscribed show badge and tint icon */
.subscribe[aria-pressed="true"]{
  background: linear-gradient(90deg,#ff7a7a,#ff4a4a);
  color:#fff;
  box-shadow:0 18px 42px rgba(255,74,74,0.16);
  border-color: rgba(255,255,255,0.06);
}
.subscribe[aria-pressed="true"] svg{ color:#fff; filter: drop-shadow(0 8px 22px rgba(255,74,74,0.18)); }
.subscribe[aria-pressed="true"] .badge{ transform: scale(1); }

/* Reduce size and reposition on very small screens */
@media (max-width:420px){
  .subscribe{
    right:10px;
    top:34px; /* adjusted downward on small screens as well */
    padding:5px 8px;
    gap:6px;
    font-size:12px;
    border-radius:10px;
    min-height:34px;
  }
  .subscribe svg{ width:14px; height:14px; flex:0 0 14px; }
  .subscribe-label{ font-size:11px; padding-left:4px }
  .subscribe .badge{ top:-6px; right:-6px; padding:3px 5px; font-size:10px }
}

/* Clean, bold display title placed under the logo */
.brand-title{
  position:relative;
  /* bold display face for strong channel branding, fallback to system sans */
  font-family: "Bebas Neue", "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight:800;
  font-size:48px; /* larger for stronger presence */
  line-height:1;
  letter-spacing:2px;
  margin:10px 0 0 0; /* tightened spacing under the image */
  padding:0 6px;
  display:block;
  z-index:2;
  text-align:center;
  text-transform:uppercase;
  /* use a solid, high-contrast white color for the title */
  background: none;
  color: #ffffff;
  /* subtle dark outline using layered text-shadows for better legibility on the background */
  text-shadow:
    0 1px 0 rgba(0,0,0,0.6),
    0 6px 18px rgba(2,8,20,0.55);
  /* entrance animation for the title */
  transform: translateY(6px) scale(0.996);
  animation: slideUpFade 480ms cubic-bezier(.2,.9,.25,1) 1 both;
  animation-delay: 160ms;
}

/* mobile adjustments: keep the title bold but sized for smaller screens */
@media (max-width:420px){
  .brand-title{ font-size:40px; letter-spacing:1.6px; margin-top:8px; }
}

/* removed decorative rainbow layer for a simpler title */
.brand-title::before{ display:none; content: none; }

.brand-title::after{ display:none; content: none; }

/* Responsive sizes: larger to smaller scale for mobile as requested */
@media (max-width:420px){
  .brand-title{font-size:30px; letter-spacing:2px; transform: none; margin-top:10px;}
  .brand-title::before{transform: translateY(-4px) scale(1.08) rotateX(4deg); filter: blur(5px);}
}

/* Improved logo: circular, cropped, crisp and framed for professionalism */
.brand-logo-wrap{
  display:inline-block;
  border-radius:999px;
  padding:6px; /* subtle ring space */
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  box-shadow: 0 10px 36px rgba(2,8,20,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.05);
}
.logo{
  height:112px;
  width:112px;
  max-width:none;
  object-fit:cover;
  border-radius:999px;
  display:block;
  background: #071018;
  /* remove internal image padding so the circle is clean */
  padding:0;
  box-shadow: 0 18px 48px rgba(2,8,20,0.62);
  border: 2px solid rgba(255,255,255,0.04);
  transition: transform .18s ease, box-shadow .18s ease;
}
/* Slightly smaller on narrow phones while keeping circular crop */
@media (max-width:420px){
  .brand-logo-wrap{ padding:4px; }
  /* Larger circular profile for mobile */
  .logo{ height:100px; width:100px; border-width:1px; box-shadow:0 14px 40px rgba(2,8,20,0.60) }
}

/* Links column */
.links{
  display:flex;
  flex-direction:column;
  gap:var(--gap);
  margin-top:4px;
  flex:1 1 auto;
  overflow:auto;
  padding-right:6px;
  -webkit-overflow-scrolling:touch;
  padding-bottom:6px;
  /* hide scrollbars but keep scrolling functional */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
  /* subtle entrance for buttons to feel lively */
  will-change: transform, opacity;
  padding-left:4px;
}
.links::-webkit-scrollbar{ display: none; } /* Safari and Chrome */

/* Button base - simplified, static buttons with no animations or dynamic visual effects */
.btn{
  display:flex;
  align-items:center;
  justify-content:center;
  height:var(--btn-height);
  min-height:48px;
  padding:0 18px;
  color:var(--accent);
  text-decoration:none;
  border-radius:999px;
  font-weight:800;
  font-size:16px;
  letter-spacing:0.6px;
  /* Subtle static shadow only; remove animated/transform transitions */
  box-shadow:0 6px 16px rgba(2,8,20,0.35);
  transition: none;
  -webkit-tap-highlight-color: transparent;
  position:relative;
  overflow:visible;
  border:1px solid rgba(255,255,255,0.04);
  animation: none;
  transform: none;
  will-change: auto;
}

/* Remove sheen, halo and hover transforms */
.btn::before,
.btn::after{
  display:none;
  content:none;
}

/* Simplify hover/active to a gentle color change only */
.btn:hover{
  transform: none;
  box-shadow:0 8px 18px rgba(2,8,20,0.36);
  opacity:1;
}
.btn:active{
  transform: none;
  box-shadow:0 6px 14px rgba(2,8,20,0.34);
}

/* Remove JS ripple and touch helper styles */
.btn .ripple{ display:none }
.btn.t{ transform:none; box-shadow:0 6px 16px rgba(2,8,20,0.35); }

/* Colored gradients per button for clear visual distinction (with subtle inner glow) */

/* Staggered entrance: small incremental delays so buttons pop in one after another */
.links .btn{ /* default fallback delay */
  animation-delay: 0ms, 800ms; /* first value for popIn (will be overridden per-child), second for float */
}
.links .btn:nth-child(1){ animation-delay: 40ms, 800ms; }
.links .btn:nth-child(2){ animation-delay: 120ms, 900ms; }
.links .btn:nth-child(3){ animation-delay: 200ms, 1000ms; }
.links .btn:nth-child(4){ animation-delay: 280ms, 1100ms; }
.links .btn:nth-child(5){ animation-delay: 360ms, 1200ms; }
.links .btn:nth-child(6){ animation-delay: 440ms, 1300ms; }
.links .btn:nth-child(7){ animation-delay: 520ms, 1400ms; }
.links .btn:nth-child(8){ animation-delay: 600ms, 1500ms; }

/* Add a subtle hover pulse animation to make buttons feel more tactile */
.btn:hover{ animation-play-state: running; }
.btn:hover .ripple{ opacity:0.6; }
.btn.pulse{
  animation: pulse 680ms ease-in-out 1 both;
}
.links .btn:nth-child(1){
  --halo: 36, 230, 190; /* teal */
  background: linear-gradient(90deg,#2dd4bf,#14b8a6);
  box-shadow: 0 12px 36px rgba(20,120,110,0.18), inset 0 -8px 18px rgba(255,255,255,0.02);
  /* subtle movement + color pulse */
  animation: float 4s ease-in-out infinite, colorPulse-1 3.8s ease-in-out infinite;
}
.links .btn:nth-child(2){
  --halo: 255, 110, 110; /* coral */
  background: linear-gradient(90deg,#ff7a7a,#ff4a4a);
  box-shadow: 0 12px 36px rgba(255,90,90,0.14), inset 0 -8px 18px rgba(255,255,255,0.02);
  /* subtle movement + color pulse */
  animation: float 4.2s ease-in-out infinite, colorPulse-2 4s ease-in-out infinite;
}
.links .btn:nth-child(3){
  --halo: 255, 200, 86; /* gold */
  background: linear-gradient(90deg,#ffd166,#f9a825);
  color:#0b0c0d;
  box-shadow: 0 12px 36px rgba(200,140,40,0.12), inset 0 -6px 12px rgba(255,255,255,0.02);
  /* toned-down motion: gentle vertical float only for subtle emphasis */
  transform-origin: center;
  z-index: 5;
  animation: float 4.8s ease-in-out infinite;
}

/* Slightly stronger but subtle halo for the emphasized button */
.links .btn:nth-child(3)::before{
  opacity: 0.14;
  transition: opacity .18s ease, transform .22s ease;
  filter: blur(14px);
  animation: haloShift-1 6s ease-in-out infinite;
}
.links .btn:nth-child(4){
  --halo: 80, 200, 120; /* green */
  background: linear-gradient(90deg,#4ade80,#16a34a);
  box-shadow: 0 12px 36px rgba(30,150,70,0.12), inset 0 -8px 18px rgba(255,255,255,0.02);
  /* gentle floating & subtle emphasis to match other animated buttons */
  transform-origin: center;
  z-index: 2;
  animation: float 4.4s ease-in-out infinite, colorPulse-2 5.6s ease-in-out infinite;
}
.links .btn:nth-child(5){
  --halo: 100, 150, 255; /* blue */
  background: linear-gradient(90deg,#60a5fa,#3b82f6);
  box-shadow: 0 12px 36px rgba(50,110,220,0.12), inset 0 -8px 18px rgba(255,255,255,0.02);
}
.links .btn:nth-child(6){
  --halo: 245, 110, 180; /* pink */
  background: linear-gradient(90deg,#f472b6,#ec4899);
  box-shadow: 0 12px 36px rgba(220,90,150,0.12), inset 0 -8px 18px rgba(255,255,255,0.02);
}
.links .btn:nth-child(7){
  --halo: 140, 120, 255; /* purple */
  background: linear-gradient(90deg,#818cf8,#6366f1);
  box-shadow: 0 12px 36px rgba(110,90,250,0.12), inset 0 -8px 18px rgba(255,255,255,0.02);
}
.links .btn:nth-child(8){
  --halo: 140, 150, 170; /* slate */
  background: linear-gradient(90deg,#94a3b8,#64748b);
  box-shadow: 0 12px 36px rgba(100,110,130,0.10), inset 0 -8px 18px rgba(255,255,255,0.02);
}

/* Apply halo color from the CSS variable into a blurred ::before glow for each button */
.links .btn:nth-child(1)::before,
.links .btn:nth-child(2)::before,
.links .btn:nth-child(3)::before,
.links .btn:nth-child(4)::before,
.links .btn:nth-child(5)::before,
.links .btn:nth-child(6)::before,
.links .btn:nth-child(7)::before,
.links .btn:nth-child(8)::before{
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 160%;
  height: 160%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  filter: blur(18px);
  opacity: 0.0;
  transition: opacity .18s ease, transform .22s ease;
  z-index: 0;
  mix-blend-mode: screen;
  /* base color uses the --halo variable for each button */
  background: radial-gradient(ellipse at center, rgba(var(--halo),0.45) 0%, rgba(var(--halo),0.25) 25%, rgba(var(--halo),0.12) 45%, transparent 65%);
}

/* Specific animated halos/rings for the first two generator buttons */
.links .btn:nth-child(1)::before{
  /* keep a faint persistent halo that subtly shifts and brightens */
  opacity: 0.18;
  animation: haloShift-1 5.6s ease-in-out infinite;
}
.links .btn:nth-child(2)::before{
  opacity: 0.16;
  animation: haloShift-2 6s ease-in-out infinite;
}

/* Add a rotating colored ring (::after) for extra motion */
.links .btn:nth-child(1)::after,
.links .btn:nth-child(2)::after{
  content:'';
  position:absolute;
  left:50%;
  top:50%;
  width:220%;
  height:220%;
  transform:translate(-50%,-50%) scale(0.92);
  border-radius:999px;
  pointer-events:none;
  z-index:0;
  background: conic-gradient(from 0deg, rgba(var(--halo),0.12), transparent 30%, rgba(var(--halo),0.06) 60%, transparent 100%);
  filter: blur(10px);
  opacity:0.9;
  mix-blend-mode: screen;
  transition: opacity .22s ease, transform .22s ease;
  animation: ringSpin 10s linear infinite;
}
/* ensure the button content sits above the glow */
.links .btn{ z-index:1; overflow: visible; }

/* Slightly stronger glow when hovering or focusing a button (visible immediately on mobile as well) */
.links .btn:hover::before,
.links .btn:focus::before,
.links .btn:active::before{
  opacity: 0.88;
  transform: translate(-50%, -50%) scale(1.02);
}

/* Optionally keep a subtle persistent halo for the primary buttons (adjustable) */
.links .btn:nth-child(1)::before{ opacity: 0.18; }
.links .btn:nth-child(2)::before{ opacity: 0.16; }
.links .btn:nth-child(3)::before{ opacity: 0.12; }
.links .btn:nth-child(4)::before{ opacity: 0.12; }
.links .btn:nth-child(5)::before{ opacity: 0.10; }
.links .btn:nth-child(6)::before{ opacity: 0.10; }
.links .btn:nth-child(7)::before{ opacity: 0.10; }
.links .btn:nth-child(8)::before{ opacity: 0.08; }

/* Slightly larger buttons on small phones to improve touch targets */
@media (max-width:420px){
  .btn{height:60px; font-size:16px; padding:0 20px}
  .brand-title{font-size:28px}
  /* keep touch size and appearance while preserving animations on mobile */
  .btn{
    /* preserve animations and hover/focus effects on small screens */
    height:60px;
    font-size:16px;
    padding:0 20px;
  }
}

/* Hover / active effects */
.btn:active{transform:translateY(1px) scale(.997)}
.btn:hover{box-shadow:0 18px 40px rgba(2,8,20,0.6); opacity:0.98}
.btn::after{
  /* subtle overlay sheen retained but kept very low to not compete with the glow */
  content:'';
  position:absolute;
  inset:0;
  mix-blend-mode:overlay;
  opacity:0.06;
  transition:opacity .18s ease;
  z-index:2;
}
.btn:hover::after{opacity:0.10}

/* Outline variant tuned to be colorful but subtle */
.btn.outline{
  background:transparent;
  color:var(--accent-2);
  border:1px solid rgba(255,255,255,0.06);
  box-shadow:none;
  backdrop-filter: blur(4px);
}

/* Footer */
.meta{
  display:flex;
  align-items:center;
  justify-content:center;
  padding-top:6px;
  gap:8px;
}
.ghost{
  background:transparent;
  color:var(--muted);
  border:1px dashed rgba(255,255,255,0.03);
  padding:8px 12px;
  border-radius:10px;
  font-size:14px;
  transition:transform .12s ease, color .12s ease;
}
.ghost:active{transform:translateY(1px)}
.ghost:hover{color:var(--accent-2)}

/* Responsive tweaks: ensure comfortable spacing on mobile */
@media (max-width:420px){
  .card{padding:10px 12px; border-radius:12px;}
  /* keep the mobile logo larger for better visibility */
  .logo{height:92px; width:92px}
  .btn{height:56px; font-size:15px; border-radius:10px}
  :root{--gap:10px}
  /* smaller vertical offset on narrow screens so content still fits comfortably */
  .brand{ margin-top:12vh; }
}

/* Improve internal scrolling UX and hide any remaining scrollbars */
.links{
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Keyframes used by the new micro-animations */
@keyframes slideUpFade{
  from{ opacity:0; transform: translateY(14px) scale(.996); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}

@keyframes popIn{
  from{ opacity:0; transform: translateY(10px) scale(.98); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}

@keyframes pulse{
  0%{ transform: translateY(0) scale(1); box-shadow:0 12px 30px rgba(2,8,20,0.35); }
  50%{ transform: translateY(-4px) scale(1.02); box-shadow:0 26px 48px rgba(2,8,20,0.55); }
  100%{ transform: translateY(0) scale(1); box-shadow:0 12px 30px rgba(2,8,20,0.35); }
}

@keyframes float{
  0%{ transform: translateY(0) }
  50%{ transform: translateY(-4px) }
  100%{ transform: translateY(0) }
}

/* gentle shift/brightness cycle for the halo on button 1 */
@keyframes haloShift-1{
  0%{ transform: translate(-50%, -50%) scale(1); opacity:0.14; filter: blur(20px) }
  25%{ transform: translate(-51%, -52%) scale(1.02); opacity:0.24; filter: blur(16px) }
  50%{ transform: translate(-50%, -50%) scale(1); opacity:0.18; filter: blur(18px) }
  75%{ transform: translate(-49%, -48%) scale(0.98); opacity:0.12; filter: blur(21px) }
  100%{ transform: translate(-50%, -50%) scale(1); opacity:0.14; filter: blur(20px) }
}

/* slightly offset timing for button 2 so they don't sync exactly */
@keyframes haloShift-2{
  0%{ transform: translate(-50%, -50%) scale(1); opacity:0.12; filter: blur(20px) }
  30%{ transform: translate(-52%, -51%) scale(1.03); opacity:0.22; filter: blur(15px) }
  60%{ transform: translate(-50%, -50%) scale(1); opacity:0.16; filter: blur(18px) }
  90%{ transform: translate(-48%, -49%) scale(0.97); opacity:0.10; filter: blur(22px) }
  100%{ transform: translate(-50%, -50%) scale(1); opacity:0.12; filter: blur(20px) }
}

/* Rotating ring behind the two primary buttons */
@keyframes ringSpin{
  0%{ transform: translate(-50%,-50%) scale(0.92) rotate(0deg); opacity:0.86 }
  50%{ transform: translate(-50%,-50%) scale(0.95) rotate(180deg); opacity:0.95 }
  100%{ transform: translate(-50%,-50%) scale(0.92) rotate(360deg); opacity:0.86 }
}

/* color pulse variants to slightly shift gradient hues for the two generator buttons */
@keyframes colorPulse-1{
  0%{ filter: saturate(1) hue-rotate(0deg) }
  25%{ filter: saturate(1.05) hue-rotate(-3deg) }
  50%{ filter: saturate(1) hue-rotate(0deg) }
  75%{ filter: saturate(1.03) hue-rotate(2deg) }
  100%{ filter: saturate(1) hue-rotate(0deg) }
}
@keyframes colorPulse-2{
  0%{ filter: saturate(1) hue-rotate(0deg) }
  25%{ filter: saturate(1.06) hue-rotate(4deg) }
  50%{ filter: saturate(1) hue-rotate(0deg) }
  75%{ filter: saturate(1.02) hue-rotate(-2deg) }
  100%{ filter: saturate(1) hue-rotate(0deg) }
}

/* extra animations used by the emphasized third button */
@keyframes float-more{
  0%{ transform: translateY(0) scale(1) rotate(0deg) }
  25%{ transform: translateY(-8px) scale(1.02) rotate(-1deg) }
  50%{ transform: translateY(-14px) scale(1.04) rotate(0.5deg) }
  75%{ transform: translateY(-8px) scale(1.02) rotate(-0.6deg) }
  100%{ transform: translateY(0) scale(1) rotate(0deg) }
}

/* quick, punchy tilt/bounce to punctuate the float (kept for compatibility) */
@keyframes punchyTilt{
  0%{ transform: translateY(0) rotate(0deg) }
  10%{ transform: translateY(-4px) rotate(-4deg) }
  30%{ transform: translateY(2px) rotate(6deg) }
  50%{ transform: translateY(-2px) rotate(-2deg) }
  70%{ transform: translateY(1px) rotate(2deg) }
  100%{ transform: translateY(0) rotate(0deg) }
}

/* New keyframes for the third button: horizontal sway + small pop/bounce */
@keyframes swayShift{
  0%{ transform: translateX(0) translateY(0) scale(1) }
  20%{ transform: translateX(-6px) translateY(-2px) scale(1.01) }
  40%{ transform: translateX(6px) translateY(-6px) scale(1.02) }
  60%{ transform: translateX(-4px) translateY(-3px) scale(1.01) }
  80%{ transform: translateX(4px) translateY(-2px) scale(1.015) }
  100%{ transform: translateX(0) translateY(0) scale(1) }
}

@keyframes popBounce{
  0%{ transform: translateY(0) scale(1) }
  10%{ transform: translateY(-6px) scale(1.06) }
  30%{ transform: translateY(6px) scale(0.98) }
  50%{ transform: translateY(-3px) scale(1.02) }
  70%{ transform: translateY(2px) scale(0.995) }
  100%{ transform: translateY(0) scale(1) }
}

/* Halo subtly follows the sway to read as a cohesive motion */
@keyframes haloSway{
  0%{ transform: translate(-50%,-50%) scale(1); opacity:0.20 }
  25%{ transform: translate(-52%,-52%) scale(1.02); opacity:0.30 }
  50%{ transform: translate(-48%,-50%) scale(1); opacity:0.22 }
  75%{ transform: translate(-50%,-48%) scale(0.98); opacity:0.16 }
  100%{ transform: translate(-50%,-50%) scale(1); opacity:0.20 }
}

/* subtle scale pulse when focused/hovered so movement remains tactile */
.links .btn:nth-child(3):hover,
.links .btn:nth-child(3):focus{
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 20px 44px rgba(200,140,40,0.14);
  outline: none;
}

.links::-webkit-scrollbar{ height:0; width:0; background:transparent; }

/* Focus ring for accessibility but subtle */
.btn:focus{
  outline:2px solid rgba(255,255,255,0.10);
  outline-offset:3px;
}

/* Prevent double-tap zoom on mobile for better touch feel */
html,body{touch-action:manipulation}

/* Keep everything visible without vertical scrolling on typical phone heights:
   allow internal scrolling of the links if necessary but try to fit most items */

/* Subscribe modal (simple, compact and mobile-friendly) */
.modal{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:220;
  pointer-events:none;
  opacity:0;
  transition:opacity .18s ease;
}
.modal.open{ pointer-events:auto; opacity:1; }

.modal-backdrop{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(2,8,20,0.6), rgba(2,8,20,0.75));
  backdrop-filter: blur(6px);
}

.modal-panel{
  position:relative;
  width:94%;
  max-width:560px; /* larger to stand out */
  border-radius:16px;
  /* slightly brighter panel with subtle contrast and a warm YouTube accent border */
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.02));
  padding:18px;
  box-shadow: 0 30px 80px rgba(2,8,20,0.72), inset 0 1px 0 rgba(255,255,255,0.02);
  z-index:2;
  transform:translateY(-6px);
  border-left:6px solid rgba(255,23,68,0.95);
}

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

.modal-content{
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:stretch;
  text-align:left;
  padding:8px 4px 4px 4px;
}
.modal-header{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:center; /* center image and meta horizontally */
}
.modal-meta{
  display:flex;
  flex-direction:column;
  gap:4px;
  justify-content:center;
  text-align:center; /* center text under image */
}
.channel-preview{
  width:100%;
  border-radius:10px;
  overflow:hidden;
  background:#000;
  box-shadow: 0 16px 36px rgba(2,8,20,0.5);
  aspect-ratio: 16 / 9;
}
.channel-preview iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}

.modal-logo{
  width:84px;
  height:84px;
  border-radius:999px; /* make the modal/profile image fully circular */
  object-fit:cover;
  border:2px solid rgba(255,255,255,0.06);
  box-shadow: 0 18px 40px rgba(2,8,20,0.62);
  flex:0 0 auto;
  background:#000;
  margin:0 auto; /* ensure the image is centered */
}

.modal-title{
  margin:0;
  font-size:20px;
  font-weight:900;
  color:var(--accent);
  letter-spacing:0.6px;
}

.modal-sub{
  margin:0;
  color:var(--muted);
  font-size:13px;
  font-weight:700;
}

.modal-actions{
  display:flex;
  gap:12px;
  margin-top:10px;
  width:100%;
  justify-content:space-between;
  align-items:center;
}
.modal-actions .btn{ flex:1 1 auto; min-width:0; padding:12px 14px; height:52px; font-size:15px; border-radius:12px; font-weight:900; box-shadow:0 14px 36px rgba(2,8,20,0.45) }
.modal-actions .btn.outline{
  background:transparent;
  color:var(--accent-2);
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:none;
}
.modal-actions .btn.youtube{
  background: linear-gradient(90deg,#ff3b30,#ff1f4b);
  color:#fff;
  border:1px solid rgba(255,255,255,0.06);
  box-shadow: 0 18px 44px rgba(255,40,60,0.12), inset 0 -8px 18px rgba(255,255,255,0.02);
}

@media (max-width:420px){
  .modal-panel{ padding:12px; border-radius:10px }
  /* slightly larger circular modal profile on small screens */
  .modal-logo{ width:76px; height:76px }
  .modal-actions .btn{ height:50px; font-size:15px }
}