/* =========================================
   TWIST STUDIO // UNIFIED PREMIUM UI (#7e6687)
   ========================================= */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@800&family=Outfit:wght@300;400;500;600;700;800&display=swap');

:root {
    --bg-main: #0c0b0e;
    --text-primary: #ffffff;
    --text-secondary: #a7a4af;
    --theme-color: #7e6687; 
    --theme-gradient: linear-gradient(135deg, #7e6687 0%, #ffffff 100%);
    --glass-bg: rgba(25, 22, 28, 0.6);
    --glass-border: rgba(126, 102, 135, 0.3);
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Outfit', sans-serif; }

body { background-color: var(--bg-main); color: var(--text-primary); overflow-x: hidden; min-height: 100vh; display: flex; flex-direction: column; }
img { max-width: 100%; height: auto; display: block; }

/* Background Blobs */
.background-wrapper { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1; overflow: hidden; background: radial-gradient(circle at 50% 50%, #1a171d 0%, #0c0b0e 100%); }
.fluid-blob { position: absolute; filter: blur(150px); opacity: 0.2; border-radius: 50%; animation: float 25s infinite ease-in-out alternate; }
.blob-primary { background: linear-gradient(135deg, var(--theme-color) 0%, rgba(255,255,255,0.4) 100%); width: 60vw; height: 60vw; top: -15%; right: -15%; }
.blob-secondary { background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, var(--theme-color) 100%); width: 40vw; height: 40vw; bottom: -15%; left: -15%; animation-delay: -5s; }
@keyframes float { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(50px, 50px) scale(1.1); } }

.container { width: 95%; max-width: 1400px; margin: 0 auto; padding: 0 20px; }

/* Navbar */
header { padding-top: 30px; position: sticky; top: 0; z-index: 100; }
nav { background: rgba(18, 16, 20, 0.85); backdrop-filter: blur(25px); border: 1px solid var(--glass-border); border-radius: 100px; padding: 12px 35px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 20px 50px rgba(0,0,0,0.5); }
.logo-container { display: flex; align-items: center; text-decoration: none; gap: 15px; }
.brand-name { font-family: 'Orbitron', sans-serif; font-weight: 800; font-size: 24px; color: #fff; text-shadow: 0 0 15px rgba(126, 102, 135, 0.5); }
.brand-name span { color: var(--theme-color); }

.nav-links { display: flex; gap: 10px; background: rgba(126, 102, 135, 0.05); padding: 6px; border-radius: 100px; }
.nav-links a { color: var(--text-secondary); text-decoration: none; font-weight: 500; font-size: 16px; padding: 12px 28px; border-radius: 100px; transition: 0.3s; }
.nav-links a:hover, .nav-links a.active { color: #fff; background: rgba(126, 102, 135, 0.15); }

/* Discord Button */
.discord-btn { background: var(--theme-color); color: #fff; padding: 14px 32px; border-radius: 100px; text-decoration: none; font-weight: 800; font-size: 15px; transition: 0.3s; display: flex; align-items: center; gap: 10px; border: 1px solid rgba(255,255,255,0.1); }
.discord-btn:hover { background: #fff; color: #000; transform: translateY(-3px); }

/* Hero */
.hero { display: flex; align-items: center; justify-content: space-between; padding: 60px 0; gap: 60px; min-height: 65vh;}
.hero-text { flex: 1.3; }
.hero-text h1 { font-size: 72px; font-weight: 800; line-height: 1.05; margin-bottom: 30px; letter-spacing: -2px; }
.hero-text h1 span { background: var(--theme-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.hero-text p { font-size: 19px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 45px; max-width: 90%; }

.btn-primary { background: var(--theme-gradient); color: #000; padding: 18px 42px; border-radius: 100px; text-decoration: none; font-weight: 800; font-size: 17px; transition: 0.3s; display: flex; align-items: center; gap: 12px; box-shadow: 0 10px 30px rgba(126, 102, 135, 0.2); }
.btn-primary:hover { transform: translateY(-4px); box-shadow: 0 15px 40px rgba(126, 102, 135, 0.4); }

/* Secure Core Card */
.glass-card { background: var(--glass-bg); backdrop-filter: blur(30px); border: 1.5px solid var(--glass-border); border-radius: 28px; padding: 40px; width: 100%; max-width: 480px; box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5); }
.status-row { background: rgba(0,0,0,0.3); border-radius: 18px; padding: 20px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; border: 1px solid rgba(126, 102, 135, 0.2); }

/* Bento Grids */
.grid-panel { background: rgba(18, 16, 20, 0.6); border: 1px solid var(--glass-border); border-radius: 24px; padding: 50px; margin-bottom: 30px; width: 100%; }
.section-header h2 { font-size: 38px; font-weight: 800; margin-bottom: 8px; }

/* Features */
.features-container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; width: 100%; margin-top: 30px; }
.feature-box { background: rgba(126, 102, 135, 0.03); border: 1px solid rgba(126, 102, 135, 0.1); border-radius: 20px; padding: 35px; display: flex; flex-direction: column; align-items: flex-start; gap: 15px; transition: 0.3s; }
.feature-box:hover { border-color: var(--theme-color); background: rgba(126, 102, 135, 0.08); transform: translateY(-5px); }
.feature-icon-container { width: 55px; height: 55px; border-radius: 50%; background: rgba(126, 102, 135, 0.15); display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--theme-color); box-shadow: 0 0 15px rgba(126, 102, 135, 0.2); }
.feature-icon-container svg { stroke: var(--theme-color); width: 26px; height: 26px; }

/* Team Grid */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; width: 100%; margin-top: 30px; }
.team-card { background: rgba(0,0,0,0.4); border: 1px solid var(--glass-border); border-radius: 20px; padding: 30px; display: flex; align-items: center; gap: 20px; transition: 0.4s ease; }
.team-card:hover { border-color: var(--theme-color); background: rgba(126, 102, 135, 0.08); transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
.team-avatar { width: 65px; height: 60px; border-radius: 50%; object-fit: cover; border: 2.5px solid var(--theme-color); }

/* Developer Layout */
.dev-layout { display: grid; grid-template-columns: 1fr 2fr; gap: 30px; margin-top: 50px; align-items: start; }
.dev-profile-card { background: linear-gradient(180deg, rgba(18,16,20,0.8) 0%, rgba(126,102,135,0.05) 100%); border: 1px solid var(--glass-border); border-radius: 32px; padding: 50px 40px; text-align: center; }
.dev-avatar-main { width: 180px; height: 180px; border-radius: 50%; object-fit: cover; border: 3.5px solid var(--theme-color); margin: 0 auto 20px auto; box-shadow: 0 20px 40px rgba(0,0,0,0.5); }

/* Status eepy Badge */
.status-badge { background: rgba(126, 102, 135, 0.15); border: 1px solid var(--theme-color); color: #fff; padding: 5px 15px; border-radius: 100px; font-size: 11px; font-weight: 800; text-transform: uppercase; display: inline-flex; align-items: center; gap: 6px; }
.status-dot { width: 7px; height: 7px; background: var(--theme-color); border-radius: 50%; box-shadow: 0 0 10px var(--theme-color); }

/* Tags */
.tags-container { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; }
.tech-tag { background: rgba(126, 102, 135, 0.1); border: 1px solid rgba(126, 102, 135, 0.2); padding: 8px 18px; border-radius: 100px; color: #fff; font-weight: 600; font-size: 13px; transition: 0.3s; }
.tech-tag:hover { background: rgba(126, 102, 135, 0.3); border-color: var(--theme-color); }

/* Footer */
footer { margin-top: auto; padding: 40px 0 60px 0; width: 100%; }
.footer-glass { background: rgba(18, 16, 20, 0.6); backdrop-filter: blur(25px); border: 1px solid var(--glass-border); border-radius: 24px; padding: 30px 40px; display: flex; justify-content: space-between; align-items: center; }
.footer-badge { background: rgba(255, 77, 77, 0.05); border: 1.5px solid #ff4d4d; color: #fff; padding: 12px 28px; border-radius: 100px; font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.heart-icon { fill: #ff4d4d; width: 20px; height: 20px; }

@media (max-width: 900px) {
    .hero, .dev-layout, .footer-glass { flex-direction: column; text-align: center; gap: 20px; }
    .features-container, .team-grid { grid-template-columns: 1fr; }
}y