/* landing.css — Galaxy Note landing page non-critical styles */
/* Critical (above-the-fold) CSS is inlined in index-landing.html */

.stats-bar{
  display:flex;gap:2.5rem;justify-content:center;align-items:center;
  padding:1.25rem 1.5rem;margin:0 auto;max-width:36rem;
  border-radius:var(--radius-lg);
  background:rgba(var(--primary-rgb),0.06);
  border:1px solid rgba(var(--primary-rgb),0.12);
  backdrop-filter:blur(12px);
  animation:statsReveal 0.6s ease-out both;
}
@keyframes statsReveal{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}
.stat-item{font-size:0.85rem;color:var(--text-dim);display:flex;align-items:baseline;gap:0.375rem}
.stat-item span[id]{font-size:1.35rem;font-weight:700;color:var(--text-main)}
body.light .stats-bar{background:rgba(var(--primary-rgb),0.05);border-color:rgba(var(--primary-rgb),0.1)}

.features{background:linear-gradient(180deg,transparent,rgba(var(--primary-rgb),0.03),transparent)}
.section-label{
  display:inline-block;font-size:1rem;font-weight:700;
  text-transform:uppercase;letter-spacing:0.1875rem;color:var(--primary);
  margin-bottom:0.875rem;
  padding:0.375rem 1rem;border-radius:999px;
  background:rgba(var(--primary-rgb),0.08);
  border:1px solid rgba(var(--primary-rgb),0.15);
}
.section-title{
  font-size:clamp(1.8rem,4vw,2.6rem);font-weight:800;
  line-height:1.15;margin-bottom:1rem;letter-spacing:-0.03em;
}
.section-desc{
  font-size:0.95rem;color:var(--text-dim);
  max-width:35rem;margin:0 auto 3.25rem;line-height:1.7;
}
.features-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0.875rem;
}
.feature-card{
  padding:1.125rem 1rem;border-radius:var(--radius-lg);
  background:var(--card-bg);
  border:1px solid var(--glass-border);
  text-align:center;
  display:flex;flex-direction:column;align-items:center;
  transition:transform 0.25s,border-color 0.25s,box-shadow 0.25s;
  position:relative;overflow:hidden;
}
.feature-card::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 50% 0%,rgba(var(--primary-rgb),0.06),transparent 70%);
  opacity:0;transition:opacity 0.3s;pointer-events:none;
}
.feature-card:hover::before{opacity:1}
.feature-card:hover{
  transform:translateY(-6px);
  border-color:rgba(var(--primary-rgb),0.25);
  box-shadow:0 16px 48px rgba(0,0,0,0.35);
}
.feature-icon{
  width:3.5rem;height:3.5rem;border-radius:1rem;
  display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;margin:0 auto 1rem;align-self:center;
  background:rgba(var(--primary-rgb),0.1);
  position:relative;
}
.feature-icon svg{width:1.75rem;height:1.75rem}
.feature-card h3{font-size:1.05rem;font-weight:600;margin-bottom:0.5rem}
.feature-card p{font-size:0.82rem;color:var(--text-dim);line-height:1.6}

.feature-card:nth-child(2) .feature-icon{background:rgba(var(--secondary-rgb),0.18)}
.feature-card:nth-child(2)::before{background:radial-gradient(circle at 50% 0%,rgba(var(--secondary-rgb),0.06),transparent 70%)}
.feature-card:nth-child(3) .feature-icon{background:rgba(var(--accent-rgb),0.18)}
.feature-card:nth-child(3)::before{background:radial-gradient(circle at 50% 0%,rgba(var(--accent-rgb),0.06),transparent 70%)}
.feature-card:nth-child(4) .feature-icon{background:rgba(34,197,94,0.18)}
.feature-card:nth-child(4)::before{background:radial-gradient(circle at 50% 0%,rgba(34,197,94,0.06),transparent 70%)}
.feature-card:nth-child(5) .feature-icon{background:rgba(14,165,233,0.18)}
.feature-card:nth-child(5)::before{background:radial-gradient(circle at 50% 0%,rgba(14,165,233,0.06),transparent 70%)}
.feature-card:nth-child(6) .feature-icon{background:rgba(250,204,21,0.18)}
.feature-card:nth-child(6)::before{background:radial-gradient(circle at 50% 0%,rgba(250,204,21,0.06),transparent 70%)}
.feature-card:nth-child(7) .feature-icon{background:rgba(244,63,94,0.18)}
.feature-card:nth-child(7)::before{background:radial-gradient(circle at 50% 0%,rgba(244,63,94,0.06),transparent 70%)}
.feature-card:nth-child(8) .feature-icon{background:rgba(45,212,191,0.18)}
.feature-card:nth-child(8)::before{background:radial-gradient(circle at 50% 0%,rgba(45,212,191,0.06),transparent 70%)}

