/* Robelume v13 · interactive Before/After Lab (scoped to new section). */
.transformation-section{position:relative;isolation:isolate;overflow:hidden;padding:clamp(90px,9vw,154px) 0 clamp(100px,9vw,140px);background:radial-gradient(ellipse 65% 48% at 85% 4%,rgba(116,51,249,.16),transparent 74%),radial-gradient(ellipse 55% 60% at 0% 85%,rgba(17,122,244,.17),transparent 72%),#070b1d!important}
.transformation-section::before{content:"";position:absolute;inset:0;opacity:.34;pointer-events:none;background-image:radial-gradient(circle,rgba(170,209,255,.84) 1px,transparent 1.6px),radial-gradient(circle,rgba(156,116,255,.75) 1px,transparent 1.6px);background-size:181px 177px,287px 299px;background-position:33px 40px,94px 142px;mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent)}
.transformation-section>.container{position:relative;z-index:2}
.trans-halo{position:absolute;pointer-events:none;border:1px solid rgba(101,130,255,.25);box-shadow:0 0 24px rgba(63,93,251,.14);border-radius:50%;transform:rotate(-24deg)}
.trans-halo-one{height:390px;width:1000px;top:15px;right:-450px}.trans-halo-two{height:320px;width:830px;bottom:-140px;left:-400px}
.trans-lightning{position:absolute;right:7%;top:7%;font:900 116px Georgia,serif;color:#a470ff;text-shadow:0 0 26px rgba(142,75,255,.85),0 0 70px rgba(69,92,255,.42);transform:rotate(11deg);opacity:.54;pointer-events:none}
.trans-heading{margin-bottom:42px}.trans-heading .section-tag{color:#99b8ff}.trans-heading-row{display:flex;align-items:end;justify-content:space-between;gap:35px;margin-top:20px}
.trans-heading h2{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:-.065em;line-height:1.02;font-size:clamp(46px,5.6vw,86px);margin:0}
.trans-heading-aside{max-width:360px;padding-bottom:9px}.trans-heading-aside p{font-size:15px;line-height:1.8;color:#bac8e3;margin:0 0 18px}.trans-hint{display:inline-block;color:#90aeec;font:700 10px 'DM Sans',sans-serif;letter-spacing:1.75px;text-transform:uppercase}
.trans-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.trans-card{min-width:0;position:relative;overflow:hidden;display:flex;flex-direction:column;border-radius:21px;border:1px solid rgba(113,147,255,.31);background:linear-gradient(145deg,rgba(23,29,67,.96),rgba(8,14,35,.99));box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 15px 52px rgba(0,0,0,.34),0 0 26px rgba(82,94,255,.07);transition:border-color .25s,box-shadow .25s}
.trans-card:hover,.trans-card:focus-within{border-color:rgba(149,167,255,.73);box-shadow:0 22px 68px rgba(13,20,83,.53),0 0 31px rgba(86,88,255,.18)}
.trans-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,#6b97ff 28%,#b56cff 68%,transparent);opacity:.7;box-shadow:0 0 18px #5986ff90;pointer-events:none}
.trans-card-head{padding:28px 25px 12px}.trans-num{font:700 10px 'DM Sans',sans-serif;letter-spacing:2px;color:#9cb9f7}.trans-bolt{float:right;color:#a47bff;text-shadow:0 0 17px #a06aff;font-size:27px;line-height:1}.trans-card-head h3{font-family:'Space Grotesk',sans-serif;font-size:clamp(23px,2.2vw,30px);line-height:1.13;letter-spacing:-.04em;color:#f5f7ff;margin:17px 0 10px}.trans-card-head p{font-size:13px;line-height:1.7;color:#a9b8dc;min-height:44px;margin:0}
.trans-switch{display:flex;gap:4px;margin:10px 25px 17px;padding:5px;border:1px solid rgba(124,151,244,.2);border-radius:12px;background:rgba(4,11,30,.8)}
.trans-toggle{flex:1;cursor:pointer;border:0;background:transparent;color:#b0bad2;font-size:12px;font-weight:800;letter-spacing:.35px;min-height:38px;border-radius:8px;transition:background .23s,box-shadow .23s,color .23s}
.trans-toggle.is-active{background:linear-gradient(120deg,#2768ed,#7746ed);color:#fff;box-shadow:0 0 22px rgba(91,107,252,.42)}.trans-toggle:hover:not(.is-active){color:white;background:rgba(102,124,223,.17)}.trans-toggle:focus-visible{outline:2px solid #b2d7ff;outline-offset:2px}
.trans-stage{position:relative;flex:0 0 auto;height:320px;margin:0 18px;border:1px solid rgba(139,154,227,.32);border-radius:14px;overflow:hidden;background:#0c1325;box-shadow:inset 0 0 30px rgba(0,0,0,.5)}
.trans-pane{position:absolute;inset:0;visibility:hidden;opacity:0;pointer-events:none;transform:translateY(10px) scale(.987);transition:opacity .38s ease,transform .38s ease,visibility .38s;overflow:hidden}
.trans-card[data-state="before"] .trans-pane-before,.trans-card[data-state="after"] .trans-pane-after{visibility:visible;opacity:1;pointer-events:auto;transform:translateY(0) scale(1)}
.demo-browser{height:34px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 12px;background:#151f37;border-bottom:1px solid #ffffff1a;color:#8d9ab7;font:700 9px 'DM Sans',sans-serif;letter-spacing:.25px}.demo-dots{letter-spacing:3px;color:#4a79bc;font-size:8px}
.demo-copy-content,.demo-form-content,.demo-trust-content{height:calc(100% - 34px);padding:18px 19px;overflow:hidden}.is-rough{background:linear-gradient(135deg,#fcfcfd,#e4e8ef);color:#292b34}.is-refined{background:radial-gradient(ellipse at 92% 4%,#1d4784,transparent 68%),linear-gradient(147deg,#081829,#061328 95%);color:#f4f7ff}
.demo-copy-logo{font:800 10px 'Space Grotesk',sans-serif;letter-spacing:1.5px}.demo-copy-logo span{color:#77d9ff}.demo-copy-label,.demo-tiny-label{display:block;font-size:9px;font-weight:800;letter-spacing:1.6px;margin-top:28px;opacity:.6}.demo-copy-content h4{font-family:'Space Grotesk',sans-serif;font-size:32px;line-height:1.05;letter-spacing:-1.3px;margin:12px 0}.demo-copy-content h4 em{font-style:normal;color:#8abfff}.demo-copy-content p{font-size:11px;line-height:1.55;max-width:290px;margin:0 0 16px}.demo-copy-content.is-rough p{color:#7b808e}.demo-copy-content.is-refined p{color:#adc5e2}.demo-generic-button,.demo-success-button{display:inline-flex;align-items:center;justify-content:space-between;gap:15px;border-radius:5px;padding:10px 14px;font:800 9px 'DM Sans',sans-serif;letter-spacing:.7px}.demo-generic-button{background:#ced4dd;color:#697384}.demo-success-button{background:linear-gradient(110deg,#357dff,#735af5);color:white;box-shadow:0 0 18px #387fff57}
.demo-form-content .demo-tiny-label,.demo-trust-content .demo-tiny-label{margin-top:2px}.demo-form-content h4,.demo-trust-content h4{font:700 23px/1.13 'Space Grotesk',sans-serif;letter-spacing:-.6px;margin:8px 0 7px}.demo-form-content p{font-size:10px;line-height:1.5;margin:0 0 11px;color:#687789}.demo-form-content.is-refined p{color:#b1c4e1}.demo-input-rough,.demo-textarea-rough{height:31px;border:1px solid #cbd1dd;background:#fff;border-radius:3px;color:#9298a7;margin-bottom:7px;display:flex;align-items:center;padding:0 10px;font-size:10px}.demo-textarea-rough{height:56px;align-items:start;padding-top:9px}.demo-form-submit-rough,.demo-form-submit-good{display:inline-flex;border-radius:4px;font-size:10px;font-weight:800;justify-content:space-between;gap:20px;padding:9px 13px}.demo-form-submit-rough{color:#fff;background:#767f8d}.demo-form-submit-good{margin-top:11px;color:#fff;background:linear-gradient(100deg,#327afc,#6653ff);box-shadow:0 0 18px #367cf840}
.demo-field-label,.demo-form-mini-grid span{font:800 8px 'DM Sans',sans-serif;letter-spacing:.8px;color:#9bb5e6;display:block;margin:7px 0 5px}.demo-input-good{background:#12243c;color:#dce9ff;border:1px solid #3e668d;border-radius:5px;padding:9px 10px;font-size:10px;min-width:0}.demo-input-good>span{float:right}.demo-form-mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.demo-form-mini-grid .demo-input-good{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.demo-trust-content .demo-tiny-label{color:#596179}.demo-trust-content.is-refined .demo-tiny-label{color:#9dc4fa}.demo-trust-content h4{margin-bottom:14px}.demo-testimonial-rough{background:white;border:1px solid #d3d8e2;border-radius:4px;padding:11px;margin-bottom:9px}.demo-testimonial-rough .demo-stars{color:#dfb54d;font-size:10px;letter-spacing:2px}.demo-testimonial-rough p{font-size:10px;line-height:1.5;color:#5e6474;margin:5px 0}.demo-testimonial-rough div{font-size:8px;font-weight:800;color:#89909e}.demo-testimonial-rough.second{opacity:.66}.demo-trust-item{display:flex;align-items:center;gap:11px;border-top:1px solid #6c8bad42;padding:9px 0}.demo-trust-item>span{font:800 11px 'Space Grotesk',sans-serif;color:#82c1ff}.demo-trust-item>div{flex:1;min-width:0}.demo-trust-item strong{display:block;font-size:11px;color:#eef6ff}.demo-trust-item small{font-size:9px;color:#a7bed8;line-height:1.3}.demo-trust-item>b{color:#8ab6fd}.demo-trust-cta{display:inline-flex;margin-top:10px;padding:8px 12px;background:#2875e8;color:white;border-radius:4px;box-shadow:0 0 17px #317afa54;font:800 8px 'DM Sans',sans-serif;letter-spacing:.7px}
.trans-card-foot{min-height:65px;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:15px 23px 21px;font-size:10px;color:#8fa8c8}.trans-card-foot .trans-state-label{font-size:9px;font-weight:800;letter-spacing:1.2px;color:#b5bed2}.trans-card[data-state="after"] .trans-state-label{color:#84e5da}
.trans-end{margin-top:30px;display:flex;align-items:center;justify-content:space-between;gap:28px;border:1px solid rgba(102,143,232,.25);border-radius:17px;padding:21px 24px;background:linear-gradient(100deg,rgba(17,31,68,.78),rgba(28,17,63,.56))}.trans-disclaimer{display:flex;align-items:start;gap:15px;max-width:850px}.trans-disclaimer>span{color:#a2bbff;font-size:26px;text-shadow:0 0 14px #576cfb;flex:0 0 auto}.trans-disclaimer p{font-size:12px;line-height:1.7;color:#a3b1ce;margin:0}.trans-disclaimer strong{color:#eaf2ff}.trans-cta{flex-shrink:0;white-space:nowrap}
@media (max-width:1190px){.trans-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.trans-card:last-child{grid-column:1/-1;max-width:560px;margin:auto;width:100%}.trans-stage{height:335px}.trans-heading-aside{max-width:330px}}
@media (max-width:760px){.transformation-section{padding:85px 0}.trans-grid{grid-template-columns:1fr;gap:18px}.trans-card:last-child{grid-column:auto;max-width:none}.trans-heading-row{display:block}.trans-heading h2{font-size:clamp(40px,10vw,62px)}.trans-heading-aside{max-width:570px;margin-top:20px}.trans-end{display:block}.trans-cta{margin-top:24px;display:inline-flex}.trans-lightning{font-size:76px;right:4%}}
@media (max-width:420px){.trans-card-head{padding:22px 18px 10px}.trans-switch{margin:10px 18px 15px}.trans-stage{margin:0 12px;height:316px}.demo-copy-content,.demo-form-content,.demo-trust-content{padding:15px 15px}.demo-copy-content h4{font-size:28px}.trans-card-foot{padding:14px 16px 18px}.trans-end{padding:19px}.trans-cta{font-size:11px;white-space:normal}}
@media (prefers-reduced-motion:reduce){.trans-pane{transition:none!important;transform:none!important}.trans-card,.trans-toggle{transition:none!important}}