:root {
  --gold:#C9A84C;--gold-light:#E8C96A;--gold-dark:#A07830;--gold-pale:#FDF6E3;--gold-glow:rgba(201,168,76,0.15);
  --red:#C0392B;--red-hover:#A93226;--red-light:rgba(192,57,43,0.10);
  --black:#0D0D0D;--black-soft:#1A1A1A;--black-mid:#2C2C2C;
  --gray-dark:#3D3D3D;--gray:#6B6B6B;--gray-light:#ADADAD;--gray-pale:#EFEFEF;
  --white:#FFFFFF;--surface:#FAFAF8;--surface2:#F4F2ED;
  --border:rgba(201,168,76,0.22);--border-soft:rgba(0,0,0,0.08);
  --shadow-sm:0 2px 10px rgba(0,0,0,0.06);--shadow-md:0 8px 28px rgba(0,0,0,0.10);
  --shadow-lg:0 20px 60px rgba(0,0,0,0.15);--shadow-gold:0 4px 24px rgba(201,168,76,0.28);
  --green:#27AE60;--green-light:rgba(39,174,96,0.1);
  --radius:14px;--radius-sm:9px;--radius-lg:22px;
  --t:0.3s cubic-bezier(0.4,0,0.2,1);
  --font-d:'Playfair Display',serif;--font-b:'DM Sans',sans-serif;--font-m:'JetBrains Mono',monospace;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;font-size:clamp(13.5px,1.4vw,16px);}
body{font-family:var(--font-b);background:var(--surface);color:var(--black);min-height:100vh;overflow-x:hidden;}
button{font-family:var(--font-b);cursor:pointer;border:none;outline:none;}
input,select,textarea{font-family:var(--font-b);outline:none;}
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:var(--gray-pale);}
::-webkit-scrollbar-thumb{background:var(--gold);border-radius:3px;}

/* SCREENS */
.screen{display:none;min-height:100vh;}
.screen.visible{display:flex;}

/* ANIMATIONS */
@keyframes fadeUp{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:translateY(0);}}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes scalePop{0%{transform:scale(0.85);opacity:0;}60%{transform:scale(1.04);}100%{transform:scale(1);opacity:1;}}
@keyframes spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
@keyframes gridScroll{from{background-position:0 0;}to{background-position:80px 80px;}}
@keyframes checkDraw{from{stroke-dashoffset:60;}to{stroke-dashoffset:0;}}
@keyframes slideRight{from{opacity:0;transform:translateX(-16px);}to{opacity:1;transform:translateX(0);}}

/* ====================================================
   SCREEN 1 — SIGNUP
==================================================== */
#screen-signup{background:var(--black);position:relative;overflow:hidden;align-items:stretch;}

