/* ===== ARTIFY GLOBAL STYLES ===== */
:root {
  --bg: #0d0d0d;
  --bg-alt: #111118;
  --card-bg: #16161e;
  --border: #2a2a3a;
  --accent: #e94560;
  --accent2: #533483;
  --accent3: #0f3460;
  --text: #e8e8f0;
  --muted: #8888aa;
  --white: #ffffff;
  --font-display: 'Cinzel', serif;
  --font-body: 'DM Sans', sans-serif;
  --radius: 12px;
  --shadow: 0 8px 32px rgba(0,0,0,0.4);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 16px; line-height: 1.7; overflow-x: hidden; }
h1,h2,h3,h4,h5,h6 { font-family: var(--font-display); color: var(--white); }
.text-gradient { background: linear-gradient(135deg, var(--accent), var(--accent2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.text-accent { color: var(--accent) !important; }
.text-muted-light { color: var(--muted) !important; }

/* NAVBAR */
#mainNav { background: rgba(13,13,13,0.95); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); padding: 14px 0; transition: all 0.3s; }
.brand-logo { font-family: var(--font-display); font-size: 1.5rem; font-weight: 900; background: linear-gradient(135deg, var(--accent), var(--accent2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: 3px; }
.nav-link { color: var(--muted) !important; font-size: 0.9rem; letter-spacing: 0.5px; transition: color 0.2s; padding: 6px 12px !important; }
.nav-link:hover { color: var(--white) !important; }
.btn-nav-outline { border: 1px solid var(--border); color: var(--text) !important; border-radius: 8px; padding: 6px 16px !important; transition: all 0.2s; background: transparent; cursor: pointer; font-family: var(--font-body); }
.btn-nav-outline:hover { border-color: var(--accent); color: var(--accent) !important; }
.btn-nav-solid { background: var(--accent); color: var(--white) !important; border-radius: 8px; padding: 6px 16px !important; font-weight: 600; transition: all 0.2s; border: none; text-decoration: none; display: inline-block; }
.btn-nav-solid:hover { background: #c73550; }

/* ALERTS */
.alert-top { position: fixed; top: 80px; left: 50%; transform: translateX(-50%); z-index: 9999; min-width: 360px; border-radius: var(--radius); border: none; background: var(--card-bg); color: var(--text); box-shadow: var(--shadow); }
.alert-success { border-left: 4px solid #28a745 !important; }
.alert-danger { border-left: 4px solid var(--accent) !important; }

/* BUTTONS */
.btn-primary-solid { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: var(--white); border: none; border-radius: 10px; padding: 10px 28px; font-weight: 600; font-family: var(--font-body); transition: all 0.3s; letter-spacing: 0.5px; text-decoration: none; display: inline-block; }
.btn-primary-solid:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(233,69,96,0.4); color: var(--white); }
.btn-outline-accent { border: 1px solid var(--accent); color: var(--accent); border-radius: 10px; padding: 10px 28px; font-weight: 600; transition: all 0.3s; background: transparent; text-decoration: none; display: inline-block; }
.btn-outline-accent:hover { background: var(--accent); color: var(--white); }
.btn-outline-secondary { border: 1px solid var(--border); color: var(--muted); border-radius: 10px; background: transparent; padding: 10px 28px; text-decoration: none; display: inline-block; transition: all 0.2s; }
.btn-outline-secondary:hover { border-color: var(--text); color: var(--text); }
.btn-metamask { background: #f6851b; color: white; border-radius: 10px; border: none; font-weight: 600; padding: 12px; cursor: pointer; width: 100%; font-family: var(--font-body); font-size: 1rem; }
.btn-metamask:hover { background: #e2761b; }
.btn-cta-white { background: white; color: var(--accent); font-weight: 700; border-radius: 10px; border: none; padding: 14px 40px; font-family: var(--font-body); font-size: 1.1rem; cursor: pointer; text-decoration: none; display: inline-block; }
.btn-cta-white:hover { background: var(--text); color: var(--accent2); }

/* SECTION */
.section-pad { padding: 90px 0; }
.bg-dark-alt { background: var(--bg-alt); }
.section-eyebrow { font-size: 0.75rem; letter-spacing: 3px; text-transform: uppercase; color: var(--accent); font-weight: 600; margin-bottom: 12px; }
.section-title { font-size: 2.2rem; font-weight: 700; color: var(--white); }
.section-sub { color: var(--muted); margin-top: 12px; max-width: 500px; margin-left: auto; margin-right: auto; }

/* PAGE HERO */
.page-hero { background: linear-gradient(135deg, var(--bg) 0%, var(--accent3) 50%, var(--bg) 100%); padding: 160px 0 80px; text-align: center; border-bottom: 1px solid var(--border); position: relative; overflow: hidden; }
.page-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(ellipse at center, rgba(233,69,96,0.1) 0%, transparent 70%); }
.page-hero-title { font-size: 3rem; margin-bottom: 12px; position: relative; }
.page-hero-sub { color: var(--muted); font-size: 1.1rem; position: relative; }

/* HERO */
.hero-section { min-height: 100vh; position: relative; background: var(--bg); overflow: hidden; display: flex; align-items: center; }
.hero-bg-anim { position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 50%, rgba(233,69,96,0.12) 0%, transparent 60%), radial-gradient(ellipse at 80% 20%, rgba(83,52,131,0.15) 0%, transparent 50%), radial-gradient(ellipse at 60% 80%, rgba(15,52,96,0.2) 0%, transparent 50%); }
.hero-content { position: relative; z-index: 1; padding-top: 100px; }
.hero-eyebrow { font-size: 0.85rem; letter-spacing: 3px; color: var(--accent); text-transform: uppercase; margin-bottom: 20px; }
.hero-title { font-size: clamp(2.5rem, 5vw, 4.5rem); line-height: 1.1; margin-bottom: 20px; font-weight: 900; }
.hero-subtitle { color: var(--muted); font-size: 1.15rem; max-width: 480px; line-height: 1.8; }
.stat-num { font-family: var(--font-display); font-size: 2rem; color: var(--accent); font-weight: 700; }
.stat-label { font-size: 0.8rem; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.hero-scroll { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); color: var(--muted); font-size: 0.8rem; text-align: center; animation: bounce 2s infinite; }
.hero-scroll i { display: block; margin-top: 4px; }
@keyframes bounce { 0%,100%{transform: translateX(-50%) translateY(0)} 50%{transform: translateX(-50%) translateY(-6px)} }
.hero-art-box { position: relative; width: 380px; height: 380px; }
.art-orb { position: absolute; border-radius: 50%; filter: blur(60px); animation: orbFloat 6s ease-in-out infinite; }
.orb1 { width:200px;height:200px;background:rgba(233,69,96,0.3);top:0;right:0; }
.orb2 { width:150px;height:150px;background:rgba(83,52,131,0.4);bottom:20px;left:20px; animation-delay:2s; }
.orb3 { width:100px;height:100px;background:rgba(15,52,96,0.5);top:50%;right:20px; animation-delay:4s; }
@keyframes orbFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }
.art-card-preview { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; width: 200px; height: 200px; overflow: hidden; z-index: 1; }
.art-preview-img { width: 100%; height: 75%; }
.art-preview-label { padding: 12px; font-size: 0.85rem; font-weight: 600; color: var(--text); }

/* SERVICE CARDS */
.service-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; height: 100%; transition: all 0.3s; }
.service-card:hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: var(--shadow); }
.service-icon { font-size: 2.5rem; margin-bottom: 16px; }
.service-name { font-size: 1.1rem; margin-bottom: 10px; color: var(--white); }
.service-desc { color: var(--muted); font-size: 0.9rem; margin-bottom: 16px; }
.service-link { color: var(--accent); text-decoration: none; font-weight: 600; font-size: 0.9rem; }
.service-link:hover { color: var(--white); }
.service-card-full { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; height: 100%; transition: all 0.3s; }
.service-card-full:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.scf-icon { font-size: 2rem; margin-bottom: 12px; }
.scf-name { color: var(--white); font-size: 1.1rem; margin-bottom: 4px; }
.scf-cat { color: var(--accent); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; }
.scf-desc { color: var(--muted); font-size: 0.9rem; margin-bottom: 16px; }
.scf-packages { display: flex; gap: 6px; flex-wrap: wrap; }
.pkg-pill { font-size: 0.75rem; padding: 4px 10px; border-radius: 20px; font-weight: 600; }
.pkg-pill.basic { background: rgba(40,167,69,0.15); color: #28a745; border: 1px solid rgba(40,167,69,0.3); }
.pkg-pill.standard { background: rgba(233,69,96,0.15); color: var(--accent); border: 1px solid rgba(233,69,96,0.3); }
.pkg-pill.pro { background: rgba(83,52,131,0.2); color: #a78bfa; border: 1px solid rgba(83,52,131,0.4); }

/* PORTFOLIO */
.portfolio-card { position: relative; border-radius: var(--radius); overflow: hidden; }
.portfolio-img { width: 100%; height: 220px; object-fit: cover; transition: transform 0.4s; }
.portfolio-card:hover .portfolio-img { transform: scale(1.05); }
.portfolio-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.85), transparent); display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; opacity: 0; transition: opacity 0.3s; }
.portfolio-card:hover .portfolio-overlay { opacity: 1; }
.portfolio-cat { font-size: 0.75rem; color: var(--accent); text-transform: uppercase; letter-spacing: 1px; }
.portfolio-title { font-size: 1rem; color: var(--white); font-family: var(--font-display); }
.portfolio-card-lg { position: relative; border-radius: var(--radius); overflow: hidden; height: 280px; }
.portfolio-img-lg { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.portfolio-card-lg:hover .portfolio-img-lg { transform: scale(1.06); }
.portfolio-overlay-lg { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.9), transparent); display: flex; flex-direction: column; justify-content: flex-end; padding: 24px; opacity: 0; transition: opacity 0.3s; }
.portfolio-card-lg:hover .portfolio-overlay-lg { opacity: 1; }
.portfolio-cat-badge { font-size: 0.7rem; background: var(--accent); color: white; padding: 3px 10px; border-radius: 20px; display: inline-block; margin-bottom: 8px; }
.portfolio-item-title { font-size: 1.1rem; color: var(--white); margin-bottom: 8px; }
.p-tag { font-size: 0.7rem; background: rgba(255,255,255,0.1); color: var(--text); padding: 3px 10px; border-radius: 20px; margin-right: 4px; display: inline-block; margin-bottom: 4px; }

/* REVIEWS */
.review-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; height: 100%; }
.review-stars { color: #ffc107; margin-bottom: 12px; }
.review-text { color: var(--muted); font-size: 0.95rem; font-style: italic; margin-bottom: 20px; }
.review-author { display: flex; align-items: center; gap: 12px; }
.review-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent2)); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1rem; color: white; flex-shrink: 0; }
.review-name { font-weight: 600; font-size: 0.95rem; }
.review-service { font-size: 0.8rem; color: var(--muted); }
.review-card-full { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; height: 100%; transition: border-color 0.2s; }
.review-card-full:hover { border-color: var(--accent); }
.review-title-text { color: var(--white); margin-bottom: 12px; font-size: 1rem; }
.review-comment { color: var(--muted); font-size: 0.9rem; margin-bottom: 20px; }
.review-meta { display: flex; align-items: center; gap: 12px; }
.review-service-name { font-size: 0.8rem; color: var(--accent); }

