/* ==========================================================================
style.css — Responsive, mobile-first stylesheet suitable for desktop & mobile

* Clean reset
* CSS variables (theming + dark mode)
* Layout: container, grid, header/nav, hero, cards, forms, footer
* Utilities: spacing, typography, buttons, images, helpers
* Accessibility & animations
  ========================================================================== */

/* ------------------------------

1. Reset / box-sizing
   ------------------------------ */
   *,
   *::before,
   *::after {
   box-sizing: border-box;
   }
   :root {
   --safe-area-inset-top: env(safe-area-inset-top, 0px);
   --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
   --safe-area-inset-left: env(safe-area-inset-left, 0px);
   --safe-area-inset-right: env(safe-area-inset-right, 0px);
   }

html, body, #root {
height: 100%;
}
html {
font-size: 16px; /* baseline, adjust with media queries for accessibility if desired */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
body {
margin: 0;
line-height: 1.45;
font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
color: var(--color-text);
background-color: var(--color-bg);
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
min-height: 100%;
padding-top: var(--safe-area-inset-top);
padding-bottom: var(--safe-area-inset-bottom);
}

/* Remove default link styles, but maintain focus */
a {
color: inherit;
text-decoration: none;
}
a:focus {
outline: 3px solid Highlight;
outline-offset: 2px;
}

/* Images */
img, picture, svg, video {
max-width: 100%;
display: block;
height: auto;
}

/* Form elements */
button, input, select, textarea {
font: inherit;
}
button { cursor: pointer; }

/* ------------------------------
2. Theme variables (light + dark)
Mobile-first variables (use prefers-color-scheme to flip)
------------------------------ */
:root {
/* palette */
--color-bg: #ffffff;
--color-surface: #f8fafb;
--color-muted: #6b7280;
--color-text: #0f172a;
--color-primary: #0ea5e9; /* sky-500 */
--color-primary-600: #0284c7;
--color-accent: #7c3aed; /* violet-600 */
--color-success: #10b981;
--color-danger: #ef4444;
--color-border: rgba(15, 23, 42, 0.08);

/* spacing scale */
--space-xxs: 0.25rem; /* 4px */
--space-xs: 0.5rem;   /* 8px */
--space-sm: 0.75rem;  /* 12px */
--space-md: 1rem;     /* 16px */
--space-lg: 1.5rem;   /* 24px */
--space-xl: 2rem;     /* 32px */
--space-xxl: 3rem;    /* 48px */

/* typography */
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.25rem;
--text-2xl: 1.5rem;
--text-3xl: 2rem;
--text-4xl: 2.5rem;
--heading-weight: 600;
--body-weight: 400;

/* layout */
--container-max-width: 1200px;
--radius-sm: 6px;
--radius-md: 10px;
--shadow-sm: 0 1px 3px rgba(2,6,23,0.06);
--shadow-md: 0 8px 20px rgba(2,6,23,0.08);
}

/* dark mode */
@media (prefers-color-scheme: dark) {
:root {
--color-bg: #071129;
--color-surface: #051226;
--color-muted: #93a3b8;
--color-text: #e6eef6;
--color-primary: #2dd4bf; /* teal-400 */
--color-primary-600: #14b8a6;
--color-accent: #a78bfa;
--color-success: #34d399;
--color-danger: #f87171;
--color-border: rgba(255,255,255,0.06);
}
}

/* ------------------------------
3. Breakpoints (mobile-first)
sm: 640px, md: 768px, lg: 1024px, xl: 1280px
------------------------------ */
@media (min-width: 640px) { html { font-size: 16px; } } /* sm */
@media (min-width: 768px) { html { font-size: 16px; } } /* md */
@media (min-width: 1024px) { html { font-size: 16px; } } /* lg */
@media (min-width: 1280px) { html { font-size: 16px; } } /* xl */

/* ------------------------------
4. Utility classes (spacing, text, display)
------------------------------ */
/* display */
.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-flex { display: flex; }
.d-grid { display: grid; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }

/* spacing (shorthand) */
.m-0 { margin: 0 !important; }
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.p-0 { padding: 0 !important; }
.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }

/* text */
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }
.lead { font-size: var(--text-lg); color: var(--color-muted); }

/* utilities */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.uppercase { text-transform: uppercase; letter-spacing: 0.06em; }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ------------------------------
5. Container & layout helpers
------------------------------ */
.container {
width: 100%;
max-width: calc(var(--container-max-width) - 2 * var(--space-md));
margin-left: auto;
margin-right: auto;
padding-left: var(--space-md);
padding-right: var(--space-md);
}

