/* ==========================================================================
   SUPER SAMRAT FIRE WORKS - Responsive Stylesheet
   Mobile, Tablet & Large Display Breakpoints
   ========================================================================== */

/* Tablet & Smaller Laptops (Max Width: 1024px) */
@media screen and (max-width: 1024px) {
  .hero-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
  }

  .categories-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  .safety-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .about-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .contact-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .console-inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
  }
}

/* Tablets & Large Phones (Max Width: 768px) */
@media screen and (max-width: 768px) {
  .navbar {
    padding: 1rem 0;
  }

  .mobile-nav-toggle {
    display: block;
    z-index: 105;
  }

  /* Fullscreen Slide-in Mobile Drawer */
  .nav-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    max-width: 360px;
    height: 100vh;
    background: rgba(5, 9, 23, 0.96);
    backdrop-filter: blur(25px);
    border-left: 1px solid var(--gold-border);
    flex-direction: column;
    align-items: flex-start;
    padding: 6rem 2.5rem 3rem 2.5rem;
    gap: 1.5rem;
    transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: -15px 0 40px rgba(0, 0, 0, 0.9);
    z-index: 102;
  }

  .nav-menu.mobile-open {
    right: 0;
  }

  .nav-link {
    font-size: 1.1rem;
    width: 100%;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  .hero-section {
    padding: 7rem 0 4rem 0;
  }

  .hero-crest-badge {
    padding: 0.4rem 1rem;
    margin-bottom: 1.5rem;
  }

  .hero-title {
    font-size: 2.5rem;
  }

  .hero-cta-group {
    flex-direction: column;
    width: 100%;
    gap: 1rem;
  }

  .hero-cta-group .btn {
    width: 100%;
  }

  .categories-grid {
    grid-template-columns: 1fr;
  }

  .events-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .safety-grid {
    grid-template-columns: 1fr;
  }

  .form-group-row {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }

  .footer-legal {
    margin-top: 0.5rem;
  }
}

/* Small Phones (Max Width: 480px) */
@media screen and (max-width: 480px) {
  .hero-stats-grid {
    grid-template-columns: 1fr;
  }

  .stat-number {
    font-size: 1.9rem;
  }

  .console-card {
    padding: 1.5rem;
  }

  .console-controls-grid {
    grid-template-columns: 1fr;
  }

  .about-pillars {
    grid-template-columns: 1fr;
  }

  .contact-form-card {
    padding: 1.8rem 1.4rem;
  }

  .modal-box {
    padding: 0;
  }

  .modal-header {
    padding: 1.2rem 1.4rem;
  }

  .modal-body {
    padding: 1.4rem;
  }
}

