:root{
  --bg:#06111f;
  --bg-2:#081827;
  --surface:#0d1d30;
  --surface-2:#10243a;
  --surface-3:#132a44;
  --border:#1d3855;
  --border-soft:rgba(101,151,205,.18);
  --text:#f5f8fc;
  --muted:#9db0c6;
  --muted-2:#71869e;
  --blue:#2f86ff;
  --blue-2:#1762db;
  --cyan:#37d7ff;
  --green:#21c763;
  --orange:#ff9f43;
  --purple:#9b6cff;
  --red:#ef5b63;
  --shadow:0 24px 70px rgba(0,0,0,.34);
  --radius:20px;
  --radius-sm:14px;
  --max:1240px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-width:320px;
  background:
    radial-gradient(circle at 78% 0%,rgba(34,112,255,.17),transparent 30%),
    radial-gradient(circle at 0% 55%,rgba(0,203,255,.08),transparent 28%),
    var(--bg);
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.5;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.25;
  background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:32px 32px;
  mask-image:linear-gradient(to bottom,black,transparent 75%);
}
button,input,textarea,select{font:inherit}
button,a{transition:.2s ease}
a{color:inherit;text-decoration:none}
button{border:0}
[hidden]{display:none!important}
.container{width:min(var(--max),calc(100% - 36px));margin:0 auto}

