/* =========================================================
   01. HARD SCOPE RESET
========================================================= */

#sswp-top,
#sswp-top *,
#sswp-top *::before,
#sswp-top *::after{
  box-sizing:border-box !important;
}

#sswp-top.sswp-page{
  --sswp-bg:#06101b;
  --sswp-bg-2:#0b1826;
  --sswp-bg-3:#101f2c;

  --sswp-text:#f3ead8;
  --sswp-text-strong:#fff7e7;
  --sswp-muted:rgba(243,234,216,.74);
  --sswp-soft:rgba(243,234,216,.56);
  --sswp-faint:rgba(243,234,216,.40);

  --sswp-panel:rgba(255,255,255,.060);
  --sswp-panel-2:rgba(255,255,255,.088);
  --sswp-panel-3:rgba(255,255,255,.036);
  --sswp-card:rgba(8,20,32,.78);
  --sswp-card-solid:#0b1826;

  --sswp-line:rgba(246,234,208,.12);
  --sswp-line-soft:rgba(246,234,208,.075);
  --sswp-line-strong:rgba(200,169,107,.38);

  --sswp-gold:#c8a96b;
  --sswp-gold-2:#ead08c;
  --sswp-gold-soft:rgba(200,169,107,.16);

  --sswp-blue:#88b9df;
  --sswp-blue-soft:rgba(88,136,174,.16);

  --sswp-red:#8f2424;
  --sswp-red-soft:rgba(143,36,36,.13);

  --sswp-radius-xl:34px;
  --sswp-radius-lg:26px;
  --sswp-radius-md:18px;
  --sswp-radius-sm:14px;

  --sswp-shadow-dark:
    0 34px 100px rgba(0,0,0,.42),
    inset 0 0 0 1px rgba(255,255,255,.05);

  --sswp-shadow:0 28px 88px rgba(0,0,0,.30);
  --sswp-shadow-soft:0 18px 54px rgba(0,0,0,.18);

  position:relative !important;
  width:100% !important;
  overflow:hidden !important;
  isolation:isolate !important;

  margin:0 !important;
  padding:0 !important;

  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  color:var(--sswp-text) !important;

  background:
    radial-gradient(circle at 14% 4%, rgba(200,169,107,.13), transparent 31%),
    radial-gradient(circle at 86% 12%, rgba(88,136,174,.22), transparent 34%),
    radial-gradient(circle at 46% 92%, rgba(143,36,36,.08), transparent 38%),
    linear-gradient(90deg, rgba(200,169,107,.014) 0 1px, transparent 1px 100%),
    linear-gradient(145deg,#050a12 0%, var(--sswp-bg) 44%, #102132 100%) !important;
  background-size:auto, auto, auto, 58px 58px, auto !important;

  transition:
    background .35s ease,
    color .35s ease !important;
}

#sswp-top.sswp-page[data-theme="light"]{
  --sswp-bg:#f8f3ea;
  --sswp-bg-2:#f1eadf;
  --sswp-bg-3:#e9edf0;

  --sswp-text:#182332;
  --sswp-text-strong:#0d1723;
  --sswp-muted:rgba(24,35,50,.72);
  --sswp-soft:rgba(24,35,50,.56);
  --sswp-faint:rgba(24,35,50,.40);

  --sswp-panel:rgba(255,255,255,.70);
  --sswp-panel-2:rgba(255,255,255,.88);
  --sswp-panel-3:rgba(255,255,255,.56);
  --sswp-card:rgba(255,255,255,.78);
  --sswp-card-solid:#ffffff;

  --sswp-line:rgba(80,58,30,.13);
  --sswp-line-soft:rgba(80,58,30,.08);
  --sswp-line-strong:rgba(142,101,45,.34);

  --sswp-gold:#9f7430;
  --sswp-gold-2:#745220;
  --sswp-gold-soft:rgba(159,116,48,.12);

  --sswp-blue:#2f678f;
  --sswp-blue-soft:rgba(47,103,143,.11);

  --sswp-red:#9b3831;
  --sswp-red-soft:rgba(155,56,49,.10);

  --sswp-shadow-dark:0 28px 76px rgba(30,35,44,.13);
  --sswp-shadow:0 24px 70px rgba(30,35,44,.12);
  --sswp-shadow-soft:0 16px 46px rgba(30,35,44,.09);

  background:
    radial-gradient(circle at 14% 4%, rgba(159,116,48,.13), transparent 31%),
    radial-gradient(circle at 86% 12%, rgba(47,103,143,.10), transparent 34%),
    radial-gradient(circle at 50% 100%, rgba(155,56,49,.040), transparent 38%),
    linear-gradient(90deg, rgba(159,116,48,.014) 0 1px, transparent 1px 100%),
    linear-gradient(145deg,#fbf7ef 0%, #f4ede2 48%, #e9eef2 100%) !important;
  background-size:auto, auto, auto, 58px 58px, auto !important;
}


