:root {
   color-scheme: light;
   --primary: #42E59B;
   --accent: #FF6B8B;
   --accent-soft: #FF86A6;
   --surface: rgba(255, 255, 255, 0.94);
   --card-radius: 22px;
   --shadow-card: 0 18px 42px rgba(15, 23, 42, 0.16);
   --shadow-elevated: 0 14px 32px rgba(15, 23, 42, 0.22);
   --transition-base: 0.28s cubic-bezier(0.4, 0, 0.2, 1);
 }

 body.theme-kb {
   --accent: #42E59B;
   --accent-soft: #63F1B1;
   --primary: #2EC4A3;
 }

 body.theme-xb {
   --accent: #6366F1;
   --accent-soft: #818CF8;
   --primary: #60A5FA;
 }

 *, *::before, *::after {
   box-sizing: border-box;
 }

 html {
   overflow-x: hidden;
 }

 html, body {
   height: 100%;
 }

 body {
   margin: 0;
   min-height: 100vh;
   overflow-x: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: clamp(12px, 4vw, 48px);
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
   background: linear-gradient(180deg, rgba(247, 250, 252, 0.95) 0%, rgba(226, 239, 255, 0.92) 100%);
   color: #1f2937;
 }

 body::before {
   content: "";
   position: fixed;
   inset: 0;
   pointer-events: none;
   background: radial-gradient(circle at top, rgba(255, 255, 255, 0.75), transparent 60%);
   z-index: -1;
 }

 main.card {
   width: 100%;
   max-width: 460px;
   background: var(--surface);
   border-radius: var(--card-radius);
   box-shadow: var(--shadow-card);
   overflow: hidden;
   display: flex;
   flex-direction: column;
   backdrop-filter: blur(10px);
 }

 header.hero {
   padding: clamp(24px, 6vw, 32px);
   background: linear-gradient(135deg, var(--accent), var(--accent-soft));
   color: #ffffff;
 }

 .hero-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 18px;
 }

 .brand {
   display: flex;
   align-items: center;
   gap: clamp(14px, 4vw, 20px);
 }

 .brand-logo {
   width: clamp(52px, 8vw, 64px);
   height: clamp(52px, 8vw, 64px);
   border-radius: 24px;
   background: rgba(255, 255, 255, 0.9);
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 8px 18px rgba(15, 23, 42, 0.25);
 }

 .brand-meta h1 {
   margin: 0;
   font-size: clamp(1.6rem, 4.2vw, 1.9rem);
   letter-spacing: 0.4px;
 }

 .brand-meta p {
   margin: 6px 0 0;
   font-size: clamp(0.82rem, 2.5vw, 0.92rem);
   color: rgba(255, 255, 255, 0.84);
 }

 .hero-bell {
   border: 0;
   width: clamp(42px, 7vw, 48px);
   height: clamp(42px, 7vw, 48px);
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.22);
   color: #ffffff;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
   transition: background var(--transition-base), transform var(--transition-base);
   cursor: pointer;
 }

 .hero-bell:hover,
 .hero-bell:focus-visible {
   background: rgba(255, 255, 255, 0.34);
   transform: translateY(-2px);
   outline: none;
 }

 .hero-bell svg {
   width: clamp(20px, 4.5vw, 22px);
   height: clamp(20px, 4.5vw, 22px);
 }

 section.content {
   padding: clamp(22px, 6vw, 30px);
   display: flex;
   flex-direction: column;
   gap: clamp(22px, 5vw, 28px);
 }

 .slide {
   width: 100%;
   height: clamp(160px, 40vw, 220px);
   border-radius: 20px;
   overflow: hidden;
   position: relative;
   box-shadow: 0 16px 34px rgba(15, 23, 42, 0.18);
   background: #f1f5f9;
 }

 .slide img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   transition: transform 0.45s ease-out;
 }

 .slide:hover img {
   transform: scale(1.045);
 }

 ul.menu {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   flex-direction: column;
   gap: clamp(12px, 3.8vw, 16px);
 }

 .menu-item {
   display: flex;
   align-items: center;
   gap: clamp(10px, 3.5vw, 16px);
   padding: clamp(12px, 4vw, 18px) clamp(14px, 4.5vw, 22px);
   border-radius: 18px;
   background: #2D3748;
   color: #ffffff;
   text-decoration: none;
   box-shadow: var(--shadow-elevated);
   transition: transform var(--transition-base), box-shadow var(--transition-base), background var(--transition-base);
 }

 .menu-item:hover,
 .menu-item:focus-visible {
   transform: translateY(-4px);
   background: #1F2937;
   outline: none;
 }

 .menu-icon {
   width: clamp(42px, 6vw, 48px);
   height: clamp(42px, 6vw, 48px);
   border-radius: 16px;
   background: rgba(255, 255, 255, 0.12);
   color: var(--primary);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
 }

 .menu-icon svg {
   width: clamp(20px, 4.5vw, 24px);
   height: clamp(20px, 4.5vw, 24px);
   stroke: currentColor;
 }

 .menu-text {
   font-size: clamp(0.95rem, 3.6vw, 1.05rem);
   font-weight: 600;
   letter-spacing: 0.3px;
 }

 .menu-arrow {
   margin-left: auto;
   font-size: clamp(1.1rem, 3.5vw, 1.25rem);
   color: rgba(255, 255, 255, 0.65);
   transition: transform var(--transition-base), color var(--transition-base);
 }

 .menu-item:hover .menu-arrow,
 .menu-item:focus-visible .menu-arrow {
   transform: translateX(6px);
   color: #ffffff;
 }

 footer.card-footer {
   padding: clamp(18px, 5vw, 24px);
   text-align: center;
   font-size: 0.78rem;
   color: #64748b;
   background: rgba(248, 250, 252, 0.92);
   border-top: 1px solid rgba(148, 163, 184, 0.15);
 }

 @media (max-width: 520px) {
   body {
     padding: clamp(10px, 3vw, 20px);
   }

   main.card {
     border-radius: 18px;
   }

   header.hero {
     padding: clamp(20px, 5vw, 28px);
   }

   section.content {
     padding: clamp(18px, 5vw, 26px);
   }

   .menu-item {
     gap: clamp(10px, 3vw, 12px);
     padding: clamp(12px, 3.5vw, 16px) clamp(14px, 4vw, 18px);
   }

   .slide {
     height: clamp(140px, 38vw, 200px);
   }
 }

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

   main.card {
     border-radius: 16px;
   }

   header.hero {
     padding: 18px 16px;
   }

   section.content {
     padding: 16px 14px;
   }

   .brand {
     gap: 12px;
   }

   .brand-logo {
     width: 48px;
     height: 48px;
   }

   .hero-bell {
     width: 40px;
     height: 40px;
   }

   .menu-item {
     gap: 10px;
     padding: 12px 14px;
     border-radius: 14px;
   }

   .menu-icon {
     width: 40px;
     height: 40px;
     border-radius: 12px;
   }

   .menu-text {
     font-size: 0.9rem;
   }

   footer.card-footer {
     padding: 16px 14px;
     font-size: 0.72rem;
   }
 }

 @media (max-width: 360px) {
   body {
     padding: 6px;
   }

   main.card {
     border-radius: 14px;
   }

   header.hero {
     padding: 16px 12px;
   }

   section.content {
     padding: 14px 12px;
     gap: 18px;
   }

   .brand-logo {
     width: 44px;
     height: 44px;
   }

   .hero-bell {
     width: 38px;
     height: 38px;
   }

   .menu-item {
     gap: 8px;
     padding: 10px 12px;
   }

   .menu-icon {
     width: 38px;
     height: 38px;
   }

   ul.menu {
     gap: 10px;
   }
 }

 @media (prefers-reduced-motion: reduce) {
   *, *::before, *::after {
     transition-duration: 0.01ms !important;
     animation-duration: 0.01ms !important;
   }
 }