/* ═══════════════════════════════════════════════════════════════════════════
   AstroKamya™ · UNIVERSAL RESPONSIVE SYSTEM v1.0
   Complete fluid layout system: 320px → 4K screens
   Pages: AstroKamya (index) · SoulSync · ForYou · Dashboard · Auth · Account
   
   BREAKPOINTS:
     --bp-xs:   320px  (iPhone SE, small phones)
     --bp-sm:   480px  (Standard phones)
     --bp-md:   768px  (Tablets, iPad portrait)
     --bp-lg:   1024px (Small laptops, iPad landscape)
     --bp-xl:   1440px (Standard desktop)
     --bp-2xl:  1920px (Large monitors)
     --bp-4k:   2560px (4K/Ultra-wide)
   
   GRID: 12-col (desktop) → 6-col (tablet) → 1-col (mobile)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════ CUSTOM PROPERTIES: Responsive Tokens ═══════ */
:root {
  /* Fluid spacing scale — clamp(mobile, preferred, desktop) */
  --sp-xs:  clamp(2px,  0.25vw,  4px);
  --sp-sm:  clamp(4px,  0.5vw,   8px);
  --sp-md:  clamp(8px,  1vw,    12px);
  --sp-lg:  clamp(12px, 1.5vw,  16px);
  --sp-xl:  clamp(16px, 2vw,    24px);
  --sp-2xl: clamp(20px, 2.5vw,  32px);
  --sp-3xl: clamp(24px, 3vw,    40px);
  --sp-4xl: clamp(32px, 4vw,    56px);
  --sp-5xl: clamp(40px, 5vw,    80px);

  /* Container padding */
  --container-pad: clamp(16px, 3vw, 40px);

  /* Fluid typography */
  --fs-micro:   clamp(9px,  0.65vw, 11px);
  --fs-caption:  clamp(10px, 0.75vw, 13px);
  --fs-body:     clamp(13px, 0.9vw,  15px);
  --fs-subhead:  clamp(14px, 1vw,    18px);
  --fs-heading:  clamp(18px, 2vw,    28px);
  --fs-title:    clamp(24px, 3.5vw,  42px);
  --fs-display:  clamp(32px, 5vw,    72px);

  /* Radius scaling */
  --r-xs: clamp(6px,  0.5vw, 8px);
  --r-sm: clamp(8px,  0.7vw, 12px);
  --r-md: clamp(10px, 1vw,   16px);
  --r-lg: clamp(14px, 1.2vw, 20px);
  --r-xl: clamp(16px, 1.5vw, 24px);
}

/* ═══════ GLOBAL: Overflow Prevention ═══════ */
html {
  overflow-x: hidden;
  overscroll-behavior-x: none;
  scroll-behavior: smooth;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
  overscroll-behavior-x: none;
  -webkit-overflow-scrolling: touch;
  max-width: 100vw;
  min-width: 320px;
}

/* Prevent any element from causing horizontal scroll */
img, video, canvas, iframe, embed, object {
  max-width: 100%;
  height: auto;
}

/* ═══════ RESPONSIVE CONTAINER SYSTEM ═══════ */
.wrap,
.ss-wrap,
.ak-wrap {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

/* ═══════ FLUID TYPOGRAPHY SCALE ═══════ */
h1, .hero-headline, .ak-hero h1, #ss-hero h1 {
  font-size: var(--fs-display);
}

h2, .ss-section-head h2, .ak-section-title {
  font-size: var(--fs-title);
  line-height: 1.12;
}

h3 {
  font-size: var(--fs-heading);
}

h4, h5, h6 {
  font-size: var(--fs-subhead);
}

body, p {
  font-size: var(--fs-body);
}

/* ═══════════════════════════════════════════════
   LARGE SCREENS — 1441px+ (Enhance, not just scale)
   ═══════════════════════════════════════════════ */
