/* ============================================================
   SITE (split from addons.css)
   ============================================================ */

/* ============================================================
   SITE (brascast-site.html)
   ============================================================ */

/* Shared section heads on the page */

/* --- HERO --- */
.st-hero { position: relative; overflow: hidden; padding: calc(var(--nav-h) + 80px) 0 80px; background: linear-gradient(180deg, var(--bg-soft) 0%, #fff 100%); }
.st-hero-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.st-blob { position: absolute; border-radius: 50%; pointer-events: none; }
.st-blob-1 { width: 680px; height: 680px; background: radial-gradient(circle, rgba(23,141,114,.22) 0%, rgba(23,141,114,.08) 35%, transparent 70%); top: -200px; right: -200px; }
.st-blob-2 { width: 540px; height: 540px; background: radial-gradient(circle, rgba(42,173,142,.22) 0%, rgba(42,173,142,.08) 35%, transparent 70%); bottom: -160px; left: -160px; }
.st-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: start; position: relative; z-index: 1; }
.st-hero-text .tag { margin-bottom: 20px; }
.st-hero-text h1 { font-size: clamp(28px, 3.6vw, 44px); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: var(--text); margin: 0 0 18px; text-wrap: balance; }
.st-hero-text h1 .accent { color: var(--green); }
.st-hero-text .sub { font-size: 20px; color: var(--text-muted); line-height: 1.3; margin-bottom: 28px; max-width: 520px; text-wrap: pretty; }
.st-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.st-hero-trust { display: flex; align-items: center; gap: 12px; margin-top: 36px; }
.st-trust-dots { display: flex; }
.st-trust-dots span { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--green), var(--green-mid)); border: 2.5px solid #fff; margin-left: -8px; box-shadow: 0 2px 6px rgba(15,30,27,.1); }
.st-trust-dots span:first-child { margin-left: 0; }
.st-trust-dots span:nth-child(2) { background: linear-gradient(135deg, var(--green-mid), #4ed9b6); }
.st-trust-dots span:nth-child(3) { background: linear-gradient(135deg, var(--green-dark), var(--green)); }
.st-trust-dots span:nth-child(4) { background: linear-gradient(135deg, #4ed9b6, var(--green-light)); }
.st-trust-text { font-size: 14px; color: var(--text-muted); line-height: 1.4; }
.st-trust-text strong { color: var(--text); font-weight: 700; }

/* Browser mockup */
.st-hero-mockup { position: relative; }
.st-browser { background: #fff; border: 1.5px solid var(--border); border-radius: 16px; box-shadow: 0 24px 60px rgba(15,30,27,.14), 0 4px 16px rgba(15,30,27,.05); overflow: hidden; transform: rotate(-1deg); transition: transform .4s; }
.st-browser:hover { transform: rotate(0deg) translateY(-4px); }
.st-browser-body { padding: 14px; display: flex; flex-direction: column; gap: 7px; min-height: 360px; }
.st-browser-body--img { padding: 0; min-height: 0; display: block; }
.st-browser-body--img img { width: 100%; height: auto; display: block; }

/* Player bar pinned to the top (flush with the browser-body edge) */
.st-prev-topbar { display: flex; align-items: center; gap: 8px; margin: -14px -14px 0; padding: 4px 14px; background: linear-gradient(90deg, var(--green) 0%, var(--green-dark) 100%); border-radius: 0; color: #fff; }
.st-prev-cover { width: 30px; height: 30px; border-radius: 6px; background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.9); flex-shrink: 0; }
.st-prev-cover svg { width: 14px; height: 14px; }
.st-prev-cover--sm { width: 20px; height: 20px; }
.st-prev-cover--sm svg { width: 10px; height: 10px; }
.st-prev-song-info { flex: 1; line-height: 1.25; min-width: 0; color: #fff; }
.st-prev-song-info strong { display: block; font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-prev-song-info span { font-size: 10px; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-prev-play { width: 22px; height: 22px; border-radius: 50%; background: #fff; color: var(--green); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 2px 6px rgba(0,0,0,.18); }
.st-prev-play svg { width: 9px; height: 9px; margin-left: 1px; }

/* Full-width banner with logo only (player floats above) */
.st-prev-banner { position: relative; width: 100%; min-height: 110px; border-radius: 10px; overflow: hidden; }
.st-prev-banner-bg { position: absolute; inset: 0; background: linear-gradient(135deg, var(--green) 0%, var(--green-dark) 70%, #0a4a3c 100%); }
.st-prev-banner-bg::after { content: ''; position: absolute; top: -50px; right: -50px; width: 180px; height: 180px; border-radius: 50%; background: rgba(255,255,255,.08); }
.st-prev-banner-content { position: relative; height: 100%; min-height: 110px; display: flex; align-items: center; justify-content: center; padding: 14px; }
.st-prev-banner-logo { display: flex; align-items: center; justify-content: center; gap: 10px; color: #fff; }
.st-prev-banner-logo svg { width: 28px; height: 28px; }
.st-prev-banner-logo span { font-size: 22px; font-weight: 800; letter-spacing: .04em; }

/* Menu rendered as a card */
.st-prev-nav { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 9px 12px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 8px; }
.st-prev-link { font-size: 10.5px; font-weight: 600; color: var(--text-muted); transition: color .15s; }
.st-prev-link.is-active { color: var(--green); }

/* 3 columns: side - main (wider) - side */
.st-prev-grid { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 8px; align-items: start; }
.st-prev-col-stack { display: flex; flex-direction: column; gap: 8px; }
.st-prev-card { background: #fff; border-radius: 8px; border: 1px solid var(--border); overflow: hidden; }
.st-prev-card--side { padding: 9px 10px; display: flex; flex-direction: column; gap: 3px; }
.st-prev-card-title { font-size: 9px; font-weight: 800; color: var(--green); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 2px; }
.st-prev-side-row { display: flex; align-items: center; gap: 6px; font-size: 10px; }
.st-prev-side-row--active { background: var(--green-light); border-radius: 4px; padding: 2px 4px; margin: 0 -4px; }
.st-prev-side-time { font-size: 9px; font-weight: 700; color: var(--green); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.st-prev-side-name { font-size: 10px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Central card - news list */
.st-prev-card--main { display: flex; flex-direction: column; padding: 9px 10px; gap: 5px; }
.st-prev-news-list { display: flex; flex-direction: column; gap: 5px; flex: 1; }
.st-prev-news-row { display: flex; align-items: center; gap: 8px; }
.st-prev-news-thumb { position: relative; width: 60px; height: 38px; border-radius: 5px; flex-shrink: 0; overflow: hidden; background: linear-gradient(135deg, #f5b73a 0%, #ed7853 50%, #b6294a 100%); }
.st-prev-news-thumb::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 70% 30%, rgba(255,255,255,.25), transparent 60%); }
.st-prev-news-thumb--alt { background: linear-gradient(135deg, #4a7ba5 0%, #1d3557 50%, #0a1a2e 100%); }
.st-prev-news-thumb-tag { position: absolute; bottom: 0; left: 0; right: 0; padding: 2px 4px; background: #b6294a; color: #fff; font-size: 7px; font-weight: 800; letter-spacing: .06em; text-align: center; }
.st-prev-news-thumb--alt .st-prev-news-thumb-tag { background: #1d3557; }
.st-prev-news-info { flex: 1; min-width: 0; line-height: 1.25; display: flex; flex-direction: column; gap: 2px; }
.st-prev-news-date { font-size: 8.5px; font-weight: 700; color: #b6294a; font-variant-numeric: tabular-nums; }
.st-prev-news-info strong { font-size: 10px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-prev-news-all { display: block; padding-top: 5px; border-top: 1px solid var(--border); font-size: 9.5px; font-weight: 700; color: var(--text); cursor: pointer; }

/* Decorative "Request your song" card-button */
.st-prev-music-btn { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 11px 8px; background: linear-gradient(135deg, #5a6670 0%, #3a4248 100%); color: rgba(255,255,255,.92); border-radius: 8px; border: 1px solid rgba(255,255,255,.08); cursor: pointer; position: relative; overflow: hidden; }
.st-prev-music-btn::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 15% 50%, rgba(255,255,255,.08), transparent 50%); pointer-events: none; }
.st-prev-music-btn svg { width: 16px; height: 16px; color: rgba(255,255,255,.8); flex-shrink: 0; position: relative; }
.st-prev-music-btn span { font-size: 9px; font-weight: 600; letter-spacing: .02em; position: relative; line-height: 1.2; }
.st-prev-music-btn strong { display: block; font-size: 11px; font-weight: 800; letter-spacing: .04em; }

/* Filled card title (header style) */
.st-prev-card-title--filled { display: flex; align-items: center; gap: 5px; background: var(--bg-soft); border-bottom: 1px solid var(--border); margin: -9px -10px 6px; padding: 6px 10px; color: var(--text); font-size: 9.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.st-prev-card-title--filled svg { width: 11px; height: 11px; color: var(--green); flex-shrink: 0; }

/* Top Tracks card */
.st-prev-top-list { display: flex; flex-direction: column; gap: 5px; padding: 1px 0; }
.st-prev-top-row { display: flex; align-items: center; gap: 8px; }
.st-prev-top-avatar { position: relative; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--green-mid), var(--green)); flex-shrink: 0; border: 1.5px solid #fff; box-shadow: 0 0 0 1px var(--border); }
.st-prev-top-row:nth-child(1) .st-prev-top-avatar { background: linear-gradient(135deg, #4a7ba5, #1d3557); }
.st-prev-top-row:nth-child(2) .st-prev-top-avatar { background: linear-gradient(135deg, #f5b73a, #d97048); }
.st-prev-top-row:nth-child(3) .st-prev-top-avatar { background: linear-gradient(135deg, #ed7853, #b6294a); }
.st-prev-top-row:nth-child(4) .st-prev-top-avatar { background: linear-gradient(135deg, #7e57c2, #4527a0); }
.st-prev-top-num { position: absolute; bottom: -3px; left: -3px; width: 14px; height: 14px; border-radius: 50%; background: #e53935; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 800; border: 1.5px solid #fff; }
.st-prev-top-info { flex: 1; min-width: 0; line-height: 1.2; }
.st-prev-top-info strong { display: block; font-size: 9.5px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-prev-top-info span { font-size: 8.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.st-float-badge { position: absolute; background: #fff; border: 1.5px solid var(--border); border-radius: 14px; padding: 10px 14px; box-shadow: 0 8px 24px rgba(15,30,27,.1); display: flex; align-items: center; gap: 10px; z-index: 2; }
.st-float-badge--top { top: -16px; right: -10px; }
.st-float-badge--bottom { bottom: 24px; left: -24px; }
.st-float-icon { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.st-float-icon--ssl { background: var(--green-light); color: var(--green); }
.st-float-icon--mobile { background: #fff4e0; color: #d97706; }
.st-float-icon svg { width: 16px; height: 16px; }
.st-float-text strong { display: block; font-size: 13px; font-weight: 700; color: var(--text); line-height: 1.2; }
.st-float-text span { font-size: 11px; color: var(--text-muted); }

/* --- TEMPLATES --- */
.st-templates { padding: 96px 0; background: var(--bg); }
.st-templates-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.st-tpl-card { background: #fff; border: 1.5px solid var(--border); border-radius: var(--radius-md); overflow: hidden; transition: transform .25s, box-shadow .25s, border-color .25s; }
.st-tpl-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--green-light); }
.st-tpl-card--featured { border: 2px solid var(--green); box-shadow: 0 12px 32px rgba(23,141,114,.14); position: relative; }

/* Mock preview of each template */
.st-tpl-preview { position: relative; aspect-ratio: 16/10; background: var(--bg-soft); overflow: hidden; border-bottom: 1px solid var(--border); }
.st-tpl-preview img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.st-tpl-card:hover .st-tpl-preview img { transform: scale(1.03); }
.st-tpl-card--soon .st-tpl-preview img { filter: grayscale(.5) brightness(.9); }
.st-tpl-card--soon:hover .st-tpl-preview img { transform: none; }
.st-tpl-soon { position: absolute; top: 12px; right: 12px; background: var(--text); color: #fff; font-size: 11px; font-weight: 800; padding: 5px 12px; border-radius: 99px; letter-spacing: .04em; text-transform: uppercase; box-shadow: 0 4px 12px rgba(15,30,27,.25); }
.st-tpl-link--soon { color: var(--text-muted); cursor: default; pointer-events: none; }
.st-tpl-header { height: 16px; background: linear-gradient(90deg, var(--green) 0%, var(--green) 36%, #e3edea 36%, #e3edea 100%); border-radius: 4px; }
.st-tpl-header--dark { background: linear-gradient(90deg, var(--green-mid) 0%, var(--green-mid) 36%, rgba(255,255,255,.12) 36%, rgba(255,255,255,.12) 100%); }
.st-tpl-hero-banner { height: 88px; background: linear-gradient(135deg, var(--green), var(--green-dark)); border-radius: 8px; flex-shrink: 0; }
.st-tpl-hero-banner--dark { background: linear-gradient(135deg, var(--green-mid), var(--green-dark)); }
.st-tpl-hero-banner--minimal { background: var(--green-light); }
.st-tpl-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; flex: 1; }
.st-tpl-row--dark .st-tpl-block { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.1); }
.st-tpl-block { background: #fff; border: 1px solid var(--border); border-radius: 6px; }
.st-tpl-row { grid-template-columns: 1fr 1fr 1fr; }
.st-tpl-row:has(.st-tpl-block--wide) { grid-template-columns: 1fr; }
.st-tpl-block--wide { background: var(--bg-soft); }

.st-tpl-body { padding: 22px 22px 24px; }
.st-tpl-tag { display: inline-flex; align-items: center; padding: 3px 10px; font-size: 11px; font-weight: 700; background: var(--green-light); color: var(--green-dark); border-radius: 99px; letter-spacing: .04em; margin-bottom: 12px; }
.st-tpl-tag--featured { background: var(--green); color: #fff; }
.st-tpl-body h3 { font-size: 22px; font-weight: 800; letter-spacing: -.015em; color: var(--text); margin-bottom: 6px; }
.st-tpl-body p { font-size: 17px; color: var(--text-muted); line-height: 1.5; margin-bottom: 14px; }
.st-tpl-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--green); transition: gap .15s; }
.st-tpl-link:hover { gap: 10px; color: var(--green-dark); }

/* --- FEATURES PRINCIPAIS --- */
.st-features { padding: 96px 0; background: var(--bg-soft); }
.st-features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.st-feat-card { background: #fff; border: 1.5px solid var(--border); border-radius: var(--radius-md); padding: 32px 26px; transition: transform .2s, border-color .2s, box-shadow .2s; }
.st-feat-card:hover { transform: translateY(-3px); border-color: var(--green); box-shadow: 0 8px 24px rgba(23,141,114,.1); }
.st-feat-icon { width: 56px; height: 56px; border-radius: 14px; background: var(--green-light); color: var(--green); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; transition: background .2s, color .2s; }
.st-feat-icon svg { width: 28px; height: 28px; }
.st-feat-card:hover .st-feat-icon { background: var(--green); color: #fff; }
.st-feat-card h3 { font-size: 18px; font-weight: 800; letter-spacing: -.01em; color: var(--text); margin-bottom: 8px; }
.st-feat-card p { font-size: 14.5px; color: var(--text-muted); line-height: 1.55; }

/* --- ADMIN HIGHLIGHT --- */
.st-admin { padding: 96px 0; background: var(--bg); }
.st-admin-grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: 48px; align-items: center; }
.st-admin-text .tag { margin-bottom: 18px; }
.st-admin-text h2 { font-size: clamp(28px, 3.8vw, 42px); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; margin-bottom: 16px; text-wrap: balance; }
.st-admin-text h2 .accent { color: var(--green); }
.st-admin-text > p { font-size: 17px; color: var(--text-muted); line-height: 1.3; margin-bottom: 28px; text-wrap: pretty; }
.st-admin-list { list-style: none; display: flex; flex-direction: column; gap: 16px; }
.st-admin-list li { display: flex; align-items: flex-start; gap: 14px; }
.st-admin-check { flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px; background: var(--green-light); color: var(--green); display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.st-admin-check svg { width: 14px; height: 14px; }
.st-admin-list strong { display: block; font-size: 15.5px; font-weight: 700; color: var(--text); margin-bottom: 2px; }
.st-admin-list span { font-size: 17px; color: var(--text-muted); line-height: 1.5; }

/* Dashboard mockup */
.st-admin-mockup { position: relative; }

/* Browser "admin" variant - no rotation, stronger shadow */
.st-browser--admin { transform: rotate(0); box-shadow: 0 24px 60px rgba(15,30,27,.14), 0 4px 16px rgba(15,30,27,.05); }
.st-browser--admin:hover { transform: translateY(-4px); }

/* Drag-and-drop body */
.st-dd-body { display: grid; grid-template-columns: 168px 1fr; min-height: 380px; position: relative; }
.st-dd-side { padding: 12px 10px; background: #fafbfc; border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 12px; }
.st-dd-section { display: flex; flex-direction: column; gap: 4px; }
.st-dd-section-title { font-size: 9px; font-weight: 800; color: var(--text); letter-spacing: .08em; padding-bottom: 4px; border-bottom: 1px solid var(--border); margin-bottom: 2px; }

/* STYLE - color options + select */
.st-dd-opt { display: flex; align-items: center; justify-content: space-between; padding: 3px 2px; font-size: 10px; color: var(--text); font-weight: 500; }
.st-dd-swatch { width: 16px; height: 16px; border-radius: 3px; border: 1px solid var(--border); flex-shrink: 0; }
.st-dd-swatch--white { background: #fff; }
.st-dd-swatch--black { background: #0f1e1b; border-color: #0f1e1b; }
.st-dd-swatch--orange { background: #e35400; border-color: #c34800; }
.st-dd-select { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; font-size: 9.5px; font-weight: 600; color: var(--text); background: #fff; border: 1px solid var(--border); border-radius: 4px; }
.st-dd-select svg { color: var(--text-muted); }

/* MODULES - list items (drag source) */
.st-dd-module { display: flex; align-items: center; gap: 7px; padding: 4px 8px 4px 7px; background: #fff; border: 1px solid var(--border); border-left: 3px solid var(--green); border-radius: 4px; font-size: 10px; font-weight: 600; color: var(--text); transition: border-color .2s, transform .2s, box-shadow .2s; }
.st-dd-module svg { width: 11px; height: 11px; color: var(--green); flex-shrink: 0; }
.st-dd-module--off { border-left-color: rgba(23,141,114,.28); color: var(--text-muted); background: #fafbfc; }
.st-dd-module--off svg { color: rgba(23,141,114,.4); }
#dd-source { animation: stDdSrcHover 4s ease-in-out infinite; }
@keyframes stDdSrcHover {
  0%, 70%, 100% { box-shadow: none; transform: translateX(0); }
  10%, 35%      { box-shadow: 0 2px 6px rgba(23,141,114,.2); transform: translateX(3px); }
}

/* Floating card: travels from the sidebar to the canvas */
.st-dd-floating { position: absolute; display: flex; align-items: center; gap: 6px; padding: 6px 10px 6px 22px; background: #fff; border: 1.5px solid var(--green); border-radius: 6px; font-size: 10px; font-weight: 600; color: var(--text); pointer-events: none; z-index: 10; opacity: 0; animation: stDdTravel 4s cubic-bezier(.5,0,.5,1) infinite; }
.st-dd-floating svg { width: 11px; height: 11px; color: var(--green); flex-shrink: 0; }
.st-dd-floating .st-dd-handle { position: absolute; left: 7px; top: 50%; transform: translateY(-50%); }
@keyframes stDdTravel {
  0%, 5%   { top: 188px; left: 12px;  transform: rotate(0)      scale(.96); opacity: 0;   box-shadow: 0 2px 4px rgba(23,141,114,.08); }
  12%      { top: 184px; left: 14px;  transform: rotate(-3deg)  scale(1);   opacity: 1;   box-shadow: 0 12px 28px rgba(23,141,114,.32); }
  45%      { top: 160px; left: 200px; transform: rotate(-4deg)  scale(1);   opacity: 1;   box-shadow: 0 18px 36px rgba(23,141,114,.35); }
  72%      { top: 180px; left: 240px; transform: rotate(-1deg)  scale(1);   opacity: 1;   box-shadow: 0 14px 30px rgba(23,141,114,.3); }
  88%      { top: 198px; left: 200px; transform: rotate(0)      scale(1);   opacity: 1;   box-shadow: 0 4px 12px rgba(23,141,114,.18); }
  96%, 100%{ top: 198px; left: 200px; transform: rotate(0)      scale(.94); opacity: 0;   box-shadow: 0 2px 4px rgba(23,141,114,.08); }
}

/* Skeleton bars (generic) */
.st-dd-skel { height: 6px; border-radius: 3px; background: linear-gradient(90deg, #e8edeb 0%, #d8e3df 50%, #e8edeb 100%); background-size: 200% 100%; }
.st-dd-skel--xs  { width: 28px; max-width: 100%; height: 5px; }
.st-dd-skel--sm  { width: 45%; height: 7px; }
.st-dd-skel--med { width: 70%; }
.st-dd-skel--lg  { width: 55%; height: 9px; }

/* Canvas */
.st-dd-canvas { padding: 12px; background: var(--bg-soft); display: flex; flex-direction: column; gap: 8px; }
.st-dd-card { background: #fff; border: 1px solid var(--border); border-radius: 6px; min-height: 36px; padding: 8px 10px; display: flex; flex-direction: column; gap: 5px; justify-content: center; transition: border-color .15s; }
.st-dd-card--cover { min-height: 78px; gap: 8px; padding: 14px 14px; background: linear-gradient(135deg, var(--green-light) 0%, #f0f7f4 100%); }
.st-dd-card--menu { min-height: 26px; flex-direction: row; align-items: center; justify-content: space-evenly; gap: 8px; padding: 6px 10px; background: #fafbfc; overflow: hidden; }
.st-dd-card--menu .st-dd-skel { flex: 0 1 auto; min-width: 0; }
.st-dd-card--tall { min-height: 56px; gap: 6px; padding: 10px 12px; }
.st-dd-card > .st-dd-skel { width: 100%; }
.st-dd-row { display: grid; gap: 8px; }
.st-dd-row--2 { grid-template-columns: 1fr 1fr; }
.st-dd-row--3 { grid-template-columns: 1fr 1.4fr 1fr; }
.st-dd-row--fill { flex: 1; }
.st-dd-card--fill { min-height: 0; height: 100%; justify-content: flex-start; }

.st-dd-handle { color: var(--green); font-weight: 800; font-size: 12px; letter-spacing: -3px; line-height: 1; }

/* Drop zone (pulses in sync with the floating card) */
.st-dd-dropzone { min-height: 40px; border: 1.5px dashed var(--green); background: var(--green-light); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 700; color: var(--green); letter-spacing: .02em; animation: stDdPulse 4s ease-in-out infinite; }
@keyframes stDdPulse {
  0%, 100% { opacity: .65; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.015); }
}

/* Skeletons brilham levemente */
.st-dd-skel { animation: stDdShimmer 2.4s linear infinite; }
@keyframes stDdShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* --- CMS GRID --- */
.st-cms { padding: 96px 0; background: var(--bg-soft); }
.st-cms-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.st-cms-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 22px 14px; background: #fff; border: 1.5px solid var(--border); border-radius: var(--radius-sm); transition: transform .15s, border-color .15s, box-shadow .15s; cursor: default; }
.st-cms-item:hover { transform: translateY(-2px); border-color: var(--green); box-shadow: 0 6px 18px rgba(23,141,114,.08); }
.st-cms-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--green-light); color: var(--green); display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s; }
.st-cms-icon svg { width: 20px; height: 20px; }
.st-cms-item:hover .st-cms-icon { background: var(--green); color: #fff; }
.st-cms-item span { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.3; }

/* --- STATS --- */
.st-stats { padding: 80px 0; background: var(--bg); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.st-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; text-align: center; }
.st-stat-item { padding: 0 12px; }
.st-stat-num { font-size: clamp(36px, 4vw, 52px); font-weight: 800; color: var(--green); letter-spacing: -.03em; line-height: 1; margin-bottom: 8px; }
.st-stat-num span { font-size: .6em; color: var(--green-mid); margin-left: 2px; }
.st-stat-label { font-size: 14px; color: var(--text-muted); line-height: 1.4; }

/* --- RESPONSIVE --- */
@media (max-width: 1024px) {
  .st-hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .st-hero-mockup { max-width: 520px; margin: 0 auto; }
  .st-admin-grid { grid-template-columns: 1fr; gap: 48px; }
  .st-templates-grid { grid-template-columns: repeat(2, 1fr); }
  .st-features-grid { grid-template-columns: repeat(2, 1fr); }
  .st-cms-grid { grid-template-columns: repeat(4, 1fr); }
  .st-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 36px; }
  .st-tpl-card--featured ~ .st-tpl-card,
  .st-tpl-card:nth-child(3) { display: flex; flex-direction: row; }
  .st-tpl-card:nth-child(3) { grid-column: span 2; }
  .st-tpl-card:nth-child(3) .st-tpl-preview { width: 240px; flex-shrink: 0; height: auto; }
  .st-tpl-card:nth-child(3) .st-tpl-body { flex: 1; }
}
@media (max-width: 768px) {
  .st-hero { padding: calc(var(--nav-h) + 35px) 0 56px; }
  .st-templates, .st-features, .st-admin, .st-cms { padding: 64px 0; }
  .st-templates-grid, .st-features-grid { grid-template-columns: 1fr; }
  .st-cms-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .st-cms-item { padding: 16px 10px; }
  .st-cms-item span { font-size: 12px; }
  .st-float-badge--top { top: -12px; right: 8px; padding: 8px 10px; }
  .st-float-badge--bottom { bottom: 16px; left: 8px; padding: 8px 10px; }
  .st-float-text strong { font-size: 12px; }
  .st-float-text span { font-size: 10px; }
  .st-dash { grid-template-columns: 100px 1fr; min-height: 320px; }
  .st-dash-side { padding: 14px 10px; }
  .st-dash-logo { font-size: 13px; margin-bottom: 16px; }
  .st-dash-menu-item { font-size: 11px; padding: 6px 8px; }
  .st-dash-main { padding: 16px; }
  .st-dash-stats { grid-template-columns: 1fr; gap: 8px; margin-bottom: 16px; }
  .st-hero-trust { flex-wrap: wrap; }
  .st-tpl-card:nth-child(3) { grid-column: auto; flex-direction: column; }
  .st-tpl-card:nth-child(3) .st-tpl-preview { width: auto; }
}
@media (max-width: 480px) {
  .st-cms-grid { grid-template-columns: repeat(2, 1fr); }
  .st-stats-grid { grid-template-columns: 1fr; gap: 28px; }
  .st-hero-cta { flex-direction: column; align-items: stretch; }
  .st-hero-cta .btn { justify-content: center; }
}