@import url('../css pages/global.css');

/* ═══════════════════════════════════════════════════
   VARIABLES & BASE
═══════════════════════════════════════════════════ */

*,*::before,*::after { box-sizing:border-box; margin:0; }
html { overflow-x:hidden; }
body {
    font-family:'Plus Jakarta Sans',sans-serif;
    background:var(--surface);
    color:var(--text);
    transition:background 0.3s,color 0.3s;
    -webkit-font-smoothing:antialiased;
}

/* ═══════════════════════════════════════════════════
   SCROLL PROGRESS
═══════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════
   NAVIGATION
═══════════════════════════════════════════════════ */

.glass-nav.scrolled { box-shadow:0 4px 24px rgba(0,0,0,0.06); }

.nav-link { font-weight:600; font-size:13px; text-transform:uppercase; letter-spacing:0.1em; color:var(--muted); text-decoration:none; position:relative; transition:color 0.2s; }
.nav-link::after { content:''; position:absolute; bottom:-4px; left:0; width:0; height:2px; background:var(--indigo); transition:width 0.25s; }
.nav-link:hover { color:var(--indigo); }
.nav-link:hover::after,.nav-link.active::after { width:100%; }
.nav-link.active { color:var(--indigo); }

/* ═══════════════════════════════════════════════════
   NAV USER DROPDOWN
═══════════════════════════════════════════════════ */
.nav-user-dropdown { position:relative; }
.nav-user-trigger { display:flex; align-items:center; gap:8px; cursor:pointer; padding:4px 10px 4px 4px; border-radius:99px; border:1.5px solid var(--card-border); background:var(--card-bg); transition:border-color 0.2s,box-shadow 0.2s; }
.nav-user-trigger:hover { border-color:var(--indigo); box-shadow:0 0 0 3px var(--indigo-glow); }
.nav-user-trigger .nav-avatar { width:28px; height:28px; border-radius:50%; overflow:hidden; background:var(--indigo-light); display:flex; align-items:center; justify-content:center; color:var(--indigo); font-weight:800; font-size:11px; }
.nav-user-trigger .nav-avatar img { width:100%; height:100%; object-fit:cover; }
.nav-user-trigger .nav-user-name { font-size:12px; font-weight:700; color:var(--text); max-width:80px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nav-user-trigger .nav-caret { font-size:8px; color:var(--muted); transition:transform 0.2s; }
.nav-user-trigger.open .nav-caret { transform:rotate(180deg); }

.nav-dropdown-menu { position:absolute; top:calc(100% + 10px); right:0; min-width:200px; background:var(--card-bg); border:1px solid var(--card-border); border-radius:1.25rem; box-shadow:0 16px 48px rgba(0,0,0,0.12); padding:8px; z-index:200; opacity:0; pointer-events:none; transform:translateY(8px) scale(0.97); transition:opacity 0.22s,transform 0.22s cubic-bezier(0.34,1.15,0.64,1); }
.nav-dropdown-menu.open { opacity:1; pointer-events:all; transform:translateY(0) scale(1); }

.dropdown-item { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; font-size:13px; font-weight:600; color:var(--text); cursor:pointer; transition:background 0.15s; text-decoration:none; border:none; background:none; width:100%; text-align:left; }
.dropdown-item:hover { background:var(--surface-2); }
.dropdown-item i { width:16px; text-align:center; color:var(--muted); font-size:12px; }
.dropdown-item.danger { color:#DC2626; }
.dropdown-item.danger i { color:#DC2626; }
.dropdown-item.danger:hover { background:rgba(220,38,38,0.06); }
.dropdown-divider { height:1px; background:var(--card-border); margin:4px 0; }

/* ═══════════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════════ */
.hero-section { background:linear-gradient(135deg,#0F172A 0%,#1E1B4B 50%,#0F172A 100%); position:relative; overflow:hidden; padding:6rem 2rem 5rem; text-align:center; }
.hero-section::before { content:''; position:absolute; inset:0; opacity:0.04; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:200px; }

.hero-blob { position:absolute; border-radius:50%; pointer-events:none; filter:blur(100px); }
.hero-blob-1 { width:500px; height:500px; top:-200px; right:-100px; background:radial-gradient(circle,rgba(99,102,241,0.3) 0%,transparent 70%); animation:bdrift 14s ease-in-out infinite; }
.hero-blob-2 { width:400px; height:400px; bottom:-150px; left:-100px; background:radial-gradient(circle,rgba(147,51,234,0.2) 0%,transparent 70%); animation:bdrift 18s ease-in-out infinite reverse; }
@keyframes bdrift { 0%,100%{transform:translate(0,0)} 50%{transform:translate(20px,-15px)} }

.hero-eyebrow { display:inline-flex; align-items:center; gap:8px; background:rgba(99,102,241,0.12); border:1px solid rgba(99,102,241,0.3); color:#A5B4FC; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.2em; padding:6px 16px; border-radius:99px; margin-bottom:1.5rem; }
.hero-eyebrow .dot { width:5px; height:5px; background:#818CF8; border-radius:50%; animation:pdot 2s ease infinite; }
@keyframes pdot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.4;transform:scale(1.8)} }

.hero-title { font-size:clamp(2.8rem,7vw,5rem); font-weight:800; line-height:1.08; color:#F1F5F9; letter-spacing:-0.02em; margin-bottom:1.25rem; }
.hero-title 
.hero-sub { font-size:clamp(1rem,1.8vw,1.15rem); color:rgba(241,245,249,0.5); max-width:520px; margin:0 auto 2rem; line-height:1.7; font-weight:400; }

/* ═══════════════════════════════════════════════════
   DEV CARDS
═══════════════════════════════════════════════════ */
.devs-section { background:var(--surface); padding:5rem 2rem; }
.dev-cards-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; max-width:1100px; margin:0 auto; }
@media(max-width:900px) { .dev-cards-grid { grid-template-columns:1fr; max-width:480px; } }

.dev-card { position:relative; overflow:hidden; border-radius:2rem; background:var(--card-bg); border:1px solid var(--card-border); box-shadow:var(--card-shadow); text-decoration:none; display:flex; flex-direction:column; transition:transform 0.4s cubic-bezier(0.4,0,0.2,1),box-shadow 0.4s,border-color 0.25s; cursor:pointer; }
.dev-card:hover { transform:translateY(-12px); border-color:#4F46E5; box-shadow:0 24px 48px -8px rgba(79,70,229,0.22),0 0 0 1px rgba(79,70,229,0.15); }

.dev-card-banner { height:130px; flex-shrink:0; position:relative; overflow:hidden; background:linear-gradient(135deg,#1E1B4B 0%,#312E81 100%); border-radius:2rem 2rem 0 0; }
.dev-card-banner img { width:100%; height:100%; object-fit:cover; object-position:center 30%; transition:transform 0.6s; filter:brightness(0.85) saturate(1.1); }
.dev-card:hover .dev-card-banner img { transform:scale(1.06); }

.dev-card-header { position:relative; z-index:4; padding:0 1.5rem; margin-top:-38px; display:flex; align-items:flex-end; justify-content:space-between; }
.dev-card-avatar { box-shadow:0 0 0 3px var(--card-bg),0 0 0 5px rgba(79,70,229,0.3); border-radius:50%; transition:transform 0.3s,box-shadow 0.3s; }
.dev-card:hover .dev-card-avatar { transform:scale(1.07) translateY(-2px); box-shadow:0 0 0 3px var(--card-bg),0 0 0 5px rgba(79,70,229,0.55); }
.dev-card-avatar-inner { width:76px; height:76px; border-radius:50%; overflow:hidden; background:var(--indigo-light); display:flex; align-items:center; justify-content:center; font-size:1.7rem; font-weight:800; color:var(--indigo); }
.dev-card-avatar-inner img { width:100%; height:100%; object-fit:cover; }

.dev-card-body { padding:0.75rem 1.5rem 1.75rem; flex:1; display:flex; flex-direction:column; gap:0.75rem; }
.dev-card-name { font-size:1.5rem; font-weight:800; color:var(--text); line-height:1.15; }
.dev-card-role { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:var(--indigo); margin-top:2px; }
.dev-card-count { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; padding:4px 12px; border-radius:99px; background:var(--indigo-light); color:var(--indigo); border:1px solid rgba(79,70,229,0.15); }
.dev-card-desc { font-size:13px; line-height:1.6; color:var(--muted); margin-top:auto; }
.dev-card-cta { display:flex; align-items:center; justify-content:space-between; padding-top:1rem; margin-top:auto; border-top:1px solid var(--card-border); }
.dev-card-cta-text { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--text); transition:gap 0.2s,color 0.2s; }
.dev-card:hover .dev-card-cta-text { gap:10px; color:var(--indigo); }
.dev-card-arrow { transition:transform 0.2s; }
.dev-card:hover .dev-card-arrow { transform:translateX(4px); }

.team-badge { font-size:8px; font-weight:800; text-transform:uppercase; letter-spacing:0.15em; padding:3px 9px; border-radius:99px; background:var(--indigo-light); color:var(--indigo); border:1px solid rgba(79,70,229,0.2); }

/* ═══════════════════════════════════════════════════
   ANIMATIONS & UI
═══════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════
   TOAST
═══════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════
   LOGIN MODAL
═══════════════════════════════════════════════════ */

#loginModal .modal-panel { transform:scale(0.95) translateY(20px); transition:transform 0.32s cubic-bezier(0.34,1.1,0.64,1); }
#loginModal.open .modal-panel { transform:scale(1) translateY(0); }