@media (min-width: 1441px) {
  .wrap,
  .ss-wrap,
  .ak-wrap {
    max-width: 1340px;
  }

  /* Slightly larger typography */
  h2 {
    font-size: clamp(36px, 3.5vw, 48px);
  }

  /* Price row can hold more cards */
  .price-row {
    gap: 20px;
  }

  /* Feature bento wider cards */
  .feat-bento {
    gap: 20px;
  }

  /* SoulSync stories can be 3-col */
  .ss-stories-row {
    grid-template-columns: repeat(3, 1fr);
  }

  /* ForYou bento can be 3-col */
  .ak-bento {
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }

  /* Insight grid stays 4-col with more gap */
  .ak-insight-grid {
    gap: 20px;
  }
}

/* ═══════════════════════════════════════════════
   4K SCREENS — 2560px+
   ═══════════════════════════════════════════════ */
@media (min-width: 2560px) {
  .wrap,
  .ss-wrap,
  .ak-wrap {
    max-width: 1600px;
  }

  /* Scale up typography for readability on 4K */
  body {
    font-size: 17px;
  }

  /* Increase section padding for breathing room */
  section {
    padding: 120px 0;
  }

  /* Hero gets more vertical space */
  #hero {
    min-height: 85vh;
    padding-top: 200px;
  }

  /* Grid cards can show 4 columns */
  .price-row {
    grid-template-columns: repeat(4, 1fr);
  }

  .feat-bento {
    grid-template-columns: repeat(4, 1fr);
  }

  /* ForYou product grid */
  .ak-product-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Mesh orbs get bigger on 4K */
  .mesh-orb {
    filter: blur(200px);
  }
  .orb-1 { width: 1000px; height: 1000px; }
  .orb-2 { width: 900px; height: 900px; }
}

/* ═══════════════════════════════════════════════
   SMALL LAPTOP — 769px – 1024px
   ═══════════════════════════════════════════════ */