.site-header{
  position:sticky;
  top:0;
  z-index:30;
  border-bottom:1px solid rgba(111,158,206,.12);
  background:rgba(5,15,28,.84);
  backdrop-filter:blur(18px);
}
.nav{min-height:76px;display:flex;align-items:center;gap:28px}
.brand,.sidebar-brand{display:flex;align-items:center;gap:12px}
.brand strong,.sidebar-brand strong{display:block;font-size:24px;line-height:1;font-weight:900;letter-spacing:-.7px}
.brand span,.sidebar-brand span{display:block;margin-top:4px;color:#6fc7ff;font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase}
.brand-icon,.mini-logo{
  width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  color:#fff;font-weight:900;font-size:0;
  background:linear-gradient(145deg,#3d9cff,#1554c7);
  border:1px solid rgba(124,193,255,.4);
  box-shadow:0 10px 26px rgba(28,105,241,.28);
  position:relative;
}
.brand-icon::before,.mini-logo::before{
  content:"";width:18px;height:22px;border:2px solid #fff;border-radius:3px;opacity:.95;
}
.brand-icon::after,.mini-logo::after{
  content:"";position:absolute;width:10px;height:2px;background:#fff;box-shadow:0 5px 0 #fff,0 10px 0 #fff;border-radius:4px;
}
.brand-icon.small{width:40px;height:40px}
.nav-links{margin:auto;display:flex;align-items:center;gap:30px}
.nav-links a{color:#c7d4e3;font-size:14px;font-weight:700}
.nav-links a:hover{color:#fff}
.nav-actions{display:flex;gap:10px}

.btn{
  min-height:44px;padding:0 18px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  cursor:pointer;font-weight:850;font-size:14px;letter-spacing:.1px;
}
.btn:hover{transform:translateY(-1px)}
.btn.primary{color:#fff;background:linear-gradient(135deg,var(--blue),var(--blue-2));box-shadow:0 10px 25px rgba(34,116,255,.25)}
.btn.secondary{color:#e6f0fc;background:#122a47;border:1px solid #28517c}
.btn.ghost{color:#c6d4e4;background:transparent;border:1px solid #233d58}
.btn.white{background:#fff;color:#0a2340}
.btn.outline-white{color:#fff;border:1px solid rgba(255,255,255,.52);background:rgba(255,255,255,.07)}
.btn.large{min-height:56px;padding:0 24px;border-radius:15px;font-size:15px}
.btn.full{width:100%}
.btn.danger,.danger{background:rgba(239,91,99,.12)!important;border:1px solid rgba(239,91,99,.4)!important;color:#ff8b92!important}
.btn.whatsapp,.whatsapp{background:linear-gradient(135deg,#25d366,#139b45)!important;color:#fff!important}

.hero{padding:72px 0 54px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(540px,1.1fr);align-items:center;gap:48px}
.pill,.eyebrow{
  display:inline-flex;align-items:center;gap:8px;color:#76c9ff;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:1.15px;
}
.pill{padding:8px 12px;border:1px solid rgba(61,147,255,.35);background:rgba(37,110,211,.14);border-radius:999px}
.hero h1{margin:20px 0 18px;max-width:670px;font-size:clamp(44px,5.7vw,78px);line-height:.98;letter-spacing:-3px;font-weight:950}
.hero h1::first-line{color:#fff}
.hero-copy>p{max-width:650px;margin:0;color:#b5c4d5;font-size:18px;line-height:1.75}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:31px}
.trust-row{display:flex;flex-wrap:wrap;gap:18px;margin-top:24px;color:#8fa7bf;font-size:13px;font-weight:750}
.trust-row span::first-letter{color:#64e69a}
.hero-product{position:relative}
.hero-product::before{content:"";position:absolute;inset:8% -10%;background:radial-gradient(circle,rgba(37,124,255,.24),transparent 66%);filter:blur(8px)}
.app-preview{
  position:relative;padding:22px;border-radius:24px;background:linear-gradient(155deg,#102a49,#091729 70%);
  border:1px solid rgba(102,162,225,.32);box-shadow:0 40px 90px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.04);
  transform:perspective(1200px) rotateY(-4deg) rotateX(1deg);
}
.preview-top{display:flex;align-items:center;gap:12px;padding-bottom:18px;border-bottom:1px solid var(--border-soft)}
.preview-top strong{display:block}.preview-top small{color:var(--muted)}
.preview-welcome{padding:22px 0 14px}.preview-welcome span{color:#6fc7ff;font-size:12px;font-weight:850}.preview-welcome h3{margin:5px 0 2px;font-size:27px}.preview-welcome p{margin:0;color:var(--muted);font-size:13px}
.preview-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.preview-grid div{padding:16px;border-radius:14px;background:rgba(17,45,76,.9);border:1px solid rgba(85,143,199,.16)}
.preview-grid span{display:block;color:var(--muted);font-size:11px}.preview-grid strong{display:block;margin-top:8px;font-size:20px}

.section{padding:74px 0}
.section-heading{max-width:720px;margin:0 auto 34px;text-align:center}
.section-heading h2{margin:8px 0 10px;font-size:clamp(30px,4vw,47px);line-height:1.08;letter-spacing:-1.6px}
.section-heading p{margin:0;color:var(--muted)}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.feature-grid article,.plan-card,.panel-card,.account-card,.stat-card,.latest-budgets-panel{
  background:linear-gradient(145deg,rgba(16,37,61,.94),rgba(9,25,42,.96));border:1px solid var(--border-soft);border-radius:var(--radius);box-shadow:0 18px 45px rgba(0,0,0,.13);
}
.feature-grid article{padding:24px}
.feature-grid article:hover{border-color:rgba(57,145,255,.42);transform:translateY(-3px)}
.feature-icon{width:48px;height:48px;display:grid;place-items:center;border-radius:14px;background:#112d4c;border:1px solid #23547d;font-size:23px}
.feature-grid h3{margin:17px 0 7px;font-size:18px}.feature-grid p{margin:0;color:var(--muted);font-size:14px}
.plans-section{background:linear-gradient(to bottom,transparent,rgba(11,31,53,.48),transparent)}
.plans-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.plan-card{position:relative;padding:26px;display:flex;flex-direction:column}
.plan-card.featured{border-color:rgba(47,134,255,.72);box-shadow:0 22px 55px rgba(20,91,210,.19)}
.recommended{position:absolute;right:18px;top:16px;padding:6px 9px;border-radius:999px;background:#1f6eed;color:#fff;font-size:10px;font-weight:900;text-transform:uppercase}
.plan-name{color:#58a7ff;font-size:13px;font-weight:950}.plan-card h3{margin:8px 0}.price{font-size:29px;font-weight:950;margin:5px 0 12px}
.plan-card ul{padding:0;margin:8px 0 24px;list-style:none;color:#c0cede;flex:1}.plan-card li{position:relative;padding:8px 0 8px 24px;font-size:14px}.plan-card li::before{content:"✓";position:absolute;left:0;color:#54df91;font-weight:900}
.payment-note{text-align:center;color:var(--muted-2);font-size:12px;margin-top:20px}
.download-section{padding-top:30px}
.download-card{padding:34px;display:flex;align-items:center;justify-content:space-between;gap:25px;border-radius:24px;background:linear-gradient(125deg,#1056c9,#0f3374);box-shadow:var(--shadow);border:1px solid rgba(142,193,255,.25)}
.download-card h2{margin:7px 0 5px}.download-card p{margin:0;color:#cfe1fa}.download-actions{display:flex;flex-wrap:wrap;gap:10px}
.footer{border-top:1px solid var(--border-soft);padding:24px 0;color:var(--muted);font-size:13px}.footer-inner{display:flex;justify-content:space-between;align-items:center}.link-button{background:none;color:#72b9ff;cursor:pointer;font-weight:800}

/* Dashboard */
.dashboard{min-height:100vh;background:var(--bg)}
.sidebar{position:fixed;inset:0 auto 0 0;width:255px;padding:22px 17px;display:flex;flex-direction:column;background:#071522;border-right:1px solid var(--border-soft);z-index:25}
.sidebar-brand{padding:3px 8px 23px;border-bottom:1px solid var(--border-soft)}
.menu{display:flex;flex-direction:column;gap:7px;padding-top:20px}
.menu-item{width:100%;min-height:46px;padding:0 15px;border-radius:12px;text-align:left;color:#9fb2c7;background:transparent;cursor:pointer;font-weight:750}
.menu-item:hover{background:#0f2740;color:#fff}.menu-item.active{background:linear-gradient(90deg,#185fc3,#104484);color:#fff;box-shadow:0 10px 22px rgba(20,89,193,.24)}
.logout-btn{margin-top:auto;min-height:44px;border-radius:12px;background:rgba(239,91,99,.08);border:1px solid rgba(239,91,99,.25);color:#ff8990;cursor:pointer;font-weight:800}
.dashboard-content{margin-left:255px;min-height:100vh;padding:0 28px 38px}
.topbar{min-height:95px;display:flex;align-items:center;gap:18px;border-bottom:1px solid var(--border-soft)}
.topbar h2{margin:3px 0 0;font-size:25px}.user-chip{margin-left:auto;display:flex;align-items:center;gap:11px;padding:8px 12px;border-radius:14px;background:#0e2238;border:1px solid var(--border-soft)}
.user-chip>span{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(135deg,#2d8dff,#1659cb);font-weight:900}.user-chip strong,.user-chip small{display:block}.user-chip small{color:#72b9ff;font-size:10px;font-weight:900}
.mobile-menu-btn{display:none;width:42px;height:42px;border-radius:11px;background:#102842;color:#fff;font-size:19px}
.view-section{padding-top:26px}
.welcome-card{padding:28px 30px;display:flex;justify-content:space-between;align-items:center;border-radius:22px;background:linear-gradient(125deg,#144d9e,#0b2e61 58%,#0c263f);border:1px solid rgba(91,158,231,.27);box-shadow:0 20px 45px rgba(0,0,0,.18)}
.welcome-card h3{margin:7px 0 5px;font-size:29px}.welcome-card p{margin:0;color:#c7daf2}.cloud-mark{font-size:50px;opacity:.28}
.dashboard-mini-loading{padding:14px 0;color:var(--muted)}.dashboard-mini-loading.error{color:#ff8990}
.dashboard-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:18px}
.stat-card{padding:20px;min-height:135px}.stat-card span{display:block;color:var(--muted);font-size:12px;font-weight:750}.stat-card strong{display:block;margin:11px 0 5px;font-size:28px}.stat-card small{color:var(--muted-2)}
.stat-link{cursor:pointer}.stat-link:hover{border-color:rgba(47,134,255,.5);transform:translateY(-2px)}
.state-pending strong{color:#ffb14a}.state-accepted strong{color:#54df91}.state-running strong{color:#58a7ff}
.subscription-summary{margin-top:18px}.subscription-summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.subscription-summary-grid>div{padding:18px;border-radius:16px;background:#0c1f34;border:1px solid var(--border-soft)}.subscription-summary span{display:block;color:var(--muted);font-size:11px}.subscription-summary strong{display:block;margin-top:6px}
.dashboard-lower-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;margin-top:18px}.latest-budgets-panel,.panel-card,.account-card{padding:22px}
.panel-heading-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.panel-heading-row h3{margin:0}.latest-empty,.empty-state{padding:34px;text-align:center;color:var(--muted)}
.latest-budgets-list{display:flex;flex-direction:column;gap:10px;margin-top:15px}.latest-budget-item{width:100%;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:14px;border-radius:14px;background:#0b1d30;border:1px solid var(--border-soft);color:var(--text);text-align:left;cursor:pointer}.latest-budget-item:hover{background:#102842}.latest-budget-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:#103156}.latest-budget-top{display:flex;gap:10px;align-items:center}.latest-budget-main h4,.latest-budget-main p{margin:2px 0}.latest-budget-main p{color:var(--muted);font-size:12px}.latest-budget-meta{text-align:right}.latest-budget-meta span{display:block;color:var(--muted);font-size:11px}
.dashboard-notice,.form-error,.form-message,.error-state{padding:13px 15px;border-radius:12px;margin-top:16px;background:rgba(239,91,99,.10);border:1px solid rgba(239,91,99,.27);color:#ff9aa0}.form-message{background:rgba(33,199,99,.10);border-color:rgba(33,199,99,.25);color:#65e59a}

.account-list,.client-detail-list,.budget-detail-list{display:grid;grid-template-columns:1fr 1fr;gap:0 22px;margin:18px 0 0}.account-list div,.client-detail-list div,.budget-detail-list div{padding:14px 0;border-bottom:1px solid var(--border-soft)}.account-list dt,.client-detail-list dt,.budget-detail-list dt{color:var(--muted);font-size:12px}.account-list dd,.client-detail-list dd,.budget-detail-list dd{margin:4px 0 0;font-weight:750}
.clients-toolbar{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:16px}.clients-search{flex:1;max-width:500px}.clients-actions,.inline-actions{display:flex;gap:9px}.clients-grid,.budgets-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.client-card,.budget-card{padding:19px;border-radius:17px;background:linear-gradient(145deg,#10243a,#0b1a2b);border:1px solid var(--border-soft);cursor:pointer}.client-card:hover,.budget-card:hover{border-color:rgba(48,137,255,.47);transform:translateY(-2px)}
.client-card h4,.budget-card h4{margin:7px 0 3px;font-size:17px}.client-card p,.budget-card p{margin:0;color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.client-card-footer,.budget-card-footer{margin-top:12px;color:var(--muted-2);font-size:12px}.budget-card-footer strong{color:#67adff;font-size:15px}
.status-chip{display:inline-flex;padding:5px 9px;border-radius:999px;font-size:10px;font-weight:900;background:rgba(255,177,74,.12);color:#ffbd62;border:1px solid rgba(255,177,74,.3)}.status-chip.accepted{background:rgba(33,199,99,.11);color:#67e39a;border-color:rgba(33,199,99,.3)}.status-chip.rejected{background:rgba(239,91,99,.1);color:#ff8b92;border-color:rgba(239,91,99,.3)}.status-chip.running{background:rgba(47,134,255,.12);color:#6bacff;border-color:rgba(47,134,255,.3)}.status-chip.finished{background:rgba(158,175,195,.1);color:#b7c5d4;border-color:rgba(158,175,195,.22)}

/* Forms & modals */
.modal-backdrop{position:fixed;inset:0;z-index:100;background:rgba(0,8,17,.76);backdrop-filter:blur(10px);display:grid;place-items:center;padding:20px;overflow:auto}
.modal-card{position:relative;width:min(470px,100%);max-height:calc(100vh - 40px);overflow:auto;padding:26px;border-radius:22px;background:#0d1d30;border:1px solid #25415f;box-shadow:var(--shadow)}
.modal-card.small-modal{width:min(420px,100%)}.client-detail-card,.client-form-card,.budget-detail-card,.budget-form-card{width:min(760px,100%)}
.modal-close{position:absolute;right:15px;top:14px;width:38px;height:38px;border-radius:10px;background:#122940;color:#c9d7e6;cursor:pointer;font-size:20px}
.modal-card h2{margin:3px 0 4px}.modal-card>p,.muted{color:var(--muted)}
form{margin-top:20px}label{display:block;margin:0 0 12px;color:#c8d6e4;font-size:13px;font-weight:750}
input,textarea,select{width:100%;margin-top:7px;padding:13px 14px;border-radius:12px;border:1px solid #25425f;background:#081827;color:#f7f9fc;outline:none}input:focus,textarea:focus,select:focus{border-color:#3a94ff;box-shadow:0 0 0 3px rgba(47,134,255,.12)}textarea{min-height:100px;resize:vertical}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}.form-grid .full{grid-column:1/-1}.modal-links{display:flex;justify-content:space-between;gap:12px;margin-top:16px}.modal-links button{background:none;color:#6db2ff;cursor:pointer;font-weight:750}
.client-modal-actions,.budget-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}.budget-total{margin-top:18px;padding:20px;border-radius:16px;background:linear-gradient(135deg,#155ac9,#0d3477)}.budget-total strong{font-size:27px}.status-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}.status-options button{padding:14px;border-radius:12px;background:#10253c;color:#d8e5f3;border:1px solid var(--border-soft);cursor:pointer}

@media(max-width:1050px){
  .hero-grid{grid-template-columns:1fr}.hero-copy{text-align:center}.hero-copy>p{margin-inline:auto}.hero-actions,.trust-row{justify-content:center}.hero-product{max-width:760px;margin:auto}.feature-grid,.plans-grid{grid-template-columns:repeat(2,1fr)}.plans-grid .plan-card:last-child{grid-column:1/-1}.dashboard-stats-grid{grid-template-columns:repeat(2,1fr)}.dashboard-lower-grid{grid-template-columns:1fr}.clients-grid,.budgets-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:820px){
  .nav-links{display:none}.nav-actions{margin-left:auto}.sidebar{transform:translateX(-100%);transition:.25s ease}.sidebar.open{transform:translateX(0)}.dashboard-content{margin-left:0;padding-inline:18px}.mobile-menu-btn{display:block}.topbar{min-height:78px}.user-chip div{display:none}.subscription-summary-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .container{width:min(100% - 24px,var(--max))}.nav{min-height:66px}.brand strong{font-size:21px}.brand-icon{width:39px;height:39px}.nav-actions .ghost{display:none}.hero{padding:48px 0 34px}.hero h1{font-size:43px;letter-spacing:-2px}.hero-copy>p{font-size:16px}.hero-actions{display:grid}.hero-actions .btn{width:100%}.app-preview{padding:16px;transform:none}.preview-grid{grid-template-columns:1fr 1fr}.section{padding:54px 0}.feature-grid,.plans-grid,.clients-grid,.budgets-grid{grid-template-columns:1fr}.plans-grid .plan-card:last-child{grid-column:auto}.download-card{padding:25px;display:block;text-align:center}.download-actions{margin-top:20px;display:grid}.download-actions a{width:100%}.footer-inner{flex-direction:column;gap:10px}.dashboard-content{padding-inline:12px}.topbar h2{font-size:21px}.welcome-card{padding:22px}.cloud-mark{display:none}.dashboard-stats-grid{grid-template-columns:1fr 1fr;gap:10px}.stat-card{padding:15px;min-height:115px}.stat-card strong{font-size:23px}.subscription-summary-grid{grid-template-columns:1fr 1fr}.clients-toolbar{align-items:stretch;flex-direction:column}.clients-search{max-width:none}.clients-actions .btn{flex:1}.account-list,.client-detail-list,.budget-detail-list,.form-grid{grid-template-columns:1fr}.latest-budget-item{grid-template-columns:auto 1fr}.latest-budget-meta{grid-column:2;text-align:left}.modal-backdrop{padding:8px}.modal-card{padding:22px 17px;max-height:calc(100vh - 16px);border-radius:18px}.budget-actions,.client-modal-actions{display:grid;grid-template-columns:1fr 1fr}.status-options{grid-template-columns:1fr}
}