/* =========================================================
   02. TAGDIV AND TYPOGRAPHY GUARD
========================================================= */

#sswp-top h1,
#sswp-top h2,
#sswp-top h3,
#sswp-top p,
#sswp-top a,
#sswp-top span,
#sswp-top small,
#sswp-top strong,
#sswp-top button,
#sswp-top div,
#sswp-top section,
#sswp-top article,
#sswp-top aside,
#sswp-top footer,
#sswp-top nav{
  font-family:inherit !important;
  text-shadow:none !important;
}

#sswp-top a,
#sswp-top a:link,
#sswp-top a:visited,
#sswp-top a:hover,
#sswp-top a:active{
  color:inherit !important;
  text-decoration:none !important;
  outline:none !important;
}

#sswp-top img{
  max-width:100% !important;
  height:auto !important;
}

#sswp-top h1,
#sswp-top h2,
#sswp-top h3,
#sswp-top p{
  margin-top:0 !important;
  padding:0 !important;
}

#sswp-top .sswp-shell{
  width:min(1220px, calc(100% - 44px)) !important;
  max-width:1220px !important;
  margin:0 auto !important;
  padding:0 !important;
}

#sswp-top .sswp-hero h1,
#sswp-top .sswp-section-head h2,
#sswp-top .sswp-wallpaper-info h3,
#sswp-top .sswp-note h2,
#sswp-top .sswp-bridge-card h3,
#sswp-top .sswp-finale p{
  color:var(--sswp-text-strong) !important;
  font-family:Georgia, "Times New Roman", serif !important;
  font-weight:560 !important;
  letter-spacing:-.052em !important;
  text-wrap:balance !important;
}

#sswp-top .sswp-section-head h2{
  max-width:820px !important;
  margin:0 auto !important;
  font-size:clamp(2rem, 3.8vw, 3.15rem) !important;
  line-height:1.08 !important;
}

#sswp-top .sswp-section-head p,
#sswp-top .sswp-prose p,
#sswp-top .sswp-wallpaper-info p,
#sswp-top .sswp-note p,
#sswp-top .sswp-bridge-card p{
  color:var(--sswp-muted) !important;
  text-wrap:pretty !important;
}

#sswp-top .sswp-eyebrow,
#sswp-top .sswp-kicker{
  color:var(--sswp-gold) !important;
}


/* =========================================================
   03. TOPBAR
========================================================= */

#sswp-top .sswp-topbar{
  position:sticky !important;
  top:0 !important;
  z-index:90 !important;
  border-bottom:1px solid var(--sswp-line) !important;
  background:rgba(7,16,26,.76) !important;
  box-shadow:0 12px 38px rgba(0,0,0,.16) !important;
  backdrop-filter:blur(20px) !important;
  -webkit-backdrop-filter:blur(20px) !important;
}

#sswp-top[data-theme="light"] .sswp-topbar{
  background:rgba(255,255,255,.82) !important;
  box-shadow:0 12px 34px rgba(30,35,44,.09) !important;
}

#sswp-top .sswp-topbar-inner{
  min-height:64px !important;
  display:grid !important;
  grid-template-columns:1fr auto 1fr !important;
  gap:18px !important;
  align-items:center !important;
}

#sswp-top .sswp-home-link,
#sswp-top .sswp-brand-link{
  display:inline-flex !important;
  align-items:center !important;
  gap:10px !important;
  color:var(--sswp-muted) !important;
  font-size:.78rem !important;
  font-weight:900 !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
  transition:color .25s ease, border-color .25s ease !important;
}

#sswp-top .sswp-home-link:hover,
#sswp-top .sswp-brand-link:hover{
  color:var(--sswp-text-strong) !important;
}

#sswp-top .sswp-home-link::before{
  content:"←" !important;
  color:var(--sswp-gold) !important;
  font-size:1rem !important;
  letter-spacing:0 !important;
}

#sswp-top .sswp-brand-link{
  justify-self:end !important;
  color:var(--sswp-gold) !important;
}

#sswp-top .sswp-mini-nav{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  padding:6px !important;
  border:1px solid var(--sswp-line) !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.045) !important;
}

#sswp-top[data-theme="light"] .sswp-mini-nav{
  background:rgba(255,255,255,.72) !important;
}

#sswp-top .sswp-mini-nav a{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:34px !important;
  padding:0 13px !important;
  border-radius:999px !important;
  color:var(--sswp-muted) !important;
  font-size:.76rem !important;
  font-weight:850 !important;
  transition:background .25s ease, color .25s ease !important;
}

