body{
    background:#f7f5f0;
    color:#0b2344
}

.demo-page-hero{
    background:linear-gradient(135deg,#071a32 0%,#0d2c4b 58%,#102f4f 100%);
    color:#fff;
    padding:110px 0 90px;
    overflow:hidden
}

.demo-hero-grid,
.demo-form-shell{
    width:min(1180px,calc(100% - 48px));
    margin:auto
}

.demo-hero-grid{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:70px;
    align-items:center
}

.demo-kicker{
    font-size:11px;
    font-weight:800;
    letter-spacing:.2em;
    color:#f17931
}

.demo-page-hero h1{
    font-size:clamp(52px,6vw,88px);
    line-height:.94;
    margin:18px 0 25px
}

.demo-page-hero h1 em{
    color:#56cdb2;
    font-style:normal
}

.demo-page-hero p{
    max-width:650px;
    color:#c9d5e1;
    font-size:18px;
    line-height:1.75
}

.demo-points{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:30px
}

.demo-points span{
    border:1px solid rgba(255,255,255,.2);
    padding:10px 13px;
    font-size:10px;
    letter-spacing:.08em
}

.demo-visual{
    height:350px;
    border:1px solid rgba(255,255,255,.18);
    position:relative;
    overflow:hidden;
    background:radial-gradient(circle at center,rgba(42,211,190,.12),transparent 52%)
}

.scan-grid{
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
    background-size:35px 35px;
    transform:perspective(500px) rotateX(55deg) scale(1.4);
    transform-origin:center bottom;
    animation:gridMove 7s linear infinite
}

.scan-line{
    position:absolute;
    left:0;
    right:0;
    height:2px;
    top:48%;
    background:linear-gradient(90deg,transparent,#f17931,#4dd19b,transparent);
    box-shadow:0 0 20px #4dd19b;
    animation:scan 3.5s ease-in-out infinite
}

.scan-dot{
    position:absolute;
    width:13px;
    height:13px;
    border:2px solid #4dd19b;
    border-radius:50%;
    box-shadow:0 0 20px rgba(77,209,155,.8);
    animation:pulse 2.2s infinite
}

.d1{
    left:30%;
    top:36%
}

.d2{
    left:52%;
    top:51%;
    animation-delay:.5s
}

.d3{
    left:68%;
    top:67%;
    animation-delay:1s
}

.scan-label{
    position:absolute;
    bottom:18px;
    left:20px;
    font-size:9px;
    letter-spacing:.18em;
    color:#9fb2c5
}

.demo-form-section{
    padding:90px 0 110px
}

.demo-form-shell{
    display:grid;
    grid-template-columns:.72fr 1.28fr;
    gap:55px;
    align-items:start
}

.demo-form-intro h2{
    font-size:clamp(38px,4vw,60px);
    line-height:1;
    margin:15px 0 22px
}

.demo-form-intro p{
    font-size:16px;
    line-height:1.8;
    color:#5e6d80
}

.demo-contact-note{
    margin-top:30px;
    padding:20px;
    border-left:3px solid #f17931;
    background:#fff;
    border:1px solid #e2e5e7;
    border-left-width:3px;
    line-height:1.8
}

.request-demo-form{
    background:#fff;
    border:1px solid #dfe4e8;
    padding:32px;
    box-shadow:0 20px 55px rgba(12,35,66,.09);
    display:grid;
    gap:17px
}

.request-demo-form label{
    display:grid;
    gap:7px;
    font-size:11px;
    font-weight:800;
    letter-spacing:.04em;
    color:#33455a
}

.request-demo-form input,
.request-demo-form select,
.request-demo-form textarea{
    font:inherit;
    font-weight:500;
    letter-spacing:0;
    border:1px solid #cbd4dc;
    background:#fbfcfd;
    padding:13px 14px;
    color:#172c45;
    outline:none;
    min-width:0;
    box-sizing:border-box;
    border-radius:5px
}

.request-demo-form input:focus,
.request-demo-form select:focus,
.request-demo-form textarea:focus{
    border-color:#f17931;
    box-shadow:0 0 0 3px rgba(241,121,49,.1)
}

.two-fields{
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:15px
}

/* =========================================================
   PREPARE DEMO REQUEST BUTTON
   Normal: Orange
   Hover: Green
   ========================================================= */

.request-demo-form button{
    border:0;
    background:#f17931;
    color:#fff;
    padding:15px 20px;
    font-weight:800;
    letter-spacing:.06em;
    cursor:pointer;
    text-decoration:none;
    text-align:center;
    transition:
        background-color .25s ease,
        color .25s ease,
        border-color .25s ease,
        transform .25s ease,
        box-shadow .25s ease
}

.request-demo-form button[type="submit"]:hover{
    background:#18b77a;
    border-color:#18b77a;
    color:#fff;
    transform:translateY(-2px);
    box-shadow:0 10px 24px rgba(24,183,122,.25)
}

.request-demo-form button[type="submit"]:hover span{
    color:#fff
}

.request-demo-form button[type="submit"]:active{
    transform:translateY(0);
    box-shadow:0 5px 12px rgba(24,183,122,.18)
}

/* Success page button remains orange */
.success-button{
    border:0;
    background:#f17931;
    color:#fff;
    padding:15px 20px;
    font-weight:800;
    letter-spacing:.06em;
    cursor:pointer;
    text-decoration:none;
    text-align:center
}

.form-note{
    font-size:11px!important;
    line-height:1.6!important;
    color:#718093
}

.consent{
    display:flex!important;
    grid-template-columns:none!important;
    flex-direction:row;
    align-items:flex-start;
    gap:10px
}

.consent input{
    width:16px!important;
    margin-top:2px
}

.success-page{
    min-height:calc(100vh - 120px);
    display:grid;
    place-items:center;
    padding:70px 24px;
    background:radial-gradient(circle at 50% 40%,#fff 0,#f7f5f0 55%,#edf0f0 100%)
}

.success-card{
    max-width:650px;
    text-align:center;
    background:#fff;
    border:1px solid #dfe4e8;
    padding:55px;
    box-shadow:0 25px 70px rgba(12,35,66,.1)
}

.success-mark{
    width:70px;
    height:70px;
    margin:0 auto 25px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#e7f8ef;
    color:#15945a;
    font-size:36px;
    font-weight:800
}

.success-card h1{
    font-size:48px;
    line-height:1;
    margin:15px 0
}

.success-card p{
    color:#607084;
    line-height:1.8;
    margin-bottom:30px
}

@keyframes gridMove{
    from{
        background-position:0 0,0 0
    }
    to{
        background-position:0 35px,35px 0
    }
}

@keyframes scan{
    0%,100%{
        top:20%;
        opacity:.5
    }
    50%{
        top:75%;
        opacity:1
    }
}

@keyframes pulse{
    0%,100%{
        transform:scale(.8);
        opacity:.6
    }
    50%{
        transform:scale(1.5);
        opacity:1
    }
}

@media(max-width:850px){

    .demo-hero-grid,
    .demo-form-shell{
        grid-template-columns:1fr;
        gap:35px
    }

    .demo-visual{
        height:270px
    }

    .demo-page-hero{
        padding:80px 0
    }

    .demo-form-section{
        padding:60px 0 80px
    }
}

@media(max-width:560px){

    .demo-hero-grid,
    .demo-form-shell{
        width:calc(100% - 28px)
    }

    .two-fields{
        grid-template-columns:1fr
    }

    .request-demo-form{
        padding:20px
    }

    .success-card{
        padding:35px 22px
    }

    .success-card h1{
        font-size:38px
    }
}