/* ─── VARIABLES ─── */
:root {
  --bg: #000000;
  --surface: #0a0a0a;
  --surface2: #141414;
  --border: rgba(255,255,255,0.08);
  --border-h: rgba(255,255,255,0.16);
  --violet: #d4af37; /* Gold */
  --violet-g: rgba(212, 175, 55, 0.25);
  --cyan: #f3e5ab; /* Light gold/champagne */
  --cyan-g: rgba(243, 229, 171, 0.2);
  --emerald: #34d399;
  --emerald-g: rgba(52,211,153,0.2);
  --amber: #b8860b; /* Dark gold */
  --amber-g: rgba(184, 134, 11, 0.2);
  --rose: #f87171;
  --rose-g: rgba(248,113,113,0.2);
  --text: #f1f5f9;
  --text2: #94a3b8;
  --text3: #4b5563;
  --sidebar-w: 250px;
  --r: 12px;
  --r-sm: 8px;
  --r-lg: 18px;
  --ease: 200ms cubic-bezier(0.4,0,0.2,1);
}

/* ─── RESET ─── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{height:100%}
body{height:100%;background:var(--bg);color:var(--text);font-family:'Inter',sans-serif;font-size:14px;line-height:1.5;overflow:hidden}
@media(max-width:768px){body{overflow:auto}}
a{text-decoration:none;color:inherit}
button{cursor:pointer;border:none;background:none;font-family:inherit}
input,textarea{font-family:inherit}
img{max-width:100%;display:block}
.hidden{display:none!important}
body.is-app #auth-screen{display:none!important}
body.is-app #app-screen{display:flex!important}
body.is-auth #app-screen{display:none!important}
#auth-screen:not(.hidden) ~ .hamburger{display:none!important}

/* ─── AMBIENT ORBS ─── */
.ambient{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.12}
.orb-1{width:700px;height:700px;background:var(--violet);top:-250px;right:-150px;animation:drift 22s ease-in-out infinite}
.orb-2{width:500px;height:500px;background:var(--cyan);bottom:-100px;left:-150px;animation:drift 28s ease-in-out infinite reverse}
.orb-3{width:350px;height:350px;background:var(--violet);top:45%;left:35%;animation:drift 18s ease-in-out infinite 5s}
@keyframes drift{0%,100%{transform:translate(0,0)}33%{transform:translate(40px,-30px)}66%{transform:translate(-25px,20px)}}

/* Performance: keep the visual style, but avoid expensive repainting while scrolling */
@media (min-width: 769px) {
  .ambient{display:none}
  .public-nav,.topbar,.auth-card,.preview-shell{backdrop-filter:none;-webkit-backdrop-filter:none}
  .public-nav{background:linear-gradient(180deg,rgba(0,0,0,.96),rgba(0,0,0,.82) 76%,transparent)}
  .topbar{background:rgba(5,5,15,.96)}
  .hero-visual::before{filter:none;opacity:.22}
  .demo-orbit{display:none}
  .demo-shell,.preview-shell{transform:rotateY(-4deg) rotateX(2deg) translateZ(0);box-shadow:0 22px 58px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.08);backface-visibility:hidden}
  .process-section,.pricing-section,.trust-section,.login-section,.value-section{content-visibility:auto;contain-intrinsic-size:760px}
  .process-step,.pricing-card,.trust-list div,.value-grid div,.payment-card,.demo-shell,.preview-shell,.plan-access-card,.post-card,.settings-card,.cal-detail,.upcoming-card{contain:layout paint style}
  .post-card,.view{animation:none}
  .post-card{content-visibility:auto;contain-intrinsic-size:420px}
}

/* ─── SCREENS ─── */
.screen{position:fixed;inset:0;z-index:10}

/* ─── AUTH ─── */
#auth-screen{display:flex;align-items:center;justify-content:center}
.auth-card{position:relative;z-index:1;width:100%;max-width:400px;padding:40px;background:rgba(255,255,255,0.03);border:1px solid var(--border);border-radius:var(--r-lg);backdrop-filter:blur(20px)}
.auth-logo{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 22px}
.auth-logo img{width:min(260px,100%);height:auto;object-fit:contain;mix-blend-mode:lighten}
.logo-wordmark{font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:700;background:linear-gradient(135deg,#fff 0%,var(--text2) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.auth-title{font-family:'Space Grotesk',sans-serif;font-size:24px;font-weight:700;margin-bottom:8px}
.auth-sub{color:var(--text2);margin-bottom:28px}
.auth-form{display:flex;flex-direction:column;gap:16px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:13px;color:var(--text2);font-weight:500}
.field input,.field textarea{background:rgba(255,255,255,0.04);border:1px solid var(--border);border-radius:var(--r-sm);padding:10px 14px;color:var(--text);font-size:14px;transition:border-color var(--ease),box-shadow var(--ease);outline:none;resize:vertical}
.field input:focus,.field textarea:focus{border-color:var(--violet);box-shadow:0 0 0 3px var(--violet-g)}
.field-help{margin-top:2px;font-size:12px;line-height:1.45;color:var(--text3)}
.field-full{grid-column:1/-1}
.connection-status-card{display:flex;align-items:flex-start;gap:12px;padding:14px;border:1px solid rgba(251,191,36,.24);border-radius:var(--r-sm);background:rgba(251,191,36,.06)}
.connection-status-card.connected{border-color:rgba(52,211,153,.24);background:rgba(52,211,153,.06)}
.connection-status-card strong{display:block;margin-bottom:3px;font-size:14px}
.connection-status-card p{margin:0;color:var(--text3);font-size:13px;line-height:1.55}
.connection-status-dot{width:10px;height:10px;margin-top:5px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 5px rgba(251,191,36,.1);flex-shrink:0}
.connection-status-dot.connected{background:var(--emerald);box-shadow:0 0 0 5px rgba(52,211,153,.1)}
.connection-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.auth-error{color:var(--rose);font-size:13px;padding:8px 12px;background:var(--rose-g);border-radius:var(--r-sm);border:1px solid rgba(248,113,113,0.3)}
.auth-divider{text-align:center;color:var(--text3);margin:16px 0;position:relative}
.auth-divider::before,.auth-divider::after{content:'';position:absolute;top:50%;width:42%;height:1px;background:var(--border)}
.auth-divider::before{left:0}.auth-divider::after{right:0}

/* PUBLIC ENTRY */
#auth-screen.public-screen{display:block;overflow-y:auto;overflow-x:hidden;background:
  radial-gradient(circle at 78% 8%, rgba(212,175,55,.12), transparent 30%),
  radial-gradient(circle at 12% 38%, rgba(243,229,171,.08), transparent 28%),
  var(--bg)}
.public-nav{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:20px;width:min(1180px,calc(100% - 40px));margin:0 auto;padding:18px 0;background:linear-gradient(180deg,rgba(0,0,0,.92),rgba(0,0,0,.68) 70%,transparent);backdrop-filter:blur(18px)}
.public-brand{display:flex;align-items:center;width:148px;height:58px;overflow:visible}
.public-brand img{width:148px;height:auto;max-width:100%;object-fit:contain;mix-blend-mode:lighten}
.public-links{display:flex;align-items:center;gap:8px;padding:5px;background:rgba(255,255,255,.035);border:1px solid var(--border);border-radius:999px}
.public-links a{padding:8px 14px;border-radius:999px;color:var(--text2);font-size:13px;font-weight:600;transition:all var(--ease)}
.public-links a:hover{background:rgba(255,255,255,.07);color:var(--text)}
.public-nav-cta{white-space:nowrap}
.public-main{position:relative;z-index:1;width:min(1180px,calc(100% - 40px));margin:0 auto;padding:24px 0 72px}
.public-hero{min-height:calc(100vh - 96px);display:grid;grid-template-columns:minmax(0,.92fr) minmax(560px,1.08fr);align-items:center;gap:42px;padding:24px 0 42px}
.hero-copy{max-width:660px}
.hero-kicker,.section-eyebrow{display:inline-flex;align-items:center;width:max-content;max-width:100%;padding:6px 12px;margin-bottom:16px;border:1px solid rgba(212,175,55,.24);border-radius:999px;background:rgba(212,175,55,.08);color:var(--cyan);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.hero-copy h1{font-family:'Space Grotesk',sans-serif;font-size:clamp(42px,6vw,78px);line-height:.94;font-weight:700;letter-spacing:0;margin-bottom:22px;background:linear-gradient(145deg,#fff 0%,#f6e7b5 52%,#9a7a18 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero-lead{max-width:600px;color:var(--text2);font-size:17px;line-height:1.75;margin-bottom:28px}
.hero-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:26px}
.hero-proof{display:flex;flex-wrap:wrap;gap:10px}
.hero-proof span{display:flex;align-items:baseline;gap:6px;padding:9px 12px;border:1px solid var(--border);border-radius:999px;background:rgba(255,255,255,.03);color:var(--text2);font-size:12px}
.hero-proof strong{color:var(--violet);font-family:'Space Grotesk',sans-serif;font-size:18px}
.hero-points{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px;max-width:640px}
.hero-points div{padding:13px;border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.025)}
.hero-points b{display:block;margin-bottom:4px;color:var(--text);font-family:'Space Grotesk',sans-serif;font-size:13px}
.hero-points span{display:block;color:var(--text2);font-size:12px;line-height:1.45}
.hero-visual{position:relative}
.hero-visual::before{content:'';position:absolute;inset:10% -6% -8% 12%;background:linear-gradient(135deg,rgba(212,175,55,.22),rgba(255,255,255,.02));filter:blur(56px);opacity:.55}
.preview-shell{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.025));box-shadow:0 30px 90px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.08);backdrop-filter:blur(22px);transform:perspective(1000px) rotateY(-7deg) rotateX(3deg)}
.preview-top{height:46px;display:flex;align-items:center;gap:8px;padding:0 16px;border-bottom:1px solid var(--border);background:rgba(0,0,0,.22)}
.preview-top span{width:8px;height:8px;border-radius:999px;background:rgba(255,255,255,.24)}
.preview-top strong{margin-left:auto;color:var(--text2);font-size:12px}
.preview-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:16px}
.preview-card{min-height:118px;padding:16px;border:1px solid var(--border);border-radius:12px;background:rgba(0,0,0,.28)}
.preview-card-main{grid-column:1/-1;min-height:190px;background:linear-gradient(135deg,rgba(212,175,55,.12),rgba(255,255,255,.025))}
.preview-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;color:var(--text2);font-size:12px}
.preview-card-head b{color:var(--violet)}
.media-strip{display:grid;grid-template-columns:1.1fr .8fr .8fr 1.1fr;gap:10px;height:118px}
.media-strip div{border-radius:10px;background:
  linear-gradient(160deg,rgba(243,229,171,.32),rgba(212,175,55,.08)),
  linear-gradient(45deg,rgba(255,255,255,.06),transparent);border:1px solid rgba(255,255,255,.08)}
