/*
Theme Name: Solar Gard Ultra-Luxury PPF
Theme URI: https://example.com/
Author: Solar Gard
Description: Clean editorial catalogue with restrained blue-to-black accents.
Version: 3.0.0
License: GPL-2.0-or-later
Text Domain: solar-gard-ppf
*/
/* SOLAR GARD video grid: native CSS so all video cards render independently of Tailwind. */
.aura-video-grid{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:1.5rem;align-items:start;}
.aura-video-card{min-width:0;}
.aura-video-frame{position:relative;width:100%;aspect-ratio:16/9;background:var(--sg-ink);border-radius:1rem;overflow:hidden;}
.aura-video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;}
.aura-video-error{display:flex;align-items:center;justify-content:center;min-height:240px;padding:1rem;text-align:center;background:var(--sg-ink);color:var(--sg-muted);border-radius:1rem;font-size:.9rem;}
.aura-video-social{width:100%;min-height:320px;display:flex;justify-content:center;align-items:flex-start;background:var(--sg-ink);border-radius:1rem;overflow:hidden;}
@media (min-width:768px){.aura-video-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (min-width:1024px){.aura-video-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}



/* Mobile-safe video presentation: show all 6 cards, load YouTube only when tapped. */
.aura-video-mobile-preview{display:none;position:relative;width:100%;aspect-ratio:16/9;background:var(--sg-ink);border-radius:1rem;overflow:hidden;cursor:pointer;isolation:isolate;}
.aura-video-mobile-preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.aura-video-mobile-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.6));z-index:1;}
.aura-video-mobile-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;width:58px;height:58px;border-radius:999px;display:grid;place-items:center;background:var(--sg-gradient);color:var(--sg-ink);font-size:22px;padding-left:3px;box-shadow:0 12px 28px rgba(0,0,0,.35);}
.aura-video-mobile-preview.is-playing{display:none!important;}
@media (max-width:767px){
  .aura-video-grid{display:grid!important;grid-template-columns:1fr!important;gap:20px!important;width:100%!important;overflow:visible!important;}
  .aura-video-card{display:block!important;visibility:visible!important;opacity:1!important;width:100%!important;min-width:0!important;}
  .aura-video-frame{display:block!important;width:100%!important;height:auto!important;aspect-ratio:16/9!important;}
  .aura-video-mobile-preview{display:block;}
  .aura-video-mobile-preview + .aura-video-frame{display:none!important;}
  .aura-video-mobile-preview.is-playing + .aura-video-frame{display:block!important;}
  .aura-video-card .aura-video-mobile-preview + .aura-video-frame iframe{width:100%!important;height:100%!important;min-height:0!important;}
}

/* =========================================================
   SOLAR GARD — VIDEO GRID
   Desktop: 3 videos per row
   Mobile: 2 videos per row
   ========================================================= */

/* Make the YouTube/video collection use the full available width. */
#videos .grid,
#videos .aura-video-grid,
#videos .video-grid,
#videos .videos-grid{
  width:100%;
  max-width:none;
}

/* Desktop + tablet: 3 columns so 6 videos form exactly 2 rows. */
@media (min-width:768px){
  #videos .grid,
  #videos .aura-video-grid,
  #videos .video-grid,
  #videos .videos-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:24px!important;
    width:100%!important;
    max-width:none!important;
  }

  #videos .aura-video-card{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
  }

  #videos .aura-video-frame,
  #videos .aura-video-social{
    width:100%!important;
    max-width:none!important;
  }
}

/* Mobile: exactly 2 columns, filling the screen cleanly. */
@media (max-width:767px){
  #videos .grid,
  #videos .aura-video-grid,
  #videos .video-grid,
  #videos .videos-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:12px!important;
    width:100%!important;
  }

  #videos .aura-video-card{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    margin:0!important;
    border-radius:12px!important;
  }

  #videos .aura-video-frame,
  #videos .aura-video-social,
  #videos .aura-video-mobile-preview{
    width:100%!important;
    max-width:none!important;
  }
}

/* Prevent an old flex/width rule from forcing cards onto one line. */
#videos .aura-video-card{
  box-sizing:border-box;
}


/* =========================================================
   SOLAR GARD — YOUTUBE PLAYER ONLY
   Hide YouTube thumbnail/preview layers.
   Keep the actual YouTube iframe/player visible.
   ========================================================= */

/* Thumbnail/preview layers used by the theme */
#videos .youtube-thumbnail,
#videos .youtube-thumb,
#videos .video-thumbnail,
#videos .video-thumb,
#videos .thumbnail-preview,
#videos .aura-video-thumbnail,
#videos .aura-youtube-thumbnail,
#videos .aura-video-mobile-preview{
  display:none!important;
}

/* If the thumbnail is an image inside a preview wrapper, hide only
   the preview image/wrapper, never the iframe. */
#videos .youtube-preview,
#videos .video-preview,
#videos .aura-video-preview{
  display:none!important;
}

/* Make the actual YouTube iframe occupy the card immediately. */
#videos iframe[src*="youtube.com"],
#videos iframe[src*="youtube-nocookie.com"]{
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-height:180px;
  border:0!important;
  visibility:visible!important;
  opacity:1!important;
}

/* Remove extra top spacing that may have belonged to a thumbnail. */
#videos .aura-video-card > .aura-video-thumbnail + iframe,
#videos .aura-video-card > .aura-video-preview + iframe{
  margin-top:0!important;
}


/* =========================================================
   SOLAR GARD — MOBILE YOUTUBE SIZE ONLY
   Keep 2 columns, make each video use the available screen width.
   ========================================================= */
@media (max-width:767px){
  #videos .grid,
  #videos .aura-video-grid,
  #videos .video-grid,
  #videos .videos-grid{
    width:calc(100% + 24px)!important;
    margin-left:-12px!important;
    margin-right:-12px!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }

  #videos .aura-video-card{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    border-radius:10px!important;
    overflow:hidden!important;
  }

  #videos iframe[src*="youtube.com"],
  #videos iframe[src*="youtube-nocookie.com"]{
    width:100%!important;
    min-width:100%!important;
    height:auto!important;
    aspect-ratio:16/9!important;
    min-height:0!important;
    display:block!important;
  }

  #videos .aura-video-frame{
    width:100%!important;
    aspect-ratio:16/9!important;
    min-height:0!important;
    height:auto!important;
  }
}