/* Specialist Section & Occasions Responsive Tweaks */
@media screen and (max-width: 1024px) {
  .specialist-hero-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .four-occasions-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
  .catalog-pillars {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 768px) {
  .top-contact-inner {
    flex-direction: column;
    text-align: center;
    gap: 0.4rem;
  }
  .top-contact-left, .top-contact-right {
    justify-content: center;
  }
  .catalog-pillars {
    grid-template-columns: 1fr;
  }
  .four-occasions-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .card-direct-actions {
    flex-direction: column;
  }
  .floating-contact-bar {
    bottom: 16px;
    right: 16px;
    gap: 0.5rem;
  }
  .floating-btn {
    padding: 0.6rem 0.95rem;
    font-size: 0.8rem;
  }
}

@media screen and (max-width: 480px) {
  .top-contact-bar {
    display: none; /* Keep mobile view clean since floating buttons handle call/WhatsApp */
  }
}
/* Focused navigation, cinematic show and live simulator refinements */
section[id] { scroll-margin-top: 125px; }
.nav-container { max-width: 1500px; gap: 20px; }
.nav-menu { gap: clamp(12px, 1.3vw, 22px); min-width: 0; }
.nav-link { white-space: nowrap; font-size: 11px; letter-spacing: .045em; }
.brand-title { font-size: 18px; }
.brand-subtitle { font-size: 9px; }
.nav-actions { gap: 8px; }
.nav-action-btn { padding: 10px 12px; font-size: 11px; letter-spacing: .03em; }
.audio-toggle-btn { font-size: 10px; padding: 8px 10px; white-space: nowrap; }
.top-contact-strip { font-size: 10px; }
.specialist-section .section-subtitle { max-width: 660px; margin-inline: auto; }
.cinematic-show { position: relative; min-height: 580px; overflow: hidden; border-radius: 24px; border: 1px solid rgba(212,175,55,.5); background: radial-gradient(ellipse at 50% 35%, #163966 0, #091a36 38%, #030814 80%); box-shadow: 0 30px 70px #0009, inset 0 0 70px #1772c52b; isolation: isolate; }
.cinematic-sky { position: absolute; inset: 0; background-image: radial-gradient(circle, #fff9 1px, transparent 1.5px); background-size: 57px 73px; opacity: .7; }
.show-star { position: absolute; width: 150px; height: 150px; border-radius: 50%; background: repeating-conic-gradient(from 3deg, transparent 0deg 14deg, #f5d77f 15deg 16deg, transparent 17deg 23deg); mask-image: radial-gradient(circle, transparent 12%, #000 16% 20%, transparent 25% 30%, #000 35% 38%, transparent 42% 46%, #000 50% 53%, transparent 58%); filter: drop-shadow(0 0 8px #f5d77f); }
.star-one { left: 8%; top: 8%; } .star-two { right: 3%; top: 20%; transform: scale(.7); } .star-three { left: 43%; top: 0; transform: scale(.45); background-color: #378eff; }
.stage-arch { position: absolute; width: 60%; height: 52%; top: 23%; left: 20%; border: 2px solid #e4c77588; border-bottom: 0; border-radius: 50% 50% 0 0; box-shadow: 0 0 35px #2196ff33, inset 0 0 30px #2196ff22; }
.stage-floor { position: absolute; width: 140%; height: 40%; bottom: -8%; left: -20%; background: repeating-linear-gradient(90deg, transparent 0 49px, #4a92e322 50px 51px), repeating-linear-gradient(0deg, transparent 0 35px, #4a92e333 36px 37px); transform: perspective(300px) rotateX(55deg); }
.spark-fountain { position: absolute; top: 30%; width: 75px; height: 220px; background: repeating-conic-gradient(from -12deg at 50% 100%, transparent 0 3deg, #ffe9acdd 4deg 5deg, transparent 6deg 10deg); clip-path: polygon(0 0,100% 0,55% 100%,45% 100%); filter: drop-shadow(0 0 10px #e4c775); opacity: .65; }
.fountain-left { left: 10%; } .fountain-right { right: 10%; }
.cinematic-caption { position: absolute; inset: auto 0 0; padding: 100px 30px 32px; background: linear-gradient(transparent, #040b19 35%); text-align: center; }
.cinematic-caption h3 { font-size: clamp(26px, 3vw, 38px); line-height: 1.3; margin-bottom: 15px; }.cinematic-caption p { color: #a9bed8; font-size: 12px; margin-bottom: 24px; }.cinematic-actions { display:flex; justify-content:center; gap:12px; }.cinematic-actions .btn { font-size: 11px; padding: 12px 20px; }
.console-card { background: radial-gradient(ellipse at 80% 20%, #12386a66, transparent 65%), #081329ed; border-color: #bb9c5366; padding: 32px; }
.console-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 32px; align-items: center; }
.console-info { min-width: 0; }.console-info h3 { font-size: clamp(24px, 2.5vw, 34px); line-height: 1.25; }.console-info > p { color: #a8bdd5; }
.console-controls-grid { grid-template-columns: minmax(0,1fr); gap: 20px; }.shell-select { width:100%; min-width:0; font-size:13px; }.palette-label { display:block; color: var(--gold-light); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; margin-bottom:12px; }.color-pills-row { flex-wrap:wrap; gap:12px; }.color-dot-btn { flex-shrink:0; width:30px; height:30px; }.color-dot-btn.active { outline:2px solid #fff0b5; outline-offset:4px; }
.console-actions { display:flex; flex-wrap:wrap; gap:12px; }.console-actions .btn { font-size:11px; padding:14px 18px; letter-spacing:.04em; }.console-actions .btn-glass { border-color:#4d99d9; background:#123d68; }
.console-visual-preview { position:relative; min-width:0; height:460px; border:1px solid #3c76b566; border-radius:18px; overflow:hidden; background:radial-gradient(ellipse at 50% 100%, #123461, #020611 75%); box-shadow: inset 0 0 70px #0008, 0 15px 35px #0006; }
#simulator-canvas { display:block; width:100%; height:100%; cursor:crosshair; touch-action:pan-y; }
.sky-status { position:absolute; top:18px; left:18px; display:flex; align-items:center; gap:8px; color:#d9e9fa; font-size:11px; pointer-events:none; }.live-dot { width:6px; height:6px; border-radius:50%; background:#74d9ff; box-shadow:0 0 12px #74d9ff; }.sky-caption { position:absolute; bottom:20px; left:0; right:0; text-align:center; pointer-events:none; }.sky-caption span { color:#e3cc8d; font-size:10px; letter-spacing:.2em; }.sky-caption p { margin:7px 0 0; font-size:11px; color:#92a7bf; }
button:focus-visible,a:focus-visible,canvas:focus-visible { outline:2px solid #8fcfff; outline-offset:5px; }button:disabled { opacity:.5; cursor:not-allowed; }
@media (max-width:1250px) { .nav-btn-wa { display:none; }.nav-container { gap:12px; }.nav-menu { gap:12px; }.brand-title { font-size:16px; }.nav-logo-emblem { width:36px; height:36px; }.top-strip-left .strip-location { display:none; } }
@media (min-width:1001px) { .nav-menu.mobile-open { position:static; }.mobile-drawer-footer { display:none; } }
@media (max-width:1000px) { .mobile-nav-toggle { display:block; position:relative; z-index:105; }.nav-menu { position:fixed; top:0; right:-100%; width:min(85vw,360px); height:100dvh; overflow-y:auto; background:#071225; border-left:1px solid #a98b4c66; flex-direction:column; align-items:stretch; padding:90px 25px 30px; gap:8px; transition:right .3s; z-index:102; }.nav-menu.mobile-open { right:0; }.nav-link { display:block; font-size:13px; padding:12px 0; }.mobile-drawer-footer { display:block; }.top-strip-left .strip-sep { display:none; }.console-inner { grid-template-columns:1fr; }.console-visual-preview { height:420px; }.cinematic-show { min-height:540px; } }
@media (max-width:600px) { .top-strip-left { display:none; }.top-strip-container { justify-content:center; }.top-strip-right { gap:10px; }.strip-wa-pill { display:none; }.nav-actions .nav-action-btn { display:none; }.nav-container { gap:8px; }.brand-title { font-size:15px; }.brand-subtitle { font-size:8px; }.audio-toggle-btn { padding:7px; }.console-card { padding:20px 16px; }.console-inner { gap:24px; }.console-visual-preview { height:340px; }.console-actions .btn { width:100%; }.cinematic-show { min-height:500px; }.cinematic-caption { padding-inline:18px; }.cinematic-caption .section-tag { font-size:9px; }.cinematic-actions .btn { padding:12px 18px; }section[id] { scroll-margin-top:105px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none !important; transition:none !important; } }
html { overflow-x: clip; }
@media (max-width:1000px) {
  .nav-menu { right:0; transform:translateX(105%); visibility:hidden; transition:transform .3s ease,visibility .3s; }
  .nav-menu.mobile-open { transform:translateX(0); visibility:visible; }
  .mobile-drawer-btns { display:grid; gap:10px; }.mobile-drawer-btns .btn { width:100%; }
}

/* Vertical page layers: keep section sizing independent from inner card grids. */
#main-content {
  display: block;
  width: 100%;
  min-width: 0;
}
#main-content > section {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  clear: both;
  float: none;
  width: 100%;
  max-width: none;
  min-width: 0;
  height: auto;
  min-height: 90svh;
  margin: 0;
  padding: clamp(88px, 9vw, 144px) 0;
  border-top: 1px solid rgba(212, 175, 55, .18);
  background: linear-gradient(145deg, rgba(5, 12, 28, .88), rgba(8, 22, 46, .76));
}
#main-content > section:nth-child(even) {
  background: radial-gradient(ellipse at 85% 15%, rgba(24, 76, 132, .2), transparent 60%), rgba(4, 10, 24, .9);
}
#main-content > .hero-section {
  min-height: 100svh;
  padding-top: clamp(160px, 15vw, 210px);
  border-top: 0;
  background: radial-gradient(ellipse at 50% 35%, rgba(16, 51, 96, .28), transparent 70%);
}
#main-content > section > .container {
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 48px);
}
#main-content .section-heading-wrapper {
  width: 100%;
  max-width: 800px;
  margin: 0 auto clamp(40px, 5vw, 72px);
}
#main-content .section-title,
#main-content h3,
#main-content p {
  overflow-wrap: break-word;
}
.categories-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.events-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.safety-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.four-occasions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.about-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.contact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.specialist-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.categories-grid, .events-grid, .four-occasions-grid, .safety-grid {
  gap: clamp(24px, 3vw, 40px);
  width: 100%;
}
.categories-grid > *, .events-grid > *, .four-occasions-grid > *,
.safety-grid > *, .specialist-hero-grid > *, .about-grid > *,
.contact-grid > *, .catalog-pillars > *, .form-group-row > * {
  min-width: 0;
  max-width: 100%;
}
.catalog-pillars { grid-template-columns: 1fr; }
.catalog-pillar-card { display: flex; align-items: flex-start; gap: 16px; }
.catalog-pillar-icon { flex: 0 0 auto; }
.events-tabs, .hero-cta-group, .cinematic-actions { flex-wrap: wrap; }
.event-tab-btn { white-space: normal; }
.contact-info-card, .contact-form-card, .about-visual-card {
  padding: clamp(24px, 3vw, 44px);
}
.detail-val, .footer-hours-list a { overflow-wrap: anywhere; }
#main-content > .contact-section { padding-bottom: 120px; }
@media (max-width: 1100px) {
  .categories-grid, .safety-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .specialist-hero-grid, .about-grid, .contact-grid, .console-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  .cinematic-show { min-height: 580px; }
  .console-visual-preview { height: 440px; }
}
@media (max-width: 700px) {
  #main-content > section {
    min-height: 85svh;
    padding-block: 72px;
  }
  #main-content > .hero-section { min-height: 100svh; padding-top: 150px; }
  .categories-grid, .events-grid, .four-occasions-grid, .safety-grid,
  .form-group-row, .about-pillars { grid-template-columns: minmax(0, 1fr); }
  .specialist-hero-grid, .about-grid, .contact-grid, .console-inner { gap: 28px; }
  .hero-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-title { font-size: clamp(2rem, 8vw, 3rem); }
  .hero-crest-badge span { font-size: 10px; letter-spacing: .06em; }
  .section-tag { max-width: 100%; font-size: 10px; letter-spacing: .08em; }
  .section-title { font-size: clamp(26px, 7vw, 36px); }
  .cinematic-show { min-height: 520px; }
  .event-card-body, .card-content { padding: 24px; }
  .console-visual-preview { height: 360px; }
  .console-actions .btn { width: 100%; }
}
@media (max-width: 380px) {
  .hero-stats-grid { grid-template-columns: minmax(0, 1fr); }
  .cinematic-actions { flex-direction: column; }
  .cinematic-show { min-height: 560px; }
}
@media (max-width: 480px) {
  .hero-stats-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-stat-card { min-width: 0; }
  .stat-number, .stat-label { overflow-wrap: anywhere; }
}