/* =========================================================
   AGUS — MOBILE / IPAD 3D EXPERIENCE
   Loaded after style.css
   Desktop/laptop keeps the existing design.
   ========================================================= */

@media (max-width: 1099px) {
  :root {
    --agus-3d-accent: #25d8ca;
    --agus-3d-accent-bright: #26e6d2;
    --agus-3d-bg: #06090a;
    --agus-3d-surface: #0c1214;
    --agus-3d-line: rgba(255,255,255,.10);
    --agus-3d-shadow: 0 22px 55px rgba(0,0,0,.42);
  }

  body.professional-template {
    background:
      radial-gradient(circle at 10% 8%, rgba(37,216,202,.08), transparent 28%),
      radial-gradient(circle at 90% 35%, rgba(37,216,202,.05), transparent 30%),
      #06090a !important;
    perspective: 1200px;
  }

  body.professional-template .pro-main,
  body.professional-template main {
    overflow: clip;
  }

  /* Header gets a floating glass feel */
  body.professional-template .pro-header {
    background: rgba(6,9,10,.78) !important;
    backdrop-filter: blur(18px) saturate(120%);
    -webkit-backdrop-filter: blur(18px) saturate(120%);
    box-shadow: 0 12px 34px rgba(0,0,0,.22);
  }

  body.professional-template .pro-menu-toggle {
    transform: translateZ(24px);
    box-shadow:
      0 10px 30px rgba(0,0,0,.30),
      inset 0 1px 0 rgba(255,255,255,.06);
    transition:
      transform .25s ease,
      border-color .25s ease,
      box-shadow .25s ease;
  }

  body.professional-template .pro-menu-toggle:active {
    transform: translateZ(4px) scale(.94);
    box-shadow: 0 4px 12px rgba(0,0,0,.34);
  }

  /* Shared 3D cards */
  body.professional-template .agus-choice-card,
  body.professional-template .service-card,
  body.professional-template .project-card,
  body.professional-template .feature-card,
  body.professional-template .studio-card,
  body.professional-template .timeline-item,
  body.professional-template .agus-service-grid article,
  body.professional-template .agus-project-split article,
  body.professional-template .agus-contact-choices > a,
  body.professional-template .agus-request-form {
    position: relative;
    isolation: isolate;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    background:
      linear-gradient(145deg, rgba(18,27,29,.96), rgba(7,12,13,.98)) !important;
    border: 1px solid rgba(255,255,255,.09) !important;
    box-shadow:
      0 22px 54px rgba(0,0,0,.34),
      inset 0 1px 0 rgba(255,255,255,.045);
    transition:
      transform .34s cubic-bezier(.2,.8,.2,1),
      box-shadow .34s ease,
      border-color .34s ease;
  }

  body.professional-template .agus-choice-card::before,
  body.professional-template .service-card::before,
  body.professional-template .project-card::before,
  body.professional-template .feature-card::before,
  body.professional-template .studio-card::before,
  body.professional-template .agus-service-grid article::before,
  body.professional-template .agus-project-split article::before,
  body.professional-template .agus-contact-choices > a::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
      radial-gradient(
        420px circle at var(--mx, 50%) var(--my, 50%),
        rgba(38,230,210,.16),
        transparent 38%
      );
    opacity: .45;
    pointer-events: none;
    z-index: -1;
  }

  /* Thin 3D edge */
  body.professional-template .agus-choice-card::after,
  body.professional-template .service-card::after,
  body.professional-template .project-card::after,
  body.professional-template .feature-card::after,
  body.professional-template .studio-card::after,
  body.professional-template .agus-service-grid article::after,
  body.professional-template .agus-contact-choices > a::after {
    content: "";
    position: absolute;
    left: 7%;
    right: 7%;
    bottom: -1px;
    height: 2px;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(38,230,210,.70),
      transparent
    );
    opacity: .6;
    transform: translateZ(18px) scaleX(.72);
    pointer-events: none;
  }

  /* Inner content floats slightly above the card */
  body.professional-template .agus-choice-card > *,
  body.professional-template .service-card > *,
  body.professional-template .project-card > *,
  body.professional-template .feature-card > *,
  body.professional-template .studio-card > *,
  body.professional-template .agus-service-grid article > *,
  body.professional-template .agus-project-split article > *,
  body.professional-template .agus-contact-choices > a > * {
    position: relative;
    transform: translateZ(18px);
  }

  /* Active touch / JS tilt state */
  body.professional-template .agus-3d-card.is-tilting {
    border-color: rgba(38,230,210,.32) !important;
    box-shadow:
      0 30px 70px rgba(0,0,0,.46),
      0 0 0 1px rgba(38,230,210,.06),
      inset 0 1px 0 rgba(255,255,255,.05);
  }

  /* Buttons behave like tactile 3D controls */
  body.professional-template .btn,
  body.professional-template .pro-btn,
  body.professional-template .choice-link {
    transform: translateZ(22px);
    box-shadow:
      0 10px 22px rgba(0,0,0,.24),
      inset 0 1px 0 rgba(255,255,255,.07);
    transition:
      transform .2s ease,
      box-shadow .2s ease,
      background .2s ease;
  }

  body.professional-template .btn:active,
  body.professional-template .pro-btn:active,
  body.professional-template .choice-link:active {
    transform: translateZ(2px) translateY(2px) scale(.98);
    box-shadow: 0 4px 10px rgba(0,0,0,.28);
  }

  /* Form fields look inset into the panel */
  body.professional-template input,
  body.professional-template select,
  body.professional-template textarea {
    background:
      linear-gradient(180deg, rgba(4,8,9,.96), rgba(8,13,14,.98)) !important;
    box-shadow:
      inset 0 3px 8px rgba(0,0,0,.26),
      inset 0 1px 0 rgba(255,255,255,.025);
    transition:
      border-color .25s ease,
      box-shadow .25s ease,
      transform .25s ease;
  }

  body.professional-template input:focus,
  body.professional-template select:focus,
  body.professional-template textarea:focus {
    border-color: rgba(38,230,210,.62) !important;
    box-shadow:
      inset 0 3px 8px rgba(0,0,0,.24),
      0 0 0 3px rgba(38,230,210,.07),
      0 12px 28px rgba(0,0,0,.16);
    transform: translateY(-1px);
  }

  /* Spotify / embedded content gets its own lifted frame */
  body.professional-template iframe[src*="spotify"],
  body.professional-template .spotify-embed {
    border-radius: 14px !important;
    box-shadow: 0 18px 42px rgba(0,0,0,.34);
    transform: translateZ(12px);
  }

  /* Section reveal has a slight depth move */
  body.professional-template .motion-reveal {
    transform: translate3d(0, 28px, -26px);
    opacity: 0;
  }

  body.professional-template .motion-reveal.is-visible {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

/* =========================================================
   IPAD / TABLET
   ========================================================= */
@media (min-width: 700px) and (max-width: 1099px) {
  body.professional-template .agus-choice-grid {
    gap: 18px !important;
    border: 0 !important;
  }

  body.professional-template .agus-choice-card {
    min-height: 350px !important;
    border-radius: 18px;
  }

  body.professional-template .agus-service-grid,
  body.professional-template .agus-steps {
    gap: 16px;
    border-top: 0 !important;
  }

  body.professional-template .agus-service-grid article,
  body.professional-template .agus-steps > div {
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 16px;
    padding: 28px !important;
  }

  body.professional-template .agus-project-split,
  body.professional-template .agus-contact-choices {
    gap: 18px;
    border: 0 !important;
  }

  body.professional-template .agus-project-split article,
  body.professional-template .agus-contact-choices > a {
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 18px;
    padding: 36px !important;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 699px) {
  body.professional-template {
    --mobile-edge: 14px;
  }

  body.professional-template .pro-container,
  body.professional-template .container {
    width: min(100% - 24px, 1280px) !important;
  }

  body.professional-template .agus-choice-grid,
  body.professional-template .agus-project-split,
  body.professional-template .agus-contact-choices,
  body.professional-template .agus-service-grid,
  body.professional-template .agus-steps {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    border: 0 !important;
  }

  body.professional-template .agus-choice-card,
  body.professional-template .agus-project-split article,
  body.professional-template .agus-contact-choices > a,
  body.professional-template .agus-service-grid article,
  body.professional-template .agus-steps > div,
  body.professional-template .service-card,
  body.professional-template .project-card,
  body.professional-template .feature-card,
  body.professional-template .studio-card,
  body.professional-template .timeline-item,
  body.professional-template .agus-request-form {
    border-radius: 18px !important;
    border: 1px solid rgba(255,255,255,.085) !important;
    padding: 24px !important;
  }

  body.professional-template .agus-choice-card {
    min-height: 255px !important;
  }

  body.professional-template .agus-choice-card + .agus-choice-card,
  body.professional-template .agus-project-split article + article,
  body.professional-template .agus-contact-choices > a + a,
  body.professional-template .agus-service-grid article + article,
  body.professional-template .agus-steps > div + div {
    border-left: 1px solid rgba(255,255,255,.085) !important;
    border-top: 1px solid rgba(255,255,255,.085) !important;
    padding-left: 24px !important;
  }

  body.professional-template .agus-choice-card h2 {
    text-shadow: 0 8px 30px rgba(38,230,210,.08);
  }

  /* Bottom floating depth accent */
  body.professional-template .agus-choice-card:nth-child(odd) {
    transform-origin: 40% 50%;
  }

  body.professional-template .agus-choice-card:nth-child(even) {
    transform-origin: 60% 50%;
  }

  /* Drawer becomes a floating sheet */
  body.professional-template .pro-mobile-menu,
  body.professional-template .mobile-menu {
    width: calc(100% - 16px) !important;
    top: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
    height: calc(100dvh - 16px) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 20px 0 0 20px;
    box-shadow: -28px 0 70px rgba(0,0,0,.48);
  }
}

/* Motion safety */
@media (prefers-reduced-motion: reduce) {
  .agus-3d-card {
    transform: none !important;
  }
}