/* ============================================================
   Ultra Pro Mobile-First UI System (no framework)
   Works with: body > h1, body > h2, section, .aerosol-*
   Includes: dark mode, sticky header support, safe-area, a11y,
   reduced motion, better typography, premium surfaces.
   ============================================================ */

:root{
  /* Color tokens */
  --bg: #f4f7fb;
  --surface: #ffffff;
  --surface-2: #f7f9fc;
  --text: #0b1220;
  --muted: #52637a;
  --muted-2: #7a8aa3;
  --primary: #0f3d7a;
  --primary-2: #1d4ed8;
  --accent: #0ea5e9;
  --border: rgba(11, 18, 32, .12);
  --border-2: rgba(11, 18, 32, .18);

  /* Elevation (more natural) */
  --shadow-xs: 0 1px 2px rgba(11, 18, 32, .06);
  --shadow-sm: 0 6px 18px rgba(11, 18, 32, .10);
  --shadow:    0 18px 42px rgba(11, 18, 32, .12);
  --shadow-lg: 0 28px 70px rgba(11, 18, 32, .14);

  /* Radius */
  --r-xs: 10px;
  --r-sm: 14px;
  --r: 18px;
  --r-lg: 22px;

  /* Layout */
  --container: 1080px;
  --pad: 20px;
  --gap: 14px;

  /* Typography */
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Rhythm */
  --lh: 1.72;
}

/* Dark mode */
@media (prefers-color-scheme: dark){
  :root{
    --bg: #0a0d14;
    --surface: rgba(255,255,255,.06);
    --surface-2: rgba(255,255,255,.08);
    --text: rgba(255,255,255,.92);
    --muted: rgba(255,255,255,.70);
    --muted-2: rgba(255,255,255,.58);
    --primary: #79b3ff;
    --primary-2: #a78bfa;
    --accent: #6ee7ff;
    --border: rgba(255,255,255,.12);
    --border-2: rgba(255,255,255,.18);
    --shadow-xs: 0 1px 2px rgba(0,0,0,.30);
    --shadow-sm: 0 10px 22px rgba(0,0,0,.35);
    --shadow:    0 18px 46px rgba(0,0,0,.42);
    --shadow-lg: 0 30px 80px rgba(0,0,0,.52);
  }
}

*{ box-sizing:border-box; }
html{
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body{
  margin:0;
  font-family: var(--font);
  color: var(--text);
  line-height: var(--lh);
  font-size: 16px;
  padding:
    calc(22px + env(safe-area-inset-top))
    12px
    calc(44px + env(safe-area-inset-bottom));
  background:
    radial-gradient(1200px 700px at 10% -15%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 58%),
    radial-gradient(1000px 700px at 95% 0%, color-mix(in srgb, var(--primary-2) 18%, transparent), transparent 60%),
    var(--bg);
}

/* Prevent overflow */
img, video, canvas, svg { max-width:100%; height:auto; }
p, li, h1, h2, h3, h4, a { overflow-wrap:anywhere; word-break: break-word; }

/* ============================================================
   Optional Sticky Topbar
   If you wrap titles in <header class="topbar"> ... </header>
   ============================================================ */
.topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  border-bottom: 1px solid var(--border);
}
.topbar .topbar-inner{
  max-width: var(--container);
  margin: 0 auto;
  padding: 10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}

.topbar .topbar-inner.contact-only{
  justify-content: flex-end;
}

.contact-button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--primary) 45%, var(--border));
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff;
  font-weight: 800;
  font-size: .82rem;
  letter-spacing: .06em;
  text-decoration: none;
  box-shadow: var(--shadow-xs);
}

.contact-button:hover{
  filter: brightness(1.05);
}
.topbar .brand{
  display:flex;
  align-items:baseline;
  gap: 10px;
  min-width: 0;
}
.topbar .brand .dot{
  width:10px; height:10px; border-radius:999px;
  background: linear-gradient(135deg, var(--accent), var(--primary-2));
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 16%, transparent);
}
.topbar .brand .title{
  font-weight: 900;
  letter-spacing: .2px;
  white-space: nowrap;
}
.topbar .brand .sub{
  color: var(--muted);
  font-weight: 700;
  font-size: 12px;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}

/* ============================================================
   Container alignment for your current HTML structure
   ============================================================ */
body > h1,
body > h2,
body > section{
  max-width: var(--container);
  margin-left:auto;
  margin-right:auto;
}

body > h1{
  margin:0;
  padding: 10px 4px 0;
  font-size: clamp(1.55rem, 5.2vw, 2.25rem);
  line-height: 1.12;
  font-weight: 950;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--primary);
}

