/*
  Architect of Silence — 2100 UI Skin (CSS only)
  - Neon spectral gradient fields
  - 3D chroma text effects
  - Animated isometric grid
  - Glass cards + subtle noise
*/

:root{
  --bg:#070a13;
  --fg:#e9f2ff;
  --muted:#b8c4da; /* ↑ slightly brighter for contrast */
  --a:#00f0ff;    /* cyan */
  --b:#7b6cff;    /* violet */
  --c:#ff5df3;    /* magenta */
  --d:#00ffa3;    /* mint */
  --glass: rgba(255,255,255,.06);
  --stroke: rgba(255,255,255,.12);
  --radius: 18px;
  --shadow: 0 20px 60px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.04) inset;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--fg);
  font:16px/1.6 Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  background:
    radial-gradient(1200px 800px at 10% -10%, rgba(255,93,243,.15), transparent 60%),
    radial-gradient(1000px 700px at 110% 0%, rgba(0,240,255,.16), transparent 60%),
    radial-gradient(1000px 800px at 30% 120%, rgba(0,255,163,.12), transparent 60%),
    linear-gradient(180deg, #05070d 0%, #0a0f1b 100%);
  overflow-x:hidden;
}

/* subtle film grain */
.noise{position:fixed;inset:0;pointer-events:none;mix-blend-mode:overlay;z-index:0;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="220" height="220" viewBox="0 0 220 220"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.6"/></svg>');
  animation: noisePulse 9s ease-in-out infinite;
  opacity:.05;
}
@keyframes noisePulse {
  0%, 100% { opacity: .04; }
  50% { opacity: .07; }
}

/* NAV */
.nav{position:sticky;top:0;z-index:5;backdrop-filter:saturate(160%) blur(10px);background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
  display:flex;align-items:center;justify-content:space-between;padding:14px 22px;border-bottom:1px solid var(--stroke)}
.nav__brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.3px}
.glyph{width:36px;height:36px;border-radius:50%;position:relative;box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 8px 24px rgba(0,0,0,.4);
  background:conic-gradient(from 120deg, var(--a), var(--b), var(--c), var(--d), var(--a))}
.glyph:after{content:"";position:absolute;inset:6px;border-radius:50%;border:1px solid rgba(255,255,255,.5);filter:drop-shadow(0 0 10px rgba(123,108,255,.6))}
.brand{font-weight:800}
.nav__links{display:flex;align-items:center;gap:16px}
.nav__links a{color:var(--muted);text-decoration:none;font-weight:600}
.nav__links a:hover{color:var(--fg)}
.chip{padding:8px 12px;border-radius:999px;border:1px solid var(--stroke);background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02))}