/* responsive grid utility (simple) */
.grid-1 { display: grid; grid-template-columns: 1fr; gap: var(--space-md); }
@media (min-width: 640px) { .grid-2-sm { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .grid-2-md { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }

/* ------------------------------
6. Header & Navigation
------------------------------ */
.header {
background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
border-bottom: 1px solid var(--color-border);
position: sticky;
top: 0;
z-index: 60;
backdrop-filter: blur(6px);
}
.centered{
  place-items: center;
}
.header .header-inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: calc(var(--space-sm) + 0.25rem) var(--space-md);
gap: var(--space-sm);
}
.brand {
display: flex;
align-items: center;
gap: var(--space-sm);
}
.brand .logo {
width: 40px;
height: 40px;
border-radius: 8px;
background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
display: inline-grid;
place-items: center;
color: white;
font-weight: 700;
font-size: 1rem;
}
.nav {
display: none; /* hidden on mobile */
}
.nav ul {
list-style: none;
display: flex;
gap: var(--space-md);
margin: 0;
padding: 0;
}
.nav a {
padding: calc(var(--space-xs)) calc(var(--space-sm));
border-radius: 8px;
color: var(--color-text);
}
.nav a:hover { background: rgba(0,0,0,0.03); }

/* Desktop nav */
@media (min-width: 768px) {
.nav { display: block; }
.mobile-toggle { display: none; }
}

/* Mobile nav: simple slide-down */
.mobile-toggle {
background: transparent;
border: none;
font-size: 1.25rem;
padding: var(--space-xs);
}
.mobile-menu {
display: none;
background: var(--color-surface);
border-top: 1px solid var(--color-border);
padding: var(--space-sm);
}
.mobile-menu.open { display: block; }

/* ------------------------------
7. Hero / Lead section
------------------------------ */
.hero {
padding: var(--space-xxl) 0;
display: grid;
gap: var(--space-lg);
align-items: center;
}
.hero .hero-inner {
display: grid;
gap: var(--space-md);
}
.hero h1 {
font-size: var(--text-3xl);
margin: 0;
line-height: 1.05;
font-weight: 800;
letter-spacing: -0.02em;
color: var(--color-text);
}
.hero p {
margin: 0;
color: var(--color-muted);
max-width: 60ch;
}

/* Split layout on larger screens */
@media (min-width: 768px) {
.hero .hero-inner { grid-template-columns: 1fr 1fr; gap: var(--space-lg); align-items: center; }
.hero h1 { font-size: var(--text-4xl); }
}

/* ------------------------------
8. Cards
------------------------------ */
.card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--space-md);
box-shadow: var(--shadow-sm);
transition: transform 160ms ease, box-shadow 160ms ease;
}
.card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
}
.card .card-title { font-weight: 700; margin-bottom: var(--space-xs); }
.card .card-body { color: var(--color-muted); font-size: var(--text-sm); }

/* feature / icon card */
.card .icon {
width: 48px;
height: 48px;
border-radius: 10px;
display: inline-grid;
place-items: center;
background: rgba(14,165,233,0.12);
}

/* ------------------------------
9. Buttons
------------------------------ */
.btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
border-radius: 999px;
border: none;
background: var(--color-primary);
color: #fff;
font-weight: 600;
text-decoration: none;
transition: transform 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
box-shadow: 0 6px 18px rgba(14,165,233,0.12);
}
.btn:active { transform: translateY(1px); }
.btn.secondary {
background: transparent;
border: 1px solid var(--color-border);
color: var(--color-text);
box-shadow: none;
}
.btn.ghost {
background: transparent;
color: var(--color-primary);
border: 1px dashed transparent;
}
.btn.small { padding: 0.25rem 0.6rem; font-size: var(--text-sm); border-radius: 8px; }

/* accessibility focus */
.btn:focus-visible {
outline: 3px solid rgba(14,165,233,0.18);
outline-offset: 2px;
}

/* ------------------------------
10. Forms
------------------------------ */
.form {
display: grid;
gap: var(--space-sm);
}
.input, textarea, select {
width: 100%;
padding: 0.6rem 0.75rem;
border-radius: var(--radius-sm);
border: 1px solid var(--color-border);
background: transparent;
color: var(--color-text);
transition: border-color 120ms ease, box-shadow 120ms ease;
}
.input:focus, textarea:focus, select:focus {
outline: none;
border-color: var(--color-primary-600);
box-shadow: 0 6px 18px rgba(14,165,233,0.08);
}
label { font-size: var(--text-sm); color: var(--color-muted); }