.media-strip div:nth-child(2){margin-top:22px}
.media-strip div:nth-child(3){margin-bottom:20px}
.preview-ai-panel{display:flex;align-items:flex-start;gap:10px;margin-top:12px;padding:11px 12px;border:1px solid rgba(212,175,55,.18);border-radius:10px;background:rgba(0,0,0,.28)}
.preview-ai-panel span{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;background:rgba(212,175,55,.15);color:var(--violet);font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:800}
.preview-ai-panel p{color:var(--text2);font-size:12px;line-height:1.45}
.mini-label{color:var(--text3);font-size:12px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px}
.mini-number{font-family:'Space Grotesk',sans-serif;font-size:46px;line-height:1;color:var(--violet)}
.preview-calendar{grid-column:1/-1;min-height:auto}
.cal-mini-head{font-size:12px;color:var(--text2);margin-bottom:12px}
.cal-mini-row{display:grid;grid-template-columns:80px 1fr 48px;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--border);color:var(--text2);font-size:12px}
.cal-mini-row i{height:6px;border-radius:999px;background:linear-gradient(90deg,var(--violet),rgba(243,229,171,.25))}
.cal-mini-row b{color:var(--text)}
.hero-visual-3d{min-height:690px;display:flex;align-items:center;justify-content:center;perspective:1300px}
.demo-orbit{position:absolute;inset:6% -8% 1% 10%;border:1px solid rgba(212,175,55,.09);border-radius:42px;transform:rotate(-7deg);background:
  radial-gradient(circle at 76% 18%,rgba(212,175,55,.18),transparent 28%),
  radial-gradient(circle at 12% 78%,rgba(243,229,171,.1),transparent 24%)}