/* CTA */
.cta-section { background: linear-gradient(135deg, var(--accent3), var(--accent2)); padding: 100px 0; text-align: center; }
.cta-title { font-size: 2.5rem; margin-bottom: 16px; }
.cta-sub { color: rgba(255,255,255,0.8); margin-bottom: 32px; font-size: 1.1rem; }

/* FILTER */
.filter-bar { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.filter-btn { background: var(--card-bg); border: 1px solid var(--border); color: var(--muted); border-radius: 30px; padding: 8px 20px; font-size: 0.85rem; cursor: pointer; transition: all 0.2s; text-decoration: none; font-family: var(--font-body); }
.filter-btn:hover, .filter-btn.active { background: var(--accent); border-color: var(--accent); color: white; }

/* FORMS */
.artify-input { background: var(--card-bg) !important; border: 1px solid var(--border) !important; color: var(--text) !important; border-radius: 10px !important; padding: 12px 16px !important; transition: border-color 0.2s !important; font-family: var(--font-body) !important; }
.artify-input:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(233,69,96,0.15) !important; outline: none !important; }
.artify-input::placeholder { color: var(--muted) !important; }
.artify-input option { background: var(--card-bg); color: var(--text); }
.form-label { color: var(--text); font-weight: 500; margin-bottom: 8px; font-size: 0.9rem; }
.form-box { background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; padding: 40px; }