.signup-bg{
  position:absolute;inset:0;z-index:0;
  background:radial-gradient(ellipse 70% 60% at 80% 40%,rgba(201,168,76,0.10) 0%,transparent 65%),
    radial-gradient(ellipse 50% 70% at 15% 80%,rgba(192,57,43,0.07) 0%,transparent 55%),
    linear-gradient(160deg,#0D0D0D 0%,#160F02 50%,#0D0D0D 100%);
}
.signup-grid{
  position:absolute;inset:0;z-index:0;animation:gridScroll 40s linear infinite;
  background-image:linear-gradient(rgba(201,168,76,0.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(201,168,76,0.04) 1px,transparent 1px);
  background-size:80px 80px;
}
.orb{position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none;z-index:0;}
.orb-1{width:320px;height:320px;background:rgba(201,168,76,0.08);top:-80px;right:-60px;animation:float 7s ease-in-out infinite;}
.orb-2{width:220px;height:220px;background:rgba(192,57,43,0.06);bottom:10%;left:-40px;animation:float 9s ease-in-out infinite reverse;}
.orb-3{width:180px;height:180px;background:rgba(201,168,76,0.05);bottom:-60px;right:30%;animation:float 11s ease-in-out infinite;}

/* LEFT brand panel */
.signup-left{
  flex:1 1 50%;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(2rem,6vw,7rem) clamp(2rem,5vw,6rem);position:relative;z-index:1;
}
.signup-brand-mark{display:flex;align-items:center;gap:0.85rem;margin-bottom:3rem;}
.brand-gem{
  width:52px;height:52px;background:linear-gradient(135deg,var(--gold-light),var(--gold-dark));
  border-radius:15px;display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 1px rgba(201,168,76,0.35),var(--shadow-gold);animation:float 5s ease-in-out infinite;flex-shrink:0;
}
.brand-gem svg{width:26px;height:26px;fill:var(--black);}
.brand-name-text{font-family:var(--font-d);font-size:1.6rem;color:var(--white);}
.brand-name-text em{color:var(--gold);font-style:normal;}

.signup-hero-heading{font-family:var(--font-d);font-size:clamp(2rem,4.5vw,3.8rem);color:var(--white);line-height:1.15;margin-bottom:1.25rem;}
.signup-hero-heading em{color:var(--gold);font-style:italic;}
.signup-hero-body{color:rgba(255,255,255,0.45);font-size:clamp(0.88rem,1.2vw,1rem);line-height:1.8;max-width:420px;margin-bottom:2.5rem;}

.flow-preview{display:flex;flex-direction:column;gap:0;}
.flow-step-pill{
  display:flex;align-items:center;gap:0.85rem;padding:0.45rem 0;
  opacity:0;animation:slideRight 0.5s ease forwards;
}
.flow-step-pill:nth-child(odd){animation-delay:0.1s;}
.flow-step-pill:nth-child(2){animation-delay:0.2s;}
.flow-step-pill:nth-child(3){animation-delay:0.3s;}
.flow-step-pill:nth-child(4){animation-delay:0.4s;}
.flow-step-pill:nth-child(5){animation-delay:0.5s;}
.flow-step-pill:nth-child(6){animation-delay:0.6s;}
.flow-step-pill:nth-child(7){animation-delay:0.7s;}
.flow-step-pill:nth-child(8){animation-delay:0.8s;}
.flow-step-pill:nth-child(9){animation-delay:0.9s;}
.flow-step-pill:nth-child(10){animation-delay:1.0s;}
.flow-step-pill:nth-child(11){animation-delay:1.1s;}

.step-pill-num{
  width:30px;height:30px;border-radius:50%;background:rgba(201,168,76,0.12);
  border:1px solid rgba(201,168,76,0.25);color:var(--gold);font-size:0.7rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:var(--font-m);
}
.step-pill-label{color:rgba(255,255,255,0.55);font-size:0.82rem;font-weight:500;}
.step-connector-mini{width:1px;height:14px;background:rgba(201,168,76,0.12);margin-left:14px;}

/* RIGHT form panel */
.signup-right{
  flex:1 1 50%;background:rgba(255,255,255,0.032);backdrop-filter:blur(24px);
  border-left:1px solid rgba(201,168,76,0.12);display:flex;align-items:center;justify-content:center;
  padding:clamp(2rem,4vw,3.5rem) clamp(1.5rem,3.5vw,3rem);position:relative;z-index:1;overflow-y:auto;
}
.signup-form-card{width:100%;max-width:640px;}
.signup-form-header{margin-bottom:1.75rem;}
.signup-form-title{font-family:var(--font-d);font-size:clamp(1.5rem,2.5vw,2rem);color:var(--white);line-height:1.2;margin-bottom:0.5rem;}
.signup-form-title em{color:var(--gold);font-style:normal;}
.signup-form-sub{color:rgba(255,255,255,0.4);font-size:0.82rem;line-height:1.6;}
.form-alert{
  margin-bottom:1rem;padding:0.75rem 0.9rem;border-radius:var(--radius-sm);
  background:rgba(192,57,43,0.14);border:1px solid rgba(192,57,43,0.35);
  color:#F8D7DA;font-size:0.8rem;line-height:1.5;
}

/* Dark fields */
.dark-field{margin-bottom:1.1rem;}
.dark-field label{display:block;font-size:0.7rem;font-weight:700;color:rgba(255,255,255,0.45);text-transform:uppercase;letter-spacing:0.09em;margin-bottom:0.4rem;}
.plan-picker-stack{
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1rem;
  padding:1.2rem 0 0.4rem;
  margin-bottom:0.35rem;
  overflow:visible;
}
.plan-option input{position:absolute;opacity:0;pointer-events:none;}
.plan-option-card{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:1rem;
  width:170px;
  min-height:210px;
  padding:1.45rem 1.25rem 1.2rem;
  border-radius:24px;
  background:linear-gradient(180deg,#FFFDFC 0%,#FFF6EC 100%);
  border:1px solid rgba(201,168,76,0.24);
  color:#20252B;
  cursor:pointer;
  transition:transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  box-shadow:0 16px 34px rgba(18,13,8,0.14);
}
.plan-option-card:hover{
  transform:translateY(-4px);
  box-shadow:0 22px 42px rgba(18,13,8,0.2);
}
.plan-option{position:relative;display:flex;}
.plan-option-standard{z-index:1;flex:1 1 0;}
.plan-option-starter{z-index:3;flex:1 1 0;}
.plan-option-standard .plan-option-card{
  min-height:188px;
  width:100%;
  padding-top:1.25rem;
  padding-bottom:1rem;
}
.plan-option-starter .plan-option-card{
  min-height:232px;
  width:100%;
  padding-top:1.65rem;
  transform:translateY(-10px);
  background:linear-gradient(180deg,#FFF7E6 0%,#FFFFFF 100%);
  border-color:rgba(201,168,76,0.52);
  box-shadow:0 24px 50px rgba(18,13,8,0.24);
}
.plan-option input:checked + .plan-option-card{
  border-color:rgba(201,168,76,0.92);
  box-shadow:0 0 0 4px rgba(201,168,76,0.16),0 24px 48px rgba(18,13,8,0.24);
}
.plan-option-starter input:checked + .plan-option-card{
  transform:translateY(-14px);
}
.plan-option-standard input:checked + .plan-option-card{
  transform:translateY(-6px);
}
.plan-option-top{display:flex;align-items:flex-start;justify-content:space-between;gap:0.75rem;width:100%;}
.plan-option-name{
  font-size:0.86rem;
  font-weight:800;
  color:#2D3238;
  letter-spacing:0.12em;
  text-transform:uppercase;
}
.plan-option-tagline{
  font-size:0.72rem;
  color:#6E7680;
  line-height:1.75;
  min-height:3.5rem;
}
.plan-option-price-row{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:0.18rem 0.35rem;
  margin-top:auto;
  width:100%;
}
.plan-option-currency{
  font-size:1rem;
  font-weight:700;
  color:var(--gold-dark);
}
.plan-option-price{
  font-size:1.2rem;
  font-weight:800;
  line-height:1;
  color:var(--gold-dark);
}
.plan-option-price-note{
  font-size:0.8rem;
  font-weight:600;
  color:#6F7883;
  white-space:nowrap;
}
.plan-option-limits{
  display:none;
}
.plan-payment-note{
  margin-top:0.7rem;
  font-size:0.74rem;
  line-height:1.6;
  color:rgba(255,255,255,0.48);
}
.dark-input-wrap{position:relative;display:flex;align-items:center;}
.field-icon-dark{position:absolute;left:0.9rem;width:17px;height:17px;color:rgba(255,255,255,0.25);flex-shrink:0;pointer-events:none;transition:var(--t);}
.dark-input-wrap:focus-within .field-icon-dark{color:var(--gold);}
.dark-input{
  width:100%;background:rgba(255,255,255,0.05);border:1px solid rgba(201,168,76,0.18);
  border-radius:var(--radius-sm);padding:0.8rem 2.75rem 0.8rem 2.75rem;color:var(--white);font-size:0.88rem;transition:var(--t);
}
.dark-input.no-icon{padding-left:1rem;}
.dark-input:focus{border-color:var(--gold);background:rgba(201,168,76,0.04);box-shadow:0 0 0 3px rgba(201,168,76,0.12);}
.dark-input::placeholder{color:rgba(255,255,255,0.2);}
.pw-toggle{position:absolute;right:0.9rem;background:none;border:none;color:rgba(255,255,255,0.3);cursor:pointer;display:flex;padding:0.2rem;transition:var(--t);}
.pw-toggle:hover{color:var(--gold);}
.pw-toggle svg{width:16px;height:16px;}

.pw-strength{margin-top:0.45rem;}
.pw-bar{height:3px;background:rgba(255,255,255,0.08);border-radius:2px;overflow:hidden;margin-bottom:0.3rem;}
.pw-fill{height:100%;border-radius:2px;width:0%;transition:width 0.4s ease,background 0.4s ease;}
.pw-label{font-size:0.67rem;color:rgba(255,255,255,0.3);}

.agree-row{display:flex;align-items:flex-start;gap:0.6rem;margin:1rem 0;}
.agree-check{width:16px;height:16px;accent-color:var(--gold);margin-top:2px;flex-shrink:0;cursor:pointer;}
.agree-text{font-size:0.76rem;color:rgba(255,255,255,0.4);line-height:1.55;}
.agree-text a{color:var(--gold);text-decoration:underline;}

.btn-signup{
  width:100%;padding:0.92rem;background:linear-gradient(135deg,var(--red),var(--red-hover));
  color:var(--white);border-radius:var(--radius-sm);font-size:0.9rem;font-weight:700;letter-spacing:0.04em;
  transition:var(--t);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:0.5rem;
}
.btn-signup:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(192,57,43,0.45);}
.btn-signup svg{width:16px;height:16px;}
.signup-login-link{text-align:center;margin-top:1.1rem;font-size:0.76rem;color:rgba(255,255,255,0.35);}
.signup-login-link a{color:var(--gold);font-weight:600;}

/* ====================================================
   SCREEN 2 — ONBOARDING
==================================================== */
#screen-onboarding{flex-direction:column;background:var(--surface);min-height:100vh;}

.ob-topbar{
  background:var(--black);padding:0 clamp(1rem,4vw,3rem);height:60px;
  display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;z-index:100;border-bottom:1px solid rgba(201,168,76,0.12);
}
.ob-brand{display:flex;align-items:center;gap:0.6rem;}
.ob-brand-gem{width:32px;height:32px;background:linear-gradient(135deg,var(--gold-light),var(--gold-dark));border-radius:9px;display:flex;align-items:center;justify-content:center;}
.ob-brand-gem svg{width:17px;height:17px;fill:var(--black);}
.ob-brand-name{font-family:var(--font-d);font-size:1.1rem;color:var(--white);}
.ob-brand-name em{color:var(--gold);font-style:normal;}
.ob-step-counter{font-family:var(--font-m);font-size:0.72rem;color:rgba(255,255,255,0.35);letter-spacing:0.08em;}
.ob-step-counter span{color:var(--gold);font-weight:700;}
.ob-save-draft{
  display:flex;align-items:center;gap:0.4rem;background:rgba(201,168,76,0.08);
  border:1px solid rgba(201,168,76,0.2);border-radius:var(--radius-sm);padding:0.4rem 0.85rem;
  color:rgba(255,255,255,0.5);font-size:0.75rem;transition:var(--t);
}
.ob-save-draft:hover{color:var(--gold);}
.ob-save-draft svg{width:14px;height:14px;}

.ob-layout{display:flex;flex:1;min-height:calc(100vh - 60px);}

/* Sidebar */
.ob-sidebar{
  width:clamp(220px,22vw,280px);background:var(--black-soft);
  border-right:1px solid rgba(201,168,76,0.1);padding:2rem 0;
  display:flex;flex-direction:column;position:sticky;top:60px;
  height:calc(100vh - 60px);overflow-y:auto;
}
.ob-sidebar-title{font-size:0.63rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:rgba(255,255,255,0.25);padding:0 1.5rem;margin-bottom:1rem;}

.ob-step-item{display:flex;align-items:center;gap:0.85rem;padding:0.72rem 1.5rem;cursor:pointer;transition:var(--t);position:relative;}
.ob-step-item::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold);opacity:0;transition:var(--t);}
.ob-step-item.active::before{opacity:1;}
.ob-step-item.active{background:rgba(201,168,76,0.07);}
.ob-step-item.completed .step-node{background:var(--green);border-color:var(--green);}
.ob-step-item.completed .step-node .sn-num{display:none;}
.ob-step-item.completed .step-node .sn-check{display:block;}

.step-node{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,0.04);border:1.5px solid rgba(255,255,255,0.12);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:var(--t);}
.ob-step-item.active .step-node{background:rgba(201,168,76,0.15);border-color:var(--gold);}
.sn-num{font-size:0.68rem;color:rgba(255,255,255,0.35);font-weight:700;font-family:var(--font-m);}
.ob-step-item.active .sn-num{color:var(--gold);}
.sn-check{width:13px;height:13px;fill:white;display:none;}