.demo-shell{position:relative;width:min(760px,100%);border:1px solid rgba(255,255,255,.14);border-radius:24px;background:linear-gradient(145deg,rgba(18,17,11,.96),rgba(2,2,2,.98));box-shadow:0 38px 110px rgba(0,0,0,.72),inset 0 1px 0 rgba(255,255,255,.08);overflow:hidden;transform:rotateY(-7deg) rotateX(3deg);transform-style:preserve-3d}
.demo-shell::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(112deg,transparent 0 38%,rgba(255,255,255,.075) 48%,transparent 58%);opacity:.34}
.demo-top{height:50px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.32)}
.window-dots{display:flex;gap:8px}.window-dots span{width:9px;height:9px;border-radius:99px;background:rgba(255,255,255,.24)}
.demo-top strong{color:#d9d3bf;font-size:13px}
.demo-dashboard{display:grid;grid-template-columns:142px minmax(0,1fr);min-height:585px}
.demo-sidebar{display:flex;flex-direction:column;gap:8px;padding:18px 12px;border-right:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.28)}
.demo-business{padding:12px 10px 14px;margin-bottom:6px;border-bottom:1px solid rgba(255,255,255,.08)}
.demo-business span,.demo-panel-intro span,.demo-statusbar span,.demo-media-card span,.demo-approval-card span,.demo-memory-card span,.demo-publish-line span{color:var(--text3);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.demo-business strong{display:block;margin-top:4px;font-family:'Space Grotesk',sans-serif;font-size:18px;color:#fff}
.demo-nav{width:100%;padding:11px 10px;border-radius:11px;color:var(--text2);text-align:left;font-size:12px;font-weight:800;transition:all var(--ease)}
.demo-nav:hover,.demo-nav.active{background:rgba(212,175,55,.13);color:var(--cyan);box-shadow:inset 0 0 0 1px rgba(212,175,55,.2)}
.demo-screen{padding:18px 20px 20px;min-width:0}
.demo-statusbar{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:16px}
.demo-statusbar strong{display:block;margin-top:4px;font-family:'Space Grotesk',sans-serif;font-size:25px;line-height:1.05}
.demo-statusbar b{padding:7px 10px;border-radius:999px;background:rgba(52,211,153,.12);color:#86efac;font-size:12px}
.demo-panel{display:none;animation:fadeUp .22s ease}
.demo-panel.active{display:block}
.demo-panel-intro{display:grid;grid-template-columns:132px minmax(0,1fr);align-items:start;gap:18px;margin-bottom:14px}
.demo-panel-intro p{max-width:460px;color:var(--text2);font-size:13px;line-height:1.55}
.demo-gallery-grid{display:grid;grid-template-columns:1.08fr .92fr;grid-template-rows:138px 138px;gap:12px}
.demo-media-card{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.11);border-radius:15px;background:#121212}
.demo-media-card.large{grid-row:span 2}
.demo-media-card img,.demo-approval-card img{width:100%;height:100%;object-fit:cover;filter:saturate(1.02) contrast(1.02)}
.demo-media-card::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 32%,rgba(0,0,0,.78) 100%)}
.demo-media-card div{position:absolute;left:13px;right:13px;bottom:13px;z-index:1}
.demo-media-card b{display:block;margin-top:5px;color:#fff;font-family:'Space Grotesk',sans-serif;font-size:15px;line-height:1.15}
.demo-metrics-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}
.demo-metrics-row div{padding:13px;border:1px solid rgba(255,255,255,.09);border-radius:13px;background:rgba(255,255,255,.025)}
.demo-metrics-row strong{display:block;font-family:'Space Grotesk',sans-serif;font-size:28px;line-height:1;color:var(--violet)}
.demo-metrics-row span{color:var(--text2);font-size:12px}
.demo-approval-card{display:grid;grid-template-columns:210px 1fr;gap:16px;min-height:270px;padding:12px;border:1px solid rgba(255,255,255,.1);border-radius:16px;background:rgba(255,255,255,.025)}
.demo-approval-card img{border-radius:12px}
.demo-approval-copy{display:flex;flex-direction:column;justify-content:center;min-width:0}
.demo-approval-copy h3{margin:9px 0;font-family:'Space Grotesk',sans-serif;font-size:23px;line-height:1.05}
.demo-approval-copy p{color:var(--text2);font-size:13px;line-height:1.55}
.demo-actions{display:flex;gap:9px;margin-top:16px}
.demo-actions button{padding:9px 12px;border-radius:9px;background:rgba(255,255,255,.06);color:var(--text);font-size:12px;font-weight:800}
.demo-actions button:first-child{background:linear-gradient(135deg,#d4af37,#b8860b);color:#000}
.demo-review-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.demo-review-strip span{padding:11px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(255,255,255,.025);color:var(--text2);font-size:12px;text-align:center;font-weight:800}
.demo-memory-layout{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.demo-memory-card,.demo-ai-result{padding:18px;border:1px solid rgba(255,255,255,.1);border-radius:16px;background:rgba(255,255,255,.025)}
.demo-memory-card strong{display:block;margin:9px 0 8px;font-family:'Space Grotesk',sans-serif;font-size:18px;line-height:1.1}
.demo-memory-card p{color:var(--text2);font-size:13px;line-height:1.55}
.demo-ai-result{grid-column:1/-1;display:grid;grid-template-columns:42px 1fr;gap:12px;align-items:center;border-color:rgba(212,175,55,.22);background:rgba(212,175,55,.065)}
.demo-ai-result b{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;background:rgba(212,175,55,.17);color:var(--violet)}
.demo-ai-result p{color:var(--text);font-size:15px;line-height:1.5}
.demo-week{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.demo-week div{min-height:190px;padding:13px;border:1px solid rgba(255,255,255,.09);border-radius:15px;background:rgba(255,255,255,.025)}
.demo-week div.filled{background:linear-gradient(180deg,rgba(212,175,55,.16),rgba(255,255,255,.025));border-color:rgba(212,175,55,.24)}
.demo-week span,.demo-week small{display:block;color:var(--text3);font-size:11px;font-weight:800;text-transform:uppercase}
.demo-week b{display:block;margin:54px 0 8px;font-family:'Space Grotesk',sans-serif;font-size:16px;color:#fff}
.demo-week small{color:var(--cyan)}
.demo-publish-line{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:12px;padding:14px;border:1px solid rgba(52,211,153,.18);border-radius:14px;background:rgba(52,211,153,.08)}
.demo-publish-line strong{font-family:'Space Grotesk',sans-serif;font-size:16px;color:#86efac}
.process-section,.pricing-section,.trust-section,.login-section,.value-section{padding:84px 0;border-top:1px solid var(--border)}
.public-section-title{font-family:'Space Grotesk',sans-serif;font-size:clamp(30px,4vw,48px);line-height:1.05;letter-spacing:0;margin-bottom:28px;max-width:760px}
.process-grid,.pricing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.process-grid{grid-template-columns:repeat(6,1fr)}
.process-step,.pricing-card{position:relative;padding:22px;border:1px solid var(--border);border-radius:14px;background:rgba(255,255,255,.025);transition:transform var(--ease),border-color var(--ease),background var(--ease)}
.process-step:hover,.pricing-card:hover{transform:translateY(-3px);border-color:var(--border-h);background:rgba(255,255,255,.04)}
.process-step span{display:inline-flex;margin-bottom:42px;color:var(--violet);font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:700}
.process-step h3,.pricing-top h3{font-family:'Space Grotesk',sans-serif;font-size:18px;margin-bottom:10px}
.process-step p,.trust-copy p,.login-copy p{color:var(--text2);line-height:1.7}
.process-step{grid-column:span 2;min-height:260px}
.process-step:nth-child(4),.process-step:nth-child(5),.process-step:nth-child(6){min-height:230px}
.trust-section{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:center}
.trust-list{display:grid;gap:12px}
.trust-list div{display:flex;align-items:flex-start;justify-content:space-between;gap:22px;padding:18px;border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.025)}
.trust-list strong{font-family:'Space Grotesk',sans-serif}
.trust-list span{max-width:420px;color:var(--text2);font-size:13px;line-height:1.6}
.value-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.value-grid div{min-height:170px;padding:20px;border:1px solid var(--border);border-radius:14px;background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.015))}
.value-grid strong{display:block;margin-bottom:12px;font-family:'Space Grotesk',sans-serif;font-size:17px}
.value-grid span{display:block;color:var(--text2);font-size:13px;line-height:1.6}
.pricing-grid{grid-template-columns:repeat(3,1fr);align-items:stretch}
.pricing-card{display:flex;flex-direction:column;min-height:430px}
.pricing-card-featured{border-color:rgba(212,175,55,.44);background:linear-gradient(145deg,rgba(212,175,55,.12),rgba(255,255,255,.03));box-shadow:0 22px 70px rgba(212,175,55,.1)}
.pricing-ribbon{position:absolute;top:14px;right:14px;padding:5px 10px;border-radius:999px;background:var(--violet);color:#000;font-size:11px;font-weight:800}
.pricing-top span{color:var(--text3);font-size:13px}
.price{font-family:'Space Grotesk',sans-serif;font-size:42px;font-weight:700;margin:24px 0;color:var(--text)}
.price span{font-size:15px;color:var(--text3);font-family:'Inter',sans-serif;font-weight:500}
.pricing-card ul{display:grid;gap:12px;margin:0 0 24px;padding:0;list-style:none;color:var(--text2);font-size:13px;line-height:1.45}
.pricing-card li{position:relative;padding-left:20px}
.pricing-card li::before{content:'';position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--violet);box-shadow:0 0 16px rgba(212,175,55,.45)}
.pricing-card .btn{margin-top:auto}
.payment-card{display:flex;flex-direction:column;justify-content:space-between;gap:18px;min-height:430px;padding:24px;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:
  linear-gradient(145deg,rgba(0,0,0,.36),rgba(255,255,255,.025)),
  radial-gradient(circle at 78% 18%,rgba(212,175,55,.16),transparent 42%)}
.payment-card strong{font-family:'Space Grotesk',sans-serif;font-size:24px;line-height:1.1}
.payment-card span{color:var(--text2);line-height:1.7}
.payment-flow{display:grid;gap:10px}
.payment-flow i{display:block;padding:12px 14px;border:1px solid var(--border);border-radius:10px;background:rgba(255,255,255,.035);color:var(--cyan);font-style:normal;font-size:13px;font-weight:700}
.payment-flow i+ i{position:relative}
.payment-flow i+ i::before{content:'';position:absolute;top:-11px;left:22px;width:1px;height:10px;background:rgba(212,175,55,.45)}
.login-section{display:grid;grid-template-columns:.86fr minmax(340px,420px);gap:40px;align-items:center;padding-bottom:96px}
.login-section .auth-card{max-width:none;width:100%;padding:34px}
.auth-card-onboarding{max-width:460px}
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:-8px 0 22px;padding:5px;border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.035)}
.auth-tab{padding:9px 12px;border-radius:8px;color:var(--text2);font-size:13px;font-weight:700;transition:all var(--ease)}
.auth-tab.active{background:linear-gradient(135deg,rgba(212,175,55,.2),rgba(255,255,255,.05));color:var(--text);box-shadow:inset 0 0 0 1px rgba(212,175,55,.22)}
.plan-toggle{display:grid;gap:10px;margin-bottom:2px}
.plan-option{display:flex;align-items:center;gap:12px;padding:13px;border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.025);cursor:pointer;transition:all var(--ease)}
.plan-option:hover,.plan-option.active{border-color:rgba(212,175,55,.42);background:rgba(212,175,55,.08)}
.plan-option-disabled{opacity:.56;cursor:not-allowed}
.plan-option-disabled:hover{border-color:var(--border);background:rgba(255,255,255,.025)}
.plan-option input{accent-color:var(--violet)}
.plan-option b,.plan-option small{display:block}
.plan-option b{font-family:'Space Grotesk',sans-serif;font-size:14px}
.plan-option small{margin-top:2px;color:var(--text2);font-size:12px}

/* ─── BUTTONS ─── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 20px;border-radius:var(--r-sm);font-size:14px;font-weight:500;transition:all var(--ease);cursor:pointer;border:none}
.btn-primary{background:linear-gradient(135deg,#d4af37,#b8860b);color:#000;box-shadow:0 0 24px rgba(212,175,55,0.35);font-weight:600}
.btn-primary:hover{box-shadow:0 0 36px rgba(212,175,55,0.55);transform:translateY(-1px)}
.btn:disabled{opacity:.55;cursor:not-allowed;box-shadow:none;transform:none}
.btn-ghost{background:rgba(255,255,255,0.04);color:var(--text2);border:1px solid var(--border)}
.btn-ghost:hover{background:rgba(255,255,255,0.08);border-color:var(--border-h);color:var(--text)}
.btn-danger{background:linear-gradient(135deg,#dc2626,#991b1b);color:#fff}
.btn-danger:hover{box-shadow:0 0 24px var(--rose-g)}
.btn-full{width:100%}
.btn-small{min-height:34px;padding:8px 12px;font-size:12px}
.btn-icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;color:var(--text2);transition:all var(--ease)}
.btn-icon:hover{background:rgba(255,255,255,0.07);color:var(--text)}
.spinner{animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

@media (min-width: 769px) and (max-width: 1120px) {
  .public-hero{grid-template-columns:1fr;max-width:760px;margin:0 auto}
  .hero-copy{max-width:720px}
  .hero-visual-3d{min-height:640px}
  .demo-shell{transform:rotateY(-4deg) rotateX(2deg)}
}

/* ─── APP SHELL ─── */
#app-screen{display:flex}

/* ─── SIDEBAR ─── */
.sidebar{width:var(--sidebar-w);min-height:100vh;display:flex;flex-direction:column;background:rgba(255,255,255,0.02);border-right:1px solid var(--border);padding:24px 16px;flex-shrink:0;z-index:20;transition:transform .3s cubic-bezier(0.4,0,0.2,1)}
.sidebar-logo{display:flex;align-items:center;justify-content:center;gap:10px;padding:0 8px;margin-bottom:24px}
.sidebar-logo img{width:176px;height:auto;object-fit:contain;mix-blend-mode:lighten}
.sidebar-nav{display:flex;flex-direction:column;gap:4px;flex:1}
.nav-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;color:var(--text2);font-weight:500;transition:all var(--ease);position:relative}
.nav-item:hover{background:rgba(255,255,255,0.05);color:var(--text)}
.nav-item.active{background:linear-gradient(135deg,rgba(139,92,246,.2),rgba(79,70,229,.1));color:var(--text);border:1px solid rgba(139,92,246,.25)}
.nav-item.active .nav-icon{color:var(--violet)}
.nav-item--soon{opacity:.5;pointer-events:none}
.nav-badge{margin-left:auto;background:var(--violet);color:#fff;font-size:11px;font-weight:700;padding:2px 7px;border-radius:99px;min-width:20px;text-align:center}
.nav-tag{margin-left:auto;font-size:10px;font-weight:600;color:var(--text3);background:rgba(255,255,255,0.06);padding:2px 7px;border-radius:99px}
.sidebar-footer{display:flex;align-items:center;gap:8px;padding:12px 8px;border-top:1px solid var(--border);margin-top:8px}
.user-chip{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.user-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--violet),var(--cyan));display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0}
.user-meta{display:flex;flex-direction:column;min-width:0}
.user-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-plan{font-size:11px;color:var(--text3)}

