* {
    box-sizing: border-box
  }
  html {
    scroll-behavior: smooth
  }
  body {
    margin: 0;
    font-family: "Noto Sans JP",sans-serif;
    color: #102d52;
    background: #fff;
    line-height: 1.8;
    overflow-x: hidden
  }
  a {
    text-decoration: none;
    color: inherit
  }
  .container {
    width: min(1180px,calc(100% - 80px));
    margin: auto
  }
  .header {
    height: 76px;
    background: rgba(255,255,255,.94);
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid #edf4fb;
    backdrop-filter: blur(12px)
  }
  .nav {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 20px
  }
  .logo {
    display: flex;
    align-items: center;
    font-weight: 800;
    font-size: 25px;
    letter-spacing: -.04em;
    color: #102d52
  }
  .logo-mark {
    position: relative;
    width: 29px;
    height: 29px;
    display: inline-block;
    margin-right: 7px
  }
  .logo-mark i, .logo-mark b {
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: block
  }
  .logo-mark i {
    left: 0;
    top: 6px;
    background: #28a9a8
  }
  .logo-mark b {
    right: 0;
    top: 0;
    background: #3d8df3
  }
  .tagline {
    font-size: 11px;
    color: #4e7097;
    margin: 0 auto 0 5px
  }
  .nav nav {
    display: flex;
    align-items: center;
    gap: 28px;
    font-size: 12px;
    font-weight: 600
  }
  .nav nav a {
    transition: .25s
  }
  .nav nav a:hover {
    color: #2387ee
  }
  .nav-cta {
    padding: 11px 25px;
    background: #2388ed;
    color: #fff!important;
    border-radius: 30px;
    box-shadow: 0 7px 18px rgba(35,136,237,.22)
  }
  .menu-toggle {
    display: none;
    border: 0;
    background: none;
    font-size: 25px;
    margin-left: auto
  }
  .hero {
    background: linear-gradient(120deg,#f7fbff 0%,#fff 52%,#eaf5ff 100%);
    padding: 66px 0 78px;
    position: relative
  }
  .hero:before, .hero:after, .section-cut:before {
    content: "";
    position: absolute;
    pointer-events: none;
    background: #d9eeff;
    border-radius: 100px;
    transform: rotate(-42deg);
    opacity: .8
  }
  .hero:before {
    width: 230px;
    height: 58px;
    right: -80px;
    top: 50px
  }
  .hero:after {
    width: 150px;
    height: 42px;
    left: -70px;
    bottom: 25px
  }
  .hero-grid {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    align-items: center;
    gap: 42px
  }
  .eyebrow, .section-label {
    display: inline-block;
    color: #2387e9;
    font-size: 13px;
    font-weight: 700;
    background: #e5f3ff;
    border-radius: 20px;
    padding: 4px 14px;
    line-height: 1.5
  }
  .hero h1 {
    font-size: 50px;
    line-height: 1.25;
    letter-spacing: -.05em;
    margin: 18px 0 20px
  }
  .hero h1 em {
    font-style: normal;
    color: #1d82ee
  }
  .hero p {
    font-size: 14px;
    color: #496681;
    margin-bottom: 25px
  }
  .hero small {
    display: block;
    color: #6c91b4;
    font-size: 10px;
    margin-top: 12px
  }
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 45px;
    padding: 13px 28px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 14px;
    transition: .25s;
    box-shadow: 0 9px 24px rgba(37,132,235,.16)
  }
  .btn:hover {
    transform: translateY(-3px)
  }
  .btn.primary {
    background: #2388ed;
    color: #fff
  }
  .btn.light {
    background: #fff;
    color: #197ee6
  }
  .btn.large {
    padding: 15px 38px
  }
  .hero-visual {
    position: relative;
    min-height: 450px
  }
  .photo-wrap {
    height: 430px;
    border-radius: 150px 0 150px 0;
    overflow: hidden;
    box-shadow: 0 25px 55px rgba(44,103,159,.18);
    clip-path: polygon(15% 0,100% 0,100% 83%,87% 100%,0 100%,0 22%)
  }
  .photo-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover
  }
  .float-card {
    position: absolute;
    background: rgba(255,255,255,.97);
    border-radius: 13px;
    box-shadow: 0 15px 40px rgba(37,78,120,.18);
    padding: 17px 20px;
    font-size: 11px;
    color: #4e6a84
  }
  .float-card strong {
    display: block;
    color: #17395d;
    margin-bottom: 7px
  }
  .tasks {
    right: -20px;
    top: 20px;
    width: 165px
  }
  .tasks label {
    display: block;
    line-height: 2.05
  }
  .tasks label::first-letter {
    color: #2388ed
  }
  .project {
    left: -35px;
    bottom: 70px;
    width: 175px
  }
  .person-row {
    font-size: 9px;
    color: #7da5cb;
    line-height: 2.25
  }
  .person-row i {
    display: inline-block;
    width: 45px;
    height: 4px;
    border-radius: 4px;
    background: #59a8f1
  }
  .float-stat {
    position: absolute;
    right: 8px;
    bottom: 12px;
    background: #fff;
    border-radius: 45px;
    padding: 13px 22px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 14px 35px rgba(37,78,120,.17);
    font-size: 10px
  }
  .float-stat span {
    font-size: 25px;
    color: #2588ed
  }
  .float-stat strong {
    display: block;
    font-size: 23px;
    line-height: 1.1;
    color: #17395d
  }
  .float-stat strong small {
    font-size: 10px
  }
  .features {
    padding: 76px 0 84px;
    background: #fff
  }
  .section-head {
    display: flex;
    justify-content: space-between;
    gap: 50px;
    align-items: flex-start;
    margin-bottom: 35px
  }
  .section-head h2, .solution h2, .price h2, .voice h2 {
    font-size: 34px;
    line-height: 1.35;
    letter-spacing: -.04em;
    margin: 10px 0
  }
  .section-head p {
    font-size: 13px;
    color: #587594;
    margin-top: 30px
  }
  .feature-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 18px
  }
  .feature-card {
    position: relative;
    background: #fff;
    border: 1px solid #edf4fb;
    border-radius: 14px;
    padding: 25px 25px 20px;
    min-height: 335px;
    box-shadow: 0 10px 25px rgba(45,91,134,.06);
    overflow: hidden
  }
  .num {
    position: absolute;
    left: 18px;
    top: 16px;
    width: 31px;
    height: 31px;
    border-radius: 50%;
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 700
  }
  .num.blue {
    background: #4d9af0
  }
  .num.green {
    background: #4bc3a7
  }
  .num.purple {
    background: #8874ed
  }
  /*.icon {
    font-size: 27px;
    margin: 20px 0 2px;
    color: #2388ed
  }*/

  .feature-card h3 {
    font-size: 18px;
    margin: 35px 0 2px
  }
  .feature-card p {
    font-size: 12px;
    color: #66829e;
    margin: 3px 0 10px
  }
  .feature-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 10px;
    color: #55718d
  }
  .feature-card li:before {
    content: "✓";
    margin-right: 7px;
    color: #2c91ec
  }
  .mini-ui {
    position: absolute;
    right: 18px;
    bottom: 15px;
    background: #f8fbff;
    border: 1px solid #edf4fa;
    border-radius: 8px;
    box-shadow: 0 7px 20px rgba(41,87,131,.08);
    font-size: 9px;
    color: #6685a2;
    padding: 10px;
    width: 125px
  }
  .task-ui i {
    display: block;
    height: 6px;
    background: linear-gradient(90deg,#54a7ee 65%,#dbeafa 65%);
    border-radius: 5px;
    margin-top: 7px
  }
  .calendar-ui {
    line-height: 2.3
  }
  .file-ui {
    line-height: 2.2
  }
  .problem {
    background: #eaf6ff;
    padding: 60px 0
  }
  .problem-grid {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 60px;
    align-items: center
  }
  .problem h2 {
    font-size: 35px;
    line-height: 1.3;
    margin: 8px 0 10px
  }
  .problem p {
    font-size: 13px;
    color: #607c98
  }
  .problem-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px
  }
  .problem-card {
    background: #fff;
    border-radius: 14px;
    padding: 17px 18px;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    gap: 15px;
    align-items: center;
    box-shadow: 0 8px 22px rgba(47,105,156,.06)
  }
  .problem-card span {
    font-size: 27px;
    color: #2388ed
  }
  .solution {
    padding: 76px 0 82px;
    background: #fff
  }
  .solution-grid {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    align-items: center;
    gap: 40px
  }
  .solution-copy p {
    font-size: 12px;
    color: #617d98;
    margin: 18px 0 23px
  }
  .solution-visual {
    min-height: 390px;
    position: relative
  }
  .orbit {
    position: absolute;
    width: 138px;
    height: 138px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    box-shadow: 0 13px 35px rgba(50,104,155,.17);
    z-index: 2
  }
  .orbit b {
    font-size: 26px
  }
  .orbit span {
    font-weight: 700;
    font-size: 11px;
    line-height: 1.5
  }
  .orbit small {
    font-weight: 400
  }
  .orbit1 {
    background: #4d9af0;
    left: 37%;
    top: 0
  }
  .orbit2 {
    background: #55c4ab;
    left: 0;
    bottom: 45px
  }
  .orbit3 {
    background: #8874ed;
    right: 0;
    bottom: 35px
  }
  .dashboard {
    position: absolute;
    right: 40px;
    bottom: 0;
    width: 390px;
    height: 245px;
    background: #fff;
    border: 1px solid #dceaf7;
    border-radius: 9px;
    box-shadow: 0 20px 45px rgba(40,86,131,.18);
    padding: 20px;
    transform: perspective(900px) rotateY(-5deg)
  }
  .dash-top {
    height: 13px;
    width: 100%;
    background: #2e8be8;
    border-radius: 3px
  }
  .dash-side {
    width: 65px;
    height: 175px;
    background: #edf6ff;
    margin-top: 13px
  }
  .dash-lines {
    position: absolute;
    left: 100px;
    top: 48px;
    width: 240px
  }
  .dash-lines i {
    display: block;
    height: 12px;
    border-radius: 4px;
    background: #e9f2fb;
    margin: 12px 0
  }
  .dash-lines i:nth-child(2) {
    background: linear-gradient(90deg,#4d9af0 50%,#e9f2fb 50%)
  }
  .phone {
    position: absolute;
    right: -22px;
    bottom: -17px;
    width: 73px;
    height: 150px;
    background: #fff;
    border: 5px solid #173d64;
    border-radius: 15px;
    box-shadow: 0 8px 22px rgba(32,69,104,.2)
  }
  .cases {
    background: #edf8ff;
    padding: 70px 0
  }
  .case-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 15px
  }
  .case-card {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 7px 18px rgba(42,93,138,.07)
  }
  .case-card img {
    display: block;
    width: 100%;
    height: 125px;
    object-fit: cover
  }
  .case-card div {
    padding: 13px
  }
  .case-card b {
    font-size: 13px
  }
  .case-card p {
    font-size: 10px;
    color: #66819c;
    line-height: 1.7
  }
  .price {
    padding: 55px 0 65px;
    background: linear-gradient(125deg,#1872c9,#3292ef);
    color: #fff;
    position: relative;
    overflow: hidden
  }
  .price:after {
    content: "";
    position: absolute;
    right: -90px;
    top: -70px;
    width: 450px;
    height: 450px;
    border: 70px solid rgba(255,255,255,.08);
    border-radius: 50%
  }
  .price .section-label {
    color: #fff;
    background: rgba(255,255,255,.13)
  }
  .price h2 {
    font-size: 33px
  }
  .price-title {
    position: relative;
    z-index: 1
  }
  .price-title p {
    font-size: 11px
  }
  .price-stats {
    position: absolute;
    right: max(40px,calc((100vw - 1180px)/2));
    top: 60px;
    display: flex;
    gap: 15px;
    z-index: 2
  }
  .price-box {
    width: 190px;
    height: 135px;
    background: #fff;
    color: #173a5f;
    border-radius: 10px;
    padding: 18px;
    text-align: center;
    box-shadow: 0 12px 30px rgba(9,68,132,.2)
  }
  .price-box small {
    display: block;
    font-size: 9px;
    color: #718aa1
  }
  .price-box strong {
    display: block;
    font-size: 26px;
    line-height: 1.3;
    margin: 8px 0
  }
  .price-box strong span {
    font-size: 15px
  }
  .voice {
    padding: 68px 0
  }
  .voice .section-head {
    margin-bottom: 20px
  }
  .voice .section-head>a {
    font-size: 11px;
    color: #2388ed;
    margin-top: 25px
  }
  .voice-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 15px
  }
  .voice-card {
    border: 1px solid #edf2f8;
    border-radius: 10px;
    padding: 18px;
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 13px;
    box-shadow: 0 8px 20px rgba(40,82,122,.05)
  }
  .voice-card img {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    grid-row: span 2
  }
  .voice-card p {
    font-size: 11px;
    margin: 0;
    line-height: 1.7
  }
  .voice-card small {
    font-size: 8px;
    color: #7a91a7
  }
  .contact {
    position: relative;
    background: #eef8ff;
    overflow: hidden;
    padding: 62px 0
  }
  .contact-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,rgba(239,249,255,.97),rgba(239,249,255,.74)),url("https://images.unsplash.com/photo-1497366811353-6870744d04b2?auto=format&fit=crop&w=1600&q=80") center/cover
  }
  .contact-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px
  }
  .contact h2 {
    font-size: 29px;
    line-height: 1.45;
    margin: 0 0 10px
  }
  .contact p {
    font-size: 11px;
    color: #5e7893
  }
  .contact-inner small {
    display: block;
    color: #6b8ca9;
    font-size: 8px;
    text-align: center;
    margin-top: 8px
  }
  .footer {
    background: #fff;
    padding: 35px 0 15px;
    border-top: 1px solid #edf4fa
  }
  .footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between
  }
  .footer-inner small {
    display: block;
    font-size: 9px;
    color: #7188a0;
    margin-left: 38px
  }
  .footer-links {
    display: flex;
    gap: 25px;
    font-size: 10px;
    font-weight: 600
  }
  .social {
    font-size: 15px;
    color: #52718e
  }
  .copyright {
    text-align: right;
    width: min(1180px,calc(100% - 80px));
    margin: 22px auto 0;
    font-size: 8px;
    color: #91a4b5
  }
  .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s ease,transform .7s ease
  }
  .reveal.is-visible {
    opacity: 1;
    transform: none
  }
  @media(max-width:1050px) {
    .nav nav {
      gap: 15px
    }
    .hero h1 {
      font-size: 43px
    }
    .price-stats {
      position: static;
      margin-top: 35px
    }
    .price .container {
      display: grid
    }
    .case-grid {
      grid-template-columns: repeat(2,1fr)
    }
  }
  @media(max-width:800px) {
    .container {
      width: min(100% - 36px,600px)
    }
    .header {
      height: 65px
    }
    .tagline, .nav nav {
      display: none
    }
    .menu-toggle {
      display: block
    }
    .hero {
      padding: 45px 0
    }
    .hero-grid, .solution-grid, .problem-grid {
      grid-template-columns: 1fr
    }
    .hero h1 {
      font-size: 38px
    }
    .hero-visual {
      min-height: 350px
    }
    .photo-wrap {
      height: 340px
    }
    .float-card.project {
      left: 0
    }
    .section-head {
      display: block
    }
    .section-head p {
      margin-top: 15px
    }
    .feature-grid, .voice-grid {
      grid-template-columns: 1fr
    }
    .feature-card {
      min-height: 300px
    }
    .case-grid {
      grid-template-columns: 1fr 1fr
    }
    .solution-visual {
      min-height: 390px
    }
    .dashboard {
      right: 0;
      width: 340px
    }
    .price-stats {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr
    }
    .price-box {
      width: auto
    }
    .contact-inner {
      display: block
    }
    .contact-inner .btn {
      margin-top: 15px
    }
    .footer-inner {
      display: block
    }
    .footer-links {
      margin-top: 20px;
      flex-wrap: wrap
    }
    .copyright {
      width: calc(100% - 36px)
    }
  }
  @media(max-width:520px) {
    .desktop {
      display: none
    }
    .hero h1 {
      font-size: 34px
    }
    .hero p {
      font-size: 12px
    }
    .hero-visual {
      min-height: 300px
    }
    .photo-wrap {
      height: 285px
    }
    .tasks {
      right: -5px;
      top: 8px;
      transform: scale(.82);
      transform-origin: top right
    }
    .project {
      transform: scale(.82);
      transform-origin: bottom left
    }
    .float-stat {
      transform: scale(.8);
      transform-origin: bottom right;
      right: -5px
    }
    .case-grid {
      grid-template-columns: 1fr
    }
    .price-stats {
      grid-template-columns: 1fr
    }
    .solution-visual {
      transform: scale(.88);
      transform-origin: center
    }
    .dashboard {
      right: -20px
    }
    .orbit1 {
      left: 31%
    }
    .voice-card {
      grid-template-columns: 45px 1fr
    }
    .voice-card img {
      width: 45px;
      height: 45px
    }
  }
  