body > h2{
  margin: 10px auto 20px;
  padding: 0 4px 14px;
  font-size: 0.92rem;
  font-weight: 750;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  position: relative;
}

body > h2::after{
  content:"";
  position:absolute;
  left:4px;
  right:4px;
  bottom:0;
  height:1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--border-2) 70%, transparent), transparent);
}

/* ============================================================
   Premium Section Cards
   ============================================================ */
section{
  margin: 0 auto var(--gap);
  padding: var(--pad);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--surface) 92%, transparent),
      color-mix(in srgb, var(--surface-2) 92%, transparent));
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Top accent line */
section::before{
  content:"";
  position:absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--accent) 58%, transparent),
    color-mix(in srgb, var(--primary-2) 38%, transparent),
    transparent);
  opacity: .95;
}

/* Subtle noise-ish sheen (very light) */
section::after{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.18), transparent 35%),
    radial-gradient(circle at 80% 30%, rgba(255,255,255,.12), transparent 40%);
  mix-blend-mode: overlay;
  opacity: .18;
  pointer-events:none;
  transform: rotate(8deg);
}

/* Section heading */
section h3{
  margin: 0 0 12px;
  padding: 0 0 10px;
  font-size: 1.08rem;
  font-weight: 900;
  letter-spacing: .01em;
  color: var(--primary);
  border-bottom: 1px solid var(--border-2);
}

/* Typography improvements */
p{
  margin: 0 0 12px;
  color: color-mix(in srgb, var(--text) 92%, var(--muted));
}
p:last-child{ margin-bottom:0; }

/* Lists */
ul{
  margin: 6px 0 10px;
  padding-left: 18px;
}
li{
  margin: 8px 0;
  color: color-mix(in srgb, var(--text) 92%, var(--muted));
}
section:first-of-type ul li{
  font-weight: 800;
  color: color-mix(in srgb, var(--text) 94%, var(--primary));
}

/* Images */
section img,
.aerosol-image{
  border-radius: var(--r);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
}

/* ============================================================
   Aerosol Layout – responsive & premium
   ============================================================ */
.aerosol-layout{
  display:flex;
  flex-direction: column;
  align-items:flex-start;
  gap: 14px;
}

.aerosol-images{
  flex: 0 0 320px;
  max-width: 320px;
  display:flex;
  flex-direction:column;
  gap: 12px;
  position: relative;
}

.aerosol-image{
  width:100%;
  margin:0;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.aerosol-image-small{
  max-width: 300px;
  margin-top: 10px;
}

@media (hover:hover){
  .aerosol-image:hover{
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    border-color: color-mix(in srgb, var(--accent) 26%, var(--border));
  }
}

.aerosol-text{
  flex:1;
  min-width: 0;
}

/* ============================================================
   Links & inline code
   ============================================================ */
a{
  color: var(--primary-2);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
a:hover{ filter: brightness(0.95); }

code{
  font-family: var(--mono);
  font-size: .92em;
  padding: 2px 7px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-2) 90%, transparent);
  border: 1px solid var(--border);
}

/* ============================================================
   Tables / long content safety (if exists)
   ============================================================ */
.tableWrap{
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: color-mix(in srgb, var(--surface-2) 92%, transparent);
}
table{
  border-collapse: collapse;
  width:100%;
  min-width: 560px;
}
th, td{
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  color: color-mix(in srgb, var(--text) 90%, var(--muted));
  vertical-align: top;
}
tr:last-child td{ border-bottom: none; }

/* ============================================================
   Mobile-first breakpoints (tight + polished)
   ============================================================ */
@media (min-width: 560px){
  body{ padding: calc(28px + env(safe-area-inset-top)) 14px calc(56px + env(safe-area-inset-bottom)); }
  section{ padding: 22px; }
}

@media (min-width: 860px){
  body{ padding: calc(34px + env(safe-area-inset-top)) 18px calc(64px + env(safe-area-inset-bottom)); }
  .aerosol-images{ flex: 0 0 340px; max-width: 340px; }
}

@media (max-width: 768px){
  .aerosol-layout{
    flex-direction: column;
    gap: 12px;
  }
  .aerosol-images{
    flex: 1 1 auto;
    max-width: 100%;
  }
}

/* Very small phones */
@media (max-width: 380px){
  body{ padding: calc(20px + env(safe-area-inset-top)) 10px calc(40px + env(safe-area-inset-bottom)); }
  section{ padding: 16px; border-radius: var(--r); }
  body > h2{ letter-spacing: .12em; }
}

/* ============================================================
   Accessibility: focus, reduced motion
   ============================================================ */
:focus-visible{
  outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: 3px;
  border-radius: 12px;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ transition: none !important; animation: none !important; }
}