/* ============================================================
   auth-pages-theme4.css  —  Code Crafts Brand Theme
   Navy #1B2B6B  |  Orange #F47920  |  White #FFFFFF
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;overflow:hidden;}
body{font-family:'Nunito',sans-serif;}

:root{
    --navy:    #1B2B6B;
    --navy2:   #243580;
    --navy3:   #0F1A42;
    --orange:  #F47920;
    --orange2: #E06510;
    --orange3: #FF9A45;
    --white:   #FFFFFF;
    --soft:    #F5F7FF;
    --gray:    #64748B;
}

/* ══ WRAPPER ══════════════════════════════════════════════════ */
.lp{ position:fixed;inset:0;display:flex;background:var(--navy3); }

/* ══════════════════════════════════════════════════════════════
   LEFT PANEL — Enhanced Navy with Orange accents
══════════════════════════════════════════════════════════════ */
.lp-left{
    flex:1; position:relative; overflow:hidden;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:48px;
    background:linear-gradient(145deg, #0C1E5B 0%, #153E9F 55%, #1a4fcc 100%);
}

/* Diagonal shine beam */
.lp-left::before{
    content:'';
    position:absolute;z-index:2;
    width:2px;height:250%;top:-75%;left:38%;
    background:linear-gradient(180deg,transparent 0%,rgba(244,121,32,.22) 40%,rgba(255,255,255,.08) 60%,transparent 100%);
    transform:rotate(20deg);
    animation:beamDrift 9s ease-in-out infinite alternate;
    pointer-events:none;
}
@keyframes beamDrift{0%{left:32%;opacity:.8;}100%{left:45%;opacity:.2;}}

/* Bottom wave */
.lp-left::after{
    content:'';
    position:absolute;bottom:-2px;left:0;right:0;height:70px;
    background:linear-gradient(160deg,#ffffff 0%,#F5F7FF 60%,#EEF1FF 100%);
    clip-path:ellipse(52% 100% at 50% 100%);
    z-index:5;pointer-events:none;
}

/* Dot grid */
.lp-grid{
    position:absolute;inset:0;
    background-image:radial-gradient(circle,rgba(255,255,255,.09) 1.5px,transparent 1.5px);
    background-size:38px 38px;
    pointer-events:none;z-index:0;
}

/* Orbs */
.lp-orb{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none;z-index:1;}
.lp-o1{ width:500px;height:500px; background:radial-gradient(circle,rgba(244,121,32,.3),transparent 70%); top:-160px;left:-120px; animation:orbPulse 12s ease-in-out infinite; }
.lp-o2{ width:320px;height:320px; background:radial-gradient(circle,rgba(255,255,255,.08),transparent 70%); bottom:-90px;right:-60px; animation:orbPulse 9s ease-in-out infinite reverse; }
.lp-o3{ width:260px;height:260px; background:radial-gradient(circle,rgba(244,121,32,.18),transparent 70%); top:35%;right:8%; animation:orbPulse 7s ease-in-out infinite; }
@keyframes orbPulse{0%{transform:scale(1) translate(0,0);}50%{transform:scale(1.15) translate(25px,30px);}100%{transform:scale(1) translate(0,0);}}

/* Floating school emojis */
.lp-sh{position:absolute;pointer-events:none;z-index:6;font-size:30px;line-height:1;filter:drop-shadow(0 6px 16px rgba(0,0,0,.25));}
.lp-s1{top:9%; left:6%;  animation:floatKid 5.0s ease-in-out infinite alternate;}
.lp-s2{top:64%;left:4%;  animation:floatKid 6.5s ease-in-out infinite alternate-reverse;}
.lp-s3{top:16%;right:8%; animation:floatKid 5.8s ease-in-out infinite alternate;}
.lp-s4{bottom:22%;right:6%;animation:floatKid 7.2s ease-in-out infinite alternate-reverse;}
@keyframes floatKid{0%{transform:translateY(0) rotate(-10deg) scale(1);}100%{transform:translateY(-24px) rotate(10deg) scale(1.1);}}

/* Deco floating cards */
.lp-deco-card{
    position:absolute;z-index:10;
    background:rgba(255,255,255,.09);
    border:1.5px solid rgba(255,255,255,.18);
    border-radius:20px;padding:14px 18px;
    backdrop-filter:blur(16px);
    box-shadow:0 12px 40px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.15);
    transition:transform .3s ease;
}
.lp-deco-card:hover{transform:translateY(-4px) scale(1.02);}
@keyframes decoFloat{
    0%  {transform:translateY(0)   rotate(-.8deg);}
    100%{transform:translateY(-16px) rotate(.8deg);}
}

/* Left main content */
.lp-left-content{position:relative;z-index:10;text-align:center;max-width:420px;}

.lp-left-badge{
    display:inline-flex;align-items:center;gap:8px;
    background:rgba(244,121,32,.2);
    border:1.5px solid rgba(244,121,32,.5);
    border-radius:30px;padding:7px 22px;
    font-size:11.5px;font-weight:800;color:var(--orange3);
    letter-spacing:.7px;text-transform:uppercase;margin-bottom:18px;
    box-shadow:0 4px 20px rgba(244,121,32,.25);
    animation:badgePulse 3s ease-in-out infinite;
}
@keyframes badgePulse{0%,100%{box-shadow:0 4px 20px rgba(244,121,32,.25);}50%{box-shadow:0 6px 28px rgba(244,121,32,.45);}}

.lp-left-title{
    font-size:36px;font-weight:900;color:#fff;
    line-height:1.18;margin-bottom:12px;letter-spacing:-.5px;
    text-shadow:0 4px 28px rgba(0,0,0,.25);
}
.lp-left-title span{
    background:linear-gradient(135deg,var(--orange) 0%,var(--orange3) 100%);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

.lp-left-sub{font-size:14.5px;color:rgba(255,255,255,.72);line-height:1.7;margin-bottom:22px;font-weight:600;}
.lp-left-sub strong{color:var(--orange3);}

/* Pills */
.lp-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin-bottom:24px;}
.lp-pill{
    display:inline-flex;align-items:center;gap:7px;
    background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.18);
    backdrop-filter:blur(8px);border-radius:24px;padding:7px 16px;
    font-size:12.5px;font-weight:700;color:rgba(255,255,255,.9);
    transition:all .3s ease;
    box-shadow:0 2px 12px rgba(0,0,0,.1);
}
.lp-pill:hover{background:rgba(244,121,32,.3);border-color:rgba(244,121,32,.6);transform:translateY(-4px);box-shadow:0 8px 20px rgba(244,121,32,.2);}
.lp-pill i{color:var(--orange3);font-size:12px;}

