@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url("inter-400.ttf") format("truetype")}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url("inter-600.ttf") format("truetype")}
@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;src:url("inter-700.ttf") format("truetype")}

:root{
  --bg:#05030a;
  --text:#f5eaff;

  /* Bright Gold palette */
  --raban-red:#9900ff;
  --raban-red-bright:#8400ff;
  --raban-red-deep:#47008a;
  --raban-pink:#bd76ff;
  --raban-white:#f5eaff;
  --raban-black:#05030a;
  --raban-dark:#07030b;

  --slash-silver:#fbf7ff;
  --slash-dark:#140721;

  --glow-main:#8400ff;
  --glow-soft:#bd76ff;
  --glow-white:#ffffff;
}

*{
  box-sizing:border-box;
}

html,body{
  margin:0;
  height:100%;
}

body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;
  color:var(--text);

  background:
    radial-gradient(circle at top left, rgba(153, 0, 255,.30), transparent 30%),
    radial-gradient(circle at top right, rgba(205, 118, 255,.20), transparent 34%),
    radial-gradient(circle at bottom, rgba(71, 0, 138, 0.45), transparent 46%),
    linear-gradient(180deg, #05030a 0%, #100718 46%, #000000 100%);

  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:16px;
  overflow-x:hidden;
}

/* MAIN SHELL */
.shell{
  max-width:520px;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
}

/* HEADER */
.header{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  margin-bottom:10px;
}

.logo{
  width:320px;
  max-width:100%;
  height:72px;
  object-fit:contain;
  display:block;

  padding:4px;
  border-radius:14px;
  border:2px solid rgba(153, 0, 255,.88);

  background:
    radial-gradient(circle at top, rgba(255,255,255,.16), transparent 36%),
    linear-gradient(135deg, #05030a, #200631, #000000);

  box-shadow:
    0 0 22px rgba(153, 0, 255,.72),
    0 0 42px rgba(205, 118, 255,.38),
    0 0 58px rgba(0,0,0,.96);
}

/* SAMURAI RED CARD */
.card{
  position:relative;
  width:100%;
  padding:20px;
  overflow:hidden;
  border-radius:22px;
  border:2px solid rgba(153, 0, 255,.72);

  background:
    radial-gradient(circle at top right, rgba(153, 0, 255,.26), transparent 34%),
    radial-gradient(circle at bottom left, rgba(205, 118, 255,.16), transparent 42%),
    linear-gradient(180deg, rgba(8,7,3,.98), rgba(30, 8, 45, 0.96) 52%, rgba(0,0,0,.98));

  box-shadow:
    0 0 36px rgba(0,0,0,.95),
    0 0 34px rgba(153, 0, 255,.42),
    0 0 48px rgba(205, 118, 255,.24),
    inset 0 0 26px rgba(255,255,255,.05),
    0 14px 48px rgba(0,0,0,.9);

  transition:all .35s ease;
}

.card:hover{
  transform:translateY(-3px) scale(1.01);
  box-shadow:
    0 0 50px rgba(0,0,0,.98),
    0 0 56px rgba(153, 0, 255,.62),
    0 0 74px rgba(205, 118, 255,.38),
    inset 0 0 30px rgba(153, 0, 255,.12),
    0 16px 60px rgba(0,0,0,.96);
}

/* SAKURA + INK TEXTURE */
.card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,.04) 0px,
      rgba(255,255,255,.04) 1px,
      transparent 1px,
      transparent 18px
    ),
    repeating-linear-gradient(
      45deg,
      rgba(153, 0, 255,.055) 0px,
      rgba(153, 0, 255,.055) 2px,
      transparent 2px,
      transparent 22px
    ),
    radial-gradient(circle at 18% 20%, rgba(205, 118, 255,.15), transparent 24%),
    radial-gradient(circle at 82% 76%, rgba(153, 0, 255,.18), transparent 30%);
  opacity:.86;
  z-index:0;
  pointer-events:none;
}

