/* SGProtected mobile optimization layer. Loaded after style.css so phones get a clean, stable layout. */
@media (max-width: 780px) {
  html { overflow-x: hidden; }
  body { min-width: 0; overflow-x: hidden; }
  .content-wrap { width: calc(100% - 32px); max-width: 620px; }

  .site-header { height: 64px; padding: 0 16px; }
  .brand { gap: 8px; font-size: 15px; }
  .brand-image { width: 32px; height: 32px; border-radius: 7px; }
  .menu-toggle { width: 42px; height: 42px; padding: 9px 7px; }
  .mobile-menu { top: 64px; right: 12px; left: 12px; padding: 8px 16px 16px; border: 1px solid var(--line-dark); border-top: 0; border-radius: 0 0 16px 16px; }
  .mobile-menu a { padding: 14px 2px; font-size: 11px; }
  .mobile-menu .mobile-cta { margin-top: 12px; border-radius: 4px; }

  .hero { min-height: 0; padding: 88px 0 0; overflow: hidden; }
  .hero-sticky { position: relative; top: auto; display: block; height: auto; min-height: 0; padding: 0 0 42px; overflow: visible; }
  .hero .hero-content { width: calc(100% - 32px); margin: 0 auto; transform: none !important; opacity: 1 !important; filter: none !important; }
  .hero-title { max-width: 100%; margin-top: 18px; font-size: clamp(46px, 14vw, 70px); line-height: .91; letter-spacing: -.075em; }
  .hero-copy { max-width: 34rem; margin-top: 23px; font-size: 14px; line-height: 1.68; }
  .hero-actions { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 27px; }
  .button { width: 100%; min-height: 52px; padding: 0 16px; }
  .hero-stats { width: 100%; margin-top: 35px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-stats div, .hero-stats div:not(:first-child) { min-width: 0; padding: 15px 8px 14px 0; border-right: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
  .hero-stats div:nth-child(even) { padding-left: 12px; border-right: 0; }
  .hero-stats div:nth-child(n+3) { padding-top: 14px; border-bottom: 0; }
  .hero-stats strong { font-size: 24px; }
  .hero-stats small { max-width: 90px; font-size: 8px; line-height: 1.35; }
  .hero-object-stage { position: relative; top: auto; right: auto; bottom: auto; width: calc(100% + 32px); height: 285px; margin: 18px -16px 0; transform: none !important; opacity: 1 !important; }
  .hero-object-stage::before { inset: 16% 19%; }
  .hero-object-stage::after { opacity: .22; }
  #heroParticleCanvas { opacity: .48; }
  .cyber-object { width: 100%; height: 90%; }
  .laptop-lid { width: 76%; padding: 8px; border-radius: 12px 12px 6px 6px; }
  .terminal-window { inset: 8px; padding: 9px 10px; font-size: 8px; }
  .terminal-top { padding-bottom: 8px; font-size: 6px; }
  .terminal-window p { margin-top: 9px; }
  .terminal-chart { right: 11px; bottom: 10px; gap: 3px; height: 34px; }
  .terminal-chart i { width: 5px; }
  .laptop-base { bottom: 12%; }
  .object-phone .phone-frame { width: 126px; }
  .terminal-panel { width: 78%; padding: 14px; }
  .terminal-panel strong { margin-top: 16px; font-size: 25px; }
  .security-key { transform: rotate(-22deg) scale(.58); }
  .shield-shape { width: 122px; height: 150px; }
  .shield-shape span { font-size: 27px; }
  .hero-object-caption, .scroll-cue { display: none; }

  .ticker-wrap { padding: 13px 0; }
  .ticker-track { gap: 26px; }
  .ticker-item { font-size: 8px; }

  .experience { min-height: 260vh; }
  .experience-intro { width: calc(100% - 32px); padding-top: 12vh; padding-bottom: 28px; }
  .experience-intro h2 { font-size: clamp(48px, 13.5vw, 72px); line-height: .93; }
  .experience-intro p { margin-top: 24px; font-size: 14px; line-height: 1.7; }
  .experience-stage { min-height: 205vh; }
  .experience-sticky { display: flex; flex-direction: column; justify-content: space-between; align-items: center; width: calc(100% - 32px); height: calc(100svh - 64px); min-height: 0; padding: 24px 0 70px; gap: 18px; }
  .experience-visual { flex: 0 0 auto; width: min(78vw, 315px); aspect-ratio: 1; margin: 0 auto; }
  .experience .defense-device { width: 64%; border-radius: 23px; }
  .experience-copy { position: relative; right: auto; bottom: auto; left: auto; width: 100%; min-height: 235px; flex: 0 0 235px; }
  .story-panel { top: 0; width: 100%; transform: translate3d(0, 24px, 0); }
  .story-panel.is-active { transform: translate3d(0, 0, 0); }
  .story-panel h3 { margin: 17px 0 13px; font-size: clamp(31px, 9.5vw, 48px); }
  .story-panel p { font-size: 13px; line-height: 1.7; }
  .experience-progress { right: 16px; bottom: 34px; height: 74px; }

  .services, .threat-room, .why, .process, .about, .contact { padding: 82px 0 88px; }
  .section-heading { margin-bottom: 40px; }
  .eyebrow { max-width: 100%; font-size: 9px; line-height: 1.5; }
  .eyebrow-rule { width: 24px; flex: 0 0 24px; }
  .heading-row { display: block; }
  .heading-row p, .process-heading p { width: auto; margin-top: 22px; font-size: 13px; line-height: 1.72; }
  .section-heading h2, .threat-copy h2, .why-copy h2, .process-heading h2, .contact-copy h2 { font-size: clamp(46px, 12.5vw, 70px); line-height: .94; }

  /* On small screens the moving films become a quiet atmosphere, never a competing layer. */
  .chapter-film { opacity: .16; pointer-events: none; }
  .chapter-film::before { inset: 28% 0 15% 20%; opacity: .3; }
  .chapter-film::after { opacity: .12; }
  .chapter-film .film-object, .chapter-film .film-caption { display: none !important; }

  .services-grid { grid-template-columns: 1fr; gap: 1px; }
  .service-card { min-height: 0; padding: 22px 20px 23px; transform: none !important; }
  .service-card h3 { margin-top: 36px; font-size: 21px; }
  .service-card p { margin-top: 12px; font-size: 12px; line-height: 1.7; }
  .service-tag { padding-top: 20px; font-size: 8px; }

  .threat-layout, .why-layout, .about-layout, .contact-layout { display: block; }
  .threat-copy p, .why-copy .intro, .contact-copy > p { max-width: 100%; font-size: 13px; line-height: 1.75; }
  .threat-legend { margin-top: 25px; font-size: 8px; }
  .threat-stage { min-height: 300px; margin-top: 40px; }
  .stage-hud { left: 14px; right: 14px; font-size: 7px; }
  .hud-top { top: 15px; }.hud-bottom { bottom: 15px; }
  .hud-bottom span:nth-child(2) { display: none; }
  .threat-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 52px; }
  .threat-stat { min-height: 104px; padding: 20px 10px 16px 0; }
  .threat-stat:not(:first-child) { padding-left: 10px; }
  .threat-stat:nth-child(2) { border-right: 0; }
  .threat-stat:nth-child(n+3) { border-top: 1px solid var(--line-dark); }
  .threat-stat strong { font-size: 28px; }
  .threat-stat span { margin-top: 8px; font-size: 8px; line-height: 1.45; }

  .why-features { margin-top: 34px; }
  .why-feature { grid-template-columns: 34px 1fr; gap: 12px; padding: 17px 0; transform: none !important; }
  .feature-icon { width: 30px; height: 30px; }
  .feature-icon::before { margin: 9px 0; }
  .why-feature h3 { font-size: 15px; line-height: 1.25; }
  .why-feature p { font-size: 11px; line-height: 1.65; }
  .why-visual.architecture-visual { width: 100%; min-height: 315px; margin-top: 48px; transform: none !important; }
  .architecture-stack { inset: 14% 7%; transform: rotate(-4deg) skewY(2deg) !important; }
  .architecture-layer { min-height: 68px; padding: 13px 14px; grid-template-columns: 28px 1fr; }
  .architecture-layer b { font-size: 14px; }
  .architecture-layer small { font-size: 8px; }
  .architecture-layer:nth-child(2) { --layer-offset: 14px; }.architecture-layer:nth-child(3) { --layer-offset: 28px; }
  .architecture-caption { right: 14px; bottom: 15px; font-size: 7px; }

  .process-heading { display: block; }
  .process-list { width: calc(100% - 32px); margin: 50px auto 0; }
  .process-line { left: 18px; top: 22px; bottom: 22px; }
  .process-step { grid-template-columns: 38px 1fr; gap: 14px; padding: 21px 0; transform: none !important; opacity: 1 !important; }
  .process-index { width: 38px; height: 38px; }
  .process-index::before { width: 6px; height: 6px; margin: 7px auto; }
  .process-step h3 { padding-top: 6px; font-size: 16px; line-height: 1.25; }
  .process-step p { margin-top: 8px; font-size: 11px; line-height: 1.7; }

  .founder-visual { width: 100%; min-height: 355px; margin: 0 auto 58px; }
  .founder-frame { inset: 10px 18px 22px 0; }
  .founder-badge { left: 10px; right: auto; bottom: 0; max-width: calc(100% - 20px); padding: 13px 14px; gap: 6px; }
  .founder-badge small, .founder-badge strong { font-size: 8px; line-height: 1.35; }
  .founder-overlay { left: 14px; bottom: 14px; font-size: 8px; }
  .founder-name { margin-top: 20px; font-size: clamp(52px, 15vw, 74px) !important; }
  .founder-role { margin-top: 16px; font-size: 9px; line-height: 1.5; }
  .about-bio { margin-top: 21px; font-size: 12px; line-height: 1.78; }
  .skill-chips { gap: 6px; margin-top: 25px; }
  .skill-chips span { padding: 7px 8px; font-size: 8px; }

  .contact-copy h2 { margin-top: 22px; }
  .contact-meta { gap: 10px; margin: 30px 0 36px; font-size: 9px; }
  .contact-form { padding: 18px 15px; }
  .contact-form label { margin-bottom: 15px; }
  .contact-form input, .contact-form select, .contact-form textarea { padding: 13px 12px; font-size: 12px; }
  .contact-form textarea { min-height: 112px; }
  .form-button { min-height: 50px; }

  .site-footer { padding: 62px 0 22px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 34px 22px; padding-bottom: 48px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-brand p { max-width: 31rem; margin-top: 17px; font-size: 11px; line-height: 1.7; }
  .footer-col h3 { margin-bottom: 16px; font-size: 8px; }
  .footer-col a { margin-bottom: 11px; font-size: 9px; line-height: 1.35; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 9px; font-size: 8px; line-height: 1.5; }
}

@media (max-width: 390px) {
  .content-wrap, .hero .hero-content, .experience-intro, .experience-sticky, .process-list { width: calc(100% - 28px); }
  .hero-title { font-size: 44px; }
  .hero-copy { font-size: 13px; }
  .hero-object-stage { width: calc(100% + 28px); margin-left: -14px; margin-right: -14px; height: 255px; }
  .threat-stage { min-height: 270px; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-brand { grid-column: auto; }
}

@media (min-width: 781px) and (max-width: 1100px) {
  .content-wrap { width: calc(100% - 8vw); }
  .site-header { padding: 0 4vw; }
  .desktop-nav { gap: 20px; margin-right: 24px; }
  .desktop-nav a, .nav-cta { font-size: 9px; }
  .nav-cta { padding: 12px 14px; }
  .hero-content { width: 54vw; margin-left: 7vw; }
  .hero-title { font-size: clamp(58px, 7.5vw, 88px); }
  .hero-copy { max-width: 470px; font-size: 15px; }
  .hero-object-stage { right: -5vw; width: 53vw; }
  .experience-sticky { width: calc(100% - 8vw); gap: 5vw; }
  .experience-intro h2 { font-size: clamp(64px, 8.5vw, 108px); }
  .about-layout, .why-layout, .threat-layout, .contact-layout { gap: 5vw; }
  .founder-name { font-size: clamp(62px, 7vw, 90px); }
}