/* ══════════════════════════════════════════════════════
   mobile.css — Webdime mobile responsiveness
   Activates ONLY on screens ≤ 768px.
   Desktop layout (≥ 769px) is 100% untouched.
   ══════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ─────────────────────────────────────────
     GLOBAL — keep grid exact copy of desktop
  ───────────────────────────────────────── */

  /* ─────────────────────────────────────────
     GLOBAL VISIBILITY & COLOR OVERRIDES (Mobile Only)
  ───────────────────────────────────────── */
  .hero__sub,
  .demo-sub,
  .pricing-sub,
  .contact-sub {
    color: rgba(240, 242, 245, 0.72);
  }

  .demo-cta {
    color: rgba(240, 242, 245, 0.85);
  }

  .spotlight-nav {
    color: rgba(240, 242, 245, 0.65);
    border-color: rgba(0, 77, 230, 0.35);
  }

  .placeholder-sub {
    color: rgba(240, 242, 245, 0.25);
  }

  /* ─────────────────────────────────────────
     SECTION NAV — restored & optimized for mobile
  ───────────────────────────────────────── */
  .section-nav {
    display: flex;
    right: 12px;
    gap: 14px;
  }

  .section-nav__item {
    width: 20px;
    height: 20px;
  }

  .section-nav__item.is-active .section-nav__ring {
    filter: none;
    box-shadow: 0 0 6px 2px rgba(0, 77, 230, 0.7);
  }

  .section-nav__label {
    display: none;
  }

  /* ─────────────────────────────────────────
     HERO
  ───────────────────────────────────────── */
  
  /* Pull logo closer to the top-right grid line on mobile */
  .cell-logo {
    padding-right: 8px; 
    height: 90px; /* Make it sit slightly higher up towards the top edge */
  }

  /* Left pane — expand to full width */
  .cell-left-pane {
    left: 8vw;
    width: 84vw;
    top: 90px;
    bottom: 40px;
    padding-left: 8px; /* Moved back slightly so they aren't too far */
    gap: 20px;
  }

  /* Heading — scale down, remove nudge */
  .hero__heading {
    font-size: clamp(36px, 10vw, 54px);
    top: 0;
  }

  /* Subheading — smaller, remove nudge */
  .hero__sub {
    font-size: 15px;
    top: 0;
    max-width: 100%;
  }

  /* Move eyebrow tag slightly upwards and push right to prevent the blue line from touching */
  .hero__eyebrow {
    margin-top: -15px;
    margin-left: 6px;
  }

  /* CTA row — perfectly aligned vertical stack */
  .hero__actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-top: 40px; /* Pushed further down on mobile */
    transform: translateY(0) !important;
  }

  /* Visually align the text in the secondary button with the blob button's 40px padding */
  .hero__actions .btn--drip {
    padding-left: 40px;
  }

  /* Override the loader-finished state that nudges buttons down 40px */
  body.loader-finished .hero__actions {
    transform: translateY(0) !important;
  }

  /* ─────────────────────────────────────────
     DEMO SECTION — heading TOP, card BOTTOM
  ───────────────────────────────────────── */
  .demo-section {
    height: auto;
    min-height: 100vh;
    margin-top: 15vh; /* Gives breathing room to feel like a new section */
  }

  .demo-inner {
    grid-template-columns: 1fr;
    padding: 6vh 5% 6vh;
    align-items: start;
    gap: 32px;
  }

  .demo-heading-block {
    width: 100%;
    max-width: none;
  }

  .spotlight-stage {
    padding-left: 0 !important; /* Override desktop 4vw that pushes cards right */
    width: 100%;
    align-items: stretch; /* Stretch so container fills full width */
  }

  .spotlight-inner {
    width: 100%;
  }

  .spotlight-container {
    max-width: 100% !important; 
    width: 60%; /* 20% MORE smaller (was 80%) */
    transform: translateX(-10px); /* Move 10px left */
    margin: 0 auto; /* Keep it centered overall */
  }

  /* ─────────────────────────────────────────
     CTAs — Mobile Overrides
  ───────────────────────────────────────── */
  
  /* Make the primary blob buttons have their white desktop hover glow by default */
  .btn--blob {
    box-shadow: 
      0 10px 25px rgba(0, 77, 230, 0.15),
      inset 4px 4px 10px rgba(255, 255, 255, 0.25), 
      inset -4px -4px 12px rgba(0, 0, 0, 0.15);
  }

  /* Force the line to be expanded on mobile since there is no hover */
  .btn--drip::after {
    width: auto;
    left: 16px;
    right: 16px;
    transform: none;
    height: 2px;
    bottom: 6px;
    box-shadow: 0 0 10px rgba(0, 77, 230, 0.6);
  }
  
  /* Account for the 40px left padding on the hero button */
  .hero__actions .btn--drip::after {
    left: 40px;
    right: 16px;
  }

  /* Also expand the demo section CTA line by default */
  .demo-cta::after {
    width: calc(100% - 4px);
    height: 1px;
    bottom: 0;
    border-radius: 1px;
    box-shadow: 0 0 8px rgba(0, 77, 230, 0.4);
  }

  .spotlight-container {
    max-width: 100%;
    min-height: 220px;
  }

  .spotlight-controls {
    max-width: 100%;
    transform: translateX(-20px); /* Shift buttons 20px left to match card position */
  }

  .spotlight-indicator {
    transform: translateX(60px);
  }

  .spotlight-arrows {
    transform: translateX(-20px);
  }

  /* ─────────────────────────────────────────
     PRICING SECTION — heading TOP, accordion BOTTOM
  ───────────────────────────────────────── */
  .pricing-section {
    height: auto;
    min-height: 100vh;
    margin-top: 15vh; /* Distinct section feel */
  }

  .pricing-inner {
    grid-template-columns: 1fr;
    padding: 6vh 5% 4vh;
    gap: 32px;
    align-items: start;
  }

  /* Unstick the header in single-column mode */
  .pricing-header {
    position: static;
  }

  /* Remove the 60px left indent that works in 2-col but breaks in 1-col */
  .terminal-row__desc,
  .terminal-badge,
  .terminal-features,
  .terminal-btn {
    margin-left: 0;
  }

  /* Tighten the 4-column accordion row header and reduce gap between name and price */
  .terminal-row__header {
    grid-template-columns: 24px auto 1fr 32px;
    gap: 8px;
    padding: 12px 0;
  }

  .terminal-row__price {
    justify-content: flex-start;
    margin-left: 8px; /* brings price right next to the name */
  }

  /* Feature list — single column so nothing overflows */
  .terminal-features {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* Accordion body - smoother transition for larger max-height on mobile */
  .terminal-row--active .terminal-row__body {
    max-height: 900px;
    transition: max-height 0.6s cubic-bezier(0.16, 1, 0.3, 1), padding 0.3s ease, opacity 0.3s ease;
  }

  .pricing-sub::before {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* ─────────────────────────────────────────
     CONTACT SECTION — tighter fields for mobile
  ───────────────────────────────────────── */
  .contact-section {
    padding: 80px 5%;
  }
  
  .contact-form {
    grid-template-columns: 1fr; /* Stack fields vertically on mobile */
    gap: 24px;
  }
  
  .cf-input {
    padding: 14px 16px; /* Restore comfortable tap targets */
    font-size: 15px;
  }
  
  .cf-country-btn {
    padding: 10px 10px;
    font-size: 13px;
  }
  
  .cf-label {
    font-size: 10px;
  }

  /* Country dropdown — scrollable on small screens */
  .cf-country-dropdown {
    max-height: 240px;
    overflow-y: auto;
  }

  /* ─────────────────────────────────────────
     FOOTER — full viewport with absolute pinning
  ───────────────────────────────────────── */
  .site-footer {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
  }

  /* Header pinned top-left */
  .footer-header {
    position: relative;
    padding: 50px 5% 0;
    text-align: left;
    margin: 0;
    max-width: 100%;
    z-index: 10;
  }

  /* Footer inner — hide it (we use absolute positioning instead) */
  .footer-inner {
    position: absolute;
    bottom: 60px; /* Sit just above the copyright */
    left: 5%;
    right: 5%;
    display: block;
    padding: 0;
    border-top: none;
    z-index: 10;
  }

  /* Hide Navigate stack entirely on mobile */
  .footer-nav {
    display: none;
  }

  /* Hide the center globe placeholder — just empty space on mobile */
  .footer-center {
    display: none;
  }

  /* Reach Us At — left-aligned, compact, pinned at bottom */
  .footer-contact {
    align-items: flex-start;
    text-align: left;
    gap: 8px;
  }

  .footer-contact .footer-col-label {
    font-size: 9px;
    margin-bottom: 10px;
  }

  .footer-contact .footer-social-link {
    font-size: 12px;
  }

  .footer-contact .footer-social-icon {
    font-size: 13px !important;
  }

  /* Copyright — pinned to absolute bottom */
  .footer-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 14px 5%;
    border-top: 1px solid rgba(255,255,255,0.04);
    text-align: center;
    z-index: 10;
  }

  .footer-copy {
    margin: 0;
    font-size: 9px;
  }
}

