:root{
    --ink:#102e46;
    --orange:#23afe0;
    --orange-dark:#b63e19;
    --cream:#f5f7f8;
    --muted:#60726b;
    --line:#dce2da;
    --white:#fff;
    --ease:cubic-bezier(.22,1,.36,1)
}
*{
    box-sizing:border-box
}
html{
    scroll-behavior:smooth;
    scroll-padding-top:100px
}
body{
    margin:0;
    background:var(--cream);
    color:var(--ink);
    font-family:Arial,Helvetica,sans-serif;
    -webkit-font-smoothing:antialiased;
    line-height:1.55
}
a{
    color:inherit;
    text-decoration:none
}
button,input,select{
    font:inherit
}
button,a,input,select,summary{
    -webkit-tap-highlight-color:transparent
}
button{
    cursor:pointer
}
img{
    max-width:100%;
    display:block
}
button{
    color:inherit
}
::selection{
    background:#ffd1b4;
    color:var(--ink)
}
:focus-visible{
    outline:3px solid #bb481f;
    outline-offset:5px
}
a,button{
    touch-action:manipulation
}
.wrap{
    max-width:1240px;
    margin:auto;
    padding-inline:36px
}
.skip{
    position:fixed;
    left:16px;
    top:-100px;
    z-index:100;
    background:var(--ink);
    color:white;
    padding:12px
}
.skip:focus{
    top:10px
}
.sr-only{
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0,0,0,0)
}
.reading-progress{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:3px;
    background:var(--orange);
    transform:scaleX(0);
    transform-origin:left;
    z-index:90
}
.header{
    position:sticky;
    top:0;
    z-index:40;
    background:#f5f7f8ed;
    border-bottom:1px solid #dfe4db;
    backdrop-filter:blur(18px)
}
.nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:88px;
    gap:30px
}
.brand{
    flex:none
}
.brand img{
    width:165px;
    height:auto
}
.nav nav{
    display:flex;
    gap:30px;
    font-size:13px;
    font-weight:600
}
.nav nav a{
    position:relative
}
.nav nav a:after{
    content:"";
    position:absolute;
    bottom:-6px;
    left:0;
    width:100%;
    height:1px;
    background:var(--ink);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .3s
}
.nav nav a:hover:after{
    transform:scaleX(1)
}
.btn{
    display:inline-flex;
    justify-content:center;
    align-items:center;
    gap:30px;
    min-height:56px;
    border-radius:7px;
    padding:16px 23px;
    font-weight:600;
    font-size:14px;
    background:var(--ink);
    color:white;
    border:1px solid var(--ink);
    transition:transform .25s,background .25s,box-shadow .25s
}
.btn:hover{
    transform:translateY(-3px);
    background:#254d40;
    box-shadow:0 8px 20px #102e4618
}
.btn:active{
    transform:translateY(0)
}
.btn:disabled{
    opacity:.65;
    cursor:wait;
    transform:none
}
.btn span{
    font-size:20px;
    font-weight:400
}
.btn-small{
    min-height:45px;
    padding:9px 17px;
    font-size:12px;
    gap:24px
}
.text-link{
    font-weight:600;
    font-size:16px;
    display:inline-flex;
    align-items:center;
    gap:13px
}
.text-link:hover{
    color:var(--orange-dark)
}
.eyebrow{
    font-size:14px;
    font-weight:700;
    letter-spacing:1.6px;
    display:block;
    line-height:1.7
}
.status-dot{
    display:inline-block;
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--orange);
    margin-right:7px;
    box-shadow:0 0 0 4px #23afe017
}
.hero{
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:35px;
    padding-top:75px;
    padding-bottom:85px;
    min-height:760px
}
.hero h1{
    font-size:clamp(52px,5.3vw,76px);
    font-weight:500;
    line-height:1.045;
    letter-spacing:-3.6px;
    margin:26px 0 22px
}
.serif{
    font-family:Georgia,'Times New Roman',serif;
    font-style:italic;
    font-weight:400
}
.hero h1 .serif{
    color:var(--orange-dark)
}
.hero-description{
    font-size:19px;
    line-height:1.5;
    margin:0 0 15px;
    letter-spacing:-.2px
}
.hero-detail{
    font-size:16px;
    color:var(--muted);
    max-width:425px;
    margin:0 0 27px
}
.hero-actions{
    display:flex;
    gap:24px;
    align-items:center
}
.play{
    display:inline-grid;
    place-items:center;
    height:28px;
    width:28px;
    font-size:10px;
    border-radius:50%;
    border:1px solid #a7b7ad;
    padding-left:2px
}
.hero-assurance{
    display:flex;
    gap:23px;
    margin-top:18px;
    font-size:16px;
    color:var(--muted)
}
.hero-visual{
    position:relative;
    min-height:560px;
    perspective:1200px
}
.visual-orbit{
    position:absolute;
    inset:10px -15px 30px;
    background:#e2e7d9;
    border-radius:50% 47% 42% 48%;
    transform:rotate(-10deg);
    animation:orbit 18s ease-in-out infinite alternate
}
.visual-orbit:after{
    content:"";
    position:absolute;
    inset:25px;
    border:1px dashed #b6c4ae;
    border-radius:50%
}
.dashboard{
    background:white;
    border:1px solid #dce3d9;
    border-radius:15px;
    position:absolute;
    top:28px;
    left:25px;
    right:8px;
    box-shadow:0 24px 70px #284a3620;
    transform:rotate(-4deg);
    overflow:hidden;
    animation:dashboard-enter 1.25s var(--ease) both
}
.dash-top{
    display:flex;
    align-items:center;
    gap:14px;
    padding:13px 18px;
    border-bottom:1px solid #eef0eb;
    font-size:10px;
    font-weight:600
}
.dash-mark{
    font-size:19px;
    font-weight:700;
    letter-spacing:-3px;
    background:var(--ink);
    color:#fff;
    width:28px;
    height:28px;
    border-radius:7px;
    padding:0 5px
}
.dash-mark span{
    color:var(--orange)
}
.dash-dots{
    margin-left:auto;
    letter-spacing:2px;
    color:#83968c
}
.dash-body{
    padding:22px 24px 0
}
.dash-greeting{
    font-size:7px;
    color:#718377;
    letter-spacing:1.6px
}
.dash-title{
    font-size:25px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin:5px 0 24px;
    font-weight:600;
    letter-spacing:-.7px
}
.live-label{
    font-size:12px;
    background:#eef5eb;
    border-radius:15px;
    padding:5px 8px;
    letter-spacing:0;
    font-weight:400
}
.live-label i{
    display:inline-block;
    background:#6c9c65;
    width:4px;
    height:4px;
    margin-right:4px;
    border-radius:50%
}
.budget-head,.dash-meta{
    display:flex;
    justify-content:space-between;
    gap:8px;
    font-size:8px;
    color:#75867b
}
.budget-number{
    font-size:33px;
    letter-spacing:-1px;
    font-weight:500;
    margin:5px 0 13px
}
.budget-number span{
    font-size:9px;
    display:block;
    color:#728277;
    letter-spacing:0;
    margin-top:1px
}
.budget-track{
    height:7px;
    background:#eef0e8;
    border-radius:20px;
    overflow:hidden
}
.budget-track span{
    width:71%;
    display:block;
    height:100%;
    background:#95b580;
    border-radius:20px;
    animation:budget-fill 1.7s var(--ease) both
}
.dash-meta{
    font-size:7px;
    margin-top:8px
}
.dash-list-label{
    font-size:7px;
    letter-spacing:1.1px;
    color:#849386;
    margin:24px 0 8px
}
.transaction{
    display:flex;
    align-items:center;
    gap:11px;
    padding:13px 0;
    border-top:1px solid #edf0e9;
    font-size:10px
}
.transaction-icon{
    width:29px;
    height:29px;
    border-radius:9px;
    display:grid;
    place-items:center;
    font-size:14px
}
.orange{
    background:#ffeddc;
    color:#be673c
}
.green{
    background:#e3ecdd;
    color:#597a4b
}
.transaction small{
    display:block;
    font-size:7px;
    font-weight:400;
    color:#87938a;
    margin-top:2px
}
.transaction strong{
    font-size:10px;
    margin-left:auto;
    text-align:right
}
.transaction strong .good{
    color:#68875d
}
.dash-footer{
    border-top:1px solid #edf0e9;
    padding:13px 0;
    font-size:7px;
    color:#7f8d80;
    display:flex;
    gap:7px;
    align-items:center
}
.tiny-shield{
    color:#6c8b5d
}
.payment-card{
    position:absolute;
    right:-17px;
    bottom:44px;
    width:273px;
    height:166px;
    background:linear-gradient(125deg,#f78c5d,#f1673d);
    border:1px solid #ffb290;
    border-radius:13px;
    color:#482514;
    padding:19px;
    box-shadow:0 20px 35px #8b42242b;
    transform:rotate(10deg);
    animation:card-float 6s ease-in-out infinite
}
.payment-card:before{
    content:"";
    position:absolute;
    width:210px;
    height:210px;
    right:-55px;
    top:-90px;
    border:1px solid #ffcfaa6b;
    border-radius:50%
}
.card-brand{
    display:block;
    font-size:13px;
    font-weight:700
}
.chip{
    display:block;
    margin-top:15px;
    width:27px;
    height:21px;
    border:1px solid #ae6c36;
    background:#eec287;
    border-radius:5px;
    position:relative
}
.chip:after{
    content:"";
    position:absolute;
    inset:6px -1px;
    border-top:1px solid #ad793a;
    border-bottom:1px solid #ad793a
}
.card-label{
    font-size:6px;
    letter-spacing:1.2px;
    display:block;
    margin-top:13px
}
.card-bottom{
    display:flex;
    justify-content:space-between;
    font-size:10px;
    align-items:center
}
.card-circles{
    display:flex
}
.card-circles i{
    display:block;
    width:24px;
    height:24px;
    border-radius:50%;
    background:#d85827aa
}
.card-circles i+i{
    background:#ffbf6bc9;
    margin-left:-8px
}
.receipt-toast{
    position:absolute;
    left:-12px;
    bottom:31px;
    display:flex;
    align-items:center;
    gap:10px;
    border:1px solid #dfe6d6;
    background:white;
    padding:15px 18px;
    border-radius:9px;
    box-shadow:0 14px 35px #29432b0b;
    font-size:11px;
    animation:toast-enter 1.6s var(--ease) both
}
.receipt-toast>span{
    display:grid;
    place-items:center;
    width:26px;
    height:26px;
    border-radius:50%;
    background:#e8efdf;
    color:#548543
}
.receipt-toast small{
    display:block;
    font-size:8px;
    color:var(--muted)
}
.visual-caption{
    position:absolute;
    bottom:-25px;
    left:0;
    width:100%;
    text-align:center;
    font-size:8px;
    color:#7a8b7f
}
.trust-strip{
    border-block:1px solid var(--line);
    background:#efefe6
}
.trust-strip>.wrap{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    padding-block:29px
}
.trust-strip p{
    font-size:16px;
    line-height:1.5;
    margin:0;
    color:#79867b
}
.trust-strip strong{
    color:var(--ink);
    font-weight:500
}
.trust-strip .wrap>div{
    display:flex;
    align-items:center;
    gap:12px;
    font-size:14px;
    font-weight:600
}
.sector-icon{
    font-size:25px;
    color:#7c8d77;
    font-weight:400
}
.section{
    padding-block:105px
}
h2{
    font-size:clamp(34px,3.8vw,49px);
    line-height:1.15;
    letter-spacing:-1.8px;
    font-weight:500;
    margin:18px 0 24px
}
h3{
    font-size:22px;
    font-weight:500;
    line-height:1.3;
    letter-spacing:-.6px;
    margin:19px 0 12px
}
.section-heading{
    display:flex;
    justify-content:space-between;
    gap:50px;
    align-items:end;
    margin-bottom:40px
}
.section-heading h2{
    margin-bottom:0
}
.section-heading>p{
    font-size:16px;
    color:var(--muted);
    max-width:310px;
    line-height:1.8;
    margin-bottom:3px
}
.benefits{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px
}
.benefit{
    background:#eceee4;
    padding:24px 27px 28px;
    border:1px solid #e2e6d8;
    border-radius:10px;
    transition:transform .4s var(--ease)
}
.benefit:hover{
    transform:translateY(-7px)
}
.number{
    font-size:10px;
    color:#7c8c78;
    letter-spacing:1px
}
.benefit p{
    color:var(--muted);
    font-size:16px;
    line-height:1.85;
    margin:0
}
.mini-budget,.mini-receipt,.mini-flow{
    height:160px;
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative
}
.mini-budget{
    flex-direction:column;
    gap:14px
}
.mini-budget>span{
    font-size:13px;
    color:#677a62
}
.mini-budget>div{
    display:flex;
    gap:9px;
    height:48px;
    align-items:end
}
.mini-budget i{
    display:block;
    width:49px;
    height:30px;
    background:#afc095;
    border-radius:6px 6px 2px 2px
}
.mini-budget i:nth-child(2){
    height:48px;
    background:#7b9a66
}
.mini-budget i:nth-child(3){
    height:40px;
    background:#c4ccad
}
.mini-budget strong{
    font-size:9px;
    font-weight:500
}
.mini-receipt>div{
    background:#fff;
    padding:14px 20px;
    border-radius:4px;
    width:103px;
    font-size:7px;
    transform:rotate(-10deg);
    box-shadow:0 8px 20px #2338260c
}
.mini-receipt span{
    display:block;
    font-size:19px;
    margin-block:7px
}
.mini-receipt i{
    display:block;
    height:3px;
    background:#d8e0ce;
    margin-top:5px
}
.mini-receipt i:last-child{
    width:60%
}
.mini-receipt b{
    border-radius:50%;
    width:30px;
    height:30px;
    display:grid;
    place-items:center;
    background:var(--orange);
    margin-left:-8px;
    margin-top:50px;
    font-size:13px
}
.mini-flow>span{
    border:1px solid #c0cdb1;
    border-radius:12px;
    display:grid;
    place-items:center;
    width:51px;
    height:51px;
    font-size:21px;
    background:#f9faf3
}
.mini-flow>i{
    width:25px;
    border-top:1px dashed #94ab83
}
.mini-flow>span:nth-of-type(2){
    background:#d7e2c8;
    animation:pulse-border 4s ease-in-out infinite
}
.workflow-section{
    padding-block:90px;
    background:#fff
}
.workflow-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:center
}
.section-intro{
    color:var(--muted);
    font-size:14px
}
.steps{
    margin-top:30px
}
.step{
    width:100%;
    display:flex;
    align-items:center;
    gap:20px;
    border:0;
    border-bottom:1px solid #e5e9de;
    background:transparent;
    text-align:left;
    padding:20px 14px;
    transition:background .3s,border-radius .3s
}
.step>span{
    font-size:16px;
    color:#8b9b86
}
.step div{
    font-weight:600;
    font-size:16px
}
.step small{
    display:block;
    color:#7b8c75;
    font-size:14px;
    font-weight:400;
    margin-top:4px
}
.step>b{
    margin-left:auto;
    opacity:0;
    font-size:23px;
    font-weight:400;
    transition:opacity .3s
}
.step.active{
    background:#eef1e5;
    border-radius:7px;
    border-bottom-color:transparent
}
.step.active>b{
    opacity:1
}
.workflow-panel{
    background:#f3f4ec;
    border:1px solid #e1e7d6;
    border-radius:12px;
    padding:26px 28px;
    overflow:hidden
}
.panel-head{
    display:flex;
    gap:14px;
    align-items:center;
    font-size:13px;
    letter-spacing:1px;
    color:#76876d
}
.panel-symbol{
    font-size:21px
}
.workflow-art{
    height:230px;
    position:relative;
    isolation:isolate
}
.connections{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:-1
}
.connections path{
    fill:none;
    stroke:#aec29a;
    stroke-width:1;
    stroke-dasharray:4 5;
    animation:flow-dashes 25s linear infinite
}
.art-center{
    position:absolute;
    left:calc(50% - 27px);
    top:87px;
    width:54px;
    height:54px;
    background:var(--ink);
    color:#fff;
    border-radius:15px;
    display:grid;
    place-items:center;
    font-size:24px;
    box-shadow:0 0 0 12px #e0e7d2,0 0 0 25px #e7ecdca8
}
.art-node{
    position:absolute;
    z-index:1;
    padding:11px 15px;
    background:#fff;
    border:1px solid #e4e9dc;
    border-radius:7px;
    font-size:9px;
    box-shadow:0 5px 15px #29492e08;
    transition:transform .4s var(--ease)
}
.art-node span{
    display:block;
    font-size:15px;
    margin-top:3px;
    font-weight:600
}
.n1{
    top:27px;
    left:6px
}
.n2{
    top:17px;
    right:1px
}
.n3{
    bottom:6px;
    right:30px
}
.workflow-panel[data-active="1"] .art-center{
    background:var(--orange);
    color:var(--ink)
}
.workflow-panel[data-active="2"] .art-node{
    transform:translateY(-5px)
}
.panel-copy{
    border-top:1px solid #dfe5d4;
    margin-top:20px;
    padding-top:23px;
    min-height:145px
}
.panel-copy>span{
    font-size:14px;
    letter-spacing:1.3px;
    color:#7b8e71
}
.panel-copy h3{
    font-size:23px;
    margin:8px 0 10px
}
.panel-copy p{
    font-size:16px;
    color:var(--muted);
    margin:0;
    line-height:1.8
}
.panel-note{
    font-size:12px;
    display:block;
    line-height:1.6;
    color:#7a8973;
    margin-top:18px
}
.advisor-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:100px;
    align-items:center
}
.advisor-photo{
    height:465px;
    position:relative;
    overflow:hidden;
    background:#e6e9dc;
    border-radius:220px 220px 12px 12px;
    isolation:isolate
}
.advisor-photo>img{
    height:100%;
    width:100%;
    object-fit:contain;
    object-position:bottom;
    position:relative;
    z-index:1
}
.advisor-arc{
    position:absolute;
    width:330px;
    height:330px;
    border-radius:50%;
    background:var(--orange);
    bottom:0;
    left:calc(50% - 165px)
}
.advisor-arc:before{
    content:"";
    position:absolute;
    inset:-32px;
    border:1px solid #bdc7ae;
    border-radius:50%
}
.advisor-caption{
    position:absolute;
    bottom:22px;
    left:23px;
    right:23px;
    z-index:2;
    background:#f9fbf2ed;
    backdrop-filter:blur(10px);
    border:1px solid white;
    border-radius:7px;
    padding:15px;
    font-size:10px;
    text-align:center
}
.advisor-copy>p{
    font-size:16px;
    color:var(--muted);
    line-height:1.9
}
.advisor-points{
    margin:25px 0 22px
}
.advisor-points>div{
    display:flex;
    gap:18px;
    align-items:start;
    margin-bottom:18px
}
.advisor-points>div>span{
    font-size:18px;
    color:var(--orange-dark);
    padding-top:2px
}
.advisor-points p{
    font-size:16px;
    color:var(--muted);
    margin:0;
    line-height:1.8
}
.advisor-points strong{
    font-weight:600;
    color:var(--ink)
}
.consultation{
    background:var(--ink);
    color:#f5f5ec;
    padding-block:95px;
    position:relative;
    overflow:hidden
}
.consultation:before{
    content:"";
    position:absolute;
    width:700px;
    height:700px;
    border:1px solid #ffffff0a;
    border-radius:50%;
    left:-270px;
    bottom:-480px;
    box-shadow:0 0 0 65px #ffffff03,0 0 0 130px #ffffff02
}
.consultation-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:95px;
    align-items:center;
    position:relative
}
.consultation .eyebrow{
    color:#a6bba5
}
.consultation h2{
    font-size:48px;
    margin:20px 0 26px
}
.consultation h2 .serif{
    color:#ffb087
}
.consultation-copy>p{
    font-size:16px;
    color:#b7c8b9;
    line-height:1.9
}
.consultation-person{
    display:flex;
    align-items:center;
    gap:15px;
    margin:30px 0 25px
}
.consultation-person img{
    width:58px;
    height:58px;
    border-radius:50%;
    object-fit:cover;
    background:#dbdfd0
}
.consultation-person strong{
    font-weight:500;
    font-size:16px;
    display:block
}
.consultation-person div>span{
    font-size:14px;
    color:#a1b7a6
}
.consultation-list{
    list-style:none;
    padding:0;
    font-size:16px;
    color:#c3d1c2;
    line-height:1.8
}
.consultation-list li{
    padding-left:19px;
    position:relative;
    margin-bottom:11px
}
.consultation-list li:before{
    content:"✓";
    position:absolute;
    left:0;
    color:#d19a75
}
.contact-alternative{
    font-size:16px;
    color:#b5c9b5;
    display:inline-block;
    margin-top:22px;
    border-bottom:1px solid #738d75;
    padding-bottom:5px
}
.form-card{
    background:#fff;
    color:var(--ink);
    border-radius:13px;
    padding:35px 32px;
    min-height:535px;
    box-shadow:0 25px 60px #001e1226
}
.form-progress{
    display:flex;
    align-items:center;
    gap:15px;
    justify-content:space-between
}
.form-progress>span{
    font-size:13px;
    letter-spacing:1.2px;
    color:#6f826d;
    font-weight:600
}
.form-progress>div{
    width:54px;
    height:4px;
    border-radius:3px;
    background:#e2e8db;
    overflow:hidden
}
.form-progress i{
    display:block;
    width:50%;
    height:100%;
    background:var(--orange);
    transition:width .4s
}
.form-card h3{
    font-size:26px;
    line-height:1.2;
    margin-top:24px;
    margin-bottom:9px
}
.form-subtitle{
    font-size:13px;
    color:#798b74;
    margin-top:0;
    margin-bottom:24px
}
fieldset{
    margin:0;
    border:0;
    padding:0;
    min-inline-size:0
}
fieldset[hidden],[hidden]{
    display:none!important
}
label{
    display:block;
    font-size:11px;
    font-weight:600;
    margin-top:15px;
    margin-bottom:7px
}
label>span{
    color:#bd5f3d
}
label small{
    color:#85957e;
    font-size:9px;
    font-weight:400;
    margin-left:5px
}
input,select{
    width:100%;
    height:46px;
    border:1px solid #d6decf;
    border-radius:5px;
    background:#f9faf6;
    color:var(--ink);
    padding:0 12px;
    font-size:12px;
    transition:border .2s,box-shadow .2s
}
input::placeholder{
    color:#97a18f;
    font-size:11px
}
input:focus,select:focus{
    border-color:#7a9a6f;
    box-shadow:0 0 0 3px #b5c6a72b;
    outline:none
}
input[aria-invalid="true"],select[aria-invalid="true"]{
    border-color:#b34225;
    background:#fff8f3
}
.field-hint{
    font-size:13px;
    color:#829279;
    line-height:1.6;
    margin:8px 0 15px
}
.form-card .btn{
    width:100%;
    background:var(--orange);
    border-color:var(--orange);
    color:#202e23;
    font-size:12px;
    min-height:50px;
    padding:13px 14px;
    justify-content:space-between
}
.form-card .btn:hover{
    background:#ff9b6d
}
.form-next{
    margin-top:9px
}
.form-footnote{
    font-size:12px;
    color:#86937e;
    line-height:1.8;
    margin:16px 0 0
}
.form-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px
}
.consent{
    display:flex;
    gap:9px;
    align-items:start;
    font-weight:400;
    margin-top:18px;
    margin-bottom:20px;
    font-size:9px;
    line-height:1.8
}
.consent>input{
    width:15px;
    height:15px;
    flex:none;
    margin:3px 0 0;
    accent-color:var(--ink)
}
.consent>span{
    color:#6c7d65
}
.consent a{
    text-decoration:underline;
    text-underline-offset:2px
}
.honeypot{
    position:absolute;
    left:-10000px;
    width:1px;
    height:1px;
    overflow:hidden
}
.form-back{
    border:none;
    background:transparent;
    font-size:10px;
    padding:12px 0 0;
    color:#6f826b
}
.form-error{
    font-size:11px;
    color:#a5381d;
    line-height:1.6;
    margin:12px 0 0
}
.form-error:empty{
    display:none
}
#form-success{
    padding-top:45px
}
#form-success h3{
    font-size:37px;
    margin-bottom:20px
}
#form-success>p{
    font-size:13px;
    color:var(--muted);
    line-height:1.8
}
.success-icon{
    width:57px;
    height:57px;
    background:#e9f1e0;
    border-radius:50%;
    display:grid;
    place-items:center;
    font-size:25px;
    margin-bottom:25px
}
.faq-section{
    display:grid;
    grid-template-columns:1fr 1.5fr;
    gap:80px
}
.faq-section h2{
    font-size:46px
}
.faq-section>div>p{
    color:var(--muted);
    font-size:16px
}
.faq-list{
    border-top:1px solid var(--line)
}
details{
    border-bottom:1px solid var(--line)
}
summary{
    list-style:none;
    padding:23px 0;
    display:flex;
    gap:22px;
    align-items:center;
    justify-content:space-between;
    font-size:18px;
    font-weight:500;
    cursor:pointer
}
summary::-webkit-details-marker{
    display:none
}
summary span{
    font-size:20px;
    color:#8da080;
    transition:transform .3s
}
details[open] summary span{
    transform:rotate(45deg)
}
details>p{
    font-size:16px;
    line-height:1.9;
    color:var(--muted);
    margin:0 30px 24px 0
}
footer{
    border-top:1px solid var(--line);
    padding-block:35px;
    background:#edeee5
}
.footer-top{
    display:flex;
    gap:40px;
    justify-content:space-between;
    align-items:center
}
.footer-top p{
    color:var(--muted);
    font-size:14px;
    margin-right:auto
}
.footer-bottom{
    display:flex;
    justify-content:space-between;
    gap:30px;
    font-size:13px;
    color:#6d7e67;
    margin-top:34px;
    padding-top:20px
}
.footer-bottom>div{
    display:flex;
    gap:24px
}
.mobile-cta{
    display:none
}
.js .reveal{
    opacity:0;
    transform:translateY(26px);
    transition:opacity .8s var(--ease),transform .8s var(--ease)
}
.js .reveal.visible{
    opacity:1;
    transform:none
}
.benefit:nth-child(2){
    transition-delay:.08s
}
.benefit:nth-child(3){
    transition-delay:.16s
}
@keyframes dashboard-enter{
    from{
        opacity:0;
        transform:translateY(40px) rotate(-2deg)
    }
    to{
        opacity:1;
        transform:translateY(0) rotate(-4deg)
    }
}
@keyframes toast-enter{
    0%,35%{
        opacity:0;
        transform:translateY(25px)
    }
    100%{
        opacity:1;
        transform:none
    }
}
@keyframes budget-fill{
    from{
        width:0
    }
    to{
        width:71%
    }
}
@keyframes card-float{
    0%,100%{
        transform:translateY(0) rotate(10deg)
    }
    50%{
        transform:translateY(-10px) rotate(8deg)
    }
}
@keyframes orbit{
    to{
        transform:rotate(10deg) scale(.97)
    }
}
@keyframes flow-dashes{
    to{
        stroke-dashoffset:-150
    }
}
@keyframes pulse-border{
    50%{
        box-shadow:0 0 0 8px #bdcfaa22
    }
}
 @media(min-width:1000px){
    .hero-copy>*{
        animation:copy-enter .9s var(--ease) both
    }
    .hero-copy h1{
        animation-delay:.08s
    }
    .hero-description{
        animation-delay:.16s
    }
    .hero-detail{
        animation-delay:.22s
    }
    .hero-actions{
        animation-delay:.3s
    }
    .hero-assurance{
        animation-delay:.38s
    }
    @keyframes copy-enter{
        from{
            opacity:0;
            transform:translateY(18px)
        }
        to{
            opacity:1;
            transform:none
        }
    }
}
 @media(max-width:1100px){
    .hero-actions{
        flex-direction:column;
        align-items:start;
        gap:15px
    }
    .hero-visual{
        min-height:510px
    }
    .hero h1{
        font-size:60px
    }
    .dashboard{
        left:12px;
        right:0
    }
    .payment-card{
        width:235px;
        height:150px;
        right:-9px
    }
    .receipt-toast{
        left:-5px;
        font-size:9px;
        bottom:17px;
        padding:13px
    }
    .hero{
        gap:25px
    }
    .workflow-grid,.advisor-grid,.consultation-grid{
        gap:50px
    }
    .trust-strip .wrap{
        gap:20px
    }
    .trust-strip .wrap>div{
        font-size:10px;
        gap:7px
    }
    .nav nav{
        gap:22px
    }
    .consultation h2{
        font-size:42px
    }
    .benefit{
        padding-inline:21px
    }
}
 @media(max-width:800px){
    .wrap{
        padding-inline:24px
    }
    .nav{
        min-height:76px;
        gap:18px
    }
    .nav nav{
        display:none
    }
    .hero{
        padding-top:50px;
        grid-template-columns:1fr;
        gap:24px;
        padding-bottom:55px;
        min-height:0
    }
    .hero-copy{
        max-width:570px
    }
    .hero h1{
        font-size:clamp(53px,9vw,76px);
        letter-spacing:-3px
    }
    .hero-actions{
        flex-direction:row;
        align-items:center;
        gap:25px
    }
    .hero-detail{
        max-width:480px
    }
    .hero-visual{
        max-width:550px;
        width:100%;
        margin:25px auto 0;
        min-height:560px
    }
    .dashboard{
        left:40px;
        right:28px
    }
    .payment-card{
        right:0;
        bottom:45px;
        width:265px;
        height:166px
    }
    .receipt-toast{
        left:5px;
        bottom:28px;
        font-size:11px
    }
    .visual-orbit{
        inset:0 15px 45px
    }
    .visual-caption{
        bottom:-12px
    }
    .trust-strip .wrap{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:17px 25px;
        padding-block:25px
    }
    .trust-strip .wrap>p{
        grid-column:1/-1;
        font-size:11px
    }
    .trust-strip .wrap>p br{
        display:none
    }
    .trust-strip .wrap>div{
        font-size:12px
    }
    .section{
        padding-block:70px
    }
    .section-heading{
        display:block;
        margin-bottom:30px
    }
    .section-heading>p{
        margin-top:20px
    }
    .benefits{
        gap:14px
    }
    .benefit{
        padding:20px 18px
    }
    .benefit h3{
        font-size:19px
    }
    .benefit p{
        font-size:11px
    }
    .mini-budget,.mini-receipt,.mini-flow{
        height:140px
    }
    .mini-flow>span{
        width:34px;
        height:38px;
        font-size:15px
    }
    .mini-flow>i{
        width:10px
    }
    .mini-budget i{
        width:35px
    }
    .workflow-section{
        padding-block:70px
    }
    .workflow-grid{
        gap:40px;
        grid-template-columns:1fr
    }
    .workflow-panel{
        max-width:540px;
        width:100%;
        justify-self:center
    }
    .workflow-art{
        height:250px
    }
    .advisor-grid{
        gap:45px;
        grid-template-columns:.9fr 1.1fr
    }
    .advisor-photo{
        height:400px
    }
    .advisor-arc{
        width:230px;
        height:230px;
        left:calc(50% - 115px)
    }
    .advisor-caption{
        font-size:8px;
        padding:12px;
        left:13px;
        right:13px
    }
    .advisor-copy h2{
        font-size:36px
    }
    .consultation{
        padding-block:70px
    }
    .consultation-grid{
        grid-template-columns:1fr;
        gap:40px
    }
    .consultation-copy{
        max-width:550px
    }
    .consultation h2{
        font-size:48px
    }
    .form-card{
        max-width:550px;
        width:100%;
        justify-self:center
    }
    .faq-section{
        grid-template-columns:1fr;
        gap:20px
    }
    .faq-section h2{
        margin-block:15px
    }
    .faq-section>div>p br{
        display:none
    }
    .footer-top{
        flex-wrap:wrap;
        gap:15px 25px
    }
    .footer-top>.text-link{
        margin-left:auto
    }
    .footer-bottom{
        flex-direction:column;
        gap:15px
    }
    .mobile-cta{
        display:flex;
        position:fixed;
        bottom:max(12px,env(safe-area-inset-bottom));
        left:18px;
        right:18px;
        z-index:35;
        box-shadow:0 8px 30px #17382e33;
        transition:opacity .3s,transform .3s;
        min-height:52px;
        justify-content:space-between
    }
    .mobile-cta.is-hidden{
        opacity:0;
        pointer-events:none;
        transform:translateY(20px)
    }
    footer{
        padding-bottom:95px
    }
}
 @media(max-width:520px){
    html{
        scroll-padding-top:88px
    }
    .wrap{
        padding-inline:21px
    }
    .brand img{
        width:142px
    }
    .nav{
        gap:12px;
        min-height:72px
    }
    .btn-small{
        font-size:10px;
        padding:8px 11px;
        gap:13px;
        min-height:40px
    }
    .hero{
        padding-top:34px;
        gap:0
    }
    .hero .eyebrow{
        font-size:8px;
        letter-spacing:1.1px
    }
    .hero h1{
        font-size:55px;
        letter-spacing:-3px;
        margin-top:22px;
        margin-bottom:23px
    }
    .hero-description{
        font-size:17px
    }
    .hero-detail{
        font-size:12px;
        max-width:355px;
        line-height:1.85
    }
    .hero-actions{
        gap:15px;
        align-items:start;
        flex-direction:column
    }
    .hero-actions .btn{
        width:100%;
        justify-content:space-between;
        font-size:12px;
        min-height:53px
    }
    .hero-actions .text-link{
        font-size:11px;
        margin:2px 0 0 3px
    }
    .hero-assurance{
        font-size:9px;
        gap:20px;
        margin-top:20px
    }
    .hero-visual{
        min-height:435px;
        margin-top:32px;
        max-width:380px
    }
    .dashboard{
        top:12px;
        left:17px;
        right:7px;
        border-radius:12px
    }
    .dash-top{
        padding:9px 12px;
        font-size:8px;
        gap:11px
    }
    .dash-mark{
        font-size:17px;
        width:25px;
        height:25px;
        line-height:25px
    }
    .dash-body{
        padding:14px 16px 0
    }
    .dash-title{
        font-size:23px;
        margin-bottom:15px
    }
    .dash-greeting{
        font-size:6px
    }
    .budget-number{
        font-size:28px;
        margin-bottom:10px
    }
    .budget-head{
        font-size:7px
    }
    .dash-list-label{
        margin-top:18px
    }
    .transaction{
        padding:10px 0;
        font-size:9px;
        gap:9px
    }
    .transaction small{
        font-size:6px
    }
    .transaction strong{
        font-size:9px
    }
    .dash-footer{
        font-size:6px;
        padding:10px 0
    }
    .payment-card{
        width:206px;
        height:132px;
        right:-1px;
        bottom:34px;
        padding:14px
    }
    .card-brand{
        font-size:11px
    }
    .chip{
        margin-top:10px;
        width:23px;
        height:18px
    }
    .card-label{
        font-size:5px;
        margin-top:9px
    }
    .card-bottom{
        font-size:8px
    }
    .card-circles i{
        width:21px;
        height:21px
    }
    .receipt-toast{
        padding:11px;
        bottom:17px;
        left:0;
        font-size:9px;
        gap:7px;
        border-radius:6px
    }
    .receipt-toast small{
        font-size:6px
    }
    .receipt-toast>span{
        width:23px;
        height:23px
    }
    .visual-caption{
        font-size:6px;
        bottom:-11px
    }
    .visual-orbit{
        inset:4px -3px 14px
    }
    .trust-strip .wrap>div{
        font-size:10px;
        gap:9px
    }
    .sector-icon{
        font-size:21px
    }
    .section{
        padding-block:60px
    }
    .eyebrow{
        font-size:8px;
        letter-spacing:1.4px
    }
    h2{
        font-size:35px;
        letter-spacing:-1.3px
    }
    .section-heading>p{
        font-size:11px
    }
    .benefits{
        grid-template-columns:1fr;
        gap:15px
    }
    .benefit{
        padding:21px 24px
    }
    .mini-budget,.mini-receipt,.mini-flow{
        height:130px
    }
    .mini-flow>span{
        width:50px;
        height:50px;
        font-size:20px
    }
    .mini-flow>i{
        width:35px
    }
    .mini-budget i{
        width:48px
    }
    .benefit h3{
        font-size:22px
    }
    .benefit p{
        font-size:12px
    }
    .workflow-section{
        padding-block:55px
    }
    .step{
        padding:17px 11px;
        gap:13px
    }
    .step div{
        font-size:13px
    }
    .step small{
        font-size:9px
    }
    .workflow-panel{
        padding:21px 19px
    }
    .panel-head{
        font-size:6px;
        letter-spacing:1px;
        gap:9px
    }
    .workflow-art{
        height:220px
    }
    .art-node{
        padding:9px 10px;
        font-size:8px
    }
    .art-node span{
        font-size:13px
    }
    .art-center{
        top:80px
    }
    .n1{
        left:0;
        top:19px
    }
    .n2{
        right:0;
        top:8px
    }
    .n3{
        right:10px;
        bottom:0
    }
    .panel-copy{
        padding-top:21px;
        min-height:150px
    }
    .panel-copy h3{
        font-size:22px
    }
    .panel-copy p{
        font-size:11px
    }
    .panel-note{
        font-size:12px
    }
    .advisor-grid{
        grid-template-columns:1fr;
        gap:35px
    }
    .advisor-photo{
        max-width:360px;
        width:100%;
        height:380px;
        justify-self:center
    }
    .advisor-caption{
        font-size:9px
    }
    .advisor-copy h2{
        font-size:38px
    }
    .advisor-copy>p{
        font-size:12px
    }
    .advisor-arc{
        width:280px;
        height:280px;
        left:calc(50% - 140px)
    }
    .consultation{
        padding-block:58px
    }
    .consultation h2{
        font-size:39px;
        letter-spacing:-1.4px
    }
    .consultation-copy>p{
        font-size:12px
    }
    .consultation-list{
        font-size:10px
    }
    .contact-alternative{
        font-size:8px
    }
    .form-card{
        padding:26px 21px;
        min-height:510px
    }
    .form-card h3{
        font-size:25px
    }
    .form-progress>span{
        font-size:7px;
        letter-spacing:1px
    }
    .form-row{
        gap:10px
    }
    .form-footnote{
        font-size:7px
    }
    .form-card .btn{
        font-size:11px
    }
    .consent{
        font-size:8px
    }
    .faq-section h2{
        font-size:37px
    }
    summary{
        font-size:12px;
        padding:20px 0
    }
    details>p{
        font-size:11px
    }
    .footer-top{
        gap:18px
    }
    .footer-top p{
        margin:0;
        font-size:10px
    }
    .footer-top>.text-link{
        margin-left:0;
        font-size:12px
    }
    .footer-bottom{
        font-size:8px
    }
    .footer-bottom>div{
        gap:19px;
        flex-wrap:wrap
    }
}
/* Decorative shapes may extend beyond their cards without creating page scrolling. */
 html{
    overflow-x:hidden
}
body{
    overflow-x:clip
}
.hero{
    overflow-x:clip
}
.payment-card{
    overflow:hidden
}
 @media(max-width:520px){
    .hero h1{
        font-size:clamp(44px,14.1vw,55px)
    }
}
 @media(max-width:360px){
    .brand img{
        width:125px
    }
    .btn-small{
        font-size:9px;
        gap:10px
    }
    .hero-assurance{
        font-size:8px;
        gap:14px
    }
}
 @media(prefers-reduced-motion:reduce){
    html{
        scroll-behavior:auto
    }
    *,*:before,*:after{
        animation:none!important;
        transition:none!important
    }
    .js .reveal{
        opacity:1;
        transform:none
    }
    .reading-progress{
        display:none
    }
}
 :root{
    --ink:#102e46;
    --orange:#23afe0;
    --orange-dark:#087eaf;
    --cream:#f5f7f8;
    --muted:#526b7b;
    --line:#d8e3e9
}
.header{
    background:#f5f7f8ed
}
.btn:hover{
    background:#164966
}
.hero h1{
    letter-spacing:-3px
}
.hero h1 .serif{
    color:#087eaf
}
.hero-copy{
    position:relative;
    z-index:2
}
.hero-visual{
    perspective:1100px;
    transform-style:preserve-3d
}
.visual-orbit{
    background:#e0edf3
}
.visual-orbit:after{
    border-color:#9ebed0
}
.dashboard{
    box-shadow:0 30px 80px #102e4626
}
.payment-card{
    background:linear-gradient(135deg,#25b8ec,#0589c4);
    box-shadow:0 24px 48px #03628c38
}
.trust-strip{
    background:#eaf0f3
}
.benefit{
    background:#eaf1f5;
    border-color:#dbe6ec
}
.mini-budget i{
    background:#a8cddd
}
.mini-budget i:nth-child(2){
    background:#439bc0
}
.mini-budget i:nth-child(3){
    background:#7fb7cf
}
.workflow-panel{
    background:#edf4f7;
    border-color:#d4e5ed
}
.step.active{
    background:#e6f2f8
}
.advisor-photo{
    background:#e1edf3
}
.advisor-arc{
    background:#52bee7
}
.consultation{
    background:linear-gradient(120deg,#102e46,#123f59)
}
.consultation h2 .serif{
    color:#68d2f5
}
.consultation .eyebrow{
    color:#9fc8dc
}
.consultation-copy>p,.consultation-list{
    color:#c3d8e4
}
.contact-alternative{
    color:#bcd5e2
}
.motion-section{
    position:relative;
    isolation:isolate
}
.section-motion{
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:-1
}
.ambient-orb{
    position:absolute;
    width:300px;
    height:300px;
    border-radius:50%;
    right:-170px;
    top:12%;
    background:radial-gradient(circle,#23afe018,transparent 70%);
    animation:ambient-drift 9s ease-in-out infinite alternate
}
.orbit-outline{
    position:absolute;
    width:130px;
    height:130px;
    border:1px solid #0c99d61c;
    border-radius:30% 50% 40% 50%;
    bottom:8%;
    left:-70px;
    animation:outline-turn 24s linear infinite
}
.light-trail{
    position:absolute;
    top:0;
    left:8%;
    height:1px;
    width:35%;
    background:linear-gradient(90deg,transparent,#0c99d670,transparent);
    transform-origin:left;
    animation:trail-pass 7s ease-in-out infinite
}
.motion-section:not(.in-view) .section-motion i{
    animation-play-state:paused
}
.js .motion-reveal{
    opacity:0;
    transform:perspective(900px) translate3d(0,26px,0) rotateX(4deg);
    transition:opacity .85s var(--ease),transform 1.05s var(--ease);
    transition-delay:var(--delay,0ms)
}
.js .motion-reveal.entered{
    opacity:1;
    transform:none
}
.motion-section h2:after{
    content:'';
    display:block;
    margin-top:24px;
    width:66px;
    height:3px;
    background:linear-gradient(90deg,#0c99d6,#69d2ed);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform 1.2s var(--ease) .25s
}
.motion-section.in-view h2:after{
    transform:scaleX(1)
}
.motion-section.in-view .eyebrow{
    animation:label-glow 6s ease-in-out infinite
}
.motion-control{
    position:fixed;
    right:16px;
    bottom:18px;
    z-index:50;
    background:#ffffffed;
    border:1px solid #d4e2e9;
    color:var(--ink);
    border-radius:40px;
    padding:11px 15px;
    font-size:13px;
    box-shadow:0 4px 20px #102e4614;
    backdrop-filter:blur(10px)
}
.motion-control span{
    margin-left:6px
}
.story-grid{
    display:grid;
    grid-template-columns:1.1fr 1fr;
    gap:70px;
    align-items:center
}
.story-copy p,.pilot-grid>div>p{
    font-size:16px;
    line-height:1.9;
    color:var(--muted)
}
.system-scene{
    height:390px;
    position:relative;
    perspective:900px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:radial-gradient(circle,#dceef6,transparent 70%)
}
.cube-stage{
    perspective:800px;
    width:160px;
    height:160px
}
.system-cube{
    width:100%;
    height:100%;
    position:relative;
    transform-style:preserve-3d;
    animation:cube-rotate 18s linear infinite
}
.cube-face{
    position:absolute;
    width:160px;
    height:160px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    backface-visibility:hidden;
    background:linear-gradient(135deg,#12344d,#14658c);
    border:1px solid #8ddcf6;
    font-size:58px;
    color:white;
    box-shadow:inset 0 0 40px #18b8e933;
    border-radius:16px
}
.cube-face small{
    font-size:9px;
    letter-spacing:3px;
    color:#a7e5fb
}
.cube-face.front{
    transform:translateZ(80px)
}
.cube-face.back{
    transform:rotateY(180deg) translateZ(80px)
}
.cube-face.right{
    transform:rotateY(90deg) translateZ(80px)
}
.cube-face.left{
    transform:rotateY(-90deg) translateZ(80px)
}
.scene-ring{
    position:absolute;
    border:1px solid #78bdd559;
    border-radius:50%;
    width:310px;
    height:310px;
    transform:rotateX(60deg);
    animation:ring-orbit 15s linear infinite
}
.ring-b{
    width:360px;
    height:360px;
    animation-direction:reverse;
    opacity:.6
}
.scene-tag{
    position:absolute;
    background:white;
    border:1px solid #d6e7ee;
    border-radius:8px;
    padding:10px 14px;
    font-size:13px;
    box-shadow:0 15px 30px #102e460c;
    animation:small-float 5s ease-in-out infinite
}
.tag-one{
    left:0;
    top:55px
}
.tag-two{
    right:0;
    bottom:55px;
    animation-delay:-2s
}
.scene-note{
    position:absolute;
    bottom:0;
    font-size:13px;
    color:var(--muted)
}
.usecase-section{
    background:white
}
.usecase-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:28px
}
.usecase-grid article{
    padding:10px 0 24px;
    border-bottom:1px solid #bddce9
}
.usecase-grid article p{
    font-size:16px;
    line-height:1.9;
    color:var(--muted)
}
.usecase-grid h3{
    font-size:20px
}
.usecase-icon{
    display:grid;
    place-items:center;
    width:50px;
    height:50px;
    background:#e7f5fc;
    border-radius:16px;
    color:#058ac0;
    font-size:26px;
    animation:icon-bob 6s ease-in-out infinite
}
.usecase-grid article:nth-child(2) .usecase-icon{
    animation-delay:-1s
}
.usecase-grid article:nth-child(3) .usecase-icon{
    animation-delay:-2s
}
.pilot-section{
    background:#e9f2f7
}
.pilot-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:center
}
.pilot-grid .btn{
    margin-top:20px
}
.pilot-card{
    padding:36px;
    background:white;
    border:1px solid #d4e4ed;
    border-radius:18px;
    box-shadow:0 25px 60px #193e5710;
    position:relative;
    overflow:hidden
}
.pilot-card:after{
    content:'';
    position:absolute;
    top:0;
    bottom:0;
    left:-100%;
    width:50%;
    transform:skew(-20deg);
    background:linear-gradient(90deg,transparent,#35b6e713,transparent);
    animation:card-sheen 9s ease-in-out infinite;
    pointer-events:none
}
.pilot-numbers{
    margin-top:15px
}
.pilot-numbers>span{
    display:block;
    font-size:70px;
    line-height:1.2;
    letter-spacing:-4px
}
.pilot-numbers small{
    font-size:11px;
    color:var(--muted)
}
.pilot-track{
    height:5px;
    background:#e8f0f5;
    margin:25px 0 32px;
    border-radius:10px;
    overflow:hidden
}
.pilot-track i{
    height:100%;
    width:70%;
    display:block;
    background:#23afe0;
    animation:track-breathe 6s ease-in-out infinite
}
.pilot-card p{
    font-size:12px;
    color:var(--muted);
    line-height:1.85
}
.pilot-stamp{
    display:block;
    padding-top:20px;
    margin-top:20px;
    border-top:1px solid #e0e9ef;
    font-size:13px;
    color:#087eaf
}
.media-section{
    background:#102e46;
    color:#fff
}
.media-section .section-heading>p{
    color:#b5d0df
}
.media-layout{
    display:grid;
    grid-template-columns:1.15fr 1fr;
    gap:36px;
    align-items:start
}
.brand-film{
    background:#0c2438;
    border-radius:20px;
    border:1px solid #2e526b;
    overflow:hidden;
    position:relative
}
.brand-film video{
    width:100%;
    display:block;
    aspect-ratio:16/9
}
.media-caption{
    font-size:13px;
    line-height:1.7;
    color:#a9c6d7;
    padding:16px 22px
}
.photo-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px
}
.photo-grid figure{
    margin:0;
    overflow:hidden;
    border-radius:12px;
    background:#f0f6f9;
    color:#17394e;
    position:relative
}
.photo-grid figure:first-child{
    grid-column:1/-1
}
.photo-grid img{
    height:160px;
    width:100%;
    object-fit:contain;
    padding:12px;
    transition:transform 1s
}
.photo-grid figure:first-child img{
    height:200px;
    object-fit:cover;
    padding:0
}
.photo-grid figcaption{
    font-size:10px;
    padding:10px 14px;
    border-top:1px solid #d4e3ec
}
.photo-grid figure:hover img{
    transform:scale(1.035)
}
.media-section .eyebrow{
    color:#76d4f5
}
.media-section h2:after{
    background:#67d5f8
}
.photo-grid figure{
    animation:photo-breathe 9s ease-in-out infinite
}
.photo-grid figure:nth-child(2){
    animation-delay:-3s
}
.photo-grid figure:nth-child(3){
    animation-delay:-6s
}
.btn span{
    transition:transform .3s
}
.btn:hover span{
    transform:translate(3px,-3px)
}
.benefit,.workflow-panel,.pilot-card{
    transform-style:preserve-3d
}
.mini-budget i{
    transform-origin:bottom;
    animation:bars-rise 5s ease-in-out infinite
}
.mini-budget i:nth-child(2){
    animation-delay:-1s
}
.mini-receipt>div{
    animation:receipt-bob 6s ease-in-out infinite
}
.mini-flow>i{
    background:linear-gradient(90deg,transparent,#23afe0,transparent);
    height:1px;
    border:0;
    background-size:200%;
    animation:line-flow 3s linear infinite
}
.art-node{
    animation:small-float 5s ease-in-out infinite
}
.art-node.n2{
    animation-delay:-2s
}
.art-node.n3{
    animation-delay:-3s
}
.advisor-arc{
    animation:advisor-pulse 8s ease-in-out infinite
}
.advisor-arc:before{
    animation:outline-turn 20s linear infinite
}
.advisor-caption{
    animation:caption-float 6s ease-in-out infinite
}
.consultation-person img{
    animation:portrait-glow 6s ease-in-out infinite
}
.form-progress i{
    animation:progress-glow 4s ease-in-out infinite
}
summary:focus-visible{
    outline-offset:-3px
}
details[open]>p{
    animation:faq-open .4s ease-out
}
.faq-list details{
    position:relative
}
.faq-list details:after{
    content:'';
    position:absolute;
    bottom:-1px;
    left:0;
    height:1px;
    width:20%;
    background:#0c99d6;
    animation:faq-line 10s ease-in-out infinite;
    pointer-events:none
}
.footer-top{
    position:relative
}
footer{
    background:#eaf0f4
}
.motion-paused *,.motion-paused *:before,.motion-paused *:after{
    animation-play-state:paused!important
}
.motion-paused .motion-reveal{
    transition:none!important
}
.motion-section:not(.in-view) .system-cube,.motion-section:not(.in-view) .scene-ring,.motion-section:not(.in-view) .scene-tag{
    animation-play-state:paused
}
 @keyframes ambient-drift{
    to{
        transform:translate(-80px,40px) scale(1.2)
    }
}
@keyframes outline-turn{
    to{
        transform:rotate(360deg)
    }
}
@keyframes trail-pass{
    0%,100%{
        opacity:.2;
        transform:translateX(-20%) scaleX(.5)
    }
    50%{
        opacity:.9;
        transform:translateX(110%) scaleX(1)
    }
}
@keyframes label-glow{
    50%{
        color:#159ecf
    }
}
@keyframes cube-rotate{
    from{
        transform:rotateX(-14deg) rotateY(0deg)
    }
    to{
        transform:rotateX(-14deg) rotateY(360deg)
    }
}
@keyframes ring-orbit{
    to{
        transform:rotateX(60deg) rotateZ(360deg)
    }
}
@keyframes small-float{
    50%{
        transform:translateY(-9px)
    }
}
@keyframes icon-bob{
    50%{
        transform:translateY(-5px) rotate(4deg)
    }
}
@keyframes card-sheen{
    0%,45%{
        left:-100%
    }
    85%,100%{
        left:150%
    }
}
@keyframes track-breathe{
    50%{
        opacity:.5;
        transform:scaleX(.93);
        transform-origin:left
    }
}
@keyframes photo-breathe{
    50%{
        box-shadow:0 10px 32px #33bded22
    }
}
@keyframes bars-rise{
    50%{
        transform:scaleY(.8)
    }
}
@keyframes receipt-bob{
    50%{
        transform:rotate(-3deg) translateY(-6px)
    }
}
@keyframes line-flow{
    to{
        background-position:-200%
    }
}
@keyframes advisor-pulse{
    50%{
        transform:scale(1.06)
    }
}
@keyframes caption-float{
    50%{
        transform:translateY(-5px)
    }
}
@keyframes portrait-glow{
    50%{
        box-shadow:0 0 0 6px #63d3f518
    }
}
@keyframes progress-glow{
    50%{
        filter:brightness(1.3)
    }
}
@keyframes faq-open{
    from{
        opacity:0;
        transform:translateY(-6px)
    }
    to{
        opacity:1;
        transform:none
    }
}
@keyframes faq-line{
    0%,100%{
        transform:translateX(0);
        opacity:.2
    }
    50%{
        transform:translateX(350%);
        opacity:.7
    }
}
 @media(max-width:1000px){
    .usecase-grid{
        grid-template-columns:1fr 1fr
    }
    .story-grid,.pilot-grid{
        gap:40px
    }
    .media-layout{
        gap:24px
    }
    .hero h1{
        font-size:58px
    }
}
 @media(max-width:800px){
    .story-grid,.pilot-grid,.media-layout{
        grid-template-columns:1fr
    }
    .system-scene{
        max-width:450px;
        width:100%;
        margin:auto
    }
    .motion-control{
        bottom:80px;
        right:12px;
        padding:9px 12px
    }
    .motion-control span{
        display:none
    }
    .hero h1{
        font-size:clamp(49px,9vw,76px)
    }
    .photo-grid figure:first-child img{
        height:260px
    }
    .media-layout{
        gap:28px
    }
    .motion-section h2:after{
        margin-top:19px
    }
    .pilot-numbers>span{
        font-size:64px
    }
}
 @media(max-width:520px){
    .hero h1{
        font-size:clamp(43px,13.8vw,55px)
    }
    .story-copy p,.pilot-grid>div>p{
        font-size:13px
    }
    .story-grid{
        gap:28px
    }
    .system-scene{
        height:310px
    }
    .scene-ring{
        width:250px;
        height:250px
    }
    .ring-b{
        width:290px;
        height:290px
    }
    .cube-stage,.cube-face{
        width:130px;
        height:130px
    }
    .cube-face.front{
        transform:translateZ(65px)
    }
    .cube-face.back{
        transform:rotateY(180deg) translateZ(65px)
    }
    .cube-face.right{
        transform:rotateY(90deg) translateZ(65px)
    }
    .cube-face.left{
        transform:rotateY(-90deg) translateZ(65px)
    }
    .cube-face{
        font-size:43px
    }
    .scene-tag{
        padding:8px 10px;
        font-size:8px
    }
    .tag-one{
        top:30px
    }
    .tag-two{
        bottom:35px
    }
    .usecase-grid{
        gap:18px
    }
    .usecase-grid h3{
        font-size:18px
    }
    .usecase-grid article p{
        font-size:12px
    }
    .pilot-card{
        padding:26px 23px
    }
    .photo-grid{
        gap:12px
    }
    .photo-grid img{
        height:125px;
        padding:8px
    }
    .photo-grid figure:first-child img{
        height:190px
    }
    .media-caption{
        font-size:9px;
        padding:12px 15px
    }
    .light-trail{
        width:42%
    }
    .ambient-orb{
        width:220px;
        height:220px;
        right:-120px
    }
    .motion-control{
        min-width:40px;
        min-height:40px
    }
    .btn{
        min-height:48px
    }
    input,select{
        font-size:16px
    }
    .form-card .btn{
        font-size:11px
    }
}
 @media(prefers-reduced-motion:reduce){
    *,*:before,*:after{
        animation:none!important;
        transition:none!important
    }
    .js .motion-reveal{
        opacity:1;
        transform:none
    }
    .motion-section h2:after{
        transform:scaleX(1)
    }
    .system-cube{
        transform:rotateX(-14deg) rotateY(-22deg)
    }
    .motion-control{
        display:none
    }
}