@media (max-width: 1024px) and (min-width: 769px) {
  .wrap,
  .ss-wrap,
  .ak-wrap {
    padding-left: 24px;
    padding-right: 24px;
  }

  /* Section spacing reduced */
  section {
    padding: 64px 0;
  }

  /* Nav: partial collapse — hide less important links */
  .nav-dropdown-wrap {
    display: none;
  }

  /* Pricing: 2 columns comfortably */
  .price-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  /* Feature bento 2-col */
  .feat-bento {
    grid-template-columns: repeat(2, 1fr);
  }
  .fb-big {
    grid-column: span 2;
  }

  /* ForYou product grid 2-col */
  .ak-product-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Hero chart scale */
  .hero-chart-bg {
    width: 450px;
    height: 450px;
    right: -15%;
    opacity: 0.45;
  }

  /* SoulSync hero → stack */
  .ss-hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .ss-hero-left {
    text-align: center;
  }
  .ss-hero-left .ss-hero-cta-group {
    align-items: center;
  }
  .ss-hero-left .ss-hero-sub {
    margin-left: auto;
    margin-right: auto;
  }

  /* ForYou category nav scroll */
  .ak-category-scroll {
    justify-content: flex-start;
    gap: 16px;
  }

  /* Insights 2-col */
  .ak-insight-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Upsell 2-col */
  .ak-upsell-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ═══════════════════════════════════════════════
   TABLET — 481px – 768px
   ═══════════════════════════════════════════════ */
@media (max-width: 768px) and (min-width: 481px) {
  .wrap,
  .ss-wrap,
  .ak-wrap {
    padding-left: 20px;
    padding-right: 20px;
  }

  section {
    padding: 48px 0;
  }

  /* Typography tightened */
  h2 {
    font-size: clamp(24px, 5vw, 32px) !important;
    margin-bottom: 32px;
  }

  /* Grids → 2 columns */
  .price-row,
  .feat-bento,
  .test-grid,
  .intent-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  .fb-big {
    grid-column: span 2;
  }

  /* Input split → 2 col still works on tablet */
  .input-split {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  /* Hero */
  #hero {
    padding: 120px 0 48px;
    min-height: auto;
  }
  .hero-chart-bg {
    width: 350px;
    height: 350px;
    right: -20%;
    opacity: 0.35;
  }

  /* SoulSync features → 2 col */
  .ss-bento {
    grid-template-columns: repeat(2, 1fr);
  }

  /* SoulSync pricing → 1 col */
  .ss-pricing-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
  }

  /* ForYou product grid → 2 col */
  .ak-product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  /* ForYou insight → 2 col */
  .ak-insight-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ForYou bento → 2 col */
  .ak-bento {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  /* Steps row simplify */
  .steps-row {
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 0;
  }
  .step-connector {
    width: 24px;
  }

  /* Reduce card hover effects on tablet */
  .pc-pop {
    transform: none;
  }

  /* Navigation tablet adjustment */
  .nav-r {
    gap: 14px;
  }

  /* Footer — partial stack */
  .foot-grid {
    flex-direction: column;
    gap: 28px;
  }
}

/* ═══════════════════════════════════════════════
   MOBILE — 320px – 480px
   Full single-column stack with touch optimization
   ═══════════════════════════════════════════════ */
@media (max-width: 480px) {
  .wrap,
  .ss-wrap,
  .ak-wrap {
    padding-left: 16px;
    padding-right: 16px;
  }

  section {
    padding: 36px 0;
  }

  /* Typography mobile-optimized */
  h1, .hero-headline, #hero h1, #hero-title {
    font-size: clamp(26px, 7vw, 34px) !important;
  }

  h2 {
    font-size: clamp(22px, 6vw, 28px) !important;
    margin-bottom: 24px;
  }

  p {
    font-size: 14px;
  }

  .sec-label {
    font-size: 11px;
  }

  /* All grids → single column */
  .price-row,
  .feat-bento,
  .test-grid,
  .input-split,
  .demo-split,
  .ss-bento,
  .ss-pricing-grid,
  .ss-stories-row,
  .ak-insight-grid,
  .ak-bento,
  .ak-upsell-grid,
  .ak-rec-inner,
  .ak-pd-grid,
  .ak-pkg-grid,
  .ak-product-grid {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }

  /* FB-big/wide should not span */
  .fb-big, .fb-wide {
    grid-column: span 1;
  }

  /* Intent grid → keep 2 cols on mobile for visual density */
  .intent-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px;
  }

  /* Pricing popular card first */
  .pc-pop {
    transform: none;
    order: -1;
  }

  /* Buttons → full width */
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-actions .btn-glow,
  .hero-actions .btn-outline,
  .hero-actions .btn-primary-gold,
  .hero-actions .btn-ghost-hero,
  .cta-btn.full,
  .btn-glow.full {
    width: 100%;
    justify-content: center;
    min-height: 52px;
    font-size: 15px;
  }

  /* Hero */
  #hero {
    padding: 100px 0 48px;
    min-height: auto;
  }
  .hero-chart-bg {
    width: 220px;
    height: 220px;
    opacity: 0.2;
    right: -25%;
  }
  .hero-desc {
    font-size: 14px;
    max-width: 100%;
    margin-bottom: 20px;
  }
  .hero-trust {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
  }
  .ht-sep {
    display: none;
  }
  .ht-item {
    padding: 6px 10px;
    font-size: 11px;
  }
  .hero-personal {
    padding: 8px 14px;
    margin-bottom: 14px;
  }

  /* Cards compact */
  .pc {
    padding: 22px 18px;
  }
  .fb-card {
    padding: 22px 18px;
  }
  .input-card {
    padding: 20px 16px;
  }

  /* Steps → vertical list */
  .steps-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .step-connector {
    display: none;
  }
  .step-item {
    flex-direction: row;
    gap: 14px;
    text-align: left;
    padding: 18px 16px;
  }
  .si-num {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }

  /* Proof strip vertical */
  .proof-strip {
    flex-direction: column;
    gap: 12px;
  }
  .ps-sep {
    width: 60%;
    height: 1px;
  }

  /* SoulSync hero */
  .ss-h1-line {
    font-size: clamp(24px, 7vw, 36px);
  }
  .ss-hero-sub {
    font-size: 13px;
    max-width: 100%;
  }
  .ss-btn-hero {
    padding: 14px 28px;
    font-size: 15px;
    width: 100%;
    justify-content: center;
  }
  .ss-live-counter {
    gap: 8px;
    padding: 12px 14px;
  }
  .ss-lc-num {
    font-size: 15px;
  }
  .ss-lc-sep {
    display: none;
  }

  /* SoulSync steps vertical */
  .ss-steps {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  .ss-step-connector {
    height: 30px;
    width: auto;
    padding-top: 0;
  }
  .ss-connector-line {
    width: 1px;
    height: 100%;
  }

  /* SoulSync footer */
  .ss-foot-grid {
    flex-direction: column;
    gap: 20px;
  }
  .ss-foot-cols {
    flex-direction: column;
    gap: 20px;
  }
  .ss-foot-bottom {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }

  /* SoulSync pricing */
  .ss-plan-features-grid {
    grid-template-columns: 1fr 1fr;
    gap: 4px;
  }

  /* ForYou hero */
  .ak-hero {
    padding: 280px 0 40px;
  }
  .ak-hero h1 {
    font-size: clamp(28px, 7vw, 36px) !important;
  }
  .ak-hero-split {
    grid-template-columns: 1fr !important;
    gap: 24px;
  }
  .ak-hero-cta-row {
    flex-direction: column;
    gap: 10px;
  }
  .ak-hero-cta-primary,
  .ak-hero-cta-secondary {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
  .ak-hero-trust {
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
  }

  /* ForYou category cards smaller */
  .ak-cat-card {
    width: 100px;
    height: 110px;
  }
  .ak-category-scroll {
    justify-content: flex-start;
    gap: 12px;
    padding: 0 16px;
  }

  /* ForYou product detail */
  .ak-pd-gallery {
    position: static;
  }
  .ak-pd-grid {
    gap: 24px;
  }

  /* Footer tighter */
  .foot-grid {
    flex-direction: column;
    gap: 28px;
  }
  .foot-cols {
    flex-wrap: wrap;
    gap: 24px;
  }
  .foot-bottom {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }

  /* Lifetime plan */
  .lt-content {
    grid-template-columns: 1fr;
    padding: 22px 16px;
  }
  .lt-features-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .lt-emotion-row {
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
  }
  .lt-comparison {
    flex-direction: column;
    gap: 12px;
    padding: 16px;
  }
  .lt-comp-divider {
    width: 60%;
    height: 1px;
  }
  .lt-amount {
    font-size: 40px;
  }
}

/* ═══════════════════════════════════════════════
   EXTRA SMALL — ≤ 375px (iPhone SE, older phones)
   ═══════════════════════════════════════════════ */
@media (max-width: 375px) {
  .wrap,
  .ss-wrap,
  .ak-wrap {
    padding-left: 12px;
    padding-right: 12px;
  }

  h1, .hero-headline, #hero h1, #hero-title {
    font-size: 24px !important;
  }

  h2 {
    font-size: 20px !important;
  }

  /* Intent 1-col on very narrow */
  .intent-grid {
    grid-template-columns: 1fr !important;
  }

  /* Input card ultra-compact */
  .input-card {
    padding: 14px 12px;
  }

  /* Logo smaller */
  .logo-mandala {
    width: 28px;
    height: 28px;
  }
  .logo-text {
    font-size: 14px;
  }

  /* SoulSync adjustments */
  .ss-h1-line {
    font-size: clamp(22px, 6.5vw, 32px);
  }
  .ss-plan-features-grid {
    grid-template-columns: 1fr;
  }
  .ss-trust-metrics {
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 12px;
  }
  .ss-trust-sep {
    display: none;
  }

  /* ForYou category cards even smaller */
  .ak-cat-card {
    width: 85px;
    height: 95px;
  }
  .ak-cat-title {
    font-size: 11px;
  }
}