/* ══════════════════════════════════════════════════════
   SMALL PHONES (≤ 480px) — fine-tuning
   ══════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  .hero__heading {
    font-size: clamp(30px, 9vw, 44px);
  }

  .cell-left-pane {
    top: 80px;
  }

  /* Prevent price row overflow on very small screens */
  .terminal-row__name {
    font-size: 15px;
  }

  .price-amount {
    font-size: 24px;
  }

  .price-prefix {
    font-size: 9px; /* Shrunk slightly instead of hiding to prevent overflow */
  }

  .demo-heading {
    font-size: clamp(26px, 8vw, 40px);
  }

  /* ─────────────────────────────────────────
     CONTACT ALERT MESSAGES - absolute centered on mobile
  ───────────────────────────────────────── */
  .contact-success:not([hidden]), 
  .contact-limit-msg:not([hidden]) {
    display: block;
    text-align: center;
    margin-top: -420px;
    margin-bottom: 510px;
    margin-left: auto;
    margin-right: auto;
    max-width: 240px;
    padding: 10px 0;
    z-index: 20;
    position: relative;
  }

  .success-icon, .limit-icon {
    width: 14px;
    height: 14px;
    font-size: 7px;
    margin: 0 auto 12px;
    box-shadow: none;
  }

  .success-heading, .limit-heading {
    font-size: 11px;
    letter-spacing: 0.1em;
    margin: 0 0 8px;
  }

  .success-sub, .limit-sub {
    font-size: 10px;
    line-height: 1.5;
  }
}