#sswp-top .sswp-mini-nav a:hover{
  background:var(--sswp-panel-2) !important;
  color:var(--sswp-text-strong) !important;
}


/* =========================================================
   04. FLOATING THEME TOGGLE
========================================================= */

#sswp-top .sswp-theme-toggle{
  position:fixed !important;
  z-index:100 !important;
  right:22px !important;
  bottom:22px !important;

  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;

  min-height:44px !important;
  padding:0 16px !important;

  border:1px solid var(--sswp-line) !important;
  border-radius:999px !important;
  background:rgba(7,16,26,.84) !important;
  color:#f2ead8 !important;

  backdrop-filter:blur(18px) !important;
  -webkit-backdrop-filter:blur(18px) !important;
  box-shadow:0 16px 48px rgba(0,0,0,.24) !important;

  cursor:pointer !important;
  font-size:.82rem !important;
  font-weight:850 !important;
  letter-spacing:.02em !important;
}

#sswp-top[data-theme="light"] .sswp-theme-toggle{
  background:rgba(255,255,255,.88) !important;
  color:#182332 !important;
}


/* =========================================================
   05. HERO
========================================================= */

#sswp-top .sswp-hero{
  position:relative !important;
  min-height:82vh !important;
  display:flex !important;
  align-items:center !important;
  padding:74px 0 78px !important;
  overflow:hidden !important;
  background:
    radial-gradient(circle at 12% 18%, rgba(200,169,107,.13), transparent 28%),
    radial-gradient(circle at 82% 20%, rgba(58,86,112,.22), transparent 34%),
    linear-gradient(135deg,#050a12,#07101a 52%,#112536) !important;
}

#sswp-top[data-theme="light"] .sswp-hero{
  background:
    radial-gradient(circle at 12% 18%, rgba(200,169,107,.14), transparent 28%),
    radial-gradient(circle at 82% 20%, rgba(58,86,112,.10), transparent 34%),
    linear-gradient(135deg,#fbf7ef,#f4ede2 64%,#e9eef2) !important;
}

#sswp-top .sswp-hero::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background:
    linear-gradient(90deg,rgba(5,10,18,.82),rgba(5,10,18,.24),rgba(5,10,18,.72)),
    url("https://tokoh.id/wp-content/uploads/2026/05/SS-RH-01-SpiralKesadaran-1920.jpeg") center/cover no-repeat !important;
  opacity:.40 !important;
  filter:saturate(.82) contrast(1.02) brightness(.86) !important;
  pointer-events:none !important;
}

#sswp-top[data-theme="light"] .sswp-hero::before{
  opacity:.11 !important;
  filter:saturate(.58) contrast(.90) brightness(1.06) !important;
}

#sswp-top .sswp-hero::after{
  content:"" !important;
  position:absolute !important;
  inset:26px !important;
  border:1px solid rgba(200,169,107,.13) !important;
  border-radius:36px !important;
  pointer-events:none !important;
  opacity:.75 !important;
}

#sswp-top .sswp-hero-inner{
  position:relative !important;
  z-index:2 !important;
  display:grid !important;
  grid-template-columns:minmax(0,1.02fr) minmax(320px,.78fr) !important;
  gap:54px !important;
  align-items:center !important;
}

#sswp-top .sswp-kicker{
  display:inline-flex !important;
  align-items:center !important;
  gap:10px !important;
  margin:0 0 18px !important;
  font-size:.78rem !important;
  font-weight:950 !important;
  letter-spacing:.18em !important;
  text-transform:uppercase !important;
}

#sswp-top .sswp-kicker::before{
  content:"" !important;
  width:34px !important;
  height:1px !important;
  background:var(--sswp-gold) !important;
  opacity:.8 !important;
}

#sswp-top .sswp-hero h1{
  max-width:780px !important;
  margin:0 !important;
  font-size:clamp(3rem,7vw,4.85rem) !important;
  line-height:.98 !important;
}

#sswp-top .sswp-hero-subtitle{
  max-width:680px !important;
  margin:26px 0 0 !important;
  color:var(--sswp-muted) !important;
  font-size:clamp(1.06rem,1.75vw,1.28rem) !important;
  line-height:1.78 !important;
}

#sswp-top .sswp-hero-actions{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:12px !important;
  margin-top:34px !important;
}


/* =========================================================
   06. BUTTONS
========================================================= */

#sswp-top .sswp-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  min-height:46px !important;
  padding:0 20px !important;

  border:1px solid transparent !important;
  border-radius:999px !important;

  font-size:.9rem !important;
  font-weight:850 !important;
  letter-spacing:.01em !important;

  transition:
    background .25s ease,
    color .25s ease,
    border-color .25s ease,
    box-shadow .25s ease,
    transform .25s ease !important;
}