/* Responsive enhancement */
@media (max-width:1050px){
  .container{width:min(100% - 48px,920px)}
  .nav nav{gap:14px}
  .hero-grid{grid-template-columns:1fr 1fr;gap:28px}
  .hero h1{font-size:clamp(36px,5vw,46px)}
  .hero p br,.section-head p br,.problem p br,.solution-copy p br,.contact p br{display:none}
  .problem-grid{gap:35px}.solution-grid{gap:20px}
  .dashboard{right:20px;width:min(390px,72%)}
  .price-stats{gap:10px}.price-box{width:175px}
}
@media (max-width:800px){
  body.menu-open{overflow:hidden}
  .container{width:min(100% - 32px,600px)}
  .header{height:64px}.nav{gap:0}.logo{font-size:22px}.tagline{display:none}
  .menu-toggle{display:grid;place-items:center;width:44px;height:44px;padding:0;cursor:pointer;color:#102d52;border-radius:10px}
  .nav nav{display:flex;position:fixed;top:64px;right:0;left:0;width:100%;max-height:calc(100vh - 64px);overflow-y:auto;padding:14px 16px 22px;background:rgba(255,255,255,.98);border-top:1px solid #edf4fb;box-shadow:0 18px 35px rgba(30,75,115,.12);flex-direction:column;align-items:stretch;gap:0;visibility:hidden;opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .2s ease,transform .2s ease,visibility .2s ease}
  .nav nav.is-open{visibility:visible;opacity:1;transform:translateY(0);pointer-events:auto}
  .nav nav a{display:block;padding:14px 10px;font-size:14px;border-bottom:1px solid #edf4fb}
  .nav nav .nav-cta{margin-top:12px;text-align:center;border-bottom:0}
  .hero{padding:42px 0 58px}.hero-grid,.problem-grid,.solution-grid{grid-template-columns:1fr}.hero h1{font-size:clamp(32px,9vw,40px);line-height:1.35}.hero p{font-size:13px}.hero .btn{width:100%;max-width:320px}
  .hero-visual{min-height:350px;margin-top:8px}.photo-wrap{height:340px}.tasks{right:-4px;top:10px}.project{left:-4px;bottom:42px}.float-stat{right:-4px;bottom:0}
  .features,.solution,.voice{padding:58px 0}.problem{padding:52px 0}.section-head{margin-bottom:28px}.section-head p{margin-top:12px}
  .section-head h2,.solution h2,.price h2,.voice h2{font-size:30px}.feature-grid,.voice-grid{grid-template-columns:1fr}.feature-card{min-height:310px}
  .problem-cards{grid-template-columns:1fr;gap:10px}.problem-card{min-height:74px}
  .solution-visual{min-height:360px;margin-top:12px}.dashboard{right:50%;transform:translateX(50%) perspective(900px) rotateY(-5deg);width:min(390px,82vw)}
  .orbit{width:120px;height:120px}.orbit1{left:50%;transform:translateX(-50%)}.orbit2{left:2%}.orbit3{right:2%}
  .case-grid{grid-template-columns:1fr 1fr}.price{padding:52px 0 58px}.price .container{display:block}.price-stats{position:static;display:grid;grid-template-columns:repeat(3,1fr);margin-top:28px}.price-box{width:auto;height:auto;min-height:125px;padding:15px 10px}.price-box strong{font-size:23px}
  .contact{padding:52px 0}.contact-inner{display:block}.contact-inner>div:last-child{margin-top:24px}.contact-inner .btn{width:100%}.footer-inner{display:block}.footer-links{margin-top:22px;gap:8px 18px}.social{margin-top:18px}.copyright{width:calc(100% - 32px);margin-top:22px}
}
@media (max-width:520px){
  .container{width:calc(100% - 28px)}.hero{padding:34px 0 45px}.eyebrow,.section-label{font-size:11px;padding:4px 11px}.hero h1{font-size:31px;margin-top:14px}.hero p{font-size:12px;line-height:1.9}.hero small{font-size:9px}
  .hero-visual{min-height:292px}.photo-wrap{height:280px;clip-path:polygon(13% 0,100% 0,100% 88%,87% 100%,0 100%,0 18%)}
  .float-card{padding:13px 15px;font-size:9px}.tasks{width:142px;transform:scale(.84);transform-origin:top right}.project{width:150px;transform:scale(.84);transform-origin:bottom left}.float-stat{padding:10px 15px;transform:scale(.78);transform-origin:bottom right}.float-stat strong{font-size:20px}
  .features,.solution,.voice{padding:48px 0}.problem{padding:45px 0}.section-head h2,.solution h2,.price h2,.voice h2,.problem h2{font-size:27px}.feature-card{padding:23px 20px 18px;min-height:290px}.case-grid{grid-template-columns:1fr}.case-card img{height:175px}
  .solution-visual{min-height:315px;transform:none}.dashboard{width:78vw;height:205px;padding:15px}.dash-side{height:145px;width:52px}.dash-lines{left:82px;top:40px;width:calc(100% - 105px)}.phone{width:62px;height:128px;right:-18px;bottom:-12px}
  .orbit{width:94px;height:94px}.orbit b{font-size:20px}.orbit span{font-size:9px}.orbit1{top:0}.orbit2{bottom:18px}.orbit3{bottom:8px}.price-stats{grid-template-columns:1fr}.price-box{min-height:105px}.price-title .btn{width:100%;max-width:320px}.contact h2{font-size:25px}.footer-links{font-size:9px}
}
@media (max-width:360px){.hero h1{font-size:28px}.hero-visual{min-height:265px}.photo-wrap{height:250px}.tasks{transform:scale(.7)}.project{transform:scale(.7)}.float-stat{transform:scale(.68)}.orbit{width:84px;height:84px}.orbit span{font-size:8px}.dashboard{width:80vw}}


/* Mobile overflow fix */
html, body {
  max-width: 100%;
  overflow-x: clip;
}

.hero-grid > *,
.problem-grid > *,
.solution-grid > *,
.feature-grid > *,
.case-grid > *,
.voice-grid > * {
  min-width: 0;
}

@media (max-width: 800px) {
  .hero-visual,
  .solution-visual {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .tasks { right: 0; }
  .project { left: 0; }
  .float-stat { right: 0; }

  .dashboard {
    left: 50%;
    right: auto;
    width: min(390px, calc(100% - 24px));
    transform: translateX(-50%) perspective(900px) rotateY(-5deg);
  }

  .orbit1 { left: 50%; transform: translateX(-50%); }
  .orbit2 { left: 0; }
  .orbit3 { right: 0; }
}

@media (max-width: 520px) {
  .dashboard {
    width: calc(100% - 20px);
    max-width: 340px;
  }

  .tasks { right: 0; }
  .float-stat { right: 0; }
}