/* ═══════════════════════════════════════════
   OmniBridge — Mobile & Tablet Styles
   Breakpoints: tablet ≤960px, mobile ≤600px
═══════════════════════════════════════════ */

/* ── HIDE DESKTOP NAV ON MOBILE/TABLET ── */
@media(max-width:960px){
  .nav-links { display:none !important; }
  .nav-right .btn-ghost { display:none !important; }
  /* Keep theme btn + trial btn */
  nav { height:56px; }
  .nav-inner { padding:0 16px; gap:10px; }

  /* ── BOTTOM NAV BAR ── */
  .bottom-nav {
    display:flex !important;
    position:fixed;
    bottom:0; left:0; right:0; z-index:200;
    background:var(--surface);
    border-top:1px solid var(--border);
    height:60px;
    padding:0 8px;
    padding-bottom:env(safe-area-inset-bottom);
    align-items:center;
    justify-content:space-around;
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
  }
  .bottom-nav-item {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    padding:8px 16px;
    border-radius:10px;
    cursor:pointer;
    transition:background .15s,color .15s;
    text-decoration:none;
    color:var(--muted);
    flex:1;
    max-width:80px;
  }
  .bottom-nav-item:hover,
  .bottom-nav-item.active {
    color:var(--accent);
    background:var(--accent-bg,rgba(59,130,246,.08));
  }
  .bottom-nav-item svg { width:20px;height:20px; }
  .bottom-nav-item span { font-size:10px;font-weight:500;font-family:'Geist',sans-serif; }

  /* Push page content above bottom nav */
  body { padding-bottom:72px; }
  footer { padding-bottom:80px; }

  /* ── RIGHT SIDE DRAWER ── */
  .side-drawer {
    display:block !important;
    position:fixed;
    top:0; right:-280px; bottom:0;
    width:280px;
    z-index:400;
    background:var(--surface);
    border-left:1px solid var(--border);
    transition:right .28s cubic-bezier(.4,0,.2,1);
    overflow-y:auto;
    padding:20px 0 80px;
    box-shadow:-8px 0 32px rgba(0,0,0,.15);
  }
  .side-drawer.open { right:0; }
  .drawer-overlay {
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.4);
    z-index:390;
    backdrop-filter:blur(2px);
  }
  .drawer-overlay.open { display:block; }
  .drawer-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:16px 20px 20px;
    border-bottom:1px solid var(--border);
    margin-bottom:8px;
  }
  .drawer-logo {
    display:flex;align-items:center;gap:10px;
    font-size:15px;font-weight:600;letter-spacing:-0.02em;color:var(--text);
  }
  .drawer-close {
    width:32px;height:32px;border-radius:8px;
    background:var(--bg3);border:1px solid var(--border);
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;font-size:16px;color:var(--muted);
  }
  .drawer-nav-item {
    display:flex;align-items:center;gap:12px;
    padding:13px 20px;
    font-size:15px;color:var(--muted);
    text-decoration:none;
    transition:background .12s,color .12s;
    border-radius:0;
  }
  .drawer-nav-item:hover,.drawer-nav-item.active {
    background:var(--bg3);color:var(--text);font-weight:500;
  }
  .drawer-nav-item svg { width:18px;height:18px;flex-shrink:0; }
  .drawer-divider {
    height:1px;background:var(--border);margin:8px 20px;
  }
  .drawer-section-label {
    font-size:10px;font-family:'Geist Mono',monospace;
    letter-spacing:.08em;text-transform:uppercase;
    color:var(--muted2);padding:8px 20px 4px;
  }
  .drawer-cta {
    margin:16px 20px 0;
  }
  .drawer-cta .btn {
    width:100%;justify-content:center;padding:12px;font-size:14px;border-radius:10px;
  }

  /* ── HAMBURGER IN NAV ── */
  .nav-hamburger {
    display:flex !important;
    width:36px;height:36px;border-radius:8px;
    background:var(--surface);border:1px solid var(--border);
    align-items:center;justify-content:center;
    cursor:pointer;margin-left:auto;flex-shrink:0;
    transition:background .15s;
  }
  .nav-hamburger:hover { background:var(--bg3); }
  .nav-hamburger svg { width:18px;height:18px;color:var(--text); }

  /* ── LAYOUT FIXES ── */
  .container { padding:0 16px; }
  .section { padding:56px 0; }
  .page-hero { padding:96px 0 48px; }
  .page-hero h1 { font-size:clamp(32px,8vw,52px); }
  .hero { padding:110px 0 64px; }
  .hero h1 { font-size:clamp(36px,9vw,56px); }

  /* Grids → single column */
  .grid2,.grid3,.grid4,
  .stats-bar,.plans-grid,
  .addons-grid,.why-grid,
  .values-grid,.team-grid,
  .testimonial-grid,.industry-grid,
  .gdpr-status-grid,.feats-grid,
  .schedule-grid,.social-grid,
  .form-row,.fg,.billing-toggle+div,
  .footer-inner { grid-template-columns:1fr !important; }

  .stats-bar { gap:0; }
  .stat-item { border-right:none !important; border-bottom:1px solid var(--border); }
  .stat-item:last-child { border-bottom:none; }

  /* Why big card */
  .why-big { grid-column:span 1 !important; flex-direction:column; }

  /* Bento */
  .bento { grid-template-columns:1fr !important; }
  .b-wide,.b-narrow,.b-half,.b-full { grid-column:span 1 !important; }

  /* Feature strip */
  .feature-strip { grid-template-columns:1fr !important; }
  .fs-item { border-left:none !important; border-top:1px solid var(--border); }
  .fs-item:first-child { border-top:none; }

  /* Steps */
  .steps-row { grid-template-columns:1fr !important; }

  /* Plans grid */
  .plans-grid { grid-template-columns:1fr 1fr !important; gap:10px; }

  /* Compare tables */
  .ft-head,.ft-row,
  .compare-header,.compare-row,
  .cmp-head,.cmp-row { grid-template-columns:2fr 1fr 1fr !important; font-size:12px; }

  /* Credits table */
  .ct-h,.ct-r { grid-template-columns:1.5fr 1fr 1fr !important; font-size:12px; padding:10px 14px; }

  /* Legal layout */
  .legal-layout { grid-template-columns:1fr !important; }
  .legal-nav { position:static !important; }

  /* About intro */
  .about-intro { grid-template-columns:1fr !important; }

  /* GDPR block */
  .gdpr-block { grid-template-columns:1fr !important; padding:28px 20px !important; }

  /* Contact layout */
  .contact-layout { grid-template-columns:1fr !important; }

  /* Use case blocks */
  .use-case-block { grid-template-columns:1fr !important; padding:24px 20px !important; }

  /* CTA block */
  .cta-block { padding:36px 20px !important; }

  /* Hero actions */
  .hero-actions,.cta-actions,.cta-btns { flex-direction:column; align-items:stretch; }
  .hero-actions .btn,.cta-actions .btn,.cta-btns .btn { text-align:center;justify-content:center; }

  /* Footer */
  .footer-bottom { flex-direction:column;text-align:center;gap:8px; }

  /* Mockup */
  .hero-mockup { margin-top:40px; }
  .mockup-body { grid-template-columns:1fr 1fr !important; }

  /* Sol cards */
  .sol-grid { grid-template-columns:1fr !important; }

  /* Pricing form */
  .form-grid { grid-template-columns:1fr !important; }
  .form-full { grid-column:1 !important; }
  .pkg-card { margin-bottom:12px; }

  /* Testimonials */
  .testi-card { margin-bottom:0; }

  /* AI block */
  .ai-block { grid-template-columns:1fr !important; padding:24px 20px !important; }

  /* Billing toggle */
  .billing-toggle { flex-wrap:wrap; gap:10px; justify-content:center; }
}