.step-info{flex:1;min-width:0;}
.step-info-label{font-size:0.8rem;font-weight:600;color:rgba(255,255,255,0.4);transition:var(--t);}
.ob-step-item.active .step-info-label{color:var(--white);}
.ob-step-item.completed .step-info-label{color:rgba(255,255,255,0.5);}
.step-info-sub{font-size:0.67rem;color:rgba(255,255,255,0.2);margin-top:0.1rem;}
.step-connector-line{width:1.5px;height:18px;background:rgba(255,255,255,0.06);margin:0 auto 0 calc(1.5rem + 14px);}

.ob-sidebar-progress{margin-top:auto;padding:1.5rem;border-top:1px solid rgba(255,255,255,0.05);}
.ob-progress-label{display:flex;justify-content:space-between;font-size:0.7rem;color:rgba(255,255,255,0.3);margin-bottom:0.5rem;}
.ob-progress-label span:last-child{color:var(--gold);font-weight:700;}
.ob-progress-bar{height:4px;background:rgba(255,255,255,0.08);border-radius:2px;overflow:hidden;}
.ob-progress-fill{height:100%;background:linear-gradient(90deg,var(--gold-dark),var(--gold-light));border-radius:2px;transition:width 0.6s cubic-bezier(0.4,0,0.2,1);}

