/* =========================================================
   Aevaron Sites — Mobile & Tablet Overrides (≤ 768px)
   Safe to replace your existing mobile.css
   Desktop stays exactly as in base.css
   ========================================================= */

/* ---------- Global comforts ---------- */
@media (max-width: 768px) {

  /* Reduce background bloom so content pops */
  body::before,
  body::after{
    opacity: .18;
    filter: blur(26px);
  }

  /* Fit content edge-to-edge with sane padding */
  .container{
    width: 100%;
    max-width: 100%;
    padding: 16px;
    margin: 0 auto;
  }

  /* Header: thin, glassy, readable */
  .header{
    padding: calc(env(safe-area-inset-top, 0px) + 2px) 2px 2px;
    background: rgba(10, 16, 30, 0);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255,255,255,.07);
  }

  /* Keep nav links visible, just tighter */
  .nav a{
    font-size: 14px;
    margin-left: 12px;
    text-shadow: 0 3px 12px rgba(0,0,0,.35);
  }

  /* Hero typography: keep the desktop vibe, smaller size */
  .h1{
    font-size: clamp(28px, 8.2vw, 40px);
    line-height: 1.12;
    text-shadow: 0 4px 18px rgba(0,0,0,.45);
    margin-top: 6px;
  }
  .sub{
    font-size: 15px;
    max-width: 34ch;
    margin: 10px auto 18px;
    text-shadow: 0 3px 12px rgba(0,0,0,.35);
    padding: 0 6px;
    text-align: center;
  }

  /* CTA buttons: big enough for thumbs, subtle glass */
  .cta, .btn{
    width: 100%;
    max-width: 280px;
    min-height: 48px;
    padding: 12px 18px;
    font-size: 16px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0), inset 0 1px 0 rgba(255, 255, 255, 0);
  }
  .cta:hover, .btn:hover{ transform: translateY(-2px); }

  /* Hero laptops: center only, sized to viewport */
  .hero-laptops{ height: clamp(180px, 45vw, 260px); margin-top: 8px; }
  .hero-laptop.left,
  .hero-laptop.right{ display: none !important; }
  .hero-laptop.center{
    width: min(92vw, 520px);
    left: 50%;
    transform: translateX(-50%);
  }
  .hero-stand{ width: min(60vw, 360px); bottom: -4px; }

  /* Demo cards → single column */
  .grid.demo{ grid-template-columns: 1fr; gap: 14px; }
  .demo-card{ padding: 14px; }

  /* Pricing → single column with breathing room */
  .pricing{ grid-template-columns: 1fr; gap: 16px; }
  .price-card{ padding: 16px; }
  .price{ font-size: 24px; margin: 2px 0 8px; }
  .price-card .btn, .price-card .cta{ width: 100%; max-width: none; }

  /* Process timeline: stack vertically */
  .timeline{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  /* Forms: 1 column */
  .form{ padding: 0 6px; }
  .form-row{ grid-template-columns: 1fr; gap: 10px; }
  .input, select, textarea{ font-size: 16px; }

  /* Legal/secondary pages card style */
  .legal-card{
    margin: 12px auto 0;
    padding: 16px;
  }

  /* Footer: stack neatly */
  .footer{ padding: 28px 0; }
  .footer-wrap{ flex-direction: column; align-items: flex-start; gap: 12px; }
  .legal-nav{ gap: 8px; }
  .legal-btn{
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(17, 24, 39, 0);
    border: 1px solid rgba(255,255,255,.10);
    backdrop-filter: blur(6px);
  }

  /* Media defaults */
  img, video, iframe{ max-width: 100%; height: auto; }
}

/* ---------- Small phones polish (≤ 420px) ---------- */
@media (max-width: 420px){
  .container{ padding: 14px; }
  .h1{ font-size: clamp(26px, 8.8vw, 34px); }
  .sub{ font-size: 14px; }
  .nav a{ font-size: 13px; margin-left: 10px; }
  .legal-btn{ width: 100%; justify-content: center; }
}

/* ---------- Tablet comfort (769–1024px) ---------- */
@media (min-width: 769px) and (max-width: 1024px){
  .grid.demo{ grid-template-columns: repeat(2, 1fr); }
  .pricing{ grid-template-columns: repeat(2, 1fr); }
  .hero-laptops{ height: clamp(220px, 40vw, 320px); }
  .hero-laptop.left,
  .hero-laptop.right{ opacity: .98; transform: translateY(6%) scale(.95); }
}
/* =========================
   MOBILE HEADER OVERRIDE
   ========================= */
