/* ==========================================================
   HOME MOBILE / TABLET POLISH
   Mobile-first overrides for the approved PDF + motion home.
   Desktop design and Blog / Blog Detail styles are untouched.
   ========================================================== */

/* Make responsive calculations predictable on all devices. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{min-width:320px}
img,svg{max-width:100%}
.growth-hero-grid>*,.why-combo-grid>*,.choose-layout>*,.final-cta>*{min-width:0}
.motion-btn,.mini-gradient-btn,.cta-white,.cta-outline,.faq-item button{-webkit-tap-highlight-color:transparent}

/* ---------------- TABLET / SMALL LAPTOP ---------------- */
@media (max-width:960px){
  .container{width:min(calc(100% - 36px),920px)}

  /* Hero becomes a deliberate stacked composition before it gets cramped. */
  .growth-hero{padding:38px 0 82px;min-height:auto}
  .growth-hero-grid{grid-template-columns:1fr;gap:20px;min-height:0}
  .growth-hero-copy{text-align:center;max-width:760px;margin:0 auto}
  .growth-hero-copy h1{font-size:clamp(38px,6vw,48px);margin-inline:auto;max-width:720px}
  .growth-hero-copy>p{margin-inline:auto;max-width:680px}
  .growth-hero-actions,.hero-trust-line{justify-content:center}
  .seo-browser-scene{width:min(640px,100%);min-height:365px;margin:0 auto}
  .browser-shell{left:18px;right:18px;top:34px}
  .dashboard-glow{left:50%;transform:translateX(-50%);width:430px;height:360px;top:3px}
  .chip-search{left:4px;top:48px}
  .chip-speed{right:3px;top:178px}
  .chip-mobile{left:38px;bottom:7px}

  .service-duo{grid-template-columns:1fr;max-width:780px;margin-inline:auto}
  .why-combo-grid{grid-template-columns:1fr;gap:26px}
  .why-copy{order:1;max-width:760px;margin-inline:auto;text-align:center}
  .orbit-panel{order:2}
  .benefit-four{text-align:left}

  /* Process switches to an easy-to-scan vertical timeline on tablets. */
  .process-track{grid-template-columns:1fr;gap:12px;padding:22px 20px 22px 76px;overflow:visible}
  .process-progress{left:48px;top:48px;bottom:48px;right:auto;width:2px;height:auto;border-top:0;border-left:2px dashed #8dc5ff}
  .process-progress i{top:0;left:-2px;width:2px;height:0}
  .process-track.in-view .process-progress i{animation:lineGrowV 2.2s .25s ease forwards}
  .process-step{text-align:left;padding:14px 16px;min-height:76px;border:1px solid #e4eef9;border-radius:14px;background:rgba(255,255,255,.82);box-shadow:0 8px 20px rgba(9,70,145,.045)}
  .process-icon{position:absolute;left:-56px;top:14px;margin:0;width:48px;height:48px;background:#fff}
  .process-step b{font-size:12px;margin-bottom:5px}
  .process-step p{font-size:11px;line-height:1.55}

  .growth-benefits-grid{grid-template-columns:repeat(3,1fr)}
  .growth-benefits-grid article:nth-child(3n):after{display:none}
  .growth-benefits-grid article:nth-child(-n+3){border-bottom:1px solid #e6edf5}

  .choose-layout{grid-template-columns:1fr 1fr}
  .choose-art{grid-column:1/3;grid-row:2;min-height:225px;order:initial}
  .choose-copy{grid-column:1;grid-row:1}
  .contributor-copy{grid-column:2;grid-row:1}
  .choose-art img{height:210px}

  .final-cta{grid-template-columns:1fr .32fr}
  .home-three-posts{grid-template-columns:repeat(2,1fr)}
  .home-post:last-child{grid-column:1/3;max-width:50%;justify-self:center;width:100%}
  .faq-grid{grid-template-columns:1fr;gap:28px}
  .faq-intro{text-align:center}
  .faq-intro p{margin-inline:auto}
  .faq-title-art{margin-inline:auto}
}

/* ---------------- MOBILE ---------------- */
@media (max-width:700px){
  :root{--mobile-radius:17px}
  .container{width:calc(100% - 28px)}

  /* Header */
  .site-header{height:66px}
  .nav-row{height:66px;padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
  .brand img{width:122px}
  .search-btn,.menu-toggle{width:40px;height:40px}
  .nav-actions{gap:7px;margin-right:7px}
  .mobile-nav{top:66px;left:12px;right:12px;padding:8px;border-radius:15px;max-height:calc(100vh - 84px);overflow:auto}
  .mobile-nav a{min-height:44px;display:flex;align-items:center;padding:10px 12px}

  /* Hero */
  .growth-hero{padding:27px 0 69px;background:radial-gradient(circle at 82% 13%,rgba(31,157,253,.19),transparent 31%),radial-gradient(circle at 11% 68%,rgba(1,67,206,.075),transparent 28%),linear-gradient(180deg,#f8fcff 0,#eef8ff 54%,#f9fcff 100%)}
  .hero-grid-bg{opacity:.19;background-size:38px 38px;mask-image:linear-gradient(to bottom,#000 0,#000 60%,transparent 100%)}
  .hero-orb-a{width:220px;height:220px;right:-100px;top:-84px}
  .hero-orb-b{width:150px;height:150px;left:-55px;bottom:175px}
  .growth-hero-grid{gap:14px}
  .growth-hero-copy{padding:0 2px}
  .micro-label{font-size:9px;line-height:1.35;letter-spacing:.065em;padding:6px 9px;max-width:100%;justify-content:center;text-align:center}
  .growth-hero-copy h1{font-size:clamp(31px,9vw,38px);line-height:1.09;letter-spacing:-1.3px;margin:13px auto 12px;max-width:570px}
  .growth-hero-copy>p{font-size:14px;line-height:1.62;margin:0 auto 17px;max-width:560px;color:#435269}
  .growth-hero-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;width:min(100%,500px);margin-inline:auto}
  .motion-btn{width:100%;min-height:45px;padding:0 12px;border-radius:11px;font-size:12px;gap:7px}
  .motion-btn:hover{transform:none}
  .hero-trust-line{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;width:min(100%,520px);margin:13px auto 0;font-size:9px}
  .hero-trust-line span{min-width:0;padding:7px 5px;border:1px solid rgba(1,67,206,.09);border-radius:999px;background:rgba(255,255,255,.62);white-space:nowrap;text-align:center;overflow:hidden;text-overflow:ellipsis}

  /* The dashboard remains a real illustration, but is scaled for thumb-sized screens. */
  .seo-browser-scene{min-height:285px;width:min(100%,520px);margin-top:2px;transform:none!important}
  .dashboard-glow{width:310px;height:270px;top:10px;left:50%;transform:translateX(-50%)}
  .browser-shell{left:0;right:0;top:29px;border-radius:17px;box-shadow:0 18px 36px rgba(0,61,153,.15)}
  .browser-top{height:34px;padding:0 10px;gap:5px}
  .browser-top i{width:6px;height:6px}
  .browser-top span{font-size:7px;padding:4px 7px;margin-left:5px}
  .browser-body{grid-template-columns:38px 1fr;min-height:205px}
  .browser-sidebar{padding:15px 8px;gap:11px}
  .browser-sidebar b{height:17px;border-radius:5px}
  .browser-content{padding:14px 12px}
  .browser-title-row small{font-size:8px}
  .browser-title-row strong{font-size:14px}
  .rank-pill{font-size:8px;padding:5px 7px}
  .chart-area{height:88px;margin:10px 0 7px}
  .metric-row{gap:5px}
  .metric-row div{padding:7px 6px;border-radius:7px}
  .metric-row small{font-size:6.5px}
  .metric-row b{font-size:10px}
  .float-chip{padding:7px 8px;gap:6px;border-radius:11px;box-shadow:0 10px 24px rgba(5,62,147,.12)}
  .float-chip>span{width:25px;height:25px;border-radius:8px;font-size:11px}
  .float-chip small{font-size:6px}
  .float-chip b{font-size:7.5px}
  .chip-search{left:-3px;top:8px}
  .chip-speed{right:-3px;top:auto;bottom:9px}
  .chip-mobile{display:none}
  .hero-wave{height:72px}

  /* Proof: four compact independent tiles are easier to read than one dense strip. */
  .proof-section{margin-top:-14px;padding:0 0 6px}
  .proof-strip{grid-template-columns:1fr 1fr;gap:8px;background:transparent;border:0;box-shadow:none;overflow:visible}
  .proof-item{min-height:78px;padding:12px 10px;justify-content:flex-start;border:1px solid rgba(255,255,255,.11)!important;border-radius:14px;background:linear-gradient(135deg,#072b55,#06458d 62%,#075fdc);box-shadow:0 10px 22px rgba(2,43,100,.12)}
  .proof-icon{width:35px;flex:0 0 35px;font-size:20px;text-align:center}
  .proof-item strong{font-size:17px}
  .proof-item small{font-size:9px;line-height:1.3;margin-top:4px}

  /* Shared spacing */
  .section-space{padding:39px 0}
  .center-heading{margin-bottom:22px}
  .center-heading.compact{margin-bottom:20px}
  .section-label{font-size:10px;letter-spacing:.11em;margin-bottom:8px}
  .center-heading h2,.why-copy h2{font-size:clamp(26px,7.8vw,31px);line-height:1.13;letter-spacing:-.85px}
  .center-heading p{font-size:13.5px;line-height:1.62;margin-top:10px}

  /* Services */
  .services-intro{padding:43px 0 34px}
  .service-duo{gap:12px}
  .pdf-service-card{padding:18px;border-radius:var(--mobile-radius);box-shadow:0 9px 22px rgba(23,75,143,.05)}
  .service-card-head{gap:11px;align-items:flex-start}
  .service-square{width:43px;height:43px;flex:0 0 43px;border-radius:11px;font-size:20px}
  .service-card-head h3{font-size:17px;line-height:1.25}
  .service-card-head p{font-size:10.5px;margin-top:2px}
  .service-description{font-size:13px;line-height:1.6;margin:13px 0 14px}
  .service-list.two-col{grid-template-columns:1fr 1fr;column-gap:12px;row-gap:8px}
  .service-list span{font-size:11.5px;line-height:1.35;padding-left:18px}
  .mini-gradient-btn{min-height:40px;border-radius:9px;font-size:11px;padding:0 14px}

  /* SEO + Web Design story */
  .why-combo-section{padding:54px 0 34px}
  .soft-wave{height:46px}
  .why-combo-grid{gap:18px}
  .why-copy{text-align:left}
  .why-copy>p{font-size:13px;line-height:1.62;margin-bottom:10px}
  .benefit-four{grid-template-columns:1fr 1fr;gap:10px;margin-top:17px}
  .benefit-four>div{grid-template-columns:34px 1fr;column-gap:8px;padding:12px 10px;border:1px solid #e5eef8;border-radius:13px;background:#fff}
  .benefit-four>div>span{width:32px;height:32px;border-radius:9px;font-size:14px}
  .benefit-four strong{font-size:10.5px;line-height:1.3}
  .benefit-four p{font-size:8.6px!important;line-height:1.42!important;margin-top:3px!important}
  .orbit-panel{height:290px;width:330px;max-width:100%;transform:none;margin:0 auto -2px}
  .ring-one{width:220px;height:220px}
  .ring-two{width:181px;height:181px}
  .orbit-center{width:120px;height:120px}
  .orbit-center strong{font-size:16px}
  .orbit-center small{font-size:7px;margin-top:5px}
  .orbit-node{width:82px;font-size:7.5px}
  .orbit-node span{width:42px;height:42px;font-size:16px;margin-bottom:5px}
  .node-top{top:1px}.node-bottom{bottom:0}.node-left{left:0}.node-right{right:0}

  /* Process timeline */
  .process-section{padding:35px 0 30px}
  .process-track{gap:9px;padding:18px 11px 18px 64px;border-radius:var(--mobile-radius);background:linear-gradient(135deg,#f9fcff,#f1f8ff)}
  .process-progress{left:39px;top:40px;bottom:40px}
  .process-step{min-height:70px;padding:12px 12px;border-radius:12px}
  .process-icon{left:-47px;top:12px;width:42px;height:42px;font-size:18px}
  .process-step b{font-size:11.5px;padding-top:0}
  .process-step p{font-size:10.5px;line-height:1.5}

  /* Growth benefits */
  .growth-benefits-section{padding:7px 0 29px}
  .growth-benefits-grid{grid-template-columns:1fr 1fr;border-radius:var(--mobile-radius);overflow:hidden}
  .growth-benefits-grid article{padding:16px 10px;min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}
  .growth-benefits-grid article:after{display:block!important;top:15%;bottom:15%}
  .growth-benefits-grid article:nth-child(even):after{display:none!important}
  .growth-benefits-grid article:nth-child(-n+4){border-bottom:1px solid #e6edf5}
  .growth-benefits-grid article:nth-child(n+5){border-bottom:0}
  .growth-benefits-grid article>span{width:38px;height:38px;font-size:16px;margin-bottom:8px}
  .growth-benefits-grid h3{font-size:12px;line-height:1.3;margin-bottom:5px}
  .growth-benefits-grid p{font-size:9.7px;line-height:1.45;max-width:180px}

  /* Why choose / contributor */
  .choose-section{padding:14px 0 29px}
  .choose-layout{display:grid;grid-template-columns:1fr;border-radius:var(--mobile-radius);overflow:hidden}
  .choose-copy,.contributor-copy{grid-column:auto;grid-row:auto;padding:20px 18px}
  .choose-copy{order:1}
  .choose-art{grid-column:auto;grid-row:auto;order:2;min-height:180px;padding-top:3px}
  .choose-art img{height:180px}
  .contributor-copy{order:3}
  .choose-copy h2,.contributor-copy h2{font-size:20px;margin-bottom:12px}
  .choose-copy ul{gap:7px}
  .choose-copy li{font-size:12px;line-height:1.35}
  .contributor-copy p{font-size:13px;line-height:1.58;margin-bottom:15px}

  /* CTA uses the rocket as a decorative layer instead of consuming a whole row. */
  .final-cta-section{padding:0 0 29px}
  .final-cta{display:block;min-height:250px;padding:24px 20px 88px;border-radius:var(--mobile-radius);overflow:hidden}
  .cta-copy{max-width:none}
  .cta-copy h2{font-size:24px;line-height:1.12;margin-bottom:9px;max-width:420px}
  .cta-copy p{font-size:12.5px;line-height:1.58;max-width:470px;margin-bottom:14px}
  .cta-actions{gap:8px}
  .cta-white,.cta-outline{min-height:40px;padding:0 13px;font-size:10.5px;border-radius:9px}
  .rocket-scene{position:absolute;right:4px;bottom:-8px;width:150px;height:112px;pointer-events:none;opacity:.95}
  .rocket{width:72px;right:31px;top:-8px}
  .cloud-a{width:106px;right:0}.cloud-b{width:70px;right:74px}.cloud-c{width:48px;right:-14px}

  /* Latest blog becomes a compact mobile editorial list. */
  .home-blog-section{padding:11px 0 31px}
  .home-blog-head{margin-bottom:13px}
  .home-blog-head h2{font-size:21px}
  .home-blog-head>a{font-size:11px}
  .home-three-posts{grid-template-columns:1fr;gap:10px}
  .home-post,.home-post:last-child{grid-column:auto;max-width:none;width:100%;border-radius:14px}
  .home-post a{display:grid;grid-template-columns:118px minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:12px;align-items:start;padding:10px}
  .home-post img{grid-column:1;grid-row:1/4;width:118px;height:92px;aspect-ratio:auto;border-radius:10px;object-fit:cover}
  .home-post span{grid-column:2;grid-row:1;justify-self:start;margin:1px 0 0;padding:4px 6px;font-size:7px}
  .home-post h3{grid-column:2;grid-row:2;margin:6px 0 4px;font-size:13px;line-height:1.35}
  .home-post small{grid-column:2;grid-row:3;margin:0;font-size:9px}

  /* FAQ */
  .faq-section{padding:32px 0 38px}
  .faq-grid{gap:21px}
  .faq-title-art{height:28px;width:94px;margin-bottom:-7px}
  .q-bubble{font-size:18px}
  .faq-intro h2{font-size:clamp(33px,10vw,40px);line-height:1.02;letter-spacing:-1.4px}
  .faq-intro p{font-size:12.5px;line-height:1.62;margin-top:12px;max-width:480px}
  .faq-list{gap:8px;padding-right:0}
  .faq-list:after{display:none}
  .faq-item{border-radius:12px}
  .faq-item button{min-height:52px;padding:11px 10px 11px 14px;font-size:12.5px;line-height:1.35}
  .faq-item button b{width:27px;height:27px;flex-basis:27px}
  .faq-answer{padding:0 14px 14px;font-size:12px;line-height:1.58}

  /* Footer */
  .footer-grid{padding-top:24px;padding-bottom:20px;gap:22px}
  .footer-about p{font-size:12px;max-width:310px}
  .footer-col a,.footer-col span{font-size:12px}
  .footer-bottom .container{padding-bottom:max(10px,env(safe-area-inset-bottom))}
}

/* ---------------- SMALL PHONES ---------------- */
@media (max-width:480px){
  .container{width:calc(100% - 24px)}
  .growth-hero{padding-top:23px}
  .growth-hero-copy h1{font-size:30px;letter-spacing:-1px}
  .growth-hero-copy>p{font-size:13.5px}
  .growth-hero-actions{grid-template-columns:1fr}
  .hero-trust-line{grid-template-columns:1fr 1fr;max-width:340px}
  .hero-trust-line span:last-child{grid-column:1/3;justify-self:center;width:calc(50% - 3px)}
  .seo-browser-scene{min-height:268px}
  .browser-shell{top:27px}
  .proof-strip{gap:7px}
  .proof-item{min-height:73px;padding:10px 8px;gap:8px}
  .proof-icon{width:29px;flex-basis:29px;font-size:18px}
  .proof-item strong{font-size:16px}
  .proof-item small{font-size:8.3px}
  .service-list.two-col{grid-template-columns:1fr}
  .benefit-four{grid-template-columns:1fr}
  .benefit-four>div{grid-template-columns:34px 1fr}
  .benefit-four p{font-size:9.5px!important}
  .orbit-panel{width:300px;height:278px}
  .ring-one{width:205px;height:205px}.ring-two{width:170px;height:170px}
  .orbit-center{width:112px;height:112px}.orbit-center strong{font-size:15px}
  .orbit-node{width:74px}.orbit-node span{width:39px;height:39px}
  .growth-benefits-grid article{min-height:146px;padding:15px 8px}
  .cta-actions{display:grid;grid-template-columns:1fr;max-width:270px}
  .cta-white,.cta-outline{width:100%;justify-content:center}
  .final-cta{padding-bottom:91px}
  .home-post a{grid-template-columns:105px minmax(0,1fr);column-gap:10px}
  .home-post img{width:105px;height:88px}
  .footer-grid{grid-template-columns:1fr}
  .footer-about,.footer-contact,.footer-col:nth-child(4){grid-column:auto}
}

/* ---------------- ULTRA SMALL / 320px ---------------- */
@media (max-width:360px){
  .container{width:calc(100% - 20px)}
  .brand img{width:112px}
  .growth-hero-copy h1{font-size:28px;line-height:1.1}
  .micro-label{font-size:8px}
  .growth-hero-copy>p{font-size:13px}
  .hero-trust-line{font-size:8.2px}
  .seo-browser-scene{min-height:252px}
  .browser-content{padding:12px 9px}
  .browser-title-row strong{font-size:12px}
  .chart-area{height:80px}
  .metric-row b{font-size:9px}
  .float-chip{transform:scale(.92)}
  .proof-item{min-height:70px}
  .section-space{padding:35px 0}
  .center-heading h2,.why-copy h2{font-size:25px}
  .pdf-service-card{padding:16px}
  .growth-benefits-grid article{min-height:142px}
  .growth-benefits-grid h3{font-size:11px}
  .growth-benefits-grid p{font-size:9px}
  .choose-copy,.contributor-copy{padding:18px 16px}
  .final-cta{padding:21px 17px 90px}
  .cta-copy h2{font-size:22px}
  .home-post a{grid-template-columns:96px minmax(0,1fr)}
  .home-post img{width:96px;height:84px}
  .home-post h3{font-size:12px}
  .faq-intro h2{font-size:32px}
}

/* Touch devices should feel calm; motion remains ambient, never required. */
@media (hover:none) and (pointer:coarse){
  .motion-btn:after{display:none}
  .pdf-service-card:hover,.home-post:hover,.process-step:hover .process-icon,.growth-benefits-grid article:hover>span{transform:none;box-shadow:inherit}
  .seo-browser-scene{transition:none}
}