/* Main content */
.ob-main{flex:1;overflow-y:auto;display:flex;flex-direction:column;}
.ob-content{flex:1;padding:clamp(1.5rem,4vw,2.5rem) clamp(1rem,4vw,3rem);max-width:860px;width:100%;}

/* Step header */
.step-header{margin-bottom:2rem;padding-bottom:1.5rem;border-bottom:1px solid rgba(201,168,76,0.12);}
.step-header-tag{
  display:inline-flex;align-items:center;gap:0.4rem;background:rgba(201,168,76,0.1);
  border:1px solid rgba(201,168,76,0.22);border-radius:100px;padding:0.28rem 0.75rem;
  font-size:0.67rem;font-weight:700;color:var(--gold-dark);text-transform:uppercase;letter-spacing:0.09em;margin-bottom:0.8rem;
}
.step-header-tag svg{width:11px;height:11px;fill:var(--gold-dark);}
.step-header h1{font-family:var(--font-d);font-size:clamp(1.4rem,2.5vw,2rem);color:var(--black);margin-bottom:0.5rem;}
.step-header h1 span{color:var(--gold-dark);}
.step-header p{color:var(--gray);font-size:0.87rem;line-height:1.7;max-width:580px;}

/* Light form fields */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem 1.25rem;}
.form-grid.single{grid-template-columns:1fr;}
.form-grid.triple{grid-template-columns:1fr 1fr 1fr;}
.field label{display:block;font-size:0.7rem;font-weight:700;color:var(--gray-dark);text-transform:uppercase;letter-spacing:0.07em;margin-bottom:0.4rem;}
.field-wrap{position:relative;display:flex;align-items:center;}
.field-icon-light{position:absolute;left:0.9rem;width:16px;height:16px;color:var(--gray-light);pointer-events:none;transition:var(--t);}
.field-wrap:focus-within .field-icon-light{color:var(--gold-dark);}
.light-input{width:100%;background:var(--white);border:1.5px solid var(--border-soft);border-radius:var(--radius-sm);padding:0.75rem 1rem 0.75rem 2.6rem;font-size:0.87rem;color:var(--black);transition:var(--t);}
.light-input.no-icon{padding-left:1rem;}
.light-input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,168,76,0.1);}
.light-input::placeholder{color:var(--gray-light);}
.light-select{
  width:100%;background:var(--white);border:1.5px solid var(--border-soft);border-radius:var(--radius-sm);
  padding:0.75rem 2rem 0.75rem 1rem;font-size:0.87rem;color:var(--black);transition:var(--t);cursor:pointer;
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ADADAD'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 0.6rem center;background-size:18px;
}
.light-select:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,168,76,0.1);}
.light-textarea{width:100%;background:var(--white);border:1.5px solid var(--border-soft);border-radius:var(--radius-sm);padding:0.75rem 1rem;font-size:0.87rem;color:var(--black);resize:vertical;min-height:80px;transition:var(--t);}
.light-textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,168,76,0.1);}
.field-hint{font-size:0.7rem;color:var(--gray-light);margin-top:0.3rem;line-height:1.5;}
.field-required{color:var(--red);margin-left:2px;}

