button{font-family:'Outfit',sans-serif;cursor:pointer}
input,select,textarea{font-family:'Outfit',sans-serif}

/* ═══ SCREENS ═══ */
/* Use !important to guarantee .screen always hides when not active,
   regardless of any display property on sub-classes like .login-screen */
.screen { display: none !important; min-height: 100vh; }
.screen.active { display: block !important; }
/* Login screen needs flex layout — only apply when active */
.screen.active.login-screen {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

/* ═══ LANDING ═══ */
.landing-nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:0 5%;height:72px;display:flex;align-items:center;justify-content:space-between;transition:all .3s;border-bottom:1px solid transparent}
.landing-nav.scrolled{background:rgba(255,255,255,.95);backdrop-filter:blur(12px);border-color:var(--border);box-shadow:var(--shadow)}
.nav-logo{display:flex;align-items:center;gap:10px}
.nav-logo-mark{width:36px;height:36px;background:var(--ink);border-radius:10px;display:flex;align-items:center;justify-content:center}
.nav-logo-mark svg{width:20px;height:20px;fill:var(--gold)}
.nav-logo-name{font-family:'Playfair Display',serif;font-size:20px;font-weight:700;color:var(--ink)}
.nav-links{display:flex;align-items:center;gap:2rem}
.nav-links a{font-size:14px;color:var(--slate);text-decoration:none;font-weight:500;transition:color .2s}
.nav-links a:hover{color:var(--ink)}
.nav-cta{display:flex;gap:10px}