/* ─── MAIN CONTENT ─── */
.main-content{flex:1;display:flex;flex-direction:column;min-width:0;height:100vh;overflow-y:auto;width:0}

/* ─── TOPBAR ─── */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:20px 32px;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10;background:rgba(5,5,15,.8);backdrop-filter:blur(20px)}
.topbar-left{display:flex;align-items:baseline;gap:12px}
.page-title{font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:700}
.page-date{font-size:13px;color:var(--text3)}
.demo-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.3);border-radius:99px;color:var(--amber);font-size:12px;font-weight:600}
.pulse-dot{width:7px;height:7px;border-radius:50%;background:var(--amber);animation:pulse 1.5s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}

/* ─── VIEWS ─── */
.view{display:none;padding:28px 32px 48px;animation:fadeUp .25s ease}
.view.active{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

/* ─── STATS GRID ─── */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:32px}
.stat-card{padding:20px;border-radius:var(--r);border:1px solid var(--border);background:rgba(255,255,255,0.025);transition:transform var(--ease),border-color var(--ease)}
.stat-card:hover{transform:translateY(-2px);border-color:var(--border-h)}
.stat-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.stat-label{font-size:12px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.05em}
.stat-icon-wrap{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center}
.stat-icon-violet{background:var(--violet-g);color:var(--violet)}
.stat-icon-cyan{background:var(--cyan-g);color:var(--cyan)}
.stat-icon-emerald{background:var(--emerald-g);color:var(--emerald)}
.stat-icon-amber{background:var(--amber-g);color:var(--amber)}
.stat-value{font-family:'Space Grotesk',sans-serif;font-size:36px;font-weight:700;line-height:1;margin-bottom:6px}
.stat-violet .stat-value{color:var(--violet)}
.stat-cyan .stat-value{color:var(--cyan)}
.stat-emerald .stat-value{color:var(--emerald)}
.stat-amber .stat-value{color:var(--amber)}
.stat-change{font-size:12px;color:var(--text3)}