/* Single synchronized hero information panel under the active image. */
#hero-info-panel{
  opacity:1;
}
@media (prefers-reduced-motion: reduce){
  #hero-info-panel{
    animation:none !important;
    transform:none !important;
  }
  /* Keep the requested hero text entrance animation active. */
  .hero-copy-animate{
    animation-duration:820ms !important;
    transition:none !important;
  }
}


/* =========================================================
   SOLAR GARD — DESKTOP/TABLET VIDEO SHOWCASE + FULLSCREEN PLAYER
   One unified panel containing 3 videos per row. Clicking a video
   opens a single fullscreen modal player.
   ========================================================= */
.aura-video-showcase-panel{
  width:100%;
  padding:20px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:24px;
  background:rgba(12,14,18,.72);
  box-shadow:0 24px 70px rgba(0,0,0,.28);
}

.aura-youtube-launch{cursor:pointer;}
.aura-youtube-launch iframe{pointer-events:none;}
.aura-video-launch-button{
  position:absolute;
  inset:0;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  padding:0;
  border:0;
  background:rgba(0,0,0,0);
  cursor:pointer;
}
.aura-video-launch-button:hover{background:rgba(0,0,0,.16);}
.aura-video-launch-icon{
  width:66px;
  height:66px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:var(--sg-gradient);
  color:var(--sg-ink);
  font-size:22px;
  padding-left:3px;
  box-shadow:0 16px 36px rgba(0,0,0,.34);
  transform:scale(.96);
  transition:transform .22s ease, box-shadow .22s ease;
}
.aura-video-launch-button:hover .aura-video-launch-icon{
  transform:scale(1.04);
  box-shadow:0 20px 44px rgba(0,0,0,.42);
}

.aura-video-fullscreen-modal[hidden]{display:none!important;}
.aura-video-fullscreen-modal{
  position:fixed;
  inset:0;
  z-index:100000;
  display:grid;
  place-items:center;
  padding:24px;
  background:rgba(0,0,0,.94);
}
.aura-video-fullscreen-backdrop{position:absolute;inset:0;}
.aura-video-fullscreen-dialog{
  position:relative;
  z-index:1;
  width:min(96vw,1400px);
  max-height:92vh;
}
.aura-video-fullscreen-frame{
  width:100%;
  aspect-ratio:16/9;
  background:var(--sg-ink);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 30px 90px rgba(0,0,0,.55);
}
.aura-video-fullscreen-frame iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}
.aura-video-fullscreen-close{
  position:absolute;
  top:-16px;
  right:-16px;
  z-index:2;
  width:44px;
  height:44px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:999px;
  background:rgba(20,22,26,.92);
  color:var(--sg-paper);
  font-size:30px;
  line-height:1;
  cursor:pointer;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}

@media (min-width:768px){
  #videos .aura-video-showcase-panel .aura-video-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:22px!important;
  }
  #videos .aura-video-card{height:100%;}
  #videos .aura-video-frame{aspect-ratio:16/9!important;}
}

@media (max-width:767px){
  .aura-video-showcase-panel{padding:10px;border-radius:18px;}
  .aura-video-launch-button{display:none;}
  .aura-youtube-launch iframe{pointer-events:auto;}
  .aura-video-fullscreen-modal{display:none!important;}
}
body.aura-video-modal-open{overflow:hidden!important;}


/* =========================================================
   SOLAR GARD — DESKTOP ONLY: ONE PANEL / 3 VISIBLE VIDEOS
   Keep all videos inside one horizontal showcase panel. On
   desktop, exactly 3 video cards are visible at a time.
   Tablet/mobile rules remain untouched.
   ========================================================= */
@media (min-width:1024px){
  #videos .aura-video-showcase-panel{
    overflow:hidden;
  }
  #videos .aura-video-showcase-panel .aura-video-grid{
    display:grid!important;
    grid-template-columns:none!important;
    grid-template-rows:auto!important;
    grid-auto-flow:column!important;
    grid-auto-columns:calc((100% - 44px) / 3)!important;
    gap:22px!important;
    width:100%!important;
    max-width:none!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    padding-bottom:4px;
  }
  #videos .aura-video-showcase-panel .aura-video-grid::-webkit-scrollbar{
    display:none;
  }
  #videos .aura-video-showcase-panel .aura-video-card{
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    scroll-snap-align:start;
  }
  #videos .aura-video-showcase-panel .aura-video-launch-button{
    display:flex!important;
  }
  #videos .aura-video-showcase-panel .aura-youtube-launch iframe{
    pointer-events:none!important;
  }
}

/* FINAL DESKTOP YOUTUBE LAYOUT FIX: one panel, exactly 3 visible cards, 2 pages */
@media (min-width:1024px){
  #videos .aura-video-showcase-panel{
    position:relative!important;
    overflow:hidden!important;
    padding:22px!important;
  }

  #videos .aura-video-showcase-panel .aura-video-grid{
    display:grid!important;
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    grid-auto-flow:unset!important;
    grid-auto-columns:unset!important;
    grid-template-rows:1fr!important;
    gap:22px!important;
    width:calc(200% + 22px)!important;
    max-width:none!important;
    overflow:hidden!important;
    padding:0!important;
    margin:0!important;
    transform:translateX(0);
    transition:transform .48s cubic-bezier(.22,.61,.36,1);
  }

  #videos .aura-video-showcase-panel .aura-video-card{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    margin:0!important;
    box-sizing:border-box!important;
  }

  #videos .aura-video-showcase-panel .aura-video-frame{
    position:relative!important;
    width:100%!important;
    aspect-ratio:16/9!important;
    overflow:hidden!important;
    border-radius:16px!important;
    background:var(--sg-ink)!important;
    isolation:isolate!important;
  }

  #videos .aura-video-showcase-panel .aura-video-frame iframe{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    border:0!important;
    display:block!important;
    pointer-events:none!important;
  }

  #videos .aura-video-showcase-panel .aura-video-launch-button{
    position:absolute!important;
    inset:0!important;
    z-index:5!important;
    display:flex!important;
    width:100%!important;
    height:100%!important;
    align-items:center!important;
    justify-content:center!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
    background:transparent!important;
    cursor:pointer!important;
  }

  #videos .aura-video-showcase-panel .aura-video-launch-button:hover{
    background:rgba(0,0,0,.10)!important;
  }

  #videos .aura-video-showcase-panel .aura-video-launch-icon{
    width:64px!important;
    height:64px!important;
    font-size:21px!important;
  }

  #videos .aura-desktop-video-prev,
  #videos .aura-desktop-video-next{
    position:absolute!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    z-index:20!important;
    width:46px!important;
    height:46px!important;
    border:1px solid rgba(255,255,255,.16)!important;
    border-radius:999px!important;
    background:rgba(12,14,18,.88)!important;
    color:var(--sg-paper)!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    cursor:pointer!important;
    box-shadow:0 14px 32px rgba(0,0,0,.35)!important;
  }
  #videos .aura-desktop-video-prev{left:8px!important;}
  #videos .aura-desktop-video-next{right:8px!important;}
  #videos .aura-desktop-video-prev:hover,
  #videos .aura-desktop-video-next:hover{background:var(--sg-gradient)!important;color:var(--sg-ink)!important;}

  #videos .aura-desktop-video-nav{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:8px!important;
    margin-top:16px!important;
  }
  #videos .aura-desktop-video-dot{
    width:8px!important;
    height:8px!important;
    border:0!important;
    border-radius:999px!important;
    padding:0!important;
    background:rgba(255,255,255,.25)!important;
    cursor:pointer!important;
  }
  #videos .aura-desktop-video-dot.is-active{background:var(--aura-accent,var(--sg-navy))!important;transform:scale(1.25)!important;}
}

