/* ============================================
   macul.ai — shared styles
   ============================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --accent: #4af0c4;
  --accent-dim: rgba(74, 240, 196, 0.5);
  --accent-faint: rgba(74, 240, 196, 0.12);
  --bg: #03040a;
  --bg-deep: #010204;
  --text: #ddeee8;
  --text-soft: rgba(220, 240, 235, 0.75);
  --muted: rgba(200, 230, 220, 0.45);
  --muted-deep: rgba(200, 230, 220, 0.25);
  --border: rgba(74, 240, 196, 0.13);
  --border-soft: rgba(74, 240, 196, 0.07);
  --serif: 'Cormorant Garamond', serif;
  --mono: 'DM Mono', monospace;
  --max: 1200px;
  --nav-h: 72px;
}

html, body {
  width: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono);
  font-weight: 300;
  line-height: 1.6;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  position: relative;
}

/* ============================================
   Background layers
   ============================================ */

.bg {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 0%, #060d11 0%, #020408 50%, #010204 100%);
  z-index: 0;
}

.stars {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.stars::before,
.stars::after {
  content: '';
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  animation: twinkle 4s ease-in-out infinite alternate;
  box-shadow:
    120px 80px rgba(200,245,235,0.6),
    240px 150px rgba(200,245,235,0.4),
    380px 60px rgba(200,245,235,0.5),
    500px 200px rgba(200,245,235,0.3),
    620px 90px rgba(200,245,235,0.6),
    740px 170px rgba(200,245,235,0.4),
    860px 40px rgba(200,245,235,0.5),
    980px 220px rgba(200,245,235,0.3),
    60px 300px rgba(200,245,235,0.4),
    180px 380px rgba(200,245,235,0.6),
    300px 260px rgba(200,245,235,0.3),
    420px 340px rgba(200,245,235,0.5),
    540px 410px rgba(200,245,235,0.4),
    660px 280px rgba(200,245,235,0.6),
    780px 360px rgba(200,245,235,0.3),
    900px 430px rgba(200,245,235,0.5),
    30px 480px rgba(200,245,235,0.4),
    150px 520px rgba(200,245,235,0.6),
    270px 460px rgba(200,245,235,0.3),
    390px 550px rgba(200,245,235,0.5),
    510px 490px rgba(200,245,235,0.4),
    630px 570px rgba(200,245,235,0.6),
    750px 510px rgba(200,245,235,0.3),
    870px 580px rgba(200,245,235,0.5),
    990px 440px rgba(200,245,235,0.4),
    70px 620px rgba(200,245,235,0.6),
    190px 680px rgba(200,245,235,0.3),
    310px 640px rgba(200,245,235,0.5),
    430px 720px rgba(200,245,235,0.4),
    550px 660px rgba(200,245,235,0.6),
    670px 740px rgba(200,245,235,0.3),
    790px 700px rgba(200,245,235,0.5),
    910px 760px rgba(200,245,235,0.4),
    40px 800px rgba(200,245,235,0.6),
    160px 840px rgba(200,245,235,0.3),
    280px 780px rgba(200,245,235,0.5),
    400px 860px rgba(200,245,235,0.4),
    520px 820px rgba(200,245,235,0.6),
    640px 900px rgba(200,245,235,0.3),
    760px 860px rgba(200,245,235,0.5);
}
.stars::after {
  animation-delay: 2s;
  top: 40%;
  box-shadow:
    80px 120px rgba(200,245,235,0.3),
    200px 40px rgba(200,245,235,0.5),
    320px 180px rgba(200,245,235,0.4),
    440px 100px rgba(200,245,235,0.6),
    560px 240px rgba(200,245,235,0.3),
    680px 130px rgba(200,245,235,0.5),
    800px 280px rgba(200,245,235,0.4),
    920px 160px rgba(200,245,235,0.6),
    100px 350px rgba(200,245,235,0.5),
    220px 420px rgba(200,245,235,0.3),
    340px 300px rgba(200,245,235,0.6),
    460px 380px rgba(200,245,235,0.4),
    580px 450px rgba(200,245,235,0.5),
    700px 320px rgba(200,245,235,0.3),
    820px 400px rgba(200,245,235,0.6),
    940px 470px rgba(200,245,235,0.4),
    50px 540px rgba(200,245,235,0.3),
    170px 600px rgba(200,245,235,0.5),
    290px 560px rgba(200,245,235,0.4),
    410px 630px rgba(200,245,235,0.6),
    530px 580px rgba(200,245,235,0.3),
    650px 650px rgba(200,245,235,0.5),
    770px 610px rgba(200,245,235,0.4),
    890px 670px rgba(200,245,235,0.6),
    110px 730px rgba(200,245,235,0.5),
    230px 790px rgba(200,245,235,0.3),
    350px 750px rgba(200,245,235,0.6),
    470px 820px rgba(200,245,235,0.4),
    590px 770px rgba(200,245,235,0.5),
    710px 840px rgba(200,245,235,0.3);
}
@keyframes twinkle {
  0%   { opacity: 0.35; }
  100% { opacity: 1; }
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* ============================================
   Decorative iris (small motif for subpages)
   ============================================ */

.iris-motif {
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.55;
}
.iris-motif .iris-core {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%,
      transparent 0%,
      transparent 26%,
      rgba(10,38,28,0.35) 35%,
      rgba(18,55,42,0.45) 42%,
      rgba(10,38,28,0.3) 55%,
      rgba(5,18,13,0.2) 72%,
      transparent 90%
    );
}
.iris-motif .ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
.iris-motif .ring::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px dashed rgba(74,240,196,0.15);
}
.iris-motif .r1 { inset: 30%; animation: spin 18s linear infinite; }
.iris-motif .r2 { inset: 20%; animation: spin 28s linear infinite reverse; }
.iris-motif .r3 { inset: 10%; animation: spin 38s linear infinite; }
.iris-motif .r4 { inset: 2%;  animation: spin 48s linear infinite reverse; }
.iris-motif .r2::before,
.iris-motif .r3::before,
.iris-motif .r4::before { border-style: solid; border-color: rgba(74,240,196,0.08); }