/* AUTH */
.auth-wrapper { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 120px 20px 60px; background: radial-gradient(ellipse at center, rgba(83,52,131,0.1) 0%, var(--bg) 60%); }
.auth-box { background: var(--card-bg); border: 1px solid var(--border); border-radius: 20px; padding: 48px; width: 100%; max-width: 440px; }
.auth-logo { font-family: var(--font-display); font-size: 1.8rem; font-weight: 900; color: var(--accent); letter-spacing: 4px; text-align: center; margin-bottom: 24px; }
.auth-title { text-align: center; font-size: 1.8rem; margin-bottom: 8px; }
.auth-sub { text-align: center; color: var(--muted); margin-bottom: 32px; }
.auth-switch { text-align: center; color: var(--muted); font-size: 0.9rem; }
.auth-switch a { color: var(--accent); text-decoration: none; font-weight: 600; }

/* TABLES */
.artify-table { background: var(--card-bg); color: var(--text); border-radius: var(--radius); overflow: hidden; }
.artify-table thead tr { background: var(--bg-alt); border-bottom: 1px solid var(--border); }
.artify-table th { color: var(--muted); font-weight: 500; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px; padding: 14px 16px; border: none; font-family: var(--font-body); }
.artify-table td { border-color: var(--border); padding: 14px 16px; vertical-align: middle; color: var(--text); font-size: 0.9rem; }
.artify-table tbody tr:hover { background: rgba(255,255,255,0.02); }
.order-id { background: rgba(233,69,96,0.1); color: var(--accent); padding: 3px 8px; border-radius: 6px; font-size: 0.8rem; }