/* Section card */
.section-card{background:var(--white);border:1px solid rgba(0,0,0,0.06);border-radius:var(--radius);margin-bottom:1.25rem;overflow:hidden;box-shadow:var(--shadow-sm);transition:var(--t);}
.section-card:hover{box-shadow:var(--shadow-md);}
.sc-header{padding:1rem 1.4rem;background:linear-gradient(135deg,var(--surface2),var(--white));border-bottom:1px solid rgba(0,0,0,0.05);display:flex;align-items:center;justify-content:space-between;gap:0.75rem;}
.sc-header-left{display:flex;align-items:center;gap:0.75rem;}
.sc-icon{width:34px;height:34px;background:var(--gold-glow);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.sc-icon svg{width:17px;height:17px;fill:var(--gold-dark);}
.sc-icon.red{background:var(--red-light);}
.sc-icon.red svg{fill:var(--red);}
.sc-icon.green{background:var(--green-light);}
.sc-icon.green svg{fill:var(--green);}
.sc-title{font-family:var(--font-d);font-size:0.92rem;color:var(--black);}
.sc-sub{font-size:0.7rem;color:var(--gray);margin-top:0.1rem;}
.sc-body{padding:1.4rem;}
.sc-body.no-pad{padding:0;}

/* Logo upload */
.logo-upload-area{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;}
.logo-drop-zone{
  width:110px;height:110px;border:2px dashed var(--border);border-radius:var(--radius);
  display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;
  transition:var(--t);background:var(--surface2);flex-shrink:0;position:relative;overflow:hidden;
}
.logo-drop-zone:hover{border-color:var(--gold);background:var(--gold-pale);}
.logo-drop-zone input{position:absolute;inset:0;opacity:0;cursor:pointer;}
.logo-drop-icon{font-size:1.8rem;margin-bottom:0.35rem;opacity:0.4;}
.logo-drop-text{font-size:0.67rem;color:var(--gray);text-align:center;padding:0 0.4rem;}
.logo-upload-hints h4{font-size:0.83rem;font-weight:600;color:var(--black-soft);margin-bottom:0.45rem;}
.logo-upload-hints ul{list-style:none;display:flex;flex-direction:column;gap:0.28rem;}
.logo-upload-hints li{font-size:0.73rem;color:var(--gray);display:flex;align-items:center;gap:0.4rem;}
.logo-upload-hints li::before{content:'✓';color:var(--green);font-weight:700;font-size:0.68rem;}

/* Tip box */
.tip-box{display:flex;align-items:flex-start;gap:0.6rem;background:rgba(201,168,76,0.07);border:1px solid rgba(201,168,76,0.2);border-radius:var(--radius-sm);padding:0.82rem 1rem;margin-bottom:1.25rem;font-size:0.79rem;color:var(--gray-dark);line-height:1.6;}
.tip-box svg{width:15px;height:15px;fill:var(--gold-dark);flex-shrink:0;margin-top:1px;}
.tip-box strong{color:var(--black);}

/* Block builder */
.block-list{display:flex;flex-direction:column;gap:0.85rem;}
.block-item{background:var(--white);border:1.5px solid rgba(0,0,0,0.07);border-radius:var(--radius);overflow:hidden;transition:var(--t);}
.block-item:hover{border-color:var(--border);box-shadow:var(--shadow-sm);}
.block-item-header{display:flex;align-items:center;padding:0.8rem 1rem;background:linear-gradient(90deg,var(--surface2),var(--white));gap:0.7rem;cursor:pointer;user-select:none;}
.block-color-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.block-name-input{flex:1;background:transparent;border:none;font-size:0.88rem;font-weight:700;color:var(--black);padding:0;}
.block-name-input:focus{outline:none;}
.block-name-input::placeholder{color:var(--gray-light);font-weight:400;}
.block-count-badge{display:inline-flex;align-items:center;gap:0.3rem;background:var(--gold-glow);border:1px solid var(--border);border-radius:100px;padding:0.18rem 0.55rem;font-size:0.67rem;color:var(--gold-dark);font-weight:700;white-space:nowrap;}
.block-delete-btn{background:none;border:none;color:rgba(192,57,43,0.3);display:flex;padding:0.2rem;transition:var(--t);}
.block-delete-btn:hover{color:var(--red);}
.block-delete-btn svg{width:14px;height:14px;}
.block-toggle-btn{background:none;border:none;color:var(--gray-light);display:flex;padding:0.2rem;transition:var(--t);}
.block-toggle-btn:hover{color:var(--gold-dark);}
.block-toggle-btn svg{width:16px;height:16px;transition:transform var(--t);}
.block-toggle-btn.collapsed svg{transform:rotate(-90deg);}
.block-units-panel{padding:1rem;border-top:1px solid rgba(0,0,0,0.05);background:rgba(249,248,245,0.7);}
.block-units-panel.hidden{display:none;}
.units-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:0.55rem;margin-bottom:0.8rem;}
.unit-chip{display:flex;align-items:center;gap:0.3rem;background:var(--white);border:1px solid rgba(0,0,0,0.08);border-radius:var(--radius-sm);padding:0.4rem 0.55rem;transition:var(--t);}
.unit-chip:hover{border-color:var(--border);}
.unit-chip-input{border:none;background:transparent;font-size:0.78rem;font-weight:600;color:var(--black);width:100%;}
.unit-chip-input:focus{outline:none;}
.unit-dot-unassigned{width:7px;height:7px;border-radius:50%;background:var(--gray-pale);border:1px solid var(--gray-light);flex-shrink:0;}
.unit-dot-assigned{width:7px;height:7px;border-radius:50%;background:var(--green);flex-shrink:0;}
.unit-chip-del{background:none;border:none;color:rgba(0,0,0,0.18);cursor:pointer;padding:0;display:flex;flex-shrink:0;transition:var(--t);}
.unit-chip-del:hover{color:var(--red);}
.unit-chip-del svg{width:11px;height:11px;}
.btn-add-unit{display:inline-flex;align-items:center;gap:0.4rem;background:rgba(201,168,76,0.08);border:1px dashed rgba(201,168,76,0.35);border-radius:var(--radius-sm);padding:0.42rem 0.8rem;font-size:0.76rem;font-weight:600;color:var(--gold-dark);cursor:pointer;transition:var(--t);}
.btn-add-unit:hover{background:rgba(201,168,76,0.14);border-style:solid;}
.btn-add-unit svg{width:12px;height:12px;}
.btn-add-block{display:flex;align-items:center;justify-content:center;gap:0.55rem;width:100%;padding:0.85rem;background:rgba(201,168,76,0.05);border:2px dashed rgba(201,168,76,0.22);border-radius:var(--radius);color:var(--gold-dark);font-size:0.83rem;font-weight:600;cursor:pointer;transition:var(--t);margin-top:0.5rem;}
.btn-add-block:hover{background:rgba(201,168,76,0.12);border-color:var(--gold);}
.btn-add-block svg{width:17px;height:17px;}