/* Leave tablet/mobile untouched by the desktop showcase controls. */
@media (max-width:1023px){
  .aura-desktop-video-prev,
  .aura-desktop-video-next,
  .aura-desktop-video-nav{display:none!important;}
}

/* =========================================================
   FINAL DESKTOP WIDTH FIX: make the YouTube showcase full viewport
   while keeping exactly 3 large videos visible in one panel.
   Mobile/tablet remain unchanged.
   ========================================================= */
@media (min-width:1024px){
  #videos .aura-video-showcase-panel{
    width:100vw!important;
    max-width:none!important;
    margin-left:calc((100% - 100vw)/2)!important;
    margin-right:calc((100% - 100vw)/2)!important;
    box-sizing:border-box!important;
    padding-left:clamp(28px,3vw,64px)!important;
    padding-right:clamp(28px,3vw,64px)!important;
  }

  #videos .aura-video-showcase-panel .aura-video-grid{
    width:calc(200% + 22px)!important;
    max-width:none!important;
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    gap:22px!important;
  }

  #videos .aura-video-showcase-panel .aura-video-card{
    min-width:0!important;
    width:100%!important;
  }

  #videos .aura-video-showcase-panel .aura-video-frame{
    width:100%!important;
    aspect-ratio:16/9!important;
  }
}
/* SOLAR GARD — single catalogue design system. Compatibility utilities map legacy markup to semantic roles. */
:root {
 --sg-paper:oklch(1 0 0);--sg-mist:oklch(0.984152 0.003413 247.8575);--sg-ink:oklch(0.157181 0.012564 254.0157);--sg-navy:oklch(0.356702 0.086324 253.6957);
 --sg-muted:color-mix(in oklab,var(--sg-ink) 65%,var(--sg-paper));--sg-border:color-mix(in oklab,var(--sg-ink) 10%,transparent);
 --sg-gradient:linear-gradient(145deg,var(--sg-navy),var(--sg-ink) 82%);--sg-display:'Poppins',sans-serif;--sg-body:'Poppins',sans-serif;
 --sg-radius:26px;--sg-card-radius:22px;--sg-ease:cubic-bezier(.32,.72,0,1);--aura-accent:var(--sg-navy);
}
html,body{background:var(--sg-paper)!important;color:var(--sg-ink)!important;overflow-x:clip;scroll-behavior:smooth}
body,p,a,button,input,textarea,select{font-family:var(--sg-body)!important;letter-spacing:0!important}
h1,h2,h3,h4,h5,h6,strong{font-family:var(--sg-display)!important;letter-spacing:0!important}
a,button{transition:color .2s,background .2s,border-color .2s;}
button,a,input,textarea,select{outline-offset:4px}
:focus-visible{outline:2px solid var(--sg-navy)}
section{scroll-margin-top:84px}
::selection{background:var(--sg-navy);color:var(--sg-paper)}
/* White navigation; no nested floating panel. */
#main-header{position:sticky!important;background:color-mix(in oklab,var(--sg-paper) 96%,transparent)!important;border-bottom:1px solid var(--sg-border);box-shadow:none!important}
#main-header>.max-w-7xl{max-width:1180px;padding:0 24px!important;margin:auto}
#main-header .glass-panel{background:none!important;border:0!important;box-shadow:none!important;border-radius:0!important;padding:0!important;min-height:64px;backdrop-filter:none!important}
#main-header .text-white{color:var(--sg-ink)!important;font-size:16px!important;letter-spacing:0!important;white-space:nowrap}
#main-header a[aria-label]>div:first-child{display:none}
#main-header a[aria-label] img{display:block}
#main-header a[aria-label]:has(img)>div:first-child{display:flex;width:32px;height:32px}
#main-header a[aria-label]>div:last-child>span:last-child{display:none}
#main-header nav{gap:24px!important;font-size:13px!important}
#main-header nav a{color:var(--sg-muted)!important;white-space:nowrap}
#main-header nav a:hover{color:var(--sg-navy)!important}
#main-header .relative.group.overflow-hidden{padding:0!important;border-radius:999px!important}
#main-header .relative.group.overflow-hidden>.absolute{display:none}
#main-header .relative.group.overflow-hidden>.relative{background:var(--sg-gradient)!important;color:var(--sg-paper)!important;border-radius:999px!important;font-size:13px!important;padding:10px 18px!important}
#main-header .relative.group.overflow-hidden i{display:none}
#main-header #mobile-menu-btn{color:var(--sg-ink)!important;width:44px;height:44px}
#mobile-menu{background:var(--sg-paper);max-height:75vh;overflow-y:auto}
#mobile-menu .glass-panel{padding:16px 0!important}
.sg-nav-more{position:relative;color:var(--sg-muted)}
.sg-nav-more summary{cursor:pointer;list-style:none;font-size:16px;padding:8px}
.sg-nav-more>div{position:absolute;right:0;top:100%;min-width:200px;background:var(--sg-paper);border:1px solid var(--sg-border);padding:12px;border-radius:8px}
.sg-nav-more a{display:block;padding:10px}
/* Chosen 8/4 catalogue composition and 3/3/6 statistics. */
.sg-catalogue-inner{max-width:1180px;margin:auto;padding:0 24px}
.sg-catalogue-hero{padding:48px 0 56px;background:var(--sg-paper)}
.sg-catalogue-eyebrow{font:500 11px var(--sg-display)!important;text-transform:uppercase;color:var(--sg-muted);margin:0 0 24px}
.sg-catalogue-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px}
.sg-catalogue-visual{grid-column:span 8;border-radius:var(--sg-radius);overflow:hidden;background:var(--sg-mist);min-width:0;border:1px solid var(--sg-border)}
#hero-image-carousel{width:100%!important;height:420px!important;min-height:0!important;aspect-ratio:auto!important;border:0!important;border-radius:0!important;background:var(--sg-mist)!important}
#hero-image-carousel .hero-slide{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:contain!important;filter:none!important;transform:none!important;animation:none!important;transition:opacity .45s!important}
#hero-prev,#hero-next{background:var(--sg-paper)!important;color:var(--sg-ink)!important;border:1px solid var(--sg-border)!important;box-shadow:none!important;opacity:0;transition:opacity .2s!important}
#hero-image-carousel:hover #hero-prev,#hero-image-carousel:hover #hero-next,#hero-prev:focus-visible,#hero-next:focus-visible{opacity:1}
#hero-dots .hero-dot{background:color-mix(in oklab,var(--sg-ink) 24%,transparent)!important;border:0!important;width:6px;height:6px}
#hero-dots .hero-dot.bg-white{background:var(--sg-ink)!important}
.sg-catalogue-copy{grid-column:span 4;border-radius:var(--sg-radius);padding:28px;background:var(--sg-gradient);color:var(--sg-paper);display:flex;flex-direction:column;justify-content:space-between;min-width:0}
.sg-catalogue-copy h1{font-size:48px;line-height:1.04;font-weight:700;margin:0;overflow-wrap:anywhere;color:var(--sg-paper)!important}
.sg-catalogue-actions{display:grid;gap:12px;margin-top:32px}
.sg-catalogue-actions a{display:block;text-align:center;padding:14px 12px;font-size:13px;border-radius:999px;font-weight:500}
.sg-catalogue-primary{background:var(--sg-paper);color:var(--sg-ink)}
.sg-catalogue-secondary{border:1px solid color-mix(in oklab,var(--sg-paper) 35%,transparent);color:var(--sg-paper)}
.sg-catalogue-secondary:hover{border-color:var(--sg-paper)}
.sg-catalogue-stats{grid-column:span 12;display:grid;grid-template-columns:1fr 1fr 2fr;gap:12px}
.sg-catalogue-stats>div{padding:20px;border:1px solid var(--sg-border);background:var(--sg-mist);border-radius:var(--sg-card-radius)}
.sg-catalogue-stats .text-white,.sg-catalogue-stats .text-gold-400{color:var(--sg-ink)!important;font:600 24px var(--sg-display)!important}
.sg-catalogue-stats .text-xs{color:var(--sg-muted)!important;font-size:13px!important;text-transform:none!important;margin-top:4px}
.sg-catalogue-details{margin-top:20px;font-size:12px;color:var(--sg-muted)}
.sg-catalogue-details summary{cursor:pointer;list-style:none}
.sg-catalogue-details summary:after{content:' +';color:var(--sg-navy)}
.sg-catalogue-details[open] summary:after{content:' −'}
.sg-catalogue-details p{max-width:800px;line-height:1.7;margin:12px 0}
#hero-slide-info{margin-top:16px;border:0!important;background:none!important;border-radius:0!important}
#hero-slide-info i,#hero-slide-info .shrink-0{display:none}
#hero-slide-info .text-white{color:var(--sg-ink)!important}
/* Unframed content bands. */
body>section:not(.sg-catalogue-hero){background:var(--sg-paper)!important;color:var(--sg-ink)!important;padding-top:64px!important;padding-bottom:64px!important;border:0!important}
body>section>.max-w-7xl{max-width:1180px!important;padding-left:24px!important;padding-right:24px!important}
body>section h2{font-size:32px!important;font-weight:600!important;line-height:1.2!important;color:var(--sg-ink)!important}
body>section#simulator{padding-top:0!important}
#simulator>.max-w-7xl>.text-center{max-width:none!important;text-align:left!important;margin-bottom:28px!important;border-top:1px solid var(--sg-border);padding-top:32px}
#simulator>.max-w-7xl>.text-center>p:first-child{display:none}
#simulator h2{font-size:26px!important}
#simulator>.max-w-7xl>.max-w-4xl{max-width:none!important}
#simulator #split-slider{height:440px!important;border-radius:var(--sg-card-radius)!important;border:1px solid var(--sg-border)!important;background:var(--sg-mist)!important;box-shadow:none!important}
#split-slider img{border-radius:0!important}
#simulator #slider-handle>div{background:var(--sg-gradient)!important;color:var(--sg-paper)!important;box-shadow:none!important}
#simulator .glass-card{background:var(--sg-paper)!important;color:var(--sg-ink)!important}
/* Legacy utility roles: neutral text, paper surfaces, restrained blue only on actions. */
body>section:not(.sg-catalogue-hero) .text-white{color:var(--sg-ink)!important}
body>section:not(.sg-catalogue-hero) [class*='text-gray-']{color:var(--sg-muted)!important}
body>section:not(.sg-catalogue-hero) [class*='text-gold-']{color:var(--sg-ink)!important}
.text-gold-gradient,.text-silver-gradient{background:none!important;-webkit-text-fill-color:currentColor!important;color:var(--sg-ink)!important}
body>section:not(.sg-catalogue-hero) [class*='bg-obsidian'],body>section:not(.sg-catalogue-hero) [class*='bg-charcoal'],body>section:not(.sg-catalogue-hero) [class*='bg-surface']{background:var(--sg-mist)!important}
.glass-card,.glass-panel{background:var(--sg-paper);border:1px solid var(--sg-border);box-shadow:none!important;backdrop-filter:none!important;transition:border-color .2s}
body>section:not(.sg-catalogue-hero) .glass-card{border:1px solid var(--sg-border)!important;border-radius:8px!important;background:var(--sg-paper)!important;transform:none!important;box-shadow:none!important}
body>section:not(.sg-catalogue-hero) [class*='border-gray-'],[class*='border-gold-']{border-color:var(--sg-border)!important}
body>section:not(.sg-catalogue-hero) a[class*='from-gold-'],body>section:not(.sg-catalogue-hero) button[class*='from-gold-'],#heal-btn,#wa-quote-btn,#booking button[type=submit]{background:var(--sg-gradient)!important;color:var(--sg-paper)!important;box-shadow:none!important;border-radius:999px!important}
body>section:not(.sg-catalogue-hero) button.bg-gold-500{background:var(--sg-gradient)!important;color:var(--sg-paper)!important}
body>section:not(.sg-catalogue-hero) button.bg-gold-500 .text-white{color:var(--sg-paper)!important}
body>section:not(.sg-catalogue-hero) [class*='bg-gold-500/'],body>section:not(.sg-catalogue-hero) [class*='bg-gold-400/']{background:var(--sg-mist)!important}
input,textarea,select{background:var(--sg-paper)!important;color:var(--sg-ink)!important;border:1px solid var(--sg-border)!important;border-radius:8px!important;box-shadow:none!important}
#features .glass-card{border:0!important;border-top:1px solid var(--sg-border)!important;border-radius:0!important;padding-left:0!important}
#estimator .glass-panel,#booking .glass-panel,body>section:not(.sg-catalogue-hero)>.max-w-7xl>.glass-panel{background:none!important;border:0!important;border-radius:0!important}
#gallery article{background:var(--sg-paper)!important;border:1px solid var(--sg-border)!important;border-radius:8px!important;box-shadow:none!important}
#gallery img{border-radius:8px!important}
#videos .aura-video-showcase-panel{background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important}
.aura-video-launch-icon,.aura-video-mobile-play,#videos .aura-desktop-video-prev,#videos .aura-desktop-video-next{background:var(--sg-gradient)!important;color:var(--sg-paper)!important;box-shadow:none!important}
footer{background:var(--sg-paper)!important;border-top:1px solid var(--sg-border)!important;color:var(--sg-muted)!important}
footer .text-white{color:var(--sg-ink)!important}
footer [class*='text-gray-']{color:var(--sg-muted)!important}
/* Dedicated pages: overrides must survive the existing template inline style blocks. */
.sg-portfolio-page,.aura-page,.sg-ppf-page,.sg-wf-page{background:var(--sg-paper)!important;color:var(--sg-ink)!important}
.sg-portfolio-inner,.aura-page-inner,.sg-ppf-inner,.sg-wf-inner{max-width:1132px!important;margin:auto!important}
:is(.aura-page,.sg-ppf-page,.sg-wf-page,.sg-portfolio-page) :is(h1,h2,h3,strong){color:var(--sg-ink)!important}
:is(.aura-page,.sg-ppf-page,.sg-wf-page,.sg-portfolio-page) :is(p,li,small){color:var(--sg-muted)!important}
:is(.aura-page-brand,.sg-ppf-brand,.sg-wf-brand,.sg-portfolio-brand){color:var(--sg-ink)!important}
:is(.aura-card,.sg-ppf-card,.sg-wf-card,.sg-portfolio-card){background:var(--sg-paper)!important;border:1px solid var(--sg-border)!important;border-radius:8px!important;box-shadow:none!important}
:is(.sg-ppf-card,.sg-wf-card):before{display:none!important}
:is(.aura-cta,.sg-ppf-cta,.sg-wf-cta,.sg-portfolio-ig){background:var(--sg-gradient)!important;color:var(--sg-paper)!important;border-radius:999px!important;box-shadow:none!important}
:is(.aura-page-logo,.sg-ppf-logo,.sg-wf-logo,.sg-portfolio-logo,.aura-page-back,.sg-ppf-back,.sg-wf-back,.sg-portfolio-back,.sg-portfolio-home,.sg-ppf-link,.sg-wf-link,.sg-portfolio-tabs,.aura-note,.sg-ppf-note,.sg-wf-note){background:var(--sg-mist)!important;border:1px solid var(--sg-border)!important;color:var(--sg-ink)!important;box-shadow:none!important}
:is(.aura-price,.aura-page-kicker,.sg-ppf-kicker,.sg-wf-kicker,.sg-portfolio-kicker,.sg-ppf-badge,.sg-wf-badge){color:var(--sg-navy)!important;background:none!important;border-color:var(--sg-border)!important}
:is(.sg-ppf-header-image,.sg-wf-header-image){box-shadow:none!important;border-color:var(--sg-border)!important;border-radius:8px!important}
::-webkit-scrollbar{width:7px}::-webkit-scrollbar-track{background:var(--sg-paper)}::-webkit-scrollbar-thumb{background:var(--sg-navy);border-radius:999px}
@media(max-width:1023px){#main-header nav{gap:14px!important;font-size:12px!important}.sg-catalogue-copy h1{font-size:38px}.sg-catalogue-copy{padding:24px}}
@media(max-width:767px){
 #main-header>.max-w-7xl,.sg-catalogue-inner,body>section>.max-w-7xl{padding-left:20px!important;padding-right:20px!important}
 .sg-catalogue-hero{padding:24px 0 24px}.sg-catalogue-eyebrow{margin-bottom:16px}
 .sg-catalogue-visual,.sg-catalogue-copy{grid-column:span 12}.sg-catalogue-visual{border-radius:22px}
 #hero-image-carousel{height:190px!important;aspect-ratio:auto!important}
 .sg-catalogue-copy{padding:20px;min-height:210px;border-radius:22px}.sg-catalogue-copy h1{font-size:38px;max-width:14ch}
 .sg-catalogue-actions{margin-top:24px;gap:10px}.sg-catalogue-actions a{padding:12px;font-size:12px}
 .sg-catalogue-stats{grid-template-columns:1fr 1fr}.sg-catalogue-stats>div:last-child{grid-column:span 2}
 .sg-catalogue-stats>div{padding:12px}.sg-catalogue-stats .text-white,.sg-catalogue-stats .text-gold-400{font-size:21px!important}
 .sg-catalogue-stats .text-xs{font-size:12px!important}.sg-catalogue-details{font-size:11px}
 body>section:not(.sg-catalogue-hero){padding-top:44px!important;padding-bottom:44px!important}
 body>section h2{font-size:28px!important}#simulator #split-slider{height:280px!important}#simulator h2{font-size:24px!important}
 #hero-prev,#hero-next{opacity:1;width:32px;height:32px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*:before,*:after{animation:none!important;transition:none!important}.sg-reveal-ready{opacity:1!important;transform:none!important}}

#mobile-menu .text-gray-300{color:var(--sg-ink)!important}#mobile-menu a.bg-gradient-to-r{background:var(--sg-gradient)!important;color:var(--sg-paper)!important}

#features .glass-card>div:first-child{background:var(--sg-mist)!important;color:var(--sg-ink)!important;border-color:var(--sg-border)!important}

:is(.sg-ppf-tag,.sg-wf-tag,.sg-portfolio-caption,.sg-portfolio-tab){color:var(--sg-ink)!important}
:is(.sg-ppf-benefits,.sg-wf-benefits) i,:is(.sg-ppf-source,.sg-wf-source) a{color:var(--sg-navy)!important}
.sg-portfolio-tab.is-active{background:var(--sg-gradient)!important;color:var(--sg-paper)!important}

/* =========================================================
   SOLAR GARD — PREMIUM NAVY / BLACK / COPPER REFERENCE STYLE
   Visual-only override: preserves all existing content, links,
   images, sections and functionality.
   ========================================================= */
:root{
  --sg-paper:#02070d;
  --sg-mist:#071522;
  --sg-ink:#f1ece5;
  --sg-navy:#0b3154;
  --sg-muted:#b7b3ae;
  --sg-border:rgba(205,166,132,.24);
  --sg-copper:#c9a17f;
  --sg-copper-light:#e0c0a3;
  --sg-gradient:linear-gradient(135deg,#0d426d 0%,#071b2e 48%,#020509 100%);
  --sg-display:'Poppins',sans-serif;
  --sg-body:'Poppins',sans-serif;
}

html,body{
  background:
    radial-gradient(900px 500px at 12% 8%,rgba(18,75,119,.55),transparent 68%),
    radial-gradient(700px 500px at 90% 30%,rgba(12,48,78,.35),transparent 70%),
    linear-gradient(135deg,#02070d 0%,#061522 42%,#000 100%) !important;
  color:var(--sg-ink)!important;
}
body{
  background-attachment:fixed!important;
}

/* Header: deep navy/black glass like the reference */
#main-header{
  background:linear-gradient(180deg,rgba(3,12,22,.97),rgba(2,8,14,.88))!important;
  border-bottom:1px solid rgba(201,161,127,.28)!important;
  box-shadow:0 10px 35px rgba(0,0,0,.32)!important;
  backdrop-filter:blur(14px)!important;
}
#main-header .text-white,
#main-header nav a{color:#e7e0d9!important}
#main-header nav a:hover{color:var(--sg-copper-light)!important}
#main-header .relative.group.overflow-hidden>.relative{
  background:linear-gradient(135deg,#d2aa89,#9e7456)!important;
  color:#090909!important;
  box-shadow:0 8px 24px rgba(0,0,0,.35)!important;
}
#mobile-menu{
  background:linear-gradient(180deg,#061522,#010407)!important;
  border-top:1px solid rgba(201,161,127,.2)!important;
}

/* Main page canvas */
body>section,
.sg-portfolio-page,.aura-page,.sg-ppf-page,.sg-wf-page{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(650px 360px at 8% 12%,rgba(16,63,101,.46),transparent 72%),
    radial-gradient(650px 420px at 95% 88%,rgba(10,40,65,.34),transparent 72%),
    linear-gradient(135deg,#03080e 0%,#061a2c 52%,#010304 100%) !important;
  color:var(--sg-ink)!important;
}

/* Alternate dark sections to recreate the black/navy rhythm */
body>section:nth-of-type(even){
  background:
    radial-gradient(760px 380px at 85% 18%,rgba(16,62,99,.30),transparent 72%),
    linear-gradient(160deg,#000 0%,#020a12 48%,#061a2b 100%) !important;
}

/* Subtle premium wave/curve atmosphere, without adding content */
body>section::before,
.sg-portfolio-page::before,.aura-page::before,.sg-ppf-page::before,.sg-wf-page::before{
  content:"";
  position:absolute;
  width:78vw;height:34vw;
  max-width:1100px;max-height:480px;
  right:-18vw;bottom:-18vw;
  border:1px solid rgba(201,161,127,.18);
  border-radius:50%;
  transform:rotate(-13deg);
  pointer-events:none;
}
body>section::after{
  content:"";
  position:absolute;
  width:60vw;height:26vw;
  left:-22vw;top:-18vw;
  border:1px solid rgba(53,121,170,.12);
  border-radius:50%;
  transform:rotate(-12deg);
  pointer-events:none;
}
body>section>.max-w-7xl,
.sg-portfolio-inner,.aura-page-inner,.sg-ppf-inner,.sg-wf-inner{position:relative;z-index:1}

/* Hero: blue-to-black luxury background */
.sg-catalogue-hero{
  background:
    radial-gradient(700px 430px at 18% 35%,rgba(20,78,124,.65),transparent 70%),
    radial-gradient(500px 360px at 78% 80%,rgba(8,37,61,.48),transparent 72%),
    linear-gradient(145deg,#0a3152 0%,#061a2b 44%,#000 100%) !important;
}
.sg-catalogue-visual{
  background:#02070c!important;
  border:1px solid rgba(201,161,127,.24)!important;
  box-shadow:0 24px 70px rgba(0,0,0,.45)!important;
}
.sg-catalogue-copy{
  background:
    radial-gradient(260px 220px at 20% 15%,rgba(35,105,158,.5),transparent 75%),
    linear-gradient(145deg,#0d426d,#061b2d 56%,#020508 100%) !important;
  border:1px solid rgba(201,161,127,.28)!important;
  box-shadow:0 24px 70px rgba(0,0,0,.45)!important;
}
.sg-catalogue-copy h1{color:#eee7df!important}
.sg-catalogue-eyebrow{color:var(--sg-copper-light)!important}
.sg-catalogue-primary{
  background:linear-gradient(135deg,#d0a27d,#9d7355)!important;
  color:#080808!important;
}
.sg-catalogue-secondary{border-color:rgba(224,192,163,.5)!important;color:#eadfd5!important}

/* Gold/copper typography accents */
body>section h2,
:is(.aura-page,.sg-ppf-page,.sg-wf-page,.sg-portfolio-page) :is(h1,h2,h3,strong){
  color:#eadfd5!important;
}
body>section:not(.sg-catalogue-hero) .text-white{color:#eee8e1!important}
body>section:not(.sg-catalogue-hero) [class*='text-gray-']{color:#bdb8b2!important}
body>section:not(.sg-catalogue-hero) [class*='text-gold-'],
.text-gold-gradient,.text-silver-gradient{
  color:var(--sg-copper-light)!important;
  -webkit-text-fill-color:var(--sg-copper-light)!important;
}

/* Cards / panels */
.glass-card,.glass-panel,
body>section:not(.sg-catalogue-hero) .glass-card,
#gallery article,
:is(.aura-card,.sg-ppf-card,.sg-wf-card,.sg-portfolio-card){
  background:
    linear-gradient(145deg,rgba(11,43,69,.95),rgba(2,8,14,.97))!important;
  color:#eee8e1!important;
  border:1px solid rgba(201,161,127,.24)!important;
  box-shadow:0 18px 55px rgba(0,0,0,.34)!important;
  border-radius:18px!important;
}
body>section:not(.sg-catalogue-hero) [class*='bg-obsidian'],
body>section:not(.sg-catalogue-hero) [class*='bg-charcoal'],
body>section:not(.sg-catalogue-hero) [class*='bg-surface'],
body>section:not(.sg-catalogue-hero) [class*='bg-gold-500/'],
body>section:not(.sg-catalogue-hero) [class*='bg-gold-400/']{
  background:rgba(5,20,33,.78)!important;
}

/* Buttons / CTAs */
body>section:not(.sg-catalogue-hero) a[class*='from-gold-'],
body>section:not(.sg-catalogue-hero) button[class*='from-gold-'],
#heal-btn,#wa-quote-btn,#booking button[type=submit],
button.bg-gold-500,
:is(.aura-cta,.sg-ppf-cta,.sg-wf-cta,.sg-portfolio-ig){
  background:linear-gradient(135deg,#d1a27e,#9d7355)!important;
  color:#090909!important;
  border:1px solid rgba(239,207,179,.28)!important;
  box-shadow:0 10px 28px rgba(0,0,0,.35)!important;
}

/* Feature icons and small copper details */
#features .glass-card>div:first-child{
  background:linear-gradient(145deg,#123e61,#061a2c)!important;
  color:var(--sg-copper-light)!important;
  border-color:rgba(201,161,127,.28)!important;
}
:is(.sg-ppf-benefits,.sg-wf-benefits) i,
:is(.sg-ppf-source,.sg-wf-source) a,
:is(.aura-price,.aura-page-kicker,.sg-ppf-kicker,.sg-wf-kicker,.sg-portfolio-kicker,.sg-ppf-badge,.sg-wf-badge){
  color:var(--sg-copper-light)!important;
}

/* Inputs */
input,textarea,select{
  background:rgba(2,10,17,.9)!important;
  color:#eee8e1!important;
  border-color:rgba(201,161,127,.28)!important;
}

/* Simulator */
#simulator #split-slider{
  background:#02070d!important;
  border-color:rgba(201,161,127,.26)!important;
  box-shadow:0 20px 60px rgba(0,0,0,.42)!important;
}
#simulator #slider-handle>div{
  background:linear-gradient(135deg,#d1a27e,#9d7355)!important;
  color:#080808!important;
}
#simulator .glass-card{background:linear-gradient(145deg,#0b2c48,#02070c)!important;color:#eee8e1!important}

/* Gallery / video area */
#gallery article{background:linear-gradient(145deg,#0a2b45,#020609)!important}
#videos .aura-video-showcase-panel{background:transparent!important}
.aura-video-launch-icon,.aura-video-mobile-play,#videos .aura-desktop-video-prev,#videos .aura-desktop-video-next{
  background:linear-gradient(135deg,#d1a27e,#9d7355)!important;
  color:#080808!important;
}

/* Portfolio / inner pages */
:is(.aura-page-logo,.sg-ppf-logo,.sg-wf-logo,.sg-portfolio-logo,.aura-page-back,.sg-ppf-back,.sg-wf-back,.sg-portfolio-back,.sg-portfolio-home,.sg-ppf-link,.sg-wf-link,.sg-portfolio-tabs,.aura-note,.sg-ppf-note,.sg-wf-note){
  background:rgba(7,28,46,.9)!important;
  border-color:rgba(201,161,127,.24)!important;
  color:#eadfd5!important;
}
:is(.sg-ppf-header-image,.sg-wf-header-image){border-color:rgba(201,161,127,.24)!important;box-shadow:0 20px 55px rgba(0,0,0,.4)!important}

/* Footer */
footer{
  background:
    radial-gradient(500px 220px at 18% 0%,rgba(14,63,101,.45),transparent 72%),
    linear-gradient(145deg,#061b2d,#010304 78%)!important;
  border-top:1px solid rgba(201,161,127,.28)!important;
  color:#aaa6a1!important;
}
footer .text-white{color:#eee8e1!important}
footer [class*='text-gray-']{color:#aaa6a1!important}

::-webkit-scrollbar-track{background:#02070d!important}
::-webkit-scrollbar-thumb{background:linear-gradient(#2c668f,#b48a69)!important}

@media(max-width:767px){
  body>section::before,.sg-portfolio-page::before,.aura-page::before,.sg-ppf-page::before,.sg-wf-page::before{width:120vw;height:58vw;right:-48vw;bottom:-24vw}
  body>section::after{width:100vw;height:45vw;left:-48vw;top:-22vw}
}


/* =========================================================
   Video Background Hero
   The existing hero/carousel remains available underneath
   as the visual fallback if video cannot be loaded.
   ========================================================= */
#hero-image-carousel {
    position: relative;
    overflow: hidden;
}

#hero-image-carousel .hero-video-background {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    z-index: 0;
    pointer-events: none;
    background: #000;
}

#hero-image-carousel .hero-video-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.30) 45%, rgba(0,0,0,.12) 100%),
        linear-gradient(0deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 48%);
}

/* Keep the existing hero content above the video. */
#hero-image-carousel > *:not(.hero-video-background):not(.hero-video-overlay) {
    position: relative;
    z-index: 2;
}

/* If the theme's carousel images cover the hero, make them transparent
   so the video can be seen. The carousel markup remains intact for fallback. */
#hero-image-carousel .carousel-item,
#hero-image-carousel .carousel-inner,
#hero-image-carousel .hero-slide {
    background: transparent;
}

/* Respect users who request reduced motion. */
@media (prefers-reduced-motion: reduce) {
    #hero-image-carousel .hero-video-background {
        display: none;
    }
}

/* Mobile uses the same video by default. It can be disabled from the Hero / Beranda Customizer. */
@media (max-width: 767px) {
    #hero-image-carousel .hero-video-overlay {
        background: rgba(0,0,0,.30);
    }

    #hero-image-carousel .hero-video-background[data-video-mobile-disabled="1"] {
        display: none;
    }
}


/* Solar Gard header wordmark typography — intentionally scoped to header only. */
.solar-gard-header-logo-text {
    font-family: "Montserrat", "Poppins", Arial, sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: -0.035em !important;
}

/* mobile/tablet video fullscreen overlay */
@media (max-width: 1024px) {
    #hero-image-carousel .hero-video-background {
        cursor: pointer;
        pointer-events: auto;
        position: relative;
        z-index: 3;
    }
    .mobile-video-fullscreen {
        position: fixed;
        inset: 0;
        width: 100vw;
        height: 100vh;
        background: #000;
        z-index: 2147483647;
        display: none;
        align-items: center;
        justify-content: center;
    }
    .mobile-video-fullscreen.is-open { display: flex; }
    .mobile-video-fullscreen video {
        width: 100%;
        height: 100%;
        object-fit: contain;
        background: #000;
    }
    .mobile-video-fullscreen-close {
        position: absolute;
        top: max(14px, env(safe-area-inset-top));
        right: max(14px, env(safe-area-inset-right));
        z-index: 2;
        width: 44px;
        height: 44px;
        border: 0;
        border-radius: 50%;
        background: rgba(0,0,0,.65);
        color: #fff;
        font-size: 32px;
        line-height: 40px;
        cursor: pointer;
        padding: 0;
    }
    body.mobile-video-fullscreen-open { overflow: hidden; }
}

/* =========================================================
   SOLAR GARD — SUBTLE MOTION LAYER
   Animation-only enhancement. Does not change content/layout.
   ========================================================= */
html.sg-motion-enabled{scroll-behavior:smooth}
.sg-reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s var(--sg-ease);will-change:opacity,transform}
.sg-reveal.sg-visible{opacity:1;transform:none}
.sg-reveal-delay-1{transition-delay:.08s}.sg-reveal-delay-2{transition-delay:.16s}.sg-reveal-delay-3{transition-delay:.24s}
.sg-motion-hover{transition:transform .28s var(--sg-ease),box-shadow .28s ease,border-color .28s ease!important}
.sg-motion-hover:hover{transform:translateY(-5px)!important;box-shadow:0 14px 34px rgba(0,0,0,.18)!important}
.sg-motion-button{transition:transform .25s var(--sg-ease),box-shadow .25s ease,filter .25s ease!important}
.sg-motion-button:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 10px 24px rgba(0,0,0,.18)!important}
.aura-float-wa{animation:sgWaPulse 2.8s ease-in-out infinite}
.aura-float-home{transition:transform .25s var(--sg-ease),box-shadow .25s ease!important}
@keyframes sgWaPulse{0%,72%,100%{box-shadow:0 12px 30px rgba(0,0,0,.28),0 0 0 0 rgba(37,211,102,0)}78%{box-shadow:0 12px 30px rgba(0,0,0,.28),0 0 0 9px rgba(37,211,102,.12)}86%{box-shadow:0 12px 30px rgba(0,0,0,.28),0 0 0 15px rgba(37,211,102,0)}}
@media(prefers-reduced-motion:reduce){.sg-reveal{opacity:1!important;transform:none!important;transition:none!important}.sg-motion-hover,.sg-motion-button,.aura-float-wa{animation:none!important;transition:none!important}.sg-motion-hover:hover,.sg-motion-button:hover{transform:none!important;filter:none!important;box-shadow:none!important}}

/* Hero animation: requested elements only — replay whenever they re-enter the viewport */
.sg-anim-invisible,.sg-anim-left,.sg-anim-right{opacity:0}
.sg-anim-invisible{transform:translateY(45px)}
.sg-anim-left{transform:translateX(-55px)}
.sg-anim-right{transform:translateX(55px)}
.sg-anim-invisible.sg-anim-visible{animation:sgInvisibleUp .8s cubic-bezier(.22,1,.36,1) .1s both}
.sg-anim-left.sg-anim-visible{animation:sgSlideFromLeft .8s cubic-bezier(.22,1,.36,1) .25s both}
.sg-anim-right.sg-anim-visible{animation:sgSlideFromRight .8s cubic-bezier(.22,1,.36,1) .4s both}
@keyframes sgInvisibleUp{to{opacity:1;transform:translateY(0)}}
@keyframes sgSlideFromLeft{to{opacity:1;transform:translateX(0)}}
@keyframes sgSlideFromRight{to{opacity:1;transform:translateX(0)}}
/* Requested content text animation: zoom out and replay on every viewport re-entry */
.sg-anim-zoom{
  opacity:0;
  transform:scale(.84);
  transform-origin:center center;
  will-change:transform,opacity;
}
.sg-anim-zoom.sg-anim-zoom-visible{
  animation:sgTextZoomOut .78s cubic-bezier(.22,1,.36,1) both;
}
@keyframes sgTextZoomOut{
  from{opacity:0;transform:scale(.84)}
  to{opacity:1;transform:scale(1)}
}

/* Stats animation: rise from below and replay on every viewport re-entry */
.sg-anim-bottom{opacity:0;transform:translateY(45px)}
.sg-anim-bottom.sg-anim-bottom-visible{animation:sgStatsRise .8s cubic-bezier(.22,1,.36,1) both}
@keyframes sgStatsRise{to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){
  .sg-anim-invisible,.sg-anim-left,.sg-anim-right,.sg-anim-bottom,.sg-anim-zoom{opacity:1!important;transform:none!important;animation:none!important}
}


/* FAQ animation — alternating slide from right and left. FAQ content/layout unchanged. */
#faq .grid > details{
  opacity:0;
  will-change:transform,opacity;
}
#faq .grid > details:nth-child(odd){
  animation:sgFaqSlideRight .75s cubic-bezier(.22,1,.36,1) both;
}
#faq .grid > details:nth-child(even){
  animation:sgFaqSlideLeft .75s cubic-bezier(.22,1,.36,1) .12s both;
}
@keyframes sgFaqSlideRight{
  from{opacity:0;transform:translateX(55px)}
  to{opacity:1;transform:translateX(0)}
}
@keyframes sgFaqSlideLeft{
  from{opacity:0;transform:translateX(-55px)}
  to{opacity:1;transform:translateX(0)}
}
@media(prefers-reduced-motion:reduce){
  #faq .grid > details{
    opacity:1!important;
    transform:none!important;
    animation:none!important;
  }
}
