cat > assets/css/style.css <<'EOF'
/* -----------------------------------------------------------
   CmLayer — style.css
   - Responsive mobile rules
   - Automatic dark mode (prefers-color-scheme)
   - Mosaic background + floating logos container styles
   - Parallax friendly
----------------------------------------------------------- */

/* CSS variables (light/dark handled via prefers-color-scheme) */
:root{
  --bg: #f4f4f4;
  --text: #0b2b33;       /* dark teal-ish */
  --accent: #00eaff;     /* aqua */
  --muted: #666;
  --header-bg: rgba(0,0,0,0.8);
  --card-bg: #fff;
  --logo-opacity: 0.18;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root{
    --bg: #000;
    --text: #cfeff3;
    --accent: #00eaff;
    --muted: #8aa7ad;
    --header-bg: rgba(1,1,1,0.85);
    --card-bg: rgba(8,8,8,0.6);
    --logo-opacity: 0.12;
  }
}

/* Global */
*{box-sizing:border-box}
html,body{height:100%}
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
  overflow-x:hidden;
  position:relative;
}

/* Header */
header{
  display:flex;
  gap:1.25rem;
  justify-content:center;
  align-items:center;
  padding:1rem 1.25rem;
  background: var(--header-bg);
  position:sticky;
  top:0;
  z-index:120;
}

header a{
  color:var(--accent);
  text-decoration:none;
  font-weight:600;
  letter-spacing:0.2px;
}
header a:hover{opacity:.9; transform:translateY(-1px); transition:all .18s ease}

/* layout container */
.container{
  max-width:1100px;
  margin:0 auto;
  padding:3.5rem 1.25rem;
  position:relative;
  z-index:50; /* above mosaic layer */
}

/* Hero */
.hero{
  text-align:center;
  padding:4rem 1rem;
  position:relative;
}
.hero h1{
  font-size:3.2rem;
  margin:0 0 0.6rem 0;
  color:var(--accent);
  display:inline-block;
  animation: slideUp 1s cubic-bezier(.22,.9,.3,1);
}
.hero p{
  margin:0;
  color:var(--muted);
  font-size:1.05rem;
}

/* Cards / sections */
section.card{
  background: var(--card-bg);
  border-radius:12px;
  padding:1.25rem;
  margin:1.5rem 0;
  box-shadow: 0 6px 20px rgba(2,6,10,0.06);
  backdrop-filter: blur(4px);
  z-index:60;
}

/* floating-logos container (mosaic layer) ------------------ */
/* This is the tiled / mosaic layer. It's fixed and covers whole viewport, but logos are low-opacity
   and positioned to avoid central area (JS enforces that). */
.floating-logos{
  pointer-events: none;       /* logos should not capture clicks */
  position:fixed;
  inset:0;
  z-index:5;                  /* under content (content has z-index 50+) */
  overflow:hidden;
  display:block;
  mix-blend-mode: screen;     /* subtle blending; adjust if undesired */
}

/* Each logo element */
.floating-logos img{
  position:absolute;
  width:48px;
  height:auto;
  opacity:var(--logo-opacity);
  transform-origin: center center;
  will-change: transform, opacity;
  transition: transform .6s ease, opacity .6s ease;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.2));
}

/* On hover (dev only; pointer-events none means hover not possible),
   but for future: if you want logos clickable, remove pointer-events:none on container. */

/* Parallax movement (JS will add inline transform based on scroll) */
.floating-logos img[data-parallax]{
  /* nothing here; parallax applied from JS */
}

/* Accessibility helpers */
.skip-link{
  position: absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
.skip-link:focus{
  left:10px;
  top:10px;
  width:auto;
  height:auto;
  background:#fff;
  padding:.5rem;
  z-index:200;
}

/* Footer */
footer{
  padding:2rem 1rem;
  text-align:center;
  color:var(--muted);
  background:transparent;
  z-index:60;
}

/* Animations */
@keyframes slideUp{
  from{opacity:0; transform:translateY(30px)}
  to{opacity:1; transform:translateY(0)}
}

/* -----------------------------------------------------------
   Responsive — Mobile
----------------------------------------------------------- */
@media (max-width: 820px){
  .hero h1{ font-size:2.2rem; }
  .floating-logos img{ width:32px; opacity: calc(var(--logo-opacity) + 0.02); }
  .container{ padding:2rem 0.9rem; }
}

/* For very small phones */
@media (max-width:480px){
  header{ padding:0.6rem; gap:.7rem}
  .hero{ padding:2.4rem 0.8rem }
  .hero h1{ font-size:1.6rem;}
  .floating-logos img{ width:24px; opacity:0.12; }
}

/* Utility: ensures content sits visually above mosaic */
.content-layer{
  position:relative;
  z-index:60;
}

/* If the user wants to temporarily hide mosaic */
.mosaic-hidden .floating-logos{ display:none !important; }
EOF