/* Tenant table */
.tenant-table-wrap{overflow-x:auto;}
.tenant-table{width:100%;border-collapse:collapse;font-size:0.82rem;}
.tenant-table thead th{background:var(--surface2);color:var(--gray);font-size:0.67rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;padding:0.72rem 1rem;text-align:left;border-bottom:1px solid rgba(0,0,0,0.06);white-space:nowrap;}
.tenant-table tbody tr{border-bottom:1px solid rgba(0,0,0,0.04);transition:var(--t);}
.tenant-table tbody tr:hover{background:var(--gold-pale);}
.tenant-table tbody tr:last-child{border-bottom:none;}
.tenant-table tbody td{padding:0.7rem 1rem;vertical-align:middle;}
.unit-label{font-family:var(--font-m);font-size:0.73rem;background:var(--surface2);border:1px solid var(--border-soft);border-radius:6px;padding:0.18rem 0.5rem;color:var(--gray-dark);white-space:nowrap;}
.inline-input{width:100%;background:transparent;border:none;border-bottom:1.5px solid rgba(0,0,0,0.07);padding:0.28rem 0;font-size:0.82rem;color:var(--black);transition:var(--t);}
.inline-input:focus{outline:none;border-bottom-color:var(--gold);}
.inline-input::placeholder{color:var(--gray-light);}
.status-pill{display:inline-flex;align-items:center;gap:0.28rem;padding:0.18rem 0.55rem;border-radius:100px;font-size:0.68rem;font-weight:700;white-space:nowrap;}
.status-pill::before{content:'';width:6px;height:6px;border-radius:50%;}
.sp-assigned{background:var(--green-light);color:var(--green);}
.sp-assigned::before{background:var(--green);}
.sp-empty{background:var(--gray-pale);color:var(--gray);}
.sp-empty::before{background:var(--gray-light);}
.row-del-btn{background:none;border:none;color:rgba(0,0,0,0.18);cursor:pointer;padding:0.2rem;display:flex;transition:var(--t);}
.row-del-btn:hover{color:var(--red);}
.row-del-btn svg{width:14px;height:14px;}