#sswp-top .sswp-btn:hover{
  transform:translateY(-2px) !important;
}

#sswp-top .sswp-btn-primary{
  background:linear-gradient(135deg,#b99150,#e4c982) !important;
  border-color:rgba(255,255,255,.16) !important;
  color:#17110a !important;
  box-shadow:0 16px 42px rgba(200,169,107,.18) !important;
}

#sswp-top .sswp-btn-ghost{
  border-color:var(--sswp-line) !important;
  background:rgba(255,255,255,.065) !important;
  color:var(--sswp-text-strong) !important;
  backdrop-filter:blur(16px) !important;
  -webkit-backdrop-filter:blur(16px) !important;
}

#sswp-top[data-theme="light"] .sswp-btn-ghost{
  background:rgba(255,255,255,.72) !important;
}

#sswp-top .sswp-btn-primary:hover,
#sswp-top .sswp-btn-ghost:hover{
  border-color:var(--sswp-line-strong) !important;
  box-shadow:0 16px 42px rgba(200,169,107,.13) !important;
}


/* =========================================================
   07. HERO PREVIEW
========================================================= */

#sswp-top .sswp-hero-preview{
  position:relative !important;
  min-height:520px !important;
}

#sswp-top .sswp-preview-frame{
  position:absolute !important;
  right:0 !important;
  top:10px !important;
  width:min(100%,530px) !important;
  aspect-ratio:16 / 10 !important;

  overflow:hidden !important;
  border:1px solid rgba(246,234,208,.18) !important;
  border-radius:34px !important;
  background:#07111f !important;
  box-shadow:var(--sswp-shadow-dark) !important;
  transform:rotate(.7deg) !important;
}

#sswp-top[data-theme="light"] .sswp-preview-frame{
  border-color:rgba(80,58,30,.10) !important;
  box-shadow:var(--sswp-shadow-soft) !important;
}

#sswp-top .sswp-preview-frame img,
#sswp-top .sswp-phone-preview img,
#sswp-top .sswp-strip-item img,
#sswp-top .sswp-wallpaper-main img,
#sswp-top .sswp-wallpaper-phone img{
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:cover !important;
}

#sswp-top .sswp-phone-preview{
  position:absolute !important;
  right:36px !important;
  bottom:0 !important;
  width:168px !important;
  aspect-ratio:9 / 16 !important;

  overflow:hidden !important;
  border:5px solid rgba(246,234,208,.72) !important;
  border-radius:30px !important;
  background:#07111f !important;
  box-shadow:0 28px 78px rgba(0,0,0,.42) !important;
}

#sswp-top[data-theme="light"] .sswp-phone-preview{
  border-color:#ffffff !important;
  box-shadow:0 24px 60px rgba(0,0,0,.18) !important;
}

#sswp-top .sswp-preview-badge{
  position:absolute !important;
  left:28px !important;
  bottom:24px !important;

  padding:12px 14px !important;

  border:1px solid rgba(246,234,208,.18) !important;
  border-radius:999px !important;
  background:rgba(7,16,26,.70) !important;
  color:#f2ead8 !important;

  backdrop-filter:blur(18px) !important;
  -webkit-backdrop-filter:blur(18px) !important;

  font-size:.74rem !important;
  font-weight:850 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
}


/* =========================================================
   08. PREVIEW STRIP
========================================================= */

#sswp-top .sswp-strip{
  position:relative !important;
  z-index:3 !important;
  margin-top:-38px !important;
}

#sswp-top .sswp-strip-inner{
  display:grid !important;
  grid-template-columns:repeat(8,minmax(132px,1fr)) !important;
  gap:12px !important;

  padding:14px !important;

  overflow-x:auto !important;
  scrollbar-width:thin !important;
  scrollbar-color:var(--sswp-line-strong) rgba(255,255,255,.05) !important;

  border:1px solid var(--sswp-line) !important;
  border-radius:24px !important;
  background:rgba(10,22,34,.88) !important;
  box-shadow:0 22px 70px rgba(0,0,0,.22) !important;
}

#sswp-top[data-theme="light"] .sswp-strip-inner{
  background:rgba(255,255,255,.78) !important;
  box-shadow:0 20px 54px rgba(30,35,44,.10) !important;
}

#sswp-top .sswp-strip-item{
  position:relative !important;
  min-width:132px !important;
  aspect-ratio:16 / 10 !important;

  overflow:hidden !important;
  cursor:pointer !important;

  border:1px solid var(--sswp-line) !important;
  border-radius:16px !important;
  background:#07111f !important;

  transition:border-color .25s ease, transform .25s ease !important;
}

#sswp-top .sswp-strip-item:hover{
  transform:translateY(-2px) !important;
  border-color:var(--sswp-line-strong) !important;
}