/* KATANA SLASH */
.card::after{
  content:"";
  position:absolute;
  top:18%;
  left:-50%;
  width:95%;
  height:3px;
  background:linear-gradient(90deg, transparent, #ffffff, #f5eaff, #8400ff, transparent);
  box-shadow:
    0 0 18px rgba(255,255,255,.86),
    0 0 32px rgba(153, 0, 255,.76),
    0 0 48px rgba(205, 118, 255,.62);
  transform:rotate(-18deg);
  animation:katanaSlash 4s ease-in-out infinite;
  z-index:0;
  pointer-events:none;
}

@keyframes katanaSlash{
  0%{
    left:-80%;
    opacity:0;
  }

  25%{
    opacity:1;
  }

  60%{
    opacity:.84;
  }

  100%{
    left:130%;
    opacity:0;
  }
}

/* HERO */
.hero{
  display:flex;
  flex-direction:column;
  gap:16px;
  align-items:center;
  position:relative;
  z-index:1;
}

.hero-img{
  width:100%;
  height:auto;
  display:block;
  border-radius:16px;
  border:2px solid rgba(153, 0, 255,.68);
  box-shadow:
    0 0 26px rgba(153, 0, 255,.52),
    0 0 42px rgba(205, 118, 255,.28),
    0 0 58px rgba(0,0,0,.78);
}

/* CTA */
.cta{
  display:flex;
  gap:12px;
  width:100%;
  justify-content:center;
  flex-wrap:wrap;
  position:relative;
  z-index:1;
}

/* BUTTON */
.btn{
  flex:1 1 45%;
  display:inline-block;
  text-decoration:none;
  text-align:center;
  padding:15px 16px;
  border-radius:14px;

  font-weight:900;
  letter-spacing:.6px;
  color:#f5eaff;

  background:#080703;
  position:relative;
  overflow:hidden;
  transition:all .3s ease;
  z-index:1;

  text-transform:uppercase;
  text-shadow:
    0 1px 2px rgba(0,0,0,.95),
    0 0 9px rgba(153, 0, 255,.78),
    0 0 14px rgba(205, 118, 255,.50);
}

/* ROTATING RED KATANA BORDER */
.btn::before{
  content:"";
  position:absolute;
  top:-3px;
  left:-3px;
  right:-3px;
  bottom:-3px;

  background:
    conic-gradient(
      from 0deg,
      #ffffff,
      #f5eaff,
      #bd76ff,
      #8400ff,
      #9900ff,
      #47008a,
      #000000,
      #9900ff,
      #8400ff,
      #ffffff
    );

  border-radius:16px;
  z-index:-2;
  animation:rotateBorder 3s linear infinite;
  filter:blur(8px);
}

/* BUTTON INNER */
.btn::after{
  content:"";
  position:absolute;
  inset:3px;
  background:
    radial-gradient(circle at top left, rgba(153, 0, 255,.22), transparent 36%),
    linear-gradient(180deg, #23063a 0%, #0e0417 58%, #000000 100%);
  border-radius:12px;
  z-index:-1;
}

.btn:hover{
  transform:translateY(-3px) scale(1.03);
  color:#ffffff;
  box-shadow:
    0 0 34px rgba(153, 0, 255,.86),
    0 0 58px rgba(205, 118, 255,.50),
    0 0 44px rgba(255,255,255,.14);
  animation:samuraiPulse 1s infinite;
}

@keyframes rotateBorder{
  to{
    transform:rotate(360deg);
  }
}

@keyframes samuraiPulse{
  0%{
    box-shadow:
      0 0 24px rgba(153, 0, 255,.50);
  }

  50%{
    box-shadow:
      0 0 56px rgba(153, 0, 255,.84),
      0 0 78px rgba(205, 118, 255,.42),
      0 0 42px rgba(255,255,255,.16);
  }

  100%{
    box-shadow:
      0 0 24px rgba(153, 0, 255,.50);
  }
}

/* SECTION BUTTONS */
.section-buttons{
  display:flex;
  flex-direction:column;
  gap:12px;
  width:100%;
  position:relative;
  z-index:1;
}

.badge-container{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
}

/* BADGE */
.badge{
  flex:1 1 30%;
  display:inline-block;
  text-decoration:none;
  text-align:center;
  padding:11px 12px;
  border-radius:12px;

  font-weight:900;
  letter-spacing:.3px;
  font-size:12px;

  color:#f5eaff;
  background:#080703;
  position:relative;
  overflow:hidden;
  transition:all .3s ease;
  z-index:1;

  text-transform:uppercase;
  text-shadow:
    0 1px 2px rgba(0,0,0,.95),
    0 0 8px rgba(153, 0, 255,.66),
    0 0 12px rgba(205, 118, 255,.42);
}

.badge::before{
  content:"";
  position:absolute;
  top:-3px;
  left:-3px;
  right:-3px;
  bottom:-3px;

  background:
    conic-gradient(
      from 0deg,
      #ffffff,
      #f5eaff,
      #bd76ff,
      #8400ff,
      #9900ff,
      #47008a,
      #000000,
      #9900ff,
      #8400ff,
      #ffffff
    );

  border-radius:14px;
  z-index:-2;
  animation:rotateBorder 4s linear infinite;
  filter:blur(8px);
}

.badge::after{
  content:"";
  position:absolute;
  inset:3px;
  background:
    linear-gradient(180deg, #23063a 0%, #0e0417 62%, #000000 100%);
  border-radius:10px;
  z-index:-1;
}

.badge:hover{
  transform:scale(1.06);
  color:#ffffff;
  box-shadow:
    0 0 30px rgba(153, 0, 255, 0.78),
    0 0 54px rgba(205, 118, 255, 0.44),
    0 0 32px rgba(255,255,255,.14);
}

/* FOOTER */
.footer{
  text-align:center;
  color:#f5eaff;
  font-size:12px;
  padding:8px 0 0;
  margin-top:8px;
  position:relative;
  z-index:1;

  text-shadow:
    0 0 10px rgba(153, 0, 255,.56),
    0 0 14px rgba(205, 118, 255,.42);
}

.footer b{
  color:#bd76ff;
}

/* MOBILE */
@media (max-width:480px){
  body{
    padding:12px;
  }

  .shell{
    gap:14px;
  }

  .logo{
    width:280px;
    height:64px;
    padding:3px;
  }

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

  .btn{
    flex:1 1 100%;
    padding:14px 12px;
    font-size:14px;
  }

  .badge{
    flex:1 1 45%;
    font-size:11px;
    padding:10px;
  }
}

body{height:auto}
.logo-text{display:flex;align-items:center;justify-content:center;margin:0;color:#fff;font-size:clamp(23px,5.8vw,32px);font-weight:700;letter-spacing:1px;text-shadow:0 0 14px #a644ff}
.hero-img{position:relative;z-index:1;aspect-ratio:1/1;object-fit:cover}.btn,.badge{min-height:44px;line-height:1.5}.badge{display:flex;align-items:center;justify-content:center}.footer a{color:#bd76ff}.btn:focus-visible,.footer a:focus-visible{outline:3px solid #fff;outline-offset:4px}.btn:active{transform:translateY(1px)}.btn[aria-disabled=true]{opacity:.5;cursor:not-allowed}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.card:hover,.btn:hover,.badge:hover{transform:none}}