.plan-access-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center;margin:-12px 0 30px;padding:20px;border:1px solid rgba(212,175,55,.22);border-radius:var(--r);background:linear-gradient(135deg,rgba(212,175,55,.08),rgba(255,255,255,.025));box-shadow:0 16px 40px rgba(0,0,0,.18)}
.plan-access-kicker{display:block;margin-bottom:6px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--amber)}
.plan-access-card h3{font-family:'Space Grotesk',sans-serif;font-size:20px;margin-bottom:6px}
.plan-access-card p{max-width:680px;color:var(--text2);font-size:13px;line-height:1.55}
.plan-network-grid{display:grid;grid-template-columns:repeat(5,minmax(92px,1fr));gap:8px}
.plan-network{min-width:0;padding:10px;border:1px solid var(--border);border-radius:10px;background:rgba(0,0,0,.18);display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"chip name" "chip status";column-gap:8px;align-items:center}
.plan-network .platform-chip{grid-area:chip}
.plan-network strong{grid-area:name;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plan-network small{grid-area:status;font-size:11px;color:var(--text3)}
.plan-network.active{border-color:rgba(52,211,153,.28);background:rgba(52,211,153,.06)}
.plan-network.locked{opacity:.55}

/* ─── SECTIONS ─── */
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.section-title{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:600}
.section-link{font-size:13px;color:var(--violet);font-weight:500}
.section-link:hover{text-decoration:underline}

/* ─── UPCOMING GRID ─── */
.upcoming-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.upcoming-card{padding:16px;border-radius:var(--r);border:1px solid var(--border);background:rgba(255,255,255,0.02);display:flex;flex-direction:column;gap:10px}
.upcoming-card-top{display:flex;align-items:center;justify-content:space-between}
.upcoming-date{font-size:12px;color:var(--text3)}
.upcoming-copy{font-size:13px;color:var(--text2);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.upcoming-platforms{display:flex;gap:6px}
.platform-chip{font-size:10px;font-weight:600;padding:2px 8px;border-radius:99px;text-transform:uppercase;letter-spacing:.04em}
.chip-ig{background:rgba(139,92,246,.15);color:var(--violet)}
.chip-tt{background:rgba(34,211,238,.12);color:var(--cyan)}
.chip-in{background:rgba(96,165,250,.13);color:#93c5fd}
.chip-yt{background:rgba(248,113,113,.14);color:var(--rose)}
.chip-fb{background:rgba(59,130,246,.14);color:#60a5fa}
.chip-other{background:rgba(255,255,255,.1);color:var(--text2)}

/* ─── BADGES ─── */
.badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:99px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.badge-post{background:var(--violet-g);color:var(--violet);border:1px solid rgba(139,92,246,.3)}
.badge-reel{background:var(--cyan-g);color:var(--cyan);border:1px solid rgba(34,211,238,.3)}
.badge-historia{background:var(--amber-g);color:var(--amber);border:1px solid rgba(251,191,36,.3)}
.badge-pending{background:rgba(251,191,36,.1);color:var(--amber)}
.badge-approved{background:var(--emerald-g);color:var(--emerald)}
.badge-published{background:var(--emerald-g);color:var(--emerald);border:1px solid rgba(52,211,153,.3)}
.badge-failed{background:var(--rose-g);color:var(--rose);border:1px solid rgba(248,113,113,.3)}
.badge-rejected{background:var(--rose-g);color:var(--rose)}

/* ─── FILTER BAR ─── */
.filter-bar{display:flex;gap:8px;margin-bottom:24px;border-bottom:1px solid var(--border);padding-bottom:0}
.filter-btn{padding:10px 20px;background:none;border:none;color:var(--text2);font-size:14px;font-weight:500;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all var(--ease)}
.filter-btn:hover{color:var(--text)}
.filter-btn.active{color:var(--violet);border-bottom-color:var(--violet)}

/* ─── POSTS GRID ─── */
.posts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}

/* ─── POST CARD ─── */
.post-card{border-radius:var(--r);border:1px solid var(--border);background:rgba(255,255,255,0.025);overflow:hidden;transition:transform var(--ease),border-color var(--ease),box-shadow var(--ease);display:flex;flex-direction:column;animation:fadeUp .3s ease}
.post-card:hover{transform:translateY(-3px);border-color:var(--border-h);box-shadow:0 8px 32px rgba(0,0,0,.4)}
.post-card-img{height:200px;overflow:hidden;position:relative;background:var(--surface2)}
.post-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.post-card:hover .post-card-img img{transform:scale(1.04)}
.post-card-img-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(139,92,246,.1),rgba(34,211,238,.05));font-size:40px}
.post-card-badges{position:absolute;top:12px;left:12px;display:flex;gap:6px}
.post-card-body{padding:16px;display:flex;flex-direction:column;gap:10px;flex:1}
.post-card-meta{display:flex;align-items:center;justify-content:space-between}
.post-card-date{font-size:12px;color:var(--text3);display:flex;align-items:center;gap:5px}
.post-card-copy{font-size:13px;color:var(--text2);line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.post-card-tags{display:flex;flex-wrap:wrap;gap:5px}
.tag{font-size:11px;color:var(--text3);background:rgba(255,255,255,0.05);padding:2px 8px;border-radius:99px}
.post-card-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px 16px;border-top:1px solid var(--border)}
.btn-approve{background:rgba(52,211,153,.1);color:var(--emerald);border:1px solid rgba(52,211,153,.25);border-radius:var(--r-sm);padding:8px;font-size:13px;font-weight:600;transition:all var(--ease)}
.btn-approve:hover{background:rgba(52,211,153,.2);box-shadow:0 0 20px rgba(52,211,153,.2)}
.btn-reject{background:rgba(248,113,113,.08);color:var(--rose);border:1px solid rgba(248,113,113,.2);border-radius:var(--r-sm);padding:8px;font-size:13px;font-weight:600;transition:all var(--ease)}
.btn-reject:hover{background:rgba(248,113,113,.15);box-shadow:0 0 20px rgba(248,113,113,.15)}

/* ─── EMPTY STATE ─── */
.empty-state{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px;gap:12px;color:var(--text3)}
.empty-icon{font-size:48px;opacity:.5}

/* ─── SKELETON ─── */
.skeleton-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;grid-column:1/-1}
.sk{height:120px;border-radius:var(--r);background:linear-gradient(90deg,rgba(255,255,255,0.04) 25%,rgba(255,255,255,0.07) 50%,rgba(255,255,255,0.04) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ─── CALENDAR ─── */
.cal-header{display:flex;align-items:center;gap:20px;margin-bottom:12px}
.cal-month-label{font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:700;flex:1;text-align:center}
.cal-legend{display:flex;align-items:center;gap:8px;margin-bottom:20px;font-size:12px;color:var(--text2)}
.legend-dot,.api-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.dot-violet{background:var(--violet)}.dot-cyan{background:var(--cyan)}.dot-amber{background:var(--amber)}.dot-emerald{background:var(--emerald)}
.cal-grid,.cal-body{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-day-name{text-align:center;font-size:11px;font-weight:600;color:var(--text3);padding:8px;text-transform:uppercase;letter-spacing:.06em}
.cal-day{min-height:80px;padding:8px;border-radius:var(--r-sm);border:1px solid var(--border);background:rgba(255,255,255,.02);cursor:pointer;transition:all var(--ease);position:relative}
.cal-day:hover{border-color:var(--border-h);background:rgba(255,255,255,.04)}
.cal-day.other-month{opacity:.3}
.cal-day.today{border-color:rgba(139,92,246,.4);background:rgba(139,92,246,.06)}
.cal-day.has-posts{cursor:pointer}
.cal-day.selected{border-color:var(--violet);background:rgba(139,92,246,.1)}
.cal-day-num{font-size:12px;font-weight:600;margin-bottom:6px;color:var(--text2)}
.today .cal-day-num{color:var(--violet)}
.cal-day-dots{display:flex;flex-wrap:wrap;gap:3px}
.cal-dot{width:7px;height:7px;border-radius:50%}
.cal-detail{margin-top:24px;padding:20px;background:rgba(255,255,255,.025);border:1px solid var(--border);border-radius:var(--r)}
.cal-detail-title{font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:600;margin-bottom:14px}
.cal-post-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}
.cal-post-row:last-child{border-bottom:none}
.cal-post-time{font-size:12px;color:var(--text3);width:48px;flex-shrink:0}
.cal-post-copy{font-size:13px;color:var(--text2);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ─── SETTINGS ─── */
.settings-card{padding:24px;background:rgba(255,255,255,.025);border:1px solid var(--border);border-radius:var(--r);margin-bottom:20px}
.settings-section-title{font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:600;margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px}
.api-status-list{display:flex;flex-direction:column;gap:12px}
.api-status-item{display:flex;align-items:center;gap:12px;padding:12px;background:rgba(255,255,255,.02);border-radius:var(--r-sm)}
.api-status-label{margin-left:auto;font-size:12px;font-weight:600;padding:3px 10px;border-radius:99px}
.api-status-label.connected{background:var(--emerald-g);color:var(--emerald)}
.api-status-label.pending{background:var(--amber-g);color:var(--amber)}

/* ─── MODAL ─── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(8px);z-index:100;display:flex;align-items:center;justify-content:center}
.modal-card{width:100%;max-width:440px;background:var(--surface);border:1px solid var(--border-h);border-radius:var(--r-lg);padding:28px;box-shadow:0 24px 64px rgba(0,0,0,.6)}
.modal-title{font-family:'Space Grotesk',sans-serif;font-size:18px;font-weight:700;margin-bottom:8px}
.modal-sub{font-size:13px;color:var(--text2);margin-bottom:16px}
.modal-textarea{width:100%;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text);padding:12px;font-size:13px;resize:vertical;outline:none;transition:border-color var(--ease)}
.modal-textarea:focus{border-color:var(--violet)}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}

/* ─── TOAST ─── */
#toast-container{position:fixed;top:20px;right:20px;z-index:999;display:flex;flex-direction:column;gap:8px}
.toast{padding:12px 18px;border-radius:var(--r-sm);font-size:13px;font-weight:500;box-shadow:0 8px 32px rgba(0,0,0,.4);animation:slideIn .3s ease;display:flex;align-items:center;gap:10px;max-width:320px}
.toast-success{background:rgba(52,211,153,.15);border:1px solid rgba(52,211,153,.3);color:var(--emerald)}
.toast-error{background:rgba(248,113,113,.12);border:1px solid rgba(248,113,113,.3);color:var(--rose)}
.toast-info{background:rgba(139,92,246,.12);border:1px solid rgba(139,92,246,.3);color:var(--violet)}
@keyframes slideIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}

/* ─── AGENCY UPLOAD ─── */
.upload-zone{border:2px dashed var(--border-h);border-radius:var(--r);padding:40px 20px;text-align:center;background:rgba(255,255,255,0.015);transition:all var(--ease);cursor:pointer;margin-bottom:16px}
.upload-zone:hover,.upload-zone.dragover{border-color:var(--violet);background:rgba(139,92,246,0.05)}
.upload-icon{font-size:32px;margin-bottom:12px}
.upload-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:10px;max-height:300px;overflow-y:auto}
.upload-item{position:relative;border-radius:var(--r-sm);overflow:hidden;aspect-ratio:1;background:var(--surface2);border:1px solid var(--border)}
.upload-item img{width:100%;height:100%;object-fit:cover}
.upload-remove{position:absolute;top:4px;right:4px;background:rgba(0,0,0,0.6);color:#fff;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:10px;cursor:pointer}

/* ─── HAMBURGER BUTTON (mobile only) ─── */
.hamburger{display:none;position:fixed;top:14px;left:14px;z-index:260;width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,0.07);border:1px solid var(--border);align-items:center;justify-content:center;flex-direction:column;gap:5px;cursor:pointer;transition:background var(--ease)}
.hamburger:hover{background:rgba(255,255,255,0.12)}
.hamburger span{display:block;width:18px;height:2px;background:var(--text);border-radius:2px;transition:all .3s ease}
.hamburger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}
.mobile-menu-close{display:none}