.showcase{text-align:center;padding:5rem 0 1.25rem;align-items:flex-start;justify-content:flex-start}
.showcase-window{max-width:68.75rem;margin:0 auto;background:none;border:none;overflow:visible;box-shadow:none}
.showcase-img{width:115%;position:relative;margin-left:-7.5%;background:none}
.showcase-img img{
  width:100%;max-height:none;object-fit:contain;
  display:block;margin:0 auto;
  border-radius:0.75rem;
  box-shadow:none;
  background:transparent;
  transition:opacity 0.6s ease;
}
body.light .showcase-img img{box-shadow:none;background:transparent}
.showcase-img img.hidden{position:absolute;inset:0;opacity:0}
.showcase-img picture{display:block;transition:opacity 0.6s ease}
.showcase-img picture.hidden{position:absolute;inset:0;opacity:0;pointer-events:none}
.showcase-img picture.hidden img{width:100%;height:100%;object-fit:contain}
.showcase-tabs{display:flex;gap:0.5rem;justify-content:center;margin-top:-1.5rem;position:relative;z-index:2}
.showcase-tab{
  padding:0.375rem 1rem;border-radius:999px;font-size:0.78rem;font-weight:600;
  border:1px solid var(--glass-border);background:transparent;color:var(--text-muted);
  cursor:pointer;transition:all 0.2s;
}
.showcase-tab.active{background:rgba(var(--primary-rgb),0.15);color:var(--primary);border-color:rgba(var(--primary-rgb),0.3)}

.pricing{text-align:center}
.pricing-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(17.5rem,1fr));
  gap:1.25rem;max-width:60rem;margin:0 auto;
}
.pricing-card{
  padding:1.75rem 1.5rem;border-radius:var(--radius-lg);
  background:var(--card-bg);
  border:1px solid var(--glass-border);
  display:flex;flex-direction:column;
  transition:transform 0.25s,border-color 0.25s;
}
.pricing-card:hover{transform:translateY(-4px)}
.pricing-card.featured{
  border-color:rgba(var(--primary-rgb),0.3);
  background:rgba(var(--primary-rgb),0.04);
  position:relative;
}
.pricing-popular-badge{
  position:absolute;top:-0.75rem;left:50%;transform:translateX(-50%);
  padding:0.25rem 1rem;border-radius:999px;font-size:0.7rem;font-weight:600;
  background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;
  letter-spacing:0.03rem;text-transform:uppercase;
}
.pricing-name{font-size:0.95rem;font-weight:600;margin-bottom:0.25rem}
.pricing-desc{font-size:0.75rem;color:var(--text-muted);margin-bottom:1rem}
.pricing-price{font-size:2.2rem;font-weight:800;line-height:1;margin-bottom:0.25rem}
.pricing-price span{font-size:0.8rem;font-weight:400;color:var(--text-dim)}
.pricing-period{font-size:0.72rem;color:var(--text-muted);margin-bottom:1.5rem}
.pricing-features{
  list-style:none;text-align:left;
  display:flex;flex-direction:column;gap:0.75rem;
  margin-bottom:2rem;flex:1;
}
.pricing-features li{
  font-size:0.82rem;color:var(--text-dim);
  display:flex;align-items:flex-start;gap:0.625rem;
}
.pricing-features li::before{
  content:'✓';color:var(--color-success);font-weight:700;flex-shrink:0;
}
.pricing-btn{
  display:block;text-align:center;
  padding:0.625rem 1.25rem;border-radius:var(--radius-md);font-size:0.82rem;font-weight:600;
  border:none;cursor:pointer;transition:transform 0.2s,box-shadow 0.2s;width:100%;
}
.pricing-btn--primary{
  background:linear-gradient(135deg,var(--primary),var(--secondary));color:var(--btn-text,#1a1a2e);
}
.pricing-btn--primary:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(var(--primary-rgb),0.35)}
.pricing-btn--ghost{
  background:rgba(255,255,255,0.04);color:var(--text-dim);
  border:1px solid var(--glass-border);
}
.pricing-btn--ghost:hover{background:rgba(255,255,255,0.08);color:var(--text-main)}