/* BADGES */
.status-badge { padding: 4px 12px; border-radius: 20px; font-size: 0.78rem; font-weight: 600; }
.status-pending { background: rgba(255,193,7,0.15); color: #ffc107; }
.status-accepted { background: rgba(40,167,69,0.15); color: #28a745; }
.status-in-progress { background: rgba(13,110,253,0.15); color: #6ea8fe; }
.status-completed { background: rgba(40,167,69,0.2); color: #28a745; }
.status-cancelled { background: rgba(108,117,125,0.15); color: #6c757d; }
.status-declined { background: rgba(233,69,96,0.15); color: var(--accent); }
.pkg-badge { background: rgba(83,52,131,0.2); color: #a78bfa; padding: 3px 10px; border-radius: 20px; font-size: 0.78rem; font-weight: 600; }
.pay-badge { padding: 4px 12px; border-radius: 20px; font-size: 0.78rem; font-weight: 600; }
.pay-paid { background: rgba(40,167,69,0.15); color: #28a745; }
.pay-unpaid { background: rgba(233,69,96,0.15); color: var(--accent); }

/* PACKAGE PICKER */
.package-picker { display: flex; gap: 16px; }
.pkg-option { flex: 1; }
.pkg-option input { display: none; }
.pkg-option label { display: block; background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; cursor: pointer; text-align: center; transition: all 0.2s; }
.pkg-option input:checked + label { border-color: var(--accent); background: rgba(233,69,96,0.1); }
.pkg-option label:hover { border-color: var(--accent); }
.pkg-name { font-weight: 700; font-size: 1rem; color: var(--white); }
.pkg-price { font-size: 1.3rem; color: var(--accent); font-weight: 700; margin: 8px 0; }
.pkg-note { font-size: 0.75rem; color: var(--muted); }

/* PAYMENT */
.pay-tabs { display: flex; gap: 12px; }
.pay-tab { flex: 1; padding: 12px; border: 1px solid var(--border); background: var(--bg-alt); color: var(--muted); border-radius: 10px; cursor: pointer; font-family: var(--font-body); transition: all 0.2s; font-size: 0.9rem; }
.pay-tab.active { border-color: var(--accent); color: var(--accent); background: rgba(233,69,96,0.08); }
.secure-note { font-size: 0.82rem; color: var(--muted); background: rgba(40,167,69,0.08); border: 1px solid rgba(40,167,69,0.2); border-radius: 8px; padding: 10px 14px; }
.order-summary-box { background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; padding: 32px; }
.os-row { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 0.9rem; }
.os-row:last-child { border-bottom: none; }
.os-row span { color: var(--muted); }
.metamask-box { background: var(--bg-alt); border-radius: var(--radius); padding: 32px; }
.mm-icon { font-size: 3rem; margin-bottom: 12px; }

/* SUCCESS */
.success-box { background: var(--card-bg); border: 1px solid var(--border); border-radius: 20px; padding: 60px 40px; margin-top: 80px; }
.success-icon { font-size: 4rem; margin-bottom: 20px; }
.success-title { font-size: 2rem; margin-bottom: 12px; }
.success-sub { color: var(--muted); margin-bottom: 32px; }
.success-details { background: var(--bg-alt); border-radius: var(--radius); padding: 24px; margin-top: 24px; }
.sd-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 0.9rem; }
.sd-row:last-child { border-bottom: none; }
.sd-row span { color: var(--muted); }

/* ADMIN */
.admin-hero { background: linear-gradient(135deg, var(--bg) 0%, var(--accent3) 100%); }
.admin-nav { display: flex; gap: 12px; flex-wrap: wrap; }
.admin-nav-btn { padding: 10px 22px; border-radius: 10px; border: 1px solid var(--border); color: var(--muted); text-decoration: none; font-size: 0.9rem; transition: all 0.2s; }
.admin-nav-btn:hover, .admin-nav-btn.active { border-color: var(--accent); color: var(--accent); background: rgba(233,69,96,0.08); }
.admin-stat-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; text-align: center; border-top: 3px solid var(--accent); }
.admin-stat-card.warning { border-top-color: #ffc107; }
.admin-stat-card.success { border-top-color: #28a745; }
.admin-stat-card.info { border-top-color: #6ea8fe; }
.asc-icon { font-size: 2rem; margin-bottom: 12px; }
.asc-num { font-family: var(--font-display); font-size: 2.5rem; color: var(--white); font-weight: 700; }
.asc-label { color: var(--muted); font-size: 0.85rem; margin-top: 6px; }

/* ORDER DETAIL */
.order-detail-grid { background: var(--bg-alt); border-radius: var(--radius); overflow: hidden; }
.od-row { display: flex; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--border); font-size: 0.9rem; }
.od-row:last-child { border-bottom: none; }
.od-row span { color: var(--muted); }
.desc-box { background: var(--bg-alt); border: 1px solid var(--border); border-radius: 10px; padding: 16px; font-size: 0.9rem; color: var(--text); line-height: 1.8; }
.admin-note { border-left: 3px solid var(--accent) !important; color: var(--accent) !important; }

/* ABOUT */
.about-img-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 16px; height: 380px; }
.about-img-box { border-radius: var(--radius); display: flex; align-items: center; justify-content: center; font-size: 3rem; transition: transform 0.3s; }
.about-img-box:hover { transform: scale(1.03); }
.about-img-box.big { grid-row: 1 / 3; font-size: 5rem; }
.about-stat { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; text-align: center; }
.stat-big { font-size: 2rem; font-family: var(--font-display); color: var(--accent); display: block; font-weight: 700; }
.value-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px 24px; height: 100%; transition: border-color 0.2s; }
.value-card:hover { border-color: var(--accent); }
.value-icon { font-size: 2.5rem; margin-bottom: 16px; }
.value-title { font-size: 1.1rem; margin-bottom: 10px; }
.value-desc { color: var(--muted); font-size: 0.9rem; }
.team-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px; height: 100%; transition: border-color 0.2s; }
.team-card:hover { border-color: var(--accent); }
.team-avatar { font-size: 3rem; margin-bottom: 16px; }
.team-name { font-size: 1.1rem; margin-bottom: 6px; }
.team-role { color: var(--accent); font-size: 0.85rem; }

/* CONTACT */
.contact-form-box { background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; padding: 40px; }
.contact-info-item { display: flex; gap: 16px; margin-bottom: 28px; align-items: flex-start; }
.ci-icon { width: 48px; height: 48px; background: rgba(233,69,96,0.1); border: 1px solid rgba(233,69,96,0.3); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--accent); font-size: 1.2rem; flex-shrink: 0; }
.contact-info-item h6 { color: var(--white); margin-bottom: 4px; font-family: var(--font-body); }
.contact-info-item p { color: var(--muted); margin: 0; font-size: 0.9rem; }

/* PRICING */
.pricing-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; height: 100%; transition: all 0.3s; }
.pricing-card:hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: var(--shadow); }
.pricing-icon { font-size: 2rem; margin-bottom: 12px; }
.pricing-name { font-size: 1.1rem; color: var(--white); margin-bottom: 4px; }
.pricing-cat { color: var(--accent); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 16px; }
.pricing-tiers { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.tier { background: var(--bg-alt); border: 1px solid var(--border); border-radius: 10px; padding: 12px 16px; position: relative; }
.tier.featured { border-color: var(--accent); background: rgba(233,69,96,0.06); }
.tier-badge { position: absolute; top: -8px; right: 12px; background: var(--accent); color: white; font-size: 0.65rem; padding: 2px 10px; border-radius: 20px; font-weight: 700; }
.tier-label { font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.tier-price { font-size: 1.3rem; color: var(--white); font-weight: 700; font-family: var(--font-display); }
.tier-desc { font-size: 0.78rem; color: var(--muted); }

/* STAR PICKER */
.star-picker { display: flex; gap: 6px; flex-direction: row-reverse; justify-content: flex-end; }
.star-picker input { display: none; }
.star-picker label { font-size: 1.8rem; color: var(--muted); cursor: pointer; transition: color 0.2s; }
.star-picker label:hover, .star-picker label:hover ~ label, .star-picker input:checked ~ label { color: #ffc107; }

/* EMPTY STATE */
.empty-state { padding: 60px 20px; }
.empty-icon { font-size: 4rem; margin-bottom: 16px; }
.empty-state h5 { color: var(--white); margin-bottom: 8px; }

/* FOOTER */
.site-footer { background: var(--bg-alt); border-top: 1px solid var(--border); padding: 70px 0 30px; }
.footer-brand { font-family: var(--font-display); font-size: 1.5rem; color: var(--accent); letter-spacing: 3px; font-weight: 900; }
.footer-tagline { color: var(--muted); font-size: 0.9rem; margin-top: 12px; max-width: 280px; }
.social-links { display: flex; gap: 12px; }
.social-links a { width: 38px; height: 38px; border: 1px solid var(--border); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--muted); text-decoration: none; transition: all 0.2s; font-size: 1rem; }
.social-links a:hover { border-color: var(--accent); color: var(--accent); }
.footer-heading { font-family: var(--font-body); color: var(--white); font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 16px; }
.footer-links { list-style: none; padding: 0; }
.footer-links li { margin-bottom: 10px; }
.footer-links a { color: var(--muted); text-decoration: none; font-size: 0.9rem; transition: color 0.2s; }
.footer-links a:hover { color: var(--accent); }
.footer-contact { color: var(--muted); font-size: 0.9rem; margin-bottom: 10px; }
.footer-divider { border-color: var(--border); margin: 40px 0 24px; }
.footer-copy { color: var(--muted); font-size: 0.82rem; }

/* CHATBOX */
#chatWidget { position: fixed; bottom: 28px; right: 28px; z-index: 9999; }
#chatToggle { width: 58px; height: 58px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent2)); border: none; color: white; font-size: 1.4rem; cursor: pointer; box-shadow: 0 4px 20px rgba(233,69,96,0.5); transition: transform 0.2s; }
#chatToggle:hover { transform: scale(1.1); }
#chatBox { position: absolute; bottom: 72px; right: 0; width: 320px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); }
.chat-header { background: linear-gradient(135deg, var(--accent), var(--accent2)); padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; }
.chat-avatar { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.3); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.9rem; color: white; }
.chat-status { font-size: 0.75rem; color: rgba(255,255,255,0.8); }
.status-dot { display: inline-block; width: 8px; height: 8px; background: #28a745; border-radius: 50%; margin-right: 4px; }
.chat-close { background: none; border: none; color: white; font-size: 1rem; cursor: pointer; }
.chat-messages { height: 220px; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.chat-msg { padding: 10px 14px; border-radius: 12px; font-size: 0.85rem; max-width: 85%; }
.chat-msg.bot { background: var(--bg-alt); color: var(--text); align-self: flex-start; border-bottom-left-radius: 4px; }
.chat-msg.user { background: var(--accent); color: white; align-self: flex-end; border-bottom-right-radius: 4px; }
.chat-input-area { display: flex; border-top: 1px solid var(--border); }
.chat-input-area input { flex: 1; background: transparent; border: none; padding: 12px 14px; color: var(--text); font-family: var(--font-body); font-size: 0.85rem; outline: none; }
.chat-input-area input::placeholder { color: var(--muted); }
.chat-input-area button { background: var(--accent); border: none; color: white; padding: 0 16px; cursor: pointer; font-size: 1rem; }

.cta-mini { border-top: 1px solid var(--border); padding-top: 60px; }


/* ── ACTIVE NAV LINK ── */
.nav-link.nav-active { color: var(--white) !important; position: relative; }
.nav-link.nav-active::after { content: ''; position: absolute; bottom: -2px; left: 12px; right: 12px; height: 2px; background: var(--accent); border-radius: 1px; }

/* ── USER DROPDOWN ── */
.nav-user-btn { background: rgba(255,255,255,0.06); border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 6px 14px; font-family: var(--font-body); font-size: 0.88rem; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: all 0.2s; }
.nav-user-btn:hover, .nav-user-btn.show { border-color: var(--accent); color: var(--white); }
.nav-user-btn::after { border-color: var(--muted) transparent transparent; margin-left: 4px; }
.nav-user-avatar { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent2)); display: inline-flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 700; color: white; flex-shrink: 0; }
.nav-user-name { max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.artify-dropdown { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); min-width: 200px; padding: 6px 0; }
.artify-dropdown .dropdown-item { color: var(--text); padding: 9px 16px; font-size: 0.88rem; font-family: var(--font-body); transition: all 0.15s; }
.artify-dropdown .dropdown-item:hover { background: rgba(233,69,96,0.08); color: var(--accent); }
.artify-dropdown .dropdown-item.text-danger:hover { background: rgba(233,69,96,0.1); color: var(--accent); }
.artify-dropdown .dropdown-divider { border-color: var(--border); margin: 4px 0; }
.artify-dropdown form { margin: 0; padding: 0; }
.artify-dropdown form button { background: none; border: none; width: 100%; text-align: left; }

/* ── PAGINATION ── */
.pagination-wrap { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 48px; flex-wrap: wrap; }
.page-btn { background: var(--card-bg); border: 1px solid var(--border); color: var(--muted); border-radius: 8px; padding: 8px 14px; text-decoration: none; font-size: 0.88rem; transition: all 0.2s; font-family: var(--font-body); display: inline-block; }
.page-btn:hover { border-color: var(--accent); color: var(--accent); }
.page-btn.active { background: var(--accent); border-color: var(--accent); color: white; font-weight: 600; }
.page-btn.disabled { opacity: 0.35; pointer-events: none; }
.page-info { color: var(--muted); font-size: 0.85rem; padding: 0 4px; }

/* ── HERO SHOWCASE ── */
.hero-showcase { position: relative; width: 420px; height: 380px; }
.hs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; position: relative; z-index: 2; }
.hs-item { border-radius: 14px; overflow: hidden; position: relative; border: 1px solid var(--border); box-shadow: 0 8px 24px rgba(0,0,0,0.3); transition: transform 0.3s; }
.hs-item:hover { transform: translateY(-4px); }
.hs-item img { width: 100%; height: 175px; object-fit: cover; display: block; transition: transform 0.4s; }
.hs-item:hover img { transform: scale(1.06); }
.hs-label { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0,0,0,0.85), transparent); color: white; font-size: 0.75rem; font-weight: 600; padding: 18px 10px 8px; font-family: var(--font-body); }