#sswp-top .sswp-strip-item::after{
  content:attr(data-label) !important;
  position:absolute !important;
  left:10px !important;
  bottom:10px !important;
  max-width:calc(100% - 20px) !important;

  padding:6px 8px !important;

  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;

  border-radius:999px !important;
  background:rgba(0,0,0,.52) !important;
  color:#ffffff !important;

  backdrop-filter:blur(12px) !important;
  -webkit-backdrop-filter:blur(12px) !important;

  font-size:.62rem !important;
  font-weight:850 !important;
}


/* =========================================================
   09. SECTIONS
========================================================= */

#sswp-top .sswp-section{
  position:relative !important;
  padding:92px 0 !important;
}

#sswp-top .sswp-section-compact{
  padding:58px 0 !important;
}

#sswp-top .sswp-section-head{
  max-width:840px !important;
  margin:0 auto 38px !important;
  text-align:center !important;
}

#sswp-top .sswp-eyebrow{
  margin:0 0 12px !important;
  font-size:.76rem !important;
  font-weight:950 !important;
  letter-spacing:.16em !important;
  text-transform:uppercase !important;
}

#sswp-top .sswp-section-head p{
  max-width:760px !important;
  margin:20px auto 0 !important;
  font-size:1.02rem !important;
  line-height:1.82 !important;
}


/* =========================================================
   10. MANIFESTO
========================================================= */

#sswp-top .sswp-manifesto{
  display:grid !important;
  grid-template-columns:.82fr 1.18fr !important;
  gap:44px !important;
  align-items:start !important;
}

#sswp-top .sswp-manifesto-mark{
  position:sticky !important;
  top:92px !important;

  padding:34px !important;

  border:1px solid var(--sswp-line-strong) !important;
  border-radius:var(--sswp-radius-xl) !important;
  background:
    radial-gradient(circle at 78% 20%, rgba(200,169,107,.15), transparent 44%),
    linear-gradient(145deg,var(--sswp-panel-2),var(--sswp-panel-3)),
    var(--sswp-card) !important;
  box-shadow:var(--sswp-shadow-soft) !important;
}

#sswp-top .sswp-manifesto-mark span{
  display:block !important;
  color:var(--sswp-gold) !important;
  font-family:Georgia, "Times New Roman", serif !important;
  font-size:clamp(2.45rem,4.8vw,3.3rem) !important;
  line-height:.98 !important;
  letter-spacing:-.07em !important;
}

#sswp-top .sswp-manifesto-mark p{
  margin:22px 0 0 !important;
  color:var(--sswp-muted) !important;
  line-height:1.8 !important;
}

#sswp-top .sswp-prose{
  max-width:820px !important;
}

#sswp-top .sswp-prose p{
  margin:0 0 22px !important;
  font-size:1.05rem !important;
  line-height:1.92 !important;
}


/* =========================================================
   11. SHOWCASE
========================================================= */

#sswp-top .sswp-showcase{
  border-top:1px solid var(--sswp-line) !important;
  border-bottom:1px solid var(--sswp-line) !important;
  background:
    radial-gradient(circle at 8% 18%, rgba(200,169,107,.10), transparent 26%),
    radial-gradient(circle at 88% 22%, rgba(58,86,112,.16), transparent 30%),
    var(--sswp-bg-2) !important;
}

#sswp-top .sswp-wallpaper-list{
  display:grid !important;
  gap:34px !important;
  margin-top:42px !important;
}

#sswp-top .sswp-wallpaper-card{
  position:relative !important;
  overflow:hidden !important;

  display:grid !important;
  grid-template-columns:minmax(0,1.14fr) minmax(300px,.86fr) !important;
  gap:26px !important;
  align-items:stretch !important;

  padding:18px !important;

  border:1px solid var(--sswp-line) !important;
  border-radius:34px !important;
  background:
    radial-gradient(circle at 92% 8%, var(--sswp-blue-soft), transparent 34%),
    linear-gradient(145deg,var(--sswp-panel-2),var(--sswp-panel-3)),
    var(--sswp-card) !important;
  box-shadow:var(--sswp-shadow-soft) !important;
}

#sswp-top[data-theme="light"] .sswp-wallpaper-card{
  background:
    radial-gradient(circle at 92% 8%, var(--sswp-blue-soft), transparent 34%),
    linear-gradient(145deg,rgba(255,255,255,.96),rgba(255,255,255,.68)),
    var(--sswp-card) !important;
  box-shadow:0 24px 62px rgba(30,35,44,.09) !important;
}

#sswp-top .sswp-wallpaper-card::before{
  content:"" !important;
  position:absolute !important;
  left:22px !important;
  right:22px !important;
  top:0 !important;
  height:1px !important;
  background:linear-gradient(90deg, rgba(200,169,107,.52), transparent) !important;
  pointer-events:none !important;
}