.cta-banner{text-align:center;flex-direction:column;justify-content:center;position:relative;padding-top:2rem;padding-bottom:0;min-height:calc(100vh - 5rem)}
.cta-box{
  padding:2.75rem 2rem;border-radius:1.25rem;
  background:linear-gradient(135deg,rgba(var(--primary-rgb),0.1),rgba(var(--secondary-rgb),0.08));
  border:1px solid rgba(var(--primary-rgb),0.15);
  position:relative;overflow:hidden;
}
.cta-box::before{
  content:'';position:absolute;
  width:25rem;height:25rem;
  background:radial-gradient(circle,rgba(var(--primary-rgb),0.12),transparent 70%);
  top:-12.5rem;right:-6.25rem;pointer-events:none;
}
.cta-box h2{font-size:clamp(1.3rem,2.5vw,1.8rem);font-weight:700;margin-bottom:0.625rem;position:relative}
.cta-box p{font-size:0.9rem;color:var(--text-dim);margin-bottom:1.5rem;position:relative}

.comparison{text-align:center}
.comparison-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:56.25rem;margin:0 auto}
.comparison-table{
  width:100%;border-collapse:collapse;
  font-size:0.85rem;
}
.comparison-table th,.comparison-table td{
  padding:0.75rem 1rem;text-align:center;
  border-bottom:1px solid var(--glass-border);
}
.comparison-table th{font-weight:700;font-size:0.9rem;padding-bottom:1rem}
.comparison-table th:first-child,.comparison-table td:first-child{text-align:left;font-weight:500}
.comparison-table td:first-child{color:var(--text-dim)}
.comp-check{color:var(--color-success);font-weight:700}
.comp-cross{color:var(--text-muted);opacity:0.6}
.comp-highlight{background:rgba(var(--primary-rgb),0.08);border-radius:0}
.comp-highlight th{color:var(--primary)}
.comparison-table tr:last-child td{border-bottom:none;font-weight:700;font-size:0.95rem}
body.light .comp-highlight{background:rgba(var(--primary-rgb),0.12)}

.steps{text-align:center}
.steps-grid{display:flex;gap:2rem;justify-content:center;align-items:flex-start;max-width:50rem;margin:0 auto}
.step-card{flex:1;text-align:center;position:relative}
.step-num{
  width:3rem;height:3rem;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;font-weight:800;margin:0 auto 0.875rem;
  background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;
}
.step-card h3{font-size:0.95rem;font-weight:600;margin-bottom:0.375rem}
.step-card p{font-size:0.82rem;color:var(--text-dim);line-height:1.55}
.step-arrow{
  position:absolute;top:1.5rem;right:-1.75rem;
  color:var(--text-muted);font-size:1.2rem;opacity:0.4;
}

.usecases{text-align:center}
.usecases-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;max-width:60rem;margin:0 auto}
.usecase-card{
  padding:1.75rem 1.25rem;border-radius:var(--radius-lg);
  background:var(--card-bg);border:1px solid var(--glass-border);
  text-align:center;transition:transform 0.25s,border-color 0.25s;
}
.usecase-card:hover{transform:translateY(-4px);border-color:rgba(var(--primary-rgb),0.2)}
.usecase-card .feature-icon{margin-bottom:0.75rem}
.usecase-card h3{font-size:0.95rem;font-weight:600;margin-bottom:0.375rem}
.usecase-card p{font-size:0.82rem;color:var(--text-dim);line-height:1.55}

