:root{
  --bg:#05090d;
  --bg2:#0a1118;
  --panel:#0d161f;
  --panel2:#111d27;
  --gold:#e9b94f;
  --gold2:#f4cf78;
  --gold-500: #e8a94a;
  --gold-400: #f0bd6a;
  --gold-600: #c98f37;
  --cream:#fffaf0;
  --muted:#aab4bd;
  --line:rgba(233,185,79,.22);
  --white:#f7f8fa;
  --max:1180px;
  --radius:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(circle at 75% 0%,rgba(233,185,79,.08),transparent 30%),var(--bg);color:var(--white);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.55}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(var(--max),calc(100% - 40px));margin:auto}
.nav{position:sticky;top:0;z-index:20;background:rgba(5,9,13,.88);backdrop-filter:blur(18px);}
.nav-inner{height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;letter-spacing:.03em}
.brand img{width:38px;height:38px;border-radius:10px}
.brand small{display:block;font-size:9px;color:var(--gold);font-weight:600;letter-spacing:.12em}
.links{display:flex;gap:25px;align-items:center;font-size:14px;color:#d7dce1}
.links a:hover{color:var(--gold2)}
.nav-actions{display:flex;gap:14px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border-radius:10px;border:1px solid var(--line);font-weight:750;font-size:14px;cursor:pointer}
.btn.gold{background:linear-gradient(135deg,var(--gold2),var(--gold));color:#111;border-color:transparent}
.btn.dark{background:transparent;color:var(--white)}
.btn:hover{transform:translateY(-1px)}
.hero{padding:92px 0 72px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:64px;align-items:center}
.eyebrow{color:var(--gold);font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(50px,6.2vw,84px);line-height:.98;margin:15px 0 24px;letter-spacing:-.045em}
h1 span{color:var(--gold)}
h2{font-family:Georgia,"Times New Roman",serif;font-size:clamp(34px,4vw,52px);line-height:1.05;margin:0 0 18px}
h3{font-size:20px;margin:0 0 8px}
.lead{font-size:20px;color:#e2e5e8;max-width:650px}
.sub{color:var(--muted);max-width:620px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0 18px}
.trust{display:flex;gap:18px;flex-wrap:wrap;color:#aab7ad;font-size:13px}
.trust b{color:var(--gold2)}
.hero-visual{position:relative;min-height:500px;width:590px;}
.map{position:absolute;inset:0;opacity:.18;background-image:radial-gradient(circle,#e9b94f 1px,transparent 1.5px);background-size:10px 10px;mask-image:linear-gradient(90deg,transparent 0%,#000 12%,#000 88%,transparent 100%)}
.phone{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:190px;height:360px;border:3px solid #3b2c11;border-radius:30px;background:#071017;box-shadow:0 0 0 1px var(--gold),0 30px 80px #000}
.phone-top{height:18px; background:#000;border: 0.5px solid #1f2a33;margin:15px 58px 5px;border-radius:50px;display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:11px}
.phone-body{padding:26px 18px}
.phone-logo{width:48px;height:48px;border-radius:12px;margin:0 auto 18px}
.live{color:var(--gold);font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.12em}
.phone h4{font-family:Georgia,serif;font-size:28px;margin:10px 0}
.phone p{font-size:12px;color:#aeb8c0}
.person{text-align:center;position:absolute;width:145px;padding:10px;border:1px solid var(--line);border-radius:15px;background:rgba(12,20,27,.92);box-shadow:0 15px 40px rgba(0,0,0,.3)}
.person strong{display:block;font-size:11px;color:var(--gold2);margin-bottom:6px}
.person .avatar{height:78px;border-radius:10px;background:linear-gradient(135deg,#283846,#121b23);display:grid;place-items:center;font-size:26px;margin-bottom:7px}
.person .avatar.pic{width:100%;height:78px;border-radius:9px;margin-bottom:8px;background-size:cover;background-position:center;position:relative;overflow:hidden;}
.person .small{font-size:12.5px;color:#dce1e5;align-items:center;display:block;}
.p1{top:-86px;left:50%;transform:translateX(-50%);box-shadow:0 8px 54px #e8a94a8c;}
.p1 *{text-align: center !important;}
.p2{left:25px;top:145px}.p3{right:25px;top:145px}.p4{left:60px;bottom:34px}.p5{right:60px;bottom:34px}
section{padding:86px 0;border-top:1px solid rgba(255,255,255,.06)}
.section-head{text-align:center;max-width:760px;margin:0 auto 42px}
.section-head p{color:var(--white);font-size:17px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.card{background:linear-gradient(160deg,var(--panel2),var(--panel));border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);padding:24px}
.card:hover{border-color:var(--line)}
.church-visual{position: relative;overflow:hidden;height:440px;background:radial-gradient(ellipse 500px 300px at 50% 20%, rgba(232, 169, 74, .18), transparent 60%), linear-gradient(180deg, rgba(6, 10, 20, .35), rgba(3, 6, 13, .75));background-image: url(https://cdn.prod.website-files.com/6489ebcb10b033253ee526f9/65af607ef1805b3b5eee81c6_Church%20Online%204.webp) !important;background-size:cover !important;background-repeat:no-repeat !important;background-position:center !important;border: 1px solid rgba(255, 255, 255, .06);}
.church-big-visual{position: relative;background:radial-gradient(ellipse 500px 300px at 50% 20%, rgba(232, 169, 74, .18), transparent 60%), linear-gradient(180deg, rgba(6, 10, 20, .35), rgba(3, 6, 13, .75));background-image: url(https://images.unsplash.com/photo-1759127481171-30a27de310ad?auto=format&fit=crop&fm=jpg&ixlib=rb-4.1.0&q=82&w=1600) !important;background-size:cover !important;background-repeat:no-repeat !important;background-position:center !important;border: 1px solid rgba(255, 255, 255, .06);}
.icon{width:46px;height:46px;border-radius:13px;border:1px solid var(--line);display:grid;place-items:center;color:var(--gold);font-size:20px;margin-bottom:20px}
.quote{font-family:Georgia,serif;font-size:30px;line-height:1.2;border-left:3px solid var(--gold);padding-left:24px;}
.workflow{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.step{position:relative;padding:25px;text-align:center}
.step:not(:last-child):after{content:"→";position:absolute;right:-8px;top:42px;color:var(--gold);font-size:28px}
.num{color:var(--gold);font-weight:900;font-size:12px}
.step .circle{width:128px;height:128px;margin:10px auto 16px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;color:var(--gold)}
.step .circle .ic{width:40px;height:40px}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.feature-grid .card{padding:20px}
.feature-grid h3{font-size:15px}
.feature-grid p{font-size:12px}
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.price-card{position:relative;padding:30px;border:1px solid rgba(255,255,255,.1);border-radius:20px;background:#0a1118}
.price-card.pop{border-color:var(--gold);box-shadow:0 0 50px rgba(233,185,79,.07)}
.badge{position:absolute;right:18px;top:18px;color:#111;background:var(--gold);padding:5px 9px;border-radius:999px;font-size:10px;font-weight:900}
.price{font-size:48px;font-weight:900;color:var(--gold);line-height:1;margin:12px 0 8px}
.price small{font-size:13px;color:var(--muted);font-weight:500}
.list{padding:0;margin:24px 0;list-style:none}
.list li{padding:8px 0;color:#d5dbe0;font-size:14px}
.list li:before{content:"✓";color:var(--gold);font-weight:900;margin-right:9px}
.band{border:1px solid var(--line);border-radius:22px;padding:32px;display:flex;justify-content:space-between;align-items:center;gap:24px}
.form-wrap{max-width:720px;margin:auto}
.form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
label{font-size:12px;color:#c9d0d6;font-weight:700}
input,select,textarea{background:#091119;border:1px solid rgba(255,255,255,.12);border-radius:10px;color:white;padding:13px 14px;font:inherit;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--gold)}
textarea{min-height:130px;resize:vertical}
footer{padding:50px 0 28px;border-top:1px solid rgba(255,255,255,.07);color:var(--muted)}
.footer-grid{display:grid;grid-template-columns:2fr repeat(4,1fr);gap:35px}
footer h4{color:white;margin:0 0 14px}
footer a{display:block;font-size:13px;margin:8px 0}
.small{font-size:12px}
.mobile-menu{display:none}
@media(max-width:900px){
 .links,.nav-actions .sign{display:none}.mobile-menu{display:block}
 .hero-grid,.split{grid-template-columns:1fr}.hero{padding-top:55px}
 .card-grid{grid-template-columns:repeat(2,1fr)}.workflow{grid-template-columns:1fr 1fr}
 .feature-grid{grid-template-columns:repeat(2,1fr)}.pricing{grid-template-columns:1fr}
 .footer-grid{grid-template-columns:1fr 1fr}.person{transform:none}.p1{left:25px}.p3{right:25px}
}
@media(max-width:560px){
 .container{width:min(var(--max),calc(100% - 28px))}
 h1{font-size:48px}.lead{font-size:17px}.hero-visual{min-height:430px}
 .phone{width:155px;height:310px}.person{width:110px}.person .avatar{height:58px}.p2{left:8px}.p3{right:8px}.p4{left:20px}.p5{right:20px}
 .card-grid,.workflow,.feature-grid,.footer-grid,.form{grid-template-columns:1fr}
 .step:not(:last-child):after{display:none}.band{flex-direction:column;align-items:flex-start}
}

/* Added: Lucide icon sizing for existing icon containers. */
.icon svg,.circle svg,.mobile-menu svg{width:22px;height:22px;stroke-width:2;}

/* =========================================================
   Responsive layout patch
   Only adds responsive behavior; existing desktop styling
   remains unchanged.
   ========================================================= */

/* Large tablets / smaller laptops */
@media (max-width: 1180px) {
  .container {
    width: min(var(--max), calc(100% - 32px));
  }

  .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 590px);
    gap: 34px;
  }

  .hero-visual {
    width: min(590px, 100%);
    justify-self: end;
  }
}

/* Tablet */
@media (max-width: 900px) {
  .hero {
    padding: 55px 0 50px;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .hero-copy {
    width: 100%;
  }

  /*
    Keep the hero visual as one contained composition.
    It becomes centered instead of spilling past the viewport.
  */
  .hero-visual {
    width: min(590px, 100%);
    min-height: 500px;
    height: 500px;
    margin: 0 auto;
    justify-self: center;
  }

  .p1 {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }

  .p2 {
    left: 22px;
    top: 145px;
  }

  .p3 {
    right: 22px;
    top: 145px;
  }

  .p4 {
    left: 45px;
    bottom: 20px;
  }

  .p5 {
    right: 45px;
    bottom: 20px;
  }

  .phone {
    left: 50%;
    top: 53%;
  }

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

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

  .pricing {
    grid-template-columns: 1fr;
    max-width: 620px;
    margin-inline: auto;
  }

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

/* Small tablet / large phone */
@media (max-width: 700px) {
  .container {
    width: min(var(--max), calc(100% - 28px));
  }

  .hero-copy {
    padding-right: 0;
  }

  .hero-visual {
    min-height: 470px;
    height: 470px;
  }

  .person {
    width: 122px;
    padding: 8px;
  }

  .person .avatar,
  .person .avatar.pic {
    height: 68px;
  }

  .p2 {
    left: 5px;
    top: 145px;
  }

  .p3 {
    right: 5px;
    top: 145px;
  }

  .p4 {
    left: 18px;
    bottom: 14px;
  }

  .p5 {
    right: 18px;
    bottom: 14px;
  }

  .phone {
    width: 175px;
    height: 335px;
  }

  .phone-body {
    padding: 20px 15px;
  }

  .phone h4 {
    font-size: 25px;
  }

  .step .circle {
    width: 104px;
    height: 104px;
  }
}

/* Mobile */
@media (max-width: 560px) {
  .nav-inner {
    height: 68px;
  }

  .brand img {
    width: 34px;
    height: 34px;
  }

  .hero {
    padding: 40px 0 34px;
  }

  h1 {
    font-size: clamp(44px, 13vw, 56px);
  }

  .lead {
    font-size: 17px;
  }

  .cta-row {
    flex-direction: column;
    align-items: stretch;
  }

  .cta-row .btn {
    width: 100%;
  }

  .trust {
    gap: 10px 14px;
    font-size: 11px;
  }

  /*
    Mobile hero is deliberately kept as a fixed composition
    scaled around the same center phone + five-person layout.
  */
  .hero-visual {
    width: 100%;
    min-height: 430px;
    height: 430px;
  }

  .phone {
    width: 148px;
    height: 300px;
    top: 53%;
    border-radius: 26px;
  }

  .phone-top {
    margin: 12px 44px 4px;
    height: 15px;
  }

  .phone-body {
    padding: 17px 11px;
  }

  .phone-logo {
    width: 40px;
    height: 40px;
    margin-bottom: 13px;
  }

  .live {
    font-size: 9px;
  }

  .phone h4 {
    font-size: 21px;
    margin: 7px 0;
  }

  .phone p {
    font-size: 10px;
  }

  .person {
    width: 98px;
    padding: 6px;
    border-radius: 11px;
  }

  .person strong {
    font-size: 9px;
    margin-bottom: 4px;
  }

  .person .avatar,
  .person .avatar.pic {
    height: 57px;
    border-radius: 7px;
    margin-bottom: 5px;
  }

  .person .small {
    font-size: 9px;
  }

  .p1 {
    top: 0;
    left: 50%;
  }

  .p2 {
    left: 0;
    top: 116px;
  }

  .p3 {
    right: 0;
    top: 116px;
  }

  .p4 {
    left: 8px;
    bottom: 5px;
  }

  .p5 {
    right: 8px;
    bottom: 5px;
  }

  .hero-visual .map {
    opacity: .13;
  }

  .card-grid,
  .feature-grid,
  .pricing,
  .footer-grid,
  .form {
    grid-template-columns: 1fr;
  }

  .split {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  section {
    padding: 58px 0;
  }

  .workflow {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .step {
    padding: 18px 10px;
  }

  .step:not(:last-child):after {
    display: none;
  }

  .band {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-grid {
    gap: 24px;
  }
}

/* Very small phones */
@media (max-width: 380px) {
  .hero-visual {
    min-height: 400px;
    height: 400px;
  }

  .person {
    width: 88px;
  }

  .person .avatar,
  .person .avatar.pic {
    height: 51px;
  }

  .phone {
    width: 136px;
    height: 278px;
  }

  .p2,
  .p3 {
    top: 108px;
  }

  .p4,
  .p5 {
    bottom: 2px;
  }

  .p4 {
    left: 2px;
  }

  .p5 {
    right: 2px;
  }
}

/* =========================================================
   Navigation responsive behavior
   ========================================================= */

/* Desktop: show navigation links and Book a Demo. */
@media (min-width: 901px) {
  .nav {
    display: block;
  }

  .nav-actions .btn.gold {
    display: inline-flex;
  }
}

/* Tablet + mobile: collapse navigation and hide Book a Demo. */
@media (max-width: 900px) {
  .nav {
    display: block;
  }

  .nav .links {
    display: none;
  }

  .nav-actions .btn.gold {
    display: none;
  }

  .nav-actions .mobile-menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}



/* Mobile navigation panel */
.mobile-nav-panel {
  display: none;
}

@media (max-width: 900px) {
  .mobile-nav-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 100;
    padding: 12px 16px 18px;
    background: rgba(2, 8, 13, .98);
    border-bottom: 1px solid rgba(241, 184, 63, .28);
    box-shadow: 0 18px 40px rgba(0,0,0,.35);
  }

  .mobile-nav-panel.is-open {
    display: block;
  }

  .mobile-nav-panel a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 46px;
    padding: 0 8px;
    color: #f7f3ea;
    border-bottom: 1px solid rgba(255,255,255,.07);
    font-size: 14px;
  }

  .mobile-nav-panel a:last-child {
    border-bottom: 0;
  }

  .mobile-nav-panel a:hover {
    color: #f1b83f;
  }

  .mobile-menu {
    position: relative;
    z-index: 101;
    cursor: pointer;
  }

  .mobile-menu svg {
    pointer-events: none;
  }
}

/* =========================================================
   HBK LIGHT / DARK MODE
   Original dark design remains the dark theme.
   ========================================================= */

:root {
  color-scheme: dark;
  --theme-text: #f7f8fa;
  --theme-heading: #f7f8fa;
  --theme-muted: #aab4bd;
  --theme-nav-text: #d7dce1;
  --theme-panel-text: #f7f8fa;
  --theme-input-bg: #091119;
  --theme-input-text: #ffffff;
  --theme-footer-heading: #ffffff;
  --theme-person-text: #dce1e5;
  --theme-person-bg: rgba(12,20,27,.92);
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f7f6f2;
  --bg2: #ffffff;
  --panel: #ffffff;
  --panel2: #f1f0eb;
  --gold: #9a6805;
  --gold2: #805500;
  --cream: #171a1d;
  --muted: #59636b;
  --line: rgba(154,104,5,.34);
  --white: #171a1d;

  --theme-text: #171a1d;
  --theme-heading: #171a1d;
  --theme-muted: #59636b;
  --theme-nav-text: #30383e;
  --theme-panel-text: #171a1d;
  --theme-input-bg: #ffffff;
  --theme-input-text: #171a1d;
  --theme-footer-heading: #171a1d;
  --theme-person-text: #30383e;
  --theme-person-bg: rgba(255,255,255,.96);
}

html[data-theme="light"] body {
  background: #ffffff;
  color: var(--theme-text);
}

html[data-theme="light"] .nav {
  background: #ffffff;
}

html[data-theme="light"] .links {
  color: var(--theme-nav-text);
}

html[data-theme="light"] .links a {
  color: var(--theme-nav-text);
}

html[data-theme="light"] .nav-actions {
  color: var(--theme-nav-text);
}

html[data-theme="light"] .nav-actions .sign {
  color: var(--theme-nav-text);
}

html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4,
html[data-theme="light"] h5,
html[data-theme="light"] h6 {
  color: var(--theme-heading);
}

html[data-theme="light"] .lead {
  color: #252c31;
}

html[data-theme="light"] .sub,
html[data-theme="light"] .section-head p,
html[data-theme="light"] .small {
  color: var(--theme-muted);
}

html[data-theme="light"] .trust {
  color: #59636b;
}

html[data-theme="light"] .trust b {
  color: var(--gold2);
}

html[data-theme="light"] .person {
  background: var(--theme-person-bg);
  color: var(--theme-panel-text);
  box-shadow: 0 15px 40px rgba(0,0,0,.12);
}

html[data-theme="light"] .person strong {
  color: var(--gold2);
}

html[data-theme="light"] .person .small {
  color: var(--theme-person-text);
}

html[data-theme="light"] .phone {
  background: #ffffff;
  border-color: #9a6805;
  box-shadow: 0 0 0 1px var(--gold), 0 30px 80px rgba(0,0,0,.16);
}

html[data-theme="light"] .phone-top {
  background: #000;
  border-color: #d7d8d3;
  color: var(--gold2);
}

html[data-theme="light"] .phone h4 {
  color: #171a1d;
}

html[data-theme="light"] .phone p {
  color: #59636b;
}

html[data-theme="light"] .card {
  background: linear-gradient(160deg,#ffffff,#f1f0eb);
  border-color: rgba(0,0,0,.10);
  color: var(--theme-panel-text);
}

html[data-theme="light"] .card p,
html[data-theme="light"] .quote {
  color: #4f5a61;
}

html[data-theme="light"] .icon {
  color: var(--gold2);
}

html[data-theme="light"] .step {
  color: var(--theme-text);
}

html[data-theme="light"] .step p {
  color: #59636b;
}

html[data-theme="light"] .num {
  color: var(--gold2);
}

html[data-theme="light"] .step:not(:last-child):after {
  color: var(--gold2);
}

html[data-theme="light"] .feature-grid .card {
  color: var(--theme-panel-text);
}

html[data-theme="light"] .price-card,
html[data-theme="light"] .price {
  background: linear-gradient(160deg,#ffffff,#f1f0eb);
  color: var(--theme-panel-text);
  border-color: rgba(0,0,0,.10);
}

html[data-theme="light"] .price-card.pop {
  border-color: var(--gold);
}

html[data-theme="light"] .badge {
  color: #111;
}

html[data-theme="light"] .price {
  color: var(--gold2);
}

html[data-theme="light"] .price small {
  color: #59636b;
}

html[data-theme="light"] .list li {
  color: #4f5a61;
}

html[data-theme="light"] label {
  color: #3e484f;
}

html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea {
  background: var(--theme-input-bg);
  color: var(--theme-input-text);
  border-color: rgba(0,0,0,.15);
}

html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {
  color: #8a9298;
}

html[data-theme="light"] footer {
  background: #e9e8e2;
  color: var(--theme-muted);
  border-top-color: rgba(0,0,0,.08);
}

html[data-theme="light"] footer h4 {
  color: var(--theme-footer-heading);
}

html[data-theme="light"] footer a,
html[data-theme="light"] footer p {
  color: #59636b;
}

html[data-theme="light"] .btn.dark {
  color: #171a1d;
  border-color: rgba(0,0,0,.15);
}

html[data-theme="light"] .btn.gold {
  color: #fff;
}

html[data-theme="light"] .mobile-nav-panel {
  background: rgba(247,246,242,.99);
  border-bottom-color: rgba(154,104,5,.30);
}

html[data-theme="light"] .mobile-nav-panel a {
  color: #171a1d;
  border-bottom-color: rgba(0,0,0,.08);
}

html[data-theme="light"] .mobile-nav-panel a:hover {
  color: var(--gold2);
}

/* Theme switch */
.theme-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit;
}

.theme-switch {
  width: 42px;
  height: 23px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #111b23;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
  transition: .2s ease;
}

.theme-switch::before {
  content: "";
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--gold2);
  transition: transform .2s ease;
}

html[data-theme="light"] .theme-switch {
  background: #dedcd4;
}

html[data-theme="light"] .theme-switch::before {
  transform: translateX(18px);
}

.theme-icon {
  width: 15px;
  height: 15px;
  color: var(--gold);
}

.mobile-theme-control {
  display: none;
}

@media (max-width: 900px) {
  .desktop-theme-control {
    display: none !important;
  }

  .mobile-theme-control {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    min-height: 48px;
    padding: 0 8px;
    margin-top: 7px;
    color: var(--theme-text);
  }

  .mobile-theme-control > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
}

@media (min-width: 901px) {
  .desktop-theme-control {
    display: inline-flex !important;
  }
}