/* ── Quiz Nav Link ── */
.nav-quiz-link {
  background: linear-gradient(90deg, rgba(233,69,96,0.15), rgba(168,85,247,0.15)) !important;
  border: 1px solid rgba(233,69,96,0.35) !important;
  border-radius: 20px !important;
  padding: 5px 14px !important;
  color: var(--accent) !important;
  font-weight: 600 !important;
  transition: all 0.2s;
}
.nav-quiz-link:hover {
  background: linear-gradient(90deg, rgba(233,69,96,0.3), rgba(168,85,247,0.3)) !important;
  transform: scale(1.04);
}
.quiz-cta-eyebrow { font-size:0.78rem;letter-spacing:2px;text-transform:uppercase;color:var(--accent);font-weight:600; }

/* ── AI Brief Nav Link ── */
.nav-brief-link {
  background: linear-gradient(90deg, rgba(168,85,247,0.15), rgba(59,130,246,0.15)) !important;
  border: 1px solid rgba(168,85,247,0.35) !important;
  border-radius: 20px !important;
  padding: 5px 14px !important;
  color: #a855f7 !important;
  font-weight: 600 !important;
  transition: all 0.2s;
}
.nav-brief-link:hover {
  background: linear-gradient(90deg, rgba(168,85,247,0.3), rgba(59,130,246,0.3)) !important;
  transform: scale(1.04);
}