@media (max-width: 768px) {
  .header-inner {
    justify-content: center;   /* center contents */
  }

  .header .brand {
    flex: 1;
    display: flex;
    justify-content: center;   /* logo centered */
  }

  .header .nav {
    display: none !important;  /* hide nav links */
  }

  .logo {
    height: 50px;              /* slightly smaller logo for mobile */
  }
}
/* ===== Desktop-look on mobile overrides (append at end) ===== */
@media (max-width: 768px){

  /* Keep all three laptops visible and sized to fit */
  .hero-laptop.left,
  .hero-laptop.right{ display: block !important; }

  .hero-laptops{
    height: clamp(210px, 54vw, 280px);
    margin-top: 8px;
    position: relative;
  }
  .hero-laptop.center{
    left: 50%;
    transform: translateX(-50%);
    width: clamp(290px, 66vw, 440px);
    z-index: 3;
  }
  .hero-laptop.left{
    left: 2%;
    width: clamp(170px, 34vw, 300px);
    transform: translateY(6%) rotate(-2deg);
    z-index: 2;
  }
  .hero-laptop.right{
    right: 2%;
    width: clamp(170px, 34vw, 300px);
    transform: translateY(6%) rotate(2deg);
    z-index: 2;
  }
  .hero-stand{ width: min(62vw, 360px); bottom: -4px; }

  /* Keep the process strip in a single row (like desktop) */
  .timeline{
    flex-direction: row !important;
    align-items: center;
    gap: 14px;
  }
  /* scale the whole card a touch so it fits small screens */
  #process .card{
    transform: scale(.92);
    transform-origin: top center;
  }
  @media (max-width: 480px){
    #process .card{ transform: scale(.86); }
  }

  /* dots/lines a bit smaller so the row fits */
  .timeline .dot{ width: 10px; height: 10px; }
  .timeline .line{ height: 2px; }

  /* Header: center logo, hide links (you already do this;
     keeping size a bit smaller than 50px so it doesn’t crowd) */
  .header .nav{ display: none !important; }
  .header-inner{ justify-content: center; }
  .header .brand{ flex: 1; display: flex; justify-content: center; }
  .logo{ height: 32px; }
}

/* extra-tight phones */
@media (max-width: 360px){
  .hero-laptop.center{ width: clamp(260px, 70vw, 380px); }
  #process .card{ transform: scale(.84); }
}
/* ===== Desktop-true process strip on phones (≤768px) ===== */
@media (max-width: 768px){

  /* Let the card pan horizontally but keep the glass frame */
  #process .card{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px 18px;
    position: relative;
    scrollbar-width: none;           /* Firefox: hide bar */
  }
  #process .card::-webkit-scrollbar{ display: none; } /* WebKit: hide bar */

  /* Keep the desktop-sized grid and allow sideways pan */
  #process .steps{
    display: grid;
    grid-auto-flow: column;
    /* One desktop-sized column per step so nothing squishes */
    grid-auto-columns: minmax(260px, 1fr);
    column-gap: 28px;
    align-items: start;
    scroll-snap-type: x mandatory;
  }

  /* Each step snaps cleanly */
  #process .step{
    scroll-snap-align: start;
    min-width: 260px;         /* same as grid-auto-columns */
  }

  /* Typography: keep desktop sizing/weight but ensure single-lines */
  #process .step h3{
    font-size: 18px;          /* matches your desktop vibe */
    line-height: 1.25;
    margin: 0 0 6px;
    white-space: nowrap;
  }
  #process .step p{
    font-size: 14px;
    line-height: 1.25;
    margin: 0;
    white-space: nowrap;
  }

  /* Timeline: same look, sized for each column width */
  #process .timeline{
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
  }
  #process .timeline .dot{
    width: 12px; height: 12px; border-radius: 50%;
  }
  #process .timeline .line{
    height: 2px;
    width: clamp(140px, 40vw, 220px);  /* scales with phone width but stays desktop feel */
    flex: 0 0 auto;
  }

  /* Soft edge hints to indicate scroll (optional, pretty) */
  #process .card::before,
  #process .card::after{
    content:"";
    position:absolute; top:0; bottom:0; width:26px; pointer-events:none;
    background: linear-gradient(to right, rgba(10,16,30,.55), transparent);
  }
  #process .card::before{ left:0; }
  #process .card::after{
    right:0;
    transform: scaleX(-1);
  }
}

/* Extra-tight phones: small nudge so headings don’t wrap */
@media (max-width: 420px){
  #process .step{ min-width: 240px; }
  #process .step h3{ font-size: 17px; }
  #process .timeline .line{ width: clamp(120px, 42vw, 200px); }
}
/* ===== Process: one full-width slide per step (fix squish) ===== */
@media (max-width: 768px){

  /* The glass card can scroll horizontally */
  #process .card{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 16px 18px;
    position: relative;
  }
  #process .card::-webkit-scrollbar{ display:none; }

  /* Force a horizontal strip of slides */
  #process .steps{
    display: flex !important;              /* beat any grid/flex from desktop */
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: stretch;
    gap: 32px;
    scroll-snap-type: x mandatory;
  }

  /* Each step occupies a large/desktop-like width */
  #process .step{
    flex: 0 0 clamp(320px, 88vw, 420px) !important;
    min-width: clamp(320px, 88vw, 420px) !important;
    scroll-snap-align: start;
  }

  /* Ensure step content can actually use the width */
  #process .step *,
  #process .step{
    max-width: none !important;
    white-space: normal !important;
  }

  /* Headings & body text sizing */
  #process .step h3{
    font-size: 18px;
    line-height: 1.28;
    margin: 0 0 6px;
  }
  #process .step p{
    font-size: 14px;
    line-height: 1.28;
    margin: 0;
  }

  /* Timeline under each step: dot + a line that fills the slide */
  #process .timeline{
    display: flex; align-items: center; gap: 12px; margin-top: 12px;
    width: 100%;
  }
  #process .timeline .dot{ width:12px; height:12px; border-radius:50%; flex:0 0 auto; }
  #process .timeline .line{ flex: 1 1 auto; height:2px; }

  /* Soft edge fades hint there's more to swipe */
  #process .card::before,
  #process .card::after{
    content:"";
    position:absolute; top:0; bottom:0; width:28px; pointer-events:none;
    background: linear-gradient(to right, rgba(10,16,30,.55), transparent);
  }
  #process .card::before{ left:0; }
  #process .card::after{ right:0; transform: scaleX(-1); }
}

/* Tiny phones get a touch more width per slide */
@media (max-width: 420px){
  #process .step{ flex-basis: 360px !important; min-width: 360px !important; }
}