/* penclos.com */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: linear-gradient(135deg, #0f766e, #134e4a); color: #f0fdfa; font-family: 'Inter', sans-serif; font-weight: 400; line-height: 1.6; min-height: 100vh; }
.gradient-line { height: 2px; background: linear-gradient(90deg, #2dd4bf, #22c55e); }
.hero { text-align: center; padding: 6rem 2rem 3rem; position: relative; overflow: hidden; }
.blur-bg { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.15; }
.b1 { width: 200px; height: 200px; background: #14b8a6; top: 10%; left: 15%; }
.b2 { width: 150px; height: 150px; background: #14b8a6; bottom: 10%; right: 20%; }
.glass-panel { background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 16px; padding: 2rem; position: relative; z-index: 1; }
.hero-glass { display: inline-block; }
.protected-badge { display: inline-block; font-family: 'IBM Plex Mono', monospace; font-size: 0.5rem; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 9999px; padding: 3px 12px; margin-bottom: 0.75rem; color: #2dd4bf; letter-spacing: 0.1em; }
.brand { font-family: 'Sora', sans-serif; font-weight: 600; font-size: clamp(2rem, 5vw, 3rem); }
.tagline { font-size: 0.8rem; opacity: 0.7; margin-top: 0.5rem; }
.layers { max-width: 480px; margin: 0 auto; padding: 2rem 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.glass-card { background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 16px; padding: 1.5rem; display: flex; flex-direction: column; gap: 0.3rem; }
.green-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; display: inline-block; flex-shrink: 0; }
.card-title { font-family: 'Sora', sans-serif; font-weight: 600; font-size: 0.85rem; }
.card-desc { font-size: 0.75rem; opacity: 0.7; }
.layer-stack { position: relative; height: 80px; margin-top: 1rem; }
.stack-layer { position: absolute; left: 50%; transform: translateX(-50%); border-radius: 12px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); backdrop-filter: blur(8px); }
.l1 { width: 200px; height: 50px; bottom: 0; }
.l2 { width: 180px; height: 50px; bottom: 10px; left: calc(50% + 8px); transform: translateX(-50%); }
.l3 { width: 160px; height: 50px; bottom: 20px; left: calc(50% + 16px); transform: translateX(-50%); }
.status { max-width: 480px; margin: 0 auto; padding: 2rem 1.5rem; }
.status-bar { display: flex; justify-content: space-around; flex-wrap: wrap; gap: 1rem; }
.status-item { display: flex; align-items: center; gap: 0.4rem; }
.status-text { font-family: 'IBM Plex Mono', monospace; font-size: 0.6rem; }
.enclosed { text-align: center; padding: 3rem 2rem 4rem; }
.footer-glass { display: inline-block; }
.footer-text { font-family: 'Sora', sans-serif; font-weight: 600; font-size: 0.9rem; color: #2dd4bf; }
.fade-in { opacity: 0; transform: translateY(12px); transition: opacity 0.5s ease, transform 0.5s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }