:root{--saas-ink:#16132d;--saas-muted:#69667d;--saas-purple:#6847e6;--saas-soft:#f5f2ff;--saas-line:#e9e7f1}
.saas-public{margin:0;color:var(--saas-ink);background:#fff;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif}
.saas-nav{position:sticky;z-index:1000;top:0;border-bottom:1px solid rgba(233,231,241,.8);background:rgba(255,255,255,.88);backdrop-filter:blur(18px)}
.saas-nav-inner{display:flex;align-items:center;justify-content:space-between;min-height:72px}
.saas-brand{display:inline-flex;align-items:center;gap:9px;color:var(--saas-ink);text-decoration:none;font-size:20px}.saas-brand span{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;color:#fff;background:linear-gradient(135deg,#5d3bd5,#9164ed);font-weight:900}.saas-brand strong{font-weight:900}
.saas-nav-links{display:flex;align-items:center;gap:26px}.saas-nav-links>a:not(.btn){color:#555166;text-decoration:none;font-weight:700}.saas-menu-toggle{display:none;border:0;background:none}
.saas-hero{padding:86px 0 76px;overflow:hidden;background:radial-gradient(circle at 82% 18%,#eee8ff 0,transparent 30rem),linear-gradient(180deg,#fcfbff,#fff)}
.saas-hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:58px;align-items:center}.saas-badge{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:999px;color:#5e3bd1;background:#eee9ff;font-size:11px;font-weight:900;letter-spacing:.05em}.saas-badge svg{width:14px;height:14px}
.saas-hero h1{max-width:700px;margin:20px 0 18px;font-size:clamp(44px,5.2vw,72px);line-height:1.02;letter-spacing:-.055em;font-weight:900}.saas-hero h1 em{color:var(--saas-purple);font-style:normal}.saas-hero p{max-width:620px;color:var(--saas-muted);font-size:18px;line-height:1.7}.saas-hero-actions{display:flex;gap:12px;margin-top:28px}.saas-hero-actions .btn{display:inline-flex;align-items:center;gap:8px}.saas-trust{display:flex;flex-wrap:wrap;gap:18px;margin-top:24px;color:#656174;font-size:12px}.saas-trust span{display:flex;align-items:center;gap:6px}.saas-trust svg{width:15px;height:15px;color:#28a46d}
.saas-dashboard-preview{transform:rotate(1deg);overflow:hidden;border:1px solid #ded9ef;border-radius:22px;background:#fff;box-shadow:0 34px 80px rgba(57,38,124,.2)}.preview-top{display:flex;align-items:center;gap:6px;padding:12px 14px;border-bottom:1px solid #eee;background:#faf9fd}.preview-top>span{width:8px;height:8px;border-radius:50%;background:#ddd}.preview-top strong{margin-left:8px;font-size:11px}.preview-body{display:grid;grid-template-columns:58px 1fr;min-height:420px}.preview-body aside{display:flex;align-items:center;flex-direction:column;gap:25px;padding:16px 0;color:#918da0;background:#201a3f}.preview-body aside b{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;color:#fff;background:#7654e7}.preview-body aside svg{width:17px}.preview-body section{padding:22px;background:#fafafe}.preview-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.preview-cards span{padding:12px;border-radius:11px;color:#8a8797;background:#fff;font-size:9px;box-shadow:0 6px 16px rgba(26,20,57,.05)}.preview-cards strong{display:block;margin-top:5px;color:#28243c;font-size:17px}.preview-chart{display:flex;align-items:end;gap:10px;height:150px;margin:16px 0;padding:15px;border-radius:12px;background:#fff}.preview-chart div{flex:1;border-radius:6px 6px 2px 2px;background:linear-gradient(#8562eb,#b7a5f5)}.preview-chart div:nth-child(1){height:30%}.preview-chart div:nth-child(2){height:55%}.preview-chart div:nth-child(3){height:42%}.preview-chart div:nth-child(4){height:77%}.preview-chart div:nth-child(5){height:58%}.preview-chart div:nth-child(6){height:88%}.preview-chart div:nth-child(7){height:72%}.preview-messages{display:grid;gap:8px}.preview-messages span{display:grid;grid-template-columns:32px 1fr;gap:8px;align-items:center;padding:9px;border-radius:10px;background:#fff}.preview-messages b{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;color:#6847e6;background:#eee9ff;font-size:10px}.preview-messages i{color:#777483;font-size:10px;font-style:normal}
.saas-logo-strip{border-block:1px solid var(--saas-line);padding:20px 0}.saas-logo-strip .container{display:flex;align-items:center;justify-content:center;gap:35px;color:#9692a2}.saas-logo-strip strong{color:#5c5867}
.saas-section{padding:90px 0}.saas-section-heading{max-width:680px;margin:0 auto 44px;text-align:center}.saas-section-heading>span,.saas-page-hero span{color:var(--saas-purple);font-size:11px;font-weight:900;letter-spacing:.09em}.saas-section-heading h2{margin:10px 0;font-size:40px;letter-spacing:-.035em;font-weight:900}.saas-section-heading p{color:var(--saas-muted)}
.saas-feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.saas-feature-grid article{padding:24px;border:1px solid var(--saas-line);border-radius:18px;background:#fff;transition:.2s}.saas-feature-grid article:hover{transform:translateY(-4px);box-shadow:0 18px 42px rgba(43,31,93,.1)}.saas-feature-grid article>span,.saas-feature-detail-grid article>span{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;color:#6847e6;background:#eee9ff}.saas-feature-grid h3{margin:18px 0 7px;font-size:18px}.saas-feature-grid p,.saas-feature-detail-grid p{margin:0;color:var(--saas-muted);line-height:1.65}
.saas-pricing-section{background:#faf9fd}.saas-plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}.saas-plan-grid article{position:relative;padding:26px;border:1px solid var(--saas-line);border-radius:20px;background:#fff}.saas-plan-grid article.featured{border:2px solid #7552e5;box-shadow:0 20px 48px rgba(77,49,174,.14)}.popular{position:absolute;top:-12px;left:50%;transform:translateX(-50%);padding:5px 11px;border-radius:999px;color:#fff;background:#7552e5;font-size:9px;white-space:nowrap}.saas-plan-grid article>p{min-height:48px;color:var(--saas-muted)}.plan-price{display:flex;align-items:end;gap:5px;margin:20px 0}.plan-price strong{font-size:28px}.plan-price span{padding-bottom:4px;color:var(--saas-muted);font-size:11px}.saas-plan-grid ul{display:grid;gap:10px;margin:18px 0 24px;padding:0;list-style:none}.saas-plan-grid li{display:flex;align-items:center;gap:8px;color:#5f5b6b;font-size:13px}.saas-plan-grid li svg{width:15px;color:#24a36d}.plan-limits{display:flex;flex-wrap:wrap;gap:6px}.plan-limits span{padding:5px 7px;border-radius:8px;background:#f5f3fa;font-size:10px}.saas-plan-grid.compact{grid-template-columns:repeat(3,1fr)}
.saas-cta{padding:52px 0;color:#fff;background:linear-gradient(135deg,#5031c4,#8159e8)}.saas-cta .container{display:flex;align-items:center;justify-content:space-between;gap:25px}.saas-cta h2{margin:0 0 7px;font-size:34px}.saas-cta p{margin:0;color:rgba(255,255,255,.75)}.saas-cta .btn{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto}
.saas-footer{padding:50px 0 24px;color:#bdb9cc;background:#17132d}.saas-footer>.container{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:35px}.saas-footer p{max-width:320px;margin-top:14px}.saas-footer strong,.saas-footer a{display:block}.saas-footer>div>div>strong{margin-bottom:12px;color:#fff}.saas-footer a:not(.saas-brand){margin:8px 0;color:#bdb9cc;text-decoration:none}.saas-footer>small{display:block;margin-top:35px;text-align:center}
.saas-page-hero{padding:82px 0 66px;text-align:center;background:linear-gradient(180deg,#f8f5ff,#fff)}.saas-page-hero h1{margin:10px auto;font-size:48px;font-weight:900;letter-spacing:-.04em}.saas-page-hero p{color:var(--saas-muted)}.saas-page-hero.compact{padding-bottom:40px}.saas-feature-detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.saas-feature-detail-grid article{display:grid;grid-template-columns:50px 1fr;gap:15px;padding:22px;border:1px solid var(--saas-line);border-radius:17px}.saas-feature-detail-grid h3{margin:0 0 6px}.legal-card{max-width:850px;margin:auto;padding:35px;border:1px solid var(--saas-line);border-radius:20px;line-height:1.8}.legal-card h2,.legal-card h3{margin-top:24px}

.saas-auth-page{min-height:100vh;margin:0;background:#f7f5fb}.auth-back{position:fixed;z-index:10;top:20px;left:24px;display:flex;align-items:center;gap:7px;color:#fff;text-decoration:none;font-size:12px}.auth-back svg{width:15px}.auth-shell{display:grid;grid-template-columns:minmax(340px,.82fr) minmax(520px,1.18fr);min-height:100vh}.auth-showcase{display:flex;justify-content:space-between;flex-direction:column;padding:44px;color:#fff;background:radial-gradient(circle at 70% 25%,rgba(255,255,255,.15),transparent 20rem),linear-gradient(150deg,#3d269f,#7952e6)}.auth-showcase h1{max-width:530px;margin:20px 0 14px;font-size:48px;line-height:1.05;letter-spacing:-.045em}.auth-showcase p{max-width:500px;color:rgba(255,255,255,.76);font-size:16px;line-height:1.7}.saas-badge.dark{color:#fff;background:rgba(255,255,255,.14)}.auth-proof{display:grid;gap:11px;margin-top:28px}.auth-proof span{display:flex;align-items:center;gap:8px;font-size:13px}.auth-proof svg{width:17px}
.auth-form-panel{display:grid;place-items:center;padding:55px 28px;overflow:auto}.auth-card{width:min(100%,470px);padding:32px;border:1px solid var(--saas-line);border-radius:22px;background:#fff;box-shadow:0 24px 60px rgba(39,28,88,.1)}.auth-card.wide{width:min(100%,760px)}.auth-heading>span{color:var(--saas-purple);font-size:10px;font-weight:900;letter-spacing:.08em}.auth-heading h2{margin:8px 0;font-size:30px;font-weight:900;letter-spacing:-.03em}.auth-heading p{color:var(--saas-muted)}.auth-card .form-control,.auth-card .form-select{min-height:48px}.input-icon{position:relative}.input-icon>svg{position:absolute;z-index:2;top:15px;left:14px;width:18px;color:#9692a2}.input-icon .form-control{padding-left:42px}.input-icon>button{position:absolute;top:10px;right:9px;border:0;background:none}.input-icon>button svg{width:17px}.auth-switch,.auth-help{margin:20px 0 0;text-align:center;color:var(--saas-muted);font-size:13px}.auth-icon{display:grid;place-items:center;width:58px;height:58px;margin:0 auto 16px;border-radius:18px;color:#6847e6;background:#eee9ff}.auth-icon svg{width:25px}.auth-plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.auth-plan-grid input,.otp-channel input{position:absolute;opacity:0}.auth-plan-grid span{display:block;padding:12px;border:1px solid var(--saas-line);border-radius:12px;cursor:pointer}.auth-plan-grid strong,.auth-plan-grid small{display:block}.auth-plan-grid small{margin-top:4px;color:var(--saas-muted);font-size:9px}.auth-plan-grid input:checked+span{border-color:#6847e6;background:#f2eeff}.otp-channel{display:flex;gap:8px}.otp-channel span{display:flex;align-items:center;gap:7px;padding:10px 14px;border:1px solid var(--saas-line);border-radius:11px;cursor:pointer}.otp-channel svg{width:16px}.otp-channel input:checked+span{color:#6847e6;border-color:#6847e6;background:#f2eeff}.otp-inputs{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.otp-inputs input{width:100%;height:58px;border:1px solid var(--saas-line);border-radius:12px;text-align:center;font-size:24px;font-weight:900}.otp-inputs input:focus{outline:2px solid #8362e8}.otp-single{letter-spacing:.5em;font-size:24px;font-weight:900}

.onboarding-page{display:grid;gap:16px}.onboarding-hero{padding:25px;border-radius:20px;color:#fff;background:linear-gradient(135deg,#4b31bd,#865de9)}.onboarding-hero>span{font-size:10px;font-weight:900;letter-spacing:.08em}.onboarding-hero h2{margin:8px 0}.onboarding-hero p{margin:0;color:rgba(255,255,255,.75)}.onboarding-grid{display:grid;grid-template-columns:300px 1fr;gap:16px}.onboarding-steps{display:grid;align-content:start;gap:8px}.onboarding-steps article{display:grid;grid-template-columns:36px 1fr;gap:9px;align-items:center;padding:12px;border:1px solid var(--cw-border);border-radius:12px;background:#fff}.onboarding-steps b{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;color:#7552e5;background:#eee9ff}.onboarding-steps b svg{width:17px}.onboarding-steps article.done b{color:#178e5c;background:#e6f8ef}.onboarding-actions{display:flex;flex-wrap:wrap;gap:8px}.subscription-current{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:16px;padding:24px;border-radius:20px;color:#fff;background:linear-gradient(135deg,#4a30ba,#8259e8)}.subscription-current>div>span{font-size:10px;font-weight:900}.subscription-current h2{margin:7px 0}.subscription-current p{margin:0;color:rgba(255,255,255,.75)}

@media(max-width:991.98px){.saas-hero-grid{grid-template-columns:1fr}.saas-dashboard-preview{max-width:720px}.saas-feature-grid{grid-template-columns:repeat(2,1fr)}.auth-shell{grid-template-columns:1fr}.auth-showcase{display:none}.auth-back{position:absolute;color:#5f5b6b}.saas-plan-grid,.saas-plan-grid.compact{grid-template-columns:1fr}.onboarding-grid{grid-template-columns:1fr}}
@media(max-width:767.98px){.saas-nav-links{position:absolute;top:72px;right:12px;left:12px;display:none;align-items:stretch;flex-direction:column;gap:4px;padding:14px;border:1px solid var(--saas-line);border-radius:14px;background:#fff;box-shadow:0 18px 40px rgba(20,15,50,.13)}.saas-nav-links.show{display:flex}.saas-nav-links>a{padding:10px}.saas-menu-toggle{display:block}.saas-hero{padding-top:55px}.saas-hero h1{font-size:44px}.saas-hero-actions,.saas-cta .container{align-items:stretch;flex-direction:column}.saas-logo-strip .container{flex-wrap:wrap;gap:15px}.saas-feature-grid,.saas-feature-detail-grid{grid-template-columns:1fr}.saas-footer>.container{grid-template-columns:1fr 1fr}.saas-section{padding:65px 0}.saas-section-heading h2{font-size:32px}.auth-form-panel{padding:70px 14px 24px}.auth-card{padding:22px}.auth-plan-grid{grid-template-columns:1fr}.preview-body{min-height:340px}.subscription-current{align-items:flex-start;flex-direction:column}}
@media(max-width:480px){.saas-footer>.container{grid-template-columns:1fr}.otp-inputs{gap:4px}.otp-inputs input{height:50px;font-size:20px}}


/* ===== SaaS Auth Layout Fix ===== */
.saas-auth-page{
    min-height:100dvh;
    overflow-x:hidden;
}

.auth-shell{
    min-height:100dvh;
    height:auto;
    grid-template-columns:minmax(420px,42%) minmax(0,58%);
}

.auth-showcase{
    position:sticky;
    top:0;
    min-height:100dvh;
    height:100dvh;
    overflow:hidden;
    padding:30px 42px;
}

.auth-showcase::before,
.auth-showcase::after{
    content:"";
    position:absolute;
    border-radius:50%;
    pointer-events:none;
}

.auth-showcase::before{
    width:420px;
    height:420px;
    top:-180px;
    right:-130px;
    background:rgba(255,255,255,.08);
}

.auth-showcase::after{
    width:300px;
    height:300px;
    bottom:-150px;
    left:-100px;
    background:rgba(255,255,255,.06);
}

.auth-showcase-top,
.auth-showcase-content,
.auth-showcase-preview{
    position:relative;
    z-index:2;
}

.auth-showcase-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
}

.auth-showcase-chip{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:7px 10px;
    border:1px solid rgba(255,255,255,.15);
    border-radius:999px;
    color:rgba(255,255,255,.78);
    background:rgba(255,255,255,.08);
    font-size:10px;
    font-weight:800;
}

.auth-showcase-chip svg{
    width:14px;
    height:14px;
}

.auth-showcase-content{
    margin:auto 0;
    padding:25px 0;
}

.auth-showcase h1{
    max-width:560px;
    margin:18px 0 14px;
    font-size:clamp(38px,4vw,58px);
}

.auth-showcase-preview{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.auth-preview-card{
    display:grid;
    grid-template-columns:42px minmax(0,1fr);
    gap:10px;
    align-items:center;
    padding:12px;
    border:1px solid rgba(255,255,255,.14);
    border-radius:14px;
    background:rgba(255,255,255,.09);
    backdrop-filter:blur(12px);
}

.auth-preview-card>span{
    display:grid;
    place-items:center;
    width:40px;
    height:40px;
    border-radius:12px;
    color:#fff;
    background:rgba(255,255,255,.13);
}

.auth-preview-card svg{
    width:18px;
    height:18px;
}

.auth-preview-card small,
.auth-preview-card strong{
    display:block;
}

.auth-preview-card small{
    color:rgba(255,255,255,.62);
    font-size:9px;
}

.auth-preview-card strong{
    margin-top:3px;
    color:#fff;
    font-size:12px;
}

.auth-form-panel{
    min-width:0;
    min-height:100dvh;
    overflow:visible;
    padding:42px 28px;
}

.auth-login-card{
    animation:authCardIn .55s ease both;
}

.auth-login-options{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    margin:16px 0;
}

.auth-secure-note{
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:#7d798d;
    font-size:11px;
}

.auth-secure-note svg{
    width:14px;
    height:14px;
    color:#24a36d;
}

.auth-forgot-link{
    color:var(--saas-purple);
    font-size:12px;
    font-weight:700;
    text-decoration:none;
}

.password-field .form-control{
    padding-right:48px;
}

.password-toggle{
    display:grid;
    place-items:center;
    width:34px;
    height:34px;
    border-radius:9px;
    color:#777384;
}

.password-toggle:hover{
    color:var(--saas-purple);
    background:#f1edff;
}

.auth-card .form-control.is-valid{
    border-color:#2fa36e;
    background-image:none;
    box-shadow:0 0 0 .2rem rgba(47,163,110,.10);
}

.auth-card .form-control.is-invalid{
    border-color:#dc4b62;
    background-image:none;
    box-shadow:0 0 0 .2rem rgba(220,75,98,.09);
}

.form-field:has(.form-control.is-invalid) .invalid-feedback{
    display:block;
}

.auth-inline-alert{
    display:grid;
    grid-template-columns:34px minmax(0,1fr);
    gap:10px;
    align-items:center;
    margin:14px 0;
    padding:11px 12px;
    border:1px solid #f0d37a;
    border-radius:12px;
    color:#785900;
    background:#fff8dd;
}

.auth-inline-alert>svg{
    width:20px;
}

.auth-inline-alert strong,
.auth-inline-alert span{
    display:block;
}

.auth-inline-alert span{
    margin-top:2px;
    font-size:11px;
}

.auth-divider{
    display:flex;
    align-items:center;
    gap:10px;
    margin:18px 0;
    color:#aaa6b5;
    font-size:10px;
}

.auth-divider::before,
.auth-divider::after{
    content:"";
    flex:1;
    height:1px;
    background:var(--saas-line);
}

@keyframes authCardIn{
    from{
        opacity:0;
        transform:translateY(16px) scale(.985);
    }
    to{
        opacity:1;
        transform:none;
    }
}

/* ===== Landing Page Interaction ===== */
.saas-hero{
    position:relative;
    isolation:isolate;
}

.saas-hero>.container{
    position:relative;
    z-index:2;
}

.saas-orb,
.saas-dot-field{
    position:absolute;
    z-index:0;
    pointer-events:none;
}

.saas-orb{
    border-radius:50%;
    filter:blur(4px);
    animation:floatOrb 8s ease-in-out infinite;
}

.saas-orb-one{
    width:300px;
    height:300px;
    top:70px;
    right:7%;
    background:rgba(126,89,232,.12);
}

.saas-orb-two{
    width:180px;
    height:180px;
    bottom:30px;
    left:3%;
    background:rgba(88,199,171,.10);
    animation-delay:-3s;
}

.saas-dot-field{
    width:180px;
    height:180px;
    top:115px;
    left:4%;
    opacity:.22;
    background-image:radial-gradient(#7857df 1.3px,transparent 1.3px);
    background-size:16px 16px;
    mask-image:linear-gradient(to bottom right,#000,transparent);
}

.saas-dashboard-preview{
    --rotate-x:0deg;
    --rotate-y:0deg;
    --move-x:0px;
    --move-y:0px;
    transform:
        perspective(1100px)
        translate(var(--move-x),var(--move-y))
        rotateX(var(--rotate-x))
        rotateY(var(--rotate-y))
        rotate(1deg);
    transform-style:preserve-3d;
    transition:transform .18s ease,box-shadow .3s ease;
}

.saas-dashboard-preview:hover{
    box-shadow:0 40px 95px rgba(57,38,124,.25);
}

.preview-chart div{
    transform-origin:bottom;
    animation:chartGrow 1s cubic-bezier(.2,.8,.2,1) both;
}

.preview-chart div:nth-child(2){animation-delay:.08s}
.preview-chart div:nth-child(3){animation-delay:.16s}
.preview-chart div:nth-child(4){animation-delay:.24s}
.preview-chart div:nth-child(5){animation-delay:.32s}
.preview-chart div:nth-child(6){animation-delay:.40s}
.preview-chart div:nth-child(7){animation-delay:.48s}

[data-animate],
[data-stagger]>*{
    opacity:0;
    transform:translateY(25px);
    transition:
        opacity .7s ease,
        transform .7s cubic-bezier(.2,.8,.2,1);
}

[data-animate="fade-left"]{
    transform:translateX(35px);
}

[data-animate].is-visible,
[data-stagger]>.is-visible{
    opacity:1;
    transform:none;
}

.saas-feature-grid article{
    position:relative;
    overflow:hidden;
}

.saas-feature-grid article::after{
    content:"";
    position:absolute;
    width:90px;
    height:90px;
    right:-45px;
    bottom:-45px;
    border-radius:50%;
    background:rgba(104,71,230,.06);
    transition:transform .3s ease;
}

.saas-feature-grid article:hover::after{
    transform:scale(1.8);
}

.saas-feature-grid article>span{
    transition:transform .3s ease;
}

.saas-feature-grid article:hover>span{
    transform:rotate(-6deg) scale(1.08);
}

.saas-nav-links>a:not(.btn){
    position:relative;
}

.saas-nav-links>a:not(.btn)::after{
    content:"";
    position:absolute;
    right:0;
    bottom:-7px;
    left:0;
    height:2px;
    border-radius:999px;
    background:var(--saas-purple);
    transform:scaleX(0);
    transition:transform .2s ease;
}

.saas-nav-links>a:not(.btn):hover::after{
    transform:scaleX(1);
}

@keyframes floatOrb{
    0%,100%{transform:translate3d(0,0,0)}
    50%{transform:translate3d(0,-22px,0)}
}

@keyframes chartGrow{
    from{transform:scaleY(0)}
    to{transform:scaleY(1)}
}

@media(max-width:991.98px){
    .auth-shell{
        display:block;
        min-height:100dvh;
    }

    .auth-showcase{
        display:none;
    }

    .auth-form-panel{
        min-height:100dvh;
        padding:76px 18px 28px;
    }

    .auth-back{
        color:#5f5b6b;
    }
}

@media(max-width:575.98px){
    .auth-form-panel{
        display:block;
        padding-inline:12px;
    }

    .auth-card{
        width:100%;
        padding:22px 18px;
        border-radius:18px;
    }

    .auth-login-options{
        align-items:flex-start;
        flex-direction:column;
        gap:8px;
    }

    .saas-orb-one{
        width:190px;
        height:190px;
    }
}

@media(prefers-reduced-motion:reduce){
    *,
    *::before,
    *::after{
        scroll-behavior:auto!important;
        animation-duration:.01ms!important;
        animation-iteration-count:1!important;
        transition-duration:.01ms!important;
    }
}

.otp-delivery-help{
    display:grid;
    grid-template-columns:20px minmax(0,1fr);
    gap:8px;
    align-items:start;
    margin-top:14px;
    padding:10px 11px;
    border-radius:11px;
    color:#665f76;
    background:#f5f3fa;
    font-size:11px;
    line-height:1.5;
}
.otp-delivery-help svg{
    width:17px;
    height:17px;
    color:var(--saas-purple);
}


/* ===== Clean Animated Auth 2026 ===== */
.saas-auth-page{
    background:
        radial-gradient(circle at 85% 15%,rgba(111,83,225,.08),transparent 28rem),
        #f7f7fb;
}

.auth-showcase{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    background:
        radial-gradient(circle at 84% 18%,rgba(255,255,255,.15),transparent 17rem),
        linear-gradient(145deg,#4328aa 0%,#6844d7 55%,#7650e8 100%);
}

.auth-showcase::before{
    content:"";
    position:absolute;
    inset:auto -90px -110px auto;
    z-index:-1;
    width:320px;
    height:320px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:50%;
    animation:authRingFloat 9s ease-in-out infinite;
}

.auth-showcase-top,
.auth-showcase-content,
.auth-showcase-preview{
    position:relative;
    z-index:2;
}

.auth-showcase-chip{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 13px;
}

.auth-live-dot{
    width:7px;
    height:7px;
    border-radius:50%;
    background:#8ff0ba;
    box-shadow:0 0 0 0 rgba(143,240,186,.48);
    animation:authLivePulse 1.8s ease-out infinite;
}

.auth-showcase-content{
    max-width:560px;
}

.auth-showcase h1{
    max-width:540px;
    margin:18px 0 12px;
    font-size:clamp(42px,5vw,64px);
    line-height:.98;
    letter-spacing:-.055em;
}

.auth-showcase-content>p{
    max-width:420px;
    margin:0;
    font-size:16px;
    line-height:1.65;
}

.auth-mini-flow{
    display:flex;
    align-items:center;
    width:max-content;
    max-width:100%;
    gap:10px;
    margin-top:34px;
    padding:10px 12px;
    border:1px solid rgba(255,255,255,.14);
    border-radius:18px;
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(14px);
    animation:authFlowIn .7s .18s cubic-bezier(.2,.8,.2,1) both;
}

.auth-mini-flow>span{
    position:relative;
    width:34px;
    height:1px;
    overflow:hidden;
    background:rgba(255,255,255,.24);
}

.auth-mini-flow>span::after{
    content:"";
    position:absolute;
    top:0;
    left:-14px;
    width:14px;
    height:1px;
    background:#fff;
    animation:authFlowLine 2.4s linear infinite;
}

.auth-mini-device,
.auth-mini-check,
.auth-mini-message{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:42px;
    border-radius:13px;
    color:#fff;
    background:rgba(255,255,255,.12);
}

.auth-mini-device,
.auth-mini-check{
    width:42px;
}

.auth-mini-message{
    gap:8px;
    padding:0 14px;
    font-size:12px;
}

.auth-mini-message b{
    white-space:nowrap;
}

.auth-mini-flow svg{
    width:17px;
    height:17px;
}

.auth-mini-check{
    color:#4b2cb3;
    background:#a9f2c7;
    animation:authCheckPop 2.4s ease-in-out infinite;
}

.auth-orb{
    position:absolute;
    z-index:0;
    border-radius:50%;
    pointer-events:none;
    filter:blur(.2px);
}

.auth-orb-one{
    top:16%;
    right:-80px;
    width:250px;
    height:250px;
    background:rgba(255,255,255,.08);
    animation:authOrbOne 9s ease-in-out infinite;
}

.auth-orb-two{
    bottom:-90px;
    left:-80px;
    width:220px;
    height:220px;
    background:rgba(90,45,190,.35);
    animation:authOrbTwo 11s ease-in-out infinite;
}

.auth-orb-three{
    top:42%;
    left:53%;
    width:18px;
    height:18px;
    background:rgba(255,255,255,.28);
    box-shadow:
        58px 32px 0 rgba(255,255,255,.12),
        -42px 64px 0 rgba(255,255,255,.14),
        92px -58px 0 rgba(255,255,255,.1);
    animation:authDotsFloat 7s ease-in-out infinite;
}

.auth-showcase-content .saas-badge{
    animation:authBadgeIn .55s ease both;
}

.auth-showcase-content h1{
    animation:authHeadlineIn .65s .08s cubic-bezier(.2,.8,.2,1) both;
}

.auth-showcase-content>p{
    animation:authHeadlineIn .65s .15s cubic-bezier(.2,.8,.2,1) both;
}

.auth-showcase-preview{
    animation:authPreviewIn .7s .28s cubic-bezier(.2,.8,.2,1) both;
}

.auth-preview-card{
    transition:
        transform .25s ease,
        background .25s ease,
        border-color .25s ease;
}

.auth-preview-card:hover{
    transform:translateY(-4px);
    border-color:rgba(255,255,255,.27);
    background:rgba(255,255,255,.13);
}

.auth-preview-card:first-child{
    animation:authCardFloat 5s ease-in-out infinite;
}

.auth-preview-card:last-child{
    animation:authCardFloat 5s -2.5s ease-in-out infinite;
}

.auth-form-panel{
    background:
        radial-gradient(circle at 50% 0,rgba(108,73,222,.07),transparent 24rem),
        #f8f8fc;
}

.auth-login-card{
    border-color:rgba(104,71,230,.1);
    box-shadow:
        0 28px 80px rgba(43,30,94,.11),
        0 2px 8px rgba(43,30,94,.04);
}

.auth-login-card::before{
    content:"";
    display:block;
    width:38px;
    height:4px;
    margin:0 0 22px;
    border-radius:999px;
    background:linear-gradient(90deg,#5f3bd2,#8c6bf0);
}

.auth-login-card .btn-primary{
    position:relative;
    overflow:hidden;
}

.auth-login-card .btn-primary::after{
    content:"";
    position:absolute;
    inset:0;
    transform:translateX(-120%);
    background:linear-gradient(
        110deg,
        transparent 25%,
        rgba(255,255,255,.22) 50%,
        transparent 75%
    );
    animation:authButtonShine 4.4s ease-in-out infinite;
}

.auth-switch-compact{
    margin-top:18px;
}

.auth-heading p{
    margin-bottom:24px;
}

@keyframes authLivePulse{
    70%{box-shadow:0 0 0 9px rgba(143,240,186,0)}
    100%{box-shadow:0 0 0 0 rgba(143,240,186,0)}
}

@keyframes authFlowLine{
    to{left:100%}
}

@keyframes authCheckPop{
    0%,75%,100%{transform:scale(1)}
    82%{transform:scale(1.12)}
    88%{transform:scale(.96)}
}

@keyframes authOrbOne{
    0%,100%{transform:translate3d(0,0,0) scale(1)}
    50%{transform:translate3d(-30px,24px,0) scale(1.08)}
}

@keyframes authOrbTwo{
    0%,100%{transform:translate3d(0,0,0)}
    50%{transform:translate3d(32px,-22px,0)}
}

@keyframes authDotsFloat{
    0%,100%{transform:translateY(0) rotate(0)}
    50%{transform:translateY(-18px) rotate(10deg)}
}

@keyframes authBadgeIn{
    from{opacity:0;transform:translateY(10px)}
    to{opacity:1;transform:none}
}

@keyframes authHeadlineIn{
    from{opacity:0;transform:translateY(24px)}
    to{opacity:1;transform:none}
}

@keyframes authFlowIn{
    from{opacity:0;transform:translateY(18px) scale(.97)}
    to{opacity:1;transform:none}
}

@keyframes authPreviewIn{
    from{opacity:0;transform:translateY(20px)}
    to{opacity:1;transform:none}
}

@keyframes authCardFloat{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-5px)}
}

@keyframes authRingFloat{
    0%,100%{transform:translate3d(0,0,0)}
    50%{transform:translate3d(-18px,-14px,0)}
}

@keyframes authButtonShine{
    0%,62%{transform:translateX(-120%)}
    82%,100%{transform:translateX(120%)}
}

@media(max-width:991.98px){
    .auth-showcase{
        display:none;
    }

    .auth-login-card{
        animation:authCardIn .55s ease both;
    }
}

@media(prefers-reduced-motion:reduce){
    .auth-showcase *,
    .auth-login-card,
    .auth-login-card::after{
        animation:none!important;
        transition:none!important;
    }
}


/* ===== Register Scroll + Back Position Fix ===== */
.saas-auth-page{
    overflow:hidden;
}

.auth-shell{
    height:100vh;
    min-height:100vh;
}

.auth-showcase{
    min-height:100vh;
}

.auth-showcase-top{
    margin-top:18px;
}

.auth-back{
    top:34px;
    left:22px;
    padding:7px 10px;
    border-radius:999px;
    background:rgba(31,21,77,.12);
    backdrop-filter:blur(10px);
}

.auth-form-panel{
    align-items:stretch;
    justify-content:center;
    overflow:hidden;
    padding:24px 24px;
}

.auth-card-register{
    display:flex;
    flex-direction:column;
    max-height:calc(100vh - 48px);
}

.auth-card-register .auth-heading{
    flex:0 0 auto;
    margin-bottom:14px;
}

.auth-card-body-scroll{
    flex:1 1 auto;
    overflow:auto;
    padding-right:6px;
    margin-right:-6px;
}

.auth-card-body-scroll::-webkit-scrollbar{
    width:8px;
}

.auth-card-body-scroll::-webkit-scrollbar-thumb{
    background:rgba(104,71,230,.2);
    border-radius:999px;
}

.auth-card-body-scroll::-webkit-scrollbar-track{
    background:transparent;
}

.auth-card-register .auth-switch{
    padding-bottom:4px;
}

@media (max-width: 991.98px){
    .saas-auth-page{
        overflow:auto;
    }

    .auth-shell{
        height:auto;
        min-height:100vh;
    }

    .auth-form-panel{
        overflow:auto;
        padding:18px 16px 28px;
    }

    .auth-card-register{
        max-height:none;
    }

    .auth-card-body-scroll{
        overflow:visible;
        padding-right:0;
        margin-right:0;
    }

    .auth-back{
        top:14px;
        left:14px;
    }
}


/* ===== Corrected Auth Form Sizing & Register Scroll ===== */
@media (min-width: 992px){
    .saas-auth-page{
        height:100vh;
        overflow:hidden;
    }

    .auth-shell{
        height:100vh;
        min-height:100vh;
        grid-template-columns:minmax(460px,43%) minmax(620px,57%);
    }

    .auth-showcase{
        position:relative;
        height:100vh;
        min-height:100vh;
        padding:34px 38px 28px;
    }

    .auth-showcase-top{
        margin-top:24px;
    }

    .auth-back{
        top:18px;
        left:18px;
        z-index:30;
    }

    .auth-form-panel{
        display:flex;
        align-items:center;
        justify-content:center;
        min-height:100vh;
        height:100vh;
        overflow:hidden;
        padding:20px 28px;
    }

    .auth-login-card{
        width:min(100%,560px);
        padding:38px 40px;
        border-radius:24px;
    }

    .auth-card-register{
        width:min(100%,860px);
        height:calc(100vh - 40px);
        max-height:calc(100vh - 40px);
        padding:28px 30px 22px;
        overflow:hidden;
    }

    .auth-card-register .auth-heading{
        flex:0 0 auto;
        margin:0 0 18px;
        padding-right:12px;
    }

    .auth-card-body-scroll{
        position:relative;
        flex:1 1 auto;
        min-height:0;
        overflow-y:auto;
        overflow-x:hidden;
        margin:0;
        padding:0 12px 8px 0;
        overscroll-behavior:contain;
        scrollbar-gutter:stable;
    }

    .auth-register-scroll-inner{
        min-height:max-content;
        padding-bottom:4px;
    }

    .auth-card-body-scroll::-webkit-scrollbar{
        width:7px;
    }

    .auth-card-body-scroll::-webkit-scrollbar-track{
        background:transparent;
    }

    .auth-card-body-scroll::-webkit-scrollbar-thumb{
        border-radius:999px;
        background:rgba(104,71,230,.22);
    }

    .auth-card-body-scroll::-webkit-scrollbar-thumb:hover{
        background:rgba(104,71,230,.38);
    }

    .auth-card-register::after{
        content:"";
        position:absolute;
        right:30px;
        bottom:22px;
        left:30px;
        height:18px;
        pointer-events:none;
        background:linear-gradient(to bottom,rgba(255,255,255,0),#fff 75%);
        opacity:.72;
    }
}

@media (min-width: 1200px){
    .auth-login-card{
        width:min(100%,590px);
    }

    .auth-card-register{
        width:min(100%,900px);
    }
}

@media (max-width: 991.98px){
    .auth-form-panel{
        display:flex;
        align-items:flex-start;
        justify-content:center;
        min-height:100vh;
        height:auto;
        overflow:visible;
        padding:72px 16px 28px;
    }

    .auth-login-card,
    .auth-card-register{
        width:min(100%,680px);
        height:auto;
        max-height:none;
    }

    .auth-card-body-scroll{
        overflow:visible;
        padding:0;
        margin:0;
    }
}