/*
Theme Name: Sumaiya Traders App
Theme URI: https://sumaiyatraders.dainiklakshmipur.site/
Author: SUMAIYA TRADERS
Description: A modern, responsive WordPress business/article theme inspired by contemporary software-company layouts. Original design; no third-party site assets or content are included.
Version: 2.4.6
License: GPL-2.0-or-later
Text Domain: sumaiya-app
*/

:root{
  --brand:#5b46f0;
  --brand2:#7c5cff;
  --dark:#101828;
  --muted:#667085;
  --line:#e7eaf0;
  --bg:#f7f8fc;
  --white:#fff;
  --radius:18px;
  --shadow:0 12px 40px rgba(16,24,40,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--dark);background:#fff;line-height:1.75}
a{color:var(--brand);text-decoration:none}
a:hover{opacity:.88}
img{max-width:100%;height:auto}
.container{width:min(1180px,92%);margin-inline:auto}
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.header-inner{min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:10px;color:var(--dark);font-weight:800;font-size:20px}
.brand-logo-wrap{position:relative;display:block;flex:0 0 auto;line-height:0;overflow:hidden;border-radius:10px;isolation:isolate}
.brand-logo{height:52px;width:auto;display:block;object-fit:contain;position:relative;z-index:1}
/* Professional light sweep across the logo; loops continuously. */
.brand-logo-wrap::after{content:"";position:absolute;z-index:2;top:-25%;left:-65%;width:30%;height:150%;background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,0) 18%,rgba(255,255,255,.9) 50%,rgba(255,255,255,0) 82%,transparent 100%);filter:blur(1px);transform:skewX(-18deg);pointer-events:none;animation:logoLightSweep 2.8s cubic-bezier(.4,0,.2,1) infinite}
@keyframes logoLightSweep{0%{left:-65%;opacity:0}8%{opacity:.15}18%{opacity:.95}32%{opacity:.65}48%{left:135%;opacity:0}100%{left:135%;opacity:0}}
.brand-mark{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--brand),var(--brand2));display:grid;place-items:center;color:#fff;font-weight:900}
.download-btn{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,#1e4d9b,#0a2a6b);color:#fff !important;padding:12px 18px;border-radius:10px;font-weight:700;font-size:14px;transition:.2s;text-decoration:none}
.download-btn:hover{opacity:.9;transform:translateY(-2px);color:#fff !important}
.nav{display:flex;gap:24px;align-items:center}
.nav a{color:#344054;font-weight:600;font-size:14px}
.nav .cta{background:var(--dark);color:#fff;padding:10px 16px;border-radius:999px}
.menu-toggle{display:none;border:0;background:transparent;font-size:26px}
.hero{padding:82px 0 50px;background:radial-gradient(circle at 80% 10%,#ebe7ff,transparent 36%),linear-gradient(180deg,#fff,#f7f8fc)}
.hero-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:40px;align-items:center}
.eyebrow{display:inline-flex;padding:7px 12px;border:1px solid #ddd8ff;background:#f5f2ff;color:#5140d8;border-radius:999px;font-weight:700;font-size:12px}
.hero h1{font-size:clamp(36px,5vw,64px);line-height:1.08;letter-spacing:-1.8px;margin:18px 0}
.hero p{font-size:18px;color:var(--muted);max-width:720px}
.hero-card{background:#fff;border:1px solid var(--line);border-radius:26px;padding:28px;box-shadow:var(--shadow)}
.hero-card .metric{font-size:38px;font-weight:900;color:var(--brand)}
.hero-card small{color:var(--muted)}
.section{padding:72px 0}
.section.alt{background:var(--bg)}
.section-title{max-width:760px;margin-bottom:34px}
.section-title h2{font-size:clamp(28px,4vw,42px);line-height:1.2;margin:0 0 10px}
.section-title p{color:var(--muted);margin:0}
.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:36px;align-items:start}
.content-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:clamp(22px,4vw,42px);box-shadow:0 8px 28px rgba(16,24,40,.04)}
.meta{display:flex;gap:18px;flex-wrap:wrap;color:var(--muted);font-size:14px;margin:0 0 24px}
.toc{position:sticky;top:98px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px}
.toc strong{display:block;margin-bottom:10px}
.toc a{display:block;padding:7px 0;color:#475467;font-size:14px}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:14px}
table{width:100%;border-collapse:collapse;min-width:700px}
th,td{padding:14px 16px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{background:#f7f8fc;font-size:13px}
.company-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.company-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px;transition:.2s;box-shadow:0 5px 20px rgba(16,24,40,.04)}
.company-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.company-no{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#eeeaff;color:#503ee0;font-weight:800}
.company-card h3{margin:14px 0 8px}
.company-card p{color:var(--muted);font-size:14px}
.tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.tag{font-size:12px;padding:5px 9px;border-radius:999px;background:#f2f4f7;color:#475467}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.step{padding:22px;border:1px solid var(--line);border-radius:16px;background:#fff}
.step b{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--brand);color:#fff;margin-bottom:12px}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);padding:18px 0}
.faq summary{cursor:pointer;font-weight:750}
.cta-box{padding:42px;border-radius:26px;background:linear-gradient(135deg,#15192b,#30236f);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:24px}
.cta-box p{color:#d7d8e4}
.button{display:inline-flex;align-items:center;justify-content:center;background:#fff;color:#171a2b;padding:12px 18px;border-radius:999px;font-weight:800}
.site-footer{background:#0b1020;color:#c5cad8;padding:54px 0 24px}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:30px}
.site-footer h3{color:#fff}
.site-footer a{color:#c5cad8}
.copyright{border-top:1px solid rgba(255,255,255,.12);margin-top:35px;padding-top:20px;font-size:13px}
.wp-block-image{margin:24px 0}
.alignwide{max-width:1180px;margin-inline:auto}
@media(max-width:900px){
  .nav{display:none}.menu-toggle{display:block}
  .hero-grid,.article-layout{grid-template-columns:1fr}
  .toc{position:static}
  .company-grid,.steps{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .hero{padding-top:54px}.section{padding:52px 0}
  .company-grid,.steps,.footer-grid{grid-template-columns:1fr}
  .cta-box{flex-direction:column;align-items:flex-start}
}


/* ===== Animated Header Role: Apps Developer ===== */
.brand{
  display:flex;
  align-items:center;
  gap:11px;
}
.brand-logo{flex:0 0 auto;}
.brand-role{
  display:inline-flex;
  align-items:center;
  gap:.42em;
  white-space:nowrap;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  font-size:clamp(15px,1.65vw,20px);
  font-weight:900;
  letter-spacing:-.45px;
  line-height:1;
  margin-left:0;
  vertical-align:middle;
}
.brand-word{
  display:inline-block;
  position:relative;
  padding:.16em .08em;
  opacity:.72;
  transform:translate3d(0,0,0) scale(.96);
  will-change:transform,opacity,filter;
  animation-duration:4s;
  animation-fill-mode:both;
  animation-timing-function:cubic-bezier(.22,1,.36,1);
  animation-iteration-count:infinite;
  animation-play-state:running;
}
.brand-word-1{
  color:#2563eb;
  text-shadow:0 3px 12px rgba(37,99,235,.20);
  animation-name:appsWord;
}
.brand-word-2{
  color:#7c3aed;
  text-shadow:0 3px 12px rgba(124,58,237,.20);
  animation-name:developerWord;
}
@keyframes appsWord{
  0%,100%{opacity:.58;transform:translate3d(0,0,0) scale(.96);filter:brightness(.9);}
  8%{opacity:1;transform:translate3d(0,-3px,0) scale(1.08);filter:brightness(1.12) drop-shadow(0 5px 10px rgba(37,99,235,.25));}
  18%{opacity:1;transform:translate3d(0,0,0) scale(1);filter:brightness(1);}
  45%{opacity:.62;transform:translate3d(0,0,0) scale(.97);filter:brightness(.92);}
}
@keyframes developerWord{
  0%,45%,100%{opacity:.58;transform:translate3d(0,0,0) scale(.96);filter:brightness(.9);}
  53%{opacity:1;transform:translate3d(0,-3px,0) scale(1.08);filter:brightness(1.12) drop-shadow(0 5px 10px rgba(124,58,237,.25));}
  63%{opacity:1;transform:translate3d(0,0,0) scale(1);filter:brightness(1);}
  90%{opacity:.62;transform:translate3d(0,0,0) scale(.97);filter:brightness(.92);}
}
@media(max-width:600px){
  .brand{gap:8px}
  .brand-role{font-size:14px;gap:.30em;letter-spacing:-.35px}
  .brand-logo{height:46px}
  .brand-logo-wrap{border-radius:9px}
}
@media(prefers-reduced-motion:reduce){
  .brand-word{animation:none;opacity:1;transform:none;filter:none}
}

/* ===== Animations & Coding Scene ===== */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes headerSlide {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes codeType {
  from { width: 0; }
  to { width: 100%; }
}

.site-header {
  animation: headerSlide 0.6s ease-out;
}
.animate-fade-up {
  animation: fadeUp 0.8s ease-out both;
}
.delay-1 { animation-delay: 0.2s; }

.hero-visual {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.coding-scene {
  position: relative;
  background: linear-gradient(145deg, #1a1f36, #0d1225);
  border-radius: 22px;
  padding: 28px 24px 20px;
  min-height: 200px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(16,24,40,.18);
}
.laptop {
  position: relative;
  z-index: 2;
  max-width: 280px;
  margin: 0 auto;
}
.laptop-screen {
  background: #0b1020;
  border: 3px solid #2a3350;
  border-radius: 10px 10px 4px 4px;
  padding: 14px 16px;
  min-height: 110px;
  font-family: "SF Mono", Consolas, monospace;
  font-size: 12px;
  line-height: 1.55;
  color: #e2e8f0;
  position: relative;
  overflow: hidden;
}
.code-line { white-space: nowrap; }
.code-line.indent { padding-left: 16px; }
.code-kw { color: #c084fc; }
.code-fn { color: #67e8f9; }
.code-comment { color: #64748b; }
.code-cursor {
  display: inline-block;
  width: 8px;
  height: 14px;
  background: #67e8f9;
  margin-left: 2px;
  vertical-align: middle;
  animation: blink 1s step-end infinite;
}
.laptop-base {
  height: 10px;
  background: #2a3350;
  border-radius: 0 0 8px 8px;
  margin: 0 10px;
}
.person {
  position: absolute;
  bottom: 12px;
  left: 18px;
  z-index: 3;
}
.person-head {
  width: 22px;
  height: 22px;
  background: #fcd9b0;
  border-radius: 50%;
  margin: 0 auto 2px;
}
.person-body {
  width: 30px;
  height: 28px;
  background: #3b82f6;
  border-radius: 8px 8px 4px 4px;
  margin: 0 auto;
}
.floating-icons {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.float-icon {
  position: absolute;
  font-size: 18px;
  animation: float 3s ease-in-out infinite;
  opacity: 0.85;
}
.float-icon.i1 { top: 18px; right: 22px; animation-delay: 0s; }
.float-icon.i2 { top: 55px; right: 50px; animation-delay: 0.6s; font-size: 15px; }
.float-icon.i3 { bottom: 50px; right: 28px; animation-delay: 1.2s; color: #67e8f9; font-family: monospace; font-weight: 700; }

@media (max-width: 900px) {
  .coding-scene { min-height: 180px; }
}

/* ===== Expandable Service Cards ===== */
.company-card {
  cursor: pointer;
  list-style: none;
  transition: transform .2s, box-shadow .2s;
}
.company-card summary {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  list-style: none;
}
.company-card summary::-webkit-details-marker { display: none; }
.company-card summary::marker { content: ""; }
.company-card h3 { margin: 0; flex: 1; font-size: 16px; }
.expand-icon {
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  transition: transform .25s;
  color: inherit;
  opacity: .7;
}
.company-card[open] .expand-icon {
  transform: rotate(45deg);
}
.card-body {
  padding-top: 14px;
  margin-top: 10px;
  border-top: 1px solid rgba(0,0,0,.06);
}
.card-body p { margin: 0 0 12px; color: var(--muted); font-size: 14px; }

.company-card.color-1 { border-top: 4px solid #3b82f6; }
.company-card.color-1 .company-no { background: #dbeafe; color: #1d4ed8; }
.company-card.color-1[open] { box-shadow: 0 12px 30px rgba(59,130,246,.15); }

.company-card.color-2 { border-top: 4px solid #f59e0b; }
.company-card.color-2 .company-no { background: #fef3c7; color: #b45309; }
.company-card.color-2[open] { box-shadow: 0 12px 30px rgba(245,158,11,.15); }

.company-card.color-3 { border-top: 4px solid #10b981; }
.company-card.color-3 .company-no { background: #d1fae5; color: #047857; }
.company-card.color-3[open] { box-shadow: 0 12px 30px rgba(16,185,129,.15); }

.company-card.color-4 { border-top: 4px solid #8b5cf6; }
.company-card.color-4 .company-no { background: #ede9fe; color: #6d28d9; }
.company-card.color-4[open] { box-shadow: 0 12px 30px rgba(139,92,246,.15); }

.company-card.color-5 { border-top: 4px solid #ef4444; }
.company-card.color-5 .company-no { background: #fee2e2; color: #b91c1c; }
.company-card.color-5[open] { box-shadow: 0 12px 30px rgba(239,68,68,.15); }

.company-card.color-6 { border-top: 4px solid #06b6d4; }
.company-card.color-6 .company-no { background: #cffafe; color: #0e7490; }
.company-card.color-6[open] { box-shadow: 0 12px 30px rgba(6,182,212,.15); }


  .hero-bg-scene .coding-scene.bg-version { transform: scale(0.95); }
}


  
}


/* ===== Perfect Hero Layout ===== */
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: center;
}
.hero-content {
  position: relative;
}
.hero-text {
  position: relative;
  z-index: 2;
}
.hero-visual {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.hero-photo {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(16,24,40,.15);
  background: #e8eaf0;
}
.hero-photo img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  min-height: 260px;
  max-height: 340px;
  object-position: center;
}
@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }
  .hero-photo img {
    max-height: 280px;
  }
}

/* Footer founder photo */
.footer-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 6px;
}
.founder-photo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,0.25);
  flex-shrink: 0;
}

/* Floating WhatsApp Button */
.whatsapp-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 58px;
  height: 58px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45);
  z-index: 9999;
  transition: transform 0.25s, box-shadow 0.25s;
  text-decoration: none;
}
.whatsapp-float:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 28px rgba(37, 211, 102, 0.55);
  opacity: 1;
}
.whatsapp-float svg {
  display: block;
}
@media (max-width: 600px) {
  .whatsapp-float {
    bottom: 18px;
    right: 18px;
    width: 54px;
    height: 54px;
  }
}

/* Typewriter word-by-word animation */
.typewriter-heading {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28em;
  line-height: 1.15;
}
.typewriter-heading .tw-word {
  opacity: 0;
  transform: translateY(12px);
  display: inline-block;
  animation: twWordIn 0.45s ease-out forwards;
}
.typewriter-heading .tw-word:nth-child(1) { animation-delay: 0.15s; }
.typewriter-heading .tw-word:nth-child(2) { animation-delay: 0.30s; }
.typewriter-heading .tw-word:nth-child(3) { animation-delay: 0.45s; }
.typewriter-heading .tw-word:nth-child(4) { animation-delay: 0.60s; }
.typewriter-heading .tw-word:nth-child(5) { animation-delay: 0.80s; }
.typewriter-heading .tw-word:nth-child(6) { animation-delay: 0.95s; }
.typewriter-heading .tw-word:nth-child(7) { animation-delay: 1.10s; }
.typewriter-heading .tw-word:nth-child(8) { animation-delay: 1.25s; }
.typewriter-heading .tw-word:nth-child(9) { animation-delay: 1.40s; }

@keyframes twWordIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

.typewriter-sub {
  opacity: 0;
  animation: twWordIn 0.6s ease-out 1.6s forwards;
}

/* ===== Login Modal ===== */
.st-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.st-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(4px);
}
.st-modal-box {
  position: relative;
  background: #fff;
  border-radius: 20px;
  padding: 32px 28px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 25px 60px rgba(0,0,0,0.25);
  z-index: 1;
  animation: stModalIn 0.3s ease-out;
}
@keyframes stModalIn {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.st-modal-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  font-size: 28px;
  color: #94a3b8;
  cursor: pointer;
  line-height: 1;
}
.st-modal-logo { text-align: center; margin-bottom: 12px; }
.st-modal-box h2 {
  text-align: center;
  margin: 0 0 4px;
  font-size: 22px;
  color: #0f172a;
}
.st-modal-sub {
  text-align: center;
  color: #64748b;
  font-size: 14px;
  margin: 0 0 22px;
}
.st-login-form .st-field { margin-bottom: 14px; }
.st-login-form label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  margin-bottom: 5px;
}
.st-login-form input,
.st-login-form select {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  font-size: 15px;
  outline: none;
  transition: border 0.2s;
  background: #f8fafc;
}
.st-login-form input:focus,
.st-login-form select:focus {
  border-color: #5b46f0;
  background: #fff;
}
.st-phone-row {
  display: flex;
  gap: 8px;
}
.st-phone-row select {
  width: 110px;
  flex-shrink: 0;
}
.st-phone-row input { flex: 1; }
.st-login-btn {
  width: 100%;
  padding: 13px;
  background: linear-gradient(135deg, #5b46f0, #7c5cff);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 8px;
  transition: transform 0.15s, box-shadow 0.15s;
}
.st-login-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(91, 70, 240, 0.35);
}

/* ===== App Demo (Phone Mockup) ===== */
.st-app-demo {
  position: fixed;
  inset: 0;
  z-index: 10001;
  background: rgba(15, 23, 42, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  backdrop-filter: blur(6px);
}
.st-app-phone {
  width: 100%;
  max-width: 340px;
  background: #0f172a;
  border-radius: 32px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.4);
  border: 3px solid #1e293b;
  animation: stModalIn 0.35s ease-out;
}
.st-app-status {
  display: flex;
  justify-content: space-between;
  padding: 10px 20px 4px;
  font-size: 12px;
  color: #94a3b8;
}
.st-app-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px 16px;
  background: linear-gradient(135deg, #1e1b4b, #312e81);
  color: #fff;
}
.st-app-logo {
  height: 40px;
  width: auto;
  background: #fff;
  border-radius: 10px;
  padding: 4px 8px;
}
.st-app-header strong { display: block; font-size: 15px; }
.st-app-header small { font-size: 11px; opacity: 0.75; }
.st-app-body {
  background: #f8fafc;
  padding: 20px 16px 16px;
  min-height: 360px;
}
.st-app-welcome {
  text-align: center;
  margin-bottom: 18px;
}
.st-app-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #5b46f0;
  margin-bottom: 8px;
}
.st-app-welcome h3 { margin: 0 0 4px; font-size: 18px; color: #0f172a; }
.st-app-welcome p { margin: 0; font-size: 12px; color: #64748b; word-break: break-all; }
.st-app-menu { display: grid; gap: 8px; margin-bottom: 16px; }
.st-app-item {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 600;
  color: #334155;
  display: flex;
  align-items: center;
  gap: 10px;
}
.st-app-cta {
  display: block;
  text-align: center;
  background: #25D366;
  color: #fff !important;
  padding: 12px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
}
.st-app-close {
  display: block;
  width: 100%;
  padding: 14px;
  background: #1e293b;
  color: #94a3b8;
  border: none;
  font-size: 14px;
  cursor: pointer;
}
.st-app-close:hover { color: #fff; }

/* Login / Sign Up Tabs */
.st-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 18px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
}
.st-tab {
  flex: 1;
  padding: 11px;
  border: none;
  background: #f8fafc;
  font-size: 14px;
  font-weight: 700;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s;
}
.st-tab.active {
  background: linear-gradient(135deg, #5b46f0, #7c5cff);
  color: #fff;
}
.st-form-panel { display: none; }
.st-form-panel.active { display: block; }


/* ===== Language toggle + Day/Night controls — v2.4.6 ===== */
.header-inner{gap:14px}
.header-tools{display:flex;align-items:center;justify-content:center;gap:8px;margin-left:auto;flex-shrink:0}
.lang-toggle,.theme-toggle{font:inherit;border:0;cursor:pointer;transition:all .25s ease}
.lang-toggle{min-width:82px;padding:8px 13px;border:1px solid #e5e7eb;border-radius:999px;background:rgba(255,255,255,.92);color:#344054;font-size:12px;font-weight:800;box-shadow:0 4px 14px rgba(15,23,42,.06)}
.lang-toggle:hover,.theme-toggle:hover{transform:translateY(-1px)}
.theme-toggle{display:inline-flex;align-items:center;gap:6px;padding:8px 11px;border-radius:999px;background:#101828;color:#fff;font-size:12px;font-weight:800;box-shadow:0 5px 16px rgba(15,23,42,.16)}
.theme-icon{font-size:15px;line-height:1}
.goog-te-banner-frame,.skiptranslate iframe{display:none!important}
body{top:0!important}
.goog-te-gadget{display:none!important}
html.dark-mode body{background:#0b1220;color:#dbe4f0}
html.dark-mode .site-header,html.dark-mode .nav,html.dark-mode .card,html.dark-mode .service-card,html.dark-mode .post-card,html.dark-mode .st-app-item,html.dark-mode input,html.dark-mode textarea,html.dark-mode select{background:#111827!important;color:#e5e7eb!important;border-color:#263244!important}
html.dark-mode .nav a,html.dark-mode .brand{color:#f8fafc}
html.dark-mode .nav .cta{background:#fff;color:#101828}
html.dark-mode .lang-toggle{background:#111827;border-color:#334155;color:#e5e7eb}
html.dark-mode .theme-toggle{background:#f8fafc;color:#111827}
html.dark-mode .st-app-welcome h3{color:#f8fafc}
html.dark-mode .st-app-welcome p,.dark-mode .muted{color:#94a3b8}
@media(max-width:900px){.header-tools{margin-left:auto}.theme-label{display:none}.theme-toggle{padding:8px 10px}.header-inner{flex-wrap:wrap}.header-tools{order:2}.menu-toggle{order:1}.brand{order:0}}
@media(prefers-reduced-motion:reduce){.theme-toggle,.lang-toggle{transition:none}}