/* riron.xyz */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #0A0A14; color: #6B7280; font-family: 'Inter', sans-serif; font-weight: 400; line-height: 1.7; }
.hero { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; background: linear-gradient(135deg, #0A0A14 0%, #12121E 50%, #0A0A14 100%); background-size: 200% 200%; animation: shift 30s ease infinite; }
@keyframes shift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.fibonacci-pattern { position: absolute; width: 80vmin; height: 80vmin; animation: rotate 120s linear infinite; }
.fibonacci-pattern circle { stroke: rgba(147,197,253,0.15); stroke-width: 0.5; fill: none; }
@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.hero-content { position: relative; z-index: 1; text-align: center; }
.headline { font-family: 'Sora', sans-serif; font-weight: 700; font-size: clamp(2.5rem, 5vw, 3.5rem); color: #E8ECF1; margin-bottom: 0.5rem; }
.subtitle { font-family: 'Inter', sans-serif; font-size: 1.1rem; color: #93C5FD; }
.section-heading { font-family: 'Sora', sans-serif; font-weight: 600; font-size: 1.5rem; color: #E8ECF1; margin-bottom: 2rem; }
.gallery { max-width: 900px; margin: 0 auto; padding: 4rem 2rem; }
.experiment-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.experiment-card { background: #12121E; border: 1px solid #1E1E30; border-radius: 8px; overflow: hidden; aspect-ratio: 1; display: flex; flex-direction: column; transition: box-shadow 0.3s ease; }
.experiment-card:hover { box-shadow: 0 0 20px rgba(147,197,253,0.1); }
.pattern-preview { flex: 1; }
.voronoi { background: conic-gradient(from 0deg at 30% 40%, #12121E, #1E1E30, #12121E, #1E1E30, #12121E), conic-gradient(from 120deg at 70% 60%, #12121E, #1E1E30, #12121E, #1E1E30, #12121E); background-blend-mode: overlay; }
.fractal { background: radial-gradient(circle at 50% 50%, #1E1E30 10%, transparent 10%), radial-gradient(circle at 30% 30%, #1E1E30 8%, transparent 8%), radial-gradient(circle at 70% 70%, #1E1E30 6%, transparent 6%), radial-gradient(circle at 20% 70%, #1E1E30 4%, transparent 4%), radial-gradient(circle at 80% 30%, #1E1E30 3%, transparent 3%); background-color: #12121E; }
.interference { background: repeating-linear-gradient(0deg, transparent, transparent 8px, rgba(147,197,253,0.05) 8px, rgba(147,197,253,0.05) 9px), repeating-linear-gradient(60deg, transparent, transparent 8px, rgba(160,139,250,0.05) 8px, rgba(160,139,250,0.05) 9px), repeating-linear-gradient(120deg, transparent, transparent 8px, rgba(52,211,153,0.05) 8px, rgba(52,211,153,0.05) 9px); background-color: #12121E; }
.solution-green { color: #34D399; }
.card-info { padding: 1rem; }
.exp-name { font-family: 'Sora', sans-serif; font-weight: 600; font-size: 0.9rem; color: #E8ECF1; margin-bottom: 0.25rem; }
.complexity { font-size: 0.8rem; color: #A78BFA; }
.concepts { max-width: 900px; margin: 0 auto; padding: 4rem 2rem; }
.concept-block { display: flex; gap: 2rem; align-items: center; margin-bottom: 3rem; }
.concept-block.reverse { flex-direction: row-reverse; }
.concept-text { flex: 1; max-width: 600px; }
.concept-title { font-family: 'Sora', sans-serif; font-weight: 600; font-size: 1.2rem; color: #E8ECF1; margin-bottom: 0.75rem; }
.concept-body { font-size: 0.95rem; color: #6B7280; }
.concept-viz { width: 200px; height: 200px; border-radius: 8px; flex-shrink: 0; }
.viz-spiral { background: conic-gradient(from 0deg, rgba(147,197,253,0.2), rgba(160,139,250,0.2), rgba(52,211,153,0.2), rgba(147,197,253,0.2)); border: 1px solid #1E1E30; }
.viz-grid { background: repeating-conic-gradient(#1E1E30 0% 25%, #12121E 0% 50%) 0 0 / 20px 20px; border: 1px solid #1E1E30; }
.formulas { max-width: 900px; margin: 0 auto; padding: 4rem 2rem; }
.formula-strip { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: 1rem; }
.formula-card { background: #12121E; border-left: 3px solid #A78BFA; padding: 1rem 1.5rem; font-family: 'Fira Code', monospace; font-size: 0.95rem; color: #E8ECF1; white-space: nowrap; flex-shrink: 0; }
.footer { max-width: 900px; margin: 0 auto; padding: 3rem 2rem; text-align: center; position: relative; }
.dot-matrix { position: absolute; top: 0; left: 0; right: 0; height: 60px; background: radial-gradient(circle, #93C5FD 1px, transparent 1px); background-size: 12px 12px; opacity: 0.05; }
.footer-content { display: flex; justify-content: center; gap: 2rem; margin-bottom: 1rem; }
.footer-link { font-size: 0.85rem; color: #93C5FD; text-decoration: none; }
.footer-copy { font-size: 0.75rem; color: #6B7280; }
@media (max-width: 640px) {
    .experiment-grid { grid-template-columns: 1fr; }
    .concept-block, .concept-block.reverse { flex-direction: column; }
    .concept-viz { width: 100%; height: 150px; }
}
.fade-in { opacity: 0; transform: translateY(12px); transition: opacity 0.5s ease, transform 0.5s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }