.portrait-card{position:relative;align-self:end;max-width:500px;margin-left:auto;overflow:hidden;border:1px solid #f1c75b55;background:#080c28;box-shadow:0 34px 80px #0008}.portrait-card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,#02051bd9)}.portrait-card img{display:block;width:100%;height:590px;object-fit:cover;object-position:50% 25%}.portrait-card div{position:absolute;z-index:1;left:32px;right:32px;bottom:28px;display:grid}.portrait-card span,.demo-tag,.pipeline-head span,.mini-dashboard>div:first-child span,.demo-client>span,.about-photo span{font:700 10px Manrope;letter-spacing:.16em;color:#efc765}.portrait-card strong{font:700 28px Manrope}.portrait-card small{color:#c7cada}.demo-section{background:#050924;color:#fff;padding:105px 0}.demo-console{display:grid;grid-template-columns:.8fr 1fr 1.15fr;background:#090e2e;border:1px solid #ffffff22;box-shadow:0 35px 90px #0008}.demo-console form,.pipeline,.mini-dashboard{padding:30px}.demo-console form{display:grid;gap:17px;border-right:1px solid #ffffff18}.demo-console label{display:grid;gap:7px;font-size:12px;color:#c9ccda}.demo-console input,.demo-console select{width:100%;box-sizing:border-box;padding:13px 14px;border:1px solid #ffffff25;background:#040720;color:#fff;font:500 14px 'DM Sans'}.demo-console form small{color:#969bad;line-height:1.5}.demo-reset{border:0;background:transparent;color:#b8bdcf;text-decoration:underline;cursor:pointer}.pipeline{border-right:1px solid #ffffff18}.pipeline-head,.mini-dashboard>div:first-child{display:flex;justify-content:space-between;align-items:center}.pipeline-head b{color:#a9afc1;font-size:12px}.pipeline ol{list-style:none;padding:20px 0 0;margin:0;display:grid;gap:9px}.pipeline li{display:flex;gap:14px;align-items:center;padding:13px;background:#ffffff07;border:1px solid #ffffff0c;opacity:.55;transition:.3s}.pipeline li i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#ffffff10;font-style:normal;color:#f1c75b}.pipeline li div{display:grid}.pipeline li span{font-size:11px;color:#9ea4b7}.pipeline li.active{opacity:1;border-color:#f1c75b88;transform:translateX(4px)}.pipeline li.done{opacity:1;border-color:#65d5a355}.pipeline li.done i{background:#65d5a3;color:#051127}.metric-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:24px 0}.metric-row article{padding:14px;background:#11183b}.metric-row span{display:block;color:#9fa5ba;font-size:10px}.metric-row strong{font:800 26px Manrope;color:#f1c75b}.demo-client{display:grid;padding:18px;border-left:2px solid #f1c75b;background:#050821}.demo-client strong{font:700 19px Manrope;margin:7px 0}.demo-client small{color:#aab0c2}.build-showcase{padding-top:105px}.showcase-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:18px;margin-top:45px}.showcase-grid>div{display:grid;gap:18px}.showcase-grid figure{margin:0;border:1px solid #d8d8d8;background:#fff;overflow:hidden}.showcase-grid img{width:100%;height:100%;max-height:440px;object-fit:cover;object-position:top}.showcase-grid figure{display:grid;grid-template-rows:minmax(0,1fr) auto}.showcase-grid figcaption{display:grid;padding:18px}.showcase-grid figcaption span,.demo-disclaimer{color:#62677a;font-size:12px}.demo-disclaimer{text-align:center;margin-top:17px}.about{display:grid;grid-template-columns:.8fr 1fr;gap:80px;align-items:center}.about-photo{position:relative;background:#070b26}.about-photo img{display:block;width:100%;max-height:650px;object-fit:cover}.about-photo span{position:absolute;left:20px;bottom:20px;background:#050924e8;padding:12px}.about h2{font:700 clamp(38px,5vw,64px)/1.03 Manrope;margin:14px 0 25px}.about p{color:#555d6f;line-height:1.75}.skill-chips{display:flex;flex-wrap:wrap;gap:8px;margin:25px 0}.skill-chips span{border:1px solid #d4bb75;padding:8px 11px;font-size:11px}.text-link{font-weight:800;color:#080d30}.session-price{font:800 40px Manrope;color:#f1c75b;margin:10px 0}.hero{grid-template-columns:1.05fr .8fr!important}.hero .portrait-card{perspective:900px}
@media(max-width:1000px){.demo-console{grid-template-columns:1fr 1fr}.mini-dashboard{grid-column:1/-1}.pipeline{border-right:0}.about{gap:40px}.portrait-card img{height:500px}}
@media(max-width:760px){.hero{grid-template-columns:1fr!important}.portrait-card{margin:20px 0 0}.portrait-card img{height:440px}.demo-console,.showcase-grid,.about{grid-template-columns:1fr}.demo-console form,.pipeline{border-right:0;border-bottom:1px solid #ffffff18}.mini-dashboard{grid-column:auto}.about{gap:28px}.about-photo img{max-height:520px}}

/* Lighter, proof-led visual direction */
:root{--proof-blue:#182b58;--proof-blue-2:#294675;--proof-panel:#eef4ff;--proof-ink:#102044}
body{background:#f8faff;color:#101a35}.noise{opacity:.08}header{background:#f8faffee;border-bottom:1px solid #cdd8eb}.brand span,.navlinks a{color:#16254a}.nav-cta{color:#071126!important}.hero{min-height:760px;background:transparent}.hero-copy h1{color:#132550}.hero-copy .lede{color:#53627d}.hero .kicker,.hero .trustline{color:#40577e}.hero .ghost{color:#19325f;border-color:#8193b1}.hero-system{align-self:center;background:linear-gradient(145deg,#eef4ff,#dbe8fb);border:1px solid #b8c9e5;padding:28px;box-shadow:0 28px 65px #253d6b24;color:var(--proof-ink)}.system-title,.system-footer{display:flex;justify-content:space-between;gap:16px;align-items:center}.system-title span{font:800 11px Manrope;letter-spacing:.15em}.system-title b{font-size:11px;color:#197852}.system-title b:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#34bb7a;margin-right:7px}.system-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:8px;margin:45px 0}.system-flow article{background:#fff;border:1px solid #cad6ea;padding:17px;display:grid;gap:5px;min-height:100px}.system-flow article i{color:#b18427;font-style:normal;font-size:11px}.system-flow article small{color:#697892}.system-flow>span{color:#9b7a31}.system-footer{border-top:1px solid #bac9df;padding-top:18px;color:#536681;font-size:11px}.system-footer b{color:#152953;font-size:18px}.founder-mini{display:flex;align-items:center;gap:12px;margin-top:25px;padding-top:20px;border-top:1px solid #bac9df}.founder-mini img{width:48px;height:48px;object-fit:cover;border-radius:50%}.founder-mini p{display:grid;margin:0}.founder-mini span{font-size:11px;color:#687893}.marquee{background:#234273}.demo-section,.proof,.booking,.final{background:#17305f}.demo-console{background:#264673;border-color:#ffffff38}.demo-console form,.pipeline{background:#203d69}.mini-dashboard{background:#2b4e7f}.demo-console input,.demo-console select{background:#f7faff;color:#172746;border-color:#c6d5eb}.pipeline li{background:#315584}.pipeline li span{color:#d1dcee}.metric-row article,.demo-client{background:#1c3964}.build-showcase{background:#fff;max-width:none;padding-left:max(5vw,calc((100% - 1180px)/2));padding-right:max(5vw,calc((100% - 1180px)/2))}.portfolio-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:38px 0 22px}.portfolio-tabs button{border:1px solid #b9c6db;background:#f6f8fc;color:#294064;padding:12px 17px;font:700 12px Manrope;cursor:pointer}.portfolio-tabs button.active{background:#284b7d;color:#fff;border-color:#284b7d}.project-panel{display:none;grid-template-columns:.72fr 1.28fr;gap:30px;align-items:center;background:#edf3fc;border:1px solid #c4d2e6;padding:28px}.project-panel.active{display:grid}.project-panel img{width:100%;max-height:520px;object-fit:cover;object-position:top;border:1px solid #c4d0e1;background:#fff}.project-copy>span{font:800 10px Manrope;letter-spacing:.14em;color:#936d1d}.project-copy h3{font:800 31px/1.1 Manrope;color:#142b55;margin:12px 0}.project-copy p,.project-copy li,.project-copy small{color:#55657e;line-height:1.6}.project-copy small{display:block;margin-top:18px}.zapier-map{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;min-height:260px;background:#fff;border:1px solid #c4d0e1;padding:25px;color:#ff4f00}.zapier-map b{background:#fff4eb;border:1px solid #ffc49f;padding:18px 14px}.build-details{margin-top:20px;border:1px solid #c4d2e6;background:#fff}.build-details summary{cursor:pointer;padding:18px 22px;font-weight:800;color:#213c67}.build-details .showcase-grid{margin:0;padding:0 20px 20px;grid-template-columns:1fr 1fr}.about-photo{max-width:390px;justify-self:center}.about-photo img{max-height:480px}.proof .light-head p,.booking p,.final p{color:#d8e2f2}.review-heading,.reviews-grid article,.case{border-color:#ffffff2a}.prices article{background:#fff}.process{background:#eef3fb}.final{background:#10264f}
@media(max-width:900px){.project-panel{grid-template-columns:1fr}.system-flow{grid-template-columns:1fr}.system-flow>span{transform:rotate(90deg);text-align:center}.hero-system{margin-top:25px}.build-details .showcase-grid{grid-template-columns:1fr}}

/* Hero contrast correction */
.hero:before{background:radial-gradient(circle at 82% 30%,#d5e4f8 0,transparent 35%),linear-gradient(135deg,#f9fbff,#eaf1fb 68%,#dce8f8)!important;border-bottom:1px solid #cbd7e8}.hero-copy h1{color:#102554!important;text-shadow:none}.hero-copy h1 em{color:#a67518}.hero-copy .lede{color:#435574!important}.hero .kicker,.hero .trustline{color:#314e79!important}.hero .ghost{color:#17345f!important;background:#ffffffa8;border-color:#6f86aa!important}.hero .gold{box-shadow:0 10px 26px #b4852730}
@media(max-width:900px){.hero:before{height:1180px;background:linear-gradient(160deg,#f9fbff,#e6effb)!important}}

/* ============================================================
   MOBILE FIXES
   1. Nav contrast  2. Tap targets  3. Section order  4. Sticky CTA
   ============================================================ */

@media(max-width:900px){

  /* 1. Menu button was white on a light header -> invisible */
  .menu{
    color:#16254a;
    border:1px solid #16254a;
    border-radius:4px;
    padding:12px 16px;
    font:700 13px Manrope,sans-serif;
    letter-spacing:.06em;
    min-height:44px;
  }

  /* Open dropdown kept a dark navy background while its links
     had been recoloured dark navy. Match it to the light header. */
  .navlinks{
    background:#f8faff;
    border-bottom:1px solid #cdd8eb;
    box-shadow:0 18px 40px #16254a24;
    padding:12px 22px 20px;
    gap:2px;
  }
  .navlinks a{
    color:#16254a;
    width:100%;
    text-align:center;
    font-size:16px;
    padding:14px 4px;
    min-height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-bottom:1px solid #e3e9f4;
  }
  .navlinks a:last-child{border-bottom:0}
  .navlinks .nav-cta{
    color:#0b1329!important;
    background:linear-gradient(135deg,#f7df91,#dba734);
    border:1px solid #b98f2e;
    border-radius:4px;
    margin-top:10px;
    font-weight:800;
  }

  /* 2. Tap targets below the 44px minimum */
  .solutions a,.demo-reset,.portfolio-tabs button,.text-link,.fiverr-proof{
    min-height:44px;
    display:inline-flex;
    align-items:center;
  }
  .portfolio-tabs button{padding:14px 17px}

  /* 3. Reorder for how people actually decide on a phone:
        who are you -> can you prove it -> what does it cost -> how do I start */
  main{display:flex;flex-direction:column}
  .hero{order:1}
  .call-path{order:2}
  #proof{order:3}          /* reviews were 10.7 screens down */
  .marquee{order:4}
  #solutions{order:5}
  #pricing{order:6}        /* was 13.5 screens down */
  #portfolio{order:7}
  #demo{order:8}           /* heavy form-filling: moved below the decision content */
  #about{order:9}
  #process{order:10}
  #booking{order:11}
  .final{order:12}

  /* 4. Persistent booking bar so nobody has to scroll back */
  .mobile-cta{
    position:fixed;
    left:0;right:0;bottom:0;
    z-index:30;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:56px;
    padding:14px 18px;
    background:linear-gradient(135deg,#f7df91,#dba734);
    color:#0b1329;
    font:800 15px Manrope,sans-serif;
    text-decoration:none;
    box-shadow:0 -6px 24px #16254a2e;
    border-top:1px solid #b98f2e;
  }
  body{padding-bottom:56px}
}

/* Desktop never shows the sticky bar */
.mobile-cta{display:none}

/* Paid-path card: ".call-path .shell>div" (0,2,1) was beating
   ".call-path .paid-path" (0,2,0), so the card got the cream background
   while keeping white text. Raise specificity so the dark card wins. */
.call-path .shell > div.paid-path{
  background:#0d1538;
  border-color:#334476;
  color:#fff;
}
.call-path .shell > div.paid-path strong{color:#fff}
.call-path .shell > div.paid-path span{color:#f2c85f}
.call-path .shell > div.paid-path p{color:#d8def0}
.call-path .shell > div.paid-path a{color:#ffd76f}

/* Chat launcher must clear the sticky mobile booking bar */
@media(max-width:900px){
  .chat-launcher-wrap{bottom:70px!important}
  .chat-panel{inset:8px 8px 70px!important;width:auto!important;height:auto!important}
}

/* Honest labelling on the illustrative hero dashboard */
.system-note{
  margin:10px 0 0;
  font-size:10.5px;
  letter-spacing:.04em;
  color:#7286a4;
  text-align:right;
  font-style:italic;
}

/* ============================================================
   MOBILE LENGTH TRIM
   The page ran 22 screens on a phone. Most visitors never reach
   the booking section. This tightens spacing and collapses the
   heaviest desktop-only block without removing any content.
   ============================================================ */
@media(max-width:600px){

  /* 1. Section padding was 80px top and bottom on every section */
  .section,.proof,.booking,.demo-section,.process{padding:44px 0!important}
  .build-showcase{padding-top:44px!important;padding-bottom:44px!important}
  .final{padding:44px 0!important}

  /* 2. Headline and heading sizes: large type eats vertical space fast */
  .hero h1{font-size:clamp(29px,8vw,34px)!important;line-height:1.04!important;margin:10px 0 14px!important}
  .split-head h2,.center-head h2,.booking h2{font-size:26px!important;margin:10px 0 14px!important}
  .split-head,.center-head{margin-bottom:26px!important;gap:16px!important}
  .hero{min-height:auto!important;padding-top:28px!important;padding-bottom:24px!important}
  .lede{font-size:15px!important;line-height:1.55!important}
  .hero-actions{gap:9px!important;margin:22px 0 18px!important}
  .hero-actions .btn{padding:13px 15px!important;min-height:48px}
  .trustline{display:grid!important;grid-template-columns:1fr 1fr;gap:7px 12px!important;font-size:10.5px!important}
  .trustline span:last-child{grid-column:1/-1}
  .hero-system{display:none!important}

  /* 3. The interactive demo is a desktop showpiece: ~2 screens of
        form-filling nobody does on a phone. Collapse it to a summary. */
  #demo .demo-console{display:none!important}
  #demo:after{
    content:"The interactive workflow demo is best viewed on a larger screen.";
    display:block;
    margin-top:6px;
    padding:14px 16px;
    background:#20406e;
    border:1px solid #ffffff2e;
    color:#d8e2f2;
    font-size:13px;
    line-height:1.5;
    border-radius:4px;
  }

  /* 4. Portfolio screenshots were up to 520px tall each */
  .project-panel img{max-height:230px!important}
  .project-panel{padding:18px!important;gap:16px!important}
  .build-details{margin-top:14px!important}

  /* 5. Cards and lists */
  .solutions article{min-height:0!important;padding:22px!important}
  .solutions .big{min-height:0!important;padding:24px!important}
  .solutions .big h3{margin-top:26px!important;font-size:26px!important}
  .solutions h3{margin:26px 0 10px!important}
  .case{min-height:0!important;padding:22px!important}
  .prices article{padding:24px!important}
  .prices ul,.booking-cards ul{min-height:0!important}
  .booking-cards article{padding:22px!important}
  .process ol{gap:18px!important}
  .reviews-grid article{padding:20px!important}
  .about-photo img{max-height:300px!important}
}