/* ═══════════════════════════════════════════════
   TOUCH TARGET ENFORCEMENT — All touch devices
   Minimum 44×44px for all interactive elements
   ═══════════════════════════════════════════════ */
@media (pointer: coarse) {
  /* All interactive elements get minimum touch target */
  button,
  a[role="button"],
  .cta-btn,
  .btn-glow,
  .btn-outline,
  .shimmer-btn,
  .btn-primary-gold,
  .btn-ghost-hero,
  .nav-profile-btn,
  .mobile-hamburger,
  .ss-cta-btn,
  .ss-plan-btn,
  .ss-btn-hero,
  .ak-add-to-cart,
  .ak-bento-cta,
  .ak-sticky-btn,
  .ak-hero-cta-primary,
  .ak-hero-cta-secondary {
    min-height: 44px;
    min-width: 44px;
  }

  /* Form inputs */
  input, select, textarea {
    min-height: 48px;
    font-size: 16px !important; /* Prevent iOS zoom */
  }

  /* Spacing between interactive elements */
  .mobile-nav-link {
    min-height: 48px;
    padding: 16px 24px;
  }

  /* Disable hover effects on touch devices */
  .pc:hover,
  .fb-card:hover,
  .intent-card:hover,
  .step-item:hover,
  .ss-bento-card:hover,
  .ss-story:hover,
  .ss-plan-card:hover,
  .ak-bento-card:hover,
  .ak-insight-card:hover,
  .ak-upsell-card:hover {
    transform: none !important;
  }

  /* Tab bars and chips */
  .ss-chip {
    min-height: 44px;
    padding: 10px 16px;
  }
}

