/* ==========================================================
   Jaber Creation — custom styles on top of Bootstrap 5
   ========================================================== */

:root {
  --red: #e53935;
  --crimson: #dc2626;
  --dark-red: #b91c1c;
  --dark: #111215;
  --darker: #0c0d0e;
  --light: #fbfbfb;
  --muted: #7e838b;
  --font-heading: "Bebas Neue", sans-serif;
  --font-body: "Inter", sans-serif;
  --font-script: "Caveat", cursive;
  --bs-body-font-family: "Montserrat", sans-serif;
}

html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { background: var(--light); color: #262626; overflow-x: hidden; -webkit-font-smoothing: antialiased; }

/* ---------- Utilities ---------- */
.text-red { color: var(--red) !important; }
.text-sky { color: #38bdf8 !important; }
.text-rose { color: #fb7185 !important; }
.text-danger-light { color: #f87171 !important; }
.text-success-light { color: #34d399 !important; }
.text-info-light { color: #60a5fa !important; }
.text-light-gray { color: #d4d4d4 !important; }
.text-muted-gray { color: #a3a3a3 !important; }
.text-justify { text-align: justify; }
.script-text { font-family: var(--font-script); }
.mono-label { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

.eyebrow { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--red); margin-bottom: .25rem; }
.heading-lg, .heading-md, .heading-sm, .heading-xs { font-family: var(--font-heading); letter-spacing: .04em; text-transform: uppercase; color: #171717; font-weight: 400; }
.heading-lg { font-size: clamp(2.25rem, 5vw, 3rem); margin-top: .25rem; }
.heading-md { font-size: 2.25rem; margin-bottom: .75rem; }
.heading-sm { font-size: 1.875rem; }
.heading-xs { font-size: 1.5rem; letter-spacing: .08em; margin-bottom: .75rem; }
.title-bar { width: 4rem; height: 4px; background: var(--red); margin: .75rem auto 0; }
.body-text { font-family: var(--font-body); font-size: .875rem; line-height: 1.7; color: #525252; }
.body-text strong { color: #171717; font-weight: 600; }

/* ---------- Buttons ---------- */
.btn-brand {
  --bs-btn-color: #fff; --bs-btn-bg: var(--red); --bs-btn-border-color: var(--red);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--crimson); --bs-btn-hover-border-color: var(--crimson);
  --bs-btn-active-bg: var(--dark-red); --bs-btn-active-border-color: var(--dark-red); --bs-btn-active-color: #fff;
  font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: .6rem 1.25rem; box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

/* ---------- Navbar ---------- */
.site-nav { background: rgba(18, 19, 22, .95); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(255,255,255,.05); min-height: 80px; }
.logo-circle { width: 40px; height: 40px; border-radius: 50%; background: #fff; padding: 2px; overflow: hidden; display: flex; box-shadow: 0 2px 6px rgba(0,0,0,.3); transition: transform .2s; }
.logo-circle img { width: 100%; height: 100%; object-fit: cover; }
.navbar-brand:hover .logo-circle { transform: scale(1.05); }
.brand-name { color: #fff; font-size: 1.125rem; font-weight: 800; letter-spacing: .05em; }
.brand-sub { font-size: 9px; text-transform: uppercase; letter-spacing: .15em; color: #a3a3a3; font-weight: 500; margin-top: 4px; }
.site-nav .nav-link { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #d4d4d4; transition: color .2s; }
.site-nav .nav-link:hover { color: var(--red); }
.site-nav .nav-link.active { color: #fff; }
.navbar-toggler:focus { box-shadow: none; }
@media (max-width: 767.98px) {
  .site-nav .navbar-collapse { background: #15171a; margin: 0 -.75rem; padding: 1rem 1.5rem; }
}

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100vh; padding-top: 80px; background: linear-gradient(#17191e, #0d0e11 50%, #0a0a0c); color: #fff; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; align-items: center; }
.hero-dots { position: absolute; inset: 0; opacity: .1; background-image: radial-gradient(#fff 1px, transparent 1px); background-size: 24px 24px; pointer-events: none; }
.hero-inner { padding: 4rem 1rem 5rem; }
.hero-badge { display: inline-flex; align-items: center; gap: .5rem; padding: .375rem 1rem; border-radius: 999px; border: 1px solid rgba(239,68,68,.2); background: rgba(239,68,68,.1); color: #f87171; font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: pulse 2s cubic-bezier(.4,0,.6,1) infinite; }
@keyframes pulse { 50% { opacity: .4; } }
.hero-title { font-family: var(--font-heading); font-weight: 400; font-size: clamp(3rem, 9vw, 6rem); letter-spacing: .05em; line-height: 1; margin-bottom: 1rem; }
.hero-tagline { font-size: clamp(1.5rem, 3vw, 1.875rem); color: #d4d4d4; margin-bottom: 2.5rem; }

.mockup { max-width: 768px; padding: 0 .5rem; margin-top: 1rem; }
.mockup-frame { background: linear-gradient(#262626, #171717); border: 1px solid #404040; border-radius: .75rem .75rem 0 0; padding: .5rem; box-shadow: 0 25px 50px -12px rgba(0,0,0,.6); }
.mockup-bar { display: flex; align-items: center; gap: 6px; padding: 0 .5rem .5rem; }
.mockup-bar .dot { width: 10px; height: 10px; border-radius: 50%; }
.mockup-url { font: 11px ui-monospace, monospace; color: #a3a3a3; margin-left: .75rem; }
.mockup-screen { background: #0a0a0a; border: 1px solid #262626; border-radius: .25rem; }
.mockup-screen > div { position: absolute; inset: 0; overflow: hidden; }
.mockup-bg { position: absolute; inset: 0; opacity: .65; background: url("jaber.jpeg") top center / cover; transition: transform .7s; }
.mockup-screen:hover .mockup-bg { transform: scale(1.05); }
.mockup-fade { position: absolute; inset: 0; background: linear-gradient(to top, #000, rgba(0,0,0,.4), transparent); }
.mockup-content { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.5rem; z-index: 2; }
.mockup-title { font-family: var(--font-heading); font-weight: 400; font-size: clamp(1.5rem, 4vw, 2.25rem); margin: .25rem 0 0; }
.mockup-tech { font-size: clamp(.75rem, 1.5vw, .875rem); color: #d4d4d4; margin: .5rem 0 0; max-width: 28rem; }
.mockup-base { height: 12px; width: 85%; margin: 0 auto; background: #404040; border-radius: 0 0 .5rem .5rem; box-shadow: 0 4px 6px rgba(0,0,0,.3); }

.scroll-btn { position: relative; z-index: 5; margin: -1.5rem 0 2rem; width: 56px; height: 56px; border-radius: 50%; background: #fff; color: var(--red); border: 2px solid rgba(229,57,53,.3); box-shadow: 0 10px 25px rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center; font-size: 1.125rem; text-decoration: none; transition: transform .3s; }
.scroll-btn:hover { transform: translateY(4px); background: #f5f5f5; color: var(--red); }

/* ---------- Generic sections ---------- */
.section { position: relative; padding: 6rem 0; overflow: hidden; }
.section-light { background: #fafafa; border-top: 1px solid #e5e5e5; }
.section-dark {
  color: #fff; border-top: 1px solid rgba(255,255,255,.05);
  background-color: var(--dark);
  background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 0), radial-gradient(rgba(255,255,255,.02) 1px, var(--dark) 0);
  background-size: 24px 24px, 12px 12px; background-position: 0 0, 12px 12px;
}
.watermark { position: absolute; top: 1.5rem; left: 50%; transform: translateX(-50%); font-family: var(--font-heading); font-size: clamp(5rem, 14vw, 12rem); letter-spacing: .12em; line-height: 1; white-space: nowrap; color: #171717; opacity: .08; pointer-events: none; user-select: none; }
.watermark-dark { color: #fff; opacity: .04; letter-spacing: .14em; }

/* ---------- About ---------- */
.quote { font-size: 1.5rem; color: #525252; line-height: 1.3; margin-bottom: 1.25rem; }
.step-card { height: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1rem; background: #fff; border: 1px solid #f5f5f5; border-radius: .5rem; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.step-icon { width: 80px; height: 80px; border: 2px dashed var(--red); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #404040; margin-bottom: 1rem; box-shadow: inset 0 2px 4px rgba(0,0,0,.05); transition: background .3s, color .3s; }
.step-icon:hover { background: var(--red); color: #fff; }
.step-card h5 { font-size: .75rem; font-weight: 800; letter-spacing: .08em; color: #262626; margin-bottom: .5rem; }
.step-card p { font: 12px/1.6 var(--font-body); color: #737373; margin: 0; }

.profile { max-width: 36rem; }
.avatar { width: 176px; height: 176px; padding: 6px; background: #fff; border: 4px solid var(--red); border-radius: 50%; overflow: hidden; box-shadow: 0 20px 25px -5px rgba(0,0,0,.15); }
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; filter: grayscale(1); transition: filter .5s, transform .5s; }
.avatar:hover img { filter: none; transform: scale(1.05); }
.profile-name { font-size: 1.25rem; font-weight: 700; letter-spacing: .08em; color: #171717; }

.social-btn { width: 36px; height: 36px; border-radius: 50%; background: #e5e5e5; color: #404040; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; font-size: .875rem; transition: all .2s; }
.social-btn:hover { background: var(--red); color: #fff; }
.social-btn-sm { width: 32px; height: 32px; font-size: .75rem; }

/* ---------- Services ---------- */
.service-card { height: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1.5rem; border-radius: .5rem; background: rgba(23,23,23,.5); border: 1px solid #262626; transition: border-color .3s; }
.service-card:hover { border-color: rgba(229,57,53,.4); }
.service-icon { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; color: var(--red); font-size: 2.25rem; margin-bottom: 1rem; }
.service-card h3 { font-family: var(--font-heading); font-weight: 400; font-size: 1.5rem; letter-spacing: .05em; color: #fff; margin-bottom: .5rem; }
.service-card > p { font-size: .75rem; color: #a3a3a3; line-height: 1.6; margin-bottom: 1.5rem; }
.service-list { list-style: none; padding: 1.25rem 0 0; margin: 0; width: 100%; text-align: left; border-top: 1px solid rgba(38,38,38,.8); font: .75rem var(--font-body); color: #d4d4d4; }
.service-list li { display: flex; align-items: center; gap: .5rem; margin-bottom: .65rem; }
.service-list li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--red); }

/* ---------- Works ---------- */
.project { background: #fff; padding: 2rem 1.5rem; margin: 0; border: 1px solid rgba(229,229,229,.8); border-radius: .75rem; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
@media (min-width: 576px) { .project { padding: 2rem; } }
.project-title { font-size: 1.5rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #171717; margin: .25rem 0 0; }
.project-tech { font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #a3a3a3; margin: .125rem 0 0; }

.device { background: #171717; padding: .5rem; border: 1px solid #262626; border-radius: .5rem; box-shadow: 0 20px 25px -5px rgba(0,0,0,.2); }
@media (min-width: 576px) { .device { padding: .75rem; } }
.device-bar { display: flex; align-items: center; gap: 6px; padding: 0 .25rem .5rem; }
.device-bar .dot { width: 10px; height: 10px; border-radius: 50%; background: #404040; }
.device-url { font: 11px ui-monospace, monospace; color: #a3a3a3; margin-left: .5rem; }
.device-screen { border-radius: .25rem; color: #fff; }
.device-screen > div { height: 100%; }
.grad-red   { background: linear-gradient(135deg, #262626, #171717, #000); }
.grad-sky   { background: linear-gradient(135deg, #0f172a, #171717, #000); }
.grad-dark  { background: linear-gradient(135deg, #171717, #0a0a0a, #171717); }
.grad-amber { background: linear-gradient(135deg, rgba(69,26,3,.4), #171717, #000); }
.chip { font-size: 10px; padding: .125rem .5rem; border-radius: .25rem; background: #404040; }
.stat-box { background: rgba(38,38,38,.8); border: 1px solid #404040; border-radius: .25rem; padding: .6rem; }
.stat-label { display: block; font-size: 10px; text-transform: uppercase; color: #a3a3a3; }
.stat-label-lg { display: block; font-size: 11px; font-weight: 600; margin-top: .25rem; }
.device-caption { font: 11px ui-monospace, monospace; color: #a3a3a3; text-align: center; }
.ring { width: 96px; height: 96px; border: 4px solid rgba(56,189,248,.8); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ring .stat-label { font-size: 9px; letter-spacing: .08em; }
.tag { display: inline-block; font-size: 10px; padding: .125rem .375rem; border-radius: .25rem; text-transform: uppercase; font-weight: 700; }

/* ---------- Experience ---------- */
.panel { background: rgba(23,23,23,.6); padding: 2rem; border: 1px solid #262626; border-radius: .75rem; }
.panel-head { display: flex; align-items: center; gap: .75rem; padding-bottom: 1rem; margin-bottom: 1.5rem; border-bottom: 1px solid #262626; }
.panel-head h3 { font-family: var(--font-heading); font-weight: 400; font-size: 1.5rem; letter-spacing: .05em; color: #fff; margin: 0; }
.panel-head p { font-size: .75rem; color: #a3a3a3; margin: 0; }
.panel-icon { width: 40px; height: 40px; border-radius: .5rem; display: flex; align-items: center; justify-content: center; font-size: 1.125rem; }
.panel-icon-red { background: rgba(229,57,53,.2); color: var(--red); }
.panel-icon-blue { background: rgba(59,130,246,.2); color: #38bdf8; }

.timeline { position: relative; padding-left: 1.5rem; border-left: 2px solid #262626; display: flex; flex-direction: column; gap: 2rem; }
.timeline-item { position: relative; }
.timeline-dot { position: absolute; left: -31px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: #525252; border: 2px solid #171717; }
.timeline-dot.active { background: var(--red); }
.timeline-item h4 { font-size: 1rem; font-weight: 700; text-transform: uppercase; color: #fff; margin: 0; }
.date-pill { font-size: .75rem; font-weight: 600; padding: .125rem .5rem; border-radius: .25rem; background: #262626; color: #a3a3a3; }
.date-pill-red { background: rgba(229,57,53,.2); color: #fca5a5; }
.org { font-size: .75rem; font-weight: 500; letter-spacing: .04em; color: var(--red); margin: .125rem 0 0; }
.desc { font: .75rem/1.6 var(--font-body); color: #a3a3a3; margin-top: .5rem; }

.cert-card { background: #0a0a0a; padding: 1.5rem; border: 1px solid rgba(38,38,38,.9); border-radius: .5rem; }
.cert-year { font-size: .75rem; background: #082f49; color: #7dd3fc; padding: .125rem .5rem; border: 1px solid #075985; border-radius: .25rem; }
.cert-title { font-size: 1.125rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff; margin: 0; }
.badge-box { padding: .5rem; background: rgba(10,10,10,.8); border: 1px solid #262626; border-radius: .25rem; font: 11px ui-monospace, monospace; color: #a3a3a3; }

/* ---------- Contact ---------- */
.contact { background: #f8f8f9; border-top: 1px solid #e5e5e5; }
.map-wrap { position: relative; height: 320px; background: #d4d4d4; border-bottom: 1px solid #d4d4d4; overflow: hidden; }
.map-frame { width: 100%; height: 100%; border: 0; filter: grayscale(1) contrast(1.25); opacity: .7; }
.map-badge { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; background: rgba(23,23,23,.9); color: #fff; padding: .5rem 1rem; border: 1px solid var(--red); border-radius: 999px; font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 25px 50px -12px rgba(0,0,0,.5); }
.bounce { animation: bounce 1s infinite; display: inline-block; }
@keyframes bounce { 0%, 100% { transform: translateY(-25%); } 50% { transform: none; } }

.contact-lead { max-width: 32rem; font-family: var(--font-body); }
.contact-form { max-width: 36rem; }
.contact-form .form-label { font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #404040; margin-bottom: .25rem; }
.contact-form .form-control { font-size: .75rem; padding: .625rem .875rem; background: #f5f5f5; border: 1px solid #d4d4d4; border-radius: .25rem; }
.contact-form .form-control:focus { background: #fff; border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }
.contact-form textarea { resize: none; }

.contact-list { font: .75rem var(--font-body); color: #525252; }
.contact-list li { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: .75rem; }
.contact-list i { color: var(--red); margin-top: 2px; }
.contact-list strong { display: block; font-size: 11px; text-transform: uppercase; color: #262626; }
.contact-list a { color: inherit; text-decoration: none; transition: color .2s; word-break: break-word; }
.contact-list a:hover { color: var(--red); }

/* ---------- Footer ---------- */
.site-footer { background: #0b0c0e; padding: 2rem 0; border-top: 1px solid rgba(255,255,255,.05); font: .75rem var(--font-body); color: #737373; text-align: center; }
.site-footer p { font-size: 11px; }
.footer-logo { width: 24px; height: 24px; border-radius: 50%; background: #fff; padding: 2px; object-fit: cover; }
.footer-brand { color: #a3a3a3; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.footer-top { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #a3a3a3; text-decoration: none; transition: color .2s; }
.footer-top:hover { color: var(--red); }

/* ---------- Accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pulse-dot, .bounce { animation: none; }
  * { transition: none !important; }
}

/* Project screenshots uploaded from the admin panel */
.device-img { object-fit: cover; object-position: top center; }