/* ─── SIDEBAR OVERLAY (mobile) ─── */
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.62);z-index:180;pointer-events:none}
.sidebar-overlay.active{display:block}

@media (max-width: 1180px) and (min-width: 769px) {
  .plan-access-card{grid-template-columns:1fr;align-items:start}
  .plan-network-grid{grid-template-columns:repeat(5,minmax(0,1fr));width:100%}
  .plan-network{padding:9px}
}

/* ─── MOBILE RESPONSIVE ─── */
@media (max-width: 768px) {

  html,body{width:100%;max-width:100%;overflow-x:hidden}
  #auth-screen.public-screen{overflow-x:hidden}
  .public-nav{width:calc(100% - 28px);padding:12px 0;gap:10px}
  .public-brand{width:112px;height:44px;flex:0 0 auto}
  .public-brand img{width:112px}
  .public-links{display:none}
  .public-nav-cta{padding:9px 11px;font-size:12px;min-height:38px}
  .public-main{width:calc(100% - 28px);max-width:520px;padding:10px 0 56px}
  .public-hero{min-height:auto;grid-template-columns:minmax(0,1fr);gap:24px;padding:30px 0 48px}
  .hero-copy{max-width:none;min-width:0}
  .hero-kicker,.section-eyebrow{max-width:100%;white-space:normal;width:auto;font-size:10px;line-height:1.35;padding:6px 10px}
  .hero-copy h1{font-size:clamp(34px,10vw,42px);line-height:1.02;margin-bottom:18px}
  .hero-lead{font-size:15px;line-height:1.65;margin-bottom:22px}
  .hero-actions{align-items:stretch}
  .hero-actions .btn{flex:1 1 100%;min-width:0;min-height:42px}
  .hero-proof{display:grid;grid-template-columns:1fr;gap:8px}
  .hero-proof span{width:100%;min-width:0;justify-content:flex-start}
  .hero-points{grid-template-columns:1fr;margin-top:14px;gap:8px}
  .hero-points div{padding:12px}
  .hero-visual-3d{min-height:auto;display:block;width:100%;overflow:visible}
  .demo-orbit{display:none}
  .demo-shell{width:100%;max-width:100%;border-radius:16px;transform:none;overflow:hidden}
  .demo-top{height:44px;padding:0 12px}
  .demo-top strong{font-size:12px}
  .window-dots span{width:7px;height:7px}
  .demo-dashboard{grid-template-columns:1fr;min-height:auto}
  .demo-sidebar{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:10px;border-right:none;border-bottom:1px solid rgba(255,255,255,.08)}
  .demo-business{grid-column:1/-1;margin:0;padding:8px 10px}
  .demo-business strong{font-size:16px}
  .demo-nav{padding:9px 6px;text-align:center;font-size:10px;border-radius:9px}
  .demo-screen{padding:12px;min-width:0}
  .demo-statusbar{margin-bottom:12px}
  .demo-statusbar strong{font-size:19px;line-height:1.1}
  .demo-statusbar b{display:none}
  .demo-panel-intro{display:block}
  .demo-panel-intro p{margin-top:6px;font-size:12px;line-height:1.55}
  .demo-gallery-grid{grid-template-columns:1fr;grid-template-rows:none}
  .demo-media-card,.demo-media-card.large{grid-row:auto;min-height:155px}
  .demo-media-card b{font-size:14px}
  .demo-metrics-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
  .demo-metrics-row div{padding:10px 8px}
  .demo-metrics-row strong{font-size:24px}
  .demo-metrics-row span{font-size:11px;line-height:1.2}
  .demo-approval-card{grid-template-columns:1fr;min-height:auto}
  .demo-approval-card img{height:178px}
  .demo-approval-copy h3{font-size:20px;line-height:1.1}
  .demo-approval-copy p{font-size:12px}
  .demo-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .demo-actions button{width:100%;padding:9px 8px}
  .demo-review-strip{grid-template-columns:1fr;gap:7px}
  .demo-review-strip span{padding:9px}
  .demo-memory-layout{grid-template-columns:1fr}
  .demo-memory-card,.demo-ai-result{padding:14px}
  .demo-memory-card strong{font-size:16px}
  .demo-ai-result{grid-template-columns:36px 1fr;gap:10px}
  .demo-ai-result b{width:36px;height:36px}
  .demo-ai-result p{font-size:13px}
  .demo-week{grid-template-columns:1fr}
  .demo-week div{min-height:auto;padding:12px}
  .demo-week b{margin:18px 0 8px}
  .demo-publish-line{display:block}
  .demo-publish-line strong{display:block;margin-top:5px;font-size:14px}
  .preview-shell{transform:none;border-radius:14px}
  .preview-grid{gap:10px;padding:12px}
  .preview-card{min-height:96px;padding:13px}
  .preview-card-main{min-height:155px}
  .media-strip{height:90px;gap:8px}
  .process-section,.pricing-section,.trust-section,.login-section,.value-section{padding:52px 0}
  .process-grid,.pricing-grid,.trust-section,.login-section,.value-grid{grid-template-columns:minmax(0,1fr)}
  .public-section-title{font-size:clamp(27px,8vw,30px);line-height:1.08}
  .process-step{grid-column:auto;min-height:auto}
  .process-step span{margin-bottom:22px}
  .process-step,.pricing-card,.payment-card{padding:18px;border-radius:12px}
  .trust-list div{display:block}
  .trust-list span{display:block;margin-top:6px}
  .value-grid div{min-height:auto}
  .pricing-card{min-height:auto}
  .payment-card{min-height:auto}
  .price{font-size:36px;margin:18px 0}

  /* Show hamburger */
  .hamburger{display:flex;z-index:540}
  .hamburger.open{opacity:0;pointer-events:none}
  html.mobile-menu-open,
  html.mobile-menu-open body{overflow:hidden}

  /* ── SIDEBAR: fuera del flujo, oculta a la izquierda ── */
  .sidebar{
    position:fixed !important;
    top:0;
    left:0;
    height:100dvh;
    min-height:100dvh;
    width:100vw;
    max-width:none;
    transform:translateX(-110%);
    z-index:520;
    border-right:0;
    background:#000;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    padding:20px 22px calc(22px + env(safe-area-inset-bottom));
    box-shadow:none;
    overflow-y:auto;
    overscroll-behavior:contain;
    pointer-events:auto;
    /* transición ya definida en .sidebar (arriba) */
  }
  .sidebar.mobile-open{
    transform:translateX(0);
    box-shadow:none;
  }
  .mobile-menu-close{
    display:flex;
    position:fixed;
    top:max(16px,env(safe-area-inset-top));
    left:18px;
    z-index:560;
    width:54px;
    height:54px;
    align-items:center;
    justify-content:center;
    border-radius:16px;
    background:#171717;
    color:#fff;
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 12px 26px rgba(0,0,0,.38);
    touch-action:manipulation;
  }
  .sidebar-overlay{z-index:500;background:rgba(0,0,0,.82)}
  .sidebar-overlay.active{pointer-events:auto}
  .sidebar-logo{margin-top:72px;margin-bottom:34px}
  .sidebar-logo img{width:min(230px,72vw)}
  .sidebar-nav{min-height:0;gap:10px}
  .nav-item{
    min-height:58px;
    padding:15px 18px;
    border-radius:14px;
    color:#e7e7ea;
    font-size:18px;
    font-weight:650;
  }
  .nav-item .nav-icon{width:24px;height:24px;color:#9ca3af;opacity:1}
  .nav-item.active{
    background:rgba(212,175,55,.13);
    color:#fff;
    border:1px solid rgba(212,175,55,.35);
  }
  .nav-item.active .nav-icon{color:var(--amber)}
  .nav-item--soon{opacity:.58}
  .nav-tag{font-size:12px;padding:4px 10px}
  .sidebar-footer{padding:18px 2px 0;margin-top:22px}

  /* ── APP SHELL: main ocupa el 100% de la pantalla ── */
  #app-screen{display:block;width:100%;overflow-x:hidden}
  body.is-app #app-screen{display:block!important}
  .main-content{
    width:100% !important;
    min-width:0;
    height:100vh;
    overflow-y:auto;
    overflow-x:hidden;
  }

  /* Topbar: hueco para el hamburger */
  .topbar{padding:14px 16px 14px 64px;min-height:56px}
  .page-title{font-size:17px}
  .page-date{display:none}

  /* Views */
  .view{padding:16px 14px 80px}

  /* Stats: 2 columnas */
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:20px}
  .stat-value{font-size:28px}
  .plan-access-card{grid-template-columns:1fr;margin:-4px 0 22px;padding:16px;gap:14px}
  .plan-network-grid{grid-template-columns:repeat(2,minmax(0,1fr))}

  /* Upcoming: 1 columna */
  .upcoming-grid{grid-template-columns:1fr;gap:10px}

  /* Posts: 1 columna */
  .posts-grid{grid-template-columns:1fr;gap:14px}

  /* Filter bar: scrollable horizontal */
  .filter-bar{overflow-x:auto;white-space:nowrap;flex-wrap:nowrap;padding-bottom:2px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .filter-bar::-webkit-scrollbar{display:none}
  .filter-btn{flex-shrink:0;padding:10px 16px;font-size:13px}

  /* Calendario: celdas pequeñas */
  .cal-day{min-height:44px;padding:5px 4px}
  .cal-day-num{font-size:11px;margin-bottom:3px}
  .cal-dot{width:5px;height:5px}
  .cal-month-label{font-size:16px}
  .cal-day-name{font-size:9px;padding:6px 2px}

  /* Ajustes: 1 columna */
  .settings-grid{grid-template-columns:1fr}
  .settings-card{padding:16px}

  /* Auth */
  .auth-card{margin:0;padding:26px 18px}
  .login-section .auth-card{padding:26px 18px}
  .auth-logo img{width:min(220px,100%)}
  .auth-tabs{margin:-4px 0 18px}
  .plan-option{align-items:flex-start;padding:12px}

  /* Modal */
  .modal-card{margin:16px;max-width:none;width:calc(100% - 32px)}

  /* Toast abajo */
  #toast-container{top:auto;bottom:20px;right:12px;left:12px}
  .toast{max-width:100%}

  /* Upload */
  .upload-zone{padding:28px 16px}

  /* Post card */
  .post-card-img{height:180px}
  .section-header{margin-bottom:12px}
  .skeleton-row{grid-template-columns:1fr}

  /* Bottom navigation: replaces the broken mobile drawer completely */
  .hamburger,.mobile-menu-close,.sidebar-overlay{display:none!important}
  html.mobile-menu-open,
  html.mobile-menu-open body{overflow:auto}
  .sidebar{
    position:fixed !important;
    top:auto !important;
    right:0;
    bottom:0;
    left:0;
    width:100% !important;
    max-width:none;
    height:auto !important;
    min-height:0 !important;
    transform:none !important;
    z-index:520;
    display:block;
    border-right:0;
    border-top:1px solid rgba(212,175,55,.18);
    background:linear-gradient(180deg,rgba(12,12,12,.96),rgba(0,0,0,.99));
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    padding:8px max(10px,env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-right));
    box-shadow:0 -14px 34px rgba(0,0,0,.58);
    overflow:visible;
    pointer-events:auto;
  }
  .sidebar-logo,.sidebar-footer{display:none!important}
  .sidebar-nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;min-height:0;flex:none}
  .nav-item--soon{display:none!important}
  .nav-item{
    min-width:0;
    min-height:58px;
    flex-direction:column;
    justify-content:center;
    gap:4px;
    padding:8px 4px!important;
    border-radius:14px!important;
    color:#a7adba;
    font-size:10px;
    line-height:1.05;
    font-weight:750;
    text-align:center;
    border:1px solid transparent!important;
    background:transparent;
  }
  .nav-item .nav-icon{width:22px;height:22px;color:#7d8594;opacity:1;flex-shrink:0}
  .nav-item span:not(.nav-badge):not(.nav-tag){display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #nav-ajustes span:not(.nav-badge):not(.nav-tag){font-size:0}
  #nav-ajustes span:not(.nav-badge):not(.nav-tag)::after{content:'Ajustes';font-size:10px}
  #nav-agencia{margin-top:0!important;border-top:0!important;border-radius:14px!important;padding-top:8px!important}
  #nav-agencia span:not(.nav-badge):not(.nav-tag){font-size:0}
  #nav-agencia span:not(.nav-badge):not(.nav-tag)::after{content:'Subir';font-size:10px}
  #nav-agencia .nav-tag{display:none}
  .nav-item.active{background:linear-gradient(180deg,rgba(212,175,55,.2),rgba(212,175,55,.08));color:#fff;border-color:rgba(212,175,55,.32)!important}
  .nav-item.active .nav-icon{color:var(--violet)}
  .nav-badge{position:absolute;top:5px;right:12px;margin-left:0;min-width:18px;padding:1px 5px;font-size:10px;color:#000}
  .main-content{height:100dvh;padding-bottom:calc(78px + env(safe-area-inset-bottom))}
  .topbar{padding:14px 16px;min-height:58px}
  .view{padding:16px 14px calc(104px + env(safe-area-inset-bottom))}
}

@media (max-width: 400px) {
  .public-nav{width:calc(100% - 20px);gap:8px}
  .public-brand{width:98px;height:40px}
  .public-brand img{width:98px}
  .public-nav-cta{padding:8px 9px;font-size:11px;min-height:36px}
  .public-main{width:calc(100% - 20px);padding-top:6px}
  .public-hero{padding-top:24px;gap:20px}
  .hero-copy h1{font-size:32px}
  .hero-lead{font-size:14px;line-height:1.6}
  .hero-proof strong{font-size:16px}
  .hero-proof span{font-size:11px;padding:8px 10px}
  .hero-points b{font-size:12px}
  .hero-points span{font-size:11px}
  .demo-shell{border-radius:14px}
  .demo-top{height:40px}
  .demo-sidebar{gap:6px;padding:8px}
  .demo-business{padding:7px 8px}
  .demo-business strong{font-size:15px}
  .demo-nav{font-size:9.5px;padding:8px 4px}
  .demo-screen{padding:10px}
  .demo-statusbar strong{font-size:17px}
  .demo-panel-intro span,.demo-statusbar span,.demo-business span,.demo-media-card span,.demo-approval-card span,.demo-memory-card span,.demo-publish-line span{font-size:9.5px}
  .demo-panel-intro p{font-size:11.5px}
  .demo-media-card,.demo-media-card.large{min-height:138px}
  .demo-media-card div{left:10px;right:10px;bottom:10px}
  .demo-media-card b{font-size:13px}
  .demo-metrics-row{grid-template-columns:1fr;gap:7px}
  .demo-metrics-row div{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
  .demo-metrics-row strong{font-size:22px}
  .demo-approval-card{padding:10px}
  .demo-approval-card img{height:150px}
  .demo-approval-copy h3{font-size:18px}
  .demo-actions{grid-template-columns:1fr}
  .demo-memory-card,.demo-ai-result{padding:12px}
  .demo-ai-result{grid-template-columns:1fr}
  .demo-week{gap:7px}
  .demo-week div{padding:10px}
  .demo-week b{margin:12px 0 6px}
  .public-section-title{font-size:26px}
  .process-step,.pricing-card,.payment-card,.value-grid div{padding:16px}
  .price{font-size:32px}
  .auth-card{padding:22px 14px}
  .login-section .auth-card{padding:22px 14px}
  .auth-title{font-size:22px}
  .auth-sub{font-size:13px}
  .auth-tab{font-size:12px;padding:8px}
  .plan-option small{font-size:11px}
  .stats-grid{grid-template-columns:1fr 1fr}
  .stat-value{font-size:24px}
  .stat-label{font-size:10px}
  .plan-network-grid{grid-template-columns:1fr}
  .view{padding:12px 10px 80px}
}

@media (max-width: 340px) {
  .public-brand{width:88px}
  .public-brand img{width:88px}
  .public-nav-cta{font-size:10px;padding:8px}
  .hero-copy h1{font-size:30px}
  .demo-nav{font-size:9px}
  .demo-statusbar strong{font-size:16px}
}