/* ═══════════════════════════════════════════════
   ORIENTATION: LANDSCAPE PHONE
   Prevent hero from consuming too much height
   ═══════════════════════════════════════════════ */
@media (max-height: 500px) and (orientation: landscape) {
  #hero,
  #ss-hero,
  .ak-hero {
    min-height: auto;
    padding-top: 80px;
    padding-bottom: 40px;
  }

  .hero-chart-bg {
    display: none;
  }

  section {
    padding: 32px 0;
  }

  /* Reduce scroll hint */
  .ss-scroll-hint,
  .ak-hero-scroll {
    display: none;
  }
}

/* ═══════════════════════════════════════════════
   PERFORMANCE: MOBILE GPU OPTIMIZATION
   Disable heavy effects on low-power devices
   ═══════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Reduce backdrop-filter intensity */
  .glass-card,
  .ss-bento-card,
  .ss-plan-card,
  .ak-bento-card {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  /* Mesh orbs — reduce for performance */
  .mesh-orb {
    filter: blur(60px);
  }
  .orb-1 {
    width: 300px;
    height: 300px;
    animation-duration: 40s;
  }
  .orb-2 {
    width: 250px;
    height: 250px;
    animation-duration: 50s;
  }
  .orb-3 {
    width: 200px;
    height: 200px;
    animation-duration: 35s;
  }
  .orb-4, .orb-5 {
    display: none;
  }

  /* SoulSync nebulas reduce */
  .ss-nebula-1 { width: 300px; height: 300px; filter: blur(60px); }
  .ss-nebula-2 { width: 250px; height: 250px; filter: blur(60px); }
  .ss-nebula-3 { width: 350px; height: 350px; filter: blur(60px); }

  /* Disable expensive continuous animations */
  .zodiac-rotate,
  .yantra-spin,
  .sacred-geo-spin,
  .ss-planet-orbit,
  .ss-ring-shimmer,
  .ss-dna-strand,
  .ss-spin-slow,
  .ss-spin-reverse,
  .anim-float,
  .anim-float-slow,
  .ak-sg-r1, .ak-sg-r2, .ak-sg-r3,
  .ak-sg-t1, .ak-sg-t2 {
    animation: none !important;
  }

  /* Shimmer buttons simplified */
  .shimmer-btn::before,
  .cta-btn::before,
  .btn-glow::before {
    animation: none;
    display: none;
  }

  /* Stars canvas reduced */
  #stars-canvas {
    opacity: 0.3;
  }

  /* Contain heavy paint areas */
  /* NOTE: #pricing excluded — contain:layout clips absolute-positioned badges */
  #demo, #birth-input, #intent,
  #ss-features, #ss-demo, #ss-pricing {
    contain: layout style;
  }

  /* Reduce connector decoration animations */
  .ig-node-ring,
  .ig-connector-pulse,
  .ss-connector-dot {
    animation: none;
  }

  /* Particle canvases lighter */
  #ss-particles,
  .ak-particles {
    opacity: 0.25;
  }
}

/* ═══════════════════════════════════════════════
   iOS SAFE AREA SUPPORT
   Support for devices with notch/dynamic island
   ═══════════════════════════════════════════════ */