.privacy{text-align:center}
.privacy-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;max-width:50rem;margin:0 auto}
.privacy-item{
  padding:1.5rem 1.25rem;border-radius:var(--radius-lg);
  background:var(--card-bg);border:1px solid var(--glass-border);text-align:center;
}
.privacy-icon{
  width:3rem;height:3rem;border-radius:50%;margin:0 auto 0.75rem;
  display:flex;align-items:center;justify-content:center;
  background:rgba(34,197,94,0.1);
}
.privacy-icon svg{width:1.5rem;height:1.5rem}
.privacy-item h3{font-size:0.9rem;font-weight:600;margin-bottom:0.25rem}
.privacy-item p{font-size:0.8rem;color:var(--text-dim);line-height:1.5}

.faq{text-align:center}
.faq-list{max-width:43.75rem;margin:0 auto;text-align:left}
.faq-item{border-bottom:1px solid var(--glass-border)}
.faq-q{
  width:100%;background:none;border:none;color:var(--text-main);
  font-size:0.92rem;font-weight:600;padding:1.125rem 0;
  display:flex;justify-content:space-between;align-items:center;
  cursor:pointer;text-align:left;
}
.faq-q::after{content:'+';font-size:1.2rem;color:var(--text-muted);transition:transform 0.2s;flex-shrink:0;margin-left:1rem}
.faq-item.open .faq-q::after{transform:rotate(45deg);color:var(--primary)}
.faq-a{
  max-height:0;overflow:hidden;transition:max-height 0.3s ease,padding 0.3s;
  font-size:0.85rem;color:var(--text-dim);line-height:1.65;
}
.faq-item.open .faq-a{max-height:12.5rem;padding-bottom:1.125rem}

.integrations{text-align:center}
.integrations-row{
  display:flex;gap:2.5rem;justify-content:center;align-items:center;
  flex-wrap:wrap;max-width:60rem;margin:2rem auto 0;
}
.integration-item{
  display:flex;flex-direction:column;align-items:center;gap:0.75rem;
  font-size:0.85rem;color:var(--text-muted);
}
.integration-item .feature-icon{width:5rem;height:5rem;border-radius:1.25rem}
.integration-item .feature-icon svg{width:2.5rem;height:2.5rem}
.integration-item:hover .feature-icon{transform:scale(1.1);box-shadow:0 4px 20px rgba(var(--primary-rgb),0.2)}

.footer{
  padding:1.5rem 0;min-height:auto;
  border-top:1px solid var(--glass-border);
  margin-top:auto;
  width:100%;
}
.footer .container{
  display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:1.5rem;
}
.footer-copy{font-size:0.8rem;color:var(--text-muted)}
.footer-links{display:flex;gap:1.5rem}
.footer-links a{font-size:0.8rem;color:var(--text-muted);transition:color 0.2s}
.footer-links a:hover{color:var(--text-main)}

.testimonials{text-align:center}
.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;max-width:60rem;margin:0 auto}
.testimonial-card{
  padding:1.75rem 1.5rem;border-radius:var(--radius-lg);
  background:var(--card-bg);border:1px solid var(--glass-border);
  text-align:left;display:flex;flex-direction:column;gap:1rem;
  transition:transform 0.25s,border-color 0.25s;
}
.testimonial-card:hover{transform:translateY(-4px);border-color:rgba(var(--primary-rgb),0.2)}
.testimonial-quote{font-size:0.88rem;color:var(--text-dim);line-height:1.65;font-style:italic;flex:1}
.testimonial-quote::before{content:'"';font-size:1.6rem;color:var(--primary);font-weight:700;line-height:0;vertical-align:-0.3em;margin-right:0.25rem}
.testimonial-author{display:flex;align-items:center;gap:0.75rem}
.testimonial-avatar{
  width:2.5rem;height:2.5rem;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;font-weight:700;color:#fff;flex-shrink:0;
}
.testimonial-name{font-size:0.85rem;font-weight:600;color:var(--text-main)}
.testimonial-role{font-size:0.72rem;color:var(--text-muted)}
body.light .testimonial-card{background:rgba(0,0,0,0.015);border-color:rgba(0,0,0,0.06)}
body.light .testimonial-card:hover{border-color:rgba(var(--primary-rgb),0.15)}

