:root{--saas-ink:#241637;--saas-purple:#7d3fb2;--saas-pink:#e64f8e;--saas-soft:#fff7fb;--saas-line:#eadff0}
.saas-public{margin:0;background:#fff;color:var(--saas-ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.saas-public *{box-sizing:border-box}.saas-public a{text-decoration:none;color:inherit}
.saas-public-wrap{width:min(1180px,calc(100% - 36px));margin:auto}
.saas-public-nav{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border-bottom:1px solid #f0e6ef}
.saas-public-nav .saas-public-wrap{height:76px;display:flex;align-items:center;justify-content:space-between;gap:22px}
.saas-logo{display:flex;gap:10px;align-items:center}.saas-logo>span{width:44px;height:44px;border-radius:14px;background:linear-gradient(135deg,#eb4e92,#8a44b7);color:#fff;display:grid;place-items:center;font-weight:900;box-shadow:0 8px 22px #d75a9c42}
.saas-logo div{display:flex;flex-direction:column}.saas-logo b{font-size:16px}.saas-logo small{font-size:10px;color:#87778e}
.saas-public-nav nav{display:flex;gap:26px;align-items:center;font-size:13px;font-weight:750}.saas-public-nav nav>a:not(.saas-cta-sm):hover{color:var(--saas-pink)}
.saas-cta-sm{background:#2e1b44!important;color:#fff!important;padding:11px 15px;border-radius:12px}
.saas-hero{padding:82px 0 68px;background:radial-gradient(circle at 82% 17%,#ffe5f3 0,transparent 25%),radial-gradient(circle at 12% 25%,#f1e7ff 0,transparent 28%),linear-gradient(180deg,#fff,#fff9fc)}
.saas-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:62px;align-items:center}
.saas-pill{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:999px;border:1px solid #e9d8ed;background:#fff;color:#a23a76;font-size:12px;font-weight:800}
.saas-hero h1{font-size:clamp(42px,5vw,68px);line-height:1.02;letter-spacing:-2.6px;margin:18px 0 20px}.saas-hero h1 em{font-style:normal;color:var(--saas-pink)}
.saas-hero p{font-size:17px;line-height:1.75;color:#6d6072;max-width:700px}.saas-actions{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0 20px}
.saas-btn{display:inline-flex;justify-content:center;align-items:center;padding:14px 19px;border-radius:14px;font-weight:850;font-size:14px}.saas-btn.primary{background:linear-gradient(135deg,#e64f8e,#9d47b3);color:#fff;box-shadow:0 12px 28px #d14f9940}.saas-btn.ghost{background:#fff;border:1px solid #e4d8e7}
.saas-proof{display:flex;flex-wrap:wrap;gap:14px;font-size:12px;color:#66576c}.saas-proof span{display:flex;align-items:center;gap:5px}
.saas-showcase{position:relative}.saas-browser{background:#fff;border:1px solid #eadbea;border-radius:24px;box-shadow:0 28px 70px #45245a20;overflow:hidden;transform:rotate(1deg)}.saas-browser-top{height:46px;background:#f8f4fa;display:flex;align-items:center;gap:7px;padding:0 14px;border-bottom:1px solid #eee4ef}.saas-browser-top i{width:9px;height:9px;border-radius:50%;background:#d8c7db}.saas-browser-top span{margin-left:10px;background:#fff;border:1px solid #ebdfed;border-radius:9px;padding:7px 12px;font-size:10px;color:#8a7c8d;flex:1}
.saas-browser-body{padding:22px;background:linear-gradient(180deg,#fff,#fff9fc)}.saas-mini-head{display:flex;justify-content:space-between;font-size:11px}.saas-mini-head span{padding:5px 9px;background:#f5e8fa;border-radius:999px}.saas-mini-welcome{margin:18px 0;background:linear-gradient(135deg,#fff0f7,#f7f0ff);padding:22px;border-radius:18px}.saas-mini-welcome small{display:block;color:#c64880;font-weight:800;margin-bottom:7px}.saas-mini-welcome strong{display:block;font-size:19px;line-height:1.3}
.saas-mini-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.saas-mini-stats div{border:1px solid #eee4ef;background:#fff;padding:14px;border-radius:14px}.saas-mini-stats b{display:block;font-size:22px}.saas-mini-stats small{color:#8c7f90}
.saas-mini-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:10px}.saas-mini-grid div{padding:14px;border-radius:14px;background:#fff;border:1px solid #eee4ef;display:flex;gap:8px;align-items:center;font-size:11px}
.saas-section{padding:82px 0}.saas-section-title{text-align:center;max-width:820px;margin:0 auto 38px}.saas-section-title>span{font-size:11px;font-weight:900;letter-spacing:1.7px;color:#a94784}.saas-section-title h2{font-size:38px;line-height:1.15;letter-spacing:-1.3px;margin:11px 0}
.saas-feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.saas-feature-grid article{padding:23px;border:1px solid var(--saas-line);border-radius:20px;background:#fff;box-shadow:0 8px 26px #4d325b0a}.saas-feature-grid article i{font-style:normal;font-size:30px}.saas-feature-grid h3{margin:12px 0 7px;font-size:16px}.saas-feature-grid p{margin:0;color:#786a7c;font-size:13px;line-height:1.6}
.saas-business{background:#291a3b;color:#fff}.saas-two{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.saas-business h2{font-size:40px;line-height:1.15;letter-spacing:-1.3px}.saas-business p{color:#d1c3d9;line-height:1.7}.saas-flow-list{display:grid;gap:13px}.saas-flow-list div{display:flex;gap:14px;align-items:center;padding:16px;border:1px solid #ffffff20;border-radius:16px;background:#ffffff0a}.saas-flow-list b{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#e34e8d}.saas-flow-list span{font-weight:750}
.saas-pricing{display:grid;grid-template-columns:1.2fr auto;gap:24px;align-items:center;padding:38px;border:1px solid #eadbea;border-radius:28px;background:linear-gradient(135deg,#fff7fb,#fbf7ff);box-shadow:0 20px 55px #5c33610e}.saas-pricing h2{font-size:34px;margin:14px 0 9px}.saas-pricing p{color:#796b7d}.saas-price{display:flex;align-items:flex-end;gap:4px;color:#4b2463}.saas-price small{font-size:16px;margin-bottom:12px}.saas-price strong{font-size:68px;line-height:1}.saas-price span{font-size:14px;margin-bottom:10px}.saas-pricing ul{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;list-style:none;padding:0;margin:8px 0}.saas-pricing li:before{content:"✓";color:#2c966f;font-weight:900;margin-right:7px}.saas-pricing .saas-btn{justify-self:start}
.saas-public-footer{border-top:1px solid #eee4ef;padding:28px 0;color:#786a7d}.saas-public-footer .saas-public-wrap{display:flex;justify-content:space-between;gap:20px}
.saas-admin-shell{background:#f7f8fc;min-height:100vh}.saas-side{background:#1f1730;color:#fff}.saas-card{background:#fff;border:1px solid #e9e5ef;border-radius:18px;padding:20px}.saas-metric{background:#fff;border:1px solid #e9e5ef;border-radius:18px;padding:20px}.saas-metric .value{font-size:30px;font-weight:900;color:#3a2450}.saas-metric .label{font-size:12px;color:#83778a;margin-top:5px}
.saas-status{display:inline-flex;align-items:center;padding:5px 9px;border-radius:999px;font-size:10px;font-weight:900;text-transform:uppercase}.saas-status.active{background:#e9f9f2;color:#287358}.saas-status.trial{background:#fff4dc;color:#9a6b16}.saas-status.pending{background:#eef3ff;color:#395eaa}.saas-status.expired,.saas-status.suspended,.saas-status.rejected{background:#fff0f1;color:#b74150}
.saas-workspace-box{padding:14px;border:1px dashed #d9c6df;border-radius:15px;background:#fffafd;font-size:12px}.saas-workspace-box code{font-size:11px}
@media(max-width:950px){.saas-hero-grid,.saas-two{grid-template-columns:1fr}.saas-showcase{max-width:680px}.saas-feature-grid{grid-template-columns:repeat(2,1fr)}.saas-pricing{grid-template-columns:1fr}.saas-pricing ul{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.saas-public-wrap{width:min(100% - 24px,1180px)}.saas-public-nav nav>a:not(.saas-cta-sm){display:none}.saas-logo small{display:none}.saas-hero{padding:55px 0 44px}.saas-hero h1{font-size:41px;letter-spacing:-1.6px}.saas-hero p{font-size:15px}.saas-feature-grid{grid-template-columns:1fr}.saas-section{padding:55px 0}.saas-section-title h2,.saas-business h2{font-size:31px}.saas-pricing{padding:25px}.saas-pricing ul{grid-template-columns:1fr}.saas-price strong{font-size:58px}.saas-public-footer .saas-public-wrap{flex-direction:column}.saas-browser{transform:none}}

/* =========================================================
   SBM SaaS V2 — Super Admin Console
   ========================================================= */
.sa-admin-layout{display:grid;grid-template-columns:245px 1fr;min-height:100vh;background:#f6f7fb;color:#292033}
.sa-admin-side{position:sticky;top:0;height:100vh;background:#171224;color:#fff;padding:20px 14px;display:flex;flex-direction:column;z-index:50}
.sa-admin-brand{display:flex;align-items:center;gap:11px;padding:8px 8px 22px;color:#fff;text-decoration:none}.sa-admin-brand>span{width:43px;height:43px;border-radius:13px;background:linear-gradient(135deg,#e64f8e,#8946b3);display:grid;place-items:center;font-weight:950;font-size:12px}.sa-admin-brand div{display:flex;flex-direction:column}.sa-admin-brand b{font-size:15px}.sa-admin-brand small{font-size:9px;color:#a9a0b4;margin-top:2px}
.sa-admin-side nav{display:grid;gap:4px}.sa-admin-side nav a,.sa-admin-side-bottom a{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:11px;color:#d9d3df;text-decoration:none;font-size:12px;font-weight:750}.sa-admin-side nav a i{font-style:normal;width:21px;text-align:center}.sa-admin-side nav a:hover,.sa-admin-side nav a.active{background:#34254d;color:#fff}.sa-admin-side nav a.active{box-shadow:inset 3px 0 #e64f8e}.sa-admin-side-bottom{margin-top:auto;border-top:1px solid #ffffff13;padding-top:10px}
.sa-admin-main{min-width:0}.sa-admin-top{height:76px;background:#fff;border-bottom:1px solid #e9e7ee;display:flex;align-items:center;gap:18px;padding:0 28px;position:sticky;top:0;z-index:30}.sa-admin-top>div:first-of-type{flex:1}.sa-admin-top h1{font-size:18px;margin:0}.sa-admin-top small{font-size:10px;color:#8b818e}.sa-admin-user{display:flex;align-items:center;gap:9px}.sa-admin-user>span{width:36px;height:36px;border-radius:50%;background:#f0e7ff;color:#71419b;display:grid;place-items:center;font-weight:900}.sa-admin-user div{display:flex;flex-direction:column}.sa-admin-user b{font-size:11px}.sa-menu-toggle{display:none;border:0;background:#f3eff7;border-radius:10px;width:38px;height:38px}.sa-admin-content{padding:27px;max-width:1600px;margin:auto}
.sa-page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:20px}.sa-page-head h2{font-size:27px;margin:8px 0 5px;letter-spacing:-.7px}.sa-page-head p{margin:0;color:#7d7181;font-size:12px;line-height:1.5}.sa-head-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.sa-back{font-size:11px;color:#89537b;text-decoration:none;font-weight:800}
.sa-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}.saas-metric small{display:block;color:#948a97;font-size:9px;margin-top:7px}.sa-grid-2{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(330px,.65fr);gap:17px}.sa-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;margin-bottom:14px}.sa-card-head h3{margin:0;font-size:15px}.sa-card-head p{margin:4px 0 0;color:#867b89;font-size:10px}.sa-card-head>a{font-size:10px;font-weight:800;color:#b23f78;text-decoration:none}.sa-payment-list{display:grid}.sa-payment-list>a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid #eeeaf0;text-decoration:none;color:inherit}.sa-payment-list>a:last-child{border-bottom:0}.sa-payment-list b{display:block;font-size:12px}.sa-payment-list small{display:block;color:#8a7e8e;font-size:9px;margin-top:3px}.sa-payment-list strong{font-size:13px;color:#542d6a}
.sa-filter{display:flex;gap:9px;margin-bottom:14px;align-items:center}.sa-filter .input{max-width:440px}.sa-filter select{max-width:190px}.sa-dialog{border:0;border-radius:22px;padding:0;width:min(720px,calc(100% - 24px));box-shadow:0 30px 90px #21132850}.sa-dialog::backdrop{background:#1c13278f;backdrop-filter:blur(3px)}.sa-dialog>form{padding:25px}.sa-dialog-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:17px}.sa-dialog-head h2{margin:8px 0}.sa-dialog-head>button{border:0;background:#f5eff4;width:36px;height:36px;border-radius:50%;font-size:20px;cursor:pointer}
.sa-check{display:flex;gap:10px;align-items:flex-start;padding:12px;border:1px solid #ece5ee;border-radius:13px;background:#fcfafc;margin:10px 0 15px}.sa-check input{margin-top:3px}.sa-check span{display:flex;flex-direction:column}.sa-check b{font-size:12px}.sa-check small{font-size:9px;color:#887c8b;margin-top:2px}.sa-inline-form{display:grid;grid-template-columns:110px 1fr;gap:8px}.sa-hr{border:0;border-top:1px solid #eee8ef;margin:18px 0}.sa-clean-list{padding-left:19px;color:#756a78;font-size:11px;line-height:1.8}
.sa-action-detail summary{cursor:pointer;font-weight:850;color:#ab3c75;font-size:11px}.sa-action-detail form{min-width:235px;padding-top:9px}.sa-action-detail textarea{min-height:60px}.sa-plan-stack{display:grid;gap:11px}.sa-plan-row{display:flex;justify-content:space-between;gap:18px;padding:15px;border:1px solid #eee8f0;border-radius:14px}.sa-plan-row>div{display:flex;flex-direction:column}.sa-plan-row b{font-size:12px}.sa-plan-row small,.sa-plan-row span{font-size:9px;color:#85798a;margin-top:3px}.sa-plan-row strong{font-size:16px;color:#71378f;text-align:right}.sa-plan-row a{font-size:10px;text-align:right;margin-top:5px;color:#bb3f7b;font-weight:800}
.sa-priority{display:inline-flex;padding:4px 8px;border-radius:999px;font-size:9px;font-weight:900;text-transform:uppercase;background:#f1eef4}.sa-priority.urgent{background:#ffe7e9;color:#b92d43}.sa-priority.high{background:#fff0dd;color:#a46312}.sa-priority.normal{background:#edf2ff;color:#46609a}.sa-priority.low{background:#eef8f3;color:#487360}.sa-grid-ticket{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:17px}.sa-ticket-thread{display:grid;gap:12px;max-height:60vh;overflow:auto;padding:3px}.sa-ticket-msg{max-width:82%;padding:14px;border-radius:16px;background:#f6f3f8;border:1px solid #ebe4ed}.sa-ticket-msg.from-admin{margin-left:auto;background:#fff0f7;border-color:#f0cfe0}.sa-ticket-msg>div{display:flex;justify-content:space-between;gap:15px}.sa-ticket-msg b{font-size:11px}.sa-ticket-msg small{font-size:8px;color:#918695}.sa-ticket-msg p{font-size:11px;line-height:1.6;margin:8px 0 0}.sa-reply-box{margin-top:15px;border-top:1px solid #eee8ef;padding-top:14px}.sa-reply-box textarea{min-height:90px}
.sa-settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px}.sa-setting-save{grid-column:1/-1;position:sticky;bottom:15px;display:flex;justify-content:flex-end;background:#ffffffd9;backdrop-filter:blur(8px);padding:10px;border-radius:14px;border:1px solid #eee7ef}.sa-announcement-list{display:grid;gap:11px}.sa-announcement-list article{padding:14px;border:1px solid #eee6ef;border-radius:14px;display:grid;grid-template-columns:1fr auto;gap:12px}.sa-announcement-list article.inactive{opacity:.55}.sa-announcement-list b,.sa-announcement-list small{display:block}.sa-announcement-list small{font-size:8px;color:#968b99;margin-top:3px}.sa-announcement-list p{font-size:10px;line-height:1.5;color:#655a69}
.saas-admin-login{margin:0;min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 20% 10%,#f4e7ff,transparent 33%),radial-gradient(circle at 90% 40%,#ffe2f0,transparent 28%),#faf8fb;font-family:Inter,ui-sans-serif,system-ui,sans-serif;padding:20px}.sa-login-card{width:min(470px,100%);background:#fff;border:1px solid #e9dfeb;border-radius:25px;padding:32px;box-shadow:0 25px 70px #3a254718}.sa-login-card h1{font-size:30px;letter-spacing:-1px;margin:14px 0 7px}.sa-login-card>p{font-size:12px;line-height:1.6;color:#796d7d;margin-bottom:20px}
.platform-announcement{display:flex;gap:11px;align-items:flex-start;padding:13px 15px;border:1px solid #eadcf1;background:linear-gradient(135deg,#fff8fc,#fbf8ff);border-radius:15px;margin-bottom:14px}.platform-announcement>span{font-size:20px}.platform-announcement b{font-size:12px;color:#643066}.platform-announcement p{margin:3px 0 0;font-size:10px;color:#766b79;line-height:1.5}
@media(max-width:1100px){.sa-metrics{grid-template-columns:repeat(2,1fr)}.sa-grid-2{grid-template-columns:1fr}.sa-settings-grid{grid-template-columns:1fr}.sa-setting-save{grid-column:auto}.sa-grid-ticket{grid-template-columns:1fr}}
@media(max-width:780px){.sa-admin-layout{grid-template-columns:1fr}.sa-admin-side{position:fixed;left:-265px;width:245px;transition:.22s}.sa-nav-open .sa-admin-side{left:0;box-shadow:15px 0 40px #0003}.sa-menu-toggle{display:block}.sa-admin-top{padding:0 14px}.sa-admin-user div{display:none}.sa-admin-content{padding:16px}.sa-page-head{flex-direction:column}.sa-metrics{grid-template-columns:1fr 1fr}.sa-filter{flex-wrap:wrap}.sa-filter .input{max-width:none;flex:1;min-width:210px}.sa-plan-row{flex-direction:column}.sa-plan-row strong,.sa-plan-row a{text-align:left}}
@media(max-width:480px){.sa-metrics{grid-template-columns:1fr}.sa-admin-top h1{font-size:15px}.sa-page-head h2{font-size:23px}.saas-metric .value{font-size:26px}}


/* =========================================================
   SBM SaaS V2.2 — Multi Plan + Referral
   ========================================================= */
.saas-pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;align-items:stretch}
.saas-plan-card{position:relative;background:#fff;border:1px solid #eadfea;border-radius:25px;padding:26px;display:flex;flex-direction:column;box-shadow:0 18px 45px #42284b0b}
.saas-plan-card.featured{border-color:#dca7c8;background:linear-gradient(155deg,#fff8fc,#fbf7ff);box-shadow:0 22px 55px #9b4b8b18}
.saas-plan-popular{position:absolute;right:18px;top:18px;background:#34204b;color:#fff;padding:6px 9px;border-radius:999px;font-size:8px;font-weight:950;letter-spacing:.4px}
.saas-plan-head{display:grid;grid-template-columns:1fr auto;gap:15px;align-items:start}.saas-plan-head h3{font-size:23px;margin:12px 0 5px}.saas-plan-head p{font-size:11px;color:#7c7080;line-height:1.55;margin:0}.saas-plan-card .saas-price strong{font-size:50px}.saas-plan-card .saas-price small{font-size:12px}.saas-plan-card .saas-price span{font-size:11px}
.saas-plan-quota{display:flex;gap:7px;flex-wrap:wrap;margin:17px 0}.saas-plan-quota span{font-size:9px;padding:6px 9px;border-radius:999px;background:#f8f4fa;color:#675b6b}
.saas-plan-card ul{list-style:none;padding:0;margin:4px 0 20px;display:grid;gap:9px;flex:1}.saas-plan-card li{font-size:11px;color:#574d5b}.saas-plan-card li:before{content:"✓";color:#25936b;font-weight:950;margin-right:8px}.saas-plan-card>.saas-btn{align-self:flex-start}
.saas-register-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin:0 0 18px}.saas-plan-radio{border:1px solid #e8dce8;border-radius:15px;padding:14px;display:grid;grid-template-columns:auto 1fr auto;gap:9px;align-items:start;cursor:pointer;background:#fff}.saas-plan-radio.selected,.saas-plan-radio:has(input:checked){border-color:#d85a95;background:#fff6fa;box-shadow:0 0 0 2px #f8d9e7}.saas-plan-radio input{margin-top:4px}.saas-plan-radio>span{display:flex;flex-direction:column}.saas-plan-radio b{font-size:11px}.saas-plan-radio small{font-size:8px;color:#887c8b;margin-top:3px;line-height:1.4}.saas-plan-radio>strong{font-size:14px;color:#743988;white-space:nowrap}.saas-plan-radio>strong small{display:block;text-align:right}.ref-attribution{padding:10px 12px;background:#f2fff8;border:1px solid #d2eddf;border-radius:12px;color:#3f6f5a;font-size:10px;margin-bottom:15px}
.referral-promo{background:linear-gradient(135deg,#fff7fb,#f9f6ff)}.referral-promo-card{display:grid;gap:9px;padding:25px;border-radius:22px;background:#fff;border:1px solid #eaddeb}.referral-promo-card>b{font-size:16px;color:#542e69}.referral-promo-card>span{font-size:11px;color:#695d6c}.referral-promo-card .saas-btn{margin-top:7px;justify-self:start}

.referral-public{background:#fff}.referral-hero{padding:75px 0;background:radial-gradient(circle at 12% 15%,#ffe6f2,transparent 30%),radial-gradient(circle at 88% 30%,#efe4ff,transparent 30%),#fff}
.referral-hero h1{font-size:55px;line-height:1.03;letter-spacing:-2px;margin:18px 0}.referral-hero h1 em{color:#e64f8e;font-style:normal}.referral-hero p{font-size:16px;line-height:1.7;color:#716477;max-width:680px}
.referral-earn-card{justify-self:end;width:min(380px,100%);padding:30px;border-radius:28px;background:#2b183f;color:#fff;box-shadow:0 25px 70px #32184435}.referral-earn-card>small{color:#cdbed8}.referral-earn-card>strong{font-size:68px;display:block;color:#ff83b9;margin:5px 0}.referral-earn-card>span{display:block;color:#e7dce9;font-size:11px;margin-bottom:20px}.referral-earn-card>div{border-top:1px solid #ffffff20;padding-top:16px;line-height:2;color:#e7dce9;font-size:11px}
.referral-step-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:13px}.referral-step-grid article{padding:20px;border:1px solid #eadfeb;border-radius:20px;background:#fff}.referral-step-grid article>b{width:34px;height:34px;border-radius:11px;background:#fff0f7;color:#d84381;display:grid;place-items:center}.referral-step-grid h3{font-size:14px;margin:12px 0 5px}.referral-step-grid p{font-size:10px;color:#7d7181;line-height:1.55}
.referral-auth-bg{min-height:100vh;background:radial-gradient(circle at 20% 10%,#ffe9f3,transparent 30%),radial-gradient(circle at 90% 30%,#eee5ff,transparent 28%),#faf8fb}.referral-auth-card{max-width:760px!important}.referral-auth-card>.saas-logo{margin-bottom:22px}

.ref-dashboard-bg{margin:0;background:#f7f6fa;color:#2c2431;font-family:Inter,ui-sans-serif,system-ui,sans-serif}.ref-topbar{background:#fff;border-bottom:1px solid #e9e3eb;position:sticky;top:0;z-index:30}.ref-topbar>.saas-public-wrap{height:74px;display:flex;align-items:center;justify-content:space-between}
.ref-welcome{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:16px}.ref-welcome h1{font-size:30px;margin:10px 0 5px}.ref-welcome p{margin:0;color:#7d7181;font-size:12px}
.ref-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin:18px 0}.ref-metrics>div{background:#fff;border:1px solid #e9e3eb;border-radius:18px;padding:18px}.ref-metrics small{display:block;color:#8b7f8e;font-size:9px}.ref-metrics strong{display:block;font-size:27px;color:#512d67;margin:5px 0}.ref-metrics span{font-size:9px;color:#9a8f9c}
.ref-share-card{display:grid;grid-template-columns:1fr auto;gap:22px;align-items:center;background:linear-gradient(135deg,#fff8fc,#fff)}.ref-share-card h2{margin:10px 0;font-size:22px}.ref-link-box{display:flex;gap:8px}.ref-link-box input{flex:1;min-width:0;border:1px solid #e5d9e6;border-radius:12px;padding:11px;background:#fff;font-size:11px}.ref-share-actions{display:flex;gap:8px}
.ref-dashboard-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:16px;margin-top:16px}.ref-commission-list{display:grid}.ref-commission-list>div{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid #eee9ef}.ref-commission-list>div:last-child{border-bottom:0}.ref-commission-list span{display:flex;flex-direction:column}.ref-commission-list b,.ref-commission-list strong{font-size:11px}.ref-commission-list small{font-size:8px;color:#8c808f;margin-top:3px}.ref-commission-list strong{color:#6e3785;text-align:right}
.ref-tabs{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 17px}.ref-tabs a{padding:9px 12px;border-radius:10px;border:1px solid #e7dfe9;background:#fff;text-decoration:none;color:#6a5d70;font-size:10px;font-weight:850}.ref-tabs a.active{background:#382451;color:#fff;border-color:#382451}
.ref-partner-mini{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #eee9ef}.ref-partner-mini:last-child{border-bottom:0}.ref-partner-mini b{font-size:11px}.ref-partner-mini small{display:block;font-size:8px;color:#8f8391;margin-top:3px}.ref-partner-mini strong{color:#63327a}
.ref-flow-admin{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:12px}.ref-flow-admin span{padding:9px 11px;border-radius:11px;background:#f8f4fa;font-size:10px}.ref-flow-admin i{font-style:normal;color:#b2a5b5}

@media(max-width:1000px){.referral-step-grid{grid-template-columns:repeat(3,1fr)}.ref-dashboard-grid{grid-template-columns:1fr}.ref-metrics{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.saas-plan-head{grid-template-columns:1fr}.saas-plan-popular{position:static;align-self:start;width:max-content;margin-bottom:8px}.referral-hero h1{font-size:40px}.referral-earn-card{justify-self:start}.referral-step-grid{grid-template-columns:1fr}.ref-share-card{grid-template-columns:1fr}.ref-share-actions{flex-wrap:wrap}.ref-link-box{flex-direction:column}.ref-metrics{grid-template-columns:1fr 1fr}.ref-welcome{flex-direction:column}}
@media(max-width:480px){.ref-metrics{grid-template-columns:1fr}.saas-register-plans{grid-template-columns:1fr}}


/* =========================================================
   SBM SaaS V2.2.1 — Landing UI Polish
   Fokus: pricing section + referral promo lebih kemas,
   seimbang, komersial dan mudah dibaca.
   ========================================================= */

:root{
  --sbm-bg:#fffafc;
  --sbm-surface:#ffffff;
  --sbm-line:#ead9e5;
  --sbm-primary:#cf4c93;
  --sbm-primary-dark:#50205d;
  --sbm-soft:#fdf3f8;
  --sbm-text:#2f2140;
  --sbm-muted:#74677a;
  --sbm-green:#1c8b63;
}

.saas-public{background:linear-gradient(180deg,#fff 0%,#fcf8fb 100%);color:var(--sbm-text)}
.saas-public-wrap{width:min(1180px, calc(100% - 32px));margin:0 auto}

.saas-section{padding:72px 0}
.saas-section-title{text-align:center;max-width:820px;margin:0 auto 34px}
.saas-section-title>span{
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid #eddce6;background:#fff;border-radius:999px;
  padding:8px 14px;font-size:11px;font-weight:900;letter-spacing:.08em;
  color:#b54b86;margin-bottom:12px
}
.saas-section-title h2{
  font-size:46px;line-height:1.05;letter-spacing:-1.6px;
  margin:0 0 12px;color:var(--sbm-primary-dark)
}
.saas-section-title p{
  font-size:16px;line-height:1.7;color:var(--sbm-muted);margin:0 auto;max-width:720px
}

/* Pricing grid */
.saas-pricing-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:26px!important;
  align-items:stretch!important;
  margin-top:14px
}
.saas-plan-card{
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:100%;
  border:1px solid var(--sbm-line)!important;
  border-radius:28px!important;
  background:linear-gradient(180deg,#fff 0%,#fffafd 100%)!important;
  padding:30px!important;
  box-shadow:0 20px 45px rgba(70,30,75,.08)!important;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease
}
.saas-plan-card:hover{
  transform:translateY(-4px);
  border-color:#d5a2c0!important;
  box-shadow:0 24px 56px rgba(96,41,105,.14)!important
}
.saas-plan-card.featured{
  background:linear-gradient(160deg,#fff6fb 0%,#f9f5ff 100%)!important;
  border:2px solid #d57db0!important;
  box-shadow:0 28px 60px rgba(181,75,134,.16)!important
}
.saas-plan-popular{
  position:absolute;top:18px;right:18px;
  background:linear-gradient(135deg,#cf4c93,#6a317d);
  color:#fff;border:none;border-radius:999px;
  padding:8px 12px;font-size:10px;font-weight:900;letter-spacing:.08em
}
.saas-pill{
  display:inline-flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:900;letter-spacing:.08em;
  color:#b54b86;background:#fff;border:1px solid #eddce6;
  border-radius:999px;padding:8px 12px
}
.saas-plan-head{
  display:grid!important;
  grid-template-columns:1fr auto!important;
  gap:16px!important;
  align-items:flex-start!important;
  margin-bottom:10px
}
.saas-plan-head h3{
  font-size:30px!important;line-height:1.05!important;
  margin:12px 0 8px!important;color:var(--sbm-primary-dark)!important
}
.saas-plan-head p{
  font-size:14px!important;line-height:1.65!important;
  color:var(--sbm-muted)!important;margin:0!important;max-width:520px
}
.saas-plan-card .saas-price{
  text-align:right;white-space:nowrap;align-self:start
}
.saas-plan-card .saas-price small{
  display:inline-block;font-size:18px!important;color:#6d5b73;vertical-align:top;margin-top:10px
}
.saas-plan-card .saas-price strong{
  font-size:68px!important;line-height:.95!important;color:#5f2d75!important
}
.saas-plan-card .saas-price span{
  display:block;font-size:14px!important;color:#7b697e;margin-top:6px
}
.saas-plan-quota{
  display:flex;gap:10px;flex-wrap:wrap;
  margin:14px 0 18px!important
}
.saas-plan-quota span{
  font-size:12px!important;font-weight:700;
  color:#5f5866;background:#f8f1f6;border:1px solid #f0e1ea;
  border-radius:999px;padding:8px 12px
}
.saas-plan-card ul{
  list-style:none;padding:0;margin:6px 0 24px!important;
  display:grid;gap:11px;flex:1
}
.saas-plan-card li{
  display:flex;align-items:flex-start;
  font-size:14px!important;line-height:1.5!important;color:#4c4253!important
}
.saas-plan-card li:before{
  content:"✓";flex:0 0 auto;
  width:22px;height:22px;display:grid;place-items:center;
  border-radius:50%;background:#eef9f4;color:var(--sbm-green);
  font-weight:900;margin-right:10px;margin-top:1px
}
.saas-plan-card > .saas-btn{
  width:100%;justify-content:center;
  border-radius:16px;padding:14px 18px;font-size:14px;font-weight:900
}

/* More distinct buttons */
.saas-btn.ghost{
  background:#fff!important;border:1px solid #dfc4d5!important;color:#5a306f!important
}
.saas-btn.primary{
  background:linear-gradient(135deg,#cf4c93,#7a397f)!important;
  color:#fff!important;border:none!important;
  box-shadow:0 14px 28px rgba(176,70,128,.22)
}

/* Referral promo */
.referral-promo{
  padding-top:28px!important
}
.referral-promo .saas-two{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:26px;
  align-items:stretch
}
.referral-promo .saas-two > div:first-child{
  background:linear-gradient(135deg,#fff5fa 0%,#fff 100%);
  border:1px solid #ebdbe6;
  border-radius:30px;
  padding:34px
}
.referral-promo .saas-two > div:first-child h2{
  font-size:40px;line-height:1.08;letter-spacing:-1.2px;
  color:#4c275e;margin:14px 0 10px
}
.referral-promo .saas-two > div:first-child p{
  font-size:16px;line-height:1.75;color:#74677a;margin:0
}
.referral-promo-card{
  display:flex!important;flex-direction:column;justify-content:center;
  background:linear-gradient(160deg,#2f1b44 0%,#4a255e 100%)!important;
  border:none!important;border-radius:30px!important;
  padding:34px!important;color:#fff!important;
  box-shadow:0 26px 56px rgba(55,26,79,.22)
}
.referral-promo-card b{
  font-size:24px!important;line-height:1.15;color:#fff!important;margin-bottom:10px
}
.referral-promo-card p{
  margin:0 0 18px;font-size:14px;line-height:1.7;color:#e6dceb
}
.referral-points{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px
}
.referral-points span{
  display:flex;align-items:center;
  font-size:13px;color:#f3ebf7;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;padding:12px 14px
}
.referral-promo-card .saas-btn{
  margin-top:8px;width:100%;justify-content:center
}

/* Register page plan selector polish */
.saas-register-plans{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 20px
}
.saas-plan-radio{
  border:1px solid #ead9e5!important;border-radius:18px!important;
  padding:16px!important;background:#fff!important;
  display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start
}
.saas-plan-radio.selected,
.saas-plan-radio:has(input:checked){
  border-color:#cf4c93!important;background:#fff6fb!important;
  box-shadow:0 0 0 3px rgba(231,177,207,.25)
}
.saas-plan-radio > span b{
  display:block;font-size:16px;color:#4d275f
}
.saas-plan-radio > span small{
  display:block;font-size:12px;color:#796b7e;line-height:1.55;margin-top:4px
}
.saas-plan-radio strong{
  font-size:20px;color:#652f79
}
.saas-plan-radio strong small{
  display:block;font-size:11px;color:#87798b;font-weight:600
}
.ref-attribution{
  margin:0 0 16px;padding:12px 14px;border-radius:14px;
  background:#fef6fa;border:1px solid #f2d9e6;
  color:#925176;font-size:13px
}

/* Fix tiny looking sections on medium screens */
@media (max-width: 1100px){
  .saas-section-title h2{font-size:38px}
  .saas-plan-card .saas-price strong{font-size:58px!important}
}
@media (max-width: 900px){
  .saas-pricing-grid{grid-template-columns:1fr!important}
  .referral-promo .saas-two{grid-template-columns:1fr}
  .saas-register-plans{grid-template-columns:1fr}
}
@media (max-width: 600px){
  .saas-public-wrap{width:min(100% - 22px, 1180px)}
  .saas-section{padding:54px 0}
  .saas-section-title h2{font-size:31px;letter-spacing:-1px}
  .saas-section-title p{font-size:14px}
  .saas-plan-card{padding:22px!important;border-radius:22px!important}
  .saas-plan-head{grid-template-columns:1fr!important}
  .saas-plan-head h3{font-size:25px!important}
  .saas-plan-card .saas-price{text-align:left}
  .saas-plan-card .saas-price strong{font-size:54px!important}
  .saas-plan-quota span{font-size:11px!important}
  .saas-plan-card li{font-size:13px!important}
  .referral-promo .saas-two > div:first-child,
  .referral-promo-card{padding:24px!important;border-radius:24px!important}
  .referral-promo .saas-two > div:first-child h2{font-size:30px}
  .referral-points{grid-template-columns:1fr}
}


/* =========================================================
   SBM SaaS V2.2.2 — Referral Landing Revamp
   ========================================================= */
.referral-v222{
  --ref-primary:#cf4c93;
  --ref-dark:#2f1843;
  --ref-dark-2:#4c275e;
  --ref-soft:#fff5fa;
  --ref-line:#ecdbe7;
  --ref-text:#342744;
  --ref-muted:#75697b;
  --ref-green:#1f8a64;
}

.referral-v222 .saas-public-wrap{width:min(1180px,calc(100% - 32px));margin:0 auto}
.referral-v222 .saas-section{padding:72px 0}
.referral-v222 .saas-section-title{text-align:center;max-width:820px;margin:0 auto 36px}
.referral-v222 .saas-section-title h2{
  font-size:46px;line-height:1.08;letter-spacing:-1.4px;
  color:var(--ref-dark);margin:0 0 12px
}
.referral-v222 .saas-section-title p{
  font-size:16px;line-height:1.75;color:var(--ref-muted);margin:0 auto;max-width:760px
}
.referral-v222 .saas-pill{
  display:inline-flex;align-items:center;justify-content:center;
  padding:8px 14px;border-radius:999px;border:1px solid var(--ref-line);
  background:#fff;color:#b14d83;font-size:11px;font-weight:900;letter-spacing:.08em
}

/* hero */
.referral-v222 .ref-hero{
  padding:84px 0 68px;
  background:
    radial-gradient(circle at 12% 16%, rgba(255,205,226,.65), transparent 26%),
    radial-gradient(circle at 88% 22%, rgba(231,219,255,.8), transparent 24%),
    linear-gradient(180deg,#fff 0%,#fff9fc 100%);
}
.referral-v222 .ref-hero-grid{
  display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:center
}
.referral-v222 .ref-hero-copy h1{
  font-size:62px;line-height:1.02;letter-spacing:-2.2px;
  margin:18px 0 14px;color:var(--ref-dark)
}
.referral-v222 .ref-hero-copy h1 em{font-style:normal;color:var(--ref-primary)}
.referral-v222 .ref-hero-copy p{
  font-size:17px;line-height:1.82;color:var(--ref-muted);max-width:760px;margin:0
}
.referral-v222 .ref-hero-points{
  display:grid;grid-template-columns:1fr 1fr;gap:11px;margin:24px 0 26px
}
.referral-v222 .ref-hero-points span{
  display:flex;align-items:center;
  padding:13px 15px;border:1px solid var(--ref-line);border-radius:16px;
  background:#fff;color:#584f62;font-size:14px;font-weight:700
}
.referral-v222 .saas-actions{display:flex;gap:12px;flex-wrap:wrap}

.referral-v222 .ref-hero-card{
  background:linear-gradient(160deg,#2b183f 0%,#522960 100%);
  color:#fff;border-radius:30px;padding:32px;
  box-shadow:0 28px 62px rgba(63,28,86,.22)
}
.referral-v222 .ref-hero-card > small{
  display:block;color:#d9cadf;font-size:13px;font-weight:700
}
.referral-v222 .ref-hero-card > strong{
  display:block;font-size:78px;line-height:.95;color:#ff8dbf;margin:10px 0 8px
}
.referral-v222 .ref-hero-card > span{
  display:block;color:#eee3ef;font-size:13px;line-height:1.6;margin-bottom:22px
}
.referral-v222 .ref-mini-metrics{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px
}
.referral-v222 .ref-mini-metrics > div{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  border-radius:16px;padding:14px 15px
}
.referral-v222 .ref-mini-metrics b{
  display:block;font-size:24px;color:#fff;margin-bottom:4px
}
.referral-v222 .ref-mini-metrics small{
  color:#d9cedc;font-size:11px
}
.referral-v222 .ref-hero-card ul{
  list-style:none;padding:0;margin:0;display:grid;gap:12px
}
.referral-v222 .ref-hero-card li{
  display:flex;align-items:flex-start;font-size:14px;line-height:1.6;color:#f2eaf4
}
.referral-v222 .ref-hero-card li:before{
  content:"✓";width:22px;height:22px;display:grid;place-items:center;
  flex:0 0 auto;margin-right:10px;border-radius:999px;
  background:rgba(255,255,255,.12);color:#fff;font-weight:900
}

/* sections */
.referral-v222 .ref-section-light{background:linear-gradient(180deg,#fff 0%,#fdf9fc 100%)}
.referral-v222 .ref-section-soft{background:linear-gradient(180deg,#fff8fc 0%,#fff 100%)}

.referral-v222 .ref-benefit-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px
}
.referral-v222 .ref-benefit-grid article{
  background:#fff;border:1px solid var(--ref-line);border-radius:24px;
  padding:24px;box-shadow:0 16px 38px rgba(67,32,70,.06)
}
.referral-v222 .ref-benefit-grid .icon{
  width:52px;height:52px;border-radius:18px;
  display:grid;place-items:center;background:#fff3f8;
  font-size:24px;margin-bottom:14px
}
.referral-v222 .ref-benefit-grid h3{
  font-size:22px;line-height:1.15;color:var(--ref-dark);margin:0 0 10px
}
.referral-v222 .ref-benefit-grid p{
  font-size:14px;line-height:1.75;color:var(--ref-muted);margin:0
}

.referral-v222 .ref-flow-grid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:16px
}
.referral-v222 .ref-flow-grid article{
  position:relative;
  background:#fff;border:1px solid var(--ref-line);border-radius:24px;
  padding:22px;box-shadow:0 16px 36px rgba(67,32,70,.05)
}
.referral-v222 .ref-flow-grid article b{
  width:42px;height:42px;border-radius:14px;display:grid;place-items:center;
  background:#fff0f7;color:var(--ref-primary);font-size:18px;font-weight:900
}
.referral-v222 .ref-flow-grid article h3{
  font-size:20px;line-height:1.18;color:var(--ref-dark);margin:15px 0 10px
}
.referral-v222 .ref-flow-grid article p{
  font-size:14px;line-height:1.72;color:var(--ref-muted);margin:0
}

.referral-v222 .ref-two-col{
  display:grid;grid-template-columns:1.05fr .95fr;gap:24px;align-items:stretch
}
.referral-v222 .ref-test-copy,
.referral-v222 .ref-cta-box{
  background:#fff;border:1px solid var(--ref-line);border-radius:28px;padding:30px
}
.referral-v222 .ref-test-copy h2,
.referral-v222 .ref-cta-box h3{
  font-size:38px;line-height:1.08;letter-spacing:-1px;color:var(--ref-dark);margin:14px 0 10px
}
.referral-v222 .ref-test-copy p,
.referral-v222 .ref-cta-box p{
  font-size:15px;line-height:1.8;color:var(--ref-muted);margin:0 0 18px
}
.referral-v222 .ref-audience-list{
  display:grid;grid-template-columns:1fr 1fr;gap:11px
}
.referral-v222 .ref-audience-list span{
  display:flex;align-items:center;
  padding:13px 14px;border-radius:16px;
  background:#fff7fb;border:1px solid #f0dce8;
  color:#5d5264;font-size:14px;font-weight:700
}
.referral-v222 .ref-audience-list span:before{
  content:"•";color:var(--ref-primary);font-size:22px;line-height:1;margin-right:9px
}
.referral-v222 .ref-cta-box{
  background:linear-gradient(145deg,#2f1943 0%,#5a2b68 100%);
  color:#fff;display:flex;flex-direction:column;justify-content:center;
  box-shadow:0 26px 55px rgba(62,26,86,.16)
}
.referral-v222 .ref-cta-box h3{color:#fff}
.referral-v222 .ref-cta-box p{color:#e5dce9}
.referral-v222 .ref-cta-box .saas-btn{width:100%;justify-content:center}
.referral-v222 .ref-cta-box .saas-btn + .saas-btn{margin-top:10px}

.referral-v222 .ref-faq-grid{
  max-width:980px;margin:0 auto;display:grid;gap:14px
}
.referral-v222 .ref-faq-grid details{
  background:#fff;border:1px solid var(--ref-line);border-radius:20px;
  padding:18px 20px;box-shadow:0 12px 30px rgba(67,32,70,.04)
}
.referral-v222 .ref-faq-grid summary{
  list-style:none;cursor:pointer;
  font-size:18px;font-weight:800;color:var(--ref-dark)
}
.referral-v222 .ref-faq-grid summary::-webkit-details-marker{display:none}
.referral-v222 .ref-faq-grid p{
  margin:12px 0 0;font-size:14px;line-height:1.75;color:var(--ref-muted)
}

.referral-v222 .ref-bottom-cta{padding-top:10px;padding-bottom:78px}
.referral-v222 .ref-bottom-cta-box{
  display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;
  border:1px solid var(--ref-line);border-radius:30px;padding:34px;
  background:linear-gradient(135deg,#fff5fa 0%,#f8f6ff 100%);
  box-shadow:0 20px 42px rgba(67,32,70,.06)
}
.referral-v222 .ref-bottom-cta-box h2{
  font-size:40px;line-height:1.08;letter-spacing:-1px;color:var(--ref-dark);margin:14px 0 10px
}
.referral-v222 .ref-bottom-cta-box p{
  font-size:15px;line-height:1.75;color:var(--ref-muted);margin:0
}
.referral-v222 .ref-bottom-actions{display:flex;gap:12px;flex-wrap:wrap}

/* buttons */
.referral-v222 .saas-btn{
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:16px;padding:14px 20px;font-size:14px;font-weight:900;
  text-decoration:none
}
.referral-v222 .saas-btn.primary{
  background:linear-gradient(135deg,#cf4c93,#7a397f)!important;
  color:#fff!important;border:none!important;
  box-shadow:0 14px 30px rgba(176,70,128,.22)
}
.referral-v222 .saas-btn.ghost{
  background:#fff!important;border:1px solid #dec5d5!important;color:#5e336f!important
}
.referral-v222 .saas-cta-sm{
  background:linear-gradient(135deg,#cf4c93,#7a397f)!important;
  color:#fff!important;border:none!important
}

/* responsive */
@media (max-width:1100px){
  .referral-v222 .ref-hero-copy h1{font-size:52px}
  .referral-v222 .saas-section-title h2{font-size:38px}
  .referral-v222 .ref-benefit-grid{grid-template-columns:repeat(2,1fr)}
  .referral-v222 .ref-flow-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .referral-v222 .ref-hero-grid,
  .referral-v222 .ref-two-col,
  .referral-v222 .ref-bottom-cta-box{grid-template-columns:1fr}
  .referral-v222 .ref-hero-card{max-width:620px}
  .referral-v222 .ref-flow-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .referral-v222 .saas-public-wrap{width:min(100% - 22px,1180px)}
  .referral-v222 .saas-section{padding:56px 0}
  .referral-v222 .ref-hero{padding:62px 0 52px}
  .referral-v222 .ref-hero-copy h1{font-size:38px;letter-spacing:-1.2px}
  .referral-v222 .saas-section-title h2,
  .referral-v222 .ref-test-copy h2,
  .referral-v222 .ref-cta-box h3,
  .referral-v222 .ref-bottom-cta-box h2{font-size:29px}
  .referral-v222 .ref-hero-points,
  .referral-v222 .ref-benefit-grid,
  .referral-v222 .ref-flow-grid,
  .referral-v222 .ref-audience-list{grid-template-columns:1fr}
  .referral-v222 .ref-hero-card > strong{font-size:58px}
  .referral-v222 .ref-mini-metrics{grid-template-columns:1fr 1fr}
  .referral-v222 .ref-test-copy,
  .referral-v222 .ref-cta-box,
  .referral-v222 .ref-bottom-cta-box{padding:24px}
}


/* =========================================================
   SBM SaaS V2.2.3 — Referral High-Converting Upgrade
   ========================================================= */
.referral-v223{
  --v223-primary:#d34f93;
  --v223-primary-dark:#4a245b;
  --v223-text:#352845;
  --v223-muted:#75697a;
  --v223-line:#ebd9e6;
  --v223-soft:#fff7fb;
  --v223-green:#24835f;
}
.referral-v223 .saas-public-wrap{width:min(1180px,calc(100% - 32px));margin:0 auto}
.referral-v223 .saas-section{padding:76px 0}
.referral-v223 .saas-section-title{text-align:center;max-width:860px;margin:0 auto 38px}
.referral-v223 .saas-section-title h2{
  font-size:46px;line-height:1.08;letter-spacing:-1.5px;color:var(--v223-primary-dark);margin:0 0 12px
}
.referral-v223 .saas-section-title p{
  font-size:16px;line-height:1.8;color:var(--v223-muted);margin:0 auto;max-width:760px
}
.referral-v223 .saas-pill{
  display:inline-flex;align-items:center;justify-content:center;
  padding:8px 14px;border-radius:999px;border:1px solid var(--v223-line);
  background:#fff;color:#b54d85;font-size:11px;font-weight:900;letter-spacing:.08em
}
.referral-v223 .saas-btn{
  display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
  border-radius:16px;padding:14px 20px;font-size:14px;font-weight:900
}
.referral-v223 .saas-btn.primary{
  background:linear-gradient(135deg,#d34f93,#7c3a81)!important;color:#fff!important;border:none!important;
  box-shadow:0 16px 34px rgba(176,70,128,.24)
}
.referral-v223 .saas-btn.ghost{
  background:#fff!important;color:#5e356f!important;border:1px solid #ddc6d5!important
}
.referral-v223 .saas-cta-sm{
  background:linear-gradient(135deg,#d34f93,#7c3a81)!important;color:#fff!important;border:none!important
}

/* hero */
.referral-v223 .v223-hero{
  padding:88px 0 74px;
  background:
    radial-gradient(circle at 10% 18%, rgba(255,205,226,.65), transparent 26%),
    radial-gradient(circle at 92% 22%, rgba(229,219,255,.88), transparent 24%),
    linear-gradient(180deg,#fff 0%,#fffafc 100%);
}
.referral-v223 .v223-hero-grid{
  display:grid;grid-template-columns:1.12fr .88fr;gap:28px;align-items:center
}
.referral-v223 .v223-copy h1{
  font-size:62px;line-height:1.02;letter-spacing:-2.2px;color:var(--v223-primary-dark);margin:18px 0 14px
}
.referral-v223 .v223-copy h1 em{font-style:normal;color:var(--v223-primary)}
.referral-v223 .v223-copy p{
  font-size:17px;line-height:1.86;color:var(--v223-muted);max-width:780px;margin:0
}
.referral-v223 .v223-badges{
  display:grid;grid-template-columns:1fr 1fr;gap:11px;margin:24px 0 26px
}
.referral-v223 .v223-badges span{
  display:flex;align-items:center;padding:13px 14px;border-radius:16px;
  border:1px solid var(--v223-line);background:#fff;color:#5c5264;font-size:14px;font-weight:700
}
.referral-v223 .saas-actions{display:flex;gap:12px;flex-wrap:wrap}
.referral-v223 .v223-trust-line{
  display:flex;gap:18px;flex-wrap:wrap;margin-top:20px;color:#8b7e8f;font-size:13px
}
.referral-v223 .v223-trust-line span{display:flex;align-items:center}

.referral-v223 .v223-hero-card{
  background:linear-gradient(165deg,#2d1842 0%,#5a2b67 100%);
  border-radius:30px;padding:32px;color:#fff;
  box-shadow:0 30px 66px rgba(63,28,86,.22)
}
.referral-v223 .v223-card-top small{
  display:block;color:#d8c9df;font-size:13px;font-weight:700
}
.referral-v223 .v223-card-top strong{
  display:block;color:#ff8dbc;font-size:82px;line-height:.94;margin:10px 0 8px
}
.referral-v223 .v223-card-top span{
  display:block;color:#eee4ef;font-size:13px;line-height:1.65;margin-bottom:22px
}
.referral-v223 .v223-mini-stats{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px
}
.referral-v223 .v223-mini-stats > div{
  padding:14px 14px;border-radius:16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.13)
}
.referral-v223 .v223-mini-stats b{display:block;font-size:24px;margin-bottom:3px;color:#fff}
.referral-v223 .v223-mini-stats small{font-size:11px;color:#d9cedc}
.referral-v223 .v223-card-list{display:grid;gap:10px}
.referral-v223 .v223-card-list > div{
  display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:start;
  padding:11px 0;border-top:1px solid rgba(255,255,255,.11)
}
.referral-v223 .v223-card-list > div:first-child{border-top:0;padding-top:0}
.referral-v223 .v223-card-list span{
  width:34px;height:34px;border-radius:12px;display:grid;place-items:center;
  background:rgba(255,255,255,.12);font-weight:900
}
.referral-v223 .v223-card-list p{margin:0;color:#f3edf4;font-size:13px;line-height:1.6}

/* section skins */
.referral-v223 .v223-soft-section{background:linear-gradient(180deg,#fffafc 0%,#fff 100%)}

/* feature cards */
.referral-v223 .v223-feature-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px
}
.referral-v223 .v223-feature-grid article{
  background:#fff;border:1px solid var(--v223-line);border-radius:24px;
  padding:24px;box-shadow:0 16px 38px rgba(67,32,70,.06)
}
.referral-v223 .v223-feature-grid .icon{
  width:54px;height:54px;border-radius:18px;background:#fff2f8;display:grid;place-items:center;
  font-size:24px;margin-bottom:15px
}
.referral-v223 .v223-feature-grid h3{
  font-size:22px;line-height:1.15;color:var(--v223-primary-dark);margin:0 0 10px
}
.referral-v223 .v223-feature-grid p{
  font-size:14px;line-height:1.76;color:var(--v223-muted);margin:0
}

/* commission examples */
.referral-v223 .v223-earn-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px
}
.referral-v223 .earn-card{
  background:#fff;border:1px solid var(--v223-line);border-radius:26px;padding:26px;
  box-shadow:0 18px 40px rgba(67,32,70,.06);text-align:center
}
.referral-v223 .earn-card.featured{
  background:linear-gradient(155deg,#fff7fb 0%,#faf6ff 100%);
  border:2px solid #d67eb1;box-shadow:0 20px 48px rgba(190,89,144,.12)
}
.referral-v223 .earn-card.total{
  background:linear-gradient(160deg,#2e1842 0%,#522a61 100%);border:none;color:#fff
}
.referral-v223 .earn-card small{
  display:inline-flex;padding:7px 11px;border-radius:999px;border:1px solid #eddbe6;background:#fff;font-size:11px;font-weight:900;color:#b34d84
}
.referral-v223 .earn-card.total small{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.08);color:#fff}
.referral-v223 .earn-card h3{
  font-size:24px;line-height:1.1;color:var(--v223-primary-dark);margin:16px 0 10px
}
.referral-v223 .earn-card.total h3{color:#fff}
.referral-v223 .earn-card p{
  font-size:14px;line-height:1.72;color:var(--v223-muted);margin:0 0 16px
}
.referral-v223 .earn-card.total p{color:#e6dceb}
.referral-v223 .earn-card .price{
  font-size:36px;font-weight:900;letter-spacing:-1px;color:#623178
}
.referral-v223 .earn-card.total .price{color:#ff96c3}
.referral-v223 .earn-card .arrow{
  margin:13px auto 10px;padding:7px 12px;border-radius:999px;background:#f8f1f6;color:#806f84;
  font-size:11px;font-weight:800;width:max-content
}
.referral-v223 .earn-card.total .arrow{background:rgba(255,255,255,.12);color:#f1e7f4}
.referral-v223 .earn-card .commission{
  font-size:42px;font-weight:950;letter-spacing:-1px;color:#d34f93
}
.referral-v223 .earn-card.total .commission{color:#fff}
.referral-v223 .v223-note{
  margin-top:16px;text-align:center;font-size:13px;line-height:1.75;color:#8a7f8d
}

/* flow */
.referral-v223 .v223-flow{
  display:grid;grid-template-columns:repeat(5,1fr);gap:16px
}
.referral-v223 .v223-flow article{
  background:#fff;border:1px solid var(--v223-line);border-radius:24px;padding:22px;
  box-shadow:0 16px 35px rgba(67,32,70,.05)
}
.referral-v223 .v223-flow b{
  width:42px;height:42px;border-radius:14px;display:grid;place-items:center;
  background:#fff0f7;color:var(--v223-primary);font-size:18px;font-weight:900
}
.referral-v223 .v223-flow h3{
  font-size:20px;line-height:1.18;color:var(--v223-primary-dark);margin:15px 0 10px
}
.referral-v223 .v223-flow p{
  font-size:14px;line-height:1.72;color:var(--v223-muted);margin:0
}

/* audience + proof */
.referral-v223 .v223-two-col{
  display:grid;grid-template-columns:1.04fr .96fr;gap:22px;align-items:stretch
}
.referral-v223 .v223-audience-box,
.referral-v223 .v223-social-proof{
  background:#fff;border:1px solid var(--v223-line);border-radius:28px;padding:30px
}
.referral-v223 .v223-audience-box h2,
.referral-v223 .v223-social-proof h2{
  font-size:38px;line-height:1.08;letter-spacing:-1px;color:var(--v223-primary-dark);margin:14px 0 10px
}
.referral-v223 .v223-audience-box p,
.referral-v223 .v223-social-proof p{
  font-size:15px;line-height:1.8;color:var(--v223-muted);margin:0 0 18px
}
.referral-v223 .v223-audience-tags{
  display:grid;grid-template-columns:1fr 1fr;gap:11px
}
.referral-v223 .v223-audience-tags span{
  display:flex;align-items:center;padding:13px 14px;border-radius:16px;background:#fff7fb;
  border:1px solid #f0dce8;color:#5d5264;font-size:14px;font-weight:700
}
.referral-v223 .v223-audience-tags span:before{
  content:"•";font-size:22px;color:var(--v223-primary);line-height:1;margin-right:9px
}
.referral-v223 .v223-social-proof{
  background:linear-gradient(145deg,#fff6fb 0%,#faf7ff 100%)
}
.referral-v223 .v223-social-proof ul{
  list-style:none;padding:0;margin:0 0 20px;display:grid;gap:12px
}
.referral-v223 .v223-social-proof li{
  display:flex;align-items:flex-start;font-size:14px;line-height:1.7;color:#584f62
}
.referral-v223 .v223-social-proof li:before{
  content:"✓";width:22px;height:22px;display:grid;place-items:center;border-radius:999px;
  background:#eef9f3;color:var(--v223-green);font-weight:900;margin-right:10px;flex:0 0 auto
}

/* faq */
.referral-v223 .v223-faq-grid{
  max-width:980px;margin:0 auto;display:grid;gap:14px
}
.referral-v223 .v223-faq-grid details{
  background:#fff;border:1px solid var(--v223-line);border-radius:20px;padding:18px 20px;
  box-shadow:0 12px 30px rgba(67,32,70,.04)
}
.referral-v223 .v223-faq-grid summary{
  list-style:none;cursor:pointer;font-size:18px;font-weight:800;color:var(--v223-primary-dark)
}
.referral-v223 .v223-faq-grid summary::-webkit-details-marker{display:none}
.referral-v223 .v223-faq-grid p{
  margin:12px 0 0;font-size:14px;line-height:1.75;color:var(--v223-muted)
}

/* final cta */
.referral-v223 .v223-final-cta{padding-top:8px;padding-bottom:82px}
.referral-v223 .v223-final-box{
  display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;
  border:1px solid var(--v223-line);border-radius:30px;padding:34px;
  background:linear-gradient(135deg,#fff5fa 0%,#f8f6ff 100%);
  box-shadow:0 20px 42px rgba(67,32,70,.06)
}
.referral-v223 .v223-final-box h2{
  font-size:40px;line-height:1.08;letter-spacing:-1px;color:var(--v223-primary-dark);margin:14px 0 10px
}
.referral-v223 .v223-final-box p{
  font-size:15px;line-height:1.78;color:var(--v223-muted);margin:0
}
.referral-v223 .v223-final-actions{display:flex;gap:12px;flex-wrap:wrap}

/* responsive */
@media (max-width:1100px){
  .referral-v223 .v223-copy h1{font-size:52px}
  .referral-v223 .saas-section-title h2{font-size:39px}
  .referral-v223 .v223-feature-grid{grid-template-columns:repeat(2,1fr)}
  .referral-v223 .v223-flow{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .referral-v223 .v223-hero-grid,
  .referral-v223 .v223-two-col,
  .referral-v223 .v223-final-box{grid-template-columns:1fr}
  .referral-v223 .v223-earn-grid{grid-template-columns:1fr}
  .referral-v223 .v223-flow{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .referral-v223 .saas-public-wrap{width:min(100% - 22px,1180px)}
  .referral-v223 .saas-section{padding:58px 0}
  .referral-v223 .v223-hero{padding:62px 0 54px}
  .referral-v223 .v223-copy h1{font-size:39px;letter-spacing:-1.2px}
  .referral-v223 .saas-section-title h2,
  .referral-v223 .v223-audience-box h2,
  .referral-v223 .v223-social-proof h2,
  .referral-v223 .v223-final-box h2{font-size:30px}
  .referral-v223 .v223-badges,
  .referral-v223 .v223-feature-grid,
  .referral-v223 .v223-flow,
  .referral-v223 .v223-audience-tags{grid-template-columns:1fr}
  .referral-v223 .v223-card-top strong{font-size:60px}
  .referral-v223 .v223-mini-stats{grid-template-columns:1fr 1fr}
  .referral-v223 .v223-audience-box,
  .referral-v223 .v223-social-proof,
  .referral-v223 .v223-final-box,
  .referral-v223 .v223-hero-card{padding:24px}
  .referral-v223 .saas-actions,
  .referral-v223 .v223-final-actions{display:grid;grid-template-columns:1fr}
}