@supports (padding-top: env(safe-area-inset-top)) {
  /* Fixed nav accounts for safe area */
  #nav {
    padding-top: max(12px, env(safe-area-inset-top));
  }
  #ss-nav {
    padding-top: max(12px, env(safe-area-inset-top));
  }
  .ak-nav {
    padding-top: max(12px, env(safe-area-inset-top));
  }
}

@supports (padding-bottom: env(safe-area-inset-bottom)) {
  /* Bottom-fixed elements */
  .mobile-nav-drawer,
  .cart-drawer,
  .ak-sticky-cta,
  .ss-wizard-modal,
  .ak-cart-drawer,
  footer,
  #ss-footer,
  .ak-footer {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* ═══════════════════════════════════════════════
   ACCESSIBILITY: Reduced Motion Support
   ═══════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════════════════════════════════════════
   RESPONSIVE NAVIGATION SYSTEM
   Desktop → Tablet → Mobile adaptive nav
   ═══════════════════════════════════════════════ */

/* Tablet: 769px–1024px → Partial collapse */
@media (max-width: 1024px) and (min-width: 769px) {
  /* Hide "Your Future" dropdown on small laptops */
  .nav-dropdown-wrap {
    display: none;
  }

  /* SoulSync nav condensed */
  .ss-nav-r {
    gap: 16px;
  }

  /* ForYou nav links hidden */
  .ak-nav-center {
    gap: 16px;
  }
}

/* Mobile: ≤768px → Hamburger menu */
@media (max-width: 768px) {
  /* Hide all desktop nav items */
  .nav-link,
  .nav-link-icon,
  .nav-cta-wrap,
  .nav-dropdown-wrap {
    display: none !important;
  }

  /* Show hamburger */
  .mobile-hamburger {
    display: flex;
    order: 10;
  }

  /* Mobile drawer */
  .mobile-nav-drawer {
    display: flex;
    flex-direction: column;
  }
  .mobile-nav-backdrop {
    display: block;
    pointer-events: none;
  }
  .mobile-nav-backdrop.visible {
    pointer-events: auto;
  }

  /* SoulSync nav mobile */
  .ss-nav-link {
    display: none;
  }
  .ss-cta-btn {
    display: none;
  }

  /* ForYou nav mobile */
  .ak-nav-center {
    display: none;
  }

  /* Keep essential nav elements */
  .nav-r {
    gap: 12px;
  }
}

/* ═══════════════════════════════════════════════
   RESPONSIVE IMAGES WITH ART DIRECTION
   ═══════════════════════════════════════════════ */
.responsive-img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Maintain aspect ratios */
.aspect-16-9 {
  aspect-ratio: 16/9;
}
.aspect-4-3 {
  aspect-ratio: 4/3;
}
.aspect-1-1 {
  aspect-ratio: 1/1;
}

/* Image scaling for different breakpoints */
@media (max-width: 768px) {
  .hero-chart-bg,
  .ss-cosmic-ring-svg {
    max-width: 320px;
  }

  .ss-hero-right {
    max-width: 300px;
    margin: 0 auto;
  }

  /* Demo chart containment */
  .demo-chart-wrap {
    max-width: 280px;
    margin: 0 auto;
  }
}

/* ═══════════════════════════════════════════════
   SOULSYNC DASHBOARD — Responsive Grid
   ═══════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Dashboard sidebar collapse */
  .ssd-sidebar {
    position: fixed;
    left: -100%;
    width: 80vw;
    max-width: 320px;
    z-index: 200;
    transition: left 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .ssd-sidebar.open {
    left: 0;
  }
  .ssd-main {
    width: 100%;
    padding: 16px;
  }

  /* Feature tabs horizontal scroll */
  .ssd-feature-tab {
    min-height: 40px;
    display: flex;
    align-items: center;
  }

  /* Video self smaller */
  .ssd-video-self {
    width: 80px;
    height: 110px;
    top: 8px;
    right: 8px;
  }

  /* Video buttons touch-friendly */
  .ssd-video-btn {
    width: 48px;
    height: 48px;
    min-width: 48px;
  }

  /* Cosmic map responsive */
  .ssd-cosmic-map-wrap {
    height: auto;
    aspect-ratio: 4/3;
    min-height: 260px;
  }
}

/* ═══════════════════════════════════════════════
   AUTH PAGE — Responsive
   ═══════════════════════════════════════════════ */
@media (max-width: 640px) {
  .auth-container {
    padding: 16px;
    max-width: 100%;
  }

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

  /* Profile menu positioning */
  .profile-menu {
    right: -60px;
    min-width: 260px;
  }
}

/* ═══════════════════════════════════════════════
   CHECKOUT PAGE — Responsive
   ═══════════════════════════════════════════════ */
@media (max-width: 768px) {
  .checkout-grid {
    grid-template-columns: 1fr;
  }

  .checkout-sidebar {
    position: static;
  }

  /* CTA at bottom on mobile */
  .checkout-mobile-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
    padding: 12px 16px;
    background: rgba(10, 6, 24, 0.95);
    backdrop-filter: blur(20px);
    border-top: 1px solid var(--border, rgba(124,58,237,0.12));
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
}

/* ═══════════════════════════════════════════════
   ACCOUNT PAGE — Responsive
   ═══════════════════════════════════════════════ */
@media (max-width: 768px) {
  .ac-layout {
    grid-template-columns: 1fr;
  }

  .ac-sidebar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
    border-top: 1px solid rgba(255,255,255,0.06);
    border-radius: 0;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .ac-nav-items {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    gap: 0;
    scrollbar-width: none;
  }
  .ac-nav-items::-webkit-scrollbar {
    display: none;
  }

  .ac-nav-item {
    flex-shrink: 0;
    min-height: 48px;
    text-align: center;
    font-size: 11px;
    flex-direction: column;
    gap: 4px;
  }
}

/* ═══════════════════════════════════════════════
   COSMIC DASHBOARD — Responsive  
   ═══════════════════════════════════════════════ */
@media (max-width: 768px) {
  .cd-sidebar {
    display: none;
  }
  .cd-main {
    width: 100%;
  }
  .cd-insight-grid {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════
   PRINT STYLES — Clean printable output
   ═══════════════════════════════════════════════ */
@media print {
  #mesh-bg,
  #stars-canvas,
  #urgency-banner,
  .splash-screen,
  .mobile-hamburger,
  .mobile-nav-drawer,
  .mobile-nav-backdrop,
  .demo-particles-canvas,
  .ss-bg-grid,
  #ss-particles,
  .ss-nebula,
  .ak-ambient,
  .ak-particles,
  .ak-ceremony,
  .ak-capsule,
  .ak-whisperer,
  .ak-sticky-cta,
  .ak-scarcity,
  .ak-transit-widget {
    display: none !important;
  }

  body {
    background: white !important;
    color: #111 !important;
  }

  .glass-card,
  .ss-bento-card,
  .ak-bento-card {
    backdrop-filter: none !important;
    background: #f5f5f5 !important;
    border: 1px solid #ddd !important;
  }
}

/* ═══════════════════════════════════════════════
   FORYU HERO SPLIT LAYOUT — Responsive
   ═══════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .ak-hero-split {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .ak-hero-visual {
    order: -1;
  }
  .ak-hero-content {
    text-align: center;
  }
}

/* ═══════════════════════════════════════════════
   FORYU CATEGORY NAV — Responsive
   Horizontal scroll on small screens
   ═══════════════════════════════════════════════ */
@media (max-width: 768px) {
  .ak-category-nav {
    top: auto;
    position: relative;
    padding: 16px 0;
  }

  .ak-category-scroll {
    justify-content: flex-start;
    gap: 12px;
    scroll-snap-type: x mandatory;
  }

  .ak-cat-card {
    scroll-snap-align: center;
    flex-shrink: 0;
  }
}

/* ═══════════════════════════════════════════════
   FORYU PRODUCT CARDS — Responsive  
   ═══════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Disable 3D transforms on mobile */
  .ak-product-grid {
    perspective: none;
  }
  .ak-pcard {
    transform-style: flat !important;
  }
  .ak-pcard:hover {
    transform: none !important;
  }

  /* Product image Ken Burns disabled */
  .ak-pcard-img-default {
    animation: none !important;
  }
}

/* ═══════════════════════════════════════════════
   FORYU CART MODAL — Responsive
   Full-screen bottom sheet on mobile
   ═══════════════════════════════════════════════ */
@media (max-width: 720px) {
  .ak-cart-drawer {
    width: 100vw;
    max-height: 94vh;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    transform: translateY(100%);
    border-radius: 22px 22px 0 0;
  }
  .ak-cart-drawer.open {
    transform: translateY(0);
    animation: none;
  }
  .ak-cart-scroll {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }
  .ak-cart-items {
    border-right: none;
    border-bottom: 1px solid rgba(212,175,55,0.06);
  }
  .ak-cart-footer {
    min-height: auto;
  }
}

/* ═══════════════════════════════════════════════
   SOULSYNC WIZARD — Responsive
   Bottom sheet on mobile
   ═══════════════════════════════════════════════ */
@media (max-width: 640px) {
  .ss-wizard-modal {
    border-radius: 20px 20px 0 0;
    max-height: 95vh;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .ss-photo-slot {
    min-height: 100px;
  }
  .ss-wiz-btn-next,
  .ss-wiz-btn-back {
    min-height: 48px;
  }
  .ss-wizard-close {
    width: 44px;
    height: 44px;
  }
}

@media (max-width: 375px) {
  .ss-wizard-modal {
    max-width: 100vw;
    width: 100vw;
    border-radius: 16px 16px 0 0;
  }
  .ss-wiz-step {
    padding: 0 14px;
  }
  .ss-wiz-nav {
    padding: 12px 14px 20px;
  }
  .ss-wiz-photo-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ═══════════════════════════════════════════════
   SPLASH SCREEN — Progressive performance
   ═══════════════════════════════════════════════ */
@media (max-width: 768px) {
  .splash-screen {
    transition-duration: 0.4s !important;
  }
  .splash-constellation {
    width: 120px;
    height: 120px;
  }
  .splash-text {
    font-size: 28px;
  }
  .splash-tagline {
    font-size: 13px;
  }
  .splash-ring-1,
  .splash-ring-2 {
    animation: none !important;
  }
}

/* ═══════════════════════════════════════════════
   VIRAL SHARE + LEGAL — Responsive
   ═══════════════════════════════════════════════ */
@media (max-width: 640px) {
  .viral-share-btn {
    min-height: 44px;
    padding: 10px 18px;
    font-size: 13px;
    width: 100%;
    justify-content: center;
  }

  .legal-wrap {
    padding: 32px 16px 48px;
  }
  .legal-toc {
    padding: 16px 18px;
  }
  .legal-nav-links {
    display: none;
  }
}

/* ═══════════════════════════════════════════════
   FORYU HERO + COLLECTION — Mobile Adjustments
   ═══════════════════════════════════════════════ */
@media (max-width: 600px) {
  .ak-hero {
    padding: 260px 0 32px;
  }
  .ak-hero-match-badge {
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 18px;
  }
  .ak-hmb-ring {
    width: 44px;
    height: 44px;
    font-size: 13px;
  }

  /* Category cards horizontal scroll */
  .ak-category-scroll {
    padding: 0 12px;
    gap: 10px;
  }

  /* Product grid 1 col */
  .ak-product-grid {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }

  /* Upsell cards single col */
  .ak-upsell-grid {
    grid-template-columns: 1fr;
  }

  /* Reviews stack */
  .ak-reviews {
    flex-direction: column;
    align-items: center;
  }
  .ak-review {
    max-width: 100%;
  }

  /* Social proof compact */
  .ak-social-card {
    padding: 12px 18px;
    gap: 10px;
  }

  /* Section padding tight */
  .ak-collection,
  .ak-pillars,
  .ak-ritual,
  .ak-synastry,
  .ak-provenance {
    padding: 36px 0;
  }

  /* Synastry inputs single col */
  .ak-synastry-inputs {
    grid-template-columns: 1fr;
  }

  /* Trinity visual responsive */
  .ak-trinity-visual {
    flex-wrap: wrap;
    gap: 16px;
  }
  .ak-trinity-node {
    width: 80px;
    height: 80px;
  }
}