.billing-toggle{
  display:inline-flex;align-items:center;gap:0.125rem;
  background:rgba(255,255,255,0.06);border-radius:999px;padding:0.1875rem;
  margin-bottom:2rem;
}
.billing-btn{
  padding:0.375rem 1.125rem;border-radius:999px;font-size:0.8rem;font-weight:600;
  border:none;cursor:pointer;transition:all 0.2s;
  background:transparent;color:var(--text-muted);
}
.billing-btn.active{background:rgba(var(--primary-rgb),0.25);color:var(--text-main)}
.billing-btn:hover:not(.active){color:var(--text-dim)}
.billing-save{font-size:0.7rem;color:var(--color-success, #22c55e);font-weight:700;margin-left:0.375rem}
body.light .billing-toggle{background:rgba(0,0,0,0.04)}
body.light .billing-btn.active{background:rgba(var(--primary-rgb),0.15);color:var(--text-main)}

.btn-download{
  display:inline-flex;align-items:center;gap:0.5rem;
  padding:0.6875rem 1.625rem;border-radius:var(--radius-md);font-size:0.9rem;font-weight:500;
  background:rgba(255,255,255,0.04);color:var(--text-dim);
  border:1px solid var(--glass-border);cursor:pointer;
  transition:background 0.2s,color 0.2s;
}
.btn-download:hover{background:rgba(255,255,255,0.08);color:var(--text-main)}
.btn-download svg{width:1.125rem;height:1.125rem}
body.light .btn-download{background:rgba(0,0,0,0.03);border-color:rgba(0,0,0,0.1);color:var(--text-dim)}
body.light .btn-download:hover{background:rgba(0,0,0,0.06);color:var(--text-main)}

[data-lang-en]{display:none}
[data-lang-ru]{display:inline}
html[lang="en"] [data-lang-en]{display:inline}
html[lang="en"] [data-lang-ru]{display:none}

body.light .nav-links a{color:var(--text-dim)}
body.light .nav-links a:hover{color:var(--text-main)}
body.light .nav-cta{color:#fff !important}
body.light .lang-btn{color:var(--text-muted)}
body.light .lang-btn.active{color:var(--text-main);background:rgba(var(--primary-rgb),0.15)}
body.light .hero-badge{background:rgba(var(--primary-rgb),0.08);border-color:rgba(var(--primary-rgb),0.15)}
body.light .feature-card{background:rgba(0,0,0,0.015);border-color:rgba(0,0,0,0.06)}
body.light .feature-card:hover{border-color:rgba(var(--primary-rgb),0.15);box-shadow:0 12px 40px rgba(0,0,0,0.08)}
body.light .showcase-window{background:none;border-color:transparent;box-shadow:none}
body.light .showcase-bar{background:none;border-color:transparent}
body.light .showcase-img{background:none !important}
body.light .pricing-card{background:rgba(0,0,0,0.015);border-color:rgba(0,0,0,0.06)}
body.light .pricing-card.featured{background:rgba(var(--primary-rgb),0.03);border-color:rgba(var(--primary-rgb),0.15)}
body.light .pricing-btn--ghost{background:rgba(0,0,0,0.03);border-color:rgba(0,0,0,0.1);color:var(--text-dim)}
body.light .pricing-btn--ghost:hover{background:rgba(0,0,0,0.06);color:var(--text-main)}
body.light .cta-box{background:linear-gradient(135deg,rgba(var(--primary-rgb),0.06),rgba(var(--secondary-rgb),0.04));border-color:rgba(var(--primary-rgb),0.1)}
body.light .btn-ghost{background:rgba(0,0,0,0.03);border-color:rgba(0,0,0,0.1);color:var(--text-dim)}
body.light .btn-ghost:hover{background:rgba(0,0,0,0.06);color:var(--text-main)}
body.light .footer{border-color:rgba(0,0,0,0.08)}
body.light .nav-links.open{background:rgba(248,250,252,0.97)}

@media(max-width:1100px){
  .features-grid{grid-template-columns:repeat(2,1fr)}
  .usecases-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:1024px){
  .footer .container{flex-direction:column;text-align:center;gap:1rem}
}
@media(max-width:768px){
  html{scroll-snap-type:none}
  section{padding:3.25rem 0;min-height:auto;scroll-snap-align:none}
  .nav-links{display:none}
  .nav-burger{display:block}
  .nav-links.open{
    display:flex;flex-direction:column;
    position:absolute;top:100%;left:0;right:0;
    background:rgba(1,4,9,0.95);backdrop-filter:blur(20px);
    padding:1.25rem 1.5rem;gap:1rem;
    border-bottom:1px solid var(--glass-border);
    z-index:99;max-height:calc(100vh - 3.5rem);overflow-y:auto;
  }
  .hero h1{font-size:2.2rem}
  .hero p{font-size:0.88rem}
  .hero-stats{gap:1.5rem;flex-wrap:wrap}
  .stats-bar{gap:1.5rem;padding:1rem 1.25rem;max-width:100%}
  .features-grid{grid-template-columns:repeat(2,1fr)}
  .pricing-grid{grid-template-columns:repeat(2,1fr);max-width:100%}
  .hero-buttons{flex-direction:column;align-items:center}
  .btn-primary,.btn-ghost{width:100%;max-width:20rem;text-align:center}
  .steps-grid{flex-direction:column;gap:1.5rem}
  .step-arrow{display:none}
  .usecases-grid{grid-template-columns:1fr}
  .testimonials-grid{grid-template-columns:1fr;max-width:100%}
  .testimonial-card{max-width:90%;margin:0 auto}
  .privacy-grid{grid-template-columns:1fr}
  .comparison-table{font-size:0.8rem}
  .comparison-table th,.comparison-table td{padding:0.5rem 0.375rem}
}

@media(max-width:480px){
  .container{padding:0 1rem}
  section{padding:2rem 0}
  .hero{padding-top:6.25rem}
  .hero-buttons{gap:1rem}
  .btn-primary,.btn-ghost{max-width:calc(100% - 1rem)}
  .stats-bar{flex-direction:column;gap:0.75rem;text-align:center}
  .features-grid{grid-template-columns:1fr}
  .feature-card{padding:1.5rem 1.25rem}
  .pricing-grid{grid-template-columns:1fr;max-width:100%}
  .pricing-card{padding:1.75rem 1.25rem}
  .integrations-row{gap:1.5rem}
}

.text-center{text-align:center}

@keyframes fadeUp{
  from{opacity:0;transform:translateY(1.5rem)}
  to{opacity:1;transform:translateY(0)}
}
.animate{opacity:0;transform:translateY(1.5rem);transition:opacity 0.6s ease,transform 0.6s ease}
.animate.visible{opacity:1;transform:translateY(0)}

@media(prefers-reduced-motion:reduce){
  .animate{opacity:1;transform:none;transition:none}
  #particles{display:none}
  html{scroll-snap-type:none}
  section{scroll-snap-align:none}
}

/* A11y: visible focus rings for keyboard navigation */
.nav-burger:focus-visible,
.nav-links a:focus-visible,
.lang-btn:focus-visible,
.theme-toggle:focus-visible,
.btn-primary:focus-visible,
.btn-ghost:focus-visible,
.nav-cta:focus-visible,
.pricing-btn:focus-visible,
.faq-q:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:2px;
}
/* Mobile nav: ensure open state links are keyboard-accessible */
@media(max-width:768px){
  .nav-links.open a:focus-visible{
    outline:2px solid var(--primary);
    outline-offset:2px;
    border-radius:4px;
  }
}

/* ── Theme Color Dots ────────────────────────────── */
.theme-dots{
  display:flex;align-items:center;gap:0.375rem;
}
.theme-dot{
  width:1rem;height:1rem;border-radius:50%;border:2px solid transparent;
  cursor:pointer;transition:transform 0.2s,border-color 0.2s,box-shadow 0.2s;
  padding:0;flex-shrink:0;
}
.theme-dot:hover{transform:scale(1.2)}
.theme-dot.active{border-color:var(--text-main);box-shadow:0 0 6px rgba(var(--primary-rgb),0.5)}
.theme-dot:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
@media(max-width:768px){
  .theme-dots{justify-content:center;margin:0.5rem 0}
}