/* Feature icon row */
.feat-row{
    display:flex;justify-content:center;gap:18px;
    padding:16px 20px;
    background:rgba(255,255,255,.06);
    border:1.5px solid rgba(255,255,255,.1);
    border-radius:20px;
    backdrop-filter:blur(10px);
}
.feat-item{text-align:center;}
.feat-icon{
    width:50px;height:50px;border-radius:14px;margin:0 auto 7px;
    display:flex;align-items:center;justify-content:center;
    font-size:22px;
    background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.16);
    backdrop-filter:blur(8px);
    transition:all .3s ease;
    animation:floatKid 4s ease-in-out infinite alternate;
    box-shadow:0 4px 14px rgba(0,0,0,.12);
}
.feat-item:nth-child(2) .feat-icon{animation-delay:.5s;}
.feat-item:nth-child(3) .feat-icon{animation-delay:1s;}
.feat-item:nth-child(4) .feat-icon{animation-delay:1.5s;}
.feat-item:hover .feat-icon{
    background:rgba(244,121,32,.3);
    border-color:rgba(244,121,32,.5);
    transform:scale(1.18) translateY(-5px);
    box-shadow:0 8px 22px rgba(244,121,32,.3);
}
.feat-label{font-size:10.5px;color:rgba(255,255,255,.65);font-weight:700;letter-spacing:.3px;}

.lp-copy{
    position:absolute;bottom:16px;left:0;right:0;
    text-align:center;z-index:10;
    font-size:11px;color:rgba(255,255,255,.28);letter-spacing:.3px;
}

