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

 /* ─── Accessibility: visually hidden but readable by crawlers ─── */
 .sr-only {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;
 }

 /* ─── Heading resets so h2/h3 inherit design styles cleanly ─── */
 h2,
 h3 {
   font-size: inherit;
   font-weight: inherit;
   line-height: inherit;
 }


 :root {
   --bg-deep: #0f0c29;
   --bg-mid: #1a1650;
   --bg-card: rgba(255, 255, 255, 0.06);
   --bg-card-hover: rgba(255, 255, 255, 0.10);
   --accent: #a78bfa;
   --accent-bright: #c4b5fd;
   --accent-glow: rgba(167, 139, 250, 0.35);
   --gold: #f6d860;
   --gold-dim: #c9a227;
   --text-primary: #f0ecff;
   --text-secondary: #b8b0db;
   --text-muted: #7a6fa8;
   --border: rgba(167, 139, 250, 0.2);
   --reset-start: #ef4444;
   --reset-end: #b91c1c;
   --sidebar-w: 300px;
   --header-h: 64px;
   --radius-lg: 20px;
   --radius-md: 14px;
   --radius-sm: 10px;
   --shadow-card: 0 8px 32px #00000066;
   --shadow-glow: 0 0 40px #a78bfa40;
   --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }

 html {
   scroll-behavior: smooth;
 }

 body {
   font-family: 'Cairo', 'Amiri', sans-serif;
   background: linear-gradient(135deg, var(--bg-deep) 0%, var(--bg-mid) 50%, #302060 100%);
   background-attachment: fixed;
   color: var(--text-primary);
   min-height: 100vh;
   overflow-x: hidden;
 }

 /* ─── Animated background orbs ─── */
 body::before,
 body::after {
   content: '';
   position: fixed;
   border-radius: 50%;
   filter: blur(80px);
   pointer-events: none;
   z-index: 0;
 }

 body::before {
   width: 500px;
   height: 500px;
   background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, transparent 70%);
   top: -100px;
   right: -100px;
   animation: drift 12s ease-in-out infinite alternate;
 }

 body::after {
   width: 400px;
   height: 400px;
   background: radial-gradient(circle, rgba(99, 102, 241, 0.12) 0%, transparent 70%);
   bottom: -80px;
   left: -80px;
   animation: drift 16s ease-in-out infinite alternate-reverse;
 }

 @keyframes drift {
   from {
     transform: translate(0, 0) scale(1);
   }

   to {
     transform: translate(30px, 30px) scale(1.08);
   }
 }

 /* ─── Header ─── */
 .header {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   height: var(--header-h);
   background: rgba(15, 12, 41, 0.7);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
   border-bottom: 1px solid var(--border);
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0 20px;
   z-index: 100;
 }

 .header-title {
   font-size: 1.5rem;
   font-weight: 700;
   letter-spacing: 2px;
   background: linear-gradient(135deg, var(--accent-bright), var(--gold));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   font-family: 'Amiri', serif;
 }

 .logo {
   width: 44px;
   height: 44px;
   object-fit: contain;
   border-radius: 50%;
   border: 2px solid var(--border);
   opacity: 0.85;
   transition: opacity var(--transition), transform var(--transition);
 }

 .logo:hover {
   opacity: 1;
   transform: scale(1.08);
 }

 /* ─── Hamburger Menu ─── */
 #menu-container {
   width: 46px;
   height: 46px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: 6px;
   cursor: pointer;
   border-radius: var(--radius-sm);
   border: 1.5px solid rgba(167, 139, 250, 0.45);
   background: rgba(167, 139, 250, 0.12);
   transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
   flex-shrink: 0;
   user-select: none;
   -webkit-tap-highlight-color: transparent;
 }

 #menu-container:hover {
   background: rgba(167, 139, 250, 0.22);
   border-color: var(--accent-bright);
   box-shadow: 0 0 12px var(--accent-glow);
 }

 #menu-container:active {
   transform: scale(0.94);
 }

 .menu-line {
   width: 20px;
   height: 2px;
   background: var(--accent-bright);
   border-radius: 2px;
   transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
     opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
     width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
 }

 #menu-container.nav-open .menu-line:nth-child(1) {
   transform: translateY(8px) rotate(45deg);
 }

 #menu-container.nav-open .menu-line:nth-child(2) {
   opacity: 0;
   width: 0;
 }

 #menu-container.nav-open .menu-line:nth-child(3) {
   transform: translateY(-8px) rotate(-45deg);
 }

 /* ─── Sidebar overlay ─── */
 .sidebar-overlay {
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, 0.5);
   backdrop-filter: blur(4px);
   z-index: 150;
   opacity: 0;
   pointer-events: none;
   transition: opacity var(--transition);
 }

 .sidebar-overlay.visible {
   opacity: 1;
   pointer-events: all;
 }

 /* ─── Sidebar ─── */
 #buttons-container {
   position: fixed;
   top: 0;
   right: 0;
   width: var(--sidebar-w);
   height: 100vh;
   background: #13103a;
   border-left: 1px solid rgba(167, 139, 250, 0.25);
   box-shadow: -6px 0 32px rgba(0, 0, 0, 0.6);
   z-index: 200;
   display: flex;
   flex-direction: column;
   padding: calc(var(--header-h) + 20px) 16px 32px;
   gap: 8px;
   transform: translateX(100%);
   transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
   overflow-y: auto;
   overflow-x: hidden;
 }

 #buttons-container.nav-open {
   transform: translateX(0);
 }

 .sidebar-label {
   font-size: 0.65rem;
   font-weight: 700;
   color: var(--text-muted);
   letter-spacing: 4px;
   text-transform: uppercase;
   padding: 0 8px 10px;
   border-bottom: 1px solid var(--border);
   margin-bottom: 6px;
   direction: rtl;
   text-align: right;
 }

 #buttons-container button {
   display: flex;
   align-items: center;
   gap: 10px;
   width: 100%;
   background: transparent;
   border: 1px solid transparent;
   color: var(--text-secondary);
   font-family: 'Cairo', sans-serif;
   font-size: 1rem;
   font-weight: 400;
   padding: 12px 16px;
   border-radius: var(--radius-md);
   cursor: pointer;
   text-align: right;
   direction: rtl;
   transition: background var(--transition),
     border-color var(--transition),
     color var(--transition),
     transform var(--transition),
     box-shadow var(--transition);
   position: relative;
   -webkit-tap-highlight-color: transparent;
 }

 #buttons-container button:hover {
   background: rgba(167, 139, 250, 0.12);
   border-color: rgba(167, 139, 250, 0.3);
   color: var(--text-primary);
   transform: translateX(-4px);
 }

 #buttons-container button:active {
   transform: translateX(-2px) scale(0.98);
 }

 #buttons-container button:focus-visible {
   outline: 2px solid var(--accent);
   outline-offset: 2px;
 }

 #buttons-container button.active {
   background: rgba(167, 139, 250, 0.18);
   border-color: rgba(167, 139, 250, 0.45);
   color: var(--accent-bright);
   font-weight: 600;
   box-shadow: inset -3px 0 0 var(--accent);
 }

 /* ─── Main content ─── */
 .main-content {
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: calc(var(--header-h) + 40px) 20px 100px;
   position: relative;
   z-index: 1;
 }

 /* ─── Welcome state ─── */
 .welcome-hint {
   text-align: center;
   animation: fadeInUp 0.8s ease both;
 }

 .welcome-hint .icon {
   font-size: 4rem;
   margin-bottom: 16px;
   display: block;
   animation: pulse-gold 3s ease-in-out infinite;
 }

 @keyframes pulse-gold {

   0%,
   100% {
     filter: drop-shadow(0 0 8px #f6d86066);
   }

   50% {
     filter: drop-shadow(0 0 20px #f6d860cc);
   }
 }

 .welcome-hint h2 {
   font-size: 1.4rem;
   font-weight: 600;
   color: var(--text-secondary);
   font-family: 'Amiri', serif;
 }

 .welcome-hint p {
   font-size: 0.9rem;
   color: var(--text-muted);
   margin-top: 8px;
 }

 /* ─── Content display (centered text) ─── */
 @keyframes fadeInUp {
   from {
     opacity: 0;
     transform: translateY(20px);
   }

   to {
     opacity: 1;
     transform: translateY(0);
   }
 }

 .content-section {
   width: 100%;
   max-width: 620px;
   text-align: center;
   animation: fadeInUp 0.45s ease both;
 }

 .section-title {
   font-family: 'Cairo', sans-serif;
   font-size: 0.75rem;
   font-weight: 700;
   letter-spacing: 4px;
   text-transform: uppercase;
   color: var(--text-muted);
   margin-bottom: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 12px;
 }

 .section-title::before,
 .section-title::after {
   content: '';
   flex: 1;
   max-width: 60px;
   height: 1px;
   background: var(--border);
 }

 .content-section section {
   display: flex;
   flex-direction: column;
 }

 .content-section section p {
   font-family: 'Amiri', serif;
   font-size: 1.55rem;
   line-height: 3;
   color: var(--text-primary);
   padding: 18px 12px;
   direction: rtl;
   text-align: center;
   border-bottom: 1px solid rgba(167, 139, 250, 0.08);
   transition: color var(--transition);
 }

 .content-section section p:last-child {
   border-bottom: none;
 }

 .content-section section p:hover {
   color: var(--accent-bright);
 }

 /* ─── Hidden / Visible sections ─── */
 .hidden {
   display: none !important;
 }

 /* ─── Counter section ─── */
 .counter-section {
   position: fixed;
   bottom: 0;
   left: 0;
   right: 0;
   background: rgba(15, 12, 41, 0.8);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
   border-top: 1px solid var(--border);
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 28px;
   padding: 14px 20px;
   z-index: 90;
 }

 .counter-display {
   display: flex;
   flex-direction: column;
   align-items: center;
   min-width: 100px;
 }

 .counter-label {
   font-size: 0.65rem;
   font-weight: 600;
   letter-spacing: 3px;
   color: var(--text-muted);
   text-transform: uppercase;
   margin-bottom: 2px;
 }

 #counter {
   font-size: 2.2rem;
   font-weight: 700;
   color: var(--gold);
   font-variant-numeric: tabular-nums;
   text-shadow: 0 0 20px rgba(246, 216, 96, 0.5);
   transition: transform 0.1s ease, color 0.15s ease;
   line-height: 1;
 }

 #counter.bump {
   transform: scale(1.3);
   color: var(--accent-bright);
 }

 .counter-tap-hint {
   font-size: 0.75rem;
   color: var(--text-muted);
   text-align: center;
   max-width: 140px;
   line-height: 1.4;
 }

 /* Reset button */
 #reset {
   background: linear-gradient(135deg, var(--reset-start), var(--reset-end));
   color: #fff;
   font-family: 'Cairo', sans-serif;
   font-size: 0.9rem;
   font-weight: 600;
   padding: 10px 22px;
   border: none;
   border-radius: var(--radius-sm);
   cursor: pointer;
   letter-spacing: 1px;
   box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3);
   transition: transform var(--transition), box-shadow var(--transition), opacity var(--transition);
 }

 #reset:hover {
   transform: translateY(-2px);
   box-shadow: 0 6px 24px rgba(239, 68, 68, 0.5);
 }

 #reset:active {
   transform: translateY(0) scale(0.97);
   box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
 }

 /* ─── Ripple on tap ─── */
 .tap-ripple {
   position: fixed;
   border-radius: 50%;
   background: rgba(167, 139, 250, 0.25);
   pointer-events: none;
   transform: scale(0);
   animation: ripple-out 0.6s ease-out forwards;
   z-index: 5;
 }

 @keyframes ripple-out {
   to {
     transform: scale(4);
     opacity: 0;
   }
 }

 /* ─── Scrollbar ─── */
 ::-webkit-scrollbar {
   width: 5px;
 }

 ::-webkit-scrollbar-track {
   background: transparent;
 }

 ::-webkit-scrollbar-thumb {
   background: var(--border);
   border-radius: 4px;
 }

 /* ─── Responsive ─── */
 @media (max-width: 600px) {
   :root {
     --sidebar-w: 80vw;
   }

   .content-card {
     padding: 24px 16px;
   }

   .content-section section p {
     font-size: 1.25rem;
     padding: 12px 14px;
     line-height: 1.9;
   }

   .header-title {
     font-size: 1.2rem;
   }

   #counter {
     font-size: 1.8rem;
   }

   .counter-tap-hint {
     display: none;
   }
 }

 @media (max-width: 380px) {
   :root {
     --sidebar-w: 92vw;
   }

   #buttons-container button {
     font-size: 0.95rem;
     padding: 11px 12px;
   }
 }