:root{
  /* Background variables — edit these values directly to change the animated background */
  --bg1: #ff7a2e;    /* orange accent */
  --bg2: #f7ecd9;    /* cream */
  --bg3: #040816;    /* deep indigo accent / base background */
  --bg-blur: 36px;   /* blur amount for background blobs */
  --bg-speed: 40s;   /* rotation speed */
  /* Grain overlay variables */
  --grain-opacity: 0.06; /* darkness of dots */
  --grain-size: 4px;     /* repeat size of the dot pattern */
}
body{font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;}
/* Reset and basic layout */
html, body { min-height: 110dvh; height: 100%; margin: 0; }
body {
  /* Primary UI font stack: Helvetica Neue / Arial for clean, neutral UI text */
  font-family: 'Helvetica Neue', Arial, sans-serif;
  color: #fff;
  /* base page color so Safari chrome blends with site */
  background: var(--bg3, #040816);
  min-height: 110dvh;
  padding-bottom: env(safe-area-inset-bottom);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings use Georgia for a contrasting serif tone */
h1, h2, h3, h4, h5, h6 {
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-weight: 600;
}

/* Monospace for code and preformatted text */
code, kbd, pre, samp {
  font-family: SFMono-Regular, Menlo, Monaco, 'Roboto Mono', 'Courier New', monospace;
}

/* Minimal page content placeholder */
.content{ position: relative; z-index: 3; min-height: 100dvh; display: block; padding-top: 72px; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
.center{ text-align: center }
.muted{ color: rgba(255,255,255,0.75) }

/* layout helpers */
.wrap{ max-width: 1100px; margin: 0 auto; padding: 3rem 1.25rem }

/* sections */
.section{ width: 100%; padding: 6rem 0; position: relative; z-index: 3 }
.hero{ display:flex; align-items:center; min-height: 100vh; }
#about{ position: relative; color: #fff; }
#about .wrap{ position: relative; z-index: 2; }
#projects, #contact{ background: transparent; }
.section h2{ margin-bottom: 0.5rem }

#experience {
  padding-top: 5rem;
  padding-bottom: 5rem;
}
#experience h2 {
  margin-bottom: 1rem;
}
#experience h4 {
  margin-bottom: 1rem;
}
#experience ul {
  margin-bottom: 0;
  padding-left: 1.15rem;
}
#experience ul li {
  margin-bottom: 0.85rem;
  line-height: 1.65;
}

.btn-primary {
  background: transparent !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.65) !important;
  border-radius: 0.5rem !important;
  padding: 0.85rem 1.6rem !important;
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: none !important;
  transition: transform 0.25s ease, border-color 0.25s ease, color 0.25s ease, background-color 0.25s ease;
}

.btn-primary:hover,
.btn-primary:focus {
  color: #ffb874 !important;
  border-color: rgba(255,255,255,0.95) !important;
  background: rgba(255,255,255,0.05) !important;
  transform: translateY(-1px);
}

.btn-primary:active {
  transform: translateY(0);
}

#hero{ position: relative; }
#projects{ position: relative; }
#projects .container, #hero .container{ position: relative; z-index: 2; }

.hero .hero-actions a {
  margin-bottom: 0.75rem;
}

@media (max-width: 768px) {
  .hero .hero-actions {
    display: grid;
    gap: 0.85rem;
  }
  .hero .hero-actions a {
    margin-right: 0;
    width: 100%;
    justify-content: center;
  }
}

.back-to-top {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  width: 3.4rem;
  height: 3.4rem;
  display: none;
  place-items: center;
  border-radius: 0.75rem;
  border: 1px solid rgba(255,255,255,0.55);
  background: rgba(0,0,0,0.48);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 14px 32px rgba(0,0,0,0.24);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.25s ease;
  z-index: 10;
}

.back-to-top.visible {
  display: grid;
  opacity: 1;
  transform: translateY(0);
}

.back-to-top:hover,
.back-to-top:focus {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.8);
}

/* make anchors scroll smoothly */
html { scroll-behavior: smooth }

.content::before{
  /* subtle global overlay for readability */
  content: '';
  position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(2,6,23,0.12), rgba(2,6,23,0.2)); pointer-events: none;
}
#about .wrap, .hero .wrap, #projects .wrap, #contact .wrap{ position: relative; z-index: 3; }

*{box-sizing: border-box}

.site-bg{
  position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: hidden; display:block;
}

.site-bg .bg-color,
.site-bg .bg-dark{
  /* Make blobs fixed to the viewport so Safari considers them for tinting and they remain visually stable */
  position: fixed; width: 200%; height: 200%; border-radius: 100em; transform-origin: center; animation: rotate var(--bg-speed, 40s) linear infinite; z-index: 0; pointer-events: none;
}
.site-bg .bg-color{ right: -10%; top: -30%; background: radial-gradient(circle at 20% 30%, var(--bg1, #ff7a59) 0%, transparent 55%); filter: blur(var(--bg-blur, 36px)); mix-blend-mode: screen; opacity: 0.95 }
.site-bg .bg-dark{ left: -10%; bottom: -30%; background: radial-gradient(circle at 80% 70%, var(--bg2, #0a0f1f) 0%, transparent 55%); filter: blur(var(--bg-blur, 36px)); animation-direction: reverse; animation-delay: 8s; mix-blend-mode: multiply; opacity: 0.85 }

/* grain/dot overlay placed above the animated blobs but beneath site content */
.site-bg::after{
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: radial-gradient(rgba(0,0,0,var(--grain-opacity)) 1px, rgba(0,0,0,0) 1px);
  background-size: var(--grain-size) var(--grain-size);
  mix-blend-mode: multiply;
  opacity: 0.9;
}

@keyframes rotate{ 0%{ transform: rotate(0deg); } 100%{ transform: rotate(360deg); } }

/* ensure text inside about remains readable */
#about .muted{ color: rgba(255,255,255,0.85) }

/* Hide scrollbars in Safari/WebKit and other browsers while preserving scrolling */
/* Firefox */
html, body, .content { scrollbar-width: none; }
/* IE 10+ */
html, body, .content { -ms-overflow-style: none; }
/* WebKit (Safari, Chrome) */
html::-webkit-scrollbar, body::-webkit-scrollbar, .content::-webkit-scrollbar { width: 0; height: 0; background: transparent; }

/* Responsive adjustments */
@media (max-width: 768px){
  body::after{
    content: '';
    position: fixed;
    inset: 0;
    z-index: 20;
    pointer-events: none;
    box-shadow: inset 0 0 4rem rgba(4, 8, 22, 0.72);
  }
  .content{ padding: 2rem; }
}