/* ── MOBILE ONLY ≤600px ── */
@media(max-width:600px){
  .plans-grid { grid-template-columns:1fr !important; }
  .hero h1 { font-size:clamp(32px,9vw,44px); }
  .hero-sub { font-size:16px; }
  .btn-lg { padding:12px 22px;font-size:14px; }
  .section-title { font-size:clamp(24px,6vw,36px) !important; }
  .contact-form-card { padding:20px; }
  .about-right { padding:20px; }
  .cta-block { padding:28px 16px !important; }
  .ent-modal { padding:24px 20px; }
  .billing-toggle { gap:8px; }
  .credits-table,.feat-table,.compare-table { font-size:11px; }
  .ct-h,.ct-r { padding:8px 10px; }
  .drawer-cta .btn { font-size:13px; }
}

/* ── FLOATING SHARE BUTTON ── */
.share-fab {
  position:fixed;
  bottom:76px; /* above bottom nav */
  right:16px;
  z-index:300;
}
.share-fab-btn {
  width:42px;height:42px;border-radius:50%;
  background:#0a0a0b;
  border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 12px rgba(0,0,0,.35);
  transition:transform .2s,box-shadow .2s;
  position:relative;z-index:2;
}
.share-fab-btn:hover { transform:scale(1.08);box-shadow:0 4px 18px rgba(0,0,0,.45); }
.share-fab-btn svg { width:16px;height:16px;color:#fff; }
.share-options {
  position:absolute;
  bottom:50px; right:0;
  display:flex;flex-direction:column;gap:8px;
  opacity:0;pointer-events:none;
  transform:translateY(10px) scale(.95);
  transition:opacity .22s,transform .22s;
}
.share-fab.open .share-options {
  opacity:1;pointer-events:all;
  transform:translateY(0) scale(1);
}
.share-opt {
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  text-decoration:none;font-size:18px;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
  transition:transform .15s;
  border:none;cursor:pointer;
}
.share-opt:hover { transform:scale(1.1); }
.share-opt-label {
  position:absolute;right:46px;
  background:rgba(0,0,0,.75);color:#fff;
  font-size:11px;padding:3px 8px;border-radius:5px;
  white-space:nowrap;font-family:'Geist',sans-serif;
  opacity:0;transition:opacity .15s;pointer-events:none;
}
.share-opt:hover .share-opt-label { opacity:1; }

/* Desktop — hide mobile elements */
@media(min-width:961px){
  .bottom-nav { display:none !important; }
  .side-drawer { display:none !important; }
  .drawer-overlay { display:none !important; }
  .nav-hamburger { display:none !important; }
  .share-fab { bottom:20px; }
}