/* ==========================================================================
   ONEDEV STUDIO — V18 MOBILE PREMIUM
   IMPORTANT: 100% mobile-only. Desktop/tablet > 620px is untouched.
   ========================================================================== */

@media (max-width:620px){

  /* ---------- Mobile atmosphere ---------- */
  body{
    background:
      radial-gradient(circle at 50% 0%,rgba(255,199,0,.055),transparent 20rem),
      radial-gradient(circle at 100% 34%,rgba(255,140,0,.035),transparent 17rem),
      #030404!important;
  }
  .v13-wrap{width:calc(100% - 28px)!important}
  .v13-section,.v14-section{padding:70px 0!important}
  .v13-section-head{margin-bottom:32px!important}
  .v13-section-head:after{bottom:-13px!important;width:34px!important}
  .v13-kicker{letter-spacing:.16em!important;margin-bottom:12px!important}
  .v13-section-head h2,
  .v14-included-copy h2,
  .v14-estimator-copy h2,
  .v13-why-copy h2,
  .v13-faq-copy h2{
    font-size:clamp(31px,9.4vw,39px)!important;
    line-height:.99!important;
    letter-spacing:-1.9px!important;
    text-wrap:balance;
  }

  /* ---------- Header mobile only ---------- */
  .header{
    height:66px!important;
    padding:0 14px!important;
    background:rgba(3,5,5,.94)!important;
    border-bottom:1px solid rgba(255,255,255,.08)!important;
  }
  .brand-header img{height:42px!important;max-width:170px!important}
  #menu{
    display:grid!important;place-items:center!important;
    width:39px!important;height:39px!important;
    border:1px solid rgba(255,199,0,.25)!important;
    border-radius:10px!important;
    background:linear-gradient(145deg,rgba(255,199,0,.08),rgba(255,140,0,.025))!important;
    color:#ffc700!important;font-size:21px!important;
  }
  #nav{
    top:66px!important;
    padding:9px 10px 13px!important;
    background:rgba(4,6,6,.985)!important;
    border-bottom:1px solid rgba(255,199,0,.15)!important;
    box-shadow:0 30px 70px rgba(0,0,0,.72)!important;
  }
  #nav a{
    display:flex!important;align-items:center!important;
    min-height:44px!important;padding:0 12px!important;
    border-radius:8px!important;border-bottom:0!important;
    font-size:9px!important;letter-spacing:.08em!important;
  }
  #nav a:hover,#nav a.active{background:rgba(255,199,0,.06)!important}

  /* ---------- Hero: mobile landing redesign ---------- */
  .v13-hero{min-height:auto!important}
  .v13-hero-bg{
    opacity:.68!important;
    background-position:62% center!important;
    transform:none!important;
  }
  .v13-hero:before{
    background:
      linear-gradient(180deg,rgba(1,2,2,.18),rgba(2,3,3,.52) 52%,#030404 96%),
      radial-gradient(circle at 75% 26%,rgba(255,174,0,.12),transparent 27%)!important;
  }
  .v13-hero-content{padding:98px 0 48px!important}
  .v13-eyebrow{
    border-color:rgba(255,199,0,.28)!important;
    background:rgba(8,10,10,.62)!important;
    backdrop-filter:blur(8px);
  }
  .v13-hero h1{
    max-width:100%!important;
    margin:17px 0 16px!important;
    font-size:clamp(43px,13.2vw,57px)!important;
    line-height:.91!important;
    letter-spacing:-3.2px!important;
  }
  .v13-hero-copy>p{
    max-width:34rem!important;
    font-size:10.5px!important;line-height:1.75!important;
    color:#a0a6a6!important;
  }
  .v13-hero-actions{margin-top:23px!important;gap:8px!important}
  .v13-btn{
    min-height:49px!important;padding:0 15px!important;
    border-radius:10px!important;font-size:8px!important;
  }
  .v13-btn.primary{
    box-shadow:0 12px 35px rgba(255,165,0,.13)!important;
  }
  .v13-hero-meta{
    display:grid!important;grid-template-columns:1fr 1fr!important;
    gap:7px!important;margin-top:16px!important;
  }
  .v13-hero-meta span{
    display:flex!important;align-items:center!important;
    min-height:34px!important;padding:0 9px!important;
    border:1px solid rgba(255,255,255,.07)!important;
    border-radius:8px!important;background:rgba(8,10,10,.48)!important;
  }

  /* Hero technical panel becomes a compact mobile dashboard */
  .v13-hero-panel{
    margin-top:28px!important;min-height:290px!important;
    border-radius:15px!important;
    border-color:rgba(255,255,255,.11)!important;
    background:linear-gradient(145deg,rgba(12,15,15,.94),rgba(5,7,7,.97))!important;
    box-shadow:0 28px 80px rgba(0,0,0,.48)!important;
  }
  .v13-panel-top{height:39px!important}
  .v13-panel-main{padding:29px 18px!important}
  .v13-panel-main strong{font-size:35px!important}
  .v13-panel-main:after{opacity:.55!important}
  .v13-panel-stats{grid-template-columns:repeat(3,1fr)!important}
  .v13-panel-stats div{min-width:0!important}
  .v13-panel-stats b{font-size:7px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  /* ---------- Trust bar ---------- */
  .v13-trust{overflow:hidden!important;border-block-color:rgba(255,255,255,.06)!important}
  .v13-trust-inner{padding-inline:14px!important;gap:20px!important}

  /* ---------- All mobile cards: stronger tactile design ---------- */
  .v13-universe,.v13-project,.v13-price,.v14-solution,
  .v14-included-grid article,.v13-why-grid article,.v13-blog-grid article{
    border-radius:15px!important;
    border-color:rgba(255,255,255,.105)!important;
    box-shadow:0 18px 50px rgba(0,0,0,.28)!important;
  }
  .v13-universe:active,.v13-project:active,.v14-solution:active,
  .v14-included-grid article:active,.v13-blog-grid article:active{
    transform:scale(.985)!important;
  }

  /* ---------- Univers ---------- */
  .v13-universe-grid{gap:10px!important}
  .v13-universe{
    min-height:300px!important;padding:20px!important;
    background:
      radial-gradient(circle at 85% 10%,rgba(255,199,0,.07),transparent 27%),
      linear-gradient(145deg,#0d1010,#070909)!important;
  }
  .v13-universe h3{font-size:24px!important}
  .v13-universe p{font-size:9px!important;max-width:88%!important}
  .v13-universe a{
    right:20px!important;left:20px!important;bottom:18px!important;
    display:flex!important;justify-content:space-between!important;
    padding-top:12px!important;border-top:1px solid rgba(255,255,255,.07)!important;
  }

  /* ---------- Projects ---------- */
  .v13-project-filters{
    top:74px!important;margin-inline:-2px!important;width:calc(100% + 4px)!important;
    padding:5px!important;border-radius:11px!important;
    background:rgba(5,7,7,.93)!important;
  }
  .v13-project-grid{gap:11px!important}
  .v13-project-visual,.v13-project.wide .v13-project-visual{height:225px!important}
  .v13-project-visual strong{font-size:34px!important}
  .v13-project-info{padding:16px!important}
  .v13-project-info h3{font-size:14px!important}
  .v13-project-info p{font-size:8px!important;line-height:1.65!important}

  /* ---------- Expertise ---------- */
  .v13-expertise-list{border-top:1px solid rgba(255,255,255,.08)!important}
  .v13-expertise-list article{
    min-height:65px!important;padding:13px 9px!important;
    border-bottom-color:rgba(255,255,255,.07)!important;
  }
  .v13-expertise-list article.active{
    border-radius:9px!important;
    background:linear-gradient(90deg,rgba(255,199,0,.07),transparent)!important;
  }
  .v13-expertise-screen{
    min-height:330px!important;border-radius:15px!important;
    box-shadow:0 25px 70px rgba(0,0,0,.42)!important;
  }
  .v13-screen-body{padding:42px 20px!important}
  .v13-screen-body h3{font-size:31px!important}

  /* ---------- Solutions ---------- */
  .v14-solutions-grid{gap:10px!important}
  .v14-solution{
    min-height:255px!important;padding:20px!important;
  }
  .v14-solution h3{font-size:18px!important;margin-top:26px!important}
  .v14-solution p{font-size:9px!important}
  .v14-tags{gap:5px!important}
  .v14-tags span{padding:6px 8px!important;font-size:6.5px!important}

  /* ---------- Pricing: mobile cards feel like product cards ---------- */
  .v13-price-grid{gap:11px!important}
  .v13-price{
    padding:21px 20px 72px!important;
    background:
      radial-gradient(circle at 100% 0%,rgba(255,199,0,.055),transparent 30%),
      linear-gradient(145deg,#0e1111,#070909)!important;
  }
  .v13-price.featured{
    border-color:rgba(255,199,0,.45)!important;
    box-shadow:0 22px 70px rgba(0,0,0,.45),0 0 35px rgba(255,170,0,.055)!important;
  }
  .v13-price h3{font-size:29px!important}
  .v13-price strong{font-size:30px!important}
  .v13-price li{padding-block:7px!important;font-size:8.5px!important}
  .v13-price>a{
    min-height:43px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;
    border-radius:9px!important;
  }

  /* ---------- Standard OneDev ---------- */
  .v14-included-layout{gap:32px!important}
  .v14-code-card{
    border-radius:14px!important;
    box-shadow:0 25px 70px rgba(0,0,0,.4)!important;
  }
  .v14-included-grid{gap:8px!important}
  .v14-included-grid article{
    min-height:128px!important;padding:17px!important;
  }
  .v14-included-grid h3{font-size:12px!important;margin-top:18px!important}

  /* ---------- Method timeline ---------- */
  .v13-timeline article{
    position:relative!important;
    grid-template-columns:48px 1fr!important;
    padding:17px 0!important;
  }
  .v13-timeline article>span{
    width:43px!important;height:43px!important;
    border-color:rgba(255,199,0,.3)!important;
    background:rgba(255,199,0,.045)!important;
  }
  .v13-timeline article:not(:last-child):after{
    content:"";position:absolute;left:21px;top:60px;bottom:-7px;width:1px;
    background:linear-gradient(#ffc70033,transparent);
  }

  /* ---------- Why ---------- */
  .v13-why-grid{gap:8px!important}
  .v13-why-grid article{
    min-height:132px!important;padding:17px!important;
  }

  /* ---------- Estimator ---------- */
  .v14-estimator{
    border-radius:15px!important;
    box-shadow:0 28px 80px rgba(0,0,0,.48)!important;
  }
  .v14-estimator-head{height:41px!important;padding-inline:12px!important}
  .v14-estimator-options{padding:9px!important;gap:6px!important}
  .v14-estimator-options button{
    min-height:66px!important;padding:10px!important;
    border-radius:9px!important;
  }
  .v14-estimator-options button.active{
    box-shadow:inset 0 0 25px rgba(255,199,0,.035)!important;
  }
  .v14-estimator-result{gap:10px!important;padding:14px!important}
  .v14-estimator-result strong{font-size:11px!important}
  .v14-estimator-result a{min-height:40px!important;display:grid!important;place-items:center!important;border-radius:8px!important}

  /* ---------- Reviews ---------- */
  .v13-review-track{min-height:330px!important}
  .v13-review-track article{
    padding:23px 19px!important;border-radius:15px!important;
    background:
      radial-gradient(circle at 90% 0%,rgba(255,199,0,.06),transparent 25%),
      linear-gradient(145deg,#0d1010,#070909)!important;
  }
  .v13-review-track blockquote{
    font-size:20px!important;line-height:1.38!important;
    letter-spacing:-.55px!important;
  }
  .v13-review-controls{margin-top:14px!important}
  .v13-review-arrow{width:40px!important;height:40px!important;border-radius:10px!important}

  /* ---------- FAQ ---------- */
  .v13-faq details{
    border-bottom-color:rgba(255,255,255,.075)!important;
  }
  .v13-faq details[open]{
    margin-inline:-8px!important;padding-inline:8px!important;
    border-radius:9px!important;
  }
  .v13-faq summary{min-height:58px!important;font-size:9px!important}
  .v13-faq details p{font-size:8.5px!important;line-height:1.75!important}

  /* ---------- Dev blog ---------- */
  .v13-blog-grid{gap:9px!important}
  .v13-blog-grid article{padding:18px!important}
  .v13-blog-grid h3{font-size:15px!important}

  /* ---------- Contact strip ---------- */
  .v14-contact-strip{
    margin-top:45px!important;width:calc(100% - 28px)!important;
    border-radius:14px!important;
    box-shadow:0 24px 70px rgba(0,0,0,.36)!important;
  }
  .v14-contact-strip>div{padding:15px!important}
  .v14-contact-strip>a{
    min-height:52px!important;padding:0 15px!important;
    font-size:8px!important;
  }

  /* ---------- Final banner: strongest mobile visual ---------- */
  .v13-final-cta{
    width:calc(100% - 16px)!important;
    min-height:540px!important;
    margin-top:15px!important;
    border-radius:16px!important;
    overflow:hidden!important;
    box-shadow:0 35px 100px rgba(0,0,0,.62),0 0 55px rgba(255,165,0,.07)!important;
  }
  .v13-final-bg{
    background-position:63% center!important;
    transform:none!important;
  }
  .v13-final-overlay{
    background:
      linear-gradient(180deg,rgba(1,2,2,.18),rgba(2,3,3,.43)),
      radial-gradient(circle at 50% 42%,transparent,rgba(0,0,0,.42))!important;
  }
  .v13-final-content{
    width:calc(100% - 30px)!important;
    padding:62px 0!important;
  }
  .v13-final-content h2{
    margin:14px 0!important;
    font-size:clamp(39px,12vw,50px)!important;
    line-height:.93!important;letter-spacing:-2.7px!important;
    text-wrap:balance;
  }
  .v13-final-content p{
    max-width:29rem!important;margin-inline:auto!important;
    font-size:9.5px!important;line-height:1.75!important;
  }
  .v13-final-actions{width:100%!important;margin-top:23px!important}
  .v13-final-actions>a{
    min-height:51px!important;border-radius:10px!important;
    padding-inline:15px!important;
  }

  /* ---------- Footer ---------- */
  .footer-v10{padding-top:12px!important}
  .footer-main{gap:30px!important;padding:38px 17px 28px!important}
  .footer-brand img{max-width:185px!important}
  .footer-main>div:not(.footer-brand){
    padding-top:18px!important;border-top:1px solid rgba(255,255,255,.07)!important;
  }
  .footer-main a{min-height:29px!important;display:flex!important;align-items:center!important}
  .footer-bottom{padding:19px 17px 88px!important}

  /* ---------- Floating CTA ---------- */
  .floating-project{
    left:10px!important;right:10px!important;bottom:10px!important;
    min-height:49px!important;
    border:1px solid rgba(255,199,0,.24)!important;
    border-radius:13px!important;
    background:rgba(7,9,9,.94)!important;
    backdrop-filter:blur(16px)!important;
    box-shadow:0 15px 50px rgba(0,0,0,.62)!important;
  }

  /* ---------- Mobile touch ---------- */
  a,button,summary{-webkit-tap-highlight-color:transparent}
  button,a{touch-action:manipulation}
}

/* Very small phones only. */
@media (max-width:380px){
  .v13-wrap{width:calc(100% - 22px)!important}
  .v13-hero h1{font-size:41px!important}
  .v13-hero-meta{grid-template-columns:1fr!important}
  .v14-estimator-options{grid-template-columns:1fr!important}
  .v13-final-content h2{font-size:38px!important}
}