/* Mobile and tablet QA refinements: consistent scale, spacing and alignment. */
@media (max-width: 980px) {
  :root { --container: min(100% - 40px, 900px); }

  .main-header,
  .nav-shell { height: 76px; }
  .nav-menu { inset: 76px 0 auto; }
  .brand img { width: 140px; height: 42px; }

  .main-slider {
    min-height: 100svh;
    padding: 100px 0 42px;
  }
  .slider-content { padding: 22px 0 16px; }
  .slider-dots { display: none; }
  .hero-brand-mark {
    width: clamp(240px, 39vw, 320px);
    margin-bottom: 18px;
    border-radius: 15px;
  }
  .main-slider h1 {
    max-width: 780px;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(3.05rem, 7.7vw, 4.03rem);
    font-weight: 700;
    line-height: .98;
    letter-spacing: -.035em;
    text-transform: none;
    text-wrap: balance;
  }
  .main-slider h1 span { display:block; }
  .hero-arrow { width: 50px; height: 50px; margin-top: 22px; }

  .sliding-track { padding: 13px 0; }
  .section { padding: 78px 0; }
  .project-three { padding-top: 72px; }
  h2,
  .project-item strong,
  .app-card h3,
  .process-grid h3 {
    font-family: "Plus Jakarta Sans", Arial, sans-serif;
  }
  h2 {
    font-size: clamp(2.3rem, 6.5vw, 3.4rem);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -.045em;
    text-wrap: balance;
  }
  .center-head { margin-bottom: 36px; }
  .section-kicker { margin-bottom: 11px; }

  .portfolio-choice { width: min(650px,100%); margin-top: 28px; gap: 0; }
  .choice-button {
    min-height: 72px;
    gap: 12px;
    padding: 9px 13px;
    border-radius: 999px;
    flex-basis: 315px;
  }
  .choice-icon { flex-basis: 46px; width: 46px; height: 46px; }
  .choice-button strong { font-size: 14px; }
  .choice-button small { font-size: 10px; line-height: 1.3; }

  .project-showcase { gap: 14px; padding-inline: 20px; background: transparent; border: 0; }
  .project-item { overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 16px; background: #0b0b0b; }
  .project-item button {
    min-height: 390px;
    display: grid;
    grid-template-rows: 180px minmax(72px,auto) 30px;
    gap: 9px;
    padding: 0 0 18px;
  }
  .project-item button::after { top: 14px; right: 14px; width: 42px; height: 42px; font-size: 22px; }
  .project-item strong { display:flex; align-items:flex-end; margin-inline:18px; font-size:clamp(1.55rem,4.7vw,2rem); line-height:1.02; letter-spacing:-.04em; }
  .project-item em { margin:0 18px; font-size:10px; line-height:1.35; }
  .project-item img { width:100%; height:180px; margin:0; padding:0; object-fit:contain; }

  .apps-portfolio::before { display:none; }
  .apps-heading { gap:16px; margin-bottom:34px; }
  .apps-heading > p { max-width:680px; margin:0; font-size:14px; line-height:1.7; }
  .app-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
  .app-card,.app-card:last-child { grid-column:auto; width:100%; border-radius:16px; }
  .app-card-body { padding:18px; }
  .app-card h3 { margin:12px 0 7px; font-size:clamp(1.35rem,3.4vw,1.8rem); line-height:1.05; letter-spacing:-.04em; }
  .app-card p { min-height:46px; margin-bottom:18px; font-size:12px; }
  .try-app-button { width:100%; min-height:48px; }
  .about-webcriolla { grid-template-columns:1fr; gap:22px; margin-top:48px; padding:36px; border-radius:24px; }
  .about-brand { min-height:300px; }
  .about-brand img { width:min(416px,80vw); }
  .about-copy h2 { font-size:clamp(2.65rem,8vw,4.5rem); }

  .process-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; background:transparent; border:0; }
  .process-grid article { min-height:235px; padding:24px; border:1px solid rgba(255,255,255,.11); border-radius:16px; background:#0b0b0b; }
  .process-grid h3 { margin:26px 0 10px; font-size:22px; line-height:1.15; }
  .process-grid p { font-size:14px; line-height:1.65; }

  .cta-grid { gap:34px; }
  .contact-form { border-radius:16px; }
  .contact-form input:not([type="hidden"]),
  .contact-form textarea { border-radius:8px; }
  .contact-form .ogency-btn { min-height:50px; border-radius:999px; }
}

@media (max-width: 640px) {
  :root { --container: min(100% - 32px, 600px); }
  .main-header,
  .nav-shell { height: 72px; }
  .nav-menu { inset:72px 0 auto; }
  .brand img { width:126px; height:38px; }
  .main-slider { min-height:100svh; padding:92px 0 36px; }
  .slider-content { padding:12px 0; }
  .hero-brand-mark { width:min(72vw,270px); margin-bottom:16px; border-radius:13px; }
  .main-slider h1 { width:min(350px,calc(100vw - 24px)); max-width:none; padding-inline:0; font-size:clamp(2.59rem,11.15vw,2.93rem); line-height:.98; }
  .hero-arrow { width:48px; height:48px; margin-top:20px; }

  .section { padding:66px 0; }
  .project-three { padding-top:62px; }
  h2 { font-size:clamp(2rem,9.5vw,2.75rem); line-height:1.08; }
  .center-head,.two-col-head { margin-bottom:30px; text-align:left; }
  .center-head { margin-inline:auto; }
  .portfolio-choice { width:100%; display:flex; grid-template-columns:none; gap:0; margin-top:24px; }
  .choice-button { min-height:66px; flex:1 1 0; justify-content:center; gap:8px; padding:8px; }
  .choice-web { margin-right:20px; }
  .choice-icon { flex-basis:40px; width:40px; height:40px; }
  .choice-button strong { font-size:13px; white-space:nowrap; }

  .project-showcase { grid-template-columns:1fr; gap:12px; padding-inline:16px; }
  .project-item button { min-height:350px; grid-template-rows:165px minmax(58px,auto) 26px; padding:0 0 17px; }
  .project-item strong { font-size:clamp(1.55rem,7.4vw,2rem); }
  .project-item img { height:165px; }

  .apps-heading { margin-bottom:26px; }
  .app-grid { grid-template-columns:1fr; gap:14px; }
  .app-card-body { padding:20px; }
  .app-card h3 { font-size:1.75rem; }
  .app-card p { min-height:0; font-size:13px; }
  .about-webcriolla { margin-top:40px; padding:24px 20px 34px; border-radius:20px; }
  .about-webcriolla::after { right:20px; bottom:13px; font-size:8px; }
  .about-brand { min-height:240px; }
  .about-brand::before { width:250px; height:250px; }
  .about-brand::after { width:185px; height:185px; }
  .about-brand img { width:min(351px,calc(100vw - 40px)); }
  .about-orbit { width:11px; height:11px; transform:translate(110px,-52px); }
  .about-copy h2 { margin-bottom:22px; font-size:clamp(2.35rem,12vw,3.15rem); }
  .about-copy > p:not(.section-kicker) { font-size:.94rem; line-height:1.7; }

  .process-grid { grid-template-columns:1fr; gap:12px; }
  .process-grid article { min-height:0; padding:22px; }
  .process-grid h3 { margin:22px 0 8px; }

  .cta-grid { gap:28px; }
  .contact-form { grid-template-columns:1fr; padding:20px; }
  .contact-form label,
  .contact-form input:not([type="hidden"]),
  .contact-form select,
  .contact-form textarea,
  .contact-form .ogency-btn { grid-column:1; }
}