#sswp-top .sswp-wallpaper-media{
  position:relative !important;
  min-height:360px !important;

  overflow:hidden !important;
  border:1px solid rgba(246,234,208,.10) !important;
  border-radius:24px !important;
  background:#07111f !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.035) !important;
}

#sswp-top .sswp-wallpaper-main{
  position:absolute !important;
  inset:0 !important;
}

#sswp-top .sswp-wallpaper-main img{
  transition:transform .55s ease !important;
}

#sswp-top .sswp-wallpaper-card:hover .sswp-wallpaper-main img{
  transform:scale(1.018) !important;
}

#sswp-top .sswp-wallpaper-phone{
  position:absolute !important;
  right:22px !important;
  bottom:22px !important;
  width:118px !important;
  aspect-ratio:9 / 16 !important;

  overflow:hidden !important;
  border:4px solid rgba(255,255,255,.78) !important;
  border-radius:22px !important;
  background:#07111f !important;
  box-shadow:0 18px 48px rgba(0,0,0,.36) !important;
}

#sswp-top .sswp-wallpaper-info{
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  padding:24px 20px 22px 4px !important;
}

#sswp-top .sswp-number{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  width:48px !important;
  height:34px !important;
  margin-bottom:18px !important;

  border:1px solid var(--sswp-line) !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.052) !important;
  color:var(--sswp-gold) !important;

  font-size:.82rem !important;
  font-weight:950 !important;
}

#sswp-top .sswp-wallpaper-info h3{
  margin:0 !important;
  font-size:clamp(1.7rem,3vw,2.4rem) !important;
  line-height:1.06 !important;
}

#sswp-top .sswp-wallpaper-info p{
  margin:18px 0 0 !important;
  font-size:1rem !important;
  line-height:1.78 !important;
}

#sswp-top .sswp-downloads{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:10px !important;
  margin-top:26px !important;
}

#sswp-top .sswp-downloads a{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  min-height:44px !important;
  padding:0 18px !important;

  border:1px solid var(--sswp-line) !important;
  border-radius:999px !important;
  background:var(--sswp-panel) !important;
  color:var(--sswp-text-strong) !important;

  font-size:.84rem !important;
  font-weight:850 !important;

  transition:
    background .25s ease,
    color .25s ease,
    border-color .25s ease,
    box-shadow .25s ease,
    transform .25s ease !important;
}

#sswp-top .sswp-downloads a:first-child{
  background:linear-gradient(135deg,#b99150,#e4c982) !important;
  border-color:rgba(255,255,255,.14) !important;
  color:#17110a !important;
}

#sswp-top .sswp-downloads a:hover{
  transform:translateY(-2px) !important;
  border-color:var(--sswp-line-strong) !important;
  background:var(--sswp-gold) !important;
  color:#17110a !important;
}


/* =========================================================
   12. MEANING MAP
========================================================= */

#sswp-top .sswp-meaning{
  display:grid !important;
  grid-template-columns:repeat(8,minmax(0,1fr)) !important;
  gap:12px !important;
  margin-top:42px !important;
}

#sswp-top .sswp-meaning-item{
  position:relative !important;
  overflow:hidden !important;
  min-height:166px !important;
  padding:18px 14px 20px !important;

  border:1px solid var(--sswp-line) !important;
  border-radius:18px !important;
  background:
    radial-gradient(circle at 92% 8%, var(--sswp-blue-soft), transparent 34%),
    linear-gradient(145deg,var(--sswp-panel),var(--sswp-panel-3)) !important;
}

#sswp-top[data-theme="light"] .sswp-meaning-item{
  background:
    radial-gradient(circle at 92% 8%, var(--sswp-blue-soft), transparent 34%),
    rgba(255,255,255,.72) !important;
}

#sswp-top .sswp-meaning-item::before{
  content:"" !important;
  position:absolute !important;
  left:14px !important;
  right:14px !important;
  top:0 !important;
  height:1px !important;
  background:linear-gradient(90deg, rgba(200,169,107,.50), transparent) !important;
}

#sswp-top .sswp-meaning-item strong{
  display:block !important;
  margin-bottom:12px !important;
  color:var(--sswp-gold) !important;
  font-size:.78rem !important;
  font-weight:950 !important;
}

#sswp-top .sswp-meaning-item h3{
  margin:0 0 10px !important;
  color:var(--sswp-text-strong) !important;
  font-size:.96rem !important;
  line-height:1.25 !important;
  font-weight:850 !important;
}

#sswp-top .sswp-meaning-item p{
  margin:0 !important;
  color:var(--sswp-muted) !important;
  font-size:.82rem !important;
  line-height:1.55 !important;
}