.iris-motif .orbit {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: spin var(--dur, 14s) linear infinite var(--dir, normal);
}
.iris-motif .orbit::after {
  content: '';
  position: absolute;
  width: var(--size, 3px);
  height: var(--size, 3px);
  background: var(--accent);
  border-radius: 50%;
  top: 0; left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 6px var(--accent), 0 0 12px rgba(74,240,196,0.4);
  opacity: var(--op, 0.7);
}
.iris-motif .ob1 { --dur: 10s; --size: 3px; --op: 0.8; inset: -2%; }
.iris-motif .ob2 { --dur: 16s; --size: 2px; --op: 0.5; --dir: reverse; inset: -4%; }
.iris-motif .ob3 { --dur: 22s; --size: 3px; --op: 0.6; inset: -1%; animation-delay: -5s; }

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ============================================
   Navigation
   ============================================ */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  z-index: 50;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(3, 4, 10, 0.55);
  border-bottom: 1px solid var(--border-soft);
}

.logo {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.15em;
  color: var(--text);
  text-decoration: none;
  font-weight: 400;
}
.logo span { color: var(--accent); }

.nav-links {
  display: flex;
  gap: clamp(18px, 3vw, 42px);
  align-items: center;
}
.nav-links a {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  padding: 6px 0;
  position: relative;
  transition: color 0.25s ease;
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--accent);
  transition: width 0.3s ease, left 0.3s ease;
}
.nav-links a:hover {
  color: var(--text);
}
.nav-links a:hover::after {
  width: 100%;
  left: 0;
}
.nav-links a.active {
  color: var(--accent);
}
.nav-links a.active::after {
  width: 100%;
  left: 0;
}

.pill {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--border);
  padding: 7px 14px;
  border-radius: 100px;
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(74, 240, 196, 0.04);
}
.pill-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  animation: blink 2s ease-in-out infinite;
}
@keyframes blink {
  0%,100% { opacity: 1; box-shadow: 0 0 4px var(--accent); }
  50%     { opacity: 0.2; box-shadow: none; }
}

/* ============================================
   Page container / main
   ============================================ */

main {
  position: relative;
  z-index: 5;
  padding-top: var(--nav-h);
}

.container {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 28px;
}

section {
  position: relative;
  padding: clamp(80px, 12vw, 140px) 0;
}

/* ============================================
   Hero
   ============================================ */

.hero {
  min-height: calc(80vh - var(--nav-h));
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  padding: 80px 28px 40px;
}
.hero-inner {
  position: relative;
  z-index: 5;
  max-width: 760px;
}
.hero .iris-motif {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.35;
}

.eyebrow {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 22px;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 100px;
  background: rgba(74, 240, 196, 0.03);
}

h1 {
  font-family: var(--serif);
  font-size: clamp(52px, 10vw, 110px);
  font-weight: 200;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: #ffffff;
  text-shadow: 0 0 80px rgba(0,0,0,0.9), 0 2px 40px rgba(0,0,0,0.9);
  margin-bottom: 22px;
}
h1 em {
  font-style: italic;
  color: var(--accent);
  text-shadow: 0 0 40px rgba(74,240,196,0.35), 0 0 80px rgba(0,0,0,0.9);
}

