/* HG Kreatif: final readability and visual hierarchy pass */
@media (min-width:651px) and (max-width:900px){
  body{font-size:15px}
  .section-heading h2{font-size:34px}
  .section-heading p{font-size:12px}
  .service-item strong{font-size:14px}
  .service-item small,.feature-item small,.step>small{font-size:10.5px}
  .feature-item strong,.step>strong{font-size:13px}
  .faq summary{font-size:11px}
  .testimonial p{font-size:12px}
  .about-copy p{font-size:12px}
  .blog-content strong{font-size:13px}
}
@media (max-width:650px){
  body{font-size:15px}
  .topstrip{font-size:8px;height:28px}
  .navlinks{font-size:13px}
  .hero{padding:34px 21px 57px}
  .hero h1{font-size:clamp(37px,8.3vw,46px);line-height:1.07}
  .hero-content>p{font-size:11.5px;line-height:1.9}
  .hero-kicker{font-size:8.5px}
  .hero-actions .button{font-size:9px;padding:12px 14px}
  .text-link{font-size:9.5px}
  .hero-proof{font-size:9.5px}
  .trust-row{font-size:8px;line-height:1.6}
  .trust-row b{font-size:9px}
  .section{padding:54px 0}
  .section-heading{margin-bottom:28px}
  .section-heading>span{font-size:8.5px}
  .section-heading h2{font-size:27px;letter-spacing:-1.1px}
  .section-heading p{font-size:10px;line-height:1.8}
  /* On narrow screens the service blocks become a readable two-column set below the phone visual. */
  .service-layout{display:grid;grid-template-columns:1fr 1fr;gap:18px 13px}
  .service-visual{grid-column:1/-1;grid-row:1;height:245px;margin-bottom:0}
  .service-column{display:contents}
  .service-item{display:grid;grid-template-columns:36px minmax(0,1fr);gap:9px;align-items:start;min-width:0}
  .service-item .service-icon{width:35px;height:35px;margin:0;border-radius:10px}
  .service-item .service-icon .icon{width:18px;height:18px}
  .service-item strong{display:block;font-size:10px;line-height:1.4;margin:1px 0 5px}
  .service-item small{display:block;font-size:8.8px;line-height:1.65}
  .visual-orbit{width:170px;height:170px}
  .phone-mock{width:118px;height:232px}
  .phone-top{font-size:7.5px}
  .phone-hero{font-size:9px;height:45px}
  .visual-label{font-size:7px;padding:8px 10px}
  .visual-label b{font-size:9.5px}
  .inline-cta{padding:17px;margin-top:24px}
  .inline-cta strong{font-size:13px;line-height:1.5}
  .inline-cta small{font-size:9px;line-height:1.7}
  .inline-cta .button{font-size:9px}
  .feature-grid{gap:19px 12px}
  .feature-item{grid-template-columns:34px minmax(0,1fr);gap:8px}
  .feature-icon{width:33px;height:33px}
  .feature-item strong{font-size:10px;line-height:1.4}
  .feature-item small{font-size:8.8px;line-height:1.7}
  .stats-grid strong{font-size:26px}
  .stats-grid small{font-size:7.5px;line-height:1.5}
  .steps-grid{gap:24px 12px}
  .step-icon{width:56px;height:56px}
  .step>b{font-size:7.5px}
  .step>strong{font-size:10px;line-height:1.45}
  .step>small{font-size:8.8px;line-height:1.75}
  .project-grid{grid-template-columns:1fr 1fr;gap:12px}
  .project-card:nth-child(3){display:block}
  .project-media{height:160px}
  .project-art .art-overline{font-size:7px}
  .project-art strong{font-size:15px;line-height:1.15}
  .project-art small{font-size:7px}
  .project-meta span{font-size:7.5px}
  .project-meta strong{font-size:10px;line-height:1.4}
  .blog-grid{grid-template-columns:1fr;gap:11px}
  .blog-card{display:grid;grid-template-columns:120px minmax(0,1fr)}
  .blog-cover{height:120px}
  .cover-art{padding:10px}
  .cover-art small{font-size:6.5px}
  .cover-art strong{font-size:13px;line-height:1.15;margin-top:12px}
  .blog-content{padding:13px}
  .blog-content small{font-size:7px;line-height:1.5}
  .blog-content strong{font-size:10px;line-height:1.55}
  .blog-content p{font-size:8.8px;line-height:1.65}
  .platform-panel{padding:23px 14px}
  .platform-panel .section-heading h2{font-size:19px}
  .platform-panel .section-heading p{font-size:8px}
  .platforms span{font-size:8px;padding:7px 10px}
  .faq-grid{grid-template-columns:1fr;gap:8px}
  .faq summary{font-size:9.5px;line-height:1.55}
  .faq p{font-size:8.8px;line-height:1.75}
  .testimonial-grid{grid-template-columns:1fr;gap:10px}
  .testimonial{padding:17px}
  .testimonial p{font-size:9.5px;line-height:1.8}
  .testimonial strong{font-size:9.5px}
  .testimonial small{font-size:8px}
  .about-copy h2{font-size:26px;line-height:1.25}
  .about-copy p{font-size:9.5px;line-height:1.85}
  .about-copy .button{font-size:9px}
  .final-cta{padding:23px}
  .final-cta h2{font-size:20px;line-height:1.3}
  .final-cta p{font-size:9px;line-height:1.7}
  .final-cta .button{font-size:9px}
  .footer-main p{font-size:9px;line-height:1.8}
  .footer-col strong{font-size:8px}
  .footer-col a,.footer-col span{font-size:9px;line-height:1.6}
  .footer-bottom{font-size:7px;line-height:1.6}
  .inner-hero h1{font-size:38px}
  .inner-hero p{font-size:11px;line-height:1.8}
  .service-large strong{font-size:11px}
  .service-large p{font-size:9px;line-height:1.7}
  .service-large>small{font-size:9px}
  .detail-main h2{font-size:23px}
  .detail-main p,.detail-side p,.contact-info>p{font-size:10px;line-height:1.8}
  .detail-side strong,.contact-info h2{font-size:18px}
  .contact-form label{font-size:8.5px}
  .contact-form input,.contact-form select,.contact-form textarea{font-size:11px;padding:12px}
  .privacy-note{font-size:8px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}