/* Staff */
.staff-list{display:flex;flex-direction:column;gap:0.85rem;}
.staff-card{background:var(--white);border:1.5px solid rgba(0,0,0,0.07);border-radius:var(--radius);padding:1rem 1.2rem;display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:0.85rem;align-items:end;transition:var(--t);}
.staff-card:hover{border-color:var(--border);box-shadow:var(--shadow-sm);}

/* Review */
.review-estate-header{background:linear-gradient(135deg,var(--black),#1C1208);border-radius:var(--radius-lg);padding:1.75rem 2rem;margin-bottom:1.25rem;position:relative;overflow:hidden;}
.review-estate-header::before{content:'';position:absolute;top:-40%;right:-10%;width:250px;height:250px;background:radial-gradient(circle,rgba(201,168,76,0.12),transparent 70%);}
.review-estate-logo{width:58px;height:58px;background:linear-gradient(135deg,var(--gold-pale),var(--gold-light));border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-size:1.6rem;margin-bottom:0.85rem;border:2px solid rgba(201,168,76,0.3);}
.review-estate-name{font-family:var(--font-d);font-size:1.5rem;color:var(--white);margin-bottom:0.2rem;}
.review-estate-sub{color:rgba(255,255,255,0.4);font-size:0.8rem;}
.review-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:0.8rem;margin-bottom:1.25rem;}
.review-stat{background:var(--white);border:1px solid rgba(0,0,0,0.06);border-radius:var(--radius);padding:1rem;text-align:center;position:relative;overflow:hidden;transition:var(--t);}
.review-stat::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--gold),var(--gold-light));}
.review-stat:hover{box-shadow:var(--shadow-md);}
.review-stat-num{font-family:var(--font-d);font-size:1.9rem;color:var(--black);font-weight:700;line-height:1;margin-bottom:0.25rem;}
.review-stat-label{font-size:0.7rem;color:var(--gray);font-weight:500;}
.review-blocks-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:0.8rem;margin-bottom:1.25rem;}
.review-block-card{background:var(--white);border:1px solid rgba(0,0,0,0.06);border-radius:var(--radius);overflow:hidden;transition:var(--t);}
.review-block-card:hover{box-shadow:var(--shadow-md);}
.review-block-top{padding:0.8rem 1rem;display:flex;align-items:center;gap:0.6rem;}
.review-block-badge{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.review-block-name{font-weight:700;font-size:0.86rem;color:var(--black);}
.review-block-units{padding:0 1rem 0.8rem;display:flex;flex-wrap:wrap;gap:0.35rem;}
.review-unit-tag{background:var(--surface2);border-radius:6px;padding:0.18rem 0.45rem;font-size:0.68rem;font-family:var(--font-m);color:var(--gray-dark);display:flex;align-items:center;gap:0.25rem;}
.review-unit-tag.assigned::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--green);}

/* Action bar */
.ob-action-bar{padding:1.1rem clamp(1rem,4vw,3rem);background:var(--white);border-top:1px solid rgba(0,0,0,0.06);display:flex;align-items:center;justify-content:space-between;gap:1rem;position:sticky;bottom:0;z-index:50;box-shadow:0 -4px 20px rgba(0,0,0,0.06);}
.ob-action-left{display:flex;align-items:center;gap:0.75rem;}
.btn-back{display:flex;align-items:center;gap:0.4rem;background:transparent;border:1.5px solid var(--border-soft);border-radius:var(--radius-sm);padding:0.65rem 1.1rem;font-size:0.83rem;font-weight:600;color:var(--gray-dark);transition:var(--t);}
.btn-back:hover{border-color:var(--gold);color:var(--gold-dark);background:var(--gold-pale);}
.btn-back svg{width:14px;height:14px;}
.btn-skip{background:none;border:none;font-size:0.78rem;color:var(--gray-light);cursor:pointer;transition:var(--t);text-decoration:underline;text-underline-offset:2px;}
.btn-skip:hover{color:var(--gray);}
.btn-next{display:flex;align-items:center;gap:0.45rem;background:linear-gradient(135deg,var(--red),var(--red-hover));color:var(--white);border:none;border-radius:var(--radius-sm);padding:0.7rem 1.5rem;font-size:0.87rem;font-weight:700;letter-spacing:0.03em;transition:var(--t);}
.btn-next:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(192,57,43,0.38);}
.btn-next svg{width:14px;height:14px;}
.btn-next.gold-btn{background:linear-gradient(135deg,var(--gold),var(--gold-dark));color:var(--black);font-weight:800;}
.btn-next.gold-btn:hover{box-shadow:var(--shadow-gold);}