/* ═══ BUTTONS ═══ */
.btn{display:inline-flex;align-items:center;gap:6px;padding:10px 20px;border-radius:var(--radius-sm);font-size:13px;font-weight:500;border:none;transition:all .15s;white-space:nowrap;text-decoration:none}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--border2)}.btn-ghost:hover{background:var(--bg);border-color:var(--ink)}
.btn-primary{background:var(--ink);color:#fff}.btn-primary:hover{background:var(--ink2);transform:translateY(-1px);box-shadow:var(--shadow)}
.btn-gold{background:var(--gold);color:var(--ink);font-weight:600}.btn-gold:hover{background:var(--gold2);transform:translateY(-1px)}
/* Landing page buttons on dark hero background */
.btn-hero-outline{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.45);font-weight:600}.btn-hero-outline:hover{background:rgba(255,255,255,.1);border-color:#fff}
.btn-nav-outline{background:rgba(255,255,255,.08);color:rgba(255,255,255,.92);border:1.5px solid rgba(255,255,255,.55);font-weight:500}.btn-nav-outline:hover{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.85)}
.landing-nav.scrolled .btn-nav-outline{color:var(--ink);border-color:var(--border2)}.landing-nav.scrolled .btn-nav-outline:hover{background:var(--bg)}
.btn-danger{background:var(--ru-bg);color:var(--ruby);border:1px solid rgba(214,59,59,.3)}.btn-danger:hover{background:var(--ruby);color:#fff}
.btn-success{background:var(--em-bg);color:var(--emerald);border:1px solid rgba(16,160,106,.3)}.btn-success:hover{background:var(--emerald);color:#fff}
.btn-amber{background:var(--am-bg);color:var(--amber);border:1px solid rgba(217,119,6,.3)}.btn-amber:hover{background:var(--amber);color:#fff}
.btn-azure{background:var(--az-bg);color:var(--azure);border:1px solid rgba(37,99,235,.3)}.btn-azure:hover{background:var(--azure);color:#fff}
.btn-violet{background:var(--vi-bg);color:var(--violet);border:1px solid rgba(124,58,237,.3)}.btn-violet:hover{background:var(--violet);color:#fff}
.btn-sm{padding:6px 12px;font-size:12px}.btn-xs{padding:4px 9px;font-size:11px}.btn-icon{width:30px;height:30px;padding:0;justify-content:center}

/* ═══ HERO ═══ */
.hero{min-height:100vh;background:var(--ink);position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding:120px 5% 80px}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:60px 60px;opacity:.5}
.hero-glow{position:absolute;top:-20%;right:-10%;width:600px;height:600px;background:radial-gradient(circle,rgba(212,168,67,.18) 0%,transparent 70%);pointer-events:none}
.hero-glow2{position:absolute;bottom:-20%;left:-5%;width:500px;height:500px;background:radial-gradient(circle,rgba(37,99,235,.12) 0%,transparent 70%);pointer-events:none}
.hero-inner{max-width:1100px;margin:0 auto;width:100%;position:relative;z-index:1}
.hero-tag{display:inline-flex;align-items:center;gap:8px;background:rgba(212,168,67,.12);border:1px solid rgba(212,168,67,.3);border-radius:20px;padding:6px 14px;font-size:13px;color:var(--gold2);font-weight:500;margin-bottom:28px;animation:fadeUp .6s ease both}
.hero-tag::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--gold);display:inline-block;animation:pulse 1.5s infinite}
.hero-h1{font-family:'Playfair Display',serif;font-size:clamp(42px,6vw,78px);font-weight:900;color:#fff;line-height:1.08;margin-bottom:24px;animation:fadeUp .6s .1s ease both}
.hero-h1 em{color:var(--gold);font-style:normal}
.hero-sub{font-size:clamp(16px,2vw,20px);color:rgba(255,255,255,.6);max-width:580px;margin-bottom:40px;font-weight:300;animation:fadeUp .6s .2s ease both}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:64px;animation:fadeUp .6s .3s ease both}
.hero-stats{display:grid;grid-template-columns:repeat(3,auto);gap:40px;animation:fadeUp .6s .4s ease both}
.hero-stat-val{font-family:'Playfair Display',serif;font-size:36px;font-weight:700;color:#fff}
.hero-stat-label{font-size:13px;color:rgba(255,255,255,.45);font-weight:400}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* ═══ FEATURES SECTION ═══ */
.section{padding:80px 5%}
.section-inner{max-width:1100px;margin:0 auto}
.section-tag{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--gold);font-weight:600;margin-bottom:12px}
.section-h2{font-family:'Playfair Display',serif;font-size:clamp(28px,4vw,42px);font-weight:700;color:var(--ink);margin-bottom:16px;line-height:1.2}
.section-sub{font-size:16px;color:var(--slate);max-width:500px;font-weight:300}
.features-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;margin-top:48px}
.feature-card{background:var(--surface);border-radius:var(--radius);padding:28px;border:1px solid var(--border);box-shadow:var(--shadow);transition:all .2s;position:relative;overflow:hidden}
.feature-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--gold),transparent);opacity:0;transition:opacity .2s}
.feature-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:rgba(212,168,67,.35)}
.feature-card:hover::after{opacity:1}
.feat-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:16px;flex-shrink:0}
.feat-h{font-size:15px;font-weight:700;margin-bottom:8px;color:var(--ink);letter-spacing:-.01em}
.feat-p{font-size:13px;color:var(--slate);line-height:1.65;font-weight:300}
.roles-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:48px}
.role-card{border-radius:var(--radius);padding:40px;border:1px solid var(--border);cursor:pointer;transition:all .2s;text-decoration:none;display:block}
.role-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.role-card.admin-card{background:var(--ink);color:#fff}
.role-card.team-card{background:linear-gradient(145deg,var(--surface) 0%,#EEF4FF 100%);border-color:rgba(37,99,235,.15)}
.role-h{font-family:'Playfair Display',serif;font-size:26px;font-weight:700;margin-bottom:10px}
.role-p{font-size:14px;opacity:.7;font-weight:300;margin-bottom:24px;line-height:1.6}
.role-list{list-style:none;display:flex;flex-direction:column;gap:8px}
.role-list li{font-size:13px;display:flex;align-items:center;gap:8px;opacity:.85}
.role-list li::before{content:'✓';font-weight:700;flex-shrink:0;color:var(--gold)}
.landing-footer{background:var(--ink);padding:48px 5% 32px;text-align:center}
.footer-logo{font-family:'Playfair Display',serif;font-size:24px;color:#fff;margin-bottom:8px}
.footer-tagline{font-size:14px;color:rgba(255,255,255,.4);margin-bottom:28px;font-weight:300}
.footer-social{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:28px}
.footer-social-link{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.05);display:flex;align-items:center;justify-content:center;transition:all .2s;color:rgba(255,255,255,.5)}
.footer-social-link:hover{border-color:var(--gold);background:var(--gold-bg);color:var(--gold);transform:translateY(-2px)}
.footer-social-link svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.footer-divider{border:none;border-top:1px solid rgba(255,255,255,.07);margin:0 0 24px}
.footer-copy{font-size:12px;color:rgba(255,255,255,.25)}

/* ═══ LOGIN ═══ */
.login-screen{background:var(--ink);min-height:100vh}
.login-card{background:var(--surface);border-radius:20px;padding:48px;width:100%;max-width:440px;box-shadow:var(--shadow-lg)}
.login-logo{text-align:center;margin-bottom:32px}
.login-logo .mark{width:56px;height:56px;background:var(--ink);border-radius:16px;display:flex;align-items:center;justify-content:center;margin:0 auto 12px}
.login-logo .mark svg{width:28px;height:28px;fill:var(--gold)}
.login-logo h2{font-family:'Playfair Display',serif;font-size:24px;font-weight:700;color:var(--ink)}
.login-logo p{font-size:13px;color:var(--muted);font-weight:300}
.role-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--bg);border-radius:var(--radius-sm);padding:4px;margin-bottom:28px}
.role-tab{padding:10px;text-align:center;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;border:none;background:transparent;color:var(--muted);transition:all .15s}
.role-tab.active{background:var(--surface);color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.08)}
.form-group{margin-bottom:18px}
.form-label{font-size:12px;font-weight:600;color:var(--slate);margin-bottom:6px;display:block;text-transform:uppercase;letter-spacing:.04em}
.form-input{width:100%;padding:11px 14px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:13px;color:var(--ink);background:var(--surface);transition:border-color .15s;outline:none}
.form-input:focus{border-color:var(--gold)}
.form-select{width:100%;padding:11px 36px 11px 14px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:13px;color:var(--ink);background-color:var(--surface);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237C8299' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;outline:none;appearance:none;cursor:pointer}
.form-select:focus{border-color:var(--gold)}
.form-textarea{width:100%;padding:11px 14px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:13px;color:var(--ink);resize:vertical;min-height:80px;outline:none;transition:border-color .15s}
.form-textarea:focus{border-color:var(--gold)}
.form-hint{font-size:11px;color:var(--muted);margin-top:4px}
/* Catch-all: any bare <select> without the form-select class also gets the chevron */
select:not(.form-select){appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237C8299' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.login-btn{width:100%;padding:13px;background:var(--ink);color:#fff;border:none;border-radius:var(--radius-sm);font-size:15px;font-weight:600;cursor:pointer;transition:all .18s;margin-top:4px}
.login-btn:hover{background:var(--ink2);transform:translateY(-1px)}
.login-demo{margin-top:16px;text-align:center;font-size:12px;color:var(--muted)}
.login-demo span{color:var(--gold);font-weight:500;cursor:pointer}.login-demo span:hover{text-decoration:underline}
.login-back{text-align:center;margin-top:20px}
.login-back a{font-size:13px;color:var(--muted);text-decoration:none;cursor:pointer}.login-back a:hover{color:var(--ink)}