/* HERO */
.hero{position:relative;min-height:72vh;display:grid;place-items:center;padding:80px 18px}
.hero__grid{position:absolute;inset:-2px;z-index:0;background-image:linear-gradient(rgba(255,255,255,.06),rgba(255,255,255,.06)),
  repeating-linear-gradient( to right, transparent 0 44px, rgba(255,255,255,.06) 44px 45px),
  repeating-linear-gradient( to bottom, transparent 0 44px, rgba(255,255,255,.06) 44px 45px);
  transform:skewY(-6deg) perspective(900px) rotateX(35deg);transform-origin:bottom center;
  filter:drop-shadow(0 40px 120px rgba(0,0,0,.5));
  animation: drift 12s ease-in-out infinite;
}
@keyframes drift {
  0% { transform: skewY(-6deg) perspective(900px) rotateX(35deg) translateY(0); }
  50% { transform: skewY(-6deg) perspective(900px) rotateX(35deg) translateY(-10px); }
  100% { transform: skewY(-6deg) perspective(900px) rotateX(35deg) translateY(0); }
}
.hero__inner{position:relative;z-index:1;max-width:980px;text-align:center}
.hero__tag{display:inline-flex;align-items:center;gap:10px;color:var(--muted);border:1px solid var(--stroke);padding:8px 12px;border-radius:999px;background:var(--glass)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--d);box-shadow:0 0 14px var(--d)}
.hero__title{font-size:clamp(2.4rem, 7vw, 5rem);line-height:1.04;margin:14px 0;font-weight:900;letter-spacing:.4px}
h1,h2,h3{font-family:Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;}
.glow{
  background:linear-gradient(90deg, var(--a), var(--b), var(--c), var(--d));
  -webkit-background-clip:text;background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent; /* Safari fidelity */
  text-shadow:0 0 32px rgba(0,240,255,.35);
  position:relative
}
.glow::after{content:attr(data-text);position:absolute;top:2px;left:2px;z-index:-1;color:rgba(0,240,255,.2);filter:blur(8px)}
.hero__lede{color:var(--muted);max-width:72ch;margin:0 auto}
.cta{display:flex;gap:12px;justify-content:center;margin-top:18px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border-radius:14px;font-weight:800;letter-spacing:.3px;text-decoration:none}
.btn--primary{color:#00131a;background:linear-gradient(90deg, var(--a), var(--b));box-shadow:0 10px 28px rgba(0,240,255,.35)}
.btn--primary:hover{filter:brightness(1.08);transform:translateY(-1px);transition:.2s}
.btn--ghost{color:var(--fg);border:1px solid var(--stroke);background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02))}

/* SECTIONS */
.section__hd{display:flex;align-items:end;justify-content:space-between;gap:12px;padding:24px 18px 12px 18px;max-width:1200px;margin:0 auto}
.section__hd h2{margin:0;font-size:1.6rem}
.kicker{color:var(--muted);margin:0}

.about{padding:16px}
.about__grid{max-width:1200px;margin:0 auto;display:grid;gap:14px;grid-template-columns:repeat(12,1fr)}
.about__card{grid-column:span 12;background:var(--glass);backdrop-filter:blur(10px) saturate(160%);border:1px solid var(--stroke);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.about__card h3{margin:0 0 6px 0}
.bullets{margin:0;padding-left:18px}

@media(min-width:800px){.about__card{grid-column:span 4}}

/* WORKS */
.works{padding:16px}
.cards{max-width:1200px;margin:0 auto;display:grid;gap:14px;grid-template-columns:repeat(12,1fr)}
.card{grid-column:span 12;border:1px solid var(--stroke);background:
  linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
  radial-gradient(800px 240px at 20% -10%, rgba(0,240,255,.12), transparent 60%),
  radial-gradient(800px 240px at 120% 130%, rgba(255,93,243,.12), transparent 60%);
  border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);transition:.2s}
.card:hover{transform:translateY(-2px);box-shadow:0 24px 60px rgba(0,0,0,.5);
  background:linear-gradient(130deg, rgba(0,240,255,.15), rgba(255,93,243,.1)),
             linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02))}
@media(min-width:800px){.card{grid-column:span 6}}
@media(min-width:1100px){.card{grid-column:span 3}}

/* MEMOIR */
.memoir{padding:16px}
.excerpt{max-width:980px;margin:0 auto;border:1px solid var(--stroke);border-radius:var(--radius);padding:22px;background:var(--glass);backdrop-filter:blur(10px);box-shadow:var(--shadow);text-align:center}
.excerpt blockquote{margin:0 0 12px 0;font-family:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;color:#cfe8ff}
.excerpt cite{color:var(--muted)}

/* FOOTER */
.foot{max-width:1200px;margin:32px auto;padding:24px 18px;display:flex;align-items:center;justify-content:space-between;color:var(--muted);border-top:1px solid var(--stroke);background:linear-gradient(180deg, transparent, rgba(0,0,0,.6))}
.foot__links{display:flex;gap:16px}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .hero__grid{animation:none;transform:none}
  .card:hover,.about__card:hover{transform:none}
  .noise{animation:none;opacity:.05}
}