/* ── NAVBAR POINTS BAR ── */
.dropdown-pts-bar { display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:8px;background:var(--bg-alt);margin:4px 8px;border:1px solid var(--border); }
.dpts-icon { font-size:1.4rem;line-height:1; }
.dpts-info { display:flex;flex-direction:column;gap:1px; }
.dpts-level { font-size:0.78rem;font-weight:700;letter-spacing:0.5px; }
.dpts-count { font-size:0.72rem;color:var(--muted); }

/* ── CERTIFICATE BUTTON ── */
.btn-cert { background:linear-gradient(135deg,#c9a84c,#e8c96e);color:#0d0d1a;border:none;border-radius:10px;padding:10px 24px;font-weight:700;font-family:var(--font-body);transition:all 0.3s;text-decoration:none;display:inline-flex;align-items:center; }
.btn-cert:hover { transform:translateY(-2px);box-shadow:0 8px 24px rgba(201,168,76,0.4);color:#0d0d1a; }

/* ── CHAT ── */
.chat-wrapper { background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column; }
.chat-header { display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border);background:var(--bg-alt); }
.chat-avatar-admin { width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;color:white;font-size:1.1rem; }
.chat-avatar-client { width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--accent2),var(--accent3));display:flex;align-items:center;justify-content:center;color:white;font-size:1rem;font-weight:700;font-family:var(--font-display); }
.chat-agent-name { font-weight:700;font-size:0.95rem;color:var(--white); }
.chat-status { font-size:0.78rem;color:var(--muted);display:flex;align-items:center;gap:5px; }
.chat-dot { width:7px;height:7px;border-radius:50%;background:#28a745;display:inline-block;animation:pulse-dot 2s infinite; }
@keyframes pulse-dot { 0%,100%{opacity:1}50%{opacity:0.4} }
.chat-messages { flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:12px;min-height:320px;max-height:420px; }
.chat-empty { display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;padding:40px 0; }
.chat-msg { display:flex;flex-direction:column;max-width:72%; }
.msg-mine { align-self:flex-end;align-items:flex-end; }
.msg-theirs { align-self:flex-start;align-items:flex-start; }
.chat-bubble { padding:10px 14px;border-radius:16px;font-size:0.9rem;line-height:1.5;word-break:break-word; }
.msg-mine .chat-bubble { background:linear-gradient(135deg,var(--accent),var(--accent2));color:white;border-bottom-right-radius:4px; }
.msg-theirs .chat-bubble { background:var(--bg-alt);border:1px solid var(--border);color:var(--text);border-bottom-left-radius:4px; }
.chat-meta { font-size:0.72rem;color:var(--muted);margin-top:4px;padding:0 4px; }
.chat-img { max-width:220px;border-radius:10px;margin-top:6px;cursor:pointer; }
.chat-file-link { color:var(--accent);font-size:0.85rem;text-decoration:none;display:flex;align-items:center;gap:6px;margin-top:4px; }
.chat-file-link:hover { text-decoration:underline; }
.chat-typing { display:flex;align-items:center;gap:6px;padding:8px 20px;font-size:0.78rem;color:var(--muted); }
.typing-dots { display:inline-flex;gap:3px; }
.typing-dots span { width:5px;height:5px;background:var(--muted);border-radius:50%;animation:bounce-dot 1.2s infinite; }
.typing-dots span:nth-child(2){animation-delay:0.2s}
.typing-dots span:nth-child(3){animation-delay:0.4s}
@keyframes bounce-dot{0%,80%,100%{transform:translateY(0)}40%{transform:translateY(-6px)}}
.chat-input-bar { display:flex;align-items:center;gap:10px;padding:12px 16px;border-top:1px solid var(--border);background:var(--bg-alt); }
.chat-attach-btn { color:var(--muted);cursor:pointer;font-size:1.2rem;padding:4px;transition:color 0.2s; }
.chat-attach-btn:hover { color:var(--text); }
.chat-input { flex:1;background:var(--bg);border:1px solid var(--border);border-radius:24px;padding:10px 16px;color:var(--text);font-family:var(--font-body);font-size:0.9rem;outline:none;transition:border-color 0.2s; }
.chat-input:focus { border-color:var(--accent); }
.chat-input::placeholder { color:var(--muted); }
.chat-send-btn { width:40px;height:40px;border-radius:50%;background:var(--accent);border:none;color:white;font-size:0.95rem;cursor:pointer;transition:all 0.2s;display:flex;align-items:center;justify-content:center; }
.chat-send-btn:hover { background:#c73550;transform:scale(1.08); }
.chat-file-preview { display:flex;align-items:center;padding:8px 16px;background:var(--bg-alt);border-top:1px solid var(--border);font-size:0.82rem;color:var(--text); }

/* Admin chat sidebar */
.admin-chat-sidebar { background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column; }
.acs-header { display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border);font-weight:700;font-size:0.9rem;background:var(--bg-alt); }
.acs-list { overflow-y:auto;flex:1; }
.acs-empty { padding:24px 16px;color:var(--muted);font-size:0.85rem;text-align:center; }
.acs-room { display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--border);cursor:pointer;text-decoration:none;transition:background 0.15s;color:var(--text); }
.acs-room:hover { background:var(--bg-alt); }
.acs-room.active { background:rgba(233,69,96,0.08);border-left:3px solid var(--accent); }
.acs-avatar { width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--accent2),var(--accent3));display:flex;align-items:center;justify-content:center;color:white;font-weight:700;font-size:0.9rem;flex-shrink:0;font-family:var(--font-display); }
.acs-info { flex:1;min-width:0; }
.acs-name { font-size:0.87rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.acs-last { font-size:0.75rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.acs-badge { background:var(--accent);color:white;border-radius:12px;font-size:0.7rem;font-weight:700;padding:2px 7px;min-width:20px;text-align:center;flex-shrink:0; }
.admin-chat-main { border:1px solid var(--border);border-radius:var(--radius);overflow:hidden; }
.admin-chat-main .chat-messages { max-height:none;min-height:0; }

/* ── GAMIFICATION / LOYALTY ── */
.loyalty-box { }
.loyalty-total-badge { background:var(--bg-alt);border:1px solid var(--border);border-radius:12px;padding:12px 20px;text-align:center; }
.loyalty-pts { display:block;font-size:2rem;font-weight:900;font-family:var(--font-display);background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1; }
.loyalty-pts-label { display:block;font-size:0.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-top:4px; }
.loyalty-level-icon { width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.loyalty-level-name { font-size:1.1rem;font-weight:700;font-family:var(--font-display); }
.loyalty-bar-track { height:10px;background:var(--bg-alt);border-radius:10px;overflow:hidden;border:1px solid var(--border); }
.loyalty-bar-fill { height:100%;border-radius:10px;transition:width 0.6s ease; }
.loyalty-earn-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px; }
.loyalty-earn-item { display:flex;align-items:center;gap:10px;padding:12px;background:var(--bg-alt);border:1px solid var(--border);border-radius:10px; }
.loyalty-earn-item i { font-size:1.3rem;flex-shrink:0; }
.loe-pts { font-size:0.92rem;font-weight:700;color:var(--white); }
.loe-action { font-size:0.75rem;color:var(--muted); }

/* ── AI RECOMMEND ── */
.rec-drop-zone { border:2px dashed var(--border);border-radius:14px;padding:32px 20px;text-align:center;cursor:pointer;transition:border-color 0.2s,background 0.2s;position:relative; }
.rec-drop-zone:hover,.rec-drop-zone.drag-over { border-color:var(--accent);background:rgba(233,69,96,0.04); }
.rec-drop-inner { pointer-events:none; }
.rec-spinner { width:42px;height:42px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin 0.8s linear infinite;margin:0 auto; }
@keyframes spin { to { transform:rotate(360deg); } }
.rec-card { display:flex;align-items:center;gap:16px;background:var(--card-bg);border:1px solid var(--border);border-radius:14px;padding:16px 20px;transition:border-color 0.2s; }
.rec-card:hover { border-color:rgba(233,69,96,0.4); }
.rec-card-left { flex-shrink:0; }
.rec-pkg-badge { display:inline-flex;align-items:center;padding:4px 10px;border-radius:20px;font-size:0.78rem;font-weight:700;white-space:nowrap; }
.rec-card-body { flex:1;min-width:0; }
.rec-card-service { font-size:1rem;font-weight:700;color:var(--white);margin-bottom:2px; }
.rec-card-cat { font-size:0.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:6px; }
.rec-card-reason { font-size:0.85rem;color:var(--text);line-height:1.5; }
.rec-card-action { flex-shrink:0; }
.rec-how-row { display:flex;align-items:center;justify-content:center;gap:24px;background:var(--card-bg);border:1px solid var(--border);border-radius:14px;padding:24px 32px;flex-wrap:wrap; }
.rec-how-step { display:flex;align-items:center;gap:14px; }
.rec-step-num { width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));color:white;font-weight:700;font-size:1rem;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.rec-how-step strong { display:block;font-size:0.95rem;margin-bottom:2px; }
.rec-how-step p { margin:0;font-size:0.78rem;color:var(--muted); }
.rec-how-arrow { color:var(--muted);font-size:1.2rem; }