/* =========================================================
   13. NOTE
========================================================= */

#sswp-top .sswp-note{
  max-width:900px !important;
  margin:0 auto !important;
  padding:32px !important;

  border:1px solid var(--sswp-line) !important;
  border-left:5px solid var(--sswp-gold) !important;
  border-radius:var(--sswp-radius-lg) !important;
  background:
    radial-gradient(circle at 12% 20%, rgba(200,169,107,.12), transparent 34%),
    var(--sswp-card) !important;
  box-shadow:var(--sswp-shadow-soft) !important;
}

#sswp-top .sswp-note h2{
  margin:0 0 12px !important;
  font-size:1.8rem !important;
  line-height:1.2 !important;
}

#sswp-top .sswp-note p{
  margin:0 !important;
  font-size:1rem !important;
  line-height:1.86 !important;
}


/* =========================================================
   14. BRIDGE
========================================================= */

#sswp-top .sswp-bridge{
  color:var(--sswp-text) !important;
  background:
    radial-gradient(circle at 20% 12%, rgba(200,169,107,.15), transparent 30%),
    radial-gradient(circle at 84% 24%, rgba(58,86,112,.16), transparent 34%),
    linear-gradient(135deg,#050a12,#07101a 62%,#102132) !important;
}

#sswp-top[data-theme="light"] .sswp-bridge{
  background:
    radial-gradient(circle at 20% 12%, rgba(200,169,107,.12), transparent 30%),
    linear-gradient(135deg,#fbf7ef,#f4ede2 66%,#e9eef2) !important;
}

#sswp-top .sswp-bridge-grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:18px !important;
  margin-top:42px !important;
}

#sswp-top .sswp-bridge-card{
  position:relative !important;
  overflow:hidden !important;

  padding:26px !important;

  border:1px solid var(--sswp-line) !important;
  border-radius:22px !important;
  background:
    radial-gradient(circle at 92% 8%, var(--sswp-blue-soft), transparent 34%),
    rgba(255,255,255,.052) !important;

  transition:
    background .25s ease,
    border-color .25s ease,
    box-shadow .25s ease,
    transform .25s ease !important;
}

#sswp-top[data-theme="light"] .sswp-bridge-card{
  background:
    radial-gradient(circle at 92% 8%, var(--sswp-blue-soft), transparent 34%),
    rgba(255,255,255,.70) !important;
}

#sswp-top .sswp-bridge-card::before{
  content:"" !important;
  position:absolute !important;
  left:18px !important;
  right:18px !important;
  top:0 !important;
  height:1px !important;
  background:linear-gradient(90deg, rgba(200,169,107,.46), transparent) !important;
}

#sswp-top .sswp-bridge-card:hover{
  transform:translateY(-3px) !important;
  border-color:var(--sswp-line-strong) !important;
  background:var(--sswp-panel-2) !important;
  box-shadow:0 18px 52px rgba(0,0,0,.14) !important;
}

#sswp-top .sswp-bridge-card span{
  display:inline-block !important;
  margin-bottom:16px !important;
  color:var(--sswp-gold) !important;
  font-size:.76rem !important;
  font-weight:950 !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
}

#sswp-top .sswp-bridge-card h3{
  margin:0 0 12px !important;
  font-size:1.45rem !important;
  line-height:1.2 !important;
}

#sswp-top .sswp-bridge-card p{
  margin:0 !important;
  font-size:.95rem !important;
  line-height:1.72 !important;
}


/* =========================================================
   15. FINALE
========================================================= */

#sswp-top .sswp-finale{
  padding:70px 0 84px !important;
  border-top:1px solid var(--sswp-line) !important;
  text-align:center !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(200,169,107,.12), transparent 34%),
    var(--sswp-bg) !important;
}

#sswp-top .sswp-finale p{
  max-width:740px !important;
  margin:0 auto 24px !important;
  font-size:clamp(1.6rem,3.1vw,2.3rem) !important;
  line-height:1.2 !important;
}

#sswp-top .sswp-finale small{
  display:block !important;
  color:var(--sswp-muted) !important;
  font-size:.95rem !important;
  line-height:1.7 !important;
}

#sswp-top .sswp-bottom-actions{
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:center !important;
  gap:12px !important;
  margin-top:28px !important;
}


/* =========================================================
   16. RESPONSIVE
========================================================= */

