:root[data-theme="light"]{
  --bg:#ffffff;
  --card:#ffffff;
  --surface:#f4f6f8;
  --text:#1a1a1a;
  --muted:#6b7280;
  --accent:#f59e0b;
  --border:#e9eef3;
  --touch-padding:14px;
  --mobile-font-scale:1;
}

:root[data-theme="dark"]{
  --bg:#0d1117;
  --card:#161b22;
  --surface:#0f1720;
  --text:#e6edf3;
  --muted:#8b949e;
  --accent:#f59e0b;
  --border:#30363d;
  --touch-padding:14px;
  --mobile-font-scale:1;
}

/* Base */
*{box-sizing:border-box}
html{font-size:16px}
body{
  margin:0;
  font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  transition:background 220ms ease,color 220ms ease;
  line-height:1.45;
  -moz-osx-font-smoothing:grayscale;
  -webkit-tap-highlight-color: transparent;
}

/* Header */
header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 20px;
  background:var(--card);
  border-bottom:1px solid var(--border);
  position:sticky;
  top:0;
  z-index:20;
}
.brand{display:flex;align-items:center;gap:8px}
.logo{
  background:linear-gradient(90deg,var(--accent),#ffd77a);
  color:#000;font-weight:700;border-radius:8px;padding:6px 10px;margin-right:8px;
  display:inline-flex;align-items:center;gap:8px;
}
.small{font-size:0.85rem;color:var(--muted)}

/* Nav & theme controls */
.nav{display:flex;gap:8px;align-items:center}
.theme-controls{display:flex;align-items:center;gap:8px;margin-left:12px}
.theme-select{background:transparent;border:1px solid var(--border);color:var(--text);padding:6px;border-radius:6px}

/* Mobile hamburger helpers (JS may toggle .open on .nav) */
.hamburger{
  display:none;
  width:44px;height:44px;border-radius:8px;border:1px solid var(--border);
  align-items:center;justify-content:center;background:transparent;cursor:pointer;
}
.hamburger .bar{width:20px;height:2px;background:var(--text);border-radius:2px;display:block;position:relative}
.hamburger .bar:before,.hamburger .bar:after{content:"";position:absolute;left:0;width:20px;height:2px;border-radius:2px;background:var(--text)}
.hamburger .bar:before{top:-6px}
.hamburger .bar:after{top:6px}

/* Buttons */
.btn{padding:8px 12px;border-radius:8px;border:0;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:8px;min-height:38px}
.btn-ghost{background:transparent;border:1px solid var(--border);color:var(--text)}
.btn-primary{background:linear-gradient(90deg,#fde68a,var(--accent));color:#071422}
.btn:focus{outline:3px solid rgba(245,158,11,0.14);outline-offset:2px}

/* Pill variant (used in contact) */
.pill{border-radius:999px;padding:8px 16px}

/* Layout */
.container{max-width:1100px;margin:12px auto;padding:12px;display:block}
.hero{display:flex;gap:18px;align-items:center}
.hero-card{background:var(--card);border-radius:12px;padding:18px;border:1px solid var(--border);box-shadow:0 8px 24px rgba(2,6,23,0.04)}
.features{display:flex;gap:12px;margin-top:12px;flex-wrap:wrap}
.feature{background:var(--card);padding:12px;border-radius:8px;border:1px solid var(--border);flex:1 1 260px;min-width:220px}
.card-surface{background:var(--card);border-radius:12px}
.section{background:var(--card);border-radius:10px;padding:14px;border:1px solid var(--border)}
.footer,text-footer{color:var(--muted)}

/* Page-card (for contact and similar pages) */
.page-card{
  max-width:1100px;
  margin:0 auto;
  background:var(--card);
  border-radius:12px;
  padding:20px;
  border:1px solid var(--border);
  box-shadow: 0 6px 18px rgba(2,6,23,0.03);
}

/* Contact form specifics */
.contact-form{display:block}
.form-row{margin-bottom:12px;display:block}
.input{width:100%;padding:10px 12px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:1rem}
.input:focus{outline:none;box-shadow:0 0 0 4px rgba(245,158,11,0.06);border-color:var(--accent)}
.input.large{font-size:1rem;padding:12px 14px}
.textarea{min-height:100px;max-width:100%;resize:vertical;line-height:1.4}

/* Form actions */
.form-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.form-actions .small{margin-left:0;color:var(--muted)}

/* Info container on contact page (two-column on wide screens) */
.info-container{display:flex;gap:12px;margin-top:16px;flex-wrap:wrap}
.info-card{flex:1 1 260px;padding:14px;border-radius:10px;background:var(--card);border:1px solid var(--border)}

/* Pricing-specific helpers */
.header-top-right{display:flex;justify-content:flex-end}
.pricing-title{margin-top:6px;margin-bottom:0;font-size:1.25rem}
.plan-card{background:var(--card);border-radius:10px;padding:12px;border:1px solid var(--border);display:flex;align-items:center;gap:12px}

/* Carousel */
.carousel-large{width:100%;Height:360px;display:flex;align-items:center;justify-content:center;background:var(--surface);border-radius:8px;position:relative;overflow:hidden}
.carousel-large img.carousel-img{max-width:100%;max-height:100%;object-fit:contain;position:absolute;top:0;left:0;opacity:0;transition:opacity 450ms ease}
.carousel-thumbs{display:flex;gap:8px;margin-top:10px;overflow-x:auto;padding-bottom:6px}
.thumb-img{width:96px;height:64px;object-fit:cover;border-radius:6px;cursor:pointer;border:2px solid transparent}

/* Card surface subtle elevation for lists/testimonials */
.card-surface{padding:12px;border-radius:10px;border:1px solid var(--border);background:linear-gradient(180deg,transparent,transparent)}

/* Small helpers */
.muted{color:var(--muted)}
/* Accessibility tweaks */
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
label{display:block;margin-bottom:6px;color:var(--muted);font-size:0.9rem}

/* Small polish for form controls and focus state */
select, input[type="email"], input[type="text"], textarea {
  font-family:inherit;
  font-size:1rem;
  color:var(--text);
}

/* subtle borders for footer and misc */
.footer{text-align:center;color:var(--muted);padding:14px;margin-top:12px;border-radius:6px}

/* Utility: visually-hidden */
.visually-hidden{
  border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;
}

/* Minor fixes to ensure consistent vertical rhythm across pages */
h1,h2,h3,h4{margin:0 0 8px 0}
p{margin:0 0 10px 0}

/* Mobile-first accessibility and motion reduction */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* -------------------------
   Responsive: tablet and below
   ------------------------- */
@media(max-width:900px){
  .features{flex-direction:column}
  .carousel-large{height:220px}
  .info-container{flex-direction:column}
  .hero{flex-direction:column;align-items:flex-start}
}

/* -------------------------
   Mobile-specific styles
   ------------------------- */
@media(max-width:700px){
  :root{ --mobile-font-scale: 0.98; }
  html{font-size:15.5px}

  /* Compact header, show hamburger */
  header{padding:10px 12px}
  .logo{padding:6px 8px;font-size:0.95rem}
  header .small{display:none}
  .nav{display:none} /* default hidden on mobile; JS should toggle .nav.open */
  .hamburger{display:flex}

  /* Make header items touch-friendly */
  .hamburger, .btn, .theme-select {
    min-width:44px; min-height:44px; padding:0 10px;
  }

  /* Page card padding reduced */
  .page-card{padding:14px;margin:10px}

  /* Forms stacked, larger touch targets */
  .form-row{margin-bottom:14px}
  label{font-size:0.92rem}
  .input{padding:12px 14px;border-radius:10px;font-size:1rem}
  .textarea{padding:12px 14px;border-radius:10px}

  /* Make primary actions full width on mobile */
  .form-actions{flex-direction:column;align-items:stretch}
  .form-actions .btn{width:100%;justify-content:center;padding:12px 16px;border-radius:10px}

  /* Info cards: stacked, full-width */
  .info-container{flex-direction:column}
  .info-card{width:100%}

  /* Carousel: hide thumbnails on tiny screens, make image cover */
  .carousel-thumbs{display:none}
  .carousel-large{height:220px}
  .carousel-large img.carousel-img{object-fit:cover}

  /* Pricing / plan cards stack vertically */
  .plan-card{flex-direction:column;align-items:flex-start;gap:8px;padding:14px}

  /* Buttons larger and easier to tap */
  .btn{min-height:48px;padding:12px 14px;border-radius:10px}

  /* Footer spacing */
  .footer{padding:18px;font-size:0.95rem}

  /* Utility: make clickable rows larger */
  .clickable-row{padding:12px;border-radius:8px}

  /* Sticky action bar for forms (keeps submit visible) */
  .sticky-action{
    position:fixed;
    left:12px;
    right:12px;
    bottom:12px;
    display:flex;
    gap:10px;
    padding:10px;
    background:linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.02));
    border-radius:12px;
    border:1px solid var(--border);
    justify-content:center;
    z-index:30;
    backdrop-filter: blur(6px);
  }
  .sticky-action .btn{flex:1; margin:0; min-width:0}

  /* Make input placeholders slightly more contrasted on mobile */
  ::placeholder{opacity:0.6}

  /* Reduce shadow intensity on mobile */
  .page-card, .hero-card {box-shadow:none;border:1px solid var(--border)}
}

/* Extra-small phones — further tweaks */
@media(max-width:420px){
  :root{ --mobile-font-scale: 0.95; }
  html{font-size:15px}

  /* Slightly larger buttons, increased padding for comfortable tapping */
  .btn{min-height:52px;padding:14px;border-radius:12px}
  .logo{font-size:0.92rem}
  header{padding:8px 10px}
  .page-card{padding:12px;margin:8px}
  .sticky-action{left:8px;right:8px;bottom:10px;padding:8px}
}

/* Desktop-specific small improvements */
@media(min-width:1100px){
  .container{max-width:1180px}
  .carousel-large{height:420px}
}

/* Helper states for nav toggling (JS toggles .open on .nav) */
.nav.open{display:flex;flex-direction:column;position:absolute;top:64px;right:12px;background:var(--card);border:1px solid var(--border);padding:10px;border-radius:8px;box-shadow:0 8px 24px rgba(2,6,23,0.06);z-index:40}
.nav.open a{display:block;padding:10px 12px;border-radius:8px}

/* Accessibility: visible focus for keyboard users */
:focus-visible{outline:3px solid rgba(245,158,11,0.16);outline-offset:2px}

/* Small polish for form controls and focus state */
select, input[type="email"], input[type="text"], textarea {
  font-family:inherit;
  font-size:1rem;
  color:var(--text);
}

/* Ensure images and media scale */
img, picture, video { max-width:100%; height:auto; display:block; }

/* End of file */


/* =========================
   FINAL POLISHED EDGE-FIT + MOBILE UX ENHANCEMENT
   (Additions for mobile/tablet)
   ========================= */
@media (max-width: 900px) {

  /* --- Global Autofit --- */
  body {
    overflow-x: hidden;
    font-size: 1.02rem; /* Slightly larger base text */
    line-height: 1.55;
  }

  .container {
    margin: 0;
    padding: 10px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* --- Header + Nav --- */
  header {
    padding: 10px 12px;
    width: 100%;
    margin: 0;
    border-radius: 0;
    box-sizing: border-box;
  }

  .brand {
    margin-left: 4px;
  }

  .logo {
    font-size: 1rem;
    padding: 6px 10px;
  }

  /* Ensure hamburger shows in tablet/mobile (user request) */
  .hamburger {
    width: 46px;
    height: 46px;
    display: flex;
  }

  /* Hide theme dropdown and toggle controls on mobile/tablet */
  .theme-controls {
    display: none !important;
    visibility: hidden;
    opacity: 0;
    width: 0;
    height: 0;
  }

  .nav.open {
    position: absolute;
    top: 60px;
    right: 0;
    left: 0;
    width: 100%;
    border-radius: 0;
    background: var(--card);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 6px 16px rgba(2, 6, 23, 0.08);
    padding: 10px 0;
    z-index: 100;
  }

  .nav.open a {
    padding: 14px 20px;
    display: block;
    font-size: 1.05rem;
    border-radius: 0;
  }

  /* --- Hero & Section Cards --- */
  .hero-card,
  .section {
    margin: 0;
    border-radius: 0;
    padding: 16px 14px;
    width: 100%;
    box-sizing: border-box;
  }

  .hero h1 {
    font-size: 1.35rem;
    line-height: 1.4;
  }

  .hero p,
  .hero .small {
    font-size: 1rem;
  }

  /* --- Buttons --- */
  .btn {
    font-size: 1.05rem;
    min-height: 50px;
    padding: 12px 16px;
    border-radius: 10px;
  }

  .btn-primary {
    font-weight: 700;
  }

  /* --- Cards & Info --- */
  .features,
  .info-container {
    margin: 0;
    gap: 0; /* remove gaps so children align flush */
  }

  /* Autofit feature cards (Billing, Database, Reports) on mobile/tablet */
  .feature {
    margin: 0;
    border-radius: 0;
    padding: 14px 12px;
    width: 100%;
    box-sizing: border-box;
    border-left: none;
    border-right: none;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }

  /* first feature should not double-border at top */
  .features .feature:first-child {
    border-top: none;
  }

  .feature h4 {
    margin-bottom: 6px;
  }

  .feature p {
    margin: 0;
  }

  /* --- Showcase --- */
  #showcase {
    padding: 0;
    margin: 0;
  }

  /* --- Footer --- */
  .footer {
    margin: 0;
    width: 100%;
    border-radius: 0;
    padding: 18px 10px;
    box-sizing: border-box;
    text-align: center;
    font-size: 0.95rem;
  }
}

/* ✅ Tiny phones (extra comfort for ≤480px) */
@media (max-width: 480px) {
  html {
    font-size: 15.5px;
  }

  .btn {
    font-size: 1.08rem;
    min-height: 54px;
  }

  .logo {
    font-size: 0.95rem;
  }

  header {
    padding: 8px 10px;
  }

  .hero h1 {
    font-size: 1.25rem;
  }
}

/* =========================
   Expandable FAB (mobile)
   ========================= */
@media (max-width: 900px) {
  .fab-wrap {
    position: fixed;
    right: 14px;
    bottom: 14px;
    z-index: 140;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    pointer-events: none; /* Let children control pointer-events */
  }

  .fab, .fab-action {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    min-width: 56px;
    min-height: 56px;
    padding: 0 14px;
    box-shadow: 0 8px 18px rgba(2,6,23,0.12);
    border: 1px solid var(--border);
    background: linear-gradient(90deg,#fde68a,var(--accent));
    color: #071422;
    font-weight:700;
    cursor: pointer;
    transition: transform 220ms cubic-bezier(.2,.9,.2,1), opacity 180ms ease;
    user-select: none;
  }

  .fab { font-size: 1.1rem; width:56px; height:56px; padding:0; border-radius:50%; }
  .fab:focus { outline: 3px solid rgba(245,158,11,0.14); outline-offset:4px; }

  /* Hidden action buttons (collapsed) */
  .fab-action {
    opacity: 0;
    transform: translateY(8px) scale(0.95);
    width: auto;
    height:44px;
    border-radius:10px;
    padding: 8px 12px;
    font-size: 1rem;
    background: var(--card);
    color: var(--text);
    border: 1px solid var(--border);
    display: inline-flex;
    gap:8px;
    align-items: center;
    justify-content: center;
  }

  /* Label to the left of action when expanded */
  .fab-action .label {
    display: none;
    white-space:nowrap;
  }

  /* Expanded state */
  .fab-wrap.expanded .fab-action {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  .fab-wrap.expanded .fab-action.show-1 { transition-delay: 40ms; }
  .fab-wrap.expanded .fab-action.show-2 { transition-delay: 80ms; }
  .fab-wrap.expanded .fab-action .label { display:inline-block; margin-right:8px; }

  /* Mini close (X) on top of fab when expanded */
  .fab-close {
    position: absolute;
    right: 0;
    bottom: 0;
    transform: translate(10px, -10px);
    width:36px;
    height:36px;
    border-radius:8px;
    border:1px solid var(--border);
    background:var(--card);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:1rem;
    cursor:pointer;
    box-shadow:0 6px 12px rgba(2,6,23,0.08);
    opacity:0;
    transition: opacity 160ms ease, transform 180ms ease;
    pointer-events:none;
  }
  .fab-wrap.expanded .fab-close { opacity:1; pointer-events:auto; transform: translate(6px, -6px); }

  /* Theme tweak: dark background for fab-icon when collapsed */
  :root[data-theme="dark"] .fab { background: linear-gradient(90deg,#f59e0b,#ffd77a); color:#08121a; }
  :root[data-theme="dark"] .fab-action { background: #161b22; color: var(--text); border:1px solid var(--border); }

  /* Accessibility focus ring */
  .fab-action:focus, .fab-close:focus { outline:3px solid rgba(245,158,11,0.14); outline-offset:4px; }

  /* Slightly move left on extra-small screens so doesn't touch rounded screen corners */
  @media (max-width:420px) {
    .fab-wrap { right: 10px; bottom: 10px; }
    .fab { width:60px; height:60px; }
  }
}

/* Hide FAB on larger screens */
@media (min-width: 901px) {
  .fab-wrap { display:none !important; }
}