/* ====================================================
   SCREEN 3 — SUCCESS
==================================================== */
#screen-success{background:var(--black);align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:2rem;position:relative;overflow:hidden;}
.success-bg{position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 50% 50%,rgba(201,168,76,0.12),transparent 70%),radial-gradient(ellipse 40% 40% at 20% 80%,rgba(39,174,96,0.06),transparent 60%);}
.success-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(201,168,76,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(201,168,76,0.04) 1px,transparent 1px);background-size:60px 60px;animation:gridScroll 30s linear infinite;}
.success-content{position:relative;z-index:1;max-width:520px;width:100%;}
.success-check-circle{width:96px;height:96px;background:var(--green-light);border:2px solid rgba(39,174,96,0.3);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1.5rem;animation:scalePop 0.5s cubic-bezier(0.34,1.56,0.64,1) forwards;}
.success-check-circle svg{width:48px;height:48px;}
.success-check-circle svg path{stroke:var(--green);stroke-width:2.5;stroke-dasharray:60;stroke-dashoffset:60;fill:none;animation:checkDraw 0.6s 0.4s ease forwards;}
.success-title{font-family:var(--font-d);font-size:clamp(2rem,4vw,3rem);color:var(--white);margin-bottom:0.75rem;opacity:0;animation:fadeUp 0.5s 0.6s ease forwards;}
.success-title em{color:var(--gold);font-style:normal;}
.success-body{color:rgba(255,255,255,0.45);font-size:0.9rem;line-height:1.8;margin-bottom:1.75rem;opacity:0;animation:fadeUp 0.5s 0.8s ease forwards;}
.success-pills{display:flex;gap:0.55rem;justify-content:center;flex-wrap:wrap;margin-bottom:2rem;opacity:0;animation:fadeUp 0.5s 1s ease forwards;}
.success-pill{background:rgba(201,168,76,0.1);border:1px solid rgba(201,168,76,0.22);border-radius:100px;padding:0.38rem 0.9rem;font-size:0.76rem;color:var(--gold-light);font-weight:500;}
.success-cta{display:flex;gap:0.8rem;justify-content:center;flex-wrap:wrap;opacity:0;animation:fadeUp 0.5s 1.1s ease forwards;}
.btn-dashboard{display:flex;align-items:center;gap:0.5rem;background:linear-gradient(135deg,var(--gold),var(--gold-dark));color:var(--black);border:none;border-radius:var(--radius-sm);padding:0.85rem 1.75rem;font-size:0.9rem;font-weight:800;letter-spacing:0.04em;cursor:pointer;transition:var(--t);}
.btn-dashboard:hover{transform:translateY(-3px);box-shadow:var(--shadow-gold);}
.btn-dashboard svg{width:16px;height:16px;}

.confetti-dot{position:absolute;border-radius:2px;animation:float 3s ease-in-out infinite;z-index:0;}

/* Responsive */
@media(max-width:900px){
  .signup-left{display:none;}
  .signup-right{flex:1;border-left:none;}
  .ob-sidebar{display:none;}
  .form-grid{grid-template-columns:1fr;}
  .form-grid.triple{grid-template-columns:1fr 1fr;}
  .staff-card{grid-template-columns:1fr 1fr;}
  .staff-card>*:last-child{grid-column:1/-1;justify-self:start;}
}
@media(max-width:640px){
  .form-grid.triple{grid-template-columns:1fr;}
  .review-stats{grid-template-columns:1fr 1fr;}
  .ob-action-bar{flex-wrap:wrap;}
  .ob-action-left{order:2;width:100%;}
  .btn-next{order:1;margin-left:auto;}
  .plan-picker-stack{
    flex-direction:column;
    align-items:stretch;
    gap:0.8rem;
    padding-top:0.4rem;
  }
  .plan-option-standard .plan-option-card,
  .plan-option-starter .plan-option-card{
    width:100%;
    min-height:auto;
    transform:none;
    padding:1.15rem 1rem;
  }
  .plan-option-starter .plan-option-card{
    box-shadow:0 18px 34px rgba(18,13,8,0.2);
  }
  .plan-option-starter input:checked + .plan-option-card,
  .plan-option-standard input:checked + .plan-option-card{
    transform:translateY(-4px);
  }
  .plan-option-tagline{min-height:auto;}
}
.mb-1{margin-bottom:0.75rem;}
.mb-2{margin-bottom:1.25rem;}
.mt-1{margin-top:0.75rem;}
.mt-2{margin-top:1.25rem;}
.d-flex{display:flex;}
.align-center{align-items:center;}
.gap-1{gap:0.5rem;}
.ml-auto{margin-left:auto;}