@media(max-width:1040px){
  #sswp-top .sswp-hero-inner,
  #sswp-top .sswp-manifesto,
  #sswp-top .sswp-wallpaper-card{
    grid-template-columns:1fr !important;
  }

  #sswp-top .sswp-hero-preview{
    min-height:430px !important;
  }

  #sswp-top .sswp-preview-frame{
    left:0 !important;
    right:auto !important;
    width:min(100%,680px) !important;
  }

  #sswp-top .sswp-phone-preview{
    right:24px !important;
  }

  #sswp-top .sswp-meaning{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  }

  #sswp-top .sswp-bridge-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  #sswp-top .sswp-wallpaper-info{
    padding:8px 10px 14px !important;
  }

  #sswp-top .sswp-manifesto-mark{
    position:relative !important;
    top:auto !important;
  }
}

@media(max-width:780px){
  #sswp-top .sswp-topbar{
    position:relative !important;
  }

  #sswp-top .sswp-topbar-inner{
    grid-template-columns:1fr !important;
    gap:10px !important;
    padding:12px 0 !important;
  }

  #sswp-top .sswp-mini-nav{
    justify-content:flex-start !important;
    width:100% !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }

  #sswp-top .sswp-mini-nav a{
    flex:0 0 auto !important;
  }

  #sswp-top .sswp-brand-link{
    justify-self:start !important;
  }
}

@media(max-width:720px){
  #sswp-top .sswp-shell{
    width:min(100% - 32px, 1220px) !important;
  }

  #sswp-top .sswp-hero{
    min-height:auto !important;
    padding:62px 0 58px !important;
  }

  #sswp-top .sswp-hero::after{
    inset:14px !important;
    border-radius:24px !important;
  }

  #sswp-top .sswp-hero h1{
    font-size:clamp(2.6rem,12vw,4.2rem) !important;
    letter-spacing:-.058em !important;
  }

  #sswp-top .sswp-hero-subtitle{
    font-size:1rem !important;
    line-height:1.72 !important;
  }

  #sswp-top .sswp-hero-actions,
  #sswp-top .sswp-bottom-actions{
    display:grid !important;
    grid-template-columns:1fr !important;
    width:100% !important;
  }

  #sswp-top .sswp-btn{
    width:100% !important;
  }

  #sswp-top .sswp-hero-preview{
    min-height:360px !important;
  }

  #sswp-top .sswp-preview-frame{
    top:10px !important;
    width:100% !important;
    border-radius:22px !important;
  }

  #sswp-top .sswp-phone-preview{
    right:18px !important;
    width:124px !important;
    border-radius:24px !important;
  }

  #sswp-top .sswp-preview-badge{
    left:18px !important;
    bottom:18px !important;
    font-size:.64rem !important;
  }

  #sswp-top .sswp-section{
    padding:62px 0 !important;
  }

  #sswp-top .sswp-section-head{
    text-align:left !important;
  }

  #sswp-top .sswp-section-head h2{
    margin-left:0 !important;
    margin-right:0 !important;
    font-size:clamp(2rem,9vw,2.75rem) !important;
  }

  #sswp-top .sswp-section-head p{
    margin-left:0 !important;
    margin-right:0 !important;
  }

  #sswp-top .sswp-strip{
    margin-top:-20px !important;
  }

  #sswp-top .sswp-strip-inner{
    grid-template-columns:repeat(8,142px) !important;
  }

  #sswp-top .sswp-wallpaper-card{
    padding:12px !important;
    border-radius:26px !important;
  }

  #sswp-top .sswp-wallpaper-media{
    min-height:260px !important;
    border-radius:18px !important;
  }

  #sswp-top .sswp-wallpaper-phone{
    right:14px !important;
    bottom:14px !important;
    width:86px !important;
    border-radius:16px !important;
  }

  #sswp-top .sswp-wallpaper-info h3{
    font-size:clamp(1.7rem,8vw,2.2rem) !important;
  }

  #sswp-top .sswp-downloads{
    display:grid !important;
    grid-template-columns:1fr !important;
  }

  #sswp-top .sswp-downloads a{
    width:100% !important;
  }

  #sswp-top .sswp-meaning,
  #sswp-top .sswp-bridge-grid{
    grid-template-columns:1fr !important;
  }

  #sswp-top .sswp-note{
    padding:24px !important;
  }

  #sswp-top .sswp-theme-toggle{
    right:14px !important;
    bottom:14px !important;
  }
}

@media(max-width:420px){
  #sswp-top .sswp-shell{
    width:min(100% - 24px, 1220px) !important;
  }

  #sswp-top .sswp-hero h1{
    font-size:2.45rem !important;
  }

  #sswp-top .sswp-manifesto-mark,
  #sswp-top .sswp-note,
  #sswp-top .sswp-bridge-card{
    padding:22px !important;
  }

  #sswp-top .sswp-wallpaper-media{
    min-height:230px !important;
  }
}

@media(prefers-reduced-motion:reduce){
  #sswp-top *,
  #sswp-top *::before,
  #sswp-top *::after{
    scroll-behavior:auto !important;
    transition:none !important;
    animation:none !important;
  }
}