/* form row */
.form-row { display: grid; gap: var(--space-sm); }
@media (min-width: 640px) {
.form-row.two { grid-template-columns: 1fr 1fr; }
}

/* form helper text and errors */
.form-help { font-size: var(--text-xs); color: var(--color-muted); }
.form-error { color: var(--color-danger); font-size: var(--text-sm); }

/* ------------------------------
11. Table (responsive)
------------------------------ */
.table {
width: 100%;
border-collapse: collapse;
overflow: auto;
}
.table th, .table td {
padding: 0.75rem;
text-align: left;
border-bottom: 1px solid var(--color-border);
font-size: var(--text-sm);
}
.table thead th {
font-weight: 700;
color: var(--color-muted);
background: transparent;
}

/* small screens: make table scroll horizontally */
.table-wrapper { overflow-x: auto; }

/* ------------------------------
12. Footer
------------------------------ */
.footer {
padding: var(--space-lg) var(--space-md);
border-top: 1px solid var(--color-border);
background: transparent;
color: var(--color-muted);
}
.footer .footer-inner { display: flex; flex-direction: column; gap: var(--space-md); }
@media (min-width: 768px) {
.footer .footer-inner { flex-direction: row; justify-content: space-between; align-items: center; }
}

/* ------------------------------
13. Helpers: badges, avatars, chips
------------------------------ */
.badge {
display: inline-grid;
place-items: center;
padding: 0.2rem 0.5rem;
border-radius: 999px;
font-size: var(--text-xs);
background: rgba(124,58,237,0.08);
color: var(--color-accent);
}
.avatar {
width: 40px;
height: 40px;
border-radius: 999px;
overflow: hidden;
display: inline-block;
background: var(--color-border);
}

/* ------------------------------
14. Toast / notification (positioned)
------------------------------ */
.toast {
position: fixed;
right: var(--space-md);
bottom: calc(var(--space-md) + var(--safe-area-inset-bottom));
background: var(--color-surface);
border: 1px solid var(--color-border);
padding: var(--space-sm);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-md);
min-width: 220px;
z-index: 110;
}

/* ------------------------------
15. Small animations & transitions
------------------------------ */
.fade-in {
animation: fadeIn 360ms ease both;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}

/* ------------------------------
16. Accessibility helpers
------------------------------ */
.sr-only {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0, 0, 0, 0);
white-space: nowrap; border: 0;
}
[aria-hidden="true"] { display: none !important; }

/* ------------------------------
17. Example components (for quick prototyping)
------------------------------ */

/* hero card */
.hero-card {
border-radius: 14px;
padding: var(--space-lg);
display: grid;
gap: var(--space-md);
background: linear-gradient(180deg, rgba(14,165,233,0.06), transparent);
border: 1px solid rgba(14,165,233,0.06);
}

/* pricing grid */
.pricing {
display: grid;
gap: var(--space-md);
}
@media (min-width: 1024px) {
.pricing { grid-template-columns: repeat(3, 1fr); }
}
.pricing .plan { padding: var(--space-md); border-radius: 12px; background: var(--color-surface); border: 1px solid var(--color-border); }

/* CTA strip */
.cta-strip {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-md);
padding: var(--space-md);
border-radius: 12px;
background: linear-gradient(90deg, rgba(124,58,237,0.06), rgba(14,165,233,0.04));
border: 1px solid var(--color-border);
}

/* ------------------------------
18. Mobile specific tweaks
------------------------------ */
@media (max-width: 639px) {
.hero { padding: var(--space-lg) 0; }
.brand .logo { width: 36px; height: 36px; font-size: 0.95rem; }
.container { padding-left: var(--space-sm); padding-right: var(--space-sm); }
}

/* ------------------------------
19. Print styles
------------------------------ */
@media print {
body { background: #fff; color: #000; }
.nav, .mobile-toggle, .footer { display: none; }
.container { max-width: 100%; padding: 0; }
}

/* ------------------------------
20. Example utilities for developer convenience
------------------------------ */
/* hidden on desktop */
.hide-lg { display: block; }
@media (min-width: 768px) { .hide-lg { display: none; } }

/* visible only on desktop */
.show-lg { display: none; }
@media (min-width: 768px) { .show-lg { display: block; } }

/* ------------------------------
21. Small notes for integration

* This stylesheet is mobile-first. Add HTML structure using classes above.
* To enable sticky header, add .header to a wrapper with .header-inner inside.
* For JS-driven elements (mobile menu, toast), toggle classes (e.g., .open on mobile-menu).
  ------------------------------ */
  @end
