/*=========================================
CYFUTURE AI LOGIN — ailogin.css
Matches the provided PHP/HTML structure exactly
Bootstrap 5 Compatible
==========================================*/

/*=========================================
RESET (scoped to .loginpage-section)
==========================================*/
.loginpage-section,
.loginpage-section *,
.loginpage-section *::before,
.loginpage-section *::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
input:focus,
select:focus,
textarea:focus {
    outline: none;
    box-shadow: none;
}
input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.form-select:focus {
    outline: none !important;
    box-shadow: none !important;
    border-color: inherit !important; /* ya apna color, jaise #ccc */
}
body{
    font-family:'Inter',sans-serif;
    background:#ffffff;
    color:#1d1d1f;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

.loginpage-section img{ max-width:100%; height:auto; display:block; }
.loginpage-section a{ text-decoration:none; transition:.35s ease; }
.loginpage-section a:hover{ text-decoration:none; }
.loginpage-section ::selection{ background:#5b34b5; color:#fff; }

/*=========================================
BOOTSTRAP GRID FIX
==========================================*/
.loginpage-section .container-fluid{ width:100%; padding:0; }
.loginpage-section .row{ margin-left:0; margin-right:0; }
.loginpage-section .col-lg-7,
.loginpage-section .col-lg-5{ padding-left:0; padding-right:0; }
.loginpage-section .container{ max-width:1320px; }

/*=========================================
SECTION
==========================================*/
.loginpage-section{
    position:relative;
    width:100%;
    min-height:100vh;
    overflow:hidden;
    background:#ffffff;
}

/*=========================================
LEFT PANEL — .cf-sso__hero
==========================================*/
.loginpage-section .cf-sso__hero{
position:relative;
    overflow:hidden;
}
.loginpage-section .cf-sso__hero::after{
    content: "";
    position: absolute;

    left: -8%;
    bottom: -170px;   /* image ko neeche push karo */

    width: 118%;
    height: 620px;

    background: url("https://cyfuture.cloud/frontImg/images/wave-bg.jpg") no-repeat;
    background-size: cover;
    background-position: center bottom;

    pointer-events: none;
    z-index: 0;
}
.loginpage-section .cf-sso__hero > *{
    position:relative;
    z-index:2;
}
.loginpage-section .cf-sso__hero{
    position:relative;
    overflow:hidden;
    background:#f8f6ff;
}

.loginpage-section .cf-sso__hero{
      position:relative;
      overflow:hidden;
      background:#f8f6ff;
      min-height:100vh;
  }

  .loginpage-section .cf-sso__hero:before{
      content:"";
      position:absolute;
      top:-220px;
      left:-180px;
      width:520px;
      height:520px;
      border-radius:50%;
      background:rgba(111,63,211,.08);
      filter:blur(90px);
      pointer-events:none;
  }
  .loginpage-section .cf-sso__hero:after{
      content:"";
      position:absolute;
      right:-160px;
      bottom:-140px;
      width:430px;
      height:430px;
      border-radius:50%;
      background:rgba(168,112,255,.10);
      filter:blur(90px);
      pointer-events:none;
  }

  .loginpage-section .cf-sso__hero > *{
      position:relative;
      z-index:2;
      height: 100%;
  }

  /* ===== ANIMATED SVG WAVE WRAPPER ===== */
  .hero-wave{
      position: absolute;
         left: -35%;
    bottom: -150px;
    width: 180%;
      z-index: 0;
      pointer-events: none;
      line-height: 0;
      overflow: hidden;
      animation: waveFloat 8s ease-in-out infinite;
  }

  .hero-wave svg{
      display: block;
      width: 100%;
      height: auto;
  }

  @keyframes waveFloat{
      0%{   transform: translateY(0); }
      50%{  transform: translateY(10px); }
      100%{ transform: translateY(0); }
  }

  /* ===== PER-LAYER ANIMATION ===== */
  /* transform-box/transform-origin zaroori hain kyunki yeh <g> SVG group hai, div nahi */
  .wave-layer{
      transform-box: fill-box;
      transform-origin: center;
  }

  /* Layer 1 - sabse peeche wala band, sabse dheere aur sabse kam travel */
  .wave-layer-1{
      animation: layerDrift1 18s ease-in-out infinite;
      will-change: transform, filter;
  }
  /* Layer 2 */
  .wave-layer-2{
      animation: layerDrift2 13s ease-in-out infinite;
      will-change: transform, filter;
  }
  /* Layer 3 */
  .wave-layer-3{
      animation: layerDrift3 10s ease-in-out infinite;
      will-change: transform, filter;
  }
  /* Layer 4 - sabse aage wala band, sabse tez aur sabse zyada travel */
  .wave-layer-4{
      animation: layerDrift4 8s ease-in-out infinite;
      will-change: transform, filter;
  }

  /* Har layer: right se shuru -> left tak jaye -> wapas right -> loop.
     Saath mein hue-rotate se color tone bhi halka shift hota hai. */
  @keyframes layerDrift1{
      0%{   transform: translateX(45px);  filter: hue-rotate(0deg); }
      50%{  transform: translateX(-45px); filter: hue-rotate(20deg); }
      100%{ transform: translateX(45px);  filter: hue-rotate(0deg); }
  }
  @keyframes layerDrift2{
      0%{   transform: translateX(60px);  filter: hue-rotate(0deg); }
      50%{  transform: translateX(-60px); filter: hue-rotate(-25deg); }
      100%{ transform: translateX(60px);  filter: hue-rotate(0deg); }
  }
  @keyframes layerDrift3{
      0%{   transform: translateX(-50px); filter: hue-rotate(0deg); }
      50%{  transform: translateX(50px);  filter: hue-rotate(30deg); }
      100%{ transform: translateX(-50px); filter: hue-rotate(0deg); }
  }
  @keyframes layerDrift4{
      0%{   transform: translateX(-70px); filter: hue-rotate(0deg); }
      50%{  transform: translateX(70px);  filter: hue-rotate(-35deg); }
      100%{ transform: translateX(-70px); filter: hue-rotate(0deg); }
  }
   /* Demo content on top, just so the wave has context - remove/replace as needed */
  .loginpage{
      position:relative;
      z-index:5;
      width:100%;
      padding:40px 75px 40px;
      box-sizing:border-box;
      animation: leftFade .8s ease forwards;
  }
  @keyframes leftFade{
      from{ opacity:0; transform:translateY(10px); }
      to{ opacity:1; transform:translateY(0); }
  }
/*=========================================
LOGO
==========================================*/
.logo{
    display:flex;
    align-items:center;
    gap:20px;
    margin-bottom:20px;
    animation: fadeTop .8s ease forwards;
}
 .logo-box{
    display:flex;
    align-items:center;
    justify-content:center;
}

 .logo-box img{
    display:block;
    max-width:100%;
    height:44px;
    width:auto;
}

 .logo-divider{
    width:1px;
    height:44px;
    background:#e6ddf4;
    flex-shrink:0;
}

/*=========================================
SSO PILL
==========================================*/
.loginicon2black{    border-radius: 10px;background: #000}
.loginicon2black svg{    fill: #fff;}
 .sso-wrapper{
    display:flex;
    align-items:center;
    width:100%;
    margin-bottom:30px;
}

 .sso-pill{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 10px 0 0;
    height:40px;
    border:none;
    border-radius:50px;
    background:transparent;
    flex-shrink:0;
}

 .sso-pill span{
    font-size:22px;
    font-weight:700;
    color:#512D8D;
    line-height:1;
    white-space:nowrap;
       font-family: "Story Script", sans-serif;
               letter-spacing: 3px;
}
 .sso-wrapper:after{
    content:"";
    flex:1;
    max-width:420px;
    height:1px;
    margin-left:0;
    background:linear-gradient(
        90deg,
        #6E46F5 0%,
        rgba(110,70,245,.65) 35%,
        rgba(110,70,245,.22) 75%,
        rgba(110,70,245,0) 100%
    );
}

/*=========================================
LEFT CONTENT
==========================================*/
 .left-content{ max-width:700px; }
 .left-content h1{
    font-size:38px;
    line-height:1.2;
    font-weight:500;
    color:#262626;
    /* letter-spacing:-1.2px; */
    margin-bottom:10px;
    animation: rightFade .8s ease forwards;
}

 .left-content h1 span{
    display:block;
    color:#522e8b;
    font-weight:700;
  animation: rightFade .8s ease forwards,
               fadeTop .8s ease forwards;
}

.left-content p{
    max-width:640px;
    font-size:22px;
    line-height:24px;
    color:#4b2e83;
    font-weight:400;
    border-bottom:1px solid #e1d4ed;
    padding-bottom:34px;
    margin-bottom:25px;
    animation:fadeTop .8s ease forwards;
}

/*=========================================
FEATURE LIST
==========================================*/
.loginpage .feature-list{
    position:relative;
    width:100%;
    margin-top:2px;
    z-index:2;
    animation:cardFade .9s ease forwards;
}

.loginpage .feature-list .row{
    margin-left:-15px;
    margin-right:-15px;
}

.loginpage .feature-list .col-md-6{
    padding:10px 15px 0 0;
    margin-bottom:0;
}

.loginpage .feature-box{
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:6px 0;
    background:transparent;
    border:none;
    box-shadow:none;
    transition:.35s ease;
}

.loginpage .feature-box:hover{ transform:translateX(8px); }

.loginpage .feature-icon{
    width:44px;
    height:44px;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    flex-shrink:0;
}

.loginpage .feature-icon svg{
    width:26px;
    height:26px;
    display:block;
    overflow:visible;
        fill: #7e57f0;
}

.loginpage .feature-box h4{
    font-size:16px;
    line-height:18px;
    font-weight:700;
    color:#4a3293;
    letter-spacing:-.2px;
    margin-bottom:2px;
}

.loginpage .feature-box p{
    margin:2px 0 0;
    font-size:13px;
    line-height:21px;
    color:#533e92;
    font-weight:500;
}

/*=========================================
ICON HOVER ANIMATIONS
==========================================*/
.shield-fill,.bolt-fill{ transform-origin:center; transform-box:fill-box; transition:all .35s ease; }
.clock-circle,.clock-hand{ transform-origin:32px 32px; transform-box:fill-box; }
.scale-box,.scale-arrow{ transform-origin:center; transform-box:fill-box; }

.feature-box:hover .shield-fill{ animation:shieldPremium .75s cubic-bezier(.22,1,.36,1); }
.feature-box:hover .bolt-fill{ animation:boltFlash .75s cubic-bezier(.22,1,.36,1); }
.feature-box:hover .clock-circle{ animation:clockPop .65s ease; }
.feature-box:hover .clock-hand{ animation:clockTick .9s cubic-bezier(.22,1,.36,1); }
.feature-box:hover .scale-box{ animation:scalePulse .55s ease; }
.feature-box:hover .scale-arrow{ animation:expandArrow .75s cubic-bezier(.22,1,.36,1); }

@keyframes shieldPremium{
    0%{ transform:scale(1) rotate(0deg); filter:drop-shadow(0 0 0 rgba(115,83,255,0)); }
    25%{ transform:scale(1.18) rotate(-6deg); }
    50%{ transform:scale(.96) rotate(3deg); filter:drop-shadow(0 0 10px rgba(115,83,255,.45)); }
    75%{ transform:scale(1.08) rotate(-2deg); }
    100%{ transform:scale(1) rotate(0deg); filter:drop-shadow(0 0 0 rgba(115,83,255,0)); }
}

@keyframes boltFlash{
    0%{ transform:scale(1) rotate(0deg); filter:drop-shadow(0 0 0 rgba(115,83,255,0)); }
    20%{ transform:scale(1.12) rotate(-8deg); }
    40%{ transform:scale(.96) rotate(6deg); filter:drop-shadow(0 0 6px rgba(115,83,255,.45)) drop-shadow(0 0 14px rgba(115,83,255,.25)); }
    70%{ transform:scale(1.08) rotate(-3deg); }
    100%{ transform:scale(1) rotate(0); filter:drop-shadow(0 0 0 rgba(115,83,255,0)); }
}

@keyframes clockTick{
    0%{ transform:rotate(0deg); }
    30%{ transform:rotate(45deg); }
    60%{ transform:rotate(25deg); }
    100%{ transform:rotate(90deg); }
}

@keyframes clockPop{
    0%{ transform:scale(1); }
    50%{ transform:scale(1.12); }
    100%{ transform:scale(1); }
}

@keyframes scalePulse{
    0%{ transform:scale(1); }
    50%{ transform:scale(1.08); }
    100%{ transform:scale(1); }
}

@keyframes expandArrow{
    0%{ transform:translate(0,0) scale(1); }
    45%{ transform:translate(-3px,-3px) scale(1.18); }
    100%{ transform:translate(0,0) scale(1); }
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus{
    -webkit-box-shadow:0 0 0 1000px #fff inset !important;
    -webkit-text-fill-color:#222 !important;
}

/*=========================================
BACKGROUND MESH
==========================================*/
.loginpage-section .loginpage-bg{
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    z-index:1;
    pointer-events:none;
}

.loginpage-section .loginpage-bg img{
    width:100%;
    display:block;
    opacity:.6;
}

/*==========================================================
RIGHT PANEL
==========================================================*/
 /* ===== NEW DECORATIVE ICONS (BIG size, sitting at bottom like the wave, swaying) ===== */
  .hero-icon{
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 480px;
      z-index: 6;                 /* wave (z-index 0-ish) ke upar rahega */
      pointer-events: none;
  }
  .icon-piece{
      position: absolute;
      transform-origin: top center;   /* pendulum-jaisi sway ke liye pivot upar rakha */
  }
  .icon-piece svg{
      display: block;
      width: 100%;
      height: auto;
      filter: drop-shadow(0 10px 20px rgba(111,63,211,.22));
  }

  .icon-piece-1{
          left: 0%;
    bottom: 0px;
    width: 130px;
      animation: iconWave1 6s ease-in-out infinite;
  }
  .icon-piece-2{
     left: 52%;
    bottom: 0px;
    width: 100px;
      animation: iconWave2 8s ease-in-out infinite;
  }
  .icon-piece-3{
         left: 70%;
    bottom: 00px;
    width: 140px;
      animation: iconWave3 7s ease-in-out infinite;
      display: none;
  }

  /* Pendulum-style waving: side-to-side sway + halka up-down, jaisa hawa mein jhoolna */
  @keyframes iconWave1{
      0%{   transform: translateX(0)    translateY(0)   rotate(0deg); }
      25%{  transform: translateX(14px) translateY(-6px) rotate(8deg); }
      50%{  transform: translateX(0)    translateY(0)   rotate(0deg); }
      75%{  transform: translateX(-14px) translateY(6px) rotate(-8deg); }
      100%{ transform: translateX(0)    translateY(0)   rotate(0deg); }
  }
  @keyframes iconWave2{
      0%{   transform: translateX(0)    translateY(0)    rotate(0deg); }
      25%{  transform: translateX(-16px) translateY(8px) rotate(-10deg); }
      50%{  transform: translateX(0)    translateY(0)    rotate(0deg); }
      75%{  transform: translateX(16px)  translateY(-8px) rotate(10deg); }
      100%{ transform: translateX(0)    translateY(0)    rotate(0deg); }
  }
  @keyframes iconWave3{
      0%{   transform: translateX(0)    translateY(0)   rotate(0deg); }
      25%{  transform: translateX(12px) translateY(-5px) rotate(7deg); }
      50%{  transform: translateX(0)    translateY(0)   rotate(0deg); }
      75%{  transform: translateX(-12px) translateY(5px) rotate(-7deg); }
      100%{ transform: translateX(0)    translateY(0)   rotate(0deg); }
  }

.loginpage-section .loginpage-right{
    position:relative;
    display:flex;
    justify-content:center;
    width:42.6666%;
    padding:100px 67px 20px 67px;
    background:#fff;
    overflow:hidden;
        margin:0 auto;
}

.loginpage-section .right{
    position:relative;
    width:100%;
    max-width:100%;
    z-index:2;
    animation:rightFade .8s ease forwards;
}
iframe[id^="cf-chl-widget"] {
    width: 480px !important;
}

/*=========================================
TOP BAR
==========================================*/
.loginpage-section .top-bar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:12px;
    animation:fadeTop .8s ease forwards;
    position: absolute;
    left: 0;
    right: 0;
    top: -65px;
    z-index: 9;
}

.loginpage-section .back-link{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:15px;
    font-weight:600;
    color:#1e0743;
    text-decoration:none;
        margin-top: 7px;
}

.loginpage-section .back-link svg{ width:18px; height:18px; transition:.35s ease; }
.loginpage-section .back-link:hover{ color:#522d8d; }
.loginpage-section .back-link:hover svg{ transform:translateX(-4px); }

/*=========================================
SIGNUP BUTTON
==========================================*/
.loginpage-section .signup{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:10px 12px;
    border:1px solid #c5c5c5;
    border-radius:6px;
    background:#f5f5f5;
    color:#000;
    font-size:14px;
    font-weight:600;
    text-decoration:none;
    transition:.35s ease;
}

.loginpage-section .signup svg{ width:16px; height:16px; }

.loginpage-section .signup:hover{
    background:#e7e7e7;
    color:#000;
    transform:translateY(-1px);
}

/*=========================================
LOGIN CARD
==========================================*/
.loginpage-section .login{
    background:#ffffff;
    position:relative;
    overflow:hidden;
    animation:cardFade .9s ease forwards;
    padding-top: 0px;
}

.loginpage-section .login-header{
    text-align:center;
    margin-bottom:18px;
}

.loginpage-section .login-header h2{
    font-size:28px;
    line-height:1.2;
    font-weight:700;
    color:#280662;
    margin-bottom:4px;
    letter-spacing:-.5px;
}

.loginpage-section .login-header p{
    margin:0;
    font-size:17px;
    color:#1e0743;
    line-height:1.4;
    font-weight:400;
}

.loginpage-section .login-header strong{
    color:#522d8d;
    font-weight:600;
}

/*=========================================
SOCIAL ROW
==========================================*/
.loginpage-section .social-row{
    margin-left:-8px;
    margin-right:-8px;
    margin-bottom:12px;
    margin-top: 12px;
}

.loginpage-section .social-row .col-6{
    padding-left:8px;
    padding-right:8px;
}

/*=========================================
COMMON BUTTON RESET
==========================================*/
.loginpage-section .btn{
    width:100%;
    border-radius:8px;
    display:block;
    padding:0;
    border:none;
    outline:none;
    box-shadow:none;
}

.loginpage-section .btn:focus{ outline:none; box-shadow:none; }

.loginpage-section .logincommondiv{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 48px;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 600;
    transition: .35s ease
}

/*=========================================
GOOGLE / GITHUB BUTTONS
==========================================*/
.loginpage-section .google .logincommondiv,
.loginpage-section .github .logincommondiv{
    background:#ffffff;
    border:1px solid #c5c5c5;
    color:#2b2b2b;
}

.loginpage-section .google:hover .logincommondiv,
.loginpage-section .github:hover .logincommondiv{
    border-color:#c5c5c5;
    transform:translateY(-1px);
        background: #f5f5f5;
}

/*=========================================
SOCIAL ICON
==========================================*/
.loginpage-section .loginicon2{
    display:flex;
    align-items:center;
    justify-content:center;
    width:22px;
    height:22px;
    flex-shrink:0;
}

.loginpage-section .loginicon2 svg,
.loginpage-section .loginicon2 img{
    width:20px;
    height:20px;
    display:block;
}

/*=========================================
OR DIVIDER
==========================================*/
.loginpage-section .divider{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:6px 0;
}

.loginpage-section .divider:before,
.loginpage-section .divider:after{
    content:"";
    flex:1;
    height:1px;
    background:#e4e4e4;
}

.loginpage-section .divider span{
    padding:0 12px;
    background:#ffffff;
    font-size:13px;
    font-weight:600;
    letter-spacing:1px;
    color:#1e0743;
    text-transform:uppercase;
}

/*=========================================
EMAIL LOGIN FORM WRAPPER
==========================================*/
.login-form-height{
    position:relative;
     position:relative;
    max-height:140px;
    height:auto;
    overflow:hidden;
    transition:max-height .5s cubic-bezier(.4,0,.2,1);
}
.login-form-height::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 90px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 45%, rgba(255, 255, 255, 1) 100%);
    pointer-events: none;
    transition: opacity .4s ease;
}
.login-form-height.is-expanded::after{
    opacity:0;
}
.loginpage-section .login-form-wrap{
    width:100%;
}

.loginpage-section .login-form-wrap label{
    display:block;
    font-size:14px;
    font-weight:700;
    color:#3b1e6d;
    margin-bottom:0px; 
}

.loginpage-section .login-form-wrap .input-wrap{
    position:relative;
    margin-bottom:12px;
}

.loginpage-section .login-form-wrap .input-wrap input, .loginpage-section .login-form-wrap .input-wrap select,
.loginpage-section .login-form-wrap .input-wrap textarea
{
    width: 100%;
    padding:12px 16px 12px 50px;
    font-size:16px;
    font-family:inherit;
    border:1px solid #c5c5c5;
    border-radius:6px;
    color:#444;
    outline:none;
    transition:.25s ease;
}
.loginpage-section .login-form-wrap .input-wrap textarea{width: 100%;}

.loginpage-section .login-form-wrap .input-wrap select {max-width: 100%;    width: 98%;}

.loginpage-section .login-form-wrap .input-wrap input::placeholder{ color:#b9b3c9; }

.loginpage-section .login-form-wrap .input-wrap input:focus{
    border-color:#6b4fa0;
    box-shadow:0 0 0 3px rgba(107,79,160,.12);
}

.loginpage-section .login-form-wrap .icon{
    position:absolute;
    left:16px;
    top:50%;
    transform:translateY(-50%);
    width:25px;
    height:25px;
    fill: #a2a1a1;
    color:#fff;
    pointer-events:none;
}
.svgicon{color: #a2a1a1!important}

/*=========================================
CLOUDFLARE STATUS BOX
==========================================*/
.loginpage-section .cf-box{
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:#f7f7f8;
    border:1px solid #e3e1e8;
    border-radius:8px;
    padding:10px 18px;
    margin-bottom:12px;
}

.loginpage-section .cf-success{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:16px;
    color:#222;
}

.loginpage-section .check-circle{
    width:26px;
    height:26px;
    border-radius:50%;
    background:#1a9b4c;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}

.loginpage-section .check-circle svg{ width:14px; height:14px; }

.loginpage-section .cf-brand{ text-align:right; }

.loginpage-section .cf-brand .cf-logo{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:5px;
    font-weight:800;
    font-size:13px;
    letter-spacing:.3px;
    color:#111;
}

.loginpage-section .cf-brand .cf-logo svg{ width:18px; height:18px; }

.loginpage-section .cf-links{ font-size:11px; margin-top:3px; color:#666; }
.loginpage-section .cf-links a{ color:#2563eb; text-decoration:underline; }

/*=========================================
CONTINUE BUTTON
==========================================*/
.loginpage-section .continue-btn-new{}
 /* From Uiverse.io by Allyhere */ 
 /* custom new button */
.loginpage-section .continue-btn-new {
  --clr-font-main: hsla(0 0% 20% / 100);
    --btn-bg-1: hsl(266.32deg 77.06% 59.46%);
    --btn-bg-2: hsl(266.32deg 88.49% 30.16%);
    --btn-bg-color: hsla(360 100% 100% / 1);
    --radii: 0.5em;
    cursor: pointer;
    padding:18px 16px;
    min-width: 120px;
    min-height: 44px;
    font-size: var(--size, 1rem);
    font-weight: 500;
    transition: 0.8s;
    background-size: 280% auto;
    background-image: linear-gradient(325deg, var(--btn-bg-2) 0%, var(--btn-bg-1) 55%, var(--btn-bg-2) 90%);
    border: none;
    border-radius: var(--radii);
    color: var(--btn-bg-color);
    box-shadow: 0px 0px 20px rgb(203 71 255 / 25%), 0px 5px 5px -1px rgb(143 58 233 / 10%), inset 4px 4px 8px rgb(223 175 255 / 10%), inset -4px -4px 8px rgb(137 19 216 / 10%);
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 7px;
    font-weight: 700;
    font-size: 14px;
    margin: 10px auto;
}
.loginpage-section .continue-btn-new.signup-new{
    --clr-font-main: hsla(0 0% 20% / 100);
    --btn-bg-1: hsl(0deg 0% 89.91%);
    --btn-bg-2: hsl(0deg 0% 74.95%);
    --btn-bg-color: hsla(360 100% 100% / 1);
    --radii: 0.5em;
    
    min-width: 120px;
    min-height: 44px;
    
    background-image: linear-gradient(325deg, var(--btn-bg-2) 0%, var(--btn-bg-1) 55%, var(--btn-bg-2) 90%);
    
    box-shadow: 0px 0px 20px rgb(205 205 205 / 25%), 0px 5px 5px -1px rgb(175 175 175 / 10%), inset 4px 4px 8px rgb(153 153 153 / 10%), inset -4px -4px 8px rgb(97 97 97 / 10%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid #c5c5c5;
    border-radius: 6px;
        color: #000;
    font-size: 14px;
    font-weight: 600;
    width: 100px;
        margin: 0;
}

.loginpage-section .continue-btn-new:hover {
  background-position: right top;
}

/* .loginpage-section .continue-btn-new:is(:focus, :focus-visible, :active) {
  outline: none;
  box-shadow:
    0 0 0 3px var(--btn-bg-color),
    0 0 0 6px var(--btn-bg-2);
} */

@media (prefers-reduced-motion: reduce) {
  .loginpage-section .continue-btn-new {
    transition: linear;
  }
}



.loginpage-section .continue-btn{
    width:100%;
    background:#4b2e83;
    color:#fff;
    border:none;
    border-radius:8px;
    padding:18px 16px;
    font-size:14px;
    font-family:inherit;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    cursor:pointer;
    transition:.3s ease;
}

.loginpage-section .continue-btn svg,.loginpage-section .continue-btn-new svg{ width:20px; height:20px; }

.loginpage-section .continue-btn:hover{
    background:#3e2569;
    transform:translateY(-2px);
}

/*=========================================
TERMS
==========================================*/
.loginpage-section .terms-text{
    text-align:center;
    font-size: 13px;
    color:#333;
    margin-top:13px;
    line-height:1.7;
}

.loginpage-section .terms-text a{
    color:#4b2e83;
    font-weight:700;
    text-decoration:underline;
}

/*=========================================
CONTACT SALES
==========================================*/
.loginpage-section .contact-sales{
    display:flex;
    align-items:flex-start;
    gap:12px;
    justify-content:center;
    margin-top:0px;
    font-size:13px;
    color:#4b2e83;
    font-weight:700;
}

.loginpage-section .contact-sales svg{
    width:30px;
    height:30px;
    flex-shrink:0;
    color:#7c3aed;
    margin-top:2px;
}

.loginpage-section .contact-sales p{
    margin:0;
    text-align: center;
    max-width:100%;
    line-height:1.5;
    font-weight:400;
    color:#4b2e83;
}

.loginpage-section .contact-sales a{
    color:#4b2e83;
    font-weight:700;
    text-decoration:underline;
}

/*=========================================
ANIMATIONS
==========================================*/

@keyframes leftFade{
    0%{ opacity:0; transform:translateX(-40px); }
    100%{ opacity:1; transform:translateX(0); }
}


@keyframes rightFade{
    0%{ opacity:0; transform:translateX(40px); }
    100%{ opacity:1; transform:translateX(0); }
}

@keyframes cardFade{
    0%{ opacity:0; transform:translateY(30px); }
    100%{ opacity:1; transform:translateY(0); }
}

@keyframes fadeTop{
    0%{ opacity:0; transform:translateY(-20px); }
    100%{ opacity:1; transform:translateY(0); }
}



/*=========================================
SLIDE ROW BOX (Google/Github + OR divider)
Collapses smoothly when email/password field
gets focused, so the login form slides up
==========================================*/
.loginpage-section .sliderowbox{
    overflow:hidden;
    max-height:260px;
    opacity:1;
    transform:translateY(0);
    transition:
        max-height .5s cubic-bezier(.4,0,.2,1),
        opacity .35s ease,
        margin .5s cubic-bezier(.4,0,.2,1),
        transform .5s cubic-bezier(.4,0,.2,1);
}
 
.loginpage-section .sliderowbox.is-collapsed{
    max-height:0;
    opacity:0;
    margin:0;
    transform:translateY(-12px);
    pointer-events:none;
}
 
/* login-form-wrap needs a transition too so it glides up smoothly
   rather than just snapping into the freed space */
.loginpage-section .login-form-wrap{
    transition:transform .5s cubic-bezier(.4,0,.2,1);
}
 
 /*=========================================
FORM MESSAGE (success / error) — top-right toast
==========================================*/
.loginpage-section .form-message{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:14px;
    font-weight:600;
    line-height:1.4;
    padding:14px 18px;
    border-radius:10px;
    box-shadow:0 12px 30px rgba(0,0,0,.12); 
    position:fixed;
    top:-65px;
    right:0px;
    max-width:340px;
    z-index:9999;
 
    opacity:0;
    transform:translateX(140%);
    visibility:hidden;
    pointer-events:none;
    transition:opacity .4s cubic-bezier(.22,1,.36,1),
               transform .4s cubic-bezier(.22,1,.36,1),
               visibility .4s;
}
 
.loginpage-section .form-message.is-visible{
    opacity:1;
    transform:translateX(0);
    visibility:visible;
    pointer-events:auto;
}
 
.loginpage-section .form-message svg{
    width:18px;
    height:18px;
    flex-shrink:0;
}
 
.loginpage-section .form-message.error{
    background:#d9382c;
    border:1px solid #d9382c;
    color:#fff;
}
 
.loginpage-section .form-message.success{
    background:#eafaf0;
    border:1px solid #a6e9c2;
    color:#1a9b4c;
}


 .ab-error{
         position: absolute;
         left: 0;
         right: 0;
         top: 100%;
         border: 1px solid #d1cece;
         z-index: 99;
         padding: 14px 6px 14px 14px;
         background: #fff;
         border-radius: 5px;
         margin-top: 8px;
         box-shadow: 3px 3px 4px 1px rgba(0, 0, 0, 0.2);
         display: none;
             line-height: 14px;
    font-size: 13px;
        margin: 0;
    color: #000;
         }
         .ab-error span{
         display: flex;
         align-items: center;
         position: relative;
         gap: 7px;
         padding-left: 21px;
         }
         .ab-error span svg{
         position: absolute;
         left: -7px;
         }
         .ab-error::before{    content: "";
         border-width: 10px;
         border-style: solid;
         border-color: transparent transparent #d1cece transparent;
         position: absolute;
         left: 14px;
         z-index: 99;
         top: -20px;}
         .ab-error::after{    content: "";
         border-width: 10px;
         border-style: solid;
         border-color: transparent transparent #fff transparent;
         position: absolute;
         left: 14px;
         z-index: 99;
         top: -18px;}


 
@media (max-width:575px){
    .loginpage-section .form-message{
        top:16px;
        right:16px;
        left:16px;
        max-width:none;
    }
}

/*==========================================================
RESPONSIVE
==========================================================*/
@media (max-width:1400px){
    .loginpage-section .loginpage{ padding:60px; }
    .loginpage .left-content h1{ font-size:36px; }
    .loginpage .left-content p{ font-size:18px; }
    .loginpage-section .login{ padding:0; }
}
@media (max-width:1300px){
        .loginpage-section .loginpage {
        padding: 40px;
    }
    .sso-wrapper{margin-bottom: 10px;}
    .left-content p{
        padding-bottom: 10px;
    margin-bottom: 10px;
    }
}
@media (max-width:1199px){
    .loginpage-section .loginpage{ padding:50px; }
    .loginpage .logo{ margin-bottom:30px; }
    .loginpage .logo-box img{ height:38px; }
    .loginpage .left-content h1{ font-size:32px; }
    .loginpage .left-content p{ font-size:17px; margin-bottom:20px; }
    .loginpage-section .loginpage-right{ padding:80px 40px 40px 40px; }
    .loginpage-section .login-header h2{ font-size:26px; }
}

@media (max-width:991px){
    .loginpage-section .top-bar{
        left: 30px;
    right: 40px;
    top: 20px;
    }
    .loginpage-section .cf-sso__hero{ width:100%; min-height:auto; padding-bottom:40px; }
    .loginpage-section .loginpage-bg{ display:none; }
    .loginpage-section .login{background: #fff;padding: 15px}
.loginpage-section .col-lg-6.loginpage-right{    position: relative;
    overflow: hidden;
    background: #f8f6ff;
    min-height: 100vh;}

    .loginpage-section .col-lg-6.loginpage-right:after {
    content: "";
    position: absolute;
    right: -160px;
    bottom: -140px;
    width: 430px;
    height: 430px;
    border-radius: 50%;
    background: rgba(168, 112, 255, .10);
    filter: blur(90px);
    pointer-events: none;
}

 
.loginpage-section .col-lg-6.loginpage-right:before{    content: "";
    position: absolute;
    top: -220px;
    left: -180px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: rgba(111, 63, 211, .08);
    filter: blur(90px);
    pointer-events: none;}
    .loginpage .feature-list .row{display: none;}
    .loginpage-section .loginpage{ padding:0; }
    .left-content{ text-align:center; margin:0 auto;         text-align: center;
        padding-bottom: 30px;
        max-width: 100%;}
   .logo{ justify-content:center; }
    .sso-wrapper{ justify-content:center;margin-bottom:0 }
     .left-content h1{ font-size:24px; }
    .left-content p{ font-size:16px; max-width: 100%}
    .loginpage .feature-list{ margin-top:15px; text-align:left; }
    .loginpage-section .loginpage-right{ width:100%; min-height:auto; padding:50px 20px; }
    .loginpage-section .right{ max-width:100%; margin:0 auto; }
    .loginpage-section .login-header{margin-top: 40px}
}

@media (max-width:767px){
     .logo{ gap:20px; margin-bottom:0px;        margin-left: 0px;
        margin-right: 0px;
        background: #fff;
    border-radius: 10px;
    padding: 5px 15px; }
    .loginpage-section .login{border-radius: 10px;}
     .left-content h1{ font-size:26px; line-height:1.3; }
     .left-content p{ font-size:15px; margin-bottom:0px; padding-bottom:0px; }
    .loginpage .feature-list .col-md-6{ margin-bottom:8px; }
    .loginpage-section .top-bar{ margin-bottom:22px; }
    .loginpage-section .login-header{ margin-bottom:24px;         margin-top: 60px;}
    .loginpage-section .login-header h2{ font-size:24px; }
    .loginpage-section .login-header p{ font-size:14px; }
    .loginpage-section .social-row .col-6{
        flex:0 0 100%;
        max-width:100%;
        margin-bottom:12px;
    }
    .loginpage-section .divider{ margin:16px 0; }
    .loginpage-section .login-form-wrap label{ font-size:13px; }
    .loginpage-section .login-form-wrap .input-wrap input{ padding:8px 8px 8px 44px; font-size:15px; border-radius: 3px}
    .loginpage-section .continue-btn{        font-size: 13px;
        padding: 12px;
        border-radius: 4px;}
    .loginpage-section .contact-sales{ flex-direction:column; align-items:center; text-align:center; font-size: 11px;margin-top: 15px;} 
    .loginpage-section .contact-sales p{ max-width:100%; }
}

@media (max-width:575px){
    .loginpage-section .loginpage{ padding:35px 18px; }
     .logo-box img{ height:32px; }
     .sso-pill{ width:100%; padding:0 20px; height:44px; }
    .sso-pill span{ font-size:14px; }
     .left-content h1{ font-size:18px; }
     .left-content h1 span{display: block;}
    .left-content p{
                font-size: 14px;
        line-height: 19px;
        border-bottom: none;
    }
    .loginpage .feature-icon{ width:36px; height:36px; }
    .loginpage .feature-box h4{ font-size:15px; }
    .loginpage .feature-box p{ font-size:12px; }
    .loginpage-section .loginpage-right{ padding:20px 15px; }
    .loginpage-section .top-bar{  gap:14px; align-items:stretch;        left: 15px;
        right: 15px; }
    .loginpage-section .signup{ width:auto;    padding: 8px 8px;font-size: 12px; }
    .loginpage-section .back-link{font-size: 13px}
    .loginpage-section .login-header h2{ font-size:22px; }
    .loginpage-section .login-header p{ font-size:12px;border-bottom:none; }
    .loginpage-section .terms-text{ font-size:11px; }
    .login-links {font-size: 12px;text-align: right;}
    .left-content{margin-top: 20px}
    .loginpage-section .signup{gap: 3px;}
}


/*=========================================
WELCOME SPLASH SCREEN (new visitors)
==========================================*/
.welcome-splash{
    position:fixed;
    inset:0;
    z-index:99999;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:20px;
    overflow:hidden;
    background:linear-gradient(135deg,#3d1f7a 0%,#522d8d 45%,#7141dc 100%);
    font-family:'Inter',sans-serif;
    opacity:1;
    visibility:visible;
    transition:opacity .6s ease, visibility .6s ease;
}
 
.welcome-splash.is-hidden{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}
 
/* floating bubbles background */
.welcome-splash__decor{
    position:absolute;
    inset:0;
    pointer-events:none;
}
 
.welcome-splash__decor .bubble{
    position:absolute;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    animation:floatBubble 6s ease-in-out infinite;
}
 
.bubble.b1{ width:90px;  height:90px;  left:8%;  top:15%; animation-delay:0s; }
.bubble.b2{ width:50px;  height:50px;  left:80%; top:20%; animation-delay:.8s; }
.bubble.b3{ width:130px; height:130px; left:75%; top:65%; animation-delay:1.4s; }
.bubble.b4{ width:60px;  height:60px;  left:15%; top:70%; animation-delay:2s; }
.bubble.b5{ width:36px;  height:36px;  left:45%; top:10%; animation-delay:2.6s; }
 
@keyframes floatBubble{
    0%,100%{ transform:translateY(0) scale(1); }
    50%{ transform:translateY(-22px) scale(1.06); }
}
 
/* mascot */
.welcome-splash__mascot{
    width:150px;
    margin-bottom:18px;
    animation:mascotPop .8s cubic-bezier(.22,1,.36,1) both;
}
 
.welcome-splash__mascot svg{ width:100%; height:auto; display:block; }
 
@keyframes mascotPop{
    0%{ transform:scale(.4) translateY(30px); opacity:0; }
    100%{ transform:scale(1) translateY(0); opacity:1; }
}
 
.mascot-eye{ animation:mascotBlink 3.2s ease-in-out infinite; transform-origin:center; transform-box:fill-box; }
 
@keyframes mascotBlink{
    0%,90%,100%{ transform:scaleY(1); }
    95%{ transform:scaleY(.15); }
}
 
.mascot-antenna-dot{ animation:antennaGlow 1.6s ease-in-out infinite; transform-origin:center; transform-box:fill-box; }
 
@keyframes antennaGlow{
    0%,100%{ filter:drop-shadow(0 0 0 rgba(255,209,102,0)); transform:scale(1); }
    50%{ filter:drop-shadow(0 0 8px rgba(255,209,102,.9)); transform:scale(1.15); }
}
 
.mascot-arm{ transform-origin:158px 118px; animation:mascotWave 1.1s ease-in-out infinite; }
 
@keyframes mascotWave{
    0%,100%{ transform:rotate(0deg); }
    25%{ transform:rotate(-18deg); }
    50%{ transform:rotate(0deg); }
    75%{ transform:rotate(-12deg); }
}
 
/* text */
.welcome-splash__title{
    font-size:38px;
    font-weight:800;
    color:#fff;
    letter-spacing:-.5px;
    margin-bottom:10px;
    opacity:0;
    animation:textFadeUp .7s ease .3s forwards;
}
 
.welcome-splash__title span{
    display:block;
    background:linear-gradient(90deg,#ffd166,#ff8fab);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    font-size:44px;
}
 
.welcome-splash__subtitle{
    font-size:17px;
    color:rgba(255,255,255,.85);
    max-width:420px;
    margin-bottom:36px;
    opacity:0;
    animation:textFadeUp .7s ease .5s forwards;
}
 
@keyframes textFadeUp{
    0%{ opacity:0; transform:translateY(14px); }
    100%{ opacity:1; transform:translateY(0); }
}
 
/* loader bar showing the 5s wait */
.welcome-splash__loader{
    width:220px;
    height:6px;
    border-radius:6px;
    background:rgba(255,255,255,.2);
    overflow:hidden;
    opacity:0;
    animation:textFadeUp .7s ease .7s forwards;
}
 
.welcome-splash__loader-bar{
    display:block;
    height:100%;
    width:0%;
    border-radius:6px;
    background:linear-gradient(90deg,#ffd166,#ff8fab);
    animation:loaderFill 5s linear forwards;
}
 
@keyframes loaderFill{
    0%{ width:0%; }
    100%{ width:100%; }
}
 
@media (max-width:575px){
    .welcome-splash__mascot{ width:110px; }
    .welcome-splash__title{ font-size:28px; }
    .welcome-splash__title span{ font-size:32px; }
    .welcome-splash__subtitle{ font-size:15px; padding:0 10px; }
}

/*=========================================
MOBILE: FORM FIRST, CONTENT AFTER
(only this block added — nothing else changed)
==========================================*/
.mobileview{display: none;}
.login-links{text-align: right;}
.login-links a{     color: #4b2e83;
    font-weight: 500;
    text-decoration: underline;
    font-size: 13px;}
@media (max-width:991px){
    .desktopview{display: none;}
    .mobileview{display: block;}
    .loginpage-section .row{
        display:flex;
            margin-bottom: 0px;
    margin-top: 0px;
    }
    .loginpage-section .loginpage-right{
        order:-1;   /* form pehle dikhega */
        display: block;
    }
    .loginpage-section .cf-sso__hero{
        order:2;    /* hero content baad me */
        display: none;
    }
   
}