body { font-family: 'Nunito Sans', ui-sans-serif, system-ui, sans-serif; color: #0A1F24; }
  h1, h2, h3, .font-display { font-family: 'Sora', ui-sans-serif, system-ui, sans-serif; letter-spacing: -0.025em; }
  :focus-visible { outline: 3px solid #2F6FED; outline-offset: 3px; border-radius: 6px; }

  /* Books & Orbit Rotation on Circular Track */
  .book { filter: drop-shadow(0 18px 18px rgba(10,31,36,.22)); }
  @keyframes orbitTrack {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
  @keyframes counterOrbit {
    from { transform: rotate(0deg); }
    to { transform: rotate(-360deg); }
  }
  .orbit-wrapper {
    position: absolute;
    inset: 0;
    pointer-events: none;
    animation: orbitTrack 21s linear infinite;
    transform-origin: center center;
  }
  .orbit-book {
    position: absolute;
    left: 50%;
    top: 2%;
    width: 50%;
    transform: translateX(-50%);
    pointer-events: auto;
    animation: counterOrbit 21s linear infinite;
    transform-origin: center center;
  }
  #heroStage:hover .orbit-wrapper,
  #heroStage:hover .orbit-book {
    animation-play-state: paused;
  }
  @keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
  .floaty { animation: floaty 4s ease-in-out infinite; }
  @keyframes rise { from { opacity: 0; } to { opacity: 1; } }
  .rise { opacity: 0; animation: rise .9s cubic-bezier(.2,.8,.2,1) forwards; }
  .book-card .book { transition: transform .35s cubic-bezier(.2,.8,.2,1); }
  .book-card:hover .book { transform: translateY(-10px) rotate(-2deg); }

  /* Notebook page */
  .ruled { background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 31px, #2F6FED26 31px, #2F6FED26 32px); background-position: 0 12px; }
  .marker-y { background: linear-gradient(transparent 55%, #FFB02088 55%); }
  .marker-g { background: linear-gradient(transparent 55%, #16A34A44 55%); }

  /* FAQ */
  details > summary { list-style: none; cursor: pointer; }
  details > summary::-webkit-details-marker { display: none; }
  details[open] .plus { transform: rotate(45deg); }
  .plus { transition: transform .25s; }

  /* Range inputs */
  input[type=range] { -webkit-appearance: none; appearance: none; height: 8px; border-radius: 9999px; background: #0A1F2222; width: 100%; }
  input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 9999px; background: #0E3B43; border: 4px solid #fff; box-shadow: 0 0 0 2px #0E3B43; cursor: grab; }
  input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 9999px; background: #0E3B43; border: 4px solid #fff; box-shadow: 0 0 0 2px #0E3B43; cursor: grab; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    .rise { opacity: 1 !important; }
  }

  /* Highlighting Pop Animation for CTA Button */
  @keyframes popPulse {
    0%, 100% {
      transform: scale(1);
      box-shadow: 0 10px 25px -3px rgba(255, 176, 32, 0.5), 0 4px 12px rgba(255, 176, 32, 0.3);
    }
    50% {
      transform: scale(1.045);
      box-shadow: 0 20px 40px -2px rgba(255, 176, 32, 0.75), 0 8px 20px rgba(255, 176, 32, 0.5);
    }
  }
  .pop-btn {
    animation: popPulse 2.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  }
  .pop-btn:hover {
    animation-play-state: paused;
    transform: scale(1.07) translateY(-3px);
  }

  /* Grid & Dot Background Texture with Ambient Colors for Study Vault */
  .bg-vault-pattern {
    background-color: #F1F5F9;
    background-image: 
      radial-gradient(circle at 10% 20%, rgba(47, 111, 237, 0.12) 0%, transparent 40%),
      radial-gradient(circle at 90% 25%, rgba(255, 176, 32, 0.14) 0%, transparent 45%),
      radial-gradient(circle at 50% 85%, rgba(22, 163, 74, 0.10) 0%, transparent 50%),
      radial-gradient(circle at 80% 85%, rgba(139, 92, 246, 0.10) 0%, transparent 40%),
      linear-gradient(to right, rgba(14, 59, 67, 0.05) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(14, 59, 67, 0.05) 1px, transparent 1px);
    background-size: auto, auto, auto, auto, 28px 28px, 28px 28px;
  }

  .card-vault-texture {
    background-color: #ffffff;
    background-image: 
      radial-gradient(ellipse at top left, rgba(47, 111, 237, 0.05) 0%, transparent 55%),
      radial-gradient(ellipse at bottom right, rgba(255, 176, 32, 0.06) 0%, transparent 55%),
      radial-gradient(circle at 50% 50%, rgba(22, 163, 74, 0.03) 0%, transparent 60%),
      radial-gradient(#0A1F24 0.75px, transparent 0.75px);
    background-size: 100% 100%, 100% 100%, 100% 100%, 22px 22px;
  }

  /* Why This Bundle Is Different Section Styles & Light Aesthetic */
  .bg-diff-section {
    background-color: #FAFCFD;
    background-image:
      radial-gradient(circle at 18% 15%, rgba(47, 111, 237, 0.06) 0%, transparent 40%),
      radial-gradient(circle at 82% 20%, rgba(255, 176, 32, 0.08) 0%, transparent 45%),
      radial-gradient(circle at 50% 50%, rgba(22, 163, 74, 0.04) 0%, transparent 55%),
      linear-gradient(to right, rgba(10, 31, 36, 0.025) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(10, 31, 36, 0.025) 1px, transparent 1px);
    background-size: auto, auto, auto, 24px 24px, 24px 24px;
  }

  @keyframes floatSlow {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-7px) rotate(1deg); }
  }
  @keyframes floatCard1 { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-5px); } }
  @keyframes floatCard2 { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-7px); } }
  @keyframes floatCard3 { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-6px); } }

  .anim-float-1 { animation: floatCard1 4.5s ease-in-out infinite; }
  .anim-float-2 { animation: floatCard2 5.2s ease-in-out infinite 0.5s; }
  .anim-float-3 { animation: floatCard3 4.8s ease-in-out infinite 1s; }
  .anim-float-slow { animation: floatSlow 6s ease-in-out infinite; }

  .diff-card {
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .diff-card:hover {
    transform: translateY(-4px) scale(1.015);
    box-shadow: 0 16px 32px -4px rgba(14, 59, 67, 0.12), 0 4px 12px rgba(14, 59, 67, 0.06);
  }