/* ══════════════════════════════════════════════════════════════
   RIGHT PANEL — Enhanced glassmorphism with brand accents
══════════════════════════════════════════════════════════════ */
.lp-right{
    width:500px;flex-shrink:0;
    background:linear-gradient(160deg,#ffffff 0%,#F5F7FF 60%,#EEF1FF 100%);
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    padding:48px 52px;position:relative;overflow-y:auto;
}
.lp-right.lp-right--wide{
    width:540px;justify-content:flex-start;padding:16px 38px;
    overflow-y:auto;overflow-x:hidden;
}

/* Animated top border */
.lp-right::after{
    content:'';
    position:absolute;top:0;left:0;right:0;height:4px;
    background:linear-gradient(90deg,var(--navy),var(--orange),var(--navy3),var(--orange),var(--navy));
    background-size:300% 100%;
    animation:barSlide 4s linear infinite;
    z-index:10;
}
@keyframes barSlide{0%{background-position:0% 0%;}100%{background-position:300% 0%;}}

/* Left curved edge shadow */
.lp-right::before{
    content:'';
    position:absolute;top:0;left:-12px;bottom:0;width:24px;
    background:linear-gradient(90deg,transparent,rgba(27,43,107,.06));
    z-index:0;
    pointer-events:none;
}

/* Soft ambient blobs */
.reg-right-orb{position:absolute;border-radius:50%;pointer-events:none;z-index:0;filter:blur(80px);}
.reg-right-orb-1{width:280px;height:280px;background:radial-gradient(circle,rgba(244,121,32,.1),transparent 70%);top:-80px;right:-60px;animation:blobDrift 11s ease-in-out infinite alternate;}
.reg-right-orb-2{width:220px;height:220px;background:radial-gradient(circle,rgba(27,43,107,.08),transparent 70%);bottom:60px;left:-60px;animation:blobDrift 14s ease-in-out infinite alternate-reverse;}
.reg-right-orb-3{width:140px;height:140px;background:radial-gradient(circle,rgba(244,121,32,.07),transparent 70%);bottom:30%;right:-20px;animation:blobDrift 9s ease-in-out infinite alternate;}
@keyframes blobDrift{0%{transform:translate(0,0) scale(1);}100%{transform:translate(18px,22px) scale(1.1);}}

@keyframes slideUp{0%{opacity:0;transform:translateY(40px) scale(.97);}100%{opacity:1;transform:translateY(0) scale(1);}}
.lp-form-wrap{width:100%;position:relative;z-index:1;animation:slideUp .65s cubic-bezier(.34,1.56,.64,1) both;}

/* Logo area */
.lp-logo{text-align:center;margin-bottom:4px;}
.lp-logo img{
    height:48px;width:auto;object-fit:contain;display:block;margin:0 auto 5px;
    filter:drop-shadow(0 4px 12px rgba(27,43,107,.15));
    animation:logoBounce 3s ease-in-out infinite alternate;
}
.lp-logo-fallback{
    width:52px;height:52px;border-radius:16px;
    background:linear-gradient(135deg,var(--navy),var(--navy2));
    display:flex;align-items:center;justify-content:center;
    margin:0 auto 6px;font-size:22px;color:#fff;
    box-shadow:0 8px 24px rgba(27,43,107,.28);
    animation:logoBounce 3s ease-in-out infinite alternate;
}
@keyframes logoBounce{
    0%{transform:translateY(0) rotate(-2deg);}
    100%{transform:translateY(-5px) rotate(2deg);}
}
.lp-school{font-size:16px;font-weight:900;color:var(--navy);margin-bottom:1px;letter-spacing:-.3px;background:linear-gradient(135deg,var(--navy),var(--orange));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.lp-sub{font-size:11px;color:var(--gray);font-weight:600;}

/* Heading */
.rp-heading{
    text-align:center;margin-bottom:5px;
    padding:6px 14px;
    background:linear-gradient(135deg,rgba(27,43,107,.04),rgba(244,121,32,.04));
    border-radius:12px;
    border:1px solid rgba(27,43,107,.07);
}
.rp-heading h3{font-size:14px;font-weight:900;color:var(--navy);margin-bottom:2px;}
.rp-heading p{font-size:11px;color:var(--gray);font-weight:600;}
.rp-heading p span{color:var(--orange);font-weight:800;}

/* Step progress bar */
.reg-steps{display:flex;align-items:center;justify-content:center;margin:5px 0 6px;padding:0 4px;}
.reg-step{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1;position:relative;}
.reg-step::after{
    content:'';position:absolute;top:17px;left:50%;width:100%;height:3px;
    background:#EEF0F6;z-index:0;border-radius:3px;
    transition:background .4s ease;
}
.reg-step:last-child::after{display:none;}
.reg-step.done::after{background:linear-gradient(90deg,var(--navy),var(--orange));}
.reg-step-circle{
    width:34px;height:34px;border-radius:50%;
    border:2.5px solid #E2E8F0;background:#fff;
    display:flex;align-items:center;justify-content:center;
    font-size:13px;font-weight:800;color:#94A3B8;
    position:relative;z-index:1;
    transition:all .4s cubic-bezier(.34,1.56,.64,1);
    box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.reg-step.active .reg-step-circle{
    border-color:var(--orange);
    background:linear-gradient(135deg,var(--orange),var(--orange3));
    color:#fff;
    box-shadow:0 6px 20px rgba(244,121,32,.45);
    transform:scale(1.22);
}
.reg-step.done .reg-step-circle{
    border-color:var(--navy);
    background:linear-gradient(135deg,var(--navy),var(--navy2));
    color:#fff;transform:scale(1.06);
}
.reg-step-label{font-size:10px;font-weight:800;color:#94A3B8;text-transform:uppercase;letter-spacing:.5px;transition:color .3s;}
.reg-step.active .reg-step-label{color:var(--orange);}
.reg-step.done   .reg-step-label{color:var(--navy);}

/* Stats row */
.reg-stats-row{
    display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
    margin-bottom:18px;
}
.reg-stat-card{
    text-align:center;
    background:linear-gradient(135deg,rgba(27,43,107,.06),rgba(244,121,32,.05));
    border:1.5px solid rgba(27,43,107,.1);
    border-radius:14px;padding:12px 8px;
    transition:all .3s cubic-bezier(.34,1.56,.64,1);
    animation:fieldPop .5s cubic-bezier(.34,1.56,.64,1) both;
}
.reg-stat-card:nth-child(2){animation-delay:.1s;}
.reg-stat-card:nth-child(3){animation-delay:.2s;}
.reg-stat-card:hover{
    transform:translateY(-4px) scale(1.04);
    border-color:var(--orange);
    box-shadow:0 8px 24px rgba(244,121,32,.15);
}
.reg-stat-icon{
    width:36px;height:36px;border-radius:10px;margin:0 auto 8px;
    background:linear-gradient(135deg,var(--navy),var(--navy2));
    display:flex;align-items:center;justify-content:center;
    color:#fff;font-size:15px;
    box-shadow:0 4px 12px rgba(27,43,107,.25);
    transition:all .3s ease;
}
.reg-stat-card:hover .reg-stat-icon{
    background:linear-gradient(135deg,var(--orange),var(--orange3));
    box-shadow:0 4px 14px rgba(244,121,32,.35);
    transform:rotate(-8deg) scale(1.1);
}
.reg-stat-val{font-size:18px;font-weight:900;color:var(--navy);line-height:1;margin-bottom:3px;}
.reg-stat-lbl{font-size:10.5px;font-weight:700;color:var(--gray);text-transform:uppercase;letter-spacing:.4px;}

/* Alerts */
.lp-alert{background:#FFF7ED;border-left:4px solid var(--orange);border-radius:12px;padding:12px 16px;font-size:13px;color:#7C2D12;margin-bottom:16px;display:flex;align-items:flex-start;gap:10px;font-weight:700;}
.lp-alert i{color:var(--orange);flex-shrink:0;margin-top:1px;}
.lp-success{background:#F0FFF4;border-left:4px solid #22C55E;border-radius:12px;padding:12px 16px;font-size:13px;color:#14532D;margin-bottom:16px;display:flex;align-items:flex-start;gap:10px;font-weight:700;}
.lp-success i{color:#22C55E;flex-shrink:0;margin-top:1px;}

/* Section dividers */
.reg-section-divider{display:flex;align-items:center;gap:8px;margin:4px 0 8px;}
.reg-section-divider::before,.reg-section-divider::after{content:'';flex:1;height:1.5px;background:linear-gradient(90deg,transparent,#E2E8F0,transparent);border-radius:2px;}
.reg-section-divider span{
    display:flex;align-items:center;gap:6px;
    font-size:10px;font-weight:800;color:var(--navy);
    text-transform:uppercase;letter-spacing:.8px;white-space:nowrap;
    background:linear-gradient(135deg,var(--navy),var(--orange));
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
    border-bottom:1.5px solid rgba(244,121,32,.3);
    padding-bottom:1px;
}
.reg-section-divider span i{
    -webkit-text-fill-color:var(--orange);
    font-size:10px;
}

/* Fields */
.lp-field{margin-bottom:8px;animation:fieldPop .4s cubic-bezier(.34,1.56,.64,1) both;transition:transform .2s ease;}
.lp-field:nth-child(2){animation-delay:.05s;}
.lp-field:nth-child(3){animation-delay:.10s;}
.lp-field:nth-child(4){animation-delay:.15s;}
.lp-field:nth-child(5){animation-delay:.20s;}
.lp-field:nth-child(6){animation-delay:.25s;}
.lp-field:nth-child(7){animation-delay:.30s;}
@keyframes fieldPop{0%{opacity:0;transform:scale(.93) translateY(14px);}100%{opacity:1;transform:scale(1) translateY(0);}}
.lp-field:focus-within{transform:translateY(-2px);}

.lp-lbl{
    display:flex;align-items:center;gap:6px;
    font-size:12px;font-weight:800;color:#374151;
    margin-bottom:6px;transition:color .2s;
    letter-spacing:.1px;
}
.lp-field:focus-within .lp-lbl{color:var(--navy);}

.lp-input{
    display:flex;align-items:stretch;
    border:2px solid #E8ECF4;
    border-radius:12px;
    overflow:hidden;
    background:#fff;
    transition:all .3s cubic-bezier(.34,1.56,.64,1);
    box-shadow:0 2px 6px rgba(27,43,107,.04);
}
.lp-input:focus-within{
    border-color:var(--orange);
    box-shadow:0 0 0 3px rgba(244,121,32,.1),0 4px 16px rgba(244,121,32,.08);
    background:#fff;
}
.lp-ico{
    width:44px;display:flex;align-items:center;justify-content:center;
    color:var(--navy);font-size:14px;flex-shrink:0;
    background:linear-gradient(135deg,rgba(27,43,107,.04),rgba(244,121,32,.03));
    border-right:1.5px solid #EEF0F6;
    transition:all .3s cubic-bezier(.34,1.56,.64,1);
}
.lp-input:focus-within .lp-ico{
    color:var(--orange);
    background:linear-gradient(135deg,rgba(244,121,32,.08),rgba(244,121,32,.04));
    border-right-color:rgba(244,121,32,.2);
    transform:scale(1.15) rotate(-8deg);
}
.lp-input input,.lp-input select{
    flex:1;border:none;outline:none;background:transparent;
    font-size:13px;color:#1e293b;padding:9px 10px;
    font-family:'Nunito',sans-serif;font-weight:600;
}
.lp-input input::placeholder{color:#B0BAD0;font-weight:500;}
.lp-input select{cursor:pointer;}
.lp-eye{
    width:42px;border:none;background:transparent;
    color:#B0BAD0;cursor:pointer;font-size:13px;
    transition:all .2s;flex-shrink:0;
    border-left:1.5px solid #EEF0F6;
}
.lp-eye:hover{color:var(--orange);background:rgba(244,121,32,.05);}
.lp-err{font-size:11px;color:var(--orange);margin-top:4px;display:block;font-weight:700;display:flex;align-items:center;gap:4px;}
.lp-err::before{content:'⚠';font-size:10px;}

.lp-input.has-error{
    border-color:#EF4444;
    box-shadow:0 0 0 3px rgba(239,68,68,.08);
    animation:wobble .4s ease;
}
@keyframes wobble{0%,100%{transform:translateX(0);}20%{transform:translateX(-8px);}40%{transform:translateX(8px);}60%{transform:translateX(-5px);}80%{transform:translateX(5px);}}
.lp-input.is-valid .lp-ico{animation:checkPop .4s ease both;}
@keyframes checkPop{0%{transform:scale(0) rotate(-30deg);}70%{transform:scale(1.35) rotate(10deg);}100%{transform:scale(1) rotate(0);}}

/* Password strength */
.reg-pass-strength{
    height:4px;border-radius:8px;
    background:#EEF0F6;
    margin-top:6px;overflow:hidden;
    position:relative;
}
.reg-pass-strength::before{
    content:'Strength';
    position:absolute;right:0;top:-16px;
    font-size:9px;font-weight:700;color:#B0BAD0;text-transform:uppercase;
}
.reg-pass-strength-bar{height:100%;border-radius:8px;width:0%;transition:width .4s ease,background .4s ease;}

/* Submit button */
.lp-btn{
    width:100%;padding:11px 22px;margin-top:6px;
    background:linear-gradient(135deg,var(--navy) 0%,var(--navy2) 40%,var(--orange) 100%);
    background-size:200% 100%;background-position:0% 0%;
    border:none;border-radius:12px;color:#fff;
    font-size:14px;font-weight:800;letter-spacing:.4px;
    cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;
    transition:all .4s cubic-bezier(.34,1.56,.64,1);
    box-shadow:0 6px 24px rgba(27,43,107,.28);
    font-family:'Nunito',sans-serif;
    position:relative;overflow:hidden;
    text-transform:uppercase;
}
.lp-btn::before{
    content:'';position:absolute;top:0;left:-120%;width:60%;height:100%;
    background:linear-gradient(120deg,transparent,rgba(255,255,255,.3),transparent);
    transform:skewX(-20deg);transition:left .6s ease;
}
.lp-btn:hover{
    background-position:100% 0%;
    transform:translateY(-3px) scale(1.01);
    box-shadow:0 14px 36px rgba(244,121,32,.38);
    letter-spacing:.6px;
}
.lp-btn:hover::before{left:150%;}
.lp-btn:active{transform:translateY(0) scale(.99);}
.lp-btn:disabled{opacity:.7;cursor:not-allowed;transform:none;}
.lp-btn-icon{
    width:30px;height:30px;border-radius:9px;
    background:rgba(255,255,255,.2);
    display:flex;align-items:center;justify-content:center;
    font-size:14px;flex-shrink:0;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
}
.lp-btn .btn-ripple{
    position:absolute;border-radius:50%;
    background:rgba(255,255,255,.4);
    transform:scale(0);animation:rippleBrand .6s linear;pointer-events:none;
}
@keyframes rippleBrand{to{transform:scale(4);opacity:0;}}

/* Login link */
.lp-login-link{
    text-align:center;margin-top:8px;
    font-size:12px;color:var(--gray);font-weight:600;
    padding:8px;
    border-radius:10px;
    background:rgba(27,43,107,.03);
    border:1px solid rgba(27,43,107,.07);
}
.lp-login-link a{color:var(--navy);font-weight:800;text-decoration:none;transition:color .2s;}
.lp-login-link a:hover{color:var(--orange);}

/* Footer */
.lp-rfooter{position:absolute;bottom:10px;left:0;right:0;text-align:center;font-size:10.5px;color:#CBD5E1;font-weight:600;}

/* 3D card */
.reg-3d-wrap{perspective:1400px;width:100%;}
.reg-card-3d{
    width:100%;transform-style:preserve-3d;
    animation:card3dBrand .8s cubic-bezier(.23,1.01,.32,1) both;
    transition:transform .12s linear;
}
@keyframes card3dBrand{
    0%{opacity:0;transform:rotateY(-18deg) rotateX(10deg) translateY(50px) scale(.9);}
    100%{opacity:1;transform:rotateY(0) rotateX(0) translateY(0) scale(1);}
}

/* Responsive */
@media(max-width:900px){
    .lp-left{display:none;}
    .lp-right{width:100%;padding:32px 24px;}
    .lp-right.lp-right--wide{width:100%;padding:28px 20px;}
}
@media(max-width:480px){
    .lp-right{padding:24px 16px;}
}