.hero-tagline {
  font-family: var(--serif);
  font-size: clamp(16px, 2.2vw, 22px);
  font-weight: 300;
  font-style: italic;
  color: var(--text-soft);
  text-shadow: 0 0 40px rgba(0,0,0,0.95);
  max-width: 520px;
  margin: 0 auto;
}

/* ============================================
   Typography helpers
   ============================================ */

h2 {
  font-family: var(--serif);
  font-weight: 200;
  font-size: clamp(36px, 5.5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: #fff;
  margin-bottom: 20px;
}
h2 em {
  font-style: italic;
  color: var(--accent);
}

h3 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(22px, 3vw, 30px);
  color: #fff;
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}
h3 em {
  font-style: italic;
  color: var(--accent);
}

h4 {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}

p {
  font-family: var(--mono);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-soft);
}
p + p { margin-top: 16px; }

p.lead {
  font-family: var(--serif);
  font-size: clamp(18px, 2.3vw, 24px);
  font-weight: 300;
  font-style: italic;
  line-height: 1.45;
  color: var(--text);
}

a.link {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-dim);
  transition: border-color 0.2s;
}
a.link:hover { border-color: var(--accent); }

.section-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}
.section-label::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--accent);
}

/* ============================================
   Buttons
   ============================================ */

.btn {
  display: inline-block;
  background: transparent;
  border: 1px solid rgba(74, 240, 196, 0.4);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 16px 32px;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.btn:hover {
  background: rgba(74, 240, 196, 0.06);
  border-color: rgba(74, 240, 196, 0.7);
  box-shadow: 0 0 24px rgba(74, 240, 196, 0.1);
}
.btn:active {
  background: rgba(74, 240, 196, 0.12);
}
.btn.ghost {
  border-color: var(--border);
  color: var(--text-soft);
}
.btn.ghost:hover {
  color: var(--accent);
  border-color: rgba(74, 240, 196, 0.4);
}

/* ============================================
   Cards / grid
   ============================================ */

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(24px, 4vw, 56px);
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 36px);
}
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2.5vw, 28px);
}

.card {
  padding: 36px 32px;
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  background: rgba(74, 240, 196, 0.015);
  transition: border-color 0.3s, background 0.3s, transform 0.3s;
}
.card:hover {
  border-color: var(--border);
  background: rgba(74, 240, 196, 0.03);
  transform: translateY(-2px);
}

.card .glyph {
  font-size: 22px;
  color: var(--accent);
  margin-bottom: 18px;
  display: block;
}

/* ============================================
   Divider
   ============================================ */

.divider {
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--border) 30%,
    var(--border) 70%,
    transparent 100%);
  margin: 0 auto;
  max-width: 1100px;
}

/* ============================================
   Footer
   ============================================ */

footer {
  position: relative;
  z-index: 5;
  padding: 60px 28px 36px;
  border-top: 1px solid var(--border-soft);
  background: rgba(3, 4, 10, 0.5);
}
.footer-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 32px;
}
.footer-brand {
  max-width: 320px;
}
.footer-brand .logo { font-size: 15px; margin-bottom: 10px; display: inline-block; }
.footer-brand p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--muted);
}

.footer-nav {
  display: flex;
  gap: clamp(28px, 5vw, 64px);
  flex-wrap: wrap;
}
.footer-col h5 {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.footer-col a {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-soft);
  text-decoration: none;
  padding: 4px 0;
  transition: color 0.2s;
}
.footer-col a:hover { color: var(--accent); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--border-soft);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-deep);
}

/* ============================================
   Responsive
   ============================================ */

@media (max-width: 800px) {
  .nav {
    padding: 0 18px;
  }
  .nav-links {
    gap: 16px;
  }
  .nav-links a {
    font-size: 9px;
    letter-spacing: 0.16em;
  }
  .pill {
    display: none;
  }
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
  .iris-motif {
    width: 300px;
    height: 300px;
  }
  section {
    padding: 80px 0;
  }
}

@media (max-width: 500px) {
  .nav-links {
    gap: 12px;
  }
  .nav-links a {
    font-size: 8.5px;
  }
  .logo {
    font-size: 12px;
  }
}

/* ============================================
   Utilities
   ============================================ */

.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-xl { margin-top: clamp(32px, 5vw, 56px); }
.mt-lg { margin-top: clamp(20px, 3vw, 32px); }
.max-prose { max-width: 680px; }

.fade-in {
  opacity: 0;
  transform: translateY(14px);
  animation: fadeIn 0.9s ease forwards;
}
.fade-in.delay-1 { animation-delay: 0.1s; }
.fade-in.delay-2 { animation-delay: 0.25s; }
.fade-in.delay-3 { animation-delay: 0.4s; }
.fade-in.delay-4 { animation-delay: 0.55s; }
@keyframes fadeIn {
  to { opacity: 1; transform: translateY(0); }
}